@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'HambakSnow';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    font-family: "Pretendard";
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}
i {
    width:100%;
    text-align: left;
}
paper_bg {
    background-color: #ddd;
}
ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

.wbox {
    background-color: #fdfdfd;
    margin: 0 0 2.2em 0;
    padding:0em;
    display: inline-table;
    border-top: 0px solid #fff;
    border-bottom: 0px solid #ddd;
    border-radius: 13px;
    box-shadow: 0 7px 10px rgb(124 45 0 / 9%);
}
.wbox_header {
    /* background-color: #ffe048; */
    background-image: linear-gradient(160deg, #fec53f, #ffe048);
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    overflow: hidden;
    margin: 0;
    padding:1.2em 1.6em 0.9em 1.6em;
    text-shadow: 0 1px 9px rgb(191 105 0 / 79%);
}

.wbox_contents {
    margin:2.6em;
    border-bottom:0px solid #ffde47;
}
@media screen and (max-width: 980px) {
    .wbox_contents {
    margin:2em 1.4em;
    border-bottom:0px solid #ffde47;
    }
}
@media screen and (max-width: 1024px) {
    .wbox_contents {
    margin:2em 1.4em;
    border-bottom:0px solid #ffde47;
    }
}


.wbox_banner {
    width:100%; 40em;
    min-height: 18em;
    padding-top: 4em;
    margin-bottom: 0.7em;

}
.wbox a{
    font-size: 1.2em;
    color:#FFF;
    font-weight: 400;
    padding:4px 12px;
    line-height: 2.25em;
    border-radius: 17px;
    background-color: rgb(0 0 0 / 37%);
}

.wbox2 {
    background-color: #fdfdfd;
    width:100%;
    margin-top: 2.4em;
    padding:0em;
    display: inline-table;
    border-top: 0px solid #fff;
    border-bottom: 0px solid #ddd;
    border-radius: 13px;
    box-shadow: 0 7px 10px rgb(124 45 0 / 9%);
}

@media (max-width: 768px) {
        .wbox2 {
            margin: 0;
        }
}
.wbox2_header {
    /* background-color: #ffe048; */
    background-image: linear-gradient(160deg, #03bdc4, #ffe048);
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    overflow: hidden;
    margin: 0;
    padding:1.2em 1.6em 0.9em 1.6em;
    text-shadow: 0 1px 9px rgb(191 105 0 / 79%);
}
.wbox2_contents {
    margin-bottom: 1em;
    padding:2.1em;
}
.wbox2_banner {
    width:100%; 40em;
    min-height: 19em;
    padding-top: 17%;
    margin-bottom: 1em; 
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.4)), url(../../images/01about-01_001.png); 
    background-size: cover;
    background-position: 36%;
}
.wbox2_contents a{
    font-size: 1.2em;
    color:#FFF;
    font-weight: 400;
    padding:4px 12px;
    line-height: 2.25em;
    border-radius: 17px;
    background-color: #cfcfcf;
}
/* 모바일에서만 보이는 최상단 바로가기 메뉴 */
.boxmenu {
  flex: 1; /* 동일한 비율로 가로폭 나눔 */
   width: calc((100% - 16px) / 3);
 font-size: 12px;
    letter-spacing: 0;
  font-weight: 400;
    color:#111;
  border:1px solid #FFD100;
  padding: 12px;
  text-align: center;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;  /* 세로 방향 하단 정렬 */
  justify-content: center; /* 가로 가운데 정렬 (옵션) */
}


.fa, .fas {
    text-align: left;
    font-weight: 900;
    line-height: 1.5;
    white-space: nowrap;
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-highlight {
  display: grid;
  justify-items: center;
  z-index: 1000;
  color: transparent;
  background-image: linear-gradient(150deg, #03bdc4, #1362c9, #ff63af, #ffdd48);
  background-clip: text;
  -webkit-background-clip: text;
  /* 이전텍스트컬러 #149F73 */
  font-family:"Pretendard";
  font-size: 34px;
  line-height: 1.4;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.03em;
  /* --- 그림자 효과 감춤
  text-shadow: 0px 2px 4px rgb(92 44 0 / 0%), 0px -1.5px 2.5px #FFF;
  --- */
  padding:0.1em 0 0.22em 0;
  margin-bottom: 0.75em;
  border-bottom: 0px solid #03022a;
}

@media screen and (max-width: 980px) {
    .text-highlight {
        text-align: center;
    }
}

.text-highlight2 {
  font-family:'Pretendard';
  display: grid;
  z-index: 1000;
    white-space: nowrap;
    display: inline-block;
  color: transparent;
  background-image: linear-gradient(150deg, #03bdc4, #fec941, #ff63af, #ffdd48);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 34px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding:0 0 0.6em 0;
}
@media screen and (max-width: 980px) {
    .text-highlight2 {
        font-size: 1.33em;
        text-align: left;
        letter-spacing: 0.1px;
    }
}

.text-highlight3 {
  display: grid;
  justify-items: center;
  z-index: 100;
  color: #03022a;
  font-family: "Black Han Sans", "Pretendard";
  font-size: 33px;
  line-height: 1.2em;
  font-style: normal;
  letter-spacing: 0.16em;
  padding:0;
  margin: -1.3em 0 0.7em 0;
  border-bottom: 1px solid #03022a;
}
@media screen and (max-width: 980px) {
    .text-highlight3 {
        text-align: center;
    }
}
.text-highlight_h {
  display: grid;
  color: #021c2b;
  font-family: "Black Han Sans", "Pretendard";
  font-size: 2.3em;
  line-height: 1.3em;
  font-style: normal;
  letter-spacing: 0.08em;
  margin:0.3em 0 0em 0;
  border-top: 0px solid #ffd300;
}
.text-highlight_w {
  display: grid;
  color: #fff;
   font-family:"Pretendard";
  text-shadow: 1px 3px 15px rgba(0, 0, 0, 0.9);
  font-size: 2.8em;
  line-height: 1.4em;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  border-top: 0px solid #ffd300;
}
@media (max-width: 980px) {
    .text-highlight_w {
        display: grid;
        color: #fff;
        font-family: "Pretendard";
        text-shadow: 0px 3px 15px rgba(0, 0, 0, 0.9);
        font-size: 23px;
        font-weight: 400;
        line-height: 1.7em;
        font-style: normal;
        letter-spacing: 0.03em;
        margin-top: 0.3em;
        border-top: 0px solid #ffd300;
    }
}
.text-highlight_w2 {
  display: grid;
  color: #fff;
   font-family: "Gowun Batang", "Pretendard";
  text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.9);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.4em;
  font-style: normal;
  letter-spacing: 0.08em;
  border-top: 0px solid #ffd300;
}
@media (max-width: 980px) {
    .text-highlight_w2 {
      display: grid;
      color: #fff;
       font-family: "Gowun Batang", "Pretendard";
      text-shadow: 1px 3px 15px rgba(0, 0, 0, 0.9);
      font-size: 20px;
      line-height: 1.3em;
      font-style: normal;
      letter-spacing: 0.02em;
      margin-top: 1.3em;
      border-top: 0px solid #ffd300;
    }
}
.text-highlight_w3 {
  display: grid;
  color: #fff;
  font-family: "Pretendard";
  text-shadow: 1px 3px 15px rgba(0, 0, 0, 0.9);
  font-size: 1.9em;
  font-weight: 500;
  line-height: 1.4em;
  font-style: normal;
  letter-spacing: 0.08em;
  padding-top: 1px;
  border-top: 0px solid #ffd300;
}
@media (max-width: 980px) {
    .text-highlight_w3 {
      display: grid;
      color: #fff;
       font-family:"Pretendard";
      text-shadow: 1px 3px 15px rgba(0, 0, 0, 0.9);
      font-size: 1.4em;
      line-height: 1.3em;
      font-style: normal;
      font-weight: 600;
      padding:0;
    }
}
.text-highlight_s {
  color: #021c2b;
  font-family: "Nanum Gothic", "Pretendard";
  font-size: 1.4em;
  font-weight: 800;
  line-height: 1.3em;
  font-style: normal;
  letter-spacing: 0.08em;
  margin-bottom: 0.7em;
  border-bottom: 0px solid #ffd300;
}
.text-highlight_sc {
  color: transparent;
  background-image: linear-gradient(150deg, #03bdc4, #1362c9, #ff63af, #ffdd48);
  background-clip: text;
  font-family: "Nanum Gothic", "Pretendard";
  font-size: 1.4em;
  font-weight: 800;
  line-height: 1.3em;
  font-style: normal;
  letter-spacing: 0.08em;
  margin-bottom: 0.7em;
  border-bottom: 0px solid #ffd300;
}
mark {
	background-color: transparent;
	color: inherit;
}

/* 아코디언 메뉴: 정관 관련 */
.que:first-child{
    border-top: 1px solid black;
  }
  
.que{
  position: relative;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #dddddd;
  
}

.que.on>span{
  font-weight: bold;
  color: #006633; 
}
  
.anw {
  display: none;
    overflow: hidden;
    text-align: justify;
  font-size: 14px;
    color: #111;
  background-color: #f4f4f2;
  padding: 10px 20px;
}
  
.arrow-wrap {
  position: absolute;
  top:50%; right: 18px;
  transform: translate(0, -50%);
}

.que .arrow-top {
  display: none;
}
.que .arrow-bottom {
  display: block;
}
.que.on .arrow-bottom {
  display: none;
}
.que.on .arrow-top {
  display: block; 
}


input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* 기본적으로 둘 다 숨김 */
.pc-only, .mobile-only {
    display: none;
}

/* PC 화면용 (화면 너비 1023px 이하는 감춤) */
@media (min-width: 1023px) {
    .pc-only {
        display: block;
    }
}

/* 모바일 화면용 (화면 너비 1024px 이상은 감춤) */
@media (max-width: 1024px) {
    .mobile-only {
        display: block;
    }
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	html, body {
		background: #ffd301;
	}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

	body, input, select, textarea {
		color: rgba(100, 100, 100, 0.85);
		font-family: "Pretendard";
		font-size: 13pt;
		font-weight: 100;
		line-height: 1.75em;
	}

	a {
		-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-bottom: dotted 0px;
		color: #ff831d;
		text-decoration: none;
	}

		a:hover {
			color: #f30d80 !important;
			border-bottom-color: #1362c9;
		}

	strong, b {
		font-weight: 500;
	}
    hi {
        color: transparent;
        background-image: linear-gradient(90deg, #03bdc4, #fec941, #ff63af, #ffdd48);
        background-clip: text;
        -webkit-background-clip: text;
        text-decoration: #ccc solid underline;
        text-underline-position:under;
    }

	em, i {
		font-style: italic;
	}

    p {
        font-size: 15.7px;
        line-height: 1.85em;
        font-weight: 300;
        color: #000000;
        margin: 0em 0 1em 0;
        padding: 0 16px;
        text-align: justify;
    }

	h1, h2, h3, h4, h5, h6 {
		color: #222;
		font-weight: 300;
		line-height: 1em;
		margin: 0em;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			border: 0;
		}

	h2 {
        font-family: "Dongle", "Pretendard";
        font-weight: 700;
		font-size: 2.4em;
		line-height: 1.4em;
		letter-spacing: -0.05em;
	}

	h3 {
        font-family "Noto Sans KR", "Pretendard";
		font-weight: 800;
		font-size: 1.45em;
		line-height: 1.57em;
	}

	h4 {
		font-size: 1.2em;
        color: #333;
		line-height: 1.8em;
        font-weight: 700;
        padding:0em;
	}

	h5 {
		font-size: 1em;
        color: #000000;
        margin: 0;
        top: 0;
        line-height: 1.65em;
        font-weight: 300;
        white-space:inherit;
	}

	h6 {
		font-size: 14px;
        letter-spacing: 0.025em;
		line-height: 1.82em;
        text-align: justify;
        word-break: break-all;
	}

	sub {
		font-size: 0.8em;
        letter-spacing: 0.2px;
		top: 0.2em;
	}

	sup {
		font-size: 0.5em;
		position: relative;
		top: 1em;
	}

	sut {
		font-size: 0.8em;
        font-weight: 200;
		position: relative;
		top: -0.7em;
	}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(255, 255, 255, 0.3);
		margin: 3em 0;
	}

		hr.major {
			margin: 4em 0;
		}

	blockquote {
		border-left: solid 4px rgba(255, 255, 255, 0.3);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(255, 255, 255, 0.075);
		border-radius: 4px;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}
/********* 페이지 상단 LOCATION 위치 바 *********/
.location_bar01{
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 68%, 9% 68%, 9% 70%, 5% 68%, 0 68%);  */
    width:100%;
    padding:1em 0.9em 0 0.9em;
}
@media screen and (max-width: 1280px) {
    .location_bar01{
    width:100%;
    padding:0.9em;
    }      
}


/*------- 페이지 상단 현재위치 ------*/
.location_text {
    font-family: "BlackHanSans", Helvetica, sans-serif;
    color: #ffd41d;
    text-shadow: 1px 3px 15px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 600;
    margin-top: -0.5em;
    text-align: left;
    white-space: nowrap;
}
@media screen and (max-width: 980px) {
    .location_text {
        font-family: "BlackHanSans","Pretendard";
        color: #ffd41d;
        font-size: 12px;
        font-weight: 400;
        padding-top: 7px;
        text-align: center;
        
    }
}


/****** 삼각형 산모양 span******/
.triangle{
  width: 0px;
  height: 0px;
    top:1em;
  border-bottom: 50px solid #04a585;
  border-right: 35px solid transparent;
  border-left: 35px solid  transparent;
}
.triangle2{
  width: 0px;
  height: 0px;
    top:1em;
  border-bottom: 50px solid #ffd300;
  border-right: 35px solid transparent;
  border-left: 35px solid  transparent;
}
.triangle3{
  width: 0px;
  height: 0px;
    top:1em;
  border-bottom: 50px solid #bad605;
  border-right: 35px solid transparent;
  border-left: 35px solid  transparent;
}
.mountain{
  
  clip-path: polygon(37% 45%, 59% 76%, 70% 61%, 100% 100%, 50% 100%, 0 100%);
}

/********* 프로필 카드 여러장(인터뷰) *********/
.card_slider-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin: 50px auto;
  padding: 0 20px;
}
.card_slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
    margin:0 2em
}
.card_slide {
  flex: 0 0 calc(33.33% - 20px); /* PC에서 3장 보이게 수정 */
  margin: 0 10px;
  transition: none;
  background: white;
  border: 0px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
}
@media screen and (max-width: 1023px) {
    .card_slide {
        flex: 0 0 calc(100% - 20px);
    }
}
    
.card_slide-inner {
  display: flex;
    display: inline-block;
    vertical-align: top;
    
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.card_profile {
      position:relative;
    top: 50%;
    text-align: center;
    margin-bottom:0.8em;

}
.card_profile img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 0px solid #000;
}
.card_name {
  font-weight: bold;
  margin:4px auto;
}
.card_info {
  color: gray;
  font-size: 11.5px;
    margin:-0.8em 0 0 0.6em;
}
.card_quote {
  font-size: 14.3px;
  color:#000;
  text-align: justify;
  line-height: 1.7;
  flex: 1;
}

.card_quote-icon {
  font-size: 24px;
  font-weight: bold;
  line-height: 0.9;
}
.card_end {
  display: inline-block;
  text-align: right;
}
.card_nav {
  position: absolute;
  top: 58.4%;
  transform: translateY(-50%);
  background: none; /* 배경 없앰 */
  color: #ffd301; /* 화살표 색상 - 필요시 조정 */
  border: none;
  font-size: 7rem; /* 화살표 크기 조절 */
  cursor: pointer;
  z-index: 10;
  text-shadow: 2px 1px 10px rgba(0,0,0,0.2); /* 그림자 효과 */
}
.card_prev { left: 0; margin-left:-0.35em; }
.card_next { right: 0; margin-right:-0.35em; }
@media (max-width: 1280px) {
      .card_slide-inner {
        flex-direction: column;
        text-align: center;
      }
      .card_profile img {
        width: 125px;
        height: 125px;
      }
      .card_quote {
        margin-top: 0px;
      }


}

/* 헤더 버튼 */

.header_button {
    width: 8.5em;
    height: 8.5em;
    background-color: rgb(255 211 1 / 75%);
    color: #444444;
    text-align: center;
    vertical-align: baseline;
    border: 1px solid #ffd301;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.header_button:hover{
  background-color: #FFF;
}
.header_button p, a {
    font-size: 1em;
    font-family: "Pretendard";
    color: #222;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5em;
}
@media screen and (max-width: 736px) {
    .header_button p, a {
        font-size: 1em;
        font-family: "Pretendard";
        color: #222;
        font-weight: 500;
        letter-spacing: 0.02em;
    }
}
.button1 {
    border-radius: 50%;
    color:#FFFFFF;
}
.button2 {
    border-radius: 5em;
    color:#FFFFFF;
}
.button3 {
    border-radius: 5em;
    color:#FFFFFF;
}
.button4 {
    border-radius: 5em;
    color:#FFFFFF;
}

/* 컨텐츠 카드 여러장 */

    .container_card {
      width:auto;
      max-width: max-content;
      margin: 0 auto;
      z-index: 1;
      display: grid;
      padding-bottom:0em;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-gap: 37.4px;
    }
.container_card h2 {
    color: #FFF;
    text-shadow: 0 2px 7px rgb(0 0 0 / 48%);
    line-height: 1.3em;
    letter-spacing: 2px;
    margin-left: 0px;
    }
.container_card2 {
      width:auto;
      max-width: max-content;
      margin: 0 auto;
      z-index: 1;
      display: grid;
      padding:0 36px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-gap: 24px;
    }
.container_card2 h2 {
    font-size: 3em;
    color: #333;
    text-shadow: 0 1px 5px rgb(255 250 233 / 28%);
    line-height: 1.1em;
    margin-left: 0px;
    }
        @media screen and (min-width: 768px) {
          .container_card {
            grid-template-columns: 1fr 1fr;
          }
        }

        @media screen and (min-width: 1024px) {
          .container_card {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 27.4px;
          }
        }
        @media screen and (min-width: 768px) {
          .container_card2 {
            grid-template-columns: 1fr 1fr;
            padding:0 auto;
          }
        }
        @media screen and (max-width: 768px) {
          .container_card2 {
            grid-template-columns: 1fr;
            padding:0;
          }
        }


.card {
    box-sizing: border-box;
    width: calc(80em / 3 - 31px);
    height: 21.5em;
    background-color: rgb(255 224 72);
    border: 0px solid #ffd301;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    
    padding: 1.2em 2em;
    z-index: 1;
    margin: 0px;
    flex-direction: column;
    position: relative;
    top: 0;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

@media screen and (max-width: 1024px) {
    .card {
        width: calc(70em/3 - 10px);
        height: 20.2em;
    }
}
@media screen and (max-width: 780px) {
            .card {
                width: 93%;
                margin:0 auto;
            }
}
.card article {
  padding: 1.5rem;
    border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card_image {
  padding-bottom: 50%;
  background-size: cover;
  background-position: center center;
}

.card div {
width:19.1em;
color: #ffffff;
font-size: 1.1em;
letter-spacing: 0.06em;
text-align: justify;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
line-height: 1.4em;
padding: 1px 0;
}
    @media screen and (max-width: 1024px) {
        .card p {
            bottom: 0px;
            width: 17em;
            color: #ffffff;
            font-size: 14px;
            letter-spacing: 0.06em;
            text-align: justify;
            line-height: 1.4em;
            margin: 1px 0 8px 0;
        }
    }
.card span {
  font-size: 0.8rem;
  font-weight: bold;
  color: #FFF;
  margin: 0.4rem 0 0 0;
}

/* 컨텐츠 박스 스타일들 */
.title_box {
            width: 100%;
            height: auto;
            background-position: 20% 10%;
            background-image:linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 211, 1, 0.0)), url(images/#);
            background-size: 10%;
            border-top:1px solid #555;
            border-bottom:1px solid #555;
            border-radius: 0em;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0);
            display: flex;
            padding: 0.4em 0em ;
            z-index: 1;
            margin: 0px;
            flex-direction: column;
            position: relative;
            top: 0;
            text-justify: auto;
            transition: all 0.2s ease-in-out;
            }
@media screen and (max-width: 980px) {
    .title_box {
            padding: 1.2em 0.2em ;
	}
}

.text_box {
            width: 100%;
            background-position: 20% 10%;
            background-image:linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 211, 1, 0.0)), url(images/#);
            background-size: 10%;
            border-top:0px solid #ffd301;
            border-bottom:0px solid #ffd301;
            border-radius: 0em;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0);
            display: flex;
            padding: 0.9em 0em 0 0;
            z-index: 1;
            margin: 0px;
            flex-direction: column;
            position: relative;
            top: 0;
            text-align: center;
            transition: all 0.2s ease-in-out;
            }
@media (max-width: 768px) {
            .text_box {
                        width: 100%;
                        height: auto;
                        border-bottom: 0px solid #555;
                        display: flex;
                        padding: 0;
                        z-index: 1;
                        margin: 0px;
                        flex-direction: column;
                        position: relative;
                        top: 0;
                        text-align: center;
                        transition: all 0.2s ease-in-out;
                        }
}

.text_box h2 {
        font-family: "Nanum Gothic", sans-serif;
        font-size: 18.5px;
        color: #2b2b2b;
        text-shadow: 0 2px 7px rgb(0 0 0 / 1%);
        text-align: justify;
        font-weight: 600;
        line-height: 1.7em;
        font-style: normal;
        letter-spacing: 0em;
        white-space: pre-line;
        margin:0.3em 0 ;
        }
.text_box p{
        font-size: 0.88rem;
    margin:0.7em 0 1.5em 0;
    padding:0;
        text-align: justify-all;
        }
.text_box img{
        width: 100%;
        object-fit: fill;
        }
@media (max-width: 768px) {
        .text_box img{
            width: 100%;
              object-fit: cover;
                }

}
/*************************** 좌우 무한루프 흐르는갤러리 **************************   
.scroll-gallery {
  width: 100%;
  overflow: hidden;
  background-color: ;
  position: relative;
  text-align: center;
  z-index: 100;
    border-bottom: 1px solid #333;
    
}

.scroll-gallery-wrapper {
  overflow: hidden; 
    margin-bottom: 1.4em;
}

.scroll-gallery-track {
  display: flex;
  gap: 20px;
  align-items: center;
}

.scroll-gallery-item {
  flex: 0 0 auto;
}

.scroll-gallery-item img {
  height: 300px;
  width: auto;
  display: block;
  border-radius: 8px;
  background: transparent;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
*************************** 좌우 무한루프 흐르는갤러리 **************************/
    .scroll-gallery-wrapper {
      overflow: hidden;
      width: 100%;
      position: relative;
      background: #;
      padding: 1em 0;
    }

    .scroll-gallery-track {
      display: flex;
      gap: 1em;
      width: max-content;
      will-change: transform;
    }

    .scroll-gallery-item {
      flex-shrink: 0;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      overflow: hidden;
    }

    .scroll-gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }


/* 서브메뉴 토글가능한 드롭다운 */
.has-submenu {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fffbea;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 999;
  margin: 2em 0em;
}

.has-submenu.open > .submenu {
  display: block;
}

.submenu li {
  margin: 0em ;
}

.submenu-toggle {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  padding: 0 0.5em;
  color: #e44c65;
}

@media (max-width: 768px) {
  .submenu {
    position: relative;
    box-shadow: none;
  }
}
/* Loader */

	@-moz-keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-moz-keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@-webkit-keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@-ms-keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@-moz-keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@-webkit-keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@-ms-keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@-moz-keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	@-webkit-keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	@-ms-keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	@keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	body.landing {
		text-decoration: none;
	}
    body.landing:before {
        content: '';
        display: block;
        position: fixed;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
        border: 6px solid #ffd300;
        border-top: 6px solid transparent;
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.9);
        z-index: -1;
        pointer-events: none; /* 클릭 막음 */
    }

body.landing.is-preload:before {
    animation: spinner-show 0.5s ease forwards, spin 1s linear infinite;
    z-index: 100001;
}

body.landing:after {
    background: #1c1d26; /* 기존 배경 유지 */
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
body.landing.is-preload:after {
    opacity: 1;
    z-index: 100000;
}

@keyframes spinner-show {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
	@media (-webkit-min-device-pixel-ratio: 2) {

		body.landing:before {
			line-height: 2.025em;
		}

	}

/* Container */
	.container2 {
        margin: 0 auto;
        max-width: calc(100% - 4em);
        width: 70em;
        height: auto;
        background-color: #dddddd;

	}

	.container {
        margin: 0 auto;
        max-width: calc(100% - 8em);
        width: 70em;
        height: auto;
        margin-top: -2em;

	}

.container_title{
    width:97%;
    margin:-2em auto;
}
@media screen and (max-width: 1280px) {
        .container_title{
            width:100%;
            margin:-6.5em auto;
        }
}
@media screen and (max-width: 768px) {
        .container_title{
            width:100%;
            margin:-5em auto;
        }
}

.video-container {
        height:440px;
}
@media screen and (max-width: 768px) {
        .video-container {
                height:220px;
        }
}

.banner_title{
    float:left; width:25%; margin-top:1.7em;
}
.banner_view{
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.03em;
    text-align: justify;
    line-height: 1.96;
    color:#555;
    display:inline-block; 
    width:74%;
    border-bottom: 1px solid #03022a;
    margin:1.6em 0.3em 0 0;
    padding-bottom: 13px;
    
}
@media screen and (max-width: 1280px) {
    .banner_title{
        margin-top:6em;
    }
    .banner_view{
        font-size: 16px;
        margin-top:5.4em;
    }
}
@media screen and (max-width: 1024px) {
    .banner_title{
        margin-top:5em;
    }
    .banner_view{
        font-size: 14.6px;
        letter-spacing: 0.2px;
        line-height: 2.05;
        margin:5.5em 0 0 30px;
        width:71.6%;
    }
}

		.container.xsmall {
			width: 17.5em;
		}

		.container.small {
			width: 35em;
		}

		.container.medium {
			width: 52.5em;
		}

		.container.large {
			width: 87.5em;
		}

		.container.xlarge {
			width: 105em;
		}

		.container.max {
			width: 100%;
		}

		@media screen and (min-width: 1281px) {
			.container {
				width: 70em;
				max-width: 100%;
                margin-top:2.4em;
			}

		}

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

			.container {
				width: 100% !important;
			}

		}

		@media screen and (max-width: 768px) {
			.container {
				max-width: 100%;
                margin-top:3em;
			}

		}
/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33%;
		}
        @media screen and (max-width: 1680px) {
            .row > .col-4 {
                width: 27%;
            }
        }
        @media screen and (max-width: 1280px) {
            .row > .col-4 {
                width: 33%;
            }
        }
		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 67%;
		}
        @media screen and (max-width: 1280px) {
            .row > .col-8 {
                width: 65%;
                height: 21em;
            }
        }
        @media screen and (max-width: 1680px) {
            .row > .col-8 {
                width: 66%;
            }
        }
    width: 62.66667%;

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.625em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.625em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.625em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.625em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -1.25em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 1.25em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -1.25em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 1.25em;
				}

		.row {
			margin-top: 0em;
			margin-left: -0.5em;
		}

			.row > * {
				padding: 0em 0 0 1.1em;
			}

			.row.gtr-uniform {
				margin-top: -2.5em;
			}

				.row.gtr-uniform > * {
					padding-top: 2.5em;
				}

		.row.gtr-150 {
			margin-top: 1.4em;
			margin-left: -3.75em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 3.75em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -3.75em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 3.75em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -5em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 5em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -5em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 5em;
				}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -0.8em;
				}

					.row > * {
						padding: 0 0 0 1.3em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 2.25em 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: 0em;
				}

					.row > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header p {
		color: #0e2e4c;
		position: relative;
		margin: 0em;
	}

	header h2 + p {
		font-size: 1.25em;
		margin-top: -1em;
		line-height: 1.75em;
	}

	header h3 + p {
		font-size: 1.1em;
		margin-top: -0.8em;
		line-height: 1.75em;
	}

	header h4 + p,
	header h5 + p,
	header h6 + p {
		font-size: auto;
		margin-top: -0.6em;
		line-height: 1.5em;
	}

	header.major {
		margin: 0 0 1.2em 0;
		position: relative;
		text-align: center;
	}

		header.major:after {
			background: #ffd300;
			content: '';
			display: inline-block;
			height: 0px;
			max-width: 100%;
			width: 100%;
		}

	footer.major {
		margin: 4em 0 0 0;
	}

/* Form */

	form {
		margin: 0 0 2em 0em;
	}

		form.cta {
			max-width: 35em;
			margin-left: auto;
			margin-right: auto;
		}

	label {
		color: #555;
		display: block;
		font-size: 13.5px;
		font-weight: 300;
		margin: 0.5em 0 -0.2em 0;
        text-align: left;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		background: #FFFFFF;
		border-radius: 4px;
		border: solid 1px rgb(216 151 24 / 95%);
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #e44c65;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.3)' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 3em;
		padding-right: 3em;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #1c1d26;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 3em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: rgb(255 199 89);
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 100;
			padding-left: 2.55em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border-radius: 4px;
				border: solid 1px rgb(231 98 120);
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.25em;
				left: 0;
				line-height: 2.25em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.25em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: rgba(255, 255, 255, 0.25);
			color: rgb(231 98 120);
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: #e44c65;
		}

	input[type="checkbox"] + label:before {
		border-radius: 4px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgb(255 199 89) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgb(255 199 89) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgb(255 199 89) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgb(255 199 89) !important;
		opacity: 1.0;
	}

/* Box */

	.box {
		border-radius: 4px;
		border: solid 1px rgba(216, 151, 24, 95%);
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900 !important;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands' !important;
		}

		.icon.alt {
			text-decoration: none;
		}

			.icon.alt:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 400;
			}

			.icon.alt:before {
				color: #1c1d26 !important;
				text-shadow: 1px 0 0 #ffffff, -1px 0 0 #ffffff, 0 1px 0 #ffffff, 0 -1px 0 #ffffff;
			}

		.icon.major {
			background: #272833;
			border-radius: 100%;
			cursor: default;
			display: inline-block;
			height: 6em;
			line-height: 5.65em;
			margin: 0 0 2em 0;
			text-align: center;
			width: 6em;
		}

			.icon.major:before {
				font-size: 2.25em;
			}

			.icon.major.alt {
				text-decoration: none;
			}

				.icon.major.alt:before {
					-moz-osx-font-smoothing: grayscale;
					-webkit-font-smoothing: antialiased;
					display: inline-block;
					font-style: normal;
					font-variant: normal;
					text-rendering: auto;
					line-height: 1;
					text-transform: none !important;
					font-family: 'Font Awesome 5 Free';
					font-weight: 400;
				}

				.icon.major.alt:before {
					color: #272833 !important;
					text-shadow: 1px 0 0 #ffffff, -1px 0 0 #ffffff, 0 1px 0 #ffffff, 0 -1px 0 #ffffff;
				}

/* Image */

	.image {
		border-radius: 0em;
		border: 0;
		display: inline-block;
		position: relative;
		overflow: hidden;
	}

		.image:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			/*   background-image: url("/images/overlay.png"); */
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.image img {
			border-radius: 0;
			display: block;
		}

		.image.left {
			float: left;
			margin: 0 0.5em 0.1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 0.1em 0.5em;
			top: 0.25em;
		}

		.image.left, .image.right {
			max-width: 41.6%;
		}

        .image.left img, .image.right img {
				width: 100%;
			}
	@media screen and (max-width: 1280px) {
            .image.left, .image.right {
			     max-width: 37%;
		          }
            .image.left img, .image.right img {
                    width: 100%;
                }
        }
		.image.fit {
			display: block;
			margin: 0 0 0.7em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 2em auto;
		padding-left: 0em;
        line-height: 2.2em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
                border-top: solid 1px rgb(136, 174, 3, 0.8);
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}
/***** sidemenu 사이드메뉴 *****/
ul.sidemenu {
    list-style: none;
    padding-left: 0;
}

ul.sidemenu li {
    width:320px;
    height: 55px;
    text-align: left;
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    border-right: solid 0px rgb(255 221 141);
    background: #ffd300;
    margin: 0.5em 0;
    padding: 0.2em 0.7em 0;
    border-radius: 3px;
}
ul.sidemenu li:hover{
    cursor: pointer;
    background-color: #ffe048;
}
ul.sidemenu li a {
    display: block;
    margin: 0;
    font-size: 13px;
    color: #293706;
    font-weight: 800;
}
ul.sidemenu li:first-child {
    border-top: 0;
    margin-top: 4.6em;
}


/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding:0.6em 0 0.4em 0;
        border-bottom:1px solid #2c2c2c;
        text-align: right;
	}

		ul.icons li {
			display: inline-block;
			height: 2.5em;
			line-height: 2.5em;
			padding: 0 1.7em;
		}

			ul.icons li .icon {
				font-size: 0.8em;
			}

				ul.icons li .icon:before {
					font-size: 2em;
				}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

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

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px #46c1a2;
			border-left: 0;
			border-right: 0;
		}

        table tbody tr:nth-child(2n + 1) {
            background-color: rgb(137 233 209 / 17%);
			}

		table td {
            color: #2c2c2c;
			padding: 0.65em 0.75em;
		}
.td_no {
        width: 7.5em;
        font-size: 14px;
        font-weight: 300;
        text-align: center;
        line-height: 123%;
        vertical-align: middle;
        }
}


@media screen and (max-width: 768px) {
                table td {
                    font-size: 0.6em;
                    line-height: 1.4;
			         padding: 0.5em 0.75em;
		}
}
		table th {
			color: #46c1a2;
			font-size: 0.9em;
			font-weight: 300;
			padding: 0 0.75em 0.3em 0.75em;
			text-align: left;
		}
@media screen and (max-width: 768px) {
                table th {
                    font-size: 0.55em;
                    padding: 0 0.75em 0.3em 0.75em;
                    text-align: center;
                    line-height: 2.5;
		}
}

		table thead {
			border-bottom: solid 1px rgba(255, 255, 255, 0.3);
		}

		table tfoot {
			border-top: solid 1px rgba(255, 255, 255, 0.3);
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px rgba(255, 255, 255, 0.3);
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border:1px solid #88AE01;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
		color: #88AE01 !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		height: 3em;
		line-height: 3em;
		padding: 0 2.25em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

		input[type="submit"]:hover, input[type="submit"]:active,
		input[type="reset"]:hover,
		input[type="reset"]:active,
		input[type="button"]:hover,
		input[type="button"]:active,
		.button:hover,
		.button:active {
			box-shadow: inset 0 0 0 2px #0ca8ba;
            background-color: #0ca8ba;
			color: #FFF !important;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		.button:active {
			background-color: rgba(228, 76, 101, 0.15);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		.button.fit {
			width: 100%;
            border:1px solid #88AE01;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		.button.large {
			font-size: 1.35em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		.button.primary {
			background-color: #1362c9; 
			box-shadow: none;
			color: #ffffff !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			.button.primary:hover {
				background-color: #e76278;
                border:1px solid #e76278;
                
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			.button.primary:active {
				background-color: #e13652;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		.button.disabled,
		.button:disabled {
			background-color: rgba(255, 255, 255, 0.3) !important;
			box-shadow: none !important;
			color: #cccccc !important;
			cursor: default;
			opacity: 0.25;
		}

/* Goto Next */

	.goto-next {
		border: 0;
		bottom: 0;
		display: block;
		height: 8em;
		left: 50%;
		margin: 0 0 0 -8.7em;
		overflow: hidden;
		position: absolute;
		text-indent: 10em;
		white-space: nowrap;
		width: 10em;
		z-index: 1;
	}

		.goto-next:before {
			background-image: url("images/arrow.svg");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			display: block;
			height: 1.5em;
			left: 50%;
			margin: -0.75em 0 0 -1em;
			position: absolute;
			top: 80%;
			width: 7em;
			z-index: 1;
		}

/* Spotlight */

	.spotlight {
		background-attachment: fixed;
		background-position: center center;
		background-size: cover;
        background-color: #;
		height: 670px;
        margin-top: 0;
		overflow: hidden;
		position: relative;
	}

		.spotlight:nth-last-of-type(1) {
			z-index: 1;
		}

		.spotlight:nth-last-of-type(2) {
			z-index: 2;
		}

		.spotlight:nth-last-of-type(3) {
			z-index: 3;
		}

		.spotlight:nth-last-of-type(4) {
			z-index: 4;
		}

		.spotlight:nth-last-of-type(5) {
			z-index: 5;
		}

		.spotlight:nth-last-of-type(6) {
			z-index: 6;
		}

		.spotlight:nth-last-of-type(7) {
			z-index: 7;
		}

		.spotlight:nth-last-of-type(8) {
			z-index: 8;
		}

		.spotlight:nth-last-of-type(9) {
			z-index: 9;
		}

		.spotlight:nth-last-of-type(10) {
			z-index: 10;
		}

		.spotlight:nth-last-of-type(11) {
			z-index: 11;
		}

		.spotlight:nth-last-of-type(12) {
			z-index: 12;
		}

		.spotlight:nth-last-of-type(13) {
			z-index: 13;
		}

		.spotlight:nth-last-of-type(14) {
			z-index: 14;
		}

		.spotlight:nth-last-of-type(15) {
			z-index: 15;
		}

		.spotlight:nth-last-of-type(16) {
			z-index: 16;
		}

		.spotlight:nth-last-of-type(17) {
			z-index: 17;
		}

		.spotlight:nth-last-of-type(18) {
			z-index: 18;
		}

		.spotlight:nth-last-of-type(19) {
			z-index: 19;
		}

		.spotlight:nth-last-of-type(20) {
			z-index: 20;
		}

		.spotlight:before {
			background-image: url("#");
			content: '';
			display: block;
			height: 100%;
			left: 0;
			top: 0;
			width: 100%;
		}

		.spotlight .image.main {
			display: none;
		}

			.spotlight .image.main img {
				position: relative;
			}

		.spotlight .content {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 0.3s ease, opacity 0.8s ease;
			-webkit-transition: -webkit-transform 0.3s ease, opacity 0.8s ease;
			-ms-transition: -ms-transform 0.3s ease, opacity 0.8s ease;
			transition: transform 0.3s ease, opacity 0.3s ease;
			background: #fbf0d6;
			border-style: solid;
			opacity: 1;
			position: absolute;
		}

		.spotlight .goto-next {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 0.75s ease, opacity 1s ease-in;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 1s ease-in;
			-ms-transition: -ms-transform 0.75s ease, opacity 1s ease-in;
			transition: transform 0.75s ease, opacity 1s ease-in;
			-moz-transition-delay: 0.5s;
			-webkit-transition-delay: 0.5s;
			-ms-transition-delay: 0.5s;
			transition-delay: 0.5s;
			opacity: 1;
		}

		.spotlight.top .content, .spotlight.bottom .content {
			left: 0;
			top:0;
			width: 100%;
		}

		.spotlight.top .content {
			border-bottom-width: 0.1em;
			top: 0;
		}

		.spotlight.bottom .content {
			border-top-width: 0em;
			bottom: 0;
		}

		.spotlight.left .content, .spotlight.right .content {
			height: 101%;
			padding: 6em 3em;
			top: 0;
			width: 28em;
		}

		.spotlight.left .content {
			border-right-width: 0.35em;
			left: 0;
		}

		.spotlight.right .content {
			border-left-width: 0.35em;
			right: 0;
		}

		.spotlight.style1 .content {
			border-color: #ffd300;
            background-image:url(#);
            background-position: 83% bottom;
            background-size: 5.4em;
            opacity: 0.97;
            background-repeat: no-repeat;
		}
	@media screen and (max-width: 1280px) {
        		.spotlight.style1 .content {
                    border-color: #fbf0d6;
                    background-image:url(#);
                    background-position: 94% bottom;
                    background-size: 9em;
                    opacity: 0.97;
                    background-repeat: no-repeat;
                }
        }
		.spotlight.style2 .content {
			border-color: #ffd300;
		}

		.spotlight.style3 .content {
			border-color: #ffd300;
		}

		.spotlight.inactive .content {
			opacity: 0;
		}

		.spotlight.inactive .goto-next {
			-moz-transform: translate(0,1.5em);
			-webkit-transform: translate(0,1.5em);
			-ms-transform: translate(0,1.5em);
			transform: translate(0,1.5em);
			opacity: 0;
		}

		.spotlight.inactive.top .content {
			-moz-transform: translate(0,-5em);
			-webkit-transform: translate(0,-5em);
			-ms-transform: translate(0,-5em);
			transform: translate(0,-5em);
		}

		.spotlight.inactive.bottom .content {
			-moz-transform: translate(0,5em);
			-webkit-transform: translate(0,5em);
			-ms-transform: translate(0,5em);
			transform: translate(0,5em);
		}

		.spotlight.inactive.left .content {
			-moz-transform: translate(-5em,0);
			-webkit-transform: translate(-5em,0);
			-ms-transform: translate(-5em,0);
			transform: translate(-5em,0);
		}

		.spotlight.inactive.right .content {
			-moz-transform: translate(5em,0);
			-webkit-transform: translate(5em,0);
			-ms-transform: translate(5em,0);
			transform: translate(5em,0);
		}

	body.is-touch .spotlight {
		background-attachment: scroll;
	}

/* Wrapper */

	.wrapper {
		padding: 0em 0 4em 0;
        background-color: ;
	}
/* ------02coop.html 배경색------*/


		.wrapper.style2 {
			background: #272833;
		}

			.wrapper.style2 input[type="text"]:focus,
			.wrapper.style2 input[type="password"]:focus,
			.wrapper.style2 input[type="email"]:focus,
			.wrapper.style2 select:focus,
			.wrapper.style2 textarea:focus {
				border-color: rgba(255, 255, 255, 0.5);
			}

			.wrapper.style2 input[type="submit"]:hover, .wrapper.style2 input[type="submit"]:active,
			.wrapper.style2 input[type="reset"]:hover,
			.wrapper.style2 input[type="reset"]:active,
			.wrapper.style2 input[type="button"]:hover,
			.wrapper.style2 input[type="button"]:active,
			.wrapper.style2 .button:hover,
			.wrapper.style2 .button:active {
				background-color: rgba(255, 255, 255, 0.075) !important;
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
				color: #ffffff !important;
			}

			.wrapper.style2 input[type="submit"]:active,
			.wrapper.style2 input[type="reset"]:active,
			.wrapper.style2 input[type="button"]:active,
			.wrapper.style2 .button:active {
				background-color: rgba(255, 255, 255, 0.25) !important;
			}

			.wrapper.style2 input[type="submit"].primary,
			.wrapper.style2 input[type="reset"].primary,
			.wrapper.style2 input[type="button"].primary,
			.wrapper.style2 .button.primary {
				background-color: #ffffff;
				color: #e44c65 !important;
			}

				.wrapper.style2 input[type="submit"].primary:hover, .wrapper.style2 input[type="submit"].primary:active,
				.wrapper.style2 input[type="reset"].primary:hover,
				.wrapper.style2 input[type="reset"].primary:active,
				.wrapper.style2 input[type="button"].primary:hover,
				.wrapper.style2 input[type="button"].primary:active,
				.wrapper.style2 .button.primary:hover,
				.wrapper.style2 .button.primary:active {
					background-color: rgba(255, 255, 255, 0.075) !important;
					box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
					color: #ffffff !important;
				}

				.wrapper.style2 input[type="submit"].primary:active,
				.wrapper.style2 input[type="reset"].primary:active,
				.wrapper.style2 input[type="button"].primary:active,
				.wrapper.style2 .button.primary:active {
					background-color: rgba(255, 255, 255, 0.25) !important;
				}

		.wrapper.fade-down > .container {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 1s ease, opacity 1s ease;
			-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
			-ms-transition: -ms-transform 1s ease, opacity 1s ease;
			transition: transform 1s ease, opacity 1s ease;
			opacity: 1;
		}

		.wrapper.fade-down.inactive > .container {
			-moz-transform: translate(0,-1em);
			-webkit-transform: translate(0,-1em);
			-ms-transform: translate(0,-1em);
			transform: translate(0,-1em);
			opacity: 0;
		}

		.wrapper.fade-up > .container {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 1s ease, opacity 1s ease;
			-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
			-ms-transition: -ms-transform 1s ease, opacity 1s ease;
			transition: transform 1s ease, opacity 1s ease;
			opacity: 1;
		}

		.wrapper.fade-up.inactive > .container {
			-moz-transform: translate(0,1em);
			-webkit-transform: translate(0,1em);
			-ms-transform: translate(0,1em);
			transform: translate(0,1em);
			opacity: 0;
		}

		.wrapper.fade > .container {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			opacity: 1;
		}

		.wrapper.fade.inactive > .container {
			opacity: 0;
		}

/* Dropotron */

	.dropotron {
		background: rgba(39, 40, 51, 1);
		border-radius: 7px;
		box-shadow: 0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
		list-style: none;
		margin-top: calc(-0.25em + 1px);
		min-width: 12em;
		padding: 0.25em 0;
	}

		.dropotron > li {
			border-top: solid 1px rgba(255, 255, 255, 0.035);
			padding: 1em 0.6em;
		}

			.dropotron > li a, .dropotron > li span {
				border: 0;
				color: rgba(255, 255, 255, 0.75);
				display: block;
				padding: 0.1em 1em;
				text-decoration: none;
			}

			.dropotron > li:first-child {
				border-top: 0;
			}

			.dropotron > li.active > a, .dropotron > li.active > span {
				color: #e44c65;
			}

		.dropotron.level-0 {
			font-size: 0.8em;
			margin-top: 1em;
		}

			.dropotron.level-0:before {
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
				background: #272833;
				content: '';
				display: block;
				height: 1em;
				position: absolute;
				right: 50%;
				top: -0.5em;
				width: 1em;
			}

	body.landing .dropotron.level-0 {
		margin-top: 0;
	}

/* Header */

	#page-wrapper {
		padding-top: 0.5em;
            background-color: #fcf0d1;
	}
@media screen and (max-width: 768px) {
    #page-wrapper {
        width:100%;  
    }
}
/* ──────────────── PC(데스크탑) 에서는 헤더 position 해제 ──────────────── */
@media screen and (min-width: 737px) {
  /* 헤더를 문서 흐름에 따라 움직이도록 변경 */
  #header {
    position: static !important;  /* 또는 position: relative; */
    top: auto;                    /* fixed 시 지정된 top 제거 */
    width: 100%;                  /* 필요 시 유지 */
    box-shadow: none;             /* optional: 스크롤될 때 그림자 제거 */
  }

  /* 페이지 래퍼 위쪽 여백 제거 (헤더가 가리고 있던 영역 해제) */
  #page-wrapper {
    padding-top: 0 !important;
  }
}
/* ───────────────────────────────────────────────────────────────────────── */

	#header {
		background: rgba(39, 40, 51, 0.965);
		box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
		cursor: default;
		height: 3.7em;
		left: 0;
		line-height: 3.5em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
	   }
       .logo {
            height: 90px;
            margin: auto;
        }
@media screen and (max-width: 1280px) {
               .logo {
                   height: 81px;
                }
}
        .footerlogo {
            width: auto;
            height: 19em;
            padding:2em 0 2em 0;
            display: flex;
            align-content: center;
            flex-wrap: nowrap;
            justify-content: space-around;
            }
		#header h1 {
			height: inherit;
			left: 0em;
			line-height: inherit;
			margin: 0;
			position: absolute;
			top: 0;
		}

		#header nav {
			position: absolute;
			right: 2em;
			top: 1.34em;
		}

			#header nav ul {
				margin: 0;
			}

				#header nav ul li {
					display: inline-block;
					margin-left: 0em;
				}

					#header nav ul li a, #header nav ul li span {
                        font-size: auto;
                        font-weight: 400;
                        letter-spacing: 0.01px;
						border: 0;
						color: #222;
						display: inline-block;
						height: inherit;
						line-height: inherit;
                        padding: 0.5em 0 0.5em 1.5em;
						outline: 0;
					}

						#header nav ul li a.button, #header nav ul li span.button {
							height: 2em;
							line-height: 2em;
							padding: 0 1.25em;
						}

						#header nav ul li a:not(.button):before, #header nav ul li span:not(.button):before {
							margin-right: 0.5em;
                            line-height: 20em;
						}
					#header nav ul li.active > a, #header nav ul li.active > span {
						color: #1362c9;
					}
					#header nav ul li > ul {
						display: none;
					}

	body.landing #page-wrapper {
		padding-top: 0;
	}

	body.landing #header {
		background: #ffd300;
        /* background-image: linear-gradient(180deg, #ffd300, #ffd300, #ffbc1c); */
		box-shadow: none;
        height:6em;
		position: fixed;
	}
@media screen and (max-width: 768px) {
        body.landing #header {
            height:8.5em;
        }
    #header a{
        font-size: 12px;
        padding: 1em 0 0.5em 1.1em;
    }
}
/* ------------------------Footer 레이아웃---------------------- */
.site-footer {
  background-color: #FFD305;
  padding: 2em 1em;
}

.footer-container {
  max-width: 68em;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

/* Default: Mobile */
.footer-logo {
  flex: 1 1 100%;
  margin:0.2em;
   height:180px;
}

.footer-links {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 0em;
  flex-direction: column;
}

.footer-links a {
  text-decoration: none;
}

.footer-text-link {
  flex: 1 1 100%;
  margin-top: -1.8em;
}

.footer-text-link a {
  color: #666;
  text-decoration: none;
}

.footer-copyright {
  flex: 1 1 100%;
}

/* PC Layout */
@media (min-width: 768px) {
  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.4em;
    text-align: left;
  }

  .footer-logo {
    grid-row: 1 / span 2;
    align-self: center;
    text-align: left;
  }

  .footer-links {
    justify-content: flex-end;
              padding: 0.9em;

  }

  .footer-text-link {
    justify-self: start;
  }

  .footer-copyright {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 2em;
  }
}
/* ------------------------/ Footer 레이아웃 끝---------------------- */

/* Banner */

	#banner {
        /*---배경 고정 이미지 감춤
		background-attachment: fixed;
		background-image: url("../../images/banner-01.jpg");
		background-position: center center;
		background-size: cover;
        ---*/
		min-height: 90vh;
		position: relative;
		text-align: center;
		z-index: 21;
        font-size:0.88em;
        line-height: 27px;
        font-weight: 300;
	}

		#banner:before {
			content: '';
			display: inline-block;
			height: 0vh;
			vertical-align: top;
			width: 100%;
		}

		#banner:after {
			background: linear-gradient(-12deg, #fbf0d6 73%, #FFE048 20%);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
            z-index: -1;
		}

		#banner .content {
			display: inline-block;
			margin-right: 0%;
            margin-top: 0;
			max-width: 79em;
            top: 0.6em;
			padding: 0em;
			position: relative;
			text-align: left;
			vertical-align: middle;
			z-index: 1;
		}

			#banner .content header {
				display: inline-block;
				vertical-align: middle;
			}

            #banner .content header h2 {
                font-size: 2.5em;
                margin: 0;
            }

            #banner .content h5 {
                color:#000000;
                margin: 0;
                top: 0;
                line-height: 1.65em;
                font-weight: 400;
                width:64vw;
                padding:16px;
            }

            #banner .content header p {
                color:#000000;
                top: 0;
                margin: 0.7em 0 0 0;
                text-align: justify;
                text-justify: inter-cluster;
            }

			#banner .content .image {
				
				display: inline-block;
				height: 240px;
				margin-left: 0;
				vertical-align:bottom;
				width: 27em;
                border-radius: 0.6em;
			}
@media screen and (max-width: 1280px) {
                    #banner .content .image {
                        
                        display: inline-block;
                        height: 11.2em;
                        margin-left: 0;
                        vertical-align:bottom;
                        width: 27em;
                        border-radius: 0.6em;
                    }
}
/* clip-path: polygon(49% 7%, 84% 14%, 100% 36%, 98% 68%, 71% 89%, 26% 90%, 6% 74%, 1% 49%, 17% 16%); */

				#banner .content .image img {
					
					display: block;
					width:100%;
                    height:100%;
				}

	body.is-touch #banner {
		background-attachment: scroll;
	}

/* Banner 2 */

	#banner2 {
		background-attachment: fixed;
		background-color: #ffd300;
		background-image: url("../../images/banner-01.jpg");
		background-position: center center;
		background-size: cover;
		box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
		min-height: 50vh;
		position: relative;
		text-align: center;
		z-index: 21;
	}

		#banner2:before {
			content: '';
			display: inline-block;
			height: 0vh;
			vertical-align: top;
			width: 100%;
		}

		#banner2:after {
			content: '';
			display: block;
			height: 100vh;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#banner2 .content {
			display: inline-block;
			margin-right: 0%;
            margin-top: 0%;
			max-width: 100%;
            top:0;
			padding: 0;
			position: relative;
			text-align: left;
			vertical-align: middle;
			z-index: 1;
		}

			#banner2 .content header {
				display: inline-block;
				vertical-align: middle;
			}

				#banner2 .content header h2 {
					font-size: 4em;
                    color:#ffffff;
                    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
                    line-height: 1.5em;
					margin-left: 18px;
				}

				#banner2 .content header p {
					margin: 0;
                    color:#ffffff;
                    line-height:normal;
                    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
					top: 0;
                    padding:0 0 1em 0;
				}

			#banner2 .content .image {
				border-radius: 0%;
				display: inline-block;
				height: 19em;
				margin-left: 3em;
				vertical-align: middle;
				width: 18em;
			}

				#banner2 .content .image img {
					
					display: block;
					width: 100%;
				}

	body.is-touch #banner2 {
		background-attachment: scroll;
	}
/* Banner 3 */

	#banner3 {
		  background: linear-gradient(7deg, #FFE048 78%, #fbf0d6 20%);
          max-width: 100%;
          position: relative;
          overflow: hidden;
          margin: 0px auto;
          padding: 39px 0 50px 0;
		min-height: 44vh;
		position: relative;
		text-align: left;
		z-index: 1;
	}

		#banner3:before {
			content: '';
			display: inline-block;
			height: 0vh;
			vertical-align: top;
			width: 100%;
		}

		#banner3:after {
            
			content: '';
			display: block;
			height: 100vh;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#banner3 .content {
			display: inline-block;
			margin-right: 0%;
            margin-top: 1%;
			max-width: 100%;
            top:0;
			padding: 0;
			position: relative;
			text-align: left;
			vertical-align: middle;
			z-index: 1;
		}

			#banner3 .content header {
				display: inline-block;
				vertical-align: middle;
			}

				#banner3 .content header h2 {
					font-size: 4em;
                    color:#ffffff;
                    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
                    line-height: 1.5em;
					margin-left: 18px;
				}

				#banner3 .content header p {
					margin: 0;
                    color:#ffffff;
                    line-height:normal;
                    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
					top: 0;
                    padding:0 0 1em 0;
				}

			#banner3 .content .image {
				border-radius: 50%;
				display: inline-block;
				height: 19em;
				margin-left: 3em;
				vertical-align: middle;
				width: 18em;
			}

				#banner3 .content .image img {
					
					display: block;
					width: 100%;
                    height: 100%;
				}

	body.is-touch #banner3 {
		background-attachment: scroll;
	}

/* Banner 4 */

	#banner4 {
        background: linear-gradient(6deg, #FFE048 80%, #fbf0d6 20%);
		background-size: cover;
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25);
		min-height: 50vh;
		position: relative;
		text-align: center;
		z-index: 999;
        padding-top:1.5em;
	}
@media screen and (min-width: 1281px) {
    #banner4 {
        padding-top:6em;
    }
}
		#banner4:before {
			content: '';
			display: inline-block;
			height: 2vh;
			vertical-align: top;
			width: 100%;
		}

        #banner4:after {
            content: '';
            display: block;
            height: 100vh;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            pointer-events: none; /* 클릭을 투명하게 통과시킴 */
            z-index: 0;           /* 자식 .content(z-index:1) 뒤로 보내기 */
        }
                #banner4 .content {
			display: inline-block;
			margin-right: 0%;
            margin-top: 1%;
			max-width: 100%;
            top:0;
			padding: 0;
			position: relative;
			text-align: left;
			vertical-align: middle;
			z-index: 1;
		}

			#banner4 .content header {
				display: inline-block;
				vertical-align: middle;
			}

				#banner4 .content header h2 {
					font-size: 4em;
                    color:#ffffff;
                    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
                    line-height: 1.5em;
					margin-left: 18px;
				}

				#banner4 .content header p {
					margin: 0;
                    color:#ffffff;
                    line-height:normal;
                    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
					top: 0;
                    padding:0 0 1em 0;
				}

			#banner4 .content .image {
				border-radius: 50%;
				display: inline-block;
				height: 19em;
				margin-left: 3em;
				vertical-align: middle;
				width: 18em;
			}

				#banner4 .content .image img {
					
					display: block;
					width: 100%;
				}

	body.is-touch #banner4 {
		background-attachment: scroll;
	}


/* Image slider */
.image-grid-section {
  padding: 0em 1em 2em 1em;
  z-index: 100009;
}
@media screen and (max-width: 768px) {
            .image-grid-section {
              padding: 0em 0em 2em 0em;
            }
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8em;
  max-width: 69.5em;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
    .image-grid {
        max-width: 68em;
    }
}

.image-grid img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.image-grid img:hover {
  transform: scale(1.03);
}

@media screen and (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Image slider 2 */
.image-grid2-section {
  padding: 0em 1em 2em 1em;
  z-index: 100009;
}
@media screen and (max-width: 768px) {
            .image-grid2-section {
              padding: 0em 0em 2em 0em;
            }
}
.image-grid2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8em;
  max-width: 69.5em;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
    .image-grid2 {
        max-width: 68em;
    }
}

.image-grid2 img {
  width: 100%;
  height: 7.2em;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.image-grid2 img:hover {
  transform: scale(1.03);
}

@media screen and (max-width: 768px) {
  .image-grid2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/***** 라이트박스 기본 스타일 *****/
.lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  max-width: 90%;
  max-height: 80%;
}

.lightbox-caption {
  position: absolute;
    bottom:8%;
    background-color: rgb(0, 0, 0, 0.7);
    padding:0.7em 1em;
 text-underline-position: auto;
  
  color: #fff;
  text-align: center;
  font-size: 0.7em;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: #fff;
  font-size: 4em;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.lightbox-close { top: 20px; right: 30px; }
.lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  color: #f1c40f;
}

@media screen and (max-width: 768px) {
  .lightbox-content {
    max-width: 95%;
    max-height: 70%;
  }

  .lightbox-caption {
    font-size: 0.85em;
    padding: 0 10px;
  }

  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    font-size: 1.5em;
  }

  .lightbox-close { top: 15px; right: 20px; }
  .lightbox-prev  { left: 10px; }
  .lightbox-next  { right: 10px; }
}


/********** 조합원 인터뷰 좌우 카드 **********/
.consult-section {
  padding: 0.3em 0 0 0;
  background-color: #FFE048;
    border-radius: 0em;
}

.consult-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 2em;
  max-width: 70em;
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
  z-index:1;
}
@media screen and (max-width: 1280px) {
    .consult-container {
        max-width: 70em;
    }
}
@media screen and (max-width: 1024px) {
    .consult-container {
        max-width: 59em;
    }
}
.consult-image {
  flex: 1 1 50%;
  max-width: 561px;
    /*
  background-image: url(images/map01.png);
  background-attachment:local;
  background-position: center center;
  background-size: cover;
    */
  height: 955px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin:0em 0;
  order: 1; /* ✅ 기본: 이미지 왼쪽 */
}
@media screen and (max-width: 1280px) {
    .consult-image {
        height: 931px;
    }
}
@media screen and (max-width: 1024px) {
    .consult-image {
        height: 932px;
    }
}

.consult-left {
  flex: 1 1 50%;
  max-width: 100%;
  height: auto;
    margin:5.53em 0 0 0;
  order: 1; /* ✅ 기본: 이미지 왼쪽 */
}
@media screen and (max-width: 1280px) {
    .consult-left {
        margin:0;
    }
}
@media screen and (max-width: 1024px) {
    .consult-left {
        margin-left:0em;
    }
}
.consult-image img {
  width: 100%;
  height: auto;
  
  border-radius: 10px;
    /*
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    */
}

.consult-form {
  flex: 1 1 45%;
  max-width: 50%;
  min-width: 280px;
  order: 2; /* ✅ 기본: 폼 오른쪽 */
  padding:0 20px 0 20px;
        margin: 0em 0 0 0;
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 1281px) {
.consult-form {
    height: 887px;
    }
}
@media screen and (max-width: 1280px) {
.consult-form {
    height: 864px;
    margin-bottom: 2em;
    }
}

@media screen and (max-width: 768px) {
  .consult-container {
    flex-direction: column;
    align-items: center;
  }

  .consult-form {
    order: 1; /* ✅ 모바일에서 폼을 위로 */
    padding:0 0.7em;
    margin:auto;
  }

  .consult-image {
    order: 2; /* ✅ 모바일에서 이미지를 아래로 */
  }

  .consult-image,
  .consult-form {
    width: 100%;
    max-width: 100%;
      
  }
}
/* Footer */

        #footer {
            background: #403f44;
            /* background-image: linear-gradient(180deg, #ffd300, #e9a200); */
            padding: 0.3em 0 0 0;
            text-align: center;
        }
        #footer a{
            font-size: 0.9em;
            color:#1c1c1c;
            text-decoration-line: none;
            font-weight: 300;
        }
        #footer .nav-item{
            font-size: 0.7em;
            color:#ffd300;
            text-decoration-line: none;
            font-weight: 300;
            text-align: center;

        }
        #footer .nav-item i{
            font-size: 1.8em; 

        }
        #footer .nav-item a{
            color:#1c1c1c;
            text-decoration-line: none;
        }

		#footer .icons .icon.alt {
			text-decoration: none;
		}

			#footer .icons .icon.alt:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 400;
			}

			#footer .icons .icon.alt:before {
				color: #272833 !important;
				text-shadow: 1px 0 0 rgba(255, 255, 255, 0.5), -1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.5);
			}

		#footer .copyright {
            font-family: "Nanum Gothic", sans-serif;
			color: #f3b800;
            background-color: #403f44;
			font-size: 0.8em;
            font-weight:400;
            letter-spacing: 0.14em;
			line-height: 1em;
            margin:0 auto;
			text-align: center;
		}

			#footer .copyright li {
				border-left: solid 1px rgba(255, 255, 255, 0.3);
				display: inline-block;
				list-style: none;
				margin-left: 1.5em;
				padding-left: 1.5em;
			}

				#footer .copyright li:first-child {
					border-left: 0;
					margin:0;
					padding: 2em 0;
                    font-size: 12px;
				}

				#footer .copyright li a {
					color: inherit;
				}

/* 모바일화면에서만 줄바꿈 */

        .mobile-only {
          display: none;
        }

        @media screen and (max-width: 767px) {
          .mobile-only {
            display: inline-block;
          }
        }

/* XLarge */

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

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
			}
            .hero {
                  margin-top: 0em;
                }
	}

/* Large */

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

		/* Basic */

			body, input, select, textarea {
				font-size: 11.5pt;
			}
        p {
            font-size: 0.86em;
            font-weight: 300;
            line-height: 1.9em;
            white-space: normal;
            padding:0;
            text-align: justify;
            text-justify: inter-cluster;
            margin: 0.7em 0 3em 0;
        }

		/* Spotlight */
        .spotlight {
            height: 570px;
        }
			.spotlight.top .content {
				padding: 3.825em 0 1.825em 0;
			}

			.spotlight.bottom .content {
				padding:0;
			}

			.spotlight.left .content, .spotlight.right .content {
				padding: 4.5em 2.5em;
				width: 25em;
                background-position: 70% 59%;
			}

		/* Wrapper */

			.wrapper {
				padding: 2em 0 2.5em 0;
			}

		/* Dropotron */

			.dropotron.level-0 {
				font-size: 1em;
			}

		/* Banner */

			#banner .content {
                max-width: 81.3em;
			}

		/* Footer */

			#footer {
				padding: 3em 0 0;
			}

	}

/* Medium */

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

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}
        p {
            font-size: 0.86em;
            font-weight: 300;
            line-height: 1.9em;
            white-space: normal;
            padding:0 2em;
            text-align: justify;
            text-justify: inter-cluster;
            margin: 0.7em 0 3em 0;
        }

		/* Spotlight */

			.spotlight {
				background-attachment: scroll;
				height: auto;
                border-top: 0px solid #ffd301;
                margin-top: -3em;
			}

				.spotlight .image.main {
					display: block;
					margin: 0;
					max-height: 40vh;
					overflow: hidden;
				}

				.spotlight .content {
					background-color: #fbf0d6;
					border-width: 0 !important;
					border-top-width: 0em !important;
					bottom: auto !important;
					left: auto !important;
					padding: 0em !important;
					position: relative;
					right: auto !important;
					text-align: center;
					top: auto !important;
					width: 100% !important;
				}

					.spotlight .content ul.actions {
						-moz-justify-content: center;
						-webkit-justify-content: center;
						-ms-justify-content: center;
						justify-content: center;
						width: 100%;
						margin-left: 0;
					}

						.spotlight .content ul.actions li:first-child {
							padding: 0 1em 0 1em;
						}

				.spotlight .goto-next {
					display: none;
				}

		/* Wrapper */

			.wrapper {
				padding: 1.3em 2.5em 2.5em 2.5em;
			}
        /* Logo */
        .logo {
            height: 3.7em;
            margin: 0.5em;
            margin: 0.7em 0;
            }
        .footerlogo {
            width: 100%;
            height: 272px;
            padding:2em ;
            display: flex;
            align-content: center;
            flex-wrap: nowrap;
            justify-content: space-around;
            }
        .footerlogo imag{
            width: auto;
            height: 20em;
            }
		/* Banner */

			#banner {
				background-attachment: scroll;
			}

				#banner .goto-next {
					height: 7em;
				}

				#banner .content {
					padding: 5em 0;
					text-align: center;
				}

					#banner .content header {
						display: block;
						margin: 1em 0 1em 0;
						text-align: center;
                        line-height: 2.5em;
					}

					#banner .content .image {
						margin: 0;
					}

		/* Footer */

			#footer {
				padding: 4.5em 0;
			}

	}

/* Small */

	#navPanel, #titleBar {
		display: none;
	}

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

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, select, textarea {
				font-size: 12pt;
			}

			h2 {
				font-size: 2.7em;
			}

			h3 {
				font-size: 1.2em;
                padding: 10px;
			}

			h4 {
				font-size: 1.23em;
                font-weight: 600;
                line-height: 1.65;
			}

		/* Section/Article */

			header p br {
				display: none;
			}

			header h2 + p {
				font-size: 1em;
			}

			header h3 + p {
				font-size: 1em;
			}

			header h4 + p,
			header h5 + p,
			header h6 + p {
				font-size: 1.33em;
            }
            #banner .content h5 {
                font-size: 1em;
                color:#000000;
                margin: 0;
                top: 0;
                line-height: 1.65em;
                font-weight: 400;
                width:100%;
                padding:16px;
            }

			header.major {
				margin: 0 0 1em 0;
			}

		/* Goto Next */

			.goto-next:before {
				height: 0.8em;
				margin: -0.4em 0 0 -0.6em;
				width: 1.2em;
			}

		/* Spotlight */

			.spotlight {
				box-shadow: 0 0em 0em 0 rgba(0, 0, 0, 0.25);
			}

				.spotlight .image.main {
					max-height: 60vh;
				}

				.spotlight .content {
					border-top-width: 0em !important;
					padding: 3.25em 1.5em 1.25em 1.5em !important;
				}
            .hero {
                  position: relative;
                  width: 100%;
                  height: 50vh;
                  overflow: hidden;
                  margin-top: 2.6em;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
		/* Wrapper */

			.wrapper {
				padding: 1em 1.5em 1.25em 1.5em;
			}

		/* Header */

			#header {
				display: none;
			}

		/* Banner */

			#banner {
				
				min-height: calc(100vh - 50px);
			}

				#banner:before {
					height: 0px;
				}

				#banner .content {
					padding: 4.0625em 1.5em 4.875em 1.5em;
				}

					#banner .content header h2 {
						font-size: 1.5em;
					}

					#banner .content .image {
						
						width: 90%;
					}

		/* Nav */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 0px;
				padding-top: 5.3em !important;
			}

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 5.3em;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 1001;
				background: #ffd300;
			}

				#titleBar .title {
					color: #ffffff;
					display: block;
					font-weight: 300;
					height: 70px;
					line-height: 44px;
					text-align: center;
				}

					#titleBar .title a {
						color: inherit;
						border: 0;
					}

				#titleBar .toggle {
					text-decoration: none;
					height: 60px;
					left: 0;
					position: absolute;
					top: 0;
					width: 90px;
					outline: 0;
					border: 0;
				}

					#titleBar .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
					}

					#titleBar .toggle:before {
						background: #;
						color: rgba(12, 168, 187, 1);
						content: '\f0c9';
						display: block;
						font-size: 18px;
						height: 44px;
						left: 0;
						line-height: 44px;
						position: absolute;
						text-align: center;
						top: 35%;
						width: 68px;
					}
            
			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 1002;
				background: #1362c9;
				padding: 0.75em 1.25em;
			}

				#navPanel .link {
					border: 0;
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					color: rgba(255, 255, 255, 0.75);
					display: block;
					height: 3em;
					line-height: 3em;
					text-decoration: none;
				}

					#navPanel .link:hover {
						color: inherit !important;
					}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link.depth-0 {
						color: #ffffff;
                        font-size: 1.13em;
                        font-weight: 500;
					}

					#navPanel .link .indent-1 {
						display: inline-block;
						width: 1.25em;
					}

					#navPanel .link .indent-2 {
						display: inline-block;
						width: 2.5em;
					}

					#navPanel .link .indent-3 {
						display: inline-block;
						width: 3.75em;
					}

					#navPanel .link .indent-4 {
						display: inline-block;
						width: 5em;
					}

					#navPanel .link .indent-5 {
						display: inline-block;
						width: 6.25em;
					}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Footer */

			#footer {
				padding: 3.25em 1.5em;
			}

	}

/* XSmall */

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

		/* Basic */

			html, body {
				min-width: 320px;
			}

			body, input, select, textarea {
				font-size: 12pt;
			}

		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			.button {
				padding: 0;
			}

		/* Spotlight */

			.spotlight .image.main {
				max-height: 50vh;
			}

			.spotlight .content {
				padding: 0em !important;
			}

		/* Wrapper */

			.wrapper {
				padding: 1.8em 1.25em 1em 1.25em;
			}

		/* Banner */

			#banner .content {
				padding: 0em 0em 0.25em 0em;
			}
            
		/* Footer */

			#footer {
				padding: 0;
                text-align: center;
			}

            #footer .copyright {
                line-height: inherit;
                margin: 0em;
            }

            #footer .copyright li {
                border-left: 0;
                display: block;
                margin: 0;
                padding: 0;
            }

	}

/* Video 배경 재생 */
.hero {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1280px) {
    .hero { height: 300px; }
}
@media (max-width: 1024px) {
    .hero { height: 260px; }
}
@media (max-width: 768px) {
    .hero { height: 180px; }
}
.video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  min-height: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  object-fit: cover;
}

/* #one 섹션이 inactive 상태여도, hero-text가 절대로 숨겨지지 않도록 함 */
#one .hero-text {
  position: relative !important;    /* z-index를 사용할 수 있게 설정 */
  z-index: 9999 !important;           /* 영상(.video-bg) 위에 뜨도록 충분히 높은 값 지정 */
  opacity: 1 !important;            /* opacity 0이던 규칙을 모두 덮어쓰기 */
  transform: none !important;       /* translateY 같은 변환을 제거 */
  visibility: visible !important;   /* display:none / visibility:hidden 방지 */
  display: block !important;        /* 혹시 display:none으로 설정된 게 있다면 보이도록 강제 */
}
.hero-text {
  z-index: 2;
  color: #ffd300;
  text-align: center;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 97vw;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hero-text {
    font-size: 0.63em;
      line-height: 0.9em;
  }
}
/* TOP스크롤 버튼 */

    #scrollTopBtn {
      position: fixed;
      width: 60px;
      height:60px;
      bottom: 20px;
      right: 14px;
      display: none; /* 기본은 숨김 */
      background-color: #1362c9;
      color: white;
      border: none;
      text-align: center;
      border-radius: 50%;
      font-size: 14px;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    #katalkBtn2 {
      position: fixed;
      width: 60px;
      height:60px;
      bottom: 90px;
      right: 14px;
      display: none; /* 기본은 숨김 */
      background-color: #ffdf2c;
      color: #683d0b;
      border: none;
      text-align: center;
      border-radius: 50%;
        padding:10px 0;
      font-size: 27px;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }

    /* 모바일 화면에서만 버튼 보이기 */
    @media (max-width: 768px) {
      #scrollTopBtn {
        display: block;
      }
      #katalkBtn2 {
        display: block;
      }        
    }

    /* 스크롤 부드럽게 */
    html {
      scroll-behavior: smooth;
    }

/* ──────────────── PC 전용: 로고 고정 & 그림자 효과 ──────────────── */
@media screen and (min-width: 737px) {
  /* h1#logo 요소 자체를 fixed 처리 */
  #logo {
    position: fixed !important;
    top: 1em;     /* 뷰포트 상단에서 1em 아래에 위치 */
    left: 1em;    /* 뷰포트 왼쪽에서 1em 떨어진 위치 */
    z-index: 1001;/* 헤더나 다른 요소 위로 올라오도록 충분히 큰 값 */
    pointer-events: auto;
  }

  /* PNG 투명 배경 로고에 흰색 drop-shadow 적용(모양을 따라 그림자) */
  #logo img {
    /* 0px 수평, 2px 수직, 8px 블러, 흰색 16% 불투명 */
    filter: drop-shadow(0 2px 14px rgba(255,255,255,0.36));
  }

  /* box-shadow 를 쓰고 싶다면 아래 주석을 풀어서 사용하세요.
  #logo img {
    box-shadow: 0 2px 8px rgba(255,255,255,0.16);
  }
  */
}
/* ─────────────────────────────────────────────────────────────────── */
/* — 모바일(≤736px)에서만 navPanel 하단에 아이콘 4개 보이기 */
@media screen and (max-width: 736px) {
  #navPanel .mobile-icons-menu {
    display: flex;
    justify-content: space-around;
    padding: 3em 0;
    border-top: 1px solid rgba(255,255,255,0.1);
      font-size: 11px;
  }
  #navPanel {
    padding-bottom: 1.5em; /* 아이콘 공간 확보 */
  }
  #navPanel .mobile-icons-menu li {
    list-style: none;
      text-align: center;
    overflow-wrap:break-word;
  }
  #navPanel .mobile-icons-menu a {
    color: #00afea;
    font-size: 21px;
      text-align: center;
  }
  #navPanel .mobile-icons-menu a div{
    color: #00afea;
    font-size: 0.4em;
    margin-top: -12px;
  } 
  #navPanel .mobile-icons-menu a:hover {
    color: #fff;
  }
}

/* — 데스크탑(≥737px)에서는 완전 숨김 */
@media screen and (min-width: 737px) {
  #navPanel .mobile-icons-menu {
    display: none !important;
  }
}

#columns{
    column-width:301px;
    column-gap: 20px;
    margin:0 24px;
}
@media screen and (max-width: 737px) {
    #columns{
            margin:0;
    }
}
#columns figure{
    display: inline-block;
    background-color: #fff;
    border: 1px solid rgb(255 211 1);
    border-radius: 8px;
    margin: 0;
    margin-bottom: 22px;
    padding: 20px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.15);
}

/* 입학 전형 안내 박스 카드 부분 */
.card2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8em;
  margin: 20px auto;
}

.card2 {
  padding: 12px;
  text-align: center;
  background-color: #FFD100;
  border-radius: 16px;
}

.card2 h6 {
  font-size: 10px;
  color: #333;
}

.card2 h1 {
  color: #333;
  font-size: 24px;
}

.card2 p {
  color: #333;
  padding: 20px;
    margin-bottom: -0.1em;
  font-size: 0.9em;
}
/* 반응형: 모바일 화면(768px 이하)에서는 1열 */
@media (max-width: 768px) {
  .card2-grid {
    grid-template-columns: 1fr;
  }
}



.flayer {
  position: absolute; /* 부모 요소를 기준으로 위치 지정 */

  padding: 10px;
  z-index: 999; /* 다른 요소보다 위에 배치 */
}