@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; }
.bar {display:none;}
#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; }

#quick {display:none;}


#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:700}

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



/* #contents2_앨범 */
#contents2 {position:relative; width:1200px; padding:60px 0px; text-align:center; margin:0 auto;}
.c2_title {float:left; text-align:center; padding-bottom:30px; color:#f3ede2; font-size:22px; font-weight:400 }
.page1 {position:absolute; top:68px; right:25px; color:#f3ede2; font-family:'NanumSquareRound',sans-serif;}
.page2 {position:absolute; top:1265px; right:25px; color:#f3ede2; font-family:'NanumSquareRound',sans-serif;}
#contents2 .slide {clear:both;}
#contents2 .slide {width:1230px; margin:0 auto; padding-bottom:60px;}
#contents2 .slide:nth-child(4) {width:1230px; margin:0 auto; padding-bottom:px;}
#contents2 .slide .screen {position:relative; overflow:hidden;}
#contents2 .slide .screen img {width:277px; border-radius:8px;}



.slide .slick-prev.slick-arrow {position:absolute; left:1133px; top:-45px; 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:39px; top:-45px; 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:133px; padding-bottom:90px;}
.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:30px; padding-bottom:30px; } /* 총 height:98px; */
#menu { width:1024px; margin: 0 auto;}
#menu h6 {position:absolute; top:60px; left:63px;}
#menu .bar {display:block;}
#menu .bar a {position:absolute; top:56px; right:0px; padding-right:63px; color:#f3ede2; font-size:30px;}
#menu ul {display:none;}

#grid {clear:both;}
#grid{width:745px; 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}


/* ------------------ 퀵메뉴 시작 ------------------ */
#quick {display:block;}
#quick { position:fixed; top:0; width:180px; height:100vh; background:#f3ede2; border-left:3px #dbd5c8 solid; right:-366px; z-index:999; }
a {font-size:18px; color:#3370ad; font-family: 'NanumSquare', sans-serif; font-weight:800}

.close {position:absolute; top:30px; right:30px; font-size:20px; color:#3370ad;}

#quick_menu {position:absolute; top:120px; right:30px;}
#quick_menu ul {width:220px; padding-bottom:50px; text-align:right;}   





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



/* #contents2_앨범 */
#contents2 {width:745px; padding:60px 0px; text-align:center; margin:0 auto;}
.c2_title {float:left; text-align:center; padding-bottom:30px; color:#f3ede2; font-size:22px; font-weight:400 }
.page1 {display:none;}
.page2 {display:none;}
#contents2 .slide {clear:both;}
#contents2 .slide {width:767px; margin:0 auto; padding-bottom:60px;}
#contents2 .slide .screen {position:relative; overflow:hidden;}
#contents2 .slide .screen img {width:230px; border-radius:8px;}



.slide .slick-prev.slick-arrow {display:none;}

.slide .slick-next.slick-arrow {display:none;}




#contents2 .slide a .screen::after{
                        content:'';
                        display:block;
                        position:absolute;
                        top:0;
                        left:0;
                        width:230px;
                        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:20px; z-index:2; color:#f3ede2; font-size:17px; font-weight:700; transition:all .35s;}
#contents2 .slide .screen .bottom1 {position:absolute; top:150%; 
                            left:20px; z-index:2; color:#f3ede2; font-size:15px; font-weight:400; transition:all .35s;}
#contents2 .slide .screen .bottom2 {position:absolute; top:150%; 
                            left:20px; z-index:2; color:#f3ede2; font-size:15px; 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}


/* ------------------ 퀵메뉴 시작 ------------------ */
#quick {display:block;}
#quick { position:fixed; top:0; width:180px; height:100vh; background:#f3ede2; border-left:3px #dbd5c8 solid; right:-366px; z-index:999; }
a {font-size:18px; color:#3370ad; font-family: 'NanumSquare', sans-serif; font-weight:800}

.close {position:absolute; top:30px; right:80px; font-size:20px; color:#3370ad;}

#quick_menu {position:absolute; top:120px; right:30px;}
#quick_menu ul {width:220px; padding-bottom:50px; text-align:right;}

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



/* #contents2_앨범 */
#contents2 {width:320px; padding:60px 0px; text-align:center; margin:0 auto;}
.c2_title {float:left; text-align:center; padding-bottom:30px; color:#f3ede2; font-size:18px; font-weight:400 }
.page1 {position:absolute; top:294px; left:1500px; color:#f3ede2; font-family:'NanumSquareRound',sans-serif;}
.page2 {position:absolute; top:1491px; left:1500px; color:#f3ede2; font-family:'NanumSquareRound',sans-serif;}
#contents2 .slide {clear:both;}
#contents2 .slide {width:342px; margin:0 auto; padding-bottom:60px;}
#contents2 .slide .screen {position:relative; overflow:hidden;}
#contents2 .slide .screen img {width:150px; border-radius:8px;}



.slide .slick-prev.slick-arrow {position:absolute; left:1133px; top:-45px; 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:39px; top:-45px; 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:150px;
                        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:13px; font-weight:700; transition:all .35s;}
#contents2 .slide .screen .bottom1 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:11px; font-weight:400; transition:all .35s;}
#contents2 .slide .screen .bottom2 {position:absolute; top:150%; 
                            left:30px; z-index:2; color:#f3ede2; font-size:11px; 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:30px; color:#f3ede2;}


    

}