@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: 960px; margin: 0 auto;}

.area01{width: 100%; height: 813px; background: #0D0F0E url(images/top_visual_pc.jpg) no-repeat 50%;} 
.area01 .title_content{position: absolute; top: 310px; left: 0; text-align: left;} 
.area01 .title_content .ng_logo{display: inline-block; padding-bottom: 30px;}
.area01 .title_content .ark_logo{padding-bottom: 30px;}
.area01 .title_content .stit{width: 482px; height: 60px; text-align: right; padding: 12px 20px; font-size: 36px; 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: 470px; font-family: "NanumSquareNeo"; background: #0D0F0E; text-align: center; padding: 65px 0 35px}
.area02 .title{font-size: 38px; font-weight: 400; color: #fff;}
.area02 .title strong{font-weight: 700;}

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

#widescroll_box .widescroll > div { flex:0 0 auto; width: 244px; height:350px; margin: 0 20px 0 0; line-height: 386px; 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 0; }
.area04 #widescroll_box .widescroll{width:3603px; /* 보여야 하는 이미지 + 클론이미지 전체 합 */ animation: bannermove 12s linear infinite;}
.area04 #widescroll_box .widescroll.reverse{animation: bannermove 12s linear infinite reverse;}
.area04 #widescroll_box .widescroll > div{width: 280px; height:396px;}
/* 가로스크롤 아래 area04영역에만 바뀔 부분만 수정 : END */


.area03{height: 1400px; background: #121212 url(images/middle_bg.jpg) no-repeat 50% 0; text-align: center; padding: 120px 0 130px; box-sizing: border-box;}
.area03 .stit{display: inline-block; font-size: 42px; font-weight: 400; padding-bottom: 100px; color: #fff;}
.area03 .stit em{display: block; font-size: 48px; font-weight: 400; padding-top: 45px;}
.area03 .tit{position: relative; font-size: 50px; font-weight: 300; color: #fff; line-height: 85px; margin-bottom: 410px;}
.area03 .tit p{font-weight: 700;}
.area03 .tit p em:before{content: ''; display: inline-block; width: 6px; height: 38px; background: #FACC15; margin: -2px 17px 0; vertical-align: middle;}
.area03 .tit:after{content: ''; position: absolute; bottom: -320px; left: 50%; transform: translateX(-50%); width: 2px; height: 240px; background: #fff;}

.product_wrap{display: flex; justify-content: center; align-items: center; justify-content: flex-start; width: 960px; height: 330px; border-radius: 20px; background: #fff; padding: 40px; box-sizing: border-box;} 
.dc_change .product_wrap{align-items: flex-end !important;}
.product_wrap .photo_cover{display: inline-flex; width: 174px; height: 250px; margin-right: 30px;}
.product_wrap .photo_cover img{width: 100%;}
.product_wrap .exp{display: inline-flex; flex-direction: column; font-size: 22px; text-align: left;}
.product_wrap .exp span{display: inline-block; font-size: 22px; font-weight: 800; padding-bottom: 10px; letter-spacing: -1px;}
.product_wrap .exp em{z-index: 0; position: relative; display: inline-block; font-size: 50px; font-weight: 900; color: #FBD504; padding-bottom: 30px; margin-right: 64px;}
.product_wrap .exp em::before {position: absolute; left: 0; -webkit-text-stroke: 8px #000; z-index: -1; content: attr(data-content);}
.product_wrap .exp div{font-weight: 600; font-size: 22px; line-height: 32px;}
.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: -28px; right: -110px; background: url(images/dc_icon10000.svg) no-repeat 50%; width: 130px; height: 130px;}
.product_wrap .price_wrap .dc_card7000{position: absolute; top: -28px; right: -110px; background: url(images/dc_icon7000.svg) no-repeat 50%; width: 130px; height: 130px;}
.product_wrap .price_wrap .dc_card17000{position: absolute; top: -28px; right: -110px; background: url(images/dc_icon17000.svg) no-repeat 50%; width: 130px; height: 130px;}
.product_wrap .price_wrap .dc_card15000{position: absolute; top: -28px; right: -110px; background: url(images/dc_icon15000.svg) no-repeat 50%; width: 130px; height: 130px;}
.product_wrap .price_wrap .dc_card10000.add{background: url(images/dc_icon20000.svg) no-repeat 50%;}
.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: 120px 0;}
.area04 .title{font-size: 48px; font-weight: 500; color: #fff; line-height: 64px; margin-bottom: 90px;}
.area04 .title em{display: block; font-weight: 800;}
.area04 .scopy{font-size: 30px; line-height: 52px; color: #fff; margin-bottom: 80px;}
.area04 .scopy span{display: block;}
.area04 .btm_copy{font-size: 34px; color: #fff; line-height: 52px; margin-top: 100px;}
.area04 .btm_copy .fc_yellow{font-weight: 700;}
.area04 .btm_copy em{display: block;}

.area05{background: #f0f0f0; text-align: center; padding: 80px 0;}
.area05 .news_title{height: 615px; background: url(images/news_title_all.png) no-repeat 50%;}
.area05 .btm_title{margin-top: 70px;}
.area05 .btm_title p{position: relative; font-size: 40px; font-weight: 400; letter-spacing: -1px; z-index: 2;}
.area05 .btm_title span{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 790px; height: 24px; background-color: #FFD800; z-index: 1;}
.area05 .btm_title em{font-weight: 700;}

.area06{position: relative; background: #4D4946; text-align: center; padding: 120px 0 0; height: 723px; box-sizing: border-box; z-index: 2;}
.area06 .title{font-size: 48px; font-weight: 700; color: #fff; padding-bottom: 50px;}
.area06 .title span{color: #F3CE00;}
.area06 .title em:before{content: ''; display: inline-block; width: 6px; height: 38px; background: #FFD800; margin: 0 17px -5px;}
.area06 .scopy{color: #fff; font-size: 32px; font-weight: 400; padding-bottom: 80px;}
.area06 .calender_img{height: 540px;}

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

.area08{background: url(images/area08_bg.jpg) 50% 0 no-repeat #141D3B; text-align: center; background-size: cover; padding: 80px 0; color: #fff; box-sizing: border-box; font-family: "NanumSquareNeo";}
.area08 .title{font-size: 48px; font-weight: 700; color: #FACC15; padding-bottom: 15px;}
.area08 .subcopy{font-size: 32px; font-weight: 600; padding-bottom: 30px;}
.area08 .bodycopy{font-size: 20px; font-weight: 500; padding-bottom: 40px;}
.area08 .badge{margin: 0 auto; width: 232px; height: 302px; background: url(images/badge.png) no-repeat 50%; margin-bottom: 40px;}
.area08 .mark{margin: 0 auto; width: 523px; height: 36px; background: url(images/mark.png) no-repeat 50%;}


.area10{background:#F9FAFB; padding: 120px 0;}
.area10 .cont_sp{width: 955px; font-size: 16px; text-align: left;}
.area10 .title {font-size: 28px; font-weight: 600; margin-bottom: -20px; padding: 0 0 20px 0;}
.area10 ul li:before{content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #111827; margin: 0 8px 2px 0;}
.area10 .noticewrap {font-family: "NanumSquareNeo"; font-weight: 500; padding: 40px 20px 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: 20px; font-weight: 600;}
.noticewrap ul li {padding: 0 0 0 24px; line-height: 29px;}
.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: 0 18px 0 15px; box-sizing: border-box; margin-left: 10px;}
.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 30px; line-height: 35px;}

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