/* header */

header{position: relative;width: 100%;background-color: #0e207f;}
.top-header{max-width: 1200px;margin: 0 auto;}
.top-header ul{display: flex;justify-content: flex-end;align-items: center;gap: 28px;padding: 8px 10px;}
.top-header ul li a{font-size: 14px;color: #fff;}

nav{position: relative;width: 100%;background-color: #fff;transition: height 0.3s ease-in-out;}
.navbar{position: relative;display: flex;justify-content: space-between;align-items: center;max-width: 1200px;height: 80px;margin: 0 auto;padding: 0 10px;transition: top 0.2s ease-in-out, background-color 0.2s ease-in-out, height 0.3s ease-in-out;top: 0;z-index: 9999;}
.navbar .logo{width: 350px;height: 41px;text-indent: 100%;white-space: nowrap;overflow: hidden;background:url('../images/logo.png') no-repeat;background-size: contain;}
.navbar .nav-menu{display: flex;gap: 16%;width: 50%;justify-content: flex-end;align-items: center;}
.navbar .nav-menu li{position: relative;}
.navbar .nav-menu .depth1{color: #333;font-weight: 500;font-size: 18px;display: inline-flex;align-items: center;height: 80px;white-space: nowrap;}

/* 헤더 스타일 변경 */
nav.gnb-open {background-color: #fff;transition: padding 0.3s ease-in-out;position: absolute;height: 300px;z-index: 999;}
nav.gnb-open::before{position:absolute;top:80px;left:calc(50% - 50vw);width:100%;height:1px;background-color:#ebebeb;content:"";}
nav.gnb-open::after{position:absolute;bottom: 0;left:calc(50% - 50vw);width:100%;height:1px;background-color:#ebebeb;content:"";}
nav.gnb-open .navbar{position: relative;z-index: 10000;height: auto;}
nav.gnb-open .navbar .nav-menu>li{display: flex;flex-direction:column;}
nav.gnb-open .navbar .nav-menu .depth1:hover{color: #1631c4;}
nav.gnb-open .navbar .nav-menu li .depth1::after{content: '';position: absolute;bottom: -3px;left: 0;width: 100%;height: 2px;background-color: #1631c4;transform-origin: 50% 0;transform: scaleX(0);transition: all 0.3s;}
nav.gnb-open .navbar .nav-menu li:hover .depth1::after{ transform: scaleX(1);}
nav.gnb-open .navbar a{cursor: pointer;}

nav.gnb-open .depth2{visibility:visible;opacity:1;}
nav.gnb-open .depth2:before{transform:rotateY(0);}

.depth2{visibility:hidden;position:relative;width:100%;height:calc(100% - 64px);transition:opacity 300ms ease-in-out;opacity:0;}
.nav-sub{display: none;position: absolute;top: 100%;left: 0;width: 110px;padding-top: 14px;}
.nav-sub li{margin: 8px 0;color: #444;font-size: 15px;}
.nav-sub>li>a:hover{color: #1631c4;}

.menu-open, .nav-top{display: none;}
nav.gnb-open ~ .main-wrap {margin-top: 80px;}
nav.gnb-open ~ .sub-wrap {margin-top: 80px;}


/* main_layout */
.main-wrap{position: relative;width: 100%;background-color: #f5f5f5;z-index: 1;}


/* sub_layout */
.sub-wrap{position: relative;width: 100%;background-color: #fff;z-index: 1;}
.sub-topTit{position: relative;width: 100%;height: 280px;background:center no-repeat;background-size:cover;}
.sub-topTit .sub-title{height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #fff;}
.sub-topTit .sub-title h2{font-weight: 600;font-size: 38px;color: #fff;}
.sub-topTit .sub-title p{font-size: 18px;}

.subImg00{background-image: url('../images/sub_Top00.jpg');}
.subImg01{background-image: url('../images/sub_Top01.jpg');}
.subImg02{background-image: url('../images/sub_Top02.jpg');}
.subImg03{background-image: url('../images/sub_Top03.jpg');}
.subImg04{background-image: url('../images/sub_Top04.jpg');}
.subImg05{background-image: url('../images/sub_Top05.jpg');}

.sub-dropdown{position: relative;width: 100%;border-bottom: solid 1px #ddd;padding: 10px 0;}
.dropdown-wrap{max-width: 1200px;margin: 0 auto;padding: 0 10px;display: flex;align-items: center;}
.dropmenu-home{margin: 0 10px;}
.dropmenu-home img{width: 24px;height: auto;}
.dropdown{position: relative;display: inline-block;width: 220px;}
.dropdown::before{content: '';position: absolute;top: 0;bottom: 0;left: 0;width: 1px;height: 14px;background: #ddd;margin: auto;}
.dropdown>button{width: 100%;text-align: left;display: flex;justify-content: space-between;align-items: center;padding-left: 20px;}
.dropdown>button::after{content: '';background: url(../images/ico_down.svg) no-repeat right;background-size: 16px auto;width: 16px;height: 16px;margin-right: 16px;}
.drop-menu{width: 100%;position: absolute;background-color: white;border: 1px solid #ddd;padding: 12px 10px;z-index: 1000;top: 35px;left: 2px;}
.drop-menu a{display: block;padding: 8px 10px;color: #555;font-weight: 400;}
.drop-menu a:hover{background-color: #f4f6fe;color: #1631c4;}

.subcon-wrap{max-width: 1200px;margin: 68px auto 80px;padding: 0 10px;}
.subcon-title h3{color: #121212;font-size: 32px;font-weight: 700;text-align: center;}
.subcon{width: 100%;margin-top: 50px;min-height: 400px;}


/* footer */
footer{position: relative;bottom: 0;width: 100%;color: #757575;font-weight: 500;}
footer>div{position: relative;width: 100%;}
.top-footer-wrap{background-color: #d9d9d9;}
.top-footer{max-width: 1200px;margin: 0 auto;}
.top-footer ul{display: flex;align-items: center;gap: 28px;padding: 20px 10px;}
.top-footer ul li a{font-size: 14px;}

.footer-info-wrap{background-color: #b5b5b5;}
.footer-info{max-width: 1200px;margin: 0 auto;padding: 30px 10px;font-size: 15px;}
.footer-info ul{display: flex;gap: 28px;margin-bottom: 16px;align-items: center;}
.footer-info ul li a{color:inherit;}


@media screen and (max-width:1200px) {
    /* 데스크탑 */
}

@media screen and (max-width:900px) {
    /* header */
    .navbar{padding: 0 2.5rem;}

    .subcon{min-height: 0px;}

    /* footer */
    .footer-wrap{padding: 3.75rem 2.5rem;}
}


/* mobile */
@media screen and (max-width:768px) {

    .top-header{width: 100%;}
    .top-header ul{gap: 4%;padding: 4px 10px 6px;}
    .top-header ul li a{font-size: 12px;}

    .navbar{height: 64px;padding: 0 0;width: 94vw;flex-wrap: wrap;}
    .navbar .logo{position:absolute;top:calc(50% - 15px);left:0;width: 50%;height: 50%;}
    .navbar .nav-menu{visibility:hidden;position:fixed;top:0;right:0;z-index:50;width:450px;height:100vh;overflow-y:auto;opacity:0;}
    
    .menu-open{display:block;position:absolute;top:calc(50% - 15px);right:0;width:30px;height:30px;background:url(../images/ico_menu_open.svg) no-repeat center;color:transparent;font-size:0;}
    .menu-close{display:block;position:absolute;top:calc(50% - 15px);right:0;width:30px;height:30px;background:url(../images/ico_menu_close.svg) no-repeat center;color:transparent;font-size:0;}
    
    nav.gnb-open{height: 100vh;visibility:visible;opacity:1;}
    nav.gnb-open::before{top:64px;}
    nav.gnb-open .nav-menu{visibility:visible;opacity:1;position: relative;left: 0;display: block;top:65px;}
    nav.gnb-open .navbar{height: 64px;}
    nav.gnb-open .navbar .nav-menu .depth1{position: relative;height: 100%;padding: 20px 0;}

    .nav-sub{position: relative;width: 100%;}
    .nav-sub li{margin: 8px 10px;}
    
    /* sub_layout */
    .sub-topTit{height: 200px;}
    .sub-topTit .sub-title h2{font-size: 32px;}
    .sub-topTit .sub-title p{font-size: 16px;}

    .dropmenu-home{margin: 0 10px 0 0;}
    .dropdown{width: 50%;}
    .dropdown>button{padding-left: 16px;font-size: 15px;}
    .dropdown>button::after{padding-left: 16px;}
    .drop-menu{padding: 12px 8px;top: 36px;left: 2px;}
    .drop-menu a{padding: 8px 8px;font-size: 15px;}

    .subcon-wrap{margin: 52px auto 60px;}
    .subcon-title h3{font-size: 28px;}
    .subcon{margin-top: 32px;}

    /* footer */
    .top-footer ul{gap: 10%;}
    .footer-info ul{flex-direction: column;gap: 4px;}
}

@media screen and (max-width:575.98px) {
    /* 스마트폰 세로 */
}