@charset "euc-kr"; /********************************************** * 버전 : 1.6 * 릴리즈 : 2017-10-26 **********************************************/ /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {position:relative; height:1050px; overflow:hidden} #keyVisual .bx-wrapper {height:100%; border:none; background:transparent} #keyVisual .bx-wrapper .bx-viewport {height:100% !important} #keyVisual .slides {position:relative; height:100%} #keyVisual .slides > li {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important} #keyVisual .slides > li.slide-1 {background:url(../../img/visual3.jpg) center top no-repeat} #keyVisual .slides > li.slide-2 {background:url(../../img/visual2.jpg) center top no-repeat} #keyVisual .slides > li.slide-3 {background:url(../../img/visual1.jpg) center top no-repeat} #keyVisual .slides > li img {margin-top:0px; position:relative; float:right;} #keyVisual .slides > li .text {position:relative; top:50%; max-width:1200px; margin:-110px auto 0; color:#fff} #keyVisual .slides > li .text span {font-family: 'Raleway', sans-serif; display:block; font-size:16px; letter-spacing:1px; text-shadow:0 2px 2px rgba(0,0,0,0.15)} #keyVisual .slides > li .text h2 {font-family: 'Eoe_Zno_M'; font-size:50px; font-weight:400; margin:15px 0 80px 0px; line-height:1.2; text-shadow:0 0 12px rgba(0,0,0,0.2)} #keyVisual .slides > li .text p {font-size:0px} #keyVisual .slides > li .text .btn-arrow:hover {box-shadow:0 2px 20px 10px rgba(0,0,0,0.0.5)} #keyVisual .bx-controls-direction {opacity:0; transition:opacity 0.3s} #keyVisual:hover .bx-controls-direction {opacity:1} #keyVisual .bx-controls-direction a {position:absolute; top:60%; width:80px; height:100px; font-size:32px; text-align:center; line-height:100px; color:#fff !important; text-indent:inherit; margin-top:-50px; z-index:30 !important} #keyVisual .bx-prev {left:40px} #keyVisual .bx-next {right:40px} #keyVisual .bx-pager {position:absolute; bottom:50px; left:0; width:100%} #keyVisual .bx-pager .bx-pager-item {display:inline-block; margin:0 4px} #keyVisual .bx-pager .bx-pager-item a {display:block; width:30px; height:10px; text-indent:-9999em; margin:0; border-radius:2; background:#92d800; opacity:1; transition:all 0.35s ease-in-out} #keyVisual .bx-pager .bx-pager-item a.active {width:120px; background:#0168b7; opacity:1} /* 섹션 공통 */ #container img {max-width:100%; top} #container > .inner img.img_tab, #container > .inner img.img_mob { align:center; display:none !important} #mainContainer {position:relative; overflow:hidden} #mainContainer .main-section {position:relative; padding:40px 0} #mainContainer .main-section:before, #mainContainer .main-section:after {content:''; display:block} #mainContainer .main-section:after {clear:both} #mainContainer .main-section .main-title {margin-bottom:25px; text-align:center} #mainContainer .main-section .main-title h2 {font-size:24px; font-weight:500; color:#222; letter-spacing:-1px; margin-bottom:-10px} #mainContainer .main-section .main-title h2:before {content:''; display:block; margin:0 auto 15px; width:1px; height:40px; background:#dedede} #mainContainer .main-section .main-title h2:after {content:''; display:block; margin:0 auto 15px; margin-top:10px; margin-bottom:40px; width:80px; height:4px; background:#2763ba} #mainContainer .main-section .main-title p {font-size:18px; color:#333} #mainContainer .main-section > .container {position:relative; max-width:1200px; margin:auto} #mainContainer .main-section > .container:before, #mainContainer .main-section > .container:after {content:''; display:block} #mainContainer .main-section > .container:after {clear:both} #mainContainer .main-section .btn-bottom {clear:both; margin-top:50px; text-align:center} /* 메인 섹션 - OUR BUSINESS */ #mainContainer #section1 {} #mainContainer #section1 .business-grid > li {text-align:center} #mainContainer #section1 .business-grid > li .imgBox {position:relative; overflow:hidden} #mainContainer #section1 .business-grid > li .imgBox:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:0; transition:opacity 0.25s ease-in-out; z-index:10} #mainContainer #section1 .business-grid > li .imgBox img {display:block; width:100%; height:174px; transition:transform 0.25s ease-in-out} #mainContainer #section1 .business-grid > li:hover .imgBox:before {opacity:0.2} #mainContainer #section1 .business-grid > li:hover .imgBox img {transform:scale(1.15)} #mainContainer #section1 .business-grid > li .title {font-size:18px; font-weight:400; color:#333; line-height:1.25; margin:15px 0} #mainContainer #section1 .business-grid > li p {font-size:14px; font-weight:300; color:#7b7b7b; line-height:1.45; word-break:keep-all; margin-bottom:20px} /* 메인 섹션 - 패럴랙스 이미지 */ #mainContainer #section2 {padding:35px 0; margin-top:0px} #mainContainer #section2:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:.25; z-index:5} #mainContainer #section2 .text {position:relative; text-align:center; z-index:10} #mainContainer #section2 .text h2 {font-size:64px; font-weight:300; color:#fff} #mainContainer #section22 {padding:0px 0} #mainContainer #section22:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#e3e8ec; opacity:100; z-index:5} #mainContainer #section22 .text {position:relative; text-align:center; z-index:10} #mainContainer #section22 .text h2 {font-size:64px; font-weight:300; color:#fff} #mainContainer #section23 {padding:0px 0} #mainContainer #section23:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#f3f3f3; opacity:100; z-index:5} #mainContainer #section23 .text {position:relative; text-align:center; z-index:10} #mainContainer #section23 .text h2 {font-size:64px; font-weight:300; color:#fff} /* 메인 섹션 - PRODUCT */ #mainContainer #section4 {background:#fcfcfc} #mainContainer #section4 .photo-grid {position:relative} #mainContainer #section4 .photo-grid .owl-stage-outer {width:100%; overflow:hidden; padding-bottom:30px} #mainContainer #section4 .photo-grid .owl-stage:after {content:''; clear:both; display:block} #mainContainer #section4 .photo-grid .owl-item {float:left} #mainContainer #section4 .photo-grid .owl-nav > div {position:absolute; top:50%; font-size:35px; cursor:pointer; margin-top:-53px} #mainContainer #section4 .photo-grid .owl-nav .owl-prev {left:-40px} #mainContainer #section4 .photo-grid .owl-nav .owl-next {right:-50px} #mainContainer #section4 .photo-grid table {position:relative; width:100% !important; box-shadow:0 30px 40px -20px rgba(0,0,0,0.1); transition:transform 0.3s ease} #mainContainer #section4 .photo-grid table td {background:#fff} #mainContainer #section4 .photo-grid table .board_output_gallery_img {position:relative; overflow:hidden} #mainContainer #section4 .photo-grid table .board_output_gallery_img img {display:block; width:100%; height:237px !important; transition:transform .3s} #mainContainer #section4 .photo-grid table br {display:none} #mainContainer #section4 .photo-grid table .board_output_gallery_img a:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:0; z-index:5; transition:opacity .3s} #mainContainer #section4 .photo-grid table tr:last-child td {position:relative; margin-top:10px; padding:30px; height:180px; vertical-align:top} #mainContainer #section4 .photo-grid table tr span {text-align:left !important} #mainContainer #section4 .photo-grid table .board_output_gallery_subject {display:block; margin-bottom:20px} #mainContainer #section4 .photo-grid table .board_output_gallery_subject a {font-size:15px; font-weight:700; color:#2b2b2b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #mainContainer #section4 .photo-grid table .board_output_gallery_description {display:-webkit-box; font-size:14px; color:#9a9a9a; line-height:1.5; max-height:63px; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis} #mainContainer #section4 .photo-grid table .board_output_gallery_description:before {position:absolute; bottom:30px; left:30px; content:'read more'; color:#666} #mainContainer #section4 .photo-grid table .board_output_gallery_description:after {position:absolute; bottom:29px; left:105px; content:'\e907'; font-family: 'Eoe_Zno_B'; color:#666; transition:left 0.3s} #mainContainer #section4 .photo-grid table:hover .board_output_gallery_description:before, #mainContainer #section4 .photo-grid table:hover .board_output_gallery_description:after {color:#0168b7} #mainContainer #section4 .photo-grid table:hover .board_output_gallery_description:after {left:110px} #mainContainer #section4 .photo-grid table:hover .board_output_gallery_img a img {transform:scale(1.125)} #mainContainer #section4 .photo-grid table:hover .board_output_gallery_img a:before {opacity:0.25} #mainContainer #section11 {background:#f4f4f4; padding:0px 0} #mainContainer #section11 .text {position:relative; text-align:center; z-index:10} #mainContainer #section11 .text h2 {font-size:64px; font-weight:300; color:#fff} /* 메인 섹션 - LINK */ #mainContainer #section6 .link-part3 {border-bottom:1px solid #f0f0f0} #mainContainer #section6 .link-part3 #link-slide > .info {float:left; width:30%} #mainContainer #section6 .link-part3 #link-slide > .info h3 {font-size:22px; font-weight:normal; color:#2b2b2b; margin-bottom:20px} #mainContainer #section6 .link-part3 #link-slide > .info p {color:#6a6a6a; line-height:1.8} #mainContainer #section6 .link-part3 #link-slide > .info .controller {padding-top:30px; font-size:0} #mainContainer #section6 .link-part3 #link-slide > .info .controller > li {display:inline-block; font-size:15px; margin-right:3px} #mainContainer #section6 .link-part3 #link-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} #mainContainer #section6 .link-part3 #link-slide > .info .controller > li.disabled a {color:#ccc !important; border-color:#e2e2e2 !important; background:#f9f9f9 !important; cursor:not-allowed} #mainContainer #section6 .link-part3 #link-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b} #mainContainer #section6 .link-part3 #link-slide > .slides {position:relative; float:right; width:65%; padding-top:60px; overflow:hidden} #mainContainer #section6 .link-part3 #link-slide > .slides ul {position:relative; width:5000px} #mainContainer #section6 .link-part3 #link-slide > .slides ul > li {float:left; text-align:center} #mainContainer #section6 .link-part3 #link-slide > .slides ul > li img {max-width:100%} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {position:relative; height:400px; 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: 'Eoe_Zno_B'; font-size:40px; font-weight:500; color:#000; text-align:center; letter-spacing:-1px; padding-top:120px; vertical-align:middle; opacity:0; text-shadow:0 3px 8px rgba(0, 0, 0, 0.15); transform:translateY(30px); transition:all 1s ease; transition-delay:1s} #subVisual.load > .visual_img {transform:scale(1.0)} #subVisual.load > .title h2 {opacity:1; transform:translateY(0)} .sub-top-01 {background:url(../../img/subvisual1.jpg) center no-repeat; text-align:center; width:100%; background-size:cover;} .sub-top-02 {background:url(../../img/subvisual2.jpg) center no-repeat; text-align:center; width:100%; background-size:cover;} .sub-top-03 {background:url(../../img/subvisual3.jpg) center no-repeat; text-align:center; width:100%; background-size:cover;} .sub-top-04 {background:url(../../img/subvisual4.jpg) center no-repeat; text-align:center; width:100%; background-size:cover;} .sub-top-05 {background:url(../../img/subvisual5.jpg) center no-repeat; text-align:center; width:100%; background-size:cover;} .slogan-box {padding:60px 0; height:600px;} .slogan-tit {font-size:60px; font-family:'Montserrat'; font-weight:800; color:#fff; padding-top:0px; } .slogan-tit2 {font-size:20px; font-weight:600; color:#fff; padding-top:200px;} .slogan-box > p {color:#fff; font-size:20px; font-weight:400; line-height:30px; padding-top:25px;} /* 페이지 내비게이션 */ #breadcrumbs {border-bottom:1px solid #000; background:#313131;} #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 #5a5a5a; border-right:1px solid #5a5a5a} #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 #5a5a5a} #breadcrumbs > .container > div > a.current {font-weight:500; color:#fff} #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%; top} #container > .inner img.img_tab, #container > .inner img.img_mob {display:none !important} #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:30px 0px 30px 0px} #container .main-title {padding:40px 0 50px 0; text-align:center} #container .main-title.innerTitle {padding-top:0} #container .main-title h2 {font-size:45px; font-weight:700; letter-spacing:-2px; color:#2b2b2b} #container .main-title p {font-size:17px; font-weight:400; 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:100px 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-main2 {padding:70px 0; background:url(../../img/about_main_bg.jpg) center top no-repeat; background-size:cover;} #container .about-main2 h3 {font-size:24px; font-weight:normal; color:#fff; text-align:center; line-height:1.6; margin-bottom:80px} #container .about-main2 .company-info {display:table; width:100%; max-width:1000px; margin:auto; table-layout:fixed} #container .about-main2 .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-main2 .company-info > li:first-child {border-left:1px solid rgba(255, 255, 255, 0.55)} #container .about-main2 .company-info > li i {display:inline-block; font-size:48px; height:60px} #container .about-main2 .company-info > li h4 {font-size:18px; font-weight:600; margin:10px 0 15px} #container .about-main2 .company-info > li p {font-size:17px; line-height:1.35} #container .about-main2 .company-info > li p2 {font-size:14px; line-height:1.8} #container .about-section1 {padding-bottom:0; padding-top:80px !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; text-align:left} #container .about-section2 .team-info > li {transition:opacity 0.4s ease} #container .about-section2 .team-info > li:before {content:''; display:block; height:0px; margin-bottom:0px; 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:16px; font-weight:500; color:#2b2b2b; margin:35px 0 15px} #container .about-section2 .team-info > li .detail .subtit {display:block; font-size:14px; line-height:1.6; font-weight:300; color:#2b2b2b; 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:#0168b7} /* 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: 'Eoe_Zno_B'; font-size:24px; font-weight:300; color:#fff; text-align:center; line-height:80px; border-radius:50%; background:#0168b7; 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 #0168b7; 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:20px; font-weight:normal; color:#0168b7; margin-bottom:5px} #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: 'Eoe_Zno_B'; 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:#94b90f; 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.2; 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:bold; color:#000; margin-bottom:40px; margin-top:15px} #container .location-section h4 {font-size:16px; font-weight:normal; color:#434343; margin-bottom:20px} #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 #245a96; margin-top:50px} #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: 'Eoe_Zno_B'; 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.new {background:#db4e68} #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:20px 0 10px; font-size:22px; font-weight:600 } #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(15), #container .business-part1 .part-items > li:nth-child(15) {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.2s ease-out} #container .business-part1 .part-items > li h3 {margin:20px 0 15px; font-size:17px; font-weight:600; color:#1b1b1b} #container .business-part1 .part-items > li p {text-align:left; margin:auto; width:80%; font-size:14px; color:#6a6a6a; line-height:1.8} #container .business-part2 {border-top:0px solid #f0f0f0; border-bottom:0px solid #f0f0f0} #container .business-part2 .choose-info .text-info h3 {font-size:42px; font-family: 'Montserrat', sans-serif; font-weight:bold; color:#161616;} #container .business-part2 .choose-info .text-info h4 {font-size:24px; font-weight:bold; color:#0168b7; line-height:2; margin:25px 0px; letter-spacing:-1px;} #container .business-part2 .choose-info .text-info p {font-size:17px; color:#000; line-height:2; margin-bottom:25px; letter-spacing:-1px;} #container .business-part22 .choose-info .text-info h3 {font-size:28px; font-weight:normal; color:#2b2b2b} #container .business-part22 .choose-info .text-info h3:after {display:block; content:''; width:35px; height:2px; margin:0px 0 30px; background:#ffc600} #container .business-part22 .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:200px} #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:8px; padding-bottom:18px} /*------------------ 버튼 스타일 ------------------ */ .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:#0168b7} .btn-arrow:hover i {right:15px} .btn-arrow.white {color:#fff; border-color:#245a96; background:#245a96} .btn-arrow.white:hover {color:#fff; border-color:#7bb403; background:#7bb403} .btn-arrow.black {color:#fff; border-color:#353535; background:#353535} .btn-arrow.black:hover {border-color:#000; background:#000} .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:#0168b7; background:#0168b7} .btn-admin:hover {border-color:#2d92e0; background:#2d92e0} .btn-danger {color:#fff !important; border-color:#d92f2f; background:#d92f2f} .btn-danger:hover {border-color:#cf2b2b; background:#cf2b2b} .btn-primary {display:inline-block; font-size:14px; color:#fff; line-height:1; padding:15px 25px; border-radius:3px; background:#0168b7; transition:all 0.4s} .btn-primary:hover {background:#ff6c00; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)} .btn-black {display:inline-block; font-size:16px; color:#fff; line-height:1; padding:15px 25px; background:#aaaaaa; transition:all 0.2s} .btn-black:hover {background:#4b4b4b} .btn-black2 {display:inline-block; font-size:16px; color:#fff; line-height:1; padding:15px 25px; background:#4b4b4b; transition:all 0.2s} .btn-black2:hover {background:#4b4b4b} .btn-block {width:100%} .btn-load {cursor:not-allowed; color:#aaa; border-color:#ccc !important; background:#eee !important} /*------------------ 인풋 및 셀렉트 스타일 ------------------ */ .frm-input {height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none} .frm-input:focus {border-color:#40424b; background:#f9f9f9} .frm-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} .frm-select:focus {border-color:#40424b; background-color:#f9f9f9} /*------------------ 게시판 스타일 ------------------ */ /* 리스트형 스타일 */ .tbl-brd-list {width:100%; margin-bottom:40px; color:#000; font-size:17px;} .tbl-brd-list tr td {position:relative; padding:30px; 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-size:17px; font-family:inherit !important; color:inherit !important} .tbl-brd-list .att_title {font-size:17px; font-weight:500; color:#fff !important; text-align:center; border:none !important; background:#0168b7 !important} .tbl-brd-list tr:nth-child(even) {font-size:17px; font-weight:500; color:#000} .tbl-brd-list tr:hover td a {color:#000; font-size:17px;} .tbl-brd-read {width:100%; margin-bottom:40px; border-top:1px solid #40424b; font-size:17px; table-layout:fixed} .tbl-brd-read tr td {height:auto !important; padding:15px; border-bottom:1px solid #e2e2e2} .tbl-brd-read tr {background-color:#fff} .tbl-brd-read tr td, .tbl-brd-read tr td font, .tbl-brd-read tr td span {font-family:inherit !important; } .tbl-brd-read .board_bgcolor {font-weight:500; color:#0168b7; background-color:#f6f6f6; !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: 'Eoe_Zno_B'; 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:#0168b7} .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:40px; 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:206px !important} div[class^=photo-grid-] .photo-grid-inner > table .overlay {position:absolute; top:80%; left:0; right:0; height:72%; background:rgba(67,67,67,0.1); opacity:0; z-index:0;} div[class^=photo-grid-] .photo-grid-inner > table .post-info h3 {font-size:20px; margin-top:20px; font-weight:bold; color:#313131} div[class^=photo-grid-] .photo-grid-inner > table .post-info h3:after {content:''; display:block; width:30px; height:1px; margin:15px 0; background:#bfbfbf} 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 {background:url(../../img/main_title001.jpg) left no-repeat; width:100%; border-top:1px solid #e5e5e5; table-layout:fixed; background-color:#f2f6f9} .tbl-brd-latest td[width="1%"] {display:none} .tbl-brd-latest td[align="center"] {text-align:right} .tbl-brd-latest tr td {font-size:14px; font-weight:600; color:#888; padding:30px 40px; border-bottom:1px solid #e5e5e5} .tbl-brd-latest tr td a {font-size:16px; padding-left:100px; font-weight:500; color:#4e4e4e} .tbl-brd-latest tr td a:hover {color:#0168b7} /* 게시판 공통 */ /* 테이블 */ .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 {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; color:#000; font-size:17px} .board-category ul > li a {display:block; padding:5px 10px} .board-category ul > li.active a {font-weight:500; color:#fff; background:#0168b7!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} /*------------------ 회원관련 페이지 공통 ------------------ */ .member-box {max-width:500px; margin:auto; padding:30px; border:1px solid #e7e7e7; border-radius:10px} .member-box.expanded {max-width:1000px} .member-box input {font-family:inherit !important} .member-box h3 {font-size:24px; font-weight:500; color:#5b5b5b; margin-bottom:25px} .member-box h4 {font-size:16px; font-weight:normal; color:#454545; margin-bottom:10px} .member-box p {margin-bottom:20px; line-height:1.8} .member-box p strong {color:#2b2b2b; margin-right:5px} .member-box .input-group {margin-bottom:15px} .member-box .input-group input[type=text], .member-box .input-group input[type=password] {display:block; width:100%; height:45px; padding:0 15px; font-size:15px; color:#666; border:1px solid #e5e5e5; border-radius:3px; background:#f9f9f9; outline:none; transition:border-color 0.25s} .member-box .input-group input[type=text]:focus, .member-box .input-group input[type=password]:focus {color:#454545; border-color:#bbb} .member-box .input-group textarea {width:100%; padding:15px; font-size:13px; color:#666; border:1px solid #faebcc; border-radius:3px; background:#fcf8e3; transition:border-color 0.25s; resize:none} .member-box .input-group textarea:focus {color:#454545; border-color:#f4e3c1} .member-box .input-group .agreement {height:130px} .member-box .input-group .check-box {padding-top:10px} .member-box .input-group .check-box * {vertical-align:middle} .member-box .form-action {padding-top:10px; text-align:center} .member-box .form-action input[type=submit] {display:block; width:100%; height:45px; font-size:16px; color:#fff; border:none; border-radius:3px; background:#0168b7; cursor:pointer} .member-box .form-action input[type=submit]:hover {background:#80bd49} .member-box .form-action input[type=submit]:active {box-shadow:inset 0 3px 6px rgba(0,0,0,0.1); outline:none} div[class^=member] .btn-member {display:inline-block; height:45px; margin:0 1px; padding:0 20px; font-size:15px; text-align:center; line-height:45px; border:none; border-radius:3px; cursor:pointer} div[class^=member] .btn-member:active {box-shadow:inset 0 3px 6px rgba(0,0,0,0.1); outline:none} div[class^=member] .btn-member.primary {color:#fff; background:#0168b7} div[class^=member] .btn-member.primary:hover {background:#80bd49} div[class^=member] .btn-member.secondary {color:#fff; background:#3a7fe3} div[class^=member] .btn-member.secondary:hover {background:#3578d8} div[class^=member] .btn-member.close {color:#555; background:#fff} div[class^=member] .btn-member.close:hover {color:#2b2b2b; background:#f3f3f3} .member-popup {max-width:500px} .member-popup .title {padding:15px 30px; background:#2b2b2b} .member-popup .title h2 {font-size:16px; font-weight:500; color:#fff} .member-popup .container {position:relative; padding:30px} .member-popup .container p {margin-bottom:20px} .member-popup .container blockquote {font-size:15px; color:#6a6a6a; line-height:1.7; padding:20px; border-radius:5px; background:#f8f8f8} .member-popup .container blockquote p {margin-bottom:0} .member-popup .container blockquote strong {color:#ff6c00} .member-popup .container blockquote hr {display:block; height:1px; margin:20px 0 15px; border:none; background:#f1f1f1} .member-popup .container blockquote table {width:100%; margin-top:20px; border-top:1px solid #565656} .member-popup .container blockquote table tbody th, .member-popup .container blockquote table tbody td {padding:10px 15px; font-size:13px; color:#999; border-bottom:1px solid #e2e2e2; background:#fff} .member-popup .container blockquote table tbody th {font-weight:normal; color:#2b2b2b} .member-popup .container input[type=text], .member-popup .container input[type=password] {background:#fff} .member-popup .container .w100 {display:block; width:100%} .member-popup .center-btn {padding-top:30px; text-align:center} .member-popup .bottom-btn {text-align:right; margin-top:20px; padding:15px 30px; background:#f9f9f9} /*------------------ 로그인 페이지 ------------------ */ .member-box .btm-service {margin-top:25px; padding-top:15px; text-align:right; border-top:1px solid #f7f7f7} .member-box .btm-service li {display:inline-block; margin-left:15px} .member-box .btm-service li.strong a {font-weight:600; color:#ff6c00} /*------------------ 회원가입 페이지 ------------------ */ .member-box .join-table {width:100%; margin-bottom:40px; border-top:1px solid #e2e2e2} .member-box .join-table > tbody > tr > td {padding:15px 10px; border-bottom:1px solid #e5e5e5} .member-box .join-table tbody tr > td * {vertical-align:middle} .member-box .join-table .member_td_bgcolor {width:20%; font-weight:500; color:#333} .member-box .join-table tbody tr td input[type=text], .member-box .join-table tbody tr td input[type=password], .member-input {height:45px; padding:0 15px; font-size:15px; color:#666; border:1px solid #e5e5e5; border-radius:3px; background:#f9f9f9; outline:none; transition:border-color 0.25s} .member-box .join-table tbody tr td input[type=text]:focus, .member-box .join-table tbody tr td input[type=password]:focus, .member-input:focus {color:#454545; border-color:#bbb} .member-box .join-table tbody tr td input[type=checkbox], .member-box .join-table tbody tr td input[type=radio] {margin-right:5px} .member-box .join-table .member_txt td {padding-right:20px} .member-box .join-table select {height:45px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; border-radius:3px; background:#f9f9f9 url(../../img/select_arrow.png) right 10px center no-repeat; outline:none} .member-box .join-table select:focus {color:#454545; border-color:#bbb} /* ---------------------------------------------------------- * 미디어 쿼리 ---------------------------------------------------------- */ /* PC */ @media screen and (min-width:1025px) { /*------------------ 메인페이지 스타일 ------------------ */ /*------------------ 서브페이지 스타일 ------------------ */ /* 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:#eeeeee} } /* 태블릿 */ @media screen and (max-width:1024px) { #mainContainer #section4 .photo-grid .owl-nav .owl-prev {display:inline-block; left:15px; width:45px; height:45px; line-height:45px; background:rgba(0,0,0,0.65); text-align:center; color:#fff; font-size:14px} #mainContainer #section4 .photo-grid .owl-nav .owl-next {display:inline-block; right:0; width:45px; height:45px; line-height:45px; background:rgba(0,0,0,0.65); text-align:center; color:#fff; font-size:14px} /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {height:650px} #keyVisual .slides > li .text span {font-size:0px; text-align:center;} #keyVisual .slides > li .text {padding:0 30px} #keyVisual .slides > li .text h2 {font-size:40px} #keyVisual .slides > li .text p {font-size:0px} /* 섹션 공통 */ #container .container-inner {padding:0 30px} #container > .inner img.img_mob {max-width:100%; text-align:center; display:block !important} #container > .inner img.img_pc, #container > .inner img.img_tab {display:none !important} #mainContainer .main-section {padding:80px 0} #mainContainer .main-section .main-title h2 {font-size:36px} #mainContainer .main-section .main-title p {font-size:16px} #mainContainer .main-section > .container {padding:0 30px} #mainContainer .main-section .btn-bottom {margin-top:40px} /* 메인 섹션 - OUR BUSINESS */ #mainContainer #section1 .business-grid > li {margin-bottom:50px} /* 메인 섹션 - 패럴랙스 이미지 */ #mainContainer #section2 {padding:220px 0} #mainContainer #section2 .text h2 {font-size:56px} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:380px; overflow:hidden} #subVisual > .visual_img {top:-20px; width:1800px; margin-left:-900px} /* 섹션 공통 */ #container .container-inner {padding:0 30px} #container > .inner img.img_mob {max-width:100%; text-align:center; display:block !important} #container > .inner img.img_pc, #container > .inner img.img_tab {display:none !important} #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} div[class^=photo-grid-] .photo-grid-inner > table img {width:100% !important; height:auto !important} .container-fluid div[class^=photo-grid-] .photo-container {padding:0 50px} } @media screen and (max-width:768px) { #mainContainer #section4 .photo-grid .owl-nav .owl-prev {left:0} /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {height:450px} #keyVisual .slides > li .text {padding:0 15px; margin-top:-115px} #keyVisual .slides > li .text span {padding-top:45px; font-size:0px; text-align:center;} #keyVisual .slides > li .text h2 {font-size:22px; text-align:center; margin:10px 0 40px} #keyVisual .slides > li .text p {font-size:15px; text-align:center; margin-bottom:10px; font-weight:700;} #keyVisual .slides > li .text .btn-arrow {font-size:13px; width:130px} #keyVisual .bx-controls-direction a {width:40px; height:60px; font-size:16px; line-height:60px; margin-top:-30px} #keyVisual .bx-pager {bottom:30px} /* 섹션 공통 */ #mainContainer .main-section {padding:30px 0} #mainContainer .main-section .main-title {margin-bottom:30px} #mainContainer .main-section .main-title h2 {font-size:22px} #mainContainer .main-section .main-title h2:before {margin:0 auto 10px; height:30px} #mainContainer .main-section .main-title p {font-size:15px; color:#333} #mainContainer .main-section > .container {padding:0 15px} /* 메인 섹션 - OUR BUSINESS */ #mainContainer #section1 .business-grid > li .imgBox img {display:block; width:100%; height:220px; transition:transform 0.25s ease-in-out} #mainContainer #section1 .business-grid > li .title {font-size:18px; margin:25px 0 10px 0px} #mainContainer #section1 .business-grid > li .title br {display:none} #mainContainer #section1 .business-grid > li p {font-size:14px; font-weight:normal; line-height:1.4} /* 메인 섹션 - 패럴랙스 이미지 */ #mainContainer #section2 {padding:40px 0} #mainContainer #section2 .text h2 {font-size:36px} /* 메인 섹션 - PRODUCT */ #mainContainer #section4 .photo-grid .owl-stage-outer {width:100%; overflow:hidden; padding-bottom:0px} #mainContainer #section4 .photo-grid table {margin-bottom:50px} #mainContainer #section4 .photo-grid table tr:last-child td {padding:20px; height:170px} #mainContainer #section4 .photo-grid table .board_output_gallery_subject a {font-size:15px} #mainContainer #section4 .photo-grid table .board_output_gallery_description {font-size:13px; max-height:59px} #mainContainer #section4 .photo-grid table .board_output_gallery_description:before {bottom:20px; left:20px} #mainContainer #section4 .photo-grid table .board_output_gallery_description:after {bottom:19px; left:90px} #mainContainer #section4 .photo-grid table:hover .board_output_gallery_description:after {left:95px} #mainContainer #section11 {background:#f4f4f4; padding:0px 0} #mainContainer #section11 .text {position:relative; text-align:center; z-index:10} #mainContainer #section11 .text h2 {font-size:12px; font-weight:300; color:#fff} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:260px} #subVisual > .visual_img {top:-10px; width:1100px; margin-left:-550px} #subVisual > .title h2 { font-weight:500; padding:100px 20px 20px 16px;} .slogan-box {padding:60px 0; height:300px;} .slogan-tit {font-size:30px; font-family:'Montserrat'; font-weight:800; color:#fff; padding-top:0px; } .slogan-tit2 {font-size:20px; font-weight:600; color:#fff; padding-top:50px;} .slogan-box > p {color:#fff; font-size:14px; font-weight:400; line-height:15px; padding:15px;} /* 페이지 내비게이션 */ #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:15px} #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:26px} #container .business-part2 .choose-info .text-info h3:after {width:25px; margin:15px 0 20px} #container .business-part2 .choose-info .text-info h4 {font-family: 'Montserrat', sans-serif; font-size:26px; font-weight:bold; color:#0168b7; line-height:1.5; margin:25px 0px; letter-spacing:-1px;} #container .business-part2 .choose-info .text-info p {font-size:15px; 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} .btn-arrow.white {color:#fff; border-color:#245a96; margin-left:33%; margin-top:10%; background:#245a96} .btn-arrow.white:hover {color:#fff; border-color:#7bb403; margin-left:33%; margin-top:10%; background:#7bb403} /*------------------ 게시판 스타일 ------------------ */ /* 리스트형 스타일 */ .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} .tbl-brd-read tr td {height:auto !important; padding:8px; border-bottom:1px solid #e2e2e2} /* 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:#0168b7} .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:8px} div[class^=photo-grid-] .photo-grid-inner > table img {width:100% !important; height:auto !important} 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 {background:url(../../img/main_title001-m.png) left no-repeat; width:100%; border-top:1px solid #e5e5e5; table-layout:fixed; background-color:#f2f6f9} .tbl-brd-latest td[width="1%"] {display:none} .tbl-brd-latest tr td {font-size:10px; padding:20px} .tbl-brd-latest tr td a {font-size:16px; padding-left:0px; font-weight:500; color:#4e4e4e} .tbl-brd-latest tr td a:hover {color:#0168b7} .tbl-brd-latest tr td a {font-size:15px} /* 게시판 공통 */ /* 카테고리 */ .board-category ul > li {font-size:13px} .board-category ul > li a {display:block; padding:5px 10px} /*------------------ 회원관련 페이지 공통 ------------------ */ .member-box {max-width:inherit; padding:20px} .member-box.expanded {max-width:inherit} .member-box h3 {font-size:18px; margin-bottom:20px} .member-box h4 {font-size:15px} .member-box p {font-size:13px; margin-bottom:15px} .member-box .input-group {margin-bottom:10px} .member-box .input-group input[type=text], .member-box .input-group input[type=password] {font-size:13px} .member-box .input-group textarea {font-size:12px} .member-box .input-group .check-box * {font-size:12px} .member-box .form-action input[type=submit] {font-size:13px} div[class^=member] .btn-member {font-size:13px} .member-popup {max-width:inherit} .member-popup .title {padding:15px} .member-popup .title h2 {font-size:15px} .member-popup .container {padding:20px 15px} .member-popup .container p {font-size:13px} .member-popup .container blockquote {font-size:13px} .member-popup .center-btn {padding-top:25px} .member-popup .bottom-btn {padding:15px} /*------------------ 로그인 페이지 ------------------ */ .member-box .btm-service li, .member-box .btm-service li a {font-size:13px} .member-box .btm-service li.strong a {font-weight:600; color:#ff6c00} /*------------------ 회원가입 페이지 ------------------ */ .member-box .join-table {table-layout:fixed} .member-box .join-table > tbody > tr > td {font-size:13px; padding:10px} .member-box .join-table tbody tr td input[type=text], .member-box .join-table tbody tr td input[type=password] {width:100%; font-size:13px} .member-input {font-size:13px} .member-box .join-table select {max-width:100%; font-size:13px} .member-box .join-table .btn-member {display:block; margin:10px 0} } /* 저해상도 모바일 */ @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} }