@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

/* common=========================== */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Uniqlo, "Noto Sans TC", serif;
  color: #333333;
  font-size: 15px;
  line-height: 2;
  background-color: #fff;
}
a{cursor: pointer; outline: 0; position: absolute; z-index: 1;}
.main_content{
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.sec{
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
.blue{
  opacity: 0.5; 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
}
#content{
  width: 100%;
}
._desktop{display: block;}
._mobile{display: none;}
.only_mobile{display: none;}
.only_desktop{display: block;}
.only_tablet{display: none !important;}
._tablat{display: block;}

h1{position: absolute; width: 0; top: 0; left: 0; height: 0; opacity: 0;}
h2{position: absolute; width: 0; top: 0; left: 0; height: 0; opacity: 0;}
h3{position: absolute; width: 0; top: 0; left: 0; height: 0; opacity: 0;}
p{position: absolute; width: 0; top: 0;  left: 0; height: 0; opacity: 0;}

/* main cont=========================== */

._header{ position: relative; }
.kv{
  position: relative;
  background: #e80019 url(../images/texture.png) repeat top center;
}
.kv .main{
  position: relative;
  display: block;
  margin: 0 auto;
  z-index: 1;
}
.kv_gap{
  height: 10px; 
  background-color: #b60005;
}
.deco{
  position: relative;
}
.deco img{
  position: absolute;
  margin-left: 50%;
}
.header_cloud1{left: 326px;top: 30px;}
.header_cloud2{left: -836px;top: 310px;}
.header_cloud3{left: -1000px;top: 98px;}
.header_cloud4{left: 650px;top: 200px;}

.hero{background-color: #f2eee5;}
.hero .main{
  position: relative;
  display: block;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
.hero_bottom{background-color: #fff;}
.hero_bottom_gap{
  height: 10px; 
  background: #f1f1f1 url(../images/bg_sec1.jpg) repeat center center;
}

.slick .sin{position: relative; outline: 0;}
.slick .sin a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.slick-prev {
  left: 45px;
  z-index: 1;
}
.slick-next {
  right: 45px;
  z-index: 1;
}
.slick-next, .slick-prev {transform: translate(0, -50%);}
.sec3_slick .slick-next, .sec3_slick .slick-prev {top: 39%;}
.sec4_slick .slick-next, .sec4_slick .slick-prev {top: 42%;}

.slick-prev:before{background: url(../images/arrow_to_left.svg) no-repeat 0 0;
  background-size: 100% 100%;content: '';
  display: block;
  width: 30px;
  height: 30px;
  opacity: 1;}
.slick-next:before{background: url(../images/arrow_to_right.svg) no-repeat 0 0;
    background-size: 100% 100%;content: '';
    display: block;
    width: 30px;
    height: 30px;
    opacity: 1;}

.sec1{background: #f1f1f1 url(../images/bg_sec1.jpg) repeat top center; position: relative;}
.sec2{background: #fcf4f2 url(../images/bg_sec2.jpg) repeat top center; position: relative;}
.sec3{background: #fdf6f3 url(../images/bg_sec3.jpg) repeat top center; position: relative;}
.sec4{background: #f6f3ed; position: relative;}
.sec5{background: #f6f3ed; position: relative;}
.sec6{background: #e80019 url(../images/bg_sec6.png) repeat top center; position: relative;}

.sec1_1, .sec1_2{position: relative; z-index: 1;}
.sec1_deco1{left: -600px;top: 234px;}
.sec1_deco2{left: 317px;top: 184px;}

.sec2_1, .sec2_2{position: relative; z-index: 1;}
.sec2_deco1{left: -588px;top: 74px;}
.sec2_deco2{left: 335px;top: 183px;}

.sec3_1, .sec3_2{position: relative; z-index: 1;}
.sec3_deco1{left: -599px;top: 125px;}
.sec3_deco2{left: 335px;top: 114px;}

.sec6_1{position: relative; z-index: 1;}
.sec6_2{position: relative; z-index: 1;}
.sec6_3{position: relative; z-index: 1;}
.sec6_4{position: relative; z-index: 1;}
.sec6_5{position: relative; z-index: 1;}

.sec6_deco1  {left: -716px;top: 201px;}
.sec6_deco3  {left: -650px;top: 1042px;}
.sec6_deco4  {left: 400px;top: 650px;}
.sec6_deco2_1{left: 385px;top: 1304px;width: 32px;}
.sec6_deco2_2{left: -539px;top: 900px;width: 39px;}
.sec6_deco2_3{left: 442px;top: 326px;}

.logo_link{width: 80%;height: 33%;top: 0;left: 10%; z-index: 1;}
.menu1{width: 22%;height: 100%;top: 0;left: 0;}
.menu2{width: 19%;height: 100%;top: 0;left: 22%;}
.menu3{width: 20%;height: 100%;top: 0;left: 41%;}
.menu4{width: 19%;height: 100%;top: 0;left: 61%;}
.menu5{width: 20%; height: 100%; top: 0; left: 80%;}
.sec1_link1{width: 50%;height: 18.5%;top: 6%;left: 0;}
.sec1_link2{width: 50%;height: 18.5%;top: 6%;left: 50%;}
.sec1_link3{width: 100%;height: 21.4%;top: 24.5%;left: 0;}
.sec1_link4{width: 33.333%;height: 16%;top: 50.8%;left: 0;}
.sec1_link5{width: 33.333%;height: 16%;top: 50.8%;left: 33.333%;}
.sec1_link6{width: 33.333%;height: 16%;top: 50.8%;left: 66.666%;}
.sec1_link7{width: 33.333%;height: 14%;top: 70.8%;left: 0;}
.sec1_link8{width: 33.333%;height: 14%;top: 70.8%;left: 33.333%;}
.sec1_link9{width: 33.333%;height: 14%;top: 70.8%;left: 66.666%;}
.sec1_link10{width: 100%;height: 6.2%;top: 85%;left: 0;}
.sec2_link1{width: 25%;height: 35%;top: 15.5%;left: 0;}
.sec2_link2{width: 25%;height: 35%;top: 15.5%;left: 25%;}
.sec2_link3{width: 25%;height: 35%;top: 15.5%;left: 50%;}
.sec2_link4{width: 25%;height: 35%;top: 15.5%;left: 75%;}
.sec2_link5{width: 100%;height: 17%;top: 50.5%;left: 0;}
.sec2_link6{width: 100%;height: 13%;top: 69%;left: 0;}
.sec3_link1{width: 50%;height: 29%;top: 11%;left: 0;}
.sec3_link2{width: 50%;height: 29%;top: 11%;left: 50%;}
.sec3_link3{width: 100%;height: 17%;top: 77%;left: 0;}
.sec4_link1{width: 50%;height: 29%;top: 49%;left: 0;}
.sec4_link2{width: 50%;height: 29%;top: 49%;left: 50%;}
.sec4_link3{width: 100%;height: 13.2%;top: 81.5%;left: 0;}
.sec5_link1{width: 100%;height: 23%;top: 29%;left: 0;}
.sec5_link2{width: 100%;height: 46%;top: 53%;left: 0;}
.sec6_link1{width: 100%;height: 15.5%;top: 6%;left: 0;}
.sec6_link2{width: 100%;height: 13%;top: 79%;left: 0;}


/* flaoting_banner */
.flaoting_banner{
  display: flex;
  flex-flow: column nowrap;
  width: 77px;
  position: fixed;
  right: 0;
  bottom: 100px;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 5px 0 0 5px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
.flaoting_banner>div{
  width: 100%;
  background: #b58c22;
}
.flaoting_banner>div:first-child>img{
  width: 100%;
}
.flaoting_banner>div:last-child{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-color: #e80019;
  padding: 15px 0;
}
.flaoting_banner>div:last-child>div:first-child{
  font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  margin-bottom: 2px;
}
.flaoting_banner>div:last-child>div:last-child{
  width: 20px;
}
.flaoting_banner>div:last-child>div:last-child>img{
  width: 100%;
  height: auto;
}

/* gotop */
.gotop{
  width: 80px;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10;
  cursor: pointer;
}


/*UNIQLO MOBILE (>=959.5px) ============================================*/
/*UNIQLO MOBILE (>=959.5px) ============================================*/
/*UNIQLO MOBILE (>=959.5px) ============================================*/
/*UNIQLO MOBILE (>=959.5px) ============================================*/
/*UNIQLO MOBILE (>=959.5px) ============================================*/
/*UNIQLO MOBILE (>=959.5px) ============================================*/
@media (max-width: 959.5px) {

._desktop{display: none;}
._mobile{display: block;}
.only_mobile{display: none;}
.only_desktop{display: none !important;}
.only_tablet{display: block !important;}
._tablat{display: block;}

.sec{
  width: 100%;
  max-width: 640px;
}
.sec>img{
  width: 100%;
}

.slick img{width: 100%;}
.slick-prev {
  left: 10px;
  z-index: 1;
}
.slick-next {
  right: 21px;
  z-index: 1;
}
.slick-next, .slick-prev {transform: translate(0, -50%);}
.sec3_slick .slick-next, .sec3_slick .slick-prev {top: 39%;}
.sec4_slick .slick-next, .sec4_slick .slick-prev {top: 42%;}

.header_cloud1{left: 240px;top: 2px;}
.header_cloud2{left: -683px;top: 289px;}
.header_cloud3{left: -1000px;top: 98px;}
.header_cloud4{left: 650px;top: 200px;}

.mobile_03{position: relative; z-index: 1;}
.sec1_deco1{left: -453px;top: 244px;}
.sec1_deco2{left: 135px;top: 110px;}

.mobile_09{position: relative; z-index: 1;}
.sec2_deco1{left: -425px;top: 35px;}
.sec2_deco2{left: 187px;top: 87px;}

.mobile_11{position: relative; z-index: 1;}
.sec3_deco1{left: -423px;top: 35px;}
.sec3_deco2{left: 154px;top: 260px;}

/* flaoting_banner */
.flaoting_banner{
  display: flex;
  flex-flow: row nowrap;
  width: calc(100% - 70px);
  position: fixed;
  right: 60px;
  bottom: 0;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.flaoting_banner>div{
  width: 69px;
}
.flaoting_banner>div:first-child>img{
  width: 100%;
}
.flaoting_banner>div:last-child{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background-color: #e80019;
  padding: 4px 5px 0px;
}
.flaoting_banner>div:last-child>div:first-child{
  font-size: 23px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  color: #fff;
  margin-bottom: 0;
  letter-spacing: 0;
  line-height: 1;
}
.flaoting_banner>div:last-child>div:last-child{
  width: 26px;
  height: 24px;
  display: flex;
  flex-flow: row nowrap;
  margin-left: 3px;
}

.flaoting_banner>div:last-child>div:last-child>img{
  width: 100%;
  height: auto;
}

/* gotop */
.gotop{
  width: 60px;
}
.gotop img{
  width: 100%;
}

.logo_link{width: 80%;height: 33%;top: 0;left: 10%; z-index: 1;}
.menu1{width: 50%;height: 33.333%;top: 0;left: 0;}
.menu2{width: 50%;height: 33.333%;top: 0;left: 50%;}
.menu3{width: 50%;height: 33.333%;top: 33.333%;left: 0%;}
.menu4{width: 50%;height: 33.333%;top: 33.333%;left: 50%;}
.menu5{width: 100%; height: 33.333%; top: 66.666%; left: 0%;}

.sec1_link1{width: 50%;height: 18.5%;top: 5%;left: 0;}
.sec1_link2{width: 50%;height: 18.5%;top: 5%;left: 50%;}
.sec1_link3{width: 100%;height: 19%;top: 23.5%;left: 0;}
.sec1_link4{width: 50%;height: 10%;top: 46.8%;left: 0;}
.sec1_link5{width: 50%;height: 10%;top: 46.8%;left: 50%;}
.sec1_link6{width: 100%;height: 7.5%;top: 57%;left: 0;}
.sec1_link7{width: 50%;height: 8%;top: 68.5%;left: 0;}
.sec1_link8{width: 50%;height: 8%;top: 68.5%;left: 50%;}
.sec1_link9{width: 100%;height: 7%;top: 76.8%;left: 0;}
.sec1_link10{width: 100%;height: 8.2%;top: 84%;left: 0;}
.sec2_link1{width: 50%;height: 21%;top: 9.5%;left: 0;}
.sec2_link2{width: 50%;height: 21%;top: 9.5%;left: 50%;}
.sec2_link3{width: 50%;height: 22%;top: 30.5%;left: 0%;}
.sec2_link4{width: 50%;height: 22%;top: 30.5%;left: 50%;}
.sec2_link5{width: 100%;height: 13%;top: 52.5%;left: 0;}
.sec2_link6{width: 100%;height: 16.5%;top: 67%;left: 0;}
.sec3_link1{width: 50%;height: 33%;top: 12%;left: 0;}
.sec3_link2{width: 50%;height: 33%;top: 12%;left: 50%;}
.sec3_link3{width: 100%;height: 23%;top: 74%;left: 0;}
.sec4_link1{width: 50%;height: 28%;top: 42%;left: 0;}
.sec4_link2{width: 50%;height: 28%;top: 42%;left: 50%;}
.sec4_link3{width: 100%;height: 24.2%;top: 72.5%;left: 0;}
.sec5_link1{width: 100%;height: 21%;top: 24%;left: 0;}
.sec5_link2{width: 100%;height: 53%;top: 46%;left: 0;}
.sec6_link1{width: 100%;height: 15.5%;top: 4%;left: 0;}
.sec6_link2{width: 100%;height: 6%;top: 88%;left: 0;}

}

/*UNIQLO MOBILE (>=639.5px) ============================================*/
/*UNIQLO MOBILE (>=639.5px) ============================================*/
/*UNIQLO MOBILE (>=639.5px) ============================================*/
/*UNIQLO MOBILE (>=639.5px) ============================================*/
/*UNIQLO MOBILE (>=639.5px) ============================================*/
/*UNIQLO MOBILE (>=639.5px) ============================================*/
@media (max-width: 639.5px) {
  .only_mobile{display: block;}
  ._tablat{display: none;}

  .sec1{background-size:50%;}
  .sec2{background-size:50%;}
  .sec3{background-size:50%;}
  .sec6{background-size:50%;}

  .sec1_deco1{left: -69vw;top: 37vw;width: 38vw;}
  .sec1_deco2{left: 24vw;top: 18vw;width: 36vw;}
  
  .sec2_deco1{left: -66vw;top: 7vw;width: 39vw;}
  .sec2_deco2{left: 29vw;top: 14vw;width: 42vw;}
  
  .sec3_deco1{left: -63vw;top: 4vw;width: 39vw;}
  .sec3_deco2{left: 22vw;top: 40vw;width: 43vw;}

  .logo_link{width: 100%;height: 10%;top: 0;left: 0; z-index: 1;}

  .flaoting_banner>div:last-child>div:first-child{
    font-size: 16px;
  }
  .flaoting_banner>div:last-child>div:last-child{
    width: 19px;
    height: 20px;
  }
}