@charset "utf-8";
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
		body {                     
			background:url('/design/img/bg.png') no-repeat;
			background-size: 111%;
            animation: gradient 15s ease infinite; 
			font-family: 'Pretendard-Regular';
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        .container {
            display: flex;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 900px;
        }
		
        .login-container {
            padding: 20px;
            text-align: center;
            width: 450px;
			margin-top: 10px;
        }
		.login-container h3 {
          font-size: 25px;
		}
        .info-container {
            background-color: #eefff2;
            padding: 40px;
            text-align: center;
            width: 450px;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 20px;
        }
        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        .input-group input {
            width: 100%;
            padding: 15px 15px 15px 40px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 18px;
            font-size: 16px;
        }
        .options {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 20px;
        }
        .options > div {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        .options label {
            color: #666;
            font-size: 14px;
            cursor: pointer;
            margin-left: 5px;
        }
        .options input[type="checkbox"] {
            cursor: pointer;
        }
        button {
            width: 100%;
            padding: 15px;
            background-color: #667eea;
            color: white;
            border: none;
            border-radius: 18px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #764ba2;
        }
		.info-container h2 {
			font-size: 22px;
		}
        .info-container img {
            width: 155px;
            margin-bottom: 20px;
        }
        .info-container p {
            color: #666;
            line-height: 1.6;
        }
        .copyright {
            margin-top: 30px;
            color: #999;
            font-size: 14px;
        }
		.feature-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 30px;
		}
        .feature-item {
            width: 48%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .feature-item i {
            font-size: 24px;
            color: #667eea;
            margin-right: 10px;
        }
        .feature-item span {
            font-size: 14px;
            color: #666;
        }

        @media screen and (max-width: 768px) {
            .container {              
                width: 100%;
                height: 100%;
                border-radius: 0;
				padding:10px;
            }
            .login-container, .info-container {
                width: 100%;
                padding: 0;
            }
            .info-container {
                display: none;
            }
			 .container form {width:100%;}
        }