/* 메인 */
html,body{ margin:0; padding:0;}
#wrap,#main {}


#main {width: 100%; background-color: #fff;}
#main .section { width:100%; }



.link {
    border: 0.1rem #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.5rem 0;
}

.link a:hover {}

.link a i {position: relative; top: 0.25rem; line-height: 0; font-size: 2rem;}


.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: 0;}
#section1 .inner {
    display: flex;
    flex-direction: column;
}
#section1 .swiper {width: 100%; padding-top: 1.5rem; margin-top: 1rem;}
#section1 .swiper::before {content: ""; width: 8rem; height: 0.25rem; border: 0; background-color: #282828; position: absolute; top: 0; left: 50%; margin-left: -4rem; z-index: 10;}

#section1 .swiper-slide {}
#section1 .swiper-slide .wrap {width: 100%; background-color: #fff; display: flex; flex-direction: column; justify-content: center}
#section1 .swiper-slide .wrap::after {content: ""; width: 100%; height: 20rem; background-color: #fff; position: absolute; top: 50%; margin-top: -10rem; z-index: -1;}

#section1 .brunch {}
#section1 .brunch > div {width: 9.5rem; height: 15.5rem; border-radius: 2rem; overflow: hidden; float: left; margin-left: 0.5rem;}
#section1 .brunch > div a {display: block; position: relative;}
#section1 .brunch > div img {width: 100%; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out;}
#section1 .brunch > div:hover img {transform: scale(1.1); }
#section1 .brunch > div p {width:100%; position: absolute; z-index: 1; bottom: 0; text-align: right; background-color: rgba(0,0,0,0.8); color: #fff; padding: 0.4rem 1.1rem;}

#section1 .link {width: 12rem;  margin: 2.5rem auto 0; text-align: center;}
#section1 .link a {font-size: 1.2rem; padding: 0.5rem 0;} */
#section1 .brunch > div {width: 48%; float: left; margin-right: 4%;}
#section1 .brunch > div:nth-child(even) {margin-right: 0;}
#section1 .brunch > div a {display: block; position: relative;}
#section1 .brunch > div .brunch_img {border-radius: 40px; overflow: hidden;}
#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: 0.8rem 1rem 1.5rem;}
#section1 .brunch > div .tit h5 {font-size: 1.2rem;}
#section1 .brunch > div .tit .arrow {position: relative; border-radius: 80px; border: 1px solid #231815; display: inline-block; width: 2.4rem; height: 2.4rem;}
#section1 .brunch > div .tit .arrow p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; font-weight: 700;}
#section1 .brunch > div:hover .tit .arrow {background: #231815; color: #fff;}

#section1 .top_tit {text-align: center;}
#section1 .top_tit .txt {margin: 1rem 0 2rem;}
#section1 .top_tit .txt h2 {font-size: 1.7rem; line-height: 2.5rem;}
#section1 .top_tit .link {width: 25rem;}


#full_bg {height: 15rem; background: url(images/full_bg.jpg) no-repeat center; background-size: cover; padding: 5rem 0; margin-top: 5rem;}
#full_bg img {width: 12rem;}
#full_bg p {color: #fff; font-size: 1.1rem; margin-top: 1.5rem;}


#section2 {margin: 5rem 0;}
#section2 .link {width: 25rem; margin: 0.5rem 0;}

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



#section3 { display: flex; margin: 5rem 0;}
#section3 > div {flex: 1; position: relative; height: 7.8rem; overflow: hidden; text-align: center;}
#section3 > div a {position: relative; display: flex; flex-direction: column; 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 h3 {font-size: 1.75rem; padding-bottom: 1.5rem;}
#section3 > div h3::after {content: url(images/section3_arrow.png); bottom: 0.8rem; left: 50%; margin-left: -1.5rem; position: absolute;}



#section4 {}
#section4 .inner.top {/* text-align: center;*/ padding: 0 3.5rem ;} 
#section4 .inner.top > div { display: flex; flex-direction: unset;}
#section4 .inner > div {display: flex; flex-direction: column; margin: 2rem 0;}
#section4 .txt {width:100%; height: 2rem; background-position: left; background-repeat: no-repeat; background-size: contain;}
#section4 h4 {margin-top: 1rem;}
#section4 .k .txt {background-image: url(images/section4_k.png);}
#section4 .t .txt {background-image: url(images/section4_t.png);}
#section4 .o .txt {background-image: url(images/section4_o.png);}
#section4 .n .txt {background-image: url(images/section4_n.png);}


.youtubeBox {width:29rem; height:auto; background: url(images/youtube/ytbFrame_main.jpg) no-repeat; background-size: cover; box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.1);padding: 1rem; position: relative; border: 1px #e0e0e0 solid; margin-bottom: 3rem;}
.youtubeBox::before {content: url(../2024/images/youtube/ytbFrameTag.png); position: absolute; top: 0; left: 0.5rem; z-index: 10;}
.youtubeBox iframe {width: 100%;}


#section4 .inner.top .txt {flex: 1;}
#section4 .inner.top p {line-height: 1.3; flex: 1;}


#section4 a.btn_mv {border-radius: 2rem; overflow: hidden; width: 100%; height: 16.3rem;}

#section4 .kton_story {width: 100%; margin-top: 0.6rem;}
#section4 .kton_story h1 {margin-right: 1.5rem;}
#section4 .kton_story h1 .border {border-top: 0.2rem #303030 solid; padding-top:0.25rem;}
#section4 .kton_story .output_box {width: 100%; display: inline-block; margin-top: 1.2rem; font-size: 1.2rem; line-height: 2.5; text-overflow: ellipsis;}
#section4 .kton_story .output_box .bd_out1 {width: 100%; text-overflow: ellipsis; overflow: hidden; }
#section4 .kton_story .output_box .board_output_3_tr {display: flex;}
#section4 .kton_story .output_box .board_output_3_tr > td {flex: auto;}
#section4 .kton_story .output_box .board_output_3_tr td:nth-child(1) {width: 1%;}
#section4 .kton_story .output_box .board_output_3_tr td:nth-child(2) {width: 70%;}
#section4 .kton_story .output_box .board_output_3_tr td:nth-child(3) {width: 29%;}



#section4 .link {width: 25rem; margin: 0.5rem 0;}
#section4 .link span {font-size: 1.2rem;}

#section4 .inner.ourbusiness {display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0.75rem; gap: 1.5rem;}
#section4 .link.squarebox {width: auto; height: 8.3rem; flex: 1; display: flex; align-items: center; text-align: center; justify-content: center; border-radius: 1.75rem; margin: 0;}
#section4 .link.squarebox h3 {margin-top: 0; font-size: 1.7rem;}



#section4 .part2 {display: flex; flex-direction: column;}

#section4 .sns {display: flex; justify-content: center; flex-direction: row !important;}
#section4 .sns a {width: 4.85rem; height: 4.85rem; background-position: center; background-repeat: no-repeat; background-size: contain; display: block; text-indent: -3333px; margin: 0 0.7rem;}
#section4 .sns a.blog {background-image: url(images/section5_sns_blog.png);}
#section4 .sns a.youtube {background-image: url(images/section5_sns_youtube.png);}
#section4 .sns a.instagram {background-image: url(images/section5_sns_instagram.png);}
#section4 .sns a.facebook {background-image: url(images/section5_sns_facebook.png);}



.radio {margin-top: 2rem; display: flex; justify-content: center}
.radio > li {position: relative; background-color: #e6e6e6; color: #333; width: 11.5rem; height: 5rem; border-radius: 1rem; }
.radio > li.radio_dj {margin-right: 1rem;}
.radio > li h4 {position: absolute; left: 1.3rem; top: 50%; margin-top: -1.3rem !important; line-height: 1.2;}
.jp-controls {position: absolute; right: 1rem; top: 1.1rem; }
.jp-controls i {font-size: 2.5rem;}


#section5 {padding: 7rem 0 6rem;}

#section5 .part2 {padding: 0.8rem 2.5rem; background-color: #e6e6e6; border-radius: 2rem;}
#section5 .part2 div {display: inline-block; padding: 1.8rem 0 1.5rem;}
#section5 .part2 div h3 {margin-bottom: 0.5rem; float: left; width: 100%;}
#section5 .part2 div h3 i {width: 2.2rem; height: 2.2rem; line-height: 2.2rem; border-radius: 100%; text-align: center; margin-left: 0.5rem; background-color: #0d5941; color: #fff;}
#section5 .part2 div h5 {float: left; width: 100%;}
#section5 .part2 div .arrow { float: right; color: #0d5941; margin-top: 0.6rem; font-size: 1rem; font-weight: 600; cursor: pointer;}
#section5 .part2 hr {width: 100%; height: 0.1rem; border: 0; background-color: #000;}


#section5 .link {border: 2px #0d5941 solid; background-color: #0d5941; color: #fff; width: 26.5rem; margin: 3rem auto ; display: block;}
#section5 .link a {display: flex; justify-content:center; line-height: 1.5rem; font-size: 1rem;}
#section5 .link span {font-size: 1.5rem; margin-left: 0.8rem; text-align: center;}
#section5 .link:before {background-color: #fff;}
#section5 .link:hover,
#section5 .link:focus,
#section5 .link:active {color: #0d5941;  }



@media only screen and (max-width:640px) {
.youtubeBox::before {zoom: 0.618;}
.youtubeBox iframe {height: 47.5vw;}
}