/* 메인 */
html,body{ margin:0; padding:0;}
#wrap,#main {margin:0; padding:0;}
.section { width:100%; }

#main .section .inner {}

.link {
    border: 2px #303030 solid;
    color: #303030;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
}

.link a {
    display: block;
    font-size: 1.5rem;
    padding: 1.2rem 0;

}

.link a:hover {}

.link {
    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);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.link:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #303030;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.link:hover,
.link:focus,
.link:active {
    color: white;
}

.link:hover:before,
.link:focus:before,
.link:active:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.link.dark {
    color: #fff;
    background-color: #303030;
}

.link.dark::before {
    background: #fff;
    /* -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0; */
}

.link.dark:hover,
.link.dark:focus,
.link.dark:active {color: #303030;
  }




#section1 {padding: 3rem 0 6rem;}
/* #section1 .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#section1 .swiper {width: 545px; padding-right: 45px; padding-top: 50px;}
#section1 .swiper .swiper-wrapper {align-items: center;}
#section1 .swiper-slide {}
#section1 .swiper-slide .wrap {width: 100%; background-color: #fff; display: flex; flex-direction: column; justify-content: center}
#section1 .swiper-slide .wrap::before {content: ""; width: 5px; height: 100%; border: 0; background-color: #282828; position: absolute; left: 0; z-index: 1;}
#section1 .swiper-slide .wrap::after {content: ""; width: 100%; height: 400px; background-color: #fff; position: absolute; top: 50%; margin-top: -200px; z-index: -1;}

#section1 .swiper .link {width: 350px; margin: 60px auto 0; }
#section1 .swiper .link a {padding: 8px 0;} */

#section1 .brunch {display: flex; justify-content: space-between; gap: 25px;}
#section1 .brunch > div {flex: 1;  overflow: hidden;}
#section1 .brunch > div a {display: block; position: relative;}
#section1 .brunch > div .brunch_img {overflow: hidden; border-radius: 40px;}
#section1 .brunch > div img {width: 100%; display: block; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out;}
#section1 .brunch > div:hover img {transform: scale(1.05); }
#section1 .brunch > div .tit {display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 0;}
#section1 .brunch > div .tit h5 {font-size: 24px;}
#section1 .brunch > div .tit .arrow {position: relative; border-radius: 80px; border: 1px solid #231815; display: inline-block; width: 38px; height: 38px;}
#section1 .brunch > div .tit .arrow p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700;}
#section1 .brunch > div:hover .tit .arrow {background: #231815; color: #fff;}

#section1 .top_tit {display: flex; justify-content: space-around; align-items: center; margin-top: 85px; text-align: center;}
#section1 .top_tit .txt h2 {font-size: 36px; line-height: 55px;}
#section1 .top_tit .link {max-width: 700px; width: 100%;}


#full_bg {height: 340px; background: url(images/full_bg.jpg) fixed no-repeat center; background-size: cover; padding: 115px 0;}
#full_bg p {color: #fff; font-size: 22px; margin-top: 25px;}



#section2 {margin: 6rem 0 3rem;}
/* @keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}
#section2 .client {
    overflow: hidden;
    white-space: nowrap;
    margin: 1.5rem 0;
}
#section2 .logos-slide {
    display: inline-block;
    animation: 100s slide infinite linear;
}
#section2 .logos-slide img {
    margin: 0 5px;
} */
#section2 .link {width: 30rem; margin: 0 0.5rem;}


#section2 .bx-wrapper {margin: 2rem 0;}
#section2 .slider {width: 100%; display: flex; align-items: center;}
#section2 .slider li img {margin: auto;}



#section3 { display: flex; margin: 8rem 0;}
#section3 > div {flex: 1; position: relative; height: 156px; overflow: hidden; text-align: center;}
#section3 > div a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: inherit; color: #fff;}
#section3 > div img {position: absolute; z-index: -1; left: 0; top: 0; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out;}
#section3 > div:hover img {transform: scale(1.2);}
#section3 > div h4 {margin-right: 1rem; }
#section3 > div h1::after {content: url(images/section3_arrow.png); margin-left: 1.5rem; top: -0.6rem; position: relative;}

@media (max-width:1620px) {
    #section3 > div a {flex-direction: column;}
}




#section4 {}
#section4 .inner.top { padding: 0 13.5rem; }
#section4 .inner > div {display: flex; justify-content: space-between; margin: 4rem 0;}
#section4 .txt {height: 59px; background-position: left top; background-repeat: no-repeat; float: left;}
#section4 h3 {margin-top: 1.3rem;}
#section4 .k .txt {width: 308px; background-image: url(images/section4_k.png);}
#section4 .t .txt {width: 211px; background-image: url(images/section4_t.png);}
#section4 .o .txt {width: 188px; background-image: url(images/section4_o.png);}
#section4 .n .txt {width: 198px; background-image: url(images/section4_n.png);}

#section4 .link {width: 30rem; margin: 0 0.5rem;}

#section4 .inner.ourbusiness {display: flex; justify-content: space-around; margin-bottom: 5rem;}
#section4 .link.squarebox {width: 8.3rem; height: 8.3rem; flex: none; display: flex; align-items: center; text-align: center; justify-content: center; border-radius: 1.75rem;}
#section4 .link.squarebox h3 {margin-top: 0; font-size: 1.7rem;}


#section5 {padding: 8rem 0;}

#section5 .part1 {display: flex; justify-content: space-between;}

#section5 a.btn_mv {border-radius: 2rem; overflow: hidden; width: 25rem; height: 14rem;}
#section5 .kton_story {width: 850px; margin-top: 0.6rem;}
#section5 .kton_story h1 {margin-right: 1.5rem;}
#section5 .kton_story h1 .border {border-top: 4px #303030 solid; padding-top:0.25rem;}
#section5 .kton_story .output_box {width: 100%; display: inline-block; margin-top: 1.6rem; font-size: 1.2rem; line-height: 2;}

div.m_layer {position:fixed; width:100%; height:1800px; top:0; left:0; z-index:1000; display:none;}
div.m_layer .backgoundbg{position:absolute; width:100%; height:100%; top:0; left:0; opacity:0.6; filter:alpha(opacity=60); background:#000;}
div.m_layer .con {position:relative; width:760px; height:480px; top:250px; left:0px; margin:0 auto; background:#000;}
div.m_layer .con a {position:absolute; top:440px; right:10px; color: #fff; font-size: 1.5rem;}
div.m_layer .con > div.move{width:100%; height:405px; position:absolute; top:1rem; left:1rem;}

#section5 .part2 {display: flex; justify-content: space-between;  }
#section5 .part2 > div {width: 49%; display: flex;    flex-direction: column;    justify-content: space-between;}
#section5 .part2 .branch {padding: 0.8rem 3rem; background-color: #e6e6e6; border-radius: 2rem; height: 676px;}
#section5 .part2 .branch a {display: inline-block; padding: 2rem 0 1.7rem;}
#section5 .part2 .branch a h3 {font-size: 1.65rem; margin-bottom: 0.4rem; float: left; width: 100%;}
#section5 .part2 .branch a h4 {font-size: 1.15rem; float: left;}
#section5 .part2 .branch a .arrow {width: 1.9rem; height: 1.9rem; line-height: 1.9rem; border-radius: 100%; text-align: center; background-color: #0d5941; color: #fff; float: right;}
#section5 .part2 .branch hr {width: 100%; height: 2px; border: 0; background-color: #000;}
#section5 .link {width: 100%; border: 2px #0d5941 solid; background-color: #0d5941; color: #fff; margin-top: 1.2rem;}
#section5 .link a {display: flex;    justify-content: center;    flex-direction: column;    align-items: center; padding: 1.5rem 0;}
#section5 .link:before {background-color: #fff;}
#section5 .link:hover,
#section5 .link:focus,
#section5 .link:active {color: #0d5941;  }


#section6 {margin: 6rem 0;}
#section6 .inner {display: flex; justify-content: center;}
#section6 .sns a {width: 97px; height: 97px; background-position: center; background-repeat: no-repeat; display: block; float: left; text-indent: -3333px; margin-right: 1.5rem;}
#section6 .sns a.blog {background-image: url(images/section5_sns_blog.png);}
#section6 .sns a.youtube {background-image: url(images/section5_sns_youtube.png);}
#section6 .sns a.instagram {background-image: url(images/section5_sns_instagram.png);}
#section6 .sns a.facebook {background-image: url(images/section5_sns_facebook.png);}

.radio > li {position: relative; background-color: #e6e6e6; color: #333; width: 210px; height: 97px; border-radius: 1rem; float: left; }
.radio > li.radio_dj {margin-right: 1.5rem;}
.radio > li h4 {position: absolute; left: 1.3rem; top: 50%; margin-top: -1.25rem; line-height: 1.2;}
.jp-controls {position: absolute; right: 1rem; top: 1.1rem; }
.jp-controls i {font-size: 2.5rem;}