@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

* {
    word-break: keep-all;
}

body {
    font-family: "Pretendard", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.555;
    color:#10141A;
}

.contents_width.bbs {
    width:960px;
    padding:80px 0;
    margin:0 auto;
}

#float_btn_wrap {
    position:fixed;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    top:50%;
    right:0;
    margin-top:-146.51px;
    z-index:9999;
}

#float_btn_wrap > div {
    width:70px;
    background:#0D3564;
    padding:30px 0;
    box-sizing:border-box;
}

#float_btn_wrap > div > a {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:space-between;
}

#float_btn_wrap > div > a > span {
    writing-mode: vertical-rl;
    font-size:16px;
    color:#fff;
    margin-bottom:30px;
}

#float_btn_wrap > a {
    display:flex;
    width:70px;
    height:70px;
    align-items:center;
    justify-content:center;
    background:#DDE1E5;
}

header {
    position:absolute;
    width:100%;
    height:80px;
    z-index:9999;
    background:#fff;
}

header.main, header.sub {
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    padding:0 70px;
}

header::after {
    content:'';
    position:absolute;
    left:0;
    top:80px;
    width:100%;
    height:1px;
    background:#DDE1E5;
}

.logo-item {
    display:flex;
    align-items:center;
    height:80px;
    margin:0;
}

#gnb {
    position:absolute;
    left:50%;
    display:flex;
    justify-content:center;
    width:860px;
    height:80px;
    margin-left:-430px;
}

#gnb .main_menu_wrap {
    display:flex;
    justify-content:flex-start;
}

#gnb .main_menu_wrap > li {
    width:100px;
    margin:0 50px;
}

#gnb .main_menu_wrap > li > a {
    display:flex;
    align-items:center;
    height:80px;
    font-size:18px;
    font-weight:700;
}

#gnb .main_menu_wrap > li:first-child {
    display:none;
}

.depth2 {
    display:none;
    width:100px;
    height:280px;
    margin-top:30px;
}

.depth2 > li {
    height:18px;
    margin-bottom:15px;
}

.depth2 > li > a {
    font-size:15px;
    font-weight:400;
    color:#575A62;
}

header.pc {
    display:flex;
}
header.mo {
    display:none;
}

.body {
    padding-top:80px;
}

.sub_title_area {
    position:relative;
    width:100%;
    height:320px;
}

.sub_title_area.intro {
    background:url('../images/sub_intro_title_bg.png')center no-repeat;
}

.sub_title_area.business {
    background:url('../images/sub_business_title_bg.png')center no-repeat;
}

.sub_title_area.service {
    background:url('../images/sub_service_title_bg.png')center no-repeat;
}

.sub_title_area.service2 {
    background:url('../images/sub_service_title_bg2.jpg')center no-repeat;
}

.sub_title_area.bbs {
    background:url('../images/sub_bbs_title_bg.png')center no-repeat;
}

.title_txt_area {
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content:center;
    width:960px;
    height:100%;
    margin:0 auto;
    color:#fff;
}

.title_txt_area > span {
    font-size:20px;
    font-weight:600;
}

.title_txt_area > h2 {
    font-size:40px;
    font-weight:600;
}

.page_nav_area {
    position:absolute;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    height:50px;
    background:#fff;
    padding-left: calc((100% - 960px)/2);
}

.page_nav_area > * {
    margin-right:20px;
}

.page_nav_area > .nav_trigger {
    position:relative;
    width:114px;
    height:100%;
    font-size:14px;
    color:#777D84;
    font-weight:500;
}

.page_nav_area > .nav_trigger > a {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
}

.page_nav_area > a:first-child {
    width:auto;
}

.nav_dropdown {
    position:absolute;
    top:50px;
    left:0;
    display:none;
    width:114px;
    z-index:99;
    margin-left:-15px;
}

.nav_dropdown a {
    font-size:14px;
    color:#999;
    font-weight:500;
}

.delivery .tab {
    width:960px;
    margin:0 auto;
}

.delivery .tab .tabnav {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:80px;
}

.delivery .tab .tabnav > li {
    margin:0 30px;
}

.delivery .tab .tabnav > li > a {
    font-size:22px;
    font-weight:700;
    color:#050505;
}

.delivery .tab .tabnav .active {
    color:#0059BE;
    text-decoration:underline;
}

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

.board .btn_insert > i {
    margin-right:10px;
}

.footer {
    background:#050505;
    padding:60px 70px;
}

.site_map {
    padding-bottom:40px;
    border-bottom:1px solid #2B2D31;
}

.site_map > ul {
    display:flex;
    align-items: flex-start;
    justify-content: flex-start;
    color:#fff;
}

.site_map > ul > li:first-child {
    display:none;
}

.site_map > ul > li {
    margin-right:160px;
}

.site_map > ul > li > a {
    color:#CCCCCC;
    font-size:16px;
}

.site_map > ul > li > ul > li > a {
    color:#575A62;
    font-size:14px;
}

.f_info_area {
    margin-top:40px;
    display:flex;
    align-items: center;
    justify-content:space-between;
}

.f_info {
   display:flex;
   justify-content:space-between;
   width:100%;
}

.f_info .left {
    display:flex;
}

.f_logo {
    margin-right:120px;
}

.copyright {
    font-size:14px;
    color:#ccc;
    margin-top:20px;
}

.f_info .c_info {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.f_info .c_info span {
    font-size:14px;
    color:#575A62;
    font-weight:500;
    margin-right:40px;
}

.f_info .c_info span > b {
    color:#ccc;
    font-weight:500;
    margin-right:5px;
}

.footer_menu {
    display:flex;
    margin-bottom:20px;
}

.footer_menu > li {
    margin-right:20px;
}

.footer_menu > li a {
    font-size:14px;
    color:#999;
}

.footer_menu > li:last-child a {
    color:#fff;
}

@media (min-width: 0px) and (max-width: 989px) {
    .noscroll {
        position: fixed;
        overflow: hidden;
        touch-action: none;
        width:100vw;
    }

    .contents_width.bbs {
        width:100%;
        padding:5vh 5vw;
        margin:0 auto;
        box-sizing:border-box;
    }
    
    .list_footer {
        display:flex;
        flex-direction: column;
        gap:10vw;
    }

    .board .btn_insert {
        background:#0059BE !important;
    }

    .pagination strong {
        color:#0059BE !important;
    }

    #check_box {
        display:none;
    }

    #check_box + label {
        position:relative;
        display:block;
        width:8vw;
        height:6vw;
        cursor:pointer;
        z-index:3;
    }

    #check_box + label > span {
        position:absolute;
        display:block;
        width:100%;
        height:2px;
        background:#050505;
        transition: all 300ms;
    }

    #check_box + label > span:nth-child(2) {
        top:50%;
        transform:translate(0, -50%);
    }

    #check_box + label > span:nth-child(3) {
        bottom:0;
    }

    #check_box:checked + label > span:nth-child(1) {
        top:50%;
        transform: rotate(45deg);
        background:#fff;
    }

    #check_box:checked + label > span:nth-child(2) {
        opacity: 0;
    }

    #check_box:checked + label > span:nth-child(3) {
        top:50%;
        transform: rotate(-45deg);
        background:#fff;
    }

    #gnb.side_menu {
        position:fixed !important;
        display:none;
        flex-direction: column;
        width:80vw !important;
        height:100% !important;
        background-color: #0059BE;
        left:20vw !important;
        transition:all 300ms;
        z-index:2;
        top:0;
        padding:10vh 10vw;
        box-sizing: border-box;
        margin-left:unset !important;
    }

    #gnb.active {
        left:-90vw;
        background-color:#0D3564;
    }

    #modal_bg {
        display:none;
        position:absolute;
        width:100vw;
        height:100vh;
        top:0;
        left:0;
        background:rgba(0, 0, 0, 0.7);
        z-index:1;
    }

    #float_btn_wrap {
        position:fixed;
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        top:auto;
        bottom:5vw;
        right:5vw;
        margin-top:-146.51px;
        z-index:9999;
    }

    #float_btn_wrap > div {
        display:none;
    }

    #float_btn_wrap > a {
        width:60px;
        height:60px;
        border-radius:99px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    }

    header.pc {
        display:none;
    }
    header.mo {
        display:flex;
        align-items:center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    header.main, header.sub {
        padding:0 5vw;
    }

    #gnb .main_menu_wrap {
        flex-direction: column;
    }

    #gnb .main_menu_wrap > li {
        width:100%;
        margin:15px 0 0;
    }

    #gnb .main_menu_wrap > li > a {
        height:auto;
        color:#fff;
        margin-bottom:10px;
    }

    .depth2 {
        display:block;
        width:100%;
        height:auto;
        margin-top:0;
    }

    .depth2 > li > a {
        color:#ccc;
    }

    .title_txt_area {
        padding:0 5vw;
    }

    .page_nav_area {
        padding-left:5vw;
        padding-right:5vw;
    }

    .page_nav_area > .nav_trigger {
        width:auto;
    }

    .page_nav_area > .nav_trigger a > img {
        display:none;
    }

    .delivery .tab {
        width:100%;
    }

    .delivery .tab .tabnav > li {
        text-align:center;
    }

    .delivery .tab .tabnav > li > a {
        font-size:18px;
    }

    .footer {
        background:#050505;
        padding:5vh 5vw;
    }

    .site_map > ul {
        justify-content: space-between;
    }

    .site_map > ul > li {
        margin-right:0;
    }

    .f_info {
        flex-wrap: wrap;
     }

    .f_info .c_info {
        flex-wrap: wrap;
        margin-top:3vh;
        gap:0.5vh;
    }

    .f_info .left {
        flex-wrap:wrap;
    }

    .copyright {
        margin-top:3vh;
    }

    .footer_menu {
        margin-top:3vh;  
    }
}

@media (hover: hover) { /* when supported */
    header:hover {
        height:360px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        animation-duration: 0.1s;
        animation-name: dropdown;
    }
    
    @keyframes dropdown {
        from {
            height: 80px;
        }
      
        to {
            height: 360px;
        }
    }

    .depth2 > li > a:hover {
        text-decoration: underline;
    }
    
    header:hover .depth2 {
        display:block;
        animation-duration: 0.1s;
        animation-name: dropdown_alpha;
    }

    @keyframes dropdown_alpha {
        from {
            opacity: 0;
        }
      
        to {
            opacity: 100%;
        }
    }

    .nav_trigger:hover .nav_dropdown {
        display:inherit;
        background:#fff;
        padding:10px 15px;
        border:1px solid #eee;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    }

    .nav_dropdown a:hover {
        text-decoration:underline;
    }
}