﻿/* btn_more */
.btn_more{ position:absolute; right:0; top:0; line-height:1.75rem; font-size:.75rem; font-weight:600; color:#111;}
.btn_more i{ width:1.75rem; height:1.75rem; line-height:1.75rem; text-align:center; border-radius:50%; font-size:1rem; margin-left:5px; vertical-align:top; transition:all .2s; -webkit-transition:all .2s;}
.btn_more i:hover,
.btn_more i:focus{ transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.btn_more i{ background:#f0f0f0;}
/* btn_more : active*/
.btn_more:hover,
.btn_more:focus{ color:#1a4ab9;}
.btn_more:hover i,
.btn_more:focus i{ background:#1a4ab9; color:#fff; }

/* common title */
h2.heading{ line-height:2rem; font-size:1rem; font-weight: 700;}

/* dge CI */
.dgeCi{ position:absolute; right:1rem; top:1.5rem; z-index: 9999;}

/* 메인비주얼 */
.TD12_visual { position:relative; height:100%;}
.TD12_visual .slider{ height: 100%; }
.TD12_visual .slider .slick-list{overflow: visible;} 
.TD12_visual .item { position:relative; width: 100%;}
.TD12_visual .item img{ display: block; position:relative; left: 50%; transform: translateX(-50%); opacity: 0; width:auto; height:100%; transition: opacity 2s, transform 3s;}
.TD12_visual .slick-active img{ opacity: 1;} 
.TD12_visual .slick-dots {position: absolute; right: 50%; top: 18rem; z-index: 9999; margin-right: 0.5rem;}
.TD12_visual .slick-dots li{display: inline-block; width: 10px; height: 10px; border-radius: 10rem; background: #9dacc3;}
.TD12_visual .slick-dots li + li {margin-left: 0.5rem; }
.TD12_visual .slick-dots li.slick-active{ width: 30px; background:#003eaf;}
.TD12_visual .slick-dots li button{width: 100%; height: 100%; opacity: 0;} 
.TD12_visual .control{ display: flex; align-items: center; justify-content: space-between; position:absolute; left:50%; top:18rem; z-index:9999; border-radius: 0 2.5rem 0 0; transform: translateY(-40%);}
.TD12_visual .control p { display:inline-block; width: 2.8rem; text-align:center; color:#003eaf; font-size:1.1rem; font-family: 'Montserrat'; font-weight: 600; }
.TD12_visual .control p strong {display: inline-block; width: 2rem; height: 2rem; line-height: 2rem; background: #fff; border-radius: 50%; text-align: center; box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem #9d9d9d;}
.TD12_visual .control p span{font-size: 0.9rem; font-weight: 400;}
.TD12_visual .control > a{ font-size:.9rem; text-align:center; vertical-align:middle; -webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }
.TD12_visual .control > a.play{display:none;}
.TD12_visual .control > a.play,
.TD12_visual .control > a.stop{ width: 2rem; height: 2rem; line-height: 2rem; color:#6d7b99; text-align: center; }
.TD12_visual .control > a.prev:hover{ transform: translateX(-0.1rem); transform: -webkit-translateX(-0.1rem); -ms-transform: translateX(-0.1rem);}
.TD12_visual .control > a.next:hover{ transform: translateX(0.1rem); transform: -webkit-translateX(0.1rem); -ms-transform: translateX(0.1rem);}

/* 바로가기1 */
.TD12_link { display: flex; justify-content: space-around; align-items: center; word-break: keep-all;}
.TD12_link ul { width: 100%; position: relative; min-height: 13rem; padding:1rem; text-align: center; border-radius: 1.5rem; box-shadow: 0 0.1rem 0.5rem 0.1rem rgba(0,0,0,0.2); background:#e5f8f8 url('/images/dgedu/template/TD12/main/pttrn_link1.png'); transition: all 0.2s; padding: 0 2rem; display: flex; flex-direction: column; justify-content: center;} 
.TD12_link li + li{ margin-top:.5rem;}
.TD12_link li a{ position:relative; display: flex; justify-content: flex-start; align-items: center; align-self: stretch; flex-direction: row; height: auto; background: #fff; border: 1px solid #bbb; border-radius: 1rem; padding: 0.7rem; transition: all 0.2s;}
.TD12_link li a:before{ content:"\e90b"; position:absolute; right:.75rem; top:calc(50% - .6rem); font-size:1.2rem; line-height:1; font-family:'xeicon';}
.TD12_link li a i{ width: 1.5rem; min-width: 1.5rem; height: 1.5rem; font-size: 1rem; text-align: center; border-radius: 50%; line-height: 1.5rem; margin-right: 0.2rem; }
.TD12_link li a span{overflow: hidden; max-height: 2.3rem; padding-right:1.0rem; text-align: left; font-weight: 600; }
/* 바로가기1 : hover */
.TD12_link li a:hover{ background: #00b6bd; border-color:#00b6bd; color: #fff;}
.TD12_link li a:hover i{ background: #00a3aa}

/* 바로가기2 */
.TD12_link2{ width:100%; height:100%;}
.TD12_link2 ul { width:calc(100% + 1rem); margin-left:-.5rem; display:flex; word-break: keep-all;}
.TD12_link2 li { min-width:0; flex:1; margin:0 .5rem; text-align: center; }
.TD12_link2 li a{ position: relative; display: flex; width:100%; height:13rem; padding:1rem; flex-direction: column; justify-content: center; align-items: center; border-radius:1.5rem; box-shadow: 0 0.1rem 0.5rem 0.1rem rgba(0,0,0,0.2); z-index: 0;}
.TD12_link2 li a em{ position:relative; display: block; position: absolute; height:2.85rem; padding:0 1rem; line-height: 2.85rem; border-radius: 50%; color: #fff; font-size: 1.7rem; left: 2rem; top: -15px; font-size:1rem; border-radius: 0 0.8rem 0.8rem; font-weight:600;}
.TD12_link2 li a em:before{content: ''; position: absolute; top:0; left:-15px; width: 0; height: 0; border: 15px solid transparent; border-top: 0; border-right: 0; z-index: -1;}
.TD12_link2 li a p{ display:flex; align-items:center; justify-content:center; width:6rem; height:6rem; border-radius: 50%; border:4px solid; font-size:1.5rem; font-weight:700; }
.TD12_link2 li a span{ margin:1rem 0 0 0; font-weight: 400; font-size: 1rem; overflow: hidden; color: #fff;}
/* 바로가기 : 색상 */
.TD12_link2 li.col1 a {background:#fbc83d url('/images/dgedu/template/TD12/main/pttrn_link2.png');}
.TD12_link2 li.col2 a {background:#e74327 url('/images/dgedu/template/TD12/main/pttrn_link2.png');}
.TD12_link2 li.col3 a {background:#2b9bc4 url('/images/dgedu/template/TD12/main/pttrn_link2.png');} 
.TD12_link2 li.col1 em{background: #f29348;}
.TD12_link2 li.col2 em{background: #b21a00;}
.TD12_link2 li.col3 em{background: #00597a;}
.TD12_link2 li.col1 em:before{border-bottom-color: #7c5a12;}
.TD12_link2 li.col2 em:before{border-bottom-color: #660f00;}
.TD12_link2 li.col3 em:before{border-bottom-color: #003346;}
.TD12_link2 li.col1 p{color: #f29348; border-color:#f29348; background:url('/images/dgedu/template/TD12/main/bg_link02_1.png') no-repeat center/cover;}
.TD12_link2 li.col2 p{color: #b21a00; border-color:#b21a00; background:url('/images/dgedu/template/TD12/main/bg_link02_2.png') no-repeat center/cover;}
.TD12_link2 li.col3 p{color: #00597a; border-color:#00597a; background:url('/images/dgedu/template/TD12/main/bg_link02_3.png') no-repeat center/cover;}
/* 바로가기 : hover */
.TD12_link2 a, 
.TD12_link2 p{ transition: all 0.2s; -webkit-transition: all 0.2s; }
.TD12_link2 li a:hover{ transform: translateY(-10px); -webkit-transform: translateY(-10px);}
.TD12_link2 li a:hover p{box-shadow:0 0 10px rgba(0,0,0,0.3);}

/* 게시판 */
.TD12_notice { position:relative; height:100%; font-size:0; margin-right: 1rem;}
.TD12_notice .titTab ul{font-size:0; margin-right:4rem;}
.TD12_notice .titTab li { max-width:50%; position:relative; display:inline-block; font-size:1rem; line-height:2rem; vertical-align:top; }
.TD12_notice .titTab li a { position:relative; display:block; padding-right:1.25rem; margin-right:1.25rem; color:#666; } 
.TD12_notice .titTab li a:before{content:""; position:absolute; right:-.15rem; top:calc(50% - .15rem); width:.3rem; height:.3rem; background:#eee; border-radius:.5rem; }
.TD12_notice .titTab li a span{ display:block; overflow:hidden; white-space:nowrap; }
.TD12_notice .titTab li:first-child a{ padding-left:0; }
.TD12_notice .titTab li:last-child a:before{ opacity:0; }
.TD12_notice .list_box { display:none; width:100%; margin-top:.5rem; padding-bottom:5px; height:9.5rem; }
.TD12_notice .list_box ul { height:100%; }
.TD12_notice .list_box li { position:relative; line-height: 1.65rem; }
.TD12_notice .list_box li:nth-of-type(n+7) { display:none; }
.TD12_notice .list_box li a { display:flex; justify-content: space-between; align-items: center; font-weight:400; color:#111; }
.TD12_notice .list_box li a .tit{ padding: 0 1rem 0 0; font-size:.8rem; color:#444; font-weight:600; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.TD12_notice .list_box li a .tit::before{ content: ''; display: inline-block; width: 0.2rem; height: 0.2rem; background: #1a4ab9; border-radius: 50%;vertical-align: super; margin-right: 0.5rem;}
.TD12_notice .list_box li a.new::before{ content: 'N'; font-size: 0.6rem; flex-shrink: 0; width:1rem; height: 1rem; line-height: 1rem; text-align: center; vertical-align: middle; color: #fff; background: #1a4ab9; margin-right: 0.2rem; border-radius: 50%; display: inline-block; margin-left:-0.4rem;}
.TD12_notice .list_box li a.new .tit::before{ display: none;}
.TD12_notice .list_box li a span{ flex-shrink: 0; margin-left: auto; font-size:.75rem; color:#666;}
.TD12_notice .list_box li.no_data{ width:100%; text-align:center; line-height:10rem; font-size:.8rem; background: #f7f7f7;}
/* 게시판 :active */
.TD12_notice .titTab li a:hover,
.TD12_notice .titTab li a:focus,
.TD12_notice .titTab li a.current { color:#111; font-weight:700; letter-spacing:-0.7px; }
.TD12_notice .titTab li a.current:before{ width:1rem; right:-.5rem; background:#1a4ab9; opacity:1; }
.TD12_notice .list_box.on { display:block; }
.TD12_notice .list_box li a:hover{text-decoration: underline;}
.TD12_notice :before{-webkit-transition:all .1s; transition:all .1s; }
 
/* 홍보영상 */
.TD12_video { position:relative; height:100%; }
.TD12_video .titTab ul{font-size:0; margin-right:4rem;}
.TD12_video .titTab li { max-width:50%; position:relative; display:inline-block; font-size:1rem; line-height:2rem; vertical-align:top; }
.TD12_video .titTab li a { position:relative; display:block; padding-right:1.25rem; margin-right:1.25rem; color:#666; } 
.TD12_video .titTab li a:before{content:""; position:absolute; right:-.15rem; top:calc(50% - .15rem); width:.3rem; height:.3rem; background:#eee; border-radius:.5rem; }
.TD12_video .titTab li a span{ display:block; overflow:hidden; white-space:nowrap; }
.TD12_video .titTab li:first-child a{ padding-left:0; }
.TD12_video .titTab li:last-child a:before{ opacity:0; }
.TD12_video .list_box{display: none; margin-top: 1rem; min-height:9.5rem;}
.TD12_video .list_box ul { width:calc(100% + 1rem); margin-left:-.5rem; display: flex; justify-content: space-between; align-items: center; }
.TD12_video .list_box ul li{ flex:1; min-width:0px; padding:0 .5rem; }
.TD12_video .list_box ul li:nth-child(n+4) { display: none;}
.TD12_video .list_box ul li a > p { position: relative; height:6rem; line-height:0; text-align: center; border-radius: 1rem 1rem 0 0; overflow: hidden; background:#f1f1f1;}
.TD12_video .list_box ul li a > p::before{content:''; width: 100%; height: 100%; position: absolute; left:0; top:0; background:#000; opacity: 0; transition: 0.2s all;}
.TD12_video .list_box ul li a > p::after{content:''; display: block; width: 2.5rem; height: 2.5rem; position: absolute; top:50%; left: 50%; transform:translate(-50%, -50%); background: url('/images/dgedu/template/TC01/main/img_video_play.png') no-repeat center center #00b6bd; border-radius: 50%; opacity: 0; transition: 0.2s all;}
.TD12_video .list_box ul li a > p img { width:auto; max-width: 100%; height: 100%; }
.TD12_video .list_box ul li a .txt p { margin: .5rem 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 600;}
.TD12_video .list_box ul li.no_data{width: 100%; background: #f7f7f7; text-align: center; line-height:10rem; margin-top: -0.5rem;}
/* 홍보영상  :active */
.TD12_video :before{ transition: all .2s; -webkit-transition: all .2s;}
.TD12_video .titTab li a:hover,
.TD12_video .titTab li a:focus,
.TD12_video .titTab li a.current { color:#111; font-weight:700; letter-spacing:-0.7px; }
.TD12_video .titTab li a.current:before{ width:1rem; right:-.5rem; background:#00b6bd; opacity:1; }
.TD12_video .list_box.on { display:block;}
.TD12_video .list_box ul li a:hover > p::after{opacity: .7;}
.TD12_video .list_box ul li a:hover > p::before{opacity: .1;}
.TD12_video .list_box ul li a:hover .txt p{ background: linear-gradient(180deg, transparent 50%, #e7fdff 50%); }

/* 배너존 */
.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{ border-color:#004794; color:#004794;}
.banner_zone .bnWrap a:hover{ border-color:#aaa;}
.banner_zone a{transition:all .2s; -webkit-transition:all .2s;}


@media (max-width:1440px) {
 
	/* 바로가기 */
	.TD12_link ul{ padding:1rem;}
} 
@media (max-width:1240px) {

	/* 메인비주얼 */
	.TD12_visual .item img{ width: 140%; height: auto; }
	.TD12_visual .slick-dots{top: auto; bottom: 5rem;}
	.TD12_visual .control{top: auto; bottom: 5rem; transform: none;}

	/* 바로가기1 */
	.TD12_link ul{ min-height: auto; flex-direction:row; justify-content: center; align-items: center; padding: 0.8rem;}
	.TD12_link li{flex:1;}
	.TD12_link li + li{ margin-top:0; margin-left:1rem;}

	/* 바로가기2 */
	.TD12_link2 li a{ height:100%; flex-direction:row; justify-content:flex-start; padding:1.5rem .75rem .75rem; }
    .TD12_link2 li a em:before { display:none;}
    .TD12_link2 li a em{ height:2rem; line-height:2rem; font-size: 0.8rem; left:0; border-radius:0.8rem 0.8rem 0.8rem 0; }
	.TD12_link2 li a p{ min-width: 3.5rem; width:3.5rem; height:3.5rem; margin-right:.5rem; font-size:1rem;}
	.TD12_link2 li a span{ width:calc(100% - 4rem); font-size: 0.9rem; margin-top:0; text-align:left;}
	.TD12_link2 li a:hover{ transform: none; -webkit-transform: none;} 

	/* 게시판1 */
	.TD12_notice .titTab li a{ padding-right:.5rem; margin-right:.5rem;}
	.TD12_notice .titTab li a.current:before{ width:.3rem; right:-.15rem;}

	/* 게시판2 */
	.TD12_video .titTab li a{ padding-right:.5rem; margin-right:.5rem;}
	.TD12_video .titTab li a.current:before{ width:.3rem; right:-.15rem;}
} 
@media (max-width:1024px) { 

	/* 게시판1 */
	.TD12_notice{margin-right: 0;}
	.TD12_notice h2.heading{margin-bottom: 0.5rem;}
	.TD12_notice .titTab li a{ padding-right:.75rem; margin-right:.75rem;}

	/* 홍보영상 */
	.TD12_video .list_box ul li a > p{ text-align:left;}
	.TD12_video .list_box ul li a > p img{ position:relative; max-width:inherit; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); } 
	.TD12_video .titTab li a{ padding-right:.75rem; margin-right:.75rem;}
}

@media (max-width:768px) {
	.dgeCi { right: auto; left: 1rem; top: auto; bottom:3rem; width: 4rem;}
	.dgeCi img{ width: 100%; }

	/* 바로가기 */
	.TD12_link{flex-wrap: wrap;}

	/* 홍보영상 */
	.TD12_video .list_box ul li a > p{height:7rem;}
} 

@media (max-width:680px) {
	.dgeCi { bottom:1.5rem;}

	/* 메인비주얼 */
	.TD12_visual .slick-dots{bottom: 1.5rem;}
	.TD12_visual .control{bottom: 1.5rem;}

	/* 바로가기 1 */
	.TD12_link ul{ flex-wrap:wrap; flex-direction:column;}
	.TD12_link li{ flex:0; width:100%;}
	.TD12_link li + li{ margin-top:.5rem; margin-left:0;}
	.TD12_link li a{ width: 100%; }

	/* 바로가기 2*/
	.TD12_link2 ul{ width:100%; margin:0; flex-wrap:wrap;}
	.TD12_link2 li{ min-width:100%; flex:0; margin:0; margin-bottom:1rem;}
	.TD12_link2 li a{min-height:5.5rem; padding:1.5rem 1rem 1rem 6rem;}
	.TD12_link2 li a p{ position: absolute; left:2rem; top: calc(50% + .5rem); transform: translateY(-50%);}
	.TD12_link2 li a span{ width:100%;}

	/* 홍보영상 */
	.TD12_video .list_box ul li {width: 49%;}
	.TD12_video .list_box ul li:nth-of-type(n + 3)  { display: none;}

} 
@media (max-width:540px) {
	/* dge CI */ 
	.dgeCi img{ width:80%;}

	/* 게시판 */
	.TD12_notice .titTab li{max-width: 90%;}

	/* 갤러리 */
	.TD12_video .titTab li {max-width:90%;}
}

@media (max-width:460px) {

	.btn_more { font-size:0; } 

	/* 게시판 */
	.TD12_notice .titTab ul { margin-right:2rem; } 
	.TD12_notice .titTab li a { margin-right:0.5rem; padding-right:0.5rem;}

	/* 갤러리 */
	.TD12_video .titTab ul { margin-right:2rem; } 
	.TD12_video .titTab li a { margin-right:0.5rem; padding-right:0.5rem;} 
 
}

@media (max-width:360px) {
	/* 메인비주얼 */
	.TD12_visual .control p{width: 1.5rem; }
	.TD12_visual .slick-dots li.slick-active{width: 10px;}
	.TD12_visual .control p strong { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.8rem;}

	/* 홍보영상 */
	.TD12_video .list_box ul li {width: 100%;}
	.TD12_video .list_box ul li:nth-child(1) ~ li  { display: none;}

	/* 바로가기 2*/
	.TD12_link2 li a{ padding-left:5rem;}
	.TD12_link2 li a p{ left:1rem;}

}
