@charset "utf-8";

.header{position:relative;top:0;left:0;width:100%;-webkit-transition:all .4s;transition:all .4s;z-index:700}
.header.white-nav{position:fixed;height:100px;border-bottom:0px solid #e5e5e5;}
.header .fixed-wrap{position:fixed;top:0;left:0;width:100%;height:100px;background-color:transparent;border-bottom:1px solid transparent;transition:all .4s;}
body[class*=fp] .header .fixed-wrap{position:absolute}
.header.fixed .header-top-wrap:after{content:none}
.header.fixed .header-inner{height:90px}
.header.fixed .header-top{height:0;opacity:0}
.header .header-inner{position:relative;display:flex;justify-content:center;margin:0 auto;max-width:1700px;height:100px;}
.header .logo{position:absolute;top:50%;left:15px;transform:translateY(-50%);width:160px;height:50px;z-index:70;}
.header .logo .logo-img{display:block;width:100%;height:100%;background:url(/img/common/logo_w.png) no-repeat center/100% auto;width:160px;height:50px;}

.header.fixed .logo{position:absolute;top:55%;left:0px;transform:translateY(-50%);width:160px;height:50px;z-index:70;}
.header.fixed .logo .logo-img{display:block;width:100%;height:100%;background:url(/img/common/logo_b.png) no-repeat center/100% auto;width:160px;height:50px;}

.header .t_smenu a.t_mall, .header.fixed .t_smenu a.t_mall, .header.white-nav .t_smenu a.t_mall { display:block; background:url(/img/common/t_mall.png) no-repeat 20px 50%; padding:10px 25px 0px 45px;font-weight:700; color:#fff;font-family: 'Rubik', sans-serif; font-size:14px;}

.header .header-right-wrap .menu-btn .line, .header .header-right-wrap .menu-btn .line:before, .header .header-right-wrap .menu-btn .line:after{background-color:#fff;width:30px;height:3px;}




.pc-nav-open .header .logo .logo-img{background-image:url(/img/common/logo_w.png);transition-delay:0.25s;}
h1 a {text-indent:-9999px;}
.header .navBg{display:none}
.pc-nav{display:none}
.pc-nav .menu-list-wrap{display:flex}
.pc-nav .menu-list{position:relative;display:flex;padding:0 20px;}
.pc-nav .menu-list>a{position:relative;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;letter-spacing:-0.04em; font-family: 'Poppins', 'Spoqa Han Sans Neo', sans-serif;color:#fff;transition:color .4s;-webkit-transition:color .4s;cursor:pointer}
.pc-nav .menu-list.on>a{color:#f81e2e !important;}
.pc-nav .menu-list>a:hover {color:#7d584a !important; font-family: 'Poppins', 'Spoqa Han Sans Neo', sans-serif;}
.pc-nav .menu-list:hover .sub-menu-list-wrap:before{opacity:1;color:#7fd3f0;}
.pc-nav .sub-menu-list-wrap{display:none;position:absolute;top:90px;left:50%;transform:translateX(-50%);padding:20px 0;width:170px; border-radius:15px; text-align:center;background-color: var(--main-color); z-index:1;transition:top .4s;box-shadow:10px 10px 25px 10px rgba(0,0,0,0.5)}
.pc-nav .sub-menu-list-wrap:before{content:"";display:inline-block;position:absolute;top:-2px;left:0;width:100%;height:0px;background-color:var(--main-color);opacity:0;transition:opacity .4s}
.pc-nav .sub-menu-list{display:flex;flex-direction:column}
.pc-nav .sub-menu-list a, .pc-nav .sub-menu-list a:hover {position:relative;display:flex;height:35px;align-items:center;justify-content:center;font-size:16px;font-family: 'Poppins', 'Spoqa Han Sans Neo', sans-serif;font-weight:400;letter-spacing:-0.04em;color:rgba(255, 255, 255, 0.5);transition:color .4s;-webkit-transition:color .4s}
.pc-nav .sub-menu-list.on>a,.pc-nav .sub-menu-list:hover>a{color:#fff;font-weight:600;}
.pc-nav .sub-menu-list.on>a:after,.pc-nav .sub-menu-list:hover>a:after{transform:scaleX(1);-webkit-transform:scaleX(1)}
.pc-nav .sub-menu-list .text{word-break:break-all}
.header-right-wrap{position:absolute;right:10px;top:0; height:100%;display:flex;align-items:center}
.header-right-wrap .menu-btn .line{margin:7px 0;transition:transform .4s}
.pc-nav-open .header-right-wrap .menu-btn .line{background-color:#222 !important}
.header-right-wrap .menu-btn .line,.header-right-wrap .menu-btn .line:before,.header-right-wrap .menu-btn .line:after{content:"";display:block;width:26px;height:2px;background-color:#fff;transition:transform .4s;}
.header-right-wrap .menu-btn .line{width:19px}
.pc-nav-open .header-right-wrap .menu-btn .line:before,.pc-nav-open .header-right-wrap .menu-btn .line:after{background-color:#fff !important; }
.header-right-wrap .menu-btn .line:before{transform:translateX(-13px) translateY(-9px)}
.pc-nav-open .header-right-wrap .menu-btn .line:before{-webkit-transform:translateY(0) rotateZ(135deg);transform:translateX(-10px) translateY(0) rotateZ(135deg)}
.header-right-wrap .menu-btn .line:after{transform:translateX(-13px) translateY(7px)}
.pc-nav-open .header-right-wrap .menu-btn .line:after{-webkit-transform:translateY(-2px) rotateZ(-135deg);transform:translateX(-10px) translateY(-2px) rotateZ(-135deg)}
.open-nav-wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;opacity:0;background-color:#121212;transform:translateX(100%);z-index:700;transition:opacity .4s}
.pc-nav-open .open-nav-wrap{opacity:1;transform:translateX(0);transition:transform .4s ease-in-out,opacity .4s linear}
.open-nav-wrap .inner-wrap{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:0px 0 40px;max-width:1300px;margin:0 auto;height:100%}
.open-nav-wrap .menu-list-wrap{width:100%;max-width:1000px;height:calc(100% - 40px);padding:0 35px 120px;overflow-y:scroll;overflow-x:hidden}

.t_smenu {}
.t_smenu a.t_login {margin-right:15px; }
.header:hover .header-right-wrap  .t_smenu a.t_mall, .header.fixed .header-right-wrap .t_smenu a.t_mall { display:block; background: url(/img/common/t_tel_b.png) no-repeat 0 50%; padding:2px 25px 0px 32px;font-weight:700; color:#000;font-family:'Poppins', 'Spoqa Han Sans Neo', sans-serif; font-size:20px; letter-spacing:0;}
.header .header-right-wrap  .t_smenu a.t_mall { display:block; background: url(/img/common/t_tel_w.png) no-repeat 0 50%; padding:2px 25px 0px 32px;font-weight:700; color:#fff;font-family:'Poppins', 'Spoqa Han Sans Neo', sans-serif; font-size:20px; letter-spacing:0;}

.t_smenu a.t_logout {margin-right:15px; background:url(/img/common/btn_logout_w.png) no-repeat 50% 50%; width:30px; height:30px; display:inline-block; text-indent:-9999px;}
.header:hover .t_smenu a.t_logout, .header.fixed .t_smenu a.t_logout, .header.white-nav .t_smenu a.t_logout {background:url(/img/common/btn_logout.png) no-repeat 50% 50%;text-indent:-9999px;}

.t_smenu a.t_sear {margin-right:10px; background:url(/img/common/btn_search_w.png) no-repeat 50% 50%; width:30px; height:30px; display:inline-block;text-indent:-9999px;}
.header:hover .t_smenu a.t_sear,  .header.fixed .t_smenu a.t_sear, .header.white-nav .t_smenu a.t_sear {background:url(/img/common/btn_search.png) no-repeat 50% 50%;text-indent:-9999px;}

.header-right-wrap .menu-btn-wrap{position:relative;display:flex; align-items:center;justify-content:center;height:100%;cursor:pointer;z-index:701;}

.open-nav-wrap .menu-list-wrap>*{width:100%;}
.open-nav-wrap .menu-list{opacity:0;transform:translateX(100px)}
.pc-nav-open .open-nav-wrap .menu-list{opacity:1;transform:translateX(0);transition:transform .4s ease-out, opacity .4s linear}
.pc-nav-open .open-nav-wrap .menu-list:nth-child(1){transition-delay:.4s}
.pc-nav-open .open-nav-wrap .menu-list:nth-child(2){transition-delay:.46s}
.pc-nav-open .open-nav-wrap .menu-list:nth-child(3){transition-delay:.52s}
.pc-nav-open .open-nav-wrap .menu-list:nth-child(4){transition-delay:.58s}
.pc-nav-open .open-nav-wrap .menu-list:nth-child(5){transition-delay:.64s}
.pc-nav-open .open-nav-wrap .menu-list:nth-child(6){transition-delay:.7s}
.open-nav-wrap .menu-list.on>div{position:relative}

.open-nav-wrap .menu-list>div{position:relative;display:flex;align-items:center;justify-content:space-between;height:50px;border-bottom:1px solid #222;font-size:40px;font-weight:500;letter-spacing:0.04em;color:#fff}
.open-nav-wrap .menu-list>div>a{display:flex;align-items:center;height:100%;margin-right:auto}
.open-nav-wrap .menu-list>div.has-sub .aco-arrow{display:flex;align-items:center;justify-content:flex-end;width:50px;height:100%;text-align:right}
.open-nav-wrap .menu-list>div.has-sub .aco-arrow img{width:21px;height:13px;transition:transform .3s}
.open-nav-wrap .open-language-wrap>*{font-size:16px;font-weight:500;color:#888;margin-right:20px;letter-spacing:0.02em}
.open-nav-wrap .open-language-wrap .active{position:relative;color:#fff}
.open-nav-wrap .open-language-wrap .active:after{content:"";display:inline-block;position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:#fff;border-bottom:1px solid #e5e5e5;}
.open-nav-wrap .sub-menu-list-wrap{padding:9px 20px 9px 10px;border-bottom:1px solid #222}
.open-nav-wrap .sub-menu-list{position:relative;font-size:18px;color:#aaa}
.open-nav-wrap .sub-menu-list.on{color:#fff}
.open-nav-wrap .sub-menu-list .text{display:inline-block;align-items:center;padding:9px 10px;transition:color .4s}
.open-nav-wrap .menu-list>div.has-sub.open .aco-arrow img{transform:rotate(180deg)}
.open-nav-wrap .open-language-wrap{display:flex;padding:0 35px}

/* �����_gnb */
.gnbbx2 {display:none;}

/*call*/
.call-img{
    position: relative;
    top: 14px;
    right: 5%;
    z-index: 11;
}
.call-img>.navicall{
    display: block;
    background: url(../../img/common/call-white.png);
    width: 250px;
    height: 70px;
}


@media screen and (max-width: 991.98px){
.header.white-nav .fixed-wrap,.header.fixed .fixed-wrap{position:relative;background-color: rgba(255, 255, 255, 0.80);  backdrop-filter: blur(10px); box-shadow:0 0 12px 2px rgba(0,0,0,0.1); height:70px;position:fixed;border-bottom:1px solid #e5e5e5;}
.header.white-nav {height:70px;}
.header.fixed .header-inner{height:56px}

.header .logo, .header .logo .logo-img {width:128px;height:40px;}

.header.white-nav .logo .logo-img,.header.fixed .logo .logo-img{background-image:url(/img/common/logo_b.png);;width:128px;height:40px; top:90%;}
.header.white-nav .menu-btn .line,.header.fixed .menu-btn .line,.header.white-nav .menu-btn .line:before,.header.fixed .menu-btn .line:before,.header.white-nav .menu-btn .line:after,.header.fixed .menu-btn .line:after{background-color:#222}
/*.t_smenu {display:none;}*/
.call-img{position: absolute; right: 7%;}
.call-img>.navicall{background: url(../../img/common/call-s.png); width: 179px; height: 50px;}
.open-nav-wrap .menu-list.on>div{border-bottom:2px solid #f81e2e;color:#f81e2e}
.header .header-inner{max-width:100%;height:70px;}
.header .logo{position:absolute;top:45%;left:0px;transform:translateY(-50%);width:128px;height:40px;z-index:701;}
.open-nav-wrap .menu-list-wrap{width:120%;max-width:800px;height:calc(100% - 40px);padding:120px 35px 120px;overflow-y:scroll;overflow-x:hidden}
.open-nav-wrap .menu-list>div{height:40px; font-size:20px;font-weight:500;letter-spacing:0em;}
.open-nav-wrap .sub-menu-list{position:relative;font-size:13px;color:#aaa}
.open-nav-wrap .menu-list>div a {color:#ddd;}
.open-nav-wrap .sub-menu-list a {color:#999;}
 .header-right-wrap .menu-btn-wrap {display:none;} 

/* ------------------------------------- mobile_menu ------------------------------------- */
.close { position:absolute; top:20px; right:0px; width:44px;}  
.all_menu .all_box a.close { color:#fff;; font-size:20px;}
.all_menu { width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); position:fixed; display:none; z-index:9999; top: 0; }
.all_box { padding:0; width:210px; top:0px; background:#9f917a; z-index:10; right:-210px; bottom:0; top:0;  position:fixed; overflow-y: auto; }
 
#navi{ margin-top:100px; z-index:24; letter-spacing:-0.05em;} 
#navi h2 a{display: block; padding: 10px 10px 10px 14px; font-size:16px; color: #fff; border-bottom:1px solid #afa412;  font-weight:400; }

#navi :target h2 a { }
#navi p { height:0; overflow:hidden; border:1px;
-moz-transition:height 0.5s ease-in;
-o-transition:all 0.3s ease-in;
-webkit-transition:height 0.3s ease-in;
transition:height 0.15s ease-in;  }

#navi :target p { height: 36px; border-bottom: 1px solid #afa412; background:#a79a84;}
#navi p a { display: block; padding-left: 25px; line-height: 36px; font-size: 14px; color: #fff;font-weight:200;   }
#navi p a:hover { color:#d8d0c4; }

.mo_cs {color:#fff; padding:100px 15px 15px 15px;} 
.mo_cs p.mo_cs_st01 {font-size:12px;padding-bottom:10px;font-weight:600;}
.mo_cs p.mo_cs_st02 {font-size:12px;font-weight:400;padding-bottom:0px;}
.mo_cs p.mo_cs_st02 span {font-size:20px;font-weight:600; display:block;}
.mo_cs p.mo_cs_st03 {font-size:12px;font-weight:400;}
.mo_cs p a {color:#fff;}


.tgnb { display:none; }
.gnbbx { width:100%; background:white; height:50px; position:relative; z-index:2; border-bottom:1px solid #D5D5D5; }
.side3 { display:none; } .side4 { display:none; }
.gnbbx2 { width:100%; background:none; height:60px; position:fixed; z-index:50; background:#fff;display:block; border-bottom:1px solid #eee;}

.side2 { display:block; cursor:pointer; }
.logo2 { color:white; position:absolute; border:0px solid black; left:0; padding-left:7px; display:block; }
.logo3 { color: white; position: absolute; border: 0px solid black; left: 0; padding-left: 20px; display:block; width:99px; height:30px;}
h1 {padding:15px 20px 0 20px;}
h1 a {width:99px; height:30px;background-size:100%; text-indent:-9999px;}

.logo2 a { display:block; background:url('../img/logo.png')no-repeat; width:1120px; margin-top:11px; height:42px; text-indent:-9999px; background-size: 138px 29px; }
.side2 { top: 16px; border: 0px solid #dedede;  position: absolute; right: 0;   margin-right: 15px; padding: 3px 4px; font-size: 12px; font-weight: 1200; width:24px; height:19px; background:url("/img/common/mmenu.png") no-repeat; background-position:center center;} 
.side2 { display:block; cursor:pointer; }

.side2_m { top:15px; border: 0px solid #dedede;  position: fixed; z-index:999; right: 0;   margin-right: 15px;  padding: 3px 4px; font-weight: 1200; } 
.side2_m { display:block; cursor:pointer; }
.hde .side2_m span {font-size:35px;}
.hde .side2_m span { color:#fff;}
.header.white-nav .hde .side2_m span {color:#000;}

.header.fixed .hde .side2_m span {color:#000;}

.scroll_side2_m { top: 16px; border: 0px solid #dedede;  position: absolute; right: 0;   margin-right: 15px; padding: 3px 4px; font-size: 12px; font-weight: 1200; width:24px; height:19px; background:url("/img/common/mmenu.png") no-repeat; background-position:center center;} 
.scroll_side2_m { display:block; cursor:pointer; }


}

@media screen and (min-width: 992px){
.header.white-nav .fixed-wrap,.header:hover .fixed-wrap,.header.fixed .fixed-wrap{ top:0; background-color: rgba(255, 255, 255, 0.80);  backdrop-filter: blur(10px); border-bottom:1px solid #e5e5e5; height:100px;position:fixed; }
.fixed.header:not(.is-hide) .fixed-wrap{box-shadow:0 0 12px 2px rgba(0,0,0,0.1); margin-top:0px;}
.header.white-nav .pc-nav .menu-list>a,.header:hover .pc-nav .menu-list>a,.header.fixed .pc-nav .menu-list>a{color:#555;font-weight:700; font-family: 'Poppins', 'Spoqa Han Sans Neo', sans-serif;}
.header.white-nav .pc-nav .menu-list>a p,.header:hover .pc-nav .menu-list>a p,.header.fixed .pc-nav .menu-list>a p{letter-spacing:0.04em}
.header.white-nav .pc-nav .sub-menu-list-wrap,.header:hover .pc-nav .sub-menu-list-wrap,.header.fixed .pc-nav .sub-menu-list-wrap{box-shadow:0 7px 12px 2px rgba(0,0,0,0.1)}
.header.white-nav .logo .logo-img,.header:hover .logo .logo-img,.header.fixed .logo .logo-img{background-image:url(/img/common/logo_b.png)}
.header.white-nav .menu-btn .line,.header:hover .menu-btn .line,.header.fixed .menu-btn .line,.header.white-nav .menu-btn .line:before,.header:hover .menu-btn .line:before,.header.fixed .menu-btn .line:before,.header.white-nav .menu-btn .line:after,.header:hover .menu-btn .line:after,.header.fixed .menu-btn .line:after{background-color:#222}
.header.white-nav .select2-selection__rendered,.header:hover .select2-selection__rendered,.header.fixed .select2-selection__rendered,.header.white-nav .select2-selection__placeholder,.header:hover .select2-selection__placeholder,.header.fixed .select2-selection__placeholder{color:#555;font-weight:500}

.header.white-nav .header-top-wrap,.header:hover .header-top-wrap,.header.fixed .header-top-wrap{position:relative;}
.header.white-nav .header-top-wrap:after,.header:hover .header-top-wrap:after,.header.fixed .header-top-wrap:after{content:'';display:block;position:absolute;top:45px;left:0;width:100%;height:1px;background-color:#ddd}
.header.white-nav .header-top,.header:hover .header-top,.header.fixed .header-top{color:#555}
.header.white-nav .header-top>*:after,.header:hover .header-top>*:after,.header.fixed .header-top>*:after{background-color:#ddd !important}
body.pc-nav-open{overflow:hidden}
.header.white-nav{}
.header.is-hide .fixed-wrap{top:-90px !important}
.header .fixed-wrap{height:90px}
.header.fixed{height:90px}
.header.fixed.is-hide{top:-90px}
.header.fixed .navBg,.header.fixed .sub-menu-list-wrap{top:72px}
.header.fixed .fixed-wrap{height:90px}
.header .logo{width:75px}
.header .navBg{display:block;position:absolute;left:0;top:120px;display:none;width:100%;height:400px;border-bottom:1px solid #ddd;background-color:#f8f8f8;transition:top .4s}
.header-right-wrap{right:15px;width:auto; }
.pc-nav{display:flex;justify-content:center;width:100%}

.header-right-wrap .menu-btn-wrap{padding-left:13px;}
.header-right-wrap .menu-btn .line{margin:7px 0;transition:transform .4s}
.header-right-wrap .menu-btn .line,.header-right-wrap .menu-btn .line:before,.header-right-wrap .menu-btn .line:after{background-color:#000;width:30px;height:3px;}
.header-right-wrap .menu-btn .line{}
.header-right-wrap .menu-btn .line:before{transform:translateX(-0px) translateY(-7px)}
.header-right-wrap .menu-btn .line:after{transform:translateX(-0px) translateY(5px)}
.open-nav-wrap .inner-wrap{display:flex;align-items:center;justify-content:center;height:100%}
.open-nav-wrap .menu-list-wrap{max-width:950px;height:auto;padding:0 0 0 0;overflow:hidden}
.open-nav-wrap .menu-list-wrap>*{flex:1 1 0%}
.open-nav-wrap .menu-list{display:flex;align-items:center;border-bottom:0}
.open-nav-wrap .menu-list:not(:last-child){margin-bottom:21px}
.open-nav-wrap .menu-list.on>div{color:#fff}




.open-nav-wrap .menu-list.on>div:before{content:'';position:absolute;top:50%;left:-55px;transform:translateY(-50%);display:inline-block;width:25px;height:2px;background-color:#f81e2e}

.open-nav-wrap .menu-list>div{margin-bottom:30px;width:300px;height:auto;border-bottom:0;margin-bottom:0;font-size:40px;font-weight:600;letter-spacing:0.01em;color:#fff;}
.open-nav-wrap .sub-menu-list{font-size:20px;margin-bottom:0 !important;letter-spacing:0.06em;font-weight:500}
.open-nav-wrap .sub-menu-list .text{padding:0 5px}
.open-nav-wrap .sub-menu-list .text:hover{color:#fff}
.open-nav-wrap .sub-menu-list:not(:last-child):after{content:"";position:absolute;top:3px;right:-23px;display:inline-block;width:19px;height:18px;background:url(/img/common/nav_bl.png) no-repeat}
.open-nav-wrap .sub-menu-list:not(:last-child){margin-right:25px}
.open-nav-wrap .sub-menu-list-wrap{padding:0;display:flex !important;flex:1 1 0%;height:auto !important;padding-top:10px;border-bottom:0}[lang='en'] 
.open-nav-wrap .sub-menu-list-wrap{flex-wrap:wrap}
.open-nav-wrap .menu-list>div.has-sub .aco-arrow{display:none}
.open-nav-wrap .open-language-wrap{display:none}
.open-nav-wrap .menu-list>div a {color:#ddd;}
.open-nav-wrap .sub-menu-list a {color:#999;}

.all_box, .all_menu {display:none;}
.hde  {display:none}

/*.white-nav .hde .side2_m span {color:#000;}
.header .hde .side2_m span {color:red;}*/
}

@media screen and (max-width: 800px){
    .header .header-right-wrap .t_smenu a.t_mall{
        font-size: 19px !important;
    }
    .header-right-wrap{
        /* position: static; */
        position: absolute;
        justify-content: center;
        top:2px;
        /* padding-top: 10px; */
    }
    .call-img{
        right: 9%;
    }
}
@media screen and (max-width: 680px){
    .header .header-right-wrap .t_smenu a.t_mall{
        font-size: 18px !important;
    }
    .header-right-wrap{
        /* padding-left: 100px; */

    }
}
@media screen and (max-width: 540px){
    .header .header-right-wrap .t_smenu a.t_mall{
        font-size: 15px !important;
        padding: 2px 0px 0px 27px !important;
    }
    .call-img{
        right: 12%;
    }
}
@media screen and (max-width: 490px){
    .header .header-right-wrap .t_smenu a.t_mall{
        font-size: 10px !important;
        font-weight: 500 !important;
        background-size: 17px !important;
        padding: 0px 0px 0px 22px !important;
    }
    .header-right-wrap{
        padding-left: 150px;
        padding-top: 7px;
    }
    .call-img>.navicall{
        background: url(../../img/common/call-ss.png);
        width: 140px;
        height: 39px;
    }
}
@media screen and (max-width: 395px) {
    .header .header-right-wrap .t_smenu a.t_mall{
        font-size: 9px !important;
    }
    .header-right-wrap{
        padding-left: 100px;
    }
    .call-img {
        right: 16%;
        top: 19px;
    }
}
@media screen and (max-width: 338px){
    .call-img{
        display: none;
    }
}