/*Section1*/
#section1 {
    width: 100vw;
    background:url(../img/bg2.jpg) repeat-y center center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 3;

    -webkit-mask-image: url(https://www.gq.com.tw/event/2023/vgs/images/mask01.svg);
    -webkit-mask-size:cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;

    mask-image: url(https://www.gq.com.tw/event/2023/vgs/images/mask01.svg);
    mask-size:cover;
    mask-repeat: no-repeat;
    mask-position: center bottom;
}

#section1 .content {
    height: 200vh;
    position: relative;
    color: var(--White);
}
.threeD{
    width: 100%;
    height: 100vh;
    position: relative;
}
.threeD img{
    display: block;
    width: 100%;
    opacity: 0;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 5;
}
.threeD01 img:first-child{
    opacity: 1;
}
.last3D.is-inview{
    opacity: 1 !important;
}
.marquee2{
    width: 100%;
    overflow: hidden;
    height: 150px;
    position: absolute;
    left: 0;
    top: 18%;
    z-index: 6;
    font-size: 10vw;
    font-family: var(--Bold);
    color: var(--White);
    white-space: nowrap;
}
.marquee3{
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 27.5%;
    z-index: 4;
    font-size: 30px;
    font-weight: bold;
    color: var(--White);
    mix-blend-mode: difference;
    white-space: nowrap;
}
.marquee2 p,
.marquee3 p{
    white-space: nowrap;
    line-height: 1em;
}
.marquee2Text01,
.marquee3Text01{
    display: inline-block;
    animation: marquee2 40s linear infinite;
    animation-delay: -20s;
}
.marquee2Text02,
.marquee3Text02{
    display: inline-block;
    animation: marquee3 40s linear infinite;

}

@keyframes marquee2 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee3 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

.section1Title{
    position: relative;
    z-index: 5;
    width: 90%;
    line-height: 1.2em;
    margin:0 auto;
    font-size: 5.5vw;
    line-height: 1.2em;
    text-align: center;
}

.section1Text{
    position: relative;
    z-index: 5;
    font-size: 24px;
    max-width: 960px;
    width: 80%;
    margin:30px auto;
}

.textBox{
    display: block;
    width: 100%;
    height: 6.5vw;
    overflow: hidden;
}
.circle{
    display: block;
    width: 100px;
    margin: 100px auto;
    animation: rotate 4s infinite linear normal forwards;
    position: relative;
    z-index: 5;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(364deg);
  }
}
/*Section2*/
#section2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow-x: initial;
}
.wave{
    width: 100%;
    text-align: center;
    font-size: 5vw;
    font-family: var(--Bold);
    line-height: 1.2em;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    transform-style: preserve-3d;
    perspective: 600px;
    -webkit-perspective: 600px;
}
.wave svg{
    display: block;
    stroke-dashoffset: 2200;
    stroke-dasharray: 2200;
    fill-opacity: 0; 
}
.wave01{
    color: var(--Black);
    position: relative;
    z-index: 2;
    margin-top: -5%;

}
.wave02{
    color: var(--Blue);  
    position: relative;
    z-index: 1;
    margin-top: -12%;
}
.wave03{
    color: var(--Orange);   
    position: relative;
    z-index: 0;
    margin-top: -16%;
}
.wave01 svg{
    width: 35%;
    height: auto;
    stroke-width: 20px;
    stroke:var(--Black);
    fill: var(--Black); 
}
.wave02 svg{
    width: 60%;
    height: auto;
    stroke-width: 10px;
    stroke:var(--Blue); 
    fill: var(--Blue); 
}
.wave03 svg{
    width: 80%;
    height: auto;
    stroke-width: 8px;
    stroke:var(--Orange); 
    fill: var(--Orange); 
}
#section2.is-inview .wave svg{
    stroke-dashoffset: 0;
    stroke-dasharray: 2200;
    fill-opacity: .9; 
    transition: 1s;
}
#section2.is-inview .wave01 svg{
    transition-delay: 1s;
}
#section2.is-inview .wave02 svg{
    transition-delay: .5s;
}
#section2.is-inview .wave03 svg{
    transition-delay: 0s;
}
.wave p{
    opacity: 0;
    margin-top: -20px;
    transform: translateY(100%) rotateX(-90deg);
    transform-origin: center top;
    transform-style: preserve-3d;
    transition: opacity .8s cubic-bezier(.215,.61,.355,1),transform .8s cubic-bezier(.215,.61,.355,1);
    transition-delay: 0s, 0s;
}
#section2.is-inview .wave p{
    transform: none;
    opacity: 1;
    transition-duration: .5s;
}
#section2.is-inview .wave01 p{
    transition-delay: 1.5s;
}
#section2.is-inview .wave02 p{
    transition-delay: 1s;
}
#section2.is-inview .wave03 p{
    transition-delay: .5s;
}
/*Section3*/
#section3 .content{
    position: relative;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
}
.chats{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
}
.chat{
    margin: 10px 5px;
    transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
.chat div{
    width: fit-content;
    padding: 10px 20px;
    border-radius: 20px 20px;
    line-height: 1em;
    background: var(--Blue);
    font-weight: 900;
    color: var(--White);
    position: relative;
    font-size: 1.5vw;
}

.chat div::before{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 8px 0 8px;
    border-color: var(--Blue) transparent transparent transparent;
    position: absolute;
    right: 17px;
    bottom: -12px;
    z-index: 1;
}
.chat01{
    order:10;
}
.chat02{
    order:9;
}
.chat03{
    order:11;
}
.chat04{
    order:8;
}
.chat05{
    order:13;
}
.chat06{
    order:7;
}
.chat07{
    order:14;
}
.chat08{
    order:6;
}
.chat09{
    order:15;
}
.chat10{
    order:5;
}
.chat11{
    order:16;
}
.chat12{
    order:4;
}
.chat13{
    order:17;
}
.chat14{
    order:3;
}
.chat15{
    order:18;
}
.chat16{
    order:2;
}
.chat17{
    order:19;
}
.chat18{
    order:1;
}

.chat01 div{
    font-size: 3em;
}
.chat02 div{
    font-size: 3em;
}
.chat03 div{
    font-size: 2.5em;
}
.chat04 div{
    font-size: 2.5em;
}
.chat05 div{
    font-size: 2.5em;
}
.chat06 div{
    font-size: 2.5em;
}
.chat07 div{
    font-size: 2em;
}
.chat08 div{
    font-size: 2em;
}
.chat09 div{
    font-size: 2em;
}
.chat10 div{
    font-size: 2em;
}
.chat11 div{
    font-size: 1.5em;
}
.chat12 div{
    font-size: 1.5em;
}
.chat13 div{
    font-size: 1.5em;
}
.chat14 div{
    font-size: 1.5em;
}
.chat15 div{
    font-size: 1em;
}
.chat16 div{
    font-size: 1em;
}
.chat17 div{
    font-size: 1em;
}
.chat18 div{
    font-size: 1em;
}

/*Section4*/
#section4{
    height: 110vh;
    background:url(../img/bg3.png)top center no-repeat;
    background-size: cover;
    background-attachment: fixed;

    -webkit-mask-image: url(https://www.gq.com.tw/event/2023/vgs/images/mask01.svg);
    -webkit-mask-size:cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;

    mask-image: url(https://www.gq.com.tw/event/2023/vgs/images/mask01.svg);
    mask-size:cover;
    mask-repeat: no-repeat;
    mask-position: center bottom;
}
#section4 .content{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: var(--White);
    line-height: 1.2em;
    flex-wrap: wrap;
}
.section4Text{
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}
.section4Text h2{
    width: 100%;
    font-weight: normal;
    font-weight: 900;
    font-size: 4.5em;
    text-transform: uppercase;
    line-height: 1.2em;
    position: relative;
    z-index: 1;
}
#section4 .content.is-inview h2.splitting .char,
#section4 .content.is-inview .volume .char {
  animation: slide-in 1.5s cubic-bezier(0.5, 0, 0.5, 1) 1;
  animation-delay: calc(60ms * var(--char-index));
}


.section4Text h1{
    line-height: 1.8em;
    width: 100%;
}
.section4Text h1:nth-child(2){
    margin-top: 30px;
}
.section4Text h1 .volume{
    font-family: var(--Bold);
    font-size: 2.4em;
    font-weight: normal;
    color: var(--Orange);
}


.case{
    width: 2680px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.case a{
    display: block;
    position: relative;
    cursor: pointer;
    width: 250px;
    margin-right: 20px;
}
.case a:last-child(){
    margin-right: 0;
}
.case a img{
    display: block;
    width: 100%;
}
.case a:hover .portfolioPic::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    background: var(--Orange);
    mix-blend-mode: difference;
    z-index: 0;
    animation: hover 1s linear 1;
}
@keyframes hover {
    0% {
        clip-path: circle(0% at 50% 50%);
    }

    100% {
        clip-path: circle(200% at 50% 50%);
    }
}
/*Section9*/
#section9{
    overflow-x: initial;
}
#section9 .content{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1em;
    color: var(--White);
    margin-bottom: 20vh;
}
.brandText{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 2.4vw;
    transform-origin: center;
    margin-top: 8vw;
}
.circleMapCircle{
    width:20vw;
    height:20vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 2.4vw;
    transform-origin: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 1s;
    transform: scale(0);
}
.circleMapCircle span{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    padding: 5vw 0;
    display: flex;
    justify-content: center;
}
#section9.is-inview .circleMapCircle{
    transform: none;
    transition: transform 1s;
}
.circleMapCircle01{
    background: var(--GtoO);
    mix-blend-mode: hard-light;
    z-index: 1;

    margin-bottom: -17.5vw;
    margin-right: -12.5vw;
}
.circleMapCircle02{
    background: var(--BtoO);
    mix-blend-mode: hard-light;
    z-index: 2;
}
.circleMapCircle03{
    background: var(--BtoG);
    mix-blend-mode: hard-light;
    z-index: 3;
    margin-bottom: -17.5vw;
    margin-left: -12.5vw;
}
.circleMapCircle01 span{
    align-items: flex-end;
    margin-right: 5vw;
}
.circleMapCircle02 span{
    align-items: flex-start;
}
.circleMapCircle03 span{
    align-items: flex-end;
    margin-left: 5vw;
}



/*Section5*/
#section5{
    padding: 100px 0;
    height: auto;
}
#section5 .content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;

}
.section5Title{
    width: 100%;
    font-size: 10vw;
    font-family: var(--Bold);
    color: var(--Orange);
    line-height: 1em;
    margin-bottom: 10px;
    background: var(--Blue);
    padding-bottom: 20px;
}
.section5Title02{
    width: 100%;
    font-size: 4vw;
    font-family: var(--Bold);
    color: var(--Blue);
    background: var(--Orange);
    line-height: 1.2em;
}
.cards{
    width: 100%;
    position: relative;
    display: flex;
    justify-content:center ;
    align-items: flex-start;
    align-content: space-between;
    flex-wrap: wrap;

    perspective: 600px;
    -webkit-perspective: 600px;
}
.card {
    width: 20vw;
    height: 15vw;
    background: rgba(255, 255, 255, .1);
    border-radius: 10px 10px;
    padding: 20px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content:space-between;
    flex-wrap: wrap;
    
    text-align: right;
    font-size: 2vw;
    line-height: 1.2em;
    font-weight: 900;
    color: var(--Orange);
    border: 3px solid var(--Blue);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin: 10px 10px ;

    transform-origin: center top;
    transform-style: preserve-3d;
    transition: opacity .8s cubic-bezier(.215,.61,.355,1),transform .8s cubic-bezier(.215,.61,.355,1);
}

.number{
    color: var(--Blue);
    font-size: 4vw;
    line-height: 1em;
    width: 100%;
    text-align: left;
}
.cardText{
    width: 100%;
}

.card01{
    position: relative;
    z-index: 0;
}
.card02{
    position: relative;
    z-index: 1;
}
.card03{
    position: relative;
    z-index: 2;
}
.card04{
    position: relative;
    z-index: 3;

}
.card05{
    position: relative;
    z-index: 4;

}
.card06{
    position: relative;
    z-index: 5;

}
.card07{
    position: relative;
    z-index: 6;

}
.card08{
    justify-content:center;
    align-content: center;
    background: var(--Blue);
}
.card08 img{
    width: 70%;
    display: block;
}


/*Section6*/
#section6{
    padding: 50px 0;
}
#section6 .content{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
#section6 .content img{
    display: block;
    width: 140px;
    margin: 10px 20px;
}

/*Section7*/
#section7{

}

#section7 .content{
    position: relative;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}


.processes{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}
.process {
    width: 25vw;
    height: 20vw;
    border: 1px solid var(--White);
    background: var(--Blue);
    border-radius: 10px 10px;
    padding: 20px 20px;
    display: flex;
    justify-content: flex-start;
    align-content:space-between;
    flex-wrap: wrap;
    text-align: right;
    font-size: 3vw;
    line-height: 1.2em;
    font-family: var(--Bold);
    color: var(--White);
    margin-left: 50px;
}
.process span{
    font-size: 20px;
    line-height: 1em;
    display: block;
    font-family: var(--Normal);
    font-weight: bold;

}
.process .number{
    color: var(--White);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -25px;
}
.process00{
     background: var(--OtoB);
}
.process02{
    background: var(--Black);
}
.process03{
    background: var(--Orange);
}
.process04{
    background: var(--White);
    color: var(--Blue);
    border: 1px solid var(--Blue);
}
.process04 .number{
    color: var(--Blue);
}
.number img{
    display: block;
    width: 40px;
    transform: rotate(-90deg);
    margin-right: 30px;
}
.process00 .circle{
    margin: 0;
    width: 80px;
}
.process04 .number img{
    transform: none;
    margin-right: 0;
    margin-top: 30px;
}


/*Section8*/
#section8{
    height: 80vh;
}

.marquee4{
    width: 100%;
    overflow: hidden;
    height: 150px;
    position: absolute;
    left: 0;
    top: 30%;
    z-index: 6;
    font-size: 9vw;
    font-family: var(--Bold);
    color: var(--White);
    white-space: nowrap;
}
.marquee4 .marquee2Text01,.marquee4 .marquee2Text02{
    background: var(--OtoB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    line-height: 1em;
}
.marquee5{
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 25%;
    z-index: 4;
    font-size: 26px;
    font-weight: bold;
    color: var(--Blue);
    white-space: nowrap;
}
.marquee5 .marquee3Text01,.marquee5 .marquee3Text02{
    background: var(--BtoO);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




/*////RWD////*/
@media screen and (max-width:1660px) {}

@media screen and (max-width:1440px) {}

@media screen and (max-width:1366px) {
    
}

@media screen and (max-width:1280px) {
    #section6 .content img {
        width: 115px;
    }
    .chat01 div{
        font-size: 2.5em;
    }
    .chat02 div{
        font-size: 2.5em;
    }
    .chat03 div{
        font-size: 2.5em;
    }
    .chat04 div{
        font-size: 2em;
    }
    .chat05 div{
        font-size: 2em;
    }
    .chat06 div{
        font-size: 2em;
    }
    .chat07 div{
        font-size: 2em;
    }
    .chat08 div{
        font-size: 1.5em;
    }
    .chat09 div{
        font-size: 1.5em;
    }
    .chat10 div{
        font-size: 1.5em;
    }
    .chat11 div{
        font-size: 1.5em;
    }
    .chat12 div{
        font-size: 1em;
    }
    .chat13 div{
        font-size: 1em;
    }
    .chat14 div{
        font-size: 1em;
    }
    .chat15 div{
        font-size: 1em;
    }
    .chat16 div{
        font-size: 1em;
    }
    .chat17 div{
        font-size: 1em;
    }
    .chat18 div{
        font-size: 1em;
    }
}
@media (orientation:landscape) and (max-width:1024px) {

    .threeD img {
        top: 100px;
    }
    .section1Title {
        font-size: 5.0vw;
    }
    .wave01 {
        margin-top: -6%;
    }
    .wave01 svg {
        width: 40%;
    }
    .wave02 svg {
        width: 65%;
    }
    .wave03 svg {
        width: 85%;
    }
    .wave p {
        margin-top: -15px;
    }
    #section6 .content img {
        width: 100px;
    }
    .chat01 div{
        font-size: 2em;
    }
    .chat02 div{
        font-size: 2em;
    }
    .chat03 div{
        font-size: 2em;
    }
    .chat04 div{
        font-size: 1.5em;
    }
    .chat05 div{
        font-size: 1.5em;
    }
    .chat06 div{
        font-size: 1.5em;
    }
    .chat07 div{
        font-size: 1.5em;
    }
    .chat08 div{
        font-size: 1em;
    }
    .chat09 div{
        font-size: 1em;
    }
    .chat10 div{
        font-size: 1em;
    }
    .chat11 div{
        font-size: 1em;
    }
    .chat12 div{
        font-size: 1em;
    }
    .chat13 div{
        font-size: 1em;
    }
    .chat14 div{
        font-size: 1em;
    }
    .chat15 div{
        font-size: 14px;
    }
    .chat16 div{
        font-size: 14px;
    }
    .chat17 div{
        font-size: 14px;
    }
    .chat18 div{
        font-size: 14px;
    }
}
@media (orientation:landscape) and (max-height:800px) {
    .marquee3 {
        top: 29.5%;
    }
    #section8 {
        height: 110vh;
    }

}
@media (orientation:landscape) and (max-height:650px) {
    .threeD img {
        width: auto;
        height: 80%;
        top: 60px;
        left: 5%;
    }

}
@media (orientation:portrait) and (max-height:1180px) {
    #section1 {
        background:url(../img/bg4.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: initial;
    }
    #section4{
        background-attachment: initial;

    }
    .threeD img {
        top: 30%;
    }
    .marquee2 {
        top: 21%;
        font-size: 14vw;
    }
    .marquee3 {
        top: 26.5%;
    }
    .wave01 {
        margin-top: -8%;
    }
    .wave02 {
        margin-top: -16%;
    }
    .wave03 {
        margin-top: -20%;
    }
    .wave01 svg {
        width: 52%; 
    }
    .wave02 svg {
        width: 70%;
    }
    .wave03 svg {
        width: 95%;
    }
    .wave p {
        margin-top: -20px;
    }
    .wave {
        font-size: 7vw;
    }
    .section4Text h2 {
        font-size: 4.2em; 
    }
    .circleMapCircle {
        width: 30vw;
        height: 30vw;
    }
    .circleMapCircle01 {
        margin-bottom: -25vw;
        margin-right: -20vw;
    }
    .circleMapCircle03 {
        margin-bottom: -25vw;
        margin-left: -20vw
    }
    .card{
        width: 22vw;
        height: 25vw;
        font-size: 2.5vw;
    }
    .process {
        width: 40vw;
        height: 30vw;
        font-size: 5vw;
    }
    .marquee4{
        height: 150px;
        top: 30%;
        font-size: 15vw;
    }
    .marquee5{
        height: 40px;
        top: 25%;
        font-size: 30px;
    }
    .chat01 div{
        font-size: 1.5em;
    }
    .chat02 div{
        font-size: 1.5em;
    }
    .chat03 div{
        font-size: 1.5em;
    }
    .chat04 div{
        font-size: 1.5em;
    }
    .chat05 div{
        font-size: 1.5em;
    }
    .chat06 div{
        font-size: 1.5em;
    }
    .chat07 div{
        font-size: 1.2em;
    }
    .chat08 div{
        font-size: 1.2em;
    }
    .chat09 div{
        font-size: 1.2em;
    }
    .chat10 div{
        font-size: 1.2em;
    }
    .chat11 div{
        font-size: 1.2em;
    }
    .chat12 div{
        font-size: 1.2em;
    }
    .chat13 div{
        font-size: 1.2em;
    }
    .chat14 div{
        font-size: 1em;
    }
    .chat15 div{
        font-size: 1em;
    }
    .chat16 div{
        font-size: 1em;
    }
    .chat17 div{
        font-size: 1em;
    }
    .chat18 div{
        font-size: 1em;
    }
    .circleMapCircle {
        font-size: 3.5vw;
    }
    .brandText {
        font-size: 3.5vw;
        margin-top: 9.5vw;
    }
    
}
@media (orientation:portrait) and (max-height:1024px) {
    .section4Text h2 {
        font-size: 4em; 
    }
    .card{
        height: 22vw;
    }
    #section6{
        padding: 25px 0;
    }
    .circleMapCircle {
        font-size: 4vw;
    }
    .brandText {
        font-size: 4vw;
    }
}
@media screen and (max-width:480px) {
      .threeD img {
        width: 140%;
        top: 35%;
        left: -20%;
    }
    .marquee2 {
        top: 23%;
        font-size: 18vw;
    }
    .marquee3 {
        top: 27.5%;
        font-size: 20px;
    }
    .section1Title {
        font-size: 6.5vw;
    }
    .textBox {
        height: 8vw;
    }
    .section1Text {
        font-size: 20px;
    }
    .wave {
        font-size: 10vw;
    }
    .wave p {
        margin-top: -10px;
    }
    .wave01 {
        margin-top: -9%;
    }
    .wave02 {
        margin-top: -24%;
    }
    .wave03 {
        margin-top: -32%;
    }
    .wave01 svg {
        width: 40%;
    }
    .wave02 svg {
        width: 80%;
    }
    .wave03 svg {
        width: 120%;
        margin-left: -10%;
    }
    .wave03 p {
        margin-left: -10%;
    }
    .section4Text h2 {
        font-size: 2em; 
    }
    .section4Text h1 .volume {
        font-size: 2em;
    }
    .circleMapCircle {
        width: 50vw;
        height: 50vw;
        font-size: 7vw;
    }
    .circleMapCircle01 {
        margin-bottom: 0;
        margin-right: -15vw;
    }
    .circleMapCircle03 {
        margin-bottom: 0;
        margin-top: -25vw;
        margin-left: 0;
    }
    .circleMapCircle span {
        padding: 10vw 0;
    }
    .circleMapCircle01 span {
        align-items: flex-start;
    }
    .circleMapCircle03 span {
        margin-left: 0;
    }
    .brandText {
        font-size: 7vw;
        margin-top: -4.5vw;
    }
    .case a {
        width: 150px;
    }
    #section9 .content {
        margin-bottom: 0;
    }
    .section5Title {
        font-size: 11vw;
    }
    .section5Title02 {
        font-size: 7vw;
    }
    .card {
        width: 80vw;
        font-size: 7vw;
        padding: 10px 10px;
    }
    .number {
        font-size: 5vw;
    }
    .card08{
        width: 100vw;
        border-radius: 0;
        margin-top: 10vh;
    }
    #section6 .content img {
        width: 90px;
        margin: 10px 10px;
    }
    #section6{
        padding: 0 0 100px 0 ;
    }
    .process {
        width: 50vw;
        height: 50vw;
        font-size: 7vw;
        margin-left: 20px;
    }
    .process00 .circle {
        width: 60px;
    }
    .number img {
        width: 30px;
    }
    .marquee4 {
        font-size: 25vw;
    }

    .chat01 div{
        font-size: 18px;
    }
    .chat02 div{
        font-size: 18px;
    }
    .chat03 div{
        font-size: 18px;
    }
    .chat04 div{
        font-size: 18px;
    }
    .chat05 div{
        font-size: 14px;
    }
    .chat06 div{
        font-size: 14px;
    }
    .chat07 div{
        font-size: 14px;
    }
    .chat08 div{
        font-size: 14px;
    }
    .chat09 div{
        font-size: 14px;
    }
    .chat10 div{
        font-size: 14px;
    }
    .chat11 div{
        font-size: 10px;
    }
    .chat12 div{
        font-size: 10px;
    }
    .chat13 div{
        font-size: 10px;
    }
    .chat14 div{
        font-size: 10px;
    }
    .chat15 div{
        font-size: 10px;
    }
    .chat16 div{
        font-size: 10px;
    }
    .chat17 div{
        font-size: 10px;
    }
    .chat18 div{
        font-size: 10px;
    }

}
/*Iphone XR 414*896 */
@media (orientation: portrait) and (max-height:896px) {

}
/*Iphone 12Pro 390*844 */
@media (orientation: portrait) and (max-height:844px) {

}
@media (orientation: portrait) and (max-width:390px) {

}
/*Iphone 10 375*812 */
@media (orientation: portrait) and (max-height:812px) {

}
@media (orientation: portrait) and (max-width:375px) {
    
}
/*Iphone 8Plus 414*736 */
@media (orientation: portrait) and (max-height:736px) {
    
}
/*Iphone 8 375*667 */
@media (orientation: portrait) and (max-height:667px) {
    
}
@media screen and (max-width:360px) {

}
@media screen and (max-width:320px) {
    
}