@charset "utf-8";



/* com_btn */
.com_btn .btn{background-color: #fff; transition: all 0.3s; color: #222; padding: 1.29em 1.5em; }
.com_btn .btn .brands_name{font-weight: 900; display: inline-block; margin-right: 6px;}
.com_btn:hover .btn{background-color: #222; color: #fff;}

@media screen and (max-width:580px) {
    .com_btn .btn{padding: 1em 1.5em;}
}

/* main visual */
.main_visual_wrap{position: relative; width: 100%; min-width: 280px;}
.main_visual_wrap .main_visual{width: 100%; height: 28.125em;}
.main_visual_wrap .main_visual .list{width: 100%; height: 100%;}
.main_visual_wrap .main_visual .list .img{ width: 100%; height: 100%; background-image: url(../img/main_visual.jpg); background-repeat: no-repeat; background-position: center;}
.main_visual_wrap .main_visual .list .txt{ display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 35%; min-width: 160px; max-width: 300px; text-align: center;}

@media screen and (max-width:940px) {
    .main_visual_wrap .main_visual{height: 24em;}
    .main_visual_wrap .main_visual .list .img{background-image: url(../img/main_mob_visual.jpg); background-size: cover;}
}
@media screen and (max-width:580px) {
    .main_visual_wrap .main_visual{height: 19em;}
}

/* main_content */
.main_content{ position: relative; background: url(../img/main_content_bg.jpg) top center; }
.main_content .cont_wrap{width: 100%; position: relative;padding: 7em 0; }
.main_content .cont_wrap .cont_list{width: 86.57%; margin: 0 auto; }
.main_content .cont_wrap .cont_list .list .img{ width: 22.5em; height: 15em; min-width: 230px; background-position: center; background-repeat: no-repeat;}

.main_content .cont_wrap .cont_list .list .txt_box { width: calc(85% - 22.5em); padding-left: 2.19em; margin-top: 8px;}
.main_content .cont_wrap .cont_list .list .txt_box .tit{font-size: 1.25em; font-weight: 700; margin-bottom: 0.7em; text-transform: uppercase;}
.main_content .cont_wrap .cont_list .list .txt_box .desc{color: #666; font-weight: 500; line-height: 1.625em; margin-bottom: 2.81em; word-break: keep-all; }
.main_content .cont_wrap .cont_list .list .txt_box .desc span { display: block; margin-top: 1.625em; }
.main_content .cont_wrap .cont_list .list .txt_box .desc span:first-child { margin-top: 0; }

.main_content .cont_wrap .swiper_arrow{ display: none; width: 3.125em; height: 3.125em; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer;}
.main_content .cont_wrap .swiper_arrow.next{right: 0;}
.main_content .cont_wrap .swiper_arrow.prev{left: 0;}
.main_content .cont_wrap .swiper_arrow i{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1.25em;}

@media screen and (min-width:941px) {
  .main_content .cont_wrap .cont_list .list .txt_box { position: absolute; left: 22.5em; top: 50%; transform: translateY(-50%); }
}

@media screen and (max-width:1245px) and (min-width:941px) {
  .main_content .cont_wrap .cont_list .list .txt_box .desc span br { display: none; }
}

@media screen and (max-width:940px) {
    .main_content .cont_wrap { padding: 0; }
    .main_content{padding: 3.25em 0 2.25em; }
    .main_content .cont_wrap .cont_list{width: 100%;}
    .main_content .cont_wrap .cont_list .list .img{width: 54%; height: auto; padding-top: 35%; margin: 0 auto; }
    .main_content .cont_wrap .cont_list .list .txt_box{width: 80%; text-align: center; padding-left: 0; margin: 2em auto 0; }
    .main_content .cont_wrap .cont_list .list .txt_box .tit{font-size: 1.5em; margin-bottom: 1.1em;}
    .main_content .cont_wrap .cont_list .list .txt_box .desc{height: auto; line-height: 1.25em; margin-bottom: 2em; overflow: inherit;}
    .main_content .cont_wrap .swiper_arrow{top: 25%; transform: translate(0);}
}
@media screen and (max-width:767px) {
    .main_content .cont_wrap .cont_list .list .txt_box .desc br{display: none;}
}
@media screen and (max-width:580px) {
    .main_content .cont_wrap .cont_list .list .txt_box{}
    .main_content .cont_wrap .cont_list .list .txt_box{margin-top: 1.7em;}
    .main_content .cont_wrap .cont_list .list .txt_box .tit{margin-bottom: 0.8em;}
    .main_content .cont_wrap .cont_list .list .txt_box .desc{margin-bottom: 1.67em;}
    .main_content .cont_wrap .swiper_arrow{width: 2.5em; height: 2.5em; top: 15%;}
}
@media screen and (max-width:480px) {
    .main_content .cont_wrap .cont_list .list .img{padding-top: 0; height: 150px;}
}