html {
    margin: 0%;
    padding: 0%;
    background-color: #222222;
    overflow-x: hidden;
}

p {
    font-size: 18px;
    color: #ffffff;
}

.aall {
    background-color: #222222;
}

.Navigation {
    margin-right: 3%;
}

.container-fluid {
    padding: 0px !important;
}

/* 增加放大效果的樣式 */
.popup-image {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

/* <!------------------------header---------------------------------> */

#header {
    background-color: transparent;
    transition: all 0.5s;
    z-index: 1;
    position: fixed;
    width: 100%;
    height: 80px;
    padding: 15px 0;
    top: 0;
}

#header.header-scrolled {
    background-color: #dcddddc5;
}

#header.mobile-nav {
    background-color: #dcddddc5;
}

#header.header-scrolled a {
    text-decoration: none;
    color: #5a5a5a;
}

#header.header-scrolled a:hover {
    color: #000000;
}

.active {
    color: #000000 !important;
}

.navbar_con ul {
    margin: 0;
    padding: 0;
    margin-right: 7%;
}

.navbar_con a {
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: 0.3s;
    text-decoration: none;
}

.navbar_con a:hover {
    color: #222222;
}

.scrollto:hover .dropdown {
    position: absolute;
    flex-direction: column;
    width: 150px;
    top: 38px;
    padding: 8px;
    list-style: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffffd3;
    min-width: 160px;
    z-index: 1;
    border: 0px;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    border-radius: 10px;
    background-color: #ffffffd3;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.head_logo {
    margin-left: 5%;
}

/* <!---------------------------------------------------------> */

.bg1 {
    padding: 0% !important;
    position: absolute;
    display: block;
    width: 100%;
    height: 100vh;
}

.bg1 ::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 130%;
    height: 96%;
    background: var(--background-color);
    opacity: 0.3;
    z-index: 0;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%) translateY(18px) rotate(2deg);
}

.mk {
    background-color: #ffffff35;
    backdrop-filter: blur(5px);
    display: block;
    width: 100%;
    height: 100vh;
}

.t1 p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(../img/h1.jpg);
    background-size: 170% auto;
    background-repeat: no-repeat;
}

.mk p {
    font-size: 900%;
    height: 50vh;
    width: 50%;
    font-weight: bold;
}

.t1 p {
    display: block;
    text-align: right;
    align-content: flex-end;
}

.t_dow p {
    color: #dcdddd;
    display: block;
    width: 100%;
    align-content: flex-start;
}

/* <!---------------------------------------------------------> */

.me img {
    width: 30%;
}

h2::after {
    content: "";
    display: block;
    width: 23%;
    height: 2px;
    background-color: #9fa0a0;
    left: 0px;
    bottom: 0px;
    margin-top: 1%;
    margin-left: -5%;
}

.logotitle {
    margin-left: 10% !important;
}

.logotitle::after {
    content: "";
    display: block;
    width: 25%;
    height: 2px;
    background-color: #9fa0a0;
    left: 0px;
    bottom: 0px;
    margin-top: 1%;
    margin-left: -11%;
}

.ski {
    margin-left: 3% !important;
}

.ski::after {
    content: "";
    display: block;
    width: 13%;
    height: 2px;
    background-color: #9fa0a0;
    left: 0px;
    bottom: 0px;
    margin-top: 1%;
    margin-left: -3%;
}

.vtbtitle {
    margin-left: 10% !important;
}

.vtbtitle::after {
    content: "";
    display: block;
    width: 35% !important;
    height: 2px;
    background-color: #9fa0a0;
    left: 0px;
    bottom: 0px;
    margin-top: 1%;
    margin-left: -11%;
}

.about {
    margin-top: 5%;
}

.about_con {
    margin-top: 5% !important;
}

.me img {
    width: 70%;
    top: 50%;
    left: 10%;
    transform: translate(20%, 0%);
}

.abo_sst {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20%;
}

.introduce {
    display: block;
    line-height: 300%;
    font-size: 18px;
    margin-top: 0% !important;
}

.ski_con {
    text-indent: 2em;
}

/* <!------------------------experience---------------------------------> */

.experience {
    margin-top: 10% !important;
}

.exp_h::after{
    width: 25%;
}

.experience h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

.exp_con {
    margin-top: 6% !important;
}

.timeline {
    position: relative;
    width: 100%;
    padding-bottom: 100px;
}

.timeline-line {
    position: absolute;
    margin-top: 6%;
    margin-left: 5.85%;
    width: 2px;
    background-color: white;
    z-index: 0;
    height: 59%;
}

.timeline-dot {
    position: absolute;
    margin-left: 5.6%;
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 50%;
    z-index: 1;
}

.timeline-dot .label {
    position: absolute;
    left: 30px;
    top: -6px;
    color: white;
    font-size: 16px;
    white-space: nowrap;
}

/* 位置控制 */
.timeline-dot.top {
    margin-top: 6%;
}

.timeline-dot.middle {
    top: 45%;
    transform: translateY(-50%);
}

.timeline-dot.bottom {
    top: 75%;
    transform: translateY(-80%);
}
/* <!---------------------------------------------------------> */

.Certification {
    margin-top: -5%;
}

.cer_h::after {
    width: 50%;
}

.cer_con {
    margin-top: 5% !important;
    margin-left: 5%;
}

.cer_st {
    margin-top: 25% !important;
    margin-left: 5%;
}

.cer_con ul li {
    color: #ffffff;
    font-size: 18px;
    line-height: 80px;
}

.cer_img {
    margin-top: 13% !important;
    align-content: center;
}

/* <!---------------------------------------------------------> */

.cta {
    margin-top: 8%;
    margin-bottom: 8%;
    height: 20vh;
    background: linear-gradient(rgba(2, 2, 2, 0.5), rgba(0, 0, 0, 0.5)), url(../img/h2.jpeg) fixed center center;
    background-size: cover;
    padding: 60px 0;
}

/* <!---------------------------------------------------------> */

.w_img {
    margin-top: 5% !important;
    padding: 0px !important;
    position: relative;
    width: 15% !important;
}

.w_p {
    position: absolute;
    top: 1%;
}

.w_img p {
    text-orientation: sideways;
    writing-mode: vertical-lr;
    font-size: 350%;
    font-weight: bold;
    margin-left: -3%;
    text-shadow: -1px -1px 0 #222222;
}

.flat {
    margin-left: 10%;
}

.w_img_bg_1 {
    width: 200%;
    height: 80vh;
    background-image: url(../img/portfolio/1022.jpg);
    background-repeat: no-repeat;
    background-position: calc(50% + 15%) center;
    background-size: cover;
    opacity: 60%;
}

.wa {
    display: block;
    position: absolute;
    top: 93%;
    font-size: 30px;
    width: 100%;
}

.wa a {
    float: right;
    margin: 3%;
    color: #fff;
    text-decoration: none;
}

.wa a:hover {
    color: #000000;
}

.wm3 a:hover {
    color: #5a5a5a;
}

.w_img_bg_1.mask {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

/* .w_img_bg_1.mask:hover {
    clip-path: polygon(0 0, 150% 0, 150% 100%, 0% 100%);
} */

.w_img_bg_2 {
    width: 200%;
    height: 80vh;
    background-image: url(../img/h4.jpg);
    background-repeat: no-repeat;
    background-position: calc(50% + 20%) center;
    background-size: cover;
    opacity: 60%;
}

.w_img_bg_2.mask {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

/* .w_img_bg_2.mask:hover {
    clip-path: polygon(0 0, 150% 0, 150% 100%, 0% 100%);
} */

.w_img_bg_3 {
    width: 200%;
    height: 80vh;
    background-image: url(../img/h5.jpg);
    background-repeat: no-repeat;
    background-position: calc(50% + 20%) center;
    background-size: cover;
    opacity: 60%;
}

.w_img_bg_3.mask {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

/* .w_img_bg_3.mask:hover {
    clip-path: polygon(0 0, 150% 0, 150% 100%, 0% 100%);
} */

.w_img_bg_4 {
    width: 200%;
    height: 80vh;
    background-image: url(../img/h6.jpg);
    background-repeat: no-repeat;
    background-position: calc(50% + 10%) center;
    background-size: cover;
    opacity: 60%;
}

.w_img_bg_4.mask {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

/* .w_img_bg_4.mask:hover {
    clip-path: polygon(0 0, 150% 0, 150% 100%, 0% 100%);
} */

.w_img_bg_5 {
    width: 200%;
    height: 80vh;
    background-image: url(../img/h7.jpg);
    background-repeat: no-repeat;
    background-position: calc(50% + 15%) center;
    background-size: cover;
    opacity: 60%;
}

.w_img_bg_5.mask {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

/* .w_img_bg_5.mask:hover {
    clip-path: polygon(0 0, 150% 0, 150% 100%, 0% 100%);
} */

.effect_1 {
    margin-left: 100%;
    width: 135%;
}

.w_img_bg_3.effect_1 {
    margin-left: 68%;
}

.w_img_bg_4.effect_1 {
    margin-left: 35%;
}

.w_img_bg_5.effect_1 {
    margin-left: 2%;
}

.w3.effect_1 {
    margin-left: 70%;
}

.w4.effect_1 {
    margin-left: 35%;
}

.w5.effect_1 {
    margin-left: 3%;
}


/* <!-------------------------footer--------------------------------> */

.footer {
    height: 85vh;
    margin-top: -5% !important;
    background-image: url(../img/tt.png);
    background-repeat: no-repeat;
}

.footer_con {
    font-size: 20px;
    font-weight: bold;
    line-height: 200%;
    margin-bottom: 3%;  
}

.footer_int {
    font-size: 20px;
    font-weight: bold;
    line-height: 200%;
    margin-bottom: 3%;
}

.footer_int p {
    width: 100%;
    color: #222222;
}

.footer_con , .footer_int {
    margin-top: 500px;
}

.footer_vid {
    margin-top: 350px;
}

.footer_con a {
    text-decoration: none;
    color: #222222;
}

.footer_con a:hover {
    color: #9fa0a0;
}

/* <!------------------------work-graphic---------------------------------> */

.g_h::after {
    width: 45%;
}

#ani .st {
    margin-top: 100px;
}

.st h1 {
    color: #ffffff;
    font-weight: bold;
    font-size: 200%;
}

.st h2 {
    color: #b5b5b600;
    font-weight: bold;
    font-size: 200%;
    text-shadow: 0 0 3px #b5b5b660;
    margin-top: -3.5%;
    margin-left: 5%;
} 

#ani h3 {
    color: #fff;
    font-weight: bold;
}

.vid video {
    position: relative;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.g_t {
    line-height: 300%;
}

.g_soft {
    margin-top: 5%;
}

.g_con {
    text-indent: 2em;
    line-height: 350%;
}

/* <!------------------------Graphic Design---------------------------------> */

.mp {
    margin-top: 10% !important;
}

.e-book {
    margin-top: 10% !important;
}

.photo_img {
    margin-top: 5% !important;
}

.ui1 {
    margin-left: 40%;
    border: 1px solid #a3a3a3;
}

.ui2 {
    float: inline-end;
    border: 1px solid #a3a3a3;
}

.ui_con {
    margin-left: 5%;
}

.Portrait {
    margin-top: 5% !important;
}

.Por {
    margin-top: 10% !important;
}

.AB {
    margin-left: 5%;
}

/* <!------------------------Editor---------------------------------> */

.e_h::after {
    width: 16%;
}

.Transition {
    margin-top: 5% !important;
}

.tra {
    margin-top: 2% !important;
}

.case {
    margin-top: 10% !important;
}

.g_Click {
    transition: all 0.2s linear;
}

.g_Click:hover {
    transform: scale(0.9);
    transition: all 0.2s linear;
}

.Movie {
    margin-top: 5% !important;
}

/* <!------------------------animation---------------------------------> */

.ani_h::after {
    width: 24%;
}

.ani_vid {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-20%, 20%);
}

.ani_up {
    margin-top: 5%;
}

.s_vid {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-40%, 10%);
}

.ss {
    margin-top: 10% !important;
}

.vl2D,.AItool {
    margin-top: 5% !important;
}

.ani_a {
    color: #cacaca;
}

.ani_a:hover {
    color: #8b8b8b;
}

.ani_topics {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-20%, 20%);
}

.ani_live3D {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-20%, 5%);
}

.logottt {
    margin-top: 10% !important;
}

.cat_vid {
    margin-top: 3% !important;
    margin-left: 5%;
}

/* <!------------------------3D-modeling---------------------------------> */

.mod_h::after {
    width: 29%;
}

.mod_light {
    margin-top: 8% !important;
}

.mid_a {
    font-size: 16px;
}

.mod_houdini {
    margin-top: 10% !important;
}

.mod_vid {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-20%, 10%);
}

.mod_2 {
    margin-top: 1% !important;
}

/* <!------------------------Game---------------------------------> */

.g_dow {
    margin-top: 10% !important;
}

.water_vid {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-20%, 20%);
}

.mod_houdini video {
    position: relative;
    top: 5%;
    left: 10%;
    transform: translate(-10%, 20%);

}