@font-face { 
    font-family: 'Cafe24Ohsquare'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff'); 
    font-weight: normal; font-style: normal; }

@font-face { 
    font-family: 'S-CoreDream-4Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); 
    font-weight: normal; font-style: normal; }

@font-face { 
    font-family: 'S-CoreDream-6Bold'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); 
    font-weight: normal; font-style: normal; }

@font-face {
    font-family: 'S-CoreDream-7ExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream-8Heavy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24Danjunghae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Danjunghae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); 
    .nanumgothic * { 
        font-family: 'Nanum Gothic', sans-serif; }

.row{
    margin-bottom: 0;
}

.row .col{
    padding: 0 0;
}

a{
    text-decoration: none;
    color: black;
}

.row>.col>.dropdown-trigger:visited{
    display: none;
}

/* hide scroll bar */
body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {   /* Chrome, Safari, Opera */
    display:none;
}
/*햄버거 클릭시 바깥화면 어둡게하기*/
.emphasized { 
    /*box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px;*/
    /*z-index : 100;*/
    }

/* hamburger icon - mouseover*/
.nav-icon4:hover{   
    border-radius: 50%;
    background-color: white;
    transition: 0.3s;
}
/* hamburger icon */
.nav-icon4 {
    width: 45px;
    height: 45px;
    position: relative;
    /* margin: 50px auto; */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}

.nav-icon4 span {
    z-index: 5;
    height: 1px;
    width: 60%;
    background: black;
    border-radius: 9px;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    position: relative;

}

 .nav-icon4 #span1 {
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    border:1px solid black;
}
  
 .nav-icon4 #span2 {
    border:1px solid black;

    margin-top: 10px;
}
  
  
 .nav-icon4.open #span1 {
    transform: translateY(6px);
}
  
 .nav-icon4.open #span2 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top:-6px;
}
  


/* menu */

.tap-target-wrapper {
    /* top : -339px !important;
    left: 65.4px !important; */
    z-index:1;
}
/* 
.tap-target-wave {
    top:358px !important;
    left:-42px !important;
    width:84px !important;
    height:84px !important;
} */

.menu-square p {
    width:fit-content;
    height: 6vh;
    left: 53vh;
    top: 27vh;
    position: relative;
}

 .menu-square {
    border-radius: 50%;
    width: 104vh;
    height: 80vh;
    top: -30vh;
    left: -65vh;
    padding-top:12vh;
    padding-left:16vh;
}

.menu-hamburger .iesquare {
    top:-50px; 
    left:-50px;
    width:0px; 
    height:0px;
    transition: width 0.5s, height 0.5s;
}

.menu-hamburger .iesquare.open {
    display:inline-block;
    width:470px; 
    height:367px;
    background-color:white; 
    transform:scale(10px, 10px);
    transform-origin:left;
}

/* .menu-hamburger .iesquare {
    display:none;
    top:-50px; 
    left:-50px;
}

.menu-hamburger .iesquare.open {
    display:inline-block;
    transform:scale(10px, 10px);
    transform-origin:left;
} */



.topMenu .iesquare {
    top:-50px; 
    left:-50px;
    width:0px; 
    height:0px;
    transition: width 0.5s, height 0.5s;
}

.topMenu .iesquare.open {
    display:inline-block;
    width:470px; 
    height:367px;
    background-color:white; 
    transform:scale(10px, 10px);
    transform-origin:left;
}

.menu-square .menu-title {
    font-size:4.2vh;
}

.menu-square .menu-first {
    font-size:2.8vh; 
    margin-top:5.6vh; 
}
.menu-square .menu-second {
    font-size:2.8vh;
     margin-top:0vh; 
}

.iesquare .menu-title {
    font-size:0px;
}

.iesquare .menu-first {
    font-size:0px; 
    margin-top:40px;
}

.iesquare .menu-second {
    font-size:0px;
    margin-top:30px;
}

.iesquare .menu-title.open {
    font-size:4.2vh;
}

.iesquare .menu-first.open {
    font-size:20px; 
    margin-top:40px; 
}

.iesquare .menu-second.open {
    font-size:20px;
    margin-top:30px; 
}

/* main-page */

.main-page {
    height:100vh;
}

#bottomWindow {
    height:100vh;
    background-color:white;
}

.main-page .menu-hamburger{
    z-index:2; 
    position: fixed; 
    top:50px; 
    left:50px;
}

.menu-hamburger .menu {
    z-index:2; 
    margin-top:-1.2vh; 
    margin-left:-0.6vh; 
    width: 4.5vh;
    max-width:100px; 
    line-height:1.5vh;
}

.menu-hamburger #close-menu {
    top:-1.2vh; 
    left:-0.6vh;
    width: 3vh;
}

.menu-hamburger #egg-img {
    left:-4vh; 
    top:-2.4vh;
    width:28vh;
}

/* .menu-hamburger #to_port {
    font-size:2.4vh; 
    width:19.5vh; 
    left:2.2vh; 
    top:4.2vh;
} */

/* .menu-hamburger #contact {
    font-size:2.4vh; 
    width:19.5vh;
    left:2.2vh; 
    top:8vh;
} */

.topMenu {
    top:40px; 
    left:40px;
}

.topMenu .aaa {
    top:-1.2vh; 
    left:-0.6vh; 
    width:3vh;
}

.topMenu #egg-img {
    left:-4vh; 
    top:-2.4vh;
    width:28vh;
}

/* .topMenu #to_port {
    left:1.5vh; 
    top:6vh;
    font-size:2.6vh; 
    width:20vh; 
} */

.main-page .valign-wrapper .col{
    height:50vh;
    margin:auto;
}
/*모바일화면에서의 최적화*/
#mainLogoImg{
 top:15vh;
}
@media screen and (max-height: 700px){
    #mainLogoImg{
        top:10vh;
       }
    }
@media screen and (max-height:570px){
        #mainLogoImg{
            top:5vh;
           }
        }
.main-page #mainLogoP {
    font-size:100px;
}

/* #contact-us {
    bottom:100px; 
    right:100px; 
    width:140px;
} */

.main-page #mainLogoP2 {
    font-size:100px; 
    line-height:85px;
    bottom:unset;
    text-align: center;
}

/* Content */

.Content>.row{
    margin-left:21vh;
}

.Content .row .col .row{
    bottom:3vh;
}

.main-first-item{
    margin-left: 13vh !important;
}

.sub-first-item{
    margin-left: 6vh !important;
}

.Content .row .col.l1{
    position: relative;
    /* width:30vh; */
    /* width:27vh; */
    width:25vh;
    margin-left:15vh;
}

/* 카드 공간을위한 클래스*/
.scene {
    /*width: 200px;*/
    /*height: 260px;*/
    width:25vh;
    height:37vh;
    /*perspective: 600px;*/
}

/* 카드 */
.card-wrap {
    width:25vh;
    height:37vh;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor:pointer;
}
/* 카드 앞/뒷면 */
.card__face {
    position: absolute;
    width: 25vh;
    height:37vh;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    color: #fff;
    text-align: center;
    font-size: 2em;
    margin:0;
    background-size:cover;
    background-position: center;
    transition: transform 1s;
    transform-style: preserve-3d;
}
/* 카드 앞면 */
.card__face--front {
    /*background-color: Tomato;*/
}
/* 카드 뒷면 */
.card__face--back {
    /*background-color: SteelBlue;*/
    transform: rotateY(180deg);
    height:37vh;
}
/* 카드 플립 효과 */
.card-wrap.is-flipped {
    transform: rotateY(180deg);
}

.Content .row .col.l1 .hover-window{
    width:25vh;
    height:37vh;
    background-repeat : no-repeat;
    background-size : cover;
    background-position: center;
    position:absolute; 
    top:0; 
    transform:rotateY(180deg);
    backface-visibility: hidden;
    box-sizing: border-box;
    transition: transform 1s;
    transform-style: preserve-3d;
    display:none;

}
.card-wrap.is-flipped .hover-window{
    display:block !important;
}

/*카드 뒤 글씨를 잘 나타내기 위한 투명도조절배경*/
.graybox{
    width:100%;
    height:100%;
    background-color: black;
    opacity: 0.4;
    transform: translateZ(-1px);
}

.card-title {
    color: black;
}


.Content .row .col.l1 .hover-text{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    z-index:2;
    transform: translateZ(6vh);
}

.Content #call-width .call-me-first {
    font-size:1.8vh; 
    margin-left:27vh;
    margin-top:4.5vh;
    width:26vh;
    height:5vh;
}

.Content #call-width .call-me-second {
    font-size:1.8vh; 
    line-height:2.2vh; 
    margin-top:3vh; 
    width:53vh;
    height:8.3vh;
    padding-right:13vh;
}

.card .card-content{
    padding:3vh 2vh;
    position: relative;
    transform: translateZ(6vh);
    display: flex;
    align-items: center;
    justify-content: center;
    height:12vh;
}

.card .card-image{
    /* height:30vh; */
    /* height:27vh; */
    height:25vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.btn-floating{
    z-index:2;
    width: 7vh;
    height: 7vh;
    border-radius: 0%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: 9vh;
    top: -5vh;
}

.btn-floating>img{
    width: 100%;
}
/*translateZ로 3D효과 구현*/
.hover-font{
    font-family: 'S-CoreDream-4Regular';
    transform:translateZ(7vh);
    backface-visibility: hidden;
    color:white; 
    margin: 0 2vh; 
    /* word-break: keep-all; */
    line-height: clamp(5px, 4.5vh, 22px);   /* 35px */
    font-size: clamp(5px, 2.4vh, 14px);     /* 30px */
    width: calc(100% - 2vh - 1em);
    font-weight: 600;

    /* 들여쓰기 효과 */
    padding-left:1em;
    text-indent: -1em;
    text-align:left;
}

.hover-font p {
    word-break: break-all;
}

.Content .row .first-portfolio{
    margin-left:10vh;
    /* padding-left:10vh; */
}

.Content .row .first-portfolio .main-title {
    width:7.1vh !important;
}

.Content .row .first-portfolio .title{
    font-family: 'S-CoreDream-8Heavy'; 
    word-break: keep-all;
    height:39vh;
    margin-left:5vh;
    font-size: 3vh;
    line-height: 4vh;
    width:20.1vh;
}

.Content .row .first-portfolio .title p{
    position:relative; 
    bottom:-11vh;
}

.Content .row .second-portfolio .row{
    top: 4.5vh;
    padding-left:6vh;
}

.card .card-content .card-title{
    font-family: 'S-CoreDream-6Bold';
    line-height: 2.8vh;
    font-size: 2.3vh;
    z-index: 2;
    width:100%;
    text-align: center;
}

.card-content .card-category{
    position:absolute;
    top:-197px;
    right:26px;
    color:#fff;
    font-family: 'Nanum Gothic';
    font-size:1.7vh;
}

.card-wrap .card-category{
    color:#fff;
    font-family: 'Nanum Gothic';
    padding-top: 2vh;
    text-align: right;
    padding-right: 2vh;
    font-size:1.7vh;
}


.main-more {
    margin-left:7vh;
    font-size:2.4vh;
    width:13vh;
    height:37vh; 
}

.more {
    font-family: 'S-CoreDream-8Heavy';
    position:relative; 
    background-color: rgba(255,255,255,0.8); 
    margin-left:7vh; 
    height:37vh; 
    width:13vh;
}

.more p {
    font-size:2.3vh;
    top:6vh; 
    left:4.5vh; 
    width:1vh; 
    line-height:3vh;
}


/* Media Query - Width */
@media screen and (max-width: 1000px){
    .main-page #mainLogoP {
        font-size:60px;
    }

    /* #contact-us {
        bottom:100px; 
        right:100px; 
        width:100px;
        font-size:12px;
    } */
}

@media screen and (max-width: 800px){

    /* main-page */
    .main-page .valign-wrapper .col{
        height:50vw;
    }

    .Content>.row{
        margin-left:11vw;
    }
}


@media screen and (max-width: 450px){

    .Content #call-width .call-me-first {
        font-size:11px; 
        margin-left:100px;
        width:200px; 
        height:37px;
    }
    
    .Content #call-width .call-me-second {
        font-size:11px; 
        line-height:2.2vh;
        width:300px; 
        height:55px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 400px) {

    .main-page #mainLogoP2 {
        font-size:70px; 
        bottom:15px;
        line-height:60px;
    }

}

@media screen and (min-width : 1900px) {

    .main-page #mainLogoP {
        font-size: 8vh;
    }

    /* #contact-us {
        bottom:11vh; 
        right:11vh; 
        width:14vh;
        font-size:1.5vh;
    } */

}

@media screen and (min-height: 800px){

    /* Content */

    .Content .row .first-portfolio .main-title {
        width:14.1vh !important;
    }

    .Content .row .col .row{
        bottom:0px;
    }

    .Content .row .col.l1{
        width:25vh;
        margin-left: 13vh;
    }

    .card .card-image{
        height:25vh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .main-first-item{
        margin-left: 5vh !important;
    }

    .sub-first-item{
        margin-left: 5vh !important;
    }

    .card .card-content .card-title{
        /*line-height: 2vh;*/
        margin-bottom:0;
        /*font-size: 1.6vh;*/
    }
    
    .Content .card-category{
        /*font-size: 1.3vh;*/
    }

    .Content .row .first-portfolio{
        margin-left:10vh;
        /* padding-left:10vh; */
    }

    .card .card-content{
        padding: 2vh;
        padding-top: 2.5vh;
        padding-bottom:1.5vh;
    }

    .btn-floating{
        /*width: 6vh;*/
        /*height: 6vh;*/
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .btn-floating.halfway-fab{
        top: -5vh;
    }
    
    .more {
        margin-left: 8vh; 
        width: 11vh;
        height: 35vh;
    }

    .more p {
        font-size: 2vh;
        top: 4vh; 
        left: 3.5vh; 
        width:1vh; 
        line-height:2.5vh;
    }

    .Content .row .first-portfolio .title{
        margin-left:3vh;
        font-size: 3vh;
        line-height: 4vh;
        height:40vh;
        width: 20.1vh;
        padding-top:15vh;
    }

    .Content .row .first-portfolio .title p{
        bottom:-4vh;
    }

    .Content.portfolio .row .first-portfolio .title p{
        bottom:4vh;
    }
    
    .main-more {
        height: 35vh;
        margin-left: 6.5vh;
        font-size: 2.4vh;
        line-height: 2.5vh;
        width: 12vh;
        text-align: center;
    }
}

@media screen and (max-height: 500px) {
    .call-me .row .call-me-first{
        width: 180px !important;
        height: 30px !important;
        margin-left: 90px !important;
        margin-top: 23px !important;
        font-size:10px !important;
    }

    .call-me .row .call-me-second{
        width: 270px !important;
        height: 46px !important;
        margin-top: 15px !important;
        font-size:10px !important;
        line-height:11px !important;
    }

    /* #contact-us {
        bottom:21px; 
        right:21px;
        width:90px;
        font-size:9px;
    } */

    .Content .row .col .row{
        bottom:0px;
    }

}

@media screen and (max-height: 700px){

    /* main-page */
    .main-page .valign-wrapper .col{
        height:45vh !important;
    }

    .Content>.row{
        margin-left:11vw;
    }
}

/* 메뉴 백그라운드 */
.this-background{
    width: 500vw;
    height: 500vh;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: -291vh;
    left: -500vw;
    z-index: 1;
    transition: all 0.45s;
    /*visibility: hidden;*/
    border-radius: 50%;
}

.this-background.active{
    width: 500vw;
    height: 500vh;
    top: -290vh;
    left: -350vw;
    /*visibility: visible;*/
}