@charset "euc-kr"; /********************************************** * 스탠다드반응형 SD002 컨텐츠 css * 버전 : 1.0 * 릴리즈 : 2017-11-04 * 본 css의 저작권은 도트피아에 있습니다. **********************************************/ /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {position:relative; height:800px; overflow:hidden} #keyVisual .owl-carousel {height:100%} #keyVisual .owl-stage-outer {position:relative; height:100%} #keyVisual .owl-stage-outer .owl-stage {height:100%} #keyVisual .owl-stage-outer .owl-item {height:100%} #keyVisual .owl-stage-outer .owl-item > div {height:100%; background-size:cover !important; background-position:center top; background-repeat:no-repeat; z-index:5} #keyVisual .owl-stage-outer .owl-item > div.slide-1 {background-image:url(../../img/keyvisual1.jpg)} #keyVisual .owl-stage-outer .owl-item > div.slide-2 {background-image:url(../../img/keyvisual2.jpg)} #keyVisual .owl-stage-outer .owl-item > div.slide-3 {background-image:url(../../img/keyvisual3.jpg)} #keyVisual .owl-stage-outer .owl-item > div.slide-4 {background-image:url(../../img/keyvisual4.jpg)} #keyVisual .owl-stage-outer .owl-item > div .text {position:relative; top:50%; max-width:1200px; margin:auto} #keyVisual .owl-stage-outer .owl-item > div .text h2 {font-family:'Montserrat','Noto Sans KR',sans-serif; font-size:56px; font-weight:normal; color:#fff; line-height:1.2; letter-spacing:1.5px; opacity:0; transform:translateY(-40px); transition:all 1.2s ease} #keyVisual .owl-stage-outer .owl-item.active .text h2 {opacity:1; transform:translateY(0); transition-delay:0.2s} #keyVisual .slides-paging {position:absolute; bottom:20%; left:50%; max-width:1200px; width:100%; margin-left:-600px; font-size:0; z-index:20} #keyVisual .slides-paging > a {display:inline-block; font-family:'Quicksand','Noto Sans KR',sans-serif; font-size:13px; font-weight:600; color:#fff; letter-spacing:1px; text-transform:uppercase; opacity:0.75; margin-right:30px; cursor:pointer; vertical-align:top; transition:all 0.3s} #keyVisual .slides-paging > a:after {content:''; display:block; width:20px; height:1px; margin-top:15px; background:transparent; transition:background 0.3s} #keyVisual .slides-paging > a.active {opacity:1} #keyVisual .slides-paging > a.active:after {background:#fff} #keyVisual .scroll-down {position:absolute !important; bottom:50px; left:50%; margin-left:-600px; z-index:20; animation:op-ani 1.5s infinite} #keyVisual .scroll-down:hover {animation:none} @keyframes op-ani { 0% {opacity:0.3} 50% {opacity:1} 100% {opacity:0.3} } /* 메인 섹션 공통 */ section.main-section {position:relative; padding:100px 0; overflow:hidden} section.main-section:before, section.main-section:after, section.main-section .container-inner:before, section.main-section .container-inner:after, section.main-section .container-fluid:before, section.main-section .container-fluid:after {content:''; display:block} section.main-section:after, section.main-section .container-inner:after, section.main-section .container-fluid:after {clear:both} section.main-section .container-inner, section.main-section .container-fluid {position:relative} section.main-section .container-inner {max-width:1200px; margin:auto} section.main-section .main-title {padding-bottom:80px} section.main-section .main-title h2 {float:left; width:30%; font-size:30px; font-weight:500; color:#161616} section.main-section .main-title.fluid h2 {float:none; width:100%} section.main-section .main-title blockquote {position:relative; float:right; width:65%; padding-left:30px; font-size:16px; color:#333; line-height:1.75; word-break:keep-all} section.main-section .main-title blockquote:before {position:absolute; top:7px; left:0; content:''; width:1px; height:40px; background:#e2e2e2} section.main-section .main-title.light h2 {color:#fff} section.main-section .main-title.light blockquote {color:#aaa} section.main-section .main-title:after {content:''; clear:both; display:block} section.main-section .sub-title {float:left; width:30%} section.main-section .sub-title h2 {font-size:28px; font-weight:500; color:#161616} section.main-section .sub-title.light h2 {color:#eee} section.main-section .sub-title.fluid {float:none; width:100%; padding-bottom:60px} section.main-section hr.divider {clear:both; padding-top:100px; border:none; border-bottom:1px solid #e2e2e2; background:none} /* 메인 드롭다운 공통 */ .main-dropdown > a {display:none} /* ABOUT */ #mainContainer #section1 .about-grid > li {text-align:center} #mainContainer #section1 .about-grid > li .icon-circle {width:64px; height:64px; font-size:26px; color:#ff6c00; line-height:60px; margin:auto; border:2px solid #e2e2e2; border-radius:50%} #mainContainer #section1 .about-grid > li h3 {font-size:18px; font-weight:500; color:#343434; margin:30px 0 20px} #mainContainer #section1 .about-grid > li p {color:#6a6a6a; line-height:1.85} /* WORKS */ #mainContainer #section2 {padding-top:0} #mainContainer #section2 .works-tab {font-size:0; margin-bottom:40px} #mainContainer #section2 .works-tab > li {display:inline-block; font-family:'Quicksand','Noto Sans KR',sans-serif; font-size:13px; font-weight:600; color:#888; letter-spacing:1px; text-transform:uppercase; margin-right:30px; cursor:pointer; vertical-align:top; transition:all 0.3s} #mainContainer #section2 .works-tab > li:after {content:''; display:block; width:20px; height:1px; margin-top:15px; background:transparent; transition:background 0.3s} #mainContainer #section2 .works-tab > li.active {color:#222} #mainContainer #section2 .works-tab > li.active:after {background:#ff6c00} #mainContainer #section2 .works-grid > li {position:relative; overflow:hidden} #mainContainer #section2 .works-grid > table {position:relative; display:block; overflow:hidden} #mainContainer #section2 .works-grid > table img {width:100%; height:auto} #mainContainer #section2 .works-grid > table tr:last-child td {position:absolute; top:0; left:0; bottom:0; right:0; font-size:11px; font-weight:500; color:#fff; padding:45px 0 0 30px; background:rgba(255,108,0,0.9); transform:translateY(100%); opacity:0; transition:all 0.4s ease} #mainContainer #section2 .works-grid > table:hover tr:last-child td {transform:translateY(0); opacity:1} #mainContainer #section2 .works-grid > table tr:last-child td:after {position:absolute; bottom:30px; left:30px; content:'\e90b'; display:block; width:48px; height:48px; font-family:'xeicon'; font-size:11px; color:#fff; text-align:center; line-height:44px; border:2px solid #fff; border-radius:50%; transition:all 0.35s ease} #mainContainer #section2 .works-grid > table .board_output_gallery_subject {text-align:left !important} #mainContainer #section2 .works-grid > table tr td .board_output_gallery_subject a {position:absolute; display:block; top:0; left:0; width:100%; height:100%; padding:30px 0 0 30px; font-size:17px; font-weight:500; color:#fff; z-index:1} /* PROCESS */ #mainContainer #section3 {} #mainContainer #section3 .process-wrapper > .process {overflow:hidden} #mainContainer #section3 .process-wrapper > .process > div {width:50%} #mainContainer #section3 .process-wrapper > .process > .imgBox {float:left; margin-bottom:-500px; padding-bottom:500px; background-position:center top; background-size:cover} #mainContainer #section3 .process-wrapper > .process > .imgBox.box1 {background-image:url(../../img/main_process_img1.jpg)} #mainContainer #section3 .process-wrapper > .process > .imgBox.box2 {background-image:url(../../img/main_process_img2.jpg)} #mainContainer #section3 .process-wrapper > .process > .imgBox.box3 {background-image:url(../../img/main_process_img3.jpg)} #mainContainer #section3 .process-wrapper > .process > .imgBox:after {content:'.'; font-size:1px; color:transparent; text-indent:-9999em} #mainContainer #section3 .process-wrapper > .process > .infoBox {float:left; margin-bottom:-500px; padding:80px 80px 600px 80px} #mainContainer #section3 .process-wrapper > .process > .infoBox .process-num {position:relative; width:100px; height:100px; margin-bottom:30px; padding:50px 0 15px 20px; font-family:'Montserrat','Noto Sans KR',sans-serif; font-size:22px; font-weight:600; color:#ff6c00; border:2px solid #e2e2e2} #mainContainer #section3 .process-wrapper > .process > .infoBox .process-num:after {position:absolute; bottom:-2px; left:14px; content:''; width:20px; height:2px; background:#ff6c00} #mainContainer #section3 .process-wrapper > .process > .infoBox h4 {font-size:20px; font-weight:500; color:#2b2b2b; margin-bottom:15px} #mainContainer #section3 .process-wrapper > .process > .infoBox p {color:#777; line-height:1.85; word-break:keep-all} #mainContainer #section3 .process-wrapper > .process.left > div {float:right} #mainContainer #section3 .process-wrapper > .process.left > .infoBox {padding-left:0} /* SERVICES */ #mainContainer #section4 {background:#363f49} #mainContainer #section4 .service-grid {float:right; width:60%} #mainContainer #section4 .service-grid ul > li {margin-bottom:50px} #mainContainer #section4 .service-grid ul > li:nth-child(3), #mainContainer #section4 .service-grid ul > li:nth-child(4) {margin-bottom:0} #mainContainer #section4 .service-grid ul > li .icon-point {font-size:40px; color:#ff6c00} #mainContainer #section4 .service-grid ul > li h3 {font-size:18px; font-weight:500; color:#eee; margin:20px 0} #mainContainer #section4 .service-grid ul > li p {font-size:14px; color:#aaa; line-height:1.85; word-break:keep-all} /* OUR TEAM */ #mainContainer #section5 {} #mainContainer #section5 .team-grid > li .container {transition:box-shadow 0.35s ease; overflow:hidden} #mainContainer #section5 .team-grid > li .container .profile-img {position:relative; overflow:hidden; z-index:5} #mainContainer #section5 .team-grid > li .container .profile-img img {width:100%; transition:transform 0.35s ease} #mainContainer #section5 .team-grid > li .container .info {position:relative; text-align:center; padding:25px 30px 30px; background:#fff; transition:margin-top 0.35s ease; z-index:20} #mainContainer #section5 .team-grid > li .container .info h3 {font-size:18px; font-weight:500; color:#2b2b2b; margin-bottom:5px} #mainContainer #section5 .team-grid > li .container .info span {display:block; font-size:11px; font-weight:500; color:#777; letter-spacing:0.05em; text-transform:uppercase} #mainContainer #section5 .team-grid > li .container .info .sns-icons {margin-top:15px; font-size:0; opacity:0; transition:opacity 0.35s ease} #mainContainer #section5 .team-grid > li .container .info .sns-icons > li {display:inline-block; font-size:15px; margin:0 3px} #mainContainer #section5 .team-grid > li .container .info .sns-icons > li a {display:block; width:28px; height:28px; font-size:15px; color:#aaa; text-align:center; line-height:26px; border:1px solid #e2e2e2; border-radius:50%; transition:all 0.3s} #mainContainer #section5 .team-grid > li .container .info .sns-icons > li a:hover {color:#ff6c00; border-color:#ff6c00} /* PARALLAX */ #mainContainer #section6 {padding:250px 0; background:url(../../img/main_parallax_bg.jpg) center 50% fixed no-repeat; background-size:cover} #mainContainer #section6:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:0.35; z-index:5} #mainContainer #section6 .text {position:relative; text-align:center; z-index:10} #mainContainer #section6 .text h2 {font-family:'Quicksand','Noto Sans KR',sans-serif; font-size:64px; font-weight:300; color:#fff} /* LATEST ARTICLES */ #mainContainer #section7 {} #mainContainer #section7 .sub-title {width:20%} #mainContainer #section7 .sub-title .tab-items {padding-top:60px} #mainContainer #section7 .sub-title .tab-items:after {content:''; display:block; width:20px; height:1px; margin:60px 0 30px; background:#e2e2e2} #mainContainer #section7 .sub-title .tab-items > li {margin-bottom:15px} #mainContainer #section7 .sub-title .tab-items > li a {font-weight:500; color:#6a6a6a} #mainContainer #section7 .sub-title .tab-items > li.active a {font-weight:600; color:#ff6c00} #mainContainer #section7 .sub-title .link-all {font-size:12px; font-weight:600; color:#2b2b2b} #mainContainer #section7 .sub-title .link-all i {margin-left:5px} #mainContainer #section7 .article-tab {display:none; position:absolute; top:0; right:0; width:75%; padding-top:10px; transform:translateY(30px); transition:transform 0.5s ease-out} #mainContainer #section7 .article-tab.active {transform:translateY(0)} #mainContainer #section7 .tab-spacer {height:280px} /* OUR CLIENTS */ #mainContainer #section8 {padding-top:0} #mainContainer #section8 .main-title {padding-bottom:40px} #mainContainer #section8 .main-title .controller {clear:both; position:relative; font-size:0} #mainContainer #section8 .main-title .controller > li {display:inline-block; font-size:14px; margin-right:8px} #mainContainer #section8 #main-client-slide {position:relative; padding:15px 0 0; overflow:hidden} #mainContainer #section8 #main-client-slide .slides {position:relative; width:10000px; margin:0 -15px} #mainContainer #section8 #main-client-slide .slides > li {float:left; width:175px; padding:0 15px} #mainContainer #section8 #main-client-slide .slides > li .container {height:130px; padding:0 15px; text-align:center; border:2px solid #f1f1f1; transition:all 0.35s ease-out} #mainContainer #section8 #main-client-slide .slides > li .container a:before {content:''; display:inline-block; height:100%; vertical-align:middle} #mainContainer #section8 #main-client-slide .slides > li .container img {max-width:100%; opacity:0.5; transition:opacity 0.35s ease-out} #mainContainer #section8 #main-client-slide .slides > li .container:hover img {opacity:1} #mainContainer #section8 #main-client-slide .bx-wrapper {border:none; background:transparent; box-shadow:none} #mainContainer #section8 #main-client-slide .bx-wrapper img {display:inline} /* CONTACT */ #mainContainer #section9 {padding:0; background:#1f262d} #mainContainer #section9 .container-fluid {overflow:hidden} #mainContainer #section9 #map {float:left; width:48%; min-height:780px; height:100%; margin-bottom:-500px; padding-bottom:500px} #mainContainer #section9 #map:before {content:'1'; font-size:0; text-indent:-9999em} #mainContainer #section9 .form-container {float:left; width:52%; max-width:600px; margin-bottom:-500px; padding:60px 0 580px 60px} #mainContainer #section9 .form-container h2 {font-size:26px; font-weight:500; color:#fff; margin-bottom:30px} #mainContainer #section9 .form-container .input-wrap {margin-bottom:15px} #mainContainer #section9 .form-container .input-wrap input[type=text], #mainContainer #section9 .form-container .input-wrap input[type=password], #mainContainer #section9 .form-container .input-wrap textarea {width:100%; color:#666; border:none; border-radius:0; border-bottom:1px solid #40464c; background:transparent; outline:none; transition:all 0.3s} #mainContainer #section9 .form-container .input-wrap input[type=text]:focus, #mainContainer #section9 .form-container .input-wrap input[type=password]:focus, #mainContainer #section9 .form-container .input-wrap textarea:focus {color:#fff; border-color:#fff} #mainContainer #section9 .form-container .input-wrap input[type=text], #mainContainer #section9 .form-container .input-wrap input[type=password] {height:45px} #mainContainer #section9 .form-container .input-wrap textarea {height:90px; resize:none} #mainContainer #section9 .form-container .input-wrap .left {float:left; width:48%} #mainContainer #section9 .form-container .input-wrap .right {float:right; width:48%} #mainContainer #section9 .form-container .tbl-formmail {width:100%} #mainContainer #section9 .form-container .tbl-formmail tr td:first-child {display:none} #mainContainer #section9 .form-container .tbl-formmail tr td {font-family:inherit !important; font-size:0; padding-bottom:10px; background-color:transparent !important} #mainContainer #section9 .form-container .tbl-formmail tr td input[type=text], #mainContainer #section9 .form-container .tbl-formmail tr td input[type=password], #mainContainer #section9 .form-container .tbl-formmail tr td textarea {width:100%; font-family:inherit !important; font-size:13px !important; color:#666; padding:0; border:none; border-radius:0; border-bottom:1px solid #40464c; background:transparent; outline:none; transition:all 0.3s} #mainContainer #section9 .form-container .tbl-formmail tr td input[type=text]:focus, #mainContainer #section9 .form-container .tbl-formmail tr td input[type=password]:focus, #mainContainer #section9 .form-container .tbl-formmail tr td textarea:focus {color:#fff; border-color:#fff} #mainContainer #section9 .form-container .tbl-formmail tr td input[name^=phone] {width:32% !important; margin-left:10px} #mainContainer #section9 .form-container .tbl-formmail tr td input[name^=phone]:first-child {margin-left:0} #mainContainer #section9 .form-container .tbl-formmail tr td textarea {height:90px !important; resize:none} #mainContainer #section9 .form-container .btn-wrapper {margin:30px 0 60px} #mainContainer #section9 .form-container button[type=submit] {margin:30px 0 60px} #mainContainer #section9 .form-container dl dt, #mainContainer #section9 .form-container dl dd {font-size:13px; line-height:1.75} #mainContainer #section9 .form-container dl dt {clear:both; float:left; width:105px; font-family:'Quicksand','Noto Sans KR',sans-serif; font-weight:600; color:#666} #mainContainer #section9 .form-container dl dt i {margin-right:8px; vertical-align:-1px} #mainContainer #section9 .form-container dl dd {color:#eee; margin-bottom:15px; padding-left:100px} #mainContainer #section9 .form-container dl dd a {color:#eee !important} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {position:relative; height:480px; overflow:hidden} #subVisual > .visual_img {position:absolute; display:block; top:-50px; left:50%; margin-left:-1250px; transform:scale(1.15); transition:transform 5s ease} #subVisual > .title {position:relative; display:table; max-width:1200px; width:100%; height:100%; margin:auto} #subVisual > .title h2 {display:table-cell; height:100%; font-family:'Quicksand','Noto Sans KR'; font-size:48px; font-weight:normal; color:#fff; text-align:center; letter-spacing:3px; padding-top:35px; vertical-align:middle; opacity:0; text-shadow:0 3px 8px rgba(0, 0, 0, 0.15); transform:translateY(30px); transition:all 0.8s ease; transition-delay:2s} #subVisual.load > .visual_img {transform:scale(1.0)} #subVisual.load > .title h2 {opacity:1; transform:translateY(0)} /* 페이지 내비게이션 */ #breadcrumbs {border-bottom:1px solid #e2e2e2} #breadcrumbs > .container {max-width:1200px; margin:auto} #breadcrumbs > .container > .home {float:left; width:55px; height:55px; font-size:18px; color:#000; text-align:center; line-height:55px; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2} #breadcrumbs > .container > div {float:left; position:relative; width:240px} #breadcrumbs > .container > div > a {position:relative; display:block; width:100%; height:55px; padding:0 20px; font-size:16px; color:#333; line-height:55px; border-right:1px solid #e2e2e2} #breadcrumbs > .container > div > a.current {font-weight:600; color:#1f465f} #breadcrumbs > .container > div > a:after {position:absolute; right:20px; content:'\e936'; font-family:'xeicon'; font-size:14px; color:#000; transition:transform 0.3s ease-in-out} #breadcrumbs > .container > div > ul {position:absolute; display:none; top:55px; left:-1px; right:0; padding:25px 30px; border:1px solid #dedede; background:#f9f9f9; z-index:20} #breadcrumbs > .container > div > ul li a {font-size:16px; color:#555; line-height:2.2} #breadcrumbs > .container > div.open > a:after {transform:rotate(180deg)} /* 섹션 공통 */ #container {position:relative; overflow:hidden} #container img {max-width:100%} #container .container-inner {position:relative; max-width:1200px; margin:auto} #container .container-inner:before, #container .container-inner:after, #container .container-fluid:before, #container .container-fluid:after, #container section.sub-section:before, #container section.sub-section:after {content:''; display:block} #container .container-inner:after, #container .container-fluid:after, #container section.sub-section:after {clear:both} #container section.sub-section {position:relative; padding:80px 0} #container .main-title {padding:50px 0; text-align:center} #container .main-title.innerTitle {padding-top:0} #container .main-title h2 {font-size:36px; font-weight:300; color:#2b2b2b} #container .main-title p {font-size:16px; font-weight:300; color:#555; line-height:1.6; margin-top:25px} #container .main-title p strong {font-weight:600; color:#ff6c00} #container .bottom-btn {padding-top:60px; text-align:center} /* COMPANY - 회사소개 */ #container .about-main {padding:150px 0; background:url(../../img/about_main_bg.jpg) center top no-repeat; background-size:cover} #container .about-main h3 {font-size:24px; font-weight:normal; color:#fff; text-align:center; line-height:1.6; margin-bottom:80px} #container .about-main .company-info {display:table; width:100%; max-width:1200px; margin:auto; table-layout:fixed} #container .about-main .company-info > li {display:table-cell; padding:50px 20px; color:#fff; text-align:center; border-right:1px solid rgba(255, 255, 255, 0.55)} #container .about-main .company-info > li:first-child {border-left:1px solid rgba(255, 255, 255, 0.55)} #container .about-main .company-info > li i {display:inline-block; font-size:48px; height:60px} #container .about-main .company-info > li h4 {font-size:18px; font-weight:600; margin:10px 0 15px} #container .about-main .company-info > li p {font-size:16px; line-height:1.35} #container .about-section1 {padding-bottom:0 !important} #container .about-section1 .about-desc {font-size:18px; color:#3b3b3b; text-align:center; line-height:1.75; margin-bottom:60px} #container .about-section1 .about-info {} #container .about-section1 .about-info:after {content:''; clear:both; display:block} #container .about-section1 .about-info dt, #container .about-section1 .about-info dd {font-size:15px; line-height:1} #container .about-section1 .about-info dt {float:left; display:block; width:130px; padding:20px 15px; font-weight:600; color:#2b2b2b; border-top:1px solid #333} #container .about-section1 .about-info dd {display:block; margin-left:150px; padding:20px 15px; color:#666; border-top:1px solid #e2e2e2} #container .about-section2 .team-info > li {transition:opacity 0.4s ease} #container .about-section2 .team-info > li:before {content:''; display:block; height:1px; margin-bottom:30px; background:#e5e5e5; transition:background 0.4s ease} #container .about-section2 .team-info > li .imgBox {overflow:hidden} #container .about-section2 .team-info > li .imgBox img {display:block; width:100%} #container .about-section2 .team-info > li .detail h3 {font-size:24px; font-weight:300; color:#2b2b2b; margin:35px 0 5px} #container .about-section2 .team-info > li .detail .subtit {display:block; font-size:14px; font-weight:300; color:#9a9a9a; margin-bottom:25px} #container .about-section2 .team-info > li .detail p {color:#6a6a6a; line-height:1.85} #container .about-section2 .team-info > li .detail .sns-link {margin-top:25px; font-size:0} #container .about-section2 .team-info > li .detail .sns-link > li {display:inline-block; font-size:18px; margin-right:10px} #container .about-section2 .team-info > li .detail .sns-link > li a {font-size:18px; color:#ffa600} /* COMPANY - 연혁 */ #container .history-section {padding:20px 0 80px !important} #container .history-section .year-wrap {position:relative; padding-bottom:50px} #container .history-section .year-wrap:after {content:''; clear:both; display:block} #container .history-section .year-wrap:before {position:absolute; top:0; left:50%; content:''; width:1px; height:100%; margin-left:1px; background:#e2e2e2; z-index:10} #container .history-section .year-wrap:last-child {padding-bottom:200px} #container .history-section .year-wrap > .year {position:relative; width:80px; height:80px; margin:auto; font-family:'Quicksand','Noto Sans KR',sans-serif; font-size:24px; font-weight:300; color:#fff; text-align:center; line-height:80px; border-radius:50%; background:#ffa600; z-index:20} #container .history-section .year-wrap > ul {position:relative} #container .history-section .year-wrap > ul:after {content:''; clear:both; display:block} #container .history-section .year-wrap > ul > li {position:relative; margin-top:40px; padding-left:55%} #container .history-section .year-wrap > ul > li:before {position:absolute; top:5px; left:50%; content:''; width:16px; height:16px; margin-left:-8px; border:2px solid #ffa600; border-radius:50%; background:#fff; z-index:20} #container .history-section .year-wrap > ul > li.left {text-align:right; padding-left:0; padding-right:55%} #container .history-section .year-wrap > ul > li .inner {margin:auto} #container .history-section .year-wrap > ul > li h3 {font-size:26px; font-weight:normal; color:#ffa600; margin-bottom:20px} #container .history-section .year-wrap > ul > li dl dt, #container .history-section .year-wrap > ul > li dl dd {font-size:15px} #container .history-section .year-wrap > ul > li dl dt {font-family:'Quicksand','Noto Sans KR',sans-serif; font-weight:normal; color:#8a8a8a; letter-spacing:1px; margin-bottom:15px} #container .history-section .year-wrap > ul > li dl dd {color:#6a6a6a; line-height:1.6} #container .history-section .finish-box {position:absolute; bottom:0; left:50%; width:140px; height:140px; margin-left:-70px; text-align:center; border:6px solid #f2f2f2; border-radius:50%; background:#ffa600; z-index:20} #container .history-section .finish-box:before {display:inline-block; content:''; height:100%; vertical-align:middle} #container .history-section .finish-box p {display:inline-block; font-size:16px; font-weight:500; color:#fff; line-height:1.65; vertical-align:middle} /* COMPANY - 오시는길 */ #container .location-section {padding:0 0 80px !important} #container .location-section #map {height:500px; margin-bottom:50px} #container .location-section h3 {font-size:20px; font-weight:normal; color:#2b2b2b; margin-bottom:5px} #container .location-section h4 {font-size:15px; font-weight:normal; color:#8a8a8a; margin-bottom:60px} #container .location-section h4 span:before {content:''; display:inline-block; width:1px; height:12px; margin:0 10px; background:#ccc; vertical-align:-1px} #container .location-section .method-wrapper {border-top:3px solid #a46f0e} #container .location-section .method-wrapper .method-line {padding:30px; border-bottom:1px dotted #bbb} #container .location-section .method-wrapper .method-line p.title {font-size:20px; font-weight:normal; color:#a46f0e; margin-bottom:15px} #container .location-section .method-wrapper .method-line dl:after {content:''; clear:both; display:block} #container .location-section .method-wrapper .method-line dl dt, #container .location-section .method-wrapper .method-line dl dd {font-size:15px; padding:7px 0} #container .location-section .method-wrapper .method-line dl dt {clear:both; float:left; font-weight:normal; color:#2b2b2b; padding-right:20px} #container .location-section .method-wrapper .method-line dl dd {color:#6a6a6a} #container .location-section .method-wrapper .method-line dl dd .arrow:before {display:inline-block; content:'\e90b'; font-family:'xeicon'; margin:0 8px} #container .location-section .method-wrapper .method-line .subway {display:inline-block; color:#fff} #container .location-section .method-wrapper .method-line .subway.line1 {background:#00498b} #container .location-section .method-wrapper .method-line .subway.line2 {background:#009246} #container .location-section .method-wrapper .method-line .subway.line3 {background:#f36630} #container .location-section .method-wrapper .method-line .subway.line4 {background:#00a2d1} #container .location-section .method-wrapper .method-line .subway.line5 {background:#5940ff} #container .location-section .method-wrapper .method-line .subway.line6 {background:#cc660d} #container .location-section .method-wrapper .method-line .subway.line7 {background:#4d8000} #container .location-section .method-wrapper .method-line .subway.line8 {background:#ff33a6} #container .location-section .method-wrapper .method-line dl dt.subway {position:relative; top:4px; margin-right:20px; padding:4px 10px} #container .location-section .method-wrapper .method-line span.subway {margin:0 5px; padding:0 6px; border-radius:50%} #container .location-section .method-wrapper .method-line .box {float:left; width:40%} #container .location-section .method-wrapper .method-line .box.last {width:20%; padding-top:42px} /* BUSINESS - 사업소개 */ #container .business-intro {padding-top:0 !important} #container .business-intro .business-info > li {position:relative; text-align:center} #container .business-intro .business-info > li:before {position:absolute; top:0; left:-1px; content:''; width:1px; height:100%; background:#eee} #container .business-intro .business-info > li:first-child:before {display:none} #container .business-intro .business-info > li .iconBox img {max-width:160px} #container .business-intro .business-info > li h3 {margin:40px 0 30px; font-size:18px; font-weight:600; color:#ff6c00} #container .business-intro .business-info > li p {color:#6a6a6a; line-height:1.8; word-break:keep-all} #container .business-detail {background:#f7f7f7} #container .business-detail .detail-items {overflow:hidden} #container .business-detail .detail-items > li {position:relative; height:500px; text-align:center; overflow:hidden; transition:width 0.3s ease-out} #container .business-detail .detail-items > li .bg {position:absolute; top:0; left:50%; width:600px; margin-left:-300px} #container .business-detail .detail-items > li .bg:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:0.2; transition:opacity 0.3s ease-out; z-index:10} #container .business-detail .detail-items > li .bg > img {display:block; max-width:100%} #container .business-detail .detail-items > li .info-box {position:relative; top:40%; padding:0 30px; transition:top 0.3s ease-out; z-index:20} #container .business-detail .detail-items > li .info-box span {display:block; font-size:13px; color:#ff6c00; margin-top:15px} #container .business-detail .detail-items > li .info-box h3 {font-size:20px; font-weight:500; color:#fff; margin-bottom:20px} #container .business-detail .detail-items > li .info-box p {font-size:14px; color:#fff; line-height:1.75; word-break:keep-all; width:300px; margin:auto auto 30px; opacity:0; transition:opacity 0.3s ease-out} #container .business-detail .detail-items > li .info-box a {opacity:0; transition:all 0.3s ease-out} /* BUSINESS - 사업소개 홍보영상 모달 */ #container .business-detail #promo-wrapper {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999} #container .business-detail #promo-wrapper > .mask-layer {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.75; z-index:100} #container .business-detail #promo-wrapper > .modal {position:absolute; top:50%; left:50%; width:80%; max-width:800px; height:450px; margin:-225px 0 0 -400px; box-shadow:0 0 60px 10px rgba(0,0,0,0.2) ; opacity:0; z-index:120; transform:translateY(-50px); transition:all 0.4s ease-out} #container .business-detail #promo-wrapper > .modal .btn-close {position:absolute; top:0; right:-60px; width:40px; height:40px; cursor:pointer; border:none; background:transparent; outline:none} #container .business-detail #promo-wrapper > .modal .btn-close span {position:absolute; display:block; top:16px; left:50%; width:42px; height:2px; margin-left:-21px; background:#fff} #container .business-detail #promo-wrapper > .modal .btn-close .closeline1 {transform:rotate(45deg)} #container .business-detail #promo-wrapper > .modal .btn-close .closeline2 {transform:rotate(-45deg)} #container .business-detail #promo-wrapper.play > .modal {opacity:1; transform:translateY(0)} /* BUSINESS - 사업 분야 */ #container .business-part1 {padding-top:20px !important} #container .business-part1 .part-items > li {margin-bottom:60px; text-align:center; vertical-align:top} #container .business-part1 .part-items > li:nth-child(4), #container .business-part1 .part-items > li:nth-child(5), #container .business-part1 .part-items > li:nth-child(6) {margin-bottom:0} #container .business-part1 .part-items > li .icon {width:80px; height:80px; font-size:34px; color:#ff6c00; text-align:center; line-height:76px; margin:auto; border:2px solid #e2e2e2; border-radius:50%; transition:all 0.3s ease-out} #container .business-part1 .part-items > li h3 {margin:30px 0 15px; font-size:22px; font-weight:500; color:#ff6c00} #container .business-part1 .part-items > li p {font-size:15px; color:#6a6a6a; line-height:1.8} #container .business-part2 {border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0} #container .business-part2 .choose-info .text-info h3 {font-size:28px; font-weight:normal; color:#2b2b2b} #container .business-part2 .choose-info .text-info h3:after {display:block; content:''; width:35px; height:2px; margin:20px 0 30px; background:#ffc600} #container .business-part2 .choose-info .text-info p {color:#4a4a4a; line-height:1.75; margin-bottom:25px} #container .business-part3 {border-bottom:1px solid #f0f0f0} #container .business-part3 #client-slide > .info {float:left; width:30%} #container .business-part3 #client-slide > .info h3 {font-size:22px; font-weight:normal; color:#2b2b2b; margin-bottom:20px} #container .business-part3 #client-slide > .info p {color:#6a6a6a; line-height:1.8} #container .business-part3 #client-slide > .info .controller {padding-top:30px; font-size:0} #container .business-part3 #client-slide > .info .controller > li {display:inline-block; font-size:15px; margin-right:3px} #container .business-part3 #client-slide > .info .controller > li a {display:block; width:32px; height:32px; font-size:13px; color:#000; text-align:center; line-height:30px; border:1px solid #e2e2e2; border-radius:50%; transition:all 0.3s ease} #container .business-part3 #client-slide > .info .controller > li.disabled a {color:#ccc !important; border-color:#e2e2e2 !important; background:#f9f9f9 !important; cursor:not-allowed} #container .business-part3 #client-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b} #container .business-part3 #client-slide > .slides {position:relative; float:right; width:65%; padding-top:60px; overflow:hidden} #container .business-part3 #client-slide > .slides ul {position:relative; width:5000px} #container .business-part3 #client-slide > .slides ul > li {float:left; text-align:center} #container .business-part3 #client-slide > .slides ul > li img {max-width:100%} #container .business-part4 {} #container .business-part4 .plan-list > li {font-size:14px; text-align:center; vertical-align:bottom} #container .business-part4 .plan-list > li .title {padding:35px} #container .business-part4 .plan-list > li.plan1 .title {background:linear-gradient(90deg, #42b574 0%, #84c450 100%)} #container .business-part4 .plan-list > li.plan2 .title {background:linear-gradient(90deg, #64aae1 0%, #79ccf2 100%)} #container .business-part4 .plan-list > li.plan3 .title {background:linear-gradient(90deg, #f5bf2f 0%, #f3a43d 100%)} #container .business-part4 .plan-list > li.plan4 .title {background:linear-gradient(90deg, #f54b0f 0%, #e50a0a 100%)} #container .business-part4 .plan-list > li .title > h3 {font-size:24px; font-weight:500; color:#fff} #container .business-part4 .plan-list > li .title > span {font-size:16px; font-weight:500; color:#fff; margin-bottom:15px; opacity:0.8} #container .business-part4 .plan-list > li .title > .price {font-size:24px; font-weight:500; color:#fff} #container .business-part4 .plan-list > li .title > .price span {font-size:18px; font-weight:500; color:#fff; vertical-align:5px} #container .business-part4 .plan-list > li .title > .price em {font-size:13px; color:#fff; padding-left:5px; vertical-align:-2px} #container .business-part4 .plan-list > li .info {padding:20px; border:1px solid #f0f0f0; border-top:none} #container .business-part4 .plan-list > li .info > ul {margin-bottom:20px} #container .business-part4 .plan-list > li .info > ul > li {padding:10px 0; color:#8b8b8b; border-top:1px solid #f0f0f0} #container .business-part4 .plan-list > li .info > ul > li:first-child {border-top:none} #container .business-part4 .plan-list > li .info > ul > li strong {font-weight:600; color:#2b2b2b; padding-right:5px} #container .business-part4 .plan-list > li .info .btn-black {padding-top:18px; padding-bottom:18px} /*------------------ 버튼 스타일 ------------------ */ .btn-circle {position:relative; display:inline-block; width:48px; height:48px; font-size:14px; color:#fff; text-align:center; line-height:44px; border:2px solid #fff; border-radius:50%; transition:all 0.3s ease; overflow:hidden; -webkit-mask-image:-webkit-radial-gradient(circle, white, black)} .btn-circle:before {position:absolute; top:0; left:0; content:''; width:100%; height:0; background:#fff; transition:height 0.3s ease; z-index:-2} .btn-circle:hover {color:#000 !important; border-color:transparent} .btn-circle:hover:before {height:100%} .btn-circle.dark {color:#000; border-color:#000} .btn-circle.dark:hover {color:#fff !important} .btn-circle.dark:before {background:#000} .btn-circle.grey {color:#888; line-height:46px; border-width:1px; border-color:#dedede} .btn-circle.grey:hover {color:#666 !important; border-color:#aaa} .btn-circle.grey:before {display:none} .btn-circle.disabled {color:#ccc !important; border-color:#f0f0f0 !important; background:#f9f9f9; cursor:not-allowed} .btn-arrow {position:relative; display:inline-block; font-size:15px; color:#666; text-align:left; line-height:1; padding:15px; width:230px; border:1px solid #dedede; transition:all 0.3s} .btn-arrow i {position:absolute; right:25px; transition:right 0.3s} .btn-arrow:hover {color:#ffa600} .btn-arrow:hover i {right:15px} .btn-arrow.white {color:#fff; border-color:#fff} .btn-arrow.white:hover {color:#2b2b2b; background:#fff} .btn-arrow.black {color:#fff; border-color:#353535; background:#353535} .btn-arrow.black:hover {border-color:#000; background:#000} .btn-load {cursor:not-allowed; color:#aaa; border-color:#ccc !important; background:#eee !important} .btn-black {display:inline-block; font-size:15px; color:#fff; line-height:1; padding:15px 25px; background:#4b4b4b; transition:all 0.4s} .btn-black:hover {background:#ffa600} /*.btn {display:inline-block; padding:0 25px; height:40px; line-height:38px; text-align:center; border:1px solid #dedede; background:transparent; cursor:pointer; outline:none; transition:all 0.3s ease}*/ .btn {display:inline-block; font-size:14px; line-height:33px; height:35px; padding:0 15px; border:1px solid transparent; border-radius:2px !important; background:#fff; cursor:pointer; outline:none} .btn-default {color:#6b6b6b !important; border:1px solid #e2e2e2; background:#fff} .btn-default:hover {color:#454545 !important; border-color:#aaa; background:#f9f9f9} .btn-function {color:#eee !important; border-color:#40424b; background:#40424b} .btn-function:hover {color:#fff !important; border-color:#32343f; background:#32343f} .btn-admin {color:#fff !important; border-color:#ffa600; background:#ffa600} .btn-admin:hover {border-color:#f29e00; background:#f29e00} .btn-danger {color:#fff !important; border-color:#d92f2f; background:#d92f2f} .btn-danger:hover {border-color:#cf2b2b; background:#cf2b2b} .btn.btn-primary {font-size:13px; color:#fff; border-color:#ff6c00; background:#ff6c00} .btn.btn-primary:hover {border-color:#ee4e00; background:#ee4e00} .btn.btn-lg {padding:0 25px; height:40px; line-height:38px} .btn-block {display:block; width:100%} .btn.btn-round {border-radius:30px !important} /*------------------ 인풋 및 셀렉트 스타일 ------------------ */ .frm-input {font-family:inherit !important; height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none} .frm-input:focus {border-color:#40424b; background:#f9f9f9} .frm-select {font-family:inherit !important; height:35px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; background:url(../../img/select_arrow.png) right 10px center no-repeat; outline:none} .frm-select:focus {border-color:#40424b; background-color:#f9f9f9} /*------------------ 게시판 스타일 ------------------ */ /* 리스트형 스타일 */ .tbl-brd-list {width:100%; margin-bottom:40px} .tbl-brd-list tr td {position:relative; padding:15px; border-bottom:1px solid #e2e2e2} .tbl-brd-list tr td[width="26"] {width:60px} .tbl-brd-list tr td, .tbl-brd-list font, .tbl-brd-list span {font-family:inherit !important; font-size:inherit !important; color:inherit !important} .tbl-brd-list .att_title {font-weight:500; color:#fff !important; text-align:center; border:none !important; background:#40424b !important} .tbl-brd-list tr:nth-child(even) {background:#f9f9f9} .tbl-brd-list tr td:first-child:before {position:absolute; top:0; left:0; content:''; width:5px; height:100%; background:rgba(0,0,0,0.15); opacity:0; transition:opacity 0.25s ease} .tbl-brd-list tr:hover td a {color:#000} .tbl-brd-read {width:100%; margin-bottom:40px; border-top:1px solid #40424b; table-layout:fixed} .tbl-brd-read tr td {height:auto !important; padding:15px; border-bottom:1px solid #e2e2e2} .tbl-brd-read tr td, .tbl-brd-read tr td font, .tbl-brd-read tr td span {font-family:inherit !important; font-size:inherit !important} .tbl-brd-read .board_bgcolor {font-weight:500; color:#40424b; background-color:transparent !important} .tbl-brd-read .board_bgcolor font {color:#40424b !important} /* FAQ 스타일 */ .tbl-brd-faq {width:100%; margin-bottom:40px; border-top:1px solid #40424b} .tbl-brd-faq tr td {background:#fff !important} .tbl-brd-faq .board_bgcolor:after {display:inline-block; content:'Q'; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#40424b} .tbl-brd-faq .board_bgcolor font {display:none} .tbl-brd-faq .bbsnewf5 {position:relative} .tbl-brd-faq .bbsnewf5:after {position:absolute; top:0; right:15px; content:'\e941'; font-family:'xeicon'; font-size:14px; color:#454545; line-height:61px} .tbl-brd-faq .bbsnewf5.open:after {content:'\e944'} .tbl-brd-faq .reply-row {display:none} .tbl-brd-faq .reply-row.open {display:table-row} .tbl-brd-faq .reply-row td {padding:15px 35px 15px; background:#f7f7f7 !important} .tbl-brd-faq .reply-row td .reply-block {float:left; display:block; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#ffa600} .tbl-brd-faq .reply-row td .reply-container {margin-left:80px} /* 갤러리형 스타일 */ div[class^=photo-grid-] .photo-grid-inner {margin:0 -15px} div[class^=photo-grid-] .photo-grid-inner:after {content:''; clear:both; display:block} div[class^=photo-grid-] .photo-grid-inner > table {position:relative; float:left; margin-bottom:30px; padding:0 15px; overflow:hidden} div[class^=photo-grid-] .photo-grid-inner > table a {position:relative; display:block; width:100%; height:100%; overflow:hidden} div[class^=photo-grid-] .photo-grid-inner > table img {width:100% !important; height:auto !important} div[class^=photo-grid-] .photo-grid-inner > table .overlay {position:absolute; top:80%; left:0; right:0; height:100%; background:rgba(255,166,0,0.85); opacity:0; z-index:5; transition:all 0.35s ease} div[class^=photo-grid-] .photo-grid-inner > table .post-info {position:absolute; bottom:20px; left:30px; text-align:left; opacity:0; z-index:10; transition:all 0.35s ease} div[class^=photo-grid-] .photo-grid-inner > table .post-info h3 {font-size:16px; font-weight:normal; color:#fff} div[class^=photo-grid-] .photo-grid-inner > table .post-info h3:after {content:''; display:block; width:30px; height:1px; margin:15px 0; background:#fff} div[class^=photo-grid-] .photo-grid-inner > table .post-info span {font-size:12px; color:#fff} div[class^=photo-grid-] .photo-grid-inner > table:hover .overlay {top:0; opacity:1} div[class^=photo-grid-] .photo-grid-inner > table:hover .post-info {bottom:30px; opacity:1} div[class^=photo-grid-] .photo-grid-inner > table:last-child {display:none} div[class^=photo-grid-] .photo-grid-inner .board {float:none; clear:both; width:100%; padding-top:40px} .container-fluid div[class^=photo-grid-] .photo-grid-inner, .no-gap .photo-grid-inner {margin-left:0 !important; margin-right:0 !important} .container-fluid div[class^=photo-grid-] .photo-grid-inner > table, .no-gap .photo-grid-inner > table {margin-bottom:0 !important; padding-left:0 !important; padding-right:0 !important} .container-fluid div[class^=photo-grid-] .photo-grid-inner > table .overlay, .no-gap .photo-grid-inner > table .overlay {left:0 !important; right:0 !important} .container-fluid div[class^=photo-grid-] .photo-grid-inner > table .post-info, .no-gap .photo-grid-inner > table .post-info {left:30px} .container-fluid div[class^=photo-grid-] .photo-container {max-width:1200px; margin:auto} .photo-grid-2 .photo-grid-inner > table {width:50%} .photo-grid-3 .photo-grid-inner > table {width:33.333334%} .photo-grid-4 .photo-grid-inner > table {width:25%} .photo-grid-5 .photo-grid-inner > table {width:20%} .photo-grid-6 .photo-grid-inner > table {width:16.666667%} .photo-grid-7 .photo-grid-inner > table {width:14.285714%} .photo-grid-8 .photo-grid-inner > table {width:12.5%} /* 최근 게시물 - 리스트형 */ .tbl-brd-latest {width:100%; border-top:1px solid #e2e2e2; table-layout:fixed} .tbl-brd-latest td[width="1%"] {display:none} .tbl-brd-latest td[align="center"] {text-align:right} .tbl-brd-latest tr td {font-size:13px; font-weight:600; color:#888; padding:20px 30px; border-bottom:1px solid #e2e2e2} .tbl-brd-latest tr td a {font-size:18px; font-weight:300; color:#7b7b7b} .tbl-brd-latest tr td a:hover {color:#ffa600} /* 게시판 공통 */ /* 테이블 */ .board, .bbsnewf5 {font:inherit !important} .board-write {text-align:right; margin-bottom:30px} /* 뷰페이지 */ #post_area {min-height:150px} #post_area img {height:auto !important} /* 인풋 및 셀렉트 */ input#border {font-family:inherit !important; height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none} input#border:focus {border-color:#40424b; background:#f9f9f9} input#border[type=file] {width:100%; border:none} .board_desc select {height:35px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; background:url(../../img/select_arrow.png) right 10px center no-repeat; outline:none} .board_desc select:focus {border-color:#40424b; background-color:#f9f9f9} /* 카테고리 */ .board-category {margin-bottom:40px} .board-category ul {font-size:0; text-align:center} .board-category ul > li {display:inline-block; margin:0 2px; font-size:15px} .board-category ul > li a {display:block; padding:5px 10px} .board-category ul > li.active a {font-weight:500; color:#fff; background:#40424b !important} /* 페이징 */ .board-paging {margin-bottom:30px; font-size:0; text-align:center} .board-paging > b, .board-paging > a {display:inline-block; width:30px; height:30px; margin:0 3px; font-size:13px; line-height:28px; border:1px solid #e2e2e2; border-radius:50%} .board-paging > a {color:#6b6b6b} .board-paging > a:hover {color:#454545; border-color:#ccc; background:#f9f9f9} .board-paging > b {color:#fff !important; border-color:#40424b !important; background:#40424b !important} /* 검색 */ #ext_search input[type=text] {width:160px; height:35px; margin:0 5px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none} #ext_search input[type=text]:focus {border-color:#40424b; background:#f9f9f9} #ext_search select {min-width:80px; height:35px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; background:url(../../img/select_arrow.png) right 10px center no-repeat; outline:none} #ext_search select:focus {border-color:#40424b; background-color:#f9f9f9} /*------------------ 폼메일 스타일 ------------------ */ input.formmail_border {width:100%; height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none} input.formmail_border:focus {border-color:#40424b; background:#f9f9f9} input.formmail_border[name^=phone] {width:60px !important} input.formmail_border[type=file] {border:none} .formmail_cell_bgcolor textarea {width:100%; padding:10px; font-family:inherit !important; font-size:inherit !important; border:1px solid #e3e2e2; background:#fff; outline:none} .formmail_cell_bgcolor textarea:focus {border-color:#40424b; background:#f9f9f9} /* ---------------------------------------------------------- * 미디어 쿼리 ---------------------------------------------------------- */ /* PC */ @media screen and (min-width:1025px) { /*------------------ 메인페이지 스타일 ------------------ */ /* OUR TEAM */ #mainContainer #section5 .team-grid > li .container:hover {box-shadow:0 2px 18px 3px rgba(0,0,0,0.06)} /*#mainContainer #section5 .team-grid > li .container:hover .profile-img img {transform:scale(1.1)}*/ #mainContainer #section5 .team-grid > li .container:hover .info {margin-top:-30px} #mainContainer #section5 .team-grid > li .container:hover .info .sns-icons {opacity:1} /* OUR CLIENTS */ #mainContainer #section8 #main-client-slide .slides > li .container:hover {border-color:#e7e7e7; transform:translateY(-10px)} /*------------------ 서브페이지 스타일 ------------------ */ /* COMPANY - 회사소개 */ #container .about-section2 .team-info:hover > li {opacity:0.5} #container .about-section2 .team-info > li:hover {opacity:1} #container .about-section2 .team-info > li:hover:before {background:#333} /* BUSINESS - 사업소개 */ #container .business-detail .detail-items > li:hover .bg:before {opacity:0.5} #container .business-detail .detail-items > li:hover .info-box {top:25%} #container .business-detail .detail-items > li:hover .info-box p, #container .business-detail .detail-items > li:hover .info-box a {opacity:1} #container .business-detail .detail-items > li.on {width:42%} #container .business-detail .detail-items > li.off {width:29%} /* BUSINESS - 사업분야 */ #container .business-part1 .part-items > li:hover .icon {color:#fff; border-color:#ff6c00; background:#ff6c00; box-shadow:0 2px 15px 3px rgba(0,0,0,0.12)} #container .business-part3 #client-slide > .slides ul > li img {opacity:0.5; transition:opacity 0.3s} #container .business-part3 #client-slide > .slides ul > li img:hover {opacity:1} /*------------------ 게시판 스타일 ------------------ */ /* 리스트형 스타일 */ .tbl-brd-list tr td a {transition:color 0.4s ease} .tbl-brd-list tr:hover td:first-child:before {opacity:1} /* 게시판 공통 */ /* 카테고리 */ .board-category ul > li a:hover {background:#f7f7f7} } /* 태블릿 */ @media screen and (max-width:1024px) { /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {height:600px} #keyVisual .slides > li .text {top:40%; padding:0 50px} #keyVisual .slides > li .text h2 {font-size:48px} #keyVisual .owl-stage-outer .owl-item > div .text {top:40%; padding:0 50px} #keyVisual .owl-stage-outer .owl-item > div .text h2 {font-size:48px} #keyVisual .slides-paging {bottom:150px; width:100%; margin-left:-50%; padding-left:50px} #keyVisual .scroll-down {left:50px; margin-left:0} /* 메인 섹션 공통 */ section.main-section .container-inner {padding:0 50px} section.main-section .main-title {padding-bottom:60px} section.main-section .main-title blockquote {font-size:15px} section.main-section .main-title blockquote:before {position:absolute; top:7px; left:0; content:''; width:1px; height:40px; background:#e2e2e2} /* ABOUT */ #mainContainer #section1 .about-grid > li {margin-bottom:50px} #mainContainer #section1 .about-grid > li:nth-child(3), #mainContainer #section1 .about-grid > li:nth-child(4) {margin-bottom:0} /* PROCESS */ #mainContainer #section3 {} #mainContainer #section3 .process-wrapper > .process > div {width:100% !important} #mainContainer #section3 .process-wrapper > .process > .imgBox {float:none; height:400px; margin-bottom:0; padding-bottom:0} #mainContainer #section3 .process-wrapper > .process > .infoBox {float:none; margin-bottom:0; padding:50px 0 70px} #mainContainer #section3 .process-wrapper > .process.left > div {float:none} /* OUR TEAM */ #mainContainer #section5 .team-grid > li {margin-bottom:50px} #mainContainer #section5 .team-grid > li:nth-child(3), #mainContainer #section5 .team-grid > li:nth-child(4) {margin-bottom:0} #mainContainer #section5 .team-grid > li .container .info .sns-icons {opacity:1} /* PARALLAX */ #mainContainer #section6 {padding:200px 0} #mainContainer #section6 .text h2 {font-size:48px} /* LATEST ARTICLES */ #mainContainer #section7 .sub-title {float:none; width:100%} #mainContainer #section7 .sub-title .tab-items {float:left; width:70%; padding-top:30px} #mainContainer #section7 .sub-title .tab-items:after {display:none} #mainContainer #section7 .sub-title .tab-items > li {display:inline-block; margin:0 15px 0 0} #mainContainer #section7 .sub-title .link-all {float:right; padding-top:32px} #mainContainer #section7 .article-tab {display:none; position:absolute; top:150px; left:0; width:100%; padding:10px 50px 0 50px} #mainContainer #section7 .tab-spacer {height:340px} /* OUR CLIENTS */ #mainContainer #section8 #main-client-slide .slides > li {width:25%} #mainContainer #section8 #main-client-slide .slides > li .container {border-width:1px; border-color:#e7e7e7} #mainContainer #section8 #main-client-slide .slides > li .container img {opacity:1} /* CONTACT */ #mainContainer #section9 #map {float:none; width:100%; height:450px; min-height:inherit; margin-bottom:0; padding-bottom:0} #mainContainer #section9 .form-container {float:none; width:100%; max-width:inherit; margin-bottom:0; padding:50px} #mainContainer #section9 .form-container h2 {font-size:26px; font-weight:500; color:#fff; margin-bottom:30px} #mainContainer #section9 .form-container .input-wrap {margin-bottom:15px} #mainContainer #section9 .form-container .input-wrap input[type=text], #mainContainer #section9 .form-container .input-wrap input[type=password], #mainContainer #section9 .form-container .input-wrap textarea {width:100%; color:#666; border:none; border-bottom:1px solid #40464c; background:transparent; outline:none; transition:all 0.3s} #mainContainer #section9 .form-container .input-wrap input[type=text]:focus, #mainContainer #section9 .form-container .input-wrap input[type=password]:focus, #mainContainer #section9 .form-container .input-wrap textarea:focus {color:#fff; border-color:#fff} #mainContainer #section9 .form-container .input-wrap input[type=text], #mainContainer #section9 .form-container .input-wrap input[type=password] {height:45px} #mainContainer #section9 .form-container .input-wrap textarea {height:90px; resize:none} #mainContainer #section9 .form-container .input-wrap .left {float:left; width:48%} #mainContainer #section9 .form-container .input-wrap .right {float:right; width:48%} #mainContainer #section9 .form-container button[type=submit] {margin:30px 0 60px} #mainContainer #section9 .form-container dl dt, #mainContainer #section9 .form-container dl dd {font-size:13px; line-height:1.75} #mainContainer #section9 .form-container dl dt {clear:both; float:left; width:105px; font-family:'Quicksand','Noto Sans KR',sans-serif; font-weight:600; color:#666} #mainContainer #section9 .form-container dl dt i {margin-right:8px; vertical-align:-1px} #mainContainer #section9 .form-container dl dd {color:#eee; margin-bottom:15px; padding-left:100px} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:380px; overflow:hidden} #subVisual > .visual_img {top:-20px; width:1800px; margin-left:-900px} /* 섹션 공통 */ #container .container-inner {padding:0 30px} #container section.sub-section {position:relative; padding:60px 0} /* COMPANY - 회사소개 */ #container .about-main {padding:130px 0} #container .about-main h3 {font-size:21px; margin-bottom:70px} #container .about-main .company-info {padding:0 30px} #container .about-section2 .team-info > li {margin-bottom:50px} /* BUSINESS - 사업소개 */ #container .business-intro .business-info > li {margin-bottom:60px} #container .business-intro .business-info > li:nth-child(3), #container .business-intro .business-info > li:nth-child(4) {margin-bottom:0} #container .business-intro .business-info > li:before {display:none} #container .business-intro .business-info > li .iconBox img {max-width:130px} #container .business-intro .business-info > li h3 {margin:30px 0 20px} #container .business-detail .detail-items > li .bg:before {opacity:0.5} #container .business-detail .detail-items > li .info-box {top:20%} #container .business-detail .detail-items > li .info-box h3 {font-size:18px} #container .business-detail .detail-items > li .info-box p {width:100%; padding:0; opacity:1} #container .business-detail .detail-items > li .info-box a {opacity:1} /* BUSINESS - 사업소개 홍보영상 모달 */ #container .business-detail #promo-wrapper > .modal {width:80%; max-width:inherit; height:280px; margin:-140px 0 0 -40%; box-shadow:0 0 40px 10px rgba(0,0,0,0.2)} #container .business-detail #promo-wrapper > .modal iframe {height:280px} #container .business-detail #promo-wrapper > .modal .btn-close {right:-50px; width:35px; height:35px} #container .business-detail #promo-wrapper > .modal .btn-close span {top:12px; width:30px; margin-left:-15px} /* BUSINESS - 사업분야 */ #container .business-part4 .plan-list > li {margin-bottom:40px; vertical-align:top} #container .business-part4 .plan-list > li .title {padding:30px} #container .business-part4 .plan-list > li .title > h3 {font-size:20px} #container .business-part4 .plan-list > li .title > span {font-size:15px} #container .business-part4 .plan-list > li .title > .price {font-size:20px} #container .business-part4 .plan-list > li .title > .price span {font-size:16px} /*------------------ 게시판 스타일 ------------------ */ /* 갤러리형 스타일 */ div[class^=photo-grid-] .photo-grid-inner > table {width:50% !important} div[class^=photo-grid-] .photo-grid-inner > table a {display:block} .container-fluid div[class^=photo-grid-] .photo-container {padding:0 50px} } @media screen and (max-width:768px) { /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {height:400px} #keyVisual .owl-stage-outer .owl-item > div .text {top:35%; padding:0 15px} #keyVisual .owl-stage-outer .owl-item > div .text h2 {font-size:28px} #keyVisual .slides-paging {left:0; bottom:130px; width:100%; margin-left:0; padding-left:0; text-align:center} #keyVisual .slides-paging > a {display:inline-block; font-size:0; text-indent:-9999em; width:20px; height:3px; margin:0 3px; background:#fff; opacity:0.5} #keyVisual .slides-paging > a:after {display:none} #keyVisual .slides-paging > a.active {opacity:1} #keyVisual .scroll-down {bottom:25px; left:50%; margin-left:-24px} /* 메인 섹션 공통 */ section.main-section {padding:60px 0} section.main-section .container-inner {padding:0 15px} section.main-section .main-title {padding-bottom:40px; text-align:center} section.main-section .main-title h2 {float:none; width:100%; font-size:24px; padding-bottom:30px} section.main-section .main-title blockquote {float:none; width:100%; font-size:14px; text-align:center; padding:0} section.main-section .main-title blockquote:before {position:static; display:block; margin:auto auto 20px; width:30px; height:2px; background:#ff6c00} section.main-section .sub-title {float:none; width:100%; padding-bottom:30px; text-align:center} section.main-section .sub-title h2 {font-size:22px} section.main-section hr.divider {padding-top:60px} /* 메인 드롭다운 공통 */ .main-dropdown {position:relative; margin-bottom:40px} .main-dropdown > a {position:relative; display:block !important; width:100%; height:45px; padding:0 15px; font-size:13px; color:#fff; line-height:45px; text-align:left; background:#ffa600} .main-dropdown > a:after {position:absolute; right:15px; content:'\e941'; font-family:'xeicon'; color:#fff; transition:transform 0.35s ease-out} .main-dropdown > .dropdown-list {position:absolute; display:none; top:45px; left:0; width:100%; border:1px solid #e2e2e2; border-top:none; z-index:100} .main-dropdown > .dropdown-list > li {display:block; width:100%; height:40px; padding:0 15px; color:#555; line-height:40px; text-align:left; background:#fff} .main-dropdown > .dropdown-list > li:after {display:none !important} .main-dropdown > .dropdown-list > li.active {color:#ff6c00 !important} .main-dropdown.active > a:after {transform:rotate(180deg)} .main-dropdown.active > .dropdown-list {display:block} /* ABOUT */ #mainContainer #section1 .about-grid > li {margin-bottom:40px !important} #mainContainer #section1 .about-grid > li:last-child {margin-bottom:0 !important} #mainContainer #section1 .about-grid > li h3 {font-size:15px; margin:20px 0 15px} #mainContainer #section1 .about-grid > li p {font-size:13px} /* WORKS */ #mainContainer #section2 .works-grid > table tr:last-child td {padding:25px 0 0 15px} #mainContainer #section2 .works-grid > table tr:last-child td:after {bottom:15px; left:15px} #mainContainer #section2 .works-grid > table tr td .board_output_gallery_subject a {padding:15px 0 0 15px; font-size:15px} /* PROCESS */ #mainContainer #section3 .process-wrapper > .process > .imgBox {height:280px} #mainContainer #section3 .process-wrapper > .process > .infoBox h4 {font-size:15px} #mainContainer #section3 .process-wrapper > .process > .infoBox p {font-size:13px} /* SERVICES */ #mainContainer #section4 .service-grid {float:none; width:100%} #mainContainer #section4 .service-grid {float:none; width:100%} #mainContainer #section4 .service-grid ul > li {text-align:center; margin-bottom:40px !important} #mainContainer #section4 .service-grid ul > li:last-child {margin-bottom:0 !important} #mainContainer #section4 .service-grid ul > li h3 {font-size:15px; margin:15px 0 10px} #mainContainer #section4 .service-grid ul > li p {font-size:13px} /* OUR TEAM */ #mainContainer #section5 .team-grid > li .container .info h3 {font-size:15px} #mainContainer #section5 .team-grid > li .container .info span {display:block; font-size:11px; font-weight:500; color:#777; letter-spacing:0.05em; text-transform:uppercase} /* PARALLAX */ #mainContainer #section6 {padding:170px 0; background-attachment:inherit !important; background-position:center top !important} #mainContainer #section6 .text h2 {font-size:32px} /* LATEST ARTICLES */ #mainContainer #section7 .sub-title h2 {margin-bottom:60px} #mainContainer #section7 .sub-title .tab-items {float:none; width:100%; padding:0; text-align:left} #mainContainer #section7 .sub-title .tab-items > li a {display:block; width:100%; height:100%} #mainContainer #section7 .sub-title .link-all {display:none} #mainContainer #section7 .article-tab {top:170px; padding:0 15px} #mainContainer #section7 .tab-spacer {height:240px} /* OUR CLIENTS */ #mainContainer #section8 .main-title .controller {margin-bottom:-20px; padding-top:30px} #mainContainer #section8 #main-client-slide .slides > li {width:25%} #mainContainer #section8 #main-client-slide .slides > li .container {height:90px} /* CONTACT */ #mainContainer #section9 #map {height:350px} #mainContainer #section9 .form-container {padding:40px 15px} #mainContainer #section9 .form-container h2 {font-size:24px} #mainContainer #section9 .form-container .input-wrap textarea {height:80px} #mainContainer #section9 .form-container button[type=submit] {margin:20px 0 50px} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:260px} #subVisual > .visual_img {top:-10px; width:1100px; margin-left:-550px} #subVisual > .title h2 {font-size:28px} /* 페이지 내비게이션 */ #breadcrumbs > .container > .home {display:none} #breadcrumbs > .container > div {width:50%} #breadcrumbs > .container > div > a {height:40px; padding:0 15px; font-size:14px; line-height:40px} #breadcrumbs > .container > div:last-child > a {border-right:none} #breadcrumbs > .container > div > a:after {right:10px; font-size:13px} #breadcrumbs > .container > div > ul {top:40px; padding:15px 20px} #breadcrumbs > .container > div > ul li a {font-size:14px} /* 섹션 공통 */ #container .container-inner {padding:0 15px} #container section.sub-section {position:relative; padding:50px 0} #container .main-title {padding:35px 0} #container .main-title h2 {font-size:22px} #container .main-title p {font-size:14px; width:80%; margin:25px auto auto} #container .main-title p br {display:none} /* COMPANY - 회사소개 */ #container .about-main {padding:60px 15px} #container .about-main h3 {font-size:16px; margin:auto auto 35px; width:80%; word-break:keep-all} #container .about-main .company-info {} #container .about-main .company-info > li {display:block; padding:35px 15px; border-bottom:1px solid rgba(255, 255, 255, 0.55); border-right:none} #container .about-main .company-info > li:first-child {border-left:none} #container .about-main .company-info > li:last-child {border-bottom:none} #container .about-main .company-info > li i {display:inline-block; font-size:36px; height:50px} #container .about-main .company-info > li h4 {font-size:15px; margin:5px 0 10px} #container .about-main .company-info > li p {font-size:13px; word-break:keep-all} #container .about-section1 .about-desc {font-size:15px; margin-bottom:35px} #container .about-section1 .about-info {margin-bottom:30px} #container .about-section1 .about-info dt, #container .about-section1 .about-info dd {font-size:13px; line-height:1} #container .about-section1 .about-info dt {float:none; width:100%; font-size:14px; border-top:1px solid #333; border-bottom:1px solid #aaa} #container .about-section1 .about-info dd {margin:0 0 40px 0px; border-top:none; border-bottom:1px solid #e2e2e2} #container .about-section2 .team-info > li:before {margin-bottom:25px} #container .about-section2 .team-info > li .detail h3 {font-size:15px; margin:25px 0 5px} #container .about-section2 .team-info > li .detail .subtit {font-size:12px; margin-bottom:15px} #container .about-section2 .team-info > li .detail .sns-link {margin-top:20px} #container .about-section2 .team-info > li .detail .sns-link > li {font-size:16px} #container .about-section2 .team-info > li .detail .sns-link > li a {font-size:16px} /* COMPANY - 연혁 */ #container .history-section .year-wrap:before {display:none} #container .history-section .year-wrap:last-child {padding-bottom:150px} #container .history-section .year-wrap > ul > li {margin-top:25px; padding-left:0 !important; padding-right:0 !important; text-align:center !important} #container .history-section .year-wrap > ul > li:before {position:relative; left:2px; display:block; width:10px; height:10px; margin:0 auto 20px; border-width:1px} #container .history-section .year-wrap > ul > li h3 {font-size:18px; margin-bottom:15px} #container .history-section .year-wrap > ul > li dl dt, #container .history-section .year-wrap > ul > li dl dd {font-size:13px} #container .history-section .finish-box {width:100px; height:100px; margin-left:-50px; border-width:4px} #container .history-section .finish-box p {font-size:13px} #container .history-section .finish-box:after {position:absolute; bottom:96px; left:50%; content:''; width:1px; height:35px; background:#eee} /* COMPANY - 오시는길 */ #container .location-section #map {height:350px} #container .location-section h3 {font-size:16px} #container .location-section h4 {font-size:14px; margin-bottom:40px} #container .location-section .method-wrapper .method-line {padding:20px 0} #container .location-section .method-wrapper .method-line p.title {font-size:16px} #container .location-section .method-wrapper .method-line dl dt, #container .location-section .method-wrapper .method-line dl dd {font-size:13px; padding:0} #container .location-section .method-wrapper .method-line dl dt {float:none; margin-bottom:5px; font-weight:600} #container .location-section .method-wrapper .method-line dl dd {margin-bottom:10px; line-height:1.65} #container .location-section .method-wrapper .method-line dl dt.subway {position:static; margin-right:20px; padding:4px 10px} #container .location-section .method-wrapper .method-line span.subway {padding:0 4px; line-height:1.3} #container .location-section .method-wrapper .method-line .box {float:none; clear:both; width:100%; padding-top:20px} #container .location-section .method-wrapper .method-line .box.last {width:100%; padding:0 !important} #container .location-section .method-wrapper .method-line .box:first-child {padding-top:0 !important; padding-bottom:10px} #container .location-section .method-wrapper .method-line .box:nth-child(2) {border-top:1px dotted #bbb} /* BUSINESS - 사업소개 */ #container .business-intro .business-info > li {margin-bottom:45px} #container .business-intro .business-info > li:nth-child(3) {margin-bottom:45px !important} #container .business-intro .business-info > li h3 {font-size:16px; margin:25px 0 10px} #container .business-intro .business-info > li p {font-size:13px} #container .business-detail .detail-items > li {margin-bottom:15px} #container .business-detail .detail-items > li:last-child {margin-bottom:0} #container .business-detail .detail-items > li .bg {width:120%; margin-left:-60%} #container .business-detail .detail-items > li .info-box {padding:0 20px} #container .business-detail .detail-items > li .info-box span {font-size:12px} #container .business-detail .detail-items > li .info-box h3 {font-size:16px} /* BUSINESS - 사업소개 홍보영상 모달 */ #container .business-detail #promo-wrapper > .modal .btn-close {right:-35px} /* BUSINESS - 사업분야 */ #container .business-part1 .part-items > li {margin-bottom:40px !important} #container .business-part1 .part-items > li:last-child {margin-bottom:0 !important} #container .business-part1 .part-items > li h3 {margin:20px 0 10px; font-size:16px} #container .business-part1 .part-items > li p {font-size:13px} #container .business-part2 .choose-info .text-info {margin-top:35px} #container .business-part2 .choose-info .text-info h3 {font-size:18px} #container .business-part2 .choose-info .text-info h3:after {width:25px; margin:15px 0 20px} #container .business-part2 .choose-info .text-info p {font-size:13px; margin-bottom:20px} #container .business-part3 #client-slide > .info {float:none; width:100% !important; margin-bottom:35px} #container .business-part3 #client-slide > .info h3 {font-size:16px} #container .business-part3 #client-slide > .info p {font-size:13px} #container .business-part3 #client-slide > .info .controller {padding-top:25px} #container .business-part3 #client-slide > .info .controller > li {font-size:13px} #container .business-part3 #client-slide > .info .controller > li a {width:28px; height:28px; font-size:12px; line-height:26px} #container .business-part3 #client-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b} #container .business-part3 #client-slide > .slides {float:none; width:100% !important; padding-top:0} #container .business-part4 .plan-list > li {margin-bottom:25px} #container .business-part4 .plan-list > li:last-child {margin-bottom:40px} #container .business-part4 .plan-list > li .info > ul > li {font-size:13px} /*------------------ 버튼 스타일 ------------------ */ .btn-arrow {font-size:14px} .btn {font-size:13px} /*------------------ 게시판 스타일 ------------------ */ /* 리스트형 스타일 */ .tbl-brd-list tr td, .tbl-brd-list font, .tbl-brd-list span {font-size:13px !important} .tbl-brd-read tr td, .tbl-brd-read tr td font, .tbl-brd-read tr td span {font-size:13px !important} /* FAQ 스타일 */ .tbl-brd-faq .board_bgcolor {width:60px !important} .tbl-brd-faq .reply-row td {padding:15px !important} .tbl-brd-faq .reply-row td .reply-block {float:left; display:block; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#ffa600} .tbl-brd-faq .reply-row td .reply-container {margin-left:60px} /* 특정 열 숨김처리 */ .att_title[rel="선택"] {display:none} .att_title[rel="번호"] {display:none} .att_title[rel="작성자"] {display:none} .bbschk {display:none} .bbsno {display:none} .bbswriter {display:none} /* 갤러리형 스타일 */ div[class^=photo-grid-] .photo-grid-inner {margin:0} div[class^=photo-grid-] .photo-grid-inner > table {width:50% !important; margin:0; padding:0} div[class^=photo-grid-] .photo-grid-inner > table .overlay {left:0; right:0} div[class^=photo-grid-] .photo-grid-inner > table .post-info {left:15px; bottom:5px} div[class^=photo-grid-] .photo-grid-inner > table:hover .post-info {bottom:15px} div[class^=photo-grid-] .photo-grid-inner > table .post-info h3 {font-size:15px} div[class^=photo-grid-] .photo-grid-inner > table .post-info h3:after {width:20px; margin:10px 0} div[class^=photo-grid-] .photo-grid-inner > table .post-info span {font-size:11px} .container-fluid div[class^=photo-grid-] .photo-container {padding:0 15px} /* 최근 게시물 - 리스트형 */ .tbl-brd-latest tr td {font-size:12px; padding:20px} .tbl-brd-latest tr td a {font-size:14px} /* 게시판 공통 */ /* 카테고리 */ .board-category ul > li {font-size:13px} .board-category ul > li a {display:block; padding:5px 10px} } /* 저해상도 모바일 */ @media screen and (max-width:480px) { /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:200px} #subVisual > .visual_img {top:-10px; width:960px; margin-left:-480px} #subVisual > .title h2 {font-size:28px} }