@charset "utf-8";

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
@font-face {
    font-family: 'CWDangamAsac-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/CWDangamAsac-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ELAND_Nice_M';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Nice_M.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.css{animation-duration: 0.5s;}
/* css초기화 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, input, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, select, summary, time, textarea, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; word-break: keep-all; word-wrap: break-word; font-family: 'SUIT Variable', sans-serif; font-size: 17px; color: #fff; letter-spacing: -.5px; box-sizing: border-box;}
    button{all:unset;}
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
    body {line-height: 1;}
    header, ol, ul, li{list-style: none; box-sizing: border-box;}
    blockquote, q {quotes: none;}
    blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
    table {border-collapse: collapse; border-spacing: 0;}
    a, a:hover {text-decoration: none;}
    ul, li {list-style: none; margin: 0; padding: 0; box-sizing: border-box;}
    input, label {box-sizing: border-box;}
    .btnArea{margin: 0;}
/* 공통영역 */
    /*폰트관련 */
    h1, h1 strong{font-size: 190px;}
    h2{font-size: 30px;}
    h3{font-size: 24px;}
    h4{font-size: 22px;}
    h5{font-size: 18px;}
    h6{font-size: 14px;}
    .bold1{font-weight: 900;}
    .bold2, strong{font-weight: 700;}
    .bold3{font-weight: 500;}
    .light1{font-weight: 300!important;}
    .lihgt2{font-weight: 100!important;}
    .asac{font-family: 'CWDangamAsac-Bold', 'SUIT Variable', sans-serif; font-weight: 900;}
    /* 컬러 */
    .bg-white{background-color: #fff;}
    .bg-yellow{background-color: #ffe747;}
    .bg-15{background-color: #151515;}
    .cl-yellow{color: #ffe747;}
    .cl-white{color: #fff;}
    /*width, height*/
    .w-h-100{width: 100%; height: 100%;}
    .w-1000{width: 1000px; margin: 0 auto;}
    .height100{height: 100%;}
    /* hidden */
    @media (max-width: 767px) { 
        .hidden-xs {display: none !important;}
    }
    @media (min-width: 768px) and (max-width: 991px) {
        .hidden-sm {display: none !important;}
    }
    @media (min-width: 992px) and (max-width: 1199px) {
        .hidden-md {display: none !important;}
    }
    @media (min-width: 1200px) {
        .hidden-lg {display: none !important;}
  }
    /*기타 css*/
    .cursor-p{cursor: pointer;}
    html{background-color: #151515;}
    .smooth{transition: all 0.3s ease-in-out;}
    .dp-flex{display: flex;}
    .dp-f-center{display: flex; justify-content: center; align-items: center;}
    .dp-f-between{display: flex; justify-content: space-between;}
    .hidden{opacity: 0; visibility: visible; display: none;}

/* 메인시작 */
    .home{height: 100vh; padding-right: 8.3333vw; overflow: hidden; position: relative;}
    .home nav{border-right: 1px solid #fff; border-bottom: 1px solid #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: absolute; min-height: 100vh; z-index: 1;}
    .home nav ul{justify-content: space-around; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px;}
    .home nav li{ -webkit-transform: rotateZ(-90deg); -ms-transform: rotate(-90deg); transform: rotateZ(-90deg);}
    .home nav li::before{content: ' '; display: inline-block; width: 0; height: 5px; background-color: #ffe74773; position: absolute; bottom: -2px; z-index: -1; transition: all 0.3s ease-in-out;}
    .home nav li:hover::before{width: 100%; transition: all 0.3s ease-in-out;}
        .main-wrapper{display: flex; flex-direction: column; align-items: flex-end; padding: 118px 0 0 100px;}
            .visual-txt{text-align: right; margin-top: 64px; margin-right: -14px;}
            .visual-txt h1:first-child{position: relative; left: 50px; margin-bottom: 10px;}
            .visual-txt h1 strong{position: relative; left: -50px;}
            .visual-txt span{font-size: 40px;}
            .visual-txt i{width: 24px; height: 24px; display: inline-block; background-image: url(../img/typo_x.png); margin: 0 4px 0 4px;}
            .bottom-wrap .info-box, .bottom-wrap .circle-ani{position: absolute;}
            .bottom-wrap{margin-top: 180px; width: 100%;}
            .bottom-wrap .info-box{height: 124px; right: 8.3333vw; border-bottom: 1px solid #fff; border-top: 1px solid #fff; padding: 28px 120px;}
            .bottom-wrap .info-box p {line-height: 24px;}
            .bottom-wrap .circle-ani{left: 160px; bottom: 0;}
                .circle-ani img{position: relative; display: inline-block;}
                .circle-ani img.emblem{left: 258px;}
                .circle-ani img.circle{top: 240px; animation: rotate_img 20s linear infinite;transform-origin: 50% 50%;}
        .burger{width: 40px; height: 23px; position: absolute; top: 6.2vh; right: 8.3333vw; z-index: 3;}
        .burger span{width: 80%; height: 2px; display: block; position: absolute; right: 0;}
        .burger span:nth-child(1){top: 0;}
        .burger span:nth-child(2){top: 11px;}
        .burger span:nth-child(3){bottom: -1px;}
        .burger:hover span{transition: all 0.3s ease-in-out;}
        .burger:hover span:nth-child(2){width: 60%;}
        .burger:hover span:nth-child(1),
        .burger:hover span:nth-child(3){width: 100%;}
        .burger.active span{transition: all 0.4s ease-in-out;}
        .burger.active span:nth-child(1){transform: translateY(11px) rotate(-45deg); width: 80%;}
        .burger.active span:nth-child(2){opacity: 0;}
        .burger.active span:nth-child(3){transform: translateY(-11px) rotate(45deg); width: 80%;}
        .burger.active span:hover{width: 80%;}
            
            @keyframes rotate_img{
                100% {
                    transform: rotate(360deg);
                }
            }
    /* 사이트맵 */
    aside.sitemap{width: 100%; height: 0; position: fixed; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden;}
        .sitemap .site-logo{margin-top: 40px;}
        .sitemap ul{margin-top: 110px; width: 800px;}
        .sitemap li.eng{border-bottom: 1px solid #393939; text-align: center; padding: 34px 0 34px 64px; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out;}
        .sitemap li.eng a{font-size: 48px; font-weight: 900;}
        .sitemap li.eng i{width: 105px; height: 40px; background: url(../img/yellow_long_arrow.png) no-repeat center center; display: inline-block; margin: 0 20px; opacity: 0; visibility: hidden;}
        .sitemap li.eng strong{font-size: 44px; font-weight: 800; opacity: 0; visibility: hidden;}
        .sitemap li.eng:hover i,
        .sitemap li.eng:hover strong{opacity: 1; visibility: visible; transition: all 0.3s ease-in-out; visibility: visible;}
        .sitemap.open{height: 100%; transition: all 0.5s ease-in-out; opacity: 1; display: flex; visibility: visible;}
        .sitemap.open li.eng{opacity: 1; visibility: visible; transition-duration: 0.5s; transition-timing-function: ease-in-out;}
        .sitemap.open li.eng:nth-child(1){transition-delay: 0.6s;}
        .sitemap.open li.eng:nth-child(2){transition-delay: 0.7s;}
        .sitemap.open li.eng:nth-child(3){transition-delay: 0.8s;}
        .sitemap.open li.eng:nth-child(4){transition-delay: 0.9s;}

    /* 서브 */
    .sub-back-img{width: 280px; height: 554px; background-image: url(../img/sub_back_img.png); position: absolute;  right: 0;  top: 600px;}
    .sub-visual .menu-wrap{padding-left: 41.81%; position: relative; padding-top: 50px;}
    .sub-visual .menu-wrap ul{width: 64%; display: flex; align-items: center; justify-content: space-between;}
    .sub-visual .menu-wrap li.active a{color: #ffe747;}
    .sub-visual .menu-wrap a{text-transform: uppercase; color: #555; font-weight: 900;}
            .sub-title-wrap{position: absolute; top: -110px; left: -110px; width: fit-content; z-index: 1;}
            .sub-title-wrap .circle{ top: 0!important; opacity: 0.3; animation-duration: 40s!important; width: fit-content;}
    h2.sub-visual-title{font-size: 38px; text-transform: uppercase; margin-top: 112px; margin-bottom: 56px; letter-spacing: 3px; text-align: center;}
    .contens-wrap{margin-bottom: 160px;}
    .sub-contents{z-index: 1; position: relative;}
        /* about */
    .sub01-img{z-index: 2; position: relative; border-radius: 20px; overflow: hidden;}
    .sub01-img ~ div{margin-top: 48px;}
    .sub01-img ~ div h3{line-height: 34px; letter-spacing: 0;}
    .sub01-img ~ div p{margin-top: 16px; line-height: 28px;}
    .sub01-img iframe{width: 100%; height: 500px;}
        iframe .html5-video-container video{left: 0!important; width: 100%!important; height: auto!important; top: 0;}
    .ribbon-area-full{height: 90px; background-color: #ffe747;}
    .ribbon-area-full .ribbon-wrap{position: absolute; left: 24px; bottom: -10px;}
    .ribbon-area-full .ribbon-word{color: #151515;}
        /* business */
    .youtube-wrapper, .live-wrapper{ width: 1600px; margin: 0 auto;}
    .youtube-wrapper h3, .live-wrapper h3{margin-top: 32px; margin-bottom: 20px;}
        .swiper {margin-left: auto; margin-right: auto; margin-top: 56px;}
        .swiper-slide {width: 50%; height: auto; text-align: center; font-size: 18px; background: #333; display: flex; justify-content: center; align-items: center; border-radius: 20px; overflow: hidden;}
        .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
    .live-wrapper{margin-top: 172px;}
    .ribbon-area-border{height: 170px; border-top: 1px solid #ffe64775; border-bottom: 1px solid #ffe64775; display: flex; align-items: center;}
    .ribbon-area-border .ribbon-word{color: #ffe747;}
        /* portfolio */
    .sub-contents .not-permission{height: calc(100vh - 500px); text-align: center;}
        .not-permission h3{margin-bottom: 24px;}
        .not-permission .btn-small{height: 26px!important; border: none;}
    #masonry-container, #responBoard, .write-form, .xm{width: 1000px!important; margin: 0 auto;}
    #masonry-container{display: flex;}
    #responBoard div{color: #fff;}
    #responBoard .cont-title{border-top: 1px solid #d7d5d5;}
    #masonry-container .itemBox{width: 100%; position: inherit; margin-bottom: 80px;}
        .thumbnailover{border-radius: 20px;}
        .gallerytitle{font-size: 24px; font-weight: 800;}
        .nothumbnail{margin-bottom: 20px!important;}
    #responBoard .pagination{display: flex; justify-content: center;}
    #responBoard .pagination-sm>li>a.page-no{font-family: 'SUIT Variable'; font-weight: 500; font-size: 12px; border-radius: 100%; cursor: pointer; display: inline-block; width: 26px; height: 26px; border: none;}
    #responBoard .pagination-sm>li>a, #responBoard .pagination-sm>li>span{color: #fff;}
    .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{font-weight: 800!important;}
    #mod_cmt, #re_cmt{display: none;}
    .cke_1.cke_chrome{margin-top: 20px; border-radius: 8px; overflow: hidden;}
    .board_button_wrap{border-top: 2px solid #444; padding-top: 32px;}
    #responBoard textarea.form-control{font-size: 15px; color: #222;}
    p.xefu-dropzone-message, .xefu-dropzone:hover .upload_info, .allowed_filesize{color: #555; font-size: 13px;}
    .form-inline, #responBoard button.btn-default{display: none;} /*view-댓글버튼삭제, write-최상단 꾸미기 버튼 삭제*/
    .pull-right{text-align: right; float: inherit;}
        /* 리본 움직임 */
        .ribbon-area{width: 100%; position: relative; overflow: hidden;}
        .ribbon-word{font-size: 80px; font-family: 'CWDangamAsac-Bold', 'SUIT Variable', sans-serif; font-weight: 900; letter-spacing: 10px;}
        .ribbon-area .ribbon-wrap{width: max-content; white-space: nowrap; will-change: transform; animation: moveLeft 50s linear infinite; }
            @keyframes moveLeft {
                from { transform: translateX(0); }
                to { transform: translateX(-50%); }
            }
         /* contact */
    .head-info{display: flex; justify-content: space-evenly; margin-bottom: 86px; margin-left: -24px; padding-top: 40px;}
    .head-info .info{display: flex; flex-direction: column; align-items: center;}
    .head-info .info-box{width: 80px; height: 80px; margin-bottom: 56px;}
    .head-info .info-box a{width: 100%; height: 100%; transform: rotate(45deg); border: 1px solid #898989;}
    .head-info .info-box svg{transform: rotate(-45deg);}
    .head-info .info p{line-height: 32px;}
    .inquiry h4{font-size: 20px; border-bottom: 1px solid #444444; padding-bottom: 26px; margin-bottom: 40px;}
        .inq-row{display: flex; margin-bottom: 56px;}
        .inq-row label{display: block; margin-bottom: 14px; font-size: 17px; color: #999;}
        .inq-row .box{flex: 1;}
        .inq-row .box:nth-child(2){margin-left: 48px;}
        .inq-row input{width: 100%; height: 56px; background-color: #333; padding: 8px 16px;}
            .inq-con{flex-direction: column;}
            .inq-con textarea{height: 180px; background-color: #333; padding: 16px;}
    .inquiry button{padding: 12px 64px; border: 1px solid #ffe64775; color: #ffe747; transition: all 0.3s ease-in-out;}
    .inquiry button:hover{background-color: #ffe747; border-color: #ffe747; color: #333; transition: all 0.3s ease-in-out;}
    .back-typo{font-size: 200px; color: #232323; letter-spacing: 20px; text-align: center; margin-top: 60px;}
    input:focus,
    textarea:focus {outline: none !important; border: 1px solid; border-color: #ffe64775; transition: all 0.3s;}
    .selectOption{color: black;}
    .selectOption>option{color: black;}
    .captcha{flex-direction: column;}
    .captcha>div{margin-bottom: 40px;}

/* footer */
footer{padding: 36px 0; display: flex; flex-direction: column; align-items: center;}
footer p{color: #818181; font-size: 14px; margin-top: 14px;}


/* 반응형 시작 */
@media (max-width:1620px) {
    .youtube-wrapper, .live-wrapper{width: 90vw; padding: 0 20px;}
}

@media (max-width:1199px) {
    .home nav{display: none;}
    .back-typo{font-size: 80px; letter-spacing: 5px;}
    #masonry-container, #responBoard{width: 80vw!important;}
}

@media (max-width:991px) {
    h1{font-size: 64px;}
    .w-1000{width: 100%;}

    .home{padding-right: 0;}
    .main-wrapper{align-items: center; padding: 64px 0 0 0px;}
    .circle-ani{position: absolute; top:0; left: 0;}
    .circle-ani a{position: inherit; z-index: 2;}
    .circle-ani img.emblem{width: 40px; top: 20px; left: 20px; position: absolute;}
    .burger{top: 24px; right: 20px;}
    .visual-txt{text-align: center; margin-right: 0; margin-top: 84px;}
    .visual-txt span{font-size: 30px; line-height: 60px;}
    .visual-txt h1{text-align: center; left: 10px;}
    .visual-txt h1:first-child{left: 0;}
    .visual-txt h1 strong{font-size: 64px; left: -16px;}
    .bottom-wrap{margin-top: 80px;}
    .bottom-wrap .info-box{width: 80%; height: auto; left: 50%; transform: translateX(-50%); padding: 32px 40px;}
    .circle-ani img.circle{left: -160px; top: -160px;}

    .sitemap ul{margin-top: 100px; width: 100%; padding: 20px;}
    .sitemap li.eng{padding: 20px;}
    .sitemap li.eng i, .sitemap li.eng strong,
    .sitemap li.eng:hover i, .sitemap li.eng:hover strong{display: none;}
    /* aboout*/
    .sub01-img{margin-top: 0; width: 100%;}
    .sub-title-wrap{position: inherit; width: 100%; text-align: center; padding-top: 200px;}
    .sub-title-wrap h2{position: inherit; transform: none;}
    h2.sub-visual-title{margin-top: 0; font-size: 32px;}
    .contens-wrap,
    #responBoard{margin-top: 40px; padding: 0 16px; margin-bottom: 80px;}
    .sub01-img, .thumbnailover{border-radius: 14px;}
    .sub01-img ~ div{margin-top: 40px;}
    /* portfolio */
    #masonry-container, #responBoard, .write-form, .xm{width: 100%!important;}
    .gallerytitle{font-size: 20px;}
    /* business */
    .youtube-wrapper{padding-left: 0; margin-top: 0;}
    .youtube-wrapper, .live-wrapper{width: 100%; padding: 0;}
    .swiper{margin-top: 28px;}
    .swiper-slide{width: 100%!important; height: auto!important; border-radius: 14px;}
    .live-wrapper{padding-right: 0; margin-top: 100px;}
    .live-wrapper h3, .live-wrapper p{text-align: left;}
    
    /* contact */
    .head-info{margin-top: 80px; margin-left: -40px;}
    .inq-row{flex-direction: column; margin-bottom: 36px;}
    .inq-row .box:nth-child(2){margin-left: 0; margin-top: 36px;}
    .back-typo{font-size: 60px; letter-spacing: 5px;}
    .sub01-img iframe{height: 250px;}
}



@media (max-width: 376px) {
    .bottom-wrap .info-box{padding: 32px;}
    h3{font-size: 20px!important;}
    p{font-size: 16px;}
    .sub01-img ~ div p{line-height: 24px;}
    .sub01-img ~ div h3{line-height: 28px;}
    .sub01-img ~ div{margin-top: 32px;}
    .youtube-wrapper h3, .live-wrapper h3{margin-top: 20px; margin-bottom: 12px;}
    .back-typo{font-size: 48px; letter-spacing: 5px;}
    .sub01-img iframe{height: 210px;}
}