@charset "utf-8";

/* --------------------------------------------
 * HanbitSoft Service Development Team
 * 디에고의 스페셜 선물상자 Stylesheet
 * Author - sgp8116@hanbitsoft.co.kr  20221110
----------------------------------------------- */


/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, select, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption{margin:0;padding:0;font-size:100%}
img, fieldset, button{border:0}
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body, input, button, textarea, select, table, kbd{line-height:1.2;font-family:'맑은 고딕', Malgun Gothic, dotum, Helvetica, sans-serif;font-size:12px;color:#000}
img{vertical-align:middle}
ol, ul{list-style:none}
a{text-decoration:none;color:#000}
a:hover, a:focus, a:active{text-decoration:underline;color:#0000ff}
button, label{cursor:pointer}
button:focus {outline:0}
button::-moz-focus-inner, input::-moz-focus-inner{padding:0;border:0}
table{border-collapse:collapse;border-spacing:0}
caption, legend{width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;visibility:hidden}

/* Reserved Class
-------------------------------------------------------------- */
.irPm{display:block;font-size:0;line-height:0;text-indent:-9999px}
.irWa{display:block;overflow:hidden;position:relative;width:100%;height:100%;z-index:-1}
.blind{position:absolute !important;clip:rect(0,0,0,0);clip-path:polygon(0 0,0 0,0 0);width:1px;height:1px;margin:-1px;overflow:hidden;white-space:nowrap;}
.show{display:block}
.hide{display:none}
.fL{float:left}
.fR{float:right}
.clearFix{zoom:1}
.clearFix:after{clear:both;display:block;content:''}

/* Styles
-------------------------------------------------------------- */
body {background:#232093;font-family: '맑은 고딕', Malgun Gothic, dotum, Helvetica, sans-serif;}
#wrap {position:relative;width:100%;min-width:1200px;max-width:2000px;margin:0 auto;}
.inner {position:relative;width:1200px;margin: 0 auto;}
.btnHome {position:absolute;z-index:100;top:38px;right:50px;width:120px;height:50px;}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: url(../images/bg-header.jpg) no-repeat 50% 0;
  width: 100%;
  height: 818px;
}

.main {
  position: relative;
  margin-top: -392px;
}

.section {
  position: relative;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.section .inner {
  position: relative;
  height: 100%;
}
.section .section-content {
  background-repeat: no-repeat;
  background-position: 50% 0;
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.45s;
}
.section .section-content.active {
  opacity: 1;
}

.section-01 {
  background-image: url(../images/bg-section-01.png);
  height: 1207px;
}
.section-01 .section-content {
  background-image: url(../images/img-content-01.png);
  top: 58px;
  left: -178px;
  width: 1335px;
  height: 1149px;
}

.section-02 {
  background-image: url(../images/bg-section-02.jpg);
  height: 486px;
  z-index: 1;
}
.section-02 .section-content {
  background-image: url(../images/img-content-02.png);
  top: 69px;
  height: 417px;
}

.section-03 {
  background-image: url(../images/bg-section-03.jpg);
  height: 697px;
}
.section-03 .section-content {
  background-image: url(../images/img-content-03.png);
  top: 72px;
  height: 625px;
}
.link {
  position: absolute;
  top: 579px;
  left: 301px;
  width: 598px;
  height: 75px;
  z-index: 1;
}

.section-04 {
  background-image: url(../images/bg-section-04.jpg);
  height: 1161px;
  overflow: hidden;
}
.section-04 .section-content {
  background-image: url(../images/img-content-03.png);
  top: 74px;
  height: 625px;
}
.notice {
  background: url(../images/bg-notice.png) 50% 0;
  position: absolute;
  bottom: 30px;
  width: 100%;
  height: 1045px;
}
.copyright {
  background: url(../images/copyright.jpg) 50% 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}

.button-open-popup {
  background: 0;
  position: absolute;
  top: 634px;
  left: 477px;
  width: 598px;
  height: 75px;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.popup .popup-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/popup01.png) no-repeat 0 0;
  width: 863px;
  height: 688px;
}
.popup .button-close-popup {
  position: absolute;
  top: 0;
  right: 0;
  background: 0;
  width: 49px;
  height: 49px;
}
.popup .popup-content {
  margin: 100px 122px 30px 60px;
  height: 525px;
  box-sizing: border-box;
  overflow-y: auto;
}
.popup .popup-content h2,
.popup .popup-content h3 {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #3a3637;
  text-align: center;
  margin-bottom: 15px;
}
.popup .popup-content h2 {
  margin-top: 10px;
}
.popup .popup-content table {
  width: 100%;
  border: 2px solid #b0b0b0;
  margin-bottom: 15px;
}
.popup .popup-content table thead th {
  border-left: 2px solid #c8c8c8;
  background-color: #bbbaba;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #3a3637;
  height: 42px;
}
.popup .popup-content table tbody th {
  border: 2px solid #c8c8c8;
  border-left: 0;
  background-color: #e3e3e3;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #3a3637;
  height: 38px;
}
.popup .popup-content table tbody td {
  border: 2px solid #c8c8c8;
  background-color: #e3e3e3;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #3a3637;
  height: 38px;
  text-align: center;
}
.popup .popup-content table thead th:first-child {
  border-left: 0;
}
.popup .popup-content table tbody tr:first-child th,
.popup .popup-content table tbody tr:first-child td {
  border-top: 0;
}
.popup .popup-content table tbody tr:last-child th,
.popup .popup-content table tbody tr:last-child td {
  border-bottom: 0;
}
.popup .popup-content table tbody td:last-child {
  border-right: 0;
}

.ly {
  position: absolute;
  top: 361px;
  left: 304px;
}
.ly .popup-button {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.ly .popup-content {
  display: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  position: absolute;
  top: 27px;
  left: -219px;
}
.popup-02 .popup-content {
  background-image: url(../images/popup02.png);
  left: -291px;
  width: 608px;
  height: 71px;
}
.popup-03 {
  left: 469px;
}
.popup-03 .popup-content {
  background-image: url(../images/popup03.png);
  width: 466px;
  height: 71px;
}
.popup-04 {
  left: 635px;
}
.popup-04 .popup-content {
  background-image: url(../images/popup04.png);
  left: -386px;
  width: 7998px;
  height: 446px;
}
.popup-05 {
  left: 800px;
}
.popup-05 .popup-content {
  background-image: url(../images/popup05.png);
  left: -233px;
  width: 492px;
  height: 71px;
}
.popup-06 {
  left: 966px;
}
.popup-06 .popup-content {
  background-image: url(../images/popup06.png);
  left: -616px;
  width: 799px;
  height: 445px;
}
.ly:hover .popup-content {
  display: block;
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main {
    position: absolute;
    width: 100%;
    margin-top: -392px;
  }
  .section .section-content {
    opacity: 1;
  }
}