/* 전 php 공통으로 쓰이는 body header footer만 들어있습니다. */

html {letter-spacing: -0.5px; font-size:62.5%;}

.header-height {height: 8rem;}

header {width: 100%;  height:auto; position: fixed; left:0; top:0; z-index: 99; transition: all 0.7s cubic-bezier(.23,1,.32,1); border-bottom:1px solid rgba(255,255,255,0.2); background-color: rgba(0,0,0,0.1); backdrop-filter: blur(10px);}
header .container {width:calc(100% - 8rem); margin: 0 auto; }
header .container {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap;}
.header-bg {position: fixed; top:0; left:0; width:100%; height: 100%; opacity: 0; visibility: hidden;  background-color: rgba(0,0,0,0.3); z-index:5; transition: all 0.7s cubic-bezier(.23,1,.32,1);} 
.header-bg.activated {height: 100%; opacity: 1; visibility: visible;}

header .container .menu-wrap { display: flex; justify-content: center; align-items: stretch; flex-basis: 100%; max-width: 100%; transition: all 1.2s cubic-bezier(.23,1,.32,1); }
header .container .menu-wrap>ul { display: flex; flex-direction: column; text-align: center; width: 100%; transition: all 1.2s cubic-bezier(.23,1,.32,1); flex-basis: 18rem; }

header .container .menu-wrap>ul:hover {background-color: #f8f8f8; }
header .container .menu-wrap>ul:hover>li>a.active {color:#fff;}
header .container .menu-wrap>ul:hover>li>a {color:#000;}
header .container .menu-wrap>ul>li {font-size:1.6rem;}
/* header .container .menu-wrap>ul>li::before {content:''; position: absolute; bottom:0; width: 100%; height:2px; background-color: #6ABA50; opacity: 0;} */
header .container .menu-wrap>ul>li>a {width: 100%;  display: block; padding: 0.5rem 0; text-align: center; color:#fff; font-size: 1.6rem; }
header .container .menu-wrap>ul>.menu {position: relative; font-size:1.8rem; height: 8rem; display: flex; justify-content: center; align-items: center; position: relative;}
header .container .menu-wrap>ul>.menu>a {text-align: center; font-size:1.8rem; } 
header .container .menu-wrap>ul>li.on>a {color:#6ABA50 !important; font-weight: bold;}
header .container .menu-wrap>ul>li:nth-child(2) {padding-top:2rem;}
header .container .menu-wrap>ul>li:not(.menu) {visibility: hidden; opacity: 0; height: 0; display: none;}
header .container .menu-wrap>ul>li:not(.menu)>a {opacity: 0.8;}
header .container .menu-wrap>ul>li:not(.menu):hover>a {opacity: 1;}
header .container .menu-wrap>ul>li:not(.menu):last-child {padding-bottom:2rem;}

header .container .menu-wrap>ul>li.sub-active>a {opacity: 1;}

header .container .menu-wrap>ul>.menu::after {content:''; position: absolute; left:50%; bottom:-1px; width:0; height:3px; background-color:#6ABA50;transition: all 0.4s cubic-bezier(.23,1,.32,1); }
header .container .menu-wrap>ul>.menu::before {content:''; position: absolute; right:50%; bottom:-1px; width:0; height:3px; background-color:#6ABA50;transition: all 0.4s cubic-bezier(.23,1,.32,1); }
header .container .menu-wrap>ul:hover .menu a {color:#6ABA50 !important;}
header .container .menu-wrap>ul:hover .menu::after {width:50%;}
header .container .menu-wrap>ul:hover .menu::before {width:50%;}

header .container .logo-wrap {display: flex; justify-content: flex-start; align-items: center; flex-basis: 30rem; max-width: 30rem;}
header .container .logo-wrap a {flex-basis: 16.2rem; max-width: 16.2rem; display: flex; justify-content: flex-start;}
header .container .logo-wrap a:nth-child(2) {display: none;}
header .container .logo-wrap a:nth-child(1) {display: flex;}

header .container .etc-wrap {flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap:1rem; flex-basis: 30rem;}
header .container .etc-wrap .lang-item {margin-right:3rem; cursor: pointer; display: flex; justify-content: center; align-items: center; gap:1rem;}
header .container .etc-wrap .lang-item>li {font-size:1.4rem; line-height: 1; border-radius: 2rem; background-color:#efefef; display: flex; justify-content: center; align-items: center; border:1px solid rgba(0,0,0,0.2); padding:0.6rem 2rem; font-family: "Pretendard";}
header .container .etc-wrap .lang-item>li.active {background-color:#C72E32; color:#fff; border:1px solid #C72E32;}
header .container .etc-wrap .lang-item>li>span>img {max-width: 1.6rem; margin-right:1.6rem;}



.etc-wrap .list-down {cursor: pointer; border:2px solid #fff; border-radius: 2rem; color:#fff;  gap:0.5rem; padding:0.25rem  1rem; position: relative;}

.etc-wrap .list-down .arrow {filter: invert(1);}
.etc-wrap .list-down .list { visibility: hidden;  opacity: 0;  position: absolute; top:0%; padding:1rem; left:50%; transform: translate(-50%,-10%); margin-top:3.5rem; width: calc(100% + 4px); border:2px solid #fff; border-radius: 2rem; background-color: rgba(255,255,255,1); backdrop-filter: blur(5px);  transition: all 0.8s cubic-bezier(.23,1,.32,1);}
.etc-wrap .list-down .list li a {padding: 0.3rem; font-size:1.3rem; color:#fff;}
.etc-wrap .list-down.active .list {visibility: visible; opacity: 1; transform: translate(-50%,0%); }




header.activated .etc-wrap .list-down {border:2px solid #000; color:#000;}
header.activated .etc-wrap .list-down .arrow {filter: invert(0);}
header.activated .etc-wrap .list-down .list {border:2px solid #000; }
header.activated .etc-wrap .list-down .list li a {color:#000;}
header.activated .etc-wrap .list-down.active .list {visibility: visible; opacity: 1; display: block;}
header.activated::before {height: 100%; background-color: #fff; }
header.activated .logo-wrap a:nth-child(2) {display: flex;}
header.activated .logo-wrap a:nth-child(1) {display: none;}
header.activated {background-color: #fff;}
header.activated .container .logo-wrap a:nth-child(1) {display: none;}
header.activated .container .logo-wrap a:nth-child(2) {display: block;}
header.activated .container .menu-wrap>ul>li>a {color:#000;}

header.activated_02 .etc-wrap .list-down {border:2px solid #000; color:#000;}
header.activated_02 .etc-wrap .list-down .arrow {filter: invert(0);}
header.activated_02 .etc-wrap .list-down .list {border:2px solid #000; }
header.activated_02 .etc-wrap .list-down .list li a {color:#000;}
header.activated_02 .etc-wrap .list-down.active .list {visibility: visible; opacity: 1; display: block;}
header.activated_02::before {height: 100%; background-color: #fff; }
header.activated_02 .logo-wrap a:nth-child(2) {display: flex;}
header.activated_02 .logo-wrap a:nth-child(1) {display: none;}
header.activated_02 {background-color: #fff;}
header.activated_02 .container .logo-wrap a:nth-child(1) {display: none;}
header.activated_02 .container .logo-wrap a:nth-child(2) {display: block;}
header.activated_02 .container .menu-wrap>ul>li>a {color:#000;}





header  #lang-down {border:2px solid #000; color:#fff; background-color: #000;}
header  #lang-down .item {flex-wrap: nowrap;}
header  #lang-down .item img {object-fit: contain;}
header  #lang-down .arrow {filter: invert(1);}

/* header #lang-down {max-width: 10rem;} */
header #lang-down .list {background-color: #000; border:2px solid #000;}
header #lang-down .list li {text-align: center;}
header #lang-down .list li span {opacity: 0.7;}
header #lang-down .list li span.active {opacity: 1;}





header:hover .menu-wrap>ul>li:not(.menu) {visibility: visible; opacity: 1; height: auto;  display: block;}
header:hover .menu-wrap>ul>li>a {color:#666;}
header .container .menu-wrap>ul:hover>li::before {opacity: 1;}



 /* 사이드 메뉴 버튼 */
.side-menu-container {visibility: hidden; width:100%; max-width:100%; height:100%; z-index: -10; opacity: 0; background-color:rgba(0,0,0,0.7); position: fixed; top:0; right:0; } 
.side-menu-container.active {opacity: 1; z-index: 99; visibility: visible;}
.side-menu-container.active .side-menu {right:0;}


.side-menu-container .side-menu {position: fixed; top:0; right:-100%; transform: translate(0%,0%); width:100%; max-width:50%; height:100%; background-color:#f9f9f9; display: flex; flex-direction: column; padding:8rem;  transition: all 0.8s cubic-bezier(.23,1,.32,1);}
.side-menu-container .side-menu .top-menu {width:100%;  margin-bottom: 3rem; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
.side-menu-container .side-menu .top-menu li:first-child {flex-basis: 15rem;}
.side-menu-container .side-menu .top-menu li:last-child .sub {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border:2px solid #000;}
.side-menu-container .side-menu .top-menu li:last-child .sub:hover>li:first-child img {transform: rotate(180deg);}
.side-menu-container .side-menu .top-menu li:last-child .sub>li:first-child img {width:3rem; height:auto; cursor: pointer; transition: all 0.4s; margin:5px;}
.side-menu-container .side-menu .top-menu li:last-child .sub>li:first-child:hover img {opacity: 0.7;}
.side-menu-container .side-menu .top-menu li:last-child .sub>li:last-child img {width:3rem; height:auto; cursor: pointer; transition: all 0.4s; margin:5px; }
.side-menu-container .side-menu .top-menu li:last-child .sub>li:last-child:hover img {opacity: 0.7;}
.side-menu-container .side-menu .top-menu li:first-child img {width:20rem; margin:5px; transition: all 0.4s;}
.side-menu-container .side-menu .top-menu li:first-child:hover img {opacity: 0.7;}
.side-menu-container .side-menu .lang-menu {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;  margin-bottom: 3rem; }
.side-menu-container .side-menu .lang-menu li { padding:0.5rem 1rem; text-align: center; flex-basis: 25%; max-width:25%;  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; cursor: pointer;  font-size:1.8rem; }
.side-menu-container .side-menu .lang-menu li.active-lang {font-weight: bold; color:#fff; background-color: #6ABA50; border:1px solid #6ABA50;}
.side-menu-container .side-menu .menu {width:100%; overflow-y: auto; overflow-x: hidden;}
.side-menu-container .side-menu .menu>li {padding:0;  margin-bottom: 2rem; position: relative; line-height: 1.6em; cursor: pointer; transition: all 0.4s; font-size:1.4rem;}
.side-menu-container .side-menu .menu>li>p {font-size:2.8rem; padding:1.5rem; color:#000;}
.side-menu-container .side-menu .menu>li>p.on {color:#6ABA50;}
.side-menu-container .side-menu .menu>li::after {content:''; position: absolute;  top:2rem; right:1rem; transform: translateY(-50%); width:20px; height:20px; background-image: url(/HANJU/public/img/down-btn-01.svg); filter: invert(100%);  background-repeat: no-repeat; background-size:cover; transition: all 0.4s; opacity: 0.7;}
.side-menu-container .side-menu .menu>li>.sub-menu { display: none; padding:0.5rem 1rem; background-color: rgba(0,0,0,0.01); border-radius: 0.3rem;}
.side-menu-container .side-menu .menu>li>.sub-menu li a {font-size:2rem;  padding:1rem 2rem; color:rgba(0,0,0,0.7);}
.side-menu-container .side-menu .menu>li>.sub-menu li:last-child a {border-bottom:0;}

.side-menu-container .side-menu .information {padding:3rem; border:1px solid rgba(0,0,0,0.1); margin-top:2rem;}
.side-menu-container .side-menu .information a {color:#6ABA50; font-weight: bold;}

.catalogue-btn {position: fixed; right:-1rem; top:25%; width:7rem; height:20rem; z-index: 1000;overflow: hidden; transition: all 0.4s cubic-bezier(.23,1,.32,1); border-radius: 0.5rem 0 0 0.5rem; display: flex; justify-content: flex-start; align-items: flex-start; background-color:#000D1E;} 
.catalogue-btn>img {width:100%; max-width: 6rem; height: auto!important; vertical-align: middle;}
.catalogue-btn:hover {opacity: 0.8; right:0; }
 



body {font-family:'Pretendard','Open Sans', 'sans-serif';
      font-weight:400;
      color:#666666;
      line-height:1.6;
      position:relative;
	    padding-top:0;
      width:100%;
      max-width:100%;
      word-break: keep-all;
      letter-spacing: -0.5px;
      background-color: #fff;
}

/*드래그 색상*/
::selection {color:#fff; background:darkblue;}
.cont-1600 {width:100%; height:100%; max-width: 1600px; margin: 0 auto; position: relative; padding-left:1rem; padding-right: 1rem;}

p {word-break: keep-all;}
img{display: block; border:0;}
a{display: block;}

.red {color:#C81D09;}
.blue {color:#6ABA50;}
.green {color:#6ABA50;}
.blue_01 {color:#314a95;}
.black {color:#000;}
.white {color:#fff;}

.b-btn-white {border:1px solid #fff; padding:1.6rem 6rem; color:#fff; display: inline-block; border-radius: 5rem; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.b-btn-white:hover {color:#6ABA50; background-color: #fff; text-decoration: none;}
.boundary1{width:100%; max-width:1200px; margin:0 auto; position: relative;}
.boundary2{width:100%; max-width:1200px; margin:0 auto; position: relative;}
.cont_1200 {width:100%; max-width:1200px; margin:0 auto;}


.allPt{padding-top:120px;}
.allPt2{padding-top:200px;}

.clearfix::before, .clearfix::after{display:block; content:''; clear: both;}

section{width:100%; position: relative; padding-top:0;}


.adminlock {position: absolute; bottom:15px; right:5px; cursor: pointer; z-index: 100; padding:10px; opacity: 0.5;}
.mobile-image {display: none;}
.pc-image {display: block;}

/*탭 스타일*/

.tab-wrap {width:100%; display:flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; max-width:1400px; margin:0 auto;}
.tab-wrap .tab {background-color:#fafafa; flex-basis: 33.3333%; max-width:3333%; padding:15px 20px; border-top:4px solid #fafafa; cursor: pointer; transition: all 0.4s; text-align: center; font-size:1.6rem;}
.tab-wrap .tab:hover {opacity: 0.7;}
.tab-wrap .tab.active-tab {border-top:4px solid #C81D09; background-color:#fff;}



/* 체크 */
.check{position: relative;}
.check_label { display: inline-block; position: relative;  font-size:1.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; padding-left:26px; vertical-align: middle;}
.check_label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}
.checkmark {position: absolute; top:50%; transform:translateY(-50%); left: 0; height: 20px; width: 20px; background-color: #fff; border-radius:50%; border:1px solid #ccc;}
.check_label:hover input ~ .checkmark {background-color: #efefef;}
.check_label input:checked ~ .checkmark {border:1px solid transparent; background-color: #136090;}
.checkmark:after { content: ""; position: absolute; display: none;}
.check_label input:checked ~ .checkmark:after {display: block;}



/* 체크박스 */
.check_label .checkmark:after {left: 6px; top:3px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* 라디오 */
.check_label .checkmark.radio:after{ top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: white;}

/* btn class명을 가진 태그 */
.btn{padding-left:16px; padding-right:16px; height:44px; font-size:1.5rem;}
.btn-primary{background-color:#fdab16; color:#fff; border:1px solid transparent;}
.btn-secondary{background-color:#333; color:#fff;}
.btn-default{background-color:#fff; border:1px solid #ccc;}




  input:focus, textarea:focus, select:focus, option:focus {

	outline:none!important;
  }



  *:focus { outline:none; }
  .center-img {margin:0 auto;}

  .dot-p {position: relative; margin-left:10px;}
  .dot-p::before {content:''; position: absolute; top:12px; left:-10px; width:3px; height:3px; background-color:#333333; }


.flex {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%;}
.flex_start {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width:100%;}
.flex_column {display: flex; flex-direction: column; width:100%;}
.flex .content {flex-basis: 100%; max-width:100%; margin:0%;}

.flex_2ea {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%;}
.flex_2ea .content {flex-basis: 48%; max-width:48%; margin:1%;}

.flex_3ea {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%;}
.flex_3ea .content {flex-basis: 31.3333%; max-width:31.3333%; margin:1%;}

.bold {font-weight: 500;}



.black-bg {position: fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index: 997; display: none;}

/* 로딩바 */
.preloader {
    display: inline;
    z-index: 2000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: opacity 0.65s ease;
}
.loading-bar {
    width: 12%;
    height: 4px;
    background-color: #4382dd;
    transition: width 2000ms cubic-bezier(.25, 0, 0, 1);
}



  /*타이틀*/
  .pd-title {justify-content: space-between; margin-top:20px;}
  .pd-title>.title-cont>ul>li {margin-right:10px;}
  .pd-title>.title-cont>ul>li>img {width:100%; max-width: 30px;}
  .pd-title>.title-cont>ul>li>h2 {font-size:3.4rem;}
  .pd-title>.title-cont>ul>li:last-child {font-size:1.4rem;}
  .pd-title>.search-cont>ul>.search-text>input {border:1px solid #ddd; padding:10px; font-size:12px;}
  .pd-title>.search-cont>ul>.search-btn {background-color:#43d1a1; width:38px; height:38px; transition: all 0.4s; cursor: pointer;}
  .pd-title>.search-cont>ul>.search-btn:hover {opacity: 0.7;}



.actionBtn15 {
  display: inline-block;
  position: relative;
  margin: auto;
   text-transform: uppercase;
  text-decoration: none;
}
.actionBtn15 .lb-box {
  display: block;
  padding: 11px 15px;
}
.actionBtn15 .lb-box:after {
 content: '';
  display: block;
  clear: both;
}
.actionBtn15 .lb {
  display: block;
  position: relative;
  z-index: 1;
  float: left;
  color:#222;
  font-size: 14px;
  font-weight: bold;
  font-family: 'S-Core', sans-serif;
}
.actionBtn15 .cir-lt, .actionBtn15 .cir-rt {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: 0;
  background: #ffe1e2;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.actionBtn15 .cir-lt {
  width: 40px;
  opacity: 1;
  transition: width .3s ease .3s, opacity 0s ease .3s;
  -webkit-transition: width .3s ease .3s, opacity 0s ease .3s;
  -moz-transition: width .3s ease .3s, opacity 0s ease .3s;
}
.actionBtn15 .cir-rt {
  width: 100%;
  opacity: 0;
  transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease;
  -webkit-transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease;
  -moz-transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease;
}
.actionBtn15:hover .cir-lt {
  width: 100%;
  opacity: 0;
  transition: width .3s ease 0s, opacity 0s ease .3s;
  -webkit-transition: width .3s ease 0s, opacity 0s ease .3s;
  -moz-transition: width .3s ease 0s, opacity 0s ease .3s;
}
.actionBtn15:hover .cir-rt {
  left: 100%;
  margin-left: -40px;
  width: 40px;
  opacity: 1;
  transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s;
  -webkit-transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s;
  -moz-transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s;
}
.actionBtn15 .ico-plus {
  display: block;
  position: relative;
  z-index: 1;
  float: right;
  width: 9px;
  height: 9px;
  margin: 4px 0 0 25px;
  background: url('../images/effect_ex/ico_cross_1.png') no-repeat;
  transition: transform .3s ease .15s;
  -webkit-transition: transform .3s ease .15s;
  -moz-transition: transform .3s ease .15s;
}
.actionBtn15:hover .ico-plus {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

 /* css */

 .navBtn5 {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  text-align: center;
}
.navBtn5 .bar {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: 2px;
  background: #fff;
  transition: transform .3s ease-out .1s;
  -webkit-transition: transform .3s ease-out .1s;
  -moz-transition: transform .3s ease-out .1s;
}
.navBtn5 .bar:nth-child(1) {
  top: 5px;
  transform-origin: left;
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
}
.navBtn5 .bar:nth-child(2) {
  top: 15px;
}
.navBtn5 .bar:nth-child(3) {
  top: 25px;
}

.navBtn5.is-open .bar:nth-child(1) {
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
}
.navBtn5.is-open .bar:nth-child(2) {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}
.navBtn5.is-open .bar:nth-child(3) {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
}


.actionBtn5 {
  overflow:hidden;
  position:relative;
  display:block;
  width:100%;
  height:40px;
  margin:auto;
  border:1px solid rgba(255,255,255,0.3);
  text-align:center;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  line-height:40px;
  color:#fff;
  font-size:1.4rem;
  text-decoration:none;
  text-transform:uppercase;
  margin-top:5px;
  margin-bottom:5px;
}
.actionBtn5 span {
  display:block;
}
.actionBtn5 .hover:after {
  position:absolute;
  top:0;
  left:50%;
  opacity:0;
 display:block;
  content:"";
  width:0%;
  height:40px;
  background-color:#4382dd;
  border:1px solid transparent;
 transform:skewX(-40deg);
 -webkit-transform:skewX(-40deg);
 -moz-transform:skewX(-40deg);
 transform-origin:center center;
  -webkit-transform-origin:center center;
  -ms-transform-origin:center center;
  -moz-transform-origin:center center;
  transition:all .35s, opacity .4s;
  -webkit-transition:all .35s, opacity .4s;
  -moz-transition:all .35s, opacity .4s;
}
.actionBtn5 .hover .txt {
 z-index:10;
 position:relative;
  color:#fff;
 transition:color .35s;
 -webkit-transition:color .35s;
 -moz-transition:color .35s;
}
.actionBtn5:hover .hover .txt {
  color:#fff;
}
.actionBtn5 .hover:hover:after {
  opacity:1;
  left:3%;
  width:95%;
  transform:skewX(-40deg);
  -webkit-transform:skewX(-40deg);
  -moz-transform:skewX(-40deg);
}

.actionBtn24-wrap {
	 width: 100%;
   max-width: 15rem;
	 height: 15rem;
  position: relative;



}
.actionBtn24-wrap .mid-line{
	 display: block;
	 position: absolute;
	 top: 50%;
	 width: 100%;
	 margin-top: -1px;
	 height: 1px;
	 background: rgba(0,0,0,0.2);
}
.actionBtn24 {
	 display: inline-block;
	 position: relative;
	 width: 15rem;
	 height: 15rem;
   border-radius: 50%;
}
.actionBtn24 .ele-box{
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 -webkit-transform: translate(-50%, -50%);
	 -moz-transform: translate(-50%, -50%);
	 -ms-transform: translate(-50%, -50%);
	 text-align: center;
   z-index: 2;
}
.actionBtn24 .ele-box .lb-top, .actionBtn24 .ele-box .lb-bot{
	 display: block;
	 height: 1.2rem;
	 transition: transform .375s ease;
	 -webkit-transition: transform .375s ease;
	 -moz-transition: transform .375s ease;
    z-index: 2;
}
.actionBtn24:hover .ele-box .lb-top{
	 transform: translateY(-3px);
	 -webkit-transform: translateY(-3px);
	 -moz-transform: translateY(-3px);
	 -ms-transform: translateY(-3px);
    z-index: 2;
}
.actionBtn24:hover .ele-box .lb-bot{
	 transform: translateY(3px);
	 -webkit-transform: translateY(3px);
	 -moz-transform: translateY(3px);
	 -ms-transform: translateY(3px);
    z-index: 2;
}
.actionBtn24 .ele-box .lb-top .txt, .actionBtn24 .ele-box .lb-bot .txt{
	 display: block;
	 position:relative;
	 padding-left: 3px;
	 color:#000;
	 line-height: 1.3rem;
	 font-size: 1.2rem;
	 font-weight: bold;
	 font-family: 'Pretendard', sans-serif;
	 letter-spacing: 3.5px;
    z-index: 2;
}


.actionBtn24:hover .ele-box .lb-top .txt {color:#fff;}
.actionBtn24:hover .ele-box .lb-bot .txt {color:#fff;}
.actionBtn24:hover .ele-box .dot {background:#fff;}

.actionBtn24 .ele-box .dot {
	 display: block;
	 width: 3px;
	 height: 3px;
	 margin: 3px auto 4px;
	 background: #000;
	 border-radius: 50%;
	 -webkit-border-radius: 50%;
	 -moz-border-radius: 50%;
	 transition: transform .34s ease;
	 -webkit-transition: transform .34s ease;
	 -moz-transition: transform .34s ease;
    z-index: 2;
}
.actionBtn24:hover .ele-box .dot{
	 transform: scale(1.6);
	 -webkit-transform: scale(1.6);
	 -moz-transform: scale(1.6);
	 -ms-transform: scale(1.6);
    z-index: 2;
    

}

.actionBtn24 svg {
  z-index: 2;

}


.actionBtn24 svg .c-02{
	 stroke-dasharray: 465;
	 stroke-dashoffset: 465;
	 transition: stroke-dashoffset .6s ease .05s;
	 -webkit-transition: stroke-dashoffset .6s ease .05s;
	 -moz-transition: stroke-dashoffset .6s ease .05s;
   z-index: 2;
}
.actionBtn24:hover svg .c-02{
	 stroke-dashoffset: 0;
    z-index: 2;
}

.actionBtn24-wrap .actionBtn24:before {content:''; position: absolute; top:1px; left:1px; opacity: 1; z-index: 0;  width:calc(100% - 2px); height: calc(100% - 2px); border-radius: 50%; background-color: rgba(255,255,255,0.1);  backdrop-filter: blur(15px);   transition: all 0.4s cubic-bezier(.23,1,.32,1); }
.actionBtn24-wrap .actionBtn24:hover::before {opacity: 1;  background-color: #6ABA50;}


/* .actionBtn24-wrap.white .ele-box {background-color:#fff;} */
.actionBtn24-wrap.white .actionBtn24 .ele-box .lb-top .txt {color: #fff;}
.actionBtn24-wrap.white .actionBtn24 .ele-box .lb-bot .txt {color: #fff;}
.actionBtn24-wrap.white .actionBtn24 .ele-box .dot {background-color: #fff;}
.actionBtn24-wrap.white .mid-line {background-color: #fff;}

/*텍스트 두줄*/
.two-line{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.one-line {
  display:inline-block;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.dm-serif {
  font-family: "DM Serif Text", serif;
  font-style: normal;
  font-weight: 400;
}


.overflow-hidden {overflow: hidden;}

/* 폰트 */
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.reveal {position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; visibility: hidden; overflow: hidden; } 
.reveal img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform-origin: left; transform-origin: left; } 
.gap-2 {gap:2rem;}

.flex {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex-start {justify-content: flex-start; }
.flex-end {justify-content: flex-end; }
.stretch {align-items: stretch;}
.space-between {justify-content: space-between;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}

/* 1등분 (전체 폭) */
.flex-1ea .content { flex: 0 0 100%; max-width: 100%;}
/* .flex-2ea {gap:2rem;} */
.flex-2ea .content { flex: 0 0 calc((100% - (2rem * 1)) / 2);max-width: calc((100% - (2rem * 1)) / 2);}
.flex-3ea .content { flex: 0 0 calc((100% - (2rem * 2)) / 3);max-width: calc((100% - (2rem * 2)) / 3);}
.flex-4ea .content { flex: 0 0 calc((100% - (2rem * 3)) / 4);max-width: calc((100% - (2rem * 3)) / 4);}
.flex-5ea .content { flex: 0 0 calc((100% - (2rem * 4)) / 5); max-width: calc((100% - (2rem * 4)) / 5);}
.flex-6ea .content {flex: 0 0 calc((100% - (2rem * 5)) / 6);max-width: calc((100% - (2rem * 5)) / 6);}
.flex-7ea .content { flex: 0 0 calc((100% - (2rem * 6)) / 7); max-width: calc((100% - (2rem * 6)) / 7);}
.content {overflow: hidden;}

.mb-10 {margin-bottom: 1rem;}
.mb-20 {margin-bottom: 2rem;}
.mb-30 {margin-bottom: 3rem;}
.mb-40 {margin-bottom: 4rem;}
.mb-50 {margin-bottom: 5rem;}
.mb-60 {margin-bottom: 6rem;}
.mb-70 {margin-bottom: 7rem;}
.pd-10 {padding:1rem;}
.pd-t-50 {padding-top:5rem;}
.pd-t-100 {padding-top:10rem;}
.pd-t-200 {padding-top:20rem;}
.pd-b-50 {padding-bottom:5rem;}
.pd-b-100 {padding-bottom:10rem;}
.pd-b-200 {padding-bottom:20rem;}
.pd-20 {padding:2rem;}
.br-15 {border-radius: 1.5rem; overflow: hidden;}
.gray {color:#999;}
a {color:#999;}
/* a:hover {text-decoration: underline;} */

.t-center {text-align: center;}
.l-center {text-align: left;}
.t-right{text-align: right;}
.img-100 {width: 100%; object-fit: cover;}

.glass {overflow: hidden; border-radius: 1.5rem; bottom:0; z-index: 1; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px);   -webkit-backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);  /* Safari 지원용 */   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);}
.glass::before {content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* 테두리 두께 */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;}

  h1,h2,h3,h4,h5,h6 {line-height: 1.4;}


ul.pure-ul {
  list-style-type: disc !important;      /* 원형 불릿 */
  list-style-position: outside !important; /* 텍스트 바깥에 불릿 */
  padding-left: 2rem;             /* reset된 경우에 맞춰 조정 */
}

.weight-100 {font-weight: 100;}
.weight-200 {font-weight: 200;}
.weight-300 {font-weight: 300;}
.weight-400 {font-weight: 400;}
.weight-500 {font-weight: 500;}
.weight-600 {font-weight: 600;}
.weight-700 {font-weight: 700;}
.weight-800 {font-weight: 800;}
.weight-900 {font-weight: 900;}

/*폰트 사이즈 선언*/
.ft-10 { font-size: 1rem; }
.ft-11 { font-size: 1.1rem; }
.ft-12 { font-size: 1.2rem; }
.ft-13 { font-size: 1.3rem; }
.ft-14 { font-size: 1.4rem; }
.ft-15 { font-size: 1.5rem; }
.ft-16 { font-size: 1.6rem; }
.ft-17 { font-size: 1.7rem; }
.ft-18 { font-size: 1.8rem; }
.ft-19 { font-size: 1.9rem; }
.ft-20 { font-size: 2rem; }
.ft-21 { font-size: 2.1rem; }
.ft-22 { font-size: 2.2rem; }
.ft-23 { font-size: 2.3rem; }
.ft-24 { font-size: 2.4rem; }
.ft-25 { font-size: 2.5rem; }
.ft-26 { font-size: 2.6rem; }
.ft-27 { font-size: 2.7rem; }
.ft-28 { font-size: 2.8rem; }
.ft-29 { font-size: 2.9rem; }
.ft-30 { font-size: 3rem; }
.ft-31 { font-size: 3.1rem; }
.ft-32 { font-size: 3.2rem; }
.ft-33 { font-size: 3.3rem; }
.ft-34 { font-size: 3.4rem; }
.ft-35 { font-size: 3.5rem; }
.ft-36 { font-size: 3.6rem; }
.ft-37 { font-size: 3.7rem; }
.ft-38 { font-size: 3.8rem; }
.ft-39 { font-size: 3.9rem; }
.ft-40 { font-size: 4rem; }
.ft-41 { font-size: 4.1rem; }
.ft-42 { font-size: 4.2rem; }
.ft-43 { font-size: 4.3rem; }
.ft-44 { font-size: 4.4rem; }
.ft-45 { font-size: 4.5rem; }
.ft-46 { font-size: 4.6rem; }
.ft-47 { font-size: 4.7rem; }
.ft-48 { font-size: 4.8rem; }
.ft-49 { font-size: 4.9rem; }
.ft-50 { font-size: 5rem; }
.ft-51 { font-size: 5.1rem; }
.ft-52 { font-size: 5.2rem; }
.ft-53 { font-size: 5.3rem; }
.ft-54 { font-size: 5.4rem; }
.ft-55 { font-size: 5.5rem; }
.ft-56 { font-size: 5.6rem; }
.ft-57 { font-size: 5.7rem; }
.ft-58 { font-size: 5.8rem; }
.ft-59 { font-size: 5.9rem; }
.ft-60 { font-size: 6rem; }
.ft-61 { font-size: 6.1rem; }
.ft-62 { font-size: 6.2rem; }
.ft-63 { font-size: 6.3rem; }
.ft-64 { font-size: 6.4rem; }
.ft-65 { font-size: 6.5rem; }
.ft-66 { font-size: 6.6rem; }
.ft-67 { font-size: 6.7rem; }
.ft-68 { font-size: 6.8rem; }
.ft-69 { font-size: 6.9rem; }
.ft-70 { font-size: 7rem; }
.ft-71 { font-size: 7.1rem; }
.ft-72 { font-size: 7.2rem; }
.ft-73 { font-size: 7.3rem; }
.ft-74 { font-size: 7.4rem; }
.ft-75 { font-size: 7.5rem; }
.ft-76 { font-size: 7.6rem; }
.ft-77 { font-size: 7.7rem; }
.ft-78 { font-size: 7.8rem; }
.ft-79 { font-size: 7.9rem; }
.ft-80 { font-size: 8rem; }
.ft-81 { font-size: 8.1rem; }
.ft-82 { font-size: 8.2rem; }
.ft-83 { font-size: 8.3rem; }
.ft-84 { font-size: 8.4rem; }
.ft-85 { font-size: 8.5rem; }
.ft-86 { font-size: 8.6rem; }
.ft-87 { font-size: 8.7rem; }
.ft-88 { font-size: 8.8rem; }
.ft-89 { font-size: 8.9rem; }
.ft-90 { font-size: 9rem; }
.ft-91 { font-size: 9.1rem; }
.ft-92 { font-size: 9.2rem; }
.ft-93 { font-size: 9.3rem; }
.ft-94 { font-size: 9.4rem; }
.ft-95 { font-size: 9.5rem; }
.ft-96 { font-size: 9.6rem; }
.ft-97 { font-size: 9.7rem; }
.ft-98 { font-size: 9.8rem; }
.ft-99 { font-size: 9.9rem; }
.ft-100 { font-size: 10rem; }
.ft-150 { font-size: 15rem; }

/* 햄버거 메뉴*/
.hamburger {width: 5rem; height: 8rem; display: flex; justify-content: center; align-items:center; cursor: pointer;}
.hamburger:hover {opacity: 0.7; transition: all 0.4s;}
header.activated .hamburger .navBtn4 .bar {background-color: #000;}
header.activated_02 .hamburger .navBtn4 .bar {background-color: #000;}
.navBtn4 { position: relative; display: block; width: 5rem; height: 8rem; height: 3rem;  text-align: center; cursor: pointer; z-index: 999;}
.navBtn4 .bar { display: block; position: absolute; top: 0; left: 0; width: inherit; height: 3px; background: #fff; transition: all .325s ease-in-out; -webkit-transition: all .325s ease-in-out; -moz-transition: all .325s ease-in-out;  z-index: 10;}
.navBtn4 .bar:nth-child(1) { top: 0.5rem; left: 0; margin-left:2.5rem;  width:2.5rem;}
.navBtn4 .bar:nth-child(2) { top: 1.5rem; }
.navBtn4 .bar:nth-child(3) { top: 2.5rem; width:2.5rem; }
.navBtn4.is-open .bar {background-color: #fff;}
.navBtn4.is-open .bar:nth-child(1) { left: 40px; opacity: 0; }
.navBtn4.is-open .bar:nth-child(2) { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }
.navBtn4.is-open .bar:nth-child(3) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); }
.navBtn4.is-open .bar:nth-child(4) { left: -40px; opacity: 0;}

/*페이지네이션 */
.pagination-wrap {  width: 100%;display: flex; justify-content: space-between; align-items: center;padding: 20px 0;}

.pagination { display: flex; gap: 6px;}

.page-btn {z-index: 2; width:4rem; height:4rem;  background: #121212;  border-radius: 6px; cursor: pointer; font-size: 1.6rem; transition: 0.2s; color:#fff; border:1px solid #fff;}
.page-btn:hover {background:rgba(34, 40, 141,0.3)}

.page-btn.active {background: #6ABA50; color: #fff; border:1px solid #6ABA50;}
.page-btn.btn-active {background: #6ABA50; color: #fff; border:1px solid #6ABA50; }
.page-btn.next {
    padding: 6px 10px;
}

.page-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    display: none;
}

.page-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height:4rem;
    border: 1px solid #777;
    border-radius: 6px;
}

#totalPage {width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center;}

.ani_line_wrap{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;  }
.ani_line_wrap span{position: absolute; background: rgba(255,255,255,0.7); transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.ani_line_wrap span.al_top{transition: 0.5s; width: 0%; height: 1px; right: 0; top: 0;}
.ani_line_wrap span.al_right{transition: 0.6s; width: 1px; height: 0%; right: 0; top: 0;}
.ani_line_wrap span.al_bottom{transition: 0.7s; width: 0%; height: 1px; left: 0; bottom: 0;}
.ani_line_wrap span.al_left{transition: 0.8s; width: 1px; height: 0%; left: 0; top: 0;}

.line-animation:hover .ani_line_wrap span.al_top{width: 100%;}
.line-animation:hover .ani_line_wrap span.al_right{height: 100%;}
.line-animation:hover .ani_line_wrap span.al_bottom{width: 100%;}
.line-animation:hover .ani_line_wrap span.al_left{height: 100%;}


/* .cursor-mouse {
  position: fixed;
  top: -25rem;
  left: -25rem;
  width: 50rem;
  height: 50rem;
  background: rgba(21, 27,124, 0.4);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(50%, 50%);
  transition: transform 0.1s ease-out;
  filter: blur(200px);
  z-index : -1;
} */