@charset "UTF-8";

.main_top_slide1 {
background: url(//eng.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(//eng.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 h1 {
text-align: center;
font-size: 300%;
}
.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_tit {
text-align: center;
}
.cont03_tit h2 {
margin: 0 0 3rem 0;
font-size: 2.3rem;
}
.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 > h3 {
margin: 0.5rem 0 1rem;
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(//eng.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(//eng.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: 3rem 0 0 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 > h3 {
font-size: 4vw;
}
}