@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); .notosanskr * { font-family: 'Noto Sans KR', sans-serif; }

@font-face { font-family: 'S-CoreDream-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }

*{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none;}
img{vertical-align: top;}
.wrap {margin:0 auto; width:1600px; position:relative;}
.wrap:after, ul:after {display: block; content: ""; clear: both;}
html{width: 100%; height:100%; overflow-x:hidden; overflow-y: hidden;}
body {font-family: 'NanumSquare'; width:100%; height:100%;}
h2 {position:absolute; left:-9999px;}
section {width:100%; height:100%;}

header { transition:0.3s;width:100%; margin:0 auto; height:45px; background:#ffba00; height:50px; z-index: 77;}
header img{width:65px; position:relative; top:12px;left: 70px;}
header ul {position:absolute; left:840px; top:33px;}
header ul li {float:left; margin-right:50px; font-size:22px; font-weight: bold;}
header ul li a{color:#000; opacity: 0.85;}
header ul li a:hover{opacity: 3; font-weight: bold;}




.hamburger-buttun {position:absolute; transition:.3s ease-in-out; width:35px; height:30px; z-index: 100; top:30px; left:1470px;}
        .hamburger-buttun.active span:nth-child(1), .hamburger-buttun.active span:nth-child(4) {opacity: 0;}
        .hamburger-buttun span {position:absolute; height:5px; border-radius: 2px; width:100%; background:#000; top:0;transition:0.3s;}
        .hamburger-buttun span:nth-child(1) {top:0;}
        .hamburger-buttun span:nth-child(2),.hamburger-buttun span:nth-child(3) {top:13px;}
        .hamburger-buttun.active span:nth-child(2) {transform: rotate(45deg);}
        .hamburger-buttun.active span:nth-child(3) {transform:rotate(-45deg);}
        .hamburger-buttun span:nth-child(4) {top:26px;}
        
        .overlay {position:fixed; background:#3f71a9; top:0; left:0;width:100%; height:0; opacity: 0;visibility:hidden; display: flex; justify-content: center; align-items: center; transition:0.3s; z-index: 5;}
        nav ul li {margin:3.5rem 0; font-size:26px; opacity: 0;}
        nav ul li a {color:#fff; opacity: 0.75; transition:opacity 0.2s ease;}
        nav ul li a:hover {opacity:1;}
        nav ul li span {display: block; font-size:17px; padding-top:12px; opacity: 0.75;color:#eee;}
        nav ul li span:hover {opacity:1;}    

        @keyframes fadeInLeft {
            0% {opacity:0; transform:translateX(-25%);}
            100% {opacity:1; transform:translateX(0);}
        }
        .overlay.visible {
            height:100%;
            opacity:.95;
            visibility: visible;
        }
        .overlay.visible nav ul li {
            animation:fadeInLeft 0.3s ease forwards;
        }
        .overlay.visible nav ul li:nth-child(1) {animation-delay: 0.23s;}
        .overlay.visible nav ul li:nth-child(2) {animation-delay: 0.27s;}
        .overlay.visible nav ul li:nth-child(3) {animation-delay: 0.30s;}
        .overlay.visible nav ul li:nth-child(4) {animation-delay: 0.33s;}

#navigation{ 
    position:absolute; 
	top:400px;
	right:150px;   
	font-size:32px;
    z-index: 99;
    line-height:1.8;
}	   		
#navigation li a { color:#000;}
#navigation li a:hover {color:#fff;}


/* section 영역 */
#main { margin-top:0px; height:990px; background:#ffba00; overflow: hidden;}
#main .wrap{width:1420px; height: 100%;overflow: hidden; position: relative;}
#main ul {position:relative; left:150px; top:200px;}
#main ul li {float:left;}
#main ul li img {height:450px;}
#main .bc {position:fixed; top:750px; right:5px;}
#main #bnm{background: #fcf; width:3360px; position: relative; }


.box-wrap {
    width: 18.5vw; height: 50vh;
    float:left;
    position:relative;top:280px;
}
.box {
    position: relative;
    background: #000;
    width: 360px; height: 450px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.box img {
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.box .go {width:50px; position:relative; left:100px; bottom:15px;}

.box:before {
    content: '';
    background: #fff;
    width: 0px; height: 1px;
    position: absolute; right: 20px; top: 20px;
    transition: all 0.35s ease;
}
.box:after {
    content: '';
    background: #fff;
    width: 1px; height: 0px;
    position: absolute; right: 20px; top: 20px;
    transition: all 0.35s ease;
}

.box .info {
    position: absolute; left: 0; bottom: 25px;
    color: #fff;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.box .info h3 {
    font-size: 32px;
    line-height: 35px;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 3px;
    font-weight: 800;
}
.box .info p {
    font-size: 16px;
    padding-top:15px;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}
.box .info a {color:#fff;}

.box:hover .info {
    opacity: 1;
}
.box:hover img {
    opacity: 0.2;
}
.box:hover:before {
    width: 60px;
}
.box:hover:after {
    height: 60px;
}





@media (max-width:800px) { /* 모바일용 */
.pc {display:none !important;  }
    body{width:100%;}
    .wrap {width:auto;}
   header { transition:0.3s;width:100%; margin:0 auto; height:60px; background:#ffba00;}
header img{width:55px; position:relative; top:0;left:0;}
    .hamburger-buttun {width:34px; height:30px; z-index: 100; top:12px; left:320px;}

#main { margin-top:0; height:700px;}
#main .wrap{width:100%;}
#main ul {left:8px; top:100px;}
#main ul li img {height:400px; width:380px;}
#main #bnm{ width:3440px;}


.box-wrap {
    width: 380px; height: 50vh;
    float:left;
    position:relative;top:75px;
    left:6px;
}

.box .info h3 {
    font-size: 20px;
    line-height: 35px;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 3px;
    font-weight: 800;
}
.box .info p {
    font-size: 14px;
    padding-top:15px;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box img {
    width: 380px;
    transition: all 0.3s ease-in-out;
}    
    
    
@media (min-width:801px) { /* PC용 */
.mob {display: none !important;  }
}