@charset "UTF-8";

html	{font-size: 16px;}
body	{width: 100%; min-width: 360px; line-height: 1.5; color: #000; word-break: break-word;}
body,
input,
select,
textarea				{font-family: 'Pretendard', 'Poppins', Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -.03em;}

/*
	skip-nav
*/
.skip-nav	{position: relative; z-index:-2;}
.skip-nav a	{position: absolute; top: -100vw; left: 0; width:50%; height:2rem; background: #333; color:#fff; text-align: center;}
.skip-nav a:active,
.skip-nav a:focus	{top: 0; text-decoration:none; z-index: 1000;}

/*
	layout
*/
body.modal-opened		{overflow: hidden; height:100%; padding-right:4px;}
body.opened-nav			{overflow: hidden; height: 100%;}
#wrap			{}
#container:not(.main)		{}
#content:not(.main)		{padding-top: 100px; padding-bottom: 200px;}
#header			{position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100px; z-index: 10; background: #fff;
					display: -webkit-box; display: -ms-flexbox; display: flex; 
					-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
					-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
					-webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;
}
@media all and (max-width: 1020px) {
	#content:not(.main){ padding-top: 56px; padding-bottom: 100px;}
}

/* header main */



/* #container.main	#header{background-color: transparent;}
#container.main #header .logo a{background-image: url("../images/common/logo-w.svg");}
#container.main	#nav > ul .depth,
#container.main	#nav .util-wrap .company{color: var(--white); border-color: var(--white);}
#container.main #nav .util-wrap .ico {background-image: url("../images/common/ico_download-w.svg");}

body.opened-nav #container.main	#header,
#container.main	#header.fixed,
#container.main	#header.nav-hover{background: var(--white);}
body.opened-nav #container.main	#header .logo a,
#container.main	#header.fixed .logo a,
#container.main	#header.nav-hover .logo a{background-image: url("../images/common/logo-b.svg");}
body.opened-nav #container.main	#nav > ul .depth,
body.opened-nav #container.main	#nav .util-wrap .company,
#container.main	#header.fixed #nav > ul .depth,
#container.main	#header.fixed #nav .util-wrap .company,
#container.main	#header.nav-hover #nav > ul .depth,
#container.main	#header.nav-hover #nav .util-wrap .company{color: var(--black); border-color: var(--light-gray);}

#container.main	#header.fixed #nav > ul .depth:hover,
#container.main	#header.nav-hover #nav > ul .depth:hover,
#container.main	#header.fixed #nav > ul > li.current .depth,
#container.main	#header.nav-hover #nav > ul > li.current .depth{color: var(--violet);}

#container.main	#hamburger .btn.menu .svg-path,
#container.main	#hamburger .btn.menu .svg-path,
#container.main	#nav .util-wrap .svg-path{stroke: #fff;}
#container.main	#header.fixed #hamburger .btn.menu .svg-path,
#container.main	#header.fixed #hamburger .btn.close .svg-path,
#container.main	#header.fixed #nav .util-wrap .svg-path,
#container.main	#header.nav-hover #hamburger .btn.menu .svg-path,
#container.main	#header.nav-hover #hamburger .btn.close .svg-path,
#container.main	#header.nav-hover #nav .util-wrap .svg-path{stroke: #000;} */

/* header */
#header.fixed {background: #fff;}
#header .header-inner{ position: relative; width: 100%; height: 100%; padding-left: 6.354vw; padding-right: 6.354vw;
display: -ms-flexbox; display: -webkit-box; display: flex; 
transition: all 0.25s ease;
}
#header .logo{position: absolute; top: 0; left: 6.354vw;  width: 240px; height:100%; z-index: 2;}
#header .logo a{display: inline-block; width: 100%; height: 100%; background: url("../images/common/logo-b.svg") 50% 50% no-repeat; background-size: 240px 24px;
-webkit-transition: background 0.25s ease;-o-transition: background 0.25s ease;transition: background 0.25s ease;
}
@media all and (min-width:1921px) {
	#header .header-inner{ padding-left: 122px; padding-right: 122px;}
	#header .logo{left: 122px;}
}
@media all and (min-width:1451px) and (max-width:1920px) {
	#header .header-inner{ padding-right: 6.354vw; padding-left: 6.354vw;}
	#header .logo{left: 6.354vw;}
}
@media all and (min-width:769px) and (max-width:1450px) {
	#header .header-inner{ padding-right: 4.135vw; padding-left: 4.135vw;}
	#header .logo{left: 4.135vw;}
}
/* @media all and (min-width:769px) and (max-width:1024px) {
	#header .logo{width: 210px;}
	#header .logo a{background-size: 210px;}
} */
@media all and (min-width:769px) {
	.nav-hover .header-inner{border-bottom: 1px solid #f5f5f8;}
	#header{height: 100px;}
}
@media all and (max-width: 768px) {
	#header{height: 56px;}
	#header .header-inner{padding-left: 16px; padding-right: 16px;}
	#header .logo{left: 16px; width: 160px;}
	#header .logo a{background-size: 160px 17px;}
}



/* hamburger */
body.opened-nav #hamburger .btn.menu{display: none;}
body.opened-nav #hamburger .btn.close{display: block;}

#hamburger{position: absolute; height: 100%; top: 0; right: 16px;
display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#hamburger .btn.close{display: none;}
#hamburger .btn.menu svg,
#hamburger .btn.close svg{
	-webkit-transition: stroke 0.25s ease;-o-transition: stroke 0.25s ease;transition: stroke 0.25s ease;
}
@media all and (max-width: 768px) {
	#hamburger{display: flex;}
	#hamburger .btn.menu .svg-path,
	#hamburger .btn.close .svg-path{stroke: #000;}
}

/* nav */

#nav,
#nav > ul,
#nav > ul .depth,
#nav > ul .depth span,
#nav .util-wrap .company{height: 100%;
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
#nav{position: relative; width: 100%;}
#nav::before{content: ""; display: block; position: absolute; top: calc(-100% - 141px); left: -122px; z-index: -1; visibility: hidden; opacity: 0; width: calc(100% + 244px); height: calc(100% + 141px); background-color: var(--white); transition: all 0.25s ease;}
#nav > ul > li{position: relative; height: 100%;}
#nav > ul .depth{font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0 40px;}
#nav .util-wrap .company{ height: 32px;border: 1px solid var(--light-gray); border-radius: 6px; font-weight: 600;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-transition: color 0.25s ease;-o-transition: color 0.25s ease;transition: color 0.25s ease;
}
#nav .util-wrap .company svg{margin-left: 4px; -webkit-transition: stroke 0.25s ease;-o-transition: stroke 0.25s ease;transition: stroke 0.25s ease;}
#nav .util-wrap .svg-path{stroke: #000;}
#nav > ul + .util-wrap{margin-left: 40px;}

#nav > ul ul{-webkit-transition: color 0.25s ease;-o-transition: color 0.25s ease;transition: color 0.25s ease;}
#nav > ul ul a{display: block;}


#nav > ul .depth,
#nav > ul ul a{-webkit-transition: color 0.25s ease;-o-transition: color 0.25s ease;transition: color 0.25s ease;}
#nav > ul .depth:hover,
#nav > ul .depth:focus,
#nav > ul > li.current .depth,
#nav > ul ul a:hover,
#nav > ul ul li.current a{color: var(--violet);}

@media all and (min-width:769px) and (max-width:1024px) {
	#nav > ul .depth{padding: 0 2.441vw;}
	#nav > ul + .util-wrap{margin-left: 2.441vw;}
}
@media all and (min-width: 769px) {
	.nav-hover #nav::before{top: 0; visibility: visible; opacity: 1;}
	.nav-hover #nav ul ul{display: block; opacity: 1; visibility: visible;}

	#nav ul > li ul li a:hover{color: var(--violet);}

	#nav{-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
	#nav > ul .depth{height: 100px; font-size: 18px;}
	#nav > ul .depth span{width: 100%;}
	#nav .util-wrap .company{width: 112px; font-size: 14px; }
	

	#nav > ul ul{opacity: 0; visibility: hidden; padding: 23px 0; text-align: center;}
	#nav > ul ul a{padding: 13px 0; font-size: 18px; line-height: 21px;}
}

@media all and (max-width: 768px) {
	body.opened-nav #nav{display: -webkit-box;display: -ms-flexbox;display: flex;}
	#nav,
	#nav > ul{
		-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;
		-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
	}
	#nav > ul,
	#nav > ul > li,
	#nav > ul > li .depth{width: 100%;}
	#nav{position: fixed; top: 0; left: 0; right: 0; width: 100%; height: calc(100% - 56px); margin-top: 56px; padding: 83px 16px 0; background: var(--white); display: none;}
	#nav > ul{ height: auto;}
	#nav > ul > li .depth{ padding-top: 17px; padding-bottom: 17px; font-size: 26px; }
	#nav > ul > li .depth::after{content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url("../images/common/ico_arr_big_down.svg") 50% 50% no-repeat; cursor: pointer;}
	#nav > ul > li:last-child .depth::after{display: none;}
	#nav > ul ul{display: none; padding-top: 5px; padding-bottom: 5px;}
	#nav > ul ul.active{display: block;}
	#nav > ul ul li a{padding-top: 12px; padding-bottom: 12px; font-size: 18px; font-weight: 600;}
	#nav > ul + .util-wrap{margin-top: 23px;}
	#nav .util-wrap .company{width: 120px;}
}





/* footer */
#footer {background-color: #f5f5f8;}
#footer .footer-inner{ padding-left: 122px; padding-right: 122px; 
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
#footer .logo{width: 196px; height: 20px; background: url("../images/common/logo-b.svg") 50% 50% no-repeat; background-size: contain;}

#footer address span{display: inline-block; color: var(--black-op-6);}
#footer address span:last-child{margin-right: 0;}
#footer .copyright{color: var(--black-op-4); font-size: 12px; letter-spacing: -0.24px;}
#footer .policy-wrap a{color: var(--black-op-5); font-weight: 600; letter-spacing: -0.32px;}
#footer address{padding-bottom: 7px;}

#footer .media-wrap{ min-width: 206px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; justify-content: space-between;
}
#footer .select{ height: 40px; line-height: 40px; border-radius: 6px; padding-left: 24px; padding-right: 24px;  font-weight: 500; color: var(--black); background-color: rgba(216, 218, 229, 0.3); background-position: calc(100% - 24px) 50%;}
#footer .select:focus{ background-color: rgba(216, 218, 229, 0.3);}
#footer .select option{color: var(--black-op-5);}
#footer .sns-list{display: -webkit-box;display: -ms-flexbox; display: flex;}
#footer .sns-list li + li{margin-left: 8px;}

#footer{padding-top: 55px; padding-bottom: 55px;}
#footer .comp-info{width: calc(100% - 206px); padding-right: 30px;}
#footer address{max-width: 700px;}
#footer address span{margin-right: 20px; }
#footer address span,
#footer .select{font-size: 14px; letter-spacing: -0.28px;}

#footer address{padding-top: 35px;}
#footer .copyright + .policy-wrap{padding-top: 26px;}




/* @media all and (max-width:960px) {
	#footer{padding-top: 60px; padding-bottom: 60px;}
	#footer .footer-inner{padding-left: 24px; padding-right: 24px; }
	#footer address span{margin-right: 14px; font-size: 12px; letter-spacing: -0.24px;}
	#footer .policy-wrap a,
	#footer .select-wrap .select{font-size: 14px; letter-spacing: -0.24px;}
	
	#footer .logo + address{padding-top: 39px;}
	#footer .copyright + .policy-wrap{padding-top: 20px;}
} */

/* popup */
.overlay	{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); visibility: hidden; opacity: 0; z-index: -1;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.overlay.active		{visibility: visible; opacity: 1; overflow-y: auto; z-index: 99;}
.popup			{position: relative; width: 80%; max-width: 600px; height: 80%; max-height: 580px; background-color: #fff; margin: 0 auto;}
.popup-header		{display: block; padding: .4rem .725rem; border-bottom :1px solid #ddd;}
.popup-body			{height: calc(100% - 3.7rem - 1px); overflow: hidden auto; padding: 1rem .725rem;}
.popup .btn-close	{position: absolute; top: .725rem; right: .725rem; width: 2.25rem; height :2.25rem; background-color:#fff;}

/*
	sub layout
*/



@charset "utf-8";
/* hanbom.com */

/* border-box */
div, article, aside, footer, header, hgroup, main, menu, nav, section,
h1, h2, h3, h4, h5, h6, p,
ul, ol, li,
nav, a, button,
label, input,
select, textarea {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* blind */
.blind,
.ico > span {visibility: hidden; overflow: hidden; position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; font-size: 0; line-height: 0; z-index:-1;}

/* a */
a,
a:link,
a:visited,
a:active,
a:hover			{text-decoration: none; color: inherit;}

/* only */
.only-pc{display: block;}
.only-mo{display: none;}
@media all and (max-width: 768px) {
	.only-pc{display: none;}
	.only-mo{display: block;}
}

/* inner */
.inner-wrap{-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.gutter{max-width: 1338px; width: 100%; margin: 0 auto;}	
@media all and (min-width:1921px) {
	.inner-wrap{ padding-right: 122px; padding-left: 122px;}	
}
@media all and (min-width:1451px) and (max-width:1920px) {
	.inner-wrap{ padding-right: 6.354vw; padding-left: 6.354vw;}
}
@media all and (min-width:1025px) and (max-width:1450px) {
	.inner-wrap{ padding-right: 5.135vw; padding-left: 5.135vw;}
}
@media all and (min-width:769px) and (max-width:1024px) {
	.inner-wrap{ padding-right: 4.135vw; padding-left: 4.135vw;}
}
@media all and (max-width: 768px) {
	.inner-wrap{padding-left: 16px; padding-right: 16px;}
}

/* title */
.page-title{font-size: 86px; font-weight: 700; line-height: 1.4;}
.section-title{font-size: 50px; font-weight: 700; line-height: 1.24;}
.article-title{font-size: 34px; font-weight: 700; line-height: 1.53;}

@media all and (min-width:769px) and (max-width:1024px) {
	.page-title{font-size: 8.398vw;}
	.section-title{font-size: 4.883vw;}
	.article-title{font-size: 3.320vw;}
}
@media all and (max-width: 768px) {
	.page-title,
	.section-title,
	.article-title{padding: 0 8px;}
	.page-title{font-size: 36px; line-height: 1.69;}
	.section-title{font-size: 40px;}
	.article-title{font-size: 28px;}
}

/* image */
.img-wrap,
.img-wrap picture{width: 100%; }
img {vertical-align: top; width: 100%; height: 100%; object-fit: cover;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; 
}

/* font weight */
strong,
.fw-700 {font-weight: 700}

/* font color */
.fc-white{color: var(--white);}

/* background-color */
.bg-sky{background-color: var(--sky);}
.bg-apricot{background-color: var(--apricot);}
.bg-levender{background-color: var(--levender);}

/* text deco */
.underline	{text-decoration: underline;}
/* ico */
.ico		{display: inline-block; background-color: transparent; background-repeat: no-repeat; background-position : 50% 50%; background-size: contain;
			-webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;
			}
.ico.download,
.ico.download-w,
.ico.arr-left,
.ico.arr-down {width: 16px; height: 16px;}
.ico.download	{background-image: url('../images/common/ico_download.svg');}
.ico.download-w	{background-image: url('../images/common/ico_download-w.svg');}
.ico.arr-left	{background-image: url('../images/common/ico_arr_left.svg');}
.ico.arr-down	{background-image: url('../images/common/ico_arr_down.svg');}

.ico.arr-left-g,
.ico.arr-left-v,
.ico.arr-left-w {width: 20px; height: 20px;}
.ico.arr-left-g	{background-image: url('../images/common/ico_arr_left-g.svg');}
.ico.arr-left-v	{background-image: url('../images/common/ico_arr_left-v.svg');}
.ico.arr-left-w	{background-image: url('../images/common/ico_arr_left-w.svg');}

.ico.close,
.ico.magnifier,
.ico.link,
.ico.menu,
.ico.menu-w,
.ico.arr-big-down,
.ico.arr-big-up{width: 24px; height: 24px;}
.ico.close	{background-image: url('../images/common/ico_close.svg');}
.ico.magnifier {background-image: url('../images/common/ico_magnifier.svg');}
.ico.link {background-image: url('../images/common/ico_link.svg');}
.ico.menu {background-image: url('../images/common/ico_menu.svg');}
.ico.menu-w {background-image: url('../images/common/ico_menu-w.svg');}
.ico.arr-big-down {background-image: url('../images/common/ico_arr_big_down.svg');}
.ico.arr-big-up {background-image: url('../images/common/ico_arr_big_up.svg');}

.ico.pop-close{width: 36px; height: 36px; background-image: url("../images/common/ico_pop_close.svg");}

.ico.instar,
.ico.kko,
.ico.youtube,
.ico.facebook{width: 40px; height: 40px;}
.ico.instar{background-image: url("../images/common/ico_instar.svg");}
.ico.kko{background-image: url("../images/common/ico_kko.svg")}
.ico.youtube{background-image: url("../images/common/ico_youtube.svg")}
.ico.facebook{background-image: url("../images/common/ico_facebook.svg")}

.ico.business-1,
.ico.business-1-1,
.ico.business-2,
.ico.business-2-1,
.ico.business-3,
.ico.business-3-1,
.ico.business-4,
.ico.business-4-1,
.ico.business-5,
.ico.business-6,
.ico.business-7,
.ico.business-8,
.ico.business-9,
.ico.business-10,
.ico.business-11,
.ico.business-12,
.ico.business-13,
.ico.business-14,
.ico.business-15,
.ico.business-16{width: 78px; height: 78px;}
.ico.business-1 {background-image: url("../images/common/ico_business-1.svg");}
.ico.business-1-1{background-image: url("../images/common/ico_business-1-1.svg");}
.ico.business-2{background-image: url("../images/common/ico_business-2.svg");}
.ico.business-2-1{background-image: url("../images/common/ico_business-2-1.svg");}
.ico.business-3{background-image: url("../images/common/ico_business-3.svg");}
.ico.business-3-1{background-image: url("../images/common/ico_business-3-1.svg");}
.ico.business-4{background-image: url("../images/common/ico_business-4.svg");}
.ico.business-4-1{background-image: url("../images/common/ico_business-4-1.svg");}
.ico.business-5{background-image: url("../images/common/ico_business-5.svg");}
.ico.business-6{background-image: url("../images/common/ico_business-6.svg");}
.ico.business-7{background-image: url("../images/common/ico_business-7.svg");}
.ico.business-8{background-image: url("../images/common/ico_business-8.svg");}
.ico.business-9{background-image: url("../images/common/ico_business-9.svg");}
.ico.business-10{background-image: url("../images/common/ico_business-10.svg");}
.ico.business-11{background-image: url("../images/common/ico_business-11.svg");}
.ico.business-12{background-image: url("../images/common/ico_business-12.svg");}
.ico.business-13{background-image: url("../images/common/ico_business-13.svg");}
.ico.business-14{background-image: url("../images/common/ico_business-14.svg");}
.ico.business-15{background-image: url("../images/common/ico_business-15.svg");}
.ico.business-16{background-image: url("../images/common/ico_business-16.svg");}

.ico.etc-1{width: 140px; height: 140px; background-image: url("../images/common/ico_etc-1.svg");}
.ico.etc-2{width: 154px; height: 154px; background-image: url("../images/common/ico_etc-2.svg");}
.ico.etc-3{width: 132px; height: 194px; background-image: url("../images/common/ico_etc-3.svg");}
.ico.etc-4{width: 300px; height: 300px; background-image: url("../images/common/ico_etc-4.svg");}


/* ellipsis */
.ellipsis,
.ellipsis-2 {
	display: -webkit-box; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-orient: vertical; word-wrap: break-word;
}
.ellipsis{line-height: 1.25rem; height: 1.25rem; -webkit-line-clamp: 1;}
.ellipsis-2 {height: 54px; -webkit-line-clamp: 2;}

/* align */
.ta-c {text-align: center !important;}
.ta-l {text-align: left !important;}
.ta-r {text-align: right !important;}

/* transform */
.rotate{-webkit-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);}

/* tabs */
.tabs,
.tabs a					{
	display: -ms-flexbox; display: -webkit-box; display: flex;
}
.tabs li + li 				{margin-left: 100px;}
.tabs a 					{position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; cursor: pointer; text-align: center; text-decoration:none;
	color: var(--black-op-3); font-size: 32px; font-weight: 600; line-height: 1.03;
	-webkit-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	-webkit-touch-callout: none; -khtml-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	
	
}
.tabs a:hover,
.tabs li.current a{color: var(--violet);}

.tab-content{display: none;}
.tab-content.active{display: block;}

/* flex */
[class*="flex"]	{
	display: -webkit-box;display: -ms-flexbox;display: flex;
	-webkit-box-align: center;-ms-flex-align: center;align-items: center; 
}
.flex-normal{-webkit-box-align: baseline;-ms-flex-align: baseline;align-items: baseline;}
.flex-start{-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.flex-center{-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.flex-end{-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
.flex-between{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}

@media all and (max-width: 960px) {
	.flex-column{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
}

/* pagination */ 
.pagination		{}
.pagination ul,
.pagination li		{}
.pagination a		{}
.pagination a.prev		{}
.pagination a.next		{}
.pagination a:hover		{}
.pagination li.active a	{}

/* col */
[class*="col-"]{
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
	-ms-flex-wrap: wrap;flex-wrap: wrap;
}
.col-2{width: calc(100% + 52px); margin-top: -26px; margin-left: -26px;}
.col-2 > li,
.col-2 > div{margin: 26px; width: calc((100% - 104px) / 2);}
.col-3{width: calc(100% + 52px); margin-top: -40px; margin-left: -26px;}
.col-3 > li,
.col-3 > div{margin: 40px 26px; width: calc((100% - 156px) / 3);}
.col-4{width: calc(100% + 52px); margin-top: -18px; margin-left: -26px;}
.col-4 > li,
.col-4 > div{margin: 18px 26px; width: calc((100% - 208px) / 4);}
@media all and (max-width: 768px) {
	.col-2,
	.col-3,
	.col-4{width: 100%; margin-top: 0; margin-left: 0;}
	.col-2 > li,
	.col-2 > div,
	.col-3 > li,
	.col-3 > div,
	.col-4 > li,
	.col-4 > div{margin: 0; width: 100%;}
	/* .col-2 li + li,
	.col-2 div + div{margin-top: 20px;}
	.col-4 li + li,
	.col-4 div + div{margin-top: 34px;} */
}

/* data-list */
.data-list{}
.data-list li + li{}


/* banner-wrap */
.banner-wrap,
.banner-wrap .text-wrap{
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.banner-wrap{overflow: hidden; position: relative; width: 100%; height: 604px;
	-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;
}
.banner-wrap .title{font-size: 44px; line-height: 1.45;}
.banner-wrap .img-wrap{width: 100%; height: 100%;}
.banner-wrap .text-wrap{position: absolute; top: 0; width: 100%; height: 100%;}
.banner-wrap .title{ color: var(--white); font-weight: 700; }
@media all and (min-width:1921px) {
	.banner-wrap .text-wrap{ padding-right: 122px; padding-left: 122px;}
}
@media all and (min-width:1451px) and (max-width:1920px) {
	.banner-wrap .text-wrap{ padding-right: 6.354vw; padding-left: 6.354vw;}
}
@media all and (min-width:769px) and (max-width:1450px) {
	.banner-wrap .text-wrap{ padding-right: 4.135vw; padding-left: 4.135vw;}
}
@media all and (min-width: 769px) and (max-width:1024px){
	.banner-wrap{height: 58.984vw;}
	.banner-wrap .title{font-size: 4.297vw;}
}
@media all and (max-width: 768px) {
	.banner-wrap{height: 563px;}
	.banner-wrap .text-wrap{padding: 0 24px;}
	.banner-wrap .title{font-size: 28px;}
}


/* contact-wrap */

.contact-wrap{position: relative; overflow: hidden; width: 100%;  border-radius: 20px; }
.contact-wrap .inner-wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	display: -webkit-box;display: -ms-flexbox;display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
}
.contact-wrap .title{color: var(--white); font-weight: 600;}

@media all and (min-width:1025px) {
	.contact-wrap{margin-top: 200px; max-height: 500px; }
	.contact-wrap .title{font-size: 36px;}
	.contact-wrap .title + .btn-area{margin-top: 50px;}
}
@media all and (min-width: 769px) {
	.contact-wrap .inner-wrap{-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
	.contact-wrap .btn{min-width: 240px;}
}
@media all and (min-width: 769px) and (max-width:1024px) {
	.contact-wrap{max-height: 48.828vw; margin-top: 19.531vw;}
	.contact-wrap .title{font-size: 3.516vw;}
	.contact-wrap .title + .btn-area{margin-top: 4.883vw;}	
	.contact-wrap .btn.medium{height: 6.641vw; line-height: 6.641vw;}	
}
@media all and (max-width: 768px) {
	.contact-wrap{margin-top: 66px; height: 280px;}
	.contact-wrap .inner-wrap{text-align: center; -webkit-box-align: center;-ms-flex-align: center;align-items: center;}
	.contact-wrap .btn{min-width: 200px;}
	.contact-wrap .title{font-size: 20px;}
	.contact-wrap .title + .btn-area{margin-top: 30px;}
}


/* item */
.item.normal{}
.item.normal .ico-wrap{}
.item.normal .text-wrap{}
.item.normal .title{font-size: 24px; font-weight: 700;}
.item.normal .text{font-size: 18px; color: var(--black-op-5); font-weight: 500;}
.item.normal .text-wrap + .text-wrap{margin-top: 46px;}
.item.normal .title + .text{margin-top: 18px;}

.item.frame{}
.item.frame .img-wrap{position: relative; border: 1px solid var(--light-gray); overflow: hidden;}
.item.frame:hover .viewer-wrap,
.item.frame.hover-effect .viewer-wrap{visibility: visible; opacity: 1; }
.item.frame .viewer-wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black-op-5);
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	visibility: hidden; opacity: 0; 
	-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;
}
.item.frame .viewer-wrap .btn{font-size: 16px; font-weight: 500;}
.item.frame .img-wrap + .text-wrap{margin-top: 30px;}
.item.frame .text-wrap{}
.item.frame .category{color: var(--black-op-4); font-size: 18px; font-weight: 600; letter-spacing: -0.36px}
.item.frame .title{font-size: 20px; font-weight: 600;}
.item.frame .category + .title{padding-top: 16px;}

.item.project{overflow: hidden; position: relative; height: 34.792vw; padding: 2.604vw; background: #f5f5f8; border-radius: 20px;}
.item.project .title-wrap{}
.item.project .category{font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--black-op-3);}
.item.project .title{font-size: 26px; font-weight: 600; line-height: 1.23;}
.item.project .category + .title{margin-top: 12px;}
.item.project .ico-wrap{position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; text-align: center;
	-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);
}
@media all and (min-width:1920px) {
	.item.project{height: 668px; padding: 50px;}
}
@media all and (max-width:768px) {
	.item.project{padding: 30px;}
	.item.project .text-wrap .title{font-size: 20px;}
	.item.project .text-wrap .text{font-size: 14px;}
	.item.project .category + .title{margin-top: 2px;}
}

/* item.article */

/* common */
.item.article{overflow: hidden; width: 100%;  background-color: #f5f5f8;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.item.article .title{font-weight: 700;}
.item.article .text-wrap,
.item.article .img-wrap{width: 50%; height: 100%;}
.item.article .text-wrap .text{font-size: 18px; color: var(--black-op-5); word-break:keep-all;}
.item.article .text-wrap .title + .text,
.item.article .text-wrap .title + div,
.item.article .text-wrap .title + ul{margin-top: 7px;}
/* normal */
.item.article:not(.medium){border-radius: 20px;}
.item.article:not(.medium) .text-wrap .title{font-size: 24px;}
/* medium */
.item.article.medium{}
.item.article.medium .title{font-size: 28px;}

@media all and (max-width:1024px) {
	.item.article .img-wrap{width: 100%;}
	.item.article .text-wrap .title + .text,
	.item.article .text-wrap .title + div,
	.item.article .text-wrap .title + ul{margin-top: 4px;}
}
@media all and (max-width:768px) {
	.item.article .text-wrap .text{font-size: 16px;}
	
	.item.article:not(.medium) .text-wrap .title{font-size: 20px;}
	.item.article.medium .title{font-size: 24px;}
	
}