﻿/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; height:auto; overflow:hidden; padding-top:7rem; transition: all .2s linear; -webkit-transition: all .2s linear;}
.hldy #container{ padding-top:9rem;}
.open.upPop #container{ padding-top:13.5rem;}
.open.hldy.upPop #container{ padding-top:15.5rem;}

/* fixed contents */
.fixArea{position:fixed; left:5%; width:25%; height:100vh; background:#fff; transition: all .2s linear; -webkit-transition: all .2s linear; z-index:3;}
.fixArea:before{content:""; position:absolute; right:0; top:-7rem; width:200%; height:100vh; background:#fff;}

/* content wrap */
.mainContents{ position:relative; width:70%; font-weight: 400; float:right; border-left:1px solid #ddd; background:#fff; }
.mainContents section{ position:relative;}
.MC_wrap{ max-width:60rem; margin:0 1.5rem;}
.MC_wrap:after {content:''; display:block; clear:both;}

.section01{ padding:1.5rem 0; }
.section02{ background:#f1f1f1; }
.section03{ padding:2rem 0; }
.section04{ padding:2.5rem 0;}
.section05{ padding:2.5rem 0; background:#e5f8f8;}
.section06 .MC_wrap{ position:relative; overflow:initial;}
.section06 .MC_wrap:after{ content:""; display:block; clear:both;}
.section07{ height:100%; overflow:inherit !important;}

.section01:before,
.section03:before,
.section05:before,
.section06:before{ content:""; position:absolute; left:0; top:0; width:200%; height:100%; }
.section01:before{ background:url('/images/dgedu/template/TA01/main/pttrn_dots_bk.png'); border-bottom:1px solid #ddd;}
.section03:before{ background:#f1f5ff url('/images/dgedu/template/TA01/main/pttrn_dots_bk.png');}
.section05:before{ background:#e5f8f8;}
.section06:before{ background:#fff; box-shadow:0 0 1rem rgba(157, 214, 214, 0.5);}

.MC_box1 {position:relative;width:100%;height:auto;} /* 인사말 */
.MC_box2 { position:relative; width:100%; height:auto; max-width:70rem; margin:0 auto;} /* 비주얼 */
.MC_box3 { position:relative; width:100%; height:auto; } /* 바로가기 */
.MC_box3:after {content:''; display:block; clear:both;}
.MC_box4 { position:relative; width:calc(95% - 16rem); /*height:15rem;*/ float:left;} /* 게시판 */
.MC_box5 { position:relative; width:16rem; height:15rem; float:right;} /* 팝업존 */
.MC_box6 { position:relative; width:54%; height:auto; float:left;} /* 교육영상 */
.MC_box7 { position:relative; width:20%; height:auto; float:left; margin:0 3%;} /* 카드뉴스 */
.MC_box8 { position:relative; width:20%; height:auto; float:left;} /* 교육소식지 */
.MC_box9 { position:relative; width:30%; height:11rem; float:left;} /* 민원안내 */
.MC_box10 { position:relative; width:70%; height:11rem; float:left;} /* 신고센터 */
.MC_box11 { position:relative; width:100%; height:auto; margin:2rem 0;} /* 행사일정 */
.MC_box12 { position:fixed; width:21rem; height:auto; left:5%; top:37.5rem;; transition: top .2s linear; -webkit-transition: top .2s linear; z-index:4;} /* SNS소통 */

.hldy .MC_box12{ top:38.5rem;}
.open .MC_box12{ top:42.5rem;}
.open.hldy .MC_box12{ top:44.5rem;}

iframe.goog-te-banner-frame { display: none !important; }

@media (min-width:1921px) {
    /* fixed contents */
    .fixArea{ width:22rem; left:calc(50% - 42.5rem)}

    #container{max-width:86rem; margin:0 auto;}
    .mainContents{width:calC(100% - 22.5rem); }
    .MC_wrap{ margin-right:0; margin-left:auto;}
    .MC_box12 { left:calc(50% - 42.5rem); }
}

@media (max-width:1800px) {

    .MC_box4 { width:70%;} /* 게시판 */
    .MC_box5 { width:27%;} /* 팝업존 */
}

@media (max-width:1750px) {
    /* fixed contents */
    .fixArea{ left:1rem; width:22rem;}    

    /* content wrap */
    .mainContents{ width:calC(100% - 23rem);} 
    .MC_box12{ left:1rem; width:20rem;}
}

@media (max-width:1600px) {  

    .MC_box12{ width:21rem;}
}

@media (max-width: 1480px) {
    /* fixed contents */
    .fixArea{ width:20rem; left:0;}  
    
    /* content wrap */
    .mainContents{ width:calC(100% - 20rem);}

    .MC_box12{ width:18rem;}
}

@media (min-width: 1401px) {
    /* 09-17 */
    /* fixed contents */
    .fixArea{top: 8rem;}
    .hldy .fixArea{ top:9rem;}
    .open.upPop .fixArea{ top:13.5rem;}
    .open.upPop.hldy .fixArea{ top:15.5rem;}

    /* fixed contents : active */
    body.fixCont #container .fixArea{ top:0; height:100vh;}
    body.fixCont #container .MC_box12{ top:29.5rem;}
    body.fixCont #container{ padding-top:8.5rem !important;}
    /* fixed content : footer active */
    body #container.fixContFT .fixArea{ position:absolute; bottom:13rem; top:auto; height:auto; }
    body #container.fixContFT .MC_box12{ position:absolute; top:auto; bottom:4.5rem; }
}

@media (max-width: 1400px) {

    /* fixed contents */
    .fixArea{ position:relative; left:auto; width:100%; height:auto; overflow:hidden; padding-top:7rem; border-right:0;}
    .fixArea:before{ display:none;}
    /* content wrap */
    .mainContents{ width:100%; float:none; border:0;}
    .MC_wrap{ max-width:100%;}
    .section01{ position:absolute !important; left:0; top:-23.5rem; width:100%; z-index: 5;}

    .MC_box12{ position:absolute; left:auto; right:0; top:22rem; bottom:auto; width:38%;}
    .open .MC_box12{ top:28.5rem;}
    .open.hldy .MC_box12{ top:30.5rem;}
    
}

@media (max-width: 1240px) {
    
    .open #container {padding-top:10rem;}
    .open.hldy #container {padding-top:12rem;}
    #container{ padding-top:3.5rem;}
    .section06 .MC_wrap:before{ display:none;}

    .MC_wrap{ margin:0 1rem;}

    .MC_box6 { width:50%;} /* 교육영상 */
    .MC_box7 { width:23%; margin:0 2%;} /* 카드뉴스 */
    .MC_box8 { width:23%;} /* 교육소식지 */

    .MC_box12 { top:18.5rem; }
    .open .MC_box12{ top:25.5rem;}
    .open.hldy .MC_box12{ top:27.5rem;}

    /* 영역 height + 헤더 height */
    .open.upPop #container{ padding-top:calc(6.5rem + 3.5rem); }

    .hldy #container,
    .hldy.upPop #container{ padding-top:calc(2rem + 3.5rem); }

    .open.hldy.upPop #container{ padding-top:calc(9.15rem + 3.5em); }
}

@media (max-width: 960px) {

    .section01{ top:-28.15rem;}

    .MC_box4 { width:100%; height:auto; float:none;} /* 게시판 */
    .MC_box5 { width:100%; height:auto; float:none; margin-top:1.5rem;} /* 팝업존 */
    .MC_box12{ position:relative; top:auto !important; right:auto; width:100%;}/* sns소통 */
}

@media (max-width: 860px) {

    .MC_box9 { width:11rem; } /* 민원안내 */
    .MC_box10 { width:calc(100% - 11rem); } /* 신고센터 */
}

@media (max-width: 768px) {

    /* fixed contents */
    .fixArea{ padding-top:11.75rem;}
    
    /* content wrap */
    .section01{ top:-33.25rem; padding:.75rem 0;}
    .section04{ padding:1.5rem 0;}
    .section05{ padding:1.5rem 0; }
    .section06 .MC_wrap{ margin:0;}

    .MC_box5 { margin-top:1rem;} /* 팝업존 */
    .MC_box6 { width:32%;} /* 교육영상 */
    .MC_box7 { width:32%;} /* 카드뉴스 */
    .MC_box8 { width:32%;} /* 교육소식지 */
    .MC_box9 { width:100%; height:auto; float:none;} /* 민원안내 */
    .MC_box10 { width:100%; height:auto; float:none;} /* 신고센터 */
}

@media (max-width: 640px) {

    .open #container{ padding-top:9rem; }

    .MC_box6 { width:100%;} /* 교육영상 */
    .MC_box7 { width:49%; margin:1.5rem 2% 0 0;} /* 카드뉴스 */
    .MC_box8 { width:49%; margin-top:1.5rem;} /* 교육소식지 */
}

@media (max-width: 580px) {

    .section01{ top:-33.75rem;}
    .section03{ padding:2rem 0 1rem;}
    .open #container {padding-top:9rem;}
    .open.hldy #container {padding-top:11rem;}

    /* 영역 height + 헤더 height */
    .open.upPop #container{ padding-top:calc(6rem + 3.5rem); }
    .hldy #container,
    .hldy.upPop #container{ padding-top:calc(1.75rem + 3.5rem); }
    .open.hldy.upPop #container{ padding-top:calc(8.25rem + 3.5em); }
}

@media (max-width: 460px) {

    .MC_box5 {margin-top:.5rem;} /* 팝업존 */
    #mNav .snb .login li:nth-of-type(2n):before{ display:none; }
}

@media (max-width: 380px) {
    .section01{ top:-40.75rem; }

    .MC_box7 { width:100%; margin:1.5rem 0 0;} /* 카드뉴스 */
    .MC_box8 { width:100%; } /* 교육소식지 */
}

@media (max-width: 340px) {

    /* 영역 height + 헤더 height */
    .open.upPop #container{ padding-top:calc(6.75rem + 3.5rem); }
    .open.hldy.upPop #container{ padding-top:calc(9rem + 3.5em); }
}
