@charset "utf-8";
/* CSS Document */
*{
    font-family: 'Arial';
}

/* =========================================================
 * 整頁區塊
 * ========================================================= */
#wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.viewArea{
    width: calc(100% - 3.906vw * 2);
    max-width: calc(1920px - 3.906vw * 2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 3.906vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    .viewArea{
        width: calc(100% - 4.688vw * 2);
        max-width: calc(1920px - 4.688vw * 2);
        padding: 0px 4.688vw;
    }
}
.page{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px){
    .page{
        min-height: calc(100% - 80px - 5px - 170px);
    }
}
.hidden{
    width: 1px;
    height: 1px;
    padding: 1px 0px 0px 1px;
    position: fixed;
    top: -1px;
    left: -1px;
    overflow: hidden;
}

@keyframes animationLeft{
    0%      { opacity: 0; left: -50vw; }
    100%    { opacity: 1; left: 0px; }
}
@keyframes animationRight{
    0%      { opacity: 0; right: -50vw; }
    100%    { opacity: 1; right: 0px; }
}

/* =========================================================
 * Header 區塊
 * ========================================================= */
#wrap>header{
    width: 100%;
    height: 5.371vw;
    background: #000000;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header{
        height: 14.0625vw;
    }
}
#wrap>header>.viewArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea{
        align-items: flex-start;
    }
}

/* left */
#wrap>header>.left{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
#wrap>header>.viewArea>.left h2{
    width: 7.51vw;
    height: 2.232vw;
    background: url(/images/ysnLogo_white.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.left h2{
        width: 15.8344vw;
        height: 4.6875vw;
    }
}
#wrap>header>.viewArea>.left h2>a{
    width: 100%;
    height: 100%;
    color: transparent;
    font-size: 1px;
    text-align: center;
    display: block;
}

/* right */
#wrap>header>.viewArea>.right{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    /*margin: 0px 0px 0px 30vw;*/
    margin: 0px 0px 0px 0px;
    position: static;
}
#wrap>header.show>.viewArea>.right{
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header.show>.viewArea>.right{
        position: static;
    }
}
#wrap>header>.viewArea>.right>#mainMenu{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.right>#mainMenu{
        width: auto;
        height: calc(100vh - 7vh - 4.688vw);
        background: rgba(29, 45, 90, 0.9);
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 7vh 4.688vw 4.688vw 4.688vw;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    #wrap>header.show>.viewArea>.right>#mainMenu{
        display: flex;
    }
}
#wrap>header>.viewArea>.right>#mainMenu>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.right>#mainMenu>ul{
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li{
    margin: 0px 3.125vw 0px 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.right>#mainMenu>ul>li{
        min-height: 6.25vw;
        /*
        background: linear-gradient(
            120deg,
            rgba(255, 63, 180, 1) 3.4vw,
            transparent 3.4vw
        );
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        */
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        margin: 0px 0px 4.688vw 0px;
        padding: 0px 0px 0px 3.75vw;
        position: relative;
    }
    #wrap>header>.viewArea>.right>#mainMenu>ul>li:before{
        content: '';
        width: 4.119vw;
        height: 6.992vw;
        background: linear-gradient(
            120deg,
            rgba(255, 63, 180, 1) 44.999%,
            transparent 45%
        );
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        position: absolute;
        top: 0px;
        left: 0px;
    }
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li:last-child{
    margin: 0px;
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li>a,
#wrap>header>.viewArea>.right>#mainMenu>ul>li>h3{
    width: 100%;
    color: #FFFFFF;
    font-size: 1.172vw;
    font-weight: normal;
    font-style: italic;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.right>#mainMenu>ul>li>a,
    #wrap>header>.viewArea>.right>#mainMenu>ul>li>h3{
        font-size: 3.75vw;
        font-weight: bold;
        text-align: left;
        line-height: 6.25vw;
    }
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li.current>a,
#wrap>header>.viewArea>.right>#mainMenu>ul>li.current>h3{
    color: rgba(255, 63, 180, 1);
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li:hover a,
#wrap>header>.viewArea>.right>#mainMenu>ul>li:hover>h3{
    transform: scale(1.1);
    transition: transform 0.5s;
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li>ul{
    background: rgba(0, 28, 113, 0.7);
    display: none;
    padding: 0.6836vw 1.172vw;
    position: absolute;
    top: calc(100% + 1.7vw);
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.right>#mainMenu>ul>li>ul{
        background: none;
        list-style-type: disc;
        color: #FFFFFF;
        /*display: flex;*/
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 4.688vw 0px 0px 3.75vw;
        position: static;
        top: 0px;
        left: 0px;
        transform: none;
    }
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li>ul>li{
    margin: 0.586vw 0px;
}
#wrap>header>.viewArea>.right>#mainMenu>ul>li>ul>li>a{
    color: #FFFFFF;
    font-size: 1.172vw;
    font-weight: normal;
    font-style: normal;
    text-align: left;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.right>#mainMenu>ul>li>ul>li>a{
        font-size: 3.75vw;
        text-align: left;
    }
}

#wrap>header>.viewArea>.right>#mainMenu>section.buttonArea{
    width: calc(100% - 3.75vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 0px 0px 3.75vw;
}
#wrap>header>.viewArea>.right>#mainMenu>section.buttonArea>a{
    margin: 2vw 0px;
}
#wrap>header>.viewArea>.right>#mainMenu>section.buttonArea img{
    max-width: 4vh;
    max-height: 4vh;
}

#wrap>header>.viewArea>.menuIcon{
    display: none;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>header>.viewArea>.menuIcon{
        width: 4.6875vw;
        height: 4.6875vw;
        background: url(/images/menuIcon.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        border: 0px;
        display: flex;
        position: absolute;
        top: 4.688vw;
        right: 4.688vw;
    }
    #wrap>header.show>.viewArea>.menuIcon{
        background: url(/images/menuCloseIcon.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

/* =========================================================
 * 頁面 區塊
 * ========================================================= */
#wrap>.page{
    width: 100%;
    min-height: calc(100vh - 100px - 4px - 50px - 130px - 60px);
    position: relative;
}

/* =========================================================
 * 首頁
 * ========================================================= */
html.index #wrap header{
    background: none;
}
html.index #wrap header .left h2{
    width: 8.002vw;
    height: 2.325vw;
    background: url(/images/ysnLogo.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    html.index #wrap header .left h2{
        width: 19.36vw;
        height: 5.625vw;
    }
}
html.index #wrap header .right{
    display: none;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    html.index #wrap header .right{
        display: flex;
    }
}
#wrap>.index{
    width: 100%;
    height: 100vh;
    background: url(/images/indexBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top 35% center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.index{
        background-size: auto 115%;
        background-position: top 20% left 53%;
    }
}
#wrap>.index>.viewArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
#wrap>.index>.viewArea>.mainArea{
    width: 36.133vw;
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
@media screen and (max-width: 820px){
    #wrap>.index>.viewArea>.mainArea{
        width: 50vw;
    }
}
#wrap>.index>.viewArea>.mainArea>h1{
    max-width: 50vw;
    opacity: 0;
    font-size: 4.883vw;
    font-weight: bold;
    text-align: right;
    /*text-shadow: 2px 2px 8px #000000;*/
    position: relative;
    right: -50vw;
    animation: 0.5s linear 0s normal forwards 1 animationRight;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.index>.viewArea>.mainArea>h1{
        max-width: none;
        font-size: 9.375vw;
    }
}

#wrap>.index>.viewArea>.mainArea>h2{
    background: linear-gradient(
        120deg,
        transparent 9.14%,
        rgba(255, 63, 180, 1) 1.465vw
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    color: #001C71;
    font-size: 2.441vw;
    font-weight: normal;
    text-align: right;
    padding: 0px 1.465vw 0px calc(1.465vw * 2);
    position: relative;
    right: -50vw;
    animation: 0.5s linear 0s normal forwards 1 animationRight;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.index>.viewArea>.mainArea>h2{
        font-size: 4.063vw;
    }
}
#wrap>.index>.viewArea>.mainArea>ul{
    border-left: 0.523vw solid rgba(255, 63, 180, 1);
    opacity: 0;
    font-size: 1.465vw;
    font-weight: normal;
    text-align: left;
    /*text-shadow: 1px 1px 4px #000000;*/
    margin: 13vh 0px 0px 0px;
    padding: 0px 0.976vw;
    position: relative;
    right: -50vw;
    animation: 0.5s linear 1s normal forwards 1 animationRight;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.index>.viewArea>.mainArea>ul{
        font-size: 3.75vw;
        margin: 50vh 0px 0px 0px;
        padding: 0px 3vw;
    }
}
#wrap>.index>.viewArea>.mainArea>ul>li{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}

#wrap>.index>.viewArea>.menuArea{
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -50vw;
    animation: 0.5s linear 0.5s normal forwards 1 animationLeft;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.index>.viewArea>.menuArea{
        display: none;
    }
}

#wrap>.index>.viewArea>.menuArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.index>.viewArea>.menuArea>ul>li{
    height: 2.93vw;
    background: linear-gradient(
        120deg,
        rgba(255, 63, 180, 1) 1.465vw,
        transparent 9.14%
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0px 0px 0px 1.465vw;
    position: relative;
}
#wrap>.index>.viewArea>.menuArea>ul>li.company{
    margin: 0px 0px 4.883vh 18.555vw;
}
#wrap>.index>.viewArea>.menuArea>ul>li.brand{
    margin: 0px 0px 2.441vh 30.762vw;
}
#wrap>.index>.viewArea>.menuArea>ul>li.competencies{
    margin: 0px 0px 13.672vh 4.883vw;
}
#wrap>.index>.viewArea>.menuArea>ul>li.exhibition{
    margin: 0px 0px 1.465vh 18.555vw;
}
#wrap>.index>.viewArea>.menuArea>ul>li.products{
    margin: 0px 0px 6.348vh 0px;
}
#wrap>.index>.viewArea>.menuArea>ul>li.capability{
    margin: 0px 0px 7.813vh 14.16vw;
}
#wrap>.index>.viewArea>.menuArea>ul>li.contact{
    margin: 0px 0px 7vh 4.883vw;
}
#wrap>.index>.viewArea>.menuArea>ul>li>a,
#wrap>.index>.viewArea>.menuArea>ul>li>h3{
    color: #FFFFFF;
    font-size: 1.465vw;
    font-weight: normal;
    font-style: italic;
    text-align: left;
    text-shadow: 1px 1px 4px #000000;
    cursor: pointer;
}
#wrap>.index>.viewArea>.menuArea>ul>li>a:hover,
#wrap>.index>.viewArea>.menuArea>ul>li>h3:hover{
    transform: scale(1.05);
    transition: transform 0.5s;
}
#wrap>.index>.viewArea>.menuArea>ul>li>ul{
    background: rgba(0, 28, 113, 0.6);
    display: none;
    padding: 0.6836vw 1.172vw;
    position: absolute;
    top: 100%;
    left: 0.586vw;
    z-index: 20;
}
#wrap>.index>.viewArea>.menuArea>ul>li>ul>li{
    margin: 0.586vw 0px;
}
#wrap>.index>.viewArea>.menuArea>ul>li>ul>li>a{
    color: #FFFFFF;
    font-size: 1.172vw;
    font-weight: normal;
    font-style: normal;
    text-align: left;
}

/* =========================================================
 * company
 * ========================================================= */
#wrap>.company>.mainArea{
    width: 100%;
    background-color: #000000;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.company>.mainArea>img.background{
    max-width: 100%;
}
#wrap>.company>.mainArea>.viewArea{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.company>.mainArea>.viewArea>h2{
    opacity: 0;
    color: #FFFFFF;
    font-size: 6.590vw;
    margin: 9vw 0px 0px 0px;
    position: relative;
    top: -5%;
    animation: 3s linear 0s normal forwards 1 animationCompanyH2;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.mainArea>.viewArea>.description{
        font-size: 5vw;
    }
}
@keyframes animationCompanyH2{
    0%  { opacity: 0; top: -5%; }
    30% { opacity: 0.5; top: 0; }
    100%{ opacity: 1; top: 0;}
}
#wrap>.company>.mainArea>.viewArea>.description{
    opacity: 0;
    color: #FFFFFF;
    font-size: 1.465vw;
    position: absolute;
    left: calc(3.906vw + 4.883vw);
    bottom: 3.906vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.mainArea>.viewArea>.description{
        font-size: 3.75vw;
        /*left: calc(1vw + 5.5vw + 1vw);*/
        left: auto;
    }
}
#wrap>.company>.mainArea>.viewArea>.description.show{
    animation: 0.5s linear 0s normal forwards 1 animationCompanyDescription_1;
}
@keyframes animationCompanyDescription_1{
    0%  { opacity: 0; left: -5vw; }
    100%{ opacity: 1; left: calc(3.906vw + 4.883vw); }
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    @keyframes animationCompanyDescription_1{
        0%  { opacity: 0; left: -5vw; }
        100%{ opacity: 1; calc(1vw + 5.5vw + 1vw); }
    }
}
#wrap>.company>.mainArea>.viewArea>.description:before{
    content: '';
    width: 3.711vw;
    height: 100%;
    background: url(/images/companyBrackets.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 0px;
    left: -4.883vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.mainArea>.viewArea>.description:before{
        width: 5.5vw;
        left: calc(-5.5vw - 1vw)
    }
}
#wrap>.company>.mainArea>.viewArea>.description:after{
    content: '';
    opacity: 0;
    width: 3.711vw;
    height: 100%;
    background: url(/images/companyBrackets.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 0px;
    right: -4.883vw;
    transform: rotate(180deg);
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.mainArea>.viewArea>.description:after{
        width: 5.5vw;
        right: calc(-5.5vw - 1vw)
    }
}
#wrap>.company>.mainArea>.viewArea>.description.show:after{
    animation: 0.5s linear 1s normal forwards 1 animationCompanyDescription_2;
}
@keyframes animationCompanyDescription_2{
    0%  { opacity: 0; right: -9vw; }
    100%{ opacity: 1; right: -4.883vw; }
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    @keyframes animationCompanyDescription_2{
        0%  { opacity: 0; right: -9vw; }
        100%{ opacity: 1; right: calc(-5.5vw - 1vw); }
    }
}
#wrap>.company>.mainArea>.viewArea>.description>h3{
    opacity: 0;
    font-size: 2.930vw;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.mainArea>.viewArea>.description>h3{
        font-size: 4.688vw;
    }
}
#wrap>.company>.mainArea>.viewArea>.description.show>h3{
    animation: 0.5s linear 0.5s normal forwards 1 animationCompanyDescription_3;
}
#wrap>.company>.mainArea>.viewArea>.description>p{
    opacity: 0;
    position: relative;
}
#wrap>.company>.mainArea>.viewArea>.description.show>p{
    animation: 0.5s linear 0.5s normal forwards 1 animationCompanyDescription_3;
}
@keyframes animationCompanyDescription_3{
    0%  { opacity: 0; right: -5vw; }
    100%{ opacity: 1; right: 0px; }
}

#wrap>.company>.aboutCheYuArea>.viewArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3.906vw;
    overflow: hidden;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.aboutCheYuArea>.viewArea{
        width: calc(100% - 3.906vw * 2);
        flex-direction: column;
        justify-content: flex-start;
    }
}
#wrap>.company>.aboutCheYuArea>.viewArea>div{
    width: 48%;
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    top: -20vh;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.aboutCheYuArea>.viewArea>div{
        width: 100%;
        margin: 0px 0px 3.906vw 0px;
    }
}
#wrap>.company>.aboutCheYuArea.show>.viewArea>div{
    animation: 0.6s linear 0s normal forwards 1 animationCompanyAboutCheYuArea;
}
@keyframes animationCompanyAboutCheYuArea{
    0%  { opacity: 0; top: -20vh; }
    100%{ opacity: 1; top: 0px; }
}
#wrap>.company>.aboutCheYuArea>.viewArea>div.imageArea{
    justify-content: center;
    align-items: center;
}
#wrap>.company>.aboutCheYuArea>.viewArea h1{
    font-size: 4.883vw;
    font-weight: bold;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.aboutCheYuArea>.viewArea h1{
        font-size: 5.313vw;
    }
}
#wrap>.company>.aboutCheYuArea>.viewArea p{
    font-size: 1.367vw;
    font-weight: normal;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 3.418vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.aboutCheYuArea>.viewArea p{
        font-size: 3.75vw;
    }
}
#wrap>.company>.aboutCheYuArea>.viewArea img{
    max-width: 100%;
}

#wrap>.company>.productionArea{
    width: 100%;
    height: 100vh;
    background: url(/images/companyBackground_02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.productionArea{
        height: calc((100vw / 1921 * 1236) + (100vw / 320 * 80));
        background: url(/images/companyBackground_02.jpg);
        background-repeat: no-repeat;
        background-size: 92.1875% auto;
        background-position: center top;
    }
}
#wrap>.company>.productionArea p{
    opacity: 0;
    width: 50%;
    color: #FFFFFF;
    font-size: 1.367vw;
    font-weight: normal;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 0px 0px 3.906vw 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.company>.productionArea p{
        width: 100%;
        color: #000000;
        font-size: 3.75vw;
    }
}
#wrap>.company>.productionArea p.show{
    animation: 1s linear 0s normal forwards 1 animationCompanyProductionArea;
}
@keyframes animationCompanyProductionArea{
    0%  { opacity: 0; bottom: -5vh; }
    100%{ opacity: 1; bottom: 0px; }
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    @keyframes animationCompanyProductionArea{
        0%  { opacity: 0; top: -5vh; }
        100%{ opacity: 1; top: 0px; }
    }
}

/* =========================================================
 * brand
 * ========================================================= */
#wrap>.brand>.mainArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.brand>.mainArea>.viewArea{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#wrap>.brand>.mainArea>.viewArea>h1{
    opacity: 0;
    color: #022169;
    font-size: 6.590vw;
    margin: 9vw 0px 2vw 0px;
    position: relative;
    top: -5%;
    animation: 3s linear 0s normal forwards 1 animationBrandH1;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>h1{
        margin: 9vw 0px;
    }
}
@keyframes animationBrandH1{
    0%  { opacity: 0; top: -5%; }
    30% { opacity: 0.5; top: 0; }
    100%{ opacity: 1; top: 0;}
}
#wrap>.brand>.mainArea>.viewArea>.mainPic{
    /*width: 84.338vh;*/
    width: 126.507vh;
    /*height: 42.968vh;*/
    height: 64.452vh;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 11.719vw 0px;
    position: relative;
    animation: 1.5s linear 0s normal forwards 1 animationBrandMainPic;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.mainPic{
        width: 100%;
        height: 50.9474vw;
    }
}
@keyframes animationBrandMainPic{
    0%  { opacity: 0; }
    100%{ opacity: 1; }
}
#wrap>.brand>.mainArea>.viewArea>.mainPic>.brandFireYear{
    width: 88.421vh;
    height: 52.077vh;
    background: url(/images/brandFireYear.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    /*background-size: 691.4px 407.21px;*/
    background-size: calc(88.421vh * 8) 52.077vh;
    position: absolute;
    left: 11.354vh;
    animation: 1.1s linear 0s normal infinite animationBrandFireYear;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.mainPic>.brandFireYear{
        width: 80.131vw;
        height: 47.1945vw;
        background-size: calc(80.131vw * 8) 47.1945vw;
        left: 10.2895vw;
    }
}
@keyframes animationBrandFireYear{
    0%      { background-position: 0px 0px; }
    6.669%  { background-position: 0px 0px; }

    6.67%   { background-position: calc(-1 * 88.421vh) 0px; }
    13.339% { background-position: calc(-1 * 88.421vh) 0px; }

    13.34%  { background-position: calc(-2 * 88.421vh) 0px; }
    20.009% { background-position: calc(-2 * 88.421vh) 0px; }

    20.01%  { background-position: calc(-3 * 88.421vh) 0px; }
    26.679% { background-position: calc(-3 * 88.421vh) 0px; }

    26.68%  { background-position: calc(-4 * 88.421vh) 0px; }
    33.349% { background-position: calc(-4 * 88.421vh) 0px; }

    33.35%  { background-position: calc(-5 * 88.421vh) 0px; }
    40.019% { background-position: calc(-5 * 88.421vh) 0px; }

    40.02%  { background-position: calc(-6 * 88.421vh) 0px; }
    46.689% { background-position: calc(-6 * 88.421vh) 0px; }

    46.69%  { background-position: calc(-7 * 88.421vh) 0px; }
    53.359% { background-position: calc(-7 * 88.421vh) 0px; }

    53.36%  { background-position: calc(-6 * 88.421vh) 0px; }
    60.029% { background-position: calc(-6 * 88.421vh) 0px; }

    60.03%  { background-position: calc(-5 * 88.421vh) 0px; }
    66.699% { background-position: calc(-5 * 88.421vh) 0px; }

    66.7%   { background-position: calc(-4 * 88.421vh) 0px; }
    73.369% { background-position: calc(-4 * 88.421vh) 0px; }

    73.37%  { background-position: calc(-3 * 88.421vh) 0px; }
    80.039% { background-position: calc(-3 * 88.421vh) 0px; }

    80.04%  { background-position: calc(-2 * 88.421vh) 0px; }
    86.709% { background-position: calc(-2 * 88.421vh) 0px; }

    86.71%  { background-position: calc(-1 * 88.421vh) 0px; }
    93.379% { background-position: calc(-1 * 88.421vh) 0px; }

    93.38%  { background-position: 0px 0px; }
    100%  { background-position: 0px 0px; }
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    @keyframes animationBrandFireYear{
        0%      { background-position: 0px 0px; }
        6.669%  { background-position: 0px 0px; }

        6.67%   { background-position: calc(-1 * 80.131vw) 0px; }
        13.339% { background-position: calc(-1 * 80.131vw) 0px; }

        13.34%  { background-position: calc(-2 * 80.131vw) 0px; }
        20.009% { background-position: calc(-2 * 80.131vw) 0px; }

        20.01%  { background-position: calc(-3 * 80.131vw) 0px; }
        26.679% { background-position: calc(-3 * 80.131vw) 0px; }

        26.68%  { background-position: calc(-4 * 80.131vw) 0px; }
        33.349% { background-position: calc(-4 * 80.131vw) 0px; }

        33.35%  { background-position: calc(-5 * 80.131vw) 0px; }
        40.019% { background-position: calc(-5 * 80.131vw) 0px; }

        40.02%  { background-position: calc(-6 * 80.131vw) 0px; }
        46.689% { background-position: calc(-6 * 80.131vw) 0px; }

        46.69%  { background-position: calc(-7 * 80.131vw) 0px; }
        53.359% { background-position: calc(-7 * 80.131vw) 0px; }

        53.36%  { background-position: calc(-6 * 80.131vw) 0px; }
        60.029% { background-position: calc(-6 * 80.131vw) 0px; }

        60.03%  { background-position: calc(-5 * 80.131vw) 0px; }
        66.699% { background-position: calc(-5 * 80.131vw) 0px; }

        66.7%   { background-position: calc(-4 * 80.131vw) 0px; }
        73.369% { background-position: calc(-4 * 80.131vw) 0px; }

        73.37%  { background-position: calc(-3 * 80.131vw) 0px; }
        80.039% { background-position: calc(-3 * 80.131vw) 0px; }

        80.04%  { background-position: calc(-2 * 80.131vw) 0px; }
        86.709% { background-position: calc(-2 * 80.131vw) 0px; }

        86.71%  { background-position: calc(-1 * 80.131vw) 0px; }
        93.379% { background-position: calc(-1 * 80.131vw) 0px; }

        93.38%  { background-position: 0px 0px; }
        100%  { background-position: 0px 0px; }
    }
}
#wrap>.brand>.mainArea>.viewArea>.mainPic img{
    position: absolute;
}
#wrap>.brand>.mainArea>.viewArea>.mainPic img.year1997{
    height: 3.670vh;
    top: 0px;
    left: 40.615vh;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.mainPic img.year1997{
        height: 3.326vw;
        left: 50vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.mainPic img.year2002{
    /*height: 35.813vh;*/
    height: 53.720vh;
    top: 0px;
    left: 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.mainPic img.year2002{
        width: 90.664vw;
        height: auto;
    }
}
#wrap>.brand>.mainArea>.viewArea>.mainPic img.ysn{
    /*height: 8.574vh;*/
    height: 12.861vh;
    bottom: 0px;
    right: 0px;
}
@media screen and (max-width: 1229px){
    #wrap>.brand>.mainArea>.viewArea>.mainPic img.ysn{
        height: 8.574vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content:before{
    content: '';
    width: 100%;
    height: 100%;
    background: url(/images/brandFire.svg), url(/images/brandFlag.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: 80% auto, 80% auto;
    background-position: bottom -4% left -20%, bottom 35% right -90%;
    opacity: 0.2;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}
#wrap>.brand>.mainArea>.viewArea>.content>p{
    font-size: 1.758vw;
    font-weight: normal;
/*
    text-align: justify;
    text-justify: inter-ideograph;
*/
    margin: 1.465vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>p{
        font-size: 3.75vw;
        margin: 2vw 0px;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>p>em{
    font-size: 2.930vw;
    font-weight: bold;
    font-style: normal;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>p>em{
        font-size: 7.8125vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>h2{
    color: #022169;
    font-size: 5.531vw;
    font-weight: bold;
    text-align: left;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>h2{
        font-size: 9.375vw;
        margin: 9vw 0px 2vw 0px;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>h2 img{
    height: 3.872vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>h2 img{
        height: 6.875vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 6.836vw 0px;
}
#wrap>.brand>.mainArea>.viewArea>.content>ul>li{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>ul>li{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>ul>li>h2{
    color: #022169;
    font-size: 5.531vw;
    font-weight: bold;
    text-align: left;
    margin: 0px 2.441vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>ul>li>h2{
        font-size: 9.375vw;
        margin: 9vw 0px 2vw 0px;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>ul>li>h2>em{
    color: rgba(255, 63, 180, 1);
    font-style: normal;
}
#wrap>.brand>.mainArea>.viewArea>.content>ul>li>p{
    font-size: 1.758vw;
    font-weight: normal;
/*
    text-align: justify;
    text-justify: inter-ideograph;
*/
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>ul>li>p{
        font-size: 3.75vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>.brandLogo{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 3.836vw 0px 0px 0px;
}
#wrap>.brand>.mainArea>.viewArea>.content>.brandLogo img{
    width: 24vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>.brandLogo img{
        width: 32vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>.target{
    width: 100%;
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 3vw 0px 6.836vw 0px;
    bottom: -10vh;
}
#wrap>.brand>.mainArea>.viewArea>.content>.target.show{
    animation: 1s linear 0s normal forwards 1 animationBrandTarget;
}
@keyframes animationBrandTarget{
    0%  { opacity: 0; bottom: -10vh; }
    100%{ opacity: 1; bottom: 0px; }
}
#wrap>.brand>.mainArea>.viewArea>.content>.target>p{
    width: calc(100% - 4.883vw * 2);
    color: #022169;
    font-size: 2.148vw;
    font-weight: bold;
    font-style: italic;
    text-align: justify;
    text-justify: inter-ideograph;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.brand>.mainArea>.viewArea>.content>.target>p{
        font-size: 3.75vw;
    }
}
#wrap>.brand>.mainArea>.viewArea>.content>.target>p:before{
    content: '';
    width: 3.711vw;
    height: 100%;
    background: url(/images/brandBrackets.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 0px;
    left: -4.883vw;
}
#wrap>.brand>.mainArea>.viewArea>.content>.target>p:after{
    content: '';
    width: 3.711vw;
    height: 100%;
    background: url(/images/brandBrackets.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 0px;
    right: -4.883vw;
    transform: rotate(180deg);
}

/* =========================================================
 * competencies
 * ========================================================= */
#wrap>.competencies>.mainArea{
    width: 100%;
    background: url(/images/competenciesBackground.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.competencies>.mainArea>.viewArea{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#wrap>.competencies>.mainArea>.viewArea>h1{
    width: 50%;
    min-height: calc(100vh - 5.371vw);
    opacity: 0;
    color: rgba(255, 63, 180, 1);
    font-size: 8vw;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-self: flex-start;
    position: relative;
    left: -50vw;
    animation: 0.5s linear 0s normal forwards 1 animationLeft;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>h1{
        min-height: calc(66.5625vw - 4.688vw * 2 - 4.688vw);
        font-size: 7.8125vw;
        align-items: flex-start;
        padding: 4.688vw 0px;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.items{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 5.371vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.items{
        margin: 0px 0px 5vw 0px;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.items>figcaption{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.competencies>.mainArea>.viewArea>.items>figcaption:after{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(
        35deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.7) 15%,
        transparent 30%
    );
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}
#wrap>.competencies>.mainArea>.viewArea>.items>figcaption>figure{
    opacity: 0;
    color: #FFFFFF;
    font-size: 1.563vw;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0px;
    padding: 2vw 2.93vw;
    position: absolute;
    bottom: 0px;
    left: -50vw;
    z-index: 20;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.items>figcaption>figure{
        font-size: 3.75vw;
        padding: 4.6875vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.items>figcaption>figure.show{
    animation: 0.5s linear 0s normal forwards 1 animationLeft;
}
#wrap>.competencies>.mainArea>.viewArea>.items>figcaption>figure>h2{
    width: 20%;
    font-size: 3.906vw;
    font-weight: bold;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.items>figcaption>figure>h2{
        font-size: 7.8125vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.items img{
    max-width: 100%;
}

#wrap>.competencies>.mainArea>.viewArea>.items>ul{
    width: calc(60% - 2.93vw * 2);
    list-style-type: disc;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 1.953vw 0px;
    padding: 0px 2.93vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.items>ul{
        width: calc(100% - 4.866vw * 2);
        margin: 5vw 0px;
        padding: 0px 4.866vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.items>ul>li{
    font-size: 1.465vw;
    font-weight: normal;
    text-align: left;
    line-height: 2vw;
    margin: 0.977vw 0px 0.977vw 1.6vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.items>ul>li{
        font-size: 3.75vw;
        line-height: 5vw;
        margin: 2.5vw 0px 2.5vw 4.5vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS{
    width: 94.238vw;
    height: 65vh;
    position: relative;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YENS{
        width: 94.238vw;
        height: 67vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS div.Y{
    width: 23.846vh;
    height: 20vh;
    background: url(/images/competenciesYESN_Y.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: calc(23.846vh * 3) 20vh;
    animation: 1s linear 0s normal infinite animationCompetenciesY;
    position: absolute;
    top: 8.655vh;
    left: 0px;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YENS div.Y{
        width: 24.219vw;
        height: 20.313vw;
        background-size: calc(24.219vw * 3) 20.313vw;
        top: 8.79vw;
    }
}
@keyframes animationCompetenciesY{
    0%      { background-position: 0px 0px; }
    19.999% { background-position: 0px 0px; }

    20%     { background-position: calc(-1 * 23.846vh) 0px; }
    39.999% { background-position: calc(-1 * 23.846vh) 0px; }

    40%     { background-position: calc(-2 * 23.846vh) 0px; }
    59.999% { background-position: calc(-2 * 23.846vh) 0px; }

    60%     { background-position: calc(-1 * 23.846vh) 0px; }
    79.999% { background-position: calc(-1 * 23.846vh) 0px; }

    80%     { background-position: 0px 0px; }
    100%    { background-position: 0px 0px; }
}
@media screen and (orientation: portrait){
    @keyframes animationCompetenciesY{
        0%      { background-position: 0px 0px; }
        19.999% { background-position: 0px 0px; }

        20%     { background-position: calc(-1 * 24.219vw) 0px; }
        39.999% { background-position: calc(-1 * 24.219vw) 0px; }

        40%     { background-position: calc(-2 * 24.219vw) 0px; }
        59.999% { background-position: calc(-2 * 24.219vw) 0px; }

        60%     { background-position: calc(-1 * 24.219vw) 0px; }
        79.999% { background-position: calc(-1 * 24.219vw) 0px; }

        80%     { background-position: 0px 0px; }
        100%    { background-position: 0px 0px; }
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS div.E{
    width: 26.826vh;
    height: 16.635vh;
    background: url(/images/competenciesYESN_E.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: calc(26.826vh * 3) 16.635vh;
    animation: 1s linear 0s normal infinite animationCompetenciesE;
    position: absolute;
    top: 10.192vh;
    left: 22.595vh;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YENS div.E{
        width: 27.246vw;
        height: 16.895vw;
        background-size: calc(27.246vw * 3) 16.895vw;
        top: 10.352vw;
        left: 22.949vw;
    }
}
@keyframes animationCompetenciesE{
    0%      { background-position: 0px 0px; }
    19.999% { background-position: 0px 0px; }

    20%     { background-position: calc(-1 * 26.826vh) 0px; }
    39.999% { background-position: calc(-1 * 26.826vh) 0px; }

    40%     { background-position: calc(-2 * 26.826vh) 0px; }
    59.999% { background-position: calc(-2 * 26.826vh) 0px; }

    60%     { background-position: calc(-1 * 26.826vh) 0px; }
    79.999% { background-position: calc(-1 * 26.826vh) 0px; }

    80%     { background-position: 0px 0px; }
    100%    { background-position: 0px 0px; }
}
@media screen and (orientation: portrait){
    @keyframes animationCompetenciesE{
        0%      { background-position: 0px 0px; }
        19.999% { background-position: 0px 0px; }

        20%     { background-position: calc(-1 * 27.246vw) 0px; }
        39.999% { background-position: calc(-1 * 27.246vw) 0px; }

        40%     { background-position: calc(-2 * 27.246vw) 0px; }
        59.999% { background-position: calc(-2 * 27.246vw) 0px; }

        60%     { background-position: calc(-1 * 27.246vw) 0px; }
        79.999% { background-position: calc(-1 * 27.246vw) 0px; }

        80%     { background-position: 0px 0px; }
        100%    { background-position: 0px 0px; }
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS.show div.E{
    opacity: 0.1;
    animation: 2s linear 0s normal forwards 1 animationCompetenciesEShow, 1s linear 0s normal infinite animationCompetenciesE;
    /*
    top: 0px;
    left: auto;
    right: 0px;
    */
}
@keyframes animationCompetenciesEShow{
    0%      { opacity: 1; top: 10.192vh; left: 22.595vh; }
    100%    { opacity: 0.1; top: 0px; left: calc(100% - 26.826vh); }
}
@media screen and (orientation: portrait){
    @keyframes animationCompetenciesEShow{
        0%      { opacity: 1; top: 10.192vh; left: 22.595vh; }
        100%    { opacity: 0.1; top: 0px; left: calc(100% - 27.246vw); }
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS div.N{
    width: 31.442vh;
    height: 19.423vh;
    background: url(/images/competenciesYESN_N.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: calc(31.442vh * 3) 19.423vh;
    opacity: 0.1;
    animation: 1s linear 0s normal infinite animationCompetenciesN;
    position: absolute;
    top: 0px;
    right: 0px;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YENS div.N{
        width: 31.934vw;
        height: 19.727vw;
        background-size: calc(31.934vw * 3) 19.727vw;
    }
}
@keyframes animationCompetenciesN{
    0%      { background-position: 0px 0px; }
    19.999% { background-position: 0px 0px; }

    20%     { background-position: calc(-1 * 31.442vh) 0px; }
    39.999% { background-position: calc(-1 * 31.442vh) 0px; }

    40%     { background-position: calc(-2 * 31.442vh) 0px; }
    59.999% { background-position: calc(-2 * 31.442vh) 0px; }

    60%     { background-position: calc(-1 * 31.442vh) 0px; }
    79.999% { background-position: calc(-1 * 31.442vh) 0px; }

    80%     { background-position: 0px 0px; }
    100%    { background-position: 0px 0px; }
}
@media screen and (orientation: portrait){
    @keyframes animationCompetenciesN{
        0%      { background-position: 0px 0px; }
        19.999% { background-position: 0px 0px; }

        20%     { background-position: calc(-1 * 31.934vw) 0px; }
        39.999% { background-position: calc(-1 * 31.934vw) 0px; }

        40%     { background-position: calc(-2 * 31.934vw) 0px; }
        59.999% { background-position: calc(-2 * 31.934vw) 0px; }

        60%     { background-position: calc(-1 * 31.934vw) 0px; }
        79.999% { background-position: calc(-1 * 31.934vw) 0px; }

        80%     { background-position: 0px 0px; }
        100%    { background-position: 0px 0px; }
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS.show div.N{
    opacity: 1;
/*
    top: 7.877vh;
    left: 22.595vh;
    right: auto;
*/
    animation: 2s linear 0s normal forwards 1 animationCompetenciesNShow, 1s linear 0s normal infinite animationCompetenciesN;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YENS.show div.N{
/*
        top: 8vw;
        left: 22.949vw;
*/
    }
}
@keyframes animationCompetenciesNShow{
    0%      { opacity: 0.1; top: 0px; left: calc(100% - 31.442vh); }
    100%    { opacity: 1; top: 46.249vh; left: 13.784vh; }
/*
    0%      { top: 7.877vh; left: 22.595vh; right: auto; }
    25%     { top: 17.470vh; left: 24.098vh; right: auto; }
    50%     { top: 27.063vh; left: 25.600vh; right: auto; }
    75%     { top: 36.656vh; left: 19.692vh; right: auto; }
    100%    { top: 46.249vh; left: 13.784vh; right: auto; }
*/
}
@media screen and (orientation: portrait){
    @keyframes animationCompetenciesNShow{
        0%      { opacity: 0.1; top: 0px; left: calc(100% - 31.934vw); }
        100%    { opacity: 1; top: 46.973vw; left: 14vw; }
/*
        0%      { top: 8vw; left: 22.949vw; right: auto; }
        25%     { top: 17.743vw; left: 24.475vw; right: auto; }
        50%     { top: 27.486vw; left: 26vw; right: auto; }
        75%     { top: 37.230vw; left: 20vw; right: auto; }
        100%    { top: 46.973vw; left: 14vw; right: auto; }
*/
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YENS div.S{
    width: 42.884vh;
    height: 18.846vh;
    background: url(/images/competenciesYESN_S.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: calc(42.884vh * 3) 18.846vh;
    animation: 1s linear 0s normal infinite animationCompetenciesS;
    position: absolute;
    top: 27.403vh;
    left: 0px;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YENS div.S{
        width: 43.555vw;
        height: 19.141vw;
        background-size: calc(43.555vw * 3) 19.141vw;
        top: 27.832vw;
    }
}
@keyframes animationCompetenciesS{
    0%      { background-position: 0px 0px; }
    19.999% { background-position: 0px 0px; }

    20%     { background-position: calc(-1 * 42.884vh) 0px; }
    39.999% { background-position: calc(-1 * 42.884vh) 0px; }

    40%     { background-position: calc(-2 * 42.884vh) 0px; }
    59.999% { background-position: calc(-2 * 42.884vh) 0px; }

    60%     { background-position: calc(-1 * 42.884vh) 0px; }
    79.999% { background-position: calc(-1 * 42.884vh) 0px; }

    80%     { background-position: 0px 0px; }
    100%    { background-position: 0px 0px; }
}
@media screen and (orientation: portrait){
    @keyframes animationCompetenciesS{
        0%      { background-position: 0px 0px; }
        19.999% { background-position: 0px 0px; }

        20%     { background-position: calc(-1 * 43.555vw) 0px; }
        39.999% { background-position: calc(-1 * 43.555vw) 0px; }

        40%     { background-position: calc(-2 * 43.555vw) 0px; }
        59.999% { background-position: calc(-2 * 43.555vw) 0px; }

        60%     { background-position: calc(-1 * 43.555vw) 0px; }
        79.999% { background-position: calc(-1 * 43.555vw) 0px; }

        80%     { background-position: 0px 0px; }
        100%    { background-position: 0px 0px; }
    }
}

#wrap>.competencies>.mainArea>.viewArea>.YESYSN{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin: 0px 0px 0px 0px;
    position: relative;
    bottom: 5vh;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YESYSN{
        bottom: 7.235vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YESYSN img{
    height: 7.348vh;
    opacity: 0;
    position: relative;
    bottom: -10vh;
}
@media screen and (orientation: portrait){
    #wrap>.competencies>.mainArea>.viewArea>.YESYSN img{
        height: 7.235vw;
    }
}
#wrap>.competencies>.mainArea>.viewArea>.YESYSN img.show{
    animation: 1s linear 0s normal forwards 1 animationCompetenciesYESYSN;
}
@keyframes animationCompetenciesYESYSN{
    0%      { opacity: 0; bottom: -10vh; }
    100%    { opacity: 1; bottom: 0px; }
}

/* =========================================================
 * exhibition
 * ========================================================= */
#wrap>.exhibition>.mainArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.exhibition>.mainArea>.headerArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
#wrap>.exhibition>.mainArea>.headerArea>img{
    width: 100%;
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea{
        margin: 0px;
    }
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>input[type='button']{
    width: 1.8vw;
    height: 1.8vw;
    background-color: transparent;
    background: url(/images/exhibitionDirectButtonLeft.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    color: transparent;
    overflow: hidden;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>input[type='button']{
        width: 2.43vw;
        height: 4.688vw;
    }
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>input[type='button']:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>input[type='button'].next{
    background-color: transparent;
    background: url(/images/exhibitionDirectButtonRight.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>input[type='button'].next:hover{
    transform: scale(1.1);
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block{
    width: 28.309vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 1.465vw;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block{
        width: 40vw;
        height: 4.688vw;
    }
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul{
        height: 4.688vw;
    }
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul>li{
    display: flex;
    margin: 0px 1.465vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul>li{
        height: 4.688vw;
    }
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul>li:last-child{
    margin: 0px;
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul>li a{
    color: #4D4D4D;
    font-size: 1.367vw;
    font-weight: bold;
    line-height: 1.8vw;
}
#wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul>li.current a{
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        rgba(218, 75, 149, 1) 0%,
        rgba(218, 75, 149, 1) 16.4%,
        rgba(101, 48, 104, 1) 61.36%,
        rgba(27, 44, 86, 1) 84.55%,
        rgba(27, 44, 86, 1) 100%
    );
    -webkit-border-radius: 0.9vw;
    -moz-border-radius: 0.9vw;
    border-radius: 0.9vw;
    padding: 0px 1vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.headerArea>.viewArea>.yearArea>.block>ul>li a{
        font-size: 3.75vw;
        line-height: 4.688vw;
    }
}

#wrap>.exhibition>.mainArea>.exhibitionArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 6vw 0px;
}
#wrap>.exhibition>.mainArea>.exhibitionArea>.viewArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex=start;
    align-items: center;
}
#wrap>.exhibition>.mainArea>.exhibitionArea .years{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    margin: 4.883vw 0px 4.395vw 0px;
}
#wrap>.exhibition>.mainArea>.exhibitionArea .years:after{
    content: '';
    height: 0.464vw;
    background: linear-gradient(
        -90deg,
        rgba(218, 75, 149, 1) 0%,
        rgba(218, 75, 149, 1) 16.4%,
        rgba(101, 48, 104, 1) 61.36%,
        rgba(27, 44, 86, 1) 84.55%,
        rgba(27, 44, 86, 1) 100%
    );
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
}
#wrap>.exhibition>.mainArea>.exhibitionArea .years>h2{
    background: rgba(26, 43, 84, 1);
    color: #FFFFFF;
    font-size: 2.441vw;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0.2vw 6.348vw;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea .years>h2{
        font-size: 3.75vw;
        padding: 1.563vw 3.75vw;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea .years>h2:before{
    content: '';
    width: 100%;
    height: 0.464vw;
    background: rgba(26, 43, 84, 1);
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#wrap>.exhibition>.mainArea>.exhibitionArea .years>h2:after{
    content: '';
    width: 15%;
    height: 100%;
    background: linear-gradient(
        -125deg,
        transparent 48%,
        rgba(26, 43, 84, 1) 48.1%
    );
    position: absolute;
    top: 0px;
    right: -15%;
}
#wrap>.exhibition>.mainArea>.exhibitionArea h2:first-child{
    margin: 0px;
}
#wrap>.exhibition>.mainArea>.exhibitionArea .years>h2>em{
    font-size: 3.516vw;
    font-style: normal;
    margin: 0px 1.465vw 0px 0px;;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea .years>h2>em{
        font-size: 4.688vw;
    }
}

#wrap>.exhibition>.mainArea>.exhibitionArea ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin: 0px 0px 9.766vw 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li{
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
        margin: 0px 0px 21.875vw 0px;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li.expired{
    opacity: 0.15;
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.leftArea{
    width: 32.715vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 8.301vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.leftArea{
        width: 100%;
        margin: 0px 0px 8.301vw 0px;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.leftArea>.pic{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.leftArea img{
    max-width: 100%;
    margin: 0px 0px 2.44vw 0px;
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.leftArea .description{
    font-size: 1.367vw;
    font-weight: normal;
    text-align: justify;
    text-justify: inter-ideograph;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.leftArea .description{
        font-size: 3.75vw;
    }
}

#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-end;
    align-items: flex-start;
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.logo{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.logo{
        width: 100%;
        justify-content: center;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.logo img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title{
    color: #000000;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0.977vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title{
        width: 100%;
        margin: 3.125vw 0px 0px 0px;
        padding: 0px 0px 3.125vw 0px;
        position: relative;
    }
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title:after{
        content: '';
        width: 100%;
        height: 0.464vw;
        background: linear-gradient(
            -90deg,
            rgba(218, 75, 149, 1) 0%,
            rgba(218, 75, 149, 1) 16.4%,
            rgba(101, 48, 104, 1) 61.36%,
            rgba(27, 44, 86, 1) 84.55%,
            rgba(27, 44, 86, 1) 100%
        );
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title>.date{
    color: rgba(218, 75, 149, 1);
    font-size: 1.855vw;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 1.367vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title>.date{
        font-size: 3.75vw;
        margin: 0px 1.563vw 0px 0px;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title>.date>em{
    font-size: 3.762vw;
    font-weight: bold;
    font-style: normal;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title>.date>em{
        font-size: 5.628vw;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title>h3{
    font-size: 3.223vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.title>h3{
        font-size: 5.625vw;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.address{
    color: #000000;
    font-size: 1.465vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0.977vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.address{
        font-size: 3.75vw;
        margin: 3.125vw 0px 0px 0px;
    }
}

#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.boothNumber{
    color: #000000;
    font-size: 1.953vw;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0.977vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.boothNumber{
        width: 100%;
        font-size: 5.625vw;
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.boothNumber>label{
    background: linear-gradient(
        90deg,
        rgba(218, 75, 149, 1) 0%,
        rgba(218, 75, 149, 1) 16.4%,
        rgba(101, 48, 104, 1) 61.36%,
        rgba(27, 44, 86, 1) 84.55%,
        rgba(27, 44, 86, 1) 100%
    );
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    border-radius: 2vw;
    color: #FFFFFF;
    font-size: 1.172vw;
    padding: 0.5vw 1.953vw;
    margin: 0px 1.367vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.exhibition>.mainArea>.exhibitionArea ul>li>.rightArea>.boothNumber>label{
        -webkit-border-radius: 3vw;
        -moz-border-radius: 3vw;
        border-radius: 3vw;
        font-size: 3.75vw;
        margin: 0px 3.125vw 0px 0px;
        padding: 0.8vw 4.688vw;
    }
}

/* =========================================================
 * capability
 * ========================================================= */
#wrap>.capability>.mainArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.capability>.mainArea:before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: url(/images/capabilityBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.12;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
#wrap>.capability>.mainArea:after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
#wrap>.capability>.mainArea>.viewArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
}
#wrap>.capability>.mainArea>.viewArea>h1{
    font-size: 4.883vw;
    font-weight: bold;
    margin: 9.766vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>h1{
        font-size: 7.813vw;
        margin: 14.063vw 0px 0px 0px;
    }
}
#wrap>.capability>.mainArea>.viewArea>h2{
    font-size: 2.441vw;
    font-weight: normal;
    margin: 0px 0px 4.883vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>h2{
        font-size: 3.75vw;
        margin: 0px 0px 9.375vw 0px;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0px 0px 9.766vw 0px;
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button']{
    width: 2.422vw;
    height: 4.673vw;
    background-color: transparent;
    background: url(/images/exhibitionDirectButton.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    color: transparent;
    overflow: hidden;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button']{
        width: 5.507vw;
        height: 10.625vw;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button']:hover{
    transform: scale(1.05);
    transition: transform 0.5s;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button'].prev{
        margin: 0px 0px 0px 6.25vw;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button'].next{
    transform: rotate(180deg);
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button'].next{
        margin: 0px 6.25vw 0px 0px;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>input[type='button'].next:hover{
    transform: scale(1.05) rotate(180deg);
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block{
    width: 77.931vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block{
        width: 66.875vw;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li{
    width: 25.977vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li{
        width: 66.875vw;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea{
    width: 100%;
    height: 25.391vw;
    border-bottom: 1px solid #000000;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea{
        height: 66.875vw;
        padding: 0px 0px 6.992vw 0px;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea:after{
    content: '';
    width: 1.362vw;
    height: 2.312vw;
    background: linear-gradient(
        120deg,
        rgba(255, 63, 180, 1) 44.999%,
        transparent 45%
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea:after{
        width: 4.119vw;
        height: 6.992vw;
        bottom: -1px;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea>img{
    width: 80%;
    height: 80%;
    object-fit: scale-down;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea>img{
        width: 90%;
        height: 90%;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.imgArea>img:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea{
    width: calc(100% - 20% * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 3.906vw 20%;
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>h3{
    width: 100%;
    font-size: 1.953vw;
    font-weight: normal;
    text-align: center;
    margin: 0px 0px 1.465vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>h3{
        font-size: 5vw;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>p{
    font-size: 1.172vw;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>p{
        font-size: 3.75vw;
    }
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>p>a{
    color: #000000;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    display: block;
    margin: 1vw 0px 0px 0px;
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>p>a:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}
#wrap>.capability>.mainArea>.viewArea>.capabilityArea>.block>ul>li>.infoArea>ul{
    display: none;
}

#wrap>.capability>.slider{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 998;
}
#wrap>.capability>.slider img{
    max-width: 90%;
    max-height: 85%;
    cursor: pointer;
}
#wrap>.capability>.slider>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
#wrap>.capability>.slider>ul>input[type="button"]{
    width: 17.508px;
    height: 23.404px;
    background: url(/images/iconArrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    border: 0px;
    color: transparent;
    margin: 0px 2.418vw;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
}
#wrap>.capability>.slider>ul>input[type="button"]:hover{
    transform: scale(1.05);
    transition: transform 0.3s;
}
#wrap>.capability>.slider>ul>input[type="button"].next{
    transform: rotate(180deg);
}
#wrap>.capability>.slider>ul>input[type="button"].next:hover{
    transform: scale(1.05) rotate(180deg);
    transition: transform 0.3s;
}
#wrap>.capability>.slider>ul>li{
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: transparent;
    margin: 0px 2px;
    overflow: hidden;
    cursor: pointer;
}
#wrap>.capability>.slider>ul>li.current{
    background: #FFFFFF;
}

/* =========================================================
 * products
 * ========================================================= */
#wrap>.products>.mainArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.products>.mainArea>.titleArea{
    width: 100%;
    height: calc(100vw / 1024 * 455);
    background: url(/images/productsBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>.titleArea{
        height: calc(100vw / 320 * 200);
    }
}
#wrap>.products>.mainArea>.titleArea>.viewArea{
    width: calc(100% - 3.906vw * 2);
    height: calc(100% - 3.906vw * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 3.906vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>.titleArea>.viewArea{
        width: calc(100% - 4.688vw * 2);
        height: calc(100% - 4.688vw * 2);
        padding: 4.688vw;
    }
}
#wrap>.products>.mainArea>.titleArea>.viewArea>h1{
    color: #FFFFFF;
    font-size: 5.371vw;
    font-weight: bold;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>.titleArea>.viewArea>h1{
        font-size: 9.09vw;
    }
}
#wrap>.products>.mainArea>.titleArea>.viewArea>p{
    color: #FFFFFF;
    width: 25vw;
    font-size: 1.953vw;
    font-weight: normal;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>.titleArea>.viewArea>p{
        width: 50vw;
        font-size: 3.75vw;
    }
}
#wrap>.products>.mainArea>article{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article{
        width: calc(100% - 4.688vw * 2);
        padding: 4.688vw;
    }
}
#wrap>.products>.mainArea>article>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.products>.mainArea>article>ul>li{
    width: calc(100% - 3.906vw);
    min-height: 40vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    margin: 3.906vw 0px;
    padding: 0px 3.906vw 0px 0px;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li{
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 11vw 0px;
        padding: 0px;
    }
}
#wrap>.products>.mainArea>article>ul>li>.picArea{
    height: 100%;
    max-width: 55%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.picArea{
        max-width: 100%;
        opacity: 0.2;
        align-items: flex-end;
    }
}
#wrap>.products>.mainArea>article>ul>li>.picArea img{
    max-width: 100%;
    max-height: 100%;
}
#wrap>.products>.mainArea>article>ul>li>.infoArea{
    width: 39%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
    z-index: 2;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea{
        width: 100%;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0.9766vw 0px 0px;
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.pictures{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0.9766vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.pictures{
        margin: 0px 0px 3vw 0px;
    }
}

#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.pictures>li{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 1vw;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.pictures>li{
        margin: 0px 2vw;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.pictures>li>img{
    height: 11.719vw;
    max-height: 120px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.pictures>li>img{
        height: 25vw;
        max-height: auto;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.titlePic{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0.9766vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.titlePic{
        margin: 0px 0px 3vw 0px;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.titlePic>img{
    height: 5.273vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.titlePic>img{
        height: 15.152vw;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.description{
    width: calc(100% - 1.758vw);
    list-style-type: disc;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 0px 0px 1.758vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.description{
        width: calc(100% - 5.625vw);
        min-height: 100vw;
        justify-content: flex-start;
        padding: 0px 0px 0px 5.625vw;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.description>li{
    font-size: 1.172vw;
    font-weight: normal;
    font-style: normal;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 0px 0px 0.9766vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.leftArea>.description>li{
        font-size: 3.75vw;
        margin: 0px 0px 3vw 0px;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.rightArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: calc(5.273vw + 0.9766vw + 2.3vw) 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>ul>li>.infoArea>.rightArea{
        padding: calc(25vw - 11.719vw) 0px 0px 0px;
    }
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.rightArea img{
    height: 11.719vw;
    max-height: 120px;
    margin: 0px 0px 0.9766vw 0px;
}
#wrap>.products>.mainArea>article>ul>li>.infoArea>.rightArea img:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}
#wrap>.products>.mainArea>article>.download{
    background: rgba(255, 255, 255, 0.8);
    padding: 1vw;
    display: none;
    position: fixed;
    top: calc(5.371vw + 0.9766vw);
    right: calc(3.906vw  + 0.5vw + 15px - 1vw);
    z-index: 3;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.mainArea>article>.download{
        top: calc(14.0625vw + 3vw);
        right: calc(4.688vw + 0.5vw - 1vw);
    }
}
#wrap>.products>.mainArea>article>.download.show{
    display: block;
}
#wrap>.products>.mainArea>article>.download img{
    height: 11.719vw;
    max-height: 120px;
}
#wrap>.products>.mainArea>article>.download img:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}

#wrap>.products>.zoom{
    width: 30vw;
    height: 50vh;
    background: #FFFFFF;
    border: 3px solid #CCCCCC;
    text-align: center;
    padding: 20px; position: fixed;
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
    z-index: 999;
    overflow: hidden;
}

#wrap>.products>.slider{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 998;
}
#wrap>.products>.slider img{
    max-width: 90%;
    max-height: 85%;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.slider img{
        max-height: 80%;
    }
}
#wrap>.products>.slider>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
#wrap>.products>.slider>ul>input[type="button"]{
    width: 17.508px;
    height: 23.404px;
    background: url(/images/iconArrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    border: 0px;
    color: transparent;
    margin: 0px 2.418vw;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
}
#wrap>.products>.slider>ul>input[type="button"]:hover{
    transform: scale(1.05);
    transition: transform 0.3s;
}
#wrap>.products>.slider>ul>input[type="button"].next{
    transform: rotate(180deg);
}
#wrap>.products>.slider>ul>input[type="button"].next:hover{
    transform: scale(1.05) rotate(180deg);
    transition: transform 0.3s;
}
#wrap>.products>.slider>ul>li{
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: transparent;
    margin: 0px 2px;
    overflow: hidden;
    cursor: pointer;
}
#wrap>.products>.slider>ul>li.current{
    background: #FFFFFF;
}

#wrap>.products>.downloadArea{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    /*display: flex;*/
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 998;
}
#wrap>.products>.downloadArea>.viewArea{
    width: 140vh;
    height: 70vh;
    background: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    position: relative;
    padding: 0px;
    margin: 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea{
        width: 90vw;
        height: 80vh;
        flex-direction: column;
    }
}
#wrap>.products>.downloadArea>.viewArea>.imageArea{
    width: calc(50% - 2.5vw * 2);
    height: calc(100% - 2.5vw * 2);
    background: url(/images/productsDownloadBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 2.5vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.imageArea{
        width: calc(100% - 2.5vw * 2);
        height: auto;
        background-size: 140vw auto;
        background-position: left 0px bottom 30%;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
    }
}
#wrap>.products>.downloadArea>.viewArea>.imageArea>ul{
    color: #FFFFFF;
    font-size: 1.8vw;
    font-weight: bold;
    text-shadow: 2px 2px #000000;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.imageArea>ul{
        font-size: 7.5vw;
    }
}
#wrap>.products>.downloadArea>.viewArea>.imageArea>ul>li>em{
    color: #FF3FB4;
    font-style: normal;
}
#wrap>.products>.downloadArea>.viewArea>.formArea{
    width: calc(50% - 5vw * 2);
    height: calc(100% - 2.5vw * 2);
    font-size: 1.172vw;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2.5vw 5vw;
    position: relative;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea{
        width: calc(100% - 5vw * 2);
        height: auto;
        font-size: 3.75vw;
        flex-grow: 0;
        flex-shrink: 0;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>h2{
    color: #000000;
    font-size: 2.441vw;
    font-weight: bold;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>h2{
        font-size: 6.25vw;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>h3{
    color: #FF3FB4;
    font-size: 1.172vw;
    font-weight: normal;
    margin: 0px 0px 2vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>h3{
        font-size: 3.75vw;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div{
    margin: 0px 0px 1vw 0px;
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div>div{
    margin: 0px 0px 0.6vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>div>div{
        margin: 0px 0px 2vw 0px;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div .row{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div .step1{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div .step1:before{
    content: '';
    width: 2vw;
    background: url(/images/productsDownloadStep1.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 1vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>div .step1:before{
        width: 6vw;
        margin: 0px 3vw 0px 0px;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div .step2{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div .step2:before{
    content: '';
    width: 2vw;
    background: url(/images/productsDownloadStep2.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 1vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>div .step2:before{
        width: 6vw;
        margin: 0px 3vw 0px 0px;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div input[type='button']{
    min-width: 13vw;
    background: #000000;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.172vw;
    padding: 0.4vw 1vw;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>div input[type='button']{
        font-size: 3.75vw;
        padding: 1vw 3.125vw;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div label{
    width: 100%;
    display: block;
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div>div>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div input[type='password'],
#wrap>.products>.downloadArea>.viewArea>.formArea>div input[type='text']{
    background: #FFFFFF;
    border: 1px solid #000000;
    font-size: 1.172vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 5px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>div input[type='password'],
    #wrap>.products>.downloadArea>.viewArea>.formArea>div input[type='text']{
        width: 40vw;
        font-size: 3.75vw;
    }
}
#wrap>.products>.downloadArea>.viewArea>.formArea>div #gCodeImg{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 0.5vw;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.formArea>div #gCodeImg{
        margin: 0px 0px 0px 1vw;
    }
}
#wrap>.products>.downloadArea>.viewArea>.close{
    width: 3vw;
    height: 3vw;
    background: url(/images/productsDownloadClose.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 0px;
    color: transparent;
    position: absolute;
    top: 2.5vw;
    right: 2.5vw;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.products>.downloadArea>.viewArea>.close{
        width: 10.3125vw;
        height: 10.3125vw;
        background: url(/images/menuCloseIcon.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

/* =========================================================
 * contact
 * ========================================================= */
#wrap>.contact>.mainArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 5.371vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.contact>.mainArea>img{
    width: 100%;
}
#wrap>.contact>.mainArea>.viewArea{
    flex-direction: column;
    padding: 3.906vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact>.mainArea{
        margin: 14.0625vw 0px 0px 0px;
    }
}
#wrap>.contact>.mainArea>.viewArea>h1{
    font-size: 4.883vw;
    font-weight: bold;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact>.mainArea>.viewArea>h1{
        font-size: 5.567vw;
    }
}

#wrap>.contact .formArea{
    width: 100%;
    color: #000000;
    font-size: 1.563vw;
    font-weight: normal;
    padding: 3.906vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea{
        font-size: 3.75vw;
    }
}
#wrap>.contact .formArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul{
        justify-content: space-around;
    }
}
#wrap>.contact .formArea>ul>li{
    width: 48%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 3.8vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul>li{
        width: auto;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: calc(320px * 0.7);
        margin: 0px 2vw 3.8vw 2vw;
    }
}
#wrap>.contact .formArea>ul>li:before{
    content: '';
    width: 1.172vw;
    height: 1.172vw;
    margin: 0px 1.172vw 0px 0px;
}
#wrap>.contact .formArea>ul>li.require:before{
    background: url(/images/contactRequire.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#wrap>.contact .formArea>ul>li.name,
#wrap>.contact .formArea>ul>li.company{
    margin: 0px 0px 2vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul>li.name{
        margin: 0px 2vw 0px 2vw;
    }
    #wrap>.contact .formArea>ul>li.company{
        margin: 0px 2vw 3.8vw 2vw;
    }
}
#wrap>.contact .formArea>ul>li.subject,
#wrap>.contact .formArea>ul>li.content{
    width: 100%;
}
#wrap>.contact .formArea>ul>li>div.gender{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#wrap>.contact .formArea>ul>li>div.gender>input[type='radio']{
    width: 1.563vw;
    border: 1px solid #000000;
    margin: 0px 0px 0px 2.93vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul>li>div.gender>input[type='radio']{
        width: 3.125vw;
        margin: 0px 0px 0px 6.25vw;
    }
}
#wrap>.contact input[type='text']{
    border: 0px;
    color: #000000;
    border-bottom: 1px solid #656464;
    font-size: 2.148vw;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact input[type='text']{
        font-size: 3.75vw;
    }
}
#wrap>.contact input[type='text']::-webkit-input-placeholder{
    color: #000000;
}
#wrap>.contact input[type='text']:-moz-placeholder{
    color: #000000;
}
#wrap>.contact input[type='text']::-moz-placeholder{
    color: #000000;
}
#wrap>.contact input[type='text']:-ms-input-placeholder{
    color: #000000;
}
#wrap>.contact .formArea>ul>li.content{
    flex-wrap: wrap;
}
#wrap>.contact textarea[id='content']{
    width: calc(100% - 1.172vw * 2 - 1vw * 2);
    height: 22.95vw;
    background: #EEEEEF;
    border: 0px;
    resize: vertical;
    color: #000000;
    font-size: 1.563vw;
    font-weight: normal;
    margin: 0px 0px 0px calc(1.172vw * 2);
    padding: 1vw;
}
#wrap>.contact textarea[id='content']::-webkit-input-placeholder{
    color: #999999;
}
#wrap>.contact textarea[id='content']:-moz-placeholder{
    color: #999999;
}
#wrap>.contact textarea[id='content']::-moz-placeholder{
    color: #999999;
}
#wrap>.contact textarea[id='content']:-ms-input-placeholder{
    color: #999999;
}
#wrap>.contact .formArea>ul>li.gCode{
    width: calc(100% - 1.172vw * 2 - 1vw * 2);
    align-items: flex-end;
    margin: 0px 0px 1.172vw calc(1.172vw * 2);
}
#wrap>.contact .formArea>ul>li.gCode>input[type='text']{
    border: 1px solid #000000;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0px 1.172vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul>li.gCode>input[type='text']{
        width: 29vw;
    }
}
#wrap>.contact .formArea>ul>li.gCode>img{
    height: 3vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul>li.gCode>img{
        height: 9vw;
    }
}
#wrap>.contact .formArea>ul>li.submit{
    width: calc(100% - 1.172vw * 2 - 1vw * 2);
    margin: 0px 0px 3.8vw calc(1.172vw * 2);
}
#wrap>.contact .formArea>ul>li.submit>input[type='button']{
    min-width: calc(31vw - 1vw * 2);
    background: #000000;
    border: 0px;
    color: #FFFFFF;
    font-size: 2.148vw;
    padding: 0.4vw 1vw;
    cursor: pointer;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .formArea>ul>li.submit>input[type='button']{
        font-size: 3.75vw;
        padding: 1vw 3.125vw;
    }
}

#wrap>.contact .infoArea{
    width: 100%;
    font-size: 1.367vw;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .infoArea{
        font-size: 3.75vw;
        align-items: flex-start;
    }
}
#wrap>.contact .infoArea>div{
    margin: 0px 0px 0.5vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .infoArea>div{
        width: 100%;
    }
}
#wrap>.contact .infoArea .map{
    margin: 0px 0px 4vw 0px;
}
#wrap>.contact .infoArea .map img{
    max-width: 100%;
}
#wrap>.contact .infoArea .companyName{
    font-size: 2.02vw;
    font-weight: bold;
    margin: 0px 0px 1vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .infoArea .companyName{
        font-size: 4.375vw;
    }
}
#wrap>.contact .infoArea>div a{
    color: #000000;
}
#wrap>.contact .infoArea div ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .infoArea div ul{
        width: 94%;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0px;
    }
}
#wrap>.contact .infoArea div ul>li{
    margin: 0px 1.465vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .infoArea div ul>li{
        flex: 1;
        margin: 0px 0px 0px 0px;
    }
}
#wrap>.contact .infoArea div ul>li:last-child{
    margin: 0px 0px 0px 0px;
}
#wrap>.contact .infoArea div ul>li>em{
    border-right: 1px solid #000000;
    font-style: normal;
    margin: 0px 0.732vw 0px 0px;
    padding: 0px 0.732vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact .infoArea div ul>li>em{
        line-height: 3.75vw;
        margin: 0px 2vw 0px 0px;
        padding: 0px 2vw 0px 0px;
    }
}
#wrap>.contact>.viewArea>section.copyright{
    font-size: 1.1719vw;
    white-space: nowrap;
    display: block;
    margin: 3.906vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>.contact>.viewArea>section.copyright{
        font-size: 3.75vw;
    }
}

html.contact #wrap footer{
    display: none;
}

/* =========================================================
 * 頁尾區塊
 * ========================================================= */
#wrap>footer{
    width: 100%;
    background: #000000;
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 3vw 0px;
}
#wrap>footer a{
    color: #FFFFFF;
}
#wrap>footer a:hover{
    color: rgba(255, 63, 180, 1);
}
#wrap>footer>.viewArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
#wrap>footer>.viewArea>section{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer>.viewArea>section{
        justify-content: flex-start;
        align-items: flex-start;
    }
}
#wrap>footer .infoArea{
    font-size: 1.367vw;
    font-weight: normal;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea{
        font-size: 3.75vw;
    }
}
#wrap>footer .infoArea>div{
    margin: 0px 0px 0.5vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea>div{
        width: 100%;
    }
}
#wrap>footer .infoArea .companyName{
    font-size: 2.02vw;
    font-weight: bold;
    margin: 0px 0px 1vw 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea .companyName{
        font-size: 4.375vw;
    }
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea .tel{
        width: 100%;
    }
}
#wrap>footer .infoArea .tel ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea .tel ul{
        width: 94%;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0px;
    }
}
#wrap>footer .infoArea .tel ul>li{
    margin: 0px 1.465vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea .tel ul>li{
        margin: 0px 0px 0px 0px;
    }
}
#wrap>footer .infoArea .tel ul>li:last-child{
    margin: 0px 0px 0px 0px;
}
#wrap>footer .infoArea .tel ul>li>em{
    border-right: 1px solid #FFFFFF;
    font-style: normal;
    margin: 0px 0.732vw 0px 0px;
    padding: 0px 0.732vw 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer .infoArea .tel ul>li>em{
        line-height: 3.75vw;
        margin: 0px 2vw 0px 0px;
        padding: 0px 2vw 0px 0px;
    }
}
#wrap>footer>.viewArea>section.copyright{
    font-size: 12px;
    white-space: wrap;
    display: block;
    margin: 1vw 0px 0px 0px;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer>.viewArea>section.copyright,
    #wrap>footer>.viewArea>section.copyright a{
        color: #999999;
        font-size: 3.75vw;
    }
}

#wrap>footer>.viewArea>section.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 3.906vw;
}
@media screen and (max-width: 1023px),
screen and (orientation: portrait){
    #wrap>footer>.viewArea>section.buttonArea{
        display: none;
    }
}
#wrap>footer>.viewArea>section.buttonArea img{
    height: 2vw;
    margin: 0px 0.8vw;
}

#wrap>footer>.viewArea>section.buttonArea img:hover{
    transform: scale(1.05);
    transition: transform 0.5s;
}