@charset "utf-8";

html, body { background-color: rgb(243, 250, 255) !important; scroll-behavior: smooth; }

a { color: inherit; text-decoration: none !important; }

a, a:hover { transition: 0.3s ease-out; }

::-webkit-scrollbar { width: 4px; height: 4px; }

::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0) !important; }

::-webkit-scrollbar-thumb { background: rgb(162, 215, 255); }

::-webkit-scrollbar-thumb:hover { background: rgb(162, 215, 255); }

#main { padding-top: 80px; }

#header { position: fixed; top: 0px; left: 0px; width: 100%; height: 80px; display: flex; align-items: center; z-index: 99; transition: none; background: linear-gradient(rgb(239, 248, 255) 5.52%, rgb(255, 255, 255) 37.95%, rgb(237, 247, 255) 82.04%, rgb(253, 254, 255) 96.05%, rgb(181, 210, 235) 98.75%); }

#header .header-main .navbar .navbar-brand { padding: 0px; margin: 0px; }

#header .header-main .navbar .navbar-brand .header-logo { width: 170px !important; object-fit: contain !important; }

#header .header-main .navbar #navbarsMenu .navbar-nav { flex: 1 1 0%; align-items: center; }

#header .header-main .navbar #navbarsMenu .navbar-nav .menu-item { cursor: pointer; transition: none; }

#header .header-main .navbar #navbarsMenu .navbar-nav .menu-item .nav-link { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; font-family: "Noto Sans Display", sans-serif; font-weight: 400; font-size: 14px; color: rgb(63, 80, 117); padding: 0px 12px; }

#header .header-main .navbar #navbarsMenu .navbar-nav .menu-item .nav-link.active, #header .header-main .navbar #navbarsMenu .navbar-nav .menu-item .nav-link:hover { color: rgb(36, 156, 252); }

#header .header-main .navbar .button-link { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: "Noto Sans Display", sans-serif; font-weight: 500; font-size: 14px; color: rgb(36, 156, 252); height: 38px; border: 1.5px solid rgb(36, 156, 252); border-radius: 100px; text-decoration: none; padding: 0px 16px; }

#header .header-main .navbar .button-link img { width: 20px; height: 20px; object-fit: cover; }

.section-wrap { position: relative; padding: 30px 0px; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow-x: hidden; }

.section-wrap .title.custom-style { display: flex; align-items: center; justify-content: center; text-align: center; gap: 20px; }

.section-wrap .title.custom-style .title-left, .section-wrap .title.custom-style .title-right { flex-shrink: 0; display: block; width: 300px; height: 10px; background-size: contain; background-repeat: no-repeat; background-image: url("./497f254c6249.png"); background-position: 100% center; }

.section-wrap .title.custom-style .title-right { background-image: url("./d9d84b0d517f.png"); background-position: 0px center; }

.section-wrap .title.custom-style .title-tag { position: relative; font-style: normal; font-family: "Noto Sans Display", sans-serif; font-weight: 700; font-size: 30px; line-height: 40px; color: rgb(63, 80, 117); margin-bottom: 0px; }

.section-wrap .sub-title { color: rgb(121, 129, 164); margin: 8px auto 40px; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; text-align: center; }

.section-wrap .text-title { display: flex; align-items: flex-end; height: 44px; margin-bottom: 32px; }

.section-wrap .text-title .text-title-main { font-family: "Noto Sans Display", sans-serif; font-size: 40px; line-height: 44px; font-weight: 700; transform: matrix(1, 0, -0.18, 0.98, 0, 0); color: rgb(63, 80, 117); margin-bottom: 0px; }

.section-wrap .text-title .text-sub-title { position: relative; top: -3px; margin-left: 6px; align-self: flex-end; color: rgba(255, 255, 255, 0.9); font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0.1em; text-transform: uppercase; transform: matrix(1, 0, -0.22, 0.98, 0, 0); opacity: 0.8; text-shadow: rgb(116, 196, 255) 1px 0px 0px, rgb(116, 196, 255) 0px 1px 0px, rgb(116, 196, 255) -1px 0px 0px, rgb(116, 196, 255) 0px -1px 0px; margin-bottom: 0px !important; }

.section-wrap#banner { padding-top: 0px; margin-top: -25px; }

.section-wrap#banner .banner-home-wrap { position: relative; width: 100%; }

.section-wrap#banner .banner-home-wrap::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); background-image: url("./47312c9eaf08.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; }

.section-wrap#banner .banner-home-wrap .banner-home { position: relative; display: flex; z-index: 1; }

.section-wrap#banner .banner-home-wrap .banner-home .left, .section-wrap#banner .banner-home-wrap .banner-home .right { width: 50%; min-width: 0px; }

.section-wrap#banner .banner-home-wrap .banner-home .banner-title { color: rgb(63, 80, 117); font-style: normal; font-family: "Noto Sans Display", sans-serif; font-weight: 700; font-size: 56px; line-height: 74px; margin-top: 100px; }

.section-wrap#banner .banner-home-wrap .banner-home .banner-line { margin-top: 20px; width: 52px; height: 5px; background-color: rgb(63, 80, 117); }

.section-wrap#banner .banner-home-wrap .banner-home .banner-desc { margin-top: 20px; margin-bottom: 17px; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; line-height: 28px; color: rgb(97, 103, 131); }

.section-wrap#banner .banner-home-wrap .banner-home .banner-desc * { margin: 0px !important; padding: 0px !important; font-family: "Noto Sans Display", sans-serif !important; font-style: normal !important; font-weight: 500 !important; font-size: 14px !important; line-height: 28px !important; color: rgb(97, 103, 131) !important; }

.section-wrap#banner .banner-home-wrap .banner-home .banner-img { position: relative; width: 100%; }

.section-wrap#banner .banner-home-wrap .banner-home .banner-img img { width: 100%; height: auto; max-width: 100%; }

.section-wrap#banner .banner-home-wrap .banner-home .banner-slider .swiper-slide img { height: 64px; }

.section-wrap#banner .banner-contact-wrap { position: relative; width: 100%; }

.section-wrap#banner .banner-contact-wrap .banner-contact { position: relative; z-index: 1; padding: 20px 48px; box-shadow: rgba(159, 177, 191, 0.25) 0px 12px 20px; border-radius: 32px; background-color: rgb(255, 255, 255); }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgb(215, 234, 255); }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item { position: relative; }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item:not(:last-of-type)::after { content: ""; position: absolute; top: 50%; right: 0px; width: 1px; height: 24px; background-color: rgb(215, 234, 255); transform: translateY(-50%); }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box { position: relative; padding: 0px 20px; height: 56px; display: flex; align-items: center; justify-content: center; }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box img { width: 32px; height: 32px; flex-shrink: 0; object-fit: cover; object-position: center center; }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box img.icon-arrow { width: 24px; height: 24px; }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box > div { display: inline-block; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 500; font-size: 16px; line-height: 22px; margin-left: 12px; margin-right: 20px; color: rgb(63, 80, 117); transition: 0.3s ease-out; }

.section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box > div:hover { color: rgb(36, 156, 252); }

.section-wrap#banner .banner-contact-wrap .banner-contact .banner-desc { margin-top: 20px; margin-bottom: 12px; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; line-height: 28px; color: rgb(63, 80, 117); }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list { display: flex; align-items: center; gap: 16px; }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item { display: flex; align-items: center; padding: 12px 20px; gap: 12px; flex: 1 1 0%; width: 100%; height: 60px; border-radius: 20px; background-color: rgb(233, 245, 255); }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item img { width: 40px; height: 40px; object-fit: cover; object-position: center center; flex-shrink: 0; }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item p { font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; color: rgb(121, 129, 164); margin-bottom: 0px; flex-grow: 1; }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item .button-group { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item .button-group button { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: "Noto Sans Display", sans-serif; font-weight: 500; font-size: 16px; color: rgb(255, 255, 255); height: 36px; min-width: 88px; border: 1.5px solid rgb(36, 156, 252); border-radius: 100px; text-decoration: none; padding: 0px 17px; background-color: rgba(0, 0, 0, 0); overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("./e5e13ede091f.png"); }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item .button-group button.button-outline { color: rgb(36, 156, 252); background-image: none; }

.section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item .button-group button:hover { background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("./e5e13ede091f.png"); color: rgb(255, 255, 255); }

.section-wrap#platform .platform-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.section-wrap#platform .platform-list .platform-item { position: relative; padding-top: 4px; padding-bottom: 32px; background: linear-gradient(rgb(255, 255, 255) 45.81%, rgb(255, 251, 249)); border: 3px solid rgb(255, 255, 255); filter: drop-shadow(rgba(159, 177, 191, 0.25) 0px 12px 20px); border-radius: 32px; text-align: center; transition: 0.3s; cursor: pointer; box-shadow: rgba(159, 177, 191, 0.25) 0px 12px 20px; }

.section-wrap#platform .platform-list .platform-item .platform-img { width: 100%; height: auto; max-width: 100%; object-fit: cover; object-position: center center; }

.section-wrap#platform .platform-list .platform-item .platform-title { font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 600; font-size: 24px; line-height: 34px; color: rgb(63, 80, 117); margin-top: 18px; margin-bottom: 12px; text-align: center; }

.section-wrap#platform .platform-list .platform-item .platform-content { padding: 0px 18px; margin: 0px auto; height: 120px; overflow: auto; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 150%; color: rgb(121, 129, 164); text-align: justify; }

.section-wrap#platform .platform-list .platform-item .platform-button { margin: 32px auto 0px; text-align: center; font-family: "Noto Sans Display", sans-serif; font-weight: 400; font-size: 16px; color: rgb(36, 156, 252); min-width: 132px; width: auto; height: 40px; border: 1.5px solid rgb(36, 156, 252); border-radius: 100px; text-decoration: none; padding: 0px 16px; background-color: rgba(0, 0, 0, 0); }

.section-wrap#platform .platform-list .platform-item:hover { transform: scale(1.06); }

.section-wrap#platform .platform-list .platform-item:hover .platform-button { background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("./e5e13ede091f.png"); color: rgb(255, 255, 255); }

.section-wrap#about .about-wrap { position: relative; padding: 83px 0px; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("./b314bce03943.jpg"); }

.section-wrap#about .about-wrap .about-content { position: relative; width: 100%; max-width: 1114px; margin: 0px auto; background: rgba(255, 255, 255, 0.9); border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 62, 148, 0.5) 0px 10px 60px; border-radius: 60px; padding-top: 34px; padding-left: 136px; padding-right: 22px; }

.section-wrap#about .about-wrap .about-content .about-left { position: relative; width: 100%; max-width: 465px; margin-top: 10px; }

.section-wrap#about .about-wrap .about-content .about-left .about-group { display: none; }

.section-wrap#about .about-wrap .about-content .about-left .about-group.active { display: block; }

.section-wrap#about .about-wrap .about-content .about-left .about-group .text-title { margin-bottom: 32px; }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word { padding-right: 5px; height: 415px; overflow-y: auto; }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word::-webkit-scrollbar { width: 4px; height: 4px; }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0) !important; }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word::-webkit-scrollbar-thumb { background: rgb(162, 215, 255); }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word::-webkit-scrollbar-thumb:hover { background: rgb(162, 215, 255); }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word p { margin-bottom: 17px; text-align: justify; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; color: rgb(121, 129, 164); line-height: 1.5715; }

.section-wrap#about .about-wrap .about-content .about-left .about-group .about-word p:last-child { margin-bottom: 0px; }

.section-wrap#about .about-wrap .about-content .about-right { position: absolute; right: -120px; top: -6px; }

.section-wrap#about .about-wrap .about-content .about-right .about-img { position: relative; width: 610px; height: 595px; overflow: hidden; }

.section-wrap#about .about-wrap .about-content .about-right .about-img img { width: 100%; max-width: 100%; height: auto; object-fit: contain; }

.section-wrap#about .about-wrap .about-content .about-nav-list { position: absolute; left: -24px; top: 110px; list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 36px; }

.section-wrap#about .about-wrap .about-content .about-nav-list li { display: flex; align-items: center; justify-content: flex-end; padding: 8px 16px; text-align: right; width: 130px; height: 38px; line-height: 38px; background: rgb(255, 255, 255); box-shadow: rgba(148, 181, 225, 0.3) 0px 4px 12px; border-radius: 40px; position: relative; cursor: pointer; }

.section-wrap#about .about-wrap .about-content .about-nav-list li img { width: 48px; height: 48px; position: absolute; top: -5px; left: 0px; }

.section-wrap#about .about-wrap .about-content .about-nav-list li span { font-family: "Noto Sans Display", sans-serif; font-weight: 600; font-size: 14px; color: rgb(18, 125, 204); line-height: 38px; }

.section-wrap#about .about-wrap .about-content .about-nav-list li.active { box-shadow: rgba(0, 80, 189, 0.3) 0px 4px 12px; background: radial-gradient(85.99% 191.66% at 50% -32.28%, rgb(182, 233, 255) 0px, rgb(115, 213, 255) 26.77%, rgb(32, 160, 255) 45.96%, rgb(61, 114, 250) 66.67%, rgb(32, 160, 255) 100%); }

.section-wrap#about .about-wrap .about-content .about-nav-list li.active span { color: rgb(255, 255, 255); }

.section-wrap#hotGame .hotgame-nav-list { margin: 0px auto; width: max-content; height: 52px; background: rgb(232, 245, 255); border-radius: 100px; display: flex; align-items: center; justify-content: center; padding: 6px; list-style: none; }

.section-wrap#hotGame .hotgame-nav-list li div { min-width: 117px; height: 40px; line-height: 40px; text-align: center; font-weight: 500; cursor: pointer; color: rgb(97, 103, 131); font-size: 14px; }

.section-wrap#hotGame .hotgame-nav-list li.active { border-radius: 100px; background: linear-gradient(rgb(255, 255, 255) 70.48%, rgb(232, 245, 255) 110.71%); box-shadow: rgba(105, 168, 222, 0.25) 0px 4px 12px; }

.section-wrap#hotGame .hotgame-nav-list li.active div { font-size: 16px; color: rgb(18, 125, 204); }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider { width: 1300px; margin: 0px auto; padding: 20px 50px 55px; right: 55px; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item { position: relative; display: flex; justify-content: flex-end; margin: auto; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-img { position: absolute; left: -40px; top: -20px; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: center center; overflow: hidden; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-img img { object-fit: contain; width: 710px; height: 520px; filter: none; background-image: none; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap { position: relative; width: 897px; height: 445px; border: 3px solid rgb(232, 245, 255); filter: drop-shadow(rgba(159, 177, 191, 0.25) 0px 12px 20px); border-radius: 60px; box-shadow: rgba(159, 177, 191, 0.25) 0px 12px 20px; background: linear-gradient(rgb(255, 255, 255), rgba(243, 250, 255, 0)); }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content { width: 457px; position: absolute; top: 95px; right: 61px; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content .text-title { margin-bottom: 24px; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content .hotgame-word { padding-right: 5px; height: 415px; overflow-y: auto; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content .hotgame-word p { margin-bottom: 17px; text-align: justify; font-family: "Noto Sans Display", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; color: rgb(121, 129, 164); line-height: 1.5715; }

.section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content .hotgame-word p:last-child { margin-bottom: 0px; }

.section-wrap#question #accordionQuestion .accordion-item { border: 0px; border-radius: 16px; background-color: rgb(255, 255, 255); box-shadow: rgba(159, 177, 191, 0.1) 0px 6px 12px; }

.section-wrap#question #accordionQuestion .accordion-item:not(:last-of-type) { margin-bottom: 12px; }

.section-wrap#question #accordionQuestion .accordion-item .accordion-header .accordion-button { line-height: 46px; font-family: "Noto Sans Display", sans-serif; font-weight: 500; font-size: 16px; color: rgb(63, 80, 117); margin: 0px; padding: 12px 20px; background-color: rgba(0, 0, 0, 0); box-shadow: none; height: 46px !important; }

.section-wrap#question #accordionQuestion .accordion-item .accordion-header .accordion-button::after { width: 20px; height: 20px; background-image: url("./7ea45dd73b74.png"); background-size: 20px auto; transform: rotate(180deg); }

.section-wrap#question #accordionQuestion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { transform: rotate(0deg); }

.section-wrap#question #accordionQuestion .accordion-item .accordion-body { border-top: 1px solid rgb(232, 245, 255); padding: 12px 20px; font-family: "Noto Sans Display", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: justify; color: rgb(121, 129, 164); }

.section-wrap#dynamic .dynamic-content { display: flex; box-shadow: rgba(159, 177, 191, 0.25) 0px 12px 20px; border-radius: 32px; overflow: hidden; }

.section-wrap#dynamic .dynamic-content .text-title { align-items: flex-start; }

.section-wrap#dynamic .dynamic-content .text-title .text-title-main { font-size: 28px; line-height: 33px; }

.section-wrap#dynamic .dynamic-content .text-title .text-sub-title { font-size: 14px; line-height: 14px; top: -16px; letter-spacing: -1px; }

.section-wrap#dynamic .dynamic-content .dynamic-left { width: 466px; height: auto; padding: 40px 0px 32px 32px; background: linear-gradient(rgb(255, 255, 255), rgb(243, 250, 255)); flex-shrink: 0; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap { width: 420px; padding-right: 30px; overflow-y: auto; height: 520px; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item { margin-top: 10px; border-radius: 20px; border: 1px solid rgb(232, 245, 255); background: linear-gradient(rgb(255, 255, 255), rgb(243, 250, 255)); padding: 0px 20px; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item:not(:last-of-type) { margin-bottom: 12px; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item .accordion-header .accordion-button { line-height: 24px; font-family: "Noto Sans Display", sans-serif; font-weight: 600; font-size: 20px; color: rgb(63, 80, 117); margin: 0px; padding: 0px; background-color: rgba(0, 0, 0, 0); box-shadow: none; min-height: 52px !important; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item .accordion-header .accordion-button::after { width: 24px; height: 24px; background-image: url("data:,"); background-size: 24px auto; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { transform: rotate(-90deg); }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item .accordion-body { border-top: 1px solid rgb(232, 245, 255); padding: 8px 0px 12px; font-family: "Noto Sans Display", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; text-align: justify; color: rgb(121, 129, 164); }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item .accordion-body > p { font-family: "Noto Sans Display", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; text-align: justify; color: rgb(121, 129, 164); margin-bottom: 0px; }

.section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap #accordionDynamic .accordion-item .accordion-body > p:first-child { margin-bottom: 8px; }

.section-wrap#dynamic .dynamic-content .dynamic-right { height: auto; padding: 40px 0px 32px 32px; position: relative; z-index: 1; box-shadow: rgba(159, 177, 191, 0.25) 0px 12px 20px; background: linear-gradient(rgb(255, 255, 255), rgb(243, 250, 255)); flex-grow: 1; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap { width: 100%; padding-right: 30px; overflow-y: auto; height: 500px; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList { list-style: none; margin: 0px; padding: 0px; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item { display: flex; gap: 20px; padding: 12px 0px; width: 100%; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-date { width: 46px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-start; position: relative; text-align: left; margin-top: 8px; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-date > div { width: 100%; font-family: sans-serif; font-weight: 700; letter-spacing: -2px; font-size: 32px; line-height: 38px; color: rgb(18, 125, 204); }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-date > span { display: inline-block; margin-top: 2px; width: 100%; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 16px; line-height: 19px; color: rgb(121, 129, 164); }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-date::after { content: ""; display: block; position: absolute; right: 0px; top: 18px; width: 1px; height: 40px; background: rgb(232, 245, 255); }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-info { flex-grow: 1; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-info .notice-title { font-family: "Noto Sans Display", sans-serif; font-weight: 600; font-size: 20px; line-height: 28px; color: rgb(63, 80, 117); margin-bottom: 8px; }

.section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap #dynamicNoticeList .notice-item .notice-info .notice-intro { font-family: "Noto Sans Display", sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: rgb(121, 129, 164); text-align: justify; margin-bottom: 0px; }

.section-wrap#information { padding-bottom: 60px; }

.section-wrap#information .information-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.section-wrap#information .information-list .information-item { background: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); border-radius: 20px; padding: 28px 24px; position: relative; cursor: pointer; transition: 0.3s; overflow: hidden; }

.section-wrap#information .information-list .information-item .information-date { z-index: 1; position: relative; font-size: 14px; font-family: "Noto Sans Display", sans-serif; line-height: 20px; color: rgb(148, 154, 182); }

.section-wrap#information .information-list .information-item .information-title { z-index: 1; position: relative; font-family: "Noto Sans Display", sans-serif; margin-top: 20px; font-weight: 500; font-size: 20px; line-height: 28px; color: rgb(63, 80, 117); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: 0.3s; }

.section-wrap#information .information-list .information-item .information-desc { z-index: 1; position: relative; font-weight: 400; font-family: "Noto Sans Display", sans-serif; font-size: 14px; line-height: 20px; color: rgb(97, 103, 131); margin-top: 12px; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.section-wrap#information .information-list .information-item .read-more { position: relative; z-index: 1; display: flex; align-items: center; width: max-content; padding: 4px 0px; transition: 0.3s; gap: 4px; font-size: 14px; font-weight: 400; color: rgb(36, 156, 252); }

.section-wrap#information .information-list .information-item .read-more span { display: inline-block; }

.section-wrap#information .information-list .information-item .read-more img { width: 16px; height: 16px; flex-shrink: 0; }

.section-wrap#information .information-list .information-item .hover-bg-img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: 0.3s; display: flex; align-items: center; justify-content: center; background-color: rgba(57, 56, 55, 0.7); opacity: 0; }

.section-wrap#information .information-list .information-item .hover-bg-img img { width: 170px; opacity: 0.7; }

.section-wrap#information .information-list .information-item:hover { transform: translateY(-12px); }

.section-wrap#information .information-list .information-item:hover .information-title, .section-wrap#information .information-list .information-item:hover .information-desc { color: rgb(255, 255, 255); }

.section-wrap#information .information-list .information-item:hover .read-more { background-color: rgb(255, 255, 255); padding: 4px 12px; border-radius: 30px; box-shadow: rgba(111, 157, 200, 0.35) 0px 3px 5px; }

.section-wrap#information .information-list .information-item:hover .hover-bg-img { opacity: 1; }

.section-wrap#information .information-link-wrap { text-align: center; margin-top: 40px; }

.section-wrap#information .information-link-wrap .information-link { color: rgb(36, 156, 252); font-family: "Noto Sans Display", sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; }

#footer { position: relative; padding: 40px 0px; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: rgb(32, 40, 59); }

#footer .footer-main { display: flex; }

#footer .footer-main .footer-copyright { flex-shrink: 0; width: 400px; padding-right: 20px; color: rgb(121, 132, 158); border-right: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }

#footer .footer-main .footer-copyright .footer-logo { width: 220px; margin: auto auto 24px; }

#footer .footer-main .footer-copyright p { font-family: "Noto Sans Display", sans-serif; font-size: 14px; line-height: 1.5; color: rgb(121, 132, 158); font-weight: 400; margin-bottom: 22px; }

#footer .footer-main .footer-copyright a { color: rgb(36, 156, 252) !important; }

#footer .footer-main .footer-navigation { flex-grow: 1; padding-left: 80px; }

#footer .footer-main .footer-navigation .navigation-title { font-family: "Noto Sans Display", sans-serif; font-weight: 600; font-size: 18px; line-height: 24px; color: rgb(255, 255, 255); margin-bottom: 12px; }

#footer .footer-main .footer-navigation .navigation-list { list-style: none; margin: 0px; padding: 0px; display: flex; align-items: center; gap: 24px 48px; flex-wrap: wrap; }

#footer .footer-main .footer-navigation .navigation-list li a { display: block; width: max-content; font-family: "Noto Sans Display", sans-serif; font-size: 14px; line-height: 24px; overflow: hidden; color: rgb(121, 132, 158); }

#footer .footer-main .footer-navigation .navigation-list li a:hover { color: rgb(36, 156, 252); }

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1224px !important; }
}

@media (max-width: 1199px) {
  .navbar-toggler { height: 40px; padding: 8px; margin-left: 8px; border-radius: 0px; border: 0px !important; }
  .navbar-toggler:focus, .navbar-toggler:active { outline: none !important; box-shadow: none !important; border: 0px !important; }
  .toggler-icon { display: block; width: 24px; height: 3px; transition: none; background-color: rgb(63, 80, 117); }
  .toggler-icon.middle-bar { margin: 5px auto; }
  #header .header-main .navbar #navbarsMenu { top: 80px; width: 100%; height: calc(-80px + 100vh); border: 0px; transition: none; }
  #header .header-main .navbar #navbarsMenu .navbar-nav { max-width: 960px; margin: 20px auto !important; }
  #header .header-main .navbar #navbarsMenu .navbar-nav .menu-item { width: 100%; }
  #header .header-main .navbar #navbarsMenu .navbar-nav .menu-item .nav-link { height: 40px; padding: 0px 20px; justify-content: flex-start; }
  .section-wrap#banner .banner-home-wrap .banner-home { padding-top: 40px; }
  .section-wrap#banner .banner-home-wrap .banner-home .banner-title { margin-top: 0px; }
  .section-wrap#banner .banner-contact-wrap .banner-contact { margin-top: 20px !important; }
  .section-wrap#platform .platform-list .platform-item .platform-content { height: 180px; }
  .section-wrap#about .about-wrap .about-content { max-width: 900px; }
  .section-wrap#about .about-wrap .about-content .about-left { max-width: 400px; }
  .section-wrap#about .about-wrap .about-content .about-left .about-group .about-word { height: 340px; }
  .section-wrap#about .about-wrap .about-content .about-right .about-img { width: 520px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider { width: auto; right: unset; padding: 20px 50px 0px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item { flex-direction: column-reverse; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-img { position: relative; left: unset; top: unset; margin: -220px auto auto; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap { width: auto; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content { position: relative; width: auto; top: unset; right: unset; padding: 40px 55px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content .hotgame-word { height: 150px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slide { width: auto; padding: 20px 50px 55px; right: unset; }
  #footer .footer-main .footer-navigation .navigation-list { gap: 8px 20px; flex-wrap: wrap; }
}

@media (max-width: 992px) {
  #header { top: -3px; }
  .section-wrap .title.custom-style .title-left, .section-wrap .title.custom-style .title-right { width: 12%; }
  .section-wrap#banner .banner-home-wrap .banner-home { flex-direction: column; padding-top: 40px; }
  .section-wrap#banner .banner-home-wrap .banner-home .left, .section-wrap#banner .banner-home-wrap .banner-home .right { width: 100%; }
  .section-wrap#banner .banner-home-wrap .banner-home .banner-title { margin-top: 0px; font-size: 40px; line-height: 60px; }
  .section-wrap#banner .banner-home-wrap .banner-home .banner-slider .swiper-slide img { height: 64px; object-fit: contain; }
  .section-wrap#banner .banner-contact-wrap .banner-contact { padding: 20px 30px; margin-top: 20px !important; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .contact-list { display: flex; flex-direction: column; gap: 0px; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box { justify-content: flex-start; padding: 0px; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item .box > div { min-width: 100px; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .contact-list .contact-item::after { content: none !important; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .support-list { flex-direction: column; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item { flex-wrap: wrap; }
  .section-wrap#banner .banner-contact-wrap .banner-contact .support-list .support-item .button-group { width: 100%; }
  .section-wrap#platform .platform-list { display: flex; flex-direction: column; }
  .section-wrap#platform .platform-list .platform-item .platform-content { height: auto; }
  .section-wrap#platform .platform-list .platform-item:hover { transform: scale(1); }
  .section-wrap#about .about-wrap { padding-left: 40px; padding-right: 40px; }
  .section-wrap#about .about-wrap .about-content { max-width: 900px; padding: 0px 20px; display: flex; flex-direction: column-reverse; }
  .section-wrap#about .about-wrap .about-content .about-left { max-width: 400px; padding-bottom: 40px; }
  .section-wrap#about .about-wrap .about-content .about-left .about-group .about-word { height: 340px; }
  .section-wrap#about .about-wrap .about-content .about-left .about-group .text-title { flex-direction: column; align-items: flex-start; height: auto; }
  .section-wrap#about .about-wrap .about-content .about-left .about-group .text-title .text-sub-title { margin-right: auto; top: 0px; }
  .section-wrap#about .about-wrap .about-content .about-right { position: relative; top: unset; right: unset; margin-bottom: 0px; }
  .section-wrap#about .about-wrap .about-content .about-right .about-img { width: 400px; height: auto; }
  .section-wrap#about .about-wrap .about-content .about-right .about-img img { height: auto; }
  .section-wrap#hotGame .hotgame-nav-list { flex-wrap: wrap; height: auto; width: 100%; border-radius: 30px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider { padding: 20px 0px 0px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item { flex-direction: column-reverse; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-img { position: relative; left: unset; top: unset; margin: -200px auto auto; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-img img { height: auto; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap { width: auto; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content { position: relative; width: auto; top: unset; right: unset; padding: 40px 30px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slider .swiper-slide .hotgame-item .hotgame-content-wrap .hotgame-content .hotgame-word { height: 145px; }
  .section-wrap#hotGame .hotgame-slider-wrap .hotgame-slide { width: auto; padding: 20px 50px 55px; right: unset; }
  .section-wrap#question #accordionQuestion .accordion-item .accordion-header .accordion-button { line-height: 1.5; column-gap: 20px; height: auto !important; }
  .section-wrap#question #accordionQuestion .accordion-item .accordion-header .accordion-button::after { width: 30px; height: 30px; background-size: 30px auto; }
  .section-wrap#dynamic .dynamic-content { flex-direction: column; width: 100%; box-shadow: none; overflow: auto; gap: 20px; }
  .section-wrap#dynamic .dynamic-content .dynamic-left { box-shadow: rgba(159, 177, 191, 0.25) 0px 12px 20px; }
  .section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap { height: auto; }
  .section-wrap#dynamic .dynamic-content .dynamic-left, .section-wrap#dynamic .dynamic-content .dynamic-right { width: 100%; padding: 40px 30px; }
  .section-wrap#dynamic .dynamic-content .dynamic-left .content-wrap, .section-wrap#dynamic .dynamic-content .dynamic-right .content-wrap { width: 100%; padding: 0px; }
  .section-wrap#information .information-list { display: flex; flex-direction: column; }
  #footer { padding-bottom: 50px; }
  #footer .footer-main { flex-direction: column; gap: 40px; }
  #footer .footer-main .footer-copyright { width: 100%; border: 0px; padding: 0px; }
  #footer .footer-main .footer-copyright .footer-logo { margin-bottom: 0px; }
  #footer .footer-main .footer-copyright p { margin-bottom: 12px; }
  #footer .footer-main .footer-navigation { width: 100%; padding: 0px; text-align: center; }
  #footer .footer-main .footer-navigation .navigation-list { justify-content: center; gap: 8px 20px; flex-wrap: wrap; }
}