:root {
 --main-padding:4.98697916667%;
 --main-color:#0B5C32;
 --sub-color:#383c33;
 --txt-spece:0.27em;
 }

.inner { padding-left: calc((100% - 1300px)/2); padding-right: calc((100% - 1300px)/2); }
.tit { margin-bottom: 0.8em; line-height: 1.5; font-size: 5rem; font-weight: bold; letter-spacing: -0.06em; }
.sub-tit { display: inline-block; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.05em; text-transform: uppercase; margin-left: -0.16em; }
.txt { color: var(--sub-color); letter-spacing: -0.03em; line-height: 1.5; word-break: keep-all; }
.txt-spece { margin-right: var(--txt-spece); }
.bo-radius { border-radius: 1.8rem; overflow: hidden; }
.m_img { display: none; }


.more-btn { display: flex; align-items: center; font-size: 1.5rem; color: var(--main-color); }
.more-btn.one span { width: 67px; height: 67px; border-radius: 100%; background: var(--main-color); text-align: center; line-height: 67px; }
.more-btn span { margin-right: 0.367em; color: #fff; }

.go-top { position: fixed; bottom: 55px; right:var(--main-padding); display: flex; justify-content: center; align-items: center; width: 69px; height: 69px; border-radius: 100%; background: var(--main-color); cursor: pointer; z-index: 3; transition: .5s; visibility: hidden; opacity: 0; }
.go-top span { color: #fff; }
.go-top.on { visibility: visible; opacity: 1; }
.go-top.nofixed { bottom: 310px; }


header.header { position: fixed; top: 0; width: 100%; z-index: 99; transition: .3s; }
header.header .inner { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-top:64px; padding-right: var(--main-padding); padding-left: var(--main-padding); transition: .3s; }
header.header .logo { transition: .3s; }
header.header .logo img { width: auto; transition: .3s; }
header.header .gnb { display: flex; height: 64px; line-height: 64px; margin-left: 80px; }
header.header .gnb > li { position: relative; margin-right:2.889em; }
header.header .gnb > li > a { color: #fff; transition: .5s; }
header.header .gnb > li > .depth { visibility: hidden; position: absolute; left: 50%; padding: 20px 30px; border-radius: 20px; background: #fff; text-align: center; white-space: nowrap; transform: translate(-50%, 3rem); transition: .3s; opacity: 0; }
header.header .gnb > li:hover > .depth { visibility: visible; transform: translate(-50%, 0); opacity: 1; filter: drop-shadow(0em 0em 0.2em rgba(0,0,0,.2)); }
header.header .gnb > li:hover > a { font-weight: 600; text-decoration: underline; text-underline-position: under; }
header.header .gnb > li > .depth > li { line-height: 2; transition: .3s; }
header.header .gnb > li > .depth > li > a { color: var(--sub-color); font-size: 1.8rem; font-weight: 400; transition: .3s; }
header.header .gnb > li > .depth > li > a:hover { font-weight: 600; }
header.header .kakao-btn {margin-left: auto; }
header.header .kakao-btn a { color:#FFE900; font-weight: 600; }
header.header .kakao-btn .icon { margin-right: 0.3em; }

header.header.scroll { background: #fff; filter: drop-shadow(0em 0em 0.2em rgba(0,0,0,.2)); }
header.header.scroll .logo { position: absolute; left: var(--main-padding); top: 0; padding:1em; background: var(--main-color); }
header.header.scroll .logo img { width: 105px; }
header.header.scroll .inner { padding-top: 1.05em; padding-bottom: 1.05em; }
header.header.scroll .gnb { margin-left: calc(120px + 4em); }
header.header.scroll .gnb > li > a { color: inherit; }
header.header.scroll .gnb > li > .tit { color: inherit; }
header.header.scroll .gnb > li > .depth { box-shadow: 0px 0px 7px rgb(209 205 197 / 14%); }
header.header.scroll .kakao-btn a { color:#3b1d1d; font-weight: 600; }


/*menu btn*/
.ham-menu-btn { position: fixed; right: var(--main-padding); display: none; margin-left: auto; z-index: 100; transition: .3s; }
.ham-menu-btn .icon-wrapper { display: table-cell; text-align: center; vertical-align: middle; }
.ham-menu-btn .icon { position: relative; width: 2.5rem; height: 3rem; display: inline-block; cursor: pointer; transition: .3s; }
.ham-menu-btn .icon .bar { position: absolute; width: 100%; height: 2px; background-color: #fff; margin: 5px 0; transition: .3s; }
.ham-menu-btn .icon .bar.one { top:0; left:0; }
.ham-menu-btn .icon .bar.two { top: 10px; left: 0; }
.ham-menu-btn .icon .bar.three { top: 20px; left: 0; }
.ham-menu-btn .icon .bar.one.active { animation: one 1s forwards; }
.ham-menu-btn .icon .bar.one.notActive { animation: one-reverse 1s forwards; }
.ham-menu-btn .icon .bar.two.active { animation: two 1s forwards; }
.ham-menu-btn .icon .bar.two.notActive { animation: two-reverse 1s forwards; }
.ham-menu-btn .icon .bar.three.active { animation: three 1s forwards; }
.ham-menu-btn .icon .bar.three.notActive { animation: three-reverse 1s forwards; }
.ham-menu-btn .icon .bar.two { top: 8px; }
.ham-menu-btn .icon .bar.three { top: 16px; }
.ham-menu-btn.scroll .icon .bar { background-color: #2A2A2A; }

@keyframes one {
 0% { top:0; }
 30% { top:-5px }
 60% { top:10px }
 80% { transform: rotate(0) }
 100% { top:10px; transform: rotate(45deg); }
 }
 @keyframes one-reverse {
 0% { top:10px; transform: rotate(45deg); }
 30% { transform: rotate(0deg); }
 60% { top:10px }
 80% { top:-5px }
 100% { top:0px }
 }

 @keyframes two {
 0% { opacity:1; }
 80% { opacity:1; }
 100% { opacity:0; }
 }
 @keyframes two-reverse {
 0% { opacity:0; }
 70% { opacity:1; }
 100% { opacity:1; }
 }

 @keyframes three {
 0% { top: 16px; }
 30% { top:20px; }
 60% { top:10px; }
 80% { transform: rotate(0) }
 100% { top:10px; transform: rotate(-45deg); }
 }
 @keyframes three-reverse {
 0% { top:10px; transform: rotate(-45deg); }
 30% { transform: rotate(0) }
 60% { top:10px; }
 80% { top:20px; }
 100% { top:16px; }
 }

.ham_menu { position: fixed; right: 0; top: 0; z-index: 99; width:0; height:0; background:url(../img/ham-menu-bg.jpg)no-repeat center / cover; overflow: hidden; transition: .5s; }
.ham_menu.active { width: 100vw; height: 100vh; }
.ham_menu a { color: #fff; font-size: 1.6rem }
.ham_menu .gnb { width: 0; height: 0; overflow: hidden; }
.ham_menu .gnb > li { width: 100%; border-bottom: 1px solid #ccc; line-height: 50px; font-size: 18px; position: relative; }
.ham_menu .gnb > li:after { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 25px; background: #ccc; transform:rotate(0deg); transition-duration: 0.4s }
.ham_menu .gnb > li:before { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 25px; background: #ccc; transform:rotate(90deg); transition-duration: 0.4s }
.ham_menu .gnb > li.single:after, .ham_menu .gnb > li.single:before { display: none; }
.ham_menu .gnb > li:nth-child(2).active .gnb-depth { height: 65px; }
.ham_menu .gnb > li:nth-child(4).active .gnb-depth { height: 138px; }
.ham_menu .gnb > li > .gnb-depth { height: 0; overflow: hidden; padding:0 15px; background: #0000003b; transition-duration: 0.4s }
.ham_menu .gnb > li > a { display: inline-block; width: 100%; padding: 0 20px; font-size: 2rem; font-weight: 700; }
.ham_menu .gnb > li > .gnb-depth a { display: block; border-top: 1px solid #FEFBFB; color: #acb3a3; line-height: 36px }
.ham_menu .gnb > li > .gnb-depth { position: relative; }
.ham_menu .gnb > li > .gnb-depth:before { display: block; position: absolute; left: 0; top:0; width: 100%; border-top: 3px solid var(--main-color); content: ""; }
.ham_menu .gnb > li > .gnb-depth li { width: 95%; margin: 0 auto; }
.ham_menu .gnb > li > .gnb-depth li a { border-top: 0;}
.ham_menu .gnb > li > .gnb-depth li:hover a { color:#313131; text-decoration: underline; }

.ham_menu.active .gnb { width: 100vw; height: 100vh; margin-top: 5em; padding: var(--main-padding); }
.ham_menu .gnb > li.active:after { transform:rotate(180deg); transition-duration: 0.4s }
.ham_menu .gnb > li.active:before { transform:rotate(270deg); transition-duration: 0.4s }
.ham_menu .gnb > li.active .gnb-depth { width: 100%; height: 173px; padding: 15px; }


/*footer*/
footer.footer { background: #2A2A2A; color: #fff; }
footer.footer .inner { display: flex; align-items: center; padding:3.722em var(--main-padding); }
footer.footer .logo { margin-right: 2.444em; }
footer.footer .logo img { width: 112px; }
footer.footer .ft-info { display: flex; flex-wrap: wrap; }
footer.footer .ft-info li { font-size: 1.5rem; margin-bottom: 0.7em; margin-right: 2em; }
footer.footer .ft-info li a { color: #fff; }
footer.footer .ft-info li span { color: #787878; font-weight: 600; margin-right: 0.8em; }
footer.footer .ft-info li.address { width: 100%; }
footer.footer .ft-info li.copyright { width: 100%; margin-bottom: 0; margin-top: 1.3em; color: #787878; font-size: 1.3rem; }
footer.footer .ft-info li.copyright a { padding: 0 0.2em;    margin-left: 0.2em;    border: 1px solid;    border-radius: 8px;    color: #787878;    font-size: 1.2rem;}
footer.footer a.right { color: #fff; }
footer.footer .right { margin-left: auto; width: 270px; line-height: 2.5; border-bottom: 3px solid #fff; }
footer.footer .right img.icon { float: right; }



@media all and (max-width:1600px) {

 }

 @media all and (max-width:1300px) {
 body { font-size: 1.6rem; }
 .inner { padding-left: var(--main-padding); padding-right: var(--main-padding); }

 header.header .inner { padding-top: calc(var(--main-padding)/2); }

 footer.footer .logo { margin-bottom: var(--main-padding); }
 footer.footer .inner { flex-direction: column; align-items: flex-start; }
 footer.footer a.right { margin-left: inherit; margin-top: var(--main-padding); }

 }
 /*768*/
 @media all and (max-width:1024px) {

 .more-btn span { font-size: 2.5rem; }
 .more-btn.one span { width: 55px; height: 55px; line-height: 55px; }

 .go-top.nofixed { bottom: 250px; }

 header.header .gnb { display: none; }
 header.header .kakao-btn { margin-right: calc(var(--main-padding)*1.2);}
 header.header .kakao-btn a { font-weight: 500; }
 

 .ham-menu-btn { display:table; }
 }

 /*420*/
 @media all and (max-width:768px) {

 .sub-tit { font-size: 2rem; }
 .tit { font-size: 4rem; }
 .txt { font-size: 2.1rem; }
 .bo-radius { isolation: isolate; }
 .go_top { right: 4%; width: 44px; height: 44px; }
 .go_top img { width: 20px; }

 header.header .logo img { width: 100px; }
 header.header .kakao-btn { margin-right: calc(var(--main-padding)*2);}
 header.header.scroll .logo img { width: 63px; }
 
 /* .ham-menu-btn { top: calc(var(--main-padding)/1.5); } */

  footer.footer .ft-info li.copyright{line-height: 20px;}
  footer.footer .right img.icon{width: 26px;}

 }

 @media all and (max-width:480px) {
   header.header .logo img{width: 90px;}
   footer.footer .right{width: 190px}
 }