@charset "euc-kr"; /********************************************** * 스탠다드반응형 SD001 컨텐츠 css * 버전 : 1.6 * 릴리즈 : 2017-10-26 * 본 css의 저작권은 도트피아에 있습니다. **********************************************/ /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {position:relative; height:900px; 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/keyvisual1.jpg) center top no-repeat} #keyVisual .slides > li.slide-2 {background:url(../../img/keyvisual2.jpg) center top no-repeat} #keyVisual .slides > li.slide-3 {background:url(../../img/keyvisual3.jpg) center top no-repeat} #keyVisual .slides > li .text {position:relative; top:50%; max-width:1200px; margin:-156px auto 0; color:#fff; text-align:center} #keyVisual .slides > li .text span {display:block; font-size:18px} #keyVisual .slides > li .text h2 {font-size:84px; font-weight:300; margin:15px 0 25px; text-shadow:2px 2px 10px rgba(0,0,0,0.55)} #keyVisual .slides > li .text p {font-size:22px; font-weight:300; line-height:1.5; margin-bottom:15px; text-shadow:2px 2px 10px rgba(0,0,0,0.55)} #keyVisual .slides > li .text .btn-arrow:hover {box-shadow:0 2px 20px 10px rgba(0,0,0,0.055)} #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:50%; width:80px; height:100px; font-size:28px; text-align:center; line-height:100px; color:#fff !important; text-indent:inherit; margin-top:-50px; background:rgba(0,0,0,0.5); z-index:30 !important} #keyVisual .bx-prev {left:0}ac #keyVisual .bx-next {right:0} #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:20px; height:5px; text-indent:-9999em; margin:0; border-radius:0; background:#fff; opacity:0.5; transition:all 0.35s ease-in-out} #keyVisual .bx-pager .bx-pager-item a.active {width:40px; background:#8f9598; opacity:1} /* 섹션 공통 */ #mainContainer {position:relative; overflow:hidden} #mainContainer .main-section {position:relative; padding:100px 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:40px; text-align:center} #mainContainer .main-section .main-title h2 {font-size:42px; font-weight:500; color:#222; letter-spacing:2px; 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 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%; 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:32px; font-weight:300; color:#333; line-height:1.25; margin:15px 0} #mainContainer #section1 .business-grid > li p {font-size:15px; font-weight:300; color:#7b7b7b; line-height:1.45; word-break:keep-all; margin-bottom:20px} /* 메인 섹션 - 패럴랙스 이미지 */ #mainContainer #section2 {padding:250px 0} #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} /* 메인 섹션 - WORKS */ #mainContainer #section4 {background:#f4f4f4} #mainContainer #section4 .photo-grid > table {position:relative; 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:auto !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; 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:18px; font-weight:300; 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} .work-space ul li a .work-img {overflow:hidden} .work-space ul li a .work-img img {display:block; width:100%; transition:all 0.3s ease} .work-space ul li a:hover .work-img img {transform:scale(1.1)} .work-space ul li a .desc {padding-top:15px; text-align:center} .work-space ul li a .space-btn {text-align:center; padding:20px 0; transition:all 0.3s ease} .work-space ul li a .space-btn > span {position:relative; display:inline-block; padding:15px; width:170px; line-height:1; border:1px solid #7b726f; font-size:14px; font-weight:500; text-align:left; color:#2c2d2e} .work-space ul li a .space-btn > span i {position:absolute; right:15px; transition:right 0.3s ease} .work-space ul li a:hover .space-btn > span {color:#77a180; border-color:#77a180; transition:all 0.3s ease} .work-space ul li a:hover .space-btn > span i {color:#77a180; right:10px} .work-space ul li a .desc h3 {padding-bottom:15px; font-size:28px; font-weight:500; color:#2c2d2e; letter-spacing:-1px} .work-space ul li a .desc p {font-size:15px; font-weight:500; color:#2c2d2e; letter-spacing:-1px} /* #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:'xeicon'; 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:#77a180} #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} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #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:'Abel','Noto Sans KR'; font-size:48px; font-weight:normal; color:#fff; text-align:center; letter-spacing:3px; 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 > .title h2 p {font-size:26px; letter-spacing:0; font-weight:300} #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 {position:relative} #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 {display:table; table-layout:fixed; width:100%; z-index:20} #breadcrumbs > .container > div > ul > li {text-align:center; display:table-cell} #breadcrumbs > .container > div > ul li a {position:relative; display:block; padding:25px 0; width:100%; height:100%; font-size:16px; color:#555; line-height:2.2; transition:color 0.3s ease} #breadcrumbs > .container > div > ul li.on a {color:#2e7685} #breadcrumbs > .container > div > ul li a:hover {color:#2e7685} #breadcrumbs > .container > div > ul > li.on a:after {clear:both; content:''; display:table; position:absolute; width:100%; height:4px; background:#2e7685; bottom:-2px} #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 {max-width:1200px; margin:0 auto; padding:50px 0; text-align:left} #container .main-title.innerTitle {padding-top:0} #container .main-title h2 {position:relative; font-size:18px; font-weight:500; color:#2b2b2b; padding-left:15px} #container .main-title h2:after {content:''; width:3px; height:22px; background:#307786; position:absolute; top:1px; left:0} #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:#77a180} #container .bottom-btn {padding-top:60px; text-align:center} /* COMPANY - 회사소개 */ #container .greeting-wrap {padding-bottom:100px} #container .greeting-wrap .imgArea {float:right !important; text-align:center} #container .greeting-wrap .imgArea > img {max-height:537px} #container .greeting-wrap .textArea p {font-size:16px; font-weight:500; color:#333; line-height:1.75; word-break:keep-all; letter-spacing:-1px; padding-top:50px} #container .greeting-wrap .textArea p:first-child {padding-top:0} #container .greeting-wrap .textArea .sign {float:right; padding-top:50px} #container .greeting-wrap .textArea .sign span {font-family:'Nanum Myeongjo'; font-size:20px; font-weight:700; color:#333; letter-spacing:-1px} #container .greeting-wrap .textArea .sign span:first-child {font-size:20px; margin-right:10px} #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.25)} #container .about-main .company-info > li:first-child {border-left:1px solid rgba(255, 255, 255, 0.25)} #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:#77a180} /* 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:'Abel','Noto Sans KR',sans-serif; font-size:24px; font-weight:300; color:#fff; text-align:center; line-height:80px; border-radius:50%; background:#77a180; 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 #77a180; 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:#77a180; word-break:keep-all; 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:'Abel','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:#77a180; 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 - 조직도 */ .orz-wrap {padding-bottom:100px} .orz-wrap .orz-item {padding-top:50px} .orz-wrap .orz-item:first-child {padding-top:0} .orz-wrap .orz-item .orz-title {padding-bottom:20px} .orz-wrap .orz-item .orz-title h3 {font-size:22px; font-weight:300; color:#333} .orz-wrap .orz-item .orz-circle {width:170px; height:170px; text-align:center; display:table; border:20px solid #d9d9d9; border-radius:50%} .orz-wrap .orz-item .orz-circle span {display:table-cell; vertical-align:middle; font-size:14px; font-weight:500; color:#333} /* COMPANY - 시설현황 */ .status-wrap {} .status-wrap .status {text-align:center} .status-wrap .status h3 {font-size:24px; font-weight:500; color:#333; padding-bottom:20px} .status-wrap .status h3:after {content:''; display:block; background:#ccc; width:1px; height:30px; margin:15px auto 10px} .status-wrap .status .status-img {padding-bottom:160px} .status-wrap .status .status-img img {} .container-inner:after {clear:both; content:''; display:block} .container-inner .facility {} .container-inner .facility > ul {transition:all 0.3s ease} .container-inner .facility > ul li {transition:all 0.3s ease} .container-inner .facility > ul:hover li {opacity:0.6} .container-inner .facility > ul li:hover {opacity:1} .container-inner .facility > ul:after {clear:both; content:''; display:block} .container-inner .facility > ul li {padding-bottom:100px} /* 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 .mini-map {width:50%; margin:auto; padding-bottom:100px;} #container .location-section h4 {font-size:15px; font-weight:normal; color:#8a8a8a; margin-bottom:60px} #container .location-section h4.first-h4 {margin-bottom:15px} #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 .map-img {padding-top:100px; text-align:center} #container .location-section .method-wrapper {padding-top:100px} #container .location-section .method-wrapper .topMethod {padding:20px 0; border-bottom:2px dotted #9f9b9b} #container .location-section .method-wrapper .topMethod > p {position:relative; font-size:16px; font-weight:500; color:#333; padding-top:20px} #container .location-section .method-wrapper .topMethod > p:nth-child(2) {padding-left:20px} #container .location-section .method-wrapper .topMethod > p:nth-child(2):before {content:'-'; display:block; position:absolute; top:20px; left:10px; font-size:16px; font-weight:500; color:#333} #container .location-section .method-wrapper .topMethod > p:first-child {padding-top:0} #container .location-section .method-wrapper .topMethod > p > span {font-size:15px} #container .location-section .method-wrapper .topMethod > p > a {margin-left:20px; font-weight:500; color:#345daa; text-decoration:underline; transition:all 0.3s ease} #container .location-section .method-wrapper .topMethod > p > a:hover {background:rgba(0,0,0,0.55); color:#fff} #container .location-section .method-wrapper .bottomMethod {padding:20px 0} #container .location-section .method-wrapper .bottomMethod .bottom-area {} #container .location-section .method-wrapper .bottomMethod .bottom-area .bottom-item {padding-top:50px} #container .location-section .method-wrapper .bottomMethod .bottom-area .bottom-item:first-child {padding-top:0} #container .location-section .method-wrapper .bottomMethod .itemTitle {padding-bottom:10px} #container .location-section .method-wrapper .bottomMethod .itemTitle > p {font-size:16px; font-weight:500; color:#333} #container .location-section .method-wrapper .bottomMethod .itemTitle > p > span {font-size:14px} #container .location-section .method-wrapper .bottomMethod .itemDesc {} #container .location-section .method-wrapper .bottomMethod .itemDesc > p {position:relative; font-size:16px; font-weight:500; color:#333; padding-top:20px; padding-left:20px} #container .location-section .method-wrapper .bottomMethod .itemDesc > p > span.bullet1 {display:inline-block; width:20px; height:20px; border-radius:50%; background:#1a2955; color:#fff; text-align:center; font-size:14px} #container .location-section .method-wrapper .bottomMethod .itemDesc > p > span.bullet2 {display:inline-block; width:20px; height:20px; background:#040000; color:#f4e228; text-align:center; font-size:14px} #container .location-section .method-wrapper .bottomMethod .itemDesc > p:before {content:'-'; display:block; position:absolute; top:20px; left:0; font-size:16px; font-weight:500; color:#333; vertical-align:middle} #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 p.title img {width:50px} #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; font-weight:normal; color:#2b2b2b; padding-right:20px} #container .location-section .method-wrapper .method-line dl dt > img {width:50px} #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 {width:100%} #container .location-section .method-wrapper .method-line .box.last {width:20%; padding-top:42px} /* BUSINESS - For door */ #container .door-wrap {} #container .door-wrap .business-table {width:100%; table-layout:fixed} #container .door-wrap .business-table .info-td {vertical-align:top} #container .door-wrap .business-table .img-td {vertical-align:middle} #container .door-wrap .business-table .text-td {vertical-align:bottom} #container .door-wrap .business-table tr td:last-child {padding-left:50px} #container .door-wrap .business-table .info-td h3 {font-size:16px; font-weight:500; color:#2b2b2b} #container .door-wrap .business-table .info-td h3 span {margin-right:5px} #container .door-wrap .business-table .text-td p {width:80%; font-size:15px; font-weight:500; color:#333; line-height:1.85; word-break:keep-all; padding:0} /* #container .door-wrap .topDoor:after {clear:both; content:''; display:block} #container .door-wrap .topDoor .left {float:left; width:50%; padding-right:50px} #container .door-wrap .topDoor .left .img_box {overflow:hidden} #container .door-wrap .topDoor .left .img_box img {display:block; width:100%; transition:all 0.45s ease} #container .door-wrap .topDoor .right {float:right; width:50%; padding:50px 0 50px 50px} #container .door-wrap .topDoor .right .title {padding-bottom:80px} #container .door-wrap .topDoor .right .title h3 {font-size:16px; font-weight:500; color:#2b2b2b} #container .door-wrap .topDoor .right .title h3 span {margin-right:5px} #container .door-wrap .topDoor .right .rightInfo {} #container .door-wrap .topDoor .right .rightInfo > img {} #container .door-wrap .topDoor .right .rightInfo > p {width:80%; font-size:15px; font-weight:500; color:#333; line-height:1.85; word-break:keep-all; padding-top:20px} */ #container .door-wrap .bottomDoor {padding-top:50px; padding-bottom:100px} #container .door-wrap .bottomDoor .doorItem {} #container .door-wrap .bottomDoor .doorItem .title {padding-top:50px; padding-bottom:15px} #container .door-wrap .bottomDoor .doorItem .itemInfo {} #container .door-wrap .bottomDoor .doorItem .pet_item .itemInfo {padding-top:30px} #container .door-wrap .bottomDoor .doorItem .pet_item .itemInfo:first-child {padding-top:0} #container .door-wrap .bottomDoor .doorItem .itemInfo .subTitle {padding:30px 0 15px} #container .door-wrap .bottomDoor .doorItem .itemInfo .subTitle h4 {font-size:14px; font-weight:500; color:#333} #container .door-wrap .bottomDoor .doorItem:first-child .title {padding-top:0} #container .door-wrap .bottomDoor .doorItem .title h3 {font-size:16px; font-weight:500; color:#2b2b2b} #container .door-wrap .bottomDoor .doorItem .title h3 > span {margin-right:5px} #container .door-wrap .bottomDoor .doorItem .product-wrap {} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item {padding-top:50px; clear:both} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item:after {clear:both; content:''; display:block} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item .itemTitle {padding-bottom:15px} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item .itemTitle h5 {font-size:16px; font-weight:500; color:#2b2b2b} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item .itemTitle p {font-size:14px; font-weight:500; color:#333; line-height:1.65; padding-bottom:15px} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item .leftSide {float:left; width:50%; border-top:2px solid #d9d9d9; border-bottom:2px solid #d9d9d9; border-left:2px solid #d9d9d9} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item .leftSide.petLeft {border:2px solid #d9d9d9} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item .rightSide {float:right; width:50%; border-top:2px solid #d9d9d9; border-bottom:2px solid #d9d9d9; border-right:2px solid #d9d9d9; border-left:2px solid #d9d9d9} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item > div.sideBox {position:relative; padding:50px 0; text-align:center} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item > div .title {position:absolute; top:30px; left:30px; padding-top:0; padding-bottom:0} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item > div .title h5 {font-size:14px; font-weight:600; color:#333} /*191001 이미지 popup 추가 요청 : s */ .img_row_item {display: flex;} .img_row_item > img {margin-right: 25px; margin-top: 25px; width: 150px; height: 150px;} /* 191001 이미지 popup 추가 요청 : e */ #container .door-wrap .bottomDoor .itemInfo > table {width:100%} #container .door-wrap .bottomDoor .itemInfo > table thead {} #container .door-wrap .bottomDoor .itemInfo > table thead tr {} #container .door-wrap .bottomDoor .itemInfo > table thead tr th {padding:13px 0; text-align:center; font-size:14px; font-weight:500; background:#e4e6e9; color:#47494d; border-left:4px solid #d1d2da} #container .door-wrap .bottomDoor .itemInfo > table thead tr th:first-child {border-left:0} #container .door-wrap .bottomDoor .itemInfo > table tbody tr td {padding:13px 20px; text-align:center; font-size:14px; font-weight:500; color:#47494d; background:#fff; border-left:4px solid #d1d2da; border-top:4px solid #d1d2da} #container .door-wrap .bottomDoor .itemInfo > table tbody tr td:first-child {border-left:0} #container .door-wrap .bottomDoor .itemInfo > table tbody tr:first-child td {background:#eeeef0} #container .door-wrap .bottomDoor .itemInfo > table tbody tr:nth-child(2) td {background:#f5f5f8} #container .door-wrap .bottomDoor .itemInfo > table tbody tr td > p {font-size:14px; font-weight:500; color:#47494d; padding-bottom:0} #container .door-wrap .bottomDoor > table thead tr th {} #container .door-wrap p {font-size:16px; font-weight:500; color:#333; line-height:1.75; padding-bottom:50px; word-break:keep-all} #container .door-wrap .top-img {margin-bottom:20px} #container .door-wrap .top-img img {margin:0 5px} #container .door-wrap .door-table {padding-bottom:50px} #container .door-wrap .door-table h3 {font-size:30px; font-weight:300; color:#2b2b2b; padding-bottom:15px} #container .door-wrap .door-table .table-wrap {padding-bottom:100px} #container .door-wrap .door-table .table-wrap table {width:100%; border-top:2px solid #213a26; text-align:center} #container .door-wrap .door-table .table-wrap table thead tr th {padding:8px 14px; background:#77a180; color:#fff; font-size:14px; font-weight:500; border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9} #container .door-wrap .door-table .table-wrap table thead tr th:first-child {border-left:0} #container .door-wrap .door-table .table-wrap table tbody tr td {padding:8px 14px; background:#f9f9f9; border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; color:#333; font-size:14px; font-weight:500; line-height:1.85} #container .door-wrap .door-table .table-wrap table tbody tr td:first-child {border-left:0} #container .kind-wrap {text-align:center} #container .kind-wrap .kind-area {} #container .kind-wrap .kind-area h4 {font-size:22px; font-weight:300; color:#333} #container .kind-wrap .kind-area h4:after {content:''; display:block; width:1px; height:30px; margin:15px auto 20px; background:#d9d9d9} #container .kind-wrap .kind-area .door-kind {margin-bottom:100px} #container .kind-wrap .kind-area .door-kind ul li {margin-bottom:20px} /* 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:#77a180} #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 {white-space:nowrap; overflow:hidden} #container .business-detail .detail-items > li {position:relative; width:33.333%; 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:#77a180; 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; white-space:normal; 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:#77a180; 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:#77a180} #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:#77a180} #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} /* PRODUCT 제품소개 */ .product-wrap:after {content:''; clear:both; display:block} .product-wrap .left, .product-wrap .right {width:50%; border:1px solid #d9d9d9; padding:35px 0} .product-wrap .left h4, .product-wrap .right h4 {font-size:18px; padding-bottom:25px} .product-wrap .left {float:left} .product-wrap .right {float:right; border-left:0} .overlay-wrap {margin-top:100px} .overlay-wrap:after {content:''; clear:both; display:block} .overlay-wrap > div {width:50%; border:1px solid #d9d9d9; padding:35px 0} .overlay-wrap > div h4 {font-size:18px; padding-bottom:25px} .overlay-wrap .left {float:left} .overlay-wrap .right {float:right; border-left:0} .product-wrap .product-table {padding-bottom:50px} .product-wrap .product-table table {width:100%; border-top:2px solid #000; margin:0 auto} .product-wrap .product-table table tbody tr td {padding:13px 8px; font-size:14px; font-weight:500; color:#333; border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9} .product-wrap .product-table table tbody tr td:first-child {border-left:0; background:#f9f9f9} .pp-wrap {margin-top:100px} .foil-wrap {} .foil-wrap h3 {font-size:20px; font-weight:500; color:#333; padding-bottom:10px} .door-wrap.foil-wrap p {padding-bottom:15px !important} .foil-wrap blockquote {width:88%; margin:0 auto; font-size:15px; font-weight:700; color:#1f1f1f; line-height:1.75; padding:25px 70px; background:#f9f9f9} .foil-wrap .foil-area {padding-top:100px} .foil-wrap .foil-area h3 {padding-bottom:45px; font-size:22px} .foil-wrap .foil-area1 {} .foil-wrap .foil-area1 ul {} .foil-wrap .foil-area1 ul li {text-align:center} .foil-wrap .foil-area1 ul li span {position:relative; display:block; width:135px; height:135px; line-height:135px; border-radius:50%; background:#39504a; font-size:18px; color:#fff; margin:0 auto} .foil-wrap .foil-area1 ul li span:before {position:absolute; top:0; left:-100px; content:'\e93e'; font-family:'xeicon'; font-size:25px; color:#a0a0a0} .foil-wrap .foil-area1 ul li:first-child span:before {content:''; display:block} .foil-wrap .foil-area1 ul li .desc {padding-top:15px} .foil-wrap .foil-area1 ul li .desc p {font-size:14px; color:#ccc} .foil-wrap .foil-area2 {} .foil-wrap .foil-area2 ul {text-align:left !important} .foil-wrap .foil-area2 ul li {position:relative; text-align:left; word-break:keep-all; vertical-align:top} .foil-wrap .foil-area2 ul li .icon {float:left; width:50px; height:50px; line-height:50px; background:#c7c7c7; font-size:20px; color:#fff; text-align:center; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%} .foil-wrap .foil-area2 ul li .info-desc {margin-left:70px} .foil-wrap .foil-area2 ul li .info-desc h4 {font-size:18px; font-weight:normal; color:#1d1d1d; padding-bottom:10px} .foil-wrap .foil-area2 ul li .info-desc p {font-size:15px !important; color:#777 !important; line-height:1.75} .foil-area3 .foil-info-wrap .left {float:left; width:60%; padding-right:20px} .foil-area3 .foil-info-wrap .left .foil-table table {width:100%; border-top:2px solid #000; margin:0 auto} .foil-area3 .foil-info-wrap .left .foil-table table tbody tr td {padding:13px 8px; font-size:14px; font-weight:500; color:#333; border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9} .foil-area3 .foil-info-wrap .left .foil-table table tbody tr td:first-child {border-left:0; background:#f9f9f9} .foil-area3 .foil-info-wrap .right {float:right; width:30%; padding-left:20px; text-align:right} .foil-area3 .foil-info-wrap .right img {display:block; width:100%; margin-top:-20px} .foil-area4 {padding-bottom:100px} .foil-area4 ul li {float:none} /* PRODUCT 기술현황 */ .tech-list {margin-bottom:100px} .tech-list > div > .imgArea {height:230px; white-space:nowrap} .tech-list > div > .imgArea:before {content:''; display:inline-block; height:100%; vertical-align:middle} .tech-list > div > .imgArea img {vertical-align:middle} .tech-list > div > h3 {margin-top:20px; font-size:16px; font-weight:700; color:#333; text-align:center} .tech-tests > div {margin-bottom:40px; vertical-align:top} .tech-tests > div > .imgArea {border:1px solid #e7e7e7; overflow:hidden} .tech-tests > div > .imgArea img {display:block; width:100%} .tech-tests > div > h3 {margin-top:15px; font-size:16px; font-weight:normal; color:#333; text-align:center} /*------------------ 버튼 스타일 ------------------ */ .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:#77a180} .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 {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:#77a180; background:#77a180} .btn-admin:hover {border-color:#cc2c2c; background:#cc2c2c} .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:#77a180; transition:all 0.4s} .btn-primary:hover {background:#77a180; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)} .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:#77a180} .btn-block {display: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} .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:#77a180} .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(119,161,128,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:2px dotted #c5c9cd; 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 {position:relative; font-size:18px; font-weight:400; color:#000; padding:30px 50px; border-bottom:2px dotted #c5c9cd} /* .tbl-brd-latest tr td:nth-child(3):before {content:''; display:block; position:absolute; top:0; left:0; width:1px; height:10px; background:#000} */ .tbl-brd-latest tr td a {position:relative; font-size:18px; font-weight:400; color:#000; transition:all 0.3s ease} .tbl-brd-latest tr td a:before {clear:both; content:''; position:relative; display:inline-block; width:5px; height:5px; background:#000; border-radius:50%; top:-4px; left:0; margin-right:10px; transition:all 0.3s ease} .tbl-brd-latest tr td a:hover {color:#77a180} /* 게시판 공통 */ /* 테이블 */ .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; 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} /*------------------ 폼메일 스타일 ------------------ */ .tbl-formmail {table-layout:inherit} 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} /* RESPONSIVE - 반응형 이미지 처리 */ .pc-img {display:block !important} .mobile-img {display:none !important} /* ---------------------------------------------------------- * 미디어 쿼리 ---------------------------------------------------------- */ /* PC */ @media screen and (min-width:1025px) { #subVisual {margin-top:125px } /*------------------ 메인페이지 스타일 ------------------ */ /* 메인 섹션 - WORKS */ #mainContainer #section4 .photo-grid > table:hover {transform:translateY(-20px)} /*------------------ 서브페이지 스타일 ------------------ */ /* 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:#77a180; background:#77a180; 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:650px} #keyVisual .slides > li .text {padding:0 30px} #keyVisual .slides > li .text h2 {font-size:62px} #keyVisual .slides > li .text p {font-size:18px} /* 섹션 공통 */ #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 section.sub-section {position:relative; padding:60px 0} /* COMPANY - 회사소개 */ #container .greeting-wrap .textArea p {font-size:15px} #container .greeting-wrap .textArea .sign {padding-top:40px} #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} .foil-wrap blockquote {width:100%; padding:25px 50px} .foil-wrap blockquote br {display:none} .foil-wrap .foil-area {padding-top:80px} .foil-wrap .foil-area1 ul li {margin-bottom:40px} .foil-wrap .foil-area1 ul li span:before {display:none} .foil-wrap .foil-area2 ul li {margin-bottom:30px} /* PRODUCT 기술현황 */ .tech-list > div {margin-bottom:45px} .tech-list > div > .imgArea {height:290px} /*191001 이미지 popup 추가 요청 : s */ .img_row_item {display: flex;} .img_row_item > img {margin-right: 20px; margin-top: 20px; width: 120px; height: 120px;} /* 191001 이미지 popup 추가 요청 : e */ /*------------------ 게시판 스타일 ------------------ */ /* 갤러리형 스타일 */ 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:450px} #keyVisual .slides > li .text {padding:0 15px; margin-top:-115px} #keyVisual .slides > li .text span {font-size:14px} #keyVisual .slides > li .text h2 {font-size:40px; margin:10px 0 20px} #keyVisual .slides > li .text p {font-size:15px} #keyVisual .slides > li .text .btn-arrow {font-size:13px; width:190px} #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:50px 0} #mainContainer .main-section .main-title {margin-bottom:30px} #mainContainer .main-section .main-title h2 {font-size:24px} #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 .title {font-size:22px; margin:25px 0 15px} #mainContainer #section1 .business-grid > li .title br {display:none} #mainContainer #section1 .business-grid > li p {font-size:14px; font-weight:normal; line-height:1.75} /* 메인 섹션 - 패럴랙스 이미지 */ #mainContainer #section2 {padding:160px 0} #mainContainer #section2 .text h2 {font-size:36px} /* 메인 섹션 - WORKS */ #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} .work-space ul li a .desc h3 {font-size:18px} .work-space ul li a .desc p {font-size:13px} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #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 {} #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 {} #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:18px; padding-left:30px} #container .main-title h2:after {left:15px} #container .main-title p {font-size:14px; width:80%; margin:25px auto auto} #container .main-title p br {display:none} /* COMPANY - 회사소개 */ #container .greeting-wrap {padding-bottom:80px} #container .greeting-wrap .imgArea img {display:block; width:100%} #container .greeting-wrap .textArea {margin-top:30px} #container .greeting-wrap .textArea p {font-size:13px; word-break:keep-all} #container .greeting-wrap .textArea .sign {padding-top:30px} #container .greeting-wrap .textArea .sign span {font-size:22px} #container .greeting-wrap .textArea .sign span:first-child {font-size:18px; margin-right:15px} #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 - 시설현황 */ .status-wrap .status h3 {font-size:18px} .status-wrap .status h3:after {height:20px; margin:10px auto 15px} .status-wrap .status .status-img {padding-bottom:80px} /* 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 .mini-map {width:100%; padding-bottom:60px} #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 - For door */ #container .door-wrap .topDoor {} #container .door-wrap .business-table {} #container .door-wrap .business-table tbody, #container .door-wrap .business-table tr, #container .door-wrap .business-table td {display:block} #container .door-wrap .business-table .img-area img {display:block; width:100%} #container .door-wrap .business-table .info-td {margin-top:30px} #container .door-wrap .business-table .img-td {text-align:center} #container .door-wrap .business-table .text-td {padding-top:30px} #container .door-wrap .business-table tr td:last-child {padding-left:0} #container .door-wrap .business-table .info-td h3 {font-size:16px; font-weight:500; color:#2b2b2b} #container .door-wrap .business-table .text-td p {width:100%; font-size:13px; font-weight:normal} #container .door-wrap p {font-size:13px; word-break:keep-all} #container .door-wrap .door-table {padding-bottom:50px} #container .door-wrap .door-table h3 {font-size:22px} #container .door-wrap .door-table .table-wrap {padding-bottom:80px} #container .door-wrap .door-table .table-wrap table thead tr th {font-size:13px} #container .door-wrap .door-table .table-wrap table tbody tr td {font-size:12px} #container .kind-wrap .kind-area h4 {font-size:18px} #container .kind-wrap .kind-area h4:after {height:20px; margin:10px auto 15px} #container .kind-wrap .kind-area .door-kind {margin-bottom:60px} /* 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 {display:block; width:100%; margin-bottom:15px} #container .business-detail .detail-items > li:last-child {margin-bottom:0} #container .business-detail .detail-items > li .bg {left:0; margin-left:0} #container .business-detail .detail-items > li .bg img {width:100%} #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} /* PRODUCT 제품소개 */ #container .door-wrap .topDoor .left {float:none; width:100%; padding-right:0} #container .door-wrap .topDoor .right {float:none; width:100%; padding:30px 0 0 0} #container .door-wrap .topDoor .right .rightInfo > p {font-size:13px; width:auto} #container .door-wrap .bottomDoor .itemInfo.tableInfo {overflow-x:scroll} #container .door-wrap .bottomDoor .itemInfo > table {width:1000px} #container .door-wrap .bottomDoor .itemInfo > table.ppTable {width:100%} #container .door-wrap .bottomDoor .itemInfo > table thead tr th, #container .door-wrap .bottomDoor .itemInfo > table tbody tr td {font-size:13px; word-break:keep-all} #container .door-wrap .bottomDoor .itemInfo > table tbody tr td > p {font-size:13px; word-break:keep-all} #container .door-wrap .bottomDoor .doorItem .title h3 {font-size:14px} #container .door-wrap .bottomDoor {padding-top:30px} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item > div.sideBox {float:none; width:100%; border:2px solid #d9d9d9; margin:10px 0} #container .door-wrap .bottomDoor .doorItem .product-wrap .product-item > div .title {top:15px; left:15px} .product-wrap .left, .product-wrap .right {float:none; width:100%; padding:0; border:none} .product-wrap .left h4, .product-wrap .right h4 {font-size:15px; padding-bottom:20px} .product-wrap .right {margin-top:30px} .product-wrap .product-table {padding-bottom:30px} .product-wrap img {display:block; width:100%} .overlay-wrap {margin-top:60px} .overlay-wrap > div {float:none; width:100%; padding:0; border:none} .overlay-wrap > div h4 {font-size:15px; padding-bottom:20px} .overlay-wrap .right {margin-top:30px} .overlay-wrap img {display:block; width:100%} .product-wrap .product-table table tbody tr td {font-size:12px} .pp-wrap {margin-top:100px} .foil-wrap h3 {font-size:17px} .foil-wrap blockquote {font-size:13px; padding:25px} .foil-wrap .foil-area {padding-top:60px} .foil-wrap .foil-area h3 {padding-bottom:30px; font-size:17px} .foil-wrap .foil-area1 ul li {text-align:center} .foil-wrap .foil-area1 ul li span {width:100px; height:100px; line-height:100px; font-size:16px} .foil-wrap .foil-area1 ul li span:before {position:absolute; display:block; top:-75px; left:50%; content:'\e941'; margin-left:-13px} .foil-wrap .foil-area1 ul li .desc {padding-top:15px} .foil-wrap .foil-area1 ul li .desc p {font-size:14px; color:#ccc} .foil-wrap .foil-area2 ul li {margin-bottom:30px} .foil-wrap .foil-area2 ul li .icon {width:40px; height:40px; font-size:16px; line-height:40px} .foil-wrap .foil-area2 ul li .info-desc {margin-left:60px} .foil-wrap .foil-area2 ul li .info-desc h4 {font-size:15px; padding-bottom:5px} .foil-wrap .foil-area2 ul li .info-desc p {font-size:13px !important; padding-bottom:0 !important} .foil-area3 .foil-info-wrap .left {float:none; width:100%; padding-right:0} .foil-area3 .foil-info-wrap .left .foil-table table tbody tr td {font-size:12px} .foil-area3 .foil-info-wrap .right {float:none; width:100%; padding-left:0; text-align:center} .foil-area3 .foil-info-wrap .right img {display:inline-block; margin-top:20px; width:80%} .foil-area4 {padding-bottom:80px} /* PRODUCT 기술현황 */ .tech-list {margin-bottom:60px} .tech-list > div {margin-bottom:40px} .tech-list > div > .imgArea {height:auto} .tech-list > div > .imgArea:before {display:none} .tech-list > div > .imgArea img {display:block; width:100%} .tech-list > div > h3 {font-size:14px; margin-top:15px} .tech-tests > div {margin-bottom:30px} .tech-tests > div > h3 {font-size:14px} /* RESPONSIVE - 반응형 이미지 처리 */ .pc-img {display:none !important} .mobile-img {display:block !important} /*------------------ 버튼 스타일 ------------------ */ .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:#77a180} .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:15px} /* 게시판 공통 */ /* 카테고리 */ .board-category ul > li {font-size:13px} .board-category ul > li a {display:block; padding:5px 10px} /*191001 이미지 popup 추가 요청 : s */ .img_row_item {display: flex;} .img_row_item > img {margin-right: 10px; margin-top: 10px; width: 97px; height: 97px;} /* 191001 이미지 popup 추가 요청 : e */ } /* 저해상도 모바일 */ @media screen and (max-width:480px) { /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {margin-top:70px; height:200px} #subVisual > .visual_img {top:-10px; width:960px; margin-left:-480px} #subVisual > .title h2 {font-size:18px} #subVisual > .title h2 p {font-size:16px} #breadcrumbs > .container > div > ul li a {font-size:12px; padding:13px 0} /*191001 이미지 popup 추가 요청 : s */ .img_row_item {display: flex;} .img_row_item > img {margin-right: 5px; margin-top: 5px; width: 60px; height: 60px;} /* 191001 이미지 popup 추가 요청 : e */ }