@charset "utf-8";
/* CSS Document */
.box0{ padding:0 var(--pagePD); box-sizing:border-box}
.box1{ box-sizing:border-box; width:1400px; margin:0 auto}
.box2{ width:1200px; margin:0 auto}

html:not(.isMobile){ overflow-x:auto; min-width:1400px}
html:not(.isMobile) body{ overflow:hidden}
html:not(.isMobile) .box0,
html:not(.isMobile) .box1{ min-width:1400px; padding:0 var(--pagePD); box-sizing:border-box}
html:not(.isMobile) .box2{ min-width:1200px; padding:0 var(--pagePD); box-sizing:border-box}
html:not(.isMobile) #header .box0{ min-width:inherit}
@media screen and (max-width:1400px){
html:not(.isMobile) #header .top_wrap .logo{ position:relative; left:0; transform:none; margin:0 auto}
}
.gnb li.m_hide{ display:none}
body:not(.pop){ display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); background:var(--siteBg)}

.hideT {display: none;}
.PHONE {display: none;}
.visual_pc {display: block;}
.visual_mo {display: none;}

/**/
#header{ position: fixed; left:0; top:0; width:100%; z-index:1000; background:rgba(255,255,255,.5); backdrop-filter:blur(1em); transition:background .3s}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:var(--headerH)}
.headerT{ padding-top:var(--headerH)}
#header .top_wrap .wrapF{ display:flex; align-items:center; gap:0 .5em}
#header .top_wrap .wrapF > *{ position:relative; z-index:2}
#header .top_wrap .logo{ height:var(--headerH); position:absolute; left:50%; top:0; transform:translate(-50%, 0); display:flex; align-items:center}
#header .top_wrap .logo > a{ height:1.75em; display:block; overflow:hidden}
#header .top_wrap .logo > a .in{ display:block; height:100%; transition:.5s}
#header .top_wrap .logo > a img{ height:100%; display:block}
#header .top_wrap .etc_wrap{ display:flex; align-items:center; gap:2vmin; margin-left:auto}
#header .top_wrap .etc_wrap .link{ display:flex; gap:2em;}
#header .top_wrap .etc_wrap .link > li > a{ display:flex; align-items:center; justify-content:center; opacity:.7; font-family:var(--ff2)}
#header .top_wrap .etc_wrap .link > li > a .ico{ width:3em; height:3em; display:flex; align-items:center; justify-content:center; border-radius:1em; height:55%}
#header .top_wrap .etc_wrap .link > li > a .t1{}
#header .top_wrap .etc_wrap .link > li > a .no{ margin-left:.5em; width:1em; line-height:1; height:1em; border-radius:.25em; background:#111; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; border:1px solid transparent}
#header .top_wrap .all_wrap .allBtn{ width:2em; height:2em; display:flex; align-items:center; justify-content:center; transform:translateX(-.125em)}
#header .top_wrap .all_wrap .allBtn .ico{ font-size:1.75em}
#header .top_wrap .all_wrap .allBtn .ico:before{content:"\e91c"}
#header .top_wrap .gnb_wrap{ display:none}

#header .searchInc .wrapIn{ position: fixed; left:0; top:0; width:100%; padding:1.5em; z-index:1; background:var(--siteBg); visibility:hidden; opacity:0; transform:translateY(-100%); box-sizing:border-box; transition:transform .5s;}
#header .searchInc .wrapIn .closeBtn{ width:5em; height:5em; display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:0}
#header .searchInc .wrapIn .closeBtn .xi{ font-size:2em}
#header .searchInc .wrapF{ display:flex; flex-direction:column; gap:.5em}
#header .searchInc .tit{ font-family:var(--ff1); font-weight:500; font-size:1.75em; text-align:center}
#header .searchInc .formW{ --searchIncInpH : 4vmin; position:relative; display:flex; align-items:flex-end}
#header .searchInc .formW .inp{ border:none; background:none; width:50vmin; border-bottom:2px solid #111; font-size:1.5em; font-family:var(--ff2); box-sizing:border-box; height:var(--searchIncInpH)}
#header .searchInc .formW .btn{ width:var(--searchIncInpH); height:var(--searchIncInpH); box-sizing:border-box; background:#111; border:none; color:#fff; border-radius:50%; margin-left:calc(var(--searchIncInpH) / 2 * -1)}
.searchOn#header .searchInc .wrapIn{ visibility:visible; opacity:1; transform:translateY(0); box-shadow:0 1em 10vmin rgba(0,0,0,.2); color:#111}
.searchOn#header ~ #contents .visualSlide_wrap{ z-index:-1}

html:not(.allOn):not(.scroll) body.main #header{ background:none; color:#fff; backdrop-filter:none}
html:not(.allOn):not(.scroll) body.main #header .top_wrap .logo,
html:not(.allOn):not(.scroll) body.main #header .top_wrap .etc_wrap .link > li > a .ico{ filter:brightness(0) invert(1)}
html:not(.allOn):not(.scroll) body.main #header .top_wrap .etc_wrap .link > li > a .no{ background:none; color:#fff; border-color:rgba(255,255,255,.5)}
html:not(.allOn):not(.scroll) body.main #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ background:rgba(255,255,255,.2)}

.allOn{ overflow-y:hidden}
.allOn #header{ height:100vh; background:rgba(255,255,255,.5); backdrop-filter:blur(1em); overflow-y:scroll; scrollbar-width: thin; scrollbar-color: black transparent}
.allOn #header .top_wrap{ height:100%}
.allOn #header .top_wrap .wrapF{ flex-wrap:wrap; height:100%; align-items:flex-start; position:relative; box-sizing:border-box}
.allOn #header .top_wrap .all_wrap .allBtn .ico:before{content:"\e921"}
.allOn #header .top_wrap .allBtn,
.allOn #header .top_wrap .etc_wrap{ height:var(--headerH)}

.allOn #header .top_wrap .gnb_wrap{ display:flex; justify-content:center; flex:1; height:calc(100% - var(--headerH)); min-width:100%; box-sizing:border-box; padding-bottom:calc(var(--headerH) * 2); position:relative}
.allOn #header .top_wrap .gnb_wrap .wrapIn{ height:100%; display:flex; align-items:center; }
.allOn #header .top_wrap .gnb_wrap .gnb{ max-height:100%; flex-direction:column}
.allOn #header .top_wrap .gnb_wrap .gnb li{ position:relative}
.allOn #header .top_wrap .gnb_wrap .gnb li .layer{ display:none}
.allOn #header .top_wrap .gnb_wrap .gnb li a{ text-align:left; padding:1em}
.allOn #header .top_wrap .gnb_wrap .gnb li a .va{ position:relative}
.allOn #header .top_wrap .gnb_wrap .gnb li a .tt{ font-family:var(--ff2)}
.allOn #header .top_wrap .gnb_wrap .gnb > li:not(.m_hide){ display:flex; gap:2em; align-items:center}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp1{ width:14em}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp1 .va .tt{ text-transform:uppercase; font-size:1.5em}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ content:"\e93f"; font-family:xeicon; margin-left:1em; transition:.3s; opacity:0}
.allOn #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after{ opacity:1; margin-left:2em}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2{ flex:1; min-width:0; gap:2em}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ opacity:.6}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .va:before{ content:""; position:absolute; left:0; top:100%; width:0; height:1px; background:rgba(0,0,0,.3); transition:.3s}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li:hover > a .va:before{ width:100%}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1.25em}
/*
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li.more > a .va:after{ content:"\e941"; font-family:xeicon; margin-left:.5em; transition:.3s; display:inline-block}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li.more.sOn > a .va:after{ transform:rotate(180deg)}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li.more .layer{ display:block; position:absolute; left:0; top:0; width:100%; height:100%}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li .dp3{ position:absolute; left:0; top:100%; width:22em; border-radius:.5em; background:rgba(0,0,0,.7); flex-wrap:wrap; color:#fff; z-index:1; box-sizing:border-box; padding:1em; visibility:hidden; opacity:0; transition:.3s}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li.sOn .dp3{ visibility:visible; opacity:1}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li .dp3 > li{ width:50%}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li .dp3 > li > a{ padding:.5em; opacity:.7; transition:.3s}
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li .dp3 > li:hover > a{ opacity:1}
*/
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li .dp3 { display:none}
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_customer .dp2 > li > a .tt{ font-size:1.125em}
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_guide{ display:block; position:absolute; right:0; bottom:1em}
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_guide .dp1{ display:none}
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_guide .dp2{ justify-content:center}
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_guide .dp2 > li > a .tt{ font-size:.938em}

#footer{ z-index:1; padding:4em 0 0 0; background:rgba(0,0,0,.05)}
.main #footer{ margin-top:12vmin}
#footer .wrapF{ display:flex; flex-direction:column; gap:3em}
#footer .logo_wrap{ display:flex; align-items:center; gap:5em}
#footer .logo_wrap .menu{ flex:1; min-width:0}
#footer .logo img{ height:1.5em}
#footer .menu{ display:flex; gap:3em}
#footer .menu > li > a{ display:block; position:relative; opacity:.7; font-size:.938em}
#footer .menu > li.point > a{ opacity:1; font-weight:700}
#footer .info_wrap{ display:flex; gap:4em; flex:1; min-width:0; padding-bottom:1.5em}
#footer .info{ overflow:hidden}
#footer .info > li{ float:left; margin-right:2em; margin-bottom:.375em; opacity:.7; position:relative; font-size:.875em}
#footer .info > li:before{ content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px;}
#footer .info > li.point{ font-weight:700}
#footer .info > li.br{ clear:left}
#footer .info > li.copyright{ font-size:.813em; opacity:.6; margin-top:.5em; text-transform:uppercase}
#footer .info > li.btn .ico{ font-size:1em; transition:.3s}
#footer .info.on > li.btn .ico{ transform:rotate(180deg)}
#footer .info:not(.on) > li.hd{ display:none}
#footer .cs_wrap{ margin-left:auto; display:flex; gap:0 4em}
#footer .cs_wrap .in{ position:relative; display:flex; flex-direction:column; gap:.75em; padding:0 1em}
#footer .cs_wrap .in:not(:first-child):after{ content:""; position:absolute; left:-2em; top:0; width:1px; height:100%}
#footer .cs_wrap .tit .t1{ font-weight:500; font-family:var(--ff1); font-size:1.25em}
#footer .cs_wrap .con{ display:flex; flex-direction:column; gap:.25em;}
#footer .cs_wrap .con .t1{ font-size:1.188em; letter-spacing:-.05em}
#footer .cs_wrap .con .t2{ font-size:.813em; color:#666}
#footer .copy_wrap{ border-top:1px solid rgba(0,0,0,.1); padding:1.5em 0}
#footer .copy_wrap .copyright{ font-size:.938em; font-family:var(--ff1); opacity:.8; font-weight:500}

.sns_st{ display:flex; gap:1em}
.sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; border-radius:50%; transition:.3s; border:1px solid rgba(255,255,255,.2); opacity:.4}
.sns_st > li > a .xi{ font-size:1.375em}
.sns_st > li > a img{ height:1em}
.sns_st > li > a:hover{ opacity:1}
.sns_st > li > a:hover img{ filter:brightness(0) invert(1)}
.sns_st > li > a.kc img{ height:1.438em}

.quick{ position:fixed; right:30px; bottom:30px; opacity:0; transform:translateY(30px); z-index:10000}
.scroll .quick{ transform:translateY(0); opacity:1; transition:.5s}
.quick .link{ display:flex; flex-direction:column; gap:4px}
.quick .btnSt{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.8); color:#fff; border:none; border-radius:24px}
.quick .btnSt .ico{ font-size:24px}

#contents{ flex:1 1 0%; min-height:0}
.sub #contents{ padding-top:calc(var(--headerH0) + var(--headerH))}

#contents .sub_nav_st{ display:flex; justify-content:center; align-items:center; gap:.5em}
#contents .sub_nav_st > li{ color:#666; font-size:.938em; display:flex; gap: inherit; align-items:center}
#contents .sub_nav_st > li:before{ content:""; display:block; width:1.25em; height:1px; background:#ccc}
#contents .sub_nav_st > li:first-child:before{ display:none}
#contents .sub_nav_st > li.home{ color:#fff; background:var(--siteC); border-radius:50%; display:flex; align-items:center; justify-content:center; width:1.75em; height:1.75em;}
#contents .sub_nav_st > li.home .xi{ font-size:1em}
#contents .sub_nav_st > li.home:hover {background: #333;}
#contents .sub_tit{ text-align:center; background:rgba(0,0,0,.02); position:relative}
#contents .sub_tit .bgfix{ position:absolute; left:0; top:0; width:100%; height:100%}
#contents .sub_tit .bgfix + .wrapF{ filter:brightness(0) invert(1)}
#contents .sub_tit .bgfix + .wrapF .sub_nav_st{ opacity:.5}
#contents .sub_tit .wrapF{ display:flex; flex-direction:column; height:14em; justify-content:center; gap:1em; line-height:1; position:relative}
#contents .sub_tit .t1{ font-size:1.125em; text-transform:uppercase; font-weight:300; color:#999}
#contents .sub_tit .t2{ font-size:2.5em; font-family:var(--ff1); font-weight:500; text-transform:uppercase; word-spacing:.25em}
#contents .sub_tab{ margin-top:3em}
#contents .sub_tab .gnb > li,
#contents .sub_tab .gnb > li.st1 > .dp2 > li{ width:100%}
#contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3,
#contents .sub_tab .gnb > li:not(.st1) > .dp2{ justify-content:center; gap:1em}
#contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li,
#contents .sub_tab .gnb > li:not(.st1) > .dp2 > li{ width:calc(16.66% - .83333em)}
#contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li > a,
#contents .sub_tab .gnb > li:not(.st1) > .dp2 > li > a{ display:flex; justify-content:center; align-items:center; height:4.25em; background:#fff; padding:.5em; color:#777; position:relative; box-sizing:border-box; border-radius:1em; box-shadow:0 0 1em rgba(0,0,0,.1)}
#contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li:hover > a,
#contents .sub_tab .gnb > li:not(.st1) > .dp2 > li:hover > a {background: #ddd; color: #333;}
#contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li > a.layer,
#contents .sub_tab .gnb > li:not(.st1) > .dp2 > li > a.layer{display: none;}

#contents .sub_tab .gnb > li.st1 > .dp2 > li > .dp3 > li > a .va,
#contents .sub_tab .gnb > li:not(.st1) > .dp2 > li > a .va{ font-weight:500; font-size:1.25em; font-family:"EB Garamond", ptd; line-height:1}
#contents .sub_tab .gnb > li.st1 > .dp2 > li.on .dp3 > li.on > a,
#contents .sub_tab .gnb > li:not(.st1) > .dp2 > li.on > a{ background:#111; color:#fff; padding-top:.25em}
#contents .sub_tab.dp2on .dp3,
#contents .sub_tab.dp3on .dp4{ display:none}
#contents .sub_tab .gnb .dp3 > li.more{ position:relative}
#contents .sub_tab .gnb .dp3 > li.more.on:after{ content:"\e92f"; font-family:xeicon; position:absolute; left:50%; bottom:-2.5em; transform:translate(-50%,20%); line-height:1}
#contents .sub_tabS{ }
#contents .sub_tabS .gnb{  position:relative}
#contents .sub_tabS .gnb .flex{ justify-content:center; flex-wrap:wrap}
#contents .sub_tabS .gnb > li.on{ width:100%}
#contents .sub_tabS .gnb > li.on .dp2 > li.on  .dp3{ border-top:1px solid #111; border-bottom:1px solid #ddd; margin:2.5em 0 0 0; padding:1.5em}
#contents .sub_tabS .gnb > li.st1 .dp4 > li.on,
#contents .sub_tabS .gnb > li:not(.st1) .dp3 > li.on{ width:auto}
#contents .sub_tabS .gnb > li.st1 .dp4 > li > a,
#contents .sub_tabS .gnb > li:not(.st1) .dp3 > li > a{ padding:.75em 2em}
#contents .sub_tabS .gnb > li.st1 .dp4 > li > a .va,
#contents .sub_tabS .gnb > li:not(.st1) .dp3 > li > a .va{ font-weight:500; color:#999; font-size:1.188em; position:relative; font-family:var(--ff2)}
#contents .sub_tabS .gnb > li.st1 .dp4 > li:hover > a .va,
#contents .sub_tabS .gnb > li.st1 .dp4 > li.on > a .va,
#contents .sub_tabS .gnb > li:not(.st1) .dp3 > li:hover > a .va,
#contents .sub_tabS .gnb > li:not(.st1) .dp3 > li.on > a .va{ color:#111}
#contents .sub_tabS .gnb > li.st1 .dp4 > li.on > a .va:before,
#contents .sub_tabS .gnb > li:not(.st1) .dp3 > li.on > a .va:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#111}
#contents .sub_tab li.m_mall,
#contents .sub_tabS li.m_mall{ display:none !important}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li.on .dp2 > li.on{ display:block!important}
.dp4on .gnb > li,
.dp4on .gnb > li .dp1,
.dp4on .gnb > li .dp2 > li,
.dp4on .gnb > li .dp2 > li > a,
.dp4on .gnb > li .dp2 > li > .dp3 > li,
.dp4on .gnb > li .dp2 > li > .dp3 > li > a{ display:none!important}
.dp4on .gnb > li.on,
.dp4on .gnb > li.on .dp2 > li.on,
.dp4on .gnb > li.on .dp2 > li.on .dp3 > li.on{ display:block!important}

#contents .doc{ padding:4em 0 10em 0}
#contents .sub_tab + .doc{ padding-top:3em}

/**/
.mainBox{ padding:10vmin 0; position:relative}
.mainBox.bg1{ background:#f7f7f7}
.mainBox .wrapBg{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainBox .wrapBg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}
.mainBox .wrapF{ display:flex; flex-direction:column; gap:4vmin 15vmin; position:relative}
.mainBox .wrapF.dRow{ flex-direction:row; align-items:center}
.mainBox .wrapF.dRow .wrapCon{ flex:1; min-width:0}

.mainTit{ display:flex; flex-direction:column; align-items:flex-start; gap:.5em; margin-bottom:2em}
.mainTit.ac{ align-items:center; text-align:center}
.mainTit .tit1{ font-size:2.625em; font-family:var(--ff1); line-height:1.1; font-weight:500}
.mainTit .tt1{ opacity:.5; font-weight:500; font-size:1.25em; line-height:1.5; margin-top:1em}
.mainTit .mgL{ margin-left:auto}
.mainTit.white{ filter:brightness(0) invert(1)}
.mainTit.white .tt1{ opacity:.8}
.mainTit .mainMore{ margin:5em 0 0 0}
.mainTitW{ display:flex; justify-content:space-between; align-items:flex-end}
.mainTitW.vc{ align-items:center}
.mainTitW .mainTit{ margin-bottom:0}

.mainMore{ display:flex; align-items:center; gap:.5em; line-height:1}
.mainMore .t1{ font-size:.938em; font-family:var(--ff2); font-weight:500}
.mainMore .t1.s1{ font-size:1.5em}
.mainMore .arrow{ display:flex; align-items:center; transform:translateY(1px)}
.mainMore .arrow:before{ content:""; display:block; width:3em; height:1px; background:#111; transition:.3s}
.mainMore .arrow .cc{ width:.75em; height:.75em; background:#111; border-radius:50%; position:relative}
.mainMore .arrow .cc:before{ content:""; position:absolute; left:0; top:calc(50% - 1px); width:60%; height:1px; background:#fff}
.mainMore:hover .arrow:before{ width:4em}
.mainMore.white{ color:#fff}
.mainMore.white .arrow{ filter:invert(1)}

.tabSt{ display:flex; gap:6em; align-items:center; margin-bottom:1em}
.tabSt.ac{ justify-content:center}
.tabSt > li > a{ position:relative; opacity:.4}
.tabSt > li:not(:last-child) > a:after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); width:1px; height:70%; background:#aaa; margin-left:3em}
.tabSt > li > a .t1{ font-weight:700; font-size:1.625em}
.tabSt > li.on > a,
.tabSt > li:hover > a{ opacity:1}
.tabSt > li.on > a:before{ content:""; position:absolute; right:calc(100% + .25em); top:0; width:.375em; height:.375em; border-radius:50%; background:#111}

.vod_wrap{ position:relative}
.vod_wrap .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}
.vod_wrap .layer{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.1}
.vod_wrap .layer.gra{ background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.3) 100%);}
.visualSlide .swiper-slide.el{ position: relative; overflow:hidden; height:42em}
.visualSlide .swiper-slide.el .vod_wrap{ position:absolute; left:0; top:0; width:100%; height:100%;}
.visualSlide .swiper-slide.el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000}
.visualSlide .swiper-slide.swiper-slide-active .vod_wrap:after,
.visualSlide .swiper-slide.swiper-slide-duplicate-active .vod_wrap:after{ transition:2s; opacity:.1}
.visualSlide .swiper-slide.el .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
/*
.visualSlide .swiper-slide.el .bg{ filter:blur(1em); transform:scale(1.1)}
.visualSlide .swiper-slide.swiper-slide-active .bg,
.visualSlide .swiper-slide.swiper-slide-duplicate-active .bg{ transform:scale(1); filter:blur(0); transition:3s}
*/
.visualSlide_wrap{ position:relative}
.visualSlide_wrap .slogan{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff; box-sizing:border-box; padding:var(--headerH) 0}
.visualSlide_wrap .slogan .in{ display:flex; flex-direction:column; justify-content:center; height:100%; gap:2em}
.visualSlide_wrap .slogan .t1{ font-size:3.25em; font-weight:700; font-family:var(--ff3); opacity:.8}
.visualSlide_wrap .slogan .t2{ font-size:1.188em; opacity:.8}
.visualSlide_wrap .slogan .t2.on .el > i{ transition-delay:.5s}
/*
.visualSlide_wrap .slogan .t1[class*="f1"]{ font-family:var(--ffN1); font-size:2.5em}
.visualSlide_wrap .slogan .t1[class*="f2"]{ font-family:var(--ffN2); font-size:2.5em}
.visualSlide_wrap .slogan .t1[class*="f3"]{ font-family:var(--ffN3); font-size:2.5em}
.visualSlide_wrap .slogan .t1[class*="f4"]{ font-family:var(--ffN4); font-size:2.5em}
.visualSlide_wrap .slogan .t1.f1_1{ font-weight:400}
.visualSlide_wrap .slogan .t1.f1_2{ font-weight:500}
.visualSlide_wrap .slogan .t1.f2_1{ font-weight:400}
.visualSlide_wrap .slogan .t1.f3_1{ font-weight:300}
.visualSlide_wrap .slogan .t1.f3_2{ font-weight:400}
.visualSlide_wrap .slogan .t1.f4_1{ font-weight:400}
.visualSlide_wrap .slogan .t1.f4_2{ font-weight:500}
*/
.visualSlide_wrap .controlW{ position:absolute; left:0; bottom:2em; z-index:10; width:100%}
.visualSlide_wrap .controlW .in{ display:flex; align-items:center;}
.visualSlide_wrap .swiperControl{ margin-left:auto; display:flex; align-items:center;}
.visualSlide_wrap .swiperControl .paging{ display:flex; margin:0}
.visualSlide_wrap .swiperControl .paging span{ font-size:.75em}
.visualSlide_wrap .swiperControl .paging span.swiper-pagination-bullet-active{ height:0; width:8em; transform:none; transition:width .5s}
.visualSlide_wrap .swiperControl .btnW{ display:flex; margin:0 1em}
.visualSlide_wrap .swiperControl .btnW .swiperBtn:hover{ background:none}

.mainScroll{ color:#fff}
.mainScroll .tt{ display:flex; align-items:center; font-size:.813em; font-weight:500}
.mainScroll .tt .xi{ font-size:1.5em; margin-right:.25em; position:relative}

.prodList{ --prodListL : 4; --prodListG : 2em;}
.prodList:not(.swiper-container){ display:flex; flex-wrap:wrap; gap:var(--prodListG)}
.prodList:not(.swiper-container) .el{ width:calc((100% / var(--prodListL)) - (var(--prodListG) * (var(--prodListL) - 1) / var(--prodListL)))}
.prodList.swiper-container{ margin:calc(var(--prodListG) / 2 * -1)}
.prodList.swiper-container .swiper-wrapper{ align-items:stretch}
.prodList.swiper-container .el{ width:calc(100% / var(--prodListL)); height:auto}
.prodList.swiper-container .el .prodSt{ margin:calc(var(--prodListG) / 2); height:calc(100% - var(--prodListG)); box-sizing:border-box}
.prodList .prodSt{ box-sizing:border-box; height:100%}
.prodSt{ display:flex; flex-direction:column}
.prodSt .prodCon{ display:flex; flex-direction:column; gap:.75em; padding:1em 0; flex:1; min-height:0; border-bottom:1px solid #ddd}
.prodSt .prodPriceW{}
.prodSt .prd_icon_wrap{ justify-content:flex-end}
.prodImg{ overflow:hidden; position:relative}
.prodImg .resize{ padding-bottom:56.25%}
.prodImg .icoW{ position:absolute; right:0; top:0; display:flex; flex-direction:row-reverse; gap:.25em; padding:.5em}
.prodImg .icoW > li > a{ display:flex; align-items:center; justify-content:center; width:2em; height:2em; background:rgba(0,0,0,.3); backdrop-filter:blur(1em); border-radius:50%; color:#fff}
.prodImg .icoW > li > a .ico{ font-size:1.125em}
.prodImg .icoW > li.cart > a .ico:before{ content:"\e9fe"}
.prodImg .icoW > li.wish > a .ico{ font-size:1em}
.prodImg .icoW > li.wish > a .ico:before{ content:"\ea11"}
.prodImg .icoW > li.wish > a.on .ico:before{ content:"\ea10"}
.prodImg .icoW > li.wish > a.on .ico{ color:coral}
.prodTit{ display:flex; flex-direction:column; gap:.5em; line-height:1.1}
.prodTit .t1{ font-family:var(--ff2); font-size:1.375em; font-weight:500; margin-bottom:.125em}
.prodTit .tCas{ font-family:var(--ff2); opacity:.6; font-size:1.063em}
.prodTit .tCas:before{ content:"CAS No. "; font-size:.875em}
.prodTit .t2{ font-family:inherit; opacity:.6; font-size:.938em}
.prodTit .tOp{ font-size:.813em}
.prodTit.s1{ font-size:1.25em}
.prodTit.s1 .t1{ font-size:2em}

.prodPriceW{ display:flex; align-items:baseline; justify-content:flex-end; gap:1em}
.prodPrice{ color:#777; display:flex; align-items:baseline; gap:.125em; justify-content:flex-end; font-size:.938em;}
.prodPrice.before{ position:relative; opacity:.5}
.prodPrice.before:after{ content:""; position:absolute; left:0; bottom:50%; width:100%; height:1px; background:#777} 
.prodPrice .tn{ font-size:1.063em}
.prodPrice .tw{ order:-1}
.prodPrice .tw:before{ content:"₩"}
.prodPrice .per{ display:flex; align-items:center; color:#111; font-weight:900}
.prodPrice .per:before{ content:"\e905"; font-family:xeicon; order:1; line-height:1; font-size:1.063em}
.prodPrice .per:after{ content:"%"}
.prodSt.st1{ flex-direction:row; background:#fff}
.prodSt.st1 .prodImg{ width:14em}
.prodSt.st1 .prodCon{ padding:1.25em; gap:.5em}
.prodSt.st1:hover{ box-shadow:0 0 3em rgba(0,0,0,.1)}

.mainCate .list{ display:flex; gap:3em}
.mainCate .list > li{ flex:1; min-width:0}
.mainCate .list > li .in{ display:flex; flex-direction:column; gap:1em}
.mainCate .list > li .in .imgW{ overflow:hidden}
.mainCate .list > li .in .imgW .resize{ padding-bottom:100%; transition:1s}
.mainCate .list > li .in .conW{ padding:1em 0}
.mainCate .list > li .in:hover .imgW .resize{ transform:scale(1.1)}
.mainCate .list > li:nth-child(even) .in .imgW{ order:1}
.mainCate .rotateSvg{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:12em; height:12em}
.mainCate .rotateSvg svg{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainCate .rotateSvg svg .tt{ font-family:var(--ffSerif); font-size:1.125em; word-spacing:.5em; letter-spacing:.1em; fill:#aaa; mix-blend-mode:difference;}
.mainCate .rotateSvg .in{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:70%; height:70%; background:#eee; opacity:.9; border-radius:50%; display:flex; align-items:center; justify-content:center}
.mainCate .rotateSvg .in img{ width:50%}

.mainPromotion{ position:relative}
.mainPromotion .textAniW{ overflow:hidden; opacity:.05}
.mainPromotion .textAniW .textAni{ font-size:12vmin}
.mainPromotion .tabSt{ margin:-8vmin 0 6vmin 0}
.mainPromotion .promotionSt{ position:relative; box-shadow:0 0 3em 1em rgba(0,0,0,.1)}
.mainPromotion .promotionSt .imgW{ width:50%}
.mainPromotion .promotionSt .imgW .resize{ padding-bottom:80%}
.mainPromotion .promotionSt .imgW .vod_wrap{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainPromotion .promotionSt .prodW{ position:absolute; right:0; top:0; width:50%; height:100%; box-sizing:border-box; padding:5%; background:#f7f7f7; display:flex; gap:1em; flex-direction:column; overflow-y:scroll}

.mainBrand .wrapBg .vod_wrap{ height:100%}
.mainBrand .wrapBg .vod_wrap .layer{ opacity:.5}
.mainBrand .list{ --mainAccL:3; --mainAccG:4px; display:flex; flex-wrap:wrap; gap:var(--mainAccG); margin:0 auto; width:60em}
.mainBrand .list > li{ width:calc((100% / var(--mainAccL)) - (var(--mainAccG) * (var(--mainAccL) - 1) / var(--mainAccL))); position:relative}
.mainBrand .list > li .in{ padding:1em; height:100%; box-sizing:border-box; background:#fff; color:#fff}
.mainBrand .list > li .in .resize{ width:100%; padding-bottom:100%}
.mainBrand .list > li .in,
.mainBrand .list > li .in .resize .re{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2em}
.mainBrand .list > li.bg1 .in{ background:rgba(220,223,255,.5); backdrop-filter:blur(1em)}
.mainBrand .list > li.bg2 .in{ background:rgba(255,255,255,.2); backdrop-filter:blur(1em)}
.mainBrand .list > li .in .ico{ width:5em; height:5em; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#a1acb8; border-radius:50%}
.mainBrand .list > li .in .ico img{ height:50%; filter:brightness(0) invert(1)}
.mainBrand .list > li .in .logo{ width:50%; filter:brightness(0) invert(1)}
.mainBrand .list > li .in .tt1{ font-size:1.125em}
.mainBrand .list > li.cover{ z-index:1}

.newsSlide,
.newsSlide .el{ height:8em}
.newsSlideW{ display:flex; align-items:center; gap:2em; padding:0 2em;}
.newsSlideW .titW{ display:flex; align-items:center; gap:1em}
.newsSlideW .titW .t1{ font-weight:700; font-size:1.375em}
.newsSlideW .newsSlide{ flex:1; min-width:0}
.mainNewsSt{ height:100%; display:flex; align-items:center}
.mainNewsSt .conW{ flex:1; min-width:0; display:flex; align-items:center; gap:4em}
.mainNewsSt .tTit{ flex:1; min-width:0; font-size:1.125em; font-weight:500}
.mainNewsSt .tDate{ opacity:.5}
.mainNewsSt:hover .tTit{ text-decoration:underline}

.wrapLine{ height:1px; background:#111; transform:scale(0); transform-origin:100% 50%}
.wrapLine.eR{ transform-origin:0 50%}
.wrapLine.on{ transform:scale(1); transition:1s}

.mainCs .csWrap{ display:flex; position:relative; z-index:10}
.mainCs .csWrap:after{ content:""; position:absolute; left:-1px; top:0; width:1px; height:100%; background:#fff}
.mainCs .csWrap .el{ flex:1; min-width:0; position:relative}
.mainCs .csWrap .el:after{ content:""; position:absolute; left:-1px; top:50%; height:100%; width:1px; background:#111; transform:translateY(-50%)}
.mainCs .csWrap .el.w1{ flex:0 0 auto; width:16em;}
.mainCs .csWrap .inW{ box-sizing:border-box; padding:2em; display:flex; flex-direction:column; gap:2em; height:14em}
.mainCs .csWrap .inW .titW{ padding-top:1em}
.mainCs .csWrap .inW .titW .t1{ font-family:var(--ffSerif); font-size:1.5em; font-weight:700; color:#aaa}
.mainCs .csWrap .inW .conW{ display:flex; flex-direction:column; gap:.5em}
.mainCs .csWrap .inW .conW .t1{ font-size:1.5em; font-weight:700; letter-spacing:-.025em;}
.mainCs .csWrap .inW .conW .t2{ color:#888; font-size:.938em}
.mainCs .csWrap .inW .icoW{ display:flex; flex-direction:column}
.mainCs .csWrap .inW .icoW .t1{ font-size:1.125em; font-weight:500}
.mainCs .csWrap .inW .icoW .ico{ font-size:2.5em; color:#ccc}
.mainCs .csWrap .inW .more{ padding-top:1em; margin:auto 0 0 auto; display:flex; align-items:center; gap:.5em; opacity:.7}
.mainCs .csWrap .inW .more .t1{}
.mainCs .csWrap .inW .more .arrow:before{content:"\e907"}
.mainCs .csWrap .el.cp:hover{ z-index:1}
.mainCs .csWrap .el.cp:before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:#111; padding:.5em; width:100%; height:100%; opacity:0}
.mainCs .csWrap .el.cp:hover:before{ opacity:1; transition:.3s}
.mainCs .csWrap .el.cp:hover .inW{ filter:brightness(0) invert(1)}


/**/
.login_wrap .login{ width:32em; max-width:94%; margin:0 auto}
.login_wrap .login.w1{ width:38em}
.login_wrap .login .tabIdx{ margin-bottom:1em}

.login_wrap .link_wrap{ padding:0 .5em; margin:1em 0}
.login_wrap .link_wrap .link{ font-size:.938em; margin:0 1em; color:#666}
.login_wrap .link_wrap .link .tt{ padding:0 .25em; display:inline-block}
.login_wrap .link_wrap .link:hover .tt{ text-decoration:underline; color:#111}

.login_wrap .check_wrap{ margin:.75em 0 0 0}
.login_wrap .btn_wrap{ margin-top:2em}
.login_wrap .btn_wrap + .btn_wrap{ margin-top:.5em}
.login_wrap .btn_wrap .btn{ padding:0 2em; height:3.5em; box-shadow:1px 1px 2px rgba(0,0,0,.2); background:#111; color:#fff; border:none; width:100%; box-sizing:border-box; border:2px solid transparent; margin-bottom:.5em; font-size:1.063em; font-weight:500; border-radius:.25em; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center}
.login_wrap .btn_wrap .btn.c1{ border-color:#333; color:#333; background:#fff}
.login_wrap .btn_wrap .btn.c2{ background:var(--siteC); border-color:var(--siteC); color:#fff}
.login_wrap .btn_wrap .btn.s1{ font-size:1.125em}
.login_wrap .btn_wrap .btn.s2{ font-size:.875em}
.login_wrap .btn_wrap .btn.w1{ width:49%}

.login_wrap .btn_wrap .btn.sns_naver{background:#2db400;}
.login_wrap .btn_wrap .btn.sns_kakao{background:#ffe812; color:#000}

.login_wrap .tt_st{ color:var(--siteC)}
.login_wrap .tt_st > *{ vertical-align:middle}

.form_wrap{ border:1px solid #ddd; border-radius:1em; padding:3em}
.form_wrap .tit_wrap{ float:left; width:20%}
.form_wrap .tit_wrap .in{ border-top:2px solid #333; padding:1.125em}
.form_wrap .con_wrap{ float:right; width:75%}

.form_st{}
.form_st > li{ margin-top:1em}
.form_st > li:first-child{ margin-top:0}
.form_st > li .in{ position:relative; padding:0 1em 0 4em; margin-top:.5em}
.form_st > li .in .icon{ position:absolute; left:0; top:50%; width:3em; line-height:3em; margin-top:-1.5em; text-align:center; color:#666}
.form_st > li .in .icon:before{ font-size:1.313em}
.form_st > li .in .lab{ position:absolute; left:4em; top:50%; line-height:1em; margin-top:-.5em; color:#999; background:var(--siteBg); padding:0 .25em}
.form_st > li .in .inp{ width:100%; box-sizing:border-box; padding:1em 0; height:4em; border:none; position:relative; z-index:1; background:none; font-weight:bold; color:#666}
.form_st > li .in .inp[type=file]{ padding:0 !important; height:3em}
.form_st > li .in .inp[readonly=readonly]{ background:#f5f5f5}
.form_st > li .in textarea.inp{ height:10em; padding:1em !important}
.form_st > li .in .line{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box; transition:.3s; border-radius:.25em}
.form_st > li .in .inp:focus ~ .lab,
.form_st > li .in .inp.on ~ .lab{ transform:scale(.9,.9); top:0; color:var(--siteC); margin-left:-.5em; transition:.3s}
.form_st > li .in .inp:focus ~ .icon,
.form_st > li .in .inp.on ~ .icon{ color:#333}
.form_st > li .in .inp:focus ~ .line,
.form_st > li .in .inp.on ~ .line{ border-color:var(--siteC)}
.form_st > li .in .inp.c1{ background:#f1f1f1}

.form_st.st1 > li{ display:flex; flex-wrap:wrap; align-items:center}
.form_st.st1 > li:not(.btn_wrap){ margin-top:1.5em}
.form_st.st1 > li.line{ margin-top:1.25em; padding-top:1.25em; border-top:1px solid #111}
.form_st.st1 > li.line > .label_st{ width:100%; margin-top:-1em}
.form_st.st1 > li.line2{ border-top:1px solid #ddd; padding-top:1em !important}
.form_st.st1 > li .in{ padding:0; flex:1 1 1%; min-width:0; word-break:break-all}
.form_st.st1 > li .in_sec{ width:1.5em; text-align:center; color:#999; display:inline-block}
.form_st.st1 > li .in_sec2{ width:.5em}
.form_st.st1 > li .in_br{ flex-basis:100%}
.form_st.st1 > li .in_tit{ font-weight:500; font-size:1.063em; color:#333; width:100%}
.form_st.st1 > li .in_tit .ess:before{ font-size:.875em; margin-left:.5em}
.form_st.st1 > li .in_tit.c1{ color:#777}
.form_st.st1 > li .in_tit.s1{ font-size:1.25em}
.form_st > li .in_tt{ width:100%; color:#777; font-size:.938em; margin-top:1em; line-height:1.5}
.form_st.st1 > li .in.fix{ flex:0 0 auto}
.form_st.st1 > li .in .inp{ padding:1em 1em; height:3.5em; font-size:.938em;font-weight:400}
.form_st.st1 > li .in .inp[type=file]{ height:3em}
.form_st.st1 > li .in .inp.s1{ font-size:1em}
.form_st.st1 > li .in .btn{ color:#fff}
.form_st.st1 > li .in .btn + .line{ background:#333; border-color:transparent}
.form_st.st1 > li .in .w100{ width:100%}
.form_st.st1 > li .in.group{ gap:.5em; display:flex; align-items:center}
.form_st.st1 > li .in.w1{ max-width:26%}
.form_st.st1 > li .in.w50{ max-width:50%}
.form_st.st1 > li .in.w100{ flex-basis:100%}
.form_st.st1 > li .agree{ border:1px solid #ddd; width:100%; margin:.75em 0; border-radius:.25em}
.form_st.st1 > li .agree > li{ padding:.75em 1em; position:relative; transition:.3s}
.form_st.st1 > li .agree > li.all{ border-bottom:1px solid #ddd}
.form_st.st1 > li .agree > li .more{ background:#aaa; color:#fff; padding:.25em 1em; font-size:.875em}
.form_st.st1 > li .agree > li .more:before{ content:"보기"}
.form_st.st1 > li .agree > li .agree_box{ display:none}
.form_st.st1 > li .agree > li .on .more{ background:#333}
.form_st.st1 > li .agree > li .on .more:before{ content:"접기"}
.form_st.st1 > li .agree > li .on .agree_box{ display:block}
.form_st.st1 > li.flex{ padding:0 .5em}
.form_st.st1 > li.flex .in_tit{ flex-basis:8em; font-size:.938em; padding-left:0; height:4em; display:flex; align-items:center}
.form_st.st1 > li.flex .in{ margin-top:0}
.form_st.st1 > li.flex .in.w100{ margin-left:8em}
.form_st.st1 > li.flex .in .inp{ font-size:.938em}

.form_st.text{ border-bottom:1px solid #ddd}
.form_st.text > li{ border-top:1px solid #ddd; margin-top:0}
.form_st.text > li .in .t1{ font-size:.938em; color:#666}
.form_st.text > li .in a:hover{ text-decoration:underline}

.fin_wrap{ border:1px solid #ddd; padding:2em 4em 4em 4em; text-align:center; box-sizing:border-box}
.fin_wrap.w1{ width:70em; margin:0 auto; max-width:94%; padding:2em 2em 4em 2em;}
.fin_wrap .fin_icon{ opacity:.1; font-size:4em}
.fin_wrap .fin_tit{ font-weight:300; font-size:2em;}
.fin_wrap .fin_tit:after{ content:""; display:block; margin:.75em auto; width:1em; height:1px; background:#aaa}
.fin_wrap .fin_tt{ color:#888; line-height:1.6}
.fin_wrap .fin_tt.t1{ color:#666; font-size:1.188em}

.fin_wrap.st1{ border:none; padding:0}

.agree_box{ background:#fff; border-radius:.5em; box-shadow:0 0 1em rgba(0,0,0,.1); padding:2em}
.agree_box .tit{ font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em}
.agree_box .tit:first-child{ margin-top:0}
.agree_box .con{ font-size:.938em; color:#666; line-height:1.8em}
.agree_box .con.h1{ height:10.8em; overflow-y:auto}
.agree_box .con *{ vertical-align: top}
.agree_box .check{ border-top:1px solid #ddd; margin-top:1.5em; padding-top:1em}
.agree_box .con h3,
.agree_box .con h4{ margin-top:1em; font-weight:700}
.agree_box.st1{ box-shadow:none; padding:1.5em; background:#f9f9f9}

.label_st.agree_box ul{ margin-top:1em}
.agree_box table{ margin:1em 0; width:100%}
.agree_box table th,
.agree_box table td{ border:1px solid #ddd; padding:1em}
.agree_box table th{ background:#f5f5f5}
.agree_box p strong{ font-size:1.125em; color:#333}
.agree_box a{ vertical-align:top; color:#666; text-decoration:underline}
.agree_box a:hover{ opacity:.6}
.agree_box strong{ vertical-align:top; font-weight:500}

/**/
.mall_list_top{ padding:0 0 2.5em 0}
.mall_list_top .tit_wrap{ padding:1em 0; border-bottom:1px solid #222}
.mall_list_top .tit_wrap .tit{ font-size:2.25em; font-weight:700}
.mall_list_top .tit_wrap .sub_nav_st{ margin-left:auto}
.mall_list_top .gnb_wrap{ position:relative}
.mall_list_top .gnb_wrap:before{ content:""; position:absolute; right:0; bottom:0; width:100%; height:1px; background:#eee}
.mall_list_top .gnb_wrap:after{ content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#fff}
.mall_list_top .gnb_wrap .gnb > li.on{ display:flex; flex-wrap:wrap; width:100%;}
.mall_list_top .gnb_wrap .all{ width:14.28%; position:absolute; left:0; top:0}
.mall_list_top .gnb_wrap .gnb > li .dp2{ flex-wrap:wrap}
.mall_list_top .gnb_wrap .gnb > li .dp2 > li{ width:14.28%}
.mall_list_top .gnb_wrap .gnb > li .dp2 > li:first-child{ margin-left:14.28%}
.mall_list_top .gnb_wrap a{ padding:.5em 1.5em; height:4em; border-bottom:1px solid #eee; box-sizing:border-box; display:flex; align-items:center; font-weight:300; color:#666; position:relative}
.mall_list_top .gnb_wrap a:after{ content:""; position:absolute; right:-1px; top:0; width:1px; height:100%; background:#eee}
.mall_list_top .gnb_wrap a.dp1{ font-weight:500; color:#111}
.mall_list_top .gnb_wrap .all.on,
.mall_list_top .gnb_wrap .dp2 > li.on a{ font-weight:500; color:#111}
.mall_list_top .gnb_wrap a .va:after{ content:"\e942"; font-family:xeicon; margin:0 .5em; vertical-align:middle}
.mall_list_top .gnb_wrap a .va{ font-size:1.063em}

.mall_list_total{ padding:0 0 1em 0; margin-top:3em}
.mall_list_total .total .t1{}
.mall_list_total .total .t2{ font-size:1.125em; font-weight:700; margin-left:.25em}
.mall_list_total .etc{ margin-left:auto}

.mall_prod_wrap{}
.prod_list{ margin:-2em 0 0 -2em}
.prod_list > li{ width:25%}
.prod_list > li .wrap_in{ margin:2em 0 0 2em; cursor:pointer}
.prod_list > li .wrap_in .wrap_img{ border:1px solid #ddd; overflow:hidden; position:relative;}
.prod_list > li:hover .wrap_in .wrap_img .resize {}

.prd_icon_wrap{ display:flex; gap:2px}
.prd_icon_wrap .prd_icon{display:flex; justify-content:center; align-items:center; padding:.5em; font-size:.75rem; line-height:1; border:1px solid #333}
.prd_icon_wrap .prd_icon.icon_sold{ background:#666; color:#fff; border-color:transparent}
.prd_icon_wrap .prd_icon.icon_best{}
.prd_icon_wrap .prd_icon.icon_sale{}
.prd_icon_wrap .prd_icon.icon_new{}

.prod_list > li .wrap_in .wrap_con{ padding:1em 0}
.prod_list.d1 > li{ width:20%}
.prod_list.d1 > li .wrap_in .wrap_con{ font-size:.813em}

.mall_view_top{ display:flex; gap:5em; margin-bottom:2em}
.mall_view_top.s1{ font-size:.875em}
.mall_view_top .prod_img{width:calc(50% - 2.5em)}
.mall_view_top .prod_info{flex:1; min-width:0}
.mall_view_top .prod_img .imgBig img{ display:block; width:100%}
.mall_view_top .prod_info{ padding:0 0}
.mall_view_top .prod_info .tit_wrap .tit{ font-weight:700; font-size:2.25em; font-family:var(--ffSerif)}
.mall_view_top .prod_info .tit_wrap .t1{ opacity:.3; font-size:1.125em; margin-bottom:.25em; word-spacing:.125em}
.mall_view_top .prod_info .tit_wrap .t2{ font-size:1.25em; font-weight:500; margin-top:1em; color:#999; font-family:var(--ffSerif)}
.mall_view_top .prod_info .tit_wrap .t3{ font-size:1.05em; font-weight:500; margin-top:1em; color:#777}
.mall_view_top .prod_info .prod_price{ margin-top:2em; text-align:right}
.mall_view_top .prod_info .info_wrap{ margin:1em 0 2em 0; border:1px solid #ddd; border-left:none; border-right:none}
.mall_view_top .prod_info .info_wrap .list{ padding:0 .5em}
.mall_view_top .prod_info .info_wrap .list > li{ padding:.75em 0}
.mall_view_top .prod_info .info_wrap .list .tit{ width:7em; margin-right:1em}
.mall_view_top .prod_info .info_wrap .list .tit .t1{ }
.mall_view_top .prod_info .info_wrap .list .con .t1{ font-weight:400; color:#666}
.mall_view_top .prod_info .op_wrap > li .wrap_in{ padding:1.5em 2.5em; background:rgba(0,0,0,.05); margin-bottom:1em; font-size:.875em}
.mall_view_top .prod_info .op_wrap > li .wrap_in .wrap1{ margin-bottom:.75em}
.mall_view_top .prod_info .op_wrap > li .wrap_in .tit{ font-size:1.125em}
.mall_view_top .prod_info .op_wrap > li .wrap_in .tt_price{ font-size:.938em; width:120px;}
.mall_view_top .prod_info .total_price{ margin:2.5em 0}
.mall_view_top .prod_info .total_price .tt_price{ font-size:1.375em}
.mall_view_top .prod_info .buy_btn_wrap .btn{ height:3.5em; min-width:3.5em; display:flex; align-items:center; justify-content:center; text-align:center; width:100%; border:1px solid transparent; background:#fff; font-size:1.188em; font-weight:700}
.mall_view_top .prod_info .buy_btn_wrap .btn:before{ font-family:xeicon; font-weight:normal; font-size:1.25em; margin-right:.25em}
.mall_view_top .prod_info .buy_btn_wrap > li.btnWish{ margin-left:1em}
.mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn{ color:#111; background:#fff; border-color:#111}
.mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn{ color:#fff; background:#111; border-color:#111}
.mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn:hover { background: #f4f4f4;}
.mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn:hover { background:var(--siteC);}
.mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn:before{content:"\e9fb"}
.mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn:before{content:"\ea77"}
.mall_view_top .prod_info .buy_btn_wrap > li.btnWish .btn{ background:#ddd}
.mall_view_top .prod_info .buy_btn_wrap > li.btnWish .btn:hover {background: #F00; color:#fff;}
.mall_view_top .prod_info .buy_btn_wrap.on{ position:fixed; left:50%; bottom:0; z-index:2; width:50em; max-width:100%; transform:translateX(-50%)}
.mall_view_top .prod_info .buy_btn_wrap.on > li.btnWish{ margin-left:0}
.mall_view_con .view_tab{ max-width:none}
.mall_view_con .view_tab.on{ position:fixed; top:var(--headerH); z-index:1; box-shadow:0 0 1em rgba(0,0,0,.1); width:100vw; left:50%; transform:translateX(-50%)}
.mall_view_con .view_con{ padding:4em 0}

.vol_st{ padding-left:1px}
.vol_st .btn,
.vol_st .inp{ width:2.5em; line-height:2.5em; height:2.5em; text-align:center; border:1px solid #ddd; background:#fff; margin-left:-1px}
.vol_st .inp{ width:3.5em; box-sizing:border-box; font-family:gs,sans-serif}
.vol_st .btn:hover {background: #333; color: #fff;}
.vol_st .btn .xi{ font-size:1em}
.vol_st .btn.down .xi:before{content:"\e91a"}
.vol_st .btn.up .xi:before{content:"\e913"}
.vol_st.st1{ font-size:.875em}
.vol_st.st1 .inp{ width:3em}

.zoomWrap{ position: relative}
.zoomWrap .magnifierWrap{ position:absolute; left:100%; margin-left:5em; top:0; width:100%; height:100%; overflow:hidden; z-index: 5; box-shadow:0 0 1em rgba(0,0,0,.1); display: none}
.zoomWrap .magnifierWrap .magnifier{ position:absolute; background-repeat:no-repeat; background-size:100% 100%;}
.zoomWrap .pointer{ position:absolute; width:30%; height:30%; background:rgba(0,0,0,.1); transform:translate(-50%,-50%);display:none}
.zoomThumbWrap{ margin:1em 0; display:flex; gap:1em}
.zoomThumbWrap > li{ width:calc(20% - .8em)}
.zoomThumbWrap > li .in{ border:1px solid transparent}
.zoomThumbWrap > li.on .in{ border-color:#111}

.tooltipWrap{ position:relative}
.tooltipWrap .tooltip{ position:absolute; background:#fff; border:2px solid #333; bottom:calc(100% + 1em); padding:2em 1.5em; min-width:18em; box-sizing:border-box; display:none; box-shadow:0 0 1em rgba(0,0,0,.1); z-index:3;}
.tooltipWrap.on .tooltip{ display:block}
.tooltipWrap .tooltip:after{ content:""; width:1em; height:1em; border:2px solid #333; position:absolute; left:2.5em; bottom:0; transform:rotate(45deg); transform-origin:left bottom; background:#fff; border-top:none; border-left:none; margin-bottom:-2px}
.tooltipWrap .tooltip .twrap{ margin-bottom:.75em}
.tooltipWrap .tooltip .twrap .t1{ font-weight:700; font-size:1.063em}
.tooltipWrap .tooltip .twrap .t2{ color:#999; font-size:.938em; margin-top:.25em}
.tooltipWrap .tooltip .closeBtn{ position:absolute; right:0; top:0; width:2.5em; line-height:2.5em; text-align:center}
.tooltipWrap .tooltip .closeBtn:before{ font-family:xeicon; content:"\e921"}

.mall_total_wrap{ padding:1em 2em; text-align:right; background:rgba(0,0,0,.05); border-bottom:1px solid #ddd}

.mall_order_wrap{ position:relative; padding-right:24em}
.mall_order_wrap .mall_order_con{ position:relative; z-index:1}
.mall_order_wrap .mall_order_fix{ position:absolute; right:0; top:0; width:100%; display:flex}
.mall_order_wrap .mall_order_fix .fix_wrap{ width:20em; margin-left:auto; border:1px solid #ddd; box-sizing:border-box}
.mall_order_wrap .mall_order_fix.on{ position:fixed; top:var(--headerH)}
body.footerCheck .mall_order_wrap .mall_order_fix.on{ position:absolute; bottom:0; top:auto}
.mall_order_wrap .mall_order_fix .fix_wrap .add_wrap{ background:rgba(0,0,0,.05); padding:1em 1.5em}
.mall_order_wrap .mall_order_fix .fix_wrap .con_wrap{ padding:1.5em}
.mall_order_wrap .mall_order_fix .fix_wrap .wrap_t1{ font-weight:500; display:flex; align-items:center; gap:.25em}
.mall_order_wrap .mall_order_fix .fix_wrap .wrap_t2{ font-size:.938em; color:#666}
.mall_order_wrap .mall_order_fix .fix_wrap .price_wrap > dl:not(:first-child){ margin-top:.5em}
.mall_order_wrap .mall_order_fix .fix_wrap .price_wrap > dl.line{ border-top:1px solid #ddd; margin-top:1em; padding-top:1em}
.mall_order_wrap .mall_order_fix .fix_wrap .payment_wrap{ border:2px solid #333; padding:.75em 1.5em; margin:1.5em 0}

.page_sec_list > li:not(:first-child){ margin-top:5em}

/* 제품상세 영문 */

.prod_con_wrap { } 
.prod_con_wrap .list_wrap {border-top: 2px solid var(--siteC);}
.prod_con_wrap .list_wrap .list { border-bottom:1px solid #ccc; } 
.prod_con_wrap .list_wrap .list.on dt { background:#fff; border-bottom:1px solid #ddd; } 
.prod_con_wrap .list_wrap .list dd { display:none; } 
.prod_con_wrap .list_wrap .list.on dd { display:block; background:#f5f5f5 } 
.prod_con_wrap .list_wrap .list .tt { color:#000; font-size:1.375em; font-weight:600 } 
.prod_con_wrap .list_wrap .list .t_xi { font-size:1.250em; text-align:center; background:var(--siteC); color:#fff; width:30px; height:30px; line-height:30px; margin-right:10px; border-radius:100%; } 
.prod_con_wrap .list_wrap .list > dt { position:relative; padding:25px 50px 20px 25px; cursor:pointer; } 
.prod_con_wrap .list_wrap .list > dt i { vertical-align:middle; } 
.prod_con_wrap .list_wrap .list > dt .more_xi { position:absolute; top:50%; right:20px; margin-top:-18px; text-align:right; } 
.prod_con_wrap .list_wrap .list > dt .more_xi:before { content:"\e913"; font-family:xeicon!important; font-size:1.375em; color:#333; } 
.prod_con_wrap .list_wrap .list.on > dt .more_xi:before { content:"\e91a"; } 
.prod_con_wrap .list_wrap .list .pro_info .tx_w { padding:20px 60px 40px 60px; border-bottom:none; line-height:1.5; color:#333; } 
.prod_con_wrap .list_wrap .list .pro_info .tx_w * { word-break:break-all } 
.prod_con_wrap .list_wrap .list .pro_info .tx_w .t_ul { } 
.prod_con_wrap .list_wrap .list .pro_info .tx_w .t_ul li { font-size:0.938em; color:#666; line-height:1.3; position:relative; padding-left:15px; } 



/**/
.tab_st1{}
.tab_st1 > li{ flex:1 1 1%}
.tab_st1 > li > a{ display:flex; justify-content:center; align-items:center; height:3.5em; border:2px solid transparent; background:rgba(0,0,0,.05); position:relative; font-size:1.125em; font-weight:700; color:#888; box-sizing:border-box}
.tab_st1 > li:not(:first-child):not(.on) > a{ border-left:none; padding-left:2px}
.tab_st1 > li:not(:last-child):not(.on) > a{ border-right:none; padding-right:2px}
.tab_st1 > li:first-child > a{ border-radius:.25em 0 0 .25em}
.tab_st1 > li:last-child > a{ border-radius:0 .25em .25em 0}
.tab_st1 > li.on > a{ border-color:#111; color:#111; background:#fff; z-index:1; box-shadow:0 0 1em rgba(0,0,0,.2); z-index:1}
.tab_st1 > li > a:before{ content:""; position:absolute; left:-3px; top:50%; height:50%; width:1px; background:#ddd; transform:translateY(-50%)}
.tab_st1 > li:first-child > a:before,
.tab_st1 > li.on > a:before{ display:none}
.tab_st1.c1 > li > a{ background:#fff; border-color:#111; color:#111}
.tab_st1.c1 > li:hover > a,
.tab_st1.c1 > li.on > a{ background:#111; color:#fff}
.tab_st1.c2 > li > a{ background:#fff; color:#999; border:none; border-radius:0; box-shadow:none}
.tab_st1.c2 > li:hover > a,
.tab_st1.c2 > li.on > a{ color:#111; }
.tab_st1.arrow > li.on > a:after{ content:"\e935"; font-family:xeicon; position:absolute; left:50%; top:100%; transform:translate(-50%,-.313em); color:#333}
.tab_st1.arrow.c1 > li.on > a:after{ color:#111}

/*main*/
.mainVisualWrap{height:640px; position:relative;}
.mainVisualWrap .slides{height:100%;}
.mainVisualWrap .slides .el{height:100%; cursor:pointer;}
/* .mainVisualWrap .slides .el:not(.swiper-slide-active){position:relative;}
.mainVisualWrap .slides .el:not(.swiper-slide-active):after{content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,.5); position:absolute; left:0; top:0;} */
.mainVisualWrap .slides .el .img{width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover;}
.mainVisualWrap .mV_button_wrap{position:absolute; left:50%; bottom:0; transform:translateX(-50%); margin-left:calc(-700px + 95px); background:#2f2e2d; z-index:3; display:flex;}
.mainVisualWrap .mV_button_wrap .mV_pagination{width:90px; height:50px; color:#fff; display:flex; justify-content:center; align-items:center; border-left:1px solid #666; border-right:1px solid #666; box-sizing:border-box;}
.mainVisualWrap .mV_button_wrap .mV_pagination .swiper-pagination-current{margin-right:.25em; font-weight:bold;}
.mainVisualWrap .mV_button_wrap .mV_pagination .swiper-pagination-total{margin-left:.25em;}
.mainVisualWrap .mV_button_wrap .btn_prev,
.mainVisualWrap .mV_button_wrap .btn_next{width:50px; height:50px; display:flex; justify-content:center; align-items:center; color:#fff; opacity:.7; background:rgba(255,255,255,0); cursor:pointer; transition:.3s;}
.mainVisualWrap .mV_button_wrap .btn_prev:hover,
.mainVisualWrap .mV_button_wrap .btn_next:hover{opacity:1; background:rgba(255,255,255,.2);}

.mainVisualWrap .btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:100; width:4em; height:4em; display:flex; align-items:center; justify-content:center; opacity:.5}
.mainVisualWrap .btn .xi{ font-size:3em}
.mainVisualWrap .btn.prev{ left:0}
.mainVisualWrap .btn.next{ right:0}
.mainVisualWrap .btn:hover{ opacity:1}
.mainVisualWrap .paging{ position:absolute; bottom:1em !important; width:auto !important; left:50% !important; transform:translateX(-50%); display:flex; gap:1em; z-index:100; align-items:center}
.mainVisualWrap .paging > span{ width:1em; height:1em; background:#fff; opacity:1; font-size:.75em; box-shadow:0 0 1em rgba(0,0,0,.1); margin:0 !important}
.mainVisualWrap .paging > span.swiper-pagination-bullet-active{ border:3px solid var(--siteC)}

/* 카피된메인 */
.main_prod{margin-bottom:5.375rem;}
.main_prod .main_prod_title{font-size:2.25em; font-weight:bold; margin-bottom:.75rem;}
.main_prod .main_prod_title .fr{font-size:1rem; font-weight:bold; color:#888; transition:.3s;}
.main_prod .main_prod_title .fr:hover{color:var(--siteC);}
.main_prod .main_prod_title .fr .xi{margin-top:-2px; transition:.3s; colro:#888;}
.main_prod .main_prod_title .fr:hover .xi{margin-left:12px; transform:rotate(180deg); color:var(--siteC);}
.main_prod .prod_list_wrap{}
.main_prod .prod_list_wrap .prod_cover{width:25%; max-width:330px; margin-bottom:3.375rem; cursor:pointer; margin-right:26px;}
.main_prod .prod_list_wrap .prod_cover:nth-of-type(4n){margin-right:0;}
.main_prod .prod_list_wrap .prod_cover:nth-of-type(n+5){margin-bottom:0;}
.main_prod .prod_list_wrap .prod_cover .thumb_wrap{border:1px solid #ddd; box-sizing:border-box; width:100%; height:330px; margin-bottom:1rem; transition:.3s; overflow:hidden;}
.main_prod .prod_list_wrap .prod_cover:hover .thumb_wrap{border-color:var(--siteC); box-shadow:0 0 8px 3px rgba(0,0,0,.2);}
.main_prod .prod_list_wrap .prod_cover .thumb_wrap .thumb{width:270px; height:270px; margin:30px auto; background-position:center; background-size:cover; background-repeat:no-repeat; transition:.3s;}
.main_prod .prod_list_wrap .prod_cover:hover .thumb_wrap .thumb{transform:scale(1.1);}
.main_prod .prod_list_wrap .prod_cover .info_wrap{}
.main_prod .prod_list_wrap .prod_cover .info_wrap .prod_sum{font-size:.9375em; color:#888; margin-bottom:.25rem;}
.main_prod .prod_list_wrap .prod_cover .info_wrap .prod_name{font-size:1.125em; color:#111; margin-bottom:1.125em;}
.main_prod .prod_list_wrap .prod_cover .info_wrap .prod_price{}
.main_prod .prod_list_wrap .prod_cover .info_wrap .prod_price .price_num{font-weight:bold; font-size:1.125em;}

.main_mid_banner_wrap{width:100%; height:360px;}
.main_mid_banner_wrap .img{width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; cursor:pointer;}

.main_md_wrap{/*width:1760px; margin:0 auto;*/ margin-bottom:70px;}
.main_md_wrap .main_md_top{width:100%;/* margin-bottom:100px;*/}
.main_md_wrap .main_md_top .main_md_in{width:100%;}
.main_md_wrap .main_md_in{padding-top:86px;}
.main_md_wrap .main_md_in .main_md_img_wrap{width:660px;}
.main_md_wrap .main_md_in .main_md_img_wrap .img{width:100%; height:440px; background-size:cover; background-repeat:no-repeat; background-position:center;}
.main_md_wrap .main_md_in .main_md_img_wrap .main_md_title{font-size:2.25em; margin-bottom:.5rem;}
.main_md_wrap .main_md_in .main_md_list_wrap{width:calc(100% - 660px); padding-left:80px; padding-top:54px; box-sizing:border-box;}
.main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap{padding-left:0; padding-right:80px;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash{font-size:1.375em; color:#aaa; padding-top:.5rem; margin-bottom:1.25rem;}
.main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap .main_md_hash{display:flex; align-items:center; justify-content:flex-end;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash .hash{margin-right:1.75em; position:relative; padding-left:.875em; box-sizing:border-box; font-weight:bold;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash .hash:last-of-type{margin-right:0;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash .hash:before{content:'#'; font-size:1em; position:absolute; left:0; top:0;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap{width:calc(100% + 180px); overflow:hidden;}
.main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap{margin-left:-180px;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides{width:100%;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el{width:260px; height:340px; border:1px solid #ddd; box-sizing:border-box; transition:.3s; cursor:pointer;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el:hover{border-color:var(--siteC); box-shadow:0 0 8px 3px rgba(0,0,0,.2);}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el .img{width:100%; height:260px; background-size:contain; background-position:center; background-repeat:no-repeat;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el .md_prod_name{font-size:1.0625em; font-weight:bold; text-align:center; margin-top:1rem;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap{display:flex; align-items:center; margin-top:.5rem;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div{cursor:pointer;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div.btn_play.off,
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div.btn_pause.off{display:none;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi{font-size:1.5em; color:#555; transition:.3s; opacity:.7}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div:hover .xi{color:var(--siteC); opacity:1;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi.xi-pause,
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi.xi-play{padding-top:2px;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi:not(.xi-pause):not(.xi-play){font-size:1.75em;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap{display:flex; align-items:center; margin-top:.5rem; flex-direction:row-reverse;}
.main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap{flex-direction:row;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div{cursor:pointer;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div.btn_play.off,
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div.btn_pause.off{display:none;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi{font-size:1.5em; color:#555; transition:.3s; opacity:.7}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div:hover .xi{color:var(--siteC); opacity:1;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi.xi-pause,
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi.xi-play{padding-top:2px;}
.main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi:not(.xi-pause):not(.xi-play){font-size:1.75em;}

.main_cate_tab_wrap{margin-bottom:35px;}
.main_cate_tab_wrap .main_cate_tab{padding:0 55px; height:60px; border-radius:4px; font-size:1.1875em; transition:.3s; background:#eeeeee; color:#adadad; cursor:pointer; margin-right:10px; font-weight:bold;}
.main_cate_tab_wrap .main_cate_tab:last-of-type{margin-right:0;}
.main_cate_tab_wrap .main_cate_tab:hover{background:#d6dded; color:#111;}
.main_cate_tab_wrap .main_cate_tab.on{background:#1e3b76; color:#fff; box-shadow:0 0 8px 2px rgba(0,0,0,.1);}

.main_brand_wrap{padding-top:85px; margin-bottom:160px;}
.main_brand_wrap .main_wrap_title{font-size:2.25em; text-align:center; margin-bottom:40px; font-weight:bold;}
.main_brand_wrap .brand_link_wrap{}
.main_brand_wrap .brand_link_wrap .brand_link{flex:1 1 25%; margin-right:26px; height:330px; background-position:center; background-size:cover; background-repeat:no-repeat; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; position:relative; color:#fff; cursor:pointer;}
.main_brand_wrap .brand_link_wrap .brand_link:before{content:''; display:block; width:100%; height:100%; background:#000; opacity:.3; position:absolute; left:0; top:0; z-index:0; transition:.3s;}
.main_brand_wrap .brand_link_wrap .brand_link:hover:before{opacity:.6;}
.main_brand_wrap .brand_link_wrap .brand_link:last-of-type{margin-right:0;}
.main_brand_wrap .brand_link_wrap .brand_link.n1{background-image:url('../images/main/main_brand_bg01.jpg');}
.main_brand_wrap .brand_link_wrap .brand_link.n2{background-image:url('../images/main/main_brand_bg02.jpg');}
.main_brand_wrap .brand_link_wrap .brand_link.n3{background-image:url('../images/main/main_brand_bg03.jpg');}
.main_brand_wrap .brand_link_wrap .brand_link.n4{background-image:url('../images/main/main_brand_bg04.jpg');}
.main_brand_wrap .brand_link_wrap .brand_link p{position:relative; z-index:1; transition:.45s;}
.main_brand_wrap .brand_link_wrap .brand_link p.bl_title{font-size:1.5em; margin-bottom:-3rem;}
.main_brand_wrap .brand_link_wrap .brand_link:hover p.bl_title{font-size:1em; margin-bottom:2.5rem;}
.main_brand_wrap .brand_link_wrap .brand_link p.bl_text{font-size:1.3125em; font-weight:bold; height:55px; padding-top:55px; box-sizing:border-box; overflow:hidden;}
.main_brand_wrap .brand_link_wrap .brand_link:hover p.bl_text{padding-top:0; margin-bottom:2rem;}
.main_brand_wrap .brand_link_wrap .brand_link p.more_btn{font-size:.8125em; font-weight:bold;}
.main_brand_wrap .brand_link_wrap .brand_link p.more_btn .xi{font-weight:400;}

.main_cs_wrap{height:300px; padding-top:60px; background:#f5f5f5; box-sizing:border-box;}
.main_cs_wrap .box1{display:flex;}
.main_cs_wrap .box1 .main_cs_title{font-size:1.375em; font-weight:bold; margin-bottom:30px;}
.main_cs_wrap .box1 .main_cs_info_wrap{width:450px;}
.main_cs_wrap .box1 .main_cs_info_wrap .cs_num{font-size:1.5em; font-weight:bold; margin-bottom:.875rem;}
.main_cs_wrap .box1 .main_cs_info_wrap .cs_time{font-size:.9375em; color:#777;}
.main_cs_wrap .box1 .main_cs_notice_wrap{width:400px;}
.main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st{display:flex; flex-direction:column;}
.main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li{margin-bottom:.5rem; font-size:.875em; cursor:pointer;}
.main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li .notice_title{width:calc(100% - 80px); padding-left:8px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li:hover .notice_title{text-decoration:underline;}
.main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li .notice_title:before{content:''; display:block; width:4px; height:1px; background:#111; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li .notice_date{width:80px; text-align:right; opacity:.5;}
.main_cs_wrap .box1 .main_cs_sns_wrap{width:calc(100% - 850px); display:flex; justify-content:flex-end; align-items:center;}
.main_cs_wrap .box1 .main_cs_sns_wrap .sns_wrap{}
.main_cs_wrap .box1 .main_cs_sns_wrap .sns_wrap li{margin-left:10px; cursor:pointer;}

/* new main */

.main_con {padding: 3em 0;}
.main_con.bg1 {background: #f5f5f5;}
.main_con.bg2 {background:#f0f9fe;}

.main_tit {margin-bottom: 2em;}
.main_tit .t1 {font-size: 2em; font-weight: 600;}
.main_tit .t2 {font-size: 1.125em; font-weight: 500; margin-top: 1em; color: #727272;}
.main_tit .t3 {font-size: 2.4em; font-weight: 700;}

.best_cate {gap: 2em;}
.best_cate li {width: 9%;}
.best_cate li .in {display: block; text-align: center;}
.best_cate li .in .img {border: 1px solid #ddd; border-radius: 1em; overflow: hidden; margin-bottom: 1em; }
.best_cate li:hover .in .img img,
.best_cate li:focus .in .img img {transform: scale(1.2); transition: .3s;}
.best_cate li .in .tt {font-size: 0.96em;}
.best_cate li:hover .in .tt,
.best_cate li:focus .in .tt {font-weight: 700;} 

.project_list {gap: 1.5em;}
.project_list li { border-radius: 1em; overflow: hidden; flex: 1 33.3%; box-shadow: 0 0 1em rgba(0, 0, 0, .1);}
.project_list li .in {background: #fff; display: block; position: relative;}
.project_list li .in .tit {padding: 1em; font-size: 1.4em; font-weight: 600; color: #969696;}
.project_list li .in .img {position: relative; overflow: hidden;}
.project_list li .in .img::before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));}
.project_list li:hover .in .img img,
.project_list li:focus .in .img img {transform: scale(1.2); transition: .5s;}
.project_list li:hover .in .tit,
.project_list li:focus .in .tit {color: #000;} 
.project_list li .in .price_box {position: absolute; bottom: 5%; right: 8%; gap: 1em;}
.project_list li .in .price_box .price1 {position: relative; color: #fff;}
.project_list li .in .price_box .price1::before {width: 100%; height: 1px; position: absolute; top: 50%; left: 0; content: ''; background: #fff;}
.project_list li .in .price_box .price2 {font-size: 1.5em; font-weight: 700; color: #fff;}
.project_list li .in .price_box .per {font-size: 1.4em; font-weight: 700; color: #f81816;}

.main_best .prod_list2 {gap: 1.5em;}
.main_best .prod_list2 li {flex: 1 23%;}
.main_best .prod_list2 li .in {}
.prod_list2 li .in .prod_img {border: 1px solid #ddd; position: relative; overflow: hidden;}
.prod_list2 li:hover .in .prod_img img,
.prod_list2 li:focus .in .prod_img img {transform: scale(1.2); transition: .3s;}
.prod_list2 li .in .prod_img .tag {position: absolute; background: var(--siteC); color: #fff; padding: 1em; z-index: 10; text-align: center; font-size: 0.9em;}
.prod_list2 li .in .prod_img .tag .num {font-weight: 700; font-size: 1.4em; margin-top: .1em;}
.prod_list2 li .in .prod_info {margin-top: 1em;}
.prod_list2 li .in .prod_info .cate {font-size: 0.9em; margin-bottom: .5em; color: #727272;}
.prod_list2 li .in .prod_info .tit {font-size: 1.125em; font-weight: 600; margin-bottom: 1em;}
.prod_list2 li .in .prod_info .price_box {gap: 1em;}
.prod_list2 li .in .prod_info .price_box .price {font-weight: 700;}
.prod_list2 li .in .prod_info .price_box .per {font-weight: 700; color: #f81816;}
.prod_list2 li .in .prod_info .price_box .per > i {font-size: 1em;}

.main_arrival {}
.main_arrival .flex {gap: 6em;}
.main_arrival .left_box {width: 43%;}
.main_arrival .right_box {}
.main_arrival .right_box .t1 {background: #1e1916; display: inline-block; color: #fff; padding: 0.3em 1.5em; border-radius: 3em; font-size: 0.86em; font-weight: 500; margin-bottom: 2em;}
.main_arrival .right_box .t2 {font-size: 2em; font-weight: 600; margin-bottom: 1.5em;}
.main_arrival .right_box .detail_list {}
.main_arrival .right_box .detail_list li {margin-bottom: 1em; font-size: 1.125em; color: #6f7478;}
.main_arrival .right_box .detail_list li:last-child {margin-bottom: unset;}
.main_arrival .right_box .detail_list li i {background: var(--siteC); color: #fff; width: 1.4em; height: 1.4em; border-radius: 50%; text-align: center; font-size: 1.6em; margin-right: 0.5em;}
.main_arrival .right_box .btn_box {margin-top: 7em;}
.main_arrival .right_box .more_btn {font-size: 1.125em; font-weight: 600;}
.main_arrival .right_box .more_btn i {background: #1e1916; color: #fff; width: 2em; height: 2em; border-radius: 50%; text-align: center; line-height: 2em; margin-left: 0.5em;}
.main_arrival .right_box .more_btn:hover i,
.main_arrival .right_box .more_btn:focus i {background: #62c7ff; transition: .3s;}

.keyword_list {gap: 1.3em;}
.keyword_list li {text-align: center; overflow: hidden; border-radius: 3em;}
.keyword_list li .in {display: block; background: #eeeeee; padding: 0.9em 1.2em; font-size: 1.125em; font-weight: 600;}
.keyword_list li:hover .in,
.keyword_list li:focus .in {background: var(--siteC); color: #fff; transition: .3s;}

.main_event {}
.main_event .plus {background: var(--siteC); color: #fff; margin-left: 0.5em; cursor: pointer; width: 1em; height: 1em; text-align: center; line-height: 1em; font-size: 0.7em; border-radius: 50%; font-weight: 400;}
.main_event .plus:hover {background: #1e1916; transition: .3s;}
.main_event .review_list {gap: .8em;}
.main_event .review_list li {flex: 1 20%; max-width: 20%; border: 1px solid #ddd;}
.main_event .review_list li .in {display: block;}
.main_event .review_list li .in .detail {padding: 1em;}
.main_event .review_list li .in .detail .t1 {font-size: 0.86em; margin-bottom: 1em; min-height: 2em; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.main_event .review_list li .in .prod_info {gap: .5em; padding-top: 0.5em; border-top: 1px solid #ddd;}
.main_event .review_list li .in .prod_info .left_img {width: 20%; border-radius: 50%; overflow: hidden;}
.main_event .review_list li .in .prod_info .left_img img {width: 100%;}
.main_event .review_list li .in .prod_info .right_tit {font-size: 0.9em; font-weight: 500; color: #7d7d7d;}
.main_event .review_list li:hover .in .detail .t1,
.main_event .review_list li:focus .in .detail .t1,
.main_event .review_list li:hover .in .prod_info .right_tit,
.main_event .review_list li:focus .in .prod_info .right_tit {color: #000;}
.main_event .review_list li .in .review_img { min-height: 16.8em; overflow: hidden;}
.main_event .review_list li:hover .in .review_img img,
.main_event .review_list li:focus .in .review_img img {transform: scale(1.2); transition: .3s;}
.main_event .review_list li .in .vod_wrap { position: relative;}

.banner_wrap {width: 65%; margin: 0 auto;}
.banner_wrap .left {color: #fff;}
.banner_wrap .left .t1 {font-size: 2.4em; font-weight: 700;}
.banner_wrap .left .t2 {font-size: 1.25em; font-weight: 300; margin-top: 1em;}
.applyBanner{ z-index:10; width:12em; height: 12em; z-index: 999; position: relative;}
.applyBanner .svgtt{ width:100%; height:100%}
.applyBanner .svgtt .tt{ font-weight:500; text-transform:uppercase; letter-spacing:.25em; font-size:.75em; fill:#fff;}
.applyBanner .in{ position:absolute; cursor: pointer; left:50%; top:50%; width:100%; height: 100%; line-height: 10em; color:#fff; font-weight: 600; border-radius:50%; transform:translate(-50%, -50%); text-align:center; box-sizing:border-box; padding:1em; transition: .3s;}
.applyBanner .in:hover,
.applyBanner .in:focus {transition: .3s; background: rgba(255, 255, 255, .1);}

/**/
.subscribe_wrap{}
.subscribe_wrap .subscribe_head .img_wrap{height:350px;}
.subscribe_wrap .subscribe_head .img_wrap .img{width:100%; height:100%;}
.subscribe_wrap .subscribe_head .text_wrap{width:1200px; padding:2em 3em; box-sizing:border-box; background:#fff; margin:-3rem auto 0; box-shadow:0px 4px 22px 2px rgba(0,0,0,.2);}
.subscribe_wrap .subscribe_head .text_wrap .tt{font-size:2.5em; width:300px; letter-spacing:-2.5px;}
.subscribe_wrap .subscribe_head .text_wrap .tt .first{vertical-align:baseline; letter-spacing:9px; font-weight:bold;}
.subscribe_wrap .subscribe_head .text_wrap .t1{width:calc(100% - 310px); font-size:1.25em; color:#777; line-height:1.6; padding-top:.25em;}
.subscribe_wrap .subscribe_body{margin-top:3rem;}
.subscribe_wrap .subscribe_body .subscribe_title{font-size:1.25em; margin-bottom:2rem;}
.subscribe_wrap .subscribe_body .subscribe_title i.xi{margin-right:6px; margin-top:-2px;}
.subscribe_wrap .subscribe_body .subscribe_sel_list{display:flex; justify-content:space-between;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li{width:30%; cursor:pointer;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap{border-radius:8px; position:relative; overflow:hidden;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap:before{content:''; display:block; width:30px; height:30px; border-radius:50%; background:#fff; position:absolute; left:-18px; top:50%; transform:translateY(-50%); z-index:5; border:2px solid #f69500; box-sizing:border-box;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap:before{border-color:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap:before{border-color:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap:before{border-color:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap:after{content:''; display:block; width:30px; height:30px; border-radius:50%; background:#fff; position:absolute; right:-18px; top:50%; transform:translateY(-50%); z-index:5; border:2px solid #f69500; box-sizing:border-box;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap:after{border-color:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap:after{border-color:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap:after{border-color:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_check{position:absolute; right:.5em; top:-1em; font-size:1.375em; color:#aaa; transition:.3s;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c1 .subscribe_sel_wrap .ssw_check{color:#f69500;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .ssw_check{color:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .ssw_check{color:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .ssw_check{color:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li:hover .subscribe_sel_wrap .ssw_check,
.subscribe_wrap .subscribe_body .subscribe_sel_list li:not(.off) .subscribe_sel_wrap .ssw_check{top:.375em;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_shape{width:20px; height:20px; background:#fff; border:2px solid #f69500; box-sizing:border-box; position:absolute; transform:rotate(45deg); z-index:10;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .ssw_shape{border-color:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .ssw_shape{border-color:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .ssw_shape{border-color:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_shape.s1{left:63px; top:-17px;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_shape.s2{left:63px; bottom:-17px;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in{border:2px solid #f69500; box-sizing:border-box; border-radius:8px; overflow:hidden;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in{border-color:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in{border-color:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in{border-color:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l{width:70px; display:flex; justify-content:center; align-items:center; background:#f7c476; border-right:3px dotted #fff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l{background:#ffafae;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l{background:#a6bef7;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l{background:#ddd;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l img{transform:rotate(-90deg) scale(1.4);}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r{padding:2em; box-sizing:border-box; width:calc(100% - 70px); overflow:hidden; position:relative;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r:before{content:'\ea7d'; font-family:'xeicon'; font-size:6em; color:#ddd; position:absolute; left:0; bottom:-.375em; transform:rotate(-12deg);}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name{display:inline-flex; padding:.25em .75em; background:#f69500; color:#fff; justify-content:center; align-items:center; border-radius:18px; margin-bottom:1rem; font-size:1.125em; margin-top:-.5rem; position:relative;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name{background:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name{background:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name{background:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before{content:''; display:; width:80px; height:100%; background:#f69500; position:absolute; left:-50px; top:0; z-index:-1;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before{background:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before{background:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before{background:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_ori_price{font-size:1.25em; color:#999; text-decoration:line-through; text-align:right;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price{text-align:right;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price span{vertical-align:baseline;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount{display:inline-flex; width:55px; height:26px; justify-content:center; align-items:center; border:1px solid #f69500; color:#f69500; border-radius:15px; box-sizing:border-box; padding-top:2px; margin-right:12px;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount{border-color:#ff4d4b; color:#ff4d4b;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount{border-color:#2667ff; color:#2667ff;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount{border-color:#aaa; color:#aaa;}
.subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .tt{font-size:1.625em; font-weight:bold;}

.notice_wrap{height:140px; border: 1px solid #ddd; box-sizing:border-box; border-radius:12px;}
.notice_wrap .xi{font-size:1.5em; color:#999; margin-bottom:.5rem;}
.notice_wrap .notice_ctt{font-size:1.125em; color:#777;}

.subscribe_prod_list{display:flex; flex-direction:column;}
.subscribe_prod_list > li{width:100%; padding:1em 2em; border-radius:12px; border:1px solid #ddd; margin-bottom:.75rem; box-sizing:border-box; transition:.3s;}
.subscribe_prod_list:not(.noHover) > li:hover,
.subscribe_prod_list:not(.noHover) > li:focus-within{border-color:var(--siteC);}
.subscribe_prod_list > li .subscribe_prod_in{}
.subscribe_prod_list > li .subscribe_prod_in .spi_month{font-size:1.25em; color:var(--siteC);}
.subscribe_prod_list > li .subscribe_prod_in .spi_sel_box{}
.subscribe_prod_list > li .subscribe_prod_in .spi_sel_box > div{}
.subscribe_prod_list > li .subscribe_prod_in .spi_sel_box > div .tt{margin-right:1rem;}
.subscribe_prod_list > li .subscribe_prod_in .spi_sel_box > div.same_check{width:120px;}

.price_st{font-size:1.25em;}
.price_st .num{color:#f70847; vertical-align:baseline;}

/*txt_setting*/
.bg_gray{background:#f5f5f5;}
.txt_bold{font-weight:bold; vertical-align:baseline;}
.txt_small{font-size:.875em; vertical-align:baseline;}
.txt_light{font-weight:200; vertical-align:baseline;}

.ttdot {position: relative; padding-left: 1.5em;}
.ttdot::before {width: 6px; height: 6px; border-radius: 50%; background: var(--siteC); position: absolute; top: 50%; left: 0%; content: ''; transform: translate(-50%, -50%);}

.vb{vertical-align:baseline;}

.about_index_wrap{}
.about_index_wrap .sub_page_bg_wrap{}
.about_index_wrap .sub_page_bg_wrap .img_wrap{height:580px;}
.about_index_wrap .sub_page_bg_wrap .img_wrap .img{width:100%; height:100%;}

.sub_page_wrap{padding-top:70px; padding-bottom:100px;}
.sub_page_wrap.st2{padding-bottom:150px;}
.sub_page_wrap.st3{padding:0;}
.sub_page_wrap.st4{padding:120px 0;}

.sub_page_wrap .sub_page_title_wrap{margin-bottom:40px;}
.sub_page_wrap .sub_page_title_wrap .title_sub{opacity:.5; font-size:.9375em; letter-spacing:.5px; margin-bottom:24px;}
.sub_page_wrap .sub_page_title_wrap .title{font-size:2.375em; margin-bottom:24px;}
.sub_page_wrap .sub_page_title_wrap .t1{font-size:1.375em; color:#555; line-height:1.6;}
.sub_page_wrap .sub_page_ctt_wrap{}
.sub_page_wrap .sub_page_ctt_wrap .box_st{background:#fff; box-shadow:0 0 15px 2px rgba(0,0,0,.1); padding:30px 0; width:300px; text-align:center; margin-bottom:2rem;}
.sub_page_wrap .sub_page_ctt_wrap .box_st .t1{font-size:1.0625em; color:var(--siteC); font-weight:bold; margin-bottom:1rem;}
.sub_page_wrap .sub_page_ctt_wrap .box_st .t2{font-size:1.1250em; color:#666;}
.sub_page_wrap .sub_page_ctt_wrap .box_st .t3{font-size:1.3750em; font-weight:bold;}
.sub_page_wrap .sub_page_ctt_wrap .t_caption{font-size:.875em; color:#777;}
.sub_page_wrap .sub_page_ctt_wrap .btns_wrap{margin-top:4rem;}
.sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st{cursor:pointer;}
.sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1{background:var(--siteC); color:#fff; width:240px; padding:18px 0;}
.sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1 .tt{font-size:1.1875em;}
.sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1 .xi{margin-left:1rem; transition:.3s;}
.sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1:hover .xi{margin-left:2rem; margin-right:-1rem;}

.sp_brand{}
.sp_brand .brand_ctt_wrap{margin-top:60px;}
.sp_brand .brand_ctt_wrap > div{width:570px;}
.sp_brand .brand_ctt_wrap > div .img_wrap{height:380px;}
.sp_brand .brand_ctt_wrap > div .img_wrap .img{width:100%; height:100%;}
.sp_brand .brand_ctt_wrap > div .txt_wrap{margin-top:30px; text-align:center;}
.sp_brand .brand_ctt_wrap > div .txt_wrap .t1{opacity:.5; font-size:.9375em; letter-spacing:.5px; margin-bottom:1.125rem;}
.sp_brand .brand_ctt_wrap > div .txt_wrap .t2{font-size:1.0625em; letter-spacing:-.5px; color:#555; font-weight:200; margin-bottom:20px;}
.sp_brand .brand_ctt_wrap > div .txt_wrap .t3{font-size:1.5em; margin-bottom:24px;}

.sp_product{position:relative;}
.sp_product .sp_product_bg_wrap{height:400px;}
.sp_product .sp_product_bg_wrap > div{width:50%; height:100%;}
.sp_product .sp_product_bg_wrap > div .img{width:100%; height:100%;}
.sp_product .sp_product_ctt_wrap{position:absolute; left:0; top:0; height:400px; width:100%; color:#fff; transition:.3s; transition-delay:.3s;}
.sp_product .sp_product_ctt_wrap.on{background:rgba(0,0,0,.4);}
.sp_product .sp_product_ctt_wrap .box2{height:100%; position:relative;}
.sp_product .sp_product_ctt_wrap .box2 > div:not(.sp_product_in_wrap){width:50%; height:100%; padding-top:4rem; box-sizing:border-box;}
.sp_product .sp_product_ctt_wrap .box2 > div:not(.sp_product_in_wrap).off{transform:translateY(30px); opacity:0; transition-delay:0s;}
.sp_product .sp_product_ctt_wrap .box2 > div.product_ctt_r{padding-left:80px;}
.sp_product .sp_product_ctt_wrap .box2 > div .product_Q{font-weight:200; font-size:3.125em;}
.sp_product .sp_product_ctt_wrap .box2 > div .product_title{font-size:1.875em; margin-top:-.5rem; margin-bottom:46px;}
.sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap{}
.sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st{cursor:pointer;}
.sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2{background:#fff; color:#555; width:140px; padding:6px 0;}
.sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2 .tt{}
.sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2 .xi{margin-top:2px; margin-left:8px; transition:.3s;}
.sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2:hover .xi{margin-left:14px; margin-right:-6px;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap{width:100%; height:100%; padding:0; transition:.3s; transition-delay:.9s; opacity:0; position:absolute; left:0; top:30px; z-index:-3;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap.on{display:flex; opacity:1; top:0; z-index:1; transition-delay:0;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .sp_product_in_close{position:absolute; right:0; top:2em; color:#ccc; font-size:1.5em; cursor:pointer; transition:.3s;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .sp_product_in_close:hover{color:#fff;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap > .flex{height:100%;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .title{font-size:1.5em; margin-bottom:1rem;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .t1{line-height:1.6; padding-right:3em; opacity:.8;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st{padding-left:80px;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap.n2 .gram_st{padding-left:30px;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st li:not(:nth-last-of-type(-n+2)){margin-bottom:1.5rem;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .icon_wrap{width:80px; height:80px; background:rgba(31,59,119,.7); color:#ddd; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:0; font-size:2.5em; border-radius:50%; display:flex; justify-content:center; align-items:center; margin-right:1rem;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .icon_wrap .num{padding-bottom:.25em; box-sizing:border-box;}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .gram_txt{width:calc(calc(100% - 80px) - 1rem);}
.sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .gram_txt .t1{padding-right:0; font-size:1.125em;}

.sp_contact{}
.sp_contact .btns_wrap{}
.sp_contact .btns_wrap .btn_st{cursor:pointer;}
.sp_contact .btns_wrap .btn_st.st1{background:var(--siteC); color:#fff; width:240px; padding:18px 0;}
.sp_contact .btns_wrap .btn_st.st1.c2{background:#333;}
.sp_contact .btns_wrap .btn_st.st1 .tt{font-size:1.1875em;}
.sp_contact .btns_wrap .btn_st.st1 .xi{margin-left:1rem; transition:.3s; margin-top:2px;}
.sp_contact .btns_wrap .btn_st.st1:hover .xi{margin-left:2rem; margin-right:-1rem;}

/*secAni*/
.conSection .ani{ opacity:0; transition:.5s;}
.conSection .ani.aniT{ transform:translateY(60px)}
.conSection .ani.aniB{ transform:translateY(-60px)}
.conSection .ani.aniL{ transform:translateX(30px)}
.conSection .ani.aniR{ transform:translateX(-30px)}
.conSection.secAni .ani{ opacity:1;}
.conSection.secAni .ani.aniT{ transform:translateY(0)}
.conSection.secAni .ani.aniB{ transform:translateY(0)}
.conSection.secAni .ani.aniL{ transform:translateX(0)}
.conSection.secAni .ani.aniR{ transform:translateX(0)}
.conSection.secAni .ani.delay1 { transition-delay:.3s;}
.conSection.secAni .ani.delay2 { transition-delay:.6s;}
.conSection.secAni .ani.delay3 { transition-delay:.9s;}
.conSection.secAni .ani.delay4 { transition-delay:1.2s;}
.conSection.secAni .ani.delay5 { transition-delay:1.5s;}
.conSection.secAni .ani.delay6 { transition-delay:1.8s;}
.conSection.secAni .ani.delay7 { transition-delay:2.1s;}
.conSection.secAni .ani.delay8 { transition-delay:2.4s;}
.conSection.secAni .ani.delay9 { transition-delay:2.7s;}
.conSection.secAni .ani.delay10{ transition-delay:3.0s;}

.flex.dv50{}
.flex.dv50 > *{width:50%;}

.location_wrap{}
.location_wrap .location_in{}
.location_wrap .location_in:not(:last-of-type){margin-bottom:4rem;}
.location_wrap .location_in .location_title{overflow:hidden; font-size:1.25em; position:relative; margin-bottom:1rem;}
.location_wrap .location_in .location_title:after{content:''; display:block; width:100%; height:3px; background:#ddd; position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:-1;}
.location_wrap .location_in .location_title .xi{color:var(--siteC); padding-right:.125em; background:#fff;}
.location_wrap .location_in .location_title .tt{background:#fff; padding-right:1rem;}
.location_wrap .location_in .map_cv{box-shadow:0 0 12px 2px rgba(0,0,0,.2); border-radius:0 0 10px 10px; overflow:hidden;}
.location_wrap .location_in .map_box{padding:1.5em; box-sizing:border-box; border-top:2px solid var(--siteC);}
.location_wrap .location_in .map_box .root_daum_roughmap{width:100% !important;}
.location_wrap .location_in .map_info{padding:1.5em; box-sizing:border-box; border-top:1px solid #ddd;}
.location_wrap .location_in .map_info li:not(:last-of-type){margin-right:2rem;}
.location_wrap .location_in .map_info .map_icon{display:flex; justify-content:center; align-items:center; background:var(--siteC); color:#fff; width:36px; height:36px; border-radius:50%; margin-right:6px;}
.location_wrap .location_in .map_info .map_icon .xi{font-size:1.125em;}


.sub_page_head_img_wrap{position:relative; margin-bottom:3.5rem; max-height:320px; overflow:hidden;}
.sub_page_head_img_wrap img{margin-top:-4rem;}
.sub_page_head_img_wrap .img_cover{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4); color:#fff;}
.sub_page_head_img_wrap .img_cover .sub_page_head_title{font-size:2.5em; font-weight:bold; position:relative;}
.sub_page_head_img_wrap .img_cover .sub_page_head_title:before{content:''; display:block; width:120px; height:4px; background:#fff; position:absolute; left:-150px; top:48%; transform:translateY(-50%);}
.sub_page_head_img_wrap .img_cover .sub_page_head_title:after{content:''; display:block; width:120px; height:4px; background:#fff; position:absolute; right:-150px; top:48%; transform:translateY(-50%);}

.sub_page_body_wrap{}
.sub_page_body_wrap > div:not(.info_wrap){width:50%;}
.sub_page_body_wrap > div.grt_box{padding-left:3rem; padding-right:3rem; box-sizing:border-box;}
.sub_page_body_wrap > div.grt_box .c_point{font-weight:bold; display:inline;}
.sub_page_body_wrap > div .tt{font-size:1.75em; margin-bottom:1.25rem;}
.sub_page_body_wrap > div.grt_box .t1{line-height:1.6; color:#777; margin-bottom:1.5rem;}
.sub_page_body_wrap > div.grt_box .t2{font-size:1.25em; font-weight:bold; margin-bottom:.875rem;}
.sub_page_body_wrap > div.grt_box .t3{color:#999; font-weight:bold;}
.sub_page_body_wrap > div.grt_box .t_centerline{display:inline-block; width:20px; height:1px; background:#333; margin:0 .5rem;}

.sub_page_body_wrap > div.graphic_wrap{padding-top:3rem;}
.sub_page_body_wrap > div.graphic_wrap .title{font-size:1.375em; colro:#555; line-height:1.6; text-align:center;}
.sub_page_body_wrap > div.graphic_wrap .box_st{background:#fff; box-shadow:0 0 15px 2px rgba(0,0,0,.1); padding:30px 0; width:80%; text-align:center; margin-bottom:2rem;}
.sub_page_body_wrap > div.graphic_wrap .box_st .t1{font-size:1.0625em; color:var(--siteC); font-weight:bold; margin-bottom:1rem;}
.sub_page_body_wrap > div.graphic_wrap .box_st .t2{font-size:1.1250em; color:#666;}
.sub_page_body_wrap > div.graphic_wrap .box_st .t3{font-size:1.3750em; font-weight:bold;}
.sub_page_body_wrap > div.graphic_wrap .t_caption{font-size:.875em; color:#777;}

.link_st{color:var(--siteC); font-size:1.125em; font-weight:bold;}
.link_st .xi{transition:.3s; font-weight:400;}
.link_st:hover .xi{transform:rotate(45deg);}

.mall_banner_wrap{}
.mall_banner_wrap > div{width:682px; max-width:48.5%; height:220px; background-size:100%; background-position:center; background-repeat:no-repeat; cursor:pointer; position:relative; transition:.3s;}
.mall_banner_wrap > div:before{content:''; display:block; width:100%; height:100%; background:#000; opacity:.3; position:absolute; left:0; top:0; z-index:1;}
.mall_banner_wrap > div:hover{background-size:110%;}
.mall_banner_wrap > div .mb_in{display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100%; position:relative; color:#fff; z-index:2;}
.mall_banner_wrap > div .mb_in .mb_title{font-size:1.5em; font-weight:bold; letter-spacing:1px; margin-bottom:2rem;}
.mall_banner_wrap > div .mb_in .mb_ctt{text-align:center; line-height:1.6; font-size:1.125em;}

.option_prd_name{font-size:.9375em;/* padding-bottom:.75rem;*/ /*border-bottom:2px solid #777;*/ flex:1 1 auto; width:calc(100% - 332px);}
/*.option_prd_name > span:first-of-type{max-width:60%;}*/
/*.option_prd_name > span:nth-of-type(2){max-width:40%;}
.option_prd_name > span.prd_count{margin-left:auto;}*/
.option_prd_name span{/*margin-right:2em;*/ position:relative; line-height:1.6;}
/*.option_prd_name span:not(:last-of-type):after{content:'\e93f'; font-family:'xeicon'; font-size:.9375em; color:#333; position:absolute; right:-1.5em; top:50%; transform:translateY(-50%);}*/
.option_prd_name span:last-of-type{margin-right:0;}

.opt_cancle{font-size:1.25em; cursor:pointer; margin-left:10px;}
.opt_cancle:hover{color:#0b54bb;}

.mall_prod_cate_name{font-size:1.25em; font-weight:bold; position:relative; display:inline-block; margin-top:2em; margin-bottom:1em;}
.mall_prod_cate_name:before{content:''; display:block; width:calc(100% + 1em); height:100%; background:#fff; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:-1;}
.mall_prod_cate_name:after{content:''; display:block; width:100vw; height:4px; background:#a8a8a8; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:-2;}

.subscribe_history_wrap{}
.subscribe_history_wrap .subscribe_history{}
.subscribe_history_wrap .subscribe_history th{background:#f5f5f5; border-top:2px solid #666;}
.subscribe_history_wrap .subscribe_history td{text-align:center;}
.subscribe_history_wrap .subscribe_history td:not(:last-of-type){border-right:1px solid #ddd;}
.subscribe_history_wrap .subscribe_history td.viewDetail{cursor:pointer;}
.subscribe_history_wrap .subscribe_history td.viewDetail:hover{text-decoration:underline; color:var(--siteC);}

.coupon_list_pop .table_notice{display:none; font-size:.875em; color:#555; margin-bottom:.5rem;}

.order_notice{display:none; font-size:.875em; color:#555; margin-top:1rem; margin-bottom:-2rem;}

.board_tit ~ .table_notice{display:none; font-size:.875em; color:#555; margin:.5rem 0;}
.subscribe_title ~ .table_notice{display:none; font-size:.875em; color:#555; margin:.5rem 0;}


.sub #footer .info_wrap .cs_wrap .cs .wrap_in.sub_dn{display:none;}
#footer .info_wrap .cs_wrap .cs .wrap_in.main_dn{display:block;}
.main #footer .info_wrap .cs_wrap .cs .wrap_in.main_dn{display:none;}

.dp2_best .tt_price.before{display:none;}

.page_con {padding: 6em 0;}
.page_con.p1 {padding: 8em 0;}

.sub_title {margin-bottom: 3em;}
.sub_title .ti {font-size: 2.4em; font-weight: 700; text-transform: uppercase;}

.brand_top_bg {height: 33em; overflow: hidden;}

.brand_intro {}
.brand_intro .bottom_tx {margin-bottom: 3em;}
.brand_intro .bottom_tx .t1 {font-size: 1.6em; font-weight: 700; margin-bottom: 1em;}
.brand_intro .bottom_tx .t2 {font-size: 1.25em; margin-bottom: 1em;}
.brand_intro .bottom_tx .t2:last-child {margin-bottom: unset;}

.brand_list {gap: 1em;}
.brand_list li {background: #fff; padding: 4em 1em 2em; border-top-left-radius: 10em; border-top-right-radius: 10em; flex: 1 25%;}
.brand_list li .tit {font-size: 1.125em; font-weight: 700; min-height: 3em;}
.brand_list li .img {margin: 2em auto; width: 80%; border: 1px solid #ddd; border-radius: 50%; overflow: hidden}
.brand_list li .txt {}