@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
	   
	   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
			font-family: Noto Sans KR, sans-serif;
			
        }

        body {
            background: #000;
            color: #fff;
        }

        /* Header Styles */
        .top-header-pc {
            background: rgba(10,14,23,0.95);
            padding: 1rem;
            position: fixed;
            width: 100%;
			height:80px;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(82, 236, 235, 0.1);
			display:block
			letter-spacing:-1px;
        }

		.top-header-mobile {
                display:none;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

		.logo_txt {
			font-size: 18px;
			font-weight: 600;
			color: #37EFC1;
			text-transform: uppercase;
			letter-spacing: 0px;
			text-shadow: 0 0 10px rgba(55, 239, 193, 0.3);
			margin-left: 10px;
			float: left;
		}

        .logo {
            display: flex;
            align-items: center;
			color:#37EFC1;
        }

        .logo img {
            height: 40px;
            margin-right: 10px;
			border-radius:10px;
        }

        .auth-buttons {
            display: flex;
            gap: 1rem;
        }

        .auth-button {
            padding: 0.5rem 1rem;
            border: 1px solid #52eceb;
            border-radius: 4px;
            background: transparent;
            color: #52eceb;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            font-size: 14px;
        }

        .auth-button:hover {
            background: #52eceb;
            color: #0a0e17;
        }

        .sb-container {
            max-width: 1200px;
            margin: 100px auto 0;
            background: linear-gradient(145deg, #0a0e17, #151922);
            position: relative;
            padding: 1rem;
			border-radius:20px;
        }

        .sb-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: linear-gradient(90deg, rgba(82, 236, 235, 0.03) 1px, transparent 1px) 0 0 / 20px 20px;
            pointer-events: none;
			padding-top:20px;
        }

        .sb-header {
            text-align: center;
            padding: 30px 20px;

        }

		.lan_language-selector {
			position: relative;
			margin-left: 0px;
			float:right;
			margin-right:10px;
			
		}

		#lan_language-select {
			appearance: none;
			background-color: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 5px;
			color: black;
			font-size: 14px;
			padding: 5px 25px 5px 10px;
			cursor: pointer;
			transition: all 0.3s ease;
			background-color:black;
			color:white;
			height:40px;
			width:100px;
		}

		#lan_language-select:hover {
			background-color:black;
			color:white;
		}

		#lan_language-select:focus {
			outline: none;
			background-color:black;
			color:white;
			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
		}

		.lan_language-selector::after {
			content: '\25BC';
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			pointer-events: none;
			color: #fff;
			font-size: 12px;
		}

		@media (max-width: 768px) {
			.header-container {
				padding: 0;
				display: flex;
				flex-direction: column;
			}
			
			.logo {
				width: 100%;
				padding: 0px;
				display: flex;
				justify-content: flex-start;
				padding-left: 0px;
			}
			
			.logo img {
				height: 30px;
				border-radius: 10px;
			}
			
			.auth-buttons {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				gap: 0.5rem;
				padding: 0px;
				padding-right: 0px;
			}
			
			.auth-button {
				font-size: 11px;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 38px;
				padding: 0px 5px;
			}
			
			.sb-container {
				margin-top: 80px;
				background: none;
			}
			
			.sb-title {
				font-size: 28px;
			}
			
			.sb-subtitle {
				font-size: 16px;
			}
			
			.lan_language-selector {
				position: relative;
				margin-left: 0px;
				margin-right: 10px;
			}
			
			#lan_language-select {
				appearance: none;
				background-color: black;
				border: 1px solid rgba(255, 255, 255, 0.3);
				border-radius: 5px;
				color: white;
				font-size: 14px;
				padding: 5px 25px 5px 10px;
				cursor: pointer;
				transition: all 0.3s ease;
				height: 40px;
				width: 70px;
			}
			
			#lan_language-select:hover {
				background-color: black;
				color: white;
			}
			
			#lan_language-select:focus {
				outline: none;
				background-color: black;
				color: white;
				box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
			}
			
			.lan_language-selector::after {
				content: '\25BC';
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				pointer-events: none;
				color: #fff;
				font-size: 12px;
			}
		}

        @media (max-width: 480px) {
            .top-header-pc {
                display:none;
            }

			.top-header-mobile {
				
                display:block;
				background: rgba(10,14,23,0.95);
				padding-top: 1rem;
				position: fixed;
				width: 100%;
				height:100px;
				top: 0;
				z-index: 1000;
				border-bottom: 1px solid rgba(82, 236, 235, 0.1);
            }

            .logo img {
                height: 25px;
				border-radius:10px;
            }
        }

        .sb-header {
            text-align: center;
            padding: 30px 0px;

        }

        .sb-title {
            font-size: 42px;
            color: #fff;
            text-transform: uppercase;
            margin-bottom: 15px;
            letter-spacing: 3px;
            text-shadow: 0 0 30px rgba(82, 236, 235, 0.6);

        }

        .sb-subtitle {
            font-size: 20px;
            color: #52eceb;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        .sb-main {
            padding: 20px;
        }

        .sb-section {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid rgba(82, 236, 235, 0.08);
        }

        .sb-section-title {
            font-size: 20px;
            color: #52eceb;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(82, 236, 235, 0.1);
            font-weight: 600;
        }

        .sb-content {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
        }

        .sb-steps {
            list-style: none;
        }

        .sb-steps li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }

        .sb-steps li:before {
            content: "•";
            position: absolute;
            left: 10px;
            color: #52eceb;
        }

        .sb-numbered-steps {
            list-style: none;
            counter-reset: step;
        }

        .sb-numbered-steps li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }

        .sb-numbered-steps li:before {
            counter-increment: step;
            content: counter(step)") ";
            position: absolute;
            left: 5px;
            color: #52eceb;
        }

        .sb-highlight {
            color: #52eceb;
            font-weight: 500;
            padding: 1px 4px;
            background: rgba(82, 236, 235, 0.08);
            border-radius: 3px;
            margin: 0 1px;
        }

        .sb-notice {
            background: rgba(82, 236, 235, 0.03);
            border-radius: 6px;
            padding: 10px 15px;
            margin: 10px 0;
            border-left: 2px solid #52eceb;
            font-size: 13px;
        }

        @media (max-width: 768px) {
            .sb-header {
                padding: 20px 15px;
            }
            
            .sb-title {
                font-size: 32px;
				letter-spacing:-1px;
            }
            
            .sb-subtitle {
                font-size: 18px;
				letter-spacing:-1px;
            }
            
            .sb-main {
                padding: 15px;
            }
            
            .sb-section {
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            .sb-title {
                font-size: 28px;
            }
            
            .sb-subtitle {
                font-size: 16px;
            }
            
            .sb-content {
                font-size: 13px;
            }
        }




		.video-background {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			overflow: hidden;
		}

		.video-background video {
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			width: auto;
			height: auto;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			object-fit: cover;
		}

		body {
			background: transparent;
			position: relative;
		}

		@media (max-width: 768px) {
			.video-background {  background-color:#000; }
			.video-background video { opacity:0.5; }
			
		}
/*************************************************************************************************/
      .custom-banner-container {
            width: 90%;
            max-width: 1600px;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
        }

        .custom-banner-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            padding: 20px 0;
        }

        @media (min-width: 769px) {
            .custom-banner-container {
				width: 90%;
                margin-top: 0px;
            }

            .custom-banner-item {
                position: relative;
                width: calc(25% - 15px);
                margin-bottom: 20px;
            }
        }

        .custom-banner-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        .custom-banner-close {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: absolute !important;
            right: 10px;
            top: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            z-index: 100;
            font-size: 16px;
            line-height: 1;
            border-radius: 3px;
        }

		.custom-banner-mobile-hide-today {
			display:none;
		}

        @media (max-width: 768px) {
            .custom-banner-close {
                padding: 10px 14px;
                font-size: 18px;
                background: rgba(0, 0, 0, 0.8);
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
        }

        .custom-banner-hide-today {
            text-align: center;
            padding: 8px;
            background: #444;
            cursor: pointer;
        }


        @media (max-width: 768px) {
            .custom-banner-wrapper {
                flex-wrap: nowrap;
                gap: 0;
                position: fixed;
				top:0px;
            }

            .custom-banner-item {
                width: 100%;
                position: relative !important;
				
            }

			.slick-slide {
				border:1px solid #fff;
				box-shadow:0px 0px 20px #000;
			}

            .custom-banner-item .custom-banner-close {
                z-index: 100;
                position: absolute !important;
                top: 10px !important;
                right: 10px !important;
            }

            .custom-banner-item .custom-banner-hide-today {
                display: none;
            }

            .custom-banner-hide-section {
                width: 90%;
                margin: 10px auto;
                position: fixed;;
                z-index: 1000;
            }
            
            .custom-banner-mobile-hide-today {
                text-align: center;
                padding: 12px;
                background: #444;
                cursor: pointer;
                display: block;
                width: 100%;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
				position:fixed;
				bottom:5px;
            }

            .slick-slider {
                position: relative;
            }

            .slick-slide {
                position: relative;
            }

            .slick-dots {
                bottom: -25px;
                z-index: 50;
            }

            .slick-dots li button:before {
                font-size: 12px;
            }

            .slick-prev, .slick-next {
                z-index: 50;
            }

            .slick-prev {
                left: 10px;
            }

            .slick-next {
                right: 10px;
            }

            .slick-slide > div {
                position: relative;
            }
        }