@charset "utf-8";

/* 구글폰트 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&display=swap');

/* reset*/
html,body{height: 100%;}
body{font-family: 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif; font-size: 16px; color: #000; letter-spacing: -0.6px; line-height: 1; font-weight: 300;}

body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,table,tr,th,td{margin: 0; padding: 0;}
ul,ol,li{list-style: none;}
img{ border: none; vertical-align: top;}
fieldset{ border: none;}
option{padding:3px 10px;}
select{padding:5px; height:40px; border:1px solid #e1e1e1; background:#fff;}
a{text-decoration: none; color: #555;}

/*본문 바로가기*/
.goCon{position:fixed; top:-50px; left:0; z-index:1; text-align:center; box-sizing:border-box; padding:15px 0; width:100%; height:50px; color:#fff; line-height:1; background:#272727;}
.goCon:focus{top:0;}

/* 데스크탑 : 1200px 이상 */
    #wrapper {position:relative; width:100%; overflow:hidden;}

    .mainCon1 {padding-top: 20px;}
    .mainCon1 .inner{ width: 1200px; margin: 0 auto; padding-top: 30px; padding-bottom: 31px; padding-left: 40px; box-sizing: border-box;
                        position: relative; background-color: #fae100;}
    .mainCon1 .inner .btnSummit{display: block; width: 200px; height:40px; border-radius: 4px; font-size:13px; color: #fff; background-color: #3a1d1f;font-size: 15px; text-align: center; line-height: 40px; border: 0; padding: 0; margin-top: 30px; }
    .mainCon1 .inner img{position: absolute; right: 100px; top: 30px;}
    .mainCon1 .mainTit , .mainCon1 .mainTxt {z-index:1; padding-top: 10px;}
    .mainTit.kakao{font-size: 24px; font-weight: 500; line-height: 30px;  display: inline-block; padding-right: 40px; background: url(../images/kakao.jpg) no-repeat right top;  font-weight: 500; color: #3a1d1f;}
    .mainTxt {font-weight: 300; line-height: 24px; font-size: 16px;}

    .mainCon2{padding-top: 20px;}
    .mainCon2 .inner{width: 1200px; margin: 0 auto; border: 1px solid #e1e1e1; padding-top: 20px; padding-bottom: 40px; position: relative; background-color: #f1f2f7}
    .mainCon2 .inner:after{content: ""; background: url(../images/img_apply2.png) no-repeat; width: 188px; height: 157px; position: absolute; top: 43px; left: 60px;}
    .mainCon2 .mainTit{font-size: 24px; font-weight: 400; line-height: 30px; margin-top: 20px; margin-bottom: 40px; text-align: center;}
    .mainCon2 .mainTit span{font-weight: 400;}
    .mainCon2 .btnBox{ width: 380px; margin: 0 auto;}
    .mainCon2 .btnBox:after{content: ""; display: block; clear: both;}
    .mainCon2 .btnBox .btnApply{display: inline-block; width: 180px; height: 50px; box-sizing: border-box; background-color: #05548f; text-align: center;}
    .mainCon2 .btnBox .btnApply span{ display: block; width: auto; /*min-width: 160px; min-height: 44px;*/ color: #fff; font-weight: 300; text-align: center; line-height: 50px; background:                                         url(../images/ico_go_direction.png) no-repeat right 13px center;}
     .mainCon2 .btnBox .btnApply.btn1{float: left;}
    .mainCon2 .btnBox .btnApply.btn2{float: left; margin-left: 20px;}

/* swiper.css */
    .mainVisArea {position:relative; width:1200px; overflow:hidden;}
    .mainVisArea .swiper-wrapper .swiper-slide {position:relative; /*display:block;  width:100%; height:100%;*/}
    .mainVisArea .swiper-wrapper .swiper-slide img {width:100%}
    .mainVisArea .swiper-button-prev {left:40px; width:70px; height:70px; background:url(../images/imgRoll_prev.png) no-repeat 50% 50%;}
    .mainVisArea .swiper-button-prev:hover {background:url(../images/imgRoll_prev_on.png) no-repeat 50% 50%;}
    .mainVisArea .swiper-button-next {right:40px; width:70px; height:70px; background:url(../images/imgRoll_next.png) no-repeat 50% 50%;}
    .mainVisArea .swiper-button-next:hover {background:url(../images/imgRoll_next_on.png) no-repeat 50% 50%;}
    .mainVisArea .swiper-pagination {display:inline-block; padding:15px 65px 15px 31px;  width:auto; height:11px; left:50%; bottom:50px; background:rgba(0,0,0,0.5); overflow:hidden; border-radius:20.5px; -ms-transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); -o-transform:translate(-50%, 0); transform:translate(-50%, 0);}
    .mainVisArea .swiper-pagination .swiper-pagination-bullet {vertical-align:top; width:11px; height:11px; margin:0 0 0 10px; background:url(../images/imgRoll_indi.png) no-repeat 50% 50%;}
    .mainVisArea .swiper-pagination .swiper-pagination-bullet:first-child {margin:0;}
    .mainVisArea .swiper-pagination .swiper-pagination-bullet-active {background:url(../images/imgRoll_indi_on.png) no-repeat 50% 50%;}
    .mainVisArea .swiper-pagination .playBtn {display:block; width:41px; height:41px; position:absolute; top:0; right:0; background:rgba(0,0,0,0.2) url(../images/play_bt.png) no-repeat 50% 50%; border-radius:20.5px;}
    .mainVisArea .swiper-pagination .playBtn.on {background:rgba(0,0,0,0.2) url(../images/play_bt_on.png) no-repeat 50% 50%;}

/* Netbook, Tablet : 1001px부터 최대 1200px까지 */
@media (max-width:1200px) {

    .mainCon1 .inner{width: 950px; padding-top: 30px; padding-bottom: 30px; margin-bottom: 0px;}
    .mainCon1 .inner img{ display: none;}

    .mainCon2 .inner{ width: 950px;}
    .mainCon2 .mainCon2List li {width: 302px;}
    .mainCon2 .inner:after{background-size: 80%; position: absolute; top: 73px; left: 60px;}

    .mainVisArea{width:100%}

}

/* Tablet : 759px부터 최대 1000px까지 */
@media (max-width:1000px) {


    .mainCon1 .inner{ width: auto;}
    .mainTit {font-size:30px; line-height: 35px;}
    
    .mainCon2 .inner{ width: auto;}
  
    .mainVisArea .swiper-button-next {right:3%; width:35px; height:35px; background-size:35px;}
    .mainVisArea .swiper-button-next:hover {background-size:35px;}
    .mainVisArea .swiper-button-prev {left:3%; width:35px; height:35px; background-size:35px;}
    .mainVisArea .swiper-button-prev:hover {background-size:35px;}
    .mainVisArea .swiper-pagination {bottom:20px; padding:10px 20px;}
    .mainVisArea .swiper-pagination .playBtn {display:none;}
}

/* Mobile : 0부터 최대 758px까지 */
@media (max-width:758px) {

    .mainCon1 {padding: 10px 10px; box-sizing: border-box;}
    .mainTit{font-size:18px; line-height: 25px;}
    .mainTit br{display:block;}
    .mainTxt{line-height: 22px;}
    .mainCon1 .inner .btnSummit{height: 35px; line-height: 35px;}
     
    .mainCon1 .inner{padding-top: 30px; padding-left: 20px; padding-bottom: 30px;  padding-right: 20px; margin-top: 0px;}
    .mainCon1 .inner a img{ position: absolute; left: 20px; top: 130px;}
    
    .mainCon2 {padding:0px 10px;}
    .mainCon2 .inner{padding-bottom: 30px;}
    .mainCon2 .mainTit{font-size: 18px; font-weight: 400; line-height:25px; margin-top: 0px; margin-bottom: 0px;text-align: center; letter-spacing: 0.6;padding:20px 20px;}
    .mainCon2 .btnBox{width: 100%}  
    .mainCon2 .btnBox .btnApply{display: block; width:100%; height:35px; box-sizing: border-box; background-color: #05548f; text-align: center;}
    .mainCon2 .btnBox .btnApply.btn2{ margin-left: 0px; margin-top: 20px;}
    .mainCon2 .btnBox .btnApply span{font-weight: 300; text-align: center; line-height: 35px;}
    .mainCon2 .inner:after{display: none;}
    
    .mainVisArea .swiper-button-prev, .mainVisArea .swiper-button-next{display:none;}
 
}
