@charset "UTF-8";
/*───────────────────────────────────────────────────────────

	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
/* Default */
a.more { width: clamp(40px, 5vw, 60px); height: clamp(40px, 5vw, 60px); background: var(--point-color01); border-radius: 100px; display: flex; align-items: center; justify-content: center; transition: background 500ms; }
a.more i { display: block; position: relative; width: 2px; height: 16px; rotate: 45deg; transform-origin: center; background: #fff; }
a.more i::before, a.more i::after { content: ""; position: absolute; left: 0; top: 1px; width: 2px; height: 12px; background: #fff; transform-origin: top; transition: rotate 500ms; }
a.more i::before { rotate: 45deg; }
a.more i::after { rotate: -45deg; }
#content > article { width: 100%; padding-top: clamp(50px, 7vw, 140px); position: relative; }
.sec_inner { width: 100%; max-width: 1760px; box-sizing: border-box; margin: 0 auto; padding: 0 40px; }
.sec_inner .sec_txt p { color: var(--black-color01); font-size: var(--title-60); line-height: 150%; font-weight: 300; }
.sec_inner .sec_txt p strong { display: block; font-size: var(--title-70); font-weight: 700; }
.sec_inner .sec_txt span { color: var(--black-color06); font-size: var(--title-20); font-weight: 400; line-height: 150%; margin-top: 30px; display: block; }
.sec_inner .sec_txt a.more { margin-top: clamp(20px, 5vw, 52px); }
@media (width <= 760px) {
	.sec_inner { padding: 0 15px; }
	.sec_inner .sec_txt p { margin-top: var(--title-40); font-size: var(--title-34); }
	.sec_inner .sec_txt p strong { font-size: var(--title-40); }
}
@media (width <= 320px) {
	.sec_inner { padding: 0 10px; }
}
.sec_tit { font-size: 20px; color: var(--black-color00); font-weight: 700; line-height: 1; position: relative; width: fit-content; }
.sec_tit::after { content: ""; width: 10px; height: 10px; border-radius: 100px; background: var(--point-color02); flex-shrink: 0; position: absolute; right: -12px; top: -5px; }
.visual_btn_wrap { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; bottom: clamp(40px, 5vw, 70px); gap: 40px; }
.visual_btn_wrap .arw_box { display: flex; align-items: center; gap: 20px; }
.visual_btn_wrap .arw_box .slick-arrow { background: url() no-repeat center center/contain; display: block; width: 9px; height: auto; text-indent: -9999px; opacity: 0.4; position: relative; }
.visual_btn_wrap .arw_box .slick-arrow.prev, .visual_btn_wrap .arw_box .slick-arrow.next { position: relative; }
.visual_btn_wrap .arw_box .slick-arrow.prev::before, .visual_btn_wrap .arw_box .slick-arrow.next::before { content: ""; border-style: solid; position: absolute; left: 0; top: 1px; }
.visual_btn_wrap .arw_box .slick-arrow.prev::before { border-width: 6px 9px 6px 0; border-style: solid; border-color: transparent #fff transparent transparent; }
.visual_btn_wrap .arw_box .slick-arrow.next::before { border-width: 6px 0 6px 9px; border-style: solid; border-color: transparent transparent transparent #fff; }
.visual_btn_wrap .arw_box .slick-arrow:hover { opacity: 1; }
.visual_btn_wrap .slick-dots { position: relative; display: flex; align-items: center; gap: 30px; text-indent: -9999px; }
.visual_btn_wrap .slick-dots li { width: 8px; height: 8px; flex-shrink: 0; opacity: 0.4; background: var(--point-white); border-radius: 100%; cursor: pointer; }
.visual_btn_wrap .slick-dots li.slick-active { opacity: 1; }
@media (width <= 780px) {
	.visual_btn_wrap .arw_box { display: none; }
	.visual_btn_wrap .slick-dots { left: 0 !important; }
}
/* ABOUt US */
.sec_about .sec_inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.sec_about .sec_inner::before { position: absolute; width: clamp(150px, 20vw, 300px); height: clamp(150px, 20vw, 300px); background: var(--point-color02); top: 0; right: 0; z-index: -1; }
.sec_about .sec_inner .pointObj { position: absolute; width: clamp(150px, 20vw, 300px); height: clamp(150px, 20vw, 300px); background: var(--point-color02); top: 0; right: 0; z-index: -1; }
.sec_about .sec_inner .sec_txt { flex-shrink: 0; }
.sec_about .sec_inner .sec_txt .sec_tit + p { margin-top: var(--title-50); }
.sec_about .sec_inner .sec_txt > p, .sec_about .sec_inner .sec_txt > span, .sec_about .sec_inner .sec_txt > a { margin-left: var(--title-60); }
.sec_about .sec_inner .sec_thumb { width: 100%; max-width: 800px; }
.sec_about .sec_inner .sec_thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (width <= 1200px) {
	.sec_about .sec_inner { flex-direction: column; align-items: flex-start; }
	.sec_about .sec_inner .sec_txt { flex-shrink: 0; }
	.sec_about .sec_inner .sec_txt > p, .sec_about .sec_inner .sec_txt > span, .sec_about .sec_inner .sec_txt > a { margin-left: 0; }
	.sec_about .sec_inner .pointObj { top: unset; bottom: 31vw; width: clamp(60px, 20vw, 300px); height: clamp(60px, 20vw, 300px); }
	.sec_about .sec_inner .sec_thumb { width: 100%; max-width: 100%; aspect-ratio: 10/5; }
	.sec_about .sec_inner .sec_thumb img { width: 100%; height: 100%; object-fit: cover; }
}
@media (width <= 760px) {
	.sec_about br { display: none; }
}
/* BUSINESS */
.sec_business { display: flex; flex-direction: column; }
.sec_business::after { content: ""; display: block; clear: both; }
.sec_business .work_list { width: calc(100% - (100vw - min(1680px, 100%)) / 2); margin-top: var(--title-40); margin-left: auto; overflow: hidden; }
.sec_business .work_list dl dt { font-size: var(--title-28); color: var(--black-color01); font-weight: 600; line-height: 100%; margin: var(--title-20) 0; }
.sec_business .work_list dl dd { font-size: var(--title-16); font-weight: 400; line-height: 100%; color: var(--black-color08); }
.sec_business .work_list a .thumb { position: relative; overflow: hidden; display: block; }
.sec_business .work_list a .thumb::before { content: ""; width: 0; height: 100%; left: 50%; transform: translateX(-50%); transition: width 300ms ease-in-out; position: absolute; background-color: var(--point-color02); opacity: 0.9; }
.sec_business .work_list a .thumb::after { content: ""; flex-shrink: 0; width: 100px; height: 100px; background: url("../images/skin/icon_add.svg") no-repeat center center/contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 300ms ease-in-out; }
.sec_business .work_list a .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (width <= 1760px) {
	.sec_business .work_list { width: calc(100% - clamp(20px, 2.7vw, 40px)); }
}
@media (width <= 1200px) {
	.sec_business .work_list { width: 100%; max-width: unset; margin-left: clamp(20px, 6vw, 40px); }
	.sec_business .work_list a:hover .thumb::before, .sec_business .work_list a:hover .thumb::after { content: none; }
}
@media (width <= 760px) {
	.sec_business .work_list { margin-left: 15px; }
}
@media (width <= 320px) {
	.sec_business .work_list { margin-left: 10px; }
}
/* OKDANG PR */
.sec_okdang { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/skin/okdang_pr_img.png") no-repeat center center/cover; width: 100%; }
.sec_okdang .sec_inner { display: flex; align-items: center; gap: 6.5vw; min-height: 800px; }
.sec_okdang .sec_inner .sec_txt p { color: var(--point-white); text-wrap: balance; }
.sec_okdang .sec_inner .sec_okdang_info { display: flex; flex-shrink: 0; align-items: center; }
.sec_okdang .sec_inner .sec_okdang_info > div { padding: 0 80px; display: flex; flex-direction: column; }
.sec_okdang .sec_inner .sec_okdang_info i { display: block; margin-bottom: 32px; width: 40px; height: 40px; background: url() no-repeat center center/contain; }
.sec_okdang .sec_inner .sec_okdang_info i.ico-userSearch { background-image: url("../images/skin/ico_user_search.svg"); }
.sec_okdang .sec_inner .sec_okdang_info i.ico-message { background-image: url("../images/skin/ico_message.svg"); }
.sec_okdang .sec_inner .sec_okdang_info p, .sec_okdang .sec_inner .sec_okdang_info span, .sec_okdang .sec_inner .sec_okdang_info a { color: var(--point-white); }
.sec_okdang .sec_inner .sec_okdang_info p { font-size: var(--title-40); font-weight: 600; line-height: 100%; }
.sec_okdang .sec_inner .sec_okdang_info span { opacity: 0.8; font-size: 16px; font-weight: 300; line-height: 150%; display: block; padding: var(--title-22) 0 var(--title-60) 0; }
.sec_okdang .sec_inner .sec_okdang_info a { width: 100%; max-width: 160px; padding: 17px 15px; box-sizing: border-box; flex-shrink: 0; line-height: 100%; font-weight: 400; font-size: 14px; border: 1px solid var(--point-white); text-align: center; transition: background 500ms; }
@media (width <= 1200px) {
	.sec_okdang .sec_inner { flex-direction: column; justify-content: center; }
	.sec_okdang .sec_inner .sec_txt p { text-align: center; }
}
@media (width <= 760px) {
	.sec_okdang .sec_inner { min-height: unset; padding: 20vw 20px; gap: 10vw; }
	.sec_okdang .sec_inner .sec_txt { text-align: center; }
	.sec_okdang .sec_inner .sec_txt p { margin-top: 0; }
	.sec_okdang .sec_inner .sec_okdang_info { flex-direction: column; gap: 15vw; width: 100%; text-align: center; }
	.sec_okdang .sec_inner .sec_okdang_info > div { width: 100%; align-items: center; justify-content: center; gap: 15px; }
	.sec_okdang .sec_inner .sec_okdang_info > div i { margin-bottom: 0; flex-shrink: 0; }
	.sec_okdang .sec_inner .sec_okdang_info > div span { display: none; }
}
/**/
.sec_partnership .swiper-wrapper { transition-timing-function: linear !important; }
.sec_partnership .slick-track { transition-timing-function: linear !important; display: flex; gap: 23px; }
.sec_partnership .partner_list { margin-top: 23px; overflow: hidden; }
.sec_partnership .partner_list a { display: block; border: 1px solid var(--border-color01); padding: 22px 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; aspect-ratio: 2.4665/1; box-sizing: border-box; }
.sec_partnership .partner_list a img { width: 100%; height: 100%; object-fit: contain; }
@media (width <= 640px) {
	.sec_partnership .partner_list { overflow: unset; }
	.sec_partnership .partner_list a { padding: 10px 20px; }
}
@media screen and (min-width:1024px) {
	a.more:hover { background: #EA0000; }
	a.more:hover i::before { rotate: 40deg; }
	a.more:hover i::after { rotate: -40deg; }
	.sec_okdang .sec_inner .sec_okdang_info a:hover { background-color: var(--point-color02); border-color: transparent; }
	.sec_business .work_list a:hover .thumb::before { width: 100%; height: 100%; }
	.sec_business .work_list a:hover .thumb::after { opacity: 1; }
}