@charset "UTF-8";
.wcontent {
    background-color: rgba(210,59,62,1.00);
}



@media only screen and (min-width: 600px) {
  /* nb： */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* dk： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}


html {
  scroll-behavior: smooth;
}
body {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top right;
    background-color: #000;
}
.logo {
    width: 100%;
    position: fixed;
    z-index: 8;
    background-color: rgba(0,0,0,1.00);
    height: 100px;
    background-position: 0% 98%;
    padding-left: 13%;
}

.logo.img {
    width: 1000px;
    position: fixed;
    z-index: 8;
    background-color: rgba(0,0,0,1.00);
    margin-left: 13%;
    background-position: 0% 98%;
}
.head {
    width: 100%;
    position: fixed;
    z-index: 8;
    height: 100px;
    background-position: 0% 98%;
    margin-top: -9px;
    border-bottom: thin solid rgba(129,129,129,1.00);
    background-color: rgba(0,0,0,1.00);
    margin-left: -10px;
}
.nav {
    text-align: left;
    position: fixed;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    z-index: 8;
    overflow-y: hidden;
    margin-top: 62px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20%;
    padding-top: 0px;
}

.nav a {
    cursor: pointer;
    list-style-type: none;
    float: left;
    font-size: 16px;
    text-decoration: none;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
.nav li {
    cursor: pointer;
    list-style-type: none;
    border-right: thin solid rgba(154,116,41,1.00);
    padding-right: 19px;
    padding-left: 21px;
    float: left;
    height: 21px;
    color: rgba(255,139,252,1.00);
}
.nav li:hover {
    cursor: pointer;
    background-repeat: no-repeat;
    color: rgba(255,255,255,1.00);
    z-index: auto;
    height: 25px;
    margin-bottom: 0px;
    background-image: url(../images/2.png);
}
.nav li a:hover {
    cursor: pointer;
    background-repeat: no-repeat;
    color: rgba(68,255,245,1.00);
    z-index: auto;
}
.nav a:hover {
    cursor: pointer;
    background-repeat: no-repeat;
    z-index: auto;
}
.nav li a {
    cursor: pointer;
    background-repeat: no-repeat;
    color: rgba(182,145,73,1.00);
    z-index: auto;
}
/* Desktop first (default styles) */
.home_content {
    padding-top: 100px;
    max-width: 80%;
    background-color: rgba(0,0,0,1.00);
    color: rgba(226,173,174,1.00);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.text {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.me {
    z-index: 10;
    margin-top: -2px;
    float: left;
    width: 50%;
    box-sizing: border-box;

}

.me img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 500px;
}

/* Headings and text */
.n-h2, .n-h1, .n-a, .n-a1 {
    box-sizing: border-box;
    float: none;
    margin-left: 0;  /* 改為 0 保持與 ME 對齊 */
    margin-right: 0;
    padding-left: 5%; /* 百分比左邊距，縮放時跟隨容器 */
}

.n-h2 {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 50px;
    color: rgba(255,255,255,1.00);
    font-style: normal;
    padding-bottom: 5px;
    margin-top: 100px;
}

.n-h1 {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 60px;
    color: rgba(255,255,255,1.00);
    font-style: normal;
    font-weight: bolder;
    letter-spacing: 1px;
    margin-top: 9px;
    margin-bottom: 11px;
}

.n-a {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 50px;
    color: rgba(255,255,255,1.00);
    font-style: normal;
    padding-bottom: 7px;
}

.n-a1 {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 38px;
    color: rgba(255,255,255,1.00);
    font-style: italic;
    font-weight: lighter;
    margin-bottom: 5px;
}

/* Media queries - 保留原寬度，只改 padding-left */
@media (max-width: 1199px) {
    .home_content {
    padding-top: 100px;
    max-width: 80%;
}
    .me { width: 50%; }
    .text { width: 50%; }
    .n-h2 { font-size: 40px; margin-top: 100px; }
    .n-h1 { font-size: 60px; }
    .n-a { font-size: 40px; }
    .n-a1 { font-size: 30px; }
} 

@media (max-width: 999px) {
	.home_content {
    padding-top: 100px;
    max-width: 80%;
}
    .me { width: 50%; }
    .text { width: 40%; }

    .n-h2 { font-size: 40px; margin-top: 100px; }
    .n-h1 { font-size: 60px; }
    .n-a { font-size: 36px; }
    .n-a1 { font-size: 23px; }
}

@media (max-width: 599px) {
    .home_content { padding-top: 60px; }
	.me { width: 100%; padding-top: 60px;
	margin-bottom: 50px;
}
.text { 
        width: 80%; 
        float: none; 
        margin: 40px auto 50px auto; 
		padding-left: 20px;
    }


    .me img { width: 100%; }

    .n-h2 { font-size: 38px; margin-top: 40px; }
    .n-h1 { font-size: 50px; }
    .n-a { font-size: 30px; }
    .n-a1 { font-size: 23px;  }
}
	
.footer {
    right: 50px;
    bottom: -13px;
    text-align: right;
    position: fixed;
    font-size: 10px;
    color: rgba(145,122,14,1.00);
    margin-right: -10px;
    width: 100%;
    height: 50px;
    background-image: -webkit-linear-gradient(270deg,rgba(16,16,16,0.15) 0%,rgba(16,16,16,0.75) 29.39%,rgba(0,0,0,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(16,16,16,0.15) 0%,rgba(16,16,16,0.75) 29.39%,rgba(0,0,0,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(16,16,16,0.15) 0%,rgba(16,16,16,0.75) 29.39%,rgba(0,0,0,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(16,16,16,0.15) 0.00%,rgba(16,16,16,0.75) 29.39%,rgba(0,0,0,1.00) 100%);
}
.footer a:hover {
    color: rgba(0,248,255,1.00);



}
.footer p:hover {
    color: #00F8FF;



}
.footer p {
    color: rgba(255,255,255,1.00);
    vertical-align: baseline;
    font-family: Haettenschweiler, "Franklin Gothic",sans-serif;
}
.footer a {
   color: rgba(168,144,29,1.00);
    text-decoration: none;
    line-height: 35px;  /* 讓文字跟容器一樣高就會置中 */

}

h3 {
    font-size: 38px;
    font-weight: 600;
    text-align: left;
    color: #FFF;
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 15px 0px 15px 0px;
    width: auto;
}
h4  {
    height: 30px;
    font-size: 30px;
    text-align: center;
    color: #FFF;
    margin: 0px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgba(0,0,0,1.00);
}


p {
	font-size: 18px;
	font-weight: 400;
	color: #FFF;
	padding-bottom: 10px;
}

.icon{
    text-align: right;
    float: right;
    z-index: 50;
    width: 99%;
    position: fixed;
    margin-left: auto;
		}
.icon img{
    width: 27px;
    height: auto;
	
}
.icon img:hover {
    width: 27px;
    height: auto;
	
}


.contact_content {
    padding-top: 122px;
    text-align: center;
    position: relative;
	width: 100%;
}


.c-a {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 19px;
    color: rgba(192,192,192,1.00);
    font-style: normal;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
    padding-bottom: 38px;
}



.c-h1 {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 50px;
    color: rgba(255,255,255,1.00);
    font-style: normal;
    font-weight: bolder;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 40px;
    float: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}



.c-h2 {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 40px;
    color: rgba(255,255,255,1.00);
    font-style: normal;
    padding-bottom: 5px;
    text-align: center;
    padding-top: 15px;
}


.c-a1 {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 23px;
    color: rgba(255,255,255,1.00);
    font-style: normal;
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 150px;
    font-weight: lighter;
    margin-bottom: 5px;
}




.c-box {
    width: 250px;
    justify-content: center;
    align-items: center;
    background: #060c21;
    opacity: 1;
    position: relative;
    height: auto;
    border: thin solid rgba(90,90,90,1.00);
    padding-top: 51px;
    padding-right: 51px;
    padding-bottom: 51px;
    padding-left: 51px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 90px;
	}
.c-box_large {
    width: 500px;
    justify-content: center;
    align-items: center;
    background: #060c21;
    opacity: 1;
    position: relative;
    height: auto;
    border: thin solid rgba(90,90,90,1.00);
    padding-top: 51px;
    padding-right: 51px;
    padding-bottom: 51px;
    padding-left: 51px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 90px;
	}
.c-box-icon {
}

.c-box img {
    width: 60px;
    justify-content: center;
    align-items: center;
    opacity: 1;
    position: relative;
    height: auto;
	}
.c-box_large img {
    width: 60px;
    justify-content: center;
    align-items: center;
    opacity: 1;
    position: relative;
    height: auto;
	}


.c-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
	}
.c-box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
	z-index: -2;}



.contact {
    z-index: 4;
    float: none;
    text-align: center;
    background-position: 0% 0%;
    background-size: cover;
    width: 60%;
    padding-bottom: 22px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border: thin double #9F8527;
    margin-top: 25px;
    opacity: 0.9;
}


.messages{
    width: 300px;
    height: 220px;
    margin-top: 5px;
}

form {
	text-align: center;}

.contact a  {
    font-size: 20px;
    border-radius: 5;
    color: #636363;
}

input {
    width: 300px;
    margin-bottom: 10px;
    clear: both;
    height: 20px;
    border-radius: 3px;
    border-width: 1px;
    border-style: dotted;
}

.noClear {
    border: thin solid #FFFFFF;
    height: 28px;
}
input.in1 {
    width: 51px;
    height: 15px;
    text-shadow: 0px 0px;

}


.s-r:hover{
    width: 109px;
    margin-top: 30px;
    margin-right: 21px;
    margin-left: 23px;
    background-color: #815900;
    color: #FFFFFF;
    padding-top: 7px;
    padding-bottom: 5px;
}
.s-r{
    width: 109px;
    margin-top: 30px;
    margin-right: 21px;
    margin-left: 23px;
    background-color: #32FFF4;
    color: #000000;
    border-radius: 3px;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-bottom: 5px;
}

/* Contact Page RWD */

/* 平板橫向、桌面縮小到 1199px */
@media (max-width: 1199px) {
  .contact_content { 
    padding-top: 100px;
    margin-left: 10%;
    margin-right: 10%;
  }
  .c-box_large { 
    width: 400px;
  }
		
  input, 
  .messages {
    width: 90%;
}

/* 平板直向、寬度小於 999px */
@media (max-width: 999px) {
  .contact_content { 
    padding-top: 80px;
    margin-left: 5%;
    margin-right: 5%;
  }
  .c-box_large { 
	  width: 350px;}
	
  input, 
  .messages {
    width: 90%;
  }	  
}

/* 手機寬度小於 599px */
@media (max-width: 599px) {
  .contact_content { 
    padding-top: 60px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .c-box_large { 
    width: 90%;   
    padding: 30px;
  }

  .c-h1 {
    margin-top: 60px; /* 原本 20px，手機改成 40px */
  }

  .contact { 
    width: 90%;
    padding-left: 10px;
    padding-right: 10px;
  }

  input, 
  .messages {
    width: 90%;
  }
}