@charset "utf-8";

/*
    프로젝트명 : 새우깡(농심)
    작성일자 : 2013.09
    작성자 : icetea @ PCN
*/

#content { position:relative; z-index:200; margin:0 auto; /* padding:0 20px; */ overflow:hidden; }

#remote { position:fixed; top:50%; left:50%; z-index:3000; width:44px; height:207px; margin:-103px 0 0 -532px; background:url('../images/common/remote_bg.png') 0 0 no-repeat; }
    #remote li {  }
    #remote li a { display:block; overflow:hidden; height:40px; text-indent:-1000px;  background:url('../images/common/remote_btnOff.png') center center no-repeat; }
    #remote li a:hover, #remote li a:focus, #remote li a:active, #remote li a.on { background:url('../images/common/remote_btnOn.png') center center no-repeat; }
    #remote li.main a { height:43px; background:url('../images/common/remote_mainOff.png') center center no-repeat; }
    #remote li.main a:hover, #remote li.main a:focus, #remote li.main a:active, #remote li.main a.on { background:url('../images/common/remote_mainOn.png') center center no-repeat; }

.conBox { position:relative; width:1064px; height:455px; padding-top:245px; margin:0 auto; }
.conBox h1.tit { position:relative; z-index:1200; width:350px;  text-align:right; margin-left:-100%; }
.conBox p.txt { position:relative; z-index:1200; width:350px; margin-top:15px;  text-align:right; font-size:1.65em; letter-spacing:-1px; margin-left:-100%; }
.conBox .subNav { position:absolute; z-index:1500; right:-100%; top:245px;  }
.conBox .subNav li { margin-bottom:5px; }
#ggang { display:none; position:fixed; top:50%; left:50%; z-index:4000; margin:-225px 0 0 -163px; }
#ggang img {  }

#main { position:relative; z-index:2001; height:580px;  margin:0 auto; padding:120px 0 0 0; background:#fffdf6;  }
    #main h1 { position:relative; text-align:center;  }
    #main h1 .wide { display:inline; }
    #main h1 .small { display:none; }
    #main p.mainTxt { width:100%; margin-top:15px; text-align:center; font-size:1.65em; letter-spacing:-1px; line-height:160%;  }
    #main #banner { position:absolute; left:0; bottom:50px;  }
    #main #banner .wide { display:block; }
    #main #banner .small { display:none; }

    #main #promote { position:absolute; right:0; bottom:50px; width:236px; overflow:hidden; }
    .snsArea {  }
    .movArea { width:236px; overflow:hidden; margin-top:20px;  }
    .movArea div { position:relative; height:155px; line-height:153px; overflow:hidden; text-align:center; background:url('../images/common/bgMovie.gif') 0 0 no-repeat;  }
    .movArea div img { vertical-align:middle; }
    .movArea a.showMovie { position:absolute; top:0; left:0; right:0; bottom:0; text-indent:-1000px; background:url('../images/common/btnPlay.png') center center no-repeat; }
    .movArea a.listMovie { float:right; margin-top:10px; padding-left:35px; line-height:28px; font-size:1.1em; font-weight:bold; color:#4a0b0b; background:url('../images/common/icoMovie.gif') 0 0 no-repeat; }
    #visualMain { position:relative; height:560px;   }
    #visualMain span { position:absolute; z-index:1000;  }
    #music { left:50%; top:23px; width:436px; height:409px; margin-left:-218px;  }
    #mobileBg { display:none; text-align:center; }
    #pdtRice { display:none; top:150px; left:205px; opacity:0; }
    #pdtHot { display:none; top:150px; right:224px; opacity:0; }
    #pdtBasic { bottom:75px; left:50%; margin-left:-163px;  }
    #pdtBasic img { display:none; opacity:0;  }
    #snackAni { bottom:30px; left:50%; z-index:2001; margin-left:-292px; }
    #snackReal { bottom:50px; left:50%; z-index:2001;  margin-left:-256px; }
    #snackReal_01 { bottom:14px; left:50%; transform:translateX(-50%); margin-left:-7px; }
    #shrimp01 { left:0; }
    #shrimp02 { left:300px; }
    #shrimp03 { left:500px; }
    #shrimp04 { left:700px; }
    .shrimp { bottom:400px; }
#step01 {  }
#step02 {  }
#step03 {  }
#step04 { z-index:1000;  }

.bgMark { position:absolute; z-index:1000; width:1064px; }
#bg01 { top:680px; left:50%; height:766px; margin-left:-532px; background:url('../images/common/objGroup01.png') 0 0 no-repeat; }
#bg02 { top:1300px; left:50%;  height:700px; margin-left:-532px; background:url('../images/common/objGroup02.png') 0 0 no-repeat; }
#bg03 { top:1950px; left:50%; height:700px; margin-left:-532px; background:url('../images/common/objGroup03.png') 0 0 no-repeat; }
#bg04 { bottom:170px; left:50%; height:544px; margin-left:-532px; background:url('../images/common/objGroup04.png') 0 0 no-repeat; }

#bgLine { position:absolute; bottom:0; top:0; width:100%; z-index:90; background:url('../images/common/bgContent.gif') center 0 repeat-y; }
#bgBlock { position:relative; height:192px; z-index:100; margin-top:-192px; background:url('../images/common/bgStep04.png') center bottom no-repeat; }

#contentBox { display:none; position:relative; z-index:5000; width:100%; margin-top:-100px; padding-bottom:50px; margin-bottom:30px; background:url('../images/common/bgBodyBottom.png') 0 bottom repeat-x; }
#contentBox div.wrap { overflow:hidden;  padding-top:50px; min-height:340px; background:url('../images/common/bgBodyTop.png') 0 0 repeat-x; }
#contentBox .close { position:absolute; right:20px; top:20px; width:26px; height:29px; overflow:hidden; text-indent:-1000px; background:url('../images/common/btnClose.png') 0 0 no-repeat; }

#loadCon { width:1000px; overflow:hidden; margin:0 auto; padding:0 10px; }
.titCon { color:#ffda4c; font-size:1.4em; font-family:NGNormal; }
.titCon strong { margin:0 10px 0 0; font-family:NGBold; font-size:1.5em; }
.titCon-sub { margin:10px 0 color:#ffda4c; font-size:1.4em; font-family:NGNormal;  }

.section { position:relative; overflow:hidden; margin-top:40px;  }
.section .position { position:absolute; }
.section.txtL { padding-right:285px; }
.section.txtL .position { right:0; top:0; }
.section.txtR { padding-left:265px; }
.section.txtR .position { left:0; top:0; }
.section .tit { font-family:NGNormal; font-size:1.6em; color:#ffda4c; }
.section .txt { margin-top:20px; }
.section .txt  p { margin:0 0 30px 0; line-height:160%; color:#f2f2f2; }
.section.floatL { float:left; width:475px; }
.section.floatR { float:right; width:475px; }

#mainMovie { display:none; position:fixed; top:-100%; left:50%; z-index:10000; width:940px; height:450px; overflow:hidden; margin:-225px 0 0 -470px; }
#mainMovie h1 { font-size:2.2em; color:#ff4e22;  }
#mainMovie .view { overflow:hidden; width:940px; margin-top:20px; }
#mainMovie .screen { float:left; position: relative; width:640px; height:390px; background:#000; }
#mainMovie .screen iframe, .screen object, .screen embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#mainMovie .caption { float:left; width:269px; height:358px; padding:15px; overflow:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; line-height:1.8; border:1px solid #abadb3; border-left:0;  background:#fff; color:#444; resize:none}
#mainMovie .close { position:absolute; top:0; right:10px; width:34px; height:36px; overflow:hidden; text-indent:-1000px; background:url('../images/common/btnCloseMovie_main.png') 0 0 no-repeat; }
.bgBlack { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; width:100%; background:#222; opacity:0.8;  }

/*페이스북*/
.visualFb{position:relative;margin-top:1px;border:1px solid #e1e1e1;background:#fff; padding:9px 10px 9px 10px;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;}
.visualFbTit{ border-bottom:1px solid #e5e5e5;overflow:hidden;}
.visualFbCon{color:#717171;height: 76px;padding:10px 10px 10px 0;font-size:0.9em;line-height:1.5em}
.visualFbDate{color:#808080;font-size:11px;}
.visualFbDate img{margin-left:5px;position: relative;top: -1px;}
.visualFbNavi{position:absolute;bottom:11px;right:14px;}
.visualSns{position:absolute; top:58px;left: 50%;margin-left: 306px;}
.visualFb ul li { display:none; }
.visualFb ul li.on { display:block; }

/* 20150311_Popup_default01 */
#layerPop{position:fixed; left:50%; top:50%; width:100%; max-width:450px; margin:-211px 0 0 -225px; z-index:7000; font: 1em "나눔고딕",NanumGothic,NGNormal,"돋움",Dotum,Arial,Tahoma,Geneva,Verdana;}
#layerPop .bgArea { padding:15px 15px; background:#f7f7f7; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; }
#layerPop .bgArea .btnGrp { text-align:center}
#layerPop .bgArea p {font-size:15px; font-weight:600; line-height:1.4em; text-align:center;}
#layerPop .txtCon { position:relative; margin:20px 0 0 0; /*adding-right:100px;*/ min-height:75px; border-bottom:1px solid #e5e5e5; font-size:14px;}
#layerPop .txtCon strong { /*font-size:1.2em;*/ padding-left:10px; color:#c91234; background: url("../images/main/bgHelpTour.gif") no-repeat scroll 0px center transparent;}
#layerPop .txtCon p { padding-left:10px; margin:20px 0; font-size:0.917em; line-height:160%;}
#layerPop .txtCon .btnJoin { position:absolute; right:0; top:0; }
#layerPop .btnCom {text-align:center; padding:15px 0;}
#layerPop .btnCom .btnConfirm { width:53px; height:26px; overflow:hidden; text-align:center; text-indent:-1000px; background:url('../images/main/btnConfirm.gif') 0 0 no-repeat; }
/* 20150330_btn */
#layerPop .btn{position:relative; height:25px; font-size:12px; color:#c2b7b0; vertical-align:middle; background:#393939;}
#layerPop .btn p.left{position:absolute; left:30px; top:5px; width:120px; height:15px;}
#layerPop .btn p.right{position:absolute; right:30px; top:5px; width:40px; height:15px;}
#layerPop .btn p.right span{display:inline-block; width:12px; color:#fff;}
/* 20150330_btn */
#layerPop .area2 { margin-top:20px;}
#layerPop .area2 p.txt{ margin-bottom:10px; font-size:1.2em;}
#layerPop .area2 strong {font-size:1.2em;}
#layerPop .area2 input{ height:18px; width:80%}
.popup { /*display:none;*/ position:fixed; top:50%; left:50%; z-index:7000; border-top:5px solid #ff1818; border-bottom:5px solid #ccc; background:#fff; color:#1a1a1a; }
.popup h1.tit {padding:14px 20px 8px; background:#fff; border-bottom:1px solid #ff1818; color:#000; font-size:1.667em; /* font-size:1.5em; */ font-family:NGBold; }
.popup .content { position:relative; background:#fff; overflow:auto; padding:20px; }
.popup .btnX { position:absolute; right:23px; top:10px; /* right:32px; top:20px; */padding:0;}
.popup .line { padding-left:13px; padding-right:13px; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #e5e5e5; }
.popup .txt { font-size:1.3em; }
.popup input[type=radio]{ position:relative; margin:0; top:-2px; }

@media screen and (max-width :767px) {
	.popup {top:0 !important; bottom:0 !important; width:100% !important; height:100% !important; margin-top:0 !important; overflow-y:auto;}

}

@media screen and (max-width :479px) {
	.popup {left:0 !important; margin:0 !important;}
    .popup h1.tit {font-size:1.5em;}
    .popup .btnX {top:38px;}

}
/* End : 20150311_Popup_default01 */


@media screen and (max-width :1079px) {
    #main { padding-top:120px; height:510px; }
    #main p.mainTxt { margin-top:5px; font-size:1.45em; }
    #main #banner { bottom:0; z-index:3000; }
    #main #promote { bottom:0; right:10px; z-index:3000;   }
    .movArea { width:163px; margin-top:15px;  }
    .movArea div { height:106px; line-height:106px; background-size:163px 106px;  }
    .movArea div img {  }
    .movArea a.listMovie { font-size:1.1em; letter-spacing:-1px; }

    #remote { display:none !important; }
    .conBox { width:100%; }
    #ggang img { width:90% !important;  }

    #pdtBasic { bottom:100px; margin-left:-145px;  }
    #pdtBasic img { display:none; width:90%; opacity:0;  }
    #pdtRice { display:none; top:50px; left:196px; opacity:0; }
    #pdtHot { display:none; top:50px; right:220px; opacity:0; }
    #music { left:50%; top:23px; width:350px; height:344px; margin-left:-175px;  }
    #music img { width:100%; }

    .conBox h1.tit { width:235px;  text-align:right; margin-left:-100%; }
    .conBox h1.tit img { width:90%; }
    .conBox p.txt { width:235px; margin-top:15px; font-size:1.4em; line-height:160%;  }

}

@media screen and (max-width :999px) {
    /* #loadCon { width:100%; } */
    #loadCon { width:96%; padding:0 2%; }
}

@media screen and (max-width : 939px) {
    #mainMovie { left:0; top:50px !important; bottom:0; margin:0; width:100%; height:100%; }
    #mainMovie h1 { font-size:2em; margin-left:20px;   }
    #mainMovie .view { width:100%; height:100%; }
    #mainMovie .screen { float:none; width:100%; height:0; padding-bottom:56.25%; }
    #mainMovie .caption { float:none; width:100%; height:150px; overflow:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; border:0; }
}

@media screen and (max-width :819px) {
    /* #content { width:96%; padding:0 2%; } */
    #main { background:none; }
    #main h1 .wide { display:none; }
    #main h1 .small { display:inline; width:277px; }
    #content { width:100%; }
    .conBox { width:100%; height:100%; margin:0 auto 50px auto;  padding-top:50px;  }
    .conBox h1.tit { text-align:center; margin:0 auto !important; }
    .conBox p.txt { width:100%; text-align:center; font-size:1.2em; margin:5px 0 0 0 !important; }
    .conBox p.txt br { display:none; }
    .conBox .subNav { position:static; width:100%; text-align:center; }
    .conBox .subNav li a {  }
    #contentBox { margin-top:0; }
    #main { height:auto; overflow:hidden; padding:110px 0 0 0; }
    #visualMain { height:auto; padding-bottom:60px; }
    #visualMain span { display:none !important; }
    #mobileBg { display:block; }
    #main #promote { position:static; width:100%; margin:10px 0; }
    #promote .snsArea { width:100%; }
    #main #banner { top:380px; left:50%; height:200px; margin:0 0 0 -92px; }
    #ggang { display:none !important;}
    .bgMark { left:0 !important; z-index:-1 !important; width:100%; margin:0 !important; background-position:center 0 !important; }
    #main #banner .wide { display:none; }
    #main #banner .small { display:block; }
    #bgBlock { height:192px; z-index:100; margin-top:-192px; background:url('../images/common/bgStep04.png') center bottom no-repeat;  }
    .section.floatL, .section.floatR { width:48%}
    .imgPack { max-width:525px; }
    .movArea { width:100%; text-align:center; }
    .movArea div { width:80%; height:auto; line-height:auto; margin:0 auto; background:none; }
    .movArea a.listMovie { float:none; display:inline-block; text-align:center;  }
}

@media screen and (max-width :750px) {
}

@media screen and (max-width :640px) {
    #main { height:100%; background:none; }
    #main h1 { font-size:2.5em; text-indent:0; font-family:NGBold; font-weight:bold; background:none; }
    #main h1 span { position:static; }
    #main p.mainTxt { font-size:1.2em; }
    .section .position { position:static; }
    .section.txtL { padding-right:0; }
    .section.txtR { padding-left:0; }
    .section.txtL img, .section.txtR img { margin-bottom:20px; max-width:100%; }
}

@media screen and (max-width :479px) {
    .section.floatL, .section.floatR { width:100%; }
    .titCon strong { display:block; line-height:160%; }
    .conBox h1.tit { width:100%; }
    .conBox h1.tit img { width:70%; }
    .conBox .subNav li a img { width:58%; }
     #mainMovie h1 { font-size:1.3em; }
}