.main_container{ display: flex; align-items: center; justify-content: center; }

/**************************  mainTitle  ************************/
.mainTitle_area{ margin: 120px 0; padding: 0 32px; }
.mainTitle_area h1{ font-size: 46px; letter-spacing: -1.87px; color: #666; font-weight: normal; font-family:'nexen_r'; line-height: 66px; }
.mainTitle_area h1 p{ color: #0e74e0; font-family:'nexen_r'; display: inline; font-weight: normal; }




/**************************  main_login_wrap  ************************/
.main_login_wrap{ width: 100%; position: relative; z-index: 9; }
.main_login_wrap .main_login_area{ width: 100%; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(4px); position: relative; z-index: 9; padding: 40px 50px; background-color: rgba(19,132,253,0.9); border-radius: 22px; box-shadow: 0 16px 26.2px 0.8px rgba(156,163,172,0.6); }
.main_login_wrap .main_login_area .main_loginTitle h2{ font-size: 26px; letter-spacing: -0.84px; color: #fff; font-weight: normal; font-family:'nexen_r'; }
.main_login_wrap .main_login_area .main_loginTitle p{ margin-top: 12px; font-size: 18px; letter-spacing: -0.8px; color: #fff; }
.main_login_wrap .main_login_area .main_loginBtn{ display: flex; gap: 20px; }
.main_login_wrap .main_login_area .main_loginBtn a{ background-color: #183c6e; width: 326px; height: 110px; display: flex; flex-direction: column; padding: 32px; border-radius: 10px; position: relative; }
.main_login_wrap .main_login_area .main_loginBtn a h3{ font-size: 21px; color: #fff; letter-spacing: -0.5px; font-family:'nexen_r'; font-weight: normal; }
.main_login_wrap .main_login_area .main_loginBtn a p{ margin-top: 10px; font-size: 15px; letter-spacing: -0.38px; color: #fff; }
.main_login_wrap .main_login_area .main_loginBtn a img{ position: absolute; right: 0; bottom: 0; transform: translate(-25%, 10%) scale(0.8); }

.main_login_wrap .mainImg_area{ position: absolute; bottom: 0px; right: 46px; z-index: 0; overflow: hidden; }
.main_login_wrap .mainImg_area .mainImg_box{ margin-bottom: -30px; position: relative; }
.main_login_wrap .mainImg_area .mainImg_box img{ position: relative; }
.main_login_wrap .mainImg_area .mainImg_box img:nth-child(1){ margin-right: -45px; z-index: 3; }
.main_login_wrap .mainImg_area .mainImg_box img:nth-child(2){ margin-right: -78px; z-index: 2; }



/**************************  main_institution_wrap  ************************/
.main_institution_wrap{ margin-top: 46px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.main_institution_wrap h3{ font-size: 18px; letter-spacing: -0.1px; color: #183c6e; font-family:'nexen_r'; font-weight: bold; flex: none; width: 100px; }
.main_institution_wrap .main_institution_area{ width: calc(100% - 180px); overflow: hidden; padding-bottom: 0; }
.main_institution_wrap .main_institution_area .swiper-slide{ width: auto; height: 40px; }
.main_institution_wrap .main_institution_area .swiper-slide img{ height: 100%; }
.main_institution_wrap .main_institution_area:before{ content: ""; display: block; width: 10px; height: 100%; background: linear-gradient(to right, #eaf0f8, transparent); position: absolute; left: 0; top: 0; z-index: 9 }
.main_institution_wrap .main_institution_area:after{ content: ""; display: block; width: 20px; height: 100%; background: linear-gradient(to left, #eaf0f8, transparent); position: absolute; right: 0; top: 0; z-index: 9 }




/**************************  main  ************************/
.main_backgroundImg{ position: absolute; z-index: 0; bottom: -118px; left: 50%; transform: translateX(-225%); }
.main_backgroundImg2{ position: absolute; z-index: 0; bottom: -165px; left: 50%; transform: translateX(-164%); }


/* 메인레이아웃 */
.main_wrap{ display: flex; justify-content: space-between; position: relative; z-index: 10; gap: 44px; }

.main_learnerCon_area{ display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 1200px; }

/* 메인 리스트 */
.mainList_area{ display: flex; gap: 20px; }
.main_list_box{ width: 100%; border-radius: 22px; background-color: #fff; box-shadow: 0 10px 23.3px 0.7px rgba(156,163,172,0.24); padding: 40px 50px 50px 50px; }
.main_list_box .main_list_title{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.main_list_box .main_list_title h3{ font-size: 26px; color: #464646; letter-spacing: -0.78px; font-family:'nexen_r'; font-weight: normal; word-break: keep-all; }
.main_list_box .main_list_title a{ font-size: 14px; color: #464646; letter-spacing: -0.56px; flex: none; }
.main_list_box .main_list_con{ height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 6px; border-bottom: 1px solid #eaeaea; }
.main_list_box .main_list_con a{ display: flex; align-items: center; width: 100%; justify-content: space-between; }
.main_list_box .main_list_con a p,
.main_list_box .main_list_con a b{ font-size: 17px; letter-spacing: -0.68px; color: #000; line-height: 24px; width: 100%; }
.main_list_box .main_list_con.ongoing::before{ content: "진행중"; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 24px; border-radius: 12px; background-color: #1384fd; font-size: 14px; letter-spacing: -0.56px; color: #fff; margin-right: 4px; flex: none; }
.main_list_box .main_list_con a.new::after{ content: ""; display: inline-block; width: 20px; height: 20px; background: url(../../images/portal/ico_new.png); background-repeat: no-repeat; margin-left: 6px; flex: none; }
.main_list_box .main_list_con > p{ font-size: 14px; color: #777; letter-spacing: -0.56px; }

/* 메인 버튼 */
.mainBtn_area{ display: flex; gap: 20px; }
.mainBtn_area a{ width: 100%; height: 160px; background-color: #cedef5; display: flex; justify-content: space-between; align-items: center; padding: 20px 50px 20px 44px; border-radius: 22px; }
.mainBtn_area a div h3{ font-size: 22px; letter-spacing: -0.66px; color: #464646; font-family:'nexen_r'; font-weight: normal; }
.mainBtn_area a div p{ font-size: 15px; letter-spacing: -0.45px; color: #464646; margin-top: 16px; }

/* 메인 배지 */
.mainBadge{ width: 345px; padding: 30px 20px 20px; border-radius: 22px; flex: none; min-height: 600px; background: linear-gradient(0deg, rgba(43,124,244,1) 0%, rgba(0,76,181,1) 100%); box-shadow: 0 15px 15.3px 2.7px #0700021c; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.mainBadge .tit{ width: 100%; font-size: 20px; color: #fff; }
.mainBadge .tit b{ font-size: 22px; color: inherit; font-weight: bold; }
.mainBadge .badgeArea img{ margin-bottom: 24px; width: 100%; height: 230px; object-fit: scale-down; }
.mainBadge .badgeArea h3{ font-size: 28px; color: #fff; font-family:'nexen_r'; text-align: center; }
.mainBadge .badgeArea p{ margin-top: 10px; font-size: 15px; color: #fff; text-align: center; }
.mainBadge .badgeArea:has(h4){ position: relative; }
.mainBadge .badgeArea h4{ font-size: 16px;  text-align: center; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 400; line-height: 1.4; }
.mainBadge a{ width: 100%; border-radius: 16px; background-color: #105ac6; display: flex; align-items: flex-start; padding: 20px; gap: 16px; }
.mainBadge a img{ flex: none; }
.mainBadge a p{ font-size: 15px; line-height: 20px; color: #fff; margin-bottom: 8px; }
.mainBadge a span{ font-size: 15px; color: #70cafe; }



@media screen and (max-width:1440px){
    .mainTitle_area{ margin: 170px 0; }
    .mainTitle_area h1{ font-size: 42px; line-height: 56px; }

    .main_login_wrap .main_login_area .main_loginTitle h2{ font-size: 26px; }
    .main_login_wrap .main_login_area .main_loginTitle p{ margin-top: 12px; font-size: 18px; }
    .main_login_wrap .main_login_area{ padding: 32px 46px; }
    .main_login_wrap .main_login_area .main_loginBtn a{ width: 310px; height: 100px; padding: 30px 26px; }
    .main_login_wrap .main_login_area .main_loginBtn a p{ margin-top: 8px; font-size: 14px; }
    .main_login_wrap .main_login_area .main_loginBtn a img{ transform: scale(0.8)translateX(-50%)translateY(12%); }

    .main_login_wrap .mainImg_area{ right: 10px; }
    .main_login_wrap .mainImg_area .mainImg_box{ margin-bottom: -78px; }
    .main_login_wrap .mainImg_area .mainImg_box img{ transform: scale(0.8); }
    .main_login_wrap .mainImg_area .mainImg_box img:nth-child(1){ margin-right: -88px; }
    .main_login_wrap .mainImg_area .mainImg_box img:nth-child(2){ margin-right: -110px; }



    /**************************  main  ************************/
    .main_backgroundImg,.main_backgroundImg2{ display: none; }

    
    /* 메인레이아웃 */
    .main_wrap{ flex-direction: column; align-items: center; }

    .main_learnerCon_area{ margin-top: 20px; max-width: none; }

    /* 메인 리스트 */
    .main_list_box{ max-width: none; padding: 38px 40px 42px 40px; }
    .main_list_box .main_list_title h3{ font-size: 24px; }
    .main_list_box .main_list_con a p{ font-size: 16px; }

    /* 메인 버튼 */
    .mainBtn_area a{ max-width: none; }

}


@media screen and (max-width:1024px){
    .container{ padding-top: 20px; }

    .mainTitle_area{ margin: 60px 0 226px; }
    .mainTitle_area h1{ text-align: center; font-size: 28px; line-height: 36px; letter-spacing: -1.01px; }

    .main_login_wrap .main_login_area{ flex-direction: column; padding: 30px 28px; align-items: flex-start; }
    .main_login_wrap .main_login_area .main_loginTitle h2{ font-size: 20px; letter-spacing: -0.6px; margin-bottom: 14px; }
    .main_login_wrap .main_login_area .main_loginTitle p{ display: none; }
    .main_login_wrap .main_login_area .main_loginBtn{ flex-direction: column; gap: 16px; width: 100%; }
    .main_login_wrap .main_login_area .main_loginBtn a{ width: 100%; height: 90px; padding: 30px 32px 20px 32px; }
    .main_login_wrap .main_login_area .main_loginBtn a h3{ font-size: 17px; letter-spacing: -0.43px; }
    .main_login_wrap .main_login_area .main_loginBtn a p{ font-size: 14px; letter-spacing: -0.35px; }

    .main_login_wrap .mainImg_area{ bottom: 24px; right: 50%; transform: translateX(50%); width: 100%; }
    .main_login_wrap .mainImg_area .mainImg_box{ width: fit-content; margin: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .main_login_wrap .mainImg_area .mainImg_box img{ transform: scale(0.6); }
    .main_login_wrap .mainImg_area .mainImg_box img:nth-child(1){ margin-right: -120px; }
    .main_login_wrap .mainImg_area .mainImg_box img:nth-child(2){ margin-right: -144px; }

    .main_institution_wrap{ flex-direction: column; align-items: flex-start; margin-top: 54px; }
    .main_institution_wrap h3{ font-size: 15px; letter-spacing: -0.45px; margin-bottom: 22px; }
    .main_institution_wrap .main_institution_area{ width: 100%; }
    .main_institution_wrap .main_institution_area img{ height: 22px; }
    .main_institution_wrap .main_institution_area:before{ content: ""; display: block; width: 10px; height: 100%; background: linear-gradient(to right, #eaf0f8, transparent); position: absolute; left: 0; top: 0; z-index: 9 }
    .main_institution_wrap .main_institution_area:after{ content: ""; display: block; width: 20px; height: 100%; background: linear-gradient(to left, #eaf0f8, transparent); position: absolute; right: -1px; top: 0; z-index: 9 }
    
    


    /**************************  main  ************************/
    /* 메인 리스트 */
    .mainList_area{ flex-direction: column; }
    .main_list_box{ padding: 30px; }
    .main_list_box .main_list_title h3{ font-size: 21px; letter-spacing: -0.54px; line-height: 26px; }
    .main_list_box .main_list_title a{ font-size: 12px; letter-spacing: -0.48px; }
    
    .main_list_box .main_list_con{ flex-direction: column; justify-content: center; align-items: flex-start; border-bottom: none; gap: 0; position: relative; }
    .main_list_box .main_list_con a{ position: relative;  }
    .main_list_box .main_list_con.ongoing{ padding-left: 54px; }
    .main_list_box .main_list_con.ongoing::before{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 46px; height: 24px; font-size: 12px; }
    .main_list_box .main_list_con a p{ font-size: 15px; letter-spacing: -0.6px; }
    .main_list_box .main_list_con > p{ font-size: 12px; letter-spacing: -0.48px; }

    /* 메인 버튼 */
    .mainBtn_area{ flex-direction: column; }
    .mainBtn_area a{ padding: 20px 30px; height: auto; min-height: 110px; gap: 60px; }
    .mainBtn_area a div h3{ font-size: 18px; letter-spacing: -0.54px; word-break: keep-all; line-height: 24px; }
    .mainBtn_area a div p{ font-size: 13px; letter-spacing: -0.39px; margin-top: 10px; line-height: 16px; }


}