@charset "UTF-8";

/*desktop*/
.bg{
    width: 100%;
    padding-bottom: 20px;
    background: url(https://www.utsc.com.tw/material-alias/group/group-bg.jpg) repeat center top;
}

.bg .contant{
    width: 1200px;
    margin: 0 auto;
    font-size: 18px;
}


@media(max-width:1250px){
.bg .contant{
    width: 992px;
}
}

@media(max-width:1024px){
.bg .contant{
    width:768px;
}
}

@media(max-width:798px){
.bg{
    padding-bottom: 0;
}
    
.bg .contant{
    width:100%;
}
}


.about .breadcrumb{
    display: block;
    width: auto;
    padding-left: 5%;
}



.about{
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.7em;
    background: #fff;
    letter-spacing: 1px;
    -moz-box-shadow: 4px 4px 7px 4px rgba(20%,20%,20%,0.3);
    -webkit-box-shadow: 4px 4px 7px 4px rgba(20%,20%,20%,0.3);
    box-shadow: 2px 2px 6px 2px rgba(20%,20%,20%,0.3);
}

.about img{
    width: 100%;
}

.about p{
    margin-top: 8px;
    margin-bottom: 0;
}

.about .kv{
    padding-bottom: 1px;
    background: #f7f7f7;
}

.about .kv .tablet,
.about .kv .mobile{
    display: none;
}

.about h1{
    text-align: center;
    color: #B22222;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.3em;
    padding: 0 10px;
    margin-top: -5px;
}

.about .kv .text{
    width: 62%;
    margin: 0 auto ;
    text-align: justify;
}

.about .kv .text div{
    width: 510px;
    text-align: left;
    font-size: 24px;
    line-height: 1.5em;
    padding-top: 20px;
    font-weight: 300;
    margin: auto;
}

.about .kv .text img{
    display: inline-block;
    width: 49.8%;
    margin-bottom: 10px;
}

.about .kv .text img:last-child{
    margin-left: -3px;
}


@media(max-width:1250px){
.about .breadcrumb{
    margin-left: 9%;
    padding-left: 0;
}
    
.about h1 {
    font-size: 36px;
}
    
.about .kv .text{
    width: 82%;

}
}

@media screen and (max-width: 1024px){ 
.about .breadcrumb{
    margin-left: 4%;
}
    
.about h1{
    font-size: 36px;
}
  
.about .kv .text{
    width: 92%;
}
}


@media screen and (max-width: 798px){ 
.about{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
    
.about .kv .desktop{
    display: none;
}
    
.about .kv .tablet{
    display: block;
}
    
.about h1{
    font-size: 32px;
    margin-top: 10px;
}
}

@media(max-width:630px){
.about h1 span {
    display: block;
}
    
.about .info-2 h1 span {
    display: inline-block;
}
}
    
@media screen and (max-width: 576px){
.about .kv .tablet{
    display: none;
}
    
.about .kv .mobile{
    display: block;
}
    
.about h1 {
    font-size: 28px;
}
    
.about .kv .text div {
    width: auto;
    font-size: 22px;
}
    
.about .kv .text div span {
    display: block;
}
    
.about .kv .text img {
    width: 49.6%;
}
    
.about .kv .text img:last-child {
    margin-left: -4px;
}
}









/*首創旅遊*/
.about .info{
    width: 90%;
    margin: 40px auto ;
    text-align: justify;
}

.about .info .text {
    width: 57%;
    float: left;
}

.about .info h2{
    font-size: 24px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 5px;
}

.about .info h2 span{
    font-size: 30px;
    font-weight: 700;
    color: #B22222;
    margin-right: 10px;
}

.about .info .text .explanation{
    padding: 5px 2%;
    background: #edfaf4;
}

.about .info .text .explanation strong{
    color: #338C12;
}

.about .info .img{
    width: 40.5%;
    margin-top: 5px;
    padding-top: 40%;
    float: right;
    background: url(https://www.utsc.com.tw/material-alias/about/tour/img-1.jpg) no-repeat center top;
    background-size: cover;
}

.about .info .img img{
    display: none;
}

.about .info.ro {
    margin-top: 60px;
}

.about .info.ro h2 span{
    color: #800080;
}

.about .info.ro .text .explanation{
    background: #faeefa;
}

.about .info.ro .text .explanation strong{
    color: #800080;
}

.about .info.ro .img{
    width: 40.5%;
    padding-top: 28.2%;
    background: url(https://www.utsc.com.tw/material-alias/about/tour/img-2.jpg) no-repeat center bottom;
    background-size: cover;
}

.about .info.ro .img-2{
    padding-top: 20.6%;
    background: url(https://www.utsc.com.tw/material-alias/about/tour/img-5.jpg) no-repeat center bottom;
    background-size: cover;
}

.about .info-3 .text{
    display: block;
    width: 69%;
    margin: 0 15.5% 10px;
    text-align: justify;
}


@media(max-width:1250px){
.about .info{
    width: 82%;
    margin: 30px auto 20px ;
} 
    
.about .info h2 {
    font-size: 22px;
}

.about .info h2 span {
    font-size: 30px;
    margin-right: 5px;
}
    
.about .info .text {
    width: 61%;
}
    
.about .info-2 .text{
    width: 100%;
}
    
.about .info .img{
    width: 37%;
    padding-top: 29.5%;
}
    
.about .info .text .explanation {
    width: 164%;
}
    
.about .info.ro {
    margin-top: 40px;
}
    
.about .info.ro .img {
    width: 37%;
    padding-top: 23.5%;
}
    
.about .info.ro .img-2{
    margin-top: 3px;
    padding-top: 21.3%;
    background-position: center;
} 

    
.about .info-3 .text{
     width: 100%;
    margin: 0 0 10px;
}
}

@media screen and (max-width: 1024px){ 
.about .info{
    width: 92%;
}
    
.about .info h2{
    font-size: 22px;
}

.about .info h2 span{
    font-size: 28px;
}
    
.about .info .text {
    width: 62%;
}
    
.about .info .img {
    width: 36%;
    padding-top: 37%;
}
    
.about .info .text .explanation {
    width: 161.4%;
}
    
.about .info.ro {
    margin-top: 40px;
}
    
.about .info.ro .img {
    width: 36%;
    padding-top: 34%;
}
    
.about .info.ro .img-2 {
    padding-top: 21.5%;
}
    
    
.about .info-3 .text{
     width: 100%;
    margin: 0 0 10px;
}
}

@media screen and (max-width: 798px){ 
.about .info h2 {
    font-size: 20px;
}
    
.about .info h2 span {
    font-size: 28px;
    margin-right: 3px;
}
    
.about .info .text,
.about .info .text .explanation {
    width: 100%;
}
    
.about .info.ro {
    margin-top: 25px;
}
    
.about .info .img,
.about .info.ro .img {
    width: 100%;
    padding: 0;
    background: none;
}
    
.about .info .img img{
    display: block;
}
    
.about .info.ro .img-2 {
    display: none;
}

}
    
@media screen and (max-width: 576px){ 
.about .info {
    margin: 30px auto 0;
}
    
.about .info h2 {
    font-size: 18px;
}
    
.about .info h2 span {
    font-size: 24px;
}
}

@media screen and (max-width: 400px){ 
.about .info h2 {
    font-size: 16.5px;
}
    
.about .info h2 span {
    font-size: 22px;
}
}





.about h3{
    color: #B22222;
    font-size: 34px;
    line-height: 1.4em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

.about .info h3 span{
    display: inline-block;
    white-space: nowrap;
}

.about .info.feature .text ul{
    padding: 0;
    margin: 5px 0;
    list-style: none;
}

.about .info.feature .text ul li{
    color: #8a6a49;
    font-weight: 500;
    padding-left: 20px;
    margin-bottom: 2px;
    background: url(https://www.utsc.com.tw/material-alias/about/list.png) no-repeat left 10px;
    background-size: 10px;
}

.about .info.feature .text ul li:last-child{
    margin-bottom: 0;
}

.about .info.feature .photo{
    width: 40.5%;
    float: right;
}

.about .info.feature .photo img:last-child{
    margin-top: 5px;
}

@media(max-width:1250px){
.about h3{
    font-size: 30px;
}
    
.about .info.feature .text{
    width: 100%;
    float: none;
}

.about .info.feature .text ul li {
    display: block;
    width: 100%;
    padding-left: 22px;
    background-position: 6px 11px;
}
     
.about .info.feature .photo{
    width: 100%;
    margin-top: 5px;
    float: none;
}
    
.about .info.feature .photo img{
    width: 49.75%;
}
    
.about .info.feature .photo img:nth-child(2){
    margin-top: 0;
    float: right;
}
    
.about .info.feature1 .photo img{
    display: inline-block;
    width: 100%;
}
}


@media screen and (max-width: 1024px){ 
.about .info-2 .text {
    width: 100%;
}
}


@media screen and (max-width: 798px){ 
.about h3 {
    font-size: 28px;
}
    
.about .info.feature .photo img {
    width: 49.7%;
}
    
.about .info.feature1 .photo img{
    display: block;
    width: 100%;
}
}


@media screen and (max-width: 576px){ 
.about h3 {
    font-size: 24px;
}
    
.about .info.feature .text h2 strong {
    display: block;
    margin-bottom: 3px;
}
    
.about .info.feature .text ul li {
    padding-left: 14px;
    background-position: 0 11px;
    background-size: 8px;
    letter-spacing: 0;
}
    
.about .info.feature .photo img {
    width: 100%;
}

.about .info.feature .photo img:nth-child(2) {
    display: none;
}
}

@media screen and (max-width: 400px){ 
.about h3 {
    font-size: 23px;
}
}



/*大事記*/
.about .info.timeline{
    margin-top: 20px;
}

.about .info.timeline h3{
    width: 100%;
    font-size: 34px;
    text-align: center;
}

.about .info.timeline .img-2{
    display: inline-block;
    width: 59.5%;
    margin-top: 15px;
    margin-right: 1.5%;
    vertical-align: top;
}

.about .info.timeline .img-2 img{
    margin-bottom: 5px;
}

.about .info.timeline .img-3{
    display: none;
}

.about .info.timeline ul{
    display: inline-block;
    width: 38%;
    padding: 0;
    margin-top: 10px;
    text-align: left;
    list-style: none;
    background: url(https://www.utsc.com.tw/material-alias/about/point.jpg) repeat-y left top;
    background-size: 5px;
}

.about .info.timeline ul li{
    width: 93%;
    font-size: 20px;
    letter-spacing: 2px;
    margin-top: 43px;
    margin-left: 6%;
}

.about .info.timeline ul li:first-child,
.about .info.timeline.study ul li:first-child{
    margin-top: 0;
}

.about .info.timeline ul li p{
    margin: 0;
    padding-left: 17px;
    background: url(https://www.utsc.com.tw/material-alias/about/tour-arrow.png) no-repeat left 5px;
    background-size: 10px;
}


.about .info.timeline.study ul{
    width: 55%;
}

.about .info.timeline.study ul li{
    width: 95%;
    margin-top: 20.5px;
}

.about .info.timeline.study .img-2{
    width: 42.5%;
    margin-right: 2%;
}

.about .info.timeline.study .img-2 .pad{
    display: none;
}



@media(max-width:1250px){
.about .info.timeline {
    margin-top: 30px;
}
    
.about .info.timeline ul{
    width: 50%;
}
    
.about .info.timeline ul li{
    width: 95%;
    margin-top: 14px;
    margin-left: 4%;
}
    
.about .info.timeline .img-2{
    width: 48%;
    margin-right: 0.5%;
} 
    
.about .info.timeline.study ul{
    width: 58%;
    font-size: 18px;
}
    
.about .info.timeline.study ul li{
    width: 96%;
    letter-spacing: 1px;
    margin-top: 5.5px;
}
    
.about .info.timeline.study .img-2 {
    width: 40%;
    margin-right: 1%;
    
}
}

    
@media screen and (max-width: 1024px){ 
.about .info.timeline ul {
    width: 52%;
}
    
.about .info.timeline ul li {
    margin-top: 6px;
}
    
.about .info.timeline .img-2 {
    width: 46%;
    margin-right: 0.5%;
}
    
.about .info.timeline.study ul{
    width: 67%;
}
    
.about .info.timeline.study ul li{
    margin-top: 5.1px;
    margin-left: 15px;
}
    
.about .info.timeline.study .img-2 {
    width: 32%;
    margin-right: 0%;
}
   
.about .info.timeline.study .img-2 .desktop{
    display: none;
}
    
.about .info.timeline.study .img-2 .pad{
    display: block;
}

}

@media screen and (max-width: 798px){ 
.about .info.timeline h3 {
    font-size: 26px;
    margin-bottom: 0;
}
    
.about .info.timeline ul,
.about .info.timeline.study ul {
    width: 100%;
    margin-bottom: 10px;
    background: none;
}
    
.about .info.timeline ul li{
    width: 100%;
    font-size: 20px;
    letter-spacing: 1px;
    margin-left: 0;
}
    

.about .info.timeline.study{
    margin-top: 20px;
}
    
.about .info.timeline.study ul li {
    width: 100%;
    margin-top: 6px;
    margin-left: 0;
    letter-spacing: 0px;
}
    
.about .info.timeline ul li p {
    padding-left: 13px;
    background: url(https://www.utsc.com.tw/material-alias/about/tour-arrow-r.png) no-repeat left 8px;
    background-size: 7px;
}
    
.about .info.timeline .img-2 {
    display: none;
}
    
.about .info.timeline .img-3{
    display: block;
    padding-bottom: 30px;
}
}
    
@media screen and (max-width: 576px){ 
.about .info.timeline ul li{
    font-size: 18px;
}
}







/*簡介與獎項*/
.about .info-2 {
    margin: 0 auto;
}

.about .info-2 h1{
    text-align: left;
    padding: 0;
    margin: 10px 0;
}

.about .info-2 .text{
    display: inline-block;
    width: 63.5%;
    margin: 0 auto;
}

.about .info-2 .text p{
    margin: 18px 0;
}

.about .info-2 .pic{
    display: inline-block;
    width: 33%;
    margin-left: 3.5%;
}

.about .info-2 .pic img{
    margin-bottom: 5px;
}

.about .info.honor .text{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: top;
}

.about .info.honor ul li{
    margin: 3px 0;
    padding-left: 17px;
    background: url(https://www.utsc.com.tw/material-alias/about/point.jpg) no-repeat left 10px;
}

.about .info.honor .photo{
    display: inline-block;
    width: 48%;
    margin-left: 2%;
}


@media(max-width:1250px){
.about .info-2 .text{
    display: block;
    width: 100%;
}
    
.about .info-2 .pic{
    display: block;
    width: 100%;
    margin-left: 0;
}
    
.about .info-2 .pic img{
   display: inline-block;
    width: 33.1%;
    margin: 5px -3px 0 0;
}
    
.about .info.honor .text{
    display: block;
    width: 100%;
}
    
.about .info.honor .photo{
    display: block;
    width: 100%;
    margin-left: 0;
    margin-bottom: 30px;
}
}
    
@media screen and (max-width: 1024px){ 
.about .info-2 .text p {
    margin: 7px 0 3px;
}
    
.about .info-2 .pic img:first-child{
   display: none;
}
    
.about .info-2 .pic img {
    width: 50%;
    margin: 5px -3px 0 0;
}
}

@media screen and (max-width: 798px){ 
.about .info-2 .pic img {
    width: 49.9%;
}
}
    
@media screen and (max-width: 576px){ 
.about .info.honor .text h3 span{
    display: block;
}
    
.about .info-2 .pic img {
    width: 100%;
    margin: 2px 0;
}
    
.about .info.honor .photo{
    margin-bottom: 20px;
}
}





.about .info.product .text{
    width: 100%;
    text-align: center;
}

.about .info.product ul{
    list-style: none;
    padding: 0;
}

.about .info.product ul li{
    display: inline-block;
    width: 33%;
    vertical-align: top;
}

.about .info.product ul li img{
    margin-bottom: 5px;
}

.about .info.product ul li span{
    display: block;
    font-size: 24px;
    font-weight: 500;
}

@media(max-width:1250px){
.about .info.product ul li{
    width: 32.5%;
}
    
.about .info.product ul li span{
    font-size: 22px;
}
}

@media screen and (max-width: 1024px){
.about .info.product ul li{
    letter-spacing: 0;
}
    
.about .info.product ul li span{
    font-size: 20px;
    letter-spacing: 1px;
}
}

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

.about .info.product ul li{
    display: block;
    width: 100%;
    letter-spacing: 1px;
}
    
.about .info.product ul li img{
    width: 50%;
    float: left;
}
    
.about .info.product ul li span{
   padding-top: 10%;
} 
}
    
@media screen and (max-width: 576px){
.about .info.product h3 span{
    display: block;
} 
    
.about .info.product ul li {
    margin-bottom: 20px;
}
    
.about .info.product ul li img{
    display: block;
    width: 100%;
}
    
.about .info.product ul li span{
   padding-top: 2%;
} 
}




/*相關閱讀*/
.about .link-box{
    width: 100%;
    list-style: none;
    margin: 0;
    margin-bottom: 30px;
    padding: 30px 5% 0;
    border-top: 1px solid #e6e6e6;
}

.about .link-box li{
    display: inline-block;
    width: 31.3%;
    margin-right: 2.5%;
    vertical-align: top;
}

.about .link-box li:last-child{
    margin-right: 0;
}

.about .link-box h3{
    color: #000;
    font-size: 22px;
}

.about .link-box li h4{
    font-size: 18px;
    color: #000;
    font-weight: 400;
    margin: 5px 0;
}

.about .link-box li a,
.about .link-box li a:hover{
    text-decoration: none;
}


@media(max-width:1250px){
.about .link-box{
    padding: 30px 9% 0;
}
    
.about .link-box li{
    margin-right: 2.2%;
}
}

@media screen and (max-width: 1024px){
.about .link-box {
    padding: 30px 4% 0;
}
}

@media(max-width:798px){
.about .link-box li{
    margin-right: 2%;
}
}

@media(max-width:576px){
.about .link-box li {
    margin-right: 1%;
}
}
/* Scoped content redesign */


#study-redesign{--ink:#233f37;--muted:#606e63;--paper:#f7f5ee;--gold:#95713e;--line:#d8ddd2}
#study-redesign,#study-redesign * {
  box-sizing:border-box}
#study-redesign {
  color:var(--ink);
  font:18px/1.95 "Noto Sans TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased}
#study-redesign {
  overflow:clip}
#study-redesign a {
  color:inherit;
  text-decoration:none}
#study-redesign a:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px}
#study-redesign img {
  display:block;
  max-width:100%;
  height:auto}
#study-redesign h1,#study-redesign h2,#study-redesign h3,#study-redesign h4 {
  margin:0;
  line-height:1.55;
  font-weight:600;
  overflow-wrap:anywhere}
#study-redesign p {
  margin:0 0 22px}
#study-redesign .kv>img {
  width:100%}
#study-redesign .kv>.tablet,#study-redesign .kv>.mobile {
  display:none}

#study-redesign .breadcrumb {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  width:min(1160px,calc(100% - 96px));
  padding:23px 0;
  margin:0 auto;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--muted)}
#study-redesign .breadcrumb li+li:before {
  margin-right:10px;
  color:#a6ad9e}
#study-redesign a:hover {
  color:var(--gold)}
#study-redesign .study-opening-editorial,#study-redesign .info {
  width:min(1160px,calc(100% - 96px));
  margin:0 auto}
#study-redesign .study-opening-editorial {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);
  gap:64px;
  align-items:center;
  padding:5px 0 85px}
#study-redesign .study-opening-copy {
  min-width:0}
#study-redesign h1 {
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:clamp(28px,2.75vw,34px);
  letter-spacing:.035em;
  margin-bottom:24px}
#study-redesign h1 span {
  display:inline;
  white-space:normal}
#study-redesign .study-lead {
  font-size:24px;
  font-weight:600;
  color:#b22222;
  line-height:1.7;
  padding-bottom:24px;
  border-bottom:none;
  margin-bottom:28px}
#study-redesign .study-opening-copy>p:not(.study-lead),#study-redesign .text p {
  color:#212529;
  text-align:justify}
#study-redesign .study-opening-images {
  display:grid;
  gap:32px;
  padding-top:8px}
#study-redesign .study-figure {
  display:block;
  min-width:0;
  width:100%;
  margin:0}
#study-redesign .study-figure img {
  width:100%;
  height:auto}
#study-redesign .study-opening-images .study-figure {
  padding:12px 12px 0;
  background:#fff;
  border:1px solid #e1e2d8;
  box-shadow:0 12px 26px #193f3709}
#study-redesign .study-opening-images .study-figure:first-child {
  transform:none}
#study-redesign .study-opening-images .study-figure:last-child {
  transform:none}
#study-redesign figcaption {
  font-size:16px;
  line-height:1.7;
  color:#212529;
  padding:12px 0 14px;
  letter-spacing:.015em}

#study-redesign .info.feature,#study-redesign .study-legacy {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:46px 64px;
  padding-block:80px;
  border-top:1px solid var(--line);
  align-items:start}
#study-redesign .text {
  min-width:0}
#study-redesign h2 {
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:clamp(26px,2.35vw,34px);
  letter-spacing:.025em;
  margin:0 0 27px}
#study-redesign h2 span {
  display:block}
#study-redesign .text h2:before {
  content:"";
  display:block;
  width:42px;
  height:3px;
  background:var(--gold);
  margin-bottom:25px}
#study-redesign .photo {
  display:grid;
  gap:26px;
  min-width:0}
#study-redesign .study-placeholder {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  text-align:center;
  min-height:250px;
  padding:30px 22px;
  background:linear-gradient(135deg,#eeeee3,#e4e9dd);
  border:1px solid #cfd7c6;
  position:relative}
#study-redesign .study-placeholder:before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed #bbc6b1;
  pointer-events:none}
#study-redesign .study-placeholder__year {
  font:34px/1.3 Georgia,serif;
  color:#6c7f60;
  letter-spacing:.08em;
  overflow-wrap:anywhere;
  max-width:100%}
#study-redesign .study-placeholder__label {
  font-size:15px;
  color:#455541}
#study-redesign .study-placeholder__detail {
  font-size:12px;
  color:#63705d}
#study-redesign .feature-campus {
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important}
#study-redesign .feature-campus .text {
  grid-column:2;
  grid-row:1}
#study-redesign .feature-campus .photo {
  grid-column:1;
  grid-row:1}
#study-redesign .study-campus-gallery {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px}
#study-redesign .study-campus-gallery img {
  width:100%;
  height:auto}
#study-redesign .study-legacy {
  background:transparent;
  box-shadow:none}
#study-redesign .study-archive-gallery {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px}
#study-redesign .study-archive-gallery .study-placeholder {
  min-height:250px;
  background:#f2f3ea}
#study-redesign .study-archive-gallery .study-placeholder__year {
  font-size:25px}
#study-redesign .study-cta {
  grid-column:1/-1;
  margin:0;
  padding:28px 36px;
  background:var(--ink);
  color:white;
  font-size:22px;
  text-align:center;
  line-height:1.7}
#study-redesign .study-cta a {
  display:block;
  text-decoration:underline;
  text-decoration-color:#8ea68e;
  text-underline-offset:6px}
#study-redesign .study-cta a:hover {
  color:#e8d4ae}
#study-redesign .cleardiv {
  display:none}

#study-redesign .link-box {
  width:min(1160px,calc(100% - 96px));
  list-style:none;
  margin:0 auto;
  padding:50px 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  border-top:1px solid var(--line)}
#study-redesign .link-box h3 {
  grid-column:1/-1;
  font-size:24px;
  margin-bottom:4px}
#study-redesign .link-box li {
  min-width:0;
  background:white;
  border:1px solid var(--line);
  transition:transform .2s}
#study-redesign .link-box li:hover {
  transform:translateY(-4px)}
#study-redesign .link-box a {
  display:block;
  height:100%}
#study-redesign .link-box img {
  width:100%;
  height:auto}
#study-redesign .link-box h4 {
  padding:18px 20px;
  font-size:16px}

@media(max-width:1050px) {
  #study-redesign .study-opening-editorial,#study-redesign .info,#study-redesign .breadcrumb,#study-redesign .link-box {
  width:calc(100% - 56px)}
#study-redesign .study-opening-editorial,#study-redesign .info.feature,#study-redesign .study-legacy {
  gap:32px}
#study-redesign {
  font-size:18px}
#study-redesign .study-lead {
  font-size:20px}
#study-redesign .kv>.desktop {
  display:none}
#study-redesign .kv>.tablet {
  display:block}
#study-redesign .study-placeholder__year {
  font-size:28px}
}

@media(max-width:760px) {
  #study-redesign .study-opening-editorial,#study-redesign .info,#study-redesign .breadcrumb,#study-redesign .link-box {
  width:calc(100% - 40px)}
#study-redesign .kv>.tablet {
  display:none}
#study-redesign .kv>.mobile {
  display:block}
#study-redesign .breadcrumb {
  padding-block:18px}
#study-redesign .study-opening-editorial {
  display:flex;
  flex-direction:column;
  padding:23px 0 50px;
  gap:28px}
#study-redesign .study-opening-copy {
  order:0}
#study-redesign .study-opening-images {
  order:1;
  width:100%;
  grid-template-columns:1fr 1fr;
  gap:18px}
#study-redesign h1 {
  font-size:30px}
#study-redesign .study-lead {
  font-size:22px}
#study-redesign .study-opening-images .study-figure {
  padding:7px 7px 0;
  transform:none!important}
#study-redesign .info.feature,#study-redesign .study-legacy {
  display:flex;
  flex-direction:column;
  padding-block:48px;
  gap:28px}
#study-redesign .info .text {
  order:0;
  width:100%}
#study-redesign .info .photo {
  order:1;
  width:100%;
  grid-template-columns:1fr 1fr;
  gap:18px}
#study-redesign .study-campus-gallery {
  order:2;
  width:100%;
  gap:18px}
#study-redesign .study-placeholder {
  min-height:205px;
  padding:26px 18px}
#study-redesign .study-placeholder__year {
  font-size:23px}
#study-redesign .study-placeholder__label {
  font-size:14px}
#study-redesign .study-archive-gallery {
  order:2;
  grid-template-columns:1fr;
  width:100%}
#study-redesign .study-archive-gallery .study-placeholder {
  min-height:165px}
#study-redesign .study-cta {
  order:3;
  padding:24px;
  font-size:20px}
#study-redesign .link-box {
  grid-template-columns:1fr;
  gap:22px;
  padding-block:35px}
#study-redesign .link-box li a {
  display:grid;
  grid-template-columns:42% 1fr;
  align-items:center}
#study-redesign .link-box h4 {
  padding:14px;
  font-size:15px}
#study-redesign figcaption {
  font-size:16px}
}

@media(max-width:460px) {
  #study-redesign .study-opening-images,#study-redesign .info .photo,#study-redesign .study-campus-gallery {
  grid-template-columns:1fr}
#study-redesign .study-placeholder {
  min-height:220px}
#study-redesign h1 {
  font-size:28px}
#study-redesign h2 {
  font-size:25px}
#study-redesign .study-opening-editorial {
  padding-top:16px}
#study-redesign .study-opening-images {
  gap:22px}
#study-redesign .study-placeholder__year {
  font-size:32px}
#study-redesign .study-cta {
  font-size:19px}
}

@media(prefers-reduced-motion:reduce){#study-redesign *{transition:none!important}}

/* Keep the single image in section two at full column width. */
#study-redesign .info.feature1 .photo{grid-template-columns:1fr}

/* Restore original timeline layout and responsive rules. */
/*大事記*/
#study-redesign .info.timeline{
    margin-top: 20px;
}

#study-redesign .info.timeline h3{
    width: 100%;
    font-size: 34px;
    text-align: center;
}

#study-redesign .info.timeline .img-2{
    display: inline-block;
    width: 59.5%;
    margin-top: 15px;
    margin-right: 1.5%;
    vertical-align: top;
}

#study-redesign .info.timeline .img-2 img{
    margin-bottom: 5px;
}

#study-redesign .info.timeline .img-3{
    display: none;
}

#study-redesign .info.timeline ul{
    display: inline-block;
    width: 38%;
    padding: 0;
    margin-top: 10px;
    text-align: left;
    list-style: none;
    background: url(https://www.utsc.com.tw/material-alias/about/point.jpg) repeat-y left top;
    background-size: 5px;
}

#study-redesign .info.timeline ul li{
    width: 93%;
    font-size: 20px;
    letter-spacing: 2px;
    margin-top: 43px;
    margin-left: 6%;
}

#study-redesign .info.timeline ul li:first-child,
#study-redesign .info.timeline.study ul li:first-child{
    margin-top: 0;
}

#study-redesign .info.timeline ul li p{
    margin: 0;
    padding-left: 17px;
    background: url(https://www.utsc.com.tw/material-alias/about/tour-arrow.png) no-repeat left 5px;
    background-size: 10px;
}


#study-redesign .info.timeline.study ul{
    width: 55%;
}

#study-redesign .info.timeline.study ul li{
    width: 95%;
    margin-top: 20.5px;
}

#study-redesign .info.timeline.study .img-2{
    width: 42.5%;
    margin-right: 2%;
}

#study-redesign .info.timeline.study .img-2 .pad{
    display: none;
}



@media(max-width:1250px){
#study-redesign .info.timeline {
    margin-top: 30px;
}
    
#study-redesign .info.timeline ul{
    width: 50%;
}
    
#study-redesign .info.timeline ul li{
    width: 95%;
    margin-top: 14px;
    margin-left: 4%;
}
    
#study-redesign .info.timeline .img-2{
    width: 48%;
    margin-right: 0.5%;
} 
    
#study-redesign .info.timeline.study ul{
    width: 58%;
    font-size: 18px;
}
    
#study-redesign .info.timeline.study ul li{
    width: 96%;
    letter-spacing: 1px;
    margin-top: 5.5px;
}
    
#study-redesign .info.timeline.study .img-2 {
    width: 40%;
    margin-right: 1%;
    
}
}

    
@media screen and (max-width: 1024px){ 
#study-redesign .info.timeline ul {
    width: 52%;
}
    
#study-redesign .info.timeline ul li {
    margin-top: 6px;
}
    
#study-redesign .info.timeline .img-2 {
    width: 46%;
    margin-right: 0.5%;
}
    
#study-redesign .info.timeline.study ul{
    width: 67%;
}
    
#study-redesign .info.timeline.study ul li{
    margin-top: 5.1px;
    margin-left: 15px;
}
    
#study-redesign .info.timeline.study .img-2 {
    width: 32%;
    margin-right: 0%;
}
   
#study-redesign .info.timeline.study .img-2 .desktop{
    display: none;
}
    
#study-redesign .info.timeline.study .img-2 .pad{
    display: block;
}

}

@media screen and (max-width: 798px){ 
#study-redesign .info.timeline h3 {
    font-size: 26px;
    margin-bottom: 0;
}
    
#study-redesign .info.timeline ul,
#study-redesign .info.timeline.study ul {
    width: 100%;
    margin-bottom: 10px;
    background: none;
}
    
#study-redesign .info.timeline ul li{
    width: 100%;
    font-size: 20px;
    letter-spacing: 1px;
    margin-left: 0;
}
    

#study-redesign .info.timeline.study{
    margin-top: 20px;
}
    
#study-redesign .info.timeline.study ul li {
    width: 100%;
    margin-top: 6px;
    margin-left: 0;
    letter-spacing: 0px;
}
    
#study-redesign .info.timeline ul li p {
    padding-left: 13px;
    background: url(https://www.utsc.com.tw/material-alias/about/tour-arrow-r.png) no-repeat left 8px;
    background-size: 7px;
}
    
#study-redesign .info.timeline .img-2 {
    display: none;
}
    
#study-redesign .info.timeline .img-3{
    display: block;
    padding-bottom: 30px;
}
}
    
@media screen and (max-width: 576px){ 
#study-redesign .info.timeline ul li{
    font-size: 18px;
}
}








#study-redesign .info.timeline{width:1032px;max-width:92%;margin:20px auto 40px;padding:22px 0 0;border-top:1px solid var(--line);font-size:18px;line-height:1.7em;letter-spacing:1px;text-align:justify}
#study-redesign .timeline h2{font-family:inherit;font-size:30px;line-height:1.4;font-weight:600;text-align:center;margin:0 0 20px;color:var(--ink);letter-spacing:inherit}
#study-redesign .timeline .img-2{margin-bottom:0}
#study-redesign .timeline .img-3{margin-top:0}
#study-redesign .timeline ul{margin-bottom:1em}
#study-redesign .timeline ul li{padding:0;border:0;position:static;color:var(--ink)}
#study-redesign .timeline li:before{content:none}
#study-redesign .timeline .cleardiv{display:block;clear:both}
@media(max-width:1250px){#study-redesign .info.timeline{width:853.12px;margin-top:30px}}
@media(max-width:1024px){#study-redesign .info.timeline{width:706.56px}#study-redesign .timeline h2{font-size:27px}}
@media(max-width:798px){#study-redesign .info.timeline{width:92%;margin-top:20px}#study-redesign .timeline ul{margin-bottom:10px}}
@media(max-width:576px){#study-redesign .timeline h2{font-size:24px}}

/* Uniform gold heading rules. */
#study-redesign .text h2:before{content:none}
#study-redesign h1:after,
#study-redesign .info h2:after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:26px;
  background:#b58e4f;
}
#study-redesign .timeline h3:after{width:72%;max-width:640px;margin-left:auto;margin-right:auto}
@media(max-width:576px){
  #study-redesign h1:after,#study-redesign .info h2:after{margin-top:22px}
  #study-redesign .timeline h3:after{width:90%}
}

/* Preserve the requested heading phrase breaks. */
#study-redesign h1 span{display:block;white-space:normal}
/* Center only the first line of the main title. */
#study-redesign h1 span:first-child{text-align:center}
/* Opening photographs: borderless and matched to the adjacent copy height. */
#study-redesign .study-opening-editorial{align-items:stretch}
#study-redesign .study-opening-images{padding-top:0;grid-template-rows:repeat(2,minmax(0,1fr));gap:24px;min-height:0}
#study-redesign .study-opening-images .study-figure{padding:0;border:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;min-height:0;transform:none}
#study-redesign .study-opening-images .study-figure img{flex:1 1 0;min-height:0;height:0;object-fit:cover}
#study-redesign .study-opening-images .study-figure figcaption{flex:0 0 auto}
#study-redesign .study-opening-copy>p:last-child{margin-bottom:0}
@media(max-width:760px){
  #study-redesign .study-opening-images{grid-template-rows:auto;align-items:start}
  #study-redesign .study-opening-images .study-figure img{flex:none;height:auto;object-fit:contain}
}
/* Tighter opening photo spacing leaves more height for the images. */
#study-redesign .study-opening-images{gap:10px}
#study-redesign .study-opening-images .study-figure figcaption{padding:6px 0}
/* Reduce the gap between the opening subtitle and body copy. */
#study-redesign .study-opening-copy .study-lead{padding-bottom:0;margin-bottom:14px}
/* Compact paragraph and section spacing; preserve original timeline spacing. */
#study-redesign .study-opening-copy>p:not(.study-lead),
#study-redesign .info.feature .text p,
#study-redesign .study-legacy .text p{margin-bottom:12px}
#study-redesign .study-opening-copy>p:last-child,
#study-redesign .info.feature .text p:last-child,
#study-redesign .study-legacy .text p:last-child{margin-bottom:0}
#study-redesign .study-opening-editorial{padding-bottom:18px}
#study-redesign .info.feature,#study-redesign .study-legacy{padding-block:28px;row-gap:28px}
@media(max-width:760px){
  #study-redesign .study-opening-editorial{padding-bottom:30px}
  #study-redesign .info.feature,#study-redesign .study-legacy{padding-block:30px;row-gap:22px}
}
/* Taller photo slot in the 1991 origin section. */
#study-redesign .info.feature1 .photo .study-placeholder{height:400px;min-height:400px}
@media(max-width:760px){
  #study-redesign .info.feature1 .photo .study-placeholder{height:320px;min-height:320px}
}
/* Reduce space between the two campus photographs. */
#study-redesign .info.feature-campus .photo{gap:10px}
#study-redesign .info.feature-campus .photo .study-figure figcaption{padding:6px 0}
/* Increase the height of the two right-side legacy photo slots. */
#study-redesign .study-legacy > .photo .study-placeholder{height:250px;min-height:250px}
@media(max-width:760px){
  #study-redesign .study-legacy > .photo .study-placeholder{height:230px;min-height:230px}
}
/* Tighten spacing between the two right-side legacy images. */
#study-redesign .study-legacy > .photo{gap:10px}
#study-redesign .study-legacy > .photo .study-figure figcaption{padding:6px 0}
/* All photographs and image placeholders are borderless. */
#study-redesign img,
#study-redesign .study-figure,
#study-redesign .study-opening-images .study-figure,
#study-redesign .study-placeholder,
#study-redesign .link-box li{border:0;outline:none;box-shadow:none}
#study-redesign .study-placeholder:before{content:none}

/* Center the two phrases of the legacy heading. */
#study-redesign #study-legacy{text-align:center}
#study-redesign #study-legacy span{display:block}

/* Center the two-line headings in sections two and three. */
#study-redesign #study-origin,#study-redesign #study-campus{text-align:center}
#study-redesign #study-origin span,#study-redesign #study-campus span{display:block}
/* Selected ornament: central gold diamond and two fine rules. */
#study-redesign h1:after,
#study-redesign .info h2:after,
#study-redesign .timeline h3:after{
  height:12px;
  background:
    linear-gradient(135deg,transparent 50%,#b58e4f 50%) calc(50% - 2px) calc(50% - 2px) / 4px 4px no-repeat,
    linear-gradient(225deg,transparent 50%,#b58e4f 50%) calc(50% + 2px) calc(50% - 2px) / 4px 4px no-repeat,
    linear-gradient(45deg,transparent 50%,#b58e4f 50%) calc(50% - 2px) calc(50% + 2px) / 4px 4px no-repeat,
    linear-gradient(315deg,transparent 50%,#b58e4f 50%) calc(50% + 2px) calc(50% + 2px) / 4px 4px no-repeat,
    linear-gradient(#b58e4f,#b58e4f) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(#b58e4f,#b58e4f) right center / calc(50% - 14px) 1px no-repeat;
}

/* Slightly taller opening photographs on desktop; retain natural mobile sizing. */
@media(min-width:761px){
  #study-redesign .study-opening-images .study-figure img{min-height:280px}
}
/* Distinguish the main title from green section titles and the CTA block. */
#study-redesign .study-opening-copy h1{color:#b22222}

/* Isolate redesigned content from the original shared page styles. */
#study-redesign{background:var(--paper);letter-spacing:normal}
#study-redesign .info.feature .text,#study-redesign .study-legacy .text,
#study-redesign .info.feature .photo,#study-redesign .study-legacy .photo{float:none;width:auto;margin:0}
#study-redesign .photo .study-figure{float:none;width:100%;margin:0}
#study-redesign .photo img{float:none;width:100%;margin:0}
#study-redesign .study-opening-copy h1{width:auto;padding:0}
/* Match the breadcrumb strip to the content background without changing hero images. */
.bg .contant > .about:has(> #study-redesign) > .kv{background:#f7f5ee}
.bg .contant > .about:has(> #study-redesign) > .kv > .breadcrumb{background:transparent}

#study-redesign h1 {
  font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  font-weight: 700;
}
#study-redesign h2 {
  font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  font-weight: 900;
  -webkit-text-stroke: 0.3px currentColor;
}
/* Match original about.css H1/H3 typography; keep existing sizes and alignment. */
#study-redesign{font-family:inherit}
#study-redesign p,
#study-redesign figcaption,
#study-redesign .study-placeholder__label,
#study-redesign .study-placeholder__detail{
  font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
}
#study-redesign h1,
#study-redesign h2{
  font-family:inherit;
  font-weight:600;
  -webkit-text-stroke:0;
}
#study-redesign h1 span,
#study-redesign h2 span{
  font-family:inherit;
  font-weight:inherit;
  -webkit-text-stroke:0;
}
#study-redesign h2,
#study-redesign h2 span{color:#B22222}
/* Gold marker before photo captions; preserve the caption text color. */
#study-redesign figcaption::before{
  content:"▲";
  color:#b58e4f;
  display:inline-block;
  margin-right:0.4em;
  font-size:0.8em;
}

/* Related reading: valid heading outside the list, same three-column cards. */
#study-redesign .related-reading {
  width:min(1160px,calc(100% - 96px));
  margin:0 auto;
  border-top:1px solid var(--line);
  padding:50px 0;
}
#study-redesign .related-reading > h3 {
  font-size:24px;
  margin:0 0 28px;
  color:var(--ink);
}
#study-redesign .related-reading .link-box {
  width:100%;
  padding:0;
  border:0;
}
@media(max-width:1050px){
  #study-redesign .related-reading {width:calc(100% - 56px)}
}
@media(max-width:760px){
  #study-redesign .related-reading {width:calc(100% - 40px);padding:35px 0}
}

/* ============================================================
   右側文字上下位置：只需要修改下方的 100px。
   0px = 不下移；50px = 下移 50px；150px = 下移 150px。
   負值（例如 -20px）可往上移。此設定只影響桌面／平板橫向版。
   ============================================================ */
#study-redesign { --opening-text-offset: 40px; }

@media (min-width: 761px) {
  #study-redesign .study-opening-editorial { align-items: start; }
  #study-redesign .study-opening-copy { margin-top: var(--opening-text-offset); }
  #study-redesign .study-opening-images { grid-template-rows: auto; }
  #study-redesign .study-opening-images .study-figure img {
    flex: none;
    height: auto;
    object-fit: contain;
  }
}
/* 手機版維持原本排列，不套用右側文字位移。 */
@media (max-width: 760px) {
  #study-redesign .study-opening-copy { margin-top: 0; }
}

/* 延伸閱讀：三欄等寬、滿版圖片、圖片下方標題（參照指定截圖）。 */
#study-redesign .related-reading .link-box {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  border:0;
}
#study-redesign .related-reading .link-box > li {
  display:block;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
#study-redesign .related-reading .link-box > li > a {
  display:block;
  height:auto;
  color:inherit;
  text-decoration:none;
}
#study-redesign .related-reading .link-box img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:338 / 219;
  object-fit:cover;
}
#study-redesign .related-reading .link-box h4 {
  margin:3px 0 0;
  padding:0;
  font-size:18px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:0;
}
@media(max-width:760px){
  #study-redesign .related-reading .link-box{gap:18px}
  #study-redesign .related-reading .link-box h4{font-size:16px}
}
@media(max-width:576px){
  #study-redesign .related-reading .link-box{grid-template-columns:1fr;gap:25px}
  #study-redesign .related-reading .link-box h4{font-size:18px}
}

/* Bottom breadcrumb: inside the beige content area, no white strip. */
#study-redesign > .bottom-breadcrumb {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  box-sizing:border-box; width:min(1160px,calc(100% - 96px));
  margin:0 auto; padding:18px 0 22px;
  background:transparent; border:0; box-shadow:none;
  color:var(--muted); font-size:14px;
}
#study-redesign > .bottom-breadcrumb li {margin:0; padding:0; list-style:none;}
@media(max-width:1050px){#study-redesign > .bottom-breadcrumb{width:calc(100% - 56px)}}
@media(max-width:760px){#study-redesign > .bottom-breadcrumb{width:calc(100% - 40px)}}

/* ============================================================
   標題＋內文整組上下調整（照片、圖說完全不移動）
   只需修改以下四個數字：正值往下、負值往上、0px 不移動。
   這些設定同時適用桌面與手機版。
   ============================================================ */
#study-redesign {
  --opening-text-y: 50px; /* 環球分齡遊學｜全台首創：標題＋內文 */
  --origin-text-y: -5px;  /* 1991年首創美國遊學團鐵證：標題＋內文 */
  --campus-text-y: 34px;  /* 邁向國際頂尖學府：標題＋內文 */
  --legacy-text-y: 35px;  /* 三十六年歲月見證：標題＋內文 */
  --opening-text-offset: 0px; /* 停用舊版額外位移，統一使用上方設定 */
}
/* transform 只移動文字容器的視覺位置，不改動圖片或欄位排版。 */
#study-redesign .study-opening-copy {
  transform: translateY(var(--opening-text-y));
}
#study-redesign .info.feature1 > .text {
  transform: translateY(var(--origin-text-y));
}
#study-redesign .info.feature-campus > .text {
  transform: translateY(var(--campus-text-y));
}
#study-redesign .study-legacy > .text {
  transform: translateY(var(--legacy-text-y));
}

/* ============================================================
   手機版：圖文間距統一。桌面版的獨立文字位移不影響手機排列。
   如需調整手機圖文距離，只修改 --mobile-section-gap。
   ============================================================ */
@media (max-width: 760px) {
  #study-redesign {
    --mobile-section-gap: 24px;
    --mobile-photo-gap: 18px;
  }
  /* 手機版改用正常文件流，避免 transform 位移造成圖文重疊或空白不均。 */
  #study-redesign .study-opening-copy,
  #study-redesign .info.feature1 > .text,
  #study-redesign .info.feature-campus > .text,
  #study-redesign .study-legacy > .text {
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  #study-redesign .study-opening-editorial,
  #study-redesign .info.feature,
  #study-redesign .study-legacy {
    gap: var(--mobile-section-gap);
    align-items: stretch;
  }
  #study-redesign .study-opening-images,
  #study-redesign .info.feature .photo,
  #study-redesign .study-campus-gallery,
  #study-redesign .study-archive-gallery {
    gap: var(--mobile-photo-gap);
    margin-top: 0;
    margin-bottom: 0;
  }
  #study-redesign .study-figure { margin: 0; }
  #study-redesign .study-figure img { display: block; }
  #study-redesign .study-opening-copy > :last-child,
  #study-redesign .info.feature > .text > :last-child,
  #study-redesign .study-legacy > .text > :last-child { margin-bottom: 0; }
}

/* =========================================================
   首創分齡遊學頁 LINE 快捷按鈕
   LINE：https://lin.ee/dCwVoVU
   ========================================================= */

/* 桌機版：沿用右側 .back 工具列 */
.back li.tour-line {
    background: #00c51f;
}

.back li.tour-line:hover,
.back li.tour-line:active {
    background: #00a91b;
}

.back li.tour-line a {
    display: block;
}

.back li.tour-line img {
    width: 35px;
    margin: 0 2px 4px 4px;
    vertical-align: baseline;
}

/* 手機版：LINE｜回首頁，並與網站既有 service_box 合併成四格 */
@media screen and (max-width: 798px) {
    html, body {
        overflow-x: hidden !important;
    }

    body ul.back {
        position: fixed !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 50vw !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        z-index: 99999 !important;
        transform: none !important;
    }

    body ul.back > li {
        display: block !important;
        float: none !important;
        width: 25vw !important;
        min-width: 25vw !important;
        max-width: 25vw !important;
        height: 46px !important;
        flex: 0 0 25vw !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        writing-mode: horizontal-tb !important;
        box-sizing: border-box !important;
    }

    body ul.back > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        line-height: 46px !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }

    body ul.back > li.tour-line > a > img {
        display: block !important;
        max-height: 39px !important;
        width: auto !important;
        margin: auto !important;
        object-fit: contain !important;
        transform: none !important;
    }

    body ul.back > li.tour-line > a > span {
        display: none !important;
    }

    body ul.back > li.tour-home img {
        display: none !important;
    }

    body ul.back > li:first-child,
    body ul.back > li:last-child {
        border-right: 1px solid rgba(255,255,255,.9) !important;
    }

    body .service_box {
        position: fixed !important;
        left: 50vw !important;
        right: auto !important;
        bottom: 0 !important;
        width: 50vw !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body .service_box ul {
        width: 50vw !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    body .service_box ul li {
        display: block !important;
        float: none !important;
        width: 25vw !important;
        min-width: 25vw !important;
        max-width: 25vw !important;
        height: 46px !important;
        flex: 0 0 25vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body .service_box ul li button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        line-height: 46px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    body .service_box ul li:first-child {
        border-right: 1px solid rgba(255,255,255,.9) !important;
    }

    body .back-to-top {
        bottom: 74px !important;
    }
}

@media screen and (max-width: 400px) {
    body ul.back > li > a,
    body .service_box ul li button {
        font-size: 15px !important;
    }
}