/* aside */
#aside{z-index:9;position:fixed; background:#fff;width:400px; height:100vh;top:0px;overflow-y: auto;}
#aside.active{box-shadow: -5px -1px 10px rgba(0,0,0,0.5); z-index: 9;}
#aside>ul, #aside>ul li{display:block;}
#aside-user{background-color:#000;border-bottom:1px solid #444; overflow: hidden; clear:both;}
.aside_top{background:#091a2f;height:70px;padding: 10px 0;}
.aside_top .aside_logo a{display:block;height:70px;line-height:70px;padding-left:30px;font-size: 26px; font-weight: 700; color: #fff;}
.aside_top .aside_logo a img{vertical-align:middle;}
.fr {float: right; display: inline-block;}
.fl {float: left; display: inline-block;}
.aside_top .aside_login a i{display:block;color:#fff;line-height:70px;font-size:30px; padding-right:30px;padding-left:50px;}
.aside_top .aside_login.active a{background-position:0 -77px;}
a.toggle-ul.active{color:#f22057;}
.aside-ul>li{border-bottom:1px solid #dfdfdf;position:relative; background: #fff;}

.aside-ul>li>a{display:block;font-size:24px;color:#333;height:70px;line-height:70px;font-weight:700; text-align: left; padding-left: 30px;}

.a_side_arrow {position:absolute;display:inline-block;top:15px;right:20px;}
.a_side_arrow i {display: block; font-size: 40px; color: #666; line-height: 100%;}
.a_side_arrow i:nth-child(2) {display: none;}
a.toggle-ul.active .a_side_arrow i:first-child{display: none;}
a.toggle-ul.active .a_side_arrow i:nth-child(2){display: block;}

.aside-2d-ul{display:none;background-color:#f22057;}
.aside-2d-ul>li{background-color:#f22057;}
.aside-2d-ul>li:first-child{padding-top:20px;border-top:2px solid #bbb;}
.aside-2d-ul>li:last-child{padding-bottom:20px;}
.aside-2d-ul>li>a{display:block;text-indent:30px;font-size:24px;line-height:46px;color:#fff;font-weight:400;text-indent:40px;}
.aside-2d-ul.ul-view{display:block;}
.aside-3d-ul{padding:20px 10px; background: #da1348; margin-bottom: 20px;}
.aside-3d-ul>li>a{display:block;text-indent:30px;font-size:22px;line-height:38px;color:#fff;font-weight:400;text-indent:45px;}

.a_side_quick{text-align:center;vertical-align:middle;}
.a_side_quick li{display:inline-block;margin:35px 7px;}
.a_side_quick a{display:block;width:229px;height:63px;background:url('http://m.jnsps.com/images/m_images/a_side_icon.png') 0 -300px;text-indent:-9999px;}
.a_side_quick li:last-child a{background-position:-300px -300px;}

/* aside */

#wrap{width: 640px;margin: 0 auto; position:relative;overflow:hidden; box-shadow: -5px -1px 10px rgba(0,0,0,0.5);}
#m-page-wrap {width: 640px; position: relative; padding:90px 0 0;  background: #fff; z-index: 10;}


#header {background: #fff; height:70px; padding: 10px 20px; width: auto; position: fixed; top:0; left: 0; z-index: 12; width: 600px;}
#header h1 {background: #fff; text-align: left; padding-left: 180px;}
#header h1 a {font-size: 26px; font-weight: 700; color: #091a2f;}
#header h1 a span {color:deeppink;}
#header.change h1 a { color: #fff;}
#header div i {font-size: 34px; color:#091a2f; }
#header.dis {left:400px;}
#header.dis h1 {display: none;}
#header.dis  {background: #333;}
#header.change, #header.change h1{background: #091a2f; box-shadow: -5px -1px 10px rgba(0,0,0,0.5);}
#header.change div i, #header.dis div i, #header.change .btn_go a i {color: #fff;}

#main {width:100%; float: none;}
section {position: relative; width: 100%; display: block;}
section h1 {text-align: center; font-size: 34px;  padding: 40px 0; display: block;margin-top: 20px; font-weight: 200;}
section h1 span {color:#666; font-weight: bold;}
section h1 .material-icons{color: deeppink; font-size: 40px; vertical-align: bottom; animation:spin 5s linear infinite;}
@keyframes spin { 0% {transform:rotate(0deg);} 90% {transform:rotate(0deg);} 100% { transform:rotate(360deg); } }
.btn_sitemap {left: 20px; right: auto;}
#header .btn_sitemap a i {font-size: 50px; margin-top: 10px;}
.btn_sitemap i:first-child {display: block;}
.btn_sitemap i:nth-child(2) {display: none;}
#header.dis .btn_sitemap i:first-child {display: none;}
#header.dis .btn_sitemap i:nth-child(2) {display: block;}
.gioLogo {height: 70px; fill:#091a2f; width: 50px; vertical-align: middle;}
#header.dis .gioLogo, #header.change .gioLogo, .aside_top .aside_logo a .gioLogo{fill:#fff;}
.btn_go {position: absolute; right: 20px; top:5px;}
#header .btn_go a i {font-size: 76px; vertical-align: bottom; color: #000; position: absolute; top:-7px; left: 0;}
.btn_go a { display: inline-block; position: relative; width: 76px;}
.btn_go a span {font-size: 21px; font-weight: 700; color: #fff; position: absolute; top:22px; width: 100%; text-align: center; display: block;}
#header .btn_go a:last-child span{color: #333;}
#header .btn_go a:last-child i {color: deeppink;}

#header.change .btn_go a span {color: #333;}
#header.change .btn_go a:last-child span {color: #fff;}


/*리스트스타일*/
.img_con, .nor_con {text-align: center; padding: 0 15px;}
.img_con dl {width: 300px; display: inline-block; vertical-align:top;}
.img_con dl:nth-child(n+3) .img_box, .img_con dl:nth-child(n+3) dd {display: none;}
.img_con dl:nth-child(n+3) {width: 580px; display: inline-block;}
.img_con dl .img_box {width: 250px; height:250px; border: 1px solid #dfdfdf;  display: inline-block; background-position: center; background-size: auto 100%;}
.img_con dl .img_box img {height: 100%; display: inline-block;}
.img_con dl dt {display: block; font-weight: bold; font-size: 22px; line-height: 140%; padding: 15px; }
.img_con dl dt span {display: none;}

.img_con dl:nth-child(n+3) dt {text-align: left; padding: 20px 5px; display: block; width: auto; border-bottom: 1px solid #dfdfdf;}
.img_con dl:nth-child(n+3) dt span {display: inline-block; float: right; font-weight: normal; font-size: 16px; color: #666;}
.img_con dl:nth-child(3) dt {border-top:1px solid #dfdfdf; margin-top: 20px; }

.img_con dl dd {display: inline-block; font-size: 16px; color: #666; line-height: 140%; margin-bottom: 10px; width: 90%;}
.detail_btn {padding:20px 50px; border: 1px solid deeppink; color: deeppink; display: inline-block; font-size: 20px; font-weight: bold; margin: 40px auto 40px; border-radius: 60px;}

.nor_con dl{width: 580px; display: inline-block;}
.nor_con dt {text-align: left; padding: 0 5px 10px; display: block; width: auto; border-bottom: 1px solid #dfdfdf; font-weight: bold; font-size: 22px; line-height: 140%; margin: 15px;}
.nor_con dt span{display: inline-block; float: right; font-weight: normal; font-size: 16px; color: #666;}

.xi-naver-square {color:deeppink; font-size: 20px; margin-left: 10px; animation: tic 2s 1s infinite;}
@keyframes tic {  0% {    color:deeppink  }  50% {    color:orange}  100% {    color:deeppink  }}
/*리스트스타일*/

/*상위footer스타일*/
.on_footer {width: 640px; position: fixed; bottom: 0; height: 110px; display: table; left: 0; z-index: 11; box-shadow: -5px -1px 10px rgba(0,0,0,0.5); animation-duration: 3s;  animation-name: slidein;}
.on_footer.dis {left:400px; box-shadow:none;}
.on_footer a {display: table-cell; color: #fff;   text-align: center; font-size: 20px; font-weight: bold; width: 25%; vertical-align:top; }
.on_footer a i {display: block; margin: 10px 0 ;font-size: 60px; line-height: 100%;}
.on_footer a:nth-child(odd) {background:#5994be;}
.on_footer a:nth-child(even) {background:#091a2f;}

@keyframes slidein {  from {    bottom: -80px  }  to {    bottom:0;  }}
/*상위footer스타일*/


/*slide스타일*/
.bx-clone { display: none }
.bx-wrapper {box-shadow: none; border: none; margin: 0; }
.top_slider .bx-controls-direction {display: none;}
.top_slider .bx-wrapper .bx-pager {bottom:20px;}
.bx-wrapper .bx-pager.bx-default-pager a {width: 15px; height: 15px; background: #ccc;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: deeppink;}

.ba_slider .bx-wrapper, .md_slider .bx-wrapper, .ac_slider .bx-wrapper {margin: 0;}
nav {position: absolute; top:50%; z-index: 11;width: 100%;  display: block; opacity: 0.6;}
.ba_slider nav i, .ac_slider nav i {font-size: 70px; color: #fff; font-weight: 200;}
nav span {right: -10px; position: absolute;}
nav span:first-child{left: -10px;}
.md_slider nav {margin-top: -20px;}
.md_slider nav i {font-size: 70px; color: #333; font-weight: 200;}
.md_slider {width: 500px; margin: 0 auto; position: relative; }
.md_slider li {margin: 0 10px;}
.md_slider nav span {right: -70px;}
.md_slider nav span:first-child{left: -70px;}

.ac_slider {background:#333 url('/mobile/img/main2/ac_back.jpg')no-repeat; padding: 80px 0;}
.ac_slider .bx-wrapper {background: none; width:500px; margin:0 auto;}
.ac_slider div {display: table; width: 100%;}
.ac_slider div p {display: table-cell; width: 33%; color: #fff; font-size: 16px; text-align: center; line-height: 140%;}
/*slide스타일*/

footer {display: block; width: 100%; background: #555; padding-bottom: 130px; color: #fff; text-align: center;}
footer .gioLogo {fill:#fff; display: inline-block; margin-top: 30px; }

address {display: block; text-align: center; font-size: 20px; line-height: 140%; color: #ccc; margin-top: 40px;}
address .title {font-size: 26px; font-weight: bold; color: #fff; display: block; text-align: center; padding: 20px;}

address a {font-size: 40px; color: #fff; padding: 20px; display: block; text-align: center;}

.ft_btn {padding: 40px 0; text-align: center;}
.ft_btn a {padding:20px 50px; border: 1px solid #777; color: #fff; display: inline-block; font-size: 20px; font-weight: bold; border-radius: 60px; margin: 0 10px;}

.sns_footer {display: table; margin-top: 40px; width: 100%; text-align: center;}
.sns_footer a {display: table-cell; width: 20%; color: #fff; font-size: 16px;  }
.sns_footer a span {width: 110px; height: 100px; display: inline-block; padding: 10px 0 0;}
.sns_footer a i {display: block; margin: 10px 0 ;font-size: 50px; line-height: 100%;}


.md_btn {display: table; width: 100%; background: #333;}
.md_btn a {display: table-cell; width: 20%; height: 160px; color: #fff; font-size: 16px; text-align: center; position: relative;}
.md_btn a::after {content: ''; height: 100px; top:30px; right: 0; width: 2px; background: #555; position: absolute;}

.mico {width: 70px; height: 50px; display: inline-block; fill:#999; text-align: center; margin: 0 auto; margin: 30px 0; vertical-align: middle;}