@font-face {
    font-family: corbel_normal;
    src: local("corbel"),
        url(/font/corbel.ttf) format("opentype");
}

@font-face {
    font-family: corbel_bold;
    src: local("corbel"),
        url(/font/corbel.ttf) format("opentype");
        font-weight: bold;
}

body,html{
    margin: 0;
    padding: 0;
    font-family: corbel_bold,sans-serif,"微軟正黑體";
}

.section{
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
}

#home-section{
    /*background-color: #53aec6;*/
    background-color: #5fbad2;
    height: 100vh;
    padding: 0;
    display:flex;
    align-items:center;
    justify-content:center;
}

#nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    transition: background-color ease 0.8s;
}

#nav>ul{
    display: flex;
}

.nav_item{
    font-size: 21px;
    list-style: none;
    padding: 0 10px;
    color: white;
    cursor: pointer;
}

.nav_item:hover:after,.nav_active:after{
    background-color: white;
}

.nav_item::after{
    height: 3px;
    width: 100%;
    display: block;
    content:"";
    transition: background-color ease 1s;
}

.solgan{
    color: white;
    font-weight:400;
    text-align:center;
    margin:0px auto;
    font-family: corbel_normal;
    font-size: 37px;
    font-weight:initial;
    margin: 0;
}

.center-text {
    text-align: center;
}

#device{
    padding-top: 50px;
    display: block;
    margin:auto;
    max-width: 466px;/*圖片本身的實際寬度尺寸*/
}

#circles-wrapper{
    position: absolute;
    bottom: 4vw;
    right: 4vw;
}
.info-circle{
    width: 45px;
    height: 45px;
    border-radius: 100%;
    border: 2px solid white;
    display: inline-block;
    font-size: 26px;
    text-align: center;
    color: white;
    margin: 11px;
    cursor: pointer;
}

.info-circle>i{
    margin-top: 10px;
}

.info-circle:hover{
    color:#036b87;
    border-color:#036b87;
}

#email_dialog{
    position: relative;
    top: -11px;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: none;
    font-size: 15px;
}

#email_dialog:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: white transparent transparent transparent;
    position: absolute;
    bottom: -9px;
    right: 27px;
}

/*ABOUT*/
#about-section{
    color:white;
    background-color: #8dc2d0;
}

.section-title{
    margin: 0;
    text-align: center;
    font-size: 78px;
    margin-top: 20px;
    /*padding: 26px 0 10px 0;*/
}

.article{
    padding: 55px;
}

.about-secondary-color{
    color:white;
    background-color:white;
}

.article-line{
    height:8px;
    border-width:0;
    color:inherit;
    width:60px;
    background-color:inherit;
    /*hr置左*/
    margin-left:0;  
    text-align:left;
}

.article-title{
    font-size: 32px;
    margin: 0;
    margin-top: -3px;
}

#article-list{
    list-style-type:none;
}

#article-list>li,.article-content>p{
    font-size: 22px;
}

#ntou-logo{
    display: inline-block;
    height: 25px;
    vertical-align:middle;
    padding-right: 15px;
}
/*SKILL*/
#skill-section{
    color:#333333;
    background-color: #eaeaea;
}

.skill-secondary-color{
    color:#d55c4b;
    background-color:#d55c4b;
}

.subtitle{
    font-size: 31px;
    text-align: center;
}

#skill-flex{
    display: inline-flex;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.subitem{
    /*width: calc((100%-110px)/2);*/
    width: 50%;
    margin-top: 50px;
}

.document{
  width:38px;
  height:50px;
  position:relative;
  border-radius: 2px;
}

.corner{
    position:absolute;
    top:0;
    right:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #eaeaea transparent transparent;
}
.cover{
    width: 0;
    height: 0;
    position:absolute;
    top:0;
    right:0;
    border-style: solid;
    border-width: 10px 0 0 10px;
    border-color: inherit;
}

.skill-img{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%);
    height: 27px;
}

.skill-font2,.skill-font3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 26px;
}
.skill-font3{
    font-size: 18px;
}

.skill-chart{
    width:93%;
    display:flex;
    margin: 20px;
}

.doc-icon{
    height:50px;
    flex: 0 0 38px;
    
    margin-top:2px;
}

.content{
    height:inherit;
    flex: 1 1 auto;
    
    padding-left: 20px;
}

.skill-name{
    height:calc(100%-28px);
    font-family: "微軟雅黑","微軟正黑體",sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.wrapper{
    height:28px;
    display:flex;
}

.chart-bar{
    height:inherit;
	flex: 1 1 auto;
}

.skill-level{
    height:inherit;
    flex: 0 0 115px;
    margin-left: 26px;
    font-size: 21px;
    
    line-height: 28px;
}

#html-name{
    color:#d55c4b;
}

#html-doc{
    background-color:#e74c3c;
    border-color: transparent transparent transparent #c0392b;
}

#html-bar{
    background: #d55c4b; /* Old browsers */
    background: -moz-linear-gradient(left,  #d55c4b 0%, #d55c4b 91%, #dadada 91%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #d55c4b 0%,#d55c4b 91%,#dadada 91%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #d55c4b 0%,#d55c4b 91%,#dadada 91%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#css-name{
    color:#35a9db;
}

#css-doc{
    background-color:#56aed2;
    border-color: transparent transparent transparent #2f95bd;
}

#css-bar{
    background: #35a9db; /* Old browsers */
    background: -moz-linear-gradient(left,  #35a9db 0%, #35a9db 75%, #dadada 75%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #35a9db 0%,#35a9db 75%,#dadada 75%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #35a9db 0%,#35a9db 75%,#dadada 75%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#js-name{
    color:#f0bf26;
}

#js-doc{
    background-color:#f1c40f;
    border-color: transparent transparent transparent #f39c12;
}

#js-bar{
    background: #f0bf26; /* Old browsers */
    background: -moz-linear-gradient(left,  #f0bf26 0%, #f0bf26 84%, #dadada 84%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f0bf26 0%,#f0bf26 84%,#dadada 84%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f0bf26 0%,#f0bf26 84%,#dadada 84%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#jq-name{
    color:#602C50;
}

#jq-doc{
    background-color:#602C50;
    border-color: transparent transparent transparent #602C50;
}

#jq-bar{
    background: #602C50; /* Old browsers */
    background: -moz-linear-gradient(left,  #602C50 0%, #602C50 84%, #dadada 84%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #602C50 0%,#602C50 84%,#dadada 84%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #602C50 0%,#602C50 84%,#dadada 84%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#vue-name{
    color: #42b883;
}

#vue-doc{
    background-color:#42b883;
    border-color: transparent transparent transparent #42b883;
}

#vue-bar{
    background: #4aa86c; /* Old browsers */
    background: -moz-linear-gradient(left,  #42b883 0%, #42b883 25%, #dadada 25%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #42b883 0%,#42b883 25%,#dadada 25%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #42b883 0%,#42b883 25%,#dadada 25%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#jsp-name{
    color:#f89820;
}

#jsp-doc{
    background-color:#f89820;
    border-color: transparent transparent transparent #f89820;
}

#jsp-bar{
    background: #f89820; /* Old browsers */
    background: -moz-linear-gradient(left,  #f89820 0%, #f89820 80%, #dadada 80%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #f89820 0%,#f89820 80%,#dadada 80%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #f89820 0%,#f89820 80%,#dadada 80%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#php-name{
    color:#777BB3;
}

#php-doc{
    background-color:#777BB3;
    border-color: transparent transparent transparent #777BB3;
}

#php-bar{
    background: #b14739; /* Old browsers */
    background: -moz-linear-gradient(left,  #777BB3 0%, #777BB3 50%, #dadada 50%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #777BB3 0%,#777BB3 50%,#dadada 50%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #777BB3 0%,#777BB3 50%,#dadada 50%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*50%*/
}

#c-name{
    color:#A179DC;
}

#c-doc{
    background-color:#A179DC;
    border-color: transparent transparent transparent #A179DC;
}

#c-bar{
    background: #b14739; /* Old browsers */
    background: -moz-linear-gradient(left,  #A179DC 0%, #A179DC 30%, #dadada 30%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #A179DC 0%,#A179DC 30%,#dadada 30%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #A179DC 0%,#A179DC 30%,#dadada 30%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*50%*/
}

#python-name{
    color:#4B8BBE;
}

#python-doc{
    background-color:#4B8BBE;
    border-color: transparent transparent transparent #4B8BBE;
}

#python-bar{
    background: #b14739; /* Old browsers */
    background: -moz-linear-gradient(left,  #4B8BBE 0%, #4B8BBE 15%, #dadada 15%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #4B8BBE 0%,#4B8BBE 15%,#dadada 15%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #4B8BBE 0%,#4B8BBE 15%,#dadada 15%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*50%*/
}

#SpringM-name{
    color:#ff8c00;
}

#SpringM-doc{
    background-color:#ff8c00;
    border-color: transparent transparent transparent #ff8c00;
}

#SpringM-bar{
    background: #ff8c00; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff8c00 0%, #ff8c00 80%, #dadada 80%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ff8c00 0%,#ff8c00 80%,#dadada 80%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ff8c00 0%,#ff8c00 80%,#dadada 80%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#SpringB-name{
    color:#ff8c00;
}

#SpringB-doc{
    background-color:#ff8c00;
    border-color: transparent transparent transparent #ff8c00;
}

#SpringB-bar{
    background: #ff8c00; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff8c00 0%, #ff8c00 10%, #dadada 10%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ff8c00 0%,#ff8c00 10%,#dadada 10%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ff8c00 0%,#ff8c00 10%,#dadada 10%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#Laravel-name{
    color:#F05340;
}

#Laravel-doc{
    background-color:#F05340;
    border-color: transparent transparent transparent #F05340;
}

#Laravel-bar{
    background: #F05340; /* Old browsers */
    background: -moz-linear-gradient(left,  #F05340 0%, #F05340 65%, #dadada 65%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #F05340 0%,#F05340 65%,#dadada 65%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #F05340 0%,#F05340 65%,#dadada 65%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#net-name{
    color:#512bd4;
}

#net-doc{
    background-color:#512bd4;
    border-color: transparent transparent transparent #512bd4;
}

#net-bar{
    background: #b14739; /* Old browsers */
    background: -moz-linear-gradient(left,  #512bd4 0%, #512bd4 45%, #dadada 45%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #512bd4 0%,#512bd4 45%,#dadada 45%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #512bd4 0%,#512bd4 45%,#dadada 45%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*50%*/
}

.pic-list{
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content:center;
    width: 100%;
}

.pic{
    margin: 0 25px;
}

pic-center-wrapper{
    background-color: #eb6363;
    border-radius: 100%;
    width: inherit;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.pic-img{
    height: 60px;
    display:block;
    margin: auto;
}

.pic-name{
    text-align: center;
    font-size: 21px;
    margin: 20px 0;
}

#android_mother_board{
    display: block;
    margin: 40px auto;
    width: 65vw;
}

#android_studio{
    background-color: #c5c5c5;
}

/*--------------work temp start-----------------------*/
#works-section{
    background-color: #fafafa;
    color:#333333;  
}

/*#works-section>.section-title{
    color:#78909C;
}*/

.works-secondary-color{
    color:#E57373;
    background-color:#E57373;
}

.works-intro{
    text-align: justify;    /* 使得文本两端对齐 */
    hyphens: auto;          /* 允许在需要的时候自动断词 */
    width: 80%;             /* 可调整为适当的宽度 */
    margin: 0 auto;         /* 段落居中显示 */
    font-size: 20px;
}

.works-skill{
    text-align: justify;    /* 使得文本两端对齐 */
    hyphens: auto;          /* 允许在需要的时候自动断词 */
    width: 80%;             /* 可调整为适当的宽度 */
    margin: 0 auto;         /* 段落居中显示 */
    font-size: 14px;
}

.experience-settings{
    font-size: 24px;
}

.pic>a{
    color:#333333;
}

.works-img{
    height: 80px;
}
.web-app-content{
    display: flex;
    flex-wrap:wrap;
}
.web-app-content>.pic{
    margin: 80px;
    margin-bottom: 0;
    width: calc(50% - 160px);
}
.roader-intro{
    flex-wrap: nowrap;
    margin: 70px 0;
}
.roader-demo-img{
    margin:60px 20px 0;
    width:calc(100%/3);
    display: inline-block;
}
/*scroll bar css*/

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FFF;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    background: #CCC;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: #AAA;
}
::-webkit-scrollbar-thumb:active {
    background: #888;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}
.resume-section {
    position: relative;
    margin-left: 30px;
    margin-bottom: 20px;
}
.timeline {
    position: absolute;
    left: -15px; /* Adjust this to move the line left or right */
    top: 0;
    bottom: 0;
    width: 2px; /* Thickness of the line */
    background: #333; /* Color of the line */
}
.work-experience:before {
    content: '';
    display: block;
    position: absolute;
    left: -22px; /* To center the circle on the timeline */
    top: 0;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333; /* Color of the circle */
}
.image-link {
    display: inline-block;
    text-decoration: none; /* 移除超連結下劃線 */
}

.image-link img {
    width: 100px; /* 或你想要的任何尺寸 */
    height: auto;
    transition: transform 0.3s ease; /* 平滑放大動畫效果 */
}

.image-link:hover img {
    transform: scale(1.1); /* 鼠標懸停時放大圖片 */
}
.image-link:hover {
    text-decoration: none; /* 確保懸停時無下劃線 */
}