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

html {letter-spacing: -0.5px; font-size:62.5%; font-display: swap; scroll-snap-type: y mandatory; /* 부모 적용 */}
.aos-wrap {overflow: hidden; position: relative;}
.boundary {width:100%; max-width: 1740px; margin: 0 auto;}
.boundary-1280 {width:100%; max-width: 1280px; margin: 0 auto; padding-left:1.6rem; padding-right:1.6rem;}
.inner_boundary {width:100%; max-width: 1560px; margin: 0 auto;}
.sub_inner_boundary {width:100%; max-width: 1440px; margin: 0 auto;}
.play {font-family: "Play";}
#overflow-hidden {overflow: hidden;}

.gray-bg {background-color:#F7F7F7; padding-top:10rem; padding-bottom:10rem;}
.blue-bg {background-color:#031543; padding-top:10rem; padding-bottom:10rem; color:#fff;}


.site-map-wraps {width:100%; height:100vh; position: fixed; top:0; left:0; z-index: -1; display: flex; visibility: hidden; opacity: 0; justify-content: center; align-items: center; flex-wrap: wrap;}
.site-map-wraps>.img-wrap {width: 30%; flex-basis: 30%; max-width: 30%; position: relative; height: 100%;}
.site-map-wraps>.img-wrap::before {content:""; position: absolute; top:0; right:0; width: 100%; height: 100%; background-color:#fff; transition: all 1.2s; z-index: 1; }
.site-map-wraps>.img-wrap>img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%;}
.site-map-wraps>ul {width:70%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height:100%;}
.site-map-wraps>ul>li{ overflow: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-basis: 25%; max-width: 25%; height:100%; padding:3rem; border-right:1px solid #ddd; position: relative;}
.site-map-wraps>ul>li::before {content:""; position: absolute; top:0; left:0; width: 0%; height: 100%; background-color:#ffffff; transition: all 1.2s; z-index: 1; }
.site-map-wraps>ul>li:nth-child(1)::before {transition: all 1.2s;}
.site-map-wraps>ul>li:nth-child(2)::before {transition: all 1.2s;}
.site-map-wraps>ul>li:nth-child(3)::before {transition: all 1.2s;}
.site-map-wraps>ul>li:nth-child(4)::before {transition: all 1.2s;}
.site-map-wraps>ul>li:nth-child(5)::before {transition: all 1.2s;}
.site-map-wraps>ul>li:hover::before {background-position: right bottom; opacity: 1;}
.site-map-wraps>ul>li>ul {width:100%;}
.site-map-wraps>ul>li>ul>.menu-name {font-size:2.4rem; font-weight: bold; padding:1rem; position: relative; z-index: 1; font-weight: 900;}
.site-map-wraps>ul>li>ul>.menu-name>h3 {border-bottom:2px solid #000000; line-height: 2;}
.site-map-wraps>ul>li>ul>li {position: relative; overflow: hidden;}
.site-map-wraps>ul>li>ul>li>a {font-size:1.8rem; line-height:1; font-weight: 600; padding:2rem 1.6rem; position: relative; width: 100%; z-index: 1; transition: all 0.4s;}
.site-map-wraps>ul>li>ul>li>a::before {content:''; position: absolute; top:0; left:-100%; background-color:#0C3190; color:#fff; width: 100%; height: 100%; z-index: -1; transition: all 0.8s;}
.site-map-wraps>ul>li>ul>li:hover>a {color:#fff;}
.site-map-wraps>ul>li>ul>li:hover>a::before {left:0;}
.site-map-wraps>ul>li>ul>li:hover>a>span {position: relative; z-index: 1; color:#fff;}
.site-map-wraps>ul>li>ul>li>a>span {font-size:1.4rem;font-weight: 300; margin-top:0.3rem; transition: all 0.4s;}

.site-map-wraps .close-btn {position: fixed; top: 0; right:0; width:8.8rem; height:8rem; background-color:black; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; cursor: pointer; z-index: 3;}
.site-map-wraps .close-btn>img {max-width: 5rem; transition: all 0.4s; display: block; width:5rem; height:5rem;}
.site-map-wraps .close-btn:hover {background-color:#1E3786;}
.site-map-wraps .close-btn:hover>img {transform: rotate(180deg);}


.site-map-wraps.on {visibility: visible; opacity: 1; z-index: 999; background-color:#000; }
.site-map-wraps.on>.img-wrap::before {width: 0%;}
.site-map-wraps.on>ul>li::before  {width: 100%;}




/*header*/
header {width:100%; position: fixed;  top:0; left:0; z-index: 999; height: 8rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; transition: all 0.4s cubic-bezier(.23,1,.32,1); background-color:#fff;}
header::after {content:''; position: absolute; bottom:0; left:0; width:100%; height:1px; background-color:#dddddd;}

header.shadow {box-shadow: 0 5px 14px 0 rgba(61,82,96,0.1);}
header.activated {background-color:#ffffff; transition: all 0.4s;}
header.activated>div>.boundary>.menu-wrap>ul>li {color:#333333;}
header.activated>div>.boundary>.menu-wrap>ul>li>a {color:#333333;}
header.activated>div>.boundary>.logo-wrap>a>img:last-child {display: block;}
header.activated>div>.boundary>.logo-wrap>a>img:first-child {display: none;}

header.activated>.bound>.boundary>.logo-wrap>.lang-wrap>li {color:rgba(255,255,255,0.4);}
header.activated>.bound>.boundary>.logo-wrap>.lang-wrap>li.active {color:#fff;}
header.activated.mini>div>.boundary>.logo-wrap>a>img:last-child {display: block;}
header.activated.mini>div>.boundary>.logo-wrap>a>img:first-child {display: none;}
/* header.activated.mini>div>.boundary>.menu-wrap>ul>.pd>span>img {filter:brightness(1000);} */
header>.bound {width:100%; height:8rem; max-width: 100%; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; transition: all 0.2s; z-index: 2; background-color: #fff;}
/* header>.bound::before {content:''; position: absolute; top:0; right:0; width:20rem; height:100%; border-radius: 0 0 0 10rem; background-color:#1E3786; transition: all 0.2s;} */
header.mini {height:8rem; border-bottom:1px solid rgba(0,0,0,0.1);}
header.mini>div {height:8rem;}
header.mini>div>.boundary>.logo-wrap {transition: all 0.4s;}
header.mini>div>.boundary>.logo-wrap>.lang-wrap {display: none;}
/* header.mini>div>.boundary>.logo-wrap>a {padding-top:2rem;} */
/* header.mini>div>.boundary>.logo-wrap>a>img:last-child {display: none;} */
header.mini>div>.boundary>.menu-wrap>ul>li {margin-top:0;}

header>.bound>.boundary {width:100%; height: 100%; padding-right:10rem; max-width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; padding-left:8rem; padding-right:8rem;}
header>.bound>.boundary>.logo-wrap {display: flex; justify-content: flex-start; align-items: center; }
header>.bound>.boundary>.logo-wrap>a {padding:0; display: flex; justify-content: flex-start; align-items: center; width: 100%;}
header>.bound>.boundary>.logo-wrap>a>img {width: 100%; max-width: 15.3rem;}
header>.bound>.boundary>.logo-wrap>a>img:last-child {display: none;}
header>.bound>.boundary>.logo-wrap>.lang-wrap {width:100%; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top:1rem; transition: all 0.4s;}
header>.bound>.boundary>.logo-wrap>.lang-wrap>li {font-size:1.4rem; font-family: "Play"; font-weight: bold; color:rgba(0,0,0,0.3); cursor: pointer; padding-left:1rem; padding-right:1rem; border-right:1px solid rgba(0,0,0,0.1);}
header>.bound>.boundary>.logo-wrap>.lang-wrap>li.active {color:rgba(0,0,0,1);}
header>.bound>.boundary>.logo-wrap>.lang-wrap>li:last-child {border-right:1px solid rgba(0,0,0,0);}
header>.bound>.boundary>.menu-wrap {width:100%; max-width: 40%; flex-basis: 40%; height: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); transition: all 0.8s cubic-bezier(.23,1,.32,1);}
header>.bound>.boundary>.menu-wrap>ul {display: flex; justify-content: flex-start; height: 100%; align-items: center; flex-wrap: wrap; width: 100%;}
header>.bound>.boundary>.menu-wrap>ul>li {font-size: 1.8rem; display: flex; justify-content: center; align-items: center;  font-weight: bold; color:#000000; padding:2rem 3rem;  position: relative; flex-basis: 25%; max-width: 25%; text-align: center; height: 100%;} 
header>.bound>.boundary>.menu-wrap>ul>li.on::before {width: 50%;}
header>.bound>.boundary>.menu-wrap>ul>li.on::after {width: 50%;}
header>.bound>.boundary>.menu-wrap>ul>li.on>a {color:#E4A01C;}


header>.bound>.boundary>.menu-wrap.on {max-width: 50%; max-width: 50%; }


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


header>.bound>.boundary>.menu-wrap>ul>li.active {text-decoration: underline;}
header>.bound>.boundary>.menu-wrap>ul>li>a {color:#000000; text-align: center; white-space: nowrap;}
header>.bound>.boundary>.menu-wrap>ul>li:hover>a {opacity: 0.7;}
header>.bound>.boundary>.menu-wrap>ul>li.shop>a {color:#E4A01C; padding: 0.3rem 2rem; border:1px solid #E4A01C; border-radius: 10rem;}
header.mini.activated>div>.boundary>.menu-wrap>ul>li.shop:hover a {background-color:#E4A01C; color:black; opacity: 1;}
header>.bound>.boundary>.menu-wrap>ul>li.shop:hover a {background-color:#E4A01C; color:#fff; opacity: 1;}
header>.bound>.boundary>.menu-wrap>ul>li>span {display: inline-block; position: relative; top:-0.25rem; left:0.5rem;}

header>.bound>.boundary>.menu-wrap>ul>li>.sub-menu {position: absolute; top:8rem;  color:#333333; width: 100%; padding-top:0; padding-bottom:0; visibility: hidden;  opacity: 0;  text-align: center; padding-bottom:0.8rem; padding-top:0.8rem;} 
header>.bound>.boundary>.menu-wrap>ul>li>.sub-menu.show {visibility: visible; opacity: 1;}
header>.bound>.boundary>.menu-wrap>ul>li>.sub-menu>li {width:100%; text-align: left; border-left:1px solid rgba(0,0,0,0.1);}
header>.bound>.boundary>.menu-wrap>ul>li>.sub-menu>li>a {font-size:1.6rem; padding:1.2rem; color:rgba(0,0,0,0.5); text-align: center; white-space: nowrap;}
header>.bound>.boundary>.menu-wrap>ul>li>.sub-menu>li>a:hover {color:#333333; text-decoration: underline;}
header>.bound>.boundary>.menu-wrap>ul>li:last-child>.sub-menu>li {border-right:1px solid rgba(0,0,0,0.1);}


header>.bound>.boundary>.etc-wrap {display: flex; justify-content: flex-end; align-items: center; padding-right:5rem;}
header>.bound>.boundary>.etc-wrap>ul {display: flex; justify-content: flex-end; align-items: center;}
header>.bound>.boundary>.etc-wrap>ul>li.contact-us>a {padding:1rem 2rem; background-color:#E7EBF4; color:#0C3190; font-size:1.4rem; font-weight: bold; border-radius: 3rem; font-weight: bold;  transition: all 0.4s cubic-bezier(.23,1,.32,1);}
header>.bound>.boundary>.etc-wrap>ul>li.contact-us>a:hover {background-color:#0C3190; color:#fff;}
header>.bound>.boundary>.etc-wrap>ul>li.lang {display: flex; justify-content: space-between; align-items: center; background-color:#eeeeee; padding:1rem 2rem; border-radius: 3rem; font-size:1.4rem; font-weight: bold; margin-right:1rem; position: relative; cursor: pointer;}
/* header>.bound>.boundary>.etc-wrap>ul>li.lang:hover {background-color:#000000; color:#fff;} */
/* header>.bound>.boundary>.etc-wrap>ul>li.lang:hover img {filter: brightness(1000);} */
header>.bound>.boundary>.etc-wrap>ul>li.lang>p {display: flex; justify-content: space-between; align-items: center;}
header>.bound>.boundary>.etc-wrap>ul>li.lang>p>img:first-child {margin-right:0.5rem;}
header>.bound>.boundary>.etc-wrap>ul>li.lang>p>img:last-child {margin-left:0.5rem;}
header>.bound>.boundary>.etc-wrap>ul>li.lang>ul{position: absolute; top:4.4rem; width: 100%; left:0; text-align: center;  border-radius: 1rem; overflow: hidden; transition: all 0.4s cubic-bezier(.23,1,.32,1); opacity: 0; visibility: hidden;}
header>.bound>.boundary>.etc-wrap>ul>li.lang>ul>li {padding:0.5rem; background-color:#efefef; }
header>.bound>.boundary>.etc-wrap>ul>li.lang.on {background-color:#000000; color:#fff;}
header>.bound>.boundary>.etc-wrap>ul>li.lang.on img {filter: brightness(1000);}
header>.bound>.boundary>.etc-wrap>ul>li.lang.on>ul { visibility: visible; opacity: 1; top:4.4rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
header>.bound>.boundary>.etc-wrap>ul>li.lang.on>ul>li.active {color:#ffff; font-weight: bold; background-color:#000000;}
header>.bound>.boundary>.etc-wrap>ul>li.lang.on>ul>li {color:#000000;}
header>.bound>.boundary>.etc-wrap>ul>li.lang.on>ul>li:hover {text-decoration: underline;}

.white-bg {width: 100%; position: fixed; top:0; left:0; height: 0; background: #efefef; box-shadow: rgba(50, 50, 93, 0.10) 0px 13px 27px -5px, rgba(0, 0, 0, 0.15) 0px 8px 16px -8px; z-index: 1;}
.white-bg.on {height: 29.4rem; background: #efefef;}
.black-bg {position: fixed; top:0; left:0;  width: 100%; height: 100%; background-color:rgba(0,0,0,0.5); z-index: 3; visibility: hidden; opacity: 0; }
.black-bg.on {opacity: 1; visibility: visible;}

.site-map {font-size:1.4rem; font-weight: bold; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color:#fff; position: absolute; right:0; cursor: pointer; transition: all 0.4s; background-color:#0C3190; height: 100%; width: 8rem; text-align: center; z-index: 2; }
.site-map>p {position: relative;}
.site-map>p::before {content:''; position: absolute; width: 100%; height:1px; top:0; left:0; background-color:#fff;}
.site-map>p::after {content:''; position: absolute; width: 100%; height:1px; bottom:0; left:0; background-color:#fff;}
.site-map:hover {opacity: 0.7;}
.site-map>.ham-bar {margin-left:2rem; margin-top:0.2rem;}
.site-map>.ham-bar>li {width:2rem; height:2px; background-color:#333333; margin-bottom:0.3rem;}

body {font-family:'Pretendard', 'sans-serif'; font-weight:400; color:#333333; line-height:1.6; position:relative; padding-top:0; width:100%; max-width:100%; font-size: 62.5% !important;}

/*드래그 색상*/
::selection {color:#fff; background:darkblue;}

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

.red {color:red;}
.blue {color:#223F99;}

.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;}


/*탭 스타일*/

.tab-wrap {width:100%; display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; max-width:1400px; margin:0 auto;}
.tab-wrap .tab {background-color:#fafafa; flex-basis: 100%; max-width:100%; padding:15px 20px; 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 {color:#fff; background-color:#004272;}



/* 체크 */
.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; }

.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%;}
.space-between {justify-content: space-between;}



.flex_2ea {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width:100%;}
.flex_2ea .content {flex-basis: 49%; max-width:49%;}

.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%;}

::-webkit-scrollbar { -webkit-appearance: none; transition: all 1.5; } 
::-webkit-scrollbar:vertical { width: 8px;transition: all 1.5; } 
::-webkit-scrollbar:horizontal { height: 8px; transition: all 1.5;} 
::-webkit-scrollbar-thumb { background-color: #03123A; border-radius: 0; border: 0px solid #ffffff; transition: all 1.5;} 
::-webkit-scrollbar-track { border-radius: 0; background-color: #ffffff;transition: all 1.5; }



.top-btn {width:65px; height: 65px; background-color:#E4A01C; color:#fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-size:1.4rem; position: fixed; bottom:3rem; right: 3rem; z-index: 99; cursor: pointer; text-align: center; line-height: 1.2;}
.top-btn img {transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.top-btn:hover img {transform: translateY(-3px); }



  .scroller {
	max-width: 100%;
  }
  
  .scroller__inner {
	padding-block: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
  }
  
  .scroller[data-animated="true"] {
	overflow: hidden;
	-webkit-mask: linear-gradient(
	  90deg,
	  transparent,
	  white 20%,
	  white 80%,
	  transparent
	);
	mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
	width: max-content;
	flex-wrap: nowrap;
	animation: scroll var(--_animation-duration, 40s)
	  var(--_animation-direction, forwards) linear infinite;
  }
  
  .scroller[data-direction="right"] {
	--_animation-direction: reverse;
  }
  
  .scroller[data-direction="left"] {
	--_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
	--_animation-duration: 20s;
  }
  
  .scroller[data-speed="slow"] {
	--_animation-duration: 60s;
  }

  .scroller>.scroller__inner>img {padding:1.5rem 3rem; background-color: #fff; position: relative; border-radius: 0.5rem; border:1px solid rgba(0,0,0,0.05);;}
  
  @keyframes scroll {
	to {
	  transform: translate(calc(-50% - 0.5rem));
	}
  }
  
  /* general styles */
  
  :root {
	--clr-neutral-100: hsl(0, 0%, 100%);
	--clr-primary-100: hsl(205, 15%, 58%);
	--clr-primary-400: hsl(215, 25%, 27%);
	--clr-primary-800: hsl(217, 33%, 17%);
	--clr-primary-900: hsl(218, 33%, 9%);
  }