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

.header.fixed{background:var(--white); transition:all .3s;}
.header.fixed::after{opacity: 1; visibility:visible; background:var(--border);}

.container{padding: 78px 0 0;}

.lnb{position: relative; z-index: 9999;}
.search_none .lnb{display: none;}
.lnb::before{content:''; display: block; width: 100%; height: 1px; background:var(--border); position: absolute; left:0; top:0;}
.lnb::after{content:''; display: block; width: 100%; height: 1px; background:var(--border); position: absolute; left:0; bottom:0;}
.lnb .lnb_in{display: flex; padding: 0 0 0 40px; box-sizing:border-box;}
.lnb .lnb_in .home{display: block; width: 54px; height:54px; position:relative; transition:all .3s linear; font-size:0; opacity: 0.4; color:var(--black);}
.lnb .lnb_in .home:hover{opacity: 1;}
.lnb .lnb_in .home::after{content:'\e58a';  display: block; width: 100%; height: 100%; line-height: 54px; font-size:24px; text-align:center; font-family:var(--icon); position: absolute; left:0; top:0; color:inherit;}
.lnb .lnb_in article{box-sizing:border-box; position: relative; }
.lnb .lnb_in .dep1{width: 280px; position: relative;}
.lnb .lnb_in .dep1::before{content:''; display: block; width: 1px; height: 100%; background:var(--border); position: absolute; left: 0; top:0;}
.lnb .lnb_in .dep1::after{content:''; display: block; width: 1px; height: 100%; background:var(--border); position: absolute; right: 0; top:0;}
.lnb .lnb_in .dep1 .now-location{font-size:14px; letter-spacing: var(--letter-spacing-none); line-height: 54px; font-weight: 400; color:var(--light); font-family:var(--eng); position: relative; box-sizing:border-box; padding: 0 40px 0 15px; cursor:pointer; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.lnb .lnb_in .dep1 .now-location::after{content:'\e313'; display: block; width: 22px; height: 22px; line-height: 22px; font-size:22px; text-align:center; font-family:var(--icon); position: absolute; right: 10px; top:50%; margin-top: -11px; color:var(--black); opacity: 0.25; transition:all .3s;}
.lnb .lnb_in .dep1 .now-location.on::after{opacity: 1; transform:rotate(180deg);}
.lnb .lnb_in .dep1 .dep1-menu{display: none; position: absolute; left: 0; top:54px; width: 100%; border:1px solid var(--border); border-top: 0; background:var(--white); box-sizing:border-box; z-index: 9999;}
.lnb .lnb_in .dep1 .dep1-menu.on{display: block;}
.lnb .lnb_in .dep1 .dep1-menu ul{padding:20px 15px; box-sizing:border-box;}
.lnb .lnb_in .dep1 .dep1-menu ul li{line-height: 120%;}
.lnb .lnb_in .dep1 .dep1-menu ul li + li{margin-top: 10px;}
.lnb .lnb_in .dep1 .dep1-menu ul li a{display: block; font-size:14px; letter-spacing: var(--letter-spacing-none); line-height: 150%; font-weight: 400; color:var(--basic); font-family:var(--eng); box-sizing:border-box; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; transition:all .3s;}
.lnb .lnb_in .dep1 .dep1-menu ul li a:hover{color:var(--main);}
.lnb .lnb_in .dep1 .dep1-menu ul li a.on{color:var(--main) !important; font-weight: 500;}
.lnb .lnb_in .dep2{width: calc(100% - 280px); padding: 0 30px; overflow:hidden;}
.lnb .lnb_in .dep2 .dep2-menu{}
.lnb .lnb_in .dep2 .dep2-menu .swiper-wrapper{justify-content: flex-start; text-align:left;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide{width: auto;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide a{display: block; font-size:14px; letter-spacing: var(--letter-spacing-none);  font-family:var(--eng); font-weight: 400; color:var(--light); line-height: 54px; margin: 0 11px; padding:0; box-sizing:border-box; position: relative; transition:all .3s; text-transform: uppercase;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide a::after{content:''; display: block; width: 0; height: 2px; background:var(--main); position: absolute; left:50%; bottom: 0; transform:translateX(-50%); transition:width 0.3s linear;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide.hover a{color:var(--white) !important; font-weight: 900 !important; padding: 0 10px;}
.lnb .lnb_in .dep2 .dep2-menu.ver2 .swiper-slide a::after{display: none;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide.hover a::before{content:''; display: block; width: 100%; height: 28px; border-radius:28px; background:var(--main); position: absolute; left:0; top: 50%; margin-top: -14px; z-index: -1;}


.lnb .lnb_in .dep2 .dep2-menu .swiper-slide.on a{font-weight: 700; color:var(--main) !important;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide.on a::after{width: 100%;}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide a:hover{color:var(--black);}

.subtitle{padding:80px 0 50px; text-align:left;}
.subtitle h2{font-size:4.111rem; font-weight: 800; font-family:var(--eng); color:var(--black); text-transform: uppercase; line-height:120%;}


.sub_info{padding: 0 0 40px;}
.sub_info.ver2{padding: 0 0 60px;}
.sub_info h3{font-weight: 300;}
.sub_info h3.eng{font-family:var(--eng); letter-spacing: 0;}
.sub_info p{font-weight: 300; color:var(--basic); padding: 15px 0 0;}

.form_cont{display:flex; flex-wrap:wrap;}
.form_cont > div{box-sizing:border-box; width: calc(50% - 10px);}
.form_cont .txt_area{padding: 0 50px 0 0;}
.form_cont .txt_area h3{font-weight: 300;}
.form_cont .txt_area p{padding: 15px 0 0;}
.form_cont .form_area{}

.sub_cate_wrap{text-align:center; padding: 20px 0; box-sizing:border-box; background:var(--white); position:sticky; top:0; left:0; transition:all 0.5s; z-index:99; overflow: hidden;}
.sub_cate_wrap::before{content:''; display: block; width: 100%; height: 1px; background:var(--border); position: absolute; left:0; bottom:0; opacity: 0; transition:all 0.3s;}
.sub_cate_wrap.fixed{transition:all 0.5s;}
.sub_cate_wrap.fixed::before{opacity: 1; transition:all 0.3s;}
.sub_cate {display:flex; width:100%; max-width:100%;}
.sub_cate ul {width:100%;}
.sub_cate ul li {width:auto; margin: 0 20px 0 0;}
.sub_cate ul li a {white-space:nowrap; font-size:0.889rem; font-family:var(--eng); letter-spacing: 0.32px; display: block;	text-transform: uppercase; color:var(--light); padding: 6px 18px; box-sizing:border-box; border-radius:30px;}
.sub_cate ul li a.on {color: var(--white); background:var(--main); font-weight: 800;}


.dot-item{font-size:1rem; line-height: 150%; letter-spacing: var(--letter-spacing-default); color:var(--basic); padding-left: 10px; box-sizing:border-box; position: relative;}
.dot-item::before{content:''; display: inline-block; width: 3px; aspect-ratio:1/1; background:var(--main); position: absolute; left:0; top:12px;}
.dot-item ~ .dot-item{margin-top: 10px;}


.title_area{padding: 0 0 60px;}
.title_area h4{padding: 0 0 15px; font-weight: 800; color:var(--main); font-family:var(--eng); letter-spacing: 0;}
.title_area h3{font-weight: 300; color:var(--black);}
.title_area p{color:var(--basic); font-weight: 300; padding: 15px 0 0;}


.stitArea{padding: 0 0 40px;}


/* SEND MESSAGE */
.message_banner{padding: 160px 0; background:url('/img/message_bg.jpg') no-repeat center/cover;}
.message_banner .basic_in{display: flex; gap:30px 70px; align-items:center; justify-content: space-between;}
.message_banner .tit{display: flex; gap:15px 70px; flex-wrap:wrap; align-items:center;}
.message_banner .tit h3{color:var(--white); font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: 120%;}
.message_banner .tit p{color:var(--white); font-weight: 300; text-wrap: balance;}
.message_banner .btn_area{}
.message_banner .more_btn{width: 230px; height: 64px;}
.message_banner .more_btn i{width: 22px; height: 22px; margin-top: -11px; }
.message_banner .more_btn i::after{ font-size:22px; line-height: 22px;}



.responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 100; display:none;}
.responsive-dim .stock-scroll-drag-guide{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);}

.stock-scroll-drag-guide {display:flex; justify-content:center;}
	.stock-scroll-drag-guide .stock-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.stock-scroll-drag-guide .stock-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:rgba(255,255,255,0.5); content:""; border-radius:5px;}
	.stock-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:stock-drag-hand 3s both infinite; }
	.stock-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color:#fff; border-radius:5px; opacity:1; }
	.stock-scroll-drag-guide .drag-tail .hand-icon{margin-top: 5px; display: block;}
	@keyframes stock-drag-hand {
		0% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		10% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}

/* ��������ó����ħ */
.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:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 




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


.form_cont .txt_area h3{text-wrap: balance;}
.form_cont .txt_area h3 br{display: none;}
.form_cont .txt_area p br{display: none;}

.news_card_wrap{gap: 40px 24px;}

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



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


.form_cont{}
.form_cont > div{width: 100%;}
.form_cont .txt_area{padding: 0 0 40px;}

.news_card_wrap{grid-template-columns: repeat(2, 1fr); gap: 36px 20px;}

}

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

.subtitle{padding:60px 0 40px;}
.subtitle h2{font-size:3.333rem;}

.stitArea{padding: 0 0 30px;}

.lnb{}
.lnb .lnb_in{padding: 0 0 0 30px;}
.lnb .lnb_in .dep1{width: 240px;}
.lnb .lnb_in .dep2{width: calc(100% - 240px); padding: 0 20px;}

.sub_info{padding: 0 0 30px;}
.sub_info.ver2{padding: 0 0 40px;}
.sub_info p{padding: 10px 0 0;}


.form_cont{}
.form_cont .txt_area{padding: 0 0 30px;}
.form_cont .txt_area p{padding: 10px 0 0;}
.form_cont .form_area{}


.sub_cate_wrap{padding: 15px 0;}
.sub_cate ul li {margin: 0 10px 0 0;}



.dot-item::before{top:8px;}

.title_area{padding: 0 0 40px;}
.title_area h4{padding: 0 0 10px;}
.title_area p{padding: 10px 0 0;}



/* SEND MESSAGE */
.message_banner{padding: 100px 0;}
.message_banner .basic_in{gap:30px 50px;}
.message_banner .tit{gap:15px 50px;}
.message_banner .more_btn{width: 180px; height: 54px; padding:0 25px;}
.message_banner .more_btn i{right: 25px;}

.news_card_wrap{gap: 30px 16px;}
.news_card_txt{padding: 16px 0 0;}

/* ��������ó����ħ */
.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){


.container{padding: 56px 0 0;}

.subtitle{padding:40px 0 25px;}
.subtitle h2{font-size:2.778rem;}




.lnb{}
.lnb .lnb_in{flex-wrap:wrap; padding: 0;}
.lnb .lnb_in .home{display: none;}
.lnb .lnb_in .dep1{width: 100%;}
.lnb .lnb_in .dep1::before{display: none;}
.lnb .lnb_in .dep1::after{display: none;}
.lnb .lnb_in .dep1 .now-location{line-height: 45px; padding: 0 40px 0 20px;}
.lnb .lnb_in .dep1 .now-location::after{right: 20px;}
.lnb .lnb_in .dep1 .dep1-menu{top:45px; border-left:0; border-right:0;}
.lnb .lnb_in .dep1 .dep1-menu ul{padding:10px 20px 15px;}
.lnb .lnb_in .dep1 .dep1-menu ul li + li{margin-top: 8px;}
.lnb .lnb_in .dep2{width: 100%; padding: 0 20px; border-top: 1px solid var(--border);}
.lnb .lnb_in .dep2 .dep2-menu .swiper-slide a{line-height: 45px; margin: 0 15px 0 0;}



.sub_info{padding: 0 0 20px;}
.sub_info.ver2{padding: 0 0 30px;}
.sub_info p{padding: 6px 0 0;}


.stitArea{padding: 0 0 20px;}

.form_cont{}
.form_cont .txt_area{padding: 0 0 20px;}

.sub_cate_wrap{padding: 10px 0;}
.sub_cate ul li {margin: 0 5px 0 0;}
.sub_cate ul li a {padding: 6px 12px;}

.dot-item::before{top:8px;}
.dot-item ~ .dot-item{margin-top: 6px;}

.title_area{padding: 0 0 25px;}
.title_area h3 br{display: none;}
.title_area h4{padding: 0 0 6px;}
.title_area p{padding: 6px 0 0;}


/* SEND MESSAGE */
.message_banner{padding: 70px 0;}
.message_banner .basic_in{gap:20px; flex-wrap:wrap; justify-content: center;}
.message_banner .tit{gap:10px; width: 100%; text-align:center; justify-content: center;}
.message_banner .tit h3{width: 100%;}
.message_banner .more_btn{width: 150px; height: 45px; padding:0 20px;}
.message_banner .more_btn i{width: 22px; height: 22px; margin-top: -11px; right: 20px;}
.message_banner .more_btn i::after{ font-size:22px; line-height: 22px;}

.news_cont .sub_info h3{font-size: 2rem;}
.news_cont .sub_info p{font-size: 0.95rem;}
.news_cont .sub_info{padding-bottom: 30px;}
.news_cont .news_list{padding-top: 30px;}
.news_card_wrap{grid-template-columns: 1fr !important; gap: 0 !important;}
.news_card > a{display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; padding: 16px 0 !important; border-bottom: 1px solid var(--border) !important;}
.news_card:first-child > a{border-top: 1px solid var(--border) !important;}
.news_card_img{width: 110px !important; min-width: 110px !important; aspect-ratio: 1/1 !important; flex-shrink: 0 !important;}
.news_card_txt{flex: 1 !important; padding: 0 !important; min-width: 0 !important;}
.news_card_txt h4{font-size: 0.95rem; -webkit-line-clamp: 2;}
.news_card_txt p{font-size: 0.85rem; padding: 5px 0 0; -webkit-line-clamp: 2;}
.news_card_txt .news_date{font-size: 0.8rem; padding: 6px 0 0;}


}

/* =====================================================
   NEWS
====================================================== */
.news_cont{}
.news_cont .sub_info{border-bottom: 1px solid var(--border); padding-bottom: 50px;}
.news_cont .news_list{padding-top: 50px;}

.news_card_wrap{display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 30px; padding: 0;}
.news_card{list-style: none; min-width: 0;}
.news_card > a{display: block; text-decoration: none; color: inherit;}
.news_card > a:hover .news_card_img img{transform: scale(1.05);}
.news_card > a:hover .news_card_txt h4{color: var(--main);}

.news_card_img{width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--grayBg);}
.news_card_img img{width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}

.news_card_txt{padding: 20px 0 0;}
.news_card_txt h4{font-size: 1.333rem; font-weight: 700; color: var(--black); line-height: 150%; letter-spacing: var(--letter-spacing-default); transition: color 0.3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.news_card_txt p{font-size: 0.889rem; font-weight: 400; color: var(--light); line-height: 160%; padding: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.news_card_txt .news_date{display: block; padding: 14px 0 0; color: var(--light); font-family: var(--eng); letter-spacing: 0; font-weight: 300;}

/* 3컬럼 데스크탑에서만 이미지 86% */
@media all and (min-width: 1301px){
	.news_card_img{width: 86%;}
}

/* 스크롤 순차 등장 */
.news_card{opacity: 0; transform: translateY(30px); transition: opacity 0.55s ease, transform 0.55s ease;}
.news_card.is-visible{opacity: 1; transform: translateY(0);}

.news_empty{grid-column: 1 / -1; padding: 80px 0; text-align: center; color: var(--light);}

/* =====================================================
   NEWS VIEW
====================================================== */
.news_view_cont{display: flex; flex-direction: column; align-items: center;}
.news_view_cont .sub_info{width: 100%; align-self: flex-start;}

.news_view_body{width: 100%; max-width: 1290px; padding: 90px 0 0;}

.news_view_head{text-align: center; padding: 45px 0 60px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.news_view_subject{font-size: 2.5rem; font-weight: 700; color: var(--black); line-height: 150%; letter-spacing: var(--letter-spacing-default);}
.news_view_date{display: block; margin: 24px 0 0; font-size: 1.333rem; color: var(--light); font-family: var(--eng); letter-spacing: 0; font-weight: 300;}

.news_view_content{width: 100%; max-width: 860px; margin: 0 auto; padding: 75px 0 90px; line-height: 180%; color: var(--basic); word-break: keep-all; letter-spacing: var(--letter-spacing-default); text-align: center; overflow-x: hidden;}
.news_view_content img{max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 30px auto;}
.news_view_content table{max-width: 100% !important; width: 100% !important; table-layout: fixed; word-break: break-all;}
.news_view_content *{max-width: 100%; box-sizing: border-box;}

/* 이전글 / 다음글 */
.news_nav{width: 100%; max-width: 1290px; border-top: 1px solid var(--border);}
.news_nav_item{border-bottom: 1px solid var(--border);}
.news_nav_item a,
.news_nav_item .nav_empty{display: flex; align-items: center; gap: 45px; padding: 30px 0; text-decoration: none; color: inherit;}
.news_nav_item a:hover .nav_subject{color: var(--main);}
.nav_label{flex-shrink: 0; font-size: 1.167rem; font-weight: 700; font-family: var(--eng); letter-spacing: 0.05em; color: var(--light); text-transform: uppercase; width: 60px;}
.nav_subject{font-size: 1.417rem; color: var(--black); line-height: 150%; transition: color 0.3s;}
.news_nav_item .nav_empty .nav_subject{color: var(--light);}

/* 목록 버튼 */
.news_view_list_btn{display: flex; justify-content: center; padding: 75px 0 0;}

@media all and (max-width: 980px){
	.news_view_body{padding: 60px 0 0;}
	.news_view_head{padding: 30px 0 44px;}
	.news_view_subject{font-size: 1.889rem;}
	.news_view_date{font-size: 1rem;}
	.news_view_content{padding: 54px 0 70px; font-size: 1rem; line-height: 175%;}
	.nav_subject{font-size: 1.111rem;}
}
@media all and (max-width: 680px){
	.news_view_body{padding: 40px 0 0;}
	.news_view_head{padding: 24px 0 28px; text-align: left;}
	.news_view_subject{font-size: 1.222rem; line-height: 140%;}
	.news_view_date{font-size: 0.833rem; margin: 14px 0 0;}
	.news_view_content{padding: 30px 0 40px; font-size: 0.889rem; line-height: 170%; text-align: left !important; word-break: break-all !important;}
	.news_view_content p,
	.news_view_content div,
	.news_view_content span{text-align: left !important; word-break: break-all !important;}
	.news_view_content img{width: 100% !important; height: auto !important; margin: 16px 0 !important;}
	.news_nav_item a,
	.news_nav_item .nav_empty{gap: 16px; padding: 20px 0;}
	.nav_label{width: 36px; font-size: 0.778rem;}
	.nav_subject{font-size: 0.889rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
	.news_view_list_btn{padding: 40px 0 0;}
}