@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 TOP */
.sub_top { position:relative; z-index:10; display:flex; flex-direction:column; gap:80px; align-items:center; padding:114px 0 80px; box-sizing:border-box; }
.sub_top .sub_lnb { position:relative; z-index:2; display:flex; align-items:center; gap:12px; }
.sub_top .sub_tit,
.sub_top .sub_tit_wrap,
.sub_top .sub_tab_wrap { position:relative; z-index:0; }
.sub_top .home { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; }
.sub_top .home img { display:block; width:18px; height:18px; }
.sub_top .line { display:block; width:1px; height:10px; background:rgba(26,27,36,0.15); flex-shrink:0; }
.sub_top .depth { position:relative; }
.sub_top .depth_btn { display:flex; align-items:center; gap:10px; padding:0; border:0; background:none; color:rgba(42,38,35,0.65); line-height:175%; cursor:pointer; white-space:nowrap; }
.sub_top .depth_btn::after { content:"\e313"; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:var(--borderR5); background-color:var(--grayBg); font-family:var(--icon); font-size:16px; line-height:20px; color:rgba(91,67,51,0.5); flex-shrink:0; font-weight:normal; transition:transform 0.3s ease; }
.sub_top .depth.open .depth_btn::after { transform:rotate(180deg); }
.sub_top .depth_list { position:absolute; left:0; top:calc(100% + 8px); min-width:160px; background:var(--white); border:1px solid var(--border); border-radius:var(--borderR5); z-index:30; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; box-sizing:border-box; overflow:hidden; }
.sub_top .depth.open .depth_list { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.sub_top .depth_list a { display:block; padding:10px 16px; color:var(--black); white-space:nowrap; transition:color 0.3s ease, background 0.3s ease; }
.sub_top .depth_list a:hover,
.sub_top .depth_list li.on a { color:var(--main); font-weight:600; background:var(--grayBg); }
.sub_top .sub_tit { line-height:125%; font-weight:700; letter-spacing:-6%; color:var(--black); text-align:center; }
.sub_top.has_tab { padding-bottom:60px; }

/* VISUAL TOP */
.wrapper.visual .container { position:relative; }
.wrapper.visual .sub_top { position:absolute; left:0; top:0; width:100%; z-index:10; gap:0; padding:114px 0 0; box-sizing:border-box; }
.wrapper.visual .sub_top .sub_tit { display:none; }
.wrapper.visual .sub_top .line { background:rgba(255,255,255,0.15); }
.wrapper.visual .sub_top .depth_btn { color:var(--basicW); }
.wrapper.visual .sub_top .depth_btn::after { background:rgba(255,255,255,0.2); color:var(--white); }


/* BBS */
.wrapper.bbs{overflow: hidden;}
.wrapper.bbs_view .sub_top .sub_tit{display: none;}


/* SUB VISUAL */
.sub_visual { position:relative; height:var(--vh); overflow:hidden; background:var(--bk000); }
.sub_visual .bg { position:absolute; left:0; top:0; width:100%; height:100%; }
.sub_visual .bg img { display:block; width:100%; height:100%; object-fit:cover; opacity:0.6; }
.sub_visual .bg .jarallax { width:100%; height:100%; opacity: 0.6;}
.sub_visual .bg::after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; opacity: 0.8; background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.20) 20%, rgba(0, 0, 0, 0.20) 80%, rgba(0, 0, 0, 0.60) 100%); pointer-events:none; }
.sub_visual .visual-in { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;  box-sizing:border-box; text-align:center; }
.sub_visual .copy { display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.sub_visual .scr { position:absolute; right:37px; bottom:40px; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; opacity:0.5; }
.sub_visual .scr .label { display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); }
.sub_visual .scr .arrow { display:flex; align-items:center; justify-content:center; width:26px; height:26px; }
.sub_visual .scr .arrow::before { content:"\ead0"; font-family:var(--icon); font-size:26px; line-height:26px; color:var(--white); }

/* TAB */
.sub_tab_wrap { width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x; }
.sub_tab_wrap::-webkit-scrollbar { display:none; }
.sub_tab { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:5px; width:max-content; min-width:100%; box-sizing:border-box; }
.sub_tab a { display:flex; align-items:center; justify-content:center; flex-shrink:0; min-width: 300px; padding:16px 20px; box-sizing:border-box; background:var(--grayBg); color:var(--light); border-radius:500px; white-space:nowrap; }
.sub_tab a:hover{color: var(--black);}
.sub_tab a.on { background:var(--main) !important; color:var(--white) !important; }
.wrapper.visual .sub_tab_wrap.visual_tab { padding:180px 0 60px; box-sizing:border-box; }
.wrapper.visual .sub_tab_wrap.visual_tab .sub_tab a { width:302px; min-width:302px; height:64px; padding:16px 20px; }

/* css */
.dep-tit { position:relative; padding-left:42px; font-weight:700; box-sizing: border-box; margin-bottom: 30px;}
.dep-tit::before { content:''; position:absolute; left:0; top:3px; width:30px; height:45px; background:url('/img/dep-icon.png') no-repeat center / contain; }

/* DOT LIST */
.dot-list {display:flex; flex-direction:column; gap:8px;}
.dot-list li {position:relative; padding-left:10px; color:var(--basic); font-size: 1rem; line-height: 170%; letter-spacing: var(--letter-spacing-default);}
.dot-list li::before {content:''; position:absolute; left:0; top:14px; width:3px; height:3px; background:var(--main);}

/* BTN */
.btn-ico, .btn-ico:hover { transition:border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-ico { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; height:58px; padding:0 10px 0 20px; border:1px solid var(--border); border-radius:500px; background:var(--white); box-sizing:border-box; position:relative; overflow:hidden; color:var(--black); cursor: pointer;}
.btn-ico::before { content:''; position:absolute; left:50%; bottom:0; width:16px; height:16px; border-radius:50%; background:var(--main); transform:translate(-50%, 50%) scale(0); transition:transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); z-index:0; pointer-events:none; }
.btn-ico span { position:relative; z-index:1; color:var(--black); transition:color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-ico:hover { border-color:var(--main); }
.btn-ico:hover span { color:var(--white); }
.btn-ico:hover::before { transform:translate(-50%, 50%) scale(20); }
.btn-ico::after { content:"\f3dd"; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:100px; background:var(--main); color:var(--white); font-family:var(--icon); font-size:18px; line-height:18px; font-weight: 400; flex-shrink:0; transition:background 0.55s cubic-bezier(0.4, 0, 0.2, 1), color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-ico:hover::after { background:var(--white); color:var(--main); }
.btn-ico.down::after { content:"\e2c4"; }

.btn-link-line { display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border:1px solid var(--border); border-radius:var(--borderR5); background:var(--white); color:var(--black); box-sizing:border-box; width:max-content; transition:all 0.3s; }
.btn-link-line::after { content:"\e89e"; font-family:var(--icon); font-size:18px; line-height:18px; color:inherit; font-weight:400;}
.btn-link-line:hover { background:var(--black); color:var(--white); border-color:var(--black); }

/* Check Point */
.gray-box {width:100%; padding:50px; background:var(--grayBg); border-radius:var(--borderR30); box-sizing:border-box;}
.bbs_btn + .gray-box {margin-top:60px;}
.check-point {display:flex; gap:30px; align-items:flex-start; width:100%;}
.check-point .guide-tit {display:flex; gap:10px; align-items:center; width:360px; flex-shrink:0;}
.check-point .check-deco {display:block; width:34px; height:39px; background:url('/img/check_deco.png') no-repeat center/contain; flex-shrink:0;}
.check-point .guide-tit .fs30 {font-family:var(--eng); letter-spacing:0; line-height:140%; color:var(--black);}
.check-point .dot-list {flex:1; min-width:0;}
.check-point .dot-list li .pointFont{letter-spacing: inherit; line-height: inherit;}
.check-point .dot-list li.column {display:flex; flex-direction:column; align-items:flex-start; gap:5px;}
.btn-link-line.plus::after {content:"\e145";}

/* table */
.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: min(50%, 30vh); left: 0;right: 0; padding: 50px 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;
		}
	}



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

/* TAB */
.sub_tab_wrap { box-sizing: border-box; padding: 0 5%; }
.wrapper.visual .sub_tab_wrap.visual_tab { padding:180px 5% 60px; }

}

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



/* TAB */
.wrapper.visual .sub_tab_wrap.visual_tab { padding:140px 5% 50px; }
.wrapper.visual .sub_tab_wrap.visual_tab .sub_tab a { width:280px; min-width:280px; height:60px; }

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

/* SUB TOP */
.sub_top { padding:114px 0 60px; gap:50px; }

/* TAB */
.wrapper.visual .sub_tab_wrap.visual_tab { padding:120px 5% 40px; }
.wrapper.visual .sub_tab_wrap.visual_tab .sub_tab a { width:240px; min-width:240px; height:56px; padding:14px 18px; }

/* Check Point */
.check-point .guide-tit{width: 230px;}
}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){

/* SUB TOP */
.sub_top { padding:114px 0 50px; gap:40px; }
.sub_top.has_tab { padding-bottom:40px; }


/* VISUAL TOP */
.wrapper.visual .sub_top { padding:114px 0 0; }

/* SUB VISUAL */
.sub_visual .visual-in {gap:30px; }
.sub_visual .copy { gap:15px;}
.sub_visual .scr { right:3%; bottom:30px;}

/* TAB */
.sub_tab a { min-width: 180px; padding:12px 30px; }
.wrapper.visual .sub_tab_wrap.visual_tab { padding:80px 5% 40px; }
.wrapper.visual .sub_tab_wrap.visual_tab .sub_tab a { width:auto; min-width:180px; height:50px; padding:12px 30px; }


/* DOT LIST */
.dot-list li::before {top:10px;}

/* Check Point */
.gray-box {padding:30px;}
.check-point {flex-direction:column; gap:15px;}
.check-point .guide-tit {width:100%;}
.check-point .check-deco {width:28px; height:32px;}
.bbs_btn + .gray-box {margin-top:40px;}

/* css */
.dep-tit { padding-left:35px; margin-bottom: 25px;}
.dep-tit::before {width:23px; height:35px; }

/* BTN */
.btn-ico { height:50px; padding:0 8px 0 20px; gap:20px; }
.btn-ico::after { width:34px; height:34px; font-size:16px; line-height:16px; }
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* SUB TOP */
.sub_top { padding:72px 0 25px; gap:25px; }
.sub_top .sub_lnb { flex-wrap:wrap; gap:8px 10px; }
.sub_top .sub_tit { line-height:130%; }
.sub_top.has_tab { padding-bottom:30px; }

/* VISUAL TOP */
.wrapper.visual .sub_top { padding:72px 0 0; }

/* SUB VISUAL */
.sub_visual .visual-in {gap:20px; }
.sub_visual .copy { gap:10px;}
.sub_visual .copy p br{display: none;}
.sub_visual .scr { bottom:20px;}
.sub_visual .scr .arrow { width:20px; height:20px; }
.sub_visual .scr .arrow::before { font-size:20px; line-height:20px;}



/* TAB */
.sub_tab a { padding:10px 20px; min-width: 130px; font-size: 1rem;}
.wrapper.visual .sub_tab_wrap.visual_tab { padding:50px 5% 30px; }
.wrapper.visual .sub_tab_wrap.visual_tab .sub_tab a { width:auto; min-width:130px; height:44px; padding:10px 20px; }

/* css */
.dep-tit { padding-left:25px; margin-bottom: 15px;}
.dep-tit::before { top: 2px; width:17px; height:25px; }


/* DOT LIST */
.dot-list {gap:6px;}
.dot-list li {padding-left:8px;}
.dot-list li::before {top:9px;}

/* Check Point */
.gray-box {padding:24px; border-radius:var(--borderR20);}
.check-point {gap:12px;}
.bbs_btn + .gray-box {margin-top:30px;}

/* BTN */
.btn-ico { height:46px; padding:0 6px 0 16px; gap:12px; }
.btn-ico::after { width:30px; height:30px; font-size:16px; line-height:16px; }

}