@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@charset "utf-8";
* {margin:0; padding:0;}
li{list-style:none;}
img{vertical-align:middle;}
a{text-decoration:none;}
body {background:#3370ad; font-family: "Noto Sans KR", sans-serif;}




/* ------------------ 헤더 시작 ------------------ */
/* 헤더 */
#header { height:25px; padding-top:63px; padding-bottom:10px;} /* 총 height:98px; */
#menu { width:1200px; margin: 0 auto; }
#menu h6 {float:left; width:200px; }
#menu ul {float:right; text-align:center;}
#menu li { float:left; width:80px; text-align:center; padding-bottom:8px; margin-left:25px; }
#menu li a {color:#f3ede2; font-size:17px; font-family: 'NanumSquare', sans-serif; font-weight:800; }
#menu li:hover { border-bottom:3px solid #f3ede2; }



#grid {clear:both;}
#grid{width:1200px; margin:0 auto; height:60px; padding-top:65px; border-bottom:2px #dbd5c8 solid; opacity:0.7;}
.grid_text {float:left; width:146px; padding:29px 0; color:#f3ede2; font-weight:400}

/* ------------------ 본문컨텐츠 시작 ------------------ */


/* #contents3_비디오 */
#contents3 {width:1200px; text-align:center; margin:0 auto;}
.mv {padding:60px 0px;}
#contents3_2 {display:none;}
#contents3_3 {display:none;}

/* #contents2_썸네일 */
#contents2 {width:1200px; padding-top:60px; text-align:center; margin:0 auto;}
.c2_title {float:left; text-align:center; padding-bottom:20px; color:#f3ede2;  font-family: 'NanumSquareRound',sans-serif; font-size:22px; font-weight:700 }
.page1 {position:absolute; top:1092px; left:1500px; color:#f3ede2; font-family: 'NanumSquareRound',sans-serif;}
.page2 {position:absolute; top:1558px; left:1500px; color:#f3ede2; font-family: 'NanumSquareRound',sans-serif;}
#contents2 .slide {clear:both;}
#contents2 .slide {width:1215px; margin:0 auto; }
#contents2 .slide img {width:228px; border-radius:8px;}



.slide .slick-prev.slick-arrow {position:absolute; left:1133px; top:-30px; transform: translateY(-50%); background:url(../image/prev_mini.png); width:8px; height:15px; text-indent:-9999px;  background-size: cover;}

.slide .slick-next.slick-arrow {position:absolute; right:24px; top:-30px; transform: translateY(-50%); background:url(../image/next_mini.png); width:8px; height:15px; text-indent:-9999px; background-size: cover;}




#contents2 .slide a .screen::after{
                        content:'';
                        display:block;
                        position:absolute;
                        top:0;
                        left:0;
                        width:277px;
                        border-radius:8px;
                        height:100%;
                        background:rgba(0,0,0,.5);
                        z-index:1;
                        opacity:0;
                        transition:all .35s;}

#contents2 .slide a:hover .screen::after {opacity:1;}


#contents2 .slide .screen .top {position:absolute; bottom:150%;
                            left:30px; z-index:2; color:#f3ede2; font-size:20px; font-weight:700; transition:all .35s;}
#contents2 .slide .screen .bottom1 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:18px; font-weight:400; transition:all .35s;}
#contents2 .slide .screen .bottom2 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:18px; font-weight:400; transition:all .35s;}

#contents2 .slide a:hover .top{bottom:80%;}
#contents2 .slide a:hover .bottom1{top:30%;}
#contents2 .slide a:hover .bottom2{top:40%;}
        

.space {margin-right:2%;}

.txt1 {padding-top:22px; padding-bottom:4px; color:#f3ede2; font-size:22px; font-weight:700}
.txt2 { color:#f3ede2; opacity:0.7; font-size:12px; font-weight:700}





/* ------------------ 푸터 시작 ------------------ */
footer {text-align:center; line-height:55px; padding-top:159px; padding-bottom:60px;}
.f_info {color:#f3ede2; font-weight:400}
.f_icon li {display:inline-block; margin-right:13px;}
.f_icon li a {font-size:40px; color:#f3ede2;}

















/* 타블렛 */
@media screen and (min-width:768px) and (max-width:1024px){



    /* ------------------ 헤더 시작 ------------------ */
    /* 헤더 */
    #header {height:25px; padding-top:63px; padding-bottom:10px;} /* 총 height:98px; */
    #menu { width:768px; margin: 0 auto; }
    #menu h6 {float:left; width:200px;}
    #menu ul {display:none;}
    
    
    #grid {clear:both;}
    #grid{width:768px; margin:0 auto; height:60px; padding-top:65px; border-bottom:2px #dbd5c8 solid; opacity:0.7;}
    .grid_text {float:left; width:146px; padding:29px 0; color:#f3ede2; font-weight:700}
    
    /* ------------------ 본문컨텐츠 시작 ------------------ */
    
    
    


/* #contents3_비디오 */
#contents3 {display:none;}
#contents3_2 {display:block; width:768px; text-align:center; margin:0 auto;}
#contents3_3 {display:none;}
.mv {padding:60px 0px;}

/* #contents2_썸네일 */
#contents2 {width:768px; padding-top:60px; text-align:center; margin:0 auto;}
.c2_title {float:left; text-align:center; padding-bottom:20px; color:#f3ede2;  font-family: 'NanumSquareRound',sans-serif; font-size:22px; font-weight:700 }
.page1 {position:absolute; top:1092px; left:1500px; color:#f3ede2; font-family: 'NanumSquareRound',sans-serif;}
.page2 {position:absolute; top:1558px; left:1500px; color:#f3ede2; font-family: 'NanumSquareRound',sans-serif;}
#contents2 .slide {clear:both;}
#contents2 .slide {width:783px; margin:0 auto; }
#contents2 .slide img {width:130px; border-radius:8px;}



.slide .slick-prev.slick-arrow {position:absolute; left:1133px; top:-30px; transform: translateY(-50%); background:url(../image/prev_mini.png); width:8px; height:15px; text-indent:-9999px;  background-size: cover;}

.slide .slick-next.slick-arrow {position:absolute; right:24px; top:-30px; transform: translateY(-50%); background:url(../image/next_mini.png); width:8px; height:15px; text-indent:-9999px; background-size: cover;}




#contents2 .slide a .screen::after{
                        content:'';
                        display:block;
                        position:absolute;
                        top:0;
                        left:0;
                        width:277px;
                        border-radius:8px;
                        height:100%;
                        background:rgba(0,0,0,.5);
                        z-index:1;
                        opacity:0;
                        transition:all .35s;}

#contents2 .slide a:hover .screen::after {opacity:1;}


#contents2 .slide .screen .top {position:absolute; bottom:150%;
                            left:30px; z-index:2; color:#f3ede2; font-size:20px; font-weight:700; transition:all .35s;}
#contents2 .slide .screen .bottom1 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:18px; font-weight:400; transition:all .35s;}
#contents2 .slide .screen .bottom2 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:18px; font-weight:400; transition:all .35s;}

#contents2 .slide a:hover .top{bottom:80%;}
#contents2 .slide a:hover .bottom1{top:30%;}
#contents2 .slide a:hover .bottom2{top:40%;}
        

.space {margin-right:2%;}

.txt1 {padding-top:22px; padding-bottom:4px; color:#f3ede2; font-size:22px; font-weight:700}
.txt2 { color:#f3ede2; opacity:0.7; font-size:12px; font-weight:700}


    
    
    
    
    
    /* ------------------ 푸터 시작 ------------------ */
    footer {text-align:center; line-height:55px; padding-top:159px; padding-bottom:60px;}
    .f_info {color:#f3ede2; font-weight:400}
    .f_icon li {display:inline-block; margin-right:13px;}
    .f_icon li a {font-size:40px; color:#f3ede2;}
    
    
    
    
    
    
    }
    
    
    
    
    /* 모바일 */
    @media screen and (min-width:320px) and (max-width:768px){
    
    /* ------------------ 헤더 시작 ------------------ */
    /* 헤더 */
    #header {height:25px; padding-top:63px; padding-bottom:10px;} /* 총 height:98px; */
    #menu { width:320px; margin: 0 auto; }
    #menu h6 {float:left; width:200px;}
    #menu ul {display:none;}
    
    
    #grid {clear:both;}
    #grid{width:320px; margin:0 auto; height:60px; padding-top:65px; border-bottom:2px #dbd5c8 solid; opacity:0.7;}
    .grid_text {float:left; width:146px; padding:29px 0; color:#f3ede2; font-weight:700}
    
    /* ------------------ 본문컨텐츠 시작 ------------------ */
    
    
    
    /* #contents3_비디오 */
#contents3 {display:none;}
#contents3_2{display:none;}
#contents3_3 {display:block; width:320px; text-align:center; margin:0 auto;}
.mv {padding:60px 0px;}

/* #contents2_썸네일 */
#contents2 {width:320px; padding-top:60px; text-align:center; margin:0 auto;}
.c2_title {float:left; text-align:center; padding-bottom:20px; color:#f3ede2;  font-family: 'NanumSquareRound',sans-serif; font-size:22px; font-weight:700 }
.page1 {position:absolute; top:1092px; left:1500px; color:#f3ede2; font-family: 'NanumSquareRound',sans-serif;}
.page2 {position:absolute; top:1558px; left:1500px; color:#f3ede2; font-family: 'NanumSquareRound',sans-serif;}
#contents2 .slide {clear:both;}
#contents2 .slide {width:1215px; margin:0 auto; }
#contents2 .slide img {width:228px; border-radius:8px;}



.slide .slick-prev.slick-arrow {position:absolute; left:1133px; top:-30px; transform: translateY(-50%); background:url(../image/prev_mini.png); width:8px; height:15px; text-indent:-9999px;  background-size: cover;}

.slide .slick-next.slick-arrow {position:absolute; right:24px; top:-30px; transform: translateY(-50%); background:url(../image/next_mini.png); width:8px; height:15px; text-indent:-9999px; background-size: cover;}




#contents2 .slide a .screen::after{
                        content:'';
                        display:block;
                        position:absolute;
                        top:0;
                        left:0;
                        width:277px;
                        border-radius:8px;
                        height:100%;
                        background:rgba(0,0,0,.5); 
                        z-index:1;
                        opacity:0;
                        transition:all .35s;}

#contents2 .slide a:hover .screen::after {opacity:1;}


#contents2 .slide .screen .top {position:absolute; bottom:150%;
                            left:30px; z-index:2; color:#f3ede2; font-size:20px; font-weight:700; transition:all .35s;}
#contents2 .slide .screen .bottom1 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:18px; font-weight:400; transition:all .35s;}
#contents2 .slide .screen .bottom2 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:18px; font-weight:400; transition:all .35s;}

#contents2 .slide a:hover .top{bottom:80%;}
#contents2 .slide a:hover .bottom1{top:30%;}
#contents2 .slide a:hover .bottom2{top:40%;}
        

.space {margin-right:2%;}

.txt1 {padding-top:22px; padding-bottom:4px; color:#f3ede2; font-size:22px; font-weight:700}
.txt2 { color:#f3ede2; opacity:0.7; font-size:12px; font-weight:700}


    
    
    
    
    
    /* ------------------ 푸터 시작 ------------------ */
    footer {text-align:center; line-height:55px; padding-top:159px; padding-bottom:60px;}
    .f_info {color:#f3ede2; font-weight:400}
    .f_icon li {display:inline-block; margin-right:13px;}
    .f_icon li a {font-size:40px; color:#f3ede2;}
    
    
    
    
    
        
    
    }