/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+0370-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* IE */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular');
  }
  

body{
    float: left;
    height: auto;
	background-color: white;
	-webkit-overflow-scrolling: touch;
    font-family: "Segoe UI", Arial, "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK", sans-serif;
    font-weight: 500;
    margin: 0px;
}
body::-webkit-scrollbar { display: none; }

#index-width-controller{
    float: left;
    width: 100vw;
    max-width: 1440px;
    overflow: hidden;
}

#index-cover{
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url('../sources/image/ptma_logo.svg');
    background-size: 50% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eee6db;
}

#index-title{
    float: left;
    width: 100vw;
    height: 155px;
}

#index-title-time{
    position: absolute;
    margin-left: 40px;
    margin-top: 33px;
    height: 24px;
    color: black;
    font-size: 14px;
    padding-left: 27px;
    line-height: 24px;
    letter-spacing: 1px;
}
#index-title-time-clock{
    position: absolute;
    left: 0px;
    top: 1px;
    width: 20px;
    height: 20px;
    background-image: url('../sources/image/clock_icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#index-title-phone{
    position: absolute;
    margin-left: 40px;
    margin-top: 66px;
    height: 24px;
    color: black;
    font-size: 14px;
    padding-left: 27px;
    line-height: 24px;
    letter-spacing: 1px;
}

#index-title-phone-icon{
    position: absolute;
    left: 3px;
    top: 4px;
    width: 14px;
    height: 14px;
    background-image: url('../sources/image/phone_icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#index-title-logo{
    position: absolute;
    left: calc(50% - 112px);
    top: 0px;
    width: 224px;
    height: 86px;
    background-image: url('../sources/image/ptma_logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#index-title-translate{
    position: absolute;
    right: 40px;
    top: 33px;
    height: 24px;
    width: 130px;
}

#index-title-translate-icon{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 22px;
    height: 24px;
    background-image: url('../sources/image/translate_icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#index-title-translate-selectbox{
    position: absolute;
    left: 38px;
    top: 0px;
    width: 92px;
    height: 24px;
    border: #e1e1e1 1px solid;
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
}

#index-title-translate-arrow{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 24px;
    height: 24px;
    background-image: url('../sources/image/translate_arrow.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: .2s ease-in-out;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

#index-title-translate-arrow.rotate{
    transition: .2s ease-in-out;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#index-title-translate-sc{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 24px;
    width: 100vw;
    color: black;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    padding-left: 5px;
}

#index-title-translate-tc{
    position: absolute;
    left: 0px;
    top: 24px;
    height: 24px;
    width: 100vw;
    color: black;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    padding-left: 5px;
}

#index-title-translate-en{
    position: absolute;
    left: 0px;
    top: 48px;
    height: 24px;
    width: 100vw;
    color: black;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    padding-left: 5px;
    transition: color 0.1s;
}

#index-title-translate-tc:hover,
#index-title-translate-en:hover{
    color: #AA8350;
}

#index-title-page{
    position: absolute;
    left: calc(50% - 255px);
    top: 101px;
    height: 20px;
    width: 510px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 1px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
}

.index-title-page-btn{
    color: black;
    transition: color 0.1s;
}

.index-title-page-btn:hover{
    color: #AA8350;
}


#index-title-page-home{
    position: absolute;
    width: 30px;
    height: 20px;
    left: 0px;
    cursor: pointer;
}

#index-title-page-about{
    position: absolute;
    width: 60px;
    height: 20px;
    left: 60px;
    cursor: pointer;
}

#index-title-page-service{
    position: absolute;
    width: 30px;
    height: 20px;
    left: 150px;
    cursor: pointer;
}

#index-title-page-professional{
    position: absolute;
    width: 60px;
    height: 20px;
    left: 210px;
    cursor: pointer;
}

#index-title-page-news{
    position: absolute;
    width: 30px;
    height: 20px;
    left: 300px;
    cursor: pointer;
}

#index-title-page-contact{
    position: absolute;
    width: 60px;
    height: 20px;
    left: 360px;
    cursor: pointer;
}

#index-title-page-join{
    position: absolute;
    width: 60px;
    height: 20px;
    left: 450px;
    cursor: pointer;
}

#index-content{
    float: left;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 305px);
    overflow: hidden;
}

.page-top-line{
    float: left;
    margin-left: 40px;
    width: calc(100% - 80px);
    height: 1px;
    background-color: #E7E8EC;
}

.page-second-line{
    float: left;
    margin-left: 40px;
    width: calc(100% - 80px);
    height: 1px;
    background-color: #E7E8EC;
}

#index-title-back-list{
    position: absolute;
    margin-left: 40px;
    margin-top: 128px;
    height: 20px;
    color: #787878;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
}

.index-title-back-btn{
    float: left;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color 0.1s;
}

.index-title-back-btn:hover{
    color: #AA8350;
}

.index-title-arrow{
    float: left;
    width: 25px;
    height: 25px;
    background-image: url(../sources/image/back_arrow.svg);
    background-repeat: no-repeat;
    background-size: auto 35%;
    background-position: 50% 40%;
}

#index-title-mobile-menu{
    height: 0px;
    overflow: hidden;
}

@media only screen and (min-width: 1440px){

    #index-width-controller{
        margin-left: calc(50vw - 720px);
    }

    #index-title-translate{
        right: calc(50vw - 680px);
    }

}

@media only screen and (min-width: 600px){

    .mobile{
        display: none;
    }

}

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


    #index-title{
        width: 100vw;
        height: 13.33vw;
        z-index: 10;
    }

    .index-title-mobile-shadow{
        position: absolute;
        width: 100vw;
        height: 13.33vw;
        top: 0px;
        left: 0px;
        z-index: 2;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);
    }

    #index-title-logo{
        top: -1.07vw;
        left: 30.8%;
        width: 38.4%;
        height: 14.67vw;
        z-index: 3;
    }

    #index-title-mobile-menu-btn{
        position: absolute;
        right: 1%;
        width: 13.33vw;
        height: 13.33vw;
        z-index: 3;
        cursor: pointer;
    }

    .index-title-mobile-menu-btn-box{
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        -webkit-transform: scale(0.34);
        -moz-transform: scale(0.34);
        -ms-transform: scale(0.34);
        -o-transform: scale(0.34);
        transform: scale(0.34);
    }

    .index-title-mobile-menu-btn-line-0{
        position: absolute;
        width: 100%;
        height: 1.6vw;
        background-color: black;
        right: 0%;
        top: 1.07vw;
        transition: width 0.2s;
    }

    .index-title-mobile-menu-btn-line-1,
    .index-title-mobile-menu-btn-line-3{
        position: absolute;
        width: 100%;
        height: 1.6vw;
        background-color: black;
        left: 50%;
        top: 5.87vw;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        transition: 0.2s;
    }

    .index-title-mobile-menu-btn-line-2{
        position: absolute;
        width: 100%;
        height: 1.6vw;
        background-color: black;
        left: 0%;
        bottom: 1.07vw;
        transition: width 0.2s;
    }

    #index-title[menu='1'] .index-title-mobile-menu-btn-line-0,
    #index-title[menu='1'] .index-title-mobile-menu-btn-line-2,
    #index-title[menu='3'] .index-title-mobile-menu-btn-line-0,
    #index-title[menu='3'] .index-title-mobile-menu-btn-line-2{
        width: 0;
    }
    
    #index-title[menu='1'] .index-title-mobile-menu-btn-line-1,
    #index-title[menu='3'] .index-title-mobile-menu-btn-line-1{
        -webkit-transform: translateX(-50%) rotate(45deg);
        transform: translateX(-50%) rotate(45deg);
    }
    
    #index-title[menu='1'] .index-title-mobile-menu-btn-line-3,
    #index-title[menu='3'] .index-title-mobile-menu-btn-line-3{
        -webkit-transform: translateX(-50%) rotate(-45deg);
        transform: translateX(-50%) rotate(-45deg);
    }

    #index-title-mobile-menu{
        width: 100vw;

    }
    
    #index-title-time{
        display: none;
    }

    
    #index-title-phone{
        display: none;
    }
    
    #index-title-translate{
        display: none;
    }

    #index-title-mobile-translate{
        position: absolute;
        left: 1vw;
        width: 13.33vw;
        height: 13.33vw;
        z-index: 3;
        cursor: pointer;
        background-image: url('../sources/image/translate_icon.svg');
        background-size: 42% auto;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    #index-title-page{
        display: none;
    }
    
    #index-content{
        min-height: calc(100vh - 83.33vw);
        height: auto;
        max-height: 100%;
    }

    #index-title[menu='1'] ~ #index-content{
        min-height: 0px;
        max-height: 0px;
        transition: max-height .2s;
        overflow: hidden;
    }

    #index-title[menu='3'] ~ #index-content{
        min-height: 0px;
        max-height: 0px;
        transition: max-height .2s;
        overflow: hidden;
    }
    
    .page-top-line,
    .page-second-line,
    #index-title-back-list{
        display: none;
    }

    #index-title-mobile-tran-menu,
    #index-title-mobile-menu{
        position: absolute;
        z-index: 1;
        width: 100vw;
        top: 13.33vw;
        height: 0px;
        left: 0%;
        background-color: white;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
        opacity: 0;
        transition: opacity .2s;
    }

    #index-title[menu='1'] #index-title-mobile-menu{
        height: calc(100vh - 13.33vw);
        opacity: 1;
    }

    #index-title[menu='3'] #index-title-mobile-tran-menu{
        height: calc(100vh - 13.33vw);
        opacity: 1;
    }

    .index-title-mobile-tran-sc{
        position: absolute;
        left: 16.13vw;
        top: 50%;
        margin-top: -22.665vw;
        width: 67.74vw;
        height: 13.33vw;
        line-height: 12.5vw;
        box-sizing: border-box;
        text-align: center;
        font-size: 3.47vw;
        color: white;
        background-color: #AA8350;
        border: solid 2px #AA8350;
    }

    .index-title-mobile-tran-tc{
        position: absolute;
        left: 16.13vw;
        top: 50%;
        margin-top: -6.665vw;
        width: 67.74vw;
        height: 13.33vw;
        line-height: 12.5vw;
        box-sizing: border-box;
        text-align: center;
        font-size: 3.47vw;
        color: #333333;
        border: solid 2px #999999;
    }

    .index-title-mobile-tran-en{
        position: absolute;
        left: 16.13vw;
        top: 50%;
        margin-top: 9.335vw;
        width: 67.74vw;
        height: 13.33vw;
        line-height: 12.5vw;
        box-sizing: border-box;
        text-align: center;
        font-size: 3.47vw;
        color: #333333;
        border: solid 2px #999999;
    }

    .index-title-mobile-menu-bar{
        position: absolute;
        top: -54px;
        width: 100vw;
        height: 54px;
        line-height: 54px;
        padding-left: 20px;
        font-size: 13px;
        border-bottom: solid 1px #E7E8EC;
        box-sizing: border-box;
        color: black;
        background-color: white;
        cursor: pointer;
        background-image: url(../sources/image/menu-mobile-arrow.svg);
        background-repeat: no-repeat;
        background-position: 94% 50%;
        background-size: 18px 18px;
    }

    .index-title-mobile-menu-bar:hover{
        color: #AA8350;
    }
    

    .index-title-mobile-menu-bar[sort='0']{ transition: top 70ms linear .1s; }
    .index-title-mobile-menu-bar[sort='1']{ transition: top 140ms linear .1s; }
    .index-title-mobile-menu-bar[sort='2']{ transition: top 210ms linear .1s; }
    .index-title-mobile-menu-bar[sort='3']{ transition: top 280ms linear .1s; }
    .index-title-mobile-menu-bar[sort='4']{ transition: top 350ms linear .1s; }
    .index-title-mobile-menu-bar[sort='5']{ transition: top 420ms linear .1s; }
    .index-title-mobile-menu-bar[sort='6']{ transition: top 490ms linear .1s; }

    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='0']{ top: 0px; }
    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='1']{ top: 53px; }
    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='2']{ top: 106px; }
    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='3']{ top: 159px; }
    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='4']{ top: 212px; }
    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='5']{ top: 265px; }
    #index-title[menu='1'] .index-title-mobile-menu-bar[sort='6']{ top: 318px; }

}