@charset "utf-8";

/* ============================== [ 메인 ] ========================================================================================== */
#header {background-color:#F3F3F3;}
.sec_tit {position:relative;}
.sec_tit .page {font-size:19px; font-weight:700; letter-spacing:0.02em; color:#3D894E;}
.sec_tit .tit {font-size:43px; font-weight:700; letter-spacing:-0.03em; margin-top:17px; line-height:1.395em;}
.sec_tit .desc {font-size:18px; line-height:1.5em; margin-top:30px;}

/* -------------------- #fullpage setting ---------------------------------------- */
#fullpage .inner {padding-top:70px;}
#header .nav_bg {background-color: #F3F3F3;}
/* anchor */
#fp-nav {z-index: 99;}
#fp-nav.left {left:60px;}
#fp-nav ul li {display:flex; align-items:center; width:auto; margin:0; height:auto;}
#fp-nav ul li ~ li {margin-top:28px;}
#fp-nav ul li:nth-child(4) {display:none;}
#fp-nav ul li a {width:8px; height:8px; box-sizing:border-box;}
#fp-nav ul li a span {width:8px; height:8px; background-color:rgba(0, 0, 0, .1); transform:translateY(-50%); transition:background-color .2s;}
#fp-nav ul li .fp-tooltip {position:relative; overflow:visible; font-size:16px; color:rgba(0, 0, 0, .2); width:auto; opacity:1; font-family:'Pretendard',sans-serif; padding-left:20px; transition:color .2s; user-select:none;}
#fp-nav ul li .fp-tooltip.left {left:0;}
#fp-nav ul li a.active span {background-color:#000;}
#fp-nav ul li a.active ~ .fp-tooltip {color:#000; font-size:20px; font-weight:700;}

#fp-nav.wh ul li a span {background-color:rgba(255, 255, 255, .5);}
#fp-nav.wh ul li a.active span {background-color:#fff;}
#fp-nav.wh ul li a ~ .fp-tooltip {color:rgba(255, 255, 255, .5);}
#fp-nav.wh ul li a.active ~ .fp-tooltip {color:#fff;}

/*20231118 lss 변경 좌우폭을 좁혀달라는 요청 좌측 floating menu와 본문내용이 겹쳐지는걸 막아보자.*/

@media screen and (max-width:1600px) {
	#fp-nav {display:none !important;}
}
@media screen and (max-width:1200px) {
	.sec_tit .page {font-size:16px;}
	.sec_tit .tit {font-size:35px;}
	/*#fp-nav {display:none !important;}*/
}

@media screen and (max-width:768px) {
	#fullpage .inner {padding-top:0px;}

	.sec_tit .tit {font-size:30px;}

	.fp-tableCell {vertical-align:top; height:auto !important;}
	.fp-section {height:auto !important;}
}


/* -------------------- section0 ---------------------------------------- */
.main_visual {width:calc(100% - 72px); height:100%; box-sizing:border-box; border-radius:16px; overflow:hidden;}
.main_visual .group {background-repeat:no-repeat; background-position:center; background-size:cover; height:100%; border-radius:16px; overflow:hidden; position:relative;}
.main_visual .group::after {display:block; content:''; width:100%; height:100%; position:absolute; left:0; top:0; background-color:rgba(0, 0, 0, .43);}
.main_visual .group.item_01 {background-image:url(/images/main/main_bg_01.png)}
.main_visual .group.item_02 {background-image:url(/images/main/main_bg_02.png)}
.main_visual .group.item_03 {background-image:url(/images/main/main_bg_03.png)}
.main_visual .group.item_04 {background-image:url(/images/main/main_bg_04.png)}
.main_visual .group.item_05 {background-image:url(/images/main/main_bg_05.png)}
.main_visual .group .txt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; width:100%; padding:0 20px; letter-spacing:-0.03em; font-size:56px; font-weight:300; color:#fff; z-index:1; user-select:none; box-sizing:border-box;}
.main_visual .group .txt strong {font-weight:700;}
.main_visual .group .slide_logo {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url(/images/main/logo_slide.png) no-repeat 0 0; width:495px; height:84px; background-size:100% auto; z-index:1;}
.sd {position:absolute; left:50%; transform:translateX(-50%); bottom:60px; z-index:1; padding-bottom:50px; line-height:1;}
.sd i {display:block; width:22px; height:44px; border-radius:12px; border:1px solid #FFFFFF; position:absolute; left:50%; transform:translateX(-50%); bottom:0; box-sizing:border-box;}
.sd i::after {content:''; display:block; width:2px; height:11px; background-color:#fff; position:absolute; left:calc(50% - 1px); top:10px; animation:scdown 1s ease-in-out; animation-direction:alternate; animation-iteration-count:infinite}
.sd span {color:#fff; letter-spacing:-0.03em; font-size:14px;}
.video_wrap {margin-top: 72px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow:hidden; border-radius: 15px;}
.video_wrap.dim::after {display:block; content: ''; width:100%; height:100%; background-color: rgba(0, 0, 0, .6); position:absolute; left:0; top:0;}
.video_wrap .txt {position:absolute; left:50%; top:43%; transform: translate(-50%, -50%); width:95%; text-align:center; z-index:1;}
.video_wrap .txt p {color: #fff; font-size:52px; font-weight:600;}
.video_wrap .txt p ~ p {margin-top:20px;}
/*.video_wrap .txt p strong {font-weight:800; color: #3D894E;}*/
.video_wrap .txt p strong {font-weight:800; color: #30bf4f;}
.video_wrap .txt p.sub_txt {font-size:30px; color: #eee;}
.video_wrap .mo_txt {display:none;}
.video_wrap .pc_txt {}
.main_video {width: 100%; height: 95%; object-fit: cover; border-radius: 18px;}
.main_video_mobile {display: none;}

.scroll .video_wrap {margin-top: 130px;}
.scroll .main_video {height: 88%;}

@keyframes scdown {
	0% {top:10px}
	100% {top:20px}
}


@media screen and (max-width:1200px) {
    .main_visual {margin-top: 52px; height: 96%;}
	.main_visual .group .txt {font-size:43px;}
	.main_visual .group .txt span {display:block;}
	
    .video_wrap {margin-top: 0;}
    .main_video {height: 100%;}
    .main_video_pc {display: none;}
    .main_video_mobile {display: block;}

    .video_wrap .txt p {font-size:35px;}
    .video_wrap .txt p ~ p {margin-top:10px;}
    .video_wrap .txt p.sub_txt {font-size:20px;}
}
@media screen and (max-width:768px){
	.main_visual {margin-top:50px; height:620px; width:calc(100% - 32px);}
	.main_visual .group .txt {font-size:29px;}
	.main_visual .group .slide_logo {width:320px; height:56px;}
	.sd {bottom:20px; padding-bottom:24px;}
	.sd i {width:13px; height:22px;}
	.sd i::after {height:5px; top:5px; width: 1px; animation: none;}
	.sd span {font-size:8px;}

    .video_wrap .mo_txt {display:block;}
    .video_wrap .pc_txt {display:none;}
    .video_wrap .txt p {font-size:25px;}
    .video_wrap .txt p ~ p {margin-top:5px;}
    .video_wrap .txt p.sub_txt {font-size:15px;}

	@keyframes scdown {
		0% {top:5px}
		100% {top:10px}
	}

	.main_visual .group.item_01 {background-image:url(/images/main/main_bg_01_mo.png)}
	.main_visual .group.item_02 {background-image:url(/images/main/main_bg_02_mo.png)}
	.main_visual .group.item_03 {background-image:url(/images/main/main_bg_03_mo.png)}
	.main_visual .group.item_04 {background-image:url(/images/main/main_bg_04_mo.png)}
	.main_visual .group.item_05 {background-image:url(/images/main/main_bg_05_mo.png)}
}
@media screen and (max-width:450px) {
	.main_visual .group .slide_logo {width:240px; height:43px;}

}

/* -------------------- section1 ---------------------------------------- */
#section1 .sec_tit .tit {font-size: 60px; margin-top: 0;}
.work_list {margin-top:50px;}
.work_list ul {display:flex; flex-wrap:wrap; margin:-30px 0 0 -30px;}
.work_list li {margin:30px 0 0 30px; width:calc(25% - 30px); height:32vh; position:relative; border-radius:16px; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden;}
.work_list li.work_link {background-image:url(/images/main/work_bg.png);}
.work_list li.work_link a {z-index:1;}
.work_list li.work_link::after {display:block; content:''; width:50px; height:50px; background:#F6F6F6 url(/images/main/arr_gr.svg) no-repeat center; background-size:20px; position:absolute; right:34px; bottom:30px; border-radius:50%;}
.work_list li.work_link .link_tit {padding:40px; font-size:37px; font-weight:700; letter-spacing:-0.05em; display:block; color:#fff;}
.work_list li.work_link .mo_txt {display:none; margin-top:16px; padding-left:26px; font-size:34px; font-weight:700; letter-spacing:-0.03em; color:#fff;}
.work_list li.ill {background-color:#EDEDED;}
.work_list li.ill span {position:absolute; left:0; bottom:0; width:100%; box-sizing:border-box; padding:26px 40px; line-height: 1; font-size:33px; font-weight:600; background:linear-gradient(180deg, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 50%); z-index:1;}
.work_list li:nth-child(2) {background-image:url(/images/main/ill_01.png);}
.work_list li:nth-child(3) {background-image:url(/images/main/ill_02.png);}
.work_list li:nth-child(4) {background-image:url(/images/main/ill_03.png);}
.work_list li:nth-child(5) {background-image:url(/images/main/ill_04.png);}
.work_list li:nth-child(6) {background-image:url(/images/main/ill_05.png);}
.work_list li:nth-child(7) {background-image:url(/images/main/ill_06.png);}
.work_list li:nth-child(8) {background-image:url(/images/main/ill_07.png);}
.work_list li:nth-child(2):hover {background-image:url(/images/main/ill_01.gif);}
.work_list li:nth-child(3):hover {background-image:url(/images/main/ill_02.gif);}
.work_list li:nth-child(4):hover {background-image:url(/images/main/ill_03.gif);}
.work_list li:nth-child(5):hover {background-image:url(/images/main/ill_04.gif);}
.work_list li:nth-child(6):hover {background-image:url(/images/main/ill_05.gif);}
.work_list li:nth-child(7):hover {background-image:url(/images/main/ill_06.gif);}
.work_list li:nth-child(8):hover {background-image:url(/images/main/ill_07.gif);}

@media screen and (max-width:1400px) {
    .work_list li.ill span {font-size: 28px;}
}

@media screen and (max-width:1200px) {
    #section1 .sec_tit .tit  {font-size: 35px;}
	.work_list {margin-top:20px;}
	.work_list ul {margin:-10px 0 0 -10px;}
	.work_list li {margin:10px 0 0 10px; height:28vh; width:calc(25% - 10px);}
    .work_list li.ill span {font-size: 20px; padding:24px 19px;}
	.work_list li.ill {background-size:215px auto;}
    .work_list li.work_link .link_tit {padding:40px 20px; font-size:26px;}
	.work_list li.work_link::after {right:20px; bottom:30px;}
}
@media screen and (max-width:768px) {
    #section1 {padding-top: 60px;}
    #section1 .sec_tit .tit {font-size: 30px;}
	.work_list {margin-bottom:80px;}
	.work_list ul {flex-direction:column; margin:-20px 0 0 0;}
	.work_list li {margin:20px 0 0 0; width:100%; height:214px;}
	.work_list li.work_link::after {width:36px; height:36px; background-size:14px; transform:rotate(90deg);}
    .work_list li.work_link .link_tit {padding:26px 26px; font-size: 20px;}
	.work_list li.work_link .mo_txt {display:block;}
	.work_list li.ill {background-size:auto 100%; background-position:right bottom;}
	.work_list li.ill span {bottom:inherit; top:0; padding:26px 0 0 26px; min-width:163px; width:50%; height:100%; background:linear-gradient(270deg, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 50%);}
	.work_list li:nth-child(2) {background-image:url(/images/main/ill_mo_01.png);}
	.work_list li:nth-child(3) {background-image:url(/images/main/ill_mo_02.png);}
	.work_list li:nth-child(4) {background-image:url(/images/main/ill_mo_03.png);}
	.work_list li:nth-child(5) {background-image:url(/images/main/ill_mo_04.png);}
	.work_list li:nth-child(6) {background-image:url(/images/main/ill_mo_05.png);}
	.work_list li:nth-child(7) {background-image:url(/images/main/ill_mo_06.png);}
	.work_list li:nth-child(8) {background-image:url(/images/main/ill_mo_07.png);}
	.work_list li:nth-child(2):hover {background-image:url(/images/main/ill_mo_01.gif);}
    .work_list li:nth-child(3):hover {background-image:url(/images/main/ill_mo_02.gif);}
    .work_list li:nth-child(4):hover {background-image:url(/images/main/ill_mo_03.gif);}
    .work_list li:nth-child(5):hover {background-image:url(/images/main/ill_mo_04.gif);}
    .work_list li:nth-child(6):hover {background-image:url(/images/main/ill_mo_05.gif);}
    .work_list li:nth-child(7):hover {background-image:url(/images/main/ill_mo_06.gif);}
    .work_list li:nth-child(8):hover {background-image:url(/images/main/ill_mo_07.gif);}
}


/* -------------------- section4 ---------------------------------------- */
/*20231118 lss 변경 좌우폭을 좁혀달라는 요청*/
/*#section4 .res_wrap {background-color:#fff; border-radius:16px; padding:30px 30px 45px 40px;}*/
/*#section4 .res_wrap {background-color:#fff; border-radius:16px; padding:30px 60px 45px 85px;}
#section4 .res_layout .sec_tit {margin-bottom:48px;}

.cs_img {margin-left:38px; width:41.7%; background:url(/images/main/cs_bg.png) no-repeat center; background-size:cover; border-radius:16px;}
.cs_img .sec_tit {display:none;}
*/
#section4 .res_wrap {padding: 0;}
#section4 .sec_tit .tit {margin-top: 12px; font-size: 60px; line-height: 1.2;}
#section4 .sec_tit .page {font-size: 30px;}
#section4 .sec_tit .desc {margin-top: 12px; font-size: 24px; line-height: 1.2;}
#section4 .res_layout .sand_form .form_wrap {margin-top: 20px;}
#section4 .res_layout .sand_form .form_wrap .inpt_wrap {margin: 20px 0 0 20px;}
#section4 .res_layout .sand_form .form_wrap .inpt_wrap p {font-size: 30px; margin-bottom: 17px;}
#section4 .res_layout .sand_form .form_wrap .inpt_wrap input {height: 86px; padding: 0 24px; border: 1px solid #C9C9C9; font-size: 30px; border-radius: 10px;}
#section4 .btn_sec4 {margin-top: 50px; display: inline-block; background-color: #448C53; border-radius: 100px; padding: 13px 30px;}
#section4 .btn_sec4 span {font-size: 30px; font-weight: 700; color: #fff; line-height: 1.4; display: block; padding-right: 54px; background: url(/images/main/arr_circle.svg) no-repeat right center; background-size: 40px auto;}

@media screen and (max-width:1200px) {
    #section4 .sec_tit .tit {font-size: 35px;}
    #section4 .sec_tit .page {font-size: 16px;}
    #section4 .sec_tit .desc {font-size: 18px; margin-top: 18px;}
    #section4 .btn_sec4 {border-radius: 65px; padding: 9px 20px;}
    #section4 .btn_sec4 span {font-size: 20px; padding-right: 35px; background-size: 26px auto;}
    #section4 .res_layout .sand_form .form_wrap .inpt_wrap p {font-size: 22px;}
    #section4 .res_layout .sand_form .form_wrap .inpt_wrap input {height: 60px; padding: 0 18px; font-size: 20px; border-radius: 6px;}
}
@media screen and (max-width:768px) {
    #section4 .sec_tit .desc {font-size: 16px;}
	#section4 .res_wrap {background:transparent; border-radius:0; padding:20px 0 72px;}
    #section4 .sec_tit .tit {font-size: 30px; margin-top: 8px;}
    #section4 .res_wrap .res_layout {display:flex;flex-direction:column-reverse;}
	#section4 .res_layout .sand_form {margin-top:10px;}
	.res_layout .sand_form .form_wrap {margin:0;}
	.res_layout .sand_form .form_wrap .inpt_wrap {margin-top:50px;}
	.res_layout .sand_form .form_wrap .inpt_wrap p {font-size:22px;}
    #section4 .btn_sec4 {margin-top: 20px;}
    #section4 .res_layout .sand_form .form_wrap .inpt_wrap {margin: 20px 0 0 0;}
    #section4 .res_layout .sand_form .form_wrap .inpt_wrap p {font-size: 18px;}
    #section4 .res_layout .sand_form {text-align: center;}
    #section4 .res_layout .sand_form .sec_tit,
    #section4 .res_layout .sand_form .form_wrap {text-align: left;}
}

/* -------------------- section5 ---------------------------------------- */
#section5 {background:url(/images/main/intro_bg.png) no-repeat center; background-size:cover; position:relative; box-sizing:border-box;}
#section5::after {display:block; content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:linear-gradient(87deg, rgba(49,49,49,1) 0%, rgba(67,67,67,0.9) 29%, rgba(0,0,0,0) 100%); opacity:.6;}

.intro_wrap {position:relative; z-index:1;}
.intro_wrap br {display:none;}
.intro_wrap .txt_area p {font-size:43px; font-weight:700; color:#fff; letter-spacing:-0.03em; line-height:1.3em; position:relative;}
.intro_wrap .txt_area strong {color:#67D363;}
.intro_wrap .sub_txt {margin-top:24px; font-size:19px; font-weight:600; letter-spacing:0.02em; color:rgba(255, 255, 255, .9);}
.intro_wrap .btn_li li.tel {background-color: #636365;}

.btn_li {margin-top:66px; max-width:300px;}

@media screen and (max-width:1200px) {
	.intro_wrap .txt_area p {font-size:35px;}
	.intro_wrap .sub_txt {font-size:18px;}
}

@media screen and (max-width:768px){
	#section5 {padding:50px 0 400px; background-image:url(/images/main/intro_bg_mo.png); background-size:cover; background-position:center bottom;}

	.intro_wrap br {display:block;}
	.intro_wrap .txt_area p {font-size:29px; text-align:center;}
	.intro_wrap .txt_area p ~ p {padding-top:49px;}
	.intro_wrap .txt_area p ~ p::after {display:block; content:''; width:1px; height:29px; background-color:#fff; position:absolute; left:50%; top:10px;}
	.intro_wrap .sub_txt {margin-top:50px; text-align:center;}
	.btn_li {margin-top:30px; max-width:100%;}
}


/* -------------------- section6 ---------------------------------------- */
#section6 .inner {display:flex; align-items:center;}
#section6 .img {max-width:660px; margin-right:60px;}
#section6 .txt_wrap {position:relative; width:100%;}
#section6 .txt_wrap::before {display:none; content: ''; background: url(/images/main/main_map_mo.png) no-repeat 0 0; background-size: 100% auto; position:absolute; left:50%; transform: translateX(-50%); top:-50px; max-width: 689px; width:689px; height:858px;}
.win_sec {margin-top:50px; position:relative;z-index:1;}
.win_sec ul {display:flex; gap:15px; max-width: 870px; width:100%;}
.win_sec ul li {padding:0 30px; flex:1; height:180px; display:flex; flex-direction: column; justify-content:center; background-color: #fff; border-radius: 20px; box-shadow: 4px 4px 30px rgba(0, 0, 0, .08); box-sizing:border-box;}
.win_sec ul li p {padding-top:41px; background-repeat: no-repeat; background-position: left top; background-size: 24px;}
.win_sec ul li:nth-child(1) p {background-image: url(/images/main/ico_cnt_01.svg);}
.win_sec ul li:nth-child(2) p {background-image: url(/images/main/ico_cnt_02.svg);}
.win_sec ul li:nth-child(3) p {background-image: url(/images/main/ico_cnt_03.svg);}
.win_sec ul li p {font-size:30px; font-weight:700; color:#3D894E;}
.win_sec ul li h4 {margin-top:15px; font-size:20px; font-weight:700;}
@media screen and (max-width:1200px) {
    #section6 .img {display:none;}
    #section6 .txt_wrap::before {display:block;}
}
@media screen and (max-width:768px) {
    #section6 {padding:140px 0 70px;}
    #section6 .txt_wrap::before {width:100%;}
    #section6 .sec_tit span {display:block; letter-spacing: -0.02em;}
    #section6 .sec_tit br {display:none;}
    .win_sec {margin-top:30px;}
    .win_sec ul {flex-direction: row; gap:10px; flex-wrap:wrap;}
    .win_sec ul li {display:flex; align-items:center; justify-content: flex-start; flex-direction: row; height:90px; width:100%; flex:none;}
    .win_sec ul li h4 {margin: 0 0 0 14px; letter-spacing: -0.02em; font-size:18px;}
    .win_sec ul li p {font-size:26px; padding: 0 0 0 39px; background-position: left center; letter-spacing: -0.02em;}
}
/* -------------------- section7 ---------------------------------------- */
#section7 {background: url(/images/main/main_bg_07.jpg) no-repeat center; background-size: cover; position:relative;}
#section7::after {display:block; content: ''; width:100%; height:100%; background-color: rgba(247, 247, 247, 0.9); position:absolute; left:0; top:0;}
#section7 .inner {position:relative; z-index:1;}
#section7 .txt_wrap {display:flex; flex-direction: column; align-items:center; justify-content:center; text-align:center;}
#section7 .txt_wrap .sec_tit {padding-top:146px; background: url(/images/main/logo_mark.svg) no-repeat top center; background-size: 69px auto;}
.marquee {display:flex; margin-top:80px; gap:20px 30px; width:100%; position:relative; z-index:1; overflow:hidden;}
.marquee ul {display:flex; gap:30px; width:100%;}
.marquee li {width:240px; height:240px; border-radius: 20px; overflow:hidden;}
.marquee li img {display:block; width:100%; height:auto;}
.marquee > div {display:flex;}
.js-marquee {display:flex;}
#marq_02 {opacity:0; visibility:hidden; height:0; margin:0;}

@media screen and (max-width:1200px) {
    .marquee li {width:200px; height:200px;}
}
@media screen and (max-width:768px) {
    #section7 {padding:70px 0 80px;}
    #section7 .sec_tit span {display:block; letter-spacing: -0.02em;}
    #section7 .txt_wrap {text-align:left; align-items: flex-start;}
    #section7 .txt_wrap .sec_tit {background-size: 49px 68px; background-position: left top; padding-top:79px;}
    .marquee {margin-top:30px;}
    .marquee ul {gap:10px;}
    .marquee li {width:110px; height:110px; border-radius: 10px;}
    #marq_02 {opacity:1; visibility:visible; margin-top:20px; height:auto;}
}
/* -------------------- section8 ---------------------------------------- */
#section8 {background: url(/images/main/main_bg_08.jpg) no-repeat center; background-size: cover; position:relative;}
#section8::after {display:block; content: ''; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.5); position:absolute; left:0; top:0;}
#section8 .inner {position:relative; z-index:1;}
#section8 .txt_wrap {display:flex; flex-direction: column; align-items:center; justify-content:center; text-align:center;}
#section8 .txt_wrap p {color:#fff;}
#section8 .work_li {margin-top:80px; display:flex; flex-wrap: wrap; justify-content:center; gap:20px; max-width:700px; width:100%;}
#section8 .work_li li {border-radius: 20px; width:160px; height:160px; display:flex; align-items:center; justify-content:center; background-color: rgba(243, 243, 243, 0.12); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
#section8 .work_li li span {display:flex; padding-top:74px; font-size:18px; font-weight:600; color:#fff; background-position: top center; background-repeat: no-repeat; background-size: 50px;}
#section8 .work_li li:nth-child(3) {margin-right:1px;}
#section8 .work_li li:nth-child(1) span {background-image: url(/images/main/ico_work_01.svg);}
#section8 .work_li li:nth-child(2) span {background-image: url(/images/main/ico_work_02.svg);}
#section8 .work_li li:nth-child(3) span {background-image: url(/images/main/ico_work_03.svg);}
#section8 .work_li li:nth-child(4) span {background-image: url(/images/main/ico_work_04.svg);}
#section8 .work_li li:nth-child(5) span {background-image: url(/images/main/ico_work_05.svg);}
#section8 .work_li li:nth-child(6) span {background-image: url(/images/main/ico_work_06.svg);}
#section8 .work_li li:nth-child(7) span {background-image: url(/images/main/ico_work_07.svg);}
@media screen and (max-width:768px) {
    #section8 {padding:80px 0 75px;}
    #section8 .txt_wrap {text-align:left; align-items: flex-start;}
    #section8 .sec_tit span {display:block; letter-spacing: -0.02em;}
    #section8 .work_li {margin-top:55px; justify-content: flex-start; gap:10px 15px}
    #section8 .work_li li {width:calc(50% - 8px); height:70px; border-radius: 15px;}
    #section8 .work_li li span {font-size:16px; background-size: 30px; background-position: left center; padding:0 0 0 50px; display:block; line-height:30px;}
    #section8 .work_li li:nth-child(3) {margin-right:0;}
}

/* -------------------- section9 ---------------------------------------- */
#section9 .inner {display:flex; align-items:center; justify-content:space-between; gap:20px;}
#section9 .img {border-radius: 30px; overflow:hidden; width:100%; max-width:700px;}
@media screen and (max-width:1200px) {
    #section9 .inner {flex-direction: column-reverse;}
    #section9 .img {max-width: 500px;}
}
@media screen and (max-width:768px) {
    #section9 {padding:50px 0;}
    #section9 .inner {gap:50px; align-items: flex-start;}
    #section9 .img {border-radius: 20px; max-width: 700px;}
    #section9 .sec_tit span {display:block; letter-spacing: -0.02em;}
    #section9 .sec_tit br {display:none;}
}
/* -------------------- section10 ---------------------------------------- */
#section10 .inner {display:flex; align-items:center;flex-direction: column; text-align:center; gap:50px;}
#section10 .img {border-radius: 30px; overflow:hidden; max-width:1440px; width:100%; height:400px;}
#section10 .img img {height:100%;}
@media screen and (max-width:768px) {
    #section10 {padding:90px 0;}
    #section10 .inner {gap:40px; align-items: flex-start; text-align:left;}
    #section10 .img {border-radius: 20px; height:300px;}
    #section10 .sec_tit span {display:block; letter-spacing: -0.02em;}
    #section10 .sec_tit br {display:none;}
}

/* -------------------- section11 ---------------------------------------- */
#section11 .inner {display:flex; align-items:center; justify-content:space-between; gap:70px;}
#section11 .img {border-radius: 30px; overflow:hidden; width:100%; max-width:700px;}
@media screen and (max-width:768px) {
    #section11 {padding:90px 16px 70px;}
    #section11 .inner {padding: 50px 25px 310px 25px; border-radius: 20px; background: url(/images/main/sec_03_mo.png) no-repeat center; background-size: cover;}
    #section11 .img {display:none;}
    #section11 .sec_tit .tit {letter-spacing: -0.05em;}
    #section11 .sec_tit .desc {margin-top:25px;}
    #section11 .sec_tit .desc br {display:none;}
}


/* -------------------- section12 ---------------------------------------- */
#section12 {background: url(/images/main/sec_12.png) no-repeat right 5% bottom; background-size: 430px auto;}
#section12 .sec_tit .page {font-size: 30px;}
#section12 .sec_tit .tit {margin-top: 24px; font-size: 60px; line-height: 1.2;}
#section12 .sec_tit .desc {margin-top: 24px;}
#section12 ul {display: flex; flex-wrap: wrap; gap:20px; margin-top: 50px;}
#section12 ul li {position: relative; display: flex; align-items: center; height: 354px; border:1px solid #C9C9C9; border-radius: 12px; background-color: #EDEDED; overflow: hidden;}
#section12 ul li::after {display: block; content: ''; background: url(/images/main/sec_12_02.png) no-repeat 0 0; background-size: 100% auto; width: 70px; height: 96px; position: absolute; right:20px; top: 0; z-index: 1;}
#section12 ul li .img_area .img {width: 270px;}
#section12 ul li .txt_area { height: 70px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgba(61, 137, 78, .85); display: flex; align-items: center; justify-content: center; padding: 0 10px; box-sizing: border-box;}
#section12 ul li .txt_area p {font-size: 24px; font-weight: 700; color: #fff; text-align: center;}
#section12 .btn_sec12 {margin-top: 50px; display: inline-block; background-color: #448C53; border-radius: 100px; padding: 13px 30px;}
#section12 .btn_sec12 span {font-size: 30px; font-weight: 700; color: #fff; line-height: 1.4; display: block; padding-right: 54px; background: url(/images/main/arr_circle.svg) no-repeat right center; background-size: 40px auto;}

@media screen and (max-width:1400px) {
    #section12 {background-size: 400px auto; background-position: right bottom;}
    #section12 ul li .img_area .img {width: 230px;}
    #section12 ul li {height: 300px;}
    #section12 ul li .txt_area p {font-size: 20px;}
    #section12 .sec_tit .tit {font-size: 35px;}
    #section12 .sec_tit .page {font-size: 16px;}
}

@media screen and (max-width:1024px) {
    #section12 ul li .img_area .img {width: 163px;}
    #section12 ul li {height: 205px;}
    #section12 ul li .txt_area {height: 40px;}
    #section12 ul li .txt_area p {font-size: 14px;}
    #section12 ul li::after {width: 42px; height: 55px; right: 12px;}
    #section12 .btn_sec12 {border-radius: 65px; padding: 9px 20px;}
    #section12 .btn_sec12 span {font-size: 20px; padding-right: 35px; background-size: 26px auto;}
}
@media screen and (max-width:768px) {
    #section12 {background-image: none; margin-bottom: 80px;}
    #section12 .txt_wrap {text-align: left;}
    #section12 .inner {text-align: center;}
    #section12 .sec_tit .tit {font-size: 30px; margin-top: 8px;}
    #section12 .sec_tit .desc {display: none;}
    #section12 ul {margin: 20px auto 0; max-width: 450px; width: 100%;}
    #section12 ul li {width: calc(50% - 12px); height: auto;}
    #section12 ul li .img_area .img {width: 100%; padding: 24px 0;}
    #section12 .btn_sec12 {margin-top: 20px;}
}