@charset "utf-8";

/**************** 슬라이드 공통 텍스트 박스 ****************/
.main_cont .swiper-wrapper {justify-content: flex-start !important;}
.main_cont .swiper-container {transition: transform 0.3s ease;}
.main_cont .swiper-slide {width: calc(100% / 4 - 20px);}

.main_cont .all_btn {text-align: right; padding-right: 15px; padding-bottom: 20px;}
.main_cont .all_btn a {color: #999; position: relative; padding: 0 15px; font-size: 14px;}
.main_cont .all_btn a::before {background-image: url(/img/all_btn.png); background-repeat: no-repeat; background-size: 100%; top: 3px; right: 0; content: ''; position: absolute; width: 10px; height: 20px;}

.main_cont .contest_container {width: 1200px; max-height: 380px;}
.main_cont .contest_container ul {padding: 10px 0; max-height: 380px;}
.main_cont .contest_container ul li {transition: 0.5s; border: 1px solid #eee; box-sizing: border-box; overflow: hidden; border-radius: 10px;}
.main_cont .contest_container ul li:last-child {margin-right: 0px !important;}
.main_cont .contest_container ul li:hover {transform: translateY(-3px); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); -moz-transform: translateY(-5px); box-shadow: 8px 8px 8px #ddd;}

.main_cont .contest_container ul li .swi_text {padding: 10px 20px 10px 20px; box-sizing: border-box;}
.main_cont .contest_container ul li .swi_text .day_box {text-align: right;}
.main_cont .contest_container ul li .swi_text a span {color: #333; font-size: 12px;}
.main_cont .contest_container ul li .swi_text a h3 {line-height: 1.4; font-weight: bold; font-size: 14px; padding-top: 5px; -webkit-line-clamp: 1; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;}
.main_cont .contest_container ul li .swi_text a .c_script {height: 30px; margin-top: 3px; margin-bottom: 0px; font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; color: #333333;}
.main_cont .contest_container ul li .swi_text a .host {color:#333; margin-top: 3px; margin-bottom: 15px; font-size: 12px; line-height: 1.3;}
.main_cont .contest_container ul li .swi_text a .c_day {padding: 5px 8px; text-align: center; display: inline-block; font-size: 12px; border-radius: 15px; background-color: #FBF4F4;}
.main_cont .contest_container ul li .swi_text a .c_day span {color: #ef4d4d; font-weight: bold;}
.main_cont .contest_container ul li .swi_text a b {position: relative; display: inline-block; padding: 5px 8px 5px 20px; background-color: #F5f5f5; border-radius: 20px; color: #999; font-weight: bold; font-size: 12px;}
.main_cont .contest_container ul li .swi_text a b::before {
    position: absolute; 
    content: ''; 
    top: 7px;
    left: 7px;
    width: 8px;
    height: 11px; 
    background-image: url(/img/play_radius_icon.png); 
    background-repeat: no-repeat; 
    background-size: contain;
}
.main_cont .contest_container ul li .swi_text a .c_date {text-align: right;}

.main_cont .text_middle {padding: 5px 0;}
.main_cont .text_middle .middle_img {display: inline-block; vertical-align: middle; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; border: 1px solid #eee;}
.main_cont .text_middle .middle_img img {width: 100%; text-align: center;}
.main_cont .text_middle .middle_text {display: inline-block; vertical-align: middle; padding-bottom: 3px;}
.main_cont .text_middle .middle_text span {font-size: 13px; font-weight: 400;}

/**************** 메인1(메인 슬라이드) ****************/
.main_con1 {width: 100%; margin-top: 50px;}
.main_con1 .main_slider {
    opacity: 0;
    position: relative;
    width: 1080px;
    margin: 0 auto;
}
.main_con1 .main_slider.active {opacity: 100%;}
.main_con1 .main_slider ul.slick-dots li {width:8px; height:8px; background-color: #fff; margin:0 4px; border-radius: 15px; transition:all 0.5s; -ms-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s;}
.main_con1 .main_slider ul.slick-dots li button{width:100%; height:100%; padding:0; }
.main_con1 .main_slider ul.slick-dots li button:before {display:none}
.main_con1 .main_slider ul.slick-dots li.slick-active{background:#fff; width: 50px;}

.main_con1 .main_slider .slick-slider {}
.main_con1 .main_slider .slick-active {}

.main_con1 .main_slider ul li {
    position:relative; 
    width: 1080px; 
    height: 350px; 
    border-radius: 10px; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    margin-right: 24px; 
    cursor: pointer;
}
.main_con1 .main_slider ul li:last-child {margin-right: 0;}

.main_con1 .main_slider ul li .text {position:absolute; width:100%; height:100%; display:table; max-width:1080px; z-index:2; left:50%; top:0; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
.main_con1 .main_slider ul li .text .center {display:table-cell; vertical-align:middle;}
.main_con1 .main_slider ul li .text .center .p1 {padding-left: 140px; font-size: 30px; color: #fff; font-weight: bold; letter-spacing: -0.9px; line-height: 1.4;}
.main_con1 .main_slider ul li .text .center .p2 {padding-left: 140px; font-size: 16px; color: #fff; margin-top: 15px; font-weight: lighter; letter-spacing: -0.9px; line-height: 1.4;}

.main_con1 .main_slider ul li .text .center .btns {padding-top: 40px;}
.main_con1 .main_slider ul li .text .center a {font-size: 13px; display: inline-block; text-align: center; border: 1px solid #fff; font-weight: bold; color:#fff; border-radius: 10px; width: 130px; height: 40px; line-height: 40px; transition: 0.5s; -ms-transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.main_con1 .main_slider ul li .text .center a:hover {background: #000; color: #fff;}
.main_con1 .main_slider ul li .text .center .b2 {margin-left: 5px;}

.main_con1 .main_slider ul li .banner_imgbox {
    position: absolute; 
    max-width: 370px; 
    max-height: 278px; 
    width: 100%; 
    height: 100%; 
    aspect-ratio: 4/3; 
    border-radius: 10px; 
    overflow: hidden;
    right: 140px;
    top: 50%;
    transform: translate(0 ,-50%);
}

.main_con1 .main_slider ul li .banner_imgbox img {width: 100%; height: 100%;}
.main_con1 .main_slider ul li .banner_imgbox a {}

.m_main_slider {
    display: none;
    max-width: 100%;
    margin: 0 auto; 
    text-align: center;
    justify-content: center;
    aspect-ratio: 4/3;
}
.m_main_slider ul {}
.m_main_slider ul li {width: 100%; position: relative; padding: 0px 10px; box-sizing: border-box;}
.m_main_slider ul li:last-child {margin-right: 0;}
.m_main_slider ul li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.m_main_slider ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 30;
    border-radius: 10px;
}
.m_main_slider ul li a img {
    border-radius: 10px; 
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative; 
    z-index: 14;
}

.m_banner_text {position: absolute; bottom: 30px; left: 30px; text-align: left;}
.m_banner_text .p3 {color: #fff; font-weight: bold; font-size: 18px; line-height: 1.4; position: relative; z-index: 31;}
.m_banner_text .p4 {color: #fff; font-size: 12px; padding-top: 8px; line-height: 1.4; position: relative; z-index: 31;}

.m_main_slider ul .slick-dots {display: flex !important; margin-left: 10px; bottom: -15px !important; justify-content: start;}
.m_main_slider ul .slick-dots li {display: inline-block !important; width: 44px !important; height: 3px !important;}
.m_main_slider ul .slick-dots li button:before {font-size: 0; width: 44px; height: 3px; background-color: #000; border-radius: 5px;}


/**************** 메인2(우승자 포트폴리오) ****************/
.main_con2 .main2_container {margin-top: 30px;} 
.main_con2 .main2_container ul:after {content: ''; clear: both; display: block ; visibility: hidden; height: 0;} 
.main_con2 .main2_container ul li {cursor: pointer; float: left; width: calc(25% - 1%); margin-right: 1.33%; border: 1px solid #eee; border-radius: 10px; box-sizing: border-box; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s;} 
.main_con2 .main2_container ul li:last-child {margin-right: 0;}
.main_con2 .main2_container ul li:hover .video_thum .thum_inner img {transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1);}
.main_con2 .main2_container ul li:hover {transform: translateY(-3px); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); -moz-transform: translateY(-5px); box-shadow: 8px 8px 8px #ddd;}


/**************** 메인5(미디어 박스) ****************/
.main_cont6 {margin-bottom: 150px;}
.main_cont6 .media_container {margin: 25px 0; overflow: hidden;}
.media_container ul::after {clear: both; content: ''; height: 0; display: block; visibility: hidden;}
.media_container ul li {position: relative; float: left; box-sizing: border-box; width: calc(25% - 20px) !important; margin: 0 10px !important;}
.media_container ul li:hover .sns_thum img {transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05);}
.media_container ul li:hover .sns_bot .bot_right p {font-weight: bold; color: #4d7fef;}
.media_container ul li:last-child {margin-right: 0%;}

.media_container .sns_top {padding: 10px 0px 0px 10px;}
.media_container .sns_top::after {clear: both; content: ''; height: 0; display: block; visibility: hidden;;}
.media_container .sns_top .top_left {float: left;}
.media_container .sns_top .top_left p {font-size: 12px; color: #ef4d4d;}

.media_container .sns_top .top_right {float: right; position: relative; width: 25px; height: 25px;}
.media_container .sns_top .top_right i {display: none; position: absolute; bottom: 6px; transition: all 0.3s; width: 20px; height: 20px; background-image: url(/img/heartem4.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.media_container .sns_top .top_right i.on {background-image: url(/img/heartfull4.png);}

.media_container .sns_middle {position: relative; overflow: hidden; width: 100%; height: 281px; border-radius: 10px; text-align: center; transition: 0.3s; -webkit-transition: 0.3s; }
.media_container .sns_middle .sns_thum {position: absolute; width: 100%; height: 100%; top:50%; left: 50%; transform: translate(-50% , -50%); box-sizing: border-box; }
.media_container .sns_middle .sns_thum img {width: 100%; height: 100%; border-radius: 10px; transition: 0.5s;}

.media_container .sns_bot {padding: 0 10px 0px 10px; width: 100%; box-sizing: border-box;}
.media_container .sns_bot .bot_top h4 {font-weight: bold; font-size: 14px; -webkit-line-clamp: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.media_container .bot_bottom {margin-top: 15px; text-align: end;} 
.media_container .bot_bottom span {position: relative; display: inline-block; padding: 5px 8px 5px 22px; background-color: #FBF4F4; border-radius: 20px; color: rgb(153, 153, 153); font-weight: bold; font-size: 12px;}
.media_container .bot_bottom span::before {position: absolute; content: ""; top: 3px; left: 3px; width: 17px; height: 15px; background-image: url(/img/eye_icon.png); background-repeat: no-repeat; background-size: cover;}

/**************** 리스트 없을떄 ****************/
.main_temp_list {position: relative; width: 100%; height: 361px; background-color: #f9f9f9; cursor: pointer;}
.main_temp_list .temp_box {position: absolute; width: 100%; top: 50%; left: 50% ; transform: translate(-50%, -50%); text-align: center;}
.main_temp_list .temp_box .temp_top img {display: inline-block;}
.main_temp_list .temp_box .temp_middle {margin: 10px 0 15px 0;}
.main_temp_list .temp_box .temp_middle h2 {font-size: 18px; font-weight: bold;}
.main_temp_list .temp_box .temp_middle p {padding-top: 7px; font-size: 14px;}
.main_temp_list .temp_box .temp_bottom a {font-size: 14px; font-weight: bold; display: inline-block; padding: 7px 18px; border: 1px solid #ef4d4d; border-radius: 25px; color: #ef4d4d;}

/**************** 서브 배너 ****************/
.mobile_br {display: none;}
.sub_banner2 {width: 100%;}
.banner_box2 h2 {font-size: 14px;color: #fff; font-weight: bold; line-height: 1.4;}
.banner_box2 h2 span {font-weight: bold; font-size: 20px; color: #eef3fd;}
.banner_box2 a {padding-top: 20px; display: inline-block; padding-bottom: 6px; border-bottom: 1px solid #fff;}
.banner_box2 a h3{color: #fff; font-size: 14px;}

.banner_box2 .text_box {padding: 25px 0; text-align: left;}
.banner_box2 .img_box {position: absolute; right: 10px; bottom: 0; text-align: right;}
.banner_box2 .img_box img {opacity: 40%; width:60%; height: auto; min-width: 350px;}

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

    .inner {box-sizing: border-box; padding: 0 10px;}
    .main_cont {margin-top: 100px;}

    .slick-prev {display: none !important;}
    .slick-next {display: none !important;}

    .swiper-button-prev, .swiper-button-next {width: 33px; height: 33px;}
    .swiper-button-prev {
        top: auto; 
        bottom: -40px;
        left: auto; 
        right: 60px !important;
    }
    .swiper-button-next {
        top: auto; 
        bottom: -40px; 
        right: 10px !important;
    } 
    .mobile_br {display: block;}
}

@media (max-width : 768px){

    .main_con1 {margin-top: 15px;}
    
    .title_left .main_title {font-size: 18px;}
    .title_left .sub_title {font-size: 14px;}
    
    /* 메인 슬라이더 */
    .main_con1 .main_slider {display: none !important;}
    .main_con1 .main_slider ul li {border-radius: 0; width: 100%; max-width: 100%; height: auto;}
    .main_con1 .main_slider ul li .text {display: none;}

    .m_main_slider {display: block;}

    .main_con5 {margin-top: 60px !important;}

    .banner_box2 .img_box {}
}