@charset "UTF-8";

.main_top_slide1 {
background: url(//vn.idhospital.com/wp-content/themes/zeein/assets/img/pages/submain/main_surgerys/main_top_slide1.jpg)no-repeat 69% bottom;
background-size: cover;
height: 650px;
}
.main_top_slide2 {
background: url(//vn.idhospital.com/wp-content/themes/zeein/assets/img/pages/submain/main_surgerys/main_top_slide2.jpg)no-repeat 69% bottom;
background-size: cover;
height: 650px;
}
.swiper-top-container {
position: relative;
overflow: hidden;
}
.swiper-top-container .swiper-pagination-default{
position: absolute;
bottom: 30px;
left: 0;
right: 0;
z-index: 1000;
text-align: center;
}
.swiper-top-container .swiper-pagination-default .swiper-pagination-bullet {
width: 90px;
height: 10px;
border-radius: 0;
opacity: 1;
background-color: transparent;
border: 1px solid #fff;
margin: 0 3px !important;
}
.swiper-top-container .swiper-pagination-default .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #fff;
}
.visual_txt {
margin-top: 150px;
}
.visual_txt h2 {
font-weight:bold;
color:#fff;
font-size: 4rem;
}
.visual_txt span {
color:#aaaaaa;
font-size: 2rem;
}
.mans_class {
padding:6% 0 3%;
background: #fff;
}
.mans_class h3 {
color:#000;
text-align: center;
}
.mans_class h3 span {
font-size:75%;
}
.mans_class .mans_list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top:5%;
padding:0 10%;
}
.mans_class .mans_list > li {
padding:3% 1%;
width: 33.3%;
text-align: center;
border-left:1px solid #ddd;
border-top:1px solid #ddd;
}
.mans_class .mans_list > li:nth-child(1),
.mans_class .mans_list > li:nth-child(4n) {
border-left:0;
}
.mans_class .mans_list > li:nth-child(1),
.mans_class .mans_list > li:nth-child(2),
.mans_class .mans_list > li:nth-child(3) {
border-top: 0;
}
.mans_class .mans_list > li .mans_img {
display: inline-block;
position: relative;
height:80%;
}
.mans_class .mans_list > li .mans_img img {
vertical-align: middle;
}
.mans_class .mans_list > li dl,
.mans_class .mans_list > li dd {
margin:0;
}
.mans_class .mans_list > li dt {
font-size:3.5em;
font-weight:bold;
}
.mans_class .mans_list > li dd {
font-size:1em;
}
.mans_class .mans_list > li dd a {
display: inline-block;
padding: 1% 5%;  border: 1px solid #2d3a49;
border-radius: 40px;
color: #2d3a49;
text-align: center;
line-height: 30px;
font-size: 14px;
margin: 10px auto 0;
transition: all 0.3s;
} .mans_selfie {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 5%;
padding: 0 10%;
background-color: #f4f4f4;
} .cont02_tit{padding-bottom: 25px;text-align: center;}
.cont02_imgbox{ }
.cont02_big_img{float: left;width: 560px;height: 560px;position: relative;margin-right: 11px;}
.img_scroll{position: absolute;top:0;left: 0;z-index: 100;cursor: pointer;height: 100%;}
.cont02_big_img .man_img{position: absolute;left:0;top:0;width:100%;height:100%}
.cont02_big_img .man_img img{position: absolute;top:0;left: 0;}
.cont02_small_img{float: right;width: 550px;}
.cont02_small_img ul {font-size: 0;}
.cont02_small_img ul li{display: inline-block;vertical-align: top; width: 176px;height: 176px;margin-bottom: 15px;box-sizing: border-box;position: relative;cursor: pointer;}
.cont02_small_img ul li span{display: block;width: 176px;height: 176px;box-sizing: border-box;transition: all 0.2s;position: absolute;top:0;left: 0;z-index: 10} .cont02_small_img ul li:hover span{border:10px solid #222;}
.cont02_small_img ul li>img{width: 100%;}
.cont02_small_img ul li:nth-child(3n+2){margin: 0 10px;}
.cont02_btn{width: 500px;height: 160px;background-color: #fff;border:1px solid #dedede;box-sizing: border-box;text-align: center;padding: 15px 0 30px;position: absolute;bottom: -70px;left: 30px;letter-spacing: -1px;z-index:2;}
.cont02_btn>span{display: block;font-size: 18px;color:#000;padding-bottom: 8px;margin: 0;padding: 0;}
.cont02_btn>p{font-size: 24px;color:#000;margin: 0;}
.cont02_btn a{display: block;width: 244px;height: 50px;background-color: #222;line-height: 50px;color:#fff;font-size: 16px;text-align: center;margin: 10px auto 0;} .man_center_cont03{background: #fff;letter-spacing: -1px;padding: 5% 20%;}
.cont03_list{font-size: 0;}
.cont03_list li {display: inline-block;width: 32.3%; padding-bottom: 5px;position: relative;}
.cont03_list li:nth-child(3n+2){margin: 0 5px;}
.cont03_list li a{display: block;box-sizing: border-box;position: relative;overflow: hidden;}
.cont03_list li a>img{transition:all 0.3s;}
.cont03_list li:hover a>img{transform: scale(1.1);}
.cont03_list_txtbox{position: absolute;left:30px;bottom: 40px;}
.cont03_list_txtbox>span{
display: block;
font-size: 13px;
color:#555;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.cont03_list_txtbox>p{font-size: 18px;color:#222;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;} .mans_selfie_mo {width:100%; background:#10182f; overflow:hidden; padding:8% 0 11% 0; display:none}
.mans_selfie_title {display:block; width:70%; margin:0 auto 5% auto;}
.mans_selfie_big {float:left; width:calc(78% - 10px); max-height:99.3vw;}
.mans_selfie_big .swiper-wrapper {}
.mans_selfie_big .swiper-wrapper .swiper-slide {width:100%;}
.mans_selfie_bna_wrap {position:relative;}
.mans_selfie_big_thumb_bf { }
.mans_selfie_big_thumb {position:relative}
.mans_selfie_bna_btn {position:absolute; top:50%; left:10%; width:10vw; height:10vw; margin:-5vw 0 0 0;}
.mans_selfie_bna_btn::after {content:""; display:block; width:1px; height:100vw; background:#fff; position:absolute; left:50%; top:-350%;}
.mans_selfie_txtbox {background:#fff; padding:4% 0; z-index:9;position:relative}
.mans_selfie_txtbox > dl {text-align:center; line-height:1.2;}
.mans_selfie_txtbox > dl > dt {font-size:3vw;}
.mans_selfie_txtbox > dl > dd {font-size:4vw;margin: 0;padding-top: 7px;}
.mans_selfie_txtbox > a {display:block; }
.mans_selfie_txtbox > a.quick_onlinebtn {position:static; width:40vw; height:8vw; line-height:8vw; text-align:center; color:#fff; background:#222; margin:3% auto 0 auto;}
.mans_selfie_small {float:right;width:22%;max-height: 104vw;margin: 0 auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1;}
.mans_selfie_small .swiper-wrapper {}
.mans_selfie_small .swiper-wrapper .swiper-slide { width:100%;  box-sizing:border-box;}
.mans_selfie_small .swiper-wrapper .swiper-slide.swiper-slide-active {border:4px solid #fff; position:relative;}
.mans_selfie_small .swiper-wrapper .swiper-slide.swiper-slide-active::after {content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(255,255,255,0.2);}
.mans_selfie_small .swiper-wrapper .swiper-slide > img {}
@media screen and (max-width: 991px) {
.swiper-top-container {
width: 100%;
}
.main_top_slide1 {
background: url(//vn.idhospital.com/wp-content/themes/zeein/assets/img/pages/submain/main_surgerys/main_top_slide1_m.jpg)no-repeat 69% bottom;
height: 270px;
}
.main_top_slide2 {
background: url(//vn.idhospital.com/wp-content/themes/zeein/assets/img/pages/submain/main_surgerys/main_top_slide2_m.jpg)no-repeat 69% bottom;
height: 270px;
}
.swiper-top-container .swiper-pagination-default {
bottom: 5px;
}
.visual_txt {
margin-top: 86px;
}
.visual_txt h2 {
font-size: 1.5rem;
}
.visual_txt span {
font-size: 1rem;
}
.mans_class .mans_list {
padding: 0%;
margin-bottom: 10%;
}
.mans_selfie_mo {display:block}
.mans_selfie {display:none}
.man_center_cont03 {
padding: 0;
}
.cont03_list li {
width: 50%;
}
.cont03_list li:nth-child(3n+2) {
margin: 0;
}
.cont03_list_txtbox {
left: 10px;
bottom: 10px;
}
.cont03_list_txtbox>span {
font-size: 2.7vw;
}
.cont03_list_txtbox>p {
font-size: 4vw;
}
}