/* BASIC css start */
body.on {overflow:hidden;}

/* 띠배너 */
#topbanner .topSlider li.txt a {font-size:14px !important; font-family: 'Noto Sans KR', sans-serif;}

/* 상단 */
header {position:relative; z-index:12;}
.headerGnb {line-height:70px; position:relative; padding:0 70px; box-sizing:border-box; background:#fff; border-bottom: 1px solid var(--1);}
.headerGnb > div {display:inline-block; vertical-align:top;}
.headerGnb .headerLeft {}
.headerGnb .headerLeft ul {} 
.headerGnb .headerLeft ul li {display:inline-block; vertical-align:top;} 
.headerGnb .headerLeft ul li a {display:block; }
.headerGnb .headerLeft ul.depth1 > li {margin-right:50px;}
.headerGnb .headerLeft ul.depth1 > li > a {font-weight:700; font-size:1.125rem; color:var(--7); position:relative;}
.headerGnb .headerLeft ul.depth1 > li > a:after {content:''; display:inline-block; width:100%; height:2px; background:var(--6); position:absolute; bottom:0; left:0; visibility:hidden; opacity:0; transition:all .3s ease;}
.headerGnb .headerLeft ul.depth1 > li > a.active:after {visibility: visible; opacity: 1;}
.headerGnb .headerLeft ul.depth1 > li.on > a:after {visibility: visible; opacity:1;}
.headerGnb .headerLeft ul.depth2 {position: absolute; z-index: 10; left: 0; width: 100%; background: rgba(255,255,255,0.9); padding: 0 70px; visibility:hidden; opacity:0; /*transition:all .3s ease;*/ border-top:1px solid var(--1);}
.headerGnb .headerLeft ul.depth2.on {visibility: visible; opacity:1;}
.headerGnb .headerLeft ul.depth2 a {margin-right:50px; font-size:1rem; font-weight:500; position:relative;}
.headerGnb .headerLeft ul.depth2 a:after {content:''; display:inline-block; width:100%; height:2px; background:var(--6); position:absolute; bottom:0; left:0; visibility:hidden; opacity:0; transition:all .3s ease;}
.headerGnb .headerLeft ul.depth2 li.active a:after,
.headerGnb .headerLeft ul.depth2 li:hover a:after {visibility: visible; opacity:1;}
.headerGnb .logo {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); line-height:1;}
.headerGnb .logo a {display:block;}
.headerGnb .logo a img {width:163px;}
.headerGnb .headerRight {float:right; }
.headerGnb .headerRight > ul > li {display:inline-block; vertical-align:top;} 
.headerGnb .headerRight > ul > li a {display:block; }
.headerGnb .headerRight > ul > li a img {vertical-align:sub;}
.searchBtn a {display:block;}
.searchBtn a img {width:19px; vertical-align:sub;}
.headerGnb .headerRight ul li.menu_my {position:relative; padding:0 20px; margin:0 30px;}
.headerGnb .headerRight ul li.menu_my .my_inner {position:absolute; top:70px; right:-40px; width:240px; line-height:1; background:#fff; padding:20px 30px; box-sizing:border-box; border:1px solid var(--1); display:none; z-index:10;}
.headerGnb .headerRight ul li.menu_my .my_inner.on {display:block;}
.headerGnb .headerRight ul li.menu_my .my_inner .name {font-size:1.125rem; margin-bottom:27px;}
.headerGnb .headerRight ul li.menu_my .my_inner .name b {font-size:1.125rem;}
.headerGnb .headerRight ul li.menu_my .my_inner p {margin-bottom:18px;}
.headerGnb .headerRight ul li.menu_my .my_inner p a {font-size:0.875rem;}
.headerGnb .headerRight ul li.menu_my a img {width:14px;}
.headerGnb .headerRight ul li.menu_cart a {position:relative;}
.headerGnb .headerRight ul li.menu_cart a img {width:17px;}
.headerGnb .headerRight ul li.menu_cart a span {position:absolute; right:-10px; top:17px; background:var(--7); color:var(--0); width:17px; height:17px; border-radius:50%; line-height:17px; text-align:center; font-size: 0.688rem;}
.searchBtn {position:relative;}

.ham {cursor:pointer; position: relative; width:20px; height:14px; transition: all .3s; margin-right:27px; top:2px;}
.ham span {position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; transition: all .3s;}
.ham span:nth-of-type(1) {top:0px;}
.ham span:nth-of-type(2) {top: 6.5px;}
.ham span:nth-of-type(3) {bottom:0;}
.ham.active span:nth-of-type(1) {-webkit-transform: translateY (7px) rotate (-45deg); transform: translateY(7px) rotate(-45deg);}
.ham.active span:nth-of-type(2) {opacity: 0;}
.ham.active span:nth-of-type(3) {-webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); }
a.blue-color {font-weight:700 !important;}
.blue-color {color:#00A0E9 !important;}

.searchCont {position: absolute; right: 0; top: -4px; display:none;}
.searchCont input {background: #fff; border-radius: 2px; border: none; width: 350px; height:40px; position: relative; top: 4px; font-size:1rem; padding-left:37px; border-bottom:1px solid var(--7);}
.searchCont .btn_search {position: absolute; left: 5px; top: 3px;}
.searchCont .searchBox {position:relative; }
.searchCont .bestSearch {position: absolute; top: 87%; line-height: 1; background: var(--0); width: 100%; z-index: 11; padding:25px 30px; box-sizing:border-box;}
.searchCont .bestSearch p {font-size:1rem; color:var(--3); line-height:1; margin-bottom:25px;}
.searchCont .bestSearch a,
.searchCont .bestSearch a span {font-size:1rem; color:var(--7); line-height:1; margin-bottom:22px; display:block; margin-left:0 !important;}
.searchCont .bestSearch a:last-child {margin-bottom:0;}
.keywords-num {display:none !important;}
.headerGnb .headerLeft .bestSearch li {display:block;}


/* 상단 스크롤 */
header.fixed {position:fixed; width:100%; top:0;}


/* shop 메뉴 */
.shopMenu {position: absolute; left: 0; width: 100%; background: rgba(255,255,255,0.9); z-index:10; display: none;}
.shopMenu > ul {padding: 35px 70px; width:100%; margin:0 auto; font-size:0; max-height: 60vh; overflow-y: auto;}
.shopMenu > ul > li {display: inline-block; vertical-align: top; margin-right:6.5%; margin-bottom:4%;}
.shopMenu > ul li a {display:block; color:var(--7); font-size: 1rem; font-weight: 700; line-height: 1; }
.shopMenu .depth2 li a {color:var(--4); margin-bottom:18px; font-weight: 400; font-size:0.875rem;}
.shopMenu .depth2 li a:first-child {margin-top:24px;}
.shopMenu .depth2 li a:hover {color:var(--7);}


/* aside */
aside {width:80%; height: calc(100vh - 70px); position: absolute; z-index: 10; background: #fff; left:-100vw; opacity:0; visibility:hidden; transition:all .4s ease;}
aside.on {left:0; opacity:1; visibility:visible;}
aside .inner {}
aside .inner > ul {height:55vh; padding-bottom:50px; overflow-y: auto;}
aside .inner > ul > li {line-height:60px; position:relative;}
aside .inner > ul > li > a {display:block; font-size:1rem; color:var(--7); font-weight:700; border-top: 1px solid var(--1); padding:0 50px 0 20px; box-sizing:border-box;}
aside .inner > ul > li:first-child > a {border-top: none;}
aside .inner > ul > li:last-child > a {border-bottom: 1px solid var(--1);}
aside .inner > ul > li .shopArrow {position:absolute; width:50px; height:30px; background:url(/design/helinox/h_renewal/img/icon/ico_arrow.svg)no-repeat center; background-size:9px auto; right:0; top:16px;}
aside .inner > ul > li .ico {position:absolute; width:50px; height:30px; background:url(/design/helinox/h_renewal/img/icon/ico_plus.svg)no-repeat center; background-size:10px auto; right:2px; top:17px;}
aside .inner > ul > li .ico.on {width:50px; height:30px; background:url(/design/helinox/h_renewal/img/icon/ico_minus.svg)no-repeat center; background-size:10px auto; right:2px; top:17px;}
aside .inner > ul > li .ico.black {background:url(/design/helinox/h_renewal/img/icon/ico_arrow.svg)no-repeat center; background-size:9px auto;}
aside .inner > ul > li .ico.black.on {background:url(/design/helinox/h_renewal/img/icon/ico_arrow.svg)no-repeat center; background-size:9px auto; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
aside .inner > ul > li ul {display:none; padding:10px 0 0 20px;}
aside .inner > ul > li ul > li {line-height: 1;}
aside .inner > ul > li ul > li > a {font-size: 0.906rem; line-height: 1; margin-bottom:30px; color:var(--4); display:block; font-weight:500;}
aside .inner > ul > li ul > li > a.black {color:var(--7);}

.sideBottom {position: absolute; left: 0; bottom: 0; padding: 5px 0 19px 10px; background:#fff; width:100%; }
.sideBottom h2 {font-size: 1.25rem; font-weight: 700; display:block; margin-bottom:20px;}
.sideBottom h2 br {display:block;}
.sideBottom ul {display:flex;}
.sideBottom ul li {}
.sideBottom ul li a {display:block; width:130px; line-height:40px; background:var(--7); color:#fff; border:1px solid var(--7); border-radius:1px; text-align:center; font-size: 0.906rem;}
.sideBottom ul li:last-child a {background:#fff; color:var(--7); margin-left:10px;}
.sideBottom .copyTxt {color:var(--2); font-size:0.625rem; font-weight:500; margin-top:15px}


/* 사이드 Shop */
.sideShop {width:80%; height: calc(100vh - 80px); position: absolute; z-index: 11; background: #fff; /*box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.17), inset 0px 4px 4px -2px rgba(0, 0, 0, 0.17);*/ left:-100vw; opacity:0; visibility:hidden; transition:all .4s ease; overflow-y:scroll;}
.sideShop.on {left:0; opacity:1; visibility:visible;}
.sideShop > ul > li {line-height:40px; position:relative;}
.sideShop > ul > li > a {display:block; font-size:0.906rem; color:var(--4); font-weight:500; padding:0 50px 0 28px; box-sizing:border-box;}
.sideShop > ul > li > a span {font-size:0.75rem; font-weight:500;}
.sideShop > ul > li > a.shop {font-size:1rem; font-weight:700; color: var(--7);}
.sideShop > ul > li:first-child > a {border-top: none;}
.sideShop > ul > li.shopBack {text-indent:10px; border-bottom:1px solid var(--1); line-height:54px; margin-bottom:10px;}
.sideShop > ul > li.shopBack:before {content:''; display:inline-block; width:8px; height:14px; background:url(/design/helinox/h_renewal/img/icon/back_arrow.svg)no-repeat center; background-size:cover; position:absolute; left:19px; top:22px; }
.sideShop > ul > li .ico {position:absolute; width:50px; height:30px; background:url(/design/helinox/h_renewal/img/icon/ico_arrow.svg)no-repeat center; background-size:7px auto; right:0; top:8px;}
.sideShop > ul > li .ico.on {width:50px; height:30px; background:url(/design/helinox/h_renewal/img/icon/ico_arrow.svg)no-repeat center; background-size:7px auto; right:0; top:8px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
.sideShop > ul > li ul {display:none; padding:15px 0 0px 40px;}
.sideShop > ul > li ul > li {line-height: 1;}
.sideShop > ul > li ul > li > a {font-size: 0.906rem; line-height: 1; margin-bottom:25px; color:var(--3); display:block;}
.sideShop .shopBack a {color:var(--3); }
.sideShop .shopBack a span {border-bottom:1px solid var(--3);}


/* info Tab */
.infoTab {position:fixed; right:25px; bottom:25px; display:inline-block; z-index:9; }
.infoTab img {cursor:pointer; border:1px solid rgba(255,255,255,0.4); border-radius: 50%; width:40px;}
.infoTab ul {box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); border-radius: 2px; padding:14px 0; background:#fff; position: absolute; right: 70px; bottom:0; width: 150px; text-align:center; display:none;}
.infoTab ul li {line-height:2.1;}
.infoTab ul li h3 {display:block; color:var(--7); font-weight:bold; font-size:0.813rem; padding-bottom: 3px;}
.infoTab ul li a {display:block; color:var(--4); font-weight:400; font-size:0.813rem;}


/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.search-auto-complete-list ul li { text-align:center; margin: 3px; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:0.688rem; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span {}
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:0.688rem; }


/* 다찾다 검색 파인더 - 레이어 */
#allfinder-ctr { z-index: 100; position: fixed; right:0; bottom:50%; }
#allfinder-ctr a { display:block; width:77px; height:64px; background:url('/images/common/allfinder_ctrl_mo.png') no-repeat 0 0; background-size:100% 100%; border:none; outline:none; font-size:0; }

.all-finder-layer { z-index:200; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow-y:auto; }
.all-finder-layer .finder-hd { z-index:1; position:fixed; top:0; left:0; width:100%; height:60px; border-bottom:1px solid #e7e7e7; background:#fff; }
.all-finder-layer .finder-hd .fa-close { position:absolute; top:17px; right:10px; font-size:1.625rem; color:#000; }
.all-finder-layer .finder-hd .finder-tit { height:60px; line-height:60px; padding:0 10px; font-size:1rem; font-weight:bold; color:#000; letter-spacing:-2px; }
.all-finder-layer .finder-search { position:relative; margin:0 10px 20px; border:2px solid #000; border-radius:3px; }
.all-finder-layer .finder-search .fa-search { display: inline-block; width: 40px; height: 42px; line-height: 42px; text-align: center; font-size: 1.125rem; }
.all-finder-layer .finder-search .txt-input { width:85%; height:42px; line-height:42px; margin:0; padding:0; font-size:0.875rem; outline:none; border:none; color: #000; vertical-align:top; letter-spacing:-1px; }
.all-finder-layer .finder-search .txt-input::-webkit-input-placeholder { color:#b1b1b1; }
.all-finder-layer .finder-search dd { background:#FFF; }
.all-finder-layer .finder-opt { padding:60px 0 55px; color:#000; }
.all-finder-layer .finder-opt dl dt { position:relative; height:53px; line-height:53px; padding:0 10px; border-top:1px solid #e7e7e7; font-size:0.875rem; font-weight:bold; color:#000; letter-spacing:-1px; }
.all-finder-layer .finder-opt dl dt .fa { position:absolute; top:50%; right:10px; margin-top:-13px; font-size:1.563rem; color:#b2b2b2; }
.all-finder-layer .finder-opt dl dt > .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:20px; margin-top:0; border:1px solid #cecece; border-radius:20px; color:#666; font-size:0.688rem; background:#fff; text-align:center; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer { display:none; position:absolute; top:43px; left:10px; width:70%; padding:0 15px 11px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1 }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:10px; right:14px; margin:0; font-size:1.188rem; color:#000; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-tit { padding:13px 0; border-bottom:1px solid #e5e5e5; font-size:0.875rem; font-weight:bold; line-height:14px; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-cnt { padding-top:13px; line-height:1.5; font-size:0.813rem; }
.all-finder-layer .finder-opt dl dd { display:none; padding:10px 5px 0; border-top:1px solid #e7e7e7; background:#f4f4f4; font-size:0; }
.all-finder-layer .finder-opt dl dd label { display:inline-block; width:33.3333%; text-align:center; line-height:18px;}
.all-finder-layer .finder-opt .finder-color label { width:12.5%; }
.all-finder-layer .finder-opt .finder-price .finder-price-input { padding:0 5px 10px; text-align:right; font-size:0.75; }
.all-finder-layer .finder-opt .finder-price .finder-price-input:after { clear: both; content: ""; display: block; }
.all-finder-layer .finder-opt .finder-price .finder-price-input span { float:left; display:inline-block; height:34px; line-height:34px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label { display: inline-block; width: 33%; padding: 0 8px; border: 1px solid #ccc; border-radius:3px; color: #666; background:#fff; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label .txt-input { display: inline-block; width: 84%; height: 32px; line-height: 32px; padding: 0; border: none; background: none; color: #000; outline:none; text-align:right; }
.all-finder-layer .finder-opt .finder-child-category { padding:0; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category { padding:15px; margin-bottom:9px; border-bottom:1px solid #e7e7e7; font-size:0.875rem; font-weight:bold; color:#9a9a9a; background:#fff; word-break:break-all; letter-spacing:-1px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .pd-2px { padding:0 2px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fc-black { color:#000; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fa { margin-left:2px; color:#000; }
.all-finder-layer .finder-btn-c { z-index:1; position:fixed; bottom:0; left:0; width:100%; height:55px; text-align: center; font-size:0; }
.all-finder-layer .finder-btn-c a.reset { display: inline-block; width: 30%; height: 55px; line-height: 55px; background: #999; color: #fff; font-size: 1rem; font-weight: bold; letter-spacing: 1px; border:none; }
.all-finder-layer .finder-btn-c button { display: inline-block; width: 70%; height: 55px; line-height: 55px; background: #000; color: #fff; font-size: 1rem; font-weight: bold; letter-spacing: -0.5px; border:none; }
.all-finder-layer .finder-btn-c button span.fa-search { margin-right:5px; margin-top:-2px; vertical-align:middle; font-size:0.750em; }
.all-finder-layer .finder-btn-c button span.finder-count { display:inline-block; color:#ffd800; font-size:1.125rem; vertical-align:middle; }

.all-finder-layer .finder-opt .finder-options { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:80%; height:22px; padding: 5px 5%; line-height:22px; border: 1px solid #ccc; word-break:break-all; border-radius: 20px; background:#fff; color:#000; text-align:center; font-size:0.75rem; }
.all-finder-layer .finder-opt .finder-options.on { font-weight: bold; border: 1px solid #000; box-shadow:2px 2px 3px #d2d2d2; }
.all-finder-layer .finder-opt .finder-option-color em { display: inline-block; width: 33px; height: 33px; border-radius:20px; font-size:0; vertical-align:middle; }
.all-finder-layer .finder-opt .finder-option-color.color-picker { width:33px; height:33px; padding: 0; border: none; } 
.all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check { display:none; width:33px; height:33px; margin-top:-25px; color:#fff; text-align:center; font-size:1rem; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on .fa-check { display:block; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; }

.finder-option-color.finder-option-color-black em { background-color: #000; }
.finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; }
.finder-option-color.finder-option-color-gray em { background-color: #808080; }
.finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; }
.finder-option-color.finder-option-color-brown em { background-color: #aa6810; }
.finder-option-color.finder-option-color-navy em { background-color: #425583; }
.finder-option-color.finder-option-color-blue em { background-color: #0000ff; }
.finder-option-color.finder-option-color-light-blue em { background-color: #62acff; }
.finder-option-color.finder-option-color-red em { background-color: #ff0000; }
.finder-option-color.finder-option-color-orange em { background-color: #ffa500; }
.finder-option-color.finder-option-color-yellow em { background-color: #ffff00; }
.finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; }
.finder-option-color.finder-option-color-purple em { background-color: #800080; }
.finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; }
.finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; }
.finder-option-color.finder-option-color-green em { background-color: #008000; }
.finder-option-color.finder-option-color-light-green em { background-color: #72dd95; }
.finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; }
.finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; }
.finder-option-color.finder-option-color-apricot em { background-color: #fbceb1;  }

.all-finder-layer .search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.all-finder-layer .search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.all-finder-layer .search-auto-complete-list ul li { text-align:center; margin: 3px; }
.all-finder-layer .search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.all-finder-layer .search-auto-complete-list ul li a strong { color:#ab3e41; }
.all-finder-layer .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.all-finder-layer .search-auto-complete-list ul li a:hover span {}
.all-finder-layer .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:0.688rem; }


/* dim */
.dim,
.story-dim,
.sc-dim,
.ham-dim {position:fixed; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,.7); z-index:9; display:none;}


/* story tab */
.story_tab {padding:0 15px; border-bottom:1px solid var(--1); background:#fff; display:none;}
.story_tab ul {display:flex; text-align: center; width: 100%;}
.story_tab ul li {flex:1;}
.story_tab ul li a {line-height:45px; display:inline-block; padding:0 5px; font-weight:500; white-space:nowrap; font-size:0.875rem;}
.story_tab ul li a.on {border-bottom: 2px solid var(--7); margin-bottom: -1px;}


/* 메인 팝업 */
#MAKESHOPLY0 {position: fixed !important; background: rgba(0, 0, 0, 0.7) !important; top: 0px !important; left: 0px !important; width: 100% !important ; height: 100%!important ; z-index: 1000!important ; margin:0 !important;}
.event_inner {width:auto !important; height:auto !important; display:inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
#popup-event.type-01 { font-family: 'Malgun Gothic'; font-size: 12px; color: #000; background: #fff; letter-spacing: -1px;}
#popup-event.type-01 dt { text-align: center; }
#popup-event.type-01 dt p { display: block;  padding: 10px 5px 12px; word-break: break-all; }
#popup-event.type-01 dt .swiper { width: 100%; height: 100%; }
#popup-event.type-01 dt .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
#popup-event.type-01 dt .popevt-pagination { top: 0px; right: 0px; left: auto; bottom: auto; width: auto; height: 20px; line-height: 18px; padding: 0 8px; border-radius: 10px; color: #9e9c9d; }
#popup-event.type-01 dt .popevt-pagination .swiper-pagination-current { font-weight: bold; }
#popup-event.type-01 dt img { max-width:100%; }
#popup-event.type-01 dt img#pop_img { max-width: 100%; }
#popup-event.type-01 dd { line-height: 23px; position: relative; overflow: hidden; zoom: 1; display: flex; }
#popup-event.type-01 dd a { width: 50%; padding: 12px 0 14px; text-align: center; color: #000; font-weight: bold; font-size: 13px; }
#popup-event.type-01 dd a:first-child { color: #808080; font-weight: normal; }

#popup-event .swiper.popevtSwiper { overflow:hidden;}
#popup-event .swiper-pagination { position: relative; left: 0; text-align: center; width: 100%; }
#popup-event .swiper-pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px; background: url(/images/d3/m_01/bull/event_now@2x.gif) no-repeat 0 50%; background-size: 19px 7px; width: 10px; height: 10px; }
#popup-event .swiper-pagination .swiper-active-switch { background-position: -12px 50%; }

#popup-event .swiper.popevtSwiper .swiper-img-init { position: absolute; transform: translate3d(-100%, -100%, 0px); }
#popup-event .swiper.popevtSwiper .swiper-img-init.swiper-slide-duplicate + .swiper-img-init:not(:first-child) { position: relative; transform: none; }


body #popup-event {}
body #popup-event dl {position:relative; padding-top:55px;}
body #popup-event.type-01 dt {}
body #popup-event.type-01 dt p {padding:0;}
body #popup-event.type-01 dd {position:static; flex:inherit; text-align: center; display:block;}
body #popup-event.type-01 dd a {width:auto;}
body #popup-event.type-01 dd a:first-child {padding:30px 0 34px; color:var(--3); display: inline-block; font-size:0.875rem;}
body #popup-event.type-01 dd a:last-child {position: absolute; right: 18px; top: 19px; font-size:0;}
body #popup-event.type-01 dd a:last-child:before {content:''; background:url('/design/helinox/h_renewal/img/icon/pc_pop_close.png')no-repeat center; width:29px; height:29px; background-size:29px auto; display: inline-block; vertical-align: middle;}

input[type="checkbox"] {width: 14px; height: 14px; background: url(/design/helinox/h_renewal/img/icon/radio_off.svg) transparent no-repeat center / 14px 14px !important; margin: 0 5px 0 0;}
input[type="checkbox"]:checked {width: 14px; height: 14px; background: url(/design/helinox/h_renewal/img/icon/radio_on.svg) transparent no-repeat center / 14px 14px !important; margin: 0 5px 0 0;}


@media (max-width:1024px) {
    body .event_inner {width:100% !important; height:100% !important; max-width:700px;}
    body .event_inner > div {position: absolute; bottom: 0; width: 100% !important; max-width: inherit !important;}
    body #popup-event {border-top-left-radius: 15px; border-top-right-radius: 15px;}
    body #popup-event dl {padding:35px 0 0;}
    body #popup-event.type-01 dd {display:flex; position:relative; padding:0 20px; line-height:50px;}
    body #popup-event.type-01 dd a:first-child {font-size:0.688rem; padding:0;}
    body #popup-event.type-01 dd a:last-child {font-size:0.688rem; color:var(--3); top:-20px; right:20px;}
    body #popup-event.type-01 dd a:last-child:before {width: 19px; height: 19px; margin-right: 5px; background-size: cover;}
    body #popup-event.type-01 dt img#pop_img {margin-bottom:20px;}
}


/******************************* 반응형 *******************************/

/* tablet */
@media (max-width:1440px) {
    .headerGnb .headerLeft ul.depth1 > li {margin-right:3.5vw;}
    .searchCont input {width:200px;}
}

@media (max-width:1024px) {
    .mo {display:inline-block;}
    .pc {display:none !important;}

    .shopMenu > ul > li {width:25%; margin-bottom:10px;}
    
    .headerTop a {line-height:25px; font-size:0.625rem;}
    .headerGnb {padding:0 20px;}
    .headerGnb .logo a img {width:120px}
    .headerGnb .headerLeft ul.depth1 > li > a {font-size:1rem;}
    .headerGnb .headerRight ul li {margin-left: 30px;}
    .headerGnb .headerRight ul li.searchBtn {position: absolute; left: 40px;}
    .headerGnb .headerRight ul li.menu_my {padding:0; margin:0;}
    .headerGnb .headerRight ul li.menu_my a img {width:auto; height:20px;}
    .headerGnb .headerRight ul li.menu_cart a img {width:auto; height:20px;}
    .headerGnb .headerRight ul li.menu_my .my_inner {width:150px; padding: 14px 20px;}
    .headerGnb .headerRight ul li.menu_my .my_inner .name {margin-bottom:14px; font-size:0.875rem;}
    .headerGnb .headerRight ul li.menu_my .my_inner .name b {font-size:0.875rem;}
    .headerGnb .headerRight ul li.menu_my .my_inner p {margin-bottom:13px;}
    .headerGnb .headerRight ul li.menu_my .my_inner p a {font-size:0.75rem;}
    .searchBtn img {width:auto; height:17px;}
    .searchBtn > a > img {position:relative;}
    
    .searchCont {position:fixed; background: #fff; width: 100%; right:auto; left:0; top:0; z-index:11;}
    .searchCont .searchBox {padding:15px 20px; line-height:1;}
    .searchCont input {width:100%; height:40px; line-height:40px; font-size:0.813rem; padding-left:34px; top:0;}
    .searchCont .btn_search {top:0; right:auto; left:25px;}
    .searchCont .bestSearch {padding:10px 20px 33px; position:static;}
    .searchCont .bestSearch p {font-size:0.813rem; }
    .searchCont .bestSearch a,
    .searchCont .bestSearch a span {font-size:0.813rem; margin-bottom:21px;}
    
    .infoTab {right:20px; bottom:20px;}
    .infoTab ul li h3,
    .infoTab ul li a {font-size:0.75rem;}
    .infoTab ul {padding:12px 0; right: 50px;}
    
    .story_tab ul li:nth-of-type(1) {flex-grow: 0.6;}
    .story_tab ul li:nth-of-type(2) {flex-grow: 0.8;}
    .story_tab ul li:nth-of-type(3) {flex-grow: 1;}
    .story_tab ul li:nth-of-type(4) {flex-grow: 0.9;}
    .story_tab ul li:nth-of-type(5) {flex-grow: 0.6;}
    .story_tab ul li a {font-size:0.75rem; line-height:41px;}
}


/* mobile */
@media (max-width:768px) {
    .tablet {display:none !important;}
}

@media (max-width:375px) {
    .ham {margin-right:15px;}
    .headerGnb .headerRight ul li {margin-left:15px;}
}

/* safari */
@supports (-webkit-touch-callout: none) {
  header .sideShop {padding-bottom:130px;}
  header.fixed .sideShop {padding-bottom:100px;}
  header .sideBottom {bottom:13%;}
  header.fixed .sideBottom {bottom:10%;}
}
/* BASIC css end */