html,body{height:100%;background:#fffdf6;font-family:나눔고딕, NanumGothic, NGNormal, 돋움, Dotum, Arial, Tahoma, Geneva, Verdana;}
a{display:block;} img{display:inline-block;} *{box-sizing:border-box;}
.right{float:right;}
.left{float:left;}

/* 공통속성 */
section{width:100%;height:800px;overflow:hidden;}
header .sec,section .sec,footer .sec{
  margin:auto;width:1250px;height:100%;
  position:relative;top:0;left:0;z-index:1;}
/*section .sec:position:relative 해 놓았음.*/
.section_wrap{background:url(img/bgContent.gif)repeat-y center;}

/* 상단의 고정 메뉴 */
header {width:100%;height:75px;background:url("img/bgHeader.png");}
header ul li{float:left;}
header li a{color:#fff;font-weight:bold;}
header .h_sec{display:flex;justify-content:space-between;align-items:center;height:100%;}
header .sec .h_center{top:0;left:0;}
header .sec .h_center li a span{font-size:16px;}
header .sec .h_center li{position:relative;}
header .sec span.off{display:none;}
header .sec .h_center li a span::after{content:url(img/bulGnb.png);position:absolute;right:0;top:0;}
header .sec .h_center li{padding-left:30px; }
header .sec .h_center li a {padding:10px 15px;}
header .sec .h_center li:hover span.on{display:none;}
header .sec .h_center li:hover span.off{display:inline-block;color:#f58220;text-decoration:underline;}
header .sec .h_right li a{font-size:12px;padding-left:10px;}
header .sec .h_right li a:hover{text-decoration:none;color:#d93030;}

/* 왼쪽의 고정 메뉴 바 -------------------------------------------- */
.remote{background:url("img/remote_bg.png");width:44px;height:207px;position:fixed;top:40%;left:18%;z-index:9999999;}
.remote li a{text-indent:-9999px;display:block;}
.remote ul li a{width:44px;height:38px;background-repeat:no-repeat;background-position:center;}
.remote ul li:nth-child(1) a{background-image:url("img/remote_mainOff.png");height:43px;}
.remote ul li:nth-child(1) a.on{background-image:url("img/remote_mainOn.png");}
/* 이미지가 틀리게 때문에 따로 해야한다. */
.remote ul li:nth-child(-n+5):nth-child(n+2) a{background-image:url("img/remote_btnOff.png");}
.remote ul li:nth-child(-n+5):nth-child(n+2) a.on{background-image:url("img/remote_btnOn.png");}
/* 꺼꾸로 올라간다
remote ul li:nth-child(-n+5):nth-child(n+2)
5개의 요소중에 -n 가상의 요소로 존재를 알려 주며 n는~으로 부터 아래로 내려온다.
** 꺼꾸로 올라가서 리스트가 올라가서 마지막에 지정을 한다.
*/

.pdtbasic{position:fixed;z-index:100;left:50%;top:62%;transform:translate(-50%,-62%);}

/* 메인의 내용 */
#section1 {height:750px;z-index:30;
  background:linear-gradient(to bottom, #fffdf6 0%,#fffdf6 50%,rgba(255, 255, 255, 0) 51%,rgba(255, 255, 255, 0) 100%);
height:800px;
/* border: 1px solid #000; */
}
/* #section1 .sec{height:800px;} */
#section1 .title{text-align:center;padding:55px 0 0;}
#section1 .title h1{font-weight:bold;letter-spacing:-1px;font-size:1.65em;line-height:1.65em;padding-top:10px;}
#section1 .visual{position:relative;top:0;left:0;height:800px;
  /* border: 1px solid #000; */
}
#section1 .visual span{position:absolute;}
/* 바닥의 음표  */
#section1 .bgMusic{top:12%;left:48%;transform:translate(-48%,-10%);z-index:5;}
/* 오른쪽 새우깡  */
#section1 .pdt_hot {top:40%;right:25%;transform:translate(-25%,-40%);z-index:6;opacity:0;animation:pdt_hot 1s linear 3.8s forwards;}
/* forwards:사라지지 않코 유지한다. */
@keyframes pdt_hot{
  0%{opacity:0;}
  100%{opacity:1;}
}
/* 중앙 새우 */
#section1 .pdt_basic {top:40%;left:50%;transform:translate(-50%,-40%);z-index:30;opacity:0;animation:pdt_basic 1s linear 3.2s forwards;}
@keyframes pdt_basic{
  0%{opacity:0;}
  100%{opacity:1;}
}

/* 왼쪽 새우깡 */
#section1 .pdt_rice {top:40%;left:35%;transform:translate(-35%,-40%);z-index:7;opacity:0;animation:pdt_rice 1s linear 3.8s forwards;}
@keyframes pdt_rice{
  0%{opacity:0;}
  100%{opacity:1;}
}
/* 사진 새우깡 */
#section1 .bgSnack_real{bottom:23%;left:50%;transform:translate(-50%,0%);z-index:36;}
/* 일러스트 새우깡 */
#section1 .bgSnack_ani {bottom:18%;left:50%;transform:translate(-50%,0%);z-index:35;height:149px;
  /* border: 1px solid #000; */
}

/* 새우 4 마리 */
.shrimp1,.shrimp2,.shrimp3,.shrimp4 {top:0;}
.shrimp1{animation:shirmp1 linear 1s 0s forwards;z-index:20;left:300px;}
/* 인피니트 주었을때만 마지막으로 0값으로 돌오는 것이다.0%로 그게 아니라면 100%에 마지막에 머물러 있는것이다. */
@keyframes shirmp1{
  0%{transform:translate(100px,100px);}
  25%{transform:translate(50px,50px);}
  50%{transform:translate(0px,100px);}
  100%{transform:translate(220px,200px);}
}
.shrimp2 {animation:shirmp2 linear 1s 0.3s forwards;z-index:21;left:480px;}
@keyframes shirmp2{
  0%{transform:translate(100px,100px);}
  25%{transform:translate(50px,50px);}
  50%{transform:translate(0px,100px);}
  100%{transform:translate(50px,200px);}
}
.shrimp3 {animation:shirmp3 linear 1s 0.6s forwards;z-index:22;left:650px;}
@keyframes shirmp3{
  0%{transform:translate(100px,100px);}
  25%{transform:translate(50px,50px);}
  50%{transform:translate(0px,100px);}
  100%{transform:translate(-100px,200px);}
}
.shrimp4 {animation:shirmp4 linear 1s 0.9s forwards;z-index:23;left:800px;}
@keyframes shirmp4{
  0%{transform:translate(100px,100px);}
  25%{transform:translate(50px,50px);}
  50%{transform:translate(0px,100px);}
  100%{transform:translate(-250px,200px);}
}

/* 상위에 새우 폴더 */
.banner {position:absolute;top:40%;left:6%;}
.banner:hover{opacity:.8;filter:grayscale(100%);}
.snsArea,.movArea {position:absolute;right:3%;width:238px;}
.snsArea{height:210px;top:30%;color:#444;background:#fff;border:1px solid #ddd;border-radius:7px;padding:10px;}
.snsArea div{width:216px;}
.txt1_line{height:70px;background:url("img/right_bg.jpg");color:#fff;position:relative;}
.txt1_line::before{position:absolute;content: "";width:216px;height:70px;background:linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);}
.txt1_line img,.txt1_line span{position:absolute;}
.txt1_line img{z-index:2;left:10px;top:13px;cursor:pointer;}
/* 이미지는 보여지는 그대로 높이 값과 가로 값을 잡으니 굳이 주지 않아도 된다.*/
.txt1_line span:nth-child(2){z-index:3;top:10px;left:32%;font-size:18px;text-shadow:1px 1px 2px #000;}
.txt1_line span:nth-child(3){z-index:4;top:40px;left:32%;font-size:11px;padding:3px;background-color: #fff;color:#000;cursor: pointer;}
.txt1_line span:nth-child(3) span{background:url("img/KsG3u3GrOUd.png")no-repeat left -784px;width:12px;height:12px;top:5px;left:5px;}
.txt1_line span:nth-child(3) b{margin-left:20px;display:inline-block;margin-top:2px;}
.txt1_line span:nth-child(4){text-shadow:1px 1px 2px #000;right:3%;bottom:10%;font-size:15px;font-weight:bold;color:#ff0}
.txt2_line{border-top:1px solid #ddd;padding-top:8px;margin-top:5px;cursor:pointer;}
.txt3_line{height:20px;margin-top:13px;}
.txt3_line .left img{vertical-align:middle;margin-left:5px;cursor:pointer;}
.txt3_line .right img{cursor:pointer;margin-right:2px;}

.movArea{height:155px;top:60%;line-height:200px;
  background-image:url("img/video.jpg"),url("img/bgMovie.gif");
  background-repeat:no-repeat;
  background-position:center;
  text-align:center;
}
.movArea:hover{opacity:.9;}
.movArea img{width:53px;display:inline-block;cursor:pointer;}
.movArea img:hover{opacity:.8;}

.bottom_txt{position:absolute;right:3.5%;top:82%;height:20px;line-height:30px;}
.bottom_txt img{vertical-align:middle;margin-right:10px;float:left;}
/* float:left; 하지않으면 글짜값이기 때문에 밑에 라인이 생긴다.*/
.bottom_txt img:hover{filter:grayscale(100%);}
.bottom_txt span{display:inline-block;}
.bottom_txt span:hover{color:#ff4e22;}

/*--------------------------------------------------------------------------  */
/* #section2 .sec{height:700px;border: 1px solid #00f; } */

/* #section2 .sec .bgMark{position:absolute;z-index:0;top:0;left:50%;
transform:translateX(-50%);width:1063px;height:766px;
background:url("img/objGroup01.png")no-repeat;} */


.bgMark{position:absolute;top:-50px;left:50%;transform:translateX(-50%);z-index:9;}
/* .on띄어쓰기 때문에 그렇게 적용 된것이다. */
.bgMark img.on{animation-name:bgMark_img; animation-duration:1s;animation-iteration-count:infinite;animation-direction: alternate;}
@keyframes bgMark_img{
  0%{transform: translateY(0);}
  100%{transform: translateY(50px);}
 }

.right_img{cursor:pointer;z-index:101;}
#section2{z-index:50;}
#section2 .left_img{width:330px;height:210px;position:relative;top:310px;right:0;z-index:15;}
#section2 .left_img img{position:absolute;top:0;right:900px;}
#section2 .left_img p {position:absolute;top:100px;right:900px;width:230px;text-align:right;font-size:1.65em;letter-spacing:-1px;}

#section2 ul.right_img{position:absolute;top:250px;right:-900px;}
#section2 ul.right_img li{width:236px;height:113px;background-image:no-repeat;margin-bottom:10px;}
#section2 ul.right_img li:nth-child(1){background-image:url("img/step01_menu01Off.png");}
#section2 ul.right_img li:nth-child(2){background-image:url("img/step01_menu02Off.png");}
#section2 ul.right_img li:nth-child(3){background-image:url("img/step01_menu03Off.png");}
#section2 ul.right_img li:nth-child(1):hover{background-image:url("img/step01_menu01On.png");}
#section2 ul.right_img li:nth-child(2):hover{background-image:url("img/step01_menu02On.png");}
#section2 ul.right_img li:nth-child(3):hover{background-image:url("img/step01_menu03On.png");}

/* #section3 */
#section3 .left_img{width:330px;height:210px;position:relative;top:280px;right:0;z-index:15;}
#section3 .left_img img{position:absolute;top:0;right:900px;}
#section3 .left_img p {position:absolute;top:100px;right:900px;width:230px;text-align:right;font-size:1.65em;letter-spacing:-1px;}

#section3 ul.right_img{position:absolute;top:250px;right:-900px;}
#section3 ul.right_img li{width:236px;height:113px;background-image:no-repeat;margin-bottom:10px;}
#section3 ul.right_img li:nth-child(1){background-image:url("img/step02_menu01Off.png");}
#section3 ul.right_img li:nth-child(2){background-image:url("img/step02_menu02Off.png");}
#section3 ul.right_img li:nth-child(1):hover{background-image:url("img/step02_menu01On.png");}
#section3 ul.right_img li:nth-child(2):hover{background-image:url("img/step02_menu02On.png");}

/*#section4*/
#section4 .left_img{width:330px;height:210px;position:relative;top:280px;right:0;z-index:5;}
#section4 .left_img img{position:absolute;top:0;right:900px;}
#section4 .left_img p {position:absolute;top:100px;right:900px;width:230px;text-align:right;font-size:1.65em;letter-spacing:-1px;}

#section4 ul.right_img{position:absolute;top:250px;right:-900px;}
#section4 ul.right_img li{width:236px;height:113px;background-image:no-repeat;margin-bottom:10px;}
#section4 ul.right_img li:nth-child(1){background-image:url("img/step03_menu01Off.png");}
#section4 ul.right_img li:nth-child(2){background-image:url("img/step03_menu02Off.png");}
#section4 ul.right_img li:nth-child(1):hover{background-image:url("img/step03_menu01On.png");}
#section4 ul.right_img li:nth-child(2):hover{background-image:url("img/step03_menu02On.png");}

/* #section5 */
#section5 .left_img{width:330px;height:210px;position:relative;top:100px;right:0;z-index:15;}
#section5 .left_img img{position:absolute;top:0;right:900px;}
#section5 .left_img p {position:absolute;top:100px;right:900px;width:230px;text-align:right;font-size:1.65em;letter-spacing:-1px;}

#section5 ul.right_img{position:absolute;top:50px;right:-900px;}
#section5 ul.right_img li{width:236px;height:113px;background-image:no-repeat;margin-bottom:10px;}
#section5 ul.right_img li:nth-child(1){background-image:url("img/step04_menu01Off.png");}
#section5 ul.right_img li:nth-child(2){background-image:url("img/step04_menu02Off.png");}
#section5 ul.right_img li:nth-child(3){background-image:url("img/step04_menu03Off.png");}
#section5 ul.right_img li:nth-child(1):hover{background-image:url("img/step04_menu01On.png");}
#section5 ul.right_img li:nth-child(2):hover{background-image:url("img/step04_menu02On.png");}
#section5 ul.right_img li:nth-child(3):hover{background-image:url("img/step04_menu03On.png");}
#section5 .bg_bottom{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);}

footer{background:url(img/bgBodyTop.png)repeat-x left top;color:#fff;height:200px;
display:flex;justify-content:center;align-items:center;
position:relative;z-index:1;top:-10px;
/*상위에 백그라운드 숨기기위해서 상위로 올림.*/}
footer .sec{width:640px;height:140px;margin-top: 50px;}
footer img{vertical-align:middle;}
footer ul{margin-bottom:50px;}
footer ul li{float:left;padding:5px 10px;}
footer ul li:nth-child(1){padding:5px 0;}
footer ul li a{color:#fff;padding:5px 10px;background:#000;border-radius:5px;}
footer ul li a:hover{text-decoration:none;background:#ffa12e;}
footer p{color:#b2b2b2;font-weight:normal;font-size:13px;clear:both;line-height:23px;}
footer p b{color:#ffa12e;}
footer p{margin-bottom:10px;}
footer p:nth-child(3){height:46px;}