@charset "utf-8";
@import url(./reset.css);
.wrap { width:100%; margin:0 auto; padding:0; color:#666; background-color:#ffffff;height: 100%;}
#header_container{width: 100%;
    margin: auto;}
.header { width:100%; height:72px; background-color:#ffffff; display:none; border-bottom:1px solid #000000;}
.header .header_wrap { position:relative; margin:0 auto; padding-top:5px; }
.header .header_ti { }
.header .header_ti h1 { width:150px;  margin:auto auto; font-size:0; display:inline-block;}
.header .header_ti h1 a { width:150px; display:block; }
.header .header_ti h1 a img { width:150px; height:auto; display:block; }

.conupbar{    border-bottom: 2px solid #cfcfcf;
    position: relative;
    display: block;
    float: left;
    width: 100%;height: 70px;
    box-sizing: border-box;}
.headerM { float: left;
    display: block;
    width: 180px;
    height: 100%;}
.headerM .header_wrap {position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;}
.headerM .header_ti { }
.headerM .header_ti .divA {  margin-left:10px; font-size:0; display:inline-block; }
.headerM .header_ti .divA a { display:block; }
.headerM .header_ti .divA a .spanA { width:45px; height:auto; display:block; float:left;padding-top:15px;}
.headerM .header_ti .divA a .spanB { width:209px; height:auto; display:block;  float:left;padding-top:17px;}
.headerM .header_ti .divA a .spanA img { width:100%; height:auto; display:block; float:left;transition: transform .3s ease;-ms-transition: all .3s ease;}
.headerM .header_ti .divA a .spanB img { display:block; float:left;width: 180px;height: auto;}
.headerM .header_ti .divA a:hover .spanA img {transform: rotate(45deg);-ms-transform: rotate(45deg);}

.container {position: relative;width: 100%;height: 100%;display: block;}

.nav {display: block;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    z-index: 101;
    margin: auto;
    float: left;height: 100%;}
.nav .ulnav {position:relative;float:left;height:72px;}
.nav .floatleft {    margin: auto;
    float: left;
    width: 100%;}
.nav ul { letter-spacing: -4px;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);}
.nav ul:before, .nav ul:after { content:""; display:table; }
.nav ul:after {clear:both;}
* html .nav ul {zoom:1;}
.nav ul {zoom:1;}

.nav ul li { float:left; position:relative; letter-spacing:normal; white-space:normal; margin-left:10px;}
.nav ul li div {font-size: 14px; border: 1px solid transparent;
    padding: 3px 2px;
    position: relative;
    line-height: 20px;
    color: #1c1c1c;
    text-decoration: none;
    display: inline-block;
    font-weight: 400;
    width: 70px;
    text-align: center;
    box-sizing: border-box;}
.nav ul li div:hover { background-color:#ebebeb; border: 1px solid #cdb958;}
.nav ul li div.iconsub { padding-right:17px; background-image:url(https://www.jsmoa.com/img/icon_arrow.gif); background-repeat:no-repeat; background-position:right 14px; }
.nav ul li .spanone {display: block;
    width: 8px;
    height: 8px;
    background: #b9b9b9;
    border-radius: 50%;
    margin: auto;}

.nav ul li.current div {}
.nav ul li.current div.iconsub { background-position:right 14px; }
.nav ul li.current .spanone {display: block;
    width: 8px;
    height: 8px;
    background: #a727a9;
    border-radius: 50%;
    margin: auto;}


.section {    width: 100%;
    box-sizing: border-box;
    /*height: 100%;*/
    float: left;
    position: absolute;
    top: 72px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    display: block;
    /*padding-top: 72px;*/
    box-sizing: border-box;}
.section .article {position:relative;background: #DBD8D1;display:block;}
.footer { margin:auto auto;border-top:0px solid #000000; background-color:#002503; }
.footer .CreateBy { margin:0 auto; padding:10px 0 10px 0;text-align:center; font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','나눔 고딕','Nanum Gothic','Open Sans',sans-serif,'Malgun Gothic', Gulim, Arial, Helvetica,sans-serif, Arial, Helvetica, Verdana; }
.footer .CreateBy span {  color:#CCC; text-align:center;font-size:.8em; }
.footer .CreateBy span a { color:#fff; font-weight:bold; text-decoration:none;}
.footlogobox{position: relative;
    display: block;
    float: left;
    aspect-ratio: 17 / 7;
    width: 170px;
    margin: 40px 0 0 25px;}

.wrap { min-width:950px;}

.header .header_wrap,  .section, .nav .floatleft, .footer, .footer .CreateBy {}
a.header_mobile_totalMenu { position:absolute; width:40px; height:40px; left:15px; top:15px; font-size:0; text-indent:-5000px; background:url(https://www.jsmoa.com/img/icon_totalmenu.png) no-repeat center center; display:none; }

/*로고*/
.rotatrogo{    overflow: hidden;
    position: relative;
    width: 170px;
    height: 56px;
    margin: auto;
    top: 50%;
    transform: translate(0, -50%);
}
.rotatrogo_bottom{    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.imgbox{    z-index: 10;width: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;}
.backbox{    width: 500px;
    height: 500px;
    position: absolute;
    top: -200px;
    left: -100px;
    position: absolute;
    -webkit-animation: logorotating 5.5s linear infinite;
    -moz-animation: logorotating 5.5s linear infinite;
    -ms-animation: logorotating 5.5s linear infinite;
    -o-animation: logorotating 5.5s linear infinite;
    animation: logorotating 5.5s linear infinite;
    z-index: 0;
       background: linear-gradient( 360deg, rgb(33 36 52) 0%, rgb(96 100 126) 30%, rgb(255 255 255) 50%, rgb(34 41 62) 100%);
 }
/*
background: linear-gradient( 360deg, rgb(255 116 116) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgb(58 226 47) 50%, rgb(238 28 220) 60%, rgb(239 242 21) 70%, rgb(209 81 255) 80%, rgb(7 251 224) 90%, rgb(255 74 74) 100% );
*/
@-webkit-keyframes logorotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes logorotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*끝*/

/*================950==============*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
@media all and (max-width:950px){
.section { width:100%; left:0; background-color:#f0f0f0; z-index:2;padding-top: 0;    height: auto;position: absolute;
    bottom: 0;}
.section.on { left:260px; }
.wrap { min-width:100%; }
.header { display:block;    z-index: 3;    position: fixed;height: 55px;}
.header .header_wrap, .nav ul, .section,.footer, .footer .CreateBy { width:100%; }
.header .header_wrap {  padding-top:7px; }
.header .header_ti h1 { margin:0px auto; display:block; }
.footer { border-top:none; }
.footer .CreateBy p { padding-top:15px; color:#CCC; text-align:center;font-size:.8em; }
a.header_mobile_totalMenu { color:#fff; display:block; top: 8px;}
}
/*================600==============*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
@media all and (max-width:600px){
    
.conupbar{    border-bottom: 2px solid #9d9d9d;
    position: relative;
    display: block;
    float: left;
    width: 100%;height: 82px;
    box-sizing: border-box;}
.headerM {
    width: 100%;height: 45px;}
.headerM .header_wrap {position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;}
.headerM .header_ti { }
.headerM .header_ti .divA {  margin-left:10px; font-size:0; display:inline-block; }
.headerM .header_ti .divA a { display:block; }
.headerM .header_ti .divA a .spanA { width:45px; height:auto; display:block; float:left;padding-top:15px;}
.headerM .header_ti .divA a .spanB { width:209px; height:auto; display:block;  float:left;padding-top:17px;}
.headerM .header_ti .divA a .spanA img { width:100%; height:auto; display:block; float:left;transition: transform .3s ease;-ms-transition: all .3s ease;}
.headerM .header_ti .divA a .spanB img { display:block; float:left;width: 180px;height: auto;}
.headerM .header_ti .divA a:hover .spanA img {transform: rotate(45deg);-ms-transform: rotate(45deg);}

.container {position: relative;width: 100%;height: 100%;display: block;}

.nav {display: block;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    z-index: 101;
    margin: auto;
    float: left;height: 100%;}
.nav .ulnav {position:relative;height:36px;width: 100%;}
.nav .floatleft {    margin: auto;
    float: left;
    width: 100%;}
.nav ul { letter-spacing: -4px;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);border-top: 1px solid #9da557;
}
.nav ul:before, .nav ul:after { content:""; display:table; }
.nav ul:after {clear:both;}
* html .nav ul {zoom:1;}
.nav ul {zoom:1;border-top: 1px solid #a7a7a7;}

.nav ul li {margin-left: unset;
        box-sizing: border-box;
        width: 25%;}
.nav ul li div {font-size: 13px; border: 1px solid transparent;
    padding: 3px 0px 0px 0;
    position: relative;
    line-height: 20px;
    color: #3f3f3f;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    width: 100%;
    text-align: center;
    box-sizing: border-box;}
.nav ul li div:hover { background-color:#e3e3e3; border-left: 1px solid #c3b677;border-right: 1px solid #c3b677;}
.nav ul li div.iconsub { padding-right:17px; background-image:url(https://www.jsmoa.com/img/icon_arrow.gif); background-repeat:no-repeat; background-position:right 14px; }
.nav ul li .spanone {display: block;
    width: 8px;
    height: 8px;
    background: #b9b9b9;
    border-radius: 50%;
    margin: auto;}

.nav ul li.current div {font-weight:500;background-color:#efefef; border-left: 1px solid #c3b677;border-right: 1px solid #c3b677;}
.nav ul li.current div.iconsub { background-position:right 14px; }
.nav ul li.current .spanone {display: block;
    width: 8px;
    height: 8px;
    background: #a727a9;
    border-radius: 50%;
    margin: auto;}
.rotatrogo{
    width: 140px;
    height: 46px;
}
}
/*================440==============*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
@media all and (max-width:440px){
.footlogobox {
    width: 130px;
    margin: 40px 0 0 15px;
}
}
/*================400==============*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
/*=================================*/
@media all and (max-width:400px){
.footlogobox {
    display: none;
}
}