@charset "utf-8";

.main-visual {position: relative;}
.main-visual .origin .item {position: relative; height: 100vh;}
.main-visual .origin .item .slide-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.main-visual .origin .item.slick-active .slide-img {transform: scale(1.05); transition: all 4.5s;}

.main-visual .content {position: absolute; max-width: 1530px; width: 100%; height: 100%; padding: 0 15px; top: 0; left: 50%; transform: translateX(-50%);}
.main-visual .content .wrap {height: calc(100% - 100px); display: flex; flex-direction: column; justify-content: center; margin-top: 100px;}
.main-visual .content .wrap .items {margin-bottom: 70px;}
.main-visual .content .text-box h2 {font-size: 60px; line-height: 1.3em; font-weight: 400; color: #fff; margin-bottom: 23px;}
.main-visual .content .text-box h2 span {font-weight: 700;}
.main-visual .content .text-box p {font-size: 20px; line-height: 1.7em; color: #fff; margin-bottom: 40px;}
.main-visual .content .text-box .more-btn {display: block; width: 170px; font-size: 16px; line-height: 55px; font-weight: 700; color: #fff; text-align: center; border: 1px solid #fff; transition: all 0.4s;}
.main-visual .content .text-box .more-btn:hover {background: rgba(255,255,255,0.2);}

.main-visual .content .item.slick-active .text-box h2 {animation: text-right 1.5s both .5s;}
.main-visual .content .item.slick-active .text-box p {animation: text-right 1.5s both .7s;}
.main-visual .content .item.slick-active .text-box .more-btn {animation: text-right 1.5s both .9s;}
@keyframes text-right {0% {transform: translateX(-200px); opacity: 0;} 60% {transform: translateX(30px); opacity: 1;} 100% {transform: translateX(0px); opacity: 1;}}

.main-visual .btn-area {display: flex; align-items: center;} 
.main-visual .paging {margin-right: 35px;}
.main-visual .paging ul li {display: none; font-size: 14px; color: #fff;}
.main-visual .paging ul li.slick-active {display: block;}
.main-visual .paging ul li span {padding: 0 13px;}

.main-visual .pro-wrap {position: relative; width: 180px; height: 2px; background: rgba(255,255,255,0.3); margin-right: 30px;}
.main-visual .pro-bar {position:absolute; top:0; left: 0; width: 0; height:2px; background: #fff;}
.main-visual .pro-ani{animation: proBar 5s 1; width: 100%;}
@keyframes proBar{0%{width: 0;} 100%{width: 100%;}}

.main-visual .arrows {display: flex; align-items: center;}
.main-visual .arrows button {width: 12px; height: 12px; font-size: 0; background-color: transparent; border: none; background-repeat: no-repeat; background-position: 50% 50%; text-align: center;}
.main-visual .arrows .slick-prev {background-image: url('../img/main/btn-prev.png'); margin-right: 32px;}
.main-visual .arrows .slick-next {background-image: url('../img/main/btn-next.png');} 

/* section common */
section {padding: 153px 0 160px;}
.section-title {text-align: center;}
.section-title.left {text-align: left;}
.section-title small {display: inline-block; font-size: 25px; line-height: 1.4em; font-weight: 600; color: #5c367c; margin-bottom: 20px;}
.section-title small.eng {font-size: 22px; letter-spacing: 0.8em; font-weight: 700; color: rgba(102,102,102,0.3); margin-right: -0.8em;} 
.section-title h3 {font-size: 55px; line-height: 1.4em; letter-spacing: -0.03em; font-weight: 700; color: #333;}
.section-title p {font-size: 22px; line-height: 1.6em; color: #666;}

/* section01 */
.section01 .section-title {margin-bottom: 65px;}
.section-content ul.col-4 {display: flex; margin: 0 -13px;}
.section-content ul.col-4 li {width: 25%; padding: 0 13px;}
.section-content ul.col-4 li a {position: relative; height: 100%; background: #fff; transition: all 0.5s;}
.section-content ul.col-4 li a:before {content:''; opacity:0; width:100%; height:100%; position:absolute; top:0; left:0; transition:all 0.6s; animation:bg-pan-left 4s infinite alternate both; background-image: linear-gradient(225deg, #283e7f, #5c367c, #283e7f); background-size: 600% 100%;}
.section-content ul.col-4 li a:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border: 1px solid #ddd; transition:all 0.6s;}
.section-content ul.col-4 li a:hover {background-image: linear-gradient(225deg, #283e7f, #5c367c, #283e7f); animation:bg-pan-left 4s infinite alternate both; box-shadow: 0px 0px 29px 0px rgba(149, 149, 149, 0.31);}
.section-content ul.col-4 li a:hover:before {opacity:1;}
.section-content ul.col-4 li a:hover:after {border: 1px solid #283e7f; z-index: 10;}
@keyframes bg-pan-left{0%{background-position:100% 50%}100%{background-position:0 50%}}

.section-content ul.col-4 li .img-box {position: relative; z-index: 5; transition: all 0.5s;}
.section-content ul.col-4 li .img-box img {width: 100%;}
.section-content ul.col-4 li .text-box {padding: 38px 10px 31px; text-align: center;}
.section-content ul.col-4 li .text-box h4 {font-size: 28px; line-height: 1.4em; font-weight: 700; color: #333; margin-bottom: 10px; transition: all 0.6s; position: relative; z-index: 11;}
.section-content ul.col-4 li .text-box p {font-size: 18px; line-height: 1.6em; color: #666; margin-bottom: 10px; transition: all 0.6s; position: relative; z-index: 11;}
.section-content ul.col-4 li .text-box .button {font-size: 16px; font-weight: 700; color: #5c367c; margin-bottom: 0; transition: all 0.6s; position: relative; z-index: 11;}
.section-content ul.col-4 li a:hover .text-box h4 {color: #fff;}
.section-content ul.col-4 li a:hover .text-box p {color: rgba(255,255,255,0.6);}
.section-content ul.col-4 li a:hover .text-box .button {letter-spacing: 0.2em; color: #fff;}

/* section02 */
.section02 {background-image: url('../img/main/bg-signature.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.section02 .wrap {position: relative; }
.section02 .section-title {max-width: 590px; width: 100%; padding-bottom: 220px; padding-right: 40px;}
.section02 .section-title small {margin-bottom: 43px;}
.section02 .section-title h3 {margin-bottom: 28px;}
.section02 .section-title p {margin-bottom: 70px;}

.section02 .arrows .slick-arrow {position: relative; width: 70px; height: 70px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; transition: all 0.5s;}
.section02 .arrows .slick-prev {background-image: url('../img/main/btn-prev02.png');}
.section02 .arrows .slick-next {background-image: url('../img/main/btn-next02.png'); margin-left: -1px;} 
.section02 .arrows .slick-prev:hover {background-image: url('../img/main/btn-prev02-on.png');}
.section02 .arrows .slick-next:hover {background-image: url('../img/main/btn-next02-on.png');}

.section02 .items {position: absolute; top: 0; left: 590px; width: 1265px; margin: 0 -15px; overflow: hidden;}
.section02 .item {padding: 0 15px;}
.section02 .item .img-box {overflow: hidden;}
.section02 .item img {transition: all 0.6s;}
.section02 .item a:hover img {transform: scale(1.05);}
.section02 .item .text-box {padding: 38px 0;}
.section02 .item .text-box h4 {font-size: 30px; line-height: 1.4em; font-weight: 700; color: #333; margin-bottom: 10px; transition: all 0.6s;}
.section02 .item a:hover .text-box h4 {color: #283e7f;}
.section02 .item .text-box p {font-size: 18px; line-height: 1.6em; color: #666;}

.section02 .bar {display: flex; max-width: 910px; margin: 0 0 0 auto;}
.section02 .bar .progress {width: 1%; height: 4px; flex: 1 1 auto; overflow: hidden; background-color: rgba(102,102,102,0.2); background-image: linear-gradient(to right, #666, #666); background-repeat: no-repeat; background-size: 16.666% 100%; transition: all .6s ease-in-out;}

/* section03 */
.section03 {background-image: url('../img/main/bg-specialness.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; padding: 160px 0 180px;}
.section03 .section-title {margin-bottom: 53px;}
.section03 .section-title small.eng {color: rgba(255,255,255,0.3); margin-bottom: 33px;}
.section03 .section-title h3 {color: #fff; margin-bottom: 28px;}
.section03 .section-title p {color: #fff;}
.section03 .section-content ul {display: flex; margin: 0 -42px; padding: 0 45px;}
.section03 .section-content ul li {width: 25%; padding: 0 42px;}
.section03 .section-content ul li .img-box {position: relative; padding-bottom: 62px;} 
.section03 .section-content ul li .img-box:after {content: ''; width: 1px; height: 40px; background-image: url('../img/main/specialness-line.png'); background-repeat: no-repeat; background-position: 50% 50%; position: absolute; bottom: 13px; left: 50%;}
.section03 .section-content ul li .text-box {text-align: center;}
.section03 .section-content ul li .text-box h4 {font-size: 28px; line-height: 1.3em; font-weight: 700; color: #fff; margin-bottom: 17px;} 
.section03 .section-content ul li .text-box p {font-size: 18px; color: rgba(255,255,255,0.5);} 

/* section04 */
.section04 {position: relative; padding: 195px 0 0;}
.section04:before {content: ''; width: 60%; height: 100%; background: #f2f5fa; position: absolute; top: 0; left: 0; z-index: -3;}
.section04:after {content: ''; width: 381px; height: 381px; background-image: url('../img/main/doctor-symbol.png'); background-repeat: no-repeat; background-position: 50% 50%; position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); margin-left: -265px; z-index: -2;}
.section04 .wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
.section04 .section-title {position: relative; max-width: 1060px; width: 100%; padding-bottom: 360px;}
.section04 .section-title small.eng {color: rgba(136,136,136,0.3); margin-bottom: 40px;}
.section04 .section-title h3 {font-size: 53px; margin-bottom: 85px;}

.section04 .btn-area a {position: relative; display: inline-block; font-size: 18px; font-weight: 600; color: #333; padding-right: 50px; transition: all 0.6s; z-index: 10;} 
.section04 .btn-area a:after {content: ''; width: 7px; height: 10px; background-image: url('../img/main/btn-more.png'); background-repeat: no-repeat; background-position: 50% 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.4s;}
.section04 .btn-area a:hover {color: #283e7f;}
.section04 .btn-area a:hover:after {right: -5px;}

.section04 .section-title .img-box {position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; background-image: url('../img/main/doctor01.png'); background-repeat: no-repeat; background-position: right center; background-size: contain; z-index: -1;}
.section04 .section-content {max-width: 440px; width: 100%; padding-top: 80px;}
.section04 .section-content h4 {font-family: "Noto Serif KR", serif; font-size: 30px; line-height: 1.4em; color: #333; margin-bottom: 30px;}
.section04 .section-content h4 span {font-size: 50px; color: #283e7f;}
.section04 .section-content ul li {position: relative; font-size: 18px; line-height: 2em; color: #666; padding-left: 18px;} 
.section04 .section-content ul li:before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #5c367c; position: absolute; top: 15px; left: 4px;} 

/* section05 */
.section05 {position: relative; padding-bottom: 0;}
.section05:before {content: ''; width: 100%; height: 340px; background: #f7f7f7; position: absolute; bottom: 0; left: 0;}
.section05 .section-title small {margin-bottom: 27px;}
.section05 .section-title h3 {margin-bottom: 28px;}
.section05 .section-title p {margin-bottom: 70px;}
.section05 .section-content ul.col-4 li a {height: 100%;}
.section05 .section-content ul.col-4 li .text-box {border: 1px solid transparent;}

/* section06 */
.section06 {position: relative; padding: 158px 0 0;}
.section06:before {content: ''; width: 100%; height: 630px; background: #f7f7f7; position: absolute; top: 0; left: 0;}
.section06 .section-title h3 {margin-bottom: 52px;}
.section06 .section-title p {font-size: 25px; line-height: 1.5em; color: #333; margin-bottom: 90px;}
.section06 .item {padding: 0 15px;}
.section06 .slick-slide {float: right;}

/* section07 */
.section07 {position: relative; padding: 153px 0 200px;}
.section07:before {content: ''; width: 34%; height: 100%; background: linear-gradient(120deg, rgba(92,54,124,1) 0%, rgba(40,62,127,1) 100%); position: absolute; top: 0; right: 0;}
.section07 .info-wrap {display: flex; justify-content: space-between; align-items: flex-end;}
.section07 .text-box {max-width: 660px; width: 100%; padding-right: 55px;}
.section07 .section-title small {font-size: 22px; color: #666; opacity: 0.5; margin-bottom: 24px;}
.section07 .section-title h3 {margin-bottom: 24px;}
.section07 .info {border-top: 1px solid #283e7f;}

.section07 .info dl {display: flex; border-bottom: 1px solid #ddd; padding: 25px 0;} 
.section07 .info dt {position: relative; width: 134px; font-size: 22px; font-weight: 700; color: #283e7f;}
.section07 .info dt:after {content: ''; width: 1px; height: 15px; background: #ddd; position: absolute; top: 7px; right: 0;}
.section07 .info dd {font-size: 22px; font-weight: 600; color: #333; margin-left: 25px;}
.section07 .info .kakao {align-items: center; padding: 13px 0;}
.section07 .info .kakao dd {display: flex; align-items: center; height: 52px; background: #f5dd01; border-radius: 26px; padding: 0 20px; text-align: center;} 
.section07 .info .kakao dd img {padding-right: 5px;}
.section07 .info .kakao dd a {font-weight: 700; color: #333;}
.section07 .info .hours {padding: 27px 0;}
.section07 .info .hours dd p {font-weight: 400; color: #666;}
.section07 .info .hours dd p:not(:last-child) {margin-bottom: 14px;}
.section07 .info .hours dd span {display: block; width: auto; padding-right: 25px; font-weight: 700; color: #333; /* text-align-last: justify; */ letter-spacing:-.05em; margin-bottom: 5px;} 
.section07 .info .address b {display: block; font-weight: 600;}
.section07 .info .address b span {font-weight: 400; color: #666;}
.section07 .info .address p {font-weight: 400; margin: 7px 0;}
.section07 .info .blog {padding: 15px 0;}
.section07 .info .blog dd {background: #32b44a; border-radius: 12px; padding: 15px 30px 15px 25px;}
.section07 .info .blog dd a {display: flex; justify-content: center; align-items: center; color: #fff; line-height: 1.2em; text-align: left;}
.section07 .info .blog dd a span {font-size: 18px; font-weight: 400;}
.section07 .info .blog img {margin-right: 10px;}

.section07 .map {max-width: 850px; width: 100%; height: 680px; border: 10px solid #fff; }
.section07 .map iframe {width: 100%; height: 100%}
.section07 .root_daum_roughmap {width:100% !important; height:680px !important; border: 10px solid #fff; margin-top: 10px;}
.section07 .root_daum_roughmap .wrap_map {height:680px !important;}
.section07 .root_daum_roughmap .map_border {border: 10px solid #fff; !important; width:0 !important; height:0 !important;}