@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{display: block;}

body, section, header, footer, div, nav, ul, li, p, h1, h2, h3, h4, h5, h6, address, a, button{font-size: 14px; font-weight: normal; font-style: normal;
font-family: 'Noto Sans KR', sans-serif;}
@media screen and (min-width:1201px){

/* header */
#header{position: fixed; z-index: 999; top: 0; width: 100%; height: 80px;}
#header h1{position: absolute; left: 50px; line-height: 40px; top: 20px;}
#header .gnb{position: absolute; left: 50%; width: calc(100% - 360px); max-width: 1200px; transform: translateX(-50%); top: 0; z-index: 9;}
#header .gnb>ul{display: flex; width: 100%;}
#header .gnb>ul>li{width: 14.28%; text-align: center;}
#header .gnb>ul>li>a{display: block; text-align: center; font-size: 17px; line-height: 80px; color: #FFF;}
#header .gnb>ul>li>ul{display: none; padding-top: 10px; height: 260px;}
#header .gnb>ul>li>ul a{display: block; color: #FFF; font-size: 15px; line-height: 50px;}
#header .gnb .sub_menu>li>a:hover{color: #5DC591;}
#header .gnb .color{text-decoration: underline;}

.gnb_bg{position: absolute; width: 100%; height: 350px; left: 0; top: 80px; background-color: rgba(16, 43, 74, 0.8); display: none; z-index: 8; border-top: 1px solid rgba(255, 255, 255, 0.5)}

#header .drop_btn{position: absolute; right: 40px; top: 20px; width: 80px; display: flex; flex-direction: column; align-items: center;}
#header .drop_btn button{background: none; border: none; font-size: 16px; padding: 8px; color: #FFF; width: 65px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
#header .drop_btn button span{background-image: url(../img/header_arrow.png); width: 14px; height: 9px; display: block; margin-top: 2px;}
#header .drop_btn .drop_text{width: 65px; line-height: 28px; background-color: #FFF; border-radius: 5px; display: none;}
#header .drop_btn .drop_text a{color: #120F26; font-size: 16px; padding-left: 8px;}
#header .gnb_btn{display: none;}

#header .mob_gnb{display: none;}

#header.arrow{background-image: url(../img/header_arrow_up.png); width: 14px; height: 9px; display: block; margin-top: 2px;}
#header.change{background-color: rgba(16, 43, 74, 0.8);}



/* footer */
#footer{position: relative; background-color: #120F26; width: 100%; padding: 60px 0;}
#footer .footer_top{display: flex; width: 70%; justify-content: space-between; margin: 0 auto; align-items: center;}
#footer .footer_top img{width: 100%;}
#footer .footer_top .footer_list{display: flex; justify-content: center; border-bottom: 1px solid #FFF; padding-bottom: 12px;}
#footer .footer_top .footer_list ul{display: flex; padding-right: 32px;}
#footer .footer_top .footer_list li{padding: 8px;}
#footer .footer_top .footer_list li a{color: #FFF;}
#footer .footer_top .site{display: flex; flex-direction: column; justify-content: space-around; line-height: 30px;}
#footer .footer_top .footer_list .site{position: relative; width: 126px;}
#footer .footer_top .footer_list .site button{ border: 1px solid #FFF; background-color: #FFF; color: #120F26; display: flex; align-items: center; padding: 8px 6px; justify-content: space-between;
border-radius: 8px;}
#footer .footer_top .footer_list .site button span{background-image: url(../img/family.png); width: 16px; height: 9px; display: block; background-repeat: no-repeat; margin-left: 8px; margin-top: 3px;}
#footer .footer_top .footer_list .site .family_inner{position: absolute; display: none;background-color: #FFF; width: 126px; padding: 10px 0; left: 50%; transform: translate(-50%); top: 120%; border-radius: 6px; z-index: 7;}
#footer .footer_top .footer_list .site .family_inner a{color: #120F26; display: flex; flex-direction: column; text-align: center;}

#footer .footer_bottom{position: relative; width: 70%; display: flex; justify-content: space-between; margin: 0 auto; padding-top: 80px;}
#footer .footer_bottom address{color: #FFF;}
#footer .footer_bottom p{color: #FFF;}
#footer .footer_bottom .icon{position: relative; display: flex; z-index: 3;}
#footer .blog{background-image: url(../img/footer_icon_1.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block;}
#footer .youtube{background-image: url(../img/footer_icon_2.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block; margin-left: 10px;}
}















@media screen and (max-width:1200px) and (min-width:901px){
    /* header */
#header{position: fixed; z-index: 999; top: 0; width: 100%; height: 80px;}
#header h1{position: absolute; left: 50px; line-height: 40px; top: 20px;}
#header .gnb{display: none;}

#header .drop_btn{position: absolute; right: 80px; top: 20px; width: 80px; display: flex; flex-direction: column; align-items: center;}
#header .drop_btn button{background: none; border: none; font-size: 16px; padding: 8px; color: #FFF; width: 65px; display: flex; align-items: center; justify-content: space-between;}
#header .drop_btn button span{background-image: url(../img/header_arrow.png); width: 14px; height: 9px; display: block; margin-top: 2px;}
#header .drop_btn .drop_text{display: flex; flex-direction: column; align-items: flex-start; line-height: 28px; padding: 0 8px; display: none;}
#header .drop_btn .drop_text a{color: #FFF; font-size: 16px;}
#header .drop_btn .drop_text a:last-child{padding-bottom: 10px;}

header .gnb_btn{position: absolute; right: 30px; top: 25px; width: 40px; height: 30px; background: none; border: none; cursor: pointer;}
header .gnb_btn span{width: 37px; height: 2px; background-color: #FFF; position: absolute; display: block; top: 50%; transition-duration: 0.5s;}
header .gnb_btn span:first-child{margin-top: -10px;}
header .gnb_btn span:last-child{margin-top: 9px;}
#header .gnb_btn:hover span:nth-child(2){opacity: 0;}
#header .gnb_btn:hover span:first-child{transform: rotate(45deg); margin-top: 0;}
#header .gnb_btn:hover span:last-child{transform: rotate(135deg); margin-top: 0;}

#header .mob_gnb{position: absolute; height: 100vh; width: 45%; left: 0px; top: 0px; background-color: #102B4A; left: -550px;}
#header .mob_gnb>ul{margin-top: 80px; line-height: 80px;}
#header .mob_gnb>ul>li{width: 100%;}
#header .mob_gnb>ul>li>a{display: block; text-align: center; color: #FFF; font-size: 20px; font-weight: bold;}
#header .mob_gnb>ul>li>ul{display: none; padding: 20px 0; background-color: #FFF;}
#header .mob_gnb>ul>li>ul a{display: block; text-align: center; line-height: 60px; color: #241F20; font-weight: bold; font-size: 16px;}
#header .mob_gnb>ul>li>ul a:hover{color: #5DC591;}


#header.change{background-color: rgba(16, 43, 74, 0.8);}



/* footer */
#footer{position: relative; background-color: #120F26; width: 100%; padding: 70px 0 90px 0;}
#footer .footer_top{display: flex; width: 80%; justify-content: space-between; margin: 0 auto; align-items: center; transition-duration: 0.5s;}
#footer .footer_top img{width: 100%;}
#footer .footer_top .footer_list{display: flex; justify-content: center; border-bottom: 1px solid #FFF; padding-bottom: 12px;}
#footer .footer_top .footer_list ul{display: flex; padding-right: 32px;}
#footer .footer_top .footer_list li{padding: 8px;}
#footer .footer_top .footer_list li a{color: #FFF;}
#footer .footer_top .site{display: flex; flex-direction: column; justify-content: space-around; line-height: 30px;}
#footer .footer_top .footer_list .site{position: relative;}
#footer .footer_top .footer_list .site button{border: 1px solid #FFF; background-color: #FFF; color: #120F26; display: flex; align-items: center; padding: 8px 12px; justify-content: space-between;
border-radius: 8px;}
#footer .footer_top .footer_list .site button span{background-image: url(../img/family.png); width: 16px; height: 9px; display: block; background-repeat: no-repeat; margin-left: 8px; margin-top: 3px;}
#footer .footer_top .footer_list .site .family_inner{position: absolute; display: none; background-color: #FFF; margin-top: 8px; border-radius: 6px; width: 120px; padding: 10px 0; left: 50%; transform: translate(-50%); top: 100%; z-index: 7;}
#footer .footer_top .footer_list .site .family_inner a{color: #120F26; display: flex; flex-direction: column; text-align: center;}

#footer .footer_bottom{position: relative; width: 80%; display: flex; justify-content: space-between; margin: 0 auto; padding-top: 60px; transition-duration: 0.5s;}
#footer .footer_bottom address{color: #FFF;}
#footer .footer_bottom p{color: #FFF;}
#footer .footer_bottom .icon{display: flex; position: relative; z-index: 3;}
#footer .blog{background-image: url(../img/footer_icon_1.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block;}
#footer .youtube{background-image: url(../img/footer_icon_2.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block; margin-left: 10px;}
}













@media screen and (min-width:601px) and (max-width:900px) {
     /* header */
#header{position: fixed; z-index: 999; top: 0; width: 100%; height: 60px;}
#header h1{position: absolute; left: 50px; line-height: 40px; top: 15px;}
#header img{width: 70%;}
#header .gnb{display: none;}

#header .drop_btn{position: absolute; right: 80px; top: 10px; width: 80px; display: flex; flex-direction: column; align-items: center;}
#header .drop_btn button{background: none; border: none; font-size: 16px; padding: 8px; color: #FFF; width: 65px; display: flex; align-items: center; justify-content: space-between;}
#header .drop_btn button span{background-image: url(../img/header_arrow.png); width: 14px; height: 9px; display: block; margin-top: 2px;}
#header .drop_btn .drop_text{display: flex; flex-direction: column; align-items: flex-start; line-height: 28px; padding: 0 8px; display: none;}
#header .drop_btn .drop_text a{color: #FFF; font-size: 16px;}
#header .drop_btn .drop_text a:last-child{padding-bottom: 10px;}

header .gnb_btn{position: absolute; right: 30px; top: 15px; width: 30px; height: 30px; background: none; border: none; cursor: pointer;}
header .gnb_btn span{width: 37px; height: 2px; background-color: #FFF; position: absolute; display: block; top: 50%; transition-duration: 0.5s;}
header .gnb_btn span:first-child{margin-top: -10px;}
header .gnb_btn span:last-child{margin-top: 9px;}
#header .gnb_btn:hover span:nth-child(2){opacity: 0;}
#header .gnb_btn:hover span:first-child{transform: rotate(45deg); margin-top: 0;}
#header .gnb_btn:hover span:last-child{transform: rotate(135deg); margin-top: 0;}

#header .mob_gnb{position: absolute; width: 45%; height: 100vh; top: 0px; background-color: #102B4A; left: -550px;}
#header .mob_gnb>ul{margin-top: 80px; line-height: 80px;}
#header .mob_gnb>ul>li{width: 100%;}
#header .mob_gnb>ul>li>a{display: block; text-align: center; color: #FFF; font-size: 20px; font-weight: bold;}
#header .mob_gnb>ul>li>ul{display: none; padding: 20px 0; background-color: #FFF;}
#header .mob_gnb>ul>li>ul a{display: block; text-align: center; line-height: 60px; color: #241F20; font-weight: bold; font-size: 16px;}
#header .mob_gnb>ul>li>ul a:hover{color: #5DC591;}

#header.change{background-color: rgba(16, 43, 74, 0.8);}



/* footer */
#footer{position: relative; background-color: #120F26; width: 100%; padding: 50px 0 130px 0;}
#footer .footer_top{display: flex; flex-direction: column; width: 90%; justify-content: space-between; margin: 0 auto; align-items: center; transition-duration: 0.5s;}
#footer .footer_top img{width: 100%; margin-bottom: 50px;}
#footer .footer_top .footer_list{display: flex; justify-content: space-between; border-bottom: 1px solid #FFF; padding-bottom: 12px; width: 90%;}
#footer .footer_top .footer_list ul{display: flex; justify-content: space-between;}
#footer .footer_top .footer_list li{padding: 8px 15px;}
#footer .footer_top .footer_list li a{color: #FFF;}
#footer .footer_top .site{display: flex; flex-direction: column; justify-content: space-around; line-height: 30px;}
#footer .footer_top .footer_list .site{position: relative;}
#footer .footer_top .footer_list .site button{border: 1px solid #FFF; background-color: #FFF; color: #120F26; display: flex; align-items: center; padding: 8px 12px; justify-content: space-between;
border-radius: 8px;}
#footer .footer_top .footer_list .site button span{background-image: url(../img/family.png); width: 16px; height: 9px; display: block; background-repeat: no-repeat; margin-left: 8px; margin-top: 3px;}
#footer .footer_top .footer_list .site .family_inner{position: absolute; display: none; background-color: #FFF; width: 120px; padding: 10px 0; left: 50%; transform: translate(-50%); top: 120%; z-index: 7; border-radius: 6px;}
#footer .footer_top .footer_list .site .family_inner a{color: #120F26; display: flex; flex-direction: column; text-align: center;}

#footer .footer_bottom{position: relative; width: 80%; display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto; padding-top: 60px; transition-duration: 0.5s;}
#footer .footer_bottom address{color: #FFF;}
#footer .footer_bottom p{color: #FFF;}
#footer .footer_bottom .icon{display: flex; margin-top: 40px; position: relative; z-index: 3;}
#footer .blog{background-image: url(../img/footer_icon_1.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block;}
#footer .youtube{background-image: url(../img/footer_icon_2.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block; margin-left: 10px;}
}
















@media screen and (max-width:600px){
     /* header */
#header{position: fixed; z-index: 999; top: 0; width: 100%; height: 55px;  background-color: #120F26;}
#header h1{position: absolute; left: 20px; line-height: 30px; top: 15px;}
#header img{width: 60%;}
#header .gnb{display: none;}

#header .drop_btn{display: none;}

header .gnb_btn{position: absolute; right: 25px; top: 13px; width: 20px; height: 25px; background: none; border: none; cursor: pointer;}
header .gnb_btn span{width: 25px; height: 2px; background-color: #FFF; position: absolute; display: block; top: 50%; transition-duration: 0.5s;}
header .gnb_btn span:first-child{margin-top: -10px;}
header .gnb_btn span:last-child{margin-top: 9px;}
#header .gnb_btn:hover span:nth-child(2){opacity: 0;}
#header .gnb_btn:hover span:first-child{transform: rotate(45deg); margin-top: 0;}
#header .gnb_btn:hover span:last-child{transform: rotate(135deg); margin-top: 0;}

#header .mob_back{ background-color: #120F26;}
#header .mob_gnb{position: absolute; height: 100vh; width: 45%; top: 0px; background-color: #102B4A; left: -550px;}
#header .mob_gnb>ul{margin-top: 80px; line-height: 70px;}
#header .mob_gnb>ul>li{width: 100%;}
#header .mob_gnb>ul>li>a{display: block; text-align: center; color: #FFF; font-size: 18px; font-weight: bold;}
#header .mob_gnb>ul>li>ul{display: none; padding: 20px 0; background-color: #FFF;}
#header .mob_gnb>ul>li>ul a{display: block; text-align: center; line-height: 50px; color: #241F20; font-weight: bold; font-size: 16px;}
#header .mob_gnb>ul>li>ul a:hover{color: #5DC591;}

#header.change{background-color: rgba(16, 43, 74, 0.8);}



/* footer */
#footer{position: relative; background-color: #120F26; width: 100%; padding: 40px 0 80px 0; overflow: hidden;}
#footer .footer_top{display: flex; flex-direction: column; width: 80%; justify-content: space-between; margin: 0 auto; transition-duration: 0.5s;}
#footer .footer_top img{width: 120px; height: 44px; margin-bottom: 50px;}
#footer .footer_top .footer_list{display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 12px; width: 70%;}
#footer .footer_top .footer_list ul{display: flex; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid #FFF; justify-content: space-between;}
#footer .footer_top .footer_list li{padding: 8px 15px;}
#footer .footer_top .footer_list li a{color: #FFF;}
#footer .footer_top .site{display: flex; flex-direction: column; justify-content: space-around; line-height: 30px;}
#footer .footer_top .footer_list .site{position: relative; width: 240px;}
#footer .footer_top .footer_list .site button{border: 1px solid #FFF; background-color: #FFF; color: #120F26; display: flex; align-items: center; padding: 8px 12px; justify-content: space-between;
border-radius: 8px; width: 60%; margin-top: 20px;}
#footer .footer_top .footer_list .site button span{background-image: url(../img/family.png); width: 16px; height: 9px; display: block; background-repeat: no-repeat; margin-left: 8px; margin-top: 3px;}
#footer .footer_top .footer_list .site .family_inner{position: absolute;background-color: #FFF; align-items: center; border-radius: 6px; padding: 10px 0; left: 0%; top: 120%;
display: none; width: 144px;}
#footer .footer_top .footer_list .site .family_inner a{color: #120F26; display: flex; flex-direction: column; text-align: center;}

#footer .footer_bottom{position: relative; width: 80%; display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto; padding-top: 30px; transition-duration: 0.5s;}
#footer .footer_bottom address{color: #FFF;}
#footer .footer_bottom p{color: #FFF;}
#footer .footer_bottom .icon{display: flex; margin-top: 40px;}
#footer .blog{background-image: url(../img/footer_icon_1.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block;}
#footer .youtube{background-image: url(../img/footer_icon_2.png); width: 41px; height: 41px; background-repeat: no-repeat; display: block; margin-left: 10px;}
}