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

@keyframes subVisualBgIn { 0% { opacity: 0; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes subVisualTxtIn { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes subVisualTxtInH3 { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes subVisualLnbIn { 0% { opacity: 0; transform: translate(-50%, 24px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes subVisualLnbInMo { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

#visual{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 560px; box-sizing: border-box;}
#visual .v_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background: var(--bk000); pointer-events: none; overflow: hidden;}
#visual .v_bg .bg{width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform-origin: center center; animation: subVisualBgIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0s both;}
#visual .v_txt{position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; text-align: center; color: var(--white);}
#visual .v_txt p{color: var(--white); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; animation: subVisualTxtIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;}
#visual .v_txt h3{color: var(--white); animation: subVisualTxtInH3 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;}

#visual .lnb{position: absolute; left: 50%; bottom: 50px; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box; background: rgb(1 44 123 / 90%); max-width:690px; width: 90%; animation: subVisualLnbIn 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;}
#visual .lnb dl{display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; width: 100%;}
#visual .lnb dl dt{display: flex; flex-direction: row; align-items: stretch;}
#visual .lnb dl dt a.home{display: flex; align-items: center; justify-content: center; width: 60px; min-height: 60px; box-sizing: border-box; text-decoration: none; transition: all .3s ease;}
#visual .lnb dl dt a.home:hover{background: var(--main);}
#visual .lnb dl dt a.home svg{display: block; width: 18px; height: 18px; fill: var(--white);}
#visual .lnb dl dd{position: relative; display: flex; flex-direction: column; align-items: stretch; width: calc((100% - 60px)/2); box-sizing: border-box;}
#visual .lnb dl dd button{position: relative; width: 100%; padding: 0 60px 0 25px; box-sizing: border-box; border: 0; background: transparent; color: var(--white); font-family: var(--kor); font-size: 1rem; line-height: 60px; font-weight: 400; letter-spacing: var(--letter-spacing-button); cursor: pointer; text-align: left; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#visual .lnb dl dd button::after{content: '\e5c5'; display: block; flex-shrink: 0; width: 18px; height: 18px; font-family: var(--icon); font-size: 18px; font-weight: 400; line-height: 18px; text-align: center; font-style: normal; color: var(--white); position: absolute; right: 25px; top:50%; margin-top: -9px; transition: transform 0.25s ease;}
#visual .lnb dl dd button.on::after{transform: rotate(180deg);}
#visual .lnb .dlst{display: none; position: absolute; left: 0; top: 100%; width: 100%; box-sizing: border-box; background: var(--white); box-shadow: var(--shadow); z-index: var(--z-dropdown);}
#visual .lnb .dlst.on{display: block;}
#visual .lnb .dlst ul{display: block;}
#visual .lnb .dlst ul li{display: block;}
#visual .lnb .dlst ul li a{display: block; padding: 14px 25px; box-sizing: border-box; color: var(--black); font-size: 0.889rem; font-weight: 400; line-height: 166.7%; letter-spacing: var(--letter-spacing-body); text-decoration: none; transition: color 0.2s ease, background 0.2s ease;}
#visual .lnb .dlst ul li a:hover{background: var(--grayBg);}
#visual .lnb .dlst ul li a.on{color: var(--main); font-weight: 700;}



/* 타이틀 */
.eng-tit{display: block; color:var(--main); font-weight: 700; text-transform: uppercase; padding-bottom: 10px;}
.title-area{padding: 0 0 60px; text-align:center;}
.title-area h4{color:var(--black);}
.title-area p{padding-top: 20px;}


.date{font-size: 0.778rem; font-family: var(--eng); font-weight: 400; letter-spacing: 0.02em; color:var(--light);}
.date::before{content:'\f540'; display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; font-size:18px; font-weight: 400; font-family:var(--icon); color:inherit;}



/* 기본 레이아웃 */
.basic_layout{display: flex;}
.basic_layout ~ .basic_layout{padding-top: 100px;}
.basic_layout .tit-area{width: 405px; box-sizing: border-box; padding:0 25px 0 0;}
.basic_layout .tit-area .sticky_in{position: sticky; top:150px; transition:all .4s;}
.basic_layout .tit-area h4{color:var(--black);}
.basic_layout .tit-area p{padding: 15px 0 0;}
.basic_layout .con-area{width: calc(100% - 405px);}

/* 도트 */
.dots{box-sizing:border-box; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; width:100%;}
.dots > li{box-sizing:border-box; position:relative; margin:0; padding:0 0 0 10px; width:100%; font-size:0.889rem; font-weight:400; line-height:160%; color:rgba(16,16,16,0.7); position: relative;}
.dots > li::before{content:''; display: block; width: 3px; aspect-ratio:1/1; background:var(--main); position: absolute; left:0; top:11px;}
.dots > li .dots-strong{font-weight: 600; display: block; color:var(--black);}
.dots > li .dots-note{font-size:inherit; letter-spacing: inherit; line-height: inherit; color:var(--light);}
.dots > li .dots-line{font-size:inherit; letter-spacing: inherit; line-height: inherit; padding-left: 8px; box-sizing:border-box; color:var(--light); position: relative;}
.dots > li .dots-line::before{content:''; display: block; width: 4px; height: 1px; background:var(--light); position: absolute; left:0; top:11px;}
.dots > li .dots-line,
.dots > li .dots-note{margin-top: 4px;}

/* 탭메뉴 */
.tab_menu{min-width: 0; position: relative; background-color: var(--grayBg); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none;}
.tab_menu::-webkit-scrollbar{display: none; width: 0; height: 0; background: transparent;}
/* .tab_menu::before{content:''; display: block; max-width:1590px; width: 90%; height: 1px; background:var(--border); position: absolute; left:50%; transform: translateX(-50%); bottom: 0;} */
.tab_menu_in{position: relative;  min-width: 0;}
.tab_menu_in ul{display: flex; flex-direction: row; flex-wrap: nowrap; min-width: 100%; box-sizing: border-box;}
.tab_menu_in ul li{flex: 1; text-align: center; box-sizing: border-box;}
.tab_menu_in ul li a{display: flex; align-items: center; justify-content: center; width: 100%; padding: 21px 10px; box-sizing: border-box; font-size: 1rem; font-weight: 600; line-height: 150%; letter-spacing: var(--letter-spacing-button); color: var(--basic); text-decoration: none; background: var(--white); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; width: 100%; height: 100%;}
.tab_menu_in ul li:first-child a{border-left: 1px solid var(--border);}
.tab_menu_in ul li.hover a{color: var(--white) !important; background: var(--main); border-color: var(--main); border-left-color: var(--main); border-right-color: var(--main);}
.tab_menu_in ul li:not(.hover) a:hover{color: var(--black);}


/* 제품 카테고리 */
.prdCateNav{position: relative; width: 100%; min-width: 0; box-sizing: border-box;}
.prdCateNav__d1{background: var(--grayBg); width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none;}
.prdCateNav__d1Inner{max-width: 1590px; margin: 0 auto; width: 90%; min-width: 0; box-sizing: border-box;}
.prdCateNav__d1::-webkit-scrollbar{display: none; width: 0; height: 0; background: transparent;}
.prdCateNav__d1::-webkit-scrollbar-track{display: none; background: transparent;}
.prdCateNav__d1::-webkit-scrollbar-thumb{display: none; background: transparent;}
.prdCateNav__d1List{display: flex; flex-direction: row; flex-wrap: nowrap; min-width: 100%; box-sizing: border-box;}
.prdCateNav__d1Item{flex: 1; text-align: center; box-sizing: border-box;}
.prdCateNav__d1Link{display: flex; align-items: center; justify-content: center; width: 100%; padding: 21px 10px; box-sizing: border-box; font-size: 1rem; font-weight: 600; line-height: 150%; letter-spacing: var(--letter-spacing-button); color: var(--basic); text-decoration: none; background: var(--white); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; width: 100%; height: 100%;}
.prdCateNav__d1Item:first-of-type .prdCateNav__d1Link{border-left: 1px solid var(--border);}
.prdCateNav__d1Item.is-active .prdCateNav__d1Link{color: var(--white); background: var(--main); border-color: var(--main);}
.prdCateNav__d1Item:not(.is-active) .prdCateNav__d1Link:hover{color: var(--black);}
.prdCateNav__d2{background: var(--grayBg); max-width: 1590px; margin: 0 auto; width: 90%; box-sizing: border-box; min-width: 0; }
.prdCateNav__d2Inner{padding: 0 10%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none;}
.prdCateNav__d2Inner::-webkit-scrollbar{display: none; width: 0; height: 0; background: transparent;}
.prdCateNav__d2Inner::-webkit-scrollbar-track{display: none; background: transparent;}
.prdCateNav__d2Inner::-webkit-scrollbar-thumb{display: none; background: transparent;}
.prdCateNav__d2List{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; flex-shrink: 0; gap: 40px; min-width: 100%; width: max-content; padding: 0; margin: 0; box-sizing: border-box;}
.prdCateNav__d2Item{flex: 0 0 auto; flex-shrink: 0; text-align: center; box-sizing: border-box;}
.prdCateNav__d2Link{display: inline-flex; align-items: center; justify-content: center; min-height: 68px; padding: 20px 0; box-sizing: border-box; font-size: 0.889rem; font-weight: 600; line-height: 175%; letter-spacing: 0; color: var(--light); text-decoration: none; text-transform: uppercase; transition: color 0.2s ease, text-decoration 0.2s ease; white-space: nowrap;}
.prdCateNav__d2Link:hover{color:var(--black);}
.prdCateNav__d2Item.is-active .prdCateNav__d2Link{color: var(--main); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;}


/* 뷰페이지 */
.view_ver{}
.view_ver #visual{display: none !important;}

.view_ver .header .gnb ul li > a{color:var(--black);}
.view_ver .header .header_in .logo a svg{filter: brightness(1) invert(0);}
.view_ver .header .header_in .top_util .language_btn dt::after{color:var(--black);}
.view_ver .header .header_in .top_util ul li a path{fill:var(--black);}
.view_ver .header .header_in .top_util ul li.menu_btn a p{background:var(--black);}





/* 이용안내 */
.other #visual{height: auto; background:var(--white); padding: 200px 0 60px;}
.other #visual .v_bg{display: none !important;}
.other #visual .lnb{display: none !important;}
.other #visual .v_txt{position: relative; left: auto; top:auto; transform:translate(0,0);}
.other #visual .v_txt p{color:var(--main);}
.other #visual .v_txt h3{color:var(--black);}


.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; letter-spacing:var(--letter-spacing-default); 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; letter-spacing:var(--letter-spacing-default);}
.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;  letter-spacing:var(--letter-spacing-default); line-height:1.7;}

.privacy_list {width:100%; overflow:hidden; clear:both; padding:4% 4% 3% 4%; border:1px solid var(--border); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 


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

/* 기본 레이아웃 */
.basic_layout .tit-area{width: 30%;}
.basic_layout .con-area{width: 70%;}



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



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

/* 기본 레이아웃 */
.basic_layout{flex-wrap:wrap;}
.basic_layout .tit-area{width: 100%; padding:0 0 25px;}
.basic_layout .tit-area p{padding: 10px 0 0;}
.basic_layout .con-area{width: 100%;}

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

	#visual{height: 460px;}
	#visual .lnb{bottom: 30px;}


/* 타이틀 */
.eng-tit{padding-bottom: 6px;}
.title-area{padding: 0 0 40px;}
.title-area p{padding-top: 15px;}

/* 제품 카테고리 */
.prdCateNav__d1Inner{width:100%; max-width:none;}
.prdCateNav__d1List{width:max-content; min-width:100%;}
.prdCateNav__d1Item{flex:0 0 auto;}
.prdCateNav__d2{width:100%; max-width:none;}
.prdCateNav__d2Inner{width:100%; max-width:none; padding:0 5%;}
.prdCateNav__d2List{justify-content:flex-start; width:max-content; min-width:100%;}
.prdCateNav__d1Link{padding: 15px 10px; min-width: 160px; white-space: nowrap;}
.prdCateNav__d2List{gap: 30px;}
.prdCateNav__d2Link{min-height: 50px; padding: 15px 0;}


/* 기본 레이아웃 */
.basic_layout ~ .basic_layout{padding-top: 70px;}
.basic_layout .tit-area{padding:0 0 20px;}
.basic_layout .tit-area p{padding: 6px 0 0;}

/* 도트 */
.dots > li::before{top:9px;}
.dots > li .dots-line::before{top:10px;}


/* 탭메뉴 */
.tab_menu_in ul li a{padding:15px 10px; white-space: nowrap; min-width:160px;}


/* 이용안내 */
.other #visual{padding: 150px 0 40px;}

.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; 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 {margin-bottom:30px;}
.privacy_list li {width:100%;  }
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

	#visual{height: 300px;}
	#visual .v_txt{gap: 6px;}
	
	#visual .lnb{bottom: 20px;}
	#visual .lnb dl dt a.home{width: 50px; min-height: 50px;}
	#visual .lnb dl dt a.home svg{width: 14px; height: 14px;}
	#visual .lnb dl dd{width: calc((100% - 50px)/2);}
	#visual .lnb dl dd button{padding: 0 35px 0 10px; line-height: 50px;}
	#visual .lnb dl dd button::after{width: 14px; height: 14px; font-size: 14px; line-height: 14px; right: 10px; margin-top: -7px;}
	#visual .lnb .dlst ul li a{padding: 10px 15px;}

/* 타이틀 */
.title-area{padding: 0 0 30px;}
.title-area p{padding-top: 10px;}

.date::before{font-size:16px;}

/* 제품 카테고리 */
.prdCateNav__d1Link{min-height: 45px; padding: 10px 10px; min-width: 150px; border-right-width: 1px; border-bottom-width: 1px;}
.prdCateNav__d1Item.is-active .prdCateNav__d1Link{border-bottom-width: 2px;}
.prdCateNav__d2List{gap: 20px;}
.prdCateNav__d2Link{min-height: 40px; padding: 10px 0;}


/* 기본 레이아웃 */
.basic_layout ~ .basic_layout{padding-top: 40px;}


/* 도트 */
.dots > li::before{top:7px;}
.dots > li .dots-line::before{top:8px;}



/* 탭메뉴 */
.tab_menu_in ul li a{padding:12px 10px; min-width:150px;}
.tab_menu_in ul li a::after{height: 2px;}


/* 이용안내 */
.other #visual{padding: 100px 0 30px;}


}