@charset "UTF-8";
@import url("common.css");

#wrap {overflow:hidden;}
header {background-color:transparent;}
main {padding:0; max-width:100%; width:100%; display:flex; flex-direction: column; gap:200px 0;}
main h2 {font-size: 52px; font-weight:800; line-height:1.5; margin-bottom:8px;}
main h2 + p > * {font-size: 32px; font-weight:800; line-height:1.5; }

@media (max-width: 1279px) {
    main {gap:80px 0;}
    main h2 {font-size: 32px; line-height:1.5; }
    main h2 + p > * {font-size: 20px; line-height:1.5; }
}

/* swiper base*/
.swiper { height: auto; box-sizing: border-box; overflow:hidden;}
.swiper-wrapper { display: flex; transition-property: transform; box-sizing: content-box;} 
.swiper-slide {flex-shrink: 0; width: fit-content; height: auto; box-sizing: border-box; /*transform: translateZ(0); user-select: none;*/ touch-action: pan-y; }

/*btns*/
.btn_more {display:inline-flex; height:40px; gap:8px; font-size: 24px; font-weight:700;}
.btn_more:after {content:''; width:40px; height:40px; border-radius:50%; background:#111 url(../images/lms/icon_west_white.svg) no-repeat center/24px;}

@media (max-width: 1279px) {
    .btn_more {height:32px;}
    .btn_more:after {width:32px; height:32px; /*background:#111 url(../images/icon_plus_white.svg) no-repeat center/16px;*/ background-size:16px;}
}

/*keyVisual*/
#keyVisual {position:relative; width:100%; max-width:2560px; margin:0 auto;}

#keyVisual .controls {position:absolute; top:calc(50% + 215px - 40px);  transform: translateX(-50%); left:50%; height:40px; display:flex; justify-content: center; gap:8px;}
#keyVisual .controls button {width:40px; height:40px;}
#keyVisual .swiper-pagination {display:flex; gap:8px; justify-content: center; color:#fff; font-size: 20px; font-weight: 700; line-height: 180%; width:56px; }
#keyVisual .swiper-pagination span {width:16px;}
#keyVisual .swiper-button-prev *, #keyVisual .swiper-button-next * {display:none;}
#keyVisual .swiper-button-prev {background:url(../images/main/ico_arrow_p_wh_40px.svg) no-repeat center}
#keyVisual .swiper-button-next {background:url(../images/main/ico_arrow_n_wh_40px.svg) no-repeat center}
#keyVisual .playToggle {background:url(../images/main/ico_arrow_pause.svg) no-repeat center}
#keyVisual .playToggle.play {background-image:url(../images/main/ico_arrow_play.svg)}

#keyVisual .swiper-slide {position:relative; width:100%; height:100vh; max-width:2560px; max-height:1440px; overflow:hidden; margin:0 auto; display:flex; justify-content: center; align-items: center;}
#keyVisual img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; opacity:0; transition: opacity 1s 0.1s;}
#keyVisual .swiper-slide.swiper-slide-active img {opacity:1;}

#keyVisual .swiper-slide .txt {z-index:2; height:430px; width:1000px;  text-align:Center; color:#fff; } 
#keyVisual .swiper-slide .txt strong {display:block;  font-size: 60px;  }
#keyVisual .swiper-slide .txt span {display:block;font-size: 32px;}
#keyVisual .swiper-slide .txt strong + span {margin-top:16px;}

#keyVisual .swiper-slide .txt * {opacity:0; transform: translateY(30px); font-weight: 800; line-height: 160%;}
#keyVisual .swiper-slide .txt *:nth-child(1) { transition: opacity 0.4s 0.8s, transform 0.4s 0.8s;}
#keyVisual .swiper-slide .txt *:nth-child(2) { transition: opacity 0.4s 1.4s, transform 0.4s 1.4s;}
#keyVisual .swiper-slide .txt *:nth-child(3) { transition: opacity 0.4s 1.8s, transform 0.4s 1.8s;}
#keyVisual .swiper-slide .txt *:nth-child(4) { transition: opacity 0.4s  2.4s, transform 0.4s 2.4s;}

#keyVisual .swiper-slide.swiper-slide-active .txt strong, 
#keyVisual .swiper-slide.swiper-slide-active .txt span {opacity:1; transform: translateY(0);}

#keyVisual .scrolldown {position:absolute; z-index:1; bottom:80px; left:50%; transform: translateX(-50%); width:26px; height:59px; background:url(../images/main/icon_mouse.svg) no-repeat center top;}
#keyVisual .scrolldown .arrow {width:10px; height:5px; opacity: 0; position: absolute; left: 50%; top:59px; transform: translateX(-50%); background:url(../images/main/icon_mouse_dir.svg) no-repeat center/100% auto
}
#keyVisual .scrolldown .arrow.first {animation: arrow 2s ease-in-out infinite;}
#keyVisual .scrolldown .arrow.second {animation: arrow 2s 0.7s ease-in-out infinite;}
#keyVisual .scrolldown .arrow.third {animation: arrow 2s 1.4s ease-in-out infinite;}
@keyframes arrow {
    0% {opacity: 0; top: 40px;}
    70% {opacity: 1; }
    100% {opacity: 0;}
}

@media (max-width: 1279px){
    #keyVisual .swiper-slide {width:100vw;  height: calc(var(--vh, 1vh) * 100);  max-width: none; max-height:calc(var(--vh, 1vh) * 100); }

    #keyVisual .controls {gap:4px; height:30px; top:calc(50% + 117px - 30px);}
    #keyVisual .controls button {width:32px; height:32px; background-size:32px;}
    #keyVisual .swiper-pagination {gap:4px; width:40px; font-size: 16px; line-height: 180%; line-height:32px; }
    #keyVisual .swiper-pagination span {width:12px;}

    #keyVisual .swiper-slide .txt {height:234px; width:100%;}
    #keyVisual .swiper-slide .txt strong {font-size: 32px; }
    #keyVisual .swiper-slide .txt span {font-size: 14px;  font-weight:500;}

    #keyVisual .swiper-slide .txt strong + span {margin-top:4px;}

    #keyVisual .scrolldown{display:none;}
}

/*tagline*/
.tagline {position:relative; padding-bottom:34px;}
.tagline .inner {position:relative; z-index:2; width:100%; max-width: 1504px; padding:0 52px; margin:0 auto;}
.tagline .inner .tabs {position:absolute; left:52px; bottom:172px; z-index:2; display:flex; gap:8px; } 
.tagline .inner .tabs button {width:52px; height:52px; border-radius:50%; border:1px solid #111; display:inline-flex; align-items: center; justify-content: center;}
.tagline .inner .tabs button:before {content:''; width:32px; height:32px; background:url(../images/lms/icon_west_black.svg) no-repeat center;}
.tagline .inner .tabs button:first-child:before {transform: rotate(180deg);}
.tagline .inner .tabs button[aria-selected="true"] {opacity:0.3;}
.tagline .inner .tabpannels > div {padding:176px 1046px 0 0; height:776px; position:relative;}

.tagline .forPC {width:calc(100% - 354px); height:776px; position:absolute; right:0; top:0;}
.tagline .forPC .img1 {position:absolute; right:0; top:0;}
.tagline .forPC .img2 {position:absolute; left:0; top:188px; }
.tagline .forPC .img3 {position:absolute; right:120px; bottom:0; }

.tagline .tabpannels > div > p > span {display:block;}

.tagline .marquee {position: absolute; bottom: 0; left: 0; right: 0; width: 100vw; max-width: 100%; height: 194px; /* overflow: hidden; */ z-index: 1;}
.tagline .marquee .track { position: absolute; height: 194px; display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: marquee 40s linear infinite;}
.tagline .marquee .track .bg {margin:0 30px; width: 4200px; height: 194px; font-size: 0; line-height: 0; background:url(../images/main/bg_tagline.png) repeat-x left center;}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1279px) {
    .tagline {padding-bottom:89px;}
    .tagline .inner {max-width:100%; padding:0 20px;}

    .tagline .forPC {display:none;}

    .tagline .inner .tabs {display:none;}
    .tagline .inner .tabpannels > div {padding:0 0 0 0; height:auto;}
    .tagline .inner .tabpannels > div .forMo {display:flex; gap:8px; flex-wrap:wrap; padding-bottom:24px;}

    .tagline .forMo .img1 {width:100%; }
    .tagline .forMo .img2, .tagline .forMo .img3 {width:calc(50% - 4px);} 
 
    .tagline .tabpannels > div h2 {font-size: 32px;  line-height: 150%;}

    .tagline .tabpannels > div > p > span  {font-size:20px; line-height: 150%;}
    .tagline .tabpannels > div > p > span:nth-child(1),  .tagline .tabpannels > div > p > span:nth-child(2) {display:inline-block; margin-right:5px;}
    
    .tagline .vision, .tagline .slogan {background:none; margin-bottom:40px; display:block !important;}

    .tagline .marquee {height: 89px; }
    .tagline .marquee .track {height: 89px; animation: marquee 20s linear infinite;}
    .tagline .marquee .track .bg {margin:0 30px; width:2130px; height: 89px; background:url(../images/main/bg_tagline_mo.png) repeat-x left center;}
  
}

/*service*/
.service {width:100%; max-width: 1504px; padding:0 52px; margin:0 auto;}

main .service.visible h2 {opacity:1; transform: translateY(0);}
/* main .service h2 + p * {transition: opacity 0.4s 0.7s;}
main .service h2 + p {transform: translateY(8px); transition: transform 0.4s 0.7s;}
main .service.visible h2 + p * {opacity:1;}
main .service.visible h2 + p {transform: translateY(0);} */

.service .swiper {margin-top:32px;}
.service.visible .swiper {opacity:1; transform: translateY(0);}
.service .swiper-wrapper {gap:10px;}
.service .swiper-slide {flex:1; height:480px; padding-top:20px;}
.service .swiper-slide a {display:flex; width:100%; height:100%; padding:52px 30px 60px 40px; color:#fff; font-size: 20px; line-height: 180%; text-align:left; font-weight: 800; flex-direction: column; border-radius: 4px; transform: translateY(0); transition:transform 0.2s 0.1s ; word-break: normal;}
.service .swiper-slide a strong {font-size: 32px; font-weight: 800; line-height: 150%; margin-bottom:8px;}
.service .swiper-slide a strong:after {content:''; display:inline-block; width:20px; height:16px; margin-left:16px; background:url(../images/lms/icon_west_white.svg) no-repeat center}

.service .swiper-slide a:after {content:''; width:200px; height:200px; border-radius:50%; margin-top:auto; background-color:#fff; background-position:center; background-size:120px; background-repeat:no-repeat; align-self: center;}
.service .swiper-slide a:hover {transform: translateY(-20px);}


.service .card1 {background-color:#4A5CBB;}
.service .card1:after {background-image:url(../images/main/img_service_card_1.png)}
.service .card2 {background-color:#57B255;}
.service .card2:after {background-image:url(../images/main/img_service_card_2.png)}
.service .card3 {background-color:#1D87CC;}
.service .card3:after {background-image:url(../images/main/img_service_card_3.png)}
.service .card4 {background-color:#1B4783;}
.service .card4:after {background-image:url(../images/main/img_service_card_4.png)}

@media (max-width: 1279px) {
    .service {padding:0;}
    .service h2 {padding:0 20px;}

    main .service h2 + p {padding:0 20px; }
    main .service h2 + p span {display:block; }    

    .service .swiper {margin-top:24px; padding:0 20px;}
    .service .swiper-wrapper {width: max-content; gap:0;}
    .service .swiper-slide {width:250px; height:322px; padding-top:0;}
    .service .swiper-slide a {font-size: 16px; font-weight:500; line-height: 160%; padding:40px 30px; margin-right:8px; letter-spacing:-1px;}
    .service .swiper-slide a strong {font-size: 24px; font-weight:700; line-height: 150%; margin-bottom:4px;}
    .service .swiper-slide a strong:after {width:15px; height:12px; margin-left:12px;}
    .service .swiper-slide a:after {width:120px; height:120px; background-size:72px; }
    .service .swiper-slide a:hover {transform: translateY(0);}
}

@media (max-width: 1060px) {
    .service .swiper-slide {flex:0 0 auto; width:249px; vertical-align:top; height:322px; } 
    .service .swiper-slide:nth-child(1), .swiper-slide:nth-child(3) {align-self: flex-start;}
}

/*Q&A*/
.qnaList {background-color:var(--bg-blue01); padding:200px 0;}
.qnaList .inner {width:100%; max-width: 1504px; padding:0 52px; margin:0 auto; position:relative;}

main .qnaList h2 + p * {opacity:1;}

.qnaList .swiper {margin-top:32px; }
.qnaList .swiper-wrapper {gap:16px; flex-wrap: wrap; }
.qnaList .swiper-slide {width:calc((100% - 32px) / 3); height:280px;}
.qnaList .swiper-slide a {display:flex; flex-direction: column; width:100%; height:100%; font-size: 24px; font-weight: 700; line-height: 150%; background-color:#fff; border-radius: 8px; border:2px solid #fff; padding:48px 28px 28px 28px;}
.qnaList .swiper-slide a:hover, .qnaList .swiper-slide a:focus-visible {border-color:var(--primary); outline:none; color:var(--primary)}

.qnaList .swiper-slide a .date {margin-top:auto; color:var(--text03); font-size: 18px; line-height: 180%;  font-weight:400;}

.qnaList .btn_more {position:absolute; right:52px; top:94px;}

.status.new { display: inline-flex; justify-content: center; width:50px; height: 24px; border-radius:12px; margin-top:16px; background-color: #F8E6E8; font-size: 14px;  line-height:22px; color: var(--error);}

@media (max-width: 1279px) {
    .qnaList {padding:80px 0;}
    .qnaList .inner {padding:0;}
    .qnaList h2 {padding:0 20px; } 
    .qnaList h2 + p {padding:0 20px; }
    main .qnaList h2 + p span {display:block; }
    
    .qnaList .swiper {margin-top:16px; padding:0 20px;}
    .qnaList .swiper-wrapper {width: max-content; gap:0;}
    .qnaList .swiper-slide {width:250px; height:200px;}
    .qnaList .swiper-slide a {padding:30px 20px; border:none; font-size: 16px; line-height: 160%;}
    .qnaList .swiper-slide a:hover {border-color:#fff; color:var(--text01)}
    .qnaList .swiper-slide a .date {font-size: 14px; line-height: 160%;}
    .qnaList .btn_more {position:absolute; right:20px; top:80px;}
    .status.new {width:41px; height:20px; line-height:20px; font-size:13px;}
}


@media (hover: none) and (pointer: coarse) {
   
}

/*FAQ*/
.faqList {width:100%; max-width: 1504px; padding:0 52px; display:flex; margin:0 auto; position:relative; }

.faqList h2 {position:absolute; left:52px; top:0; width:calc(100% - 883px - 104px); }
.faqList p {position:absolute; left:52px; top:86px; width:calc(100% - 883px - 104px);}

.faqList .btn_more {position:absolute; left:52px; top:186px; }
.faqList .inner {width:883px; margin-left:auto; border-top:1px solid var(--text03); }

.faqList .details {counter-increment: item; border-bottom: 1px solid var(--gray04);}
.faqList .details.open {padding-bottom:32px;}
.faqList .details button {display:flex; align-items: center; width:100%;  gap:0 8px; padding:32px 6px 32px 0; font-size: 24px; line-height:36px; text-align:left; position:relative;}
.faqList .details button span {font-weight:600; padding-left:36px; position:relative }
.faqList .details button span:before {position:absolute; left:0; top:0; content: 'Q.';  color:var(--primary); font-weight:600; width:28px;  } 
.faqList .details button:after {content:''; width:52px; height:52px; flex:0 0 auto; background: url(../images/lms/icon_arrow_down_52.svg) no-repeat center / 100%;  margin-left:auto;}

.faqList .details.open button:after {background-image: url(../images/lms/icon_arrow_up_52.svg);  flex-shrink: 0;}
.faqList .details > div {display:none; max-height:64px; margin-top:-8px; padding:0 0 0 36px; color:var(--text02); font-size: 18px; line-height:1.8; position:relative; white-space: normal;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.faqList .details > div:before { content: 'A.'; width:28px; position:absolute; left:0; top:0; color:var(--text03); font-size: 24px;  line-height:1.5; font-weight:600;}

@media (max-width: 1279px) {
    .faqList {padding:0 20px; display:block;}
    .faqList h2 {position:static; }
    .faqList p {position:static; width:100% } 
    .faqList .btn_more {left:auto; right:20px; top:50px;}

    .faqList .inner {width:100%; margin-left:0; margin-top:16px; }

    .faqList .details.open {padding-bottom:20px;}
    .faqList .details button {font-size: 16px; line-height: 1.5; padding:20px 0; gap:0 8px; }
    .faqList .details button span {padding-left:30px;}
    .faqList .details button span:before {width:22px;}
    .faqList .details button:after {width:30px; height:30px; background-size: 30px;}

    .faqList .details.open button {padding-bottom:11px;}

    .faqList .details > div  {font-size: 16px; line-height:1.6; gap:0 8px; padding:0 40px 0 30px;}
    .faqList .details > div:before { font-size: 16px; line-height:1.6; width:22px;}
}

.support {width:100%; max-width: 1504px; padding:0 52px; margin:0 auto;}
.support a {display:flex; gap:32px; align-items: center; padding:52px; border-radius: 8px; background-color:#F6EBFC; margin-top:-120px;}
.support a:before {content:''; width:160px; height:160px; flex-shrink: 0; border-radius:50%; background:#fff url(../images/main/bg_support.svg) no-repeat center/80px; }
.support a:after {content:'지원센터'; height:64px; flex-shrink: 0; padding:17px 66px 17px 32px; border-radius:8px;  background:#111 url(../images/lms/icon_west_white.svg) no-repeat calc(100% - 32px) center/24px; color:#fff; font-weight:600; font-size: 20px; line-height:1.5;}
.support a p {color:var(--text02); font-size: 18px; line-height:1.8; word-break: break-all; overflow-wrap: anywhere;}
.support a p strong {display:block; color:var(--text01); font-size: 32px; line-height:1.5; margin-bottom:8px; font-weight:800;}

@media (max-width: 1279px) {
    .support {padding:0 20px;}
    .support a {margin-top:-40px; border-radius: 4px; padding:32px 20px; gap:12px; flex-direction: column;}
    .support a:before {width:120px; height:120px; background-size:60px;}
    .support a p {font-size: 16px; line-height: 160%; text-align:center;}
    .support a p strong {font-size: 20px; line-height: 150%; margin-bottom:4px;}
    .support a:after {height:43px; padding:8px 32px 8px 16px; font-size: 16px; line-height: 160%; font-weight:500; border-radius:4px; background-position:calc(100% - 16px) center; background-size:12px;}
}

.topWrap {height:64px; padding:0 34px; margin-top:-118px;  text-align:right; }
.gotoTop {display:none; position:fixed; z-index:2; bottom:54px; right:34px; width:64px; height:64px; border-radius:50%; background:#fff url(../images/main/icon_gotoTop.svg) no-repeat center/36px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); border:1px solid var(--gray02);}
.gotoTop.put {position:static;}

@media (max-width: 1279px) {
    .topWrap {height:52px; padding:0 10px; margin-top:0;}
    .gotoTop {width:52px; height:52px; right:10px; bottom:24px; background-size:24px;} 
}

/* button */
.btn {display:inline-flex; align-items: center; justify-content: center; height:56px; border-radius: 8px; border:1px solid var(--gray01); padding:0 23px; transition: background-color 0.5s, border-color 0.5s; font-size: 18px; background-color:#fff;}
.btn:focus-visible:not(:disabled) {border-color:var(--text01); background-color:var(--status01); /*text-decoration:underline; text-underline-offset:4px;*/}

.btn.blue {background-color:var(--primary); border-color:var(--primary); color:#fff; font-weight:600;}
.btn.blue:focus-visible:not(:disabled) {background-color:#33378C; border-color:#33378C}
.btn.gray {background-color:var(--secondary-gray); border-color:var(--secondary-gray); color:#fff; font-weight:600;}
.btn.gray:focus-visible:not(:disabled) {background-color:#535E6E; border-color:#535E6E;}