@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");


#subpage{position: relative; padding:220px 0 0;}
#subpage .subpage_bg{position:fixed; left:0; top:0; width:100%; height:var(--vh); z-index: -1; background:url('/img/subpage_bg.jpg') no-repeat center/cover;}


.header::after {opacity:0;}
.header.up::after {opacity:1;}
.header .header_in .save_logo svg .up {fill:var(--black);  transition:all 0.3s ease;}
.header .gnb ul li > a{color:var(--black);  transition:all 0.3s ease;}
.header .header_in .top_util ul li a {color:var(--black);  transition:all 0.3s ease;}
.header .header_in .top_util ul li a::before {color:var(--black);  transition:all 0.3s ease;}
.header .header_in .top_util ul li a svg * {fill:var(--black);}




 /* ¼­ºêž */
.subtop_bg {width:100%; height:var(--vh); position:sticky; top:0; left:0; z-index:-1;}
.subtop_bg .subtop_in {width:100%; height:100%; position:absolute; top:0; left:0;}
.subtop_tBox {text-align:center; padding:230px 0 70px; max-width:1350px; width:90%; margin:0 auto;}
.subtop_tBox .fs30 {margin:30px 0 0;}
.subtop_tBox .hash_tag {display:flex; flex-wrap:wrap; justify-content:center; gap:5px 10px; margin:15px 0 0;}
.subtop_tBox .hash_tag li {font-family: var(--eng); font-size: 1.222rem; font-weight: 400; line-height:154.545%; letter-spacing: -1.1px;}

.mart100 {margin-top:calc(var(--vh) * -1);}
 /* ¼­ºêž */




/* css °øÅë */
.fs95 {color: var(--black); font-family: var(--eng); font-size: 5.2777rem; font-style: normal; font-weight: bold; line-height: 97.895%; letter-spacing: -4.75px; text-transform: uppercase;}
.fs80 {position:relative; color: var(--black); font-family: var(--eng); font-size: 4.444rem; font-weight: bold; line-height: 112.5%; letter-spacing: -4px; text-transform: uppercase; z-index:90;}
.fs80:before {content:attr(data-hover); position:absolute; left:6px; top:5px; width:100%; height:100%; z-index:-2; opacity:0.1; color:transparent; text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;}
.fs80:after {content:attr(data-hover); position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; color:transparent; 
text-shadow: rgb(255, 255, 255) 5px 0px 0px, rgb(255, 255, 255) 4.90033px 0.993347px 0px, rgb(255, 255, 255) 4.60531px 1.94709px 0px, rgb(255, 255, 255) 4.12668px 2.82321px 0px, rgb(255, 255, 255) 3.48353px 3.58678px 0px, rgb(255, 255, 255) 2.70151px 4.20736px 0px, rgb(255, 255, 255) 1.81179px 4.6602px 0px, rgb(255, 255, 255) 0.849836px 4.92725px 0px, rgb(255, 255, 255) -0.145998px 4.99787px 0px, rgb(255, 255, 255) -1.13601px 4.86924px 0px, rgb(255, 255, 255) -2.08073px 4.54649px 0px, rgb(255, 255, 255) -2.94251px 4.04248px 0px, rgb(255, 255, 255) -3.68697px 3.37732px 0px, rgb(255, 255, 255) -4.28444px 2.57751px 0px, rgb(255, 255, 255) -4.71111px 1.67494px 0px, rgb(255, 255, 255) -4.94996px 0.7056px 0px, rgb(255, 255, 255) -4.99147px -0.291871px 0px, rgb(255, 255, 255) -4.83399px -1.27771px 0px, rgb(255, 255, 255) -4.48379px -2.2126px 0px, rgb(255, 255, 255) -3.95484px -3.05929px 0px, rgb(255, 255, 255) -3.26822px -3.78401px 0px, rgb(255, 255, 255) -2.4513px -4.35788px 0px, rgb(255, 255, 255) -1.53666px -4.75801px 0px, rgb(255, 255, 255) -0.560763px -4.96845px 0px, rgb(255, 255, 255) 0.437495px -4.98082px 0px, rgb(255, 255, 255) 1.41831px -4.79462px 0px, rgb(255, 255, 255) 2.34258px -4.41727px 0px, rgb(255, 255, 255) 3.17346px -3.86382px 0px, rgb(255, 255, 255) 3.87783px -3.15633px 0px, rgb(255, 255, 255) 4.4276px -2.32301px 0px, rgb(255, 255, 255) 4.80085px -1.39708px 0px, rgb(255, 255, 255) 4.98271px -0.415447px 0px;}

.fs70 {color: var(--black); font-family: var(--eng); font-size: 3.888rem; font-style: normal; font-weight: bold; line-height:121.429%; letter-spacing: -3.5px;}
.fs60{color: var(--black); font-family: var(--eng); font-size: 3.333rem; font-weight: 700; line-height: 125%; letter-spacing: -3px; position: relative;	display: inline-block; z-index: 2;} 
.fs60:after {content: attr(data-txt); text-shadow: 0 10px 0px rgba(0, 0, 0, 0.30); /* -webkit-text-stroke-width: 10px; -webkit-text-stroke-color: var(--white); */ font-family:inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; display: inline-block; position: absolute; left: 0; top:0; z-index: -1;}
.subtitle .fs60:after {-webkit-text-stroke-width: 10px; -webkit-text-stroke-color: var(--white);}
.fs60 span{display: inline-block; font-family:inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;}
.fs35 {color: var(--black); font-size: 1.9444rem; font-weight: 400; line-height:142.857%; letter-spacing: -1.75px; text-transform: uppercase;}
.fs34 {color: var(--black); font-family: var(--eng); font-size: 1.888rem; font-weight: 400; line-height: 144.118%; letter-spacing: -1.36px;}
.fs30 {color: var(--black); font-family: var(--eng); font-size: 1.666rem; font-weight: 400; line-height:150%; letter-spacing: -1.5px; text-transform: uppercase;}
.fs20 {color: var(--black); font-size: 1.111rem; font-weight: 400; line-height:170%; letter-spacing: -1px;}

.basic_cont {padding:0 0 200px; overflow:hidden;}
.subtitle{text-align:center; padding:0 0 60px;}
.subtitle img{margin:0 auto 30px; max-width:539px; width:70%; display: block;}
.white_box{box-sizing:border-box; padding:100px 115px; background:var(--white); border-radius:var(--borderR30);}
.img_box{box-sizing:border-box; text-align:center;}
.img_box img{max-width:100%; height: auto;}
.border_box{padding: 40px; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--borderR30);}
.home{display: block;}
/* css °øÅë */









/* ÀÚ·á ´Ù¿î·Îµå */
.download_cont{}
.download_cont .more_btn{width: 270px;}
.download_cont .more_btn em{display: block;}
.download_cont .more_btn em:after{position: absolute; right: 0; top:50%; margin-top: -16px; background:url('/save/img/down_icon.png') no-repeat center/100% auto;}

/* üũ ¸®½ºÆ® */
.check_list{text-align:left;}
.check_list > li,
.check_list > dd{font-size:1rem; letter-spacing: -0.72px; line-height:160%; color:var(--basic); padding:0 0 8px 28px; box-sizing:border-box; position:relative;}
.check_list > li:last-child,
.check_list > dd:last-child{padding-bottom:0;}
.check_list > li:before,
.check_list > dd:before{content:'\e86c'; display:block; width:24px; height:24px; line-height: 24px; font-size:24px; font-family:var(--icon); color:var(--main); position:absolute; left:0; top:2px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.check_list > li b,
.check_list > dd b{display: block; font-weight: 600; color:var(--black); padding: 0 0 2px;}


.goods_banner {border-radius:30px; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; padding:90px 100px; box-sizing:Border-box; background-color:var(--main); background-repeat:no-repeat;  background-position:right bottom; margin:100px 0 0;}
.goods_banner .tBox {width:calc(100% - 75px);}
.goods_banner .tBox .fs35 {font-weight:bold; color:var(--white);}
.goods_banner .tBox .fs20 {margin:5px 0 0; color:var(--white);}
.goods_banner .btnBox {width:75px;}
.goods_banner .btnBox a {display:block; text-align:center; width:75px; height:75px; border-radius: 15px; background: var(--white); box-shadow: 2px 5px 0px 0px rgba(0, 0, 0, 0.20);  transition:all 0.3s ease;}
.goods_banner .btnBox a::before {content:'\e941'; font-family:var(--icon); font-size:30px; font-weight:300; line-height:75px; color:var(--main);}

.goods_banner .btnBox a:hover {box-shadow: 2px 0 0px 0px rgba(0, 0, 0, 0.20); transition:all 0.3s ease;}
















/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){

#subpage{padding:200px 0 0;}


.fs80 {font-size: 3.333rem;}



.goods_banner {background-size:contain;}


/* css °øÅë */
.white_box{padding:80px 60px;}



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


#subpage{padding:160px 0 0;}



 /* ¼­ºêž */
.subtop_tBox {padding:180px 0 50px;}
.subtop_tBox br {display:none;}
.subtop_tBox br.block {display:block;}
.subtop_tBox .fs30 {margin:20px 0 0;}
 /* ¼­ºêž */



/* css °øÅë */
.fs95 {font-size: 4.222rem; letter-spacing: -3px;}
.fs70 {font-size: 3.222rem; letter-spacing: -2.5px;}
.fs34 {font-size: 1.777rem; font-weight: 400; letter-spacing: -1px;}


.fs80 {font-size: 2.66666rem;}
.fs60{font-size: 2.778rem;} 
.fs30 {font-size:1.555rem;}

.subtitle{padding:0 0 40px;}
.subtitle img{margin:0 auto 20px;}
.basic_cont {padding:0 0 150px;}
.white_box{padding:60px 40px;}
.border_box{padding: 30px;}
/* css °øÅë */





/* ÀÚ·á ´Ù¿î·Îµå */
.download_cont{}
.download_cont .more_btn{width: 240px;}
.download_cont .more_btn em:after{margin-top: -12px;}


/* üũ ¸®½ºÆ® */
.check_list{}
.check_list > li,
.check_list > dd{padding:0 0 6px 28px;}
.check_list > li:before,
.check_list > dd:before{top:0;}
.check_list > li br,
.check_list > dd br{display: none;}


.goods_banner {padding:60px 50px; margin:60px 0 0;}
.goods_banner .tBox {width:calc(100% - 50px);}
.goods_banner .btnBox {width:50px;}
.goods_banner .btnBox a {width:50px; height:50px;}
.goods_banner .btnBox a::before {line-height:50px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

#subpage{padding:100px 0 0;}


/* ¼­ºêž */
.subtop_tBox {padding:95px 0 35px;}
.subtop_tBox .fs30 {margin:10px 0 0;}
.subtop_tBox .hash_tag {display:flex; flex-wrap:wrap; justify-content:center; gap:5px 8px; margin:15px 0 0;}
.subtop_tBox .hash_tag li {font-size: 1rem;}
/* ¼­ºêž */


/* css °øÅë */
.fs95 {font-size: 2.8rem; letter-spacing: -3px;}
.fs70 {font-size: 2.222rem; letter-spacing: -2.5px;}
.fs34 {font-size: 1.444rem; font-weight: 400; letter-spacing: -1px;}


.fs80 {font-size: 2.222rem; letter-spacing:-2px;}
.fs80.pointColor {display:block;}
.fs60{font-size: 1.944rem; letter-spacing: -2px;}  
.fs60:after{text-shadow: 0 8px 0px rgba(0, 0, 0, 0.30); transform:scale(0.98);}
.fs35 {font-size:1.44rem;}
.fs30 {font-size:1.333rem; letter-spacing:-0.8px;}

.subtitle{padding:0 0 30px;}
.subtitle img{margin:0 auto 15px;}
.white_box{padding:40px 20px;}
.border_box{padding: 20px;}
.basic_cont {padding:0 0 80px;}
/* css °øÅë */



/* ÀÚ·á ´Ù¿î·Îµå */
.download_cont{}
.download_cont .more_btn{width: 200px;}
.download_cont .more_btn em:after{margin-top: -10px;}


/* üũ ¸®½ºÆ® */
.check_list{}
.check_list > li,
.check_list > dd{padding:0 0 6px 24px;}
.check_list > li:before,
.check_list > dd:before{width:20px; height:20px; line-height: 20px; font-size:20px; top:1px;}


.goods_banner {padding:25px 25px 85px; margin:60px 0 0; border-radius:15px; margin:30px 0 0;}
.goods_banner .tBox {width:calc(100% - 44px); padding-right:20px; box-sizing:border-box;}
.goods_banner .tBox br {display:none;}
.goods_banner .btnBox {width:44px; margin:10px 0 0;}
.goods_banner .btnBox a {width:44px; height:44px; border-radius:5px;}
.goods_banner .btnBox a::before {line-height:44px; font-size:20px;}




}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}