*{box-sizing: border-box}
body{background: url(../12_13/img_institut/polygon.png);
    font-family: 'Lato', sans-serif;font-size: 0.8em}
.warp{width: 1310px;max-width: 90%;background: #fff;margin: auto}
h3{padding: 10px;color: white;background: rgba(0, 0, 0, 0.5);}
h1{font-size: 2.5em;font-weight: 100;letter-spacing: 2}

header{position: fixed;width: 1310px;max-width: 90%;
display: flex;flex-direction: column;z-index: 100;}
header .sitenav{width: 100%;background: #fff;border-bottom: 1px solid #ccc;padding: 0 3%;}
.sitenav ul.topnav{display: flex;justify-content: flex-end}
.sitenav ul li{padding: 4px 8px}
.head{background: rgba(255,255,255,0.95);border-bottom: 1px solid #ccc;padding: 0 3%;width: 100%;height: 100px;}
.head img{width: 200px;height: 100%;}
.headnav{float: right;display: flex;}
.headnav li{height: 100%;text-align: center;vertical-align: middle}
.headnav li a{display: block;width: 100%;height: 100%;padding: 0 8px;}
.hidden{display: none;}

.level2{position: fixed;display: block;top: 0;right: -400px;width: 400px;height: 100%;background: #ccc;border-left: 1px solid #666;transition: all 1s}
.hidden.on .level2{right: 0;}


.topbanner{padding-top: 135px}
.banner ul{display: flex;overflow: hidden;}
.banner ul li{position: relative;flex: 1;height: 320px;
transition: all .5s ease-in-out}
.banner ul li:hover{flex:4;}
.banner ul li a{display: block;width: 100%;height: 100%;}
.banner ul li:nth-child(1){background: url(../12_13/img_institut/Bunker-845x321.jpg)}
.banner ul li:nth-child(2){background: url(../12_13/img_institut/Picasso-845x321.jpg)}
.banner ul li:nth-child(3){background: url(../12_13/img_institut/Pierre-845x321.jpg)}
.banner ul li:nth-child(4){background: url(../12_13/img_institut/HapdongKR-845x321.jpg)}

.banner .text{position: absolute;top: 0;left: 0;
background: rgba(0,0,0,0.5);height: 100%;width: 329px;
padding: 110px 30px;color: #fff;vertical-align: top}
.banner .text p{padding: 5px 0;}


.sectionleft{padding: 4%;border-right: 1px solid #ccc}
.sectionleft .topnav,.sectionleft .bottomnav{display: flex;padding: 20px 0;}
.sectionleft .topnav li,.sectionleft .bottomnav li{padding: 5px;font-size: 0.9em;
color: #999}
.sectionright{padding: 4%;}

#topall{position: relative}

.sectionleft .top{position: relative;border: 1px solid #ccc;display: flex;width: 100%;}
.menulist{width: 33%;position: relative;}
.menuimg{width: 67%}
.menuimg img{width: 100%;vertical-align: top}
.allow{position: absolute;width: 10px;height: 10px;background: #fff;transform: rotate(45deg);
right: -5px;top: 49%}

.new a{display: block;width: 100%;height: 100%;text-align: right}
.new img{width: 100%;padding-top: 10px;display: block;}
.new span{padding-top: 10px;display: block;}
.new .box{width: 100%;padding: 2%;background: #f5f6f7;border: 1px solid #ebedf0}
.new .box input{width: 100%;height: 36px;border-radius: 3px;box-shadow: 1px 1px 3px #aaa;border: none;color: #666}
.new .email{width: 100%;height: 42px;margin: 16px 0;border: 1px solid #ccc;border-radius: 2px}
.new button{width: 100%;height: 42px;background: #000;color: #fff;border: none;border-radius: 2px}

@media only screen and (max-width:770px){
.new li{width: 100%;margin-bottom: 80px}
.headnav{padding-top:  30px}
.moblienav{font-size: 30px}
.hidden{display: block;}
.off{display: none;}
.hidden.on{animation: moblienav .5s linear}

@keyframes moblienav {
    0%{transform: rotate(0)}
    100%{transform: rotate(360deg)}
}

}
@media only screen and (min-width:771px){
.headnav{padding-top: 35px}
.contents{display: flex;justify-content: space-between}
.sectionleft{max-width: 67%;}
.sectionright{max-width: 33%}
.new li{width: 100%;margin-bottom: 80px}
}