@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/
.video_pop {position:absolute; top:0; left:0; z-index:99999; width:500px; height:500px;}
.jb-box { position: relative;  }
      #background { z-index: -1; }
      .jb-text { position: absolute; top: 50%; left: 50%; width: 400px; margin-left: -200px; text-align: center; color: #ffffff; }

/*common*/

.msr{font-family: 'Montserrat', sans-serif !important; text-transform:uppercase}
.rw{font-family:'Raleway', sans-serif !important;}
/*.title{font-family: 'notos', sans-serif !important; letter-spacing:-0.065em}*/
.inner{max-width:1200px; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width:1200px; padding:0 3%; position:relative; margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:13px;}
.txt-m{font-size:20px;}
.txt-l{font-size:26px;}

.tit_h3{font-size:22px;font-weight:400; color:#000000;  position:relative; letter-spacing:-1px; border-bottom:1px solid #dcdcdc; padding-bottom:20px;}
.tit_h4{font-size:26px; color:#000000; font-weight:bold; letter-spacing:-1px}

.tit_h5{color:#000000; font-weight:bold; font-size:18px;}

.tit_h4.noLine:after{width:0; height:0px; margin-top:0px;}

.line_btn{display:inline-block; padding:8px 20px; border-radius:50px; color:#ffffff; border:1px solid #ffffff; font-size:0.9em}
.line_b_btn{display:inline-block; padding:8px 20px; border-radius:50px; color:#483326; border:1px solid #483326; font-size:0.9em}
.org_btn{border-color:#f08200; color:#f08200; padding:8px 40px;}


.mEnter{display:block;}
.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}

.tac{text-align:center;}
.mo_only{display:block;}

.move_scroll{max-width:768px; overflow-x:auto}

.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fsb{font-size:1.1em !important}
.fwb{font-weight:600 !important}
.Tblack{color:#323232}
.Tred{color:#e83428}
.ppTxt{color:#59486b}
.orgTxt{color:#f08200}

@media all and (min-width:768px) {

.txt-s{font-size:15px;}
.txt-m{font-size:20px;}
.txt-l{font-size:30px;}

.tit_h3{font-size:24px; padding-bottom:30px;}
.tit_h4{font-size:30px; letter-spacing:-1px}
.tit_h5{font-size:20px; letter-spacing:-1px}
.fsb{font-size:1.3em !important}


.mb{margin-bottom:45px !important; }
.bmb{margin-bottom:60px !important;}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 10px}
}

@media all and (min-width:1200px) {

.mEnter{display:inline-block;}

.txt-m{font-size:30px;}
.txt-l{font-size:40px;}

.tit_h3{font-size:30px; }
.tit_h3:after{margin-top:25px;}

.tit_h4{font-size:30px; }

.tit_h5{font-size:20px; }


.mb{margin-bottom:60px !important}
.bmb{margin-bottom:80px !important}
.pdinner{padding:0 20px}



}

/*owl 컨트롤러 css변경*/
.owl-controls{width:100%; margin:0 auto;}

/*owl pagenation css변경 */
.page_btn .owl-page span{width:20px !important; height:20px !important; background:none !important; border:4px solid #ffffff; border-radius:20px; opacity:0.7 }
.page_btn .owl-page.active span{opacity:1;}

.page_btn2 .owl-page span{width:5px !important; height:5px !important; background:#808080 !important; border-radius:20px; position:relative; opacity:1 !important; margin:0 20px !important;}
.page_btn2 .owl-page.active span:before{content:''; width:30px; height:30px; position:absolute; margin-left:-16px; left:50%; margin-top:-16px; top:50%; border:1px solid #808080; border-radius:200px;}

/*owl navigation css변경*/
.owl-theme .owl-controls{position:relative}
.arrow_btn .owl-buttons{position:absolute; width:100%; top:-250px;}
.arrow_btn .owl-buttons div{position:absolute; font-family:'FontAwesome'; text-indent:-999999px; background:none !important; padding:0px !important; margin:0px !important;}
.arrow_btn .owl-buttons div:first-child{left:2%;}
.arrow_btn .owl-buttons div:last-child{right:2%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{content:'\f104'; font-family:'FontAwesome'; position:absolute; left:0; top:0; text-indent:0 !important; font-size:3em;}
.arrow_btn .owl-buttons div.owl-next:after{content:'\f105'; right:0; left:auto;}

.pop_page_btn{position:relative;}
.pop_page_btn .owl-controls{position:absolute; bottom:0px; text-align:right !important}
.pop_page_btn .owl-pagination{display:inline-block; margin:10px; background:rgba(0,0,0,0.5); padding:1px 10px; border-radius:500px; height:22px;}
.pop_page_btn .owl-controls .owl-page span{width:10px !important; height:10px !important; background:#ffffff !important; margin:2px 4px !important}
.pop_page_btn .owl-controls .active span{background:#f6c94f !important}

@media all and (min-width:1200px) {
.arrow_btn .owl-buttons div:first-child{left:-10%;}
.arrow_btn .owl-buttons div:last-child{right:-10%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{font-size:50px;}
}

/**/
.wrap{max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative; overflow:hidden;}

 /*main visual 컨트롤러 및 bg*/  
#section00 .hide{height:0}
.mainvisual {position:relative; overflow:hidden;}
.mainvisual #mainslider li{background:url(../img/main01.jpg) no-repeat center center; min-height:570px; background-size:cover !important;}
.mainvisual #mainslider li.main02{background:url(../img/main02.jpg) no-repeat center center;}
.mainvisual #mainslider li.main03{background:url(../img/main03.jpg) no-repeat center center;}

.mainvisual .bx-wrapper .bx-has-controls-direction{max-width:1200px; min-width:320px; width:100%; position:absolute; bottom:0px; left:0; right:0; margin:0 auto;}
.mainvisual .bx-wrapper .bx-has-controls-direction:after{}
.mainvisual .bx-wrapper  .bx-has-controls-direction .bx-controls-direction {height:65px; position:relative; overflow:hidden;}
.mainvisual .bx-wrapper  .bx-has-controls-direction .bx-controls-direction:after{box-sizing:border-box; border-left:20px solid #ff6317; content:''; position:relative; z-index:5; background:#faa000 url(../img/induck_txt.png) no-repeat center center; background-size:85% !important;  width:60%; height:100%; display:inline-block; margin:auto}
.mainvisual .bx-wrapper  .bx-has-controls-direction .bx-controls-direction a{background:#ffffff;  top:auto; text-indent:0; padding:20px;  margin-top:0; float:left; width:20%; height:100%; position:relative; text-align:center; font-weight:800; font-family:'FontAwesome'; text-indent:-999999px;}

.mainvisual .bx-wrapper .bx-prev{left:0;}
.mainvisual .bx-wrapper .bx-prev:after{display:block; font-family:inherit; content:'\f104'; position:absolute; left:0; right:0; bottom:0; top:0; color:#323232; font-size:2.2em; line-height:61px; text-indent:0;}
.mainvisual .bx-wrapper .bx-next{right:0;}
.mainvisual .bx-wrapper .bx-next:after{display:block; font-family:inherit; content:'\f105'; position:absolute; left:0; right:0; bottom:0; top:0; color:#323232; font-size:2.2em; line-height:61px; text-indent:0;}

.mainvisual  #bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1200px;  width:90%; margin:0 auto; left:0; right:0; bottom:100px; text-align:center; min-height:25px;}
.mainvisual  #bx-pager li{display:inline-block; width:30px; text-align:center; padding-top:18px; position:relative;}
.mainvisual  #bx-pager li a{color:#ffffff; font-weight:800; }
.mainvisual  #bx-pager li a:before{position:absolute; content:''; width:12px; height:12px; border:5px solid #ffffff;  border-radius:100px; top:0; left:0; bottom:0; right:0; margin: 0 auto}
.mainvisual  #bx-pager li a.active{color:#f6c94f;  transition:0.3s}
.mainvisual  #bx-pager li a.active:before{border-color:#f08200; transition:0.3s}


@media all and (min-width:500px) {
.mainvisual .bx-wrapper .bx-has-controls-direction:after{left:215px;}

}


@media all and (min-width:768px) {
.mainvisual .bx-wrapper .bx-has-controls-direction{width:50%; right:auto}
.mainvisual #mainslider li{min-height:700px}
.mainvisual  #bx-pager li{padding-top:17px;}

}


@media all and (min-width:1200px) {
.mainvisual .bx-wrapper .bx-has-controls-direction{width:1200px; margin-left:-600px; left:50%;}
.mainvisual .bx-wrapper .bx-has-controls-direction .bx-controls-direction{width:50%;}
.mainvisual .bx-wrapper .bx-has-controls-direction .bx-controls-direction a{max-width:70px}
.mainvisual #mainslider li{min-height:800px}
.mainvisual  #bx-pager li{padding-top:16px;}
.mainvisual .bx-wrapper  .bx-has-controls-direction .bx-controls-direction:after{background-size:auto 20px !important}
}

/*mainvisual 텍스트*/
.mainvisual .visuBox{text-align:center;  margin-top:100px; }
.mainvisual .visuBox a{color:#ffffff}
.mainvisual .visuBox h2 {margin-bottom:20px; letter-spacing:-1px; line-height:1.2; color:#faa000; display:inline-block; position:relative; max-width:300px}
.mainvisual .visuBox h2 img{width:100%; margin-left:5%}
.mainvisual .visuBox h2:after{position:absolute; right:-20px; top:-30px;}
.mainvisual .visuBox p{font-size:0.9em; margin-bottom:20px; color:#ffffff; text-shadow:1px 1px 1px #323232}
.mainvisual .visuBox a{font-size:0.9em; font-weight:600; display:inline-block; padding:10px 40px; background:#f08200}
.mainvisual .visuBox .visu_img{text-align:center;}
.mainvisual .visuBox .visu_img img{max-width:230px; display:inline-block }


@media all and (min-width:768px) {
.mainvisual .visuBox{background:none; margin-top:120px;}
.mainvisual .visuBox h2 { max-width:400px}
.mainvisual .visuBox p{font-size:1.2em; }


.mainvisual .visuBox .line_link{position:absolute; bottom:0; right:3%}
}

@media all and (min-width:1200px) {
.mainvisual .visuBox h2 { max-width:500px}
.mainvisual .visuBox{margin-top:130px; width:50%;}
.mainvisual .visuBox h2{font-size:3.8em}
.mainvisual .visuBox.right{float:right}
}


/*공지사항*/
.noticebox{padding:20px 3%; margin: 40px 3% 0; webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);}
.noticebox h3{display:block; width:70px; margin-right:20px;  padding-right:10px; color:#323232;  font-weight:600; float:left; position:relative;}
.noticebox h3:after{position:absolute; content:''; width:1px; height:10px; top:0; bottom:0; right:0; margin:auto;  background:#c8c8c8; opacity:0.5}

.notice_li{position:relative; overflow:hidden;}
.notice_li ul{display:block; overflow:hidden; width:100%}
.notice_li ul li{overflow:hidden}
.notice_li ul li a{width: calc(100% - 80px); float:left; display:block; text-overflow: ellipsis; overflow:hidden; white-space:nowrap;}
.notice_li ul li span.date{float:right; text-align:right; font-size:0.9em;}

@media all and (min-width:768px) {
.noticebox{box-shadow:none; height:65px; width:50%; float:right; margin:0; margin-top:-65px; background:rgba(0,0,0,0.4); color:#ffffff; position:relative;}
.noticebox h3 a{color:#ffffff}
.notice_li li a{color:#ffffff}
}

@media all and (min-width:1200px) {
.noticebox{width:100%; max-width:1200px; float:none; margin:0 auto; margin-top:-65px; padding:20px; padding-left:530px}
}

/*section*/
.section{padding:40px 0; position:relative}
.section .section_top{text-align:center; background:#faa000; padding:20px 0; position:relative; box-shadow:5px 5px 20px hsla(0,0%,0%,0.2); }
.section .section_top h3{margin-bottom:20px; text-transform:uppercase; color:#ffffff; font-size:1.4em}
.section .section_top p{color:#ffffff; margin-bottom:20px;}
.section .section_top h3 span{margin-bottom:10px; display:block; font-size:0.8em}
.section .section_top h3,
.section .section_top p,
.section .section_top a{position:relative;}


@media all and (min-width:768px) {
.section{padding:80px 0;}
.section .section_top h3{margin-bottom:25px;}
}

@media all and (min-width:1200px) {
/*.section{padding:100px 0;}*/
.section .section_top h3{margin-bottom:30px;}
.section .section_top{padding:70px 30px;}
.section .section_top p{font-size:1.1em}
#section01:before{ height:65%;}
}



/*section01*/
#section01{position:relative; z-index:1; padding-bottom:0}
#section01 .box{background:#faa000; color:#ffffff; padding:30px 5%;  position:relative;}
#section01 .info{position:relative}
#section01 .info h3{font-weight:600; margin-bottom:10px}
#section01 .info p{font-size:1.4em}
#section01 .info b{display:block; margin-bottom:30px}
#section01 .ceo_img{width:50%;max-width:380px; position:absolute; right:-30px; bottom:0px}

@media all and (min-width:768px) {
#section01 .box{padding:40px 5%}
#section01 .info p{font-size:1.9em; line-height:1.3}
#section01 .info{padding-left:55%;}
#section01 .ceo_img{right:auto; left:5%;}
}

@media all and (min-width:1024px) {

#section01 .w100{width:60%; float:right; display:none}
#section01 .pdinner:after{content:''; width:60%; position:absolute; display:block; top:0; bottom:0; right:0; background:url(../img/section01.jpg) no-repeat center right; background-size:cover !important ; z-index:1}
#section01:after{clear:both; display:block; content:'';}
#section01 .info{padding:0px;}
#section01 .box{width:40%; float:left; padding:60px; padding-left:50px; margin-bottom:0 !important}
#section01 .ceo_img{width:80%; left:25%; bottom:-49%; z-index:2}
#section01 .pdinner{overflow:hidden}
}

@media all and (min-width:1200px) {

}


/*section02*/
#section02 {background:url(../img/section02_bg.jpg) no-repeat center center;  color:#ffffff; margin-top:-300px; padding-top:300px; z-index:0}
#section02 {text-align:center;}
#section02 h3{font-size:1.2em; font-weight:600}
#section02 p{font-size:1.4em}
#section02 h3 span{display:block; font-size:0.8em; margin-bottom:10px;}
.graph_li{text-align:center; vertical-align:top; position:relative; }
.graph_li li{padding-bottom:20px; display:inline-block; position:relative; width:160px; height:160px; }
.graph_li li:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; border-radius:300px; border:1px solid #ffffff; border-color:rgba(255,255,255,0.5); z-index:0; }
.graph_li li img{display:block; margin:0 auto; width:100%; max-width:80px; padding-top:20px; position:relative; z-index:1; margin-bottom:10px}
.graph_li li span{display:block; color:#ffffff; font-size:1.2em}

@media all and (min-width:768px) {
#section02 p{font-size:1.9em}
.graph_li li{width:200px; height:200px; margin:-10px}
.graph_li li img{padding-top:30px;}
}

@media all and (min-width:1200px) {
.graph_li li{margin:10px}
}


/*section03*/
#section03{background:#f5f5f5}
#section03 h3{font-size:1.2em; font-weight:500; text-align:center;}
.product{border:1px solid #dcdcdc; border-width:0px 1px 1px; background:#ffffff; text-align:center;}
.product .probox{padding:25px 20px; }
.product .probox dl{text-align:left;}
.product .probox dl dt{font-weight:500; font-size:1.15em; margin-bottom:10px; color:#483326}
.product .probox dl dt span{font-size:1.2em; display:block}
.product .probox dl dt span b{font-size:15px}
.product .probox dl dd.more{text-align:right; margin-top:20px;}
.product .probox{border-top:1px solid #dcdcdc; overflow:hidden;}
.product .probox .photo{text-align:center; margin-bottom:20px;}
.product .probox img{max-width:200px;}
.product div.ofh:last-child .col-02:last-child{border-top:0px}

.product .line_btn{color:#483326; border-color:#483326}

@media all and (min-width:360px) {
.product .probox{padding:30px 20px; }
.product .probox dl dt span{font-size:1.4em}
.product .probox .photo{float:left; width:32%;}
.product .probox .photo img{max-width:100%}
.product .probox .box{float:right; width:60%;}

}

@media all and (min-width:768px) {
#section03 h3{font-size:1.9em}
.product{position:relative}
.product .probox dl dt span{font-size:1.8em;line-height: 1.3;}
.product .probox.ver dl dt span{line-height:0.8;margin-top: 10px;}
.product:before{content:''; width:1px; height:100%; background:#dcdcdc; position:absolute; right:0px; bottom:0px; top:0px; left:0px; margin: 0 auto;}
.product .probox .photo{margin:0; width:35%; }
.product .probox{width:50%; float:left; padding:40px 20px; position:relative; min-height:300px; }
.product .probox dl dd.more{position:absolute; right:20px; bottom:40px}
}

@media all and (min-width:1200px) {
.product .probox{padding:80px 40px; min-height:350px}
.product .probox .photo{width:40%;}
.product .probox .box{width:50%;}
.product .probox dl dd.more{bottom:30px; right:40px;}

}




/*footer*/
#footer{background:#414141; padding:50px 0px; color:#c8c8c8; font-size:0.9em; text-align:center;}
/*#footer div{background:url(../img/foot_logo.png) no-repeat right center;}*/
#footer p{margin-top:20px; font-size:0.8em}
#footer p span{font-weight:600; color:#faa000}

.bottom_li{text-align:center; margin-bottom:10px;}
.bottom_li li{display:inline-block; margin: 0 0.5%;}
.bottom_li li a{color:#ffffff}

@media all and (min-width:768px) {
.bottom_li{text-align:left;}
.bottom_li li:first-child{margin-left:0}
#footer{text-align:left;}
}
/*page up*/
#pageup {position:fixed; z-index:999; right:1%; bottom:5%; width:50px; height:50px; background-image:url('../img/Htop.png');background-repeat: no-repeat;  background-position:center center; background-size: 50px 50px; display:none; cursor:pointer; z-index:4000;}










/*서브레이아웃*/
#sub_visual{position:relative; padding:125px 0 60px; background:url(../img/subvisu.jpg) no-repeat 10% center; }
.sub02_3 {background:url(../img/subvisu02_03.jpg) no-repeat 10% center !important; }
.sub02_4 {background:url(../img/subvisu02_04.jpg) no-repeat 10% center !important; }
.sub02_5 {background:url(../img/subvisu02_05.jpg) no-repeat 10% center !important; }
/*.sub01{ background:url(../img/subvisu01.jpg) no-repeat center center; }
.sub02{ background:url(../img/subvisu02.jpg) no-repeat center center; }
.sub03{ background:url(../img/subvisu03.jpg) no-repeat center center; }
.sub04{ background:url(../img/subvisu04.jpg) no-repeat center center; }
.sub05{ background:url(../img/subvisu05.jpg) no-repeat center center; }
.sub06{ background:url(../img/subvisu06.jpg) no-repeat center center; }

.sub010{ background:url(../img/subvisu10.jpg) no-repeat center center; }
.sub011{ background:url(../img/subvisu10.jpg) no-repeat center center; }*/

#sub_visual{text-align:center; color:#ffffff;}
#sub_visual .tit_h2{font-weight:500; font-size:36px; }
#sub_visual .tit_h2 span{display:inline-block;  font-family:'Montserrat'; font-size:14px; font-weight:500; text-transform:uppercase; margin-bottom:10px; box-shadow:0 -12px 0 rgba(250,160,0,0.7) inset;}
#sub_visual .tit_h2 b{display:block; font-weight:500; text-shadow:1px 2px 2px #323232}
#sub_visual .tit_h2:after{padding-top:0; background-size:40px auto !important}

@media all and (min-width:768px) {
#sub_visual{background-position:center center}
#sub_visual .tit_h2{font-size:45px;}
#sub_visual p{font-size:18px}
}

@media all and (min-width:1200px) {
#sub_visual .tit_h2{font-size:50px;}
#sub_visual .tit_h2 span{font-size:16px}
#sub_visual p{font-size:18px}
}


.sub_tab{display:none}
.sub_con{width:94%; margin: 0 auto; position:relative; min-height:320px; max-width:1160px; margin:30px auto; overflow:hidden}

/*2depth menu*/
#twodepthNav {position:relative; display:none; margin: 0 auto; }
#twodepthNav ul {overflow:hidden}
#twodepthNav ul li {position:relative; width:25%; float:left;}
#twodepthNav ul li a{color:#ffffff; background:rgba(0,0,0,0.5)}
#twodepthNav ul.li02 li{width:50%;}
#twodepthNav ul.li03 li{width:33.333%;}
#twodepthNav ul.li04 li{width:25%;}
#twodepthNav ul.li05 li{width:20%;}
#twodepthNav ul.li06 li{width:16.66%;}

#twodepthNav ul li a{display:block; padding:23px 0px; font-size:1.1em}
#twodepthNav ul li a:hover{color:#4b1d00; transition:0.3s; background:#ffffff; font-weight:600; border-left:10px solid #ff6317 }
#twodepthNav ul li:first-child a:before{width:0}
#twodepthNav ul li.active {background:#ffffff; }
#twodepthNav ul li.active a{color:#000000; font-weight:600; background:#ffffff; border-left:10px solid #ff6317}
#twodepthNav ul li.active:after {width:10px; height:10px; content: "";position:absolute; background:#f6c94f; top:43%; right:20px; border-radius:30px}

.con{position:relative; padding:30px 3% 80px 3%; min-height:700px;}
.con h3.tit_h3{padding-bottom:20px; border-bottom:1px solid #e6e6e6}

.path{position:absolute; right:0; top:7px;}
.path li{color:#808080; font-size:0.9em; display:inline-block;}
.path li:before{font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f105"; margin: 3px 7px 3px; vertical-align: middle;}
.path li:first-child,
.path li:first-child:before{display:none;}

@media all and (min-width:768px) {
#sub_visual{padding:130px 0px 120px}
#twodepthNav {position:absolute; width:100%; bottom:0;  display:block; }
.sub_con{margin:40px auto;}
.path li:first-child{display:inline-block;}

}

@media all and (min-width:1200px) {
.sub_tab{display:block;background:#0788c7; padding:10px 0px; text-align:right; color:#ffffff; font-size:0.85em; text-align:right;}
.sub_tab h3, .sub_tab p{display:inline-block; margin-left:15px; color:#fbdf40; font-weight:bold}
.sub_tab h3{color:#ffffff}
.sub_tab h3 span{margin-right:10px; text-transform:uppercase; color:#fbdf40}
.sub_tab p {border-radius:50px; background:#462e16; padding:5px 10px;}
#sidemenu{display:block}
#twodepthNav ul.li02 li{width:25%;}
#sub_visual{padding:180px 0 160px;}
.sub_con{width:100%; margin: 80px auto;}
.con{ margin-left:230px;}

}





/*텍스트효과*/

.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1500ms;animation-fill-mode:both;animation-delay:300ms;animation-timing-fonction:ease-out;}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt { 
	0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 1;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity:1;}
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt {
    0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 0;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity: 1;}
}




