#test_201801{
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #test_201801 > div{
        top: 4%;
        position: absolute;
    }
    #quiet{
        margin: 0;
        padding: 0 3% 0 6%;
        max-height: 550px;
        height: 65vh;
        background-image: url(../innergigabyteimages/webpic/quiet-bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #test_201802{
        margin: 0% 0 0 0;
        padding: 0;
        background-size: cover;
        background-image: url(../innergigabyteimages/webpic/ioimage-7.png),url(../innergigabyteimages/webpic/cool-bg.jpg);
    }
    #test_201803 {
        margin: 0;
        padding: 0 6%;
        max-height: 1200px;
        height: 125vh;
        background-image: url(../innergigabyteimages/webpic/gamer-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: hidden;
    }
    #test_201804{
        margin: 0;
        padding: 0 3% 0 6%;
        max-height: 1200px;
        height: 125vh;
        background-image: url(../innergigabyteimages/webpic/creator-bg.jpg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }
    #test_201805{
        margin: 0;
        padding: 0 0 0 6%;
        max-height: 1200px;
        height: 125vh;
        background-image: url(../innergigabyteimages/webpic/ai-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
    }

    .ioimage2,
    .ioimage3,
    .ioimage3-1,
    .ioimage4,
    .ioimage5,
    .ioimage7 {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(1) translate(-12%, -11%);
        transform-origin: center bottom;
        transition: all 0.8s;
    }

    .cooling_pager_width{
        width: 50%;
    }

@media screen and (min-width: 1700px) {
    .cooling-solution{
        padding:5% 0 5% 5%;
        max-width: 1920px;
        max-height: 830px;
        height: 90vh;
        overflow: hidden;
        position: relative;
    }
    .cooling-solution-content{
        padding: 6% 2% 0% 4%;
    }
    .cooling-detail{
        padding: 15% 0 0 6%;
    }
    .copper-pipe{
        padding: 33% 0 0 0;
    }
}


@media screen and (min-width: 1500px) and (max-width: 1700px) {
    .cooling-solution{
        padding:5% 0 5% 5%;
        max-width: 1920px;
        max-height: 830px;
        height: 90vh;
        overflow: hidden;
        position: relative;
    }
    .cooling-solution-content{
        padding: 6% 2% 0% 4%;
    }
    .cooling-detail{
        padding: 15% 0 0 6%;
    }
    .copper-pipe{
        padding: 33% 0 0 0;
    }

    .ioimage2,
    .ioimage3,
    .ioimage3-1,
    .ioimage4,
    .ioimage5,
    .ioimage7 {
        position: absolute;
        top: 0;
        left: -200px;
        transform: scale(1) translate(-12%, -11%);
        transform-origin: center bottom;
        transition: all 0.8s;
    }

    .cooling_pager_width{
        width: 50%;
    }

}


@media screen and (min-width: 1200px) and (max-width: 1500px) {
    .cooling-solution{
        padding: 0;
        max-width: 1920px;
        max-height: 530px;
        height: 90vh;
        overflow: hidden;
        position: relative;
    }
    .cooling-solution-content{
        padding: 0;
    }
    .cooling-detail{
        padding: 15% 0 0 6%;
    }
    .copper-pipe{
        padding: 0;
    }

    .ioimage2,
    .ioimage3,
    .ioimage3-1,
    .ioimage4,
    .ioimage5,
    .ioimage7 {
        position: absolute;
        top: 0;
        left: -280px;
        transform: scale(1) translate(-12%, -11%);
        transform-origin: center bottom;
        transition: all 0.8s;
    }

    .cooling_pager_width{
        width: 60%;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .cooling-solution{
        padding: 0;
        max-width: 1920px;
        max-height: 850px;
        height: 90vh;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }
    .cooling-solution-content{
        padding: 0% 0% 0% 6%;
    }
    .cooling-detail{
        padding: 0;
    }
    .cooling-pager>p {
        width: 16%;
    }
    .copper-pipe{
        padding: 0;
    }
    #test_201801 > div{
        top: 0%;
    }
    #test_201803 {
        background-image: url(../innergigabyteimages/webpic/gamer-bg-rwd.jpg);
        background-position: bottom;
    }
    #test_201804 {
        background-image: url(../innergigabyteimages/webpic/creator-bg-rwd.jpg);
        background-position: bottom;
    }
    #test_201805{
        flex-direction: column;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .cooling-solution{
        padding: 0;
        max-width: 1920px;
        max-height: 850px;
        height: 90vh;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }
    .cooling-solution-content{
        padding: 0% 0% 0% 6%;
    }
    .cooling-detail{
        padding: 0;
    }
    .cooling-pager>p {
        width: 16%;
    }
    .copper-pipe{
        padding: 0;
    }
    #test_201801 > div{
        position: relative;
        top:0;
    }
    #test_201803 {
        background-image: url(../innergigabyteimages/webpic/gamer-bg-rwd.jpg);
        background-position: bottom;
        max-height: 1000px;
    }
    #test_201804 {
        background-image: url(../innergigabyteimages/webpic/creator-bg-rwd.jpg);
        background-position: bottom;
        max-height: 1000px;
    }
    #test_201805{
        flex-direction: column;
        max-height: 1000px;
    }
  #quiet {
        max-height: 500px;
    }
}

@media screen and (max-width: 768px)and (min-width: 500px)  {
    .cooling-solution{
        padding: 0;
        max-width: 1920px;
        max-height: 650px;
        height: 90vh;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }
    .cooling-solution-content{
        padding: 0% 0% 0% 6%;
    }
    .cooling-detail{
        padding: 0;
    }
    .cooling-pager>p {
        width: 16%;
    }
    .copper-pipe{
        padding: 0;
    }
    #test_201801 > div{
        position: relative;
        top:0;
    }
    #test_201803 {
        background-image: url(../innergigabyteimages/webpic/gamer-bg-rwd.jpg);
        background-position: bottom;
        max-height: 770px;
    }
    #test_201804 {
        background-image: url(../innergigabyteimages/webpic/creator-bg-rwd.jpg);
        background-position: bottom;
        max-height: 770px;
    }
    #test_201805{
        flex-direction: column;
        max-height: 600px;
    }
  #quiet {
        max-height: 700px;
    }
}
@media screen and (max-width: 500px) {
    .cooling-solution{
        padding: 0;
        max-width: 1920px;
        max-height: 650px;
        height: 90vh;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }
    .cooling-solution-content{
        padding: 0% 0% 0% 6%;
    }
    .cooling-detail{
        padding: 0;
    }
    .cooling-pager>p {
        width: 16%;
    }
    .copper-pipe{
        padding: 0;
    }
    #test_201801 > div{
        position: relative;
        top:0;
    }
    #test_201803 {
        background-image: url(../innergigabyteimages/webpic/gamer-bg-rwd.jpg);
        background-position: bottom;
        max-height: 700px;
    }
    #test_201804 {
        background-image: url(../innergigabyteimages/webpic/creator-bg-rwd.jpg);
        background-position: bottom;
        max-height: 700px;
    }
    #test_201805{
        flex-direction: column;
        max-height: 600px;
    }
  #quiet {
        max-height: 700px;
    }
}
::selection {
    color: rgba(255, 100, 0, 1);
    background: rgba(0, 0, 0, .5);
}

#cooling-cycle {
    width: 90%;
    padding: 0;
    margin: 0;
    display: block;
}

.cooling-pager>p {
    padding-bottom: 10px;
    border-bottom: #666 solid 2px;
}

.cooling-pager>p.cycle-pager-active {
    border-bottom: rgb(67, 222, 240) solid 2px;
}

#io-pager>div>div {
    background-color: #666;
}

#io-pager>div.cycle-pager-active>div {
    background-color: rgb(67, 222, 240);
}

.dlicon {
    filter: grayscale(1);
}

.dlicon:hover {
    filter: grayscale(0);
}

.cooling-system0,
.cooling-system1,
.cooling-system2,
.cooling-system3,
.cooling-system4,
.cooling-system5,
.cooling-system6,
.cooling-system7,
.cooling-system8 {
    pointer-events: none;
    transition: all 1s ease-in-out;
    opacity: 0;
}

.cooling-system8 {
    pointer-events: none;
    opacity: 1;
    display: block;
    transition: all 1s ease-out;
}



#test_201806 {
    transition: background .5s linear;
}

.cooling-solution-summary {
    margin: 0;
    padding: 0;
}

.cooling-learn-more {
    font-family: "AORUS", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "新細明體", Arial, Verdana, Helvetica, sans-serif;
    text-align: center;
    padding: 1.5% 4% 1% 4%;
    border: rgb(255, 255, 255) solid 1px;
    cursor: pointer;
    background-color: rgba(67, 222, 240, .1);
    transition: all .3s;
}

.cooling-learn-more:hover {
    color: rgb(67, 222, 240);
    border: rgb(67, 222, 240) solid 1px;
}

.cooling-learn-more-back {
    color: white;
    width: 40px;
    height: 40px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: white solid 1px;
    cursor: pointer;
    margin: 0 2% 0 0;
    font-family: none;
    font-size: 70%;
}

.cooling-learn-more-back:hover {
    color: rgb(67, 222, 240);
    border: rgb(67, 222, 240) solid 1px;
}

.cooling-system-wind1 {
    pointer-events: none;
    animation: cooling-system-wind1 4s ease-in-out infinite;
}

@keyframes cooling-system-wind1 {
    0% {
        opacity: 0;
        transform: scale(2) translate(20%, 21%) rotate(6deg);
    }

    10% {
        opacity: 1;
        transform: scale(2) translate(20%, 21%) rotate(6deg);
    }

    75% {
        opacity: 1;
        transform: scale(1.9) translate(21%, -15%) rotate(0deg) skew(0deg, -14deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.9) translate(21%, -15%) rotate(0deg) skew(0deg, -14deg);
    }
}

.cooling-system-wind2 {
    pointer-events: none;
    animation: cooling-system-wind2 4s ease-in-out infinite;
}

@keyframes cooling-system-wind2 {
    0% {
        opacity: 0;
        transform: scale(2) translate(19.8%, 4.1%);
    }

    10% {
        opacity: 1;
        transform: scale(2) translate(19.8%, 4.1%);
    }

    75% {
        opacity: 1;
        transform: scale(2) translate(18.7%, -5.9%) skew(-17deg, 0deg);
    }

    100% {
        opacity: 0;
        transform: scale(2) translate(18.7%, -5.9%) skew(-17deg, 0deg);
    }
}

.cooling-system-wind3 {
    pointer-events: none;
    animation: cooling-system-wind3 4s ease-in-out infinite;
}

@keyframes cooling-system-wind3 {
    0% {
        opacity: 0;
        transform: scale(2) translate(20.6%, 25.1%);
    }

    10% {
        opacity: 1;
        transform: scale(2) translate(20.6%, 25.1%);
    }

    75% {
        opacity: 1;
        transform: scale(2) translate(20.6%, 7.1%);
    }

    100% {
        opacity: 0;
        transform: scale(2) translate(20.6%, 7.1%);
    }
}