@charset "UTF-8";

@media (max-width: 1480px){

    .bg{display: none; position: fixed; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,.3);}

}

@media (max-width: 1024px){

    body.of{overflow: hidden;}

}

/* header */
#header{padding: 0 20px 0 60px; position: absolute; top:20px; left:0; right:0; display: flex; align-items: center; z-index: 99;}
#header .logo{ margin-right: calc(100% - 1213px);}
#header .logo h1 a img,
#header .logo h1 a{display: block;}
#header nav .menuBox{display: flex; align-items: center; gap: 80px;}
#header nav .menuBox > li{position: relative;}
#header nav .menuBox li h2 a{padding: 20px 0; position: relative; display: block; font-size: 20px; font-weight: 600; line-height: 1; color: #fff; transition: all .5s; }
#header nav .menuBox li:hover h2 a{color: #003277; font-weight: 800;}
#header nav .menuBox li:hover h2 a::after{width: 100%;}
#header nav .menuBox > li:hover .depth02{display: block;}
#header nav .menuBox li .depth02{padding: 20px; display: none; width: 250px; position: absolute; top:60px; left:0; background-color: #fff; border-radius: 20px; box-shadow: 10px 10px 10px rgba(0,0,0,.5);}
#header nav .menuBox li .depth02 li a{display: block; padding: 20px; font-weight: 500; font-size: 20px; transition: all .5s;}
#header nav .menuBox li .depth02 li a:hover{background: #003277; color: #fff;}
#header .mobileBtn,
#header #mobileMenuWrap{display: none;}

@media (max-width: 1480px){

    #header{padding: 0 20px;}
    #header nav{display: none;}
    #header .logo h1 a img{width: 110px;}
    #header .mobileBtn{display: flex; position: absolute; top:1px; right:20px; width: 30px; height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 5px;}
    #header .mobileBtn span{display: block; width: 100%; height: 3px; background-color: #fff; border-radius: 30px;}
    #header #mobileMenuWrap{width: 300px; padding: 0 0 60px; display: block; position: fixed; top:0; right:-3000px; bottom: 0; background-color: #000; z-index: 999; overflow-y: auto;}
    #header #mobileMenuWrap nav{display: block; }
    #header #mobileMenuWrap .mobileMenu{padding: 60px 0 0 0;}
    #header #mobileMenuWrap .mobileMenu > li.active .depth02{display: block;}
    #header #mobileMenuWrap .mobileMenu > li > a{position: relative; padding: 20px 10px 20px 35px; display: block; font-size: 20px; color: #fff; font-weight: 500;}
    #header #mobileMenuWrap .mobileMenu > li > a.depth2::after{content: ''; width: 1px; height: 9px;  position: absolute; top: 28px; transform: rotate(-36deg); right: 28px; background-color: #fff;}
    #header #mobileMenuWrap .mobileMenu > li > a.depth2::before{content: ''; width: 1px; height: 9px; position: absolute; top: 28px; transform: rotate(35deg); right: 23px; background-color: #fff;}
    #header #mobileMenuWrap .mobileMenu > li.active > a.depth2::after{content: ''; width: 1px; height: 9px;  position: absolute; top: 28px; transform: rotate(44deg); right: 29px; background-color: #fff;}
    #header #mobileMenuWrap .mobileMenu > li.active > a.depth2::before{content: ''; width: 1px; height: 9px; position: absolute; top: 28px; transform: rotate(-40deg); right: 23px; background-color: #fff;}   
    #header #mobileMenuWrap .closeBtn{position: absolute; top: 20px; right: 20px; width: 30px; height: 30px;}
    #header #mobileMenuWrap .closeBtn::after{content: ''; position: absolute; top:13px; left:0; width: 100%; height: 3px; border-radius: 30px; transform: rotate(-135deg); background-color: #fff;}
    #header #mobileMenuWrap .closeBtn::before{content: ''; position: absolute; top:13px; right:0; width: 100%; height: 3px; border-radius: 30px; transform: rotate(135deg); background-color: #fff;}
    #header #mobileMenuWrap .depth02{display: none;}
    #header #mobileMenuWrap .depth02 li a{display: block; padding: 8px 10px 8px 45px; font-size: 14px; font-weight: 300; color: #fff;}
    
}

/* footer */
#footer{padding: 80px 0; background-color: #f5f7fa;}
#footer .footer{display: flex;}
#footer .logo{margin-right: 92px;}
#footer .logo a,
#footer .logo a img{display: block;}
#footer .content{margin-right: 142px;}
#footer .content span{margin-bottom: 19px; display: block; line-height: 1; color: #003277; font-weight: 800; font-size: 18px;}
#footer .content address{margin-bottom: 31px; font-weight: 300; color: #000; line-height: 1.5;}
#footer .content em{font-weight: 300; color: #000;}
#footer .snsBox{padding-top: 30px; display: flex; align-items: center; gap:10px;}
#footer .snsBox a,
#footer .snsBox a img{display: block; transition: all .3s;}
#footer .snsBox a:hover img{transform: translateY(-10px);} 

@media (max-width: 1200px){

    #footer .logo{margin: 0 0 30px;}
    #footer .footer{flex-direction: column; align-items: center;}
    #footer .content{margin: 0; text-align: center;}

}

@media (max-width: 1024px){

    #footer{padding: 50px 0;}
    #footer .logo a img{width: 120px;}
    #footer .content span{margin-bottom: 13px; font-size: 16px;}
    #footer .content address{margin-bottom: 20px; font-size: 13px;}
    #footer .content em{font-size: 15px;}
    #footer .snsBox{padding-top: 25px; gap: 5px;}
    #footer .snsBox a img{width: 45px;}

}

/* aside */
aside{display: flex; flex-direction: column; gap:10px; position: fixed; bottom: 40px; right:40px; z-index: 9;}
aside a img,
aside a{display: block;}


.ab_Wrap {max-width:1400px;margin:0 auto;}

@media (max-width: 1024px){

    aside{bottom: 20px; right: 20px; gap: 5px;}
    aside a img{width: 45px;}

}