@charset "utf-8";

/* common style */
.btn.focus, .btn:focus, .btn:hover{color:#fff;}

/* Sections */
.intro-section {
    height: 700px;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
.uselist-section {
    height: 800px;
    padding-top: 150px;
    text-align: center;
    background: #f5f5f5;
}
.services-section {
    height: auto;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
.notice-section {
    height: auto;
    min-height:500px;
    padding-top: 150px;
    text-align: center;
    background: #fff;
    padding-bottom: 50px;
}
.contact-section {
    height: 650px;
    padding-top: 150px;
    text-align: center;
    background: #f5f5f5;
}



.header_title{font-size: 34px; font-size: 3.4rem;}
.content_title{font-size: 24px; font-size: 2.4rem; font-weight: 500; padding-bottom: 20px;}
.content-text{font-size: 22px; font-size: 2.2rem; font-weight: 400; line-height: 1.6; padding-bottom: 40px;}
.content_info{position: relative; text-align:left; margin: 60px 0; z-index: 100;}
.info-area{position: relative; z-index: 100;}
.left_img, .right_img{position: relative; overflow: hidden; margin-top: 20px;}
.m-btn-box{display: none; position: relative; vertical-align: middle; width:100%;}
.m-btn-box .m_btn{display: inline-block; position: relative; width: 40%;}
.intro-section .header_title{text-align: left; font-size: 40px; font-size: 4.0rem; font-weight: 500; line-height: 1.6; padding-left: 20px;}
.intro-section .m_main_img{display:none;}
.intro-section .btn-box{display: block; text-align: left; margin: 40px 0;}
.intro-section .left_text{padding:60px 0;}
.intro-section .bg_01{background-image: url(../images/bg_figure.png); background-repeat: no-repeat; position: absolute; top: 0; right: 0; width: 63%; height: 700px;}
.intro-section .img_main_style .bg_mac{position: relative;}
.intro-section .img_main_style .main_img{position: absolute; top:50%; left: 50%; width:80%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.video-overlay{position:absolute; top:0; left:0; z-index:1;}
.video-overlay.play{cursor:pointer;}
.video-overlay .btn_play{position:absolute; top:50%; left:50%; width:68px; height:68px; background:url(../video/btn_play.png) no-repeat; margin:-50px 0 0 -50px;}
.video-overlay .btn_play:hover{background:url(../video/btn_play_s.png) no-repeat;}

.uselist-section .content_info{margin: 40px 0;}
.uselist-section .info-area .info-text{font-size: 16px; font-size: 1.6rem; font-weight:600; margin-bottom:15px;}
.uselist-section .info-area .info-text-s{font-size: 13px; font-size: 1.3rem;}
.uselist-section .item_box{max-width:250px; min-height: 280px; background: #f5f5f5; box-shadow: -10px -10px 30px #fff, 10px 10px 30px #d7d7d7; text-align: center; border-radius: 30px; margin: 40px auto; padding: 20px 10px;}
.uselist-section .item_box .item_title{font-size: 18px; font-size: 1.8rem; font-weight: 500; padding: 20px 0;}
.uselist-section .item_box .item_description{line-height: 1.8;}

.services-section .bg_02{background-image: url(../images/bg_figure.png); background-repeat: no-repeat; position: absolute; top: 100%; left: -1080px; width: 1327px; height: 1327px;}
.services-section .left_img, .services-section .right_img{margin-top: 0;}
.services-section .right_text{margin: 20px 0; padding: 10px 0 40px 40px;}
.services-section .left_text{text-align:right; margin:20px 0; padding: 10px 40px 40px 0;}
.services-section .contents-pc, .services-section .contents-mobile{margin-top: 60px; margin-bottom: 100px;}
.services-section .contents-mobile .left_img, .services-section .contents-mobile .right_img{width:80%;}
.services-section .contents-mobile .left_img{float: right;}
.services-section .contents-mobile .right_text .content-text{padding-bottom: 20px;}
.services-section .btn-box{margin:40px 0;}
.services-section .btn-group a.btn{padding:0;}
.services-section .btn-lg{min-height: 72px !important; font-size: 28px !important; padding: 16px 100px !important;}

.notice-section .tabs-menu{margin: 60px 0;}
.notice-section .tabs-menu .nav{width: 100%; margin-bottom: 60px;}
.notice-section .tabs-menu .nav-item{overflow: hidden; width: 50%; background: #fff; border: 1px solid #ddd; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-left: 0 !important; }
.notice-section .tabs-menu .nav-item a{border-radius: 0; padding: 12px 12px;}
.notice-section .tabs-menu .nav-item a:hover{background: #fff; color: #e21d19;}
.notice-section .tabs-menu .nav-item.active{border: 1px solid #e21d19;}
.notice-section .tabs-menu .nav-item.active a{background: #fff; color: #e21d19;}

.tabs_faq .nav-tab{border-top: 2px solid #333; border-bottom: 2px solid #333; padding: 10px 0;}
.tabs_faq .nav-tab li{text-align: left; padding:5px 10px;}
.tabs_faq .nav-tab li>a{color:#333; text-decoration: none;}
.tabs_faq .nav-tab li>a:hover{color: #e21d19;}
.tabs_faq .nav-tab li.active>a{background: #fff; color: #e21d19;}

.contact-content{display: block;}
.m_contact-content{display: none;}
.contact-content{padding:20px 10px; text-align: left;}
.contact-content .contact-info{font-size: 14px; font-size: 1.4rem; line-height: 1.6;}
.contact-content .contact-info .content_title{font-size: 14px; font-size: 1.4rem; font-weight: 500; padding-bottom: 10px;}
.contact-content .btn_chat{display: block; position: relative; max-width: 230px; margin-top: 10px;}

.table-style{border-top: 2px solid #333; border-bottom: 1px solid #ddd;}
.table-style>thead>tr>th{color: #333; text-align: center; border-bottom: 1px solid #ddd; padding: 10px 10px;}
.table-style>tbody>tr>th{color: #333; text-align: center; vertical-align: middle; padding: 10px 10px;}
.table-style>tbody>tr>td{color: #333; text-align: left; padding: 10px 10px;}

.contact-section .left_text{text-align: left;}
.contact-section .left_text .header_title .sub-text{font-size:18px; font-size:1.8rem; font-weight:400; padding:10px 0;}
.contact-section .left_text .content-text{padding:40px 0;}
.contact-section .left_text .content-text .contact-info{font-size: 16px; font-size: 1.6rem; line-height: 1.8;}
.contact-section .btn{padding:12px 60px !important}
.contact-section .contact-form .form-control{height: auto; font-size:13px; font-size:1.3rem; color: #333; border:1px solid #ddd; border-radius: 0; padding:13px 13px; box-shadow: none;}

/* Video List */
.video-list_area{margin-top:60px; margin-bottom:60px;}
.video-list{display: block;position: relative; margin: 0; margin-right: -10px; margin-left: -10px; padding: 0; overflow: hidden;}
.video-list .video-items{position: relative; padding-right: 10px; padding-left: 10px; overflow: hidden;}
.video-list .video-items:last-child{padding-right: 10px;}
.video-items{height: auto; margin-bottom: 15px;}
.video-items .video-item{display: inline-block; position: relative; width: 100%; vertical-align: top; letter-spacing: 0;}
.video-items .video-item .list-thumbnail{position: relative; float: left; width: 100%;}
.video-items .video-item .list-video-info{display: inline-block; position: relative; overflow: hidden; width: 100%; margin-top: 0;}
.video-items .video-item .list-video-info .video-title{display: block; height: 3.2rem; overflow: hidden; color: #444; font-size:13px; font-size:1.3rem; font-weight: 400; line-height: 1.6rem; text-align: left; margin: 10px 0;}
.video-items .video-item .list-video-info .video-metadata{margin: 5px 0 5px;}
/* video-thumbnail */
.thumbnail-img{display: inline-block; background: #fff;}
.video-thumbnail{display: block; position: relative; height: 0; padding: 0; overflow: hidden; background: #000; text-align: center;}
.video-thumbnail-16by9{padding-bottom: 56.25%;}
.video-thumbnail-4by3{padding-bottom: 75%;}
.video-thumbnail a, .thumbnail-video{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: #000;}
.video-thumbnail .thumbnail-item{display: initial; max-width: 100%; height: 100%;}
.play-time{position: absolute; z-index: 1; right: 5px; bottom: 5px; margin: 0 !important; padding: 0 4px; background: #000; color: #fff; font-size: 11px; opacity: 0.80; filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity: 0.80;}
/* footer */
.footer-section{text-align: center; border-top: 1px solid #f5f5f5; padding:20px 10px;}
.footer-section .policy-info a, .footer-section .office-info, .footer-section .copyright{color:#666; font-size:11px; font-size:1.1rem; line-height: 1.6;}
.footer-section .policy-info{padding-bottom: 8px;}
.footer-section .copyright{position: relative; padding-top:15px;}

.slide-indicators{position: relative; left: 0; margin:5px 0;}
.slick-dots{bottom:0 !important;}
.slick-dots li{margin:0 !important;}
.slick-dots li button:before{color:#333;}
.slick-dots li.slick-active button:before{color:#333;}

.back-to-top{display: none; }
.back-to-top a{color:transparent;}

/* popup content Style (img_text) */
.popup-content .con_style_float{position: relative; text-align: left;}
.popup-content .con_style_float .img_left{float: left; margin-bottom: 10px;}
.popup-content .con_style_float .img_left img{max-width: 230px;}
.popup-content .con_style_float .text_right{position: relative; padding-left: 250px;}

/* floatBanner */
.float-box{position:fixed; width:108px; height: 140px; bottom:50px; right:20px; background-color:#d52719; border-radius: 10px; z-index: 100;}
.float-banner{position: relative; width:120px; height: 140px; text-align: center; cursor: pointer;}
.float-banner:hover{text-decoration: none;}
.banner-info{position: relative; width:80px; height: 80px; background: #fff; border-radius: 10px; margin: 10px auto; padding: 6px 5px;}
.banner-info .img-clipdown{width: 60px; margin: 0 auto;}
.banner-info .info-text{font-size: 14px; font-weight: 500; text-align: center; color: #333; padding:6px 0; text-decoration:none;}
.icon-download{position: relative; overflow: hidden;}
.icon-download .arrow span{color: #fff; text-decoration: none; padding-top: 0;}
.arrow {text-align: center; margin-top: 10px;}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* 하단 중앙영역 다운로드 버튼 노출 */
.btn_download_bottom{position: fixed; width: 100%; left: 0; bottom: 0; text-align: center; z-index: 9999;}
.btn_download_bottom{bottom: -100px;  transition:bottom .5s;}
.btn_download_bottom.show{bottom: 40px;}
.btn_download_bottom.fixed{position: relative; bottom: 50px !important;}
.btn_download_bottom a{box-shadow: 0px 2px 5px rgb(26 0 35 / 5%), 0px 10px 10px rgb(0 0 0 / 15%); transition: all .2s ease-in-out;}
.btn_download_bottom .icon-download{float: left;}
.btn_download_bottom .info-text{display: inline-block; color:#fff; font-size: 26px; font-size: 2.6rem; font-weight: 500; line-height: 1.5; padding-top: 6px; padding-left: 10px;}
.btn-grad{background-image: linear-gradient(to right, #e21d19 0%, #F21914  51%, #e21d19  100%); background-color: #e21d19; border-color:transparent; color:#fff;}
.btn-grad {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}
.btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
.btn-grad:active{background-color: #e21d19;}

/* Media Query */
@media screen and (max-width: 767px){
    .nav>li.menu_download{display: none;}
    .left_img, .right_img{width:70%; margin:0 auto;}
    .m-btn-box .btn-group .btn{display: block; float: none; width:240px; margin: 20px 0;}
    .m-btn-box{display: block; margin: 20px 0;}
    .header_title{font-size: 30px; font-size: 3.0rem;}
    .content-text{padding-bottom: 20px;}
    .content_info{margin: 40px 0; text-align: center;}
    .content_info .col-2{width:100%;}
    .intro-section, .uselist-section, .services-section, .contact-section, .notice-section{padding-top:75px;}
    .intro-section {height:830px;}
    .intro-section .bg_01{width:70%; height: 830px; right: 0;}
    .intro-section .header_title{font-size: 40px; font-size: 4.0rem;}
    .intro-section .m_img_main_style, .intro-section .m_main_img{display: block;}
    .intro-section .m_img_main_style{width: 80% ; margin: 0 auto;}
    .intro-section .m_main_img{margin: 0px auto;}
    .intro-section .img_main_style, .intro-section .btn-box{display: none;}
    .intro-section .header_title, .intro-section .btn-box{text-align: center; padding-left: 0;}
    .intro-section .left_text{padding: 30px 0;}

    .services-section .contents-pc, .services-section .contents-mobile{margin-top:30px; margin-bottom: 70px;}
    .services-section .bg_02{top: 140%; left: -1170px;}
    .services-section .left_text, .services-section .right_text{text-align:center; padding: 0;}
    .services-section .left_text{margin: 20px 0 0;}
    .services-section .contents-mobile .left_img{float: initial;}
    .services-section .m-btn-box{display: none;}
    .services-section .btn-group .img-fluid{max-width: 100%;}
    .contact-section{height: 750px;}
    .uselist-section{height: 980px;}
    .uselist-section .col-4{width: 50%;}
    .uselist-section .item_box{max-width: 280px;}
    .uselist-section .content_info{margin: 20px 0;}
    .notice-section{padding-bottom: 20px;}
    .notice-section .tabs-menu{margin:60px 0 0;}
    .tabs_faq .nav-tab{border-bottom:0; padding: 0;}
    .tabs_faq .nav-tab li{float:left; width:33.33%; text-align: center; margin-top: 0; padding: 10px 10px;}
    .search-bar .search-form{width: 100%;}
    .contact-content{display: none;}
    .m_contact-content{display:block;}
    .m_contact-content{background:#f7f7f7; padding:20px 20px; text-align: left;}
    .m_contact-content .contact-info{font-size: 14px; font-size: 1.4rem; line-height: 1.6;}
    .m_contact-content .contact-info .content_title{font-size: 14px; font-size: 1.4rem; font-weight: 500; padding-bottom: 10px;}
    .m_contact-content .btn_chat{display: block; position: relative; max-width: 230px; margin-top: 10px;}

    /* Back To Top */
    .back-to-top {display: none; position: fixed; right: 20px; bottom: 100px; text-decoration: none; padding: 0; z-index: 999;}
    .back-to-top a{display: block; width: 40px; height: 40px; background: #e21d19; color: #fff; text-align: center; text-transform: uppercase; text-decoration: none; border-radius: 50%; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
    .back-to-top span{display: block; position: relative; top: 4px;}
    .float-box{display: none !important;}
    .btn-win{display: none;}
    /* 모바일에서는 버튼 감추기 */
    .btn_download_bottom{display: none !important;}
    .popupDownlad.show{display: none !important;}

    /* 모바일 일때만 고정 다운로드 버튼 노출 */
    .m_download_bottom{position: fixed; width: 100%; left: 0; background: #fff; text-align: center; padding:20px 0; z-index: 999;}
    .m_download_bottom{bottom: -100px;}
    .m_download_bottom.show{display:block; bottom: 0;}
    .m_download_bottom.fixed{position: relative;}
    .m_download_bottom .m_btn{display: inline-block; position: relative; width: 40%;}
    .m_download_bottom .btn-box{display:block;}
    /* 모바일 일때만 고정 다운로드 버튼 노출 - 클립다운 라이트 다운로드 팝업 220705 */
    .m_download_bottom .m_btn{display: inline-block; position: relative; width: 100%;}
    @keyframes sliding{
        0%{
            bottom:300px;
        }
        100%{
            bottom:40px;
        }
    }
    .m_download_bottom a{box-shadow: 0px 2px 5px rgb(26 0 35 / 5%), 0px 10px 10px rgb(0 0 0 / 15%); transition: all .2s ease-in-out;}
    .m_download_bottom .btn-grad{padding:10px 40px;}
    .m_download_bottom .icon-download{float: left;}
    .m_download_bottom .info-text{display: inline-block; color:#fff; font-size: 26px; font-size: 2.6rem; font-weight: 500; line-height: 1.5; padding-top: 6px; padding-left: 10px;}
    .popup_download .m-btn-box.download_banner{margin:0;}
    .m-btn-box.download_banner .list_style{position: relative; overflow: hidden; width: 90%; margin: 0 auto; padding: 0 10px;}
    .m-btn-box.download_banner .list_style .img-list{display: flex; justify-content: center; align-items: center; border: 1px solid #eee; border-radius: 10px; margin-bottom: 15px; padding: 10px 10px; background: rgb(255 255 255 / 95%);}
    .m-btn-box.download_banner .img-list .list_text{position: relative; width: 60%; vertical-align: middle; font-size: 18px; font-size: 1.8rem; font-weight: 500; line-height: 1.6; text-align: left; padding: 0 12px;}
    .m-btn-box.download_banner .img-list .list_text .sub-text{font-size: 16px; font-size: 1.6rem;}
    .m-btn-box.download_banner .img-list .list_img{display: block; position: relative;  width: 60%; text-align: right;}
    .m-btn-box.download_banner .img-list .list_img .img_banner{display: inline-block; width: 100%;}
    .m-btn-box.download_banner .list_style.center{padding: 0;}
    .m-btn-box.download_banner .list_style.center .img-list{display: flex; flex-direction: column;}
    .m-btn-box.download_banner .list_style.center .img-list .list_text{width: 100%; text-align: center; padding: 10px 0;}
    .m-btn-box.download_banner .list_style.center .img-list .list_img{padding-bottom: 10px;}
    .popup_download .m-btn-box.download_banner .img-list .list_img{width: 50%; text-align: center;}
    .popup_download .popup-body{max-height: 100%;}

    /* 클립다운 라이트 텍스트 링크 추가 220705 */
    .mobile_intro-section{display: block;}
    .mobile_intro-section, .mobile_intro-section .bg_01{height: 950px;}
    .mobile_intro-section .btn_link{display: inline-block; overflow: hidden; margin: 20px 0; padding: 6px 10px 4px 10px; background: #fff; border: 1px solid #e21d19; border-radius: 5px; transition: all .2s ease-in;;}
    .mobile_intro-section .btn_link:focus, .mobile_intro-section .btn_link:hover{background: #fff; border: 1px solid #e21d19; border-radius: 5px;}
    .mobile_intro-section .btn_link .link-text{font-size:18px; font-size: 1.8rem; font-weight: 500; line-height: 2; color: #e21d19;}

    /* 버튼 스타일 변경 230823 */
    .mobile_intro-section .btn_box{position: relative; width: 100%; margin: 10px 0 20px;}
    .mobile_intro-section .btn_app {display: flex; align-items: center; justify-content: flex-start;}
    .mobile_intro-section .btn_app {background: #171717; border: 2px solid #333; border-radius: 10px; padding:10px 20px; margin: 0 auto;}
    .mobile_intro-section .btn_app .link_text{position: relative; top:0; color: #fff; font-size: 18px; font-size: 1.8rem; font-weight: 500; padding-left: 10px;}
    .mobile_intro-section .btn_app .icon_app{display: flex;  align-items: center;}
    .mobile_intro-section .btn_app .icon_app svg{width: 40px; height: 40px;}
    .mobile_intro-section .m-btn-box.style_03 .m_btn{display: block; width: 100%; max-width: 300px; margin: 15px 0;}
}

@media screen and (max-width: 480px){
    .header_title{font-size: 22px; font-size: 2.2rem;}
    .content_title{font-size: 18px; font-size: 1.8rem;}
    .content-text{font-size: 13px; font-size: 1.3rem;}
    .btn-lg{min-height: 48px !important; font-size: 18px !important;}
    .btn-md{min-height: 34px !important; font-size: 16px !important; line-height: 1.6; padding: 8px 12px !important;}
    .m-btn-box{margin: 20px 0;}
    .m-btn-box .m_btn{display: block; width: 70%; margin: 20px auto;}
    .left_img, .right_img{width:100%}
    .content_info{margin: 25px 0;}
    .slick-dotted.slick-slider{margin-bottom: 10px;}
    .intro-section, .intro-section .bg_01{height: 800px; padding-top: 60px;}
    .intro-section .bg_01{width:100%;}
    .intro-section .header_title{font-size: 30px; font-size: 3.0rem;}
    .intro-section .m_img_main_style{width:100%;}
    .uselist-section{height: 1400px;}
    .uselist-section .col-4{width: 100%;}
    .uselist-section .item_box{min-height: 240px; margin: 20px auto; box-shadow: -5px -5px 15px #fff, 5px 5px 15px #d7d7d7;}
    .uselist-section .content_info{margin: 25px 0;}
    .uselist-section .info-area .info-text{font-size: 14px; font-size: 1.4rem; font-weight: 500;}
    .uselist-section .info-area .info-text-s{font-size: 11px; font-size: 1.1rem;}
    .services-section .bg_02{top: 200%;}
    .services-section .left_img, .services-section .right_img{width: 90% !important;}
    .services-section .m-btn-box{margin-top: 10px;}
    .services-section .m-btn-box .btn-group a.btn{display:block; float: none; text-align:center; margin: 0; padding: 10px 0;}
    .services-section .btn-lg{min-height: 48px !important; font-size: 18px !important; padding: 16px 60px !important;}
    .search-bar .search-form .form-control{font-size: 14px; font-size: 1.4rem;}
    .contact-section .btn{padding: 8px 40px !important;}
    .popup-header .btn-area{position:absolute; top:0; right:10px; padding:20px 0;}
    .mobile_intro-section .btn_link{margin: 10px 0 20px 0;}
    .mobile_intro-section .btn_link .link-text{font-size: 16px; font-size: 1.6rem;}
    .m_download_bottom .info-text{font-size: 20px; font-size: 2rem; font-weight: 700;}
    .mobile_intro-section .btn_box{margin: 10px 0;}
    .mobile_intro-section .btn_app {padding:8px 10px; }
    .mobile_intro-section .btn_app .link_text{top:1px;font-size: 16px; font-size: 1.6rem;}
    .mobile_intro-section .btn_app .icon_app svg{width: 32px; height: 32px;}
    .mobile_intro-section .m-btn-box.style_03 .m_btn{max-width: 240px;}
}

@media screen and (max-width: 360px){
    .intro-section, .intro-section .bg_01{height: 700px;}
    .mobile_intro-section .m-btn-box.style_03 .m_btn{max-width: 200px;}
}

@media screen and (max-width: 320px){
    .intro-section .m-btn-box .btn-group .btn{width: 160px;}
    .services-section .m-btn-box .btn-group .img-fluid{width: 160px;}
    .m-btn-box.download_banner .img-list .list_text{font-size: 16px; font-size: 1.6rem;}
    .intro-section, .intro-section .bg_01{height: 640px;}
    .intro-section .header_title{font-size: 26px; font-size: 2.6rem;}
    .mobile_intro-section .m-btn-box.style_03 .m_btn{max-width: 160px;}
}

/* 고객센터 영역부터 플로팅 팝업 노출  */
/* .popupDownlad{display: block;} */
.popupDownlad{background: rgba(0, 0, 0, 0.75);
    position: fixed;
    display: none;
    z-index: 5000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;}
.popupDownlad > div {
    max-width: 720px;
    width: 90%;
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: #e21d19;
    z-index: 99999;
    text-align: center;
    border: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
}
/* .popupDownlad_sm > div{max-width: 600px;} */
.popup_downlad .popup-body{text-align: center;}
.popup_downlad .popup-content{background-color: #fff; border-radius: 10px;}
.popup_downlad .btn_download_popup .btn{overflow: unset;}
.popup_downlad .btn-area{position:absolute; top:10px; right:25px; padding:14px 0;}
.popup_downlad .btn-area .btn-close{display: inline-block; vertical-align: middle; background:transparent; width: 28px; height: 28px; padding:0;}
.popup_downlad .btn-area .btn-close:focus{outline:0;}
.popup_downlad .btn-area .btn-close .close{display: inline-block; position: relative; overflow: hidden; width: 28px; height: 28px; opacity: 1;}
.popup_downlad .btn-area .btn-close .close:before,
.popup_downlad .btn-area .btn-close .close:after{content: ''; position: absolute; width: 100%; height:2px; top:50%; right:0; background:#fff;}
.popup_downlad .btn-area .btn-close .close:before{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.popup_downlad .btn-area .btn-close .close:after{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
/* popup Style flex Row */
.con_style_row{display: flex; align-items: center; width: 100%; height: 100%; padding:0;}
.con_style_row .con_left{display: flex; align-items: center; flex-direction: column; width: 60%; height: 100%; overflow: hidden; background-color: #e21d19; padding: 20px;}
.con_style_row .con_right{display: flex; align-items: center; flex-direction: column; width: 40%; height: 100%; background-color: #fff; border-radius: 20px; margin:20px 40px 20px 0; padding: 60px 20px;}
.con_style_row .con_left .header_title{font-size: 2.6rem; font-weight: 400; color:#fff;}
.con_style_row .con_left .header_title ul{padding:20px 10px;}
.con_style_row .con_left .header_title ul li{font-size: 20px; font-weight: 300; line-height: 1.8;}
.con_style_row .box_icon{width: 5.2rem; height: 5.2rem; background-color: transparent; text-align: center; border-radius: 10px; margin-bottom: 20px;}
.con_style_row .box_icon .icon-download .arrow span{font-size: 48px; color:#e21d19;}
.con_style_row .info_clipdown{font-size: 1.8rem; line-height: 1.6; text-align: center; margin: 10px 0;}
.con_style_row .btn-grad{font-size: 1.8rem; padding: 10px 45px;}
.con_style_row .btn-area{top:10px; right:10px; padding: 0;}
.con_style_row .btn-area .btn-close{width: 20px; height: 20px;}
.con_style_row .btn-area .btn-close .close:before,
.con_style_row .btn-area .btn-close .close:after{background: #fff !important;}
.con_style_row .btn-area .btn-close .close{width: 20px; height: 20px;}

/* 211230 클립다운 홈페이지 브라우저별 런처파일 실행 안내팝업 작업 */
.popup_install{display: block; position: fixed; height: 100%; width: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.75); z-index: 5000; cursor: pointer;}
.popup_install img{max-width: 100%;}
.popup_install .popup-content{position: fixed; left: 0; bottom: 0; z-index: 5001;}
.popup_install .popup-content .install-info{display: inline-block; width: 100%; cursor: default; transform: translate(20px, -20px); -webkit-transform: translate(20px, -20px);}
.popup_install .popup-content .install-info.center{max-width: 300px; position: fixed; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 5001;}

/*
  * 20250226 클립다운 다운로드 페이지 UI 구조 및 스타일 변경 
  * 20220208 클립다운 홈페이지 다운로드 메뉴 설치 안내 페이지 
    * 다운로드 설치 안내 페이지 스타일

*/
.download_guide{position: relative; }
.download_guide .content_ani{display: inline-block; position: relative;}
.download_guide .inner{position: relative; max-width: 960px; margin: 0 auto;}
.download_guide .line_style{position:relative; left: 0; border-top: 1px solid #ddd;}
.download_guide mark{display: inline; background-color: #FFEF2E; }
.download_section{position: relative; overflow: hidden; width: 100%; text-align: center; padding: 60px 0;}
.download_section .contents{display: flex; flex-direction: column; align-items: center; width: 100%; padding: 20px 0;}
.download_section .content_header h1{font-size:32px; font-size: 3.2rem; font-weight: 400; line-height: 1.6; padding-bottom: 20px; }
.download_section .content_header .content_text{font-size:18px; font-size: 1.8rem; font-weight: 300; }
.download_section .img_box{display: flex; justify-content: center; position: relative; width: 100%;}
.download_section .img_box svg{max-width: 100%; height: auto; -ms-interpolation-mode:bicubic;}
.download_guide .section_top{top:60px;}
.section_top .content_header h1{padding-bottom: 40px;}
.section_top .content_header .content_text{color: #E41D19; margin-bottom: 60px;}
.section_top .img_icon{position: relative; width: 5%; min-width: 48px; text-align: center; margin-bottom: 40px;}
.section_browser{height: 520px; background-color: #272936;}
.section_browser .content_header h1{color: #fff; }
.section_browser .content_header .content_text{color: #fff; font-weight: 300;}
.section_browser .img_box .content_ani{position: absolute; width: 10%;}
.section_browser .img_browser{position: relative; width: 70%; text-align: center; margin: 0 auto; padding-top: 40px;}
.section_browser .ani_sate{display: flex; position: absolute; top: 12%; right: 10%;}
.section_browser .ani_click{width: 150px;}
.section_install-info {background: #f2f5f9;}
.section_install-info .content_header{padding-bottom: 40px;}
.section_install-info .content_header .content_text{padding-bottom:0;}
.section_install-info .item_guide{display: flex; flex-direction: row; justify-content: space-between; position: relative; width: 100%; padding: 20px 0;}
.section_install-info .col_item{position: relative; width: 100%; padding: 0 10px;}
.section_install-info .col-img{max-width: 450px;}
.section_install-info .col-img .ani_cursor{display: flex; position: absolute; bottom: -3.5%; right: 20%;}
.section_install-info .col-img .ani_cursor.point1{bottom: 4.5%; left: 30%;}
.section_install-info .item_guide .item_use{display: flex; align-items: normal;}
.section_install-info .item_guide .num{position: relative; left:-1px;  font-size: 18px; font-size: 1.8rem; letter-spacing: -1px;}
.section_install-info .item_guide .text_info{position: relative; top:2px; font-size: 18px; font-size: 1.8rem; font-weight: 300; line-height: 1.3; text-align: left; padding-top: 8px; padding-left: 10px;}
.section_install-info .item_guide .text-guide{font-size: 13px; font-size: 1.3rem; line-height: 1.4; color: #888; padding-top: 5px;}
.section_install-info .bottom{padding: 100px 0 60px 0;}

/* Media Query */
/* 태블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
  .section_browser{height: 450px;}
  .section_browser .ani_sate{top: 8.5%; right: 5%;} 
} 

@media screen and (max-width: 767px) {
  .download_section{padding: 40px 0;}
  .download_section .content_header h1{font-size: 24px; font-size: 2.4rem;}
  .download_section .content_header .content_text{font-size: 16px; font-size: 1.6rem;}
  .section_browser{height: 360px;}
  .section_browser .ani_sate{top: 8.5%; right: 5%;}
  .section_install-info .content_header{padding-bottom: 20px;}
  .section_install-info .item_guide{flex-direction: column; justify-content: center; align-items: center;}
  .section_install-info .item_guide .item_use{justify-content: center;}
  .section_install-info .col-img{max-width: 360px;}
  .section_install-info .item_guide .num{font-size: 14px; font-size: 1.4rem;}
  .section_install-info .item_guide .text_info{font-size: 14px; font-size: 1.4rem; text-align: center; padding: 10px 0;}
  .section_install-info .item_guide .text-guide{font-size: 11px; font-size: 1.1rem;}

}

.popup_install .popup-content .install-info.center{max-width: 300px; position: fixed; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 5001;}

/* 
    * 클립다운 홈페이지 리뉴얼 
    * 2024-06-20
*/

.btn-lg{min-height: 62px !important; padding: 13px 50px !important; font-size: 2.4rem !important;}
.btn_group{display: inline-block; position: relative; vertical-align: middle;}
.contents_pc{display:block;}
.contents_mobile{display: none;}

.section_intro{background: #272936; height: 720px; overflow: hidden; padding-top: 120px;}
.section_intro .content_header{position: relative; text-align: center;}
.section_intro .sub_title{font-size: 3rem; color: #fff;}
.section_intro .header_title{color: #fff; text-align: center; font-size: 3.6rem; line-height: 2; padding: 0;}
.section_intro .btn_box{text-align: center; padding: 30px 0 20px; margin: 0;}
.section_intro .content_box{width: 56%; margin: 0 auto; padding-top: 15px;}
.section_intro .content_box{}

.section_uselist{position: relative; background: #f5f5f5; text-align: center; padding: 80px 0;}
.section_uselist .content_header{margin: 20px 0;}
.section_uselist .contents{margin: 30px 0;}
.section_uselist .item_box{max-width:250px; min-height: 280px; background: #f5f5f5; box-shadow: -10px -10px 30px #fff, 10px 10px 30px #d7d7d7; text-align: center; border-radius: 30px; margin: 40px auto; padding: 20px 10px;}
.section_uselist .item_box .item_title{font-size: 18px; font-size: 1.8rem; font-weight: 500; padding: 20px 0;}
.section_uselist .item_box .item_description{line-height: 1.8;}
.section_uselist .info_area{padding: 30px 0 0;}
.section_uselist .info_area .info_text{color: #666; font-size: 14px; font-size: 1.4rem; font-weight:500; margin-bottom:10px;}
.section_uselist .info_area .info_text_s{font-size: 12px; font-size: 1.2rem; font-weight: 400; padding: 5px 0;}

.section_services{position: relative; background: #fff; padding: 80px 0;}
.section_services .contents{}
.section_services .content_header{text-align: center; padding: 20px 0;}
.section_services .content_service{padding: 20px 0;}
.content_service.content_download{margin-bottom: 160px;}

.content_service .tabs {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    max-width: 1024px;
    min-width: 920px;
    margin: 0 auto;
    padding-top: 40px;
    height: auto;
    overflow: hidden;
}
.content_service ul.accordion {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: top;
    width: 32%;
}
.content_service ul.accordion li a {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #333;
    border-top: solid 1px #ddd;
    padding: 20px 10px;
    z-index: 1;
    opacity: .5;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.content_service ul.accordion li a:hover{
    opacity: 1;
}
.content_service ul.accordion li:nth-child(1) a {
    border-top: none;
}
.content_service ul.accordion li a.active {
    opacity: 1;
}
.content_service .tag {
    position: relative;
    width: 100%;
}
.content_service .tag span.menu_title {
    display: inline-block;
    position: relative;
    top: 2px;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    vertical-align: middle;
    color: #666;
}
.content_service ul.accordion li a.active .tag span.menu_title{
    color: #e21d19;
}
.content_service .addon {
    position: relative;
    width: 100%;
    font-size: 14px;
    font-size: 1.4rem;
    color: #333;
    padding: 0 10px 20px;
    opacity: 0;
}
.content_service .addon.fadein {
    opacity: 1;
}
.content_service .addon .description{margin-bottom: 10px;}
.content_service .addon .guide_text{font-size: 12px; font-size: 1.2rem; line-height: 1.4; color: #888; padding-top: 5px;}
.content_service .tab_content {
    position: relative;
    width: 65%;
    height: 362px;
    background: #fff;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    border-color: transparent;
    border-radius: 13px 0 0 0;
    overflow: hidden;
}
#tabs-1, #tabs-2, #tabs-3, #tabs-4 {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #fff;
}
.section_services .btn-box{margin: 80px 0 0; text-align: center;}

.section_notion{position: relative; text-align: center; padding: 80px 0;}
.section_notion .tabs-menu{margin: 60px 0;}
.section_notion .tabs-menu .nav{width: 100%; margin-bottom: 60px;}
.section_notion .tabs-menu .nav-item{overflow: hidden; width: 50%; background: #fff; border: 1px solid #ddd; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-left: 0 !important; }
.section_notion .tabs-menu .nav-item a{border-radius: 0; padding: 12px 12px;}
.section_notion .tabs-menu .nav-item a:hover{background: #fff; color: #e21d19;}
.section_notion .tabs-menu .nav-item.active{border: 1px solid #e21d19;}
.section_notion .tabs-menu .nav-item.active a{background: #fff; color: #e21d19;}
/* popupDownlad 스타일 추가 */
.popupDownlad_sm > div{max-width: 480px; background: #fff;}
.con_style_simple{position: relative; width: 100%; border: 1px solid #e21d19;}
.con_style_simple .popup-content{text-align: center;}
.con_style_simple .content_box{display: flex; justify-content: center; align-items: center; position: relative; margin: 20px 0;}
.con_style_simple .content_box .img_box{position: relative; width: 20%; margin-right: 20px;}
.con_style_simple .header_title{font-size: 32px; font-size: 3.2rem; text-align: left;}
.con_style_simple .header_title .text_sub{font-size: 28px; font-size: 2.8rem;}
.con_style_simple .btn-grad{font-size: 24px; font-size: 2.4rem; width: 78%; padding: 13px 45px 10px;}
.con_style_simple .btn-area{top:10px; right:10px; padding: 0;}
.con_style_simple .btn-area .btn-close{width: 20px; height: 20px;}
.con_style_simple .btn-area .btn-close .close:before,
.con_style_simple .btn-area .btn-close .close:after{background: #ddd;}
.con_style_simple .btn-area .btn-close:hover .close:before,
.con_style_simple .btn-area .btn-close:hover .close:after{background: #666;}
.con_style_simple .btn-area .btn-close .close{width: 20px; height: 20px;}
/* 20240627 서비스 리뉴얼 공지 팝업 */
.popupNotice > div{max-width: 480px; background: #131745;}
.popupNotice .popup-body{padding: 0;}
/* 
    * 클립다운 홈페이지 모바일 수정작업
    * 2024-06-21
*/
@media (min-width: 768px) and (max-width: 1080px){
    .section_intro{height: 620px;}
}
@media screen and (max-width: 767px){
    .contents_pc{display: none;}
    .contents_mobile{display: block;}
    .section_intro_mobile{background: #fff; height: auto; padding-top: 100px; padding-bottom: 60px;}
    .section_intro .sub_title{font-size: 2.4rem; color: #333; letter-spacing: -.1rem; }
    .section_intro .content_header{padding-bottom: 30px;}
    .section_intro .header_title{color: #333; text-align: center; font-size: 5vw; line-height: 1.6; padding: 0;}
    .section_intro .btn_box{display: none;}
    .section_intro .btn_group{display: block; text-align: center;}
    .section_intro_mobile .m_main_img{position: relative; text-align: center;}
    .section_intro_mobile .m-btn-box.style_03 .m_btn{display: block; position: relative; width: 45%;  min-width: 210px; padding: 8px 0; margin: 0 auto;}
    .section_uselist .col-4{width: 50%;}
    .section_uselist .item_box{min-height: auto; box-shadow: -5px -5px 15px #fff, 5px 5px 15px #d7d7d7;}
    .section_uselist .content_info{margin: 20px 0;}
    .content_service .tabs{flex-direction: column; min-width: 100%;}
    .content_service ul.accordion{display: flex; justify-content: center; width: 100%; margin-bottom: 20px;}
    .content_service ul.accordion li{position: relative; width: 100%;}
    .content_service ul.accordion li:nth-child(1) a{border-top: solid 1px #ddd;}
    .content_service ul.accordion li a{border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; padding: 10px 5px;}
    .content_service ul.accordion li a.active{border-top: solid 1px #e21d19; border-bottom: solid 1px #e21d19;}
    .content_service .tag{text-align: center;}
    .content_service .tag span.menu_title{font-size: 14px; font-size: 1.4rem; font-weight: 500; letter-spacing: -1px;}
    .content_service .addon{display: none !important;}
    .content_service .tab_content{width: 100%; height: 100%;}
    .section_notion{padding-bottom: 20px;}
    .popupNotice .popup-body{max-height: 100%;}

}
@media screen and (max-width: 480px){
    .section_intro_mobile{padding-top: 80px; padding-bottom: 30px;}
    .section_intro .header_title{font-size: 3.2rem;}
    .section_uselist{padding: 60px 0 40px 0;}
    .section_uselist .col-4{width: 100%;}
    .section_uselist .item_box{margin: 20px auto; }
    .section_services{padding: 40px 0;}
    .content_service .tabs{padding-top: 0;}
    .content_service.content_download{margin-bottom: 60px;}
    .section_services .content_service{padding: 10px 0;}
    .content_service ul.accordion{height: 52px; justify-content: flex-start; white-space: nowrap; overflow-x: auto; scrollbar-width: none;  -ms-overflow-style: none; -webkit-overflow-scrolling: touch;}
    .content_service ul.accordion li{display: inline-block;}
    .content_service ul.accordion li a{padding: 15px 8px;}
    .section_notion{padding: 40px 0;}
    .section_notion .tabs-menu{margin:40px 0 0;}
    .section_notion .tabs-menu .nav{margin-bottom: 30px;}
}
@media screen and (max-width: 360px){
    .section_intro .header_title{font-size: 2.8rem; line-height: 1.4;}
    .m-btn-box{width: 80%; margin: 20px auto;}
    .popup_download .m-btn-box.download_banner{width: 100%;}
    .section_uselist .content_header{margin: 10px 0;}

}
@media screen and (max-width: 320px){
    .section_uselist .item_box{max-width: 240px;}
}