@charset "UTF-8";
/* ------------------------------------
 *  Width and Height
 * ------------------------------------ */
/*wrap*/
/*nav*/
/* ------------------------------------
 *  Color
 * ------------------------------------ */
/* ------------------------------------
 *  Font
 * ------------------------------------ */
/*----------Setting----------*/
* {
  position: relative;
  box-sizing: border-box; }

html {
  position: relative;
  width: 100%;
  height: 100%; }

body {
  font-family: "Gen Jyuu Gothic", "PingFang TC", Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體";
  background: #fff;
  font-size: 1em;
  color: #000;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  outline: none; }

a {
  text-decoration: none;
  transition: ease 0.3s;
  outline: none;
  color: #000; }

a:hover {
  text-decoration: none;
  color: #ff7b4a; }

::selection {
  background-color: #ff7b4a;
  color: #fff; }

::-moz-selection {
  background-color: #ff7b4a;
  color: #fff; }

img {
  border: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  max-width: 100%;
  height: auto; }

h1 {
  font-size: 1.5em;
  line-height: 26px;
  padding: 10px 0px 5px 0px;
  letter-spacing: 1px; }

h2 {
  font-size: 1.3em;
  line-height: 24px;
  padding: 10px 0px 5px 0px;
  letter-spacing: 1px; }

h3 {
  font-size: 1.1em;
  padding: 10px 0px 5px 0px;
  letter-spacing: 1px; }

h4 {
  font-size: 1em;
  padding: 10px 0px 5px 0px;
  letter-spacing: 1px; }

p {
  padding: 10px 0px; }

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 5px;
  overflow: hidden; }
  table.nowrap {
    white-space: nowrap; }
  table thead {
    background-color: #ff7b4a; }
    table thead tr,
    table thead th,
    table thead td {
      color: #fff;
      font-weight: bold; }
  table tbody tr {
    transition: ease 0.3s; }
    table tbody tr:nth-child(odd) {
      background-color: #f5f5f5; }
    table tbody tr:hover {
      background-color: #eeeeee; }
  table tr,
  table th,
  table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: #eeeeee solid 1px; }
    table tr .alignCenter,
    table th .alignCenter,
    table td .alignCenter {
      text-align: center; }
    table tr .alignRight,
    table th .alignRight,
    table td .alignRight {
      text-align: right; }

ul {
  margin-left: 20px;
  padding-top: 10px;
  display: block; }
  ul li {
    list-style: disc;
    margin: 0; }

ol {
  margin-left: 20px;
  padding-top: 10px;
  display: block; }
  ol li {
    display: block;
    list-style: decimal;
    padding: 0px 0px 10px 0px;
    margin: 0; }

i {
  display: inline-block;
  padding: 0 3px;
  line-height: 2em;
  vertical-align: middle; }

sub,
sup {
  font-size: 0.7em; }

/*------font color size*/
.wOrange {
  color: #ff7b4a; }

.wBlue {
  color: #3473c3; }

* {
  -webkit-overflow-scrolling: touch; }

main {
  width: 1020px;
  max-width: 94%;
  line-height: 35px;
  margin: auto; }
  main section {
    padding: 40px 0 0 0;
    border-top: #ff7b4a solid 5px; }
    main section.flesContent {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      padding-bottom: 25px; }
    main section h2 {
      text-align: center;
      font-size: 3em;
      line-height: 1.3em;
      padding-bottom: 40px;
      font-weight: bold; }
      main section h2 i {
        top: -10px;
        color: #ff7b4a;
        padding: 0 10px; }
    main section ul li {
      text-align: center; }
    main section .point {
      color: #3473c3;
      font-weight: bold;
      text-align: center;
      font-size: 1.5em;
      line-height: 1.7em; }
    main section .areaTitle {
      color: #ff7b4a;
      font-weight: bold;
      font-size: 2em;
      line-height: 1.3em;
      padding-bottom: 40px; }
      main section .areaTitle.align-center {
        text-align: center; }

.high-space {
  height: 0px; }

.high-space-bottom {
  height: 40px; }

.clicked-row {
  cursor: pointer; }

.sub-title {
  font-size: 1.4em;
  text-align: center;
  padding-bottom: 20px;
  color: #3473c3;
  font-weight: bold; }

.slogan {
  border: none;
  text-align: center;
  padding-top: 100px; }
  .slogan h1,
  .slogan i {
    display: inline-block; }
  .slogan h1 {
    font-size: 2.7em;
    line-height: 1.3em;
    font-weight: bold; }
    .slogan h1 span.first-handing {
      font-size: 0.8em; }
  .slogan i {
    font-size: 6em;
    color: #ff7b4a;
    width: 100px;
    height: 90px;
    line-height: 1em;
    vertical-align: baseline; }
    .slogan i.icon-ok {
      color: #3473c3; }

.doList .bubble {
  background: url("/images/premium/bubble.png") center 0 no-repeat;
  background-size: 400px auto;
  width: 400px;
  height: 180px;
  margin-top: 30px; }
  .doList .bubble span {
    position: absolute;
    display: block;
    width: 180px;
    height: auto;
    left: 47%;
    top: 33px;
    color: #3473c3;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1px; }

.doList ul {
  padding: 20px 0 0 0;
  margin-left: 40px; }
  .doList ul li {
    list-style: none;
    font-size: 1.6em;
    font-weight: bold;
    padding-bottom: 40px;
    text-align: left; }
    .doList ul li a {
      display: inline-block;
      padding-bottom: 5px;
      color: #000; }
      .doList ul li a:hover {
        color: #3473c3; }
      .doList ul li a span {
        display: inline-block; }
        .doList ul li a span:before {
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 3px;
          background-color: #3473c3;
          bottom: -8px; }
      .doList ul li a i {
        position: absolute;
        left: -70px;
        font-size: 2.3em;
        top: -10px;
        color: #ff7b4a;
        opacity: 0;
        transition: ease 0.3s; }
      .doList ul li a:hover i {
        opacity: 1; }

.mobile-menu {
  display: none; }

.mobile-area {
  display: none; }

.contentList {
  padding: 0 10% 0 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /*三步驟完成發票交付 & 營業稅申報*/
  /*登記地址*/
  /*設計服務&簡單開餐廳*/
  /*馬上申請*/ }
  .contentList.full {
    padding: 40px 0% 0 0%; }
  .contentList .areaTitle {
    flex: 100%; }
  .contentList h4 {
    font-size: 2.3em;
    font-weight: bold;
    padding-top: 0; }
  .contentList ul {
    margin: 0;
    padding: 0;
    width: 50%; }
    .contentList ul li {
      list-style: none;
      font-size: 1.2em;
      font-weight: bold; }
      .contentList ul li:before {
        content: "";
        display: block;
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #ff7b4a;
        border-radius: 50%;
        top: 8px;
        left: -15px; }
  .contentList figure {
    width: 200px; }
    .contentList figure img {
      display: block;
      width: 100%;
      height: auto; }
    .contentList figure.tool {
      width: 120px; }
    .contentList figure.map {
      padding-left: 70px;
      width: 320px; }
    .contentList figure.brand {
      width: calc(100% - 400px);
      padding-left: 0; }
    .contentList figure.designPic {
      width: 800px;
      max-width: 100%;
      margin: auto;
      padding-bottom: 30px; }
    .contentList figure.gift {
      width: 70px; }
    .contentList figure.ichef {
      width: 140px;
      padding-bottom: 20px;
      margin: auto; }
  .contentList .toolInfo {
    width: 50%; }
    .contentList .toolInfo .areaTitle {
      padding-bottom: 10px; }
    .contentList .toolInfo p {
      font-size: 1.2em;
      font-weight: bold; }
  .contentList .viewBtn {
    text-align: center;
    padding: 70px 0; }
    .contentList .viewBtn a {
      display: inline-block;
      font-size: 1.2em;
      width: 160px;
      color: #fff;
      background-color: #3473c3;
      padding: 10px;
      border-radius: 10px;
      letter-spacing: 1px; }
      .contentList .viewBtn a:hover {
        background-color: #ff7b4a; }
      .contentList .viewBtn a i {
        font-size: 1em; }
  .contentList .step .areaTitle {
    padding-top: 30px;
    padding-bottom: 0;
    text-align: center; }
  .contentList .step figure {
    width: 140px;
    margin: auto; }
  .contentList figure.map span {
    position: absolute;
    color: #3473c3;
    font-size: 1.3em;
    font-weight: bold;
    top: -10px;
    left: 220px; }
    .contentList figure.map span:last-child {
      top: 150px;
      left: 60px; }
  .contentList .address {
    width: 400px; }
    .contentList .address .addressList {
      width: 200px;
      margin: auto;
      text-align: left; }
    .contentList .address .areaTitle {
      padding: 20px 0; }
    .contentList .address p {
      font-size: 1.2em;
      font-weight: bold;
      padding: 0 0 30px 0; }
    .contentList .address .registration-desc {
      padding-left: 60px; }
      @media (max-width: 750px) {
        .contentList .address .registration-desc {
          padding-left: 0;
          width: 80%;
          margin: 0 auto; } }
      @media (max-width: 450px) {
        .contentList .address .registration-desc {
          font-size: 1rem; } }
  .contentList .registration-brand-description {
    width: 300px;
    padding-left: 50px; }
    .contentList .registration-brand-description .addressList {
      width: 300px;
      margin: auto;
      text-align: left; }
    .contentList .registration-brand-description .areaTitle {
      padding: 20px 0; }
    .contentList .registration-brand-description p {
      font-size: 1.2em;
      font-weight: bold;
      padding: 0 0 30px 0px; }
  .contentList .designList {
    padding-bottom: 30px; }
    .contentList .designList p {
      font-size: 1.2em; }
    .contentList .designList ul {
      width: 100%;
      padding-left: 25px; }
      .contentList .designList ul li {
        list-style: disc;
        font-size: 1.2em;
        font-weight: normal;
        padding-bottom: 10px; }
        .contentList .designList ul li:before {
          display: none; }
  .contentList .note {
    font-size: 1.6em;
    font-weight: bold;
    color: #3473c3; }
    .contentList .note.note-middle {
      padding-top: 20px; }
  .contentList .video {
    width: 100%; }
    .contentList .video p {
      font-size: 1.2em; }
  .contentList .designList ul li {
    text-align: left; }
  .contentList.ichefClick {
    display: none; }
    .contentList.ichefClick .ichefDown {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; }
  .contentList .partnerList {
    width: 50%;
    border-right: #ff7b4a dotted 5px;
    padding: 0 40px;
    color: #3473c3; }
    .contentList .partnerList:last-child {
      border: none; }
    .contentList .partnerList .areaTitle {
      text-align: center;
      height: 150px; }
    .contentList .partnerList figure {
      width: 100%;
      height: 250px; }
      .contentList .partnerList figure.shake-hand {
        padding-top: 50px; }
    .contentList .partnerList p {
      font-size: 1.2em;
      height: 100px; }

.btnArea {
  padding: 30px 0;
  text-align: center; }
  .btnArea a {
    display: inline-block;
    font-size: 1.6em;
    width: auto;
    min-width: 240px;
    color: #fff;
    background-color: #ff7b4a;
    padding: 15px 20px;
    border-radius: 10px;
    letter-spacing: 1px;
    margin: 0 5px 10px 5px;
    line-height: 1.3em; }
    .btnArea a:hover {
      background-color: #3473c3; }
    .btnArea a.blueBg {
      background-color: #3473c3; }
      .btnArea a.blueBg:hover {
        background-color: #ff7b4a; }
    .btnArea a i {
      font-size: 0.9em;
      opacity: 0;
      transition: ease 0.3s;
      position: absolute;
      right: 5px;
      top: 20px; }
    .btnArea a:hover i {
      opacity: 1; }
  .btnArea p {
    font-size: 1.3em;
    font-weight: bold;
    padding: 30px 0;
    letter-spacing: 1px;
    line-height: 1.3em;
    text-align: left; }

/*商標申請*/
ul.country {
  margin: 0;
  padding: 30px 0 0 0; }
  ul.country li {
    list-style: none;
    padding: 15px 70px 15px 0px;
    margin: 0;
    display: inline-block;
    width: 24%;
    font-size: 1.2em;
    font-weight: bold;
    vertical-align: top; }
    ul.country li .infoBox {
      position: absolute;
      top: 17px;
      right: 30px;
      width: 40px;
      cursor: pointer;
      text-align: right; }
      ul.country li .infoBox i {
        color: #999999;
        font-size: 1.2em;
        top: -6px; }
      ul.country li .infoBox:hover i {
        color: #3473c3; }
      ul.country li .infoBox span.des {
        position: absolute;
        width: 140px;
        padding: 5px 10px;
        background-color: #fcfbed;
        border: #ff7b4a solid 4px;
        z-index: 999;
        font-size: 0.8em;
        border-radius: 10px;
        top: 30px;
        right: -50px;
        box-shadow: #999999 0px 2px 10px;
        display: none;
        text-align: left; }

.ichefBtn {
  margin: auto;
  padding: 10px 0; }
  .ichefBtn a {
    display: block;
    border: #ff7b4a solid 5px;
    border-radius: 50px;
    padding: 5px;
    font-size: 1.2em;
    color: #ff7b4a;
    font-weight: bold; }
    .ichefBtn a i {
      font-size: 1.8em;
      line-height: 1em;
      padding-right: 15px;
      font-weight: normal; }
    .ichefBtn a:hover {
      color: #3473c3;
      border: #3473c3 solid 5px; }
  .ichefBtn.openBtn {
    width: 205px; }
  .ichefBtn.closeBtn {
    display: none;
    width: 120px; }

/* ------------------------------------------------- */
/* 電子發票辦到好 */
section#e-invoice .section-preface {
  color: #3473c3;
  font-weight: bold;
  font-size: 24px;
  text-align: center; }

section#e-invoice .logo-section {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 30px; }
  section#e-invoice .logo-section figure {
    width: 33.3333%;
    padding: 15px; }
    section#e-invoice .logo-section figure img {
      display: block;
      margin: 0 auto; }
    section#e-invoice .logo-section figure.to-center {
      display: flex;
      justify-content: center;
      align-items: center; }
    section#e-invoice .logo-section figure.separator {
      border-right: 4px #ff7b4a solid; }

/* ------------------------------------------------- */
/* 網域與信箱申請 */
#domain-email-apply {
  /* 網域與信箱申請 資訊表單 */ }
  #domain-email-apply .domain-desktop-show {
    display: block; }
  #domain-email-apply .designList {
    text-align: center; }
    #domain-email-apply .designList .domain-apply {
      width: 100%;
      padding-bottom: 30px; }
      #domain-email-apply .designList .domain-apply img {
        margin: 0px auto;
        width: 80%; }
  #domain-email-apply .contentList {
    padding-bottom: 30px; }
  #domain-email-apply .domain-info-table {
    display: flex;
    padding: 15px; }
    #domain-email-apply .domain-info-table .table-row {
      width: 100%;
      display: flex;
      padding: 30px 10px 25px 10px; }
    #domain-email-apply .domain-info-table .table-row {
      border-bottom: 2px solid #ddd; }
      #domain-email-apply .domain-info-table .table-row .table-col-1 {
        display: flex;
        width: 12%; }
        #domain-email-apply .domain-info-table .table-row .table-col-1.row-title {
          font-size: 1.5em;
          font-weight: bold;
          cursor: pointer; }
          #domain-email-apply .domain-info-table .table-row .table-col-1.row-title div i {
            color: #ff7b4a;
            font-size: 20px; }
      #domain-email-apply .domain-info-table .table-row .table-col-2 {
        display: flex;
        width: 44%;
        flex-direction: column; }
      #domain-email-apply .domain-info-table .table-row .table-col-3 {
        display: flex;
        width: 44%;
        flex-direction: column; }
      #domain-email-apply .domain-info-table .table-row .cell-hide {
        display: none; }
      #domain-email-apply .domain-info-table .table-row .item-price {
        font-size: 28px;
        font-weight: bold;
        color: #ff7b4a;
        padding-bottom: 24px; }
      #domain-email-apply .domain-info-table .table-row ul {
        width: 80%; }
        #domain-email-apply .domain-info-table .table-row ul li {
          font-weight: normal;
          text-align: left; }
    #domain-email-apply .domain-info-table .title {
      font-size: 2em;
      font-weight: bold;
      padding-bottom: 20px;
      border-bottom: 3px solid #ff7b4a; }
      #domain-email-apply .domain-info-table .title div {
        padding-left: 30px; }
  #domain-email-apply .domain-mobile-show {
    display: none; }

.turnDown {
  transition: all 0.4s ease;
  transform: rotateZ(90deg); }

.turnBack {
  transition: all 0.4s ease;
  transform: none; }