﻿
@font-face {
 font-family: 'NanumBarunpen';
 src: url(webfont/NanumBarunpen/NanumBarunpenR.eot);
 src: url(webfont/NanumBarunpen/NanumBarunpenR.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunpen/NanumBarunpenR.woff) format('woff'),
      url(webfont/NanumBarunpen/NanumBarunpenR.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumBarunGothic';
 src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
 src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'),
      url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumBareunGothicUltraLight';
 src: url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.eot);
 src: url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.woff) format('woff'),
      url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumGothicEco';
 src: url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.eot);
 src: url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.woff) format('woff'),
      url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumBrush';
 src: url(webfont/NanumBrush/NanumBrush.eot);
 src: url(webfont/NanumBrush/NanumBrush.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBrush/NanumBrush.woff) format('woff'),
      url(webfont/NanumBrush/NanumBrush.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumPen';
 src: url(webfont/NanumBrush/NanumPen.eot);
 src: url(webfont/NanumBrush/NanumPen.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBrush/NanumPen.woff) format('woff'),
      url(webfont/NanumBrush/NanumPen.ttf) format('truetype');
}

@font-face {
 font-family: 'NanumSquare';
 src: url(webfont/NanumSquare/NanumSquareR.eot);
 src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumSquare/NanumSquareR.woff) format('woff'),
      url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}

@font-face {
 font-family: 'JejuMyeongjo'; 
 src: url(webfont/JejuMyeongjo/JejuMyeongjo.ttf) format('truetype');
}

@font-face {
    font-family: 'pretendard-bold';
    src: url('fonts/pretendard-bold.otf') format('opentype');
}
@font-face {
    font-family: 'pretendard-regular';
    src: url('fonts/pretendard-regular.otf') format('opentype');
}
@font-face {
    font-family: 'nanumsquareneo-brg';
    src: url('fonts/nanumsquareneo-brg.ttf') format('truetype');
}
@font-face {
    font-family: 'nanumsquareneo-cbd';
    src: url('fonts/nanumsquareneo-cbd.ttf') format('truetype');
}
@font-face {
    font-family: 'nanumsquareneo-deb';
    src: url('fonts/nanumsquareneo-deb.ttf') format('truetype');
}

@font-face {
    font-family: 'freesentation-4Regular';
    src: url('fonts/Freesentation-4Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'freesentation-7Bold';
    src: url('fonts/Freesentation-7Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'freesentation-8ExtraBold';
    src: url('fonts/Freesentation-8ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'IropkeBatangM';
    src: url('fonts/IropkeBatangM.woff') format('woff');
}

.white{color:white!important;}

.IropkeBatangM{font-family: 'IropkeBatangM';}

.pretendardB{font-family: 'pretendard-bold';}
.pretendardR{font-family: 'pretendard-regular';}
.nanumBrg{font-family: 'nanumsquareneo-brg';}
.nanumCbd{font-family: 'nanumsquareneo-cbd';}
.nanumDeb{font-family: 'nanumsquareneo-deb';}

.freesentation4{font-family: 'freesentation-4Regular';}
.freesentation7{font-family: 'freesentation-7Bold';}
.freesentation8{font-family: 'freesentation-8ExtraBold';}


.fontsize61{font-size: 61px;}
.fontsize55{font-size: 55px;}
.fontsize42{font-size: 42px;}
.fontsize36{font-size: 36px;}
.fontsize32{font-size: 32px;}
.fontsize30{font-size: 30px;}
.fontsize26{font-size: 26px;}
.fontsize24{font-size: 24px;}
.fontsize22{font-size: 22px;}
.fontsize18{font-size: 18px;}
.fontsize16{font-size: 16px;}
.fontsize14{font-size: 14px;}

.no-padding {    padding-right: 0;    padding-left: 0;
}
.no-margin{margin:0;}


/* ----------------------------------------------
 * Generated by Animista on 2025-9-30 22:8:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}


@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}











body {
 font-family: 'pretendard-regular' , 'Noto Sans Korean-medium', sans-serif;
}
.container-fluid {
    padding:0px;
}
#subtop {
    margin-top: 150px;
}
.layout-header {
    padding-left:0px;
    padding-right:0px;
}
.theme-list table{ font-family:'Noto Sans Korean-medium', sans-serif;}
/* all-menu s */

.all-wrapper-top { float:left;color: #fff; font-size: 30px; width: 90%; text-align:center; padding: 50px; font-weight: bold;}
.gnb-all { display: none; position: fixed; z-index: 99999; background: white; top: 0; left: 0; width: 100%; height: 100%; }
.gnb-all .all-wrapper .all-close {    position: absolute;color: black;cursor: pointer;font-weight: 600;width: 10%;padding-top: 30px;right: 0;font-size: 5em;}
.gnb-all .all-wrapper > ul > li { display: inline-block; vertical-align: top; width:20%; }
.gnb-all .all-wrapper > ul > li > a { margin-bottom: 30px; font-size: 1.5rem; font-weight: 600;     border-bottom: 3px solid black;
    width: max-content;}
.gnb-all .all-wrapper a { display: block; color: black; }
.gnb-all .all-wrapper > ul > li:first-child  { display: none; }
.gnb-all .all-wrapper > ul > li > ul > li > a { color: black; display: block; margin : 10px 0px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnb-all .all-wrapper > ul > li > ul > li >   ul{ padding-left: 0.3rem; font-size: 1rem;     color: #bed4eb;}
.gnb-all .all-wrapper > ul > li > ul > li >   ul a{     color: #285335; font-size: 0.9rem; }
.all-wrapper-ul{padding-top:50px; display: flex; width:100%; }
.all-wrapper.container{position:relative;}

.gnb-all .all-wrapper > ul > li:nth-of-type(2){width: 23%;}



/* all-menu e */


/*상단*/
#header {
    position:absolute;
    width:100%;
      height: 75px;  
    /* padding-top: 10px; */
    /* padding-left: 45px; */
    /* padding-right: 20px; */
    /* background: #fff url(../images/sub/bg_gnb01.jpg) repeat-x 0 90px; */
	display: flex;
	background: transparent;
    overflow: hidden;
	padding-top:1rem;
    z-index:99;        align-items: flex-start;
    justify-content: center;
}

.header-gnb {
    padding-top:20px;
}

.header-gnb > ul > li {
    float:left;
    text-align:center;
    margin:0 0px;
    position:relative;
}

.header-gnb > ul > li > a {
    color:black;
    display: block;
    width: 100%;
    text-align: center; 
    font-size:22px;
    text-decoration:none;
	padding-bottom:1rem;
}

    .header-gnb > ul > li.on:before {
        content: "";
        position: absolute;
        top: 52px;
        left: 52%;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 8px solid black;
        margin-left: -7px;
    }

.header-gnb > ul > li ul {
   border-right: 1px solid #e6e6e6;
   height: 330px;
   padding:25px 0px;
   margin-top:0px;
}
.header-gnb > ul > li ul > li > a  {
    color:#777;
    font-size:15px;
    line-height:2;
    font-weight:300;
    text-decoration:none;
}
/*li 마우스오버 컬러*/
.hover-color {
    background:#285335;
  
}
.hover-font-color {
    color:white!important;
}

/*세부컨트롤 대메뉴 li 간격 조정*/
.header-gnb > ul > li:nth-child(1) {
    width:150px;
}
.header-gnb > ul > li:nth-child(2) {
    width:150px;
}
.header-gnb > ul > li:nth-child(3) {
    width:150px;
}
.header-gnb > ul > li:nth-child(4) {
    width: 150px;
}
.header-gnb > ul > li:nth-child(5) {
    width:150px;
} 


 /*세부컨트롤 ul width값 조정*/
.header-gnb > ul > li:nth-child(1) ul{
    width:150px;
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(2) ul{
    width:150px;
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(3) ul{
    width:150px;
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(4) ul{
    width:150px;
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(5) ul{
    width:150px;  
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(6) ul{
    width:150px;  
    word-break:keep-all; 
}
.header-gnb > ul > li:nth-child(7) ul{
    width:150px;  
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(8) ul{
    width:150px;  
    word-break:keep-all;
}
.header-gnb > ul > li:nth-child(9) ul{
    width:150px;  
    word-break:keep-all;
}



.login {
    height: 70px;
    display: flex;
    align-items: center; width:12%;
}

.login .mm-login { 
    display: flex;
    align-items: center; gap: 3px;
}

.login .mm-login a { 
    text-decoration:none; color:black;
}

.img-float-left.icon-left-img {
    border: 1px solid black;
    border-radius: 50px;
    padding: 0px 2rem;
}

.img-float-left.icon-left-img a {
    color:black; text-decoration:none;
}

.layout-sub .subtitle h1{

    font-size: 2.5rem;
    padding: 2rem 0;
    text-align: center;

}

/*하단*/
#footer{
    background:#787878;
}
.layout-footer {
    position: relative;
    margin-top: 40px;
}
.layout-footer .footerlabel p {
    font-family: "Nanum Gothic", sans-serif;
}

.footer-div {
    border-top:1px solid #787878; 
    padding-top:70px; 
    padding-bottom:50px;
}
.footerlabel {
    padding-left:40px;
    color:#E4E4E4;
    font-size:15px;
   
}
.no-padding {
    padding:0px;
}

.img-float-left {
    padding:8px 10px;
    float:left;
}



/*depth 4 를 3에서 필요한애들로만 사용 귀찮아서 클래스명은 안바꿈*/
.depth4 { text-align:right; margin-top:20px; margin-bottom:20px;}
.depth4 li { display:inline-block; padding:5px 5px; margin:0px 15px; }
.depth4 li a  { text-decoration:none; font-size:16px; color:#000; font-family:NanumBarunGothic; }
.depth4 li.active { border-bottom:3px solid; }
.depth4 li.active a { font-weight:500; }

 .gnb-right-icon {
            width: 15%;
    float: left;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    }
    .header-logo {
        width:15%;
        float:left;    padding-top: 0.7rem;
    } 
    .header-gnb {
         width:45%;
         float:left;
         padding-left:0px;
         padding-right:0px;

    }
     #gnb-wrap {
        display:none;
        float: right;
        width: 50px;
        padding-top: 10px;
    }
	
	
	
	
	
section#section-5 {
    padding: 5rem;
    background: #1a3127; color:white;
}
section#section-5 .footer-bottom {
    line-height: 2.0; margin-top: 2rem;
}

	

@media (max-width:1799px) {
	.gnb-right-icon {
			/* display:none; */
		}
	.header-gnb {
			 /* width:80%; */
			 float:left;          margin-left: 3rem;
		}
	
	
	.header-gnb > ul > li:nth-child(1) {
		width:18%;
	}
	.header-gnb > ul > li:nth-child(2) {
		width:18%;
	}
	.header-gnb > ul > li:nth-child(3) {
		width:18%;
	}
	.header-gnb > ul > li:nth-child(4) {
		width: 18%;
	}
	.header-gnb > ul > li:nth-child(5) {
		width: 18%;
	}
	
	
	
	.header-gnb > ul > li:nth-child(1) ul{
		width:100%; 
		}
		.header-gnb > ul > li:nth-child(2) ul{
			width:100%; 
		}
		.header-gnb > ul > li:nth-child(3) ul{
			width:100%; 
		}
		.header-gnb > ul > li:nth-child(4) ul{
			width:100%; 
		}
		.header-gnb > ul > li:nth-child(5) ul{
			width:100%; 
		}
	
	
	.img-float-left.icon-left-img {
		border: 1px solid black;
		border-radius: 50px;
		padding: 0px 1rem;
	}
	
		.login .mm-login a, .livebox h4{ 
		font-size: 0.8rem;
	}
	
	
	
}

@media (max-width:1550px) {
    /*세부컨트롤 대메뉴 li 간격 조정*/
	
	.fontsize61{font-size: 2rem;}
	.fontsize55{font-size: 1.9rem;}
	.fontsize42{font-size: 1.8rem;}
	.fontsize36{font-size: 1.7rem;}
	.fontsize32{font-size: 1.5rem;}
	.fontsize30{font-size: 1.4rem;}
	.fontsize26{font-size: 1.3rem;}
	.fontsize24{font-size: 1.2rem;}
	.fontsize22{font-size: 1.1rem;}
	.fontsize18{font-size: 1.0rem;}
	.fontsize16{font-size: 0.9rem;}
	.fontsize14{font-size: 0.8rem;}
	
	
	
	
	
	
	
	
   
}
@media(max-width:1299px) {
    .header-logo {
        width:10%;
    }
    .header-logo a img {
        width:150px;
        padding-top:10px;
    }
    .header-gnb {
                margin-left: 1rem;  width:60%;
    }
	
	
	.img-float-left.icon-left-img { 
        padding: 0px 7px;
    }
	.gnb-right-icon {
		width: 13%; 
		gap: 1rem;
	}
	.login { 
		width:   10%;
	}
		
	.login .mm-login a, .livebox h4 {
        font-size: 0.5rem;
    }
	
	
}
@media (max-width:1199px) {
      .header-logo {
        width:15%;
        float:left;
    } 
    .header-gnb {
            width: 49%;
    }
     .header-logo a img {
        width:150px;
        padding-top:10px;
    }

 


}

@media (min-width:768px) and (max-width:1199px) {
   .footer-div {
        padding-left:0px;
        padding-right:0px;
        width:752px;
    }
     .footerlabel {
        padding-left:0px;
        padding-right:0px;
    }
    #gnb-wrap {
        padding-top:0px!important;
    }
   
}
@media(min-width:768px) and (max-width:1199px) {
   
}

@media(max-width:991px) {
     .header-gnb {
        display:none;
    }
    #gnb-wrap {
        display:inline-block;
    }
    .header-logo {
        width: calc(100% - 18rem);
    }
	
	
	    .login .mm-login a, .livebox h4 {
        font-size: 1rem;
    }
	.login {
        width: 10rem; display: none;
    }
	    .gnb-right-icon {
        width: 12rem; 
    }
	
	    .gnb-right-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0rem;
        height: 70px;
        padding: 0;
    }
	
	.mob-login { overflow:hidden; padding:15px 0; border-bottom:1px solid #808080; margin-bottom:10px; }
.mob-login li { float:right; overflow:hidden; }
.mob-login a { display: inline-block !important; font-size: 17px !important; border: 0px !important; box-shadow: none !important; color: #aaa !important; padding: 0px 10px !important; }
.mob-login a .fa { font-size:20px!important; }
	
	.img-float-left.icon-left-img {
        padding: 0px 1rem;
    }
	
	.header-logo a img {
	width: 170px;}
	
}

@media (max-width:768px) {
    .footerlabel {
        padding-top:20px;
        padding-left:0px;
        padding-right:0px;
    }
     #gnb-wrap {
        padding-top: 3px!important;
    }
    

    .header-mobile-gnb {float:right; padding:0px 0px 0px; font-size:30px;}
	
	#header { 
		justify-content: space-between; padding-left:0;
	}
	.header-logo {
        width: calc(100% - 18rem);
        min-width: 140px;
    }
	
	#gnb-wrap {     width: 30px;}
	
	
	section#section-5 {    padding: 2rem;}
	section#section-5 .footer-bottom{    margin-top: 0rem; word-break: keep-all;}
	
}

