/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

@media screen and (max-height: 720px){
  body{
    line-height: 1.4
  }
  .ser2_intro{
    font-size: 16px;
  }
  .ser_list li {
    padding: 5px 0;
  }
  input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input.input-text, select, textarea{
    line-height: 30px;
    font-size: 16px;
  }
  .con2_content h1{
    font-size: 16px;
  }
}

@media screen and (max-width: 1180px){
  .ser2_point h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .ser2_point > div{width: 38vw}
}


@media screen and (max-width: 1024px){
  /*animation*/
  .hsec_right > div{
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
  }
  .sec_ani,
  .hsec1_simg,
  .fadeUp{
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
  }
  /*main*/
  p{font-weight: normal;}
  #es_wrap{
    position: relative;
  }
  body{overflow:initial; width: auto; height: auto;}
  #cursor, .section_points,
  .section_points, #home_load{
    display: none;
  }
  /*header*/
  header{position: fixed;}
  header.stick .logo span{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  header.stick{background: #fff;}
  .menuopen, nav.open{
    display: block;
  }
  .logo{
    margin: 0;
    z-index: 1;
  }
  nav{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    opacity: 0;
    background: #fff;
    padding: 130px 0 40px 0;
    -webkit-transform: translateY(-70vh);
        -ms-transform: translateY(-70vh);
            transform: translateY(-70vh);
  }
  nav.open{
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  nav ul{
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  nav ul.show{
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  nav a{
    padding: 15px 0;
    font-size: 30px;
  }
  nav li:hover:after{
    left: 0;
    width: 0;
  }
  /*Header*/
  header{
    width: 100%;
  }
  header > div{
    background: none;
    padding: 10px 20px;
  }
  .logo span{
    left: 90px;
    top: 14px;
  }
  /*首頁*/
  .page_home section{
    position: relative;
    top: initial;
    left: initial;
  }
  /*首頁-區塊一*/
  .bigfont_wrap b:nth-child(n){
    position: relative;
    left: initial;
    top: initial;
    right: initial;
    bottom: initial;
    text-align: left;
    font-size: 11vw;
  }

  .bigfont_wrap{
    position: absolute;
    left: 30px;
  }
  .hs1_title .bigfont_wrap{
    top: 34vh;
  }
  .bigfont_wrap i{
    margin-bottom: 20px;    
    -webkit-transform: translateY(100px);    
        -ms-transform: translateY(100px);    
            transform: translateY(100px);
  }
  .hs1_title b:last-child{
    position: absolute;
    left: 24vw;
    bottom: 0;
  }
  .hs0_cta{
    right: initial;
    left: 70px;
    bottom: 190px;
    -webkit-transform-origin: 0;
        -ms-transform-origin: 0;
            transform-origin: 0;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  /*首頁區塊2*/
  .hsec_right,
  .hsec_right > div{
    width: 100%;
    height: 50vh;
    background-position: top;
    float: initial;
  }
  .hsec_left{
    width: 100%;
    height: auto;
  }
  .hsec1_simg{
    width: 40vw;
    height: 30vw;
  }
  .hsec1_content{
    bottom: inherit;
    left: inherit;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    position: relative;
    padding: 40px 30px;
    width: 100%;
  }
  .page_home .home_sec_1{height: auto;}
  .hs1_cta{
    top: initial;
    left: 80px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    bottom: 10vh;
  }
  .hs1_cta .bigarrow{
    top: 32px;
    left: 20px;
  }
  .home_sec_2 .bigfont_wrap i{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .hsec2_title b:nth-child(3) span:last-child,
  .hsec2_title b:nth-child(2) i{
    margin-left: 0;
  }
  .home_sec_2 > h2{
    top: 30px;
  }
  .hsec2_content{
    width: 70%;
    top: initial;
    left: 30px;
    bottom: 30px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  .home_sec_2 .hsec_left{
    height: 60vh;
  }
  .hs2_cta{
    top: initial;
    bottom: 20vh;
    left: 30px;
  }
  /*About us*/
  #scroll_horizontal section, .footer{
    margin: 0;
    display: block;
    height: auto;
    width: 100%;
    margin-top: -2px;
  }
  .footer{padding: 30px 0}
  #scroll_horizontal{
    position: relative;
    white-space: initial;
  }
  .absec1_img{
    position: relative;
    height: 80vh;
  }
  .absec1_img img{
    position: absolute;
    bottom: 0;
  }
  .ab1_s_title{
    position: absolute;
    bottom: 42vw;
    margin-left: -30vw;
  }
  .absec1_cta {
    right: initial;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    bottom: -50px;
  }
  .ab_sec_1{overflow: hidden;}
  .absec1_title{
    left: 30px;
    top: 18vh;
  }
  .absec1_title .bigfont_wrap{
    position: relative;
  }
  .absec1_title span{
    display: inline-block;vertical-align: top;
  }
  .ab_2_des {    
    position: relative;
    left: 0;
    top: 0;
    padding: 90px 40px;
    margin-top: -30vh;
  }
  .ab_2_des p{
    display: block;
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
  }
  .ab2_big_circle {
    width: 100%;
    height: 50vh;
    position: relative;
  }
  .ab2_s_cube {
    left: initial;
    bottom: initial;
    top: -3px;
    right: 0;
  }
  .ab3_scrollingText {
    -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
            transform: rotate(0);
    left: 0;
    bottom: initial;
    position: relative;
    width: 100vw;
  }
  .scrollT_wrap h2{
    font-size: 12vw;
  }
  .ab3_client_logo > div {
    position: relative;
    bottom: initial;
  }
  .ab3_client_logo {
    position: relative;
    height: auto;
    left: 0;
  }
  .ab3_client_logo ul {
    width: 100%;
    text-align: center;
    padding: 50px 0;
  }
  .ab3_client_logo li {
    float: initial;
    width: 30%;
    display: inline-block;
  }
  .f_middle {
    -webkit-transform: rotate(0) translate(0, 0);
        -ms-transform: rotate(0) translate(0, 0);
            transform: rotate(0) translate(0, 0);
    left: initial;
    top: initial;
    position: relative;
    width: 100%;
    text-align: center;
  }
  .f_bottom {
    position: relative;
  }
  .f_cta > a {
    width: 45%;
    margin: 0;
  }
  .ab4_gallery{
    height: auto;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    width: 100%;
    padding-bottom: 30px;
  }
  .ab4_gallery > div:nth-child(odd),
  .ab4_gallery > div:nth-child(even){
    height: auto;
  }
  .ab4_gallery > div:nth-child(odd) .ab4_gp_img,
  .ab4_gallery > div:nth-child(even) .ab4_gp_img{
    height: 30vh;
  }
  
  .ab_sec_1, .ab_sec_2{
    height: 500px
  }
  .ab4_title h2{
    margin: 0;
    font-size: 11vw;
    line-height: 1.4;
  }
  .ab4_title h2 span{color: #fff;}
  .ab4_title{
    height: auto;
    padding: 10px;
    margin-bottom: 20px;
  }
  .ab_sec_4 > div{padding: 30px;}
  .ab_sec_4 .ab2_s_cube {
    left: 0;
    top: -17px;
  }
  .ab4_gp_des {
    position: relative;
    padding: 20px 0
  }
  /*service*/
  .ser2_point{
    position: relative;
    bottom: initial;
  }
  .ser_visual {
    width: 100%;
    position: relative;
    background: #fff;
    height: 110vh;
  }
  .ser_main_img {
    height: 50%;
  }
  .ser_sec_1 .bigfont_wrap b:nth-child(n){
    color: #000;
  }
  .ser_m_title b:last-child span:last-child{
    margin-left: 0;
  }
  h1.ser_m_title.bigfont_wrap {
    top: 27vh;
  }
  .ser_m_cta {
    top: initial;
    bottom: 25vh;
    right: -140px;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  h2.ser2_intro {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .ser2_point > div {
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
  .ser3_title {
    width: 100%;
    height: 30vh;
    margin: 0;
  }
  .ser3_title > div {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
  }
  .ser_sec_3 > div {
    padding: 0;
  }
  .ser3_title h2 {
    -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
            transform: rotate(0);
    top: 0;
    font-size: 11vw;
    margin-left: 30px;
  }
  .ser3_content {
    width: 100%;
    padding: 40px 31px;
  }
  .ser4_content {
    position: relative;
    left: 0;
    width: 100%;
    padding: 40px 30px;
  }
  .ser_list_name{
    font-size: 14px;
  }
  .ser_list_image {
    right: 0;
  }
  .ser_list li.show .ser_list_name{padding-left: 20px;}
  .ser_list_name:before {
    top: 7px;
  }
  .ser_sec_4 > div {
    width: 100%;
    padding: 0;
  }
  .ser3_title h2{top: -2px}
  .ser4_content h3{margin-bottom: 20px}

  /*Trend*/
  .tresec1_cta {
    left: -40px;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    bottom: 150px;
  }
  .tresec1_cta > .bigarrow > p{
	color: #fff;
  }
  .tre1_img {
    width: 100%;
    position: relative;
  }
  .tre_sec_1 .ab3_scrollingText{
    left: 0;
    padding: 50px 0 90px 0;
  }
  .scrollT_wrap h2, .scrollT_wrap h1{
    font-size: 12vw;
  }
  .trend_post{
    width: 100%;
    height: auto;
    margin: 0;
    border-left: 0;
    border-bottom: 1px solid #efefef;
    padding: 40px 30px;
  }
  .tre_imgwrap {
    position: relative;
    left: initial;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
    margin: 20px 0;
  }
  .trend_post h2{font-size: 30px;}

  /* Trend 列表頁 (手機：解除 flex wrap，改純垂直列表) */
  .tre_list_sec{
    width: 100%;
  }
  .tre_list_sec > div{
    height: auto;
    display: block;
  }
  .trend_list{
    display: block;
    flex-wrap: initial;
    flex-direction: initial;
    align-content: initial;
    height: auto;
    -webkit-column-width: auto;
       -moz-column-width: auto;
            column-width: auto;
    -webkit-column-count: auto;
       -moz-column-count: auto;
            column-count: auto;
    -webkit-columns: initial;
       -moz-columns: initial;
            columns: initial;
  }
  .trend_list_item{
    display: block;
    width: 100%;
    height: auto;
    padding: 36px 30px;
    border-left: 0;
    border-bottom: 1px solid #e7e7e7;
    margin: 0;
  }
  .trend_list_mark{
    top: 40px;
    height: 28px;
  }
  .trend_list_item:hover .trend_list_mark{
    top: 34px;
    height: 44px;
  }
  .trend_list_title{
    font-size: 26px;
    line-height: 1.35;
  }

  /* Trend 詳細頁 (手機：主圖在上、內容在下；允許頁面自然捲動以完整顯示商品圖) */
  .page_trends_detail #scroll_horizontal{
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .tre_sec_detail{
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    overflow: visible;
  }
  .tre_detail_layout{
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 100vh;
  }
  .tre_detail_left{
    width: 100%;
    height: 32vh;
    flex-shrink: 0;
  }
  .tre_detail_scrolltext{
    height: 24vw;
  }
  .tre_detail_right{
    flex: 1;
    height: auto;
    min-height: 0;
    padding: 24px 25px;
    align-items: flex-start;
    overflow: visible;
  }
  .tre_detail_inner{
    max-width: 100%;
    max-height: none;
    display: block;
    gap: 0;
  }
  .tre_detail_text{
    max-height: none;
    overflow: visible;
  }
  .tre_detail_topbar{
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .tre_detail_back_link{
    font-size: 11px;
  }
  .tre_detail_back_text{
    letter-spacing: 0.15em;
  }
  .tre_detail_title{
    font-size: 24px;
    margin-bottom: 12px;
  }
  .tre_detail_content{
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
  }
  .tre_detail_imgwrap{
    display: block;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    margin-top: 16px;
  }
  .tre_detail_imgwrap img{
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: unset;
  }

  /*contact*/

  .con_main_img {
    width: 100%;
    height: 60vh;
  }
  .con2_form, .con_info li div:last-child,
  .con2_content {
    width: 100%;
  }
  .con2_info_block {
    position: relative;
  }
  .con_submit {
    position: relative;
    right: initial;
    bottom: initial;
  }
  .con2_form label:nth-child(odd){
    float: initial;
  }
  .con2_content h1{font-size: 14px;}
  .con2_info_block {
    padding: 40px;
  }
  .con2_info_block > div {
    margin: 0 0 40px 0;
    width: 100%;
  }
  /*normal page*/
  .page_normal > article{
    background: #fff;
    padding: 20vh 40px 40px 40px;
    position: relative;
  }
  .es_edit_content {
    float: initial;
    width: 100%;
  }

}

@media screen and (max-width: 440px){
  .logo img{width: 55px;}
  .logo span{left: 65px;} 
  .ab1_s_title{margin-left: -60vw;}
  .ab_sec_4 > div{padding: 40px 20px;}
  .f_cta > a{font-size: 20px;}
  .f_cta i {
    width: 10px;
    height: 10px;
  }
  span.wpcf7-not-valid-tip{
    max-width: 70px;
    font-size: 10px;
    text-align: right;
    line-height: 1;
  }
  div.wpcf7-response-output {
    bottom: -20px;
    font-size: 10px;
    width: 80%;
    line-height: 1;
  }
}