@charset "utf-8";

/* common */
::selection{background: rgb(87 75 151 / 62%);color:#fff;}
body{font-size:16px;word-break:keep-all;position: relative;}
th[data-view="file"] + td ul li a{line-height:1em;}
ul li:last-child{margin-right:0;}

.wrap{width:1400px;margin:0 auto;position: relative;}

/* animation */
.ani{position:relative; opacity:0; transition: all 0.8s ease-out 0s; transform:translate(0,20px);}
.ani.is-animate{opacity:1; transform:translate(0,0);}

.delay-100{transition-delay:100ms;}
.delay-150{transition-delay:150ms;}
.delay-200{transition-delay:200ms;}
.delay-250{transition-delay:250ms;}
.delay-300{transition-delay:300ms;}
.delay-350{transition-delay:350ms;}
.delay-400{transition-delay:400ms;}
.delay-450{transition-delay:450ms;}
.delay-500{transition-delay:500ms;}

.ani_delay-100{animation-delay:100ms;}
.ani_delay-150{animation-delay:150ms;}
.ani_delay-200{animation-delay:200ms;}
.ani_delay-300{animation-delay:300ms;}
.ani_delay-400{animation-delay:400ms;}

.slideLeft.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideLeft{opacity: 0 !important;transform:translateX(-80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideRight.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideRight{opacity:0;transform:translateX(150px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slidedown.is-animate{opacity:1; transform:translateY(0);}
.slidedown{opacity:0;transform:translateY(-30px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideUp.is-animate{opacity:1; transform:translateY(0);}
.slideUp{opacity:0;transform:translateY(80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideFirst{opacity:0;position:relative;animation: firstAni 0.8s ease 0s forwards;}
.slideFirstUp{opacity:0; position:relative;animation:firstAniUp 1.3s ease 0s forwards;}
.slideFirstRight{opacity:0; position:relative;animation:slideFirstRight 1.3s ease 0s forwards;}

@keyframes firstAni{
	0%{opacity:0; transform:translateX(-80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateX(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes firstAniUp{
	0%{opacity:0; transform:translateY(80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateY(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes slideFirstRight{
	0%{opacity:0; transform:translateX(80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateX(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}

/* header */
#header{position:relative; z-index:51; padding-top:34px; background:#fff; border-bottom:1px solid #ddd; text-align:right;}
#header h1{float:left;position: relative;top: -3px;}
#header h1 a{display:block;}
#header h1 img{height:41px;}
#header h1 img:first-child{margin-right:17px;}
#header .btn_menu{display:none;}
#header .btn_menu{position:absolute; top:0; right:0; z-index:9999; width:23px; height:24px; font-size:0px; transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0px; width:100%; height:2px; background:#000;}
#header .btn_menu > span:nth-of-type(1){top:5px;}
#header .btn_menu > span:nth-of-type(2){top:50%; margin-top:-1px; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:17px;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active{position:fixed;top: 15px;transform:rotate(180deg);right: 15px;}
#header .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10px; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{position:fixed;opacity:0;visibility:hidden;top:0px;left:0px;width:-webkit-calc(100% - 320px);width:100%;height:-webkit-calc(100vh - -0px * 1);height:calc(100vh - -0px * 1);background:#000;font-size:0;transition:all 0.3s ease-out 0s;}
.active #header .btn_close{opacity:0.4; visibility:visible;}

#header nav{display: inline-block;}
#header nav .gnb{text-align:center;margin-right: -40px;}
#header nav .gnb > li{display:inline-block; position:relative; padding:0 40px;}

#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a{display:inline-block;padding-bottom: 40px;font-size: 19px;color: #222;letter-spacing: -0.05rem;}
#header nav .gnb > li:hover > a{}
#header nav .gnb > li > a.on, .sub #header nav .gnb > li > a.on{color: #574b97;}
#header nav .gnb > li > a > i{display:none;}

/* mobile gnb style */
#header.mob nav{position:fixed;top:0px;right:-100%;z-index:90;height:100%;transition:all 0.5s ease-out 0s;}
#header.mob nav.active{right:0px;}
#header.mob nav .gnb{position:absolute;top: 63px;right:0px;z-index:91;height: -webkit-calc(100% - 83px);height: calc(100% - 83px);padding-top:20px;background:#fff;box-shadow:-5px 0px 15px rgba(0,0,0,0.1);overflow-y:auto;}
#header.mob nav .gnb > li{padding:0;}
#header.mob nav .gnb > li > a{display:block; position:relative; margin:0 20px; padding:15px 0; font-weight:600; font-size:16px; color:#111; text-align:left; transition:all 0.3s ease 0s;}
#header.mob nav .gnb > li > a.active{}
#header.mob nav .gnb > li ul{display:none; padding:15px 20px; background:#f8f8f8; text-align:left;}
#header.mob nav .gnb > li ul > li > a{display:block; padding:10px 0px;}
#header.mob nav .gnb > li ul li.active a{color: #574b97;}
#header.mob nav .gnb > li > a.on{color: #574b97;}
#header.mob nav .gnb > li > a.active:after{transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}
#header.mob nav .gnb > li > a:after{content:""; position:absolute; top:25px; right:0; width:8px; height:5px; background:url(../../images/common/m_arr_gnb.svg) no-repeat 50% 50%; background-size:cover; transition:all 0.4s ease-out 0s;}

#header nav div[class^="gnb_"]{position:absolute; z-index:999;}
#header.mob nav [class^="gnb"]{right:0;width: 100%;}
#header.mob nav .gnb_header{top:0;height: 56px;background:#fff;border-bottom:1px solid #ddd;text-align: left;}
#header.mob nav .gnb_header img{height:38px;margin:15px 0 0 20px;}
#header.mob nav .gnb_footer{bottom:0; background:#fff;}
#header.mob nav .gnb_footer > div{margin:20px;}
#header.mob nav .gnb_footer > div{margin:20px;}
#header.mob nav .gnb_footer ul li{float:left; width:50%; text-align:center;}
#header.mob nav .gnb_footer ul{overflow:hidden; border-top:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4;}
#header.mob nav .gnb_footer ul li a{display:block; position:relative; padding:12px 0; font-size:13px; color:#666;}
#header.mob nav .gnb_footer ul li:first-child a:after{content:""; position:absolute; top:50%; right:0; width:1px; height:16px; margin-top:-8px; background:#d4d4d4;}
#header.mob nav .gnb_footer > div > a{display:block;margin-top:10px;padding:17px 0;background: #574b97;font-size:13px;color:#fff;text-align:center;}

#header .btn_menu.active > span{background:#000;}

/* footer */
#footer{position:relative;z-index:1;margin-top: 69px;background: #fff;}

#footer .menu li{float:left;margin-right: 39px;}
#footer .menu li a{display:block;font-size: 15px;color:#ccc;border-radius:4px;opacity: 0.6;transition: all 0.4s ease-out 0s;}
#footer .menu li:hover a{opacity:1;}
#footer .menu{overflow:hidden;background: #3a3a3a;padding: 24px 0;margin-bottom: 30px;}

#footer .cpright span{display:block;padding: 21px 0 70px;font-size:14px;color:#555;}
#footer .cpright span a{color:#555;}
#footer .cpright span em{font-weight:bold;}
#footer .cpright{border-top:1px solid rgba(255,255,255,0.05);}

#footer .btn_top{position:fixed;opacity:1;opacity:0;right: 40px;bottom:70px;z-index:99;transition:all 0.4s ease-out 0s;width: 70px;height: 70px;background: #2f2f2f;background-size:7px;background-position:50% 50%;font-size:0;transform:rotate(270deg);-webkit-transform:rotate(270deg);background-repeat:no-repeat;}
#footer .btn_top.active{position:fixed; opacity:0; bottom:50px;}
#footer .btn_top.hidden{opacity:0;}
#footer .btn_top.fiexd.active{position:fixed; opacity:1; top:auto; bottom:50px;}
#footer .btn_top.fiexd{position:absolute;opacity:1;top: 0;bottom:auto;}

#footer address span{position:relative;padding: 0 14px;font-weight:300;font-size:15px;color: #9c9c9c;display: inline-block;letter-spacing: -0.01rem;}
#footer address span:first-child,
#footer address span:nth-child(6){padding-left:0;}
#footer address span em{display:inline-block; margin-right:5px; font-weight:500; color:#444;}
#footer address span:after{content:""; position:absolute; top:3px; left:0; width:1px; height:12px; background:#d3d3d3;}
#footer address span:first-child:after,
#footer address span:nth-child(6):after{background:none;}
#footer address span:nth-child(4) ~ span{margin-top:9px;}

@media screen and (max-width:1680px){
	.wrap{width:1200px;}
	#header h1 img{height:32px;}
	#header nav .gnb > li{padding:0 29px;}
}

@media screen and (max-width:1365px){
	.wrap{width:auto; margin:0 50px;}
	#header{padding-top:24px;}
	#header h1 img{height:29px;}
	#footer .btn_top{right:0;}
}

@media all and (max-width:1280px){
	body,
	p,
	li,
	a{font-size:15px;}
}

@media all and (max-width:1279px){
	#header h1 a{display:flex; flex-direction:column;}
	#header h1 img:first-child{margin-bottom:12px;}
	#header nav{margin-top:24px;}
}

@media all and (min-width:1024px){
	#header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:15px; right:0; width:100%; padding:8px 17px; background:#fff; border:1px solid #444; box-shadow:15px 20px 29px 0px rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}
	#header nav div[class^="gnb_"]{display:none;}
	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:35px; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10px 0px; background:#fff; border-top:1px solid #e1e1e1; font-size:15px; color:#404040; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{opacity:0.5;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}
	a[data-link="call"]{cursor:auto; pointer-events:none;}
}

@media all and (max-width:1023px){
	.wrap{margin:0 30px;}
	#header .btn_menu,
	#header .btn_close{display:block;}
	#header nav{position:fixed; opacity:0; visibility:hidden; top:0px; right:0; z-index:998; width:100%; height:100%; margin:0; background:#fff;}
	#header nav.active{opacity:1; visibility:visible; right:0px; box-shadow:-5px 0px 15px rgba(0,0,0,0.1); transition:all 0.5s ease-out 0s;}
	#header nav .gnb > li{display:block;}
	#header nav .gnb{position:absolute; top:0px; right:0px; width:100%; overflow-y:auto;}
	#header nav .gnb > li{padding:0;}
	#header nav .gnb > li > a{display:block; padding:17px 0; font-size:18px; color:#111; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; padding:0px 0 20px;}
	#header nav .gnb > li ul > li > a{display:block; padding:10px 0px;}
	#header nav .gnb > li ul li.active a{color:#574b97;}
	#header{padding:20px 0;}
	#header h1 img{height:27px;}
	#header h1{float:none;}
	#header h1 a{align-items:flex-start; flex-direction:row;}
	#header h1 img:first-child{margin-bottom:0;}
	#header nav .gnb{margin-right:0; text-align:left;}
}

@media all and (max-width:767px){
	body,
	p,
	li,
	a{font-family:'Roboto', Sans-serif; font-size:14px;}
	.wrap{margin:0 15px;}
	#header nav{}
	#header nav .gnb > li > a{padding:14px 0; font-size:16px;}
	#header nav .gnb > li > a.on{font-weight:700;}
	#header h1 img{height:20px !important;}
	#header h1 img:first-child{height:22px !important;}
	#header h1 img:first-child{margin-right:11px;}
	#footer{margin-top:39px;}
	#footer .menu{margin-bottom:22px;padding:7px 0;/* padding-top:35px; */}
	#footer .menu li a{padding:5px 6px; font-size:12px;}
	#footer .menu li:first-child a{padding-left:0;}
	#footer div:last-child span{padding:14px 0 40px;}
	#footer ul:last-child{padding-bottom:10px;}
	#footer ul:last-child li em{display:block; margin:0 0 3px;}
	#footer .menu li{margin-right:5px;}
	#footer .btn_top{width:42px; height:42px; background-size:5px;}
	#footer address span{margin-right:5px; padding:0; font-size:13px;}
	#footer address span:after{display:none;}
	#footer address br{display:none;}
	#footer address span,
	#footer address span:nth-child(4) ~ span{margin-top:4px;}
	#footer .btn_top.fiexd.active{bottom:0;}
}

@media all and (max-width:400px){
	body,
	p,
	li,
	a{font-size:13px;}
	#header h1 img:first-child{height:20px !important;}
	#header h1 img{height:17px !important;}
}

@media all and (max-width:370px){
	#header h1 img:last-child{display:none;}
	#header h1 img:first-child{height:27px !important;}
}