/*
  z-index:
  포트폴리오 카테고리 메뉴 99999,
  컨택/채용 페이지 내 우측 슬라이드 화면 9999~1000n(위에 쌓이는 같은 종류의 화면들이 +1씩 올라감 10000,10001,...),
  헤더 999, 메뉴 99, 그 외 1,2,3, ...
*/
/* font size 단위: rem (16px = 1rem / 소수 셋째자리에서 반올림하여 둘째자리까지만 표기) */

/* @샘이: 헤더 스타일 common으로 옮겼음 여기는 추후 지우기 */

/* 메뉴 등이 on일 때 뒷배경 스크롤 막기 */
html.scroll-block, body.scroll-block{overflow-y: hidden !important;}

/* --------------------- 헤더 --------------------- */
#header{position: fixed; top: 0; left: 0; z-index: 999; width: 100%;}
#header .header-container{padding: 50px 4.7% 0 4.2%;}
#header .header-container .logo-container{}
#header .logo-container a{}
#header .logo-container a .logo_white { display:none; }
#header .logo-container a img{width: 84px;}
#header .menu-btn{width: 30px; height: 30px; margin-top: -5px; cursor: pointer;}
#header .menu-btn.color span, 
#header .menu-btn.color span:before, 
#header .menu-btn.color span:after { background-color:#fff; } 
#header .menu-btn span, #header .menu-btn span::before, #header .menu-btn span::after{background-color: #000; width: 30px; height: 3px; display: block; border-radius: 3px; transition: 0.5s;}
#header .menu-btn span{position: relative; transform: translateY(15px);}
#header .menu-btn span::before{content: ''; transform: translateY(-9px);}
#header .menu-btn span::after{content: ''; transform: translateY(6px);}
#header .menu-btn.on span{background: transparent; width:24px;}
#header .menu-btn.on span::before{transform: translateY(1.5px) rotateZ(135deg);}
#header .menu-btn.on span::after{transform: translateY(-1.5px) rotateZ(-135deg);}

@media screen and (max-width: 1024px) {
#header .logo-container a img{width: 57px;}
}

@media screen and (max-width: 680px) {
    #header .menu-btn {
        width:24px;
        height:24px;
    }
    #header .menu-btn span { transform:translateY(10px); }
    #header .menu-btn span, #header .menu-btn span::before, #header .menu-btn span::after { width:24px; }
    #header .header-container{
        padding: 24px 25px;
        background-color:#fff9ef;
    }
    
}

/* --------------------- 메뉴 --------------------- */
.menu-container{position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; visibility: hidden;}
.menu-container::after{content: ''; position: absolute; top: 50px; right: 4.7%; width: 500vw; height: 500vw; background: #fff9ef; border-radius: 50%; display: block; transition: 1.2s; transform: translate(50%, -50%) scale(0, 0);}
.menu-container .scroll-container {
    width: 100%;
    height: 100%;
    visibility: hidden;
}
.menu-container .menu-wrapper{position: relative; z-index: 1; width: 100%; visibility: hidden; opacity: 0; transition: 0.5s;}
.menu-container .menu-wrapper .menu-left-area{flex: 1 1 75%; -ms-flex: 1 1 75%;}
.menu-container .menu-left-area li{}
.menu-container .menu-left-area li a{
    overflow: hidden;
}
.menu-container .menu-left-area li a:hover ::after{transform: translateX(100%);}
.menu-container .menu-left-area li a span {
    position: relative;
    padding: 0 5px 0 1px;
    font-size: calc(56px + (110 - 56) * ((100vw - 360px) / 1560));
    font-weight: 700;
    display: inline-block;
}
.menu-container .menu-left-area li a span.on::after{visibility: hidden;}
.menu-container .menu-left-area li a span::after{content: attr(data-text); position: absolute; z-index: 1; top: 0; left: 1px; right: 0; width: 100%; white-space: nowrap; color: #fff9ef; text-shadow: -1px -1px 0 #000190, 1px -1px 0 #000190, -1px 1px 0 #000190, 1px 1px 0 #000190; background: #fff9ef; transition: 0.5s;}

.menu-container .menu-wrapper .menu-right-area{flex: 1 1 auto; -ms-flex: 1 1 auto;}
.menu-container .menu-right-area > img{width: 49px; margin-bottom: 48px;}
.menu-container .menu-right-area .menu-contact{margin-bottom: 32px;}
.menu-container .menu-right-area .menu-contact li:nth-child(n+2){margin-top: 10px;}
.menu-container .menu-right-area .menu-contact li p{font-size: 1.06rem;}
.menu-container .menu-right-area .menu-contact li span{font-size: 1.06rem; font-weight: 700; margin-right: 12px;}
.menu-container .menu-right-area .menu-address{font-size: 1.06rem; line-height: 25px; margin-bottom: 40px;}
.menu-container .menu-right-area .menu-communication{
    margin-bottom: 50px;
    margin-left:-4px;
}
.menu-container .menu-right-area .menu-communication li{display: inline-block; margin-right: 36px;}
.menu-container .menu-right-area .menu-communication li:last-child{margin-right: 0;}
.menu-container .menu-right-area .menu-communication li button{font-size: 1.06rem; font-weight: 700;}
.menu-container .menu-right-area .menu-communication li button img{width: 24px; margin-right: 4px; display: inline-block;}
.menu-container .menu-right-area .menu-copyright{font-size: 0.81rem;}

.menu-container.on{visibility: visible;}
.menu-container.on::after{transform: translate(50%, -50%) scale(1, 1);}
.menu-container.on .scroll-container{visibility: visible;}
.menu-container.on .menu-wrapper {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.6s;
    padding:0 6% 50px;
    overflow-y:scroll;
}

@media screen and (max-width: 1024px) {
  .menu-container .menu-wrapper{display: block;}
  .menu-container .menu-wrapper .menu-left-area{}
  .menu-container .menu-wrapper .menu-left-area li{text-align: right;}
  .menu-container .menu-wrapper .menu-left-area li:nth-of-type(n+2){margin-top: 15px;}
  .menu-container .menu-left-area li a:hover ::after{transform: none;}
  .menu-container .menu-wrapper .menu-left-area li a span{padding-right: 5px;}
  .menu-container .menu-wrapper .menu-left-area li a span::after{left: auto; right: 5px;}

  .menu-container .menu-wrapper .menu-right-area{margin-top: 17.5%;}
  .menu-container .menu-right-area .menu-contact{margin-bottom: 24px;}
  .menu-container .menu-right-area .menu-contact li:nth-child(n+2){margin-top: 5px;}
  .menu-container .menu-right-area .menu-contact li p{font-size: 0.88rem;}
  .menu-container .menu-right-area .menu-contact li span{font-size: 0.88rem;}
  .menu-container .menu-right-area .menu-address{font-size: 0.88rem; margin-bottom: 32px;}
  .menu-container .menu-right-area .menu-communication li button{font-size: 0.88rem;}
  .menu-container.on .menu-wrapper { padding:150px 6% 50px; }
}

@media screen and (max-width: 680px) {
  .menu-container::after{top: 24px; right: 25px;}
}

/* --------------------- 메인 페이지 --------------------- */
.main-container > div{position: relative;}
.main-container .main-title-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 0 6% 5%;
    display: flex;
    display: -ms-flexbox;
    align-items: flex-end;
}
.main-container .main-title-wrapper .main-title-area{}
/*
.main-container .main-title-wrapper h1{position: relative; font-size: calc(60px + (160 - 60) * ((100vw - 360px) / 1560));}
*/
.main-container .main-title-wrapper h1 {  }
.main-container .main-title-wrapper h1 p{display: inline-block; vertical-align: bottom; padding-bottom: 11px; font-size: 0; overflow: hidden;}
.main-container .main-title-wrapper h1 p:first-of-type,
.main-container .main-title-wrapper h1 p:last-of-type{padding-right: 2px;}
.main-container .main-title-wrapper h1 span {
    font-size: calc(60px + (160 - 60) * ((100vw - 360px) / 1560));
    font-weight: 500;
    display: inline-block;
    transform: translateY(0);
    font-weight:700;
}
.main-container .main-title-wrapper h1 .ani_innerview span{visibility: hidden;}
.main-container .main-title-wrapper h1 .text-inner span{font-size: calc(73px + (210 - 73) * ((100vw - 360px) / 1560)); font-weight: 700; color: #fff9ef; text-shadow: -1px -1px 0 #e12900, 1px -1px 0 #e12900, -1px 1px 0 #e12900, 1px 1px 0 #e12900;}
.main-container .main-title-wrapper h1 .text-view span{font-size: calc(73px + (210 - 73) * ((100vw - 360px) / 1560)); font-weight: 700; color: #fff9ef; text-shadow: -1px -1px 0 #e12900, 1px -1px 0 #e12900, -1px 1px 0 #e12900, 1px 1px 0 #e12900;}

#dot_bg{position: fixed; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.5s;}
#dot_bg.bg_black{background: #000;}
#trigger_wrapper{width: 100%; height: 100vh; margin-top: 100vh;}
.main-container .main-title-wrapper.title-ani h1 p{visibility: hidden; opacity: 0;}
.main-container .main-title-wrapper.title-ani h1 p span{color: #fff9ef; text-shadow: none;}
.main-container .main-title-wrapper.title-ani h1 p.text-inner{visibility: visible; opacity: 1;}
.main-container .main-title-wrapper.title-ani h1 p.text-view {
    visibility: visible;
    opacity: 1;
    position:relative;
    left:-3px;
}

.main-container .main-affiliate-wrapper{margin-top: 35vh;}
.main-container .main-affiliate-area{position: relative;}
.main-container .main-affiliate-area .white_box {  }
.main-container .main-affiliate-wrapper .main-affiliate-area{
    position: relative;
    float: right;
    padding:250px 200px 250px 250px;
}
.main-container .main-affiliate-wrapper .main-affiliate-area h2{color: #fff; margin-bottom: 62px; font-size: calc(21px + (32 - 21) * ((100vw - 360px) / 1560)); font-weight: 500;}
.main-container .main-affiliate-wrapper .main-affiliate-area .affiliate-text{position: relative; color: #fff; max-width: 885px; line-height: 57px; font-size: calc(26px + (38 - 26) * ((100vw - 360px) / 1560)); font-weight: 500;}

.main-container .main-affiliate-wrapper .highlight-box {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 300px);
    height: calc(100% + 300px);
    padding:250px 200px 250px 250px;
    clip-path: circle(0 at 0 0);
    pointer-events: none;
}
/*

.main-container .main-affiliate-wrapper .highlight-box {
    width: 0;
    height: 0;
    background-color:#fff;
    border-radius:50%;
    pointer-events: none;
}
*/

.main-container .main-affiliate-wrapper .highlight-box h2{color: #000;}
.main-container .main-affiliate-wrapper .highlight-box .affiliate-text{color: #000;}
.main-container .main-affiliate-wrapper .circle-text-box{position: absolute; top: -70px; left: -125px; width: 300px; height: 300px; background: #000; border-radius: 50%; overflow: hidden; display: none;}
.main-container .main-affiliate-wrapper .circle-text-box {transform: translate(125px, 70px);}
.main-container .main-affiliate-wrapper .circle-text-box h2{color: #fff;}
.main-container .main-affiliate-wrapper .circle-text-box .affiliate-text{color: #fff;}
.main-container .main-affiliate-wrapper .circle-text-box .affiliate-text::after{position: absolute; width: calc(100vw - 48px); top: 0; left: 0; content: '이너뷰는 고객과의 소통을 통해 니즈를 완벽하게 이해하고 다양한 경험을 바탕으로 크리에이티브한 솔루션을 제안합니다. 완벽하고 정직한 서비스로 최상의 결과물을 도출하여 고객과 함께 성장하는 것을 목표로 합니다.';}

.main-container .main-intro-wrapper{padding: 0 7% 0 9%; margin-top: 80vh;}
.main-container .main-intro-wrapper .mainTextOver { position:relative; }
.main-container .main-intro-wrapper .mainTextOver h3 { }
.main-container .main-intro-wrapper h3{font-size: calc(36px + (58 - 36) * ((100vw - 360px) / 1560)); font-weight: bold;}
.main-container .main-intro-wrapper ul{width: 100%; margin: 100px 0; flex-wrap: wrap; -ms-flex-wrap: wrap;}
.main-container .main-intro-wrapper ul li{padding-right: 55px; margin-top: 70px; flex: 1 1 267px; -ms-flex: 1 1 267px;}
.main-container .main-intro-wrapper ul li strong{display: inline-block; font-size: calc(26px + (34 - 26) * ((100vw - 360px) / 1560)); font-weight: 700;}
.main-container .main-intro-wrapper ul li p {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.02em;
    margin-top: 26px;
}
.main-container .main-intro-wrapper .main-more-link {
    font-size: 1.63rem;
    font-weight: 700;
    float: right;
    font-style:italic;
}
.main-container .main-intro-wrapper .main-more-link span{position: relative; width: 41px; margin-left: 12px; vertical-align: middle;}
.main-container .main-intro-wrapper .main-more-link span img{width: 100%;}

.main-container .main-clients-wrapper{margin-top: 350px;}
.main-container .main-clients-wrapper .mainTextOver { position:relative; }
.main-container .main-clients-wrapper h3{font-size: calc(36px + (58 - 36) * ((100vw - 360px) / 1560)); font-weight: bold; padding-left: 9%; margin-bottom: 150px;}
.main-container .main-clients-wrapper .clients-logo{height: 48px;}

.main-container .main-projects-wrapper{margin-top: 420px; padding-bottom: 250px;}
.main-container .main-projects-wrapper .mainTextOver { position:relative; }
/*
[dir='rtl'] .slick-slide { float:left; }
.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}
*/

.main-container .main-projects-wrapper h3{font-size: calc(36px + (58 - 36) * ((100vw - 360px) / 1560)); font-weight: bold; padding-left: 9%;}
.main-container .main-projects-wrapper .pf-list{padding-top: 300px;}

/* clients auto슬라이드 부분 */
.loop_slide { width:600%; overflow:hidden; }
.loop_slide > ul {
    position:relative;
    display:flex;
    justify-content:center;
    width:33.33%;
    white-space:nowrap;
    float:left;
}
.loop_slide > ul > li {
    display:inline-block;
    width:10%;
    animation: scrollLogo01 10s linear infinite;
}
.loop_slide > ul.loop_slide02 {
    position:relative;
    left:-33.33%;
    margin:80px 0 0;
}
.loop_slide > ul.loop_slide02 > li {
    animation: scrollLogo02 10s linear infinite;
}

@keyframes scrollLogo01 {
    0% { transform:translate(0, 0); }
    100% { transform:translate(-100%, 0); }
}
@keyframes scrollLogo02 {
    0% { transform:translate(0, 0); }
    100% { transform:translate(100%, 0); }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  /* IE 10+ CSS */
  .main-container .main-affiliate-wrapper .highlight-box{opacity: 0;}
}

@media screen and (max-width: 1024px) {
  .main-container .main-intro-wrapper ul li p{font-size: 1.19rem;}
  .main-container .main-intro-wrapper .main-more-link{font-size: 1.5rem;}
}

@media screen and (max-width: 680px) {
    .menu-container .menu-left-area li a { padding:0; }
  .main-container .main-title-wrapper{padding: 0 20px 55px; display: flex; display: -ms-flexbox; align-items: flex-end; -ms-flex-align: end;}
    .main-container .main-title-wrapper h1 {  }
    .main-container .main-title-wrapper h1 span {
        font-size:calc(51px + (160 - 60) * ((100vw - 360px) / 1560));
    }
/*  .main-container .main-title-wrapper h1{flex: 1 1 100%; -ms-flex: 1 1 100%;}*/
  .main-container .main-title-wrapper h1 p{display: block; margin-bottom: 5px;}
  .main-container .main-title-wrapper h1 p:last-of-type{margin-bottom: 0;}
  .main-container .main-title-wrapper h1 p.text-view{text-align: right;}
  .main-container .main-title-wrapper h1 br{display: none;}

  .main-container .main-affiliate-wrapper{margin-top: 150px; padding: 0 24px;}
  .main-container .main-affiliate-wrapper div{float: none;}
  .main-container .main-affiliate-wrapper div p{line-height: 39px; word-break: keep-all;}
  .main-container .main-affiliate-wrapper div.circle-text-box{display: block;}

  .main-container .main-intro-wrapper{margin-top: 210px; padding: 0 20px;}
  .main-container .main-intro-wrapper ul{display: block; margin: 90px 0;}
  .main-container .main-intro-wrapper ul li{text-align: right; padding:0;}
    .main-container .main-intro-wrapper ul li:after { content:''; display:block; clear:both; }
    .main-container .main-intro-wrapper ul li strong { display:block; }
    .main-container .main-intro-wrapper ul li p {
        float:right;
        width:277px;
        font-size:18px;
        margin-top:20px;
        word-break: keep-all;
        line-height:150%;
    }
  .main-container .main-intro-wrapper .main-more-link{float: none; font-style: italic;}

  .main-container .main-clients-wrapper{margin-top: 210px;}
  .main-container .main-clients-wrapper h3{
      padding-left: 20px;
      margin-bottom:100px;
   }

  .main-container .main-projects-wrapper{margin-top: 210px; padding-bottom: 105px;}
  .main-container .main-projects-wrapper h3{padding-left: 20px;}
  .main-container .main-title-wrapper.title-ani h1 p.text-view { left:0; }
  .loop_slide > ul.loop_slide02 { margin:40px 0 0; }
  .main-container .main-projects-wrapper .pf-list {
      padding:100px 20px 0;
    }
}


/*
.loop_slide01 { margin:150px 0 0; }
.loop_slide02 { margin:80px 0 0; transform:rotateY(180deg) !important; }
.loop_slide02 .slick-slide {
    transform:rotateY(-180deg) !important;
}
*/


/* contact, recruit 페이지의 폼 영역 */
.common-form-container{padding: 25px 0; flex-wrap: wrap; -ms-flex-wrap: wrap; overflow-y: auto; z-index: 9999; box-shadow: 0 0 25px rgba(182, 171, 154, 0.2); background: #fffaf1;}
.common-form-wrapper{flex: 1 1 100%; -ms-flex: 1 1 100%; padding: 0 14%;}
.common-form-wrapper .common-form-title{padding-bottom: 46px; font-size: 1.88rem; font-weight: 700;}
.common-form-wrapper .common-form-area{padding-top: 1px;}
.common-form-wrapper .input-box{width: 100%;}
.common-form-wrapper .input-box .input-box-item{position: relative; margin-top: 40px;}
.common-form-wrapper .input-box .pub_notice {
    display:none;
    font-size:13px;
    color:#E12900;
    margin:8px 0 0;
}
.common-form-wrapper .input-box .pub_notice.on { display:block; }
.common-form-wrapper .input-box .input-box-item.file-input::after{content: ''; position: absolute; top: 0; right: 4px; width: 24px; height: 24px; background: url('../img/contact_fileup.png') no-repeat; background-size: 100%;}
.common-form-wrapper .input-box .input-box-item input {
    width: 100%;
    padding: 0 0 10px 6px;
    font-size: 1.06rem;
    background-color: transparent;
    border-bottom: 2px solid #000;
    color:#333;
}

.common-form-wrapper .input-box .input-box-item input::placeholder {
    color: #999;
}

.common-form-wrapper .input-box .input-box-item input:-ms-input-placeholder {
    color: #999;
}

.common-form-wrapper .input-box .input-box-item textarea {
    background-color: transparent;
    width: 100%;
    height: 30px;
    padding: 0 6px 10px;
    border-bottom: 2px solid #000;
    transition: height 0.3s;
    resize: none;
}

.common-form-wrapper .input-box .input-box-item textarea::placeholder {
    color: #999;
}

.common-form-wrapper .input-box .input-box-item textarea:-ms-input-placeholder {
    color: #999;
}

.common-form-wrapper .input-box .input-box-item textarea:focus {
    height: 100px;
}
.common-form-wrapper .input-box .input-box-item select{padding: 9px 1px; background-color: transparent; border: 0; border-bottom: 2px solid #000; border-radius: 0;}
.common-form-wrapper .input-box .input-box-item select option{}
.common-form-wrapper .half-input-box{display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap;}
.common-form-wrapper .half-input-box .input-box-item{flex: 1 1 calc(50% - 30px); -ms-flex-preferred-size: calc(50% - 15px);}
.common-form-wrapper .half-input-box .input-box-item:nth-of-type(2n-1){padding-right: 30px;}
.common-form-wrapper .half-input-box .input-box-item input{}
.common-form-wrapper .half-input-box .input-box-item select{}
.common-form-wrapper .half-input-box .input-box-item select option{}
.common-form-wrapper .full-input-box{}
.common-form-wrapper .full-input-box .file-upload-text{position: relative; width: 100%; display: inline-block; color: #888; padding: 0 0 10px 6px; font-size: 1.06rem; border-bottom: 2px solid #000; cursor: pointer;}
.common-form-wrapper .full-input-box .file-upload-btn{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.common-form-wrapper .select-box {
    position: relative;
    padding: 0 0 10px 6px;
    border-bottom: 2px solid #000;
    cursor: pointer;
}
.common-form-wrapper .select-box.on ul {opacity:1; visibility: visible;}
.common-form-wrapper .select-box.on p {color: #000;}
.common-form-wrapper .select-box p{position: relative; color: #888; font-size: 1.06rem; font-weight: 400;}
.common-form-wrapper .select-box p img {
    width: 24px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition:all .5s;
    -ms-transition:all .5s;
}
.common-form-wrapper .select-box.on p img {
    transform:translateY(-50%) rotate(180deg);
    -ms-transform:translateY(-50%) rotate(180deg);
}
.common-form-wrapper .select-box ul{position: absolute; z-index: 2; left: 0; right: 0; transform: translateY(10px); border: 1px solid #000; background-color: #fffaf1; opacity: 0; visibility: hidden;}
.common-form-wrapper .select-box ul.on { opacity:1; visibility:visible; }
.common-form-wrapper .select-box ul li{padding-left: 19px; color: #333; font-size: 1.06rem; height: 50px; line-height: 50px; cursor: pointer; transition: background-color 0.2s;}
.common-form-wrapper .select-box ul li:hover{background-color: #ececec;}
.common-form-wrapper .select-box ul li.focus{background-color: #efefef;}
.common-form-wrapper .btn-area{margin-top: 30px;}
.common-form-wrapper .btn-area .policy-agree-box{padding-top: 10px;}
.common-form-wrapper .btn-area .policy-agree-box input{width:0; height:0;}
.common-form-wrapper .btn-area .policy-agree-box label{font-size: 0.94rem;}
.common-form-wrapper .btn-area .policy-agree-box .check_block {
    display:inline-block;
    position:relative;
    width:18px;
    height:18px;
    vertical-align:middle;
    border:2px solid #000;
    margin:0 10px 0 0;
}
.common-form-wrapper .btn-area .policy-agree-box .check_block.cont_chk { margin: 0 10px 2px 0; }
.common-form-wrapper .btn-area .policy-agree-box input:checked ~ label .check_block:before {
    content:'';
    display:block;
    position:absolute;
    top:5px;
    left:3px;
    width:2px;
    height:7px;
    background-color:#000;
    transform:rotate(-45deg);
}
.common-form-wrapper .btn-area .policy-agree-box input:checked ~ label .check_block:after {
    content:'';
    display:block;
    position:absolute;
    top:2px;
    left:8px;
    width:2px;
    height:10px;
    background-color:#000;
    transform:rotate(45deg);
}
/*.common-form-wrapper .btn-area .policy-agree-box label::before{border-color: #000;}*/
.common-form-wrapper .btn-area .policy-agree-box button{margin-left: 8px; color: #333; font-size: 0.63rem; height: 20px; padding: 0 7px; border: 1px solid #666; border-radius: 3px;}
.common-form-wrapper .btn-area .policy-agree-box .recap{margin: 18px 0 0 3px;}
.common-form-wrapper .btn-area .send-btn-box{}
.common-form-wrapper .btn-area .send-btn-box .send-btn{position: relative; width: 150px; height: 50px; border: 2px solid #000;}
.common-form-wrapper .btn-area .send-btn-box .send-btn span{position: relative; z-index: 1; font-size: 0.94rem; transition: 0.3s;}
.common-form-wrapper .btn-area .send-btn-box .send-btn::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; transition: 0.3s; transform: scaleX(0); transform-origin: left;}
.common-form-wrapper .btn-area .send-btn-box .send-btn:hover span{color: #fff;}
.common-form-wrapper .btn-area .send-btn-box .send-btn:hover::before{transform: scaleX(1);}

.fix_policy {
    position:fixed;
    top:0;
    right:-100%;
    width:60%;
    height:100%;
    transition:all 0.5s;
    z-index:10001;
    background-color:#fffaf1;
}
.fix_policy .close-btn {
    position:absolute;
    top:77px;
    right:90px;
    width:30px;
    height:30px;
    cursor:pointer;
}
.fix_policy .close-btn span{display: block; width: 30px; height: 3px; border-radius: 3px; background-color: #000; margin-bottom: 1px;}
.fix_policy .close-btn span:nth-of-type(1){transform: translateY(12px) rotate(45deg);}
.fix_policy .close-btn span:nth-of-type(2){transform: translateY(8px) rotate(-45deg);}

.fix_policy.active { right:0; }
.policy-container{flex-wrap: wrap; -ms-flex-wrap: wrap; overflow-y: auto; padding: 25px 0; z-index: 10000; background: rgba(255, 249, 239, 0.98);}
.fix_policy .policy-container {
    padding: 0 14%;
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:auto;
    transform:translate(-50%, -50%);
}
.policy-container .policy-wrapper{
    padding: 0 14%;
}
.recruit-container .policy-container .policy-wrapper{  }
.policy-container .policy-title{font-size: 1.75rem; font-weight: 700;}
.policy-container .policy-subtitle{font-size: 1.06rem; margin-top: 30px; line-height: 150%;}
.policy-container ul{margin-top: 48px;}
.policy-container ul li{}
.policy-container ul li:nth-child(n+2){margin-top: 40px;}
.policy-container ul li span{font-size: 1.13rem; font-weight: 700;}
.policy-container ul li p{font-size: 1rem; line-height: 150%; margin-top: 14px; white-space: pre-wrap;}
.contact-container aside.active { right:0; }

@media screen and (max-width: 1366px) {
  .common-form-wrapper{padding: 0 9%;}
  .policy-container .policy-wrapper{padding: 0 9%;}
    .loop_slide {  width:900%; }
}

@media screen and (max-width: 1024px) {
  .policy-container{background: rgba(255, 249, 239, 1);}
    .loop_slide {  width:1500%; }
}

@media screen and (max-width: 680px) {
  .common-form-container{padding-top: 100px;}
  .common-form-wrapper{padding:25px;}
  .common-form-wrapper .common-form-title{padding-bottom: 13px; font-size: 1.38rem;}
  .common-form-wrapper .half-input-box{display: block;}
  .common-form-wrapper .input-box .input-box-item{margin-top: 33px;}
  .common-form-wrapper .input-box .input-box-item input{font-size: 1rem;}
  .common-form-wrapper .half-input-box .input-box-item:nth-of-type(2n-1){padding-right: 0;}
  .common-form-wrapper .btn-area{display: block; margin-top: 32px; }
  .common-form-wrapper .btn-area .policy-agree-box{padding-top: 0;}
  .common-form-wrapper .btn-area .policy-agree-box label{font-size: 0.88rem;}
  .common-form-wrapper .btn-area .policy-agree-box button{margin-left: 6px; font-size: 0.56rem;}
  .common-form-wrapper .btn-area .policy-agree-box .recap{margin-top: 23px;}
  .common-form-wrapper .btn-area .send-btn-box{margin-top: 40px; text-align: right;}

  .policy-container{display: block; padding-top: 100px;}
    .fix_policy .policy-container { padding:0; }
  .policy-container .policy-wrapper{padding: 0 25px;}
  .policy-container .policy-title{font-size: 1.5rem;}
  .policy-container .policy-subtitle{margin-top: 25px; font-size: 0.94rem;}
  .policy-container ul li:nth-child(n+2){margin-top: 32px;}
  .policy-container ul li span{font-size: 1rem;}
  .policy-container ul li p{margin-top: 6px; font-size: 0.88rem;}
   .loop_slide {  width:1800%; }
    .common-form-wrapper .input-box .pub_notice { font-size:12px; }
    .fix_policy .close-btn {
        top:32px;
        right:25px;
        width:24px;
        height:24px;
    }
    .fix_policy .close-btn span { width:25px; height:2px; }
}

/* contact, recruit 페이지의 폼 영역 */

/* --------------------- 푸터 --------------------- */
#footer{position: relative; padding: 0 50px 20px;}
#footer .footer-container{border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 90px;}
#footer .footer-contact-title {
    flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    padding-left:50px;
    padding-bottom: 90px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#footer .footer-contact-title button{font-size: calc(36px + (60 - 36) * ((100vw - 360px) / 1560)); font-weight: 700; display: inline-block;}
#footer .footer-contact-title button span{width: 100px; margin-left: 20px; display: inline-block; font-size: 0; vertical-align: middle;}
#footer .footer-contact-title button span img{width: 100%; display: inline-block;}
#footer .footer-info{flex: 0 1 50%; -ms-flex: 0 1 50%; padding-bottom: 90px; margin-left: 3.7%; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
#footer .footer-info .info-left-area {
    flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    padding-left:24px;
}
#footer .footer-info .info-left-area .footer-contact{margin-bottom: 32px;}
#footer .footer-info .info-left-area .footer-contact li:nth-child(n+2){margin-top: 10px;}
#footer .footer-info .info-left-area .footer-contact li p{font-size: 1rem;}
#footer .footer-info .info-left-area .footer-contact li p span{font-weight: 700; margin-right: 12px;}
#footer .footer-info .info-left-area .footer-address{font-size: 1rem; line-height: 24px;}
#footer .footer-info .info-right-area{flex: 0 1 50%; -ms-flex: 0 1 50%; padding-left: 20px;}
#footer .footer-info .info-right-area li{display: inline-block; cursor: pointer;}
#footer .footer-info .info-right-area li:nth-child(n+2){margin-left: 16%;}
#footer .footer-info .info-right-area li img{width: 24px; display: inline-block; vertical-align: middle;}
#footer .footer-info .info-right-area li span{font-size: 1.06rem; font-weight: 700; vertical-align: middle;}

#footer .footer-copyright{font-size: 0.81rem; font-weight: 400; margin-top: 20px;}

@media screen and (max-width: 1366px) {
#footer .footer-contact-title button span{width: 80px;}
#footer .footer-info .info-right-area li:nth-child(n+2){margin-left: 10%;}
}

@media screen and (max-width: 1024px) {
#footer .footer-contact-title button span{width: 60px;}
#footer .footer-info{display: block;}
#footer .footer-info .info-left-area .footer-address{margin-bottom: 32px;}
}

@media screen and (max-width: 680px) {
#footer{padding: 0 20px 20px;}
#footer .footer-container{display: block; padding-top: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
#footer .footer-contact-title {
    border-bottom: 0;
    padding-bottom: 40px;
    padding-left:4px;
}
#footer .footer-contact-title button{font-size: 2.25rem;}
#footer .footer-contact-title button span{width: 49px; margin-left: 14px;}
#footer .footer-info{
    border-bottom: 0;
    padding-bottom: 32px;
    margin-left: 0;
    padding-left:4px;
    display: block;
}
#footer .footer-info .info-right-area { padding-left:0; margin-left:-4px; }
#footer .footer-info .info-right-area li:nth-child(n+2){margin-left: 42px;}
    #footer .footer-info .info-left-area { padding-left:0; }
#footer .footer-info .info-left-area .footer-contact{margin-bottom: 24px;}
#footer .footer-info .info-left-area .footer-contact li p{font-size: 0.88rem;}
#footer .footer-info .info-left-area .footer-address{font-size: 0.88rem; margin-bottom: 32px;}
#footer .footer-info .info-right-area li span{font-size: 0.88rem;}
#footer .footer-copyright { padding-left:4px; }
}


/* 메인 모바일 affiliate-wrapper */
.main-container .main-affiliate-wrapper .main-affiliate-area .mo-text-box {
    position:absolute;
    top:-65px;
    left:-125px;
    width:300px;
    height:300px;
    border-radius:50%;
    z-index:-1;
    background-color:#000;
    z-index:2;
    overflow:hidden;
    display:none;
}
.main-container .main-affiliate-wrapper .main-affiliate-area .mo-text-box .mo-text-box-cover {
    position:absolute;
    top:65px;
    left:125px;
}
.main-container .main-affiliate-wrapper .main-affiliate-area .mo-text-box h2,
.main-container .main-affiliate-wrapper .main-affiliate-area .mo-text-box p
{ color:#fff; }

@media screen and (max-width: 680px) {
   #dot_bg,
   .main-container .main-affiliate-wrapper .highlight-box,
   .main-container .main-affiliate-wrapper div.circle-text-box,
   .main-container .main-title-wrapper.title-ani { display:none; }
   .main-container .main-title-wrapper { position:static; }
   #trigger_wrapper { display:none; }
    .main-container .main-affiliate-wrapper .main-affiliate-area .affiliate-text .circle-text-box { color:#fff; }
    .main-container .main-affiliate-wrapper .main-affiliate-area .affiliate-text,
   .main-container .main-affiliate-wrapper .main-affiliate-area h2 { color:#000; }
    
    .main-container .main-affiliate-wrapper .main-affiliate-area {
        float:none;
        padding:0;
    }
    .main-container .main-affiliate-wrapper .main-affiliate-area .affiliate-text {
        width:264px;
        font-size:calc(25px + (32 - 21) * ((100vw - 360px) / 1560));
        line-height:150%;
    }
    .main-container .main-affiliate-wrapper .main-affiliate-area .mo-text-box { display:block; }
}