@charset "UTF-8";
/*@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@import url(notosanskr.css);

/*reset*/
/* 여백 초기화 */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #333;text-decoration: none;}
a:active{color: #333;text-decoration: none;}
a:focus{color: #333;text-decoration: none;}


/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family:'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}

/* 폰트 스타일 초기화 */
em, address, i{font-style: normal;}

/* 블릿기호 초기화 */    
dl, ul, li, ol, menu {list-style: none;}

/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; color:#222; font-weight: normal;}

/* 테두리 초기화 */
img, fieldset {border: 0 none;}

/* 버튼 초기화 */
button {border: 0;}

/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/*인풋*/
/* Select box 스타일 초기화 */ 
/* input 기본 스타일 초기화 */
input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
/* Select box 스타일 초기화 */ 
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    

}

/* IE 에서 Select box 화살표 제거 */ 
select::-ms-expand { display: none; }

:focus, :active {
  outline: 0;
}


.close {width:50px;height: 50px;opacity: 0.8;} 
.close:before, .close:after {position: absolute;left: 25px;content:' ';height: 40px;width: 2px;background-color: #000;} 
.close:before {transform: rotate(45deg);} .close:after {transform: rotate(-45deg);}
.mt-20{margin-top:-20px; }

.sticky{
    position: sticky;
    top: 0;
}
.shadow{box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);}

/*style*/
body{padding:0;margin:0;
    font-family: 'Noto Sans KR', sans-serif;
}
.header{
    background: rgba(255,255,255,0.96);
    z-index: 100;
}
/*상단 광고*/
.top-ad {
    padding-top:5px;padding-bottom:0;
    width: 100%;height:55px;
    background: #3C3469;
    color:#fff;
}
/*.top-ad .container{
   width: 1170px;
}*/
.top-ad .container .row{
    position: relative;
}
.top-ad .txt {
    position:absolute;
    left:50%;
    margin-left:-40%;
    font-size:14px;/*0.73vw*/
    line-height: 45px;
    text-align: center;
}
.top-ad .txt a{
    display: block;
    color:#fff;
}
.top-ad .m-txt {
    display: none;
    font-size:3vw;
    line-height: 45px;
    text-align: center;
}
.top-ad .btn{
    position:absolute;
    right:5%;
    width: 190px;
    font-size:14px;/*0.73vw*/
}
.top-ad .btn a{
    text-align: center;
    display: block; 
    padding: 5px;
    color:#fff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;  
}
.top-ad .close{
    position:absolute;
    right:1%;
    width: 40px;
    height: 40px;
    padding-top:15px;
}
.top-ad .close a{
    display: block;
}
.top-ad .close:before, .close:after {
    height: 20px;width: 1px;
    background-color: #fff;
    opacity: 0.8;} 
.m-logo{display: none;}
/*main nav*/
.header nav.row {    
    margin-top:35px;}
.header nav.row .logo{
    display: block;
    
}
.header nav.row .logo a{
    display: block;
    width: 188px;
}
.header nav.row .logo a img{
    width: 100%;
} 
.header .navbar-nav {
    float: right;
    height: 60px;
}
.header .navbar:after{
    content: '';display: block;clear: both;
}
.header .nav-item {
    font-size:18px;/*0.94vw*/
    display:inline-block;
   color: #3B2B8F;

}
.header .nav-item a{
    margin-right:77px;
    padding:0 12px;
    color: #3B2B8F;
    transition: font-weight 0.5s cubic-bezier(0.42, 0, 0, 0.96);
}
.header .nav-item:last-child a{
    margin-right:0px;}

.header .nav-item a:hover{
    font-weight:700;
}
/*모바일 메뉴*/
.fixed-top-nav {
    display: none; 
    position:sticky; 
    top: 0;
    width: 100%;
    padding:0;
    background: #FFFFFF;
    animation: fadeIn 1s forwards;
    z-index: 100;
}
.m-menu-top{
    display: none;
    position: relative;
    padding:15px 0;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
    animation: fadeIN 0.5s ease
    
}
.m-menu-top:after{
    content: '';width:0;height: 0;display: block;clear: both;
}
.fixed-top-nav .m-btn-menu{   
    position: absolute;
    top:50%;
    right: 8px;
    margin-top:-18px;
    padding:0 15px;
    text-align: right;
    width: 48px;
    height: 48px;
}
.fixed-top-nav .m-btn-menu a{
    display: block;
    width: 36px;
    height: 36px;
}
.fixed-top-nav .m-btn-menu a img{
    width: 100%;
}
.fixed-top-nav .m-btn-menu:after{
    content: '';width:0;height: 0;display: block;clear: both;
}
.fixed-top-nav .dropdown{
    display: none;
    width: 100%;
    margin-left: 0px;
    padding:0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
}


.fixed-top-nav .dropdown .m-nav-menu{
    text-align: center;
    padding:20px 0;
    width: 100%;
    border-bottom:1px solid #EFEFEF;
}
.fixed-top-nav .dropdown .m-nav-menu:last-child{
    border-bottom:0;
}
.fixed-top-nav .dropdown .m-nav-menu a{
    font-size:3vw;/*0.94vw*/
    color: #3B2B8F;
    text-align: center;
}


/*footer*/
.m-cs{
    display: none;
    margin:50px 0;
}
.m-cs ul {
    width: 48%;
    text-align: right;
    padding:0;
}
.m-cs .call{
    font-size: 6vw; 
    font-weight:700;
    color:#676767;
    padding:0;
} 
.m-cs .call i{
    display:inline-block;
    
    width: 3vw;
}
.m-cs .call i img{
    display:block;
    width: 100%;}
.m-cs .call a{
    color:#676767;
}
.m-cs div {
    width: 48%;
    text-align: center;
}
footer{
    padding:80px 0;
    background: #2F2F2F;
    font-size:14px;
    color:#626262;
}
footer .sns {
    text-align:right;
    margin-bottom:30px;
}
footer .sns span:first-child{
    margin-right: 30px;
}
footer .footer-info {
    border-top:1px solid #454545;;
    padding-top:37px;padding-bottom:20px;
}
footer .footer-info .address {
    padding-left:40px;
    font-size:14px;
}
footer .footer-info .address a{
    color: #626262;
}
footer .footer-info .cs{
    text-align: right;
    font-weight: 300;
    font-size:14px;
    color: #D5D5D5;
}
footer .footer-info .cs a{
    color: #D5D5D5;
}

footer .footer-info .cs li:first-child{
    margin-bottom:5px;
    font-weight: 500;
    font-size: 18px;
}
footer .footer-info .cs li:first-child i{
    margin-right: 10px;
}
footer .footer-info .cs li:last-child{
    margin-top:0;
    font-weight: 500;
    font-size: 36px;
}

/*ani*/
.ani-fadeIn{animation: fadeIn 1s ease forwards;}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeUp {
  from {
    transform: translateY(10%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeLeft {
  from {
    transform: translateX(-10%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeRight {
  from {
    transform: translateX(10%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.contents{overflow:hidden;box-sizing: border-box;}