/*topBtn start*/
#topBtn{display: none; z-index: 50;}

#headerNav{position: fixed; width:300px; height: 600px; background-color:rgba(225,225,225,.9); backdrop-filter: blur(10px);  z-index: 999; right: -320px; top: 120px; border-radius: 25px;}
#headerNav::after{content: ''; width: 1px; height: 100%; position: absolute; left: 130px; top: 0; background-color: #fff;}
#headerNav .gnb_nav{position:relative; top: 50px;}
#headerNav .gnb_nav>ul>li{ position: relative; width: 130px; left: 0;}
#headerNav .gnb_nav>ul>li>a{display: block; line-height:60px;  font-size: 16px; font-weight:500; color: #241e20; text-align: center;}
#headerNav .gnb_nav>ul>li>ul.nav_menu{display: none; position: absolute; top: 0; left: 130px; width: 150px; z-index: 999;}
#headerNav .gnb_nav>ul>li>ul.nav_menu a{display: block; text-align: center; line-height: 50px; color: #241e20; font-size: 15px;}

#headerNav .box{position: relative; top:70px; left: 36px; }
#headerNav .box>ul{padding-top:10px;}
#headerNav .box .first,#headerNav .box ul>li>a{position: relative; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #241e20; text-align: center; line-height: 50px; color: #241e20; font-size: 16px; font-weight: 500; transition-duration: .3s; cursor: pointer;}
#headerNav .box ul>li>div>ul{position:absolute; display:none; padding-left: 100px; top: 55px;}
#headerNav .box ul>li>div>ul>li{padding-left: 5px;}
#headerNav .box ul>li>div>ul>li>a{margin-top: 10px; width: 45px; height: 45px; line-height:45px; font-size: 14px;}
#headerNav .box a{transition-duration: .3s;}
#headerNav .box a:hover{background-color:#fff; color: #241e20; border: 1px solid #fff;}

/*line*/
#header .gnb>ul>li::after{content: ''; position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background-color:#D9952A; opacity: 0; transition-duration: .2s;}
#header .gnb>ul>li:hover::after{opacity: 1;}
#header .gnb>ul>li{position: relative;}

/*pc*/
@media screen and (min-width:1501px){
#header{position: fixed; height: 100px; top: 0; left: 0; width: 100%; z-index: 99; }
#header .header_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
#header.select{background-color:rgba(225,225,225,.9); backdrop-filter: blur(10px);}
#header.select .gnb>ul>li>a{color: #241e20;}
#header.select a{color: #241e20;}
#header.select h1 a{background-image: url(../img/logo_f.png);}
#header h1 a{position: absolute; width: 263px; height: 35px; left: 0; top:30px; background-image: url(../img/logo_wh.png); background-position: center; background-size: cover; background-repeat: no-repeat; text-indent: -9999px; transition-duration: .3s; opacity:0;}
#header .gnb{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-3%); opacity: 0;}
#header .gnb>ul{display: flex;}
#header .gnb>ul>li{width: 130px; position: relative;}
#header .gnb>ul>li>a{display: block; line-height: 100px; text-align: center; font-size: 18px; font-weight:500; color: #fff; transition-duration: .3s;}
.gnb_sub_wrap{position: fixed; height: 530px; background-color:rgba(225,225,225,.9); display:none; z-index: 90; top: 0; left: 0; width: 100%; backdrop-filter: blur(10px);}
.gnb_sub_wrap::after{content: ''; width: 100%; height: 1px; background-color: #eee; position: absolute; top: 100px; left: 0;}
.gnb_sub{position: absolute; left: 50%; transform: translateX(-50%); top: 0; display: flex; padding-top: 100px;}
.gnb_sub ul{width: 130px;}
.gnb_sub ul a{display: block; text-align: center; line-height:60px; color: #241e20; font-size: 16px; font-weight: 500;}
#header .box{position: absolute; top: 20px; right: 0; width: 140px; display: flex; justify-content: space-between; opacity: 0;}
#header .box .first,#header .box ul>li>a{position: relative; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #fff; text-align: center; line-height: 60px; color: #fff; font-size: 18px; font-weight: 500; transition-duration: .3s;}
#header.select .box .first,#header.select .box ul>li>a{border: 1px solid #241e20; color: #241e20;}
#header .box ul>li div{overflow: hidden; position: absolute; width: 100%;height: 160px; left: 0; top: 60px;}
#header .box ul>li>div>ul{position:absolute; display:none; flex-direction: column; align-items: center; top: 20px; right:3px;}
#header .box ul>li>div>ul>li>a{margin-top: 10px; width: 55px; height: 55px; line-height: 55px; font-size: 14px; background-color: rgba(225,225,225,.2);}
#header .box a{transition-duration: .3s;}
#header .box a:hover{background-color:#fff; color: #241e20; border: 1px solid #fff;}

#navBtn{position:absolute; right: 0px; top:25px; width: 50px; height: 50px; z-index: 999; display: none;}
#navBtn span{display: block; width: 30px; height: 2px; border-radius: 5px; background-color:#fff; position: absolute; right: 0; transition-duration: .3s;}
#navBtn span:first-child{top: 15px;}
#navBtn span:nth-child(2){width: 20px; top: 22px;}
#navBtn span:last-child{top: 29px;}
#navBtn.active span:first-child{top: 22px; transform: rotate(405deg);}/*45+180*/
#navBtn.active span:nth-child(2){opacity: 0;}
#navBtn.active span:last-child{top: 22px; transform: rotate(135deg);}


/*header end*/

/*footer start*/
#footer{position: relative; background-color: #F0F0F0;}
#footer::after{content: ''; width: 100%; height: 1px; background-color: #ccc; position: absolute; left: 0; top: 100px;}
#footer .footer_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
#footer .footer_wrap .f_top{height: 100px; position: relative; display: flex; justify-content: space-between; align-items: center;}
#footer .footer_wrap .f_top h1 a{position: absolute; width: 263px; height: 35px; left: 0; top: 35px;}
#footer .footer_wrap .f_top h1 a img{width: 100%;}
#footer .footer_wrap .f_top div select{width: 180px; height: 35px; color: #7e7e7e; padding-left: 15px; background: none; border: 1px solid #ccc;}
#footer .footer_wrap .f_mid{position: relative; padding-top: 35px; display: flex; justify-content: space-between; align-items: center;}
#footer .footer_wrap .f_mid ul{display: flex;}
#footer .footer_wrap .f_mid ul li a,.footer_wrap address{color: #7e7e7e; font-size: 16px; }
#footer .footer_wrap .f_mid ul:first-child li a{margin-left: 16px;}
#footer .footer_wrap .f_mid ul:first-child li:first-child a{margin-left: 0; color: #049880; font-weight: 500; text-decoration: underline;}
#footer .footer_wrap .f_mid ul:last-child li a{margin-right: 18px; position: relative;}
#footer .footer_wrap .f_mid ul:last-child li:last-child a{margin-right: 0;}
#footer .footer_wrap .f_mid ul:last-child li a::before{content: ''; width: 1px; height: 16px; background-color: #ccc; position: absolute; left: -10px; top: 5px;}
#footer .footer_wrap address{position: relative; margin-top: 60px; padding-bottom: 70px;}
/*footer end*/

/*topBtn start*/
#topBtn{position: fixed; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; background-color: #241e20; bottom: 35px; right: 75px; cursor: pointer;}
#topBtn img{position: absolute; top: 13px; left:11px;}

h2{font-weight: 700; font-size: 2.5em;}
}









/*tablet 큰 가로*/
@media screen and (min-width:1081px) and (max-width:1500px){
#header{position: fixed; height: 100px; top: 0; left: 0; width: 100%; z-index: 99;}
#header .header_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
#header.select{background-color:rgba(225,225,225,.9); backdrop-filter: blur(10px);}
#header.select .gnb>ul>li>a{color: #241e20;}
#header.select a{color: #241e20;}
#header.select h1 a{background-image: url(../img/logo_f.png);}
#header h1 a{position: absolute; width: 263px; height: 35px; left: 0; top:30px; background-image: url(../img/logo_wh.png); background-position: center; background-size: cover; background-repeat: no-repeat; text-indent: -9999px; transition-duration: .3s;}
#header .gnb{display: none;}
.gnb_sub_wrap{display: none;}
#header .box{display: none;}

#navBtn{position:absolute; right: 0px; top:25px; width: 50px; height: 50px; z-index: 999; display: block;}
#navBtn span{display: block; width: 30px; height: 2px; border-radius: 5px; background-color:#fff; position: absolute; right: 0; transition-duration: .3s;}
#header.select #navBtn span{background-color:#241e20;}
#navBtn span:first-child{top: 15px;}
#navBtn span:nth-child(2){width: 20px; top: 22px;}
#navBtn span:last-child{top: 29px;}
#navBtn.active span:first-child{top: 22px; transform: rotate(405deg);}/*45+180*/
#navBtn.active span:nth-child(2){opacity: 0;}
#navBtn.active span:last-child{top: 22px; transform: rotate(135deg);}


/*header end*/

/*footer start*/
#footer{position: relative; background-color: #F0F0F0;}
#footer::after{content: ''; width: 100%; height: 1px; background-color: #ccc; position: absolute; left: 0; top: 100px; transition-duration: .3s;}
#footer .footer_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
#footer .footer_wrap .f_top{height: 100px; position: relative; display: flex; justify-content: space-between; align-items: center; transition-duration: .3s;}
#footer .footer_wrap .f_top h1 a{position: absolute; width: 263px; height: 35px; left: 0; top: 35px; transition-duration: .3s;}
#footer .footer_wrap .f_top h1 a img{width: 100%;}
#footer .footer_wrap .f_top div select{width: 180px; height: 35px; color: #7e7e7e; padding-left: 15px; background: none; border: 1px solid #ccc; transition-duration: .3s;}
#footer .footer_wrap .f_mid{position: relative; padding-top: 35px; display: flex; justify-content: space-between; align-items: center;}
#footer .footer_wrap .f_mid ul{display: flex;}
#footer .footer_wrap .f_mid ul li a,.footer_wrap address{color: #7e7e7e; font-size: 16px; transition-duration: .3s;}
#footer .footer_wrap .f_mid ul:first-child li a{margin-left: 16px;}
#footer .footer_wrap .f_mid ul:first-child li:first-child a{margin-left: 0; color: #049880; font-weight: 500; text-decoration: underline;}
#footer .footer_wrap .f_mid ul:last-child li a{margin-right: 18px; position: relative;}
#footer .footer_wrap .f_mid ul:last-child li:last-child a{margin-right: 0;}
#footer .footer_wrap .f_mid ul:last-child li a::before{content: ''; width: 1px; height: 16px; background-color: #ccc; position: absolute; left: -10px; top: 5px;}
#footer .footer_wrap address{position: relative; margin-top: 60px; padding-bottom: 70px;}
/*footer end*/

/*topBtn start*/
#topBtn{position: fixed; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 1px solid #fff; background-color: #241e20; bottom: 35px; right: 5%; cursor: pointer;}
#topBtn img{position: absolute; top: 13px; left:10px;}

h2{font-weight: 700; font-size: 2.2em; top: -20px;}
}











/*tablet 가로*/
@media screen and (min-width:641px) and (max-width:1080px){
    #header{position: fixed; height:80px; top: 0; left: 0; width: 100%; z-index: 99; }
    #header .header_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
    #header.select{background-color:rgba(225,225,225,.9); backdrop-filter: blur(10px);}
    #header.select .gnb>ul>li>a{color: #241e20;}
    #header.select a{color: #241e20;}
    #header.select h1 a{background-image: url(../img/logo_f.png);}
    #header h1 a{position: absolute; width: 205px; height: 27px; left: 0; top:25px; background-image: url(../img/logo_wh.png); background-position: center; background-size: cover; background-repeat: no-repeat; text-indent: -9999px; transition-duration: .3s;}
    #header .gnb{display: none;}
    .gnb_sub_wrap{display: none;}
    #header .box{display: none;}
    
    #navBtn{position:absolute; right: 0px; top:15px; width: 50px; height: 50px; z-index: 999; display: block;}
    #navBtn span{display: block; width: 28px; height: 2px; border-radius: 5px; background-color:#fff; position: absolute; right: 0; transition-duration: .3s;}
    #header.select #navBtn span{background-color:#241e20;}
    #navBtn span:first-child{top: 15px;}
    #navBtn span:nth-child(2){width: 18px; top: 22px;}
    #navBtn span:last-child{top: 29px;}
    #navBtn.active span:first-child{top: 22px; transform: rotate(405deg);}/*45+180*/
    #navBtn.active span:nth-child(2){opacity: 0;}
    #navBtn.active span:last-child{top: 22px; transform: rotate(135deg);}
    
    
    /*header end*/
    
    /*footer start*/
    #footer{position: relative; background-color: #F0F0F0;}
    #footer::after{content: ''; width: 100%; height: 1px; background-color: #ccc; position: absolute; left: 0; top: 80px; transition-duration: .3s;}
    #footer .footer_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
    #footer .footer_wrap .f_top{height: 80px; position: relative; display: flex; justify-content: space-between; align-items: center; transition-duration: .3s;}
    #footer .footer_wrap .f_top h1 a{position: absolute; width: 205px; height: 27px; left: 0; top: 27px; transition-duration: .3s;}
    #footer .footer_wrap .f_top h1 a img{width: 100%;}
    #footer .footer_wrap .f_top div select{width: 158px; height: 35px; color: #7e7e7e; padding-left: 15px; background: none; border: 1px solid #ccc; transition-duration: .3s;}
    #footer .footer_wrap .f_mid{position: relative; padding-top: 35px; display: flex; justify-content: space-between; align-items: center;}
    #footer .footer_wrap .f_mid ul{display: flex;}
    #footer .footer_wrap .f_mid ul li a,.footer_wrap address{color: #7e7e7e; transition-duration: .3s;}
    #footer .footer_wrap .f_mid ul:first-child li a{margin-left: 16px;}
    #footer .footer_wrap .f_mid ul:first-child{width: 50%; flex-wrap: wrap;}
    #footer .footer_wrap .f_mid ul:first-child li:first-child a{margin-left: 0; color: #049880; font-weight: 500; text-decoration: underline;}
    #footer .footer_wrap .f_mid ul:last-child li a{margin-right: 18px; position: relative;}
    #footer .footer_wrap .f_mid ul:last-child li:last-child a{margin-right: 0;}
    #footer .footer_wrap .f_mid ul:last-child li a::before{content: ''; width: 1px; height: 16px; background-color: #ccc; position: absolute; left: -10px; top: 5px;}
    #footer .footer_wrap address{position: relative; margin-top: 60px; padding-bottom: 70px;}
    /*footer end*/
    
    /*topBtn start*/
    #topBtn{position: fixed; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 1px solid #fff; background-color: #241e20; bottom: 35px; right: 5%; cursor: pointer;}
    #topBtn img{position: absolute; top: 13px; left:10px;}

    h2{font-weight: 700; font-size: 1.8em; top: -40px;}
    }













    /*mobile*/
@media screen and (max-width:640px){
    #header{position: fixed; height:80px; top: 0; left: 0; width: 100%; z-index: 99; }
    #header .header_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
    #header.select{background-color:rgba(225,225,225,.9); backdrop-filter: blur(10px);}
    #header.select .gnb>ul>li>a{color: #241e20;}
    #header.select a{color: #241e20;}
    #header.select h1 a{background-image: url(../img/logo_f.png);}
    #header h1 a{position: absolute; width: 205px; height: 27px; left: 0; top:25px; background-image: url(../img/logo_wh.png); background-position: center; background-size: cover; background-repeat: no-repeat; text-indent: -9999px; transition-duration: .3s;}
    #header .gnb{display: none;}
    .gnb_sub_wrap{display: none;}
    #header .box{display: none;}
    
    #navBtn{position:absolute; right: 0px; top:15px; width: 50px; height: 50px; z-index: 999; display: block;}
    #navBtn span{display: block; width: 28px; height: 2px; border-radius: 5px; background-color:#fff; position: absolute; right: 0; transition-duration: .3s;}
    #header.select #navBtn span{background-color:#241e20;}
    #navBtn span:first-child{top: 15px;}
    #navBtn span:nth-child(2){width: 18px; top: 22px;}
    #navBtn span:last-child{top: 29px;}
    #navBtn.active span:first-child{top: 22px; transform: rotate(405deg);}/*45+180*/
    #navBtn.active span:nth-child(2){opacity: 0;}
    #navBtn.active span:last-child{top: 22px; transform: rotate(135deg);}
    
    
    /*header end*/
    
    /*footer start*/
    #footer{position: relative; background-color: #F0F0F0;}
    #footer::after{content: ''; width: 100%; height: 1px; background-color: #ccc; position: absolute; left: 0; top:122px; transition-duration: .3s;}
    #footer .footer_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto;}
    #footer .footer_wrap .f_top{height: 122px; position: relative;  transition-duration: .3s;}
    #footer .footer_wrap .f_top h1 a{position: relative; width: 205px; height: 27px; left: 0;top: 30px; transition-duration: .3s;}
    #footer .footer_wrap .f_top h1 a img{width: 100%;}
    #footer .footer_wrap .f_top div select{width: 150px; height: 35px; color: #7e7e7e; padding-left: 10px; background: none; border: 1px solid #ccc; transition-duration: .3s; position: relative; top: 43px;}
    #footer .footer_wrap .f_mid{position: relative; padding-top: 20px; display: flex; justify-content: space-between; }
    #footer .footer_wrap .f_mid ul li a,.footer_wrap address{color: #7e7e7e; transition-duration: .3s;}
    #footer .footer_wrap .f_mid ul:first-child li:first-child a{color: #049880; font-weight: 500; text-decoration: underline;}
    #footer .footer_wrap .f_mid ul:last-child li a{margin-right: 0px; position: relative;}
    #footer .footer_wrap .f_mid ul:last-child li a::before{content: ''; width: 1px; height: 16px; background-color: #ccc; position: absolute; left: -10px; top: 5px;}
    #footer .footer_wrap address{position: relative; margin-top:15px; padding-bottom: 70px; transition-duration: .3s;}
    /*footer end*/
    
    /*topBtn start*/
    #topBtn{position: fixed; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 1px solid #fff; background-color: #241e20; bottom: 35px; right: 5%; cursor: pointer;}
    #topBtn img{position: absolute; top: 13px; left:10px;}

    h2{font-weight: 700; font-size: 1.6em; top: -40px;}
    }