/* main_color */
:root{
    --xnmain-blue:#091332;
    --xnmain-blue2:#1D3278;
    --xnmain-bk1:#444;
    --xnmain-bk2:#333;
    --xnmain-bk3:#252525;
    --xnmain-gy:#f3f3f3;
    --xnmain-gy8: #888;
}
/* base-font */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap');
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-ExtraLight.woff') format('woff'); 
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-Regular.woff') format('woff'); 
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-Medium.woff') format('woff'); 
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-SemiBold.woff') format('woff'); 
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-Bold.woff') format('woff'); 
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-ExtraBold.woff') format('woff'); 
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard'; 
    src: url('Pretendard-Black.woff') format('woff'); 
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'KBO Dia Gothic'; 
    src: url('KBO-Dia-Gothic_light.woff') format('woff'); 
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'KBO Dia Gothic'; 
    src: url('KBO-Dia-Gothic_medium.woff') format('woff'); 
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'KBO Dia Gothic'; 
    src: url('KBO-Dia-Gothic_medium.woff') format('woff'); 
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'KBO Dia Gothic'; 
    src: url('KBO-Dia-Gothic_bold.woff') format('woff'); 
    font-weight: 700;
    font-style: normal;
}
/* 공통 color*/
.xnmain_inner{
    position:relative;
    width:100%;
    max-width:1920px; 
    padding:0 8%;
    margin:auto;
}
a:hover {
    text-decoration: none !important;
}

/* header */

#header.xnmain{
    height:144px;
    font-family: 'Pretendard';
    background:transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.50);
    transition: all .4s;
    position: fixed;
}
#header.xnmain .navbar-static-top .container{
    width:100%;
    max-width:1620px;
}
#header.xnmain .navbar-static-top,
#header.xnmain .navbar-static-top .container .navbar-header{
    height:96px;
}
#header.xnmain .navbar-static-top .container .navbar-header{
    display:flex;
    align-items:center;
}
#header.xnmain .navbar-static-top .container .xn-main-menu-wrap{
    display:flex;
    align-items:center;
    flex:1;
    float:inherit;
    height:96px;
}
#header.xnmain .xn-header-menu-wrapper{
    text-align: center;
    height:96px;
}
#header.xnmain .navbar-static-top .container .xn-main-menu-wrap .desktop{
    flex:1;
}
#header.xnmain .xn-main-catalog-header-logo-wrap{
    display:flex;
    align-items:center;
    height:100%;
}
#header.xnmain .xn-main-catalog-header-logo-image{
    height:41px;
}
#header.xnmain .xn-header-menu{
    height:96px;
}
#header.xnmain .xn-header-menu li{
    width:150px;
    font-size:22px;
    font-weight: 600;
}
#header.xnmain .xn-header-menu li:hover{
    background:transparent !important;
}
#header.xnmain .xn-header-menu li a{
    height:96px;
    line-height:96px;
    color: #FFF;
}
#header.xnmain  .xn-sub-menu-outer-wrapper{
    background:rgba(37, 37, 37, 0.80);
    margin-top:0;
}
#header.xnmain .xn-sub-menu-wrapper{
    display:flex !important;
    justify-content: center;
    width: 100%;
    max-width:1620px;
    padding: 0 24px 0 173px;
    margin:auto;
}
#header.xnmain .xn-sub-menu-item-wrapper{
    width:150px;
}
#header.xnmain .xn-sub-menu-item-wrapper li{
    width:100%;
}
#header.xnmain .xn-sub-menu-item-wrapper li:first-child{
    padding-top:10px;
}
#header.xnmain .xn-sub-menu-item-wrapper li:last-child{
    padding-bottom:10px;
}
#header.xnmain .xn-sub-menu-item-wrapper li a{
    font-size:15px;
    color:#ccc;
    padding:5px 0;
}
#header.xnmain .xn-sub-menu-item-wrapper li a:hover{
    color:#fff;
}
#header.xnmain .btn-login{
    height:fit-content;
    float:inherit;
    margin-top: 0;
    border-radius:0;
    padding:0;
    background:none;
}
#header.xnmain .btn-login,
#header.xnmain .btn-join{
    color:#fff;
    font-size: 16px;
    font-weight: 500;
}
#header.xnmain .xn-header-member-dropdown-menu{
    margin-top:0;
    transform: translate3d(-75px, 40px, 0px) !important;
}
#header.xnmain .btn-dropdown-user-menu{
    display:flex;
    align-items:center;
    border:0;
    margin:0;
    padding:0;
    color:#fff;
    font-size:15px;
    background-color: transparent;
}
#header.xnmain .xn-change_language-select_dropdown{
    width:110px;
    border:0;
    border-radius:.25rem;
    z-index:22;
}
#header.xnmain .xn-change_language-select_dropdown-item{
    border-radius:.25rem;
}
#header.xnmain .xn-header-member-btn-group{
    display:flex;
    align-items:center;
}
#header.xnmain .xn-header-member-btn-group i{
    width:20px;
    height:20px;
    background:url(xnmain_dd_ico.svg) no-repeat;
}
.tnb{
    position:relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(2px);
}
.tnb > div{
    position:relative;
    height:48px;
    display:flex;
    align-items:center;
    justify-content: flex-end;
}
.tnb > div > div{
    position:relative;
    height:100%;
    font-weight:600;
}
.tnb > div > div:first-child{
    display:flex;
    gap:30px;
    padding:0 30px;
    background: rgba(255, 255, 255, 0.80);
}
.tnb .top_btn{
    display:inline-flex;
    align-items:center;
    gap:30px;
    background:var(--xnmain-bk3);
    padding:0 30px;
}
.t_search{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:15px;
    color:#000 !important;
}
.t_search i{
    display:inline-block;
    width:30px;
    height:30px;
    background:url(xnmain_search_ico.svg) no-repeat center;
}
#header.xnmain .xn-change_language-title{
    display:none;
}
#header.xnmain .xn-change_language-container{
    height:100%;
}
#header.xnmain .xn-change_language-select_box{
    width:auto;
    justify-content: center;
    gap:5px;
    font-size:15px;
    color:#000;
    padding:0;
    border:0;
}
#header.xnmain .xn-change_language-select_box>i{
    width:30px;
    height:30px;
    background:url(xnmain_lang_ico.svg) no-repeat;
}
.all_menu{
    position:relative;
    display:inline-block;
    gap:5px;
    width:24px;
    height:24px;
    cursor: pointer;
}
.all_menu span{
    position:absolute;
    display:inline-block;
    width:100%;
    height:3px;
    border-radius:10px;
    background:#fff;
    transition: all .4s;
}
.all_menu span:nth-child(2n-1){
    width:50%;
}
.all_menu span:first-child{
    right:0;
}
.all_menu span:nth-child(2){
    top:8px;
    transform: translateX(-50%);
}
.all_menu span:last-child{
    left:0;
    top:16px;
}
.all_menu:hover span{
    width:100% !important;
}
.on{
    background:#fff !important;
    border-bottom:1px solid #ddd !important;
}
.on .xn-main-catalog-header-logo-image{
    filter: invert(1) grayscale(1);
}
.on .tnb{
    background:#f3f3f3;
}
.on .xn-header-menu li a{
    color:#333 !important;
}
.on .all_menu span{
    background:#000;
}

/* sitemap */
.xnmain_sitemap{
    position: absolute;
    display:none;
    font-family: "Pretnedard";
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.90);
    z-index: 99999;
}
.menu-open {
    height:100%;
    overflow: hidden;
}
.sitemap_inner{
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content: center;
    height:100vh;
    gap:20px;
    width:80%;
    margin:auto;
}
.sitemap_inner > div{
    display:flex;
}
.sitemap_inner > div > a{
    display:inline-block;
    width:20%;
    font-size:40px;
    font-weight:600;
    color:#fff;
}
.s_sitemap{
    display: inline-flex;
    flex-wrap: wrap;
    width:80%;
    min-width:260px;
}
.s_sitemap li{
    display:flex;
    align-items: center;
}
.s_sitemap li a{
    display:inline-block;
    font-size:20px;
    color:#ccc;
    padding:10px 15px;
}
.s_sitemap li a:hover{
    color:#fff;
}
.sitemap_close {
    position: absolute;
    right: 0;
    width: 70px;
    height: 70px;
    color: #fff;
    cursor: pointer;
    background:url(xnmain_sitemap_close.svg) no-repeat center;
    top:100px;
    border:0;
}

/* visual */
#visual.xnmain{
    display:none;
}

/* main slide */
.xnmain_visual{
    position:relative;
    font-family: "Pretendard";
}
.xnmain_main_slider{
    position:relative;
    height:860px;
}
.xnmain_main_slider .xn-widget-slider-container .xnws-img{
    border-radius: 0 0 100px 100px;
}
.xnmain_main_slider .carousel-caption{
    top:300px;
    bottom:inherit;
    padding:0;
}
.xnmain_slogan{
    color:#fff;
    font-size: 60px;
    font-weight:600;
    letter-spacing: -0.6px;
    line-height: normal;
    transform: translateY(100%);
    opacity: 0;
    animation: slideUp 1.5s ease-out forwards;
}
.xnmain_slogan .sg_en{
    font-size: 30px;
    font-weight:400;
    margin-bottom:20px;
}
.xnmain_slogan span{
    font-weight: 900;
}

/* scroll down */
.sc_down{
    position:absolute;
    width:143px;
    height:143px;
    text-align:center;
    left:50%;
    transform: translateX(-50%) translateY(50%);
    bottom:0;
    border-radius:50%;
    background:url(xnmain_sc_ico.svg) no-repeat center #fff;
    z-index:9;
}
.sc_down span{
    position:relative;
    display:inline-block;
}
.sc_down span:nth-child(1){
    width:121px;
    height:121px;
    background:url(xnmain_sc1.svg) no-repeat center;
    margin-top:11px;
    animation: spin1 8s linear infinite;
}
.sc_down span:nth-child(2){
    position:absolute;
    width:90px;
    height:90px;
    background:url(xnmain_sc2.svg) no-repeat center;
    left:50%;
    top:26px;
    margin-left:-31%;
    animation: spin2 8s linear infinite;
}
@keyframes spin1 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}
@keyframes spin2 {
    from {
    transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}
@keyframes slideUp {
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

/* search */
.m_search{
    position:absolute;
    width:780px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.80);
    padding:20px 22px 20px 30px;
    bottom:185px;
    left:50%;
    transform: translateX(-50%);
    z-index:10;
}
.m_search > form{
    position:relative;
    display:flex;
    align-items:center;
    margin:0;
}
.search_box_form > input{
    border:0;
    padding:0;
    font-size: 20px;
    color:#000;
    font-weight:500;
    background:transparent !important;
}
.btn_search{
    width:137px;
    height:54px;
    border-radius: 50px;
    background: var(--xnmain-blue);
    font-size: 20px;
    color:#fff;
    border:0;
}

/* cetegory */
.xnmain_cnt{
    font-family: "Pretendard";
}
.xnmain_cate{
    display:flex;
    align-items:center;
    line-height: normal;
    margin:150px 0;
}
.xnmain_cate .title:before{
    display:block;
    content:'';
    width:27px;
    height:27px;
    background:url(xnmain_cate_ico.svg) no-repeat;
    margin-bottom:27px;
}
.xnmain_cate .title{
    width:25%;
    font-size: 40px;
    color:#000;
    font-weight: 800;
}
.xnmain_cate .title span{
    display:block;
    font-size: 20px;
    color: #8A8A8A;
    font-weight: 500;
    margin-top:20px;
}
.cate_list{
    display:inline-flex;
    width:75%;
    gap: 2%;
}
.cate_list a{
    width:calc(100% / 4);
    display:inline-block;
    font-size: 20px;
    color:var(--xnmain-bk1);
    border-radius: 20px;
    background:var(--xnmain-gy);
    flex: 1 0 0;
    padding:50px;
    transition: all .4s;
}
.cate_list a:hover{
    background:var(--xnmain-bk2);
}
.cate_list a:hover,
.cate_list a:hover p{
    color:#FFF
}
.cate_list a p{
    font-size: 32px;
    font-weight: 700;
    color:#000;
}
.cate_list a i{
    display:block;
    width:85px;
    height:85px;
    margin-top:24px;
}
.cate_list a:hover i{
    filter: brightness(0) invert(1);
}
.cate_list a:nth-child(1) i{
    background:url(xnmain_cate01_ico.svg) no-repeat;
}
.cate_list a:nth-child(2) i{
    background:url(xnmain_cate02_ico.svg) no-repeat;
}
.cate_list a:nth-child(3) i{
    background:url(xnmain_cate03_ico.svg) no-repeat;
}
.cate_list a:nth-child(4) i{
    background:url(xnmain_cate04_ico.svg) no-repeat;
}

/* board widget */
.xnmain-widget-board .xn-widget-container{
    font-family: "Pretendard";
    max-width:inherit !important;
    padding:0 !important;
    margin-bottom:170px !important;
}
.xnmain-widget-board .xnbw-title-wrap{
    margin-bottom:55px !important;
}
.xnmain-widget-board .xnbw-title{
    font-size: 60px !important;
    color:#000;
    font-weight: 800 !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-sub-title{
    display:none;
}
.xnmain-widget-board .xn-widget-container .xnbw-category-wrap{
    position:absolute;
    display:flex;
    align-items:center;
    margin:0 !important;
    right:0;
    top:0;
}
.xnmain-widget-board .xn-widget-container .xnbw-category-tab-wrap{
    border:0 !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-category-tab,
.xnmain-widget-board .xn-widget-container .xnbw-all-tab{
    font-size:22px !important;
    border:0 !important;
    padding:10px 25px !important;
    line-height:normal !important;
    background:transparent !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-all-tab.selected,
.xnmain-widget-board .xn-widget-container .xnbw-category-tab.selected{
    color:#000 !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-more-tab{
    position:relative !important;
    top:0 !important;
    margin-left:30px;
}
.xnmain-widget-board .xn-widget-container .xnbw-more-tab span{
    display:none;
}
.xnmain-widget-board .xn-widget-container .xnbw-more-tab-plus-icon{
    width:40px !important;
    height:40px !important;
    background:url(xnmain_board_more_ico.svg) no-repeat !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-items-container{
    flex-direction: row !important;
    border-radius:20px;
    gap: 0 !important;;
    background:var(--xnmain-gy) !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-item-container{
    width:25% !important;
    height:inherit !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-board-post-list{
    position: relative;
    flex-direction: column;
    align-items: flex-start !important;
    padding:50px !important;
    transition: all .4s;
    border-radius: 20px;
}
.xnmain-widget-board .xn-widget-container .xnbw-board-post-list:after{
    position:absolute;
    display:inline-block;
    content:'';
    width:50px;
    height:50px;
    right:5%;
    bottom:20px;
    background:url(xnmain_board_arrow.svg) no-repeat;
    opacity: 0;
}
.xnmain-widget-board .xn-widget-container .xnbw-items-container li:nth-of-type(-n+3){
    border-right: 1px dashed #CDCDCD;
}
.xnmain-widget-board .xn-widget-container .xnbw-items-container li:hover .xnbw-board-post-list{
    background:var(--xnmain-bk3) !important;
    transform: translateY(-40px);
}
.xnmain-widget-board .xn-widget-container .xnbw-items-container li:hover .xnbw-post-list-title,
.xnmain-widget-board .xn-widget-container .xnbw-items-container li:hover .xnbw-post-list-category{
    color:#fff !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-board-post-list:hover{
    background:transparent !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-board-post-list:hover::after{
    opacity: 1;
}

.xnmain-widget-board .xn-widget-container .xnbw-post-list-category{
    height:20px !important;
    font-size: 20px !important;
    font-weight:500;
    border:0 !important;
    border-radius:0 !important;
    color: var(--xnmain-blue2) !important;
    padding:0 !important;
}
.xnmain-widget-board .xn-widget-container .xnbw-post-list-title{
    display: -webkit-box !important;
    height:100px !important;
    font-size: 22px !important;
    color:#000;
    font-weight:500;
    flex:inherit !important;   
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 3 !important;          
    overflow: hidden;           
    text-overflow: ellipsis;        
    line-height: 1.5;
    white-space: normal;
    word-break: keep-all;
}
.xnmain-widget-board .xn-widget-container .xnbw-post-list-created{
    display:flex;
    align-items:center;
    width:100% !important;
    font-size:16px !important;
    gap:5px;
    margin-top:10px;
}
.xnmain-widget-board .xn-widget-container .xnbw-post-list-created::before{
    display:inline-block;
    width:20px;
    height:20px;
    content:'';
    background:url(xnmain_calendar_ico.svg) no-repeat;
}

/* courses widget */
.xnmain-widget-lecture{
    display:flex;
    width:100%;
    justify-content: flex-end;
    font-family: "Pretendard";
}
.xnmain-widget-lecture .xn-widget-container{
    width:92% !important;
    background:transparent !important;
    padding:0 !important;
    float:right;
    margin-bottom:120px;
    /* border:1px solid red; */
}
.xnmain-widget-lecture .xncw-top-container{
    display:flex;
    align-items:center;
    margin-bottom:60px;
}
.xnmain-widget-lecture .xncw-top-container,
.xnmain-widget-lecture .xnbw-items-container{
    width:100%;
}
.xnmain-widget-lecture  .xncw-top-container .xncw-title-wrap .xncw-sub-title{
    display:none;
}
.xnmain-widget-lecture .xncw-top-container .xncw-title-wrap{
    text-align:left;
}
.xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title{
    display:inline-block;
    font-size: 60px !important;
    font-weight: 800;
}
.xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title:after{
    display: inline-block;
    content:'강좌';
    color:var(--xnmain-gy8);
    margin-left:10px;
}
.xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title:lang(en):after{
    content:'Courses';
}
.xnmain-widget-lecture .xncw-top-container .xncw-more{
    position:relative;
    display:inline-block;
    bottom:inherit;
    right:inherit;
    padding:0;
}
.xnmain-widget-lecture .xncw-top-container .xncw-more:after{
    display:inline-block;
    content:'';
    width:40px;
    height:40px;
    margin-left:20px;
    background:url(xnmain_course_more_ico.svg) no-repeat;
}
.xnmain-widget-lecture .xncw-top-container .xncw-more span,
.xnmain-widget-lecture .xncw-top-container .xncw-more i{
    display:none;
}
.xnmain-widget-lecture .xnbw-items-container{
    position:relative;
    display: flex;
}
.xnmain-widget-lecture .xnbw-items-container > span:nth-child(1),
.xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
    position:absolute;
    top:-130px;
}
.xnmain-widget-lecture .xnbw-items-container > span:nth-child(1){
    order:1;
    right:185px;
}
.xnmain-widget-lecture .xnbw-items-container > span:nth-child(2){
    width:100%;
    order:0;
}
.xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
    order:2;
    right:80px;
}
.xnmain-widget-lecture .xnbw-item-container{
    width:25%;
    margin:0;
}
.xnmain-widget-lecture .xncwi-container:hover{
    box-shadow: none !important;
}
.xnmain-widget-lecture .xncwi-container:hover .xncwi-background{
    filter: brightness(0.5);
}
.xnmain-widget-lecture .xncwi-container{
    border:0;
}
.xnmain-widget-lecture .xnbw-items-container .xnbw-items-btn-wrap button i{
    width:65px;
    height:33px;
}
.xnmain-widget-lecture .xnbw-items-container .xnbw-items-prev-btn i{
    background:url(xnmain_prev_ico.svg) no-repeat;
}
.xnmain-widget-lecture .xnbw-items-container .xnbw-items-next-btn i{
    background:url(xnmain_next_ico.svg) no-repeat;
}
.xnmain-widget-lecture .xncwi-container .xncwi-background{
    transition: filter 200ms ease;
    height:13.02vw;
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container{
    display: flex;
    flex-direction: column;
    height:inherit;
    padding:20px;
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-title{
    display: -webkit-box !important;
    height:54px !important;
    font-size:22px !important;
    line-height: normal;
    margin-bottom:40px;
    order: 1;
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-catagory-title{
    display: -webkit-box !important;
    -webkit-line-clamp: 1;     
    -webkit-box-orient: vertical; 
    overflow: hidden;               /* 넘친 부분 숨김 */
    text-overflow: ellipsis;  
    height:22px;
    font-size: 16px !important;
    color:#000;
    font-weight: 600;
    margin-bottom:15px;
    order: 0;
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap{
    order:2;
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-recruitment-wrap{
    display:none;
    order:3;
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-status{
    font-size: 15px;
    font-weight:500;
    color:var(--xnmain-bk2);
}
.xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-date{
    font-size: 15px;
    color:#999;
}
.xnmain-widget-lecture .xncwi-info-container .xncwi-author,
.xnmain-widget-lecture .xncwi-container .xncwi-info-footer{
    display:none;
}
.xnmain-widget-lecture .xncwi-container .xncwi-status-label,
.xnmain-widget-lecture .xncwi-container .xncwi-payment-label,
.xnmain-widget-lecture .xncwi-container .xncwi-status-label.closed{
    font-size: 15px;
    padding:8px 10px;
}
.xnmain-widget-lecture .xncwi-container .xncwi-status-label{
    background-color:var(--xnmain-blue2);
}
.xnmain-widget-lecture .xncwi-container .xncwi-status-label.closed{
    background-color:var(--xnmain-bk3);
}
.xnmain-widget-lecture .xncwi-container .xncwi-payment-label{
    background-color:#fff;
    color:#000;
}
.xnmain-widget-lecture .xncwi-container .xncwi-catalog-info-container{
    height: 0;
}
.xnmain-widget-lecture .xncwi-container .xncwi-certificate-wrap{
    text-align: right;
}
.xnmain-widget-lecture .xncwi-container .xncwi-certificate-wrap .xncwi-certificate-title{
    width:auto;
    transform: translateY(-100%);
    background:var(--xnmain-bk1);
    padding:8px 10px;
}
.xnmain-widget-lecture .xncwi-container .xncwi-certificate-wrap .xncwi-certificate-icon{
    display:none;
}
.xnmain-widget-lecture .xncwi-container .xncwi-catalog-info-container .xncwi-catalog-wrap .xncwi-catalog-title{
    display:none;
}
.lc_left .xn-widget-container {
    float:left !important;
}
.lc_left .xnbw-items-container > span:nth-child(1){
    order:0;
    left:50px;
}
.lc_left .xnbw-items-container > span:nth-child(2){
    order:2;
}
.lc_left .xnbw-items-container > span:nth-child(3){
    order:1;
    left:165px;
}
.lc_left .xncw-top-container{
    justify-content: flex-end;
}

/* footer */
.xnmain_footer{
    border-top: 1px solid #ddd;
    font-family: "Pretendard";
}
.footer_logo{
    display:inline-block;
    margin-right:50px;
}
.ft_add{
    position: relative;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding:40px 0;
    font-size: 16px;
    color: rgba(51, 51, 51, 0.80);
    font-weight: 600;
}
.fs_group{
    position:relative;
}
.ft_btn{
    position: relative;
    display:flex;
    gap:30px;
    border-top: 1px solid #DDD;
    padding:23px 0;
}
.ft_btn > a{
    display:inline-block;
    font-size: 17px;
    color: #535353;
    font-weight:500;
}
.ft_btn > a.pri{
    color: #000;
    font-weight:600;
}
.fs_btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:50px;
    font-size: 17px;
    color: #535353;
    font-weight:600;
    cursor: pointer;
}
.fs_list{
    display:none;
    position:absolute;
    width:160px;
    bottom:100%;
    background:var(--xnmain-bk1);
    padding:15px;
}
.fs_list a{
    display:block;
    padding:3px 0;
    width:100%;
    font-size: 16px;
    color:#fff;
}
.fs_list a:hover{
    color:var(--xnmain-gy8);
}
.xnmain_footer .sns{
    position:absolute;
    display:inline-flex;
    gap:30px;
    right:0;
}
.xnmain_footer .sns a{
    display:inline-block;
    width:24px;
    height:24px;
}
.xnmain_footer .sns a:nth-child(1){
    background:url(xnmain_youtube.svg) no-repeat center;
}
.xnmain_footer .sns a:nth-child(2){
    background:url(xnmain_blog.svg) no-repeat center;
}
.xnmain_footer .sns a:nth-child(3){
    background:url(xnmain_facebook.svg) no-repeat center;
}
.scrolltop {
    font-family: "Oswald";
    font-size: 20px;
    font-weight: 500;
    color: #434343 !important;
}
.scrolltop span{
    display: block;
    font-size: 30px;
}
/* 터치 디바이스에서는 hover 무시 */
@media (hover: none) {
    .cate_list a:hover{
        background:inherit;
    }
    .cate_list a:hover,
    .cate_list a:hover p{
        color:inherit;
    }
    .cate_list a:hover i{
        filter: inherit;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-items-container li:hover .xnbw-board-post-list{
        background: inherit !important;
        transform: inherit;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-items-container li:hover .xnbw-post-list-title, 
    .xnmain-widget-board .xn-widget-container .xnbw-items-container li:hover .xnbw-post-list-category{
        color:inherit !important;
    }
}
@media (min-width:1921px) {
    .xnmain-widget-lecture .xn-widget-container{
        width:90% !important;
    }
    .xnmain_inner{
        max-width:1620px;
        padding:0;
    }
}
@media (max-width:1920px) {
    .xnmain_inner{
        padding:0 5%;
    }
    .tnb > div{
        padding:0;
    }
    #header.xnmain .navbar-static-top .container{
        max-width: inherit;
        padding:0 5%;
    }
    .cate_list a{
        padding:2.6vw;
    }
    .xnmain-widget-lecture .xn-widget-container{
        width:95% !important;
    }
    
}
@media (max-width:1680px) {
    .xnmain_inner{
        padding:0 2%;
    }
    #header.xnmain .navbar-static-top .container{
        padding: 0 2%;
    }
    .xnmain_main_slider{
        height: 51.19vw;
    }
    .xnmain_main_slider .carousel-caption{
        top: 17.86vw;;
    }
    .xnmain_slogan{
        font-size: 3.57vw;
    }
    .xnmain_slogan .sg_en{
        font-size: 1.79vw;
        margin-bottom: 1.19vw;
    }
    .m_search{
        bottom: 11.01vw;
    }
    .cate_list a{
        word-break: keep-all;
    }
    .cate_list a br{
        display:none;
    }
    .xnmain-widget-lecture .xn-widget-container{
        width:98% !important;
    }
    .xnmain-widget-lecture .xncw-top-container{
        margin-bottom: 3.57vw;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-background{
        height:13.5vw  !important;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1){
        right:12%;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
        right:4%;
    }
    .lc_left .xnbw-items-container > span:nth-child(1){
        left:2%;
        right:inherit;
    }
    .lc_left .xnbw-items-container > span:nth-child(3){
        left:10%;
        right:inherit;
    }
}
@media (max-width:1440px) {
    .xnmain_cate{
        flex-direction: column;
    }
    .xnmain_cate .title,
    .cate_list{
        width:100%;
        word-break: keep-all;
    }
    .m_search{
        padding: 15px 17px 15px 25px;
    }
    .xnmain_cate .title{
        margin-bottom:50px;
    }
    .xnmain_cate .title br{
        display:none;
    }
    .xnmain_cate .title span{
        margin-top:10px;
    }
    .xnmain-widget-board .xnbw-title,
    .xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title{
        font-size: 50px !important;
    }
    .xnmain-widget-board .xnbw-title-wrap{
        margin-bottom:40px !important;
    }
    .ft_add{
        padding: 30px 0;
    }
    .scrolltop{
        margin-top:40px;
    }
}
@media (max-width:1280px) {
    .xnmain_sitemap{
        display:none;
    }
    #header.xnmain .navbar-static-top .container{
        padding:0;
        height:96px;
    }
    #header.xnmain .navbar-static-top .container .navbar-header{
        gap:10px;
        justify-content: flex-start;
    }
    #header.xnmain .navbar-static-top .container .xn-main-menu-wrap{
        display:none;
        flex:inherit;
    }
    #header.xnmain .navbar-collapse.collapse.in.mobile{
        box-shadow: 0 20px 15.7px -4px rgba(0, 0, 0, 0.25);
    }
    .xnmain_main_slider .carousel-caption{
        top:11vw;
    }
    .xnmain_slogan{
        font-size: 4.69vw;;
    }
    .xnmain_slogan .sg_en{
        font-size: 2.19vw;
    }
    .xnmain_cate{
        margin: 11.72vw 0;
    }
    .cate_list a p{
        font-size: 2.5vw;
    }
    .cate_list a{
        font-size: 1.56vw;
    }
    .xnmain-widget-board .xn-widget-container{
        margin-bottom: 13.28vw;
    }
    .xnmain-widget-lecture .xn-widget-container{
        width:96% !important;
        float:inherit !important;
        margin:0 auto 9.4vw auto;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1), 
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
        top:-100px;
    }
    .xnmain-widget-lecture .xnbw-items-btn-wrap{
        display:inline-block !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-board-post-list{
        padding:3.13vw !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-category-wrap{
        top:10px;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-category-tab, 
    .xnmain-widget-board .xn-widget-container .xnbw-all-tab{
        font-size: 18px !important;
        padding:8px 10px !important;
    }
}
@media (max-width:1024px) {
    .cate_list a{
        font-size: 16px;
    }
    .cate_list a p{
        font-size: 24px;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-post-list-title{
        height:90px !important;
        font-size: 20px !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-post-list-created{
        font-size: 14px !important;
    }
}
@media (max-width:980px) {
    .m_search{
        width:78.37vw;
    }
    .xnmain_main_slider .xn-widget-slider-container .xnws-img{
        border-radius: 0 0 10.2vw 10.2vw;
    }
    .xnmain-widget-board .xnbw-title, 
    .xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title{
        font-size: 5.1vw !important;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1), .xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
        top:-9.18vw;
    }

    .xnmain-widget-lecture .xnbw-items-container .xnbw-items-btn-wrap button i{
        width:40px;
        height:28px;
        background-size:contain;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-date,
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-status{
        font-size:14px;
        letter-spacing: -1px;
    }
    .footer_logo{
        margin-right:3vw;
    }
}
@media (max-width:768px) {
    #header.xnmain{
        height:128px;
    }
    #header.xnmain .navbar-static-top, 
    #header.xnmain .navbar-static-top .container,
    #header.xnmain .navbar-static-top .container .navbar-header{
        height:80px;
    }
    #header.xnmain .xn-main-catalog-header-logo-image{
        height:36px;
    }
    .tnb .top_btn,
    .tnb > div > div:first-child{
        gap:10px;
        padding:0 10px;
    }
    #header.xnmain .xn-change_language-select_box>i{
        width:24px;
        height:24px;
        background-size:contain;
    }
    .t_search i{
        width:20px;
        height:20px;
        background-size:contain;
    }
    #header.xnmain .xn-header-member-dropdown-menu{
        transform: translate3d(-90px, 40px, 0px) !important;
    }
    #header.xnmain .btn-dropdown-user-menu .xn-header-member-btn-text.xn-common-title{
        font-size: 14px;
    }
    #header.xnmain .xn-change_language-select_box,
    .t_search{
        font-size: 14px;
    }
    #header.xnmain .btn-login, 
    #header.xnmain .btn-join{
        font-size: 14px;
    }
    .xnmain_main_slider .carousel-caption{
        left:0;
        right:0;
        top:15.5vw;
    }
    .xnmain_slogan{
        font-size:5.7vw;
    }
    .xnmain_slogan .sg_en{
        font-size: 3.2vw;
    }
    .m_search{
        position:relative;
        width:90%;
        bottom:inherit;
        border:1px solid var(--xnmain-blue);
        margin-top:7.8vw;
        padding:10px 10px 10px 20px;
    }
    .search_box_form > input,
    .search_box_form > input::placeholder{
        font-size:16px;
    }
    .btn_search{
        width:auto;
        min-width:60px;
        height:auto;
        font-size: 18px;
        padding:8px 12px;
    }
    .sc_down{
        width:14vw;
        height:14vw;
        background-size:20%;
        bottom:inherit;
        top:36.46vw;
    }
    .sc_down span:nth-child(1){
        width: 80%;
        height: 80%;
        background-size: cover;
        margin-top:1.43vw;
    }
    .sc_down span:nth-child(2){
        width: 58%;
        height: 58%;
        top:20%;
        margin-left: -29%;
        background-size: cover;
    }
    .xnmain_cate .title:before{
        width:3.5vw;
        height:3.5vw;
        margin-bottom:3.5vw;
        background-size:cover;
    }
    .xnmain_cate .title{
        font-size: 30px;
        margin-bottom:30px;
    }
    .xnmain_cate .title span{
        font-size:16px;
    }
    .cate_list{
        flex-wrap: wrap;
    }
    .cate_list a{
        width:49%;
        flex:inherit;
        padding:20px;
    }
    .cate_list a:nth-of-type(-n+2){
        margin-bottom:2%;
    }
    .cate_list a i{
        margin-top:3.1vw;
    }
    .xnmain-widget-board .xn-widget-container{
        margin-bottom:70px !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-more-tab{
        margin-left: 2.6vw;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-more-tab-plus-icon{
        width:30px !important;
        height:30px !important;
        background-size: cover !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-items-container{
        flex-direction: column !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-item-container{
        width:100% !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-items-container li:nth-of-type(-n+3){
        border-right: 0;
        border-bottom: 1px dashed #CDCDCD;
    }
    .xnmain-widget-board .xnbw-title-wrap{
        margin-bottom:20px !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-board-post-list:after{

        display:none;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-board-post-list{
        gap:0 !important;
        padding:20px !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-post-list-title{
        -webkit-line-clamp: 1 !important;
        height: 22px !important;
        font-size: 18px !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-post-list-category{
        font-size: 15px !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-category-tab-wrap{
        height: fit-content !important;
    }
    .xnmain-widget-board .xn-widget-container .xnbw-category-tab, .xnmain-widget-board .xn-widget-container .xnbw-all-tab{
        font-size: 16px !important;
        padding:0 5px !important
    }
    .xnmain-widget-board .xn-widget-container .xnbw-post-list-title{
        font-size: 16px !important;
    }
    .xnmain-widget-lecture .xncw-top-container{
        margin-bottom:30px;
    }
    .xnmain-widget-lecture .xncw-top-container .xncw-title-wrap{
        margin-bottom:0;
    }
    .xnmain-widget-board .xnbw-title, 
    .xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title{
        font-size: 34px !important;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container{
        padding:20px 0;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-title{
        height: 50px !important;
        font-size: 20px !important;
    }
    .xnmain-widget-lecture .xnbw-items-container{
        padding:0;
    }
    .xnmain-widget-lecture .xnbw-item-container-wrap{
        display:flex !important;
        flex-wrap: wrap;
        gap:2%;
    }
    .xnmain-widget-lecture .xnbw-item-container{
        width: 49%;
    }
    .xnmain-widget-lecture .xnbw-item-container:nth-of-type(-n+2){
        margin-bottom:2%;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1), 
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
        top:-70px;
    }
    .xnmain-widget-lecture .xncw-top-container .xncw-more:after{
        margin-left:0;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1){
        right:16%;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-background{
        height: 27vw !important;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-status{
        width: 50px;
        margin:0;
    }
    .lc_left .xnbw-items-container > span:nth-child(3){
        left:14%;
    }
    .ft_add{
        flex-direction: column;
        text-align: center;
        font-size: 15px;
        word-break: keep-all;
    }
    .footer_logo{
        margin-right:0;
        margin-bottom:10px;
    }
    .ft_btn{
        gap:10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .ft_btn > a,
    .fs_btn{
        font-size: 15px;
    }
    .xnmain_footer .sns{
        position:relative;
        width:100%;
        justify-content: center;
        gap:20px;
    }
}
@media (max-width:420px) {
    .search_box_form > input, .search_box_form > input::placeholder{
        font-size: 14px;
    }
    .btn_search{
        font-size: 16px;
        padding:5px 10px;
    }
    .xnmain_cate .title{
        font-size: 24px;
        word-break: keep-all;
    }
    .cate_list a p{
        font-size: 20px;
    }
    .cate_list a i{
        width:60px;
        height:60px;
        background-size:contain !important;
    }
    .footer_logo{
        height:70px;
    }
    .xnmain-widget-board .xnbw-title, 
    .xnmain-widget-lecture .xncw-top-container .xncw-title-wrap .xncw-title{
        font-size: 30px !important;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1){
        right:20%;
    }
    .lc_left .xnbw-items-container > span:nth-child(3){
        left:18%;
    }
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(1), 
    .xnmain-widget-lecture .xnbw-items-container > span:nth-child(3){
        top: -60px;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-date, 
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-status{
        font-size: 13px;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-status-label, 
    .xnmain-widget-lecture .xncwi-container .xncwi-payment-label, 
    .xnmain-widget-lecture .xncwi-container .xncwi-status-label.closed,
    .xnmain-widget-lecture .xncwi-container .xncwi-certificate-wrap{
        font-size: 13px;
        padding:5px 8px;
    }
}
@media (max-width:360px) {
    .xnmain-widget-lecture .xnbw-item-container{
        width:100%;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-background{
        height:51vw !important;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-studydate-wrap .xncwi-date{
        float:inherit;
    }
    .xnmain-widget-lecture .xncwi-container .xncwi-info-container .xncwi-title{
        margin-bottom:10px;
    }
}

/* 서브페이지 */
  .sub-page {
    word-break: keep-all;
    font-family: 'KBO Dia Gothic', 'Pretendard', 'Noto Sans KR', sans-serif;
  }
  .sub-page p,
  .sub-page h1,
  .sub-page h2,
  .sub-page h3,
  .sub-page h4,
  .sub-page h5,
  .sub-page h6 {
    margin: 0;
    line-height: 1.3;
  }
  .sub-page-section {
    padding: 40px 20px;
  }
  .sub-page-section-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
  }
  .flex-column {
    flex-direction: column;
  }
  .sub-page-section-title {
    font-weight: 500;
    color: #141414;
  }
  .sub-page-section02 {
    background-color: #f5f5f5;
  }
  .sub-page-section04 {
    background-color: rgba(0, 38, 102, 0.1);
  }
  .bold {
    font-weight: 700;
  }
  .highlight {
    color: #576eae;
  }
  .card-wrapper {
    display: flex;
    gap: 24px;
  }
  .card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .pre-text {
    color: #6f82bb;
    font-weight: 500;
  }
  .card-title {
    font-weight: 700;
  }
  .card-description {
    color: #595959;
    font-weight: 300;
  }
  .align-items-center {
    align-items: center;
  }
  .sub-page-section02 .sub-page-section-title {
    width: 300px;
  }
  .white-cards-wrapper {
    display: flex;
    gap: 24px;
    flex: 1;
  }
  .white-card-container {
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 20px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .white-card-container:hover {
    transform: translateY(-5px);
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.15);
  }
  .white-card-container .text-wrap {
    display: flex;
    gap: 8px;
    flex-direction: column;
  }
  .sub-page-section01 .card-container {
    text-align: left;
  }
  .sub-page-section03 {
    gap: 24px;
  }
  .sub-page-section03 .card-wrapper {
    padding: 0 124px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .sub-page-section03 .card-container {
    width: calc((100% - (16px * 4)) / 5);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
    box-sizing: border-box;
  }
  .sub-page-section03 .card-description {
    color: #848791;
  }
  .sub-page-section03 .card03-01 .pre-text {
    color: #6f7eb4;
  }
  .sub-page-section03 .card03-02 .pre-text {
    color: #6771a1;
  }
  .sub-page-section03 .card03-03 .pre-text {
    color: #5e6590;
  }
  .sub-page-section03 .card03-04 .pre-text {
    color: #555981;
  }
  .sub-page-section03 .card03-05 .pre-text {
    color: #4d4f72;
  }
  .sub-page-section04 {
    background-image: url(https://open.induk.ac.kr/api/v1/files/69085192b142e264e50556f5/download?inline=true);
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  .width-60-percent {
    width: 60%;
  }
  .sub-page-section04 .card-wrapper {
    padding: 0 96px;
    gap: 32px;
  }
  .sub-page-section04 .sub-page-section-container {
    justify-content: space-between;
  }
  .sub-page-section04 .card-description {
    color: #616674;
  }
  .sub-page-section04 .card04-01 .pre-text {
    color: #7381bb;
  }
  .sub-page-section04 .card04-02 .pre-text {
    color: #485795;
  }
  .sub-page-section04 .card04-03 .pre-text {
    color: #1d3278;
  }

  /* 반응형 디자인 */
  @media (max-width: 1280px) {
    .sub-page-section-container {
      flex-direction: column;
    }
    .sub-page-section01 .sub-page-section-container{
        width: 100%;
    }
    .sub-page-section01 .card-wrapper.flex-column{
        flex-direction: row !important;
    }
    .sub-page-section03 .card-wrapper {
      padding: 0 60px;
    }
    
    .sub-page-section03 .card-container {
      width: calc((100% - (16px * 2)) / 3);
    }
    
    .sub-page-section04 .card-wrapper {
      padding: 0 60px;
    }
    .sub-page-section04{
        text-align: center;
    }
    .sub-page-section04 .width-60-percent{
        width: 100%;
    }
  }

  @media (max-width: 768px) {
    .sub-page-section {
      padding: 30px 15px;
    }
    
    .sub-page-section-container {
      flex-direction: column;
      gap: 30px;
      padding: 0 20px;
    }
    
    .sub-page-section01 .sub-page-section-container {
      flex-direction: column;
    }
    
    .sub-page-section01 img {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }
    .sub-page-section01 .card-container{
        text-align: center;
    }
    
    .sub-page-section01 .sub-page-section-container.flex-column {
      width: 100%;
    }
    
    .sub-page-section01 .sub-page-section-title {
      font-size: 24px;
      text-align: center;
    }
    
    .sub-page-section02 .sub-page-section-container {
      flex-direction: column;
    }
    
    .sub-page-section02 .sub-page-section-title {
      width: 100%;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .white-cards-wrapper {
      flex-direction: column;
      gap: 20px;
    }
    
    .white-card-container {
      width: 100%;
    }
    
    .card-wrapper {
      flex-direction: column;
      gap: 20px;
    }
    
    .sub-page-section03 .card-wrapper {
      padding: 0;
      gap: 20px;
      flex-wrap: wrap;
      flex-direction: row;
    }
    
    .sub-page-section03 .card-container {
      width: calc((100% - 20px) / 2);
    }
    
    .sub-page-section04 .sub-page-section-container {
      flex-direction: column;
    }
    
    .sub-page-section04 .sub-page-section-title {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .width-60-percent {
      width: 100%;
    }
    
    .sub-page-section04 .card-wrapper {
      padding: 0;
      flex-direction: column;
      gap: 20px;
    }
    
    .sub-page-section04 .card-container {
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .sub-page-section {
      padding: 25px 10px;
    }
    
    .sub-page-section-container {
      padding: 0 15px;
    }
    
    .sub-page-section-title {
      font-size: 20px;
    }
    
    .sub-page-section01 .sub-page-section-title {
      font-size: 18px;
    }
    
    .white-card-container {
      padding: 20px;
    }
    
    .sub-page-section03 .card-container {
      width: 100%;
    }
    
    .card-title {
      font-size: 18px;
    }
    
    .card-description {
      font-size: 16px;
    }
    
    .pre-text {
      /* font-size: 12px; */
    }
    .sub-page-section01 .card-wrapper.flex-column{
        flex-direction: column !important;
    }
  }
  #ai-chat-icon{
    width: 64px !important;
    height: 64px !important;
  }