@charset "UTF-8";
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  font-family: "Helvetica Neue","微軟正黑體","Helvetica","Arial","PingFangTC-Light","STHeitiTC-Light","Microsoft JhengHei",sans-serif;
  font-size: 21px;
  -webkit-text-size-adjust: none; /*iPhone旋轉後 文字不要放大*/
}

.wrapper {
  width: 100%;
  color: #fff;
  background:#3e3e3e url(/common/images/ieupgrade/indexBg.jpg) repeat;
}

/* 完成問卷，總結畫面 */
.wrapper_star31,
.wrapper_tmd {
  width: 100%;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.wrapper_star31{
  background-image: url(/common/images/bg_star31_mobile.jpg);
  background-color: #691b0e;
}
.wrapper_tmd{
  background-image: url(/common/images/bg_tmd.jpg);
  background-color: #4a0089;
}
@media screen and (min-width: 768px) {
  .wrapper_star31{
    background-image: url(/common/images/bg_star31.jpg);
    background-size: 150%;
  }
  .wrapper_tmd{
    background-image: url(/common/images/bg_tmd.jpg);
    background-size: 150%;
  }
}
@media screen and (min-width: 1280px) {
  .wrapper_star31,
  .wrapper_tmd{
    background-size: 140%;
  }
}
@media screen and (min-width: 1600px) {
  .wrapper_star31,
  .wrapper_tmd{
    background-size: 120%;
  }
}
@media only screen and (orientation: portrait){
  .wrapper_star31{
    background-image: url(/common/images/bg_star31_mobile.jpg);
    background-size: 100%;
  }
  .wrapper_tmd{
    background-image: url(/common/images/bg_tmd_mobile.jpg);
    background-size: 100%;
  }
}

.wrapper_star31 .header,
.wrapper_tmd .header {
  height: 100vh;
}


h1 {
  display: none;
}

a, a:hover {
  text-decoration: none;
}

/* ================= 內容 ================= */
.content {
  width: 100%;
}

.content .container {
  width: 960px;
  margin: 0 auto;
  position: relative;
  padding: 30px 20px;
}

.content .container > h3 {
  font-size: 1.5em;
  font-weight: bold;
  padding: 0;
  width: 100%;
  border-bottom: 1px #ffffff solid;
  margin-bottom: 3%;
}

.content .container > h3 img {
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: 2% 0;
}

.content .container > p {
  margin: 0 2em;
  line-height: 34px;
}

.content .container > p a {
  color: #00f0ff;
  text-decoration: underline;
}

.content .container > p a:hover {
  color: #ff8400;
}

.content .container ol,
.content .container ul {
  margin-left: 3em;
}

.content .container ol li,
.content .container ul li {
  font-size: 1em;
  line-height: 1.75em;
}

.content .container ol li a,
.content .container ul li a {
  color: #00f0ff;
  text-decoration: underline;
}

.content .container ol li a:hover,
.content .container ul li a:hover {
  color: #ff8400;
}

.content .container .ImgStyleA {
  width: 10%;
}

.content .container .ImgStyleB {
  width: 13%;
}

.content .container .ImgStyleC {
  width: 16%;
}


/* ================= image設定 ================= */
.img-responsive {
  max-width: 100%;
}

.img-border {
  border: 3px solid #bbb;
}

.img-radius {
  border-radius: 20px;
}

.img-block {
  display: block;
  margin: 10px auto 0 auto;
}

/* ================= text設定 ================= */
.txt-center {
  text-align: center;
}

.txt-indent-3em {
  display: block;
  margin-left: 3em;
  text-indent: -3em;
}

.txt-indent-4em {
  display: block;
  margin-left: 4em;
  text-indent: -4em;
}

.txt-indent-5em {
  display: block;
  margin-left: 5em;
  text-indent: -5em;
}

/* ================= 文字設定 ================= */
.f-danger {
  color: #f00;
}

.f-fun {
  color: #f7f40a;
}

.f-primary {
  color: #007bff;
}

.f-success {
  color: #28a745;
}

.f-info {
  color: #17a2b8;
}

.f-beauty {
  color: #f000ff;
}

.f-light {
  color: #fff;
}

.f-wraning {
  color: #ff9c00;
}

.f-dark {
  color: #000;
}

.f-secondary {
  color: #868e96;
}

.f-bold {
  font-weight: bold;
}

.f-lg {
  font-size: 3em;
}

.f-sm {
  font-size: 0.8em;
}

/* ================= 內容區塊 ================= */
.box { margin: 3.5% auto; width: 100%; color: #000; overflow: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: inline-block;
  padding: 0 52px;
}

.box_size { width: 95%; }

.box .box_role { width: 222px; height: 343px; background-image: url(/common/images/ieupgrade/role.png); float: left; margin: 0 18px 0 26px; }

.box_btn { float: left; margin: 29px 0 0 0; }

.box_btn .box_btntit { width: 100%; text-align: center; }
.box_btn .box_btntit img { min-width: 204px; }

.box_btn .box_btnlink { margin: 0 8px; padding: 15px 10px; float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: inline-block;
  border-radius: 20px;
    -moz-border-radius: 20px; /* Firefox */
    -webkit-border-radius: 20px; /* Safari and Chrome */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.33) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0.33) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0.33) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54000000', endColorstr='#54000000',GradientType=1 ); /* IE6-9 */
  }

.box_btn .box_btnlink .box_btnicon {  float: left; }

.box_btn .box_btnlink .box_btnicon a{ width: 156px; height: 156px; display: block; background-position: center center; margin: 5px 15px;
  background-repeat: no-repeat; }
.box_btn .box_btnlink .box_btnicon a:hover{ -webkit-filter:brightness(1.3); }

.icon_chrome a{ background-image: url(/common/images/ieupgrade/icon_chrome.png); }
.icon_firefox a{ background-image: url(/common/images/ieupgrade/icon_firefox.png); }
.icon_safari a{ background-image: url(/common/images/ieupgrade/icon_safari.png); }
.icon_ie a{ background-image: url(/common/images/ieupgrade/icon_ie.png); }

.box_btnicon > p{ color: #a1a1a1; text-align: center; }


/*================= 底部 =================*/
.footer_logo, .footer_logo a { width: 264px; height: 64px; }
.footer_logo { z-index: 999; margin: 30px auto 0 auto; }
.footer_logo a { display: block; background: url(/common/images/ieupgrade/logo.png); background-repeat: no-repeat; background-position: center center; }


/*================= 內容區塊獨立樣式設定 =================*/
[data-boxstyle="style01"] {
  border-radius: 10px;
  background: #8f82bc;
}

[data-boxstyle="style01"] p {
  color: #fff6c3;
  text-align: left;
  line-height: 1.5em;
}

[data-boxstyle="style02"] {
  color: #233300;
  line-height: 1.5em;
  outline: 2px dashed #eaffba;
  outline-offset: -12px;
  border-radius: 15px;
  background: #96cc1b;
}


@media only screen and (max-width: 812px) {

  .wrapper {
    overflow: hidden;
  }
  .content {
    padding-bottom: 5%;
  }

  .content .container {
    width: 98%;
    padding: 20px 10px;
  }
  .box { overflow-x: hidden; }
  .box .box_role{ display: none; float: none; }
  .box_btn { margin: 0 5px; width: 100%; float: none; }
  .box_btn .box_btnlink { float: none; }
  .box_btn .box_btnlink .box_btnicon a{ margin: 0 auto; }
  .box_btnicon { margin-bottom: 10px; float: none; }

}

/* 前往外部連結 區塊樣式 */
.message_box{
  background-color: #fff;
  color: #000;
  width: 70%;
  margin: 1% auto;
  text-align: center;
  font-size: .9em;
  border-radius: 15px;
  box-shadow: #ededed 3px 3px 0px 1px;
}
@media only screen and (max-width: 768px) {
  .message_box{
    width: 100%;
  }
}
.message_box h3{
  background-color: #8cb41e;
  padding: 12px;
  border-radius: 15px 15px 0 0;
  font-size: 1.1em;
  color: #fff;
}
.message_box p{
  margin: 5% 0;
}
.link_url{
  word-break: break-all;
}
.message_box .message_content{
  padding: 1% 5%;
}
.message_box .message_checktit{
  display: flex;
  justify-content: center;
  align-items: center;
}
.message_box .message_checktit input{
  width: 0.9em;
  height: 0.9em;
  margin-right: 3px;
}
.message_box button{
  width: 60%;
  padding: 10px 5px;
  margin: 5% 0;
  border-radius: 10px;
  background-color: #50871f;
  box-shadow: #375e15 1px 1px 0px 2px;
  color: #ffffff;
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 1em;
  cursor: pointer;
  border: none;
}
@media only screen and (max-width: 768px) {
  .message_box button{
    width: 80%;
  }
}
.message_box button:hover{
  background-color: #62a824;
}