@charset "utf-8";

/************************************** import **************************************/
/* common css */
@import url("../common/common.css");

/* component css */
@import url("../common/component.css");

/* layout css */
@import url("../common/layout.css");

/* slick slide css */
@import url("../slick/slick.css");


/************************************** main **************************************/

/* banner text */
.banner-text-wrap .banner-text .main-tit { font-size: 3.2rem; font-weight: 400; padding-top:27px; }
.banner-text-wrap .banner-text .main-tit .bold { display: block; font-weight: 600; padding-top:20px; font-size: 4rem;}
.banner-text-wrap .search-ui-main { width:640px; margin: 0 auto; padding-top:60px;}
.banner-text-wrap .banner-text .sub-tit br { display: none; }
.banner-text-wrap .banner-text .main-tit br { display: none; }

/* banner visual */
.banner-visual-wrap { padding-top:60px; }
.banner-visual-wrap .slide-area .banner-list .box-wrap { opacity: .5; transform: scale(0.85); transition: transform .2s;}
.banner-visual-wrap .slide-area .banner-list .box-wrap.slick-center { opacity: 1; transform: scale(1); }
.banner-visual-wrap .slide-area .banner-list .box-wrap img { width:100%; }
.banner-visual-wrap .slick-prev { top:-25px; left: calc(50% - 315px); }
.banner-visual-wrap .slick-next { top:-25px; right: calc(50% - 315px); }

@media (max-width: 768px) {
    .banner-text-wrap .search-ui-main { width:100%;}
	.banner-text-wrap .banner-text .main-tit .bold { font-size: 3.2rem; padding-top: 10px; }
    .banner-visual-wrap .slick-prev { left: 30px; }
    .banner-visual-wrap .slick-next { right: 30px; }
}
@media (max-width: 500px) {
    .banner-text-wrap .search-ui-main { padding-top: 40px; }
	.banner-text-wrap .banner-text .main-tit { line-height:1.5; }
    .banner-text-wrap .banner-text .sub-tit { line-height:1.6; }
    .banner-text-wrap .banner-text .sub-tit br { display: block; }
    .banner-text-wrap .banner-text .main-tit br { display: block; }
	.banner-text-wrap .banner-text .main-tit .bold { font-size: 2.5rem; padding-top: 5px; }
    .banner-visual-wrap .slick-prev { left: 20px; }
    .banner-visual-wrap .slick-next { right: 20px; }
}

/* 소개 */
.sec-info-area { padding: 160px 180px 0; }
.sec-info-area .info-title { text-align: center; font-size: 2.8rem; font-weight: 600; line-height: 1.5; padding-bottom: 60px; }
.sec-info-area .group:not(:last-child) { margin-bottom:30px; }
.sec-info-area .group .left-box { float: left; width:calc(50% - 15px); }
.sec-info-area .group .right-box { float: right; width:calc(50% - 15px); }
.sec-info-area .group .img-box { position: relative; height:0; padding-bottom:31%; overflow: hidden; }
.sec-info-area .group .img-box img { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:100%; }
.sec-info-area .group .txt-box { padding-top:10px; position: relative; }
.sec-info-area .group .txt-box .tit { font-size: 2.2rem; font-weight: 600; line-height: 1.6; padding-bottom: 20px; }
.sec-info-area .group .txt-box .txt { font-size: 1.7rem; font-weight: 300; line-height: 1.6; }
@media (max-width: 1200px) {
    .sec-info-area { padding: 110px 90px 0; }
}
@media (max-width: 768px) {
    .sec-info-area { padding: 110px 30px 0; }
    .sec-info-area .info-title { font-size: 2.3rem; padding-bottom:30px; }
    .sec-info-area .group .txt-box { padding-top:0}
    .sec-info-area .group .txt-box .tit { font-size:1.5rem; padding-bottom:10px; }
    .sec-info-area .group .txt-box .txt { font-size:1.3rem; }
    .sec-info-area .group .left-box { width:calc(50% - 7px); }
    .sec-info-area .group .right-box { width:calc(50% - 7px); }
    .sec-info-area .group .txt-box .txt br,
    .sec-info-area .group .txt-box .tit br { display:none; }
}
@media (max-width: 500px) {
    .sec-info-area { padding: 90px 20px 0; }
    .sec-info-area .group .txt-box .tit { font-size:1.4rem; padding-bottom:5px; }
    .sec-info-area .group .txt-box .txt { font-size:1.3rem; }
}


/* 베스트 대시보드 */
.best-dashboard-area { padding-top:160px; }
.best-dashboard-area .slide-list { height: 100%; overflow: visible;}
.best-dashboard-area .slide-list .slick-track { height:100%;}
.best-dashboard-area .slide-area .best-list .box-wrap { opacity: .5; transition: opacity .2s; }
.best-dashboard-area .slide-area .best-list .box-wrap.slick-active { opacity: 1; }
.best-dashboard-area .slick-prev { bottom: -30px; left: 0; }
.best-dashboard-area .slick-next { bottom: -30px; right: 0; }

.best-list .box-wrap .box { padding:20px; border-radius: 0 0 30px 0; margin: 0 15px 30px; background:#eff1f8; }
.best-list .box-wrap .box .img-box { position: relative; height:0; padding-bottom: 54%; overflow: hidden; border: 2px solid #fff;}
.best-list .box-wrap .box .img-box img { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width:100%;}
.best-list .box-wrap .box .txt-box { padding: 30px 0; text-align: center; }
.best-list .box-wrap .box .txt-box .tit { font-size: 1.9rem; font-weight: 900; color: #050c3d; text-overflow: ellipsis; overflow: hidden; width:100%; white-space: nowrap;}
.best-list .box-wrap .box .txt-box .desc { font-size: 1.4rem; font-weight: 500; color: #84879e; padding-top: 10px; text-overflow: ellipsis; overflow: hidden; width:100%; white-space: nowrap;}
.best-list .box-wrap .box .btn-wrap button.more-btn { position: relative; padding: 0 30px; font-size: 1.3rem; font-weight: 600; height:30px; transition: padding .2s;}
.best-list .box-wrap .box .btn-wrap button.more-btn .material-icons { font-size: 16px; position: absolute; top: 7px; right:20px; opacity: 0; transition: opacity .2s, right .2s;}
.best-list .box-wrap .box .btn-wrap button.more-btn:hover { padding: 0 40px 0 30px; }
.best-list .box-wrap .box .btn-wrap button.more-btn:hover .material-icons { right:20px; opacity: 1;}
.best-dashboard-area .best-title { font-size: 3rem; font-weight: 900; color: #000843; text-align: center; padding-bottom:40px;}
.best-dashboard-area .best-title img { width:35px; display: block; margin: 0 auto; padding-bottom:10px; }
.best-dashboard-area .view-all-btn button { position: relative; padding: 0 30px; height:35px; box-shadow:none; transition: box-shadow .2s, padding .2s;}
.best-dashboard-area .view-all-btn button .material-icons { font-size: 16px; position: absolute; top: 8px; right:20px; opacity: 0; transition: opacity .2s, right .2s; }
.best-dashboard-area .view-all-btn button:hover { padding: 0 40px 0 30px; box-shadow: 0 0 0 4px rgba(100,46,255,0.19); }
.best-dashboard-area .view-all-btn button:hover .material-icons { right:20px; opacity: 1;}

.best-dashboard-area .nav-category { position: relative; width:100%; overflow: hidden; margin-bottom: 30px; background:#f2f4fd; padding:10px 40px; border-radius: 50px; }
.best-dashboard-area .nav-category ul { width: 100%; white-space: nowrap; }
.best-dashboard-area .nav-category ul li { display: inline-block; }
.best-dashboard-area .nav-category ul li a { padding:10px 30px; border-radius: 30px; display: block; font-size: 1.4rem; color:#9499b3; font-weight:600;  transition: background .15s, color .2s;}
.best-dashboard-area .nav-category ul li:hover a { background:#fff; color:#280553; box-shadow: 1px 1px 4px rgba(0,0,0,0.1); }
.best-dashboard-area .nav-category .nav-controls { 
    position: absolute; top:0; height:100%; padding: 0 15px; color:#9790ad; cursor: pointer; z-index: 1;
    background: -moz-linear-gradient(left,  rgba(222,226,239,0) 0%, rgba(222,226,239,0.24) 24%, rgba(239,241,248,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(222,226,239,0) 0%,rgba(222,226,239,0.24) 24%,rgba(239,241,248,1) 100%);
    background: linear-gradient(to right,  rgba(222,226,239,0) 0%,rgba(222,226,239,0.24) 24%,rgba(239,241,248,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dee2ef', endColorstr='#eff1f8',GradientType=1 );
}
.best-dashboard-area .nav-category .nav-controls:hover { 
    background: -moz-linear-gradient(left,  rgba(222,226,239,0) 0%, rgba(222,226,239,0.24) 24%, rgba(222,226,239,1) 100%); 
    background: -webkit-linear-gradient(left,  rgba(222,226,239,0) 0%,rgba(222,226,239,0.24) 24%,rgba(222,226,239,1) 100%);
    background: linear-gradient(to right,  rgba(222,226,239,0) 0%,rgba(222,226,239,0.24) 24%,rgba(222,226,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dee2ef', endColorstr='#dee2ef',GradientType=1 );
}
.best-dashboard-area .nav-category .nav-controls .material-icons { top: 18px; }
.best-dashboard-area .nav-category .nav-controls:hover .material-icons { color: #543c9a; }
.best-dashboard-area .nav-category .nav-controls.next { right:0; }
.best-dashboard-area .nav-category .nav-controls.prev { left:0; transform: rotate(180deg); }
.best-dashboard-area .nav-category .nav-controls.prev .material-icons { top: 18px; }

@media (max-width:768px) {
    .best-dashboard-area { padding-top: 110px; }
    .best-dashboard-area .best-title { font-size: 2.5rem; padding-bottom:30px; }
    .best-dashboard-area .best-title img { width:28px; padding-bottom: 5px; }
    .best-dashboard-area .nav-category { margin-bottom: 20px; }
    .best-dashboard-area .nav-category ul li a { padding:10px 20px; }
    .best-list .box-wrap .box { margin: 0 5px 10px; padding: 10px; }
    .best-list .box-wrap .box .txt-box { padding: 10px 5px; }
    .best-list .box-wrap .box .txt-box .tit { font-size: 1.5rem; }
    .best-list .box-wrap .box .txt-box .desc { font-size: 1.3rem; }
    .best-list .box-wrap .box .btn-wrap button.more-btn { height:25px; font-size: 1.2rem; padding: 0 20px; }
    .best-list .box-wrap .box .btn-wrap button.more-btn:hover { padding: 0 30px 0 20px; }
    .best-list .box-wrap .box .btn-wrap button.more-btn .material-icons { top:5px;}
    .best-list .box-wrap .box .btn-wrap button.more-btn:hover .material-icons { right: 10px;}
    .best-dashboard-area .btn-wrap.view-all-btn { margin-top:10px;}
}
@media (max-width: 500px) {
    .best-dashboard-area .nav-category { padding:7px 30px; }
    .best-dashboard-area .nav-category ul li a { font-size: 1.3rem; padding:5px 15px; }
    .best-dashboard-area .nav-category .nav-controls { padding: 0 8px; }
    .best-dashboard-area .nav-category .nav-controls.prev .material-icons,
    .best-dashboard-area .nav-category .nav-controls .material-icons { top: 10px;}
}


/* 뉴스 */
.sec-news-area { padding-top: 160px;}
.sec-news-area .news-title { position: relative; font-size: 2.5rem; font-weight: 600; padding-bottom:30px; }
.sec-news-area .news-title .more { position: absolute; top:10px; right:0; font-size: 1.5rem; font-weight: 600; color: #757575; }
.sec-news-area .news-title .more:hover { text-decoration: underline; }
.sec-news-area .news-list ul li { position: relative; padding:25px 75px 25px 40px; background: #eff1f8; margin-bottom: 15px; cursor: pointer; transition: background .2s;}
.sec-news-area .news-list ul li:last-child { margin-bottom:0; }
.sec-news-area .news-list ul li:hover { background:#e4e7f3; }
.sec-news-area .news-list ul li .date { float: left; text-align: center; width: 60px; margin-right:40px; }
.sec-news-area .news-list ul li .date .day { font-size:3.6rem; font-weight: 600; color: #492c8a; padding-bottom:3px; }
.sec-news-area .news-list ul li .date .year { font-size: 1.4rem; font-weight: 600; color:#999dbb; }
.sec-news-area .news-list ul li .cont { float: left; width:calc(100% - 100px); padding: 5px 0; }
.sec-news-area .news-list ul li .cont .tit { font-size: 1.8rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:100%; padding-bottom:10px; }
.sec-news-area .news-list ul li .cont .txt { font-size: 1.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:100%; color:#979797; }
.sec-news-area .news-list ul li .arr-more { position: absolute; top:45px; right: 35px; transition: right .2s; }
.sec-news-area .news-list ul li .arr-more .material-icons { font-size: 25px; color:#4e537b; }
.sec-news-area .news-list ul li:hover .arr-more { right: 30px; }
@media (max-width: 768px) {
    .sec-news-area { padding-top: 110px; }
    .sec-news-area .news-title { padding-bottom:20px; }
    .sec-news-area .news-list ul li { padding:20px 40px 20px 20px;}
    .sec-news-area .news-list ul li .date { margin-right:20px;}
    .sec-news-area .news-list ul li .arr-more { top:37px; right:20px;}
    .sec-news-area .news-list ul li .cont .tit { font-size: 1.6rem; }
    .sec-news-area .news-list ul li .cont .txt { font-size: 1.4rem;}
}
@media (max-width: 500px) {
    .sec-news-area .news-list ul li .date { margin-right: 10px;}
    .sec-news-area .news-list ul li .date .day { font-size: 3rem; }
    .sec-news-area .news-list ul li .date .year { font-size: 1.3rem;}
    .sec-news-area .news-list ul li .cont { width: calc(100% - 80px); }
    .sec-news-area .news-list ul li .cont .tit { font-size: 1.5rem;}
    .sec-news-area .news-list ul li .cont .txt { font-size: 1.3rem;}
    .sec-news-area .news-list ul li .arr-more .material-icons { font-size: 22px; }
}

/* 고객지원 */
.sec-support-area { padding-top: 90px;}
.sec-support-area .support-title { font-size: 2.5rem; font-weight: 600; padding-bottom:30px; margin-bottom: 30px; border-bottom: 1px solid #d3d7dc; }
.sec-support-area .support-title br { display: none; }
.sec-support-area .support-category .box { float: left; width: 33.33%; padding-right:30px;}
.sec-support-area .support-category .box .tit { font-size: 2rem; font-weight: 900; padding-bottom:12px; }
.sec-support-area .support-category .box .txt { font-size: 1.6rem; color:#979797; padding-bottom:20px; line-height: 1.5; font-weight: 500;}

.sec-support-area .support-category .box .btn-wrap button { position: relative; padding: 5px 20px; transition: padding .2s; min-width:inherit; font-size: 1.3rem; font-weight: 600; height:30px; }
.sec-support-area .support-category .box .btn-wrap button .material-icons { font-size: 13px; position: absolute; top: 8px; right:20px; opacity: 0; transition: opacity .2s, right .2s; }
.sec-support-area .support-category .box .btn-wrap button:hover { padding: 3px 27px 3px 20px; }
.sec-support-area .support-category .box .btn-wrap button:hover .material-icons { right: 10px; opacity: 1; }

@media (max-width: 1024px) {
    .sec-support-area .support-title { padding-bottom: 20px; margin-bottom: 20px; font-size: 2.2rem;}
    .sec-support-area .support-category .box .txt { font-size: 1.4rem; }
}
@media (max-width: 768px) {
    .sec-support-area .support-category .box { padding-right:15px;}
    .sec-support-area .support-category .box .txt br { display: none; }
}
@media (max-width: 590px) {
    .sec-support-area .support-title { font-size: 2rem; border-bottom:0; margin-bottom: 0; line-height: 1.6;}
    .sec-support-area .support-title br { display: block; }
    .sec-support-area .support-category { border: 1px solid #d3d7dc; }
    .sec-support-area .support-category .box { width:100%; padding: 20px 20px; border-bottom: 1px solid #d3d7dc; }
    .sec-support-area .support-category .box:last-child { border-bottom: 0}
    .sec-support-area .support-category .box .tit { font-size: 1.8rem;}
    .sec-support-area .support-category .box .txt { font-size: 1.3rem; }
}