@charset "utf-8";

/*네이버 웹폰트(나눔스퀘어네오)연결*/
@import url(https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css);

/*아이콘 폰트(폰트어썸)연결*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css);

/*웹폰트 연결*/
@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TmonMonsori';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{  /*공통 사항*/
    font-family: 'NanumSquareNeo';
    box-sizing: border-box;
    margin: 0;
}

ul{  /*모든 리스트 공통 - 부호,여백 없애기*/
    list-style: none;  padding: 0;
}

a{  /*모든 링크 공통 - 밑줄 제거*/
    text-decoration: none;
}


/*내비게이션 영역--------------------------------------------*/
#navBox{  /*전체 박스*/
    width: 100%;  height: 70px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 3px 3px rgba(0,0,0,.2);
 
    position: fixed;  /*화면에 고정하기*/
    top: 0;  left: 0;  /*맨 상단 좌측*/
    display: flex;  align-items: center;
 
    z-index: 9;  /*레이어 순서 변경(기본:1)*/
 }
 
 #navBox2{  /*내부 1200박스*/
    width: 100%;  max-width: 1200px;
    height: 50px;
    margin: auto;
    display: flex; 
 }

 
 #logoBox{  /*로고 박스*/
     width: 20%; 
     display: flex;  align-items: center;
 }
 
 #logoBox img{  /*로고 이미지 사이즈 조정*/
     height: 40px;
 }
 
 #nav{  /*내비게이션*/
     width: 80%;
 }

 #menu{  /*메뉴 박스*/
    display: flex;
    justify-content: end;
 }
 
 .main{ position: relative; }
 
 .main > a{  /*메뉴 링크*/
     padding: 0 .7em;
     display: block;  line-height: 50px;
     color: #111;  font-weight: bold;
     justify-content: end;
 } 
 

 .main > a:hover{
    background-color: #F2E8B5;
     color: #184100;
 }


 .sub{
    position: absolute;
    top: 100%;  right: 0;
    background: #fff;
    border: 1px solid #ddd;
    width: 180px;
    display: none;
}

 .sublist > a{
    display: block;
    line-height: 40px;
    padding: 0 0.5rem;
    color: #333;
    transition: 0.3s;
}

.sublist > a:hover{
    background: #ddd;
}


 #view{  /*모바일용 메뉴 보기 버튼*/
    width: 50px;  height: 50px;
    background: none;  border: none;
    font-size: 1.5em;
    cursor: pointer;
    margin-left: auto;  /*오른쪽 맞춤*/
    display: none;  /*데스크탑 화면에서는 숨김*/
}

.hamburger {    /*햄버거메뉴(펼침메뉴)*/
    width:50px; height:50px;  padding: 0;
    cursor:pointer; display:none; 
}

/*햄버거메뉴의 크기와 색상*/
.hamburger-box { scale: .7 }
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before,
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background: #000;
}


 


/*섹션 공통사항*/
section{
    width: 90%;  max-width: 1500px;
    margin: 80px auto;
    margin-bottom: 140px;
}

/*섹션별 메인 타이틀*/
section > h2{
    margin-bottom: 1rem;
    color: #222;
}
section > h2 > span{
    font-family: 'SBAggroB';
    font-weight: medium;
    color: #00CD3D;
}

#sec1Title{
    font-size: 2.8rem;
}
.green1{
    font-size: 3rem;
}

#secTitle{
    font-size: 2.3rem;
}
.green2{
    font-size: 2.5rem;
}

.sec3Title{
    font-size: 1.8rem;  margin: 1rem;
    color: #222;
}
.smallgreen{
    font-size: 1.8rem;
    color: #00CD3D;
}


/*more버튼*/
.more{
    font-family: 'SBAggroB';
    background: #F2E8B5;
    color: #184100;
    border-radius: 4px;
    border: none;
    font-size: 1.5rem;  padding: 0.5rem 1rem; 
    margin-top: 1rem;
    cursor: pointer;
    display: block;
    margin-left: auto;
}
.more:hover{
    box-shadow: 3px 3px 3px rgba(0,0,0,.3);
    transform: translateY(-10%);
}

.more2{
    font-family: 'SBAggroB';
    color: #F2E8B5;
    background: #184100;
    border-radius: 4px;
    border: none;
    font-size: 1.2rem;  padding: 0.5rem 1rem; 
    margin: 1rem;
    cursor: pointer;
    display: block;
    margin-left: auto;
    
}
.more2:hover{
    box-shadow: 3px 3px 3px rgba(0,0,0,.3);
    transform: translateY(-10%);
}




/*푸터 영역----------------------------*/
#footer{   
    width: 100%;
    background: #222;  color: #ddd;
    padding: 1rem;
    padding-bottom: 3rem;

    border-top: 3px solid #aec62c;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3);
}

#footerList{
    width: 100%;  max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem; 
}
.flogo{
    padding: 2rem 0;
    font-size: 2rem;
}
.flogo > h3 > a{
    color: #00CD3D;
}
#fLeft{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.fList > h3{
    margin-bottom: 1rem;  padding-bottom: 8px;
    border-bottom: 1px dotted #777;
}
.fList p{
    line-height: 1.5rem;  font-size: 0.9rem;
}
.fList a{  /*fList a 라고 해도 됨(= fList 안에 있는 모든 a태그*/
    color: #aec62c;
}
.fList a:hover{ color: #fff; }



#top{
    position: fixed;  right: 1rem;  bottom: -4rem;
    font-size: 4rem;  color: #aec62c;  cursor: pointer;
    transition: 0.3s;
}
#top:hover{ transform: scale(1.1);  color: #184100; }



/*반응형-------------------------------------------------------------------------------*/

/*내비게이션 반응형(1000이하의 화면에서만)*/
@media screen and ( max-width: 1000px ){ 
    /*1. 메뉴 버튼 보이기*/
    #view { display: block; }

    /*2. 메뉴 스타일 변경하기 - 오른쪽 세로 방향*/
    #menu{
        display: block;
        background: #fff;
        width: 200px;  height: 100vh;
        margin-left: auto;
        border-left: 1px solid #ccc;

        /*화면 오른쪽 밖에 배치*/
        transform: translateX(100%);
        transition: 0.3s;
    }

    /*메뉴 등장용 스타일*/
    .menuOn{
        transform: translateX(0) !important;
    }

    .sub{
        position: static;
        width: 100%;
    }

}



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

    section{
        margin: 60px auto;
    }

    #secTitle{
        font-size: 1.8rem;
    }
    .green2{
        font-size: 2rem;
    }

    .sec3Title{
        font-size: 1.5rem;
        text-align: center;
    }
    .smallgreen{
        font-size: 1.5rem;
    }



    #footerList{
        grid-template-columns: 1fr;
        grid-gap: 5rem; 
    }
    .flogo{
        text-align: center;
    }
    #fLeft{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}