@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {text-align:center; margin-bottom:40px;}
.doc-tit h3 {position:relative; display:inline-block; font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.0em;}
.doc-tit p {font-size:20px; letter-spacing:-.02em; line-height:1.700em; margin-top:30px; color:#fff;}
.doc-tit h3:after {position:absolute; content:""; left:-20px; top:0; width:1px; height:100%; background:#505050;}
.doc-tit h3:before {position:absolute; content:""; right:-20px; top:0; width:1px; height:100%; background:#505050;}
.doc-tit.color h3 {color:#fff;}
.doc-tit.color h3:after {background:#fff;}
.doc-tit.color h3:before {background:#fff;}
.doc-tit.none {display:inline-block; position:relative; text-align:center;}
.doc-tit.none:before {position:absolute; content:""; top:0; left:0; width:25px; height:25px; background:url("../images/sub/self.png")50% 50% no-repeat; background-size:contain;}
.doc-tit.none h3 {color:#505050; padding-left:40px;}
.doc-tit.none h3:after {display:none;}
.doc-tit.none h3:before {display:none;}

.sub-tit {text-align:center; font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.167em; margin-bottom:35px;}

#sub .cnt {margin-bottom:100px;}
#wrapper {overflow:hidden;}

.doctor .img img {width:100%; min-width:1920px; border-bottom:1px solid #ccc;}
.doctors .doctor-box {padding-top:55px;}
.doctors .doctor-box h3 {font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.273em; margin-bottom:20px;}
.doctors .doctor-box p {font-size:18px; color:#505050; letter-spacing:-.02em; line-height:1.556em; margin-top:15px;}

.diagnosis {position:relative; background:url("../images/sub/diagnosis-bg.jpg")50% 50% no-repeat; height:720px; background-size:cover;}
.diagnosis .diagnosis-box {display:flex; justify-content:center; padding-top:100px; background:#fff; max-width:1200px; width:100%; position:absolute; top:80px;}
.diagnosis .diagnosis-time {position:relative; padding:0 130px;}
.diagnosis .diagnosis-time:before {position:absolute; content:""; width:1px; top:50%; margin-top:-140px; right:0; background:#ddd; height:280px;}
.diagnosis .diagnosis-time:last-child:before {display:none;}
.diagnosis .diagnosis-time .img {font-size:20px; font-weight:700; text-align:center;}
.diagnosis .diagnosis-time .img img {display:block; margin:0 auto 20px;}
.diagnosis .diagnosis-time h3 {font-size:45px; font-weight:700; color:#12a19a; line-height:1.3em; text-align:center;}
.diagnosis .diagnosis-time .txt {color:#505050; text-align:center; margin-bottom:35px;}
.diagnosis .diagnosis-time .btn {position:relative; display:inline-block; width:337px; line-height:57px; background:#12a19a; padding-right:40px; text-align:right; margin:0 auto; color:#fff; font-weight:700;}
.diagnosis .diagnosis-time .btn:before {position:absolute; content:""; top:50%; margin-top:-14px; left:30px; width:38px; height:28px; background:url("../images/sub/reservation.png")50% 50% no-repeat; background-size:contain;}
.diagnosis .location-info {padding:15px 0; border-bottom:1px solid #ccc;}
.diagnosis .location-info dl {display:flex; padding:7px 0;}
.diagnosis .location-info dt {font-size:20px; font-weight:600; width:120px; position:relative;}
.diagnosis .location-info dl:last-child dt {color:#1252a1;}
.diagnosis .location-info dt img {margin-right:10px;}
.diagnosis .location-info dd {flex:1 1 auto; min-width:0; width:1%; font-size:18px; color:#505050;}
.diagnosis .location-info dd span {color:#808080;}
.diagnosis .s-txt {padding:15px 0;}
.diagnosis .s-txt span {color:#d92020;}

.loations {margin-top:50px;}
.loations ul {display:flex;}
.loations ul li {position:relative; width:33.3333%; text-align:center;}
.loations ul li:before {position:absolute; content:""; top:0; right:0; width:1px; height:100%; background:#ddd;}
.loations ul li:last-child:before {display:none;}
.loations ul li span {color:#08b3de; font-weight:600;}
.loations ul li .tit {font-size:28px; font-weight:700; letter-spacing:-.02em; padding:15px 0 20px;}
.loations ul li .txt {font-size:18px; letter-spacing:-.02em;}


.prod-tab-menu {position:relative; margin-bottom:80px;overflow:hidden;}
.prod-tab-menu:after {content:"";position:absolute; bottom:0; left:0; width:100%; height:1px; background:#12a19a; z-index:0}
.prod-tab-menu ul {display:flex; max-width:1200px; margin:0 auto;}
.prod-tab-menu ul:after {content:"";display:block;clear:both;}
.prod-tab-menu ul li {flex:1; text-align:center;}
.prod-tab-menu ul li a {display:block; position:relative; font-size:18px;line-height:60px; color:#2c2c2c; font-weight:500; background:#fff;border:1px solid #dfdfdf; border-left:0;  z-index:1;}
.prod-tab-menu ul li a:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%;  border-bottom:1px solid #12a19a;}
.prod-tab-menu ul li:first-child a {border-left:1px solid #dfdfdf;}
.prod-tab-menu ul li.active a {color:#12a19a;  border-color:#12a19a; border-bottom-color:#fff; z-index:2}
.prod-tab-menu ul li.active a:after {border:2px solid #12a19a; border-bottom:0;}

.sub-tab-fixed .sub-tab-menu {position:fixed; top:0; left:0; width:100%; z-index:50}
.sub-tab-fixed .prod-head {margin-bottom:60px;}

.veins {display:flex; justify-content:flex-end;}
.veins .txt-box {padding-left:150px;}	
.veins .txt-box h4 {font-size:22px; color:#878787; font-weight:400; line-height:1.273em; letter-spacing:-.02em;}
.veins .txt-box .tit {font-size:26px; color:#12a19a; font-weight:600; letter-spacing:-.02em; line-height:1.077em; margin:10px 0 20px;}
.veins .txt-box .txt {font-size:18px; color:#505050;}

.symptoms {background:url("../images/sub/symptoms.jpg")50% 50% no-repeat; background-size:cover; padding:80px 0; color:#fff;}
.symptoms-box ul {display:flex; flex-wrap:wrap; margin-bottom:20px;}
.symptoms-box ul li {position:relative; width:50%; font-size:20px; color:#fff; letter-spacing:-.02em; line-height:1.400em; padding-left:30px; margin-bottom:15px;}
.symptoms-box ul li:before {position:absolute; content:""; top:5px; left:0; width:19px; height:17px; background:url("../images/sub/check.png")50% 50% no-repeat; background-size:contain;}
.symptoms-box .tit {font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.167em; text-align:center; margin-bottom:20px;}
.symptoms-box .txt {font-size:18px; line-height:1.556em; letter-spacing:-.02em; text-align:center;}
.symptoms-box .txt span {color:#17d0c7;}

.process-list {position:relative; margin-bottom:300px;}
.process-list .txts-box {position:absolute; bottom:-130px; right:190px; text-align:center;}
.process-list .txts-box p {position:relative; font-size:20px;}
.process-list .txts-box span {font-weight:700; color:#12a19a;}
.process-list .txts-box p:before {position:absolute; content:""; width:354px; height:96px; left:0; top:-107px; background:url("../images/sub/list-ico.png")50% 50% no-repeat; background-size:contain;}
.process ul {display:flex; flex-wrap:wrap; margin-left:-60px; margin-bottom:-60px;}
.process ul li {position:relative; width:calc(33.3333% - 60px); margin-left:60px; margin-bottom:60px;}
.process ul li:before {position:absolute; content:""; width:32px; top:50%; margin-top:-18px; right:-45px; height:36px; background:url("../images/sub/next-ico.png")50% 50% no-repeat; background-size:contain;}
.process ul li:nth-child(3):before,
.process ul li:nth-child(6):before {display:none;}
.process ul li .txt-box {display:flex; align-items:center; justify-content:center; background:#f9f9f9; text-align:center; border:1px solid #dfdfdf; min-height:125px; padding:20px 0;}

.cause ul {display:flex; flex-wrap:wrap; margin:0 -30px; margin-bottom:-60px;}
.cause ul li {width:33.3333%; margin-bottom:60px; padding:0 30px;}
.cause ul li .tit {position:relative; font-size:20px; font-weight:600; letter-spacing:-.02em; border-bottom:1px solid #ddd; padding:25px 0 10px; margin-bottom:15px;}
.cause ul li .tit:before {position:absolute; content:""; left:0; bottom:0; width:30px; height:3px; background:#12a19a;}
.cause ul li .txt {color:#505050;}

.prevent ul {display:flex; margin-left:-10px;}
.prevent ul li {width:calc(33.3333% - 10px); margin-left:10px; background:#f9f9f9; border:1px solid #dfdfdf; margin-bottom:10px; text-align:center; min-height:369px; padding:40px 0 30px;}
.prevent.wd ul li {background:#fff;}
.prevent ul li .tit {font-weight:700; margin:15px 0;}

.tests .test-inner {display:flex; align-items:center; background:#f9f9f9;}
.tests .test-inner:nth-child(2) {flex-direction:row-reverse;}
.tests .test-inner .tests-box {width:50%; padding:0 50px;}
.tests .test-inner .tests-box .tit {font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.3em;}
.tests .test-inner .tests-box .txt {font-size:18px; color:#505050; font-weight:600; letter-spacing:-.02em; line-height:1.667em; padding:20px 0 10px;}
.tests .test-inner .tests-box .s-txt {font-size:18px; color:#505050;}

.preservation {text-align:center;}
.preservation h3 {font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.0em; margin-bottom:30px;}
.preservation .txts {font-size:18px; color:#505050; margin-top:10px;}
.preservation-list {margin-bottom:120px;}
.preservation-list h4 {font-size:24px; color:#12a19a; font-weight:600; line-height:1.167em; text-align:center; margin:40px 0 25px;}
.preservation-list ul {display:flex; margin-left:-10px;}
.preservation-list ul li {width:calc(20% - 10px); margin-left:10px; text-align:center; border:1px solid #ddd; padding:45px 0;}
.preservation-list ul li p {color:#505050; padding-top:15px;}

.surgery {display:flex; margin-bottom:130px;}
.surgery.pb {margin-bottom:30px;}
.surgery-flex {margin-bottom:130px;}
.surgery h4 {width:30%; font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.167em; margin-top:50px;}
.surgery .surgery-box {width:70%;}
.surgery .surgery-box .surgery-inner {position:relative; margin-bottom:30px; padding-left:50px; padding-top:10px;}
.surgery .surgery-box .surgery-inner:before {position:absolute; content:""; left:0; top:0; width:2px; height:100%; background:#eee;}
.surgery .surgery-box .surgery-inner .txt {font-size:18px; padding:15px 0;}
.surgery .surgery-box .surgery-inner .txt span {color:#12a19a;}
.surgery .surgery-box .tit {font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.556em;}

.img-flex {position:relative; display:flex;}
.img-flex:before {position:absolute; content:""; left:0; top:0; width:100%; height:100%; border:1px solid #ddd;}
.img-flex:after {position:absolute; content:""; left:50%; top:0; width:1px; height:100%; background:#ddd;}
.img-flex .img {width:100%;}
.img-flex .img img {width:100%;}

.precautions {background:rgba(18, 161, 154, 0.05); padding:120px 0;}
.precautions-inner ul {display:flex; flex-wrap:wrap; margin-left:-20px;}
.precautions-inner ul li {width:calc(50% - 20px); align-items:center; margin-left:20px; display:flex; border:1px solid #ddd; margin-bottom:20px; background:#fff; padding:20px 25px; max-height:100px;}
.precautions-inner ul li .box {display:inline-block; background:#12a19a; min-width:52px; line-height:50px; border-radius:100%;}
.precautions-inner ul li .tit {position:relative; text-align:center; color:#fff; font-size:22px;}
.precautions-inner ul li .tit:before {position:absolute; content:""; width:1px; height:100%; background:#ddd; top:0; right:-20px;}
.precautions-inner ul li .txt {padding-left:40px;}

.burns {display:flex; align-items:center;}
.burns .img {width:54%;}
.burns .txt-box {width:46%; margin-left:35px;}
.burns .txt-box .tit {font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.385em; margin-bottom:20px;}
.burns .txt-box .tit span {color:#12a19a;}
.burns .txt-box .txt {font-size:18px; color:#505050; letter-spacing:-.02em; line-height:1.667em;}
.burns .txt-box .txt span {color:#2c2c2c; font-weight:500;}
.burns-flex ul {display:flex; justify-content:center;}
.burns-flex ul li {padding:0 20px;}
.burns-flex ul li .box {display:flex; align-items:center; width:200px; height:198px; background:#12a19a; border-radius:100%; text-align:center; justify-content:center;}
.burns-flex ul li .box .tit {font-size:22px; color:#fff; font-weight:600;}
.burns-flex .txts {text-align:center; font-size:18px; margin-top:35px;}
.burns-flex .txts span {color:#2c2c2c; font-weight:500;}

.defense {background:url("../images/sub/defense.jpg")50% 50% no-repeat; background-size:cover; padding:100px 0;}

.type-box .type-flex:last-child {margin-bottom:0;}
.type-flex {display:flex; align-items:center; margin-bottom:30px;}
.type-flex .img {width:30%;}
.type-flex .txt-box {width:70%; padding-left:80px;}
.type-flex .txt-box h4 {font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.5em; margin-bottom:25px;}
.type-flex .txt-box ul li {position:relative; margin-bottom:10px; padding-left:15px;}
.type-flex .txt-box ul li:before {position:absolute; content:""; width:6px; height:6px; left:0; top:10px; background:#ddd; border-radius:100%;}

.self-diagnosis {text-align:center;}
.self-diagnosis ul {display:flex;}
.self-diagnosis ul li {position:relative; width:33.3333%; font-size:18px; letter-spacing:-.02em; line-height:1.667em; padding-top:30px;}
.self-diagnosis ul li:before {position:absolute; content:""; width:20px; height:20px; border:1px solid #ddd; background:#fff; left:50%; margin-left:-10px; top:0;}

.doctor {position:relative;}
.doctor:before {position:absolute; content:""; left:0; top:0; width:50%; height:100%; background:rgba(0, 0, 0, 0.6);}
.doctor .caption {position:absolute; top:50%; left:360px; width: 100%; padding: 0 30px; text-align:left; z-index: 45; transform: translateY(-50%); color: #fff;}
.doctor h3 {font-size:22px; letter-spacing:-.02em; line-height:1.273em;}
.doctor ul {margin:15px 0 40px;}
.doctor ul li {position:relative; font-size:18px; letter-spacing:-.02em; line-height:1.778em; padding-left:15px;}
.doctor ul li:before {position:absolute; content:""; left:0; top:13px; width:6px; height:6px; background:#ccc; border-radius:100%;}

.reservation {position:relative;}
.pop {min-width:660px; position:absolute; top:50px; left:50%; padding:60px; background:#fff; transform: translateX(-50%);}
.pop h3 {font-size:30px; font-weight:400; text-align:center; letter-spacing:-.02em; line-height:1.467em;}
.pop h3 span {color:#12a19a; font-weight:700;}
.clicks {margin-top:40px;}
.clicks ul {display:flex; margin-left:-10px;}
.clicks ul li {width:calc(50% - 10px); line-height:68px; margin-left:10px; background:#505050; font-size:28px; font-weight:700; letter-spacing:-.02em; text-align:center; color:#fff;}
.clicks ul li a {display:block;}	
.clicks ul li:last-child {background:#12a19a;}