.pcOnly{
    display:none;
}


/* Reset */
* { box-sizing: border-box; }
a,
a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: inherit;
}
img[src] { display: inline-block; vertical-align: middle; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
div, p, figure { margin: 0; padding: 0; }
fieldset { border: none; margin: 0; padding: 0; }
fieldset[disabled] { pointer-events: none; }

.click-active:active { filter: brightness(.8); }


/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,table,th,td,form,fieldset,legend,textarea,input,select,textarea,button{margin:0;padding:0}
body{font-family: 'Noto Sans KR', sans-serif;font-size:12px;background-color:#f8f8f8;color:#000}
fieldset,li,img{border:0;vertical-align:top}
ul,ol{list-style:none}
button{overflow:visible;border:0;background-color:transparent;cursor:pointer}
button::-moz-focus-inner{padding:0;border:0}
address,caption,em{font-style:normal}
a,a:focus,a:active,a:hover{color:#000}
a{text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
hr{display:none}


/* Header */
header {
    padding: 10px 10px;
    align-items: center;
    position: relative;
    z-index: 33;
    align-items: center;
    border-bottom: 1px solid #fff;
    
}

/*배경*/
header.fixed {
    padding: 10px 10px;
    width: 100%;
    top: 0;
    background: rgba(255,255,255,0.8);
}

/*디폴트*/
header nav:first-child a {
    margin-left: 25px;
    color: #fff;
    font-size: 19px;
    font-weight: bold;
}

/*디폴트*/
header.fixed nav:first-child a {
    margin-left: 25px;
    color:black;
    font-size: 19px;
}

/*on상태*/
header.fixed nav:first-child a.active {
    color: #eb2b2b;
    position: relative;
    font-weight: 600;
    font-size:21px;
}

header.fixed nav:first-child a.active::after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -28px;
}
header.fixed nav:first-child a.active::after {
    bottom: -19px;
}


/*내려오는속도*/
header.fixed.ani-slideDown {
    animation-fill-mode: forwards;
    animation: .5s slideDown;
}
@keyframes slideDown {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}




/* Flex layout */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex.justify-space-between { justify-content: space-between; }
.flex.justify-center { justify-content: center; }
.flex.justify-start { justify-content: flex-start; }
.flex.justify-end { justify-content: flex-end; }
.flex.align-center { align-items: center; }
.flex-1 { flex: 1; }

/* Fade animation only Desktop */
@media only screen and (min-width: 1000px) {
    section.fade-prev .fade-slide-up-1,
    section.fade-in .fade-slide-up-1 {
        animation: textFadeSlideUp 2.4s forwards;
    }
    section.fade-prev .fade-slide-up-2,
    section.fade-in .fade-slide-up-2 {
        animation: textFadeSlideUp2 2.4s forwards;
    }
    section.fade-prev .fade-slide-up-3,
    section.fade-in .fade-slide-up-3 {
        animation: textFadeSlideUp3 2.4s forwards;
    }
    @keyframes textFadeSlideUp {
        0% { opacity: 0; transform: translateY(30px); }
        15% { opacity: 0; }
        30% { transform: translateY(0); }
        50% { opacity: 1; }
    }
    @keyframes textFadeSlideUp2 {
        0% { opacity: 0; transform: translateY(30px); }
        15% { opacity: 0; }
        60% { opacity: 1; transform: translateY(0); }
    }
    @keyframes textFadeSlideUp3 {
        0% { opacity: 0; transform: translateY(30px); }
        15% { opacity: 0; }
        80% { opacity: 1; transform: translateY(0); }
    }

    @keyframes textFadeSlideDown {
        0% { opacity: 1; }
        15% { transform: translateY(0); }
        30% { opacity: 0; }
        50% { opacity: 0; transform: translateY(30px); }
    }
    @keyframes textFadeSlideDown2 {
        0% { opacity: 1; transform: translateY(0); }
        45% { opacity: 0; }
        60% { opacity: 0; transform: translateY(30px); }
    }
    @keyframes textFadeSlideDown3 {
        0% { opacity: 1; transform: translateY(0); }
        65% { opacity: 0; }
        80% { opacity: 0; transform: translateY(30px); }
    }
}


.floatingBanner{
    position:fixed;
    display:block;
    width:140px;height:243px;
    right:20px;
    top:13px;
    background:url(../img/floating_banner.png) no-repeat 50% 0;
    background-size:140px auto;
    z-index: 9999;
}

.cafeBanner{
    position:fixed;
    display: block;
    width:93px;height:93px;
    right:20px;
    bottom:120px;
    background:url(../img/cafe_btn.png) no-repeat 50% 0;
    z-index: 9999;
}

.topbtn{
    position:fixed;
    display: block;
    width:93px;height:93px;
    right:20px;
    bottom:20px;
    background:url(../img/top_btn.png) no-repeat 50% 0;
    z-index: 9999;
}

.download_btn{
    padding-top:30px;
    z-index: 2;
}

.btnIOS{
    width:202px;
    height:64px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.btnAndroid{
    width:202px;
    height:64px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.main-text{
    display: block;
    width:710px;height:214px;
    background:url(../img/main_text.png) no-repeat 50% 0;
    background-size:600px auto;
}

.marketbtn{
    width:250px;
}

.btnOpenEvent
{
    position: fixed;
    bottom: 0px;
    z-index: 1;
}

.eventBanner{
    display: block;
    width:2560px;
    height:250px;
    background:url(../img/banner.png) no-repeat 50% 0;
    background-size:2560px auto;
}

.text-margintop
{
    margin-top: -250px;
}

/* Main / Top Video */
section#main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1080px;
    position: relative;
}
section#main .play-media {
    position: absolute;
    top: -86px;
    left: 0;
    width: 100%;
    height: calc(100% + 86px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section#main .play-media::before {
    content: '';
    background: rgba(0,0,0,0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
section#main .play-media .play-media__video {
    border-width: 0;
    width: 105.7vw;
    height: 100%;
    min-width: 280vmin;
    min-height: 60.45vw;
    background: url('../img/main-pc.jpg') no-repeat;
    background-size: cover;
}

section#main .palybtn{
    position: relative;
    margin:0 auto;
    display:flex;
    top:0;
    width:118px;
    height:121px;
    cursor:pointer;
    z-index:1;

}

section#main .btn_video img[src]{
    width:80%;
    height:auto;
    margin-left:20px;
}
section#main .logo_big{
    width:600px !important;
    margin-top:-30px;
}

/* reservation */
section#reservation {
    position: relative;
    top: 0;
    height: 1100px;
    max-width: 2000px;
    letter-spacing:-1px;
    margin: 0 auto;
}

section#reservation .inner{
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 900px;
    height: 430px;
    top:345px;
    margin:0 auto;
}

.p_form{
    position: relative;
    display:block;
    width:470px;
    height:275px;
    margin:0 auto;
    z-index: 9;
}
section#reservation .leftinput{
    float:left;
    display:block;
    left:0;
    width: 640px;
    height: 430px;
}

section#reservation .leftinput form{
    margin-top:65px;
}


input[type=radio],[type=checkbox]{
	display: none; 
	width:1px; 
	height:1px;
}
section#reservation .leftinput .os-selection p{
	display: inline-block;
	overflow: hidden;
}

section#reservation .leftinput .os-selection p label{
	display:inline-block;  
	cursor: pointer
}

section#reservation .leftinput .os-selection{
    position: relative;
    width:470px;
    height:30px;
    display:block;
}

section#reservation .leftinput .os-selection .android{
    float: left;
    left:0;
    display:block;
}

section#reservation .leftinput .os-selection .ios{
    float:right;
    right:0;
    display:block;
}

section#reservation .leftinput .os-selection p label.ios{
    float:left;
    display:block;
    width:30px;
    height:30px;
    background:url(../img/checkbox.png) no-repeat 0 0;
}

section#reservation .leftinput .os-selection p input#ios:checked + label.ios{
    float:left;
    display:block;
    width:30px;
    height:30px;
    background:url(../img/checkbox.png) no-repeat 0 -30px;
}

section#reservation .leftinput .os-selection p label.android{
    float:left;
    display:block;
    width:30px;
    height:30px;
    background:url(../img/checkbox.png) no-repeat 0 0;
}

section#reservation .leftinput .os-selection p input#android:checked + label.android{
    float:left;
    display:block;
    width:30px;
    height:30px;
    background:url(../img/checkbox.png) no-repeat 0 -30px;
}

section#reservation .leftinput .os-selection .tt{
    float:left;
    padding-left:20px;
    font-size: 27px;
    color:#af8d81;
    line-height:30px;
}

section#reservation .leftinput .num_area{
    position: relative;
    margin-top:40px;
    width:470px;
    height:60px;
    border-bottom:2px solid #98522e;
}

section#reservation .leftinput .num_area .num1{
    float: left;
    width:150px;
    height:60px;
    text-align: center;
    font-size:30px;
    font-weight:bold;
    color:#98522e;
    line-height:60px;
}

section#reservation .leftinput .num_area .num2{
    float: left;
    width:310px;
    height:58px;
    border:none;
    font-size:25px;
    text-align: center;
    color:#98522e;
    line-height:58px;
}

section#reservation .leftinput .btn_register{
    position: relative;
    margin-top:40px;
    display: block;
    width:470px;
    height: 66px;
    background-color: #98522e;
    font-size:30px;
    text-align: center;
    color:#fff;
    line-height:66px;
}

section#reservation .leftinput .agree{
	display: inline-block;
	overflow: hidden;
}

section#reservation .leftinput .agree label{
	display:inline-block;  
	cursor: pointer
}

section#reservation .leftinput .agree{
    position: relative;
    margin-top:10px;
    width:470px;
    height: 27px;
}

section#reservation .leftinput .agree label.personal{
    float:left;
    display:block;
    width:27px;
    height:27px;
    background:url(../img/checkbox.jpg) no-repeat 0 0;
}

section#reservation .leftinput .agree input#personal:checked + label.personal{
    float:left;
    display:block;
    width:27px;
    height:27px;
    background:url(../img/checkbox.jpg) no-repeat 0 -27px;
}

section#reservation .leftinput .agree .tt{
    padding-left:10px;
    font-size:18px;
    text-align: center;
    color:#98522e;
    line-height:30px;
    letter-spacing: -1px;
}

section#reservation .leftinput .agree .personal_detail{
    float:right;
    display: block;
    width: 95px;
    height: 25px;
    background-color:#b29789;
    border:1px solid #98522e;
    font-size:16px;
    text-align: center;
    color:#fff;
    line-height: 20px;
    padding:0 10px;
    letter-spacing: -1px;
}

section#reservation .rightreward{
    float:left;
    display:block;
    right:0;
    width: 260px;
    height: 430px;
}

section#reservation .rightreward .ri-title{
    font-size: 24px;
    font-weight:bold;
    text-align: center;
    display: block;
    position: relative;
    margin:0 auto;
    top: 70px;
    color:#793817;
    z-index:9;
}

section#reservation .rightreward .sub-tt{
    font-size: 19px;
    text-align: center;
    display: block;
    position: relative;
    margin:0 auto;
    top: 290px;
    line-height: 20px;
    color:#facc5f;
    z-index:9;
}

section#reservation .market_go{
    position: relative;
    display:block;
    width: 900px;
    height: 136px;
    top:347px;
    margin:0 auto;
    z-index: 9;
}

section#reservation .market_go .m_tt{
    font-size: 21px;
    width:540px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: block;
    position: relative;
    margin:0 auto;
    top: 0;
    color:#a6410e;
}

section#reservation .market_go .marketbtn{
    position: relative;
    width:214px;
    height:95px;
    display:block;
    margin:0 auto;
    top:10px;
    z-index: 9;
}

section#reservation .market_go .marketbtn .goo_btn{
    float: left;
    width:93px;
    height:95px;
    display:block;
    cursor: pointer;
    z-index: 9;
}

section#reservation .market_go .marketbtn .app_btn{
    float: right;
    width:93px;
    height:95px;
    display:block;
    cursor: pointer;
    z-index: 9;
}

section#reservation .bg.bg__event {
    background:url(../img/reservation-pc.jpg) no-repeat center 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}

/* rewardevent */
section#rewardevent {
    position: relative;
    top: 0;
    height: 1800px;
    max-width: 2000px;
    margin: 0 auto;
}

section#rewardevent .reward_item{
    position: relative;
    display: block;
    width: 629px;
    height: 377px;
    top: 314px;
    margin: 0 auto;
    z-index: 9;
}

section#rewardevent .reward_item .reward_1000{
    margin: 0 auto;
    /* display: flex; */
    z-index:999;
    position: absolute;
    /* justify-content: center; */
    /* align-items: center; */
    left: 150px;
    top: 0px;
}
section#rewardevent .reward_item a img{
    margin: 0 auto;
    display: block;
    padding-top: 72px;
    z-index:10;
}

section#rewardevent .inner{
    position: relative;
    display:block;
    width: 900px;
    height: 1082px;
    top:220px;
    margin:0 auto;
    z-index: 9;
}

section#rewardevent .inner .reward-left{
    float: left;
    left:0;
    width:396px;
    height:900px;
}

section#rewardevent .inner .reward-left .reward-100{
    width:396px;
    height:275px;
    background:url(../img/reward_100.png) no-repeat 0 0;
    background-position: 0 0;
}

section#rewardevent .inner .reward-left .reward-50{
    width:396px;
    height:275px;
    margin-top:90px;
    background:url(../img/reward_50.png) no-repeat 0 0;
    background-position: 0 0;
}

section#rewardevent .inner .reward-left .reward-20{
    width:396px;
    height:275px;
    margin-top:35px;
    background:url(../img/reward_20.png) no-repeat 0 0;
    background-position: 0 0;
}

section#rewardevent .inner .reward-right{
    float: left;
    position: absolute;
    right:0;
    width:396px;
    height:900px;
}

section#rewardevent .inner .reward-right .reward-70{
    width:396px;
    height:275px;
    margin-top:210px;
    background:url(../img/reward_70.png) no-repeat 0 0;
    background-position: 0 0;
}

section#rewardevent .inner .reward-right .reward-30{
    width:396px;
    height:275px;
    margin-top:35px;
    background:url(../img/reward_30.png) no-repeat 0 0;
    background-position: 0 0;
}

section#rewardevent .inner .reward-right .reward-10{
    width:396px;
    height:275px;
    margin-top:35px;
    background:url(../img/reward_10.png) no-repeat 0 0;
    background-position: 0 0;
}

section#rewardevent .inner .reward-center{
    float: left;
    left:0;
    margin-top:180px;
    width: 108px;
    height: 780px;
}

section#rewardevent .inner .reward-center .icon_area{
    position: absolute;
    width:108px;
    height: 856px;
    z-index: 10;
}

section#rewardevent .inner .reward-center .bar_area{
    position: absolute;
    top:220px;
    margin-left:43px;
    width:21px;
    height: 775px;
}

section#rewardevent .inner .reward-center .reward_icon{
    margin-bottom: 54px;
    width:108px;
    height:101px;
    background:url(../img/reward_num.png) no-repeat;
}

section#rewardevent .inner .reward-center .reward_icon#icon_100{
    background-position: 0 0;
}

section#rewardevent .inner .reward-center .reward_icon#icon_70{
    background-position: 0 -100px;
}

section#rewardevent .inner .reward-center .reward_icon#icon_50{
    background-position: 0 -200px;
}

section#rewardevent .inner .reward-center .reward_icon#icon_30{
    background-position: 0 -300px;
}

section#rewardevent .inner .reward-center .reward_icon#icon_20{
    background-position: 0 -400px;
}

section#rewardevent .inner .reward-center .reward_icon#icon_10{
    background-position: 0 -500px;
}

section#rewardevent .inner .reward-center .reward_bar{
    width: 21px;
    height: 155px;
    background:url(../img/reward_bar.png) no-repeat 0 0;
}

section#rewardevent .inner [class^="reward-"].invite_complete{
    background-position: 0 -275px;
}

section#rewardevent .inner .reward-center .reward_bar.invite_complete{
    background-position: -21px 0 !important;
}

section#rewardevent .inner .reward-center .reward_icon.invite_complete{
    background-position-x: -108px !important;
}

section#rewardevent .bg.bg__event {
    background:url(../img/reward_pc.jpg) no-repeat center 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}

/* shareevent */
section#shareevent {
    position: relative;
    top: 0;
    height: 1200px;
    max-width: 2000px;
    margin: 0 auto;
}

section#shareevent .inner{
    position: relative;
    display:block;
    width: 720px;
    height: 360px;
    top:440px;
    margin:0 auto;
    z-index: 9;
}

section#shareevent .inner .share{
    width: 720px;
    height: 100px;
    margin: 0 auto;
}

section#shareevent .inner .share .ticket{
    float: left;
    width: 200px;
    height: 100px;
}

section#shareevent .inner .share .ticket .ticket_text{
    position: relative;
    margin: 0 auto;
    text-align: center;
    height:22px;
}

section#shareevent .inner .share .ticket .ticket_text .fixed_tt{
    font-size: 18px;
    line-height: 22px;
    color: #868686;
}

section#shareevent .inner .share .ticket .ticket_text .bar{
    left:10px;
    font-size: 18px;
    line-height: 22px;
    color: #868686;
}

section#shareevent .inner .share .ticket .ticket_text .ticket_num{
    left:10px;
    font-size: 30px;
    line-height: 22px;
    color: #8f4e36;
}

section#shareevent .inner .share .ticket .used_btn{
    position: relative;
    width:200px;
    height:46px;
    border-radius: 23px;
    background-color: #8f4e36;
    font-size:18px;
    text-align: center;
    color:#fff;
    line-height:46px;
    top:32px;
}
section#shareevent .inner .share .ticket .ticket_count_btn{
    position: relative;
    width:200px;
    height:46px;
    border-radius: 23px;
    background-color: #8f4e36;
    font-size:18px;
    text-align: center;
    color:#fff;
    line-height:46px;
    top:32px;
}
section#shareevent .inner .share .share_btn{
    float: right;
    width: 482px;
    height: 90px;
    margin-top:6px;
}

section#shareevent .inner .share .share_btn [class^="btn_"]{
    float: left;
    cursor: pointer;
    width:84px;
    height:89px;
}

section#shareevent .inner .share .share_btn .btn_facebook{
    background:url(../img/share_fb.png) no-repeat center 0;
    margin-right:15px;
}

section#shareevent .inner .share .share_btn .btn_twitter{
    background:url(../img/share_tw.png) no-repeat center 0;
    margin-right:15px;
}

section#shareevent .inner .share .share_btn .btn_story{
    background:url(../img/share_ka.png) no-repeat center 0;
    margin-right:15px;
}

section#shareevent .inner .share .share_btn .btn_kakao{
    background:url(../img/share_kakao.png) no-repeat center 0;
    margin-right:15px;
}

section#shareevent .inner .share .share_btn .btn_link{
    background:url(../img/share_link.png) no-repeat center 0;
}

section#shareevent .inner .share_reward{
    position: relative;
    display: block;
    width:712px;
    height:222px;
    margin:0 auto;
    top:38px;
}

section#shareevent .inner .share_reward [class^="share_reward_"].win{
    background: url(../img/share_reward_on.png) no-repeat 0 0;
}

section#shareevent .inner .share_reward .share_reward_1.win{
    width: 155px;
    height: 222px;
    margin-left: -4px;
    background-position: 0 0;
}

section#shareevent .inner .share_reward .share_reward_2.win{
    width: 148px;
    height: 222px;
    margin-left:142px;
    background-position: -155px 0;
}

section#shareevent .inner .share_reward .share_reward_3.win{
    width: 148px;
    height: 222px;
    margin-left:287px;
    background-position: -303px 0;
}

section#shareevent .inner .share_reward .share_reward_4.win{
    width: 148px;
    height: 222px;
    margin-left:420px;
    background-position: -451px 0;
}

section#shareevent .inner .share_reward .share_reward_5.win{
    width: 148px;
    height: 222px;
    margin-left:560px;
    background-position: -599px 0;
}

section#shareevent .bg.bg__event {
    background:url(../img/shareevent-pc.jpg) no-repeat center 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}


/* hashtag */
section#hashtag {
    position: relative;
    top: 0;
    height: 2500px;
    max-width: 2000px;
    margin: 0 auto;
}

section#hashtag .sns{
    display: none;
}

section#hashtag .bg.bg__event {
    background:url(../img/hashtag-pc.jpg) no-repeat center 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}

/* introduction */
section#introduction {
    position: relative;
    top: 0;
    height: 1080px;
    max-width: 2000px;
    margin: 0 auto;
}

section#introduction .tag_btn{
    position: relative;
    display:block;
    width: 430px;
    height: 97px;
    top:318px;
    margin:0 auto;
    z-index: 9;
}

section#introduction .tag_btn button{
    width:97px;
    height:97px;
    background:url(../img/sectionbtn.png) no-repeat;
    cursor: pointer;
}

section#introduction .tag_btn button:hover{
    background-position-y:-97px;
}

section#introduction .tag_btn button.on{
    background-position-y:-97px;
}

section#introduction .tag_btn .farm_btn{
    background-position: 0 0;
}

section#introduction .tag_btn .delivery_btn{
    background-position: -97px 0;
}

section#introduction .tag_btn .deco_btn{
    background-position: -194px 0;
}

section#introduction .tag_btn .food_btn{
    background-position: -291px 0;
}

section#introduction .tag{
    position: relative;
    display:block;
    width: 897px;
    height: 509px;
    top:328px;
    margin:0 auto;
    z-index: 9;
}

section#introduction .tag .farm_tag{
    position: absolute;
    left:500px;
    top:260px;
    width:112px;
    height:128px;
    background:url(../img/farm.gif) no-repeat;
    cursor: pointer;
}

section#introduction .tag .farm_tag:hover{
    left:525px;
    width:73px;
    height:172px;
    background:url(../img/farm-hover.png) no-repeat;
    cursor: pointer;
}

section#introduction .tag .delivery_tag{
    position: absolute;
    left:280px;
    top:320px;
    width:112px;
    height:128px;
    background:url(../img/delivery.gif) no-repeat;
    cursor: pointer;
}

section#introduction .tag .delivery_tag:hover{
    left:305px;
    width:73px;
    height:172px;
    background:url(../img/delivery-hover.png) no-repeat;
    cursor: pointer;
}

section#introduction .tag .deco_tag{
    position: absolute;
    left:130px;
    top:100px;
    width:112px;
    height:128px;
    background:url(../img/deco.gif) no-repeat;

}

section#introduction .tag .deco_tag:hover{
    left:155px;
    width:73px;
    height:172px;
    background:url(../img/deco-hover.png) no-repeat;

}


section#introduction .tag .food_tag{
    position: absolute;
    left:620px;
    top:90px;
    width:112px;
    height:128px;
    background:url(../img/food.gif) no-repeat;

}

section#introduction .tag .food_tag:hover{
    left:645px;
    width:73px;
    height:172px;
    background:url(../img/food-hover.png) no-repeat;

}

section#introduction .detail{
    position: relative;
    display:block;
    width: 1000px;
    height: 551px;
    top:328px;
    margin:0 auto;
    z-index: 9;
}

section#introduction .btn_ly_close{
    right:80px;
    margin-top:10px;
    z-index:999;
}

section#introduction .arrow{
    position: absolute;
    top:225px;
    width:1000px;
    height:69px;
    z-index: 10;
}

section#introduction .arrow .left{
    background:url(../img/arrow.png) no-repeat;
    background-size:91px 69px;
    width:45px;
    height: 69px;
    background-position: 0 0;
    cursor: pointer;
}

section#introduction .arrow .right{
    background:url(../img/arrow.png) no-repeat;
    float:right;
    right:0;
    background-size:91px 69px;
    width:45px;
    height: 69px;
    background-position: -45px 0;
    cursor: pointer;
}

section#introduction .detail .dot{
    position: absolute;
    top:462px;
    left: 429px;
    width: 168px;
    height:16px;
    z-index: 10;
}

section#introduction .detail .dot [class^="dot_"]{
    float: left;
    margin-left:40px;
    width: 10px;
    height:16px;
    display: inline-flex;
    background:url(../img/dot.png) no-repeat;
    background-position-x: -16px;
    cursor: pointer;
}

section#introduction .detail .dot [class^="dot_"].on{
    float: left;
    margin-left:40px;
    width: 16px;
    height:16px;
    background:url(../img/dot.png) no-repeat;
    background-position: 0 0;
    cursor: pointer;
}
section#introduction .detail .dot .dot_farm{
    margin-left:0 !important;
}

section#introduction .detail_book{
    position: relative;
    display:block;
    width: 900px;
    height: 551px;
    margin:0 auto;
    z-index: 9;
}

section#introduction .detail_book .inner{
	/*
    position: absolute;
    right:60px;
    */
    position: relative;
    right: -220px;
    top: 315px;
    display:block;
    width: 343px;
    height: 96px;
    margin:0 auto;
    z-index: 9;
    bottom:138px;
}

section#introduction .detail_book .inner .sh1{
    float: left;
    left:0;
    width: 169px;
    height: 96px;
    margin:0 auto;
    cursor: pointer;
    z-index: 9;
}
section#introduction .detail_book .inner .sh2{
    float: right;
    right:0;
    width: 169px;
    height: 96px;
    margin:0 auto;
    cursor: pointer;
    z-index: 9;
}

section#introduction .detail_book .farm_book{
    width:100%;
    height:551px;
    background:url(../img/farm_book.png) no-repeat;
}

section#introduction .detail_book .delivery_book{
    width:100%;
    height:551px;
    background:url(../img/deilvery_book.png) no-repeat;
}

section#introduction .detail_book .deco_book{
    width:100%;
    height:551px;
    background:url(../img/deco_book.png) no-repeat;
}

section#introduction .detail_book .food_book{
    width:100%;
    height:551px;
    background:url(../img/food_book.png) no-repeat;
}
section#introduction .bg.bg__event {
    background:url(../img/introduction-pc.jpg) no-repeat center 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}

/* linefriend */
section#linefriend {
    position: relative;
    top: 0;
    height: 1150px;
    max-width: 2000px;
    margin: 0 auto;
}

section#linefriend .friedn_btn{
    position: relative;
    width: 907px;
    height: 660px;
    top:326px;
    margin:0 auto;
    background: url(../img/group_character.png) no-repeat center 0;
    z-index: 9;
}

section#linefriend .friedn_btn .top{
    position: relative;
    margin: 0 auto;
    top:33px;
    width:844px;
    height:202px;
    cursor: pointer;
}

section#linefriend .friedn_btn .next{
    position: relative;
    margin: 0 auto;
    top:179px;
    width:676px;
    height:202px;
    cursor: pointer;
}

section#linefriend .friedn_btn button{
    width:157px;
    height:202px;
    border-radius:4px;
    cursor: pointer;
}

section#linefriend .friedn_btn button:hover{
    background: url(../img/look.png) no-repeat center;
    background-color: rgba(0,0,0,0.5);
}

section#linefriend .friedn_btn .top button{
    margin-right:67.5px;
}

section#linefriend .friedn_btn .next button{
    margin-right:97px;
}

section#linefriend .friedn_btn .james-btn{
    margin-right:0 !important;
}

section#linefriend .friedn_btn .jessica-btn{
    margin-right:0 !important;
}

section#linefriend .detail{
    position: relative;
    display:block;
    width: 1000px;
    height: 551px;
    top:328px;
    margin:0 auto;
    z-index: 9;
}

section#linefriend .btn_ly_close{
    right:80px;
    margin-top:10px;
    font-size:0;
    z-index:999;
}

section#linefriend .arrow{
    position: absolute;
    top:225px;
    width:1000px;
    height:69px;
    z-index: 10;
}

section#linefriend .arrow .left{
    background:url(../img/arrow.png) no-repeat;
    width:45px;
    height: 69px;
    background-size:91px 69px;
    background-position: 0 0;
    cursor: pointer;
}

section#linefriend .arrow .right{
    background:url(../img/arrow.png) no-repeat;
    float:right;
    right:0;
    background-size:91px 69px;
    width:45px;
    height: 69px;
    background-position: -45px 0;
    cursor: pointer;
}

section#linefriend .detail .dot{
    position: absolute;
    top:440px;
    left: 386px;
    width: 271px;
    height:16px;
    z-index: 12;
}

section#linefriend .detail .dot [class^="dot-"]{
    float: left;
    margin-left:30px;
    width: 10px;
    height:16px;
    display: inline-flex;
    background:url(../img/dot.png) no-repeat;
    background-position-x: -16px;
    cursor: pointer;
}

section#linefriend .detail .dot [class^="dot-"].on{
    float: left;
    margin-left:30px;
    width: 16px;
    height:16px;
    background:url(../img/dot.png) no-repeat;
    background-position: 0 0;
    cursor: pointer;
}
section#linefriend .detail .dot .dot-brown{
    margin-left:0 !important;
}

section#linefriend .detail .detail_book{
    position: relative;
    display:flex;
    width: 900px;
    height: 529px;
    margin:0 auto;
    background:url(../img/detail_book_bg.png) no-repeat;
    z-index: 9;
}

section#linefriend .detail .detail_book [class^="book-"]{
    margin:0 auto;
    margin-top:50px;
    width:825px;
    height: 340px;
}

section#linefriend .detail .detail_book .left{
    float:left;
    width: 391px;
    height: 340px;
}

section#linefriend .detail .detail_book .book-brown [class^="detailbtn-"]{
    background:url(../img/brown_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .book-cony [class^="detailbtn-"]{
    background:url(../img/cony_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .book-sally [class^="detailbtn-"]{
    background:url(../img/sally_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .book-james [class^="detailbtn-"]{
    background:url(../img/james_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .book-moon [class^="detailbtn-"]{
    background:url(../img/moon_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .book-leonard [class^="detailbtn-"]{
    background:url(../img/leonard_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .book-jessica [class^="detailbtn-"]{
    background:url(../img/jessica_btn.png) no-repeat 0 0;
}

section#linefriend .detail .detail_book .left [class^="detailbtn-"]{
    width:126px;
    height: 152px;
    background-position: 0 0;
}

section#linefriend .detail .detail_book .left [class^="detailbtn-"]:hover{
    background-position-x: -126px;
}

section#linefriend .detail .detail_book .left [class^="detailbtn-"].on{
    background-position-x: -126px;
}

section#linefriend .detail .detail_book .left .detailbtn-1 {
    left:0;
}

section#linefriend .detail .detail_book .left .detailbtn-2 {
    margin-left:2px;
    background-position-y: -152px;
}

section#linefriend .detail .detail_book .left .detailbtn-3 {
    margin-left:2px;
    background-position-y: -304px;
}

section#linefriend .detail .detail_book .left .detailbtn-4 {
    margin-top:36px;
    left:0;
    background-position-y: -456px;
}

section#linefriend .detail .detail_book .left .detailbtn-5 {
    margin-top:36px;
    margin-left:2px;
    background-position-y: -608px;
}

section#linefriend .detail .detail_book .left .detailbtn-6 {
    margin-top:36px;
    margin-left:2px;
    background-position-y: -760px;
}

section#linefriend .detail .detail_book .right{
    float:right;
    width: 400px;
    height: 340px;
}


section#linefriend .bg.bg__event {
    background:url(../img/character-pc.jpg) no-repeat center 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}

/* notice */
section#notice {
    position: relative;
    top: 0;
    height: 500px;
    max-width: 2000px;
    margin: 0 auto;
    background:#43414e;
    display:flex;
    justify-content:center;
    align-items:center;
}

section#notice ul{
    list-style:square none outside; 
}

section#notice p{
    font-size:25px;
    color:#fff;
    margin-bottom:15px;
    margin-left:-25px;
}

section#notice li{
    font-size:20px;
    padding-bottom:15px;
    line-height:20px;
    color:#a8a7ad; 
}

/* Footer */
footer {
    padding: 30px 30px 35px;
    color: #9e9e9e;
    background-color: #3d3e41;
}

footer img[src]{opacity: 0.3;}

footer .logo{margin-right:30px;}


footer .tt{
    font-size: 14px;
    font-weight: 400;
    color: #9e9e9e;
    margin-left:15px;
}

footer .ttt {
    color: #6a6a6a;
}

/* layer popup */
/* common */
.dimmed{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:#000;filter:alpha(opacity=70);opacity:0.7;}
.ly_wrap{*zoom:1;position:fixed;top:50%;left:50%;z-index:110}
.pop_tt{position: relative;justify-content: center;display: flex;align-items: center;text-align: center;color: #8f4e36;left: -3px;letter-spacing: -1px;}
[class^="btn_pop_"]{position:absolute;text-indent:-999px;z-index: 10;}


/* 동영상 */
.ly_mov{width:900px;height:506px;margin:-200px 0 0 -455px;}
.btn_ly_close{
    position:absolute;
    right: 0;
    margin-top:-100px;
    width:69px;
    height:70px;
    background:url(../img/btn_close.png) no-repeat;
}

/*pop*/
/* 사전등록팝업 */
.ly_reservation_pop{
    position:fixed;
    top:50%;
    right:0;
    left:0;
    z-index:110
}

/*사전예약완료*/
.ly_reservation_pop.rsv_complete .ly_cont{
    position:relative;
    display: block;
    margin:0 auto;
    width: 700px;
    height: 700px;
    margin-top: -300px;
    background: url(../img/pop3.png) no-repeat center 0;
    background-size: 700px 700px;
}

.ly_reservation_pop.rsv_complete .ly_cont .pop_tt{
    font-size: 0px;
}

.ly_reservation_pop.rsv_complete .ly_cont .btn_pop_ok{
    width: 320px;
    height: 110px;
    top: 540px;
    left: 190px;
    background:none;
}

/*사전예약 이미완료*/
.ly_reservation_pop.rsv_already .ly_cont{
    position:relative;
    display: block;
    margin:0 auto;
    width: 700px;
    height: 700px;
    margin-top: -350px;
    background: url(../img/pop3.png) no-repeat center 0;
    background-size: 700px 700px;
}

.ly_reservation_pop.rsv_already .ly_cont .pop_tt{
    top: 720px;
    font-size: 32px;
    font-weight: bolder;
    line-height: 40px;
    color: #fff;
}

.ly_reservation_pop.rsv_already .ly_cont .pop_tt br{display: none;}

.ly_reservation_pop.rsv_already .ly_cont .btn_pop_ok{
    width: 320px;
    height: 110px;
    top: 540px;
    left: 190px;
    background:none;
}


.ly_reservation_pop .ly_cont{
    position:relative;
    display: block;
    margin:0 auto;
    width:604px;
    height:487px;
    margin-top:-200px;
    background: url(../img/pop1.png) no-repeat center 0;
}

.ly_reservation_pop .ly_cont .pop_tt{
    top:160px;
    font-size: 36px;
    font-weight: bolder;
    line-height: 40px;
}

.ly_reservation_pop .ly_cont .btn_pop_ok{
    width:188px;
    height:69px;
    background: url(../img/pop_ok.png) no-repeat center 0; 
    top:260px;
    left:205px;
}

.ly_reservation_pop.privacy .ly_cont{
    position:relative;
    display: block;
    margin:0 auto;
    width:454px;
    height:648px;
    margin-top:-320px;
    background: url(../img/privacy_pop.png) no-repeat center 0;
}

.ly_reservation_pop.privacy .ly_cont .pop_tt{
    top:648px;
    right:0;
    text-align: right;
    font-size: 14px;
    font-weight: bolder;
    line-height: 40px;
    color:#fff;
    background-color: #8f4e36;
}

.ly_reservation_pop.privacy .ly_cont .btn_pop_ok{
    width:188px;
    height:69px;
    background: url(../img/pop_ok.png) no-repeat center 0; 
    top:550px;
    left:130px;
}

/* 공유이벤트 팝업 */
.share_pop{
    position:fixed;
    top:50%;
    right:0;
    left:0;
    z-index:110
}

.share_pop .ly_cont .pop_tt{
    top:140px;
    font-size: 28px;
    font-weight: bold;
    line-height: 32px;
}

.share_pop .ly_cont .num_area{
    position: relative;
    margin:0 auto;
    margin-top:150px;
    width:470px;
    height:60px;
    border:2px solid #b5a191;
    border-radius: 20px;
    background-color: #fff;
}

.share_pop .ly_cont .num_area .num1{
    float: left;
    width:140px;
    height:60px;
    text-align: center;
    font-size:30px;
    color:#98522e;
    line-height:60px;
}

.share_pop .ly_cont .num_area .num2{
    float: left;
    width:320px;
    height: 56px;
    border:none;
    font-size:25px;
    text-align: center;
    color:#98522e;
    line-height: 56px;
    border-radius: 20px;
}

.share_pop .ly_cont .btn_pop_ok{
    width:188px;
    height:69px;
    background: url(../img/pop_ok.png) no-repeat center 0; 
    top:295px;
    left:205px;
}

.share_pop.go .ly_cont .pop_tt{
    top:160px;
    font-size: 28px;
    font-weight: bold;
    line-height: 32px;
}

.share_pop .ly_cont .btn_pop_go{
    width:328px;
    height:69px;
    background: url(../img/pop_go.png) no-repeat center 0; 
    top:270px;
    left:145px;
}

.share_pop.pick .ly_cont .pop_tt{
    top:110px;
    font-size: 28px;
    font-weight: bold;
    line-height: 32px;
    z-index: 110;
}

.share_pop.pick .ly_cont .btn_pop_ok{
    width:188px;
    height:69px;
    background: url(../img/pop_ok.png) no-repeat center 0; 
    top:330px;
    left:215px;
}

.share_pop .ly_cont{
    position:relative;
    display: block;
    margin:0 auto;
    width:636px;
    height:463px;
    margin-top:-200px;
    background: url(../img/effect_bg.png) no-repeat center 0;
}

.share_pop.pick .ly_cont .item_bg{
    position:relative;
    display: block;
    margin:0 auto;
    width:520px;
    height:350px;
    top:29px;
    right:5px;    
}

.share_pop.pick .ly_cont .item_bg.deco{
    background: url(../img/effect_deco.gif) no-repeat;
}

.share_pop.pick .ly_cont .item_bg.gacha{
    background: url(../img/effect_gacha.gif) no-repeat;
}

.share_pop.pick .ly_cont .item_bg.biggem{
    background: url(../img/effect_biggem.gif) no-repeat;
}

.share_pop.pick .ly_cont .item_bg.gem{
    background: url(../img/effect_gem.gif) no-repeat;
}

.share_pop.pick .ly_cont .item_bg.coin{
    background: url(../img/effect_coin.gif) no-repeat;
}

.screen_pop .ly_cont .pop_img.farm-sh1{
    width:900px;height:506px;margin:-200px 0 0 -455px;
    background: url(../img/fram-sh1.png) no-repeat center 0; 
    background-size: 900px 506px;
    z-index: 9999;
}

.screen_pop .ly_cont .pop_img.farm-sh2{
    width:900px;height:506px;margin:-200px 0 0 -455px;
    background: url(../img/fram-sh2.png) no-repeat center 0; 
    background-size: 900px 506px;
    z-index: 110;
}

.screen_pop .ly_cont .pop_img.de-sh1{
    width:900px;height:506px;margin:-200px 0 0 -455px;
    background: url(../img/de-sh1.png) no-repeat center 0; 
    background-size: 900px 506px;
    z-index: 110;
}

.screen_pop .ly_cont .pop_img.de-sh2{
    width:900px;height:506px;margin:-200px 0 0 -455px;
    background: url(../img/de-sh2.png) no-repeat center 0; 
    background-size: 900px 506px;
    z-index: 110;
}

.screen_pop .ly_cont .pop_img.deco-sh1{
    width:900px;height:506px;margin:-200px 0 0 -455px;
    background: url(../img/deco-sh1.png) no-repeat center 0; 
    background-size: 900px 506px;
    z-index: 110;
}

.screen_pop .ly_cont .pop_img.food-sh1{
    width:900px;height:506px;margin:-200px 0 0 -455px;
    background: url(../img/food-sh1.png) no-repeat center 0; 
    background-size: 900px 506px;
    z-index: 110;
}
.friends_book, .farm_book, .delivery_book, .deco_book, .food_book, .intro_dots{
	outline:none;
}