/*@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);*/


@font-face {
    font-family: 'jost';
    src: url('/fonts/jost-400-book.eot');
    src: url('/fonts/jost-400-book.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jost-400-book.woff2') format('woff2'),
         url('/fonts/jost-400-book.woff') format('woff'),
         url('/fonts/jost-400-book.ttf') format('truetype'),
         url('/fonts/jost-400-book.otf') format('opentype'),
         url('/fonts/jost-400-book.svg#jostbook') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'jost';
    src: url('/fonts/jost-400-bookitalic.eot');
    src: url('/fonts/jost-400-bookitalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jost-400-bookitalic.woff2') format('woff2'),
         url('/fonts/jost-400-bookitalic.woff') format('woff'),
        url('/fonts/jost-400-bookitalic.ttf') format('truetype'),
         url('/fonts/jost-400-bookitalic.otf') format('opentype'),
         url('/fonts/jost-400-bookitalic.svg#jostbookitalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'jost';
    src: url('/fonts/jost-200-thin.eot');
    src: url('/fonts/jost-200-thin.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jost-200-thin.woff2') format('woff2'),
         url('/fonts/jost-200-thin.woff') format('woff'),
         url('/fonts/jost-200-thin.ttf') format('truetype'),
         url('/fonts/jost-200-thin.otf') format('opentype'),
         url('/fonts/jost-200-thin.svg#jostthin') format('svg');
    font-weight: 200;
    font-style: normal;

}

@font-face {
    font-family: 'jost';
    src: url('/fonts/jost-200-thinitalic.eot');
    src: url('/fonts/jost-200-thinitalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jost-200-thinitalic.woff2') format('woff2'),
         url('/fonts/jost-200-thinitalic.woff') format('woff'),
         url('/fonts/jost-200-thinitalic.ttf') format('truetype'),
         url('/fonts/jost-200-thinitalic.otf') format('opentype'),
         url('/fonts/jost-200-thinitalic.svg#jostthinitalic') format('svg');
    font-weight:200;
    font-style: italic;

}
@font-face {
    font-family: 'jost_700_bold';
    src: url('/fonts/jost-700-bold.eot');
    src: url('/fonts/jost-700-bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jost-700-bold.woff2') format('woff2'),
         url('/fonts/jost-700-bold.woff') format('woff'),
         url('/fonts/jost-700-bold.ttf') format('truetype'),
         url('/fonts/jost-700-bold.otf') format('opentype'),
         url('/fonts/jost-700-bold.svg#jost_700_boldbold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'jost';
    src: url('/fonts/jost-700-bolditalic.eot');
    src: url('/fonts/jost-700-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/jost-700-bolditalic.woff2') format('woff2'),
         url('/fonts/jost-700-bolditalic.woff') format('woff'),
         url('/fonts/jost-700-bolditalic.ttf') format('truetype'),
         url('/fonts/jost-700-bolditalic.otf') format('opentype'),
         url('/fonts/jost-700-bolditalic.svg#jostbolditalic') format('svg');
    font-weight: bold;
    font-style: italic;

}
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

html{font-size:12px;color:#5d5d5d;}
body		{ font-family: jost, helvetica, "sans-serif",  'Noto Sans'; font-weight: normal }
.bold		{ font-weight: bold }
.bolder		{ font-weight: 900 }
.light		{ font-weight: 200 }

h1{font-size:3.5rem;}
h2{font-size:3rem;}
h3{font-size:2.5rem;}
h4{font-size:1.8rem;}
h5{font-size:1.3rem;}
h6{font-size:0.7rem;}
h6{font-size:0.5rem;}
a{cursor:pointer}
div, p {line-height: 1.8rem;    word-break: break-all;}

@media(max-width:767px){
    h4{font-size:1.3rem}
}

input{font-size:100%;}
textarea{resize:none}

.left{text-align: left !important;}
.center{text-align: center !important;}
.right{text-align: right !important;}



.langSw{
    position:absolute;
    right:25px;
    top:5px;
}
.langSw a{
    color:#c8c8c8;
    transition-property: all;
    transition-duration: 0.5s;
}
.langSw a.active{
    color:#5d5d5d;
}

.langCont{
    display:none;
    margin-top: 30px;
    
}
.langCont.active{
    display:block;
}

.bgoverlay{
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,0.7);
    opacity:0;
    z-index: 15;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    transition-property: all;
    transition-duration: 1s;
    cursor:pointer;
}
.bgoverlay.active{
   opacity:1;
}
.Msgbox .wrapper, .ConfirmBox .wrapper{
    display: block;
    position: fixed;
    border:2px solid #f37269;
    background-color: #fff;
    padding: 2rem 6rem;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition-property: all;
    transition-duration: 1s;
}
.MsgBox .inner{
    position:relative;

    
}
.MsgBox p{
    text-align: center;
    
}
.ConfirmBox .contents{
    text-align: center;
    padding:2rem 0;
}
.subscribemodal .wrapper{
     display: block;
    position: fixed;
    border:2px solid #c8c8c8;
    background-color: #fff;
    padding: 2rem 6rem;
    width:400px;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition-property: all;
    transition-duration: 1s;
}
@media (max-width: 479px){
.subscribemodal .wrapper {
    width: 90vw;
    padding:20px;
    }}
.subscribemodal h5 {
    text-align: center;
    margin-bottom:20px;
}
.subscribemodal .inputwrapper{
    width:100%;
    margin: 0 0 10px 0;
}
.subscribemodal label{
    width:20%;
    display:inline-block;
  
}
.subscribemodal input{
    width:80%;
    height:35px;
    line-height:35px;
    border:1px solid #c8c8c8;
    padding:0 1rem;
    
}
.modalbtncontainer{
    width:100%;
    text-align: center;
    margin:10px 0 0;
    
}
.modalbtncontainer button{
    padding:0 1rem;
    height:35px;
    line-height: 35px;
    
}

.contactmodal .wrapper{
     display: block;
    position: fixed;
    border:2px solid #c8c8c8;
    background-color: #fff;
    padding: 2rem 6rem;
    width:600px;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition-property: all;
    transition-duration: 1s;
}

@media (max-width: 479px){
.contactmodal .wrapper {
    width: 90vw;
    padding:20px;
      top:50px;
    transform:translate(-50%,0)

    }}
.contactmodal h5 {
    text-align: center;
    margin-bottom:20px;
}
.contactmodal .inputwrapper{
    width:100%;
    margin: 0 0 10px 0;
}
.contactmodal label{
    width:20%;
    display:inline-block;
    
}
.contactmodal input{
    width:80%;
    height:35px;
    line-height:35px;
    border:1px solid #c8c8c8;
    padding:0 1rem;
    
}

.contactmodal textarea{
    width:100%;
    height:30vh;
    display:block;
    border:1px solid #c8c8c8;
    padding:0 1rem;
    box-sizing: border-box;
}
body.modal{
    overflow:hidden;
}

.displaynone{display:none}

.line{border:1px solid #c8c8c8; width:100%;margin:2rem 0;}


.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    opacity: 1;
    background: #c8c8c8;
    border: 1px solid #c8c8c8;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
    border: 1px solid #c8c8c8;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 20px;
    left: 0;
    width: 100%;
}

@media (max-width:1023px) {
    .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: -5px;
        left: 0;
        width: 100%;
    }

}
@media (max-width:767px) {
    .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: -5px;
        left: 0;
        width: 100%;
    }

}