@font-face {

    font-family: 'RixYeoljeongdo_Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/RixYeoljeongdo_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'GmarketSans';
    src:url('../font/GmarketSansLight.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('../font/GmarketSansMedium.woff2') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('../font/GmarketSansBold.woff2') format('woff2');
    font-weight: 700;
}

.img_1920 { display: block; }
.img_1280, .img_768, .img_480, .img_320 { display: none; }
@media screen and (max-width: 1280px) {
	.img_1280 { display: block; }
	.img_1920, .img_768, .img_480, .img_320 { display: none; }
}
@media screen and (max-width: 768px) {
	.img_768 { display: block; }
	.img_1920, .img_1280, .img_480, .img_320 { display: none; }
}
@media screen and (max-width: 480px) {
	.img_480 { display: block; }
	.img_1920, .img_1280, .img_768, .img_320 { display: none; }
}
@media screen and (max-width: 320px) {
	.img_320 { display: block; }
}

/* CSS 롤오버이미지 */
a.roll img {display:inline; border:0}
a.roll img.over {display:none;}
a.roll:hover {border:0px;}
a.roll:hover img {display:none;}
a.roll:hover img.over {display:inline}

a.roll_01 img { position:absolute; opacity:1 }
a.roll_01 img.over { position:absolute; opacity:0 }
a.roll_01:hover { }
a.roll_01:hover img { opacity:1 }
a.roll_01:hover img.over { opacity:1; transition:all 0.3s ease-in; }

/* ====================
   header
==================== */

html { width: 100%; min-width: 280px; overflow-x: hidden; overflow-y:scroll }
body { width: 100%; max-width: 1920px; margin:0 auto; padding:0; 
  font-family:'Noto Sans KR', 'Roboto', dotum, sans-serif; background:#FFF; 
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: auto;
  word-break:keep-all;
}
.headerWrap { position: fixed; width: 100%; height: 100px; z-index: 1000; transition: all 0.3s ease; }
.headerWrap .headerBg { position: absolute; width: 100%; height: 100%; top:0; left: 0; opacity: 1; }
.headerWrap .header { position: relative; width: 100%; height: 100%; margin: 0 auto;  box-sizing: border-box; z-index: 1;}
.headerWrap .header .logodiv { position: absolute; width: 216px; height: 100%; top:0; left: 100px; z-index: 1; display: flex; justify-content: center; align-items: center; }
.headerWrap .header .logodiv a  { display: flex; justify-content: center; align-items: center; }
.headerWrap .header .logodiv a img { width: 216px; height: auto; }
.headerWrap .header .logodiv a img.white { display: none; }
.headerWrap .header .logodiv a img.black { display: block; }
.headerWrap.on .header .logodiv a img.white { display: block; }
.headerWrap.on .header .logodiv a img.black { display: none; }
.headerWrap .header .nav { position: absolute; width: 840px; height: 100%; top:0; left: 50%; transform: translateX(-50%); z-index: 1; font-weight: 500;}
.headerWrap .header .nav > ul { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; height: 100%; }
.headerWrap .header .nav > ul > li { font-size: 18px; letter-spacing: -1px; margin: 0 30px; text-align: center;}
.headerWrap .header .nav > ul > li a { color: #000; }
.headerWrap.on .header .nav > ul > li a { color: #FFF;  }

.headerWrap .header .nav > ul > li a.nav_boxbtn { display: block; width: 150px; height: 46px; background-color: #f82064; color: #FFF;
  border-radius: 4px;
  display: flex; justify-content: center; align-items: center; }
.headerWrap .header .telDiv { position: absolute; right: 100px; text-align: right; color:000; font-size: 36px; font-family:'Roboto', dotum, sans-serif; font-weight: 900; width: 230px; height: 100px; line-height: 100px; }
.headerWrap.on .header .telDiv { position: absolute; right: 100px; text-align: right; color: #95d5ff; font-size: 36px; font-family:'Roboto', dotum, sans-serif; font-weight: 900; width: 230px; height: 100px; line-height: 100px; }

.headerWrap.on { top: -100px; background-color: #000; opacity: 0.8; transition: all 0.3s ease; }
.headerWrap.nav-down { top: 0px; transition: all 0.3s ease; }


@media screen and (max-width: 1540px) {
  .headerWrap .header .nav { width: 720px}
  .headerWrap .header .nav > ul > li { margin: 0 20px; }
  .headerWrap .header .nav > ul > li a.nav_boxbtn { width: 130px; height: 46px; }
}

@media screen and (max-width: 1444px) {
  .headerWrap .header .nav { width: 590px}
  .headerWrap .header .nav > ul > li { margin: 0 10px; }
  .headerWrap .header .nav > ul > li a.nav_boxbtn { width: 100px; height: 46px; }
}

@media screen and (max-width: 1280px) {
  .headerWrap .header .logodiv { left: 60px; width: 180px;}
  .headerWrap .header .logodiv a img { width: 180px; height: auto; }

  .headerWrap .header .nav > ul > li { font-size: 16px; letter-spacing: -0.9px; }
  .headerWrap .header .telDiv { font-size: 30px; width: 180px; right: 60px;  }

}

@media screen and (max-width: 1064px) {
  .headerWrap .header .logodiv { left: 60px; width: 140px; }
  .headerWrap .header .logodiv a img { width: 140px; height: auto; }
  .headerWrap .header .telDiv { font-size: 24px; width: 140px; right: 60px; }
}

@media screen and (max-width: 990px) {
  .headerWrap .header .logodiv, .headerWrap .header .telDiv { display: none; }
  .headerWrap .header .nav { width: calc(100% - 120px) }
  .headerWrap .header .nav > ul > li { margin: 0 20px; }
  .headerWrap .header .nav > ul > li a.nav_boxbtn { width: 100px; height: 46px; }
}

@media screen and (max-width: 768px) {
  /* .headerWrap { height: 80px; } */
  /* .headerWrap.on { top: -80px; } */
  .headerWrap .header .nav { width: calc(100% - 60px) }
  .headerWrap .header .nav > ul > li { margin: 0 10px; font-size: 14px; }
  .headerWrap .header .nav > ul > li a.nav_boxbtn { display: none; }
  .headerWrap .header .nav > ul > li:last-child { display: none; }
}
@media screen and (max-width: 480px) {
  .headerWrap .header .nav { width: calc(100% - 10px) }
  .headerWrap .header .nav > ul > li { margin: 0 6px; font-size: 14px; }
}
@media screen and (max-width: 320px) {

}


.container { width: 1200px; margin: 0 auto; padding: 100px 0; box-sizing: border-box; }
.containerBox { width: 100%; }

@media screen and (max-width: 1280px) {
  .container { width: 100%; padding: 80px 40px; }
}
@media screen and (max-width: 768px) {
  .container { padding: 60px 20px; }
}
@media screen and (max-width: 480px) {
  .container { padding: 40px 10px; }
}
@media screen and (max-width: 320px) {
}