body{ font-family:'Noto Sans TC', sans-serif, inherit;overflow-x: hidden;background: linear-gradient(to bottom, #865d31 30%,#b39671 100%,#ffefbc 100%);}
.container{ position: relative;max-width: 1366px;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
li{list-style:none;}
section p,section li,section a {font-size: 1.3rem;font-weight: 400; color: #000; line-height: 1.8;}
section p {margin-bottom: 25px;}
section .text p span {border-bottom: 5px solid #FFCE00;}





/* visual */
header#visual{height: 82vh;position: relative;overflow: hidden;background: url(../images/header-01bg.png) no-repeat top center;background-size: 100%;}

header#visual .title{z-index: 1000;}
header#visual .title img{width: 39%;display: block;margin: 15% auto 0 auto;}
header#Visual .master_content {position: relative;padding: 0 8% 10% 8%;}


/* Project */
section#Project {position: relative;background: #faf5f0;padding-bottom: 100px;background-color: #faf5f0;    background: no-repeat center/cover;padding-top: 0;}

section#Project:before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/cloud_BG.png") no-repeat center;background-size: cover;z-index: 0;background-attachment: fixed;}
section#Project p {font-size: 1.3rem;text-align: justify;}
section#Project .box > p{padding: 0 15px;}
h2{color: #ff6a47;letter-spacing: 3px;font-size: 3rem;position: relative;}
.p-img{width: 55%;display: block;margin: auto;}


.Project-title{position: relative;}
.Project-title:before {
    content: '';
    width: 73.8%;
    height: 24px;
    background: #f20005;
    position: absolute;
    bottom: 0;
    left: 176px;
    z-index: -1;
}
.Project-title {     
    text-align: center;color: #FFF;font-weight: bold;
}
.Project-title:hover {     
    color: #000;
    transition: all .4s ease;
}


/* KungFu */
#KungFu{background: -webkit-linear-gradient(top,rgba(134,93,49,0.2),rgba(179,150,113,0.5)),url(../images/room.jpg);z-index: 99;background-size: 100%;padding: 40px 0;position: relative;background-attachment: fixed;padding-bottom: 4%;}
#KungFu li{color: #FFF;font-weight: bold;font-size: 2rem;margin-bottom: 13px;text-shadow: black 0.1em 0.1em 0.2em;}

.KungFu-img {width: 400px;position: absolute;background: url(../images/KungFu.svg) no-repeat;height: 500px;z-index: -1;right: 0;}
.KungFu-m01{margin-left: 10%;}
.KungFu-m02{margin-left: -15%;}

/* btnLink */
section#btnLink{padding-top: 0;padding-bottom: 80px;}
section#btnLink .icon > img{width: 8%;display: block;margin: auto;}
section#btnLink .container > p{font-size: 1.8rem;}
section#btnLink button{ width: 100%; margin: 15px auto 25px auto; display: block; background: #ffdc55; color:#000; border: 3px solid #000; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.6rem;}
section#btnLink button:hover{transition: all .4s ease;box-shadow: 0 15px 20px -4px rgb(0 0 0 / 10%);opacity: 0.8;background-color: #ff6629;}
section#btnLink button.bt-r{background: #ff6629;}
section#btnLink button.bt-r:hover{background: #ffdc55;}




@media (max-width: 1440px) {
    .container { position: relative; max-width: 1200px; }
    header#visual { height: 500px; }
}

@media (max-width: 1200px) {
    .container {max-width: 1280px;}
}
    

@media(max-width: 767px){

    section {padding: 30px 0;}
    h2{font-size: 1.6rem;}
    section p, section li, section a {font-size: 1.2rem;}

    header#Visual .master_content {padding: 30% 4%;background: url(../images/master-bg.jpg) right -110px repeat;background-size: cover;} 
    header#Visual .introduction .box{padding: 27px 14px;}
    header#Visual .introduction .box p{font-size: 1.2rem;}

    header#visual{background: url(../images/header-m-bg.jpg ) no-repeat  center 90px;height: 100vh;background-size: 100%;}
    header#visual .title h1 { font-size:2.2rem; }
    header#visual .title h2 { font-size: 1rem;line-height: 1.4; }
    header#visual .title .info ul { background-color: rgba(255, 255, 255, 0.8);padding: 8px 10px; }
    header#visual .title .info ul li {font-size: 1rem;}
    header#visual .title .info .name {background-color: #ff6629;}
    header#visual .title .info .name h3 { font-size: 1.5rem; padding: 10px 5px;writing-mode: vertical-lr;margin: 0; }    



    header#visual{height: 57vh;position: relative;overflow: hidden;background: url(../images/header-01bg.png) no-repeat top center;background-size: 170%;}

    header#visual .title{z-index: 1000;}
    header#visual .title img{width: 100%;margin-left: 0;margin-top: 43%;padding: 5px;}
    header#Visual .master_content {position: relative;padding: 0 8% 10% 8%;}


    .interview {flex-direction: column;}
    .interview .photo{width:100%;margin: 0 0 20px;}

    .interview .list{width:100%;}

    
    .interview .list ul li{margin-top: 20px;}
    .interview .list ul li span{padding: auto;margin-right: 8px;font-size: .9rem;width: 11%;text-align: center;}
    .interview .list ul li a {font-size: 1.1rem;}
    
    


/* Project */

section#Project .container .icon > img{width: 80%;}
section#Project .container .title > h3{width: 90%;}
section#Project .pt-5{padding: 0 !important;}
section#Project .mb-5{margin: 0;}
section#Project .title > Ul{padding-top: 0;}
.p-img{width: 100%;display: block;margin: auto;}



.Project-title:before {
    content: '';
    width: 100%;
    height: 24px;
    background: #f20005;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.KungFu-m01{margin-left: 0;}
.KungFu-m02{margin-left: 0;}
#KungFu li{font-size: 1.3rem;}
/* btnLink */
section#btnLink{padding: 70px 0;}
section#btnLink .icon > img{width: 20%;}
section#btnLink .container > p{font-size: 1.4rem;}
}