@charset "utf-8";
/* CSS Document */
.box0{ width:92%; margin:0 auto}
.box1{ width:1400px; margin:0 auto; max-width:92%}
.PC{ display:block !important}
.PHONE{ display:none !important}
.pc_hide{ display:none}
.m_response{ visibility:hidden; display:none}/*회원가입테이블*/
.en{ font-family:'Dancing Script','Pretendard','Noto Sans KR',sans-serif; letter-spacing:0;}
.dn1024 { display:block;}
.db1024 { display:none;}

.w20em{width:20em;}

.gnb li.m_hide{ display:none}
.gnb .layer{ display:none !important;}
.gnb a{ word-break:break-all;}

#div_loading{ position:fixed; text-align:center; top:50%; left:50%; margin-top:0px; margin-left:0px; z-index:1000; justify-content:center; align-items:center}
#div_loading .xi{ font-size:3em;-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}
#div_loading .tt{ font-size:1em}

/*header*/
#header{ position:relative; left:0; top:0; width:100%; z-index:1000}

#header .bn_wrap{ background:#000;}
#header .topBnSlide .el{ overflow:hidden;}
#header .topBnSlide .swiper-wrapper,
#header .topBnSlide .el,
#header .topBnSlide .el .in{ height:3.125em;}
#header .topBnSlide .el .in{ gap:.5em; color:#fff;}
#header .topBnSlide .el .in .tt{ font-size:1.125em; font-weight:500;}

#header .top_wrap{}
#header .top_wrap .wrapH{ height:6em}
#header .top_wrap .wrapBox{ display:flex; align-items:center; justify-content:space-between; gap:0 4em}
#header .top_wrap .logo > a{ display:block;}
#header .top_wrap .logo > a img{ height:4.25em;}
#header .top_wrap .logo > a .in{ display:block; position:relative}

#header .top_wrap .logo > a .in .tt{ font-size:2.500em; font-weight:800;}

#header .top_wrap .search_wrap{}
#header .top_wrap .search{ position:relative; display:flex; align-items:center; box-sizing:border-box; height:3em; padding:0 0 0 1.25em}
#header .top_wrap .search:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--crGray); border-radius:3em; box-sizing:border-box;}
#header .top_wrap .search .inp{ position:relative; width:20em; box-sizing:border-box; background:none; border:none; }
#header .top_wrap .search .btn{ position:relative; background:none; border:none; height:100%; width:3em; border-radius:50%; color:#fff; background:var(--crBlack)}

#header .top_wrap .side{ display:flex; align-items:center; gap:0 3em}
#header .top_wrap .member_wrap{ margin-left:auto; display:flex; align-items:center;}
#header .top_wrap .member_wrap > li > a{ color:#555; font-weight:500;}
#header .top_wrap .member_wrap > li > a:hover .tt{ text-decoration:underline;}
#header .top_wrap .member_wrap > li + li > a:before{ content:""; display:inline-block; vertical-align:middle; width:1px; height:.875em; background:#ccc; margin:0 .75em;}
#header .top_wrap .ico_wrap .list{ display:flex; align-items:center; gap:0 1.5em}
#header .top_wrap .ico_wrap .list > li > a{ text-align:center; padding-top:.5em}
#header .top_wrap .ico_wrap .list > li > a .ico{ position:relative}
#header .top_wrap .ico_wrap .list > li > a .ico .img{ height:1.75em}
#header .top_wrap .ico_wrap .list > li > a .ico .xi{ font-size:2em}
#header .top_wrap .ico_wrap .list > li > a .ico .no{ position:absolute; right:0; top:0; padding:.375em .625em; overflow:hidden; border-radius:3em; background:#111; color:#fff; font-size:.688em; transform:translate(50%, -25%); line-height:1}
#header .top_wrap .ico_wrap .list > li > a .tt{ display:block; font-size:.813em; font-weight:500; color:#555; margin-top:.5em}
#header .top_wrap .ico_wrap .list > li.m_cart > a .ico .no{ background:var(--siteC);}

#header .menu_wrap{ border:solid #eee; border-width:1px 0;}
.main #header .menu_wrap{ border-width:1px 0 0 0;}
#header .menu_wrap .wrapBox{ display:flex; align-items:center; gap:0 2em}
#header .menu_wrap .wrapH,
#header .menu_wrap .gnb_wrap .gnb > li .dp1{ height:3.75em}
#header .menu_wrap .gnb_wrap .gnb{ display:flex; gap:0 2em}
#header .menu_wrap .gnb_wrap .gnb > li{ position:relative; overflow:hidden;}
#header .menu_wrap .gnb_wrap .gnb > li .dp1{ position:relative; padding:0 1em; font-weight:600;}
#header .menu_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.188em}
#header .menu_wrap .gnb_wrap .gnb > li.plus .dp1 .arrow{ font-size:1em; margin-left:1em;}
#header .menu_wrap .gnb_wrap .gnb > li.plus .dp1 .arrow:before{ content:"\e941";}
#header .menu_wrap .gnb_wrap .gnb > li:first-child .dp1:after{ content:""; position:absolute; left:0; top:.25em; width:2.25em; height:1em; background:url(../images/inc/shape_roof.svg) no-repeat center top; background-size:contain; filter:var(--siteCfil); animation:moveUpDownAni 1.5s ease-in-out infinite;}
#header .menu_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC);}

#header .menu_wrap .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; transform:translate(-50%, 0); top:120%; background:var(--siteC); display:block; width:12em; padding:.5em; box-sizing:border-box; box-shadow:0 0 1em rgba(0,0,0,.1); visibility:hidden; opacity:0}
#header .menu_wrap .gnb_wrap .gnb > li .dp2:before{content:"\e92f"; font-family:xeicon; line-height:1; position:absolute; left:50%; transform:translate(-50%, .2em); bottom:100%; color:var(--siteC)}
#header .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em; color:#fff; transition:.3s}
#header .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover{ background:#fff; color:var(--siteC)}
#header .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ font-weight:500;}
#header .menu_wrap .gnb_wrap .gnb > li:hover{ overflow:visible;}
#header .menu_wrap .gnb_wrap .gnb > li:hover .dp2{ visibility:visible; opacity:1; top:100%; transition:top .3s}
#header .menu_wrap .gnb_wrap .gnb > li .dp3{ display:none;}

#header .menu_wrap .all{ width:3em;}
#header .menu_wrap .all_btn{ position:relative; display:block; width:2em; height:1.125em;}
#header .menu_wrap .all_btn .ham,
#header .menu_wrap .all_btn .ham:before,
#header .menu_wrap .all_btn .ham:after { display:block; width:100%; height:2px; background:#000; transition:.2s, background 0s;}
#header .menu_wrap .all_btn .ham:before,
#header .menu_wrap .all_btn .ham:after { content:""; position:absolute; left:0;}
#header .menu_wrap .all_btn .ham:before{ top:calc(50% - 1px); width:75%;}
#header .menu_wrap .all_btn .ham:after { top:calc(100% - 2px); width:88%;}
#header .menu_wrap .all_btn:hover .ham:before{ width:100%;}
#header .menu_wrap .all_btn:hover .ham:after { width:100%;}

#header .all_wrap .all_layer{ position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden; pointer-events:none;}
#header .all_wrap .all_layer .all_close{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); opacity:0;}
#header .all_wrap .all_layer .all_close .all_btn{ z-index:999; position:absolute; top:1em; left:31em; width:3em; height:3em; transition:.3s;}
#header .all_wrap .all_layer .all_close .all_btn .ham{ background:transparent !important; transition:0s;}
#header .all_wrap .all_layer .all_close .all_btn .ham:before,
#header .all_wrap .all_layer .all_close .all_btn .ham:after { height:4px; width:100% !important; top:50% !important; background:#fff;}
#header .all_wrap .all_layer .all_close .all_btn .ham:before{ transform:rotate(45deg);}
#header .all_wrap .all_layer .all_close .all_btn .ham:after { transform:rotate(-45deg);}
#header .all_wrap .all_layer .all_close .all_btn:hover{ transform:rotate(180deg);}
#header .all_wrap .all_layer .all_inner{ position:relative; width:30em; max-width:100%; height:100%; background:#fff; box-shadow:.5em 0 1em rgba(0,0,0,.15); transform:translateX(-100%);}
#header .all_wrap .all_layer .all_inner > .wrap_in{}

#header .all_wrap .all_layer .wrap_top{ padding-top:1.5em;}
#header .all_wrap .all_layer .wrap_top a{ transition:.2s;}
#header .all_wrap .all_layer .wrap_top .all_name{ gap:1em; padding:.5em 1em;}
#header .all_wrap .all_layer .wrap_top .all_name .ico{ font-size:2.500em;}
#header .all_wrap .all_layer .wrap_top .all_name .name{ flex:1;}
#header .all_wrap .all_layer .wrap_top .all_name .name .tt{}
#header .all_wrap .all_layer .wrap_top .all_name .name .t1{ font-size:.875em; color:#555;}
#header .all_wrap .all_layer .wrap_top .all_name .name .t2{ font-size:1.375em;}
#header .all_wrap .all_layer .wrap_top .all_name .name .po{ font-weight:700; vertical-align:baseline;}
#header .all_wrap .all_layer .wrap_top .all_name .name a:hover{ text-decoration:underline;}
#header .all_wrap .all_layer .wrap_top .all_mem{ gap:.25em; padding:1em 1em;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in{ height:2.25em; padding:0 1em; border:1px solid #ddd; border-radius:.25em; line-height:normal;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt{ font-size:.938em; font-weight:500;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover{ background:var(--crBlack); border-color:var(--crBlack); color:#fff;}
#header .all_wrap .all_layer .wrap_top .all_menu{ border:solid #eee; border-width:1px 0;}
#header .all_wrap .all_layer .wrap_top .all_menu > li{ flex:1;}
#header .all_wrap .all_layer .wrap_top .all_menu > li .in{ gap:.375em; height:4.5em; padding:0 .5em;}
#header .all_wrap .all_layer .wrap_top .all_menu > li .ico{ filter:var(--siteCfil);}
#header .all_wrap .all_layer .wrap_top .all_menu > li .ico img{ height:1.25em;}
#header .all_wrap .all_layer .wrap_top .all_menu > li .tt{ font-size:.938em; font-weight:500;}
#header .all_wrap .all_layer .wrap_top .all_menu > li .in:hover{ background:var(--crBlack); color:#fff;}
#header .all_wrap .all_layer .wrap_top .all_menu > li .in:hover .ico{ filter:var(--crWhitefil);}
#header .all_wrap .all_layer .wrap_middle{ padding:1em 1em 3em 1em; background:var(--crGray);}
#header .all_wrap .all_layer .wrap_middle .all_cate{}
#header .all_wrap .all_layer .wrap_middle .all_gnb{ margin-top:1em;}
#header .all_wrap .all_layer .wrap_middle .gnb{ flex-wrap:wrap;}
#header .all_wrap .all_layer .wrap_middle .gnb > li{ flex:1 1 100%;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_best,
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_new{ flex:1 1 50%; margin-top:1em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_best .dp1,
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_new .dp1{ display:flex; align-items:center; justify-content:center; gap:0 .25em; border-left-width:1px; margin-left:-1px; text-align:center;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_best .dp1 .arrow,
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_new .dp1 .arrow{ order:-1;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_best .dp1 .arrow:before{ content:"\ec0d";}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_new .dp1 .arrow:before { content:"\ea16";}
#header .all_wrap .all_layer .wrap_middle .gnb ul.flex{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb a{ position:relative; text-align:left; font-weight:500; transition:.2s;}
#header .all_wrap .all_layer .wrap_middle .gnb .m_hide{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus{}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus > a.link{ display:none;}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus > a.layer{ display:block !important; padding-right:2.5em;}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus > a .arrow{ position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em;}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus > a .arrow:before{ content:"\e943"; font-size:1.250em; display:block; transition:.2s;}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus > ul{ display:none;}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus.open > a .arrow:before{ transform:rotate(-180deg);}
#header .all_wrap .all_layer .wrap_middle .gnb li.plus.open > ul{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb > li:hover .dp1,
#header .all_wrap .all_layer .wrap_middle .gnb > li.plus.open .dp1{ background:var(--siteC); color:#fff;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.plus.open > a{ color:var(--siteC);}
#header .all_wrap .all_layer .wrap_middle .gnb ul{ padding:1em 1em;}
#header .all_wrap .all_layer .wrap_middle .gnb ul li > a{ padding:.75em .5em;}
#header .all_wrap .all_layer .wrap_middle .gnb ul li.plus .arrow{ right:.5em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li{ background:#fff;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1{ height:3.75em; padding:0 1.5em; border:solid var(--crGray); border-width:1px 0; margin-bottom:-1px;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .va{ font-size:1.125em;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a{ padding-left:1.5em;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before{ content:""; position:absolute; left:.75em; top:50%; width:.313em; height:.313em; background:var(--siteC); border-radius:50%; transform:translateY(-50%);}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .va{ font-size:1.063em;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li:hover > a{ background:var(--crGray)}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3{ background:var(--crGray2);}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a{ color:#444;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a{ border-top:1px dashed #ddd;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li:hover > a .va{ text-decoration:underline;}

#header .all_wrap .all_layer .wrap_bottom {padding:1em 1em 3em 1em; background:#fff;}
#header .all_wrap .all_layer .wrap_bottom .best_tit {}
#header .all_wrap .all_layer .wrap_bottom .best_tit p { font-size:1.375em; font-weight:600;}
#header .all_wrap .all_layer .wrap_bottom .best_tit p .xi { color:var(--siteC); vertical-align: baseline; margin-right: 0.3em;}
#header .all_wrap .all_layer .wrap_bottom .best_tit p span { vertical-align:baseline;}
#header .all_wrap .all_layer .wrap_bottom .best_inn { margin-top:1em; border-top:1px solid var(--siteC); border-bottom:1px solid var(--siteC);}
#header .all_wrap .all_layer .wrap_bottom .best_inn li > .in { height: 3.75em; padding: 0 1.5em; border: solid var(--crGray); border-width: 1px 0; margin-bottom: -1px; display: block !important; line-height:3.75em; font-size:1.125em; position:relative;}
#header .all_wrap .all_layer .wrap_bottom .best_inn li > .in:before { position:absolute; content:''; width:100%; height:100%; top:0; left:0; background-color:var(--siteC); opacity:0;}
#header .all_wrap .all_layer .wrap_bottom .best_inn li > .in .num {color:var(--siteC); margin-right:.5em;}
#header .all_wrap .all_layer .wrap_bottom .best_inn li > .in .name {}
#header .all_wrap .all_layer .wrap_bottom .best_inn li:first-child { font-weight:600;}
#header .all_wrap .all_layer .wrap_bottom .best_inn li > .in:hover:before { opacity:.1;}

.allGnbOn{ overflow-y:hidden}
.allGnbOn body{ overflow-y:scroll}
.allGnbOn #header .all_wrap .all_layer{ z-index:99; opacity:1; visibility:visible; pointer-events:all;}
.allGnbOn #header .all_wrap .all_layer .all_close{ opacity:1; transition:.4s;}
.allGnbOn #header .all_wrap .all_layer .all_inner{ transform:translateX(0); transition:.4s;}


#header .menu_wrap .cus_wrap{ margin-left:auto; display:flex; align-items:center; gap:0 1.5em;}
#header .menu_wrap .cus_wrap > li > a{}
#header .menu_wrap .cus_wrap > li > a .tt{ font-weight:500; line-height:normal;}
#header .menu_wrap .cus_wrap > li .c_point .tt{ font-weight:700;}
#header .menu_wrap .cus_wrap > li .po{ display:flex; align-items:center; gap:0 .25em; padding:.375em 1em; background:var(--crBlack); border-radius:5em; color:#fff;}
#header .menu_wrap .cus_wrap > li .po .xi{ font-size:1.063em;}
#header .menu_wrap .cus_wrap > li .po .tt{ font-size:.875em;}
#header .menu_wrap .cus_wrap > li > a:not(.po):hover .tt{ text-decoration:underline;}
#header .menu_wrap .cus_wrap > li .po:hover{ background:var(--siteC);}

.moveUpDownAni{ animation:moveUpDownAni 1.5s ease-in-out infinite;}
@keyframes moveUpDownAni {
0%  { transform:translateY(-.125em);}
50% { transform:translateY(.125em);}
100%{ transform: translateY(-.125em);}
}


#footer{}
#footer .cs_wrap{ border-top:1px solid #eee; padding:3em 0}
#footer .cs_wrap .wrapBox{ display:flex; flex-wrap:wrap; gap:0 6em;}
#footer .cs_wrap .cs_list{ flex:1; gap:0 5em;}
#footer .cs_wrap .cs_list > li{ flex:1;}
#footer .cs_wrap .cs_list .wrap_in{} 
#footer .cs_wrap .cs_list .wrap_in .wrap_tit{ font-weight:500; font-size:1.125em}
#footer .cs_wrap .cs_list .wrap_in .wrap_con{ padding:.5em 0 1em 0}
#footer .cs_wrap .cs_list .wrap_in .wrap_con:not(:last-child){ padding-bottom:1.75em;}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .no { font-weight:700; font-size:1.75em}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .no2{ font-weight:500; font-size:1.125em}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .t1{ color:#666}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .t2{ color:#999; font-size:.875em}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .board > li{ margin-top:.75em}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .board > li > a{ gap:0 1em;}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .board > li > a .t1{ flex:1; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
#footer .cs_wrap .cs_list .wrap_in .wrap_con .board > li > a:hover .t1{ text-decoration:underline;}

#footer .cs_wrap .menu_list{ width:45%; gap:1em;}
#footer .cs_wrap .menu_list > li{ display:flex; flex:1;}
#footer .cs_wrap .menu_list > li .wrap_in{ flex:1; gap:1em 0; padding:2em 1.75em; border-radius:.75em; position:relative;}
#footer .cs_wrap .menu_list > li .wrap_in .ico{ position:absolute; right:1em; bottom:1em; width:3em;}
#footer .cs_wrap .menu_list > li .wrap_in .ico img{ width:100%;}
#footer .cs_wrap .menu_list > li .wrap_in .tit{ font-size:1.125em; font-weight:600;}
#footer .cs_wrap .menu_list > li .wrap_in .txt{ font-size:.938em; color:#555;}
#footer .cs_wrap .menu_list > li:nth-child(1) .wrap_in{ background-color:#edeff1;}
#footer .cs_wrap .menu_list > li:nth-child(2) .wrap_in{ background-color:#dde5ed;}
#footer .cs_wrap .menu_list > li:nth-child(3) .wrap_in{ background-color:#e9e5de;}

#footer .copy_wrap{}
#footer .copy_wrap .wrapBox{ display:flex; flex-wrap:wrap; gap:0 5em; padding:2.5em 0 4em 0; border-top:1px solid #eee;}
#footer .copy_wrap .info_wrap{ flex:1;}
#footer .copy_wrap .info > li{ float:left; margin-right:2em; margin-bottom:.75em; letter-spacing:0}
#footer .copy_wrap .info > li.br{ clear:left}
#footer .copy_wrap .info > li.tit{ font-weight:600;}
#footer .copy_wrap .info > li.copyright{ font-size:.875em; opacity:.5; text-transform:uppercase; margin-top:2em}
#footer .copy_wrap .info:after{ content:""; display:block; clear:both}

#footer .copy_wrap .link_wrap{ gap:2em 0;}
#footer .copy_wrap .link_wrap > ul{ justify-content:flex-end;}
#footer .copy_wrap .link_wrap .menu{ gap:0 40.5px;}
#footer .copy_wrap .link_wrap .menu > li > a{}
#footer .copy_wrap .link_wrap .menu > li > a .tt{ font-size:1.063em; font-weight:500}
#footer .copy_wrap .link_wrap .menu > li > a:hover .tt{ text-decoration:underline;}
#footer .copy_wrap .link_wrap .link{ gap:0 .5em;margin-bottom: 2.75em;}
#footer .copy_wrap .link_wrap .link > li > a{ display:flex; align-items:center; gap:0 .25em; padding:.375em 1em; border:1px solid #ddd; border-radius:.25em; transition:.2s;}
#footer .copy_wrap .link_wrap .link > li > a .tt{ font-size:.938em; line-height:normal;}
#footer .copy_wrap .link_wrap .link > li > a .xi{ font-size:.938em;}
#footer .copy_wrap .link_wrap .link > li > a:hover{ background:var(--crBlack); border-color:var(--crBlack); color:#fff;}
#footer .copy_wrap .sns_wrap .sns{ gap:0 .5em;}
#footer .copy_wrap .sns_wrap .sns > li{}
#footer .copy_wrap .sns_wrap .sns > li > a{ width:2.5em; height:2.5em; border-radius:50%; transition:.2s;border: 1px solid #ddd;}
#footer .copy_wrap .sns_wrap .sns > li > a:hover{ background:var(--crBlack); color:#fff;}


#quick_new{ position:fixed; z-index:100; bottom:1em; right:.5em; text-align:right; transform:translateY(4.25em); transition:transform .4s;}
.scroll #quick_new{ transform:translateY(0);}
#quick_new .quick_wrap { position:relative; width:3.25em; height:3.25em; box-sizing:border-box; transition:width .3s;/*  overflow:hidden; */}
#quick_new .quick_wrap > .in{ position:relative; white-space:nowrap; overflow:hidden;}
#quick_new > li:not(:first-child){ margin-top:.5em;}
#quick_new > li .quick_wrap:before { content:''; position:absolute; top:0; right:0; width:100%; height:100%; border-radius:50%;} 
#quick_new > li .quick_wrap .quick_icon { text-align:center}
#quick_new > li .quick_wrap .quick_icon.st2 { width:45%;}
#quick_new > li .quick_wrap .quick_tt{ font-size:1.063em; font-weight:600; width:0; opacity:0; overflow:hidden;}
#quick_new > li .quick_wrap:not(.goTop):hover { width:100%; padding:0 1.75em 0 1.25em;}
/*#quick_new > li:last-child .quick_wrap:hover {width:45%;}*/
#quick_new > li .quick_wrap:hover:before { border-radius:10em;}
#quick_new > li .quick_wrap:hover .quick_tt { flex:1; width:100%; opacity:1; padding-left:.75em;}
#quick_new > li .quick_wrap:hover .quick_icon.st2 {width:20%;}

#quick_new > li .kakao_btn {color:#3b1e1e;}
#quick_new > li .kakao_btn:before { background:#fbe300;}
#quick_new > li .call_btn {color:#fff;}
#quick_new > li .call_btn:before { background:var(--siteC);}
#quick_new > li .naver_btn {color:#00c63b;}
#quick_new > li .naver_btn:before { background:#fff; border:1px solid #00c63b;}
#quick_new > li .goTop {color:#fff; padding:0 !important}
#quick_new > li .goTop:before { background:#aaa; border:1px solid transparent;}


/**/
#contents{ overflow:hidden;}
#contents .sub_top_wrap{ position:relative; z-index:99;}
#contents .sub_top_wrap .sub_visual{ padding:3.5em 0 0; position:relative; text-align:center;}
#contents .sub_top_wrap .sub_visual .va{ position:relative; z-index:1}
#contents .sub_top_wrap .sub_visual .t1{ font-size:.688em; font-weight:500; letter-spacing:1em; text-transform:uppercase; opacity:.6;}
#contents .sub_top_wrap .sub_visual .t2{ font-size:2.000em; font-weight:700;}

#contents .sub_top_wrap .sub_gnb{ position:relative; margin-top:3.5em;}
#contents .sub_top_wrap .sub_gnb .gnb{ display:block;}
#contents .sub_top_wrap .sub_gnb .gnb > li,
#contents .sub_top_wrap .sub_gnb .gnb > li .dp1{ display:none}
#contents .sub_top_wrap .sub_gnb .gnb > li.on{ display:block;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2{ text-align:center; justify-content:center; padding-left:1px;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li{}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li > a{ padding:.5em 0; line-height:1; display:block; text-align:center; font-weight:500;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li:not(:first-child) > a:before { content:""; width:1px; height:1em; margin:0 1.5em; background:#ccc;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li > a .va{ position:relative; padding:0 .375em; font-size:1.125em;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li > a .va:after{ content:""; position:absolute; left:0; top:50%; width:100%; height:.75em; background:var(--siteC); opacity:0; transform:scaleY(0); transform-origin:center bottom; transition:.2s;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li.on > a{ color:var(--siteC); font-weight:600;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li:hover > a .va:after,
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li.on > a .va:after{ opacity:.07; transform:scaleY(1);}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3{ display:none;}

#contents .doc{ padding:5em 0 8em 0; min-height:70vh; box-sizing:border-box;}
html.shopping #contents .doc,
body.shopping #contents .doc{ padding-top:2.5em;}

/**/
.greeting_Wrap {margin-top:0em;}
.greeting_Wrap .imgw {width:40%; margin-right:5%;}
.greeting_Wrap .top_tw {width:45%; margin:0 auto;}
.greeting_Wrap .top_tw.line { position: relative; margin-top: 3em; }
.greeting_Wrap .top_tw.line:before { position: absolute; content: ""; width: 46%; height: 2px; background:#de2327; top: -30px; left: 50%; transform: translate(-50%, -50%); }
.greeting_Wrap .top_tw .hi { line-height:1.35; font-size:1.8em; color:#222; font-weight:500; margin-bottom:1.5em; margin-top:1em;}
.greeting_Wrap .top_tw .hi .col {color:#de2327; font-weight:700; vertical-align:baseline; font-size:1.375em;}

.greeting_Wrap .con2 > p { font-size:1.063em; color:#555; line-height:1.6; padding-bottom:1em;}
.greeting_Wrap .con2 .t2{ font-size:1.125em; text-align:right; margin-top:2em;}
.greeting_Wrap .con2 .t2 .name{ font-size:1.188em; margin-left:1em; color:#222;}
.greeting_Wrap .con2 .t3{ font-size:.9em; padding-bottom: 0;} 
.greeting_Wrap .con2 .t4 {font-weight:500; font-size:1.1em;}
.greeting_Wrap .con2 .name {color:#de2327; font-weight:500; vertical-align:baseline; font-size:1.1em;}
.greeting_Wrap .imgw { width:50%; position:relative; text-align:center;}
.greeting_Wrap .imgw img{ position:relative; width:29em;}
.greeting_Wrap .con2 .col {color:#de2327; vertical-align: baseline;}


/**/
.mall_nav{position:relative; z-index:100; margin-bottom:.688em; margin-top:0}
.mall_nav > li{ position:relative;}
.mall_nav > li:not(:first-child){ margin-left:.5em; padding-left:1.25em;}
.mall_nav > li .sec{ position:absolute; font-size:.875em; left:0; top:50%; text-align:center; transform:translateY(-50%); color:#aaa}
.mall_nav > li .sec:before{ content:"\e940"}
.mall_nav > li.home a{ width:1.5em; height:1.5em; padding:0; text-align:center; background:#000; color:#fff !important; border-radius:50%}
.mall_nav > li.home a .icon:before{ content:"\e902"; font-size:.750em}
.mall_nav > li a{ overflow:hidden; position:relative; text-align:left;}
.mall_nav > li .dp1{ display:flex; align-items:center; justify-content:center; padding:.75em 0; color:#666; line-height:1em;}
.mall_nav > li .dp1 .arrow{ font-size:1.125em; padding-left:.5em}
.mall_nav > li .dp1 .arrow:before{ content:"\e936"}
.mall_nav > li .dp2_wrap{ position:absolute; left:0; width:12em; opacity:0; visibility:hidden; padding-top:.688em}
.mall_nav > li .dp2_wrap .line{ position:absolute; height:1px;}
.mall_nav > li .dp2_wrap .line1{ width:1em; height:1em; top:-1px; left:1em; transform:rotate(-45deg); background:#fff; transform-origin:right top; border:1px solid #222; border-bottom:none; border-left:none}
.mall_nav > li .dp2{ border:1px solid #111; box-shadow:4px 4px 5px rgba(0,0,0,.2); background:#fff; padding:.75em 0 .5em 0;}
.mall_nav > li .dp2 > li > a{ padding:.25em 2em .25em 1em}
.mall_nav > li .dp2 > li > a .va{ font-size:.875em; word-break:break-all; transition:.3s}
.mall_nav > li .dp2 > li > a .arrow{ position:absolute; right:-2em; top:.125em; width:1.5em; text-align:center; transition:.3s}
.mall_nav > li .dp2 > li > a .arrow:before{content:"\e93f"; font-size:.75em}
.mall_nav > li .dp2 > li > a:hover .arrow{ right:0}
.mall_nav > li .dp2 > li > a:hover{ color:var(--siteC)}
.mall_nav > li:hover .dp1,
.mall_nav > li.on .dp1{ color:#000}
.mall_nav > li:hover .dp2_wrap,
.mall_nav > li.on .dp2_wrap{ opacity:1; visibility:visible}

.sub_lnb_wrap{}
.sub_lnb_wrap .cate_tit_wrap{ gap:1.5em; padding:1.5em 0; margin-bottom:1em;}
.sub_lnb_wrap .cate_tit{ flex:1;}
.sub_lnb_wrap .cate_tit .tt{ display:inline-block;}
.sub_lnb_wrap .cate_tit .tt.fwL{ font-weight:300;}
.sub_lnb_wrap .cate_tit .t1{ font-size:2.000em; font-weight:700;}
.sub_lnb_wrap .cate_tit .t2{ font-size:1.250em; font-weight:500;}
.sub_lnb_wrap .cate_tit .t2:before{ content:""; display:inline-block; margin:0 .5em; width:1em; height:2px; background:#343b4d;}
.sub_lnb_wrap .cate_list{ margin-bottom:1.5em;}
.sub_lnb_wrap .cate_list .dp2{ flex-wrap:wrap;}
.sub_lnb_wrap .cate_list .dp2 li .va_wrap{ text-align:left; line-height:1.1;}
.sub_lnb_wrap .cate_list .dp2 > li{ position:relative; display:flex; align-items:center;}
.sub_lnb_wrap .cate_list .dp2 > li:not(:last-child):after{ content:""; display:inline-block; width:1px; height:1em; margin:0 1.5em; background:#ccc;}
.sub_lnb_wrap .cate_list .dp2 > li > a{ position:relative; padding:.25em 0; height:2.5em; text-align:left; word-break:break-all;}
.sub_lnb_wrap .cate_list .dp2 > li > a .va{ position:relative; font-size:1.250em; font-weight:500; z-index:2;}
.sub_lnb_wrap .cate_list .dp2 > li > a .va:before{ content:""; position:absolute; top:-1.25em; left:50%; width:.375em; height:.375em; background:var(--siteC); border-radius:50%; transform:translateX(-50%); opacity:0; transition:.3s;}
.sub_lnb_wrap .cate_list .dp2 > li .dp3{ position:absolute; z-index:-1; left:0; top:100%; width:12em; padding:.25em; background:#fff; border:1px solid #343b4d; opacity:0; visibility:hidden}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a{ position:relative; padding:.5em 1em; padding-left:1.5em; color:#555;}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a:after{ content:"\e97e"; font-family:xeicon!important; position:absolute; left:.5em; top:.75em; font-size:.813em; color:#aaa}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a .va{ font-size:.938em;}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a:hover{ background:var(--siteC);}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a:hover, 
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a:hover:after{ color:#fff;}
.sub_lnb_wrap .cate_list .dp2 > li .dp4{ display:none;}
.sub_lnb_wrap .cate_list .dp2 li.plus > a{ padding-right:2em; position:relative}
.sub_lnb_wrap .cate_list .dp2 li.plus > a .arrow{ position:absolute; right:0; top:50%; transform:translateY(-50%)}
.sub_lnb_wrap .cate_list .dp2 > li.plus > a .arrow:before{ content:"\e942";}
.sub_lnb_wrap .cate_list .dp3 > li.plus > a .arrow{ background:#f2f5f6;}
.sub_lnb_wrap .cate_list .dp2 > li:hover > a .va:before{ top:-.75em; opacity:1;}
.sub_lnb_wrap .cate_list .dp2 > li:hover .dp3{ z-index:99; opacity:1; visibility:visible}

.sub_lnb_wrap .cate_list.st2{}
.sub_lnb_wrap .cate_list.st2 .dp2{ flex-direction:column; padding-right:2.75em;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li{ flex:1; border-bottom:1px solid #eee;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li:after{ display:none;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li > a{ flex:1; padding-left:.5em; position:relative; display:inline-block}
.sub_lnb_wrap .cate_list.st2 .dp2 > li > a:after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--siteC); opacity: 0;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li > a.on:after { opacity:.1;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li > a.on .va { font-weight:600; color:var(--siteC);}
.sub_lnb_wrap .cate_list.st2 .dp2 > li > a .va{ font-size:1em;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li > a .va:before{ display:none;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li .dp3{ top:0; left:100%;}
.sub_lnb_wrap .cate_list.st2 .dp2 li.plus > a .arrow{ right:.375em;}
.sub_lnb_wrap .cate_list.st2 .dp2 > li:hover > a{ background:var(--crGray3);}

.shopping_search{}
.shopping_search .search{}
.shopping_search .search > *{}
.shopping_search .search > dt{ font-size:.938em; color:#222; font-weight:500; padding-right:1.5em;}
.shopping_search .search > dd{}
.shopping_search .search .input_st{ padding:0 0; background:none; border:none;}
.shopping_search .search .input_st.inp{ width:20em; border-bottom:2px solid #000}
.shopping_search .search .input_st.btn{ min-width:3em; color:#000;}
.shopping_search .search .input_st.btn .xi{ margin:0 0; font-size:1.750em;}

.sub_con_wrap{}

.prodListImg{ padding:3em 5em; height:12.5em; position:relative; box-sizing:border-box; margin:-1em 0 1.5em 0;}

/**/
.list_prod_wrap{}
.list_prod_wrap .fl_wrap{ overflow:visible;}
.list_prod_wrap .list_prod_tit{ color:#111; position:relative; margin-bottom:1.5em}
.list_prod_wrap .list_prod_tit .t1{ font-size:1.625em; vertical-align:baseline; margin-right:.5em}
.list_prod_wrap .list_prod_tit .t2{ font-size:1.063em;}
.list_prod_wrap .list_prod_tit .t3{ color:#CC0000; font-weight:700; font-size:1.313em;}
.list_prod_wrap .list_prod_tit .t3.c1{ color:#333}
.list_prod_wrap .list_prod_tit .t3.c2{ color:var(--siteC)}
.list_prod_wrap .list_prod_tit .t4{ font-size:1.063em; margin-right:.5em}
.list_prod_wrap .list_prod_tit .btn{ position:absolute; right:0; bottom:.875em; padding:.25em 1em; background:#f5f5f5; border:1px solid #ddd; font-size:.688rem; color:#666; transition:.3s}
.list_prod_wrap .list_prod_tit .btn .xi{ padding-right:.25em}
.list_prod_wrap .list_prod_tit .btn .add:before{content:"\e9a7"}
.list_prod_wrap .list_prod_tit .btn .arrow{ padding:0 0 0 .5em}
.list_prod_wrap .list_prod_tit .btn .arrow:before{content:"\e93f"}
.list_prod_wrap .list_prod_tit .btn:hover{ background:#333; color:#fff; border-color:transparent}
.list_prod_wrap .list_prod_tit .btn.st1{ top:-.25em; bottom:auto; padding:.438em 3em; font-size:.875rem; background:#630D0D; border-color:transparent; color:#fff; border-radius:2em}
.list_prod_wrap .list_prod_tit.st1{ border-bottom:1px solid #ddd; padding-bottom:1em; margin-bottom:1em}
.list_prod_wrap .list_prod_tit .tbox{ float:left}
.list_prod_wrap .list_prod_tit .search{ float:right; font-size:.813em}

.list_prod_wrap .list_prod .di_wrap{ font-size:inherit }
.list_prod_wrap .list_prod .prod:not(.swiper-wrapper){ display:flex; flex-wrap:wrap; gap:4em 2.5em;}
.list_prod_wrap .list_prod .prod:not(.swiper-wrapper) .el{ display:flex; width:calc(20% - 2em);}
.list_prod_wrap .list_prod .prod .swiper-slide{ height:auto}
.list_prod_wrap .list_prod .prod .in{ position:relative; display:flex; flex-direction:column; flex:1; min-width:0;}
.list_prod_wrap .list_prod .prod .in .img_wrap{ display:block; position:relative; overflow:hidden;}
.list_prod_wrap .list_prod .prod .in .img_wrap img{ width:100%; height:100%; object-fit:cover; transition:.3s}
.list_prod_wrap .list_prod .prod .in .con_wrap{ display:flex; flex-direction:column; flex:1; gap:.75em 0; padding:2em 0 0 0;}
.list_prod_wrap .list_prod .prod .in .con_wrap .tt *{ display:inline; vertical-align:baseline;}
.list_prod_wrap .list_prod .prod .in .con_wrap .t1{ display:block; font-size:.938em; color:#555; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.list_prod_wrap .list_prod .prod .in .con_wrap .t2{ display:block; font-size:1.188em; font-weight:600; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:.3s;}
.list_prod_wrap .list_prod .prod .in .con_wrap .t3{ display:block; font-size:.75em; line-height:1.2em; height:2.4em; overflow:hidden; opacity:.6; word-break:break-all}
.list_prod_wrap .list_prod .prod .priceBox{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end; gap:.125em .75em; margin-top:auto; text-align:right;}
.list_prod_wrap .list_prod .prod .price{ width:100%;}
.list_prod_wrap .list_prod .prod .price > i{ vertical-align:baseline}
.list_prod_wrap .list_prod .prod .price .no { font-size:1.188em; font-weight:800;}
.list_prod_wrap .list_prod .prod .price .won{ padding-left:.125em;}
.list_prod_wrap .list_prod .prod .discount{ font-size:.938em; color:#77787b; text-decoration:line-through;}
.list_prod_wrap .list_prod .prod .per{ font-size:1.063em; color:var(--siteC); font-weight:700}
.list_prod_wrap .list_prod .prod .priceBox.st2 .price{ flex:1; width:auto;}
.list_prod_wrap .list_prod .prod .in .best_num{ position:absolute; z-index:2; top:-.625em; left:-.625em; width:3.5em; line-height:3.5em; background:#f2f5f6; border-radius:100%; text-align:center;}
.list_prod_wrap .list_prod .prod .in .best_num .no{ font-size:1.375em; color:#444; font-weight:700; font-style:italic; letter-spacing:0;}
.list_prod_wrap .list_prod .prod .in:hover .img_wrap{ box-shadow:0 0 1em rgba(0,0,0,.1); transition:.3s;}
.list_prod_wrap .list_prod .prod .in:hover .con_wrap .t2{ color:var(--siteC)}

.prod_graph_wrap{ display:flex; flex-direction:column; gap:1.25em; margin:1em 0; padding:1.5em 1em; border:solid #eee; border-width:1px 0;}
.prod_graph_wrap > *{ min-width:0;}
.prod_graph_wrap > .tit{ font-size:1.125em; font-weight:600;}
.prod_graph_wrap .group_graph_rate,
.prod_graph_wrap .group_graph_info{ width:100%;}
.prod_graph_wrap .group_graph_rate > .full{ height:1em;}
.group_graph_rate > .full{ position:relative; height:.5em; border-radius:5em; background:#d8dce0; overflow:hidden;}
.group_graph_rate > .full .bar{ position:absolute; top:0; left:0; height:100%; background:var(--siteC);}

.dp1_mypage .prod_graph_wrap {border: none; padding: unset;}

.group_graph_info{ display:flex; align-items:center; gap:0 1em;}
.group_graph_info *{ vertical-align:baseline;} 
.group_graph_info .num{ flex:1;}
.group_graph_info .date{ color:#555; font-weight:600;}

.list_prod_wrap .list_prod .prod .item_list{ flex:1; padding-top:1.5em;}
.list_prod_wrap .list_prod .prod .item_list .item_in{ display:flex; flex-wrap:wrap; align-items:center; gap:1em; padding:.5em 0; border-top:1px solid #eee; transition:.3s;}
.list_prod_wrap .list_prod .prod .item_list .item_in > *{ min-width:0;}
.list_prod_wrap .list_prod .prod .item_list .item_in .item_img{ width:4.5em;}
.list_prod_wrap .list_prod .prod .item_list .item_in .item_con{ flex:1;}
.list_prod_wrap .list_prod .prod .item_list .item_in .item_con .t1{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.list_prod_wrap .list_prod .prod .item_list .item_in .priceBox{ text-align:left;}
.list_prod_wrap .list_prod .prod .item_list .item_in .price > *{ font-size:1.063em !important; font-weight:500 !important;}
.list_prod_wrap .list_prod .prod .item_list .item_in:hover{ background:#f7f7f7;}

.list_prod_wrap .list_prod .prod.package .el{ flex-direction:column;}
.list_prod_wrap .list_prod .prod.package .el .in .con_wrap .t2{ min-height:2.75em;}

.list_prod_wrap .list_prod.mainPromotionSlide .prod .in{ display:flex; gap:0 4em; width:100%; align-items:center}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .img_wrap{ width:40%; box-sizing:border-box; background:none; border-radius:50%; border:none; box-shadow:none; overflow:visible}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .img_wrap:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; padding-bottom:100%; background:#fff; border-radius:50%; opacity:.7; transition:.3s}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .img_wrap .resize_wrap{ position:relative; z-index:1; display:block; padding-bottom:100%}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .img_wrap .resize_wrap .wrap_re{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:65%}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .img_wrap .resize_wrap .wrap_re img{ box-shadow:0 0 1em rgba(0,0,0,.1)}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .con_wrap{ flex:1 1 0%; min-width:0; padding:0}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .con_wrap .t1{ color:#111; font-size:1.5em; color:var(--siteC)}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .con_wrap .t2{ font-size:1.625em; font-weight:600 }
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in .con_wrap .priceBox{ margin-top:2em; font-size:1.25em}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in:hover .img_wrap:after{ background: linear-gradient(-45deg, #2275ff 0%, #0e8d0b 100%);}
.list_prod_wrap .list_prod.mainPromotionSlide .prod .in:hover .con_wrap .t2{ text-decoration:underline; color:#111}

.list_prod_wrap .list_prod .prod.st1 .el{ width:20%}
.list_prod_wrap .list_prod .prod.st1 .in{ background:#f5f5f5; padding:1.5em; box-sizing:border-box; height:100%; transition:.3s}
.list_prod_wrap .list_prod .prod.st1 .in .t2{ text-align:center; font-size:1.125em; font-weight:600}
.list_prod_wrap .list_prod .prod.st1 .in:hover{ background:none}

.list_prod_wrap .list_prod .prod.hz2{ gap:4em 2em;}
.list_prod_wrap .list_prod .prod.hz2 .el{ display:flex; width:calc(50% - 1em)}

.list_prod_wrap .list_prod .prod.hz3{ gap:4em 2em;}
.list_prod_wrap .list_prod .prod.hz3 .el{ display:flex; width:calc(33.33% - 1.3333em)}

.list_prod_wrap .list_prod .prod.hz4{ gap:4em 2em;}
.list_prod_wrap .list_prod .prod.hz4 .el{ display:flex; width:calc(25% - 1.5em)}

.prod_icon{ overflow:hidden; display:flex; flex-wrap:wrap; gap:.125em}
.prod_icon .icon{ display:flex; align-items:center; justify-content:center; height:2em; border-radius:.25em; padding:0 .75em; line-height:2em; font-size:.625em; font-weight:700; text-transform:uppercase; color:#fff}
.prod_icon .icon:before{ font-family:xeicon; font-size:1.25em; margin-right:.125em; font-weight:normal;}
.prod_icon .icon.c1{ background:#f0164a}
.prod_icon .icon.c2{ background:#e44e3d}
.prod_icon .icon.c3{ background:#fe9b21}
.prod_icon .icon.c4{ background:#111;}
.prod_icon .icon.c5{ background:#f53fc6;}
.prod_icon .icon.c6{ background:#4169E1;}
.prod_icon .icon.c7{ background:#FDBD01;}
.prod_icon .icon.c8{ background:#aaa;}
.prod_icon .icon.c1:before{content:"\eba4"; display:none;}
.prod_icon .icon.c2:before{content:"\e9da"}
.prod_icon .icon.c3:before{content:"\e905"}

.list_prod_wrap.slide{ position:relative;}
.list_prod_wrap.slide .list_prod .prod .el{ float:left;}
.list_prod_wrap.slide .list_prod .prod .in{ margin-bottom:0;}
.list_prod_wrap.slide .list_prod .prod{ display:none;}
.list_prod_wrap.slide .list_prod .prod.slick-slider{ display:block;}

.list_prod_wrap.slide.st2 .list_prod{ margin:0 0 0 0;}
.list_prod_wrap.slide.st2 .list_prod .prod .in{ margin:0 .5rem;}

.list_check_wrap{ position:relative; margin-top:2.25em !important}
.list_check_wrap > a{ display:block}
.list_check_wrap .list_check{ position:absolute; left:0; top:-2.25em; width:100%}
.list_check_wrap .list_check label{ margin-left:-.25em; font-size:.813em}
.list_check_wrap .list_check .del{ color:#666; opacity:0; font-size:.688em; margin-top:.438em}
.list_check_wrap .list_check .del .xi{ padding:0}
.list_check_wrap .list_check .del .xi:before{ content:"\e922"}
li:hover .list_check_wrap .del{ opacity:1}

.list_prod_wrap.box_st{ border:1px solid #c7cbd0; padding:2em 2em; border-radius:.5em;}

.list_prod_wrap .wrap_top{ display:flex; align-items:center; border-bottom:1px solid #111; margin:1.5em 0 3em 0; overflow:visible;}
.list_prod_wrap .wrap_top .wrap_tit{ flex:1; margin-bottom:0;}
.list_prod_wrap .wrap_top .wrap_tab{ font-size:.938em; border-bottom:none}
.list_prod_wrap .wrap_top .wrap_tab > li{ width:9em}
.list_prod_wrap .wrap_top .wrap_tab > li.on > a{ color:#000; border-color:#111;} 

.main_tap {text-align: center; justify-content: center; padding-left: 1px;}
.main_tap > li {}
.main_tap > li a {padding: 0.5em 0; line-height: 1;text-align: center; font-weight: 500;}
.main_tap > li:not(:first-child) a:before {content: ""; width: 1px; height: 1em; margin: 0 1.5em; background: #ccc; display:inline-block}
.main_tap > li a p {position: relative; padding: 0 0.375em; font-size: 1.125em;}
.main_tap > li a p:after {content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 0.75em; background: var(--siteC); opacity: 0; transform: scaleY(0); transform-origin: center bottom; transition: .2s;}
.main_tap > li.on a p {color: var(--siteC); font-weight: 600;}
.main_tap > li.on a p:after { opacity: .07; transform: scaleY(1);}

/*상품 페이지 레이아웃 NEW*/
.listLayout_wrap{}
.listLayout{ display:flex; flex-wrap:wrap; box-sizing:border-box; gap:0 6em;}
.listLayout > *{ box-sizing:border-box; min-width:0;}
.listLayout > .layCon{ flex:1;}
.listLayout > .layInfo{ width:23%; min-width:25.5em;}
.listLayout > .layInfo .layInner.sticky{ position:sticky; top:2em; z-index:5;}

.listTopSlide_wrap{ position:relative; margin-bottom:3em;}
.listTopSlide_wrap .control{ margin-top:1.5em !important;}
.listTopSlide_wrap .control:not(.show){ display:none !important;}
.listTopSlide .el .in{ display:block;}
.listTopSlide .el .in .resize{ padding-bottom:25%;}

.listLayout .shopping_search .search .input_st.inp{ width:100%;}

/**/

.shopping_top_banner{ height:0; padding-bottom:26.78571428571429%; background-position:center top; background-repeat:no-repeat}

.list_coupon_wrap .list_coupon{ margin:0 0 -3em -1.5em;}
.list_coupon_wrap .list_coupon .coupon .in{ margin:0 0 3em 1.5em; text-align:center;}
.list_coupon_wrap .list_coupon .coupon .item{ box-sizing:border-box; background:var(--siteC); border:2px solid var(--siteC); border-right:none; border-radius:1em; overflow:hidden; text-align:left;}
.list_coupon_wrap .list_coupon .coupon .item.resize{ padding-bottom:50%;}
.list_coupon_wrap .list_coupon .coupon .item:before,
.list_coupon_wrap .list_coupon .coupon .item:after { content:""; position:absolute; top:50%; margin-top:-1.25em; width:2.5em; height:2.5em; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2) inset; border-radius:50%;}
.list_coupon_wrap .list_coupon .coupon .item:before{ left:-1.5em; display:none;}
.list_coupon_wrap .list_coupon .coupon .item:after { right:-1.5em;}
.list_coupon_wrap .list_coupon .coupon .item .flex{ align-items:stretch; justify-content:flex-start;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap{ flex:1; padding:1em 1.25em; padding-right:.25em; background:#fff;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .sbj{ display:inline-block; padding:.125em .5em; border:1px solid var(--siteC); font-size:.813em; color:var(--siteC);}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .tit{ margin:.125em 0; color:#111;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .tit .tt{ display:inline-block; font-weight:700; letter-spacing:-1.5px;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .tit .t1{ font-size:2.250em;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .tit .t2{ font-size:1.125em; margin-left:.25em;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .desc{ font-size:.875em; color:#111; line-height:1.2em; height:2.438em; overflow:hidden; margin-bottom:.5em;}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .pay { font-size:.813em; color:#777; margin-top:.25em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.list_coupon_wrap .list_coupon .coupon .item .con_wrap .date{ font-size:.813em; color:#777; margin-top:.25em;}
.list_coupon_wrap .list_coupon .coupon .item .side_wrap{ width:4em; position:relative;}
.list_coupon_wrap .list_coupon .coupon .item .side_wrap .name{ position:absolute; top:50%; left:50%; transform:rotate(90deg) translate(-50%,-20%); transform-origin:left top; font-size:.813em; color:#fff; white-space:nowrap;}
.list_coupon_wrap .list_coupon .coupon .btn{ margin-top:1em; width:11em; max-width:100%; border-radius:6em;}
.list_coupon_wrap .list_coupon .coupon .btn .icon:before{ content:"\eb7c";}

.list_coupon_wrap.st1 .list_coupon .coupon > li{ width:33.33%;}

.coupon_info_wrap{}
.coupon_info_wrap .bx{ padding:.75em 1.25em; background:var(--crGray3);}
.coupon_info_wrap .tt_coupon{}
.coupon_info_wrap .tt_coupon .tt{ margin:.5em 0;}
.coupon_info_wrap .tt_coupon .t1{ font-size:.938em; font-weight:500;}
.coupon_info_wrap .tt_coupon .t2{ font-size:1em; color:#000; font-weight:500;}
.coupon_info_wrap .tt_coupon .tt.dot{ position:relative; padding-left:.75em;}
.coupon_info_wrap .tt_coupon .tt.dot:before{ content:""; position:absolute; left:0; top:.438em; width:.313em; height:.313em; background:var(--siteC); border-radius:50%;}
.coupon_info_wrap .btn_coupon{ margin:.75em 0;}
.coupon_info_wrap .btn_coupon .input_st{ width:100%; display:flex; align-items:center; gap:0 1em;}
.coupon_info_wrap .btn_coupon .input_st .arrow{ margin:0 0 0 auto; font-size:1.500em; color:#000;}

.mall_view_top{ margin-top:2em; gap:3em 6em;}
.mall_view_top .mall_view_img{ flex:1; gap:1em; position:relative; z-index:10}
.mall_view_top .mall_view_img .big_wrap{ flex:1;}
.mall_view_top .mall_view_img .thumb_wrap{ width:calc(12%); order:-1;}
.mall_view_top .mall_view_img .big{ position:relative}
.mall_view_top .mall_view_img .big img{ width:100%; height:100%; object-fit:contain; object-position:center top; cursor:pointer}
.mall_view_top .mall_view_img .big .zoomArea{ position:absolute; left:100%; width:100%; top:-1px; bottom:-1px; z-index:1;}
.mall_view_top .mall_view_img .big .zoomArea.active{ background:#fff; box-shadow:2px 2px 10px rgba(0,0,0,.2);}
.mall_view_top .mall_view_img .thumb{ text-align:right;}
.mall_view_top .mall_view_img .thumb > li{}
.mall_view_top .mall_view_img .thumb > li .in{ display:block; overflow:hidden; transition:.3s;}
.mall_view_top .mall_view_img .thumb > li .in img{ width:100%; height:100%; object-fit:cover;}
.mall_view_top .mall_view_img .thumb .swiper-slide{ height:auto !important;}
.mall_view_top .mall_view_img .thumb .swiper-slide:not(.swiper-slide-thumb-active) .in{ opacity:.5;}
.mall_view_top .mall_view_img .thumb .swiper-slide:not(.swiper-slide-thumb-active) .in:hover{ opacity:1;}

.mall_view_top .mall_view_info{ width:45%; min-width:30em; position:relative;}
.mall_view_top .mall_view_info .prod_tit{ padding:1em .5em 2em; border-bottom:1px solid #e5e5e5;}
.mall_view_top .mall_view_info .prod_tit .t1{ font-size:1.5em; color:#111; font-weight:500;}
.mall_view_top .mall_view_info .prod_tit .t2{ font-size:1.063em; color:#999; padding-top:.625em;}
.mall_view_top .mall_view_info .prod_opt_wrap{ padding:2em 0;}
.mall_view_top .mall_view_total{ text-align:right; padding:2em 1.5em; border-top:1px solid #333; margin-top:-1px}
.mall_view_top .mall_view_total .no{ margin-left:.5em}
.mall_view_top .mall_view_btn{ display:flex; flex-wrap:wrap; gap:.375em;}
.mall_view_top .mall_view_btn > li{ box-sizing:border-box; min-width:0;}
.mall_view_top .mall_view_btn > li *{ transition:.3s}
.mall_view_top .mall_view_btn > li.st1{ flex:1;}
.mall_view_top .mall_view_btn > li.st2{ width:28%}
.mall_view_top .mall_view_btn > li.st3{ width:28%}
.mall_view_top .mall_view_btn > li.st4{ flex:1;}
.mall_view_top .mall_view_btn > li .btn{ display:flex; align-items:center; justify-content:center; text-align:center; height:3.5em; font-size:1.063em; font-weight:500; border:1px solid transparent; position:relative; box-sizing:border-box;}
.mall_view_top .mall_view_btn > li .btn .icon{ font-size:1.5em; padding-right:5px}
.mall_view_top .mall_view_btn > li.st1 .btn{ background:var(--siteC); color:#fff}
.mall_view_top .mall_view_btn > li.st2 .btn{ background:#111; color:#fff}
.mall_view_top .mall_view_btn > li.st3 .btn{ background:#fff; border-color:#111; color:#111}
.mall_view_top .mall_view_btn > li.st4 .btn{ background:#f5f5f5; border-color:#ddd; color:#555}
.mall_view_top .mall_view_btn > li .btn .arrow{ width:0; overflow:hidden}
.mall_view_top .mall_view_btn > li .btn .arrow:after{ content:"\e93f"; padding-left:3px}
.mall_view_top .mall_view_btn > li:hover .btn .arrow{ width:20px}
.mall_view_top .mall_view_btn2{ margin-bottom:1em; gap:.25em;}
.mall_view_top .mall_view_btn2 .btn{ display:flex; align-items:center; gap:.375em; padding:.5em 1em; border:1px solid #e5e5e5; color:#555; font-size:.938em; transition:.3s; border-radius:3em}
.mall_view_top .mall_view_btn2 .btn .xi{ font-size:1.000em;}
.mall_view_top .mall_view_btn2 .btn .tt{}
.mall_view_top .mall_view_btn2 .btn:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff;}
.mall_view_top .mall_view_btn2 .b1 .btn{ ckground:#FF0000}
.mall_view_top .mall_view_btn2 .b2 .btn{ background: #003366}
.mall_view_top .mall_view_btn2 .b3 .btn{ background: #330066}
.mall_view_top .mall_view_btn2 .b4 .btn{ background: #336666}
.mall_view_top .mall_view_btn2 .b5 .btn{ background: #666}
.mall_view_top .mall_view_detail{ margin-top:2em; padding:2em; position:relative}
.mall_view_top .mall_view_detail *{ vertical-align:baseline}
.mall_view_top .mall_view_detail table{ table-layout:auto}
.mall_view_top .mall_view_detail > *:first-child:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box}

.mall_view_add{ }
.mall_view_add .tit_wrap{ background:var(--siteC); color:#fff; padding:.5em 1em; font-size:.938em}
.mall_view_add .tit_wrap .t1{ font-weight:700}
.mall_view_add .tit_wrap .t2{ margin-left:.25em; opacity:.7; font-size:.938em}
.mall_view_add .tit_wrap .btn{ border:1px solid #ddd; width:1.5em; line-height:1.5em; background:#fff; text-align:center; color:var(--siteC)}
.mall_view_add .list{ font-size:.938em}
.mall_view_add .list > li .wrap_in{ border-top:1px solid #ddd; padding:1em}
.mall_view_add .list > li .wrap_in .img_wrap{ width:7em; border:1px solid #ddd; margin-right:1em}
.mall_view_add .list > li .wrap_in .con_wrap .t1{ font-weight:700}
.mall_view_add .list > li .wrap_in .con_wrap .t2{ margin-top:.5em; font-weight:500; color:var(--siteC)}
.mall_view_add .list > li .wrap_in .con_wrap .opt{ margin-top:.75em}
.mall_view_add .list > li .wrap_in .con_wrap .opt .opt_t1{ margin-bottom:.25em; color:#777; font-weight:500}
.mall_view_add.on .list{ display:none}
.mall_view_add.on .tit_wrap .btn{ transform:rotate(180deg)}

.mall_view_top .top_title{ margin-bottom:1.5em; margin-top:-1em}
.mall_view_top .top_title .info{ padding:1em 0}
.mall_view_top .top_title .info .tit .t1{font-size:2em; color:#111; vertical-align:baseline}
.mall_view_top .top_title .info .tit .t2{ color:#777; margin-left:2em; vertical-align:baseline; font-size:.875em; position:relative}
.mall_view_top .top_title .info .tit .t2:before{ content:""; position:absolute; left:-1.5em; width:1em; bottom:.25em; height:1px; background:#111}
.mall_view_top .top_title .info .type { margin-right:1em}
.mall_view_top .top_title .info .type .type_st{ display:inline-block; *display:inline; zoom:1; width:3em; line-height:3em; border-radius:100%; color:#fff; text-align:center; font-size:.813em; margin-top:.125em}
.mall_view_top .top_title .info .type .type_st.c1{ background: #990033}
.mall_view_top .top_title .info .type .type_st.c2{ background: #003366}
.mall_view_top .top_title .info .shop{ float:right; padding:.625em 1em; border:1px solid #ddd; color:#666; font-size:.813em}
.mall_view_top .top_title .hash{ padding:.5em 1em; background:#f5f5f5}
.mall_view_top .top_title .hash > li > a{ border:1px solid #ddd; background:#fff; color:#8b6262; font-size:.813em; padding:.25em 1em; border-radius:2em; margin-right:.5em}
.mall_view_top .top_title .hash > li > a:before{ content:"# "}

.mall_view_top.shop{ position:relative}
.mall_view_top.shop .mall_view_img{ width:44%}
.mall_view_top.shop .mall_view_img .big{ display:inline-block; *display:inline; zoom:1; vertical-align:bottom; width:80%; margin-bottom:0; padding:0}
.mall_view_top.shop .mall_view_img .thumb{ display:inline-block; *display:inline; zoom:1; vertical-align:bottom; width:12.4%; margin:0 0 0 1%}
.mall_view_top.shop .mall_view_img .thumb > li{ display:block; width:100%; margin-top:.25em}
.mall_view_top.shop .mall_view_img .thumb > li > a{ margin:0}
.mall_view_top.shop .mall_view_info{ width:55%}
.mall_view_top.shop .mall_view_btn2{ margin-top:2em}
.mall_view_top.shop .board_btn_wrap{ margin-top:1em}
.mall_view_top.shop .board_btn_wrap .input_st{ min-width:12em}

.mall_view_option{ font-size:.875em; background:#f9f9f9; color:#666}
.mall_view_option > .fl_wrap{ display:flex; flex-wrap:wrap;}
.mall_view_option > li{ border-top:1px solid #ddd; padding:0 1em;}
.mall_view_option > li .va_wrap{ height:4em; text-align:left}
.mall_view_option > li > *{ order:3;}
.mall_view_option > li .tit{ flex:1; order:1;}
.mall_view_option > li .vol{}
.mall_view_option > li .price{ order:2; padding:0 1em; text-align:right;}
.mall_view_option > li .del{ width:3.5em; text-align:center}
.mall_view_option > li .del button{ border:none; background:none}
.mall_view_option > li .del .xi{ font-size:1.75em}

.mall_view_wrap{ border:1px solid #ddd; padding:2.5em; min-height:18em}
.mall_view_wrap .board_st{ font-size:1em;}

.mall_view_wrap2{ border-bottom:1px solid #ddd; padding-bottom:3em }
.mall_view_wrap2 .wrap_tit{ border-top:1px dashed #333; margin-top:3em; padding:1em; border-bottom:1px solid #ddd}
.mall_view_wrap2 .wrap_tit .tt{ font-size:1.313em;}
.mall_view_wrap2 .wrap_tit .xi:before{content:"\e937"; font-size:1.125em; margin-top:-1em; margin-right:.25em}
.mall_view_wrap2 .wrap_con{ padding:1em 1em 1em 3em; line-height:1.5}

.vol_st{ display:inline-block; *display:inline; zoom:1;}
.vol_st .btn,
.vol_st .inp{ float:left; line-height:2.25em; height:2.25em; font-size:1em; border:1px solid #ddd; box-sizing:border-box; background:#fff}
.vol_st .btn{ width:2.5em; color:#111}
.vol_st .btn.minus .xi:before{content:"\e91b"}
.vol_st .btn.plus .xi:before{content:"\e914"}
.vol_st .btn:hover{ background:#f5f5f5}
.vol_st .inp{ width:3em; border-left:none; border-right:none;text-align:center}
.vol_st .inp[disabled="disabled"]{ border:none}

.no_cart{ width:100%; padding:3em 0; font-size:.938rem; color:#999; text-align:center}
.no_cart .xi{ font-size:4.5em; vertical-align:middle; color:#aaa; padding-right:.125em}
td .no_cart{ border-bottom:none}
.main .no_cart{ padding:6em 0; min-height:33.5em; box-sizing:border-box; font-size:1em}

.step_st{ width:800px; max-width:100%; margin:1em auto 4em auto;}
.step_st > li{ flex:1;}
.step_st > li .in{ position:relative; text-align:center; color:#aaa}
.step_st > li .in .line{ position:absolute; width:100%; height:1px; left:50%; top:2em; background:#ddd}
.step_st > li:last-child .in .line{ display:none;}
.step_st > li .in .icon{ position:relative; width:4em; line-height:4em; margin-bottom:.5em; background:#f5f5f5; border:1px solid #ddd; border-radius:100%; color:#bbb; font-size:1em; text-align:center}
.step_st > li .in .icon:before{ font-size:1.875em;}
.step_st > li .in .t1{ letter-spacing:1px; font-size:.688em;}
.step_st > li .in .t2{ margin-top:.25em; font-size:1.063em; font-weight:500;}
.step_st > li.on .in{ color:var(--siteC)}
.step_st > li.on .in .line{ background:var(--siteC)}
.step_st > li.on .in .icon{ background:var(--siteC); border-color:var(--siteC); color:#fff}

.step_tit{ padding-bottom:1.5em; text-align:center}
.step_tit.pd1{ padding:0 0 5em 0;}
.step_tit .t1{ font-size:.750em; color:#aaa; letter-spacing:2px;}
.step_tit .t2{ font-size:2.000em; font-weight:700; padding-top:.25em}

.order_wrap{ padding-right:23em}
.order_wrap .order_fix_wrap{ right:0; top:0; width:20em}
.order_wrap .order_fix_wrap .order_fix{ width:20em}
.order_wrap .order_fix_wrap .order_fix .in{ border:2px solid #333; padding:2em 1.5em; background:#fff}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_tit{ font-size:1.5em; color:#111; font-weight:500; padding-bottom:1em; margin-bottom:.5em; border-bottom:1px solid #333}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li{ display:flex; flex-wrap:wrap; align-items:center; position:relative; line-height:3em}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .tit{ flex:1; font-size:.813em; color:#999;}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .con{ text-align:right; font-size:.875em}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .con *{ color:#666; vertical-align: middle}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .con .xi{ padding:.063em .125em 0 0;}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1{ border-top:1px solid #333; margin-top:1em; font-size:1.125em}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1 .tit{ color:#111}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1 .con{}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1 .con *{ color:var(--siteC)}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_btn{ margin-top:1em; width:100%; padding:1em 0; height:auto; font-size:1.125em}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree{ color:#999; margin-top:1em; padding:.75em .5em; border:1px solid #ddd}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree .label_st{ display:flex; align-items:center;}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree .label_st > *{ box-sizing:border-box; min-width:0; line-height:normal;}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree .label_st .xi{ margin-bottom:auto; font-size:1em;}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree .label_st span{ flex:1; margin-left:.5em; font-size:.875em;}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree:hover{ background:#f5f5f5;}

.order_wrap .table_st ~ .order_opt_sel{ margin-top:3em;}
.order_opt_sel{ padding:1.5em; border:1px solid #333;}
.order_opt_sel .opt_inner{ gap:1em;}
.order_opt_sel .opt_inner .sec_row{ gap:1em; padding-top:1em; border-top:1px dashed #ddd;}
.order_opt_sel .opt_inner .opt_tit{ width:9em;}
.order_opt_sel .opt_inner .opt_tit .tt{ display:block;}
.order_opt_sel .opt_inner .opt_tit .t1{ font-size:1.063em; font-weight:500;}
.order_opt_sel .opt_inner .opt_tit .t2{ font-size:.875em; color:#666;}
.order_opt_sel .opt_inner .opt_tit .tt.dot{ position:relative; padding-left:.75em;}
.order_opt_sel .opt_inner .opt_tit .tt.dot:before{ content:""; position:absolute; left:0; top:.438em; width:.313em; height:.313em; background:var(--siteC); border-radius:50%;}
.order_opt_sel .opt_inner .opt_con{ flex:1; gap:.5em;}
.order_opt_sel .opt_inner .opt_con.fix1 > *{ width:calc(25% - 0.375em); max-width:10em}

.tbox{ text-align:center}
.tbox .t0{ font-size:1.75em; color:#111; font-weight:600; letter-spacing:-1px; margin:.5em 0;}
.tbox .t1{ font-size:1.5em; color:#111; font-weight:600;}
.tbox .t2{ font-size:1.125em; color:#333; line-height:1.5; margin:1.5em 0}
.tbox .t3{ font-size:.938em; color:#77787b; line-height:1.5; margin:1.5em 0 0 0;}
.tbox .c1{ color:var(--siteC)}
.tbox .order_no{ display:inline-block; *display:inline; zoom:1; background:var(--siteC); padding:0 2em; color:#fff; border-radius:3em; line-height:2.5em}
.tbox .order_no .tt{ font-size:.938em}
.tbox .order_no .no{ font-size:1.5em; font-weight:700; letter-spacing:1px}

.login_w{ padding-left:15%; padding-right:15%}
.login_wrap{ width:800px; max-width:100%; margin:0 auto}
.login_wrap .login{ border:1px solid var(--siteC); margin-top:-1px; padding-top:1.5em; padding-bottom:3em}
.login_wrap .login .inp{ display:block; margin-top:1.5em}
.login_wrap .login .inp .tt{ color:#666; font-weight:500; padding-bottom:.25em;}
.login_wrap .login .inp .input_st{ width:100%;}
.login_wrap .login .label_st{ font-size:.875em; color:#666; margin-top:1em}
.login_wrap .login .btn{ display:block; width:100%; font-size:1.125em; margin-top:1em}
.login_wrap .login .btn.s1{ font-size:.938em}

.login_wrap .login .link_wrap{ text-align:center}
.login_wrap .login .link_wrap > li > a{ font-size:.938em; margin-top:1.5em; padding:0 1.5em; position: relative}
.login_wrap .login .link_wrap > li > a:before{ content:""; position:absolute; left:0; top:20%; height:60%; width:1px; background:#ccc}
.login_wrap .login .link_wrap > li:first-child > a:before{ display:none}
.login_wrap .login .link_wrap > li > a:hover{ text-decoration:underline}

.sns_tit{ font-size:.75em; overflow:hidden; margin:2.5em 0; text-align:center}
.sns_tit .in{ position:relative; padding:0 1em; color:#777}
.sns_tit .in:before,
.sns_tit .in:after{ content:""; position:absolute; top:50%; width:1000px; right:100%; height:1px; background:#ddd}
.sns_tit .in:after{ left:100%}
.sns_login > li > a{ display:block; line-height:3em; color:#fff; margin-bottom:.5em; padding:0 3em; position:relative}
.sns_login > li > a:before{ font-family:xeicon!important; width:3em; position:absolute; left:0; top:0; border-right:1px solid rgba(255,255,255,.2)}
.sns_login > li.na > a{ background:#2cb400}
.sns_login > li.fa > a{ background:#3c5a9a}
.sns_login > li.ka > a{ background:#ffa800}
.sns_login > li.na > a:before{ content:"\ebf9"}
.sns_login > li.fa > a:before{ content:"\ebd3"}
.sns_login > li.ka > a:before{ content:"\ebee"}

.agree_wrap{ margin:-2em -2em 0 0}
.agree_wrap > li{ width:50%}
.agree_wrap .in{ margin:2em 2em 0 0}
.agree_wrap .in .tit{ background:#f5f5f5; border:1px solid #ddd; padding:1.5em 2em; position:relative; z-index:1; font-size:1.125em; font-weight:500;}
.agree_wrap .in .con{ border:1px solid #ddd; border-top:1px solid #333; margin-top:-1px; padding:2em}
.agree_wrap .in .conH{ height:11em}
.agree_wrap .in .con .con_in{ color:#666; line-height:1.5}
.agree_wrap .in .check{ border:1px solid #ddd; margin-top:-1px; text-align:right; padding:.5em 1em}
.agree_wrap .in .check label{}

.agree_wrap2{ margin:-2em -2em 0 0}
.agree_wrap2 > li{ width:100%}
.agree_wrap2 .in{ margin:2em 2em 0 0}
.agree_wrap2 .in .tit{ background:#f5f5f5; border:1px solid #ddd; padding:1em 2em; position:relative; z-index:1; font-size:1.125em; font-weight:500;}
.agree_wrap2 .in .con{ border:1px solid #ddd; border-top:1px solid #333; margin-top:-1px; padding:2em}
.agree_wrap2 .in .conH{ height:11em}
.agree_wrap2 .in .con .con_in{ color:#666; line-height:1.5}
.agree_wrap2 .in .agree_txt{ padding:.5em 0;}
.agree_wrap2 .in .check{ border:1px solid #ddd; margin-top:-1px; text-align:right; padding:.5em 1em}
.agree_wrap2 .in .check label{}

.agree_box{ border:1px solid #ddd; background:#fff;}
.agree_box .con{ padding:1.75em; color:#666}
.agree_box .con.scrollst{ height:20em; overflow-y:scroll;}
.agree_box .con.scrollst.h1{ height:10em}
.agree_box .btn{ border-top:1px solid #ddd; background:#f5f5f5; padding:.5em 2em; text-align:right;}
.agree_box .btn label{ margin-left:2em}

.join_type{ width:1000px; max-width:100%; margin:3em auto 0 auto}
.join_type > li{ width:50%}
.join_type > li *{ transition:.2s;}
.join_type > li .in{ border:1px solid #343b4d; border-top-width:4px; margin:-1px -1px 0 0; padding:3em; text-align:center; color:#111; min-height:28em}
.join_type > li .in .tit{ font-size:1.75em; font-weight:500; letter-spacing:-1px;}
.join_type > li .in .tt{ opacity:.5; margin:1em 0; font-size:1em;}
.join_type > li .in .icon{ display:inline-block; width:8em; line-height:8em; background:#ebeff2; border-radius:100%;}
.join_type > li .in .icon .xi{ font-size:5em; color:#343b4d;}
.join_type > li .in .btn_area{ width:70%; margin:0 auto}
.join_type > li .in .btn_area .btn{ width:100%; font-size:1.125em; margin:1em 0}
.join_type > li .in .btn_area .btn:hover{ background:#343b4d; border-color:#343b4d;}
.join_type > li .in .btn_area .memo{ background:#f1f1f1; border-top:1px solid #333; text-align:left; padding:1em;}
.join_type > li .in .btn_area .memo .t1{ color:#111; font-size:.938em}
.join_type > li .in .btn_area .memo .t2{ color:#777; margin-top:.5em; font-size:.813em}
.join_type > li .in:hover{ background:#f2f5f6;}
.join_type > li .in:hover .icon{ background:#fff;}

.my_tab_wrap{ margin-bottom:3em;}
.my_tab_wrap .tab_st{}
.my_tab_wrap .tab_st > li{ flex:0 0 auto; width:auto;}
.my_tab_wrap .tab_st > li > a{ padding:0 2em;}

.my_search_wrap{ padding:2em; border:1px solid #ddd; font-size:.938em; color:#666}
.my_search_wrap .tit{ font-size:1.188em; margin-bottom:.5em; color:#111; font-weight:600;}
.my_search_wrap .tit .xi{ font-size:1.25em; vertical-align: top; margin-top:-.125em; font-weight:normal;}
.my_search_wrap .input_st{ min-width:5em}

.my_order_state{ margin-top:2em; border-top:1px solid #111}
.my_order_state > li{ width:20%}
.my_order_state > li .in{ padding:2em 1em; text-align:center; position:relative}
.my_order_state > li .in:after{ content:""; position:absolute; left:-1px; top:30%; height:40%; width:1px; background:#ddd}
.my_order_state > li:first-child .in:after{ display:none}
.my_order_state > li .in .icon{ font-size:2.5em; color:#bbb; line-height:1em}
.my_order_state > li .in .tt{ padding:.75em 0 0 0; font-size:.875em; color:#777}
.my_order_state > li .in .no{ font-size:2em; color:#111; font-weight:500;}

.my_coupon_top{ position:relative; padding:3em 0 5em;}
.my_coupon_top:before{ content:""; position:absolute; top:0; left:0; width:100%; height:14em; max-height:100%; background:var(--crGray);}
.my_coupon_top > *{ position:relative;}
.my_coupon_top .coupon_con{ gap:1.5em;}
.my_coupon_top .coupon_con > li{ flex:1;}
.my_coupon_top .coupon_con > li .wrap_in{ flex:1; padding:2.5em; background:#fff; border:1px solid #333; border-radius:1em;}
.my_coupon_top .coupon_con .tit{ font-size:1.250em; font-weight:500;}
.my_coupon_top .coupon_con .inp_wrap{ gap:.375em; margin-top:.875em;}
.my_coupon_top .coupon_con .inp_wrap a.input_st{ flex:1;}
.my_coupon_top .coupon_add{ margin-top:2em;}
.my_coupon_top .coupon_add .box_st{ border-radius:1em;}
.my_coupon_top .no_coupon .no_cart{ background:#f5f5f5;}
.my_coupon_top .no_coupon .no_cart .xi{ font-size:2.500em;}

.my_profile_top{}
.my_profile_top .wb{ word-break:break-all;}
.my_profile_top .wrap_in{ flex:1; padding:2em 2em;}
.my_profile_top .info_wrap{ width:38%; background:var(--siteC); border-radius:1.5em 0 0 1.5em; color:#fff;}
.my_profile_top .info_wrap .wrap_in{ gap:2em;}
.my_profile_top .info_wrap .myInfo{ gap:1em;}
.my_profile_top .info_wrap .myInfo .ico .xi{ font-size:3.000em;}
.my_profile_top .info_wrap .myInfo .name{ flex:1;}
.my_profile_top .info_wrap .myInfo .tt{}
.my_profile_top .info_wrap .myInfo .t1{ font-size:1.063em; font-weight:500;}
.my_profile_top .info_wrap .myInfo .t2{ font-size:1.500em;}
.my_profile_top .info_wrap .myInfo .po{ font-weight:700; display:inline; vertical-align:baseline;}
.my_profile_top .info_wrap .myLink{ margin-top:auto;}
.my_profile_top .info_wrap .myLink .link{ display:block;}
.my_profile_top .info_wrap .myLink .link:not(:last-child):after{ content:""; display:inline-block; vertical-align:middle; margin:0 1em; width:1px; height:1em; background:rgba(255,255,255,.4);}
.my_profile_top .info_wrap .myLink .link:hover .tt{ text-decoration:underline;}
.my_profile_top .con_wrap{ flex:1; background:var(--crGray2); border:solid var(--crGray); border-width:1px 1px 1px 0; border-radius:0 1.5em 1.5em 0; line-height:normal;}
.my_profile_top .con_wrap .wrap_in{ gap:2em;}
.my_profile_top .con_wrap .myDetail{ flex:1; gap:1.25em;}
.my_profile_top .con_wrap .myDetail:not(:last-child){ padding-right:2em; border-right:1px dashed #ddd;}
.my_profile_top .con_wrap .myDetail .tit{}
.my_profile_top .con_wrap .myDetail .txt{ gap:.75em; margin-top:.5em;}
.my_profile_top .con_wrap .myDetail .txt .in{ gap:.5em;}
.my_profile_top .con_wrap .myDetail .ico{ font-size:1.125em; margin-bottom:auto;}
.my_profile_top .con_wrap .myDetail .t1{ font-size:1.125em; font-weight:500;}
.my_profile_top .con_wrap .myDetail .t2{ font-size:1.063em; color:#555;}
.my_profile_top .con_wrap .myDetail .onoff{ padding:.25em .625em; background:#ddd; border-radius:.375em; font-size:.875em; color:#555; font-weight:500;}
.my_profile_top .con_wrap .myDetail .onoff.on{ background:var(--siteC); color:#fff;}

.my_delivery_wrap{}
.my_delivery_wrap .my_delivery:not(:last-child){ margin-bottom:1em;}
.my_delivery{ gap:1.5em 2em; padding:2em 2em; border:1px solid #333; border-radius:.5em;}
.my_delivery .info_wrap{ flex:1; gap:.5em;}
.my_delivery .info_wrap .info{ gap:.75em;}
.my_delivery .info_wrap .t1{ font-size:1.250em; font-weight:700;}
.my_delivery .info_wrap .t2{ font-weight:500;}
.my_delivery .info_wrap .t3{ color:#555;}
.my_delivery .info_wrap .t_state{ padding:.375em 1em; border:1px solid var(--siteC); border-radius:.25em; font-size:.875em; font-weight:500; color:var(--siteC);}
.my_delivery .btn_wrap{ gap:.375em;}
.my_delivery .page_tit_wrap{ width:100%; margin-bottom:0; padding-bottom:1em; border-bottom:1px dashed var(--crGray);}

.fixWrap.my_info_wrap{ padding-left:17em}
.fixWrap.my_info_wrap .fixIn{ left:0; width:15em;}
.fixWrap.my_info_wrap .fixObj.my_info{ width:15em;}

.fixWrap.my_add_wrap{ padding-right:17em}
.fixWrap.my_add_wrap .fixIn{ right:0; width:15em}
.fixWrap.my_add_wrap .fixObj.my_add{ width:15em; padding-top:2em}


.sub_con_box{ padding:3em 0 6em 0}
.sub_con_box.bg1{ background:#f8f5e7}

.addPop{ position:relative; background:#fff; display:none}
.addPop.on{ display:block}
.addPop .img{ width:100%}
.on .addPop .img{ opacity:.5}
.addPop .addAnchor{ position:absolute; width:80%; left:10%; visibility:hidden; color:#fff}
.addPop .addAnchor .bg{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:.9; background:#333; background:rgba(0,0,0,.1) box-sizing:border-box; border:1px solid #000}
.addPop .addAnchor .va{ position:relative; z-index:1}
.addPop .addAnchor.on{ visibility: visible}
.addPop .addAnchor .t1{ font-size:1.625em}

.addPop .addAnchor.addC_premium{ border:3px dashed #FFCC00; color:#FFCC00}
.addPop .addAnchor.addC_special{ border:3px dashed #00CCCC; color:#00CCCC}
.addPop .addAnchor.addC_plus{ border:3px dashed #66FF99; color:#66FF99}

.addC1{background: #ec5c62 !important}
.addC2{background: #fb7061 !important}
.addC3{background: #555 !important}
.addC4{background: #695da9 !important}
.addC5{background: #5a67ba !important}
.addC6{background: #597ce1 !important}
.addC7{background: #3a68d0 !important}
.addC8{background: #3986e5 !important}
.addC9{background: #2aa2f5 !important}
.addC10{background: #0b71b7 !important}
.addC11{background: #0e90c6 !important}
.addC12{background: #e49c00 !important}
.addC13{background: #e1bc0e !important}
.addC14{background: #b5b704 !important}
.addC15{background: #c8ac14 !important}

/*매거진*/
.page_magazine{}
.magazine_layout{ gap:2em 8em;}
.magazine_layout > .inList{ flex:1;}
.magazine_layout > .inCon{ flex:1;}
.magazine_layout > .inBanner{ order:2; width:22em; max-width:25%;}
.magazine_layout > .inBanner .wrap_in{}
.magazine_layout > .inBanner .wrap_in.sticky{ position:sticky; top:2em; max-height:calc(100vh - 4em);}
.magazine_layout > .inBanner .wrap_in .link{ display:block;}
.magazine_layout > .inBanner .wrap_in .link img{ width:100%;}

.page_magazine .magazine_list{ gap:4em 2em;}
.page_magazine .magazine_list .el{ width:calc(33.33% - 1.3333em);}
.page_magazine .magazine_list .el .wrap_in{ display:block;}
.page_magazine .magazine_list .el .img_wrap{ overflow:hidden;}
.page_magazine .magazine_list .el .img_wrap .re{ transition:.3s;}
.page_magazine .magazine_list .el .con_wrap{ padding:2em 0 0;}
.page_magazine .magazine_list .el .wrap_in:hover .con_wrap .tit{ text-decoration:underline;}
.page_magazine .magazine_list .el .wrap_in:hover .img_wrap .re{ transform:scale(1.1);}

.page_magazine .magazine_info{ gap:1.25em;}
.page_magazine .magazine_info .tt{ line-height:normal;}
.page_magazine .magazine_info .cate{ width:auto; padding:.5em 1em; border:1px solid #eee; border-radius:5em; font-weight:500;}
.page_magazine .magazine_info .tit{ font-size:1.375em; font-weight:600; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.page_magazine .magazine_info .info{ display:flex; align-items:center;}
.page_magazine .magazine_info .info .date{ font-size:.938em; color:#888;}
.page_magazine .magazine_info .info .type{ font-size:1.063em; color:#333; font-weight:600;}
.page_magazine .magazine_info .info .date + .type{ display:flex; align-items:center;}
.page_magazine .magazine_info .info .date + .type:before{ content:""; display:inline-block; width:1px; height:.875em; background:#ccc; margin:0 1em;}

.page_magazine .magazine_view{ gap:2em 6em;}
.page_magazine .magazine_view .info_wrap{ width:18em;}
.page_magazine .magazine_view .con_wrap{ flex:1;}
.page_magazine .magazine_view .con_wrap .mgz_tit{ padding:2em 0; border:solid #111; border-width:1px 0 0;}
.page_magazine .magazine_view .con_wrap .mgz_tit .tt{ font-size:1.750em; font-weight:600;}
.page_magazine .magazine_view .con_wrap .mgz_con{ padding:3em 0; border:solid #eee; border-width:1px 0;}
.page_magazine .magazine_view .con_wrap .mgz_con .tt{ font-size:1.063em;}
.page_magazine .magazine_view .con_wrap .mgz_con.blind{ position:relative; max-height:45em; overflow:hidden; border-bottom-width:0;}
.page_magazine .magazine_view .con_wrap .mgz_con.blind .mgz_blind{ position:absolute; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg,rgba(255,255,255,1) 50%,transparent 100%);}
.page_magazine .magazine_view .con_wrap .mgz_con.blind .mgz_blind .wrap_in{ display:flex; flex-direction:column; gap:1em; padding:2em 1em 0;}
.page_magazine .magazine_view .con_wrap .mgz_con.blind .mgz_blind .wrap_in .ico .in{ width:2.5em; height:2.5em; background:var(--crBlack); border-radius:50%; color:#fff;}
.page_magazine .magazine_view .con_wrap .mgz_con.blind .mgz_blind .wrap_in .txt{ font-size:1.375em;}
.page_magazine .magazine_view .con_wrap .mgz_con.blind .mgz_blind .wrap_in .txt *{ vertical-align:baseline;}
.page_magazine .magazine_view .con_wrap .mgz_con.blind .mgz_blind .wrap_in .btn{ font-size:.875em;}


/**/
.page_sec_m05{ margin-top:-.5em}
.page_sec_m1{ margin-top:-1em}
.page_sec_m2{ margin-top:-2em}
.page_sec_m3{ margin-top:-3em}
.page_sec{ margin-top:3em}
.page_sec2{ margin-top:2em}
.page_sec3{ margin-top:1em}
.page_sec4{ margin-top:.5em}
.page_sec5{ margin-top:5em}

.line_st{ margin-top:2em; padding-top:2em; border-top:1px solid #ccc}
.line_st2{ margin-top:1em; padding-top:1em; border-top:1px solid #333}

.li_st{ padding:.5em 0}
.li_st > li{ font-size:.875em; color:#777; padding-left:1.125em; position:relative; margin-top:.5em}
.li_st > li:before{ content:"·"; position:absolute; left:0; top:-.25em; font-size:2em; color:#111; line-height:1;}

.tab_st{ display:flex; overflow:visible !important; border-bottom:1px solid var(--siteC)}
.tab_st > li{ width:50%}
.tab_st > li > a{ background:#f5f5f5; height:3.5em; color:#777; border:1px solid #ddd; margin-right:-1px; border-bottom:none; position:relative}
.tab_st > li > a:after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#fff; display:none; z-index:1}
.tab_st > li > a .va{ font-size:1.125em; font-weight:500;}
.tab_st > li:hover > a{ color:var(--siteC)}
.tab_st > li.on > a{ background:#fff; border-color:var(--siteC); color:var(--siteC); z-index:1}
.tab_st > li.on > a:after{ display:block}
.tab_st > li.btn{ width:auto !important}
.tab_st > li.btn > a{ margin-left:1em; background:#8c655d; border-color:transparent; color:#fff; padding:0 1.5em}
.tab_st > li.btn > a .xi{ margin-top:-.125em}

.tab_st1{ display:flex; text-align:center; padding-left:1px; overflow:visible !important;}
.tab_st1 > li{ flex:1; float:none !important;}
.tab_st1 > li > a{ display:flex !important; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.25em; border:1px solid #ddd; border-bottom:none; padding:.5em .5em; height:4.625em; box-sizing:border-box; background:#f5f5f5; margin-left:-1px; position:relative; color:#777; word-break:break-all;}
.tab_st1 > li.on > a{ background:#fff; border-color:#ddd; z-index:1; color:#111}
.tab_st1 > li.on > a:before{ content:""; position:absolute; left:-1px; top:-1px; padding-right:1px; width:100%; height:2px; background:#000}
.tab_st1 > li.on > a:after{ content:""; position:absolute; left:0; bottom:-1px; padding-right:1px; width:100%; width:calc(100% - 1px); height:1px; background:#fff}
.tab_st1 > li > a .kott{ display:block; font-size:1em; color:#666; font-weight:600;}
.tab_st1 > li > a .entt{ display:block; font-size:.75em; color:#aaa; text-transform:uppercase;}
.tab_st1 > li.on .kott{ color:#111}
.tab_st1 > li.on .entt{ color:#777}

.upDown{ padding:0 0 0 .25em}
.upDown.up:before{content:"\e930"; color:#990033}
.upDown.down:before{content:"\e936"; color:#333}

.memo_st{ border:1px solid #ddd; background:#f7f7f7; padding:1.5em; margin-bottom:2em}
.memo_st.pd1{ padding:1em;}
.memo_st .tt{ color:#333; margin-top:.5em; line-height:1.5em; position:relative; padding-left:2em;}
.memo_st .tt strong{ font-weight:600;}
.memo_st .tt:before{ content:"\e9a6"; font-family:xeicon!important; font-size:1.500em; color:#aaa; position:absolute; left:0; top:0;}
.memo_st .tt:first-child{ margin-top:0}
.memo_st .tt * { vertical-align:top}
.memo_st .tt.t1{ font-size:.938em; color:#111}
.memo_st .tt.t1:before{ color:#666;}
.memo_st .tt.t2{ font-size:1.063em; color:#000; font-weight:500; line-height:1.5em;}
.memo_st .tt.t2:before{ content:"\ea3a"; font-size:1.375em; color:inherit; font-weight:normal; top:-.063em; opacity:.4;}
.memo_st .tt.t3{ font-size:1.063em;}
.memo_st .btn{ background:var(--siteC); color:#fff; font-size:.875em; padding:.25em 1em; border-radius:.5em}

.memo_st.st1{ border:none; background:none; padding:.75em 0; margin-bottom:0}
.memo_st.st1 .tt{ font-size:.813em}

.memo_st.st2{ background:#fff; margin-bottom:0;}

.page_tit{ text-align:center; font-size:2em; color:#000; font-weight:700; margin-bottom:1em}
.page_tit > .tit:not(:first-child){ margin-top:1em;}
.page_tit > .txt:not(:first-child){ margin-top:1em;}
.page_tit > .tit + .txt{ margin-top:1.5em;}
.page_tit *{ vertical-align:baseline;}
.page_tit .t1{ text-transform:uppercase; font-size:1em}
.page_tit .t2{ display:inline-block; *display:inline; zoom:1; position:relative; font-size:.5em; color:#666; padding:0 1em}
.page_tit .t2:before,
.page_tit .t2:after{ content:""; position:absolute; top:50%; height:1px; width:2em; right:100%; background:#ccc;}
.page_tit .t2:after{ left:100%}
.page_tit .t3{ font-size:.75em}
.page_tit .t4{ font-size:2.250em;}
.page_tit .t5{ font-size:1.500em;}
.page_tit .t6{ font-size:1.063em; line-height:1.4;}
.page_tit .tt.en{ font-size:2.500em;}
.page_tit .tt.ico{ position:relative; padding-top:.375em;}
.page_tit .tt.ico:before{ content:""; position:absolute; left:-.625em; top:0; width:1.25em; height:.75em; background:url(../images/inc/shape_roof.svg) no-repeat center top; background-size:contain; filter:var(--siteCfil);}

.page_tit .inLine{}
.page_tit .inLine:before{ content:""; display:inline-block; width:2px; height:2px; background:var(--siteC);}
.page_tit .inLine.w{ margin:1.75em 0;}
.page_tit .inLine.w:before{ width:2.25em;}
.page_tit .inLine.h{ margin:1.25em .125em;}
.page_tit .inLine.h:before{ height:1.75em;}
.page_tit .inLine:first-child{ margin-top:0;}
.page_tit .inLine:last-child{ margin-bottom:0;}
.page_tit .inLine + .tit,
.page_tit .inLine + .txt{ margin-top:0;}
.page_tit .inLine.cw:before{ background:#fff;}

.page_tit.st2{ text-align:left; font-size:1em; font-weight:400; margin-bottom:2em;}
.page_tit.st2.m1{ margin-bottom:1em;}

.page_tit .c1{ color:#943e3e}
.page_tit .c2{ color:#6a781b}
.page_tit .c3{ color:var(--siteC)}
.page_tit .c4{ color:#ffba00}
.page_tit .c5{ color:#666}
.page_tit .f1{ font-size:.875em}

.page_tit2{ font-size:1.313em; font-weight:600; padding-bottom:.75em}
.page_tit2 .xi{ margin:-.125em .25em 0 0; display:none;}
.page_tit2 .xi:before{ content:"\e939"}
.page_tit2 .t1{ font-size:.875em; color:#CC3333}
.page_tit2 .no{ display:inline-block; box-sizing:border-box; margin:0 .25em 0 .5em; padding:0 .5em; min-width:1.875em; height:1.875em; line-height:1.875em; background:var(--siteC); border-radius:10em; font-size:1.25em; color:#fff; font-weight:700; text-align:center;}

.page_tit_wrap{ margin-bottom:1em;}
.page_tit_wrap.flex{ gap:1em;}
.page_tit_wrap > *{ margin-bottom:0; padding-bottom:0;}

.page_btn{ display:flex; align-items:center; justify-content:center; gap:.5em;}
.page_btn > *{ flex:1 1 0%; min-width:0;}
.page_btn .in{ display:flex; align-items:center; flex:0 0 auto; gap:.5em;}
.page_btn .in.right{ margin-left:auto;}
.page_btn .max0{ flex:0 0 auto;}
.page_btn .max1{ max-width:10em; min-width:10em;}
.page_btn.col{ flex-direction:column;}
.page_btn.col > .btn{ flex:1 1 auto; width:100%; padding:0 .75em;}
.page_btn.al{ justify-content:flex-start;}
.page_btn.ar{ justify-content:flex-end;}
.page_btn.space{ justify-content:space-between;}
.page_btn.space > *{ flex:0 0 auto;}
.page_btn .btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; gap:1em; padding:0 2em; height:3.5em; background:var(--crBlack); color:#fff; transition:.2s;}
.page_btn .btn > .tt{ font-size:1.125em; font-weight:500;}
.page_btn .btn > .xi{ font-size:1.063em;}
.page_btn .btn.sm{ font-size:.875em;}
.page_btn .btn.hov{ border:1px solid transparent;}
.page_btn .btn.c1{ background:var(--siteC);}
.page_btn .btn.round{ border-radius:8em;}
.page_btn .btn:hover{ background:var(--siteC);}
.page_btn .btn.c1:hover{ background:var(--crBlack);}
.page_btn .btn.hov:hover{ border-color:var(--crBlack); color:var(--crBlack); background:transparent;}

.link_st:hover{ text-decoration:underline}

.box_st{ padding:3em 2em; border:1px solid #ddd;}

.tt_pointBox{ letter-spacing:0; line-height:1.5em;}
.tt_pointBox .tt{ display:inline-block; margin-left:1em;}
.tt_pointBox .tt:first-child{ margin-left:0;}
.tt_point{ font-size:1.250em; color:var(--siteC); font-weight:700;}
.tt_point.c1{ color:#039182;}
.tt_point.c2{ color:var(--siteC);}
.tt_price{ color:#333; line-height:normal;}
.tt_price .no { font-size:1.375em; color:#111; font-weight:700; padding-right:.125em;}
.tt_price .tt {}
.tt_price .tt2{ font-size:1.5em; color:var(--siteC)}
.tt_price .discount{ text-decoration:line-through;}

.tt_note{ position:relative; margin-top:1em; font-size:.813em; color:#999; padding-left:1.75em}
.tt_note:before{ content:"\e9a6"; font-family:xeicon!important; position:absolute; left:0; top:-.25em; border-radius:100%; font-size:1.5em; color:#ccc}

.tt_state1{ color:#777; font-weight:500;}
.tt_state2{ color:var(--siteC); font-weight:500;}
.tt_state3{ color:#6633CC; font-weight:500;}
.tt_state4{ color:#006699; font-weight:500;}
.tt_state5{ color:#000; font-weight:500;}
.tt_state6{ color:#039182; font-weight:500;}

.tt_st1{ font-size:.813em}
.tt_st2{ font-size:1.125em}

.memo_wrap{ border:1px solid #ddd; background:#f5f5f5; padding:1.5em; margin-top:3em; line-height:1.5}
.memo_wrap .t1{ font-size:.813em; color:#666}
.memo_wrap .t1 > *{ vertical-align:top}

.hover_st{ transition:.3s}
.hover_st:hover{ background:#111 !important; border-color:transparent !important; color:#fff !important}

.bg_wide{ position:relative; overflow:hidden}
.bg_wide:before{ content:""; position:absolute; left:50%; width:2000px; margin-left:-1000px; height:100%; top:0; background:#f7f7f7; z-index:-1}
.bg_wide > *{ position:relative}

.fadeAni{ animation-name: fadeAni; animation-duration: 3s; animation-iteration-count: infinite}
@keyframes fadeAni{
0% {opacity:0}
50% {opacity:1}
}

.circleAni{ position:absolute; width:100%; height:100%; border:1px solid #2d8ce6; left:-1px; top:-1px; opacity:0; border-radius:100%; animation-duration: 3s; animation-iteration-count: infinite}
.circleAni.c1{ animation-name: circleAni}
.circleAni.c2{ animation-name: circleAni; animation-delay: 1s}
.circleAni.c3{ animation-name: circleAni; animation-delay: 2s}
@keyframes circleAni{
0% {opacity:.7}
100% {opacity:0;transform:scale(1.8,1.8)}
}

.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%}

/**/
.company_wrap{ }
.company_wrap .in{ border:1px solid #111}
.company_wrap .in .tit{ background:#333; text-align:center; padding:1em 0; color:#fff}
.company_wrap .in .tit .icon{ display:block; font-size:2em}
.company_wrap .in .tit .icon:before{ content:"\eb4a"}
.company_wrap .in .tit .t1{ font-size:1.25em;}
.company_wrap .in .tit .t2{ opacity:.7; font-size:.813em; margin-top:.5em}
.company_wrap .in .img{ background:#f7f7f7}
.company_wrap .in .info{ border-top:1px solid #ddd; padding:1em}
.company_wrap .in .info .btn{ font-size:.875em}
.company_wrap .in .info .btn .input_st{ margin-top:.5em}
.company_wrap .in .info .no_wrap{ padding:0 1px 1px 0; margin-top:1em}
.company_wrap .in .info .no_wrap > li{ width:50%}
.company_wrap .in .info .no_wrap > li .in{ border:1px solid #ddd; margin:0 -1px -1px 0; text-align:center; padding:.5em}
.company_wrap .in .info .no_wrap > li .in .icon{ line-height:1.5em}
.company_wrap .in .info .no_wrap > li .in .icon:before{ font-size:1.25em; color:#aaa}
.company_wrap .in .info .no_wrap > li .in .t1{ font-size:.813em; color:#666}
.company_wrap .in .info .no_wrap > li .in .t2{ font-size:.813em; color:#111}
.company_wrap .in .info .no_wrap > li .in .t3{ font-weight:700;}
.company_wrap .in .info .no_wrap > li .in .heart{ color: #FF3366; font-size:.875em}
.company_wrap .in .info .no_wrap > li .in .heart .t3{ padding-right:.5em}
.company_wrap .in .info .no_wrap > li .in .no{ padding:0 0 .313em 0}
.company_wrap .in .info .no_wrap > li .in .no .t3{ font-size:1.125em}
.company_wrap .in .info .no_wrap > li .in .link{ display:block; font-size:.688em; border:1px solid #ccc; background:#f7f7f7; padding:.25em 0; color:#777}
.company_wrap .in .info .no_wrap > li .in .link:hover{ background:#555; color:#fff; border-color:transparent}

/*location*/
.location .sub_tbl{}
.location .sub_tbl .tbl_st{ border:1px solid #ccc; border-top:2px solid var(--siteC); font-size:.938em; width:100%;}
.location .sub_tbl .tbl_st tbody th{ background:#f5f5f5; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:.75em 1.5em; font-size:1.000em; color:#333; text-align:center; }
.location .sub_tbl .tbl_st tbody td{ background:#fff; text-align:center; color:#666; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:.5em 1.5em; line-height:1.5;}
.root_daum_roughmap{ z-index:1; box-sizing:border-box; width:100% !important;}
.roughmap_maker_label{ display:none;}

/*history*/
.sub_history_img { text-align:center; }
.sub_history_tit{ text-align:right; padding:90px 0 70px 65px; background:url(../images/sub/history_top.jpg) no-repeat bottom center; }
.sub_history_tit .t1{ font-size:2.5em; color:#111; letter-spacing:-1px; padding-right:30px;}
.sub_history_tit .t2{  font-size:.938em; color:#888; margin-top:10px;  padding-right:30px;}
.sub_history_tit .t1 .col {color:#F00;}
.sub_history_wrap{ position:relative; z-index:inherit; padding-left: 120px;}
.sub_history_wrap .sub_history_line{ position:absolute; z-index:inherit; width:1px; background:#ddd; left:81px; height:100%; margin-left:1px; top:-40px}
.sub_history_wrap .sub_history > li{ position:relative; z-index:inherit; width:100%; margin-top:40px}
.sub_history_wrap .sub_history > li .history{ padding:0 20px; border-bottom: 1px dotted #ccc;}
.sub_history_wrap .sub_history > li .history .year{ font-size:1.9em; font-weight:700; color:#555; position:relative; z-index:inherit; letter-spacing:-1px; opacity:.6;}
.sub_history_wrap .sub_history > li .history .list{ position:relative; z-index:inherit; margin-top:15px}
.sub_history_wrap .sub_history > li .history .list .tt{ display:block; font-size:1em; color:#222; line-height:1.4; margin-bottom:15px; vertical-align:middle;}
.sub_history_wrap .sub_history > li .history .list .txt {position:relative; padding-left:10px;}
.sub_history_wrap .sub_history > li .history .list .txt:before {position:absolute; content:""; width:5px; height:2px; background:#888; left:0; top:10px;}
.sub_history_wrap .sub_history > li .history:before{content:''; position:absolute; top:10px;  left:-42px; width:10px; height:10px; background:var(--siteC); border-radius:100%;}
.history_con span.month { font-size:1.063; vertical-align: bottom;font-weight:700; margin:0 10px 0 10px; color:#000; opacity:.9; width:30px; display:inline-block;}


/****************/
/*MAIN NEW*/
.mainVisualSlide_wrap{ position:relative; padding-bottom:36%;}
.mainVisualSlide_wrap .wrapBox{ position:absolute; top:0; left:0; width:100%; height:100%; gap:1em;}
.mainVisualSlide_wrap .visualW{ position:relative; flex:1; height:100%;}
.mainVisualSlide_wrap .popupW{ position:relative; width:28%; height:100%;}
.mainVisualSlide_wrap .wrapH{ height:100%; box-sizing:border-box;}
.mainVisualSlide_wrap .el{ overflow:hidden;}
.mainVisualSlide_wrap .el .wrap_in,
.mainVisualSlide_wrap .el .wrap_in .img{ display:block; height:100%; box-sizing:border-box;}

.mainVisualSlide{}
.mainVisualSlide .el .wrap_in{ position:relative;}
.mainVisualSlide .el .wrap_in .img{ position:relative;}
/*.mainVisualSlide .el .wrap_in .img:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.2;}*/
.mainVisualSlide .el .slogan_wrap{ position:absolute; top:0; bottom:0; left:8vw; right:8vw; display:flex; align-items:center;}
.mainVisualSlide .el .slogan_wrap .slogan{ display:flex; flex-direction:column; gap:1em 0; width:70%; padding-bottom:3em; color:#fff;}
.mainVisualSlide .el .slogan_wrap .slogan .t1{ font-size:2.500em; font-weight:700;}
.mainVisualSlide .el .slogan_wrap .slogan .t2{ font-size:2.500em; font-weight:600;}
.mainVisualSlide .el .slogan_wrap .slogan .t3{ font-size:1.375em;}
.mainVisualSlide .el .slogan_wrap .main_more{ margin-top:2.5em;}
.mainVisualSlide .el .slogan_wrap .main_more .more{ height:3.25em;}

.mainVisualSlide .control:not(.show){ display:none;}
.mainVisualSlide .control .btn{ position:absolute; z-index:2; top:50%; font-size:2.750em; color:#fff; transform:translateY(-50%); opacity:.7; cursor:pointer; transition:.3s;}
.mainVisualSlide .control .btn.prev{ left:0;}
.mainVisualSlide .control .btn.next{ right:0;}
.mainVisualSlide .control .btn:hover{ opacity:1;}
.mainVisualSlide .control .play .btn{ color:var(--siteC)}
.mainVisualSlide .control .paging{ position:absolute; z-index:2; left:50%; bottom:2em; display:flex; align-items:center; justify-content:center; gap:.5em; transform:translateX(-50%);}
.mainVisualSlide .control .paging > span{ margin:0 0; width:.438em; height:.438em; background:#fff; opacity:.5; border-radius:0; transition:.3s;}
.mainVisualSlide .control .paging > span.swiper-pagination-bullet-active{ width:6em; opacity:.9;}
.mainVisualSlide .control .paging > span:focus{ outline:none;}

.mainPopSlide{}
.mainPopSlide .control{ position:absolute; right:1em; bottom:1em; padding:.375em 1em; background:rgba(0,0,0,.7); display:flex; align-items:center; color:#fff; border-radius:3em; z-index:1}
.mainPopSlide .control .btn{ flex:0 0 auto; cursor:pointer; width:2em; height:2em; display:flex; align-items:center; justify-content:center; font-size:.875em}
.mainPopSlide .control .btn .xi{ font-size:1em}
.mainPopSlide .control .paging{ margin-left:1em; font-size:.875em; display:flex; align-items:center; gap:0 .25em}
.mainPopSlide .control .paging .swiper-pagination-current{ width:1.5em; text-align:right}


.control.basicSt:not(.pos){ display:flex; align-items:center; margin-top:2.5em; gap:0 1em}
.control.basicSt .btn{ cursor:pointer; color:#777}
.control.basicSt .btn:hover{ color:#111}
.control.basicSt .progress{ flex:1 1 0%; min-width:0;}
.control.basicSt .paging{ display:flex; align-items:center; justify-content:center; gap:0 .75em; flex:1 1 0%;}
.control.basicSt .paging > span{ margin:0 0; width:.625em; height:.625em;}
.control.basicSt .paging > span.swiper-pagination-bullet-active{ background:var(--siteC); opacity:1;}
.control.basicSt .fraction{ width:auto; flex:1; text-align:right; font-size:1.063em;}
.control.basicSt .fraction > *{ vertical-align:baseline;}
.control.basicSt .fraction .swiper-pagination-current{ font-size:1.125em; font-weight:600; color:var(--siteC);}

.control.basicSt.pos{ position:absolute; z-index:2; top:50%; left:0; right:0;}
.control.basicSt.pos .btn{ position:absolute; top:0; transform:translateY(-50%); font-size:1.375em;}
.control.basicSt.pos .btn.prev{ left:-1em;}
.control.basicSt.pos .btn.next{ right:-1em;}
.control.basicSt:not(.show){ display:none;}

.control.basicSt.big .btn .xi{ font-size:2.000em;}

/**/
.control1.basicSt:not(.pos){ display:flex; align-items:center; margin-top:2.5em; gap:0 1em}
.control1.basicSt .btn{ cursor:pointer; color:#777}
.control1.basicSt .btn:hover{ color:#111}
.control1.basicSt .progress{ flex:1 1 0%; min-width:0;}
.control1.basicSt .paging{ display:flex; align-items:center; justify-content:center; gap:0 .75em; flex:1 1 0%;}
.control1.basicSt .paging > span{ margin:0 0; width:.625em; height:.625em;}
.control1.basicSt .paging > span.swiper-pagination-bullet-active{ background:var(--siteC); opacity:1;}
.control1.basicSt .fraction{ width:auto; flex:1; text-align:right; font-size:1.063em;}
.control1.basicSt .fraction > *{ vertical-align:baseline;}
.control1.basicSt .fraction .swiper-pagination-current{ font-size:1.125em; font-weight:600; color:var(--siteC);}

.control1.basicSt.pos{ position:absolute; z-index:2; top:50%; left:0; right:0;}
.control1.basicSt.pos .btn{ position:absolute; top:0; transform:translateY(-50%); font-size:1.375em;}
.control1.basicSt.pos .btn.prev{ left:-1em;}
.control1.basicSt.pos .btn.next{ right:-1em;}
.control1.basicSt:not(.show){ display:none;}

.control1.basicSt.big .btn .xi{ font-size:2.000em;}

/**/
.control2.basicSt:not(.pos){ display:flex; align-items:center; margin-top:2.5em; gap:0 1em}
.control2.basicSt .btn{ cursor:pointer; color:#777}
.control2.basicSt .btn:hover{ color:#111}
.control2.basicSt .progress{ flex:1 1 0%; min-width:0;}
.control2.basicSt .paging{ display:flex; align-items:center; justify-content:center; gap:0 .75em; flex:1 1 0%;}
.control2.basicSt .paging > span{ margin:0 0; width:.625em; height:.625em;}
.control2.basicSt .paging > span.swiper-pagination-bullet-active{ background:var(--siteC); opacity:1;}
.control2.basicSt .fraction{ width:auto; flex:1; text-align:right; font-size:1.063em;}
.control2.basicSt .fraction > *{ vertical-align:baseline;}
.control2.basicSt .fraction .swiper-pagination-current{ font-size:1.125em; font-weight:600; color:var(--siteC);}

.control2.basicSt.pos{ position:absolute; z-index:2; top:50%; left:0; right:0;}
.control2.basicSt.pos .btn{ position:absolute; top:0; transform:translateY(-50%); font-size:1.375em;}
.control2.basicSt.pos .btn.prev{ left:-1em;}
.control2.basicSt.pos .btn.next{ right:-1em;}
.control2.basicSt:not(.show){ display:none;}

.control2.basicSt.big .btn .xi{ font-size:2.000em;}

/**/
.control3.basicSt:not(.pos){ display:flex; align-items:center; margin-top:2.5em; gap:0 1em}
.control3.basicSt .btn{ cursor:pointer; color:#777}
.control3.basicSt .btn:hover{ color:#111}
.control3.basicSt .progress{ flex:1 1 0%; min-width:0;}
.control3.basicSt .paging{ display:flex; align-items:center; justify-content:center; gap:0 .75em; flex:1 1 0%;}
.control3.basicSt .paging > span{ margin:0 0; width:.625em; height:.625em;}
.control3.basicSt .paging > span.swiper-pagination-bullet-active{ background:var(--siteC); opacity:1;}
.control3.basicSt .fraction{ width:auto; flex:1; text-align:right; font-size:1.063em;}
.control3.basicSt .fraction > *{ vertical-align:baseline;}
.control3.basicSt .fraction .swiper-pagination-current{ font-size:1.125em; font-weight:600; color:var(--siteC);}

.control3.basicSt.pos{ position:absolute; z-index:2; top:50%; left:0; right:0;}
.control3.basicSt.pos .btn{ position:absolute; top:0; transform:translateY(-50%); font-size:1.375em;}
.control3.basicSt.pos .btn.prev{ left:-1em;}
.control3.basicSt.pos .btn.next{ right:-1em;}
.control3.basicSt:not(.show){ display:none;}

.control3.basicSt.big .btn .xi{ font-size:2.000em;}

/**/
.main_box{ padding:6em 0 6.25em 0}
.main_box.bg1{ background:var(--crGray);}
.main_box.bg2{ background:var(--crGray2);}
.main_box.bg3{ background:var(--crGray3);}
.main_box.bg4{ position:relative;}
.main_box.bg4:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:38vw; background:var(--crGray3);}
.main_box.bg4 > *{ position:relative;}

.main_titN:not(:last-child){ margin-bottom:3em}
.main_titN i,
.main_titN b,
.main_titN span,
.main_titN strong{ display:inline; vertical-align:baseline;}
.main_titN .flex_con{ flex:1;}
.main_titN .tpoint{ font-size:4.000em; font-weight:700; color:var(--siteC);}
.main_titN .tpoint.sm{ font-size:2.500em;}
.main_titN .t1{ font-size:2.500em; font-weight:700;}
.main_titN .t2{ font-size:1.250em; color:#444;}
.main_titN .t3{ font-size:1.500em; font-weight:600;}
.main_titN .t1 + .t2{ margin-top:1em;}
.main_titN .xico{ font-size:.875em; font-weight:normal;}

.tLine{ display:inline-block; vertical-align:top; position:relative; padding:0 .25em;}
.tLine:before{ content:""; position:absolute; left:0; bottom:5%; width:100%; height:40%; background:var(--siteC); opacity:.3;}
.tLine > *{ position:relative}

.main_more{}
.main_more > .more{ gap:0 1em; height:4em; padding:0 2em; background:var(--crBlack); border-radius:10em; color:#fff; transition:.3s;}
.main_more > .more > .itt{ font-size:1.125em;}
.main_more > .more > .xi{ font-size:1.125em;}
.main_more > .more:hover{ background:var(--siteC);}

.main_more > .more.st2{ height:3.625em; border-radius:0; font-size:.938em;}

.main_tab{ margin-bottom:2.5em;}
.main_tab > .tab{ gap:.5em;}
.main_tab > .tab > li{}
.main_tab > .tab > li .in{ height:2.75em; padding:0 2em; background:var(--crGray); border-radius:.375em; transition:.3s;}
.main_tab > .tab > li .in .tt{ font-size:1.063em; font-weight:500;}
.main_tab > .tab > li:hover .in,
.main_tab > .tab > li.on .in{ background:var(--crBlack); color:#fff;}

.main_col{ gap:2em 6em;}
.main_col > li{}
.main_col > li.w1{ width:55%;}
.main_col > li.w2{ width:22%; min-width:24em;}
.main_col > li.w3{ width:20em;}
.main_col + .main_col{ margin-top:8em;}
.main_col > li .p1{ padding:2em 0;}
.main_col > li .round{ border-radius:2em; overflow:hidden;}
.main_col > li .wrap_img{ position:relative; height:100%;}


/*main product list*/
.main_prod .list:not(.swiper-wrapper){ gap:4em 2em;}
.main_prod .list:not(.swiper-wrapper) .el{ display:flex; width:calc(25% - 1.5em)}
.main_prod .list:not(.swiper-wrapper).hz3 .el{ width:calc(33.33% - 1.3333em)}
.main_prod .list:not(.swiper-wrapper).hz5{ gap:4em 2.5em;}
.main_prod .list:not(.swiper-wrapper).hz5 .el{ width:calc(20% - 2em)}
.main_prod .list.zgzg .el:nth-child(2n){ margin-top:5em;}
.main_prod .list.swiper-wrapper .el{ display:flex; flex-direction:column; height:auto;}

.main_prod .list .el .in{ display:flex; flex-direction:column; flex:1; min-width:0;}
.main_prod .list .el .in .con_wrap{ display:flex; flex-direction:column; flex:1; gap:.875em 0; padding:2em 0 0 0;}
.main_prod .list .el .in .con_wrap .tt *{ display:inline; vertical-align:baseline;}
.main_prod .list .el .in .con_wrap .t1{ font-size:1.188em; font-weight:600; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:.3s;}
.main_prod .list .el .in .con_wrap .t2{ font-size:.938em; color:#555; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.main_prod .list .el .in .con_wrap .type{ font-size:.938em; color:var(--siteC); font-weight:600; text-transform:uppercase;}
.main_prod .list .el .in .con_wrap .info{ display:flex; align-items:center; gap:0 1em;}
.main_prod .list .el .in .con_wrap .info *{ vertical-align:baseline;} 
.main_prod .list .el .in .con_wrap .info .num{ flex:1;}
.main_prod .list .el .in .con_wrap .info .date{ color:#555; font-weight:600;}
.main_prod .list .el .in:hover .con_wrap .t1{ color:var(--siteC);}

.main_prod .list .el .con_wrap.magazine_info .cate {width: 8em; padding: 0.5em 1em; border: 1px solid #eee; border-radius: 5em; font-weight: 500; line-height: normal;}
.main_prod .list .el .con_wrap.magazine_info .tit {font-size: 1.175em; font-weight: 600; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom:0.5em;}
.main_prod .list .el .con_wrap.magazine_info .tt.info {display: flex; align-items: center; line-height: normal;}
.main_prod .list .el .con_wrap.magazine_info .tt.info .date {font-size: .938em; color: #888;}
.main_prod .list .el .con_wrap.magazine_info .tt.info .type {font-size: 1.063em; color: #333; font-weight: 600; }
.main_prod .list .el .con_wrap.magazine_info .tt.info .type.c_point{font-size: 1.063em; color:var(--siteC); font-weight: 600;}
.main_prod .list .el .in:hover .con_wrap.magazine_info .tit { color:var(--siteC);}

.main_prod .list .el .priceBox{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end; gap:.125em .75em; text-align:right;}
.main_prod .list .el .price{ width:100%;}
.main_prod .list .el .price > i{ vertical-align:baseline}
.main_prod .list .el .price .no { font-size:1.188em; font-weight:800;}
.main_prod .list .el .price .won{ padding-left:.125em;}
.main_prod .list .el .discount{ font-size:.938em; color:#77787b; text-decoration:line-through;}
.main_prod .list .el .per{ font-size:1.063em; color:var(--siteC); font-weight:700}

.main_prod .list .el .priceBox.st2{}
.main_prod .list .el .priceBox.st2 .price{ flex:1; width:auto;}
.main_prod .list:not(.zgzg) .el .priceBox{ margin-top:auto;}

.main_prod .graph_rate > .full{ position:relative; height:.5em; border-radius:5em; background:#d8dce0; overflow:hidden;}
.main_prod .graph_rate > .full .bar{ position:absolute; top:0; left:0; height:100%; background:var(--siteC);}

.main_prod .item_list{ flex:1; padding-top:1.5em;}
.main_prod .item_list .item_in{ display:flex; flex-wrap:wrap; align-items:center; gap:1em; padding:.5em 0; border-top:1px solid #eee; transition:.3s;}
.main_prod .item_list .item_in > *{ min-width:0;}
.main_prod .item_list .item_in .item_img{ width:4.5em;}
.main_prod .item_list .item_in .item_con{ flex:1;}
.main_prod .item_list .item_in .item_con .t1{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.main_prod .item_list .item_in .priceBox{ text-align:left;}
.main_prod .item_list .item_in .price > *{ font-size:1.063em !important; font-weight:500 !important;}
.main_prod .item_list .item_in:hover{ background:#f7f7f7;}

.main_prod.package .list .el{ flex-direction:column;}
.main_prod.package .list .el .in .con_wrap .t1{ min-height:2.75em;}

.main_prod.fml .list{}
.main_prod.fml .list .el{ flex-direction:column; gap:2em;}
.main_prod.fml .list .el:nth-child(1){ flex:1; order:2;}
.main_prod.fml .list .el:nth-child(2){ order:1;}
.main_prod.fml .list .el:nth-child(3){ order:3;}
.main_prod.fml .list .el:not(:nth-child(1)){ width:calc(25%) - 1.3333em;}

.main_prod.fml .list .el .in{ position:relative;}
.main_prod.fml .list .el .in .img_wrap{ overflow:hidden;}
.main_prod.fml .list .el .in .img_wrap .re{ transition:.3s;}
.main_prod.fml .list .el .in .img_wrap .re:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; transition:.3s;}
.main_prod.fml .list .el .in .con_wrap{ position:absolute; left:0; right:0; top:0; padding:2.5em 2.5em;}
.main_prod.fml .list .el .in .con_wrap .tt{ color:#fff;}
.main_prod.fml .list .el .in:hover .img_wrap .re{ transform:scale(1.1);}
/**/

.main_single{}
.main_single .inThumb{ overflow:hidden;}
.mainSingleSlide_wrap{ position:relative; height:100%; padding:3em 6vw; background:#7e897b; box-sizing:border-box; border-radius:1em;}
.mainSingleSlide_wrap.b1{ background:#7e897b;}
.mainSingleSlide_wrap.b2{ background:#4a7079;}
.mainSingleSlide_wrap.b3{ background:#a1583f;}

.mainSingleSlide .el{}
.mainSingleSlide .el .in{ padding:1em 1em; color:#fff;}
.mainSingleSlide .el .in .img_wrap{ border-radius:50%; overflow:hidden; box-shadow:2px 2px .75em rgba(0,0,0,.3);}
.mainSingleSlide .el .in .con_wrap{ font-size:1.188em;}
.mainSingleSlide .el .in .con_wrap .tt,
.mainSingleSlide .el .in .priceBox *{ color:#fff !important;}
.mainSingleSlide .el .in .discount{ opacity:.6;}

.mainSingleSlide1 .el{}
.mainSingleSlide1 .el .in{ padding:1em 1em; color:#fff;}
.mainSingleSlide1 .el .in .img_wrap{ border-radius:50%; overflow:hidden; box-shadow:2px 2px .75em rgba(0,0,0,.3);}
.mainSingleSlide1 .el .in .con_wrap{ font-size:1.188em;}
.mainSingleSlide1 .el .in .con_wrap .tt,
.mainSingleSlide1 .el .in .priceBox *{ color:#fff !important;}
.mainSingleSlide1 .el .in .discount{ opacity:.6;}

.mainSingleSlide2 .el{}
.mainSingleSlide2 .el .in{ padding:1em 1em; color:#fff;}
.mainSingleSlide2 .el .in .img_wrap{ border-radius:50%; overflow:hidden; box-shadow:2px 2px .75em rgba(0,0,0,.3);}
.mainSingleSlide2 .el .in .con_wrap{ font-size:1.188em;}
.mainSingleSlide2 .el .in .con_wrap .tt,
.mainSingleSlide2 .el .in .priceBox *{ color:#fff !important;}
.mainSingleSlide2 .el .in .discount{ opacity:.6;}

.mainSingleSlide3 .el{}
.mainSingleSlide3 .el .in{ padding:1em 1em; color:#fff;}
.mainSingleSlide3 .el .in .img_wrap{ border-radius:50%; overflow:hidden; box-shadow:2px 2px .75em rgba(0,0,0,.3);}
.mainSingleSlide3 .el .in .con_wrap{ font-size:1.188em;}
.mainSingleSlide3 .el .in .con_wrap .tt,
.mainSingleSlide3 .el .in .priceBox *{ color:#fff !important;}
.mainSingleSlide3 .el .in .discount{ opacity:.6;}

.mainSingleSlide_thumb_wrap{ position:relative;}
.mainSingleSlide_thumb{ width:31%; margin-left:0 !important; overflow:visible !important;}
.mainSingleSlide_thumb .el{}
.mainSingleSlide_thumb .el .in{ transition:.3s;}
.mainSingleSlide_thumb .el:not(.swiper-slide-active) .in{ opacity:.6; transform:scale(.9);}
.mainSingleSlide_thumb .el .in:hover,
.mainSingleSlide_thumb .el .in:hover{ opacity:1;}

.main_mdBanner{}
.mainMdBannerSlide .el .in{ padding-bottom:27.5%;}

.main_idea{}

.main_promotion{ overflow:hidden;}
.main_promotion .innerW{ position:relative; width:740px; max-width:100%; margin:0 auto;}
.mainBannerSlide{ overflow:visible !important;}
.mainBannerSlide .swiper-wrapper{}
.mainBannerSlide .el{}
.mainBannerSlide .el .wrap_in{ display:block; padding:0 1.5em;}
.mainBannerSlide .el .wrap_in .img{ padding-bottom:50%; border-radius:1.5em; overflow:hidden;}
.mainBannerSlide .el.swiper-slide-active .wrap_in .img {padding-bottom:60%;}
.mainBannerSlide .el.swiper-slide-duplicate-prev .wrap_in,
.mainBannerSlide .el.swiper-slide-duplicate-next .wrap_in { padding-top:2em;}
.main_group{}

.main_magazine{ overflow:hidden;}
.main_magazine .innerW{ width:1100px; margin:0 auto; max-width:100%;}
.mainMagazineSlide{ overflow:visible !important;}
.mainMagazineSlide .swiper-wrapper{ align-items:center;}
.mainMagazineSlide .el .wrap_in{ gap:1em 6em; padding:0 3em;}
.mainMagazineSlide .el .wrap_in .img_wrap{ width:50%; transition:transform .2s linear;}
.mainMagazineSlide .el .wrap_in .con_wrap{ flex:1; display:flex; flex-direction:column; gap:1em; padding:3em 0 2em 0;}
.mainMagazineSlide .el .wrap_in .con_wrap > *{ min-width:0;}
.mainMagazineSlide .el .wrap_in .con_wrap .cate{}
.mainMagazineSlide .el .wrap_in .con_wrap .cate .in{ padding:.5em 1em; border:1px solid #ddd; font-size:1.063em;}
.mainMagazineSlide .el .wrap_in .con_wrap .tit,
.mainMagazineSlide .el .wrap_in .con_wrap .txt{ white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;}
.mainMagazineSlide .el .wrap_in .con_wrap .tit{ font-size:1.750em; font-weight:600;-webkit-line-clamp:2;}
.mainMagazineSlide .el .wrap_in .con_wrap .txt{ font-size:1.125em; color:#555; line-height:1.5; -webkit-line-clamp:4;}
.mainMagazineSlide .el .wrap_in .con_wrap .main_more{ margin-top:2em;}
.mainMagazineSlide .el:not(.swiper-slide-active) .wrap_in .con_wrap{ width:0; height:0; padding:0 0; visibility:hidden; overflow:hidden; opacity:0;}
.mainMagazineSlide .el:not(.swiper-slide-active) .img_wrap{ width:100%; transform:scale(.75); filter:grayscale(1);}
.mainMagazineSlide .el:not(.swiper-slide-active) .img_wrap .resize{ padding-bottom:50%;}
.mainMagazineSlide .el:not(.swiper-slide-active) .img_wrap .re:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3;}

.main_best{}
.main_best .main_prod .list{ counter-reset:listIdx;}
.main_best .main_prod .list .el{ counter-increment:listIdx;}
.main_best .main_prod .list .el .in{ position:relative;}
.main_best .main_prod .list .el .in .bestNo{ position:absolute; z-index:2; top:0; left:0; display:flex; align-items:center; justify-content:center; text-align:center; width:3.5em; height:3.5em; background:var(--siteC); border-radius:0 0 1.5em 0; color:#fff;}
.main_best .main_prod .list .el .in .bestNo > .no{ font-size:1.125em; font-weight:700;}
.main_best .main_prod .list .el .in .bestNo > .no:before{ content:counters(listIdx, ".", decimal-leading-zero);}
.main_best .main_prod .list .el:nth-child(n + 4) .in .bestNo{ display:none;}

.main_new{}
.mainNewSlide_wrap{ position:relative;}
.mainNewSlide_wrap .control.pos .btn.prev{ left:-2em;}
.mainNewSlide_wrap .control.pos .btn.next{ right:-2em;}

.main_familyship{}

.main_package{ padding-top:0;}
.mainProdSlide_wrap{ position:relative;}
.mainProdSlide_wrap .control.pos{ top:25%;}
.mainProdSlide_wrap .control.pos .btn.prev{ left:-2em;}
.mainProdSlide_wrap .control.pos .btn.next{ right:-2em;}

.main_video{}
.main_video .video_con{ position:relative;}
.main_video .video_con:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.4;}
.main_video .video_con .wrap_in{ position:relative; box-sizing:border-box; padding:3em 5em; height:37.5em; text-align:center; color:#fff; transition:.3s; overflow:hidden;}
.main_video .video_con .wrap_in *:not(.tpoint){ color:inherit;}
.main_video .video_con .wrap_in .vod_txt{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.main_video .video_con .wrap_in .vod_txt .btn_play .xi{ font-size:4.000em;}
.main_video .video_con .wrap_in .vod_wrap{ position:relative; width:1000px; max-width:100%; margin:0 auto; visibility:hidden; opacity:0;}
.main_video .video_con.on .wrap_in{ height:auto; padding-top:5em; padding-bottom:5em;}
.main_video .video_con.on .wrap_in .vod_txt{ visibility:hidden;}
.main_video .video_con.on .wrap_in .vod_wrap{ visibility:visible; opacity:1;}
.main_video .video_con.on .wrap_in .vod_wrap .btn_close{ position:absolute; top:0; left:102%; font-size:2.000em;}
.main_video .video_con.on .wrap_in .vod_wrap .vod{ box-shadow:0 3px 1em rgba(0,0,0,.4);}

.main_event{}
.mainEventSlide .el .in{ display:block}
.mainEventSlide .el .in .img{ border-radius:1.5em; overflow:hidden;}
.mainEventSlide .el .in .con{ margin-top:2em;}
.mainEventSlide .el .in .con .t1{ font-size:1.250em; font-weight:600; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.mainEventSlide .el .in .con .t2{ font-size:.938em; color:#666; margin-top:1em;}

.main_review{}
.main_review .list{ width:1080px; max-width:100%; margin:0 auto;}
.main_review .list > li .in{ gap:1em; padding:1.25em .5em; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; transition:.3s;}
.main_review .list > li .in .tt_star{ width:10em; text-align:center;}
.main_review .list > li .in .con{ flex:1;}
.main_review .list > li .in .con .tt{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main_review .list > li .in .con .t0{ color:#222; font-weight:500; margin-bottom:.5em;}
.main_review .list > li .in .con .t1{ font-size:1.250em; font-weight:600;}
.main_review .list > li .in .con .t2{ position:relative; margin-top:.75em; padding-left:2em; font-size:1.063em; color:#555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; height: 1.2em; width: 35em;}
.main_review .list > li .in .con .t2:before{ content:"“"; display:block; position:absolute; top:-.125em; left:0; font-family:Georgia, "Times New Roman", Times, serif; font-size:2.750em; color:#c4c5ca; font-weight:bold; line-height:1;}
.main_review .list > li .in:hover{ color:var(--siteC);}

.main_cs{}
.main_cs .link_list{ gap:2em;}
.main_cs .link_list > li{ flex:1; display:flex;}
.main_cs .link_list > li .in{ flex:1; gap:1em 0; padding:2em 2em; background:var(--crGray); border-radius:.75em; transition:.2s;}
.main_cs .link_list > li .in .ico{ width:2.5em;}
.main_cs .link_list > li .in .ico img{ width:100%; transition:.2s;}
.main_cs .link_list > li .in .tt{ padding:.25em 0;}
.main_cs .link_list > li .in .t1{ font-size:1.063em; font-weight:500; color:#888;}
.main_cs .link_list > li .in .t2{ font-size:1.188em; font-weight:600;}
.main_cs .link_list > li .in:hover{ background:#fff; box-shadow:0 3px .875em rgba(0,0,0,.1);}
.main_cs .link_list > li .in:hover .ico img{ filter:var(--siteCfil);}

.main_cs .cs_banner{ position:relative; margin-top:4.5em;}
.main_cs .cs_banner:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7;}
.main_cs .cs_banner .wrap_in{ position:relative; padding:5em 5em; text-align:center; color:#fff;}
.main_cs .cs_banner .wrap_in *:not(.tpoint){ color:inherit;}

.main_shop_banner { background-color:#f4f4f4; width:100%; height:4em; margin-bottom:1em;}

/* 브랜드 스토리 */

/*company***************************/
.greetings_wrap > .wrap_img {position: relative;}
.greetings_wrap > .wrap_img .greet_tit{width: 33%;padding: 3em 2em;background-color:var(--siteC);color:#fff;position: absolute;right: 5em;bottom: -3em;box-sizing: border-box; box-shadow:-2px 2px 15px rgba(0, 0, 0, .15)}
.greetings_wrap > .wrap_img .greet_tit em{ margin-bottom:1em; padding-bottom:2em; font-size:.875em; letter-spacing:.5px; position:relative; opacity: .8;}
.greetings_wrap > .wrap_img .greet_tit em::before{ content:''; width:30px; height:1px; background-color:#fff; position:absolute; left:0; bottom:0; opacity:.4;}
.greetings_wrap > .wrap_img .greet_tit strong{ font-weight:700; font-size:2.75em; letter-spacing:3px;}
.greetings_wrap > .wrap_img .bg{padding-bottom: 25em;}
.greetings_wrap > .wrap_tt{padding: 3em 5em 5em; background-color:#f6f6f6;}
.greetings_wrap > .wrap_tt strong{ margin-bottom:2em; font-weight:700; font-size:1.8em; color:#333;}
.greetings_wrap > .wrap_tt strong em{ color:var(--siteC); vertical-align:bottom;}
.greetings_wrap > .wrap_tt .txt { margin-bottom:1em; font-size:1.125em; line-height: 1.5; color:#555; }
.greetings_wrap > .wrap_tt .txt .num { color:#fff; background-color:var(--siteC); font-weight:600; width: 1.5em; height: 1.5em; text-align: center; border-radius:50%;}
.greetings_wrap > .wrap_tt .greet_name { margin:4em 2em 0 0; font-size:1.125em; text-align:right; color:#555}
.greetings_wrap > .wrap_tt .greet_name em{ font-size:1.5em; color:#333;}
.greetings_wrap > .wrap_tt .greet_name .sign{ width:180px; height:50px;}

/* 등급별혜택 */

.benefits_wrap { gap: 2em;}
.benefits_wrap li {width: calc(33.3% - 2em); border:1px solid #ddd; border-radius:1em; padding:1.5em;}
.benefits_wrap li:hover {border:1px solid var(--siteC);}
.benefits_wrap li .top_box {}
.benefits_wrap li .top_box .class_icon {}
.benefits_wrap li .top_box .class_name { font-size:1.375em; font-weight:600; margin:1em 0;}
.benefits_wrap li .bottom_box { background-color:rgba(233,106,91,.1); padding:1em 0; border-radius:1em;}
.benefits_wrap li .bottom_box .tt { font-size:1.1em; font-weight:500;}
.benefits_wrap li .bottom_box .plus { background-color:var(--siteC); border-radius:50%; display:inline-block; width:1.5em; height:1.5em; line-height:1.5em; margin:0.5em 0;}
.benefits_wrap li .bottom_box .plus .xi { color:#fff;}

/**/

.viewSlider{ position:relative;}
.viewSlider .control { z-index:10; position:relative;}
.viewSlider .control:before { position:absolute; content:''; top:-95%; left:0; width:100%; height:3em; background:#fff;}
.viewSlider .control.basicSt.pos {top:unset; bottom:2%; display:flex;}
.viewSlider .control.pos .btn.prev{ left:0em; bottom: -36%;}
.viewSlider .control.pos .btn.prev .xi {transform: rotate(-90deg);}
.viewSlider .control.pos .btn.next{ right:0em; bottom: -36%; padding-left:1em;}
.viewSlider .control.pos .btn.next .xi {transform: rotate(90deg);}
.viewSlider .control.basicSt .paging {background-color:#ddd; flex:unset; width: 87%; margin-left:3em;border-radius: 1em; overflow: hidden;}
.viewSlider .control.basicSt .paging.swiper-pagination-progressbar { height:1em !important;}
.viewSlider .control.basicSt .paging > span {width: -webkit-fill-available; height:1em;}
.viewSlider .control.basicSt .paging.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#e96a5b;}