@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");


/* ¼­ºêž */
#sub_visual {position:relative; width:100%; height:628px; padding-top:78px; box-sizing:border-box;} 
#sub_visual .visual_in {position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); z-index:9;}
#sub_visual .v_txt {text-align:left; width:100%;}
#sub_visual .v_txt h2 {font-family:var(--eng); color:var(--white); font-weight:700; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.3s; animation-fill-mode:both;}
#sub_visual .v_txt p {color:var(--white); font-weight:400; padding:20px 0 0; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.5s; animation-fill-mode:both;}
#sub_visual .v_bg {position:absolute; left:0; top:78px; width:100%; height:calc(100% - 78px); overflow: hidden;}
#sub_visual .v_bg .bg {position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); animation: m_vsImg 1.8s; background:url('/img/product_top.jpg') top center no-repeat; background-size:cover;}

@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}


/* PC lnb */
.lnb {display:none; overflow:hidden; position: relative; z-index: 9; top:0;}
.lnb .lnb_in{}
.lnb .lnb_in ul {display:flex; justify-content: center; gap:0 5px;}
.lnb .lnb_in ul li {flex:1; height:64px;}
.lnb .lnb_in ul li a {position:relative; width:100%; height:100%; padding:15px 20px; display:flex; justify-content:center; align-items:center; box-sizing:border-box; transition:all .3s linear; background:var(--grayBg);}
.lnb .lnb_in ul li.left_linktop a {color:var(--white) !important; background:var(--main) !important;}
.lnb .lnb_in ul li a:hover {color:var(--main);}
.search_none .lnb{display: none;}

.lnb_area {padding-top:160px;}

/* ¸ð¹ÙÀÏ lnb */
.mobile_snb {display:flex; align-items:center; justify-content:center;}
.mobile_snb a.home {display:inline-flex; width:55px; justify-content:center;}
.mobile_snb .tbox {display:flex;}
.mobile_snb .tbox .box {position:relative; box-sizing:border-box; min-width:150px;}
.mobile_snb .tbox .box::before {position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:5; width:1px; height:10px; background:var(--border); z-index:5; content:"";}
.mobile_snb .tbox .box .dropLst {position: relative;}
.mobile_snb .tbox .box .dropLst .title {position: relative; display:block; box-sizing:border-box; padding:0 40px 0 20px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; }
.mobile_snb .tbox .box .dropLst .title:after {content:''; display:flex; align-items:center; justify-content:center; width:24px; height:24px; font-family:var(--icon); font-size:24px; content:"arrow_drop_down"; position:absolute; right:15px; top:50%; margin-top: -12px; transition:all .3s linear; opacity: 1; font-weight:normal;}
.mobile_snb .tbox .box.dep1 .dropLst .title {}
.mobile_snb .tbox .box:last-child .dropLst .title {font-weight:600; color:var(--black);}
.mobile_snb .tbox .box .dropLst .title.on{}
.mobile_snb .tbox .box .dropLst .title.on:after {transform:rotate(180deg);}
.mobile_snb .tbox .box .dropLst .dlst {display:none; position: absolute; left: 0; top:35px; width:100%; z-index: 99999; padding:20px; background:var(--grayBg);} /* box-shadow:0 20px 20px rgba(0,0,0,.05);  */
/*.mobile_snb .tbox .box.dep2 .dropLst .dlst {left: -100%;}*/
.mobile_snb .tbox .box .dropLst .dlst ul {}
.mobile_snb .tbox .box .dropLst .dlst ul li {}
.mobile_snb .tbox .box .dropLst .dlst ul li a {box-sizing:border-box; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on {color:var(--main); font-weight:600;}
.search_none .mobile_snb{display: none;}

/** Á¦Ç° ¼Ò°³ ÂÊ lnb**/
.prd_lnb {position:absolute; bottom:20px; z-index:10; width:94%; left:50%; transform:translateX(-50%);}
.prd_lnb .mobile_snb {width:100%; max-width:1100px; justify-content:flex-start; gap:0 5px;}
.prd_lnb .mobile_snb a.home {width:50px; height:50px; align-items:center; border-radius:var(--borderR10); background:var(--main); }
.prd_lnb .mobile_snb a.home svg path {fill:var(--white);}
.prd_lnb .mobile_snb .tbox {width:calc(100% - 50px - 5px); gap:0 5px;}
.prd_lnb .mobile_snb .tbox .box {background:rgba(255,255,255,0.7); border-radius:var(--borderR10); padding:11px 0; box-sizing:border-box; width:calc((100% - 15px) / 4); max-width:247px;}
.prd_lnb .mobile_snb .tbox .box::last-child {max-width:280px; width:auto;}
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst {top:45px; border-radius:var(--borderR10);} /* box-shadow:0 20px 20px rgba(0,0,0,.05);  */
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst ul li + li {margin-top:5px;}
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst ul li a {text-overflow: clip; overflow: visible; white-space: normal; line-height:150%;} 

#contents {margin:0 auto;}
#contents.product {padding-top:var(--height);}
#contents.support .mobile_snb {display:none;}
#contents.support .lnb {display:block;}


/* ŸÀÌƲ */
#subtitle {padding:20px 0 60px; text-align:center;}
#subtitle.title {padding: 60px 0;}
#subtitle.prd {padding:100px 0 60px 0;}
#subtitle.prd .fs18 {padding:20px 0 0 0;}
#subtitle.prd .fs18 br {display:block;}

#subtitle .fs56 {color:var(--black);}

/* ¼­ºêž */
.sub_top {position:relative; display:flex; align-items:center; justify-content:center; height:550px;}
.sub_top .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; z-index:-5; background-position:center top; background-repeat:no-repeat; background-size:cover;}
.sub_top .top_tit_wrap {text-align:center;}


/*** °øÅë css ***/
.basic_cont {max-width:1590px; width: 94%; margin:0 auto 150px;}

.parag_txt > p + p {margin-top:20px;}

.dott_list li {position: relative; padding-left:15px; line-height:inherit;}
.dott_list li + li {margin-top:5px;}
.dott_list li::before {content: ""; display: block; width:4px; height:4px; background:var(--main); border-radius:50%; position: absolute; left: 0; top:13px}


/* °¶·¯¸®2(¹è³Ê) */
.gallery_roll{position:relative;}
.gallery_roll:after{content:''; display:block; clear:both;}
.gallery_roll .roll{position:relative;}
.gallery_roll .roll .imgArea{background:#000; overflow: hidden; aspect-ratio: 3 / 2;}
.gallery_roll .roll .imgArea img{width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_roll .roll .txtArea{position:absolute; left:0; bottom:0; width:100%; text-align:center; background:rgba(34,34,34,.6); padding:20px; box-sizing:border-box;}
.gallery_roll .roll .txtArea h4{font-weight:400; color:var(--white); line-height:150%; font-size:1.25rem;}
.gallery_roll .slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999; width: 30px; height: 30px; opacity: 1; left: auto; right:auto; bottom: auto; top:50%; margin-top:-15px;}
.gallery_roll .slick-arrow:hover{opacity:0.5;}
.gallery_roll .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:30px;}
.gallery_roll .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right:30px;}

.gallery_nav{margin:30px -2px 0; width:calc(100% + 4px);}
.gallery_nav:after{content:''; display:block; clear:both;}
.gallery_nav .roll{margin:0 2px; cursor:pointer; background-color:#000; overflow: hidden;}
.gallery_nav .roll .txtArea{display: none;}
.gallery_nav .roll .imgArea{overflow: hidden; aspect-ratio: 3 / 2;}
.gallery_nav .roll .imgArea img{opacity:0.5; width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_nav .roll.slick-current .imgArea img{opacity:1;}


/* °Ë»ö°á°ú */
.search .fs34 {color:var(--black); margin-bottom:20px;}
.search .dep_cont {margin-bottom:100px;}


/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important;}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block; line-height:1.7;}

.privacy_list {width:100%; overflow:hidden; padding:40px; display:grid; grid-template-columns:repeat(2, 1fr); gap:15px 10px; border:1px solid var(--border); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li a {font-weight:500; color:var(--black);} 



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

#sub_visual .v_txt p br {display:block;}

}


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



/* °¶·¯¸®2(¹è³Ê) */
.gallery_roll{}
.gallery_roll .roll .txtArea{padding:15px;}
.gallery_roll .slick-arrow{width: 25px; height: 25px; margin-top:-12px;}
.gallery_roll .slick-prev{left:20px;}
.gallery_roll .slick-next{right:20px;}
.gallery_nav{margin:20px -2px 0; width:calc(100% + 4px);}
.gallery_nav .roll{margin:0 2px;}



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


/* ¼­ºêž */
#sub_visual {height:500px; padding-top:70px;} 
#sub_visual .visual_in {top:53%;}
#sub_visual .v_bg {top:70px; height:calc(100% - 70px);}


/* PC lnb */
.lnb .lnb_in ul li {height:54px;}
.lnb .lnb_in ul li a {padding:12px 15px;}

.lnb_area {padding-top:120px;}

/* ¸ð¹ÙÀÏ lnb */
.mobile_snb a.home {width:45px;}
.mobile_snb .tbox .box {min-width:120px;}
.mobile_snb .tbox .box::before {height:8px;}
.mobile_snb .tbox .box .dropLst .title {padding:0 30px 0 15px;}
.mobile_snb .tbox .box .dropLst .title:after {width:20px; height:20px; font-size:20px; right:10px; margin-top:-10px;}
.mobile_snb .tbox .box .dropLst .dlst {top:30px; padding:20px;} 


/* ŸÀÌƲ */
#subtitle {padding:15px 0 50px;}
#subtitle.title {padding:50px 0;}
#subtitle.prd {padding:80px 0 40px 0;}
#subtitle.prd .fs18 {padding:15px 0 0 0;}

/* ¼­ºêž */
.sub_top {height:405px;}


/*** °øÅë css ***/
.basic_cont{margin:0 auto 120px;}

.parag_txt > p + p {margin-top:15px;}

.dott_list li {padding-left:12px;}
.dott_list li + li {margin-top:4px;}
.dott_list li::before {top:11px}


/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.policy_cont{}
.policy_cont p.cont_tit {padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {padding:20px; grid-template-columns:repeat(1, 1fr); gap:5px;}


/* °Ë»ö°á°ú */
.search .fs34 {margin-bottom:10px;}
.search .dep_cont {margin-bottom:70px;}

}


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

/* ¼­ºêž */
#sub_visual {height:400px; padding-top:58px;} 
#sub_visual .visual_in {top:50%;}
#sub_visual .v_txt p {padding:10px 0 0; text-shadow:5px 0 10px var(--black);}
#sub_visual .v_txt p br {display:none;}
#sub_visual .v_bg {top:56px; height:calc(100% - 56px);}
#sub_visual .v_bg .bg {background-position:60% top;}


/* PC lnb */
.lnb .lnb_in ul li {height:54px;}
.lnb .lnb_in ul li a {padding:12px 15px;}

.lnb_area {padding-top:58px;}

/* ¸ð¹ÙÀÏ lnb */
.mobile_snb {display:block;}
.mobile_snb a.home {display:none;}
.mobile_snb .tbox{display:flex;}
.mobile_snb .tbox .box {width:50%; min-width:auto; box-sizing:border-box;}
.mobile_snb .tbox .box::before {display:none;}
.mobile_snb .tbox .box .dropLst {position: relative;}
.mobile_snb .tbox .box .dropLst .title {line-height:50px; padding:0 40px 0 10%;}
.mobile_snb .tbox .box .dropLst .title:after {right:10%;}

.mobile_snb .tbox .box.dep1 .dropLst .title {background:var(--grayBg); color:var(--main);}
.mobile_snb .tbox .box.dep2 .dropLst .title {background:var(--main); color:var(--white);}
.mobile_snb .tbox .box .dropLst .dlst {top:50px; width: 200%; background:var(--white); padding:0; box-shadow:0 20px 20px rgba(0,0,0,.05);}
.mobile_snb .tbox .box.dep2 .dropLst .dlst{left: -100%;}
.mobile_snb .tbox .box .dropLst .dlst ul li a {padding: 0 5%; line-height:50px;}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on {background:var(--main); color:var(--white);}

/** Á¦Ç° ¼Ò°³ ÂÊ lnb**/
.prd_lnb {bottom:0; width:100%;}
.prd_lnb .mobile_snb {gap:0;}
.prd_lnb .mobile_snb a.home {display:none;}
.prd_lnb .mobile_snb .tbox {width:100%; gap:0;}
.prd_lnb .mobile_snb .tbox .box {border-radius:0; padding:0; width:50%; max-width:100%;}
.prd_lnb .mobile_snb .tbox .box.dep3, .prd_lnb .mobile_snb .tbox .box.dep4 {display:none;}
.prd_lnb .mobile_snb .tbox .box::last-child {max-width:100%;}
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst {top:50px; border-radius:0;} /* box-shadow:0 20px 20px rgba(0,0,0,.05);  */
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst ul li + li {margin-top:0;}
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst ul li a {padding: 0 5%; line-height: 50px;}

#contents.support .mobile_snb {display:block;}
#contents.support .lnb {display:none;}

/* ŸÀÌƲ */
#subtitle {padding:40px 0;}
#subtitle.title {padding:40px 0;}
#subtitle.prd {padding:40px 0 30px 0;}
#subtitle.prd .fs18 {padding:10px 0 0 0;}
#subtitle.prd .fs18 br {display:none;}

/** ¼­ºêž **/
.sub_top {height:auto; padding:65px 0;}

/*** °øÅë css ***/
.basic_cont {margin:0 auto 80px;}

.parag_txt > p + p {margin-top:12px;}

.dott_list li {padding-left:10px;}
.dott_list li + li {margin-top:3px;}
.dott_list li::before {width:3px; height:3px; top:9px}


/* °¶·¯¸®2(¹è³Ê) */
.gallery_roll{}
.gallery_roll .roll .txtArea{padding:10px;}
.gallery_roll .slick-prev{left:10px;}
.gallery_roll .slick-next{right:10px;}
.gallery_nav{margin:10px -2px 0; width:calc(100% + 4px);}
.gallery_nav .roll{margin:0 2px;}


/* °³ÀÎÁ¤º¸Ã³¸®¹æħ */
.privacy_list {display:none;}


/* °Ë»ö°á°ú */
.search .fs34 {margin-bottom:5px;}
.search .dep_cont {margin-bottom:40px;}


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

#sub_visual .v_txt p br {display:none;}

#subtitle {padding: 40px 0 30px;}
#subtitle.prd {padding:40px 0 25px 0;}


/* ¸ð¹ÙÀÏ lnb */
.mobile_snb .tbox .box .dropLst .title {line-height:45px;}
.mobile_snb .tbox .box .dropLst .dlst {top:45px;}
.mobile_snb .tbox .box .dropLst .dlst ul li a {line-height:45px;}

.prd_lnb .mobile_snb .tbox .box .dropLst .dlst {top:45px;}
.prd_lnb .mobile_snb .tbox .box .dropLst .dlst ul li a {line-height:45px;}


}


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




}