@charset "UTF-8";

/* **************************************** *
 * LAYOUT
 * **************************************** */
 .main-layout {
    position: relative;
    width: 100%;
    min-width: 1300px;
    overflow: hidden;
    box-sizing: border-box
}
 .sub-layout {
    position: relative;
    width: 100%;
    min-width: 1300px;
    overflow: hidden;
    box-sizing: border-box
}

.portal-layout {
    position: relative;
    width: 100%;
    min-width: 1300px;
    overflow: hidden;
    box-sizing: border-box
}
.windowpopup-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.error-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.login-layout{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background-color: #f4f4f4;
}


/* **************************************** *
 * BANNER
 * **************************************** */
.tbanner{display:none; position:relative; height:60px; background:linear-gradient(-43deg, #085dbc, #008cd4); transition:all .2s cubic-bezier(0.7, 0, 0.3, 1)}
.tbanner .tbanner-inner{display:flex; align-items:center; justify-content:center; position:relative; width:1300px; height:60px; margin:0 auto}
.tbanner .tbanner-close{display:flex; align-items:center; position:absolute; right:0; height:60px}
.tbanner .tbanner-close .close{display:flex; align-items:center; color:#fff; font-size:14px; font-weight:300; letter-spacing:-0.5px}
.tbanner .tbanner-close .close i{position:relative; font-size:20px; vertical-align:middle}
.tbanner .tbanner-close .today{display:flex; align-items:center; position:relative; margin-right:20px; color:#fff; font-size:14px; font-weight:300; letter-spacing:-0.5px}
.tbanner .tbanner-close .today:before{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(255,255,255,.6)}


.tbanner-notice{display:flex; align-items:center; justify-content:center}
.tbanner-notice .num{
	display:flex; align-items:center; justify-content:center; flex:none; text-align:center; height:34px; margin-right:10px; padding:0 15px;
	border:2px solid #fff; color:#fff; font-size:14px; letter-spacing:-0.5px; border-radius:200px
}
.tbanner-notice .info{display:block; color:#fff; font-size:15px; font-weight:300; letter-spacing:-0.5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.tbanner-notice .more{
	display:flex; align-items:center; justify-content:center; text-align:center; height:40px; margin-left:10px; padding:0 20px;
	background:rgba(255,255,255,.2); color:#fff; font-size:15px; font-weight:300; letter-spacing:-0.8px; border-radius:8px;
}
#header.tbanner-hidden .tbanner{margin-top:-60px}


/* **************************************** *
 * HEADER
 * **************************************** */
#header {
    position: fixed;
    top: 0;
    right: 0;
    left:0 ;
    background: none;
    z-index:999;
}

#header:before {
	content:'';
	position: absolute;
	left: 0;
	right: 0;
	top: -78px;
	height: 72px;
	background: #fff;
	transition: all .2s cubic-bezier(0.7, 0, 0.3, 1)
}
/* t_banner 있을 시 */
/*.main-layout.tbanner-active #header.header-fixed:before,
.sub-layout.tbanner-active #header.header-fixed:before{top:60px}*/
#header.header-fixed:before {
	top:0;
	box-shadow:0 4px 4px 0 rgb(0 0 0 / 8%)
}
#header .header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1300px;
    height: 72px;
    margin: 0 auto;
}

/* logo */
#header .logo {
    position: absolute;
    left: 0;
    top: 21px;
    z-index: 9
}
#header .logo a {
    display: block;
    width: 122px;
    height: 30px;
    background:url("/static/fw/images/common/logo.png") no-repeat 50% 50%;
    background-size:122px 30px;
}

/* gnb */
#gnb .gnb_menu:after{content:''; display:block; clear:both;}
#gnb .gnb_menu > li{position:relative; float:left}
#gnb .gnb_menu > li > a{display:flex; align-items:center; position:relative; padding:0 42px; color:#101010; height:72px; box-sizing:border-box; transition: all .20s ease}
#gnb .gnb_menu > li > a > span{font-size:18px; letter-spacing:-0.8px; font-weight:600}
#gnb .gnb_menu > li:hover > a{color:#008cd4}
#gnb .gnb_menu > li > .depth2{display:none; position:absolute; left:0; top:62px; width:150px; padding:18px 0; background:rgba(38,69,95,.98); border-radius:12px; box-sizing:border-box; z-index:9}
#gnb .gnb_menu > li > .depth2 > ul > li > a{display:block; position:relative; color:rgba(255,255,255,.8); font-size:15px; font-weight:normal; letter-spacing:-0.5px; padding:5px 20px; text-align:center}
#gnb .gnb_menu > li > .depth2 > ul > li > a.on{color:rgba(255,255,255,1)}
#gnb .gnb_menu > li:nth-child(1) .depth2{margin-left:-12px; padding:14px 0 18px}
#gnb .gnb_menu > li:nth-child(3) .depth2{margin-left:-21px}


/* toolbar-util */
.toolbar-util{display:flex; align-items:center; position:absolute; right:0; top:16px; z-index:9}
.toolbar-util .util-account{display:flex; align-items:center}
.toolbar-util .util-account .account-default{display:flex; align-items:center}
.toolbar-util .util-account .account-default li{margin-left:15px}
.toolbar-util .util-account .account-default li a
{
	display:flex; align-items:center; justify-content:center; height:40px; margin:0; padding:0 25px; border:0; border-radius:200px; text-align:center; cursor:pointer; box-sizing:border-box;
	background:#008cd4; -webkit-appearance:none;
}
.toolbar-util .util-account .account-default li a.login{background:none; border:1px solid #008cd4}

.toolbar-util .util-account .account-default li a span{font-size:14px; font-weight:300; color:#fff; letter-spacing:-0.8px}
.toolbar-util .util-account .account-default li a.login span{color:#008cd4}


/* allmenu */
.allmenu-btn{display:none; position:absolute; top:13px; right:9px; overflow:hidden}
.allmenu-btn .allmenu-toggle{display:block; position:relative; width:46px; height:46px; background:none; border-radius:0; box-sizing:border-box}
.allmenu-btn .allmenu-toggle:before,
.allmenu-btn .allmenu-toggle:after{content:''; position:absolute; left:50%; width:22px; height:2px; background:#202020; margin-left:-11px; transition:all .20s ease}
.allmenu-btn .allmenu-toggle:before{top:12px}
.allmenu-btn .allmenu-toggle:after{bottom:12px}
.allmenu-btn .allmenu-toggle strong{display:block; position:absolute; top:22px; left:50%; width:14px; height:2px; margin-left:-11px; background:#202020; transition:all .20s ease}

.allmenu-close{display:block; position:fixed; right:15px; top:15px; width:46px; height:46px; background:#fff; border-radius:0; box-sizing:border-box; z-index:9; transition:all .20s ease}
.allmenu-close:before,
.allmenu-close:after{content:''; position:absolute; left:50%; width:22px; height:2px; background:#202020; margin-left:-11px; transition:all .20s ease}
.allmenu-close:before{top:22px; transform:rotate(45deg)}
.allmenu-close:after{bottom:22px; transform:rotate(-45deg)}
.allmenu-close strong{display:none}
.allmenu-close:hover:before{transform:rotate(135deg)}
.allmenu-close:hover:after{transform:rotate(45deg)}

.allmenu{display:none; position:fixed; left:0; top:0; right:0; bottom:0; background:#fff; overflow:hidden; overflow-y:auto; box-sizing:border-box; z-index:999999999}
.allmenu.active{display:block}
.allmenu .allmenu-inner{position:relative; width:640px; margin:0 auto; padding:100px 0 0; box-sizing:border-box}
.allmenu .util{position:relative; width:400px; margin-top:35px}
.allmenu .util .core{display:flex; justify-content:center; position:relative; margin:0 0 15px; box-sizing:border-box}
.allmenu .util .core .account{position:relative; line-height:145%; color:#202020; font-size:18px; font-weight:normal; letter-spacing:-1px}
.allmenu .util .core .account strong{color:#0074ff; font-weight:normal}

.allmenu .allmenu-tit{display:flex; flex-direction:column; align-items:center}
.allmenu .allmenu-tit .eng{display:flex; flex-direction:column; align-items:center; position:relative; line-height:110%; color:#0074ff; font-family:pps; font-size:100px; font-weight:900; letter-spacing:normal}
.allmenu .allmenu-tit .eng span:nth-child(2){color:#ededed}

#allmenu-gnb .gnb-depth{margin-top:80px}
#allmenu-gnb .gnb-depth:first-child{margin-top:0}

#allmenu-gnb .depth-tit .tit{display:inline-block; font-weight:300; font-size:24px; letter-spacing:-1px; line-height:135%; color:#202020}

#allmenu-gnb .depth2-list{margin-top:16px}
#allmenu-gnb .depth2-list:after{content:''; display:block; clear:both}
#allmenu-gnb .depth2-list li{float:left; width:33.33333%}
#allmenu-gnb .depth2-box .depth2-tit{display:flex; align-items:center; min-height:51px; border-bottom:1px solid #ebebeb;}
#allmenu-gnb .depth2-box .depth2-tit .tit{display:inline-block; position:relative; line-height:150%; font-weight:normal; font-size:20px; letter-spacing:-0.5px; color:#808080;  box-sizing:border-box}
#allmenu-gnb .depth2-box .depth2-tit .tit:hover{color:#202020}

.mfree-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:60px;
	margin-top:60px;
	padding:0 25px;
	background:#008cd4;
	border-radius:200px;
	text-align:center;
	cursor:pointer;
	box-sizing:border-box;
	transition:all .20s ease;
	-webkit-appearance:none;
}
.mfree-btn span{font-size:18px; font-weight:normal; color:#fff; letter-spacing:-0.8px}


body.allmenu-active{overflow:hidden}


/* **************************************** *
 * PORTAL CONTAINER
 * **************************************** */
.portal-sub-container{
    position: relative;
}

.windowpopup-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sub-content {
    position: relative;
    padding-top:72px;
    transition: all .2s cubic-bezier(0.7, 0, 0.3, 1)
}
/*.sub-layout.tbanner-active .sub-content{padding-top:132px}*/

.error-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.login-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.login-container .dev-content{padding:0}


/* **************************************** *
 * PORTAL FOOTER
 * **************************************** */
/* **************************************** *
 * PORTAL CONTAINER
 * **************************************** */
  .main-container{
    position: relative;
}
 
 .sub-container{
    position: relative;
}

.main-content {
    position: relative;
}

.sub-content {
    position: relative;
}

.main-content-inner {
    position: relative;
    /*min-height:600px;*/
    box-sizing: border-box
}

.sub-content-inner {
    position: relative;
    min-height: 700px;
    /*padding-bottom: 100px;*/
    box-sizing: border-box
}

.dev-content {
    position: relative;
    box-sizing: border-box
}

.main-content-inner .dev-content{
    padding: 0
}

/* **************************************** *
 * FOOTER
 * **************************************** */
/* footer */
#footer{position:relative; padding-bottom:50px; background:#202020}
#footer:after{content:''; display:block; clear:both}

/* footer_contents */
.footer-contents{position:relative; width:1300px; margin:0 auto; padding-top:130px; box-sizing:border-box}
.footer-logo{display:block; position:absolute; left:0; top:60px; width:131px; height:32px; background:url("/static/fw/images/common/flogo.png") 50% 50% no-repeat; background-size:131px 32px}

/* footer_info */
.footer-info{padding-top:35px; border-top:1px solid #4a4a4a}
.footer-info .info-company{margin-bottom:15px}
.footer-info .info-company li{display:inline-block; margin-right:15px}
.footer-info .info-company li strong{margin-right:8px; color:#f4f4f4; font-weight:300}
.footer-info .info-company li a{color:#c5c5c5}

.footer-info .info-address li{margin-bottom:3px; color:#c5c5c5; box-sizing:border-box}
.footer-info .info-address li strong{margin-right:8px}
.footer-info .info-address li:last-child{margin-bottom:0}

.footer-info .info-company li,
.footer-info .info-address li{position:relative; letter-spacing:-0.5px; line-height:150%; color:#c5c5c5; font-size:16px}





#footer .copyright{margin-top:22px; color:#808080; font-weight:normal; font-size:16px; line-height:150%; letter-spacing:-0.2px}

.link-site{display:flex; position:absolute; top:152px; right:0}
.link-site .site-jump{position:relative}
.link-site .site-jump .jump-toggle{display:block; position:relative; width:240px; height:51px; margin:0; padding-left:20px; padding-right:45px; text-align:left; background-color:#000; cursor:pointer; border:1px solid #4a4a4a; box-sizing:border-box}
.link-site .site-jump .jump-toggle:after{content:'\ea78'; position:absolute; top:11px; right:12px; font-family:"remixicon"; color:#808080; font-size:28px; transition:all .30s ease}
.link-site .site-jump .jump-toggle > span{display:inline-block; color:#c5c5c5; font-size:16px; line-height:49px; letter-spacing:-0.2px}
.link-site .site-jump .jump-toggle.active:after{transform:rotate(-180deg)}
.link-site .site-jump .jump-list{display:none; position:absolute; right:0; bottom:51px; width:100%; max-height:325px; padding:0 15px; overflow-y:auto; border:1px solid #4a4a4a; border-bottom:none; background:#000000; box-sizing:border-box; z-index:9}
.link-site .site-jump .jump-list ul{border-top:1px solid #fff; padding:10px 0}
.link-site .site-jump .jump-list ul:first-child{border-top:none}
.link-site .site-jump .jump-list ul li{padding:5px 0}
.link-site .site-jump .jump-list a{display:inline-block; font-size:16px; color:#c5c5c5; letter-spacing:-0.5px; line-height:150%; transition:all .20s ease}
.link-site .site-jump .jump-list a:hover{color:#fff}


/* wing_side */
.wing-side{position:fixed; bottom:50px; right:50%; margin-right:-740px; transition:all .20s ease; z-index:9}
.wing-side .page-top{display:block; position:relative; width:60px; height:60px; margin:0 auto; padding:0; background:#fff; border:0;  border-radius:50%; cursor:pointer; box-sizing:border-box; box-shadow: 0 8px 20px 0 rgb(0 0 0 / 20%);}
.wing-side .page-top:before{content:"\e946"; position:relative; top:-2px; color:#008cd3; font-family:xeicon; font-size:40px}

/* **************************************** *
 * SFOCUS
 * **************************************** */
.sfocus{position:relative;  height:400px; background-color:#f6fafb}
.sfocus .sfocus-inner{position:relative; width:1300px; height:367px; margin:0 auto; padding-top:94px; box-sizing:border-box}

.sfocus .page-tit{display:flex; flex-direction:column; justify-content:center; text-align:center; box-sizing:border-box}
.sfocus .page-tit .parent-tit{margin-bottom:10px; line-height:135%; font-weight:600; font-size:20px; color:#008cd4; letter-spacing:-0.8px; opacity:0}
.sfocus .page-tit .current-tit{opacity:0}
.sfocus .page-tit .current-tit .tit{margin-bottom:20px; line-height:135%; font-weight:900; font-size:38px; color:#111; letter-spacing:-1px}
.sfocus .page-tit .current-tit .info{margin-top:15px}
.sfocus .page-tit .current-tit .info p{line-height:135%; font-weight:normal; font-size:18px; color:#555; letter-spacing:-0.5px; word-break:keep-all}

.sfocus .service-inquiry{display:flex; justify-content:center; padding-top:35px; opacity:0}
.sfocus .service-inquiry .inquiry-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:195px;
	height:50px;
	margin:0 15px;
	padding:0 25px;
	border:1px solid #bbb;
	border-radius:200px;
	text-align:center;
	cursor:pointer;
	box-sizing:border-box;
	transition:all .20s ease;
	background:none;
	-webkit-appearance:none;
}
.sfocus .service-inquiry .inquiry-btn span{font-size:18px; font-weight:normal; color:#555; letter-spacing:-0.8px}
.sfocus .service-inquiry .inquiry-btn.free-version{border:1px solid #008cd4}
.sfocus .service-inquiry .inquiry-btn.free-version span{color:#008cd4}

.sfocus .page-tit .parent-tit{animation: parent-tit 1.1s cubic-bezier(0.7, 0, 0.3, 1) 0.2s 1 forwards}
@keyframes parent-tit {
	0%{opacity:0;}
	100%{opacity:1}
}
.sfocus .page-tit .current-tit{animation: current-tit 1.1s cubic-bezier(0.7, 0, 0.3, 1) 1s 1 forwards}
@keyframes current-tit {
	0%{opacity:0}
	100%{opacity:1}
}
.sfocus .service-inquiry{animation: service-inquiry 1.1s cubic-bezier(0.7, 0, 0.3, 1) 1.8s 1 forwards}
@keyframes service-inquiry {
	0%{opacity:0}
	100%{opacity:1}
}

.sfocus .current_location{position:absolute; right:0; bottom:30px; padding-left:30px}
.sfocus .current_location .home{display:block; position:absolute; top:-1px; left:0; margin:0; padding:0; box-sizing:border-box}
.sfocus .current_location .home:before{content:'\ee1f'; font-family:"remixicon"; font-size:18px; color:#999}

.sfocus .current_location ul:after {content:''; display:block; clear:both}
.sfocus .current_location ul li{position:relative; float:left; box-sizing:border-box}
.sfocus .current_location ul li .depth{display:block; position:relative; margin-right:15px; padding-left:15px; line-height:135%; color:#999; letter-spacing:-0.8px; font-size:14px; font-weight:normal; text-align:left}
.sfocus .current_location ul li .depth:after{content:''; position:absolute; left:0; top:8px; width:3px; height:3px; border-radius:50%; background:#999}
.sfocus .current_location ul li:last-child .depth{color:#333; margin-right:0; padding-right:0; font-weight:600}