@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');/*font-family: 'Roboto', sans-serif;*/
@font-face {
    font-family: 'MapoAgape';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoAgapeA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*layout*/
.pcv{display:block !important;}
.tmv{display:none !important;}
.bg{width:100%; height:100%; background:#000; z-index:90; display:block; position:fixed; left:0; top:0; right:0; bottom:0; }
.bg.show{display:none;}
#wrap{overflow:hidden;}
#header{}
#visual{width:100%; height:100%; margin-top:-76px;}
body.scroll-lock {position:fixed; height:100%; overflow:hidden;}
/*container*/
.container{max-width:1430px !important; margin:0 auto; /*background:rgba(0,0,0,0.5);*/padding-left:0; padding-right:0;}
.clear{position:relative;}
.clear:after{content:""; display:block; clear:both;}

/*header*/
.header{transition: all ease .2s  ;width:100%;min-width:1400px;height:113px; /*background:#fff; position:fixed;*/ position:fixed; z-index:99; border-bottom:1px solid rgba(218,218,218,0.6); }
.header.on, .header.on-menu{background-color:#fff; border-bottom:1px solid #dadada;}
.header h1{float:left; padding:26px 0 19px;} 
.header .gnb{position:absolute; left:55%; transform:translateX(-42%); width:58% ; white-space:nowrap ; }
.header .gnb > li{ display:inline-block; margin-left:30px; height:112px; position:relative; margin-right:  20px;  min-width:100px; }

.header .gnb li:last-child{margin-right:0;}
.header .gnb > li > a{font-size:20px; color:#fff; font-weight:700; line-height:112px; display:inline-block;position:relative;}
.header .gnb > li >  a:after{content:"";display:block; bottom:0px;width: 10%;left:50%;transition: all ease .2s  ; }
.header .gnb > li:hover >  a:after{content:"";display:block; bottom:0px;width:100%;left: 0%; height:4px;background:#2d3fa3; position:absolute; }
.sub_wrap .header .gnb > li > a{font-size:20px; color:#000; font-weight:700; line-height:112px; display:block;}
.sub_wrap .header .gnb > li > a:hover{color:#000; }
.is-ie .header .gnb > li > a{font-weight:600;}
.header.on .gnb > li.on > a , .header.on-menu .gnb > li.on > a{color:#000; position:relative;}
.header .leftM{float:right; padding:45px 3px; position:relative; z-index:2;}
.header .leftM li{display:inline-block;position:relative; padding-left:20px;}
.header .leftM li a{}

.header .gnb .menu_tab{ padding-top:15px;display:none;z-index:-11; transition: all ease .2s  ;opacity:0; }
.header.on-menu:hover .menu_tab{display:block;    position:absolute; left:0;top:100%;z-index:2; opacity:1;  }
.header:after{content:"";display:block;  left:0px; top:112px; z-index: 1;opacity:1; position:absolute; width:100%;height: 0px; background-color:#fff; transition: all ease .1s  ; }
.header.on-menu:hover:after{display:block; z-index: -1;opacity:1;background-color:#fff; height:320px; border-top:1px solid rgba(218,218,218,0.6); border-bottom:1px solid rgba(218,218,218,0.6);  }
.header .gnb .menu_tab a{font-size:16px;color:#000; line-height:46px; text-align:left; letter-spacing:-1px; white-space:nowrap;font-weight:500; }
.header .gnb .menu_tab a:hover{ color:#2d3fa3 !important;font-weight:bold;}
.header .leftM li img{}
.header.on .leftM li img , .header.on-menu .leftM li img{filter:invert(100);}

.header.on2 .gnb > li.on > a{color:#000; position:relative;}
.header.on2 .leftM li img{filter:invert(100);}
.header.on2{background-color:#fff; border-bottom:1px solid #dadada;}

.header .gnb > li > a{position:relative;}
.header .gnb > li > a{position: relative; -webkit-transition: color .1s,background-color .1s; }
/*.header .gnb > li > a:before{ position: absolute; top: 0px; left: 0; height: 4px; width: 100%; content: ''; background-color: #1f286f; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
}*/
.header .gnb > li > a.on a:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
.header .gnb > li:focus > a:before, .header .gnb > li:hover > a:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }


.header.on{ }
.header.on .gnb > li > a{color:#000; position:relative;}
.header h1 .logo{ display:block;width:188px;height:58px; background-image:url(/images/logo.png);background-repeat:no-repeat; }
.header.on h1 .logo{background-image:url(/images/sub_logo.png);}
.header.on2 h1 .logo{background-image:url(/images/sub_logo.png);}
.header.on2 .leftM li img{ filter:invert(0);}

.header .gnb > li a:hover{color:#f1f1f1;  }
.header.on .gnb > li a:hover{ color:#1f286f; }

.sub_con_box{ overflow:hidden;width:1435px; margin:0 auto; padding:100px 0; }
.sub_con_box h4{ margin-bottom:60px; font-size: 30px; font-weight:bold;line-height:30px; color:#0c2340; }
.sub_con_box h5{ margin:50px 0; font-size: 40px; font-weight:700;line-height:60px; letter-spacing:-2px; text-align:center}
.sub_con_box h6{ margin-bottom:30px; font-size: 24px; font-weight:bold;line-height:30px; color:#0c2340; float:left}

/*depth2*/
.depth2{position:absolute; width:200px;  background:#fff; top:112px;  margin-left:-98px; z-index:99; padding:34px 0; border:1px solid #dadada; border-radius: 0 0 20px 20px; box-sizing:border-box; display:none; border-top:none; text-align:center}
.depth2.depth21{left:90px;}
.depth2.depth22{left:220px;}
.depth2.depth23{left:365px;}
.depth2.depth24 { left:496px; }
.depth2.depth25{left:630px;}
.depth2.depth26{left:7680px;}
.depth2.on.depth21{height:300px;}
.depth2.on.depth22{height:250px;}
.depth2.on.depth23{height:230px;}
.depth2.on.depth24{height:230px;}
.depth2.on.depth25{height:200px;}
.depth2.on.depth26{height:230px;}
.depth2 .left{width:50%; height:100%; float:left; border-right:1px solid #dadada; box-sizing:border-box; padding-left:47px;} 
.depth2 .left img{}
.depth2 .left p{font-size:18px; color:#666; font-family:'PHCL', sans-serif; font-weight:bold; padding:27px 0 13px;}
.depth2 .left span{font-size:14px; color:#999; font-family:'NotoSansCJKkrDemiLight', sans-serif; line-height:24px;}
.is-ie .depth2 .left span{font-family: 'NotoSansCJKkrDemiLight-ie';}
.depth2 .right{width:80%; height:100%; float:left; box-sizing:border-box; padding-left:10%;}
.depth2 .right ul{}
.depth2 .right li{float:none; margin-bottom:24px;}
.depth2 .right li a{font-size:14px; color:#555; font-family:'NotoSansCJKkrDemiLight', sans-serif; cursor:pointer;}
.depth2 .right li a:hover{color:#1f286f}
.depth2 .right li.on a{color:#1f286f; padding-bottom:8px; border-bottom:1px solid #1f286f;}

.depth2 .right li a{position: relative; -webkit-transition: color .1s,background-color .1s;}
.depth2 .right li a:before{ position: absolute; top: 26px; left: 0; height: 2px; width: 100%; content: ''; background-color: #1f286f; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
}
.depth2 .right li a:focus:before, .depth2 .right li a:hover:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }

.am_btn img{vertical-align:2px;}
.m_am_btn{display:none !important;}
.m_am_btn img{vertical-align:2px;}

.all_menu{ overflow:hidden; position:fixed; top:100%; left:0; width:100%; height:100%; z-index:2000; transition: top 1.1s cubic-bezier(0.770, 0.000, 0.175, 1.000);}
.all_menu.open{top:0; }

.all_menu .am_left{float:left; width:21%; height:100%; background:url(../images/am_bg.jpg) no-repeat right bottom; position:relative; background-size:cover;}
.all_menu .am_left:before{content:""; width:267px; height:372px; background:url(../images/am_cc.png) no-repeat; position:absolute; left:0; top:0;}
.all_menu .am_left:after{content:""; width:283px; height:94px; background:url(../images/am_logo.png) no-repeat; position:absolute; right:0; bottom:0;}
.all_menu .am_left h3{font-size:26px; color:#fff;font-family:'PHCB', sans-serif; text-align:center; position:relative; margin-top:calc(50vh - 28px);}
.all_menu .am_left h3:after{content:""; width:23px; height:2px; background:#fff; position:absolute; bottom:-27px; left:50%; transform:translateX(-50%);}
.all_menu .am_right{float:right; width:79%; height:100%; position:relative; background:#f6f6f6;}
/*.all_menu.on .am_right{opacity:1;}
.all_menu.close .am_right{transition-delay:0s;}*/
.all_menu .am_right .amr_tp{position:absolute; left:calc(50% - 532px); top:calc(50% - 308px);}
.all_menu .am_right .amr_tp li{display:inline-block; margin-right:25px; padding-bottom:7px;}
.all_menu .am_right .amr_tp li a{font-family:'PHCL', sans-serif; font-weight:bold; font-size:18px; color:#59514e;}

.all_menu .am_right .amr_tp li.on a{color:#1f286f;}
.all_menu .am_right ul.amr_d1{overflow:hidden; width:1065px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.all_menu .am_right ul.amr_d1 > li{float:left; position:relative; box-sizing:border-box; padding-left:44px; padding-right:110px;}
.all_menu .am_right ul.amr_d1 > li:first-child{padding-left:0;}
.all_menu .am_right ul.amr_d1 > li:last-child{padding-right:0;}
.all_menu .am_right ul.amr_d1 > li:after{content:""; width:1px; height:390px; background:#dadada; position:absolute; top:0; right:0;}
.all_menu .am_right ul.amr_d1 > li:last-child:after{width:0; height:0;}
.all_menu .am_right ul.amr_d1 > li h5{font-size:26px; color:#59514e;font-family:'PHCB', sans-serif; padding-bottom:52px; position:relative;}
.all_menu .am_right ul.amr_d1 > li h5:after{content:""; width:23px; height:2px; background:#59514e; position:absolute; left:0; top:46px;}
.all_menu .am_right ul.amr_d2{}
.all_menu .am_right ul.amr_d2 li{padding-bottom:26px;color:#666;font-family:'NotoSansCJKkrDemiLight', sans-serif;}
.all_menu .am_right ul.amr_d2 li a{color:#666;font-family:'NotoSansCJKkrDemiLight', sans-serif;}
.all_menu .am_right .amr_bt{position:absolute; left:calc(50% - 532px); bottom:0; width:1065px; border-top:1px solid #dadada; padding:32px 0 49px;}
.all_menu .am_right .amr_bt li{position:relative; display:inline-block; padding:0 12px 0 10px;}
.all_menu .am_right .amr_bt li:first-child{padding-left:0;}
.all_menu .am_right .amr_bt li a{font-size:14px; color:#666; font-family:'NotoSansCJKkrDemiLight', sans-serif;}
.all_menu .am_right .amr_bt li a em{color:#f04e23}
.all_menu .am_right .amr_bt li:after{content:""; width:2px; height:2px; background:#666; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.all_menu .am_right .amr_bt li:last-child:after{width:0; height:0;}
.all_menu .am_right .amr_bt li.last:after{width:0; height:0;}
.all_menu .am_right .amr_bt li.cyber{position:absolute; right:0; top:18px;}
.all_menu .am_right .amr_bt li.cyber a{color:#f04e23; line-height:40px; width:193px; border:1px solid #f04e23; border-radius:20px; text-align:center; display:block;}
.all_menu .close{display:block; position:absolute; top:60px; right:60px;}
.all_menu .close.ts{opacity:1;}


.closebt {
  cursor:pointer;
  z-index:1002; 
  position:absolute; top:60px; right:60px; 
  width: 50px;
  height: 50px;
  opacity: 0.8;
}

.closebt:before, .closebt:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 40px;
  width: 4px;
  background-color: #182051;
}
.closebt:before { transform: rotate(45deg);}
.closebt:after { transform: rotate(-45deg);}



.all_menu .am_right .amr_tp li a{position: relative; -webkit-transition: color .1s,background-color .1s; }
.all_menu .am_right .amr_tp li a:before{ position: absolute; top: 26px; left: 0; height: 2px; width: 100%; content: ''; background-color: #f04e23; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
}
.all_menu .am_right .amr_tp li.on a:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
.all_menu .am_right .amr_tp li a:focus:before, .all_menu .am_right .amr_tp li a:hover:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }

.all_menu .am_right ul.amr_d2 li a{position: relative; -webkit-transition: color .1s,background-color .1s; }
.all_menu .am_right ul.amr_d2 li a:before{ position: absolute; top: 26px; left: 0; height: 2px; width: 100%; content: ''; background-color: #f04e23; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
}
.all_menu .am_right ul.amr_d2 li a:focus:before, .all_menu .am_right ul.amr_d2 li a:hover:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }

/* mobile menu */
.m_bg{position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); opacity:0; z-index:-1; transition:opacity 0.3s; display:none;}
.m_bg.on{opacity:1; z-index:1000;}
.m_menu{position:fixed; top:0; width:51%; height:100%; z-index:2000; background:#fff; right:-100%; transition:all 0.5s;}
.m_menu.show{right:0;}
.m_menu .m_top{overflow:hidden; height:75px; background:url(../images/m_top_bg.png) no-repeat center; background-size:cover; border-bottom:1px solid #dadada; padding-left:37px; padding-top:32px; box-sizing:border-box;}
.m_menu .m_top li{float:left; margin-right:29px;}
.m_menu .m_top li a{font-size:18px; color:#fff;font-family:'PHCB', sans-serif; position:relative;}
.m_menu .m_top li.on a{}
.m_menu .m_top li.on a:after{content:""; width:100%; height:2px; background:#fff; position:absolute; left:0; top:-5px;}
.m_menu .m_list{}
.m_menu .m_list > li{}
.m_menu .m_list > li.on > a{background:url(../images/minus.png) no-repeat right 32px center;}
.m_menu .m_list > li.nbg > a{background:none;}
.m_menu .m_list > li.nbg.on > a{background:none;}
.m_menu .m_list > li > a{display:block; width:100%; color:#59514e; font-size:20px;font-family:'PHCL', sans-serif; font-weight:bold;border-bottom:1px solid #dadada; padding:25px 0 19px 37px; background:url(../images/plus.png) no-repeat right 32px center; box-sizing:border-box;}
.m_menu .m_list > li ul{background:#f6f6f6; border-bottom:1px solid #dadada; padding-top:39px; padding-left:37px; padding-bottom:42px; display:none;}
/*.m_menu .m_list > li:first-child ul{display:block;}*/
.m_menu .m_list > li ul li{padding-bottom:31px;}
.m_menu .m_list > li ul li:last-child{padding-bottom:0;}
.m_menu .m_list > li ul li a{font-size:18px; font-family:'NotoSansCJKkrDemiLight', sans-serif; color:#666;}
.m_menu .m_list > li ul li.on a{color:#f04e23}
.m_menu .m_close{position:absolute; top:29px; right:32px;}

/*visual*/
.visual{width:100%; height:100vh; position:absolute; left:0; top:0; background:#000;}
.swiper-container{width:100%; height:100vh;}
.visual .visual00{position:relative; overflow:hidden;}
.visual .visual00 .container{height:100%; position:absolute; left:50%; top:0; transform:translateX(-50%);}
.visual .visual00 .visual_text{width:1300px;  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); z-index:999;}
.visual .visual00 .visual_text h2{font-size:65px;font-family:'Noto Sans KR', sans-serif; font-weight:500; color:#fff; letter-spacing:-1px; line-height:90px;}
.visual .visual00 .visual_text h2 em{color:#f04e23;}
.visual .visual00 .visual_text h2 span{display:block; letter-spacing:-2px;}
.visual .visual00 .visual_text h2 span:nth-child(1){ font-weight:900}
.visual .visual00 .visual_text > span{display:block; font-size:24px; text-transform:uppercase; font-family: 'PHCL', sans-serif; font-weight:400; color:#fff; padding:50px 0; line-height:36px; letter-spacing:-2px;}
.visual .visual00 .visual_box{width:100%; height:100vh;}
.visual .visual00 .visual_box .visual_bg{width:100%; height:100%; /*background:url(../images/visual_bg.jpg) no-repeat;  background-size:cover;*/}
.visual .visual00 .visual_box .visual_bg img{width:105%; height:100%;}
.visual .visual00 .visual_box .visual_ob{position:absolute; bottom:0; left:50%; margin-left:-291px; z-index:5;}

.visual .visual_navi{position:absolute; top:calc(60% + 128px); left:50%; transform:translateX(-50%); z-index:10; width:1300px; }
.visual .visual_navi li{float:left; margin-left:17px;}
.visual .visual_navi li.prev{padding-top:12px; display:block; padding-left:60px}
.visual .visual_navi li.next{padding-top:12px; display:block;}
.visual .visual_navi li.stop{/*width:40px; height:41px; border:1px solid rgba(255,255,255,0.4); border-radius:50%; text-align:center; box-sizing:border-box;*/padding-top:12px}
.visual .visual_navi li.stop a{display:block; width:100%; height:100%; position:relative;}
.visual .visual_navi li.stop a:after{content:""; display:block; width:100%; height:100%; background:url(../images/stop.png) no-repeat center; position:absolute; left:0; top:0;}
.visual .visual_navi li.stop.play a:after{background:url(../images/play.png) no-repeat center; background-size:}
.visual .visual_navi li.pager{font-size:14px; color:#fff; font-family: 'Noto Sans KR', sans-serif; font-weight:600; padding-top:14px;}

/*scroll*/
.scroll{position:absolute; bottom:0; left:50%; transform:translateX(-50%); height:77px; z-index:90; transition:opacity 0.5s;}
.scroll.on{opacity:0;}
.scroll p{font-size:12px;font-family: 'Open Sans', sans-serif; color:#fff; padding-bottom:10px; text-transform:uppercase;}
.scroll span{display:block; width:1px; height:55px; background:red; position:absolute; left:50%; transform:translateX(-50%); top: 24px; animation: scroll 2s cubic-bezier(.5,0,0,1) infinite;}
.scroll span:after{content:""; display:block; width:1px; position:absolute; left:0; top:0px; background:red; animation: scroll-bar 2s cubic-bezier(.5,0,0,1) infinite;}

.scroll span{display:block; width: 1px; height: 55px; position: absolute; bottom: 0; left: 50%; background-color: #fff; background:#aca3a1;}
.scroll span:after{content: ''; display:block; width: 2px; height: 55px; position: absolute; bottom: 0; left: 0; pointer-events: none;
    -webkit-clip-path: polygon(0 -150%,100% -150%,100% 0,0 0);
    clip-path: polygon(0 -150%,100% -150%,100% 0,0 0);
	background: #1f286f;
    -webkit-animation: home_hero_scroll_line 2s cubic-bezier(.5,0,0,1) infinite;
    animation: home_hero_scroll_line 2s cubic-bezier(.5,0,0,1) infinite;

}
.is-ie .scroll span{overflow:hidden;}
.is-ie .scroll span:after{
	-webkit-animation:ie_scroll 2s cubic-bezier(.5,0,0,1) infinite;;
	animation:ie_scroll 2s cubic-bezier(.5,0,0,1) infinite;;
}

@keyframes home_hero_scroll_line{
0%{-webkit-clip-path:polygon(0 -150%,100% -150%,100% 0,0 0);clip-path:polygon(0 -150%,100% -150%,100% 0,0 0)}
100%,80%{-webkit-clip-path:polygon(0 100%,100% 100%,100% 350%,0 350%);clip-path:polygon(0 100%,100% 100%,100% 350%,0 350%)}
}

@keyframes ie_scroll{
	0%{top:-55px;}
	100%{top:100%;}
}
.visual .visual00 .visual_text > span{opacity:0; transform:translateY(40px); transition:transform 1s ease-in-out, opacity 1s ease-in-out; }
.visual .visual00 .visual_text h2{}
.visual .visual00 .visual_text h2 span:nth-child(1){opacity:0; transform:translateY(40px); transition:transform 1s ease-in-out, opacity 1s ease-in-out; transition-delay:.1s;}
.visual .visual00 .visual_text h2 span:nth-child(2){opacity:0; transform:translateY(40px); transition:transform 1s ease-in-out, opacity 1s ease-in-out; transition-delay:.2s;}


.visual .visual00.show .visual_text > span{opacity:1; transform:translateY(0);}
.visual .visual00.show .visual_text h2{}
.visual .visual00.show .visual_text h2 span:nth-child(1){opacity:1; transform:translateY(0);}
.visual .visual00.show .visual_text h2 span:nth-child(2){opacity:1; transform:translateY(0);}

.visual .visual00 .visual_box .visual_bg{opacity:0; transition:opacity 0.5s;}
.visual .visual00.show .visual_box .visual_bg{animation:bgs 3s ease-in-out; opacity:1;}

.visual .visual00 .visual_box .visual_ob{}
.visual .visual00.show .visual_box .visual_ob{animation:scale 1s cubic-bezier(0.4, 0, 1, 1), obleft 4s 0.99s cubic-bezier(0.4, 0, 1, 1); transform:none;}

@keyframes op{
	0%{opacity:0;}
	100%{opacity:100%;}
}
@keyframes txt{
	0%{opacity:0; transform:translateY(20%);}
	100%{opacity:1; transform:translateY(0);}
}

@keyframes scale{
	0%{transform:translateX(-4%) scale(1.2);}
	100%{transform:translateX(-4%) scale(1);}
}

@keyframes obleft{
	0%{transform:translateX(-4%);}
	100%{transform:translateX(0);}
}
@keyframes bgs{
	0%{transform:scale(1.3); opacity:0.5;}
	100%{transform:scale(1); opacity:1;}
}
@keyframes bgs2{
	0%{transform:scale(1); }
	100%{transform:scale(1.1); }
}
@keyframes bgx{
	0%{transform:translateX(-5%) scale(1);}
	100%{transform:translateX(-2.5%) scale(1.05);}
}
.visual .visual_navi li.stop a{
	width:39px; height:39px; border:1px solid rgba(255,255,255,0.5); box-sizing:border-box; border-radius:50%; position:relative;
}

.circular-chart {
  display: block;
  width: 43px;
  height: 43px;
  position:absolute; left:-3px; top:-3px;
}

.circle {
  stroke: #f04e23;
  fill: none;
  stroke-width: 3;
  /*stroke-linecap: round;*/
  stroke-dasharray:100;
  stroke-dashoffset:100;

}
.visual .visual_navi li.stop.show .circle{}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
  100%{
	stroke-dasharray: 100 100;
  }
}








/* cont01 */
.cont1{height:914px; position:relative; margin-top:60px; z-index:10; background:url(../images/cont1_bg.jpg) no-repeat center top; overflow:hidden;}
.cont1 .container{padding-top:100px; overflow:hidden;}
.cont1 .container > h3{font-size:45px; color:#222;text-align:center; text-transform:uppercase;}
.cont1 .container > p{font-size:18px; color:#666; font-family: "NotoSansCJKkrDemiLight", sans-serif; text-align:center; padding-top:16px;}
.cont1 .cont1_left{float:left; padding-top:198px; position:relative;}
.cont1 .cont1_left li{width:450px; position:absolute; left:0; top:198px;}
.cont1 .cont1_left li.on{display:block;}
.cont1 .cont1_left p{font-family:'PHCB', sans-serif; font-size:43px; color:#111; letter-spacing:-1px;padding-bottom:28px; text-transform:lowercase;}
.cont1 .cont1_left p:first-letter{text-transform:uppercase;}
.cont1 .cont1_left span{display:block; font-size:16px; color:#666; line-height:29px;font-family: "NotoSansCJKkrDemiLight", sans-serif; letter-spacing:-1px; word-break:keep-all;}
.is-ie .cont1 .cont1_left span{font-family: 'NotoSansCJKkrDemiLight-ie', sans-serif; letter-spacing:0;}
.cont1 .cont1_center{width:532px; height:532px; background:url(../images/cont1_circle_2.png) no-repeat left top; position:absolute; left:50%; top:243px; transform:translate(-50%,0);}
.cont1 .cont1_center ul{}
.cont1 .cont1_center li{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0;transition:all 0.5s; visibility:hidden;}
.cont1 .cont1_center li svg{opacity:0; transition:all 0.5s;}
.cont1 .cont1_center li svg > *{stroke:#f04d22;}
.cont1 .cont1_center li.on{display:block; opacity:1; visibility:visible;}
.cont1 .cont1_center li.on svg.show{opacity:1;}
.cont1 .cont1_right{float:right; padding-top:67px;}
.cont1 .cont1_right ul{}
.cont1 .cont1_right li{position:relative; border-bottom:1px solid #dadada; padding:35px 0 35px 57px;}
.cont1 .cont1_right li a{display:block;}
.cont1 .cont1_right li em{position:absolute; left:10px; top:28px; font-size:50px; font-family: 'Roboto', sans-serif; color:#d3d3d3;}
.cont1 .cont1_right li p{font-size:16px; font-family:'PHCL', sans-serif; font-weight:bold; padding-bottom:10px; color:#d3d3d3; text-transform:lowercase;}
.cont1 .cont1_right li p:first-letter{text-transform:uppercase;}
.cont1 .cont1_right li span{ font-size:14px;font-family:'NotoSansCJKkrDemiLight', sans-serif; font-weight:bold; color:#d3d3d3;}
.cont1 .cont1_right li.on em{color:#222;}
.cont1 .cont1_right li.on p{color:#f04d22;}
.cont1 .cont1_right li.on span{color:#222;}

.cont1 .more{display:block;font-size:14px;color:#f04d22;font-family: "NotoSansCJKkrRegular", sans-serif;; line-height:42px; width:172px; text-align:center; border:1px solid #f04d22; border-radius:10px 0 10px 0; background:#fff; ; overflow:hidden; margin-top:40px; position:relative; padding-top:0; z-index:0; transition:all 0.5s;}
.cont1 .more span{color:#f04d22; line-height:42px; letter-spacing:0;}
.cont1 .more img{padding-left:11px; vertical-align:0;}
.cont1 .more span{transition:all 0.5s;}
.cont1 .more:before{content:""; display:block; width:110%; height:100%; position:absolute; left:0; top:0; background:#f04d22; transform-origin: 0 0; transform:translateY(100%) rotate(30deg); z-index:-1; transition:transform 0.5s cubic-bezier(0.33, 0.16, 0.31, 1.02);}
.cont1 .more:hover{}
.cont1 .more:hover span{color:#fff;}
.cont1 .more:hover:before{transform:translateY(0) rotate(0);}

.cont1 .container > h3{opacity:0; transform:translateY(40%); transition: all 0.5s;}
.cont1 .container > p{opacity:0; transform:translateY(40%); transition: all 0.5s; transition-delay:0.4s;}
.cont1 .cont1_left{opacity:0; transform:translateY(40%); transition: all 0.5s; transition-delay:0.6s;}
.cont1 .cont1_center{opacity:0; transform:translate(-50%,40%); transition: all 0.5s; transition-delay:0.2s;}
.cont1 .cont1_right ul{opacity:0; transform:translateY(40%); transition: all 0.5s; transition-delay:0.8s;}

.cont1.show .container > h3 {opacity:1; transform:translateY(0);}
.cont1.show .container > p{opacity:1; transform:translateY(0);}
.cont1.show .cont1_left{opacity:1; transform:translateY(0);}
.cont1.show .cont1_center{opacity:1; transform:translate(-50%,0);}
.cont1.show .cont1_right ul{opacity:1; transform:translateY(0);}

/*cont2*/
.cont2{width:100%; height:782px; background:url(../images/cont2_bg.jpg) no-repeat center top; box-sizing:border-box; position:relative; overflow:hidden;}
.cont2 .container{position:relative; height:100%; overflow:hidden;}
.cont2_left{position:relative; padding-top:162px;}
.cont2_left h3{font-size:45px; color:#222;font-family:'PHCM', sans-serif; letter-spacing:2px;}
.cont2_left ul{padding-top:111px; position:relative;}
.cont2_left ul li{}
.cont2_left ul li > a{display:block; color:#666;font-family:'PHCL',sans-serif; font-weight:bold; padding-bottom:5px; position:absolute; top:90px; font-size:15px; overflow:hidden;}
.cont2_left ul li > a:before{position: absolute; bottom:0; left: 0; height: 2px; width: 100%; content: ''; background-color: #f04e23; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); }
.cont2_left ul li > a:focus:before, .cont2_left ul li > a:hover:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
.cont2_left ul li:nth-child(1) > a{left:0;}
.cont2_left ul li:nth-child(2) > a{left:95px;}
.cont2_left ul li:nth-child(3) > a{left:219px;}
.cont2_left ul li:nth-child(4) > a{left:353px;}
.cont2_left ul li div{padding-top:55px; display:none;}
.cont2_left ul li div p{font-size:45px; color:#222;font-family:'PHCL', sans-serif;; padding-bottom:36px;}
.cont2_left ul li div span{font-size:15px; line-height:29px; color:#666; font-family: 'NotoSansCJKkrDemiLight', sans-serif;;}
.is-ie .cont2_left ul li div span{font-family: 'NotoSansCJKkrDemiLight-ie', sans-serif; }
.cont2_left ul li .cont2_imgbox{display:block; position:absolute; left:50%; top:-39px; opacity:0; transition:opacity .5s; padding-top:0;}
.cont2_left ul li .cont2_imgbox img{position: absolute; left:0;}
.cont2_left ul li.on{}
.cont2_left ul li.on > a{color:#f04e23; /*border-bottom:2px solid #f04e23;*/overflow:hidden;}
.cont2_left ul li.on > a:before{-webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1);}
@keyframes left{
	0%{left:-100%;}
	100%{left:0;}
}
.cont2_left ul li.on div{display:block;}
.cont2_left ul li.on .cont2_imgbox{display:block; opacity:1;}
.cont2_left .more{display:block;font-size:14px;color:#f04d22;font-family: "NotoSansCJKkrRegular", sans-serif;; line-height:42px; width:172px; text-align:center; border:1px solid #f04d22; border-radius:10px 0 10px 0; background:#fff; ; overflow:hidden; margin-top:40px; position:relative; padding-top:0; z-index:1; transition:all 0.5s;}
.cont2_left .more span{color:#f04d22; line-height:42px; }
.cont2_left .more img{padding-left:11px; vertical-align:0;}
.cont2_left .more span{transition:all 0.5s;}
.cont2_left .more:before{content:""; display:block; width:110%; height:100%; position:absolute; left:0; top:0; background:#f04d22; transform-origin: 0 0; transform:translateY(100%) rotate(30deg); z-index:-1; transition:transform 0.5s cubic-bezier(0.33, 0.16, 0.31, 1.02);}
.cont2_left .more:hover{}
.cont2_left .more:hover span{color:#fff;}
.cont2_left .more:hover:before{transform:translateY(0) rotate(0);}

.cont2 .circle_area{}
.cont2 .circle_area .circle{position:absolute;}
.cont2 .circle_area .circle1{top:-126px; left:calc(100% - 255px); /*animation:cc1 3s infinite alternate;*/}
.cont2 .circle_area .circle2{top:70px; left:calc(50% - 70px); /*animation:cc2 2s infinite alternate;*/}
.cont2 .circle_area .circle3{top:calc(100% - 280px); right:calc(100% - 292px); /*animation:cc3 3s infinite alternate;*/ z-index:0;}
@keyframes cc1{
	100%{transform:translateY(8%);}
}
@keyframes cc2{
	100%{transform:translate(-8%,-8%);}
}
@keyframes cc3{
	100%{transform:translate(5%,-8%);}
}

.swiper-container-bs{height:auto; /*padding-top:44px;*/ display:none;}
.swiper-container-bs .swiper-slide a{display:inline-block; color:#666;font-family:'PHCL',sans-serif; font-weight:bold; padding-bottom:5px; font-size:15px; font-size:14px; position:relative;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.swiper-container-bs .swiper-slide a.btn2{margin-left:-15px;}
.swiper-container-bs .swiper-slide:last-child{text-align:center;}
.swiper-container-bs .swiper-slide a:before{position: absolute; bottom:0; left: 0; height: 2px; width: 100%; content: ''; background-color: #f04e23; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); }
.swiper-container-bs a.on{color:#f04e23; /*border-bottom:2px solid #f04e23;*/}
.swiper-container-bs a.on:before{-webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1);}


/* cont03 */
.cont3{width:100%; height:553px; box-sizing:border-box; position:relative; background:#f8efe7;}
/*.cont3 .wave2{width:200%; height:100%; position:absolute; left:-800px; top:0; transition:all 0.8s; background:url(../images/wave3.png) no-repeat; z-index:2;}
.cont3 .wave2.on{left:0;}*/
.cont3 .container{padding-top:109px;}
.cont3 h3{font-size:40px; letter-spacing:2px; color:#000;font-family: 'PHCM', sans-serif; text-align:center; text-transform:uppercase;}
.cont3 ul{margin:0 auto; width:960px; overflow:hidden; padding-top:75px;}
.cont3 li{float:left; text-align:center; width:25%;}
.cont3 li div{position:relative; margin-bottom:29px;}
.cont3 li p{font-size:16px;font-family: 'PHCL', sans-serif; font-weight:bold; color:#f04e23; letter-spacing:2px; padding-bottom:20px; position:absolute; top:102px; left:50%; transform:translateX(-50%);}
.cont3 li span{font-family: "NotoSansCJKkrDemiLight", sans-serif; font-size:23px; color:#222;}
.cont3 li span em{font-size:45px; padding-right:7px;font-family: 'PHCM', sans-serif;}


/* cont4 */
.cont4{width:100%; height:914px; background:#fff;}
.cont4 .container{position:relative;}
.cont4 h3{font-size:45px; letter-spacing:2px; color:#222;font-family: 'PHCM', sans-serif; text-align:center; padding-top:117px; text-transform:uppercase;}
.cont4 ul{overflow:hidden; margin:0 auto; width:400px; padding-top:43px;}
.cont4 ul li{float:left; width:33.3%; box-sizing:border-box; text-align:center; position:relative;}
.cont4 ul li:after{content:""; position:absolute; right:0; top:8px; width:1px; height:50px; background:#e0dbd7;}
.cont4 ul li:last-child:after{width:0; height:0;}
.cont4 ul li p{color:#f04d22; font-family: 'Open Sans', sans-serif; font-size:40px; font-weight:600;}
.cont4 ul li span{display:block; font-size:14px; font-family: 'Open Sans', sans-serif; color:#222; padding-top:8px; text-transform:uppercase;}
.cont4 .map{position:relative; width:1182px; height:612px; margin:auto; margin-top:-73px;}
.cont4 .map .mapimg{width:100%;}
.cont4 .map p{position:absolute; line-height:27px; color:#fff; background:#f04d22; border-radius:15px; padding:0 13px; text-align:center;font-family: 'Open Sans', sans-serif; font-weight:600; font-size:14px;}
.cont4 .map p.UK{left:21px; top:162px;}
.cont4 .map p.Czech{top:162px; left:144px;}
.cont4 .map p.Slovakia{top:195px; left: 151px;}
.cont4 .map p.India{top:308px; left: 286px;}
.cont4 .map p.China{top:272px; left:355px;}
.cont4 .map p.Vietnam{top:356px; left:380px;}
.cont4 .map p.Indonesia{top:402px; left:461px;}
.cont4 .map p.Japan{top:232px; left:535px;}
.cont4 .map p.USA{top:211px; left:892px;}
.cont4 .map p.Mexico{top:311px; left:918px;}
.cont4 .map p.malaysia{top:411px; left:355px;}
.cont4 .map p.korea{top:262px; left:438px;}
.cont4 .map .svg{position:absolute; left:29px; top:43px; width:910px; height:333px;}
.cont4 .map .dot{animation:dots 2s infinite;}
@keyframes dots{
	0%{transform:scale(1); opacity:0.3;}
	100%{transform:scale(5); opacity:0;}
}
.cont4 .map .dot2{animation:dots 3s infinite;}
.cont4 .map span{position:absolute; top:214px; left:456px;}
.cont4 .map span img{}
.cont4 .cont4_right{position:absolute; right:0; top:334px;}
.cont4 .more{display:block;font-size:14px;color:#f04d22;font-family: "NotoSansCJKkrRegular", sans-serif;; line-height:42px; width:172px; text-align:center; border:1px solid #f04d22; border-radius:10px 0 10px 0; background:#fff; position:absolute; left:50%; bottom:33px; transform:translateX(-50%); overflow:hidden;}
.cont4 .more span{z-index:10;}
.cont4 .more img{padding-left:11px;vertical-align:0;}
.cont4 .more span{transition:all 0.5s;}
.cont4 .more:before{content:""; display:block; width:110%; height:100%; position:absolute; left:0; top:0; background:#f04d22; transform-origin: 0 0; transform:translateY(100%) rotate(30deg); z-index:-1; transition:transform 0.5s cubic-bezier(0.33, 0.16, 0.31, 1.02);}
.cont4 .more:hover span{color:#fff;}
.cont4 .more:hover:before{transform:translateY(0) rotate(0);}

.dot1,.dot11,.dot3,.dot4,.dot5,.dot6,.dot7,.dot8,.dot9,.dot10,.dot111,.dot112{width:4px; height:4px; background:red; border-radius:50%; position:absolute; left:-2px; top:-2px;}
.dot1:before,.dot11:before,.dot3:before,.dot4:before,.dot5:before,.dot6:before,.dot7:before,.dot8:before,.dot9:before,.dot10:before,.dot111:before,.dot112:before{content:""; width:100%; height:100%; border-radius:50%; background:red; position:absolute; left:0; top:0; animation:dots 2s infinite;}


/*cont5*/
.cont5{width:100%; height:861px; background:#f6f6f6; overflow:hidden;}
.cont5 .container{position:relative;}
.cont5 h3{font-size:50px; letter-spacing:2px; color:#222;font-family: 'PHCM', sans-serif; text-align:center; padding-top:117px; text-transform:uppercase;}
.cont5 p{font-size:18px; color:#222; font-family: "NotoSansCJKkrDemiLight", sans-serif;; text-align:center; padding-top:18px;}
.cont5 .cont5_box{width:100%; padding-top:46px; overflow:hidden;}
.cont5 .cont5_box .swiper-slide{height:auto;}
.cont5 .cont5_box .cont5_leftbox{float:left; width:320px; margin-right:170px;}
.cont5 .cont5_box .cont5_leftbox:last-child{margin-right:0;}
.cont5 .cont5_box .cont5_leftbox div.cont5_limg{width:320px; height:320px; padding:0; position:relative; transition:all 0.5s; z-index:2; cursor:pointer;}
.cont5 .cont5_box .cont5_leftbox div.cont5_limg a{display:block; width:100%; height:auto;}
.cont5 .cont5_box .cont5_leftbox div.cont5_limg:hover{border-radius:50%;}
.cont5 .cont5_box .cont5_leftbox div.cont5_limg img{display:none;}
/*.cont2 .cont2_box div p{content:""; display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;}*/
.cont5 .cont5_box .cont5_leftbox:nth-child(1) div.cont5_limg{background:url(../images/c2_1.png) no-repeat left top; border-radius:84px 0 0 0;}
.cont5 .cont5_box .cont5_leftbox:nth-child(2) div.cont5_limg{background:url(../images/c2_02.jpg) no-repeat left top;}
.cont5 .cont5_box .cont5_leftbox:nth-child(3) div.cont5_limg{background:url(../images/c2_03.jpg) no-repeat left top; border-radius:0 0 84px 0;}
.cont5 .cont5_box .cont5_leftbox:nth-child(1):hover div.cont5_limg{border-radius:50%;}
.cont5 .cont5_box .cont5_leftbox:nth-child(3):hover div.cont5_limg{border-radius:50 %;}
.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt{width:320px; padding-top:30px; padding-bottom:40px; box-sizing:border-box; word-break:keep-all;}
.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt p{text-align:left; font-family:'PHCM'; color:#f05023; font-size:22px; padding-top:0; padding-bottom:15px;}
.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt span{font-size:16px; line-height:24px; color:#222;font-family: 'NotoSansCJKkrDemiLight',sans-serif; word-break:keep-all; padding-right:37px; word-break:keep-all;}
.is-ie .cont5 .cont5_box .cont5_leftbox div.cont5_ltxt span{font-family: 'NotoSansCJKkrDemiLight-ie';}
.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt img.hoverimg{padding-top:22px; display:block; opacity:0; transition:opacity 0.5s}
.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt img.hoverimg.on{opacity:1;}

/* footer*/
#footer{width:100%; background:#010524;}
#footer .container{position:relative;}
.footer{padding-top:60px;}
.footer > div{float:left;}
.footer .footer_left{width:330px;}
.footer .footer_left > ul{overflow:hidden;}
.footer .footer_left > ul ul{padding-bottom:1px;}
.footer .footer_left > ul > li{float:left; width:25%;}
.footer .footer_left > ul > li p{font-size:16px; color:#fff;font-weight:bold; padding-bottom:20px;}
.footer .footer_left > ul > li li{}
.footer .footer_left > ul > li li a{font-size:14px; color:#888;sans-serif;; line-height:24px;}
.footer .footer_center{}
.footer .top{position:absolute; right:0; bottom:110px; z-index:10;}
.footer .top span{display:block; color:#888; font-size:12px;text-align:center; padding-top:10px;}
.footer .footer_bottom{width:100%; border-top:1px solid rgba(255,255,255,0.2); margin-top:25px; padding-top:45px; padding-bottom:105px; overflow:hidden;}
.footer .footer_bottom .fb_left{float:left;}
.footer .footer_bottom .fb_left ul{}
.footer .footer_center ul.terms{margin-top:25px; padding-bottom:18px;}
.footer .footer_bottom .fb_left ul.add{font-family:'Noto Sans KR', sans-serif;  padding-bottom:7px; font-weight:600; letter-spacing:-1px}
.footer .footer_bottom .fb_left ul li{display:inline-block;color:#888; }
.footer .footer_bottom .fb_right{float:right;}
.footer .footer_center ul.terms li{padding-bottom:18px; float:left}
.footer .footer_center ul.terms li a{font-size:14px; position:relative; margin-left:11px; margin-right:9px; color:#888; backface-visibility: hidden; }

.footer .footer_bottom .fb_left ul.add li{font-size:14px; padding-right:16px;}
.footer .footer_bottom .fb_left ul.add li span{padding-left:16px;margin-bottom:10px}
.footer .footer_bottom .copy{color:#010524; font-size:12px; margin-top:10px}
.footer .footer_right{width:197px; float:right; font-size:14px; border:1px solid #6c6e80;margin-top:-15px; position:relative; box-sizing:border-box;}

.footer .f_box{position:relative;}
.footer .f_box > a{ text-align:center; display:block;color:#888; padding:15px 13px 18px 11px; box-sizing:border-box;}
.footer .f_pop{width:200px; background:#fff; overflow:hidden; position:absolute; right:0; bottom:0; display:none; z-index:99;  border:1px solid #dadada; }
.footer .f_pop > div{float:left;}
.footer .f_pop > div ul{width:100%; padding:25px 0 25px 25px; box-sizing:border-box;}
.footer .f_pop .f_left{width:168px; }
.footer .f_pop .f_left p{background:#464646;}
.footer .f_pop .f_left ul{}
.footer .f_pop .f_left ul li{padding-bottom:17px;}
.footer .f_pop .f_left ul li a{font-size:14px; color:#222;}
.footer .f_pop .f_left ul li a.curde{cursor:default;}
.footer .f_pop .f_left ul li a:hover{color:#f05023; }
.footer .f_pop .f_right{width:100%;}
.footer .f_pop .f_right p{background:#1e2965}
.footer .f_pop .f_right ul{overflow:hidden; display:none; height:340px; border-left:1px solid #dadada; box-sizing:border-box;}
.footer .f_pop .f_right ul.on{display:block;}
.footer .f_pop .f_right ul li{width:100%; float:left; padding-bottom:19px;}
.footer .f_pop .f_right ul li a{font-size:15px; color:#222; width:100%; display:block}
.footer .f_pop .f_right ul li a.curde{cursor:default;}
.footer .f_pop .f_right ul li a:hover{color:#1e2965; font-weight:bold}
.footer .f_pop > div p{ font-weight:bold; color:#fff; font-size:16px; line-height:51px; padding-left:25px; box-sizing:border-box;}
.footer .f_pop a.f_cls{width:14px; height:14px; display:block; position:absolute; right:14px; top:19px;}
.f_box a img{/*padding-left:50px*/}

.footer li a{position: relative; -webkit-transition: color .1s,background-color .1s;}
/*.footer li a:before{ position: absolute; top: 22px; left: 0; height: 1px; width: 100%; content: ''; background-color: #1e2965; 
	-webkit-transform-origin: right top; 
	transform-origin: right top; 
	-webkit-transform: scaleX(0); transform: scaleX(0); 
	-webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
	transition: transform .3s cubic-bezier(.165,.84,.44,1); 
	transition: transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1); 
}*/
.footer li a:hover:before { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }

body{width:100%; overflow-x:hidden;}
.wave img{position:absolute; height:300px; right:-800px; bottom:-175px; z-index:9; transition:all 0.8s;}
/* error 
.error{padding-bottom:170px;}
.error h3{font-size:32px; padding-bottom:52px;}
.error h3 br{display:none;}
.error .error_box{text-align:center; max-width:100%; width:743px; margin:0 auto; background:#f7f7f7; padding:50px 10px 47px; box-sizing:border-box;}
.error .error_box .error_img{display:block; width:128px; height:128px; border-radius:50%; background:#fff; position:relative; margin:0 auto;}
.error .error_box .error_img img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-top:-4px;}
.error .error_box p{font-size:16px; line-height:28px; color:#666; padding-top:30px; word-break:keep-all; font-family: "NotoSansCJKkrRegular", sans-serif; }
.error .error_box a.btn2{display:block;font-size:14px;color:#f04d22;font-family: "NotoSansCJKkrRegular", sans-serif; line-height:42px; width:177px; border:1px solid #f04d22; border-radius:10px 0 10px 0; background:#fff; overflow:hidden; position:relative; padding-top:0; z-index:0; transition:all 0.5s; margin:0 auto; margin-top:33px; box-sizing:border-box;color:#f04d22; line-height:41px;transition:all 0.5s;}
.error .error_box a.btn2 img{padding-left:19px; vertical-align:-1px;}
.error .error_box a.btn2:before{content:""; display:block; width:110%; height:100%; position:absolute; left:0; top:0; background:#f04d22; transform-origin: 0 0; transform:translateY(100%) rotate(30deg); z-index:-1; transition:transform 0.5s cubic-bezier(0.33, 0.16, 0.31, 1.02);}
.error .error_box a.btn2:hover{color:#fff;}
.error .error_box a.btn2:hover:before{transform:translateY(0) rotate(0);}

.award{position:absolute; right:78px; bottom:142px; overflow:hidden;}
.award li{float:left; margin-right:26px;}
.award li:last-child{margin-right:0;}
*/
.img_layer{position:absolute; left:calc(50% - 650px); top:76px; z-index:999;}
.img_layer .btnWrap{background:#000; overflow:hidden; padding:9px 5px; width:100%; box-sizing:border-box;}
.img_layer .btnWrap a{float:right; }
.img_layer .btnWrap a:last-child{margin-right:7px;}

@media ( max-width: 1350px ) {
	.cont1 .cont1_left li{}
}

@media ( max-width: 1350px ) {

	/* layout */
  .container{max-width:100% !important; padding:0 50px; box-sizing:border-box;}
  .pcv{display:none !important;}
  .tmv{display:block !important;}
  
  /*header*/
  .header .gnb{display:block;}
  .header .leftM li.global_wrap{display:none;}
  .m_am_btn{display:block !important;}

  /* m_menu */
  .m_bg{display:block;}
	.m_menu.tmv{display:block !important;}

	/*visual*/
  #visual{margin-top:0;}
  .visual .visual00 .container{width:100%; padding:0 50px; left:0; transform:translateX(0); box-sizing:border-box;}
  .visual .visual00 .visual_text{left:50px; transform:translate(0%,-50%);}
  .visual .visual_navi{width:100%; padding:0 50px; transform:translateX(0); left:0; box-sizing:border-box;}
  .visual .visual_navi li.pager{left:190px;}
  .wave{display:none;}

  /*cont1*/
	.cont1{margin-top:0; height:1172px;}
	.cont1 .container{padding-top:81px; position:relative; height:100%;}
	.cont1 .container > h3{font-size:40px;}
	.cont1 .pcv{display:block !important;}
	.cont1 .tmv{display:none !important;}
	.cont1 .cont1_right{float:none; width:100%;}
	.cont1 .cont1_right ul{overflow:hidden;}
	.cont1 .cont1_right li{float:left; width:20%; box-sizing:border-box; border-bottom:none; padding:0; padding-top:50px;}
	.cont1 .cont1_right li:after{content:""; width:1px; height:100%; background:#dadada; position:absolute; right:0; top:0;}
	.cont1 .cont1_right li:last-child:after{width:0; height:0;}
	.cont1 .cont1_right li span{display:none;}
	.cont1 .cont1_right li em{top:0; left:50%; transform:translateX(-50%); font-size:45px;}
	.cont1 .cont1_right li p{text-align:center;}
	.cont1 .cont1_center{top:354px; width:463px; height:463px; background-size:contain;}
	.cont1 .cont1_left{float:none; width:100%;}
	.cont1 .cont1_left li{top:560px; width:100%;}
	.cont1 .cont1_left li > span{width:72%; word-break:keep-all;}

	/* cont2 */
	.cont2{height:692px;}
	.cont2 .circle_area #scene1{display:none;}
	.cont2 .circle_area #scene3{display:none;}
	.cont2_left{padding-top:105px;}
	.cont2_left h3{font-size:40px;}
	.cont2_left ul{padding-top:51px;}
	.cont2_left ul li > a{top:46px;}
	.cont2_left ul li div{width:50%;}
	.cont2_left ul li div p{font-size:40px; line-height:45px;}
	.cont2_left ul li .cont2_imgbox{width:50%; left:calc(50% + 22px);}
	.cont2_left ul li.on .cont2_imgbox{width:50%;}
	.cont2_left ul li .cont2_imgbox img{width:100%;}
	.cont2_left ul li div span{word-break:keep-all;}
	.cont2 .circle_area .circle2{width:214px; right:20px; left:initial; top:173px;}
	.cont2 .circle_area .circle2 img{width:100%;}

	/* cont3 */
	.cont3 ul{width:100%;}
	.cont3 li span{font-size:22px;}
	.cont3 li span em{font-size:40px;}

	/* cont4 */
	.cont4{height:auto; padding-bottom:109px;}
	.cont4 h3{font-size:40px;}
	.dot1,.dot11,.dot3,.dot4,.dot5,.dot6,.dot7,.dot8,.dot9,.dot10,.dot111,.dot112{display:none;}
	.m_map{width:100%;}
	.m_map img{width:100%;}
	.cont4 .more{position:relative; left:0; top:0; margin:0 auto; margin-top:4px; transform:translateX(0);}

	/* cont5 */
	.cont5{height:auto; padding-bottom:108px;}
	.cont5 .cont5_box .cont5_leftbox{width:calc(33.3333% - 14px); box-sizing:border-box; margin-right:20px;}
	.cont5 .cont5_box .cont5_leftbox:last-child{margin-right:0;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt img.hoverimg{display:none;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_limg:hover{border-radius:0;}
	.cont5 .cont5_box .cont5_leftbox:nth-child(1):hover div.cont5_limg{border-radius:50px 0 0 0;}
	.cont5 .cont5_box .cont5_leftbox:nth-child(3):hover div.cont5_limg{border-radius:0 0 50px 0;}
	.cont5 .cont5_box .cont5_leftbox:nth-child(1) div.cont5_limg{background:none; border-radius:0;}
	.cont5 .cont5_box .cont5_leftbox:nth-child(2) div.cont5_limg{background:none; border-radius:0;}
	.cont5 .cont5_box .cont5_leftbox:nth-child(3) div.cont5_limg{background:none;border-radius:0 0 50px 0;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_limg{width:100%; height:auto; overflow:hidden;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_limg img{display:block; width:100%;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt{width:100%;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt p{font-size:20px; font-family: 'PHCL',sans-serif; font-weight:bold;}
	.cont5 .swiper-wrapper{height:auto;}
	.cont5 .cont5_box{overflow:visible;}

	/* footer */
	.footer{position:relative; padding-top:138px;}
	.footer .footer_left{width:100%;}
	.footer .footer_center{float:none; position:absolute; left:0; top:45px;}
	.footer .footer_center ul.terms{ /*overflow:hidden;*/ padding-bottom:0;}
	.footer .footer_center ul.terms li{float:left; padding-bottom:0; position:relative; padding-left:10px;}
	.footer .footer_center ul.terms li:after{content:""; width:1px; height:19px; background:#625d59; position:absolute; right:0; top:4px;}
	.footer .footer_center ul.terms li:first-child{padding-left:0px;}
	.footer .footer_center ul.terms li:last-child:after{width:0; height:0;}
	.footer .footer_center ul.terms li a{margin-left:0;}
	.footer .footer_right{float:none; position:absolute; right:0; top:45px;}
	.footer .footer_right > a{padding-left:0;}
	.footer .footer_right.on > a{padding-left:0;}
	.footer .footer_bottom{border-top:none; position:relative; overflow:visible;}
	.footer .footer_bottom:before{content:""; width:200%; height:1px; background:rgba(255,255,255,0.2); position:absolute; left:-24px; top:0;}
	.footer .footer_bottom .fb_left ul li{line-height:24px;}
}
@media (max-width:1024px){
	.cont2_left ul li .cont2_imgbox{top:30px;}
}

@media ( max-width: 840px ) {
	.cont2_left ul li .cont2_imgbox{width:50%; top:95px;}

	.cont3{height:850px;}
	.cont3 li{width:50%; margin-bottom:80px;}


}
@media ( max-width: 640px ) {
	.header{height:45px;}
	.header h1{padding-top:15px;}
	.header h1 img{width:44px;}
	.header .leftM{padding-top:15px;}

	.m_menu{width:calc(100% - 25px);}
	.m_menu .m_top{height:45px; padding-top:17px; padding-left:28px;}
	.m_menu .m_top li{margin-right:15px;}
	.m_menu .m_top li a{font-size:12px;}
	.m_menu .m_close{width:12px; top:17px; right:25px;}
	.m_menu .m_close img{width:100%;}
	.m_menu .m_list > li > a{font-size:15px; padding:16px 0 12px 27px;}
	.m_menu .m_list > li ul{padding-top:19px; padding-left:27px; padding-bottom:18px;}
	.m_menu .m_list > li ul li{padding-bottom:22px;}
	.m_menu .m_list > li ul li a{font-size:14px;}

	.container{padding:0 24px;}

	.visual .visual00 .visual_text{width:100%; text-align:center; left:0; transform:translate(0,-50%); margin-top:-30px;}
	.visual .visual00.show .visual_text > span{font-size:11px; padding-bottom:13px;}
	.visual .visual00 .visual_text h2{font-size:26px; line-height:33px;}
	.visual .visual_navi{width:119px; left:50%; top:calc(50% + 64px); transform:translateX(-50%); padding:0;}
	.visual .visual_navi li.prev{margin-left:0;}
	.visual .visual_navi li.pager{left:50%; transform:translateX(-50%);top:37px; margin-left:0;}
	.scroll{height:52px;}
	.scroll p{font-size:8px;}
	.scroll span{height:28px;}
	.scroll span:after{height:28px;}

	.cont1{height:750px;    background: url(../images/cont1_bg_m.jpg) no-repeat center;}
	.cont1 .container{padding-top:50px;}
	.cont1 .pcv{display:none !important;}
	.cont1 .tmv{display:block !important;}
	.cont1 .cont1_center{width:399px; height:399px; top:169px;}
	.cont1 .cont1_center li:nth-child(1) svg{width:250px;}
	.cont1 .cont1_center li:nth-child(2) svg{width:175px;}
	.cont1 .cont1_center li:nth-child(3) svg{width:270px;}
	.cont1 .cont1_center li:nth-child(4) svg{width:200px;}
	.cont1 .cont1_center li:nth-child(5) svg{width:230px;}
	.contmt a{text-align:center;font-family:'PHCB', sans-serif; font-size:14px; color:#666;}
	.contmt .swiper-slide.on a{color:#f05023; border-bottom:2px solid #f05023;}
	.contmt .swiper-slide{height:auto; text-align:center;}
	.cont1 .container > h3{font-size:24px;}
	.cont1 .container > p{font-size:15px; padding-top:13px;}
	.cont1 .cont1_right{padding-top:31px;}
	.cont1 .cont1_left{position:absolute; left:25px; top:322px;; padding-top:0;}
	.cont1 .cont1_left li{top:241px;}
	.cont1 .cont1_left li > span{width:calc(100% - 50px);}
	.cont1 .cont1_left p{font-size:19px; padding-bottom:14px;}
	.cont1 .cont1_left li > span{font-size:14px; line-height:22px; letter-spacing:0;}
	.cont1 .more{margin-top:19px; width:120px; }
	.cont1 .more span{font-size:10px; line-height:28px;}
	
	.cont2{height:auto; background-color:#f6f6f6; padding-bottom:54px;}
	.cont2 .container{height:auto;}
	.cont2_left{padding-top:52px;}
	.cont2_left h3{font-size:24px; padding-bottom:44px;}
	.cont2_left ul li > a{font-size:14px; top:24px;}
	.cont2_left ul li:nth-child(2) > a{left:84px;}
	.cont2_left ul li:nth-child(3) > a{left:168px;}
	.cont2_left ul li:nth-child(4) > a{left:287px;}
	.cont2_left ul{padding-top:424px;}
	.cont2_left ul li .cont2_imgbox{width:350px; left:50%; margin-left:-175px; top:40px;}
	.cont2_left ul li.on .cont2_imgbox{width:350px;}
	.cont2_left ul li div{width:100%; padding-top:0;}
	.cont2_left ul li div p{font-size:21px; padding-bottom:17px; line-height:28px;}
	.cont2_left ul li div span{font-size:14px; line-height:22px; word-break:keep-all;}
	.cont2_left .more{margin-top:20px;width:120px; padding-top:2px;}
	.cont2_left .more span{font-size:12px; line-height:28px;}
	.swiper-container-bs{display:block;}
	.cont2_left ul li > a{display:none;}


	.cont3{height:470px;}
	.cont3 h3{font-size:24px;}
	.cont3 .container{padding-top:55px;}
	.cont3 ul{padding-top:25px;}
	.cont3 li{margin-bottom:40px;}
	.cont3 li div{margin-bottom:17px;}
	.cont3 li div img{width:95px;}
	.cont3 li p{font-size:14px; top:64px; letter-spacing:0;}
	.cont3 li span{font-size:12px;}
	.cont3 li span em{font-size:22px;}

	.cont4{padding-bottom:48px;}
	.cont4 h3{font-size:24px; padding-top:58px;}
	.cont4 ul{width:240px; padding-top:23px;}
	.cont4 ul li p{font-size:21px;}
	.cont4 ul li span{font-size:12px;}
	.m_map{width:calc(100% + 48px); margin-left:-24px;}
	.cont4 .more{margin-top:14px;width:120px; }
	.cont4 .more span{font-size:12px; line-height:28px;}

	.cont5{padding-bottom:70px;}
	.cont5 h3{font-size:24px; padding-top:52px;}
	.cont5 p{font-size:15px; line-height:1.5; padding-top:13px; word-break:keep-all;}
	.cont5 .cont5_box{overflow:visible; padding-top:26px;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt{padding-top:16px; padding-bottom:0;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt p{font-size:19px;}
	.cont5 .cont5_box .cont5_leftbox div.cont5_ltxt span{font-size:14px; line-height:20px; color:#666;}

	.footer{padding-top:0; display:flex; flex-wrap:wrap;}
	.footer .footer_right{position:static; order:1; margin-top:4px;}
	.footer .footer_left{display:none;}
	.footer .footer_center{position:static; order:2; width:100%; height:37px;}
	.footer .footer_bottom{margin-top:0; order:3;}
	.footer .footer_center ul.terms{width:100%; height:37px; display:flex; align-items: center;}
	.footer li a:before{width:0; height:0;}
	
	.footer .top{bottom:31px;}
	.footer .footer_right{width:100%; top:19px;}
	.footer .footer_right > a{font-size:12px; }
	.footer .footer_center{top:65px;}
	.footer .footer_center ul.terms li a{font-size:12px; display:block;}
	.footer .footer_center ul.terms li:after{top:1px; height:11px;}

	.footer .f_pop{width:300px;}
	.footer .f_pop > div{float:none;}
	.footer .f_pop > div p{font-size:14px; line-height:42px;}
	.footer .f_pop .f_left{width:100%;}
	.footer .f_pop .f_left ul li a{font-size:12px;}
	.footer .f_pop .f_right{width:100%;}
	.footer .f_pop .f_right ul{width:100%; padding-left:15px; height:155px;}
	.footer .f_pop .f_right ul li{width:50%;}
	.footer .f_pop .f_right ul li a{font-size:12px;}
	.footer .f_pop a.f_cls{top:13px;}
	
}
@media ( max-width: 470px ) {
	.cont1{height:700px;}
	.cont1 .cont1_center{width:300px; height:300px;}
	.cont1 .cont1_center li:nth-child(1) svg{width:200px;}
	.cont1 .cont1_center li:nth-child(2) svg{width:135px;}
	.cont1 .cont1_center li:nth-child(3) svg{width:218px;}
	.cont1 .cont1_center li:nth-child(4) svg{width:208px;}
	.cont1 .cont1_center li:nth-child(5) svg{width:178px;}
	.cont1 .cont1_left{top:240px;}

	.cont2{height:auto;}
	.cont2_left ul{padding-top:344px;}
	.cont2_left ul li .cont2_imgbox{width:300px; left:50%; margin-left:-150px; top:25px;}
	.cont2_left ul li.on .cont2_imgbox{width:300px;}

	.cont2_left ul li > a{font-size:12px; top:24px;}
	.cont2_left ul li:nth-child(2) > a{left:50%;}
	.cont2_left ul li:nth-child(3) > a{left:0px; top:55px;}
	.cont2_left ul li:nth-child(4) > a{left:50%; top:55px;}
}


/*main-Business Area*/
.cont01{background: #fff; overflow:hidden; width:100%;box-sizing: border-box;padding:65% 0 150px}
.cont_subtit{ color:#2d3fa3; font-weight:bold; font-family: 'Montserrat', sans-serif; font-size:25px}
.cont_tit{ color:#000000; font-weight:700; font-family: 'Noto Sans KR', sans-serif; font-size:55px; line-height:72px; letter-spacing:-2px}
.cont01 ul{margin-top: 80px;text-align: center; padding-bottom:150px}
 .cont01 ul::after{clear: both;content: '';display:block}
 .cont01 ul li{width:467px;text-align: center;margin: 4px;/*opacity: 0;*/display: inline-block;}
 .cont01 ul li a{display: block;}
 .cont01 ul li:nth-child(2){animation-delay:0.4s ;}
 .cont01 ul li:nth-child(3){animation-delay:0.8s ;}
 .cont01 ul li:nth-child(4){animation-delay:1.2s ;}
 .cont01 ul li:last-child{margin-right: 0;animation-delay:1.6s ;}
.cont01 .business_list span{display:inline-block;width:100%;}
 .cont01 .business_list span > img{width:100%;transition:all .3s linear; }
 .cont01 .business_list h5{color:#484848;font-weight: 700;font-size: 30px;margin-bottom: 5px;}
 .cont01 .business_list p{color:#484848;font-weight: 400;font-size: 18px;}
 .cont01 .business_list em{width:1px;height:34px;background: #008AB7;display:block;margin:20px auto 15px}
  .cont01 .business_list li{position:relative; overflow:hidden;}
 .cont01 .business_list li:hover h5{color:#0E3D8A ; overflow:hidden;} 
 .cont01 .business_list li:hover img{ transform:scale(1.1,1.1); }
 .cont01 .business_list li .dec{ position:absolute; left:10%;bottom:15%;  width:80%; line-height:80px; border-bottom:2px solid #fff; color:#fff;font-size:32px; text-align:left; font-weight:bold; }
/*글로벌 방위산업 프로바이더 퍼스텍 msec03*/
.cont02{  width:100%; height:1000px; position:relative;  background:#254165 url(/images/company_story.png) no-repeat center top; background-size: cover !important; padding-bottom:280px  }
.cont02 .dt{width:100%; position:absolute;left:0;top:-145px; text-align:center;}
.cont02 .dt .dt_tx01{font-size: 250px; font-weight:bold;color:#2f89c5; line-height:1; font-family: 'Montserrat', sans-serif;}
.cont02 .dt .dt_tx02{font-size: 65px; font-weight:700;color:#fff; line-height:1;  margin-top:200px;}
.cont02 .desc{position:relative;text-align:center; top:102%;transform:translateY(-50%);} 
.cont02 .desc .tx01{ font-size: 24px !important; font-weight:400; color:#fff; line-height:36px; letter-spacing:-1px;}
.cont02 .desc .tx02{ text-align:center; margin-top:50px;}
.cont02 .desc .tx03 .btn_m{ transition:all .5s linear; cursor:pointer;width:190px;height:40px;margin-top:50px;  border:0px; font-size:18px; font-weight:700;color:#fff; background:transparent; letter-spacing:-1px; } 
.cont02 .desc .tx03 .btn_m:hover{ }
.cont02 .desc .tx03 .btn_m span{transition:all .3s linear; display:inline-block;  width:20px; position:relative; vertical-align:top; }
.cont02 .desc .tx03 .btn_m:hover span{margin-left:5px;}
.cont02 .desc .tx03 .btn_m span:before{content:""; display:inline-block; width:60px; height:2px;background:#fff; position:absolute;left:9px;top: 9px; }
.cont02 .desc .tx03 .btn_m i{position:absolute;left:22px;top:5px;  }


/*Core Competence*/
.cont03{width:100%; height:720px; position:relative;  background:#254165;  }
.cont03 .dt{width:100%; position:absolute;left:0; text-align:left;}
.cont03 .dt .dt_tx01{font-size: 25px; font-weight:bold;color:#2f89c5; line-height:1; font-family: 'Montserrat', sans-serif;}
.cont03 .dt .dt_tx02{font-size: 55px; font-weight:700;color:#fff; line-height:72px;  margin-top:55px;}
.cont03 .desc{position:relative;text-align:center;/* top:102%;transform:translateY(-50%);*/ ;overflow:hidden; } 
.cont03 .desc img{ transition:all .3s linear;width:100%} 
.cont03 .desc:hover img{transform:scale(1.1,1.1);  }
.cont03 .desc .tx01{ font-size: 20px !important; font-weight:400; color:#fff; line-height:30px; letter-spacing:-2px;}
.cont03 .desc .tx02{ text-align:center; margin-top:50px;}
.cont03 .btn_m{ transition:all .5s linear; cursor:pointer;width:190px;height:40px;margin-top:50px;  border:0px; font-size:18px; font-weight:700;color:#fff; background:transparent; letter-spacing:-1px; margin-left:-17px } 
.cont03 .btn_m:hover{ }
.cont03 .btn_m span{transition:all .3s linear; display:inline-block;  width:56px; position:relative; vertical-align:top; }
.cont03 .btn_m:hover span{margin-left:5px;}
.cont03 .btn_m span:before{content:""; display:inline-block; width:60px; height:2px;background:#fff; position:absolute;left:9px;top: 9px; }
.cont03 .btn_m i{position:absolute;left:22px;top:5px;  }


/*recruit*/
.cont04{ width:100%; height:700px; position:relative;  background: url(/images/recruit.png) no-repeat center;padding:130px 0}
.cont04 .dt{width:100%; position:absolute;left:0; text-align:left; padding:104px 0px}
.cont04 .dt p{ float:left; display:block; margin:40px 100px 55px 0; }
.cont04 .dt .dt_tx01{font-size: 25px; font-weight:bold;color:#fff; line-height:1; font-family: 'Montserrat', sans-serif;; padding-left:800px}
.cont04 .dt .dt_tx02{font-size: 50px; font-weight:700;color:#fff; line-height:70px;  margin-top:25px;padding-left:800px}
.cont04 .desc{position:relative;text-align:center;/* top:102%;transform:translateY(-50%);*/} 
.cont04 .desc img{ width:100%} 
.cont04 .desc .tx01{ font-size: 20px !important; font-weight:400; color:#fff; line-height:30px; letter-spacing:-2px;}
.cont04 .desc .tx02{ text-align:center; margin-top:50px;}
.cont04 .btn_m{ transition:all .5s linear; cursor:pointer;width:190px;height:40px;margin:350px 0 -0 780px; right:0px;border:0px; font-size:18px; font-weight:700;color:#fff; background:transparent; letter-spacing:-1px; } 
.cont04 .btn_m:hover{ }
.cont04 .btn_m span{transition:all .3s linear; display:inline-block;  width:56px; position:relative; vertical-align:top; }
.cont04 .btn_m:hover span{margin-left:5px;}
.cont04 .btn_m span:before{content:""; display:inline-block; width:60px; height:2px;background:#fff; position:absolute;left:9px;top: 9px; }
.cont04 .btn_m i{position:absolute;left:22px;top:5px;  }
.cont04 .wid_left p{ text-align:center; color:#fff; margin-top:55px; display:block}
.cont04 .wid_left p img{ margin-bottom:20px; display:block}


/*sub********************************************/
.sub_con_wrap{ position:relative; padding: 230px 0 0; width:1435px; margin:0 auto}
.sub_con_wrap h2{ margin-bottom:60px; font-size: 25px; font-weight:bold;line-height:1; font-family: 'Montserrat', sans-serif; color:#2d3fa3;  letter-spacing:-1px}
.sub_con_wrap h3{ margin-bottom:60px; font-size: 50px; font-weight:bold;line-height:65px; color:#0c2340; letter-spacing:-2px}
.sub_con_wrap h4{ margin-bottom:30px; font-size: 30px; font-weight:bold;line-height:30px; color:#0c2340; }
.sub_con_wrap h5{ margin-bottom:30px; font-size: 40px; font-weight:bold;line-height:55px; color:#0c2340; }

.memu_wrap{height:66px; border-bottom:3px solid #2d3fa3; margin-bottom:112px}
.memu_wrap ul{}
.memu_wrap ul li {float:left;}
.memu_wrap ul li a{ display:block; padding:20px 50px; text-align:center; font-size:20px}
.memu_wrap a.on{ color:#2d3fa3 !important; font-weight:700;  border-top:3px solid #2d3fa3;  border-right:3px solid #2d3fa3 ;  border-left:3px solid #2d3fa3 ; border-bottom:4px solid #fff}
.memu_wrap a:hover{/*border-top:3px solid #2d3fa3;  border-right:3px solid #2d3fa3 ;  border-left:3px solid #2d3fa3 ; border-bottom:4px solid #fff*/}

.sub_title{ width:1435px; margin:0px auto; padding-top:300px; top:30%; transform:translateY(-50%); position:relative}
.sub_title div span{ color:#fff; font-size:60px; font-weight:700; border-bottom:3px solid #fff; padding-right:10px;padding-bottom:20px }
.sub_title_txt{ color:#cccfd3; font-size:20px; line-height:30px; font-weight:400; top:420px; position:absolute}
.main_tit{ text-align:center; padding-bottom:30px; font-size:9rem; font-weight:900; color:#fff; letter-spacing:-3px;/*text-shadow: -3px 3px #1e2965, 0 3px #1e2965, 3px 0 #1e2965, 0 -1px #1e2965;*/-webkit-text-stroke: 2px #1e2965;}

.sub_con_box{}

/*회사소개*/
.sub_banner01_01{position:relative; height:590px; background:url(../images/sub_banner01_01.jpg) no-repeat center top; background-size:cover; } 
.sub_banner01_02{position:relative; height:590px; background:url(../images/sub_banner01_02.jpg) no-repeat center top; background-size:cover; } 
.sub_banner01_03{position:relative; height:590px; background:url(../images/sub_banner01_03.jpg) no-repeat center top; background-size:cover; } 
.sub_banner01_04{position:relative; height:590px; background:url(../images/sub_banner01_04.jpg) no-repeat center top; background-size:cover; padding-top:675px; } 
.sub_banner01_05{position:relative; height:590px; background:url(../images/sub_banner01_05.jpg) no-repeat center top; background-size:cover; } 
.greetings_wrap{margin-top:120px;  padding:0px 90px 100px 250px; /*background:url(../images/greetings_bg.png) no-repeat right top;*/ letter-spacing:-1px}
.greetings_wrap .txt01{ display:block; font-size:22px; line-height:30px; font-weight:500; margin-bottom:40px}
.greetings_wrap .txt02{ risplay:block; font-size:18px; line-height:30px;margin-bottom:40px;font-weight:500; color:#545454}
.greetings_wrap .txt03{ display:block; /*padding-left:35px;*/ font-size:18px; line-height:30px; margin-bottom:40px;/* color:#1e2965;*/ color:#000;  font-weight:500;}
.greetings_wrap .txt04{ display:block; font-family:MapoAgape; position:absolute; width:1250px; margin-top:50px; line-height:30px; margin-bottom:40px; text-align:left; font-size:30px}
.greetings_wrap .txt04 img{ margin-left:25px}

/*회사소개-후성문화*/
.sub01_03 .con01{ overflow:hidden; height:2000px; padding-bottom:112px; /*margin-bottom:400px*/}
.sub01_03 .con01 h4{text-align:left}
.sub01_03 .con01 .txt01{font-size:40px; font-weight:700; line-height:55px; margin-bottom:40px; letter-spacing:-0.5px; color:#565656}
.sub01_03 .con01 .txt02{font-size:18px; font-weight:400; line-height:30px; margin-bottom:40px; letter-spacing:-0.5px;color:#565656}
.sub01_03 .con01 .box{text-align:center}
.sub01_03 .con01 .box .box01{ float:left; /*background:#f1f1f1;*/  border:1px solid #1e2965; margin-right:35px; width:450px;padding:80px 0; }
.sub01_03 .con01 .box .box02{ float:left; /*background:#f1f1f1;*/ border:1px solid #1e2965;  margin-right:35px;  width:450px; padding:80px 0; }
.sub01_03 .con01 .box .box03{ float:left; /*background:#f1f1f1;*/ border:1px solid #1e2965; width:450px; padding:80px 0; }
.sub01_03 .con01 .box .tit{ display:block; color:#2d3fa3; font-size:36px; margin-bottom:30px; font-weight:700}

.sub01_03 .con02{ position:absolute; width:100%; overflow:hidden; height:1140px; padding:112px 360px;  background : url(../images/about03_02_bg.png) no-repeat center top;/* background-size:cover;*/margin-top:-1250px; left:50%;transform:translateX(-50%);} 
.sub01_03 .con02 h4{text-align:left}
.sub01_03 .con02 .box p{display:block; float:left; width:308px; height:308px; color:#fff; border-radius:100%; background :#013161 url(../images/01-03_bar.png) no-repeat right top;  margin-right:114px; padding-top:106px}
.sub01_03 .con02 .box p:last-child{margin-right:0}
.sub01_03 .con02 .box{ overflow:hidden; width:1152px; margin:80px auto 120px; }
.sub01_03 .con02 .box .no{font-size:18px; font-weight:900; display:block; text-align:left; padding-left:80px; margin-bottom:15px}
.sub01_03 .con02 .box .tit{font-size:60px; font-weight:700; letter-spacing:-2px}
.sub01_03 .con02 .box .txt{font-size:18px; font-weight:500; margin-left:10px; }      
.sub01_03 .con02 .box2 .txt01{font-size:40px; font-weight:700; line-height:55px; margin-bottom:40px; letter-spacing:-0.5px; color:#565656}
.sub01_03 .con02 .box2 .txt02{font-size:18px; font-weight:400; line-height:30px; margin-bottom:40px; letter-spacing:-0.5px;color:#565656}
.symbol_wrap{overflow:hidden; padding-bottom:750px}
.symbol_wrap .symbol_box h6{ color:#2d3fa3; font-size:25px; font-weight:700; margin-bottom:40px}
.symbol_wrap .symbol_box{ clear:both;border:1px solid #ddd; padding:40px 100px; margin:60px 0 80px; height:230px; }
.symbol_wrap .symbol_box p{float:left; display:block}
.symbol_wrap .symbol_box p:nth-child(2) { padding-top:40px; margin-left:120px; text-align:left; font-size:18px; line-height:30px}

.sub01_03 .con02 .application_box{overflow:hidden;padding-bottom:80px}
.sub01_03 .con02 .application_box h6{ color:#2d3fa3; font-size:25px; font-weight:700; }
.symbol_wrap .application_box{ clear:both;margin:60px 0 80px; height:230px; padding-bottom:80px}
.symbol_wrap .application_box p{float:left; text-align:left; display:block; margin-right:40px}
.symbol_wrap .application_box p img{ margin-top:10px}
.symbol_wrap .application_box p:nth-child(3) {margin-right:0}
.symbol_wrap .application_btn{margin:0 auto; width:590px}
.symbol_wrap .application_btn p{ float:left; margin:0 4px; }
.symbol_wrap .application_btn a{ display:block; width:284px; height:51px; font-size:18px; background:#323276; color:#fff; line-height:51px}
.symbol_wrap .application_btn p img{padding-left:36px}

.sub01_03 .con03{position:absolute; width:100%; overflow:hidden; padding:80px 0; background:#f5f5f5; margin-top:-650px;left:50%;transform:translateX(-50%);}
.sub01_03 .con03 .box{ overflow:hidden; margin-bottom:70px; width:100%; clear:both}
.sub01_03 .con03 .txt01{float:left; width:350px; padding-left:80px; background:url(../images/sub_bar.png) no-repeat left 9px;  font-size: 24px; font-weight:bold;  letter-spacing:-2px; text-align:left}
.sub01_03 .con03 .txt02{float:left; font-size: 18px; color:#565656; font-weight:400; letter-spacing:-1px; line-height:30px;  text-align:left}
.sub01_03 .con03 .txt02 .tit{font-weight:500; }
.color_img, .color_01, .color_02{float:left; font-weight:400; line-height:30px; color:#999; text-align:left; padding-top:37px}
.color_01 span, .color_02 span{ display:block; font-weight:500; color:#000; }
.color_img{padding-left:350px}
.color_01{padding-left:55px; padding-top:50px}
.color_02{padding-left:55px; padding-top:50px}

/*후성문화 국내네트워크*/
.sub01_03 .map{ position:absolute; width:100%; overflow:hidden; height:800px;background : url(../images/img01_03_map.png) no-repeat center top;/*margin-top:-1220px;*/ left:50%;transform:translateX(-50%);}
.map_list{padding:60px; margin-top:880px}
.map_list .items{ float:left; width:31%; height:110px; margin-right:30px; margin-bottom:30px; border:1px solid #ddd; position:relative}
.map_list .items .imgs{ width:155px; height:108px; float:left; background-size:cover; background-position:center}
.map_list .items .desc{ float:left; padding:12px 10px 0 20px; text-align:left}
.map_list .items .tx01{ font-size:18px; color:#000; line-height:1.4; padding-bottom:5px; letter-spacing:-1px; font-weight:600:}
.map_list .items .tx02{ font-size:15px; color:#444; line-height:1.2; letter-spacing:-1px; word-break:keep-all; font-weight:300:}

/*비전/미션/목표*/
h5{ margin:50px 0; font-size: 40px; font-weight:bold;line-height:55px; color:#0c2340; text-align:center}
.mission_wrap{ overflow:hidden; padding-top:0px; text-align:center}
.mission_box{overflow:hidden; }
.mission_box .con_01{overflow:hidden; padding-bottom:110px}
.mission_box .box{ width:32%; height:500px; text-align:center; color:#fff; background:#2c4a68; padding:80px; margin-right:15px; float:left}
.mission_box .box:nth-child(2) { background:#0d3053; padding:80px 80px; }
.mission_box .box:nth-child(3) { margin-right:0px; padding:92px 80px}
.mission_box .box .img{ margin-bottom:40px}
.mission_box .box .img{}
.mission_box .box .txt01{font-size:22px;font-weight:700; margin-bottom:15px; letter-spacing:-2px}
.mission_box .box .txt02{font-size:36px;font-weight:700; margin-bottom:35px; letter-spacing:-2px}
.mission_box .box .txt03{font-size:18px;font-weight:400; line-height:30px;letter-spacing:-1px}
.goal_box{display:block; padding:40px; text-align:center; background:#0d3053; color:#fff; font-size:48px}
.goal_box .txt01{ display:block; font-weight:400;font-size:40px; /*background : url(../images/down_arrow.png) no-repeat center top;*/ padding-top:30px; }
.goal_box .txt02{ display:block; font-weight:700; border-bottom:1px solid #aaa; padding-bottom:30px; }

/*연혁*/
.sub01_05{/*padding-top:245px*/}
.history_con{ /*border-bottom:4px solid #949494*/}
.sub01_05 .main_tit{padding-bottom:80px}
.history .subtit{text-align:center; background:#1e2965; display:block; color:#fff; font-size:30px; line-height:34px; font-weight:700; width:165px; height:165px; margin:0 auto; padding-top:70px; border-radius:100%}
.history .subtit_line{text-align:center; background:#fff; display:block; color:#1e2965; font-size:30px; line-height:34px; font-weight:700; width:165px; height:165px; margin:0 auto;line-height:165px; border:1px solid #1e2965; border-radius:100%}

.history_con h4 .hi_top_txt {width:379px; height:54px; transform: translate(-33px, -2px); -webkit-transform: translate(-33px, -2px); -moz-transform: translate(-33px, -2px); -ms-transform: translate(-33px, -2px); -o-transform: translate(-33px, -2px); margin: 0 auto;}
.history_con h4 .hi_top_txt > img {width:100%; max-width:100%;}
.history_con .history_flow {position:relative; /*margin: 0px 0px; padding-bottom:30px;*/}
.history_con .history_flow:before {content:''; position:absolute; top:0; left:50%; width:1px; height:100%; background-color:#c7c7c7}
.history_con .history_flow > div {position:relative; width:100%;}
.history_con .history_flow > div:first-child {padding-top:60px;}
.history_con .history_flow > div:last-child {padding-bottom:60px;}
.history_con .history_flow > div:after {display:block; content:''; clear:both;}
.history_con .history_flow > div dl {position:relative; font-size:18px; color:#222;}
.history_con .history_flow > div:first-child dl {margin-top:0;}
.history_con .history_flow > div dl.circle_pt:before {content:''; position:absolute; top: 13px; width:8px; height:8px; border-radius:50%; background: #1e2965}
.history_con .history_flow > div dl.circle_pt_n:before {content: none}
.history_con .history_flow > div dl.circle_ptt:before {content:''; position:absolute; top: 13px; width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid #1e2965; }
.history_con .history_flow .hi_rgt dl.circle_ptt:before {left:-7px}
.history_con .history_flow .hi_lft dl.circle_ptt:before {right:-7px}
.history_con .history_flow .hi_lft dl {float:left; width:50%; margin-top: 30px; font-size: 18px;}
.history_con .history_flow .hi_lft dl.circle_pt:before, .history_con .history_flow .hi_lft dl.circle_pt:after {right:-5px;}

.history_con .history_flow > div dl > dd {letter-spacing:-0.01em; font-weight:300; margin-bottom:0px; line-height:180%}
.history_con .history_flow > div dl > dd > span { color:#5c5c5c; font-size:20px; margin-top:40px; font-weight:700; line-height: 20px; margin-bottom:20px; }
.history_con .history_flow .hi_lft  span {margin-left:27px}
.history_con .history_flow .hi_rgt span {margin-right:27px}

.history_con .history_flow > div dl > dt:first-child {margin-top:0;}
.history_con .history_flow dl dd img {margin-top:10px;}
.history_con .history_flow .hi_lft dl {padding-right:50px; text-align:right; padding-right:40px}
.history_con .history_flow .hi_lft dl dd:after {right:80px;}
.history_con .history_flow .hi_rgt .circle_pt {background: url("../images/history_line.jpg") no-repeat 10px  12px; }
.history_con .history_flow .hi_lft .circle_pt {background: url("../images/history_line.jpg") no-repeat 510px  12px; }
.history_con .history_flow .hi_rgt dl {float:right; width:50%; margin-top:30px; padding-left:40px;}
.history_con .history_flow .hi_rgt dl:before,
.history_con .history_flow .hi_rgt dl:after {left:-4px;}
.history_con .history_flow .hi_rgt dl dd {padding-left:0; text-align:left;}
.history_con .history_flow .hi_rgt dl dd:after {left:80px;}

.t2021{background: url("/images/t2021.png") no-repeat 150px 50px}
.t2011{background: url("/images/t2011.png") no-repeat 850px 50px}
.t2001{background: url("/images/t2001.png") no-repeat 50px 50px}
.t1975{background: url("/images/t1975.png") no-repeat 850px 50px}

.c_none{ content: none;}/*
@media(max-width:1460px) {
    .history_con .history_topban .hi_top_txt {height:auto; padding:4%; background-size:cover;}
}
@media(max-width:1357px) { }

@media(max-width:1160px) {
	.flow_bg01, .flow_bg02, .flow_bg03{background: none}
    .history_con .history_topban .hi_top_txt {padding:4% 4% 15%; background-position:90%;}
    .history_con .history_topban .hi_top_txt > h4 {font-size:2rem; line-height:48px;}
    .history_con .history_flow:before {left:20px;}
    .history_con .history_flow .hi_rgt dl {width:100%; padding:0 0 0 70px;}
    .history_con .history_flow .hi_lft dl:before, .history_con .history_flow .hi_lft dl:after {left:13px; right:0;}
    .history_con .history_flow .hi_rgt dl:before, .history_con .history_flow .hi_rgt dl:after {left:15px;}
    .history_con .history_flow > div dl:before {top:7px; width:20px; height:20px; border:10px solid #349b7d;}
    .history_con .history_flow > div dl > dd span {margin-top:60px;}
    .history_con .history_flow .hi_lft dl {width:100%; padding:0 0 0 70px; text-align:left;}
}
@media(max-width:767px) {
    .history_con .history_topban .hi_top_txt {padding:4% 4% 25%; background-position:90%;}
    .history_con .history_topban .hi_top_txt > h4 {font-size:1rem; line-height:24px;}
    .history_con .history_flow:before {left:10px;}
    .history_con .history_flow .hi_lft dl:before, .history_con .history_flow .hi_lft dl:after {left:3px; right:0;}
    .history_con .history_flow .hi_rgt dl:before, .history_con .history_flow .hi_rgt dl:after {left:5px;}
    .history_con .history_flow .hi_rgt dl {width:100%; padding:0 0 0 35px; margin-top:30px}
    .history_con .history_flow > div dl:before {top:2px; width:10px; height:10px; border:5px solid #349b7d;}
    .history_con .history_flow > div dl > dd span {margin-top:30px; font-size:0.875rem; line-height:19px;}
    .history_con .history_flow{padding-bottom:50px}
	.history_con .history_flow > div dl > dd {margin-top:13px; font-size:0.8125rem; line-height:19px; margin-bottom:0}
   .history_con .history_flow .hi_rgt .circle_pt{background: none}
   .history_con .history_flow .hi_lft dl {padding:0 0 0 35px;}
}
@media(max-width:560px) {
    .history_con .history_flow > div dl > dd > span {margin-bottom:5px;}
}
*/

/*사업분야*/
.sub_banner02_01{position:relative; height:590px; background:url(../images/sub_banner02_01.jpg) no-repeat center top; background-size:cover; } 
.sub_banner02_02{position:relative; height:590px; background:url(../images/sub_banner02_02.jpg) no-repeat center top; background-size:cover; } 
.sub_banner02_03{position:relative; height:590px; background:url(../images/sub_banner02_03.jpg) no-repeat center top; background-size:cover; } 
.sub_banner02_04{position:relative; height:590px; background:url(../images/sub_banner02_04.jpg) no-repeat center top; background-size:cover; } 
.sub_banner02_05{position:relative; height:590px; background:url(../images/sub_banner02_05.jpg) no-repeat center top; background-size:cover; } 
.area_box{display:block;  float:left; margin-right:48px; margin-bottom:77px  }
.area_box:nth-child(3),.area_box:nth-child(6), .area_box:nth-child(9){margin-right:0px}
.area_box .img{margin-bottom:40px}
.area_box .txt01{ text-align:left; margin-bottom:25px !important; font-size:22px; font-weight:700; color:#0c2340;}
.area_box .txt02{ text-align:left;display:block; height:120px; border-bottom:1px solid #ccc; font-size:18px; font-weight:400; color:#5c5c5c; line-height:30px; padding-bottom:30px; letter-spacing:-1px}
.area_box .txt03{text-align:left; font-size:18px; font-weight:400; color:#5c5c5c; line-height:30px;padding-top:20px}
		.tab_wrap{display: grid;grid-template-rows: 40px auto 40px;}
        .tab_wrap .tab_menu{display:flex;width: 100%;height: 65px;margin:0 auto; border-bottom:1px solid #cccccc;}
        .tab_wrap .tab_menu li{display:flex;justify-content:space-around;align-items: center;cursor:pointer;font-size:22px; font-weight:700; color:#393939; padding:30px 0; margin:0 30px; letter-spacing:-1px}
        .tab_wrap .tab_menu li.on{/*color: #0031b6;*/border-bottom:4px solid #2d3fa3; padding:30px 0px ; }
        .tab_wrap .tab_cont{width: 100%;margin:120px auto 0;text-align: center;background: #fff; box-sizing: border-box;}
        .tab_wrap .tab_cont > div{display:none;}
        .tab_wrap .tab_cont > div.on{display:block;}
/*핵심역량 - 개발능력*/
.sub_banner03_01{ position:relative; height:590px; background:url(../img/core01.jpg) no-repeat center top; background-size:cover; }
.core02_con01{width:100%; overflow:hidden; margin:0 0 30px}
.core02_con01 .con_tit{ float:left; width:25%; font-size:24px; line-height:30px; font-weight:bold; letter-spacing:-2px; text-align:left; }
.core02_con01 .con_tit span {font-size:16px; letter-spacing:-0.5px }
.core02_con01 .con_txt{ float:left; width:75%; background:#f1f1f1; padding:45px; font-size:18px;  line-height:30px;}
.core02_con01 .con_txt .f_left{float:left; }
.core02_con01 .con_txt .f_right{float:right; }

/*핵심역량 - 시험평가능력*/
.sub_banner03_03{position:relative; height:590px; background:url(../img/core03.jpg) no-repeat center top; background-size:cover; }
.sub03_03_100{ width:100%; overflow:hidden; background:#eaeef2; padding:135px 0}
.sub03_03_100 h4{ margin-bottom:30px; font-size: 30px; font-weight:bold;line-height:30px; color:#0c2340; }
.sub03_03_100 .box{ width:100%; height:200px; background:url(/images/core_line.png) repeat-x center center; }
.sub03_03_100 .box p{ display:block; float:left; width:165px; height:165px; border-radius:100%; background:#013161; color:#fff; font-weight:600; padding-top: 60px; font-size:24px; line-height:30px; margin:15px 8px 15px 8px}
.sub03_03_100 .box p:first-child{margin-left:0 !important; }
.sub03_03_100 .box p:last-child{ margin-right:0 !important;}
.sub03_03 .img p{float:left; width:49%; margin:80px 0.5% 0}

/*핵심역량-인증현황*/
.sub_banner03_04{ position:relative; height:590px; background:url(../img/core01.jpg) repeat-x center top; background-size:cover; }
.sub03_04{ }
.sub03_04 .list_img{ padding-top:100px}
.sub03_04 .list_img li{ font-size:20px; line-height:26px; font-weight:700; float:left; text-align:center; margin:0px 86px 70px;}
.sub03_04 .list_img li:nth-child(3n+1){clear:both;}
.sub03_04 .list_img li img{ border:1px solid #ddd; margin-bottom:35px; box-shadow: 10px 10px 10px rgba(0,0,0,0.1)}
.sub03_04 .list_img li img:hover{border:1px solid #1e2965 }

/*윤리경영_윤리강령*/
.ethics_wrap{ margin-top:100px; text-align:left; letter-spacing:-1px}
.ethics_wrap h6{ font-size:30px; font-weight:700; color:#0c2340; margin-bottom:22px; color:#0c2340}
.ethics_wrap .tit{ font-size:18px; color:#565656; line-height:30px; padding-top:0}
.ethics_wrap .ethics_box{ width:100%; border-top:3px solid #0c2340; border-bottom:1px solid #3d3d3d}
.ethics_wrap .ethics_box th, .ethics_wrap .ethics_box td{padding:25px;  font-size:18px; line-height:30px}
.ethics_wrap .ethics_box th{  font-size:18px; font-weight:700}
.ethics_wrap .ethics_box th span{color:#2d3fa3}
.ethics_wrap .ethics_box td{ color:#545454;}
.ethics_wrap .box_top {padding-top:50px !important}
.ethics_wrap .box_bottom {padding-bottom:50px !important}

/*윤리경영_부정제보*/
.ethical04 .con_02{ overflow:hidden;margin:90px 0 112px; border-top:3px solid #000000; border-bottom:1px solid #3c3c3c; width:1430px; margin-left:auto; margin-right:auto; padding:50px 0}
.ethical04 .con_02 .box{ overflow:hidden;margin-bottom:70px; width:100%; clear:both; text-align:left}
.ethical04 .con_02 .txt01{float:left; width:300px; padding-left:80px; background:url(../images/sub_bar.png) no-repeat left 9px;  font-size: 24px; font-weight:bold;  letter-spacing:-2px; }
.ethical04 .con_02 .txt02{float:left; font-size: 18px; color:#565656; font-weight:400; letter-spacing:-1px; line-height:30px; }
.ethical04 .con_02 .txt02 .tit{font-weight:500; color:#2d3fa3}
.box .boxs{ display:block; width:25%; height:80px; border:1px solid #ddd; border-radius:7px; float:left; padding:15px 43px; margin:5px; line-height:20px}
.box .boxs:nth-child(6) { margin-left:304px}
.box .boxs .img{ margin-right:10px; display:block; float:left;width:25%;}
.box .boxs .txt{  display:block; float:left; width:67%; line-height:49px}


.ethical04 h1 { font-size:40px; padding-top:20px; font-weight:bold; }
.ethical04 ul { margin-top:50px; width:1026px;margin-left:250px;  /*margin-right:auto; */ }
.ethical04 .name { margin-top:80px; }
.ethical04 .name h2 { padding-bottom:20px; }
.ethical04 .name strong { font-weight:bold; font-size:18px; }
.ethical04 .name p { font-size:19px; font-weight:400; }
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input { border:1px solid #111; background:#fff; border-radius:0px; color:#999; padding-left:30px; }
#footer { clear:both; }
#bo_w .bo_w_flie .frm_file { float:left; }
#bo_w .bo_w_flie .file_wr { border:1px solid #EDF1F4; position:relative; top:6px; }

/*인재체용-인재상*/
.sub_banner06_01{position:relative; height:590px; background:url(../images/sub_banner06_01.jpg) no-repeat center top; background-size:cover; } 
.sub06_01 .con_01{overflow:hidden; padding-bottom:110px}
.sub06_01 .con_01 .box{ width:32%; height:530px; text-align:center; color:#fff; background:#2c4a68; padding:80px 0; margin-right:15px; float:left}
.sub06_01 .con_01 .box:nth-child(3) { background:#0d3053; }
.sub06_01 .con_01 .box:nth-child(4) { margin-right:0px; }
.sub06_01 .con_01 .box .img{ margin-bottom:40px}
.sub06_01 .con_01 .box .txt01{font-size:22px;font-weight:700; margin-bottom:15px; letter-spacing:-2px}
.sub06_01 .con_01 .box .txt02{font-size:36px;font-weight:700; margin-bottom:35px; letter-spacing:-2px}
.sub06_01 .con_01 .box .txt03{font-size:18px;font-weight:400; line-height:30px;letter-spacing:-1px}

.sub06_01 .con_02{overflow:hidden;}
.sub06_01 .con_02 .box{ overflow:hidden; margin-bottom:70px; width:100%; clear:both}
.sub06_01 .con_02 .txt01{float:left; width:300px; padding-left:80px; background:url(../images/sub_bar.png) no-repeat left 9px;  font-size: 24px; font-weight:bold;  letter-spacing:-2px}
.sub06_01 .con_02 .txt02{float:left; font-size: 18px; color:#565656; font-weight:400; letter-spacing:-1px; line-height:30px; }
.sub06_01 .con_02 .txt02 .tit{font-weight:500; }


.sub06_02 .con_01{overflow:hidden; /*padding-bottom:110px*/}
.sub06_02 .con_01 .tit_sub{ font-size:18px; line-height:30px; font-weight:400}
.sub06_02 .con_01 .box{ text-align:center; color:#fff; background:#2c4a68; padding:120px 0 0; float:left; border-radius:100%; width:350px; height:350px; margin:100px 4%}
.sub06_02 .con_01 .box .img{ margin-bottom:40px}
.sub06_02 .con_01 .box .txt01{font-size:22px;font-weight:700; margin-bottom:15px; letter-spacing:-2px}
.sub06_02 .con_01 .box .txt02{font-size:36px;font-weight:700; margin-bottom:35px; letter-spacing:-2px}
.sub06_02 .con_01 .box .txt03{font-size:18px;font-weight:400; line-height:30px;letter-spacing:-1px}

.sub06_02 .con_02{overflow:hidden; /*padding-bottom:110px*/}
.sub06_02 .icon_box{border-top:6px solid #323276; border-right:1px solid  #999; float:left; width:25%; background:url(../images/0602_01button.png) no-repeat center 7px; padding:90px 0 60px;}
.sub06_02 .icon_box:nth-child(4n) { margin-right:0px; }
.sub06_02 .img{ text-align:center; height:80px; margin-bottom:20px}
.sub06_02 .txt03{text-align:center}

.sub06_02 .con_03{overflow:hidden; padding-bottom:110px}
.sub06_02 .con_03 .box{ overflow:hidden; margin-bottom:70px; width:100%; clear:both}
.sub06_02 .con_03 .txt01{float:left; width:300px; padding-left:80px; background:url(../images/sub_bar.png) no-repeat left 9px;  font-size: 24px; font-weight:bold;  letter-spacing:-2px}
.sub06_02 .con_03 .txt02{float:left; width:79%; font-size: 18px; color:#565656; font-weight:400; letter-spacing:-1px; line-height:30px; }
.sub06_02 .con_03 .txt02 .tit{font-weight:500; }


.sub06_03 .con_01{overflow:hidden;/*padding-bottom:110px*/}
.sub06_03 .con_01 .tit_sub{ font-size:18px; line-height:30px; font-weight:500; color:#555;  letter-spacing:-1px}
.sub06_03 .con_01 .font22{ font-size:22px; font-weight:700;  letter-spacing:-1px}
.sub06_03 .con_01 .box{ text-align:center; color:#fff; background:#2c4a68; padding:85px 0 0; float:left; border-radius:100%; width:305px; height:305px; margin:100px 0}
.sub06_03 .con_01 .box .img{ margin-bottom:40px}
.sub06_03 .con_01 .box .txt01{font-size:22px;font-weight:700; margin-bottom:10px; letter-spacing:-2px}
.sub06_03 .con_01 .box .txt02{font-size:36px;font-weight:700; margin-bottom:20px; letter-spacing:-2px}
.sub06_03 .con_01 .box .txt03{font-size:18px;font-weight:400; line-height:30px;letter-spacing:-1px}
.arrow{ display:block; width:70px;float:left; height:500px; background:url(/images/right.png) no-repeat center center;}


/* 게시판 목록 검색 */
.form{ border:20px solid #eaeef2; padding:20px; width:94.5%; margin-bottom:30px;}
form {}
.form_select {display:inline-block; position:relative; width:195px; height:30px; color:#333; z-index:1; float:left}
.form_select:before {background-color:#fff; position:absolute; top:0; left:0; width:100%; height:100%; content:''; z-index:-1}
.form_select select {background-color:transparent; height:30px; padding:0 3rem 0 1rem; border-left:1px solid #a5a5a5; vertical-align:top; -webkit-transition:all 0.2s; transition:all 0.2s}


.form input{  height:30px; width:80%;  border-left:1px solid #a5a5a5; border-top:0; border-right:0; border-bottom:0; padding-left:30px}
.form select{ width:90%; height:30px; border:0;padding-right::17px}
.form select, .form input{font-size:20px; font-weight:400}

.board_list{overflow:hidden; padding-bottom:75px}
.board_list .board_con{ float:left; border:1px solid #c6c6c6; padding:40px; display:block; margin-right:45px; margin-bottom:45px; width:25.5%}
.board_list .board_con:nth-of-type(3), .board_list .board_con:nth-of-type(6), .board_list .board_con:nth-of-type(9){margin-right:0px; }
.board_list .board_con .board_c{ font-size:18px; color:#283b95; font-weight:700; margin-bottom:15px}
.board_list .board_con .board_t{ font-size:22px; color:#0c2340; margin-bottom:45px; line-height:30px}
.board_list .board_con .board_d{ font-size:18px; color:#777} 

.board_list .board_con01 .board_c{ font-size:18px; color:#283b95; font-weight:700; margin-bottom:15px}
.board_list .board_con01 .board_t{ font-size:22px; color:#0c2340; margin-bottom:45px; line-height:30px}
.board_list .board_con01 .board_d{ font-size:18px; color:#777} 

.board_pager{position:absolute; left:50%; transform:translateX(-50%); }
.board_pager a{ display:inline-block; width:3rem; height:3rem; border:1px solid #ddd; margin:6px; font-size:18px; text-align:center; line-height:3rem}
.board_pager .group .active{ background:#0d3053; font-weight:bold; color:#fff !important}


/*공통*/
.text_left{text-align:left}
.text_center{text-align:center}
.text_right{text-align:right}

/*애니메이션*/
@charset "UTF-8";
body { -webkit-backface-visibility: hidden;}
.hidden_dv{ opacity: 0;}
.visible_dv{ opacity: 1;}

.animated {
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
		  animation-delay: 0.3s;
}

.animated.time1 {
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}
.animated.time11 {
  -webkit-animation-duration: 1.2s;
     -moz-animation-duration: 1.2s;
       -o-animation-duration: 1.2s;
          animation-duration: 1.2s;
}

.animated.time2 {
  -webkit-animation-duration: 1.5s;
     -moz-animation-duration: 1.5s;
       -o-animation-duration: 1.5s;
          animation-duration: 1.5s;
}
.animated.time21 {
  -webkit-animation-duration: 1.8s;
     -moz-animation-duration: 1.8s;
       -o-animation-duration: 1.8s;
          animation-duration: 1.8s;
}

.animated.time3 {
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
}
.animated.time4 {
  -webkit-animation-duration: 2.3s;
     -moz-animation-duration: 2.3s;
       -o-animation-duration: 2.3s;
          animation-duration: 2.3s;
}
.animated.time41 {
  -webkit-animation-duration: 2.6s;
     -moz-animation-duration: 2.6s;
       -o-animation-duration: 2.6s;
          animation-duration: 2.6s;
}
.animated.time42 {
  -webkit-animation-duration: 2.8s;
     -moz-animation-duration: 2.8s;
       -o-animation-duration: 2.8s;
          animation-duration: 2.8s;
}


.animated.time5 {
  -webkit-animation-duration: 4s;
     -moz-animation-duration: 4s;
       -o-animation-duration: 4s;
          animation-duration: 4s;
}


.animated.time6 {
  -webkit-animation-duration: 5s;
     -moz-animation-duration: 5s;
       -o-animation-duration: 5s;
          animation-duration: 5s;
}

.animated.time7 {
  -webkit-animation-duration: 6s;
     -moz-animation-duration: 6s;
       -o-animation-duration: 6s;
          animation-duration: 6s;
}




@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}

.animated.flash {
  -webkit-animation-name: flash;
  -moz-animation-name: flash;
  -o-animation-name: flash;
  animation-name: flash;
}
@-webkit-keyframes shake {
  0%, 100% {-webkit-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
  20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
  0%, 100% {-moz-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
  20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
  0%, 100% {-o-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
  20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.animated.shake {
  -webkit-animation-name: shake;
  -moz-animation-name: shake;
  -o-animation-name: shake;
  animation-name: shake;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
  40% {-webkit-transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
  40% {-moz-transform: translateY(-30px);}
  60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
  40% {-o-transform: translateY(-30px);}
  60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}

.animated.bounce {
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
}
@-webkit-keyframes tada {
  0% {-webkit-transform: scale(1);}
  10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
  100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
  0% {-moz-transform: scale(1);}
  10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
  100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
  0% {-o-transform: scale(1);}
  10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
  100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  100% {transform: scale(1) rotate(0);}
}

.animated.tada {
  -webkit-animation-name: tada;
  -moz-animation-name: tada;
  -o-animation-name: tada;
  animation-name: tada;
}
@-webkit-keyframes swing {
  20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
  20% { -webkit-transform: rotate(15deg); }
  40% { -webkit-transform: rotate(-10deg); }
  60% { -webkit-transform: rotate(5deg); }
  80% { -webkit-transform: rotate(-5deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
  20% { -moz-transform: rotate(15deg); }
  40% { -moz-transform: rotate(-10deg); }
  60% { -moz-transform: rotate(5deg); }
  80% { -moz-transform: rotate(-5deg); }
  100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes swing {
  20% { -o-transform: rotate(15deg); }
  40% { -o-transform: rotate(-10deg); }
  60% { -o-transform: rotate(5deg); }
  80% { -o-transform: rotate(-5deg); }
  100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.animated.swing {
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  -moz-animation-name: swing;
  -o-animation-name: swing;
  animation-name: swing;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}

@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.animated.wobble {
  -webkit-animation-name: wobble;
  -moz-animation-name: wobble;
  -o-animation-name: wobble;
  animation-name: wobble;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
  50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); opacity:0.1; color:#ddd;  }

    100% { transform: scale(1);opacity:1;color:#000;  }
}

.animated.pulse {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -o-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}
@-moz-keyframes flip {
  0% {
    -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -moz-animation-timing-function: ease-out;
  }
  40% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -moz-animation-timing-function: ease-out;
  }
  50% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -moz-animation-timing-function: ease-in;
  }
  80% {
    -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -moz-animation-timing-function: ease-in;
  }
  100% {
    -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -moz-animation-timing-function: ease-in;
  }
}
@-o-keyframes flip {
  0% {
    -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -o-animation-timing-function: ease-out;
  }
  40% {
    -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -o-animation-timing-function: ease-out;
  }
  50% {
    -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -o-animation-timing-function: ease-in;
  }
  80% {
    -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -o-animation-timing-function: ease-in;
  }
  100% {
    -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -o-animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flip;
  -o-backface-visibility: visible !important;
  -o-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.animated.flipInX {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipInX;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
  100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
  100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
  100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
  100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.animated.flipOutX {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -moz-animation-name: flipOutX;
  -moz-backface-visibility: visible !important;
  -o-animation-name: flipOutX;
  -o-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.animated.flipInY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipInY;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipInY;
  backface-visibility: visible !important;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
  100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@-moz-keyframes flipOutY {
    0% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
  100% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@-o-keyframes flipOutY {
    0% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
  100% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
  100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}

.animated.flipOutY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipOutY;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipOutY;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-o-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  
  100% {opacity: 1;}
}

.animated.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70px);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(70px);
  }
 
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(70px);
  }
 
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }
 
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
  transition-timing-function: ease;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated.fadeInRight {
  -webkit-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  -moz-animation-name: fadeInUpBig;
  -o-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  -moz-animation-name: fadeInDownBig;
  -o-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  -moz-animation-name: fadeInLeftBig;
  -o-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@-o-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  -moz-animation-name: fadeInRightBig;
  -o-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.animated.fadeOut {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -o-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
}
@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
}
@-o-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.animated.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  -o-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
}

@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
}

@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.animated.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -o-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
}

@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
}

@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.animated.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
}

@-moz-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }
}

@-o-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.animated.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  -moz-animation-name: fadeOutRight;
  -o-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}

@-moz-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}

@-o-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.animated.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  -moz-animation-name: fadeOutUpBig;
  -o-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}

@-moz-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
}

@-o-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.animated.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  -moz-animation-name: fadeOutDownBig;
  -o-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}

@-moz-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}

@-o-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.animated.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  -moz-animation-name: fadeOutLeftBig;
  -o-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@-moz-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}
@-o-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.animated.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  -moz-animation-name: fadeOutRightBig;
  -o-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -moz-transform: scale(1.05);
  }

  70% {
    -moz-transform: scale(.9);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -o-transform: scale(1.05);
  }

  70% {
    -o-transform: scale(.9);
  }

  100% {
    -o-transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    transform: scale(0.4);
  }

  70% {
    transform: scale(.99);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slideInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes slideInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  -moz-animation-name: slideInDown;
  -o-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes slideInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-o-keyframes slideInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  -moz-animation-name: slideInLeft;
  -o-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes slideInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-o-keyframes slideInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  -moz-animation-name: slideInRight;
  -o-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}

@-moz-keyframes slideOutLeft {
  0% {
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}

@-o-keyframes slideOutLeft {
  0% {
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  -moz-animation-name: slideOutLeft;
  -o-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}

@-moz-keyframes slideOutRight {
  0% {
    -moz-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}

@-o-keyframes slideOutRight {
  0% {
    -o-transform: translateX(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  -moz-animation-name: slideOutRight;
  -o-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}

@-moz-keyframes slideOutUp {
  0% {
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}

@-o-keyframes slideOutUp {
  0% {
    -o-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  -moz-animation-name: slideOutUp;
  -o-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInUp2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }

  60% {
   // opacity: 1;
    //-webkit-transform: translateY(50px);
  }

  80% {
    opacity: 1;    
    -webkit-transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes bounceInUp2 {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }

  60% {
 //   opacity: 1;
   // -moz-transform: translateY(10px);
  }

  80% {
        opacity: 1;
    -moz-transform: translateY(10px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes bounceInUp2 {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }

  60% {
  //  opacity: 1;
    //-o-transform: translateY(10px);
  }

  80% {
        opacity: 1;
    -o-transform: translateY(10px);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes bounceInUp2 {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  60% {
   // opacity: 1;
   // transform: translateY(10px);
  }

  80% {
      opacity: 1;
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.bounceInUp2 {
  -webkit-animation-name: bounceInUp2;
  -moz-animation-name: bounceInUp2;
  -o-animation-name: bounceInUp2;
  animation-name: bounceInUp2;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes bounceInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -moz-transform: translateY(-30px);
  }

  80% {
    -moz-transform: translateY(10px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes bounceInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -o-transform: translateY(-30px);
  }

  80% {
    -o-transform: translateY(10px);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(-30px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.bounceInUp {
  -webkit-animation-name: bounceInUp;
  -moz-animation-name: bounceInUp;
  -o-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -moz-transform: translateY(30px);
  }

  80% {
    -moz-transform: translateY(-10px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -o-transform: translateY(30px);
  }

  80% {
    -o-transform: translateY(-10px);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -moz-transform: translateX(30px);
  }

  80% {
    -moz-transform: translateX(-10px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-o-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -o-transform: translateX(30px);
  }

  80% {
    -o-transform: translateX(-10px);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(30px);
  }

  80% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
  }
}

.animated.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  -moz-animation-name: bounceInLeft;
  -o-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes bounceInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -moz-transform: translateX(-30px);
  }

  80% {
    -moz-transform: translateX(10px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-o-keyframes bounceInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -o-transform: translateX(-30px);
  }

  80% {
    -o-transform: translateX(10px);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(-30px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

.animated.bounceInRight {
  -webkit-animation-name: bounceInRight;
  -moz-animation-name: bounceInRight;
  -o-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }
}

@-moz-keyframes bounceOut {
  0% {
    -moz-transform: scale(1);
  }

  25% {
    -moz-transform: scale(.95);
  }

  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -moz-transform: scale(.3);
  }
}

@-o-keyframes bounceOut {
  0% {
    -o-transform: scale(1);
  }

  25% {
    -o-transform: scale(.95);
  }

  50% {
    opacity: 1;
    -o-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -o-transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(.3);
  }
}

.animated.bounceOut {
  -webkit-animation-name: bounceOut;
  -moz-animation-name: bounceOut;
  -o-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}

@-moz-keyframes bounceOutUp {
  0% {
    -moz-transform: translateY(0);
  }

  20% {
    opacity: 1;
    -moz-transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}

@-o-keyframes bounceOutUp {
  0% {
    -o-transform: translateY(0);
  }

  20% {
    opacity: 1;
    -o-transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.animated.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  -moz-animation-name: bounceOutUp;
  -o-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}

@-moz-keyframes bounceOutDown {
  0% {
    -moz-transform: translateY(0);
  }

  20% {
    opacity: 1;
    -moz-transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
}

@-o-keyframes bounceOutDown {
  0% {
    -o-transform: translateY(0);
  }

  20% {
    opacity: 1;
    -o-transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.animated.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  -moz-animation-name: bounceOutDown;
  -o-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}

@-moz-keyframes bounceOutLeft {
  0% {
    -moz-transform: translateX(0);
  }

  20% {
    opacity: 1;
    -moz-transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}

@-o-keyframes bounceOutLeft {
  0% {
    -o-transform: translateX(0);
  }

  20% {
    opacity: 1;
    -o-transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.animated.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  -moz-animation-name: bounceOutLeft;
  -o-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}

@-moz-keyframes bounceOutRight {
  0% {
    -moz-transform: translateX(0);
  }

  20% {
    opacity: 1;
    -moz-transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}

@-o-keyframes bounceOutRight {
  0% {
    -o-transform: translateX(0);
  }

  20% {
    opacity: 1;
    -o-transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.animated.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  -moz-animation-name: bounceOutRight;
  -o-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}
@-o-keyframes rotateIn {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}

.animated.rotateIn {
  -webkit-animation-name: rotateIn;
  -moz-animation-name: rotateIn;
  -o-animation-name: rotateIn;
  animation-name: rotateIn;
}
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@-moz-keyframes rotateInUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}

@-o-keyframes rotateInUpLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.animated.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  -moz-animation-name: rotateInUpLeft;
  -o-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@-moz-keyframes rotateInDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}

@-o-keyframes rotateInDownLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.animated.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  -moz-animation-name: rotateInDownLeft;
  -o-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@-moz-keyframes rotateInUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}

@-o-keyframes rotateInUpRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.animated.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  -moz-animation-name: rotateInUpRight;
  -o-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@-moz-keyframes rotateInDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}

@-o-keyframes rotateInDownRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.animated.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  -moz-animation-name: rotateInDownRight;
  -o-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
  }
}

@-moz-keyframes rotateOut {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(200deg);
    opacity: 0;
  }
}

@-o-keyframes rotateOut {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}

.animated.rotateOut {
  -webkit-animation-name: rotateOut;
  -moz-animation-name: rotateOut;
  -o-animation-name: rotateOut;
  animation-name: rotateOut;
}
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-moz-keyframes rotateOutUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-o-keyframes rotateOutUpLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.animated.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  -moz-animation-name: rotateOutUpLeft;
  -o-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@-moz-keyframes rotateOutDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
}

@-o-keyframes rotateOutDownLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}

.animated.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  -moz-animation-name: rotateOutDownLeft;
  -o-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@-moz-keyframes rotateOutUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
}

@-o-keyframes rotateOutUpRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}

.animated.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  -moz-animation-name: rotateOutUpRight;
  -o-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}
@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-moz-keyframes rotateOutDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-o-keyframes rotateOutDownRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.animated.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  -moz-animation-name: rotateOutDownRight;
  -o-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}
@-webkit-keyframes hinge {
  0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
  20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
  40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
  80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
  100% { -webkit-transform: translateY(700px); opacity: 0; }
}

@-moz-keyframes hinge {
  0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
  20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
  40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
  80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
  100% { -moz-transform: translateY(700px); opacity: 0; }
}

@-o-keyframes hinge {
  0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
  20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
  40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
  80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
  100% { -o-transform: translateY(700px); opacity: 0; }
}

@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
  100% { transform: translateY(700px); opacity: 0; }
}

.animated.hinge {
  -webkit-animation-name: hinge;
  -moz-animation-name: hinge;
  -o-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes rollIn {
  0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
  100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}

@-moz-keyframes rollIn {
  0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
  100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}

@-o-keyframes rollIn {
  0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
  100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
  0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

.animated.rollIn {
  -webkit-animation-name: rollIn;
  -moz-animation-name: rollIn;
  -o-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
    0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }

    100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
  }
}

@-moz-keyframes rollOut {
    0% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }

    100% {
    opacity: 0;
    -moz-transform: translateX(100%) rotate(120deg);
  }
}

@-o-keyframes rollOut {
    0% {
    opacity: 1;
    -o-transform: translateX(0px) rotate(0deg);
  }

    100% {
    opacity: 0;
    -o-transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
    0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }

    100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}

.animated.rollOut {
  -webkit-animation-name: rollOut;
  -moz-animation-name: rollOut;
  -o-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes lightSpeedIn {
  0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@-moz-keyframes lightSpeedIn {
  0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@-o-keyframes lightSpeedIn {
  0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@keyframes lightSpeedIn {
  0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}

.animated.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    -moz-animation-name: lightSpeedIn;
    -o-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;

    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.animated.lightSpeedIn {
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}


@-webkit-keyframes lightSpeedOut {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
  100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

@-moz-keyframes lightSpeedOut {
  0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
  100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

@-o-keyframes lightSpeedOut {
  0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
  100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

@keyframes lightSpeedOut {
  0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
  100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

.animated.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    -moz-animation-name: lightSpeedOut;
    -o-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

.animated.lightSpeedOut {
    -webkit-animation-duration: 0.25s;
    -moz-animation-duration: 0.25s;
    -o-animation-duration: 0.25s;
    animation-duration: 0.25s;
}







.section .anime {
  -webkit-animation-duration: 3.2s;
     -moz-animation-duration: 3.2s;
       -o-animation-duration: 3.2s;
          animation-duration: 3.2s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}

.section.active .anime.faleft {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
 


 .arrow-view {transition: all 0.3s ease;
  border: solid #bcbcbc;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 10px;
}

.right-view {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left-view {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up-view {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down-view {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);margin-bottom:10px;
}

/*공통*******/
.pc{ display:block} .mo{ display:none}
.bold{font-weight:900}




.video {
  width: 100%;
  max-width: 1200px;
  margin: 30px auto; 
  padding: 40px;
  box-sizing: border-box;
 
}
 
.video-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 50%;
}
 
 #player {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}


/*  퍼스텍  */ 

.cont_ir{width:96%; margin:auto;padding-bottom:50px;}
.tb_table {border-collapse: collapse; width:100%; min-width:600px;table-layout: fixed;  margin-bottom:50px;}
.tb_table caption{text-align:right; line-height:2; font-size:16px; }
.tb_table th{text-align:center;line-height:46px ; font-size:16px; padding:0 20px;background-color:#f1f1f1; color:#000; border-bottom:1px solid #ddd;font-weight:bold; }
.tb_table td{text-align:center;line-height:46px ; font-size:16px; padding:0 20px; background-color:#fff; color:#000;  border-bottom:1px solid #ddd;}
.tb_table td span{font-size:16px; color:#eb0000; } 
h2.tit1{ font-size:34px; font-weight:bold; padding-bottom:20px; line-height:45px;   }
h2.tit1 span{font-size:20px;  }
h2.tit2{ font-size:24px; font-weight:bold; }


.contents{ width:1438px;margin:auto; }
.contents h1{ font-size:30px; font-weight:bold; padding-bottom:20px; line-height:45px;  }
.contents h1 span{ font-size:20px; }
.contents .contwrap h2{ font-size:24px;  line-height:50px;  } 
.cont_table{ border-collapse: collapse;border-top:1px solid #000; }
.cont_table tr{text-align:center; }
.cont_table th{font-size:16px; color:rgb(12,35,64); font-weight:500; height:40px;background:rgb(234,238,242);  border-bottom:1px solid #ddd; }
.cont_table td{font-size:16px; font-weight:500;  height:40px; border-bottom:1px solid #ddd;}
.cont_table caption{text-align:right; line-height:2; font-size:16px; }
/* Lang  다국어 */ 
.lang{ width:30px; height:30px; background-size:cover; background-image:url(/images/language-w.png); display:inline-block;}
.header .leftM li .langbox{ position:absolute;left:-10px;top:40px; width:80px;   background-color:#fff;border:1px solid #aaa;  text-align:center;  padding:5px 0 ; border-radius:5px; }
.header .leftM li .langbox a{ display:block; color:#333; font-size:16px; line-height:1.6;}
.header.on .lang, .header.on2 .lang  {background-image:url(/images/language.png);  }
/* Lang  다국어 */