.inr{position:relative; width:1400px; margin:0 auto;}
.inr.sub{position:relative; width:1250px; margin:0 auto;}
.inr.sub02{position:relative; width:1300px; margin:0 auto;}
.wrapper{width:100%; margin:0 auto;}
.board.wrapper,
.common.wrapper,
.koweb_online_counsel.wrapper,
.koweb_online_ecounsel.wrapper{width:1300px; margin:0 auto;}

/* Scroll Animation */
@media(prefers-reduced-motion: no-preference){
	[scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); transition: .8s; }
	[scroll_effect="slide_up"]{ transform: translateY(150px); opacity: 0; transition:transform 1600ms ease, opacity 1300ms ease;}
	[scroll_effect="slide_left"]{ transform: translateX(150px); opacity: 0; transition:transform 1600ms ease, opacity 1300ms ease;}
	[scroll_effect="slide_right"]{ transform: translateX(-150px); opacity: 0; transition:transform 1600ms ease, opacity 1300ms ease;}
	[scroll_effect="clip_right"].effect_active{ clip-path: inset(0); }
	[scroll_effect*="slide_"].effect_active{ transform: translate(0); opacity: 1; }
	[scroll_effect_delay="50"]{ transition-delay: .05s; }
	[scroll_effect_delay="100"]{ transition-delay: .1s; }
	[scroll_effect_delay="150"]{ transition-delay: .15s; }
	[scroll_effect_delay="200"]{ transition-delay: .2s; }
	[scroll_effect_delay="250"]{ transition-delay: .25s; }
	[scroll_effect_delay="300"]{ transition-delay: .3s; }
	[scroll_effect_delay="350"]{ transition-delay: .35s; }
	[scroll_effect_delay="400"]{ transition-delay: .4s; }
	[scroll_effect_delay="450"]{ transition-delay: .45s; }
	[scroll_effect_delay="500"]{ transition-delay: .5s; }
	@media(max-width:767px){
		[scroll_effect_delay]{ transition-delay: 0s; }
	}

}


/* header */
#header{opacity:0; z-index:99; position:absolute; top:-20px; width:100%; height:100px; transition:opacity 0.5s, top 0.5s ease;}
body.active #header{top:0; opacity:1;}
#header[data-show="active"]{opacity:1; top:0; transition:none;}
#header .inr{position:relative; width:auto; margin:0 100px;}
#header h1{position:absolute; left:100px; top:60px;}
#header h1 a{display:block; width:270px; height:30px; background:url(../images/common/logo.svg) no-repeat 50% 0; background-size:100%; font-size:0;}

#header .gnb{position:absolute; right:230px; top:30px; transition:all 0.3s ease;}
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a{display:block; line-height:80px; height:80px; padding:0 40px; color:#fff; font-size:18px; font-weight:500; text-transform:uppercase;}
#header .gnb > li > .sub_menu{opacity:0; visibility:hidden;  position:absolute; left:0; top:65px; width:100% !important; background:#fff; transform: translateY(-10px);  transition: opacity 300ms ease, transform 600ms ease; z-index:99; box-shadow:0px 3px 5px 1px rgba(0, 0, 0, 0.05);}
#header .gnb li:hover .sub_menu{opacity:1; visibility:visible; transform:translateY(0px);}
#header .gnb .sub_menu{transition: ease all .2s; padding:14px 0;}
#header .gnb .sub_menu li a{display: block; padding:3px 0; font-weight:500; color:#333; font-size:15px; text-align:center; line-height:1.3em;}
#header .gnb .sub_menu li a:hover{color:#274898; font-weight:600;}
#header .gnb .sub_menu li:first-child a{border-top:0;}

#header .list_lang.pc{position:absolute; top:60px; left:410px;}
#header .list_lang{display:flex;}
#header .list_lang > li{margin:0 6px;}
#header .list_lang > li > a{position:relative; font-size:14px; font-weight:400; color:#fff; text-transform:uppercase; opacity:0.3; transition:all 0.3s ease;}
#header .list_lang > li.on a,
#header .list_lang > li:hover a{opacity:1;}
#header .list_lang > li > a:before{content:''; position:absolute; left:0; right:0; bottom:-3px; width:100%; height:0; background:#fff;  transition:all 0.3s ease;}
#header .list_lang > li.on > a:before,
#header .list_lang > li:hover > a:before{height:1px;}
#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;}

.fp-viewing-1 #header,
.fp-viewing-2 #header,
.fp-viewing-3 #header{display:none;}

/* 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:25px; right:20px; top:24px;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:100%; height:2px; background:#fff; text-align:center;}
.btn_menu span:nth-child(1){margin-top:16px;}
.btn_menu span:nth-child(2){margin-top:5px;}
.btn_menu span:nth-child(3){margin-top:5px;}

.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; font-size:16px; font-weight:500; border-bottom: 1px solid #e4e4e4; 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:hover,
.m_gnb > ul > li > a.active{font-weight:700;}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#f3f3f3; }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #e4e4e4; transition:all 0.3s ease;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:14px 25px; font-size:15px; font-weight:400; color:#333; transition:all 0.3s ease;}
.m_gnb > ul > li > ul > li > a:hover{font-weight:600; color:#00a2e6;}
.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:26px; 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:#fff; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#fff; bottom: 9px; transform:rotate(-45deg);}

.area_util_m{padding:23px 20px; background:#00a2e6;}
.area_util_m .m_logo{height:17px; line-height:1em;}
.area_util_m .m_logo img{height:100%;}
.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;}

#footer{position:relative; background:#070c17; z-index:4;}
#footer .ft_top{display:block; padding:40px 0 35px; border-bottom:1px solid rgba(255,255,255,0.07); box-sizing:border-box;}
#footer .ft_top .inr{display:flex; justify-content: space-between; align-items: center;}
#footer .f_logo img{height:25px; opacity:0.2;}
#footer .ft_bottom{padding:50px 0 70px;}
#footer .address{position:relative; box-sizing:border-box; display:flex;}
#footer .address > div.box:nth-child(1){margin-right:30px; width:340px; box-sizing:border-box;}
#footer .address > div.box:nth-child(2){width:calc(100% - 370px);}
#footer .address > div.box h3{font-size: 14px;font-weight: 500;color:#fff;margin:0 0 10px;display: inline-block;border: 1px solid rgba(255,255,255,0.2);padding: 5px 8px 6px;border-radius: 2px;line-height: 1.2em;}
#footer address > div{margin-bottom:10px;}
#footer address > div:last-child{margin:0;}
#footer address em{display:inline-block; position:relative; top:-3px; width:75px; margin-right:7px; font-size:15px; font-weight:500; color:#fff; line-height:1em;}
#footer address span{display:inline-block; width:calc(100% - 100px); margin-right:15px; font-size:15px; font-weight:500; color:#a3a3a3; line-height:1.2em; vertical-align:top;}
#footer p{position:relative; box-sizing:border-box; margin:30px 0 0; font-size:14px; font-weight:400; color:#fff; opacity:0.2;}
#footer .customer{}
#footer .customer ul{display:flex;}
#footer .customer ul > li{position:relative; margin:0 14px;}
#footer .customer ul > li:last-child{margin-right:0;}
#footer .customer ul > li:before{content:''; position:absolute; top:6px; left:-14px; width:3px; height:3px; background:#fff; border-radius:50px; opacity:0.18;}
#footer .customer ul > li > a{display:block; box-sizing:border-box; line-height:1em; word-break:keep-all; font-size:15px; font-weight:400; color:#fff; opacity:0.2; transition:all 0.3s ease;}
#footer .customer ul > li > a:hover{opacity:1;}
#footer .customer ul > li:first-child:before{display:none;}
.area_quick{position:fixed; top:50%; right:0; width:100px; border-radius:5px 0 0 5px; box-sizing:border-box; z-index:999; transform:translateY(-50%); text-align:center; overflow:hidden; box-shadow: 0px 5px 12.75px 2.25px rgba(0, 0, 0, 0.05);}
.area_quick h3{display:block; padding:10px; box-sizing:border-box; background:#009b4b; font-size:13px; font-weight:bold; color:#fff; line-height:1em; word-break:keep-all;}
.area_quick .list_quick{background:#fff; }
.area_quick .list_quick li{border-bottom:1px solid #eee; box-sizing:border-box; transition:all 0.3s ease;}
.area_quick .list_quick li:last-child{border-bottom:none;}
.area_quick .list_quick li > a{display:block; width:100%; padding:20px 10px; box-sizing:border-box;}
.area_quick .list_quick li > a .icon img{height:36px;}
.area_quick .list_quick li > a .txt{display:block; margin:10px 0 0; font-size:14px; font-weight:500; color:#333; line-height:1em; word-break:keep-all;}
.area_quick .list_quick li:hover{background:#f9f9f9;}
.btn_top{position:absolute; right:0; bottom:0; width:70px; height:70px; border-radius:50px; background:#fff url(../images/common/icon_btn_top.svg)no-repeat center; background-size:8px 14px;}

#en #header .gnb .sub_menu li a{padding:5px 0;}

@media screen and (max-width:1700px){
	#header .inr{margin:0 5%;}
}
@media all and (max-width:1600px){
	#header .gnb{right:130px;}
}
@media all and (max-width:1500px){
	.inr{width:84%;}
	.board.wrapper, .common.wrapper, .koweb_online_counsel.wrapper{width:84%;}
}
@media all and (max-width:1400px){
	#header h1{left:3%;}
	#header .gnb{right:3%;}
	#header .list_lang.pc{left:345px;}
	.inr.sub02{width:90%;}
	.board.wrapper, .common.wrapper, .koweb_online_counsel.wrapper{width:90%;}

}
@media all and (max-width:1350px){
	.inr.sub{width:90%;}
}
@media all and (max-width:1280px){
	#header .gnb > li > a{padding:0 30px;}
	/*.wrapper{width:96%;}*/
}
@media all and (max-width:1080px){
	.inr{width:90%;}
	#header .area_util,
	#header .gnb{display:none;}
	#header .list_lang.pc{display:none;}
	#header .list_lang > li{margin:0 4px;}
	.btn_menu{display:block;}
	#header{height:80px;}
	#header .inr{margin:0 2%;}
	#header h1{top:40px;}
	#header h1 a{background-size:contain; width:240px; height:25px;}
	#footer .f_logo img{height:20px;}
	.btn_top{width:60px; height:60px;}

}

@media all and (max-width:850px){
	#footer .address{display:block;}
	#footer .address > div.box:nth-child(1){width:100%; margin:0 0 30px;}
	#footer .address > div.box:nth-child(2){width:100%;}
	#footer .address > div.box h3{padding:4px 8px 5px; font-size:13px;}
}
@media all and (max-width:767px){
	#header h1{top:30px;}
	#header h1 a{width:200px; height:20px;}
	.btn_menu{top:15px;}

	#footer .ft_top{padding:30px 0 22px;}
	#footer .f_logo img{height:18px;}
	#footer .customer ul{position:relative; top:-3px;}
	#footer .customer ul > li > a{font-size:14px;}
	#footer .ft_bottom{padding:30px 0 40px;}


}

@media all and (max-width:550px){
	.inr{width:94%;}
	.inr.sub{width:94%;}
	.board.wrapper, .common.wrapper, .koweb_online_counsel.wrapper{width:94%;}
	#footer .ft_top{padding:25px 0 12px;}
	#footer .f_logo img{height:15px;}
	#footer .customer ul{top:-7px;}
	#footer .address > div.box h3{margin:0 0 7px;}
	#footer .address > div.box:nth-child(1){ margin:0 0 10px;}
	#footer address > div{margin-bottom:6px;}
	#footer address em{width:80px;}
	#footer address span{width:100%; margin-right:0;}
	#footer address em,
	#footer address span{font-size:14px;}
	#footer p{margin:20px 0 0; font-size:13px;}
	.btn_top{width:45px; height:45px;}
}
@media all and (max-width:500px){
	#header{height:65px;}
	#header h1{top:27px;}
	#header h1 a{width:150px; height:15px;}
	.btn_menu{top:10px; width:20px; height:20px;}
	.area_util_m{padding:20px 15px;}
	.area_util_m .m_logo{height:15px;}
	.m_gnb .btn_close{top:22px;}
	.m_gnb > ul > li > a{padding:15px;}
	.m_gnb > ul > li > ul > li > a{padding:14px 15px;}

	#en #footer .ft_top .inr{display:block;}
	#en #footer .customer{display:block; margin:15px 0 0;}
	#en #footer .customer ul > li:first-child{margin-left:0;}

}
@media all and (max-width:450px){
	#footer .customer ul > li{margin:0 7px;}
	#footer .customer ul > li:before{left:-8px;}
	.btn_top{width:40px; height:40px;}
}
@media all and (max-width:400px){
	#footer .customer ul > li > a{font-size:13px;}
}
@media all and (max-width:370px){
	#footer address em{display:block; font-size:13px;}
	#footer p{margin:12px 0 0;}
}