@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size: 14px;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.04em; font-weight: 300; word-spacing: -1px; background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.06em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ol, ul, dl, dt, dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

textarea, select {font-family: 'Noto Sans KR', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#222;text-decoration:none}

#ctt header h1{position:absolute;font-size:0;line-height:0;overflow:hidden}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
 
input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}
.placeholdersjs { color: #aaa !important; }
::-webkit-input-placeholder {/* WebKit browsers */ color: #aaa;}
:-moz-placeholder {/* Mozilla Firefox 4 to 18 */ color: #aaa;}
::-moz-placeholder {/* Mozilla Firefox 19+ */ color: #aaa;}
:-ms-input-placeholder {/* Internet Explorer 10+ */ color: #aaa;}

/*공통*/
img{width:100%; vertical-align:top;}

#wrap .top{position:relative;}
#wrap .top .tab{margin:0 3%; overflow:hidden; position:absolute; bottom:-10px;}
#wrap .top .tab li{float:left; width:31.3333%; margin:0 1%;}
#wrap .top .tab.tab2 {text-align:center; left:50%; transform:translateX(-50%); width:100%; margin: 0;}
#wrap .top .tab.tab2 li {float:inherit; width:40%; max-width:170px; display:inline-block;}

/*하단*/
.footer_wrap #footer{color:#fff; background:#2a2a2a; text-align:center; padding:40px 3% 160px 3%;}
#footer .f_logo img{width:180px; margin-bottom:20px;}
#footer address span{display:block; font-style:normal; font-size:14px; font-weight:100; color:#fff;}
#footer ul{display:inline-block; padding:10px 0;}
#footer ul li{float:left; margin:0 4px;}
#footer ul li{width:40px;}
#footer .copy{font-size:13px; letter-spacing:0;}

/*하단퀵메뉴*/
.quick_link{position:fixed; bottom:0; left:0; overflow:hidden; background:#424242;}
.quick_link li{float:left; width:50%;}

/* 인비절라인 */
.orthodontic_hd {width: 100%; border-bottom: 1px solid transparent; position: fixed; top: 0; left: 0; z-index: 100; transition: .5s;}
.orthodontic_hd h1 {position: relative; cursor: pointer;}
.orthodontic_hd h1 img {display: block; height: 26px; transition: .5s;}
.orthodontic_hd .logo_bk {position: absolute; top: 0; left: 0; opacity: 0;}
.orthodontic_hd .inner {display: flex; justify-content: space-between; align-items: flex-end; height: 50px; transition: .5s;}
.orthodontic_hd .ham_open {position: relative; cursor: pointer;}
.orthodontic_hd .ham_open img {display: block; transition: .5s;}
.orthodontic_hd .ham_open .ham_open_bk {position: absolute; top: 0; left: 0; opacity: 0;}
.orthodontic_hd .ham_menu {width: 100%; position: fixed; top: 0; left: 0; background-color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transform: translateY(-100%); transition: .5s; opacity: 0;}
.orthodontic_hd .ham_menu.open {transform: translateY(0); opacity: 1;}
.orthodontic_hd .ham_menu .menu_top {display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e2e2e2;}
.orthodontic_hd .ham_menu .menu_top .logo img {width: 85px; display: block;}
.orthodontic_hd .ham_menu .menu_top .ham_close {cursor: pointer;}
.orthodontic_hd .ham_menu .nav_ul {display: flex; flex-direction: column; gap: 15px 0; padding: 30px 20px;}
.orthodontic_hd .ham_menu .nav_ul a {font-size: 15px; line-height: 1;}
.orthodontic_hd.scr {background-color: #fff; border-color: #e2e2e2;}
.orthodontic_hd.scr .inner {align-items: center; height: 60px;}
.orthodontic_hd.scr .logo_wh {opacity: 0;}
.orthodontic_hd.scr .logo_bk {opacity: 1;}
.orthodontic_hd.scr .ham_open .ham_open_wh {opacity: 0;}
.orthodontic_hd.scr .ham_open .ham_open_bk {position: absolute; top: 0; left: 0; opacity: 1;}

.invisalign * {box-sizing: border-box;}
.invisalign .inner {width: 100%; padding: 0 20px;}
.invisalign img {width: auto;}
.invisalign .blue {color: #2cc8ff;}
.invisalign .bold {font-weight: 600;}
.invisalign .upper {text-transform: uppercase;}
.invisalign .bg_txt {margin-top: 80px;}
.invisalign .bg_txt img {max-width: 80%;}
.invisalign .atc_box .txt_box {margin-top: 50px;}
.invisalign .txt_box .txt_sml {padding-left: 5px;}
.invisalign .txt_box .txt_sml img {height: 8px;}
.invisalign .txt_box .txt_big {margin-top: 15px; font-size: 7.5vw; font-weight: 300; line-height: 1.4; letter-spacing: -2px; word-break: keep-all;}
.invisalign .txt_box .txt_def {margin-top: 25px; font-size: 14px; line-height: 1.4; word-break: keep-all;}
.invisalign .img_box img {max-width: 100%;}

.invisalign .main_visual {font-family: 'Century Gothic', sans-serif; height: 100vh; background: url(../img/orthodontic/invisalign/m_main_visual_bg.jpg) no-repeat left center / cover;}
.invisalign .main_visual .mv_txt_box {position: absolute; top: 45%; left: 50%; transform: translateX(-50%);}
.invisalign .main_visual h1 {font-size: 40px; color: #fff; text-align: center; width: 0; overflow: hidden; animation: appear 1.7s linear forwards; animation-delay: .2s;}
.invisalign .main_visual h1 img {width: 300px;}
.invisalign .main_visual .logo_wrap {width: calc(100% - 40px); display: flex; justify-content: center; align-items: center; position: absolute; top: 65%; left: 50%; transform: translateX(-50%);}
.invisalign .main_visual .logo_box {width: calc(50% - 27px); height: 50px; padding: 0 15px; background-color: #fff; border-radius: 50px; display: flex; justify-content: center; align-items: center;}
.invisalign .main_visual .logo_box:nth-child(1) img {height: 20px;}
.invisalign .main_visual .logo_box:nth-child(3) img {height: 26px;}
.invisalign .main_visual .x_box {width: 34px; height: 34px; margin: 0 10px;}
.invisalign .main_visual .x_box .bar {display: block; width: 38px; height: 1px; background-color: #fff;}
.invisalign .main_visual .x_box .bar1 {transform: translate(-2px, 15px) rotate(45deg);}
.invisalign .main_visual .x_box .bar2 {transform: translate(-2px, 13px) rotate(-45deg);}

@keyframes appear {
	0% {width: 0;}
	100% {width: 100%;}
}

.invisalign .mid01 {padding: 80px 0 120px;}
.invisalign .mid01 .atc_box1 .img_box {width: 80%;}
.invisalign .mid01 .atc_box2 {margin-top: 80px;}
.invisalign .mid01 .atc_box2 .img_box {padding-left: 20px;}
.invisalign .mid01 .atc_box2 .txt_box {text-align: right;}

.invisalign .mid02 {padding: 80px 0; background-color: #f7f7f7; text-align: center; position: relative;}
.invisalign .mid02::before {content: ''; display: block; aspect-ratio: 307/349; width: 170px; background: url(../img/orthodontic/invisalign/m_mid02_img1.png) no-repeat center/cover; position: absolute; bottom: calc(100% - 70px); left: 0;}
.invisalign .mid02_ul {margin-top: 50px; display: flex; justify-content: center;}
.invisalign .mid02_ul .mid02_li {width: calc(33.333% - (20px / 3));}
.invisalign .mid02_ul .mid02_li + .mid02_li {margin-left: 10px;}
.invisalign .mid02_ul .icon_box {width: 90%; aspect-ratio: 1/1; margin: 0 auto; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center;}
.invisalign .mid02_ul .icon_box img {width: 50%;}
.invisalign .mid02_ul .bd_tp {margin-top: 10px; font-size: 14px;}
.invisalign .mid02_ul .bd_tp .bold {margin-bottom: 7px; font-size: 1.1em;}
.invisalign .mid02_ul .bd_tp p {word-break: keep-all;}
.invisalign .mid02_ul .bd_tp .desc {line-height: 1.5;}

.invisalign .mid03 {padding: 80px 0;}
.invisalign .mid03 .atc_box1 {padding-right: 20px;}
.invisalign .mid03 .atc_box2 {margin-top: 80px;}
.invisalign .mid03 .atc_box2 .txt_box {text-align: right;}

.invisalign .mid04 {padding: 80px 0 330px; color: #fff; text-align: center; background: url(../img/orthodontic/invisalign/m_mid04_bg.jpg) no-repeat right bottom/cover; position: relative;}
.invisalign .mid04 .txt_big {font-size: 6vw; font-weight: 300; line-height: 1.4;}
.invisalign .mid04 .txt_def {margin-top: 30px; font-size: 14px; line-height: 1.5;}
.invisalign .mid04_ul {margin-top: 40px; padding-bottom: 20px; position: relative; display: flex; justify-content: center;}
.invisalign .mid04_ul li {width: 170px;}
.invisalign .mid04_ul li + li {margin-left: 10px;}
.invisalign .mid04_ul img {width: 100%;}
.invisalign .mid04_ul p {margin-top: 3px; font-size: 11px; color: #282828; text-align: left;}

.invisalign .mid05 {overflow: hidden;}
.invisalign .mid05 .bg_txt {text-align: right;}
.invisalign .mid05 .img_box {margin-top: 30px;}
.invisalign .mid05 .img_box img {display: block; transform: scale(1.4);}
.invisalign .mid05 .img_box img:nth-child(1) {width: 70%;}
.invisalign .mid05 .img_box img:nth-child(2) {width: 50%; margin-top: -20px; margin-left: auto;}
.invisalign .mid05 .img_box img:nth-child(3) {width: 50%; margin-top: -120px;}
.invisalign .mid05 .img_box.anim img {animation: zoomOut 2s forwards;}
.invisalign .mid05 .img_box.anim img:nth-child(1) {animation-delay: .2s;}
.invisalign .mid05 .img_box.anim img:nth-child(2) {animation-delay: .5s;}
.invisalign .mid05 .img_box.anim img:nth-child(3) {animation-delay: .8s;}

@keyframes zoomOut {
	0% {transform: scale(1.4);}
	99% {transform: scale(1);}
	100% {transform: scale(1); overflow: hidden;}
}

.invisalign .mid06 {padding: 80px 0;}
.invisalign .mid06 .atc_box1 .txt_sml {text-align: center;}
.invisalign .mid06 .txt_sml img {height: 8px;}
.invisalign .mid06 .atc_box1 .txt_big {margin-top: 15px; font-size: 6.5vw; font-weight: 300; text-align: center; line-height: 1.4; letter-spacing: -2px;}
.invisalign .mid06 .atc_box1 .txt_big .blue {word-break: keep-all;}
.invisalign .mid06 .img_box {margin-top: 50px;}
.invisalign .mid06 .atc_box1 .txt_box {display: flex; justify-content: center;}
.invisalign .mid06 .txt_left {margin-right: 30px; font-size: 20px; font-weight: 300; text-align: left; line-height: 1.4; letter-spacing: -0.1rem; white-space: nowrap;}
.invisalign .mid06_ul li {padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid #d6d6d6; font-size: 12px; text-align: left; word-break: keep-all;}
.invisalign .mid06_ul li::before {content: ''; display: block; width: 14px; height: 14px; background: url(../img/orthodontic/invisalign/mid06_chk.png) no-repeat center/cover; position: absolute; top: 9px; left: 0;}
.invisalign .mid06 .atc_box2 {margin-top: 60px; text-align: right;}
.invisalign .mid06 .atc_box2 .txt_def {margin-top: 30px;}
.invisalign .mid06 .process_wrap {display: flex; margin-top: 50px; padding-right: 10px; text-align: left;}
.invisalign .mid06 .process_box {width: 50%;}
.invisalign .mid06 .process_box .img_p {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 8px solid #2cc8ff; position: relative;}
.invisalign .mid06 .process_box .radius_box {display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 50px; font-size: 15px; color: #fff; line-height: 1; background-color: #2cc8ff;}
.invisalign .mid06 .process_box .radius_box + p {padding-right: 10px; word-break: keep-all;}
.invisalign .mid06 .process_box2 {padding-right: 10px;}
.invisalign .mid06 .process_box2 .img_p {border-color: #424242;}
.invisalign .mid06 .process_box2 .img_p::after {content: ''; display: block; width: 20px; height: 24px; background: url(../img/orthodontic/invisalign/mid06_arr_head.png) no-repeat center/cover; position: absolute; bottom: -17px; right: -10px;}
.invisalign .mid06 .process_box2 .radius_box {background-color: #424242;}

.invisalign .mid07 {padding: 80px 0; background-color: #f7f7f7;}
.invisalign .mid07_ul {display: flex; flex-wrap: wrap;}
.invisalign .mid07_ul li {width: calc(33.333% - (10px / 3));}
.invisalign .mid07_ul li:not(:nth-child(1), :nth-child(4)) {margin-left: 5px;}
.invisalign .mid07_ul li:nth-child(n+4) {margin-top: 20px;}
.invisalign .mid07_ul .icon_box {display: flex; justify-content: center; align-items: center; width: 85%; aspect-ratio: 1/1; margin: 0 auto; background-color: #fff; border-radius: 50%;}
.invisalign .mid07_ul .icon_box img {max-width: 50%;}
.invisalign .mid07_ul li:nth-child(5) .icon_box img {width: 20px;}
.invisalign .mid07_ul .desc_box {margin-top: 10px; font-size: 13px; text-align: center; line-height: 1.5;}
.invisalign .mid07_ul .desc_box p {word-break: keep-all;}
.invisalign .mid07_ul .bold {font-size: 1.1em;}

.invisalign .mid08 {padding: 80px 0; text-align: center;}
.invisalign .mid08 .txt_box {margin-top: 0;}
.invisalign .mid08 .img_box {margin-top: 50px;}
.invisalign .mid08 .link_wrap {margin: 30px auto 0;}
.invisalign .mid08 .link_wrap a {display: inline-block; width: 180px; line-height: 55px; color: #fff; text-align: center; border-radius: 55px; background-color: #2cc8ff;}

.invisalign .mid09 {padding: 50px 0 200px; background-color: #fafafa;}
.invisalign .mid09 .tit {font-size: 30px; font-weight: 300;}
.invisalign .contact_ul {margin-top: 20px;}
.invisalign .contact_ul li {display: flex; color: #525252;}
.invisalign .contact_ul li + li {margin-top: 10px;}
.invisalign .contact_ul .bold {margin-right: 10px; font-weight: 500; white-space: nowrap;}
.invisalign .contact_ul .justify {display: inline-block; width:60px; font-weight: 400;}
.invisalign .contact_ul .close {display: block; margin-top: 20px;}
.invisalign .mid09 .img_box {margin-top: 50px;}

.sub_counseling {width: 100%; padding: 25px 0; position: fixed; bottom: 0; left: 0; background-color: #3a3a3a; color: #fff; transition: all .5s;}
.sub_counseling .counseling_wrap {position: relative;}
.sub_counseling fieldset {display: flex; justify-content: space-between;}
.sub_counseling ul {display: flex; flex-wrap: wrap;}
.sub_counseling ul li:nth-child(1) {width: 40%; margin-right: 5px;}
.sub_counseling ul li:nth-child(2) {width: calc(60% - 5px);}
.sub_counseling .hidden {display: none;}
.sub_counseling input {width: 100%; font-size: 10px; color: #fff !important; line-height: 40px; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid #9f9f9f; box-shadow: none; outline: none;}
.sub_counseling .btn_li {margin-left: 10px; display: flex;}
.sub_counseling .btn_li button {width: 60px; padding: 15px 0; border-radius: 15px; font-size: 10px; font-weight: 600; color: #fff;  text-align: center; background-color: #2cc8ff; border: none;}
.sub_counseling .btn_li .kakao {width: 60px; margin-left: 5px; padding: 15px 0; border-radius: 15px; font-size: 10px; font-weight: 600; color: #391b1b; text-align: center; background-color: #fae301; display: flex; justify-content: center; align-items: center;}
.sub_counseling .t_agree {width: 0; height: 0; position: absolute; left: -9999px;}
.sub_counseling .t_agree + label {display: inline-block; margin-top: 10px; font-size: 12px; padding-left: 12px; position: relative;}
.sub_counseling .t_agree + label::before {content: ''; display: block; width: 8px; height: 8px; border: 1px solid #fff; position: absolute; top: 4px; left: 0;}
.sub_counseling .t_agree:checked + label::before {background-color: #fff;}
.sub_counseling .t_agree + label + a {font-size: 10px; color: #fff; display: inline-block;}

@media screen and (max-width: 400px){
	.invisalign .mid08 .br_hide {display: none;}
}
@media screen and (max-width: 390px){
	.invisalign .mid05 .br_hide {display: none;}
}

/*팝업레이어*/
.popup-wrap {display: none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.popup-wrap .bg {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.popup-wrap .pop-layer {display:block;}
.pop-layer {display:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height:auto;  background-color:#fff; border: 0 none; z-index: 10;}	
.pop-layer2{top:50% !important;}
.pop-layer .pop-container {position: relative; padding: 0;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .close {position: absolute; right: 20px; top: 20px; border-top: 0 none;}
.pop-layer .close img {width: 15px;}

#agree {background-color: #fff;}
#agree .pop-container {}
#agree .pop-conts {overflow: hidden; margin: 0 auto; color: #515151;}
#agree .pop-conts h2 {display: block; padding: 20px 50px 0 20px; font-size: 14px; font-weight: 400;}
#agree .personal {padding: 15px 20px 30px 20px; font-size: 12px; line-height: 1.5em;}