@charset "utf-8";

/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */

.stick ul.flex li h6{background: #2c4a68; color: #fff; padding: 10px;  font-weight: 700; transform: skew(-0.1deg);}
.stick ul.flex li:nth-child(2n) h6{background: #006a65;}

.main-slide .swiper-slide .img {width: 100%; height: calc(var(--vh, 1vh) * 100 - 55px);}
.main-slide .slide1 .zoom {background: url(../img/main/slide_01.png) center/cover no-repeat;}
.main-slide .slide2 .zoom {background: url(../img/main/slide_02.png) center/cover no-repeat;}
.main-slide .slide3 .zoom {background: url(../img/main/slide_03.png) right/cover no-repeat;}
.main-slide .slide4 .zoom {background: url(../img/main/slide_04.png) center/cover no-repeat;}
.main-slide .slide5 .zoom {background: url(../img/main/slide_05.png) right/cover no-repeat;}
.main-slide .swiper-slide .tit{filter: drop-shadow(2px 4px 6px black);}
.main-slide .swiper-slide .txt {position: absolute; white-space: pre-line; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100%; color: #fff;}
.main-slide .swiper-slide .txt article {position: relative; top: 40px; text-align: center; opacity: 0; transition: all 1s ease-in-out; }
.main-slide .swiper-slide-active .txt article {top: 0; opacity: 1;}
.main-slide .swiper-slide .txt .logo {margin-bottom: 50px;}
.main-slide .swiper-slide .txt .tit {font-weight: 700;}
.main-slide .swiper-slide .txt .sub {white-space: pre-line; letter-spacing: 0.05em;}
.main-slide .swiper-scrollbar.main-slide-scroll {left: 50%; width: 75%; background: rgba(255,255,255,0.4); transform: translateX(-50%); bottom: 80px;}
.main-slide .swiper-scrollbar.main-slide-scroll .swiper-scrollbar-drag {background: #fff;}

/* 타이틀 밑 바 스타일 */
.bar {margin: 0 auto;width: 30px;height: 4px;background: #c3a983;}
.bar.left {margin: 0;}

/* 숫자 스타일 */
.num::before {content: attr(data-num); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px;  background: linear-gradient(to right, #5b7f9d, #152e4c); color: #fff; font-size: 24px; font-weight: 500; text-align: center;}
.num.num-posa::before {position: absolute; margin: 0;}


/* 미들 타이틀 (작은 타이틀) */
.middle-title { text-align: center; margin-bottom: 40px;} 
.middle-title p {font-weight: 400; white-space: pre-line; margin-top: 20px;}
.middle-title h3,
.middle-title h4 {line-height: 1.4; font-weight: 900; white-space: pre-line;}
.middle-title h5,
.middle-title h6 {font-weight: 700; white-space: pre-line;}
.middle-title > span.num::before { font-weight: 400; margin: 0 auto 20px;} 


/* 테이블 스타일 */
.table-wrap {text-align: center;}
.table-wrap .middle-title h4 {display: inline-block; padding: 12px 20px 8px; background-color: #2c4a68; color: #fff;}
.table-wrap table {width: 100%; white-space: pre-line;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 18px; padding: 15px 10px; border: 1px solid #eee; vertical-align: middle;}
.table-wrap table thead tr, .table-wrap table tbody tr th {background: #f5f5f5; font-weight: 600;}
.table-wrap .imp-icon img{max-width: 50px; margin-bottom: 10px;}


/* 사진 들어간 테이블 */
.photo-table table {text-align: center; width: 100%;}
.photo-table table tr, .photo-table table tr td {padding: 15px 10px; border: 1px solid #ccc; vertical-align: middle;}
.photo-table table td {white-space: pre-line;}
.photo-table table thead tr:first-of-type td, .photo-table table thead tr {border: none;}
.photo-table table thead tr:first-of-type td {padding: 0;}
.photo-table table thead tr:last-of-type td {background: #2c4a68; color: #fff; font-weight: 600; font-size: 20px;}
.photo-table table thead tr:first-of-type td:not(:first-child) {border: 1px solid #ccc; border-bottom: none;}


/* 숫자 리스트 */
.num-list .num {position: relative; margin-bottom: 30px; padding-left: 50px; text-align: left; /* display: flex; align-items: center; */}
.num-list .num:last-child {margin-bottom: 0;}
.num-list .num::before {position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0px; width: 35px; height: 35px; font-size: 20px;}
.num-list .num:nth-child(2n)::before {background-color: #00635e;}
.num-list.middle .num::before {top: 50%; transform: translateY(-50%);}


/* 이미지 테두리 리스트 */
.line-list img {border: 1px solid #ccc;}


/* 원형 이미지 테두리 리스트 */
.circle-list img {border-radius: 50%; border: 1px solid #ccc;}

/* 파란 선 들어간 네모 박스 */
.line-box li > div {position: relative; padding: 30px 20px 30px 30px; border: 1px solid #eee;}
.line-box li > div::after {content: ''; display: block; width: 10px; height: 100%; position: absolute; left: 0; top: 0; background-color: #2c4a68;}
.line-box h5 {margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-weight: 500;}
.line-box p {white-space: pre-line;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {display: flex; align-items: center; justify-content: flex-start; margin-top: 40px;}
.basic-box:first-of-type {margin-top: 0;}
.basic-box li:first-child {flex: 1;}
.basic-box li:last-child {margin-left: 40px; flex: 1;}
.basic-box li h4,
.basic-box li h5 {margin: 0 0 15px; font-weight: 800; white-space: pre-line;  line-height: 1.4;}
.basic-box li.num h4,
.basic-box li.num h5 {margin: 20px 0 15px;}
.basic-box li p {white-space: pre-line;}
.basic-box.line li h4,
.basic-box.line li h5 {position: relative; padding-bottom: 10px;}
.basic-box.line li h4::before,
.basic-box.line li h5::before {position: absolute; content: ''; left: 0; bottom: 0; width: 50px; height: 2px; background: linear-gradient(to right, #1f9e9c, #8ab142);}


/* 원 안에 아이콘 없는 박스 */
.circle-box > div > div {border-radius: 50%; background-color: #f5f5f5;}
.circle-box:nth-child(2n-1) > div > div {background-color: #ebf4f2;}
.circle-box > div > div::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-icon > li > div > div {border-radius: 50%; border: 2px solid #f5f5f5; width: 100%; height: 100%;}
.circle-icon > li:nth-child(2n-1) > div > div {border: 2px solid #d9dfee;}
.circle-icon > li > div > div::after {content: ''; display: block; padding-bottom: 100%;}
.circle-icon > li > div > div > div {position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 50%; transform: translate(-50%, -50%); left: 50%; height: 50%; width: 100%;}
.circle-icon p {margin-top: 15px; line-height: 1.4;}


/* 배경색 타이틀 */
.bg-tit {display: inline-block; padding: 6px 32px; margin: 0 auto 40px; border-radius: 40px; background: #00a99e; color: #fff;  font-weight: 700;}


/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {display: inline-block; padding: 8px 42px; margin: 0 auto; border-radius: 40px; background: linear-gradient(to right, #1f3d74, #4067aa); color: #fff;}


/* 자세히 보기 버튼 */
.detail-btn a {position: relative; display: inline-block; margin-top: 20px; padding: 12px 30px; border: 1px solid #333; font-size: 15px; font-weight: 700; transition: 0.4s ease-in-out;}
.detail-btn a::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #327cbd; transition: 0.4s ease-in-out; z-index: -1;}
.detail-btn a:hover::before {width: 100%;}
.detail-btn a:hover {color: #fff; border: 1px solid #327cbd;}

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

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
/* #wrapper {margin-top: 69px;} */

.main-slide .swiper-slide .img {height: 700px;}
.main-slide .swiper-slide .txt article {padding: 0 20px;}

}

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

}
/* ===================== Mobile size : 901px~ ======================= */

@media screen and (min-width:901px){
.main-slide .swiper-button-next {color: #fff; font-size: 65px; right: 30px; width: 50px; height: 100px;  background: rgba(255,255,255,0.1);}
.main-slide .swiper-button-prev {color: #fff; font-size: 65px; left: 30px; width: 50px; height: 100px; background: rgba(255,255,255,0.1);}

}

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width:900px){
.main-slide .swiper-button-next {color: #fff; }
.main-slide .swiper-button-prev {color: #fff; }



/* 테이블 스타일 */
.table-wrap .table-scroll {overflow-x: scroll; overflow-y: hidden; max-width: 100%;}
.table-scroll::-webkit-scrollbar {width: 12px;}
.table-scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border-radius: 5px; background-color: rgba(220, 220, 220, 0.3);}
.table-scroll::-webkit-scrollbar-thumb {background-clip: padding-box; border-radius: 5px; background-color: #516371; border: 2px solid transparent;}
.table-wrap table {min-width: 900px;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 15px;}

}


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

.res-bg{padding: 80px 0 !important;}

/* 숫자 스타일 */
.num::before {margin: 10px auto 0;}
.num-list .num::before {margin: 0 10px 0 0;}


/* 사진 들어간 테이블 */
.photo-table table td {font-size: 15px;}
.photo-table table thead tr:last-of-type td {font-size: 18px;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {display: block; text-align: center;}
.basic-box:not(:first-of-type) {margin-top: 40px;}
.basic-box li:last-child {margin-left: 0; margin-top: 20px;}
.basic-box li h4,
.basic-box li h5 {margin: 20px 0 10px;}
.basic-box li.num h4,
.basic-box li.num h5 {margin: 10px 0 15px;}
.basic-box li img {max-width: 500px; width: 100%;}
.basic-box.line li h4::before,
.basic-box.line li h5::before {left: 50%; transform: translateX(-50%);}


/* 파란 선 들어간 네모 박스 */
.line-box li::after {width: 8px;}
.line-box li > div {height: auto !important;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.main-slide .slide1 .zoom {background: url(../img/main/m_slide_01.png) center/cover no-repeat;}
.main-slide .swiper-slide .img {height: 350px;}
.main-slide .swiper-slide .txt .logo {max-width: 200px; margin: 0 auto 20px;}
.main-slide .swiper-scrollbar.main-slide-scroll {bottom: 20px;}
}

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

.link {top: -60px;}
.res-bg{padding: 50px 0 !important;}
.stick .flex > li > div.m10{margin: 5px;}
.title-num{font-size: 20px; width: 45px; height: 45px;}


/* 숫자 스타일 */
.num::before {width: 40px; height: 40px; font-size: 17px; margin: 0 auto;}
.num-list .num {display: flex; align-items: center; margin-bottom: 0; padding-left: 40px;}
.num-list .num:not(:first-child) {margin-top: 20px;}
.num-list .num::before {width: 30px; height: 30px; margin: 0 auto; font-size: 16px;}


/* 미들 타이틀 (작은 타이틀) */
.middle-title{margin-bottom: 20px;}
.middle-title p{margin-top: 10px;}
.middle-title > span.num::before {margin: 0 auto 10px;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box li:last-child {margin-top: 15px;}
.basic-box li img {max-width: 70%;}
.basic-box li h4,
.basic-box li h5 {margin: 15px 0 10px; line-height: 1.4;}
.basic-box li.num h4,
.basic-box li.num h5 {margin: 10px 0;}


/* 원 안에 아이콘 없는 박스 */
.circle-box > div {margin: 5px !important;}
.circle-box h5 {font-size: 15px;}


/* 파란 선 들어간 네모 박스 */
.line-box li::after {width: 5px;}
.line-box li > div {padding: 25px 20px 30px 25px;}
.line-box li h5 {padding-bottom: 5px; margin-bottom: 10px;}


/* 테이블 스타일 */
.table-wrap table {min-width: 700px;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 12px;}
.table-wrap .imp-icon img{max-width: 30px; margin-bottom: 5px;}


/* 사진 들어간 테이블 */
.photo-table table td {font-size: 12px;}
.photo-table table tr, .photo-table table tr td {padding: 10px 5px;}
.photo-table table thead tr:last-of-type td {font-size: 15px;}


/* 배경색 타이틀 */
.bg-tit {padding: 3px 24px; margin: 0 auto 20px;}


/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {padding: 6px 32px;}
}

/* ===================== Mobile size : 380px ======================= */

@media screen and (max-width:380px){
.main-slide .swiper-slide .txt .logo {max-width: 160px;}

}

/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */

/* =================================================================================================================================== */
/* =========================================================== main-common =========================================================== */
/* =================================================================================================================================== */

main {position: relative; overflow: hidden;}
.swiper-container{position: relative; width: 100%; margin: 0 auto;}
.swiper-button-prev, .swiper-button-next {margin: 0;}
.link {position: absolute; left: 0; top: -120px;}




@-webkit-keyframes fadeIn50 {
    0% {opacity: 0;}
    to {opacity: 0.5;}
}
@keyframes fadeIn50 {
    0% {opacity: 0;}
    to {opacity: 0.5;}
}



#gallery .swiper-container {width: 100%; margin: 0 auto;}
#gallery .swiper-slide-container {height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
#gallery .swiper-button-prev, #gallery .swiper-button-next {color: #fff; top: 50%; transform: translateY(-50%);}
.gallery-top {height: 80%; width: 100%;}
.gallery-thumbs {height: 20%; padding: 10px 0;}
.gallery-thumbs .swiper-slide {width: 20%; height: 100%; opacity: 0.4;}
.gallery-thumbs .swiper-slide-thumb-active {opacity: 1;}

/* 탭 메뉴 스타일 */
.dentist {background: #fff;position: relative;}
.dentist .tab-btn {display: flex; margin: 20px 0 40px;}
.dentist .tab-btn input {display: none;}
.dentist .tab-btn label {display: inline-block; padding: 15px 25px; text-align: center; border: 1px solid #ccc; color: #bbb; background-color: #fff;}
.dentist .tab-btn label:hover {color: #7fcef4; cursor: pointer; transition: all ease 0.3s;}
.dentist .tab-btn input:checked + label {color: #fff; background-color: #111; transition: all ease 0.3s;}

/* 탭 메뉴 내용 스타일 */
.dentist .tab-content {}
/* #tab-content2, #tab-content3, #tab-content4, #tab-content5 {display: none;} */
.dentist .tab-content > ul {display: flex; width: 100%;align-items:center;}
.dentist .tab-content > ul > li {width: 40%; position: relative;}
.dentist .tab-content > ul > li:last-child {width: 60%;margin-left: 30px;}
.dentist .tab-content .tab-name {border-bottom: 2px dotted #ddd; margin-bottom: 20px; padding-bottom: 20px;}
.dentist .tab-content .tab-name > div {display:flex; align-items:center; margin-bottom: 10px;}
.dentist .tab-content .tab-name > div h3 {font-weight: 500;}
.dentist .tab-content .tab-name > div span {padding: 0 5px; font-size: 0.5em; font-weight: 500; color: #000;}
.dentist .tab-content .tab-name p {font-weight: 700;}
.dentist .tab-content .disc-list {list-style-type: disc; margin-left: 20px;  background: url(../img/main/bg_logo.png) no-repeat; background-position: right bottom; background-size: auto;}
.dentist .tab-content .disc-list li {line-height: 1.8;  font-family: 'Noto Sans KR',san-serif; font-weight: 500;}

.thesis{background: #189999;}
.thesis-txt{counter-reset: number 0;}
.thesis-txt p{position: relative;color: #fff;padding-left: 30px;}

.number_item::before {
	position: absolute;
	top:0;left: 0;margin-left: 0;
  counter-increment: number 1;
  content: counter(number) ') ';
}
.thesis-box{display: flex;align-items: center;gap:10px;}

.case-slide-wrap {position: relative;}
.case-button-next,
.case-button-prev {top: 50%; transform: translateY(-50%); color: #727272; margin-top: 0;}
.case-button-next {right: -50px;}
.case-button-prev {left: -50px;}
.case-pagination {bottom: -40px !important;}
.case-pagination .swiper-pagination-bullet {width: 10px; height: 10px; background: #fff; opacity: 0.8; transition: all 0.5s ease-in-out; border: 1px solid #eee;}
.case-pagination .swiper-pagination-bullet-active { width: 25px; border-radius: 5px; background: #6b8d74;}

.main-tit {position: relative; text-align: center; margin-bottom: 40px;}

.main-tit.white {color: #fff;}
.main-tit .sub {font-size: 22px; margin-bottom: 15px; font-weight: bold; color: #6b8d74;}
.main-tit .main {font-size: 50px; white-space: pre-line; line-height: 1.3;font-family: "GmarketSansMedium";}
.main-tit .des {margin-top: 20px; white-space: pre-line;}


/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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

.popup-content {width: calc(100% - 20px);}

.case-slide-wrap {margin: 120px auto 0; padding-bottom: 50px;}
.case-pagination {bottom: 0 !important;}

.case-button-next,
.case-button-prev {top: -75px; transform: none; transition: all 0.3s ease-in-out;}
.case-button-next {right: 20px;}
.case-button-prev {left: auto;right: 90px;}
.case-button-next::after,
.case-button-prev::after {font-size: 35px;}
.case-button-next::before,
.case-button-prev::before {position: absolute;	content: ""; width: 55px; height: 55px; border: 1px solid; left: 50%; top: 50%; transform: translate(-50%, -50%);}
}


/* ===================== Mobile size : 1024px ======================= */

@media screen and (max-width: 1024px){
.dentist .tab-content > ul {background-size: 30%;}

.main-tit .main {font-size: 42px;}
}

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width: 900px){
.case-comparison .case-num {width: 60px; height: 60px;}
.case-comparison .case-num p {font-size: 14px; line-height: 1.3;}
}

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){
.case-comparison > li:last-child {margin-top: 40px;}

.dentist .tab-btn {margin: 20px auto 40px; flex-direction: column; max-width: 350px;}
.dentist .tab-btn label {padding: 8px 15px;}
.dentist .tab-content .tab-name > div{display: block;}
.dentist .tab-content img {max-width: 250px; width: 100%;}
.dentist .tab-content > ul {display: block; background: none;}
.dentist .tab-content > ul > li {width: 100%; text-align: center;}
.dentist .tab-content > ul > li:last-child{width: 100%;margin: 20px 0 0 0;}
.dentist .tab-content .disc-list {display: flex; flex-direction: column; align-items: flex-start; max-width: 400px; text-align: left;}

.case-button-next {right: 15px;}
.case-button-prev {right: 80px;}
.case-button-next::after,
.case-button-prev::after {font-size: 30px;}
.case-button-next::before,
.case-button-prev::before {width: 50px; height: 50px;}

.main-tit .sub {font-size: 20px; margin-bottom: 10px;}
.main-tit.tal{text-align: center !important;}
}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {
#gallery .swiper-button-prev:after,
#gallery .swiper-button-next:after {font-size: 30px;}

.popup-content {padding: 50px 10px 40px 15px;}

.main-tit .main {font-size: 36px;}
.main-tit .sub {font-size: 19px; margin-bottom: 8px;}
}

/* ===================== Mobile size : 480px ======================= */

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

.case-slider {padding: 0 10px;}
.case-slider .txt {font-size: 14px;}
.case-slider .prog-bar {width: 70%;}
.case-comparison > li:last-child {margin-top: 20px;}

.dentist .tab-btn {margin: 10px auto 30px;}
.dentist .tab-content .tab-name > div h3 {font-size: 32px;}
.dentist .tab-content .tab-name p {font-size: 14px;}
.dentist .tab-content .disc-list {max-width: 100%;}
.dentist .tab-content .disc-list li {font-size: 14px;}
.dentist .tab-content img {max-width: 250px;}

.case-slide-wrap {margin: 80px auto 0;}
.case-button-next,
.case-button-prev {top: -65px;}
.case-button-next {right: 10px;}
.case-button-prev {right: 60px;}
.case-button-next::after,
.case-button-prev::after {font-size: 20px;}
.case-button-next::before,
.case-button-prev::before {width: 40px; height: 40px;}

.main-tit {margin-bottom: 20px;}
.main-tit .main {font-size: 32px;}
.main-tit .sub {font-size: 18px;}
.main-tit .des {margin-top: 10px;}
}

/* ===================== Mobile size : 380px ======================= */

@media screen and (max-width: 380px){
.main-tit .main {font-size: 26px;}
.main-tit .sub {font-size: 16px;}
}


/* =================================================================================================================================== */
/* =========================================================== main-common =========================================================== */
/* =================================================================================================================================== */


/* ==================================================================================================================================== */
/* =========================================================== 메인 슬라이드 영역 =========================================================== */
/* ==================================================================================================================================== */

.main-slide .swiper-slide {position: relative;}
.main-slide .swiper-slide img {width: 100%;}

.main-slide .swiper-pagination {left: 0; bottom: 40px; top: auto !important; width: 100%;}
.main-slide .swiper-pagination-bullet {margin: 0 4px; width: 14px; height: 14px; background: none; border: 1px solid #ccc; opacity: 0.7; transition: all 0.4s ease-in-out;}
.main-slide .swiper-pagination-bullet-active {background: #fff; opacity: 1;}

/* ===================== Mobile size : 1400px ======================= */

@media screen and (max-width: 1400px){
.main-slide .swiper-pagination {bottom: 30px;}
}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

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

}

/* ===================== Mobile size : 769px ======================= */

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

/* ===================== Mobile size : 600px ======================= */

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

}

/* ===================== Mobile size : 480px ======================= */

@media screen and (max-width: 480px){
.main-slide .swiper-pagination {bottom: 10px;}
.main-slide .swiper-pagination-bullet {width: 8px; height: 8px;}
}


/* ==================================================================================================================================== */
/* =========================================================== 메인 슬라이드 영역 =========================================================== */
/* ==================================================================================================================================== */


/* ==================================================================================================================================== */
/* ============================================================ area1 스타일 ============================================================ */
/* ==================================================================================================================================== */


.area1 .name{text-align: right;}
.area1-1::before {position: absolute; content: ''; left: -120px; bottom: -50px; width: 540px; height: 558px; background: url(../img/main/main_bg6.png) center/cover no-repeat;}
.area1-1::after {position: absolute; content: ''; right: -30px; bottom: -50px; width: 400px; height: 271px; background: url(../img/main/bg_logo.png) center/cover no-repeat;}
.area1-1 .middle-title span {font-weight: 900;}
.area1-1 .img {position: relative;}
.area1-1 .sign {margin-top: 60px;}
.area1-1 .sign > ul.flex {justify-content: center; align-items: flex-end;}
.area1-1 .sign > ul.flex ul {align-items: flex-end;}
.area1-1 .sign > ul.flex > li:last-child ul {justify-content: flex-end;}

/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

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

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){
.area1 .name{text-align: center;margin-top: 20px;}
.area1-1 .sign {margin-top: 40px;}
.area1-1 .sign img {max-width: 100px;}
.area1-1 .sign > ul.flex ul {justify-content: center;}
.area1-1 .sign > ul.flex > li:last-child ul {justify-content: center;}

}

/* ===================== Mobile size : 600px ======================= */

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

/* ===================== Mobile size : 425px ======================= */

@media screen and (max-width: 425px){
.implant01 ul li > div > img:first-child{width: 50px;height: auto;}

.area1-1 .img::before {width: 50px;height: 50px;top: -20px;}
.area1-1 .img::after {width: 90px; height: 90px;}
.area1-1 .sign {margin-top: 20px;} 

}


/* ===================== Mobile size : 380px ======================= */

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

}


/* ==================================================================================================================================== */
/* ============================================================ area1 스타일 ============================================================ */
/* ==================================================================================================================================== */


/* ==================================================================================================================================== */
/* ============================================================ area2 스타일 ============================================================ */
/* ==================================================================================================================================== */

.area2.dentist .tab-content > ul > li > img {width: 100%;}
.area2.dentist .tab-content > ul > li:last-child {margin-left: 60px;}

.doctor_day{display: flex;gap:10px;}
.doctor_day li{width: calc(16.6% - 10px);}
.doctor_day li b{display: block;font-size: 24px;font-weight: 700;color: #fff;padding: 25px;text-align: center;background: #737373;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}
.doctor_day li.on b{background: #714c13;}
.doctor_day li.on span{color: #714c13;}
.doctor_day li span{display: block;font-size: 20px;color: #737373;font-weight: 700;text-align: center;}
.dentist-modal {position: fixed; display: flex; align-items: center; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition: all 0.3s ease-in-out; z-index: -1; opacity: 0;}
.dentist-modal.on {z-index: 1000000; opacity: 1;}
.dentist-modal > div {position: relative; width: 100%; max-width: 1200px; margin: 0 auto; background: #fff;}
.dentist-modal > div ul.flex > li > div {display: flex; align-items: center; justify-content: center;}

.dentist-modal .close {position: absolute; top: -25px; right: -25px; width: 50px; height: 50px; border-radius: 50%; background: #154545; cursor: pointer;}
.dentist-modal .close::before {position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 2px; height: 35px; background: #fff;}
.dentist-modal .close::after {position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 2px; height: 35px; background: #fff;}

/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

@media screen and (max-width: 1200px){
.area2 ul.flex > li {width: 50%;}

.dentist-modal .close {left: 50%; right: auto; transform: translateX(-50%);}
}


/* ===================== Mobile size : 1024px ======================= */

@media screen and (max-width: 1024px){
.tab-content .flex{display: block;}
.tab-content .block-2{width: 100%;}

.doctor_day li b{font-size: 18px;padding: 10px;font-weight: 500;}
.doctor_day li span{font-size: 15px;}

}

/* ===================== Mobile size : 900px ======================= */

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


}

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){
.dentist:before{display: none;}
.area2.dentist .tab-content > ul > li:last-child {margin-left: 0;}
.area2.dentist .tab-content .tab-name {padding-bottom: 10px;}
.area2.dentist .tab-content:last-of-type > ul {display: flex; flex-direction: column-reverse;}


.area2.dentist .tab-content:last-of-type > ul > li:last-child {background: #fff;border: 1px solid #eee;margin: 0 0 20px 0;}

.area2 ul.flex > li {width: 25%;}
.area2 ul.flex img {width: auto; max-width: none;}


.dentist-modal > div {max-width: 500px;}
.dentist-modal > div ul.flex > li:last-child > div {padding: 30px 20px;}


}

/* ===================== Mobile size : 600px ======================= */

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

}

/* ===================== Mobile size : 425px ======================= */

@media screen and (max-width: 425px){
.area2.dentist .tab-content .tab-name {padding-bottom: 5px;} 
.area2 ul.flex > li > div {margin: 10px;}
.area2 ul.flex img {width: 100%;}


.dentist-modal > div {width: 100%;}

.doctor_day{margin-bottom: 50px;}
.doctor_day li b{font-size: 15px;padding: 5px;font-weight: 500;}
.doctor_day li span{font-size: 13px;}
}
/* ===================== Mobile size : 325px ======================= */

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

.doctor_day{margin-bottom: 30px;gap:5px;}
.doctor_day li{width: calc(16.6% - 5px);}
.doctor_day li b{font-size: 13px;padding: 5px;font-weight: 500;}
.doctor_day li span{font-size: 11px;}

}

/* ==================================================================================================================================== */
/* ============================================================ area2 스타일 ============================================================ */
/* ==================================================================================================================================== */



/* ==================================================================================================================================== */
/* ============================================================ area3 스타일 ============================================================ */
/* ==================================================================================================================================== */

.area3 .bg-animation {background: url(../img/custom/bg1.png) center/cover no-repeat;}

.area3 .content-box ul {display: flex; gap: 15px;}
.area3 .content-box ul > li {position: relative; flex: 1; transition: all 0.6s ease-in-out;}
.area3 .content-box ul > li:hover {flex: 2;}
.area3 .content-box ul > li.unselected {filter: brightness(0.5);}
.area3 .content-box ul > li > div {display: flex; flex-direction: column; gap: 20px; justify-content: flex-end; padding: 0 10px 40px 20px; text-align: center;color: #fff; width: 100%; height: 482px; border-radius: 50px; overflow: hidden; background: url(../img/custom/treatment_01.jpg) center/cover no-repeat;}
.area3 .content-box ul > li:nth-child(2) > div {background: url(../img/custom/treatment_02.jpg) center/cover no-repeat;}
.area3 .content-box ul > li:nth-child(3) > div {background: url(../img/custom/treatment_03.jpg) center/cover no-repeat;}
.area3 .content-box ul > li:nth-child(4) > div {background: url(../img/custom/treatment_04.jpg) center/cover no-repeat;}
.area3 .content-box ul > li:nth-child(5) > div {background: url(../img/custom/treatment_05.jpg) center/cover no-repeat;}
.area3 .content-box ul > li.unselected > div > * {opacity: 0;}
.area3 .content-box ul > li > div h5 {white-space: pre-line; font-weight: bold;  transition: all 0.4s ease-in-out;}
.area3 .content-box ul > li > div h5 span {font-size: 22px;}
.area3 .content-box ul > li > div p {max-height: 0; overflow: hidden; white-space: pre-line; transition: all 0.2s ease-in-out;}
.area3 .content-box ul > li.selected > div p {max-height: 100%; transition: all 1s ease-in-out;}


/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width: 900px){
.area3 .content-box ul {flex-wrap: wrap; gap: 8px;}
.area3 .content-box ul > li {width: calc(50% - 5px); flex: none !important;}
.area3 .content-box ul > li:last-child {width: 100%;}
.area3 .content-box ul > li > div {padding: 0 10px 30px 20px;}
}

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){
.area3 .content-header {flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px;}
.area3 .content-header a {width: 180px; height: 40px; font-size: 18px;}
}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {
.area3 .content-box ul > li > div {gap: 15px;}
.area3 .content-box ul > li > div h5 span {font-size: 18px;}

}

/* ===================== Mobile size : 480px ======================= */

@media screen and (max-width: 480px){
.area3 .content-header {margin-bottom: 30px;}

.area3 .content-box ul > li > div {position: relative; height: 300px;text-align: center;}
.area3 .content-box ul > li > div::before {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent);}
.area3 .content-box ul > li > div > * {position: relative;}
.area3 .content-box ul > li > div p {max-height: 100%;}
.area3 .content-box ul > li.unselected {filter: brightness(1);}
.area3 .content-box ul > li.unselected > div > * {opacity: 1;}


}

/* ===================== Mobile size : 380px ======================= */

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

}



/* ==================================================================================================================================== */
/* ============================================================ area3 스타일 ============================================================ */
/* ==================================================================================================================================== */


/* ==================================================================================================================================== */
/* ============================================================ area4 스타일 ============================================================ */
/* ==================================================================================================================================== */

.about-area4{padding: 80px 0;}
.about-area4 ul {position: relative; display: flex; justify-content: flex-start;}
.about-area4 ul > li:last-child {position: absolute; right: 0; bottom: 0;}
.about-area4 ul .txt {display: flex; flex-direction: column; align-items: flex-start;width: 600px;letter-spacing: -1px;padding: 50px; gap: 20px; white-space: pre-line;}
.about-area4 ul .txt h4 {font-weight: 700;}

.num-box{width: 50px;height: 50px;line-height: 50px;text-align: center;background:#3d1e0e;color: #fff;}

.dt-logo-box{display: flex;align-items: center;gap:20px;padding: 20px;border: 1px solid #ccc;}



/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

@media screen and (max-width: 1200px){
.about-area4 ul {flex-direction: column; max-width: 700px; margin: 0 auto;}


.about-area4 ul .bg {display: none;}
.about-area4 ul > li:last-child {position: static;}
.about-area4 ul .txt {padding: 40px 20px; width: auto; border: 1px solid #ccc;}
.about-area4 ul .txt .check {height: auto;}
.about-area5 ul{flex-direction: column-reverse;}
}


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

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

}

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){
.about-area4{padding: 40px 0;}
.about-area4 ul .txt .check {letter-spacing: 0;}
.area4 .dt-logo-box{flex-direction: column;}

}

/* ===================== Mobile size : 600px ======================= */

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

/* ===================== Mobile size : 480px ======================= */

@media screen and (max-width: 480px){
.about-area4{padding: 20px 0;}
}


/* ===================== Mobile size : 380px ======================= */

@media screen and (max-width: 380px){
.about-area4 ul .txt .check {font-size: 11px;}

}


/* ==================================================================================================================================== */
/* ============================================================ area4 스타일 ============================================================ */
/* ==================================================================================================================================== */


/* ==================================================================================================================================== */
/* ============================================================ area5 스타일 ============================================================ */
/* ==================================================================================================================================== */

.area4{background:#333;}
.area4 .title{color: #fff;}

.eq-slide {padding-bottom: 50px;}
.eq-slide .tit{font-weight: 700;margin-bottom: 10px;margin-top: 10px;}
.eq-slide .tit span{display: inline-block; font-size: 0.75em;margin-left: 5px;color: #ccc;}
.eq-slide .txt{color: #fff;}
.eq-slide .sub{white-space: pre-line;}
.eq-slide .swiper-scrollbar-drag{background: #c3a983;}
.eq-slide .swiper-scrollbar{height: 10px;}


/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

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

}

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){
.eq-slide .tit{font-size: 15px;    white-space: normal;}
.eq-slide .tit span{font-size: 0.5em;}
.eq-slide .sub{font-size: 13px;    white-space: normal;}
}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {
.eq-slide .img img{width: 100%;}
}

/* ===================== Mobile size : 480px ======================= */

@media screen and (max-width: 480px){
.eq-slide .sub{font-size: 9px;}
}


/* ==================================================================================================================================== */
/* ============================================================ area5 스타일 ============================================================ */
/* ==================================================================================================================================== */

/* ==================================================================================================================================== */
/* ============================================================ area6 스타일 ============================================================ */
/* ==================================================================================================================================== */

.area6 .time {display:flex; flex-direction: column;}
.area6 .time > li:not(:first-child) {margin-top: 12px;}
.area6 .time > li > ul {display:flex; margin-bottom: 3px; text-align: left;}
.area6 .time > li > ul > li:first-child {margin-right: 60px; width: 112px; text-align-last: justify; text-align: center; position: relative;}
.area6 .time > li > ul > li h6 {color: #000; font-weight: 600; transform: skew(-0.1deg);}
.area6 .time .sub-time{padding: 5px;background: #eee;}
.area6 .time .sub-time h6{font-size: 18px;text-align-last: center !important;font-weight: 600;letter-spacing: 1px;}
.area6 .time .sub-time h6:first-child{color: #3d1e0e;}
.area6 .time > li ul li{position: relative;}
.area6 .time > li ul li:nth-child(2) h6{width: 280px;text-align-last: justify;letter-spacing: 0px;}


/* 모달 팝업 */
  .modal_background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;

	/* 숨기기 */
	z-index: -1;
	opacity: 0;
      }

      .modal_show {
        opacity: 1;
        z-index: 1000;
        transition: all 0.5s;
      }

      .modal_window {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .modal_popup {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
		padding: 30px;
		overflow: hidden;
		overflow-y: scroll;

        /* 임시 지정 */
        width: 60%;
        height: 630px;

        /* 초기에 약간 아래에 배치 */
        transform: translate(-50%, -40%);
      }

      .modal_show .modal_popup {
        transform: translate(-50%, -50%);
        transition: all 0.5s;
      }

.modal_background{cursor: pointer;}
.modal_background .box h6 {display: inline-block; margin-bottom: 14px; padding: 3px 15px; color: #fff; font-weight: 900; background: linear-gradient(to right, #2e93c6, #77bbe2);}
.modal_background .box .list {display: flex; flex-direction: column; gap: 5px;}
.modal_background .box .list p {position: relative; padding-left: 15px; white-space: pre-line;}
.modal_background .box .list p::before {position: absolute; content: ''; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #333;}

.close_txt{position: absolute;left: 50%;top: 190px;color: #fff; width: 280px;margin-left: -140px;text-align: center;}

.modal_background .box .num_list p {position: relative;padding-left: 33px;}
.modal_background .box .num_list span {position: absolute; content: ''; left: 0; top: 0;}
.modal_background02 .img{position: absolute;top: 10px;right: 10px;}
.modal_background02 .img img{border:3px solid #ededed;border-top: none;}


.modal_window p{white-space: pre-line;}
.modal_close{position: absolute;top: 10px;right: 10px;padding: 5px;border: 0;background: rgba(0, 0, 0, 0.2);cursor: pointer;z-index: 1;}

.modal_background .sp-txt {color: #333;}
.modal_background .sp-txt h6{position: relative; margin-bottom: 10px; padding-left: 50px;font-family: 'GmarketSansBold';}
.modal_background .sp-txt h6::before {position: absolute; content: attr(data-num); left: 0; top: -2px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; border-radius: 0 10px 0 0;background: #55a6d4; color: #fff;}

.modal_background .right-txt{text-align: right;}



/* ===================== Mobile size : 1500px ======================= */

@media screen and (max-width: 1500px){
.modal_popup{width: 100% !important;}
}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

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

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width: 900px){
.info article {height: auto;}
.info > ul.flex > li {width: 100%;margin-right: 0;}

.address {padding-bottom: 20px;}
.call {margin-top: 20px;}
.address ul li p{font-size: 18px;}
}

/* ===================== Mobile size : 769px ======================= */

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

}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {
.area6 .time > li > ul > li:first-child {margin-right: 20px; width: 100px;}





}

/* ===================== Mobile size : 500px ======================= */

@media screen and (max-width: 500px) {
.area6 .time > li > ul > li:first-child{width: 95px;}
.area6 .time > li ul li:nth-child(2) h6{width: 210px;}


}

/* ===================== Mobile size : 425px ======================= */

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

.area6 .time > li > ul > li h6{font-size: 15px;}
.area6 .time > li > ul > li:first-child {width: 80px;}
.area6 .time > li:nth-child(2) > ul::before {left: -35px; width: 25px; height: 25.5px;}
.area6 .time > li:nth-child(2) > ul::after {right: -30px; width: 22px; height: 27px;}
.area6 .time .sub-time h6{font-size: 14px;letter-spacing:0px;}

}

@media screen and (max-width: 375px){
.area6 .time > li:nth-child(2) > ul > li:last-child:before{display: none;}

.area6 .time > li:nth-child(2) ul{background: #c3a983;}

.area6 .time > li:nth-child(2) ul li h6{color: #fff;}


.area6 .time > li > ul{justify-content: center;}

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

.area6 .time > li ul li:nth-child(2) h6{width: 170px;}

}


/* ==================================================================================================================================== */
/* ============================================================ area6 스타일 ============================================================ */
/* ==================================================================================================================================== */


/* ==================================================================================================================================== */
/* ============================================================ area7 스타일 ============================================================ */
/* ==================================================================================================================================== */

.area7{background: url("../img/custom/bg2.png") center/cover no-repeat;}

.area7 .box{border: 1px solid #bfbfbf;}

.info .info-box{width: calc(50% - 10px);margin-right: 10px;border: 1px solid #bfbfbf;background: #fff;padding: 45px;}
.info .tit h5{display: flex;align-items: center;gap: 10px;justify-content: center;}
.info .tit span{display: block;width: 60px;}
.info .tit span img{width: 100%;height: auto;}
.info .tit h5,.area7 .info .tit h5 a {font-weight: 600;color: #000;margin-bottom: 10px;margin-top: 20px;}
.info .tit:first-child h5{margin-top: 0;}

.area7 .info article {display: flex; justify-content: center; flex-direction: column; }

.area7 .map-wrap .root_daum_roughmap .wrap_controllers {display: none;}



.area7 .notice p {text-align: left;font-weight: 500; color: #5d5d5d;}

.address ul {display: flex;}
.address ul li{text-align: left;}
.address ul li:nth-child(1){margin-right: 10px;}
.address ul li p{font-size: 22px;}
.addressul li strong{font-size: 20px;font-weight: 500;}
.address ul li strong span{display: inline-block;background: #555;padding: 0 20px;font-weight: 600;color: #fff;margin-right: 10px;}


.call ul.flex{gap:10px;}
.call ul.flex a {-webkit-border-radius: 5px;-moz-border-radius: 5px;font-family: "GmarketSansBold";font-size: 30px;border-radius: 5px;display: flex; align-items: center; justify-content: center; gap:10px;padding: 8px 10px; background: #3d1e0e; color: #fff;}
.call ul.flex a img {margin-right: 10px;}
.call ul.flex > li:nth-child(2) a {background: #00ce38;}
.call ul.flex > li:nth-child(3) a {background: #ffe812;color: #3d1e0e;}

.way{padding: 45px;background: #fff;}

/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

@media screen and (max-width: 1024px){
.time > li ul li:nth-child(2) h6{width: 250px;}

.info .info-box{padding: 20px;}
}

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width: 900px){
.info article {height: auto;}
.info > ul.flex > li {width: 100%;margin-right: 0;}

.address {padding-bottom: 20px;}
.call {margin-top: 20px;}
.address ul li p{font-size: 22px;}
}

/* ===================== Mobile size : 769px ======================= */

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

}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {
.address ul{display: block;text-align: center;margin-bottom: 20px;}
.address ul:last-child{margin-bottom: 0;}
.address ul > li:first-child{text-align: center;}
.address ul li{text-align: center;}

.info .tit {margin-bottom: 20px;}

.call ul li{margin-right: 0;}
.call ul.flex > li {width: 100%;}
.call ul.flex > li:last-child{margin-bottom: 0;}

.way{padding: 20px;}




}

/* ===================== Mobile size : 500px ======================= */

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


.call ul.flex a{font-size: 20px;}

}

/* ===================== Mobile size : 425px ======================= */

@media screen and (max-width: 425px){
.map-wrap .root_daum_roughmap_landing {height: 250px !important;}

.address ul > li:first-child {margin-right: 0;}
.address ul > li:first-child p {padding: 3px 10px; width: 80px;}
.address ul > li:last-child {top: 5px;}
.address ul > li p {font-size: 15px;}
.address ul li strong{font-size: 15px;}

.call {padding: 10px 0;}
}

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


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


}
/* ==================================================================================================================================== */
/* ============================================================ area7 스타일 ============================================================ */
/* ==================================================================================================================================== */

/* ==================================================================================================================================== */
/* ============================================================ area8 스타일 ============================================================ */
/* ==================================================================================================================================== */



.btm-tit {padding: 15px 10px;text-align: center; background: #5d4436; color: #fff;}

.micro-area4 {padding-top: 40px;}
.micro-area4 ul.flex > li > div {padding: 40px 20px; background: #fff; border: 1px solid #5d4436;color: #000; border-radius: 40px;}
.micro-area4 ul.flex h6 {margin-bottom: 20px;}
.micro-area4 ul.flex p {white-space: pre-line;}

/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

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

/* ===================== Mobile size : 769px ======================= */

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

/* ===================== Mobile size : 600px ======================= */

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

}

/* ===================== Mobile size : 480px ======================= */

@media screen and (max-width: 480px){
.micro-area4 {padding-top: 20px;}
.micro-area4 ul.flex > li > div {padding: 20px 10px;}
.micro-area4 ul.flex h6{margin-bottom: 10px;font-size: 15px;}

}

/* ===================== Mobile size : 380px ======================= */

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

}
/* ==================================================================================================================================== */
/* ============================================================ area8 스타일 ============================================================ */
/* ==================================================================================================================================== */
/* ==================================================================================================================================== */
/* ============================================================ area9 스타일 ============================================================ */
/* ==================================================================================================================================== */



.cavities ul.flex .img img {width: 100%;}
.cavities ul.flex .txt .top,
.cavities ul.flex .txt .btm {color: #fff;}
.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;}
.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 5px; font-weight: 600; background: #000;}


.imp-special-box1 > li > div{margin: 5px;padding: 15px 15px 25px 15px;background: #fff;}
.imp-special-box1 > li > div > div{color: #fff; background-color: #3d1e0e; padding: 20px; margin: 10px 0; border-radius:20px;}

/* ===== Same-Day Implant Section ===== */
#section-sameday-implant {
  --bg: #fff;
  --coffee: #4d342e;      /* 카드 배경 계열 */
  --coffee-800: #3a2723;
  --text: #222;
  --muted: #666;
  --radius: 16px;
}

#section-sameday-implant .head {
  text-align: center;
  margin-bottom: 28px;
}
#section-sameday-implant .head__icon{
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 8px;
}
#section-sameday-implant .main-tit{
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 레이아웃 */

#section-sameday-implant .content__media{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
#section-sameday-implant .content__media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
#section-sameday-implant .content__text .content__title{
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  margin: 10px 0 12px;
}
#section-sameday-implant .content__p{
  line-height: 1.7;
  white-space: pre-line; /* 줄바꿈 엔터 반영 (요청 반영) */
}

/* 베네핏 카드 */
#section-sameday-implant .benefits{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}
#section-sameday-implant .benefits__item{
  background: var(--coffee);
  color: #fff;
  border-radius: 14px;
  text-align: center;
  padding: 20px 10px 22px;
   font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.1) inset, 0 4px 14px rgba(0,0,0,.06);
}
#section-sameday-implant .benefits__item:nth-child(1),#section-sameday-implant .benefits__item:nth-child(4){background: #5d4436;}
#section-sameday-implant .benefits__kicker{
  display: block;
  font-size: 15px;
  opacity: .95;
  letter-spacing: .02em;
}
#section-sameday-implant .benefits__title{
  display: block;
  margin-top: 6px;
  font-size: 22px;
  letter-spacing: .04em;
   font-weight: 700;
}


/* ===== Insurance Implant Section ===== */
#section-insurance-implant{
  --coffee:#4d342e;         /* 포인트 브라운 */
  --coffee-600:#3a2723;
  --ring:#b88e75;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --radius:22px;  
  background: url(../img/custom/bg3.png) center/cover no-repeat;
  }

/* 상단 좌/우 레이아웃 */
#section-insurance-implant .si-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:22px;
  align-items:center;
  position:relative;
}

/* 다이아 데코(배경) */
#section-insurance-implant .si-wrap::after{
  content:"";
  position:absolute; inset:auto 0 -36px 40%;
  height:160px;
  background:
    linear-gradient( to right, rgba(0,0,0,0) 0 10%, rgba(77,52,46,.06) 10% 12%, rgba(0,0,0,0) 12% 100% );
  -webkit-mask:
    radial-gradient(120% 120% at 0% 100%, #0000 49%, #000 50%) left/50% 100% no-repeat,
    radial-gradient(120% 120% at 100% 0%, #0000 49%, #000 50%) right/50% 100% no-repeat;
  mask:
    radial-gradient(120% 120% at 0% 100%, #0000 49%, #000 50%) left/50% 100% no-repeat,
    radial-gradient(120% 120% at 100% 0%, #0000 49%, #000 50%) right/50% 100% no-repeat;
  opacity:.25;
  pointer-events:none;
}

#section-insurance-implant .main-tit{
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
}

#section-insurance-implant .si-desc{
  margin-top:14px;
  line-height:1.75;
  white-space: pre-line; /* 엔터 줄바꿈 반영 */
}
#section-insurance-implant .si-desc strong{ color:var(--coffee); }
#section-insurance-implant .si-desc small{ color:#8c8c8c; }

#section-insurance-implant .si-hero{
  margin:0;
  text-align:right;
}
#section-insurance-implant .si-hero img{
  width:min(560px,100%);
  height:auto;
  object-fit:contain;
  display:inline-block;
}

/* 라운드 카드 패널 */
#section-insurance-implant .si-panel{
  background:#fff;
  border:2px solid var(--ring);
  border-radius: var(--radius);
  padding:20px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

/* 카드 그리드 */
#section-insurance-implant .si-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  padding:0;
  margin:0;
  list-style:none;
}
#section-insurance-implant .si-item{
  text-align:center;
}
#section-insurance-implant .si-ico{
  width:96px;height:96px;
  display:inline-grid; place-items:center;
  border:3px solid var(--coffee);
  border-radius:50%;
  margin: 2px auto 5px;
  background:#fff;
}
#section-insurance-implant .si-ico img{
  width:48px;height:48px; object-fit:contain; display:block;
  filter: invert(16%) sepia(12%) saturate(742%) hue-rotate(332deg) brightness(94%) contrast(92%); /* 브라운 톤 */
}

#section-insurance-implant .si-item__title{
  display:block;
  font-size:20px;
  color:#3d1e0e;
  font-weight: 700;
  margin-bottom:6px;
}
#section-insurance-implant .si-item__text{
  color:#3e3e3e;
  line-height:1.6;
  white-space: pre-line;
}
.area11.bg-gray{background: url(../img/custom/bg4.png) center/cover no-repeat;}
.area12.bg-gray{background: url(../img/custom/bg5.png) center/cover no-repeat;}
.area12{color: #fff;}
.area12 h6{font-weight: bold;margin-top: 10px;}
.area13{padding-top: 100px;padding-bottom: 100px;background: url(../img/custom/bg6.png) center/cover no-repeat;}

.area14.bg-gray{background: url(../img/custom/bg7.png) center/cover no-repeat;}
.area14{color: #fff;}
.area14 h6{font-weight: bold;white-space: pre-line;margin-top: 10px;}

.area15.bg-gray{background: url(../img/custom/bg8.png) center/cover no-repeat;}
.area15 h6{font-weight: bold;white-space: pre-line;margin-top: 10px;}

/* ===== 교정과 전문의 배너 ===== */
#banner-ortho-specialist{
  --panel-bg:#fff;
  --text:#161616;
  --muted:#3a3a3a;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
  }


#banner-ortho-specialist .inner{ position:relative; z-index:2; }

/* 화이트 카드 */
#banner-ortho-specialist .banner-card{
  background: var(--panel-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3.5vw, 48px);
}

/* 카드 내부 그리드 */
#banner-ortho-specialist .banner-card__grid{
  display:grid;
  grid-template-columns: 30% 70%;
  gap: clamp(16px, 3vw, 36px);
   align-items:center;
}
#banner-ortho-specialist .banner-card__logo{
  margin:auto;
}
#banner-ortho-specialist .banner-card__logo img{
  width: clamp(72px, 8vw, 120px);
  height:auto;
  display:block;
  object-fit:contain;
}

#banner-ortho-specialist .banner-card__title{
  font-size: clamp(20px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height:1.25;
  margin: 0 0 10px;
}
#banner-ortho-specialist .banner-card__desc{
  font-size: clamp(15px, 1.3vw, 20px);
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-line; /* 엔터 줄바꿈 반영 */
  margin:0;
}

/* 접근성용 숨김 텍스트 */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== 3P Section ===== */
#section-3p{
  --coffee:#4d342e;   /* 포인트 컬러 */
  --text:#1e1e1e;
  --muted:#666;
  --radius:16px;
  padding:64px 0;
  background:#fff;
}


/* 공통 행 레이아웃 */
#section-3p .p-row{
  display:grid;
  grid-template-columns: 1fr 1fr;  
  gap:14px;
  align-items:center;
  padding:16px 0;
}
#section-3p .p-media{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
#section-3p .p-media img{
  width:100%; height:auto; display:block; object-fit:cover;
}
#section-3p .p-copy{ padding:2px 2px 4px; }
#section-3p .p-title{
  font-size:clamp(18px,2.2vw,22px);
  font-weight:800;
  color:var(--coffee);
  margin:0 0 8px;
}
#section-3p .p-title span{
  font-weight:700; color:#8a6a5d; font-size:.95em;
}
#section-3p .p-desc{
  color:var(--muted);
  line-height:1.7;
  white-space:pre-line; /* 엔터 줄바꿈 반영 */
  margin:0;
}

/* 행 구분선 */
#section-3p .p-row + .p-row{ border-top:1px solid #eee; margin-top:12px; padding-top:24px; }

article.tab_menu ul.tab {display: flex; justify-content: center; width: 100%; flex-wrap: wrap;margin-bottom: 20px;}
article.tab_menu ul.tab > li {width: calc(20% - 12px);color: #000; padding: 15px 0; text-align: center; cursor: pointer;border: 1px solid #000;margin: 5px;}
article.tab_menu ul.tab > li:not(:first-child) {}
article.tab_menu ul.tab > li:hover {background: #3e2010 !important; color: #fff;}
article.tab_menu ul.tab > li.on {background: #3e2010 !important;color: #fff;}

article.tab_menu ul.box > li {position: absolute; opacity: 0; align-items: center; gap: 50px;}
article.tab_menu ul.box > li.on {position: relative; display: flex; opacity: 1; transition: opacity 0.3s ease-in;}

.dept-section {
  background: #222;
  padding: 80px 0;
  color: #fff;
}
.dept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dept-grid li {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.dept-grid .thumb {
  position: relative;
}
.dept-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}
.dept-grid .txt {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  text-align: center;
  padding: 20px 10px;
  transition: 0.4s;
}
.dept-grid .txt h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.dept-grid .txt p {
  font-size: 15px;
  line-height: 1.4;
}
.dept-grid li:hover img {
  transform: scale(1.05);
  filter: brightness(0.7);
}
.dept-grid li:hover .txt {
  background: rgba(0,0,0,0.7);
}

/* 반응형 */
@media (max-width: 1024px) {
  .dept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .dept-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dept-section {
    padding: 60px 0;
  }
  .dept-grid .txt h4 {
    font-size: 18px;
  }
  .dept-grid .txt p {
    font-size: 12px;
  }
}


/* 태블릿 이상: 2열 배치 */
@media (min-width: 820px){
  #section-3p .p-row{
    grid-template-columns: minmax(340px, 520px) 1fr;
    gap:28px;
  }
}

/* 데스크톱: 여백 확장 */
@media (min-width: 1120px){
  #section-3p{ padding:80px 0 92px; }
  #section-3p .p-row{ gap:36px; }
}

/* 데스크톱 확장 */
@media (min-width: 1024px){
  #banner-ortho-specialist .banner-card{
    max-width: 1120px;
    margin: 0 auto;
  }
}


/* 데스크톱 업스케일 */
@media (min-width: 992px){
  #section-insurance-implant{ padding:84px 0 96px; }
  #section-insurance-implant .si-wrap{
    grid-template-columns: 0.9fr 1.1fr;
    gap:28px;
  }
  #section-insurance-implant .si-panel{
    padding:26px 24px;
  }
  #section-insurance-implant .si-grid{
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
  }
  #section-insurance-implant .si-ico{ width:104px; height:104px; }
}

/* ===================== Mobile size : 1500px ======================= */

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

}


/* ===================== Mobile size : 1200px ======================= */

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

}


/* ===================== Mobile size : 1024px ======================= */

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

}

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width: 900px){
article.tab_menu ul.tab > li {width: calc(33.3% - 12px); padding: 5px;}
article.tab_menu ul.tab-50 > li {width: calc(50% - 12px);}

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

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

  #section-sameday-implant .content{
    grid-template-columns: 1.05fr 1fr;
    gap: 36px;
  }
  #section-sameday-implant .benefits{
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 20px;
  }
  #section-sameday-implant .benefits__item{
    padding: 28px 10px 30px;
  }

}

/* ===================== Mobile size : 769px ======================= */

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

.imp-special-box1 > li > div{padding: 10px;}
.imp-special-box1 > li > div > div{padding: 10px;}

#section-sameday-implant .content__text{text-align: center;}
#section-insurance-implant .si-wrap{text-align: center;}
.banner-card__text{text-align: center;}
}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {
	.area13{padding: 20px 10px;}
	#banner-ortho-specialist .banner-card__grid{
	  grid-template-columns: 100%;
	}
	#section-insurance-implant .si-ico{
	  width:40px; height: 40px;
	}
	#section-insurance-implant .si-ico img{
	  width: 20px;height: auto;
	}
	#section-insurance-implant .si-item__title{font-size: 13px;}
	#section-insurance-implant .si-grid{gap:10px;}
}

/* ===================== Mobile size : 425px ======================= */

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

.cavities ul.flex .txt .top{font-size: 9px;}
.cavities ul.flex .txt .btm{font-size: 9px;}
.cavities ul.flex .txt .mid {height: 150px; padding: 20px 10px;font-size: 9px;}
.imp-special-box1 > li{max-width: 300px;}
#section-insurance-implant .si-grid{grid-template-columns: 1fr 1fr 1fr 1fr;}

.area12 h6{font-size: 15px;}

.gum ul.flex .txt .top{font-size: 9px;}
.gum ul.flex .txt .btm{font-size: 9px;}

#banner-ortho-specialist .banner-card__title{font-size: 15px;}
#banner-ortho-specialist .banner-card__desc{font-size: 11px;}

.area14 h6{font-size: 15px;}
#section-3p .p-title{font-size: 15px;}

.area15 h6{font-size: 15px;}


}
/* ==================================================================================================================================== */
/* ============================================================ area9 스타일 ============================================================ */
/* ==================================================================================================================================== */

.doctor-section {background:#fff; padding:80px 0;}
.doctor-section .doctor-header {text-align:center; margin-bottom:50px;}
.doctor-section .doctor-header .sub {color:#888; font-size:14px;}
.doctor-section .doctor-header h2 {font-size:28px; font-weight:700;}

.doctor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 고정 */
  gap: 30px;
  text-align: center;
}

/* 화면이 아주 작을 때도 3열 유지 */
@media (max-width: 768px) {
  .doctor-grid {
    grid-template-columns: repeat(3, 1fr); /* 여전히 3열 */
    gap: 15px; /* 간격만 줄여서 반응형 조정 */
  }

  .doctor-card img {
    max-width: 100%;
    height: auto;
  }

  .doctor-card h3 {
    font-size: 15px   !important;
  }

  .career-btn {
    font-size: 10px  !important;
    padding: 6px 10px;
  }
  .upcoming .upcoming-label{font-size: 17px !important;}
}

/* 아주 작은 화면(480px 이하)에서는 살짝 크기 줄이기 */
@media (max-width: 480px) {
  .doctor-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .doctor-card { padding: 10px  !important;}  
  .doctor-card h3 { font-size: 10px   !important;}  
  .doctor-card span{font-size: 10px !important;}
  .upcoming .upcoming-label{font-size: 10px  !important;}
}
.doctor-card {position:relative; background:#fafafa; border-radius:8px; padding:20px;}
.doctor-card img {width:100%; border-radius:6px;}
.doctor-card h3 {font-size:18px; margin:15px 0 10px;}
.doctor-card span {font-size:15px; color:#555;}
.career-btn {background:#fff; border:1px solid #ccc; color: #000;padding:8px 14px; font-size:14px; cursor:pointer;}
.career-btn:hover {background:#333; color:#fff; border-color:#333;}
.upcoming .upcoming-label {
  position:absolute; top:15px; left:0; right:0;font-weight: bold;
  background:#5b3a1e; color:#fff; padding:4px 0; font-size:24px;
}

/* 팝업 */
/* 오버레이 */
.popup{
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  display: none;            /* 기본 숨김 */
  place-items: center;      /* 그리드 중앙 정렬 */
  padding: 20px;            /* 좁은 화면 여백 */
  background: rgba(0,0,0,.7);
  z-index: 9999;
}

/* 열릴 때 */
.popup.is-open{ display: grid; }

/* 팝업 박스 */
.popup-content{
  position: relative;       /* 절대X, 고정X : 부모 중앙 그대로 */
  width: min(900px, 100%);
  max-height: calc(100vh - 80px);
  overflow: auto;           /* 내용 길면 내부 스크롤 */
  margin: 0 !important;     /* 전역 margin:auto 방지 */
  background: #fff;
  border-radius: 10px;
  padding: 40px;
}

/* 닫기 버튼 */
.close-btn{
  position: absolute; top: 12px; right: 16px;
  font-size: 30px; border:0; background:transparent; cursor:pointer;
}

.popup-body {display:flex; gap:30px; align-items:flex-start;}
.popup-body img {width:250px; border-radius:8px;}
.popup-text {flex:1;width: 100%;}
.popup-text h3 {font-size:22px; font-weight:700;}
.popup-text .quote {margin:15px 0; color:#444; line-height:1.6;}
.career-list {margin-top:15px; list-style:disc; padding-left:20px;}
.career-list li {margin-bottom:6px; line-height:1.5;}
.workday {display:flex;width: 100%; gap:10px; margin-top:20px;}
.workday li {
  flex:1; text-align:center; padding:10px; border-radius:6px; background:#eee;
  font-weight:600;
}
.workday li.on {background:#7d5a2e; color:#fff;}
.workday li.off {background:#aaa; color:#fff;}

@media (max-width:768px){
  .popup-body {flex-direction:column; align-items:center;}
  .popup-body img {width:180px;}
  .popup-content {padding:20px;}
  .career-list li{font-size: 12px;}
  .workday{gap:3px;}
  .workday li{font-size: 10px;}
}