﻿/* btn_more */
.btn_more{ position:absolute; width:2rem; height:2rem; border-radius:50%; background-repeat: no-repeat; background-position: center; transition: all .2s; -webkit-transition: all .2s; margin-top:0 !important;}
.btn_more:hover,
.btn_more:focus{ transform: rotate(90deg); -webkit-transform: rotate(90deg);}

/* common title */
h2.heading{ line-height:2rem; font-size:1rem; font-weight: 700;}

/* dge CI */
.dgeCi{ position:absolute; left:-7.5rem; bottom:9.5rem; z-index: 1;}

/* 메인비주얼 */
.TD03_visual { position:relative; height:100%;; }
.TD03_visual .slider{ height: 100%; }
.TD03_visual .item{overflow:hidden; line-height:0;}
.TD03_visual .item img{position:relative; width:auto; height:100%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%);}
.TD03_visual .control{ width: 12.8rem; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.1rem; position:absolute; left:0; bottom:0; z-index:1; background: rgba(3, 34, 91, 0.9); border-radius: 0 2.5rem 0 0;}
.TD03_visual .control p { display:inline-block; width: 2.8rem; text-align: right; color:#fff; font-size:1.2rem; font-family: 'Montserrat'; font-weight: 600; }
.TD03_visual .control p strong {color:#ffd34d; }
.TD03_visual .control p strong:after{ content:"/"; display:inline-block; color:#6d7b99; font-size: 0.5rem;  font-weight: 400;  margin: 0 0.6rem;  vertical-align: middle;}
.TD03_visual .control p span{font-size: 0.9rem; font-weight: 400;}
.TD03_visual .control > a{ font-size:.9rem; color:#fff; text-align:center; vertical-align:middle; -webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }
.TD03_visual .control > a.play{display:none;}
.TD03_visual .control > a.play,
.TD03_visual .control > a.stop{ width: 1.5rem; height: 1.5rem; line-height: 1.5rem; background-color:#6d7b99; border-radius: 50%; }
.TD03_visual .control > a.prev:hover,
.TD03_visual .control > a.prev:focus{ transform: translateX(-0.1rem); transform: -webkit-translateX(-0.1rem); -ms-transform: translateX(-0.1rem);}
.TD03_visual .control > a.next:hover,
.TD03_visual .control > a.next:focus{ transform: translateX(0.1rem); transform: -webkit-translateX(0.1rem); -ms-transform: translateX(0.1rem);}
.TD03_visual .control > a.play:hover,
.TD03_visual .control > a.play:focus,
.TD03_visual .control > a.stop:hover,
.TD03_visual .control > a.stop:focus{ background-color:#7990c1;}

/* 바로가기 */
.TD03_link01 { position:relative; width:100%; max-width:45rem; height:100%;}
.TD03_link01 .inner{ position:relative; height:100%; border-radius:0 0 1.5rem 0;}
.TD03_link01 ul{ position:relative;}
.TD03_link01 li { width:100%; z-index:1; margin:1rem 0; background: #fff; border-radius: 2rem; box-shadow:0px 2px 10px rgba(0,0,0,0.1); }
.TD03_link01 li a { position:relative; width:100%; height:7rem; padding: 0 1.2rem; display:flex; align-items: center; justify-content: flex-start; border-radius:1rem; border:2px solid transparent; z-index: 0; word-break: keep-all;}
.TD03_link01 li a img { position: relative; width:3.8rem; height:3.8rem; background: #ecf5ff; border-radius: 50%; transition:all ease .3s;}
.TD03_link01 li a p {padding-left: 0.8rem; text-align: left; font-size:0.9rem; line-height:1rem; overflow:hidden; font-weight:600; word-break: break-all;}
.TD03_link01 li a p span{ display: block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 500; color: #666;}

/** 바로가기 :active **/
.TD03_link01 li:hover,
.TD03_link01 li:focus { left:-2px; top:-2px; background:#00a8f1; color: #fff; }
.TD03_link01 li:hover a img,
.TD03_link01 li:focus a img {background: #fff; transform: rotateY(180deg);}
.TD03_link01 li:hover a span,
.TD03_link01 li:focus a span {color: #fff;}


/* 게시판 */
.TD03_notice { position:relative; height:100%;  }
.TD03_notice .titTab{margin-right:2rem;}
.TD03_notice .titTab .slider{font-size:0;}
.TD03_notice .titTab li { position:relative; display:inline-block; font-size:1rem; line-height:2rem; vertical-align:middle; }
.TD03_notice .titTab li + li {margin-left:.05rem; padding-left:1rem;}
.TD03_notice .titTab li em {font-family: 'Montserrat'; font-weight: 700; color: #d0d0d0; font-size: 1.1rem;}
.TD03_notice .titTab li em:after{content: ''; display: inline-block; width: 9px; height: 9px; margin:0 .5rem; background: #00c4c1; border-radius: 50%; position: relative; top: 50%; transform: translateY(-50%);}
.TD03_notice .titTab li a { display:inline-block; vertical-align: bottom; color:#444; margin-right: .5rem;}
.TD03_notice .titTab li a span{ display:inline-block; vertical-align: middle; overflow:hidden; white-space:nowrap; font-weight: 700;}

.TD03_notice .list_box { display:none; width:100%;  }
.TD03_notice .list_box .slider { height:100%; }
.TD03_notice .list_box .slider:after { content: ''; display: block; clear: both; width: 90%; height: 1px; background: #bbb; position: relative; bottom:0; left: 3.5rem; z-index: -1;}
.TD03_notice .list_box .item { position:relative; float: left; width:22%;}
.TD03_notice .list_box .item a { position:relative; display:block; height: 11.5rem; padding: 2rem 1.5rem; word-break:keep-all; font-weight:400; color:#111; margin:1rem 1rem 3rem 1rem; border-radius: 1.5rem; box-shadow:0 0.4rem 0.6rem 0rem #ddd; background: #fff;}
.TD03_notice .list_box .item a:after {content: ''; position: absolute;	bottom: 4px;	left: 2rem;	width: 0;	height: 0;border: 30px solid transparent;	border-top-color: #fff;	border-bottom: 0;	border-left: 0;	margin-bottom: -29px;}
.TD03_notice .list_box .item a.new:before{ content:"N"; line-height: 40px; background: #00c4c1; text-align: center; color: #fff;}
.TD03_notice .list_box .item a:before{ content:""; display: inline-block; width:40px; height: 40px; background: url('/images/dgedu/template/TD03/main/ico_notice.png') no-repeat; border-radius: 50%; position: absolute; top: 1.6rem; left: 1.4rem;}
.TD03_notice .list_box .item a p{ position:relative; }
.TD03_notice .list_box .item a p:after { content: ''; display: block; width: 9px; height: 9px; background: #858585; position: absolute; bottom: -5.95rem; left: 0.1rem; border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; z-index: 2; transition: 0.2s ease all; }
.TD03_notice .list_box .item a p strong{ display: block; width: 100%; margin: 1.2rem 0 1rem 0; font-size:.9rem; font-weight: 600; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.TD03_notice .list_box .item a p span { display: block; width:100%; }
.TD03_notice .list_box .item a p span.date { text-align: right; color: #666; }
.TD03_notice .list_box .item a p span.txt {height: 2.2rem; overflow: hidden;}
.TD03_notice .list_box .item.no_data{text-align:center; line-height:9.5rem; background: rgba(0,0,0,0.1); border-radius: 1rem;}
.TD03_notice .btn_more { position: absolute; width: auto; height: auto; right:0; top:0.5rem; font-family: 'Montserrat'; font-weight: 700; }
.TD03_notice .btn_more:before { content: ''; display: block; width: 9px; height: 9px; background: #00c4c1; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: -1.8rem; z-index: 2;}
.TD03_notice .btn_more:after { content: ''; display: block; width: 15px; height: 1px; background: #3e7a7c; position: absolute; top: 50%; transform: translateY(-50%); left: -1rem; z-index: 1;}
.TD03_notice .list_box .slick-list { overflow:initial; overflow-x: clip; padding-left: 0.5rem;}
.TD03_notice .list_box .control { position: absolute; bottom:-0.8rem; right:0; background: #fff; z-index: 9}
.TD03_notice .list_box .control a { display: inline-block !important; width:45px; height:45px; line-height: 45px; background: #fff; border-radius: 50%; border:1px solid #ddd; box-shadow: 0 0 7px 0px #ddd; text-align: center; font-size: 1.1rem; font-weight: 700;}
.TD03_notice .list_box .control a + a { margin-left: 0.2rem;}
/* 게시판 :active */
.TD03_notice .list_box .item:hover a,
.TD03_notice .list_box .item:focus a{ box-shadow:0 0 0 2px #00c4c1, 0 0.1rem 1.1rem 0.1rem #bce9e8; }
.TD03_notice .list_box .item:hover a p:before,
.TD03_notice .list_box .item:focus a p:before {content: ''; position: absolute; bottom:-55px; left: 0.4rem; width: 0;	height: 0;border: 29px solid transparent;	border-top-color: #00c4c1;	border-bottom: 0;	border-left: 0;	margin-bottom: -29px;}
.TD03_notice .list_box .item:hover a p:after,
.TD03_notice .list_box .item:focus a p:after{ width: 25px; height: 25px; background:#fff; box-shadow:inset 0 0 0 6px #e4ffff, inset 0 0 0 12px #00c4c1; border: 2px dotted #00c4c1; transform: translate(-0.4rem, 0.4rem);}
/* .TD03_notice .list_box li:hover a:after,
.TD03_notice .list_box li:focus a:after{ width: 20px; height: 20px; background:#00c4c1; border: 5px solid #e4ffff; outline: 2px dotted #00c4c1; -ms-outline: 2px dotted #00c4c1; -webkit-outline: 2px dotted #00c4c1;bottom: -2.8rem; left: 1.5rem;} */
.TD03_notice .list_box .control a:hover,
.TD03_notice .list_box .control a:active{transform: translateX(-0.2rem);}
.TD03_notice .list_box .control a + a:hover,
.TD03_notice .list_box .control a + a:active{transform: translateX(0.2rem);}

.TD03_notice .list_box .item:hover a:before,
.TD03_notice .list_box .item:focus a:before{ background: url('/images/dgedu/template/TD03/main/ico_notice_active.png') no-repeat ;}
.TD03_notice .list_box .item:hover a.new:before,
.TD03_notice .list_box .item:focus a.new:before{ background-image: none; background-color: #00c4c1;}
.TD03_notice .list_box .item:hover
.TD03_notice .titTab .item a.current { padding:.3rem 1.6rem; color:#fff; background: #00a8f1; font-weight:700; border-radius:2rem 2rem 0 2rem; }
.TD03_notice .list_box.on { display:block; }

.TD03_notice .btn_more:hover,
.TD03_notice .btn_more:focus {transform:none;}
.TD03_notice .btn_more:hover:before ,
.TD03_notice .btn_more:focus:before { left: -0.6rem;}
.TD03_notice a,
.TD03_notice :before{-webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }
.TD03_notice .no_data{width: 100%; margin-top:.75rem; line-height: 15rem; text-align: center; background:#f7f7f7; border-radius:1.5rem;}

/* 포토갤러리 */
.TD03_gallery { position: relative; }
.TD03_gallery .list_box ul li a { position: relative; display: block; width: 100%; margin-top: 1rem;}
.TD03_gallery .list_box ul li a p.img{ display:flex; align-item:center; justify-content:center; width: 100%; height: 11.5rem; margin-bottom: 1rem; overflow: hidden; border-radius: 1.5rem; background: #eee;}
.TD03_gallery .list_box ul li a p.img img{ width:auto; height: 100%; transition: 0.2s ease all;  }
.TD03_gallery .list_box ul li a p + p{ width: 100%; padding: 0 1rem; }
.TD03_gallery .list_box ul li a p strong{ display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; font-weight: 600; font-size: 0.9rem;}
.TD03_gallery .list_box ul li a p span{ display:block; padding-top:.25rem; font-size:.75rem; color: #a6a6a6; }
.TD03_gallery .btn_more { position: absolute; width: auto; height: auto; right:0; top:0.5rem; font-family: 'Montserrat'; font-weight: 700;}
.TD03_gallery .btn_more:before { content: ''; display: block; width: 9px; height: 9px; background: #00c4c1; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: -1.8rem; z-index: 2;}
.TD03_gallery .btn_more:after { content: ''; display: block; width: 15px; height: 1px; background: #3e7a7c; position: absolute; top: 50%; transform: translateY(-50%); left: -1rem; z-index: 1;}
/* 포토갤러리 ::hover, active */
.TD03_gallery .list_box ul li:hover a p.img img,
.TD03_gallery .list_box ul li:active a p.img img{ transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1);}
.TD03_gallery .list_box ul li:hover a p + p,
.TD03_gallery .list_box ul li:active a p + p{text-decoration: underline;}

.TD03_gallery .btn_more:hover,
.TD03_gallery .btn_more:focus {transform:none;}
.TD03_gallery .btn_more:hover:before ,
.TD03_gallery .btn_more:focus:before { left: -0.6rem;}
.TD03_gallery a,
.TD03_gallery :before{-webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }

.TD03_gallery .no_data{ height: 15rem; line-height: 15rem; background: #f4f4f4; text-align: center; margin-top: 1rem;}

/* 배너존 */
.banner_zone {line-height:1; border-top:1px solid #ccc; background: #fff;}
.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:1700px) {
	.dgeCi{left: 0rem;}
}

@media (max-width:1520px) {
	.dgeCi{left: 1rem;}
}

@media (max-width:1440px) {

}

@media (max-width:1360px) {

}
@media (max-width:1240px) {

	/* dge CI */
	.dgeCi{ left:1rem; top:7rem;}

	/* 메인비주얼 */
	.TD03_visual .item img{width:100%; height:auto; left:auto; transform: none; -webkit-transform: none;}
	.TD03_visual .control{padding: 0.7rem 2rem;}
	.TD03_visual .control p { margin-top:-.25rem; margin-right:.75rem;}

	/* 바로가기 */
	.TD03_link01{margin-right: 0; max-width: 100%; }
	.TD03_link01 .inner{width: 100%; }
	.TD03_link01 ul{ display: flex; justify-content: space-between; align-items: center;}
	.TD03_link01 li{flex: 1; margin: 0.5rem 1rem 0.5rem 0;}
	.TD03_link01 li:last-child{margin-right: 0; }
	.TD03_link01 li a{ padding: 0.1rem 0.6rem; justify-content: flex-start;}
	.TD03_link01 li a p{word-break: break-all;}
	.TD03_link01 li a img{ width: 3.5rem; height: 3.5rem; margin-right: 0.5rem; }
	.TD03_link01 li a p span{ font-size: 0.75rem; }

	/* 게시판 */
	.TD03_notice .list_box .slider:after{ left: 3.7rem; transform: none; }
	.TD03_notice .list_box .item a{ margin-bottom: 2.4rem;}
	.TD03_notice .list_box .item a p:after{bottom: -5.15rem;}
	.TD03_notice .list_box .item a p span.txt{ height: 2.4rem; }
	.TD03_notice .list_box .control{bottom:-0.2rem;}
	.TD03_notice .list_box .item:hover a p:before, .TD03_notice .list_box .item:focus a p:before{bottom: -2.5rem;}


}

@media (max-width:1024px) {


	/* 게시판 */
	.TD03_notice .list_box .slider:after{width: 80%;}
	.TD03_notice .list_box .item a{ word-break: break-all;}
	.TD03_notice .list_box .control{bottom: -1.2rem;}

}

@media (max-width:768px) {
	.dgeCi{width: 4rem; top: 3rem;}
	.dgeCi img{ width: 100%; }

	/* 메인비주얼 */
	.TD03_visual .control{ right:.75rem;}

	/* 바로가기 */
	.TD03_link01 ul{}
	.TD03_link01 li a{padding-top: 0.5rem; padding-bottom: 0.5rem;}
	.TD03_link01 li a p{max-height: 6rem;}
	.TD03_link01 li .completed{ right: -1.4rem;}

	/* 게시판 */
	.TD03_notice .list_box ul:after{ width: 80%; }

	/* 배너존 */
	.banner_zone h2{display:none;}
	.banner_zone .bnWrap{width:calc(100% - 6.5rem);}

}

@media (max-width:640px) {
	.TD03_link01 ul{flex-flow: column;}
	.TD03_link01 ul li{margin: .5rem 0; }
	.TD03_link01 li a{ justify-content: flex-start; height: auto;}
	.TD03_link01 li a img{margin-right:0; }

	/* 게시판 */
	.TD03_notice .list_box .item a p strong{ margin-bottom: 0.5rem;}
	.TD03_notice .list_box .item a p:after { bottom: -5.7rem;}
	.TD03_notice .list_box .item:hover a p:before, .TD03_notice .list_box .item:focus a p:before {bottom: -3rem;}

}

@media (max-width:540px) {

	/* dge CI */
	.dgeCi{ right:-2rem; top:3%;}
	.dgeCi img{ width:60%;}

	/* common title */
	h2.heading{ font-size:1.05rem;}

	/* 메인비주얼 */
	.TD03_visual .control{ right:.75rem; bottom: 0; padding: 0.2rem 1rem;}
	.TD03_visual .control > a{ width:2.5rem; height:2rem; line-height:2rem; }
	.TD03_visual .control p { margin-top:0; font-size:1rem;}

	/* 바로가기 */
	.TD03_link01 ul{ flex-wrap: wrap;}
	.TD03_link01 li:nth-child(1){ margin-bottom: 0.5rem;}
	.TD03_link01 li:nth-child(2){ margin-bottom: 0.5rem;}

	/* 게시판 */
	.TD03_notice .titTab li{ font-size: 1.05rem; line-height: auto;}
	.TD03_notice .list_box .slider{width: calc(100% + 1rem); margin-left: -0.75rem;}
	.TD03_notice .list_box .slider:after{left: 2.9rem;}
	.TD03_notice .list_box .item a{ margin: 1rem 0.5rem 53px 0.5rem; box-shadow:none; border: 1px solid #bbb;}
	.TD03_notice .list_box .item a p:before{content: ''; position: absolute; bottom: -52px; left: 0.45rem; width: 0; height: 0; border: 29px solid transparent; border-top-color: #bbb; border-bottom: 0; border-left: 0; margin-bottom: -29px;}
	.TD03_notice .list_box .item a p:after{bottom: -111px;}
}

@media (max-width:460px) {

	/* 바로가기 */
	.TD03_link01{margin-right:0.5rem;}

	/* 게시판 */
	.TD03_notice .titTab li em{display: none;}
}

@media (max-width:360px) {

	/* dge CI */
	.dgeCi img{ width:40%;}

	/* 바로가기 */
	.TD03_link01 li{ min-width: 100%; margin: 0.2rem 0 !important;}

	/* 게시판 */
	.TD03_notice .titTab .item b{display: none;}
	.TD03_notice .list_box .slider:after{left: 2.5rem;}
	.TD03_notice .list_box .item a{ padding: 2rem 1rem; }
	.TD03_notice .list_box .item a:before{ left: 1rem; }
	.TD03_notice .list_box .item a:after{left: 1.45rem;}
	.TD03_notice .list_box .item a p:before{left: 7px;}

}
