﻿/* 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;}

/* 메인비주얼 */
.TC01_visual { position:relative; height:100%;}
.TC01_visual .slider{ height: 100%; }
.TC01_visual .slider .slick-list{overflow: visible;}

.TC01_visual .item { position:relative; width: 100%;}
.TC01_visual .item img{ display: block; position:relative; left: 50%; transform: translateX(-50%); opacity: 0; width:auto; height:100%; transition: opacity 2s, transform 3s;}
.TC01_visual .slick-active img{ opacity: 1;}

.TC01_visual .slick-dots {position: absolute; right: 50%; top: 18rem; z-index: 9999; margin-right: 0.5rem;}
.TC01_visual .slick-dots li{display: inline-block; width: 10px; height: 10px; border-radius: 10rem; background: #9dacc3;}
.TC01_visual .slick-dots li + li {margin-left: 0.5rem; }
.TC01_visual .slick-dots li.slick-active{ width: 30px; background:#003eaf;}
.TC01_visual .slick-dots li button{width: 100%; height: 100%; opacity: 0;}

.TC01_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%);}
.TC01_visual .control p { display:inline-block; width: 2.8rem; text-align:center; color:#003eaf; font-size:1.1rem; font-family: 'Montserrat'; font-weight: 600; }
.TC01_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;}
.TC01_visual .control p span{font-size: 0.9rem; font-weight: 400;}
.TC01_visual .control > a{ font-size:.9rem; text-align:center; vertical-align:middle; -webkit-transition:all .15s; -ms-transition:all .15s; transition:all .15s; }
.TC01_visual .control > a.play{display:none;}
.TC01_visual .control > a.play,
.TC01_visual .control > a.stop{ width: 2rem; height: 2rem; line-height: 2rem; color:#6d7b99; text-align: center; }
.TC01_visual .control > a.prev:hover{ transform: translateX(-0.1rem); transform: -webkit-translateX(-0.1rem); -ms-transform: translateX(-0.1rem);}
.TC01_visual .control > a.next:hover{ transform: translateX(0.1rem); transform: -webkit-translateX(0.1rem); -ms-transform: translateX(0.1rem);}

/* 바로가기1 */
.TC01_link { display: flex; justify-content: space-around; align-items: center; word-break: keep-all;}
.TC01_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/TC01/main/pttrn_link1.png'); transition: all 0.2s; padding: 0 2rem; display: flex; flex-direction: column; justify-content: center;} 
.TC01_link li + li{ margin-top:.5rem;}
.TC01_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;}
.TC01_link li a:before{ content:"\e90b"; position:absolute; right:.75rem; top:calc(50% - .6rem); font-size:1.2rem; line-height:1; font-family:'xeicon';}
.TC01_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; }
.TC01_link li a span{overflow: hidden; max-height: 2.3rem; padding-right:1.5rem; text-align: left; font-weight: 600; }
/* 바로가기1 : hover */
.TC01_link li a:hover{ background: #00b6bd; border-color:#00b6bd; color: #fff;}
.TC01_link li a:hover i{ background: #00a3aa}

/* 바로가기2 */
.TC01_link2 { display: flex; justify-content: space-around; align-items: center; word-break: keep-all;}
.TC01_link2 ul { width:calc(100% + 1.5rem); margin-left:-0.75rem; display:flex; word-break: keep-all;}
.TC01_link2 li { min-width:0; flex:1; margin:0 .75rem; text-align: center; }
.TC01_link2 ul li a { position: relative; display:block; 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: url('/images/dgedu/template/TC01/main/ico_link_bg.png') #f1f5ff; transition: all 0.2s;}
.TC01_link2 ul li a:hover{ background-image: url('/images/dgedu/template/TC01/main/ico_link_bg_hover.png')}
.TC01_link2 ul li a::after{content: '+'; display: none; position: absolute; width: 3rem; height: 3rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,0.3); text-align: center; line-height: 3rem; border-radius: 50%; background: #f8b62b; color: #fff; font-size: 1.7rem; right: 1.5rem; bottom: -1.5rem;} 
.TC01_link2 ul li a img{background: #fff; border-radius: 50%; box-shadow: 0 0 0.4rem rgba(0,0,0,0.1);}
.TC01_link2 ul li a h2{ margin:0.5rem 0; font-weight: 700; font-size: 1rem; overflow: hidden; max-height: 2.8rem;}
.TC01_link2 ul li a p{overflow: hidden; color: #000; transition: all 0.2s;}
/* 바로가기 : hover2 */
.TC01_link2 ul li a:hover{margin-top: -2rem; background-color: #1a4ab9; color: #fff;}
.TC01_link2 ul li a:hover p{ color: #fff;}
.TC01_link2 ul li a:hover::after{display: block;}

/* 게시판 */
.TC01_notice { position:relative; height:100%; font-size:0; margin-right: 1rem;}
.TC01_notice .titTab ul{font-size:0; margin-right:4rem;}
.TC01_notice .titTab li { max-width: 33%; position:relative; display:inline-block; font-size:1rem; line-height:2rem; vertical-align:top; }
.TC01_notice .titTab li a { position:relative; display:block; padding-right:1.25rem; margin-right:1.25rem; color:#444; }
.TC01_notice .titTab li a:before{content:""; position:absolute; right:-.15rem; top:calc(50% - .15rem); width:.3rem; height:.3rem; background:#eee; border-radius:.5rem;  }
.TC01_notice .titTab li a span{ display:block; overflow:hidden; white-space:nowrap; }
.TC01_notice .titTab li:first-child a{ padding-left:0; }
.TC01_notice .titTab li:last-child a:before{ opacity:0; }
.TC01_notice .list_box { display:none; width:100%; margin-top:.5rem; padding-bottom:5px; }
.TC01_notice .list_box ul { height:100%; }
.TC01_notice .list_box li { position:relative; line-height: 1.65rem; }
.TC01_notice .list_box li:nth-of-type(n+7) { display:none; }
.TC01_notice .list_box li a { display:flex; justify-content: space-between; align-items: center; font-weight:400; color:#111; }
.TC01_notice .list_box li a .tit{ padding: 0 1rem 0 0; font-size:.8rem; font-weight:400; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.TC01_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;}
.TC01_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;}
.TC01_notice .list_box li a.new .tit::before{ display: none;}
.TC01_notice .list_box li a span{ flex-shrink: 0; margin-left: auto; font-size:.75rem; color:#666;}
.TC01_notice .list_box li.no_data{ width:100%; text-align:center; line-height: 10.5rem; font-size:.8rem; background: #f7f7f7;}
/* 게시판 :active */
.TC01_notice .titTab li a:hover,
.TC01_notice .titTab li a:focus,
.TC01_notice .titTab li a.current { color:#111; font-weight:700; }
.TC01_notice .titTab li a.current:before{ width:1rem; right:-0.5rem; background:#1a4ab9; opacity:1; }
.TC01_notice .list_box.on { display:block; }
.TC01_notice .list_box li a:hover{text-decoration: underline;}
.TC01_notice :before{-webkit-transition:all .1s; transition:all .1s; }

/* 교육영상 */
.TC01_video{position: relative;}
.TC01_video h2.heading { margin-bottom: 0.5rem;}
.TC01_video ul { display: flex; justify-content: space-between; align-items: center; }
.TC01_video ul li{ width:31%; }
.TC01_video ul li:nth-child(n+4) { display: none;}
.TC01_video ul li a { transition: 0.2s all ease;}
.TC01_video ul li a > p { position: relative; border-radius: 1rem 1rem 0 0; overflow: hidden;}
.TC01_video 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;}
.TC01_video ul li a > p img { width:auto; max-width: 100%; height: 100%; display: block;}
.TC01_video ul li a .txt p { margin: .5rem 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 600;}
.TC01_video .no_data{width: 100%; background: #f7f7f7; text-align: center; line-height: 10.5rem;}
/* 교육영상 : active */
.TC01_video ul li a:hover > p::after{opacity: .8;}
.TC01_video 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) {  
	/* 바로가기 */
	.TC01_link ul{ padding:1rem;}

	/* 교육영상 */
	.TC01_video .btn_more{right: 1rem;}

	/* 바로가기 */
	.TC01_link .link_con{margin-left: 1rem; padding: 0 1rem;}
}

@media (max-width:1240px) {

	/* 메인비주얼 */
	.TC01_visual .item img{ width: 140%; height: auto; }
	.TC01_visual .slick-dots{top: auto; bottom: 5rem;}
	.TC01_visual .control{top: auto; bottom: 5rem; transform: none;}

	/* 바로가기1 */
	.TC01_link ul{ min-height: auto; flex-direction:row; justify-content: center; align-items: center; padding: 0.8rem;}
	.TC01_link li{flex:1;}
	.TC01_link li + li{ margin-top:0; margin-left:1rem;}

	/* 바로가기2 */ 
	.TC01_link2 ul li a{ height:100%; min-height:0; padding: 0.8rem 0.8rem 1.5rem;}
	.TC01_link2 ul li a{display: block;}
	.TC01_link2 ul li a img{ width: 3rem; }
	.TC01_link2 ul li a h2{margin: 0.3rem 0; font-size: 0.9rem;}
	.TC01_link2 ul li a p{font-size: 0.75rem;}
	.TC01_link2 ul li a:hover{margin-top: 0;}

	/* 게시판1 */
	.TC01_notice .titTab li a{ padding-right:.5rem; margin-right:.5rem;}
	.TC01_notice .titTab li a.current:before{ width:.3rem; right:-.15rem;}

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

	/* 게시판 */
	.TC01_notice{margin-right: 0;}
	.TC01_notice h2.heading{margin-bottom: 0.5rem;}

	/* 바로가기 */
	.TC01_link .link_con{ box-shadow: 0 0.1rem 0.5rem 0.1rem rgb(0 0 0 / 10%);}
	.TC01_link .link_con:first-child a span{ text-align: left;}

	/* 교육영상 */
	.TC01_video .btn_more{right: 0;}
	.TC01_video ul li a > p img{width: 100%; }
}

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

	/* 메인비주얼 */
	.TC01_visual .item {width: 70%; margin: 0 auto; float: none;}
	.TC01_visual .slick-dots{bottom: 3rem;}
	.TC01_visual .control{bottom: 3rem;}

	/* 바로가기 */
	.TC01_link ul{ flex-wrap:wrap; flex-direction:column;}
	.TC01_link li{ flex:0; width:100%;}
	.TC01_link li + li{ margin-top:.5rem; margin-left:0;}
	.TC01_link li a{ width: 100%; }
	
	/* 바로가기 2*/
	.TC01_link2 ul{ width:100%; margin:0; flex-wrap:wrap;} 
	.TC01_link2 li{ min-width:100%; flex:0; margin:0; margin-bottom:1rem;}
	.TC01_link2 ul li a{ width: 100%; margin-bottom: 0.5rem; padding:0.8rem 0.8rem 0.8rem 5rem; text-align: left; }
	.TC01_link2 ul li a:last-child{margin-bottom: 0; }
	.TC01_link2 ul li a:hover::after { display: none;} 
	.TC01_link2 ul li a img{ position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);}
	.TC01_link2 ul li a h2{margin-top: 0;}

}

@media (max-width:640px) {
	/* dge CI */
	.dgeCi { bottom:1.5rem;}

	/* 교육영상 */
	.TC01_video ul li {width: 49%;}
	.TC01_video ul li:nth-child(2) ~ li  { display: none;}

}

@media (max-width:540px) {
	/* dge CI */
	.dgeCi img{ width:80%;}

	/* 게시판 */
	.TC01_notice .titTab li{max-width: 90%;} 
}

@media (max-width:460px) {

	.TC01_visual .slick-dots{bottom: 2rem;}
	.TC01_visual .control{bottom: 2rem;} 
}

@media (max-width:360px) {
	/* 메인비주얼 */
	.TC01_visual .control p{width: 1.5rem; }
	.TC01_visual .slick-dots li.slick-active{width: 10px;}
	.TC01_visual .control p strong { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.8rem;}

	/* 교육영상 */
	.TC01_video ul li {width: 100%;}
	.TC01_video ul li:nth-child(1) ~ li  { display: none;}

} 