/* Scroll Animation */
@media(prefers-reduced-motion: no-preference){
	[data-scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); transition: .8s; }
	[data-scroll_effect="slide_up"]{ transform: translateY(100px); opacity: 0; transition-delay:0.05s !important; transition: 1s; }
	[data-scroll_effect="slide_left"]{ transform: translateX(50px); opacity: 0; transition: 0.8s; }
	[data-scroll_effect="slide_right"]{ transform: translateX(-50px); opacity: 0; transition: 0.8s; }
	[data-scroll_effect*="flip_"]{ backface-visibility: hidden; }
	[data-scroll_effect="flip_up"]{ transform: perspective(2500px) rotateX(-100deg); transition: .6s; }
	[data-scroll_effect="clip_right"].effect_active{ clip-path: inset(0); }
	[data-scroll_effect*="slide_"].effect_active{ transform: translate(0); opacity: 1; }
	[data-scroll_effect*="flip_"].effect_active{ transform: perspective(2500px) rotateX(0deg); }
	[data-scroll_effect_delay="50"]{ transition-delay: .05s; }
	[data-scroll_effect_delay="100"]{ transition-delay: .1s; }
	[data-scroll_effect_delay="150"]{ transition-delay: .15s; }
	[data-scroll_effect_delay="200"]{ transition-delay: .2s; }
	[data-scroll_effect_delay="250"]{ transition-delay: .25s; }
	[data-scroll_effect_delay="300"]{ transition-delay: .3s; }
	[data-scroll_effect_delay="350"]{ transition-delay: .35s; }
	[data-scroll_effect_delay="400"]{ transition-delay: .4s; }
	[data-scroll_effect_delay="450"]{ transition-delay: .45s; }
	[data-scroll_effect_delay="500"]{ transition-delay: .5s; }
	[data-scroll_effect_delay="600"]{ transition-delay: .6s; }
	[data-scroll_effect_delay="700"]{ transition-delay: .7s; }
	[data-scroll_effect_column] [data-scroll_effect]{ transition-delay: calc( var(--index) * calc( var(--delay) * 1ms )); }
	/* scroll_effect_delay */
	@media(min-width:1280px){
		[data-scroll_effect].effect_active [data-scroll_effect]{ transform: translate(0); opacity: 1; }
	}
	@media(max-width:1279px){
		[data-scroll_effect_column] [data-scroll_effect*="slide_"]{ transform: translateY(20px); }
		[data-scroll_effect_column] [data-scroll_effect*="slide_"].effect_active{ transform: translate(0); }
	}
	@media(max-width:1279px) and (min-width:768px){
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(odd){ transition-delay: 0s; }
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(4){ transition-delay: calc( (var(--index) - 1 ) * calc( var(--delay) * 1ms )); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(5){ transition-delay: calc( (var(--index) - 2 ) * calc( var(--delay) * 1ms )); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(6){ transition-delay: calc( (var(--index) - 3 ) * calc( var(--delay) * 1ms )); }
	}
	@media(max-width:767px){
		[data-scroll_effect_delay]{ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
	}

	@keyframes svgAni {
		0% { stroke-dashoffset: var(--stroke-dash); }
		100% { stroke-dashoffset: 0; }
	}
	svg.scroll_effect{ stroke-dasharray: var(--stroke-dash); stroke-dashoffset: var(--stroke-dash); opacity: 1; transform: translate(0) }
	svg.active{ animation: svgAni 1s linear both; }
}


.wrapper{width:1200px; margin:0 auto;}

/* header */
#header{z-index:99; position:absolute; width:100%; height:100px; transition:0.3s}
#header .inr{position:relative; width:1520px; margin:0 auto;}
#header h1{position:absolute; left:0; top:36px;}
#header h1 a{display:block; width:328px; height:40px; background:url(../images/common/logo_w.svg) no-repeat 50% 0; background-size:100%; font-size:0;}

#header .gnb{position:absolute; right:250px; top:0;}
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a{display:block; line-height:100px; height:100px; padding:0 45px; color:#444; font-size:18px; font-weight:500;}
#header .gnb > li > .sub_menu{display:none; position:absolute; left:0; top:80px; width:100% !important; background:#fff; border:1px solid #ddd; z-index:99;}
#header .gnb li:hover .sub_menu{display:block; background:#fff; top:80px; width:100%; animation: submenu 0.3s 1 linear;}
#header .gnb .sub_menu{animation: submenu 0.3s 1 linear; transition: ease all .2s;}
#header .gnb .sub_menu li a{display: block; padding:14px 0; color:#333; border-top:1px solid #ddd; font-size:14px; text-align:center; transition:0.4s;}
#header .gnb .sub_menu li a:hover{background:#598e35; color:#fff;}
#header .gnb .sub_menu li:first-child a{border-top:0;}

#header .area_util{position:absolute; right:0; top:25px;}
#header .area_util span{display:inline-block; width:40px; height:40px; margin-right:6px; background:#111 url(../images/common/icon_call.svg) no-repeat 50% / 15px; border-radius:50%; }
#header .area_util div{display:inline-block; color:#fff;}
#header .area_util div a{color:#fff; font-weight:bold; font-size:20px;}

/* mobile-menu */
.mobile_header{background:#008790; color:#333; text-align:center; padding:35px 0 10px 0;}
.btn_menu{position:absolute; z-index:90; width:25px; height:45px; right:20px; top:14px;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:24px; height:1px; background:#333; text-align:center;}
.btn_menu span:nth-child(1){margin-top:14px;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

.menu_top p{margin-top:10px; color:#949494;}
#header .m_gnb_top h1{float:none; padding:20px; }
.m_area_util{margin-top:40px;overflow:hidden;  padding:20px; box-sizing:border-box; background:#4c4c4c;}
.m_area_util a{display:inline-block; width: 49%; height:31px; box-sizing: border-box; padding:5px 0; margin:2px 0px; border:1px solid #fff; vertical-align:middle; color:#fff; text-align:center; font-size:14px;}
.m_gnb{overflow-y:auto; position:fixed; top:0px; right:-100%; width:280px; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:999;}
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 25px; border-bottom: 1px solid #eaeaea; color:#424242; transition:all 0.3s ease 0s;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(../images/common/menu_button.svg) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#efefef; }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:15px 25px; font-size:14px; color:#333; }

.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active{right:0px;}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb_top{box-sizing:border-box; background:#00469b;}
.m_gnb_top p{background:#ddd;}
.m_gnb > ul{}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:1px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#333; bottom: 9px; transform:rotate(-45deg);}

.area_util_m{padding:20px 20px; margin-top:100px; background:#598e35;}
.area_util_m span{display:inline-block; width:40px; height:40px; margin-right:6px; background:#111 url(../images/common/icon_call.svg) no-repeat 50% / 15px; border-radius:50%; }
.area_util_m div{display:inline-block; color:#fff;}
.area_util_m div a{color:#fff; font-weight:bold; font-size:17px;}

.cover{position: fixed; width: 100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.8); z-index:995; display:none;}
.cover.active{display:block;}



@media screen and (max-width:1580px){
}

@media all and (max-width:1280px){
	#header .gnb > li > a{padding:0 25px;}


	.wrapper{width:96%;}
}
@media all and (max-width:1080px){
	#header .area_util,
	#header .gnb{display:none;}
	.btn_menu{display:block;}
	#header{height:80px; background:#fff;}
	#header h1{top:20px;}
	#header h1 a{background: url(../images/common/logo.svg) no-repeat 50% 0; background-size: 100%;}

}

@media all and (max-width:767px){
	body,
	p,
	li,
	a{font-family:Sans-serif; font-size:14px;}


}

@media all and (max-width:500px){
	#header{height:65px;}
	#header h1 a{width:250px; height:31px;}
	.btn_menu{top:10px;}
}