@charset "utf-8";

@import url('https://ids.iwplay.com.tw/includ/footer/footer.css');

*,
a,
span {
    font-family: 'Noto Sans TC', Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, sans-serif;
}

a {
    text-decoration: none !important;
}



body {
  position: relative;
  -webkit-text-size-adjust: 100%;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
span,
a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: none;
}
a:hover {
  text-decoration: none;
}
img {
  border: 0;
  object-fit: cover;
}
video {
  object-fit: cover;
}
table {
  border-collapse: collapse;
}
area {
  outline: none;
}
input,
textarea,
select {
  -webkit-appearance: none;
  outline: none;
  resize: none;
  border-radius: 0;
}
input::-ms-clear {
  display: none;
}
input[type="text"],
input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: inherit;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
h1.wm-public {
  height: 0;
  line-height: 0;
  font-size: 0;
}
.cf:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.cf {
  zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
.auto {
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}


/* 社区 */

.otherPlatform a:hover {
  background-position-y: -0.66rem;
}
.otherPlatform .code {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
}
.otherPlatform a:hover .code {
  display: block;
}
.otherPlatform .code div {
  margin-bottom: 0.1rem;
  border-radius: 0.05rem;
  padding: 0.1rem;
  background: #fff;
}
.otherPlatform .code img {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}


/*====卷軸===*/
/* 細捲軸開始 */
::-webkit-scrollbar {
    height: 5px;
    overflow: visible;
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #6f93cd;
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 0px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #d10003;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:active {
    background-color: #d10003;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track {
    background-color: #19181e;
}

/* 細捲軸結束 */





html,
body {
    padding: 0;
    margin: 0;

    background-color: black !important;
}

section {
    width: 100%;
    display: inline-block;
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
}

.display_none {
    display: none;
}

/*禁止滑動*/
.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}



/*--大背景--*/
.wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 0%;
    overflow: hidden;

    background-color: #000000;
}




/*--↓主視覺區域↓--*/
.kv_zone {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 47.5%;
    /* padding-bottom: 38.2%; */
    background-color: rgb(0, 0, 0);

    background-image: url(https://res1-nte.iwplay.com.tw/events/landingpage_1105/image/pc_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:center 45%;;
    /* filter: brightness(0.5); */
    overflow: hidden;
}

.header_video {
    width: 100vw;
    height: auto;
    top: -5%;
    left: 0%;
    z-index: 1;
}

#homeVideo{
    display: block;
}

#mobileVideo{
    display: none;
}

.header_video video{
    object-fit: cover;
    object-position: left top;
    height: 100%;
    width: 100%;
}

/*----logo----*/
.big_logo {
    position: absolute;
    width: 20vw;
    height: auto;
    padding-bottom: 0%;
    top: 18%;
    left: 15%;

    z-index: 65;

    /* cursor: pointer; */
}

.indexBtns{
    top: 53%;
    left: 17.5%;
    z-index: 98;
}
.indexYYBtn {
    width: 15vw;
    height: 8.5vw;
    left: 50%;
    background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/indexYYBtn.png) no-repeat 0 0;
    background-size: 100% auto;
}

.indexYYBtn:hover{
    transform: translateY(10%);
    transition: 0.3s;
}

.indexFoot {
  left: 0;
  bottom: -1px;
  width: 100vw;
  height: auto;
  padding-bottom: 8%;
  
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/indexFoot.png)no-repeat center top;
  background-size: cover;
    z-index: 99;
}
.indexFootBox{
    width: 100%;
    height: 30%;
    left: 0%;
    padding: 0 1%;
    bottom: 5%;
    background-color: #d1000300;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}



.indexFootWelcome {
    
    width: auto;
    height: 100%;
    background-color: rgba(136, 255, 0, 0);
    padding: 0.5%;
}

.indexFootBoxLeft{
    width: 30%;
    height: 100%;
    background-color: rgba(136, 255, 0, 0);
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}

.indexFootNte {
  height: 100%;
  width: auto;
  margin-right: 5%;
  padding: 1%;
  background-color: rgba(0, 17, 255, 0);
}

.index_otherPlatform {
    width: 80%;
    background-color: rgba(255, 0, 221, 0);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.index_otherPlatform a {
    height: 100%;
    width: auto;
}

.index_otherPlatform a img{
    width: 100%;
    height: 100%;
}
/*----sns----*/

/* .platform_facebook

.platform_youtube

.platform_discord

.platform_ins

.platform_twitter

.platform_ps */


@media (max-width:1100px) {
    .kv_zone {
        padding-bottom: 167%;
        padding-top: 0%;
        background-image: url(https://res1-nte.iwplay.com.tw/events/landingpage_1105/image/sp_bg.webp);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top;
    }

    #homeVideo{
        display: none;
    }

    #mobileVideo{
        
        display: block;
    }

    /*--LOGO--*/
    .big_logo {
        width: 50vw;
        top: 50%;
        left: 25%;
    }


    /*--SNS--*/
    .snslink {
        width: 55%;
        padding-bottom: 10%;
        top: 2%;
        right: -6%;
    }



    /*---- 大標 ----*/
    .pc_big_title {
        width: 110vw;
        padding-bottom: 52%;
        top: 39%;
        right: -6%;
        background-image: url(https://res1-nte.iwplay.com.tw/events/landingpage_1105/image/big_title_bg_m.webp);
        background-repeat: no-repeat;
        background-size: 100%;
    }



    .indexBtns{
        top: 73%;
        left: 25%;
        z-index: 98;
    }
    .indexYYBtn {
        width: 50vw;
        height: 27.5vw;
    }

    .indexFoot{
        display: none;
    }


}








/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            footer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/

/*---- footer ----*/
footer {
    position: relative;
    color: #2f2f2f;
    /*font-size: 0.4vw !important;*/
    font-weight: 500;
    background: #000000;
    z-index: 5;
}

footer .container {
    position: relative;
    padding: 0.6vw 0;
    max-width: 100% !important;
    width: 100%;
    text-align: center;
}

footer .container .copyright,
footer .container .copyright .company,
footer .container .copyright p,
footer .container .grading,
footer .container .grading img,
footer .container .grading ul,
footer .container .copyright .icon {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
    font-size: .6rem;
}

footer .container .copyright img {
    width: 7.5vw;
}

footer .container .copyright a img {
    margin-left: 0.4vw;
    width: 5.782vw;
}

footer .container .copyright p {
    margin-left: 0.6vw;
    text-align: left;
    color: #fff;
}

footer .container .copyright p a {
    color: #fff;
}

footer .container .copyright p a:hover {
    text-decoration: underline;
}

footer .container .grading {
    margin-left: 1vw;
}

footer .container .grading img {
    width: 1.9795vw;
}

footer .container .grading ul {
    margin-left: 0.4vw;
    padding-left: 0;
    list-style: none;
    color: #fff;
}

footer .container .icon img {
    width: 2.5vw;
    margin: 0 6px;
}


@media (max-width: 1199.98px) {

    footer {
        padding: 3vw 0;
        font-size: 1vw;
        min-height: initial !important;
    }

    footer .container .copyright .company,
    footer .container .grading {
        display: block;
    }

    footer .container .copyright img {
        width: 12.011vw;
    }

    footer .container .copyright a img {
        margin-left: 1vw;
        width: 9.258vw;
    }

    footer .container .copyright p {
        margin: 1.5vw auto;
        text-align: center;
    }

    footer .container .grading img {
        width: 3.17vw;
    }
}



@media (max-width: 991.98px) {

    footer {
        font-size: 1.3vw;
    }

    footer .container .copyright img {
        width: 14.531vw;
    }

    footer .container .copyright a img {
        width: 11.202vw;
    }

    footer .container .grading img {
        width: 3.835vw;
    }
}



@media (max-width: 767px) {
    footer {
        font-size: 1.7vw;
    }

    footer .container .copyright img {
        width: 18.775vw;
    }

    footer .container .copyright a img {
        width: 14.474vw;
    }

    footer .container .grading img {
        width: 4.955vw;
    }
}



@media (max-width: 575.98px) {
    footer {
        padding: 6vw 0;
        font-size: 2vw;
    }

    footer .container .copyright img {
        width: 25.045vw;
    }

    footer .container .icon img {
        width: 13.5vw !important;
        margin: 11% 0px;
    }

    footer .container .copyright a img {
        width: 19.305vw;
    }

    footer .container .copyright p {
        margin: 2.5vw auto;
    }

    footer .container .grading img {
        width: 6.61vw;
    }

    footer .container .grading ul {
        margin-left: 1vw;
    }
}



@media (max-width: 430px) {
    footer {
        font-size: 2.7vw;
    }

    footer .container .copyright img {
        width: 33.49vw;
    }

    footer .container .copyright a img {
        width: 25.815vw;
    }

    footer .container .copyright p {
        margin: 3vw auto;
    }

    footer .container .grading img {
        width: 8.84vw;
    }
}