

/* main_color */
:root{
    --xnds-color0:#8D1A2C;
    --xnds-color1:#C20224;
    --xnds-color2:#F2F2F2;
    --xnds-color3:#484848;
}
/* base-font */
@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;
}
/* 공통 color*/
.xnds_inner{
    width:100%;
    padding:0 100px;
    margin:auto;
}
a:hover {
    text-decoration: none !important;
}

/* header */

#header.xnds{
    height:132px;
    font-family: 'Pretendard';
    background:transparent;
    border:0;
    transition: all .4s;
    position: fixed;
}
#header.xnds .navbar-static-top,
#header.xnds .navbar-static-top .container,
#header.xnds .navbar-static-top .container .navbar-header{
    height:92px;
}
#header.xnds .navbar-static-top .container .navbar-header > div:first-child{
    display:none;
}
#header.xnds .navbar-static-top .container{
    width:100%;
    max-width:inherit;
    padding:0 100px;
}
#header.xnds .xn-main-catalog-header-logo-wrap{
    margin-top:0;
}
#header.xnds .xn-main-catalog-header-logo-image{
    height:40px;
}
#header.xnds .navbar-static-top .container .xn-main-menu-wrap{
    display:flex;
    float: inherit;
    flex:1;
}
#header.xnds .navbar-static-top .container .xn-main-menu-wrap .desktop{
    flex:1;
}
#header.xnds .xn-header-menu-wrapper{
    text-align:center;
}
#header.xnds .xn-header-menu,
#header.xnds .xn-header-menu > li{
    height:92px;
}
#header.xnds .xn-header-menu > li{
    width:173px;
}
#header.xnds .xn-header-menu > li:hover{
    background:transparent;
}
#header.xnds .xn-header-menu > li > a{
    font-size: 20px;
    font-weight: 500;
    height:92px;
    line-height:92px;
    color:#fff;
}
#header.xnds .xn-sub-menu-outer-wrapper{
    display:none !important;
}
#header.xnds .xnds_header-menu-dep2{
    display:none;
    width:100%;
    background:var(--xnds-color0);
    padding:10px 0;
}
#header.xnds .xnds_header-menu-dep2 li{
    width:100%;
    height:auto;
    padding:0;
    float:inherit;
}
#header.xnds .xnds_header-menu-dep2 li a{
    width:100%;
    height:auto;
    line-height: inherit;
    font-size:16px;
    font-weight:400 !important;
    color:#fff;
    margin:0;
    padding:12px 0;
}
#header.xnds .xnds_header-menu-dep2 li a:hover{
    color:#FFE4B5;
}
#header.xnds .xnds_header-menu-dep2 li:hover{
    background:transparent !important;
}
#header.xnds .btn-login{
    display:none;
}
#header.xnds .tnb{
    width:100%;
    background:var(--xnds-color1);
}
#header.xnds .tnb > div{
    display:flex;
    justify-content: flex-end;
    align-items: center;
    height:40px;
}
#header.xnds .xn-change_language-title{
    display:none;
}
#header.xnds .xn-change_language-select_box{
    width:auto;
    height:40px;
    font-size:14px;
    gap:4px;
    color:#fff;
    border:0;
    padding:0 13px;
}
#header.xnds .xn-change_language-select_dropdown{
    border:1px solid var(--xnds-color1);
    background:#fff;
    z-index:10;
}
#header.xnds .xn-change_language-select_box > span{
    display: flex;
    align-items:center;
    gap:4px;
}
#header.xnds .xn-change_language-select_box > span::before{
    display: inline-block;
    content:'';
    width:16px;
    height:16px;
    background:url(xnds_lang_ico.svg) no-repeat center;
}
#header.xnds .xn-change_language-select_box>i{
    width:15px;
    height:15px;
    background:url(xnds_lang_arrow.svg) no-repeat center;
    transition: transform 0.2s ease;
}
.rotate{
    transform: rotate(180deg);
}
#header.xnds .xn-change_language-select_dropdown-item{
    height:47px;
    font-size: 16px;
    color:#222;
    text-align:center;
    padding:0;
}
#header.xnds .xn-change_language-select_dropdown-item:hover{
    color:var(--xnds-color1);
    background: rgba(255, 237, 237, 0.80);
}
#header.xnds .btn-dropdown-user-menu{
    border-radius:8px;
    margin:22px 0 0 0;
}
#header.on{
    background:#fff;
    border-bottom:1px solid #efefef;
}
#header.on .xn-header-menu > li > a{
    color:#222;
}
.qlink_wrap{
    position:relative;
}
.qlink_btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:40px;
    color:#fff;
    padding:0 10px;
    cursor: pointer;
}
.qlink_btn span{
    display: inline-block;
    width:16px;
    height:16px;
    background:url(xnds_quick_ico.svg) no-repeat center;
}
.qlink_btn i{
    display:inline-block;
    content:'';
    width:15px;
    height:15px;
    background:url(xnds_lang_arrow.svg) no-repeat center;
    transition: transform 0.2s ease;
}
.qlink_list{
    display: none;
    position:absolute;
    width:100%;
    top:100%;
    border:1px solid var(--xnds-color1);
    background:#fff;
    z-index: 30;
}
.qlink_list > a{
    height:47px;
    font-size: 16px;
    color:#222;
    display:flex;
    align-items:center;
    justify-content: center;
    text-align: center;
}
.qlink_list > a:lang(en){
    line-height: 100%;
}
.qlink_list > a:hover{
    color:var(--xnds-color1);
    background: rgba(255, 237, 237, 0.80);
}
.qlink_list.show{
    display: block;
}

/* visual */
#visual.xnds{
    position:absolute !important;
    width:100% !important;
    font-family: 'Pretendard';
    background:transparent !important;
    z-index:20;
}
#visual.xnds .visual-container{
    width:100% !important;
    padding:0 100px !important;
}
#visual.xnds .xn-main-login-container{
    width:400px !important;
    height:245px !important;
    margin-top:160px;
    background:#f2f2f2 !important;
    padding:32px 30px 30px 30px !important;
    box-shadow: 2px 2px 16px 0 rgba(80, 4, 4, 0.16);
}
#visual.xnds .xn-main-login-container-title-wrap{
    margin: 0 0 10px !important;
}
#visual.xnds .xn-main-login-container-title{
    display: block !important;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color:#000 !important;
}
#visual.xnds .xn-main-login-container .xn-sso-login-icon{
    width: 48px !important;
    height: 48px !important;
    margin: 15px auto 0 !important;
    background:url(xnds_login_ico.svg) no-repeat !important;
}
#visual.xnds .xn-main-login-container .xn-sso-login-btn{
    width:100% !important;
    height: 130px !important;;
    font-size: 26px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background:var(--xnds-color1) !important;
}
#visual.xnds .xn-main-login-container .xn-sso-login-btn:hover{
    background:var(--xnds-color0) !important;
}
#visual.xnds .xn-main-login-container .xn-main-login-container-title-wrap .xn-logout-btn .btn-logout{
    display:none !important;
}
#visual.xnds .xn-main-login-container .xn-main-link-wrap{
    border-radius:8px;
}
#visual.xnds .xn-main-login-container .xn-main-lms-link-wrap,
#visual.xnds .xn-main-login-container .xn-main-mypage-link-wrap{
    display: flex !important;
    align-items:center;
    font-size:18px !important;
}
#visual.xnds .xn-main-login-container .xn-main-lms-link-wrap{
    background-color:var(--xnds-color1) !important;
}
#visual.xnds .xn-main-login-container .xn-main-lms-link-wrap .xn-main-lms{
    width:28px !important;
    height:28px !important;
    background:url(xnds_lms_ico.svg) no-repeat !important;
}
#visual.xnds .xn-main-login-container .xn-main-mypage-link-wrap .xn-main-mypage{
    width:28px !important;
    height:28px !important;
    background:url(xnds_mypage_ico.svg) no-repeat !important;
}
#visual.xnds .xn-main-login-container .xn-main-mypage-link-wrap{
    background-color:var(--xnds-color3) !important;
}
#visual.xnds .xn-main-login-container .xn-main-mypage-link-wrap:lang(en) .goto{
    display:none;
}
#visual.xnds .xn-main-login-container .xn-main-mypage-link-wrap:lang(en) i:after{
    display:inline-block;
    content:'Go to';
    font-style: normal;
    margin-right:8px;
}

/* main slider */
.xnds_main_slider{
    position:relative;
    height:100%;
}

/* board widget */
.xnds_cnt{
    position:absolute;
    width:100%;
    font-family: 'pretendard';
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(1.5px);
    transform: translateY(-120%); /* 140% */
    z-index:30;
}
.xnds_cnt > div{
    display: flex;
    justify-content: center;
}
.xnds-widget-board{
    width:calc((100% - 480px) / 2);;
    margin:40px 40px 40px 0;
}
.xnds-widget-board .xn-widget-container{
    padding:0 !important;
    color:#fff;
}
.xnds-widget-board .xnbw-title-wrap{
    margin-bottom:30px;
}
.xnds-widget-board .xnbw-title{
    font-size:26px;
    font-weight:700;
    color:#fff !important;
}
.xnds-widget-board .xnbw-sub-title,
.xnds-widget-board .xnbw-category-tab-wrap{
    display:none;
}
.xnds-widget-board .xnbw-more-tab span{
    display:none;
}
.xnds-widget-board .xnbw-more-tab-plus-icon{
    width: 28px !important;
    height:28px !important;
    background:url(xnds_plus_ico.svg) no-repeat center !important;
}
.xnds-widget-board .xnbw-category-wrap{
    margin:0 !important;
}
.xnds-widget-board .xnbw-items-container{
    gap:0 !important;
}
.xnds-widget-board .xn-widget-container .xnbw-post-list-title{
    color:#fff !important;
}
.xnds-widget-board .xnbw-board-post-list:hover{
    background:transparent !important;
}
.xnds-widget-board .xnbw-post-list-category{
    height:inherit !important;
    font-size:18px !important;
    line-height: inherit !important;
    border:0 !important;
    color:#FFE4B5 !important;
    border-radius:0 !important;
    padding:0 !important;
}
.xnds-widget-board .xnbw-post-list-created{
    font-size:15px;
    color:#999 !important;
}

/* manual */
.xnds_manual{
    width:400px;
    background:#f2f2f2;
}
.manual_btn{
    display:flex;
    align-items: center;
    height:68px;
    background:var(--xnds-color1);
}
.manual_btn a{
    display:inline-block;
    width: calc((100% - 4px) / 2);
    font-size:18px;
    font-weight:500;
    text-align:center;
    color:#fff;
}
.manual_btn a:hover{
    color:#FFE4B5;
}
.manual_btn i{
    display:inline-block;
    width:4px;
    height:16px;
    background:url(xnds_manual_ico.svg) no-repeat;

}
.xnds_manual .info{
    padding:30px 40px;
}
.xnds_manual .info:lang(en){
    padding:30px 20px;
}
.xnds_manual .info > p{
    color:#222;
    font-size: 22px;
    font-weight:700;
}
.xnds_manual .info > a{
    display:inline-block;
    width:100%;
    font-size: 18px;
    font-weight: 700;
    text-align:center;
    border-radius: 8px;
    color:var(--xnds-color1);
    border: 1px solid var(--xnds-color1);
    background: #FFF;
    padding:15px 0;
    transform: all .4s;
}
.xnds_manual .info > a:hover{
    color:#fff;
    background:var(--xnds-color1);
}
.xnds_manual .time{
    display:flex;
    border-top:1px solid #d9d9d9;
    margin-top:24px;
    padding-top:24px;
}
.xnds_manual .time li{
    width:50%;
    font-size:16px;
    letter-spacing: -0.4px;
}
.xnds_manual .time li p{
    font-weight:700;
    color:#222;
    margin-bottom:5px;
}
.xnds_manual .time:lang(en) li:nth-child(1){
    width:70%;
}
.xnds_manual .time:lang(en) li:nth-child(2){
    width:30%;
}

/* footer */
.xnds_footer{
    position: absolute;
    bottom:0;
    width:100%;
    background:var(--xnds-color3);
    color:#fff;
    padding:20px 0;
    z-index:40;
}
.xnds_footer > div{
    display:flex;
    align-items:center;
}
.xnds_footer .footer_logo{
    margin-right:26px;
}
.ft_add{
    flex:1;
    opacity: 0.6;
    font-size:14px;
}
.ft_btn{
    font-size:15px;
}
.ft_btn a{
    display:inline-block;
    color:#fff;
    padding:0 15px;
}
.ft_btn a:hover{
    color:#FFE4B5;
}


/**============================  반응형 사이즈 1680 ~  =============================**/

@media (max-width:1680px) {
    .xnds_inner,
    .xnds_footer > div{
        padding:0 2%;
    }
    #header.xnds .navbar-static-top .container{
        padding:0 2%;
    }
    #visual.xnds .visual-container{
        padding:0 2% !important;
    }
}
@media (max-width:1280px) {
    #header.xnds .navbar-static-top .container{
        padding:0;
        
    }
    #header.xnds .navbar-static-top .container .navbar-header > div:first-child{
        display:inline-block;
    }
    #header.xnds .navbar-static-top .container .xn-main-menu-wrap{
        display:inline-block;
        float:right;
        flex:inherit;
    }
    #header.xnds .navbar-static-top .container .xn-main-menu-wrap .pull-right{
        min-width:120px;
    }
    #header.xnds .xn-header-member-btn-group{
        margin-right:2%;
    }
    #header.xnds .xn-main-catalog-header-logo-wrap{
        margin-top:10px;
    }
    #header.xnds .navbar-toggler-icon{
        width:35px;
        height:35px;
    }
    #header.xnds .navbar-light .navbar-toggler{
        padding:0;
        margin:20px;
    }
    #header.xnds .navbar-collapse.collapse.in.mobile{
        background:#f2f2f2;
        box-shadow: 0 13px 14.9px 0 rgba(0, 0, 0, 0.4);
    }
    #header.xnds .navbar-collapse.collapse.in.mobile ul,
    #header.xnds .navbar-collapse.collapse.in.mobile li{
        width:100%;
        text-align:center;
    }
    #header.xnds .navbar-collapse.collapse.in.mobile .xn-1depth-menu-wrap .xn-1depth-menu{
        display:block;
        padding:5px 0;
    }
    #header.xnds .navbar-collapse.collapse.in.mobile li > ul{
        background:#fff;
        border-radius:8px;
    }
    #header.xnds .btn-dropdown-user-menu{
        margin:0;
    }
    .xnds_footer{
        position:relative;
    }
}
@media (max-width:1150px) {
    #visual.xnds .xn-main-login-container{
        margin-top:6.96vw;
    }
}

/**============================  반응형 사이즈 1024 ~ =============================**/

@media (max-width:1024px) {
    .xnds_inner{
        padding: 0;
    }
    .xnds_main_slider{
        height:58.59vw;
    }
    .xnds_cnt{
        position:relative;
        background: rgba(0, 0, 0, 0.8);
        transform: inherit;
    }
    .xnds_cnt > div{
        flex-wrap: wrap;
    }
    .xnds_manual{
        width:100%;
    }
    .xnds_cnt > div > div:nth-child(1){
        padding:5% 2.5% 5% 5%;
    }
    .xnds_cnt > div > div:nth-child(2){
        padding:5% 5% 5% 2.5%;
    }
    .xnds-widget-board{
        width:50%;
        margin:0;
    }
    .xnds-widget-board .xnbw-title-wrap{
        margin-bottom:20px;
    }
}
@media (max-width:980px) {
    #header.xnds .xn-change_language-select_dropdown-item,
    .qlink_list > a{
        height:35px;
        font-size:15px;
    }
    
    .xnds_footer > div{
        flex-direction: column;
        text-align:center;
    }
    .xnds_footer .footer_logo{
        margin-right:0;
        margin-bottom:20px;
    }
    .ft_btn{
        margin-top:20px;
    }
}

/**============================  반응형 사이즈 768 ~ =============================**/

@media (max-width:768px) {
    #header.xnds{
        height:110px;
    }
    #header.xnds .navbar-static-top, 
    #header.xnds .navbar-static-top .container, #header.xnds .navbar-static-top .container .navbar-header{
        height:70px;
    }
    #header.xnds .xn-main-catalog-header-logo-wrap{
        margin-top:0;
    }
    #visual.xnds .visual-container .xn-main-login-container .xn-main-login-container-title-wrap{
        display:inline-block !important;
    }
    #visual.xnds .visual-container{
        height: inherit !important;
        padding:0 !important;
    }
    #visual.xnds .xn-main-login-container{
        width:100% !important;
        margin-top:58.46vw;
    }
    .xnds_cnt{
        padding-top:276px;
    }
    #visual.xnds{
        z-index:40;
    }
    #visual.xnds .xn-main-login-container .xn-sso-login-btn{
        width:100% !important;
    }
    #visual.xnds .xn-main-login-container .xn-main-login-container-title-wrap .xn-logout-btn{
        display:none !important;
    }
    .xnds-widget-board{
        width:100%;
        padding:5% !important;
    }
    .xnds-widget-board .xnbw-post-list-category{
        height:22px !important;
    }
    .xnds-widget-board .xnbw-post-list-category,
    .xnds-widget-board .xn-widget-container .xnbw-post-list-title{
        font-size:16px !important;
    }
    .xnds-widget-board .xn-widget-container .xnbw-more-tab{
        top:0 !important;
    }
    .ft_btn{
        font-size:14px;
    }
}
@media (max-width:360px) {
    #header.xnds .navbar-toggler-icon{
        width:25px;
        height:25px;
    }
    #header.xnds .xn-main-catalog-header-logo-image{
        height:26px;
    }
    #visual.xnds .xn-main-login-container{
        height:240px !important;
        padding:20px !important;
    }
    #visual.xnds .xn-main-login-container .xn-sso-login-icon{
        margin: 15px auto 5px !important;
    }
    #visual.xnds .xn-main-login-container .xn-sso-login-btn{
        height:130px !important;
        font-size:22px !important;
    }
    .xnds_manual .info{
        padding:20px;
    }
    .xnds-widget-board .xnbw-board-post-list{
        gap:0 !important;
    }
    .xnds_footer .footer_logo{
        height:28px;
    }
}