.sub-tab {text-align:center; margin-bottom:30px;}
.sub-tab ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-5px -10px;}
.sub-tab ul li {padding:5px 10px;}
.sub-tab ul li a {display:block; min-width:125px; padding:0 15px; color:#454545; font-size:1.125em; font-weight:500; line-height:43px; background:#fff; border: 1px solid #ddd; border-radius:50vh;}
.sub-tab ul li a:hover {color:#5bccff;}
.sub-tab ul li.active a {background:#5bccff; border-color:#5bccff; color:#fff !important; ;}

.sub-table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #242424; border-bottom:1px solid #868686; line-height:1.5em; letter-spacing:-.03em;}
.sub-table table th {padding:23px 20px; border:1px solid #eee; background:#fafafa; font-weight:500; color:#333;}
.sub-table table td {padding:23px 20px; border:1px solid #eee; color:#505050;}
.sub-table tr th:first-child,
.sub-table tr td:first-child {border-left:0;}
.sub-table tr th:last-child,
.sub-table tr td:last-child {border-right:0;}
.sub-table tr:last-child th,
.sub-table tr:last-child td {border-bottom:0;}

.doc-group {margin-bottom: 120px;}
.doc-group:last-child {margin-bottom: 0;}
.doc-tit {color: #242424; font-size:25px; letter-spacing:-.03em; margin-bottom: 20px;}
.doc-cnt {}

.doc-group.flex {display: flex;}
.doc-group.flex .doc-tit {width: 300px;}
.doc-group.flex .doc-cnt {flex: 1 1 auto; min-width: 0; width: 1%;}

.dot-list li {position: relative; padding-left: 14px;}
.dot-list li:before {content:''; position: absolute; top: 8px; left: 0; width: 5px; height: 5px; background-color: #a05db4; border-radius:100%;}

.blt-list > li{position:relative; padding-left:45px; color:#454545; font-size: 1.125em; line-height: 1.522em; letter-spacing: -.02em; margin-bottom: 1em;}
.blt-list.lg > li{font-size: 23px; font-weight: 500;}
.blt-list > li:last-child{margin-bottom:0;}
.blt-list > li:before{content:""; width:32px; height:32px; position:absolute; top:-2px; left:0; background-image:url("../images/sub/blt.png"); background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.blt-list.lg > li:before{top: 3px;}

.yellowBox {color: #454545; background-color: #f7f1d7; padding: 45px 25px 65px; text-align: center;}
.greyBox {color: #454545; background-color: #f4f4f4; padding: 27px 30px; font-size: 25px; line-height: 1.6; letter-spacing: -.02em;}

.btn-apply {display: inline-block; padding: 0 25px; border-radius:50vh; background-color: #014099; color: #fff; font-size: 1.125em; font-weight: 500; line-height: 48px; letter-spacing: -.03em;}
.btn-apply i {display: inline-block; vertical-align:middle; margin: -.2em 0 0 26px; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translate(0,0); transition:.4s;}
.btn-apply:hover i {transform:rotate(45deg) translate(2px,-2px);}
.btn-apply.ty2 {background:#e6e6e6; color: #454545;}
.btn-apply.ty2 i {border-color:#454545;}

.top-txt {text-align: center; color: #454545; font-size: 1.375em; font-weight: 500; line-height: 1.65; margin-bottom: 40px;}
.txt-grey {color: #686868;}
.txt-red {color: #ff0000;}
.txt-black {color: #454545;}
.fsz18 {font-size: 1.125em;}



/* introduce */
.introduce {margin-bottom: 75px;}
.introduce .yellowBox {font-size: 1.375em; line-height: 1.591; letter-spacing: -.03em; margin-bottom: 65px;}
.introduce .yellowBox h3 {margin-bottom: 35px;}
.introduce .txt {font-size: 1.375em; font-weight: 500; text-align: center;}
.introduce .txt .t1 {}
.introduce .txt .t1 strong {font-size: 1.364em;}
.introduce .txt .t2 {display: flex;justify-content: space-between; font-size: 1.136em; margin: 35px 0;}
.introduce .txt .t2 span {display: inline-block; padding: 0 3px; margin: 0 32px; font-family: 'MICEGothic Bold'; font-weight: 700; line-height: 1.2; box-shadow: inset 0 -.9em 0 #dbf6bd;}
.introduce .txt .t3 {color: #454545;}

/* vision */
.vision {text-align: center; color: #454545; font-size: 1.375em; line-height: 1.5; letter-spacing: -.02em; background-color: #f4f4f4; padding: 35px;}
.vision .c1 {color: #00a0e9;}
.vision .c2 {color: #a05db4;}

/* information */
.information .wrap {display: flex;justify-content: space-between; max-width: 1090px; margin: 0 auto;}
.information .box {width: calc(50% - 20px); background-color: #f4f4f4; padding: 30px 20px; border-radius:30px; text-align: center;}
.information .box .tit {font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; margin: 12px 0 10px;}
.information .box .txt {color: #454545; font-size: 1.063em; line-height: 1.294em; letter-spacing: -.01em;}
.information .box .txt b {font-size: 1.176em;}
.information .box .tip {color: #ff0000; font-size: 1.125em; font-weight: 600; line-height: 1.3; letter-spacing: -01px; margin-top: 14px;}

/* history */
.history {position: relative;}
.history:before {content:''; position: absolute; top: 2px; bottom: 2px; left: 128px; border: 3px dashed #ddd;}
.history .group {position: relative; display: flex; margin-bottom: 70px;}
.history .group:last-child {margin-bottom: 0;}
.history .group:after {content:''; position: absolute; top: 2px; left: 119px; width: 24px; height: 24px; background-color: #fff; border:6px solid #a05db4; border-radius:100%;}
.history .year {width: 128px; font-size:30px; font-weight:600; letter-spacing:-.03em;}
.history .list {flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 50px;}
.history .list ul li {display: flex; color: #686868; font-size: 1.125em; margin-bottom: .5em;}
.history .list ul li:last-child {margin-bottom: 0;}
.history .list ul li .month {font-size: 1.056em; color: #454545; font-weight: 600; min-width: 94px;}

/* 포괄적 성교육 */
.sex-educa {text-align: center;}
.sex-educa .txt {color: #454545; font-size: 30px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; margin-bottom: 40px;}

/* 체험관 */
.center-type {}
.center-type .head {margin-bottom: 70px;}
.center-type .body {}
.center-type .body .group {display: flex; margin-bottom: 30px; padding: 30px; border: 1px solid #ddd;}
.center-type .body .group .img {width: 450px; margin-right: 50px;}
.center-type .body .group .cnt {flex: 1 1 auto; min-width: 0; width: 1%;}
.center-type .body .cnt .tit {font-size: 25px; font-weight: 700; line-height: 1.4; padding: 17px 0; margin-bottom: 15px; border-bottom: 1px solid #ddd;}
.center-type .body .cnt .tit .num {display: inline-block; vertical-align: middle; width: 35px; line-height: 35px; font-size: 20px; font-weight: 500; color: #fff; background-color: #ea5413; border-radius:100%; margin-right: 12px; text-align: center;}
.center-type .body .cnt .desc {color: #454545; font-size: 1.063em; line-height: 1.471em;}

/* location */
.root_daum_roughmap {width:100% !important;}
.location {color: #454545;}
.location .addr {padding: 20px 0; margin-bottom: 35px; border-bottom: 1px solid #ddd; font-size: 1.125em; font-weight: 500; line-height: 1.65; letter-spacing: -.02em;}
.location .addr p {position: relative; padding-left: 40px;}
.location .addr i {position: absolute; top: 0; left: 0; width: 20px; height: 29px; background: no-repeat url("../images/sub/ico_addr.png") center center / contain;}
.location .traffic-info {display: flex;}
.location .traffic-info dl {width: 50%;}
.location .traffic-info dl dt {font-size: 1.375em; font-weight: 600; line-height: 1.4; letter-spacing: -.02em;}
.location .traffic-info dl dd {font-size: 1.063em; font-weight: 500; letter-spacing: -.02em;}
.location .traffic-info dl dd .row {margin: 12px 0;}
.location .traffic-info dl dd span {display: inline-block; min-width: 60px; padding: 0 12px; margin-right: 12px; color: #fff; font-weight: 300; font-size: 14px; line-height: 27px; text-align: center; border-radius:50vh;}
.location .traffic-info dl dd span.line7 {background-color: #747f00;}
.location .traffic-info dl dd span.lineSL {background-color: #6789ca;}
.location .traffic-info dl dd span.maeul {background-color: #46af1b;}
.location .traffic-info dl dd span.jisun {background-color: #46af1b;}
.location .traffic-info dl dd span.kansun {background-color: #6175f5;}
.location .tip {color: #686868; font-size: 1.125em; font-weight: 500; line-height: 1.65; letter-spacing: 0; margin-top: 25px;}

/* program */
.program .head {margin-bottom: 70px;}
.program .yellowBox {padding: 70px 25px; color: #454545;}
.program .yellowBox .t1 {font-size: 1.188em; line-height: 1.579; margin-bottom: 50px;}
.program .yellowBox .t1 strong {display: block; color: #242424; font-size: 1.579em; line-height: 1.4; margin-bottom: 0.633em;}
.program .yellowBox .t2 {}
.program .yellowBox .t2 ul {display: inline-block; text-align: left;}
.program .yellowBox .t2 ul li {position: relative; padding-left: 20px;}
.program .yellowBox .t2 ul li:before {content:''; position: absolute; top: 10px; left: 0; width: 8px; height: 8px; background-color: #a05db4; border-radius:100%;}

.program-list {}
.program-list .group {position: relative; display: flex;align-items:center; border: 1px solid #ddd; padding: 30px 50px; margin-bottom: 30px;}
.program-list .group:last-child {margin-bottom: 0;}
.program-list .group .thumb {width: 220px; margin-right: 48px;}
.program-list .group .cnt {flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 200px;}
.program-list .group .cnt .tit {font-size: 1.563em; line-height: 1.4; margin-bottom: 20px;}
.program-list .group .cnt .desc {color: #454545; line-height: 1.563; letter-spacing: -.02em;}
.program-list .group .cnt .desc ul {line-height: 1.375; margin: .5em 0;}
.program-list .group .cnt .btn-apply {position: absolute; bottom: 30px; right: 50px;}
.program-list .group .btn-wrap {display:flex; flex-direction:column; position: absolute; top:50%; transform:translateY(-50%); right: 50px;}
.program-list .group .btn-wrap .btn-apply {display:inline-flex; justify-content:space-between; align-items:center; position:static;}
.program-list .group .btn-wrap .btn-apply + .btn-apply {margin-top:22px;}

.detail-top {position: relative; display: flex;border-bottom: 1px solid #ddd; padding-bottom:60px; margin-bottom: 60px;}
.detail-top .thumb-wrap {width: 420px; margin-right: 60px;}
.detail-top .thumb {position: relative; padding-bottom:100%; }
.detail-top .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.detail-top .cnt {position: relative;padding-top:22px;flex: 1 1 auto; min-width: 0; width: 1%;}
.detail-top .cnt .tit {font-size: 1.563em; line-height: 1.4; margin-bottom: 20px;}
.detail-top .cnt .desc {color: #454545; line-height: 1.563; letter-spacing: -.02em;}
.detail-top .cnt .desc ul {line-height: 1.375; margin: .5em 0;}
.detail-top .cnt .desc ul li {margin-bottom:7px;}
.detail-top .cnt .desc ul li:last-child {margin-bottom:0;}
.detail-top .btn-wrap {position: absolute; left:0; bottom:0px;}
.detail-top .btn-wrap .btn-apply {padding:0 40px;}
.detail-top .btn-wrap .btn-apply + .btn-apply {margin-left:22px;}

/* 교육신청 */
.reser-step {}
.reser-step ol {text-align: center; display: flex; margin: 0 -26px -52px;}
.reser-step ol li {position: relative; width: 16.666666%; padding: 0 26px; margin-bottom: 52px;}
.reser-step ol li:after {content:''; position: absolute; right: -20px; top: 80px; width: 40px; height: 40px; background: no-repeat url("../images/sub/arrow.png") center center / contain;}
.reser-step ol li:last-child:after {display: none;}
.reser-step ol li p {color: #454545; font-size: 1.25em; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; margin-top: 13px;}
.reser-step ol li .btn-apply {margin-top: 13px;}

/* popup */
.modal {}
.popup {background-color: #0080bb; border-radius:20px 20px 0 0; max-width: 600px; padding: 0; box-shadow: none; text-align: center;}
.popup .content {}
.popup .btn {display: block; padding: 20px 10px; background-color: #242424; color: #fff; font-size: 22px; font-weight: 500; letter-spacing: -.03em;}
.popup a.close-modal {display: none;}

.myapply-request {max-width: 670px; width: 100%; margin: 0 auto; padding: 55px 65px 65px ; border: 1px solid #ddd; border-top: 2px solid #242424;}
.myapply-request .group {display: flex;align-items:center;}
.myapply-request .group strong {width: 72px; color: #454545; font-weight: 400;}
.myapply-request .group .input {flex: 1 1 auto; min-width: 0; width: 1%;}
.myapply-request .btn-submit {display: block; margin-left: 72px; width: calc(100% - 72px); margin-top: 20px;}