@charset "UTF-8";
/*=========================================================
|-> Default File
=========================================================*/
/*----------------------------------------------------------------------------------------------
Theme Project: tattpe 泰國觀光局
Designed by : Evy
Front-End by : Evy
Author: 百崴數位科技股份有限公司 PAVI Digital Tech. Co., Ltd.
Author Web: https://www.pavi.com.tw/
----------------------------------------------------------------------------------------------*/
/*---------------------------------------------------
|-> a Link
---------------------------------------------------*/
/*--------------------------------------------------------------------------------
|-> btn / 背景色, 字色, 框色, 移入背景色, 移入字色, 移入框色, 圓角
--------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------
|-> Reset
----------------------------------------------------------------------------------------------*/
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a,
a:visited, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  list-style: none; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  vertical-align: middle; }

input:focus, button:focus {
  outline: none; }

/*=========================================================
|-> Shared File
=========================================================*/
/*----------------------------------------------------------------------------------------------
|-> Global
----------------------------------------------------------------------------------------------*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

input {
  -webkit-appearance: none;
  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
  -moz-appearance: none;
  /* FireFox */
  appearance: none; }

html {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 0; }

body {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, "Microsoft JhengHei";
  font-size: 16px;
  color: #333;
  line-height: 1.6em;
  letter-spacing: 1px;
  padding: 0;
  overflow-x: hidden;
  display: block; }
  body.popupOpen {
    overflow: hidden; }


a,
a:visited {
  outline: none;
  /* for Firefox Google Chrome  */
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  a:hover {
    color: #dd2881;
    text-decoration: none; }

.hidden {
  display: none; }

.mark {
  color: #dd2881;
  background: none; }

h1 {
  font-size: 28px;
  margin: 0 auto;
  padding: 30px 0;
  line-height: 1.4em; }

h2 {
  font-size: 28px;
  margin: 0 auto;
  padding: 30px 0;
  line-height: 1.4em; }

h3 {
  font-size: 20px;
  margin: 0 auto;
  padding: 5px 0; }

h4 {
  font-size: 24px;
  margin: 25px auto; }

p {
  margin-bottom: 20px; }

.qScrollTop {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 99;
  opacity: 0; }

/*---------------------------------------------------
|-> To Top
---------------------------------------------------*/
#topcontrol {
  z-index: 99;
  margin-right: 20px;
  margin-bottom: 20px;
  width: 40px;
  height: 40px; }
  #topcontrol a {
    text-align: center;
    display: block;
    opacity: 0.7;
    color: #fff;
    background: #dd2881;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    border-radius: 20px; }
    #topcontrol a:before {
      display: inline-block;
      margin: 0 auto;
      line-height: 36px;
      font-size: 26px;
      font-family: "tat";
      content: "m"; }
    #topcontrol a:visited {
      color: #ffc83e; }
    #topcontrol a:hover {
      opacity: 1; }

/*---------------------------------------------------
|-> Loading
---------------------------------------------------*/
.loading {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  text-align: center; }
  .loading div {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -65px; }

/*---------------------------------------------------
|-> Fancybox
---------------------------------------------------*/
.fancybox-close {
  background: none;
  opacity: .5; }
  .fancybox-close:before {
    display: block;
    font-family: 'tat';
    content: 'l';
    color: #fff;
    font-size: 30px;
    margin-left: 30px;
    margin-top: 10px; }
  .fancybox-close:hover {
    opacity: 1; }

/*---------------------------------------------------
|-> Share
---------------------------------------------------*/
.groupMain {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0 40px 0; }

/*----------------------------------------------------------------------------------------------
|-> Header
----------------------------------------------------------------------------------------------*/
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 140px;
  background: white;
  border-bottom: 1px solid rgba(106, 81, 40, 0.7);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .header.fixed {
    position: fixed;
    height: 45px; }
    .header.fixed .logo, .header.fixed .topGroup {
      display: none; }
    .header.fixed .topArea {
      width: auto;
      padding-top: 0; }
    .header.fixed .welcome {
      display: none; }
    .header.fixed .menu {
      width: auto;
      margin-left: 0; }
      .header.fixed .menu ul {
        display: block;
        padding: 0; }
        .header.fixed .menu ul li {
          width: 12.5%; }
          .header.fixed .menu ul li dl {
            left: 20%; }
            .header.fixed .menu ul li dl.featureList {
              left: 0;
              margin: 50px 0 0 10%; }
          .header.fixed .menu ul li .subArea {
            top: 45px; }
          .header.fixed .menu ul li a.mainLink, .header.fixed .menu ul li a.noSub {
            height: 45px;
            line-height: 45px;
            top: -1px;
            padding: 0;
            display: block; }
            .header.fixed .menu ul li a.mainLink [class^='tat-'], .header.fixed .menu ul li a.noSub [class^='tat-'] {
              display: none; }
  .header a.tat-delete {
    display: none;
    position: absolute;
    z-index: 91;
    top: 8px;
    right: 8px;
    color: #fff;
    width: 45px;
    height: 45px;
    text-align: center;
    opacity: .7;
    -webkit-border-radius: 17px;
    border-radius: 17px; }
    .header a.tat-delete:visited {
      color: #fff;
      opacity: 1; }
    .header a.tat-delete:hover {
      color: #ee96c2;
      opacity: 1; }
    .header a.tat-delete:before {
      line-height: 45px;
      font-size: 30px; }

.topArea {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-top: 80px; }

.logo {
  position: absolute;
  top: 30px;
  height: 85px; }
  .logo img {
    max-height: 100%; }

.topGroup {
  position: absolute;
  top: 10px;
  right: 0; }
  .topGroup dl.shareList {
    display: inline-block;
    vertical-align: top; }
    .topGroup dl.shareList dd {
      display: inline-block;
      vertical-align: top;
      margin-right: 1px;
      margin-bottom: 10px; }
      .topGroup dl.shareList dd a[class^="tat-"] {
        display: inline-block;
        text-align: center;
        width: 32px;
        height: 32px;
        border: 1px solid #6a5128;
        -webkit-border-radius: 18px;
        border-radius: 18px; }
        .topGroup dl.shareList dd a[class^="tat-"]:before {
          position: relative;
          text-align: center;
          font-size: 20px;
          line-height: 30px;
          color: #6a5128; }
        .topGroup dl.shareList dd a[class^="tat-"]:visited {
          color: #6a5128; }
          .topGroup dl.shareList dd a[class^="tat-"]:visited:before {
            color: #6a5128; }
        .topGroup dl.shareList dd a[class^="tat-"]:hover {
          color: #dd2881;
          border: 1px solid #dd2881; }
          .topGroup dl.shareList dd a[class^="tat-"]:hover:before {
            color: #dd2881; }
      .topGroup dl.shareList dd a.tat-en {
        color: #dd2881;
        border: 1px solid #dd2881; }
        .topGroup dl.shareList dd a.tat-en:visited {
          color: #dd2881; }
        .topGroup dl.shareList dd a.tat-en:hover {
          color: #dd2881;
          border: 1px solid #dd2881; }
      .topGroup dl.shareList dd a.tat-line {
        color: #30a339;
        border: 1px solid #30a339; }
        .topGroup dl.shareList dd a.tat-line:before {
          color: #30a339; }
        .topGroup dl.shareList dd a.tat-line:visited {
          color: #30a339; }
          .topGroup dl.shareList dd a.tat-line:visited:before {
            color: #30a339; }
        .topGroup dl.shareList dd a.tat-line:hover {
          color: #30a339;
          border: 1px solid #30a339; }
          .topGroup dl.shareList dd a.tat-line:hover:before {
            color: #30a339; }
      .topGroup dl.shareList dd a.tat-youtube {
        color: #e84438;
        border: 1px solid #e84438; }
        .topGroup dl.shareList dd a.tat-youtube:before {
          color: #e84438; }
        .topGroup dl.shareList dd a.tat-youtube:visited {
          color: #e84438; }
          .topGroup dl.shareList dd a.tat-youtube:visited:before {
            color: #e84438; }
        .topGroup dl.shareList dd a.tat-youtube:hover {
          color: #e84438;
          border: 1px solid #e84438; }
          .topGroup dl.shareList dd a.tat-youtube:hover:before {
            color: #e84438; }
      .topGroup dl.shareList dd a.tat-facebook {
        color: #4875b9;
        border: 1px solid #4875b9; }
        .topGroup dl.shareList dd a.tat-facebook:before {
          color: #4875b9; }
        .topGroup dl.shareList dd a.tat-facebook:visited {
          color: #4875b9; }
          .topGroup dl.shareList dd a.tat-facebook:visited:before {
            color: #4875b9; }
        .topGroup dl.shareList dd a.tat-facebook:hover {
          color: #4875b9;
          border: 1px solid #4875b9; }
          .topGroup dl.shareList dd a.tat-facebook:hover:before {
            color: #4875b9; }
      .topGroup dl.shareList dd a.tat-facebook:before {
        margin-left: 2px; }
      .topGroup dl.shareList dd a.icon-instagram {
        display: inline-block;
        text-align: center;
        width: 32px;
        height: 32px;
        -webkit-border-radius: 18px;
        border-radius: 18px;
        background: url(../images/igstagram.png) left top no-repeat;
        background-size: 100% auto; }
      .topGroup dl.shareList dd a.tat-en {
        font-size: 14px;
        line-height: 31px;
        text-align: center; }
      .topGroup dl.shareList dd a {
        opacity: 0.8; }
        .topGroup dl.shareList dd a:hover {
          opacity: 1; }

.searchArea label:hover a {
  color: #dd2881; }

.searchArea label:hover input[type="submit"] {
  cursor: pointer; }

.searchArea input[type="search"] {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  width: 100%;
  border-bottom: 1px solid #6a5128;
  color: #6a5128;
  font-size: 14px;
  padding: 5px 40px 5px 5px;
  -webkit-border-radius: 0;
  border-radius: 0; }
  .searchArea input[type="search"]::-webkit-input-placeholder {
    color: #666; }
  .searchArea input[type="search"]::-webkit-search-cancel-button {
    /* Remove default */
    -webkit-appearance: none;
    /* Now your own custom styles */
    height: 15px;
    width: 15px;
    font-family: 'tat';
    content: 'B';
    color: #666;
    background: url(../images/delete.png);
    -webkit-background-size: 100% auto;
    /* Safari 3.0 */
    -moz-background-size: 100% auto;
    /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% auto;
    /* Opera 9.5 */
    background-size: 100% auto;
    opacity: .5; }

.searchArea input[type="submit"] {
  position: absolute;
  z-index: 3;
  bottom: -8px;
  right: 0px;
  padding: 0;
  opacity: 0; }

/*---------------------------------------------------
|-> Menu
---------------------------------------------------*/
a.tat-menu {
  display: none;
  position: absolute;
  z-index: 9;
  right: 0;
  top: 40px;
  width: 60px;
  height: 60px;
  text-align: center;
  color: #dd2881; }
  a.tat-menu:visited {
    color: #dd2881; }
  a.tat-menu:hover {
    color: #dd2881; }
  a.tat-menu:before {
    position: relative;
    font-size: 30px;
    line-height: 60px; }

.welcome {
  position: absolute;
  top: 15px;
  left: 200px; }
  .welcome .text {
    color: #dd2881; }
  .welcome .name {
    margin-left: 10px; }
  .welcome button {
    border: 1px solid #dd2881;
    background: none;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    color: #dd2881;
    padding: 2px 10px; }
    .welcome button a {
      color: #dd2881; }
      .welcome button a:visited {
        color: #dd2881; }
      .welcome button a:hover {
        color: #fff; }
    .welcome button:hover {
      background: #dd2881;
      color: #fff;
      cursor: pointer; }
      .welcome button:hover a {
        color: #fff; }

.menu {
  text-align: right;
  width: calc(100% - 200px);
  margin-left: 200px; }
  .menu ul {
    text-align: center; }
    .menu ul li {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      margin-left: -5px;
      width: 12.5%; }
      .menu ul li .shareGroup {
        position: relative;
        top: 6px; }
      .menu ul li a.mainLink, .menu ul li a.noSub {
        position: relative;
        top: -8px;
        display: block;
        text-align: center;
        vertical-align: top;
        margin: 0 0;
        height: 60px;
        border-left: 1px solid #e2dfdb; }
        .menu ul li a.mainLink span, .menu ul li a.noSub span {
          display: block; }
        .menu ul li a.mainLink [class^='tat-'], .menu ul li a.noSub [class^='tat-'] {
          font-size: 30px;
          height: 33px; }
          .menu ul li a.mainLink [class^='tat-']:before, .menu ul li a.noSub [class^='tat-']:before {
            color: #dd2881; }
          .menu ul li a.mainLink [class^='tat-'].tat-user, .menu ul li a.noSub [class^='tat-'].tat-user {
            font-size: 24px; }
            .menu ul li a.mainLink [class^='tat-'].tat-user::before, .menu ul li a.noSub [class^='tat-'].tat-user::before {
              position: relative;
              top: 4px; }
      .menu ul li a.icon-home {
        position: relative;
        top: 3px; }
      .menu ul li:hover .subArea {
        height: 248px; }
      .menu ul li:last-child:before {
        margin-left: 33px; }
      .menu ul li.select a.mainLink span, .menu ul li:hover a.mainLink span {
        color: #dd2881; }
      .menu ul li.select .subArea, .menu ul li:hover .subArea {
        -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.2); }
      .menu ul li a {
        color: #000; }
        .menu ul li a:visited {
          color: #000; }
        .menu ul li a:hover {
          color: #dd2881; }
      .menu ul li .subArea {
        position: absolute;
        top: 140px;
        width: 200%;
        height: 248px;
        height: 0;
        left: -50%;
        background: rgba(255, 255, 255, 0.85);
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        overflow: hidden; }
      .menu ul li dl {
        position: absolute;
        z-index: 5;
        top: 25px;
        left: 23.5%;
        margin-left: 260px;
        width: 150px;
        text-align: left;
        font-size: 18px; }
        .menu ul li dl dd {
          position: relative;
          display: block;
          line-height: 25px;
          height: auto;
          margin: 0;
          border-bottom: 1px dashed #6a5128; }
          .menu ul li dl dd:hover dl {
            display: block; }
          .menu ul li dl dd a {
            display: block;
            height: auto;
            color: #6a5128;
            line-height: 38px; }
            .menu ul li dl dd a:visited {
              color: #6a5128; }
            .menu ul li dl dd a:hover {
              color: #dd2881; }
      .menu ul li dl.featureList {
        position: relative;
        z-index: 3;
        top: 0;
        left: 0;
        width: auto;
        text-align: center;
        margin: 50px 0 0 18%; }
        .menu ul li dl.featureList .mascot {
          display: inline-block;
          vertical-align: top;
          width: 160px;
          margin-top: -20px; }
          .menu ul li dl.featureList .mascot img {
            width: 100%; }
        .menu ul li dl.featureList dd {
          display: inline-block;
          vertical-align: top;
          margin: 0 25px 50px 25px;
          border-bottom: none;
          font-size: 16px;
          max-width: 130px; }
          .menu ul li dl.featureList dd a {
            color: #333;
            word-wrap: break-word;
            word-break: break-all;
            line-height: 1.3em; }
            .menu ul li dl.featureList dd a:visited {
              color: #333; }
            .menu ul li dl.featureList dd a:hover {
              color: #dd2881; }
          .menu ul li dl.featureList dd:hover a {
            color: #dd2881; }
          .menu ul li dl.featureList dd p {
            margin-bottom: 15px; }
          .menu ul li dl.featureList dd figure {
            width: 120px;
            height: 120px;
            line-height: 0;
            -webkit-border-radius: 60px;
            border-radius: 60px;
            overflow: hidden;
            margin: 0 auto 20px auto; }
            .menu ul li dl.featureList dd figure a {
              display: block;
              width: 100%;
              height: 100%; }
              .menu ul li dl.featureList dd figure a img {
                max-height: 100%; }

/*----------------------------------------------------------------------------------------------
|-> Google
----------------------------------------------------------------------------------------------*/
.searchArea .gsc-results-wrapper-overlay {
  overflow: scroll;
  z-index: 999999; }

.gsc-results {
  text-align: left; }

.searchArea {
  position: relative;
  top: -5px;
  z-index: 10;
  display: inline-block;
  vertical-align: top;
  margin-right: 50px; }
  .searchArea:hover a.tat-search:before {
    color: #dd2881; }
  .searchArea a.tat-search {
    position: absolute;
    top: 10px;
    right: -35px;
    z-index: 2;
    font-size: 20px;
    color: #6a5128; }
  .searchArea .gsc-control-cse {
    position: absolute;
    top: 3px;
    right: -10px;
    width: 220px;
    padding: 0;
    background: none;
    border: none; }
    .searchArea .gsc-control-cse .gsc-control-wrapper-cse {
      border: none; }
      .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box {
        border: none;
        padding: 0; }
        .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box {
          border: none;
          padding: 0;
          margin-bottom: 0;
          /*------搜尋放大鏡-----*/ }
          .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input {
            background: transparent;
            padding: 0; }
            .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box-hover {
              border: none;
              border-color: #E8E8E8; }
              .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box-hover .gsib_a {
                border: none;
                margin: 0; }
                .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box-hover .gsib_a input {
                  border: none;
                  -webkit-border-radius: 0;
                  border-radius: 0;
                  opacity: 0; }
                  .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box-hover .gsib_a input:focus {
                    opacity: 1; }
            .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box {
              position: relative;
              z-index: 1;
              background: none;
              border: none;
              width: 100%;
              border-bottom: 1px solid #6a5128;
              color: #6a5128;
              font-size: 14px;
              padding: 0 0 0 0;
              -webkit-border-radius: 0;
              border-radius: 0;
              /*------輸入關鍵字時的Input-----*/
              /*------輸入關鍵字時的取消X-----*/ }
              .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box .gsib_a {
                line-height: 30px;
                height: 30px;
                overflow: hidden;
                vertical-align: top;
                padding: 0 8px;
                margin: 0 0px 0px;
                background: none; }
                .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box .gsib_a input {
                  position: relative;
                  left: 0;
                  line-height: 30px;
                  margin: 0 0px 0px;
                  background: transparent;
                  -webkit-border-radius: 0;
                  border-radius: 0;
                  opacity: 0;
                  background: none; }
                  .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box .gsib_a input:focus {
                    opacity: 1;
                    background: rgba(255, 255, 255, 0); }
              .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-input .gsc-input-box .gsst_b {
                margin-top: 0; }
          .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-search-button {
            position: absolute;
            top: 1px;
            z-index: 5;
            right: -12px;
            opacity: 0;
            width: 25px;
            height: 22px;
            padding: 0; }
            .searchArea .gsc-control-cse .gsc-control-wrapper-cse form.gsc-search-box table.gsc-search-box .gsc-search-button:hover {
              cursor: pointer; }

/*----------------------------------------------------------------------------------------------
|-> Footer
----------------------------------------------------------------------------------------------*/
.footer {
  position: relative;
  z-index: 1;
  text-align: left;
  vertical-align: top;
  padding: 80px 0 30px 0;
  color: #fff;
  background: url(../images/footer-bg.jpg) left top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover; }
  .footer:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: ' ';
    background: rgba(0, 0, 0, 0.7); }
  .footer a {
    color: #fff; }
    .footer a:visited {
      color: #fff; }
    .footer a:hover {
      color: #fcb019; }

.footerArea {
  position: relative;
  vertical-align: top;
  z-index: 10;
  width: 1200px;
  margin: 0 auto; }
  .footerArea h4 {
    font-size: 16px;
    margin: 0 0 25px; }

.footerMain {
  position: relative;
  padding-left: 110px;
  margin-right: 70px;
  display: inline-block;
  vertical-align: top; }
  .footerMain p {
    margin-bottom: 18px; }

.footerLogo {
  position: absolute;
  left: 0;
  top: -7px;
  width: 95px; }

.footerFollow {
  display: inline-block;
  vertical-align: top;
  margin-right: 70px;
  width: 250px; }
  .footerFollow p {
    font-size: 14px;
    max-width: 220px; }

.epaperArea {
  position: relative;
  margin-top: 38px; }
  .epaperArea p {
    margin-bottom: 3px; }
  .epaperArea label:hover a {
    color: #fcb019; }
  .epaperArea label:hover input[type="submit"] {
    cursor: pointer; }
  .epaperArea input[type="text"] {
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    width: 100%;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    padding: 5px 40px 5px 0;
    -webkit-border-radius: 0;
    border-radius: 0; }
  .epaperArea input[type="submit"] {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0px;
    padding: 0;
    opacity: 0; }
  .epaperArea a.tat-letter {
    position: absolute;
    bottom: 10px;
    right: 5px;
    z-index: 2;
    font-size: 20px; }

ul.addressList li[class^="tat-"] {
  position: relative;
  list-style-type: none;
  padding-left: 25px; }
  ul.addressList li[class^="tat-"]:before {
    position: absolute;
    left: 0;
    top: 4px; }

.footerLink {
  display: inline-block;
  vertical-align: top;
  width: 215px; }

ul.footerList {
  display: inline-block;
  vertical-align: top; }
  ul.footerList li {
    display: inline-block;
    vertical-align: top; }
    ul.footerList li:nth-child(odd) {
      margin-right: 70px; }
    ul.footerList li .mainFooter {
      display: block;
      color: #fff;
      margin-bottom: 5px; }

dl.shareList dd {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 10px; }
  dl.shareList dd a[class^="tat-"] {
    display: inline-block;
    text-align: center;
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    -webkit-border-radius: 18px;
    border-radius: 18px; }
    dl.shareList dd a[class^="tat-"]:before {
      position: relative;
      text-align: center;
      font-size: 20px;
      line-height: 30px;
      color: #fff; }
    dl.shareList dd a[class^="tat-"]:visited {
      color: #fff; }
      dl.shareList dd a[class^="tat-"]:visited:before {
        color: #fff; }
    dl.shareList dd a[class^="tat-"]:hover {
      color: #fcb019;
      border: 1px solid #fcb019; }
      dl.shareList dd a[class^="tat-"]:hover:before {
        color: #fcb019; }
  dl.shareList dd a.tat-facebook:before {
    margin-left: 2px; }
  dl.shareList dd a.tat-instagram:before {
    left: 1px;
    font-size: 18px; }
  dl.shareList dd a.tat-youtube:before {
    left: 1px; }
  dl.shareList dd a.tat-line:before {
    left: 1px; }
  dl.shareList dd a.tat-member:before {
    left: 2px;
    top: -1px; }
  dl.shareList dd a.tat-en {
    font-size: 14px;
    line-height: 31px;
    text-align: center; }

.copyright {
  font-style: normal;
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin-top: 40px;
  opacity: .7; }

/*=========================================================
|-> Not  Shared File
=========================================================*/
/*----------------------------------------------------------------------------------------------
|-> Editor
----------------------------------------------------------------------------------------------*/
.bbsArticle {
  position: relative;
  margin: 40px 0;
  font-size: 18px;
  /*---------------------------------------------------
    |-> Editor Use Style
    ---------------------------------------------------*/ }
  .bbsArticle h1 {
    font-size: 28px;
    line-height: 1.4em; }
  .bbsArticle h2 {
    font-size: 24px;
    margin-bottom: 20px;
    padding: 0; }
  .bbsArticle h3 {
    font-size: 21.6px;
    padding: 10px 0;
    line-height: 1.6em; }
  .bbsArticle h4 {
    font-size: 19.2px;
    padding: 5px 0; }
  .bbsArticle h5 {
    font-size: 17.6px;
    padding: 5px 0; }
  .bbsArticle h6 {
    font-size: 16px;
    padding: 5px 0; }
  .bbsArticle p {
    margin-bottom: 15px;
    padding: 0; }
    .bbsArticle p + img {
      margin-top: 20px; }
    .bbsArticle p + div {
      margin: 40px 0; }
    .bbsArticle p + h2 {
      margin-top: 40px; }
    .bbsArticle p a {
      color: #9f590c;
      text-decoration: none;
      word-wrap: break-word;
      word-break: break-all; }
      .bbsArticle p a:visited {
        color: #9f590c; }
      .bbsArticle p a:hover {
        color: #dd2881; }
  .bbsArticle table {
    margin-bottom: 20px; }
    .bbsArticle table tr {
      vertical-align: middle; }
      .bbsArticle table tr:last-child td {
        border-bottom: 3px double #666; }
      .bbsArticle table tr td {
        padding: 5px;
        border-top: 3px double #666;
        border-right: 3px double #666; }
        .bbsArticle table tr td:nth-child(1) {
          width: 70px;
          border-left: 3px double #666; }
        .bbsArticle table tr td:nth-child(3) {
          width: 35%; }
  .bbsArticle img {
    max-width: 100%;
    margin-bottom: 20px; }
  .bbsArticle ul {
    margin: 20px 20px 20px 35px; }
    .bbsArticle ul + h1 {
      margin-top: 40px; }
    .bbsArticle ul li {
      margin-bottom: 10px;
      padding-left: 0px;
      color: #333;
      list-style-position: outside;
      list-style-type: disc;
      border: 0px; }
  .bbsArticle ol {
    margin: 20px 20px 20px 15px; }
    .bbsArticle ol + h1 {
      margin-top: 40px; }
    .bbsArticle ol + h2 {
      padding-top: 20px; }
    .bbsArticle ol li {
      margin-bottom: 10px;
      margin-left: 20px;
      color: #333;
      list-style-position: outside;
      list-style-type: decimal; }
  .bbsArticle ul + h1 {
    margin-top: 40px; }
  .bbsArticle ul + h2 {
    padding-top: 20px; }
  .bbsArticle .ed-brown {
    color: #9f590c;
    font-weight: bold; }
  .bbsArticle .ed-darkRed {
    color: #c0392b; }
  .bbsArticle .ed-pink {
    color: #dd2881; }
  .bbsArticle a.ed-link {
    background: #fff;
    color: #333;
    border: 1px solid #333;
    font-size: 18px;
    min-width: 250px;
    display: inline-block;
    vertical-align: top;
    padding: 5px 80px;
    margin: 0 25px 20px 25px;
    -webkit-border-radius: 0;
    border-radius: 0;
    min-width: 0;
    display: inline-block;
    padding: 5px 20px;
    margin: 20px auto; }
    .bbsArticle a.ed-link span[class^="icon-"]:before {
      position: relative;
      top: 15px;
      font-size: 45px;
      margin-right: 10px;
      line-height: 0; }
    .bbsArticle a.ed-link:visited, .bbsArticle a.ed-link:active, .bbsArticle a.ed-link:focus {
      color: #333;
      text-decoration: none; }
    .bbsArticle a.ed-link:hover {
      background: #333;
      color: #fff;
      background: #dd2881;
      text-decoration: none;
      border: 1px solid #fff; }

/*----------------------------------------------------------------------------------------------
|-> Page number
----------------------------------------------------------------------------------------------*/
.pagebar {
  padding: 20px 0 20px 0;
  text-align: left;
  vertical-align: top; }
  .pagebar a[disabled="disabled"] {
    display: none; }
  .pagebar ul {
    margin: 0 auto;
    text-align: center;
    font-size: 18px; }
    .pagebar ul li {
      display: inline-block;
      margin: 0 2px 10px 2px; }
      .pagebar ul li a {
        text-decoration: none;
        display: inline-block;
        text-align: center;
        background: #fff;
        min-width: 32px;
        line-height: 32px;
        padding: 0 9px;
        font-size: 14px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        color: #333; }
        .pagebar ul li a:hover {
          text-decoration: none;
          color: #fff;
          background: #dd2881; }
      .pagebar ul li.linkBack a, .pagebar ul li.linkNext a {
        font-weight: bold; }
        .pagebar ul li.linkBack a:hover, .pagebar ul li.linkNext a:hover {
          background: none;
          color: #dd2881; }
      .pagebar ul li.linkBack:before {
        position: relative;
        top: 2px;
        content: '<';
        margin: 0 5px;
        float: left; }
      .pagebar ul li.linkNext:before {
        position: relative;
        top: 2px;
        content: '>';
        margin: 0 5px;
        float: right; }
      .pagebar ul li:hover:before {
        color: #dd2881; }
    .pagebar ul li.press a {
      cursor: default;
      color: #fff;
      background: #dd2881; }
      .pagebar ul li.press a:visited, .pagebar ul li.press a:hover {
        color: #fff; }
  .pagebar .total {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold; }
    .pagebar .total .num {
      margin: 0 5px; }

/*----------------------------------------------------------------------------------------------
|-> Form
----------------------------------------------------------------------------------------------*/
input[type="button"],
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="submit"],
input[type="reset"],
input[type="file"],
.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child),
textarea {
  font-family: "Microsoft JhengHei", Arial;
  font-size: 1em;
  border: 1px solid #fff;
  padding: 5px 10px;
  margin-bottom: 10px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  outline: none;
  -webkit-appearance: none; }

select {
  font-family: "Microsoft JhengHei", Arial;
  font-size: 1em;
  border: 1px solid #fff;
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

.formReserve {
  margin-bottom: 20px; }

.formtitle {
  background: #c0392b;
  color: #6a5128;
  text-align: center;
  font-weight: bold;
  padding: 0 8px;
  line-height: 36px; }
  .formtitle + .mark {
    padding: 10px;
    text-align: center; }
  .formtitle span[class^="icon-"]:before {
    position: relative;
    top: 7px;
    font-size: 25px;
    line-height: 0;
    margin-right: 10px; }
  .formtitle span[class^="icon-aircar"]:before {
    font-size: 32px;
    top: 10px; }
  .formtitle span[class^="icon-file-text"]:before {
    top: 5px;
    font-size: 20px; }
  .formtitle .icon-angle-down, .formtitle .icon-angle-up {
    position: relative;
    top: 6px;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 0 0 0 10px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: 1px solid #6a5128; }
    .formtitle .icon-angle-down:before, .formtitle .icon-angle-up:before {
      font-size: 20px;
      line-height: 26px;
      color: #6a5128; }
    .formtitle .icon-angle-down:hover, .formtitle .icon-angle-up:hover {
      background: #6a5128; }
      .formtitle .icon-angle-down:hover:before, .formtitle .icon-angle-up:hover:before {
        color: #FFF; }
  .formtitle .icon-angle-up:before {
    position: relative;
    top: -2px; }
  .formtitle .icon-pencil {
    display: inline-block;
    margin-left: 10px;
    opacity: 0.7; }
    .formtitle .icon-pencil:before {
      position: relative;
      top: 5px;
      font-size: 22px;
      color: #333; }
    .formtitle .icon-pencil:hover {
      opacity: 1;
      cursor: pointer; }
  .formGroup .formtitle span[class^="icon-"]:before {
    color: #6a5128; }
  .formtitle:first-child + ul.formList {
    margin: 5% 5% 30px 5%; }

p.info {
  padding: 10px;
  text-align: center;
  margin-bottom: 10px; }

.line {
  border-bottom: 1px solid #fff; }

ul.formList {
  margin: 5%; }
  ul.formList li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px; }
    ul.formList li span {
      position: absolute;
      left: 0;
      top: 5px; }
    ul.formList li span[class^="icon-"]:before {
      font-size: 20px;
      color: #dd2881; }
    ul.formList li span.icon-aircar:before {
      font-size: 28px;
      position: relative;
      left: -8px;
      top: -2px; }
    ul.formList li span.icon-pin:before {
      margin-left: -3px; }
    ul.formList li span.icon-plane:before {
      position: relative;
      left: -5px; }
    ul.formList li input[type="text"] {
      width: 90%; }
  ul.formList select {
    width: 95%; }
    ul.formList select.carType {
      width: 85%; }

a.icon-images {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  margin-top: 5px;
  color: #18bed8; }
  a.icon-images:before {
    font-size: 25px; }
  a.icon-images:visited {
    color: #18bed8; }
  a.icon-images:hover {
    color: #dd2881; }

.formBtnArea {
  text-align: center;
  padding-bottom: 20px; }
  .formBtnArea .priceArea {
    position: relative;
    display: inline-block;
    margin: 0 auto; }
    .formBtnArea .priceArea:hover .priceGroup {
      background: #333; }
  .formBtnArea .priceGroup {
    position: relative;
    z-index: 5;
    background: #dd2881;
    color: #ffc83e;
    line-height: 45px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    .formBtnArea .priceGroup span {
      display: inline-block;
      vertical-align: top; }
    .formBtnArea .priceGroup .icon-arrow-forward {
      padding-left: 10px;
      padding-right: 10px;
      margin-left: 5px;
      border-left: 1px solid rgba(255, 255, 255, 0.4);
      -webkit-box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.3);
      box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.3); }
      .formBtnArea .priceGroup .icon-arrow-forward:before {
        position: relative;
        top: 6px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        font-size: 18px;
        width: 30px;
        height: 30px;
        line-height: 34px;
        display: none;
        border: 0px solid #ffc83e;
        -webkit-border-radius: 16px;
        border-radius: 16px; }
  .formBtnArea .btnGo {
    background: #ee5a00;
    color: #ffc83e;
    padding: 0 15px;
    line-height: 45px;
    margin-left: 10px;
    margin-top: 10px;
    border: none;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    .formBtnArea .btnGo:hover {
      cursor: pointer;
      background: #333; }
  .formBtnArea .priceStatus {
    margin-left: 15px; }
  .formBtnArea .price {
    color: #dd2881;
    font-size: 36px;
    padding: 0 5px; }
  .formBtnArea .priceCount {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin-top: 10px; }
    .formBtnArea .priceCount:hover {
      cursor: pointer; }

/*----------------------------------------------------------------------------------------------
|-> Form - Inside
----------------------------------------------------------------------------------------------*/
.formGroup {
  text-align: center; }
  .formGroup:first-child + .formGroup {
    padding-top: 10px; }
  .formGroup button[type="button"] {
    background: none;
    border: none;
    color: #dd2881; }
    .formGroup button[type="button"]:before {
      position: relative;
      top: 8px;
      font-size: 25px; }
  .formGroup span[class^="icon-"]:before {
    position: relative;
    display: inline-block;
    width: 30px;
    top: 6px;
    font-size: 20px;
    color: #dd2881;
    margin: 0 5px; }
  .formGroup span.icon-aircar:before {
    font-size: 30px;
    position: relative;
    left: -5px;
    top: 8px; }
  .formGroup span.icon-plane:before {
    top: 2px; }
  .formGroup span.icon-airposition:before, .formGroup span.icon-calendar-2:before {
    top: 4px; }
  .formGroup .icon-clock {
    margin-left: 10px; }
  .formGroup .icon-images:before {
    position: relative;
    top: 5px; }
  .formGroup .placards {
    margin-left: 30px;
    width: 85%;
    height: 70px; }

.controlArea {
  margin: 15px 0 15px 30px; }
  .moreOption .controlArea {
    display: inline-block;
    width: 45%;
    margin: 15px 0 0 30px; }

input + .mark, select + .mark {
  margin-left: 5px; }

.plane {
  width: 350px; }

ul.formInsideList {
  margin: 20px 50px;
  text-align: left; }
  ul.formInsideList li {
    position: relative;
    margin-bottom: 10px; }
    ul.formInsideList li.flightArea {
      display: none; }
    ul.formInsideList li span[class="icon-people"]:before {
      top: 3px;
      left: -5px;
      font-size: 28px; }
    ul.formInsideList li .input-group .select2area {
      min-width: 400px; }
    ul.formInsideList li .input-group .custom-radio {
      padding-top: 3px; }
    ul.formInsideList li .input-group .custom-control-input {
      position: relative;
      margin-left: 25px; }
    ul.formInsideList li .input-group select {
      width: auto; }
    ul.formInsideList li .input-group #dateFlight {
      padding: 0 10px;
      line-height: 34px;
      -webkit-border-radius: 5px 0 0 5px;
      border-radius: 5px 0 0 5px; }
    ul.formInsideList li .input-group .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 34px;
      height: 34px;
      padding: 0; }
    ul.formInsideList li .input-group .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 34px; }
    ul.formInsideList li .input-group .select2-container .select2-selection--single {
      height: auto;
      padding: 0 20px 0 8px;
      border: 1px solid #ccc;
      margin-left: -1px;
      -webkit-border-radius: 0 5px 5px 0;
      border-radius: 0 5px 5px 0; }
    ul.formInsideList li .icon-briefcase {
      margin-left: 10px;
      display: inline-block;
      vertical-align: top; }
    ul.formInsideList li .icon-aircar:before {
      font-size: 26px;
      top: 3px; }
    ul.formInsideList li .icon-images {
      margin-right: 22px; }
      ul.formInsideList li .icon-images:before {
        top: 0; }
    ul.formInsideList li .icon-airbonus:before {
      vertical-align: top; }
  ul.formInsideList select {
    min-width: 130px; }

ul.dropdown-menu {
  padding: 0; }
  ul.dropdown-menu li {
    margin-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
    ul.dropdown-menu li:first-child {
      border-top: 0px solid rgba(0, 0, 0, 0.15); }
    ul.dropdown-menu li:hover {
      background: #c0392b; }
    ul.dropdown-menu li a {
      padding: 8px 10px;
      color: #333;
      display: block; }
      ul.dropdown-menu li a:visited {
        color: #333; }
      ul.dropdown-menu li a:hover {
        color: #333; }

a.icon-images {
  color: #f6ba42; }
  a.icon-images:visited {
    color: #f6ba42; }
  a.icon-images:hover {
    color: #dd2881; }

ul.formMarkList {
  text-align: left;
  width: 90%;
  margin: 20px 0 20px 7%; }
  ul.formMarkList .mark {
    font-size: 14px; }
  .modal-body ul.formMarkList {
    margin: 0;
    width: auto; }
    .modal-body ul.formMarkList li .form-control {
      margin-top: 5px; }
  ul.formMarkList li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px; }
    ul.formMarkList li:before {
      position: absolute;
      top: -1px;
      left: 0;
      font-family: 'airportfrstcar';
      content: "z";
      font-size: 14px;
      color: #dd2881; }
    ul.formMarkList li .custom-radio {
      display: inline-block;
      margin-left: 40px; }
      ul.formMarkList li .custom-radio:first-child {
        margin-left: 25px; }

.address {
  width: 66%; }
  .modal-body .address {
    width: 80%; }

.invoice {
  margin-top: 10px; }
  .invoice input[type="text"] {
    margin-right: 15px; }

#invoiceArea {
  margin-top: 5px; }

ul.formDetailList {
  width: 90%;
  margin: 20px 0 20px 7%;
  text-align: left; }
  ul.formDetailList li {
    position: relative;
    margin-bottom: 5px; }
    ul.formDetailList li span[class="icon-user"]:before,
    ul.formDetailList li span[class="icon-briefcase"]:before, ul.formDetailList li span[class="icon-airline"]:before,
    ul.formDetailList li span[class="icon-airwechat"]:before, ul.formDetailList li span[class="icon-hotel"]:before {
      top: 3px; }
    ul.formDetailList li .invalid-feedback {
      margin-left: 35px;
      margin-top: -5px;
      margin-bottom: 10px; }
    ul.formDetailList li span[class^="icon-"] {
      position: absolute;
      top: 3px;
      left: 0; }
    ul.formDetailList li span[class="icon-phone"]:before {
      font-size: 24px;
      left: -2px; }
    ul.formDetailList li span[class="icon-people"]:before {
      font-size: 25px; }
    ul.formDetailList li.helf {
      display: inline-block;
      vertical-align: top;
      width: 48%; }
      ul.formDetailList li.helf .intl-tel-input {
        width: 85%; }
        ul.formDetailList li.helf .intl-tel-input + .mark {
          margin-left: 5px; }
      ul.formDetailList li.helf .selectSection {
        width: 48%;
        display: inline-block;
        vertical-align: top; }
        ul.formDetailList li.helf .selectSection .invalid-feedback {
          margin-top: 5px; }
      ul.formDetailList li.helf .helfSection {
        margin-bottom: 10px; }
        ul.formDetailList li.helf .helfSection select {
          width: 85%;
          margin-left: 35px;
          margin-bottom: 0; }
        ul.formDetailList li.helf .helfSection .invalid-feedback {
          margin-top: 5px; }
    ul.formDetailList li .icon-user + input, ul.formDetailList li .icon-plane + input, ul.formDetailList li .icon-airline + input,
    ul.formDetailList li .icon-airwechat + input, ul.formDetailList li .icon-hotel + input, ul.formDetailList li .icon-gplus + input,
    ul.formDetailList li .icon-facebook + input, ul.formDetailList li .icon-instagrem + input, ul.formDetailList li .icon-twitter + input,
    ul.formDetailList li .intl-tel-input, ul.formDetailList li .formError + input {
      width: 85%;
      margin-left: 35px; }
    ul.formDetailList li .intl-tel-input {
      margin-bottom: 10px; }
    ul.formDetailList li .icon-plane:before {
      top: 6px; }
    ul.formDetailList li .icon-mail + input, ul.formDetailList li .icon-mail + .formError + input {
      width: 89.4%;
      margin-left: 35px; }
    ul.formDetailList li .note {
      display: inline-block;
      vertical-align: top;
      width: 89.4%;
      height: 85px;
      margin-left: 35px; }
      ul.formDetailList li .note + .mark {
        margin-left: 5px; }
    ul.formDetailList li select {
      width: 72%; }
    ul.formDetailList li .mark + span {
      margin-left: 10px; }
    ul.formDetailList li select.telType {
      width: 30%; }
      ul.formDetailList li select.telType + input {
        width: 53%; }
    ul.formDetailList li .select2area {
      width: 85%;
      margin-left: 35px; }
      ul.formDetailList li .select2area .select2-container .select2-selection--single {
        border: 1px solid #ccc;
        padding: 5px 0;
        height: auto; }
      ul.formDetailList li .select2area .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
        width: 36px; }
      ul.formDetailList li .select2area .mark {
        margin-left: 5px; }

.was-validated .intl-tel-input ~ .invalid-feedback {
  display: block;
  position: relative;
  top: 0; }

.was-validated ul.mobileList li .intl-tel-input ~ .invalid-feedback {
  position: absolute;
  top: -30px; }

ul.invoiceList {
  display: inline-block;
  text-align: center;
  width: 75%;
  margin: 40px auto 10px auto; }
  ul.invoiceList li {
    position: relative;
    margin-bottom: 10px; }
    ul.invoiceList li span[class^="icon-"]:before {
      display: inline-block;
      width: 25px;
      font-size: 20px;
      margin-right: 10px;
      color: #dd2881; }
    ul.invoiceList li a.btnSubmit {
      position: relative;
      top: -5px; }
    ul.invoiceList li .listTitle {
      color: #dd2881; }
    ul.invoiceList li p, ul.invoiceList li span {
      display: inline-block;
      vertical-align: top;
      line-height: 34px; }
    ul.invoiceList li p {
      display: inline-block;
      vertical-align: top;
      width: 60%;
      margin-right: 10px; }

.formtitle .icon-airposition {
  position: relative; }
  .formtitle .icon-airposition:after {
    position: absolute;
    top: -40px;
    font-family: 'airportfrstcar';
    content: 'x';
    font-size: 30px;
    color: #18bed8;
    opacity: 0.7; }

.formGroup .formtitle .icon-document:before, .detailArea .formtitle .icon-document:before {
  position: relative;
  top: 4px;
  font-size: 20px;
  margin: 0 5px; }

.btnArea {
  position: relative;
  padding: 20px; }
  .btnArea > a {
    line-height: 38px;
    margin-left: 10px;
    font-size: 14px; }
  .btnArea input[type="reset"] {
    vertical-align: top;
    font-size: 18px;
    color: #ffc83e;
    background: #18bed8;
    opacity: 0.8;
    line-height: 46px;
    padding: 0 35px;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea input[type="reset"]:hover {
      cursor: pointer;
      opacity: 1; }
  .btnArea input[type="submit"] {
    vertical-align: top;
    font-size: 18px;
    color: #ffc83e;
    background: #dd2881;
    opacity: 0.8;
    line-height: 46px;
    padding: 0 35px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea input[type="submit"]:hover {
      cursor: pointer;
      opacity: 1; }
  .btnArea .btnHome {
    vertical-align: top;
    font-size: 18px;
    color: #fff;
    background: #dd2881;
    opacity: 0.8;
    line-height: 35px;
    padding: 0 65px;
    display: inline-block;
    vertical-align: top;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea .btnHome:visited {
      color: #fff; }
    .btnArea .btnHome:hover {
      cursor: pointer;
      opacity: 1;
      color: #fff; }
  .btnArea .btnPrint {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    color: #ffc83e;
    background: #dd2881;
    opacity: 0.8;
    line-height: 46px;
    padding: 0 35px;
    margin-right: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea .btnPrint:hover {
      cursor: pointer;
      opacity: 1; }
  .btnArea .btnCancel {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    color: #ffc83e;
    background: #b65b65;
    opacity: 0.8;
    line-height: 46px;
    padding: 0 35px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea .btnCancel:hover {
      cursor: pointer;
      opacity: 1; }

a.btnSubmit {
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  color: #ffc83e;
  background: #dd2881;
  opacity: 0.8;
  line-height: 46px;
  padding: 0 35px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  a.btnSubmit:visited {
    color: #ffc83e; }
  a.btnSubmit:hover {
    cursor: pointer;
    opacity: 1; }

ul.noteList {
  margin: 20px 20px 30px 20px;
  font-size: 14px;
  line-height: 1.4em;
  text-align: left; }
  ul.noteList li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px; }
    ul.noteList li:before {
      position: absolute;
      top: 0;
      left: 0;
      font-family: 'airportfrstcar';
      content: "z";
      color: #dd2881; }

/*----------------------------------------------------------------------------------------------
|-> Bootstrap
----------------------------------------------------------------------------------------------*/
.mark {
  padding: 0; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background: #dd2881; }

.invalid-feedback {
  font-size: 14px; }

.input-group {
  width: 80%; }
  .input-group + p {
    margin-left: 40px; }
  .input-group > .form-control:not(:first-child) {
    height: 36px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px; }
  .formGroup .input-group button.dropdown-toggle {
    height: 36px;
    vertical-align: top;
    color: #333;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0; }
  .formGroup .input-group .icon-add:before {
    top: 3px; }
  .formGroup .input-group .btnAdd {
    border: 1px solid #dd2881;
    margin-left: 3px;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 14px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    .formGroup .input-group .btnAdd:hover {
      background: #dd2881;
      color: #FFF;
      cursor: pointer; }

.custom-control-label::before {
  border: 1px solid #dd2881; }

.custom-control-label::before, .custom-control-label::after {
  top: .15rem; }

.form-control {
  display: inline-block; }

select.form-control:not([size]):not([multiple]) {
  height: 36px; }

.modal-body .mark {
  margin-top: 5px; }

.icon-exclamation-triangle {
  margin-right: 10px; }
  .icon-exclamation-triangle:before {
    position: relative;
    top: 3px;
    left: 2px;
    font-size: 16px; }

/*--> Form ----------------------------------------------------------------------------*/
.inputGroup {
  position: relative;
  text-align: left;
  width: auto;
  margin-bottom: 20px; }
  .inputGroup.validate:before {
    position: absolute;
    top: 10px;
    right: 15px;
    content: '*';
    color: red; }
  .inputGroup.focus .nameTitle {
    top: 2px;
    left: 15px;
    padding: 0;
    font-size: 12px; }
  .inputGroup.half {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 1%;
    text-align: left; }
    .inputGroup.half.validate:before {
      right: 10px; }
    .inputGroup.half + .full {
      width: 98%; }
  .inputGroup p {
    margin-bottom: 0; }
  .inputGroup .nameTitle {
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px;
    z-index: 1;
    color: #999;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .inputGroup .nameTitle + p {
      padding-top: 5px; }
  .inputGroup .half {
    display: inline-block;
    vertical-align: top;
    width: 46%; }
  .inputGroup input {
    position: relative;
    z-index: 5;
    width: 99%;
    padding: 22px 15px 8px 15px;
    border-radius: 0;
    border: 1px solid #ddd;
    background: none; }
    .inputGroup input:hover {
      border: 1px solid #666; }
  .inputGroup input[disabled] {
    border: 1px solid rgba(0, 0, 0, 0); }

.textareaGroup {
  position: relative;
  text-align: left;
  width: auto;
  margin-bottom: 10px; }
  .textareaGroup.validate:before {
    position: absolute;
    top: 10px;
    right: 15px;
    content: '*';
    color: red; }
  .textareaGroup.focus .nameTitle {
    top: 2px;
    left: 15px;
    padding: 0;
    font-size: 12px; }
  .textareaGroup .nameTitle {
    position: absolute;
    left: 0;
    padding: 15px;
    z-index: 1;
    color: #999;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
  .textareaGroup textarea {
    width: 99%;
    height: 150px;
    padding: 22px 15px 8px 15px;
    border: 1px solid #ddd;
    -webkit-border-radius: 0;
    border-radius: 0; }
    .textareaGroup textarea:hover {
      border: 1px solid #666; }

.radioGroup {
  position: relative;
  clear: both;
  float: none;
  width: auto;
  padding-left: 0;
  margin-bottom: 20px; }
  .radioGroup .nameTitle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .radioGroup .nameTitle + p {
      padding-top: 5px; }
  .radioGroup .group {
    position: relative;
    min-height: 20px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-left: 110px; }
    .radioGroup .group .formError.inline + label {
      margin-left: 5px; }
    .radioGroup .group .formError .formErrorContent {
      position: absolute;
      left: 10px;
      top: 100%;
      margin-top: 20px; }
  .radioGroup .formError .formErrorContent {
    top: -18px;
    right: 12px; }
  .radioGroup input[type="radio"] {
    position: relative;
    z-index: 1;
    width: auto;
    display: inline-block;
    vertical-align: top;
    float: left;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 9px;
    border: 1px solid #aaa;
    background: none;
    outline: none; }
    .radioGroup input[type="radio"] + label {
      position: relative;
      z-index: 2;
      float: left;
      margin-right: 20px;
      margin-left: 5px;
      line-height: 20px; }
    .radioGroup input[type="radio"]:checked {
      border: 1px solid #dd2881; }
      .radioGroup input[type="radio"]:checked + label:before {
        position: absolute;
        top: 4px;
        left: -19px;
        display: block;
        content: '.';
        color: rgba(0, 0, 0, 0);
        line-height: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #dd2881; }
    .radioGroup input[type="radio"]::-ms-check {
      background: none;
      border: 1px solid #dd2881; }
      .radioGroup input[type="radio"]::-ms-check + label:before {
        position: absolute;
        top: 4px;
        left: -19px;
        display: block;
        content: '.';
        color: rgba(0, 0, 0, 0);
        line-height: 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #dd2881; }

.checkListGroup {
  position: relative;
  text-align: left;
  width: auto;
  margin-bottom: 25px; }
  .checkListGroup .nameTitle {
    display: block;
    color: #999;
    margin-bottom: 10px; }
  .checkListGroup ul.checkboxList {
    position: relative;
    margin: 20px 0 40px; }
    .checkListGroup ul.checkboxList li {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      min-height: 20px;
      padding-left: 35px;
      margin-bottom: 5px;
      margin-right: 40px; }
      .checkListGroup ul.checkboxList li label:hover {
        cursor: pointer; }
  .checkListGroup .checkboxLabel {
    position: relative; }
    .checkListGroup .checkboxLabel::before {
      position: absolute;
      top: -2px;
      left: -27px;
      display: block;
      width: 20px;
      height: 20px;
      pointer-events: none;
      content: "";
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: rgba(255, 255, 255, 0);
      border: 1px solid #dd2881;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
  .checkListGroup .checkboxItem .formError .formErrorContent {
    background: none;
    color: red;
    width: 200px;
    margin-left: -20px;
    margin-top: 15px;
    padding: 0; }
  .checkListGroup .checkboxItem input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: none; }
    .checkListGroup .checkboxItem input[type="checkbox"]:checked {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
  .checkListGroup .checkboxItem .checkboxInput:checked ~ .checkboxLabel::before {
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
  .checkListGroup .checkboxItem .checkboxInput:checked ~ .checkboxLabel::after {
    font-family: 'tat';
    content: 'R';
    background: none;
    color: #dd2881;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0 0 0 1px;
    line-height: 18px; }
  .checkListGroup .checkboxLabel::after {
    position: absolute;
    top: 0;
    left: -25px;
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }

.checkGroup {
  position: relative;
  z-index: 60;
  display: block;
  margin-left: 90px;
  text-align: left; }
  .checkGroup .formError .formErrorContent {
    background: none;
    color: red;
    width: 200px;
    margin-left: -20px;
    margin-top: 30px; }
  .checkGroup .formError.inline {
    position: relative;
    z-index: 1; }
    .checkGroup .formError.inline .formErrorContent {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 30px;
      float: left; }
  .checkGroup .word {
    position: relative;
    z-index: 99999;
    display: block;
    margin-left: 30px; }
  .checkGroup .checkboxStyle {
    position: absolute;
    z-index: 9999;
    top: 2px;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #dd2881; }
  .checkGroup input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    position: absolute;
    z-index: 9999;
    left: 0;
    opacity: 0; }
    .checkGroup input[type="checkbox"]:checked {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
      .checkGroup input[type="checkbox"]:checked + .checkboxStyle:before {
        position: absolute;
        top: -3px;
        left: 2px;
        width: 20px;
        height: 20px;
        font-family: 'tat';
        content: 'R';
        color: #dd2881; }

.selectGroup {
  position: relative;
  text-align: center;
  margin-bottom: 20px; }
  .selectGroup.validate:before {
    position: absolute;
    top: 10px;
    right: 10px;
    content: '*';
    color: red; }
  .selectGroup.focus .nameTitle {
    top: 2px;
    left: 15px;
    padding: 0;
    font-size: 12px; }
  .selectGroup .nameTitle {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 15px;
    z-index: 1;
    color: #999; }
  .selectGroup.half {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 1%;
    text-align: left; }
  .selectGroup + .formError.inline {
    text-align: center; }
  .selectGroup + .selectGroup .nameTitle {
    margin-right: 10px; }
  .selectGroup select {
    position: relative;
    z-index: 5;
    -webkit-appearance: none;
    /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;
    /* FireFox */
    appearance: none;
    font-family: Arial,"Microsoft JhengHei";
    font-size: 1em;
    width: 99%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: black;
    min-width: 150px;
    height: auto;
    line-height: 1em;
    border: 1px solid #ddd;
    outline: none;
    padding: 26px 35px 8px 15px;
    background: transparent url(../images/icon-arrow-down.png) 96% 20px no-repeat;
    background-size: 10px;
    -webkit-border-radius: 0;
    border-radius: 0; }
    .selectGroup select:hover {
      border: 1px solid #666; }

.googleRobot {
  text-align: center;
  margin-bottom: 20px; }
  .googleRobot img {
    width: 304px; }

.g-recaptcha {
  text-align: center; }
  .g-recaptcha div {
    margin: 0 auto; }

.fanclub .formGroup.center {
  text-align: center; }

.fanclub .formGroup.sWidth {
  width: 450px; }

.fanclub .loginBox {
  width: 450px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  border-right: 1px solid #eaeaea;
  padding-right: 20px;
  margin-bottom: 20px; }
  .fanclub .loginBox .btnArea {
    padding-top: 0; }
  .fanclub .loginBox mark {
    position: relative;
    display: block;
    border-top: 1px dashed #666;
    top: 0;
    background: #fff;
    color: #666;
    margin: 20px 0 40px 0; }
    .fanclub .loginBox mark span {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: #fff;
      padding: 5px 10px; }
  .fanclub .loginBox a.btnConfirm {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    color: #fff;
    background: #dd2881;
    opacity: 0.8;
    line-height: 38px;
    text-align: center;
    width: 240px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .fanclub .loginBox a.btnConfirm:hover {
      cursor: pointer;
      opacity: 1; }

a.btnLink {
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  color: #fff;
  background: #dd2881;
  opacity: 0.8;
  line-height: 38px;
  text-align: center;
  width: 240px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  a.btnLink:hover {
    cursor: pointer;
    opacity: 1; }

.otherId {
  position: relative;
  padding: 0 20px 40px 20px;
  width: 450px;
  display: inline-block;
  vertical-align: top; }
  .otherId mark {
    position: relative;
    display: block;
    border-top: 1px dashed #666;
    top: 0;
    background: #fff;
    color: #666;
    margin: 20px 0 40px 0; }
    .otherId mark span {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: #fff;
      width: 260px;
      padding: 5px 10px; }
  .otherId a {
    display: block;
    color: #fff;
    line-height: 45px;
    text-align: center;
    opacity: 0.8; }
    .otherId a + a {
      margin-top: 20px; }
    .otherId a:hover {
      opacity: 1; }
    .otherId a span[class^="tat-"]:before {
      position: relative;
      top: 5px;
      color: #fff;
      font-size: 24px;
      margin-right: 10px; }
    .otherId a span.tat-google:before {
      font-size: 20px; }
    .otherId a.fbBtn {
      background: #4267B2; }
    .otherId a.googleBtn {
      background: #dd4e40; }
    .otherId a.lineBtn {
      background: #00b900; }

/*--> jQuery-Validation-Engine ----------------------------------------------------------------------------*/
.formError .formErrorArrow [class^='line'] {
  display: none; }

.formError .formErrorContent {
  border: none;
  background: #dd2881;
  box-shadow: 0 0 0 #000;
  -moz-box-shadow: 0 0 0 #000;
  -webkit-box-shadow: 0 0 0 #000;
  -o-box-shadow: 0 0 0 #000;
  padding: 2px 10px 2px 10px;
  margin: 5px 0;
  font-size: 14px; }

.formError.inline {
  display: block; }
  .formError.inline .formErrorContent {
    color: red;
    background: none;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 4px 0 4px 5px; }

/*----------------------------------------------------------------------------------------------
|-> Popup
----------------------------------------------------------------------------------------------*/
.popupArea {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  display: none; }

.popupRelative {
  position: relative;
  width: 100%;
  height: 100%; }

.popupMain {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -200px;
  width: 400px;
  height: 100px;
  background: #fff;
  padding: 20px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }
  .popupMain p {
    text-align: center; }
  .popupMain a.tat-delete {
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 25px;
    color: #fff;
    opacity: .7; }
    .popupMain a.tat-delete:visited {
      color: #fff; }
    .popupMain a.tat-delete:hover {
      color: #fff; }
    .popupMain a.tat-delete:hover {
      opacity: 1; }

/*----------------------------------------------------------------------------------------------
|-> Popup
----------------------------------------------------------------------------------------------*/
.popupHomeArea {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
  overflow: auto;
  overflow-y: scroll;
  display: none; }
  .popupHomeArea .popupRelative {
    position: relative;
    max-width: 100%;
    overflow-x: hidden; }
  .popupHomeArea .popupMain {
    position: relative;
    top: 5%;
    left: 0;
    min-width: 300px;
    margin: 45px auto 30px auto;
    background: none; }
    .popupHomeArea .popupMain a.tat-delete {
      position: absolute;
      z-index: 99;
      right: -20px;
      top: -20px;
      width: 44px;
      height: 44px;
      line-height: 46px;
      text-align: center;
      font-size: 30px;
      color: #fff; }
  .popupHomeArea .popupContent {
    position: static;
    text-align: center;
    padding: 20px;
    min-height: 150px;
    background: #fff;
    -webkit-border-radius: 25px;
    border-radius: 25px; }
    .popupHomeArea .popupContent div {
      position: static; }
    .popupHomeArea .popupContent .bbsArticle {
      margin: 0; }
      .popupHomeArea .popupContent .bbsArticle img {
        margin-bottom: 0; }
  .popupHomeArea .btnArea {
    margin-bottom: 0;
    text-align: center; }

/*----------------------------------------------------------------------------------------------
|-> Home
----------------------------------------------------------------------------------------------*/
/*---------------------------------------------------
|-> Special
---------------------------------------------------*/
.homeSpecial {
  background: rgba(12, 15, 100, 0.04);
  padding: 20px 0 60px 0; }
  .homeSpecial h2 {
    padding: 20px 0;
    color: #6a5128;
    font-size: 36px;
    font-weight: normal; }
    .homeSpecial h2 span {
      font-size: 0.6em;
      margin-left: 8px;
      color: #dd2881; }
  .homeSpecial .owl-item {
    top: 200px;
    opacity: 0; }

.specialArea .owl-theme .owl-nav [class*=owl-] {
  line-height: 1.4em;
  color: #dd2881;
  opacity: .7; }
  .specialArea .owl-theme .owl-nav [class*=owl-]:hover {
    background: none;
    opacity: 1; }

.specialArea .owl-nav {
  position: absolute;
  top: 0;
  height: 0;
  width: calc(100% + 70px);
  margin-left: -35px;
  font-size: 60px; }
  .specialArea .owl-nav:after {
    display: block;
    content: ' ';
    float: none;
    clear: both; }
  .specialArea .owl-nav .owl-prev {
    float: left;
    margin-left: 10px;
    margin-top: 8%; }
  .specialArea .owl-nav .owl-next {
    float: right;
    margin-right: 10px;
    margin-top: 8%; }

.specialArea .owl-dots {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  padding-top: 10px; }
  .specialArea .owl-dots .owl-dot.active span {
    background: #dd2881;
    -webkit-box-shadow: 0 0 0 1px #dd2881;
    box-shadow: 0 0 0 1px #dd2881; }
  .specialArea .owl-dots .owl-dot span {
    background: #ddd;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 0 0 1px #ddd;
    box-shadow: 0 0 0 1px #ddd;
    margin: 5px; }
    .specialArea .owl-dots .owl-dot span:hover {
      background: #dd2881;
      -webkit-box-shadow: 0 0 0 1px #dd2881;
      box-shadow: 0 0 0 1px #dd2881; }

.specialSlide .item:hover figure img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); }

.specialSlide .item:hover .specialBox {
  background: #333; }

.specialSlide .item figure {
  line-height: 0;
  overflow: hidden;
  background: #dd2881; }
  .specialSlide .item figure a {
    position: relative;
    display: block; }
  .specialSlide .item figure img {
    position: relative;
    z-index: 1;
    width: 100%;
    line-height: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }

.specialSlide .item .specialBox {
  position: relative;
  background: #dd2881;
  text-align: left;
  padding: 25px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .specialSlide .item .specialBox a.specialLink {
    color: #fff;
    height: 70px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; }
    .specialSlide .item .specialBox a.specialLink:visited {
      color: #fff; }

.homeHot {
  padding: 40px 0;
  background: #f5f0e7 url(../images/top_bg.png) 28% bottom no-repeat;
  background-size: 18% auto; }
  .homeHot .topTitle:before {
    position: absolute;
    top: 15px;
    margin-left: -95px;
    display: inline-block;
    width: 200px;
    height: 100px;
    content: '.';
    color: rgba(0, 0, 0, 0);
    background: url(../images/mascot/top10_title.png) 0 top no-repeat;
    background-size: auto 100%; }
  .homeHot:after {
    content: ' ';
    display: block;
    float: none;
    clear: both; }
  .homeHot .owl-theme .owl-nav [class*=owl-] {
    line-height: 1.4em;
    color: #dd2881;
    opacity: .7; }
    .homeHot .owl-theme .owl-nav [class*=owl-]:hover {
      background: none;
      opacity: 1; }
  .homeHot .owl-nav {
    position: absolute;
    top: 0;
    height: 0;
    width: calc(100% + 70px);
    margin-left: -35px;
    font-size: 60px; }
    .homeHot .owl-nav:after {
      display: block;
      content: ' ';
      float: none;
      clear: both; }
    .homeHot .owl-nav .owl-prev {
      float: left;
      margin-left: 10px;
      margin-top: 7%; }
    .homeHot .owl-nav .owl-next {
      float: right;
      margin-right: 10px;
      margin-top: 7%; }
  .homeHot .owl-dots {
    position: absolute;
    bottom: 0;
    width: 100%; }

ul.hotTop3 {
  width: 48%;
  float: left;
  text-align: left;
  padding-left: 29px; }
  ul.hotTop3 li {
    position: relative;
    color: #fff;
    background: #faddeb;
    padding: 15px 15px 15px 45px;
    margin-bottom: 40px;
    border-radius: 10px;
    font-size: 18px;
    top: 200px;
    opacity: 0; }
    ul.hotTop3 li .tat-fish {
      position: absolute;
      top: -7px;
      left: -65px;
      display: block;
      width: 60px;
      height: 60px;
      line-height: 60px;
      font-size: 24px;
      font-weight: bolder;
      text-align: center;
      border-radius: 50% 50%;
      color: #fff; }
      ul.hotTop3 li .tat-fish .text {
        position: absolute;
        z-index: 5;
        top: 6px;
        left: 58px; }
      ul.hotTop3 li .tat-fish:before {
        position: absolute;
        z-index: 2;
        font-size: 70px;
        color: #dd2881; }
    ul.hotTop3 li .num {
      position: absolute;
      top: -0px;
      left: -29px;
      display: block;
      width: 60px;
      height: 60px;
      line-height: 60px;
      font-size: 30px;
      font-weight: bolder;
      text-align: center;
      border-radius: 50% 50%;
      background: url(../images/hot.png) top center no-repeat;
      background-size: 90% auto;
      color: #fff; }

ul.hotList {
  position: relative;
  width: 48%;
  float: right;
  text-align: left;
  padding-left: 25px;
  top: 200px;
  opacity: 0; }
  ul.hotList li {
    position: relative;
    background: #fff;
    padding: 10px 15px 10px 40px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #d8eacc; }
    ul.hotList li .tat-fish {
      position: absolute;
      top: -8px;
      left: -58px;
      display: block;
      width: 60px;
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      font-weight: bolder;
      text-align: center;
      border-radius: 50% 50%;
      color: #fff; }
      ul.hotList li .tat-fish .text {
        position: absolute;
        z-index: 5;
        top: 0px;
        left: 49px;
        letter-spacing: -2px;
        width: 19px;
        text-align: center; }
      ul.hotList li .tat-fish:before {
        position: absolute;
        z-index: 2;
        font-size: 60px;
        color: #478420; }
    ul.hotList li .num {
      position: absolute;
      top: 0px;
      left: -25px;
      display: block;
      width: 44px;
      height: 44px;
      line-height: 44px;
      font-size: 24px;
      font-weight: bolder;
      text-align: center;
      border-radius: 50% 50%;
      background: #72a326;
      color: #fff; }

.hotSlide .owl-item {
  background: #fff;
  overflow: hidden;
  border-radius: 50px;
  -webkit-box-shadow: inset 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 0px 15px 5px rgba(0, 0, 0, 0.1); }
  .hotSlide .owl-item:nth-child(1) {
    background: #fff url(../images/mascot1.png) center 105% no-repeat;
    background-size: auto 40%; }
  .hotSlide .owl-item:nth-child(2) {
    background: #fff url(../images/mascot2.png) center 105% no-repeat;
    background-size: auto 40%; }
  .hotSlide .owl-item:nth-child(3) {
    background: #fff url(../images/mascot3.png) center 105% no-repeat;
    background-size: auto 40%; }
  .hotSlide .owl-item:nth-child(4) {
    background: #fff url(../images/mascot4.png) center 105% no-repeat;
    background-size: auto 40%; }

.hotSlide .hotBox {
  display: block;
  height: 100%; }

.hotSlide .item {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .hotSlide .item:hover {
    background-color: #dd2881; }
    .hotSlide .item:hover a, .hotSlide .item:hover a:visited {
      color: #fff; }
  .hotSlide .item a {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    padding: 0 20px;
    max-height: 75px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; }

/*---------------------------------------------------
|-> Banner
---------------------------------------------------*/
.bannerArea {
  padding-top: 140px; }
  .bannerArea figure {
    position: relative;
    z-index: 1; }
  .bannerArea h3 {
    position: absolute;
    z-index: 5;
    bottom: 40px;
    right: 5%;
    font-size: 70px;
    line-height: 0.6em;
    color: #fff; }
  .bannerArea a.btnPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -18px;
    z-index: 5;
    background: rgba(221, 40, 149, 0.67);
    color: #fff;
    font-size: 18px;
    display: inline-block;
    vertical-align: top;
    padding: 5px 5px 5px 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; }
    .bannerArea a.btnPlay:visited, .bannerArea a.btnPlay:active, .bannerArea a.btnPlay:focus {
      color: #fff;
      text-decoration: none; }
    .bannerArea a.btnPlay:hover {
      background: #dd2895;
      color: #fff;
      text-decoration: none; }
    .bannerArea a.btnPlay .tat-play:before {
      position: relative;
      left: 2px;
      top: 3px;
      font-size: 20px; }
  .bannerArea .owl-theme .owl-nav [class*=owl-] {
    line-height: 1.4em;
    color: #fff;
    opacity: .7; }
    .bannerArea .owl-theme .owl-nav [class*=owl-]:hover {
      background: none;
      opacity: 1; }
  .bannerArea .owl-nav {
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    font-size: 80px; }
    .bannerArea .owl-nav .owl-prev {
      float: left;
      margin-left: 10px;
      margin-top: 14%; }
    .bannerArea .owl-nav .owl-next {
      float: right;
      margin-right: 10px;
      margin-top: 14%; }
  .bannerArea .owl-dots {
    position: absolute;
    bottom: 0;
    width: 100%; }

.homeArticle {
  position: relative;
  min-height: 300px;
  margin-top: 10px; }
  .homeArticle h2 {
    color: #6a5128;
    font-size: 36px;
    margin: 20px auto;
    font-weight: normal; }
    .homeArticle h2 span {
      font-size: 0.6em;
      margin-left: 8px;
      color: #dd2881; }

a.btnMore {
  background: #fff;
  color: #dd2881;
  border: 1px solid #dd2881;
  font-size: 18px;
  min-width: 250px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 80px;
  margin: 0 25px 20px 25px;
  -webkit-border-radius: 0;
  border-radius: 0; }
  a.btnMore span[class^="icon-"]:before {
    position: relative;
    top: 15px;
    font-size: 45px;
    margin-right: 10px;
    line-height: 0; }
  a.btnMore:visited, a.btnMore:active, a.btnMore:focus {
    color: #dd2881;
    text-decoration: none; }
  a.btnMore:hover {
    background: #333;
    color: #fff;
    background: #dd2881;
    text-decoration: none;
    border: 1px solid #fff; }
  .homeNews a.btnMore {
    background: #dd2881;
    color: #fff;
    border: 1px solid #fff;
    font-size: 18px;
    min-width: 250px;
    display: inline-block;
    vertical-align: top;
    padding: 5px 80px;
    margin: 0 25px 20px 25px;
    -webkit-border-radius: 0;
    border-radius: 0; }
    .homeNews a.btnMore span[class^="icon-"]:before {
      position: relative;
      top: 15px;
      font-size: 45px;
      margin-right: 10px;
      line-height: 0; }
    .homeNews a.btnMore:visited, .homeNews a.btnMore:active, .homeNews a.btnMore:focus {
      color: #fff;
      text-decoration: none; }
    .homeNews a.btnMore:hover {
      background: #333;
      color: #fff;
      background: #333;
      text-decoration: none;
      border: 1px solid #dd2881; }
  .homeWeather a.btnMore {
    background: #f6ba42;
    color: #fff;
    border: 1px solid #fff;
    font-size: 18px;
    min-width: 250px;
    display: inline-block;
    vertical-align: top;
    padding: 5px 80px;
    margin: 0 25px 20px 25px;
    -webkit-border-radius: 0;
    border-radius: 0; }
    .homeWeather a.btnMore span[class^="icon-"]:before {
      position: relative;
      top: 15px;
      font-size: 45px;
      margin-right: 10px;
      line-height: 0; }
    .homeWeather a.btnMore:visited, .homeWeather a.btnMore:active, .homeWeather a.btnMore:focus {
      color: #fff;
      text-decoration: none; }
    .homeWeather a.btnMore:hover {
      background: #333;
      color: #fff;
      background: #333;
      text-decoration: none;
      border: 1px solid #f6ba42; }

ul.homeIconList li {
  position: relative;
  top: 200px;
  opacity: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 15px 30px 15px; }
  ul.homeIconList li:nth-child(6) a {
    width: 115px; }
  ul.homeIconList li [class*=tat-] {
    display: block;
    font-size: 65px;
    line-height: 1.4em;
    color: #dd2881; }
  ul.homeIconList li a {
    color: #6a5128;
    display: block;
    width: 110px;
    line-height: 1.4em;
    font-size: 18px; }
    ul.homeIconList li a:visited {
      color: #6a5128; }
    ul.homeIconList li a:hover {
      color: #ee5a00; }
    ul.homeIconList li a:hover [class*=tat-] {
      color: #ee5a00; }

.mascotTitle:after {
  position: absolute;
  top: 15px;
  margin-left: -80px;
  display: inline-block;
  width: 200px;
  height: 100px;
  content: '.';
  color: rgba(0, 0, 0, 0);
  background: url(../images/mascot/home_title.png) 65% top no-repeat;
  background-size: auto 100%; }

.homeIconArea .owl-theme .owl-dots {
  position: absolute;
  top: -80px;
  right: 10px; }
  .homeIconArea .owl-theme .owl-dots .owl-dot.active span {
    background: #dd2881;
    -webkit-box-shadow: 0 0 0 1px #dd2881;
    box-shadow: 0 0 0 1px #dd2881; }
  .homeIconArea .owl-theme .owl-dots .owl-dot span {
    background: #ddd;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 0 0 1px #ddd;
    box-shadow: 0 0 0 1px #ddd;
    margin: 5px; }
    .homeIconArea .owl-theme .owl-dots .owl-dot span:hover {
      background: #dd2881;
      -webkit-box-shadow: 0 0 0 1px #dd2881;
      box-shadow: 0 0 0 1px #dd2881; }

.homeIconArea .owl-item {
  top: 200px;
  opacity: 0; }

.homeIconSlide {
  margin-bottom: 40px;
  text-align: center; }
  .homeIconSlide [class*=tat-] {
    display: block;
    font-size: 65px;
    line-height: 1.4em;
    color: #dd2881; }
  .homeIconSlide div:nth-child(6) a {
    width: 115px; }
  .homeIconSlide a {
    color: #6a5128;
    display: block;
    width: 110px;
    line-height: 1.4em;
    font-size: 18px;
    text-align: center;
    margin: 0 auto; }
    .homeIconSlide a:visited {
      color: #6a5128; }
    .homeIconSlide a:hover {
      color: #ee5a00; }
    .homeIconSlide a:hover [class*=tat-] {
      color: #ee5a00; }

.homeNews {
  background: #dd2881; }
  .homeNews h2 {
    color: #fff;
    padding: 20px 0; }
    .homeNews h2 span {
      font-size: 0.6em;
      margin-left: 8px;
      color: #fff; }

.newsSlide {
  padding-bottom: 50px; }
  .newsSlide .owl-theme .owl-nav [class*=owl-] {
    line-height: 1.4em;
    color: #dd2881;
    opacity: .7; }
    .newsSlide .owl-theme .owl-nav [class*=owl-]:hover {
      background: none;
      opacity: 1; }
  .newsSlide .owl-nav {
    position: absolute;
    top: 0;
    height: 0;
    width: calc(100% + 70px);
    margin-left: -35px;
    font-size: 60px; }
    .newsSlide .owl-nav:after {
      display: block;
      content: ' ';
      float: none;
      clear: both; }
    .newsSlide .owl-nav .owl-prev {
      float: left;
      margin-left: 10px;
      margin-top: 8%; }
    .newsSlide .owl-nav .owl-next {
      float: right;
      margin-right: 10px;
      margin-top: 8%; }
  .newsSlide .owl-dots {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    padding-top: 10px; }
    .newsSlide .owl-dots .owl-dot.active span {
      background: #fff;
      -webkit-box-shadow: 0 0 0 0 #fff;
      box-shadow: 0 0 0 0 #fff; }
    .newsSlide .owl-dots .owl-dot span {
      background: #dd2881;
      border: 1px solid #fff;
      -webkit-box-shadow: 0 0 0 0 #dd2881;
      box-shadow: 0 0 0 0 #dd2881;
      margin: 5px; }
      .newsSlide .owl-dots .owl-dot span:hover {
        background: #fff;
        -webkit-box-shadow: 0 0 0 0 #fff;
        box-shadow: 0 0 0 0 #fff; }
  .newsSlide .owl-item:nth-child(1) .item, .newsSlide .owl-item:nth-child(2) .item, .newsSlide .owl-item:nth-child(3) .item, .newsSlide .owl-item:nth-child(4) .item {
    opacity: 0;
    top: 200px; }
  .newsSlide .item {
    position: relative;
    width: 280px;
    height: 280px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    margin-bottom: 40px;
    margin-left: 20px; }
    .newsSlide .item:first-child {
      margin-left: 0; }
    .newsSlide .item .view {
      position: absolute;
      z-index: 8;
      top: 8px;
      left: 8px;
      color: #fff;
      font-size: 13px;
      background: rgba(221, 40, 129, 0.75);
      padding: 0 5px 0 5px;
      border-radius: 5px; }
      .newsSlide .item .view .tat-heart {
        line-height: 26px; }
        .newsSlide .item .view .tat-heart::before {
          position: relative;
          top: 2px;
          margin-right: 2px; }
    .newsSlide .item time {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 8;
      font-weight: bold;
      color: #fff;
      padding: 8px 8px 5px 8px;
      text-align: center;
      background: rgba(221, 40, 129, 0.75); }
      .newsSlide .item time .day {
        font-size: 28px;
        display: block;
        margin-bottom: 5px; }
      .newsSlide .item time .my {
        display: block;
        font-size: 14px;
        line-height: 1.4em; }
    .newsSlide .item figure {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%; }
      .newsSlide .item figure img {
        max-width: none;
        width: auto;
        max-height: 100%;
        margin-left: -25%; }
    .newsSlide .item:hover .newsLinkArea {
      margin-top: 0;
      background: rgba(0, 0, 0, 0.6); }
      .newsSlide .item:hover .newsLinkArea .newsSummary {
        opacity: 1; }
    .newsSlide .item .newsLinkArea {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 0;
      right: 0;
      height: 280px;
      margin-top: 105px;
      background: rgba(0, 0, 0, 0);
      text-align: center;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .newsSlide .item .newsLinkArea:after {
        position: relative;
        z-index: 5;
        top: -70px;
        display: inline-block;
        vertical-align: top;
        letter-spacing: -1px;
        font-family: "Microsoft JhengHei";
        content: "+";
        font-size: 40px;
        line-height: 43px;
        width: 50px;
        height: 50px;
        color: #fff;
        border: 1px solid #fff;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
    .newsSlide .item a.categoryLink {
      position: relative;
      z-index: 10;
      float: left;
      background: #dd2881;
      margin: 55px  0 0 20px;
      padding: 0 5px;
      line-height: 24px;
      color: #fff;
      font-size: 14px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
      .newsSlide .item a.categoryLink:visited {
        color: #fff; }
      .newsSlide .item a.categoryLink:hover {
        background: #fcb019; }
    .newsSlide .item a.articleLink {
      position: relative;
      z-index: 9;
      color: #fff;
      padding: 85px 20px 20px 20px;
      text-align: left;
      display: block;
      width: 100%;
      height: 100%; }
      .newsSlide .item a.articleLink:visited {
        color: #fff; }
      .newsSlide .item a.articleLink:hover {
        color: #fff; }
    .newsSlide .item .newsTitle {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; }
    .newsSlide .item .newsSummary {
      display: block;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      opacity: 0; }

ul.homeNewsList li {
  position: relative;
  top: 200px;
  opacity: 0;
  width: 280px;
  height: 280px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin-bottom: 40px;
  margin-left: 20px; }
  ul.homeNewsList li:first-child {
    margin-left: 0; }
  ul.homeNewsList li time {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 8;
    font-weight: bold;
    color: #fff;
    padding: 8px 8px 5px 8px;
    text-align: center;
    background: rgba(221, 40, 129, 0.75); }
    ul.homeNewsList li time .day {
      font-size: 28px;
      display: block;
      margin-bottom: 5px; }
    ul.homeNewsList li time .my {
      display: block;
      font-size: 14px;
      line-height: 1.4em; }
  ul.homeNewsList li figure {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%; }
    ul.homeNewsList li figure img {
      max-height: 100%;
      margin-left: -25%; }
  ul.homeNewsList li:hover .newsLinkArea {
    margin-top: 0;
    background: rgba(0, 0, 0, 0.6); }
    ul.homeNewsList li:hover .newsLinkArea .newsSummary {
      opacity: 1; }
  ul.homeNewsList li .newsLinkArea {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    margin-top: 105px;
    background: rgba(0, 0, 0, 0);
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    ul.homeNewsList li .newsLinkArea:after {
      position: relative;
      z-index: 5;
      top: -70px;
      display: inline-block;
      vertical-align: top;
      letter-spacing: -1px;
      font-family: "Microsoft JhengHei";
      content: "+";
      font-size: 40px;
      line-height: 43px;
      width: 50px;
      height: 50px;
      color: #fff;
      border: 1px solid #fff;
      -webkit-border-radius: 25px;
      border-radius: 25px;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
  ul.homeNewsList li a.categoryLink {
    position: relative;
    z-index: 10;
    float: left;
    background: #dd2881;
    margin: 55px  0 0 20px;
    padding: 0 5px;
    line-height: 24px;
    color: #fff;
    font-size: 14px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    ul.homeNewsList li a.categoryLink:visited {
      color: #fff; }
    ul.homeNewsList li a.categoryLink:hover {
      background: #fcb019; }
  ul.homeNewsList li a.articleLink {
    position: relative;
    z-index: 9;
    color: #fff;
    padding: 85px 20px 20px 20px;
    text-align: left;
    display: block;
    width: 100%;
    height: 100%; }
    ul.homeNewsList li a.articleLink:visited {
      color: #fff; }
    ul.homeNewsList li a.articleLink:hover {
      color: #fff; }
  ul.homeNewsList li .newsTitle {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; }
  ul.homeNewsList li .newsSummary {
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 0; }

/*---------------------------------------------------
|-> Popular
---------------------------------------------------*/
.homePopular {
  padding-bottom: 40px; }
  .homePopular span[class^='tat-'] {
    font-size: 42px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px; }

.popularLeft {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  min-height: 440px; }

.popularRight {
  position: relative;
  right: -500px;
  opacity: 0;
  float: right;
  vertical-align: top;
  width: 50%; }

ul.popularList li {
  position: relative;
  left: -300px;
  opacity: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 20px 50px 20px; }
  ul.popularList li:hover a {
    color: #dd2881; }
  ul.popularList li p {
    margin-bottom: 15px;
    max-width: 130px;
    line-height: 1.4em; }
  ul.popularList li figure {
    width: 150px;
    height: 150px;
    line-height: 0;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px auto; }
    ul.popularList li figure img {
      height: 100%; }
  ul.popularList li a.areaBtn {
    position: relative;
    display: inline-block;
    z-index: 10;
    background: #dd2881;
    padding: 0 15px;
    line-height: 26px;
    color: #fff;
    font-size: 14px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    ul.popularList li a.areaBtn:visited {
      color: #fff; }
    ul.popularList li a.areaBtn:hover {
      background: #fcb019; }

.mainPopular {
  position: relative;
  margin-top: 50px;
  line-height: 0;
  display: none;
  overflow: hidden; }
  .mainPopular.show {
    display: block; }
  .mainPopular img {
    width: 100%; }
  .mainPopular figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .mainPopular figcaption p {
      text-align: left;
      padding: 20px 230px 20px 20px;
      line-height: 1.4em;
      margin-bottom: 0;
      color: #fff; }
      .mainPopular figcaption p:visited {
        color: #fff; }
      .mainPopular figcaption p:hover {
        color: #fff; }
    .mainPopular figcaption mark {
      position: absolute;
      min-width: 65px;
      right: 10px;
      bottom: 15px;
      display: inline-block;
      color: #fff;
      line-height: 1.4em;
      padding: 10px 25px 25px 0;
      background: url(../images/mark.png) right bottom no-repeat; }

/*---------------------------------------------------
|-> Festival
---------------------------------------------------*/
.homeFestival span[class^='tat-'] {
  font-size: 42px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px; }

.homeFestival h2 {
  position: absolute;
  width: 50%;
  right: 0;
  padding: 0; }

.homeFestival a.btnMore {
  position: absolute;
  z-index: 5;
  right: 25%;
  margin-right: -125px;
  bottom: 20px; }

.festivalArea {
  position: relative;
  z-index: 1; }
  .festivalArea .owl-theme .owl-dots {
    position: absolute;
    top: 35%;
    margin-right: 5px;
    width: 15px;
    right: 0; }
    .festivalArea .owl-theme .owl-dots .owl-dot {
      display: block;
      float: left; }
      .festivalArea .owl-theme .owl-dots .owl-dot.active span {
        background: #dd2881;
        -webkit-box-shadow: 0 0 0 1px #dd2881;
        box-shadow: 0 0 0 1px #dd2881; }
      .festivalArea .owl-theme .owl-dots .owl-dot span {
        background: #ddd;
        border: 1px solid #fff;
        -webkit-box-shadow: 0 0 0 1px #ddd;
        box-shadow: 0 0 0 1px #ddd;
        margin: 5px; }
        .festivalArea .owl-theme .owl-dots .owl-dot span:hover {
          background: #dd2881;
          -webkit-box-shadow: 0 0 0 1px #dd2881;
          box-shadow: 0 0 0 1px #dd2881; }

.festivalLeft {
  position: relative;
  top: 600px;
  opacity: 0;
  width: 50%; }

.festivalRight {
  position: absolute;
  top: 0;
  right: -600px;
  opacity: 0;
  width: 50%;
  padding: 60px;
  text-align: left; }
  .festivalRight h4 {
    font-size: 24px; }
    .festivalRight h4 a {
      color: #dd2881; }
      .festivalRight h4 a:visited {
        color: #dd2881; }
      .festivalRight h4 a:hover {
        color: #f6ba42; }
  .festivalRight mark {
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 20px;
    color: #fff;
    background: #f6ba42;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
  .festivalRight .more {
    color: #6a5128;
    font-size: 14px; }
    .festivalRight .more:visited {
      color: #6a5128; }
    .festivalRight .more:hover {
      color: #f6ba42; }

/*---------------------------------------------------
|-> Weather
---------------------------------------------------*/
.homeWeather {
  background: #f6ba42; }
  .homeWeather h2 {
    color: #fff; }
    .homeWeather h2 span {
      color: #fff; }

.weatherArea {
  color: #fff;
  margin-bottom: 40px;
  text-align: center; }
  .weatherArea .owl-item {
    top: 200px;
    opacity: 0;
    text-align: center; }
  .weatherArea [class*=icon-] {
    display: inline-block;
    vertical-align: top;
    font-size: 120px;
    line-height: 1.2em;
    color: #fff; }
  .weatherArea .weather {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    margin-bottom: 20px; }
    .weatherArea .weather img {
      width: 100%; }
  .weatherArea .tempArea {
    display: inline-block;
    vertical-align: top; }
  .weatherArea .area, .weatherArea .temperature {
    text-align: left; }
  .weatherArea .area {
    font-size: 24px; }
  .weatherArea .temperature {
    font-size: 60px;
    padding-top: 25px; }
  .weatherArea .owl-theme .owl-dots {
    position: absolute;
    top: -80px;
    right: 0; }
    .weatherArea .owl-theme .owl-dots .owl-dot.active span {
      background: #fff;
      -webkit-box-shadow: 0 0 0 1px #fff;
      box-shadow: 0 0 0 1px #fff; }
    .weatherArea .owl-theme .owl-dots .owl-dot span {
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid #f6ba42;
      -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
      margin: 5px; }
      .weatherArea .owl-theme .owl-dots .owl-dot span:hover {
        background: #fff;
        -webkit-box-shadow: 0 0 0 1px #fff;
        box-shadow: 0 0 0 1px #fff; }

/*----------------------------------------------------------------------------------------------
|-> IG & FB
----------------------------------------------------------------------------------------------*/
.homeSocial {
  background: #eaeaea;
  padding: 50px 0 10px 0; }

.shareArea {
  position: relative;
  z-index: 9;
  margin: 0 auto; }
  .shareArea .titleArea {
    height: 55px; }
    .shareArea .titleArea img {
      display: inline-block;
      vertical-align: top;
      width: 150px; }
    .shareArea .titleArea p {
      display: inline-block;
      vertical-align: top;
      margin-left: 5px;
      padding-top: 9px;
      color: #6a5128;
      font-size: 18px; }
  .shareArea .igArea {
    position: relative;
    top: 300px;
    opacity: 0;
    left: 0;
    width: calc(100% - 380px);
    text-align: left; }
    .shareArea .igArea h4 {
      margin-bottom: 15px; }
      .shareArea .igArea h4 span:before {
        font-size: 2.5em;
        line-height: 50px;
        display: inline-block;
        vertical-align: top; }
    .shareArea .igArea .igBox {
      line-height: 0;
      max-height: 450px;
      overflow: hidden; }
      .shareArea .igArea .igBox ul.juicer-feed h1 {
        display: none; }
  .shareArea .facebookArea {
    position: absolute;
    right: 0;
    top: 300px;
    opacity: 0;
    width: 350px;
    margin-left: 50%;
    min-height: 320px;
    margin-bottom: 20px;
    text-align: left;
    overflow: hidden; }
    .shareArea .facebookArea .titleArea p {
      padding-top: 17px; }
    .shareArea .facebookArea h4 {
      margin-bottom: 15px; }
      .shareArea .facebookArea h4 span:before {
        font-size: 10em;
        line-height: 50px;
        display: inline-block;
        vertical-align: top;
        color: #365494; }
    .shareArea .facebookArea .fbBox ul.fbList li {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 32%;
      height: 360px;
      background: #FFF;
      overflow: hidden;
      margin-left: 1.5%; }
      .shareArea .facebookArea .fbBox ul.fbList li:first-child {
        margin-left: 0; }
      .shareArea .facebookArea .fbBox ul.fbList li:hover .fullword {
        top: 0; }
      .shareArea .facebookArea .fbBox ul.fbList li .fbContent {
        position: relative;
        margin: 15px; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent figure {
          max-height: 175px;
          overflow: hidden; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo a {
          color: #333; }
          .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo a:visited {
            color: #333; }
          .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo a:hover {
            color: #333; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo img {
          position: absolute;
          top: 2px;
          left: 0;
          width: 35px;
          height: 35px;
          -webkit-border-radius: 5px;
          border-radius: 5px; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo h5, .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo time {
          margin-left: 39px; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo h5 {
          color: #dd2881;
          font-size: 0.9em;
          line-height: 1.3em;
          letter-spacing: -0.7px;
          font-weight: bold; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo time {
          font-size: 0.875em;
          color: #999; }
        .shareArea .facebookArea .fbBox ul.fbList li .fbContent .fbInfo p {
          font-size: 0.875em;
          line-height: 1.3em;
          max-height: 38px;
          overflow: hidden;
          margin-bottom: 5px; }
      .shareArea .facebookArea .fbBox ul.fbList li span.tat-good {
        position: absolute;
        left: 15px;
        bottom: 10px;
        color: #ee5a00;
        font-size: 0.875em; }
        .shareArea .facebookArea .fbBox ul.fbList li span.tat-good:before {
          position: relative;
          top: 2px;
          margin-right: 5px;
          font-family: Arial; }
      .shareArea .facebookArea .fbBox ul.fbList li .fullword {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 15px;
        background: rgba(0, 0, 0, 0.8);
        line-height: 1.6em;
        color: #fff;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .shareArea .facebookArea .fbBox ul.fbList li .fullword:visited {
          color: #FFF; }
        .shareArea .facebookArea .fbBox ul.fbList li .fullword:hover {
          color: #eaeaea; }
  .shareArea .registerFast {
    position: absolute;
    bottom: 30px;
    width: 340px;
    right: 10px;
    height: 130px;
    background: url(../images/mascot/register.png) left top no-repeat;
    background-size: 100% auto;
    color: #fff;
    text-align: right; }
    .shareArea .registerFast .wordArea {
      width: 45%;
      float: right;
      text-align: center;
      padding-top: 20px; }
    .shareArea .registerFast p {
      font-size: 14px;
      margin-bottom: 5px; }
    .shareArea .registerFast a.btnGo {
      display: inline-block;
      vertical-align: top;
      background: #f6ba42;
      font-size: 14px;
      font-weight: bold;
      padding: 0 15px;
      -webkit-border-radius: 15px;
      border-radius: 15px;
      color: #6a5128; }
      .shareArea .registerFast a.btnGo:visited {
        color: #6a5128; }
      .shareArea .registerFast a.btnGo:hover {
        background: #dd2881;
        color: #fff; }
  .shareArea .shareNote {
    text-align: center;
    margin-top: 20px; }
    .shareArea .shareNote span {
      display: inline-block;
      font-size: 18px;
      color: #666;
      font-style: italic;
      font-family: Arial;
      line-height: 30px; }
    .shareArea .shareNote h2 {
      display: inline-block;
      font-size: 36px;
      font-weight: bold;
      color: #333;
      margin-left: 20px;
      margin-right: 20px;
      line-height: 30px; }

/*----------------------------------------------------------------------------------------------
|-> Inside
----------------------------------------------------------------------------------------------*/
/*---------------------------------------------------
|-> Banner - Inside
---------------------------------------------------*/
.bannerInside {
  position: relative;
  color: #fff;
  overflow: hidden; }
  .bannerInside figure {
    position: relative;
    z-index: 1;
    width: 100%;
    line-height: 0;
    overflow: hidden; }
    .bannerInside figure img {
      width: 100%; }
  .bannerInside h4 {
    position: absolute;
    z-index: 3;
    right: 5.5%;
    bottom: 0;
    font-size: 48px;
    font-style: italic; }
  .bannerInside .titleBox {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    text-align: center;
    top: 48%; }
    .bannerInside .titleBox h3 {
      font-size: 72px;
      line-height: 1.4em;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); }
    .bannerInside .titleBox p {
      display: inline-block;
      margin: 0 auto;
      border-top: 1px solid #fff;
      padding: 10px 10px 0 10px;
      line-height: 1.3em;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }

/*---------------------------------
|-> Crumb
---------------------------------*/
.crumb {
  padding: 5px 10px;
  margin-top: 20px;
  text-align: left;
  font-size: 14px; }
  .crumb ul {
    width: 1200px;
    margin: 0 auto; }
    .crumb ul li {
      color: #dd2881;
      display: inline-block;
      vertical-align: top; }
      .crumb ul li:before {
        position: relative;
        top: 0;
        content: "/";
        color: #333;
        margin: 2px 5px 2px 2px; }
      .crumb ul li:first-child:before {
        content: none; }
      .crumb ul li .tat-home {
        display: inline-block;
        vertical-align: top;
        width: 20px;
        height: 25px;
        overflow: hidden; }
        .crumb ul li .tat-home:before {
          position: relative;
          top: 2px;
          display: inline-block;
          vertical-align: top;
          font-size: 20px; }
      .crumb ul li a {
        color: #333; }
        .crumb ul li a:visited {
          color: #333; }
        .crumb ul li a:hover {
          color: #dd2881; }
      .crumb ul li:last-child a {
        color: #dd2881; }
        .crumb ul li:last-child a:visited {
          color: #dd2881; }
        .crumb ul li:last-child a:hover {
          color: #dd2881;
          cursor: default; }

/*---------------------------------
|-> Content
---------------------------------*/
.insideArticle .groupMain {
  text-align: left; }
  .insideArticle .groupMain.center {
    text-align: center; }
    .insideArticle .groupMain.center .formGroup {
      margin: 0 auto; }

.pageTitle + .bbsArticle {
  margin-top: 0; }

.addthisArea, .shareBtnArea {
  position: absolute;
  top: -40px;
  right: 0; }
  .addthisArea p, .shareBtnArea p {
    position: absolute;
    padding-top: 8px;
    left: -130px;
    font-weight: bold;
    font-size: 14px;
    color: #6a5128; }
  .addthisArea .shareBtnBox, .shareBtnArea .shareBtnBox {
    position: relative;
    top: 10px;
    margin-left: 10px; }
    .addthisArea .shareBtnBox a[class^='tat-'], .addthisArea .shareBtnBox a[class^="tat-"]:visited, .shareBtnArea .shareBtnBox a[class^='tat-'], .shareBtnArea .shareBtnBox a[class^="tat-"]:visited {
      font-size: 24px;
      text-decoration: none; }
      .addthisArea .shareBtnBox a[class^='tat-'] *, .addthisArea .shareBtnBox a[class^="tat-"]:visited *, .shareBtnArea .shareBtnBox a[class^='tat-'] *, .shareBtnArea .shareBtnBox a[class^="tat-"]:visited * {
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
      .addthisArea .shareBtnBox a[class^='tat-']::before, .shareBtnArea .shareBtnBox a[class^='tat-']::before {
        position: relative; }
      .addthisArea .shareBtnBox a[class^='tat-']:hover::before, .shareBtnArea .shareBtnBox a[class^='tat-']:hover::before {
        top: -5px; }
      .addthisArea .shareBtnBox a[class^='tat-'].tat-facebook-1, .shareBtnArea .shareBtnBox a[class^='tat-'].tat-facebook-1 {
        color: #1877f2; }
      .addthisArea .shareBtnBox a[class^='tat-'].tat-twitter, .shareBtnArea .shareBtnBox a[class^='tat-'].tat-twitter {
        color: #000; }
      .addthisArea .shareBtnBox a[class^='tat-'].tat-line, .shareBtnArea .shareBtnBox a[class^='tat-'].tat-line {
        color: #00c200; }

/*---------------------------------
|-> Category
---------------------------------*/
.categorySlide {
  position: relative;
  max-width: 100%; }
  .categorySlide .owl-stage-outer {
    text-align: center; }
    .categorySlide .owl-stage-outer .owl-stage {
      margin: 0 auto; }
      .categorySlide .owl-stage-outer .owl-stage .item:before {
        content: '/';
        margin: 0 15px; }
      .categorySlide .owl-stage-outer .owl-stage .item.select a {
        color: #dd2881;
        font-size: 24px; }
      .categorySlide .owl-stage-outer .owl-stage div:nth-child(1) .item:before {
        content: none; }
  .categorySlide .owl-nav {
    font-size: 30px; }
    .categorySlide .owl-nav [class*=owl-] {
      min-width: 20px; }

/*---------------------------------
|-> News
---------------------------------*/
ul.newsList li, ul.faqList li, ul.festivalList li, ul.attractionList li, ul.downloadList li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 0 4.5% 60px 0;
  min-height: 470px;
  text-align: right;
  border: 1px solid #ddd; }
  ul.newsList li:nth-child(3), ul.faqList li:nth-child(3), ul.festivalList li:nth-child(3), ul.attractionList li:nth-child(3), ul.downloadList li:nth-child(3), ul.newsList li:nth-child(6), ul.faqList li:nth-child(6), ul.festivalList li:nth-child(6), ul.attractionList li:nth-child(6), ul.downloadList li:nth-child(6), ul.newsList li:nth-child(9), ul.faqList li:nth-child(9), ul.festivalList li:nth-child(9), ul.attractionList li:nth-child(9), ul.downloadList li:nth-child(9) {
    margin-right: 0; }
  ul.newsList li figure, ul.faqList li figure, ul.festivalList li figure, ul.attractionList li figure, ul.downloadList li figure {
    position: relative;
    line-height: 0; }
    ul.newsList li figure .view, ul.faqList li figure .view, ul.festivalList li figure .view, ul.attractionList li figure .view, ul.downloadList li figure .view {
      position: absolute;
      z-index: 8;
      top: 8px;
      left: 8px;
      color: #fff;
      font-size: 13px;
      background: rgba(221, 40, 129, 0.75);
      padding: 0 5px 0 5px;
      border-radius: 5px; }
      ul.newsList li figure .view .tat-heart, ul.faqList li figure .view .tat-heart, ul.festivalList li figure .view .tat-heart, ul.attractionList li figure .view .tat-heart, ul.downloadList li figure .view .tat-heart {
        line-height: 26px; }
        ul.newsList li figure .view .tat-heart::before, ul.faqList li figure .view .tat-heart::before, ul.festivalList li figure .view .tat-heart::before, ul.attractionList li figure .view .tat-heart::before, ul.downloadList li figure .view .tat-heart::before {
          position: relative;
          top: 2px;
          margin-right: 2px; }
    ul.newsList li figure a, ul.faqList li figure a, ul.festivalList li figure a, ul.attractionList li figure a, ul.downloadList li figure a {
      position: relative;
      z-index: 1; }
    ul.newsList li figure a.categoryLink, ul.faqList li figure a.categoryLink, ul.festivalList li figure a.categoryLink, ul.attractionList li figure a.categoryLink, ul.downloadList li figure a.categoryLink {
      position: absolute;
      z-index: 3;
      left: 15px;
      bottom: 15px;
      z-index: 10;
      background: #dd2881;
      padding: 0 5px;
      line-height: 26px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      min-width: 70px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
      ul.newsList li figure a.categoryLink:visited, ul.faqList li figure a.categoryLink:visited, ul.festivalList li figure a.categoryLink:visited, ul.attractionList li figure a.categoryLink:visited, ul.downloadList li figure a.categoryLink:visited {
        color: #fff; }
      ul.newsList li figure a.categoryLink:hover, ul.faqList li figure a.categoryLink:hover, ul.festivalList li figure a.categoryLink:hover, ul.attractionList li figure a.categoryLink:hover, ul.downloadList li figure a.categoryLink:hover {
        background: #fcb019; }
  ul.newsList li figcaption, ul.faqList li figcaption, ul.festivalList li figcaption, ul.attractionList li figcaption, ul.downloadList li figcaption {
    padding: 20px;
    display: block;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.4em; }
    ul.newsList li figcaption a, ul.faqList li figcaption a, ul.festivalList li figcaption a, ul.attractionList li figcaption a, ul.downloadList li figcaption a {
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; }
  ul.newsList li img, ul.faqList li img, ul.festivalList li img, ul.attractionList li img, ul.downloadList li img {
    max-width: 100%; }
  ul.newsList li .tat-clock, ul.faqList li .tat-clock, ul.festivalList li .tat-clock, ul.attractionList li .tat-clock, ul.downloadList li .tat-clock {
    display: inline-block;
    padding-right: 20px;
    font-size: 18px;
    color: #8e4c18; }
    ul.newsList li .tat-clock:before, ul.faqList li .tat-clock:before, ul.festivalList li .tat-clock:before, ul.attractionList li .tat-clock:before, ul.downloadList li .tat-clock:before {
      position: relative;
      top: 3px;
      margin-right: 5px;
      font-size: 20px; }
  ul.newsList li a.btnMore, ul.faqList li a.btnMore, ul.festivalList li a.btnMore, ul.attractionList li a.btnMore, ul.downloadList li a.btnMore {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin: 0 0 0 -125px;
    border: 1px solid #333;
    color: #333; }
    ul.newsList li a.btnMore:visited, ul.faqList li a.btnMore:visited, ul.festivalList li a.btnMore:visited, ul.attractionList li a.btnMore:visited, ul.downloadList li a.btnMore:visited {
      border: 1px solid #333;
      color: #333; }
    ul.newsList li a.btnMore:hover, ul.faqList li a.btnMore:hover, ul.festivalList li a.btnMore:hover, ul.attractionList li a.btnMore:hover, ul.downloadList li a.btnMore:hover {
      border: 1px solid #dd2881;
      color: #fff; }

.newsArticle .backArea {
  margin-bottom: 40px; }

.newsArticle:after {
  display: block;
  content: ' ';
  float: none;
  clear: both; }

.newsArticle .pageTitle {
  padding: 30px 0 20px 0; }

.newsArticle .tat-clock {
  width: calc(100% - 150px);
  display: inline-block;
  vertical-align: top;
  padding-right: 20px;
  font-size: 18px;
  color: #8e4c18;
  float: none;
  clear: both; }
  .newsArticle .tat-clock:before {
    position: relative;
    top: 3px;
    margin-right: 5px;
    font-size: 20px; }

.newsArticle .view {
  float: right;
  color: #dd2881;
  font-size: 18px; }
  .newsArticle .view .tat-heart::before {
    position: relative;
    top: 2px;
    margin-right: 5px; }

.newsArticle .mainContent {
  float: left;
  width: calc(100% - 330px); }

.newsArticle .tagArea {
  float: none;
  clear: both; }

.newsArticle .sideSpecialGroup {
  position: relative;
  padding: 20px 0; }

.newsArticle .sideSpecial {
  position: relative;
  width: 285px;
  float: right;
  margin: 0 0 40px 0;
  padding: 20px 0;
  text-align: center; }
  .newsArticle .sideSpecial h2 {
    padding: 20px 0;
    color: #6a5128;
    font-size: 24px; }
    .newsArticle .sideSpecial h2 span {
      font-size: 0.6em;
      margin-left: 8px;
      color: #dd2881; }
  .newsArticle .sideSpecial .swiper-button-next:after, .newsArticle .sideSpecial .swiper-button-prev:after {
    font-size: 24px; }
  .newsArticle .sideSpecial .swiper-button-prev, .newsArticle .sideSpecial .swiper-button-next {
    color: #dd2881; }
  .newsArticle .sideSpecial .swiper-button-prev {
    top: 0;
    left: 50%;
    margin-left: -10px;
    transform: translateX(-50%);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
    .newsArticle .sideSpecial .swiper-button-prev.swiper-button-disabled {
      opacity: .5; }
  .newsArticle .sideSpecial .swiper-button-next {
    top: 100%;
    left: 50%;
    margin-left: -10px;
    transform: translateX(-50%);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
    .newsArticle .sideSpecial .swiper-button-next.swiper-button-disabled {
      opacity: .5; }

.sideSpecialSlide {
  position: relative; }
  .sideSpecialSlide figure img {
    width: 100%; }
  .sideSpecialSlide .swiper-slide {
    height: auto;
    margin-bottom: 40px; }
    .sideSpecialSlide .swiper-slide:hover figure img {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    .sideSpecialSlide .swiper-slide:hover .specialBox {
      background: #333; }
      .sideSpecialSlide .swiper-slide:hover .specialBox a, .sideSpecialSlide .swiper-slide:hover .specialBox a:visited {
        color: #fff; }
    .sideSpecialSlide .swiper-slide figure {
      line-height: 0;
      overflow: hidden; }
      .sideSpecialSlide .swiper-slide figure a {
        position: relative;
        display: block; }
      .sideSpecialSlide .swiper-slide figure img {
        position: relative;
        z-index: 1;
        width: 100.5%;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
    .sideSpecialSlide .swiper-slide .specialBox {
      position: relative;
      background: rgba(12, 15, 100, 0.04);
      text-align: left;
      padding: 25px;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }

/*---------------------------------
|-> Product
---------------------------------*/
ul.productList li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 23%;
  margin: 0 2% 60px 0;
  min-height: 400px;
  text-align: right;
  border: 1px solid #ddd; }
  ul.productList li:nth-child(4), ul.productList li:nth-child(8), ul.productList li:nth-child(12), ul.productList li:nth-child(16) {
    margin-right: 0; }
  ul.productList li figure {
    position: relative;
    line-height: 0; }
    ul.productList li figure a {
      position: relative;
      z-index: 1; }
  ul.productList li figcaption {
    padding: 20px;
    display: block;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.4em; }
    ul.productList li figcaption a {
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; }
  ul.productList li img {
    max-width: 100%; }
  ul.productList li a.btnMore {
    position: absolute;
    left: 15%;
    bottom: 30px;
    width: 70%;
    min-width: 10px;
    padding: 3px 0;
    margin: 0;
    text-align: center;
    border: 1px solid #333;
    color: #333; }
    ul.productList li a.btnMore:visited {
      border: 1px solid #333;
      color: #333; }
    ul.productList li a.btnMore:hover {
      border: 1px solid #dd2881;
      color: #fff; }

/*---------------------------------
|-> Faq
---------------------------------*/
ul.faqList li {
  min-height: 100px;
  padding-bottom: 90px; }

.faqGroup .faqTitle {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 0; }

.faqGroup .bbsArticle {
  border-bottom: 1px solid #ddd;
  padding-bottom: 40px; }

/*---------------------------------
|-> Festival
---------------------------------*/
.festivalArticle .backArea {
  padding-top: 60px; }

ul.festivalList li {
  min-height: 100px;
  padding-bottom: 90px;
  text-align: center; }
  ul.festivalList li figcaption {
    text-align: center;
    min-height: 106px; }
  ul.festivalList li .month {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 70%;
    padding-top: 20px;
    margin: 10px auto 0 auto;
    text-align: center;
    font-size: 18px;
    color: #999;
    border-top: 1px solid #999; }
    ul.festivalList li .month:before {
      position: absolute;
      left: 50%;
      margin-left: -27px;
      top: -20px;
      display: block;
      content: ' ';
      width: 55px;
      height: 35px;
      background: #fff url(../images/clock.png) center center no-repeat;
      -webkit-background-size: auto 100%;
      /* Safari 3.0 */
      -moz-background-size: auto 100%;
      /* Gecko 1.9.2 (Firefox 3.6) */
      -o-background-size: auto 100%;
      /* Opera 9.5 */
      background-size: auto 100%; }

ul.monthList {
  text-align: center;
  margin-top: 30px; }
  ul.monthList .phoneBtn {
    display: none; }
    ul.monthList .phoneBtn:hover {
      cursor: pointer; }
  ul.monthList li {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px; }
    ul.monthList li.select a {
      background: #dd2881;
      color: #fff; }
      ul.monthList li.select a:visited {
        color: #fff; }
      ul.monthList li.select a:hover {
        color: #fff;
        cursor: default; }
    ul.monthList li a {
      background: #fff;
      color: #dd2881;
      border: 1px solid #dd2881;
      font-size: 18px;
      min-width: 250px;
      display: inline-block;
      vertical-align: top;
      padding: 5px 80px;
      margin: 0 25px 20px 25px;
      -webkit-border-radius: 30px;
      border-radius: 30px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      padding: 0;
      min-width: 1px;
      margin: 0 8px; }
      ul.monthList li a span[class^="icon-"]:before {
        position: relative;
        top: 15px;
        font-size: 45px;
        margin-right: 10px;
        line-height: 0; }
      ul.monthList li a:visited, ul.monthList li a:active, ul.monthList li a:focus {
        color: #dd2881;
        text-decoration: none; }
      ul.monthList li a:hover {
        background: #333;
        color: #fff;
        background: #dd2881;
        text-decoration: none;
        border: 1px solid #dd2881; }

.festivalMain {
  position: relative;
  margin-top: 40px; }
  .festivalMain figure {
    width: 35%;
    line-height: 0; }
    .festivalMain figure img {
      width: 100%; }
  .festivalMain .festivalInfo {
    position: absolute;
    top: 0;
    margin-left: 35%;
    width: 65%; }
    .festivalMain .festivalInfo .pageTitle {
      margin-left: 40px; }
    .festivalMain .festivalInfo ul.festivalInfoList {
      color: #fff;
      background: #dd2881;
      padding: 30px 40px;
      font-size: 24px;
      line-height: 1.4em; }

/*---------------------------------
|-> Attraction
---------------------------------*/
.attractionArticle .pageTitle + .bbsArticle {
  margin-top: 0;
  margin-bottom: 0; }

ul.attractionList li {
  min-height: 480px;
  padding-bottom: 70px; }
  ul.attractionList li figcaption {
    margin: 10px;
    padding: 5px 15px 15px 0;
    text-align: right;
    background: url(../images/mark.png) right bottom no-repeat;
    -webkit-background-size: auto 40%;
    /* Safari 3.0 */
    -moz-background-size: auto 40%;
    /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: auto 40%;
    /* Opera 9.5 */
    background-size: auto 40%; }
  ul.attractionList li p {
    padding: 0 15px;
    text-align: left;
    font-size: 18px;
    line-height: 1.4em; }

/*---------------------------------
|-> Viewpoint
---------------------------------*/
ul.viewpointList li {
  margin-bottom: 60px; }
  ul.viewpointList li figure {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    line-height: 0; }
    ul.viewpointList li figure img {
      width: 100%; }

.viewpointInfo {
  display: inline-block;
  vertical-align: top;
  width: 57%;
  margin-left: 2%; }
  .viewpointInfo .bbsArticle {
    margin: 20px 0; }
  .viewpointInfo .viewpointTitle {
    font-size: 24px; }
  .viewpointInfo .viewpointSub {
    font-size: 18px;
    color: #9f590c;
    margin-top: 10px; }

ul.viewpointInfoList {
  font-size: 18px; }
  ul.viewpointInfoList li {
    margin-bottom: 0; }

/*---------------------------------
|-> Album
---------------------------------*/
.albumListArea {
  background: #eaeaea;
  padding: 40px 0;
  margin-bottom: 20px; }
  .albumListArea + .groupMain .bbsArticle {
    margin-top: 0; }

.albumList {
  position: relative;
  width: 1200px;
  margin: 0 auto; }
  .albumList a {
    display: inline-block;
    vertical-align: top; }
    .albumList a img {
      width: 100%; }
    .albumList a:nth-child(1) {
      width: 49%; }
    .albumList a:nth-child(2), .albumList a:nth-child(3), .albumList a:nth-child(4), .albumList a:nth-child(5) {
      width: 23%;
      margin-left: 2.5%; }
    .albumList a:nth-child(4), .albumList a:nth-child(5) {
      position: absolute;
      bottom: 0;
      margin-left: 0; }
    .albumList a:nth-child(4) {
      left: 51.5%; }
    .albumList a:nth-child(5) {
      left: 77%; }

.lg-backdrop {
  background: rgba(0, 0, 0, 0.8); }

/*---------------------------------
|-> Map
---------------------------------*/
.groupMain iframe {
  width: 100%;
  min-height: 600px;
  border: none; }

.groupMain .facebookArea iframe {
  min-height: 50px; }

.homeSocial .groupMain iframe {
  min-height: 300px; }

/*---------------------------------
|-> Download
---------------------------------*/
ul.downloadList li {
  min-height: 100px;
  padding-bottom: 90px; }
  ul.downloadList li figure a {
    position: relative;
    display: block; }
    ul.downloadList li figure a img {
      position: relative;
      z-index: 1; }
    ul.downloadList li figure a:hover:before {
      opacity: 1;
      cursor: pointer; }
    ul.downloadList li figure a:before {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -30px;
      margin-left: -30px;
      z-index: 5;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 25px;
      color: #fff;
      border: 1px solid #fff;
      -webkit-border-radius: 32px;
      border-radius: 32px;
      opacity: .7;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
  ul.downloadList li figcaption {
    min-height: 106px; }
  ul.downloadList li .tat-angle-down {
    position: absolute;
    left: 50%;
    display: block;
    width: 250px;
    bottom: 30px;
    margin: 0 0 0 -125px;
    padding: 5px 0;
    text-align: center;
    border: 1px solid #333;
    color: #333; }
    ul.downloadList li .tat-angle-down:before {
      content: none; }
    ul.downloadList li .tat-angle-down:after {
      position: relative;
      top: 2px;
      display: inline-block;
      vertical-align: top;
      font-family: 'tat';
      content: 'j';
      width: 20px;
      font-size: 20px; }
    ul.downloadList li .tat-angle-down:visited {
      border: 1px solid #333;
      color: #333; }
    ul.downloadList li .tat-angle-down:hover {
      border: 1px solid #dd2881;
      background: #dd2881;
      color: #fff; }

/*---------------------------------
|-> Page Tag
---------------------------------*/
ul.pageTagList {
  text-align: center;
  margin-top: 25px; }
  ul.pageTagList li {
    display: inline-block;
    vertical-align: top; }
    ul.pageTagList li.select a {
      background: #dd2881;
      color: #fff; }
      ul.pageTagList li.select a:visited {
        color: #fff; }
      ul.pageTagList li.select a:hover {
        color: #fff;
        cursor: default; }
    ul.pageTagList li a {
      background: #fff;
      color: #dd2881;
      border: 1px solid #dd2881;
      font-size: 18px;
      min-width: 250px;
      display: inline-block;
      vertical-align: top;
      padding: 5px 80px;
      margin: 0 25px 20px 25px;
      -webkit-border-radius: 45px;
      border-radius: 45px;
      width: 90px;
      height: 90px;
      line-height: 90px;
      padding: 0;
      min-width: 1px;
      margin: 0 8px; }
      ul.pageTagList li a span[class^="icon-"]:before {
        position: relative;
        top: 15px;
        font-size: 45px;
        margin-right: 10px;
        line-height: 0; }
      ul.pageTagList li a:visited, ul.pageTagList li a:active, ul.pageTagList li a:focus {
        color: #dd2881;
        text-decoration: none; }
      ul.pageTagList li a:hover {
        background: #333;
        color: #fff;
        background: #dd2881;
        text-decoration: none;
        border: 1px solid #dd2881; }

/*---------------------------------
|-> Tag
---------------------------------*/
.tagArea {
  padding-top: 20px; }
  .tagArea a {
    background: #fff;
    color: #333;
    border: 1px solid #333;
    font-size: 18px;
    min-width: 250px;
    display: inline-block;
    vertical-align: top;
    padding: 5px 80px;
    margin: 0 25px 20px 25px;
    -webkit-border-radius: 0;
    border-radius: 0;
    min-width: 0;
    padding: 5px 20px;
    margin: 0 20px 20px 0; }
    .tagArea a span[class^="icon-"]:before {
      position: relative;
      top: 15px;
      font-size: 45px;
      margin-right: 10px;
      line-height: 0; }
    .tagArea a:visited, .tagArea a:active, .tagArea a:focus {
      color: #333;
      text-decoration: none; }
    .tagArea a:hover {
      background: #333;
      color: #fff;
      background: #dd2881;
      text-decoration: none;
      border: 1px solid #fff; }
    .tagArea a:before {
      content: '#';
      float: left; }

.backArea {
  margin-top: 20px;
  text-align: center; }
  .backArea a.btnBack {
    display: inline-block;
    vertical-align: top;
    font-size: 18px; }
    .backArea a.btnBack:hover:before {
      border: 1px solid #dd2881; }
    .backArea a.btnBack:before {
      position: relative;
      top: -10px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      font-size: 26px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin-right: 15px;
      border: 1px solid #333;
      content: '<';
      -webkit-border-radius: 22px;
      border-radius: 22px; }

/*---------------------------------
|-> Food
---------------------------------*/
.center {
  text-align: center; }

.articleContent p {
  font-size: 18px; }

.foodArticle img, .cookArticle img {
  max-width: 100%; }

.foodArticle div + h2, .cookArticle div + h2 {
  margin-top: 30px; }

.foodArticle h2, .cookArticle h2 {
  font-size: 24px; }

.foodArticle .imgMain, .cookArticle .imgMain {
  padding: 30px 0; }

.foodArticle .imgDouble, .cookArticle .imgDouble {
  padding: 30px 0; }
  .foodArticle .imgDouble + p, .cookArticle .imgDouble + p {
    margin-top: 20px; }
  .foodArticle .imgDouble img, .cookArticle .imgDouble img {
    display: inline-block;
    vertical-align: top;
    margin: 0 1px; }

.bgContent {
  position: relative;
  line-height: 0; }
  .bgContent img {
    position: relative;
    width: 100%;
    line-height: 0; }
  .bgContent .groupMain {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -600px;
    line-height: 1.4em; }
    .bgContent .groupMain h1 {
      text-align: center; }

/*---------------------------------
|-> History
---------------------------------*/
.historyContent {
  font-size: 18px;
  margin-bottom: 60px; }

ul.yearLine {
  position: relative;
  margin: 80px 0 80px 120px; }
  ul.yearLine:after {
    position: relative;
    top: -10px;
    left: -11px;
    font-family: 'tat';
    content: 't';
    font-size: 24px;
    color: #235bf3; }
  ul.yearLine li {
    position: relative;
    padding: 0 0 40px 80px; }
    ul.yearLine li:nth-child(1) h3 {
      color: #a26119; }
    ul.yearLine li:nth-child(1):before {
      border-left: 1px solid #a26119; }
    ul.yearLine li:nth-child(1) .yearPoint:before {
      background: #a26119; }
    ul.yearLine li:nth-child(1) .yearPoint:after {
      border: 2px solid #a26119; }
    ul.yearLine li:nth-child(2) h3 {
      color: #48c38a; }
    ul.yearLine li:nth-child(2):before {
      border-left: 1px solid #48c38a; }
    ul.yearLine li:nth-child(2) .yearPoint:before {
      background: #48c38a; }
    ul.yearLine li:nth-child(2) .yearPoint:after {
      border: 2px solid #48c38a; }
    ul.yearLine li:nth-child(3) h3 {
      color: #f59330; }
    ul.yearLine li:nth-child(3):before {
      border-left: 1px solid #f59330; }
    ul.yearLine li:nth-child(3) .yearPoint:before {
      background: #f59330; }
    ul.yearLine li:nth-child(3) .yearPoint:after {
      border: 2px solid #f59330; }
    ul.yearLine li:nth-child(4) h3 {
      color: #235bf3; }
    ul.yearLine li:nth-child(4):before {
      border-left: 1px solid #235bf3; }
    ul.yearLine li:nth-child(4) .yearPoint:before {
      background: #235bf3; }
    ul.yearLine li:nth-child(4) .yearPoint:after {
      border: 2px solid #235bf3; }
    ul.yearLine li:before {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      content: ' ';
      border-left: 1px solid #ccc; }
    ul.yearLine li h3 {
      position: relative;
      top: -5px;
      font-size: 24px;
      padding: 0; }
    ul.yearLine li h4 {
      font-size: 24px;
      margin: 15px 0 10px 0; }
    ul.yearLine li h5 {
      font-size: 18px;
      margin-bottom: 30px; }
    ul.yearLine li figure {
      margin: 30px auto;
      text-align: center; }
      ul.yearLine li figure img {
        max-width: 100%; }
    ul.yearLine li .yearPoint {
      position: relative;
      left: -80px; }
      ul.yearLine li .yearPoint:before {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -6px;
        display: block;
        width: 12px;
        height: 12px;
        background: #dd2881;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        content: ' '; }
      ul.yearLine li .yearPoint:after {
        position: absolute;
        top: -4px;
        left: 50%;
        margin-left: -10px;
        display: block;
        width: 16px;
        height: 16px;
        border: 2px solid #dd2881;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        content: ' '; }

/*-----------------------------------------------------------
|-> Sitemap
-----------------------------------------------------------*/
.sitemapArea h4 {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px; }

ul.sitemap {
  display: inline-block;
  vertical-align: top;
  width: 22%;
  margin: 0 1% 40px 1%;
  font-size: 18px; }
  ul.sitemap li {
    position: relative;
    line-height: 1.4em;
    padding-left: 20px;
    margin-bottom: 10px; }
    ul.sitemap li:before {
      position: absolute;
      top: 0;
      left: 0;
      font-family: 'tat';
      content: 'k';
      color: #dd2881; }

/*---------------------------------
|-> Info
---------------------------------*/
.infoContent {
  font-size: 18px; }
  .infoContent .groupMain {
    padding: 0 0 40px 0; }
    .infoContent .groupMain h1.pageTitle {
      padding: 30px 0 30px 0;
      text-align: center; }
  .infoContent figure.center + p {
    margin-top: 40px; }

.mapArea {
  position: relative;
  text-align: center; }
  .mapArea h5 {
    font-size: 18px;
    color: #9f590c; }
  .mapArea figure {
    display: inline-block;
    margin: 0 auto; }
  .mapArea div {
    position: absolute;
    top: 0;
    width: 30%;
    text-align: left; }
  .mapArea .infoNortheast {
    top: 70px;
    right: 0; }
  .mapArea .infoNorth {
    top: 100px;
    left: 0; }
  .mapArea .infoEast {
    top: 320px;
    right: 0; }
  .mapArea .infoMiddle {
    top: 360px;
    left: 0; }
  .mapArea .infoSouth {
    top: 500px;
    right: 0; }

.twoBox, .twoBoxGray {
  position: relative;
  color: #fff;
  background: #dd2881;
  line-height: 0; }
  .twoBox:after, .twoBoxGray:after {
    display: block;
    clear: both;
    float: none;
    width: 100%;
    content: ' ';
    height: 0; }
  .twoBox img, .twoBoxGray img {
    width: 100%; }
  .twoBox .leftInfoBox, .twoBoxGray .leftInfoBox {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    overflow: hidden; }
  .twoBox .rightInfoBox, .twoBoxGray .rightInfoBox {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    overflow: hidden; }
  .twoBox .wordInfoContent, .twoBoxGray .wordInfoContent {
    line-height: 1.4em;
    padding: 0 30px; }
    .twoBox .wordInfoContent h4, .twoBoxGray .wordInfoContent h4 {
      text-align: center;
      font-size: 24px;
      color: #ffc83e;
      margin: 0;
      padding: 40px 0 30px 0; }
    .twoBox .wordInfoContent ul, .twoBoxGray .wordInfoContent ul {
      margin: 0 0 20px 20px; }
      .twoBox .wordInfoContent ul li, .twoBoxGray .wordInfoContent ul li {
        list-style-position: outside;
        list-style-type: disc; }
  .twoBox.first .leftInfoBox, .first.twoBoxGray .leftInfoBox {
    float: left; }
  .twoBox.sec .leftInfoBox, .sec.twoBoxGray .leftInfoBox {
    display: block;
    margin-right: 50%; }
  .twoBox.sec .rightInfoBox, .sec.twoBoxGray .rightInfoBox {
    float: right; }

.twoBoxGray img {
  width: auto;
  margin-bottom: 60px; }

.twoBoxGray h5 {
  line-height: 1.4em;
  color: #333;
  font-size: 24px;
  margin-top: 40px;
  padding: 10px 0; }

.twoBoxGray .gray {
  background: #efefef;
  text-align: center; }

.twoBoxGray .wordInfoContent {
  padding: 100px 30px 0 30px; }

.fullPic img {
  width: 100%; }

.hr {
  margin: 20px 0;
  border-top: 1px solid #ddd; }

.etiquetteBox {
  vertical-align: top;
  margin-bottom: 80px; }
  .etiquetteBox .leftImg {
    width: 35%;
    float: left;
    text-align: center; }
    .etiquetteBox .leftImg img {
      max-width: 100%; }
  .etiquetteBox .rightWord {
    margin-left: 35%; }

/*---------------------------------
|-> Agency
---------------------------------*/
.agencyArea {
  display: inline-block;
  vertical-align: top;
  width: 49%;
  margin-bottom: 20px; }
  .agencyArea h3 {
    line-height: 1.4em; }

ul.locationList {
  margin: 0 20px 20px 0; }
  ul.locationList li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding-left: 28px; }
    ul.locationList li:nth-child(1) {
      margin-right: 40px; }
    ul.locationList li:nth-child(3) {
      display: block; }
    ul.locationList li[class^="tat-"]:before {
      position: absolute;
      left: 0;
      top: 2px;
      color: #dd2881; }

.fanclub .noteText {
  text-align: center; }
  .fanclub .noteText span {
    display: block;
    margin-right: 10px; }
  .fanclub .noteText a.btnLink {
    display: inline-block;
    vertical-align: top;
    width: 150px;
    margin-top: 10px; }

.fanclub .formGroup {
  padding: 0 40px;
  text-align: left; }
  .fanclub .formGroup.invite {
    padding: 40px;
    background: #dd2881;
    border-radius: 15px;
    width: 800px;
    margin-bottom: 40px; }
  .fanclub .formGroup .copyGroup {
    position: relative;
    background: #fff;
    border-radius: 5px; }
    .fanclub .formGroup .copyGroup.copy .tip {
      animation-duration: 4s;
      animation-name: showTip;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-timing-function: ease;
      animation-delay: 0s;
      animation-fill-mode: normal;
      -webkit-animation-duration: 4s;
      -webkit-animation-name: showTip;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-direction: normal;
      -webkit-animation-timing-function: ease;
      -webkit-animation-delay: 0s;
      -webkit-animation-fill-mode: normal;
      -moz-animation-duration: 4s;
      -moz-animation-timing-function: ease;
      -moz-animation-name: showTip;
      -moz-animation-iteration-count: 1;
      -moz-animation-direction: normal;
      -moz-animation-delay: 0s;
      -moz-animation-fill-mode: normal; }
    .fanclub .formGroup .copyGroup + .copyGroup {
      margin-top: 20px; }
    .fanclub .formGroup .copyGroup .tip {
      position: absolute;
      z-index: 10;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      left: calc(100% + 20px);
      width: 120px;
      font-size: 14px;
      text-align: center;
      background: #666;
      color: #fff;
      border-radius: 5px;
      opacity: 0; }
    .fanclub .formGroup .copyGroup button {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      font-size: 16px;
      width: 130px;
      background: #f9bbdc;
      border: none;
      border-radius: 0 5px 5px 0; }
      .fanclub .formGroup .copyGroup button:hover {
        cursor: pointer;
        background: #7f1616;
        color: #fff; }
    .fanclub .formGroup .copyGroup .inputGroup {
      margin-bottom: 0; }
      .fanclub .formGroup .copyGroup .inputGroup .nameTitle {
        color: #dd2881; }
      .fanclub .formGroup .copyGroup .inputGroup input {
        width: calc(100% - 130px);
        margin-bottom: 0;
        border: none; }
        .fanclub .formGroup .copyGroup .inputGroup input:hover {
          border: none; }

.fanclub h3 {
  text-align: left;
  margin-bottom: 15px; }
  .fanclub h3 img {
    width: 70px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: bottom; }

.fanclub .btnArea {
  padding: 20px;
  text-align: center; }
  .fanclub .btnArea input[type="reset"] {
    vertical-align: top;
    font-size: 18px;
    color: #fff;
    background: #dd2881;
    opacity: 0.8;
    line-height: 36px;
    width: 240px;
    padding: 0;
    margin-right: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-border-radius: 0;
    border-radius: 0; }
    .fanclub .btnArea input[type="reset"]:hover {
      cursor: pointer;
      opacity: 1; }
  .fanclub .btnArea input[type="submit"] {
    vertical-align: top;
    font-size: 18px;
    color: #fff;
    background: #dd2881;
    opacity: 0.8;
    line-height: 36px;
    width: 240px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-border-radius: 0;
    border-radius: 0; }
    .fanclub .btnArea input[type="submit"]:hover {
      cursor: pointer;
      opacity: 1; }

.pointRecord {
  padding-bottom: 60px; }
  .pointRecord ul.recordListTitle li, .pointRecord ul.recordList li {
    float: left;
    width: 25%;
    padding: 10px 5px;
    height: 40px;
    line-height: 1.3em; }
  .pointRecord ul.recordListTitle {
    font-weight: bold; }
    .pointRecord ul.recordListTitle li {
      border-bottom: 1px dashed #999; }
  .pointRecord ul.recordList::after {
    display: block;
    float: none;
    clear: both;
    content: '.';
    color: rgba(0, 0, 0, 0);
    height: 0;
    line-height: 0; }
  .pointRecord .minus {
    background: #6cad2d;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 50px;
    border-radius: 25px; }
  .pointRecord .increase {
    background: #dd2881;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 50px;
    border-radius: 25px; }

.socialBind {
  text-align: center; }
  .socialBind h3 {
    text-align: center; }
  .socialBind a {
    display: block;
    width: 200px;
    margin: 0 auto;
    color: #fff;
    line-height: 45px;
    text-align: center;
    opacity: 0.8; }
    .socialBind a + a {
      margin-top: 20px; }
    .socialBind a + h3 {
      margin-top: 20px; }
    .socialBind a:hover {
      opacity: 1; }
    .socialBind a span[class^="tat-"]:before {
      position: relative;
      top: 5px;
      color: #fff;
      font-size: 24px;
      margin-right: 10px; }
    .socialBind a span.tat-google:before {
      font-size: 20px; }
    .socialBind a.fbBtn {
      background: #4267B2; }
    .socialBind a.googleBtn {
      background: #dd4e40; }
    .socialBind a.lineBtn {
      background: #00b900; }
    .socialBind a.cancelBtn {
      background: #666; }

.birthdayArea {
  text-align: left; }
  .birthdayArea h3.year {
    text-align: left;
    color: #999;
    text-align: center;
    height: 58px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .birthdayArea .yearGroup {
    display: inline-block;
    vertical-align: top;
    width: calc(24.5% - 30px);
    margin: 0 15px 60px 15px; }
  .birthdayArea p {
    font-size: 20px;
    border-bottom: 1px dashed #ccc;
    padding: 40px 0;
    text-align: center; }
    .birthdayArea p .wait {
      color: #dd2881;
      font-size: 24px; }
  .birthdayArea figure {
    display: inline-block;
    vertical-align: top;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .birthdayArea figure img {
      max-width: 100%; }
    .birthdayArea figure:hover {
      -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); }
    .birthdayArea figure + .year {
      margin-top: 40px; }
    .birthdayArea figure + p {
      margin-top: 60px; }

.centerArea {
  text-align: center;
  margin-bottom: 20px; }
  .centerArea .checkGroup {
    display: inline-block;
    vertical-align: top;
    margin: 20px auto; }

.result {
  text-align: center;
  color: #dd2881;
  margin-top: 40px; }

.picker--opened .picker__frame button[type="button"].picker__button--today, .picker--opened .picker__frame button[type="button"].picker__button--clear,
.picker--opened .picker__frame button[type="button"].picker__button--close {
  color: #000; }
  .picker--opened .picker__frame button[type="button"].picker__button--today:before, .picker--opened .picker__frame button[type="button"].picker__button--clear:before,
  .picker--opened .picker__frame button[type="button"].picker__button--close:before {
    top: 0; }

.picker__select--month, .picker__select--year {
  padding: 0; }

.picker__year {
  display: none; }

.textArea {
  position: relative;
  top: -12px;
  text-align: left;
  margin-bottom: 18px;
  font-size: 14px; }
  .textArea a.forget {
    float: right; }

/*--> Youtube Video ----------------------------------------------------------------------------*/
.video-container {
  position: relative;
  z-index: 2;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }
  .video-container + * {
    margin-top: 40px; }
  .video-container iframe {
    min-height: 50px; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*--> showTip ----------------------------------------------------------------------------*/
@-webkit-keyframes showTip {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes showTip {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes showTip {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*=========================================================
|-> RWD File
=========================================================*/
/*----------------------------------------------------------------------------------------------
|-> RWD
----------------------------------------------------------------------------------------------*/
@media all and (max-width: 1500px) {
  .homeHot {
    background: #f5f0e7 url(../images/top_bg.png) 18% bottom no-repeat;
    background-size: 26% auto; } }

@media all and (max-width: 1200px) {
  .homeSpecial {
    padding: 0 30px 40px 30px; }
  .homeHot {
    padding: 40px 30px 40px 30px;
    background-size: 35% auto;
    background-position: 14% bottom; }
  .topArea,
  .groupMain,
  .footerArea {
    width: auto; }
  .bgContent .groupMain {
    top: 0;
    left: 0;
    right: 0;
    margin-left: 0;
    padding-top: 0; }
    .bgContent .groupMain h1 {
      padding: 20px 0; }
  .weatherArea .weather {
    width: 100px; }
  .footer {
    text-align: center; }
  .footerArea {
    display: inline-block;
    margin: 0 auto;
    text-align: left; }
  .footerMain {
    padding-left: 0;
    margin-right: 30px; }
  .footerFollow {
    margin-right: 30px; }
  .footerLogo {
    top: -60px; }
  .footerLink {
    width: 180px; }
  .logo {
    left: 10px; }
  .menu ul {
    padding: 0 10px 0 0; }
    .menu ul li dl {
      left: 15%; }
    .menu ul li dl.featureList {
      margin: 50px 0 0 12%; }
    .menu ul li:hover:before {
      margin-left: 41px; }
    .menu ul li:last-child:before {
      margin-left: 21px; }
  ul.homeIconList li {
    margin: 0 0 30px 0; }
  ul.homeNewsList li {
    width: 240px;
    height: 240px; }
    ul.homeNewsList li .newsLinkArea {
      margin-top: 40px; }
    ul.homeNewsList li:hover .newsLinkArea:after {
      top: -100px; }
  .homePopular {
    padding-bottom: 0; }
  ul.popularList li {
    margin: 0 10px 50px 10px; }
  .festivalRight {
    padding: 40px 20px 20px 20px; }
  .weatherArea {
    padding: 0 15px; }
  .shareArea {
    margin: 0 20px; }
  .insideArticle .groupMain {
    margin: 0 20px; }
  .albumList {
    width: 95%; }
  .twoBox img, .twoBoxGray img {
    width: auto;
    height: 100%; } }

@media all and (max-width: 1050px) {
  .mapArea div {
    width: 27%; }
  .mapArea .infoNortheast {
    top: 30px; }
  .mapArea .infoEast {
    top: 280px; }
  .mapArea .infoSouth {
    top: 480px;
    width: 32%; }
  .twoBoxGray .wordInfoContent {
    padding: 40px 30px 0 30px; }
  .foodArticle .imgDouble img, .cookArticle .imgDouble img {
    margin-bottom: 20px; }
  .festivalMain figure {
    width: 45%; }
  .festivalMain .festivalInfo {
    margin-left: 45%;
    width: 55%; }
  ul.newsList li, ul.faqList li, ul.festivalList li, ul.attractionList li, ul.downloadList li {
    margin: 0 4.3% 60px 0; }
    ul.newsList li:nth-child(3), ul.faqList li:nth-child(3), ul.festivalList li:nth-child(3), ul.attractionList li:nth-child(3), ul.downloadList li:nth-child(3), ul.newsList li:nth-child(6), ul.faqList li:nth-child(6), ul.festivalList li:nth-child(6), ul.attractionList li:nth-child(6), ul.downloadList li:nth-child(6), ul.newsList li:nth-child(9), ul.faqList li:nth-child(9), ul.festivalList li:nth-child(9), ul.attractionList li:nth-child(9), ul.downloadList li:nth-child(9) {
      margin-right: 0; }
    ul.newsList li a.btnMore, ul.faqList li a.btnMore, ul.festivalList li a.btnMore, ul.attractionList li a.btnMore, ul.downloadList li a.btnMore {
      margin: 0;
      left: 10%;
      right: 10%;
      text-align: center;
      min-width: 10px;
      padding: 5px; }
  .bannerInside h4 {
    right: 2%;
    bottom: -20px;
    font-size: 43.2px; }
  .bannerInside .titleBox h3 {
    font-size: 60px; } }

@media all and (max-width: 950px) {
  .mapArea .infoNortheast, .mapArea .infoNorth, .mapArea .infoEast, .mapArea .infoMiddle, .mapArea .infoSouth {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    top: 0; }
  .bannerArea .owl-nav .owl-prev, .bannerArea .owl-nav .owl-next {
    margin-top: 10%; }
  ul.productList li {
    margin: 0 7% 60px 0;
    padding-bottom: 70px;
    width: 46%; }
    ul.productList li:nth-child(4), ul.productList li:nth-child(8), ul.productList li:nth-child(12), ul.productList li:nth-child(16) {
      margin: 0 7% 60px 0; }
    ul.productList li:nth-child(even) {
      margin-right: 0; }
  .twoBox + .twoBox, .twoBoxGray + .twoBox, .twoBox + .twoBoxGray, .twoBoxGray + .twoBoxGray {
    padding-bottom: 40px; }
  .twoBox img, .twoBoxGray img {
    height: auto; }
  .twoBox.first .leftInfoBox, .first.twoBoxGray .leftInfoBox, .twoBox.first .rightInfoBox, .first.twoBoxGray .rightInfoBox, .twoBox.sec .leftInfoBox, .sec.twoBoxGray .leftInfoBox, .twoBox.sec .rightInfoBox, .sec.twoBoxGray .rightInfoBox {
    width: auto;
    display: block;
    float: none;
    margin-right: 0; }
    .twoBox.first .leftInfoBox img, .first.twoBoxGray .leftInfoBox img, .twoBox.first .rightInfoBox img, .first.twoBoxGray .rightInfoBox img, .twoBox.sec .leftInfoBox img, .sec.twoBoxGray .leftInfoBox img, .twoBox.sec .rightInfoBox img, .sec.twoBoxGray .rightInfoBox img {
      display: block;
      margin: 60px auto 0 auto; }
  .twoBoxGray {
    padding-bottom: 20px; }
    .twoBoxGray + .twoBoxGray {
      padding-bottom: 20px; }
    .twoBoxGray.first .leftInfoBox img, .twoBoxGray.first .rightInfoBox img, .twoBoxGray.sec .leftInfoBox img, .twoBoxGray.sec .rightInfoBox img {
      margin: 0 auto 40px auto; }
  .etiquetteBox .rightWord {
    margin-left: 38%; }
  .header {
    height: 100px; }
    .header.fixed {
      height: 100px;
      -webkit-transition: all 0 ease-in-out;
      -o-transition: all 0 ease-in-out;
      transition: all 0 ease-in-out; }
      .header.fixed .logo, .header.fixed .topGroup {
        display: block; }
      .header.fixed .menu ul {
        padding: 55px 20px 0 20px; }
        .header.fixed .menu ul li {
          width: auto; }
          .header.fixed .menu ul li a.mainLink [class^='tat-'], .header.fixed .menu ul li a.noSub [class^='tat-'] {
            display: inline-block;
            vertical-align: top;
            padding-left: 20px; }
  .logo {
    top: 5px;
    left: 10px;
    width: auto;
    height: 90px; }
  .topGroup {
    right: 10px; }
  .footerArea {
    width: 70%; }
  .footerMain {
    display: block;
    margin-right: 0; }
  .footerFollow {
    display: block;
    margin-top: 40px;
    width: auto;
    margin-right: 0; }
  .epaperArea {
    margin-top: 20px; }
  .footerLink {
    display: block;
    margin-top: 40px;
    width: auto; }
    .footerLink .footerList li {
      display: inline-block;
      margin-right: 30px; }
      .footerLink .footerList li:nth-child(odd) {
        margin-right: 30px; }
  .welcome {
    position: relative;
    left: 0;
    text-align: center;
    color: #fff; }
    .welcome .text {
      color: #fff; }
    .welcome button {
      border: 1px solid #fff;
      color: #fff; }
  .sideMenuGroup {
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    right: -300px;
    /*animation -300px>0*/
    width: 300px;
    margin-left: 0;
    background: #f44ea2;
    -webkit-box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0);
    box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0);
    overflow: auto;
    /*animation rgba(0,0,0,0)>rgba(0,0,0,.3)*/
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
    .sideMenuGroup.menuOpen {
      -webkit-animation-duration: .7s;
      animation-duration: .7s;
      -webkit-animation-name: menuOpen;
      animation-name: menuOpen;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-direction: normal;
      animation-direction: normal; }
    .sideMenuGroup.menuClose {
      -webkit-animation-duration: .7s;
      animation-duration: .7s;
      -webkit-animation-name: menuClose;
      animation-name: menuClose;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-direction: normal;
      animation-direction: normal; }
  .menu {
    position: relative;
    z-index: 85;
    border: 0;
    width: auto;
    margin-left: 0; }
    .menu ul {
      display: block;
      padding: 55px 20px 0 20px;
      background: none; }
      .menu ul li {
        position: relative;
        display: block;
        margin-left: 0;
        width: auto; }
        .menu ul li dl {
          position: relative;
          top: 0;
          left: 0;
          margin-left: 40px;
          width: auto;
          text-align: left; }
          .menu ul li dl dd {
            position: relative;
            border: none;
            color: #fff;
            padding-left: 15px;
            line-height: 1.5em; }
            .menu ul li dl dd:before {
              position: absolute;
              top: -2px;
              left: 0;
              display: inline-block;
              vertical-align: top;
              content: '•';
              font-size: 14px; }
            .menu ul li dl dd a {
              color: #fff;
              font-size: 16px;
              line-height: 1.5em; }
              .menu ul li dl dd a:visited {
                color: #fff; }
              .menu ul li dl dd a:hover {
                color: #fbdea3; }
        .menu ul li dl.featureList {
          display: none; }
        .menu ul li .subArea {
          position: relative;
          top: 0;
          width: auto;
          height: 0;
          left: 0;
          opacity: 1;
          background: none; }
        .menu ul li.select .subArea, .menu ul li:hover .subArea {
          display: none;
          -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
        .menu ul li.select a.mainLink span, .menu ul li:hover a.mainLink span {
          color: #fbdea3; }
        .menu ul li .shareGroup {
          margin-top: 50px; }
        .menu ul li a.mainLink, .menu ul li a.noSub {
          margin: 0 5px;
          height: 45px;
          line-height: 45px;
          border-left: 0;
          border-bottom: 1px dashed #fff;
          font-size: 18px;
          text-align: left;
          padding-left: 20px; }
          .menu ul li a.mainLink [class^='tat-'], .menu ul li a.mainLink span, .menu ul li a.noSub [class^='tat-'], .menu ul li a.noSub span {
            display: inline-block;
            vertical-align: top; }
            .menu ul li a.mainLink [class^='tat-']:before, .menu ul li a.mainLink span:before, .menu ul li a.noSub [class^='tat-']:before,
            .menu ul li a.noSub span:before {
              color: #fff;
              font-size: 20px;
              margin-right: 10px; }
          .menu ul li a.mainLink:hover span,
          .menu ul li a.noSub:hover span {
            color: #fce6bc; }
        .menu ul li a.mainLink:after {
          font-family: 'tat';
          content: 'P';
          float: right;
          font-size: 14px; }
        .menu ul li a {
          color: #fff;
          opacity: 1; }
          .menu ul li a:visited {
            color: #fff;
            opacity: 1; }
          .menu ul li a:hover {
            color: #fce6bc;
            opacity: 1; }
        .menu ul li.slide:hover .subArea {
          display: block;
          height: auto;
          margin-bottom: 20px; }
        .menu ul li.slide .subArea {
          height: auto;
          margin-bottom: 20px; }
  @-webkit-keyframes menuOpen {
    0% {
      right: -250px; }
    100% {
      right: 0; } }
  @-moz-keyframes menuOpen {
    0% {
      right: -250px; }
    100% {
      right: 0; } }
  @keyframes menuOpen {
    0% {
      right: -250px; }
    100% {
      right: 0; } }
  @-webkit-keyframes menuClose {
    0% {
      right: 0; }
    100% {
      right: -300px; } }
  @-moz-keyframes menuClose {
    0% {
      right: 0; }
    100% {
      right: -300px; } }
  @keyframes menuClose {
    0% {
      right: 0; }
    100% {
      right: -300px; } }
  a.tat-menu, .header a.tat-delete {
    display: block; }
  .bannerArea {
    padding-top: 100px; }
    .bannerArea h3 {
      font-size: 36px; }
  ul.homeIconList {
    text-align: center; }
    ul.homeIconList li {
      width: 23%; }
      ul.homeIconList li a {
        margin: 0 auto; }
  ul.downloadList li .tat-angle-down {
    width: 200px;
    margin: 0 0 0 -100px; }
  ul.homeNewsList li {
    width: 280px;
    height: 280px;
    margin: 0 20px 40px 20px; }
    ul.homeNewsList li:first-child {
      margin: 0 20px 40px 20px; }
    ul.homeNewsList li .newsLinkArea {
      margin-top: 105px; }
    ul.homeNewsList li:hover .newsLinkArea:after {
      top: -70px; }
  .homePopular {
    position: relative;
    padding-top: 60px; }
    .homePopular h2 {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      margin: 0;
      padding: 0;
      text-align: center; }
  .popularRight {
    float: none;
    width: 80%;
    margin: 0 auto; }
  .popularLeft {
    display: block;
    width: auto;
    margin-top: 20px;
    min-height: 50px; }
  .homeFestival {
    position: relative;
    padding-top: 40px; }
    .homeFestival .owl-theme .owl-dots {
      right: 10px; }
    .homeFestival h2 {
      position: absolute;
      width: 100%;
      left: 0;
      top: -40px;
      margin: 0;
      padding: 0;
      text-align: center; }
    .homeFestival a.btnMore {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin-right: 0;
      margin-top: 30px; }
  .festivalLeft {
    width: 80%;
    margin: 0 auto; }
  .festivalRight {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 0; }
  .weatherArea {
    padding: 0 70px; } }

@media all and (max-width: 860px) {
  .fanclub .formGroup.invite {
    width: auto; }
  .fanclub .formGroup .copyGroup.copy .tip {
    left: auto;
    right: 5px;
    top: 100%; }
  .formGroup {
    width: auto; }
  .fanclub .btnArea > a {
    display: block; }
  .specialArea .owl-nav .owl-prev, .specialArea .owl-nav .owl-next {
    margin-top: 15%; }
  .homeHot .owl-nav .owl-prev, .homeHot .owl-nav .owl-next {
    margin-top: 15%; }
  .sideSpecialSlide .swiper-slide:hover figure img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  .sideSpecialSlide .swiper-slide:hover .specialBox {
    background: #333; }
  .sideSpecialSlide .swiper-slide figure {
    line-height: 0;
    overflow: hidden; }
    .sideSpecialSlide .swiper-slide figure a {
      position: relative;
      display: block; }
    .sideSpecialSlide .swiper-slide figure img {
      position: relative;
      z-index: 1;
      width: 100.5%;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
  .sideSpecialSlide .swiper-slide .specialBox {
    position: relative;
    background: #dd2881;
    text-align: left;
    padding: 25px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .sideSpecialSlide .swiper-slide .specialBox a.specialLink {
      color: #fff;
      height: 70px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; }
      .sideSpecialSlide .swiper-slide .specialBox a.specialLink:visited {
        color: #fff; }
  .birthdayArea .yearGroup {
    width: calc(49.4% - 30px); }
  .newsArticle .groupMain {
    padding-bottom: 0; }
  .newsArticle .mainContent {
    width: auto;
    float: none; }
  .newsArticle .sideSpecial {
    width: 112%;
    margin-left: -6%;
    float: none;
    background: rgba(12, 15, 100, 0.04);
    margin-bottom: 0; }
    .newsArticle .sideSpecial .sideSpecialSlide {
      margin: 0 6%; }
    .newsArticle .sideSpecial .swiper-button-prev {
      top: 50%;
      left: 2.5%;
      margin-left: 0px;
      transform: translateX(0%) translateY(-50%);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg); }
      .newsArticle .sideSpecial .swiper-button-prev.swiper-button-disabled {
        opacity: .5; }
    .newsArticle .sideSpecial .swiper-button-next {
      top: 50%;
      left: auto;
      right: 2.5%;
      margin-left: 0px;
      transform: translateX(0%) translateY(-50%);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg); }
      .newsArticle .sideSpecial .swiper-button-next.swiper-button-disabled {
        opacity: .5; }
  .fanclub .formGroup {
    padding: 0;
    margin-left: 2%; }
  .fanclub .selectGroup .nameTitle {
    letter-spacing: 0; }
  .fanclub .btnArea input[type="reset"] {
    display: block;
    margin: 0 auto 20px auto; }
  .inputGroup.half, .selectGroup.half {
    display: block;
    width: auto; }
    .inputGroup.half + .full, .selectGroup.half + .full {
      width: 99%; }
  .weatherArea .weather {
    width: 120px; }
  .etiquetteBox .leftImg {
    display: block;
    width: auto;
    float: none;
    margin-bottom: 40px; }
  .etiquetteBox .rightWord {
    margin-left: 0; }
  ul.sitemap {
    width: 30.5%;
    margin: 0 1% 40px 1%; }
  ul.monthList li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    min-width: 1px;
    margin: 0 5px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    font-size: 14px; }
  .festivalMain figure {
    width: 55%; }
  .festivalMain .festivalInfo {
    margin-left: 55%;
    width: 45%; }
    .festivalMain .festivalInfo .pageTitle {
      margin-left: 20px;
      padding: 20px 0; }
    .festivalMain .festivalInfo ul.festivalInfoList {
      padding: 20px 20px;
      font-size: 20px; }
  .weatherArea {
    padding: 0 20px; }
  .addthisArea {
    top: -50px; }
  .crumb {
    padding: 0;
    margin: 20px 3% 0 3%; }
  .insideArticle .groupMain {
    margin: 20px 3% 0 3%; }
  .bannerInside h4 {
    right: 3%;
    bottom: -30px;
    font-size: 25.2px; }
  .bannerInside .titleBox h3 {
    font-size: 36px; }
  ul.newsList li, ul.faqList li, ul.festivalList li, ul.attractionList li, ul.downloadList li {
    margin: 0 7% 60px 0;
    width: 46%; }
    ul.newsList li:nth-child(3), ul.faqList li:nth-child(3), ul.festivalList li:nth-child(3), ul.attractionList li:nth-child(3), ul.downloadList li:nth-child(3) {
      margin: 0 7% 60px 0; }
    ul.newsList li:nth-child(even), ul.faqList li:nth-child(even), ul.festivalList li:nth-child(even), ul.attractionList li:nth-child(even), ul.downloadList li:nth-child(even) {
      margin-right: 0; }
  ul.attractionList li figcaption {
    font-size: 20px; }
  ul.yearLine {
    margin: 80px 0 80px 20px; }
    ul.yearLine li {
      padding: 0 0 40px 40px; }
      ul.yearLine li .yearPoint {
        left: -40px; } }

@media all and (max-width: 768px) {
  .fanclub .loginBox {
    border-right: none;
    padding-right: 0; }
  .otherId {
    margin-top: 40px; }
  .specialArea .owl-nav .owl-prev, .specialArea .owl-nav .owl-next {
    margin-top: 25%; }
  .homeHot .owl-nav .owl-prev, .homeHot .owl-nav .owl-next {
    margin-top: 26%; }
  .newsArticle .sideSpecial .swiper-button-next, .newsArticle .sideSpecial .swiper-button-prev {
    top: -15px; }
  .infoContent img {
    max-width: 100%; }
  html {
    overflow-x: hidden;
    height: auto; }
  .fancybox-close {
    top: -50px;
    right: 25px; }
  .weatherArea {
    padding: 0 70px; }
  ul.viewpointList li figure {
    display: block;
    width: 100%; }
  .viewpointInfo {
    width: auto;
    margin: 20px 0 0 0; }
  .bgContent img {
    max-width: 120%;
    width: 120%;
    height: auto;
    margin-left: -10%; }
  .bgContent .groupMain {
    margin-top: 10px; }
    .bgContent .groupMain p {
      margin-bottom: 10px;
      letter-spacing: 0px; } }

@media all and (max-width: 650px) {
  .shareBtnArea {
    position: relative;
    top: 0;
    margin-top: 10px; }
    .shareBtnArea p {
      position: relative;
      left: 0;
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 0; }
    .shareBtnArea .shareBtnBox {
      display: inline-block;
      vertical-align: middle; }
  .birthdayArea h3.year {
    height: auto;
    -webkit-line-clamp: inherit; }
  .birthdayArea .yearGroup {
    width: auto; }
  .pointRecord ul.recordListTitle li, .pointRecord ul.recordList li {
    height: auto; }
  .fanclub .formGroup.sWidth {
    width: auto; }
  .fanclub .loginBox, .fanclub .otherId {
    display: block;
    width: auto; }
  .fanclub .formGroup.invite {
    padding: 20px; }
  .fanclub .formGroup .copyGroup .inputGroup input {
    width: calc(100% - 100px); }
  .fanclub .formGroup .copyGroup button {
    width: 100px; }
  .homeHot {
    padding: 40px 30px 60px 30px;
    background-position: center bottom;
    background-size: 45% auto; }
    .homeHot h2 {
      width: calc(100% + 20px);
      margin-bottom: 0;
      margin-left: 30px;
      font-size: 30px; }
      .homeHot h2 span {
        letter-spacing: 0; }
  ul.hotTop3 {
    width: auto;
    float: none; }
    ul.hotTop3 li {
      margin-bottom: 20px; }
  ul.hotList {
    width: auto;
    float: none; }
  .checkListGroup ul.checkboxList li {
    margin-right: 20px; }
  .bannerInside h4 {
    bottom: 5px;
    margin: 0;
    font-size: 18px; }
  .bannerInside .titleBox h3 {
    line-height: 1.3em;
    font-size: 28px;
    padding: 0; }
  .bannerInside .titleBox p {
    padding-top: 5px; }
  .popupHomeArea .popupMain {
    width: 95%; }
    .popupHomeArea .popupMain a.tat-delete {
      right: 15px;
      top: -30px; }
  .shareArea .igArea {
    width: auto; }
    .shareArea .igArea .igBox {
      max-height: 220px; }
  .shareArea .facebookArea {
    position: relative;
    width: 350px;
    max-width: 100%;
    min-height: 10px;
    margin: 0 auto 20px auto; }
  .shareArea .registerFast {
    position: relative;
    top: 0;
    width: 350px;
    right: 0;
    margin: 0 auto;
    max-width: 100%; }
  .agencyArea {
    display: block;
    width: auto; }
  ul.locationList li {
    display: block; }
    ul.locationList li:nth-child(1) {
      margin-right: 0; }
  .twoBox.first .leftInfoBox img, .first.twoBoxGray .leftInfoBox img, .twoBox.first .rightInfoBox img, .first.twoBoxGray .rightInfoBox img {
    margin-top: 0; }
  .fullPic img {
    max-width: 150%;
    width: 150%;
    margin-left: -25%; }
  ul.sitemap {
    width: 46.5%;
    margin: 0 1% 40px 1%; }
  .monthArea {
    height: 45px; }
  ul.monthList {
    position: relative;
    z-index: 20;
    padding-top: 40px; }
    ul.monthList .phoneBtn {
      position: absolute;
      top: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border: 1px solid #dd2881;
      display: block;
      color: #dd2881; }
      ul.monthList .phoneBtn.open:before {
        content: 'i'; }
      ul.monthList .phoneBtn:before {
        position: absolute;
        top: 0;
        right: 5px;
        font-family: 'tat';
        content: 'k';
        float: right;
        font-size: 20px;
        color: #dd2881; }
    ul.monthList li {
      display: none;
      margin-bottom: 0;
      margin-top: -1px; }
      ul.monthList li.select a {
        border-top: 1px solid #fff; }
      ul.monthList li a {
        display: block;
        width: auto;
        padding: 0;
        margin: 0;
        -webkit-border-radius: 0;
        border-radius: 0; }
  .festivalMain {
    margin-top: 0; }
    .festivalMain + .groupMain {
      padding-top: 0; }
    .festivalMain figure {
      width: 100%; }
    .festivalMain .festivalInfo {
      position: relative;
      margin-left: 0;
      width: auto; }
      .festivalMain .festivalInfo ul.festivalInfoList {
        margin: 0 20px; }
  .festivalArticle .backArea {
    padding-top: 20px; }
  .categorySlide .owl-stage-outer .owl-stage .item:before {
    margin: 0 5px; }
  .categorySlide .owl-stage-outer .owl-stage .item.select a {
    font-size: 20px; }
  .popupMain {
    width: 80%;
    left: 10%;
    margin-left: 0; }
    .popupMain a.tat-delete {
      right: 0;
      top: -40px; }
  ul.faqList li {
    padding-bottom: 0; }
  ul.festivalList li {
    padding-bottom: 0; }
    ul.festivalList li figcaption {
      min-height: 10px; }
  .bannerInside .titleBox {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 50px; }
    .bannerInside .titleBox h3 {
      width: 70%; }
    .bannerInside .titleBox p {
      width: 80%; }
  .bannerInside figure {
    overflow-x: hidden; }
    .bannerInside figure img {
      width: 180%;
      margin-left: -40%; }
  .categorySlide .owl-nav {
    position: absolute;
    top: -45px;
    right: 0; }
  .copyright {
    display: block;
    margin: 40px 20px 0 20px; }
  .sideMenuGroup {
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    right: -100%;
    /*animation -250px>0*/
    width: 100%;
    -webkit-box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0);
    box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0);
    /*animation rgba(0,0,0,0)>rgba(0,0,0,.3)*/
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
    .sideMenuGroup.menuOpen {
      -webkit-animation-duration: .7s;
      animation-duration: .7s;
      -webkit-animation-name: menuOpen;
      animation-name: menuOpen;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-direction: normal;
      animation-direction: normal; }
    .sideMenuGroup.menuClose {
      -webkit-animation-duration: .7s;
      animation-duration: .7s;
      -webkit-animation-name: menuClose;
      animation-name: menuClose;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-direction: normal;
      animation-direction: normal; }
  @-webkit-keyframes menuOpen {
    0% {
      right: -100%; }
    100% {
      right: 0; } }
  @-moz-keyframes menuOpen {
    0% {
      right: -100%; }
    100% {
      right: 0; } }
  @keyframes menuOpen {
    0% {
      right: -100%; }
    100% {
      right: 0; } }
  @-webkit-keyframes menuClose {
    0% {
      right: 0; }
    100% {
      right: -100%; } }
  @-moz-keyframes menuClose {
    0% {
      right: 0; }
    100% {
      right: -100%; } }
  @keyframes menuClose {
    0% {
      right: 0; }
    100% {
      right: -100%; } }
  .bannerArea h3 {
    bottom: 20px; }
  .bannerArea .owl-nav .owl-prev, .bannerArea .owl-nav .owl-next {
    margin-top: 33%; }
  .searchArea {
    position: absolute;
    right: 30px;
    top: 40px;
    width: 170px; }
    .searchArea .gsc-control-cse {
      width: 150px; }
  .header {
    position: fixed; }
  .logo {
    left: 10px;
    top: 10px;
    height: 70px; }
  ul.homeIconList li {
    width: 30%; }
  .popularRight {
    width: 100%; }
    .popularRight figcaption {
      font-size: 16px; }
      .popularRight figcaption p {
        padding: 15px 170px 15px 15px; }
      .popularRight figcaption mark {
        padding: 22px 12px 13px 0;
        -webkit-background-size: auto 30%;
        /* Safari 3.0 */
        -moz-background-size: auto 30%;
        /* Gecko 1.9.2 (Firefox 3.6) */
        -o-background-size: auto 30%;
        /* Opera 9.5 */
        background-size: auto 30%; }
  ul.popularList li {
    font-size: 14px;
    margin: 0 10px 50px 10px; }
    ul.popularList li p {
      letter-spacing: -.5px;
      max-width: 80px; }
    ul.popularList li figure {
      width: 80px;
      height: 80px;
      margin: 0 auto 10px auto;
      -webkit-border-radius: 40px;
      border-radius: 40px; }
  .weatherArea {
    padding: 40px 20px 0 20px; }
  .shareArea .titleArea p {
    font-size: 16px; }
  .shareArea .facebookArea .fbBox ul.fbList li {
    display: block;
    width: auto;
    margin: 0 0 30px 0; }
  .footerArea {
    width: 80%; }
    .footerArea h4 {
      margin: 0 0 15px; }
  .footerLink .footerList {
    display: block; }
    .footerLink .footerList li {
      margin-right: 0;
      width: 32%; }
      .footerLink .footerList li:nth-child(odd) {
        margin-right: 0; }
  .addthisArea {
    position: relative;
    top: 0; }
    .addthisArea p {
      position: relative;
      left: 0;
      margin: 10px 0; }
  .crumb {
    background: #eaeaea;
    margin: 0 0 20px 0;
    padding: 10px 20px; }
  .insideArticle .groupMain {
    margin: 0 20px; }
  ul.newsList li, ul.faqList li, ul.festivalList li, ul.attractionList li, ul.downloadList li {
    display: block;
    margin: 0 0 40px 0;
    width: auto; }
    ul.newsList li figcaption a, ul.faqList li figcaption a, ul.festivalList li figcaption a, ul.attractionList li figcaption a, ul.downloadList li figcaption a {
      display: block; }
    ul.newsList li:nth-child(3), ul.faqList li:nth-child(3), ul.festivalList li:nth-child(3), ul.attractionList li:nth-child(3), ul.downloadList li:nth-child(3) {
      margin: 0 0 40px 0; }
    ul.newsList li a.btnMore, ul.faqList li a.btnMore, ul.festivalList li a.btnMore, ul.attractionList li a.btnMore, ul.downloadList li a.btnMore {
      display: block;
      position: relative;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      margin: 30px 20px; }
  ul.downloadList li figcaption {
    min-height: 10px; }
  ul.attractionList li {
    min-height: 100px;
    padding-bottom: 0; }
    ul.attractionList li figcaption {
      font-size: 20px; }
  ul.productList li {
    display: block;
    width: auto;
    margin-right: 0; }
  .albumListArea {
    padding: 20px 0; }
  .albumList {
    width: auto;
    margin: 0 20px; }
    .albumList a:nth-child(1) {
      width: 100%; }
    .albumList a:nth-child(4), .albumList a:nth-child(5) {
      position: relative;
      left: 0; }
    .albumList a:nth-child(2), .albumList a:nth-child(3), .albumList a:nth-child(4), .albumList a:nth-child(5) {
      width: 48%;
      margin-left: 0;
      margin-top: 5px; }
    .albumList a:nth-child(even) {
      margin-right: 3.6%; }
  .menu ul li dl {
    margin-left: 60px; }
  .header.fixed .menu ul li a.mainLink, .header.fixed .menu ul li a.noSub {
    top: 0; }
  .header.fixed .menu ul li .subArea {
    top: 10px; }
  .header.fixed .menu ul li dl {
    left: 0; }
  .homeArticle h2.mascotTitle {
    margin-left: -20%; }
  .homeIconArea .owl-theme .owl-dots {
    top: -50px; }
  .groupMain iframe {
    min-height: 400px; }
  .bgContent img {
    max-width: 150%;
    width: 150%;
    height: auto;
    margin-left: -25%; }
  .bgContent .groupMain {
    position: relative;
    top: 0;
    left: 0;
    margin-left: 0;
    margin: 0 20px; }
    .bgContent .groupMain h1 {
      padding: 30px 0; }
    .bgContent .groupMain p {
      letter-spacing: 1px;
      line-height: 1.4em; }
  .historyContent {
    margin-bottom: 40px; }
  ul.yearLine {
    margin: 80px 0 20px 0; }
    ul.yearLine li {
      padding: 0 0 40px 20px; }
      ul.yearLine li .yearPoint {
        left: -20px; } }