/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; }
#container * { scrollbar-arrow-color:#ddd; scrollbar-Track-Color:#ddd; scrollbar-base-color:#aaa; scrollbar-Face-Color:#aaa; scrollbar-3dLight-Color:#aaa; scrollbar-DarkShadow-Color:#aaa; scrollbar-Highlight-Color:#aaa; scrollbar-Shadow-Color:#aaa; }
#container ::-webkit-scrollbar { width:5px; }
#container ::-webkit-scrollbar-thumb { background-color:#aaa; border-radius:10px; }
#container ::-webkit-scrollbar-track { background-color:#ddd; border-radius:10px; }

.container:after { content:""; display:block; clear:both; }
 
.yellow_bg { position:absolute; top:-4.5rem; right:0; display:block; width:calc(50% + 12rem); height:calc(100% + 4.5rem); z-index:-1; }
.yellow_bg:before { content:""; position:absolute; top:0; right:0; display:block; width:0; height:100%; background:#fabd00; transition:width 1.2s 0.9s ease-in-out; -webkit-transition:width 1.2s 0.9s ease-in-out; }
.yellow_bg:after { content:""; position:absolute; top:0; left:-230%; display:block; width:150%; height:100%; background:#fabd00; z-index:-1; -webkit-transition:left 0.9s ease-out; transition:left 0.9s ease-out;  z-index:-1; }
.start .yellow_bg:after { left:100%; }
.start .yellow_bg:before { width:100%; }
 
/* animation */
[class^="MC_wrap"] [class*="mot"] { opacity:0; transition:all .5s ease-out; -webkit-transition:all .5s ease-out; }
[class^="MC_wrap"] [class*="mot"][class$="-left"] { transform:translateX(-30px); -webkit-transform:translateX(-30px); }
[class^="MC_wrap"] [class*="mot"][class$="-right"] { transform:translateX(30px); -webkit-transform:translateX(30px); }
[class^="MC_wrap"] [class*="mot"][class$="-top"] { transform:translateY(-30px); -webkit-transform:translateY(-30px); }
[class^="MC_wrap"] [class*="mot"][class$="-bottom"] { transform:translateY(30px); -webkit-transform:translateY(30px); }
[class^="MC_wrap"].action [class*="mot"] { opacity:1; }
[class^="MC_wrap"].action [class*="mot1"] { transition-delay:0s; -webkit-transition-delay:0s; }
[class^="MC_wrap"].action [class*="mot2"] { transition-delay:.3s; -webkit-transition-delay:.3s; }
[class^="MC_wrap"].action [class*="mot3"] { transition-delay:.6s; -webkit-transition-delay:.6s; }
[class^="MC_wrap"].action [class*="mot4"] { transition-delay:.9s; -webkit-transition-delay:.9s; }
[class^="MC_wrap"].action [class*="mot"][class$="-left"] { transform:translateX(0px); -webkit-transform:translateX(0px); }
[class^="MC_wrap"].action [class*="mot"][class$="-right"] { transform:translateX(0px); -webkit-transform:translateX(0px); }
[class^="MC_wrap"].action [class*="mot"][class$="-top"] { transform:translateY(0px); -webkit-transform:translateY(0px); }
[class^="MC_wrap"].action [class*="mot"][class$="-bottom"] { transform:translateY(0px); -webkit-transform:translateY(0px); }

.MC_wrap1 { position:relative; }
.MC_wrap2 { position:relative; padding:5rem 0; }
.MC_wrap2 .bg { position:absolute; z-index:-1; animation:upDown infinite; }
.MC_wrap2 .bg1 { top:0; left:calc(50% - 12rem); width:212px; height:210px; background:url('/images/dgedu/template/TC33/main/bg_TC33_about_1.png') no-repeat; animation-duration:3s; }
.MC_wrap2 .bg2 { bottom:1rem; left:calc(50% - 856px); width:156px; height:126px; background:url('/images/dgedu/template/TC33/main/bg_TC33_about_2.png') no-repeat; animation-duration:3.2s; }
.MC_wrap2 .bg3 { top:9rem; right:0; width:254px; height:258px; background:url('/images/dgedu/template/TC33/main/bg_TC33_about_3.png') no-repeat; animation-duration:3s; }
.MC_wrap2 .bg4 { right:15rem; width:5rem; height:5rem; background:#37312f; border-radius:50%; opacity:0.2; animation-duration:3.5s; }
@keyframes upDown { 
    0% { -webkit-transform:translateY(-8%); transform:translateY(-8%); }
    50% { -webkit-transform:translateY(0); transform:translateY(0); }
    100% { -webkit-transform:translateY(-8%); transform:translateY(-8%); }
}
@-webkit-keyframes upDown { 
    0% { -webkit-transform:translateY(-8%); transform:translateY(-8%); }
    50% { -webkit-transform:translateY(0); transform:translateY(0); }
    100% { -webkit-transform:translateY(-8%); transform:translateY(-8%); }
}
.MC_wrap3 { position:relative; }
.MC_wrap4 { position:relative; }
.MC_wrap4 .bg { position:absolute; z-index:-1; animation:upDown infinite; background:url('/images/dgedu/template/TC33/main/bg_TC05_gallery.png') no-repeat center / cover; }
.MC_wrap4 .bg1 { left:20rem; top:0; width:3.6rem; height:3.6rem; animation:cirlceBg infinite alternate-reverse 6s; }
.MC_wrap4 .bg2 { right:20rem; top:5rem; width:3.6rem; height:3.6rem; animation:cirlceBg infinite alternate-reverse 6s 1s; }
.MC_wrap4 .bg3 { right:5rem; top:12rem; width:6rem; height:6rem; animation:cirlceBg infinite alternate-reverse 9s 0.5s; }
.MC_wrap4 .bg4 { left:-3rem; top:15rem; width:8rem; height:8rem; animation:cirlceBg infinite alternate-reverse 6s 1.5s; }
.MC_wrap4 .bg5 { left:5rem; bottom:5rem; width:6.5rem; height:6.5rem; animation:cirlceBg infinite alternate-reverse 10s 0.5s; }
@keyframes cirlceBg { 
    0% { -webkit-transform:scale(1); transform:scale(1); }
    50% { -webkit-transform:scale(1.2); transform:scale(1.2); }
}
@-webkit-keyframes cirlceBg { 
    0% { -webkit-transform:scale(1); transform:scale(1); }
    50% { -webkit-transform:scale(1.2); transform:scale(1.2); }
}

.MC_box1 { position:relative; opacity:0; -webkit-transform:translateX(-20%); transform:translateX(-20%); -webkit-transition:0.9s 1s; transition:0.9s 1s; } /* 메인비주얼 */
.start .MC_box1 { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); }
.MC_box2 { position:relative; } /* about */
.MC_box2:after { content:""; display:block; clear:both; }
.MC_box3 { position:relative; } /* 바로가기1 */
.MC_box4 { position:relative; padding-top:5rem; } /* 갤러리 */


@media (max-width:1440px) { 
	.start .yellow_bg { width:calc(98% - 23rem); }
	
	.MC_box1 { width:100%; } /* 메인비주얼 */

}
@media (max-width:1240px) { 
	/** 상단 타입별 **/
	/* 상단 팝업 X, 상단 국가공휴일 X */
	#container { padding-top:3rem; }
	.yellow_bg,
    .start .yellow_bg { top:3rem; width:100%; height:calc(100% - 3rem); }
    .yellow_bg:before { width:100%; }
	
	/* 상단 팝업 O, 상단 국가공휴일 X */
	.open.upPop #container { padding-top:9.5rem; }
	.open.upPop #container .yellow_bg,
    .open.upPop #container .start .yellow_bg { top:9.5rem; height:calc(100% - 9.5rem); }
    
	/* 상단 팝업 X, 상단 국가공휴일 O */
	.hldy #container,
	.hldy.upPop #container { padding-top:5rem; }
	
	/* 상단 팝업 O, 상단 국가공휴일 O */
	.open.upPop.hldy.upPop #container { padding-top:calc(5.5rem + 6rem); }
	/** //상단 타입별 **/
		
    .MC_wrap2 { padding:2rem 0; }
    .MC_wrap2 .bg1 { top:10rem; left:0; }
    .MC_wrap2 .bg3 { display:none; }
    .MC_wrap2 .bg4 { bottom:10rem; right:1rem; } 

	.MC_box4 { padding-top:3rem; } /* 갤러리 */
}

@media (max-width:580px) { 
	/** 상단 타입별 **/
	/* 상단 팝업 O, 상단 국가공휴일 X */
	.open.upPop #container { padding-top:9rem; }
    .open.upPop #container .yellow_bg,
    .open.upPop #container .start .yellow_bg { top:9rem; }
	
	/* 상단 팝업 X, 상단 국가공휴일 O */
	.hldy #container,
	.hldy.upPop #container { padding-top:4.5rem; }
	
	/* 상단 팝업 O, 상단 국가공휴일 O */
	.open.upPop.hldy.upPop #container { padding-top:calc(4.5rem + 6rem); }
	/** //상단 타입별 **/
}

@media (max-width:460px){ 
	#mNav .snb .login li:nth-of-type(2n):before{ display:none; }
}

@media (max-width:340px) { 
	/** 상단 타입별 **/
	/* 상단 팝업 O, 상단 국가공휴일 X */
	.open.upPop #container { padding-top:9.8rem; }
    .open.upPop #container .yellow_bg,
    .open.upPop #container .start .yellow_bg { top:9.8rem; height:calc(100% - 9.8rem);}
    
    /* 상단 팝업 O, 상단 국가공휴일 O */
	.open.upPop.hldy.upPop #container { padding-top:calc(5.25rem + 6rem); }
	/** //상단 타입별 **/
}