@charset "utf-8";

 @supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
  }

/* intro1 */
.intro1{height: calc(100vh - 100px); max-height: calc(100vh - 100px); background: url(/images/sub/intro1_bg.jpg) no-repeat center bottom / cover;}
.intro1 .txt{text-align: center;display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}
.intro1 .txt p{font-size: var(--fz16); font-family:  'Noto Sans KR', sans-serif; color: #666; line-height: 1.6em; margin-bottom: 30px; word-break: keep-all; letter-spacing: -0.035em; font-weight: 300;}
.intro1 .txt p b{font-weight: 500;}
.intro1 .txt p:last-child{margin-bottom: 0;}

@media all and (max-width:976px){
	.intro1 .txt{width: 85%; margin: 0 auto;}
	.intro1 .txt p br{display: none;}
}

/* doctor */
.doctor{display: flex; margin-top: 25px;}
.doctor .box{text-align: center; width: 50%; padding: 0 40px;}
.doctor .box .img{margin-bottom: 15px;}
.doctor .box h3{color: #212121; font-size: var(--fz24); padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee;}
.doctor .box h3 span{font-weight: 400; font-size: var(--fz17);}
.doctor .box .list{}
.doctor .box .list li{line-height: 1.6em; font-size: var(--fz16);}
.doctor .box .list li::before{content: '·'; margin-right: 3px; color: #ccc;}

@media all and (max-width:640px){
	.doctor{flex-wrap: wrap; gap:40px 0; margin: 80px 0;}
	.doctor .box{width: 100%; padding: 0 30px;}
}


/* bg */
.bg{background-color: #f8f8f8; padding: 100px 0;}

@media all and (max-width:976px){
	.bg{padding: 75px 0;}
}
@media all and (max-width:640px){
	.bg{padding: 50px 0;}
	.sub_title{margin-bottom: 25px;}
}

/* tab */
.tab{display: flex; gap:5px;}
.tab li{ flex:auto; margin-left: -1px; text-align: center; width: 100%;}
.tab li a{border: 1px dashed #dedede;background-color: #fff; width: 100%; display: block; font-size: var(--fz15); padding: 10px; color: #999; position: relative; border-radius: 20px;}
.tab.s1 li:nth-child(1) a,
.tab.s2 li:nth-child(2) a,
.tab.s3 li:nth-child(3) a,
.tab.s4 li:nth-child(4) a,
.tab.s5 li:nth-child(5) a,
.tab.s6 li:nth-child(6) a{color: #212121; border: 1px dashed #212121; z-index: 2;}

@media all and (max-width:976px){
	.tab{flex-wrap: wrap;}
	.tab li{min-width: 22%; width: auto; margin-top: -1px; flex: 0 1 32.7%;}
	.tab li a{padding: 10px 4px;}
}
@media all and (max-width:640px){
	.tab li{flex:0 1 49.5%;}
}

/* cont */
.cont_wrap{padding: 146px 0; position: relative; transition: 1s ease-in-out; left: 0;}
.cont_wrap.on{left: -100%;}
.cont_wrap .cont{display: flex;}
.cont_wrap .cont.txt{display: block; margin: 50px 0;}
.cont_wrap .cont.txt:last-child{margin-bottom: 0;}
.cont_wrap .cont.txt.bg{display: block; padding: 40px; margin: 50px 0;}
.cont_wrap .cont.txt h3{color: #212121; font-size: var(--fz22); margin-bottom: 20px;}
.cont_wrap .cont.txt .box{margin: 15px 0;}
.cont_wrap .cont.txt .box:last-child{margin-bottom: 0;}
.cont_wrap .cont.txt .box h4{font-size: var(--fz16); font-weight: 500; text-decoration: underline; color: #444; text-underline-position: under; margin-bottom: 8px;}
.cont_wrap .cont.txt .box p{font-size: var(--fz16); color: #666; word-break: keep-all; line-height: 1.6em;}
.cont_wrap .cont.txt .advan{display: flex;}
.cont_wrap .cont.txt .advan li{flex:auto; text-align: center; width: 100%; position: relative;}
.cont_wrap .cont.txt .advan li::after{content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background-color: #ddd;}
.cont_wrap .cont.txt .advan li:last-child::after{display: none;}
.cont_wrap .cont.txt .advan li h4{color: #212121; margin-bottom: 10px; font-size: var(--fz17);}
.cont_wrap .cont.txt .advan li p{font-size: var(--fz16); color: #666;}
.cont_wrap .cont.tit .l_cont{width: 52%; padding-right: 100px; position: relative;}
.cont_wrap .cont.tit .l_cont h3{font-size: var(--fz32); color: #212121; font-weight: 600;}
.cont_wrap .cont.tit .l_cont h3::before{content: ''; display: block; width: 40px; height: 3px; background-color: #212121; margin-bottom: 20px;}
.cont_wrap .cont.tit .l_cont h4{margin-top: 20px; display: inline-block; position: relative; padding-top: 25px; padding-bottom: 15px; font-weight: 500; word-break: keep-all; line-height: 1.6em; font-family: 'Noto Sans KR', 'SUIT', sans-serif; }
.cont_wrap .cont.tit .l_cont h4::before{content: '“'; font-family: 'BIZ UDPGothic'; font-size: var(--fz56); position: absolute; left: -4px; top: 0; line-height: 1em; opacity:0.4;}
/*.cont_wrap .cont.tit .l_cont h4::after{content: '”'; font-family: 'BIZ UDPGothic'; font-size: var(--fz56); position: absolute; bottom: -40px; right: 0; line-height: 1em; opacity:0.4;}*/
.cont_wrap .cont.tit .l_cont p{font-size: var(--fz16); line-height: 1.6em; color: #666; word-break: keep-all; font-family: 'Noto Sans KR', 'SUIT', sans-serif; font-weight: 300; letter-spacing: -0.035em;}
.cont_wrap .cont.tit .l_cont p span{font-weight: 500; word-break: keep-all;}
.cont_wrap .cont.tit .l_cont .more{display: inline-flex; align-items: center; font-size: var(--fz15); gap:0 5px; font-weight: 300; margin-top: 50px; transition: .5s ease; cursor: pointer;}
.cont_wrap .cont.tit .l_cont .more:hover{margin-left: 6px; color: #888;}
.cont_wrap .cont.tit .r_cont .img{}
.cont_wrap .cont.tit .r_cont .img img{max-width: 100%; filter: grayscale(1); transition: 1s ease-in-out; border-radius: 8px;}
.cont_wrap .cont.tit .r_cont .img img.on{filter: grayscale(0.5);}
/*.cont_wrap .cont.tit .r_cont .img:hover img{filter: grayscale(0);}*/
.cont_wrap .cont.tit .r_cont{width: 48%;}

@media all and (max-width:976px){
	.cont_wrap{padding: 70px 0;}
	.cont_wrap .cont.tit .l_cont{padding-top: 0; padding-right: 60px;}
	.cont_wrap .cont.tit .l_cont h4{margin-top: 15px; padding-top: 20px; padding-bottom: 15px;}
	.cont_wrap .cont.txt.bg{padding: 30px 20px; margin: 40px 0;}
	.cont_wrap .cont.txt .advan{flex-wrap: wrap; gap:25px 0;}
	.cont_wrap .cont.txt .advan li{width: 50%;}
	.cont_wrap .cont.txt .advan li:nth-child(2)::after{display: none;}
}
@media all and (max-width:768px){
	.cont_wrap{padding: 60px 0;}
	.cont_wrap .cont{flex-direction: column;}
	.cont_wrap .cont.tit .l_cont,
	.cont_wrap .cont.tit .r_cont{width: 100%; padding-right: 0;}
	.cont_wrap .cont.tit .r_cont{order: -1; margin-bottom: 40px;}
	.cont_wrap .cont.txt{margin: 40px 0;}
	.cont_wrap .cont.txt.bg{padding: 25px 15px;}
	.cont_wrap .cont.txt .advan li h4{margin-bottom: 7px;}
}

/* tb-style */
.tb-style1{width: 100%; border-top: 1px solid #eee;}
.tb-style1 thead tr th{padding: 10px 5px; font-weight: 500; color: #212121; background-color: #f8f8f8; border-bottom: 1px solid #eee; border-right: 1px solid #eee;}
.tb-style1 thead tr th:last-child{border-right: 0;}
.tb-style1 tbody tr th{padding: 15px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; color: #212121; font-size: var(--fz15); font-weight: 500; word-break: keep-all;}
.tb-style1 tbody tr td{padding: 15px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; text-align: center; word-break: keep-all; color: #666; font-size: var(--fz15);}
.tb-style1 tbody tr td:last-child{border-right: 0;}


.root_daum_roughmap .wrap_controllers{display: none;}
.location1 .info{margin-top: 40px;}
.location1 .time_box{margin-top: 30px;}
.location1 .time_box dl{display: flex; justify-content: center;}
.location1 .time_box dl dt{width: 110px; font-size: var(--fz16); font-weight: 500; text-align: justify; margin-right: 40px;}
.location1 .time_box dl dt::after{content: ''; display: inline-block; width: 100%;}
.location1 .time_box dl dd{font-size: var(--fz16); font-weight: 300; letter-spacing: 0.1em; text-align: right;}
.location1 p{font-size: var(--fz16); font-weight: 500; text-align: center;}
.location1 p b{color: #444;}

@media all and (max-width:976px){
	.location1 .wrap_map{height: 300px !important;}
	.location1 .info{margin-top: 30px;}
	.location1 .time_box{margin-top: 20px;}
}

.section.bg{background-color: #fafafa; padding: 0;	}
ul.jinryo{display: flex; gap:20px;}
ul.jinryo li{flex: 1 1 33.33333%; text-align: center; border: 1px solid #eee; padding: 30px 20px; background-color: #fff; border-radius: 15px;}
ul.jinryo li .tit{font-size: 2rem; color: #212121; margin-bottom: 20px; font-weight: 600;}
ul.jinryo li p{color: #666; line-height: 1.7em; font-size: 1.5rem;}

@media all and (max-width:976px){
	ul.jinryo{flex-wrap: wrap; margin: 80px 0;}
	ul.jinryo li{flex: 1 1 25%; padding: 20px;}
	ul.jinryo li .tit{margin-bottom: 15px;}
}
@media all and (max-width:640px){
	ul.jinryo{flex-wrap: wrap; margin: 20px 0 0; gap:10px;}
	ul.jinryo li{flex: 1 1 33.33333%; padding: 10px 15px;}
	ul.jinryo li .tit{margin-bottom: 8px; font-size: 1.8rem;}
}


.overX{ height: calc(100vh); position: fixed; right: -100%; top: 0; width: 100%;transition: 1s ease-in-out; z-index: 998; background: #fff url(/images/sub/overX_bg2.jpg) no-repeat center center / cover;}
.overX.on{right: 0;}
.overX .s-inner{overflow-x: auto; padding: 0 100px; display: flex; gap:0 80px; flex-wrap: nowrap; align-items: flex-start; max-width:100%; width: auto; top: 50%; transform: translateY(-50%); cursor: w-resize;}
.overX .s-inner::-webkit-scrollbar{height: 0; background-color:transparent;}
.overX .s-inner .cont{width: auto; flex:0 0 auto; margin: 0 auto; max-width: 900px;}
.overX .bottom_box{position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 99;}
.overX .bottom_box .ss-inner{display: flex; align-items: center; justify-content: space-between}
.overX .bottom_box .ss-inner .progressBar{height: 3px; width: calc(100% - 80px); background-color: #eee; border-radius: 2px; position: relative;}
.overX .bottom_box .ss-inner .progressBar .progress{background-color: #999; height: 3px; position: absolute; left: 0; top: 0; transition: .5s; border-radius: 2px;}
.overX .bottom_box .ss-inner .close{background-color: #222; color: #fff; font-size: var(--fz20); font-weight: 400; width: 40px; height: 40px; border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer;}

@media all and (max-width:976px){
	.overX .s-inner{padding: 0 60px; gap:0 60px;}
	.overX .s-inner .cont{max-width: 700px;}
}
@media all and (max-width:768px){
	.overX .bottom_box{bottom: 40px}
	.overX .s-inner{padding: 0 40px; gap:0 40px;}
	.overX .s-inner .cont{max-width: 600px;}
}
@media all and (max-width:500px){
	.overX .bottom_box{bottom:30px;}
	.overX .s-inner .cont{max-width: 500px;}
}



/* 임플란트 */

.implant{width: 100%; position:relative; width:100%; height:1300px;}

.implant .info-t{width: 1600px; display: flex; flex-wrap: nowrap; height: 100%;}
.implant .info-t .side-l{ margin: 100px 0 0 160px; z-index: 998;}
.implant .info-t .side-l .txt{margin-bottom: 50px; color: #000;}
.implant .info-t .side-l .txt h1{font-size: 56px; position: relative; margin-bottom: 40px;}
.implant .info-t .side-l .txt h1::after{content: '';position: absolute; width: 200px; height: 1px; left: 0; bottom: 10px; background-color: #000;}
.ortho .info-t .side-l .txt h1::after{width: 240px;}
.implant .info-t .side-l .txt h4{font-size: 24px; margin-bottom: 20px;}
.implant .info-t .side-l .txt p{line-height: 25px; font-size: 18px; color: #333;}
.implant .info-t .side-l .select li{margin-bottom: 40px; font-size: 20px; position: relative;}
.general .info-t .side-l .select li{margin-bottom: 25px; font-size: 20px; position: relative;}
.implant .info-t .side-l .select li::before{content: ''; width: 50px; height: 1px; background-color: #b2b2b2; position: absolute; top: 50%; left: 0;}
.implant .info-t .side-l .select li p{color: #666; padding-left: 70px;}
.implant .info-t .side-l .select li.on p a{position: relative; font-weight: bold;color: #000; padding-left: 60px; }
.implant .info-t .side-l .select li.on p a::after{content: '';position: absolute; width: 81%; height: 2px; right: -5px; bottom: -5px; background-color: #000;}
.implant .info-t .side-l .select li:nth-child(2).on p a::after{content: '';position: absolute; width: 75%; height: 2px; right: -5px; bottom: -5px; background-color: #000;}
.implant .info-t .side-l .select li:nth-child(4).on p a::after{content: '';position: absolute; width: 72%; height: 2px; right: -5px; bottom: -5px; background-color: #000;}
.implant .info-t .side-l .select li:nth-child(3).on p a::after,
.implant .info-t .side-l .select li:nth-child(5).on p a::after{content: '';position: absolute; width: 76%; height: 2px; right: -5px; bottom: -5px; background-color: #000;}
.implant .info-t .side-l .select li:nth-child(6).on p a::after, 
.implant .info-t .side-l .select li:nth-child(7).on p a::after{content: '';position: absolute; width: 69%; height: 2px; right: -5px; bottom: -5px; background-color: #000;}
.implant .info-t .side-l .select li.on p a::before{content: '';position: absolute; width: 7px; height: 7px; border-radius: 50%; top: -5px; right: -10px; background-color: #000;}
.implant .info-t .side-l .select li.on::before{content: ''; width: 110px; height: 1px; background-color: #b2b2b2; position: absolute; top: 50%; left: 0;}

.implant .info-t .side-r{position: absolute; top: -100px; right: 0; max-width: 1120px;}
.implant .info-t .side-r .img{width: 100%; filter: grayscale(1); transition:1s;}
.implant .info-t .side-r .img.on{width: 100%; filter: grayscale(0); transition:1s;}
.implant .info-t .side-r .img img{width: 100%;}

.implant .side-m{position: absolute; top: 700px; left: 35%;
    animation: scrollAni 2.0s ease-in-out reverse; animation-iteration-count: infinite;
    -webkit-animation: scrollAni 2.0s ease-in-out reverse; -webkit-animation-iteration-count: infinite;
    -moz-animation: scrollAni 2.0s ease-in-out reverse; -moz-animation-iteration-count: infinite;}

.implant .side-b{position: absolute; top: 1050px; left: 50%; transform: translate(-50%); font-family: 'Montserrat'; font-size: 24px; color: #000; text-align: center;}
.implant .side-b p{ word-spacing: 70px;}

@keyframes scrollAni{
	0%{top: 38vw; }
	50%{top: calc(38vw - 30px);}
	100%{top: 38vw; ;}
}



@media screen and (max-width:1650px){
    .implant .info-t{width: 100%;}
}
@media screen and (max-width:1600px){
    .implant{height:950px; }
    .implant .info-t .side-l .txt{margin-bottom: 40px;}
    .implant .info-t .side-l .txt h1{font-size: 45px; margin-bottom: 20px;}
    .implant .info-t .side-l .txt h1::after{width: 160px;}
    .ortho .info-t .side-l .txt h1::after{width: 195px;}
    .implant .info-t .side-l .txt h4{font-size: 20px; margin-bottom: 10px;}
    .implant .info-t .side-l .txt p{line-height: 22px; font-size: 16px;}
    .implant .info-t .side-l .select li{margin-bottom: 30px; font-size: 18px;}
    .general .info-t .side-l .select li{margin-bottom: 20px;}
    .implant .info-t .side-r{top: -100px; right: 0; max-width: 900px;}

    .implant .side-m{top: 500px; left: 35%;}

    .implant .side-b{top: 800px;}
}

@media screen and (max-width:1400px){
    .implant .info-t .side-l{margin: 100px 0 0 80px;}
}

@media screen and (max-width:1250px){
    .implant{height:850px; }
    .implant .info-t .side-l{margin: 50px 0 0 80px;}
    .general .info-t .side-l{margin: 30px 0 0 80px;}
    .implant .info-t .side-l .txt{margin-bottom: 40px;}
    .implant .info-t .side-l .txt h1{font-size: 38px; margin-bottom: 20px;}
    .implant .info-t .side-l .txt h1::after{width: 135px; bottom: 7px;}
    .ortho .info-t .side-l .txt h1::after{width: 165px;}
    .implant .info-t .side-l .txt h4{font-size: 18px; margin-bottom: 10px;}
    .implant .info-t .side-l .txt p{line-height: 22px; font-size: 14px;}
    .implant .info-t .side-l .select li{margin-bottom: 30px; font-size: 16px;}
    .general .info-t .side-l .select li{margin-bottom: 25px;}

    .implant .info-t .side-l .select li.on p a::after{ width: 72%; }
    .implant .info-t .side-l .select li:nth-child(2).on p a::after{ width: 68%; }
    .implant .info-t .side-l .select li:nth-child(5).on p a::after, 
    .implant .info-t .side-l .select li:nth-child(6).on p a::after{ width: 66%;}
    .implant .info-t .side-l .select li.on p a::before{width: 5px; height: 5px;  top: -3px;}
    .implant .info-t .side-r{max-width: 800px;}

    .implant .side-m{display: none;}

    .implant .side-b{top: 700px;}
}

@media screen and (max-width:1180px){
    .implant .info-t .side-r{max-width: 700px;}

    .implant .side-b{width: 100%;top: 650px;}
    .implant .side-b p{ word-spacing: 50px;}
}
@media screen and (max-width:976px){
    .implant{height:1200px; }
    .implant .info-t .side-r{max-width: 100%; top: -20%; }
    .implant .info-t .side-l{margin: 65% 0 0 80px;}

    .implant .side-b{top: 1150px;}
}
@media screen and (max-width:900px){
    .implant{height:1150px; }
    .implant .info-t .side-l{margin: 65% 0 0 50px;}
    .implant .side-b{top: 1100px;}
}
@media screen and (max-width:750px){
    .implant{height:1100px; }
    .implant .side-b{top: 1050px;}
}
@media screen and (max-width:700px){
    .implant{height:145vw; }
    .implant .info-t .side-r{top: -10%;}
    .implant .info-t .side-l{margin: 75% 0 0 50px;}
    .implant .info-t .side-l .txt{margin-bottom: 20px;}
    .implant .info-t .side-l .txt h1{font-size: 30px; margin-bottom: 10px;}
    .implant .info-t .side-l .txt h1::after{width: 105px; bottom: 5px;}
    .ortho .info-t .side-l .txt h1::after{width: 130px;}
    .implant .info-t .side-l .txt h4{font-size: 16px; margin-bottom: 10px;}
    .implant .info-t .side-l .txt p{line-height: 18px; font-size: 12px;}
    .implant .info-t .side-l .select li{margin-bottom: 10px; font-size: 14px;}
    .implant .side-b{top: 140vw;}
    .implant .side-b p{ word-spacing: 20px; font-size: 18px;}
}
@media screen and (max-width:550px){
    .implant{height:160vw;}
    .implant .side-b{top: 155vw;}
}
@media screen and (max-width:450px){
    .implant{height:170vw;}
    .implant .info-t .side-l{margin: 75% 20px 50px;}
    .implant .side-b{top: 160vw;}
}
@media screen and (max-width:400px){
    .implant{height:200vw;}
    .implant .side-b{top: 190vw;}
}


#sec_1{width: 100%; height: 100%; display: flex; flex-wrap: wrap;  background: url('/images/sub/implant_bg1.png') no-repeat right 85%;}
#sec_1 .txt{width: 50%;}
#sec_1 .img{width: 50%;}
#sec_1 .img img{width: 100%;}
#sec_1 .scroll{width: 25px; margin-top: 40%;}
#sec_1 .scroll img{width: 100%;}

.sec .txt{font-family: 'SUIT'; margin-top: 100px; padding: 0 100px; }
.sec .txt h3{ font-family: 'Montserrat'; font-size: 24px; font-weight: normal; margin-bottom: 50px;}
.sec .txt h2{font-size: 36px; font-weight: 500; color: #777; margin-bottom: 50px;}
.sec .txt h2 span.bau{font-weight: bold; color: #000; text-decoration: 1px underline;}
.sec .txt p{line-height: 28px;}
.sec .img img{width: 100%;}
.sec .img img{width: 100%;}

@media screen and (max-width:1600px){
    #sec_1 .scroll{margin-top: 30%;}
}

@media screen and (max-width:1450px){
    #sec_1 .scroll{margin-top: 40%;}

    .sec .txt{padding: 0 50px; margin-top: 50px;}
    .sec .txt h3{margin-bottom: 30px;}
    .sec .txt h2{font-size: 30px; margin-bottom: 30px;}
    .sec .txt h2 br{display: none;}
    .sec .txt p{line-height: 25px;}
    .sec .txt p br{display: none;}
}

@media screen and (max-width:1240px){
    #sec_1 .scroll{margin-top: 28%; width: 20px;}
}

@media screen and (max-width:999px){
    #sec_1{ background: url('/images/sub/implant_bg1.png') no-repeat right bottom;}
    #sec_1 .img{width: 100%; margin-top: 100px;}
    #sec_1 .scroll{margin-top: 10%;}
    #sec_1 .txt{margin-bottom: 100px; width: 100%;}

    .sec .txt{width: 100%; margin-top: 100px; padding: 0 100px; }
    .sec .txt h3{font-size: 24px; margin-bottom: 50px;}
    .sec .txt h2 br{display: block;}
    .sec .txt p{line-height: 28px;}
    .sec .txt p br{display: block;}
}

@media screen and (max-width:840px){
    .sec .txt{width: 100%; margin: 50px 0; padding: 0 50px; }
}

@media screen and (max-width:640px){
    .sec .txt{width: 100%; margin: 30px 0; padding: 0 30px; }
    .sec .txt h3{margin-bottom: 20px; font-size: 20px;}
    .sec .txt h2{margin-bottom: 20px; font-size: 24px;}
    .sec .txt p{line-height: 25px; font-size: 14px;}
    .sec .txt p br{display: none;}

    #sec_1 .txt{margin-bottom: 30px;}
    #sec_1 .scroll{width: 15px;}
}

@media screen and (max-width:490px){
    .sec .txt h2 br{display: none;}
}


#sec_2{width: 100%; display: flex;flex-wrap: wrap; height: 950px;}
#sec_2 .left_s{width: 50%;background-color: #f5f5f3; position: relative;}
#sec_2 .left_s .txt{position: relative;}
#sec_2 .left_s .img{position: absolute; bottom: 0; right: 0; max-width: 671px;}
#sec_2 .left_s .img img{width: 100%;}
#sec_2 .right_s{width: 50%; background-color: #eeeeec; position: relative; }
#sec_2 .right_s .img{ text-align: center; max-width: 537px; position: absolute; top: 150px; left: 50%; transform: translate(-50%);}
#sec_2 .right_s .img img{width: 100%;}
#sec_2 .right_s .txt{position: absolute; bottom: 100px;}


@media screen and (max-width:1450px){
    #sec_2{height:750px;}
}
@media screen and (max-width:1000px){
    #sec_2{width: 100%; display: flex;flex-wrap: wrap; height: 1400px;}
    #sec_2 .left_s{width: 100%; height: 700px;}
    #sec_2 .right_s{width: 100%; height: 700px;}
    #sec_2 .left_s .img{ max-width: 500px;}
    #sec_2 .right_s .img{ text-align: center; max-width: 350px; position: absolute; top: 70px; left: 50%; transform: translate(-50%);}
    #sec_2 .right_s .img img{width: 100%;}
    #sec_2 .right_s .txt{position: absolute; bottom: 100px;}
}

@media screen and (max-width:840px){
    #sec_2 .right_s .txt{position: absolute; bottom: 0px;}
}

@media screen and (max-width:640px){
    #sec_2{width: 100%; display: flex;flex-wrap: wrap; height: 1000px;}
    #sec_2 .left_s{height: 500px;}
    #sec_2 .right_s{height: 500px;}
}



#sec_3{width: 100%; height: 950px; background: url('/images/sub/implant_bg2.jpg') no-repeat; background-size: cover; text-align: center;display: table;}
#sec_3.probg1{background: url('/images/sub/pro_bg1.jpg') no-repeat;}
#sec_3.aesbg1{background: url('/images/sub/aes_bg1.jpg') no-repeat;}
#sec_3.orthobg1{background: url('/images/sub/ortho_bg1.jpg') no-repeat;}
#sec_3.genbg1{background: url('/images/sub/general_bg1.jpg') no-repeat;}
#sec_3 .txt{color: #000; font-family: 'SUIT'; display: table-cell; vertical-align: middle;}
#sec_3 .txt h1{font-size: 160px; }
#sec_3 .txt h3{font-size: 60px;}
#sec_3 .txt p{font-weight: 600; font-size: 20px; margin-top: 250px;}


@media screen and (max-width:1400px){
    #sec_3{height: 750px;}
    #sec_3 .txt h1{font-size: 140px; }
    #sec_3 .txt h3{font-size: 40px;}
    #sec_3 .txt p{font-size: 18px; margin-top: 200px;}
}

@media screen and (max-width:1000px){
    #sec_3{height: 700px;}
    #sec_3 .txt h1{font-size: 130px; }
    #sec_3 .txt h3{font-size: 30px;}
    #sec_3 .txt p{ margin-top: 180px;}
}

@media screen and (max-width:800px){
    #sec_3{height: 500px;}
    #sec_3 .txt h1{font-size: 100px; }
    #sec_3 .txt h3{font-size: 25px;}
    #sec_3 .txt p{ margin-top: 150px; font-size: 16px;}
}

@media screen and (max-width:640px){
    #sec_3{height: 400px;}
    #sec_3 .txt h1{font-size: 80px; }
    #sec_3 .txt h3{font-size: 25px;}
    #sec_3 .txt p{ margin-top: 120px; font-size: 16px;}
}

@media screen and (max-width:480px){
    #sec_3{height: 300px;}
    #sec_3 .txt h1{font-size: 50px; }
    #sec_3 .txt h3{font-size: 20px;}
    #sec_3 .txt p{ margin-top: 100px; font-size: 14px;}
}



#sec_4{width: 100%; height: 100%; display: flex; flex-wrap: wrap;  background: url('/images/sub/implant_bg1.png') no-repeat right 85%;}
#sec_4 .txt{width: 50%;}
#sec_4 .img{width: 50%;}
#sec_4 .img img{width: 100%;}
#sec_4 .scroll{width: 25px; margin-top: 40%;}
#sec_4 .scroll img{width: 100%;}


@media screen and (max-width:1600px){
    #sec_4 .scroll{margin-top: 30%;}
}

@media screen and (max-width:1450px){
    #sec_4 .scroll{margin-top: 40%;}
}

@media screen and (max-width:1240px){
    #sec_4 .scroll{margin-top: 28%; width: 20px;}
}

@media screen and (max-width:999px){
    #sec_4{ background: url('/images/sub/implant_bg1.png') no-repeat right bottom;}
    #sec_4 .img{width: 100%; margin-top: 100px;}
    #sec_4 .scroll{margin-top: 10%;}
    #sec_4 .txt{margin-bottom: 100px; width: 100%;}
}

@media screen and (max-width:640px){
    #sec_4 .txt{margin-bottom: 30px;}
    #sec_4 .scroll{width: 15px;}
}


#sec_5{width: 100%; display: flex;flex-wrap: wrap; height: 950px;}
#sec_5 .left_s{width: 50%;background-color: #f5f5f3; position: relative;}
#sec_5 .left_s .txt{position: relative;}
#sec_5 .left_s .img{position: absolute; bottom: 0; right: 0; max-width: 709px;}
#sec_5 .left_s .img img{width: 100%;}
#sec_5 .right_s{width: 50%; background-color: #eeeeec; position: relative; }
#sec_5 .right_s .img{ text-align: center; max-width: 699px; position: absolute; top: 50px; right: 0;}
#sec_5 .right_s .img img{width: 100%;}
#sec_5 .right_s .txt{position: absolute; bottom: 100px;}


@media screen and (max-width:1600px){
    #sec_5 .right_s .img{max-width: 600px; top: 50px; right: 0;}
    #sec_5 .left_s .img{max-width: 590px;}
}

@media screen and (max-width:1450px){
    #sec_5{height:750px;}
    #sec_5 .right_s .img{max-width: 500px; top: 50px; right: 0;}
    #sec_5 .left_s .img{max-width: 490px;}
}
@media screen and (max-width:1000px){
    #sec_5{width: 100%; display: flex;flex-wrap: wrap; height: 1400px;}
    #sec_5 .left_s{width: 100%; height: 700px;}
    #sec_5 .right_s{width: 100%; height: 700px;}
    #sec_5 .right_s .txt{position: absolute; bottom: 100px;}
}

@media screen and (max-width:840px){
    #sec_5 .right_s .txt{position: absolute; bottom: 0px;}
}

@media screen and (max-width:640px){
    #sec_5{width: 100%; display: flex;flex-wrap: wrap; height: 1000px;}
    #sec_5 .left_s{height: 500px;}
    #sec_5 .right_s{height: 500px;}

    #sec_5 .right_s .img{max-width: 400px; top: 30px; right: 0;}
    #sec_5 .left_s .img{max-width: 390px;}
}



#sec_6{width: 100%; background: url('/images/sub/implant_bg3.jpg') no-repeat; background-size: cover; height: 950px; display: table;}
#sec_6.probg2{background: url('/images/sub/pro_bg2.jpg') no-repeat center center;}
#sec_6 .txt{color: #fff; font-family: 'SUIT'; display: table-cell; vertical-align: middle; text-align: center;}
#sec_6 .txt .tf{font-weight: 400; font-size: 16px; word-spacing: 4px;}
#sec_6 .txt .ts{font-weight: 500; font-size: 24px; margin-top: 35px; word-spacing: 11px;}

@media screen and (max-width:1400px){
    #sec_6{height: 750px;}
}

@media screen and (max-width:1000px){
    #sec_6{height: 700px;}
    #sec_6 .txt .tf{font-size: 14px;}
    #sec_6 .txt .ts{font-size: 22px; margin-top: 30px;}
}

@media screen and (max-width:800px){
    #sec_6{height: 500px;}
}

@media screen and (max-width:640px){
    #sec_6{height: 400px;}
    #sec_6 .txt .tf{font-size: 12px;}
    #sec_6 .txt .ts{font-size: 20px; margin-top: 20px;}
}

@media screen and (max-width:480px){
    #sec_6{height: 300px;}
    #sec_6 .txt .ts{font-size: 18px; margin-top: 20px; word-spacing: 9px;}
}

@media screen and (max-width:400px){
    #sec_6 .txt .ts{font-size: 16px; margin-top: 10px; word-spacing: 7px;}
}


#sec_8{width: 100%; height: 100%; display: flex; flex-wrap: wrap;  background: url('/images/sub/implant_bg1.png') no-repeat right 85%;}
#sec_8 .txt{width: 50%;}
#sec_8 .img{width: 50%;}
#sec_8 .img img{width: 100%;}
#sec_8 .scroll{width: 25px; margin-top: 40%;}
#sec_8 .scroll img{width: 100%;}


@media screen and (max-width:1600px){
    #sec_8 .scroll{margin-top: 30%;}
}

@media screen and (max-width:1450px){
    #sec_8 .scroll{margin-top: 40%;}
}

@media screen and (max-width:1240px){
    #sec_8 .scroll{margin-top: 28%; width: 20px;}
}

@media screen and (max-width:999px){
    #sec_8{ background: url('/images/sub/implant_bg1.png') no-repeat right bottom;}
    #sec_8 .img{width: 100%; margin-top: 100px; order: 1;}
    #sec_8 .scroll{margin-top: 10%;}
    #sec_8 .txt{margin-bottom: 100px; width: 100%;order: 2;}
}

@media screen and (max-width:640px){
    #sec_8 .txt{margin-bottom: 30px;}
    #sec_8 .scroll{width: 15px;}
}

#sec_9{width: 100%; height: 100%; display: flex; flex-wrap: wrap;  background: url('/images/sub/implant_bg1.png') no-repeat right 85%;}
#sec_9 .txt{width: 50%;}
#sec_9 .img{width: 50%;}
#sec_9 .img img{width: 100%;}
#sec_9 .scroll{width: 25px; margin-top: 40%;}
#sec_9 .scroll img{width: 100%;}

.sec .txt{font-family: 'SUIT'; margin-top: 100px; padding: 0 100px; }
.sec .txt h3{ font-family: 'Montserrat'; font-size: 24px; font-weight: normal; margin-bottom: 50px;}
.sec .txt h2{font-size: 36px; font-weight: 500; color: #777; margin-bottom: 50px;}
.sec .txt h2 span.bau{font-weight: bold; color: #000; text-decoration: 1px underline;}
.sec .txt p{line-height: 28px;}
.sec .img img{width: 100%;}
.sec .img img{width: 100%;}

@media screen and (max-width:1600px){
    #sec_9 .scroll{margin-top: 30%;}
}

@media screen and (max-width:1450px){
    #sec_9 .scroll{margin-top: 40%;}

    .sec .txt{padding: 0 50px; margin-top: 50px;}
    .sec .txt h3{margin-bottom: 30px;}
    .sec .txt h2{font-size: 30px; margin-bottom: 30px;}
    .sec .txt h2 br{display: none;}
    .sec .txt p{line-height: 25px;}
    .sec .txt p br{display: none;}
}

@media screen and (max-width:1240px){
    #sec_9 .scroll{margin-top: 28%; width: 20px;}
}

@media screen and (max-width:999px){
    #sec_9{ background: url('/images/sub/implant_bg1.png') no-repeat right bottom;}
    #sec_9 .img{width: 100%; margin-top: 100px;order: 2;}
    #sec_9 .scroll{margin-top: 10%;}
    #sec_9 .txt{margin-bottom: 100px; width: 100%;order: 1;}

    .sec .txt{width: 100%; margin-top: 100px; padding: 0 100px; }
    .sec .txt h3{font-size: 24px; margin-bottom: 50px;}
    .sec .txt h2 br{display: block;}
    .sec .txt p{line-height: 28px;}
    .sec .txt p br{display: block;}
}

@media screen and (max-width:840px){
    .sec .txt{width: 100%; margin: 50px 0; padding: 0 50px; }
}

@media screen and (max-width:640px){
    .sec .txt{width: 100%; margin: 30px 0; padding: 0 30px; }
    .sec .txt h3{margin-bottom: 20px; font-size: 20px;}
    .sec .txt h2{margin-bottom: 20px; font-size: 24px;}
    .sec .txt p{line-height: 25px; font-size: 14px;}
    .sec .txt p br{display: none;}

    #sec_9 .txt{margin-bottom: 30px;}
    #sec_9 .scroll{width: 15px;}
}

@media screen and (max-width:490px){
    .sec .txt h2 br{display: none;}
}


/* side-l li / side-b 조정 */


.prosthetic .info-t .side-l .select li.on p a::after,
.prosthetic .info-t .side-l .select li:nth-child(2).on p a::after{ width: 53%;}
.prosthetic .info-t .side-l .select li:nth-child(3).on p a::after{width: 46%;}

.aesthetic .info-t .side-l .select li:nth-child(odd).on p a::after{ width: 60%;}
.aesthetic .info-t .side-l .select li:nth-child(even).on p a::after{ width: 64%;}
.aesthetic .info-t .side-l .select li:nth-child(5).on p a::after{ width: 74%;}

.ortho .info-t .side-l .select li.on p a::after,
.ortho .info-t .side-l .select li:nth-child(2).on p a::after{ width: 60%;}

.general .info-t .side-l .select li.on p a::after,
.general .info-t .side-l .select li:nth-child(5).on p a::after,
.general .info-t .side-l .select li:nth-child(6).on p a::after{width: 60%;}
.general .info-t .side-l .select li:nth-child(2).on p a::after,
.general .info-t .side-l .select li:nth-child(3).on p a::after{width: 70%;}
.general .info-t .side-l .select li:nth-child(4).on p a::after{width: 63%;}

.prosthetic .side-b p{ word-spacing: 50px;}
.aesthetic .side-b p{ word-spacing: 50px;}
.ortho .side-b p{ word-spacing: 40px;}
.general .side-b p{ word-spacing: 50px;}
.general .side-b{width: 100%;}



@media screen and (max-width:1600px){
    .prosthetic .side-b{width: 100%;}
    .prosthetic .side-b{top: 800px;}
    
    .ortho .side-b{width: 100%;}
}

@media screen and (max-width:1250px){
    .prosthetic .side-b{top: 700px;}
    
    .aesthetic .info-t .side-l .select li:nth-child(odd).on p a::after{ width: 56%;}
    .aesthetic .info-t .side-l .select li:nth-child(even).on p a::after{ width: 60%;}
    .aesthetic .info-t .side-l .select li:nth-child(5).on p a::after{ width: 69%;}
    .aesthetic .side-b{top: 700px;}
    
    .ortho .info-t .side-l .select li.on p a::after,
    .ortho .info-t .side-l .select li:nth-child(2).on p a::after{ width: 56%;}
    
    .general .info-t .side-l .select li.on p a::after,
    .general .info-t .side-l .select li:nth-child(5).on p a::after,
    .general .info-t .side-l .select li:nth-child(6).on p a::after{width: 55%;}
    .general .info-t .side-l .select li:nth-child(2).on p a::after,
    .general .info-t .side-l .select li:nth-child(3).on p a::after{width: 65%;}
    .general .info-t .side-l .select li:nth-child(4).on p a::after{width: 58%;}

    .general .side-b p{ word-spacing: 30px;}
}

@media screen and (max-width:1180px){
    .prosthetic .side-b{top: 670px;}
    .prosthetic .side-b p{ word-spacing: 30px;}
    
    .aesthetic .side-b{top: 650px;}
    .aesthetic .side-b p{ word-spacing: 30px;}
    
    .ortho .side-b{top: 650px;}
    .ortho .side-b p{ word-spacing: 30px;}
}

@media screen and (max-width:1000px){
    .prosthetic .side-b{top: 700px;}
    
    .aesthetic .side-b{top: 700px;}
    
    .ortho .side-b{top: 700px;}
}

@media screen and (max-width:976px){
    .prosthetic .side-b{top: 90%;}
    
    .aesthetic .side-b{top: 94%;}
    
    .ortho .side-b{top: 90%;}
    
    .general .side-b{top: 100%;}
}

@media screen and (max-width:850px){
    
    .aesthetic .side-b{top: 90%;}
    
    .ortho .side-b{top: 88%;}
    .ortho .side-b p{ word-spacing: 20px;}
    
    .general .side-b{top: 98%;}
    .general .side-b p{ word-spacing: 15px;}
}

@media screen and (max-width:750px){
    .prosthetic .side-b{top: 132vw;}
    
    .aesthetic .side-b{top: 136vw;}
    
    .ortho .side-b{top: 127vw;}
}

@media screen and (max-width:700px){
    .prosthetic .info-t .side-l .select li.on p a::after,
    .prosthetic .info-t .side-l .select li:nth-child(2).on p a::after{ width: 46%;}
    .prosthetic .info-t .side-l .select li:nth-child(3).on p a::after{width: 39%;}
    
    .prosthetic .side-b{top: 131vw;}
    .prosthetic .side-b p{ word-spacing: 20px; font-size: 18px;}
    
    .aesthetic .info-t .side-l .select li:nth-child(odd).on p a::after{ width: 51%;}
    .aesthetic .info-t .side-l .select li:nth-child(even).on p a::after{ width: 56%;}
    .aesthetic .info-t .side-l .select li:nth-child(5).on p a::after{ width: 67%;}
    
    .aesthetic .side-b{top: 133vw;}
    .aesthetic .side-b p{ word-spacing: 20px; font-size: 18px;}
    
    .ortho .info-t .side-l .select li.on p a::after,
    .ortho .info-t .side-l .select li:nth-child(2).on p a::after{ width: 51%;}

    .general .info-t .side-l .select li.on p a::after,
    .general .info-t .side-l .select li:nth-child(5).on p a::after,
    .general .info-t .side-l .select li:nth-child(6).on p a::after{width: 52%;}
    .general .info-t .side-l .select li:nth-child(2).on p a::after,
    .general .info-t .side-l .select li:nth-child(3).on p a::after{width: 62%;}
    .general .info-t .side-l .select li:nth-child(4).on p a::after{width: 55%;}

    .general .side-b{top: 100%;}
}

@media screen and (max-width:550px){
    .prosthetic .side-b{top: 141vw;}
    
    .aesthetic .side-b{top: 150vw;}
    .aesthetic .side-b p{ word-spacing: 15px; font-size: 16px;}
    
    .ortho .side-b{top: 140vw;}
    .ortho .side-b p{ word-spacing: 10px; font-size: 16px;}

    .general .side-b{top: 100%;}
    .general .side-b p{ word-spacing: 7px;}
}

@media screen and (max-width:450px){
    .prosthetic .side-b{top: 153vw;}
    .prosthetic .side-b p{ word-spacing: 10px;}

    .aesthetic .side-b{top: 160vw;}

    .ortho .side-b{top: 152vw;}

    .general .side-b{top: 100%;}

}

@media screen and (max-width:400px){
    .prosthetic .side-b{top: 170vw;}
    
    .aesthetic .side-b{top: 180vw;}

    .ortho .side-b{top: 169vw;}

    .general .side-b{top: 98%;}
}



/* 인트로 */

.intro{width: 100%; position:relative; width:100%; height:1300px;}

.intro .int-t{width: 100%; display: flex; flex-wrap: wrap; height: 100%; position: relative;}

.intro .int-t .side-l{width: 50%; margin-top: -100px;}
.intro .int-t .side-l .img{width: 100%; filter: grayscale(1); transition:1s;}
.intro .int-t .side-l .img.on{width: 100%; filter: grayscale(0); transition:1s;}
.intro .int-t .side-l .img img{width: 100%;}

.intro .int-t .side-r{width: 50%; padding: 60px 0 0 150px; z-index: 998;}
.intro .int-t .side-r .txt{margin-bottom: 50px; color: #000; position: relative;}
.intro .int-t .side-r .txt h1{font-size: 56px; position: relative;}
.intro .int-t .side-r .txt h1::after{content: '';position: absolute; width: 200px; height: 1px; left: 0; bottom: 10px; background-color: #000;}
.intro .int-t .side-r .txt h1.long::after{content: '';position: absolute; width: 370px; height: 1px; left: 0; bottom: 10px; background-color: #000;}
.intro .int-t .side-r .txt h4{font-size: 24px; margin:30px 0;}
.intro .int-t .side-r .txt p{line-height: 28px; font-size: 18px; color: #333; margin-bottom: 40px;}

.intro .int-t .scroll{position: absolute; right: 100px;
    animation: scrollAni 2.0s ease-in-out reverse; animation-iteration-count: infinite;
    -webkit-animation: scrollAni 2.0s ease-in-out reverse; -webkit-animation-iteration-count: infinite;
    -moz-animation: scrollAni 2.0s ease-in-out reverse; -moz-animation-iteration-count: infinite;}

.intro .side-b{ font-family: 'Montserrat'; font-size: 24px; color: #000; text-align: center; width: 100%; margin: 0 auto;}
.intro .side-b p{ word-spacing: 15px; line-height: 70px;}

@keyframes scrollAni{
	0%{top: 36vw; }
	50%{top: calc(36vw - 30px);}
	100%{top: 36vw; ;}
}



@media screen and (max-width:1800px){
    .intro .int-t .side-r{ padding: 20px 0 0 150px;}
}

@media screen and (max-width:1650px){
    .intro .int-t{width: 100%;}
    .intro .int-t .side-r{ padding: 0px 0 0 150px;}
}
@media screen and (max-width:1600px){
    .intro{height:950px; }
    .intro .int-t .side-r{ padding: 0px 0 0 100px;}
    .intro .int-t .side-r .txt{margin-bottom: 40px;}
    .intro .int-t .side-r .txt h1{font-size: 45px;}
    .intro .int-t .side-r .txt h1::after{width: 160px;}
    .intro .int-t .side-r .txt h1.long::after{width: 295px;}
    .intro .int-t .side-r .txt h4{font-size: 20px;}
    .intro .int-t .side-r .txt p{line-height: 22px; font-size: 16px; margin-bottom: 30px;}
    .intro .int-t .side-r{top: -100px; right: 0; max-width: 900px;}

    .intro .side-b{top: 800px;}
}

@media screen and (max-width:1400px){
}

@media screen and (max-width:1250px){
    .intro{height:850px; }
    .intro .int-t .side-r{ padding: 0px 0 0 80px;}
    .intro .int-t .side-r .txt{margin-bottom: 40px;}
    .intro .int-t .side-r .txt h1{font-size: 38px;}
    .intro .int-t .side-r .txt h1::after{width: 135px; bottom: 7px;}
    .intro .int-t .side-r .txt h1.long::after{width: 250px; bottom: 7px;}
    .intro .int-t .side-r .txt h4{font-size: 18px; margin: 20px 0;}
    .intro .int-t .side-r .txt p{line-height: 22px; font-size: 14px; margin-bottom: 15px;}

    .intro .int-t .side-l{max-width: 800px;}

    .intro .scroll{display: none;}

}

@media screen and (max-width:1180px){
    .intro .int-t .side-l{max-width: 700px;}

    .intro .side-b{width: 100%;}
    .intro .side-b p{ word-spacing: 10px; line-height: 40px; font-size: 20px;}
}
@media screen and (max-width:976px){
    .intro{height:1440px; margin-top: -30%;}
    .intro .int-t .side-l{max-width: 976px; width: 100%; }
    .intro .int-t .side-r{ margin-top: 50px; width: 100%;}

    .intro .side-b{margin-top: 30px;}
}

@media screen and (max-width:750px){
    .intro .int-t .side-r{ margin-top: 0px;}
}

@media screen and (max-width:700px){
    .intro{height:1200px;}
    .intro .int-t .side-r{padding: 0px 0 0 50px;}
    .intro .int-t .side-r .txt{margin-bottom: 20px;}
    .intro .int-t .side-r .txt h1{font-size: 30px;}
    .intro .int-t .side-r .txt h1::after{width: 105px; bottom: 5px;}
    .intro .int-t .side-r .txt h1.long::after{width: 195px; bottom: 5px;}
    .intro .int-t .side-r .txt h4{font-size: 16px; margin-bottom: 10px;}

    .intro .side-b p{ word-spacing: 3px; line-height: 30px; font-size: 16px;}

}
@media screen and (max-width:550px){
    .intro{height:200vw;}
    .intro .int-t .side-r{padding: 0px 0 0 20px;}
    
    .intro .side-b p{ word-spacing: 5px;font-size: 14px;}
}
@media screen and (max-width:400px){
    .intro{height:230vw;}
}