@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
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		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 ***/


/*───────────────────────────────────────────────────────────
	
	sub visual

───────────────────────────────────────────────────────────*/
	.sub_visual_box{position: relative;}
	.sub_visual_box .sub_vis{width:100%;height:500px;box-sizing:border-box;position: relative;}
	.sub_visual_box .sub_vis .w_custom{position: absolute;top:54%;left:50%;transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px));display: flex;align-items: center;justify-content: space-between;}
	.sub_visual_box .sub_vis .w_custom h2{font-size:60px;color:#fff;font-weight:500;}
	
	.nav_wrap{}
	.nav_wrap ul{display: flex;align-items: center;}
	.nav_wrap ul li{}
	.nav_wrap ul li + li{margin-left:18px;padding-left:18px;position: relative;}
	.nav_wrap ul li + li:before{width:7px;height:7px;content:"";border:1px solid #fff;border-width:1px 1px 0 0;transform:rotate(45deg);opacity:0.6;position: absolute;left:-5px;top:8px;}
	.nav_wrap ul li .home{}
	.nav_wrap ul li span{font-size:18px;color:#fff;font-weight:400;letter-spacing:0.05em;}

	#side_box{position: absolute;bottom:0;left:0;z-index:5;width:100%;}
	#side_box .sub_menu dl{}
	#side_box .sub_menu dl dt{font-size:0;cursor:pointer;position: relative;z-index:5;}
	#side_box .sub_menu dl dt span{font-size:inherit;color:inherit;font-weight:inherit;}
	#side_box .sub_menu dl dd{display:flex;text-align:center;letter-spacing:-0.03em;height:80px; box-sizing:border-box;}
	#side_box .sub_menu dl dd a{width:100%;display:flex;width:100%;height:100%;color:#fff;font-size:20px;vertical-align:middle;justify-content:center;align-items:center;box-sizing:border-box;border-radius:10px 10px 0 0;background:rgba(0,0,0,0.6);padding:0 5px;word-break:keep-all;}
	#side_box .sub_menu dl dd a.on{border-left:1px solid #fff;background:#fff;color:#222;font-weight:500;}

	@media only screen and (max-width:1200px){
		.sub_visual_box .sub_vis{height:400px;}
		.sub_visual_box .sub_vis .w_custom h2{font-size:50px;}
		#side_box .sub_menu dl dd a{font-size:18px;}
	}
	@media only screen and (max-width:860px){
		.sub_visual_box .sub_vis .w_custom h2{font-size:40px;}
		.nav_wrap ul li + li{margin-left:10px;padding-left:10px;}
		.nav_wrap ul li + li:before{width:5px;height:5px;}
		.nav_wrap ul li span{font-size:15px;}

		#side_box .sub_menu dl dd{height:60px;}
		#side_box .sub_menu dl dd a{font-size:16px;}

	}
	@media only screen and (max-width:640px){
		.sub_visual_box .sub_vis{height:0;padding-bottom:45%;}
		.sub_visual_box .sub_vis .w_custom{justify-content: center;top:65%;}
		.nav_wrap{display: none;}

		#side_box{background:#ffff;position:relative;}
		#side_box .w_custom{padding:0;}
		#side_box .sub_menu dl dt{font-size:18px;font-weight:500;color:#333;height:55px;line-height:1.4;background:#fff;border-bottom:1px solid #ddd;padding:0 15px;display:flex;align-items:center;}
		#side_box .sub_menu dl dt:after{content:'';width:10px;height:10px;border-bottom:1px solid #888;border-right:1px solid #888;position:absolute;top:50%;right:15px;transform:rotate(45deg);margin-top:-8px;}
		#side_box .sub_menu dl dt.on:after{transform:rotate(-135deg);margin-top:-2px;}
		#side_box .sub_menu dl dd{position:absolute;width:100%;top:100%;left:0;height:auto;padding:15px 15px;box-shadow:0 7.5px 20px 0 rgba(0,0,0,0.2);background:#fff;display:none;}
		#side_box .sub_menu dl dd.open{display:block;}
		#side_box .sub_menu dl dd a{color:#888;font-size:16px;display:block;padding:6px 0;text-align:left;border-radius:0;background:none;}
		#side_box .sub_menu dl dd a.on{color:#333333;font-weight:500;}
		#side_box .sub_menu dl dd a span{padding:0 15px;display:block;box-sizing:border-box;}
	}
	@media only screen and (max-width:500px){
		.sub_visual_box .sub_vis{padding-bottom:56%;}
		.sub_visual_box .sub_vis .w_custom h2{font-size:32px;}

		#side_box .sub_menu dl dt{font-size:16px;height:46px;}
		#side_box .sub_menu dl dd a{font-size:14px;}
	}

/*───────────────────────────────────────────────────────────
	
	sub title

───────────────────────────────────────────────────────────*/
	#wrap .sub_title{text-align: center;}
	.sub_title *{font-family:'NexonLv2Gothic';}
	.sub_title h3{font-size:50px;color:#000;font-weight:500;letter-spacing:-0.03em;line-height:1.5;margin-bottom:41px;word-break:keep-all;}
	.sub_title .about_sub_title{font-size:40px;}
	.sub_title span{font-size:26px;color:#015C98;font-weight:700;font-family:'Inter';display: block;margin-bottom:23px;}
	.sub_title p{font-size:20px;color:#666;font-weight:400;letter-spacing:-0.03em;line-height:1.8;word-break:keep-all;}
	.sub_title p + p{margin-top:16px;}
	.sub_title .about_sign{font-size:20px;color:#222;font-weight:400;display: block;margin-top:46px;letter-spacing:-0.03em;}

	@media only screen and (max-width:1200px){
		.sub_title h3{font-size:40px;}
		.sub_title .about_sub_title{font-size:32px;}
		.sub_title p{font-size:18px;}
		.sub_title p br{display: none;}
		.sub_title .about_sign{font-size:18px;}
		.sub_title span{font-size:22px;}
	}
	@media only screen and (max-width:860px){
		.sub_title h3{font-size:32px;margin-bottom: 25px;}
		.sub_title .about_sub_title{font-size:26px;}
		.sub_title .about_sign{font-size:16px;margin-top:25px;}
		.sub_title p{font-size:16px;}
		.sub_title p + p{margin-top:10px;}
	}
	@media only screen and (max-width:640px){
		.sub_title h3 br{display: none;}
	}
	@media only screen and (max-width:500px){
		.sub_title h3{margin-bottom:15px;font-size:22px;line-height:1.4;}
		.sub_title .about_sub_title{font-size:20px;}
		.sub_title p{font-size:14px;line-height:1.6;}
		.sub_title .about_sign{font-size:14px;margin-top:10px;}
		.sub_title span{font-size:16px;margin-bottom:10px;}
	}

/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		/* custom button type */
			/* button 공통 요소 */
		.btn, .btn_lg, .btn_sm, .btn_md {font-weight:700;border-style:solid !important;border-width:1px !important;padding:0;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 {width:108px;height:40px;line-height:38px;font-size:15px;}
		.btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;}
		.btn_md {width:60px;line-height:28px;height:30px;font-size:13px;}
		.btn_sm {height:30px;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:#015C98 !important;background-color:#015C98 !important;color:#fff !important;box-sizing:border-box;width:200px;height:70px;border-radius:35px;line-height:68px;font-size:22px;color:#fff;font-weight:500;}
		.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;}

			/* button wrapper */
		.btn_wrap {margin:0 auto;padding:0;padding-top:60px;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:1024px) {
			/* 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:12.8%;}
		.btn_wrap a + a,
		.btn_wrap button + button,
		.btn_wrap a + button,
		.btn_wrap button + a {margin-left:8px;}

		.btn_point, .btn_point:hover{width:160px;height:50px;line-height:48px;font-size:18px;}
	}
	@media only screen and (max-width:479px) {
			/* button 크기별 */
		.btn_wd {font-size:16px;}
		.btn_lg {width:72px;font-size:13px;}
		.btn_md {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 {width:68px;}
		.btn_md {width:44px;font-size:12px;}
	}

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

	회사소개

───────────────────────────────────────────────────────────*/
	.about_visual{width:100%;height:0;padding-bottom:26.3%;position: relative;background:url('../images/sub/about_visual.jpg')no-repeat center;background-size:cover;background-attachment:fixed;margin-top:86px;}
	.about_visual .logo{position: absolute;top:50%;left:50%;transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px));text-align: center;}

	.sub_cont_title{display: inline-block;position: relative;font-size:34px;color:#000;font-weight:500;letter-spacing:-0.03em;}
	.sub_cont_title:before{width:8px;height:8px;content:"";box-sizing:border-box;border-radius:100%;background:#015C98;position: absolute;top:-3px;right:-16px;}	

	#wrap .about_business{margin-top:122px;}
	#wrap .about_business .sub_cont_title:before{top:7px;}
	#wrap .about_business .list{display: flex;flex-wrap:wrap;width:calc(100% + 32px);margin-left:-16px;margin-top:34px;}
	#wrap .about_business .list li{margin:0 16px 46px;width:calc(25% - 32px);}
	#wrap .about_business .list li .thumb{width:100%;height:0;padding-bottom:61.5%;position: relative;overflow:hidden;box-sizing:border-box;border-radius:6px;}
	#wrap .about_business .list li .thumb img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
	#wrap .about_business .list li span{display: block;text-align:left;font-size:22px;color:#333;font-weight:400;margin-top:23px;}

	#wrap .about_mission{margin-top:83px;}
	#wrap .about_mission .cont{display: flex;flex-wrap:wrap;margin-top:34px;}
	#wrap .about_mission .cont > div{box-sizing:border-box;border:10px solid rgba(64, 132, 177, 0.1);display: flex;align-items: center;justify-content: center;width:52.85%;text-align: center;border-radius:800px;height:420px;}
	#wrap .about_mission .cont .sub_vision{margin-left:-80px;border:10px solid rgba(20, 172, 184, 0.1);}
	#wrap .about_mission .cont .icon{}
	#wrap .about_mission .cont dl{margin-top:19px;}
	#wrap .about_mission .cont dl dt{font-size:34px;color:#333;font-weight:500;}
	#wrap .about_mission .cont dl dd{font-size:20px;color:#333;font-weight:400;margin-top:23px;line-height:1.6;letter-spacing:-0.03em;word-break:keep-all;}

	@media only screen and (max-width:1300px) {
		.about_visual{padding-bottom:34%;}
		.about_visual .logo img{width:70%;}

		#wrap .about_mission .cont dl dd{font-size:18px;}
	}
	@media only screen and (max-width:1024px) {
		#wrap .about_business{margin-top:80px;}
		
		.sub_cont_title{font-size:28px;}
		#wrap .about_business .list{width:calc(100% + 20px);margin-left:-10px;margin-top:15px;}
		#wrap .about_business .list li{margin:0 10px 36px;width:calc(33.3333% - 20px);}
		#wrap .about_business .list li span{font-size:18px;margin-top:10px;}

		#wrap .about_mission{margin-top:60px;}
		#wrap .about_mission .cont{margin-top:20px;}
		#wrap .about_mission .cont > div{height:auto;padding:40px 35px;width:51.85%;border-radius:80px;}
		#wrap .about_mission .cont .sub_vision{margin-left:-40px;}
		#wrap .about_mission .cont dl dt{font-size:28px;}
		#wrap .about_mission .cont dl dd{font-size:16px;}
	}
	@media only screen and (max-width:860px) {
		.about_visual{margin-top:60px;padding-bottom:40%;}
		
		#wrap .about_mission .cont > div{width:100%;padding:30px 30px;}
		#wrap .about_mission .cont .sub_vision{margin:40px 0 0 0;}
		#wrap .about_mission .cont dl dd{font-size:18px;margin-top:10px;}
	}	
	@media only screen and (max-width:640px) {
		.about_visual{background-attachment:initial;}

		.sub_cont_title{font-size:22px;}
		.sub_cont_title:before{width:5px;height:5px;right:-10px;top:0;}	
		#wrap .about_business .sub_cont_title:before{top:4px;}

		#wrap .about_business{margin-top:60px;}
		#wrap .about_business .list li{margin:0 10px 25px;width:calc(50% - 20px);}

		#wrap .about_mission .cont dl dt{font-size:20px;}
		#wrap .about_mission .cont dl dd{font-size:16px;}
	}
	@media only screen and (max-width:500px) {
		.about_visual{padding-bottom:50%;}
		.about_visual .logo img{width:90%;}

		#wrap .about_business .list{width:calc(100% + 15px);margin-left:-7.5px;}
		#wrap .about_business .list li{margin:0 7.5px 25px;width:calc(50% - 15px);}
		#wrap .about_business .list li span{font-size:15px;}

		#wrap .about_mission .cont > div{border-width:5px !important;padding:20px 15px;}
		#wrap .about_mission .cont .sub_vision{margin:20px 0 0 0;}
		#wrap .about_mission .cont dl{margin-top:10px;}
		#wrap .about_mission .cont .icon img{height:40px;}
		#wrap .about_mission .cont .sub_vision .icon img{height:44px;}
		#wrap .about_mission .cont dl dt{font-size:18px;}
		#wrap .about_mission .cont dl dd{font-size:14px;}
	}

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

	사업분야

───────────────────────────────────────────────────────────*/
	.business_prd{margin-top:76px;}
	.business_prd .list{display: flex;flex-wrap:wrap;width:calc(100% + 40px);margin-left:-20px;margin-top:35px;}
	.business_prd .list li{box-sizing:border-box;margin:0 20px;}
	.business_prd .list.line2 li{width:calc(50% - 40px);}
	.business_prd .list.line3 li{width:calc(33.333% - 40px);}
	.business_prd .list li .thumb{box-sizing:border-box;border-radius:10px 10px 0 0;border:1px solid #ddd;border-bottom:none;width:100%;height:0;padding-bottom:72.5%;position: relative;overflow:hidden;}
	.business_prd .list.line2 li .thumb{padding-bottom:47%;}
	.business_prd .list li .thumb img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
	.business_prd .list li span{display: flex;width:100%;box-sizing:border-box;border-radius:0 0 10px 10px;background: #102533;align-items: center;justify-content: center;font-size:22px;color:#fff;font-weight:500;height:70px;}

	.business_feature{margin-top:102px;}
	.business_feature ul{display: flex;flex-wrap:wrap;width:calc(100% + 20px);margin-left:-10px;margin-top:35px;align-items: flex-start;}
	.business_feature ul li{box-sizing:border-box;margin:0 10px 20px;width:calc(50% - 20px);border-radius:20px;background:#f5f5f5;padding:38px 28px 38px 40px;}
	.business_feature ul li dl{display: flex;align-items: center;}
	.business_feature ul li dl dt{font-size:20px;color:#015C98;font-weight:500;width:26px;}
	.business_feature ul li dl dd{font-size:20px;color:#000;font-weight:400;font-family:'NexonLv2Gothic';box-sizing:border-box;width:calc(100% - 26px);padding-left:44px;letter-spacing:-0.03em;word-break:keep-all;line-height:1.7;}

	@media only screen and (max-width:1024px) {
		.business_prd .list{width:calc(100% + 20px);margin-left:-10px;}
		.business_prd .list li{margin:0 10px;}
		.business_prd .list.line2 li{width:calc(50% - 20px);}
		.business_prd .list.line3 li{width:calc(33.333% - 20px);}
		.business_prd .list li span{font-size:18px;height:60px;}

		.business_feature{margin-top:80px;}
		.business_feature ul li{padding:25px 20px 25px 20px;}
		.business_feature ul li dl dt{font-size:18px;width:23px;}
		.business_feature ul li dl dd{font-size:18px;padding-left:20px;}
	}
	@media only screen and (max-width:640px) {
		.business_prd{margin-top:50px;}
		.business_prd .list{margin-top:20px;width:calc(100% + 15px);margin-left:-7.5px;}
		.business_prd .list li{margin:0 7.5px 20px;}
		.business_prd .list.line2 li,
		.business_prd .list.line3 li{width:calc(50% - 15px);}
		.business_prd .list li span{font-size:16px;height:50px;}

		.business_feature{margin-top:40px;}
		.business_feature ul{margin-top:20px;width:100%;margin-left:0;}
		.business_feature ul li{width:100%;margin:0 0 15px;padding:20px 15px 20px 15px;}
		.business_feature ul li dl dt{font-size:16px;width:20px;}
		.business_feature ul li dl dd{font-size:16px;padding-left:15px;}
	}
	@media only screen and (max-width:500px) {
		.business_prd .list{width:100%;margin-left:-0;}
		.business_prd .list li{margin:0 0 20px;}
		.business_prd .list.line2 li,
		.business_prd .list.line3 li{width:100%;}

		.business_feature ul li dl dt,
		.business_feature ul li dl dd{font-size:14px;}
	}