body{font-family: 'Pretendard';}
/* header */
.h2Position{position: absolute;left:-9999px;width:1px;height:1px;line-height: 0;font-size:1px;overflow:hidden;}
.background_class{background-repeat: no-repeat;background-size: auto 100%;background-position: center center;}
.clear0:after{content:"";display:block;clear:both;}

.GB{font-family: 'Gmarket_B';}
.GM{font-family: 'Gmarket_M';}
.GL{font-family: 'Gmarket_L';}

.NBGB{font-family: 'NanumBarunGothicBold';}
.NBGL{font-family: 'NanumBarunGothicLight';}
.NBGUL{font-family: 'NanumBarunGothicUltraLight';}
.NBGR{font-family: 'NanumBarunpenR';}

@media screen and (max-width: 767px){

    .banner{display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 999;}
    .banner.active{display: block;}
    .banner > a{width: 25px; height: 25px; position: absolute; top: 0; right:3%; z-index: 999;}
    .banner > img{width: 100%; height: 73px; object-fit: cover;}
    .banner .p_banner{display: none;}

    .q_menu{width: 100%; position: fixed; bottom: 0; left: 0; z-index: 99; text-align: center;}
    .q_menu ul{padding: 10px 5px; display: flex; justify-content: space-between; margin: 0 auto; background-color: #ffffff; border: 2px solid #E0E0E0;}
    .q_menu li{width: 25%;}
    .q_menu li:not(:last-child){padding: 0 5px; border-right: 1px solid #DDDDDD;}
    .q_menu li a{display: block; font-size: 12px; color: #666666; font-weight: 600;}
    .q_menu img{width: 50%; display: block; margin: 0 auto 10px;}
    .q_menu li:nth-of-type(4) img{width: 42%;}
    .q_menu > a{display: block; position: absolute; bottom: 100%; right: 5%;}
    .q_menu > a img{width: 45px;}

    header{width: 100%; background-color: #ffffff; position: fixed; top: 0; left: 0; z-index: 99;}
    header .header_wrap{width: 100%; padding: 20px 0;}
    header .header_wrap h1{width: 100%; max-width: 200px; margin: 0 auto;}
    header .header_wrap .left{display: none; background: url("/img/h_icon01.png")no-repeat left / 40px; padding-left: 50px; font-size: 20px; line-height: 25px;}
    header .header_wrap .left b{color: #073190; font-weight: 800; font-size: 25px;}
    header .header_wrap .right{display: none; border: 2px solid #E0E0E0; border-radius: 40px; padding: 10px 20px;}
    header .header_wrap .right a{display: block; font-size: 18px; text-decoration: none; color: #333333; font-weight: 700;}
    header .header_wrap .right a img{margin-right: 3px; vertical-align: middle;}
    header nav{display: none; width: 100%; border-top: 1px solid #DDDDDD; padding: 30px 0;}
    header nav ul{width: 67.70%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
    header nav ul li a{display: inline-block; font-size: 20px; color: #333333; font-weight: 600; }
    header nav ul li a:hover{color: #073190; font-weight: 800;}

   
    footer{background:url("/img/f_bg.png")no-repeat center / cover; padding: 100px 0 120px;}
    footer > div:nth-of-type(1), footer ul, footer > div:nth-of-type(2){width: 92%; margin: 0 auto;}
    footer > div:nth-of-type(1){width: 92%; display: flex; flex-wrap: wrap; margin-bottom: 50px;}
    footer .title_box{margin-bottom: 50px;}
    footer .title_box h2{color: #ffffff; margin-bottom: 20px;}
    footer .title_box p{font-size: 18px; line-height: 26px; color: #ffffff;}
    footer .title_box p img{width: 5%; margin-right: 5px; vertical-align: middle;}
    footer ul{width: 92%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 50px;}
    footer ul li{width: 100% !important; height: 280px; margin-bottom: 20px;}
    footer ul li .map{width: 100% !important;}
    footer ul li:not(:nth-of-type(1)){border-radius: 50px; background-color: rgba(34, 34, 34, 0.4); width: 100%; height: 160px; text-align: center; color: #ffffff; padding: 20px 20px;}
    footer ul li:nth-of-type(3) a{display: block;}
    footer ul li div{width: 100% !important; height: 280px; border-radius: 50px;}
    footer ul li img{width: 10%; display: block; margin: 0 auto 10px;}
    footer ul li strong{display: block; font-size: 18px; line-height: 26px; margin-bottom: 20px;}
    footer ul li p{font-size: 14px; line-height: 20px; font-weight: 600;}
    footer hr{display: block; opacity: 0.2; margin-bottom: 50px;}
    footer > div:nth-of-type(2){color: #DDDDDD; display: flex; justify-content: space-between; flex-wrap: wrap;}
    footer > div:nth-of-type(2) address{font-size: 12px; line-height: 18px; margin-bottom: 20px;}
    footer > div:nth-of-type(2) address p:last-of-type{margin-bottom: 30px;}
    footer > div:nth-of-type(2) > a{display: inline-block; height: 35px; font-size: 14px; line-height:25px; border: 1px solid #DDDDDD; padding: 5px 35px; border-radius: 100px;}
    footer > div:nth-of-type(2) > a:hover{background-color: #073190;}
}

@media screen and (min-width: 768px) and (max-width: 1279px){

    .banner{display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 999;}
    .banner.active{display: block;}
    .banner > a{position: absolute; top: 0; right:20%;}
    .banner > img{width: 100%; height: 100px; object-fit: cover;}
    .banner .m_banner{display: none;}

    .q_menu{position: fixed; top: 30%; right: 1%; z-index: 99; text-align: center;}
    .q_menu ul{padding: 20px 15px 30px; background-color: #ffffff; border: 2px solid #E0E0E0; border-radius: 100px;}
    .q_menu li{margin-bottom: 5px; padding-bottom: 5px;}
    .q_menu li:not(:last-child){border-bottom: 1px solid #DDDDDD;}
    .q_menu li a{display: block; font-size: 16px; color: #666666; font-weight: 600;}
    .q_menu img{display: block; margin: 0 auto 10px;}
    .q_menu > a{display: block; position: absolute; bottom: -10%; left: 50%; transform: translate(-50%, 0);}
    .q_menu > a img{width: 60px;}

    header{width: 100%; background-color: #ffffff; position: fixed; top: 0; left: 0; z-index: 99;}
    header .header_wrap{width: 72.91%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
    header .header_wrap .left{background: url("/img/h_icon01.png")no-repeat left / 40px; padding-left: 50px; font-size: 20px; line-height: 25px;}
    header .header_wrap .left b{color: #073190; font-weight: 800; font-size: 25px;}
    header .header_wrap .left a{display: block;}
    header .header_wrap .right{border: 2px solid #E0E0E0; border-radius: 40px; padding: 10px 20px;}
    header .header_wrap .right a{display: block; font-size: 18px; text-decoration: none; color: #333333; font-weight: 700;}
    header .header_wrap .right a img{margin-right: 3px; vertical-align: middle;}
    header nav{width: 100%; border-top: 1px solid #DDDDDD; padding: 20px 0;}
    header nav ul{width: 67.70%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
    header nav ul li a{display: inline-block; font-size: 20px; color: #333333; font-weight: 600; }
    header nav ul li a:hover{color: #073190; font-weight: 800;}



    footer{background:url("/img/f_bg.png")no-repeat center / cover; padding: 150px 0 80px;}
    footer > div:nth-of-type(1), footer ul, footer > div:nth-of-type(2){width: 95.91%; margin: 0 auto;}
    footer > div:nth-of-type(1){width: 55%; display: flex; flex-wrap: wrap; margin-bottom: 100px;}
    footer .title_box{margin-bottom: 70px;}
    footer .title_box h2{color: #ffffff; margin-bottom: 20px;}
    footer .title_box p{font-size: 25px; line-height: 35px; color: #ffffff;}
    footer .title_box p img{margin-right: 10px;}
    footer ul{display: flex; justify-content: space-between; margin-bottom: 100px;}
    footer ul li:not(:nth-of-type(1)){border-radius: 50px; background-color: rgba(34, 34, 34, 0.4); width: 100%; height: 340px; text-align: center; color: #ffffff; padding: 70px 20px;}
    footer ul li:not(:last-child){margin-right: 20px;}
    footer ul li:nth-of-type(3) a{display: block;}
    footer ul li div{border-radius: 50px;}
    footer ul li img{display: block; margin: 0 auto 20px;}
    footer ul li strong{display: block; font-size: 30px; line-height: 40px; margin-bottom: 20px;}
    footer ul li p{font-size: 25px; line-height: 32px; font-weight: 600;}
    footer hr{display: block; opacity: 0.2; margin-bottom: 100px;}
    footer > div:nth-of-type(2){color: #DDDDDD; display: flex; justify-content: space-between; }
    footer > div:nth-of-type(2) address{font-size: 15px; line-height: 22px;}
    footer > div:nth-of-type(2) address p:last-of-type{margin-bottom: 30px;}
    footer > div:nth-of-type(2) > a{display: inline-block; height: 45px; font-size: 18px; line-height: 26px; border: 1px solid #DDDDDD; padding: 10px 30px; border-radius: 100px;}
    footer > div:nth-of-type(2) > a:hover{background-color: #073190;}
}

@media screen and (min-width: 1280px){

    .banner{display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 999;}
    .banner.active{display: block;}
    .banner > a{position: absolute; top: 0; right:20%;}
    .banner > img{width: 100%; height: 100px; object-fit: cover;}
    .banner .m_banner{display: none;}

    .q_menu{position: fixed; top: 30%; right: 1%; z-index: 99; text-align: center;}
    .q_menu ul{padding: 20px 15px 30px; background-color: #ffffff; border: 2px solid #E0E0E0; border-radius: 100px;}
    .q_menu li{margin-bottom: 5px; padding-bottom: 5px;}
    .q_menu li:not(:last-child){border-bottom: 1px solid #DDDDDD;}
    .q_menu li a{display: block; font-size: 16px; color: #666666; font-weight: 600;}
    .q_menu img{display: block; margin: 0 auto 10px;}
    .q_menu > a{display: block; position: absolute; bottom: -10%; left: 50%; transform: translate(-50%, 0);}
    .q_menu > a img{width: 60px;}

    header{width: 100%; background-color: #ffffff; position: fixed; top: 0; left: 0; z-index: 99;}
    header .header_wrap{width: 72.91%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
    header .header_wrap .left{background: url("/img/h_icon01.png")no-repeat left / 40px; padding-left: 50px; font-size: 20px; line-height: 25px;}
    header .header_wrap .left a{display: block;}
    header .header_wrap .left b{color: #073190; font-weight: 800; font-size: 25px;}
    header .header_wrap .right{border: 2px solid #E0E0E0; border-radius: 40px; padding: 10px 20px;}
    header .header_wrap .right a{display: block; font-size: 18px; text-decoration: none; color: #333333; font-weight: 700;}
    header .header_wrap .right a img{margin-right: 3px; vertical-align: middle;}
    header nav{width: 100%; border-top: 1px solid #DDDDDD; padding: 20px 0;}
    header nav ul{width: 67.70%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
    header nav ul li a{display: inline-block; font-size: 20px; color: #333333; font-weight: 600; }
    header nav ul li a:hover{color: #073190; font-weight: 800;}

    footer{background:url("/img/f_bg.png")no-repeat center / cover; padding: 150px 0 80px;}
    footer .title_box, footer > div:nth-of-type(1), footer ul, footer > div:nth-of-type(2){width: 72.91%; margin: 0 auto;}
    footer > div:nth-of-type(1){display: flex; align-items: center; margin-bottom: 100px;}
    footer > div:nth-of-type(1) > img{width: 100%; max-width: 512px; height: 100%;}
    footer .title_box h2{color: #ffffff; margin-bottom: 20px;}
    footer .title_box p{font-size: 25px; line-height: 35px; color: #ffffff;}
    footer .title_box p img{margin-right: 10px;}
    footer ul{display: flex; justify-content: space-between; margin-bottom: 100px;}
    footer ul li:not(:nth-of-type(1)){border-radius: 50px; background-color: rgba(34, 34, 34, 0.4); width: 100%; height: 340px; text-align: center; color: #ffffff; padding: 70px 20px;}
    footer ul li:not(:last-child){margin-right: 20px;}
    footer ul li:nth-of-type(3) a{display: block;}
    footer ul li div{border-radius: 50px;}
    footer ul li img{display: block; margin: 0 auto 20px;}
    footer ul li strong{display: block; font-size: 30px; line-height: 40px; margin-bottom: 20px;}
    footer ul li p{font-size: 25px; line-height: 32px; font-weight: 600;}
    footer hr{display: block; opacity: 0.2; margin-bottom: 100px;}
    footer > div:nth-of-type(2){color: #DDDDDD; display: flex; justify-content: space-between; }
    footer > div:nth-of-type(2) address{font-size: 15px; line-height: 22px;}
    footer > div:nth-of-type(2) address p:last-of-type{margin-bottom: 30px;}
    footer > div:nth-of-type(2) > a{display: inline-block; height: 45px; font-size: 18px; line-height: 26px; border: 1px solid #DDDDDD; padding: 10px 30px; border-radius: 100px;}
    footer > div:nth-of-type(2) > a:hover{background-color: #073190;}

}