@charset "utf-8";


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

/* slide-banner */
	.slide-bg {padding: 3.8% 0;}

	.vision {background: url(../img/sub/vision.jpg) center/cover no-repeat;}
	.slide-bg.dentist {background: url(../img/sub/dentist.jpg) center/cover no-repeat;}
	.slide-bg.equipment {background: url(../img/sub/equipment.jpg) center/cover no-repeat;}
	.slide-bg.info_time {background: url(../img/sub/info_time.jpg) center/cover no-repeat;}
	.slide-bg.info_map {background: url(../img/sub/info_map.jpg) center/cover no-repeat;}
	.slide-bg.info_interior {background: url(../img/sub/info_interior.jpg) center/cover no-repeat;}

	.implant {background: url(../img/sub/implant.jpg) center/cover no-repeat;}
	.imp_navigation {background: url(../img/sub/imp_navigation.jpg) center/cover no-repeat;}
	.imp_highlevel {background: url(../img/sub/imp_highlevel.jpg) center/cover no-repeat;}

	.caries {background: url(../img/sub/caries.jpg) center/cover no-repeat;}
	.rootcanal {background: url(../img/sub/rootcanal.jpg) center/cover no-repeat;}
	.periodontal {background: url(../img/sub/periodontal.jpg) center/cover no-repeat;}
	.scaling {background: url(../img/sub/scaling.jpg) center/cover no-repeat;}
	.wisdom {background: url(../img/sub/wisdom.jpg) center/cover no-repeat;}

	.dentures {background: url(../img/sub/dentures.jpg) center/cover no-repeat;}
	.imp_dentures {background: url(../img/sub/imp_dentures.jpg) center/cover no-repeat;}

	.orthodontic {background: url(../img/sub/orthodontic.jpg) center/cover no-repeat;}
	.ortho_type {background: url(../img/sub/ortho_type.jpg) center/cover no-repeat;}

	.jaw_joint {background: url(../img/sub/jaw_joint.jpg) center/cover no-repeat;}

	.pediatric {background: url(../img/sub/pediatric.jpg) center/cover no-repeat;}

	.community {background: url(../img/sub/community.jpg) center/cover no-repeat;}

	/* slide-banner-title */
	.slide-bg * {text-align: center; letter-spacing: 5px;}
	.slide-bg p {letter-spacing: 0;}
	.slide-bg h6::after {content: ''; width: 1px; height: 40px; display: block; background-color: #555; margin: 10px auto 10px;}
	.slide-bg img {width: auto;}

	.about *, .login * {color: #fff;}
	.about h5 {letter-spacing: 0;}
	.about p::before, .login p::before {display: none;}
	.about h6::after, .login h6::after {content: ''; width: 1px; height: 40px; display: block; background-color: #fff; margin: 10px auto 10px;}

/* ================ background-title =================== */
	
	/* writing-box */
		.writing-box * { text-align: center; white-space: pre-line;}
		.writing-box .blue {font-style: italic;}
	
	/* call-time-map */
		.call-time-map {background-color: #0c2239; padding: 50px 0;}
		.call-time-map ul {display: flex; width: 100%; justify-content: center;}
		.call-time-map ul li {border-left: 1px solid #fff; padding: 0 2.5%; min-width: 33.3%;}
		.call-time-map ul li:first-child {border-left: none;}
		.call-time-map ul li * {color: #fff; font-weight: 500;}
		.call-time-map ul li h2 {margin: 0 0 20px 0;}
		.call-time-map ul li p {line-height: 1.5;}
		.call-time-map ul li:nth-child(2) h6 {display: flex; justify-content: space-between; line-height: 1.7; font-size: 20px;}
		.call-time-map ul li:nth-child(2) h5 {margin-bottom: 10px;}
		.call-time-map ul li:nth-child(3) p {font-size: 17px; margin-bottom: 15px;}
		.call-time-map ul li:nth-child(3) img {width: 80%;}
		.call-time-map ul li p span {display: block;}
	
	/* care-list */
		.care-list {text-align: center; background-color: #d9e7f0; padding: 60px 0;}
		.care-list ul {margin: 20px auto 0; display: inline-block;}
		.care-list li {position: relative; padding-left: 25px; line-height: 2;}
		.care-list li::before {content: attr(data-list); display: block; position: absolute; left: 0; top: 0px; color: #2756b5; font-weight: bold; font-size: 22px;}
		.care-list li h6 {text-align: left; margin-left: 10px;}
	
	/* color-list */
		.col-3 li {width: 33.3%;}
		.col-4 li {width: 25%;}
		.col-5 li {width: 20%;}
		.row-1 li p {min-height: 82px;}
		.row-2 li p {min-height: 107px;}
		.row-3 li p {min-height: 162px;}
		.bg-deepblue.color-list ul li {background-color: #fff;}
		.color-list * {text-align: center;}
		.color-list .title {margin-bottom: 60px;}
		.color-list ul {display: flex; justify-content: center; width: 100%;}
		.color-list ul li {background-color: #eaeaea; position: relative; padding: 30px 15px 15px 15px; margin-left: 15px;}
		.color-list ul li:first-child {margin-left: 0;}
		.color-list li h6 {color: #fff; padding: 10px 0; margin-top: 15px;}
		.color-list li img {border-radius: 50%; margin-bottom: 15px;}
		.color-list li::before {
			content: attr(data-number); 
			display: block; 
			width: 40px; 
			height: 40px; 
			border-radius: 50%; 
			font-size: 20px;
			line-height: 39px; 
			margin: 0 auto;
			color: #fff;
			font-weight: 500;
			position: absolute;
			left: 50%;
			top: -20px;
			transform: translate(-50%, 0);
		}
		.color-list li[data-number='1']::before, .color-list li[data-number='1'] h6 {background-color: #5cd7e9;}
		.color-list li[data-number='2']::before, .color-list li[data-number='2'] h6 {background-color: #6ab1e2;}
		.color-list li[data-number='3']::before, .color-list li[data-number='3'] h6 {background-color: #1f3ba3;}
		.color-list li[data-number='4']::before, .color-list li[data-number='4'] h6 {background-color: #441fa3;}
		.color-list li[data-number='5']::before, .color-list li[data-number='5'] h6 {background-color: #98008b;}
		.color-list .inner div:last-of-type {margin-top: 80px;}
		.color-list .list-wrap h6 {color: #fff; background-color: #6d8fc9; display: inline-block; padding: 5px 20px; border-radius: 50px; margin-bottom: 60px;}

		/* color-box */
		.color-box {display: flex; margin-top: 30px; text-align: center;}
		.color-box.row-1 li p {min-height: 162px;}
		.color-box.row-2 li p {min-height: 162px;}
		.color-box li {background-color: #fff; width: 100%; padding: 20px 40px; margin-left: 30px;}
		.color-box li:first-child {margin-left: 0;}
		.color-box li h5 {color: #fff; text-align: center; padding: 5px 0;}
		.color-box li p {margin-bottom: 20px;}
		.color-box:first-of-type li:nth-child(1) h5 {width: 100%; background-color: #5cd7e9;}
		.color-box:first-of-type li:nth-child(2) h5 {width: 100%; background-color: #6ab1e2;}
		.color-box:last-of-type li:nth-child(1) h5 {width: 100%; background-color: #1f3ba3;}
		.color-box:last-of-type li:nth-child(2) h5 {width: 100%; background-color: #441fa3;}


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

		/* common */
		.col-3 li, .col-4 li ,.col-5 li {width: 100%;}
		.row-1 li p, .row-2 li p, .row-3 li p {min-height: auto;}

		.call-time-map ul {display: block;}
		.call-time-map ul li {border-left: none; padding: 0; margin-bottom: 15px; text-align: center;}
		.call-time-map ul li h5 {background-color: #fff; border-radius: 40px; color: #0c2239; font-weight: 600; width: 80%; margin: 0 auto 10px; padding: 5px 0;}
		.call-time-map ul li:nth-child(2) h6 {width: 80%; margin: 0 auto;}
		.call-time-map ul li h2 {margin: 0 0 5px 0;}
		.call-time-map ul li:nth-child(3) img {width: 60%;}

		.care-list li::before {font-size: 20px;}
		.care-list h6 { margin-left: 5px;}

		.color-list .title {margin-bottom: 40px;}
		.color-list ul {display: block;}
		.color-list ul li {margin-left: 0; margin-top: 40px;}
		.color-list ul li img {width: 60%;}
		.color-list .inner div:last-of-type {margin-top: 40px;}
		.color-list .list-wrap h6 {margin-bottom: 0;}

		.color-box {display: block; text-align: center; margin-top: 15px;}
		.color-box h4 {display: inline-block; background-color: #5cd7e9; color: #fff; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; font-size: 20px; margin-bottom: 10px;}
		.color-box:first-of-type li:nth-child(2) h4 {background-color: #6ab1e2;}
		.color-box:last-of-type li:nth-child(1) h4 {background-color: #1f3ba3;}
		.color-box:last-of-type li:nth-child(2) h4 {background-color: #441fa3;}
		.color-box li {margin-left: 0; margin-top: 15px;}
		.color-box li:first-child {margin-top: 0;}
		.color-box li p {margin-bottom: 10px;}
	}

	/* ===================== Mobile size : 767px ======================= */
	@media screen and (max-width:769px){
		.care-list, .bg-blue {padding: 30px 0;}
		.care-list li::before {font-size: 18px;}
		.color-list li p {white-space: pre-line;}
	}

	/* ===================== Mobile size : 425px ======================= */
	@media screen and (max-width:426px){
		.care-list li h6 {white-space: pre-line;}
	}


/* ======================================================================================================================== */
/* =================================================== sub start ========================================================== */
/* ======================================================================================================================== */

	.photo-text h4 {margin-bottom: 30px; white-space: pre-line;}
	.photo-text ul {display: flex; justify-content: space-evenly; align-items: center;}
	
	.line-list {background-color: #eaeaea; padding: 60px 0;}
	.line-list h5 {line-height: 1.5;}
	.line-list ul {display: flex; width: 100%; margin-top: 20px;}
	.line-list ul:first-of-type {margin-top: 0;}
	.line-list ul li {border-top: 2px solid #aaa; padding-top: 20px; line-height: 1.8; width: 75%; position: relative;}
	.line-list ul li:first-child {border-top: 2px solid #222; width: 25%;}
	.line-list ul li h6 {font-weight: 600;}
	.line-list ul li p b {display: block;}
	.line-list ul li p span {padding-left: 10px; display: block;}
	.line-list ul li dl {display:flex;}
	.line-list ul li dl dd:first-of-type {margin-left: 0;}
	.line-list ul li dl dd {margin-left: 25px;}
	.line-list .title {margin-bottom: 40px; text-align: center;}
	.line-list .title h4 {margin-bottom: 20px;}
	.line-list .title-blue {width: auto; display: inline-block; padding: 5px 40px; border-radius: 40px; background-color: #2756b5; color: #fff;}
	.line-list img {position: absolute; bottom: 0; right: 0; opacity: 0.5;}
	.line-list ul:first-of-type li:last-child img {bottom: 0; max-width: 200px;}

	.gray-box {background-color: #eaeaea; display: flex; align-items: center; padding: 60px; margin: 0 auto;}
	.gray-box li {padding-left: 30px; border-left: 2px solid #ccc; width: 100%; line-height: 1.8;}
	.gray-box li:first-child {display: flex; align-items: center; border-left: none; padding-left: 0;}
	.gray-box li h5 {margin-left: 20px;}
	.gray-box li h6 {display: flex; justify-content: space-between;}
	.gray-box li h6 span {display: block;}
	.gray-box li div {display: flex; align-items: center; justify-content: space-between;}
	.gray-box img {max-width: 100%; height: auto; width: auto;}
	
	.dentist ul {display: flex;}
	.dentist ul li {width: 100%;}
	.dentist ul li img {width: auto;}
	.dentist ul li p {white-space: pre-line;}
	.dentist .name {letter-spacing: 7px; line-height: 1; border-bottom: 2px solid #224077; position: relative; padding-bottom: 15px; margin-bottom: 50px;}
	.dentist .name::after {content: ''; display: block; background: url(../img/sub/dentist_icon.png); width: 50px; height: 60px; background-size: cover; position: absolute; bottom: 0; right: 0;}
	.dentist .name * {display: inline-block;}
	.dentist02 ul li:last-child {margin-left: 50px;}

	.basic-box h4 {text-align: center; margin-bottom: 40px;}
	.basic-box img {border-radius: 50%;}
	.basic-box ul {display: flex; align-items: center; justify-content: center;}
	.basic-box .inner > ul:last-of-type {margin-top: 80px;}
	.basic-box ul li:first-child {margin-right: 20px;}
	.basic-box ul li h5 {margin-bottom: 10px;}

	.ortho-box {padding: 60px 0;}
	.ortho-box h6 {background-color: #2756b5; display: inline-block; padding: 5px 0; color: #fff; border-radius: 60px; width: 25%; text-align: center; margin-bottom: 20px;}
	.ortho-box h4 {margin-bottom: 20px;}
	.ortho-box .line-list {padding: 0; background-color: unset;}
	.ortho-box .title-box {display: flex;}
	.ortho-box .title-box li:first-child {width: 100%;}

	.child-box {background-color: #f3fce6; padding: 60px 0;}
	.child-box h1 {font-style: italic; font-weight: 500; margin-bottom: 20px;}
	.child-box .title {text-align: center; margin-bottom: 40px;}
	.child-box .line-list {background-color: unset; padding: 0;}
	.child-box .line-list ul:last-of-type li {border-bottom: 2px solid #aaa; padding-bottom: 20px;} 
	.child-box .line-list ul:last-of-type li:first-child {border-bottom: 2px solid #222;}
	.child-box h5.ment {font-style: italic; text-align: center; margin: 30px 0;}
	.child-box .before-after {display: flex; margin-top: 40px; justify-content: center;}
	.child-box .before-after li:first-child {margin-right: 60px;}

	.about-text * {text-align: center;}
	.about-text h4 {font-style: italic;}
	.about-text p {margin-top: 40px;}

	.map-box .deep-blue {padding: 10px 0; margin-bottom: 20px;}
	.map-box .deepblue {text-align: center;}
	.map-box .title {margin-bottom: 30px;}
	.map-box .video-wrap {width: 100%; max-width: 1200px;}
	.map-box .video {position: relative; width: 100%; height: auto; padding-top: 56.25%;}
	.map-box .video iframe {z-index: 1; top: 0; left: 0; position: absolute; width: 100%; height: 100%;}
	
	.img-list {text-align: center;}
	.img-list ul {display:flex; justify-content: space-between; margin-top: 50px;}
	.img-list .title {margin-bottom: 30px;}

	.vs h4 {text-align: center;}

	.pediatric-box {background: url(../img/sub/pediatric05_bg.jpg);}
	.pediatric-box img {width: auto; margin: 0 auto; display: block;}

	.implant-box {}
	.implant-box ul {display: flex; justify-content: space-between;}
	.implant-box .bg-green {position: absolute; bottom: 0; width: 100%; padding: 20px 0; line-height: 2.3;}

	.vision-box {text-align: center;}
	.vision-box h3.blue {letter-spacing: 5px;}
	.vision-box p {display: flex; align-items: center; margin-bottom: 10px; white-space: nowrap; letter-spacing: 5px;}
	.vision-box p::before {content: ''; display: block; width: 50%; height: 1px; background-color: #000; margin-right: 10px;}
	.vision-box p::after {content: ''; display: block; width: 50%; height: 1px; background-color: #000; margin-left: 10px;}
	.vision-box h5 {width: 100%; padding: 5px 0; margin-bottom: 30px;}



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


}



/* ========================= 1200px 이하 ========================= */
@media screen and (max-width:1200px){
	/* slide */
	.slide-bg p {white-space: pre-line;}

	.img-list ul {justify-content: center;}
	.img-list ul li {margin-left: 20px;}
	.img-list ul li:first-child {margin-left: 0;}
}

/* ========================= 1024px 이하 ========================= */
@media screen and (max-width:1024px){
	br {display: none;}

	.line-list .title {margin-bottom: 30px;}
	.line-list .title h6 {white-space: pre-line;}
	.line-list .title h4 {margin-bottom: 10px;}
	.line-list img {width: 25%;}
	.line-list .title-blue {padding: 2px 40px;}

	.photo-text ul {display: block;}
	.photo-text ul li {text-align: center;}
	.photo-text h4 {margin-bottom: 10px;}
	.photo-text p {white-space: pre-line; margin-bottom: 10px;}
	.photo-text img {width: 60%; border-radius: 50%;}

	.gray-box {display: block; padding: 20px;}
	.gray-box h2 img {display: none;}
	.gray-box li {border-left: none; padding: 0; text-align: center; width: 80%; margin: 0 auto 15px;}
	.gray-box li:first-child h5 {text-align: center; background-color: #fff; margin-left: 0;}
	.gray-box li:first-child {display: block; padding-right: 0;}

	.dentist ul {display: block;}
	.dentist ul li img {width: 60%;}
	.dentist ul li:last-child {margin-left: 0; margin-top: 60px;}
	.dentist .name {margin-bottom: 25px;}

	.basic-box ul {display: block; text-align: center;}
	.basic-box ul:last-of-type {margin-top: 10px;}
	.basic-box ul img {width: auto;}
	.basic-box ul p {white-space: pre-line;}
	.basic-box ul li:first-child {margin-right: 0; margin-bottom: 10px;}
	.basic-box ul li h5 {margin: 0;}
	
	.ortho-box {padding: 30px 0; margin-top: 30px;}
	.ortho-box h6 {width: 50%; margin-bottom: 15px;}
	.ortho-box h4 {margin-bottom: 10px; white-space: pre-line;}
	.ortho-box br {display: block;}

	.child-box {padding: 30px 0;}
	.child-box .title {margin-bottom: 20px;}
	
	.img-list ul {margin-top: 30px;}

	.vs h4 {white-space: pre-line;}
	
	.implant-box ul {display: block;}
	.implant-box ul li {text-align: center;}

}

/* ========================= 769px 이하 ========================= */
@media screen and (max-width:769px){
	/* slide */
	.slide-bg img {width: 50px;}
	.slide-bg p::before {height: 25px;}

	.line-list {padding: 30px 0;}
	.line-list ul {display: block; margin-top: 10px;}
	.line-list ul li, .line-list ul li:first-child {border-top: none; width: 100%;}
	.line-list ul li:first-child {padding-top: 0; text-align: center;}
	.line-list ul li *, .line-list ul li:first-child * {text-align: center;}
	.line-list ul li h5 {white-space: nowrap; background-color: #fff; border-radius: 40px;}
	.line-list ul li p {white-space: pre-line;}
	.line-list ul li p b {display: unset;}
	.line-list ul li dl {display: block;}
	.line-list ul li dl dd {margin-left: 0;}
	.line-list .title {margin-bottom: 15px;}
	.line-list img {position: relative; left: 0; bottom: 0; display: block; margin: 0 auto; width: 50%; opacity: 1;}
	.line-list ul:first-of-type li:last-child img {bottom: 0; width: 30%;}
	
	.dentist ul li:last-child {margin-top: 20px;}
	.dentist .name {margin-bottom: 15px; padding-bottom: 10px;}
	.dentist .name::after {width: 37px; height: 44px;}
	
	.ortho-box {margin-top: 10px;}
	.ortho-box .title {text-align: center;}
	.ortho-box h6 {width: 90%;}
	.ortho-box .line-list ul {background-color: #fff; padding: 10px;}
	.ortho-box .line-list ul li {padding-top: 0;}
	.ortho-box .line-list li h5 {background-color: unset;}
	.ortho-box.bg-white .line-list ul {background-color: #eaeaea;}
	.ortho-box br {display: none;}

	.ortho-box .title-box {display: block;}
	.title-box {text-align: center;}
	.title-box img {width: 40%;}
	.title-box p {white-space: pre-line;}
	
	.child-box h5.ment {white-space: pre-line;}
	.child-box .line-list ul:last-of-type li {border-bottom: none; padding-bottom: 0;} 
	.child-box .line-list ul:last-of-type li:first-child {border-bottom: none;}
	.child-box .before-after {margin-top: 20px; justify-content: center;}
	.child-box .before-after li:first-child {margin-right: 20px;}

	.about-text p {white-space: pre-line; margin-top: 10px;}

	.img-list ul {margin-top: 10px;}
	.img-list ul {display: block;}
	.img-list ul li {float: left; width: calc(50% - 10px); margin: 0;}
	.img-list ul li:nth-child(2), .img-list ul li:nth-child(4) {margin-left: 10px;}
	.img-list ul li:nth-child(3), .img-list ul li:nth-child(4) {margin-top: 10px;}
	.img-list ul::after {content: ''; display: block; clear: both;}

	.map-box .title {margin-bottom: 15px;}

	.pediatric-box img {width: 100%;}

	.vision-box p {letter-spacing: 0;}
	
	.implant-box .bg-green {line-height: 1.8;}
	.implant-box h6 {white-space: pre-line;}
}

/* ========================= 425px 이하 ========================= */
@media screen and (max-width:426px){
	/* slide */
	.slide-bg {padding: 6% 0;}
	.slide-bg img {width: 40px;}
	
	.child-box .before-after {display: block;}
}

/* ======================================================================================================================== */
/* =========================================== FAQ (GEO/AEO) ============================================================== */
/* ======================================================================================================================== */

	.faq-box {background-color: #f7f7f7; padding: 60px 0; text-align: center;}
	.faq-box h4 {margin-bottom: 40px;}
	.faq-box .faq-list {max-width: 1000px; margin: 0 auto; text-align: left; border-top: 2px solid #222;}
	.faq-box details {border-bottom: 1px solid #ccc; background-color: #fff;}
	.faq-box summary {list-style: none; cursor: pointer; position: relative; padding: 24px 70px 24px 75px; font-size: 26px; font-weight: 800; color: #222; line-height: 1.4;}
	.faq-box summary::-webkit-details-marker {display: none;}
	.faq-box summary::before {content: 'Q.'; position: absolute; left: 30px; top: 24px; color: #2756b5; font-weight: 800;}
	.faq-box summary::after {content: '+'; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 34px; font-weight: 400; color: #2756b5;}
	.faq-box details[open] summary::after {content: '−';}
	.faq-box .faq-a {position: relative; padding: 0 70px 28px 75px;}
	.faq-box .faq-a::before {content: 'A.'; position: absolute; left: 30px; top: 0; font-size: 26px; font-weight: 800; color: #5cd7e9;}
	.faq-box .faq-a p {font-size: 22px; font-weight: 500; line-height: 1.7; color: #333;}

	@media screen and (max-width:1024px){
		.faq-box summary {font-size: 22px; padding: 20px 50px 20px 55px;}
		.faq-box summary::before {left: 15px; top: 20px;}
		.faq-box summary::after {right: 15px;}
		.faq-box .faq-a {padding: 0 20px 22px 55px;}
		.faq-box .faq-a::before {left: 15px; font-size: 22px;}
		.faq-box .faq-a p {font-size: 19px;}
	}

	@media screen and (max-width:769px){
		.faq-box {padding: 30px 0;}
		.faq-box h4 {margin-bottom: 20px;}
		.faq-box summary {font-size: 18px; padding: 16px 40px 16px 42px;}
		.faq-box summary::before {left: 10px; top: 16px;}
		.faq-box summary::after {right: 10px; font-size: 26px;}
		.faq-box .faq-a {padding: 0 10px 18px 42px;}
		.faq-box .faq-a::before {left: 10px; font-size: 18px;}
		.faq-box .faq-a p {font-size: 16px;}
	}