@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 ***/


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

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



/*───────────────────────────────────────────────────────────
	sub common
───────────────────────────────────────────────────────────*/
	/* 서브 비주얼 */
		.sub_visual{position: relative; display: flex; align-items: center; width:100%; height:400px; min-height: 230px; background-size:cover; background-position: center;}
		.sub_visual .w_custom {position: initial; padding-top: 20px; /* padding-top: 90px; */}
		.sub_visual h3 {font-size: var(--title-80); font-weight: bold; color: var(--white-color01);}
		.sub_visual .sub_navi {display:flex; align-items: center; margin-top: 44px;}
		.sub_visual .sub_navi .home {width:40px; height:40px; background: var(--point-color01) url("/data/skin/respon_default/images/sub/navi_home.svg"); background-repeat: no-repeat; background-position: center; border-radius: 100%;}
		.sub_visual .sub_navi dl {display: flex; align-items: center; margin-left: 30px;}
		.sub_visual .sub_navi dt, .sub_visual .sub_navi dd {position:relative; display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 164px; box-sizing:border-box; padding-bottom: 10px; border-bottom: 1px solid var(--white-color01); cursor: pointer; z-index:5;}
		.sub_visual .sub_navi dt:after, .sub_visual .sub_navi dd:after {content:"";  position: absolute; right:0; top:28%; width: 14px; height: 7px; background: url("../images/sub/navi_arw.png") no-repeat center; background-size: 100%; transition: .3s;}	
		.sub_visual .sub_navi dt.on:after, .sub_visual .sub_navi dd.on:after {transform: scaleY(-1); transition: .3s;}
		.sub_visual .sub_navi dd {margin-left: 36px;}
		.sub_visual .sub_navi dd strong {position:relative; display:inline-block; width: 100%; box-sizing: border-box; font-weight: 400; color:inherit; z-index:1;}
		.sub_visual .sub_navi dt span,
		.sub_visual .sub_navi dd strong {display:block; box-sizing:border-box; padding: 0 55px 0 0; font-size: var(--title-18); font-weight: 600; color: var(--white-color01);}
		.sub_visual .sub_navi ul {display: none; position: absolute; top: 100%; left: 0; width: 100%; text-align: left; padding:15px 20px 13px; background: var(--white-color01); box-sizing:border-box; border-top:0; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); z-index: 5;}
		.sub_visual .sub_navi ul li {}
		.sub_visual .sub_navi ul li a {display: block; padding: 5px 0; font-size: var(--title-16); font-weight:400; color: var(--black-color06);}
		.sub_visual .sub_navi ul li.on a {color: var(--point-color01); font-weight:500;}
	
	/* 페이지 타이틀 */
		.nav_wrap {text-align:center;padding-bottom:84px;}
		.nav_wrap .nav_box {}
		.nav_wrap .nav_box h2 {font-size:var(--title-58);font-weight:600;color:var(--point-color02);letter-spacing:-0.03em;display:block;}
		.nav_wrap .nav_box h3 {font-size:var(--title-42);font-weight:500;color:var(--point-color02);letter-spacing:-0.03em;display:block;padding:19px 0 21px;}
		.nav_wrap .nav_box p {font-size:var(--title-20);font-weight:300;color:var(--point-color02);line-height:1.6;letter-spacing:-0.03em;display:block;padding-top:19px;}

	.nav_wrap .nav_box .bd_sub_tab{display: flex;align-items: center;justify-content: center;margin-top:20px;}
	.nav_wrap .nav_box .bd_sub_tab a{font-size:var(--title-20);font-weight:400;color:var(--point-color02);line-height:1.6;letter-spacing:-0.03em;display:block;margin: 0 20px;}
	.nav_wrap .nav_box .bd_sub_tab a.on{color:var(--point-color01);}
	
	/* 컨텐츠 타이틀 */
		.sub_title {text-align: center;}
		.sub_title h4, .sub_title h5 {color: var(--black-color01); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em;}
		.sub_title h4 {font-size: var(--title-50);}
		.sub_title h4 strong {font-size: inherit; font-weight: bold; letter-spacing: inherit;}
		.sub_title h5 {font-size: var(--title-40);}
		.sub_title h6 {font-size: var(--title-30); color: var(--point-color02); font-weight: 600;}
		.sub_title p {margin-top: 4px; font-size: var(--title-20); color: var(--black-color06); letter-spacing: -0.03em;}
		
	/* 포인트 컬러 */
		.color_green {color: var(--point-color01) !important;}
		.color_blue {color: var(--point-color03) !important;}
		
	@media only screen and (max-width:1200px) {
		/* 서브 비주얼 */
			.sub_visual {height:33.3vw;}
			.sub_visual .w_custom {/* padding-top: 4.69vw; */ padding-top: 1vw;}
			.sub_visual .sub_navi {margin-top: 2.29vw;}
			
		/* 페이지 타이틀 */
			.nav_wrap {padding-bottom:80px;}
	}
	@media only screen and (max-width:1024px) {
		/* 페이지 타이틀 */
			.nav_wrap {padding-bottom:75px;}
	}
	@media only screen and (max-width:860px) {
		/* 페이지 타이틀 */
			.nav_wrap {padding-bottom:70px;}
			.nav_wrap .nav_box h3 {padding:15px 0;}
			.nav_wrap .nav_box p {padding-top:15px;}
	}
	@media only screen and (max-width:640px) {
		/* 서브 비주얼 */
			.sub_visual .w_custom {padding-top: 0; margin-top: -3vw;}
			.sub_visual h3 {padding-bottom: 5vw;}
			.sub_visual .sub_navi {position:absolute; left:0; bottom: 0; width:100%; margin-top:0; background:#fff;}
			.sub_visual .sub_navi .home, .sub_visual .sub_navi dt {display:none;}
			.sub_visual .sub_navi dl {margin-left:0; width:100%;}
			.sub_visual .sub_navi dd {height:50px; width:100%; margin-left:0; padding-bottom: 0; border-bottom-color: var(--border-color01);}
			.sub_visual .sub_navi dd:after {right: 15px; top: 45%; width: 12px; filter: var(--filter-black);}
			.sub_visual .sub_navi dd strong {padding:0 45px 0 15px; color: var(--black-color03);}
			.sub_visual .sub_navi ul {border-top: 1px solid var(--border-color01); padding:7px 15px; box-shadow:3px 3px 5px rgba(0,0,0,0.1);} 
			
		/* 페이지 타이틀 */
			.nav_wrap {padding-bottom:60px;}
			.nav_wrap .nav_box h3 {padding:10px 0;}
			.nav_wrap .nav_box p {padding-top:10px;}
	}
	@media only screen and (max-width:479px) {
		/* 페이지 타이틀 */
			.nav_wrap {padding-bottom:50px;}
	 }
	
/*───────────────────────────────────────────────────────────
	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:#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: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: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 {width:70px;font-size:13px;}
		.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;}
	}


/*───────────────────────────────────────────────────────────
	 sub 컨텐츠 공통 
───────────────────────────────────────────────────────────*/
	/* dot_list */
		.dot_list {}
		.dot_list li {position: relative; padding-left: 14px; font-size: var(--title-16); color: var(--black-color06); line-height: 1.5;}
		.dot_list li:before {content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background: var(--black-color06); border-radius: 100%;}
		.dot_list li + li {margin-top: 12px;}
		
		@media only screen and (max-width:640px) {
			.dot_list li {padding-left: 12px;}
			.dot_list li:before {top: 9px; width: 3.5px; height: 3.5px;}
			.dot_list li + li {margin-top: 10px;}
		}
		@media only screen and (max-width:479px) {
			.dot_list li {padding-left: 10px;}
			.dot_list li:before {width: 3px; height: 3px;}
			.dot_list li + li {margin-top: 8px;}
		}
		
	/* circle_progress */
		.circle_progress li.circle .thumb,
		.circle_progress li.circle .thumb > div,
		.circle_progress li.circle .thumb span {transition: all 0.4s;}
		.circle_progress {position: relative; display: flex; justify-content: center; margin-top: 20px; padding-bottom: 300px;}
		.circle_progress li.circle {max-width: 300px;}
		.circle_progress li.circle .thumb {position: relative; width: 300px; height: 300px; box-sizing: border-box; border: 2px solid transparent; background-origin: border-box; background-clip: content-box, border-box; border-radius: 100%;}
		.circle_progress li.circle .thumb:before, .circle_progress li.circle .thumb:after {content: ""; position: absolute; left: 50%; transform: translateX(calc(-50% + 0.5px)); width: 12px; height: 12px; border-radius: 100%;}
		.circle_progress li.circle .thumb:before {top: -7px;}
		.circle_progress li.circle .thumb:after {bottom: -7px;}
		.circle_progress li.circle .thumb > div {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
		.circle_progress li.circle .thumb > div:before, .circle_progress li.circle .thumb > div:after {content: ""; position: absolute; right: -120px; top: 50%; transform: translateY(calc(-50% + 1px));}
		.circle_progress li.circle .thumb > div:before {width: 120px; height: 2px;}
		.circle_progress li.circle .thumb > div:after {width: 9px; height: 9px; border: 2.5px solid var(--transparent); border-radius: 3px; transform: translateY(calc(-50% + 1px)) rotate(135deg);}
		.circle_progress li.circle .thumb span {display: flex; justify-content: center; align-items: center; width: calc(100% - 36px); height: calc(100% - 36px); box-sizing: border-box; padding: 10px; border-radius: 100%;}
		.circle_progress li.circle .txt {padding-top: 35px; text-align: center;}
		.circle_progress li.circle .txt dt {font-size: var(--title-26); font-weight: 600; line-height: 1; letter-spacing: -0.03em;}
		.circle_progress li.circle .txt dt span {display: block; margin-top: 14px; font-size: var(--title-20); font-weight: 400; color: var(--black-color06);}
		.circle_progress li.circle .txt dd {font-size: var(--title-18); font-weight: 500; color: var(--black-color03); line-height: 1.33; letter-spacing: -0.03em;}
			.circle_progress li.circle .txt dd:before {content: ""; display: block; margin: 13px auto; width: 16px; height: 20px;}
		.circle_progress li.circle .txt dd span {display: block; margin-top: 10px; font-size: var(--title-14); font-weight: 400; color: var(--black-color06); line-height: 1.42;}
		/* gray */
			.circle_progress li.circle.gray .thumb {background-image: linear-gradient(#fff, #fff), linear-gradient(to right, var(--white-color01) 50%, var(--black-color08) 50%);}
			.circle_progress li.circle.gray .thumb:before, .circle_progress li.circle.gray .thumb:after {background: var(--black-color08);}
			.circle_progress li.circle.gray .thumb > div:before {background: var(--black-color08);}
			.circle_progress li.circle.gray .thumb > div:after {border-top-color: var(--black-color08); border-left-color: var(--black-color08);}
			.circle_progress li.circle.gray .thumb span {background: var(--black-color08);}
			.circle_progress li.circle.gray .txt dt {color: var(--black-color03);}
			.circle_progress li.circle.gray .txt dd:before {background: url("../images/sub/sub_circle_progress_arw01.png") no-repeat center;}
		/* green */
			.circle_progress li.circle.green .thumb {background-image: linear-gradient(#fff, #fff), linear-gradient(to right, var(--white-color01) 50%, var(--point-color01) 50%);}
			.circle_progress li.circle.green .thumb:before, .circle_progress li.circle.green .thumb:after {background: var(--point-color01);}
			.circle_progress li.circle.green .thumb > div:before {background: var(--point-color01);}
			.circle_progress li.circle.green .thumb > div:after {border-top-color: var(--point-color01); border-left-color: var(--point-color01);}
			.circle_progress li.circle.green .thumb span {background: var(--point-color01);}
			.circle_progress li.circle.green .txt dt {color: var(--point-color04);}
			.circle_progress li.circle.green .txt dd:before {background: url("../images/sub/sub_circle_progress_arw02.png") no-repeat center; background-size: 100%;}
		/* blue */
			.circle_progress li.circle.blue .thumb {background-image: linear-gradient(#fff, #fff), linear-gradient(to right, var(--white-color01) 50%, var(--point-color03) 50%);}
			.circle_progress li.circle.blue .thumb:before, .circle_progress li.circle.blue .thumb:after {background: var(--point-color03);}
			.circle_progress li.circle.blue .thumb > div:before, .circle_progress li.circle.blue .thumb > div:after {display: none;}
			.circle_progress li.circle.blue .thumb span {background: var(--point-color03);}
			.circle_progress li.circle.blue .txt dt {color: var(--point-color05);}
			.circle_progress li.circle.blue .txt dd:before {background: url("../images/sub/sub_circle_progress_arw03.png") no-repeat center; background-size: 100%;}

		.circle_progress li.info {position: absolute; top: 150px; display: flex; flex-direction: column; align-items: center;}
		.circle_progress li.info .tit {position: relative; display: flex; align-items: center; justify-content: center; height: 340px;}
		.circle_progress li.info .tit:before {content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; z-index: -1;}
		.circle_progress li.info .tit:after {display: none; content: ""; position: absolute; right: 0; top: 50%; transform: translateY(calc(-50% + 0.5px)); width: 70px; height: 1px; z-index: -1;}
		.circle_progress li.info .tit strong {display: inline-flex; align-items: center; margin-top: 56px; padding: 8px 28px; border-radius: 100px; font-size: var(--title-20); font-weight: 400; color: var(--white-color01); text-align: center; word-break: break-all;}
		.circle_progress li.info .txt {width: 400px; box-sizing: border-box; padding: 34px 30px; border-radius: 20px;}
		.circle_progress li.info .txt dt {margin-bottom: 15px; font-size: var(--title-26); font-weight: 600;}
		.circle_progress li.info .scale {display: flex; align-items: center; justify-content: center; width: 120px; box-sizing: border-box; padding: 38px 0; border-radius: 20px; font-size: var(--title-16); font-weight: 700; line-height: 1.375; text-align: center;}
		/* green */
			.circle_progress li.info.green {right: 51.8%;}
			.circle_progress li.info.green .tit:before {background: url("../images/sub/line_gradient01.png") no-repeat top center;}
			.circle_progress li.info.green .tit:after {background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(90deg, var(--black-color08), var(--point-color01)); background-size: 4px 2px, 100% 2px;}
			.circle_progress li.info.green .tit strong {background: var(--point-color01);}
			.circle_progress li.info.green .txt {background: url("../images/sub/sub_circle_progress_icon01.png") var(--green-bg); background-repeat: no-repeat; background-position: 87% 28px;}
			.circle_progress li.info.green .txt dt {color: var(--point-color04);}
			.circle_progress li.info.green .txt .dot_list li:before {background: var(--point-color04);}
			.circle_progress li.info.green .scale {background: var(--green-bg); color: var(--point-color04);}
		/* blue */
			.circle_progress li.info.blue {left: 51.8%;}
			.circle_progress li.info.blue .tit:before {background: url("../images/sub/line_gradient02.png") no-repeat top center;}
			.circle_progress li.info.blue .tit:after {background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(90deg, var(--point-color01), var(--point-color03)); background-size: 4px 2px, 100% 2px;}
			.circle_progress li.info.blue .tit strong {background: var(--point-color03);}
			.circle_progress li.info.blue .txt {background: url("../images/sub/sub_circle_progress_icon02.png") var(--blue-bg01); background-repeat: no-repeat; background-position: 94% 21px;}
			.circle_progress li.info.blue .txt dt {color: var(--point-color05);}
			.circle_progress li.info.blue .txt .dot_list li:before {background: var(--point-color05);}
			.circle_progress li.info.blue .scale {background: var(--blue-bg01); color: var(--point-color05);}
		
		.circle_progress li.info + li.circle {margin-left: 120px;}
		
		@media only screen and (max-width:1200px) {
			.circle_progress li.circle {max-width: 280px;}
			.circle_progress li.circle .thumb {width: 280px; height: 280px;}
			.circle_progress li.circle .thumb > div:before, .circle_progress li.circle .thumb > div:after {right: -105px;}
			.circle_progress li.circle .thumb > div:before {width: 105px;}
			
			.circle_progress li.info {top: 140px;}
			.circle_progress li.info .tit {height: 320px;}
			.circle_progress li.info .tit strong {padding: 8px 22px;}
			.circle_progress li.info .txt {width: 360px; padding: 30px 28px;}
				.circle_progress li.info.green .txt {background-position: 90% 26px; background-size: 62px;}
				.circle_progress li.info.blue .txt {background-size: 48px;}
				
			.circle_progress li.info + li.circle {margin-left: 105px;}
		 }
		 @media only screen and (max-width:1080px) {
			.circle_progress li.circle {max-width: 260px;}
			.circle_progress li.circle .thumb {width: 260px; height: 260px;}
			.circle_progress li.circle .thumb span {width: calc(100% - 32px); height: calc(100% - 32px);}
			.circle_progress li.circle .thumb > div:before, .circle_progress li.circle .thumb > div:after {right: -95px;}
			.circle_progress li.circle .thumb > div:before {width: 95px;}
			
			.circle_progress li.info {top: 130px;}
			.circle_progress li.info .tit {height: 300px;}
			.circle_progress li.info .txt {width: 330px;}
			
			.circle_progress li.info + li.circle {margin-left: 95px;}
		 }
		 @media only screen and (max-width:1023px) {
			/* 레이아웃 변경 */
				.circle_progress {width: 100%; flex-direction: column; align-items: center; padding-bottom: 0;}
				.circle_progress > li {display: flex; align-items: center;}
				
				.circle_progress li.circle {max-width: inherit;}
				.circle_progress li.circle .thumb {transform: rotate(90deg);}
				.circle_progress li.circle .thumb > div:before, .circle_progress li.circle .thumb > div:after {right: -250px;}
				.circle_progress li.circle .thumb > div:before {width: 250px;}
				.circle_progress li.circle .thumb span {transform: rotate(-90deg);}
				.circle_progress li.circle .txt {width: 390px; box-sizing: border-box; padding: 0 15px; padding-top: 0;}
				
				.circle_progress li.info {position: relative; top: inherit; flex-direction: row;}
					.circle_progress li.info.green {right: inherit !important;}
					.circle_progress li.info.blue {left: inherit !important;}
				.circle_progress li.info .tit {width: 240px; height: 260px;}
				.circle_progress li.info .tit:before {display: none;}
				.circle_progress li.info .tit:after {display: block;}
				.circle_progress li.info .tit strong {margin-top: 0;}
				.circle_progress li.info .txt {width: 390px;}
				.circle_progress li.info .scale {width: 390px;}
					
				.circle_progress li.info + li.circle {margin-left: 0;}
		 }
		 @media only screen and (max-width:680px) {
			.circle_progress > li {width: 100%;}
			
			.circle_progress li.circle .thumb {width: 220px; height: 220px;}
			.circle_progress li.circle .thumb:before, .circle_progress li.circle .thumb:after {width: 10px; height: 10px;}
			.circle_progress li.circle .thumb:before {top: -6px;}
			.circle_progress li.circle .thumb:after {bottom: -6px;}
			.circle_progress li.circle .thumb span {width: calc(100% - 28px); height: calc(100% - 28px); padding: 8px;}
			.circle_progress li.circle .txt {width: calc(100% - 225px);}
				.circle_progress li.info.green .txt {background-position: 94% 24px; background-size: 54px;}
				.circle_progress li.info.blue .txt {background-size: 44px;}
			
			.circle_progress li.info .tit {width: 220px;}
			.circle_progress li.info .txt {width: calc(100% - 225px); padding: 28px 26px; border-radius: 15px;}
			.circle_progress li.info .scale {width: calc(100% - 225px);}
		 }
		 @media only screen and (max-width:580px) {
			.circle_progress li.circle .thumb {width: 185px; height: 185px;}
			.circle_progress li.circle .thumb > div:before, .circle_progress li.circle .thumb > div:after {right: -280px;}
				.circle_progress li.circle .thumb > div:before {width: 280px;}
			.circle_progress li.circle .txt {width: calc(100% - 185px);}
			.circle_progress li.circle .txt dd:before {width: 14px; margin: 10px auto;}
			.circle_progress li.circle .txt dd span {margin-top: 6px;}

			.circle_progress li.info .tit {width: 185px; height: 290px;}
			.circle_progress li.info .txt {width: calc(100% - 185px);}
			.circle_progress li.info .scale {width: calc(100% - 185px); padding: 34px 0;}
		 }
		 @media only screen and (max-width:479px) {
			.circle_progress li.circle .thumb {width: 150px; height: 150px;}
			.circle_progress li.circle .thumb:before, .circle_progress li.circle .thumb:after {width: 8px; height: 8px;}
			.circle_progress li.circle .thumb:before {top: -5px;}
			.circle_progress li.circle .thumb:after {bottom: -5px;}
			.circle_progress li.circle .thumb > div:before, .circle_progress li.circle .thumb > div:after {right: -310px;}
				.circle_progress li.circle .thumb > div:before {width: 310px;}
			.circle_progress li.circle .thumb span {width: calc(100% - 22px); height: calc(100% - 22px); padding: 6px;}
			.circle_progress li.circle .txt {width: calc(100% - 150px);}
				.circle_progress li.info.green .txt {background-position: 92% 20px; background-size: 48px;}
				.circle_progress li.info.blue .txt {background-position: 94% 16px; background-size: 40px;}
			
			.circle_progress li.info .tit {width: 150px; height: 320px;}
			.circle_progress li.info .tit strong {padding: 8px 16px; font-size: var(--title-18);}
			.circle_progress li.info .txt {width: calc(100% - 150px); padding: 24px 22px;}
			.circle_progress li.info .txt .dot_list li br {display: none;}
			.circle_progress li.info .scale {width: calc(100% - 150px); padding: 30px 0;}
		 }
		 @media only screen and (max-width:359px) {
			.circle_progress li.circle .thumb {width: 130px; height: 130px;}
			.circle_progress li.circle .txt {width: calc(100% - 130px);}

			.circle_progress li.info .tit {width: 130px;}
			.circle_progress li.info .txt {width: calc(100% - 130px);}
			.circle_progress li.info .scale {width: calc(100% - 130px);}
		 }

		
/*───────────────────────────────────────────────────────────
	 technology
───────────────────────────────────────────────────────────*/
	/*** technology/about (기술개요) ***/
		/* PC 일반 */
			#wrap.technology_about .nav_wrap {padding-bottom: 130px;}
			#wrap.technology_about .nav_wrap .nav_box h2 + p {padding-top: 28px;}
			
			@media only screen and (max-width:1200px) {
				#wrap.technology_about .nav_wrap {padding-bottom:115px;}
			}
			@media only screen and (max-width:1024px) {
				#wrap.technology_about .nav_wrap {padding-bottom:100px;}
			}
			@media only screen and (max-width:860px) {
				#wrap.technology_about .nav_wrap {padding-bottom:85px;}
				#wrap.technology_about .nav_wrap .nav_box h2 + p {padding-top: 22px;}
			}
			@media only screen and (max-width:640px) {
				#wrap.technology_about .nav_wrap {padding-bottom:70px;}
				#wrap.technology_about .nav_wrap .nav_box h2 + p {padding-top: 16px;}
			}
			@media only screen and (max-width:479px) {
				#wrap.technology_about .nav_wrap {padding-bottom:55px;}
			 }
		 
			.sub_technology .tech_feather {padding-top: 133px;}
			.sub_technology .feather_progress {display: flex; align-items: flex-end; justify-content: space-between; margin-top: 35px; padding-bottom: 110px;}
			.sub_technology .feather_progress .icon_list {width: 31.8%; background: var(--gray-bg); box-sizing: border-box; padding: 45px 0 60px; border-radius: 20px; text-align: center;}
			.sub_technology .feather_progress .icon_list li {display: inline-flex; flex-direction: column; align-items: center;}
			/* blue */
				.sub_technology .feather_progress .icon_list li + li {margin-left: 2.1vw;}
				.sub_technology .feather_progress .icon_list li .tit {position: relative; display: flex; margin: 24px 0 14px;}
				.sub_technology .feather_progress .icon_list li .tit:after {content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(calc(-50% + 0.5px)); border-top: 7px solid var(--black-color06); border-left: 7px solid transparent; border-right: 7px solid transparent;}
			/* orange */
				.sub_technology .feather_progress .icon_list li.orange .tit:after {border-top-color: var(--point-color07);}
				.sub_technology .feather_progress .icon_list li.orange .tit span {border-color: var(--point-color07);}
			/* blue */
				.sub_technology .feather_progress .icon_list.blue {position: relative; z-index: -1; width: 15.9%; background: var(--blue-bg02); padding: 45px 0 35px;}
				.sub_technology .feather_progress .icon_list li.blue .tit:after {border-top-color: var(--point-color03);}
				.sub_technology .feather_progress .icon_list li.blue .tit span {border-color: var(--point-color03);}
			.sub_technology .feather_progress .icon_list li .tit span {display: inline-flex; justify-content: center; align-items: center; width: 140px; background: var(--white-color01); box-sizing: border-box; padding: 9.5px 8px; border: 1px solid var(--black-color06); border-radius: 100px; font-size: var(--title-16); color: var(--black-color01); font-weight: 500; letter-spacing: -0.03em;}
			.sub_technology .feather_progress .icon_list li .desc {display: flex; flex-direction: column; align-items: center;}
			.sub_technology .feather_progress .icon_list li .desc span {font-size: var(--title-14); color: var(--black-color01); font-weight: 500; line-height: 1.71;}
			
			/* center | tit_box */
				.sub_technology .feather_progress .tit_box {position: relative; width: 44.45%;}
				.sub_technology .feather_progress .tit_box:before, .sub_technology .feather_progress .tit_box:after {content: ""; position: absolute; top: 59%; transform: translateY(-50%); width: 60px; height: 60px; z-index: 1;}
				.sub_technology .feather_progress .tit_box:before {left: -12%; background: url("../images/sub/sub_feather_progress_arw01.png") no-repeat center; background-size: 100%;}
				.sub_technology .feather_progress .tit_box:after {right: -8%; background: url("../images/sub/sub_feather_progress_arw02.png") no-repeat center; background-size: 100%;}
				.sub_technology .feather_progress .tit_box h5 {display: flex; justify-content: center; align-items: center; background: var(--point-color01); padding: 14.5px 15px; border-radius: 20px 20px 0 0; font-size: var(--title-26); font-weight: 600; color: var(--white-color01); text-align: center;}
				.sub_technology .feather_progress .tit_box .icon_list {position: relative; width: 100%; background: var(--white-color01); border: 2px solid var(--border-color04); border-top: 0; border-radius: 0 0 20px 20px;}
				.sub_technology .feather_progress .tit_box .icon_list:after {content: ""; position: absolute; left: 50%; bottom: -110px; transform: translateX(calc(-50% - 0.5px)); width: 1px; height: 110px; box-sizing: border-box; border-left: 1px dashed var(--point-color01);}
				.sub_technology .feather_progress .tit_box .icon_list li {width: 100%;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon {padding-left: 10px;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon span + span {margin-left: 85px;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit {margin: 14px 0 22px; background: var(--point-color01); padding: 10px; border-radius: 100px;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit:after {border-top-color: var(--point-color01);}
				.sub_technology .feather_progress .tit_box .icon_list li .tit span {border: 0;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit span + span {margin-left: 10px;}
				.sub_technology .feather_progress .tit_box .icon_list li .desc {width: calc(100% - 40px); flex-direction: row; flex-wrap: wrap; justify-content: center;}
				.sub_technology .feather_progress .tit_box .icon_list li .desc span {font-size: var(--title-16); color: var(--point-color01);}
				.sub_technology .feather_progress .tit_box .icon_list li .desc span + span {margin-left: 20px;}
			
			@media only screen and (max-width:1460px) {
				.sub_technology .feather_progress .icon_list li + li {margin-left: 1.4vw;}
			}
			@media only screen and (max-width:1240px) {
				.sub_technology .feather_progress .icon_list:first-child {width: 24%;}
				.sub_technology .feather_progress .icon_list:first-child li {display: flex;}
				.sub_technology .feather_progress .icon_list:first-child li + li {margin-left: 0; margin-top: 30px;}
				.sub_technology .feather_progress .icon_list.blue {width: 20%;}
				
				.sub_technology .feather_progress .tit_box {width: 50%;}
			}
			@media only screen and (max-width:1200px) {
				.sub_technology .tech_feather {padding-top: 115px;}
				.sub_technology .feather_progress {padding-bottom: 100px;}
			
				.sub_technology .feather_progress .tit_box:before,
				.sub_technology .feather_progress .tit_box:after {width: 50px; height: 50px;}
				.sub_technology .feather_progress .tit_box .icon_list:after {bottom: -100px; height: 100px;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon {padding-left: 0;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon span + span {margin-left: 75px;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon span + span + span {margin-left: 60px;} 
				.sub_technology .feather_progress .tit_box .icon_list li .tit span {width: 130px;}
			}
			@media only screen and (max-width:1080px) {
				.sub_technology .feather_progress .icon_list li + li {margin-left: 0.8vw;}
				
				.sub_technology .feather_progress .tit_box:before,
				.sub_technology .feather_progress .tit_box:after {width: 44px; height: 44px;}
				.sub_technology .feather_progress .tit_box:before {left: -9%;}
				.sub_technology .feather_progress .tit_box:after {right: -9%;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit span {width: 120px;}
			}
			@media only screen and (max-width:1024px) {
				.sub_technology .tech_feather {padding-top: 100px;}
				.sub_technology .feather_progress {padding-bottom: 90px;}
			}
			@media only screen and (max-width:1023px) {
				/* 레이아웃 변경 */
					.sub_technology .feather_progress {flex-direction: column; align-items: center; margin-top: 30px;}
					.sub_technology .feather_progress .icon_list {width: 80%; min-width: 610px; padding: 45px 0 40px;}
					.sub_technology .feather_progress .icon_list li + li {margin-left: 2.1vw;}
						.sub_technology .feather_progress .icon_list.blue {width: 80%; min-width: 610px; padding: 45px 0 40px;}
	
					.sub_technology .feather_progress .icon_list:first-child {width: 80%;}
					.sub_technology .feather_progress .icon_list:first-child li {display: inline-flex;}
					.sub_technology .feather_progress .icon_list:first-child li + li {margin-top: 0; margin-left: 2.1vw;}
				
					.sub_technology .feather_progress .tit_box {width: 80%; min-width: 610px; margin: 50px 0;}
					.sub_technology .feather_progress .tit_box:before, .sub_technology .feather_progress .tit_box:after {right: inherit; left: 50%; transform: translateX(-50%) rotate(90deg);}
					.sub_technology .feather_progress .tit_box:before {top: -60px;}
					.sub_technology .feather_progress .tit_box:after {top: inherit; bottom: -36px;}
					.sub_technology .feather_progress .tit_box .icon_list {padding: 40px 0;}
					.sub_technology .feather_progress .tit_box .icon_list:after {display: none;}
			}
			@media only screen and (max-width:860px) {
				.sub_technology .tech_feather {padding-top: 85px;}
				.sub_technology .feather_progress {padding-bottom: 75px;}
			}
			@media only screen and (max-width:640px) {
				.sub_technology .tech_feather {padding-top: 75px;}
				.sub_technology .feather_progress {padding-bottom: 65px; margin-top: 25px;}
				.sub_technology .feather_progress .icon_list {width: 100%; min-width: inherit; padding: 35px 0 30px; border-radius: 15px;}
					.sub_technology .feather_progress .icon_list.blue {width: 100%; min-width: inherit; padding: 35px 0 30px;}
				.sub_technology .feather_progress .icon_list li .icon img {height: 54px;}
				.sub_technology .feather_progress .icon_list li .tit {margin: 18px 0 12px;}
				.sub_technology .feather_progress .icon_list li .tit:after {bottom: -5px; border-width: 5px;}

					.sub_technology .feather_progress .icon_list:first-child {width: 100%;}
					
				.sub_technology .feather_progress .tit_box {width: 100%; min-width: inherit; margin: 40px 0;}
				.sub_technology .feather_progress .tit_box:before, .sub_technology .feather_progress .tit_box:after {width: 40px; height: 40px;}
				.sub_technology .feather_progress .tit_box:before {top: -54px;}
				.sub_technology .feather_progress .tit_box:after {bottom: -30px;}
				.sub_technology .feather_progress .tit_box h5 {border-radius: 15px 15px 0 0;}
				.sub_technology .feather_progress .tit_box .icon_list {padding: 35px 0; border-radius: 0 0 15px 15px;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit {margin: 14px 0 18px; padding: 8px;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit span + span {margin-left: 8px;}
			}
			@media only screen and (max-width:479px) {
				.sub_technology .tech_feather {padding-top: 65px;}
				.sub_technology .feather_progress {padding-bottom: 50px; margin-top: 20px;}
				.sub_technology .feather_progress .icon_list {padding: 30px 0 25px !important;}
				.sub_technology .feather_progress .icon_list li .icon img {height: 50px;}
				.sub_technology .feather_progress .icon_list li .tit {margin-top: 14px;}
				.sub_technology .feather_progress .icon_list li .tit span {width: 126px;}

				.sub_technology .feather_progress .tit_box {margin: 30px 0;}
				.sub_technology .feather_progress .tit_box:before, .sub_technology .feather_progress .tit_box:after {width: 36px; height: 36px;}
				.sub_technology .feather_progress .tit_box:before {top: -48px;}
				.sub_technology .feather_progress .tit_box:after {bottom: -24px;}
				.sub_technology .feather_progress .tit_box .icon_list {padding: 30px 0;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon {display: flex; width: 85%; justify-content: space-around;}
				.sub_technology .feather_progress .tit_box .icon_list li .icon span {margin-left: 0 !important;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit {width: 85%;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit span {width: 100%;}
				.sub_technology .feather_progress .tit_box .icon_list li .tit span + span {margin-left: 6px;}
			 }
			 
			.sub_technology .feather_info {position: relative; width: 100%; box-sizing: border-box; padding: 60px 48px 112px; border: 1px solid var(--border-color01); border-radius: 40px;}
			.sub_technology .feather_info .sub_title h5 {font-weight: 600;}
			.sub_technology .feather_info .info_cont {position: relative; text-align: center;}
			.sub_technology .feather_info .info_cont .prd_thumb {display: inline-block; margin-top: 40px;}
			.sub_technology .feather_info .info_cont .prd_thumb img {margin-bottom: 7px;}
			.sub_technology .feather_info .info_cont .prd_thumb p {font-size: var(--title-18); color: var(--black-color01); font-weight: 500; letter-spacing: -0.03em;}
			.sub_technology .feather_info .info_cont .prd_list {position: absolute; left: 50%; top: 13.5%; transform: translateX(-50%); display: flex; justify-content: space-between; width: 100%;}
			.sub_technology .feather_info .info_cont .prd_list ul {/* width: 30%; */ width: 348px; }
			.sub_technology .feather_info .info_cont .prd_list li {position: relative; display: flex;}
			.sub_technology .feather_info .info_cont .prd_list li .line {position: absolute; top: 21%;}
				.sub_technology .feather_info .info_cont .prd_list li .line span {display: block; box-sizing: border-box; border-color: var(--point-color01); border-style: solid;}
				.sub_technology .feather_info .info_cont .prd_list li .line:before {content: ""; position: absolute; left: -30px; top: -3px; border-color: transparent var(--point-color01) transparent transparent; border-style: solid; border-width: 4px 5px 4px 0;}
				.sub_technology .feather_info .info_cont .prd_list li .line:after {content: ""; position: absolute; width: 5px; height: 5px; border-radius: 100%; background: var(--point-color01);}
			.sub_technology .feather_info .info_cont .prd_list li .icon {position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--point-color01); border-radius: 10px;}
			.sub_technology .feather_info .info_cont .prd_list li .txt {width: calc(100% - 60px);}
			.sub_technology .feather_info .info_cont .prd_list li .txt dt {padding: 6px 0 8px; font-size: var(--title-26); color: var(--black-color01); font-weight: 600;}
			.sub_technology .feather_info .info_cont .prd_list li .txt dd {font-size: var(--title-16); color: var(--black-color06); line-height: 1.5;}
			/* left && 01 */
				.sub_technology .feather_info .info_cont .prd_list .left { width: 365px;}
				.sub_technology .feather_info .info_cont .prd_list .left li {flex-direction: row-reverse; text-align: right;}
				.sub_technology .feather_info .info_cont .prd_list .left li .line {right: -154px;}
				.sub_technology .feather_info .info_cont .prd_list .left li .line span {width: 106px; height: 94px; border-top-width: 1px; border-right-width: 1px; transform: skewX(31deg);}
				.sub_technology .feather_info .info_cont .prd_list .left li .line:after {right: -30px; bottom: -1px;}
				.sub_technology .feather_info .info_cont .prd_list .left li .icon {margin-left: 10px;}
			/* right common */
				.sub_technology .feather_info .info_cont .prd_list .right {margin-top: -15px;}
				.sub_technology .feather_info .info_cont .prd_list .right li {text-align: left;}
				.sub_technology .feather_info .info_cont .prd_list .right li + li {margin-top: 35px;}
				.sub_technology .feather_info .info_cont .prd_list .right li .line {left: -145px;}
				.sub_technology .feather_info .info_cont .prd_list .right li .line:before {top: -3px; left: 148%; transform: scaleX(-1);}
				.sub_technology .feather_info .info_cont .prd_list .right li .icon {margin-right: 10px;} 
			/* 02 */
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(1) .line {top: 25%;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(1) .line:after {left: -52%; bottom: 0;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(1) .line span {width: 76px; height: 110px; border-top-width: 1px; border-left-width: 1px; transform: skewX(326deg);}
			/* 03 */
				/* .sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2) {margin-top: 50px;} */
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2) .line:after {left: -52%; bottom: 0;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2) .line span {width: 76px; height: 58px; border-top-width: 1px; border-left-width: 1px; transform: skewX(306deg);}
			/* 04 */
				/* .sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) {margin-top: 74px;} */
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line {left: -128px; top: -19%;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line:before {top: 37px; left: 124%;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line:after {left: -29%; top: 0;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line span {width: 80px; height: 42px; border-bottom-width: 1px; border-left-width: 1px; transform: skewX(48deg);}
				
			.sub_technology .feather_info .prd_graph {position: absolute; left: 150px; bottom: 50px;}

			@media only screen and (max-width:1320px) {
				.sub_technology .feather_info {padding: 54px 3.64vw 112px;}
				.sub_technology .feather_info .info_cont .prd_thumb {width: 34.9vw; min-width: 410px;}
				.sub_technology .feather_info .info_cont .prd_list ul {width: 26.38vw;}
				
				/* left && 01 */
					.sub_technology .feather_info .info_cont .prd_list .left {width: 27.65vw;}
					.sub_technology .feather_info .info_cont .prd_list .left li .line {right: -11.68vw;}
					.sub_technology .feather_info .info_cont .prd_list .left li .line:after {right: -2.3vw;}
					.sub_technology .feather_info .info_cont .prd_list .left li .line span {width: 8vw; height: 7.2vw;}
				/* right common */
					.sub_technology .feather_info .info_cont .prd_list .right li + li {margin-top: 2.5vw;}
					.sub_technology .feather_info .info_cont .prd_list .right li .line {left: -11vw;}
				/* 02 */
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(1) .line span {width: 5.76vw;}
				/* 03 */
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2) .line span {width: 5.76vw;}
				/* 04 */
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line {left: -9.7vw;}
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line:after {left: -32%;}
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line span {width: 6vw;}
					
				.sub_technology .feather_info .prd_graph {left: 11.4vw;}
			}
			@media only screen and (max-width:1240px) {
				.sub_technology .feather_info {padding: 50px 2.64vw 112px;}
				.sub_technology .feather_info .info_cont .prd_list .right li .line:before {left: 8.6vw;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(1) .line:after {left: -3vw;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2) .line:after {left: -3.5vw;}
				.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) .line:after {left: -1.9vw; top: -1px;}
				.sub_technology .feather_info .prd_graph {width: 21vw;}
			}
			@media only screen and (max-width:1240px) {
				/* 레이아웃 변경 */
					.sub_technology .feather_info {padding: 50px 30px;}
					.sub_technology .feather_info .info_cont .prd_thumb {width: 410px; min-width: inherit; margin-top: 30px;}
					.sub_technology .feather_info .info_cont .prd_list {position: relative; left: inherit; top: inherit; transform: none; width: 90%; min-width: 580px; margin: 0 auto; margin-top: 50px;}
					.sub_technology .feather_info .info_cont .prd_list ul {width: 50%;}
					.sub_technology .feather_info .info_cont .prd_list li {width: 100%;}
						.sub_technology .feather_info .info_cont .prd_list li .line,
						.sub_technology .feather_info .info_cont .prd_list li .line:before,
						.sub_technology .feather_info .info_cont .prd_list li .line:after {display: none !important;}
					.sub_technology .feather_info .info_cont .prd_list li .txt {box-sizing: border-box; padding-right: 24px;}
					.sub_technology .feather_info .info_cont .prd_list li .txt dd br {display: none;}
						
					.sub_technology .feather_info .info_cont .prd_list .left {width: 50%;}
					.sub_technology .feather_info .info_cont .prd_list .left li {flex-direction: row; text-align: left;}
					.sub_technology .feather_info .info_cont .prd_list .left li .icon {margin-left: 0; margin-right: 10px;}
					.sub_technology .feather_info .info_cont .prd_list .right {margin-top: 0;}
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2),
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) {margin-top: 40px;}
					
					.sub_technology .feather_info .prd_graph {width: 240px;}
			}
			@media only screen and (max-width:800px) {
				.sub_technology .feather_info .info_cont .prd_thumb {width: 380px;}
				.sub_technology .feather_info .info_cont .prd_list {width: 100%; min-width: inherit;}
				.sub_technology .feather_info .prd_graph {left: 10vw;}
			}
			@media only screen and (max-width:680px) {
				.sub_technology .feather_info {padding: 44px 25px 40px;}
				.sub_technology .feather_info .info_cont .prd_thumb {width: 70%; min-width: 220px;}
				.sub_technology .feather_info .info_cont .prd_list {flex-direction: column; align-items: flex-start; margin-top: 30px;}
				.sub_technology .feather_info .info_cont .prd_list ul {width: 100% !important;}
				.sub_technology .feather_info .info_cont .prd_list li .icon {width: 44px; height: 44px;}
				.sub_technology .feather_info .info_cont .prd_list li .icon img {max-width: 68%;}
				.sub_technology .feather_info .info_cont .prd_list li .txt {width: calc(100% - 54px); padding-right: 0;}
					.sub_technology .feather_info .info_cont .prd_list .right {margin-top: 30px;}
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2),
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) {margin-top: 30px;}
					
				.sub_technology .feather_info .prd_graph {position: relative; left: inherit; bottom: inherit; width: 46%; min-width: 180px; margin: 40px auto 0;}
			}
			@media only screen and (max-width:640px) {
				.sub_technology .feather_info {border-radius: 20px;}
			}
			@media only screen and (max-width:479px) {
				.sub_technology .feather_info {padding: 36px 20px 32px;}
				.sub_technology .feather_info .info_cont .prd_thumb {margin-top: 20px;}
				.sub_technology .feather_info .info_cont .prd_list {}
				.sub_technology .feather_info .info_cont .prd_list li .icon {width: 38px; height: 38px;}
				.sub_technology .feather_info .info_cont .prd_list li .txt {width: calc(100% - 48px);}
					.sub_technology .feather_info .info_cont .prd_list .right {margin-top: 20px;}
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(2),
					.sub_technology .feather_info .info_cont .prd_list .right li:nth-child(3) {margin-top: 20px;}
				.sub_technology .feather_info .prd_graph {margin-top: 30px;}
			}
		 
		 
/*───────────────────────────────────────────────────────────
	 applicable
───────────────────────────────────────────────────────────*/
	/*** applicable/about (적용시장) ***/
		/* PC 일반 */
			#wrap.applicable_about .nav_wrap .nav_box h2 {letter-spacing: inherit;}
			
			.sub_applicable .appli_market .circle_graph {display: flex; justify-content: center; align-items: flex-end;}
			.sub_applicable .appli_market .circle_graph li {text-align: center;}
			.sub_applicable .appli_market .circle_graph li + li {margin-left: 8vw;}
			.sub_applicable .appli_market .circle_graph li .circle_box {position: relative; display: flex; align-items: center; justify-content: center; width: 450px; min-width: 290px; height: 415px; min-height: 275px;}
			.sub_applicable .appli_market .circle_graph li p {margin-top: 28px; font-size: var(--title-30); letter-spacing: -0.03em;}
			
			/* recycling */
				.sub_applicable .appli_market .circle_graph li.recycling .circle dt {font-weight: 400;}
				.sub_applicable .appli_market .circle_graph li.recycling .circle_box img {max-height: 100%;}
				.sub_applicable .appli_market .circle_graph li.recycling p {color: var(--point-color04);}
			/* hydrogen */
				.sub_applicable .appli_market .circle_graph li.hydrogen .circle_box img {position: absolute;}
				.sub_applicable .appli_market .circle_graph li.hydrogen .circle_box img:nth-child(1) {left: 0; top: 0; width: 64.5%;}
				.sub_applicable .appli_market .circle_graph li.hydrogen .circle_box img:nth-child(2) {left: 11%; bottom: 0; width: 43.4%;}
				.sub_applicable .appli_market .circle_graph li.hydrogen .circle_box img:nth-child(3) {right: 0; top: 6px; width: 46.8%;}
				.sub_applicable .appli_market .circle_graph li.hydrogen .circle_box img:nth-child(4) {right: 2px; bottom: 6px; width: 52.6%;}
				.sub_applicable .appli_market .circle_graph li.hydrogen p {color: var(--point-color05);} 
			
			@media only screen and (max-width:1023px) {
				.sub_applicable .appli_market .circle_graph li .circle_box {width: 44vw; height: 40.58vw;}
			}
			@media only screen and (max-width:860px) {
				#wrap.applicable_about .nav_wrap .nav_box h2 br {display: none;}
				
				.sub_applicable .appli_market .circle_graph li + li {margin-left: 30px;}
			}
			@media only screen and (max-width:680px) {
				.sub_applicable .appli_market .circle_graph {align-items: center; flex-direction: column;}
				.sub_applicable .appli_market .circle_graph li + li {margin-left: 0; margin-top: 40px;}
				.sub_applicable .appli_market .circle_graph li .circle_box {width: 54vw; height: 51vw;}
				.sub_applicable .appli_market .circle_graph li p {margin-top: 24px;}
			}
			@media only screen and (max-width:359px) {
				.sub_applicable .appli_market .circle_graph li .circle_box {min-width: 270px; min-height: 255px;}
			}
			
			.sub_applicable .appli_compare {margin-top: 135px;}
			.sub_applicable .appli_compare .compare_wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 30px;}
			.sub_applicable .appli_compare .compare_wrap dl {width: 100%; box-sizing: border-box; padding: 44px 40px 30px; border-radius: 20px; text-align: center;}
			.sub_applicable .appli_compare .compare_wrap dt {margin-bottom: 46px; font-size: var(--title-20); font-weight: 600; color: var(--point-color02);}
			.sub_applicable .appli_compare .compare_wrap dd {position: relative;}
			.sub_applicable .appli_compare .compare_wrap dd:before {content: ""; position: absolute; left: 0; bottom: 24px; width: 100%; height: 1px; background: var(--black-color10);}
			.sub_applicable .appli_compare .compare_wrap .graph_wrap {display: flex; justify-content: center; align-items: flex-end; margin: 0 auto;}
			.sub_applicable .appli_compare .compare_wrap .graph_wrap li + li {margin-left: 20px;}
			.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 120px; height: 112px; box-sizing: border-box; padding: 0 10px;}
			.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph:before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--border-color03); z-index: -1;}
			.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph span {opacity: 0; font-size: var(--title-14); color: var(--black-color06);}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li + li .graph {height: 209px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li + li .graph span {font-weight: 600; color: var(--white-color01);}
			.sub_applicable .appli_compare .compare_wrap .graph_wrap li strong {display: block; margin-top: 9px; font-size: var(--title-14); font-weight: 600; color: var(--point-color02);}
			/* green */
				.sub_applicable .appli_compare .compare_wrap dl.green {border: 1px solid var(--point-color01);}
				.sub_applicable .appli_compare .compare_wrap dl.green .graph_wrap li + li .graph:before {background: var(--point-color01);}
				.sub_applicable .appli_compare .compare_wrap dl.green .graph_wrap li + li strong {color: var(--point-color01);}
			/* navy */
				.sub_applicable .appli_compare .compare_wrap dl.navy {border: 1px solid var(--point-color05);}
				.sub_applicable .appli_compare .compare_wrap dl.navy .graph_wrap li + li .graph:before {background: var(--point-color05);}
				.sub_applicable .appli_compare .compare_wrap dl.navy .graph_wrap li + li strong {color: var(--point-color05);}
			/* blue */
				.sub_applicable .appli_compare .compare_wrap dl.blue {border: 1px solid var(--point-color06);}
				.sub_applicable .appli_compare .compare_wrap dl.blue .graph_wrap li + li .graph:before {background: var(--point-color06);}
				.sub_applicable .appli_compare .compare_wrap dl.blue .graph_wrap li + li strong {color: var(--point-color06);}
				
			/* animation*/
				.sub_applicable .appli_compare .compare_wrap dl.aos-animate .graph_wrap li .graph:before {animation: graphAni1 1.4s 0s forwards;}
				.sub_applicable .appli_compare .compare_wrap dl.aos-animate .graph_wrap li + li .graph:before {animation: graphAni2 1.4s 0s forwards;}
				.sub_applicable .appli_compare .compare_wrap dl.aos-animate .graph_wrap li .graph span {animation: txtAni 0.6s 1.2s forwards;}
				
				@keyframes graphAni1 {from {height: 0;} to {height: 112px;}}
				@keyframes graphAni2 {from {height: 0;} to {height: 209px;}}
				@keyframes txtAni {from {opacity: 0;} to {opacity: 1;}}
				
				
			@media only screen and (max-width:1240px) {
				.sub_applicable .appli_compare .compare_wrap {gap: 0 30px;}
				.sub_applicable .appli_compare .compare_wrap dl {padding: 38px 34px 30px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph {width: 9.67vw;}
			}
			@media only screen and (max-width:1200px) {
				.sub_applicable .appli_compare {margin-top: 120px;}
			}
			@media only screen and (max-width:1024px) {
				.sub_applicable .appli_compare {margin-top: 105px;}
			}
			@media only screen and (max-width:1023px) {
				.sub_applicable .appli_compare .compare_wrap {gap: 0 24px;}
				.sub_applicable .appli_compare .compare_wrap dl {padding: 34px 30px 30px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li + li {margin-left: 16px;}
			}
			@media only screen and (max-width:940px) {
				.sub_applicable .appli_compare .compare_wrap {grid-template-columns: repeat(1, 1fr); gap: 30px 0; justify-items: center;}
				.sub_applicable .appli_compare .compare_wrap dl {width: 80%; min-width: 610px; padding: 38px 50px 30px;}
				.sub_applicable .appli_compare .compare_wrap dt {margin-bottom: 36px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li + li {margin-left: 16px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph {width: 120px;}
			}
			@media only screen and (max-width:860px) {
				.sub_applicable .appli_compare {margin-top: 90px;}
			}
			@media only screen and (max-width:640px) {
				.sub_applicable .appli_compare {margin-top: 80px;}
				.sub_applicable .appli_compare .compare_wrap dl {width: 100%; min-width: inherit; padding: 34px 40px 30px; border-radius: 15px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph {width: 110px;}
			}
			@media only screen and (max-width:479px) {
				.sub_applicable .appli_compare {margin-top: 70px;}
				.sub_applicable .appli_compare .compare_wrap {gap: 24px 0;}
				.sub_applicable .appli_compare .compare_wrap dl {padding: 30px 30px 26px;}
				.sub_applicable .appli_compare .compare_wrap dt {margin-bottom: 26px;}
				.sub_applicable .appli_compare .compare_wrap .graph_wrap li .graph {width: 23vw; min-width: 85px;}
			}
			
			
			.sub_applicable .appli_predict {margin-top: 96px;}
			.sub_applicable .circle_progress {margin-top: 30px; padding-bottom: 0;}
			.sub_applicable .circle_progress li.circle .txt {max-width: 80%; margin: 0 auto;}
			.sub_applicable .circle_progress li.circle .txt dt span {margin-top: 10px; font-size: var(--title-14);}
			
			/* gray */
				.sub_applicable .circle_progress li.circle.gray .thumb > div:before {background: linear-gradient(90deg, var(--black-color08) 0%, var(--point-color01) 100%);}
				.sub_applicable .circle_progress li.circle.gray .thumb > div:after {border-top-color: var(--point-color01); border-left-color: var(--point-color01);}
			/* green */
				.sub_applicable .circle_progress li.circle.green .thumb > div:before {background: linear-gradient(90deg, var(--point-color01) 0%, var(--point-color03) 100%);}
				.sub_applicable .circle_progress li.circle.green .thumb > div:after {border-top-color: var(--point-color03); border-left-color: var(--point-color03);}
			.sub_applicable .circle_progress li.info .tit {/* height: 283px; */ height: 240px;}
			.sub_applicable .circle_progress li.info .tit strong {margin-top: 90px; max-width:90px;}
			
			/* green */
				.sub_applicable .circle_progress li.info.green {right: 61%;}
			/* blue */
				.sub_applicable .circle_progress li.info.blue {left: 61%;}
			
			@media only screen and (max-width:1240px) {
				/* green */
					.sub_applicable .circle_progress li.info.green {right: 62%;}
				/* blue */
					.sub_applicable .circle_progress li.info.blue {left: 62%;}
			}
			@media only screen and (max-width:1200px) {
				.sub_applicable .circle_progress li.info .tit {height: 270px;}
				.sub_applicable .circle_progress li.info .tit strong {margin-top: 102px;}
			}
			@media only screen and (max-width:1080px) {
				.sub_applicable .circle_progress li.info .tit {height: 260px;}
				.sub_applicable .circle_progress li.info .tit strong {margin-top: 92px;}
			}
			@media only screen and (max-width:1023px) {
				.sub_applicable .circle_progress li.circle .thumb > div:before {width: 170px;}
				.sub_applicable .circle_progress li.circle .thumb > div:before,
				.sub_applicable .circle_progress li.circle .thumb > div:after {right: -170px;} 
				.sub_applicable .circle_progress li.circle .txt dt br {display: none;}

				.sub_applicable .circle_progress li.info .tit {height: 180px;}
				.sub_applicable .circle_progress li.info .tit strong {max-width: inherit; margin-top: 0;}
			}
			@media only screen and (max-width:640px) {
				.sub_applicable .appli_predict {margin-top: 76px;}
				.sub_applicable .appli_predict .sub_title h5 br {display: none;}
			}
			@media only screen and (max-width:479px) {
				.sub_applicable .circle_progress li.circle .thumb > div:before {width: 180px;}
				.sub_applicable .circle_progress li.circle .thumb > div:before,
				.sub_applicable .circle_progress li.circle .thumb > div:after {right: -180px;}
				
				.sub_applicable .circle_progress li.circle.green .thumb > div:before {width: 200px;}
				.sub_applicable .circle_progress li.circle.green .thumb > div:before,
				.sub_applicable .circle_progress li.circle.green .thumb > div:after {right: -200px;} 
			}
			@media only screen and (max-width:440px) {
				.sub_applicable .circle_progress li.circle .thumb > div:before {width: 200px;}
				.sub_applicable .circle_progress li.circle .thumb > div:before,
				.sub_applicable .circle_progress li.circle .thumb > div:after {right: -200px;}
				
				.sub_applicable .circle_progress li.circle.green .thumb > div:before {width: 220px;}
				.sub_applicable .circle_progress li.circle.green .thumb > div:before,
				.sub_applicable .circle_progress li.circle.green .thumb > div:after {right: -220px;} 
			}
			@media only screen and (max-width:390px) {
				.sub_applicable .circle_progress li.circle .thumb > div:before {width: 230px;}
				.sub_applicable .circle_progress li.circle .thumb > div:before,
				.sub_applicable .circle_progress li.circle .thumb > div:after {right: -230px;}
				
				.sub_applicable .circle_progress li.circle.green .thumb > div:before {width: 250px;}
				.sub_applicable .circle_progress li.circle.green .thumb > div:before,
				.sub_applicable .circle_progress li.circle.green .thumb > div:after {right: -250px;} 
			}
			@media only screen and (max-width:360px) {
				.sub_applicable .circle_progress li.circle .thumb > div:before {width: 260px;}
				.sub_applicable .circle_progress li.circle .thumb > div:before,
				.sub_applicable .circle_progress li.circle .thumb > div:after {right: -260px;}
				
				.sub_applicable .circle_progress li.circle.green .thumb > div:before {width: 280px;}
				.sub_applicable .circle_progress li.circle.green .thumb > div:before,
				.sub_applicable .circle_progress li.circle.green .thumb > div:after {right: -280px;} 
			}
			 
			.sub_applicable .appli_goals {margin-top: 150px;}
			.sub_applicable .appli_goals .goals_list {counter-reset: list-num 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 20px; margin-top: 20px;}
			.sub_applicable .appli_goals .goals_list dl {position: relative; box-sizing: border-box; padding: 26px 30px 54px; border-radius: 20px;}
			.sub_applicable .appli_goals .goals_list dl:after {content: "0" counter(list-num); counter-increment: list-num; position: absolute; right: 20px; bottom: 18px; font-size: var(--title-16); color: var(--black-color08); font-weight: 600; text-align: right;}
				.sub_applicable .appli_goals .goals_list dl:nth-child(1) {background: linear-gradient(90deg, #E6F5E8 0%, #CDEAF9 533.33%);}
				.sub_applicable .appli_goals .goals_list dl:nth-child(2) {background: linear-gradient(90deg, #E6F5E8 -108.33%, #CDEAF9 425%);}
				.sub_applicable .appli_goals .goals_list dl:nth-child(3) {background: linear-gradient(90deg, #E6F5E8 -216.67%, #CDEAF9 316.67%);}
				.sub_applicable .appli_goals .goals_list dl:nth-child(4) {background: linear-gradient(90deg, #E6F5E8 -325%, #CDEAF9 208.33%);}
				.sub_applicable .appli_goals .goals_list dl:nth-child(5) {background: linear-gradient(90deg, #E6F5E8 -433.33%, #CDEAF9 100%);}
			.sub_applicable .appli_goals .goals_list dt {padding-left: 12px; padding-bottom: 8px; font-size: var(--title-20); color: var(--black-color04); font-weight: 600;}
			.sub_applicable .appli_goals .goals_list dt strong {color: var(--point-color01);}
			.sub_applicable .appli_goals .goals_list .dot_list li + li {margin-top: 0;}
			.sub_applicable .appli_goals .goals_list .dot_list li:before {background: var(--point-color04);}
			
			@media only screen and (max-width:1340px) {
				.sub_applicable .appli_goals .goals_list dl {padding-left: 22px;}
			}
			@media only screen and (max-width:1200px) {
				.sub_applicable .appli_goals {margin-top: 140px;}
				.sub_applicable .appli_goals .goals_list {gap: 0 14px;}
			}
			@media only screen and (max-width:1024px) {
				.sub_applicable .appli_goals {margin-top: 130px;}
				.sub_applicable .appli_goals .goals_list {grid-template-columns: repeat(3, 1fr); gap: 16px;}
			}
			@media only screen and (max-width:860px) {
				.sub_applicable .appli_goals {margin-top: 115px;}
				.sub_applicable .appli_goals .goals_list {gap: 14px;}
				.sub_applicable .appli_goals .goals_list dl {padding: 24px 26px 50px 22px;}
			}
			@media only screen and (max-width:640px) {
				.sub_applicable .appli_goals {margin-top: 100px;}
				.sub_applicable .appli_goals .goals_list {grid-template-columns: repeat(2, 1fr);}
				.sub_applicable .appli_goals .goals_list dt {padding-left: 10px;}
			}
			@media only screen and (max-width:479px) {
				.sub_applicable .appli_goals {margin-top: 85px;}
				.sub_applicable .appli_goals .goals_list {gap: 10px;}
				.sub_applicable .appli_goals .goals_list dl {padding: 22px 22px 46px 18px;}
				.sub_applicable .appli_goals .goals_list dt {padding-left: 8px;}
			 }

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

	 오시는길

───────────────────────────────────────────────────────────*/
	.sub_directions{display: flex;flex-direction:column;gap: 52px;}
        .sub_directions .map_wrap{height:460px;}
        .sub_directions .map_wrap img{width:100%; height:100%; object-fit: cover;}
        .sub_directions .map_info{font-size: var(--title-20);}
		.sub_directions .map_info dl{padding:28px 0 20px; display: flex; align-items:center;border-bottom:1px solid var(--border-color01);}
		.sub_directions .map_info dt{min-width: 170px; margin-right:30px;}
        .sub_directions .map_info dt strong{font-size: 150%; font-weight: bold; color: var(--black-color01); line-height: 1.4;}
        .sub_directions .map_info .more{display: inline-flex; font-size: var(--title-20);}
        .sub_directions .map_info .more span{display: inline-flex; align-items: center; justify-content: center; font-size: 90%; font-weight: 500; color: var(--point-color01); border:1px solid var(--point-color01); text-align: center; padding:0 30px; height:50px; box-sizing: border-box; transition: all 0.4s;}
        .sub_directions .map_info .exp_list{display: flex; flex-wrap: wrap; gap:15px 50px;}
        .sub_directions .map_info .exp_list > li{font-size: var(--title-20);}
        .sub_directions .map_info .exp_list > li > em{font-size:0; display:inline-block; vertical-align: middle; width:22px;}
        .sub_directions .map_info .exp_list > li > span{display:inline-block; font-size: 90%; font-weight: 500; color: var(--black-color06); line-height: 1.5; vertical-align: top; }

            /* over */
                @media screen and (min-width:1024px){
                    .sub_directions .map_info .more span:hover{background:var(--point-color01); color: var(--point-white);}
                }

        @media screen and (max-width:1023px){
            .sub_directions .map_wrap{height: 44.5vw; min-height: 250px;}
            .sub_directions .map_info .exp_list{gap:15px 45px;}
			
			.sub_directions .map_info dl{flex-direction: column;align-items: flex-start;}
			.sub_directions .map_info dd{padding: 15px 0 0 0;}
			.sub_directions .map_info .exp_list > li{display: flex; width: 100%;}
			.sub_directions .map_info .exp_list > li > em img {margin-top: 1px;}
			.sub_directions .map_info .exp_list > li > span{width:calc(100% - 22px);box-sizing:border-box;padding-left:10px;}
        }
        @media screen and (max-width:860px){
            .sub_directions .map_info .exp_list{gap:15px 40px;}
            .sub_directions .map_info .more span{padding:0 25px;}
        }
        @media screen and (max-width:640px){
            .sub_directions{gap:40px;}
            .sub_directions .map_info .exp_list{gap:15px 35px;}
            .sub_directions .map_info .more span{padding:0 20px; height:45px;}
        }
        @media screen and (max-width:479px){
            .sub_directions .map_info .exp_list{gap:15px 30px;}
            .sub_directions .map_info .exp_list > li{width:100%;}
            .sub_directions .map_info .exp_list > li > span{padding-left:3px;}
        }