* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; outline: none; border: none; color: #222222; font-size: 16px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; background-color: transparent; transform: none; perspective: none; }
*::-webkit-scrollbar { width: 0; height: 5px; }
*::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
*::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }

.pg-pips { left: 10px; top: 50vh !important; width: max-content; }
.pg-pips ul li { margin: 25px; }
.pg-pips ul li a { margin: 0; position: unset; width: 15px; height: 15px; background: #FFFFFF; }
.pg-pips ul li:hover a { margin: 0; width: 15px; height: 15px; background: #FFFFFF; }
.pg-pips ul li a.active, .pg-pips ul li:hover a.active { background: #EA8004; }

.atedu__header                  { padding: 0 20px; position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 120px; background: #FFFFFF; }
.atedu__header--container       { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.atedu__header--logo            { width: 120px; cursor: pointer; }
.atedu__header--logo img        { max-width: 100%; }
.atedu__header--menu            { display: inline-flex; align-items: center; gap: 80px; }
.atedu__header--menu-link       { font-size: 20px; font-weight: 700; color: #222222; cursor: pointer; }
.atedu__header--menu-link:hover { color: #904AE8; }

.atedu__mobile              { position: relative; display: none; }
.atedu__mobile--menu-btn    { cursor: pointer; }
.atedu__mobile--menu        { padding: 20px; position: fixed; right: 0; top: 80px; transform: translateX(100%); z-index: -1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: 20px; width: 100%; height: 100vh; background: #FFFFFF; transition: 300ms ease-in-out; }
.atedu__mobile--menu-item   { font-size: 16px; font-weight: 600; color: #000000; }
.atedu__mobile--menu.active { transform: unset; }

.cl__footer { padding:3.125rem; width: 100%; background: var(--bg-element4); }
.cl__footer--header > img:first-child { width: 110px; }
.cl__footer--header > svg:first-child { width: 110px; }
.cl__footer--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; column-gap: 10rem; }
.cl__footer--inline  { display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.cl__footer--title { font-size: 1rem; font-weight: 700; color: #828282; }
.cl__footer--contents { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.cl__footer--office { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.cl__footer--office-detail { display: inline-flex; justify-content: flex-start; align-items: center; }
.cl__footer--office-detail .cl__footer--office-info { padding: 0 1rem; border-right: 1px solid #828282; }
.cl__footer--office-detail .cl__footer--office-info:first-child { padding-left: 0; }
.cl__footer--office-detail .cl__footer--office-info:last-child { border: unset; }
.cl__footer--office-info { font-size: 14px; font-weight: 300; color: #828282; }
.cl__footer--user { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 2.5rem; row-gap: 2.5rem; }
.cl__footer--user-wrapper { display: inline-flex; justify-content: center; align-items: center; column-gap: 2.5rem; row-gap: 2.5rem; flex-wrap: wrap; }
.cl__footer--user-menu { font-size: 0.875rem; color: #828282; }
.cl__footer--about { margin-left: 0.625rem; padding: 0.5rem 0.75rem 0.5rem 1.5rem; position: relative; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 1.5rem; }
.cl__footer--about-icon { position: absolute; left: 0; top: 50%; width: 30px; transform: translate(-40%, -50%); }
.cl__footer--about-text { margin: 0; font-size: 0.875rem; font-weight: 600; color: #904AE8; white-space: pre; }

.atedu__main    { width: 100%; height: 100%; }
.atedu__section { width: 100%; height: 100vh; overflow: hidden; }

.atedu__visual                        { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.atedu__visual--hero                  { padding: 80px 100px; position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; transform: translateX(-24%); background: rgba(255, 255, 255, 0.8); }
.atedu__visual--hero-title            { font-size: 64px; font-weight: 700; color: #222222; }
.atedu__visual--hero-line             { width: 50px; height: 1px; border-top: 1px solid #222222; }
.atedu__visual--hero-desc             { font-size: 32px; font-weight: 500; color: #222222; text-align: center; line-height: 50px; }
.atedu__visual--background            { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; overflow: hidden; }
.atedu__visual--background-img        { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; }
.atedu__visual--background-item       { position: absolute; z-index: 10; width: 40px; height: 40px; animation: bubble 7.5s linear infinite running; border-radius: 50%; }
.atedu__visual--background-item:after { content: ''; transform: translateY(50%); display: block; width: 40px; height: 40px; border-radius: 50%; opacity: 0.5; }
.atedu__visual--background-item:nth-child(2) { animation-delay: -1s; left: 19.79%; transform: translateY(50vh); background: #904AE8; }
.atedu__visual--background-item:nth-child(2):after { background: #904AE8; }
.atedu__visual--background-item:nth-child(3) { animation-delay: -3s; left: 34.58%; transform: translateY(25vh); background: #FFFFFF; }
.atedu__visual--background-item:nth-child(3):after { background: #FFFFFF }
.atedu__visual--background-item:nth-child(4) { animation-delay: -0s; left: 65.47%; transform: translateY(35vh); background: #1F2D77; }
.atedu__visual--background-item:nth-child(4):after { background: #1F2D77; }
.atedu__visual--background-item:nth-child(5) { animation-delay: -6s; left: 78.65%; transform: translateY(75vh); background: #EA8004; }
.atedu__visual--background-item:nth-child(5):after { background: #EA8004; }

.atedu__service                    { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.atedu__service--background        { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; }
.atedu__service--background-img    { transition: 6s ease-in-out; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: center; }
.atedu__service--contents          { position: absolute; left: 50%; top: 100%; z-index: 10; transform: translate(-50%, -90%); width: 742px; height: 742px; border-radius: 50%; background: #1C1C1C; }
.atedu__service--contents:before   { content: ''; position: absolute; left: 50%; top: 50%; z-index: 5; width: 818px; height: 818px; border: 1px dashed #666666; border-radius: 50%; transform: translate(-50%, -50%); }
.atedu__service--item              { padding: 50px; position: absolute; z-index: 15; width: 300px; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; overflow: hidden; border-radius: 50%; }
.atedu__service--item-logo         { transition: 400ms ease-in-out; width: 100%; transform: translateY(60%); }
.atedu__service--item-logo img     { max-width: 100%; }
.atedu__service--item-info         { opacity: 0; visibility: hidden; transform: scale(0); transition: 400ms ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 30px; }
.atedu__service--item-subtitle     { font-size: 20px; font-weight: 400; color: #FFFFFF; }
.atedu__service--item-title        { font-size: 20px; font-weight: 700; color: #FFFFFF; }
.atedu__service--item:nth-child(1) { left: 50%; top: 0; transform: translate(-50%, -50%); background: #FFFFFF; }
.atedu__service--item:nth-child(2) { left: 0%; top: 50%; transform: translate(-50%, -50%); background: #9044EB; }
.atedu__service--item:nth-child(3) { left: 50%; top: 50%; transform: translate(-50%, -50%); background: #EA8000; }
.atedu__service--item:nth-child(4) { left: 100%; top: 50%; transform: translate(-50%, -50%); background: #1F2D77; }
.atedu__service--item:nth-child(1) .atedu__service--item-subtitle { color: #000000; }
.atedu__service--item:nth-child(1) .atedu__service--item-title { color: #000000; }
.atedu__service--item:hover .atedu__service--item-logo { opacity: 0.2; transform: translateY(0); }
.atedu__service--item:hover .atedu__service--item-info { opacity: 1; visibility: visible; transform: scale(1); transform-origin: bottom; }
.atedu__service--background.active > img { transform: scale(1); }

.atedu__third                 { position: relative; width: 100%; height: 100%; overflow: hidden; }
.atedu__third--background     { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; }
.atedu__third--background-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.atedu__third--contents       { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.atedu__third--info           { transition: 800ms ease-out; transform: translateY(-100px); opacity: 0; padding: 80px 100px; display: flex; transform: translateY(-100px); flex-direction: column; justify-content: center; align-items: center; gap: 30px; background: rgba(144, 68, 235, 0.8); }
.atedu__third--info.active    { transform: translateY(0); opacity: 1; }
.atedu__third--info *         { color: #FFFFFF; }
.atedu__third--info-title     { font-size: 64px; font-weight: 700; }
.atedu__third--info-line      { width: 50px; height: 1px; border-top: 1px solid #FFFFFF; }
.atedu__third--info-subtitle  { font-size: 32px; font-weight: 500; text-align: center; line-height: 50px; }
.atedu__third--mouse          { position: absolute; left: 50%; bottom: 3.70%; transform: translateX(-50%); cursor: pointer; }

.atedu__four                 { position: relative; width: 100%; height: 100%; overflow: hidden; }
.atedu__four--background     { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; }
.atedu__four--background-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.atedu__four--contents       { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.atedu__four--info           { transition: 800ms ease-out; transform: translateY(-100px); opacity: 0; padding: 80px 100px; display: flex; transform: translateY(-100px); flex-direction: column; justify-content: center; align-items: center; gap: 30px; background: rgba(234, 128, 4, 0.8); }
.atedu__four--info.active    { transform: translateY(0); opacity: 1; }
.atedu__four--info *         { color: #FFFFFF; }
.atedu__four--info-title     { font-size: 64px; font-weight: 700; }
.atedu__four--info-line      { width: 50px; height: 1px; border-top: 1px solid #FFFFFF; }
.atedu__four--info-subtitle  { font-size: 32px; font-weight: 500; text-align: center; line-height: 50px; }
.atedu__four--mouse          { position: absolute; left: 50%; bottom: 3.70%; transform: translateX(-50%); cursor: pointer; }

.atedu__five                 { position: relative; width: 100%; height: 100%; overflow: hidden; }
.atedu__five--background     { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; }
.atedu__five--background-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.atedu__five--contents       { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.atedu__five--info           { transition: 800ms ease-out; transform: translateY(-100px); opacity: 0; padding: 80px 100px; display: flex; transform: translateY(-100px); flex-direction: column; justify-content: center; align-items: center; gap: 30px; background: rgba(31, 45, 119, 0.8); }
.atedu__five--info.active    { transform: translateY(0); opacity: 1; }
.atedu__five--info *         { color: #FFFFFF; }
.atedu__five--info-title     { font-size: 64px; font-weight: 700; }
.atedu__five--info-line      { width: 50px; height: 1px; border-top: 1px solid #FFFFFF; }
.atedu__five--info-subtitle  { font-size: 32px; font-weight: 500; text-align: center; line-height: 50px; }

@keyframes bubble {
    from { transform: translateY(200vh); }
    to { transform: translateY(-10vh); }
}