@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'BellGothicStd-Bold';
  src: url('BellGothicStd-Bold.eot');
  src: url('BellGothicStd-Bold.woff2') format('woff2'),
       url('BellGothicStd-Bold.woff') format('woff'),
       url('BellGothicStd-Bold.ttf') format('truetype'),
       url('BellGothicStd-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BellGothicStd-Black';
  src: url('BellGothicStd-Black.eot');
  src: url('BellGothicStd-Black.woff2') format('woff2'),
       url('BellGothicStd-Black.woff') format('woff'),
       url('BellGothicStd-Black.ttf') format('truetype'),
       url('BellGothicStd-Black.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

/* CSS Document */
html,body{}
body {width:100%;position:relative;z-index:1; margin:0; background-color: #FFF;font-weight: normal; font-style: normal;  font-family: 'BellGothicStd-Bold', 'BellGothicStd-Black' , Microsoft JhengHei, 微軟正黑體, sans-serif;-webkit-overflow-scrolling: touch; overflow-x: hidden;overflow-y: scroll;}

/* reset */
h1,h2,h3,p{margin:0; padding:0; }
a{text-decoration:none;cursor:pointer;}
a:hover{text-decoration:none}
a.active{text-decoration:none}
img{border:0; }
ul{ list-style:none; margin:0; padding:0;}
a{-webkit-transition: all .3s;  transition: all .3s;}
p{-webkit-transition: all .3s;  transition: all .3s;}
div{-webkit-transition: all .3s;  transition: all .3s;}
#wrap { display:table; width: 100%;}
#cell { display:table-cell; vertical-align:middle; }

.btn,.btn2{display: inline-block;padding: 10px 12px 6px;margin-bottom: 0;font-size: 12px;font-weight: 400;line-height: 14px;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}


/* header TOP*/
#top_header {position:relative;top: 0;width: 100%;height: 180px; z-index:999; overflow: hidden; display: block;  background: url(../images/bg.jpg) center; background-position: top; background-size: 1920px}

.m_top{ display: none;}
#m_header{display: none;}
label[for="nav-trigger"]{display: none;}
.nav-trigger{display: none;}





nav {margin: 0 auto;padding:100px 85px 53px; height: 24px;line-height: 24px; width: 100%;}
nav .nav_logo{ text-align: left;font-size: 24px;color: #B0113C;letter-spacing: 1px; padding-left: 5px; float: left;}
nav .nav_logo a{ font-size: 24px;color: #B0113C;letter-spacing: 1px;}
nav ul {margin: 0px 0 0 0;padding:0;float: right;}
nav ul li {display: inline-block;margin: 0 0 0 45px; padding: 0 0 0 0px;font-size: 14px;color: #000000;letter-spacing: 2px;}
nav ul a{font-size: 14px;color: #000000;letter-spacing: 2px;opacity: 0.3;}
nav ul a.active{opacity: 1;color: #000000;}
nav ul a:hover{opacity: 1;color: #000000;}
nav ul a:focus{opacity: 1;color: #000000;}
nav ul a.login{color: #B0113C;opacity: 0.6;}
nav ul a.login:hover{opacity: 1;}


.snd_nav{background: #B0113C; width: 100%; height: 106px; padding:0 94px; }
.snd_nav h1{font-size: 36px;color: #FFFFFF;letter-spacing: 1.5px; padding-top:40px; float: left; width: 284px;}
.snd_nav h1 a{font-size: 36px;color: #FFFFFF;letter-spacing: 1.5px;}
.snd_nav ul{margin: 0; padding: 0; list-style: none; float: left;margin-top: 48px;margin-left: 20px;}
.snd_nav ul li{margin: 0; padding: 0; float: left; margin-right: 45px;font-size: 14px;color: #FFF;letter-spacing: 0.58px;}
.snd_nav ul li a{opacity: 0.5;font-size: 14px;color: #FFF;letter-spacing: 0.58px;}
.snd_nav ul li a:hover{opacity: 1;}
.snd_nav ul li a.active{opacity: 1;}

/* global */
.content { width: 100%;  position: relative; top:0 ; }
#content_container{position:relative; top:0;z-index:99; margin:0 auto;overflow:hidden;}
.container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0;}
.row{ margin: 0;}

.support_btn{  margin:0 auto; width: 185px; height: 49px;  margin-top: 0px;font-size: 14px;color: #B0113C;letter-spacing: 2px; line-height: 49px; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);display: inline-block}
.support_btn_holder{position: fixed;top: 50%;right: 17px;z-index: 9999;}

a.btn,a.btn2{width: 185px; height: 49px;border: 1px solid #B0113C;font-size: 14px;color: #B0113C;letter-spacing: 2px; line-height: 49px; padding: 0; border-radius: 0;}
a.btn:hover,a.btn2:hover{width: 185px; height: 49px;border: 1px solid #B0113C;font-size: 14px;color: #B0113C;letter-spacing: 2px; line-height: 49px; box-shadow:none}
a.btn.active,a.btn2.active{box-shadow:none;}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus,.btn2.active.focus, .btn2.active:focus, .btn2.focus, .btn2:active.focus, .btn2:active:focus, .btn2:focus{outline: none;outline-offset:0px;}
.support_btn:hover{   background: #B0113C; color: #FFF}
.support_btn:hover a{    color: #FFF}


/* footer */
.footer{ width: 1777px; margin: 50px auto 0px; position: relative; height: 50px;}
.footer .footer_text{  font-family: 'BellGothicStd-Black', Microsoft JhengHei, 微軟正黑體, sans-serif;font-size: 12px;color: #000000;letter-spacing: 1.71px; line-height: 24px; }
.footer .footer_text a{color: #4A4A4A}



/* HOME */
#HOME {width:100%; position:relative; top:0;}
#HOME .container{position:relative; top:0px; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }

#HOME .home_holder{ position: relative; width:1747px; margin: 50px auto 94px; padding-left: 5px;}
#HOME .home_holder .fade-in.two{height: 70px; width: 132px; display: block; margin-bottom: 47px; background:url(../images/invo_newlogo.png) center center no-repeat; background-size:contain;}
#HOME .home_holder h1{width: 1166px;font-size: 36px;color: #B0113C;letter-spacing: 1.5px; margin-bottom: 47px;}
#HOME .home_holder h2{width: 1166px;font-family: Helvetica, Arial, "sans-serif";font-size: 33px;color: #4A4A4A;letter-spacing: 0px;line-height: 40px;}
#HOME .home_holder h2 span{color: #9B9B9B}

#HOME .home_news{ position: relative; width:1747px; margin: 0px auto; padding-left: 9px; clear: both;}
#HOME .home_news h1{font-size: 14px;color: #000000;letter-spacing: 2px; float: left;}
#HOME .home_news .rline{background: #B0113C; width: 25px; height: 2px; margin-left: 21px; margin-bottom: 27px; margin-top: 3px; float: left;}

#HOME .home_news_holder{ width: 276px; margin: 0 15px 0 0; float: left;}
#HOME .home_news_holder h2{font-family: Helvetica, Arial, "sans-serif";font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px; margin-top: 15px;}
#HOME .home_news_holder h3{font-family: Helvetica, Arial, "sans-serif";font-size: 12px;color: #000;letter-spacing: 0px;line-height: 16px; font-weight: bold; margin-top: 15px;}
#HOME .home_news_holder p{font-family: Helvetica, Arial, "sans-serif";font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px;margin-top: 15px; height: 85px; overflow: hidden;}

#HOME .home_more{ position: absolute; top:50px; left: 844px; z-index: 1; width: 45px; height: 35px; background: #B0113C; text-align: right; overflow: hidden;}
#HOME .home_more:hover{ position: absolute; top:50px; left: 844px; z-index: 1; width: 100px; height: 35px; background: #B0113C;}
#HOME .home_more:hover:before{content: 'MORE'; color: #FFF; line-height: 35px;  font-size: 14px; opacity: 1;}

#HOME .news_img{ width: 276px; height: 140px; overflow: hidden;}
#HOME .news_img img{transform: scale(1.00); opacity: 1;-webkit-transition: all .3s;  transition: all .3s;}
#HOME .news_img:hover img{transform: scale(1.05); opacity: 0.8;-webkit-transition: all .3s;  transition: all .3s;}


/* ABOUT */
#ABOUT {width:100%; position:relative; top:0;}
#ABOUT .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }

.mid_content{ width: 1200px; margin: 86px auto; padding: 0px 12px 0 20px;}
.mid_content h1{font-size: 36px;color: #B0113C;letter-spacing: 1.5px; margin-bottom: 34px;padding: 0 20px}
.t_line{background: #B0113C; width: 60px; height: 2px; margin-left: 20px}
.mid_text{ margin-top: 70px; padding: 0 4px;}
.mid_text h1{font-family: Helvetica;font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px;padding: 0 5px;}
.mid_text h2{font-size: 23px;color: #000000;letter-spacing: 1px; padding: 0 5px;}
.mid_text h2 a{font-size: 23px;color: #000000;letter-spacing: 1px; }
.mid_text h2 a:hover{font-size: 23px;color: #000000;letter-spacing: 1px; text-decoration: underline;}
.mid_text p{font-family: Helvetica;font-size: 15px;color: #a3a3a3;letter-spacing: 0px;line-height: 20px; margin-top: 26px; margin-bottom: 65px;padding: 0 5px; height: 100px; overflow: hidden;}
.mid_text .mid_team{ text-align: center; margin: 0 5px 34px;}
.team_margin{ margin-top: 135px;}
.team_margin2{ margin-top: -135px;}
.mid_text .img_size{width:544px; height: 276px; overflow: hidden;margin: 0 0px 34px;}
.mid_text .mid_img{text-align: center; transform: scale(1.00); opacity: 1;-webkit-transition: all .3s;  transition: all .3s; }
.mid_text .mid_img:hover{transform: scale(1.05); opacity: 0.8;-webkit-transition: all .3s;  transition: all .3s;}


.about_width{width: 358px; margin: 0 auto; text-align: left; display: none; margin-top: 40px;}


.btn-default {
  color: #B0113C;
  background-color: #fff;
  border-color: #B0113C;

}
.btn-default:focus,
.btn-default.focus {
  color: #FFF;
    background-color: #B0113C;border-color: #B0113C;
}
.btn-default:hover {
  color: #FFF;
    background-color: #B0113C;border-color: #B0113C;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #FFF;
    background-color: #B0113C;border-color: #B0113C;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #FFF;
    background-color: #B0113C;border-color: #B0113C;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: #fff;
  border-color: #B0113C;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}



/* ARTICLE */
#ARTICLE {width:100%; position:relative; top:0;}
#ARTICLE .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }
#ARTICLE .mid_text h1{font-family: Helvetica;font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px;padding: 0 5px; margin: 12px auto;}
#ARTICLE .mid_text h2{font-size: 24px;color: #000000;letter-spacing: 1px; padding: 0 5px;}
#ARTICLE .mid_text p{font-family: Helvetica;font-size: 15px;color: #a3a3a3;letter-spacing: 0px;line-height: 20px; margin-top: 16px; margin-bottom: 65px;padding: 0 5px; height: 100px; overflow: hidden;}


/* ARTICLE_detail */
#ARTICLE_detail {width:100%; position:relative; top:0;}
#ARTICLE_detail .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }
#ARTICLE_detail .mid_text h1{font-family: Helvetica;font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px;padding: 0 5px; margin-bottom: 23px;}
#ARTICLE_detail .mid_text h2{font-size: 23px;color: #000000;letter-spacing: 1px; padding: 0 5px;}
#ARTICLE_detail .mid_text p{font-family: Helvetica;font-size: 15px;color: #a3a3a3;letter-spacing: 0px;line-height: 20px; margin-top: 16px; margin-bottom: 65px;padding: 0 5px; height: auto;}
#ARTICLE_detail .mid_text span.imgBlock {display: block; text-align: center;}
#ARTICLE_detail .mid_text span.imgBlock img {max-width: 100%;}

/* QUIZ */
#QUIZ {width:100%; position:relative; top:0;}
#QUIZ .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }
#QUIZ .mid_text h1{font-family: BellGothicStd-Bold;font-size: 36px;color: #FFFFFF;letter-spacing: 1.5px; margin-bottom:25px; padding: 0;}
#QUIZ .quiz_img{ margin-bottom: 45px;}
#QUIZ .quiz_mask{ position: absolute; top: 0;  background: rgba(0,0,0,0.50); width: 1123px; height: 570px;}
#QUIZ .quiz_cover{ position: absolute; bottom: 106px;  margin-left: 40px; }

#QUIZ .mid_content{width: 1200px;  margin: 86px auto;padding: 0px 20px 0 8px;}
#QUIZ .mid_text .img_size{ width: 276px; height: 140px; overflow: hidden; margin:0 0 20px 0; border: 1px solid #eee}
#QUIZ .mid_text .mid_img{ width: 276px; text-align: center; transform: scale(1.00); opacity: 1;-webkit-transition: all .3s;  transition: all .3s; }
#QUIZ .mid_text .mid_img:hover{transform: scale(1.05); opacity: 0.8;-webkit-transition: all .3s;  transition: all .3s;}
#QUIZ .mid_text h2{ font-family: Helvetica, Arial, "sans-serif";font-size: 12px;color: #000;letter-spacing: 0px;line-height: 16px; font-weight: bold; margin-top: 0px;}
#QUIZ .mid_text h2 a{ font-family: Helvetica, Arial, "sans-serif";font-size: 12px;color: #000;letter-spacing: 0px;line-height: 16px; font-weight: bold; margin-top: 0px;}
#QUIZ .mid_text p{ margin-top: 10px;font-family: Helvetica, Arial, "sans-serif";font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px;margin-top: 0px; width: 276px; height: 60px; overflow: hidden; margin-bottom: 30px;}




/* QUIZ_detail */
#QUIZ_detail {width:100%; position:relative; top:0;}
#QUIZ_detail .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }
#QUIZ_detail .quiz_banner{}
#QUIZ_detail .mid_content2{ width: 834px; margin: 86px auto; padding: 0 20px;}
#QUIZ_detail .mid_text{ margin-top: 130px;}
#QUIZ_detail .mid_text h1{font-size: 33px;color: #000000;letter-spacing: 1.37px;}
#QUIZ_detail .mid_text h3{font-family: Helvetica;font-size: 12px;color: #4A4A4A;letter-spacing: 0px;line-height: 16px;padding: 0 5px; margin-bottom: 23px;}
#QUIZ_detail .mid_text p{font-family: Helvetica;font-size: 18px;color: #4A4A4A;letter-spacing: 0px;line-height: 26px; margin-top: 20px; margin-bottom: 40px;}
#QUIZ_detail .more_btn{ margin-bottom: 137px;}
#QUIZ_detail .quiz_news{ position: relative; width:1747px; margin: 0px auto; padding-left: 9px; clear: both;}
#QUIZ_detail .quiz_title{}
#QUIZ_detail .quiz_title h1{font-size: 24px;color: #B0113C;letter-spacing: 1px; ; padding-left: 0;}
#QUIZ_detail .quiz_title .t_line{background: #B0113C; width: 60px; height: 2px; margin-top: 23px; margin-bottom: 49px; margin-left: 0;}
#QUIZ_detail p.quiz{font-family: Helvetica;font-size: 16px;color: #4A4A4A;letter-spacing: 0px;line-height: 20px; margin-bottom: 100px;}
#QUIZ_detail .quiz_display{ padding: 0}

/* CONTACT */
#CONTACT {width:100%; position:relative; top:0;}
#CONTACT .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }
#CONTACT .mid_content{ width: 100%; padding: 0 84px;}
#CONTACT .mid_text { min-height: 430px}
#CONTACT .mid_text h1{font-size: 24px;color: #B0113C;letter-spacing: 1px; margin-bottom:10px; padding: 0;}
#CONTACT .mid_text p{font-family: Helvetica;font-size: 18px;color: #4A4A4A;letter-spacing: 0px; padding: 0; height: auto;}
#CONTACT .mid_text a{font-family: Helvetica;font-size: 18px;color: #4A4A4A;letter-spacing: 0px;}


/* PROFILE */
#PROFILE {width:100%; position:relative; top:0;}
#PROFILE .container{position:relative; top:0; left:0; width:100%; margin:0 auto; padding:0px 0px 0 0px; }
#PROFILE .mid_content{ width: 100%; padding: 0 84px;}
#PROFILE .mid_text { min-height: 430px}
#PROFILE .mid_text .profile_width{width: 290px; float: left;}
#PROFILE .mid_text h1{font-size: 24px;color: #B0113C;letter-spacing: 1px; margin-bottom:10px; padding: 0; width: 100%;font-family: 'BellGothicStd-Bold', 'BellGothicStd-Black' , Microsoft JhengHei, 微軟正黑體, sans-serif;}
#PROFILE .mid_text p{font-family: Helvetica;font-size: 18px;color: #4A4A4A;letter-spacing: 0px; padding: 0; height: auto; width: 100%;}

.profile_btn{   width: 204px; height: 35px;  margin-top: 0px;font-size: 14px;color: #B0113C;letter-spacing: 2px; margin-bottom: 20px;}
.profile_btn a.btn,.profile_btn a.btn:hover{width: 204px; height: 35px;border: 1px solid #B0113C;font-size: 14px;color: #B0113C;letter-spacing: 2px; line-height: 36px; padding-right: 20px; border-radius: 0; background: url(../images/profile_btn_change.png) no-repeat; background-position: 173px center;}
.profile_btn a.btn2,.profile_btn a.btn2:hover{width: 204px; height: 35px;border: 1px solid #B0113C;font-size: 14px;color: #B0113C;letter-spacing: 2px; line-height: 36px; padding-right: 20px; border-radius: 0; background: url(../images/profile_btn_change2.png) no-repeat; background-position: 173px center;}





/* flex slider */
.flex-control-nav {width: 100%;position: absolute;bottom: 30px;text-align: left;margin-left: 30px;z-index: 999;}
.flex-control-nav li {margin: 0 6px;display: inline-block;zoom: 1;*display: inline;}
.flex-control-paging li a {width: 12px;height: 12px;display: block;border: none;box-shadow: none;border-radius: 0;cursor: pointer;text-indent: -9999px;background: url(../images/article/slider_dot_normal.jpg) no-repeat; background-size: cover;}
.flex-control-paging li a:hover {background: url(../images/article/slider_dot_active.jpg) no-repeat;width: 12px;height: 12px;background-size: cover;}
.flex-control-paging li a.flex-active {background: url(../images/article/slider_dot_active.jpg) no-repeat;width: 12px;height: 12px;cursor: default;background-size: cover;}
.slider_line{ position: absolute; bottom: 0; left: 0; z-index: 999}

.slides-timer {position: absolute; bottom: 0px;left: 0;width: 100%;z-index: 9999;}
.slide-timer {float: left;height: 4px;overflow: hidden;cursor: pointer;width: 100%;position: absolute;}
.slide-name{ width: 100%;}
.working{position: absolute;z-index: 9999;}
.slide-progress {background-color: #ccc;height: 4px;width: 100%;}
.slide-progress-active {background-color: #ccc;width: 0%;height: 100%;max-width: 100%;}
.working .slide-progress-active {background-color: #B0113C;width: 100%;-webkit-transition: width 7.5s linear;transition: width 7.5s linear;}


/* popup */
.modal-dialog{ width:960px; background:#FFF; z-index:9999; height:600px}
.modal-body{ padding:0;}
.modal-dialog h1{ margin-bottom:40px;font-size: 36px;color: #0B1226;letter-spacing: 1px;line-height: 70px; text-align:center;}
.modal-dialog p{ margin-bottom:40px;font-size: 18px;color: #333333;letter-spacing: 0px;line-height: 30px; margin-bottom:42px;}
.modal-content {position: relative;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border:none; outline: 0;-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); box-shadow: 0 3px 9px rgba(0,0,0,.5);}
button.close{ -webkit-appearance: none;padding: 0;cursor: pointer;background: #FFF;border: 0;}
.close{ position: absolute;z-index: 99999;width: 40px;height: 40px;}


.site-wrap{ background: url(../images/bg.jpg) center; background-position:center -180px; background-size: 1920px; padding-bottom: 50px; min-height: calc(100vh - 180px);}



/* REG */
.top_reg{width: 100%; height:80px;border-top:1px solid #B0113C;border-bottom:1px solid #EFEFEF}
.reg_logo{font-size: 18px;color: #B0113C;letter-spacing: 0.75px; text-align: center; width: 960px; margin: 28px auto;}
.reg_logo a,reg_logo a:hover{font-size: 18px;color: #B0113C;letter-spacing: 0.75px; text-align: center;  text-decoration: none; z-index: 9999; position: relative;}
.reg_lang{font-size: 12px;color: #000000;letter-spacing: 1.7px; text-align: right; width: 960px; margin: 27px 0;position: absolute;top: 6px;}
.reg_lang a{font-size: 12px;color: #000000;letter-spacing: 1.7px; }

.back{font-size: 12px;color: #000000;letter-spacing: 1.7px; text-align: left; width: 960px; margin: 27px 0;position: absolute;top: 6px;}
.back a{font-size: 12px;color: #000000;letter-spacing: 1.7px; }

#REG .footer{ max-width: 960px;}
#REG {width:100%; position:relative; top:0;}
#REG .container{position:relative; top:0; width:414px; margin:0 auto; padding:0px 0px 0 0px; text-align: center; }
#REG .rbtn{ width: 50%;  height: 132px;}
#REG .rbtn .b1{ background: url(../images/reg_b1.jpg) no-repeat center; width: 100%; text-align: center; height: 132px;border-bottom: 1px solid #EFEFEF;background-position:center 45px;}
#REG .rbtn .b2{ background: url(../images/reg_b2.jpg) no-repeat center; width: 100%; text-align: center; height: 132px;border-bottom: 1px solid #EFEFEF;background-position:center 45px;}
#REG .rbtn p{padding-top: 80px;}

#REG .rbtn a{font-size: 14px;color: #C8C8C8;letter-spacing: 0.56px;}
#REG .rbtn a:hover p, #REG .rbtn a.active p{color: #B0113C;}
#REG .rbtn a:hover.icon1 .b1,#REG .rbtn a.active.icon1 .b1{background: url(../images/reg_b1r.jpg) no-repeat center;border-bottom: 1px solid #B0113C;background-position:center 45px;}
#REG .rbtn a:hover.icon2 .b2,#REG .rbtn a.active.icon2 .b2{background: url(../images/reg_b2r.jpg) no-repeat center;border-bottom: 1px solid #B0113C;background-position:center 45px;}

#REG h1{font-size: 21px;color: #000000;letter-spacing: 0.87px; margin-top: 60px ; text-align: center; margin-bottom: 20px;}
#REG h2{font-size: 14px;color: #000000;letter-spacing: 0.58px; text-decoration: underline; margin-bottom: 20px; margin-top: 60px; text-align: center;}
#REG h3{font-family: Arial-BoldMT;font-size: 14px;color: #000000;letter-spacing: 0.58px; text-align: left;  margin: 30px auto;}
#REG h4{font-family: ArialMT, Helvetica, Arial, "sans-serif";font-size: 14px;color: #4A4A4A;letter-spacing: 0.87px;line-height: 14px; margin-bottom: 40px; margin-top: 10px;}
#REG .error{margin: 0 auto;font-family: Arial-BoldMT;font-size: 14px;color: #B0113C;letter-spacing: 0.58px;line-height: 19px; text-align: left; width:358px; margin-bottom:20px }
#REG .error span{display: block;    margin-left: 27px;margin-top: -18px; margin-bottom: 5px;}
#REG #reg_page{ width: 100%; margin:  0 auto;}

#REG input[type=text],#REG input[type=password]{ margin-bottom: 20px; border: none;padding-left: 15px;
	/* Email or Username: */
	font-family: Arial-BoldMT;font-size: 14px;color: #999999;letter-spacing: 0.58px;
    /* Rectangle 351: */
    background: #F3F3F3;border-radius: 5px; width: 358px; height: 46px;}

#REG input[type=text].error,#REG input[type=password].error{ margin-bottom: 20px; padding-left: 15px;
	/* Email or Username: */
	font-family: Arial-BoldMT;font-size: 14px;color: #999999;letter-spacing: 0.58px;
    /* Rectangle 351: */
    background: url(../images/reg_error2.png) no-repeat #F3F3F3;border-radius: 5px; width: 358px; height: 46px; background-position: right center;
    border: 1px solid #B0113C}
#REG .error_text{font-family: ArialMT;font-size: 12px;color: #4A4A4A;letter-spacing: 0.5px;line-height: 16px; margin:0 auto  20px; text-align: left;width:358px; }


#REG a{font-family: ArialMT;font-size: 14px;color: #4A4A4A;letter-spacing: 0.58px;}
#REG a.fgpw{font-family: ArialMT;font-size: 14px;color: #B0113C;letter-spacing: 0.58px; text-align: center; margin: 21px auto;}
#REG .reg_btn{background: #B0113C;border-radius: 5px; width: 358px; height: 46px; text-align: center; padding-top: 13px;margin: 20px auto 20px;}
#REG .reg_btn2{background: #305396;border-radius: 5px; width: 358px; height: 46px; text-align: center; padding-top: 13px;margin: 20px auto 20px;}
#REG .reg_btn2 img{ margin-top: -5px; margin-left: 10px;}
#REG a.btn1a{font-family: ArialMT;font-size: 14px;color: #FFFFFF;letter-spacing: 0.58px;}
#REG a.btn1b{font-family: ArialMT;font-size: 14px;color: #FFFFFF;letter-spacing: 0.58px; padding-top: 5px;}
#REG .or_span{ padding: 10px 0 35px;width: 320px;margin: 0 auto;}
#REG .or_span .or_line {width: 115px; height: 1px; background-color: #000; padding: 0 10px;float: left;margin: 14px 15px;}
#REG .or_span .or_text{font-size: 21px;color: #000000;letter-spacing: 0.87px; float: left}

#REG select{margin-bottom: 20px; border: none;
    -moz-appearance : none; padding: 0 15px; background: url(../images/selector.png) #F3F3F3 no-repeat right center;
    /* Email or Username: */
	font-family: Arial-BoldMT;font-size: 14px;color: #999999;letter-spacing: 0.58px;
    /* Rectangle 351: */;border-radius: 5px; width: 358px; height: 46px;-webkit-appearance: none;}
#REG select.error{margin-bottom: 20px;
    -moz-appearance : none; padding: 0 15px; background: url(../images/selector.png) #F3F3F3 no-repeat right center;
    /* Email or Username: */
	font-family: Arial-BoldMT;font-size: 14px;color: #999999;letter-spacing: 0.58px;
    /* Rectangle 351: */;border-radius: 5px; width: 358px; height: 46px;-webkit-appearance: none;border: 1px solid #B0113C}
#REG select.half{ width: 179px;}

.reg_width{width: 358px; margin: 0 auto; text-align: left;}
.reg_width .style1 span{font-family: Arial-BoldMT;font-size: 14px;color: #B0113C;letter-spacing: 0.58px;line-height: 30px; margin: 0 10px 0 0;}
.reg_width .style1{font-family: Arial-BoldMT;font-size: 14px;color: #999;letter-spacing: 0.58px;line-height: 30px;}
.reg_width .style2{font-family: ArialMT;font-size: 14px;color: #4A4A4A;letter-spacing: 0.58px;}
.reg_width .style2 span{display: block;    margin-left: 25px;margin-top: -15px;}
.reg_width .style2 a{color: #B0113C; text-decoration: underline;}
.reg_width .text-left,.reg_width .text-right{ width: 50%; float: left; margin-bottom: 20px; text-decoration: underline; padding: 0 4px 0 10px;}

input[type=radio],input[type=checkbox] { margin-right: 10px;}

input[type=range] {
  -webkit-appearance: none;
  margin: 30px auto 20px;;
  width: 358px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: #D2D2D2;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background: #B0113C;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #D2D2D2;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: #D2D2D2;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background: #B0113C;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #D2D2D2;
}
input[type=range]::-ms-fill-upper {
  background: #D2D2D2;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background: #B0113C;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #D2D2D2;
}
input[type=range]:focus::-ms-fill-upper {
  background: #D2D2D2;
}
#REG input[type=text]:focus, #REG input[type=password]:focus,#REG select:focus{ border: #000 1px solid; color:#000; outline: none;}
*:focus {
    outline: none;
}

/* REGISTER: */

/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 1440px) {
	nav{ width: 1164px; max-width: 100%;}
	#HOME .home_holder{width: 1164px;}
	#HOME .home_holder h2{width: 80%;}
	#HOME .home_news{width: 1164px;}
	.footer{width: 1194px;}
	.support_btn{right: -24px;}

	.snd_nav{padding-left: 162px;}

	#QUIZ_detail .quiz_banner img{ width: 100%;}
	#QUIZ_detail .quiz_display img{ width: 100%;}
	#CONTACT .mid_content{ padding-left: 152px;}
	#PROFILE .mid_content{ padding-left: 152px;}
}


@media screen and (max-width: 1366px) {
	.support_btn{right: -45px;}
	.snd_nav{padding-left: 124px;}
  #CONTACT .mid_content{ padding-left: 124px;}
  #PROFILE .mid_content{ padding-left: 124px;}
}

@media screen and (max-width: 1280px) {
	.support_btn{right: -72px;}
	.snd_nav{padding-left:84px;}
  #CONTACT .mid_content{ padding-left: 84px;}
  #PROFILE .mid_content{ padding-left: 84px;}
}


@media screen and (max-width: 1024px) {
	nav{ width: 960px;}
	#HOME .home_holder{width: 960px;}
	#HOME .home_news{width: 960px;}
	.footer{width: 990px;}

	.support_btn{ display: none}

	.snd_nav{padding-left:74px;}
	.mid_content{width: 960px;}
	#CONTACT .mid_content{ padding-left: 74px;}
  #PROFILE .mid_content{ padding-left: 74px;}

	#CONTACT .mid_content img{ width: 26px; }
	img.mid_team{ width: 100%}
	.mid_text .img_size{width:100%; height: 100%;}
	.mid_text img{width: 100%; }
	.mid_text .mid_img{width: 100%; height: auto;transform: scale(1.00); opacity: 1;-webkit-transition: all .3s;  transition: all .3s; }
	#QUIZ .mid_text .img_size{width:100%; height: 100%;}
	#QUIZ .mid_text .mid_img{width: 100%; height: auto;transform: scale(1.00); opacity: 1;-webkit-transition: all .3s;  transition: all .3s; }

	#QUIZ .mid_content{width:960px;padding: 0px 6px 0 8px;}
	#QUIZ .quiz_mask{ width: 880px; height: 446.66px}
	#QUIZ .quiz_cover{ bottom: 84px;}
	#QUIZ .quiz_cover img{ width: 45px; height: 35px}
	#QUIZ_detail .more_btn{ width: 124px;}



}




@media screen and (max-width: 768px) {
	.m_top{display: block;background: #FFFFFF; border-bottom: 1px solid #DEDEDE; height: 67px; position: fixed; top:0; width: 100%; z-index: 1; }
	.m_logo{font-size: 32px;color: #B0113C;letter-spacing: 1.33px; text-align: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 13px;}
	.m_logo a,.m_logo a:hover,.m_logo a.active,.m_logo a:focus{ color: #B0113C}

	#m_header{ display:block}
    .nav-trigger{ display: block}
	#top_header{ display: none;}
	#HOME .home_more{display:none;}



#nav-trigger { display: block;}
.nav-trigger { display: block;position: absolute;clip: rect(0, 0, 0, 0);}
label[for="nav-trigger"] { display: block;}

/* Navigation Menu - Background */
.navigation {/* critical sizing and position styles */width: 300px;height: 100%;position: fixed;top: 0;right: 0;bottom: 0;left: 0px;z-index: 0;
/* non-critical appearance styles */list-style: none;background-color: #B0113C;}



/* Navigation Menu - List items */
.nav-lang{width: 300px;height: 60px;padding-left: 17px; background: #930A2F;    position: relative;
    z-index: 99999;}
.lang_nav{width: 300px;height: 60px;line-height: 60px;font-size: 12px;font-weight: normal;letter-spacing: 1px;color: #ffffff; display: inline-block;}

.nav-item {width: 300px;height: 42px;border-left:3px solid #B0113C}
.navigation .active {border-left:3px solid #FFF}
.nav-item a {display: block;padding:15px;padding-left: 14px;text-decoration: none;transition: color 0.2s, background 0.5s;text-align: left;font-size: 12px;color: #FFFFFF;letter-spacing: 2.85px;}
.nav-item a:hover {color: #FFF;}

.nav-item {display: block;padding:15px;padding-left: 14px;text-decoration: none;transition: color 0.2s, background 0.5s;text-align: left;font-size: 12px;color: #FFFFFF;letter-spacing: 2.85px;}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {min-height: 100%;min-width: 100%; min-height: 100vh;/* Needs a background or else the nav will show through */
position: relative;top: 0;bottom: 100%;left: 0;z-index: 1;overflow-x: hidden; background-color: #FEFDFB}



/* Nav Trigger */
.nav-trigger {/* critical styles - hide the checkbox input */position:absolute;clip: rect(0, 0, 0, 0);}
label[for="nav-trigger"] {/* critical positioning styles */position:fixed;left: 34px; top: 18px;z-index: 2;
/* non-critical apperance styles */height: 30px;width: 30px;cursor: pointer;background: url(../images/m_nav.png) #FFF no-repeat; background-size: cover;}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {transition: left 0.2s;}
.nav-trigger + label, .m_top {transition: left 0.2s;}

.nav-trigger:checked + label {left: 334px;}
.nav-trigger:checked ~ .site-wrap {left: 300px;}
.nav-trigger:checked ~ .m_top {left: 0px; }
.nav-trigger:checked ~ #fp-nav.right{ right:-300px}




	#HOME .home_holder{width: 700px;top: 68px; padding: 0 20px}
	#HOME .home_news{width: 700px; padding: 0 20px}
	.footer{width:730px;}
	#HOME .home_news_holder{ width: 50%;margin: 0;padding-right: 15px;}
	#HOME .home_news_holder p{ margin-bottom:  60px;}
	.news_img img{ width: 100%;}
	#HOME .home_news h1{margin-top: 40px}
	#HOME .home_news .rline{margin-top: 43px}
	#HOME .home_holder h2{width: 100%;}

	.snd_nav{ margin-top:67px; padding-left: 54px;}
	.snd_nav ul{display: none}
	.mid_content{ width: 700px; padding: 0;}
	#CONTACT .mid_content{ width: 700px; padding-left: 20px;}
	#PROFILE .mid_content{ width: 700px; padding-left: 20px;}

	.team_margin{margin-top:75px;}
	.team_margin2{margin-top:-75px;}

	#QUIZ .mid_content{width:700px;padding: 0px}
	#QUIZ .quiz_mask{width: 660px; height: 335px;}
	#QUIZ .mid_text h1{font-size: 28px;}
	#QUIZ .quiz_cover{ bottom: 64px; margin-left: 20px;}

	#QUIZ_detail .mid_content2{width: 700px; padding: 0 20px }
	html, body{ background: none}

	.site-wrap{ background: url(../images/bg.jpg) center; background-position: top; background-size: 1000px}

	.reg_logo{ width: 100%;}
	.reg_lang{ width: 100%; right: 30px;}

  	.back{ width: 100%; left: 30px;}
	#REG .footer .footer_text{ text-align: center;}

}

@media screen and (max-width: 414px) {
	#HOME .home_holder{ width:  375px}
	#HOME .home_holder h1{width: 100%;font-size: 18px;color: #B0113C;letter-spacing: 1.5px;margin-bottom: 25px;}
	#HOME .home_holder h2{font-family: Helvetica;font-size: 16px;color: #4A4A4A;letter-spacing: 0px;line-height: 22px;}
	#HOME .home_news{ width:  375px}
	#HOME .home_news_holder{width: 100%; padding: 0}
	#HOME .home_news_holder h3{ margin-top: 10px;}
	#HOME .home_news_holder p{ margin-bottom: 30px;}
	.footer{ width:  380px}

	.m_top{display: block;background: #FFFFFF; border-bottom: 1px solid #DEDEDE; height: 50px; position: fixed; top:0; width: 100%; z-index: 9999}
	.m_logo{font-size: 20px;color: #B0113C;letter-spacing: 1.33px; text-align: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 14px;}
	.nav-trigger {/* critical styles - hide the checkbox input */position:absolute;clip: rect(0, 0, 0, 0);}
label[for="nav-trigger"] {/* critical positioning styles */position:fixed;left: 20px; top: 16px;z-index: 2;
/* non-critical apperance styles */height: 18px;width: 18px;cursor: pointer;background: url(../images/m_nav.png) #FFF no-repeat; background-size: cover;}

	.snd_nav{ margin-top:50px; padding-left: 30px; height: 80px; display: none;}
	.site-wrap{ background: url(../images/bg_m.jpg) repeat center; background-position: top; background-size: 414px}

	.snd_nav h1{ font-size:24px; padding-top: 30px;}
	.snd_nav h1 a{ font-size:24px; }

	.mid_content{ width:100%; margin-top: 40px;padding: 0 32px;}
	#CONTACT .mid_content{ width: 100%; padding: 0 32px}
	#CONTACT .mid_content h1{font-size:22px;}
	#CONTACT .mid_content p{ font-size:14px;}
	#PROFILE .mid_content{ width: 100%; padding: 0 32px }
	#PROFILE .mid_content h1{font-size:22px; margin-bottom: 0; line-height: 22px;}
	#PROFILE .mid_content p{ font-size:14px; margin-top: 5px; line-height: 16px}

	.mid_content h1{ font-size:28px; line-height: 32px;padding: 0 ;}

	.t_line{ margin-left: 0;}
	.mid_text{margin-top: 40px; padding: 0;}
	.mid_text h2{ font-size:24px; padding: 0}
	.mid_text p{font-size:14px; margin-bottom: 40px; margin-top: 10px; padding: 0}
	.mid_text .col-xs-12{ margin: 0; padding: 0;}
	.mid_text .mid_team{padding: 0; margin: 0px 0 34px}

	#ARTICLE .mid_text h1{padding: 0; margin-bottom: 15px;}
	#ARTICLE .mid_text h2{padding: 0}
	#ARTICLE .mid_text p{ font-size:14px; padding: 0; margin-top: 15px;}

	#ARTICLE_detail .mid_text h1{padding: 0; margin-bottom: 15px;}
	#ARTICLE_detail .mid_text h2{padding: 0}

	#ARTICLE_detail .mid_text p{ font-size:14px; padding: 0; margin-top: 15px;}

	.flexslider{ margin: 0 0 30px}
	.flex-control-nav{ bottom:20px; margin-left: 20px;}
	.slider_line img{width: 100%;}

	#QUIZ .mid_content{width:100%; padding: 0 32px;}
	#QUIZ .quiz_mask{width: 350px; height: 178px;}
	#QUIZ .quiz_img{ margin-bottom: 25px;}
	#QUIZ .quiz_cover{bottom:45px;}
	#QUIZ .quiz_cover h1{font-size:16px; margin-bottom: 10px;}
	#QUIZ .quiz_cover img{ zoom:80%;}

	#QUIZ_detail .mid_text{ margin-top: 50px;}
	#QUIZ_detail .mid_content{ width: 350px; margin: 25px auto; padding: 0}
	#QUIZ_detail .mid_content2{ width: 390px; margin: 25px auto}
	#QUIZ_detail .mid_text h1{font-size:24px; padding: 0;}
	#QUIZ_detail .mid_text h3{ margin-bottom: 15px; padding: 0;}
	#QUIZ_detail .mid_text p{font-size:16px; padding: 0; margin-bottom: 20px; margin-top: 15px;}
	#QUIZ_detail .more_btn{ margin-bottom: 50px;}

	.about_width{display: block; margin-top: 90px;}

#REG #reg_page{ width: 375px}

#HOME .news_img{ width: 100%; height:auto; }

}

@media screen and (max-width: 375px) {
	#HOME .home_holder{ width:  320px; padding: 0;}
	#HOME .home_news{ width:  320px;padding: 0;}
	.footer{ width:  325px}
	.site-wrap{  background-size: 375px}

	.mid_content{padding: 0 30px}
		#QUIZ .mid_content{width:100%; padding: 0 28px;}


	#QUIZ .quiz_mask{ width: 315px; height: 160px;}
	#QUIZ .quiz_cover{ bottom: 40px; margin-left: 15px;}
	#QUIZ .quiz_cover h1{ line-height: 20px}

	#QUIZ_detail .mid_content{ width: 320px; margin: 25px auto; padding: 0}
	#QUIZ_detail .mid_content2{ width: 360px; margin: 25px auto}
	#QUIZ_detail .mid_text h1{margin-bottom: 15px;}
	#QUIZ_detail .quiz_title .t_line{margin-bottom: 30px;}

	#REG .container{ width: 100%; }
	#REG input[type=text], #REG input[type=password],#REG .reg_btn,#REG .reg_btn2,.reg_width, .about_width,#REG select,input[type=range]{ width: 320px;}
		#REG input[type=text].error, #REG input[type=password].error,#REG select.error,input[type=range].error{ width: 320px;}
	#REG select.half{ width: 158px;}
	#REG .error_text{ width: 320px}
	#REG .error{ width: 320px}
	#REG #reg_page{ width: 320px}

}

@media screen and (max-width: 320px) {
	body{zoom:90%;}
	#HOME .home_holder{ width:  320px; padding: 0 15px;}
	#HOME .home_news{ width:  320px;padding: 0 15px;}
	#QUIZ .quiz_mask{ width: 295px; height: 150px;}
	#QUIZ_detail .mid_content{ width: 320px; margin: 25px auto; padding: 0 15px;}
	#QUIZ_detail .mid_content2{ width: 360px; margin: 25px auto;padding: 0 35px;}


}


@-webkit-keyframes fadeIn { from { opacity:0;transform: translate(0px, 30px); } to { opacity:1;transform: translate(0px, 0px); } }
@-moz-keyframes fadeIn { from { opacity:0;transform: translate(0px, 30px); } to { opacity:1;transform: translate(0px, 0px); } }
@keyframes fadeIn { from { opacity:0;transform: translate(0px, 30px); } to { opacity:1;transform: translate(0px, 0px); } }
.fade-in {opacity:0;
  -webkit-animation:fadeIn ease-out 1;-moz-animation:fadeIn ease-out 1;animation:fadeIn ease-out 1;
  -webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;
  -webkit-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:0.5s;}
.fade-in.one {-webkit-animation-delay: 0.1s;-moz-animation-delay: 0.1s;animation-delay: 0.1s;}
.fade-in.two {-webkit-animation-delay: 0.5s;-moz-animation-delay:0.5s;animation-delay: 0.5s;}
.fade-in.three {-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;animation-delay: 0.9s;}
.fade-in.four {-webkit-animation-delay: 1.3s;-moz-animation-delay: 1.3s;animation-delay: 1.3s;}
.fade-in.five {-webkit-animation-delay: 1.7s;-moz-animation-delay: 1.7s;animation-delay: 1.7s;}
.fade-in.six {-webkit-animation-delay: 2.1s;-moz-animation-delay: 2.1s;animation-delay: 2.1s;}
.fade-in.seven {-webkit-animation-delay: 2.5s;-moz-animation-delay: 2.5s;animation-delay: 2.5s;}
.fade-in.eight {-webkit-animation-delay: 1.3s;-moz-animation-delay: 1.3s;animation-delay: 1.3s;}

@-webkit-keyframes fadeIn2 { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn2 { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn2 { from { opacity:0; } to { opacity:1; } }
.fade-in2 {opacity:0;
  -webkit-animation:fadeIn2 ease-out 1;-moz-animation:fadeIn2 ease-out 1;animation:fadeIn2 ease-out 1;
  -webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;
  -webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:0.4s;}
.fade-in2.one {-webkit-animation-delay: 0.1s;-moz-animation-delay: 0.1s;animation-delay: 0.1s;}