@charset "utf-8";

#sub{width: 100%;height: 100vh;position: relative;overflow: hidden;}
#sub .sub_bg_wrap{width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 1;overflow: hidden;}
#sub .sub_bg_wrap .bg_box{width: 100%;height: 100%;}
#sub .sub_bg_wrap .bg_box img{width: 100%;height: 100%; object-fit: cover;object-position: center right;}

#sub .landing_sect{width:100%;height: 100%;position: relative;z-index: 100;}
#sub .landing_sect .sect_inner{width: 100%;max-width: 1564px;height: 100%;margin: 0 auto;padding: 32px 32px 80px 32px ;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;box-sizing: border-box;}

#sub .landing_sect .cnt_wrap{display: flex;align-items: stretch;flex-wrap: nowrap;column-gap: 48px;width: 100%;height: 100%;max-height: 824px;}
#sub .landing_sect .cnt_wrap .cnt_box{}
#sub .landing_sect .cnt_wrap .cnt_box .box_inner{width: 100%;height: 100%;}

#sub .landing_sect .cnt_wrap .left_box{flex: 1 1 480px;max-width: 480px;padding: 140px 8px;aspect-ratio: 25 / 43;background-color: #fff;border-radius: 36px;box-shadow: 7px 10px 12px 0 rgba(0, 0, 0, 0.25);overflow: hidden;}
#sub .landing_sect .cnt_wrap .left_box.landing_01{background-color: #011641;}
#sub .landing_sect .cnt_wrap .left_box.landing_02{background-color: #E5EDF8;}

#sub .landing_sect .cnt_wrap .right_box{flex: 1 1 972px;max-width: 972px;}
#sub .landing_sect .cnt_wrap .left_box .box_inner{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 48px;}
#sub .landing_sect .cnt_wrap .left_box .tit_img_box{width: 50%;max-width: 240px;margin: 0 auto;}
#sub .landing_sect .cnt_wrap .left_box .tit_img_box img{width: 100%;}

#sub .landing_sect .cnt_wrap .left_box .icon_img_box{width: 100%;}
#sub .landing_sect .cnt_wrap .left_box .icon_img_box img{width: 100%;}

#sub .cnt_tab_wrap{width: 100%;height: 100%;}
#sub .cnt_tab_wrap .tab_list_box{width: 100%;}
#sub .cnt_tab_wrap .tab_list{display: flex;align-items: center;flex-wrap: nowrap;column-gap: 32px;}
#sub .cnt_tab_wrap .tab_item{flex: 1;}
#sub .cnt_tab_wrap .tab_item .tab_btns{display: inline-flex;align-items: center;justify-content: center;width: 100%;padding: 24px 0;background-color: #fff;border-radius: 24px;box-shadow: 7px 10px 12px 0 rgba(0, 0, 0, 0.25);overflow: hidden;transition: background-color .3s;}
#sub .cnt_tab_wrap .tab_item .tab_btns.active{background-color: #011641;}
#sub .cnt_tab_wrap .tab_item .tab_btns .btns_name{display: inline-block;font-size: 24px;font-weight: 500;line-height: 32px;color: #000;white-space: nowrap;}
#sub .cnt_tab_wrap .tab_item .tab_btns.active .btns_name{color: #fff;}

#sub .cnt_tab_wrap .tab_item .tab_link{display: inline-flex;align-items: center;justify-content: center;width: 100%;padding: 24px 0;background-color: #fff;border-radius: 24px;box-shadow: 7px 10px 12px 0 rgba(0, 0, 0, 0.25);overflow: hidden;transition: background-color .3s;}
#sub .cnt_tab_wrap .tab_item .tab_link .btns_name{display: inline-block;font-size: 24px;font-weight: 500;line-height: 32px;color: #000;white-space: nowrap;}

#sub .cnt_tab_wrap .tab_cnt_box{width: 100%;height: 100%;max-height: calc(100% - (80px + 32px));margin-top: 32px;padding: 24px 24px 0;background-color: #fff;border-radius: 36px;box-shadow: 7px 10px 12px 0 rgba(0, 0, 0, 0.25);}
#sub .cnt_tab_wrap .tab_cnt_box::-webkit-scrollbar{}

#sub .cnt_tab_wrap .tab_cnt{width: 100%;height: 100%;max-height: 100%;padding: 24px;overflow: hidden;overflow-y: auto;opacity: 0;display: none;transition: opacity .3s;}
#sub .cnt_tab_wrap .tab_cnt.active{opacity: 1;}
#sub .cnt_tab_wrap .cnt_list{}
#sub .cnt_tab_wrap .cnt_item{}
#sub .cnt_tab_wrap .cnt_item + .cnt_item{margin-top: 48px;}
#sub .cnt_tab_wrap .cnt_item .item_hd{}
#sub .cnt_tab_wrap .cnt_item .cate_name_box{}
#sub .cnt_tab_wrap .cnt_item .cate_name{font-size: 24px;font-weight: 500;line-height: 32px;color: #000;}

#sub .cnt_tab_wrap .cnt_item .item_bd{margin-top: 20px;padding-left: 20px;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_list{display: flex;align-items: center;flex-wrap: wrap;column-gap: 20px;row-gap: 20px;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item{}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns{display: inline-flex;align-items: center;justify-content: center;column-gap: 8px;padding: 10px 24px;background-color: #fff;border: 1px solid #001F4D;border-radius: 48px;transition: background-color .3s;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.active{background-color: #011641;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns .icon_box{display: inline-block;width: 34px;height: 28px;background-size: 100%;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns .view_txt{font-size: 16px;font-weight: 700;line-height: 20px;color: #000;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.active .view_txt{color: #fff;}


#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns:hover{background-color: #001F4D;}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns:hover  .view_txt{color: #fff;}

#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.video_icon .icon_box{background-image:url('../img/common/video_normal.svg')}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.video_icon:hover .icon_box{background-image:url('../img/common/video_active.svg')}

#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.ebook_icon .icon_box{background-image:url('../img/common/ebook_normal.svg')}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.ebook_icon:hover .icon_box{background-image:url('../img/common/ebook_active.svg')}

#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.download_icon .icon_box{background-image:url('../img/common/down_normal.svg')}
#sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns.download_icon:hover .icon_box{background-image:url('../img/common/down_active.svg')}


@media (max-width: 1500px){
    #sub .landing_sect .cnt_wrap{column-gap: 32px;}   

    #sub .landing_sect .cnt_wrap .left_box{border-radius: 24px;}
    
    #sub .cnt_tab_wrap .tab_item .tab_btns{padding: 20px;border-radius: 20px;}
    #sub .cnt_tab_wrap .tab_cnt_box{max-height: calc(100% - (72px + 32px));padding: 16px 16px 0;border-radius: 24px;}
    #sub .cnt_tab_wrap .tab_cnt{padding: 8px 8px 24px;}
}

@media (max-width: 1240px){
    #sub .landing_sect .sect_inner{display: block;padding: 32px;}
    #sub .landing_sect .cnt_wrap{display: block;height: 100%;max-height: calc(100% - (60px));margin-top: 0;}
    #sub .landing_sect .cnt_wrap .left_box{max-width: 100%;padding: 16px;aspect-ratio: unset;}
    #sub .landing_sect .cnt_wrap .left_box .box_inner{flex-direction: row-reverse;}
    #sub .landing_sect .cnt_wrap .left_box .tit_img_box{width: 100%;max-width: 180px;margin: 0;}
    #sub .landing_sect .cnt_wrap .left_box .icon_img_box{width: auto;height: 120px;}
    #sub .landing_sect .cnt_wrap .left_box .icon_img_box img{width: auto;height: 100%;}

    #sub .landing_sect .cnt_wrap .right_box{max-width: 100%;height: calc(100% - (152px));margin-top: 24px;}
    #sub .cnt_tab_wrap .tab_list{column-gap: 24px;}
    #sub .cnt_tab_wrap .tab_item{flex: 1;}
    #sub .cnt_tab_wrap .tab_item .tab_btns{width: 100%;}
    #sub .cnt_tab_wrap .tab_cnt_box{margin-top: 24px;max-height: calc(100% - (72px + 24px));}
    #sub .cnt_tab_wrap .cnt_item .cnt_view_list{column-gap: 8px;row-gap: 8px;}
    #sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns{padding: 6px 12px;}
    #sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns .view_txt{font-size: 14px;letter-spacing: -1px;}
}

@media (max-width: 1080px){
    #sub .landing_sect .sect_inner{padding: 24px;}
    #sub .cnt_tab_wrap .tab_item .tab_btns{padding: 16px 8px;}
    #sub .cnt_tab_wrap .tab_item .tab_btns .btns_name{font-size: 20px;line-height: 28px;}
        
    #sub .cnt_tab_wrap .tab_item .tab_link{padding: 16px 8px;}
    #sub .cnt_tab_wrap .tab_item .tab_link .btns_name{font-size: 20px;line-height: 28px;}

    
    #sub .cnt_tab_wrap .tab_cnt_box{max-height: calc(100% - (60px + 24px));}
    #sub .cnt_tab_wrap .cnt_item .cate_name{font-size: 20px;line-height: 28px;}
    #sub .cnt_tab_wrap .cnt_item .item_bd{margin-top: 16px;padding-left: 0;}
    #sub .cnt_tab_wrap .cnt_item + .cnt_item{margin-top: 32px;}
}
@media (max-width: 768px){
    #sub .landing_sect .cnt_wrap .left_box .box_inner{column-gap: 32px;}
    #sub .landing_sect .cnt_wrap .left_box{border-radius: 16px;}
    #sub .cnt_tab_wrap .tab_item .tab_btns{border-radius: 16px;}
    #sub .cnt_tab_wrap .tab_item .tab_link{border-radius: 16px;}
    #sub .cnt_tab_wrap .tab_cnt_box{border-radius: 16px;}
}

@media (max-width: 600px){
    #sub .landing_sect .sect_inner{padding: 16px}
    #sub .landing_sect .cnt_wrap{max-height: calc(100% - (40px + 24px));margin-top:0;}

    #sub .landing_sect .cnt_wrap .left_box{padding: 8px;border-radius: 12px;}
    #sub .landing_sect .cnt_wrap .left_box .box_inner{column-gap: 16px;}
    #sub .landing_sect .cnt_wrap .left_box .icon_img_box{height: 80px;}
    #sub .landing_sect .cnt_wrap .left_box .tit_img_box{max-width: 120px;}

    #sub .landing_sect .cnt_wrap .right_box{height: calc(100% - (96px));margin-top: 16px;}
    #sub .cnt_tab_wrap .tab_list{column-gap: 8px;}
    #sub .cnt_tab_wrap .tab_item .tab_btns{padding: 12px 4px;border-radius: 12px;}
    #sub .cnt_tab_wrap .tab_item .tab_btns .btns_name{font-size: 14px;line-height: 20px;}
    
    #sub .cnt_tab_wrap .tab_item .tab_link{padding: 12px 4px;border-radius: 12px;}
    #sub .cnt_tab_wrap .tab_item .tab_link .btns_name{font-size: 14px;line-height: 20px;}

    #sub .cnt_tab_wrap .tab_cnt_box{max-height: calc(100% - (52px));margin-top: 16px;padding: 8px 8px 0;border-radius: 12px;}
    #sub .cnt_tab_wrap .tab_cnt{padding: 8px 8px 16px;}
    
    #sub .cnt_tab_wrap .cnt_item .cate_name{font-size: 16px;line-height: 20px;}
    #sub .cnt_tab_wrap .cnt_item .item_bd{margin-top: 8px;}
    #sub .cnt_tab_wrap .cnt_item + .cnt_item{margin-top: 24px;}
    #sub .cnt_tab_wrap .cnt_item .cnt_view_list{column-gap: 8px;row-gap: 8px;}

    #sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns{padding: 8px;}

    #sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns .icon_box{width: 24px;height: 18px;column-gap: 4px;}
    #sub .cnt_tab_wrap .cnt_item .cnt_view_item .cnt_view_btns .view_txt{font-size: 12px;line-height: 18px;}
}