@charset "utf-8";

/*************************************header*************
프로그램 ID : teaser.css
프로그램 명 : Base Cascading Style Sheets
작  성   자 : 
최초 작성일 : 2018/04/09
최종 작성일 : 
참고   사항 : 
**************************************************/

@font-face {font-family:"NanumSquare"; src:url(../font/NanumSquareL.eot); src:url(../font/NanumSquareL.eot#iefix) format('embedded-opentype'), url(../font/NanumSquareL.woff) format('woff'), url(../font/NanumSquareL.ttf) format('truetype'); font-weight:300; font-style:normal;}
@font-face {font-family:"NanumSquare"; src:url(../font/NanumSquareR.eot); src:url(../font/NanumSquareR.eot#iefix) format('embedded-opentype'), url(../font/NanumSquareR.woff) format('woff'), url(../font/NanumSquareR.ttf) format('truetype'); font-weight:400; font-style:normal;}
@font-face {font-family:"NanumSquare"; src:url(../font/NanumSquareB.eot); src:url(../font/NanumSquareB.eot#iefix) format('embedded-opentype'), url(../font/NanumSquareB.woff) format('woff'), url(../font/NanumSquareB.ttf) format('truetype'); font-weight:700; font-style:normal;}
@font-face {font-family:"NanumSquare"; src:url(../font/NanumSquareEB.eot); src:url(../font/NanumSquareEB.eot#iefix) format('embedded-opentype'), url(../font/NanumSquareEB.woff) format('woff'), url(../font/NanumSquareEB.ttf) format('truetype'); font-weight:800; font-style:normal;}


* {margin:0; padding:0; border:0 none transparent; box-sizing:border-box;}
:before, :after {box-sizing:border-box;}
html, body, pre {font-family:"NanumSquare", sans-serif; font-size:15px; font-weight:400; line-height:24px; color:#666; letter-spacing:-0.03em; background-color:#333;}
form, fieldset, p, figure {word-break:break-all; word-wrap:break-word;}
figure img {vertical-align:top;}
a {text-decoration:none; cursor:pointer; transition:color 0.1s linear 0s, background-color 0.1s linear 0s, opacity 0.1s linear 0s !important;}
address, em, i {font-style:normal;}

#wrapper {position:relative; height:100vh;}
#head {position:absolute; top:0px; width:100%; height:95px; background:rgba(255,255,255,0.90); border-bottom:2px solid #2d47a8;  text-align:center; z-index:2;}
.header {position:relative; max-width:1200px; min-width:730px; margin:auto; text-align:left; display:block; }
.header nav {position:absolute; top:35px; right:0px; text-align:right; display:block;}
.header nav li {display:inline-block; padding-left:45px;}
.header nav li a {font-weight:800; font-size:18px; color:#2d47a8;}
.header nav li a:hover {color:#000;}

#container {width:1200px; margin:0 auto; padding:340px 0 182px 0; color:#fff; text-align:center;} 
#container h2 {font-size:66px; font-weight:300; line-height:80px;}
#container h2 em {font-weight:800; letter-spacing:0.28em; display:block;}
#container p {margin-top:53px; font-size:18px;}
#container p:before, #container p:after {width:400px; height:1px; margin-top:13px; background:rgba(255,255,255,0.5); display:block; content:"";}
#container p:before {float:left;}
#container p:after {float:right;}
#container a {clear:both; width:267px; margin:40px auto 0 auto; vvfont-size:16px; font-weight:700; color:#fff; line-height:48px; border:1px solid #fff; display:block;}
#foot {position:absolute; bottom:0; width:100%; background:#333; color:rgba(200,200,200,1.00); font-weight:500; font-size:14px; text-align:center; padding:10px 0; z-index:1;}


.swiper-container {width: 100%;height:100vh; position:relative;}
    .swiper-slide {
      position: relative;
      text-align: center;
      font-size: 18px;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      background-size:cover;
      background-position: center;
    }
.swiper-pagination {position:absolute!important; bottom:7%!important;}
    .swiper-pagination-bullet {
      width: 85px;
      height: 15px;
      text-align: center;
      line-height: 20px;
      font-size: 0px;
      text-indent: -10000px;
      border-radius: 0px;
      color:#000;
      opacity: 1;
      margin:0 2px!important;
      background: rgba(138,138,138,0.90);
        bottom:10%;
    }
    .swiper-pagination-bullet-active {
      color:#fff;
      background: #2d47a8;
    }

.img01 {background-image: url(../../assets/images/bg/visual_01.jpg);}
.img02 {background-image: url(../../assets/images/bg/visual_02.jpg);}
.img03 {background-image: url(../../assets/images/bg/visual_03.jpg);}
.img04 {background-image: url(../../assets/images/bg/visual_04.jpg);}
.img05 {background-image: url(../../assets/images/bg/visual_05.jpg);}
.img06 {background-image: url(../../assets/images/bg/visual_06.jpg);}
.img07 {background-image: url(../../assets/images/bg/visual_07.jpg);}
.txtBox {position:absolute; left:50%; bottom:17%; width:700px; margin-left:-350px; line-height: 30px; text-align:center; }
.txtBox a {color:#fff;}
.txtBox span {font-size:40px; font-weight:500; padding:25px 0; display: block;}
.txtBox h3 {font-size:60px; font-weight: 100;  padding:0px 0 10px 0; display: block;}
.txtBox h3 strong {font-weight:900;}
.txtBox p {font-size:20px;   padding:10px 0 20px 0; display: block;}
.txtBox mark { background-color:rgba(255,255,255,0.83); padding:10px 50px; font-weight: 900;}
.curtain {background-image:url(../../assets/images/bg/bg_curtain.png); background-repeat: repeat-x; background-position: bottom center; position:absolute; left:0px; top:0px; width:100%;  height:100%; color:#fff; text-align:center;}
.material-menu-wrapper {display:block;}

@media only screen and (max-width:720px) {
    #head { background:rgba(255,255,255,0.00); border-bottom:0px solid #2d47a8;z-index:9;}
    #head h1 {width:150px; height:150px; padding-left:30px;}
    #head h1 img {width:100%;}
    .header {min-width:100%;}
    .img01 {background-image: url(../../assets/images/bg/mobile/m_visual_01.jpg);}
    .img02 {background-image: url(../../assets/images/bg/mobile/m_visual_02.jpg);}
    .img03 {background-image: url(../../assets/images/bg/mobile/m_visual_03.jpg);}
    .img04 {background-image: url(../../assets/images/bg/mobile/m_visual_04.jpg);}
    .img05 {background-image: url(../../assets/images/bg/mobile/m_visual_05.jpg);}
    .img06 {background-image: url(../../assets/images/bg/mobile/m_visual_06.jpg);}
    .img07 {background-image: url(../../assets/images/bg/mobile/m_visual_07.jpg);}
    .swiper-pagination-bullet {width: 12%;height: 15px;}    
    .txtBox {width:360px; margin-left:-180px;}
    .txtBox span {font-size:20px; padding:0px 0;}
    .txtBox h3 {font-size:30px; padding:0px 0 5px 0;}
    .txtBox p {font-size:14px; padding:0px 20px 20px 20px; width:90%; margin:auto; line-height: 18px;}
    .txtBox mark { background-color:rgba(255,255,255,0.83); padding:10px 50px; font-weight: 900;}
    .header nav li {display:block; padding:10px;}
      .material-menu-button {position:absolute;top:20px;right:30px;z-index:10;display:block;width:50px;height:45px;padding:12px 10px 0px 10px;background-color:rgba(0,0,0,0.20);}
      .material-menu-button span {display:block;width:100%;height:3px;margin-bottom:6px;background-color:#fff;}
      .material-menu-wrapper {padding:20px;}
      .material-menu-view-mobile {background-color:#fff;-webkit-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);}
      .material-menu-titlebar {-webkit-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);}
      .material-menu-titlebar .material-menu-button {position:static;}
}