@charset "UTF-8";

html, body { height:100%; }
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    font-family: 'Noto Sans KR', "맑은 고딕", 'Malgun Gothic',  "나눔고딕", 'Nanum Gothic', Helvetica, Arial, sans-serif;
    line-height: 1.42857143;
    font-weight: 400;
    background-color: #FFF;
}
body * { text-shadow: none; }
* {
  outline:none;
  padding:0;margin:0;
  border:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
h1,h2,h3,h4,h5 { font-weight: normal; }
img { max-width:100%; vertical-align: bottom; border:0; }
a { color: inherit; text-decoration: none; }

.container {
  width:100%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1034px) {
  .container {
    width: 1024px;
  }
}
.row { margin:0 -10px; }


header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 30px 50px;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo { position:relative; }
.logo span {
  position:relative;
  top:-18px;
  left:0px;
  display:inline-block;
  width:auto;
  font-weight:bold;
  letter-spacing:-.1px;
}
.logo img {
    height: 60px; /* 로고 크기 증가 */
}

@media (max-width: 768px) {
   .logo span {
        top:-8px;
    }
}

nav {
  position: relative;
  text-transform: uppercase;
  color: #01aafd;
  text-align: center;
  padding:10px;
}
nav a.slidebar-open-left {
  position: absolute;
  top:-5px;
  right:0px;
}
nav a.slidebar-open-left span {
  display: block;
  width:60px;
  height:7px;
  background-color: #000;
}
nav a.slidebar-open-left span + span {
  margin-top:8px;
}

@media (max-width: 768px) {
  .q-group a { display:block; width:70px; }

  .pc-btn { display:none; }
  .mo-btn { display:block; }
  
  nav a.slidebar-open-left {
    top:-1px;
  }
  nav a.slidebar-open-left span {
    width:30px;
    height:3px;
  }
  nav a.slidebar-open-left span + span {
    margin-top:6px;
  }
}
/* slidebar */
[class*=slidebar-] {
    cursor: pointer;
}
[canvas] {
  z-index: 1;
}
[canvas=container] {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

[canvas=container]:before, [canvas=container]:after {
  clear: both;
  content: '';
  display: table;
}


.slidebar-close-body {
  display: none;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  position: fixed;
  z-index:44;
  background-color: rgba(0,0,0,0.6);
}

[off-canvas] {
  display: none;
  position: fixed;
  overflow: hidden;
  overflow-y: auto;
  background-color: #fff;; /* Basic background color, overwrite this in your own css. */
  color: #01aafd;; /* Basic colors, overwrite this in your own css. */
  -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
  padding:20px;
  z-index:777;
}
[off-canvas] a {
  display:block;
  color:#000;
  font-size:48px;
  font-weight:bold;
  padding:30px 20px;
  border-bottom:1px solid #ddd;
}

[off-canvas*=top] {
  width: 100%;
  top: 0;
  padding:20px;
}

[off-canvas*=right] {
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
}

[off-canvas*=bottom] {
  width: 100%;
  padding:20px;
  bottom: 0;
}

[off-canvas*=left] {
  width: 255px;
  height: 100%;
  top: 0;
  left: 0;
}

[off-canvas*=reveal] {
  z-index: 0;
}

[off-canvas*=push] {
  z-index: 1;
}

[off-canvas*=overlay] {
  z-index: 9999;
}

[off-canvas*=shift] {
  z-index: 0;
}


[canvas], [off-canvas] {
  -webkit-transform: translate( 0px, 0px );
      -ms-transform: translate( 0px, 0px );
          transform: translate( 0px, 0px );
  -webkit-transition: -webkit-transform 300ms;
          transition:         transform 300ms;
  -webkit-backface-visibility: hidden; /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */
}

[off-canvas*=shift][off-canvas*=top] {
  -webkit-transform: translate( 0px, 50% );
          transform: translate( 0px, 50% );
}

[off-canvas*=shift][off-canvas*=right] {
  -webkit-transform: translate( -50%, 0px );
          transform: translate( -50%, 0px );
}

[off-canvas*=shift][off-canvas*=bottom] {
  -webkit-transform: translate( 0px, -50% );
          transform: translate( 0px, -50% );
}

[off-canvas*=shift][off-canvas*=left] {
  -webkit-transform: translate( 50%, 0px );
          transform: translate( 50%, 0px );
}

/**
 * Print
 */

@media print {
  [canvas] {
    -webkit-transform: translate( 0px, 0px ) !important;
        -ms-transform: translate( 0px, 0px ) !important;
            transform: translate( 0px, 0px ) !important;
  }

  [off-canvas] {
    display: none !important;
  }
}


.header { background-color: #fdfdfd;}
.cont1 { background-color:#141318; }
.cont2 { background-color:#ea720d; }
.cont3 { background-color:#0a0f15; }
.cont6 { background-color:#fcf1e7; }
.cont8 { background-color:#0c0d11; }
.cont9 { background-color:#ff831a; }
.cont10 { background-color:#f7efe8; }
.cont11 { background-color:#ff7116; padding-bottom:50px; }
.cont12 { background-color:#0c0d11; }
.cont13 { background-color:#f4f4f4; }
.cont15 { background-color:#1b1b1b; text-align:center; }

main { padding-top:120px; }
section { position: relative; }
.header .plate {
  position: absolute;
  width:100%;
  text-align: center;
  left:0;
  bottom:200px;
}

:root { --swiper-navigation-size : 90px; --swiper-theme-color: #000; }
.swiper { padding-bottom:100px; }
.swiper-slide { text-align:center; }
.swiper-pagination-bullet { width:30px; height:30px; background:#fff; }



.fix-btn {
  position: fixed;
  right:0px;
  bottom:30px;
}
.fix-btn a { display:inline-block; }
.fix-btn img { max-width:90% }

footer { 
  position: relative;
  top:-1px;
  color:#fff; background-color:#1b1b1b; font-size:36px; font-weight:bold; 
}
footer  .copy { padding:0 40px; }