@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

───────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────
	
	common.css 커스텀 css 아래에 작성

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	font common
───────────────────────────────────────────────────────────*/
body {}/*letter-spacing:-0.2px;*/
div, dd, li, p, span, td, dt, h1, h2, h3, h4, h5, h6, strong, b, em, th {}
b, dt, strong, em, th, h1, h2, h3, h4, h5, h6 {font-weight:700;}/* Noto Sans KR은 500 사용 */
input, button, textarea, select {}
	/* webfont */
.ff_open {font-family: 'Open Sans', 'Nanum Gothic', sans-serif !important;}
.ff_noto {font-family: "Noto Sans KR", 'Nanum Gothic', sans-serif !important;}
.ff_mont {font-family: 'Montserrat', 'Nanum Gothic', sans-serif !important;}
.ff_nanum {font-family: 'Lato','Nanum Gothic', dotum, sans-serif !important;}
.ff_lato {font-family: 'Lato', 'Nanum Gothic', sans-serif !important;}
.ff_nbg {font-family: 'Nanum Barun Gothic','Nanum Gothic', sans-serif !important;}
.ff_open, .ff_open a, .ff_open span, .ff_open div, .ff_open ul, .ff_open li, .ff_open p {font-family: 'Open Sans' !important;}
.ff_noto, .ff_noto a, .ff_noto span, .ff_noto div, .ff_noto ul, .ff_noto li, .ff_noto p {font-family: 'Noto Sans KR', 'Noto Sans' !important; font-weight:400;}
	/* font weight */
.fw_t {font-weight:300;}
.fw_n {font-weight:400;}
.fw_b {font-weight:700;}/* Noto Sans KR은 500 사용 */
.fw_eb {font-weight:800;}/* Noto Sans KR은 700 사용 */


/*** common ***/


/*** TABLE | 서브페이지 전체 사용 ( board / member / layout ) ***/


/*** BOARD ***/


/*** GOODS ***/


/*** MEMBER ***/


/*** SERVICE ***/






/*───────────────────────────────────────────────────────────
	
	** navigation, button 관련 css 영역

───────────────────────────────────────────────────────────*/



/*───────────────────────────────────────────────────────────
	navigation common
───────────────────────────────────────────────────────────*/
.nav_wrap .nav_box { padding: 120px 0 0; margin-bottom: 60px; position:relative; }
.nav_wrap .nav_box h2 { font: 700 56px / 100% var(--font-type01); color: #333; }

.nav_wrap .nav_box ul { font-size: 0; position: absolute; right: 0; bottom: 0; }
.nav_wrap .nav_box ul li { display: inline-block; height: 20px; vertical-align: top; font: 400 18px / 18px var(--font-type01); }
.nav_wrap .nav_box ul li + li { padding-left: 10px; }
.nav_wrap .nav_box ul li span,
.nav_wrap .nav_box ul li strong,
.nav_wrap .nav_box ul li > a { padding: 0 4px 0px 0; vertical-align: middle; font: 400 18px / 18px var(--font-type01); color: var(--black-color08); }
.nav_wrap .nav_box ul li a.home { padding-left: 0; }
.nav_wrap .nav_box ul li a.home:before { content: ''; display: inline-block; width: 20px; height: 20px; margin: 0 7px 2px 0; background: url('../images/common/sub_locate_home.png') no-repeat left center #666; background-size: contain; vertical-align: middle; }
.nav_wrap .nav_box ul li:last-child a,
.nav_wrap .nav_box ul li:last-child span,
.nav_wrap .nav_box ul li:last-child strong { color: var(--black-color04); font-weight: 700; padding-right: 0; }

.nav_wrap .nav_box ul li .navi_select {min-width:150px;border: 1px solid #999;cursor: pointer;margin-top: -3px;position:relative;box-sizing: border-box;}
.nav_wrap .nav_box ul li .navi_select .navi_tit {padding: 2px 10px;line-height: 18px;height: auto;display: block;}
.nav_wrap .nav_box ul li .navi_select .navi_tit:after {content:"";display:inline-block;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #999;position:absolute;right: 10px;top: 9px;transition:all .2s;}
.nav_wrap .nav_box ul li .navi_select ul {display:none;position:absolute;left: -1px;top: 100%;width:150px;background:#fff;padding:6px 0 6px 0;border: 1px solid #888;box-sizing: border-box;}
.nav_wrap .nav_box ul li .navi_select ul li {display: block;line-height: 1;height: auto;font-size: 12px;padding: 0;}
.nav_wrap .nav_box ul li .navi_select ul li a {display:block;padding:5px 10px;font-size: 12px;line-height: 1;height: auto;transition:all .2s;}
.nav_wrap .nav_box ul li .navi_select ul li a:hover {background:#999;color:#fff;}

.nav_wrap .nav_box ul li .navi_select:hover .navi_tit:after {transform: rotate(180deg);}
.nav_wrap .nav_box ul li .navi_select:hover ul {display:block;}


/* 없는 페이지 제어 */

#wrap.company_overview .nav_wrap,
#wrap.product_capsule .nav_wrap,
#wrap.product_assorted .nav_wrap,
#wrap.product_kcapsule .nav_wrap { display: none; }


@media only screen and (max-width:1380px) {
	.nav_wrap .nav_box h2 { font-size: 52px; }
}
@media only screen and (max-width:1280px) {
	.nav_wrap .nav_box { padding: 90px 0 50px; margin-bottom: 0; }
	.nav_wrap .nav_box h2 { font-size: 46px; }
	.nav_wrap .nav_box ul { position: static; padding-top: 20px; }
}
@media only screen and (max-width:1024px) {
	.nav_wrap .nav_box h2 { font-size: 40px; }
	.nav_wrap .nav_box ul { padding-top: 16px; }
}
@media only screen and (max-width:860px) {
}
@media only screen and (max-width:768px) {
	.nav_wrap .nav_box { padding-bottom: 40px; }
} 
@media only screen and (max-width:640px) {
	.nav_wrap .nav_box { padding: 50px 0 30px; }
	.nav_wrap .nav_box h2 { font-size: 36px; }
	.nav_wrap .nav_box ul { }
	.nav_wrap .nav_box ul li span, .nav_wrap .nav_box ul li strong, .nav_wrap .nav_box ul li > a { font-size: 16px; }
}
@media only screen and (max-width:440px) {
	.nav_wrap .nav_box h2 { font-size: 30px; line-height: 125%; letter-spacing: -0.64px; }
	.nav_wrap .nav_box ul { padding-top: 12px; }
	.nav_wrap .nav_box ul li span, .nav_wrap .nav_box ul li strong, .nav_wrap .nav_box ul li > a { font-size: 14px; }
	.nav_wrap .nav_box ul li a.home:before { width: 18px; height: 18px; }
}



/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
/* custom button type */
	/* button 공통 요소 */
.btn, .btn_lg, .btn_sm, .btn_md {font-weight:700;border-style:solid !important;border-width:1px !important;padding:0 15px;margin:0;text-indent:0;vertical-align:top !important;text-align:center;display:inline-block;box-sizing:border-box;cursor:pointer;box-shadow:none;outline:0 !important;}
	/* button 크기별 */

.btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
.btn {min-width:108px;width:auto;height:40px;line-height:38px;font-size:15px;}
.btn_lg {min-width:92px;width:auto;height:72px;line-height:70px;font-size:14px;}
.btn_md {min-width:60px;width:auto;line-height:28px;height:30px;font-size:13px;}
.btn_sm {min-width:30px;width:auto;line-height:28px;width:auto !important;padding:0 8px;font-size:inherit;border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;}
	/* button 색상별 */
.btn_point, .btn_point:hover {border-color:#222 !important;background-color:#222 !important;color:#fff !important;}
.btn_basic, .btn_basic:hover {border-color:#777 !important;background-color:#777 !important;color:#fff !important;}
.btn_default, .btn_default:hover {border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;}
.btn_info, .btn_info:hover {border-color:#d3d3d3 !important;background-color:#fff !important;color:#555 !important;}
.btn_reset, .btn_reset:hover {border-color:#d3d3d3 !important;background:#fff url(../images/common/icon_btn_reset.gif) no-repeat 9px 50% !important;padding:0 10px 0 30px !important;color:#555 !important;}
	/* button wrapper */
.btn_wrap {margin:0 auto;padding:0;padding-top:2.8%;font-size:0;vertical-align:top;display:inline-block;}
.btn_wrap.ta_center {width:100%;}
.btn_wrap a + a,
.btn_wrap button + button,
.btn_wrap a + button,
.btn_wrap button + a {margin-left:12px;vertical-align:top;}
.btn_wrap button > a, .btn_wrap a > a{margin-left:0;}
.view_btn .btn_wrap.ta_right {position:absolute;right:0px;top:0px;}

@media only screen and (max-width:1200px) {
		/* button wrapper */
	.btn_wrap {padding-top:3.8%;}
}
@media only screen and (max-width:1023px) {
		/* button wrapper */
	.btn_wrap {padding-top:4.2%;}
	.view_btn .btn_wrap.ta_left {position:absolute;left:0px;top:0px;}
}
@media only screen and (max-width:860px) {

}
@media only screen and (max-width:767px) {
		/* button wrapper */
	.btn_wrap {padding-top:5.2%;}
}
@media only screen and (max-width:640px) {
		/* button wrapper */
	.btn_wrap {padding-top:5.8%;}
	.btn_wrap a + a,
	.btn_wrap button + button,
	.btn_wrap a + button,
	.btn_wrap button + a {margin-left:8px;}
}
@media only screen and (max-width:479px) {
		/* button 크기별 */
	.btn_wd {font-size:16px;}
	.btn {min-width:70px;font-size:13px;}
	.btn_lg {min-width:72px;font-size:13px;}
	.btn_md {min-width:60px;font-size:12px;}
	.btn_sm {padding:0 4px;font-size:12px;}
		/* button wrapper */
	.btn_wrap a + a,
	.btn_wrap button + button,
	.btn_wrap a + button,
	.btn_wrap button + a {margin-left:6px;}
	.view_btn .paging {width:100%;min-height:87px;}
	.view_btn .paging + .btn_wrap.ta_right{top:70px;}
}
@media only screen and (max-width:320px) {
		/* button 크기별 */
	.btn {min-width:68px;}
	.btn_md {min-width:44px;font-size:12px;}
}



/*───────────────────────────────────────────────────────────
	
	서브 공통 css

───────────────────────────────────────────────────────────*/

.sub_content::before { content: 'HANSANG INTERNATIONAL CORP.'; width: max-content; font: 300 14px/100% 'Inter'; color: var(--black-color10); position: fixed; left: 60px; top: 62%; transform: rotate(-90deg); transform-origin: left center; }


.inner1600 { width: 90%; max-width: 1600px; margin: 0 auto; position: relative; }
.inner1440 { width: 90%; max-width: 1440px; margin: 0 auto; position: relative; }

.tit-box { }
.tit-box .sub-en { font: 600 20px/100% var(--font-type01); letter-spacing: -0.2px; color: var(--sub); margin-bottom: 30px; }
.tit-box .tit { font: 600 48px/125% var(--font-type01); letter-spacing: -1.44px; color: var(--black); }
.tit-box .tit > span { display: block; font: 600 48px/125% var(--font-type01); letter-spacing: -1.44px; color: var(--black); }

.basic-btn { display: inline-block; min-width: 240px; text-align: center; border: 1px solid var(--black-color08); padding: 20px 40px; font: 400 18px/100% var(--font-type01); color: var(--black); position: relative; transition: all 0.3s ease; }
.basic-btn::after { content: ''; width: 0; height: 100%; background-color: var(--sub); position: absolute; left: 0; top: 0; transition: all 0.3s ease; opacity: 0; }
.basic-btn > span { position: relative; z-index: 3; transition: all 0.3s ease; }

.basic-btn:hover { border: 1px solid rgba(0,0,0,0); }
.basic-btn:hover::after { width: 100%; opacity: 1; }
.basic-btn:hover > span { color: var(--point-white); }

@media only screen and (max-width:1600px) {
	.sub_content::before { left: 40px; }
	.inner1600 { width: 94%; }
}
@media only screen and (max-width:1440px) {
	.sub_content::before { display: none; }
	.inner1440 { width: 94%; }
}
@media only screen and (max-width:1024px) {
	.basic-btn { border: 1px solid rgba(0,0,0,0); }
	.basic-btn::after { width: 100%; opacity: 1; }
	.basic-btn > span { color: var(--point-white); }

	.tit-box .sub-en { font-size: 19px; margin-bottom: 22px; }
	.tit-box .tit,
	.tit-box .tit > span { font-size: 44px; letter-spacing: -1.32px; }
} 
@media only screen and (max-width:768px) {
	.tit-box .sub-en { font-size: 17px; margin-bottom: 16px; }
	.tit-box .tit,
	.tit-box .tit > span { font-size: 40px; letter-spacing: -1.2px; }
} 
@media only screen and (max-width:480px) {
	.tit-box .sub-en { font-size: 15px; margin-bottom: 12px; }
	.tit-box .tit,
	.tit-box .tit > span { font-size: 36px; letter-spacing: -1.08px; }
}