/* ============================================================================================================================== */
/* ======================================================= custom common 코드 ==================================================== */
/* ============================================================================================================================== */

.zoom-wrap {position: relative; overflow: hidden;}
.zoom {transform: scale(1.12); transition: transform 0.8s ease-in-out; width: 100%;}
.zoom.active {transform: scale(1); transition: transform 2.4s ease-in-out;}

.bg-animation {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.progress-ring-circle {transition: 2.4s stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%;}

.pc-layout {display: block;}
.mobile-layout {display: none;}

.cursor_wrap {position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; z-index: 500000000;}
.cursor_wrap.hide {display: none;}
.cursor_wrap .cursor {position: fixed;}
.cursor2 {mix-blend-mode: plus-lighter;}
.pointer {position: absolute; left: 50%; top: 50%; margin: -16px 0 0 -16px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6.62px #D0AA7B; opacity: 0; transition: opacity 0.3s;}
.pointer::before, .pointer::after {content: ""; position: absolute; left: 50%; top: 50%; display: block; margin: -16px 0 0 -16px; width: 32px; height: 32px;border-radius: 50%;transform: translate3d(0, 0, 0);}
.pointer::before {background-color: #D0AA7B; animation: expand 1.8s ease-out infinite both;}
.pointer::after {background-color: #fff; animation: expand 1.8s ease-out 0.8s infinite both;}
.fade {opacity: 0.8;}

@keyframes expand {
	0% {
		z-index: 2;
		transform: scale(0);
	}
	50% {
		z-index: 1;
		transform: scale(1);
	}
	100% {
		z-index: 0;
	}
}

.custom-link {position: absolute; left: 0; top: -120px;}

.sub-common {max-width: 1600px; margin: 80px auto 0;}
.sub-common::before {position: absolute; content: ''; top: 0; right: 0; width: 440px; height: 458px; background: url(../img/custom/logo_bg.png) center/cover no-repeat;}
.sub-common .middle-title img {margin-bottom: 20px;}
.sub-slide-wrap {position: relative;}
.sub-slide {margin-top: 40px;}
.sub-slide .swiper-slide {text-align: center;}
.sub-slide .swiper-slide p {margin-top: 20px; line-height: 1.3; white-space: pre-line;}
.sub-slide-wrap .swiper-button-prev,
.sub-slide-wrap .swiper-button-next {top: calc(50% - 35px); transform: translateY(-50%); margin: 0; width: 45px; height: 45px; background: #554a3f; border-radius: 50%; color: #fff;}
.sub-slide-wrap .swiper-button-next {right: -60px;}
.sub-slide-wrap .swiper-button-prev {left: -60px;}
.sub-slide-wrap .swiper-button-prev::after,
.sub-slide-wrap .swiper-button-next::after {font-size: 24px;} 

.sub12-common article {display: flex; align-items: center; padding: 50px 30px; height: 260px; background: url(../img/custom/sub1_2_01.jpg) center/cover no-repeat; color: #fff;}
.sub12-common article:not(:nth-child(2)) {margin-top: 40px;}
.sub12-common .tit {font-family: 'NanumSquare',san-serif; font-weight: 900; transform: skew(-0.1deg); white-space: pre-line;}
.sub12-common .sub {margin-top: 20px; white-space: pre-line;}
.sub12-common article:nth-child(2n-1) {justify-content: flex-end;}
.sub12-common article:nth-child(2n-1) div {width: 400px;}
.sub12-common article:nth-child(3) {background: url(../img/custom/sub1_2_02.jpg) center/cover no-repeat;}
.sub12-common article:nth-child(4) {background: url(../img/custom/sub1_2_03.jpg) center/cover no-repeat;}
.sub12-common article:nth-child(5) {background: url(../img/custom/sub1_2_04.jpg) center/cover no-repeat;}
.sub12-common article:nth-child(6) {background: url(../img/custom/sub1_2_05.jpg) center/cover no-repeat;}
.sub12-common article:nth-child(7) {background: url(../img/custom/sub1_2_06.jpg) center/cover no-repeat;}

header .numberImp {display: flex; align-items: center; margin-left: 20px;}
header .numberImp p {color: #fff; line-height: 1.3;}

.scroll-indicator {position: absolute; display: none; left: 0; top: 0; width: 100%; height: 100%; background: rgba(248,242,229,0.8); z-index: 1;}
.scroll-indicator.active {opacity: 0; z-index: -1;}

/* 케이스 스타일 */
.case-style ul{display: flex;gap:20px;}
.case-style ul li{position: relative;}
.case-style ul li span{display: inline-block;position: absolute;top:0;left: 0;font-size: 20px;font-family: "GmarketSansMedium";padding: 5px 20px;letter-spacing: 0px;color: #fff;background: #2b9a96;}
.case-style ul li:before{content:"";background:url(../img/watermark.svg) center / 100% no-repeat;position: absolute;width: 100%;height: 100%;top:0;left: 0;}
.case-style ul li.before:after{content:"BEFORE";position: absolute;left: 0;bottom: 0;padding: 5px 0;text-align: center;width: 100%;color: #fff;background: rgba(0,0,0,0.5);font-size: 20px;font-family: "GmarketSansBold";z-index: 1;}
.case-style ul li.middle:after{content:"MIDDLE";position: absolute;left: 0;bottom: 0;padding: 5px 0;text-align: center;width: 100%;color: #fff;background: rgba(0,0,0,0.5);font-size: 20px;font-family: "GmarketSansBold";z-index: 1;}
.case-style ul li.after:after{content:"AFTER";position: absolute;left: 0;bottom: 0;padding: 5px 0;text-align: center;width: 100%;color: #fff;background: rgba(43,154,150,0.7);;font-size: 20px;font-family: "GmarketSansBold";z-index: 1;}
.case-style ul li .blur::before {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1;}
.case-style ul li .blur{overflow: hidden;}
.case-style ul li .blur img {filter: blur(5px);}
.case-style ul li .blur .txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; z-index: 2;}
.case-style ul li .blur .txt p {color: #fff; white-space: pre-line; font-size: 20px;}
.case-style .btn-style{text-align: center;}

.case-style.three ul li{width: 33.3%;}

/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.sub12-common article:nth-child(2n-1) div {width: auto; text-align: right;}

header .numberImp {display: none;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {
.sub-common {margin: 40px auto 0;}
.sub-common::before {width: 300px; height: 312px;}
.sub-slide-wrap .swiper-button-next {right: 10px;}
.sub-slide-wrap .swiper-button-prev {left: 10px;}
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.case-style ul li .blur .txt p{font-size: 17px;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.sub-common {margin: 0 auto;}
.sub-common::before {width: 180px; height: 187px; right: auto; top: auto; bottom: -110px;}
.case-style ul{gap:5px;}
.case_txt.mt5{margin-top: 50px;}



.sub12-common article {padding: 50px 20px;}
.sub12-common article:not(:nth-child(2)) {margin-top: 20px;}

.sub-slide-wrap .swiper-button-prev,
.sub-slide-wrap .swiper-button-next {width: 35px; height: 35px;}
.sub-slide-wrap .swiper-button-prev::after,
.sub-slide-wrap .swiper-button-next::after {font-size: 17px;}

.custom-link {top: -80px;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.case-style ul li .blur .txt p{font-size: 15px;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.pc-layout {display: none !important;}
.mobile-layout {display: block !important;}

.sub-common::before {width: 230px; height: 239px; bottom: -65px; left: -65px;}
.sub-common .middle-title img {margin-bottom: 15px; max-width: 65px;}
.sub-slide .swiper-slide p {font-size: 17px;}

.sub12-common .inner {padding: 0 20px;}
.sub12-common .inner > div > div:not(:first-child) {margin-top: 20px;}
.sub12-common .inner > div > div:nth-child(2n) {text-align: right;}
.sub12-common .txt {padding: 20px 10px;}
.sub12-common .sub {margin-top: 10px;}

.cursor_wrap {display: none;}


.custom-link {top: -60px;}

.case-style ul{flex-wrap: wrap;}
.case-style ul li{width: 100%;}
.case-style ul li img{width: 100%;height: auto;}
.case-style ul li .blur .txt p{font-size: 13px;}
.case-style ul li.after:after{font-size: 15px;}
.case-style ul li.middle:after{font-size: 15px;}
.case-style ul li.before:after{font-size: 15px;}
.case_txt p{font-size: 10px;}
.case_txt.mt5{margin-top: 10px;}
.case-style ul li span{font-size: 13px;padding: 2px 5px;}
.case-style.three ul li{width: 100%;}

.scroll-indicator {display: block;}
}


/* ============================================================================================================================== */
/* ======================================================= custom common 코드 ==================================================== */
/* ============================================================================================================================== */





/* ============================================================================================================================ */
/* ======================================================= sub1 custom 코드 ==================================================== */
/* ============================================================================================================================ */

.about_bg .bg-animation {background: url(../img/sub/sub1_bg.png) center/cover no-repeat;}


.about1-area1 article {position: relative;}
.about1-area1 .profile {position: relative; display: flex; max-width: 1200px; margin: 0 auto; width: 100%;align-items: center;}
.about1-area1 .profile > li:last-child {margin-left: 30px; flex: 1;}
.about1-area1 .profile .txt .name { letter-spacing: 0.05em;font-family: 'GmarketSansMedium',san-serif;}
.about1-area1 .profile .txt {margin-bottom: 30px;}
.about1-area1 .profile .txt .name span {font-family: 'GmarketSansMedium',san-serif;margin-left: 10px; padding: 5px 10px; font-size: 0.5em; color: #fff; background: #2b9a96;}
.about1-area1 .profile .list {display: flex;}
.about1-area1 .profile .list ul:not(:first-child) {margin-left: 50px;}
.about1-area1 .profile .list ul > li {position: relative; padding-left: 15px;}
.about1-area1 .profile .list ul > li::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #333;}
.about1-area1 .profile .list ul > li:not(:first-child) {margin-top: 5px;}
.about1-area1 .profile .list p {font-size: 16px;}
.about1-area1 article:nth-child(2n) .profile {flex-direction: row-reverse;}

.about1-area1 .certi{padding: 30px 0;background: #f5f5f5;}
.about1-area1 .certi > div{max-width: 1200px; margin: 0 auto;}

.about1-area2{padding: 400px 0 50px;background: url(../img/sub/doctor_bg.png) center/cover no-repeat;background-attachment: fixed;}
.about1-area2 .title{color: #fff;}
.about1-area2 p{white-space: pre-line;color: #fff !important;}
.about1-area2 strong{margin-top: 50px;display: block;text-align: right;font-size: 30px;font-family: 'GmarketSansMedium',san-serif;}

.about2-area1 #gallery {position: relative; padding-bottom: 120px;}

.about03-area1 ul.flex .txt {margin: 25px 0 0 20px;}
.about03-area1 ul.flex h5 {font-family: 'GmarketSansBold',san-serif;margin-bottom: 10px; color: #000;}
.about03-area2 {margin-top: 60px; padding-top: 60px !important; border-top: 1px solid #333;}
.about03-area2 ul.flex .txt h5 {font-family: 'GmarketSansBold',san-serif;margin-top: 20px; color: #000; font-weight: 700;}
.about03-area2 ul.flex .txt h5 span {font-size: 0.7em; font-weight: 500;}

.about4-area1{background: #fff;}
.about4-area1 h5{font-family: 'GmarketSansBold',san-serif;text-align: left;}
.about4-area1 .map-wrap .root_daum_roughmap {width: 100% !important;}
.about4-area1 .map-wrap .root_daum_roughmap .wrap_controllers {display: none;}

.time {display:flex; flex-direction: column;}
.time > li:not(:first-child) {margin-top: 10px;}
.time > li > ul {display:flex; /* align-items:center; */ display: inline-flex; margin-bottom: 3px; padding: 2px 0px; text-align: left;}
.time > li > ul > li:first-child {margin-right: 10px; width: 200px; position: relative;}
.time > li > ul > li .night-icon {position: absolute; left: -30px; top: 50%; transform:translateY(-50%) rotate(-45deg);}
.time > li > ul > li h6 {display: flex; align-items: center;gap:10px;font-weight: 500;transform: skew(-0.1deg);}
.time > li > ul > li:last-child h6 {font-weight: 600; text-align-last: justify;}
.time > li > ul > li:last-child h6 a{font-weight: 900;color: #000;cursor: pointer;}
.time > li > ul > li .tag{display: inline-block;font-size: 15px;padding: 2px 8px;color: #fff;background: #2b9a96;}

.about4-area1 .box{padding-top: 50px;margin-top: 40px;border-top: 3px solid #000;}
.about4-area1 .box.address > ul{margin-bottom: 15px;padding-bottom: 30px;border-bottom: 1px solid #000;}
.about4-area1 .box.address > ul:last-child{border-bottom: none;margin-bottom: 0;padding-bottom: 0;}

.about5-area3 ul{display: flex;gap:10px;}
.about5-area3 ul li{width: 50%;padding: 30px;}
.about5-area3 ul:nth-child(2){margin-bottom: 10px;}
.about5-area3 ul:nth-child(2) li:nth-child(1){background: url(../img/sub/sub16_03.png) center/cover no-repeat;}
.about5-area3 ul:nth-child(2) li:nth-child(2){background: url(../img/sub/sub16_04.png) center/cover no-repeat;}
.about5-area3 ul:nth-child(3) li:nth-child(1){background: url(../img/sub/sub16_05.png) center/cover no-repeat;}
.about5-area3 ul:nth-child(3) li:nth-child(2){background: url(../img/sub/sub16_06.png) center/cover no-repeat;}
.about5-area3 ul li h5,.about5-area3 ul li p{white-space: pre-line;}

.about5-area4{background: url(../img/sub/sub16_07.png) left/cover no-repeat;background-attachment: fixed;}

.about5-area5 ul{display: flex;align-items: center;gap:10px;flex-wrap: wrap;align-items: center;justify-content: center;}
.about5-area5 ul li{width: calc(16.6% - 8px);text-align: center;}
.about5-area5 ul li .bookAntiqua{font-weight: bold; font-style: italic; font-size:50px;font-weight: 400; border-bottom: 2px solid #000;}
.about5-area5 ul li p{margin-top: 10px;}

.about5-area5 ol{display: flex;align-items: center;gap:10px;flex-wrap: wrap;}
.about5-area5 ol li{width: calc(50% - 5px);padding: 30px;text-align: center;border: 1px solid #000;}
.about5-area5 ol li p{white-space: pre-line;}

.about5-area6{color: #fff;background: url(../img/sub/sub16_08.png) center/cover no-repeat;background-attachment: fixed;}
.about5-area6 p{color: #fff;}
.about5-area6 .time-wrap {margin: auto;padding: 30px;width: 600px;background: rgba(0,0,0,0.5);}
.about5-area6 .time > li{}
.about5-area6 .time > li > ul > li:last-child h6 a{color: #fff;}



/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.about1-area2 ul .img::before {display: none;}

.about1-area1 .certi{margin-top: 20px;}

.about1-area1 .profile {flex-direction: column !important;}

.about1-area1 .profile > li:last-child {display: flex; padding: 40px 20px 0; margin-left: 0;}
.about1-area1 .profile .txt {margin-bottom: 0;}
.about1-area1 .profile .txt .sub {margin-top: 10px;}
.about1-area1 .profile .list {margin-left: 40px;}
.about1-area1 .profile .list ul:not(:first-child) {margin-left: 30px;}
.about1-area1 .profile .list p {font-size: 15px;}

}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {


}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.about1-area1 .profile > li:last-child {display: block;}
.about1-area1 .profile .txt {margin-bottom: 30px;}
.about1-area1 .profile .img{width: 100%;border: 1px solid #eee;text-align: center;padding-top: 10px;}
.about1-area1 .profile .img img{max-width:250px;}
.about1-area1 .profile .list {margin-left: 0;}

.about03-area2 ul.flex{display: block;}
.about03-area2 ul.flex > li {width: 100%;}
.about03-area2 ul.flex > li {margin-top: 30px;}

.about4-area1 .info-wrap > ul.flex {flex-wrap: wrap;}
.about4-area1 .info-wrap > ul.flex > li {width: 100%;}
.about4-area1 .info-wrap > ul.flex > li > div {text-align: center;}
.about4-area1 .address {padding: 40px 10px;} 

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {


.about1-area1 .profile .list ul > li::before {top: 9px; transform: none;}
.about03-area1 ul.flex{display: block;}
.about1-area2{padding: 200px 0 50px;background-attachment: unset;}
.about1-area2 strong{text-align: center;margin-top: 20px;}
.about03-area1 ul.flex > li > div {text-align: center;}
.about03-area1 ul.flex > li:last-child {margin-top: 30px;}

.about4-area1 .address {padding: 10px 0;}
.about4-area1 .address .flex{display: block;}

.about5-area3 ul{display: block;}
.about5-area3 ul li{width: 100%;}
.about5-area3 ul li:nth-child(odd){margin-bottom: 10px;}

.about5-area5 ul li{width: 33.3%;}


}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.about1-area4 ul.flex > li {width: 100%;}
.about1-area4 ul.flex > li > div {padding: 30px 10px; height: auto;}

.about1-area1 .profile .list ul:not(:first-child) {margin-left: 20px;}

.about5-area5 ol li{width: 100%;}
.about5-area6 .time-wrap{width: 100%;padding: 30px 10px;}
.time > li > ul{width: 100%;}
.time > li > ul > li:first-child{width: auto;}
.about5-area6 p{text-align: center;}
}

/*================================================================ 480px 이하 ================================================================= */
@media screen and (max-width:480px) {

.about1-area1 .profile::before {width: 120px !important; height: 116px !important;}
.about1-area1 .profile > li:last-child {padding: 20px 0 0;}
.about1-area1 .profile .list {flex-direction: column;}
.about1-area1 .profile .list ul:not(:first-child) {margin: 30px 0 0;}

.about03-area2 {padding-top: 40px !important; margin-top: 40px;}
.about03-area2 ul.flex > li:nth-child(n+3):nth-child(-n+4) {margin-top: 20px;}
.about03-area2 ul.flex .txt h5 {line-height: 1.2;}

.about2-area1 #gallery {padding-bottom: 100px;}

.about4-area1 .info-wrap > ul.flex {gap: 20px;}
.about4-area1 .map-wrap .root_daum_roughmap .wrap_map {height: 250px !important;}
.about4-area1 .time > li > ul > li:first-child {margin-right: 20px; width: 80px;}
.about4-area1 .time > li:nth-child(2) > ul::before {left: -35px; width: 25px; height: 25.5px;}
.about4-area1 .time > li:nth-child(2) > ul::after {right: -30px; width: 22px; height: 27px;}

}


/* ============================================================================================================================ */
/* ======================================================= sub1 custom 코드 ==================================================== */
/* ============================================================================================================================ */





/* ============================================================================================================================ */
/* ======================================================= sub2 custom 코드 ==================================================== */
/* ============================================================================================================================ */

.doctor_cal{max-width:700px;margin: auto;}
.doctor_cal ul li{width: 50%;text-align: center;padding: 10px;}
.doctor_cal ul li .txt{margin-top: 20px;}
.doctor_cal ul li h5{font-family: 'GmarketSansBold',san-serif;}
.doctor_cal ul li p{font-family: 'GmarketSansMedium',san-serif;}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.sp02-area3 ul.flex > li {width: 100%;}
.sp02-area3 ul.flex > li > div {height: auto;}
.sp02-area3 .left {padding: 50px 10px;}
.sp02-area3 .right {height: 500px !important;}
.sp02-area6.bg-gray {padding: 120px 0 0;}
.sp02-area6.bg-gray::before {position: absolute; content: ''; left: 0; top: 0; width: 400px; height: 370px; background: url(../img/custom/special02_10.png) center/cover no-repeat;}
.sp02-area6 .bg-animation {display: none;}
.sp02-area6 ul.flex {flex-direction: column-reverse; max-width: 500px; margin: 0 auto;}
.sp02-area6 ul.flex > li {width: 100%;}
.sp02-area6 .left {padding: 40px 10px; background: #241f1c; color: #fff; border-radius: 0 0 20px 0;}
.sp02-area6 .left .middle-title {padding-bottom: 0;}
.sp02-area6 .left .middle-title h6 {font-size: 25px;}
.sp02-area6 .right {height: auto; border-radius: 0; background: none;}
.sp02-area6 .right .img {position: static; padding: 20px; text-align: center; border: 1px solid #241f1c; background: #fff; border-radius: 20px 0 0 0;}
.sp02-area6 .right .img img {max-width: 400px; width: 100%;}

.sp03-area3 article {max-width: 600px; margin: 0 auto; border: 1px solid #ccc;}
.sp03-area3 .img-wrap {display: flex; justify-content: center; border-bottom: 1px solid #ccc;}
.sp03-area3 .img:first-child {margin-right: 50px;}
.sp03-area3 .middle-title {display: block; height: auto; padding: 40px 10px; border: none; background: #241f1c; color: #fff;}
.sp03-area3 .middle-title::before,
.sp03-area3 .middle-title::after {display: none;}

.sp04-area2::before {width: 300px; height: 291px; right: 50px; bottom: 180px;}

.sp05-area2.bg-gray {padding: 120px 0 180px;}
.sp05-area2 .bg-tit {right: 20px; bottom: 20px;}
.sp05-area2 .bg-tit h2 {font-size: 72px;}
.sp05-area3 article .notice {max-width: 800px;}
.sp05-area3 article .notice ul > li:last-child {margin-top: 10px;}
.sp05-area4 .bg-tit {right: 20px; bottom: 20px;}
.sp05-area4 .bg-tit h2 {font-size: 72px;}
.sp05-area5 .bg-animation {background-position-x: -200px;}
.sp05-area6 .right {padding-left: 30px;}

.nopain-area1 ul.flex .tab {margin: 0 10px;}
.nopain-area6 .wrap {flex-direction: column; max-width: 800px; margin: 0 auto;}
.nopain-area6 .right {margin: 40px auto 0;}
.nopain-area6 .right > div {margin-left: 0;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {
.sp02-area2 ul.flex .txt {height: 220px;}

.sp04-area3 ul .left p {font-size: 20px;}

.sp05-area5 .middle-title {margin-right: 20px;}
.sp05-area6 .right .middle-title p:last-child {font-size: 20px;}
.sp05-area6 .right .sign {margin-top: 30px;}

.nopain-area6 .right article {height: 480px;}
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.sp01-area1 ul.flex > li > div {height: 300px;}

.sp04-area2::before {width: 250px; height: 243px;}

.sp05-area3.bg-gray {margin: 130px 0 320px;}
.sp05-area5.bg-gray {padding: 160px 0;}

.nopain-area1 ul.flex .tab {margin: 0 5px;}
.nopain-area5 .hashtag {flex-wrap: wrap;}
.nopain-area5 .hashtag > li {width: 50%;}
.nopain-area5 .hashtag > li > div {margin: 5px 10px; text-align: center;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.sp01-area1 ul.flex {flex-direction: column;}
.sp01-area1 ul.flex:last-child {flex-direction: column-reverse;}
.sp01-area1 ul.flex > li {width: 100%;}
.sp01-area1 ul.flex .img {height: 360px;}
.sp01-area1 ul.flex .txt {height: auto; padding: 50px 15px;}
.sp01-area3 article div {padding: 30px 10px; height: auto; flex-direction: column;}
.sp01-area3 article div::before {position: static; transform: none; margin-bottom: 20px;}
.sp01-area5.bg-gray {padding: 120px 0;}
.sp01-area5 .img {margin: 40px 0;}

.sp02-area3 .right {height: 400px !important;}
.sp02-area6.bg-gray {padding: 80px 0 0;}

.sp03-area1 ul.flex > li > div {margin: 0 !important;}
.sp03-area1 .progress-ring {width: 220px; height: 220px;}
.sp03-area4 ul.flex::before {display: none;}
.sp03-area4 ul.flex > li {width: 33.3%;}
.sp03-area6 .bar {height: 80px;}

.sp04-area2 ul.flex > li > div {margin: 5px;}
.sp04-area2::before {display: none;}
.sp04-area4 article {padding: 50px 10px;}

.sp05-area3.bg-gray {padding: 80px 0; margin: 0;}
.sp05-area3 article {position: static; transform: none; max-width: 509px; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.sp05-area3 article .img {text-align: center;}
.sp05-area3 article img {box-shadow: none;}
.sp05-area3 article .notice {position: static; transform: none; width: 100%; margin: 0 auto;}
.sp05-area4.bg-gray {padding-bottom: 120px;}
.sp05-area6 ul.flex > li {width: 100%;}
.sp05-area6 {padding-top: 0 !important;}
.sp05-area6 .left {height: 420px;}
.sp05-area6 .right {padding: 40px 0 0 20px;}
.sp05-area6 .right .middle-title h6 {font-size: 28px;}

.nopain-area1 ul.flex .tab h5 {white-space: pre-line; font-size: 20px;}
.nopain-area3.bg-gray {padding: 140px 0;}
.nopain-area4 ul .img img {max-width: 120px;}
.nopain-area4 ul .img::before {left: -100px; width: 200px; height: 200px;}
.nopain-area4 ul .txt {margin-left: 40px;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.sp01-area2 ul.flex > li {width: 50%;}
.sp01-area2 ul.flex > li:not(:last-child) > div::before {right: -32px;}
.sp01-area2 ul.flex > li:not(:last-child) > div::after {right: -21px;}
.sp01-area2 ul.flex > li:nth-child(2) > div::before {top: auto; right: auto; left: -15px; bottom: 0; transform: none; width: 3px; height: 25px;}
.sp01-area2 ul.flex > li:nth-child(2) > div::after {top: auto; right: auto; left: -28px; bottom: 0; transform: none; width: 3px; height: 25px;}

.sp02-area1 .bg-animation {background: url(../img/custom/special02_bg1m.jpg) center/cover no-repeat;}
.sp02-area1 ul.flex > li:last-child {height: 300px;}
.sp02-area2 ul.flex > li {width: 100%;}
.sp02-area2 ul.flex .img {padding: 10px 0 0 0; border-radius: 15px 0 0 0; border: 1px solid #ccc;}
.sp02-area2 ul.flex .txt {height: auto; padding: 40px 10px; border-radius: 0 0 15px 0;}
.sp02-area2 article::before {display: none;}
.sp02-area4 article {box-shadow: 5px 5px #333;}
.sp02-area6 ul.flex {max-width: 450px;}
.sp02-area6 .left .middle-title h6 {font-size: 22px;}

.sp03-area4 ul.flex > li > div {margin: 5px;}
.sp03-area5 .middle-title h5 {padding-bottom: 20px; margin-bottom: 20px;}
.sp03-area5 .bg-animation {background: url(../img/custom/special03_bg2m.jpg) center/cover no-repeat;}
.sp03-area5 ul.flex > li:last-child {height: 300px;}

.sp04-area1 article {box-shadow: 5px 5px #333;}
.sp04-area2 ul.flex > li {width: 50%;}
.sp04-area2 ul.flex > li:nth-child(n+3):nth-child(-n+18) {margin-top: 30px;}
.sp04-area3 ul {flex-direction: column-reverse; align-items: center;}
.sp04-area3 ul > li:first-child {margin-top: 30px;}
.sp04-area3 ul .left {margin-right: 0;}
.sp04-area3 ul .left p {font-size: 18px;}

.sp05-area4.bg-gray {padding-bottom: 100px;}
.sp05-area4 .bg-tit h2 {font-size: 52px;}
.sp05-area5.bg-gray {padding: 80px 0;}
.sp05-area5 .bg-animation {background: url(../img/custom/special05_bg3m.jpg) center/cover no-repeat;}
.sp05-area5 ul.flex > li:last-child {height: 460px;}
.sp05-area5 .middle-title {margin-right: 0; text-align: left;}

.nopain-area2 ul.flex > li {width: 50%;}
.nopain-area5 .hashtag > li {width: 100%; max-width: 300px; margin: 0 auto;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.sp01-area1 ul.flex .img {height: 210px;}
.sp01-area1 ul.flex .txt {padding: 30px 15px;}
.sp01-area2 ul.flex > li > div {margin: 10px;}
.sp01-area2 ul.flex > li:first-child > div::after {bottom: -17px; right: 4px; top: auto; transform: none; width: 10px; height: 10px; background: none; border-right: 3px solid #333; border-bottom: 3px solid #333;}
.sp01-area2 ul.flex > li:nth-child(2) > div::after {bottom: -17px; left: 4px; width: 10px; height: 10px; background: none; border-left: 3px solid #333; border-bottom: 3px solid #333;}
.sp01-area2 ul.flex > li:not(:last-child) > div::before {right: 0; bottom: 0; top: auto; transform: rotate(45deg); width: 45px; height: 3px;}
.sp01-area2 ul.flex > li:nth-child(2) > div::before {left: 0; bottom: 0; transform: rotate(-45deg); width: 45px; height: 3px;}
.sp01-area2 ul.flex .img {position: relative;}
.sp01-area4 .bg-animation {background: url(../img/custom/special01_bg1m.jpg) center/cover no-repeat;}
.sp01-area5.bg-gray {padding: 60px 0;}

.sp02-area2 ul.flex .txt {padding: 25px 10px;}
.sp02-area3 .left {padding: 40px 20px;}
.sp02-area3 .left h4 {margin-bottom: 20px;}
.sp02-area3 .right {height: 265px !important;}
.sp02-area5 {background: linear-gradient(to top, #f4ede5 65%, transparent 65%);}
.sp02-area5 ul.flex > li {width: 100%;}
.sp02-area6 ul.flex {max-width: 320px;}
.sp02-area6.bg-gray {padding: 60px 0 0;}
.sp02-area6.bg-gray::before {width: 250px; height: 231px;}
.sp02-area6 .left .middle-title h6 {font-size: 16px;}
.sp02-area6 .right .img img {max-width: 220px;}

.sp03-area1 .progress-ring {width: 150px; height: 150px;}
.sp03-area2 ul.flex .num::before {margin: 10px auto 5px;}
.sp03-area3 .middle-title {padding: 20px 10px;}
.sp03-area4 ul.flex > li {width: 50%;}
.sp03-area5 ul.flex > li:last-child {height: 350px;}
.sp03-area6 .bg-animation {background-position-x: -200px;}
.sp03-area6 .bar {height: 60px;}
.sp03-area6 colgroup col {width: 37.5%;}
.sp03-area6 colgroup col:nth-child(2) {width: 25%;}

.sp04-area2 ul.flex .tit {margin: 15px 0 8px;}
.sp04-area3 ul .left p {font-size: 16px;}
.sp04-area3 ul .right img {max-width: 120px;}
.sp04-area4 article {padding: 30px 10px;}
.sp04-area4 article ul {flex-direction: column;}
.sp04-area4 article ul > li:first-child > div {margin: 0 0 20px 0;}
.sp04-area4 article ul > li:first-child img {max-width: 150px;}
.sp04-area4 article ul > li:last-child img {max-width: 250px;}

.sp05-area2.bg-gray {padding: 80px 0 140px;}
.sp05-area2 .bg-tit h2 {font-size: 48px;}
.sp05-area3.bg-gray {padding: 60px 0;}
.sp05-area3 article .notice {padding: 30px 10px;}
.sp05-area4.bg-gray {background: linear-gradient(to top, #f4ede5 50%, transparent 50%);}
.sp05-area4 .bg-tit h2 {font-size: 42px;}
.sp05-area5.bg-gray {padding: 60px 0;}
.sp05-area5 ul.flex > li:last-child {height: 360px;}
.sp05-area6 .left {height: 300px;}
.sp05-area6 .right .middle-title h6 {font-size: 24px;}
.sp05-area6 .right .middle-title p:last-child {font-size: 18px;}
.sp05-area6 .right .sign p {font-size: 20px;}
.sp05-area6 .right .sign p::after {width: 140px; height: 52px;}

.nopain-area1 ul.flex {flex-direction: column;}
.nopain-area1 ul.flex > li {width: 100%; margin: 0 auto;}
.nopain-area1 ul.flex .tab {margin: 5px 0; padding: 10px;}
.nopain-area1 ul.flex .tab h5 {white-space: normal;}
.nopain-area2 ul.flex > li {width: 100%; max-width: 250px;}
.nopain-area3.bg-gray {padding: 120px 0;}
.nopain-area4 ul {flex-direction: column;}
.nopain-area4 ul .img img {max-width: 90px;}
.nopain-area4 ul .img::before {width: 180px; height: 180px;}
.nopain-area4 ul .txt {margin: 30px 0 0 0;}
.nopain-area4 ul .txt h5 {margin-bottom: 20px;}
.nopain-area6 .left ul.flex > li {width: 100%; max-width: 280px;}
.nopain-area6 .left ul.flex > li:last-child {margin-top: 20px;}
.nopain-area6 .left ul.flex .txt {padding: 10px 0 0 10px;}
.nopain-area6 .right article {padding: 40px 20px;}
.nopain-area6 .right .img {right: -35px; bottom: -35px;}
}

@media screen and (max-width:380px) {
.sp04-area2 ul.flex .tit {font-size: 15px;}
.sp05-area6 .left {height: 260px;}
} 


/* ============================================================================================================================ */
/* ======================================================= sub2 custom 코드 ==================================================== */
/* ============================================================================================================================ */





/* ============================================================================================================================ */
/* ======================================================= sub3 custom 코드 ==================================================== */
/* ============================================================================================================================ */

.imp01bg .bg-animation {background: url(../img/custom/imp01_bg.jpg) center/cover no-repeat;}
.imp02bg .bg-animation {background: url(../img/custom/imp02_bg.jpg) center/cover no-repeat;}
.imp03bg .bg-animation {background: url(../img/custom/imp03_bg.jpg) center/cover no-repeat;}
.imp04bg .bg-animation {background: url(../img/custom/imp04_bg.jpg) center/cover no-repeat;}
.imp05bg .bg-animation {background: url(../img/custom/imp05_bg.jpg) center/cover no-repeat;}
.imp06bg .bg-animation {background: url(../img/custom/imp06_bg.jpg) center/cover no-repeat;}

.imp01-tit {display: inline-block; padding: 3px 20px; font-weight: 900; color: #fff; background: #241f1c;}
.point-num {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 85px; height: 85px; background: #2b9a96; color: #fff; }
.point-num h2 {line-height: 1;}
.point-num p {margin: 0; line-height: 1;}
.middle-title .point-num {margin: 0 auto 20px;}
.date-txt .img {position: relative; display: inline-block;}
.date-txt .img p {position: absolute; padding: 2px 15px 0; right: 10px; bottom: 10px; background: #918f8f; color: #fff; font-size: 15px;}
.bar {width: 2px; height: 150px; background: #241f1c; margin: 0 auto;}


.imp03-area1 ul.flex .middle-title {text-align: left;}
.imp03-area1 .bg-tit h2 {font-size: 60px; font-weight: bold; color: rgba(0,0,0,0.3); line-height: 1;}


.imp03-area2 ul.flex p {line-height: 1.5; font-weight: 900;}
.imp03-area3 .bg-animation {background: url(../img/sub/sub3_05.png) center/cover no-repeat;}
.imp03-area3 .title {color: #fff;}
.imp03-area3 .title *{text-align: left;}

.box-list-style{overflow: hidden; /*padding-bottom: 50px;*/}
.box-list-style ul{display:flex; flex-wrap:wrap; justify-content:center; width: 100%;}
.box-list-style ul > li{width: calc(33.3% - 20px); margin: 15px 10px; border-radius:20px; transition:0.5s; padding: 40px 30px; background-color: rgba(255,255,255,0.5);}
.box-list-style ul > li.active{box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; background-color: #0f5096; color: #fff;}
.box-list-style ul > li h6{margin-bottom: 10px;}
.box-list-style ul > li p{white-space: pre-line;}
.box-list-style h2{font-family: 'GmarketSansBold'; color: #f5f4f4; font-size: 140px;}
.box-list-style ul li:hover{background: #fff;color: #000;}
.imp03-area6 .flex{align-items: center;}
.imp03-area6 img{padding: 20px 20px 0 20px;}
.imp03-area7 {overflow: hidden;padding: 100px 0;}
.imp03-area7 .bg-animation {background: url(../img/sub/sub3_11.png) center/cover no-repeat;}
.imp03-area7 .title{padding-bottom: 0;}
.imp03-area7 .title *{text-align: left;color: #fff;}
.imp03-area7 .flex{align-items: center;}
.imp03-area7 .flex > li:nth-child(2){padding-left: 30px;}

.imp03-area9 h6{font-family: 'GmarketSansBold';margin-top: 20px;}

.imp03-area10 .title *{text-align: left;}
.imp03-area10 .title p{margin-top:20px;}

.imp03-area11 {overflow: hidden;color: #fff;}
.imp03-area11 .bg-animation {background: url(../img/sub/sub3_28.png) center/cover no-repeat;}

.imp03-common{background: url(../img/sub/sub3_27.png) center/cover no-repeat;}
.imp03-common h6{font-family: 'GmarketSansBold';margin-top: 20px;white-space: pre-line; }

.imp04-area1 .img{position: relative;text-align: center;}
.imp04-area1 .img:before{content:"FULL ARCH";width: 100px;position: absolute;top:0;left: 10%;transform: translateX(-10%);line-height: 1.1;font-family: 'GmarketSansBold';font-size: 100px;color: #f5f5f5;text-align: left;z-index: -1;}
.imp04-area1 .img:after{content:"DIGITAL IMPLANT";width: 150px;position: absolute;bottom: 0;right: 20%;transform: translateY(-20%);line-height: 1.1;font-family: 'GmarketSansBold';font-size: 100px;color: #f5f5f5;text-align: right;z-index: -1;}


.imp04-area2 ul li:hover{color: #fff;background: #2b9a96;}
.imp04-area2 ul li h5{font-weight: 700;}

.imp04-area3{overflow: hidden;}
.imp04-area3 .bg-animation {background: url(../img/sub/sub4_30.png) center/cover no-repeat;}
.imp04-area3 .title {color: #fff;}
.imp04-list .imp-tit{display: flex;margin-bottom: 20px;background: #fff;}
.imp04-list .imp-tit-box strong{width: 72px;height: 72px;line-height: 72px;text-align: center;font-size: 20px;font-family: 'GmarketSansBold';color: #fff;background: #000;}
.imp04-list .imp-tit-box h5{width: 100%;padding: 0 10px;line-height: 70px;font-family: 'GmarketSansBold';border: 1px solid #000;}
.imp04-list  p{white-space: pre-line;color: #fff;}
.imp04-list .basic-box{text-align: left;}

.imp04-area4 table {position: relative; width: 100%; border-collapse: inherit; border-spacing: 2px;}
.imp04-area4 .table-scroll {overflow-x: auto !important;}
.imp04-area4 table td {padding: 20px 10px; background: #fff; text-align: center; vertical-align: middle;}
.imp04-area4 table td:nth-child(2) {background: #e1e0e0;}
.imp04-area4 table td p {white-space: pre-line;}
.imp04-area4 table td:last-child p {font-weight: 900;}
.imp04-area4 table thead tr:first-child td {padding: 0;}
.imp04-area4 table thead tr:last-child td:first-child {background: #898989; color: #fff;}
.imp04-area4 table thead tr:last-child td:last-child {background: #2b9a96; color: #fff;}
.imp04-area4 table tbody td {background: #f7f5f5;}
.imp04-area4 table td .img img {width: 100%;}

.imp05-box {position: relative; padding: 50px 10px; max-width: 900px; margin: 0 auto 40px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; background: #fff;}
.imp05-box::before {position: absolute; content: ''; left: -65px; top: 50%; transform: translateY(-50%); width: 130px; height: 130px; background: url(../img/custom/imp05_01.png) center/cover no-repeat;}
.imp05-box p {white-space: pre-line; text-align: center; font-weight: 700;}
.imp05-area1.bg-gray {color: #fff;}
.imp05-area1 .bg-animation {background: url(../img/custom/imp05_bg1.jpg) center/cover no-repeat;}
.imp05-area1 .middle-title {text-align: right; margin-bottom: 0;}
.imp05-area1 .bg-tit h2 {margin-top: 20px; font-size: 60px; font-weight: bold; color: rgba(255,255,255,0.7); text-align: right; line-height: 1;}
.imp05-area3.bg-gray {background: #f3f3f3;}
.imp05-area4 article {max-width: 900px; margin: 0 auto; border: 2px solid #362317;}
.imp05-area4 article .top {padding: 8px 10px; background: #362317;}
.imp05-area4 article .top .tit {color: #fff; font-weight: 500; text-align: center;}
.imp05-area4 article .btm {display: flex; justify-content: center; padding: 50px 10px;}
.imp05-area4 article .btm .list > li {position: relative; padding-left: 40px;}
.imp05-area4 article .btm .list > li:not(:first-child) {margin-top: 30px;}
.imp05-area4 article .btm .list > li::before {position: absolute; content: ''; left: 0; top: 2px; width: 26px; height: 26px; background: url(../img/custom/imp05_12.jpg) center/cover no-repeat;}
.imp05-area4 article .btm .list p {font-weight: 700;}

.imp06-area1 {color: #fff;}
.imp06-area1 .bg-animation {background: url(../img/custom/imp06_bg1.jpg) center/cover no-repeat;}
.imp06-area2 .list > li {padding: 10px; text-align: center; border: 1px solid #ccc; background: #fff;}
.imp06-area2 .list > li:not(:first-child) {margin-top: 20px;}
.imp06-area4.bg-gray {padding: 120px 0 60px; background: linear-gradient(to top, #241f1c 60%, transparent 60%); color: #fff;}
.imp06-area4 .brief-ex .ex {padding: 10px; font-weight: 500;}
.imp06-area5 .tac {position: relative;}
.imp06-area5 .tac::before {position: absolute; content: ''; left: 50px; bottom: -55px; width: 215px; height: 215px; background: url(../img/custom/imp06_06.png) center/cover no-repeat;}



/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {

.imp03-area1 .bg-tit h2 {font-size: 48px;}

}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

.imp03-area6 .flex{flex-wrap: wrap-reverse;}
.imp03-area6 .flex li{text-align: center;}
.imp03-area7{padding: 50px 0;}
.imp03-area7 .flex > li:nth-child(2){padding-left: 0;padding-top: 30px;}

.imp05-box {margin: 80px auto 40px; padding: 90px 10px 50px;}
.imp05-box::before {left: 50%; top: -65px; transform: translateX(-50%);}

.imp06-area5 .tac::before {left: 0; bottom: -30px; width: 160px; height: 160px;}


}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {

.imp03-area1 ul.flex {margin: 0 auto; max-width: 540px;}
.imp03-area1 ul.flex > li {width: 100%;}

.imp04-list .imp-tit{flex-wrap: wrap;}
.imp04-list .imp-tit-box strong{width: 100%;height: auto;line-height: 1;padding: 10px;}
.imp04-list .imp-tit-box h5{line-height: 1.3;padding: 10px;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.point-num {width: 75px; height: 75px;}
.middle-title .point-num {margin: 0 auto 20px;}
.bar {height: 100px;}


.imp03-area2 ul.flex {max-width: 550px; margin: 0 auto;}
.imp03-area2 ul.flex > li {width: 50%;}
.imp03-area2 ul.flex > li:nth-child(n+3):nth-child(-n+4) {margin-top: 20px;}

.imp03-area10 .title *{text-align: center;}

.box-list-style ul > li{width: calc(50% - 20px); margin: 10px 10px;}
.box-list-style h2{font-size: 100px;}


.imp05-area1 .bg-tit h2 {font-size: 48px;}

.imp06-area3 ul.flex > li {width: 50%;}
.imp06-area4.bg-gray {padding: 60px 0; background: #241f1c;}
.imp06-area4 ul.flex > li {width: 100%; max-width: 500px;}
.imp06-area5 .tac {margin-top: 20px;}
.imp06-area5 .tac::before {left: 50%; top: -60px; bottom: auto; width: 120px; height: 120px; transform: translateX(-50%);}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {


.imp03-area1 .bg-tit h2 {font-size: 40px;}

.imp03-area3 .flex > li.none{display: none;}
.imp03-area3 .flex{align-items: center;    justify-content: center;}
/* .imp03-area3 .title *{text-align: center;} */
.imp03-area3 .flex .img img{width: 100%;height: auto;}
.imp05-box {margin: 70px auto 20px; padding: 70px 10px 30px;}
.imp05-box::before {top: -50px; width: 100px; height: 100px;}
.imp05-area1 .bg-animation {background: url(../img/custom/imp05_bg1m.jpg) center/cover no-repeat;}
.imp05-area1 .middle-title {padding-left: 10px; text-align: left;}
.imp05-area1 .bg-tit h2 {padding-left: 10px; text-align: left;}
.imp05-area1 ul.flex > li:last-child {height: 320px;}
.imp05-area2 ul.flex > li,
.imp05-area3 ul.flex > li,
.imp05-area4 ul.flex > li {width: 100%; max-width: 500px;}

.imp04-area1 .img:before,.imp04-area1 .img:after{display: none;}



}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.point-num {width: 65px; height: 65px;}
.bar {height: 75px;}

.imp03-area1 img{max-width:200px;}

.imp03-area1 .bg-tit h2 {font-size: 32px;}
.imp03-area1 ul.flex > li > div {margin: 5px;}
.imp03-area1 ul.flex .middle-title {margin-top: 20px;}

.box-list-style ul > li{width: calc(100% - 10px); margin: 5px; padding: 20px;}

.box-list-style h2{font-size: 52px;}


.imp04-area1 img{max-width:200px;}

.imp05-box {margin: 55px auto 20px; padding: 55px 10px 30px;}
.imp05-box::before {top: -40px; width: 80px; height: 80px;}
.imp05-area4 article .btm .list > li {padding-left: 27px;}
.imp05-area4 article .btm .list > li:not(:first-child) {margin-top: 20px;}
.imp05-area4 article .btm .list > li::before {width: 20px; height: 20px;}

.imp06-area1 .middle-title h3 {font-size: 22px;}
.imp06-area2 .list > li:not(:first-child) {margin-top: 10px;}
.imp06-area2 .list > li h5 {font-size: 18px;}
.imp06-area3 ul.flex > li {width: 100%; max-width: 300px;}
.imp06-area5 .tac::before {bottom: 70px; top: auto; width: 80px; height: 80px;}
}


/* ============================================================================================================================ */
/* ======================================================= sub3 custom 코드 ==================================================== */
/* ============================================================================================================================ */




/* ============================================================================================================================ */
/* ======================================================= sub4 custom  코드 ==================================================== */
/* ============================================================================================================================ */

.ortho01bg .bg-animation {background: url(../img/custom/ortho01_bg.jpg) center/cover no-repeat;}
.ortho02bg .bg-animation {background: url(../img/custom/ortho02_bg.jpg) center/cover no-repeat;}
.ortho03bg .bg-animation {background: url(../img/custom/ortho03_bg.jpg) center/cover no-repeat;}
.ortho04bg .bg-animation {background: url(../img/custom/ortho04_bg.jpg) center/cover no-repeat;}
.ortho05bg .bg-animation {background: url(../img/custom/ortho05_bg.jpg) center/cover no-repeat;}

.case-arrow-box {display: flex; align-items: center; justify-content: center;}
.case-arrow-box .arrow {margin: 0 40px;}

.ortho01-area1 .imp01-tit {padding: 10px 30px; width: 500px;}
.ortho01-area1 .basic-box .point-num {margin-bottom: 20px;}
.ortho01-area1 .basic-box {max-width: 1000px; margin: 0 auto;}
.ortho01-area1 .basic-box:not(:first-child) {margin-top: 40px;}
.ortho01-area1 .basic-box:nth-child(2n) {flex-direction: row-reverse;}
.ortho01-area2 ul.flex > li:nth-child(n+5):nth-child(-n+8) {margin-top: 40px;}
.ortho01-area3 {padding-bottom: 60px; background: linear-gradient(to top, #212121 35%, transparent 35%);}
.ortho01-area3 ul.flex {color: #fff;}
.ortho01-area3 ul.flex p {line-height: 1.5;}
.ortho01-area4 ul.flex .img {border: 2px solid #eeecec; border-radius: 25px 0 0 0; overflow: hidden;}
.ortho01-area4 ul.flex .txt {padding: 15px 10px; background: #eeecec; border-radius: 0 0 25px 0;}
.ortho01-area4 ul.flex .txt p {font-weight: 700;}
.ortho01-area4 ul.flex .txt h5 {font-weight: 700; line-height: 1.2;}
.ortho01-area4 .bd-tit {padding: 20px 10px; text-align: center; color: #fff; background: #2b9a96;}
.ortho01-area5 article {padding: 120px 0; background: url(../img/custom/ortho01_bg1.jpg) center/cover no-repeat;}
.ortho01-area5 article .txt {display: flex; justify-content: flex-end;}
.ortho01-area5 .middle-title {position: relative; right: 100px; margin: 0; text-align: left;}
.ortho01-area6.bg-gray {color: #fff; padding: 150px 0 200px;}
.ortho01-area6 .bg-animation {background: url(../img/custom/ortho01_bg2.jpg) center/cover no-repeat;}
.ortho01-area6 .tit {text-align: center;}
.ortho01-area6 .tit h3 {position: relative; padding-bottom: 20px; margin-bottom: 40px; font-weight: 500; font-size: 70px;}
.ortho01-area6 .tit h3::before {position: absolute; content: ''; left: 50%; bottom: 0; transform: translateX(-50%); width: 100px; height: 4px; background: #2b9a96;}
.ortho01-area6 ul.flex {margin-top: 80px;}
.ortho01-area6 ul.flex .box {display: flex; align-items: center; justify-content: center; padding: 20px; margin: 0 auto; max-width: 500px; width: 100%; height: 280px; border-radius: 20px; border: 1px solid #fff;
background: rgba(0,0,0,0.3); transition: background 0.5s ease-in;}
.ortho01-area6 ul.flex .box:hover {background: #2b9a96; border: 1px solid #2b9a96;}
.ortho01-area6 ul.flex .box h3 {white-space: pre-line; line-height: 1.3; color: #fff;}

.ortho02-area1.bg-gray {padding: 200px 0; color: #fff;}
.ortho02-area1 .bg-animation {background: url(../img/custom/ortho02_bg1.jpg) center/cover no-repeat;}
.ortho02-area1 .bg-tit {position: absolute; left: 30px; top: 20px;}
.ortho02-area1 .bg-tit h2 {font-size: 80px; font-weight: bold; color: rgba(255,255,255,0.3); line-height: 1; white-space: pre-line;}
.ortho02-area2.bg-gray {background: #f7f7f7;}
.ortho02-area2 article {max-width: 800px; margin: 0 auto; width: 100%;}
.ortho02-area2 article:last-child {margin: 100px auto 0;}
.ortho02-area2 article .tit {position: relative; padding-left: 70px;}
.ortho02-area2 article .tit::before {position: absolute; display: flex; content: attr(data-num); left: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; align-items: center; justify-content: center; background: #333; color: #fff; font-size: 1em;}
.ortho02-area2 article ul {display: flex; max-width: 625px; margin: 60px auto 0;}
.ortho02-area2 article ul img {margin-right: 50px;}
.ortho02-area2 article ul p {white-space: pre-line; margin-top: 10px;}
.ortho02-area3 ul.flex .tit {width: 250px; padding: 8px 10px; margin: 0 auto 30px; text-align: center; border-radius: 40px; background: #2b9a96; color: #fff;}
.ortho02-area3 ul.flex > li:last-child .tit {background: #999898;}
.ortho02-area3 ul.flex .img img:last-child {margin-top: 40px;}
.ortho02-area4.bg-gray {padding: 200px 0; color: #fff;}
.ortho02-area4 .bg-animation {background: url(../img/custom/ortho02_bg2.jpg) center/cover no-repeat;}
.ortho02-area5 ul.flex p {line-height: 1.5;}
.ortho02-area5 .tit {text-align: center; font-family: "InkLipquid"; transform: skew(-0.1deg); font-weight: 300;}
.ortho02-area5 .tit span {color: #2b9a96;}
.ortho02-area6.bg-gray {padding: 160px 0; color: #fff;}
.ortho02-area6 .bg-animation {background: url(../img/custom/ortho02_bg3.jpg) center/cover no-repeat;}

.ortho03-area1.bg-gray {padding: 200px 0; color: #fff;}
.ortho03-area1 .bg-animation {background: url(../img/custom/ortho03_bg1.jpg) center/cover no-repeat;}
.ortho03-area2 ul.flex h5 {padding: 8px 10px; color: #fff; background: #333; font-weight: bold;}

.ortho05-area1 ul.flex .middle-title {margin-bottom: 0; text-align: left;}
.ortho05-area1 ul.flex .middle-title .tit {margin-bottom: 20px; line-height: 1; color: #2b9a96; font-weight: 500; font-family: 'Jeju Myeongjo', serif; font-style: italic; font-size: 72px;}
.ortho05-area1 article {margin: 0 auto; border: 2px solid #362317;}
.ortho05-area1 article .top {padding: 8px 10px; background: #362317;}
.ortho05-area1 article .top .tit {color: #fff; font-weight: 500; text-align: center;}
.ortho05-area1 article .btm {display: flex; justify-content: center; padding: 50px 10px;}
.ortho05-area1 article .btm .list > li {position: relative; padding-left: 40px;}
.ortho05-area1 article .btm .list > li:not(:first-child) {margin-top: 30px;}
.ortho05-area1 article .btm .list > li::before {position: absolute; content: ''; left: 0; top: 2px; width: 26px; height: 26px; background: url(../img/custom/imp05_12.jpg) center/cover no-repeat;}
.ortho05-area1 article .btm .list p {font-weight: 700;}
.ortho05-area2 ul.flex .middle-title {margin-bottom: 0; text-align: left;}
.ortho05-area3 .advan ul.flex > li > div {display: flex; justify-content: center; height: 220px; padding: 30px 10px; border-radius: 10px; color: #fff; background: #241f1c;}
.ortho05-area3 .advan .tit {display: inline-block; padding: 0px 25px; margin-bottom: 20px; border-radius: 40px; font-weight: 900; color: #241f1c; background: #fff; font-size: 22px;}
.ortho05-area3 .comparison ul.flex {max-width: 800px; margin: 0 auto;}
.ortho05-area3 .comparison ul.flex > li > div {display: flex; align-items: center; flex-direction: column;}
.ortho05-area3 .comparison .tit {width: 100%; padding: 3px 10px; color: #fff; background: #2b9a96;}
.ortho05-area3 .comparison ul.flex > li:last-child .tit {background: #6e6e6e;}
.ortho05-area3 .comparison .list {margin-top: 40px;}
.ortho05-area3 .comparison .list > li:not(:first-child) {margin-top: 15px;}
.ortho05-area3 .comparison .list p {position: relative; padding-left: 30px; text-align: left; font-size: 22px;}
.ortho05-area3 .comparison .list p::before {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; background: url(../img/custom/ortho05_06.png) center/cover no-repeat;}
.ortho05-area3 .comparison ul.flex > li:last-child .list p::before {background: url(../img/custom/ortho05_07.png) center/cover no-repeat;}



/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.case-arrow-box .arrow {margin: 0 20px;}

.ortho01-area6 .tit h3 {font-size: 60px;}

.ortho02-area1 .bg-tit {left: 10px;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.ortho01-area6 ul.flex .box {height: 240px;}
.ortho01-area6 ul.flex .box h3 {font-size: 30px;}

.ortho05-area1 ul.flex {max-width: 500px; margin: 0 auto; border: 2px solid #362317;}
.ortho05-area1 ul.flex > li {width: 100%;}
.ortho05-area1 ul.flex > li:first-child > div {margin: 0;}
.ortho05-area1 ul.flex > li:last-child > div {margin: 20px 10px;}
.ortho05-area1 ul.flex .middle-title .tit {margin-bottom: 10px; font-size: 60px;}
.ortho05-area1 article {max-width: 500px;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.case-arrow-box > li:nth-child(2) {position: relative;}
.case-arrow-box .arrow {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: 60px; height: 60px; z-index: 1;}

.ortho01-area1 .basic-box .point-num {margin: 20px auto; width: 65px; height: 65px;}
.ortho01-area1 .basic-box .point-num h2 {font-size: 30px;}
.ortho01-area3 {padding: 0; background: none;}
.ortho01-area3 ul.flex {color: #333;}
.ortho01-area3 ul.flex:nth-child(2) > li:last-child {margin-top: 20px;}
.ortho01-area6.bg-gray {padding: 100px 0;}
.ortho01-area6 .tit h3 {font-size: 48px; margin-bottom: 30px;}
.ortho01-area6 ul.flex {margin-top: 40px;}
.ortho01-area6 ul.flex > li {width: 100%;}
.ortho01-area6 ul.flex .box {padding: 40px 20px; height: auto;}
.ortho01-area6 ul.flex .box h3 {font-size: 26px;}

.ortho02-area1.bg-gray {padding: 140px 0;}
.ortho02-area1 .bg-tit {display: none;}
.ortho02-area2 article {margin: 60px auto 0;}
.ortho02-area4.bg-gray {padding: 140px 0;}
.ortho02-area6.bg-gray {padding: 120px 0;}

.ortho03-area1.bg-gray {padding: 140px 0;}

.ortho05-area2 ul.flex {max-width: 500px; margin: 0 auto;}
.ortho05-area2 ul.flex > li {width: 100%;}
.ortho05-area3 .advan ul.flex > li > div {margin: 5px; height: 200px;}
.ortho05-area3 .comparison ul.flex > li > div {margin: 5px;}
.ortho05-area3 .comparison .list {margin-top: 20px;}
.ortho05-area3 .comparison .list p {font-size: 18px;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.case-arrow-box {flex-direction: column; margin-top: 20px;}
.case-arrow-box .arrow {transform: translate(-50%, -50%) rotate(90deg);}

.ortho01-area1 .imp01-tit {width: 100%;}
.ortho01-area2 ul.flex > li {width: 33.3%;}
.ortho01-area2 ul.flex > li:nth-child(n+4):nth-child(-n+8) {margin-top: 30px;}
.ortho01-area4 ul.flex > li {width: 50%;}
.ortho01-area5 article {padding: 80px 0; background: url(../img/custom/ortho01_bg1m.jpg) center/cover no-repeat;}
.ortho01-area5 article .txt {justify-content: center;}
.ortho01-area5 .middle-title {right: auto;}
.ortho01-area5 ul.flex > li:last-child {height: 300px;}
.ortho01-area6 .tit h3 {font-size: 40px; margin-bottom: 20px; line-height: 1.3;}

.ortho02-area1.bg-gray {padding: 60px 0;}
.ortho02-area1 .bg-animation {background: url(../img/custom/ortho02_bg1m.jpg) center/cover no-repeat;}
.ortho02-area1 ul.flex > li:last-child {height: 350px;}
.ortho02-area1 .middle-title {text-align: center !important;}
.ortho02-area2 article ul {max-width: 410px; margin: 50px auto 0;}
.ortho02-area2 article ul img {max-width: 120px; margin-right: 40px;}
.ortho02-area3 ul.flex .tit {width: 200px;}
.ortho02-area4.bg-gray {padding: 60px 0;}
.ortho02-area4 .bg-animation {background: url(../img/custom/ortho02_bg2m.jpg) center/cover no-repeat;}
.ortho02-area4 ul.flex > li:last-child {height: 350px;}
.ortho02-area4 .middle-title {padding-left: 10px;}

.ortho03-area1.bg-gray {padding: 60px 0;}
.ortho03-area1 .bg-animation {background: url(../img/custom/ortho03_bg1m.jpg) center/cover no-repeat;}
.ortho03-area1 ul.flex > li:last-child {height: 280px;}
.ortho03-area1 .middle-title {padding-left: 10px;}
.ortho03-area2 ul.flex > li > div {margin: 5px;}

.ortho05-area3 .advan ul.flex > li {width: 50%;}
.ortho05-area3 .comparison .list p {padding-left: 25px; font-size: 16px;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.case-arrow-box > li:first-child .img p {bottom: auto; top: 10px;}

.ortho01-area1 .basic-box .point-num {margin: 15px auto; width: 55px; height: 55px;}
.ortho01-area1 .basic-box .point-num h2 {font-size: 26px;}
.ortho01-area2 ul.flex > li {width: 50%;}
.ortho01-area2 ul.flex > li:nth-child(n+3):nth-child(-n+8) {margin-top: 30px;}
.ortho01-area3 ul.flex:nth-child(2) > li:nth-child(2) {margin-top: 20px;}
.ortho01-area4 ul.flex > li > div {margin: 4px;}
.ortho01-area4 ul.flex .txt {padding: 10px;}
.ortho01-area5 article {padding: 60px 0;}
.ortho01-area6 .tit h3 {font-size: 35px; margin-bottom: 20px; line-height: 1.3;}
.ortho01-area6 .tit h3::before {width: 60px;}
.ortho01-area6 ul.flex {margin-top: 20px;}
.ortho01-area6 ul.flex .box {border-radius: 10px;}
.ortho01-area6 ul.flex .box h3 {font-size: 22px;}

.ortho02-area1 ul.flex > li:last-child {height: 250px;}
.ortho02-area2 article {margin: 40px auto 0;}
.ortho02-area2 article:last-child {margin: 60px auto 0;}
.ortho02-area2 article .tit {padding-left: 50px;}
.ortho02-area2 article .tit::before {width: 40px; height: 40px;}
.ortho02-area2 article ul {max-width: 340px; margin: 35px auto 0;}
.ortho02-area2 article ul img {max-width: 90px; margin-right: 20px;}
.ortho02-area3 ul.flex .img img:last-child {margin-top: 15px;}
.ortho02-area3 ul.flex > li:last-child {margin-top: 40px;}
.ortho02-area6.bg-gray {padding: 100px 0;}

.ortho03-area1 ul.flex > li:last-child {height: 200px;}
.ortho03-area2 ul.flex > li {width: 100%;}
.ortho03-area2 ul.flex > li > div {margin: 10px;}

.ortho05-area1 article .btm .list > li {padding-left: 27px;}
.ortho05-area1 article .btm .list > li:not(:first-child) {margin-top: 20px;}
.ortho05-area1 article .btm .list > li::before {width: 20px; height: 20px;}
.ortho05-area1 ul.flex .middle-title .tit {font-size: 46px;}
.ortho05-area3 .advan ul.flex > li {width: 100%;}
.ortho05-area3 .advan ul.flex > li > div {height: auto;}
.ortho05-area3 .advan .tit {font-size: 18px; margin-bottom: 10px;}
.ortho05-area3 .comparison .list p {font-size: 14px;}
.ortho05-area3 .comparison .list p::before {top: 1px; transform: none;}
}


/* ============================================================================================================================ */
/* ======================================================= sub4 custom 코드 ==================================================== */
/* ============================================================================================================================ */





/* ============================================================================================================================ */
/* ======================================================= sub5 custom  코드 ==================================================== */
/* ============================================================================================================================ */

.ase01-area1 .bg-animation{background: url(../img/sub/sub6_01.png) center/cover no-repeat;}
.ase01-area1 ul.flex p{padding: 8px 10px; color: #fff; background: #2b9a96;font-family: 'GmarketSansMedium',san-serif;}
					      
.aes02-area1 .basic-box h3 {margin-bottom: 20px; color: #f1f1f1;}

.aes02-area2 .basic-box:nth-child(even){flex-direction: row-reverse;}


.aes02-area3 .bg-animation{background: url(../img/sub/bg_22.png) right / cover no-repeat;}

.aes02-area4 ul.flex .img img {width: 100%;}
.aes02-area4 ul.flex p {padding: 8px 10px; color: #fff; background: #3e362e;}

.aes02-area4 .bg-animation{background: url(../img/sub/sub6_22.png) left/cover no-repeat;}
.aes02-area5{background: #f7f7f7 url(../img/main/bg1.png) right center no-repeat;}





/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.aes02-area2.bg-gray {padding: 160px 0;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {
.aes02-area4 ul.flex {max-width: 550px; margin: 0 auto;}
.aes02-area4 ul.flex > li {width: 50%;}
.aes02-area5 ul.flex .box {height: 130px;}
.aes02-area5 ul.flex .box p.tit {margin-bottom: 5px;}
.aes02-area5 ul.flex .box p.sub {height: 48px;}
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.aes02-area1 .basic-box h3 {margin-bottom: 0;}
.aes02-area2.bg-gray {padding: 120px 0;}
.aes02-area2 .middle-title h2 {margin-bottom: 30px; padding-bottom: 15px;}
.aes02-area5 ul.flex .box {height: 150px;}
.aes02-area5 ul.flex .step1,
.aes02-area5 ul.flex .step2 {width: 100%;}

}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.aes01-area3 article ul.flex > li {width: 100%;}

.aes02-area2.bg-gray {padding: 80px 0;}
.aes02-area2 .bg-animation {background-position-x: -200px;}
.aes02-area2 .middle-title h2 {margin-bottom: 20px; padding-bottom: 15px;}
.aes02-area2 .middle-title h2::before {width: 60px;}
.aes02-area5 ul.flex .box {height: 130px;}
.aes02-area5 ul.flex .box p.sub {height: 40px;}

}


/* ============================================================================================================================ */
/* ======================================================= sub5 custom 코드 ==================================================== */
/* ============================================================================================================================ */






/* ============================================================================================================================ */
/* ======================================================= sub6 custom  코드 ==================================================== */
/* ============================================================================================================================ */

.basic-area1 .img{position: relative;}


.logo-txt-box{width: 100%;-webkit-border-radius: 30px;-moz-border-radius:30px;border-radius:30px; background: #f7f7f7 url(../img/sub/txt-box-bg.png) right 20px no-repeat;}
.logo-txt-box p{white-space: pre-line;text-align: center;padding: 50px 20px;}

.basic01-area1 ul.flex {position: relative;}
.basic01-area1 ul.flex::before {position: absolute; content: ''; left: -350px; top: 50%; transform: translateY(-50%); width: 317px; height: 307px; z-index: -1; background: url(../img/custom/basic01_05.png) center/cover no-repeat;}
.basic01-area1 ul.flex::after {position: absolute; content: ''; right: -360px; top: 50%; transform: translateY(-50%); width: 337px; height: 337px; z-index: -1; background: url(../img/custom/basic01_04.png) center/cover no-repeat;}
.basic01-area1 ul.flex > li.block-2 > div {display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 10px; height: 300px; border: 1px solid #d2d6db; background: #fff;}
.basic01-area1 ul.flex > li.block-2 h5 {margin-bottom: 20px; font-weight: bold;}
.basic01-area1 ul.flex > li.block-1 > div {padding: 10px; background: #614836;}
.basic01-area1 ul.flex > li.block-1 h5 {color: #fff; font-weight: bold;}
.basic01-area2.bg-gray {padding: 200px 0; color: #fff;}
.basic01-area2 .bg-animation {background: url(../img/custom/basic01_bg1.jpg) center/cover no-repeat;}
.basic01-area2 .middle-title h5 {margin-top: 20px; font-weight: 300;}

.basic02-area1 .basic-box h3 {white-space: pre-line; line-height: 1.2;}
.basic02-area2 .circle-box > div > div {background: #f4ede5;}
.basic02-area3 ul.flex img {width: 100%;}
.basic02-area3 ul.flex .txt {display: flex; justify-content: center; align-items: center; padding: 10px; height: 150px; background: #241f1c;}
.basic02-area3 ul.flex .txt p {color: #fff; font-weight: bold;}
.basic02-area4 article {position: relative; margin-top: 80px;}
.basic02-area4 article::after {position: absolute; content: ''; right: -200px; top: -230px; width: 340px; height: 330px; background: url(../img/custom/special04_19.png) center/cover no-repeat;}
.basic02-area4 article ul.flex {position: relative; z-index: 1;}
.basic02-area4 article ul.flex > li:nth-child(n+4):nth-child(-n+6) {margin-top: 30px;}
.basic02-area4 article ul.flex > li > div {max-width: 350px;}
.basic02-area4 article ul.flex .num::before {background: #2b9a96;}
.basic02-area4 article ul.flex h5 {margin: 20px 0 10px; font-weight: bold;}
.basic02-area5.bg-gray {padding: 220px 0; color: #fff;}
.basic02-area5 .bg-animation {background: url(../img/custom/basic02_bg1.jpg) center/cover no-repeat;}
.basic02-area6 ul.list > li:not(:first-child) {margin-top: 20px;}
.basic02-area6 ul.list p {position: relative; padding-left: 45px;}
.basic02-area6 ul.list p::before {position: absolute; content: attr(data-num); display: flex; align-items: center; justify-content: center; left: 0; top: -3px; width: 35px; height: 35px; font-size: 1em; border-radius: 50%; background: #2b9a96; color: #fff; font-weight: 900;}

.basic03-area1 {background: linear-gradient(to top, #241f1c 38%, transparent 38%);}
.basic03-area1 ul.flex {padding-bottom: 60px; color: #fff;}
.basic03-area2 .top .arrow {width: 74px;}
.basic03-area2 .top > li:not(:nth-child(2)) {flex: 1; text-align: center;}
.basic03-area2 .top > li:not(:nth-child(2)) > div {padding: 5px 10px; background: #b8b8b8; color: #fff; font-weight: bold;}
.basic03-area2 .top > li:nth-child(3) > div {background: #182955;}
.basic03-area3 .num-list {max-width: 840px; margin: 0 auto;}
.basic03-area3 .num-list .num {white-space: pre-line;}
.basic03-area3 .num-list .num::before {top: -3px; background: #2b9a96;}
.basic03-area3 .num-list .num:nth-child(2n)::before {background: #997a53;}

.basic04-area1.bg-gray {padding: 220px 0;}
.basic04-area1 .bg-animation {background: url(../img/custom/basic04_bg1.jpg) center/cover no-repeat;}
.basic04-area1 .middle-title {margin: 0; text-align: left;}
.basic04-area1 .middle-title h3 {color: #5f4e38;}
.basic04-area2.bg-gray {padding: 60px 0;}
.basic04-area2 ul {display: flex; align-items: center; justify-content: center;}
.basic04-area2 ul .middle-title {margin: 0 0 0 40px; text-align: left;}
.basic04-area3 ul.flex > li > div {border: 1px solid #c3c2c2;}
.basic04-area3 ul.flex .img {position: relative;}
.basic04-area3 ul.flex .img .tit {position: absolute; display: flex; align-items: center; justify-content: center; left: 50%; bottom: -40px; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; font-size: 40px; background: #2b9a96; color: #fff;}
.basic04-area3 ul.flex .txt {display: flex; justify-content: center; padding: 60px 10px; height: 200px;}
.cavities ul.flex .img img {width: 100%;}
.cavities ul.flex .txt .top,
.cavities ul.flex .txt .btm {color: #fff; font-family: 'NanumSquare',san-serif;}
.cavities ul.flex .txt .top {padding: 5px 10px; font-weight: 800; background: #2b9a96;}
.cavities ul.flex .txt .mid {display: flex; align-items: center; justify-content: center; padding: 25px 10px; height: 175px; background: #ededed;}
.cavities ul.flex .txt .btm {padding: 10px; font-weight: 600; background: #000;}

.gum ul.flex .img img {width: 100%;}
.gum ul.flex .txt .top,
.gum ul.flex .txt .btm {color: #fff; font-family: 'NanumSquare',san-serif;}
.gum ul.flex .txt .top {padding: 5px 10px; font-weight: 800; background: #2b9a96;}
.gum ul.flex .txt .mid {display: flex; align-items: center; justify-content: center; padding: 20px 5px; height: auto; background: #ededed;}
.gum ul.flex .txt .btm {padding: 10px; font-weight: 600; background: #000;}

.basic-area5{background: #f7f7f7 url(../img/main/bg1.png) right center no-repeat;}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.basic02-area4 article::after {display: none;}

.basic03-area2 .top .arrow {display: none;}

.basic04-area1.bg-gray {padding: 180px 0;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {
.basic02-area3 ul.flex > li > div {margin: 5px;}

.basic04-area3 ul.flex .img .tit {bottom: -32px; width: 65px; height: 65px; font-size: 30px;}
.basic04-area3 ul.flex .txt {padding: 50px 10px; height: 170px;}

.basic05-area2 .num-list {max-width: 415px;}
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.basic02-area4 ul.top > li {width: 100%;}
.basic02-area4 ul.top > li > div {max-width: 550px; margin: 0 auto;}
.basic02-area4 ul.top > li:last-child > div {padding: 30px 20px; background: #241f1c; color: #fff;}
.basic02-area6 ul.flex > li {width: 100%;}
.basic02-area6 ul.flex > li > div {display: flex; justify-content: center; max-width: 575px; margin: 10px auto;}

.cavities ul.flex {max-width: 600px; margin: 0 auto;}
.cavities ul.flex > li {width: 50%;}
.cavities ul.flex .txt .mid {height: 160px;}

.gum ul.flex {max-width: 600px; margin: 0 auto;}
.gum ul.flex > li {width: 50%;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {

.logo-txt-box p{padding: 20px;}

.basic01-area1 ul.flex > li {width: 100%;}
.basic01-area1 ul.flex > li.block-2 > div {height: 250px;}
.basic01-area2.bg-gray {padding: 140px 0;}

.basic02-area2 ul.flex {max-width: 500px; margin: 0 auto;}
.basic02-area2 ul.flex > li {width: 50%;}
.basic02-area3 ul.flex {max-width: 550px; margin: 0 auto;}
.basic02-area3 ul.flex > li {width: 50%;}
.basic02-area3 ul.flex .txt {height: 120px;}
.basic02-area5.bg-gray {padding: 150px 0;}

.basic03-area1 ul.flex {padding-bottom: 40px;}

.basic04-area1.bg-gray {padding: 140px 0;}
.basic04-area3 ul.flex > li > div {margin: 5px;}

.basic05-area2 .num-list {max-width: 390px;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.basic01-area2.bg-gray {padding: 60px 0;}
.basic01-area2 .bg-animation {background: url(../img/custom/basic01_bg1m.jpg) center/cover no-repeat;}
.basic01-area2 ul.flex > li:last-child {height: 300px;}

.basic02-area4 article ul.flex > li {width: 50%;}
.basic02-area4 article ul.flex > li:nth-child(n+3):nth-child(-n+6) {margin-top: 20px;}

.basic03-area1 {background: linear-gradient(to top, #241f1c 55%, transparent 55%);}
.basic03-area1 ul.flex > li {width: 50%;}
.basic03-area2 .top {display: none;}

.basic04-area1.bg-gray {padding: 60px 0;}
.basic04-area1 .bg-animation {background: url(../img/custom/basic04_bg1m.jpg) center/cover no-repeat;}
.basic04-area1 ul.flex > li:last-child {height: 350px;}
.basic04-area1 .middle-title {padding-left: 10px;}
.basic04-area2 ul {flex-direction: column;}
.basic04-area2 ul .middle-title {margin: 30px 0 0 0;}
.basic04-area3 ul.flex > li {width: 50%;}

.basic05-area1 .bg-animation {background: url(../img/custom/basic05_bg1m.jpg) center/cover no-repeat;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.basic01-area1 ul.flex > li.block-2 > div {height: 200px;}
.basic01-area2 ul.flex > li:last-child {height: 250px;}

.basic02-area3 ul.flex {max-width: 280px;}
.basic02-area3 ul.flex > li {width: 100%;}
.basic02-area3 ul.flex > li > div {margin: 10px;}
.basic02-area3 ul.flex .txt {height: 100px;}
.basic02-area4 article {margin-top: 40px;}
.basic02-area4 article ul.flex > li > div {margin: 5px;}
.basic02-area5.bg-gray {padding: 120px 0;}
.basic02-area6 ul.list p {padding-left: 40px;}
.basic02-area6 ul.list p::before {width: 30px; height: 30px;}

.basic04-area2 ul img {max-width: 220px;}
.basic04-area3 ul.flex > li {width: 100%;}
.basic04-area3 ul.flex > li > div {max-width: 320px; margin: 10px auto;}
.basic04-area3 ul.flex .img .tit {bottom: -25px; width: 50px; height: 50px; font-size: 24px;}
.basic04-area3 ul.flex .txt {padding: 40px 10px 30px; height: auto;}
.cavities ul.flex .txt .mid {height: 150px; padding: 20px 10px;}

.basic05-area2 .num-list {max-width: 290px;}

.imp04-area4 .table-scroll {overflow-x: scroll !important;}
/* .imp04-area4 table {min-width: 500px;} */
.imp04-area4 table col {width: 40%;}
.imp04-area4 table col:nth-child(2) {width: 20%;}
.imp04-area4 table td {padding: 15px 5px;}
}


/* ============================================================================================================================ */
/* ======================================================= sub6 custom 코드 ==================================================== */
/* ============================================================================================================================ */