@charset "UTF-8";
/********************************************************
■ 사이트 초기 설정
********************************************************/
:root { --main-color1:#619e38; --main-color2:#44841a; --main-color3:#5b8540; --main-width:1230px; --main-width2:1030px;}

/* 내용 드래그했을때 선택 블록 */
::selection { background: var(--main-color1, #333) !important; color: white; }
::-moz-selection { background: var(--main-color1, #333) !important; color: white; }

/********************************************************
■ HTML 요소 초기화
********************************************************/
/* 기반 글자크기 재정의 -- 상대단위(rem) 사용에 중요함. */
html, body { font-family: "SUIT Variable", sans-serif; font-size: 16px; font-weight:400; }
body { color: #333; transition: all 200ms; overflow-x:hidden; width:100%; }

.h0, .h1, .h2, .h3, .h4, .h5, .h6, .h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n, h1, h2, h3, h4, h5, h6 { margin-top: 0; }

.c, .c-full { max-width: var(--main-width); }
.c1, .c-full { max-width: var(--main-width2); }
@media (max-width: 1024px) {
	.c, .c-700, .c-800, .c-900, .c-1000, .c-1100, .c-1200, .c-1300, .c-1400, .c-1500, .c-1600, .c-1700, .c-1800, .c-1900, .c-2000 { padding-left:20px; padding-right:20px; }
}



.green-box {
  position: absolute;
  z-index: -100; /* green box will be above black box */
  width: 100%;
  left: 0px;
  top: 0px;
  height : 50%;
  /* padding-top:calc(100/2*100%); */
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  }

@media (max-width: 1150px) { 

.green-box {
  position: absolute;
  z-index: -100; /* green box will be above black box */
  width: 100%;
  left: 0px;
  top: 0px;
  height: 30%;
  background-size: cover;
}
}

@media (max-width: 1280px) { 

.green-box {
  position: absolute;
  z-index: -100; /* green box will be above black box */
  background: lightgreen;
  width: 100%;
  left: 0px;
  top: 0px;
  height: 30%;
background-size: cover;
}
}


@media (max-width: 1024px) {

.green-box {
  position: absolute;
  z-index: -100; /* green box will be above black box */
  background: lightgreen;
  width: 100%;
  left: 0px;
  top: 0px;
  height: 30%;
background-size: cover;
}
}


@media (max-width: 767px) {
    #top { height:60px; }
    #top .logo { height:40px; }

.green-box {
  position: absolute;
  background-size: cover;
  z-index: -100; /* green box will be above black box */
  width: 100%;
  left: 0px;
  top: 0px;
  height: 30%;
  Object-fit: cover;
background-size: cover;

}

}


@media (max-width: 767px) {
	html, body { font-size: 14px; }

    body { -ms-overflow-style: none; scrollbar-width: none; }
    body::-webkit-scrollbar { display: none; }
}



/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { height:100px; display:flex; justify-content:center; align-items:center; background:url('../img/ox_bg1.png') no-repeat center/cover; }
#top .logo { width:200px; height:60px; background:url('../img/logo-w.png') no-repeat center/contain; }

@media (max-width: 767px) {
    #top { height:60px; }
    #top .logo { height:40px; }

}

#top_main { height:100px; display:flex; justify-content:center; align-items:center; }
#top_main .logo { width:200px; height:60px; background:url('../img/logo-w.png') no-repeat center/contain; }

@media (max-width: 767px) {
    #top_main { height:60px; }
    #top_main .logo { height:40px; }
}
/********************************************************
■ Layout : 레이아웃
********************************************************/
#page .header { text-align:center; margin-bottom:20px; }
#page .header .head { font-size:1.25rem; font-weight:600; color:#111;  border:1.2px solid #aaa; padding-bottom:10px;padding-top:10px;}
#page .header .desc { color:#888; margin-top:5px; }

#page .header .head_big { font-size:2rem; font-weight:600;   }

@media (max-width: 767px) {
    #page .header { margin-bottom:15px; }
    #page .header .head { font-size:1.25rem; }
	 #page .header .head_big { font-size:1.5rem; }
}
.bg_sky{background:#e2f4fd;}
.bg_beige{background:#f0ebdf;}
/********************************************************
	■ 타일 스타일 공용
********************************************************/
.tiles { visibility: hidden; }
.tiles.loaded { visibility: visible; }
.tiles::before, .tiles::after { content: ""; clear: both; display: block; }

.tiles .tile { float:left; margin-bottom:10px; text-align:center; visibility: hidden; }
.tiles .tile .a { position:relative; display:block; width:100%; height:100%; padding:0; }
.tiles .tile .a::before { content:""; position:absolute; z-index:1; transition:all .3s ease; }
.tiles .tile .a::after { content:""; position:absolute; z-index:1; transition:all .3s ease; }

.tiles .tile .a .a2, .tiles .tile .a .a3 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.tiles .tile .a .a2::before, .tiles .tile .a .a2::after, .tiles .tile .a .a3::before, .tiles .tile .a .a3::after { content: ""; position: absolute; transition-timing-function: linear; z-index: 3; }

.tiles .image { position: relative; display: block; overflow: hidden; }
.tiles .image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .more { display:none; position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 2; }
.tiles .image .img { background-repeat:no-repeat; background-size:cover; background-position:center; transition:all .3s ease; }
.tiles .content { height:100%; text-align: left; }


@media (max-width: 767px) {
	.tiles { margin: 0 -5px; }
	.tiles .tile { padding: 0 5px; }
}
/********************************************************
■ Footer : 하단 푸터
********************************************************/
#bottom { letter-spacing:0; }

.footer { position:relative; padding:40px 0; font-size:.875rem; color:#777; text-align:center; border-top:1px solid #eee; }

.footer .go-top { position:absolute; border:1px solid #ddd; border-radius:50%; background:#fff; display:block; width:40px; height:40px; top:-20px; left:50%; margin-left:-20px; cursor:pointer; transition-duration:300ms; }
.footer .go-top span { line-height:50px; font-size:.625rem; font-weight:600; }
.footer .go-top span:before, .footer .go-top span:after { content:""; position:absolute; width:1px; height:7px; background:#888; }
.footer .go-top span:before { right:55%; top:10px; transform:rotate(45deg); }
.footer .go-top span:after { left:55%; top:10px; transform:rotate(-45deg); }
.footer .go-top:hover { border-color:#333; background:#333; color:#eee; }
.footer .go-top:hover span:before, .footer .go-top:hover span:after { background:#eee; }

.footer .desc { font-size:1.125rem; margin-bottom:15px; }
.footer .desc li { margin:5px 0; }
.footer .desc li span { display:inline-block; margin:0 5px; font-size:1rem; }


.footer .copyright { font-size:.75rem; }
.footer .copyright a { color:#f0f0f0; margin:0 2px; }
.footer .copyright a:hover { color:#ccc; }

.footer .sns { display:flex; flex-wrap: wrap; justify-content:center; margin-top:35px; }
.footer .sns a { color:#aaa; text-align:center; margin:0 7px; }

@media (max-width: 767px) {
    .footer .desc li:first-child { margin-bottom:10px; }
    .footer .desc li span { display:block; }
}