/*
:focus{position:relative;}
:focus::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
display:block;
width:99%;
height: 99%;
outline: 4px solid #333;
z-index: 99999;
}
*/
/*
이팝 개발 표준 CSS
*/

:root {
/* color */
--primary_80 : rgb(32 68 209); /* 메인 컬러 + rgba(0,0,0,0.8) */
--primary_50 : rgb(255 141 43); /* 메인 컬러 */
--primary_10 : #e3f7ff; /* 메인 컬러 + rgba(255,255,255,0.8) */

--natural_100 :#000;
--natural_80 :#161616;
--natural_70 :#1d1d1d;
--natural_60 :#646464;
--natural_50 :#8d8d8d;
--natural_40 :#dedede;
--natural_30 :#DEE2E6;
--natural_20 :#E9ECEF;
--natural_10 :#F2F4F6;
--natural_0 :#fff;

--img-border-radius :20px;
--img-border-cir :100%;


--space_lg   : 40px ;  /*40px*/
--space_md   : 32px ;  /*32px*/
--space_sm   : 16px ;    /*16px*/



--font_lg: 18px;  /*18px*/
--font_md: 16px;  /*16px*/
--font_sm: 13px;  /*13px*/
}


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


	--font_lg: 16px;  
	--font_md: 14px; 
	--font_sm: 13px;  


}
}

/* -------------------------------------------------------gudie */

/***********
main-font
************/

/***********
유튜브 삽입
************/
.yt_wrap { position: relative; padding-top: 56.25%;}
.yt_wrap iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; }


/***********
font
************/

/*headline*/

.headline{word-break:keep-all;}
.headline_lg { font-size: 50px; line-height: 1.2; }
.headline_md { font-size: 32px; line-height: 1.1666; }
.headline_sm { font-size: 126px; line-height: 1.35; }



.fs_lg { font-size: 18px; line-height:1.6;} /*18px*/
.fs_md { font-size: 16px; line-height:1.6;} /*16px*/
.fs_sm { font-size: 13px; line-height:1.6;} /*13px*/
[class*="fs_"] { color: var(--natural_80); }

.caption { font-size:var(--fs_sm); line-height: 1.45; margin-top: 8px; text-align: left; color: var(--natural_70); word-break:keep-all;} /*이미지 설명*/
.ment {display: block; text-align: center; font-size: 22px; font-weight: 700; line-height: 36px;} /*강조 문구*/

.txt-a-c { text-align: center; } /*가운데 정렬*/

b {font-weight: bold;} /*볼드*/

.godo{font-family: 'Godo';}

.sub_title{font-size:30px; font-weight:400; line-height:1.25; word-break:keep-all;}/* 서브페이지 소제목 */

hr{border:0; border-top:1px solid #666; margin-top:0;}

/***********
margin
************/

.m_lg  {   margin: var(--space_lg); }
.m_md  {   margin: var(--space_md); }
.m_sm  {   margin: var(--space_sm); }



.mt_lg {   margin-top: var(--space_lg); }
.mt_md {   margin-top: var(--space_md); }
.mt_sm {   margin-top: var(--space_sm); }



.mr_lg {   margin-right: var(--space_lg); }
.mr_md {   margin-right: var(--space_md); }
.mr_sm {   margin-right: var(--space_sm); }



.mb_lg {   margin-bottom: var(--space_lg); }
.mb_md {   margin-bottom: var(--space_md); }
.mb_sm {   margin-bottom: var(--space_sm); }



.ml_lg {   margin-left: var(--space_lg); }
.ml_md {   margin-left: var(--space_md); }
.ml_sm {   margin-left: var(--space_sm); }


/***********
공용
************/
.wrap { position:relative; width:100%; }
.inner_1280 { position:relative; width:100%;  max-width: 1280px; margin:0 auto; }
.inner_1000 { position:relative; width:100%; max-width: 1000px; margin:0 auto;}
.pbr { display:block !important; }
.mbr { display:none !important; }

.sec { display:block; position:relative; margin-bottom:80px; width:100%; }
.sec.sm { margin-bottom: var(--space_lg); }
.sec.lg { margin-bottom: 100px; }

/*
.sec:last-child {
margin-bottom: 0;
}
*/

/*swiper*/
.swiper-container { overflow: hidden; }

/***********
row /col
************/
.row { display: flex; justify-content: space-between; width: 100%; }
.row img { max-width: 100%; }
.row > .col-25 { width: calc((100% - 96px)/4); }/*아이템 4분할*/
.row > .col-2 { width: calc(20% - 16px); }
.row > .col-3 { width: calc(30% - 16px); }
.row > .col-33 { width: calc((100% - 64px)/3); }/*아이템 3분할*/
.row > .col-4 { width: calc(40% - 16px); }
.row > .col-5 { width: calc(50% - 16px); }
.row > .col-6 { width: calc(60% - 16px); }
.row > .col-66 { width: calc((100% - 64px)/3*2); }
.row > .col-7 { width: calc(70% - 16px); }
.row > .col-8 { width: calc(80% - 16px); }

/*이미지만 들어갈 떄 사용하는 row ( 모바일 사이즈일 때도 비율 유지 )*/
.row-img > .col-25 { width: calc((100% - 30px)/4); }/*아이템 4분할*/
.row-img > .col-2 { width: calc(20% - 5px); }
.row-img > .col-3 { width: calc(30% - 5px); }
.row-img > .col-33 { width: calc((100% - 20px)/3); }/*아이템 3분할*/
.row-img > .col-4 { width: calc(40% - 5px); }
.row-img > .col-5 { width: calc(50% - 5px); }
.row-img > .col-6 { width: calc(60% - 5px); }
.row-img > .col-66{ width: calc((100% - 20px)/3*2); }
.row-img > .col-7 { width: calc(70% - 5px); }
.row-img > .col-8 { width: calc(80% - 5px); }

/*모바일에서 순서 변경*/
.m-order > li:first-child {order: 1;}
.m-order > li:last-child {order: 2;}

/*이미지 높이 맞게 배치*/
.row-auto{display:flex; margin-left:auto; margin-right:auto; padding:0; list-style:none;}
.row-auto > div {margin-right:10px;}
.row-auto > div:last-child{margin-right:0;}
.row-auto > div > img{display:block; width:100%;}

@media screen and (max-width:768px){
	.row-auto{flex-wrap:wrap;}
	.row-auto > div {width:100% !important; margin-right:0; margin-bottom:8px;}
	.row-auto > div:last-child{margin-bottom:0;}

.row-auto > div.mg_sm{margin-bottom:var(--space_sm);}
.row-auto > div.mg_md{margin-bottom:var(--space_md);}
.row-auto > div.mg_lg{margin-bottom:var(--space_lg);}

}

/***********
img
************/
.img {width:100%; display: block; }/*이미지 100%*/
.img img { width: 100%; display: block;}

.img-lg { width:100%; max-width: 896px; margin-left:auto; margin-right:auto; display: block; }/*이미지 70%*/
.img-lg img { width:100%; display: block;} 
.img-lg .caption { max-width: 896px; margin:0 auto; margin-top: 8px;}

.img-md { width:100%; max-width: 640px; margin-left:auto; margin-right:auto; display: block; }/*이미지 50%*/
.img-md img { width:100%; display: block;}
.img-md .caption { max-width: 640px; margin:0 auto; margin-top: 8px;}

.img-sm { width:100%; max-width: 384px; margin-left:auto; margin-right:auto; display: block; }/*이미지 30%*/
.img-sm img { width:100%; display: block;}
.img-sm .caption { max-width: 384px; margin:0 auto; margin-top: 8px;}

[class*="img-"] .rounded , .img .rounded { border-radius: var(--img-border-radius);}
[class*="img-"] .circle  , .img .circle { border-radius: var(--img-border-cir);}

/***********
bullet
************/
/* 마크업 data-before="" 추가 */
.bullet { display: block; width:100%; }
.bullet > li { display: block; position: relative; padding-left: 16px;}
.bullet > li:last-child{margin-bottom:0;}
.bullet.lg > li { padding-left: 24px; }/*bullet의 크기가 공통 padding보다 클 때 사용*/
.bullet.sm > li { padding-left: 10px; }/*bullet의 크기가 공통 padding보다 작을 때 사용*/
.bullet > li::before { content:attr(data-before); display: block; position: absolute; top:0; left:0;}

/***********
form - checkBox
************/
.check-button:checked,
.check-button:not(:checked) {
position: absolute;
left: -159984px;
}

.check-button:checked + label,
.check-button:not(:checked) + label {
position: relative;
cursor: pointer;
display: inline-flex; 
align-items: center;
justify-content: flex-start;
/* font-size: var(--font-body01); */
font-weight: 500;
color: var(--natural_80);
}

.check-button:checked + label:before,
.check-button:not(:checked) + label:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
position: relative;
display: block;
width: 28px;
height: 28px;
margin-right: 12px;
border: 2px solid var(--natural_30);
border-radius: 6px;
background: #fff;
}

.check-button:checked + label:after,
.check-button:not(:checked) + label:after {
content: "";
position: absolute;
width: 16px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='4' width='1.5' height='7.5' rx='0.75' transform='rotate(-45 0 4)' fill='%23DDDDDD'/%3E%3Crect x='12.7' width='1.5' height='11.6465' rx='0.75' transform='rotate(45 12.7 0)' fill='%23DDDDDD'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
top: 9px;
left: 6px;
}

.check-button:checked + label:before {
border: 1px solid var(--primary_50);
background: var(--primary_50);
}

.check-button:checked + label:after {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='4' width='1.5' height='7.5' rx='0.75' transform='rotate(-45 0 4)' fill='white'/%3E%3Crect x='12.7' width='1.5' height='11.6465' rx='0.75' transform='rotate(45 12.7 0)' fill='white'/%3E%3C/svg%3E%0A");
}
.check-button:disabled + label:before { opacity: .5; background: var(--natural_10);}

/***************
form - radio
***************/


.radio-button:checked,
.radio-button:not(:checked) {
position: absolute;
left: -159984px;
}
.radio-button:checked + label,
.radio-button:not(:checked) + label {  
position: relative;
display: inline-flex; 
align-items: center;
justify-content: flex-start;
/* font-size: var(--font-body01);  */
font-weight: 500;
color: var(--natural_80);
}
.radio-button:checked + label:before,
.radio-button:not(:checked) + label:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;  
content: "";
position: relative;
display: block;
width: 20px;
height: 20px;  
margin-right: 12px;
border: 2px solid var(--natural_30);
border-radius: 100%;
background: #ffffff;
}
.radio-button:checked + label:after,
.radio-button:not(:checked) + label:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;  
content: "";
width: 22px;
height: 22px;
border: 6px solid var(--primary_50);
background: #fff;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
}
.radio-button:not(:checked) + label:after {opacity: 0;}
.radio-button:checked + label:after { opacity: 1;}
.radio-button:disabled + label:before { opacity: .5; border: 2px solid var(--natural_30); background: var(--natural_10);}

/***************
form - input
***************/
input.input-box{ background-color: #fff; border: 1px solid var(--natural_50);  border-radius: 8px; box-sizing: border-box; width: 100%; }
input.input-box.input_md{max-width: 224px; padding: 12px 18px; font-size: 18px; line-height: 180%;}
input.input-box.input_lg{max-width: 402px; padding: 16px 18px; font-size: 22px; line-height: 165%;}
input.input-box::placeholder{color: var(--natural_50);}
input.input-box:disabled{background-color: #f8f9fa; border-color: var(--natural_40);}
input:focus{border: 2px solid var(--primary_50); outline: none;}

/***************
select
***************/
.select{background: url('img/select_icon.svg') calc(100% - 21px) center no-repeat; width: 224px; padding: 10px 14px 10px 18px; border: 1px solid var(--natural_50); border-radius: 8px; box-sizing: border-box; color: var(--natural_80); font-size: 18px; line-height: 180%;}
/* IE */
select::-ms-expand { 
	display: none;
}
.select {
-o-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


/***************
btn
***************/
.btn{display: block; border: none; background-color: var(--natural_80); color: #fff;  cursor: pointer; transition: 0.4s; line-height: 120%;} 

.btn:disabled{background-color: var(--natural_50); opacity: 50%;}
.btn.btn_lg a{display:block; padding: 8px var(--space_sm); font-size:24px;}
.btn.btn_md a{display:block; padding: 8px var(--space_sm); font-size: 18px;}
.btn.btn_sm a{display:block; padding: 8px var(--space_sm); font-size: 16px}

.btn.flat{border-radius: 10px;} /*flat과 round는 매체 특성에 맞게 유동적으로 바꿈*/
.btn.round{border-radius: 40px;}
.btn.sub_btn{background-color: var(--natural_80); color: var(--natural_0);}
.btn.sub_btn:disabled{background-color: var(--natural_50); opacity: 0.4;}
.btn.sub_btn a{color:#fff;}
.btn.outline{background-color: var(--natural_0); border: 1px solid var(--natural_80); color:var(--natural_100);}

@media (hover: hover) and (pointer: fine) {/* pc에서만 반응 */
.btn:hover:enabled{background-color: var(--primary_50);}
.btn.outline:hover:enabled{background-color: var(--natural_10);}
.btn.sub_btn:hover:enabled{background-color: var(--primary_50);}
}


/***********
flex
************/
/* row 클래스 외에 플렉스가 필요한 경우에 사용. */
.flex  {	display: flex;}

/*플렉스 속성*/
/*flex-direction*/
.flex.d-r { flex-direction: row; }
.flex.d-r-m { flex-direction: column; }/*모바일에서 row로 변경*/
.flex.d-c { flex-direction: column; }
.flex.d-c-m { flex-direction: row; }/*모바일에서 column으로 변경*/

/*justify-content*/
.flex.j-fs { justify-content:flex-start; }
.flex.j-ct { justify-content:center; }
.flex.j-fe { justify-content:flex-end; }
.flex.j-sb { justify-content: space-between; }
.flex.j-sa { justify-content: space-around; }

/*align-items*/
.flex.a-fs { align-items:flex-start; }
.flex.a-ct { align-items:center; }
.flex.a-fe { align-items:flex-end; }

/*flex-wrap*/
.flex.w-wp {flex-wrap: wrap;}
.flex.w-nw {flex-wrap: nowrap;}

/***********
card
************/
.card01 { width:100%; max-width: fit-content; border-radius: var(--img-border-radius); overflow: hidden; filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.05)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.05));}
.card01 .img-area { display: block; }
.card01 .img-area img { display: block; max-width:100% ; }
.card01 .txt-area { padding:24px 30px 32px 30px; background-color: var(--natural_0); }

.card02 { padding: 24px 30px 40px 32px; border-radius:var(--img-border-radius) ; background-color: var(--natural_0);  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.05); transition: 0.2s;}

@media screen and (min-width:768px){ /*컨텐츠 길이 달라도 같은 사이즈로 만들기 위해 min-height*/
.card01 .txt-area {min-height: 157px;}
.card02 {min-height: 168px;}
}


/* -------------------------------------------------------media screen*/
@media screen and (max-width:1280px){
.inner_1280 { padding:0 24px; }
}

@media screen and (max-width:1024px){
.inner_1000 { padding:0 24px; }
}

@media screen and (max-width:768px){/*모바일 사이즈*/
.pbr { display:none !important; }
.mbr { display:block !important; }

.sec { margin-bottom: 60px; }
.sec.sm { margin-bottom: 30px; }
.sec.lg { margin-bottom: 80px; }

/***********
	font-size
************/

.fs_lg { font-size: 17px; } 
.fs_md { font-size: 16px; }
.fs_sm { font-size: 13px; } 


.caption { font-size: 14px; line-height: 1.45;}

em.epi { font-size: 20px; }

.sub_title{font-size:24px;}

/***********
	row/col
************/
.row { flex-direction: column;}
.row > li { margin-bottom: var(--space_lg); }
.row > li:last-child { margin-bottom: 0; }
.row > .col-25 { width: 100% }
.row > .col-2 { width: 100% }
.row > .col-3 { width: 100% }
.row > .col-33 { width: 100% }/*아이템 3분할*/
.row > .col-4 { width: 100% }
.row > .col-5 { width: 100% }
.row > .col-6 { width: 100% }
.row > .col-66 { width: 100% }
.row > .col-7 { width: 100% }
.row > .col-8 { width: 100% }

.row > li.mg_0{margin-bottom:0;}
.row > li.mg_sm { margin-bottom: var(--space_sm); }
.row > li.mg_md { margin-bottom: var(--space_md); }
.row > li.mg_lg { margin-bottom: var(--space_lg); }

.row.m-order > li:first-child {order: 2; margin-bottom:0;}
.row.m-order > li:last-child {order: 1; margin-bottom:var(--space_lg);}

.row.m-order > li:last-child.mg_lg {margin-bottom:var(--space_lg);}
.row.m-order > li:last-child.mg_md {margin-bottom:var(--space_md);}
.row.m-order > li:last-child.mg_sm {margin-bottom:var(--space_sm);}
.row.m-order > li:last-child.mg_0 {margin-bottom:0;}


/* common */

/***********
card
************/
.card01 .txt-area { padding:20px 20px 28px 20px;}
.card02 { padding: 24px 32px; min-height:168px; border-radius: 12px;}

/***********
	flex
************/
/*플렉스 속성*/
/*flex-direction*/
.flex.d-r-m { flex-direction: row; }
.flex.d-c-m { flex-direction: column; }
}

.sub_table { width:100%; max-width: 1000px; text-align:center; border:2px solid var(--natural_60); margin-left: auto; margin-right: auto; word-break:keep-all;}
.sub_table th,td { padding:3.2px 8px; border:1px solid var(--natural_60) }
.sub_table th { font-weight:500; vertical-align:middle; font-size:var(--font_lg); color:var(--natural_80); }
.sub_table td { font-weight:400; vertical-align:middle; font-size:var(--font_md); color:var(--natural_60); background-color: var(--natural_0);}
.sub_table thead { background:var(--primary_10); border-bottom:2px solid var(--natural_60);}


html, body{scroll-behavior:smooth;}/* 스크롤 부드럽게 */
#main{padding-top:139px;}/* header 영역 겹치지 않게 */


/*
header, footer CSS
*/

/* header */
.header { display:block; position:fixed;  top: 0; left:0; z-index: 9999; background-color:#323296
; width:100%; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);}
.header .wrap{position:relative;}
.header .this_mon{position:absolute; top:50px; right:50px; width:fit-content; min-width:130px; font-size:18px; font-weight:300; line-height:21.6px;}
.header .wrap .inner_1280 { display: flex; flex-direction: column; align-items: center;  padding-top: 30px; }
.header section { display: block; width: 100%; }

.header .logo_wrap { position:relative; height: 40px; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.header .logo_wrap p { font-size:var(--font_lg); margin-bottom:8px }
.header .logo { width:320px; height: 100%; background: url(../../img/common/logo.svg) no-repeat center center/contain; filter:invert(1); }
.header .logo a { display: block; width: 100%; height: 100%; }

.header .menu_wrap { width: 100%; }
.header .depth01 { display: flex; justify-content: space-between;  }
.header .depth01 > li { position:relative; width:33.3333%; text-align: center; }
.header .depth01 > li > p { position: relative; padding: 14px 0; font-size: 20px; color:#fff; font-weight: 700; line-height: 1.2; cursor: pointer; font-family: 'Godo'; font-weight: 300; overflow: hidden; transition: transform 0.5s;}
.header .depth01 > li > p > em { display: inline-block; width: 0;height: 0; transition: 0.5s;}
.header .depth01 > li > p > span { font-family: 'Godo'; position:absolute; top:50%; right:0; transform: translate(100%,-50%); transition: transform 0.5s;}
.header .depth02 { display:none; position:absolute; top:0; left:50%; transform: translateX(-50%); z-index: 20; width: 100%; height: 0; overflow: hidden;}
.header .depth02 > li {display: flex; justify-content: center; align-items: center;}
.header .depth02 > li > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color:var(--natural_60); transition: 0.2s;}
.header .depth02_bg { display:none; position: absolute;z-index:10; top:100%; width:100%; height: 0; background: var(--natural_10); }

.header .lang_list {width:max-content;position:absolute; top:50px; right:50px; transition:0.2s; overflow:hidden;height: 40px; border: 1px solid #ddd; border-radius: 30px; cursor: pointer; padding: 0 50px 0 15px; box-sizing: border-box; background-color: var(--natural_0); z-index: 999;}
.header .lang_list::after{transition:0.2s;content:''; width:11px; height:6px; display:block;position:absolute; top:13.5px; right:0;transform:translateX(-150%); background:url(../../img/common/arrow.png) no-repeat; filter: invert(1); }
.header .lang_list li { height:40px; transition:0.2s  }
.header .lang_list li a { color:#000; line-height:40px; font-size:16px; font-weight:normal;}

@media (hover:hover) and (pointer:fine){
	.header .lang_list:hover { height:280px; overflow-y:scroll; border-radius: 0;}
	.header .lang_list:hover::after {transform:translateX(-150%) rotate(180deg); }
	.header .lang_list::-webkit-scrollbar { width: 4px; height:0px;}
	.header .lang_list::-webkit-scrollbar-thumb { height: 20%; background: #9e9e9e; border-radius: 0;}
	.header .lang_list::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); }
	.header .lang_list li:hover a { color:var(--primary_50); text-decoration:underline; } 
}

/* .header .depth01 > li > p {color:#4B7F22; }
.header .depth01 > li:nth-child(2) > p{color:#F8B300;}
.header .depth01 > li:nth-child(3) > p{color:#006291;} */

@media (hover:hover) and (pointer:fine){
.header .depth01 > li:hover > p {color:#a5bf91; /*transform: translateX(-50px);*/ }
.header .depth01 > li:nth-child(2):hover > p{color:#F8B300;}
.header .depth01 > li:nth-child(3):hover > p{color:#80b1c8;}
/* .header .depth01 > li:last-of-type:hover > p {color:var(--primary_50); transform: translateX(0); } */
/* .header .depth01 > li:hover > p > em {width: 64px;} */

/* .header .depth01 > li:hover > p > span { position: absolute; transform: translate(-2px,-50%);}
.header .depth01 > li:nth-child(n+2):hover > p > span { transform: translate(-24px,-50%);} */

.header .depth01 > li:first-child .depth02 > li > a:hover { color:#4B7F22; }
.header .depth01 > li:nth-child(2) .depth02 > li > a:hover{color:#F8B300;}
.header .depth01 > li:nth-child(3) .depth02 > li > a:hover{color:#006291;}
}
@media screen and (max-width:1280px){
.header .depth01 > li > p > span,.header .depth01 > li > p > em { display: none;}
}
@media (hover:hover) and (pointer:fine) and (max-width:1280px){
.header .depth01 > li:hover > p {color:#4B7F22; transform: translateX(0px); }
.header .depth01 > li:nth-child(2):hover > p{color:#F8B300;}
.header .depth01 > li:nth-child(3):hover > p{color:#006291;}
}
@media screen and (max-width:768px){
#main{padding-top:88px;}
/* .header .this_mon{position:static; font-size:12px; line-height:14.4px; margin-top:5px;} */
.header .wrap .inner_1280 { padding-top: 32px; padding-bottom: 32px;}
.header .logo{background-position:left center; width:140px;}
.header .logo_wrap { margin-bottom: 0; height:auto; flex-direction:row; justify-content: space-between; align-items: center;}
.header .logo_wrap .logo{margin-left:80px;}
.header .logo_wrap .logo a{height:32px;}
.header .logo_wrap .vol p{color:#fff; line-height:1; margin-bottom:0;}
.header .logo_wrap .gnb{ content: ''; display: block; position:absolute; top:50%; left:0; transform:translateY(-50%); width: 44.8px; height: 44.8px; }
.header .logo_wrap .gnb .bar { display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44.8px; height: 35.2px; }
.header .logo_wrap .gnb .bar li {position:absolute; width: 100%; height: 2px; background-color:#fff; transition:0.2s }
.header .logo_wrap .gnb .bar li:nth-child(1){top:0 ;}
.header .logo_wrap .gnb .bar li:nth-child(2){top:50%;transform:translateY(-50%); opacity:1;}
.header .logo_wrap .gnb .bar li:nth-child(3){top:calc(100% - 2px) ;}
.header .logo { position:relative; top:0; left:0; transform:none; } 
.header .logo_wrap .gnb.open .bar li:nth-child(1){position:absolute;top:50% ;transform:translateY(-50%) rotate(135deg);}
.header .logo_wrap .gnb.open .bar li:nth-child(2){opacity:0;}
.header .logo_wrap .gnb.open .bar li:nth-child(3){ position:absolute;top:50% ;transform:translateY(-50%) rotate(-135deg);}

.header .menu_wrap { display: none; position:fixed; top:88px; left:-100%;  width:100vw; height:100vh; background:#fff; z-index:100; overflow:auto; transition:0.5s;}
.header .depth01 { flex-direction:column;  padding-top:32px; background:#fff;}
.header .depth01 > li { position:relative; width:100%; height:50px; text-align: left; padding:0 16px; overflow:hidden; transition:0.3s;}
.header .depth01 > li > p { position:relative; padding: 14px 0; color:#333; font-size:18px; font-weight: 700; line-height: 1.2; cursor: pointer; transition:0.2s;}
.header .depth01 > li > p::after { content:''; position:absolute; top:50%; right: 12px; width:12.8px; height:12.8px;border-top: 2px solid #495057;border-left: 2px solid #495057; transform:translateY(-50%) rotate(225deg);transition:0.3s;}
.header .depth01 > li > p.open { color:#4B7F22; }
.header .depth01 > li:nth-child(2) > p.open { color:#F8B300; }
.header .depth01 > li:nth-child(3) > p.open { color:#006291; }
.header .depth01 > li > p.open::after { transform:translateY(-50%) rotate(45deg); } 
.header .depth02 { display:block; position:relative; top:0; left:0; transform: translateX(0); z-index: 20; width: 100%; height: auto; overflow: hidden;}
.header .depth02 > li {display: block; padding:12px 10px;}
.header .depth02 > li > a {display: block; width: 100%; height: 100%; color:var(--natural_60); transition: 0.2s;}

.header .lang_list { display: none; }

.header .depth01 > li > p > span { display: inline-block; position: static; transform: translate(0,0); }
}

@media screen and (max-width:480px){
#main{padding-top:64px;}
.header .logo_wrap .logo a{height:24px;}
.header .menu_wrap { top:64px;}
.header .depth01 > li > p::after{right:6px;}
}


footer{padding:var(--space_md) 0; font-size:17px; background:var(--natural_60); position: relative;}
footer a{display:block;}
footer .ft_row > li{display:flex; align-items:center; width: fit-content;}
footer .ft_row > li:last-child{justify-content:flex-end;}
footer h1{width:250px; max-width:300px; margin-right: var(--space_lg);}
footer .sns_list li{margin-right:var(--space_sm);}
footer .sns_list li:last-child{margin-right:0;}
footer .sns_list li img, footer .sns_list li a{display:block;}
footer button{margin:0 auto;}
footer button.btn.btn_md a{font-size:18px;}
footer .p_info{width:fit-content; color:#f3f3f3; text-decoration:underline; text-underline-position:under;}

@media screen and (max-width:768px){
footer{padding-bottom:128px;}
footer h1{max-width:159px; margin-right: 0;}
footer .row.ft_row{flex-direction:row; flex-wrap:wrap;}
footer .row.ft_row > li.col-33{width:50%; margin-bottom:0;}
footer .row.ft_row > li:first-child.col-33{width:100%; margin-bottom:16px;}
footer .ft_row > li:last-child{justify-content:flex-start;}
footer button{margin:0 auto 0 0;}
footer button.btn.btn_md a{padding:18px 40px; word-break:keep-all;}
footer .sns_list li img, footer .sns_list li a{width:32px; height:32px;}
}

/* 퀵메뉴, 이전, 다음 메뉴 */

.quick_sec{position:sticky; z-index:30; bottom:0; height:0; }
.quick_sec .inner_1280{max-width:1540px; height:0;}
.quick_wrap{margin:0 0 0 auto; width:50px; height:50px; opacity:0; visibility:hidden; transition:0.3s;}
.quick{position:relative; width:100%; height:100%; opacity:0.85;}
.quick li{position:absolute; bottom:calc(50px + 16px); width: 100%; height: 100%; background-color: var(--natural_10); border: 1px solid var(--natural_40); border-radius: 50%; transition:0.3s;}

.quick li a{position:relative; display:flex; width:100%; height:100%; justify-content:center; align-items:center;}
.quick li:nth-child(2) a img{transform:rotate(180deg);}
.quick li:nth-child(3) a img{transform:rotate(90deg);}

@media (hover:hover) and (pointer:fine){
.quick li:hover{background:#7f7c6e;}
.quick li:hover img{filter:brightness(0) invert(1);}
}

.quick_wrap.active{opacity:1; visibility:visible;}
.quick_wrap.active .quick li:first-child{bottom:calc(150px + 16px*3 - 8px*2);}
.quick_wrap.active .quick li:nth-child(2){bottom:calc(100px + 16px*2 - 8px);}

.quickmenu_wrap { transition:0.5s; transition-timing-function: ease-out; width:auto; height:auto; border-radius:0 20px 20px 0; background:#798d53; position:fixed; top:50%; left:0; transform:translate(-100%,-50%); z-index:200;padding:var(--space_md); box-sizing:border-box; border: 3px solid #fff; box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}
.quickmenu_wrap .quickmenu_btn { display:flex;align-items:center;box-sizing:border-box; width:176px; position:absolute; top:40%; left:60%; z-index: 10;transform:translate(0,-50%); z-index:10; cursor:pointer;}
.quickmenu_wrap.open .ani-dance { animation: ani-dance 1s ease-out infinite alternate-reverse; }
.quickmenu_wrap img {display:inline-block; width:100%; transition:0.2s; filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2)); transform: translateX(-0%) rotate(10deg);}
.quickmenu_wrap .quickmenu_list { width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:center; position: relative; z-index: 50; }
.quickmenu_wrap .quickmenu_list li { width: 100%; margin-bottom:var(--space_sm);padding-bottom:var(--space_sm); border-bottom: 1px dashed var(--natural_70); }
.quickmenu_wrap .quickmenu_list li:last-child { margin-bottom: 0; }
.quickmenu_wrap .quickmenu_list svg { display: inline-block; margin-bottom:8px; }
.quickmenu_wrap .quickmenu_list a { text-align:center; color:#fff; font-size:var(--font_md); display:flex; flex-direction:column; align-items:center;}

.quickmenu_wrap.open { transform:translate(calc(0% - 3px),-50%);}

@keyframes ani-dance { 0% { transform: translateX(-0%) rotate(10deg); transform-origin: bottom; } 100% { transform: translateX(5px) rotate(15deg); transform-origin: bottom; } } 

/* @media screen and (max-width:1500px) {
.quickmenu_wrap .quickmenu_btn { width: 128px; }
}
@media screen and (max-width:1280px) {
.quickmenu_wrap .quickmenu_btn { width: 96px; }
} */

@media screen and (max-width:768px) {
.quick_sec{position:fixed; right:0;}
.quick_sec .quick{transform: translateY(-100px);}
.quick li{background:#7f7c6e;}
.quick li img{filter:brightness(0) invert(1);}

.quickmenu_wrap .quickmenu_btn{ display:none; }
	.quickmenu_wrap { transition:0.8s;width:calc(100% - 32px); height:auto; border-radius:34px; position:fixed; top:auto;bottom:-100%; left:50%; transform:translateX(-50%);padding:4px 0; box-shadow:0px 4px 4px rgba(0,0,0,0.3)}
	.quickmenu_wrap.open {  bottom:2% ; transform:translateX(-50%)}
	.quickmenu_wrap .quickmenu_list { flex-direction:row; justify-content: space-around; padding:5px 16px; }
.quickmenu_wrap .quickmenu_list li { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
	.quickmenu_wrap .quickmenu_list img { width:25%; margin-bottom:5px; }
	.quickmenu_wrap .quickmenu_list li:first-child img { width:20% }
	.quickmenu_wrap .quickmenu_list a { text-align:center; color:#fff; font-size:11px; letter-spacing:-0.075em; display:flex; flex-direction:column; align-items:center;}
}



.caption { font-size:var(--fs_sm); line-height: 1.45; margin-top: 8px; text-align: center; color: var(--natural_70); word-break:keep-all;} /*이미지 설명*/
/* .sub_title{font-size:30px; font-weight:600; line-height:1.25; word-break:keep-all; color:#006A4E;} */
.sec:nth-last-of-type(2){margin-bottom: 0 !important; padding-bottom: 80px !important;}
@media screen and (max-width:768px) {
.caption{font-size:14px;}
.sec:nth-last-of-type(2){padding-bottom: 60px !important;} 
}