@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-00 {background:url(../../img/keyvisual00.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-00 a{display:inline-block;width:100%;height:100%}*/ #keyVisual .slides > li.slide-contest {background:url(../../img/brand_contest.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-contest a{display:inline-block;width:100%;height:100%} #keyVisual .slides > li.slide-0 {background:url(../../img/keyvisual6.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-1 {background:url(../../img/keyvisual5.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-2 {background:url(../../img/keyvisual0.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-3 {background:url(../../img/keyvisual1.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-4 {background:url(../../img/keyvisual2.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-5 {background:url(../../img/keyvisual3.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-6 {background:url(../../img/keyvisual4.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-7 {background:url(../../img/keyvisual7.jpg) 40% bottom no-repeat} #keyVisual .slides > li.slide-8 {background:url(../../img/keyvisual8.jpg) 40% bottom no-repeat} #keyVisual .slides > li.slide-9 {background:url(../../img/keyvisual9.jpg) 40% bottom no-repeat} #keyVisual .slides > li.slide-10 {background:url(../../img/keyvisual10.jpg) 40% bottom no-repeat} #keyVisual .slides > li.slide-11 {background:url(../../img/keyvisual11.jpg) center bottom no-repeat} #keyVisual .slides > li .text {position:relative; top:50%; max-width:1200px; margin:-156px auto 0; color:#fff} #keyVisual .slides > li .text span {display:block; font-size:18px; text-shadow:0 2px 2px rgba(0,0,0,0.15)} #keyVisual .slides > li .text h2 {font-size:55px; font-weight:500; margin:15px 0 25px; letter-spacing:-2px; text-shadow:4px 4px 12px rgba(0,0,0,0.6);letter-spacing:-2px} #keyVisual .slides > li .text p {font-size:22px; font-weight:400; line-height:1.5; margin-bottom:15px; text-shadow:0 2px 2px rgba(0,0,0,0.15)} #keyVisual .slides > li .text p span.block{display:none} #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} #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:#2f6a87; opacity:1} /* 섹션 공통 */business-part2 #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;*/ width:70px;height:2px;background-color:#222;} #mainContainer .main-section .main-title p {font-size:18px; font-weight:400; color:#7b7b7b; line-height:1.45; word-break:keep-all} #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:25px; font-weight:400; color:#333; line-height:1.25; margin:15px 0} #mainContainer #section1 .business-grid > li p {font-size:15px; font-weight:400; 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-size:84px; font-weight:400; color:#fff} .pc_none{display:none;} /* 메인 섹션 - PRODUCT */ #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 5%; 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:400; color:#2b2b2b;overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word;} #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:'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:#2f6a87} #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} /* CONTACT */ #mainContainer #contact {padding:0; background:#1f262d} #mainContainer #contact .container-fluid {overflow:hidden} #mainContainer #contact #map {float:left; width:48%; min-height:750px; height:100%; margin-bottom:-500px; padding-bottom:500px} #mainContainer #contact #map:before {content:'1'; font-size:0; text-indent:-9999em} #mainContainer #contact .form-container {float:left; width:52%; max-width:600px; margin-bottom:-500px; padding:60px 0 580px 60px} #mainContainer #contact .form-container h2 {font-size:26px; font-weight:500; color:#fff; margin-bottom:30px} #mainContainer #contact .form-container .input-wrap {margin-bottom:15px} #mainContainer #contact .form-container .input-wrap input[type=text], #mainContainer #contact .form-container .input-wrap input[type=password], #mainContainer #contact .form-container .input-wrap textarea {width:100%; color:#666; border:none; border-radius:0; border-bottom:1px solid #40464c; background:transparent; outline:none; transition:all 0.3s} #mainContainer #contact .form-container .input-wrap input[type=text]:focus, #mainContainer #contact .form-container .input-wrap input[type=password]:focus, #mainContainer #contact .form-container .input-wrap textarea:focus {color:#fff; border-color:#fff} #mainContainer #contact .form-container .input-wrap input[type=text], #mainContainer #contact .form-container .input-wrap input[type=password] {height:45px} #mainContainer #contact .form-container .input-wrap textarea {height:90px; resize:none} #mainContainer #contact .form-container .input-wrap .left {float:left; width:48%} #mainContainer #contact .form-container .input-wrap .right {float:right; width:48%} #mainContainer #contact .form-container .tbl-formmail {width:100%} #mainContainer #contact .form-container .tbl-formmail tr td:first-child {display:none} #mainContainer #contact .form-container .tbl-formmail tr td {font-family:inherit !important; font-size:0; padding-bottom:10px; background-color:transparent !important} #mainContainer #contact .form-container .tbl-formmail tr td input[type=text], #mainContainer #contact .form-container .tbl-formmail tr td input[type=password], #mainContainer #contact .form-container .tbl-formmail tr td textarea {width:100%; font-family:inherit !important; font-size:13px !important; color:#fff; padding:0; border:none; border-radius:0; border-bottom:1px solid #2f6a87; background:transparent; outline:none; transition:all 0.3s} #mainContainer #contact .form-container .tbl-formmail tr td input[type=text]:focus, #mainContainer #contact .form-container .tbl-formmail tr td input[type=password]:focus, #mainContainer #contact .form-container .tbl-formmail tr td textarea:focus {color:#fff; border-color:#fff} #mainContainer #contact .form-container .tbl-formmail tr td input[name^=phone] {width: 30% !important; margin-left: 4%} #mainContainer #contact .form-container .tbl-formmail tr td input[name^=phone]:first-child {margin-left:0} #mainContainer #contact .form-container .tbl-formmail tr td textarea {height:90px !important; resize:none} #mainContainer #contact .form-container .btn-wrapper {margin:30px 0 60px} #mainContainer #contact .form-container .btn-wrapper a {padding-top:0; padding-bottom:0; height:40px; line-height:40px; border-radius:30px !important} #mainContainer #contact .form-container button[type=submit] {margin:30px 0 60px} #mainContainer #contact .form-container dl dt, #mainContainer #contact .form-container dl dd {font-size:13px; line-height:1.75} #mainContainer #contact .form-container dl dt {clear:both; float:left; width:105px; font-family:'Quicksand','Noto Sans KR',sans-serif; font-weight:600; color:#666} #mainContainer #contact .form-container dl dt i {margin-right:8px; vertical-align:-1px} #mainContainer #contact .form-container dl dd {color:#eee; margin-bottom:15px; padding-left:100px} #mainContainer #contact .form-container dl dd a {color:#eee !important} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {position:relative; height:480px; overflow:hidden} #subVisual > .visual_img {position:absolute; display:block; top:-50px; left:50%; margin-left:-1250px; transform:scale(1.15); transition:transform 5s ease} #subVisual > .title {position:relative; display:table; max-width:1200px; width:100%; height:100%; margin:auto} #subVisual > .title h2 {display:table-cell; height:100%; font-family:'Abel','Noto Sans KR'; font-size:48px; font-weight:normal; color:#fff; text-align:center; letter-spacing:3px; padding-top:35px; vertical-align:middle; opacity:0; text-shadow:0 3px 8px rgba(0, 0, 0, 0.15); transform:translateY(30px); transition:all 0.8s ease; transition-delay:2s} #subVisual.load > .visual_img {transform:scale(1.0)} #subVisual.load > .title h2 {opacity:1; transform:translateY(0)} /* 페이지 내비게이션 */ #breadcrumbs {border-bottom:1px solid #e2e2e2} #breadcrumbs > .container {max-width:1200px; margin:auto} #breadcrumbs > .container > .home {float:left; width:55px; height:55px; font-size:18px; color:#000; text-align:center; line-height:55px; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2} #breadcrumbs > .container > div {float:left; position:relative; width:240px} #breadcrumbs > .container > div > a {position:relative; display:block; width:100%; height:55px; padding:0 20px; font-size:16px; color:#333; line-height:55px; border-right:1px solid #e2e2e2} #breadcrumbs > .container > div > a.current {font-weight:500; color:#1f465f} #breadcrumbs > .container > div > a:after {position:absolute; right:20px; content:'\e936'; font-family:'xeicon'; font-size:14px; color:#000; transition:transform 0.3s ease-in-out} #breadcrumbs > .container > div > ul {position:absolute; display:none; top:55px; left:-1px; right:0; padding:25px 30px; border:1px solid #dedede; background:#f9f9f9; z-index:20} #breadcrumbs > .container > div > ul li a {font-size:16px; color:#555; line-height:2.2} #breadcrumbs > .container > div.open > a:after {transform:rotate(180deg)} /* 섹션 공통 */ #container {position:relative; overflow:hidden} #container img {max-width:100%;width:auto} #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:50px 0} #container .main-title {padding:50px 0; text-align:center} #container .main-title.innerTitle {padding-top:0} #container .main-title h2 {font-size:36px; font-weight:400; color:#2b2b2b} #container .main-title h3{padding:0 20px} #container .main-title p {font-size:16px; font-weight:400; color:#555; line-height:1.6; margin-top:25px;padding:0 20px} #container .main-title p strong {font-weight:600; color:#ff6c00} #container .bottom-btn {padding-top:60px; text-align:center} /* COMPANY - 회사소개 */ #container .about-main {padding:150px 0; background:url(../../img/about_main_bg.jpg) center top no-repeat; background-size:cover} #container .about-main h3 {font-size:24px; font-weight:normal; color:#fff; text-align:center; line-height:1.6; margin-bottom:80px} #container .about-main .company-info {display:table; width:100%; max-width:1200px; margin:auto; table-layout:fixed} #container .about-main .company-info > li {display:table-cell; padding:50px 20px; color:#fff; text-align:center; border-right:1px solid rgba(255, 255, 255, 0.55)} #container .about-main .company-info > li:first-child {border-left:1px solid rgba(255, 255, 255, 0.55)} #container .about-main .company-info > li i {display:inline-block; font-size:48px; height:60px} #container .about-main .company-info > li h4 {font-size:18px; font-weight:600; margin:10px 0 15px} #container .about-main .company-info > li p {font-size:16px; line-height:1.35} /*20190920 기업홍보영상 섹션 추가*/ #container .about-section0{padding-bottom:0 !important} #container .about-section0 .container-inner{} #container .about-section0 .container-inner iframe{height:675px} #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:16px; line-height:1;font-weight:400} #container .about-section1 .about-info dt {float:left; display:block; width:160px; padding:20px 15px; font-weight:600; color:#2b2b2b; border-top:1px solid #333} #container .about-section1 .about-info dt span{display:block;margin-top:10px;font-size:14px;line-height:1.3;color:#999;font-weight:400} #container .about-section1 .about-info dd {display:block; margin-left:170px; padding:20px 15px; color:#666; border-top:1px solid #e2e2e2;vertical-align:middle} #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:400; color:#2b2b2b; margin:35px 0 5px} #container .about-section2 .team-info > li .detail .subtit {display:block; font-size:14px; font-weight:400; color:#9a9a9a; margin-bottom:25px} #container .about-section2 .team-info > li .detail p {color:#555; line-height:1.85;font-weight:400} #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:#2f6a87} /* 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:400; color:#fff; text-align:center; line-height:80px; border-radius:50%; background:#2f6a87; 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:8px; left:50%; content:''; width:16px; height:16px; margin-left:-8px; border:2px solid #2f6a87; 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:#2f6a87; 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:#2f6a87; z-index:20} #container .history-section .finish-box:before {display:inline-block; content:''; height:100%; vertical-align:middle} #container .history-section .finish-box p {display:inline-block; font-size:16px; font-weight:500; color:#fff; line-height:1.65; vertical-align:middle} /* COMPANY - 오시는길 */ #container .location-section {padding:0 0 80px !important} #container .location-section #map {height:500px; margin-bottom:50px} #container .location-section h3 {font-size:20px; font-weight:normal; color:#2b2b2b; margin-bottom:5px} #container .location-section h4 {font-size:15px; font-weight:normal; color:#8a8a8a; margin-bottom:60px} #container .location-section h4 span:before {content:''; display:inline-block; width:1px; height:12px; margin:0 10px; background:#ccc; vertical-align:-1px} #container .location-section .method-wrapper {border-top:3px solid #a46f0e} #container .location-section .method-wrapper .method-line {padding:30px; border-bottom:1px dotted #bbb} #container .location-section .method-wrapper .method-line p.title {font-size:20px; font-weight:normal; color:#a46f0e; margin-bottom:15px} #container .location-section .method-wrapper .method-line dl:after {content:''; clear:both; display:block} #container .location-section .method-wrapper .method-line dl dt, #container .location-section .method-wrapper .method-line dl dd {font-size:15px; padding:7px 0} #container .location-section .method-wrapper .method-line dl dt {clear:both; float:left; font-weight:normal; color:#2b2b2b; padding-right:20px} #container .location-section .method-wrapper .method-line dl dd {color:#6a6a6a} #container .location-section .method-wrapper .method-line dl dd .arrow:before {display:inline-block; content:'\e90b'; font-family:'xeicon'; margin:0 8px} #container .location-section .method-wrapper .method-line .subway {display:inline-block; color:#fff} #container .location-section .method-wrapper .method-line .subway.line1 {background:#00498b} #container .location-section .method-wrapper .method-line .subway.line2 {background:#009246} #container .location-section .method-wrapper .method-line .subway.line3 {background:#f36630} #container .location-section .method-wrapper .method-line .subway.line4 {background:#00a2d1} #container .location-section .method-wrapper .method-line .subway.line5 {background:#5940ff} #container .location-section .method-wrapper .method-line .subway.line6 {background:#cc660d} #container .location-section .method-wrapper .method-line .subway.line7 {background:#4d8000} #container .location-section .method-wrapper .method-line .subway.line8 {background:#ff33a6} #container .location-section .method-wrapper .method-line dl dt.subway {position:relative; top:4px; margin-right:20px; padding:4px 10px} #container .location-section .method-wrapper .method-line span.subway {margin:0 5px; padding:0 6px; border-radius:50%} #container .location-section .method-wrapper .method-line .box {float:left; width:40%} #container .location-section .method-wrapper .method-line .box.last {width:20%; padding-top:42px} /* BUSINESS - 사업소개 */ #container .business-intro {padding-top:0 !important} #container .business-intro .business-info > li {position:relative; text-align:center} #container .business-intro .business-info > li:before {position:absolute; top:0; left:-1px; content:''; width:1px; height:100%; background:#eee} #container .business-intro .business-info > li:first-child:before {display:none} #container .business-intro .business-info > li .iconBox img {max-width:px} #container .business-intro .business-info > li h3 {margin:40px 0 30px; font-size:18px; font-weight:600; color:#2f6a87} #container .business-intro .business-info > li p {color:#6a6a6a; line-height:1.8; word-break:keep-all;text-align:center} #container .business-intro .business-info > li p.text-l{text-align:left} #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.333333%; height:500px; text-align:center; overflow:hidden; transition:width 0.1s 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; 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 {width:400px; 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:#294282; 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:#294282} #container .business-part1 .part-items > li p {font-size:16px; color:#555; line-height:1.8;font-weight:400} #container .business-part2 {border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0} #container .business-part2 .choose-info .text-info h3 {font-size:23px; font-weight:normal; color:#2b2b2b} #container .business-part2 .choose-info .text-info h3:after {display:block; content:''; width:35px; height:2px; margin:20px 0 30px; background:#ffc600} #container .business-part2 .choose-info .text-info p {font-size:16px; font-weight:400; color:#555; line-height:1.6; margin-bottom:25px} #container .business-part3 {border-bottom:1px solid #f0f0f0} #container .business-part3 #client-slide > .info {float:left; width:30%} #container .business-part3 #client-slide > .info h3 {font-size:22px; font-weight:normal; color:#2b2b2b; margin-bottom:20px} #container .business-part3 #client-slide > .info p {color:#6a6a6a; line-height:1.8} #container .business-part3 #client-slide > .info .controller {padding-top:30px; font-size:0} #container .business-part3 #client-slide > .info .controller > li {display:inline-block; font-size:15px; margin-right:3px} #container .business-part3 #client-slide > .info .controller > li a {display:block; width:32px; height:32px; font-size:13px; color:#000; text-align:center; line-height:30px; border:1px solid #e2e2e2; border-radius:50%; transition:all 0.3s ease} #container .business-part3 #client-slide > .info .controller > li.disabled a {color:#ccc !important; border-color:#e2e2e2 !important; background:#f9f9f9 !important; cursor:not-allowed} #container .business-part3 #client-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b} #container .business-part3 #client-slide > .slides {position:relative; float:right; width:65%; padding-top:60px; overflow:hidden} #container .business-part3 #client-slide > .slides ul {position:relative; width:5000px} #container .business-part3 #client-slide > .slides ul > li {float:left; text-align:center} #container .business-part3 #client-slide > .slides ul > li img {max-width:100%} #container .business-part4 {} #container .business-part4 .plan-list > li {font-size:14px; text-align:center; vertical-align:bottom} #container .business-part4 .plan-list > li .title {padding:35px} #container .business-part4 .plan-list > li.plan1 .title {background:linear-gradient(90deg, #42b574 0%, #84c450 100%)} #container .business-part4 .plan-list > li.plan2 .title {background:linear-gradient(90deg, #64aae1 0%, #79ccf2 100%)} #container .business-part4 .plan-list > li.plan3 .title {background:linear-gradient(90deg, #f5bf2f 0%, #f3a43d 100%)} #container .business-part4 .plan-list > li.plan4 .title {background:linear-gradient(90deg, #f54b0f 0%, #e50a0a 100%)} #container .business-part4 .plan-list > li .title > h3 {font-size:24px; font-weight:500; color:#fff} #container .business-part4 .plan-list > li .title > span {font-size:16px; font-weight:500; color:#fff; margin-bottom:15px; opacity:0.8} #container .business-part4 .plan-list > li .title > .price {font-size:24px; font-weight:500; color:#fff} #container .business-part4 .plan-list > li .title > .price span {font-size:18px; font-weight:500; color:#fff; vertical-align:5px} #container .business-part4 .plan-list > li .title > .price em {font-size:13px; color:#fff; padding-left:5px; vertical-align:-2px} #container .business-part4 .plan-list > li .info {padding:20px; border:1px solid #f0f0f0; border-top:none} #container .business-part4 .plan-list > li .info > ul {margin-bottom:20px} #container .business-part4 .plan-list > li .info > ul > li {padding:10px 0; color:#8b8b8b; border-top:1px solid #f0f0f0} #container .business-part4 .plan-list > li .info > ul > li:first-child {border-top:none} #container .business-part4 .plan-list > li .info > ul > li strong {font-weight:600; color:#2b2b2b; padding-right:5px} #container .business-part4 .plan-list > li .info .btn-black {padding-top:18px; padding-bottom:18px} /*------------------ 버튼 스타일 ------------------ */ .btn-arrow {position:relative; display:inline-block; font-size:15px; color:#666; text-align:left; line-height:1; padding:15px; width:100%;max-width:300px; border:1px solid #dedede; transition:all 0.3s} .btn-arrow i {position:absolute; right:25px; transition:right 0.3s} .btn-arrow:hover {color:#2f6a87} .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:#2f6a87; background:#2f6a87} .btn-admin:hover {border-color:#f29e00; background:#f29e00} .btn-danger {color:#fff !important; border-color:#d92f2f; background:#d92f2f} .btn-danger:hover {border-color:#cf2b2b; background:#cf2b2b} .btn-primary {display:inline-block; font-size:14px; color:#fff; line-height:1; padding:15px 25px; border-radius:3px; background:#2f6a87; 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:15px; color:#fff; line-height:1; padding:15px 25px; background:#4b4b4b; transition:all 0.4s} .btn-black:hover {background:#2f6a87} .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:#2f6a87} .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(31, 70, 95,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-container #post_area img:first-child {display:none !important} /* 주석 해제 (기존 게시판 적용) */ /* 아토락, 엑소나인 게시판의 상세 페이지에서도 첫 번째 이미지(썸네일)를 숨기도록 추가 (특이도 확보) */ .atorak_product_view img:first-child {display:none !important} .exonine_product_view img:first-child {display:none !important} .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%} /*제품 상세페이지 20181017*/ #post_area .conbox6{width:100%} #post_area .conbox6 table{table-layout:fixed;border-collapse:collapse} #post_area .conbox6 table .col-w{width:20%} #post_area .conbox6 table tr{} #post_area .conbox6 table tr td{padding:10px 15px;border:1px solid #ccc;font-size:12px !important;line-height:1.3;text-align:left;word-break:keep-all} #post_area .conbox6 table tr td.td-bg{background:#F8F9FB} #post_area .conbox6 table tr td.wb-n{word-break:normal} #post_area .conbox6 table tr .mask_Ingre{display:block;padding:15px 0 3px} #post_area .conbox6 table tr .mask_Ingre:first-child{padding-top:0} /*20181022 아토락페이지 추가*/ #container .atorak_page{margin-bottom:50px;border-top:1px solid #f0f0f0} #container .atorak_sec{margin-top:-10px} #container .atorak_sec ul{margin:0 -15px} #container .atorak_sec ul li{width:33.333%;padding:0 15px;float:left;overflow:hidden} #container .atorak_sec ul li a{} #container .atorak_sec .product_ato{position:relative;} #container .atorak_sec .product_ato.img{padding:47% 0;background-size:cover} #container .atorak_sec .product_ato.img01{background-image:url(../../img/atorak01.jpg)} #container .atorak_sec .product_ato.img02{background-image:url(../../img/atorak02.jpg)} #container .atorak_sec .product_ato.img03{background-image:url(../../img/atorak03.jpg)} #container .atorak_sec .product_ato span{display:inline-block;width:100%} #container .atorak_sec .product_ato span.ov_bg_txt{vertical-align:bottom} #container .atorak_sec .product_ato span.ov_bg_txt .bg{height:100%;background-color:rgba(31, 70, 95,0.85);position:absolute;top:100%;left:0;transition:all 0.35s ease;opacity:0} #container .atorak_sec .product_ato span.ov_bg_txt .bg.ov{top:0;} #container .atorak_sec .product_ato:hover span.ov_bg_txt .bg{top:0;opacity:1} #container .atorak_sec .product_ato span.ov_bg_txt .txt{padding:0 30px;position:absolute;bottom:44px;font-size:16px;color:#fff;box-sizing:border-box} #container .atorak_sec .product_ato span.ov_bg_txt .txt:after{content:'';display:block;width:30px;height:1px;background-color:#fff;margin-top:15px} #container .atorak_view {text-align:center} .atorak_product_view{} .atorak_product_view table{table-layout:fixed;border-collapse:collapse} .atorak_product_view table .col-w1{width:20%} .atorak_product_view table .col-w2{} .atorak_product_view table tr{} .atorak_product_view table tr td{padding:5px 15px;border:1px solid #999;font-size:12px;word-break:keep-all} .atorak_product_view table tr td.td-bg{background-color:#efefef} .atorak_product_view table tr td.td-wb{word-break:normal} /*20231113 엑소나인 페이지 추가*/ #container .exonine_page{margin-bottom:50px;border-top:1px solid #f0f0f0} #container .exonine_sec{margin-top:-10px} #container .exonine_sec ul{margin:0 -15px} #container .exonine_sec ul li{width:33.333%;padding:0 15px;float:left;overflow:hidden} #container .exonine_sec ul li a{} #container .exonine_sec .product_exonine{position:relative;} #container .exonine_sec .product_exonine.img{padding:47% 0;background-size:cover} #container .exonine_sec .product_exonine.img01{background-image:url(../../img/exonine01_s.png)} #container .exonine_sec .product_exonine.img02{background-image:url(../../img/exonine02_s.png)} #container .exonine_sec .product_exonine.img03{background-image:url(../../img/exonine03_s.png)} #container .exonine_sec .product_exonine span{display:inline-block;width:100%} #container .exonine_sec .product_exonine span.ov_bg_txt{vertical-align:bottom} #container .exonine_sec .product_exonine span.ov_bg_txt .bg{height:100%;background-color:rgba(31, 70, 95,0.85);position:absolute;top:100%;left:0;transition:all 0.35s ease;opacity:0} #container .exonine_sec .product_exonine span.ov_bg_txt .bg.ov{top:0;} #container .exonine_sec .product_exonine:hover span.ov_bg_txt .bg{top:0;opacity:1} #container .exonine_sec .product_exonine span.ov_bg_txt .txt{padding:0 30px;position:absolute;bottom:44px;font-size:16px;color:#fff;box-sizing:border-box} #container .exonine_sec .product_exonine span.ov_bg_txt .txt:after{content:'';display:block;width:30px;height:1px;background-color:#fff;margin-top:15px} #container .exonine_view {text-align:center} .exonine_product_view{} .exonine_product_view table{table-layout:fixed;border-collapse:collapse} .exonine_product_view table .col-w1{width:20%} .exonine_product_view table .col-w2{} .exonine_product_view table tr{} .exonine_product_view table tr td{padding:5px 15px;border:1px solid #999;font-size:12px;word-break:keep-all} .exonine_product_view table tr td.td-bg{background-color:#efefef} .exonine_product_view table tr td.td-wb{word-break:normal} /* 최근 게시물 - 리스트형 */ .tbl-brd-latest {width:100%; border-top:1px solid #e5e5e5; table-layout:fixed} .tbl-brd-latest td[width="1%"] {display:none} .tbl-brd-latest td[align="center"] {text-align:right} .tbl-brd-latest tr td {font-size:14px; font-weight:400; color:#888; padding:30px 50px; border-bottom:1px solid #e5e5e5} .tbl-brd-latest tr td a {font-size:18px; font-weight:400; color:#7b7b7b} .tbl-brd-latest tr td a:hover {color:#2f6a87} /* 게시판 공통 */ /* 테이블 */ .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} /*------------------ 폼메일 스타일 ------------------ */ 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} /* ---------------------------------------------------------- * 미디어 쿼리 ---------------------------------------------------------- */ @media screen and (min-width:1025px) { /*------------------ 메인페이지 스타일 ------------------ */ /* 메인 섹션 - PRODUCT */ #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:#2d9bb2; background:#2d9bb2; 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) { /*------------------ 메인페이지 스타일 ------------------ */ #mainContainer #section4 *[class*=dp-grid-] > *{padding:0 5px} /* 키비주얼 */ #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 #section1 .business-grid > li .btn-arrow{max-width:100%} /* 메인 섹션 - 패럴랙스 이미지 */ #mainContainer #section2 {padding:220px 0} /*#mainContainer #section2 .text h2 {font-size:56px}*/ .pc_none{display:block;} .m_none{display:none;} .main_bg_title tspan.stroke_b{stroke:#000;} #mainContainer #section2 .text h2{font-size:10vw;} /* CONTACT */ #mainContainer #contact #map {float:none; width:100%; height:450px; min-height:inherit; margin-bottom:0; padding-bottom:0} #mainContainer #contact .form-container {float:none; width:100%; max-width:inherit; margin-bottom:0; padding:50px} #mainContainer #contact .form-container h2 {font-size:26px; font-weight:500; color:#fff; margin-bottom:30px} #mainContainer #contact .form-container .input-wrap {margin-bottom:15px} #mainContainer #contact .form-container .input-wrap input[type=text], #mainContainer #contact .form-container .input-wrap input[type=password], #mainContainer #contact .form-container .input-wrap textarea {width:100%; color:#333; border:none; border-bottom:1px solid #40464c; background:transparent; outline:none; transition:all 0.3s} #mainContainer #contact .form-container .input-wrap input[type=text]:focus, #mainContainer #contact .form-container .input-wrap input[type=password]:focus, #mainContainer #contact .form-container .input-wrap textarea:focus {color:#fff; border-color:#fff} #mainContainer #contact .form-container .input-wrap input[type=text], #mainContainer #contact .form-container .input-wrap input[type=password] {height:45px} #mainContainer #contact .form-container .input-wrap textarea {height:90px; resize:none} #mainContainer #contact .form-container .input-wrap .left {float:left; width:48%} #mainContainer #contact .form-container .input-wrap .right {float:right; width:48%} #mainContainer #contact .form-container button[type=submit] {margin:30px 0 60px} #mainContainer #contact .form-container dl dt, #mainContainer #contact .form-container dl dd {font-size:13px; line-height:1.75} #mainContainer #contact .form-container dl dt {clear:both; float:left; width:105px; font-family:'Quicksand','Noto Sans KR',sans-serif; font-weight:600; color:#666} #mainContainer #contact .form-container dl dt i {margin-right:8px; vertical-align:-1px} #mainContainer #contact .form-container dl dd {color:#eee; margin-bottom:15px; padding-left:100px} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:380px; overflow:hidden} #subVisual > .visual_img {top:-20px; width:1800px; margin-left:-900px} /* 섹션 공통 */ #container .container-inner {padding:0 30px} #container section.sub-section {position:relative; padding:60px 0} /* COMPANY - 회사소개 */ #container .about-main {padding:130px 0} #container .about-main h3 {font-size:21px; margin-bottom:70px} #container .about-main .company-info {padding:0 30px} #container .about-section0 .container-inner iframe{height:520px} #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:px} #container .business-intro .business-info > li h3 {margin:30px 0 20px} #container .business-detail .detail-items > li .bg:before {opacity:0.5} #container .business-detail .detail-items > li .info-box {top:20%} #container .business-detail .detail-items > li .info-box h3 {font-size:18px} #container .business-detail .detail-items > li .info-box p {width:100%; padding:0; opacity:1} #container .business-detail .detail-items > li .info-box a {opacity:1} /* BUSINESS - 사업소개 홍보영상 모달 */ #container .business-detail #promo-wrapper > .modal {width:80%; max-width:inherit; height:280px; margin:-140px 0 0 -40%; box-shadow:0 0 40px 10px rgba(0,0,0,0.2)} #container .business-detail #promo-wrapper > .modal iframe {height:280px} #container .business-detail #promo-wrapper > .modal .btn-close {right:-50px; width:35px; height:35px} #container .business-detail #promo-wrapper > .modal .btn-close span {top:12px; width:30px; margin-left:-15px} /* BUSINESS - 사업분야 */ #container .business-part4 .plan-list > li {margin-bottom:40px; vertical-align:top} #container .business-part4 .plan-list > li .title {padding:30px} #container .business-part4 .plan-list > li .title > h3 {font-size:20px} #container .business-part4 .plan-list > li .title > span {font-size:15px} #container .business-part4 .plan-list > li .title > .price {font-size:20px} #container .business-part4 .plan-list > li .title > .price span {font-size:16px} /*------------------ 게시판 스타일 ------------------ */ /* 갤러리형 스타일 */ div[class^=photo-grid-] .photo-grid-inner > table {width:50% !important} div[class^=photo-grid-] .photo-grid-inner > table a {display:block} .container-fluid div[class^=photo-grid-] .photo-container {padding:0 50px} } @media screen and (max-width:768px) { /*------------------ 메인페이지 스타일 ------------------ */ /* 키비주얼 */ #keyVisual {height: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:28px; margin:10px 0 20px} #keyVisual .slides > li .text p {font-size:13px} #keyVisual .slides > li .text p span.block{display:block} #keyVisual .slides > li .text .btn-arrow {width:150px;padding:10px;font-size:13px} #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; width:30px; _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}*/ /* 메인 섹션 - PRODUCT */ #mainContainer #section4 .photo-grid > table {margin-bottom:50px} #mainContainer #section4 .photo-grid > table tr:last-child td {padding:20px 20px 50px;} #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} /* CONTACT */ #mainContainer #contact #map {height:350px} #mainContainer #contact .form-container {padding:40px 15px} #mainContainer #contact .form-container h2 {font-size:24px} #mainContainer #contact .form-container .input-wrap textarea {height:80px} #mainContainer #contact .form-container button[type=submit] {margin:20px 0 50px} /*------------------ 서브페이지 스타일 ------------------ */ /* 서브비주얼 */ #subVisual {height:260px} #subVisual > .visual_img {top:-10px; width:1100px; margin-left:-550px} #subVisual > .title h2 {font-size:28px} /* 페이지 내비게이션 */ #breadcrumbs > .container > .home {display:none} #breadcrumbs > .container > div {width:50%} #breadcrumbs > .container > div > a {height:40px; padding:0 15px; font-size:14px; line-height:40px} #breadcrumbs > .container > div:last-child > a {border-right:none} #breadcrumbs > .container > div > a:after {right:10px; font-size:13px} #breadcrumbs > .container > div > ul {top:40px; padding:15px 20px} #breadcrumbs > .container > div > ul li a {font-size:14px} /* 섹션 공통 */ #container .container-inner {padding:0 15px} #container section.sub-section {position:relative; padding:50px 0} #container .main-title {padding:35px 0} #container .main-title h2 {font-size:22px} #container .main-title img{max-width:40%} #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-section0 .container-inner iframe{height:415px} #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:14px; 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-section1 .about-info dd{line-height:1.4} #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} #container .about-section2 .team-info > li .detail p{font-size:14px} /* COMPANY - 연혁 */ #container .history-section .year-wrap:before {display:none} #container .history-section .year-wrap:last-child {padding-bottom:150px} #container .history-section .year-wrap > ul > li {margin-top:25px; padding-left:0 !important; padding-right:0 !important; text-align:center !important} #container .history-section .year-wrap > ul > li:before {position:relative; left:2px; display:block; width:10px; height:10px; margin:0 auto 20px; border-width:1px} #container .history-section .year-wrap > ul > li h3 {font-size:18px; margin-bottom:15px} #container .history-section .year-wrap > ul > li dl dt, #container .history-section .year-wrap > ul > li dl dd {font-size:13px} #container .history-section .finish-box {width:100px; height:100px; margin-left:-50px; border-width:4px} #container .history-section .finish-box p {font-size:13px} #container .history-section .finish-box:after {position:absolute; bottom:96px; left:50%; content:''; width:1px; height:35px; background:#eee} /* COMPANY - 오시는길 */ #container .location-section #map {height:350px} #container .location-section h3 {font-size:16px} #container .location-section h4 {font-size:14px; margin-bottom:40px} #container .location-section .method-wrapper .method-line {padding:20px 0} #container .location-section .method-wrapper .method-line p.title {font-size:16px} #container .location-section .method-wrapper .method-line dl dt, #container .location-section .method-wrapper .method-line dl dd {font-size:13px; padding:0} #container .location-section .method-wrapper .method-line dl dt {float:none; margin-bottom:5px; font-weight:600} #container .location-section .method-wrapper .method-line dl dd {margin-bottom:10px; line-height:1.65} #container .location-section .method-wrapper .method-line dl dt.subway {position:static; margin-right:20px; padding:4px 10px} #container .location-section .method-wrapper .method-line span.subway {padding:0 4px; line-height:1.3} #container .location-section .method-wrapper .method-line .box {float:none; clear:both; width:100%; padding-top:20px} #container .location-section .method-wrapper .method-line .box.last {width:100%; padding:0 !important} #container .location-section .method-wrapper .method-line .box:first-child {padding-top:0 !important; padding-bottom:10px} #container .location-section .method-wrapper .method-line .box:nth-child(2) {border-top:1px dotted #bbb} /* BUSINESS - 사업소개 */ #container .business-intro .business-info > li {margin-bottom:45px} #container .business-intro .business-info > li:nth-child(3) {margin-bottom:45px !important} #container .business-intro .business-info > li h3 {font-size:16px; margin:25px 0 10px} #container .business-intro .business-info > li p {font-size:14px} #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:14px} #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:14px; margin-bottom:20px} #container .business-part3 #client-slide > .info {float:none; width:100% !important; margin-bottom:35px} #container .business-part3 #client-slide > .info h3 {font-size:16px} #container .business-part3 #client-slide > .info p {font-size:13px} #container .business-part3 #client-slide > .info .controller {padding-top:25px} #container .business-part3 #client-slide > .info .controller > li {font-size:13px} #container .business-part3 #client-slide > .info .controller > li a {width:28px; height:28px; font-size:12px; line-height:26px} #container .business-part3 #client-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b} #container .business-part3 #client-slide > .slides {float:none; width:100% !important; padding-top:0} #container .business-part4 .plan-list > li {margin-bottom:25px} #container .business-part4 .plan-list > li:last-child {margin-bottom:40px} #container .business-part4 .plan-list > li .info > ul > li {font-size:13px} /*------------------ 버튼 스타일 ------------------ */ .btn-arrow {font-size:14px} .btn {font-size:13px} /*------------------ 게시판 스타일 ------------------ */ /* 리스트형 스타일 */ .tbl-brd-list tr td, .tbl-brd-list font, .tbl-brd-list span {font-size:13px !important} .tbl-brd-read tr td, .tbl-brd-read tr td font, .tbl-brd-read tr td span {font-size:13px !important} /* FAQ 스타일 */ .tbl-brd-faq .board_bgcolor {width:60px !important} .tbl-brd-faq .reply-row td {padding:15px !important} .tbl-brd-faq .reply-row td .reply-block {float:left; display:block; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#2f6a87} .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 5px} .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} /* 제품 정보고시 */ #post_area .conbox6 table tr td{font-size:11px !important} } /* 저해상도 모바일 */ @media screen and (max-width:670px) { #container .about-section0 .container-inner iframe{height:350px} } @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} /*갤러리 게시판*/ .tbl-brd-read tr td{padding:0} #post_area .conbox6 table .col-w{width:10% !important} .business-intro .tbl-brd-read tr td{padding:10px;} } /* 사업영역 > 사업영역 20180410 추가 */ .mt48{margin-top:48px} .clear{overflow:hidden} .clear:after{content:'';display:block;clear:both} .img_left{float:left} .img_right{float:right} .main-title p.desc{max-width:1120px;width:100%;margin:25px auto 0} .business_area{margin-bottom:100px} .business_area > section{margin-bottom:50px;text-align:center} .business_area > section .sec_tit{padding:10px 0 20px;position:relative;font-size:30px} .business_area > section .sec_tit:after{content:'';display:block;width:30px;height:2px;margin-left:-15px;background:#ea5d4b;position:absolute;top:0;left:50%} .business_area > section .sec_tit .s_tit{display:block;font-size:15px;color:#555} .business_area > section p.desc{margin-bottom:20px;font-size:15px} .business_area > section h4{margin-bottom:20px;font-size:25px;font-weight:400} .business_area > section .img_box{margin:-1%;box-sizing:border-box} .business_area > section .img_box img{} .business_area > section .img_box .sec_img{width:48%;margin:1%;box-sizing:border-box} .business_area > section .img_box .sec_img.img_left{text-align:right} .business_area > section .img_box .sec_img.img_right{text-align:left} /* 20180404 추가*/ /*제품소개 > 루비셀*/ .main-title-border-b{border-bottom:1px solid #f0f0f0} /*제품소개 > 세비앙스/홈케어기기*/ .ceviangs{} .ceviangs li{width:100%;padding:20px 0;box-sizing:border-box} .ceviangs li:after{content:'';display:block;clear:both} .ceviangs li .iconBox{width:50%;text-align:center} .ceviangs li .iconBox img{} .ceviangs li .iconBox-l{float:left} .ceviangs li .iconBox-r{float:right} .ceviangs li .textBox{width:50%;word-break:keep-all} .ceviangs li .textBox-l{float:left} .ceviangs li .textBox-r{float:right} .ceviangs li .textBox h3{margin:100px 0 10px} .ceviangs li .textBox p{font-size:14px} .ceviangs li .textBox p.subTitle{color:#8c8c8c;font-weight:400} .ceviangs li .textBox p.desc{margin:15px 0;line-height:23px} .ceviangs li .textBox p.sizeComponent{padding-left:15px;position:relative} .ceviangs li .textBox p.sizeComponent:before{content:'';display:block;width:4px;height:4px;background:#666;border-radius:4px;position:absolute;left:0;top:7.5px} .ceviangs li .textBox p.sizeComponent span{display:inline-block} .ceviangs li .textBox p.sizeComponent span.spanBox{position:absolute;left:65px} .ceviangs li .textBox p.sizeComponent span.spanList{display:block} .ceviangs li .textBox p.sizeComponent.box{min-height:100px;} /* 홍보센터 > 주요수출국가 20180323 추가 */ .promotion_pc{display:block} .promotion_mo{display:none} @media screen and (max-width:1240px) { #header > .inner, #keyVisual .slides > li .text{padding:0 20px} #mainContainer #section1 *[class*=dp-grid-].gutter-xs, #mainContainer #section4 *[class*=dp-grid-]{margin:0} } /*20180323 반응형 추가*/ @media screen and (max-width:1200px) { /* BUSINESS - 사업소개 */ #container .business-part1 .part-items{display:inline-block;width:100%;margin:0;padding:0 20px;box-sizing:border-box} #container .business-part1 .part-items > li{width:50%} /*제품소개 > 세비앙스/홈케어기기*/ .ceviangs li .textBox p br{display:none} } @media screen and (max-width:1024px) { #container .business-detail .detail-items > li{height:350px;padding:20px 0 30px;box-sizing:border-box} #container .business-detail .detail-items > li:nth-child(3){padding-bottom:36px} #container .bottom-btn{padding-top:0} } @media screen and (max-width:950px) { #container .business-part2 .choose-info .text-info p br{display:none} } @media screen and (max-width:768px) { /* 사업영역 > 사업영역 */ .business_area > section .sec_tit{font-size:22px} .business_area > section .sec_tit .s_tit{font-size:14px} .business_area > section p.desc{font-size:14px;word-break:keep-all} .business_area > section h4{font-size:18px} .business_area{margin-bottom:50px} .business_area > section .img_box{margin:0} #container .business-detail .detail-items > li{width:80%;height:100%;margin:0 auto 15px;padding:60px 0 30px;box-sizing:border-box} #container .business-detail .detail-items > li .bg{top:auto;left:auto;bottom:0;right:0} /*제품소개 > 세비앙스/홈케어기기*/ .ceviangs li .iconBox{width:100%;margin-bottom:20px} .ceviangs li .iconBox-l{float:none} .ceviangs li .iconBox-r{float:none} .ceviangs li .textBox{width:100%} .ceviangs li .textBox-l{float:none} .ceviangs li .textBox-r{float:none} .ceviangs li .textBox h3{margin:20px 0 10px} .ceviangs li .textBox p{font-size:14px} .ceviangs li .textBox p.subTitle{color:#8c8c8c;font-weight:400} .ceviangs li .textBox p.desc{margin:15px 0;line-height:23px} .ceviangs li .textBox p.sizeComponent{padding-left:15px;position:relative} .ceviangs li .textBox p.sizeComponent:before{content:'';display:block;width:4px;height:4px;background:#666;border-radius:4px;position:absolute;left:0;top:7.5px} /* 홍보센터 > 주요수출국가 20180411추가 */ .promotion_pc{display:none} .promotion_mo{display:block} } @media screen and (max-width:680px) { #mainContainer .main-section .main-title p br{display:none} .business_area > section p.desc br{display:none} } @media screen and (max-width:640px) { /*#mainContainer #section2 .text h2{font-size:24px}*/ } @media screen and (max-width:560px) { .business_area > section .img_box .sec_img{width:100%;margin:0 0 20px} .business_area > section .img_box .img_left{float:none} .business_area > section .img_box .img_right{float:none} } @media screen and (max-width:480px) { /* BUSINESS - 사업소개 */ #container .business-part1 .part-items{} #container .business-part1 .part-items > li{width:100%;margin:0 auto 30px !important;padding:0 40px} #container .business-part1 .part-items > li p{line-height:1.4} } @media screen and (max-width:400px) { #container .business-detail .detail-items > li{width:100%} } /*20181115 메인 슬라이드 추가*/ @media screen and (max-width:640px) { #keyVisual .slides > li.slide-00{background-image:url(../../img/m_keyvisual00.jpg);background-size:cover;} #keyVisual .slides > li.slide-1{background-image:url(../../img/m_keyvisual5.jpg);background-size:cover;background-position:49% bottom} #keyVisual .slides > li.slide-2{background-image:url(../../img/m_keyvisual0.jpg);background-size:cover} #keyVisual .slides > li.slide-0{background-image:url(../../img/m_keyvisual6.jpg);background-size:cover} #keyVisual .slides > li.slide-contest {background:url(../../img/m_brand_contest.jpg) center bottom no-repeat} #keyVisual .slides > li.slide-7{background-image:url(../../img/m_keyvisual7.jpg);background-position:49% bottom;background-size:cover} #keyVisual .slides > li.slide-8{background-image:url(../../img/m_keyvisual8.jpg);background-position:49% bottom;background-size:cover} #keyVisual .slides > li.slide-9{background-image:url(../../img/m_keyvisual9.jpg);background-position:49% bottom;background-size:cover} #keyVisual .slides > li.slide-10{background-image:url(../../img/m_keyvisual10.jpg);background-position:49% bottom;background-size:cover} #keyVisual .slides > li.slide-11{background-image:url(../../img/m_keyvisual11.jpg);background-position:49% bottom;background-size:cover} } /* 20201027 줄기세포 서브페이지 */ .stem_cell{text-align:center;} .stem_cell .title{font-size: 25px;line-height: 35px;margin-bottom: 30px;color: #1f50ad;} .stem_cell .sub_txt02 {font-size: 16px;line-height: 30px;color: #000;margin-bottom: 50px;} .pb20{padding-bottom:20px;} .stem_cell .title_02 {font-size: 22px;line-height: 30px;margin-bottom: 30px;color: #000;text-align: center;} .list_table01 {width: 100%;margin-bottom: 50px;border-top: 2px solid #1f50ad;} .list_table01 th {border-bottom: 1px solid #ddd;color: #000;font-size: 16px;line-height: 30px;padding-bottom: 15px;padding-top: 15px;text-align: center;} .list_table01 td {border-bottom: 1px solid #ddd;color: #333;font-size: 13px;line-height: 30px;padding-bottom: 15px;padding-top: 15px;text-align: center;word-break: break-all;} .stem_cell .con02 {margin-bottom: 70px;} .stem_cell .con02:after{content:'';display: block;clear: both;} .stem_cell .con02 li {float: left;position: relative;width: 168px;height: 168px;padding-top: 100px;color:#000;font-size:14px;line-height: 20px;} .stem_cell .con02 li.circle {background: url(../../img/stem_cell_bg01.png) no-repeat center center;} .stem_cell .con02 li:nth-child(5) {padding-top: 110px;} .stem_cell .con02 li:last-child {padding-top: 90px;} .stem_cell .con02 li .icon {position: absolute;top: 30px;left: 50%;margin-left: -35px;content: "";height: 50px;width: 70px;background-repeat: no-repeat;background-image: url(../../img/stem_cell_icon01.png);} .stem_cell .con02 li .img01 {background-position: 0 0;} .stem_cell .con02 li .img02 {background-position: -70px 0;} .stem_cell .con02 li .img03 {background-position: -140px 0;} .stem_cell .con02 li .img04 {background-position: -210px 0;} .stem_cell .con02 li .img05 {background-position: -280px 0;} .stem_cell .con02 li.arrow {width: 90px;background: url(../../img/stem_cell_left.png) no-repeat center center;} .st_cell_sub_cont{position: relative;margin: 0 auto;width:100%;text-align: center;} .st_cell_sub_cont .con03 {margin-bottom: 100px;padding-top: 100px;background-image: url(../../img/stem_cell_02.jpg);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;background-position: center;height: 400px;} .st_cell_sub_cont .con03 h3 {font-size: 30px;color: #000;margin-bottom: 40px;} .st_cell_sub_cont .con03 p {font-size: 16px;line-height: 30px;} .video_bg_wide{position: relative;overflow: hidden;height: 520px;min-height: 25rem;width: 100%;background-color: #000;} .video_bg_wide video{position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: 0;transform: translate(-50%, -50%);z-index: 9;} .video_bg_wide:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.2);z-index: 10;} @media screen and (max-width:768px) { .m_none{display:none;} .stem_cell .title{font-size: 18px;line-height: 25px;margin-bottom: 20px;} .stem_cell .sub_txt02{margin-bottom: 10px;font-size: 13px;line-height: 25px;word-break: keep-all;} .stem_cell .title_02{margin-bottom: 20px;font-size: 16px;line-height: 25px;} .list_table01{margin-bottom: 40px;} .list_table01 th{padding: 10px;font-size: 14px;} .list_table01 td{padding: 10px;font-size: 14px;line-height: 20px;} .stem_cell .con02{margin-bottom: 30px;} .stem_cell .con02 li{float:none;margin-bottom:10px;padding:0;width:auto;height:auto;} .stem_cell .con02 li.circle{position: relative;background:none;border: 2px solid #1f50ad;border-radius: 5px;padding: 10px;} .stem_cell .con02 li .icon{display:block;position:static;margin: 0 auto 10px;} .stem_cell .con02 li.arrow{width: 100%;height: 20px;background: url(../../img/stem_cell_down.png) no-repeat center center;-webkit-background-size: 10px;background-size: 10px;} .st_cell_sub_cont .con03{margin-bottom: 40px;padding: 30px 0;} .st_cell_sub_cont .con03 h3{margin-bottom: 10px;font-size: 25px;line-height: 35px;} .st_cell_sub_cont .con03 p{font-size: 13px;color: #000;line-height:1.4;word-break: keep-all;} .st_cell_sub_cont .con03 {padding: 30px 0;margin-bottom: 40px;height:auto;background-image: url(../../img/stem_cell_03.jpg);background-repeat: no-repeat;background-attachment: inherit;background-size: cover;background-position: center;} .video_bg_wide{height: 70vw;min-height: 20vw;} .video_bg_wide video{height:30vh;} }