@charset "utf-8"; 

/* button */
.btn-line-black{display: inline-block; line-height: 1.4; font-size: 2rem; font-weight: 700; color:#111; border-bottom:3px solid #111;}
.btn-basic{display: inline-block; width:20rem; height: 6rem; line-height: 6rem !important; font-size: 1.6rem; font-weight: 500; color:#fff; text-align: center; background:#111; transition: all 0.35s;}

/* 콘텐츠 */
.container{min-height: 50rem; overflow: hidden;}
.container .contents{position:relative; font-size: 1.5rem; line-height: 1.5;}
.container .contents:after{position: relative; content:""; display:block; clear:both;}
.container .contents>.inner{padding:11rem 0;}
.container h2{margin-bottom:4rem; text-align: center; display: block; color:#111; font-size:4.2rem; font-weight: 800; word-break: keep-all; word-wrap: break-word; text-transform: uppercase;}
.container h3{margin-bottom:2rem; font-size:3.2rem; color:#111; font-weight: 700;}
.container h4{margin-bottom:1.5rem; font-size:2.6rem; color:#111; font-weight: 700;}
.container h5{margin-bottom:1.5rem; font-size:2rem; color:#111; font-weight: 600;}
.container h6{margin-bottom:1.5rem; font-size:1.8rem; color:#333; font-weight: 600;}
@media(max-width:1024px){
  .container{min-height: 40rem;}
  .container .contents>.inner{padding:6rem 0;}
  .container h2{font-size: 3.6rem;}
  .container h3{margin-bottom:2rem; font-size:2.6rem;}
}

/* visual */
.visual {position: relative; overflow: hidden; z-index: 2; background: no-repeat 20% 50%; background-repeat: no-repeat; background-size: cover;}
.visual>.inner {position: relative; height: 42rem; line-height: 42rem; font-size: 0; z-index: 2; color: #fff; text-align: center;}
.visual>.inner .el {display: inline-block; line-height: 1; vertical-align: middle;}
.visual>.inner .el h2 {margin-top: 1rem; font-size: 5.4rem; font-weight: 700;}
@media(max-width: 1024px) {
  .visual{padding-top: 7rem;}
  .visual>.inner {height:35rem; line-height: 35rem;}
  .visual>.inner .el h2 {font-size: 4rem}
}
@media(max-width: 768px) {
  .visual>.inner {height:30rem; line-height: 30rem}
}

/* location */
.container .location {position: relative; background: #fff; z-index:4}
.container .location::before{display: inline-block; width: 100%; height: 1px; left: 0; bottom: -1px; background: #eaeaea; z-index: -2}
.container .location img {vertical-align: middle}
.container .location .inner::before {display: inline-block; width: 50%; height: 100%; left: 100%; top: 0;}
.container .location .inner>ul>li {position: relative;}
.container .location .inner>ul>li + li{padding:0 2rem;}
.container .location .inner>ul>li:last-child {padding-left:1rem}
@media(max-width: 1024px) {
  .container .location .inner>ul>li:last-child {position:absolute; width: calc(100% - 2rem); left: 4rem; top: 0}
  .container .location .inner>ul>li + li{padding:0;}
  .container .location .inner>ul>li:last-child::before{display: none;}
}
@media(max-width: 1024px) {
  .container .location .inner>ul>li {display:none}
  .container .location .inner>ul>li:first-child,.container .location .inner>ul>li:last-child {display: inline-block}
}
.container .location .inner>ul>li:last-child>button {color: #333}
.container .location .inner>ul>li:last-child>button::after {border-color: #111}
.container .location .inner>ul>li.active>button {color: #333}
.container .location .inner>ul>li.active>button::after {border-color: #111; transform: rotate(-45deg)}
.container .location .inner>ul>li>a {display: block; line-height: 7rem}
.container .location .inner>ul>li>button {display: block; height: 7rem}
.container .location .inner>ul>li.active>button+ul {display: block; transform: translateY(0)}
.container .location .inner>ul>li>button {position: relative; width: 20rem; font-size: 1.7rem; font-weight: 700; color: #333; text-align: left; transition: color .3s ease}
.container .location .inner>ul>li>button::after {display: inline-block; width: 8px; height: 8px; right: 0; top: 50%; margin-top: -5px; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(135deg); transition: transform .3s ease}
.container .location .inner>ul>li>button+ul {display: none; position: absolute; width: 20rem; padding: 2.5rem 2rem; border: 1px solid #d6d6d6; background: #fff; z-index: -1; transform: translateY(calc(-100% - 1rem)); box-shadow: 5px 5px 1rem rgba(0,0,0,.1); transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform}
.container .location .inner>ul>li>button+ul::before {display: inline-block; width: 100%; left: -1px; top: -1px; border: 1px solid #0378a8; box-sizing: content-box}
.container .location .inner>ul>li>button+ul li{padding-bottom: 1.5rem;}
.container .location .inner>ul>li>button+ul li:last-child{padding-bottom: 0;}
.container .location .inner>ul>li>button+ul li a {position: relative; display: block; padding-left: 1rem; font-size: 1.6rem; color: #555; line-height: 2rem; transition: color .3s ease}
.container .location .inner>ul>li>button+ul li a:hover{color:#111;}
.container .location .inner>ul>li>button+ul li a::before {display: inline-block; width: 2px; height: 2px; left: 0; top: 1rem; background: #555}
.container .location div.init {position: absolute; right: 0; top: 0}
@media(max-width: 1400px) {
  .container .location div.init {right:2rem}
}
.container .location div.init button {position: relative; height: 7rem; margin-left: 2rem}
.container .location div.init button::before {display: inline-block; width: 1px; height: 1rem; left: -1rem; top: 50%; margin-top: -0.5rem; background: #ccc
}
.container .location div.init button:first-child {margin-left: 0}
.container .location div.init button:first-child::before {display: none}
.container .location div.init ul {position: absolute; right: 0; top: 0; white-space: nowrap; border: 1px solid #d1d1d1; box-shadow: 5px 5px 1rem rgba(0,0,0,.1); z-index: -3; transition: top .5s cubic-bezier(0.19, 1, 0.22, 1); will-change: top}
.container .location div.init ul.active {top: 8rem}
@media(max-width: 1024px) {
  .container .location div.init ul.active {top:7rem}
}
.container .location div.init ul li svg,.container .location div.init ul li img {position: relative; vertical-align: middle; z-index: 1}
.container .location div.init ul li a,.container .location div.init ul li button {display: block; width: 5rem; height: 5rem; border-right: 1px solid #d1d1d1}
.container .location div.init ul li button {background: #fff}
.container .location div.init ul li a {position: relative; line-height: 5rem; text-align: center; background: #f7f8fa}
.container .location div.init ul li a::before {display: inline-block; width: 100%; height: 100%; left: -1px; top: -1px; background: #2569c9; border: 1px solid #2569c9; box-sizing: content-box; opacity: 0; transition: opacity .1s ease}
.container .location div.init ul li a svg * {transition: all .1s ease}
.container .location div.init ul li a:hover::before {opacity: 1}
.container .location div.init ul li a:hover svg * {fill: #fff}
.container .location div.init ul li button {border-right: 0}

/* location util */
.container .location .location-util{position: absolute; top:1.8rem; right:0;}
.container .location .location-util a.print{position: absolute; right:6rem; width:4.5rem; height: 4.5rem; text-indent: 100%; font-size: 0; transition: all 0.2s;}
.container .location .location-util a.print::after{position: relative; top:50%; left:0rem; transform:translateY(-50%); content:""; vertical-align: middle; display: inline-block; width:1.9rem; height:1.8rem; background: url(../img/sub/icon_print.svg) no-repeat 50% 50%;}
.container .location .location-util button.share{position: relative; width:4.5rem; height: 4.5rem; text-indent: 100%; font-size: 0; transition: all 0.2s;}
.container .location .location-util button.share::before{position: absolute; content: ""; display: block; top:50%; left:-1.5rem; width:1px; height: 1.5rem; background: #dbdbdb; transform:translateY(-50%);}
.container .location .location-util button.share::after{position: relative; top:0; content:""; margin-right:0.4rem; vertical-align: middle; display: inline-block; width:1.95rem; height:1.95rem; background: url(../img/sub/icon_share.svg) no-repeat 50% 50%;}
@media(max-width: 420px) {
  .container .location .location-util a.print{right:4rem;}
  .container .location .location-util button.share::before{left:-0.5rem;}
}

/* location util - sns */
.container .location #sns{position: absolute; top:5.2rem; right:0; display: none; opacity: 0; white-space: nowrap; z-index: 3; will-change: top; box-shadow: 5px 5px 1.5rem rgba(0,0,0,.07);}
.container .location #sns.active {display: block; opacity: 1;}
.container .location #sns li{display: inline-block;}
.container .location #sns li a,
.container .location #sns li button {position: relative; display: inline-block; width: 5rem; height: 5rem;}
.container .location #sns li button {background: #eff0fe; border:1px solid #d1d1d1;}
.container .location #sns li a {position: relative; line-height: 5rem; text-align: center; background: #fff; border:1px solid #d1d1d1; border-right:0;}
.container .location #sns li a::before{position: absolute; z-index: 1; display: inline-block; width: 100%; height: 100%; left: -1px; top: -1px; background: #4e30b0; border: 1px solid #4e30b0; box-sizing: content-box; opacity: 0; transition: opacity 0.1s ease;}
.container .location #sns li a svg{position: relative; z-index: 2; vertical-align: middle;}
.container .location #sns li a svg *{transition: all 0.1s ease;}
.container .location #sns li a:hover::before {opacity: 1;}
.container .location #sns li a:hover svg * {fill: #fff;}

/* box */
.box{position: relative; padding: 3rem; background: #f7f8fa; border: 1px solid #d7dbe4; border-radius: 3px;}
.box.color02{background: #eef5f8; border-color: #cadfe6;}
.box.color03{background: #fdf5f6; border-color: #f0dddd;}
@media(max-width:768px){
  .box{padding:2rem;}
}
.box02 {position: relative; padding: 2rem; background: #f7f8fa; border: 1px solid #d7dbe4; border-radius: 3px;}
.box02 ul{margin:0 auto;}

/* 신청조회 */
.inquiry{position: relative; text-align: center; padding: 3rem; font-size: 1.6rem; margin:0 auto; border: 1px solid #ddd; width: 700px; background: #f8f8f8; border-radius: 1rem;}
.inquiry .form{margin:0 auto; width: 60%;}
.inquiry p{margin-top: 1rem; color:#555;}
@media(max-width:768px){
  .inquiry .form,
  .inquiry{width:100%;}
}

/* 시설 예약현황 체크박스 */
.form .time-check{position: relative;}
.form .time-check .input{margin-bottom: 1rem; background: #f4f4f4; border:1px solid #eaeaea; border-radius: 0.4rem; padding:1rem 0.5rem; text-align: center;}
.form .time-check .input label span{display: block;}
.form .time-check .input input[type=checkbox] + label span,
.form .time-check .input input[type=radio] + label span{display: block; margin-top: 1rem; font-size: 1.5rem; color:#555; }
.form .time-check .input:first-child,
.form .time-check .input:first-child ~ [class*=input]{height: 7rem; line-height: inherit;}
.form .time-check .input input[type=checkbox] + label span,
.form .time-check .input input[type=radio] + label span{margin-left:0;}

/* 시설예약정보 */
.reservation-view .reservation-info{position: relative;}
.reservation-view .reservation-info dl{display: block; line-height: 1.6; margin-bottom: 1.6rem; text-align: left;}
.reservation-view .reservation-info dl dt{position: absolute; padding-left:0.7rem; width: 15rem; display: inline-block; font-weight: 600; font-size: 1.7rem; color:#252525;}
.reservation-view .reservation-info dl dt::before{position: absolute; display: inline-block; width: 2px; height: 2px; left: 0; top: 50%; margin-top: -1px; background: #333;}
.reservation-view .reservation-info dl dd{display: inline-block; position: relative; left:15rem; width:calc(100% - 15rem); font-size: 1.7rem; color:#666;}


/* 시설예약완료 */
.container .reservation-complete{border:1px solid #dfdfdf; background: #f7f8fa; border-top:2px solid #563da5;}
.container .reservation-complete .reservation-box{position:relative; display:block; padding:5rem 3rem 5rem 32rem;}
.container .reservation-complete .reservation-box .thumbs{position:absolute; width:25rem; height:calc(100% - 6rem); left:3rem; top:3rem; background:no-repeat center; background-size:cover; border-radius: 1rem;}
.container .reservation-complete .reservation-box .thumbs::before{display:inline-block; width:inherit; height:100%; background:#d8e8f4 url(../img/sub/no_image.svg) no-repeat center; z-index:-1;}
.container .reservation-complete .reservation-box em{font-size:2.2rem; color:#111; margin-bottom: 2rem;}
.container .reservation-complete .reservation-box p{margin:2rem 0; font-size:1.5rem; color:#888; line-height:1.5;}
.container .reservation-complete .reservation-box span{font-size:1.6rem; color:#1f3573;}
.container .reservation-complete .board-view-info dl{margin-bottom: 0.5rem;}
.container .reservation-complete .board-view-info dl dt{font-size: 1.6rem; font-weight: 500; color:#555;}
.container .reservation-complete .board-view-info dl dd{font-size: 1.6rem; color:#555}
.container .reservation-complete .board-view-info::after{display: none;}
@media(max-width:768px){
  .container .reservation-complete .reservation-box{padding:5rem 0 5rem 28rem;}
  .container .reservation-complete .reservation-box .thumbs{width:20rem; left:3rem;}
}
@media(max-width:640px){
  .container .reservation-complete .reservation-box{padding:3rem 2rem;}
  .container .reservation-complete .reservation-box .thumbs{position:relative; left: 0; width:100%; height:50vw; margin-bottom:3rem; top:0;}
}

/* tab */
.tab a{position:relative; padding-bottom:1px; margin-bottom:-1px; padding-right:1px; margin-right:-1px; width:16.66%; height:6rem; line-height:6rem; border:1px solid #ddd; background:#f6f6f6; font-size:1.6rem; color:#888; font-weight:500; text-align:center;}
.tab.v2 a{width:25%;}
.tab a.active{background:#fff; color:#563da5; border-top: 2px solid #563da5;}
.tab a.active span{position: relative;
  padding-right: 2rem;
  font-weight: 600;
}
.tab a.active span::after,
.tab button.active span::after{
  display: inline-block;
  width: 7px;
  height: 7px;
  right: 0;
  top: 50%;
  margin-top: -4px;
  border-top: 1px solid #563da5;
  border-right: 1px solid #563da5;
  transform: rotate(135deg);
}

@media(max-width:1024px){
  .tab a{width:33.33%;}
  .tab a:nth-child(n + 4){margin-top:-1px; padding-top:1px;}
}
@media(max-width:768px){
  .tab a{width:50%;}
}

/* 텍스트 구분선 */
.line-vertical span{position: relative; display: inline-block; margin:0 0.5rem;}
.line-vertical span + span::before{position: relative; margin-right:1rem; content: ""; display: inline-block; width: 1px; height: 1rem; background: #dbdbdb;}

/* 폰트 색상 */
.purple{color:#563da5;}
.teal{color:#0378a8;}
.gray{color:#666;}
.red{color:#d51b2b;}
.blue{color:#1842b4;}
.orange{color:#e7761b;}

/* 블릿 */
.dot-list-half{overflow: hidden; clear: both;}
.dot-list-half li{position: relative; padding-left:1rem; float: left; width:50%; line-height: 1.6; font-size: 1.5rem; margin-bottom: 0.5rem;}
.dot-list-half li::before{position: absolute; display: inline-block; width: 2px; height: 2px; left: 0; top: 1.1rem; background: #333;}
.dot-list{overflow: hidden; clear: both;}
.dot,
.dot-list li{position: relative; padding-left:1rem; line-height: 1.6; font-size: 1.5rem; margin-bottom: 0.5rem;}
.dot::before,
.dot-list li::before{position: absolute; display: inline-block; width: 2px; height: 2px; left: 0; top: 1.1rem; background: #333;}
.line-bullet{position: relative; padding-left:1.5rem;}
.line-bullet::before{position: absolute; content:""; display: inline-block; width: 6px; height: 2px; left: 0; top: 1.3rem; background: #333;}
.dot-bullet{position: relative; padding-left:1.5rem;}
.dot-bullet::before{position: absolute; display: inline-block; width: 2px; height: 2px; left: 0; top: 1.1rem; background: #333;}
@media(max-width:768px){
  .dot-list-half li{float: inherit; width:100%;}
}

/* 공통 게시판 페이지 */

/* 프로그램신청 상단검색 */
.container .inner .search-box{position:relative; margin-bottom:2.5rem;}
.container .inner .search-box + .list{border-top:2px solid #563da5;}
.container .inner .search-box .search{position:absolute; right:0; top:0; }
.container .inner .search-box .search select{width:15rem; margin-right:5px;}
.container .inner .search-box .search input{width:28rem; border-right:0;}
@media(max-width:1280px){
  .container .inner .search-box input[type="date"]{width:calc(100% / 2 - 0.6rem); display: inline-block;}
  .container .inner .search-box input {width: calc(100% - 4.6rem - 15rem - 10px);}
}
@media(max-width:768px){
  .container .inner .search-box .search select{width:100%; margin-right: 0; margin-bottom:1rem;}
}
@media(max-width:640px){
  .container .inner .search-box input[type="date"]{width:100%; display: inline-block;}
  .container .inner .search-box input {width: calc(100% - 4.6rem - 5px);}
}

/* 이전, 다음글 */
.board-view dl.control{}
.board-view dl.control.prev{margin-top:6rem; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.board-view dl.control.next{border-bottom:1px solid #ddd;}
.board-view dl.control dt,
.board-view dl.control dd{float:left; font-size:1.6rem; color:#333; line-height:7rem;}
.board-view dl.control dt{width:18rem; color:#888; text-align:center; font-weight:400; background:#f5f5f5;}
.board-view dl.control dt span{position:relative; display:inline-block; line-height:1; padding-left:3rem;}
.board-view dl.control dt span::before{display:inline-block; width:0.8rem; height:0.8rem; left:0; top:50%; border-top:2px solid #888; border-right:2px solid #888;}
.board-view dl.control.prev dt span::before{transform:rotate(-45deg); margin-top:-0.3rem;}
.board-view dl.control.next dt span::before{transform:rotate(135deg); margin-top:-0.7rem;}
.board-view dl.control dd{width:calc(100% - 18rem); padding:0 1.5rem;}
@media(max-width:640px){
  .board-view dl.control dt{width: 12rem;}
  .board-view dl.control dd{width:calc(100% - 12rem);}
}

/* 게시판 페이징 */
.container .board-pagination{margin-top:5rem;}
.container .board-pagination > *{width:3.6rem; height:3.6rem; line-height:3.6rem; font-size:1.6rem; color:#aaa; text-align:center; background:no-repeat center;}
.container .board-pagination button{border:1px solid #ddd; border-radius: 50%;}
.container .board-pagination button.first{background-image:url(../img/sub/icon_page_first.svg);}
.container .board-pagination button.prev{margin-right:1rem; margin-left:0.6rem; background-image:url(../img/sub/icon_page_prev.svg);}
.container .board-pagination button.next{margin-left:1rem; margin-right:0.6rem; background-image:url(../img/sub/icon_page_next.svg);}
.container .board-pagination button.last{background-image:url(../img/sub/icon_page_last.svg);}
.container .board-pagination em{position:relative; color:#563da5;}
.container .board-pagination em::before{display:inline-block; width:1.8rem; height:2px; left:50%; margin-left:-0.9rem; bottom:5px; background:#563da5;}
@media(max-width:768px){
  .container .inner .search-box .search{position: relative; right:inherit; left:0;}
  .container .inner .search-box .search input{width:calc(100% - 4.6rem - 15rem - 10px);}
  .container .inner .search-box .search input{width: calc(100% - 4.6rem - 5px);}
}
@media(max-width:640px){
}
@media(max-width:480px){
  .container .board-pagination > *{width:3rem; height:3rem; line-height:3rem;}
}

/* 갤러리 */
.container .gallery{position:relative; padding:5rem 0; border-top:2px solid #563da5; border-bottom:1px solid #ddd; z-index:1;}
.container .gallery ul li{float:left; width:calc(33.33% - 2rem); margin-right:3rem;}
.container .gallery ul li:nth-child(3n){margin-right:0;} 
.container .gallery ul li:nth-child(n + 4){margin-top:5rem;}
.container .gallery ul li a{position:relative; display:block;}
.container .gallery ul li a .thumbs{position:relative; display:block; height:28rem; margin-bottom:1.5rem; background:no-repeat center; background-size:cover; border-radius: 1rem; overflow: hidden;}
.container .gallery ul li a .thumbs::before{display:inline-block; width:100%; height:100%; background:#eff0fe url(../img/sub/no_image.jpg) no-repeat center; z-index:-1;}
.container .gallery ul li a em{font-size:1.8rem; margin-bottom: 1rem; color:#333; font-weight: 600;}
.container .gallery ul li a i{position: relative; margin-right: 1rem; color:#888; font-weight: 400;}
.container .gallery ul li a i + i::before{position: relative; content: ""; display: inline-block; margin-right: 1rem; width: 1px; height: 1rem; background-color: #ddd;}
.container .gallery .video-play{position: relative; opacity: 0.8; z-index: 2; top:50%; left:50%; margin:-2.5rem 0 0 -2.5rem; display:block; width:5rem; height: 5rem; background:url(../img/sub/icon_video_play.svg) no-repeat 50% 50%; background-size: 100%;}
@media(max-width:1280px){
  .container .gallery ul li{width:calc(33.33% - 0.75rem); margin-right:1rem;}
  .container .gallery ul li a .thumbs{height:20vw;}
}
@media(max-width:768px){
  .container .gallery ul li{width:100%; margin-right:0;}
  .container .gallery ul li:nth-child(3n){margin-right: 0;}
  .container .gallery ul li:nth-child(n + 2){margin-top:3rem;}
  .container .gallery ul li a .thumbs{height:50vw;}
}

/* 프로그램목록 */
.container .program{position:relative; padding:3rem 0 5rem 0; border-top:2px solid #563da5; border-bottom:1px solid #ddd; z-index:1;}
.container .program ul li{float:left; width:calc(33.33% - 1px); padding-right:1.5rem; padding-left:1.5rem; border-right:1px dashed #ddd;}
.container .program ul li:nth-child(3n){margin-right:0; border-right: 0;} 
.container .program ul li:nth-child(n + 4){margin-top:5rem;}
.container .program ul li a{position:relative; display:block;}
.container .program ul li a .thumbs{position:relative; display:block; height:23rem; margin:1.5rem 2rem; background:no-repeat center; background-size:cover; border-radius: 1rem; overflow: hidden;}
.container .program ul li a .thumbs::before{display:inline-block; width:100%; height:100%; background:#eff0fe url(../img/sub/no_image.jpg) no-repeat center; z-index:-1;}
.container .program ul li a em{font-size:2rem; color:#333; margin:2rem; padding-bottom: 2rem; font-weight: 600; border-bottom:1px solid #eee;}
.container .program ul li a span{position: relative; display: block; color:#666; padding:0 2rem; font-weight: 300; margin-top: 0.4rem; font-size: 1.6rem;}
.container .program ul li a span strong{display: inline-block; margin-right: 1rem; color:#563da5; font-weight: 600;}
.container .program ul li a u:first-child{margin-left:1rem;}
.container .program ul li a u + u{margin-left: 2.5px;}
@media(max-width:1280px){
  .container .program ul li{width:calc(33.33% - 0.75rem); margin-right:1rem;}
  .container .program ul li a .thumbs{height:20vw;}
}
@media(max-width:768px){
  .container .program ul li{width:100%; margin-right:0; border-right: 0; padding-left:0; padding-right: 0; padding-bottom: 2rem; border-bottom:1px dashed #ddd;}
  .container .program ul li:nth-child(3n){margin-right: 0;}
  .container .program ul li:nth-child(n + 2){margin-top:3rem;}
  .container .program ul li a .thumbs{height:50vw;}
}


/* program 상태 */
.container .state i{display: block; margin:2rem; text-align: center; height: 5.4rem; line-height: 5.4rem; font-weight: 600; font-size: 1.6rem; color:#888; background: #dadada; border:1px solid #d1d1d1; border-radius: 3px;}
.container .state i[data-title="접수중"]{color: #fff; background: #563da5; border-color:#563da5;}
.container .state i[data-title="접수예정"]{color: #0378a8; background: #fff; border-color:#0378a8;}
.container .state u{display: inline-block; margin-top:1rem; padding:0 1.5rem; height: 3rem; line-height: 3rem; font-size: 1.4rem; font-weight: 300; color:#fff; text-decoration: none; background: #563da5; border-radius: 3px;}
.container .state u[data-title="마감"]{background:#374151;}
.container .state u[data-title="예정"]{background:#0378a8;}
.container .state u[data-title="유료"]{background:#d51b2b;}
.container .state u[data-title="무료"]{color:#fff; background:#1f3573;}
.container .state b{
  min-width: 8rem;
  height: 3.8rem;
  border-radius: 3.8rem;
  line-height: calc(3.8rem - 2px);
  padding: 0 1rem;
  color: #374151;
  background: #fff;
  border: 1px solid #374151;
  font-size: 1.5rem;
  text-align: center;
}
.container .state b[data-title="접수완료"]{
  color: #fff;
  background: #0378a8;
  border-color: #0378a8;
}
.container .state b[data-title="예약확정"]{
  color: #fff;
  background: #0029ff;
  border-color: #0029ff;
}
.container .state b[data-title="예약완료"]{
  color: #fff;
  background: #563da5;
  border-color: #563da5;
}
.container .state b[data-title="취소신청"]{
  color: #fff;
  background: #A80387;
  border-color: #A80387;
}
.container .state b[data-title="예약취소"]{
  color: #fff;
  background: #A80300;
  border-color: #A80300;
}


/* 블로그형 게시판 */
.container .board-blog{border:1px solid #dfdfdf; background: #f7f8fa; border-top:2px solid #563da5;}
.container .board-blog a{position:relative; display:block; padding:5rem 3rem 5rem 32rem;}
.container .board-blog a .thumbs{position:absolute; width:25rem; height:calc(100% - 6rem); left:3rem; top:3rem; background:no-repeat center; background-size:cover; border-radius: 1rem;}
.container .board-blog a .thumbs::before{display:inline-block; width:inherit; height:100%; background:#d8e8f4 url(../img/sub/no_image.svg) no-repeat center; z-index:-1;}
.container .board-blog a em{font-size:2.2rem; color:#111; margin-bottom: 2rem;}
.container .board-blog a p{margin:2rem 0; font-size:1.5rem; color:#888; line-height:1.5;}
.container .board-blog a span{font-size:1.6rem; color:#1f3573;}
.container .board-blog .board-view-info dl{margin-bottom: 0.5rem;}
.container .board-blog .board-view-info dl dt{font-size: 1.6rem; font-weight: 500; color:#555;}
.container .board-blog .board-view-info dl dd{font-size: 1.6rem; color:#555}
.container .board-blog .board-view-info::after{display: none;}
@media(max-width:768px){
  .container .board-blog a{padding:5rem 0 5rem 28rem;}
  .container .board-blog a .thumbs{width:20rem; left:3rem;}
}
@media(max-width:640px){
  .container .board-blog a{padding:3rem 2rem;}
  .container .board-blog a .thumbs{position:relative; left: 0; width:100%; height:50vw; margin-bottom:3rem; top:0;}
}

/* 등록된 게시글이 없습니다. */
.no-data{position:relative; text-align:center; padding:6rem 0 10rem; border-bottom:1px solid #ddd;}
.no-data::before{position: relative; display:block; width:12rem; height:12rem; left:50%; top:0; margin-left:-6rem; background:#f8f8f8 url(../img/sub/nodata.svg) no-repeat 50% 50%; border-radius: 50%;}
.no-data p{margin-top: 2rem; font-size:2.1rem; font-weight: 600; text-align: center;}
table + .no-data{border-top:0;}

/* table bg */
div:not(.ui-datepicker) .table>tbody>tr>td.bg01{font-weight: 700; color:#563da5; background: #f0f0fa;}

/* table scroll */
@media(max-width:1024px){
  .container .contents .scrollTable{overflow:auto;}
  .container .contents .scrollTable .table{width:1080px;}
}

/* 증명사진 테두리 */
.photo_border{border:1px solid #fff; box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.1);}

/* 게시판 공지 */
.container .notice table{width:100%; table-layout:fixed; border-top:2px solid #563da5; font-size:1.6rem;}
.container .notice table th,
.container .notice table td{height:7rem; vertical-align:middle;}
.container .notice table thead th{background:#f6f6f6; border-bottom:0; color:#555;}
.container .notice table tbody td{font-size:1.5rem; color:#888; border-bottom:1px solid #dfdfdf;}
.container .notice table tbody td a{font-size:1.8rem; color:#111;}
.container .notice table tbody td mark{display:inline-block; width:7rem; height:3rem; line-height:3rem; border-radius:3rem; background:#f4f4f4; color:#555; font-size:1.5rem; font-weight: 500;}
.container .notice table tbody td mark[data-start]{background:#563da5; color:#fff;}
@media(max-width:768px){
  .container .notice table tbody td mark{height:2.8rem; line-height:2.8rem; font-size:1.3rem;}
  .container .notice table tbody td a{font-size:1.7rem;}
}
table a:hover{text-decoration:underline;}
.container .notice table tbody td i {
  display: inline-block;
  min-width: 20px;
  margin-right: 5px;
  height: 20px;
  line-height: 20px;
  border-radius: 1px;
  font-size: 12px !important;
  font-weight: 500;
  background: #563da5;
  color: #fff;
  text-align: center;
}

/* 게시판 뷰 */
.container .view{padding:6rem 0;}
.container .view .title{padding:5rem 0; border-top:3px solid #563da5; border-bottom:1px solid #ddd; text-align:center;}
.container .view .title strong{font-size:2.4rem; line-height:1.35;}
.container .view .title dl{margin-top:2.5rem; font-size:1.6rem; line-height:2rem;}
.container .view .title dl dt{position:relative; padding-right:1rem; margin-right:1rem; color:#888;}
.container .view .title dl dt::after{display:inline-block; width:1px; height:1rem; right:-2px; top:50%; margin-top:-0.5rem; background:#eee;}
.container .view .title dl dd{font-weight:700; color:#563da5;}
.container .view .title dl dd:not(:last-child){margin-right:5rem;}
.container .view .title dl br{display:none;}
@media(max-width:1024px){
	.container .view .title dl br{display:block;}
	.container .view .title dl > *:nth-child(n + 5){margin-top:1.5rem;}
}
.container .view .con{min-height:40rem; padding:4rem; font-size:1.6rem; color:#555; line-height:1.5;}
.container .view .con > img{display:block; margin:3rem auto;}
.container .view .con a{display:inline-block; height:4rem; line-height:calc(4rem - 2px); margin-bottom:1rem; padding:0 2rem; border:1px solid #ccc; border-radius:4rem; color:#003cff; font-size:0; transition:all 0.2s ease;}
.container .view .con a:hover{border-color:#1384cb;}
.container .view .con a img,
.container .view .con a span,
.container .view .con a i{display:inline-block; line-height:1; vertical-align:middle;}
.container .view .con a span{margin:0 1rem; font-size:1.5rem; color:#111; font-weight:700;}
.container .view .con a i{font-size:1.4rem; color:#aaa;}
.container .view .con .attachment em{display:block; height:2rem; line-height:2rem; margin-bottom:2rem; padding-left:2rem; background:url(/assets/img/sub/icon_attachment.svg) no-repeat left center; font-size:1.5rem; color:#111;}
.container .view dl.control.prev{margin-top:3rem; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.container .view dl.control.next{border-bottom:1px solid #ddd;}
.container .view dl.control dt,
.container .view dl.control dd{float:left; font-size:1.6rem; color:#563da5; line-height:7rem;}
.container .view dl.control dt{width:18rem; color:#888; text-align:center; font-weight:400; background:#f5f5f5;}
.container .view dl.control dt span{position:relative; display:inline-block; line-height:1; padding-left:3rem;}
.container .view dl.control dt span::before{display:inline-block; width:0.8rem; height:0.8rem; left:0; top:50%; border-top:2px solid #888; border-right:2px solid #888;}
.container .view dl.control.prev dt span::before{transform:rotate(-45deg); margin-top:-0.3rem;}
.container .view dl.control.next dt span::before{transform:rotate(135deg); margin-top:-0.7rem;}
.container .view dl.control dd{width:calc(100% - 18rem); padding:0 1.5rem;}
@media(max-width:1280px){
  .container .view{padding-top:1rem;}
}
@media(max-width:1024px){
  .container .view .title dl dd:not(:last-child){margin-right:3rem;}
  .container .view .con{padding:4rem 2rem;}
  .container .view dl.control dt{width:12rem;}
  .container .view dl.control dd{width:calc(100% - 12rem);}
}

/* 게시판 상세 슬라이드 이미지 */
.board-view-swiper {
  position: relative;
}
.board-view-swiper .swiper-container{width: 80%;}
.board-view-swiper .swiper-slide img{width: 70%; border-radius: 1rem;}
.board-view-swiper .func {
  position: absolute;
  width: 100%;
  left: 0;
  top: 40%;
  z-index: 2;
}
.board-view-swiper .func button {
  position: absolute;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  border: 1px solid #ddd;
  opacity: 1;
  background: #fff;
  transition: all 0.2s ease;
}
@media(max-width:768px){
  .board-view-swiper .swiper-container{width:100%;}
  .board-view-swiper .swiper-slide img{width: 70%;}
  .board-view-swiper .func button{width:4rem; height: 4rem; border-radius: 4rem;}
}
.board-view-swiper .func button svg {
  vertical-align: middle;
  width: 1rem;
}
.board-view-swiper .func button svg path {
  transition: all 0.2s ease;
}
.board-view-swiper .func button:hover {
  background: #111;
  border-color: #111;
  opacity: 1;
}
.board-view-swiper .func button:hover svg path {
  fill: #fff;
}
.board-view-swiper .func button.view-button-prev {
  left: 0;
}
.board-view-swiper .func button.view-button-next {
  right: 0;
}

/* 게시판 상세 상단정보 */
.board-view .board-view-title{display: block; margin-top:4rem; margin-bottom: 4.8rem; padding-bottom: 4rem; border-bottom: 1px solid #ddd; display: block;text-align: center; font-weight: 600; font-size: 3rem; line-height: 1.3; color: #111;}
.board-view .state + .board-view-title{margin-top: 2rem;}
.board-view .top-info span {
  position: relative;
  margin-left: 3rem;
  height: 4rem;
  line-height: 4rem;
  font-size: 1.6rem; 
  color:#555;
  font-weight: 300;
}
.board-view .top-info span::before {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1rem;
  left: calc(-1.2rem - 2px);
  top: 50%;
  margin-top: -0.5rem;
  border-left: 1px solid #ddd;
}
.board-view .top-info span:first-child {
  margin-left: 0;
}
.board-view .top-info span:first-child::before {
  display: none;
}
.board-view .top-info span em{display: inline-block; margin-right: 5px; color:#111; font-weight: 500;}
.board-view .board-view-text{line-height: 1.8; color:#555; font-size: 1.6rem;}
.board-view .board-view-text img{display: block; margin:-1rem auto; text-align: center;}

/* 배경이미지 */
.program-view-bg{position: absolute; top:36rem; z-index: -1; width:100%; height:55.5rem; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
@media(max-width:768px){
  .program-view-bg{top:22rem;}
}

.board-view-info{position: relative;}
.board-view-info::after{position: absolute; top:0; left:50%; content: ""; display: block; width:1px; height:100%; background:#e0e0e0;}
.board-view-info dl{display: block; line-height: 1.6; margin-bottom: 1.6rem; text-align: left;}
.board-view-info dl dt{position: absolute; padding-left:0.7rem; width: 15rem; display: inline-block; font-weight: 600; font-size: 1.7rem; color:#252525;}
.board-view-info dl dt::before{position: absolute; display: inline-block; width: 2px; height: 2px; left: 0; top: 50%; margin-top: -1px; background: #333;}
.board-view-info dl dd{display: inline-block; position: relative; left:15rem; width:calc(100% - 15rem); font-size: 1.7rem; color:#666;}
@media(max-width:768px){
  .board-view-info::after{display: none;}
}

/* 프로그램 상세페이지 이미지 슬라이드 */
.board-view-swiper{position: relative;}
.board-view-swiper .swiper-pagination{position: relative; margin-top: 4rem; z-index: 2; left:0; bottom:0; width: 100%; height: 6rem;}
.board-view-swiper .swiper-pagination-bullet{width:10px; height:10px;}
.board-view-swiper .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #0378a8;}


/* 개인정보동의 */
.privacy {color: #555; font-size: 1.6rem; line-height: 2; padding: 2.2rem; background: #fff; border: 1px solid #ddd; overflow-y: auto; height: 16rem;}
.container .form textarea {margin:2rem 0; min-height: 20rem; border-radius: 1rem; background: #f8f8f8;}


/* total */
.board-total dl {
  height: 4.3rem;
  line-height: 4.3rem;
  border-radius: 4.3rem;
  white-space: nowrap;
}
.board-total dl dt,
.board-total dl dd {
  font-size: 1.6rem;
}
.board-total dl dt {
  margin-right: 5px;
}
.board-total dl dd {
  position: relative;
  margin-right: 2rem;
  color: #666;
}
.board-total dl dd::after {
  display: inline-block;
  width: 1px;
  height: 1rem;
  right: -1rem;
  top: 50%;
  margin-top: -0.5rem;
  border-right: 1px solid #ddd;
}
.board-total dl dd:last-child {
  margin-right: 0;
}
.board-total dl dd:last-child::after {
  display: none;
}

.fix{
  width: 100%;
  table-layout: fixed;
}
div:not(.ui-datepicker) .fix>tbody>tr>th,
div:not(.ui-datepicker) .fix>tbody>tr>td{border-left: 0;}

/* 로그인 */
.login-box {
  position: relative;
  padding-bottom: 7rem;
}
.login-box .segment {
  position: relative;
  width: 58rem;
  margin: 0 auto;
  color:#555;
  padding: 4rem 4rem 2rem 4rem;
  border: 1px solid #d7d7d7;
  background: #fff;
}
@media (max-width: 640px) {
  .login-box .segment {
    width: 100%;
    padding: 5rem 3rem;
  }
}
.login-box .segment::before {
  display: inline-block;
  width: 100%;
  height: 1px;
  box-sizing: content-box;
  border: 1px solid #0378a8;
  background: #0378a8;
  left: -1px;
  top: -1px;
}
.login-box .segment i {
  position: relative;
}
.login-box::before {
  display: inline-block;
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
  background: #f0f0fa;
}
.login-box mark.puple {
  border-bottom: 1px dotted #a98ce6;
}

.login-box .ui.form .field {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box .ui.form .input {
  position: relative;
  display: inline-flex;
}
.login-box .ui.form .field>* {
  display: inline-flex;
  vertical-align: middle;
}
.login-box .ui.form .input i,
.login-box .ui.form .input button {
  position: absolute;
  display: block;
  width: 5.3rem;
  line-height: 5.3rem;
  height: 5.3rem;
  top: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 0;
}
.login-box .ui.form .input i img{vertical-align: middle;}
.login-box .form .input:last-child{margin:0 auto;}
.login-box .ui.form .lg .input.left input {
  padding-left: 5.3rem !important;
}
.login-box .mga{margin:0 auto;}
.login-box .inner{padding:11rem 0;}
@media(max-width:1024px){
  .login-box .inner{padding:6rem 0;}
}

/* 로그인 step */
.register .process {
  position: relative;
  margin-bottom: 5rem;
  padding:3rem;
  border:1px solid #eaeaea;
}
.register .process .inner ol {
  counter-reset: list-counter;
}
.register .process .inner ol li {
  position: relative;
  padding:0 3rem 0 5.6rem;
  height: 5.4rem;
  line-height: 5.4rem;
}
.register .process .inner ol li::after {
  display: inline-block;
  width: 5.6rem;
  height: 5.6rem;
  line-height: 5.6rem;
  left: 0;
  top: 0;
  counter-increment: list-counter;
  content: "0" counter(list-counter);
  color: #fff;
  background: #563da5;
  border-color: #563da5;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 600;
}
@media (max-width: 1024px) {
  .register .process .inner ol li {
    padding-right: 0;
  }
  .register .process .inner ol li::after {
    right: auto;
    left: 50%;
    margin-left: -3.35rem;
  }
}
.register .process .inner ol li span {
  display: block;
  padding: 0 2rem;
  color: #563da5;
  background: #efebff;
  border:1px solid #7a6ea3;
  border-left: 0;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.12);
}
.register .process .inner ol li.active::after {
  color: #efebff;
  background: #0378a8;
  border-right:1px solid rgba(255,255,255,0.4);
  font-weight: 600;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.12);
}
@media (max-width: 1024px) {
  .register .process .inner ol li span {
    display: none;
  }
  .register .process .inner ol li.active::after{
    border-right:0;
  }
}
.register .process .inner ol li.active span {
  position: relative;
  color: #0378a8;
  background: #fff;
  border-color: #729fb1;
  font-weight: 600;
}
.register .process .inner ol li.completed span{
  font-weight: 600;
  color: #fff;
  background: #7a6ea3;
  border-color: #7a6ea3;
}
.register .process .inner ol li.completed::after {
  background: #7a6ea3;
  border-right:1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 600;
}

/* 전화번호 input */
.form .tel-input select,
.form .tel-input textarea,
.form .tel-input input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){
  min-width: inherit;
  width: 7.05rem;
}
@media (max-width: 768px) {
  .form .tel-input select,
  .form .tel-input textarea,
  .form .tel-input input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){
    min-width: inherit;
    width: 100%;
  }
}

/* 가입 약관조회 */
.register .type {
  padding: 0 20rem;
}
@media (max-width: 1400px) {
  .register .type {
    padding: 0 10rem;
  }
}
@media (max-width: 1280px) {
  .register .type {
    padding: 0;
  }
}
.register .segment {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 5rem 2rem;
  border: 1px solid #d7d7d7;
  background: #fff;
}
.register .segment::before {
  display: inline-block;
  width: 100%;
  height: 1px;
  box-sizing: content-box;
  border: 1px solid #111;
  background: #111;
  left: -1px;
  top: -1px;
}

/* 라인 */
.border01{padding-bottom: 2rem; margin-bottom: 4rem !important; border-bottom: 1px solid #eee; clear: both; overflow: hidden;}
.border02{padding-bottom: 1rem; margin: 2rem 0; border-bottom:1px solid rgba(204,204,204,0.5);}

/* 인사말 */
.about{font-size: 1.8rem; color:#666;}
.about p{line-height: 1.8;}
.about p + p{margin-top: 2rem;}
.about .fr{margin:0 auto 5rem; display: block; text-align: center;}

/* 조직현황 */
.area_staff{position:relative; overflow: hidden;}
.area_staff ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.area_staff ul li{width: 23.3rem; margin: 0 4rem 4rem 0; padding: 2.5rem; vertical-align: top; border: 1px solid #e9e9e9;}
.area_staff ul li:nth-child(5n){margin-right:0;}
.area_staff ul li .img{display:block; position: relative; overflow:hidden; width:100%; height:auto; text-align:center;}
.area_staff ul li .img img{width:100%; height:auto;}
.area_staff ul li i{display:block; font-weight:500; color:#0378a8; font-size:1.6rem;}
.area_staff ul li i.border02{font-weight: 700; font-size: 1.8rem; color:#333}
@media (max-width: 1400px) {
  .area_staff ul li{width: calc(25% - 2.3rem); margin: 0 3rem 3rem 0;}
  .area_staff ul li:nth-child(5n){margin-right:3rem;}
  .area_staff ul li:nth-child(4n){margin-right:0;}
}
@media (max-width: 1024px) {
  .area_staff ul li{width: calc(33.33% - 2rem);}
  .area_staff ul li:nth-child(4n){margin-right:3rem;}
  .area_staff ul li:nth-child(3n){margin-right:0;}
}
@media (max-width: 768px) {
  .area_staff ul li{width: calc(50% - 0.5rem); padding: 2rem; margin: 0 1rem 2rem 0;}
  .area_staff ul li:nth-child(3n){margin-right:1rem;}
  .area_staff ul li:nth-child(4n),
  .area_staff ul li:nth-child(2n){margin-right:0;}
}

/* 모바일 이미지 확대 */
.mobile-zoom{position: relative;}
.mobile-zoom a{position: absolute; display: none !important; bottom:0px; right:0; display: block; width:5rem; height: 5rem; text-indent: 100%; font-size: 0; background: url(../img/sub/icon_scale.svg) no-repeat 50% 50%; background-size: 100% 100%;}
.mobile-zoom img{margin-bottom: 3rem; border: none; height: auto; max-width: 100%; width: auto;}
@media(max-width:768px){
    .mobile-zoom a{display: block !important;}
}

/* map */
.area-map{position: relative;}
.area-map:after{position: relative; content:''; display:block; clear:both;}
.wrap_map,
.area-map #map,
.area-map .daum_map{position: relative; margin:0 auto; width:100%; height:68rem !important; transition:height .7s; background-color: #e8e8e8;}
.area-map .root_daum_roughmap{width:100% !important; border:0 !important; padding:0 !important; border-radius:0!important;}
.area-map .root_daum_roughmap .wrap_map{width:100%; height:100%; border-bottom:1px solid #dfdfdf;}
.area-map .root_daum_roughmap .wrap_controllers{display:none;}
.area-map .map-info{position: relative; padding:5rem 0;}
.area-map .map-info ul{margin-bottom:3rem;}
.area-map .map-info ul li{position: relative; width:calc(100% / 3 - 0.3rem); min-height: 10rem; vertical-align: top; display: inline-block; color:#111; font-size: 1.6rem; line-height: 1.8; font-weight: 700;}
.area-map .map-info ul li + li{padding-left:6rem; border-left:1px solid #e8e8e8;}
.area-map .map-info ul li b{display: block; color:#0378a8; font-weight: 700; font-size: 1.8rem;}
.area-map .map-info ul li span{position: relative; display: block; font-weight: 500; color:#333;}
.area-map .btn-map{position: absolute; bottom:0; right:0; display: block; width:16rem; height: 6rem; line-height: 6rem; padding-right: 2rem; font-size: 1.6rem; font-weight:500; color:#fff; text-align: center; background:#563da5 url(../img/sub/icon_map.svg) no-repeat calc(100% - 2rem) 50%; border-radius: 3px; transition: all 0.35s;}
@media(max-width:1200px){
	.wrap_map,
	.area-map #map,
	.area-map .daum_map{height: 52rem !important;}
	.area-map .btn-map{position: relative; top:0px; right:inherit; left:0px; margin-top: 4rem;}
	.area-map .map-info{padding:3rem 0;}
	.area-map .map-info ul li{display: block; width:100%; min-height: inherit;}
	.area-map .map-info ul li + li{padding-left:0; margin-top: 2rem; padding-top:2rem; border-left:0; border-top:1px solid #dfdfdf;}
}
@media(max-width:1024px){
	.wrap_map,
	.area-map #map,
	.area-map .daum_map{height: 42rem !important;}
}
@media(max-width:768px){
	.area-map .map iframe{height: 42rem !important;}
}

/* 연혁 */
.history {
  position: relative;
  padding:6rem 3rem;
  background: #f5f9fc;
}
.history dl {
  position: relative;
  padding-bottom: 6rem;
}
.history dl dt {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 14rem;
  font-size: 4.5rem;
  font-weight: 700;
  color: #0378a8;
}
.history dl dt::after {
  position: absolute;
  top: 2rem;
  right: -6.8rem;
  display: block;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  background: #1f3a89;
  transform: rotate(-45deg)
}
.history dl dd {
  position: relative;
  padding: 2rem 0 0 28rem;
  line-height: 1.7;
  font-size: 1.7rem;
  color: #555;
}
.history dl dd strong {
  display: inline-block;
  margin-right: 4rem;
  font-weight: 700;
  color: #111;
  vertical-align: top;
}
.history dl dd span {
  display: inline-block;
  vertical-align: top;
}
.history dl:last-child::before {
  display: none;
}
.history dl::before {
  position: absolute;
  display: block;
  left: 20rem;
  top: 3rem;
  width: 1px;
  height: calc(100% + 0.1rem);
  background: #aaa;
  z-index: 1;
}
@media(max-width:768px){
  .history {padding:2rem 0;}
  .history dl{padding-bottom: 3rem; margin-bottom: 3rem; border-bottom:1px solid #dfdfdf;}
  .history dl dt::after,
  .history dl::before{display: none;}
  .history dl dd{padding:0.5rem 0;}
  .history dl dt{font-size: 4rem; min-width: inherit; position: relative;;}
}

/*colgroup 스크롤아닐경우 사이즈조절 */
table colgroup {
  display: table-column-group;
}