@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 영역

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



/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		/* custom button type */
			/* button 공통 요소 */
		.btn, .btn_lg, .btn_sm, .btn_md {font-family:'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;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:#a18e74 !important;background-color:#a18e74 !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_title{}
		.sub_title.center{text-align:center;}
	.sub_title h3{font-size:50px; font-weight:bold; color:#111;  letter-spacing:-0.03em;}
		.sub_title h3.en{letter-spacing:0; font-family:'Anton', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif; font-weight:400;}
		.sub_title h3 + h6{margin-top: 40px;}
	.sub_title h3 small{font-size:46px;}
	.sub_title h4{font-size:40px;font-weight:600;color:#333;letter-spacing: -0.01em;}
		.sub_title h4 + h5{margin-top: 28px;}
	.sub_title h4 strong{color:#a18e74; font-weight:inherit; font-size:inherit; }
	.sub_title h5{font-size:24px;font-weight:600;color:#333;letter-spacing: -0.04em;line-height:166%;}
		.sub_title h5 + h6{margin-top: 22px;}
	.sub_title h6{font-size:20px;font-weight:400;color:#333;letter-spacing: -0.04em;line-height:170%; box-sizing:border-box;}
		.sub_title h6.en{font-family:'Anton', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif; letter-spacing:0;}
		.sub_title h6 + h3{margin-top: 12px;}
	.sub_title h6 strong{color:#a18e74; font-weight:inherit; font-size:inherit; text-transform:uppercase;}

	.sub_visual{position:relative; width:100%;height:500px;background-position:center;background-size:cover;text-align:center;padding-top: 58px;box-sizing: border-box; z-index:3;}
	.sub_visual .sub_title{position:relative; display:flex; width:100%; height:100%; display:flex;align-items:center;justify-content: center;}
	.sub_visual .sub_title h3{color:#fff; font-weight:400;}

	.sub_location{position:absolute;right: 40px;bottom:60px;display:flex; align-items:center;}
	.sub_location .home{font-size:0;width:20px;height:19px;background:url('../images/sub/sub_location_home.png') no-repeat center;margin-right: 42px;}
	.sub_location dl{display:flex;  text-align:left;}
	.sub_location dl dt, .sub_location dl dd{position:relative;  font-size:16px; color:#fff; letter-spacing:-0.02em; width:98px; }
	.sub_location dl dt{font-weight:300;margin-right: 42px;}
	.sub_location dl dd{font-weight:400;}
	.sub_location dl dt a, .sub_location dl dd a{font-size:inherit; font-weight:inherit; color:inherit;}
	.sub_location dl dt span, .sub_location dl dd span{position:relative; display:block; width:100%; padding-right:15px; box-sizing:border-box; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
		.sub_location dl dt span:before, .sub_location dl dd span:before{position:absolute; content:''; width:11px; height:7px; background:url('../images/sub/sub_location_arrow.png') no-repeat center; top:50%; transform:translateY(calc(-50% - 0.5px)); right:0; transition:all 0.4s;}
		.sub_location dl dt.on span:before, .sub_location dl dd.on span:before{transform:translateY(calc(-50% - 0.5px)) scaleY(-1);}
	.sub_location dl dt ul, .sub_location dl dd ul{position:absolute; top:calc(100% + 15px); left:0; background:#a18e74; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.2); width:100%; padding:10px 10px; box-sizing:border-box; display:none;}
	.sub_location dl dt ul li, .sub_location dl dd ul li{padding:5px 0; font-size:15px; color:rgba(255,255,255,0.7);}
	.sub_location dl dt ul li.on, .sub_location dl dd ul li.on{color:#fff;}

	.nav_wrap{padding-top: 87px;padding-bottom: 60px;}
	.nav_wrap .sub_title h3{}

	.bg_wrap{position:relative; overflow:hidden;}
		.bg_wrap:before{position:absolute; content:''; width:100%; top:0; height:680px; background:#f5f5f5; z-index:-1;}

	@media only screen and (max-width:1217px){
		.sub_visual{height:41.07vw; min-height:250px;}
		.sub_title h3{font-size:4vw;}
			.sub_title h3 + h6{margin-top:30px;}
		.sub_title h4{font-size:3.3vw;}
		.sub_title h5{font-size:22px;}
		.sub_title h6{font-size:18px;}

		.bg_wrap:before{height:55.8vw;}
	}
	@media only screen and (max-width:1023px){
		.sub_title h3 + h6{margin-top:25px;}
		.sub_title h5{font-size:20px;}
		.sub_title h6{font-size:17px;}
			.sub_title.center h6{padding:0 20px;}
		.sub_title h3 small{font-size:40px;}
		.sub_location{right:15px; bottom:30px;}
		.sub_location .home, .sub_location dl dt{margin-right:30px;}
		.sub_location dl dt, .sub_location dl dd{font-size:15px;}
		.sub_location dl dt ul li, .sub_location dl dd ul li{font-size:14px;}
		.nav_wrap{padding-bottom: 40px;}
	}
	@media only screen and (max-width:860px){
		.sub_title h3{font-size:34px;}
			.sub_title h3 + h6{margin-top:20px;}
		.sub_title h4{font-size:28px;}
			.sub_title h4 + h5{margin-top:20px;}
		.sub_title h5{font-size:18px;}
			.sub_title h5 + h6{margin-top:15px;}
		.sub_title h6{font-size:16px;}

		.sub_location{bottom:20px;}
		.sub_location .home, .sub_location dl dt{margin-right:25px;}
		.sub_location dl dt, .sub_location dl dd{font-size:14px;}
		.sub_location dl dt ul li, .sub_location dl dd ul li{font-size:13px;}
	}
	@media only screen and (max-width:640px){
		.sub_title h3 small{font-size:34px;}		
		.sub_title h3 + h6{margin-top:15px;}
		.sub_title h4{font-size:25px;}
		.sub_title h5{font-size:16px;}
		.sub_title h6{font-size:15px; }
			.sub_title h6 + h3{margin-top:7px;}
			.sub_title.center h6{padding:0 15px;}
		.sub_title h6 br{display:none; }

		.sub_location{top:100%; left:0; bottom:auto; right:auto; width:100%; align-items:stretch;}
		.sub_location .home{width:45px; height:45px; background-color:#a18e74; margin-right:0; background-size:18px auto;}
		.sub_location dl{width: calc(100% - 45px);}
		.sub_location dl dt{display:none;}
		.sub_location dl dd{width:100%;color:#333; padding:0 15px;border-bottom:1px solid #ddd;height:100%;display: flex;align-items: center;box-sizing: border-box; background:#fff;}
		.sub_location dl dd ul{top:100%; left:-45px; width:100vw; box-shadow:0 5px 15px rgba(0,0,0,0.2);}
		.sub_location dl dd span:before{background-image:url('../images/sub/sub_location_arrow_pt.png'); }
		.nav_wrap{padding-bottom: 25px;}
	}
	@media only screen and (max-width:479px){
		.sub_title h3 small{font-size:28px;}
	}
	@media only screen and (max-width:431px){
		.sub_title h5{font-size:15px;}
		.sub_title h6{font-size:14px; line-height:145%;}
		.sub_location .home{width:40px; height:40px; background-size:16px auto;}
		.sub_location dl{width: calc(100% - 40px);}
		.sub_location dl dd ul{left:-40px}
	}
	@media only screen and (max-width:374px){
		.sub_title h3{font-size:32px;}
		.sub_title h3 small{font-size:26px;}
		.sub_title h4{font-size:23px;}
	}

/*───────────────────────────────────────────────────────────
	service
───────────────────────────────────────────────────────────*/
	.sub_service{}
	.sub_service .img_title{}
	.sub_service .img_title dt{font-size:30px; font-weight:bold; color:#a18e74;}
		.sub_service .img_title dt + dd{margin-top: 19px;}
	.sub_service .img_title dd + dd{margin-top: 98px;}
	.sub_service .img_title dd .exp{display:block; font-size:24px; font-weight:bold; color:#333;}
		.sub_service .img_title dd .exp + .img_list{margin-top: 25px;}
	.sub_service .img_list{display:flex; flex-wrap:wrap; width:calc(100% + 4px);}
	.sub_service .img_list li{font-size:0; border:1px solid #ddd; width:calc(100% / 4); box-sizing:border-box; margin-right:-1px; margin-bottom:-1px; display:flex; align-items:center; justify-content:center; height:130px; padding:15px;}

	@media only screen and (max-width:1217px){
		.sub_service .img_title dt{font-size:28px;}
		.sub_service .img_title dd .exp{font-size:22px;}
		.sub_service .img_list li{height:120px;}
		
	}
	@media only screen and (max-width:1023px){
		.sub_service .img_title dt{font-size:26px;}
		.sub_service .img_title dd .exp{font-size:20px;}
			.sub_service .img_title dd .exp + .img_list{margin-top:20px;}
		.sub_service .img_list li{height:110px; padding:30px;}
		.sub_service .img_list li img{height:100%; object-fit:contain;}
	}
	@media only screen and (max-width:860px){
		.sub_service .img_title dt{font-size:24px;}
		.sub_service .img_title dd .exp{font-size:18px;}
			.sub_service .img_title dd .exp + .img_list{margin-top:15px;}
		.sub_service .img_list li{height:100px; width:calc(100% / 3);}
	}
	@media only screen and (max-width:640px){
		.sub_service .img_title dt{font-size:22px;}
		.sub_service .img_title dd + dd{margin-top:70px;}
		.sub_service .img_title dd .exp{font-size:17px;}
			.sub_service .img_title dd .exp + .img_list{margin-top:12px;}
		.sub_service .img_list li{height:90px; width:calc(100% / 2); padding:25px;}
	}
	@media only screen and (max-width:479px){
		.sub_service .img_title dt{font-size:21px;}
		.sub_service .img_title dd .exp{font-size:16px;}
		.sub_service .img_list li{height:80px; padding:20px;}
	}
	@media only screen and (max-width:431px){
		.sub_service .img_list li{height:70px; }
	}
	@media only screen and (max-width:374px){
		.sub_service .img_list li{height:60px; padding:18px;}
	}

	/* about */
		.sub_service .about{margin-top:11px; }
		.sub_service .about .step_list{display:flex; counter-reset: step; padding-bottom:120px;}
		.sub_service .about .step_list > li{text-align:center;width:100%;}
			.sub_service .about .step_list > li:last-child{margin-right:0;}
		.sub_service .about .step_list .title{position:relative;background:#a18e74;padding-bottom: 66%;border-radius:100%;width: 66%;margin: 0 auto;border:1px solid #fff;box-sizing:border-box;box-shadow: 3px 0 20px rgba(0,0,0,0.2);}
			.sub_service .about .step_list .title:before{position:absolute; content:''; width:120%; height:120%; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:100%; background:rgba(161,142,116,0.1);}
			.sub_service .about .step_list .title:after{position:absolute;content:'';top: 27px;left:50%;transform:translateX(calc(-50% - 0.5px));background-position:center;background-repeat:no-repeat;background-size:100% auto;}
			.sub_service .about .step_list li:nth-child(1) .title:after{width:47px; height:47px; background-image:url('../images/sub/service_about_step01.png');}
			.sub_service .about .step_list li:nth-child(2) .title:after{width:47px; height:51px; background-image:url('../images/sub/service_about_step02.png');}
			.sub_service .about .step_list li:nth-child(3) .title:after{width:45px; height:45px; background-image:url('../images/sub/service_about_step03.png');}
			.sub_service .about .step_list li:nth-child(4) .title:after{width:47px; height:45px; background-image:url('../images/sub/service_about_step04.png');}
		.sub_service .about .step_list .title span{position:absolute;top: 47%;left:50%;transform: translateX(-50%);font-size:26px;font-weight:500;color:#fff;letter-spacing:-0.04em;width: 100%;}
			.sub_service .about .step_list .title span:before{display:block;content: 'step 0' counter(step);counter-increment: step;font-size:18px;font-weight: 300;color:#fcfadd;letter-spacing: 0;margin-bottom: 10px;}
		.sub_service .about .step_list .info{position:relative; margin-top: 46px;padding-top: 42px;}
			.sub_service .about .step_list .info:before{position:absolute; content:''; width:100%; height:2px; top:0; left:0; background-image: linear-gradient(to right, #ccc 30%, rgba(255,255,255,0) 0%);background-position: bottom;background-size: 8px 2px;background-repeat: repeat-x;}
			.sub_service .about .step_list .info:after{position:absolute; content:''; width:10px; height:10px; background:#aaa; border-radius:100%; top:-4px; left:50%; transform:translateX(-50%);}
		.sub_service .about .step_list .info ul{}
			.sub_service .about .step_list .info ul:before{position:absolute; content:''; width:1px; height:100%; background:#ddd; top:0; left:50%; transform:translateX(-50%);}
			.sub_service .about .step_list > li + li .info ul:after{position:absolute; content:''; width:8px; height:14px; background:url('../images/sub/service_about_step_arrow.png') no-repeat center; top:-6px; left:-4px;}
		.sub_service .about .step_list .info ul li{position:relative;z-index:2;border:1px solid #ddd;box-sizing:border-box;padding: 12px 10px 12px;font-size:18px;font-weight:400;color:#333;line-height: 132%;letter-spacing: -0.05em;width: 73.4%;margin:0 auto;background:#fff;}
			.sub_service .about .step_list .info ul li + li{margin-top:10px;}
		.sub_service .about .step_list .info ul li span{display:block;font-size:15px;font-weight:300;color:#666;letter-spacing: -0.04em;}
		.sub_service .about .bg_wrap{padding-top: 113px;}
		.sub_service .about .follow_up_list{display:flex;flex-wrap:wrap;margin-top: 72px;}
		.sub_service .about .follow_up_list > li{margin-right:40px; width:calc(100% / 2 - 20px);}	
			.sub_service .about .follow_up_list > li:nth-child(2n){margin-right:0;}
			.sub_service .about .follow_up_list > li:nth-child(n+3){margin-top: 53px;}
		.sub_service .about .follow_up_list .thumb{font-size:0;box-shadow: 2px 2px 20px rgba(0,0,0,0.2);}
			.sub_service .about .follow_up_list .thumb + .sub_title{margin-top: 22px;}
		.sub_service .about .follow_up_list .sub_title{}

		@media only screen and (max-width:1217px){
			.sub_service .about .step_list .title{width:69%; padding-bottom:69%;}
			.sub_service .about .step_list .title span{font-size:23px; top:50%;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:17px;}
			.sub_service .about .step_list .info ul li span{font-size:14px;}

			.sub_service .about .follow_up_list > li{margin-right:30px; width:calc(100% / 2 - 15px);}
		}
		@media only screen and (max-width:1023px){
			.sub_service .about .step_list .title{width:80%; padding-bottom:80%;}
				.sub_service .about .step_list .title:before{width:115%; height:115%;}
			.sub_service .about .step_list .title span{font-size:21px;}
			.sub_service .about .step_list .title span:before{margin-bottom:5px;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:16px;}
			.sub_service .about .step_list .info ul li{width:85%;}

			.sub_service .about .follow_up_list > li{margin-right:15px; width:calc(100% / 2 - 7.5px);}
			.sub_service .about .follow_up_list .thumb + .sub_title{margin-top:15px;}
		}
		@media only screen and (max-width:900px){
			.sub_service .about .bg_wrap .sub_title h5 br{display:none;}
		}
		@media only screen and (max-width:860px){
			.sub_service .about .step_list{padding-bottom:100px;}
			.sub_service .about .step_list li:nth-child(1) .title:after{width:37px; height:37px;}
			.sub_service .about .step_list li:nth-child(2) .title:after{width:37px; height:41px; }
			.sub_service .about .step_list li:nth-child(3) .title:after{width:35px; height:35px;}
			.sub_service .about .step_list li:nth-child(4) .title:after{width:37px; height:35px;}
			.sub_service .about .step_list .title span{font-size:18px;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:15px;}
			.sub_service .about .step_list .info ul li{width:85%;}

			.sub_service .about .bg_wrap{padding-top:100px;}
			.sub_service .about .follow_up_list{margin-top:50px;}
			.sub_service .about .follow_up_list .thumb + .sub_title{margin-top:12px;}
		}
		@media only screen and (max-width:767px){
			.sub_service .about .step_list .title:after{top:20px;}
				.sub_service .about .step_list li:nth-child(1) .title:after{width:32px; height:32px;}
				.sub_service .about .step_list li:nth-child(2) .title:after{width:32px; height:36px; }
				.sub_service .about .step_list li:nth-child(3) .title:after{width:30px; height:30px;}
				.sub_service .about .step_list li:nth-child(4) .title:after{width:32px; height:30px;}
			.sub_service .about .step_list .title span{font-size:16px;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:14px;}
			.sub_service .about .step_list .info ul li{width:calc(100% - 15px);}
			.sub_service .about .step_list .info ul li span{font-size:13px;}
		}
		@media only screen and (max-width:640px){
			.sub_service .about .step_list{flex-wrap:wrap; padding-bottom:70px;}
			.sub_service .about .step_list > li{width:50%;}
				.sub_service .about .step_list > li:nth-child(n+3){margin-top:60px;}
			.sub_service .about .step_list .title:after{top:22%;}
				.sub_service .about .step_list li:nth-child(1) .title:after{width:47px; height:47px;}
				.sub_service .about .step_list li:nth-child(2) .title:after{width:47px; height:51px;}
				.sub_service .about .step_list li:nth-child(3) .title:after{width:45px; height:45px;}
				.sub_service .about .step_list li:nth-child(4) .title:after{width:47px; height:45px;}
			.sub_service .about .step_list .title span{font-size:18px;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:15px;}
			.sub_service .about .step_list > li:nth-child(3) .info ul:after{display:none;}

			.sub_service .about .bg_wrap{padding-top:70px;}
		}
		@media only screen and (max-width:479px){
			.sub_service .about .step_list .title span{font-size:16px; top:56%;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:14px;}
			.sub_service .about .step_list .info ul li span{font-size:12px;}

			.sub_service .about .follow_up_list > li{width:100%; margin-right:0;}
			.sub_service .about .follow_up_list > li:nth-child(n+2){margin-top:30px;}
		}
		@media only screen and (max-width:431px){
			.sub_service .about .step_list li:nth-child(1) .title:after{width:37px; height:37px;}
			.sub_service .about .step_list li:nth-child(2) .title:after{width:37px; height:41px; }
			.sub_service .about .step_list li:nth-child(3) .title:after{width:35px; height:35px;}
			.sub_service .about .step_list li:nth-child(4) .title:after{width:37px; height:35px;}
			.sub_service .about .step_list .title span{font-size:15px; top:54%;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:13px;}
		}
		@media only screen and (max-width:374px){
			.sub_service .about .step_list li:nth-child(1) .title:after{width:32px; height:32px;}
			.sub_service .about .step_list li:nth-child(2) .title:after{width:32px; height:36px; }
			.sub_service .about .step_list li:nth-child(3) .title:after{width:30px; height:30px;}
			.sub_service .about .step_list li:nth-child(4) .title:after{width:32px; height:30px;}
			.sub_service .about .step_list .title span{font-size:14px;}
			.sub_service .about .step_list .title span:before, .sub_service .about .step_list .info ul li{font-size:12px;}
		}

	/* platform */
		.sub_service .platform{margin-top:-3px;}

	/* brand */
		.sub_service .brand{margin-top: 26px;}

	/* partnership */
		.sub_service .partnership.about{margin-top:-8px;}
		.sub_service .partnership.about .follow_up_list{margin-top:0;}
		.sub_service .partnership.about .follow_up_list > li{margin:0 30px 0 0; width:calc(100% / 3 - 20px); }
			.sub_service .partnership.about .follow_up_list > li:nth-child(3n){margin-right:0;}
			.sub_service .partnership.about .follow_up_list > li:nth-child(n+4){margin-top:51px;}
		.sub_service .partnership.about .follow_up_list .thumb{box-shadow:none;}

		@media only screen and (max-width:1217px){
			.sub_service .partnership.about .follow_up_list > li{margin-right:20px; width:calc(100% / 3 - 13.34px); }
		}
		@media only screen and (max-width:1023px){
			.sub_service .partnership.about .follow_up_list > li{margin-right:15px; width:calc(100% / 3 - 10px); }
		}
		@media only screen and (max-width:640px){
			.sub_service .partnership.about .follow_up_list > li{width:calc(100% / 2 - 7.5px); }
			.sub_service .partnership.about .follow_up_list > li:nth-child(3n){margin-right:15px;}
			.sub_service .partnership.about .follow_up_list > li:nth-child(2n){margin-right:0;}
			.sub_service .partnership.about .follow_up_list > li:nth-child(n+3){margin-top:51px;}
		}
		@media only screen and (max-width:410px){
			.sub_service .partnership.about .follow_up_list > li{width:100%;  margin-right:0;}
			.sub_service .partnership.about .follow_up_list > li:nth-child(3n){margin-right:0;}
			.sub_service .partnership.about .follow_up_list > li:nth-child(n+2){margin-top:30px;}
		}

/* marketing */
		.marketing {}
		.marketing .sub_title {}
		.marketing .sub_title h5 {font-size:30px;line-height:1.47;font-weight:600;color:#333;letter-spacing:-0.04em;}
		.marketing .live {font-size:0;padding:92px 0 120px;}
		.marketing .live li {display:inline-block;width:calc(33.333% - 4.2%);border-radius:40px;overflow:hidden;box-shadow:0 0 30px rgba(0,0,0,0.2);}
		.marketing .live li + li {margin-left:6.3%;}
		.marketing .live li:nth-of-type(3n+1) {margin-left:0;}
		.marketing .live li:nth-of-type(n+4) {margin-top:7%;}
		.marketing .step_list {}
		.marketing .step_list .title.small {width:64.3%;padding-bottom:64.3%;background:#888888;margin:0;}
		.marketing .step_list .title.small:before {background:#666;opacity:0.1;}
		.marketing .step_list .title.small:after {display:none;}
		.marketing .step_list .title.small span {top:40%;}
		.marketing .step_list .title.small span:before {display:none;}
		.marketing .bg_wrap {padding-bottom:140px;}
		.marketing .bg_wrap:before {height:100%;}
		.marketing .sns_wrap {padding-top:80px;}
		.marketing .sns_wrap .step_list {float:left;width:calc(100% - 41.667%);padding:2% 0;}
		.marketing .sns_wrap .step_list.last {width:41.667%;position:relative;padding:0;margin:0;}
		.marketing .sns_wrap .step_list.last:before {content:'';display:block;position:absolute;width:100%;height:120%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:10em;background:rgba(161,142,116,0.1);}
		.marketing .sns_wrap .step_list .info:before {width:120%;top:50%;}
		.marketing .sns_wrap .step_list .info:after {position:absolute;content:'';width:8px;height:14px;background:url('../images/sub/service_about_step_arrow.png') no-repeat center;top:50%;left:80%;transform:translateY(-50%);}
		.marketing .sns_wrap .step_list.last li {}
		.marketing .sns_wrap .step_list.last li .title {width:80%;padding-bottom:80%;}
		.marketing .sns_wrap .step_list.last li + li:before {content:'';display:block;position:absolute;width:4%;height:6.44%;background:url('../images/sub/service_about_step_equle.png') no-repeat center;background-size:100%;top:50%;left:50%;transform:translate(-50%,-50%);}
		.marketing .sns_wrap .step_list.last li .title:before {display:none;}
		.marketing .sns_wrap .step_list.last li .title span {font-size:26px;line-height:1;font-weight:600;color:#fcfadd;top:59%;}
		.marketing .sns_wrap .step_list.last li:nth-of-type(1) .title:after {width:27%;height:27%;background-image:url('../images/sub/live-icon-01.png');top:23%;background-size:100% auto;}
		.marketing .sns_wrap .step_list.last li:nth-of-type(2) .title:after {width:48%;height:36%;background-image:url('../images/sub/live-icon-02.png');top:13%;background-size:100% auto;}
		.marketing .sns_wrap .step_list.last li .title span:before {display:none;}
		.marketing .sns_wrap .step_list li {margin-top:0;padding:0;padding:0 !important;margin:0 !important;}
		
		@media only screen and (max-width:1217px){
			.marketing .sns_wrap .step_list.last li .title span {font-size:23px;}
		}
		@media only screen and (max-width:1023px){
			.marketing .sns_wrap .step_list.last li .title span {font-size:21px;}
		}
		@media only screen and (max-width:860px) {
			.marketing .sns_wrap {padding-top:58px;}
			.marketing .sns_wrap .step_list.last li .title span {font-size:18px;}
		}
		@media only screen and (max-width:767px) {
			.marketing .sns_wrap .step_list.last li .title span {font-size:16px;}
			.marketing .live li {border-radius:30px;}
		}
		@media only screen and (max-width:640px) {
			.marketing .sns_wrap .step_list {float:none;width:97%;margin:0 auto;}
			.marketing .sns_wrap .step_list li {width:calc(33.333% - 6.7%);}
			.marketing .sns_wrap .step_list li + li {padding-left:10% !important;}
			.marketing .step_list .title.small {width:100%;padding-bottom:100%;}
			.marketing .sns_wrap .step_list .info:after {left:115%;}
			.marketing .sns_wrap .step_list .info:nth-of-type(2):after {left:111%;}
			.marketing .sns_wrap .step_list .info:nth-of-type(2):after {display:none;}
			.marketing .sns_wrap .step_list .info:nth-of-type(3):before {width:100%;}
			.marketing .step_list .title.small span {top:43%;}
			.marketing .sns_wrap .step_list.last {width:100%;margin-top:6%;}
			.marketing .sns_wrap .step_list.last:before {width:97%;height:110%;}
			.marketing .sns_wrap .step_list.last li {width:calc(50% - 5%);}
			.marketing .sns_wrap .step_list.last li + li {padding-left:10%;}
			.marketing .live li {border-radius:20px;}
		}
		@media only screen and (max-width:431px) {
			.marketing .sns_wrap .step_list.last li .title span {font-size:15px;}
			.marketing .live li {width:calc(50% - 3.2%);}
			.marketing .live li:nth-of-type(odd) {margin-left:0;}
			.marketing .live li:nth-of-type(even) {margin-left:6.3%;}
		}

		/* development */		
		#wrap .development .step_list {padding-bottom:40px;display:block;font-size:0;margin-top:50px;padding-bottom:113px;}
		#wrap .development .step_list:after {content:'';display:block;clear:both;}
		#wrap .development .step_list li {width: calc(25% - 10%);padding-top:0;margin-top:0;display:inline-block;float:left;}
		#wrap .development .step_list li:before {top:50%;left:100%;z-index: -1;}
		#wrap .development .step_list li:nth-of-type(5):before {transform: translateX(-50%) rotate(90deg);left: 50%;top: 100%;}
		#wrap .development .step_list li:nth-of-type(6):before {display:none;}
		#wrap .development .step_list li:after {position:absolute;content:'';width:8px;height:14px;background:url('../images/sub/service_about_step_arrow.png') no-repeat center;top:50%;left:118%;transform:translateY(-50%);}
		#wrap .development .step_list li + li:after {left: 119%;}
		#wrap .development .step_list li:nth-of-type(n+6) {float:right;margin-top:40px;}
		#wrap .development .step_list li:nth-of-type(n+6):after {transform:translateY(-50%) rotate(180deg);left: 120%;}
		#wrap .development .step_list li:nth-of-type(5):after {transform: translateX(-50%) rotate(90deg);left: 50%;top: 107%;)}
		#wrap .development .step_list li:nth-of-type(6):after {display:none;}
		#wrap .development .step_list li:last-of-type {margin-left: 0;}
		#wrap .development .step_list li:last-of-type:after {left:118%;}
		#wrap .development .step_list li + li {margin-left: 6.25%;}
		#wrap .development .step_list li .box {border:1px solid #ddd;border-radius:20px;width:100%;height:0;padding-bottom:100%;position:relative;box-sizing:border-box;}
		#wrap .development .step_list li:nth-of-type(1) .box {background:#fff url('../images/sub/dev-icon-01.png') no-repeat top 35% center;}
		#wrap .development .step_list li:nth-of-type(2) .box {background:#fff url('../images/sub/dev-icon-02.png') no-repeat top 39% center;}
		#wrap .development .step_list li:nth-of-type(3) .box {background:#fff url('../images/sub/dev-icon-03.png') no-repeat top 39% center;}
		#wrap .development .step_list li:nth-of-type(4) .box {background:#fff url('../images/sub/dev-icon-04.png') no-repeat top 39% center;}
		#wrap .development .step_list li:nth-of-type(5) .box {background:#fff url('../images/sub/dev-icon-05.png') no-repeat top 39% center;}
		#wrap .development .step_list li:nth-of-type(6) .box {background:#fff url('../images/sub/dev-icon-06.png') no-repeat top 35% center;}
		#wrap .development .step_list li:nth-of-type(7) .box {background:#fff url('../images/sub/dev-icon-07.png') no-repeat top 33% center;}
		#wrap .development .step_list li:nth-of-type(8) .box {background:#fff url('../images/sub/dev-icon-08.png') no-repeat top 35% center;}
		#wrap .development .step_list li:nth-of-type(9) .box {background:#fff url('../images/sub/dev-icon-09.png') no-repeat top 35% center;}
		#wrap .development .step_list li:nth-of-type(10) .box {background:#a18e74 url('../images/sub/dev-icon-10.png') no-repeat top 35% center;border:0;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(1) .box {background:#fff url('../images/sub/dev-icon-11.png') no-repeat top 35% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(2) .box {background:#fff url('../images/sub/dev-icon-12.png') no-repeat top 39% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(3) .box {background:#fff url('../images/sub/dev-icon-13.png') no-repeat top 39% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(4) .box {background:#fff url('../images/sub/dev-icon-14.png') no-repeat top 39% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(5) .box {background:#fff url('../images/sub/dev-icon-15.png') no-repeat top 39% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(6) .box {background:#fff url('../images/sub/dev-icon-16.png') no-repeat top 35% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(7) .box {background:#fff url('../images/sub/dev-icon-17.png') no-repeat top 33% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(8) .box {background:#fff url('../images/sub/dev-icon-18.png') no-repeat top 35% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(9) .box {background:#fff url('../images/sub/dev-icon-19.png') no-repeat top 35% center;}
		#wrap .development .bg_wrap .step_list li:nth-of-type(10) .box {background:#a18e74 url('../images/sub/dev-icon-20.png') no-repeat top 35% center;border:0;}
		#wrap .development .step_list {flex-direction: row-reverse;}
		#wrap .development .step_list li .box span {font-size:18px;line-height:1;font-weight:400;color:#333;letter-spacing:-0.04em;position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:block;width:100%;}
		#wrap .development .step_list li .box.last span {color:#fff;}
		#wrap .development .bg_wrap {}
		#wrap .development .bg_wrap:before {height:100%;}
		@media only screen and (max-width:1017px) {
			#wrap .development .step_list li .box {background-size: 27% !important;border-radius:10px;}
		}
		@media only screen and (max-width:960px) {
			#wrap .development .step_list li .box {font-size:15px;bottom:13%;background-position:top 26% center !important;}
			#wrap .development .step_list li .box span {font-size:14px;}
			#wrap .development .step_list li:nth-of-type(3) .box span,
			#wrap .development .step_list li:nth-of-type(4) .box span,
			#wrap .development .step_list li:nth-of-type(6) .box span {padding:0 6px;bottom:10%;box-sizing:border-box;}
		}
		@media only screen and (max-width:860px) {
			#wrap .development .step_list {padding-bottom:100px;}
		}
		@media only screen and (max-width:670px) {
			#wrap .development .step_list li .box span {}
		}
		@media only screen and (max-width:640px) {
			#wrap .development .step_list {margin-top:30px;padding-bottom:70px;}
			#wrap .development .step_list li {width:calc(50% - 2%);}
			#wrap .development .step_list li:nth-of-type(odd) {padding-left:0;}
			#wrap .development .step_list li:nth-of-type(n+6) {float:none;}
			#wrap .development .step_list li:nth-of-type(n+3) {margin-top:3%;}
			#wrap .development .step_list li + li {margin-left: 3% !important;}
			#wrap .development .step_list li:nth-of-type(odd) {margin-left: 0 !important;}
			#wrap .development .step_list li:before,
			#wrap .development .step_list li:after {display:none;}
			#wrap .development .step_list li .box {background-size: 15% !important;border-radius:10px;padding-bottom: 53%;background-position:top 30% center !important;}
			#wrap .development .step_list li .box span {font-size:18px;bottom:15% !important;}
		}
		@media only screen and (max-width:431px) {
			#wrap .development .step_list li .box span {font-size:15px;}
		}