@charset "utf-8";
/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* root */
:root{
	--c-bs:#666;
	--c-bd:#222;
    --c-bd01:#242424;
	--c-01:#8ada6b;
    --c-02:#68d662;
	--ani-bs:all 0.4s ease;
	--ani-lz:all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); 
	--font-k:"Pretendard";
	--font-e:'Play';
    --default-s:18rem
}

/* motion */
[data-motion]:not([data-motion="trans"]):not(.area_sns){opacity:0;transition:transform 1600ms ease, opacity 1300ms ease;transform-style:preserve-3d;}
[data-motion]:not([data-motion="trans"]).motion_in{opacity:1; transform:none;}
[data-motion="scrollTop"]{transform:translate(0%, 40%) matrix3d(1, 0, 0, 0, 0, 0.997564, 0.0697565, -0.00028, 0, -0.0697565, 0.997564, -0.00249391, 0, 0, 40, 0.9);}
[data-motion="top"]{transform: translateY(-70rem);transition-delay:0.1s;}
[data-motion="right"]{transform:translateX(140rem); transition-delay:0.1s;}
[data-motion="scale"]{opacity:1 !important; transform:scale(1.15); transition-delay:0.1s;}
[data-motion="txt"].motion_in > *{transform:translateY(0);display: block;}
[data-motion="txt"] > *{opacity:1; transition:all 0.9s ease; transform:translateY(-100%);}
[data-motion="txt"]{/* opacity:1 !important; */overflow:hidden;}

[data-delay="100"]{transition-delay: 0.1s !important;}
[data-delay="200"]{transition-delay: 0.2s !important;}
[data-delay="300"]{transition-delay: 0.3s !important;}

/* common style */
html.safari.desktop{font-size: 0.040083333vw;}
html{-ms-text-size-adjust:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none;}
html{font-size:6.25%; font-weight: 300;}

::selection{background: #116348bd;color:#fff;}

body{overflow-y:overlay;}
.inner{position:relative; width:1400rem; margin:0 auto;}
.inner.v2{width: 1022rem;}

[data-flex]{display:flex;}
[data-flex="center"]{align-items:center;}

p{font-family:var(--font-k);}

a.btn-basic{position:relative; height:65rem; line-height:1; line-height:69rem; box-sizing:border-box; padding:0px 77rem 0 30rem; background:var(--c-bd); font-weight:700; font-size:16rem; color:#fff; letter-spacing:-0.5rem; border-radius:40rem;}
a.btn-basic.blue{background-color:var(--c-01);}
a.btn-basic::before,
a.btn-basic::after{content:""; display:block; position:absolute; top:26rem; right:30rem; width:14rem; height:12rem; background-position:50% 50%; transition:all 0.3s ease; background-image:url(../img/common/arr_basic02_w.svg); background-repeat:no-repeat;}
a.btn-basic::before{opacity:0; right:40rem;}
a.btn-basic:hover::before{opacity:1; right:30rem;}
a.btn-basic:hover::after{opacity:0; right:20rem;}
a.btn-basic.white{background:#fff; color:var(--c-01);}
a.btn-basic.white::before,
a.btn-basic.white::after{background-image:url(../img/common/arr_basic02_c.svg);}

/* 버튼 종류 */
.more_btn{position: relative; padding-left: 30rem;}
.more_btn::before{content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 62rem; height: 62rem; border-radius: 100%; background-color: rgba(255,255,255,0.12); }
.more_btn *{position: relative; z-index: 2;}
.more_btn i{font-size: 14rem; color: #fff;}
.more_btn img{width: 13rem; margin-left: 17rem;}
.area-button{display: flex;}
.area-button .btn{width: 195rem; height: 60rem; box-sizing: border-box; border:1px solid #242424; display: flex; align-items: center; justify-content: center; transition: all .3s;  }
.area-button .btn span{ font-size: 14rem; font-weight: bold; color: #242424;}
.area-button .btn:hover{background-color: #242424;}
.area-button .btn:hover span{color: #fff;}

/* header */
#logo{position:absolute; top:50%; transform: translateY(-50%); z-index:99; left: 160rem;}
#logo a{display: block;}
#logo img{height: 42rem;}

#hd{position:absolute; height: 110rem; top:0;left:0;z-index:999;width:100%;  background:transparent;transition: all 0.5s ease;}
#hd.hide{transform:translateY(-100%);}
#hd_wrapper > div{display:flex; justify-content:space-between; align-items:center;}
#hd_h1{font-size:0;}
#hd .btn_close{position:fixed; opacity:0; visibility:hidden; top:0rem; left:0rem; z-index:99; width:-webkit-calc(100% - 320px); width:100%; height:-webkit-calc(100vh - -0rem * 1); height:calc(100vh - -0rem * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
#hd::after{content:""; position:absolute; opacity:0; visibility:hidden; top:112rem; left:0; width:100%; height:355rem; background:#fff; transition:all 400ms ease;}
#hd.on{padding: 5rem 0rem;background: rgb(11 11 11);}

.list_lang{display:flex;position:absolute; top: 50%; transform: translateY(-50%); right: 140rem; z-index: 55; border-radius: 90rem; width: 105rem; height: 29rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border:2px solid rgba(221,221,221,0.6);}
.list_lang a{position:relative; opacity:0.32;font-weight:600;font-size: 12rem;color:#fff; display: block;}
.list_lang li{position: relative;}
.list_lang li + li{margin-left: 23rem;}
.list_lang li + li::before{content: ""; width: 1px; height: 11px; background-color: rgba(221,221,221,0.36); position: absolute; left: -11rem; top: 50%; transform: translateY(-50%);}
.list_lang li.on a{opacity:1;}

.nav_open{width: 110rem;height: 110rem;  position: absolute; right:0; top:0; z-index: 90;}
#hd .btn_menu{display:flex;align-items: center;justify-content: center;z-index:100;width: 100%;height: 100%;margin-top:0;font-size:0px;transition:all 0.3s ease 0s;flex-direction: column;flex-wrap: wrap;}
#hd .btn_menu > span{display:block;width:27rem;height: 2px;background: #fff;}
#hd .btn_menu > span:nth-of-type(2){ margin-top: 7rem;}
#hd .btn_menu > span:nth-of-type(1),
#hd .btn_menu > span:nth-of-type(2){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#hd .btn_menu.active > span:nth-of-type(1){transform:rotate(-45deg); position: relative; top:1rem;}
#hd .btn_menu.active > span:nth-of-type(2){transform:rotate(45deg);}
#hd .btn_menu.active > span:nth-of-type(1),
#hd .btn_menu.active > span:nth-of-type(2){transition-delay:0s, 0.3s;background: #111;}
#hd .btn_menu.active > span:nth-of-type(2){ margin-top: 0;}
#hd .btn_close{position:fixed; opacity:0; visibility:hidden; top:0px; left:0px; z-index:99; width:-webkit-calc(100% - 320px); width:100%; height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
#hd_pop{font-size:0;}
#hd.on #gnb .gnb__link{padding:58rem 55rem 26rem;}


.full_menu{display:none;display:flex;position:absolute;/* justify-content: center; */align-items: center;opacity:0;visibility:hidden;overflow:hidden;top:0;right: 0;z-index:500;width: 100%;height:100vh;background:#fff;transition:all 0.5s ease;}
.full_menu [data-full="bg"]{ position: absolute; top: 0; left: 0; z-index: 10;}
.full_menu [data-full="bg"] .logo{width:190rem;height:109rem; display: flex;align-items: center; justify-content: center;}
.full_menu [data-full="bg"] .logo img{width:100rem}
.full_menu.oepn [data-full="bg"] .img{ animation: FullmenuAni 10s;}

.full_menu [data-full="menu_wrap"]{width:100%;display: flex;/* flex-direction: column; */box-sizing: border-box;padding: 0 200rem;justify-content: space-between; align-items: flex-end; }
#hd .full_menu [data-full="menu"] > ul{display:flex;align-items:flex-start;flex-direction:column;/* max-width: 370rem; */margin: 0 auto;}
.full_menu [data-full="menu"] *{color: #222;}
#hd .full_menu [data-full="menu"] > ul > li > a{position:relative; font-size: 0; display:block;padding:0;font-weight:600;  transition: all .3s;}
#hd .full_menu [data-full="menu"] > ul > li > a:hover{color: #8ada6b;}
#hd .full_menu [data-full="menu"] > ul > li > a:before{content:"";display:none;position: absolute;right: 15rem;top: -2rem;width: 10rem;height: 10rem;border: 2px solid #222;border-top: 0;border-left: 0;transform: rotate(45deg);transition: 0.3s;}
#hd .full_menu [data-full="menu"] > ul > li > a::after{font-size: 48rem; text-transform: uppercase; text-align: left; display: block; }
#hd .full_menu [data-full="menu"] > ul > li > #about::after{content: "ABOUT"; }
#hd .full_menu [data-full="menu"] > ul > li > #product::after{content: "product"; }
#hd .full_menu [data-full="menu"] > ul > li > #promotion::after{content: "promotion"; }
#hd .full_menu [data-full="menu"] > ul > li > #contact::after{content: "Customer"; }
#hd .full_menu [data-full="menu"] > ul > li > a.active{color:var(--c-02)}
#hd .full_menu [data-full="menu"] > ul > li > a.active:before{top: 19rem; border-color:var(--c-02); transform: rotate(-135deg); }

#hd .full_menu [data-full="menu"] > ul > li:not(:last-child){}
#hd .full_menu [data-full="menu"] > ul > li > ul{display:none; margin-top:12rem;}
#hd .full_menu [data-full="menu"] > ul > li > ul li{}
#hd .full_menu [data-full="menu"] > ul > li > ul a{display:block;font-weight: 500;font-size: 22rem; box-sizing: border-box; padding: 8rem 0; letter-spacing:-0.05rem; color:#888; white-space:nowrap;transition:all 0.3s ease;}
#hd .full_menu [data-full="menu"] > ul > li{position:relative;width:100%;transition:all 0.4s ease;padding-bottom: 64rem;/* border-bottom: 1px solid #ddd; */}
#hd .full_menu [data-full="menu"] > ul > li:last-child{padding-bottom:0; border-bottom:0}
#hd .full_menu [data-full="menu"] > ul > li > ul a:hover{color:var(--c-02);}
#hd .full_menu [data-full="contact"] {/* width: 30%; *//* margin-left: 230rem; */}
#hd .full_menu [data-full="contact"] h3{color: var(--c-02);font-family: var(--font-e);font-size: 16rem;}
#hd .full_menu [data-full="contact"] address > *{display: block; font-style: normal;}
#hd .full_menu [data-full="contact"] address strong{font-size: 25rem;color: #111;margin-top: 12rem;margin-bottom: 70rem;}
#hd .full_menu [data-full="contact"] address span{color: #363636;margin-bottom: 10rem;}
#hd .full_menu [data-full="contact"] .cp{color: #b2b2b2;font-size: 15rem;margin-top: 20rem;font-family: var(--font-e);}
.full_menu.oepn{opacity:1;visibility:visible;background: #fff; position: fixed; top: 0; left: 0;}
[data-hbg="mob"]{display: none;}

/* footer */
#ft{position:relative;padding:100rem 0rem;z-index: 10; background-color: #242424;}
#ft .logo{display: block;}
#ft .logo img{height: 29rem; display: block; opacity: 0.73;}
.f_top{display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 25rem;}
.f_top .f_util a{font-size: 14rem; color: #b2b2b2;}
.f_top .f_util a + a{margin-left:18rem}
.f_bottom{border-top: 1px solid rgba(178,178,178,0.16); position: relative; text-align: left; padding-top: 25rem;}
.f_bottom address *{font-size: 14rem; font-family: var(--font-e);}
.f_bottom address span{color:#b2b2b2; font-style: normal; margin-right: 23rem;}
.f_bottom address span b{font-weight: 300; color: #fefefe;}
.f_bottom .copyright{font-size: 14rem; color: #666; font-family: var(--font-e); text-transform: uppercase; margin-top: 15rem;}
.f_bottom .email{position: absolute; right: 0; border:1px solid #ddd; width: 189rem; height: 44rem; display: flex; align-items: center; justify-content: center; top: 30rem; z-index: 1;}
.f_bottom .email span{font-size: 14rem; color: #ddd;}
/* mobile gnb style */
/* #hd .nav_open{display:none;} */
#gnb .gnb{display:flex; justify-content:center; zoom:1;}
#gnb .gnb__list{align-items:center;position:absolute;opacity: 0;visibility: hidden;overflow:hidden;top: 86rem;left:50%; border:1px solid #eee;
    transform: translateX(-50%); width: 150rem;box-sizing:border-box;padding:13px 0px;background:#fff; text-align:center;transition:all 300ms ease;gap:56px;/* border-bottom-left-radius:10rem; *//* border-bottom-right-radius:10rem; */transition: all 0.3s ease;}
#gnb .gnb > li{position:relative;z-index:10;transition: all 0.3s ease; margin-left: 98rem;}



@media (max-width:1680px){

}

@media (max-width:1600px){

}
@media (max-width:1480px){

    .inner{padding:0 40rem; box-sizing: border-box; width: 100%;}

    #logo{left: 80rem;}
    #gnb{right: 268rem;}
    .list_lang {right: 106rem;}
    .nav_open{width: 86rem;}
    #ft{padding: 50rem 0;}
}

@media (min-width:1023px){

    #gnb{position:absolute; top: 50%; transform: translateY(-50%); right: 318rem;}
	#gnb .gnb:after{content:""; display:block; visibility:hidden; clear:both;}
	#gnb .gnb__link{display:inline-block;position:relative;z-index:5;box-sizing:border-box; padding: 48rem 0; font-weight: 500;font-size: 20rem;color: #fff;transition: all 300ms ease;text-decoration:none; background: transparent; }
	#gnb .gnb__link span{display:none;}
  
	#gnb .gnb__list > li{padding: 9rem 0;transition: all 0.3s ease !important;}
	#gnb .gnb__list > li.active a{color:var(--c-01)}
	#gnb .gnb__list .gnb__list > li:last-child{border-bottom:none;}
	#gnb .gnb__list > li > a{display:block;width:100%;box-sizing:border-box;border-bottom:0;font-weight:300;font-size: 16rem;color:#aaaaaa;letter-spacing:-.3px;text-decoration:none;transition: all 0.3s ease;}
    
	#gnb .gnb > li:hover,
    #gnb .gnb > li:focus .gnb__list,
	#gnb .gnb > li.active .gnb__list{opacity:1; visibility:visible;}

	#gnb .gnb__list > li > a:focus,
	#gnb .gnb__list > li > a:hover{display:inline-block; font-weight:400; color:var(--c-01);}	

	#en #gnb .gnb__list > li > a{font-family:var(--font-e);}
   
}

@media (max-width:1023px){
    :root{
        --default-s:16rem
    }
#gnb{display: none;}
    .inner{padding: 0 28rem;}
	#logo img{height: 34rem;}
    .full_menu [data-full="menu_wrap"]{padding: 0 80rem;}
    #hd .full_menu [data-full="menu"] > ul > li{padding-bottom: 34rem;}
    #hd .full_menu [data-full="menu"] > ul > li > a::after{font-size: 36rem;}
    #hd .full_menu [data-full="contact"] address strong{font-size: 24rem;}
    [data-hbg="mob"]{display: block; position: absolute; top: -10rem; left: -111rem; width: 0; height: 0;}
    #hd .full_menu [data-full="menu"] > ul > li > a{text-align: left; display: block;}
    #hd .full_menu [data-full="menu"] > ul > li > ul a{font-size: 18rem;}

    :root{
        --default-s:16rem
    }
    .inner.v2{width: 100%;}
}

@media (max-width:860px){

    .inner{padding: 0 24rem;}

    #hd,.nav_open        {height: 70rem;}
    #hd .btn_menu,.full_menu [data-full="bg"] .logo{height: 75rem;}
    #logo{left: 60rem;}

    .f_bottom .email{position: relative; top: 0; margin-top: 30rem;}
    .more_btn::before{width: 54rem; height: 54rem;}

    #hd .full_menu [data-full="menu"]{width: 100%;}
    #hd .full_menu [data-full="menu"] > ul > li > a::before{display: block;}
    #hd .full_menu [data-full="menu"] > ul > li > a::after{font-size: 28rem;}
    .full_menu [data-full="menu_wrap"]{flex-direction: column; align-items: flex-start; position: absolute;  top: 0; height: 100%; padding: 180rem 40rem 60rem;}
    #hd .full_menu [data-full="contact"]{width: 100%; margin-top: 80rem;}

}

@media (max-width:540px){
    .inner{padding: 0 16rem;}
    :root{
        --default-s:15rem
    }

    #logo {left: 20rem;}
    #logo img,.full_menu [data-full="bg"] .logo img{height: 24rem; width: inherit;}
    .full_menu [data-full="bg"] .logo{width: auto; padding-left: 20rem;}
    .list_lang{right: 76rem;}
    #ft{padding: 18rem 0;}
    #ft .f_util{display: none;}
    #ft .logo img{height: 22rem;}
	.f_top{padding-bottom: 17rem;}
    .f_bottom{padding-top: 14rem;}
    .f_bottom address span{display: block;}
    .f_bottom address span + span{margin-top: 6rem;}
    .f_bottom .email{width: 100%;}

    .more_btn{padding-left: 20rem;}
    .more_btn::before{width: 32rem; height: 32rem;}
    .area-button .btn{width: 165rem; height: 50rem;}
    .nav_open{width: 65rem;}

    .full_menu [data-full="menu_wrap"]{padding: 100rem 20rem 30rem;}
    #hd .full_menu [data-full="contact"] h3{font-size: 14rem;}
    #hd .full_menu [data-full="contact"] address strong{font-size: 18rem; margin-bottom: 30rem;}
    #hd .full_menu [data-full="menu"] > ul > li > a::after{font-size: 22rem;}
    #hd .full_menu [data-full="contact"] address span{font-size: 15rem;}
}