@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 scroll_down {
	0% { transform:translateY(-32px); opacity: 0; }
	50% { transform:translateY(0); opacity: 1;}
	100% { transform:translateY(32px); opacity: 0;}
}

.header.nofixed{top:-200px;}
.header.fixed{background:var(--white); box-shadow: 0 0 20px rgba(34, 34, 34, .1);}
.header.up{box-shadow: 0 0 20px rgba(34, 34, 34, .1);}
.header.fixed .header_in .logo a .jwmt_black{fill:var(--black);}
.header.fixed .header_in .logo a .jwmt_main{fill:var(--main);}
.header.fixed .header_in .top_util ul li a::after{color:var(--black);}
.header.fixed .header_in .top_util ul li.menu_btn a p{background:var(--black);}
.header.fixed .gnb ul li > a{color:var(--black);}

.view_page #visual{display: none !important;}
.view_page .lnb{display: none !important;}
.view_page .mobile_snb{display: none !important;}
.view_page .header{background:var(--white);}
.view_page .header .header_in .logo a .jwmt_black{fill:var(--black);}
.view_page .header .header_in .logo a .jwmt_main{fill:var(--main);}
.view_page .header .header_in .top_util ul li a::after{color:var(--black);}
.view_page .header .header_in .top_util ul li.menu_btn a p{background:var(--black);}
.view_page .header .gnb ul li > a{color:var(--black);}


.search_none #visual{display: none !important;}
.search_none .lnb{display: none !important;}
.search_none .mobile_snb{display: none !important;}
.search_none .header{background:var(--white);}
.search_none .header .header_in .logo a .jwmt_black{fill:var(--black);}
.search_none .header .header_in .logo a .jwmt_main{fill:var(--main);}
.search_none .header .header_in .top_util ul li a::after{color:var(--black);}
.search_none .header .header_in .top_util ul li.menu_btn a p{background:var(--black);}
.search_none .header .gnb ul li > a{color:var(--black);}

/**** S:: 서브틀 ****/
#visual{position: relative; width: 100%; height: var(--fullvh); overflow: hidden; background:var(--black_bg);}
#visual .v_bg{position: absolute; left:0; top:0; width: 100%; height: 100%;}
#visual .v_bg.mo{display: none;}
#visual .v_bg .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; opacity: 0.5; }
#visual .v_bg .bg .in{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size: cover; background-attachment: fixed; background-position:center;}
#visual .v_bg .bg_up{width: 0; z-index: 9; opacity: 1; animation:v_bg 1.2s 0.5s linear; animation-fill-mode:both;}
#visual .visual_in{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); margin-left: -100px; opacity:0; animation:visual_in 1s 1s linear; animation-fill-mode:both; z-index: 10;}

@keyframes visual_in {
	0% { margin-left: -100px; opacity:0; }
	100% { margin-left:0; opacity:1; }
}

@keyframes v_bg {
	0% { width: 0; }
	100% { width: 100%; }
}


#visual .visual_lnb{margin: 0 0 30px;}
#visual .visual_lnb dl{display: flex; align-items:center;}
#visual .visual_lnb dl dt{padding: 0 25px 0 0;}
#visual .visual_lnb dl dt a{display: block; font-size:0; width: 20px; height: 20px; position: relative;}
#visual .visual_lnb dl dt a::after{content:'\e88a'; display: block; width: 100%; height: 100%; line-height:20px; font-size:20px; text-align:center; position: absolute; left:0; top:0; font-family:var(--icon); color:var(--white); transition:all .3s linear; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;}
#visual .visual_lnb dl dt a:hover::after{color:var(--sub);}
#visual .visual_lnb dl dd{position:relative;}
#visual .visual_lnb dl dd:before{content:''; display:block; width:1px; height:14px; background:rgba(255,255,255,.25); position:absolute; left:0; top:50%; margin-top:-7px;}
#visual .visual_lnb dl dd .txt{padding:0 55px 0 25px; box-sizing:border-box; position: relative; font-size:0.889rem; letter-spacing:var(--letter-spacing-default); line-height:120%; color:var(--white); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#visual .visual_lnb dl dd .txt::after{content:'\e313'; display:block; width:18px; height:18px; line-height: 18px; font-size:18px; position: absolute; right:25px; top:50%; margin-top: -9px; transition:all .3s linear; opacity: 0.5; font-family:var(--icon);}
#visual .visual_lnb dl dd .txt.on::after{transform:rotate(180deg); opacity: 1;}
#visual .visual_lnb dl dd .dlst{position: absolute; z-index: 999; margin: 10px 0 0; width: 100%; min-width: 220px; background: rgba(0,0,0,.5); backdrop-filter: blur(5px); padding: 20px 25px; box-sizing:border-box; display: none;}
#visual .visual_lnb dl dd .dlst.on{display: block;}
#visual .visual_lnb dl dd .dlst ul{}
#visual .visual_lnb dl dd .dlst ul li{line-height: 120%;}
#visual .visual_lnb dl dd .dlst ul li + li{margin-top: 6px;}
#visual .visual_lnb dl dd .dlst ul li a{font-size:0.889rem; color:var(--white); transition:all .2s linear; line-height: 150%; letter-spacing:var(--letter-spacing-default);}
#visual .visual_lnb dl dd .dlst ul li a.on{font-weight: 700;}
.search_none #visual .visual_lnb dl dd:last-child{display: none;}

#visual .v_txt{}
#visual .v_txt .fs90{font-weight: 800; color:var(--white);}
#visual .v_txt .fs22{color:var(--white); padding: 30px 0 0; font-weight: 400;}
#visual .scroll_down{position: absolute; left:50%; bottom: 40px; z-index: 9999; transform:translateX(-50%);}
#visual .scroll_down a{display: block; width: 32px; height: 32px; position: relative; overflow: hidden; font-size:0;}
#visual .scroll_down a::after{content: '\ead0'; display: block; width: 100%; height: 100%; font-size: 32px; line-height: 32px; text-align: center; font-family: var(--icon); color:var(--white); font-weight: 400; position: absolute; left: 0; top: 0; animation: scroll_down 1.5s ease-in-out infinite;}

.lnb{display: block; overflow: hidden; position: relative;}
.lnb::before{content:''; display: block; width: 100%; height: 1px; background:var(--border); position: absolute; left:0; bottom: 0;}
.lnb .lnb_in{}
.lnb .lnb_in ul{justify-content: center; white-space: nowrap;}
.lnb .lnb_in ul li{width: auto; padding:0 15px;}
.lnb .lnb_in ul li a{display: block; font-size:1rem; letter-spacing:var(--letter-spacing-default); line-height: 120%; padding:26px 10px; box-sizing:border-box; position: relative; transition:all .3s linear;}
.lnb .lnb_in ul li a::after{content:''; display:block; width:0; height: 3px; background:var(--main); position: absolute; left:0; bottom: 0;}
.lnb .lnb_in ul li a:hover{color:var(--main);}
.lnb .lnb_in ul li.left_linktop a{color:var(--main); font-weight:700;}
.lnb .lnb_in ul li.left_linktop a::after{width: 100%;}

.mobile_snb{display: none;}

#contents{}
/**** E:: 서브틀 ****/



/**** css 공통 ****/
/* 간격 */
.marT60{margin-top: 60px;}

/* 컬러 */
.gra{background: var(--red_gra) !important;}

/* 텍스트 */
.subtitle{text-align:center; padding:0 0 70px;}
.subtitle .fs22{padding:10px 0 0;}
.subtitle .fs20{padding:10px 0 0;}

.gra_text{display: inline-block; background: var(--red_gra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

body{counter-reset: my-counter;}
.number{display: block; width: 50px; height: 50px; border-radius:50%; position: relative; background:var(--main);}
.number::after{counter-increment: my-counter; content: counter(my-counter, decimal-leading-zero); display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; line-height:50px; text-align:center; font-size:1.111rem; font-weight:600; font-family:var(--eng); color:var(--white);}

.dot_list > li{font-size:1rem; letter-spacing: var(--letter-spacing-default); line-height: 160%; box-sizing:border-box; position:relative; padding: 0 0 0 12px; color:rgba(26, 30, 45, 0.7); text-align:left;}
.dot_list > li + li{margin: 7px 0 0;}
.dot_list > li::before{content:''; width:4px; aspect-ratio: 3 / 3; border-radius:50%; background:rgba(26, 30, 45, 0.5); display:block; position: absolute; left: 0; top:0.7rem;}

/* 이미지 */
.image_box{box-sizing:border-box; text-align:center;}
.image_box img{max-width:100%; height: auto;}

/* 탭메뉴 */
.subtab{padding:115px 0 70px; overflow: hidden;}
.subtab .subtab_in{}
.subtab .subtab_in.mo{display: none;}
.subtab .subtab_in ul{display: flex; justify-content: center;}
.subtab .subtab_in ul li{width: auto; box-sizing:border-box; border:1px solid var(--border); margin-left: -1px; position: relative; transition:all .3s linear;}
.subtab .subtab_in ul li a{display: block; font-size:0.889rem; padding: 20px 30px; box-sizing:border-box; letter-spacing:var(--letter-spacing-default); line-height: 150%; transition:all .3s linear; min-width:250px; text-align:center;}
.subtab .subtab_in ul li a:hover{color:var(--black);}
.subtab .subtab_in ul li.on{border-color:var(--main); z-index: 5;}
.subtab .subtab_in ul li.on a{color:var(--main) !important; font-weight: 700;}



/* 테이블 */
.table_wrap{}
.table_wrap .responsive-dim{}
.table_wrap .fs16.right{padding: 5px 0 0;}
.table_style{width:100%; border-collapse:separate; border-spacing:0px; text-align:center; border-top:2px solid var(--main);}
.table_style th{font-size:0.889rem; font-weight: 700; line-height:160%; letter-spacing: var(--letter-spacing-default); box-sizing:border-box; padding:20px 10px 18px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); background: rgba(243, 243, 243, 0.50); color:var(--black);}
.table_style th.last{border-right: 0;}
.table_style td{font-size:1rem; font-weight: 400; line-height:160%; letter-spacing: var(--letter-spacing-default); box-sizing:border-box; padding: 18px 20px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); color:var(--basic);}
.table_style td.last{border-right: 0;}
.table_style td b{font-size:0.889rem; font-weight: 700; line-height: inherit; letter-spacing: inherit; color:var(--black);}
.table_style td b.fs18{font-size:1rem;}



.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;
		}
	}



/* 컨텐츠 */
.basic_style{display: flex;}
.basic_style article{box-sizing:border-box;}
.basic_style .txt_area{width: 34%; padding: 0 50px 0 0;}
.basic_style .txt_area .txt_area_in{position:sticky; top:200px; transition:all .4s;}
.basic_style .txt_area .fs22{padding-bottom: 10px; color:var(--black);}
.basic_style .txt_area .fs40{line-height: 120%;}
.basic_style .txt_area .fs40 span{display: inline-block;}
.basic_style .txt_area .fs18{padding-top: 10px;}
.basic_style .txt_area .fs20{padding-top: 10px;}
.basic_style .txt_area .image_box{margin-top: 50px;}
.basic_style .con_area{width: 66%;}








/* 이용약관, 개인정보취급방침 */
.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:100%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 




.text_info{text-align:right; margin-top: -80px; padding-bottom: 20px;}


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




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




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

/* 컨텐츠 */
.basic_style .txt_area{padding: 0 30px 0 0;}
.basic_style .txt_area .fs40 br{display: none;}

}

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

/**** S:: 서브틀 ****/
#visual .visual_lnb{margin: 0 0 20px;}
#visual .visual_lnb dl{}
#visual .visual_lnb dl dt{padding: 0 15px 0 0;}
#visual .visual_lnb dl dd .txt{padding:0 40px 0 15px;}
#visual .visual_lnb dl dd .txt::after{right:15px;}
#visual .visual_lnb dl dd .dlst{padding: 20px 15px; min-width:180px;}
#visual .v_txt{}
#visual .v_txt .fs22{padding: 20px 0 0;}
#visual .scroll_down{bottom: 30px;}


.lnb{}
.lnb .lnb_in{}
.lnb .lnb_in ul{}
.lnb .lnb_in ul li{padding:0 10px;}
.lnb .lnb_in ul li a{padding:20px 5px;}



/**** E:: 서브틀 ****/





/**** css 공통 ****/

/* 간격 */
.marT60{margin-top: 40px;}

/* 텍스트 */
.subtitle{padding:0 0 50px;}
.subtitle .fs22{padding:8px 0 0;}
.subtitle .fs20{padding:8px 0 0;}

.number{width: 40px; height: 40px;}
.number::after{line-height:40px; font-size:1rem;}

.dot_list > li::before{top:0.6rem;}


/* 탭메뉴 */
.subtab{padding:90px 0 40px;}
.subtab .subtab_in{}
.subtab .subtab_in ul{}
.subtab .subtab_in ul li{}
.subtab .subtab_in ul li a{padding: 15px 20px; min-width:200px;}


/* 테이블 */
.table_style{}
.table_style th{padding:15px 10px;}
.table_style td{padding: 15px 15px;}


/* 컨텐츠 */
.basic_style{flex-wrap:wrap;}
.basic_style .txt_area{width: 100%; padding: 0 0 30px; text-align:center;}
.basic_style .txt_area .fs22{padding-bottom: 6px;}
.basic_style .txt_area .fs18{padding-top: 6px;}
.basic_style .txt_area .fs20{padding-top: 6px;}
.basic_style .txt_area .image_box{margin: 20px auto 0;}
.basic_style .con_area{width: 100%;}



/* 이용약관, 개인정보취급방침 */
.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){


/**** S:: 서브틀 ****/

#visual .v_bg.mo{display: block;}
#visual .v_bg.pc{display: none;}

#visual .v_bg .bg{opacity: 1;}
#visual .v_bg .bg::after{content:''; display: block; width: 100%; height: 100%; background:rgba(0,0,0,.4); position: absolute; right:0; top:0; animation:v_bg2 0.8s 0.2s linear; animation-fill-mode:both;}
#visual .v_bg .bg .in{background-attachment: scroll;}
#visual .v_bg .bg_up{display: none;}


@keyframes v_bg2 {
	0% { width: 100%; }
	100% { width: 0; }
}

#visual .visual_lnb{display: none;}
#visual .v_txt{}
#visual .v_txt .fs22{padding: 10px 0 0;}

#visual .scroll_down{bottom: 20px;}
#visual .scroll_down a{width: 25px; height: 25px;}
#visual .scroll_down a::after{font-size: 25px; line-height: 25px;}

.lnb{display: none;}

.mobile_snb {display:block;}
.mobile_snb .tbox{display:flex;}
.mobile_snb .tbox .box{width:50%; box-sizing:border-box;}
.mobile_snb .tbox .box .dropLst{position: relative;}
.mobile_snb .tbox .box .dropLst .title{display:block; font-size:1rem; font-weight: 700; line-height:50px; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; padding:0 40px 0 10%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; position: relative;}
.mobile_snb .tbox .box .dropLst .title:after{content:'\e313'; display:block; width:20px; height:20px; line-height: 20px; font-size:20px;  position:absolute; right:8%; top:50%; margin-top: -10px; font-weight: 400; font-family:var(--icon); transition:all .3s linear; opacity: 1;}
.mobile_snb .tbox .box.dep1 .dropLst .title{background:var(--white); color:var(--main);}
.mobile_snb .tbox .box.dep2 .dropLst .title{background:var(--main); color:var(--white);}
.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:50px; width: 200%; background:var(--white); z-index: 9999999; 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{display: block; padding: 0 5%; font-size:1rem; line-height:50px; letter-spacing:var(--letter-spacing-default); 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{background:var(--main); color:var(--white);}

.search_none .mobile_snb{display: none;}


/**** E:: 서브틀 ****/



/**** css 공통 ****/

/* 간격 */
.marT60{margin-top: 20px;}

/* 텍스트 */
.subtitle{padding:0 0 30px;}
.subtitle .fs22{padding:5px 0 0;}
.subtitle .fs20{padding:5px 0 0;}

.number{width: 35px; height: 35px;}
.number::after{line-height:35px; font-size:0.889rem;}

.dot_list > li{padding: 0 0 0 10px;}
.dot_list > li + li{margin: 5px 0 0;}


/* 탭메뉴 */
.subtab{padding:70px 0 30px;}
.subtab .subtab_in.pc{display: none;}
.subtab .subtab_in.mo{display: block;}
.subtab .subtab_in{box-sizing:border-box; border:1px solid var(--border); overflow: hidden; padding: 0 10px;}
.subtab .subtab_in ul{text-align:center; display: block; font-size:0; white-space: nowrap;}
.subtab .subtab_in ul li{border:0; display: inline-block; margin: 0; padding: 0;}
.subtab .subtab_in ul li a{padding: 12px 5px; min-width:auto;}


/* 테이블 */
.table_wrap{position: relative; overflow-y: hidden; overflow-x: auto;}
.table_wrap .responsive-dim.show{display: block;}
.table_style{width: 680px;}
.table_style th{padding:12px 5px;}
.table_style td{padding: 12px 10px;}




/* 컨텐츠 */
.basic_style .txt_area{padding: 0 0 20px;}
.basic_style .txt_area .image_box{margin: 10px auto 0;}



}