/* FOR ALL */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:500|Noto+Serif+KR:500,700&display=swap');
@font-face {
    font-family: 'hnd';
    src: url('fonts/hnd.eot'); /* IE9 Compat Modes */
    src: url('fonts/hnd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/hnd.woff') format('woff'), /* Modern Browsers */
         url('fonts/hnd.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    margin:0; padding: 0;
    }
    body, html{padding: 0; margin: 0; width: 100%; height: 100%; font-family: 'hnd', 'Noto Sans KR'; word-break: keep-all;}
    html {
        overflow-x: hidden;
        overflow-y: scroll;
    }
    iframe{width: 100vw; height: 100vh; border:0;}
    a{text-decoration: none; color: black;}
    a:hover{color:#eee;}
    .menu-col a{color:white;}
    .menu-col a:hover{color:#555;}
    .kor{line-height: 1.7;}
    .serif{font-family: 'Noto Serif KR'; font-weight: 700;}
    .serif-reg{font-family: 'Noto Serif KR'; font-weight: 500;}
    .ul{border-bottom: 0.05vw solid; padding-bottom: 0.1vw;}
    .caption{font-size: 14px; letter-spacing: 0.15em}
    .question{font-size: 2.5vw}
    .contact{font-size: 14px;}

    .new_pos{position: fixed; bottom: 6vw; left: 6vw; width: 13vw; height: 13vw; 
        border-radius: 50%; background-color: black; z-index: 99999;
        box-shadow:0px 0px 50px #fff; cursor: pointer;
        background-image: url("0.etc/m.svg"); /* The image used */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: 75%; /* Resize the background image to cover the entire container */
        -webkit-animation: button 5s infinite linear;
        animation: button 5s infinite linear;
        }
    .new_pos:hover{box-shadow:0px 0px 50px #000; 
        background-image: url("0.etc/m-b.svg"); /* The image used */}

        @-webkit-keyframes button {
            from { box-shadow:0px 0px 50px #fff; background-color: black;}
            80% { box-shadow:0px 0px 50px #fff; background-color: black;}
            90% { box-shadow:0px 0px 150px #00f; background-color: #00f;}
            to { box-shadow:0px 0px 50px #fff; background-color: black;}
        }
        @keyframes button {
            from { box-shadow:0px 0px 50px #fff; background-color: black;}
            80% { box-shadow:0px 0px 50px #fff; background-color: black;}
            90% { box-shadow:0px 0px 150px #00f; background-color: #00f;}
            to { box-shadow:0px 0px 50px #fff; background-color: black;}
        }
    .arrow{position: fixed; bottom: 2vw; left: 18vw; width: 9vw; height: 9vw; 
        z-index: 99999;
        background-image: url("0.etc/m-hand.svg"); /* The image used */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: 100%; /* Resize the background image to cover the entire container */
        -webkit-animation: arrowanimation 5s infinite linear;
        animation: arrowanimation 5s infinite linear;}

        @-webkit-keyframes arrowanimation {
            from { opacity: 0.0;}
            80% { opacity: 0.0;}
            90% { opacity: 1.0;}
            to { opacity: 0.0;}
        }
        @keyframes arrowanimation {
            from { opacity: 0.0;}
            80% { opacity: 0.0;}
            90% { opacity: 1.0;}
            to { opacity: 0.0;}
        }
    .menucontents{display: none; color: white; width: 100%; height: 100%; cursor: default; padding: 30px;}    
    .menu-col{width: 23%; float: left; font-size: 1.6vw; padding-right: 2.5%;}
    .menu-col:nth-child(2){width: 24%;}
    .menu-col:nth-child(3){width: 53%; padding-right: 0.5%;}
    .menu-col:nth-child(3):after {
        content:'';
        display: block;
        clear: both;
    }
    .closebutton{position:fixed; top:10px; right:30px; font-size: 4vw; 
        z-index: 999999; color: white; display: none; cursor: pointer;}    
    .backbutton{position:fixed; top:20px; right:30px; width:15%; z-index: 9999;}    
    .reorder{position:fixed; top:20px; right:30px; width:15%; z-index: 9999; display: none;}  

    .container {
        background: white;
        margin: 0 auto;
        width: 100%; height: auto;
    }
     .container:after {
        content:'';
        display: block;
        clear: both;
    }
    .grid-sizer {width: 1%;}
    .item {
        display: inline-block;
        height: auto;
    }
    .pointer{cursor: pointer}
    .shuffler{cursor: pointer;}
    .borderitem{
        border:1px solid black;
        border-radius: 25px;
        background-color: white; 
        margin-bottom: -1px; z-index: 99;
    }
    .nonborderitem{ }
    .introduction{width: 45%; height: auto; font-size: 1.5vw; line-height: 1.7; padding: 2%; margin:0 0 0 -1px;}
    .box1 {width: 50%; height: auto; margin-left: 3.5%}
    .box2 {width: 46%; font-size: 0; line-height: 0; height: auto;}
    .box3 {width: 60%; font-size: 0; line-height: 0; height: auto;}
    .box4 {width: 40%;}
    .box5 {width: 24%; margin-left: 4%; font-size: 0; line-height: 0; height: auto;}
    .box6 {width: 70%; }
    .box7 {width: 16%; font-size: 3vw; text-align: center; padding: 2% 0 2% 0; background-color: transparent;}
    .box8 {width: 23%; margin:-8% -4% -4% -4%; background-color: transparent; z-index: 999;}
    .box9 {width: 35%; font-size: 0; line-height: 0; height: auto;}
    .box10 {width: 42%; margin-left: 2%;}
    .box11 {width: 51%; margin-left:6%; font-size: 0; line-height: 0; height: auto;}
    .box12 {width: 10%; font-size: 3vw; text-align: center; padding: 70px 0 70px 0; background-color: transparent;}
    .box13 {width: 32%; font-size: 0; line-height: 0; height: auto;}
    .box14 {width: 65%; margin-left: 2%;}
    .box15 {width: 42%; margin-left: 2.7%; font-size: 0; line-height: 0; height: auto;}
    .box16 {width: 53%; }
    .box17 {width: 21%; margin:-4% -4% -4% -6%; background-color: transparent; z-index: 999;}
    .box18 {width: 40%; margin-left: 2%; font-size: 0; line-height: 0; height: auto;}
    .box19 {width: 56%;}
    .box20 {width: 44%; font-size: 0; line-height: 0; height: auto;}
    .box21 {width: 34%; font-size: 0; line-height: 0; height: auto;}
    .box22 {width: 11%; font-size: 3vw; text-align: center; padding: 60px 0px 60px 0px; background-color: transparent;}
    .box23 {width: 11%; font-size: 3vw; text-align: center; padding: 60px 0px 60px 0px; background-color: transparent;}
    .box24 {width: 42%;}
    .box25 {width: 23%; margin:-3% 0% -8% 0%; background-color: transparent; z-index: 999; padding: 0 2% 0 2%}
    .box26 {width: 58%; margin-left: 4%; font-size: 0; line-height: 0; height: auto;}
    .box27 {width: 19%; font-size: 3vw; text-align: center; padding: 35px 35px 35px 35px; background-color: transparent;}
    .box28 {width: 27%; margin:3% -8% 2% -4%; background-color: transparent; z-index: 999;}
    .box29 {width: 19%; font-size: 3vw; text-align: center; padding: 35px 35px 35px 35px; background-color: transparent;}
    .box30 {width: 19%; font-size: 3vw; text-align: center; padding: 35px 35px 35px 35px; background-color: transparent;}
    .box31 {width: 60%; margin-left: 2%;}
    .box32 {width: 38%; font-size: 0; line-height: 0; height: auto;}
    .box33 {width: 57%; font-size: 0; line-height: 0; height: auto; margin-left: 5%;}
    .box34 {width: 37%; background-color: transparent; z-index: 999; padding: 3% 3% 3% 3%; margin-bottom: -7%;}
    .box35 {width: 53%; background-color: transparent; padding: 2% 2% 2% 2%; margin: 0 0 20% 2%;}
    .box36 {width: 33%; font-size: 4vw; padding: 2% 2% 2% 2%; margin-left: 2%;}

    .horizontalimg{width: 100%;}
    .button-group{position: fixed; top: 0; right: 0; z-index: 9999;}

    #myIframe
    { position: relative;
      height: 50vh;
      width: 100%; 
      border:0;
    }

    .flip-card-inner {
      display: inline-block;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front, .flip-card-back {
      display: inline-block;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .flip-card-front {
    }

    .flip-card-back {
      transform: rotateY(180deg);
      position: absolute; top: 0; left: 0
    }

    .flip-card-inner-x {
      display: inline-block;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

    .flip-card-x:hover .flip-card-inner-x {
      transform: rotateX(180deg);
    }

    .flip-card-front-x, .flip-card-back-x {
      display: inline-block;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .flip-card-front-x {
    }

    .flip-card-back-x {
      transform: rotateX(180deg);
      position: absolute; top: 0; left: 0
    }
    .titlewrap{display: none; }
    .item:hover .titlewrap{display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%;}
    .title{display:table; font-size: 2vw; line-height: 1.5; padding:0 10% 0 10%; position: absolute; top:0; left: 0; width: 100%; height: 100%; text-align: center;}
    .title span{display:table-cell; vertical-align: middle; width: 100%; height: 100%;}
    .title span.white{color: white; font-size: 1.4vw}
    .mobiletitle{display: none;}

    .box1 .flip-card-front-x{font-size:18.65vw; line-height: 0.9; padding: 0 1% 1% 1%;}
    .box1 .flip-card-back-x{font-size:1.3vw; line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box4 .flip-card-front-x{padding: 3% 2% 3% 2%;}
    .box4 .flip-card-back-x{padding: 3% 2% 3% 2%; background-color: black;}
    .box10 .flip-card-front-x{padding: 3% 2% 3% 2%;}
    .box10 .flip-card-back-x{padding: 3% 2% 3% 2%; background-color: black;}
    .box6 .flip-card-front-x{font-size:15.3vw; line-height: 0.85; padding: 0 1% 1% 1%;}
    .box6 .flip-card-back-x{font-size:1.3vw; line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box14 .flip-card-front-x{font-size:28vw; line-height: 0.8; padding: 1% 1% 1% 1%;}
    .box14 .flip-card-back-x{font-size:1.3vw; line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box16 .flip-card-front-x{font-size:16vw; line-height: 0.8; padding: 1% 1% 1% 1%;}
    .box16 .flip-card-back-x{font-size:1.3vw; line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box19 .flip-card-front-x{font-size:29vw; line-height: 0.8; padding: 1% 1% 1% 1%;}
    .box19 .flip-card-back-x{font-size:1.3vw; line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box24 .flip-card-front-x{padding: 3% 2% 3% 2%;}
    .box24 .flip-card-back-x{padding: 3% 2% 3% 2%; background-color: black;}
    .box31 .flip-card-front-x{padding: 2% 2% 2% 2%;}
    .box31 .flip-card-back-x{padding: 2% 2% 2% 2%; background-color: black;}    

.keywords:hover span {display:none}
.keywords:hover:before {content:"♥♥♥"}
.keywords:hover{color: hotpink;
    text-shadow:0px 0px 30px hotpink;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;}

@media screen and (max-width: 700px) {
iframe{width: 100vw; height: 50vh; border:0;}
    .arrow{display: none;}
    .caption{font-size: 12px; letter-spacing: 0.2em}
    .question{font-size: 6vw}
    .contact{font-size: 3vw;}

    .reorder{position:fixed; top:20px; right:30px; width:30%; z-index: 9999; display: none;}  
    .backbutton{position:fixed; top:50px; right:30px; width:30%; z-index: 9999;}    

    .borderitem{
        border:1px solid black;
        border-radius: 15px;
        background-color: white; 
        margin-bottom: -1px; z-index: 99;
    }

    .box1 {width: calc(100% - 20px); margin: 10px; }
    .box2 {width: 100%}
    .box3 {width: 100%}
    .box4 {width: calc(100% - 20px); margin: 10px;}
    .box5 {width: 100%; margin:0;}
    .box6 {width: calc(100% - 20px); margin: 10px; }
    .box7 {width: 100%; font-size: 5vw;}
    .box8 {width: 92%; margin:-10% 4% -10% 4%;}
    .box9 {width: 100%}
    .box10 {width: calc(100% - 20px); margin: 10px;}
    .box11 {width: 100%; margin:0;}
    .box12 {width: 100%; font-size: 5vw;}
    .box13 {width: 100%}
    .box14 {width: calc(100% - 20px); margin: 10px; }
    .box15 {width: 100%; margin:0;}
    .box16 {width: calc(100% - 20px); margin: 10px; }
    .box17 {width: 92%; margin:-10% 4% -10% 4%;}
    .box18 {width: 100%; margin:0;}
    .box19 {width: calc(100% - 20px); margin: 10px; }
    .box20 {width: 100%}
    .box21 {width: 100%}
    .box22 {width: 50%; font-size: 5vw;}
    .box23 {width: 50%; font-size: 5vw;}
    .box24 {width: calc(100% - 20px); margin: 10px;}
    .box25 {width: 92%; margin:-15% 4% -10% 4%;}
    .box26 {width: 100%; margin:0;}
    .box27 {width: 100%; font-size: 5vw;}
    .box28 {width: 92%; margin:-15% 4% -10% 4%;}
    .box29 {width: 50%; font-size: 5vw;}
    .box30 {width: 50%; font-size: 5vw;}
    .box31 {width: calc(100% - 20px); margin: 10px;}
    .box32 {width: 100%}
    .box33 {width: 100%; margin:0;}
    .box34 {width: 100%}    
    .box35 {width: calc(100% - 20px); margin: -20px 10px 0px 10px; padding: 4% 4% 4% 4%;}
    .box36 {width: calc(100% - 20px); margin: 10px 10px 10px 10px; padding: 4% 4% 4% 4%; font-size: 8vw;}
    .introduction{width: calc(100% - 20px); height: auto; font-size: 4vw; line-height: 1.7; padding: 2% 3% 2% 3%; margin: 0px 10px 40% 10px;}

.flip-card-x:hover .flip-card-inner-x {
      transform: none;
    }
 .flip-card:hover .flip-card-inner {
      transform: none;
    }

    .box1 .flip-card-front-x{font-size:34vw; line-height: 0.9; padding: 1% 2% 2% 2%;}
    .box1 .flip-card-back-x{line-height: 0.9; padding: 1% 2% 2% 2%;; background-color: black; color: white;}
    .box4 .flip-card-front-x{padding: 3% 2% 3% 2%;}
    .box4 .flip-card-back-x{padding: 3% 2% 3% 2%; background-color: black;}
    .box10 .flip-card-front-x{padding: 3% 2% 3% 2%;}
    .box10 .flip-card-back-x{padding: 3% 2% 3% 2%; background-color: black;}
    .box6 .flip-card-front-x{font-size:20vw; line-height: 0.85; padding: 2% 2% 2% 2%;}
    .box6 .flip-card-back-x{line-height: 0.9; padding: 2% 2% 2% 2%; background-color: black; color: white;}
    .box14 .flip-card-front-x{font-size:40vw; line-height: 0.8; padding: 1% 1% 1% 1%;}
    .box14 .flip-card-back-x{line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box16 .flip-card-front-x{font-size:29vw; line-height: 0.8; padding: 1% 1% 1% 1%;}
    .box16 .flip-card-back-x{line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box19 .flip-card-front-x{font-size:48vw;  line-height: 0.8; padding: 1% 1% 1% 1%;}
    .box19 .flip-card-back-x{line-height: 0.9; padding: 0 1% 1% 1%; background-color: black; color: white;}
    .box24 .flip-card-front-x{padding: 3% 2% 3% 2%;}
    .box24 .flip-card-back-x{padding: 3% 2% 3% 2%; background-color: black;}
    .box31 .flip-card-front-x{padding: 2% 2% 2% 2%;}
    .box31 .flip-card-back-x{padding: 2% 2% 2% 2%; background-color: black;}    

    .item .title{display:none; z-index: 999;}
    .item:hover .title{display:none; position: absolute; top:0; left: 0; width: 100%; height: 100%; font-size:5vw; line-height: 1.5; padding:0 10% 0 10%;}
    .title span{display:none; vertical-align: middle; text-align: center;}
    .title span.white{color: white; font-size:5vw;}
    .mobiletitle{display: inline-block; width: 100%; font-size:5vw; line-height: 1.5; padding:4% 5% 8% 5%; text-align: center;}
    .mobiletitle a:hover{color: black}
    .new_pos{position: fixed; overflow-y: auto;}
    .menu-col{width: 100%; float: left; font-size: 4.5vw; padding-right: 2%; padding-bottom: 10%;}
    .menu-col:nth-child(2){width: 100%; padding-right: 2%; padding-bottom: 10%;}
    .menu-col:nth-child(3){width: 100%; padding-right: 2%; padding-bottom: 10%;}
    .menu-col:nth-child(3):after {
        content:'';
        display: block;
        clear: both;
    }
.closebutton{position:fixed; top:10px; right:30px; font-size: 15vw; 
        z-index: 999999; color: white; display: none; cursor: pointer;}    
.backbutton{position:fixed; top:10px; right:20px; font-size: 13vw; 
        z-index: 9;}    

}