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

/* reset */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { font:12px/1.6 'nanumgothic'; color:#111; background:#888;}

header {position: fixed; width:15%; height:100%; background: #fff; top: 0; left: 0; z-index:5;
        border-right:2px solid #00defa; overflow: hidden;}
header h1 {width:230px; height:100px; background:url(../img/logo.jpg) no-repeat 0px 0px;
        background-size:contain; margin:0 auto; position: absolute; top:100px; z-index: 10;}
header h1 a {width: 100%; height: 100%; display: block;}
header div p {position: absolute; top: 30%; left:5%; display: none;}
header div p:nth-child(1) {left: 5%; z-index: 5;}
header div p:nth-child(2) {right:5%; text-align: right;}
header div p i {font-size:5vw; color:#00defa; opacity:1; transition:all 0.5s;  cursor: pointer;}
header div p i:hover {opacity: 0.5;}

#gnb {position: absolute; top:250px; width: 100%; text-align: right; padding:0 15%;
      box-sizing: border-box; transition:all 0.5s;}
#gnb li {margin-bottom: 30px;}
#gnb li a {color:#00beda; font-weight: bold; font-size: 20px; transition:all 0.5s;}
#gnb li a:hover {color:white; background: #00defa; padding:10px 20px; border-radius:20px;}

#sns {position: absolute; bottom:100px; width: 100%; text-align: center;}
#sns li {display: inline;}
#sns li a i {color:#00beda; font-size: 23px; margin:0 7%; transition:all 0.5s; opacity: 0.5;}
#sns li a i:hover {transform:scale(1.5); opacity: 1;}

#sub {float: right; width:30%;}
#sub li {float: right; margin-right: 30px;}
#sub li a {color:#fff; line-height:2.5; font-size: 14px; transition:all 0.5s;}

nav div {float: left; width:30%; height: 27px; margin:4px 0 0 17%; padding:3px;
        box-sizing: border-box;}
nav div input { position: relative;border:none; font-size: 20px; top:0; width: 100%; color:#888;
              float: left; background: #fff; width: 90%;}
nav div p {float: left; margin-left: 10px;}
nav div p i {color:#fff; font-size: 23px;}

nav {position: fixed; width:100%; height:35px; z-index:4; background:#00beda;}

section {width:85%; position:absolute; right: 0; top: 0; padding:35px 2% 0 2%; box-sizing: border-box; }
article {height: 350px; float: left; margin-bottom:2%; background: #fff;
        box-shadow:3px 3px 3px 0 rgba(0,0,0,0.3); overflow: hidden;
      position: relative;}

/*---article 1---*/
article:nth-child(1) {width: 70%; height: 400px; margin-top: 2%; overflow: hidden;
                      position: relative;}
#conwrap {width: 200%; position: relative; transition:all 1s;}
#con1 {width: 50%; height: 400px; background:url(../img/mi1.png) no-repeat center center;
      background-size:cover; float: left; position: relative;}
#con2 {width: 50%; height: 400px; background:url(../img/mi2.png) no-repeat center center;
      background-size:cover; float: right;position: relative;}
.txt1 {position: absolute; width: 100%; height: 100px; bottom:0; background:rgba(0,0,0,0.5);
      color:#fff; padding:10px 2%; box-sizing: border-box; font-size: 15px;}
article:nth-child(1)>p {position: absolute; transition:all 0.3s; opacity:0.5;}
      .btnl {left:0; top:50%; margin:-25px 0 0 1%;}
      .btnr {right:0; top:50%;  margin:-25px 1% 0 0;}
article:nth-child(1)>p:hover {opacity:0.3;}

/*---article 2---*/
article:nth-child(2) {width: 28%; height: 750px; float: right;margin-top: 2%; padding-bottom:2%;}
article:nth-child(2) h1 {font-size: 20px; padding:10px 20px; border-bottom:1px solid #888;}
article:nth-child(2) h1 a {font-size: 12px; float: right; line-height:3.5; font-weight: normal;}
article:nth-child(2) ul {text-align: left; padding:20px;}
article:nth-child(2) ul li {position: relative; margin-bottom:7px;}
article:nth-child(2) ul li img {float:left; cursor:pointer;}
article:nth-child(2) ul li p {font-size: 15px; position: absolute; left:150px; bottom: 10px;}
article:nth-child(2) ul li b {cursor:pointer;}
article:nth-child(2) ul li:after {content:""; clear: both; display: block;}

/*---article 3---*/
article:nth-child(3) {width:33%; margin-right: 2%; text-align: center;}
article:nth-child(3) div {background:url(../img/a3bg.png) no-repeat center center; transition:all 0.5s;
                          background-size:cover; width: 100%; height: 100%; transform:scale(1.0);
                        position:absolute;}
article:nth-child(3) p {position: relative; z-index:5; margin:0 auto; top:40%; font-size: 20px; color: #fff;}
article:nth-child(3):hover div {transform:scale(1.1);}

/*---article 4---*/
article:nth-child(4) {width:35%; background:url(../img/pic3.png) no-repeat center center; background-size:cover;}

/*---article 5---*/
article:nth-child(5) {width: 40%; margin-right: 2%; background:url(../img/a5bg.png) no-repeat center center; background-size:cover;}

/*---article 6---*/
article:nth-child(6) {width: 58%; background:url(../img/a6bg.png) no-repeat center center; background-size:cover;}

/*---mobile---*/
ul.mobile {display: none;  margin-top: 20vw;}
ul.mobile li {border:2px solid #00beda; margin: 20px 20vw; text-align: center; transition:all 0.5s;
            padding:10px 0; box-sizing: border-box; border-radius:10px; cursor: pointer;}
ul.mobile li a {font-size: 5vw; color: #fff;}
ul.mobile li:hover {background: #00beda;}

@media (min-width:1279px) and (max-width:1366px) {

  header {width: 100%; position: relative; height: 100px; top: 35px; border-bottom:2px solid #00defa;}
  header h1 {height:80px; top:10px;}
  nav {position: absolute; top:0}
  #gnb {width:80%; top:40px; left: 40%;}
  #gnb li {margin-right: 50px; float: left;}
  section {width: 100%; position: relative;}
  nav {z-index: 5;}
  nav div {position: absolute; top: 75px; left: 250px; margin: 0;}
  nav div input { border: 2px solid #00beda; width: 90%;}
  nav div p i {color: #00beda; margin-top: 2px;}

}


@media (min-width:1024px) and (max-width:1280px) {

  header {width: 100%; position: relative; height: 100px; top: 35px; border-bottom:2px solid #00defa;}
  header h1 {height:80px; top:10px;}
  nav {position: absolute; top:0}
  #gnb {width:90%; top:40px; left: 40%;}
  #gnb li {margin-right: 40px; float: left;}
  #sub {width:100%;}
  section {width: 100%; position: relative;}
  nav {z-index: 5;}
  nav div {position:absolute;; top: 75px; left: 250px; margin: 0;}
  nav div input { border: 2px solid #00beda; width: 85%;}
  nav div p i {color: #00beda; margin-top: 2px;}

  article:nth-child(1) {width: 100%;}
  article:nth-child(2) {width: 100%; display: none;}
  article:nth-child(3) {width: 48%;}
  article:nth-child(4) {width: 50%;}


}

@media (max-width:1023px) {
  ::selection {background:rgba(0,0,0,0);}

  header {width: 100vw; position: relative; height: 10vw;border: none; border-bottom:2px solid #00defa;
        background: #fff;}
  header h1 {position: absolute; width:20%; left: 50%; margin-left: -10%; top: 10%;}
  header div p {display: block;}
  nav {display: none;}
  ul.mobile {display: block;}
  #gnb {display: none;}

  section {width: 100%; height: 100%;  background: url(../img/mbg.jpg) no-repeat center center;
          background-size: cover; margin: 0;padding: 0;}
  section article {display: none;}
  article:nth-child(1) {width: 100%;margin: 0;}
  article:nth-child(2) {width: 100%; display: none;}
  article:nth-child(3) {width: 48%;}
  article:nth-child(4) {width: 50%;}

}