@charset "utf-8";
/* CSS Document */
.main_container {width:100%; position:relative; padding-top:150px;}
.main_visual_01 {width:100%; height:676px; margin:72px auto 0; overflow:hidden; position:relative;}
.main_visual_01 .imgs {width:100%; height:100%; position:relative; overflow:hidden; background-color:#000;}
.main_visual_01 .imgs li {width:100%; height:100%; position:absolute; top:0; left:100%;}
.main_visual_01 .imgs li.li_01 {left:0; background:url('../../img/images/main_visual10.jpg') center 0 no-repeat;}
.main_visual_01 .imgs li.li_02 {background:url('../../img/images/main_visual11.jpg') center 0 no-repeat;}
.main_visual_01 .imgs li.li_03 {background:url('../../img/images/main_visual3.jpg') center 0 no-repeat;}



.main_visual_01 .indis {width:100%; position:absolute; left:0; bottom:30px; text-align:center;}
.main_visual_01 .indis ul {display:inline-block; margin:0 auto; overflow:hidden;}
.main_visual_01 .indis ul li {float:left; margin-right:5px; position:relative;}
.main_visual_01 .indis ul li a {width:100%; height:100%; display:block;}
.main_visual_01 .bn_wrap {width:1400px; height:45px; position:absolute; top:50%; left:50%; margin:-13px 0 0 -700px;}
.main_visual_01 .bn_wrap .bns {position:absolute; top:0;}
.main_visual_01 .bn_wrap .bns a {width:100%; height:100%; display:block;}
.main_visual_01 .bn_wrap .left_bn {left:0;}
.main_visual_01 .bn_wrap .right_bn {right:0;}


#middle2 {position:relative;clear:both;width:100%;background:url(../../img/images/middle2_bg.jpg) center top no-repeat;height:653px;}
#middle2 .middle2_banner {width:1200px;margin:0px auto;}
#middle2 .middle2_banner ul {padding-top:86px;}
#middle2 .middle2_banner ul li {display:inline-block;margin-right:20px;}
#middle2 .middle2_banner ul li:last-child {margin-right:0px;}
#middle2 .wrap-img, #middle2 .wrap-img2 { width:590px; height:480px; overflow:hidden; }
#middle2 .wrap-img2:hover img, #middle2 .wrap-img:hover img {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transition:.3s;
-moz-transition:.9s;
-ms-transition:.9s
}
.wrap-img img, .wrap-img2 img {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s
}
#middle3 {position:relative;clear:both;width:100%;height:699px;background:url(../../img/images/middle3_bg.jpg) center top no-repeat;}
#middle3 .middle3_banner {position:relative;width:1200px;margin:0px auto;}
#middle3 .middle3_banner1 {position:relative;width:600px;float:left;}
#middle3 .middle3_banner2 {position:relative;width:600px;float:left;height:349px;}
#middle3 .middle3_banner2 span {display:block;padding-top:96px;padding-left:43px;}
#middle3 .middle3_banner3 {position:relative;width:600px;float:left;}
#middle3 .middle3_banner3 span {display:block;padding-top:92px;padding-left:43px;}
#middle4 {position:relative;clear:both;width:1200px;margin:86px auto;height:672px;}
#middle4 .left {float:left;width:839px;}
#middle4 .left ul {}
#middle4 .left ul.top li {float:left;margin-right:13px;}
#middle4 .left ul.top li:last-child {margin-right:0px;}
#middle4 .left ul.bottom {float:left;margin-top:13px;}
#middle4 .left ul.bottom li {float:left;margin-right:13px;}
#middle4 .left ul.bottom li:last-child {margin-right:0px;}
#middle4 .right {float:right;width:348px;}
#bottom_img {position:relative;clear:both;width:1200px;margin:0px auto 86px;height:200px;}
#bottom_img ul li {float:left;margin-right:13px;}
#bottom_img ul li:last-child {margin-right:0px;}



.derma_tv{
padding:95px 0 70px;
}
.derma_tv .inner{
width: 1685px;
margin:0 auto;
overflow: hidden;
max-width: 100%;
}
.derma_tv .derma_video{
position: relative;
background-color: #000;
border:10px solid #005ba2;
box-sizing: border-box;
width: 975px;
height: 549px;
float: left;
}
.derma_tv .derma_video iframe{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
width: 100%;
height: 100%;
}
.derma_tv .derma_text{
width: 515px;
float:right;
text-align: left;
padding-top: 125px;
}
.derma_tv .derma_text .txt_img{
font-size:0;
margin-bottom: 41px;
}
.derma_tv .derma_text .txt_img img{
display: inline-block;
vertical-align: middle;
}
.derma_tv .derma_text .txt_img img+img{
margin-left: 16px;
}
.derma_tv .derma_text div strong{display: block;color:#141414;font-size:18px;letter-spacing: -0.02em;line-height: 1.4em;font-weight: 500;}
.derma_tv .derma_text div p{margin-top: 16px;color:#7c7c7c;font-size:18px;letter-spacing: -0.02em;line-height: 1.4em;font-weight: 500;}
.derma_tv .derma_text>a{
margin-top: 45px;
display: block;
background-color: #fff;
border:3px solid #000c3f;
width: 160px;
font-size:0;
box-sizing: border-box;
text-align: center;
padding:19px 0;
}
.derma_tv .derma_text>a img{
display: inline-block;
vertical-align: middle;
}


.section{
float: left;
width: 100%;
}
.section_top{
overflow: hidden;
}
.section_top h3.section_tit{
float: left;
font-size:30px;
font-weight: 700;;
color:#141414;
}
.section_top a{float:right;margin-right: 70px;padding-top: 7.5px;}
.section_top a img{
display: block;
}
.main_section2{
margin-bottom: 80px;
}
.main_section2 .inner{
width: 1685px;
margin:0 auto;
overflow: hidden;
max-width: 100%;
}
.main_section2 .section_top{
border-bottom: 3px solid #7f7f7f;
margin-bottom: 35px;
padding-bottom: 13px;
}
.main_section2 .info_list{
overflow: hidden;
}
.main_section2 .info_item{
float: left;
width: 405px;
}
.main_section2 .info_item+.info_item{
margin-left: 21px;
}
.main_section2 .info_item a{
display: block;
}
.main_section2 .info_item .thumb img{
display: block;
margin:0 auto;
max-width: 100%;
width: 100%;
}
.main_section2 .info_item .txt{
position: relative;
margin-top: 15px;
padding-left: 51px;
padding-right: 20px;
}
.main_section2 .info_item .txt .profile{
position: absolute;
left:0;
top:0;
}
.main_section2 .info_item .txt .profile img{
display: block;
}
.main_section2 .info_item .txt .title{
font-size:17px;
color:#141414;
line-height: 1.6em;
/* letter-spacing: -0.03em; */
font-weight: 500;
word-break: keep-all;
}
.main_section2 .info_item .txt .writer{
display: block;
margin-top: 3px;
font-size:17px;
color:#7c7c7c;
line-height: 1.6em;
letter-spacing: -0.03em;
font-weight: 500;
}


.main_section3{
background-color: #f4f4f4;
padding:90px 0 56px;
}
.main_section3 .inner{
width: 1583px;
margin:0 auto;
overflow: hidden;
max-width: 100%;
}
.main_section3 .section_top,
.main_section4 .section_top{
margin-bottom: 22px;
}
.main_section3 .section_top h3.section_tit,
.main_section4 .section_top h3.section_tit{font-size:0;}
.main_section3 .section_top h3.section_tit>*,
.main_section4 .section_top h3.section_tit>*{display: inline-block;vertical-align: middle;font-weight: 700;font-size:22px;}
.main_section3 .section_top h3.section_tit span,
.main_section4 .section_top h3.section_tit span{color:#141414;}
.main_section3 .section_top h3.section_tit strong,
.main_section4 .section_top h3.section_tit strong{color:#034cb0;margin-left: 10px;}
.main_section4 .section_top .section_top a{padding-top: 2px;}
.main_section3 .best_list{overflow: hidden;}
.main_section3 .best_item{float: left;width: 499px;}
.main_section3 .best_item+.best_item{margin-left: 43px;}
.main_section3 .best_item a{display: block;}
.main_section3 .best_item .thumb img{display: block;width: 100%;max-width: 100%;}
.main_section3 .best_item .txt{background-color: #fff;border:1px solid #7c7c7c;border-top: 0;padding:20px 30px;}
.main_section3 .best_item .txt .q{}
.main_section3 .best_item .txt .q .title{font-size:20px;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;}
.main_section3 .best_item .txt .q .title:before{content:'';background-image: url(../../img/images/best_q.png);width: 23px;height: 19px;background-repeat: no-repeat;display: inline-block;margin-right: 6px;}
.main_section3 .best_item .txt .q p{color:#222222;font-size:16px;line-height: 19px;font-weight: 400;margin-top: 10px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
max-height: 38px;
}
.main_section3 .best_item .txt .a{margin-top:14px;}
.main_section3 .best_item .txt .a p:before{content:'';background-image: url(../../img/images/best_a.png);width: 23px;height: 19px;background-repeat: no-repeat;display: inline-block;margin-right: 6px;vertical-align: middle;}
.main_section3 .best_item .txt .a p{color:#222222;font-size:16px;line-height: 19px;font-weight:400;;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}


.main_section4{
padding:82px 0;
}
.main_section4 .inner{
width: 1583px;
margin:0 auto;
overflow: hidden;
max-width: 100%;
}
.main_section4 .info_slide .swiper-slide{
width: 296px;
margin-right: 52px;
}
.main_section4 .info_slide .thumb{}
.main_section4 .info_slide .thumb img{
max-width: 100%;
display: block;
margin:0 auto;
}
.main_section4 .info_slide .txt{
margin-top: 9px;
}
.main_section4 .info_slide .txt .title{font-size: 17px;
color: #141414;
line-height: 1.3em;
/* letter-spacing: -0.03em; */
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main_section4 .info_slide .txt .desc{
display: block;
margin-top: 5px;
font-size: 17px;
color: #7c7c7c;
line-height: 1em;
letter-spacing: -0.03em;
font-weight: 500;
}


.main_social{
text-align: center;
float: left;
width: 100%;
padding:40px 0 120px;
}
.main_social ul{
font-size:0;
}
.main_social ul li{
display: inline-block;
vertical-align: middle;
}
.main_social ul li+li{
margin-left: 18px;
}
.main_social ul li a,
.main_social ul li a img{
display: block;
margin:0 auto;
max-width: 100%;
}


@media (max-width:1685px){
.derma_tv .inner,
.main_section2 .inner{
width:1400px;
}
.derma_tv .derma_video{
width: 860px;
height: 493px;
}
.derma_tv .derma_text{
width: 480px;
padding-top: 100px;
}


.main_section2 .info_item{
width: 334.25px;
}


.main_section3 .inner,
.main_section4 .inner{
width:1400px;
}
.main_section3 .best_item{
width: 450px;
}
.main_section3 .best_item+.best_item{
margin-left: 25px;
}
}
@media (max-width:1400px){
.derma_tv .inner,
.main_section2 .inner,
.main_section3 .inner,
.main_section4 .inner{
width:1200px;
min-width: 1200px;
}
.derma_tv .derma_video{
width: 740px;
height: 427px;
}
.derma_tv .derma_text{
width: 400px;
padding-top: 60px;
}


.main_section2 .section_top{
margin-bottom: 25px;
padding-bottom: 10px;
}
.main_section2 .info_item{
width: 291px
}
.main_section2 .info_item+.info_item{
margin-left: 12px;
}


.main_section3 .best_item{
width: 392px;
}
.main_section3 .best_item+.best_item{
margin-left: 12px;
}
.section_top a{
margin-right: 30px;
}


.main_section4 .info_slide .swiper-slide{
margin-right: 20px;
}
}