/* BASIC css start */
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 100;src: url(/images/web-font/NotoSans-Thin.woff2) format('woff2'),url(/images/web-font/NotoSans-Thin.woff) format('woff'),url(/images/web-font/NotoSans-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 300;src: url(/images/web-font/NotoSans-Light.woff2) format('woff2'),url(/images/web-font/NotoSans-Light.woff) format('woff'),url(/images/web-font/NotoSans-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 400;src: url(/images/web-font/NotoSans-Regular.woff2) format('woff2'),url(/images/web-font/NotoSans-Regular.woff) format('woff'),url(/images/web-font/NotoSans-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 500;src: url(/images/web-font/NotoSans-Medium.woff2) format('woff2'),url(/images/web-font/NotoSans-Medium.woff) format('woff'),url(/images/web-font/NotoSans-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 700;src: url(/images/web-font/NotoSans-Bold.woff2) format('woff2'),url(/images/web-font/NotoSans-Bold.woff) format('woff'),url(/images/web-font/NotoSans-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 900;src: url(/images/web-font/NotoSans-Black.woff2) format('woff2'),url(/images/web-font/NotoSans-Black.woff) format('woff'),url(/images/web-font/NotoSans-Black.otf) format('opentype');}

#R_roulette_event_wrap * { font-family: 'Noto Sans', sans-serif; }
#R_roulette_event_wrap { position: relative; max-width: 900px; margin: 0 auto; }
/* 
#R_roulette_event_wrap .R_cont-wrap { height: 892px; background: url(/images/common/img_roulette_bg.jpg) left top no-repeat; }
#R_roulette_event_wrap .R_cont-wrap .R_title { text-align: center; } 
*/
#R_roulette_event_wrap .R_cont-wrap .R_title h3 {
    padding-top: 70px; 
    font-size: 60px; color: #403b33; font-weight: 900; letter-spacing: -1px;
}
#R_roulette_event_wrap .R_cont-wrap .R_title p {
    position: relative; width: 375px; 
    margin: 0 auto; padding-top: 25px; 
    font-size: 22px; color: #534d42; font-weight: 700;
}
#R_roulette_event_wrap .R_cont-wrap .R_title p:before {
    position: absolute; left: 0; top: 38px; 
    width: 40px; border-bottom: 7px double #f49b95; 
    content: '';
}
#R_roulette_event_wrap .R_cont-wrap .R_title p:after {
    position: absolute; right: 0; top: 38px; 
    width: 40px; 
    border-bottom: 7px double #f49b95; 
    content: '';
}
#R_roulette_event_wrap .R_cont-wrap .R_roulette-wrap {
    /* width: 550px; margin: 45px auto 65px; */
    /* 250114 add */ position: relative;
}

#R_roulette_event_wrap .R_notice { display:table; width:100%; background:#f2f5f6; padding: 40px 0; }
#R_roulette_event_wrap .R_notice dt,
#R_roulette_event_wrap .R_notice dd { letter-spacing: -1px; }
#R_roulette_event_wrap .R_notice dt { 
    display: table-cell; width: 30%; 
    padding-left: 190px; 
    font-size: 20px; font-weight: 700; vertical-align: middle;
}
#R_roulette_event_wrap .R_notice dd {
    position: relative; width: 70%; 
    padding: 0 190px 0 15px; 
    line-height: 24px; font-size: 15px; color: #777;
}
#R_roulette_event_wrap .R_notice dd:before { position: absolute; left: 0; top: 0; content: '·'; }

#R_roulette_event_wrap .R_comment-wrap { padding: 80px; background: #004682; }
#R_roulette_event_wrap .R_comment-wrap .inner { width: 726px; margin: 0 auto; }
#R_roulette_event_wrap .R_comment-wrap .input-text { 
    width: 576px; height: 46px; 
    padding: 0 15px; border: 1px solid #000; border-radius: 8px; 
    font-size: 18px; color: #000; line-height: 46px; 
}
#R_roulette_event_wrap .R_comment-wrap .btn-apply {
    display: inline-block; height: 48px; 
    margin-left: 10px; padding: 0 35px; 
    background: #d9e0e6; border-radius: 8px;
    color:#004682; font-size: 20px; letter-spacing:-1px; line-height: 48px; 
}
#R_roulette_event_wrap .R_comment-wrap .comment-table-list { 
    background: #fff; border: 1px solid #000; border-radius: 8px; 
    margin-top: 15px; padding: 30px; 
    letter-spacing: -1px;
}
#R_roulette_event_wrap .R_comment-wrap .comment-table-list td { font-size: 15px; padding-bottom: 30px; color:#000; }
#R_roulette_event_wrap .R_comment-wrap .comment-table-list td .name { color: #000; }
#R_roulette_event_wrap .R_comment-wrap .comment-table-list td .date { color: #b8b8b8; }
#R_roulette_event_wrap .R_comment-wrap .comment-table-list td .content { line-height: 1.1; word-wrap: break-word; word-break: break-all; }
#R_roulette_event_wrap .R_comment-wrap .comment-table-list td .content img { display: inline-block; margin-left: 10px; }
#R_roulette_event_wrap .R_comment-wrap .comment-table-list td .benefit { color: #ef6a61; }
#R_roulette_event_wrap .R_comment-wrap .comment-table-list .no-data { text-align: center; font-size: 15px; margin: 10px auto; }
#R_roulette_event_wrap .R_comment-wrap .paging a { font-size: 12px; color: #999; border: 1px solid #ddd; }
.paging a:hover, .paging a.now, .paging .now { background-color: #004682; border: 1px solid #ddd; color: #fff !important; }
.paging { margin-top: 30px !important; }

/* 추천상품 리스트 */
#R_roulette_event_wrap .item-wrap .item-cont .item-list { 
    float: left;
    width: 16.7%;
    padding: 10px; margin: 0 13px 10px 0;
    text-align: center; 
    border:1px solid #eee;
}
#R_roulette_event_wrap .item-wrap .item-cont .item-list .thumb { width: 100%; height: 180px; overflow: hidden; }
#R_roulette_event_wrap .item-wrap .item-cont .item-list .thumb img { width: 100%; height: 100%; }

canvas#eventWheel { z-index: 1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.event-wheel-start { 
    display: none; 
    z-index: 11; 
    position: absolute; /* add */left: 50% !important; transform: translateX(-50%);
    width: 126px; height: 126px;
    background-color: #534d42; 
    font-size: 28px; font-weight: 900; color:#fff; text-align: center; line-height: 126px; 
    outline: 0; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
}
.event-wheel-pointer { z-index: 10; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
.dummy-canvas { position: relative; width: 50%; min-height: 550px; margin: 0 auto; }

/* 레이어 팝업 */
.R_pop-roulette-layer * { font-family: 'Noto Sans', sans-serif; }
.R_pop-roulette-layer {
    position: fixed; left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: rgba( 0, 0, 0, 0.7 ); 
    z-index: 999;
}
.R_pop-roulette-layer .R_pop-layer {
    position: absolute; left: 50%; top: 50%; right: 0; 
    width: 363px; min-height: 357px; 
    padding: 0 30px 30px; 
    background: #fff; 
    text-align: center; letter-spacing: -1px; 
    -webkit-transform: translate3d(-50%, -50%, 0); 
    -moz-transform: translate3d(-50%, -50%, 0); 
    transform: translate3d(-50%, -50%, 0);
}
.R_pop-roulette-layer .R_pop-layer .btn-close { position: absolute; top: 16px; right: 16px; }
.R_pop-roulette-layer .R_pop-layer .R_title { color: #000; padding: 40px 0 27px; }
.R_pop-roulette-layer .R_pop-layer .R_title span { font-size: 22px; font-weight: 500; }
.R_pop-roulette-layer .R_pop-layer .R_title p { font-size: 29px; font-weight: 900; }
.R_pop-roulette-layer .R_pop-layer .R_pop-benefit {
    margin: 0 40px; padding: 10px 0; 
    border: 2px solid #000; border-radius: 26px; 
    font-size: 22px; color: #000; font-weight: 700; font-family: "Malgun Gothic";
}
.R_pop-roulette-layer .R_pop-layer .R_txt {
    padding: 28px 0 15px; 
    font-size: 15px; font-weight: 700; color: #000; font-family: "Malgun Gothic";
}
.R_pop-roulette-layer .R_pop-layer textarea {
    width: 88%; 
    padding: 20px; 
    border: 1px solid #c0bbba; border-radius: 6px; 
    color: #000; font-family: "Malgun Gothic"; font-size: 13px; letter-spacing: -1px; 
    resize: none;
}
.R_pop-roulette-layer .R_pop-layer textarea::placeholder { color: #a1a1a1; }
.R_pop-roulette-layer .R_pop-layer .btn-write {
    display: block; 
    margin-top: 10px; padding: 17px; 
    background: #000; border-radius: 6px;
    color: #fff; font-size: 18px; font-weight: 700; font-family: "Malgun Gothic";
}

/* CUSTOM CSS */
#overlay_layer { display: none !important; }
#contentWrap { max-width: 900px; }
.event-container { background-color: #c3d6e4; }

/* tabs */
.sticky__wrap {
    position: sticky; top: 0; left: 0;
    width: 100%;
    z-index: 999;
    overflow-x: hidden;
}
.sticky__tabs {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sticky__tabs li { width: calc(100% / 3); height: 100%; flex: 1; }
.sticky__tabs .tab { 
    display: flex; align-items: center; justify-content: center; 
    width: 100%; height: 100%; 
    font-size: 1.523rem;
    text-align: center; color: #004682;
    background-color: #e1e6ea;
}
.tab.tabsel { background-color: #6ba5d5; color: #fff; }

/* 유의사항 */
.notice__wrap .notice__btn { position: relative; cursor: pointer; }
.notice__wrap .notice__btn img { margin-top: 0; }
.notice__wrap .notice__content {
    overflow: hidden;
    height: 0;
    transition: height 0.2s linear;
    z-index: -99;
}
.notice__wrap .notice__content.active { height: 100%; }

.ffw { display: none !important; }

#benefit1, 
#benefit2,
#benefit3 { background-color: #004682; }
.join-wrap { background-color: #3a3a3a; }
/* BASIC css end */