@charset "utf-8";
/* CSS Document */
.box0{ width:92%; margin:0 auto}
.box1{ width:1280px; 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:'Rb','NotoSans',sans-serif; letter-spacing:0;}
.header_PC { display: flex !important;}
.pcHide{ display:none !important;}
.moHide{}

body { overflow:hidden;}

.gnb .m_guide,
.gnb .m_mypage,
.gnb .m_company,
.gnb .m_customer{ display:none}
.gnb a{word-break: break-all;
word-wrap: break-word; /* Internet Explorer */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */}


/*header*/
#header{ position: relative; left:0; top:0; width:100%; z-index:1000}
#header .sub_wrap{ background:var(--siteC)}
#header .sub_wrap .wrapBox{ display:flex; align-items:center; gap:0 2em}
#header .sub_wrap .wrapH{ height:3em}
#header .sub_wrap .link_wrap{ display:flex; align-items:center; gap:0 .25em}
#header .sub_wrap .link_wrap > li > a{ color:#fff; font-size:.875em; font-weight:600; border:1px solid rgba(255,255,255,.2); padding:.25em .75em; border-radius:.25em}
#header .sub_wrap .link_wrap > li > a .arrow{ font-size:1em; margin-left:.5em}
#header .sub_wrap .link_wrap > li > a:hover{ background:rgba(0,0,0,.2)}
#header .sub_wrap .member_wrap{ margin-left:auto; align-items:center; gap:0 2em}
#header .sub_wrap .member_wrap > li > a{ color:#fff; font-size:.875em; font-weight:500; opacity:.7}
#header .sub_wrap .member_wrap > li > a:hover{ opacity:1}

#header .top_wrap{ border-bottom:1px solid #eee}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .gnb > li .dp1{ height:7em}
#header .top_wrap .wrapBox{ display:flex; align-items:center; gap:0 4em}
#header .top_wrap .wrapBox .gnb_wrap { flex:1 1 0%; min-width:0}
#header .top_wrap .wrapBox .gnb_wrap .gnb{ justify-content:center}
#header .top_wrap .logo > a{ display:block; /*height:2.875em;*/ overflow:hidden}
#header .top_wrap .logo > a .in{ display:block; position:relative}
#header .top_wrap .logo > a .in img{ display:block; height:100%}
#header .top_wrap .logo > a .in img.tt{ position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; animation-name: logoAni; animation-duration: 10s; animation-iteration-count: infinite}
@keyframes logoAni{
0% {opacity:0}
50% {opacity:0}
60% {opacity:1}
90% {opacity:1}
100% {opacity:0}
}
.logoAni:hover{animation-name: none}

#header .top_wrap .gnb_wrap .gnb{ display:flex; gap:0 5em}
#header .top_wrap .gnb_wrap .gnb > li{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ min-width:6em; font-weight:700}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.313em}
#header .top_wrap .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; transform:translate(-50%, 0); top:120%; background:var(--siteC); display:block; width:10em; padding:.5em; box-sizing:border-box; box-shadow:0 0 1em rgba(0,0,0,.1); visibility:hidden; opacity:0}
#header .top_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 .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em; color:#fff; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover{ background:#fff; color:var(--siteC)}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ font-weight:700; font-size:1.063em}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp2{ visibility:visible; opacity:1; top:calc(100% - 1em); transition:.3s}
#header .top_wrap .search_wrap{ margin-left:auto}
#header .top_wrap .search{ position:relative; display:flex; align-items:center; box-sizing:border-box; height:3.5em; padding:0 0 0 1.25em}
#header .top_wrap .search:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid var(--siteC); border-radius:3em; box-sizing:border-box;}
#header .top_wrap .search .inp{ position:relative; width:16em; box-sizing:border-box; background:none; border:none; }
#header .top_wrap .search .btn{ position:relative; background:none; border:none; height:100%; width:3.5em; border-radius:50%; color:#fff; background:var(--siteC)}

#header .top_wrap .search_mobile > a{ width:4em}
#header .top_wrap .search_mobile > a .xi{ font-size:1.625em}
#header .top_wrap .search_mobile .wrap_in{ position:absolute; width:30em; right:0; top:99%; background:#fff; box-sizing:border-box; padding:3em; padding-bottom:5em; box-shadow:-1em 1em 1em rgba(0,0,0,.1); opacity:0; transform:translateX(100%); visibility:hidden}
#header .top_wrap .search_mobile.on .wrap_in{ opacity:1; transform:translateX(0); visibility:visible; transition:.3s}
#header .top_wrap .search_mobile .searchBtn .xi:before{content:"\e97a"}
#header .top_wrap .search_mobile.on .searchBtn .xi:before{content:"\e9af"}
#header .top_wrap .search_mobile.on .searchBtn .hideT.close{ display:block}
#header .top_wrap .search_mobile.on .searchBtn .hideT.open{ display:none}
#header .top_wrap .search_mobile .wrap_in .wrap_tit{ font-weight:700; font-size:2.25em}
#header .top_wrap .search_mobile .wrap_in .wrap_tt{ color:#666}
#header .top_wrap .search_mobile .wrap_in .wrap_inp{ margin:2em 0 4em 0; position:relative; border-bottom:2px solid #000}
#header .top_wrap .search_mobile .wrap_in .wrap_inp label{ display:block}
#header .top_wrap .search_mobile .wrap_in .wrap_inp .inp{ width:100%; box-sizing:border-box; padding:1em .5em; border:none; font-size:1.063em}
#header .top_wrap .search_mobile .wrap_in .wrap_inp .inp:focus ~ .line{ width:100%}
#header .top_wrap .search_mobile .wrap_in .wrap_inp .btn{ width:3em; text-align:center; border:none; background:none}
#header .top_wrap .search_mobile .wrap_in .wrap_inp .btn .xi{ font-size:1.75em}
#header .top_wrap .search_mobile .wrap_in .keyword .tit{ font-weight:700; font-size:1.125em; color:#0060ae; margin-bottom:1em}

#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:1em}
#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:50%; 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:#777; margin-top:.5em}
#header .top_wrap .ico_wrap .list > li.m_cart > a .ico .no{ background:var(--siteC)}

#footer{ margin-top:8em}
#footer .cs_wrap{ background: #eee; padding:3em 0}
#footer .cs_wrap .list{ margin:-3em 0 0 -5em}
#footer .cs_wrap .list .wrap_in{ margin:3em 0 0 5em; position:relative;} 
#footer .cs_wrap .list .wrap_in:before { position:absolute; content:''; top:6%; right:-13%; width:1px; height:85%; background-color:#ccc;}
#footer .cs_wrap .list li:last-child .wrap_in:before { display:none;}
#footer .cs_wrap .list .wrap_in .wrap_tit{ font-weight:500; font-size:1.125em}
#footer .cs_wrap .list .wrap_in .wrap_con{ padding:1em 0}
#footer .cs_wrap .list .wrap_in .wrap_con .no{ font-weight:700; font-size:1.5em}
#footer .cs_wrap .list .wrap_in .wrap_con .t1{ color:#666}
#footer .cs_wrap .list .wrap_in .wrap_con .t2{ color:#999; font-size:.875em}
#footer .cs_wrap .list .wrap_in .wrap_con .board { background-color:#fff; padding:1em; border-radius:1em; overflow:hidden;}
#footer .cs_wrap .list .wrap_in .wrap_con .board > li:not(:first-child){ margin-top:.5em}
#footer .cs_wrap .list .wrap_in .wrap_con .board > li > a:hover, 
#footer .cs_wrap .list .wrap_in .wrap_con .board > li > a:focus { font-weight:600;}
#footer .cs_wrap .list .wrap_in .wrap_con .sns > li{ margin:0 .25em}
#footer .cs_wrap .list .wrap_in .wrap_con .sns > li > a{ width:3em; line-height:3em}
#footer .cs_wrap .list .wrap_in .wrap_con .bank_logo { width: 5em; margin-right:.5em;}
#footer .goTop{ width:3em; line-height:3em; text-align:center; background:var(--siteC); color:#fff; border-radius:50%}
#footer .copy_wrap{ padding:4em 0; background:#555;}
#footer .copy_wrap .logo img{ height:3em}
#footer .copy_wrap .info_wrap{}
#footer .copy_wrap .info_wrap .menu > li > a{ padding:1em 0; margin:0 2em 1em 0;}
#footer .copy_wrap .info_wrap .menu > li > a .tt{ font-size:1.125em; font-weight:500; color:#fff;border-bottom:1px solid #555;}
#footer .copy_wrap .info_wrap .menu > li > a:hover .tt { border-bottom:1px solid #fff;}
#footer .copy_wrap .info > li{ float:left; margin-right:2em; margin-bottom:.5em; letter-spacing:0; color:#fff;}
#footer .copy_wrap .info > li.br{ clear:left}
#footer .copy_wrap .info > li.copyright{ font-size:.875em; opacity:.5; text-transform:uppercase; margin-top:.5em; color:#fff;}
#footer .copy_wrap .info:after{ content:""; display:block; clear:both}

/*quick*/
#quick{ position:fixed; right:-11em; top:0; z-index:1001; width:10.5em; height:100%; background:#fff; transition:.3s}
#quick:after{ content:""; position:absolute; left:0; top:0; width:1px; height:100%; background:#ddd}
#quick .quickBtn{ position:absolute; width:4em; height:5em; left:-4em; top:50%; margin-top:-2.5em; border:1px solid transparent; border-right:none; background:#343b4d; text-align:center; color:#fff; margin-left:-1em; box-shadow:0 0 .5em .1em rgba(0,0,0,.3)}
#quick .quickBtn:after{ content:""; position:absolute; z-index:1; right:0; top:0; width:1px; height:100%}
#quick .quickBtn .tt{ width:100%; font-size:.6875em; margin-bottom:.5em}
#quick .quickBtn .xi{ width:100%}
#quick .quickBtn .xi:before{content:"\e93b"}
.on#quick{ right:0}
.on#quick .quickBtn{ margin-left:0; box-shadow:none; width:2em; transform:translateX(2em)}
.on#quick .quickBtn .tt{ display:none}
.on#quick .quickBtn .xi:before{content:"\e93e"}
.on#quick .quickBtn:after{ background:#fff}

#quick .quick_menu{ position:absolute; left:0; top:0; width:100%; height:100%}
#quick .quick_menu .box{ padding:0 .75em;}
#quick .quick_menu .bookmark{ display:block; margin:1.5em 0; padding:.25em; border-radius:2em; border:1px solid #ddd; text-align:center; color:#666; transition:.2s}
#quick .quick_menu .bookmark .xi{ font-size:1em; padding-right:.1em;}
#quick .quick_menu .bookmark .tt{ font-size:.688em; text-transform:uppercase;}
#quick .quick_menu .bookmark:hover{ background:#3db4b3; border-color:#3db4b3; color:#fff;}
#quick .quick_menu .cs{ background:#f8f8f8; border-bottom:1px solid #ddd; padding:1em 0}
#quick .quick_menu .cs .cs_tit{ font-size:.875em; color:var(--siteC); font-weight:700; margin-bottom:1em}
#quick .quick_menu .cs .info{ margin-bottom:.75em}
#quick .quick_menu .cs .info .tit{ font-size:.813em; color:#777; margin-bottom:.25em}
#quick .quick_menu .cs .info .t1{ color:#000; font-weight:700}
#quick .quick_menu .cs .info .t2{ font-size:.875em}
#quick .quick_menu .today{ padding:2em 0}
#quick .quick_menu .today .today_tit{ background:#343b4d; color:#fff; padding:1em 0 .5em 0; text-align:center; position:relative}
#quick .quick_menu .today .today_tit .tt{ font-size:.75em; text-transform:uppercase;}
#quick .quick_menu .today .today_tit .no{ position:absolute; width:4em; line-height:2em; top:-1em; left:50%; margin-left:-2em; background:var(--siteC); color:#fff; font-weight:700; border-radius:2em; font-size:.75em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
#quick .quick_menu .today .todaySlide{ border:1px solid #ddd; border-top:none; position:relative;}
#quick .quick_menu .today .todaySlide .img .in{ display:block; padding:1em; position:relative; cursor:pointer}
#quick .quick_menu .today .todaySlide .img .in img{ transition:.3s}
#quick .quick_menu .today .todaySlide .img .in .layer{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; transition:.3s}
#quick .quick_menu .today .todaySlide .img .in .layer .tit{ font-size:.813em; color:#000; padding:0 .5em;
word-break: break-all;
word-wrap: break-word; /* Internet Explorer */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */}
#quick .quick_menu .today .todaySlide .img .in .layer .tit:after{ font-family:xeicon!important; content:"\e916"; display:block; font-size:2em}
#quick .quick_menu .today .todaySlide .img .in:hover img{ opacity:.5}
#quick .quick_menu .today .todaySlide .img .in:hover .layer{ opacity:1}
#quick .quick_menu .today .todaySlide .arrow_wrap{ overflow:hidden}
#quick .quick_menu .today .todaySlide .arrow_wrap > li{ float:left; width:50%;}
#quick .quick_menu .today .todaySlide .arrow_wrap > li .xi{ display:block; border-top:1px solid #ddd; text-align:center; line-height:1.5em; font-size:1em; color:#000; cursor:pointer; transition:.3s;}
#quick .quick_menu .today .todaySlide .arrow_wrap > li.prev .xi:before{ content:"\e93c";}
#quick .quick_menu .today .todaySlide .arrow_wrap > li.next .xi:before{ content:"\e93f";}
#quick .quick_menu .today .todaySlide .arrow_wrap > li.next .xi{ border-left:1px solid #ddd}
#quick .quick_menu .today .todaySlide .arrow_wrap > li:hover .xi{ background:#aaa; color:#fff}
#quick .quick_menu .today .todaySlide .dot_wrap{ position:absolute; width:100%; left:0; margin-top:1em; text-align:center}
#quick .quick_menu .today .todaySlide .slick-dots > ul > li{ display:inline-block; *display:inline; zoom:1;}
#quick .quick_menu .today .todaySlide .slick-dots > ul > li > button{ display:block; width:1em; height:1em; border-radius:1em; background:#c6c6c6; border:none; font-size:.625em; margin:.1em; overflow:hidden; text-indent:-2em}
#quick .quick_menu .today .todaySlide .slick-dots > ul > li.slick-active > button{ background:var(--siteC)}

#quick .quick_menu .link .list{ margin:-.25em -.25em 0 0; font-size:.75em;}
#quick .quick_menu .link .list > li{ width:100%}
#quick .quick_menu .link .list > li > a{ display:block; margin:.25em .25em 0 0; border:1px solid #ddd; text-align:center; line-height:2.25em; color:#666; transition:.2s}
#quick .quick_menu .link .list > li > a .xi{ padding-right:.25em; vertical-align:top}
#quick .quick_menu .link .list > li.st1 > a{ padding:.5em 0; background:var(--siteC); border-color:transparent; color:#fff; font-size:1.125em}
#quick .quick_menu .link .list > li.st2 > a{ background:#ddd;}

#quick_2{ position:fixed; z-index:100; bottom:210px; right:.8%; width:180px; height:136px;}
#quick_2 .quick_icon{ width:50px; height:50px; border-radius:50px; background:#3b1e1e; text-align:center; line-height:50px; overflow:hidden; position:absolute; left:50%; top:-25px; transform:translateX(-50%);}
#quick_2 .quick_icon i{color:#fff; font-size:1.5rem;}
#quick_2 .quick_wrap{width:100%; height:100%; background:#fbe300; border-radius:7px; overflow:hidden; display:flex; justify-content:center; align-items:center; margin-bottom:2rem; flex-direction:column;}
#quick_2 .quick_wrap .quick_tit{font-size:1.25rem; color:#3b1e1e; margin-bottom:1rem; margin-top:1rem;}
#quick_2 .quick_wrap .quick_tit .quick_bold{font-weight:600; vertical-align:baseline;}
#quick_2 .quick_wrap .kakao_btn{display:block; width:80%; height:40px; color:#fff; text-align:center; line-height:40px; background:#3b1e1e}
#quick_2 .quick_wrap .kakao_btn i{margin-top:2px; margin-left:1rem; margin-right:-.5rem;}

#quick_2.st2{ position:fixed; z-index:100; bottom:40px; right:.8%; width:180px; height:136px;}
#quick_2.st2 .quick_icon{ width:50px; height:50px; border-radius:50px; background:#3b1e1e; text-align:center; line-height:50px; overflow:hidden; position:absolute; left:50%; top:-25px; transform:translateX(-50%);}
#quick_2.st2 .quick_icon i{color:#fff; font-size:1.5rem;}
#quick_2.st2 .quick_wrap{width:100%; height:100%; background:#fbe300; border-radius:7px; overflow:hidden; display:flex; justify-content:center; align-items:center; margin-bottom:2rem; flex-direction:column;}
#quick_2.st2 .quick_wrap .quick_tit{font-size:1.25rem; color:#3b1e1e; margin-bottom:1rem; margin-top:1rem;}
#quick_2.st2 .quick_wrap .quick_tit .quick_bold{font-weight:600; vertical-align:baseline;}
#quick_2.st2 .quick_wrap .call_btn{display:block; width:80%; height:40px; color:#fff; text-align:center; line-height:40px; background:#3b1e1e}
#quick_2.st2 .quick_wrap .call_btn i{margin-top:2px; margin-left:1rem; margin-right:-.5rem;}

#quick_3{ position:fixed; z-index:100; bottom:40px; right:.8%; width:180px; height:136px;}
#quick_3 .quick_icon{ width:50px; height:50px; border-radius:50px; background:#f95959; text-align:center; line-height:50px; overflow:hidden; position:absolute; left:50%; top:-25px; transform:translateX(-50%);}
#quick_3 .quick_icon i{color:#fff; font-size:1.5rem;}
#quick_3 .quick_wrap{width:100%; height:100%; background:#ffe0e0; border-radius:7px; overflow:hidden; display:flex; justify-content:center; align-items:center; margin-bottom:2rem; flex-direction:column; border:1px solid #f95959; box-sizing:border-box;}
#quick_3 .quick_wrap .quick_tit{font-size:1.25rem; color:#555; margin-bottom:1rem; margin-top:1rem;}
#quick_3 .quick_wrap .quick_tit .quick_bold{font-weight:600; vertical-align:baseline;}
#quick_3 .quick_wrap .call_btn{display:block; width:80%; height:40px; color:#fff; text-align:center; line-height:40px; background:#f14c4c}
#quick_3 .quick_wrap .call_btn i{margin-top:2px; margin-left:1rem; margin-right:-.5rem;}


#quick_new{ position:fixed; z-index:100; bottom:1.5em; right:1em; text-align:right;}
#quick_new .quick_wrap { position:relative; width:3.5em; height:3.5em; box-sizing:border-box; transition:.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: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:#20A4F3;}
#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;}

/* .talk_banner_div{}
.talk_banner_preview{width:4em !important; height:4em !important; border-radius: 50%;}
.talk_banner_preview:hover { width:300px; padding:0 1.75em 0 1.25em;} 
.talk_banner_preview:hover:before { border-radius:10em;}
.talk_preview_area .talk_banner_preview:after{ width: 10em !important;} */


#quick_recon .mQuick{position:fixed; z-index:1002; right:0; top:50%; width:3.5em; transform:translateY(-50%);}
#quick_recon .mQuick .va_wrap{}
#quick_recon .mQuick ul > li{}
#quick_recon .mQuick ul > li > .in{ display:flex; align-content:center; align-items:center; width:8em; background:#393a3e; color:#fff; white-space:nowrap; transition:.3s; /* border-right:1px solid #bbb; */}
/* #quick_recon .mQuick ul > li > a:hover, #quick_recon .mQuick ul > li > a:focus { background-color:#fff; color:var(--siteC);} */
#quick_recon .mQuick ul > li:last-of-type > a{}
#quick_recon .mQuick ul > li > a .icon{ width:3.5em; height:3.5em;}
#quick_recon .mQuick ul > li > a .xi{ font-size:1.200em;}
#quick_recon .mQuick ul > li > a .tt{ font-size:.700em; flex:1;}


#quick_recon .mQuick ul > li:hover > .in{ transform:translateX(calc(-100% + 3.5em));}
#quick_recon .mQuick ul > li:hover > a span{}



/**/
#contents{overflow:hidden;}
#contents .sub_top_wrap{ position:relative; z-index:99; background:#f5f5f5;}
#contents .sub_top_wrap .sub_visual{ padding:2em 0; position:relative; text-align:center; color:#343b4d; background-color:#f4f4f4;}
#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.250em; font-weight:600; letter-spacing:-1.5px;}
#contents .sub_top_wrap .sub_visual .t2:before{ content:""; display:block; width:.75em; height:2px; background:#111; margin:.5em auto .313em auto}

#contents .sub_top_wrap .sub_gnb{ position:relative; background-color:#f4f4f4;}
#contents .sub_top_wrap .sub_gnb:after{ content:""; position:absolute; z-index:2; left:0; bottom:0; width:100%; height:1px; background:#343b4d;}
#contents .sub_top_wrap .sub_gnb .gnb{ padding-left:1px;}
#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 .va_wrap{ height:3.25em;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2{ text-align:center; white-space:nowrap; overflow:hidden; padding-left:2px; display:flex; justify-content:center}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li{ flex:1 1 1%; max-width:15em; position:relative;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li > a{ position:relative; z-index:1; margin-left:-1px; background:#fff; border:1px solid #c7cbd0; color:#77787b; white-space:normal;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li > a .va{ position:relative; z-index:3; font-weight:500}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li:hover > a{ color:#111;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li.on > a{ z-index:3; border-color:#343b4d; border-bottom-color:#fff; color:#111; font-weight:500;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3{ position:absolute; left:0; right:-1px; padding:.75em .75em; background:#fff; border:1px solid #c7cbd0; font-size:1em; display:none;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3 .va_wrap{ height:auto;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3 > li{ display:block;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3 > li > a{ padding:.25em 0; color:#777;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3 > li > a .va{ font-size:.813em;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3 > li:hover > a{ background:#f5f5f5;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp3 > li.on > a{ color:var(--siteC); font-weight:700;}
#contents .sub_top_wrap .sub_gnb .gnb > li .dp2 > li:hover .dp3{ display:block;}

#contents .doc{ padding:4em 0 0 0; min-height:70vh;}
body.shopping #contents .doc{ padding-top:2.5em;}

/**/
.mainVisualSlide_wrap{ position:relative; z-index:1; overflow:hidden;}
.mainVisualSlide_wrap .mainVisualSlide .wrap_in{ display:block}
.mainVisualSlide_wrap .mainVisualSlide .wrap_in .img{display:block; padding-bottom:50%; transform:translateX(20%); opacity:0}
.mainVisualSlide_wrap .visualW{ width:81.25%}
.mainVisualSlide_wrap .el.swiper-slide-active .img,
.mainVisualSlide_wrap .el.swiper-slide-duplicate-active .img{ transform:translateX(0); opacity:1; transition:1s; transition-delay:.2s}
.mainVisualSlide_wrap .control{ position:absolute; left:0; bottom:0; width:100%; z-index:1}
.mainVisualSlide_wrap .control .wrapIn{ display:flex}
.mainVisualSlide_wrap .control .wrapIn .nav{ display:flex}
.mainVisualSlide_wrap .control .wrapIn .nav .btn{ flex:0 0 auto; width:3em; height:3em; display:flex; align-items:center; justify-content:center; background:#fff; color:#aaa; cursor:pointer; transition:.3s}
.mainVisualSlide_wrap .control .wrapIn .nav .btn.prev,
.mainVisualSlide_wrap .control .wrapIn .nav .btn.next{ width:2em}
.mainVisualSlide_wrap .control .wrapIn .nav .btn:hover{ color:#111}
.mainVisualSlide_wrap .control .wrapIn .nav .play .btn{ color:var(--siteC)}
.mainVisualSlide_wrap .control .wrapIn .nav .paging{ background:#fff; height:100%; display:flex; align-items:center; justify-content:center; gap:.125em; padding:0 1em; color:#777; font-size:.938em; font-weight:500}
.mainVisualSlide_wrap .control .wrapIn .nav .paging .swiper-pagination-current{ width:1.5em; text-align:right; color:#111; font-weight:700}
.mainVisualSlide_wrap .control .wrapIn .mainVisualSlide_thumb{ flex:1 1 0%; min-width:0}
.mainVisualSlide_thumb .el{ width:25%}
.mainVisualSlide_thumb .el .in{ display:flex; align-items:center; justify-content:center; cursor:pointer; height:3em; background:rgba(0,0,0,.4); color:#fff; line-height:1.1; text-align:center; transition:.3s}
.mainVisualSlide_thumb .el .in:hover{ background:rgba(0,0,0,.6)}
.mainVisualSlide_thumb .el.swiper-slide-thumb-active .in{ background:var(--siteC); color:#fff}

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

.control.basicSt{ display:flex; align-items:center; margin-top:1em; gap:0 1em}
.control.basicSt .btn{ cursor:pointer; color:#777}
.control.basicSt .btn:hover{ color:#111}
.control.basicSt .paging{ flex:1 1 0%; min-width:0}

.main_link .list{ display:flex; flex-wrap:wrap; gap:1.5em}
.main_link .list > li{ width:calc(25% - 1.35em)}
.main_link .list > li > a{ display:block}
.main_link .list > li > a .ico{ display:block; padding-bottom:80%; position:relative}
.main_link .list > li > a .ico:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.05; transition:.3s}
.main_link .list > li > a .ico img{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:40%}
.main_link .list > li > a .tt{ display:block; padding:.5em; text-align:center; font-weight:600; font-size: 1.125em; margin-top:.5em;}
.main_link .list > li > a:hover .ico:before{ opacity:.1}
.main_link .list > li > a:hover .tt{ color:var(--siteC)}

.main_promotion .wrapBox{ display:flex}
.main_promotion .wrap_tit{ width:25em}
.main_promotion .wrap_tit .list > li{ margin:2em 0}
.main_promotion .wrap_tit .list > li > a{ position:relative}
.main_promotion .wrap_tit .list > li > a:before{ content:""; position:absolute; left:0; bottom:0; height:30%; background:#111; opacity:.15; width:0; transition:.3s}
.main_promotion .wrap_tit .list > li > a .t1{ position:relative; font-size:1.75em; font-weight:700; opacity:.5}
.main_promotion .wrap_tit .list > li:hover > a .t1,
.main_promotion .wrap_tit .list > li.on > a .t1{ opacity:1}
.main_promotion .wrap_tit .list > li.on > a:before{ width:100%}
.main_promotion .wrap_slider{ flex:1 1 0%; min-width:0}
.main_promotion .control{ display:flex; gap:0 2em; position:absolute; right:100%; bottom:0}
.main_promotion .control .btn{ font-size:1.5em; cursor:pointer; opacity:.5}
.main_promotion .control .btn:hover{ color:var(--siteC); opacity:1}

.mainNewsSlide .el .in{ display:block}
.mainNewsSlide .el .in .img{ display:block}
.mainNewsSlide .el .in .img .resize{ padding-bottom:100%}

.main_box{ padding:4em 0}
.main_box.bg1{ background:#f1f1f1}
.main_box.bg2{ background: linear-gradient(90deg, #e5f7ec 0%, #c3daf6 100%);}
.main_titN{ margin-bottom:1.5em}
.main_titN .t1{ font-weight:700; font-size:2em}
.tLine{ display:inline-block; vertical-align:top; position:relative}
.tLine:before{ content:""; position:absolute; left:0; bottom:5%; width:100%; height:25%; background:var(--siteC); opacity:.4; transform:skewX(-5deg)}
.tLine > i{ position:relative}

/**/
.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;}

/*메인비주얼*/
.main_wide_wrap{ /*background:#e9f2fb;*/ height:31.25em}
.mainVisual_wrap{ background:#f5f5f5;}
.mainVisual_wrap,
.mainVisual .slick-track,
.mainVisual .item{ position:relative; height:35em; overflow:hidden; width:100%;}
.mainVisual .item .img{ position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.mainVisual .item .link{ position:relative; display:block; height:100%; max-width:100%}
.mainVisual_wrap .slick-dots{ position:absolute; bottom:2em; left:0; width:100%; text-align:center;}
.mainVisual_wrap .slick-dots > ul > li{ display:inline-block; margin:0 .375em;}
.mainVisual_wrap .slick-dots > ul > li button{ width:.813em; height:.813em; background:#fff; border:none; border-radius:50%; text-indent:-9999px; transition:.2s;}
.mainVisual_wrap .slick-dots > ul > li.slick-active button{ width:2.5em; border-radius:3em;}
.mainVisual_wrap .main_arrow_wrap{ position:absolute; top:50%; left:0; right:0;}
.mainVisual_wrap .main_arrow_wrap li{ position:absolute; top:0; transform:translateY(-50%);}
.mainVisual_wrap .main_arrow_wrap li.prev{ left:-7em;}
.mainVisual_wrap .main_arrow_wrap li.next{ right:-7em;}

/* .mainVisual_wrap .arrow_wrap { position:absolute; top:0; left:0; background:#ededed; cursor:pointer; display:none;}
.mainVisual_wrap .arrow_wrap .slick-arrow {width:3.25em; background:#343b4d; text-align:center; height:3.125em; z-index:2; line-height:3em;}
.mainVisual_wrap .arrow_wrap .slick-arrow .xi {color:#fff; font-size:1.25em; opacity:.8;}
 */


.mainVisual_nav{ position:absolute; left:0; right:0; bottom:30px; /* border-bottom:1px solid var(--siteC); */ background:transparent;}
.mainVisual_nav .box1{ max-width:100%;}
.mainVisual_nav .va_wrap{ width:1.25em; height:1.25em; border-radius:50%; /* background:#f5f5f5; */}
.mainVisual_nav .inner{ position:relative; margin-left:0; /* padding-left:6.5em; */ /* background:#f5f5f5; */}
.mainVisual_nav .inner:before,
.mainVisual_nav .inner:after { content:""; position:absolute; z-index:1; left:0; width:100%; height:1px; /* background:#eee; */}
.mainVisual_nav .inner:before{ top:0;}
.mainVisual_nav .inner:after { bottom:0;}
.mainVisual_nav .caption{ z-index:2;}
.mainVisual_nav .caption .slick-list .slick-track div {width:50px!important;}
.mainVisual_nav .caption:after{ content:""; display:block; clear:both;}
.mainVisual_nav .caption .item{ float:left; width:20%;}
/*.mainVisual_nav .caption .item .in{ position:relative; padding:0 .5em; border-right:1px solid #eee; color:#222;}
.mainVisual_nav .caption .item .in:after{ content:""; position:absolute; bottom:0; left:50%; margin-left:0; width:0; height:4px; background:#2e629c; opacity:0; transition:.3s;}*/
.mainVisual_nav .caption .item .in .tt{color:#333; font-weight:500; font-family:'score'}
.mainVisual_nav .caption .item a {background:#888;}
.mainVisual_nav .caption .item:hover .in{/*   background:var(--siteC); */ transition:.2s;}
.mainVisual_nav .caption .item:hover .in .tt {color:#fff;}
.mainVisual_nav .caption .item.slick-current .in{ color:#fff; background:orange;}
.mainVisual_nav .caption .item.slick-current .in .tt {color:#fff;}
/*.mainVisual_nav .caption .item.slick-current .in:after{ margin-left:-50%; width:100%; opacity:1;}*/


/* .mainVisual_nav .btn{ position:absolute; top:0; right:0; width:2.813em; background:#ededed; cursor:pointer; display:none;}
.mainVisual_nav .btn .xi{ font-size:1.500em; color:#555;}
 */


/* banner slide */
.main_wide_wrap{ /*background:#e9f2fb;*/ height:31.25em}
.mainVisual_wrap{ background:#f5f5f5;}
.mainVisual_wrap,
.mainVisual .slick-track,
.mainVisual .item{ position:relative; height:35em; overflow:hidden; width:100%;}
.mainVisual .item .img{ position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.mainVisual .item .link{ position:relative; display:block; height:100%; max-width:100%}
.mainVisual_wrap .slick-dots{ position:absolute; bottom:2em; left:0; width:100%; text-align:center;}
.mainVisual_wrap .slick-dots > ul > li{ display:inline-block; margin:0 .375em;}
.mainVisual_wrap .slick-dots > ul > li button{ width:.813em; height:.813em; background:#fff; border:none; border-radius:50%; text-indent:-9999px; transition:.2s;}
.mainVisual_wrap .slick-dots > ul > li.slick-active button{ width:2.5em; border-radius:3em;}
.mainVisual_wrap .main_arrow_wrap{ position:absolute; top:50%; left:0; right:0;}
.mainVisual_wrap .main_arrow_wrap li{ position:absolute; top:0; transform:translateY(-50%);}
.mainVisual_wrap .main_arrow_wrap li.prev{ left:-7em;}
.mainVisual_wrap .main_arrow_wrap li.next{ right:-7em;}

.mainVisual_nav2 .arrow_wrap { position:absolute; top:0; left:0; background:#ededed; cursor:pointer;}
.mainVisual_nav2 .arrow_wrap .slick-arrow {width:3em; background:#343b4d; text-align:center; height:3.5em; z-index:2; line-height:3em;}
.mainVisual_nav2 .arrow_wrap .slick-arrow .xi {color:#fff; font-size:1.25em; opacity:.8;}


.mainVisual_nav2{ position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid var(--siteC); background:#f5f5f5;}
.mainVisual_nav2 .box1{ max-width:100%;}
.mainVisual_nav2 .va_wrap{ height:3.5em;  background:#f5f5f5;}
.mainVisual_nav2 .inner{ position:relative; margin-left:0;padding-left:6em; background:#f5f5f5;}
.mainVisual_nav2 .inner:before,
.mainVisual_nav2 .inner:after { content:""; position:absolute; z-index:1; left:0; width:100%; height:1px;background:#eee;}
.mainVisual_nav2 .inner:before{ top:0;}
.mainVisual_nav2 .inner:after { bottom:0;}
.mainVisual_nav2 .caption{ z-index:2;}
/* .mainVisual_nav2 .caption .slick-list .slick-track div {width:50px!important;} */
.mainVisual_nav2 .caption:after{ content:""; display:block; clear:both;}
.mainVisual_nav2 .caption .item{ float:left; width:15%!important;}
.mainVisual_nav2 .caption .item .in{ position:relative; padding:0 1.5em; border-right:1px solid #eee; color:#222;}
.mainVisual_nav2 .caption .item .in:after{ content:""; position:absolute; bottom:0; left:50%; margin-left:0; width:0; height:4px; background:#2e629c; opacity:0; transition:.3s;}
.mainVisual_nav2 .caption .item .in .tt{color:#333; font-weight:500; font-family:'score'}
.mainVisual_nav2 .caption .item a {background:#eee; border-left:1px solid #fff}
.mainVisual_nav2 .caption .item:hover .in{background:var(--siteC);transition:.2s;}
.mainVisual_nav2 .caption .item:hover .in .tt {color:#fff;}
.mainVisual_nav2 .caption .item.slick-current .in{ color:#fff; background:#343b4d; border-left:1px solid #eee;}
.mainVisual_nav2 .caption .item.slick-current .in .tt {color:#fff;}
.mainVisual_nav2 .caption .item.slick-current .in:after{ margin-left:-50%; width:100%; opacity:1;}


.mainVisual_nav2 .btn{ position:absolute; top:0; right:0; width:2.813em; background:#ededed; cursor:pointer;}
.mainVisual_nav2 .btn .xi{ font-size:1.500em; color:#555;}



/**/
.main_con1 {padding:3em 0;}
.main_con1 .inquiry_wrap {}
.main_con1 .inquiry_wrap .inquiry_left {width:65%;}
.main_con1 .inquiry_wrap .inquiry_left .con_one {flex:1 1 50%; margin-right:1em; padding-bottom:13.8em; position:relative; cursor:pointer; background-repeat: no-repeat;background-position: center;}
.main_con1 .inquiry_wrap .inquiry_left .con_one:last-child {margin-right:0;}
.main_con1 .inquiry_wrap .inquiry_left .con_one .txt_wrap{position:absolute; top:50%; right:3em; transform:translateY(-50%); font-family:'score'}
.main_con1 .inquiry_wrap .inquiry_left .con_one .txt_wrap .tit {font-size:1.3em; font-weight:700; margin-bottom:.8em;}
.main_con1 .inquiry_wrap .inquiry_left .con_one .txt_wrap .btn {background:#111; color:#fff; width:6.5em; text-align:center; font-size:.875em; padding:.5em 0;}

.main_con1 .inquiry_wrap .inquiry_right {width:35%; margin-left:3em;}
.main_con1 .inquiry_wrap .inquiry_right .tit_wrap {margin-bottom:.5em; font-family:'score'}
.main_con1 .inquiry_wrap .inquiry_right .tit_wrap .tit {font-size:1.3em; font-weight:700;}
.main_con1 .inquiry_wrap .inquiry_right .tit_wrap .btn {font-size: .8em;background:var(--siteC);color:#fff;padding: .35em 0;width: 11em;text-align: center;}
.main_con1 .inquiry_wrap .inquiry_right .tit_wrap .btn .xi { vertical-align:baseline;}
.main_con1 .inquiry_wrap .inquiry_right .con_wrap .one_line {font-size:.875em; margin-bottom:.5em;}
.main_con1 .inquiry_wrap .inquiry_right .con_wrap .one_line .tit {width: 20em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main_con1 .inquiry_wrap .inquiry_right .con_wrap .one_line .tit .xi {font-size:.95em; color:#aaa; vertical-align:baseline;}
.main_con1 .inquiry_wrap .inquiry_right .con_wrap .one_line .answer .name {color:#666; margin-right:1em;}
.main_con1 .inquiry_wrap .inquiry_right .con_wrap .one_line .answer .btn {border:1px solid #111; padding:.1em 0; width:4.5em; text-align:center; font-size:.875em;}
.main_con1 .inquiry_wrap .inquiry_right .con_wrap .one_line .answer .btn.complete {background:#111; color:#fff;}

/*main_label*/
.main_label_tit .tit {font-size:2em; font-family:'score'; font-weight:700; margin-bottom:.5em;}
.main_label{padding-bottom:3em;}
.main_label .list_prod_wrap .list_prod .slick-list{ padding:1em 0}
.main_label .list_prod_wrap .list_prod {margin:0;}
.main_label .list_prod_wrap .list_prod .prod{ margin:0 -.75em}
.main_label .list_prod_wrap .list_prod .prod .el{ width:20%}
.main_label .list_prod_wrap .list_prod .prod .in{ margin:0 .75em; border:none}
.main_label .list_prod_wrap .list_prod .prod .in .img_wrap{border-radius:0;}
.main_label .list_prod_wrap .list_prod .prod .in .img_wrap .resize{ padding-bottom:100%}
.main_label .list_prod_wrap .list_prod .prod .in .con_wrap{ padding:.75em}
.main_label .list_prod_wrap .list_prod .prod .in .con_wrap .t2{ color:#333; text-align:center;}
.main_issue .list_prod_wrap .list_prod .prod .in .con_wrap .price .no,
.main_label .list_prod_wrap .list_prod .prod .in .con_wrap .price .no{ font-size:1.063em; font-weight:600;}
.main_issue .list_prod_wrap .list_prod .prod .in .con_wrap .price .won,
.main_label .list_prod_wrap .list_prod .prod .in .con_wrap .price .won{ font-size:.875em; font-weight:400; vertical-align:text-bottom}

.main_prod_control{ justify-content:flex-start !important}
.main_prod_control .btn{ width:3em; line-height:3em; text-align:center; border-radius:50%; border:1px solid #ddd; cursor:pointer}
.main_prod_control .btn .xi{ font-size:1.5em}
.main_prod_control .btn.prev .xi:before{content:"\e93d"}
.main_prod_control .btn.next .xi:before{content:"\e940"}
.main_prod_control .btn:hover{ box-shadow:0 0 .5em rgba(0,0,0,.2)}
.main_prod_control .btn.pause .xi:before{content:"\ea3b"}
.main_prod_control .btn.play .xi:before{content:"\ea3e"}
.main_prod_control .btn.pause{ border-color:transparent; background:#333; color:#fff}
.main_prod_control .btn.play{ border-color:transparent; background:#0063ba; color:#fff}
.main_prod_control .btn:not(:first-child){ margin-left:.25em}
.main_prod_control .progress { flex:1 1 0%; min-width:0;  height:1px; overflow: hidden; background-color: #f5f5f5; background-image: linear-gradient(to right, black, black); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out}
.main_prod_control .sr-only { position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0}

/*main_recom*/
.main_tab_wrap{ margin-bottom:1.5em;}
.main_tab_wrap .box1{ position:relative}
.main_recom_tab{}
.main_recom_tab .tab{justify-content:flex-start;}
/*.main_recom_tab .tab > li .va_wrap{ height:2.2em;}*/
.main_recom_tab .tab > li .in{ margin-right:.5em; padding:.5em 1.5em; box-sizing:border-box; background:#b2b2b2; color:#fff; transition:.2s; height:3em;}
.main_recom_tab .tab > li:last-child .in { margin-right:0;}
.main_recom_tab .tab > li .in .tt{ font-family:'score';}
.main_recom_tab .tab > li:hover .in,
.main_recom_tab .tab > li.on .in{ background:#111; color:#fff; position:relative; line-height:2em;}
.main_recom_tab .tab > li.on .in:before {position:absolute; width:2px; height:3em; background:#111; left:-4px; top:0;}

.main_recom_tit > p {font-size:2em; font-family:'score'; font-weight:700; margin-bottom:.5em;}
.main_recom {padding-bottom:3em;}
.main_recom .list_prod_wrap .list_prod{margin:0;}
.main_recom .list_prod_wrap .list_prod .prod{ margin:0 1px 1px 0}
.main_recom .list_prod_wrap .list_prod .prod .el{ width:20%; margin-right:1em;}
.main_recom .list_prod_wrap .list_prod .prod .el:last-child {margin-right:0;}
.main_recom .list_prod_wrap .list_prod .prod .in{ margin:0 -1px -1px 0; box-shadow:-1px 8px 18px #ddd;}
.main_recom .list_prod_wrap .list_prod .prod .in .img_wrap{ padding:2em 2em; box-shadow:none; border-radius:0;}
.main_recom .list_prod_wrap .list_prod .prod .in .img_wrap .resize{}
.main_recom .list_prod_wrap .list_prod .prod .in .con_wrap{ padding:2em; box-sizing:border-box;}
.main_recom .list_prod_wrap .list_prod .prod .in .con_wrap .t2{ color:#333; font-family:'score';}
.main_issue .list_prod_wrap .list_prod .prod .in .con_wrap .price .no,
.main_recom .list_prod_wrap .list_prod .prod .in .con_wrap .price .no{ font-size:1.063em; font-weight:700;}
.main_issue .list_prod_wrap .list_prod .prod .in .con_wrap .price .won,
.main_recom .list_prod_wrap .list_prod .prod .in .con_wrap .price .won{ font-size:.875em; font-weight:400; vertical-align:text-bottom}

/*NEW BEST*/
.main_newB {padding:1.5em 0 3em;}
.main_newB .main_newB_tit {font-size:2em; font-family:'score'; font-weight:700; margin-bottom:.5em;}

.main_newB .newB_wrap {margin-bottom:1em;}
.main_newB .newB_wrap > li {flex: 1 1 16.666%; margin-right:1em; box-shadow:-1px 8px 8px #ddd; cursor:pointer;}
.main_newB .newB_wrap > li:last-child {margin-right:0;}
.main_newB .newB_wrap .one_con .img_wrap {}
.main_newB .newB_wrap .one_con .txt_wrap {padding:1em; box-sizing:border-box;}
.main_newB .newB_wrap .one_con .txt_wrap .tit {font-size:.85em; margin-bottom:1em; }
.main_newB .newB_wrap .one_con .txt_wrap .price {text-align:right; }
.main_newB .newB_wrap .one_con .txt_wrap .price .c_price {font-size:1.063em; font-weight:700;}
.main_newB .newB_wrap .one_con .txt_wrap .price .won{font-size:.875em; font-weight:400; vertical-align:text-bottom}
.main_newB .newB_wrap {}


/**/
.mall_nav{position:relative; z-index:100; margin-bottom:.688em; margin-top:0}
.mall_nav > li{ position:relative; margin-left:1em; line-height:1.313em;}
.mall_nav > li:first-child{ margin-left:0}
.mall_nav > li .sec{ position:absolute; font-size:.875em; left:-1.25em; width:1.5em; top:0; text-align:center; color:#aaa}
.mall_nav > li .sec:before{content:"\e940"}
.mall_nav > li.home a{ width:1.313em; padding:0; text-align:center; background:#343b4d; color:#fff !important; margin-left:.125em; border-radius:3px}
.mall_nav > li.home a .icon:before{ content:"\e902"; font-size:.813em}
.mall_nav > li a{ overflow:hidden; position:relative; text-align:left;}
.mall_nav > li .dp1{ padding:0 .5em; margin:-1px 0 0 -1px; background:#fff; color:#999}
.mall_nav > li .dp1 .va{ font-size:.938em}
.mall_nav > li:hover .dp1,
.mall_nav > li.on .dp1{ color:#111}
.mall_nav > li .dp1 .arrow{ font-size:1em; padding-left:1em}
.mall_nav > li .dp1 .arrow:before{content:"\e938"}
.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; top:0; left:1em; transform:rotate(-45deg); background:#222; transform-origin:right top}
.mall_nav > li .dp2_wrap .line2{ width:1em; top:0; left:1em; transform:rotate(45deg); background:#222; transform-origin:left top; margin-left:1em}
.mall_nav > li .dp2_wrap .line3{ width:1.25em; top:.688em; left:1.313em; margin-left:1px; background:#fff}
*/
.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:.813em; 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 .dp2_wrap,
.mall_nav > li.on .dp2_wrap{ opacity:1; visibility:visible}

.sub_lnb_wrap{}
.sub_lnb_wrap .cate_tit{ padding:.875em 2em .875em 0;}
.sub_lnb_wrap .cate_tit .tt{ display:inline-block; color:#343b4d; letter-spacing:-1px;}
.sub_lnb_wrap .cate_tit .t1{ font-size:1.875em; 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; background:#f9f9f9}
.sub_lnb_wrap .cate_list .dp2{ padding:0 1px 1px 0}
.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; width:16.66%; background:#fff}
.sub_lnb_wrap .cate_list .dp2 > li > a{ position:relative; margin:0 -1px -1px 0; padding:.25em 1em; height:2.5em; text-align:left; border:1px solid #77787b;
word-break: break-all;
word-wrap: break-word; /* Internet Explorer */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */}
.sub_lnb_wrap .cate_list .dp2 > li > a:after{ content:""; position:absolute; z-index:1; left:-1px; right:-1px; top:-1px; bottom:-1px; opacity:0;}
.sub_lnb_wrap .cate_list .dp2 > li > a .va{ font-size:1.063em; font-weight:500; position:relative; z-index:2;}
.sub_lnb_wrap .cate_list .dp2 > li:hover > a{ color:#fff}
.sub_lnb_wrap .cate_list .dp2 > li:hover > a:after{ background:#343b4d; opacity:1}
.sub_lnb_wrap .cate_list .dp2 > li .dp3{ position:absolute; z-index:-1; left:0; right:-1px; top:100%; 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:.625em; color:#aaa}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a .va{ font-size:.875em;}
.sub_lnb_wrap .cate_list .dp2 > li .dp3 > li > a:hover{ background:#3db4b3;}
.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:1.75em !important; position:relative}
.sub_lnb_wrap .cate_list .dp2 li.plus > a .arrow{ position:absolute; right:.25em; 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 .dp3{ z-index:99; opacity:1; visibility:visible}

.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 .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{ opacity:.6;}
.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:#343b4d}
.list_prod_wrap .list_prod_tit .t3.c2{ color:var(--siteC)}
.list_prod_wrap .list_prod_tit .t4{ 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:2em}
.list_prod_wrap .list_prod .prod:not(.swiper-wrapper) .el{ width:calc(16.66% - 1.6666em)}
.list_prod_wrap .list_prod .prod .swiper-slide{ height:auto}
.list_prod_wrap .list_prod .prod .in{ position:relative; display:block; box-sizing:border-box}
.list_prod_wrap .list_prod .prod .in .img_wrap{ display:block; position:relative; overflow:hidden; overflow:hidden; background:#fff; border:1px solid #eee}
.list_prod_wrap .list_prod .prod .in .img_wrap .resize{ padding-bottom:140%}
.list_prod_wrap .list_prod .prod .in .img_wrap img{ transition:.3s}
.list_prod_wrap .list_prod .prod .in .con_wrap{ display:flex; flex-direction:column; gap:.75em 0; padding:1em .25em; padding-bottom:0; position:relative; line-height:1.2}
.list_prod_wrap .list_prod .prod .in .con_wrap .t1{ display:block; font-size:.875em; color:#777}
.list_prod_wrap .list_prod .prod .in .con_wrap .t2{ display:block; font-size:1.063em; font-weight:500}
.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 .in .con_wrap .priceBox{ position:relative; font-family:inherit; display:flex; flex-wrap:wrap; align-items:flex-end; gap:.125em .75em}
.list_prod_wrap .list_prod .prod .in .con_wrap .price{ order:-1; width:100%}
.list_prod_wrap .list_prod .prod .in .con_wrap .price > i{ vertical-align:baseline}
.list_prod_wrap .list_prod .prod .in .con_wrap .price .no { font-size:1.125em; font-weight:800;}
.list_prod_wrap .list_prod .prod .in .con_wrap .price .won{ padding-left:.125em;}
.list_prod_wrap .list_prod .prod .in .con_wrap .discount{ font-size:.938em; color:#77787b; text-decoration:line-through;}
.list_prod_wrap .list_prod .prod .in .con_wrap .per{ color:var(--siteC); font-weight:700}
.list_prod_wrap .list_prod .prod .in .prod_icon{ display:flex}
.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)}
.list_prod_wrap .list_prod .prod .in:hover .con_wrap .t2{ color:var(--siteC)}

.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:2em; font-weight:700 }
.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}

.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; }
.prod_icon .icon.c1{ background:#3333CC}
.prod_icon .icon.c2{ background: #CC3333}
.prod_icon .icon.c3{ background:#009966}
.prod_icon .icon.c4{ border-color:#333; background:#333; color:#fff; border-radius:5em; border:2px solid #333;}
.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;}

.shopping_search{ padding:1em; border:1px solid #ccc;}
.shopping_search .search > *{ display:inline-block; vertical-align:middle;}
.shopping_search .search > dt{ font-size:.938em; color:#222; font-weight:500; padding-right:1.5em;}
.shopping_search .search > dd{ font-size:.875em;}
.shopping_search .search button{ background:#343b4d; color:#fff; border:none;}

.list_prod_wrap .wrap_top{ border-bottom:1px solid #111; margin:1.5em 0 3em 0}
.list_prod_wrap .wrap_top .wrap_tit{ float:left; margin-top:.5em; margin-bottom:0; font-size:1.1em;}
.list_prod_wrap .wrap_top .wrap_tab{ float:right; font-size:.938em; border-bottom:none}
.list_prod_wrap .wrap_top .wrap_tab > li{ width:9em}

.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:#3db4b3; border:2px solid #3db4b3; 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 #00a75d; font-size:.813em; color:#00a75d;}
.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%;}

.mall_view_top{ margin-top:1em;}
.mall_view_top .mall_view_img{ float:left; width:40%; position:relative; z-index:10}
.mall_view_top .mall_view_img .big{ border:1px solid #c7cbd0; margin-bottom:.5em; position:relative}
.mall_view_top .mall_view_img .big img{ 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; margin:0 0 0 -5px}
.mall_view_top .mall_view_img .thumb > li{ width:16.66%}
.mall_view_top .mall_view_img .thumb > li > a{ margin:5px 0 0 5px; border:1px solid #c7cbd0}
.mall_view_top .mall_view_img .thumb > li:hover > a{box-shadow:0 3px 5px rgba(0,0,0,.3);}

.mall_view_top .mall_view_info{ float:right; width:57%; position:relative;}
.mall_view_top .mall_view_info .prod_tit{ border-top:2px solid #333; border-bottom:1px solid #DDD; padding:1em .5em}
.mall_view_top .mall_view_info .prod_tit .t1{ font-size:1.5em; color:#111; font-weight:600; letter-spacing:-1px;}
.mall_view_top .mall_view_info .prod_tit .t2{ font-size:1.063em; color:#999; padding-top:.625em;}
.mall_view_top .mall_view_total{ text-align:right; padding: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{ margin:0 -5px -5px 0; overflow:hidden}
.mall_view_top .mall_view_btn > li *{ transition:.3s}
.mall_view_top .mall_view_btn > li.st1{ width:45%}
.mall_view_top .mall_view_btn > li.st2{ width:30%}
.mall_view_top .mall_view_btn > li.st3{ width:25%}
.mall_view_top .mall_view_btn > li.st4{ width:30%}
.mall_view_top .mall_view_btn > li .btn{ display:block; line-height:3.5em; margin:0 5px 5px 0; text-align:center; font-size:1.063em; font-weight:500; border:1px solid transparent; position:relative;}
.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:#844890; color:#fff}
.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:-.125em; margin-top:1em}
.mall_view_top .mall_view_btn2 .btn{ padding:.5em 1em; color:#fff; font-size:.938em; margin:.125em; transition:.3s; border-radius:3em}
.mall_view_top .mall_view_btn2 .btn .tt{ margin:0 .25em}
.mall_view_top .mall_view_btn2 .btn:hover{ border-radius:3em}
.mall_view_top .mall_view_btn2 .b1 .btn{ background:#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 > li{ border-top:1px solid #ddd; padding:0 1em}
.mall_view_option > li:first-child{ border-top:none}
.mall_view_option > li .va_wrap{ height:4em; text-align:left}
.mall_view_option > li .tit{ float:left; width:55%}
.mall_view_option > li .vol{ float:left; width:20%}
.mall_view_option > li .price{ float:left; width:15%; text-align:right; }
.mall_view_option > li .del{ float:left; width:7%; margin-left:3%; 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_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{ 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:900px; max-width:100%; margin:1em auto 3em auto;}
.step_st > li{ width:33.33%}
.step_st > li .in{ position:relative; padding-left:5em; color:#aaa}
.step_st > li .in .line{ position:absolute; width:100%; height:4px; left:0; top:50%; margin-top:-2px; background:#ddd}
.step_st > li .in .icon{ position:absolute; left:0; top:50%; margin-top:-1em; width:2em; line-height:2em; background:#f5f5f5; border:1px solid #ddd; border-radius:100%; color:#bbb; font-size:1.875em; text-align:center}
.step_st > li .in .t1{ letter-spacing:1px; font-size:.688em; padding-top:.25em}
.step_st > li .in .t2{ padding-top:1em}
.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 .t1{ color:#aaaaaa; font-size:.750em; letter-spacing:2px;}
.step_tit .t2{ color:#343b4d; 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{ position:relative; line-height:3em}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .tit{ font-size:.813em; color:#999; position:absolute; left:0; top:0}
.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{ font-size:.75em; color:#999; margin-top:1em; padding:1em .5em; border:1px solid #ddd}
.order_wrap .order_fix_wrap .order_fix .in .orderfix_agree .label_st span{ max-width:85%; padding-left:.25em}

.tbox{ text-align:center}
.tbox .t0{ font-size:1.75em; color:#111; font-weight:500; letter-spacing:-1px; margin:.5em 0;}
.tbox .t1{ font-size:1.5em; color:#111; font-weight:500;}
.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:#3db4b3; padding:0 2em; color:#fff; border-radius:3em; line-height:2.5em}
.tbox .order_no .tt{ font-size:.875em}
.tbox .order_no .no{ font-family:'Rb','NotoSans',sans-serif; 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; border-radius:.5em .5em 0 0; padding:1em; position:relative; z-index:1; font-weight:500;}
.agree_wrap .in .con{ border:1px solid #ddd; border-top:1px solid #333; margin-top:-1px; padding:1em}
.agree_wrap .in .conH{ height:11em}
.agree_wrap .in .con .con_in{ font-size:.875em; 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{ font-size:.938em}

.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; border-radius:.5em .5em 0 0; padding:1em; position:relative; z-index:1; font-weight:500;}
.agree_wrap2 .in .con{ border:1px solid #ddd; border-top:1px solid #333; margin-top:-1px; padding:1em}
.agree_wrap2 .in .conH{ height:11em}
.agree_wrap2 .in .con .con_in{ font-size:.875em; color:#666; line-height:1.5}
.agree_wrap2 .in .check{ border:1px solid #ddd; margin-top:-1px; text-align:right; padding:.5em 1em}
.agree_wrap2 .in .check label{ font-size:.938em}

.agree_box{ border:1px solid #ddd; background:#fff; border-radius:5px}
.agree_box .con{  padding:1.75em; font-size:.875em; 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; font-size:.938em}
.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_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}
.my_search_wrap .tit .xi{ font-size:1.5em; vertical-align: top; margin-top:-.2em}
.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;}

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

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

.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_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:.813em; color:#777; padding-left:1.25em; 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{ 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{ text-align:center; padding-left:1px}
.tab_st1 > li{ width:25%}
.tab_st1 > li > a{ display:block; border:1px solid #ddd; border-bottom:none; padding:1em 0; background:#f5f5f5; margin-left:-1px; position:relative; color:#777}
.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:3px; 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 .ko{ display:block; font-size:1em; color:#666; font-weight:500;}
.tab_st1 > li > a .en{ display:block; font-size:.75em; color:#aaa; padding-top:5px; text-transform:uppercase;}
.tab_st1 > li.on .ko{ color:#111}
.tab_st1 > li.on .en{ 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 .tt{ font-size:.938em; color:#666; margin-top:.5em; line-height:2em; position:relative; padding-left:2rem;}
.memo_st .tt:before{ content:"\e9a6"; font-family:xeicon!important; font-size:1.75em; 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 .btn{ background:#3db4b3; 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:.813rem}

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

.page_tit{ text-align:center; font-size:2em; color:#343b4d; font-weight:700; margin-bottom:1em}
.page_tit .t1{ text-transform:uppercase; font-size:2rem}
.page_tit .t2{ display:inline-block; *display:inline; zoom:1; position:relative; font-size:1rem; color:#666; padding:0 1em}
.page_tit .t3{ font-size:1.25rem}
.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 .c1{ color:#943e3e}
.page_tit .c2{ color:#6a781b}
.page_tit .c3{ color:var(--siteC)}
.page_tit .c4{ color:#ffba00}
.page_tit .c5{ color:#777}
.page_tit .f1{ font-size:.875em}

.page_tit2{ font-size:1.125em; color:#22; font-weight:500; padding-bottom:.5em}
.page_tit2 .xi{ margin:-.125em .25em 0 0}
.page_tit2 .xi:before{ content:"\e939"}
.page_tit2 .t1{ font-size:.875em; color:#CC3333}
.page_tit2 .no{ display:inline-block; margin:0 .25em 0 .5em; width:1.875em; height:1.875em; line-height:1.875em; background:#343b4d; border-radius:50%; font-size:1.375em; color:#fff; font-weight:700; text-align:center;}

.link_st:hover{ text-decoration:underline}

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

.tt_pointBox{ font-family:'Rb','NotoSans',sans-serif; letter-spacing:0;}
.tt_pointBox .tt{ display:inline-block; margin-left:1em;}
.tt_pointBox .tt:first-child{ margin-left:0;}
.tt_point{ font-family:'Rb','NotoSans',sans-serif; font-size:1.250em; color:#00a75d; font-weight:700; letter-spacing:0;}
.tt_point.c1{ color:var(--siteC);}
.tt_point.c2{ color:#ef4223;}
.tt_price{ font-family:'Rb','NotoSans',sans-serif;}
.tt_price .no { font-size:1.375em; color:#111; font-weight:700; padding-right:.125em; letter-spacing:-1px}
.tt_price .tt {}
.tt_price .tt2{ font-size:1.5em; color:var(--siteC)}

.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}
.tt_state2{ color:#CC3333}
.tt_state3{ color:#6633CC}
.tt_state4{ color:#006699}
.tt_state5{ color:#111}

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

/*greeting*/
.boxWide_all{ width:100%; margin:0 auto; padding: 4em; box-sizing:border-box; }

h1{ font-size: 2.4em;}
h4{ font-size: 1.15em; line-height: 1.6; font-weight: 500; color: #666; letter-spacing: 1px;}
h2{ font-size: 1.6em;}
h5{ font-size: 1em; font-weight: 600; color: #333;}

.page_txt .point_d{ color: #ccc; font-weight: 600; text-align:center; margin-bottom: .5em;}
.page_txt .point_d > img{ width: 2%; padding-bottom: .3em; opacity: .8;}
.page_txt .point_d > .comma1{ margin-right: .5em; }
.page_txt .point_d > .comma2{ margin-left: .5em; transform: rotate(180deg);}
.page_txt > .ac > .line{ position :relative;}
.page_txt > .ac > .line:after{ position: absolute; width: 50px; height: 1px; background: #3f9347; left: 50%; top: 80px; transform: rotate(90deg); content: '';}
.greeting_wrap{ position: relative; gap: 1em; margin-bottom: 5em; margin-top: 3em; height: 280px; border-radius: 30px; box-shadow: 3px 0 9px rgba(0,0,0,.1);}
.bg_greeting{ background: url(../../images/sub/greeting/greeting01.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; background-position-y: -150px;}
.greeting_wrap .greeting_left{ position:absolute; top: -40px; left: -50px; border-radius: 30px; background: #fff; box-shadow: 4px 0 12px rgba(0,0,0,.2); padding: 4em; width: 60%;}
.greeting_wrap .greeting_left .sub_title{ position:relative;}
.greeting_wrap .greeting_left .sub_title:after{ content: 'Education is the first step in life'; width: 100%; height: auto; font-weight: 700; font-size: 50px; color: #f5f5f5; letter-spacing: -1; position: absolute; left: 50%; bottom: -40px; z-index: -1; transform: translateX(-50%); text-transform: uppercase;}
.greeting_wrap .greeting_right{ width: 40%;}
.page_all_txt .page_txt{ margin-top: 2em;}
.bg_white{ background: #f9f9f9;}
.greeting_img > img{ border-radius: 30px; box-shadow: 3px 0 9px rgba(0,0,0,.1); margin-top: 4em;}
.sec_con dl{ width:calc(( 100% - 170px ) / 4); background: #eee; border-radius: 50%; padding: 3em 0;}
.sec_con dt{ margin-bottom:20px; font-size:20px; color:#777; align-content: center; align-items: center; justify-content: center; text-align: center;}
.sec_con dd{ font-weight:600; font-size:20px; color: #3f9347; align-content: center; align-items: center;justify-content: center; text-align: center;}
.sec_con .develop_wrap > .b_shadow { text-align:center; border: 1px solid #88d990; box-shadow: 2px 0 6px rgba(0,0,0, .1);}
.sec_con .develop_wrap > .b_shadow > img{ width: 40%;}

/*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;}

/* Agree Wrap*/
.agree_tit {margin-bottom: 1em;}
.agree_tit > h3 {font-size: 1.5em; font-weight: 600; line-height: 1.6em; color: #333; position: relative;}
.agree_tit > h3:before {content: ''; position: absolute; width: 8px; height: 8px; left: -8px; top: -3px; background: #3f9347; border-radius: 50%;}
.agree_tit > p {font-size: 1.125em; color: #555;}

.join_tit {text-align: center; font-size: 1.5em; font-weight: bold; color: #333; margin-bottom: 1em; margin-top: 1em;}

.sub_agree_wrap{padding: 1em; border: 1px solid #eee; font-size: .813em; color:#888; box-shadow: 0 0 10px rgb(0,0,0,0.051); border-top: 2px solid #3f9347;}
.sub_agree_wrap p{padding:10px; line-height:1.5;}
.sub_agree_wrap strong{color:#555;}
.sub_agree_wrap .cont{overflow-y: scroll; height: 50em;}
.sub_agree_wrap .cont.join {height: 20em;}
.cont_check{text-align: right; margin: 0 0 40px 0; font-size:0.965em; color:#555; box-shadow:0 0 10px rgba(0,0,0,0.1); padding:.6em 1em; background:#fff;}
.sub_agree_wrap .span{text-align: center; padding-left: 40px;}

/* agree */
.agree_wrap.page_scroll {overflow-y:scroll; height:10em;}
.agree_wrap .agree{ padding:2em; color:#555; line-height:1.5; background:#fff}
.agree_wrap .agree h1 {font-size: 1.125em; font-weight: bold; color: #222;}
.agree_wrap .agree .agree_txt {margin-bottom:1em; padding-bottom:1em; border-bottom:1px dashed #ddd;}
.agree_wrap .agree .agree_txt *{ vertical-align:baseline;}
.agree_wrap .agree .agree_txt h4 {color:#222; font-family:'NotoS'; font-size:1.063em}
.agree_wrap .agree p{ padding:.5em 0; font-size:1.125em;}

/****************/
/*MAIN*/
.main_arrow_wrap li{ display:inline-block; width:3.5em; line-height:3.5em; background:rgba(255,255,255,.8); border:1px solid #ccc; border-radius:50%; text-align:center; color:#222; cursor:pointer; transition:.2s;}
.main_arrow_wrap li .xi{ font-size:1.250em;}
.main_arrow_wrap li.prev .xi:before{ content:"\e93b";}
.main_arrow_wrap li.next .xi:before{ content:"\e93e";}
.main_arrow_wrap li:hover{ background:rgba(255,255,255,1);}

.main_dot_wrap .slick-dots > ul > li{ display:inline-block; padding:0 .375em;}
.main_dot_wrap .slick-dots > ul > li button{ display:block; width:.75em; height:.75em; background:#ccc; border:none; border-radius:100%; overflow:hidden; text-indent:-9999px;}
.main_dot_wrap .slick-dots > ul > li.slick-active button{ background:#3db4b3;}

.mainVisual_wrap{ background:#f5f5f5;}
.mainVisual_wrap,
.mainVisual .slick-track,
.mainVisual .item{ position:relative; height:31.25em; overflow:hidden;}
.mainVisual .item .img{ position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.mainVisual .item .link{ position:relative; display:block; height:100%;}
.mainVisual_wrap .slick-dots{ position:absolute; bottom:2em; left:0; width:100%; text-align:center;}
.mainVisual_wrap .slick-dots > ul > li{ display:inline-block; margin:0 .375em;}
.mainVisual_wrap .slick-dots > ul > li button{ width:.813em; height:.813em; background:#fff; border:none; border-radius:50%; text-indent:-9999px; transition:.2s;}
.mainVisual_wrap .slick-dots > ul > li.slick-active button{ width:2.5em; border-radius:3em;}
.mainVisual_wrap .main_arrow_wrap{ position:absolute; top:50%; left:0; right:0; display:none;}
.mainVisual_wrap .main_arrow_wrap li{ position:absolute; top:0; transform:translateY(-50%);}
.mainVisual_wrap .main_arrow_wrap li.prev{ left:-7em;}
.mainVisual_wrap .main_arrow_wrap li.next{ right:-7em;}

.main_con{ }

.main_tit{ margin-bottom:2.875em; text-align:center; color:#222; letter-spacing:-1px;}
.main_tit:before{ content:""; display:block; margin:0 auto; width:3em; height:3px; background:#333; margin-bottom:1.5em}
.main_tit .tt{ font-size:2.125em;}
.main_tit .t1{ font-weight:700;}
.main_tit .t2{}

.main_btn{ display:inline-block; padding:.75em 2em; background:#fff; border-radius:10em; color:#222; transition:.2s;}
.main_btn .tt{ font-weight:500;}
.main_btn .arrow{ font-size:1.250em; padding-left:.5em;}
.main_btn .arrow:before{ content:"\e907";}
.main_btn:hover{ background:#111; color:#fff;}

.main_banner{ padding:2.5em 0 0 0;}
.main_banner .inner{ margin-left:-2em;}
.main_banner .inner .el{ float:left; width:20%;}
.main_banner .inner .link{ display:block; position:relative; margin-left:2em; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; border-radius:.625em; overflow:hidden; color:#333;}
.main_banner .inner .link .con_wrap{ padding:2.25em 1.5em;}
.main_banner .inner .link .con_wrap > dt{ font-size:1.5em; font-weight:700; letter-spacing:-2px}
.main_banner .inner .link .con_wrap > dt:after{ display:inline-block; content:"\e907"; font-family:xeicon!important; width:2em; line-height:2em; font-size:1em; text-align:center; color:#1c44a9; background:#fff; font-size:.75em; border-radius:50%; opacity:0; transition:.3s}
.main_banner .inner .link .con_wrap > dd{ font-size:.938em; margin-top:1.5em; max-width:70%;}
.main_banner .inner .link:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#1c44a9; opacity:0; transition:.2s;}
.main_banner .inner .link:hover{ color:#fff}
.main_banner .inner .link:hover:before{ opacity:.8;}
.main_banner .inner .link:hover .con_wrap > dt:after{ opacity:1; margin-left:1em}

.main_new{ padding:0 0; background:#f2f5f6;}
.main_new .in_wrap{ align-items:stretch;}
.main_new .in_wrap .inner{ flex:1 0 50%; max-width:50%; position:relative; padding:5em 0; min-height:33.75em; box-sizing:border-box;}
.main_new .in_wrap .tit_wrap{ display:flex; justify-content:flex-end; background-color:#4a9c8a; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; color:#fff;}
.main_new .in_wrap .tit_wrap .con{ width:600px; max-width:96%; box-sizing:border-box; padding-right:3em;}
.main_new .tit_wrap .txt.t1{ font-size:2.125em; font-weight:700; letter-spacing:-1px; padding-top:1.25em;}
.main_new .tit_wrap .txt.t2{ font-size:3.125em; font-weight:300; letter-spacing:.125em; color:#32dbff; font-style:italic; position:relative; display:inline-block; padding-right:2.25em;}
.main_new .tit_wrap .txt.t3{ font-size:1.250em; padding-top:2.75em;}
.main_new .tit_wrap .txt .line,
.main_new .tit_wrap .txt .line:after{ position:absolute; background:#32dbff; font-size:1rem;}
.main_new .tit_wrap .txt .line{ left:0; bottom:0; width:100%; height:1px;}
.main_new .tit_wrap .txt .line:after{ content:""; top:50%; right:0; width:.875em; height:.875em; transform:translateY(-50%) rotate(45deg);}
.main_new .tit_wrap .main_btn{ margin-top:3.5em;}

.main_new .main_arrow_wrap{ position:absolute; right:1.25em; bottom:1.25em;}
.main_new .main_arrow_wrap > *{ display:inline-block; vertical-align:middle;}
.main_new .main_arrow_wrap li{ background:#fff; border-color:#fff;}
.main_new .main_arrow_wrap li:hover{ background:#111; border-color:#111; color:#fff;}
.main_new .main_arrow_wrap .page{ margin-right:.5em;}
.main_new .main_arrow_wrap .page > *{ display:inline-block; padding:0 .25em; font-size:1.375em; font-weight:300;}
.main_new .main_arrow_wrap .page .t1{ font-weight:700;}
.main_new .main_arrow_wrap .page .t2{ padding-left:0;}
.main_new .main_arrow_wrap .page .ti{ font-style:italic;}
.main_new .in_wrap .list_prod_wrap{ padding-left:2em; padding-right:2em;}

.main_event_slide .event_slide{ margin-left:-1.25em; max-height:15em; overflow:hidden;}
.main_event_slide .event_slide .el{ float:left; width:50%;}
.main_event_slide .event_slide .in{ display:block; margin-left:1.25em;}
.main_event_slide .event_slide .in .img{ padding-bottom:40.6779%; border-radius:.625em; background:#f2f5f6; overflow:hidden;}
.main_event_slide .main_arrow_wrap{ position:absolute; left:0; right:0; top:50%;}
.main_event_slide .main_arrow_wrap li{ position:absolute; top:0; transform:translateY(-50%);}
.main_event_slide .main_arrow_wrap li.prev{ left:-2.25em;}
.main_event_slide .main_arrow_wrap li.next{ right:-2.25em;}
.main_event_slide .main_dot_wrap{ position:absolute; left:0; right:0; margin-top:1.875em; text-align:center;}

.main_tab{ margin-bottom:2.875em; padding-bottom:1.25em; border-bottom:1px solid #ddd; text-align:center;}
.main_tab .tab{ display:inline-block;}
.main_tab .tab > li .va_wrap{ height:3em;}
.main_tab .tab > li .in{ margin:0 .25em; padding:0 .5em; min-width:9em; background:#fff; border:1px solid #343b4d; border-radius:10em; color:#343b4d; transition:.2s;}
.main_tab .tab > li .in .tt{ font-weight:500;}
.main_tab .tab > li:hover .in,
.main_tab .tab > li.on .in{ background:#343b4d; color:#fff;}

.main_review{ background:url(../images/main/review_bg.jpg) no-repeat 50% 50%; background-size:cover;}
.main_review .main_tit{ color:#fff;}
.main_review .review_wrap{ align-items:stretch; background:#fff; border-radius:.625em; overflow:hidden;}
.main_review .review_wrap .inner{ box-sizing:border-box; padding:1.875em; border-left:1px solid #ddd;}
.main_review .review_wrap .inner:first-child{ border-left:none;}
.main_review .review_wrap .inner.w1{ flex:1 0 30%; max-width:30%;}
.main_review .review_wrap .inner.w2{ flex:1 0 40%; max-width:40%;}
.main_review .review_wrap .list .el{ margin-top:.625em;}
.main_review .review_wrap .list .el:first-child{ margin-top:0;}
.main_review .review_wrap .list .in{ display:block;}
.main_review .review_wrap .list .in .img_wrap{ position:relative; border-radius:.5em; overflow:hidden; text-align:center;}
.main_review .review_wrap .list .in .img_wrap:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.06; transition:.2s;}
.main_review .review_wrap .list .in .con_wrap{}
.main_review .review_wrap .list .in .con_wrap .tt_star{ margin-bottom:.25em;}
.main_review .review_wrap .list .in .con_wrap .tt_star .star{ padding:0 0; font-size:1.125em;}
.main_review .review_wrap .list .in .con_wrap .tit{ font-size:1.313em; color:#222; font-weight:500; letter-spacing:-1px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main_review .review_wrap .list .in .con_wrap .txt{ font-size:.938em; color:#77787b; margin-top:.875em; overflow:hidden; position:relative; box-sizing:border-box;}
.main_review .review_wrap .list .in .con_wrap .txt:before{ content:"“"; display:block; position:absolute; top:-.125em; left:0; font-size:3.125em; color:#c4c5ca; line-height:1;}

.main_review .review_wrap .list.st1 .in .img_wrap .resize{ padding-bottom:75%;}
.main_review .review_wrap .list.st1 .in .img_wrap .resize img{ position:relative; top:50%; left:50%; transform:translate(-50%,-50%);}
.main_review .review_wrap .list.st1 .in .con_wrap{ padding-top:1.125em;}
.main_review .review_wrap .list.st1 .in .con_wrap .txt{ padding-top:1.25em; height:calc(5.188em - 1px);}

.main_review .review_wrap .list.st2 .in .img_wrap{ float:left; width:30%;}
.main_review .review_wrap .list.st2 .in .con_wrap{ float:right; width:63%; padding-top:.75em; font-size:.875em;}
.main_review .review_wrap .list.st2 .in .con_wrap .txt{ padding-left:1.5em; height:2.813em;}

.main_review .review_wrap .list .in:hover .img_wrap:after{ opacity:0;}
.main_review .review_wrap .list .in:hover .con_wrap .tit{ text-decoration:underline;}

.main_customer{ padding:5em 0 7em 0;}
.main_customer .customer_wrap{ margin-left:-7.5em;}
.main_customer .customer_wrap .inner{ float:left; width:50%;}
.main_customer .customer_wrap .inner .in_wrap{ margin-left:7.5em;}
.main_customer .notice .tit{ position:relative; padding:0 2em .75em 0; border-bottom:2px solid #333;}
.main_customer .notice .tit .tt{ font-size:1.125em; color:#222; font-weight:500; text-transform:uppercase;}
.main_customer .notice .tit .more{ position:absolute; top:0; right:0; color:#111;}
.main_customer .notice .tit .more .xi{ font-size:1.375em;}
.main_customer .notice .list{ padding:.875em 0;}
.main_customer .notice .list > li .in{ position:relative; display:block; padding-right:5em; line-height:1.875em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main_customer .notice .list > li .in:before{ content:""; display:inline-block; vertical-align:middle; margin-right:.625em; width:4px; height:4px; background:#333; border-radius:50%;}
.main_customer .notice .list > li .in .tt{ font-size:.938em; color:#222;}
.main_customer .notice .list > li .in .date{ position:absolute; top:0; right:0; font-size:.813em; color:#999;}
.main_customer .notice .list > li .in:hover .tt{ text-decoration:underline;}
.main_customer .cs{ padding-top:1.375em;}
.main_customer .cs .cs_wrap .tit .xi{ font-size:1.625em;}
.main_customer .cs .cs_wrap .txt .xi{ font-size:1.250em; margin:0 .25em 0 .875em;}
.main_customer .cs .cs_wrap .tit .tt{ padding-left:2.125em;}
.main_customer .cs .cs_wrap .txt{ margin-top:.25em;}
.main_customer .cs .cs_wrap .txt .tt:before{ content:""; display:inline-block; vertical-align:middle; margin:0 .875em; width:1px; height:.75em; background:#77787b;}
.main_customer .cs .cs_wrap .tt{ display:inline-block;}
.main_customer .cs .cs_wrap .tt:first-child{ padding-left:0;}
.main_customer .cs .cs_wrap .tt:first-child:before{ display:none;}
.main_customer .cs .cs_wrap .t1{ font-size:1.375em;}
.main_customer .cs .cs_wrap .t2{ font-size:2.000em; font-weight:500;}
.main_customer .cs .cs_wrap .t3{ font-size:.875em;}
.main_customer .cs .cs_wrap .t4{ font-size:1.063em; font-weight:500;}
.main_customer .cs .cs_wrap .c1{ color:#222;}
.main_customer .cs .cs_wrap .c2{ color:#000;}
.main_customer .cs .cs_wrap .c3{ color:#77787b;}
.main_customer .cs .etc_wrap{ margin-top:2.25em;}
.main_customer .cs .etc_wrap .btn{ float:left;}
.main_customer .cs .etc_wrap .btn > li{ margin-right:.313em;}
.main_customer .cs .etc_wrap .btn > li .in{ padding:.375em 1.5em; border:1px solid #333; color:#222; transition:.2s;}
.main_customer .cs .etc_wrap .btn > li .in .tt{ font-size:.875em;}
.main_customer .cs .etc_wrap .btn > li .in .xi{ font-size:1em; margin-left:.5em;}
.main_customer .cs .etc_wrap .btn > li .in:hover{ background:#333; color:#fff;}
.main_customer .cs .etc_wrap .sns{ float:right;}

.flex{ display:flex}
.flex.wrap{ flex-wrap:wrap}
.flex.space{ justify-content:space-between}
.flex.vt{ align-items:flex-start}

.main_etc_wrap{ border-top:1px solid #ddd; padding-top:3em}
.main_etc_wrap .wrap1{ width:40%}
.main_etc_wrap .wrap2{ width:54%}
.main_etc_wrap .wrap_tit{ font-weight:700; color:#333; font-size:1.5em; padding-bottom:.5em; border-bottom:1px solid #ddd; margin-bottom:1em}
.main_etc_wrap .wrap_tit .more{ }
.main_etc_wrap .wrap_tit .more .xi{color:#999; transition:.3s}
.main_etc_wrap .wrap_tit .more .xi:before{content:"\e917"}
.main_etc_wrap .wrap_tit .more:hover .xi{ color:var(--siteC)}
.main_etc_wrap .main_gallery{ margin:-1.5em 0 0 -1.5em}
.main_etc_wrap .main_gallery > li{ width:33.3333%}
.main_etc_wrap .main_gallery > li .in{ cursor:pointer; cursor:pointer; margin:1.5em 0 0 1.5em}
.main_etc_wrap .main_gallery > li .in .img_wrap{ box-shadow:0 0 5px rgba(0,0,0,.3); border:1px solid transparent; transition:.3s}
.main_etc_wrap .main_gallery > li .in .con_wrap{ padding:1em 0}
.main_etc_wrap .main_gallery > li .in .con_wrap .tit{ font-weight:500; color:#111; line-height:1.25em; height:2.5em; overflow:hidden; word-break:break-all}
.main_etc_wrap .main_gallery > li .in .con_wrap .txt{ font-size:.875em; color:#777; line-height:1.25em; height:2.5em; overflow:hidden; word-break:break-all; margin:.5em 0}
.main_etc_wrap .main_gallery > li .in .con_wrap .date{ font-size:.813em; color:#999; margin:.5em 0 0 0}
.main_etc_wrap .main_gallery > li:hover .in .img_wrap{ border-color:#333}

.main_etc_link{ margin-left:-1em; font-size:.875em;}
.main_etc_link > li{ width:50%}
.main_etc_link > li > a{ display:block; padding:.875em 1em; border:1px solid #ddd; margin-bottom:-1px; color:#555; position:relative; overflow:hidden; margin:1em 0 0 1em}
.main_etc_link > li > a .icon{ color:#10569c; margin-right:.25em}
.main_etc_link > li > a .arrow{ position:absolute; right:.5em; top:50%; line-height:1em; margin-top:-.5em; transform:translateX(2em); opacity:0; transition:.3s}
.main_etc_link > li:hover > a{ z-index:1; border-color:#10569c; color:#10569c}
.main_etc_link > li:hover > a .arrow{ transform:translateX(0); opacity:1}

.formSt{ display:flex; flex-wrap:wrap; gap:0 4em; width:100%}
.formSt > li{ width:calc(50% - 2em); margin-top:1.5em}
.formSt > li.mr{ margin-right:calc(50% - 2em)}
.formSt > li.w100{ width:100%}
.formSt > li .cell{ display:flex; flex-wrap:wrap; gap:.375em; align-items:center; color:#111}
.formSt > li .cell .tit{ order:-1; width:100%; font-size:1.063em; color:#333; font-weight:700}
.inpSt{ border:1px solid #ddd; font-weight:700; box-sizing:border-box; border-radius:.25em; padding:.5em; display:flex; align-items:center; position:relative; line-height:1; color:#666}
.inpSt.grow{ flex:1}
.inpSt.w1{ width:6em}
.inpSt.w100{ width:100%}
.inpSt:focus{ border-color:#3f9347; color:#3f9347; box-shadow:.125em .125em .125em .063em rgba(0,0,0,.1) inset}
.inpSt:focus ~ .tit{ color:#3f9347 !important}
.inpSt.c1{ background:#026725; border-color:transaprent; color:#fff}
.inpSt.c1.re{ border-color:#026725; background:#fff; color:#026725}
.inpSt.c2{ background:#555; border-color:transaprent; color:#fff}
.inpSt.c2.re{ border-color:#555; background:#fff; color:#555}
select.inpSt{ padding:0 3em 0 1em}
button.inpSt{ padding:1em; justify-content:center; gap:0 .25em;}
button.inpSt .xi{ font-size:1.125em; font-weight:normal}
.inpSt.s1{ height:2.25em; padding:0 .75em; font-size:.938em}

.labSt{ border:none; cursor:pointer; flex:1}
.labSt.w100{ flex:0 0 auto; width:100%}
.labSt .inpSt{ width:100%; padding:1.25em; justify-content:center; color:#777; line-height: 1.5em; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.labSt .inpSt:before{ content:"\e928"; font-family:xeicon; margin-right:.125em; display: none;}
.labSt input{ position:absolute; opacity:0; width:0; height:0; overflow:hidden; z-index:-1}
.labSt input:checked ~ .inpSt{ border-color:#3f9347; color:#3f9347}
.labSt input:checked ~ .inpSt:before{display: inline-block;}
.labSt.fix1{ flex:0 0 auto; width:100%}
.formSt > li .cell .br{ width:100%}

/* 메인 레이어 팝업 */
.mainLayerPop{}
.mainLayerPop .popLayer{ display:block; position:absolute; overflow:auto; background:#fff; border:1px solid #000; box-sizing:border-box;}
.mainLayerPop .popLayer_closeW{ height:35px; padding:0 1em; text-align:right; background:#343b4d;}
.mainLayerPop .popLayer_closeW *{ color:#fff;}
.mainLayerPop .popLayer_close .tt{ font-size:.875em;}
.mainLayerPop .popLayer_close a{ display:inline-block; margin-left:.5em; font-weight:500;}
@media screen and (max-width:1024px){
	.mainLayerPop{ position:fixed; top:0; bottom:0; left:0; right:0; z-index:2000; display:flex; align-content:center; align-items:center; justify-content:center; text-align:center; background:rgba(0,0,0,.4);}
	.mainLayerPop .in_w{ box-sizing:border-box; max-width:95vw; max-height:calc(95vh - 6em); width:25em; margin-top:1em; margin-bottom:5em; background:#fff; border:1px solid #000; overflow-y:auto;}
	.mainLayerPop .moSlide .el .popLayer{ position:static; height:auto !important; width:25em !important; max-width:100% !important; max-height:100%; border:none;}
	.mainLayerPop .moSlide .el .popLayer img{ width:100%;}
	.mainLayerPop .dot_wrap{ position:fixed; left:0; right:0; bottom:1em; text-align:center;}
	.mainLayerPop .slick-dots > ul > li{ display:inline-block; margin:0 .125em;}
	.mainLayerPop .slick-dots > ul > li button{ width:1em; height:1em; border:none; background:#fff; border-radius:100%; text-indent:-999999px; overflow:hidden; transition:.2s;}
	.mainLayerPop .slick-dots > ul > li.slick-active button{ width:3em; border-radius:5em;}
	.mainLayerPop.hide{ display:none;}
	.mainLayerPop .moHide{ display:none;}
	.mainLayerPop .pcHide{ display:block;}
	.mainLayerPop div.popLayer_closeW{ display:flex; align-content:center; align-items:center;}
	.mainLayerPop div.popLayer_closeW .popLayer_close{ flex:1;}
	.mainLayerPop div.popLayer_closeW .tt{font-size:1.3em; line-height:2.1em;}
}