*{box-sizing: border-box}

a{display: block}
body{background: #fffdf6 url(../01_30/img/bgContent.gif)repeat-y center center}
.wrap{max-width: 1064px;margin: auto}
.topbg1{background: #fffdf6 ;position: absolute;left: 0;top: 0;width: 100%;height: 300px;z-index: -10;}
.anisnack{opacity: 0;background: url(../01_30/img/pdt_basic.png)no-repeat center center;transform: translate(-50%,-50%);position: fixed;left: 50%;top: 45%;z-index: 60;width: 326px;height: 450px;transition: all 1s ease}
.anisnack.on{opacity:1}

header{position: fixed;z-index: 100;left: 0;top: 0;width: 100%;height: 80px;text-align: center;
background: url(../01_30/img/bgHeader.png)repeat-x left top;color: #fff;}
header .logo{padding-top: 16px;float: left;}
header .headnav{float: left;padding-top: 20px;margin-left: 14%}
header .headnav li{float: left;}
header .headnav li a{background: url(../01_30/img/bulGnb.png)no-repeat right top;
padding: 8px 8px 0 0;margin: 0 16px}
header .headnav li a.on{color:#f58220;border-bottom: 1px solid #f58220}
header .headnav li a:nth-child(2){display: none}
header .headnav li a.on:nth-child(1){display: none}
header .headnav li a.on:nth-child(2){display: block}
header .login{float: right;padding-top: 28px}
header .login li{float: left;font-size: .8em}
header .login li a{padding: 1px;margin: 0 10px}

.sitenav{background: url(../01_30/img/remote_bg.png)no-repeat;text-align: center;
width: 44px;height: 207px;position: fixed;left: 20%;top: 40%;z-index: 100;}
.sitenav li{cursor: pointer}
.sitenav li a{width: 100%;height: 100%}
.sitenav li:nth-child(1n+2){height: 38px;}
.sitenav li{background: url(../01_30/img/remote_btnOff.png)no-repeat center center;width: 100%}
.sitenav li.on{background: url(../01_30/img/remote_btnOn.png)no-repeat center center;}
.sitenav li:hover{background: url(../01_30/img/remote_btnOn.png)no-repeat center center;}
.sitenav li:nth-child(1){background: url(../01_30/img/remote_mainOff.png)no-repeat center center;width: 100%;height:45px}
.sitenav li:nth-child(1).on{background: url(../01_30/img/remote_mainOn.png)no-repeat center center;}
.sitenav li:nth-child(1):hover{background: url(../01_30/img/remote_mainOn.png)no-repeat center center;}
/* .sitenav li img.on{display: none} */
/* .sitenav li:hover  img.off{display: none}
.sitenav li:hover  img.on{display: inline-block} */

/* .sitenav li.on  img.off{display: none}
.sitenav li.on  img.on{display: inline-block} */


.content{padding-top: 120px;text-align: center;position: relative;}
.content p.titmain{font-size: 1.2em;padding: 12px 0}
.poaimg{position: relative;margin-top: 10px;width: 100%;}
.poaimg .shrimp{transform: translate(-50%,-50%);z-index: 55;position: absolute;}
.poaimg .shrimp1{background: url(../01_30/img/shrimp01.png)no-repeat center center;animation: shrimp1 2s ease forwards;
 left: 20%;top: 0;width: 112px;height: 127px;}
.poaimg .shrimp2{background: url(../01_30/img/shrimp02.png)no-repeat center center;animation: shrimp2 2s ease forwards;animation-delay: .4s;
left: 40%;top: 0;width: 101px;height: 141px;transform: translate(-50%,-50%);z-index: 55;}
.poaimg .shrimp3{background: url(../01_30/img/shrimp03.png)no-repeat center center;animation: shrimp3 2s ease forwards;animation-delay: .8s;
position: absolute; left: 60%;top: 0;width: 101px;height: 137px;transform: translate(-50%,-50%);z-index: 55;}
.poaimg .shrimp4{background: url(../01_30/img/shrimp04.png)no-repeat center center;animation: shrimp4 2s ease forwards;animation-delay: 1.2s;
position: absolute; left: 80%;top: 0;width: 118px;height: 119px;transform: translate(-50%,-50%);z-index: 55;}

@keyframes shrimp1{
    0%{left: 20%;top: 0;}
    33%{left: 30%;top: 200px;}
    66%{left: 40%;top: 100px;}
    100%{left: 50%;top: 200px;}
}
@keyframes shrimp2{
    0%{left: 40%;top: 0;}
    33%{left: 30%;top: 200px;}
    66%{left: 30%;top: 70px;}
    100%{left: 50%;top: 200px;}
}
@keyframes shrimp3{
    0%{left: 60%;top: 0;}
    33%{left: 40%;top: 200px;}
    66%{left: 40%;top: 50px;}
    100%{left: 50%;top: 200px;}
}
@keyframes shrimp4{
    0%{left: 80%;top: 0}
    33%{left: 55%;top: 180px;}
    66%{left: 45%;top: 30px;}
    100%{left: 50%;top: 200px;}
}

.poaimg .opimg{opacity: 0;}
.poaimg .opimg1{opacity: 0;}
.poaimg .bgimg{background: url(../01_30/img/bgMusic.gif)no-repeat center center;
position: absolute; left: 50%;top: 0;width: 436px;height: 409px;transform: translateX(-50%);z-index: 35;}
.poaimg .img1{background: url(../01_30/img/pdt_basic.png)no-repeat center center;
position: absolute; left: 50%;top: 30px;width: 326px;height: 450px;transform: translateX(-50%);z-index: 50;}
.poaimg .img2{background: url(../01_30/img/pdt_hot.png)no-repeat center center;
position: absolute; left: 65%;top: 120px;width: 282px;height: 338px;transform: translateX(-50%);z-index: 45;}
.poaimg .img3{background: url(../01_30/img/pdt_rice.png)no-repeat center center;
position: absolute; left: 35%;top: 120px;width: 277px;height: 341px;transform: translateX(-50%);z-index: 45;}
.poaimg .img4{background: url(../01_30/img/bgSnack_real.png)no-repeat center center;
position: absolute; left: 50%;top: 300px;width: 512px;height: 195px;transform: translateX(-50%);z-index: 55;}
.poaimg .img5{background: url(../01_30/img/bgSnack_ani.png)no-repeat center center;
position: absolute; left: 50%;top: 364px;width: 578px;height: 149px;transform: translateX(-50%);z-index: 50;}

.ship{float: left;margin-top: 80px}
.banner{float: right;margin-top: 80px;font-size: .75em;width: 236px;}
.banner li:nth-child(1){border: 1px solid #e1e1e1;background: #fff;
padding: 9px 10px 9px 10px;overflow: hidden;}
.banner li:nth-child(1) p{text-align: left;color: #666;white-space: nowrap;overflow: hidden;line-height: 1.5;padding-bottom: 20px}
.banner li:nth-child(1) span{text-align: left;color: #666;white-space: nowrap;overflow: hidden;line-height: 1.5;
float: left;padding-right: 16px;background: url(../01_30/img/bgFbDate.gif)no-repeat center right;}
.banner li:nth-child(1) .bbtn{float: right;}
.bbtn a{display: inline-block;}
.facebook{position: relative;background: url(../01_30/img/nongshim_bg.jpg)no-repeat left top;
width: 100%;height: 74px;border-bottom:  1px solid #e1e1e1;padding-bottom: 4px;margin-bottom: 8px}
.facebook::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);}
.facebook img{position: absolute;left: 10px; top: 10px;}
.banner li:nth-child(2){position: relative;background: url(../01_30/img/bgMovie.gif)no-repeat center center;margin-top: 10px}
.banner li:nth-child(2) img{display: block;margin:auto;padding: 10px 0}
.banner li:nth-child(2) a.videobtn{position: absolute;left: 0;top: 0;width: 100%;height: 165px;background: url(../01_30/img/btnPlay.png)no-repeat center center}
.banner .cflink{font-size: 1.3em;float: right;font-weight: bold;padding: 16px 0 16px 35px;background: url(../01_30/img/icoMovie.gif)no-repeat center left}

section{position: relative;text-align: center;width: 1064px;margin: auto}
#sect1{height: 730px;}
#sect2{height: 766px;}
#sect3{height: 700px;}
#sect4{height: 770px;}
#sect5{height: 530px;}

.insect{width: 100%;height: 100%;position: absolute;left: 0;top: 0}
.insect.on{animation: insect 10s ease forwards}
@keyframes insect{
    0%{left: 0;top: 0}
    20%{left: 0;top: -10%}
    40%{left: 0;top: 5%}
    60%{left: 0;top: 2%}
    80%{left: 0;top: -10%}
    100%{left: 0;top: 0}
}
.incont{position: absolute;left: 50%;top: 200px;width: 170%;height: 350px;opacity: 0;transform:translateX(-50%);transition: all .5s ease}
.incont.on{width: 90%;opacity: 1;}
.incont .inleft{float: left;}
.incont .inleft h2{padding: 12px 0}
.incont .inleft p{text-align: right;font-size: 1.2em;line-height: 1.4}
.incont .inright{float: right;}
.incont .inright .on{display: none}
.incont .inright li{cursor: pointer;}
.incont .inright li:hover .on{display: inline-block}
.incont .inright li:hover .off{display: none}


.wrapbg{width: 100%;height: 192px;background: url(../01_30/img/bgStep04.png)no-repeat center bottom}
footer{width: 100%;height: 200px;margin-top: -10px;background: url(../01_30/img/bgBodyTop.png)repeat-x left top}
.footerwrap{width: 650px;margin: auto;padding-top: 40px;color: #bababa;font-size: .8em}
.foolink li{display: inline-block}
.foolink li{padding: 7px 8px;font-size: 0.9em;
background: #000;border-radius: 3px;margin: 0 4px}
.foolink .level1{padding-right: 25px;background: #000 url(../01_30/img/bgFootBtnOff.gif)no-repeat 95% 60%;}
.foolink .level1{position: relative;}
.foolink .level2{display: none;position: absolute;left: 0;bottom: 100%;width: 100%;height: 352px;background: #000;text-align: left;}
.foolink .level2 li{padding: 5px 0 5px 10px;margin: 0;border-bottom: 1px solid #777;color: #fff;font-size: 0.9em;width: 100%;}
.foolist,.copyright{padding-top: 8px}
.foolist b{color: #f58220}
.copyright li{padding-left: 16px}
.copyright span{padding-right: 8px}
.copyright li:nth-child(1){padding-left: 16px}
.copyright li:nth-child(2){padding-left: 16px}