@charset "utf-8";

/* subContent */
#subContent{padding-top: 100px; font-size: var(--fz16); min-height: 640px;}

@media all and (max-width:976px){
	#subContent{padding-top: 60px;}
}

/* sub_title */
.sub_title{font-size: var(--fz24); color: #212121; margin-bottom: 30px; font-weight: 500; text-align: center;}


/* intro */

#isec_1{width: 100%; display: flex; height: 2160px; position: relative;  background-color: #efefef;}
#isec_1 .l_side{width: 50%; background: url('/images/sub/intro_bg1.jpg') no-repeat center bottom; padding-top: 230px; padding-left: 240px; position: sticky; top: 0px; height: 1080px;}
#isec_1 .l_side::after{content: 'D O C T O R S';position: absolute; top: 45%; left: -400px; font-weight: bold; font-family: 'Montserrat'; font-size: 120px; color: #d7d7d7; transform: rotate(90deg) translatey(-50%);} 
#isec_1 h1{font-weight: normal; font-size: 36px; color: #777;}
#isec_1 h1 span.under{font-weight: bold; position: relative; color: #000;}
#isec_1 h1 span.under::after{content: ''; position: absolute; width: 360px; height: 1px; background-color: #000; bottom: 5px; left: 0;}
#isec_1 p{margin-top: 40px; line-height: 25px;}
#isec_1 .l_side .scr{width: 25px; margin-top: 80px;}
#isec_1 .l_side .scr img{width: 100%;}
#isec_1 .r_side{width: 50%;color: #333333; }
#isec_1 .r_side h2{font-size: 40px; font-weight: 500;}
#isec_1 .r_side .small{font-weight: normal; font-size: 20px;}
#isec_1 .r_side ul{margin-top: 40px;}
#isec_1 .r_side ul li{margin-top: 10px; padding-left: 5px;}
#isec_1 .r_side ul li::before{content: '•'; padding-right: 5px;}
#isec_1 .r_side .img{background-size: cover; background-repeat: no-repeat; background-position: top center; width: 100%; height: 100vh;}
#isec_1 .r_side .img.img1{background-image: url(/images/sub/intro_doctor1.webp);}
#isec_1 .r_side .img.img2{background-image: url(/images/sub/intro_doctor2.webp);}
#isec_1 .r_side .img.img3{background-image: url(/images/sub/intro_doctor3.webp);}
#isec_1 .r_side .img.img4{background-image: url(/images/sub/intro_doctor4.webp);}
#isec_1 .r_side .img.img5{background-image: url(/images/sub/intro_doctor5.webp);}
#isec_1 .r_side .img.img6{background-image: url(/images/sub/intro_doctor6.webp);}
#isec_1 .r_side .img.img7{background-image: url(/images/sub/intro_doctor7.webp);}
#isec_1 .r_side .img.dentist1.img3{background-image: url(/images/sub/intro_doctor3.webp);}
#isec_1 .r_side .img.dentist1.img6{background-image: url(/images/sub/intro_doctor6.webp);}
/*
#isec_1 .r_side .dentist1{ background: url('/images/sub/intro_bg2.jpg')  center top; height: 50%;}
#isec_1 .r_side .dentist2{ background: url('/images/sub/intro_bg2.jpg')  center top; height: 50%;}
*/
#isec_1 .r_side .scan{}
#isec_1 .r_side .scan .d-inner{width: 100%; padding-left: 100px; color: #333333; height: 100%; transition: 2s; display: flex; flex-direction: column; justify-content: center;}
#isec_1 .r_side .scan.on .d-inner{backdrop-filter:blur(8px);}

@media screen and (max-width: 1500px){
    #isec_1 .l_side{padding-left: 150px;}
}

@media screen and (max-width: 1340px){
    #isec_1{height: 1485px;}
    #isec_1 .l_side::after{left: -330px;font-size: 100px;} 
    #isec_1 .l_side{padding-top: 100px; padding-left: 150px; height: 800px; top: 80px;}
    #isec_1 h1{font-size: 30px; color: #777;}
    #isec_1 h1 span.under::after{width: 300px;}
    #isec_1 p{margin-top: 30px;font-size: 14px;}

    #isec_1 .r_side h2{font-size: 35px;}
    #isec_1 .r_side .small{font-size: 16px;}
    #isec_1 .r_side ul{margin-top: 30px;}
    #isec_1 .r_side ul li{margin-top: 6px;}
    #isec_1 .r_side .scan .d-inner{width: 100%;padding-left: 80px;}
}

@media screen and (max-width: 1200px){
    #isec_1 .l_side{padding-left: 100px;}
    #isec_1 .l_side::after{left: -280px;font-size: 80px;} 
}

@media screen and (max-width: 1075px){
    #isec_1{flex-wrap: wrap; height: 100%;}
    #isec_1 .l_side{width: 100%; display: revert; height: 300px; padding-top: 70px; background-size: cover; position: static}
    #isec_1 .l_side:before {content : ""; position: absolute; top: 0;left: 0; width: 100%; background-color: #fff; height: 300px; opacity : 0.5; z-index: -1;}
    #isec_1 .l_side::after{font-size: 30px; left: -70px;} 
    #isec_1 .l_side .scr{display: none;}
    #isec_1 .r_side{width: 100%;}
    #isec_1 .r_side h2{font-size: 35px;}
    #isec_1 .r_side .small{font-size: 16px;}
    #isec_1 .r_side ul{margin-top: 30px;}
    #isec_1 .r_side ul li{margin-top: 6px;}
    #isec_1 .r_side .scan .d-inner{width: 100%;  padding-left: 50px; padding-top: 100px; padding-bottom: 100px;}
    #isec_1 .r_side .dentist1, #isec_1 .r_side .dentist2{background-size: cover; min-height: 85vh;}
/*    #isec_1 .r_side .dentist2{margin-bottom: 300px;}*/
	#isec_1 .r_side .img{height: 80vh;}
}
@media screen and (max-width: 976px){
    #isec_1{margin-top: 100px;}
    #isec_1 .l_side{top: 50px;}
}
@media screen and (max-width: 568px){
    #isec_1 .l_side{padding-left: 60px;}
    #isec_1 .l_side::after{left: -50px;font-size: 20px;} 

    #isec_1 .r_side h2{font-size: 25px;}
    #isec_1 .r_side .small{font-size: 14px;}
    #isec_1 .r_side ul{margin-top: 30px;}
    #isec_1 .r_side ul li{margin-top: 6px;}
}
@media screen and (max-width: 470px){
    #isec_1 .l_side{padding-left: 50px;}
    #isec_1 .l_side::after{left: -40px;font-size: 16px;} 
    #isec_1 .l_side p{padding-right: 15px;}
}
@media screen and (max-width: 420px){
    #isec_1 h1{font-size: 25px;}
    #isec_1 h1 span.under::after{width: 250px;}
    #isec_1 .r_side .scan .d-inner{padding-left: 30px; padding-right: 20px;}
}


#isec_2{width: 100%; display: flex;flex-wrap: wrap; height: 950px;}
#isec_2 .l_side{width: 50%; height: 100% }
#isec_2 .l_side .inner{width: 100%; height: 100%; position: relative;}
#isec_2 .r_side{width: 50%; padding-top: 350px; padding-left: 120px;}

#interior_box{height: 100%;}
#interior_box .int img{height: 950px;}
.interior_nav{margin: -100px auto; width: 70%;}
.interior_nav img{width: 80%; height: 30%; margin: 0px auto;}

#isec_2 .r_side::after{content: 'I N T E R I O R';position: absolute; top: 43%; right: -26%; font-weight: bold; font-family: 'Montserrat'; font-size: 120px; color: #d7d7d7; transform: rotate(90deg) translatey(-50%);} 
#isec_2 h1{font-weight: normal; font-size: 36px; color: #777;}
#isec_2 h1 span.under{font-weight: bold; position: relative; color: #000;}
#isec_2 h1 span.under::after{content: ''; position: absolute; width: 295px; height: 1px; background-color: #000; bottom: 5px; left: 0;}
#isec_2 p{margin-top: 40px; line-height: 25px;}
#isec_2 .r_side .scr{width: 25px; margin-top: 80px;}
#isec_2 .r_side .scr img{width: 100%;}

@media screen and (max-width:1600px){
    #isec_2 .r_side::after{right: -35%;} 
}
@media screen and (max-width:1400px){
    #isec_2{height: 750px;}
    #isec_2 .r_side{padding-top: 250px; padding-left: 80px;}
    #isec_2 .r_side::after{right: -22%; font-size: 70px;} 
    #isec_2 h1{font-size: 30px;}
    #isec_2 h1 span.under::after{width: 245px;}
    #isec_2 p{font-size: 14px;}
    #interior_box .int img{height: 750px;}
}
@media screen and (max-width:1080px){
    #isec_2{height: 100%;}
    #isec_2 .r_side{width: 100%; margin-bottom: 100px;}
    #isec_2 .l_side{width: 100%;}
    #isec_2 .r_side::after{right: -15%; top: 60%; font-size: 70px;} 
    #isec_2 h1{font-size: 30px;}
    #isec_2 h1 span.under::after{width: 245px;}
    #isec_2 p{font-size: 14px;}
}
@media screen and (max-width:787px){
    #isec_2 .r_side{padding-top: 200px; padding-left: 40px;}
    #isec_2 .r_side::after{right: -10%; top: 65%; font-size: 50px;}
    #isec_2 .r_side .scr{width: 20px;}
}
@media screen and (max-width:640px){
    #isec_2 .r_side::after{right: -18%;}
}
@media screen and (max-width:520px){
    #isec_2 .r_side::after{right: -15%; top: 70%; font-size: 40px;} 
    #isec_2 h1{font-size: 25px;}
    #isec_2 h1 span.under::after{width: 205px;}
    #isec_2 p{font-size: 12px; line-height: 20px;}
    #interior_box .int img{height: 400px;}
    #isec_2 .r_side .scr{width: 15px; margin-top: 40px;}
}
@media screen and (max-width:430px){
    #isec_2 .r_side{margin-bottom: 50px; padding-left: 20px; padding-right: 60px;}
    #isec_2 .r_side::after{right: -15%; top: 70%; font-size: 30px;} 
    #isec_2 h1{font-size: 25px;}
    #isec_2 h1 span.under::after{width: 205px;}
    #isec_2 p{font-size: 12px; line-height: 20px;}
    #isec_2 p br{display: none;}
    #interior_box .int img{height: 300px;}
    #isec_2 .r_side .scr{width: 15px; margin-top: 40px;}
}


#isec_3{width: 100%; height: 950px; background-color: #eeeeec;}
#isec_3 .txt{padding-top: 180px; padding-left:130px; position: relative;}
#isec_3 .txt::after{content: 'EQUIPMENT';position: absolute; top: 80%; right: 0; font-weight: bold; font-family: 'Montserrat'; font-size: 120px; color: #d7d7d7; transform: translatey(-50%); z-index: -1;} 
#isec_3 h1{font-weight: normal; font-size: 36px; color: #777;}
#isec_3 h1 br{display: none;}
#isec_3 p br{display: none;}
#isec_3 h1 span.under{font-weight: bold; position: relative; color: #000;}
#isec_3 h1 span.under::after{content: ''; position: absolute; width: 325px; height: 1px; background-color: #000; bottom: 5px; left: 0;}
#isec_3 .txt p{margin-top: 50px; line-height: 25px;}
#isec_3 .equip{margin-top: 90px; padding-left: 130px;}
#isec_3 .equip .img{width: 470px; height: 560px; margin-right: 50px; background-color: #fff; position: relative;}
#isec_3 .equip h3{padding: 50px 60px 0; font-size: 24px; font-family: 'SUIT'; color: #000;}
#isec_3 .equip p{padding: 30px 60px 0; font-size: 16px; line-height: 28px; color: #666;}
#isec_3 .equip .img img{position: absolute; bottom: 0; width: 100%;}

@media screen and (max-width:1400px){
    #isec_3{height: 900px;}
    #isec_3 .txt{padding-top: 160px; padding-left:100px; }
    #isec_3 .txt::after{font-size: 100px;} 
    #isec_3 h1{font-size: 30px;}
    #isec_3 h1 span.under::after{width: 270px;}
    #isec_3 .txt p{margin-top: 40px;}
    #isec_3 .equip{margin-top: 77px; padding-left: 100px;}
}

@media screen and (max-width:1280px){
    #isec_3{height: 750px;}
    #isec_3 .txt{padding-top: 100px;}
    #isec_3 .txt::after{font-size: 80px;} 
    #isec_3 h1{font-size: 30px;}
    #isec_3 h1 span.under::after{width: 270px;}
    #isec_3 .txt p{margin-top: 40px;}
    #isec_3 .equip{margin-top: 97px;}
    #isec_3 .equip .img{width: 300px; height: 450px;}
    #isec_3 .equip h3{padding: 30px 30px 0; font-size: 22px; }
    #isec_3 .equip p{padding: 10px 30px 0; font-size: 14px; line-height: 25px;}
}

@media screen and (max-width:940px){
    #isec_3{height: 676px;}
    #isec_3 .txt{padding-top: 70px; padding-left:70px; }
    #isec_3 .txt::after{font-size: 80px;} 
    #isec_3 h1{font-size: 30px;}
    #isec_3 h1 span.under::after{width: 270px;}
    #isec_3 h1 br{display: block;}
    #isec_3 p br{display: block;}
    #isec_3 .txt p{margin-top: 20px;}
    #isec_3 .equip{margin-top: 60px; padding-left:70px;}
    #isec_3 .equip .img{width: 300px; height: 400px;}
    #isec_3 .equip h3{padding: 30px 30px 0; font-size: 22px; }
    #isec_3 .equip p{padding: 10px 30px 0; font-size: 14px; line-height: 25px; margin-right: 30px;}
}
@media screen and (max-width:787px){
    #isec_3{height: 626px;}
    #isec_3 .txt{padding-top: 70px; padding-left:40px; }
    #isec_3 .txt::after{font-size: 50px;} 
    #isec_3 h1{font-size: 30px;}
    #isec_3 h1 span.under::after{width: 270px;}
    #isec_3 h1 br{display: block;}
    #isec_3 p br{display: block;}
    #isec_3 .txt p{margin-top: 20px;}
    #isec_3 .equip{margin-top: 60px; padding-left:40px;}
    #isec_3 .equip .img{width: 260px; height: 350px; margin-right: 20px;}
    #isec_3 .equip .img img{width: 80%; left: 50%; transform: translate(-50%);}
    #isec_3 .equip h3{padding: 20px 20px 0; font-size: 22px; }
    #isec_3 .equip p{padding: 10px 0 0 20px; font-size: 14px; line-height: 25px; margin-right: 30px;}
}
@media screen and (max-width:640px){
    #isec_3{height: 596px;}
    #isec_3 .txt::after{font-size: 50px;} 
    #isec_3 h1{font-size: 30px;}
    #isec_3 h1 span.under::after{width: 270px;}
    #isec_3 .txt p{margin-top: 20px; font-size: 14px;}
    #isec_3 .equip{margin-top: 30px; }
    #isec_3 .equip p{ font-size: 12px; line-height: 23px;}
}

@media screen and (max-width:520px){
    #isec_3 .txt::after{font-size: 40px; top: 65%;} 
    #isec_3 h1{font-size: 25px;}
    #isec_3 h1 span.under::after{width: 205px;}
    #isec_3 .txt p{margin-right: 20px;}
    #isec_3 .txt p br{display: none;}
    #isec_3 .equip h3{font-size: 18px; }
    #isec_3 .equip .img{width: 230px; height: 320px; margin-right: 20px;}
}


#isec_4{width: 100%; height: 950px;}
#isec_4 .c_box{width: 100%; display: flex;flex-wrap: nowrap; height: 100%;}
#isec_4 .c_box > li{width: 20%; display: flex;flex-wrap: wrap; border-right: 1px solid #e5e5e5;}
#isec_4 .c_box li > ul{width: 100%; position: relative; margin-top: 90px;}
#isec_4 .c_box li > ul h2{text-align: center; font-size: 36px; margin-bottom: 40px;}
#isec_4 .c_box li > ul h2 a{color: #000;}
#isec_4 .c_box li > ul li{text-align: center; margin-bottom: 15px; color: #666;}
#isec_4 .c_box li > ul img{width: 100%; position: absolute; bottom: 0;}
#isec_4 .c_box > li.s787{display: none;}

@media screen and (max-width:1600px){
    #isec_4{height: 850px;}
}
@media screen and (max-width:1400px){
    #isec_4{height: 750px;}
    #isec_4 .c_box li > ul{margin-top: 60px;}
    #isec_4 .c_box li > ul h2{font-size: 30px;}
}
@media screen and (max-width:1200px){
    #isec_4{height: 650px;}
    #isec_4 .c_box li > ul{margin-top: 40px;}
    #isec_4 .c_box li > ul h2{font-size: 30px;}
    #isec_4 .c_box li > ul li{margin-bottom: 10px; font-size: 14px;}
}
@media screen and (max-width:1024px){
    #isec_4{height: 550px;}
    #isec_4 .c_box li > ul{margin-top: 40px;}
    #isec_4 .c_box li > ul h2{font-size: 25px; margin-bottom: 20px;}
    #isec_4 .c_box li > ul li{margin-bottom: 10px; font-size: 14px;}
}
@media screen and (max-width:840px){
    #isec_4{height: 480px;}
}
@media screen and (max-width:787px){
    #isec_4{height: 550px;}
    #isec_4 .c_box{flex-wrap: wrap;}
    #isec_4 .c_box > li{width: calc(100%/3); display: flex;flex-wrap: wrap; border-bottom: 1px solid #e5e5e5;}
    #isec_4 .c_box li > ul{margin-bottom: 30px;}
    #isec_4 .c_box li > ul img{display: none;}
    #isec_4 .c_box > li.s787{display: block; width: calc(100%/3); position: relative;}
    #isec_4 .c_box > li.s787 img{width: 50%; position: absolute; top: 40%; left: 50%; transform: translate(-50%); opacity: 0.5;}
}
@media screen and (max-width:580px){
    #isec_4{height: 36vw;}
    #isec_4 .c_box > li{width: calc(100%/5);}
    #isec_4 .c_box li > ul img{display: block;}
    #isec_4 .c_box > li.s787{display: none;}
    #isec_4 .c_box li > ul li{display: none;}
    #isec_4 .c_box li > ul{margin-top: 20px; margin-bottom: 0px;}
    #isec_4 .c_box li > ul h2{font-size: 20px; margin-bottom: 10px;}
    #isec_4 .c_box li > ul li{margin-bottom: 10px; font-size: 12px;}
}
@media screen and (max-width:500px){
    #isec_4{height: 38vw;}
    #isec_4 .c_box li > ul h2{font-size: 16px;}
}
@media screen and (max-width:400px){
    #isec_4{height: 40vw;}
    #isec_4 .c_box li > ul h2{font-size: 14px;}
}