/* ============================ main style start ============================= */
@charset "utf-8";

#content{padding-top:200px;}
.wrap ul{overflow:hidden;}
.wrap ul li{float:left;width:49%;}
.wrap ul li:nth-child(1){margin-right:2%;}
/* 컨텐츠 공통스타일 */
.con a{display:block;}
.sound_only{position: absolute; left:-10000px; top:auto; height:1px; overflow:hidden;}
/*반응형 작업*/
.m_img {display:none;}
	
/*갤러리 스와이퍼*/
.gallery-top {width: 100%; height:700px;}
.swiper-container{width: 100%; margin-left: auto; margin-right: auto;}
.swiper-slide{text-align: center; font-size: 18px;background: #fff;background-size: cover;background-position: center;}
.swiper-slide img{width:100%;height:auto;vertical-align:top;}
.swiper-button-next_01 {right:5%;}
.swiper-button-prev_01 {left: 5%;}

.gallery-thumbs {height:150px;box-sizing: border-box;padding: 10px 0;}
.gallery-thumbs .swiper-slide {height: 100%;opacity:.2;cursor:pointer;}
.gallery-thumbs .swiper-slide-active{opacity:1;cursor:default;}
.root_daum_roughmap .wrap_controllers{display:none;}


@media screen and (max-width:1200px){
	#content{padding-top: 80px;}
}

@media screen and (max-width:769px){
	#content{padding-top: 80px;}
}

@media screen and (max-width:640px){
	.pc_img {display:none;}
	.m_img {display:block;}
   /*스와이퍼갤러리*/
	.gallery-top {width: 100%;height:250px;}
	.gallery-thumbs {height:70px; box-sizing: border-box; padding: 10px 0;}
	
}

@media screen and (max-width: 425px){
	#content {padding-top: 80px;}
}



.comma{position: relative;}
.comma:before{content: '“'; font-size: 80px; font-family: 'InkLipquid'; color: #333; position: absolute; left: -40px; top: -10px; line-height: 1; display: inline-block;}
.comma:after{content: '”'; font-size: 80px; font-family: 'InkLipquid'; color: #333; position: absolute; right: -40px; top: -10px; line-height: 1; display: inline-block;}

/* area1 */
.area1-box{display:flex; align-items:center; justify-content:center; width: 100%; flex-wrap:wrap; }
.area1-box li{display: flex; align-items:center; justify-content:center; padding: 20px; height: 380px; width: calc(50% - 20px); margin: 10px; border-radius:10px;}
.area1-box li:nth-child(1), .area1-box li:nth-child(4){background-color: #e6eef6;}
.area1-box li:nth-child(2), .area1-box li:nth-child(3){background-color: #d7e7f6;}
.area1-box li > div{display: inline-block; text-align: center;}
.area1-box li > div h5{font-family: 'GmarketSansBold'; white-space: pre-line; line-height: 1.3; margin: 10px 0 30px;}
.area1-box li > div p{display: inline-block; white-space: pre-line; line-height: 1.7;}
/* area1 */

/* area3 */
.treatment{display:flex; justify-content:center; flex-wrap:wrap; width: 100%;}
.treatment > li{width: 20%; text-align: center;}
.treatment > li:nth-child(4){width: 20.1%;}
.treatment > li h5{font-weight: 500; margin-top: 20px;}
.treatment > li p{white-space: pre-line; display: inline-block; margin-top: 5px;}
.treatment > li:nth-child(n+5):nth-child(-n+9){margin-top: 50px;}
/* area3 */

/* area4 */
.area4-1{background: url(../img/main/area4_bg1.png) right no-repeat; background-size: 30%;}
.area4-2{background: url(../img/main/area4_bg2.png) left bottom no-repeat; background-size: 20%; padding-top: 250px;}
.area4-8{background: url(../img/main/area4_bg3.png) left no-repeat; background-size: 25%;}
.area4-9{background: url(../img/main/area4_bg4.png) right no-repeat; background-size: 12%;}
.area4-9x{background: url(../img/main/area4_bg5.png) left no-repeat; background-size: 20%;}


.area4-box{display:flex; align-items:center; justify-content:center; width: 100%; flex-wrap:wrap; max-width: 1000px; margin: 0 auto;}
.area4-box li{width: 50%;}

.area4-2box{background-color: #d7e7f6; padding: 80px 0;}
.area4-2box ul{display:flex; justify-content:center; width: 100%; max-width: 1000px; margin: 0 auto;}
.area4-2box li{flex: 1;	text-align: center;}
.area4-2box li h6{margin: 10px 0; font-weight: 500;}
.area4-2box li p{white-space: pre-line;}

.area4-3 ul{display:flex; justify-content:center; align-items:center; width: 100%; flex-wrap:wrap;}
.area4-3 ul li{width: calc(50% - 30px); margin: 15px;}
.area4-3 ul li div{text-align: center;}
.area4-3 ul li div h6{margin-top: 10px;}
.area4-3 ul li div p{white-space: pre-line; padding: 10px 0; font-weight: 500;}

.area4-4box {position: relative;}
.area4-4box:before{position: absolute; content: ''; left: 0; top: 55%; transform:translateY(-50%); width: 50%; height: 115px; background-color: #d7e7f6; z-index: -1;}
.area4-4box:after{position: absolute; content: ''; right: 0; top: 45%; transform:translateY(-50%); width: 50%; height: 115px; background-color: #d7e7f6; z-index: -1;}

.area4-5 ul{display:flex; justify-content:center; align-items:center; width: 100%; flex-wrap:wrap;}
.area4-5 ul li{width: calc(50% - 30px); margin: 15px;}
.area4-5 ul li div{text-align: center; background-color: #d7e7f6;}
.area4-5 ul li div p{white-space: pre-line; padding: 25px 0; font-weight: 500;}

.area4-7 ul{display:flex; justify-content:center;  width: 100%; flex-wrap:wrap;}
.area4-7 ul li{width: calc(25% - 20px); margin: 0 10px; text-align: center;}
.area4-7 ul li img{border: 2px solid #005aaa; border-radius:100%;}
.area4-7 ul li div{position: relative; top: -40px;}
.area4-7 ul li h5{border: 2px solid #005aaa; font-size: 20px; padding: 10px; background-color: #fff; font-weight: 500; width: 100%; margin: 0 auto;}
.area4-7 ul li p{margin-top: 10px; white-space: pre-line; font-weight: 500;}

.area4-8 ul{display:flex; justify-content:center;  width: 100%; flex-wrap:wrap; max-width: 1000px; margin: 0 auto;}
.area4-8 ul li{width: calc(25% - 20px); margin: 0 10px; text-align: center;}
.area4-8 ul li p{margin-top: 10px; font-weight: 500;}

.area4-9 ul{display:flex; justify-content:center;  width: 100%; flex-wrap:wrap; max-width: 1000px; margin: 0 auto;}
.area4-9 ul li{width: calc(33.3% - 20px); margin: 0 10px; text-align: center;}
.area4-9 ul li img{width: 100%;}
.area4-9 ul li h6{margin: 10px 0; font-weight: 500; white-space: pre-line; text-align: left;}
.area4-9 ul li p{white-space: pre-line; text-align: left;}

.area4-10 ul{display:flex; justify-content:center; align-items:center; width: 100%; flex-wrap:wrap;}
.area4-10 ul:not(:nth-child(2)){margin-top: 30px;}
.area4-10 ul li:last-child{flex:1; margin-left: 30px; text-align: left; position: relative;}
.area4-10 ul li:last-child:after{content: attr(data-num); position: absolute; right: 0; top: 50%; transform:translateY(-50%); font-size: 120px; font-family: 'GmarketSansBold'; }

.area4-10 ul:nth-child(2) li:last-child:after{color: rgba(230,230,230,0.2);}
.area4-10 ul:nth-child(3) li:last-child:after{color: rgba(230,230,230,0.3);}
.area4-10 ul:nth-child(4) li:last-child:after{color: rgba(230,230,230,0.4);}
.area4-10 ul:nth-child(5) li:last-child:after{color: rgba(230,230,230,0.5);}

.area4-10 ul li h6{font-weight: 700; display: inline-block; font-family: 'GmarketSansMedium';}
.area4-10 ul li h6.namepen:after{background-color: #d7e7f6;}
.area4-10 ul li p{margin-top: 15px; white-space: pre-line; line-height: 1.7;}
/* area4 */

/* area6 */

.time{color: #333; display: flex; justify-content:center; align-items:center; font-weight: 500;}
.time .point-color{color: #4097db !important;}
.time > div{display: inline-block;}
.time > div > div{display:flex; align-items: center; margin-bottom: 20px;}
.time span{width: 120px; text-align-last: justify !important; font-size: 20px; color: #fff; background-color: #4097db; border-radius:20px; padding: 4px 12px; font-weight: 500; text-align: center;}
.time div p{margin-left: 30px; display: inline-block; letter-spacing: 2px;}
.time .lunch-time span{background-color: #003764;}

.footer-call, .footer-map{margin-top: 50px;}

.map-info{width: 100%; text-align: center; background-color: #d7e7f6; padding: 40px 0;}
.map-info h6{white-space: pre-line; font-family: 'GmarketSansMedium'; }

.notice p{display: block !important; margin-left: 0px !important;}
/* area6 */

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

}

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

	/* area1 */
	.area1-box li{margin: 5px;}
	/* area1 */

	/* area3 */
	.treatment > li{width: 33.3% !important;}
	.treatment > li:nth-child(n+4):nth-child(-n+9){margin-top: 50px;}
	/* area3 */

	/* area4 */
	.area4-1, .area4-2, .area4-8, .area4-9, .area4-9x{background: none;}
	.area4-box li{width: 100%; text-align: center;}
	.area4-2{padding-top: 80px;}

	.area4-4box img{padding: 0 10px;}

	.area4-5 ul li{width: calc(50% - 20px); margin: 10px;}

	.area4-7 ul li{width: calc(50% - 20px); }
	.area4-7 ul li h5{width: 100%; font-size: 20px;}

	.area4-8 ul li{width: calc(50% - 20px);}
	.area4-8 ul li:nth-child(n+3):nth-child(-n+4){margin-top: 30px;}
	.area4-8 ul li img{border-radius:100%; padding: 20px;}

	.area4-10 ul li{width: 100%; text-align: center;}
	.area4-10 ul li:last-child{flex : none; margin-left: 0; margin-top: 30px; text-align: center;}
	/* area4 */

}

@media screen and (max-width: 425px){
.area1-box li{height: auto; width: 80%; padding: 30px 20px;}
.area1-box li > div h5{margin: 10px 0;}

.area4-2{padding-top: 60px;}
.area4-2box li{margin: 0 3px;}
.area4-2box li img{max-width: 80%;}

.area4-3 ul li{width: calc(50% - 10px); margin: 5px;}
.area4-3 ul li div p{padding: 15px 0;}

.area4-4box:before{height: 80px;}
.area4-4box:after{height: 80px;}

.area4-5 ul li{width: calc(50% - 10px); margin: 5px;}
.area4-5 ul li div p{padding: 15px 0;}

.area4-7 ul li h5{font-size: 14px;}

.area4-9 ul li{width: calc(50% - 20px); }
.area4-9 ul li:last-child{margin-top: 30px;}

.area4-10 ul li:last-child:after{content: '';}

.time span{font-size: 16px; width: 100px;}
.time div p{margin-left: 15px;}
}
/* 220420 최연진 새로이치과 추가 */


/* 진료과목 섹션 */

.sect_tit {font-size: 32px; margin-bottom: 40px; font-weight: 400;}
.sect_tit .tit_point {display: block;margin-bottom: 10px;font-size: 22px;color: #c8a666;font-weight: 600;}
.sect_01 .case_exp .p_name {display: block; font-size: 18px;}
.sect_01 .case_exp .p_cate {display: block; font-size: 24px;}
.sect_01 .case_exp .p_sub {white-space: pre-line; margin-top: 5px;}

.view_detail {font-size: 16px;text-align: center;color: #666666; margin-top: 20px; margin-bottom: 40px;}
.view_detail a {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.view_detail.tac a {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.view_detail.t_left a {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.view_detail [class*=iconFt_] {display: inline-block;margin-left: 0.3125rem;font-size: 14px;}

/* .sect_01 {background: url("/resource/images/main/best_bg.png") no-repeat center top;background-size: cover;} */
.sect_01 .case_bnr .swiper-wrapper {padding: 0 0 25px;}
.sect_01 .case_item{text-align: center;}

.sect_01 .button-wrap{max-width: 1460px; width: 100%; margin: 0 auto; padding: 0 20px;}
.sect_01 .case_contr {display: -webkit-box;display: -ms-flexbox;display: flex;align-items: center;justify-content: center;}
.sect_01 .case_contr ._contr {flex: 1 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;align-items: center;justify-content: center;padding-left: 25px;}
.sect_01 .case_contr ._contr .left, .sect_01 .case_contr ._contr .right {font-size: 14px;}
.sect_01 .case_contr ._contr .left [class*=iconFt_], .sect_01 .case_contr ._contr .right [class*=iconFt_] {display: block;transition: transform 0.3s, color 0.3s;}
.sect_01 .case_contr ._contr .left:hover, .sect_01 .case_contr ._contr .right:hover {color: #c8a666;}
.sect_01 .case_contr ._contr .left:hover [class*=iconFt_] {transform: translateX(-15%);}
.sect_01 .case_contr ._contr .right:hover [class*=iconFt_] {transform: translateX(15%);}
.sect_01 .case_contr ._contr .start {width: 28px;height: 28px;border-radius: 50%;display: -webkit-box;display: -ms-flexbox;display: flex;align-items: center;
justify-content: center;border: 1px solid #ddd;font-size: 10px;transition: background 0.3s, color 0.3s;}
.sect_01 .case_contr ._contr .start .iconFt_play {display: none;transform: translateX(25%);}
.sect_01 .case_contr ._contr .start:hover {background-color: #c8a666;color: #fff;}
.sect_01 .case_contr ._contr .start.on .iconFt_play {display: block;}
.sect_01 .case_contr ._contr .start.on .iconFt_pause {display: none;}
.sect_01 .case_contr ._contr > * + * {margin-left: 10px;}

.sect_01 .case_img {padding: 15px 0;overflow: hidden;border-radius: 1.25rem;position: relative;width: 26.875rem;height: 26.875rem;margin-left: auto;margin-right: auto;
max-width: 100% !important; border: 1px solid #333; border-radius:100%;}
.sect_01 .case_img a {display: block;}
.sect_01 .case_img img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: none !important;transition: opacity 0.35s; width: auto !important;}
/* .sect_01 .case_img ._hov {opacity: 0;}
.sect_01 .case_img a:hover ._def {opacity: 0;}
.sect_01 .case_img a:hover ._hov {opacity: 1;} */

.sect_01 .case_txt {margin-top: 15px;}
.sect_01 .case_item {padding: 0 20px; text-align: center;width: auto;}
.sect_01 .swiper-pagination {width: 100%;position: relative !important;height: 2px !important;background-color: #e5e5e5 !important;}
.sect_01 .swiper-pagination > span {background-color: #e1ae5f;height: 2px;}
.sect_01 .p_name {font-weight: 400;}


@media screen and (max-width: 769px) {
.sect_01 .swiper-container {padding-top: 5px;}
.sect_01 .case_contr ._contr {display: none;}

.sect_01 .case_img {width: 13.75rem;height: 13.75rem;margin: auto;}
.sect_01 .case_img img {width: 100%;}


.sect_01 .case_exp {transition: opacity 0.35s;}
.sect_01 .case_exp .p_name {font-size: 22px;}
.sect_01 .case_exp .p_cate {font-size: 16px;}
.sect_01 .view_detail {margin-top: 15px; font-size: 14px;}
.view_detail [class*=iconFt_]{font-size: 12px;}
.sect_01 .swiper-slide-prev .case_exp,
.sect_01 .swiper-slide-next .case_exp {opacity: 0;}
}

@media screen and (max-width: 425px){
.sect_tit {font-size: 24px; margin-bottom: 20px;}
.sect_tit .tit_point{font-size: 20px;}
}

/* 진료과목 섹션 */



/* ================= background-image ================== */

	/* common */
	.banner-bg {padding: 8% 0;}
	.banner-bg h2 {color: #fff; text-align: center;}
	.banner-bg p {color: #fff; text-align: center; font-size: 13px; letter-spacing: 2px;}






/* ======================================================================================================================== */
/* =================================================== sub start ========================================================== */
/* ======================================================================================================================== */
	
/* ============================================== common ================================================================== */
	.swiper-slide img {width: 100%;}

	/* 숫자 스타일 */
	.num::before {content: attr(data-num); display: block; width: 50px; height: 50px; background-color: #3fabdb; color: #fff; font-size: 1.8em; font-weight: 500; text-align: center;}
	
	/* 미들 타이틀 (작은 타이틀) */
	.middle-title {text-align: center;}
	.middle-title p {font-family: 'Noto Sans KR'; white-space: pre-line; }

	.middle-text {text-align: center; margin-top: 3%; margin-bottom: 3%; }

	/* 211116 타이틀 스타일 추가 */
	.sub-title {overflow: hidden;width: 98%;margin: 0 auto 20px;background: #fff;}
	.sub-title b {display: block;float: left;width: 30%;text-align: center;padding: 10px 10px;color: #fff;background: #133792;}
	.sub-title span {display: block;float: left;width: 70%;font-size: 80%;    padding: 14px 0px 14px 40px;}

	/* 화살표 스타일 */
	.arrow::before{content:'▶';display:block;width:25px;height:25px;background-color:#133792;color:#fff;border-radius:50%;line-height:25px;position:absolute;left:-25px;top:50%;transform:translate(0,-50%);font-size:.7em}
	.arrow:first-child::before {display: none;}

    /* 배경색 있는 타이틀 */
    .bg-title{background-color:#133792;color:#fff;display:inline-block;padding:1% 1% 0 1%;font-family:GmarketSansMedium;line-height:1.2;margin-bottom:3%}
	.bg-title1{background-color:#d4a86e;color:#fff;display:inline-block;padding:1% 1% 0 1%;font-family:GmarketSansMedium;line-height:1.2;margin-bottom:3%}
    .bg-title2{background-color:#d7e7f6;color:#333;display:inline-block;padding:1% 4%;font-family:'Noto Sans KR';line-height:1.2;margin-bottom:40px;border-radius:50px; font-weight: 500;}
    .bg-title3{background-color:#3fabdb;color:#fff;display:inline-block;padding:1% 4%;font-family:'Noto Sans KR';line-height:1.2;margin-bottom:40px;border-radius:50px;}

	/* 레이아웃 */
	.col-2, .col-3, .col-4, .col-5 {display: flex; flex-wrap: wrap; width: 100%; justify-content: center;}
	.col-2 li, .col-3 li, .col-4 li, .col-5 li {position: relative; margin-left: 2%; flex: 0 0 auto; width: 100%;}
	.col-2 li {width: calc(50% - 2%);}
	.col-4 li {width: calc(25% - 2%);}
	.col-3 li, .col-5 li {width: calc(33.3% - 2%);}
	.col-2 li:first-child, .col-2 li:nth-child(3), .col-2 li:nth-child(5), 
	.col-3 li:first-child, .col-3 li:nth-child(4), .col-3 li:nth-child(7),
	.col-4 li:first-child, .col-4 li:nth-child(5),
	.col-5 li:first-child, .col-5 li:nth-child(4) {margin-left: 0;}
	.col-2 li:nth-child(3), .col-2 li:nth-child(4),	.col-2 li:nth-child(5),
	.col-3 li:nth-child(4), .col-3 li:nth-child(5), .col-3 li:nth-child(6), .col-3 li:nth-child(7), .col-3 li:nth-child(8), .col-3 li:nth-child(9),
	.col-4 li:nth-child(5), .col-4 li:nth-child(6), .col-4 li:nth-child(7), .col-4 li:nth-child(8),
	.col-5 li:nth-child(4), .col-5 li:nth-child(5), .col-5 li:nth-child(6), .col-5 li:nth-child(7), .col-5 li:nth-child(8), .col-5 li:nth-child(9), .col-5 li:nth-child(10),
	.col-5 li:nth-child(11), .col-5 li:nth-child(12), .col-5 li:nth-child(13), .col-5 li:nth-child(14), .col-5 li:nth-child(15) {margin-top: 3%;}

	.one-col-5{display: flex; flex-wrap: wrap; width: 100%; justify-content: center;}
	.one-col-5 li{flex:1;}

	/* 테이블 스타일 */
	.table-wrap {text-align: center;}
	.table-wrap h4 {background-color: #3fabdb; color: #fff; display: inline-block; padding: 1% 1% 0 1%; font-family: 'GmarketSansMedium'; line-height: 1.2;}
	.table-wrap table {width: 100%; white-space: pre-line; margin-top: 3%;}
	.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 18px; padding: 1.5% 0; border: 1px solid #eeeeee; vertical-align: middle;}
	.table-wrap table thead tr, .table-wrap table tbody tr th {background: #f5f5f5; font-weight: 500;}
	.table-wrap img {margin-bottom: 3%;}
	.photo-table .inner > p, .table-wrap .table-scroll p {text-align: center; margin-top: 3%; font-weight: 500;}
	
	/* 사진 들어간 테이블 */
	.photo-table table {font-size: 18px; text-align: center; width: 100%; white-space: pre-line;}
	.photo-table table tr, .photo-table table tr td {padding: 1.5% 0; border: 1px solid #eeeeee; vertical-align: middle;}
	.photo-table table thead tr:first-of-type td:first-of-type, .photo-table table thead tr:first-of-type {border: none;}
	.photo-table table thead tr:first-of-type td {padding: 0;}
	.photo-table table thead tr:last-of-type, .photo-table table tbody tr td:first-of-type {background: #f5f5f5; font-weight: 500;}
	.photo-table table tbody tr:last-of-type {border: 0;}
	.photo-table table td b {font-weight: 500;}
	
	/* 211104 point-color 들어간 칸 추가 : imp_custom 페이지 마지막 칸 표시 */
	.photo-table:first-of-type table.imp_custom_table tbody tr:last-of-type td:last-of-type {background-color: #3fabdb; color: #fff; font-weight: 500;}

	
	/* 숫자 리스트 */
	.num-list .num {margin-bottom: 3%; position: relative; padding-left: 50px; display: flex; align-items: center;}
	.num-list .num:last-child  {margin-bottom: 0;}
	.num-list .num::before {position: absolute; left: 0; width: 35px; height: 35px; font-size: 1.3em; display: inline-block; margin-right: 1%;}
	.num-list .num:nth-child(2n-1)::before {background-color: #0c659d;}
	
	/* 동그란 사진, 사각형 사진 들어간 리스트 */
	.line-list {text-align: center; margin-bottom: 3%;}
	.line-list:last-of-type {margin-bottom: 0;}
	.line-list li img {border: 2px solid #eee; width: 100%;}
	.line-list .num::before {position: absolute; top: 0; left: 0;}
	.circle-list {text-align: center;}
	.circle-list li img {border: 2px solid #eee; border-radius: 50%;}
	.line-list li h5, .circle-list li h5,.circle-list li p {white-space: pre-line; margin-top: 3%;}
	
	/* 파란 선 들어간 네모 박스 */
	.line-box li {border: 1px solid #eee; padding: 2% 2% 3% 3%; position: relative;}
	.line-box li::after {content: ''; display: block; width: 10px; height: 100%; position: absolute; left: 0; top: 0; background-color: #133792;}
	.line-box li h5 {margin-bottom: 2%; padding-bottom: 2%; border-bottom: 1px solid #eee; font-weight: 500;}
	div.line-list {margin-top: 3%;}

	/* 사진+텍스트 들어간 기본 스타일 */
	.basic-box {display: flex; align-items: center; padding-top: 3%; margin-top: 3%; border-top: 1px solid #eee; justify-content: flex-start;}
	.basic-box:first-of-type {border: none; margin-top: 0; padding-top: 0;}
	.basic-box li:first-child{flex:1;}
	.basic-box li:last-child {margin-left: 3%; flex:1;}
	.basic-box li h5 {margin: 3% 0; font-weight: 600; white-space: pre-line; line-height: 1.5; font-family: 'GmarketSansMedium';}
	.basic-box li p {white-space: pre-line;}
	/* .basic-box li b {background-color: #3fabdb; color: #fff; display: inline-block; padding: 2% 2%; font-family: 'GmarketSansBold'; line-height: 1.2; border-radius: 50px; width: calc(50% - 10%); text-align:center; margin: 2% 1%;} */
	
	/* 원 안에 아이콘 들어간 리스트 */
	.circle-icon {border-radius: 50%; border: 2px solid #f5f5f5; height: 100%; width: 100%;}
	.circle-icon:nth-child(2n-1) {border: 2px solid #e5f4fd;}
	.circle-icon * {margin: 0 auto; text-align: center;}
	.circle-icon::after {content: ''; display: block; padding-bottom: 100%;}
	.circle-icon div {position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; height: 50%; width: 100%; display: flex; flex-direction: column; justify-content: center;}
	.circle-icon p {text-align: center; white-space: pre-line; line-height: 1.2; margin-top: 5%;}
	
	/* 원 안에 아이콘 없는 박스 */
	.circle-box {border-radius: 50%; background-color: #f5f5f5;}
	.circle-box:nth-child(2n-1) {background-color: #e5f4fd;}
	.circle-box::after {content: ''; display: block; padding-bottom: 100%;}
	.circle-box p {position: absolute; width: 100%; height: auto; bottom: 50%; transform: translate(0, 50%); text-align: center; white-space: pre-line;}
	.circle-box h5 {position: absolute; white-space: pre-line; text-align: center; bottom: 50%; transform:translateY(50%); display: inline-block; width: 100%;	}
	.circle-box span{font-size: 24px; font-weight: bold;}

	/* 동그란 숫자 리스트 */
	.circle-num {display: flex; justify-content: center;}
	.circle-num li{text-align: center; width: 100%; margin-left: 5%;}
	.circle-num li:first-child{margin-left: 0;}
	.circle-num li:before{content: attr(data-number); font-family: "GmarketSansMedium"; display: inline-block; color: #fff; border-radius: 50%; font-size: 25px; width: 50px;
							height: 40px; padding-top: 10px; margin: 0 auto 7%; z-index: 1; position: relative;}
	.circle-num li h5{font-weight: 500; margin-top: 5%; white-space: pre-line;}
	.circle-num li:first-child:before{background: linear-gradient(to right, #c6e5fa, #b3dcf8);}
	.circle-num li:nth-child(2):before{background: linear-gradient(to right, #b3dcf8, #85c4ee);}
	.circle-num li:nth-child(3):before{background: linear-gradient(to right, #85c4ee, #3fabdb);}
	.circle-num li:last-child:before{background: linear-gradient(to right, #3fabdb, #2189cf);}

	/* 1920 이미지 박스 */
	.full-imgbox{position: relative;}
	.full-imgbox-txt{position: absolute; top: 50%; left: 60%; transform:translate(-50%, -50%);}
	.full-imgbox-txt h4{white-space: pre-line; margin-bottom: 5%;}
	.full-imgbox-txt p{white-space: pre-line; color: #fff;}
	.full-imgbox-m{display: none;}

	/* 둥근 모서리 화살표 박스 */
	.radius-arrow-box{text-align: center; flex-wrap: wrap; width: 100%; justify-content: center; display:flex;}
	.radius-arrow-box li{border: 2px solid #3fabdb; padding: 5%; border-radius: 5%; margin-left: 5%; flex:1; position: relative;}
	.radius-arrow-box li:not(:last-child):after{content:'▶'; color: #3fabdb; position: absolute; right: -27px; font-size: 30px; top: 50%; transform:translateY(-50%);}
	.radius-arrow-box li:first-child{margin-left: 0;}
	.radius-arrow-box li h5{white-space: pre-line; font-weight: 500; margin-bottom: 5%; margin-top: 3%;}
	.radius-arrow-box li p{white-space: pre-line;}

	/* 합쳐지는 원 */
	.circle-plus{width: 100%; display:flex; align-items: center; color: #fff;}
	.circle-plus li:nth-child(5){mix-blend-mode: darken}
	.circle-plus li:nth-child(odd){flex:1; border-radius: 50%;  position: relative; width: 33%; height: auto; padding-top: 33%;	}
	.circle-plus li:nth-child(1){background-color: #93d4f0; transform:translateX(15%);}
	.circle-plus li:nth-child(3){background-color: rgba(93, 191, 232, 0.5);}
	.circle-plus li:nth-child(5){background-color: #93d4f0; transform:translateX(-15%);}
	.circle-plus li:nth-child(odd) div{top: 0; position: absolute; bottom: 0; left: 10%; right: 10%;  display: inline-flex; justify-content: center;align-items: center; text-align: center}
	.circle-plus li:nth-child(even){position: relative; }
	.circle-plus li p{font-size: 24px; font-weight: 500;}
	.circle-plus li:nth-child(2){right: -2.5%;}
	.circle-plus li:nth-child(4){right: 2.5%;}

	/* before after 화살표 */
	.after-arrow-box{text-align: center; flex-wrap: wrap; width: 100%; justify-content: center; display:flex; padding: 0 1%;}
	.after-arrow-box li{flex:1; position: relative;}
	.after-arrow-box li:not(:last-child):after{content:'▶'; color: #4aa4e2; position: absolute; right: -35px; font-size: 30px; top: 50%; transform:translateY(-50%);
	width: 50px; height: 50px; text-align: center; line-height: 50px; z-index: 999; background-color: #fff; border-radius: 50%;}
	.after-arrow-box li:first-child{margin-left: 0;}


	/* 탭메뉴 */
	.tabArea{width: 100%; display: flex; flex-wrap: wrap;}
	.tabArea > div{width: 10%; border: 1px solid #888; text-align: center; padding: 8px 0; margin-left: -1px; cursor: pointer;}
	.tabArea .selected{color: #fff; background-color: #111;}

	/* 밑에 화살표가 달려있는 박스 */
	.arrow-title{background-color: #d7e1f0; padding: 3% 5%; display: inline-block; border-radius:50px; position: relative; left: 50%; transform:translateX(-50%);
	margin-bottom: 5%; z-index: 99; text-align: center;	}
	.arrow-title:before{content: ''; border: 20px solid #d7e1f0; width: 1px; height: 1px; position: absolute; bottom: -20px; left: 50%; transform:translateX(-50%) rotate(45deg);
	 /* background-color: #d7e1f0; */ z-index: 77;	}

	 .special-title{text-align: center; font-weight: 500; font-size: 32px; margin-top: 3% !important; padding: 3% 0; border-top: 4px solid #f3fbfd; border-bottom: 4px solid #f3fbfd; width: 80%; margin: 0 auto;}

/*==================================================== about ============================================================== */
	
	.point-eng{position:relative}
	.point-eng::before{content:attr(data-eng);display:block;font-size:15em;position:absolute;right:3%;bottom:0;font-family:GmarketSansBold;color:#f3f7fb;z-index:-1;line-height:1}

	/* =========== info-dentist======== */
	.dentist {padding: 3% 0 0 0; display: flex; width: 100%;}
	.dentist > li {width: 45%;}
	.dentist div {margin-bottom: 3%;}
	.dentist .name {border-bottom: 2px dotted #ddd;}
	.dentist .name h4 {margin-bottom: 2%;}
	.dentist .name p {font-weight: 500; color: #555;}
	.dentist .name p:last-of-type {padding-bottom: 3%;}
	.dentist .name span {font-size: 0.75em;}
	.dentist ul {margin-top: 1.5%;}
	.dentist ul:first-of-type {margin-top: 0;}
	.dentist ul li {line-height: 1.8;}

	.thesis{display:flex; justify-content:center; align-items:center; width: 100%; flex-wrap:wrap; margin-top: 100px;}
	.thesis li{text-align: center; margin: 20px 5px 0 5px;}
	.thesis li img{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

	

	/* =========== info-dentist======== */
	.tab-wrap {margin-bottom: 5%;}

	/* 탭 메뉴 스타일 */
	.tab-wrap input {display: none;}
	.tab-wrap label {display: inline-block;padding: 15px 25px;text-align: center;border: 1px solid #ccc;color: #bbb;background-color: #fff;margin-left: -0.3%; margin-top: -1px;}
	.tab-wrap label:hover {color: #133792;cursor: pointer;transition: all ease 0.3s;}
	.tab-wrap input:checked + label {color: #fff;background-color: #111;transition: all ease 0.3s;}
/* 	#tab-menu1:checked ~ #tab-content1,
	#tab-menu2:checked ~ #tab-content2,
	#tab-menu3:checked ~ #tab-content3{display: block;} */

	/* 탭 메뉴 내용 스타일 */
	.tab-wrap .tab-content {padding: 3% 0 0 0;}
	#tab-content2,
	#tab-content3,
	#tab-content4{display: none;}
	.tab-wrap .tab-content > ul {display: flex;width: 100%;background: url(../img/sub/dentist_icon.jpg) no-repeat;background-position: right bottom;background-size: auto;}
	.tab-wrap .tab-content > ul > li {width: 45%;}
	.tab-wrap .tab-content > ul > li:last-child{margin-left: 30px;}
	.tab-wrap .tab-content li div {margin-bottom: 3%; padding-bottom: 3%;}
	.tab-wrap .tab-content .tab-name {border-bottom: 2px dotted #ddd; display:flex; align-items:center}
	.tab-wrap .tab-content .tab-name span {font-size: 0.75em; font-weight: normal !important;}
	.tab-wrap .tab-content .tab-name p {font-weight: 500;color: #555;}
	.tab-wrap .tab-content .tab-name p:last-of-type {/* padding-bottom: 3%; */ margin-left: 20px;padding-left: 20px;border-left: 2px solid #aaaa;}
	.tab-wrap .tab-content .tab-name h4 {font-family: 'GmarketSansMedium';}
	.tab-wrap .tab-content ul ul {margin-top: 1.5%;}
	.tab-wrap .tab-content ul ul:first-of-type {margin-top: 0;}
	.tab-wrap .tab-content ul ul li {line-height: 1.8; font-size: 18px;}
	.tab-wrap .tab-content .disc-list{list-style-type: disc; margin-left: 5%;}
	.tab-wrap .tab-content h5{font-weight: 500; padding-bottom: 3%;}
	.tab-wrap .tab-content ul span{margin-top: 5%; display: inline-block; font-size: 22px; font-weight: bold;}

	/* =========== info-interior ======== */
	#gallery .swiper-container {width: 100%; /* height: 550px; */ margin: 0 auto;}
	#gallery .swiper-pagination {bottom: -20px !important; position: static;}
	#gallery .swiper-slide-container {height:100%; margin:auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
	.gallery-top {height: 80%; width: 100%;}
	.gallery-thumbs {height: 20%; box-sizing: border-box; padding: 10px 0;}
	.gallery-thumbs .swiper-slide {width: 20%;	height: 100%; opacity: 0.4;}
	.gallery-thumbs .swiper-slide-active {opacity: 1;}

	/* =========== info-time ======== */
	.info-time {position: relative;}
	.info-time * {text-align: center;}
	.info-time ul {display: flex; justify-content: center; width: 100%; margin: 0 auto 3%; padding: 0 10%; align-items:center;}
	.info-time ul li {width: 100%;}
	.info-time ul li img {width: 85%;}
	.info-time ul li:last-child {margin-left: 5%;}
	.info-time h6 {font-weight: 500; font-size: 20px; padding: 1.1% 0;}
	.info-time h6:nth-of-type(2n) {padding: 2% 0;}
	.info-time h6:nth-of-type(2n-1) {background-color: #f0f0f0;}
	.info-time h6.night-time {background-color: #3fabdb; color: #fff;}
	.info-time h5 {font-weight: 500; margin-top: 3%;}
	.info-time h5 img {max-width: 45px; padding-right: 0.5%;}

	.equipment li:nth-child(7){margin-left: 0 !important;}

	.eq-icon{display:flex; align-items: center; justify-content:center; width: 100%; margin: 5% 0; flex-wrap:wrap;}
	.eq-icon li{flex:1; text-align: center;}
	.eq-icon li p{font-weight: 500; white-space: pre-line; margin-top: 5%;}
	.eq-icon li:not(:first-child) div{border-left: 1px solid #ccc;}

	/* ========= info-map ========= */
	.info-map img {display: block; margin: 0 auto;}
	.info-map ul {display: flex; margin-top: 3%; align-items: center;}
	.info-map ul li {width: 100%; padding: 3% 0; background: url(../img/sub/info_map_bg03.png) no-repeat right center; text-align: center;}
	.info-map ul li:first-child {padding-right: 3%; border-right: 2px solid #eee; margin-right: 3%; background: url(../img/sub/info_map_bg01.png) no-repeat left center;}
	.info-map ul#bus {display: block;}
	.info-map ul#bus li{width: 100%; border-right: none; background: url(../img/sub/info_map_bg04.png) no-repeat right center !important;}
	.info-map ul li h6 {font-weight: 500; line-height: 1; margin-bottom: 5%; letter-spacing: 1px;}
	.info-map ul li p{font-size: 20px; line-height: 28px; letter-spacing: 1px; font-weight: 500; white-space: pre-line;}
			
/*==================================================== implant, ortho, basic ============================================================== */

	/* ============= imp-navigation ============ */
	.navi {text-align: center; margin-top: 3%;}
	.navi * {white-space: pre-line;}
	.navi p {font-weight: 400; margin-top: 1.5%;}
	.navi h5 {font-weight: 500; position: relative; margin: 0 auto; border-bottom: 5px solid #e5f4fd; border-top: 5px solid #e5f4fd; padding: 2% 8%; display: inline-block;}
	.navi h5::before, .navi h5::after {font-size: 80px; position: absolute; font-weight: 600; line-height: 1;}
	.navi h5::before {content: '“'; left: 0; top: 5%;}
	.navi h5::after {content: '”'; right: 0; top: 5%;}

	/* ========= imp-insurance ========== */
	.imp-insurance {text-align: center;}
	.imp-insurance .inner > p {font-weight: 400; margin-top: 2%;}

	.insurance-box {border: 2px solid #eee; padding: 5% 0; background: url(../img/sub/imp_insurance.jpg) no-repeat; background-size: cover; background-position: center bottom;}
	.insurance-box .point {display: flex; align-items: flex-end; justify-content: center;}
	.insurance-box .point li {margin-right: 2%;}
	.insurance-box .point li h1 {font-size: 90px; font-family: 'GmarketSansMedium'; letter-spacing: -3px;}
	.insurance-box .point li p {background-color: #f5f5f5; display: inline-block; padding: 0 5%; font-weight: 500;}
	.insurance-box .point li:last-child {margin-right: 0;}
	.insurance-box .point li:last-child h1 {font-family: 'GmarketSansBold';}
	.insurance-box .point li:last-child p {background-color: #e5f4fd;}
	
	.insurance-box .info {background-color: #fff; margin: 0 auto; width: 100%; max-width: 550px; border: 2px solid #eee; padding: 1% 3% 1% 4%; text-align: left; margin-top: 3%; position: relative;}
	.insurance-box .info::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 15px; height: 100%; background-color: #3fabdb;}
	.insurance-box .info li {display: flex; align-items: center; padding: 4% 0; border-bottom: 2px solid #eee;}
	.insurance-box .info li:last-child {border-bottom: none;}
	.insurance-box .info li h6 {font-weight: 500; margin-right: 5%;}
	.insurance-box .info li p {white-space: pre-line;}

	/* ========= ortho-age ========== */
	.ortho-age {display: flex;}
	.ortho-age li {margin-left: 2%;}
	.ortho-age li:first-child {margin-left: 0;}

	.age-box {display: flex; align-items: center; margin-top: 3%;}
	.age-box ul {width: 100%; height: 100%;}
	.age-box .line-box {max-width: 100%;}
    
	.age-box .line-box li {border: none; padding: 3% 3% 3% 5%;}

	.ortho-title{width: 100%; max-width: 660px; margin: auto; background-color: #d7e1f0; height: 30px; margin-top: 6%; position: relative;}
	.ortho-title span{display: inline-block; text-align: center; font-size: 38px; font-weight: 500; width: 100%; position: absolute; top: -20px; font-family: 'GmarketSansMedium';}

	/* 211130 연세바로치과 */
	.age-box > *{flex:1;}
	.age-box span{color: #fff; padding: 16px 42px; display: inline-block; background-color: #3fabdb; text-align: center; border-radius: 40px;}
	.age-box b{font-size: 24px;}
	.age-box p{margin-left: 3%;}


	/* ========= ortho-trans, ortho-clippy ========== */
	.trans-clippy {display: flex; justify-content: center;}
	.trans-clippy > li:first-child {margin-right: 5%;}
	.trans-clippy > li > p {margin-top: 5%;}
/* 	.trans-clippy > li > img {border: 2px solid #eee;} */
	.trans-clippy ul {display: flex; position: relative; max-width: 426px;}
	.trans-clippy ul::before {content: '+'; display: block; border: none; color: #3fabdb; position: absolute; left: 50%; font-size: 40px; font-weight: 600; transform: translate(-50%, -50%); top: 50%;}
	.trans-clippy ul li {border: 2px solid #3fabdb; border-radius: 50%; width: 100%; position: relative; margin-left: 10%;}
	.trans-clippy ul li:first-child {margin-left: 0;}
	.trans-clippy ul li p {position: absolute; width: 100%; height: auto; top: 50%; transform: translate(0, -50%); text-align: center; white-space: pre-line;}
	.trans-clippy ul li::after {content: ''; display: block; padding-bottom: 100%;}

	/* ========= gum-therapy =========== */
	.gum {display: block; margin: 0 auto 7%;}

	/* =========== aesthetic =========== */
	.aesthetic {max-width: 800px; text-align: center; margin: 0 auto;}
	.ae-box li:last-child {width: 90%;}
	
	/* =========== wisdom =========== */
	.wisdom {max-width: 600px; margin: 0 auto;}

	/* ========= ortho-retainer =========== */
	.retainer * {text-align: center;}
	.retainer li {background-color: #f5f5f5; padding: 6% 0;}
	.retainer li:nth-child(2n-1) {background-color: #e6f4fd;}
	.retainer li h5:last-of-type::before {content: ''; width: 40px; background-color: #3fabdb; height: 3px; display: block; margin: 3% auto 3%;}

	
	.before {position: relative;}
	.before img, .after img {width: 100%; height: auto;}
	.after {width: 100%; height: 100%; background-color: rgba(240, 240, 240, 0.5); color: #111; position: absolute; top: 0; opacity: 1; transition: all ease 0.5s;}
	.after:hover {opacity: 1;}
	.after p {color: #111; font-size: 20px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; white-space: pre-line;		}
	.after b{font-size: 28px;}
	.after a {display: inline-block; background-color: #000; color: #fff; padding: 8px 80px; margin-top: 20px;}

	/* 버튼 */
	.buttonArea{width: 100%; margin: 0 auto; text-align: center; margin-top: 5%;}
	.buttonArea a{color: #fff; font-size: 20px; text-align: center; padding: 10px 50px; background-color: #111;}
	.buttonArea a:hover{opacity: 0.7; transition: 0.2s}

	.before-after span{color: #fff; display: inline-block; background-color: #333; width: 100%; padding: 10px 0; font-size: 24px; font-weight: 500;}
	.before-after li:last-child span{background-color: #4aa4e2;}
	.before-after img{border: none !important;}

	.m_br{display: none;}

/* -- ARROW 6      -- */
.arrow-6-wrap{display: inline-block;}
.arrow-6 {/* more triangle */height: 13px; width: 13px;border: 1px solid rgba(0, 0, 0, 0.6);border-width: 3px 3px 0 0;transform: rotate(45deg);margin-right: 20px; transition:0.3s;}
.arrow-6:before, .arrow-6:after {content: '';position: absolute;display: block;height: 10px; width: 10px;border-width: 3px 3px 0 0; transition:0.3s;}
.arrow-6:before {border: 1px solid rgba(0, 0, 0, 0.3);border-width: 3px 3px 0 0;/* top - distance minus border */top: 7px; left: -10px;}
.arrow-6:after {border: 1px solid rgba(0, 0, 0, 1);border-width: 3px 3px 0 0;/* top - distance plus border */top: -13px; left: 10px;}

.more:hover .arrow-6{margin-left: 5px;}
.more:hover .arrow-6:before{border: 1px solid rgba(0, 0, 0, 1); border-width: 3px 3px 0 0;}
.more:hover .arrow-6:after{border: 1px solid rgba(0, 0, 0, 0.3); border-width: 3px 3px 0 0;}

.arrow-area{display:flex; align-items:center;}
.arrowed{margin-left: 20px;}

.BA-arrow-area{padding-bottom: 7%;}
.BA-arrow li{position: relative;}
.BA-arrow li:before{content: "●"; color: #3fabdb; position: absolute; bottom: -50px; left: 50%; transform:translateX(-50%); z-index: 9;}
.BA-arrow li:after{content: ""; position: absolute; bottom: -50px; left: 50%; transform:translateX(-50%); background-color: #d4eef9; width: 100%; height: 25px;}
.BA-arrow li:first-child:before{background-color: #d4eef9;  border-radius:50%; width: 55px;height: 55px; display: flex; justify-content: center; align-items: center; bottom: -65px;}
.BA-arrow li:nth-last-child(2):after{width: 200%;}
.BA-arrow li:last-child:after{bottom: -67px; left: 55%; transform: translateX(-40%);
    left: 60%; background-color: transparent; width: 0;height: 0;border-bottom: 30px solid transparent;border-top: 30px solid transparent;border-left: 50px solid #d4eef9;border-right: 50px solid transparent;}
.BA-arrow li:first-child:after{left: 100%; width: 100%;}
.BA-arrow h5{font-family: 'GmarketSansMedium';position: absolute;left: 50%;padding-top: 80px;transform: translateX(-50%);}
.BA-arrow p{font-weight: 500; white-space: pre-line; position: absolute;left: 50%;padding-top: 80px;transform: translateX(-50%);}

.hashtag{display: flex; align-items:center; max-width: 1000px; margin: 0 auto; justify-content: center;}
.hashtag li{width: 240px; margin: 0 20px; background-color: #3fabdb; color: #fff; padding: 10px 0; border-radius: 40px;}


/* 비포 애프터 슬라이드 */
.before-after-slide{justify-content: space-between; display: flex; width: 100%; flex-wrap:wrap;}
.case-area{width: calc(50% - 2%); }
.case-wrap{position: relative;}
.case-img{text-align: center;}
.case-num {left: 3%; top: 5%; text-transform: uppercase; border: 2px solid #c6e8ff; padding: 0.8rem 0.4rem; line-height: 1.4; color: #c6e8ff; width: 4.25rem; height: 4.25rem; position: absolute; z-index: 1; text-align: center;}
.case-logo{bottom: 6%; left: 4%; opacity: .4; position: absolute; z-index: 1;}
.logo-w{width: 10.8rem; height: 6rem; background: url(img/logo.png)50%/100% no-repeat;}
.ir{text-indent: 100%; white-space: nowrap; overflow: hidden;}
img{max-width: 100%; vertical-align: top;}
.case-after {position: absolute; top: 0; left: 0; width: 100%; z-index: 0; opacity: 0;}
.on .case-after {-webkit-animation: fadeIn50 1s 0.3s forwards; animation: fadeIn50 1s 0.3s forwards;}
.on .case-after.move {-webkit-animation: none; animation: none;}
@-webkit-keyframes fadeIn50 {
    0% {opacity: 0;}
    to {opacity: 0.5;}
}
@keyframes fadeIn50 {
    0% {opacity: 0;}
    to {opacity: 0.5;}
}
.case-desc-txt {right: 4%; bottom: 6%; color: #fff; font-weight: 300; position: absolute; z-index: 1;}
.case-slider { padding: 5% 10%; align-items: center; justify-content: space-between; display: flex;}
.prog-bar{width: 70%; display: flex; justify-content: center; position: relative;}
input[type=range] {-webkit-appearance: none; width: 100%; background: transparent;}
input[type="range" i] {appearance: auto; cursor: default; color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255)); padding: initial; border: initial; margin: 2px;}
.prog-bar:after {position: absolute; content: ""; top: 48%; left: 0; width: 100%; height: 2px; background: #ededed; z-index: -1;}
::-webkit-scrollbar {width: 0.8rem;}
::-webkit-scrollbar-thumb {background: hsla(0,0%,77.3%,.5);}
input[type='range'] {-webkit-appearance: none; width: 100%; background: transparent;}
input[type='range']::-webkit-slider-thumb {-webkit-appearance: none; background: #fff; width: 2.75rem; height: 2.75rem;background: url("../img/sub/range_arrow.png") 0 0/100% no-repeat;}
input[type='range']::-moz-range-thumb {background: #fff; width: 2.75rem; height: 2.75rem; background: url("../img/sub/range_arrow.png") 0 0/100% no-repeat;}
input[type='range']:focus {outline: none;}
input[type='range']::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}
/* 비포 애프터 슬라이드 */


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

	.imgbox img {width: 400px; height: auto;}
	.special_box {position: inherit !important;right: 0 !important;bottom: 0 !important;text-align: center !important;}
	.line_white{text-align: center; margin: 0 auto;}

	.about-bg1{background-size: 30%;}
}

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

	.special-circle{width: auto;}
	/* 화살표 스타일 */
	.arrow::before {left: -22.5px;}
	
	/* =========== info-dentist ======== */
	.dentist > li:first-child {margin-right: 3%;}
	.dentist {background-size: 30%; margin-bottom: 10%;}

	.tab-wrap {margin-bottom: 10%;}
	.tab-wrap .tab-content > ul > li:first-child {margin-right: 3%;}
	.tab-wrap .tab-content > ul {background-size: 30%;}
	
	/* ======= imp-navigation ======= */
	.navi h5::before, .navi h5::after {font-size: 60px;}

	/* ========= ortho-clippy ========= */
	.clippy li p {bottom: 28%;}
	.clippy li img {top: 16%;}

	/* ========= info-map ========= */
	.info-map ul li {background-size: 20%;}


}

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

	/* ============= common ============= */
	/* 211116 타이틀 스타일 추가 */
	.sub-title {width: 100%;}
	.sub-title b {width: 100%;}
	.sub-title span {display: block;width: 100%;text-align: center;padding: 5px 10px;}

	.point-text {white-space: pre-line;}
	.point-text br {display: none;}
	
	.num::before {margin: 2% auto 0; font-size: 1.5em; width: 40px; height: 40px;}
	.num-list .num::before {margin: 0 1% 0 0;}


	.col-4 li {width: calc(50% - 2%);}
	.col-4 li:nth-child(3), .col-4 li:nth-child(7) {margin-left: 0;}
	.col-3 li:nth-child(4), .col-3 li:nth-child(5), .col-3 li:nth-child(6), .col-3 li:nth-child(7), .col-3 li:nth-child(8), .col-3 li:nth-child(9),
	.col-4 li:nth-child(3), .col-4 li:nth-child(4), .col-4 li:nth-child(5), .col-4 li:nth-child(6), .col-4 li:nth-child(7), .col-4 li:nth-child(8) {margin-top: 3%;} 

	
	/* 테이블 스타일 */
	.table-wrap .table-scroll {overflow-x: scroll; overflow-y: hidden; max-width: 100%;}
	.table-wrap table {min-width: 700px; font-size: 15px;}
	.table-wrap img {max-width: 80%;}
	
	/* 사진 들어간 테이블 */
	.photo-table table {font-size: 15px; letter-spacing: -2px;}
	.photo-table p {white-space: pre-line;}
	
	/* 사진+텍스트 들어간 기본 스타일 */
	.basic-box {display: block; border: none; text-align: center !important; margin-top: 10%;}
	.basic-box li:last-child {margin-left: 0; margin-bottom: 10%;}
	.basic-box li:first-child{text-align: center !important;}
	.basic-box li h5 {margin: 1% 0;}
	.basic-box li img {border-radius: 20px;}
	.basic-box li img, .circle-list li img {width: 60%;}


	.line-list li img {width: 100%;}
	.line-list .num::before {margin: 0;}
	.line-list li h5{font-size: 22px;}
	
	/* 파란 선 들어간 네모 박스 */
	.line-box li::after {width: 8px;}

	/* 원 안에 아이콘 들어간 리스트 */
	.circle-icon {max-width: 250px;}
	.circle-icon img {max-width: 50%;}

	.circle-wrap {display: flex;}
	.circle-wrap li, .circle-wrap li:first-child {width: calc(33.3% - 2%);}
	.circle-wrap li img, .circle-wrap li:first-child img {max-width: 40%;}

	.circle-list.col-4 li img {width: 80%;}
	
	/* 동그란 숫자 리스트 */
	.circle-num{flex-wrap:wrap;}
	.circle-num li{width: 40%; margin-left: 0;}
	.circle-num li:before{margin-bottom: 3%;}
	.circle-num li h5{margin-top: 0; font-size: 18px;}
	.circle-num li:nth-child(3), .circle-num li:last-child{margin-top: 3%;}

	/* 1920 이미지 박스 */
	.full-imgbox-m{display: block;}
	.full-imgbox-pc{display: none;}
	.full-imgbox-txt{left: 50%;}

	/* 둥근 모서리 화살표 박스 */
	.radius-arrow-box{display:block;}
	.radius-arrow-box li{margin-left: 0; position: relative; width: 60%; margin: 0 auto;}
	.radius-arrow-box li:not(:last-child):after{content:'▼'; color: #3fabdb; position: absolute; right: 50%; font-size: 30px; top: auto; bottom: -33px; transform:translate(50%, 0);}
	.radius-arrow-box li:first-child{margin-left: auto;}
	.radius-arrow-box li:not(:last-child){margin-bottom: 5%;}
	.radius-arrow-box li h5{white-space: pre-line; font-weight: 500; margin-bottom: 5%; margin-top: 3%;}
	.radius-arrow-box li p{white-space: pre-line;}

	.before-after span{font-size: 16px; padding: 5px 0;}

	
	/* =========== info-dentist ======== */
	.dentist {display: block; background: none;}
	.dentist > li:first-child {margin-bottom: 3%; margin-right: 0;}
	.dentist > li {text-align: center; width: 100%; }
	.dentist .name {display: block;}
	.dentist .name h5 {border-bottom: 0;}
	.dentist .name > p {border-bottom: 0;}

	.thesis li{flex:1;}
	.thesis:not(:first-child){margin-top: 0;}
	
	/* =========== info-time ======== */
	.info-time {background: #fff;}
	.info-time ul {display: block;}
	.info-time ul li img {width: 70%;}
	.info-time ul li:last-child {margin-left: 0; margin-top: 5%;}
	.info-time h6 {font-size: 18px;}

	/* ========= info-map ========= */
	.info-map ul {display: block; margin: 0 auto;}
	.info-map ul li {/* background-size: 10%; */ background-position: left center; padding-left: 0%;}
	.info-map ul li:first-child {border-bottom: 1px solid #ddd; border-right: none;}

	/* ============= imp-navigation ============ */
	.navi h5 {padding: 1% 0; display: block; width: 100%; max-width: 600px;}
	.navi h5::before, .navi h5::after {font-size: 50px; height: 40px; position: relative; width: 100%; display: block; top: 0;}
	.navi h5::after {margin-top: 1%;}

	/* ============= imp-insurance ============= */
	.insurance-box {padding: 4%;}
	.insurance-box .point li h1 {font-size: 70px;}
	.insurance-box .info::before {width: 10px;}

	/* ========= trans-clippy ========== */
	.trans-clippy {display: block; text-align: center;}
	.trans-clippy > li:first-child {margin-right: 0;}
	.trans-clippy > li > p {margin-top: 3%;}
	.trans-clippy ul {margin: 3% auto 0;}

	/* =========== aesthetic =========== */
	.ae-box li:last-child {max-width: 425px; margin: 0 auto !important; text-align: left;}
	.ae-box li:last-child h5 {text-align: center; margin-bottom: 5%;}

	/* invisal */
	.invisal-m{display: block; background: url(../img/sub/special01_02_m.jpg) center/cover no-repeat;}
	.invisal-pc{display: none;}

	/* ========= ortho-age ========== */
	.age-box {display: block; margin: 0 auto; text-align: center;}
	.age-box span{width: 80%;}
	.age-box p{margin: 3% -0px;}

	.after p {color: #111; font-size: 12px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; white-space: pre-line;		}
	.after b{font-size: 16px;}
	.after a {display: inline-block; background-color: #000; color: #fff; padding: 4px 80px; margin-top: 6px;}
	

	/* 탭메뉴 */
	.tabArea > div{width: 20%; margin-bottom: -1px;}


	/* 밑에 화살표가 달려있는 박스 */
	.arrow-title{margin-bottom: 10%; font-size: 24px;}
	.arrow-title:before{border: 12px solid #d7e1f0; bottom: -12px;}


	.tab-wrap label {display: block;font-size: 15px;padding: 10px 0;}
	.tab-wrap .tab-content > ul > li {width: 100%;}
	.tab-wrap .tab-content > ul > li {text-align: center;}
	.tab-wrap .tab-content > ul > li img{max-width: 70%;}
	.tab-wrap .tab-content .disc-list{text-align: left; display: inline-block; padding: 0 10px;}
	.tab-wrap .tab-content > ul { display: block;background: none;}
	.disc-list {list-style-type: none !important; margin-left: 0% !important;}
	.disc-list li:before { content: 'ㆍ ';}

	.tab-wrap .tab-content .tab-name p:last-of-type{padding-bottom: 3%; margin-left: 0; padding-left: 0; border: 0;}
	.tab-wrap .tab-content .tab-name{display: block; padding-bottom: 0;}
	.tab-wrap .tab-content > ul > li:last-child{margin-left: 0;}

	.col-3 {
		display: flex !important;
	}

	.ortho-title span{font-size: 22px !important; top: -14px;}

	.m_br{display: block;}

		/* 합쳐지는 원 */
	.circle-plus{text-align: center; flex-wrap:wrap; width: 50%; margin: 0 auto;}
	.circle-plus li:nth-child(odd){flex: inherit; width: 100% !important; padding-top: 100% !important; margin: 0 auto;}
	.circle-plus li:nth-child(1){transform:translateX(0); transform:translateY(35%);}
	.circle-plus li:nth-child(5){transform:translateX(0); transform:translateY(-35%);}
	.circle-plus li:nth-child(odd) div{top: 0; position: absolute; bottom: 0; left: 10%; right: 10%;  display: inline-flex; justify-content: center;align-items: center; text-align: center}
	.circle-plus li:nth-child(even){position: relative; width: 100%;}
	.circle-plus li p{font-size: 24px; font-weight: 500;}
	.circle-plus li:nth-child(2){right: auto; transform:translateY(8vw)}
	.circle-plus li:nth-child(4){right: auto; transform:translateY(-8vw)}

	.arrow-area{justify-content:center;}
	.arrow-6-wrap{position: relative;left: 50%;transform: translateX(-50%);}

	.BA-arrow-area{padding-bottom: 5%;}
	.BA-arrow-area .inner{padding: 0 35px;}
	.BA-arrow{max-width: 400px;margin: 0 auto;}
	.BA-arrow li{/* right: -20px; */ flex:none; margin: 20px 0; width: 100%;}
	.BA-arrow li img{width: 80%; margin: 0 auto;}
	.BA-arrow li:before{bottom: 50%; left: -12px; transform:translateY(50%);}
	.BA-arrow li:after{bottom: auto; left: -3px; width: 20px; height: 150%;}
	.BA-arrow li:first-child:before{bottom: 50%; left: -30px;}
	.BA-arrow li:nth-last-child(2):after{width: 20px; height: 170%;}
	.BA-arrow li:last-child:after{bottom: 40%; left: -33px; transform: translateY(65%);border-bottom: 50px solid transparent;
	border-top: 50px solid #d4eef9;border-left: 30px solid transparent;border-right: 30px solid transparent;}
	.BA-arrow li:first-child:after{left: -3px; bottom: -100%; width: 20px; height: 120%; bottom: -75%;}
	.BA-arrow h5{display: none;}
	.BA-arrow p{padding: 10px 25px; border: 1px solid #333; background-color: rgba(255,255,255, 0.9); z-index: 9; border-radius: 20px; bottom: -25px; transform: translateX(-40%);}

	.after-arrow-box li:not(:last-child):after{right: -30px;}

	.hashtag{flex-wrap: wrap;}
	.hashtag li{width: 50%; margin: 10px 20px;}

	.case-area{width: 100%;}
	
	.case-img img{width: 80%;}
	
}

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

	.special-title{font-size: 16px;}

	.num::before {font-size: 1.2em; width: 30px; height: 30px; margin: 3% auto 0;}
	.num-list{padding-top: 10px;}
	.num-list .num {height: 40px; display: flex; align-items: center;}
	.num-list .num::before {font-size: 1.2em; width: 25px; height: 25px; margin: 0 auto; display: block;}

	.tabArea > div{width: 50%; }
	.col-3.caries_type li{width: 60%;}

	.bg-title2{font-size: 16px; padding: 3% 4%; margin-bottom: 20px;}
	.bg-title3{font-size: 16px; padding: 3% 4%; margin-bottom: 20px;}
	
	/* ============= common ============= */

	.col-3 li{display: block !important;}
	.col-3 li, .col-3 li:first-child, .col-3 li:nth-child(4), .col-3 li:nth-child(7) {max-width: 425px; margin: 0 auto 6%; width: 60%;}
	.col-3 li.circle-box{width: calc(33.3% - 2%);}
	.m-col-3 li{width: calc(33.3% - 2%) !important; margin-top: 3% !important;}

	.col-2 {display: block;}
	.col-2 li {width: 100%; margin-left: 0;}
	.col-5 li {width: calc(50% - 2%); margin-left: 0;}
	.col-5 li:nth-child(2), .col-5 li:nth-child(4), .col-5 li:nth-child(6), .col-5 li:nth-child(8), .col-5 li:nth-child(10), .col-5 li:nth-child(12), .col-5 li:nth-child(14) {margin-left: 2%;}
	.col-2 li:nth-child(2), .col-5 li:nth-child(3), .col-5 li:nth-child(4), .col-5 li:nth-child(5) {margin-top: 3%;}
	.col-2 li p, .col-5 li p {white-space: pre-line;}
	.col-2 li p br, .col-5 li p br {display: none;}

	.basic-box li img {border-radius: 10px; max-width: 70%;}
	.special-circle li img{max-width: 40%;}
	.circle-box h5{font-size: 15px;}
	.circle-box p{font-size: 11px;}
	.circle-box span{font-size: 15px;}
	.col-3 .circle-box{margin-top: 0 !important;}

	.line-box li::after {width: 5px;}
	.line-box li h5 {margin: 0 0 2% 0;}
	
	.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 12px;}
	.table-wrap table {min-width: 500px;}
	.photo-table table {font-size: 12px;}

	.circle-num li h5{font-size: 15px;}
	.radius-arrow-box li:not(:last-child):after{font-size: 20px; bottom: -22px;}

	/* before after 화살표 */
/* 	.after-arrow-box{padding: 0;}
	.after-arrow-box li{flex:none;}
	.after-arrow-box li:not(:last-child):after{content:'▼'; right: 50%; top:auto; bottom: -30px; transform:translate(50%, 0);} */

	/* =========== info-time ======== */
	.info-time h5 img {max-width: 35px;}
	
	/* ========= info-map ========= */
	.info-map .wrap_map {height: 250px !important;}
	.info-map ul li p{font-size: 14px;}
	.info-map ul li {background-size: 20% !important;}
	

	/* =========== imp-navigation, imp-insurance =========== */
	.navi h5::before, .navi h5::after {font-size: 35px; height: 25px;}

	.insurance-box {padding: 4%; background: #fff; border: none;}
	.insurance-box .point li h1 {font-size: 50px;}
	.insurance-box .info::before {width: 5px;}
	.insurance-box > p {white-space: pre-line;}
	.insurance-box > p br {display: none;}

	/* ========= ortho-retainer ========== */
	.retainer li h5:last-of-type::before {width: 20px;}

	.arrow-title{margin-bottom: 10%; font-size: 20px;}
	.arrow-title:before{border: 8px solid #d7e1f0; bottom: -8px;}

	.ortho-title span{font-size: 16px !important; top: -8px !important;}
	img.platinum{max-width: 50%;}
	.buttonArea a{font-size: 14px; padding: 6px 16px;}

	.col-2.line-box{display: flex; justify-content: space-between;}
	.col-2.line-box li{margin-top: 0; width: 48%;}

	.col-2.before-after {display: flex; justify-content: space-between;}
	.col-2.before-after li {width: calc(50% - 2%); margin-top: 0;}

	.tab-wrap .tab-content ul ul li{font-size: 14px;}

	.eq-icon li{flex:none; width: calc(33.3% - 2%);}
	.eq-icon li:nth-child(4) div{border: 0;}

	.hashtag li{width: 100%; margin: 5px 20px; font-size: 14px; padding: 6px 0;}

	.prog-bar{width: 60%;}

	.about-bg1{background: none;}
}