@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/css/fonts/Poppins/Poppins_400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/css/fonts/Poppins/Poppins_500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/css/fonts/Poppins/Poppins_600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/css/fonts/Poppins/Poppins_700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

/* Navbar */
.container { max-width: 1170px; margin: auto; padding: 0 15px; }
.header { position: relative; left: 0; top: 0; width: 100%; border-bottom: 1px solid hsla(0, 0%, 100%, 0.2); background: linear-gradient(-30deg, rgba(238, 29, 176, 0.65) 0%, rgba(108, 28, 253, 0.65) 40%, rgba(108, 28, 253, 0.65) 100%); }
.header .container { display: flex; align-items: center; justify-content: space-between; }
.header .logo img { vertical-align: middle; transform: translateY(2px); }
.header .menu .head { display: none; }
.header .menu ul { list-style: none; }
.header .menu > ul > li { display: inline-block; }
.header .menu > ul > li:not(:last-child) { margin-right: 40px; }
.header .menu .dropdown { position: relative; }
.header .menu a { text-decoration: none; text-transform: capitalize; font-size: 16px; color: hsl(0, 0%, 100%); line-height: 1.5; display: block; position: relative; transition: color 0.4s ease-in-out; }
.header .menu > ul > li > a { padding: 24px 0; }
.header .menu > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #00ff99; transition: width 0.4s ease-in-out; }
.header .menu > ul > li > a:hover { color: #00ff99; }
.header .menu > ul > li > a:hover::after { width: 100%; }
.header .menu > ul > .dropdown > a { padding-right: 15px; }
.header .menu i { font-size: 10px; pointer-events: none; user-select: none; position: absolute; color: hsl(0, 0%, 100%); top: calc(50% - 5px); }
.header .menu > ul > li > i { right: 0; }
.header .menu .sub-menu { position: absolute; top: 100%; left: 0; width: 230px; padding: 15px 0; background-color: hsl(260, 50%, 45%); box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.5); z-index: 1; transform-origin: top; transform: scaleY(0); visibility: hidden; opacity: 0; }
.header .menu .sub-menu-right { left: 100%; top: 0; }
.header .menu .sub-menu-left { top: 0; left: auto; right: 100%; }
.header .menu li:hover > .sub-menu { opacity: 1; transform: none; visibility: visible; transition: all 0.5s ease; }
.header .menu .sub-menu a { padding: 6px 24px; }
.header .menu .sub-menu .dropdown > a { padding-right: 34px; }
.header .menu .sub-menu span { background-image: linear-gradient(#00ff99, #00ff99); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.5s ease; }
.header .menu .sub-menu li:hover > a > span { color: #00ff99; background-size: 100% 1px; }
.header .menu .sub-menu i { transform: rotate(-90deg); right: 24px; }
.header-right { display: flex; }
.header-right > * { margin-left: 25px; }
.header-right .open-menu-btn { display: none; }
.header-button { background: linear-gradient(135deg, #28a745, #218838); color: white; padding: 10px 20px; font-size: 16px; border: none; border-radius: 15px 4px 15px 4px !important; cursor: pointer; position: relative; overflow: hidden; transition: color 0.4s ease-in-out; z-index: 1; }
.header-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #ff9800, #ff5722); transition: left 0.4s ease-in-out; z-index: -1; }
.header-button:hover::before { left: 0; }
.header-button:hover { color: #fff; }
.header .menu > ul .mobile-display { display: none; }

/* content */
.enter-container { text-align: center; padding: 35px 0 0 0;}
#iframe-container { margin-top: 28px; }
.c-header { padding: 70px 8%; text-align: center; font-size: 22px; background: linear-gradient(to bottom, rgb(234, 222, 251), rgb(203, 163, 255)); }
.enter { text-decoration: none; background:rgb(116, 23, 255); color: #ffffff; padding: 10px 20px; border-radius: 10px; margin-bottom: 25px; }
.enter:hover { background:rgb(161, 80, 255); }
.c-body { display: flex; flex-flow: column; justify-content: center; align-items: center; margin: 4% 9%; }
.article { margin: auto; width: 60%; }
.room-button { margin: 20px 0 10px 0; padding: 10px 17px; border-radius: 8px; background:rgb(177, 28, 255); color: #ffffff; text-align: center; border: none; font-size: 15px; transition: all 0.3s ease; }
.room-button:hover { background: transparent; border: 2px solid rgb(181, 8, 255); color: rgb(181, 8, 255); padding: 8px 15px; }
ol { margin: 14px 0 0 0; background: #f2d9ff; padding: 20px 40px; border-radius: 10px; }
.p-10 { padding: 10px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pt-10 { padding-top: 10px; }
.text-center { text-align: center; }
h2, h3 { font-size: 20px; padding-bottom: 8px; padding-top: 30px; }
.target { background: #ebc4ff; margin: 4% 24%; padding: 0 10px 36px 10px; border-radius: 10px; }
.target h2 { text-align: center; padding-bottom: 25px; }
.t-words { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.t-words p,
.t-words a { background-color: #eeeeee; padding: 8px 12px; border-radius: 5px; font-size: 14px; color: #333333; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; text-decoration: none; }
.t-words p:hover,
.t-words a:hover { background-color: #ddd; }
.purple { color: rgb(139, 23, 255); }
.blue { color: rgb(73, 23, 255); }
.pink { color: rgb(197, 23, 255); }
.a_link { text-decoration: none;}

/* footer */
footer { position: relative; width: 100%; height: auto; padding-top: 80px; background: linear-gradient(-30deg, rgba(108, 28, 253, 0.1) 0%, rgba(108, 28, 253, 0.2) 100%); }
.f-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 12px; }
.f-wrapper { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; }
.f-wrapper .footer-widget { width: calc(20% - 30px); margin: 0 15px 50px; padding: 0 12px; }
.f-wrapper .footer-widget:nth-child(1) { width: calc(40% - 50px); margin-right: 15px; }
.f-wrapper .footer-widget .logo { margin-bottom: 30px; vertical-align: middle; }
.f-wrapper .footer-widget p { margin-bottom: 30px; font-size: 16px; line-height: 24px; }
.f-wrapper .footer-widget .footer-socials { display: flex; align-items: center; justify-content: flex-start; }
.f-wrapper .footer-widget .footer-socials li { list-style: none; }
.f-wrapper .footer-widget .footer-socials li a { width: 40px; height: 40px; margin-right: 10px; color: #fff; background-color: rgba(3, 127, 243, 0.5); border-radius: 50%; font-size: 20px; text-decoration: none; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-out; }
.f-wrapper .footer-widget .footer-socials li:nth-child(1) a { border: 2px solid #316FF6; background-color: transparent; color: #316FF6; }
.f-wrapper .footer-widget .footer-socials li:nth-child(2) a { border: 2px solid #d62976; background-color: transparent; color: #d62976; }
.f-wrapper .footer-widget .footer-socials li:nth-child(3) a { border: 2px solid #00AFF0; background-color: transparent; color: #00AFF0; }
.f-wrapper .footer-widget .footer-socials li:nth-child(4) a { border: 2px solid #075E54; background-color: transparent; color: #075E54; }
.f-wrapper .footer-widget .footer-socials li a:hover { background-color: #037ef3; }
.f-wrapper .footer-widget .footer-socials li:nth-child(1) a:hover { border: 2px solid #316FF6; background-color: #316FF6; color: #fff; }
.f-wrapper .footer-widget .footer-socials li:nth-child(2) a:hover { border: 2px solid #d62976; background-color: #d62976; color: #fff; }
.f-wrapper .footer-widget .footer-socials li:nth-child(3) a:hover { border: 2px solid #00AFF0; background-color: #00AFF0; color: #fff; }
.f-wrapper .footer-widget .footer-socials li:nth-child(4) a:hover { border: 2px solid #075E54; background-color: #075E54; color: #fff; }
.f-wrapper .footer-widget h4 { color: #585978; margin: 10px 0 35px; font-size: 20px; font-weight: 600; line-height: 34px; position: relative; }
.f-wrapper .footer-widget h4::after { content: ""; position: absolute; bottom: 0; left: 0; width: 31%; height: 3px; background: linear-gradient(-30deg, rgba(238, 29, 176, 0.9) 0%, rgba(108, 28, 253, 0.95) 100%); border-radius: 5px; }
.f-wrapper .footer-widget .links li { list-style: none; }
.f-wrapper .footer-widget .links li a { color: #585978; font-size: 16px; text-decoration: none; text-transform: capitalize; line-height: 32px; background-image: linear-gradient(hsl(280.8deg 64% 42%), hsl(280.8deg 72% 59%)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.5s ease; }
.f-wrapper .footer-widget .links li a:hover { color:rgb(149, 0, 229); background-size: 100% 1px; }
.copyright-wrapper { padding: 20px 0; border-top: 1px solid rgba(88, 89, 120, 0.4); }
.copyright-wrapper p { color: rgba(88, 89, 120, 0.6); font-size: 14px; font-weight: 500; text-align: center; }
.copyright-wrapper p a { color: inherit; font-weight: 500; text-decoration: none; transition: all 0.3s ease-out; }
.copyright-wrapper p a:hover { color:rgb(149, 0, 229); }

@media(max-width:991px) {

    /* Navbar Responsive */
    .header { padding: 12px 0; }
    .header .menu { position: fixed; right: 0; top: 0; width: 320px; height: 100%; background-color: hsl(260, 50%, 45%); padding: 15px 30px 30px; overflow-y: auto; z-index: 99; transform: translateX(100%); }
    .header .menu.open { transform: none; }
    .header .menu .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
    .header .menu .close-menu-btn { height: 35px; width: 35px; position: relative; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; cursor: pointer; border: none; }
    .header .menu .close-menu-btn::before,
    .header .menu .close-menu-btn::after { content: ''; position: absolute; width: 80%; height: 2px; background-color: hsl(0, 0%, 100%); }
    .header .menu .close-menu-btn::before { transform: rotate(45deg); }
    .header .menu .close-menu-btn::after { transform: rotate(-45deg); }
    .header .menu > ul > li { display: block; }
    .header .menu > ul > li:not(:last-child) { margin-right: 0; }
    .header .menu li { border-bottom: 1px solid hsla(0, 0%, 100%, 0.25); }
    .header .menu li:first-child { border-top: 1px solid hsla(0, 0%, 100%, 0.25); }
    .header .menu > ul > li > a { padding: 12px 0; }
    .header .menu > ul > .dropdown > a { padding-right: 34px; }
    .header .menu i { height: 34px; width: 34px; border: 1px solid hsla(0, 0%, 100%, 0.25); display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; top: 7px; }
    .header .menu .dropdown.active > i { background-color: hsla(0, 0%, 100%, 0.25); transform: rotate(180deg); }
    .header .menu .sub-menu { position: static; opacity: 1; transform: none; visibility: visible; padding: 0; transition: none; box-shadow: none; width: 100%; display: none; }
    .header .menu .dropdown.active > .sub-menu { display: block; }
    .header .menu .sub-menu li:last-child { border: none; }
    .header .menu .sub-menu a { padding: 12px 0 12px 15px; }
    .header .menu .sub-menu .sub-menu a { padding-left: 30px; }
    .header .menu .sub-menu .sub-menu .sub-menu a { padding-left: 45px; }
    .header .menu .sub-menu span { background-image: none; }
    .header .menu .sub-menu i { transform: none; right: 0; }
    .header-right .open-menu-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 44px; cursor: pointer; position: relative; background-color: transparent; border: none; }
    .header-right .open-menu-btn .line { height: 2px; width: 30px; background-color: hsl(0, 0%, 100%); position: absolute; }
    .header-right .open-menu-btn .line-1 { transform: translateY(-8px); }
    .header-right .open-menu-btn .line-3 { transform: translateY(8px); }
    .header .menu > ul .mobile-display { display: block; }
    .pc-display { display: none; }

    /* content */
    .c-body { margin: 6% 9%; }
    .article { width: 85%; }
    .target { margin: 4% 14%; }
    
    /* footer Responsive */
    .f-container { max-width: 960px; }
    .f-wrapper .footer-widget,
    .f-wrapper .footer-widget:nth-child(1) { width: calc(50% - 30px); }
}

@media (max-width: 768px) {
    .f-container { max-width: 720px; }
    .f-wrapper .footer-widget,
    .f-wrapper .footer-widget:nth-child(1) { width: 100%; margin: 0 10px 50px; }
    .f-wrapper .footer-widget h4::after { width: 11%; }
}

@media(max-width:551px) {
    .f-wrapper .footer-widget h4::after {  width: 15%; }
    .c-body { margin: 8% 5%; }
    .article { width: 100%; }
    .target { margin: 6% 5% 8% 5%; }
}

@media(max-width:340px) {
    .f-wrapper .footer-widget h4::after {  width: 20%; }
}

@media(max-width:296px) {
    .f-wrapper .footer-widget h4::after {  width: 20%; }
}