@charset "utf-8"; 

/* Reset */
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* -webkit-user-select:none; 택스트 긁힘 방지 */ 
body { width:100%; background: #fff; min-width: 320px; -webkit-text-size-adjust: none; word-wrap: break-word; word-break: keep-all; overflow-y: scroll; }
body, input, select, textarea, button { border: none; color: #141414; background: #ffffff; font-weight: 300; letter-spacing: -0.3px; font-family: 'NanumSquareNeo', 'Noto Sans KR', '돋움', 'Dotum', 'Apple SD Gothic Neo', 'Helvetica','sans-serif'; }
body, article, aside, details, figcaption, caption, figure, legend, footer, header, hgroup, main, menu, nav, section, summary { display:block; padding:0; margin:0; }
div, p, ul, li, ol, table, th, td, textarea, select, input, span, form, h1, h2, h3, h4, h5, h6, dt, dl, dd, em, sup { margin: 0; padding: 0; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: inherit; font-size: inherit; }
ul, ol, dl, dd, dt, li { list-style-type:none;}
table, tbody, tfoot, thead, tr, th, td { border-collapse: collapse; border-spacing: 0; }
form, fieldset { margin: 0; padding: 0; border: 0; }
a { color: inherit; text-decoration: inherit; }
img, fieldset { border:0; vertical-align:middle; }
address, em { font-style: normal; }
legend, caption { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
button, label { cursor: pointer; }
button { border: 0; padding: 0; cursor: pointer; background: transparent; overflow: visible; white-space: nowrap; }
button:focus { outline: none;}
optgroup { font-style:normal; font-size:0px; height:0px; line-height:0px;}

/* 본문 바로가기 */
#skip { position: absolute; left: 0; top: -50px; width: 100%; line-height: 48px; text-align: center; background: rgba(0, 0, 0, 0.5); color: #ffffff; border-bottom: 1px solid #ffffff; z-index: 100000; transition: all 0.3s; }
#skip:focus { top: 0; }

/* 숨김 */
.blind { position: absolute; overflow: hidden; left:-9999px; top: 0; width: 1px; height: 1px; font-size: 1px; line-height: 0;}

/* Form */
select, textarea, input { color: #141414; border: 1px solid #C8C8C8; font-family: inherit; background:#fff; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; box-sizing: border-box; }
select { padding: 0 2%; vertical-align:middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
select::-ms-expand { display: none; }/* IE 10, 11의 네이티브 화살표 숨기기 */
input { vertical-align: middle; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
input::placeholder{ font-weight: 300; }
input:-ms-input-placeholder { color: #C8C8C8; font-size: 14px; } /*Internet Explorer 10 이상에 적용*/
input::-moz-placeholder { color: #C8C8C8; font-size: 14px; } /*Mozilla Firefox 4 부터 18에 적용*/
input::-webkit-input-placeholder { color: #C8C8C8; font-size: 16px; font-weight: 300; } /*Webkit, Blink, Edge에 적용*/
input[type="checkbox"],input[type="radio"] { border:none; font-family:inherit; }
textarea { padding: 5px 3px; }
select:focus, textarea:focus, input:focus { border: 1px solid #C8C8C8; outline: none; } 
select option { display: inline-block; line-height: 33px;}


/* 이벤트 페이지 CSS : START */
body{box-sizing: border-box; text-align: center; font-family: "NanumSquareNeo";}
.cont_sp{position: relative; width: 100%; margin: 0 auto;}

.area01{width: 100%; height: 873px; background: #0D0F0E url(images/top_visual_mo.jpg) no-repeat 50% 100%;} 
.area01 .title_content{position: absolute; top: 240px; left: 50%; transform: translateX(-50%); text-align: left;} 
.area01 .title_content .ng_logo{display: inline-block; padding-bottom: 30px; width: 171px; height: 50px;}
.area01 .title_content .ng_logo img{width: 100%;}
.area01 .title_content .ark_logo{padding-bottom: 30px; width: 324px; height: 74px;}
.area01 .title_content .ark_logo img{width: 100%;}
.area01 .title_content .stit{width: 324px; height: 38px; text-align: right; padding: 8px 8px 5px 0; font-size: 24px; font-family: 'GmarketSans'; font-weight: 700; background: #FFD200; color: #000; box-sizing: border-box;}
.area01 .title_content .stit span:after{content: ''; display: inline-block; width: 4px; height: 30px; background: #000; margin: -3px 15px 0; vertical-align: middle;}

.area02{height: 333px; font-family: "NanumSquareNeo"; background: #0D0F0E; text-align: center; padding: 65px 0 50px}
.area02 .title{font-size: 26px; font-weight: 400; color: #fff; line-height: 35px; padding-bottom: 30px;}
.area02 .fc_yellow{display: block;}
.area02 .title strong{font-weight: 700;}

#widescroll_box { overflow:hidden; position:relative; width:100%;}
#widescroll_box .widescroll { width:2063px; /* 보여야 하는 이미지 + 클론이미지 전체 합 */ height:100%; display:flex; flex-wrap:nowrap; animation: bannermove 7s linear infinite;}

#widescroll_box .widescroll > div { flex:0 0 auto; width: 162px; height: 233px; margin: 0 10px 0 0; vertical-align:top; text-align:center; }
#widescroll_box .widescroll img { width:100%; height:100%;}
@keyframes bannermove {
   0% { transform: translate(0, 0); }
   100% { transform: translate(-50%, 0);}
}

/* 가로스크롤 아래 area04영역에만 바뀔 부분만 수정 : START */
.area04 #widescroll_box {padding: 10px 0; }
.area04 #widescroll_box .widescroll{width:2188px; /* 보여야 하는 이미지 + 클론이미지 전체 합 */ animation: bannermove 12s linear infinite;}
.area04 #widescroll_box .widescroll.reverse{animation: bannermove 12s linear infinite reverse;}
.area04 #widescroll_box .widescroll > div{width: 172px; height:246px;}
/* 가로스크롤 아래 area04영역에만 바뀔 부분만 수정 : END */


.area03{background: #121212 url(images/middle_bg.jpg) no-repeat 50% 0; text-align: center; padding: 50px 0; box-sizing: border-box;}
.area03 .stit{display: inline-block; font-size: 26px; font-weight: 400; padding-bottom: 60px; color: #fff;}
.area03 .stit em{display: block; font-size: 26px; font-weight: 400; padding-top: 40px;}
.area03 .tit{position: relative; font-size: 26px; font-weight: 300; color: #fff; line-height: 35px; margin-bottom: 280px;}
.area03 .tit p{font-weight: 700; padding-top: 18px;}
.area03 .tit p em:before{content: ''; display: inline-block; width: 3px; height: 22px; background: #FACC15; margin: -2px 10px 0; vertical-align: middle;}
.area03 .tit:after{content: ''; position: absolute; bottom: -230px; left: 50%; transform: translateX(-50%); width: 1px; height: 180px; background: #fff;}
.area03 .enter{display: block;}


.product_wrap{position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; justify-content: flex-start; width: calc(100% - 40px); border-radius: 20px; background: #fff; padding: 45px 16px 40px; box-sizing: border-box; margin: 0 20px;} 
.product_wrap .photo_cover{position: absolute; top: 155px; left: 50%; transform: translateX(-50%); width: 174px; height: 250px;}
.product_wrap .photo_cover img{width: 100%;}
.product_wrap .exp{display: inline-flex; flex-direction: column; font-size: 22px;}
.product_wrap .exp span{display: inline-block; font-size: 19px; font-weight: 800; padding-bottom: 16px; letter-spacing: -1px;}
.product_wrap .exp em{z-index: 0; position: relative; display: inline-block; font-size: 38px; font-weight: 900; color: #FBD504; padding-bottom: 310px;}
.product_wrap .exp em::before {position: absolute; left: 50%; transform: translateX(-50%); width: 250px; -webkit-text-stroke: 8px #000; z-index: -1; content: attr(data-content);}
.product_wrap .exp div{font-weight: 700; font-size: 17px; line-height: 27px; text-align: left; padding-bottom: 38px;}
.product_wrap .price_wrap{position: relative; display: inline-flex; flex-direction: column;}
.product_wrap .price_wrap .dc_arrow{position: absolute; top: 12px; right: 0; background: url(images/dc_arrow.svg) no-repeat 50%; width: 146px; height: 51px;}
.dc_change .product_wrap .price_wrap .dc_arrow{ height: 61px;}
.product_wrap .price_wrap .dc_card10000{position: absolute; top: -62px; right: -62px; background: url(images/dc_icon10000.svg) no-repeat 50%; width: 102px; height: 102px; background-size: 100%;}
.product_wrap .price_wrap .dc_card7000{position: absolute; top: -62px; right: -62px; background: url(images/dc_icon7000.svg) no-repeat 50%; width: 102px; height: 102px; background-size: 100%;}
.product_wrap .price_wrap .dc_card17000{position: absolute; top: -62px; right: -62px; background: url(images/dc_icon17000.svg) no-repeat 50%; width: 102px; height: 102px; background-size: 100%;}
.product_wrap .price_wrap .dc_card15000{position: absolute; top: -62px; right: -62px; background: url(images/dc_icon15000.svg) no-repeat 50%; width: 102px; height: 102px; background-size: 100%;}
.product_wrap .price_wrap .dc_card10000.add{background: url(images/dc_icon20000.svg) no-repeat 50%; width: 102px; height: 102px; background-size: 100%;}
.product_wrap .price_wrap .price{display: inline-flex; justify-content: space-between; align-items: baseline; width: 300px; padding: 0 30px 0 30px; box-sizing: border-box; line-height: 42px;}
.dc_change .product_wrap .price_wrap .price{line-height: 50px;}
.product_wrap .price_wrap .price .text{font-size: 20px; font-weight: 600; color: #8D8D8D;}
.dc_change .product_wrap .price_wrap .price .text.fc_red{color: #F42828; font-weight: 700; align-items: middle;}
.product_wrap .price_wrap .price .won{font-family: 'roboto';}
.product_wrap .price_wrap .regular .won{font-size: 28px; font-weight: 400;}
.product_wrap .price_wrap .discount .won{font-size: 30px; font-weight: 400;}
.product_wrap .price_wrap .delivery .won{font-size: 32px; font-weight: 800; color: #DA4545;}
.product_wrap .price_wrap .member .won{font-size: 42px; font-weight: 800;}
.product_wrap .price_wrap .price .won em{font-size: 22px; font-weight: 500; vertical-align: baseline; margin-left: 2px; color: #000;}

.product_wrap .price_wrap .btn_buy{display: inline-flex; justify-content: center; align-items: center; width: 300px; height: 70px; border-radius: 70px; background: #0D0F0E; font-size: 30px; font-weight: 700; color: #fff; margin-top: 20px;}
.product_wrap .price_wrap .btn_buy span:after{content: ''; display: inline-block; background: url(images/icon_arrow_wh.svg) no-repeat 50%; width: 15px; height: 17px; vertical-align: middle; margin: -2px 0 0 40px;}

.area04{font-family: "NanumSquareNeo"; background: #0E100F; text-align: center; padding: 90px 0;}
.area04 .title{width: 80%; font-size: 26px; font-weight: 500; color: #fff; line-height: 34px; margin: 0 auto 50px;}
.area04 .title em{display: block; font-weight: 800;}
.area04 .scopy{font-size: 18px; line-height: 28px; color: #fff; margin: 0 7% 40px;}
.area04 .scopy span{display: inline;}
.area04 .btm_copy{font-size: 22px; color: #fff; line-height: 32px; margin-top: 30px; padding: 0 5%;}
.area04 .btm_copy .fc_yellow{font-weight: 700;}
.area04 .btm_copy em{display: inline;}

.area05{background: #f0f0f0; text-align: center; padding: 50px 0;}
.area05 .news_title{height: 800px; background: url(images/news_title_all_mo.png) no-repeat 50%;}
.area05 .btm_title{margin-top: 50px; padding: 0 5%;}
.area05 .btm_title p{position: relative; font-size: 22px; font-weight: 400; letter-spacing: -1px; z-index: 2; line-height: 30px;}
.area05 .btm_title em{font-weight: 700;}

.area06{position: relative; background: #4D4946; text-align: center; padding: 60px 0 0; height: 387px; box-sizing: border-box; z-index: 2;}
.area06 .title{font-size: 26px; line-height: 34px; font-weight: 700; color: #fff; padding-bottom: 50px;}
.area06 .title span{display: block; color: #F3CE00;}
.area06 .title em:before{content: ''; display: inline-block; width: 4px; height: 24px; background: #FFD800; margin: 0 10px -5px;}
.area06 .scopy{color: #fff; font-size: 22px; font-weight: 400; padding-bottom: 18px;}
.area06 .calender_img{width: 100%; height: 268px;}
.area06 .calender_img img{width: 180px; height: 268px;}

.area07{position: relative; z-index: 1; padding: 155px 0 50px; background-color: #F0F0F0;}



.area08{background: url(images/area08_bg.jpg) 50% 0 no-repeat #141D3B; text-align: center; background-size: cover; padding: 60px 20px; box-sizing: border-box; color: #fff; box-sizing: border-box; font-family: "NanumSquareNeo";}
.area08 .title{font-size: 25px; font-weight: 700; color: #FACC15; padding-bottom: 15px;}
.area08 .subcopy{font-size: 17px; font-weight: 600; padding-bottom: 30px; line-height: 25px;}
.area08 .bodycopy{font-size: 11px; font-weight: 500; padding-bottom: 20px; line-height: 17px;}
.area08 .badge{margin: 0 auto; width: 122px; height: 159px; background: url(images/badge.png) no-repeat 50%; margin-bottom: 20px; background-size: cover;}
.area08 .mark{margin: 0 auto; width: 100%; max-width: 450px; height: 36px; background: url(images/mark.png) no-repeat 50%; background-size: 100%;}



.area10{background:#F9FAFB; padding: 60px 20px;}
.area10 .cont_sp{width: 100%; font-size: 14px; text-align: left;}
.area10 .title {font-size: 22px; font-weight: 600; margin-bottom: -20px; padding: 0 0 20px 0;}
.area10 .noticewrap {font-family: "NanumSquareNeo"; font-weight: 500; padding: 40px 15px 0; letter-spacing: -1px; color: #1d1d1d; line-height: 56px; box-sizing: border-box; }
.noticewrap .stitle {padding: 6px 0 16px 0; line-height: 24px; letter-spacing: -1px; color: #1D1D1D; font-size: 16px; font-weight: 600;}
.noticewrap ul li {padding: 0 0 0 24px; line-height: 23px; text-indent: -14px;}
.area10 ul li:before{content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #111827; margin: 0 8px 2px 0;}
.noticewrap ul li + li { margin: 8px 0 0; }
.noticewrap .btn {display: inline-block; width: 112px; height: 30px; border-radius: 8px; font-size: 14px; font-weight: 700; padding: 4px 18px 0 15px; box-sizing: border-box; margin-left: 10px; text-align: center;        text-indent: initial;}
.noticewrap .kakao{background: #FFD800;}
.noticewrap .refund{background: #E4E4E4;}
.noticewrap .kakao span::before{content: ''; display: inline-block; background: url(images/kakao_icon.svg) no-repeat 50%; width: 21px; height: 20px; margin-bottom: -6px; margin-right: 7px;}
.noticewrap .btext{padding: 10px 0 0 10px; line-height: 22px;}

.fc_red{color: #F42828;}
.fc_yellow{color: #FACC15;}