@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		#wrap {position:relative;width:100%; overflow: clip;} 
		.w_custom, #container {position: relative; width: calc(100% - 60px); max-width: 1400px; margin:0 auto; box-sizing: border-box;}
        #container {padding-bottom: 164px;}
		#container:has(.full_sec) {width: 100%; max-width: 100%; padding: 0;}
		#wrap:has(.full_sec) .w_custom {max-width: 1720px;}
		
	@media screen and (max-width:1400px) {
		#container {padding-bottom: clamp(70px, 10vw, 164px);}
	}
	@media screen and (max-width:860px) {
		.w_custom, #container {width: calc(100% - 30px);}
	}
    @media screen and (max-width:320px) {
		.w_custom, #container {width: calc(100% - 20px);}
	}
	

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

	 HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
	#header {position: fixed; top:0; left:0; width:100%; height: 100px; box-sizing:border-box; overflow:visible; z-index:20; transition: all 0.3s;}
	#header:after {content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(100% - 60px); max-width: 1720px; height: 1px; background: rgba(255,255,255,0.5); transition: all 0.3s;}
	#header .w_custom {position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; max-width:1720px;}
	#header .hd_logo {display: block; width: 235px; height: 48px;}
	#header .hd_logo a {display: block; width:100%; height:100%; background:url('../images/skin/hd_logo.svg') no-repeat left center; background-size:auto 100%; font-size:0;}
	#header .hd_right {display: flex; align-items: center; height: 100%;}
	#header .hd_lnb {display: flex; align-items: center; gap: 0 80px; height: 100%;}
	#header .hd_lnb > li {position: relative; height: 100%; font-size: var(--title-20);}
	#header .hd_lnb > li > a {display: flex; align-items: center; height: 100%; font-size: 100%; color: var(--point-white); font-weight: 600; line-height: 1;}
	#header .hd_lnb .lnb_dep2 {display:none;position:absolute;left:50%;top:100%;transform:translate(-50%);width:max-content;min-width:160px;background:var(--point-white);box-sizing:border-box;padding:20px 15px 25px 15px;box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);text-align: center;z-index:5;}
	#header .hd_lnb .lnb_dep2 li + li {margin-top:14px;}		
	#header .hd_lnb .lnb_dep2 li a {font-size:var(--title-16);color:var(--black-color06);font-weight:500;}
	#header .hd_lang {position: relative; width: 90px; margin-left: 80px; margin-right: 40px; font-size: var(--title-20);}
	#header .hd_lang dt {position: relative; display: flex; align-items: center; gap: 0 12px; font-size: 80%; color:var(--point-white); font-weight: 400; cursor:pointer;}
	#header .hd_lang dt:before {content: ""; display: block; width: 16px; height: 16px; background: url("../images/skin/hd_lang.png") no-repeat center; background-size: cover;}
	#header .hd_lang dt:after {content: ""; position:absolute; right: 0; top: 50%; transform:translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 6px 4px 0px 4px; border-color: var(--trans-color); border-top-color: var(--point-white); transition: all 0.3s;}
	#header .hd_lang dt.on:after {top: 48%; transform:translateY(-50%) scaleY(-1);}
	#header .hd_lang dt span {line-height: 1;}
	#header .hd_lang dd {display:none;position:absolute;left:50%;top:150%;transform:translate(-50%);z-index:5;}
	#header .hd_lang dd ul li {font-size: var(--title-20);}
	#header .hd_lang dd ul li + li {margin-top: 2px;}
	#header .hd_lang dd ul li a {display: flex; align-items: center; justify-content: center; height: 34px; background: var(--gray-bg01); box-sizing: border-box; padding: 0 18px; border-radius: 17px; transition: all 0.4s; font-size: 80%; color:var(--black-color06); line-height: 1; letter-spacing: inherit;}
	#header .hd_lang dd ul li.on a {background: var(--point-color01); color: var(--point-white);}
	#header .menu-trigger {display: flex; flex-direction: column; align-items: flex-end; gap: 6px 0; width: 26px;}
	#header .menu-trigger span {display: block; width: 100%; height: 2px; background: var(--point-white); transition: all 0.3s;}
	#header .menu-trigger span:nth-child(2) {width: calc(100% - 6px);}
	
	/* over */
		@media (hover:hover){
			#header:hover {background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transform: translate3D(0, 0, 0);}
			#header:hover:after {width: 100%; max-width: 100%;}
			#header .hd_lnb .lnb_dep2 li:hover a {color:var(--point-color01);}
			#header .menu-trigger:hover span:nth-child(2) {width: 100%;}
		}
	/* on */
		#header.on {background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transform: translate3D(0, 0, 0);}
		#header.on:after {width: 100%; max-width: 100%;}
		#header.on .hd_logo a {background:url('../images/skin/hd_logo_b.png') no-repeat left center; background-size:auto 100%;}
		#header.on .hd_lnb > li > a {color:var(--black-color01);}
		#header.on .hd_lang dt {color: var(--black-color01); opacity: 0.8;}
		#header.on .hd_lang dt:before {filter: var(--filter-black);}
		#header.on .hd_lang dt:after {border-top-color: var(--black-color01);}
		#header.on .menu-trigger span {background:var(--black-color01);}
	
	@media only screen and (max-width:1400px){
		#header .hd_lnb {gap: 0 5.71vw;}
		#header .hd_lang {margin-left: 5.71vw; margin-right: 2.86vw;}
	}
	@media only screen and (max-width:1240px){
		#header .hd_logo {width: 222px; height: 45px;}
		#header .hd_lnb > li > a {font-size: 95%;}
	}
	@media only screen and (max-width:1023px){
		#header {height: 85px;}
		#header .hd_logo {width: 208px; height: 42px;}
		#header .hd_lnb {display: none;}
		#header .hd_lang {width: 85px; margin-left: 0; margin-right: 30px;}
	}
	@media only screen and (max-width:860px){
		#header {height: 80px;}
		#header:after {width: calc(100% - 30px);}
		#header .hd_logo {width: 200px; height: 40px;}
		#header .hd_lang {width: 80px;}
		#header .hd_lang dt {gap: 0 8px;}
		#header .hd_lang dt:before {width: 14px; height: 14px;}
		#header .hd_lang dd ul li a {height: 30px;}
	}
	@media only screen and (max-width:640px){
		#header {height: 75px;}
		#header .hd_logo {width: 184px; height: 37px;}
		#header .hd_lang {width: 75px;}
		#header .hd_lang dt:after {border-width: 5px 4px 0 4px;}
		#header .hd_lang dd ul li a {height: 28px; padding: 0 16px;}
		#header .menu-trigger {gap: 5px 0; width: 24px;}
		#header .menu-trigger span:nth-child(2) {width: calc(100% - 4px);}
	}
	@media only screen and (max-width:479px){
		#header {height: 70px;}
		#header .hd_logo {width: 170px; height: 34px;}
		#header .hd_lang {width: 70px; margin-right: 24px;}
		#header .hd_lang dt:before {width: 12px; height: 12px;}
		#header .hd_lang dt:after {border-width: 4px 3px 0 3px;}
		#header .menu-trigger {width: 22px;}
	}
	@media only screen and (max-width:320px){
		#header:after {width: calc(100% - 20px);}
	}


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

	 ASIDE | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
		.dg.ac{display:none;}

		#aside {top:0;right:0;width:100%; height:100%; box-sizing:border-box;box-sizing:border-box;position:fixed;background:#fff;z-index:95; opacity:0; pointer-events:none; transition:all 1.5s; transition-delay:0.6s;}
		#aside.on {opacity:1; pointer-events:inherit;}

		.aside_bg {position:fixed; width:100%; height:100%; top:0; left:0; z-index:90;background:#fff0; pointer-events:none; transform:scaleX(-1)}
		.aside_bg.on {opacity:1;display:block; pointer-events:inherit;}
		.aside_bg div {position: absolute;z-index: 1; background-repeat: no-repeat; transform: rotateY(-50deg) scale(0.5); opacity: 0; transform-origin: bottom; transition: all .6s cubic-bezier(.71, .05, .09, .91); transition-delay:0.3s;}
		.aside_bg.on div{opacity: 1; transform: rotate(0deg) translateY(0);}
		
		#aside .aside_box {display: block;width:100%;height:100%;}		
		#aside .aside_box.for_m {display:none;}
		#aside .aside_box .w_custom {max-width: 1720px;}
		#aside .aside_head {display: flex; justify-content: space-between; align-items: center; height: 100px; box-sizing: border-box; border-bottom: 1px solid var(--border-color01);}
		#aside .aside_head .aside_logo {display: block; width: 235px; height: 48px;}
		#aside .aside_head .aside_logo a {display: block; width:100%; height:100%; background:url('../images/skin/hd_logo_b.png') no-repeat left center; background-size:auto 100%; font-size:0;}
		#aside .aside_right {display: flex; align-items: center; height: 100%;}
		#aside .aside_lang {position: relative; width: 90px; margin-right: 40px; font-size: var(--title-20);}
		#aside .aside_lang dt {position: relative; display: flex; align-items: center; gap: 0 12px; font-size: 80%; color:var(--black-color01); font-weight: 400; opacity: 0.8; cursor:pointer;}
		#aside .aside_lang dt:before {content: ""; display: block; width: 16px; height: 16px; background: url("../images/skin/hd_lang.svg") no-repeat center; background-size: cover; filter: var(--filter-black);}
		#aside .aside_lang dt:after {content: ""; position:absolute; right: 0; top: 50%; transform:translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 6px 4px 0px 4px; border-color: var(--trans-color); border-top-color: var(--black-color01); transition: all 0.3s;}
		#aside .aside_lang dt.on:after {top: 48%; transform:translateY(-50%) scaleY(-1);}
		#aside .aside_lang dd {display:none;position:absolute;left:50%;top:120%;transform:translate(-50%);z-index:5;}
		#aside .aside_lang dd ul li {font-size: var(--title-20);}
		#aside .aside_lang dd ul li + li {margin-top: 2px;}
		#aside .aside_lang dd ul li a {display: flex; align-items: center; justify-content: center; height: 34px; background: var(--gray-bg01); box-sizing: border-box; padding: 0 18px; border-radius: 17px; transition: all 0.4s; font-size: 80%; color:var(--black-color06); line-height: 1; letter-spacing: inherit;}
		#aside .aside_lang dd ul li.on a {background: var(--point-color01); color: var(--point-white);}
		#aside .menu-trigger2 {position: relative; width: 26px; height: 26px;}
		#aside .menu-trigger2 span {position: absolute; left: 50%; top: 50%; display: block; width: 100%; height: 2px; background: var(--black-color01);}
		#aside .menu-trigger2 span:nth-child(1) {transform: translate(-50%,-50%) rotate(45deg);}
		#aside .menu-trigger2 span:nth-child(2) {transform: translate(-50%,-50%) rotate(-45deg);}
		
		#aside .aside_cont {position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
		#aside .aside_cont ul.aside_menu {position: relative;width:100%;max-height:500px;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 80px 0;}
		#aside .aside_cont ul.aside_menu > li {position: relative;display:inline-block;width:48%;font-size:var(--title-20);}
		#aside .aside_cont ul.aside_menu > li > a {font-size: 240%; color: var(--black-color03); font-weight: 700;}
		#aside .aside_cont ul.aside_menu > li .dep2 {display: flex;flex-wrap: wrap; gap: 14px 40px; margin-top: 20px;}
		#aside .aside_cont ul.aside_menu > li .dep2 li a {position: relative; padding-bottom: 2px; font-size: 100%; color: var(--black-color06);}
		#aside .aside_cont ul.aside_menu > li .dep2 li a:after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--black-color03); transition: all 0.3s;}
		
		/* over */
			@media (hover:hover){
				#aside .aside_cont ul.aside_menu > li:hover > a,
				#aside .aside_cont ul.aside_menu > li:focus > a {color: var(--point-color01);}
				#aside .aside_cont ul.aside_menu > li .dep2 li:hover a {color: var(--black-color03);}
				#aside .aside_cont ul.aside_menu > li .dep2 li:hover a:after {width: 100%;}
			}

	@media only screen and (max-width:1400px){
		#aside .aside_lang {margin-right: 2.86vw;}
		
		#aside .aside_cont ul.aside_menu > li > a {font-size: 225%;}
	}
	@media only screen and (max-width:1240px){
		#aside .aside_head .aside_logo {width: 222px; height: 45px;}
		
		#aside .aside_cont ul.aside_menu {gap: 60px 0;}
		#aside .aside_cont ul.aside_menu > li {width: 100%;}
		#aside .aside_cont ul.aside_menu > li > a {font-size: 210%;}
		#aside .aside_cont ul.aside_menu > li .dep2 {margin-top: 16px;}
	}
	@media only screen and (max-width:1023px){
		#aside .aside_head {height: 85px;}
		#aside .aside_head .aside_logo {width: 208px; height: 42px;}
		#aside .aside_lang {width: 85px; margin-right: 30px;}
	}
	@media only screen and (max-width:860px){
		#aside .aside_head {height: 80px;}
		#aside .aside_head .aside_logo {width: 200px; height: 40px;}
		#aside .aside_lang {width: 80px;}
		#aside .aside_lang dt {gap: 0 8px;}
		#aside .aside_lang dt:before {width: 14px; height: 14px;}
		#aside .aside_lang dd ul li a {height: 30px;}
	}
	@media only screen and (max-width:860px){
		#aside.on {right:0;}
		
		#aside .aside_box.for_pc{display:none;}
		#aside .aside_box.for_m{display:block;}
		#aside .aside_box {display: block;height:100%;overflow-y:scroll;}
		#aside .aside_cont {padding:0; top:auto; left:auto; position:relative; transform:none;}
		#aside .aside_cont ul.aside_menu {box-sizing:border-box;padding:60px 0 30px;max-height:initial;gap: 4.07vw 0;}
		#aside .aside_cont ul.aside_menu > li {width:100%;}
		#aside .aside_cont ul.aside_menu > li > a {position: relative;display: block;width:100% !important;font-size:180%;transition:all 0.3s;}
		#aside .aside_cont ul.aside_menu > li > a.on {color:var(--point-color01);}
		#aside .aside_cont ul.aside_menu > li > a:before {width:20px;height:2px;content:"";background:var(--black-color06);position: absolute;right: 0;top:50%;transform:translate(0,-50%); transition:all 0.3s;}
		#aside .aside_cont ul.aside_menu > li > a:after {width:2px;height:20px;content:"";background:var(--black-color06);position: absolute;right: 9px;top:50%;transform:translate(0,-50%); transition:all 0.3s;}
		#aside .aside_cont ul.aside_menu > li > a.on:before {background:var(--point-color01);}
		#aside .aside_cont ul.aside_menu > li > a.on:after {opacity:0;}
		#aside .aside_cont ul.aside_menu > li .dep2 {display: none;}
		#aside .aside_cont ul.aside_menu > li .dep2 li + li {margin-top: 10px;}
	}
	@media only screen and (max-width:640px){
		#aside .aside_head {height: 75px;}
		#aside .aside_head .aside_logo {width: 184px; height: 37px;}
		#aside .aside_lang {width: 75px;}
		#aside .aside_lang dt:after {border-width: 5px 4px 0 4px;}
		#aside .aside_lang dd ul li a {height: 28px; padding: 0 16px;}
		#aside .menu-trigger2 {gap: 5px 0; width: 24px;}
		
		#aside .aside_cont ul.aside_menu {gap: 26px 0;}
		#aside .aside_cont ul.aside_menu > li > a {font-size: 170%;}
	}
	@media only screen and (max-width:479px){
		#aside .aside_head {height: 70px;}
		#aside .aside_head .aside_logo {width: 170px; height: 34px;}
		#aside .aside_lang {width: 70px; margin-right: 24px;}
		#aside .aside_lang dt:before {width: 12px; height: 12px;}
		#aside .aside_lang dt:after {border-width: 4px 3px 0 3px;}
		#aside .menu-trigger2 {width: 22px;}
		
		#aside .aside_cont ul.aside_menu {padding: 50px 0 20px;}
		#aside .aside_cont ul.aside_menu > li > a {font-size: 160%;}
	}
	

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

	 FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	#footer {background: var(--green-bg01);}
	#footer .w_custom {display: flex; justify-content: space-between; max-width:1720px;}
	#footer .ft_top {padding-top: 60px; padding-bottom: 90px;}
	#footer .ft_top .ft_left {width: 40%;}
	#footer .ft_top .ft_info {display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 50px;}
	#footer .ft_top .ft_info dl {display: flex; align-items: center; gap: 0 20px; font-size: var(--title-20);}
	#footer .ft_top .ft_info dt, #footer .ft_top .ft_info dd {font-size: 90%;}
	#footer .ft_top .ft_info dt {font-weight: 500; color: var(--black-color10); letter-spacing: normal;}
	#footer .ft_top .ft_info dd {color: var(--black-color03);}
	#footer .ft_top .ft_info dd a {font-size: inherit; color: inherit;}
	#footer .ft_top .ft_lnb {display: flex; gap: 0 5.73vw; font-size: var(--title-20); font-family: var(--font-type02);}
	#footer .ft_top .ft_lnb > li > a {font-size: inherit; font-weight: 500; color: var(--black-color00);}
	#footer .ft_top .ft_lnb > li:last-child a:after {content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 10px; background: url("../images/skin/lnb_arw.svg") no-repeat center; background-size: cover;}
	#footer .ft_top .ft_lnb > li .ft_dep2 {margin-top: 20px;}
	#footer .ft_top .ft_lnb > li .ft_dep2 > li + li {margin-top: 8px;}
	#footer .ft_top .ft_lnb > li .ft_dep2 > li > a {font-size: 90%; color: var(--black-color06);}
	#footer .ft_btm {width: 100%; height: 64px; background: linear-gradient(90deg, var(--point-color03) 0%, var(--point-color01) 100%); font-size: var(--title-20); color: var(--point-white);}
	#footer .ft_btm .w_custom {height: 100%; align-items: center;}
	#footer .ft_btm .ft_copy {font-size: 80%; font-weight: 300; letter-spacing: 0.03em; opacity: 0.6;}
	#footer .ft_btm .ft_menu {display: flex;}
	#footer .ft_btm .ft_menu li {display: flex; align-items: center;}
	#footer .ft_btm .ft_menu li + li:before {content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 20px; background: rgba(255,255,255,0.6);}
	#footer .ft_btm .ft_menu li a {font-size: 85%; font-weight: 300; line-height: 1; }
	#footer .ft_btm .ft_menu li a em {font-weight: 500;}
	
	@media screen and (max-width:1240px) {
		#footer .ft_top {padding-top: clamp(45px, 4.84vw, 60px); padding-bottom: clamp(60px, 7.26vw, 90px);}
		#footer .ft_top .w_custom {flex-direction: column; gap: clamp(45px, 4.84vw, 60px) 0;}
		#footer .ft_top .ft_left {width: 100%;}
		#footer .ft_top .ft_logo {width: 212px;}
		
		#footer .ft_top .ft_info {margin-top: clamp(35px, 3.23vw, 50px);}
		#footer .ft_top .ft_lnb {justify-content: space-between; gap: 0; width: 100%;}
	}
	@media screen and (max-width:1023px) {
		#footer .ft_top .ft_logo {width: 198px;}
		
		#footer .ft_btm {height: 60px;}
		#footer .ft_btm .ft_menu li + li:before {margin: 0 16px;}
	}
	@media screen and (max-width:860px) {
		#footer .ft_top .ft_logo {width: 190px;}
		#footer .ft_top .ft_info {gap: 10px 34px;}
		#footer .ft_top .ft_info dl {gap: 0 14px;}
		#footer .ft_top .ft_lnb > li .ft_dep2 {margin-top: 14px;}
		#footer .ft_top .ft_lnb > li .ft_dep2 > li + li {margin-top: 6px;}
		
		#footer .ft_btm {height: auto; padding-top: 20px; padding-bottom: 20px;}
		#footer .ft_btm .w_custom {flex-direction: column-reverse; align-items: flex-start; justify-content: center; gap: 8px;} 
	}
	@media screen and (max-width:640px) {
		#footer .ft_top .ft_logo {width: 178px;}
		#footer .ft_top .ft_info {gap: 8px 30px; margin-top: 30px;}
		#footer .ft_top .ft_lnb {display: none;}
		
		#footer .ft_btm {padding-top: 18px; padding-bottom: 18px;}
		#footer .ft_btm .ft_menu li + li:before {margin: 0 13px;}
	}
	@media screen and (max-width:479px) {
		#footer .ft_top {padding-top: 40px; padding-bottom: 55px;}
		#footer .ft_top .ft_logo {width: 170px;}
		#footer .ft_top .ft_info {margin-top: 25px;}
		
		
	}
		
/*───────────────────────────────────────────────────────────

	 MAIN | index.html

───────────────────────────────────────────────────────────*/
	/* visual */
		#wrap .main_visual {position:relative;width:100%;margin:0;height:50vw;max-height:960px;background:#000;}
		#wrap .main_visual .slick-slide {overflow:hidden;position:relative;text-align:center;height:50vw;max-height:960px;border:none;min-height:100% !important;}
		.main_visual .slick-slide a {display:inline-block;height:100%;width:100%;max-width:1920px;margin:0 auto;text-align:Center;position:absolute;left:0;top:0;outline:0;}
			
		@media only screen and (max-width:860px){
			#wrap .main_visual, #wrap .main_visual .slick-slide{height:170vw;max-height: calc(100vh - 40px);}
		}

	/* main_title, tab, btn */
		.main_title {display: flex; align-items: flex-end; gap: 20px 70px; font-size: var(--title-20);}
		.main_title h3 {font-size: 290%; font-weight: 600; color: var(--black-color01); letter-spacing: -0.01em; line-height: 1.06;}
		
		.main_tab {display: flex; align-items: center; gap: 0 50px; padding-bottom: 6px;}
		.main_tab li {font-size: var(--title-20);}
		.main_tab li span {position: relative; display: block; padding-bottom: 4px; font-size: inherit; color: var(--black-color10); font-weight: 500; font-family: var(--font-type02); cursor: pointer; transition: all 0.3s;}
		.main_tab li span:after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--point-color01);}
		.main_tab li.active span {color: var(--point-color01); font-weight: 600;}
		.main_tab li.active span:after {width: 100%;}
		
		.tab_cont {margin-top: 50px;}
		.tab_cont .cont {height: 0; overflow: hidden; opacity: 0;}
		.tab_cont .cont.active {height: auto; overflow: visible; opacity: 1;}
		
		.main_more {position: relative; display: flex; align-items: center; width: auto; height: 60px; box-sizing: border-box; padding: 0 22px 0 26px; border-radius: 60px; font-size: var(--title-20);}
		.main_more:before {content: ""; position: absolute; right: 0; top: 0; width: 60px; height: 100%; background: var(--point-color02); border-radius: 60px; transition: all 0.3s;}
		.main_more span {position: relative; display: flex; align-items: center; gap: 0 45px; font-size: 90%; font-weight: 600; color: var(--point-color02); line-height: 1; transition: all 0.3s;}
		.main_more span:after {content: ""; display: block; width: 16px; height: 16px; background: url("../images/skin/more_plus.svg") no-repeat center; background-size: cover;}
		
		/* over */
			@media (hover:hover){
				.main_tab li:hover span {color: var(--point-color01); font-weight: 600;}
				.main_more:hover:before {width: 100%;}
				.main_more:hover span {color: var(--point-white); font-weight: 500;} 
			}
		
		@media screen and (max-width:1400px) {
			.main_title {gap: 20px 5vw;}
			.main_title h3 {font-size: 270%;}
			
			.main_tab {gap: 0 3.57vw;}
		}
		@media screen and (max-width:1240px) {
			.main_title h3 {font-size: 250%;}
			
			.main_tab li span {font-size: 95%;}
			
			.main_more {height: 55px; padding: 0 20px 0 24px; border-radius: 55px;}
			.main_more:before {width: 55px; border-radius: 55px;}
			.main_more span {gap: 0 40px;}
		}
		@media screen and (max-width:1023px) {
			.main_title {flex-direction: column; align-items: flex-start;}
			
			.tab_cont {margin-top: 40px;}
			
			.main_more {height: 50px; padding: 0 18px 0 22px; border-radius: 50px;}
			.main_more:before {width: 50px; border-radius: 50px;}
			.main_more span {gap: 0 35px;}
			.main_more span:after {width: 14px; height: 14px;}
		}
		@media screen and (max-width:860px) {
			.main_tab {gap: 0 30px;}
		}
		@media screen and (max-width:640px) {
			.tab_cont {margin-top: 30px;}
			
			.main_tab {gap: 0 24px;}
			
			.main_more {height: 44px; padding: 0 16px 0 20px; border-radius: 44px;}
			.main_more:before {width: 44px; border-radius: 44px;}
			.main_more span {gap: 0 30px;}
			.main_more span:after {width: 12px; height: 12px;}
		}
		@media screen and (max-width:479px) {
			.main_more {width: 40px; height: 40px; padding: 0; border-radius: 40px;}
			.main_more:before {width: 40px; border-radius: 40px;}
			.main_more span {justify-content: center; gap: 0; width: 100%; font-size: 0;}
		}
		
	/* main_reference */
		.main_reference {position: relative; padding: 140px 0;}
		.main_reference .main_more {position: absolute; right: 0; top: 2px; z-index: 1;}
		
		.board_ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.38vw;}
			.board_ul:has(.no_data) {grid-template-columns: repeat(1, 1fr);}
		.board_ul li {position: relative; width: 100%; background: var(--point-white); box-sizing: border-box; padding: 1.56vw; border-radius: var(--radius-15); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); overflow: hidden;}
		.board_ul li > a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--trans-color); border-radius: var(--radius-15); z-index: 1; transition: all 0.3s;}
		.board_ul li .tag {display: inline-flex; align-items: center; gap: 0 8px; background: var(--gray-bg01); box-sizing: border-box; padding: 10px 18px; border-radius: 40px;}
		.board_ul li .tag:before {content: ""; display: block; width: 6px; height: 6px; background: var(--point-color01); border-radius: 100%;}
		.board_ul li .tag span {font-size: var(--title-16); font-weight: 500; color: var(--black-color08); font-family: var(--font-type02); line-height: 1;}
		.board_ul li .txt {width: 100%; margin: 30px 0 40px; font-size: var(--title-20); font-family: var(--font-type02);}
		.board_ul li .txt dt {margin-bottom: 12px; font-size: 1.67vw; font-weight: 700; color: var(--black-color03); white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden;}
		.board_ul li .txt dd {font-size: 90%; color: var(--black-color06); white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden;}
		.board_ul li .thumb {position: relative; width: 100%; background: var(--gray-bg02); padding-bottom: 63%; border-radius: var(--radius-10); overflow: hidden;}
		.board_ul li .thumb img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}
		.board_ul li.no_data {font-size: var(--title-18); color: var(--black-color06); text-align: center;}
		
		/* over */
			@media (hover:hover){
				.board_ul li:hover > a {border-color: var(--point-color01);}
			}
		
		@media screen and (max-width:1640px) {
			.board_ul li {padding: 25px;}
			.board_ul li .txt {margin: 1.83vw 0 2.44vw;}
			.board_ul li .txt dt {margin-bottom: 8px; font-size: 135%;}
		}
		@media screen and (max-width:1400px) {
			.main_reference {padding: clamp(70px, 10vw, 140px) 0;}
			.main_reference .main_more {top: -1px;}
		}
		@media screen and (max-width:1280px) {
			.board_ul {grid-template-columns: repeat(2, 1fr); gap: 26px;}
			.board_ul li {padding: 30px;}
			.board_ul li .txt {margin: 30px 0 40px;}
		}
		@media screen and (max-width:1023px) {
			.main_reference .main_more {top: 0;}
			
			.board_ul {gap: 2.54vw;}
			.board_ul li {padding: 2.93vw;}
			.board_ul li .txt {margin: 2.93vw 0 3.91vw;}
		}
		@media screen and (max-width:860px) {
			.board_ul li {padding: 25px;}
			.board_ul li .tag {gap: 0 6px; padding: 8px 16px;}
			.board_ul li .tag:before {width: 5px; height: 5px;}
			.board_ul li .txt {margin: 25px 0 32px;}
		}
		@media screen and (max-width:640px) {
			.board_ul {grid-template-columns: repeat(1, 1fr); gap: 20px;}
		}
		@media screen and (max-width:479px) {
			.main_reference .main_more {top: 2px;}
			
			.board_ul li {padding: 20px;}
			.board_ul li .tag {gap: 0 4px; padding: 6px 14px;}
			.board_ul li .tag:before {width: 4px; height: 4px;}
			.board_ul li .txt {margin: 20px 0 26px;}
			.board_ul li .txt dt {margin-bottom: 4px;}
		}