﻿body { color:#000; background:url('/images/dgedu/template/TC33/main/bg_ptrn.png'); }

/* common title */
.heading { position:relative; display:inline-block; margin-bottom:3rem; }
.heading:before { content:""; position:absolute; right:0; bottom:0; width:100%; height:100%; opacity:0.5; transition:1s ease; }
.heading span { position:relative; display:inline-block; font-size:3rem; font-weight:700;  line-height:0.8; text-transform:uppercase; padding-right:4rem; }
.heading span:before { content:""; position:absolute; right:0; bottom:0; width:4.7rem; height:1px; z-index:-1; opacity:0; -webkit-transition:0.5s 0.4s;  transition:0.5s 0.4s; }
.heading span:after { content:""; position:absolute; right:0; bottom:0; width:0.4rem; height:0.4rem; opacity:0; -webkit-transition:0.3s 1s; transition:0.3s 1s; }
/** heading : action **/
.action .heading:before { width:0; }
.action .heading span:before { opacity:1; }
.action .heading span:after { opacity:1; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); }

/* dge CI */
.dgeCi { position:absolute; top:1rem; right:1rem; z-index:1; }
.dgeCi img { display:block; width:100%; image-rendering:-webkit-optimize-contrast; }

/* btn_more */
.btn_more { display:block; text-transform:uppercase; overflow:hidden; }
.btn_more:before { content:""; position:absolute; left:-100%; top:0; width:100%; height:100%; -webkit-transition:left 0.3s; transition:left 0.3s; }
.btn_more span { position:relative; }
.btn_more i { margin-left:0.5rem;  -webkit-transition:0.3s; transition:0.3s; }
/** btn_more : action **/
.btn_more:hover:before,
.btn_more:focus:before { left:0; }
.btn_more:hover i,
.btn_more:focus i { margin-left:1rem; }

/* 메인비주얼 */
.TC33_visual { position:relative; width:calc(100% - 4.5rem); height:auto; background:#fabd00; }
.TC33_visual .slider .item { float:left; width:100%; height:calc(100vh - 8rem); min-height:43rem; font-size:0; text-align:right; }
.TC33_visual .slider .item img { height:100%; }
.TC33_visual .control { position:absolute; right:0; bottom:0; background:#fabd00; z-index:1000; font-size:0; }
.TC33_visual .control .page { display:inline-block; vertical-align:middle; padding:0 1rem; color:#9c7600; font-size:0.9rem; }
.TC33_visual .control .page > strong { position:relative; color:#006c3a; font-size:1.2rem; font-weight:700; padding-right:1.5rem; }
.TC33_visual .control .page > strong:before { content:""; position:absolute; right:0.6rem; top:0.6rem; width:3px; height:9px; background:#37312f; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.TC33_visual .control a { display:inline-block; vertical-align:middle; text-align:center; }
.TC33_visual .control .play,
.TC33_visual .control .stop { width:2.1rem; height:2.1rem; line-height:2.1rem; font-size:1rem; color:#fabd00; background:#37312f; border-radius:50%; margin-right:1rem; }
.TC33_visual .control .prev,
.TC33_visual .control .next { width:4.5rem; line-height:4.5rem; font-size:1.2rem; color:#37312f; }
.TC33_visual .control .play { display:none; }
.TC33_visual .control .prev { background:#af8400; }
.TC33_visual .control .next { width:4.5rem; line-height:4.5rem; background:#836300; }

/* about */
.TC33_about .tit_wrap { width:23rem; float:left; padding-right:3rem; }
.TC33_about .heading { color:#006c3a; }
.TC33_about .heading:before { background:#006c3a; }
.TC33_about .heading span:before { background:#d7d6d5; }
.TC33_about .heading span:after { background:#006c3a; }
.TC33_about p { color:#006c3a; font-weight:600; }
.TC33_about .box { width:calc(100% - 23rem); float:right; padding:0 1rem 0 4.5rem; word-break:keep-all; font-weight:600; }
.TC33_about .btn_more { position:absolute; top:calc(50% - 1.5rem); left:15.75rem; width:11.5rem; line-height:3rem; text-align:center; color:#fff; background:#37312f; font-weight:600; -webkit-transform:rotate(90deg); transform:rotate(90deg); }
.TC33_about .btn_more:before { background:#006c3a; }

/* 바로가기1 */
.TC33_link01 .tit_wrap { position:relative; width:56%; float:left; padding:4rem 2rem 4rem 0; text-align:left; }
.TC33_link01 .tit_wrap:before { content:""; position:absolute; right:0; top:0; width:140%; height:100%; background:#006c3a url('/images/dgedu/template/TC33/main/bg_TC33_link01.jpg') no-repeat left bottom; z-index:-1; }
.TC33_link01 .heading { color:#fff; }
.TC33_link01 .heading:before { background:#fff; }
.TC33_link01 .heading span:before { background:#338961; }
.TC33_link01 .heading span:after { background:#fabd00; }
.TC33_link01 .tab > li { width:48%; float:left; }
.TC33_link01 .tab > li a { position:relative; display:block; color:#95c2ad; line-height:2rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding:0.5rem 2.5rem; }
.TC33_link01 .tab > li a span { position:absolute; left:0; top:0.5rem; width:2rem; line-height:2rem; background:#003b20; color:#006c3a; text-align:center; font-weight:700; }
.TC33_link01 .tab > li a em { position:absolute; right:1.8rem; top:calc(50% - 0.3rem); width:0.6rem; height:0.6rem; border-radius:50%; background:#003b20; }
.TC33_link01 .tab > li a em:before { content:""; position:absolute; left:0; bottom:0.2rem; width:0; height:0.65rem; background:url('/images/dgedu/template/TC33/main/ico_check.png') no-repeat center / cover; opacity:0; -webkit-transition:0.3s; transition:0.3s; }
.TC33_link01 .tabBox { position:relative; width:44%; float:right; height:28.5rem; margin-top:4.5rem; overflow:hidden; background:#e4e4e4; box-shadow:20px 20px 40px rgba(0,0,0,0.3); }
.TC33_link01 .tabBox > div { position:absolute; left:-100%; top:0; width:100%;  padding:3rem 2rem; transition:0.5s; -webkit-transition:0.5s; opacity:0;  visibility:hidden; }
.TC33_link01 .tabBox > div.on { left:0; opacity:1; visibility:visible; }
.TC33_link01 .tabBox > div .tit1 { position:relative; padding-left:6rem; line-height:3.3rem; margin:0;}
.TC33_link01 .tabBox > div .tit1 strong { position:absolute; left:0; top:0; font-size:3.5rem; color:#e4e4e4;  text-shadow:-1px 0 #006c3a, 0 1px #006c3a, 1px 0 #006c3a, 0 -1px #006c3a; font-weight:700; letter-spacing:-3px; float:left; }
.TC33_link01 .tabBox > div .tit1 span { display:block; padding:0 1.5rem; font-size:1.4rem; color:#fff; font-weight:600; background:#006c3a url('/images/dgedu/template/TC33/main/bg_ptrn.png'); text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.TC33_link01 .tabBox > div .tit2 { font-size:1.1rem; color:#006c3a; margin:0 0 1.5rem; padding:2.5rem 0 1.5rem; font-weight:700; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border-bottom:1px dashed #9fc0b1; background:none;} 
.TC33_link01 .tabBox > div .txt { display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:5; -webkit-box-orient:vertical; width:100%; height:7.5rem; line-height:1.5rem; margin-top:1.5rem; white-space:normal; overflow:hidden; }
.TC33_link01 .tabBox > div .btn_more { position:relative; margin-top:2rem; color:#006c3a; border:1px solid #72a88f; line-height:3rem; text-align:center; font-weight:600; }
.TC33_link01 .tabBox > div .btn_more:before { background:#c9c7c1; }
.TC33_link01 .control { position:absolute; top:0; left:56%; }
.TC33_link01 .control a { display:block; width:4.5rem; height:4.5rem; line-height:4.5rem; float:left; color:#fff; text-align:center; font-size:1rem; }
.TC33_link01 .control .prev { background:#004b28; }
.TC33_link01 .control .next { background:#00341c; }
/** TC33_link01 : action **/
.TC33_link01 .tab > li a:hover,
.TC33_link01 .tab > li a:focus { color:#fff; }
.TC33_link01 .tab > li.check a { color:#fff; font-weight:600; }
.TC33_link01 .tab > li.check a span { background:#fabd00; box-shadow:4px 4px 7px rgba(0,0,0,0.2); }
.TC33_link01 .tab > li.check a em:before { width:0.9rem; opacity:1; }

/* 갤러리 */
.TC33_gallery { position:relative; }
.TC33_gallery .heading { color:#37312f; }
.TC33_gallery .heading:before { background:#37312f; }
.TC33_gallery .heading span:before { background:#d3a109; }
.TC33_gallery .heading span:after { background:#006c3a; }
.TC33_gallery .slick-list { overflow:visible; }
.TC33_gallery .bigSlide { overflow:hidden; padding-bottom:5rem; text-align:center; }
.TC33_gallery .bigSlide:after,
.TC33_gallery .bigSlide:before { content:""; position:absolute; width:0.5rem; height:0; -webkit-transition:height 0.3s 1s, transform 0.3s 1.5s; transition:height 0.3s 1s, transform 0.3s 1.5s; }
.TC33_gallery .bigSlide:after { left:-1.5rem; top:15rem; background:#fabd00; }
.TC33_gallery .bigSlide:before { right:-1.5rem; top:3.5rem; background:#006c3a; }
.TC33_gallery .item { float:left; }
.TC33_gallery .bigSlide .item:before { content:""; position:absolute; left:0; top:0; display:block; width:0; height:8.9rem; background:#37312f; z-index:-1; -webkit-transition:0.5s 0.2s; transition:0.5s 0.2s; }
.TC33_gallery .bigSlide .item .img { opacity:0; display:block; width:29.5rem; height:40rem; margin:3rem 3rem 0; float:left; box-shadow:20px 20px 40px rgba(0,0,0,0.3); -webkit-transform:translateY(10%); transform:translateY(10%); transition:0.5s; -webkit-transition:0.5s;  overflow:hidden; line-height:0;}
.TC33_gallery .bigSlide .item .img img{ width:100%; height:auto;}
.TC33_gallery .bigSlide .item.slick-active .img { -webkit-transform:translateY(0); transform:translateY(0); }
.TC33_gallery .bigSlide .item .box { position:relative; height:8.9rem; align-items:center; width:calc(100% - 37rem); float:right; padding-right:2rem; }
.TC33_gallery .bigSlide .item .box strong { display:block; float:left; line-height:8.9rem; color:#fabd00; font-size:3.5rem; font-weight:700; }
.TC33_gallery .bigSlide .item .box strong:after { content:"."; }
.TC33_gallery .bigSlide .item .box p { position:absolute; left:6rem; top:50%; width:calc(100% - 16rem); max-height:3.6rem; text-align:left; line-height:1.8rem; color:#fff; font-size:1.4rem; font-weight:600; -webkit-transform:translateY(-50%); transform:translateY(-50%); word-break:keep-all; overflow:hidden; }
.TC33_gallery .bigSlide .item .box .btn_more { position:relative; width:7rem; line-height:3rem; border:1px solid #9b9897; color:#fff;  font-weight:700; float:right; margin-top:3rem; }
.TC33_gallery .bigSlide .item .box .btn_more:before { background:#645c59; }
.TC33_gallery .smallSlide { position:absolute; left:22.7rem; bottom:5rem; width:63rem; text-align:center; }
.TC33_gallery .smallSlide:before { content:""; position:absolute; left:25%; top:0; width:75%; height:21.5rem; box-shadow:20px 20px 40px rgba(0,0,0,0.3); }
.TC33_gallery .smallSlide .slick-list { overflow:hidden; }
.TC33_gallery .smallSlide .item { position:relative; height:26.5rem; }
.TC33_gallery .smallSlide .slick-current { opacity:0; visibility:hidden; }
.TC33_gallery .smallSlide strong { position:absolute; left:0; top:40%; width:100%;  font-size:2rem; font-weight:700; color:#fabd00; z-index:2; }
.TC33_gallery .smallSlide p { position:absolute; left:0; bottom:0; width:100%; height:3rem;  font-size:1.1rem; line-height:1.5rem; overflow:hidden; padding:0 1rem; }
.TC33_gallery .smallSlide .img { position:relative;  height:21.5rem;}
.TC33_gallery .smallSlide .img img{ position:relative; left:50%; width:auto; height:100%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.TC33_gallery .smallSlide .img:before { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background:#37312f; opacity:0.7; z-index: 1;}
.TC33_gallery .control { position:absolute; left:38.45rem; top:18.05rem; z-index:1000; line-height:4.1rem; text-align:center; }
.TC33_gallery .control > a { display:block; float:left; width:4.1rem; height:4.1rem;  font-size:1rem; }
.TC33_gallery .control > a.prev { background:#bf930e; }
.TC33_gallery .control > a.next { background:#987615; }
.TC33_gallery .control .count { float:left; color:#9c7600; font-size:0.9rem; margin-left:1rem; }
.TC33_gallery .control .count .current { position:relative; color:#006c3a; font-size:1.2rem; font-weight:700; padding-right:1.5rem; }
.TC33_gallery .control .count .current:before { content:""; position:absolute; right:0.6rem; top:0.6rem; width:3px; height:9px; background:#37312f; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
/** TC33_gallery : action **/
.action .TC33_gallery .bigSlide:after,
.action .TC33_gallery .bigSlide:before { height:1.9rem; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.action .TC33_gallery .bigSlide .item:before { width:100%; }
.action .TC33_gallery .bigSlide .item .img { opacity:1; }

/* 배너존 */
.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:1760px) { 
    /* 메인비주얼 */
    .TC33_visual .slider .item { height:auto; min-height:auto; }
    .TC33_visual .slider .item img { width:100% !important; height:auto !important; }
}
@media (max-width:1440px) { 
	/* dge CI */
	.dgeCi { width:4.5rem; }

    /* common title */
    .heading span { font-size:2.5rem; }

    /* 메인비주얼 */
    .TC33_visual { width:100%; } 
    .TC33_visual .control .prev,
    .TC33_visual .control .next { width:3rem; height:3rem; line-height:3rem; }

    /* TC33_about */
    .TC33_about .box { padding-left:2rem; }

    /* 바로가기1 */
    .TC33_gallery .bigSlide .item .box { width:calc(100% - 27rem); }
    .TC33_gallery .bigSlide .item .img { width:22rem; height:32rem; margin:2rem 2rem 0; }
    .TC33_gallery .bigSlide .item .box p { font-size:1.2rem; }
    .TC33_gallery .bigSlide .item .box strong { font-size:3rem; }
    .TC33_gallery .smallSlide { left:15rem; width:50rem; }
    .TC33_gallery .smallSlide:before { height:16rem; }
    .TC33_gallery .smallSlide .item { height:20rem; }
    .TC33_gallery .smallSlide .img { height:16rem; }
    .TC33_gallery .control { top:15.15rem; left:27.5rem; }
}
@media (max-width:1240px) { 
	
	/* common title */
    .heading { margin-bottom:1.5rem; }
    .heading span { font-size:2.2rem; }

    /* about */
    .TC33_about .tit_wrap { width:100%; float:none; }
    .TC33_about .heading span:before { background:#d3a109; }
    .TC33_about .box { width:100%; padding:0; float:none; }
    .TC33_about p { margin-bottom:1rem; }
    .TC33_about .btn_more { position:relative; left:auto; top:auto; transform:none; -webkit-transform:none; line-height:2.5rem; width:100%; margin-top:2rem; }
    .TC33_about .bg1 { left:0; }
    .TC33_about .bg3 { display:none; }
    .TC33_about .bg4 { right:1rem; }
    
    /* 바로가기1 */
    .TC33_link01 .tit_wrap { width:100%; padding:2rem 0 5rem; }
    .TC33_link01 .tit_wrap:before { width:110%; right:-5%; }
    .TC33_link01 .tab > li { width:33%; }
    .TC33_link01 .tabBox { width:100%; height:24rem; margin-top:-3rem; }
    .TC33_link01 .tabBox > div { padding:2rem 1.5rem; }
    .TC33_link01 .tabBox > div .tit1 { padding-left:5rem; line-height:2.8rem; }
    .TC33_link01 .tabBox > div .tit1 strong { font-size:3rem; }
    .TC33_link01 .tabBox > div .tit1 span { font-size:1rem; padding:0 0.8rem; }
    .TC33_link01 .tabBox > div .tit2 { padding:1.5rem 0 0.8rem; margin-bottom:0.8rem; }
    .TC33_link01 .tabBox > div .btn_more { margin-top:1.5rem; line-height:2.5rem; }
    .TC33_link01 .control { left:auto; right:-2%; }
    .TC33_link01 .control a { width:3rem; height:3rem; line-height:3rem; }

    /* 갤러리 */
    .TC33_gallery { text-align:left; }
    .TC33_gallery .bigSlide .item .img { margin:0 2rem; width:18rem; height:25rem; }
    .TC33_gallery .bigSlide .item .box { height:5rem; }
    .TC33_gallery .bigSlide .item .box { width:100%; padding:0 1rem; }
    .TC33_gallery .bigSlide .item .box strong { line-height:5rem; font-size:2.5rem; }
    .TC33_gallery .bigSlide .item .box p { font-size:1rem; }
    .TC33_gallery .bigSlide .item .box .btn_more { margin-top:1rem; line-height:2.5rem; }
    .TC33_gallery .smallSlide { left:10rem; }
    .TC33_gallery .smallSlide p { font-size:0.9rem; }
    .TC33_gallery .control { top:-0.5rem; right:0; left:auto; line-height:3rem; padding-left:4rem; }
    .TC33_gallery .control > a { width:3rem; height:3rem; }
    .TC33_gallery .control .count { position:absolute; left:0; top:0; margin-left:0; }
}
@media (max-width:1024px) { 
	/* dge CI */
	.dgeCi { top:.5rem; right:.5rem; }
}
@media (max-width:800px) { 
    /* 바로가기1 */
    .TC33_link01 .tab > li { width:50%; }
}
@media (max-width:768px) { 
	/* dge CI */
	.dgeCi { width:3rem; top:calc(100% + 3rem); }
	
	/* 배너존 */
	.banner_zone h2 { display:none; }
	.banner_zone .bnWrap { width:calc(100% - 6.5rem); }
}
@media (max-width:680px) { 
    /* 갤러리 */
    .TC33_gallery .bigSlide { padding-bottom:1rem; }
    .TC33_gallery .bigSlide .item:before { height:15rem; }
    .TC33_gallery .bigSlide .item .box { float:none; }
    .TC33_gallery .bigSlide .item .img { float:none; margin:0 auto; max-width:90%; height:auto; max-width:22.5rem; }
    .TC33_gallery .smallSlide { display:none; }
}
@media (max-width:540px) { 
    /* common title */
    .heading span { font-size:1.8rem; padding-right:1.5rem; }
    .heading span:before { width:2rem; }

    /* 메인비주얼 */
    .TC33_visual .control { position:relative; right:auto; bottom:auto; float:right; }
    .TC33_visual .control .play,
    .TC33_visual .control .stop { width:1.5rem; height:1.5rem; line-height:1.5rem; }
    .TC33_visual .control .prev,
    .TC33_visual .control .next { width:2.2rem; height:2.2rem; line-height:2.2rem; }

    /* 바로가기1 */
    .TC33_link01 .tab > li { width:100%; }
    .TC33_link01 .tab > li a { padding:0.3rem 2.5rem; }
    .TC33_link01 .tab > li a em { right:1rem; }
    .TC33_link01 .tabBox { height:22rem; }
    .TC33_link01 .tabBox > div .tit1 { padding-left:2.8rem; }
    .TC33_link01 .tabBox > div .tit1 strong { font-size:2rem; }
    .TC33_link01 .tabBox > div .tit2 { font-size:0.9rem; padding:1rem 0 0.5rem; }
    .TC33_link01 .control { right:0; top:1.6rem; }
    .TC33_link01 .control a { width:2.2rem; height:2.2rem; line-height:2.2rem; }


    /* 갤러리 */
    .TC33_gallery .bigSlide .item .img { box-shadow:10px 10px 20px rgba(0,0,0,0.2); }
    .TC33_gallery .bigSlide .item .box strong { font-size:1.8rem; }
    .TC33_gallery .bigSlide .item .box p { left:4rem; width:calc(100% - 8rem); }
    .TC33_gallery .bigSlide .item .box .btn_more { width:2.2rem; height:2.2rem;  font-size:0; }
    .TC33_gallery .bigSlide .item .box .btn_more i { font-size:1.2rem; margin-left:0 !important; line-height:2.2rem; }
    .TC33_gallery .control { line-height:2.2rem; }
    .TC33_gallery .control > a { width:2.2rem; height:2.2rem; }

}
@media (max-width:320px) { 
	/* common title */
    .heading span { font-size:1.6rem; }

    /* 바로가기1 */
    .TC33_link01 .tabBox > div .tit1 strong { display:none; }
    .TC33_link01 .tabBox > div .tit1 { padding-left:0; }

    /* 갤러리 */
    .TC33_gallery .control { padding-left:3.5rem; }
}
