@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/*--------------------------------------------------------------
  # 기본 
--------------------------------------------------------------*/
html {scroll-behavior: smooth; }
body { font-family: "Noto Sans KR", sans-serif !important; font-size:62.5%/*@size: 16px × 62.5% = 10px; color:#212121;*/; color:rgba(39,44,47,0.7); word-break: keep-all; }
ul, li{ list-style:none; margin:0px; padding:0px; }
.clear { clear:both !important; }
a { color: #111; transition: 0.5s; }
a:hover, a:active, a:focus { color: #666; outline: none; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans KR", sans-serif; font-weight:normal; }
img{width:100%; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges; -ms-interpolation-mode: nearest-neighbor;}


.color-box01{width:100%;margin-top:100px;background-color:#333333}
mark{background: #ff0;}


/*--------------------------------------------------------------
  # 서브옆메뉴
--------------------------------------------------------------*/

/* 서브레이아웃 : left 메뉴  */
  #sub_layout{ position:relative; width:100%;}
  #sub_layout_left_wrap:after{ content:''; overflow:hidden; display:block; clear:both !important;}
  #sub_layout_left_wrap{ float:left; width:20%; margin-right:5%;}
  #sub_layout_right_wrap{ float:right; width:75%; font-size:1.8rem;}


  @media (max-width: 840px) {
    #sub_layout_left_wrap{ display:none; }
    #sub_layout_right_wrap{ float:none; width:100%}
  }


  #sidebar { 
    width:100%;
    color: #fff;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    z-index: 0; 
    }

  /*  
  #sidebar:after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      content: '';
  }
  */

  #sidebar .custom-menu { 
    padding: 10px; 
  }

  #sidebar .custom-menu li { 
    font-size: 16px; 
    position: relative;
    border-bottom: 1px solid #ddd;
  }

  #sidebar .custom-menu li a { 
    padding: 10px 0; 
    display: block; 
    font-size: 1.8rem; 
    color: #333; 
    padding:15px; 
    width:100%; 
    text-decoration: none;
  }

  #sidebar .custom-menu .sub_hit{
    position: absolute; 
    width:20px; 
    height:20px;
    top: 16px;
    right: 0;
  }

  .sub_hit_rotate {
      transform: rotate(180deg); 
      transform-origin: left top
  }

/*
#sidebar .custom-menu li a:after{position: absolute;
    top: 50%;  
 	  top: 22px;
    left: auto;
    right: 1.5rem;
    width: 1.2rem;
    height: .3rem;
    background-color: #333;
    content: '';
  }
*/

  #sidebar .custom-menu li a:hover { 
    color:#556db1 !important; 
  }

  #sidebar .custom-menu li a span { 
    color: #fff; 
  }

  #sidebar .custom-menu li.active > a {
    position:relative; 
    color: #556db1 !important;
    border: 2px solid #556db1;
    font-weight: 500;
  }

  #sidebar .custom-menu li.active > a:after{
    content: '';
    position:absolute;
    top: 50%;
    right: 15px;
    display: inline-block;
    width: 10px;
    height: 2px;
    color: #333;
    background:#556db1;
  }

  #sidebar h1 {    
    padding: 20px 10px;
    border-bottom: 3px solid #333;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 28px;
    color: #333;
  }
      
  #sidebar .custom-menu .btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative; 
  }
      
  #sidebar .custom-menu .btn i {
    margin-right: -40px;
    font-size: 14px; 
  }

  #sidebar .custom-menu .btn.btn-primary {
    background: transparent;
    border-color: transparent; 
  }

  #sidebar .custom-menu .btn.btn-primary:after {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #30e3ca;
    border-radius: 10px; 
  }

  #sidebar .custom-menu .btn.btn-primary:hover, 
  #sidebar .custom-menu .btn.btn-primary:focus {
    background: transparent !important;
    border-color: transparent !important; 
  }

  #sidebar .custom-menu .sub_menu{ 
    display: none; 
    padding:20px; 
    background-color:#f4f4f4; 
    border:1px solid #ccc; 
    border-radius:10px;
  }

  #sidebar .custom-menu .sub_menu li a{  
    display: block; 
    color: #333; 
    padding:10px; 
    width:100%; 
    text-decoration: none; 
    font-size:1.6rem;
  }

  /* #sidebar .custom-menu .sub_menu li a{ padding-left:35px !important; display: block; font-size: 1.8rem; color: #333; padding:15px; width:100%; text-decoration: none;} */

  #sub_layout_right_wrap .sub_tit{margin-bottom: 25px;}
  #sub_layout_right_wrap .sub_tit h2{ color:#272c2f; font-weight: bold;}

/*--------------------------------------------------------------
# container 넓이 설정
--------------------------------------------------------------*/
  @media (min-width: 576px) {
    .container, .container-sm {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .container, .container-sm, .container-md {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg {
      max-width: 960px;
    }
  }  

  @media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
      max-width: 1140px;
    }
  }

  @media (min-width: 1300px) {
    .container{ max-width: 1230px; }
  }   


/*--------------------------------------------------------------
# color
:root 색상을 바꿔서 사용하시기 바랍니다. 
--------------------------------------------------------------*/

  .btn-primary { color: #fff; background-color:#5444b3;  border-color:#5444b3; }
  .btn-success { color: #fff; background-color:var(--wf_success);  border-color:var(--wf_success); }
  .btn-danger { color: #fff; background-color:#dc3545; border-color:#dc3545; }
  .btn-warning { color: #212529; background-color:#ffc107; border-color:#ffc107; }
  .btn-info {	color: #fff; background-color:#17a2b8; border-color:#17a2b8; }
  .btn-light { color: #212529; background-color:#f8f9fa; border-color:#f8f9fa; }
  .btn-dark {	color: #fff; background-color:#343a40; border-color:#343a40; }
  .btn-link {	font-weight: 400; color: #007bff; text-decoration: none; }
  .btn-secondary { color: #fff; background-color:#6c757d; border-color:#6c757d; }

  .badge-primary { color: #fff; background-color:#333;}
  .badge-secondary { color: #fff; background-color:#6c757d;}
  .badge-success { color: #fff; background-color:var(--wf_success);}
  .badge-danger { color: #fff; background-color:#dc3545;}
  .badge-warning { color: #212529; background-color:#ffc107;}
  .badge-info {	color: #fff; background-color:#17a2b8;}
  .badge-light { color: #212529; background-color:#f8f9fa;}
  .badge-dark {	color: #fff; background-color:#343a40;}
  .badge-link {	font-weight: 400; color: #007bff; text-decoration: none; }

  .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { filter: alpha(opacity=90); opacity: 0.9; background-color:#402CC7;  border-color:#402CC7; }
  .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { filter: alpha(opacity=90); opacity: 0.9; background-color:var(--wf_success);  border-color:var(--wf_success); }
  .btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { filter: alpha(opacity=90); opacity: 0.9; background-color:#17a2b8;  border-color:#17a2b8; }
  .btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { filter: alpha(opacity=90); opacity: 0.9; background-color:#ffc107;  border-color:#ffc107; }
  .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { filter: alpha(opacity=90); opacity: 0.9; background-color:#dc3545;  border-color:#dc3545; }



/*--------------------------------------------------------------
# 모달디자인
--------------------------------------------------------------*/

.modal-header { background-color:#333; color:#FFF; }



/*--------------------------------------------------------------
# 업으로 올라가기
--------------------------------------------------------------*/

  .scroll-up { display: none;  position: fixed;  bottom: 2.5rem; bottom:2%; right: 2.5em;  z-index: 9999; }
  .scrool-up-box{ background:#666; border-radius:4px; color:#FFF; text-align:center; width:38px; height:38px; padding-top:5px; cursor:pointer; }
  .scrool-up-box a{ color:#FFF; font-size:1.5rem;}
  .scrool-up-box .stext{ color:#FFF; font-size:1rem; line-height:0; }

  @media (max-width: 768px){
    .scroll-up {bottom:1%;right: 1em;}
    .scrool-up-box{width:34px;height:34px;padding: 0;}
  }


/*--------------------------------------------------------------
# skin css : 접두사 tmp_ 스킨의 경우 정의
--------------------------------------------------------------*/

  /* 방문자 집계 */
  .wf_visit { padding: 0rem !important; color:#FFF; }
  .wf_visit li{ float:left; margin-right:10px; color:#FFF; }
  .wf_visit li:last{ float:left; margin-right:0px; color:#FFF; }



/*--------------------------------------------------------------
# skin : serach.php
--------------------------------------------------------------*/

  .serach-wrap{ margin-top:30px; }
  .btn-toggle-wrap label.btn-primary{ background-color:#fff; color:#666; }
  .btn-toggle-wrap label.active{ background-color:#333; color:#fff; }
  .btn-toggle-wrap { width:100%; }
  .btn-toggle-wrap label{ width:50%; }

  .serach_list { margin-top:30px; margin-bottom:30px; }
  .serach_list_body .serach_list_title h2 a{ font-size:24px; }
  .serach_list_body .page-header { position:relative; }
  .serach_list_body .page-header h1 { font-size:2.5rem;}
  .serach_list_body .page-header .page_more{ position:absolute; top:5px; right:5px; }



/*--------------------------------------------------------------
# form
--------------------------------------------------------------*/





/*--------------------------------------------------------------
# sub wrap
--------------------------------------------------------------*/

  .sub-wrap { 
    /*  margin-top: 85px;  */
  }

  @media (max-width: 991px) {
    .sub-wrap {
      /* margin-top: 58px; */
    }
  }

  .section-wrap{ 
    margin-top:40px; 
  }



/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/

  section { overflow: hidden; }
  section .content { margin-bottom:40px; }
  .section-bg { background-color: #f7f7f7; }
  .section-title { text-align: center; padding-bottom: 20px; }
  .section-title h2 { font-size: 24px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative; }
  .section-title h2::after { content: ''; position: absolute; display: block; width: 50px; height: 3px; background: #333; bottom: 0; left: calc(50% - 25px); }
  .section-title p { margin-bottom: 0; }




/*--------------------------------------------------------------
  # 기본모달 - 부트스트랩
  부트스트랩 4에는 위치 지원하지만, 부트스트랩 3은 지원하지 않으므로, 아래와 같이 사용합니다. 
  사용법 

  <div class="modal-dialog modal-center" role="document">
  modal-dialog 클래스에 추가함 위는 정가운데 

--------------------------------------------------------------*/


  /* 풀사이즈조절 */
  .modal-dialog.modal-fullsize {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content.modal-fullsize {
    height: auto;
    min-height: 100%;
    border-radius: 0; 
  }


  /* 가운데 위치 */
  .modal.modal-center {
    text-align: center;
  }

  .modal-dialog.modal-center {
    display: inline-block;
    text-align: left;
    vertical-align: middle; 
  }


  @media screen and (min-width: 768px) { 
    .modal.modal-center:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
  }



/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

  .breadcrumbs-style2 { color:#777; padding: 30px 0 30px 0; font-size: 1.5rem; font-weight: bold; text-align: right; border-bottom: 1px solid #ccc; }
  .breadcrumbs-style2 a { color:#777; }
  .breadcrumbs-style2 span:first-child { display: inline-block; padding-right: 0px; }
  .breadcrumbs-style2 span { padding-left: 15px; }
  .breadcrumbs-style2 .b-page-title{ padding: 0px; text-align:center; font-size: 42px; color: #212121; letter-spacing: -2.5px; }

  /*
  .breadcrumbs-style2 span { padding-left: 10px; float:left; }
  .breadcrumbs-style2 span::first-child { display: inline-block; padding-right: 0px; content: ""; clear:both !important; }
  .breadcrumbs-style2 span::before { display: inline-block; padding-right: 10px; content: "＞"; clear:both !important; }
  */

  @media (max-width: 991px) {
    .b-left{ text-align:left; }
    .b-right{ text-align:left; }  
  }


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

  .back-to-top { position: fixed; display: none; width: 40px; height: 40px; border-radius: 3px; right: 15px; bottom: 15px; background: #333; color: #fff; transition: display 0.5s ease-in-out; z-index: 99999; }
  .back-to-top i { font-size: 24px; position: absolute; top: 8px; left: 8px; }
  .back-to-top:hover { color: #fff; background: #2ae149; transition: 0.3s ease-in-out; }


/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/

  @media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
  }



/*--------------------------------------------------------------
# 메뉴
--------------------------------------------------------------*/
 /* Popover 출력- 기본 */

  .login-qnb {}
  .login-qnb li{ 
    float:left; 
  }
  .popover { 
    min-width:200px;
  }
  .popover-title { 
    text-align:center;
  }

  #preloader { 
    background: #FFF; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 9999999;
  }
  #status { 
    background-image: url(../images/main_add_logo.png);
    background-position: center; 
    background-repeat: no-repeat; 
    width: 200px; 
    height: 200px; 
    margin: -100px 0 0 -100px;  
    position: absolute; 
    top: 50%; 
    left: 50%;
  }
  .title01{ 
    position:absolute;  
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 450px; 
    margin: auto; 
  }
  .title02{ 
    position:absolute; 
    width:400px; 
    top:12%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto;  
    background: url(../images/slide02.png) no-repeat; 
    background-size:100%;
  }
  .a-top-images{ 
    display:none; 
  }


  #menu-container {
    position: fixed;
    top: 0px;
    width:100%;
    height: 90px;   
    padding-left: 0px;
    padding-top: 0px; 
    margin:0 auto;
    text-align:left;
    box-sizing: border-box;
    color: #333;
    background-color: transparent;
    border-bottom:1px solid rgba(255,255,255,0.3);
    z-index:999;
    animation-duration: 3s; 
    animation-name: rainbowLinkline; 
    animation-iteration-count: infinite;
    -webkit-transition: padding-left 200ms linear;
    -moz-transition: padding-left 200ms linear;
    -ms-transition: padding-left 200ms linear;
    -o-transition: padding-left 200ms linear;
    transition: padding-left 200ms linear;
  }

  #menu-container.fixed {
    padding-left: 0px;
    font-size:18px;
    font-weight: bold;
    color: #333;
    width:100%;
    height:90px;
    right:0px;
    padding-top: 0px;
    margin:0 auto;  
  }

  /* sm */
@media (min-width: 768px) and (max-width: 1399px) {
    /* 메뉴 */
    #menu-container.fixed { height: 75px; }
}

  /* xs */
@media (max-width: 768px) {
    /* 메뉴 */
    #menu-container.fixed { height: 75px; }
}

/* XS Portrait */
@media (max-width: 480px) {
    /* 메뉴 */
    #menu-container.fixed { height: 75px; }
}


  /* menu-hover */
  #menu-container.fixed:hover{
    background:#fff;
  }
  #menu-container.fixed:hover .logo a,
  #menu-container.fixed.menu-on .logo a{
    background:url(http://snuap.or.kr/theme/basic/img/logo.png) no-repeat;
  }
  #menu-container.fixed:hover li.gnb-menu > a{
    color:#333;
  }
  #menu-container.fixed:hover div.right-menu{
    color:#333;
  }  

  /* XS Portrait */
@media (max-width: 480px) {  
    .logo a,
    #menu-container.fixed:hover .logo a, #menu-container.fixed.menu-on .logo a{    
        background-size: 85%; 
        background-position: center left;
    }
}

  .menu-on{ 
    background-color: #fff !important; 
    color:#333 !important; 
  }
  .menu-font-on{ 
    color:#333 !important;
  }
  .menu-line-on{ 
    border-bottom:1px solid #ddd !important; 
  }

  .logo{
    position:relative;
    top:28px;
    left:30px;
    text-align:left;
    z-index:9999;
    font-size:24px;
  }
  .logo a{
    display:inline-block; 
    max-width: 280px; 
    width: 80%; 
    height: 40px; 
    background:url(http://snuap.or.kr/theme/basic/img/logo_w.png) no-repeat;
  }
  .right-menu{
    position: absolute;
    top:8px;
    right:35px;
    z-index:9999; 
    color:#FFF; 
  }
  .right-menu h3{ 
    cursor:pointer;  
    padding-bottom:5px; 
    padding-top:5px; 
  }
  .btn-mobile-open{ 
    display:none; 
  } 

  /* lg */ 
  @media (min-width: 1400px) and (max-width: 1599px) {
    .btn-mobile-open{ 
      display:none; 
    } 
  }

  /* sm */
  @media (min-width: 769px) and (max-width: 1399px) {
    .logo{	
        position:relative;
        top: 20px;
        left: 20px;
        text-align:left;
        z-index:9999;
    }
    .logo img{ padding-top:5px;}
    .btn-mobile-open{ display:block; }
    .right-menu{
        position: absolute;
        top: 0px;
        right: 20px;
        z-index:9999; color:#FFF; 
    }
    #serach-btn { display:none;}
    #login-btn { display:none; }  
}

/* xs */
@media (max-width: 768px) {  
    .logo{	
        position:relative;
        top: 20px;
        left: 20px;
        text-align:left;
        z-index:9999;
    }
    .logo a{display:inline-block;}
    .btn-mobile-open{ display:block; }
    .right-menu{
        position: absolute;	
        top: 0px;
        right: 20px;
        z-index:9999; 
        color:#FFF; 
    }
    #serach-btn { display:none;}
    #login-btn { display:none; } 

    /* main */
    .col-clear { clear:both; } 
}

/* XS Portrait */
@media (max-width: 480px) { 
    .logo{
        position:relative;
        top: 20px;
        left: 20px;
        text-align:left;
        z-index:9999;
    }    
    .right-menu{
        position: absolute;	
        top: 0px;
        right: 20px;
        z-index:9999; 
        color:#FFF; 
    }
    .btn-mobile-open{ display:block; }
    #serach-btn { display:none;}
    #login-btn { display:none; }
}



  /* header - default */
  .header{
    text-align:center;
    margin:0 auto;
    border-top:0px solid #999;
    position:absolute; 
    left:0; 
    right:0; 
    top:0px;  
  }

  .head {
    width:1000px; 
    position:relative; 
    margin:0 auto; 
    height:90px;
    z-index:999999; 
  }
  .head .gnb { 
    margin:0; 
  }
  .head .gnb:after {
    content:""; 
    display:block; 
    clear:both;
  }
  .head .gnb li.gnb-menu {
    float:left; 
    width:200px; 
    position:relative; 
    height:90px; 
  }
  .head .gnb li.gnb-menu:last-child { 
    border-right:none; 
  } 
  .head .gnb li.gnb-menu > a { 
    font-size:18px; 
    display:block; 
    font-weight:700; 
    text-align:center;  
    line-height:30px; 
    color:#FFF; 
    padding:0 0 27px 0; 
    margin-top:30px; 
    text-decoration:none; 
    letter-spacing:1px; 
  }
  .head .gnb li.gnb-menu:hover > a {
    padding:0 0 27px 0; 
    text-decoration:none; 
    border-bottom:2px solid #3d567f; 
  }
  .head .gnb li.gnb-menu a.active_nav {
    color:#67804e;
  }
  .head .gnb li.gnb-menu .nav-cat { 
    width:200px; 
    height:0; 
    overflow:hidden; 
    /* border-right:1px solid #e5e5e5; */
    border-right: #ddd  1px solid;
    position:absolute; top:90px; left:0; z-index:99999;
    -webkit-transition:height 300ms ease-in-out;
    -moz-transition:height 300ms ease-in-out;
    -ms-transition:height 300ms ease-in-out;
    -o-transition:height 300ms ease-in-out;
    transition:height 300ms ease-in-out
  }

  .head .gnb li.gnb-menu .nav-cat:hover { 
    background-color:#3d567f; 
  }
  .head .gnb li.gnb-menu .nav-cat:hover span{
    color:#fff;
  }
  .head .gnb li.gnb-menu .nav-cat.open-menu { 
    height:325px;
    -webkit-transition:height 400ms ease-in-out;
    -moz-transition:height 400ms ease-in-out;
    -ms-transition:height 400ms ease-in-out;
    -o-transition:height 400ms ease-in-out;
    transition:height 400ms ease-in-out
  }
  .head .gnb li.gnb-menu .nav-cat ul {
    padding:20px 0;
  }
  .head .gnb li.gnb-menu .nav-cat li a {
    font-size:16px;
    font-weight:normal;
    line-height: 32px;
    letter-spacing:-0.1rem;
    color:#3d567f;
    display:block;
    text-align:left;
    /* text-align:center;  */
    text-decoration:none;
    padding-left:20px;
    position: relative;
    }

  .head .gnb li.gnb-menu .nav-cat li.disable a:before,
  .head .gnb li.gnb-menu .nav-cat li.disable a:after{
    display: none;
  }
  .head .gnb li.gnb-menu .nav-cat li a span.menu_def2:before{
    content: '┗';
    position: relative;
    top: -1px;
    left: -6px;
    font-size: 1.2rem;
  }


/*.head .gnb li.gnb-menu .nav-cat li a:hover {color:#FFF; text-decoration:underline; background-color:#111111; text-decoration:none;}*/
  .head .gnb li.gnb-menu .nav-cat li a:hover:before{
    content: "";
    position: absolute;
    right: 20px;
    bottom: 7px;
    width: 9px;
    height: 9px;
    -webkit-transform: translate(-50%, -50%) scale(0.88889, 1) rotate(-45deg);
    transform: translate(-50%, -50%) scale(0.88889, 1) rotate(-45deg);
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }

  .head .gnb li.gnb-menu .nav-cat li a:hover:after{
    position: absolute;
    bottom: -3px;
    left: 20px;
    right: 20px;
    content: "";
    width: auto;
    height: 1px;
    background-color: #fff;
    transition: all .3s;
    -webkit-transition: all .3s;
  }

  /* header - lg */
  @media (min-width: 1400px) and (max-width: 1599px) {
    .header{
      text-align:center;
      margin:0 auto; 
      border-top:0px solid #999; 
      position:absolute; 
      left:5%; 
      right:0; 
      top:0px; 
    }
    .head {
      width:750px; 
      position:relative; 
      margin:0 auto; 
      height:90px;
      z-index:999999; 
      margin-right: 100px; 
    }
    .head .gnb {
      margin:0;
    }
    .head .gnb:after {
      content:""; 
      display:block; 
      clear:both;
    }

    .head .gnb li.gnb-menu {
      float:left; 
      width:150px; 
      position:relative; 
      height:90px; 
    }
    .head .gnb li.gnb-menu:first-child { }
    .head .gnb li.gnb-menu > a { 
      display:block; 
      font-size:18px;
      font-weight:700; 
      text-align:center;  
      line-height:30px; 
      color:#FFF; 
      padding:0 0 27px 0; 
      margin-top:30px; 
      text-decoration:none;
    }
    .head .gnb li.gnb-menu:hover > a { 
      color:#111; 
      padding:0 0 27px 0; 
      text-decoration:none; 
      border-bottom:3px solid #111; 
    }
    .head .gnb li.gnb-menu a.active_nav {
      color:#67804e;
    }
    .head .gnb li.gnb-menu .nav-cat {
      width:150px; 
      height:0; 
      overflow:hidden; 
      border-right:1px solid #ddd; 
      position:absolute; 
      top:90px; 
      left:0; 
      z-index:99999;
      -webkit-transition:height 300ms ease-in-out;
      -moz-transition:height 300ms ease-in-out;
      -ms-transition:height 300ms ease-in-out;
      -o-transition:height 300ms ease-in-out;
      transition:height 300ms ease-in-out
    }	    
  }

  /* header - sm */
  @media (min-width: 768px) and (max-width: 1399px) {
    .header{ display:none !important; } 
  }

  /* header - xs */
  @media (max-width: 768px) {
    .header{ display:none !important; }  	
  }

  /* header - XS Portrait */
  @media (max-width: 480px) {
    .header{ display:none !important; } 
  }


  

  /* 서브메뉴 색상 */
  .s-nav {
    position:absolute; 
    top:89px; 
    left:0; 
    height:0; 
    width:100%; 
    background:#FFF;
    -webkit-transition:height 300ms ease-in-out;
    -moz-transition:height 300ms ease-in-out;
    -ms-transition:height 300ms ease-in-out;
    -o-transition:height 300ms ease-in-out;
    transition:height 300ms ease-in-out;
    box-shadow: 0px 6px 12pxrgba(0,0,0,0.26);
  }

  /* 오픈되었을때 서브메뉴 크기 */
  .s-nav.open-menu { 
    height:325px; 
    background-color: rgba(255,255,255,1); /* 펼쳐진 메뉴 색상 */
      border-top: 1px solid #ddd;
    border-bottom:1px solid #ddd;
    -webkit-transition:height 400ms ease-in-out;
    -moz-transition:height 400ms ease-in-out;
    -ms-transition:height 400ms ease-in-out;
    -o-transition:height 400ms ease-in-out;
    transition:height 400ms ease-in-out;    
  }

  .lnb-menu{
    position:relative;
    top:-48px;
    width:100%;
    padding:12px 0 0 0;
    text-align:center;
    font-size:14px; 
    font-size:0.933rem; 
    font-weight:normal;
  }
  .lnb-menu a:link{
    color:#fff;
    padding:0px 0px 5px 0px;
  }
  .lnb-menu a:visited{
    color:#fff;
    padding:0 0 5px 0;
  }
  .lnb-menu a:hover{
    color:#fff;
    border-top:2px solid #0058a6;
    padding:11px 0 11px 0;
  }
  .lnb-menu .on{
    color:#fff;
    border-top:2px solid #0058a6;
    padding:11px 0 0 0;
  }
  .lnb-line{
    color:#ccc;
    font-size:10px; 
    font-size:0.667rem; 
    margin:0 20px 0 20px;
    position:relative;
    top:-1px;
  }
  .lnb-tline{
    position:relative;
    top:-48px;
    border-top:1px solid #fff;
    opacity:0.1;
  }


/*--------------------------------------------------------------
  # overlady
--------------------------------------------------------------*/

/* mobile */
  .overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below)   */
    display:none;
    height:100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 9999999 !important; /* Sit on top  */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color  */
    background-color: rgba(255,255,255, 1); /* Black w/opacity  */
    overflow-x: hidden; /* Disable horizontal scroll  */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    padding: 0 3rem;
  }

  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 50px; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }

  /* The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 16px;
    font-size:1.067rem;
    color: #000;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
  }

  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }

  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 35px;
    right: 15px;
    font-size: 60px;
    font-size:4.000rem;
    padding:0px;
    margin:0px;
    line-height:0;
  }

  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 450px) {
    
    .overlay a {
      font-size: 20px; 
      font-size:1.333rem;
    }
    .overlay .closebtn {
      font-size: 40px;
      font-size:2.667rem;
      top: 15px;
      right: 35px;
    }

  }


  /*--------------------------------------------------------------
  # 햄버거 메뉴
  --------------------------------------------------------------*/

  .menuLogo {
    position: absolute;
    top: 15px;
    left: 15px;
    padding:0px;
    margin:0px;
    line-height:0;
  }

  .menuLogo a{ 
    font-size:24px; 
    color:#FFF; 
  }
  .menuLogo img{ }

  #panel-menu-x {
    background: none;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  }
  #panel-menu-x .panel-heading { 
    position: relative; 
  }
  #panel-menu-x .panel-heading:after{
    content: '';
    position: absolute;
    top: 1.7rem;
    right: 2rem;
    width: 15px;
    height: 15px;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
    transform: rotate(135deg);
  }
  #panel-menu-x .panel-body { 
    padding:0px; 
  }
  #panel-menu-x .panel-title a{
    text-align:left;
    color: #000;
    font-size: 2.1rem;
    position: relative;
  }
  #panel-menu-x .panel-body {
    border-top:none; 
  }
  #panel-menu-x .panel-body a{
    text-align:left;
    color:#333;
    font-weight:400;
    font-size: 1.6rem;
    padding: 1rem 2.5rem;
  }
  #panel-menu-x .panel-body a:hover{ 
    color:#fff;
  }
  #panel-menu-x .panel-body ul{ 
    margin-left:30px; 
    margin-right:30px;   
  }
  #panel-menu-x .panel-body ul:hover,
  #panel-menu-x .panel-body ul:active,
  #panel-menu-x .panel-body ul:focus{
    background: #3d567f;
  }
  #panel-menu-x .panel-body ul:hover li a{
    color:#fff; 
  }
  #panel-menu-x .panel-body ul:hover li a:hover{
    position:relative;
  }
  #panel-menu-x .panel-body ul:hover li a:hover:after{
    position: absolute;
    bottom: 0;
    left: 2rem;
    right: 2rem;
    content: "";
    width: auto;
    height: 1px;
    background-color: rgb(255 255 255 / 50%);
    transition: all .3s;
    -webkit-transition: all .5s;
  }
  #panel-menu-x .panel-body ul:hover li:last-child a:hover:after{
    content:none;
  }
  #panel-menu-x .panel-body a span.menu_def2{
    position: relative;
  }
  #panel-menu-x .panel-body a span.menu_def2:before{
    content: '┗';
    position: relative;
    top: -1px;
    left: -6px;
    font-size: 1.2rem;
  }

  /* sm */
@media (min-width: 769px) and (max-width: 1399px) {
    .item-option img {
        position: absolute;
        top: 0%;
        left: 0;
        min-height: 450px;
    } 
}

/* xs */
@media (max-width: 768px) {
    .item-option img {
        position: absolute;
        top: 0%;
        left: 0;
        min-height: 450px;
    }
}


/* sm */
@media (min-width: 769px) and (max-width: 1399px) {  
    #history .col-md-3{ float:left; width:20%; text-align:center; padding-bottom:10px;  }
}

/* xs */
@media (max-width: 768px) {  
    /* 메인 */
    #history .col-md-3{ text-align:center; padding-bottom:10px; width:100% !important; }
}


 .ws_top_box {background-color:#f9f9f9; border-bottom:1px solid #eee;}
 .ws_top_box .es_left {}
 .ws_top_box .es_left ul {}
 .ws_top_box .es_left ul li {float:left; text-align:center; border-right:1px solid #eee;}
 .ws_top_box .es_left ul li:first-child {border-left:1px solid #eee;}
 .ws_top_box .es_left ul li:hover a {background-color:#fff;}
 .ws_top_box .es_left ul li a {display:inline-block; padding:5px 10px;}
 .ws_top_box .es_left ul li a i {color:#ffca00; margin-right:3px;}
 .ws_top_box .es_right {float:right;}
 .ws_top_box .es_right ul {}
 .ws_top_box .es_right ul li {float:left; text-align:right; border-right:1px solid #eee;}
 .ws_top_box .es_right ul li:first-child {border-left:1px solid #eee;}
 .ws_top_box .es_right ul li:hover a {background-color:#fff;}
 .ws_top_box .es_right ul li a {display:inline-block; padding:5px 10px; text-align:center;}



/*--------------------------------------------------------------
# Header login
--------------------------------------------------------------*/

#login_selector{ display:none; }
.login-selector-title{ padding:10px; border-bottom:1px solid rgba(0,0,0,.2);  }
.login-selector-content{ padding:10px; margin-bottom:30px;  }
.login-qnb { margin:10px;  }
.login-qnb li{ float:left; padding:3px; }

#login-btn { cursor:pointer; margin-left:10px; }





/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 3em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*        Main slide        
/********************************/
.b_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .3;
}

.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#main-slider {
  position: relative;
}

.no-margin {
  margin: 0;
  padding: 0;
}

#main-slider .carousel .carousel-content {
  margin-top: 150px;
}

#main-slider .carousel .slide-margin{
  margin-top: 80px;
}

#main-slider .carousel h2 {
  color: #fff;
}

#main-slider .carousel .btn-slide {
  padding: 8px 20px;
  background: #70a229;
  color: #fff;
  border-radius: 4px;
  margin-top: 25px;
  display: inline-block;
}

#main-slider .carousel .slider-img{
  text-align: right;
  position: absolute;
}


#main-slider .carousel .item {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0 !important;
  opacity: 0;
  top: 0;
  height:976px;  
  position: absolute;
  width: 100%;
  display: block !important;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}

#main-slider .carousel .item:first-child {
  top: auto;
  position: relative;
}

#main-slider .carousel .item.active {
  opacity: 1;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 1;
}

#main-slider .prev,
#main-slider .next {
  position: absolute;
  top: 50%;
  background-color: #70a229;
  color: #fff;
  display: inline-block;
  margin-top: -25px;
  height: 40px;
  line-height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  z-index: 5;
}

#main-slider .prev:hover,
#main-slider .next:hover {
  background-color: #333;
}

#main-slider .prev {
  left: 10px;
}

#main-slider .next {
  right: 10px;
}

#main-slider .carousel-indicators li {
  width: 20px;
  height: 20px;
  background-color: #fff;
  margin: 0 15px 0 0;
  position: relative;
}

#main-slider .carousel-indicators li:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #FFF;
  left: -3px;
  top: -3px;
}

#main-slider .carousel-indicators .active{
  width: 20px;
  height: 20px;
  background-color: #70a229;
   margin: 0 15px 0 0;
   border: 1px solid #70a229;
   position: relative;
}

#main-slider .carousel-indicators .active:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #70a229;
  border: 1px solid #70a229;
  left: -3px;
  top: -3px;
}

#main-slider .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}

#main-slider .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}

#main-slider .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}

#main-slider .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}

/*--------------------------------------------------------------
# 인사말
--------------------------------------------------------------*/
.insa{}
.insa .img_area{margin-bottom: 50px;}
.insa .img_area img{width: 100%;}
.insa .text_area p{margin-bottom:0; padding: 0 1% 30px 0; word-break: keep-all;}
.insa .text_area p.stitle{font-size:2.1rem; color:#272c2f;}

.insa .text_area p.up{padding: 0; color:#272c2f;}
/*.insa .text_area ul{display: block; padding : 0 1% 30px 1.5rem;}
.insa .text_area ul li{color: #B32D44;}*/
.insa .point{color:#B32D44;}

.insa .text_area .ceo_tit{text-align: right;}
.insa .text_area .ceo_tit p{padding: 0;}
.insa .text_area .ceo_tit span{margin-left: 5px; font-size: 2.3rem; font-weight: bold; color:#272c2f;}


/*--------------------------------------------------------------
# 연혁
--------------------------------------------------------------*/
.history .content .media:first-child{margin-top: 0;}

.media { margin-top:5rem; }
.media:first-child{margin-top:3rem;}

.media .media-body { margin-left:20px; }
.media .media-body h4{font-size: 2.1rem; color: #5656C7; font-weight: 500;}
.media img{ border-radius:50%; width:28px; }


/*---------------------연혁 리스트(ul, li 모두 없앴음)-----------------------------------*/
.media .media-body dl dt,
.media .media-body dl dd{padding:1rem 0 0 3rem;position: relative;}
.media .media-body .dl-horizontal dt{width: 220px; text-align: left;}
.media .media-body .dl-horizontal dt .last_year{padding-left: 5rem;}
.media .media-body .dl-horizontal .fund{}

/* Small devices (tablets, 768px and up) */
@media screen and (max-width: 767px) {
    .media .media-body dl dt{
        padding: 1rem 0 0 1rem;
    }
    .media .media-body dl dd{
        padding: 1rem 0 0 2rem;
    }
    .media .media-body dl dt.none{
        padding: 0;
        line-height: 0.3;
    }
 }

/*--------------------------------------------------------------
# 회칙
--------------------------------------------------------------*/
.clauseBox{}
.clauseBox h5{padding-top:40px; font-size: 2.1rem; color: #272c2f; font-weight: 500; }
.clauseBox h5:first-child{padding-top: 0;}
.clauseBox h6{font-size:1.8rem; font-weight: 500;}
.clauseBox dl{padding-top: 15px;}
.clauseBox dl dt{color: #5656C7; font-weight: 500; margin-bottom: 10px;}
.clauseBox dl dd{line-height: 1.5; margin-bottom: 10px;}
.clauseBox dl dd ul{padding: 15px 20px; border: 1px solid #ccc; border-radius: 15px; margin-bottom: 20px;}
.clauseBox dl dd ul li{line-height: 1.7;}


/*--------------------------------------------------------------
# 역대 동창회장
--------------------------------------------------------------*/
.thumbnail{border: 1px solid #ddd;}
.thumbnail .caption{text-align: center;}
.thumbnail .caption h3{ font-size: 2.1rem;  font-weight: bold;}
.thumbnail .caption h3 span{font-weight: 300; color:#666; font-size: 1.5rem;}
.thumbnail .caption p{margin-bottom: 0.5rem;}
.thumbnail .caption p:first-child{  color: #556db1; font-weight: bold;  margin-bottom: 1.5rem;}
.thumbnail .caption p:last-child{ font-weight: 300; color: #666; font-size: 1.6rem; margin-bottom: 0;}

@media screen and (max-width:575px) {
    .thumbnail .caption p:last-child{font-size:1.4rem}  
}
/*--------------------------------------------------------------
# 임원 (고문 및 회장단 / 이사 / 동기회장.지부장) 
--------------------------------------------------------------*/

/* dl 공통 컬러 */
dl dt{color: #272c2f;}
.advisor{ margin-top: 3rem;}
.advisor .row{border-bottom: 1px dashed #ddd; padding: 3rem 0;}
.advisor .row:first-child{padding-top: 0;}
.advisor .S1-txt-title h2{ font-size: 2.1rem; font-weight: bold; margin-bottom: 2rem; color: #556db1;}
.advisor .S1-txt-title h2:after{border-bottom: 3px solid #556db1; width: 38px;}
.advisor .S1-txt-content > div{text-align: left; margin-bottom: 7px;}
.advisor .S1-txt-content dl dt{text-align: left; width: 120px;}
.advisor .S1-txt-content dl dd{margin-left: 160px;}

.advisor .class_chairman dl dt{width: 160px;}
.advisor .class_chairman dl dd{margin-left: 180px;}

@media screen and (max-width:767px) {
    .advisor > .row:first-child .S1-txt-title {
        margin-top:7rem;
    }
}

/*--------------------------------------------------------------
# 오시는 길
--------------------------------------------------------------*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.location{ margin-top: 50px; border-top: 2px solid #272c2f;}
.location dl{padding-top: 2.5rem; border-bottom: 1px solid #ccc;}
.location dl dt{text-align: left; line-height: 6rem; border-bottom: 1px solid #ccc;}
.location dl dd{ line-height: 6rem; border-bottom: 1px solid #ccc;}
.location dl dt:last-child{border-bottom: none;}
.location dl dt.bus_tit{border-bottom: none;}
.location dl dd.bus_way{border-bottom: none;}
.location dl dd.bus_no{border-bottom: none; line-height: 1.8; padding-bottom: 1rem;}

@media screen and (max-width:767px){
  .location dl{}
  .location dl dt{border-bottom: none; color: #556db1; line-height: 4rem;}
  .location dl dd{ line-height: 4rem; margin-bottom: 1rem; padding-bottom: 1rem;}
  .location dl dd.bus_way{margin-bottom: 0; padding-bottom: 0.5rem;}
}


/*--------------------------------------------------------------
# 동창회 및 후원금
--------------------------------------------------------------*/
.sponsor{display: block;}
.sponsor > div{margin-top:80px;}
.sponsor > div:first-child{margin-top: 0;}

.sponsor h2{margin: 50px 0 20px 0;font-size: 2.8rem; color:#272c2f; letter-spacing: -1px;background: url(/theme/basic/img/list-ico-blue.png) left 9px no-repeat;background-size: 16px;padding-left: 25px;}
.sponsor p,
.sponsor ul{position: relative; margin-bottom: 20px !important;}
.sponsor ul li{position: relative; text-indent: -18px; padding-left: 18px;}
.sponsor ul li:before{content: 'ㆍ';position: relative;top: 50%;left: 0;background: none;width: 0;height: 0;}
.sponsor .es_vol_alert{text-indent: -18px; padding-left: 18px; color: #888;  font-size: 1.5rem;  font-weight:300; margin-top: 20px;}


/* 아이콘(회비 쓰이는 곳) */
.fee > div{display: inline-block;vertical-align: top;box-sizing: border-box;width: 191px;height: 240px;background: #3d567f;padding: 65px 15px 0;margin: 10px 10px;text-align: center;}
.fee > div:before{content:none;}
.fee .tit{font-size: 20px; line-height:1.3; color: #fff;word-break: keep-all;}
.fee .tit:before{display: block;content: "";width: 20px;height: 2px;background: #fff;margin: 15px auto;}
.fee > div img{max-width: 65px;}

/* table */
.sponsor .bs_spon_tbl {border-spacing: 0;width: 100%;border-collapse: collapse;border-top: 2px solid #000;}
caption {  position: absolute;  width: 0;  height: 1px;  padding: 0;  margin: -1px;  border: 0;  clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px);  overflow: hidden;}
.bs_spon_tbl tbody tr th, 
.bs_spon_tbl tbody tr td{  border-bottom: 1px solid #ddd; border-right:1px solid #ddd;   padding: 20px;  color: #666;  vertical-align: middle; letter-spacing:0;}
.bs_spon_tbl tbody tr th{background:#f7f7f7; text-align: center;}
.bs_spon_tbl tbody tr td:last-child{border-right:none; }
.bs_spon_tbl tbody tr td.person{background:#f7f7f7;}
.bs_spon_tbl tbody tr td.caution{color:#556db1; text-align: center !important;}

.bs_spon_tbl.type tbody tr td{text-align:center;}

@media screen and (max-width: 767px) {
  .bs_spon_tbl td span{display: block; line-height: 2;}
  .bs_spon_tbl td span.slide{display: none;}
}

/*  동창회비 및 후원 찬조금 납부 방법  */
.sponsor .payment h3{font-size: 2.1rem; color: #B37244; padding-top: 1rem;}
.sponsor .payment ul li div{text-indent: -18px; padding-left: 18px;}
.sponsor .payment ul li span{display: block; color:#556db1; }
.sponsor .payment ul li span.point{color:#B32D44; display: inline;}
.sponsor .payment ul li span.point2{text-decoration: underline; display: inline; color:#B32D44;  }



/*--------------------------------------------------------------
# 모교소식
--------------------------------------------------------------*/
.snupharm .row:before{display: block; clear: both !important;}
.snupharm{display: block;}
.snupharm h2{text-align: center; margin-bottom: 6rem;}
.snupharm h2 span{color:#556db1; font-weight: 600;}
.snupharm .card{box-sizing: border-box;  margin-top: 30px;}
.snupharm .card>div{box-sizing: border-box;   background: #fff;  text-align: center;  word-break: keep-all; margin-bottom: 3rem;}
.snupharm .card>div:hover{}
.snupharm .card>div:hover a p{color:rgb(255 255 255 / 85%);}
.snupharm .card>div:hover a .num span{border-color: #fff;}
.snupharm .card>div>a{display: block; width: 100%;  padding: 45px 15px;  border: 1px solid #ccc;} 
.snupharm .card>div>a:hover{background:linear-gradient(to bottom, rgba(8,56,141,0.9), rgba(84, 68, 179,0.9))}
.snupharm .card a{display: block;}
.snupharm .card .num{    font-size: 1.8rem;  color: #000;  font-weight: bold;}
.snupharm .card .num span{    border-bottom: 1px solid #111;}
.snupharm .card .ico{display: flex;  margin: 40px 0 25px;  justify-content: center;  align-items: center;  height: 60px; width: 100%;}
.snupharm .card .txt{font-size: 1.7rem;  color: #111;  line-height: 1.7;}


/* card icon */
.snupharm .card .ico_01{background: url(/theme/basic/img/huwon/huwon_icon14_n.png) no-repeat center;}
.snupharm .card .ico_02{background: url(/theme/basic/img/huwon/huwon_icon9_n.png) no-repeat center;}
.snupharm .card .ico_03{background: url(/theme/basic/img/huwon/huwon_icon10_n.png) no-repeat center;}
.snupharm .card .ico_04{background: url(/theme/basic/img/huwon/huwon_icon16_n.png) no-repeat center;}
.snupharm .card .ico_05{background: url(/theme/basic/img/huwon/huwon_icon7_n.png) no-repeat center;}
.snupharm .card .ico_06{background: url(/theme/basic/img/huwon/huwon_icon13_n.png) no-repeat center;}

.snupharm .card>div:hover a div.ico_01{background: url(/theme/basic/img/huwon/huwon_icon14.png) no-repeat center;}
.snupharm .card>div:hover a div.ico_02{background: url(/theme/basic/img/huwon/huwon_icon9.png) no-repeat center;}
.snupharm .card>div:hover a div.ico_03{background: url(/theme/basic/img/huwon/huwon_icon10.png) no-repeat center;}
.snupharm .card>div:hover a div.ico_04{background: url(/theme/basic/img/huwon/huwon_icon16.png) no-repeat center;}
.snupharm .card>div:hover a div.ico_05{background: url(/theme/basic/img/huwon/huwon_icon7.png) no-repeat center;}
.snupharm .card>div:hover a div.ico_06{background: url(/theme/basic/img/huwon/huwon_icon13.png) no-repeat center;}

@media (max-width: 575px){
  .snupharm .card>div{margin:0 0 15px 0;}
  .snupharm .card>div:last-child{margin: 0;}
}


/*--------------------------------------------------------------
# 회사소개 #경영윤리 # map
--------------------------------------------------------------*/

#slogan{ width:100%; }
#slogan .slogan-title{}
#slogan .slogan-title h2{ padding: 0 0 25px;
    font-size: 20px;
    color: #333;
    line-height: 32px;
    letter-spacing: -0.2px; }
#slogan .slogan-title h3{  }


#content-wrap { margin:40px 0 70px;}
.S1-txt-title{}
.S1-txt-title h2{ font-size:20px; font-weight:bold; margin-bottom:60px; }
.S1-txt-title h2:after{ content: ''; display: block; width: 34px;  border-bottom: 5px solid #333; margin:20px 0px 0px 0px; }
.S1-txt-content{ margin: 15px 0 0; font-size: 1.8rem; line-height: 1.8; letter-spacing:-0.1rem; }
.S1-txt-content p{margin-bottom:4rem;}

.S1-txt-content .first_txt:before{
    content: "";
    display: inline-block;
    position: absolute;
    top: -3.5rem;
    width: 3.5rem;
    height: 2.9rem;
    background: url(/theme/basic/img/sub_quote.png) no-repeat;
    background-size: contain;
    margin-bottom: 1.9rem;
}
.S1-txt-content .first_txt{font-size: 2.8rem; color: #333;  margin-top: 4rem;  margin-bottom: 4.5rem; line-height: 1.4; position: relative;}
.S1-txt-content .S1-txt-ct{ display:inline-block; padding-top:10px; padding-bottom:10px; width:30%; text-align:left  }
.S1-txt-content .S1-txt-cc{ display:inline-block; padding-top:10px; padding-bottom:10px; width:60%; text-align:left }

.S1-txt-content .img-responsive{max-width: 300px;}


/*.s_label_title{ display:inline-block;  width:150px; font-weight:bold; margin-right:20px;padding:5px;}*/
.s_label_content{padding:5px; display:inline-block;}





/* =============================================================== */
/* Sub Top Banner
/* =============================================================== */
#shop_banner_S001 { width: 100%; display: block; clear: both; height: auto; }
#shop_banner_S001 .bg_images{ 
    background: url(../../../theme/basic/img/slide/slide_1.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed; /* IE FIX */
	background-position: 50% 8px;
}


#sub_visual { width: 100%; display: block; clear: both; height: auto; }

#sub_visual:before{
    content: "";
    opacity: 0.3;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    max-height: 300px;
    overflow: hidden;
    background-color: black;
}

#sub_visual>div{
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /*background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed; /* IE FIX */
    width: 100%;
	height:300px;
}
#sub_visual .bg_images_1{ 
    background-image: url(../../../theme/basic/img/slide/slide_1.jpg); 
    background-position: 0 25%;  
}


#sub_visual .bg_images_2{ 
    background-image: url(../../../theme/basic/img/slide/slide_2.jpg);
    background-position: 0 13%;
}


#sub_visual .bg_images_3{ 
    background-image: url(../../../theme/basic/img/slide/slide_3.jpg);
    background-position: 100px 10%;
}


#sub_visual .bg_images_4{ 
    background-image: url(../../../theme/basic/img/slide/slide_4.jpg);
}

#sub_visual .bg_images_5{ 
    background-image: url(../../../theme/basic/img/slide/slide_5.jpg);
}

.text_number { font-size: 64px; color: #fff; font-weight: lighter; margin-bottom: 10px; }
.banner_content h2 { color: #333; display: inline-block;  font-size: 30px; font-weight: 700; line-height: 32px; margin: 0 auto; max-width: 900px; padding: 5px 10px;
    text-align: center; }

.banner_content h3 { color: #DDDDDD; display: inline-block; font-size: 20px; font-weight: lighter; margin-bottom: 20px; max-width: 900px; padding: 0 10px; text-align: center; }

.btn-discover {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 14px 60px;
    text-decoration: none;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.btn-discover:hover { color: #fff; border-color: rgba(255, 255, 255, 0.7);}

.banner_content {display:none; text-align: center; padding: 100px 0; }

#shop_banner_S002 { width: 100%; display: block; clear: both; height: auto; }
#shop_banner_S002 .bg_images{ 
    background: url(../../../theme/basic/img/slide/banner_02.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed; /* IE FIX */
	background-position: 50% 8px;
}


#shop_banner_S004 { width: 100%; display: block; clear: both; height: auto; }
#shop_banner_S004 .bg_images{ 
    background: url(../../../theme/basic/img/slide/banner_04.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed; /* IE FIX */
	background-position: 50% 8px;
}






/*--------------------------------------------------------------
# 솔루션 소개 타임라인
--------------------------------------------------------------*/
.main-timeline{ overflow: hidden; position: relative; }
.main-timeline:before{ content: ""; width: 3px; height: 100%; background: #d6d5d5; position: absolute; top: 0; left: 50%; }
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline .timeline{ padding-right: 30px; position: relative; }
.main-timeline .timeline:before,
.main-timeline .timeline:after{ content: ""; display: block; width: 100%; clear: both; }
.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before{
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #d6d5d5;
    background: #fff;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: -3px;
}
.main-timeline .timeline:last-child:before{ top: auto; bottom: 0; }
.main-timeline .timeline-icon{ width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #d6d5d5; box-sizing: content-box; margin: auto; position: absolute;  top: 0; left: 0; bottom: 0; right: -4px;}
.main-timeline .timeline-icon:before{ content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #737ab4; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.main-timeline .year{ display: inline-block; padding: 8px 20px; margin: 0; font-size: 14px; color: #fff; background: #737ab4; text-align: center; position: absolute; top: 50%; right: 35%;  transform: translateY(-50%); }
.main-timeline .year:before{ content: ""; border-right: 18px solid #737ab4; border-top: 18px solid transparent; border-bottom: 18px solid transparent; position: absolute; top: 0; left: -18px;}
.main-timeline .timeline-content{width: 46.5%; padding: 43px 50px; margin: 0 20px 0 0; background: #f2f2f2; position: relative;}
.main-timeline .timeline-content:after{ content: ""; border-left: 20px solid #f2f2f2; border-top: 20px solid transparent; border-bottom: 20px solid transparent; position: absolute;    top: 50%; right: -20px; transform: translateY(-50%); }
.main-timeline .title{ float: left;  font-size: 24px; font-weight: bold; color: #504f54; margin: 0 20px 20px 0;}
.main-timeline .post{ display: inline-block; font-size: 14px; color: #999; margin-top: 6px;}
.main-timeline .description{ font-size: 14px; color: #7d7b7b; line-height: 24px; margin: 0; clear: both;}
.main-timeline .timeline:nth-child(2n){ padding: 0 0 0 30px; }
.main-timeline .timeline:nth-child(2n) .year{ right: auto; left: 35%; }
.main-timeline .timeline:nth-child(2n) .year:before{ border: 18px solid transparent; border-right: none; border-left: 18px solid #737ab4; left: auto; right: -18px;}
.main-timeline .timeline:nth-child(2n) .timeline-content{ float: right; margin: 0 0 0 20px;}
.main-timeline .timeline:nth-child(2n) .timeline-content:after{ border-left: none; border-right: 20px solid #f2f2f2; right: auto; left: -20px;}
@media only screen and (max-width: 1200px){
    .main-timeline .year{ right: 30%; }
    .main-timeline .timeline:nth-child(2n) .year{ left: 30%; }
}
@media only screen and (max-width: 990px){
    .main-timeline .year{ right: 25%; }
    .main-timeline .timeline:nth-child(2n) .year{ left: 25%; }
}
@media only screen and (max-width: 767px){
    .main-timeline:before{ left: 10px; }
    .main-timeline .timeline{
        padding: 0 0 0 30px;
        margin-bottom: 20px;
    }
    .main-timeline .timeline:last-child{ margin-bottom: 0; }
    .main-timeline .timeline:first-child:before,
    .main-timeline .timeline:last-child:before{ display: none; }
    .main-timeline .timeline-icon{
        margin: 0;
        position: absolute;
        top: 7px;
        left: 0;
    }
    .main-timeline .year,
    .main-timeline .timeline:nth-child(2n) .year{
        display: block;
        font-weight: bold;
        margin: 0 0 32px 30px;
        z-index: 1;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
    }
    .main-timeline .timeline:nth-child(2n) .year:before{
        border-left: none;
        border-right: 18px solid #737ab4;
        right: auto;
        left: -18px;
    }
    .main-timeline .timeline-content{ padding: 20px; }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(2n) .timeline-content{
        width: auto;
        float: none;
        margin: 0 0 0 30px;
    }
    .main-timeline .timeline-content:after,
    .main-timeline .timeline:nth-child(2n) .timeline-content:after{
        border: none;
        border-bottom: 20px solid #f2f2f2;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        top: -20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}
@media only screen and (max-width: 480px){
    .main-timeline .title{
        float: none;
        margin: 0;
    }
    .main-timeline .year,
    .main-timeline .timeline:nth-child(2n) .year{ margin-left: 20px; }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(2n) .timeline-content{ margin-left: 10px; }
    .main-timeline .post{ margin: 5px 0; }
}

.main-timeline .timeline{
    width: 80%;
    float: left;
}
.main-timeline .timeline-content{
    color: #fff;
    background: linear-gradient(to right, #3DC3F8,#1E9CE8);
    padding: 20px 20px 20px 170px;
    margin: 0 0 60px;
    border-radius: 100px 0 0;
    display: block;
    position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
    color: #fff;
    background: linear-gradient(to right, #3DC3F8,#1E9CE8);
    font-size: 50px;
    line-height: 100px;
    text-align: center;
    height: 120px;
    width: 120px;
    border: 10px solid #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -60px;
    left: 20px;
}
.main-timeline .title{
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin: 0 0 5px;
}
.main-timeline .description{
    font-size: 15px;
    letter-spacing: 1px;
    margin: 0;
}
.main-timeline .timeline:nth-child(even){
    margin: -60px 0 60px;
    float: right;
}
.main-timeline .timeline:nth-child(even) .timeline-content{
    padding: 20px 170px 20px 20px;
    margin: 60px 0 0;
    border-radius: 0 0 100px 0;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
    left: auto;
    right: 20px;
    bottom: auto;
    top: -60px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-content,
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
    background: linear-gradient(to right, #A71E92,#C6409F);
}
.main-timeline .timeline:nth-child(4n+3) .timeline-content,
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
    background: linear-gradient(to right, #F18624,#D36414);
}
.main-timeline .timeline:nth-child(4n+4) .timeline-content,
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
    background: linear-gradient(to right, #27ae60,#2ecc71);
}

@media screen and (max-width:767px){
    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even){
        width: 100%;
        margin: 0 0 15px;
    }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(even) .timeline-content{
        padding: 60px 15px 15px 15px;
        margin: 40px 0 0;
        border-radius: 0 0 50px 0;
    }
    .main-timeline .timeline-icon,
    .main-timeline .timeline:nth-child(even) .timeline-icon{
        font-size: 30px;
        line-height: 60px;
        height: 80px;
        width: 80px;
        right: 15px;
        left: auto;
        top: -40px;
    }
}
@media screen and (max-width:567px){
    .main-timeline .title{ font-size: 18px; }
}



/*--------------------------------------------------------------
# 회원가입
--------------------------------------------------------------*/
.sign_up{padding: 70px 50px; position: relative; background: white; font-size:1.8rem;}
.sign_up .sign_up_tit{margin-bottom:60px;}
.sign_up .sign_up_tit h2{margin-bottom:10px; font-weight:500; font-size:6rem; color: #222;}
.sign_up .sign_up_tit p{font-size:1.8rem; color:#666;}

.sign_up .btn.btn-block{padding: 20px; border-radius: 40px; font-size: 2.3rem; font-weight: 700;}
.sign_up .panel-default{margin-bottom: 50px; }
.sign_up .panel-default .panel-heading{position: relative; font-weight: 500;}
.sign_up .panel-default .panel-heading:before{    
    content: '';
    display: inline-block;
    position: relative;
    top: -4px;
    left: 1px;
    width: 6px;
    height: 6px;
    border: 2px solid #5444b3;
    border-radius: 50%;
    margin-right: 10px;
}
.sign_up .panel-default .panel-heading:after{
    content: '';
    display: inline-block;
    position: absolute;
    top: 17px;
    left: 13px;
    border: 1px solid #5444b3;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.sign_up input[type=checkbox]{top: 10%;}
.sign_up .chkall_box{color: #4b4b4b; background:#fef29d;}

.sign_up .form-group span{font-size:1.6rem; color:red; text-indent:-18px; padding-left:19px;}
.sign_up .form-group .check2 label{padding-top: 0 !important;}
.sign_up #reg_result .reg_result_p{ font-size: 3rem; margin-bottom:60px;}

.sign_up{}


/*--------------------------------------------------------------
# login
--------------------------------------------------------------*/
.login-block{	
    background: #28a745;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #FFB88C, #28a745);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #FFB88C, #28a745); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background : linear-gradient(to bottom right, rgb(61 86 127 / 90%), rgb(84 68 179 / 90%));
    float:left;
    width:100%;
    padding : 50px 0;
    padding : 200px 50px 100px;
}

.login-block button,
.login-block a.btn{border-radius:30px;}

.login-sec{padding: 70px 50px;position:relative;background: white;}
.login-sec .login-tit{margin-bottom:60px;}
.login-sec .login-tit h2{margin-bottom:10px; font-weight:500; font-size:6rem; color: #222;}
.login-sec .login-tit p{font-size:1.8rem; color:#666;}

.login-sec .form-group-lg label{text-align:right; font-size: 1.8rem; padding-top:11px !important; color: #3D567F;}
.login-sec .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}
.login-sec .copy-text i{color:#FEB58A;}
.login-sec .copy-text a{color:#E36262;}
.login-sec .form-check-label{float:right; font-size:1.6rem; margin-bottom:15px;}
.login-sec .form-check-label input[type=checkbox] {top: 50%; transform: translateY(-25%);}

.login-sec .find{display:flex; justify-content:center; -webkit-box-pack: center;  }
.login-sec .find a{position: relative; font-size:1.6rem; color:#666; padding-right:15px; margin-right:15px;}
.login-sec .find a:after{content:''; display:block; position:absolute; top:8px; right:0px; width:1px; height:10px; background:#666;}
.login-sec .find a:last-child{padding-right:0; margin-right:0;}
.login-sec .find a:last-child:after{content:none;}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer { color: #fff; background: #111; margin-top:60px; }
#footer .footer-top .container{
    padding-top: 0;
}
#footer .footer-menu{padding: 10px 0; width: 100%; background-color: #000;}
#footer .footer-menu ul{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
#footer .footer-menu ul li{float: left;display: inline-block;padding-right: 15px;}
#footer .footer-menu ul li a{font-size: 14px; color: white;}
#footer .footer-menu ul li:after{
    content: '';
    display: inline-block;
    position: relative;
    top: -1px;
    left: 8px;
    width: 1px;
    height: 7px;
    background: rgb(255 255 255 / 50%);
}
#footer .footer-menu ul li:nth-child(4):after,
#footer .footer-menu ul li:nth-child(3):after{
    content: none;
}
#footer .footer-menu ul li:nth-child(4) {
    float: right;
    padding-right: 20px;
}

#footer .footer-top { /*padding: 60px 0 30px 0;*/ background: #363636; }
#footer .footer-top .footer-contant { margin: 30px 0 ; }
#footer .footer-top .footer-contant h3 { font-size: 22px; margin: 0 0 10px 0; padding: 2px 0 2px 0; line-height: 1; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #fff; }


#footer .footer-top .footer-contant p {
  position: relative;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.7);
}
#footer .footer-contant p span:first-child,
#footer .footer-contant p span:nth-child(3){
    display: block;
}

#footer .footer-contant p span i{
    display: inline-block;
    margin-right: 11px;
    position: relative;
}
#footer .footer-contant p span i:last-child{
    display: none;
}
#footer .footer-contant p span i:after{
    content: '';
    display: inline-block;
    border-right: 1px solid rgba(255,255,255,0.4);
    position: absolute;
    top: -9px;
    width: 1px;
    height: 8px;
    padding: 0 3px;
}
#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #1ed33c;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: rgba(255, 255, 255, 0.6);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #fff;
}

#footer .copyright p{
   margin-bottom: 0;
   font-size: 11px;
   line-height: 35px;
}


#footer .footer-newsletter {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

#footer .footer-newsletter h4 {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4px 0 0 4px;
  text-align: left;
}

#footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #333;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type="submit"]:hover {
  background: #2ae149;
}

#footer .credits {
  padding-top: 5px;
  font-size: 13px;
  color: #fff;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #333;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 359px){
    #footer .footer-menu ul{
        justify-content: space-between;
    }
    #footer .footer-menu ul li{
        padding: 0;
    }
    #footer .footer-menu ul li a{
        font-size: 1.2rem;        
    }
    #footer .footer-menu ul li:after{
       
    }
}
@media (max-width:768px) {
    #footer .footer-top .footer-contant p span{display: block; position: relative;}
    #footer .footer-top .footer-contant p span i{
        display: inline-block;
        margin-right: 9px;
    }
    #footer .footer-top .footer-contant p span i:after{
        content: '';
        display: inline-block;
        border-right: 1px solid rgba(255,255,255,0.5);
        position: absolute;
        top: -9px;
        width: 1px;
        height: 8px;
        padding: 0 2px;
    }
    #footer .footer-top .footer-contant p span i:last-child{
        display: none;
    }
}

/* 페이징 pg_current */
.pg_wrap {clear:both;display:block; text-align:center; margin-left: auto; margin-right: auto; }
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;border:1px solid #c6c6c6}
.pg_current {color:#fff;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px; background:#ccc; background-color:#333;}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50%;padding:0;border:1px solid #c6c6c6}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50%;padding:0;border:1px solid #c6c6c6}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50%;padding:0;border:1px solid #c6c6c6}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50%;padding:0;border:1px solid #c6c6c6}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}


/* 자동등록방지 */

#fviewcomment{
	background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
	min-height: 1px;
    padding: 1.25rem;
}

.captcha_wrap{
	background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
	min-height: 1px;
    padding: 1.25rem;	
	}

.captcha_box {
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#captcha_mp3, #captcha_reload{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .75rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d; margin-bottom:7px;
	margin-bottom:0px; font-size:14px;
	height:40px;
	}

#captcha label { font-size:16px; }

/* #captcha_img{ width:160px; height:60px; }  기본크기 */

#captcha_img{ width:120px; height:40px; }
#captcha_key { height:40px; padding:0px; font-size:16px; }



/*  line-height */
.lh120{line-height:120% !important;}.lh150{line-height:150% !important;}.lh180{line-height:180% !important;}.lh200{line-height:200% !important;}.lh500{line-height:500% !important;}

/* width */
.wid1{width:1%!important}.wid2{width:2%!important}.wid3{width:3%!important}.wid4{width:4%!important}.wid5{width:5%!important}.wid6{width:6%!important}.wid7{width:7%!important}.wid8{width:8%!important}.wid9{width:9%!important}.wid10{width:10%!important}.wid11{width:11%!important}.wid12{width:12%!important}.wid13{width:13%!important}.wid14{width:14%!important}.wid15{width:15%!important}.wid16{width:16%!important}.wid17{width:17%!important}.wid18{width:18%!important}.wid19{width:19%!important}.wid20{width:20%!important}.wid21{width:21%!important}.wid22{width:22%!important}.wid23{width:23%!important}.wid24{width:24%!important}.wid25{width:25%!important}.wid26{width:26%!important}.wid27{width:27%!important}.wid28{width:28%!important}.wid29{width:29%!important}.wid30{width:30%!important}.wid31{width:31%!important}.wid32{width:32%!important}.wid33{width:33%!important}.wid34{width:34%!important}.wid35{width:35%!important}.wid36{width:36%!important}.wid37{width:37%!important}.wid38{width:38%!important}.wid39{width:39%!important}.wid40{width:40%!important}.wid41{width:41%!important}.wid42{width:42%!important}.wid43{width:43%!important}.wid44{width:44%!important}.wid45{width:45%!important}.wid46{width:46%!important}.wid47{width:47%!important}.wid48{width:48%!important}.wid49{width:49%!important}.wid50{width:50%!important}.wid51{width:51%!important}.wid52{width:52%!important}.wid53{width:53%!important}.wid54{width:54%!important}.wid55{width:55%!important}.wid56{width:56%!important}.wid57{width:57%!important}.wid58{width:58%!important}.wid59{width:59%!important}.wid60{width:60%!important}.wid61{width:61%!important}.wid62{width:62%!important}.wid63{width:63%!important}.wid64{width:64%!important}.wid65{width:65%!important}.wid66{width:66%!important}.wid67{width:67%!important}.wid68{width:68%!important}.wid69{width:69%!important}.wid70{width:70%!important}.wid71{width:71%!important}.wid72{width:72%!important}.wid73{width:73%!important}.wid74{width:74%!important}.wid75{width:75%!important}.wid76{width:76%!important}.wid77{width:77%!important}.wid78{width:78%!important}.wid79{width:79%!important}.wid80{width:80%!important}.wid81{width:81%!important}.wid82{width:82%!important}.wid83{width:83%!important}.wid84{width:84%!important}.wid85{width:85%!important}.wid86{width:86%!important}.wid87{width:87%!important}.wid88{width:88%!important}.wid89{width:89%!important}.wid90{width:90%!important}.wid91{width:91%!important}.wid92{width:92%!important}.wid93{width:93%!important}.wid94{width:94%!important}.wid95{width:95%!important}.wid96{width:96%!important}.wid97{width:97%!important}.wid98{width:98%!important}.wid99{width:99%!important}.wid100{width:100%!important}
.wid1p{width:1px !important} .wid2p{width:2px !important} .wid3p{width:3px !important} .wid4p{width:4px !important} .wid5p{width:5px !important} .wid6p{width:6px !important} .wid7p{width:7px !important} .wid8p{width:8px !important} .wid9p{width:9px !important} .wid10p{width:10px !important}
.wid10p{width:10px !important} .wid20p{width:120px !important} .wid30p{width:30px !important} .wid40p{width:40px !important} .wid50p{width:50px !important} .wid60p{width:60px !important} .wid70p{width:70px !important} .wid80p{width:80px !important} .wid90p{width:90px !important} .wid100p{width:100px !important}
.wid120p{width:120px !important} .wid150p{width:150px !important} .wid160p{width:160px !important} .wid170p{width:170px !important} .wid200p{width:200px !important} .wid250p{width:250px !important}

/* common gap class : padding */
.pd0{padding:0px !important}	.pd2{padding:2px !important}	.pd4{padding:4px !important}	.pd6{padding:6px !important}	.pd8{padding:8px !important} .pd10{padding:10px !important} .mg0{margin:0 !important;} .mg2{margin:2px !important;} .mg4{margin:4px !important;} .mg6{margin:6px !important;} .mg8{margin:8px !important;} .mg10{margin:10px !important;} .mg20{margin:20px !important;} .mg30{margin:30px !important;} .mg50{margin:50px !important;} .mr10{ margin-right:10px !important;} .ml10{ margin-left:10px !important;} .mr20{ margin-right:20px !important;} .ml20{ margin-left:20px !important;} .mr30{ margin-right:30px !important;} .ml30{ margin-left:30px !important;}	

/* common gap class : margin */
.mt0{margin-top:0px !important}.mt1{margin-top:1px !important}.mt2{margin-top:2px !important}.mt3{margin-top:3px !important}.mt4{margin-top:4px !important}.mt5{margin-top:5px !important}.mt6{margin-top:6px !important}.mt7{margin-top:7px !important}.mt8{margin-top:8px !important}.mt10{margin-top:10px !important}.mt15{margin-top:15px !important}.mt20{margin-top:20px !important}.mt21{margin-top:20px !important}.mt22{margin-top:22px !important}.mt25{margin-top:25px !important}.mt30{margin-top:30px !important}.mt40{margin-top:40px !important}.mt50{margin-top:50px !important}.mt150{margin-top:150px !important}
.mr0{margin-right:0px !important}.mr1{margin-right:1px !important}.mr2{margin-right:2px !important}.mr3{margin-right:3px !important}.mr4{margin-right:4px !important}.mr5{margin-right:5px !important}.mr6{margin-right:6px !important}.mr7{margin-right:7px !important}.mr8{margin-right:8px !important}.mr9{margin-right:9px !important}.mr10{margin-right:10px !important}.mr15{margin-right:15px !important}.mr18{margin-right:18px !important}.mr20{margin-right:20px !important}.mr25{margin-right:25px !important}.mr30{margin-right:30px !important}.mr35{margin-right:35px !important}.mr40{margin-right:40px !important}.mr45{margin-right:45px !important}.mr50{margin-right:50px !important}
.mb0{margin-bottom:0px !important}.mb1{margin-bottom:1px !important}.mb2{margin-bottom:2px !important}.mb3{margin-bottom:3px !important}.mb4{margin-bottom:4px !important}.mb5{margin-bottom:5px !important}.mb6{margin-bottom:6px !important}.mb7{margin-bottom:7px !important}.mb8{margin-bottom:8px !important}.mb9{margin-bottom:9px !important}.mb10{margin-bottom:10px !important}.mb15{margin-bottom:15px !important}.mb18{margin-bottom:18px !important}.mb20{margin-bottom:20px !important}.mb25{margin-bottom:25px !important}.mb30{margin-bottom:30px !important}.mb35{margin-bottom:35px !important}.mb40{margin-bottom:40px !important}.mb45{margin-bottom:45px !important}.mb50{margin-bottom:50px !important}
.ml0{margin-left:0px !important}.ml1{margin-left:1px !important}.ml2{margin-left:2px !important}.ml3{margin-left:3px !important}.ml4{margin-left:4px !important}.ml5{margin-left:5px !important}.ml6{margin-left:6px !important}.ml7{margin-left:7px !important}.ml8{margin-left:8px !important}.ml9{margin-left:9px !important}.ml10{margin-left:10px !important}.ml15{margin-left:15px !important}.ml20{margin-left:20px !important}.ml25{margin-left:25px !important}.ml30{margin-left:30px !important}.ml35{margin-left:35px !important}.ml40{margin-left:40px !important}.ml45{margin-left:45px !important}.ml38{margin-left:38px !important}.ml50{margin-left:50px !important}.ml60{margin-left:60px !important}.ml65{margin-left:65px !important}.ml70{margin-left:70px !important}.ml100{margin-left:100px !important}
.pt0{padding-top:0 !important}.pt1{padding-top:1px !important}.pt2{padding-top:2px !important}.pt3{padding-top:3px !important}.pt4{padding-top:4px !important}.pt5{padding-top:5px !important}.pt6{padding-top:6px !important}.pt7{padding-top:7px !important}.pt8{padding-top:8px !important}.pt10{padding-top:10px !important}.pt11{padding-top:11px !important}.pt12{padding-top:12px !important}.pt13{padding-top:13px !important}.pt14{padding-top:14px !important}.pt15{padding-top:15px !important}.pt16{padding-top:16px !important}.pt18{padding-top:18px !important}.pt20{padding-top:20px !important}.pt23{padding-top:23px !important}.pt25{padding-top:25px !important}.pt30{padding-top:30px !important}.pt35{padding-top:35px !important}.pt37{padding-top:37px !important}.pt40{padding-top:40px !important}.pt41{padding-top:41px !important}.pt45{padding-top:45px !important}.pt50{padding-top:50px !important}.pt55{padding-top:55px !important}
.pr0{padding-right:0 !important}.pr1{padding-right:1px !important}.pr2{padding-right:2px !important}.pr3{padding-right:3px !important}.pr4{padding-right:4px !important}.pr5{padding-right:5px !important}.pr6{padding-right:6px !important}.pr7{padding-right:7px !important}.pr8{padding-right:8px !important}.pr9{padding-right:9px !important}.pr10{padding-right:10px !important}.pr15{padding-right:15px !important}.pr17{padding-right:17px !important}.pr20{padding-right:20px !important}.pr25{padding-right:25px !important}.pr30{padding-right:30px !important}.pr35{padding-right:35px !important}.pr40{padding-right:40px !important}.pr45{padding-right:45px !important}.pr50{padding-right:50px !important}.pr51{padding-right:51px !important}.pr60{padding-right:60px !important}
.pb0{padding-bottom:0 !important}.pb1{padding-bottom:1px !important}.pb2{padding-bottom:2px !important}.pb3{padding-bottom:3px !important}.pb4{padding-bottom:4px !important}.pb5{padding-bottom:5px !important}.pb6{padding-bottom:6px !important}.pb7{padding-bottom:7px !important}.pb8{padding-bottom:8px !important}.pb9{padding-bottom:9px !important}.pb10{padding-bottom:10px !important}.pb11{padding-bottom:11px !important}.pb12{padding-bottom:12px !important}.pb13{padding-bottom:13px !important}.pb15{padding-bottom:15px !important}.pb18{padding-bottom:18px !important}.pb19{padding-bottom:19px !important}.pb20{padding-bottom:20px !important}.pb24{padding-bottom:24px !important}.pb25{padding-bottom:25px !important}.pb26{padding-bottom:26px !important}.pb30{padding-bottom:30px !important}.pb32{padding-bottom:32px !important}.pb35{padding-bottom:35px !important}.pb40{padding-bottom:40px !important}.pb45{padding-bottom:45px !important}.pb50{padding-bottom:50px !important}.pb60{padding-bottom:60px !important}.pb76{padding-bottom:76px !important}.pb93{padding-bottom:93px !important}.pb250{padding-bottom:250px !important}
.pl0{padding-left:0 !important}.pl1{padding-left:1px !important}.pl2{padding-left:2px !important}.pl3{padding-left:3px !important}.pl4{padding-left:4px !important}.pl5{padding-left:5px !important}.pl6{padding-left:6px !important}.pl7{padding-left:7px !important}.pl8{padding-left:8px !important}.pl9{padding-left:9px !important}.pl10{padding-left:10px !important}.pl13{padding-left:13px !important}.pl14{padding-left:14px !important}.pl15{padding-left:15px !important}. pl17{padding-left:17px !important} .pl18{padding-left:18px !important}.pl19{padding-left:19px !important}.pl20{padding-left:20px !important}.pl21{padding-left:21px !important}.pl22{padding-left:22px !important}.pl23{padding-left:23px !important} .pl24{padding-left:23px !important} .pl25{padding-left:25px !important}.pl30{padding-left:30px !important} .pl31{padding-left:31px !important} .pl33{padding-left:33px !important} .pl34{padding-left:34px !important}.pl35{padding-left:35px !important}.pl38{padding-left:38px !important}.pl39{padding-left:39px !important}.pl40{padding-left:40px !important}.pl45{padding-left:45px !important}.pl50{padding-left:50px !important}.pl55{padding-left:55px !important}.pl60{padding-left:60px !important}.pl65{padding-left:65px !important}.pl70{padding-left:70px !important}.pl75{padding-left:75px !important}.pl80{padding-left:80px !important}.pl90{padding-left:90px !important}.pl120{padding-left:120px !important}.pl130{padding-left:130px !important}.pl215{padding-left:215px !important}


/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 23.09.02 add mo ver.  */
@media (max-width:768px) {
    .hd_pops{top: 80px !important;left: 10% !important;width: 80%;margin: 0 auto;display: inline-block;}
    .hd_pops_con{width: 100% !important;  height:auto !important; }
}