/*================================================= 00. 공통 =================================================*/ /*****#####===== 슬라이드 버튼 =====#####*****/ .slide-color-btn {display: inline-block;position: relative;margin: 15px 0;padding: 18px 30px;background: none;border: 1px solid #A2A3A4;/*font-family: 'Montserrat',sans-serif;*/ letter-spacing: 2px;text-transform: uppercase;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .slide-color-btn:before {content:"";display:block;position:absolute;z-index:-1;top:100%;left:-1px;bottom:0px;right:-1px;background:#1f93ed;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .slide-color-btn:hover {color: #FFFFFF;} .slide-color-btn:hover:before {top: -1px;} /*****#####===== 구분선 =====#####*****/ .separator {display: inline-block;width: 70px;height: 1px;background: #0da013;margin-top: 10px;margin-bottom: 10px;} /*****#####===== 게시판 카테고리 =====#####*****/ .bcat-btn-wrap {margin-bottom: 60px;} .bcat-btn-wrap li {margin-bottom: 10px;padding: 0 20px;font-size: 16px;} .bcat-btn-wrap li .bcat-btn {position: relative;display: block;/*font-family: 'Montserrat', 'Nanum Gothic';*/ color: #AAAAAA;transition: all 0.5s ease-in-out;} .bcat-btn-wrap .bcat-btn.active, .bcat-btn-wrap .bcat-btn:hover {font-weight: bold;color: #222222;} .bcat-btn-wrap .bcat-btn .underline {position: absolute;display: block;left: 0;overflow: hidden;width: 0;height: 2px;background-color: #0281e3;transition: all 0.5s ease-in-out;} .bcat-btn-wrap .bcat-btn.active .underline, .bcat-btn-wrap .bcat-btn:hover .underline {width: 100%;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {.bcat-btn-wrap {margin-bottom: 30px;} .bcat-btn-wrap li {padding: 0 10px;} } /*================================================= 01. Header =================================================*/ header {position: relative;overflow: hidden;width: 100%;margin: 0;padding: 0;color: #FFFFFF;} header h2 {margin: 20px 0;/*font-family: 'Montserrat',sans-serif;*/ font-weight: 700;font-size: 100px;line-height: 0.9;letter-spacing: -0.05em;} header h5 {margin: 20px 0;/*font-family: 'Montserrat',sans-serif;*/ font-weight: 400;text-transform: uppercase;line-height: 1.2;letter-spacing: 0.2em;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {header h2 {margin: 0 0 15px;font-size: 35px;} header h5 {display: none;} } /*================================================= 01_02. notice =================================================*/ #notice{width:100%;background:#F7F7F7;padding:60px 0 70px;} .noticeInner{background:url(../_img/notice/bg_left.png),url(../_img/notice/bg_right.png) ;background-position:230px 50%,1350px 50% ;background-repeat:no-repeat,no-repeat} .noticeBox{margin:0 auto ;width:1010px;height:420px;position:relative;border-radius:20px;background:#fff;box-shadow:1px 2px 2px 3px #CFCFCF;overflow:hidden} .leftWrap{float:left;width:50%;height:420px;margin:0 auto;line-height:440px} .leftWrap img{width:50%} .rightWrap{float:left;width:50%;text-align: left;background:url(../_img/notice/bg_right.png) -50px 50% no-repeat;/*font-family:'Nanum Gothic',dotum,돋움,sans-serif,'Helvetica Nenu',Helvetica,Arial;*/ } .rightWrap p{font-size:30px;color:#7A7A7A} .rightWrap p.textTop{padding-top:95px} .rightWrap p strong{font-size:35px;color:#ED592C} .rightWrap strong{font-size:30px;color:#323232} /*================================================= 01. Responsive Web Design =================================================*/ /* #responsive {background-image: url('../_img/main/main_bg.jpg');} */ #responsive {background: url('../_img/main/main_bg.jpg') no-repeat center center fixed;background-size: cover;color:#fff;} #responsive #responsive-slider {height: 600px;} /* #responsive .anim-slider {top:45px;} */ #responsive .anim-slider {margin-bottom: 30px;} #responsive #responsive-slider .pc {left: 50%;bottom: 100px;margin-left: -200px;} #responsive #responsive-slider .laptop {left: 5%;bottom: 25px;} #responsive #responsive-slider .pad {right: 15%;bottom: 25px;} #responsive #responsive-slider .phone {right: 1%;bottom: 0;} #myVideo {position:absolute;left:0;bottom:0;min-width: 100%; min-height: 100%;z-index: -100;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 620px) {#main-gnb .containerWrap {height: 50px;} #responsive .anim-slider {top:0px;} #responsive #responsive-slider .pc {width: 80%;margin-left: -235px;} #responsive #responsive-slider .laptop {width: 70%;bottom:40px;left: 0;margin-left :-20px;} #responsive #responsive-slider .pad {width: 25%;padding-bottom: 15px;right: 20%;} /* #responsive #responsive-slider .phone {width: 10%;padding-bottom: 35px;} */ #responsive #responsive-slider .phone {width: 20%;padding-bottom: 15px;} } @media (max-width:480px) { /* #responsive .section-title-main {font-size:4em;} */ #responsive .section-title-main {font-size:40px;font-weight:700;line-height:44px;} #responsive #responsive-slider {height: 360px;} #responsive #responsive-slider .pc {margin-left: -155px;} #responsive #responsive-slider .pad {padding-bottom: 15px;} #responsive #responsive-slider .phone {padding-bottom: 50px;right: 5%;} } @media (max-width:380px) { #responsive #responsive-slider .pc {margin-left: -140px;} } /*================================================= 02. Special Partner =================================================*/ #special-partner {background:#efefef;} #special-partner .item-wrap {margin-bottom: 40px;} #special-partner img {width: 150px;height: 150px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} #special-partner .item-title {margin: 20px 0 10px;font-size: 24px;text-transform: uppercase;letter-spacing: 0px;} #special-partner .word-break {font-size: 18px;} #special-partner .cms {font-size: 14px;} #special-partner .sp_span {font-size: 12px;} #special-partner .speview {background: #fff;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) { #special-partner .item-title {font-size: 15px;} } /*================================================= 03. Service =================================================*/ #service {background: url('../_img/main/service_bg_1.jpg') no-repeat center center fixed;background-size: cover;} #service .item-wrap {margin-bottom: 40px;} #service .item-wrap img {width: 150px;} #service .item-wrap .item-title {margin: 20px 0 10px;font-size: 18px;font-weight: bold;color: #0281e3;} #service .item-wrap .service-word {color: #fff;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (min-width: 1200px) {#service .item-wrap img {width: 150px;} } @media (max-width:768px) {#service .item-wrap {height: 280px;} } @media (max-width:480px) {#service .item-wrap {height: 320px;} } /*================================================= 04. Process =================================================*/ #process {padding-top: 20px;background-image: url('../_img/main/process_bg.jpg');} #process .process-top-title {font-size: 24px;color: #FFFFFF;} #process .process-slider-wrapper {position: relative;} /*****#####===== 프로세스 바 =====#####*****/ #process .progress-bar {display: block;width: 100%;height: 2px;background: transparent;border-bottom: 1px dotted #0C7984;position: absolute;top: 50%;} #process .progress-bar.start, #process .progress-bar.finish {width: 80%;} #process .progress-bar.start {right: 0 } #process .progress-bar.finish {left: 0 } #process .progress-bar.start:before {position: absolute;left: 0;display: block;content: '';width: 6px;height: 6px;background: #00d9ec;top: -1px;border-radius: 50%;} #process .progress-bar.finish:before {position: absolute;right: 0;display: block;content: '';width: 6px;height: 6px;background: #00d9ec;top: -1px;border-radius: 50%;} /*****#####===== 프로세스 내용 =====#####*****/ #process .process-wrap {display: block;position: relative;overflow: hidden;} #process .process-wrap .process-title span {display: inline-block;padding: 0 10px;font-size: 50px;font-weight: bold;line-height: 1em;letter-spacing: -0.05em;color: #FFFFFF;z-index: 100;} #process .process-wrap .process-icon {display: inline-block;margin: 10px 0 20px 0;font-size: 70px;color: #FFFFFF;line-height: 1em;} #process .process-wrap .process-desc {margin: 30px 0;font-size: 18px;color: #D1D1D1;line-height: 1.6;} /*****#####===== 슬라이더 페이져 =====#####*****/ #process .bx-pager {bottom: -30px;} #process .bx-pager .bx-pager-link {border-radius: 0;background: none;width: auto;height: auto;margin-right: 15px;font-size: 20px;font-weight: bold;line-height: 2em;letter-spacing: -0.05em;text-align: right;text-indent: 0;text-decoration: none;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;} #process .bx-pager .bx-pager-link:hover {color: #fff;} #process .bx-pager .bx-pager-link:before {content: '0';} #process .bx-pager .bx-pager-link.active {color: #fff;} #process .bx-controls-direction a {margin: 0;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {#process .process-top-title {font-size: 18px;} #process .process-wrap .process-icon {font-size: 40px;} #process .process-wrap .process-title span {font-size: 30px;} #process .process-wrap .process-desc {margin: 15px 0;font-size: 15px;} #process .bx-pager .bx-pager-link {font-size: 13px;} } /*================================================= 05. Our Works =================================================*/ #works .grid-sizer, #works .grid-item {width: 33.3333%;} #works .slide-color-btn {z-index: 10;color: #FFFFFF;} #works .slide-color-btn:before {background:#FFFFFF;} #works .slide-color-btn:hover {color: #171a1c;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {#works .slide-color-btn {display: none;} } /*================================================= 06. What FREEDOTCOME do =================================================*/ #feature {background-image: url('../_img/main/feature_bg_1.jpg');} #feature .border-shape { } #feature .border-shape > div {margin-top: 20px;/*font-family: 'Cardo', serif;*/ font-size: 24px;color: #FFFFFF;} #feature #feature-slider {height: 250px;margin-top: 70px;} #feature #feature-slider .feature-title {width: 100%;margin: 0;font-size: 40px;font-weight: 700;color: #FFFFFF;} #feature #feature-slider .feature-desc {width: 100%;top: 110px;font-size: 18px;color: #FFFFFF;line-height: 1.7;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) { #feature #feature-slider {height: 200px;} #feature #feature-slider .feature-title {font-size: 25px;} #feature #feature-slider .feature-desc {top: 60px;font-size: 15px;} } /*================================================= 07. Viral Marketing =================================================*/ #viral-marketing {background: #efefef;} #viral-marketing .item-wrap {margin-bottom: 40px;} #viral-marketing img {width: 150px;height: 150px;} #viral-marketing i.grey {background-color: #636363;} #viral-marketing i.grey:after {box-shadow: 0 0 0 4px #636363;} #viral-marketing i:hover {font-size: 90px;} #viral-marketing i:hover:after {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;} #viral-marketing .item-title {margin: 20px 0 10px;font-size: 24px;} #viral-marketing .sp_span {font-size: 12px;} #viral-marketing .viralview {background: #fff;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {#viral-marketing i {width: 120px;height: 120px;font-size: 50px;line-height: 120px;} #viral-marketing .item-title {font-size: 15px;} } /*================================================= 08. Samples =================================================*/ #sample .sample-img-wrap {display: block;margin-bottom: 20px;border: 1px solid #DDDDDD;} #sample .bx-wrapper .bx-next {right: -25px;} #sample .bx-wrapper .bx-prev {left: -25px;} #sample .bx-wrapper .bx-pager {bottom: -30px;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {#sample {padding-bottom: 70px;} #sample .bx-wrapper .bx-next {right: -10px;} #sample .bx-wrapper .bx-prev {left: -10px;} } /*================================================= 9. User Feed =================================================*/ #colum {background-image: url("/_img/main/rspweb_bg_2.jpg");padding: 40px 0 50px;} #colum .section-subtitle {font-size: 30px;color: #000;} #colum .colum-title {width: 100%;margin-top: 20px;font-size: 24px;font-weight: 700;color: #fff;} #colum .colum-desc {width: 100%;top: 110px;margin-top: 20px;font-size: 18px;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) { #colum .section-subtitle {font-size: 24px;color: #000;margin-top: 0;} #colum .colum-title {font-size: 18px;} #colum .colum-desc {top: 60px;font-size: 15px;} } #colum .colum-top-title {font-size: 24px;color: #FFFFFF;} #colum .colum-slider-wrapper {position: relative;} /*****#####===== 프로세스 바 =====#####*****/ #colum .progress-bar {display: block;width: 100%;height: 2px;background: transparent;border-bottom: 1px dotted #0C7984;position: absolute;top: 50%;} #colum .progress-bar.start, #colum .progress-bar.finish {width: 80%;} #colum .progress-bar.start {right: 0 } #colum .progress-bar.finish {left: 0 } #colum .progress-bar.start:before {position: absolute;left: 0;display: block;content: '';width: 6px;height: 6px;background: #00d9ec;top: -1px;border-radius: 50%;} #colum .progress-bar.finish:before {position: absolute;right: 0;display: block;content: '';width: 6px;height: 6px;background: #00d9ec;top: -1px;border-radius: 50%;} /*****#####===== 프로세스 내용 =====#####*****/ #colum .colum-wrap {display: block;position: relative;overflow: hidden;} #colum .colum-wrap .colum-title span {display: inline-block;padding: 0 10px;font-size: 24px;font-weight: bold;line-height: 1em;letter-spacing: -0.05em;color: #FFFFFF;z-index: 100;} #colum .colum-wrap .colum-icon {display: inline-block;margin: 10px 0 10px 0;font-size: 70px;color: #FFFFFF;line-height: 1em;} #colum .colum-wrap .colum-desc {margin: 30px 0;font-size: 18px;line-height: 1.6;} /*****#####===== 슬라이더 페이져 =====#####*****/ #colum .bx-pager {bottom: -10px;} #colum .bx-pager .bx-pager-link {border-radius: 0;background: none;width: auto;height: auto;margin-right: 15px;font-size: 20px;font-weight: bold;line-height: 2em;letter-spacing: -0.05em;text-align: right;text-indent: 0;text-decoration: none;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;} #colum .bx-pager .bx-pager-link:hover {color: #fff;} #colum .bx-pager .bx-pager-link:before {content: '0';} #colum .bx-pager .bx-pager-link.active {color: #fff;} #colum .bx-controls-direction a {margin: 0;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) {#colum .colum-top-title {font-size: 18px;} #colum .colum-wrap .colum-icon {font-size: 40px;} #colum .colum-wrap .colum-title span {font-size: 30px;} #colum .colum-wrap .colum-desc {margin: 15px 0;font-size: 15px;} #colum .bx-pager .bx-pager-link {font-size: 13px;} } /*================================================= 10. Q&A =================================================*/ #qna .slide-color-btn {margin: 5px 0;padding: 13px 30px;} #qna .katalk-qna-btn {background-color: #FFE800;border: 1px solid #FFE800;margin: 5px 0;padding: 13px 10px;letter-spacing: 2px;} #qna .katalk-qna-btn img {width: auto;height: 20px;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) { #qna-board .status {width: 80px;} } /*================================================= 11. Period =================================================*/ #period {background-image: url('../_img/main/period_bg.jpg');color: #FFFFFF;} #period .counter-wrap {font-size: 70px;} #period .counter {font-weight: 900;} /*================================================= 12. 고객센터 (찾아오시는 길) =================================================*/ #location .btn_area {width: 1170px; margin: 20px auto 0;} #location .counselbtn {margin : 0 auto;width: 180px;display: block;background: #fff;} #location .item-wrap {margin-bottom: 40px;} #location ul {text-align:center;display: inline-block;list-style: none;} #location ul li::before { content: "\2022";color:#888;font-weight: bold;display: inline-block;width: 1em;margin-left: -1em; } #location ul li {font-size:20px;font-weight:300;text-align:center;margin:10px 0px;} #location ul li.tel {margin-top: 20px;} #location img {width: 150px;height: 150px;} #location .item-title {margin: 20px 0 10px;font-size: 18px;text-transform: uppercase;letter-spacing: 3px;} #location .sp_span {font-size: 12px;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) { #location .item-title {font-size: 15px;} } /*****#####===== 지도 =====#####*****/ #locationmap {padding:0px !important;;margin:0px!important;;} #locationmap .mapwrap {width: 100%;} #map {width: 1170px; height: 550px; margin: 0 auto; border: 1px solid #ccc;} /*****#####===== 미디어 쿼리 =====#####*****/ /***** xs *****/ @media (max-width: 767px) { #map {width: 90%;height: 400px;} } /*---------------------------------------- 99. Debug Tools ----------------------------------------*/ .brdRed {border:2px solid red !important;} .brdBlue {border:2px solid blue !important;} .brdGreen {border:2px solid green !important;} .brdGray {border:2px solid gray !important;} .brdYellow {border:2px solid yellow !important;} .brdWhite {border:2px solid white !important;}