@charset "utf-8";

@import url(common.css);
@import url(slick.css);
@import url(twentytwenty.css);

:root {
    --point-color: #2097EF;
    --white: #fff;
    --skyblue: #FAFDFF;
    --skyblue02: #F4FAFE;
    --grey4: #444;
    --grey8: #888;
}

main {padding-top: 80px;}
main section {padding-top: 150px; padding-bottom: 150px;}

.wrapper {width: 1280px; margin: 0 auto;}
.bg-sky {background-color: var(--skyblue);}
.bg-sky02 {background-color: var(--skyblue02);}

.btn-blue {display: inline-block; color: var(--white); font-size: 18px; line-height: 1; font-weight: 500; background: var(--point-color); border-radius: 40px; padding: 18px 36px; letter-spacing: 0;}
.btn-blue.sm { font-size: 15px; font-weight: 700; padding: 12px 30px; font-weight: 700;}

.dot-list li {position: relative; line-height: 1.5; padding-left: 25px;}
.dot-list li + li {margin-top: 3px;}
.dot-list li::before {content: ''; position: absolute; top: 9px; left: 10px; width: 3px; height: 3px; background: var(--grey4); border-radius: 4px;}

.cm-title {margin-bottom: 60px; text-align: center; font-weight: 800; line-height: 1.4;}
.cm-title span {display: block; margin-bottom: 8px; font-size: 24px; color: var(--point-color); letter-spacing: -0.48px;}
.cm-title h2 {font-size: 50px; letter-spacing: -1px; font-weight: 800;}
.cm-title h2 strong {font-weight: inherit; color: var(--point-color);}
.cm-title p {margin-top: 24px; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; color: var(--grey4);}

.visual {position: relative; margin: 0 50px; padding: 0;}
.visual .visual-slide {position: relative; border-radius: 40px; overflow: hidden; background: #000}
.visual .visual-slide::before {content:''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(246deg, rgba(53, 140, 204, 0.00) 44.69%, rgba(16, 99, 161, 0.40) 69.69%), linear-gradient(263deg, rgba(0, 0, 0, 0.00) 38.53%, rgba(0, 0, 0, 0.60) 80.87%);}

.visual .text-box {position: absolute; z-index: 3; top: 50%; left: 0; width: 100%; transform: translateY(-50%); color: var(--white); line-height: 1.6; padding: 0 120px;}
.visual .text-box strong {font-size: 24px; color: #87CCFF;}
.visual .text-box h2 {margin: 24px 0 40px; font-size: 40px; font-weight: 800;}
.visual .text-box p {font-size: 20px; font-weight: 500;}
.visual > a {position: absolute; z-index:3; bottom: 0; right: 0; padding: 16px 32px; background: var(--white); border-radius: 40px 0 0 0;}
.visual > a::before,
.visual > a::after {content: ''; position: absolute; z-index: 1; width: 40px; height: 40px; background: url(../images/ico/ico_visual_btn_deco01.svg) no-repeat center/cover;;}
.visual > a::before {right: 100%; bottom: 0;}
.visual > a::after {bottom: 100%; right: 0;}
.visual > a span {display: inline-block; font-size: 20px; font-weight: 800; line-height: 40px; color: var(--point-color); padding-right: 64px; background: url(../images/ico/ico_arrow_blue.svg) no-repeat right center;}

.decision ul {display: flex; align-items: stretch; justify-content: space-between; gap: 24px; height: 280px;}
.decision ul li {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 25%; font-size: 18px; font-weight: 700; line-height: 1.5; border-radius: 24px; gap: 4px; letter-spacing: 0;}
.decision ul li span {font-size: 16px; font-weight: 500; line-height: 1.4; color: rgba(102,102,102,0.8); padding-top: 84px; background-repeat: no-repeat; background-position: center top;}
.decision ul li.dcs01 {border: 2px solid #E4F5FF; background: linear-gradient(180deg, rgba(228, 245, 255, 0.00) 0%, rgba(228, 245, 255, 0.30) 100%), #FFF;}
.decision ul li.dcs02 {border: 2px solid #DAF5F4; background: linear-gradient(180deg, rgba(218, 245, 244, 0.00) 0%, rgba(218, 245, 244, 0.30) 100%), #FFF;}
.decision ul li.dcs03 {border: 2px solid #E2EEFF; background: linear-gradient(180deg, rgba(226, 238, 255, 0.00) 0%, rgba(226, 238, 255, 0.30) 100%), #FFF;}
.decision ul li.dcs04 {border: 2px solid #EEF1F4; background: linear-gradient(180deg, rgba(238, 241, 244, 0.00) 0%, rgba(238, 241, 244, 0.30) 100%), #FFF;}
.decision ul li.dcs01 span {background-image: url(../images/ico/ico_dcs01.svg);}
.decision ul li.dcs02 span {background-image: url(../images/ico/ico_dcs02.svg);}
.decision ul li.dcs03 span {background-image: url(../images/ico/ico_dcs03.svg);}
.decision ul li.dcs04 span {background-image: url(../images/ico/ico_dcs04.svg);}
.decision > p {margin-top: 60px; font-size: 20px; font-weight: 700; line-height: 1.6; text-align: center;}
.decision > p strong {font-weight: 700; color: var(--point-color);}

.differ .cm-title {margin-bottom: 80px;}
.differ ol li {display: flex; align-items: center; justify-content: space-between;}
.differ ol li + li {margin-top: 100px;}
.differ ol li:nth-of-type(even) .imgbox {order: 1;}
.differ ol li:nth-of-type(even) .txtbox {order: 0; padding-left: 40px;}
.differ ol li .imgbox {width: 50%; border-radius: 24px; overflow: hidden;}
.differ ol li .txtbox {width: calc(50% - 80px);}
.differ ol li .txtbox span {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-weight: 800; color:var(--white); letter-spacing: -0.32px;border-radius: 40px; overflow: hidden; background-color: var(--point-color);}
.differ ol li .txtbox strong {display: block; margin: 24px 0; font-size: 30px; font-weight: 800; line-height: 1.6;}
.differ ol li .txtbox div {font-size: 20px; font-weight: 500; line-height: 1.6; color: var(--grey4);}
.differ ol li .txtbox div p + p {margin-top: 16px;}

.doctor .cm-title h2 {font-size: 46px; line-height: 1.5;}
.doctor .doctor-infobox {display: flex; align-items: flex-start; justify-content: space-between; width: 1060px; margin: 0 auto;}
.doctor .doctor-infobox .img-mind {width: 517px;}
.doctor .doctor-infobox .img-mind .imgbox {border-radius: 24px; overflow: hidden;}
.doctor .doctor-infobox .img-mind .mind {margin-top: 16px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--point-color); border-radius: 16px; padding: 20px; background: var(--skyblue02);}
.doctor .doctor-infobox .infobox {width: calc(100% - 517px); padding-left: 70px;}
.doctor .doctor-infobox .infobox .name {padding: 36px 0; border-bottom: 1px solid #eee}
.doctor .doctor-infobox .infobox .name strong {font-size: 28px; font-weight: 800; line-height: 1.6;}
.doctor .doctor-infobox .infobox .name p {margin-top: 4px; font-size: 18px; line-height: 1.6; color: var(--grey4);}
.doctor .doctor-infobox .infobox .career {padding-top: 40px;}
.doctor .doctor-infobox .infobox .career strong {display: block; margin-bottom: 8px; font-size: 18px; line-height: 1.6;}
.doctor .doctor-infobox .infobox .career div + div {margin-top: 24px;}
.doctor .doctor-infobox .infobox .career .dot-list {color: var(--grey4);}

.department ul {display: flex; align-items: stretch; justify-content: center; height: 460px;}
.department ul li {position: relative; width: 20%; background: #000; transition: background 0.3s ease;}
.department ul li:hover {background: var(--point-color);}
.department ul li a {position: relative; z-index: 2;display: flex; align-items: center; justify-content: center; height: 100%; color: var(--white); font-size: 27px; font-weight: 800; line-height: 1.4;}
.department ul li::after {content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.3;}
.department ul li.part01::after {background-image: url(../images/pic/pic_department01.jpg);}
.department ul li.part02::after {background-image: url(../images/pic/pic_department02.jpg);}
.department ul li.part03::after {background-image: url(../images/pic/pic_department03.jpg);}
.department ul li.part04::after {background-image: url(../images/pic/pic_department04.jpg);}
.department ul li.part05::after {background-image: url(../images/pic/pic_department05.jpg);}
.department p {margin-top: 60px; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.6;}

.system {text-align: center;}
.system .cm-title {margin-bottom: 50px;}
.system ol {display: flex; align-items: stretch; justify-content: space-between; margin-bottom: 80px; height: 400px; gap: 8px;}
.system ol li {position: relative;display: flex; flex-direction: column; justify-content: flex-end; width: 25%; text-align: center; color: var(--white); border-radius: 16px; padding-bottom: 60px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.system ol li strong {font-size: 28px; font-weight: 800; line-height: 1.4;}
.system ol li p {margin-top: 10px; font-weight: 600; line-height: 1.5;}
.system ol li span {position: absolute; z-index:1; bottom:0; right: 0; width: 55px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--point-color); background-color: var(--white); border-radius: 16px 0 0 0;}
.system ol li span::before,
.system ol li span::after {content: ''; position: absolute; z-index: 1; width: 16px; height: 16px; background: url(../images/ico/ico_visual_btn_deco01.svg) no-repeat center/cover;;}
.system ol li span::before {right: 100%; bottom: 0;}
.system ol li span::after {bottom: 100%; right: 0;}
.system ol li.step01 {background-image: url(../images/pic/pic_system01.jpg);}
.system ol li.step02 {background-image: url(../images/pic/pic_system02.jpg);}
.system ol li.step03 {background-image: url(../images/pic/pic_system03.jpg);}
.system ol li.step04 {background-image: url(../images/pic/pic_system04.jpg);}   

.review {text-align: center; padding: 40px 0; overflow: hidden;}
.review .cm-title {margin-bottom: 50px;}
.review .cm-title h2 {font-size: 46px;}
.review .review-slide {margin-bottom: 50px; padding-bottom: 56px;}
.review .review-slide .slick-slide {transform: translateX(-48%); padding: 0 12px;}
.review .review-slide .slick-slide > div {border: 1px solid #eee; padding: 16px; border-radius: 16px; }
.review .review-slide .slick-slide .bfaf-wrap {width: 100%; margin-bottom: 16px; border-radius: 12px;}
.review .review-slide .slick-slide .txtbox {line-height: 1.4; padding: 8px 0;}
.review .review-slide .slick-slide .txtbox strong {font-size: 18px;}
.review .review-slide .slick-slide .txtbox p {margin-top: 4px; color: #666;}
.review .review-slide .slick-arrow {position: absolute; bottom: 0; left: 50%; width: 30px; height: 20px; text-indent: -9999px;}
.review .review-slide .slick-prev {margin-left: -30px; background: url(../images/ico/ico_swiper_arrow01.svg) no-repeat left center;}
.review .review-slide .slick-next {background: url(../images/ico/ico_swiper_arrow02.svg) no-repeat right center;}
.review .review-slide .slick-next::before {content: ''; position: absolute; z-index: 1; top: 0; left: -0.5px; width: 1px; height: 20px; background: #ccc; border-radius: 2px;}
.review > p {font-weight: 600; line-height: 1.6; letter-spacing: 0;}

.twentytwenty-handle {width: 24px; height: 24px; margin-left: -15px; margin-top: -12px;}
.twentytwenty-left-arrow {margin-left: -13.5px;}
.twentytwenty-right-arrow {margin-right: -13.5px;}
.twentytwenty-left-arrow, 
.twentytwenty-right-arrow, 
.twentytwenty-up-arrow, 
.twentytwenty-down-arrow {border-width: 5px;}
.twentytwenty-left-arrow, .twentytwenty-right-arrow {margin-top: -4.5px;}
.twentytwenty-horizontal .twentytwenty-handle:before, 
.twentytwenty-horizontal .twentytwenty-handle:after {width: 2px; margin-left: -0.7px;}

.faq .cm-title {margin-bottom: 52px;}
.faq .faq-wrap {width: 1060px; margin: 0 auto; border-bottom: 1px solid #EAEAEA;}
.faq .faq-wrap .qbox {cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1.3; padding: 20.5px 44px 20.5px 0; background: url(../images/ico/ico_faq_plus01.svg) no-repeat right 20px center; border-top: 1px solid #EAEAEA; transition: background .3s ease;}
.faq .faq-wrap .qbox:first-child {border-top: 0;}
.faq .faq-wrap .qbox.open {background-image: url(../images/ico/ico_faq_plus02.svg);}
.faq .faq-wrap .abox {display: none; line-height: 1.5; padding: 20.5px; background: #f8f8f8;}

.contact {color: var(--white);background: #0080E0; padding: 120px 0;}
.contact .cm-title {margin-bottom: 45px;}
.contact .cm-title h2 {font-size: 46px;}
.contact .contact-form {width: 500px; margin: 0 auto;}
.contact .contact-form .kboard-attr-row {display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.2)}
.contact .contact-form .kboard-attr-row.kboard-attr-title {display: none;}
.contact .contact-form .kboard-attr-row .tit {flex-shrink: 1; width: 110px; font-size: 18px; font-weight: 800; line-height: 1.5;}
.contact .contact-form .kboard-attr-row .tit .attr-required-text {display: none;}
.contact .contact-form .kboard-attr-row .con {flex-grow: 1;}
.contact .contact-form .kboard-attr-row input[type="text"],
.contact .contact-form .kboard-attr-row input[type="number"],
.contact .contact-form .kboard-attr-row select {height: 60px; background: transparent; border: 0; color: var(--white); font-weight: 500; line-height: 1.5; letter-spacing: -0.36px;}
.contact .contact-form .kboard-attr-row input[type="text"]::placeholder,
.contact .contact-form .kboard-attr-row input[type="number"]::placeholder {opacity: 0.5; font-size: 18px; color: var(--white); font-weight: 400;}
.contact .contact-form .kboard-attr-row.kboard-attr-category1 .con {position: relative;}
.contact .contact-form .kboard-attr-row.kboard-attr-category1 .con::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/ico/ico_select01.svg) no-repeat center/cover;}
.contact .contact-form .kboard-attr-row.kboard-attr-category1 select option {color: #000}
.contact .contact-form .kboard-attr-row.kboard-attr-checkbox {margin: 42px 0 41px; border: 0;}
.contact .contact-form .kboard-attr-row.kboard-attr-checkbox label {display: flex; align-items: center; gap: 8px;}
.contact .contact-form .kboard-attr-row.kboard-attr-checkbox input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.contact .contact-form .kboard-attr-row.kboard-attr-checkbox input[type="checkbox"] + i {position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--white);}
.contact .contact-form .kboard-attr-row.kboard-attr-checkbox input[type="checkbox"]:checked + i {background: url(../images/ico/ico_chk01.svg) no-repeat center/cover;}
.contact .contact-form .kboard-attr-row.kboard-attr-checkbox input[type="checkbox"] + i + p {display: inline-block; font-weight: 500; line-height: 1; letter-spacing: -0.32px;}
.contact .contact-form .board_btn_wrap button {font-size: 18px; line-height: 1.11; letter-spacing: -0.36px; width: 100%; color: #0081E0; background: var(--white); border-radius: 12px; height: 60px;}
.contact .contact-form > p {margin-top: 36px; text-align: center; font-weight: 500; line-height: 1.6; opacity: 0.8; letter-spacing: 0;}

.location {display: flex; justify-content: space-between;}
.location .info-txt {flex-grow: 1;}
.location .cm-title {text-align: left; margin-bottom: 70px;}
.location .cm-title h2 {font-size: 36px; line-height: 1.5; letter-spacing: -0.72px;}
.location .cm-title p {color: var(--grey4);}
.location .time {margin-bottom: 77px;}
.location .time dl {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0}
.location .time dl dt {width: 110px; font-size: 20px; line-height: 1.6; font-weight: 700;}
.location .time dl dd {width: calc(100% - 110px); font-size: 20px; line-height: 1.6; color: var(--grey4);}
.location .time p {margin-top: 19px; font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--grey8);}
.location .info-txt > a {display: block; font-size: 38px; font-weight: 800; line-height: 1.4;}

.location .map-txt {width: 628px; flex-shrink: 0;}
.location .map-txt > div:not(.map-wrap) {line-height: 1.4; padding: 8px 0; margin-bottom: 36px;}
.location .map-txt > div strong {font-size: 24px; font-weight: 800;}
.location .map-txt > div p {margin-top: 8px; font-size: 20px; font-weight: 500; color: var(--grey4);}
.location ul {display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 8px;}
.location ul li {width: 33.33%; gap: 8px; background: #F8F8F8; border-radius: 50px;}
.location ul li a {display: block; width: 100%; height: 100%; text-align: center; padding: 10px 0;}
.location ul li a span {display: inline-block; font-weight: 600; line-height: 1.7; color: #666; padding-left: 32px; background-repeat: no-repeat; background-position: left center; background-size: 24px;}
.location ul li.naver a span{background-image: url(../images/ico/ico_map_n.svg);}
.location ul li.kakao a span {background-image: url(../images/ico/ico_map_k.svg);}
.location ul li.tmap a span {background-image: url(../images/ico/ico_map_t.svg);}

.map-wrap {border-radius: 24px; overflow: hidden; height: 410px;}
.map-wrap .root_daum_roughmap {width: 100% !important; height: 100% !important}
.map-wrap .root_daum_roughmap .wrap_map {width: 100% !important; height: 100% !important}
.map-wrap .map_border,
.map-wrap .wrap_btn_zoom,
.map-wrap .wrap_controllers,
.map-wrap .cont {display: none !important;}

/*****************************************************************************************************************************************************************************************/

@media all and (max-width:1380px) {
	.wrapper {width: 100%; padding-left: 50px; padding-right: 50px;}
	
	.visual .text-box {padding: 0 50px;}
}

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

	.btn-blue.sm {font-size: 14px; padding: 10px 20px;}
}

@media all and (max-width:1024px) {
	.cm-title h2 {font-size: 40px;}

	.visual {margin: 0 24px;}
	.visual .visual-slide {border-radius: 24px; height: 500px;}
	.visual .visual-slide .slick-list,
	.visual .visual-slide .slick-track {height: 100%;}
	.visual .visual-slide .slick-slide {height: 100%;}
	.visual .visual-slide .slick-slide img {position: relative; width: auto; max-width: none; left: 50%; transform: translateX(-50%); height: 100%;}
	.visual .text-box strong {font-size: 20px;}
	.visual .text-box h2 {margin: 20px 0 30px; font-size: 30px; line-height: 1.4;}
	.visual .text-box p {font-size: 16px;}
	.visual > a span {font-size: 18px;}
}

@media all and (max-width:768px) {
	.visual .visual-slide {height: 650px;}
}