@charset "utf-8";

/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * GE 여름 코스튬 이벤트 Stylesheet
 * Author - hsa815@hanbitsoft.co.kr 250716
 ------------------------------------------------- */

/* 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:'돋움', 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::-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:0px;line-height:0;text-indent:-9999px;overflow:hidden;}
.irWa {display:block;position:relative;width:100%;height:100%;z-index:-1;overflow:hidden;}
.blind {position:absolute;top:0;left:-1000%;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
.show {display:block;}
.hide {display:none;}
.fL {float:left;}
.fR {float:right;}
.clearFix {zoom:1;}
.clearFix:after {display:block;content:'';clear:both;}

/* Styles
-------------------------------------------------------------- */
#wrap {position: relative;width: 100%;min-width: 1200px;max-width: 2000px;margin: 0 auto;}
.inner {position: relative;width: 1200px;height: 100%;margin: 0 auto;}

.header,
.section,
.footer {image-rendering: pixelated;}

.header {
  background: url(../images/bg_header.jpg) no-repeat 50% 0;
  height: 1215px;
}
.header.con2{
  background: url(../images/bg_header2.jpg) no-repeat 50% 0;
}
.header .tab_menu{
  position: absolute;
  display: flex;
  left: 50px;
  bottom: 50px;
}
.header .tab_menu li{
  width: 367px;
  height: 107px;
  background:url(../images/tab_off.png) no-repeat;
  transition: all 0.3s;
}
.header .tab_menu li.on,
.header .tab_menu li:hover{
  background: url(../images/tab_on.png) no-repeat;
}

.header .tab_menu li:nth-child(2)
{
  background-position: -369px 0;
}
.header .tab_menu li:last-child{
  background-position: -737px 0;
}

.header .tab_menu li a{
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  cursor: pointer;
}
.section {
  background-repeat: no-repeat;
  background-position: 50% 0;
}
.section .inner:after {
  display: block;
  content: '';
  clear: both;
}
.section-content {
  position: relative;
  height: 100%;
  font-size: 0;
}
.section-content a {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 270px;
  height: 70px;
  z-index: 1;
  /* border: solid red; */
}

.link-costume-boutique {
  position: absolute;
  bottom: 350px;
  right: -164px;
  width: 213px;
  height: 276px;
  background: url(../images/btn_link.png) no-repeat;
  z-index: 2;
}
/* 컨텐츠배경 */
.section-01 {
  background-image: url(../images/bg_con1.jpg);
  height: 5867px;
}
.section-02 {
  background-image: url(../images/bg_con2.jpg);
  height: 5867px;
}

.btn_more{
  position: absolute;
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.btn_more img{
  display: none;
  position: absolute;
  top: 27px;
  left: 50%;
  transform: translateX(-50%);
}
.btn_more:hover img{
  display: block;
}

/* 더보기버튼 */
.more01{
  top: 790px;
  left: 202px;
}
.more02{
  top: 790px;
  left: 484px;
}
.more03{
  top: 790px;
  left: 832px;
}
.more04{
  top: 790px;
  left: 972px;
}
.more05{
  top: 1695px;
  left: 482px;
}
.more06{
  top: 1348px;
  left: 1042px;
}
.more07{
  top: 2270px;
  left: 625px;
}
.more08{
  top: 2615px;
  left: 765px;
}
.more09{
  top: 3190px;
  left: 624px;
}
.more10{
  top: 3537px;
  left: 693px;
}
/* 구매하기버튼 */
.section .btn_purchase01{
  top: 914px;
  left: 320px;
}
.section .btn_purchase02{
  top: 914px;
  left: 880px;
}
.section .btn_purchase03{
  top: 1830px;
  left: 320px;
}
.section .btn_purchase04{
  top: 1830px;
  left: 880px;
}
.section .btn_purchase05{
  top: 2750px;
  left: 50%;
  transform: translate(-50%);
}
.section .btn_purchase06{
  top: 3670px;
  left: 50%;
  transform: translate(-50%);
}
.section .btn_purchase07{
  top: 4245px;
  left: 50%;
  transform: translate(-50%);
}
.section .btn_purchase08{
  top: 4810px;
  left: 320px;
}
.section .btn_purchase09{
  top: 4810px;
  left: 740px;
  width: 210px;
}
.section .btn_purchase10{
  top: 4810px;
  left: 1020px;
  width: 210px;
}
.section .btn_purchase11{
  top: 5395px;
  left: 50%;
  transform: translate(-50%);
}
  /* 구매하기 - 코드네임J */
.section-02 .btn_purchase01{
  top: 580px;
  left: 600px;
}
.section-02 .btn_purchase02{
  top: 1504px;
  left: 320px;
}
.section-02 .btn_purchase03{
  top: 1504px;
  left: 880px;
}
.section-02 .btn_purchase04{
  top: 2434px;
  left: 600px;
}
.section-02 .btn_purchase05{
  top: 3184px;
  left: 600px;
}
.section-02 .btn_purchase06{
  top: 3934px;
  left: 600px;
}
.section-02 .btn_purchase07{
  top: 4505px;
  left: 320px;
}
.section-02 .btn_purchase08{
  top: 4505px;
  left: 740px;
  width: 210px;
}
.section-02 .btn_purchase09{
  top: 4505px;
  left: 1020px;
  width: 210px;
}
.section-02 .btn_purchase10{
  top: 5090px;
  left: 600px;
  width: 272px;
}

/* EVENT2 - 코드네임J */
.section-02 .more01{
  top: 442px;
  left: 695px;
}
.section-02 .more01_1{
  top: 442px;
  left: 834px;
}
.section-02 .more02{
  top: 1367px;
  left: 485px;
}
.section-02 .more03{
  top: 1020px;
  left: 1045px;
}
.section-02 .more04{
  top: 1367px;
  left: 905px;
}
.section-02 .more05{
  top: 1950px;
  left: 625px;
}
.section-02 .more05_1{
  top: 2297px;
  left: 694px;
}
.section-02 .more06{
  top: 2122px;
  left: 345px;
}
.section-02 .more07{
  top: 2872px;
  left: 1045px;
}
.section-02 .more07_1{
  top: 3625px;
  left: 205px;
}
.section-02 .more07_2{
  top: 3625px;
  left: 345px;
}
.section-02 .more08{
  top: 3622px;
  left: 1045px;
}


/* 마우스오버 효과 Buzz Out */
@-webkit-keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

@keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

.hvr-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-buzz-out:hover,
.hvr-buzz-out:focus,
.hvr-buzz-out:active {
    -webkit-animation-name: hvr-buzz-out;
    animation-name: hvr-buzz-out;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}