@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/*
 * layout.css.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) 레이아웃설정
 *
 */

/* 1) root 설정  */
:root{
	--color-base:#111; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#257354;
	--color-blue:#0060b0;
	--color-orange:#ef8201;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--pagd-pad:80rem;

	--font-eng:'Poppins', Sans-serif;
	--font-combine:'Poppins', 'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;
}
@media screen and (max-width:1600px){
	:root{
		--pagd-pad:30rem;
	}
}
@media screen and (max-width:1024px){
	:root{
		--pagd-pad:20rem;
	}
}
@media screen and (max-width:480px){
	:root{
		--font-base:14rem;
	}
}

	/* custom selection */
::selection{background:#9cbcec; color:#fff; text-shadow:none;}
::-moz-selection{background:#9cbcec; color:#fff; text-shadow:none;}
::-webkit-selection{background:#9cbcec; color:#fff; text-shadow:none;}

	/* custom scrollbar */
@media (min-width:1025px){
	::-webkit-scrollbar {width:18rem;}
	::-webkit-scrollbar-thumb {border:5px solid #f7f7f7; border-radius:20rem; background:#c5c5c5;}
	::-webkit-scrollbar-track {background:#f7f7f7;}
}

	/* tab scroll mob  */
.scroll_control.full{position:relative;}
.scroll_control.full:before{content:''; opacity:0.8; display:block; position:absolute; right:0; top:50%; z-index:5; width:15rem; height:8rem; margin-top:-10rem; background:url(../images/common/img_lnb_arrow_b.svg) no-repeat 50% 0; background-size:auto 100%; transform:rotate(-90deg); transform-origin:50% 50%;}
.scroll_control.full:after{content:''; display:block; position:absolute; right:0; top:0; width:40rem; height:100%; background-image:linear-gradient(270deg, var(--color-white) 50%, rgba(255,255,255,0));}
.scroll_control.full .inner{position:relative; overflow-x:auto; overflow-y:hidden; width:100%; height:80rem;}
.scroll_control.full .inner > ul{flex-wrap:nowrap; justify-content:flex-start; position:absolute; margin:0; padding-right:40rem;}
.scroll_control.full .inner > ul > li{flex:none; margin-bottom:0;}
.scroll_control.full .inner > ul > li:last-child{padding-right:35rem;}

	/* content tab */
.tab-area{padding-top:55rem;}
.tab-area .tab{display:table;}
.tab-area .tab li{display:table-cell; padding-left:60rem;}
.tab-area .tab li:first-child{padding-left:0;}
.tab-area .tab a{display:inline-block; position:relative; padding-top:20rem; font-size:20rem; transition:color 0.3s;}
.tab-area .tab a:before{--sizeWid:7rem; content:''; display:block; position:absolute; top:0; left:50%; width:var(--sizeWid); height:var(--sizeWid); margin-left:calc(var(--sizeWid) / 2 * -1); background-color:var(--color-point); border-radius:100%; transform:scale(0); transition:transform 0.3s;}
.tab-area .tab a.on{color:var(--color-point); font-weight:600;}
.tab-area .tab a.on:before{transform:scale(1);}
.tab-area.scroll_control.full .inner{height:65rem;}

	/* img 설정 */
#content img{max-width:100%;}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1500px){
	html{font-size:0.067vw /* 1px */;}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 1px */;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}
}
@media (max-width:620px){
    html{font-size:0.161vw /* 1px */;}
}
@media (max-width:480px){
    html{font-size:0.271vw /* 1.3px */;}	
}

/* animation */
:root{
	--aniEase:ease;
	--aniEase2:cubic-bezier(0.19, 1, 0.22, 1);
}
	/* word */
.wordAni{opacity:0;}
.wordAni.active{opacity:1;}
.wordAni > span{display:inline-block;}
.wordAni .word{display:inline-block;}
	/* motion rail */
[data-motion-rail]{position:absolute; left:0; top:0; text-transform:uppercase; font-size:200rem; letter-spacing:2rem; white-space:nowrap;}
[data-motion-rail] .eocjs-newsticker-container{position:relative; width:100%; padding-top:30%;}
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-one,
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-two{position:absolute; left:0; top:0; white-space:nowrap;}
	/* hide show */
.hide_show{opacity:0; transition:opacity 0.7s var(--aniEase) 0s;}
.hide_show.motion_in,
.motion_in .hide_show{opacity:1;}
.hide_showDown{opacity:0; transform:translateY(-30rem); transition:0.9s var(--aniEase) 0s; transition-property:opacity, transform;}
.hide_showDown.motion_in,
.motion_in .hide_showDown{opacity:1; transform:translateY(0); transition-delay:var(--aniDelay, 0s);}
.hide_showUp{opacity:0; transform:translateY(30rem); transition:1s var(--aniEase) 0s; transition-property:opacity, transform;}
.hide_showUp.motion_in,
.motion_in .hide_showUp{opacity:1; transform:translateY(0rem); transition-delay:var(--aniDelay, 0s);}
.hide_showLeft{opacity:0; transform:translateX(-30rem); transition:0.9s var(--aniEase) 0s; transition-property:opacity, transform;}
.hide_showLeft.motion_in,
.motion_in .hide_showLeft{opacity:1; transform:translateX(0rem); transition-delay:var(--aniDelay, 0s);}
.hide_showRight{opacity:0; transform:translateX(30rem); transition:0.9s var(--aniEase) 0s; transition-property:opacity, transform;}
.hide_showRight.motion_in,
.motion_in .hide_showRight{opacity:1; transform:translateX(0); transition-delay:var(--aniDelay, 0s);}
.hide_overUp span{overflow:hidden; display:inline-block;}
.hide_overUp span i{display:inline-block; transform:translateY(100%); transition:transform 0.9s var(--aniEase) 0s;}
.hide_overUp.motion_in span i{transform:translateY(0%); transition-delay:var(--aniDelay, 0s);}
.motionScale{transition:transform 0.3s var(--aniEase) 0s;}
.slide_show_down{clip-path:polygon(100% 0, 100% 0, 0 0, 0 0); transition:clip-path 1.5s var(--aniEase) 0s;}
.slide_show_down.motion_in{clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 0); transition-delay:var(--aniDelay, 0.2s);}
.slide_show_up{clip-path:polygon(100% 100%, 100% 100%, 0 100%, 0 100%); transition:clip-path 1.5s var(--aniEase) 0s;}
.slide_show_up.motion_in{clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 0); transition-delay:var(--aniDelay, 0.2s);}
.slide_show_right{clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:clip-path 1.5s var(--aniEase) 0s;}
.slide_show_right.motion_in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay:var(--aniDelay, 0.2s);}
.slide_show_left{clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition:clip-path 1.5s var(--aniEase) 0s;}
.slide_show_left.motion_in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay:var(--aniDelay, 0.2s);}

/* button motion */
.primary-button{overflow:hidden; display:inline-flex; justify-content:center; align-items:center; position:relative;}/* size별도선언할것 */
.primary-button:hover,
.primary-button:hover span{color:#fff;}
.primary-button .round{position:absolute; top:5px; left:10px; z-index:-1; background-color:#373737; border-radius:50%; animation:scale-down 0.2s forwards;}
.primary-button.animate .round{animation:scale-up 0.5s forwards;}
@keyframes scale-up{
    to{transform:scale(600);}
}
@keyframes scale-down{
    from{transform:scale(600);}
    to{ransform:scale(0);}
}

/* 3) 레이아웃설정 */
	/* header */
#header{position:fixed; top:0; z-index:90; width:100%;}
#header .inr{position:relative; margin:0 var(--pagd-pad);}
#header h1{position:absolute; left:0; top:50%; z-index:10; width:194rem; height:46rem; transform:translateY(-50%);}
#header h1 a{display:block; width:100%; height:100%; background:url(../images/common/logo-white.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0;}
#header .gnb-pc{position:relative; margin:0 auto; color:var(--color-white);}
#header .gnb-pc:after{content:''; opacity:0.3; display:block; position:absolute; bottom:0; left:0; width:100%; height:1rem; background:var(--color-white);}
#header .gnb-pc .gnb{display:flex; justify-content:center; align-items:center;}
#header .gnb-pc .gnb > li{position:relative;}
#header .gnb-pc .gnb > li > a{display:flex; align-items:center; justify-content:center; position:relative; height:90rem; padding:0 55rem; font-size:19rem; font-weight:600; transition:0.3s;}
#header .gnb-pc .gnb > li > a:before{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--color-white); transform:scaleY(0); transform-origin:0 0; transition:transform 0.3s;}
#header .gnb-pc .gnb > li > a span{position:relative; z-index:2;}
#header .gnb-pc .gnb .box{opacity:0; visibility:hidden; position:absolute; width:100%; box-sizing:border-box; padding:20rem 30rem; background:#fff; border-radius:0 0 5rem 5rem; color:var(--color-base); box-shadow:0 30rem 40rem rgba(0,0,0,0.1); transform:translateY(10rem); transition:0.3s; transition-property:opacity, visibility, transform;}
#header .gnb-pc .gnb .box li{margin:6rem 0;}
#header .gnb-pc .gnb .box li a{display:block; white-space:nowrap; font-size:16rem; font-weight:500; transition:color 0.3s;}
#header .gnb-pc .gnb .box li a span{transition:0.3s;}
#header .gnb-pc .gnb .box li a:hover{color:var(--color-point);}
#header .gnb-pc .gnb .box li a:hover span{box-shadow:0 -1rem 0 var(--color-point) inset;}
#header .gnb-pc .gnb > li.active > a{color:var(--color-point);}
#header .gnb-pc .gnb > li.active > a{color:var(--color-point);}
#header .gnb-pc .gnb > li.active .box{opacity:1; visibility:visible; transform:translateY(0);}
#header .gnb-pc .gnb > li.active > a:before{transform:scaleY(1);}
	/* mega menu */
.mega-menu{position:fixed; top:0; left:0; z-index:10; width:100%; height:100vh;}
.mega-menu:before{content:''; display:block; position:absolute; z-index:-1; width:100%; height:100%; background-color:var(--color-white);}
.mega-menu .inr{display:grid; grid-template-columns:1fr 1fr; align-items:center; height:100%;}
.mega-info{padding-left:110rem;}
.mega-info em{display:block; font-family:var(--font-eng); font-size:110rem; font-weight:600; line-height:1;}
.mega-info__list{margin-top:200rem;}
.mega-info__list li{margin-top:30rem; font-size:18rem; font-weight:500;}
.mega-info__list li:first-child{margin-top:0;}
.mega-info__list [data-megaInfo]{display:flex; align-items:center; gap:10rem;}
.mega-info__list [data-megaInfo]:before{content:''; display:block; width:18rem; height:18rem; backgrond-repeat:no-repeat; background-position:50% 50%; background-size:100% auto;}
.mega-info__list [data-megaInfo="address"]:before{background-image:url(../images/common/mega_icon_map.svg);}
.mega-info__list [data-megaInfo="tel"]:before{background-image:url(../images/common/mega_icon_tel.svg);}
.mega-link{position:absolute; right:0; width:320rem; height:570rem; box-sizing:border-box; padding:100rem 40rem 30rem; border-radius:30rem; background:url(../images/common/mega_bg_link.jpg) no-repeat 50% 50%; background-size:100% auto; color:var(--color-white);}
.mega-link em{display:block; font-size:30rem; font-weight:600; line-height:1.4;}
.mega-link ul{margin-top:40rem;}
.mega-link ul li{margin-top:10rem;}
.mega-link ul li a{display:inline-flex; align-items:center; gap:8rem; min-width:160rem; min-height:40rem; box-sizing:border-box; padding:5rem 20rem; background-color:rgba(17,17,17,0.2); border-radius:50rem; font-size:15rem; transition:background 0.3s;}
.mega-link ul li a:before{content:''; display:block; width:18rem; height:18rem; background:url(../images/common/mega_icon_check.svg) no-repeat 50% 50%;}
.mega-link ul li a:hover{background-color:var(--color-point);}
.mage-gnb .gnb > li{margin-top:35rem;}
.mage-gnb .gnb > li:first-child{margin-top:0;}
.mage-gnb .gnb > li a{display:inline-block;}
.mage-gnb .gnb > li > a{position:relative; padding-right:70rem; font-size:45rem; font-weight:600; transition:color 0.3s;}
.mage-gnb .gnb > li > a:after{content:''; opacity:0; display:block; position:absolute; top:3rem; right:0; width:20rem; height:20rem; background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.177 24.917'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23257354;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M22.806,0l1.371,1.372V21.533H18.954V9.421L3.917,24.917,0,20.88l15.036-15.5H3.284V0Z'/%3E%3C/svg%3E"); transform:translate(20rem, 10rem); transition:0.3s; transition-property:opacity, transform;}
.mage-gnb .gnb > li > a.active{color:var(--color-point);}
.mage-gnb .gnb > li > a.active:after{opacity:1; transform:translate(0, 0);}
.mage-gnb .gnb .box{margin-top:20rem;}
.mage-gnb .gnb .box li{margin-top:10rem; transition:opacity 0.3s;}
.mage-gnb .gnb .box li a{font-size:22rem; font-weight:500;}
.mage-gnb .gnb .box ul:hover li{opacity:0.5;}
.mage-gnb .gnb .box ul:hover li:hover{opacity:1;}
	/* mega menu - active */
.mega-menu{opacity:0; visibility:hidden; transition:0.1s linear 0.4s; transition-property:opacity, visibility;}
.mega-menu:before{transform:scaleY(0); transform-origin:0 0; transition:transform 0.6s cubic-bezier(.16,1,.3,1);}
.mega-menu .inr{opacity:0; visibility:hidden; transition:0.3s ease 0s; transition-property:opacity, visibility;}
.mega-menu.active{opacity:1; visibility:visible; transition-delay:0s;}
.mega-menu.active:before{transform:scaleY(1);}
.mega-menu.active .inr{opacity:1; visibility:visible; transition-delay:0s;}
#header.active h1,
#header.active .area_util{z-index:15;}
#header.active h1 a{background-image:url(../images/common/logo.svg);}
	/* util */
.area_util{position:absolute; right:0; top:50%; transform:translateY(-50%);}
.gnb-btn{display:inline-flex; align-items:center; gap:0 10rem;}
.gnb-btn em{opacity:0; visibility:hidden; font-family:var(--font-eng); font-size:15rem; font-weight:600; color:var(--color-white);}
.gnb-btn__menu{width:60rem; height:60rem; background-color:var(--color-point); border-radius:100%;}
.gnb-btn__menu span{display:block; position:relative; width:16rem; height:14rem; margin:0 auto; font-size:0;}
.gnb-btn__menu span i,
.gnb-btn__menu span:before,
.gnb-btn__menu span:after{display:block; position:absolute; height:2rem; background:var(--color-white); transform:rotate(0);}
.gnb-btn__menu span:before,
.gnb-btn__menu span:after{content:''; width:100%;}
.gnb-btn__menu span:before{right:0; top:0; transition:0.5s ease 0s;}
.gnb-btn__menu span:after{left:0; bottom:0; transition:0.5s ease 0s;}
.gnb-btn__menu span i{opacity:1; left:0; top:6rem; width:100%; transition:opacity 0.3s, transform 0.5s ease 1.1s;}
.gnb-btn__menu.active i{opacity:0;}
.gnb-btn__menu.active span:before{right:0; top:5rem; transform:rotate(45deg);}
.gnb-btn__menu.active span:after{left:0; bottom:7rem; transform:rotate(-45deg);}
	/* header fix */
#header h1,
#header .gnb-pc,
.gnb-btn em{transition:0.3s; transition-property:opacity, visibility;}
#header.fix h1,
#header.fix .gnb-pc{opacity:0; visibility:hidden;}
#header.fix .gnb-btn em{opacity:1; visibility:visible;}
	/* scroll */
.scroll-box{overflow:hidden; position:absolute; z-index:50; bottom:70rem; right:160rem; width:148rem; height:148rem;}
.scroll-box img{width:100%;}
.scroll-box i{display:block; position:absolute; top:50%; left:50%; width:30rem; transform:translate(-50%, -50%);}
.scroll-box i img{transform:rotate(135deg);}
.round-text{display:block; animation:rotate360 10s linear infinite;}
@keyframes rotate360{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}

@media screen and (max-width:1600px){
	/* mega menu */
	.mega-info{padding-left:0;}
	/* scroll */
	.scroll-box{right:var(--pagd-pad);}
}
@media screen and (max-width:1500px){
	#header .gnb-pc{padding-right:100rem;}
	#header .gnb-pc .gnb{justify-content:flex-end;}
	/* mega menu */
	.mega-menu .inr{grid-template-columns:40% auto;}
	.mega-info em{font-size:90rem;}
}
@media screen and (max-width:1300px){
	#header h1{position:relative; left:auto; top:auto; transform:translateY(0);}
	#header .inr{padding-top:15rem; padding-bottom:15rem;}
	#header .gnb-pc{display:none;}
}
@media screen and (max-width:1024px){
	/* mega menu */
	.mega-menu{height:calc(var(--vh, 1vh) * 100); min-height:100vh;}
	.mega-menu .inr{grid-template-columns:1fr 1fr; align-items:start; padding:0 !important;;}
	.mega-link{display:none;}
	.mega-info{margin-top:50%; padding-bottom:60rem;}
	.mega-info em{font-size:70rem;}
	.mega-info__list{margin-top:100rem;}
	.mega-info__list li{font-size:16rem;}
	.mage-gnb{overflow-y:auto; height:100%;}
	.mage-gnb .gnb{padding-top:130rem; padding-bottom:60rem;}
	/* scroll */
	.scroll-box{width:120rem; height:120rem;}
	.scroll-box i{width:20rem;}
}
@media screen and (max-width:620px){
	#header.fix .gnb-btn em{opacity:0; visibility:hidden;}
	/* mega menu */
	.mega-menu .inr{grid-template-columns:1fr;}
	.mega-info{display:none;}
	.mage-gnb{padding-left:50rem;}
}
@media screen and (max-width:480px){
	#header h1{width:155rem; height:37rem;}
	.gnb-btn__menu{width:50rem; height:50rem;}
	/* scroll */
	.scroll-box{bottom:35rem; width:90rem; height:90rem;}
	.scroll-box i{width:16rem;}
	/* mega menu */
	.mage-gnb{padding-left:0;}
	.mage-gnb .gnb > li > a{font-size:35rem;}
	.mage-gnb .gnb .box li a{font-size:18rem;}
}

	/* footer */
#footer{background:linear-gradient(0deg, rgba(239,130,1,1) 0%, rgba(31,127,87,1) 100%); color:var(--color-white);}
#footer .inr{position:relative; max-width:1600rem; margin:0 auto; padding:50rem var(--pagd-pad) 0;}
.footer-title{display:block; font-family:var(--font-eng); font-size:60rem; font-weight:500; color:var(--color-white);}
.footer-info{display:flex; flex-wrap:wrap; align-items:center; gap:20rem 64rem; padding-bottom:20rem;}
.footer-info .logo{flex:none; display:flex; align-items:center; gap:8rem;}
.footer-info .logo:before{content:''; display:block; width:92rem; height:77rem; background:url(../images/common/logo_emblem.svg) no-repeat 50% 50%; background-size:100% auto;}
.footer-info .logo em{display:block; font-size:24rem; font-weight:500;}
.footer-info ul{display:flex; flex-wrap:wrap; align-items:center; gap:10rem 30rem;}
.footer-info ul li{display:inline-flex; align-items:center; gap:10rem;}
.footer-copy{display:flex; justify-content:space-between; align-items:center; padding:30rem 0; border-top:1rem solid rgba(255,255,255,0.2);}
.footer-copy .copyright{order:1; text-transform:uppercase;}
.footer-copy .btn-brochure{order:2;}
.btn-brochure{display:inline-flex; justify-content:center; align-items:center; gap:0 14rem; min-width:180rem; height:45rem; box-sizing:border-box; border:1rem solid rgba(255,255,255,0.8); border-radius:50rem; transition:0.3s ease;}
.btn-brochure:before{content:''; display:block; width:16rem; height:18rem; background:url(../images/common/icon_brochure.svg) no-repeat 50% 50%; background-size:100% auto;}
.btn-brochure:hover{background-color:var(--color-base); border-color:var(--color-base);}
	/* top btn */
#footer [class*="top-btn"]{display:flex; justify-content:center; align-items:center; position:absolute; right:var(--pagd-pad); top:50rem; width:80rem; height:80rem; box-sizing:border-box; background-color:transparent; border:1rem solid rgba(255,255,255,0.3); border-radius:100%; font-size:0; transition:border 0.4s;}
#footer [class*="top-btn"] span{visibility:hidden; position:absolute;}
#footer [class*="top-btn"]:before{content:''; display:block; position:relative; z-index:5; width:18rem; height:18rem; background:url(../images/common/arrow_white.svg) no-repeat 50% 50%; background-size:100% auto; transform:rotate(-45deg);}
#footer [class*="top-btn"]:after{content:''; opacity:0; display:block; position:absolute; width:100%; height:100%; border-radius:100%; background-color:var(--color-base); transform:scale(0); transition:0.3s; transition-property:opacity, transform;}
#footer [class*="top-btn"]:hover{border-color:transparent;}
#footer [class*="top-btn"]:hover:after{opacity:1; transform:scale(1);}

@media screen and (max-width:1800px){
	#footer [class*="top-btn"]{right:var(--pagd-pad);}
}
@media screen and (max-width:1024px){
	.footer-title{font-size:40rem;}
	.footer-info .logo:before{width:64rem; height:54rem;}
	.footer-info .logo em{font-size:20rem;}
	#footer [class*="top-btn"]{width:60rem; height:60rem;}
}
@media screen and (max-width:620px){
	.footer-title{font-size:30rem;}
	#footer [class*="top-btn"]{width:60rem; height:60rem;}
	#footer [class*="top-btn"]:before{width:14rem; height:14rem;}
}
@media screen and (max-width:480px){
	#footer .inr{padding-top:50rem;}
	.footer-info .logo:before{width:51rem; height:43rem;}
	.footer-info ul{flex-direction:column; align-items:flex-start;}
	#footer [class*="top-btn"]{top:auto; bottom:80rem; width:50rem; height:50rem;}
	.footer-copy{flex-direction:column; align-items:flex-start; gap:20rem;}
	.footer-copy .btn-brochure{order:1;}
	.footer-copy .copyright{order:2;}
}
	/* lnb */
.area_lnb{flex:none; width:330rem; box-sizing:border-box; padding:80rem 50rem 80rem 0; margin-top:-120rem; background-color:var(--color-white); border-radius:0 15rem 0 0;}
.area_lnb .lnb{position:sticky; top:80rem;}
.area_lnb .lnb ul > li > a{display:flex; align-items:center; position:relative; height:60rem; padding-left:80rem; color:#222; font-size:19rem; letter-spacing:-0.5rem;}
.area_lnb .lnb ul > li > a span{flex:0 1 100%; display:flex; align-items:center; position:relative; z-index:5; height:100%; padding-right:45rem; border-bottom:1rem solid rgba(34,34,34,0.1);}
.area_lnb .lnb ul > li > a:before{content:''; display:block; position:absolute; left:0; width:100%; height:100%; border-radius:0 10rem 0 0; background-color:var(--color-point); box-shadow:0 20rem 29rem rgba(37,115,84,0.3); transform:scaleX(0); transform-origin:0 0; transition:transform 0.5s ease;}
.area_lnb .lnb ul > li > a:after{content:''; opacity:0; display:block; position:absolute; top:50%; right:25rem; width:10rem; height:10rem; margin-top:-5rem; background:url(../images/common/arrow_white.svg) no-repeat 50% 50%; background-size:100% auto; transform:rotate(45deg);}
.area_lnb .lnb ul > li > a.on{color:var(--color-white);}
.area_lnb .lnb ul > li > a.on:before{transform:scaleX(1);}
.area_lnb .lnb ul > li > a.on:after{opacity:1;}

@media screen and (max-width:1400px){
	.area_lnb{width:250rem; padding-right:30rem;}
	.area_lnb .lnb ul > li > a{padding-left:30rem;}
}
@media screen and (max-width:1024px){
	.area_lnb.col01{display:none;}
	.area_lnb{width:100%; margin-top:0; padding:0;}
	.area_lnb .lnb{position:static; padding:30rem 0; overflow-x:auto;}
	.area_lnb .lnb ul{display:flex; align-items:stretch;}
	.area_lnb .lnb ul > li:first-child > a{margin-left:20rem;}
	.area_lnb .lnb ul > li:last-child > a{margin-right:20rem;}
	.area_lnb .lnb ul > li > a{height:50rem; padding:0 30rem; font-size:17rem;}
	.area_lnb .lnb ul > li > a span{padding-right:0; border-bottom-width:0; white-space:nowrap;}
	.area_lnb .lnb ul > li > a:after{display:none;}
}
@media screen and (max-width:480px){
	.area_lnb .lnb ul > li > a{height:45rem; padding:0 20rem; font-size:16rem;}
}