﻿/*widget*/
/* btn_more */
.btn_more {margin-top: 0rem !important;position:absolute;top: 0;right:0;padding:0;}
.btn_more i{width: 1.7rem;height: 1.7rem;line-height: 1.7rem;text-align: center;border-radius: 50%;font-size: 1.25rem;vertical-align: top;background: #eae8e8;transform-origin: center;transition: all .35s;-webkit-transition: all .35s;} 
/** btn_more :active **/
.btn_more i:hover {-webkit-transform:rotate(180deg); transform:rotate(180deg);}

/* common title */
h2.heading {position:relative; margin-bottom:1.25rem; font-size:1.2rem; font-weight:700; margin-right:4.5rem; overflow:hidden; color:#222; white-space:nowrap;}
h2.heading > span {font-weight:600;}

/* dge CI */
.dgeCi {position:absolute; bottom:1rem; left:1rem; z-index:1; }

/* 메인비주얼 */
.TD08_visual {position:relative;height:100%;border-radius:2.5rem;background:rgba(0,0,0,.1);overflow:hidden;}
.TD08_visual .slider {height:100%; overflow:hidden;}
.TD08_visual .slick-list,
.TD08_visual .slick-track {height:100%;}
.TD08_visual .item {height:100%; line-height:0; overflow:hidden;}
.TD08_visual .item img {position:relative;left:50%;width: auto;max-width: 100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
.TD08_visual .control {position:absolute; right:0; bottom:0; padding:0 1.5rem; line-height:3.5rem; z-index:1; background:#fff; border-top-left-radius:1.5rem; text-align:center;}
.TD08_visual .control > a {position:relative; display:inline-block; vertical-align:middle; font-size:1.1rem; color:#222; -webkit-transition:all .15s; transition:all .15s;}
.TD08_visual .control > a.play {display:none; color:#415b65;}
.TD08_visual .control > a.stop,
.TD08_visual .control > a.play {width:1.7rem; height:1.7rem; margin-left:.25rem; background:#eae8e8; border-radius:50%; line-height:1.7rem;} 
.TD08_visual .control p {display:inline-block; padding:0 .5rem; vertical-align:middle; font-family:'Montserrat'; font-size:1rem; color:#555; font-weight:400;}
.TD08_visual .control p strong {position:relative; padding-right:2rem; color:#5665b6; font-weight:700;}
.TD08_visual .control p strong:after {position:absolute; top:50%; right:1rem; width:1px; height:11px; background:#c1c1c1; content:""; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
/** 메인비주얼 :active **/
.TD08_visual .control > a:hover {color:#5665b6;}
.TD08_visual .control > a.stop:hover,
.TD08_visual .control > a.play:hover {background:#5665b6; color:#fff;}

/*마음봄센터란?*/
.img_box {display: flex;position:relative;padding: 2rem 1.6rem 1.5rem;border-radius:2.5rem;overflow: hidden;height: 100%;color:#fff;justify-content: center;flex-direction: column;background: #49b888 }
.img_box:after{content:"";position:absolute;bottom: 2.4rem;left: 0;width: 100%;height: 7.85rem;background:url( /images/dgedu/template/TD08/main/img_box_bg_02.png)no-repeat;background-position: center;}
.img_box:before{content:"";position:absolute;bottom: -2.4rem;left: 0;width: 100%;height: 177px;background:url(/images/dgedu/template/TD08/main/img_box_bg_01.png)no-repeat;background-position: center;}
.img_box .tit {text-align: center;font-size:1.5rem;z-index:1;width: auto;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.img_box .txt{text-align: center;line-height:1.25rem;font-size:0.8rem;margin-top: 1rem;word-break: auto-phrase;font-weight: 600;z-index:1;}
.img_box .txt span{color:#fff7b3;}
.img_box ul {margin-top: auto;background: #fff9c4;padding: .5rem;border-radius: .5rem; z-index:1;}
.img_box ul li{display: flex;font-size: 0.7rem;line-height: 1rem;font-weight: 700;color: #2d8e65;letter-spacing: -1px;flex-wrap: wrap;word-break: auto-phrase;}
.img_box ul li span {width: 3rem;}
.img_box ul li p {width: calc(100% - 3rem);}

/*동영상*/
.video_box {position: relative;width: 100%;height: 100%;border-radius: 2.5rem;box-sizing: border-box;border: 2px solid #dedede;overflow: hidden;box-shadow: 0px 0 10px 0 rgb(0 0 0 / 7%);}
.video_box .img{position:relative;width:100%;height: 9.5rem;overflow:hidden;background: rgba(0,0,0,.1);}
.video_box .img img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 100%;width:auto;height: 100%;}
.video_box .btn_wrap {padding: 1rem 1.5rem;background:#fff;overflow:hidden;}
.video_box .btn_wrap a {position: relative;display: flex;width: 100%;max-width: 13.75rem;height: 2rem;background: #529fff;border-radius: 1.025rem;padding: .5rem 1.3rem;margin: 0 auto;align-items: center;justify-content: space-between;}
.video_box .btn_wrap a p{color: #fff;font-size: 0.8rem;font-weight: 500;}
.video_box .btn_wrap a i {font-size: 1rem;color: #fff9c4;text-align: center;vertical-align: top;transition: all .35s;-webkit-transition: all .35s;}
/** btn_more :active **/
.video_box .btn_wrap a:hover i, .video_box .btn_wrap a:focus i {color:#fff;}

/* 게시판 */
.TD08_notice {position:relative; height:100%; }
.TD08_notice h2.heading {display:inline-block; max-width:calc(100% - 3rem); margin-right:0; vertical-align:middle;}
.TD08_notice .titTab {/* position:relative; *//* display: none; *//* width:calc(100% - 6.75rem); */vertical-align:middle;margin:0 0 1.25rem 1rem;/* padding:0 2rem 0 1.5rem; */}
.TD08_notice .titTab:before {content:""; position:absolute; top:50%; left:0; width:50%; height:1px; z-index:-1; background:#e0e0e0; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.TD08_notice .titTab ul {background:#fff; overflow:hidden; z-index:1;}
.TD08_notice .titTab li {position:relative; max-width:33.333%; float:left; font-size:1.1rem; line-height:1.5rem; vertical-align:middle;} 
.TD08_notice .titTab li + li:before{content:""; position:absolute; left:0; top:.65rem; width:.25rem; height:.25rem; background:#ccc; border-radius:50%;}
.TD08_notice .titTab li a {display:block; color:#444; padding:0 1rem; font-weight:600;}
.TD08_notice .titTab li a span {display:block; overflow:hidden; white-space:nowrap;}
.TD08_notice .list_box {display:none; width:100%; }
.TD08_notice .list_box ul {position:relative;display:block;height: 11rem;margin-top: .9rem;background:#fff;border: 2px solid #dedede;border-radius:1.5rem;padding: 1rem 1.5rem;overflow:hidden;-webkit-transition:all .15s;transition:all .15s;box-shadow: 6px 0 15px rgba(209, 211, 211, .35);} 
.TD08_notice .list_box li {position:relative;width: 100%;border-bottom: 1px dotted #dbdbdb;}
.TD08_notice .list_box li:last-child {border-bottom: none;}
.TD08_notice .list_box li:nth-of-type(n + 5) {display:none;}
.TD08_notice .list_box .Notice_f {width:100%;height:3.8rem;display: flex;padding: .5rem 1.5rem;border: 2px solid #dedede;border-radius: 1.5rem;box-shadow: 6px 0 15px rgba(209, 211, 211, .35);align-items: center;justify-content: center;}
.TD08_notice .list_box .Notice_f a {position:relative;display: flex;width: 100%;align-items: center;}
.TD08_notice .list_box .Notice_f a:hover, .TD08_notice .list_box .Notice_f a:focus {text-decoration:underline;}
.TD08_notice .list_box .Notice_f a .tit {font-size: 0.85rem;font-weight: 700;color:#263238; width:calc(100% - 4.5rem); text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.TD08_notice .list_box .Notice_f a > span {display: block;width: 4.5rem;font-family: 'Montserrat';font-size: 0.65rem;font-weight: 300;color: #5f5f5f;text-align: right;}
.TD08_notice .list_box li a {display: block;line-height: 2.2rem;}
.TD08_notice .list_box li a:focus,.TD08_notice .list_box li a:hover {text-decoration:underline;}
.TD08_notice .list_box li p.tit {width:calc(100% - 4.5rem);font-size: 0.7rem;color: #6b6b6b;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.TD08_notice .list_box li span {position: absolute;font-family: 'Montserrat';right: 0;top: 0;font-size: 0.65rem;font-weight: 300;color: #5f5f5f;}
.TD08_notice .list_box li a .txt {display:none;}
.TD08_notice .list_box li a.new .tit {padding-left: 1.25rem;}
.TD08_notice .list_box li a.new .tit:before {content:"N";position:absolute;left: 0;top: 50%;transform: translate(0, -50%);width: 1rem;height: 1rem;background:#5665b6;color:#fff;text-align:center;border-radius:50%;line-height: 1rem;font-size: .65rem;font-family:"Montserrat";font-weight:400;}
.TD08_notice .list_box li.no_data{width:100%; text-align:center;}
.TD08_notice .list_box li.no_data p{border:1px solid #e0e0e0; border-radius:1.5rem; line-height:24.5rem;}

/** 게시판 :active **/
.TD08_notice .titTab li a:hover,
.TD08_notice .titTab li a.current {color:#5665b6; font-weight:700;}
.TD08_notice .list_box.on {display:block;}  

/* 갤러리 */
.TD08_gallery {position:relative; width:100%; height:100%;}
.TD08_gallery .list_box ul {margin: -.5rem -0.75rem;overflow: hidden;}
.TD08_gallery .list_box ul li {float:left;width: 50%;padding: .5rem 0.75rem;}
.TD08_gallery .list_box ul li:nth-of-type(n + 3) {display:none;}
.TD08_gallery .list_box a {position:relative;display:block;height: 15.7rem;border: 1px solid #dedede;border-radius:1.5rem;overflow:hidden;box-shadow: 6px 0 15px rgba(209, 211, 211, .35);}
.TD08_gallery .list_box a .img{position:relative;width:100%;height: 10.5rem;background:rgba(0,0,0,.1);overflow:hidden;}
.TD08_gallery .list_box a .img img { position:relative; left:50%; width:auto; height:100%; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: all .2s; -webkit-transition: all .2s;}
.TD08_gallery .list_box a .txt {padding: 1.25rem 1.5rem;background:#fff;overflow:hidden;}
.TD08_gallery .list_box a .txt > span {display:block;margin-bottom: 0.6rem;color:#222;font-size:.9rem;font-weight: 600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.TD08_gallery .list_box a .txt > em {position:relative;float:left;font-family:"Montserrat";font-size: 0.65rem;color: #5f5f5f;font-weight: 300;}
.TD08_gallery .list_box a .txt > em + em {float:right;}
.TD08_gallery .list_box a .txt > em:before {display:inline-block; margin-right:.25rem; font-family:"xeicon";}
.TD08_gallery .list_box a .txt > em + em:before{content:"\e950";}
.TD08_gallery .list_box .no_data {width:100%; text-align:center;}
.TD08_gallery .list_box .no_data p {line-height:15.95rem; border-radius:1.5rem; background:rgba(0,0,0,.1);}

/** 갤러리 :active **/
.TD08_gallery .list_box a,
.TD08_gallery .list_box a img,
.TD08_gallery .list_box a .txt{-webkit-transition:all .15s; transition:all .15s;}
.TD08_gallery .list_box a:hover {border: 3px solid #ff766a;}
.TD08_gallery .list_box a:hover .txt {background: #ff766a;}
.TD08_gallery .list_box a:hover .txt > span,
.TD08_gallery .list_box a:hover .txt > em {color:#fff;}
.TD08_gallery .list_box a:hover .img img {transform: translateX(-50%) scale(1.1); -webkit-transform: translateX(-50%) scale(1.1);}

/*이용예약*/
.reservation ul li{width: 100%;}
.reservation ul li + li{margin-top: .9rem;}
.reservation ul li a{background: #fff;display: flex;width: 100%;height: 7.4rem;border: 2px solid #dedede;border-radius: 1.5rem;align-items: center;justify-content: flex-start;padding: 1.5rem;transition: .15s all;-webkit-transition: .15s all;}
.reservation ul li a .img_ico p {display:flex;justify-content:center;align-items:center;background:#f0f2ff;width:3.7rem;height:3.7rem;border-radius: 50%;}
.reservation ul li a .img_ico p img {max-width:100%;}
.reservation ul li a .btn_text{margin-left:.5rem; color:#263238;}
.reservation ul li a .btn_text span {font-size:0.9rem;font-weight:700;word-break:auto-phrase;}
.reservation ul li a .btn_text span em{color:#5665b6}
.reservation ul li a .btn_text p {display: flex;font-size:0.6rem;font-weight:500;margin-top: .6rem;align-items: center;justify-content: space-between;}
.reservation ul li a .btn_text p i{font-size:1.25rem;color: #686868;}

/* hover */
.reservation ul li a:hover,.reservation ul li a:focus{background: #5665b6;border: 2px solid #5665b6;box-shadow: 8px 0 15px rgb(0 0 0 / 31%);}
.reservation ul li a:hover .img_ico p,.reservation ul li a:focus .img_ico p {background:#fff;}
.reservation ul li a:hover .btn_text span,.reservation ul li a:focus .btn_text span {color:#fff}
.reservation ul li a:hover .btn_text span em,.reservation ul li a:focus .btn_text span em {color:#fff9c4}
.reservation ul li a:hover .btn_text p,.reservation ul li a:focus .btn_text p {color:#fff}
.reservation ul li a:hover .btn_text p i,.reservation ul li a:focus .btn_text p i{color:#fff}

/* 배너존 */
.banner_zone {line-height:1; border-top:1px solid #ccc;}
.banner_zone .container {position:relative; display:flex; align-items:center; height:4rem; overflow:hidden;}
.banner_zone h2 {width:4rem; font-size:0.9rem; font-weight:600; color:#191919;}
.banner_zone .btn {overflow:hidden;}
.banner_zone .btn a {float:left; width:1.5rem; height:1.4rem; margin:0 1px; line-height:1.4rem; text-align:center; overflow:hidden; border-radius:50%; color:#818896; border:1px solid #dbe0ec; background:#f2f6ff;}
.banner_zone .btn a.play {display:none;}
.banner_zone .bnWrap {width:calc(100% - 11rem); margin-left:1.5rem; overflow:hidden;}
.banner_zone .bnWrap .slick-track { margin-left:0;}
.banner_zone .bnWrap a {display:block; height:2.5rem; line-height:2.3rem; text-align:center; margin:0 5px; overflow:hidden;}
.banner_zone .bnWrap a img {max-width:100%; max-height:100%; vertical-align:middle;}
.banner_zone .btn a:hover,
.banner_zone .btn a:focus {border-color:#004794; color:#004794;}
.banner_zone .bnWrap a:hover,
.banner_zone .bnWrap a:focus {border-color:#aaa;} 
.banner_zone a {transition:all .2s; -webkit-transition:all .2s;}

@media (max-width:1400px) {
/*마음봄센터란?*/
.img_box {padding: 1rem;height: 100%;}
.img_box .txt{font-size:0.8rem;margin-top: 0.75rem;}

}

@media (max-width:1280px) {

/* 메인비주얼 */
.TD08_visual {border-radius:1.5rem;}
.TD08_visual .item img {height:23.5rem}

/*마음봄센터*/
.img_box {border-radius: 1.5rem;}
.img_box:after{display:none;}
.img_box:before{bottom: -5rem;width: 100%;}
.img_box .txt{line-height: 1rem;font-size: 0.7rem;margin-top: .5rem;z-index:1;width: auto;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3; /* 5줄로 제한 */-webkit-box-orient: vertical;}
.img_box ul {padding: .5rem;}
.img_box ul li{font-size: 0.65rem;}
.img_box .txt br {display:none;}
.img_box ul li p {overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;}

/*동영상*/
.video_box {border-radius: 1.5rem;}
.video_box .img{height: 9.25rem;}
.video_box .img img {max-width: none;}
.video_box .btn_wrap {padding: 0;background:#fff;text-align: center;}
.video_box .btn_wrap a {max-width: 100%;height: 100%;border-radius: 0;justify-content: center;padding: 0;}
.video_box .btn_wrap a p{margin-right: 0.35rem;line-height: 2.25rem;}

/* 갤러리 */
.TD08_gallery .list_box ul {margin: -.5rem;}
.TD08_gallery .list_box ul li {width: 50%;padding: .5rem;}
.TD08_gallery .list_box a .txt > em {font-size: 0.7rem}

/* 게시판 */
.TD08_notice .list_box .Notice_f {height: 3rem;padding: .5rem 1.25rem;}
.TD08_notice .list_box ul {height: 8.8rem;margin-top: .6rem;padding: 1rem;} 
.TD08_notice .list_box li a {line-height: 1.6rem;}
.TD08_notice .list_box .Notice_f a > span {font-size: 0.7rem;}
.TD08_notice .list_box li span {font-size: 0.7rem;}

/*이용예약*/
.reservation ul li + li{margin-top: .6rem;}
.reservation ul li a{height: 5.9rem;}
.reservation ul li a .btn_text span {font-size: 0.85rem;}
.reservation ul li a .btn_text p {font-size: 0.7rem;margin-top: 0.25rem;justify-content: flex-start;}
.reservation ul li a .btn_text p i{font-size: 1rem;margin-left: .25rem;}

}


@media (max-width:950px) {
/* common title */
h2.heading {font-size:1rem;}
}

@media (max-width:768px) {
/* common title */
h2.heading {margin-bottom:1rem;}

/* dge CI */
.dgeCi img {width:5rem; height:auto;}

/*메인비주얼*/
.TD08_visual .item img {height: auto;}

/* 게시판 */
.TD08_notice .titTab li {max-width:100%;}

/* 갤러리 */
.TD08_gallery .list_box a {height: 15.2rem;}
.TD08_gallery .list_box a .txt {padding: 1rem;}

/* 배너존 */
.banner_zone h2 {display:none;}
.banner_zone .bnWrap {width:calc(100% - 6.5rem);}

/*동영상*/
.video_box .img{height: 10.5rem;}

/*마음봄센터*/
.img_box:after{display:block; height:177px;}
.img_box:before{bottom: -2.4rem;}
.img_box .txt{font-size:.9rem;line-height: 1.25rem;-webkit-line-clamp: 6; /* 5줄로 제한 */}
.img_box ul {margin-top: 3rem;padding: 1rem .5rem;}
.img_box ul li{font-size: 0.7rem;}
.img_box .txt br {display:block;}
.img_box ul li p {-webkit-line-clamp: 1;}
}
@media (max-width:640px) {
/* dge CI */
.dgeCi img {width:4rem;}

/* 게시판 */
.TD08_notice .list_box ul {height: auto;} 
.TD08_notice .list_box li {width:100%;}
.TD08_notice .list_box li.no_data p {line-height:21.6rem;}

/*이용예약*/
.reservation ul {margin: -0.25rem;}
.reservation ul li{width: 50%;padding: 0.25rem;float: left;}
.reservation ul li + li{margin-top:0;}
.reservation ul li a{height: auto;padding: 1rem;}
.reservation ul li a .img_ico p {width: 3.056rem;height: 3.056rem;}
.reservation ul li a .img_ico p img {max-width:100%;width: 60%;}
.reservation ul li a .btn_text p {margin-top: .5rem;}
.reservation ul li a .btn_text p i{font-size: 0.85rem;margin-left: 0;}

}

@media (max-width:540px) {

}

@media (max-width:480px) {
/*메인비주얼*/
.TD08_visual .item img {height: 14rem;}

/* 갤러리 */
.TD08_gallery .list_box ul li{width:100%;}
.TD08_gallery .list_box ul li:nth-of-type(n+2){display:none;}

/* 게시판 */
.TD08_notice .list_box .Notice_f {height: 3rem;}
.TD08_notice .list_box .Notice_f a {padding: 0 1.25rem;}
.TD08_notice .list_box ul {position:relative;padding: .5rem 1rem;} 
.TD08_notice .list_box li a {display: block;line-height: 2.25rem;}

/*마음봄센터*/
.img_box:after{bottom: 1.5rem;height:177px;}
.img_box .tit {font-size:1.25rem;}
.img_box .txt{margin-top: 1rem;}
.img_box ul {padding: .75rem 2rem;}
.img_box ul li p {-webkit-line-clamp: 2;}

/*동영상*/
.video_box .btn_wrap a p{line-height: 2.5rem;}

/*이용예약*/
.reservation ul {margin: -0.25rem;}
.reservation ul li{width: 100%;}
}

@media (max-width:380px) {
/* dge CI */
.dgeCi {bottom:.5rem; left:.5rem;}
.dgeCi img {width:3.5rem;}

/* 메인비주얼 */
.TD08_visual {border-radius:1.75rem;}
.TD08_visual .control {padding:0 1rem;}
.TD08_visual .control > a {font-size:1rem;}
.TD08_visual .control p {font-size:.85rem;}
.TD08_visual .control p strong {padding-right:1rem;}
.TD08_visual .control p strong:after {right:.5rem;}


}
