@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(50px); opacity: 0; transition: 0.8s; }
	[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; }
}

.inr{position: relative; margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); height: 100%; z-index: 2; }
.wrapper{margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%);}

.btn_top{position:absolute; right:2%; bottom:30rem; display:block; width:50rem; height:50rem; border-radius:50%; background:rgba(164,164,164,0.4); font-size:0; z-index:10;}
.btn_top:after{content:''; display:block; position:absolute; left:50%; top:55%; width:12rem; height:12rem; border-top:3px solid #fff; border-right:3px solid #fff; transform:translate(-50%,-50%) rotate(-45deg);}

/*********** Header ***********/
/*#header{ border-bottom:1px solid #fff;}*/
#header{z-index:99; position:absolute; top:0; left:0; width:100%; height:115rem; transition:0.3s;}
#header .inr_header{position:relative; margin:0 auto; width:100%; height:100%;}
#header .logo.mo{display:none;}
#header .logo a{display:block; position:relative;}
#header .logo a img{display:block; position:absolute; top:50%; left:50%;transform:translate(-50%,-50%); width:100%;}
#header nav{height:100%;}
#header .gnb{display:flex; position:relative; align-items:center; justify-content:center; height:100%;}
#header .gnb .logo.pc{position:absolute; left:50%; transform:translateX(-50%); padding:0 100rem;}
#header .gnb .logo.pc a{width:280rem;}
#header .gnb > div{display:flex; width:50%;}
#header .gnb > div.left_gnb{justify-content:flex-end; padding-right:200rem;}
#header .gnb > div.right_gnb{padding-left:200rem;}
#header .gnb > div > li{position:relative;}
#header .gnb > div > li > a{display:block; padding:30rem 50rem; font-size:var(--font_size20); color:#fff; font-weight:500;}
#header .gnb > div > li > .sub_menu{display:none; position:absolute; left:0; top:85rem; width:100% !important; background:#fff; border:1px solid #ddd; z-index:99;}
#header .gnb > div li:hover .sub_menu{display:block; background:#fff; top:85rem; 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:14rem 0; color:#333; border-top:1px solid #ddd; font-size:var(--font_size17); text-align:center; transition:0.4s;}
#header .gnb .sub_menu li a:hover{background:var(--primary); color:#fff;}
#header .gnb .sub_menu li:first-child a{border-top:0;}

/* mobile-menu */
.btn_menu{position:absolute; z-index:90; width:30px; right:4%; top:50%; transform:translateY(-50%);}
.btn_menu{display:none;}
.btn_menu span{display:block; width:30px; height:2px; background:#333; text-align:center;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

.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 > div > li > a{display:block; position:relative; padding:15px 25px; border-bottom: 1px solid #eaeaea; color:#111; transition:all 0.3s ease 0s; font-size:var(--font_size24);}
.m_gnb > ul > div > 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 > div > li > a.active{}
.m_gnb > ul > div > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > div > li > ul{display:none; background:#efefef; }
.m_gnb > ul > div > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > div > li > ul > li > a{position:relative; display:block; padding:15px 25px; font-size:var(--font_size20); color:#444; }

.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 .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:2px; background:#fff; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:2px; background:#fff; bottom: 9px; transform:rotate(-45deg);}

.area_util_m{display:flex; padding:20px 20px; background:var(--primary); align-items:center;}
.area_util_m span{display:inline-block; width:40px; height:40px; margin-right:12px; background:rgba(255,255,255,0.2) url(../images/common/icon_call.svg) no-repeat 50% / 15px; border-radius:50%; }
.area_util_m div{display:inline-block; color:#fff; font-size:17px;}
.area_util_m div a{color:#fff; font-weight:bold; }
.area_util_m div a p{font-size:15px; opacity:0.7;}

.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(max-width:1279px){
    #header{position:fixed !important; opacity:1 !important; transform:none !important; height:80rem; pointer-events:auto !important;}
    #header.fixed{background:#fff; border-bottom:1px solid #e8e8e8;}
    #header .inr_header{width:92%;}
    #header .logo.pc{display:none !important;}
    #header .logo.mo{display:block; position:absolute; top:50%; transform:translateY(-50%);}
    #header .logo.mo a{width:230rem;}
    #header .logo.mo a img{width:100%; display:block;}
    
	#header .area_util,
	#header .gnb{display:none;}
	.btn_menu{display:block;}
}
@media(max-width:767px){
    #header{height:65rem;}
    #header .logo.mo a{width:190rem;}
}


/*********** Footer ***********/
#footer{padding:60rem 0; background:#191919;}
#footer .top{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:25rem; padding-bottom:30rem; border-bottom:1px solid rgba(255,255,255,0.3);}
#footer .top .logo{display:block; width:240rem;}
#footer .top .logo img{display:block; width:100%;}
#footer .top ul{display:flex;}
#footer .top ul li+li{margin-left:50rem;}
#footer .top ul li a{display:block; font-size:var(--font_size16); color:#fff; opacity:0.9; transition:0.2s ease;}
#footer .address{display:flex; align-items:flex-end; justify-content:space-between;}
#footer .address address{width:990rem; font-size:0;}
#footer .address address span{display:inline-block; color:#aaa; margin:5rem 25rem 5rem 0; font-size:var(--font_size13);}
#footer .address address span em{color:#fff; font-weight:bold;}
#footer .address p{margin-bottom:5rem; font-size:var(--font_size13); color:#999;}
@media(hover:hover){
    #footer .top ul li a:hover{opacity:0.5;}
}
@media(max-width:1279px){
    #footer{padding:45rem 0;}
    #footer .address{display:block;}
    #footer .address address{width:100%;}
    #footer .address address > br{display:none;}
    #footer .address p{margin-bottom:0; margin-top:15rem;}
}
@media(max-width:767px){
    #footer .top .logo{width:165rem;}
    #footer .top ul li+li{margin-left:35rem;}
}


/* 퀵메뉴 */
.quick_menu{position:fixed; right:-200rem; top:50%; transform:translateY(-50%); z-index:100; height:600rem; transition:0.6s ease;}
.quick_menu.open{right:0;}
.quick_btn{position:absolute; padding-top:7rem; left:-60rem; top:50%; transform:translateY(-50%); width:60rem; background:#cf167e; border-radius:30rem 0 0 30rem; cursor:pointer;}
.quick_btn .quick_open{display:flex; margin:auto; align-items:center; justify-content:center; width:46rem; height:46rem; border-radius:50%; background:#fff;}
.quick_btn .quick_open img{display:block; margin-right:2rem; width:12rem; transform:rotate(180deg); transform-origin:center; transition:0.3s ease;}
.quick_menu.open .quick_btn .quick_open img{transform:rotate(360deg); margin-right:-2rem;}
.quick_btn ul{padding:30rem 0;}
.quick_btn ul li{height:25rem; text-align:center; width:100%;}
.quick_btn ul li+li{margin-top:25rem;}
.quick_btn ul li img{display:inline-block; height:100%; opacity:0.9;}
.quick_cont{padding:15rem; width:200rem; border:2px solid #ddd; border-right:0; background:#fff; height:100%; box-shadow:0 0 40rem rgba(0,0,0,0); transition:0.3s ease;}
.quick_menu.open .quick_cont{box-shadow:0 0 40rem rgba(0,0,0,0.2);}
.quick_cont .inner{display:flex; flex-direction:column; justify-content:center; height:100%; /*overflow-y:scroll;*/}
.quick_cont .box+.box{margin-top:40rem;}
.quick_cont .box h3{margin-bottom:15rem; padding:4rem 0; font-size:16rem; width:100%; background:#02181e; text-align:center; color:#fff; border-radius:40rem; font-weight:600;}
.quick_cont .box ul li{display:flex;}
.quick_cont .box ul li+li{margin-top:6rem; padding-top:6rem; border-top:1px solid #e8e8e8;}
.quick_cont .box ul li em{display:block; margin-right:5rem; font-size:14rem; color:#000; font-weight:bold;}
.quick_cont .box ul li em+a{display:block; font-size:14rem; color:#444;}
.quick_cont .box.sns ul li a{display:flex; align-items:center;}
.quick_cont .box.sns ul li a img{display:block; margin-right:8rem; width:30rem;}
.quick_cont .box.sns ul li a p{font-size:14rem; color:#222; font-weight:600;}
@media(max-width:767px){
    .quick_menu{top:auto; right:-185rem; transform:none; bottom:10%;}
    .quick_btn{left:-50rem; width:50rem; border-radius:25rem 0 0 25rem;}
    .quick_btn .quick_open{width:36rem; height:36rem;}
    .quick_btn .quick_open img{width:10rem;}
    .quick_btn ul li{height:22rem;}
    .quick_cont{padding:10rem; width:185rem;}
    .quick_cont .box+.box{margin-top:30rem;}
}


















