/* ========================================================================== Sub Title ========================================================================== */ .subTit {text-align:center; padding:2em 0 1em 0;} .subTit>h3 {color:#333; font-size:1.5em; letter-spacing:-0.1em; margin-bottom:0.333em} .subTit>p {color:#666} .subTit>p>span {display:inline-block;} .imgBox1 {display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; border-top:2px solid #333; border-bottom:1px solid #ccc} .imgBox1>li {width:100%; padding:1em} @media only screen and (min-width:1000px){ .subTit {padding:3em 0 4em 0} .subTit>h3 {font-size:2.125em} .subTit>p>span {display:block; white-space:nowrap} .imgBox1>li:nth-of-type(1) {width:45%} .imgBox1>li:nth-of-type(2) {width:50%} } /* ========================================================================== Media Boxes ========================================================================== */ .thumbnail-overlay {background-color: rgba(34,34,34,.7);} .media-box-content {background:#f5f5f5 !important; text-align:center; transition:.2s ease-out;} .media-box-content:hover {background:#008738 !important;} .media-box-title {color:#333; font-weight:700!important} .media-box-title a {display:block; padding:1rem !important;transition:.2s ease-out; letter-spacing:-0.1em; min-height:90px;} .media-box-content:hover>div,.media-box-content:hover>div:before{ color:#fff !important} .media-box-content .media-box-date {margin-bottom:1em} .media-box-content:hover .media-box-title a {color:#fff; transition:.2s ease-out;} .media-box-content:hover .media-box-title a span {color:#008738; border-color:#00652a} .media-box-content .media-box-title input {margin:0 0 0.333em 0} .media-box-date {color:#333 !important; font-size:15px !important} .media-box-date:before {content:"공사기간 : "; color:#666; font-size:15px; font-weight:300; display:inline-block; margin-right:0.333em} .filters-container {display:flex; flex-flow:row wrap; justify-content:space-between; margin-top:2em} .media-boxes-filter,.media-boxes-search {width:100%} .media-boxes-search input[type="text"] { width: calc( 100% - 76px ); max-width:none !important} .media-box-title .part {border:1px solid #b5b7bf; padding:0.222em 1em; background:#fff; border-radius:2em; font-family:'nsk'; font-size:13px; margin-right:0.666em} .certify .media-box-title {color:#fff !important;} .certify .media-box-container {border:1px solid #dee1de} .media-boxes-filter>li a {border:1px solid #555 !important; color:#333 !important; font-size:14px !important} .media-boxes-filter>li a.selected {background:#333 !important;} .media-boxes-filter>li a:hover {color:#000 !important;} @media only screen and (min-width:1000px){ .media-boxes-filter {width:60%} .media-boxes-search{width:40%} } /*포토리스트*/ /* make your own style of the filter */ .custom-filters-container{ margin-bottom: 20px; } .custom-filter{ padding: 0; text-align: right; } .custom-filter li{ list-style: none; display: inline-block; margin-left: 18px; font-size: 14px; } .custom-filter li a{ color: #999; text-decoration: none; } .custom-filter li a:hover{ color: #333; } .custom-filter li a.selected{ color: #008738 !important; } #grid .media-box-container {border-radius:0} .photo-grid{margin: 0; display: flex; flex-wrap: wrap;} /* hover effect on the image */ .media-box-image img{ -webkit-transition: transform 0.6s ease-in-out; -moz-transition: transform 0.6s ease-in-out; -o-transition: transform 0.6s ease-in-out; -ms-transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } .media-box-image:hover img{ -webkit-transform: scale(1.2) translate(-20px); -moz-transform: scale(1.2) translate(-20px); -o-transform: scale(1.2) translate(-20px); -ms-transform: scale(1.2) translate(-20px); transform: scale(1.2) translate(-20px); } /*.overview .media-box-title {color:#fff}*/ #grid .media-boxes-no-more-entries {display:none !important} @media only screen and (min-width:768px){ .photo-box {width:50%} } @media only screen and (min-width:1000px){ .photo-box { width: 33.333%;} } /*배너리스트*/ .bnrList {display:flex; flex-flow:row wrap} .bnrList>div {width:100%;; margin-bottom:1rem} .bnrList>div>a>p:nth-of-type(1) {display:block; padding:1rem; border:1px solid #e7e7e7} .bnrList>div>a>p:nth-of-type(2) {text-align:center; padding:1rem 0; border-bottom:1px solid #111111; color:#222} @media all and (min-width:768px) { .bnrList {margin:0 -1%} .bnrList>div {width:48%; margin:1%} } @media all and (min-width:1024px) { .bnrList>div {width:31.333%} } /*상단*/ .bbsTOP {position:relative; background:#fff; color:#333; padding:1.5rem 1.2rem; border:1px solid #e4e4e4;} .bbsTOP:before {content:""; position:absolute; left:0; top:-1px; width:100%; height:3px; background:#003399} .bbsTOP>h4 {font-weight:700; font-size:2.0em; margin-bottom:0.333em} .bbsTOP ul {display:flex; flex-flow:row wrap; margin-top:1rem} .bbsTOP ul li {margin-right:1rem; font-weight:500} .bbsTOP p span {display:inline-block; white-space:nowrap} .licon {padding-left:100px} .licon:before{content:""; position:absolute; top: 50%; left:1rem; transform: translateY(-50%); bottom:0; width:80px; height:80px; background-image:url(../images/contents/bbsTicon1.png); background-repeat:no-repeat; background-size:cover;} @media only screen and (min-width:1000px){ .windowView {justify-content:space-between} .windowView .detailV {margin:2rem 0} .windowView>div.cont {width:50%} .windowView>div.cont {width:46%} .bbsTOP {padding:3rem 2rem} .licon {padding-left:120px} .licon:before{content:""; width:100px; height:100px;} .bbsTOP ul li {font-size:1.125rem} } /*인사말*/ .greeting {max-width:800px; margin:0 auto} .greeting>p.bigTxt {font-size:2em;color:#333; text-align:center; letter-spacing:-0.1em; margin:1em 0} .greeting>p {font-weight:300; color:#555; margin-bottom:1em} .greeting>p:nth-of-type(3) {margin-bottom:2em} .greeting>p>span {white-space:nowrap} /*약도*/ .comPic {position:relative; display:flex; flex-flow:row wrap; justify-content:center; width:100%; padding-bottom:41%;} .comPic:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/contents/comPic.jpg) no-repeat center center; background-size:cover} .comPic .inCnt {position:relative; width:100%; padding:1em; background:rgba(48,125,193,0.9); text-align:center; color:#fff;} .comPic .inCnt li {margin:0.2em 0 0.3em} .comPic .inCnt li:nth-of-type(1) {font-size:1.5rem; font-weight:800} .kakaoMap {width:100% !important;} .mapInfo {position:relative; background:#f3f3f3; padding:1em; margin-top:1em; color:#333; font-weight:300} .mapInfo span {font-family: 'Poppins', sans-serif; font-weight:500; display:inline-block; margin-right:0.666em} .mapInfo:before {content:""; background:#ad2a24; width:3px; height:100%; position:absolute; left:0; top:0} @media only screen and (min-width:1000px){ .mapInfo {padding:2em 3em} .greeting>p.bigTxt {margin:1.5em 0} .greeting>p {font-size:1.125em} .comPic .inCnt li:nth-of-type(1) {font-size:2rem;} .comPic .inCnt {padding:2em; font-size:1.25em} } /*연혁*/ .history {margin-top:1rem} .history [class*='hisSec'] h5 {color:#fff; font-weight:800; font-size:1.25rem; text-align:center; padding:0.666rem; margin-bottom:3rem} .history [class*='hisSec'] h5 span{margin:0 0.333rem} .history [class*='hisSec'] h5 span:last-child {font-size:15px; font-weight:400; color:rgba(255,255,255,0.8)} .hisSec1 h5 {background:#4ca9db; border-top-left-radius:30px; border-bottom-left-radius:30px;} .hisSec2 h5 {background:#1c52ab;} .hisSec3 h5 {background:#1c2f65;border-top-right-radius:30px; border-bottom-right-radius:30px;} .history [class*='hisSec'] p {letter-spacing:-0.06rem} .history [class*='hisSec'] p:nth-of-type(1) {color:#3366cc; font-weight:800; font-size:1.325em} .history [class*='hisSec'] p:nth-of-type(2) {color:#003366; font-weight:700; font-size:1.125rem} .history [class*='hisSec'] dl{text-align:left} .history [class*='hisSec'] dl dt {font-weight:800; font-size:1.5rem; margin:2rem 0} .history [class*='hisSec'] dl dd {position:relative; padding:0.666rem 0 0.666rem 1rem} .history [class*='hisSec'] dl dd:before {content:''; position:absolute; left:0; top:0; width:1px; height:100%; background:#ccc} .history [class*='hisSec'] dl dd:after {content: ''; width:6px; height:6px; background:#222; position:absolute; left:-3px; top:50%; transform: translate(0,-50%); border-radius:50%} /*채용*/ .sconWrap {display:flex; flex-flow:row wrap; justify-content:space-between} .conTop {width:100%; background:url(../images/contents/recruitBG.jpg) no-repeat center top; background-size:1200px 400px;padding:1rem 0 3rem 0; margin-bottom:2rem} .conTop span.ltop { color:#fff; padding-left:1rem; display:block; margin-bottom:2rem} .conTop>h4 {text-align:center; color:#fff;} .conTop>h4>span {display:block; font-size:1.5em; letter-spacing:-0.1em; margin-top:0.333em} .sconWrap>div.conBox {position:relative; padding:1rem; border-bottom:1px solid #cdcdcd} .sconWrap>div.conBox:before {position:absolute; content:""; width:100%; height:3px; background:#333; left:0; top:-3px} @media only screen and (min-width:980px){ .sconWrap>div.conBox {width:48%; padding:1.5rem} .sconWrap>div.conBox>h5 {margin-bottom:3rem} .history {margin-top:2rem} .history [class*='hisSec'] h5 {font-size:1.5rem;} } @media only screen and (min-width:1024px){ .history {padding-top:150px} .history [class*='hisSec'] h5:after {content:''; position:absolute; z-index:-1; left:50%; top:0; transform: translate(-50%,-50%); width:1px; height:180px; background:#ccc} .history [class*='hisSec'] h5:before {content:''; width:260px; height:260px; background-size:100%; position: absolute; top: 0;left: 50%; transform: translate(-50%, -110%);} .history .hisSec1 h5:before {background-image:url('../images/contents/his1.svg');} .history .hisSec2 h5:before {background-image:url('../images/contents/his2.svg');} .history .hisSec3 h5:before {background-image:url('../images/contents/his3.svg');} } /*사업분야*/ #container-wrap [class*='bizsec'] {padding:2rem 0 3rem 0} #container-wrap [class*='infoSec'] {padding:2rem 0 0 0} .bizsec11 {position:relative; overflow:hidden} .bizsec11:before {content:""; width:3400px; height:3800px; position:absolute; z-index:-1; transform:translate(-20%,-50%); background-image:url(../images/contents/secBG1.png); background-repeat:no-repeat} .bizinfo {display:flex; flex-flow:row wrap; justify-content:space-between} .bizinfo>div {width:100%} #container-wrap [class*='bizsec'] h4 {font-size:1.25rem; font-weight:800; color:#003399; letter-spacing:-0.06em; margin:0.666rem 0 1.5rem 0} #container-wrap .bizsec22 .secTit h3 {color:#fff} .bizinfo h3 {font-size:2rem; font-weight:800; color:#222} .bizsecBG {position:relative;} .bizsec12>div {width:100%; min-height:25rem; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center} .bizsecBG:before {content:""; position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%; background-attachment: fixed; background-repeat:no-repeat; background-size:cover} .bizsec12:before {background-image:url(../images/contents/bizsec12BG.jpg); } .bizsec22:before {background-image:url(../images/contents/bizsec22BG.jpg); } .bizsec32:before {background-image:url(../images/contents/bizsec32BG.jpg); } .bizsec.bg1 {background:#f7f7f7} .bizsec.bg2 {background:#e2eef8} .bizsec.infoW {background:#b1d9f4} .bizsec12 dl {width:100%; color:#fff; text-align:center; padding:2rem 1rem; margin:1rem; background:rgba(0,55,142,0.9)} .bizsec12 dl dt {position:relative; font-size:2.0rem; font-weight:800; letter-spacing:-0.05em; padding-bottom:1rem; margin-bottom:1rem} .bizsec12 dl dt:after {content:""; position:absolute; left:50%; bottom:0; width:90%; transform:translateX(-50%); height:1px; background:rgba(255,255,255,0.3)} .bizsec12 dl dt span {display:block} .bizsec13 div div {width:100%} .bizsec13 div div:nth-of-type(1) {background:#f5f5f5; padding:1rem; border:1px solid #eee} .bizsec14 {background:#f7f7f7} .export {text-align:center} .export .scrollTB {max-width:1000px; margin:0 auto} .processW {text-align:center; justify-content:center; align-items:center} .processW>div {margin:1%} /*.processW>div.step1 {margin:1% 1% 2% 1%; border:4px solid #053e9d;}*/ .processW div.step2 {position:relative;} .processW div.step2:before {content:"\f055"; font-family: xeicon!important; font-size:2rem; color:#666; position:absolute; top:50%; left:-3rem; transform:translateY(-50%)} .processW .name {background:#222; color:#fff; padding:0.5rem} .processW .name span {color:#ccc} .processW dl {background:#053e9d; color:#fff; padding:1rem 0.5rem} .processW dl dt {font-weight:800; font-size:1.125rem; margin-bottom:0.666rem} /*20220825-쇼하이드레이어 추가*/ .processW.fbox .tab_list { cursor:pointer; } .processW.fbox .tab_list.active { margin: 1% 1% 1% 1%; border: 4px solid #053e9d; } .processW.fbox .tab_list.active dl, .processW.fbox .tab_list.active p { background: #053e9d; color: #fff; padding: 1rem 0.5rem; } .tab_box { display:none; } .tab_box.active { display:block; } .listBox {display:flex; flex-flow:row wrap; justify-content:space-between; margin:-1%; padding-top:1rem} .listBox li{position:relative; width:48%; margin:1%; border:1px solid #e3e3e3; padding:1rem} .listBox li:before {content:""; width:4px; height:100%; background:#e3e3e3; position:absolute; left:-1px; top:0} .listBox li span {display:block; font-weight:700; color:#222; font-size:1.125rem} .sgStep,.bdgBox {margin:-1%} .sgStep li {width:48%; margin:1%; color:#fff; padding:2rem 1rem; border:1px solid rgba(255,255,255,0.3)} .sgStep li span {display:flex; flex-flow:column wrap; max-width:220px; margin:0 auto; font-weight:700; font-size:1.125rem} .sgStep li span:before {content:""; display:block; font-weight:400; color:rgba(255,255,255,0.5); font-size:0.825rem; margin-bottom:0.333rem} /*.sgStep li:nth-of-type(1) {background:rgba(7,145,236,0.9); border:none}*/ .sgStep li:nth-of-type(1) span:before {content:"01";} .sgStep li:nth-of-type(2) span:before {content:"02";} .sgStep li:nth-of-type(3) span:before {content:"03";} .sgStep li:nth-of-type(4) span:before {content:"04";} .bdgBox>div {position:relative; width:96%; margin:2%; background:#ededef; min-height:200px} .bdgBox>div:after {content:""; position:absolute; right:1rem; top:60%; transform:translateY(-50%); width:137px; height:115px; background-repeat:no-repeat; background-size:cover} .bdgBox>div:nth-of-type(1):after{background-image:url(../images/contents/SG_Bridge1.jpg);} .bdgBox>div:nth-of-type(2):after{background-image:url(../images/contents/SG_Bridge2.jpg);} .bdgBox>div:nth-of-type(3):after{background-image:url(../images/contents/SG_Bridge3.jpg);} .bdgBox>div:nth-of-type(4):after{background-image:url(../images/contents/SG_Bridge4.jpg);} .bdgBox>div>h5{position:relative; color:#fff; font-weight:700; font-size:1.125rem; margin-bottom:1rem; overflow:hidden} .bdgBox>div>h5:before {content:""; position:absolute; z-index:1; top:0; left:-1rem; width:80%; height:100%; background:#003996; transform: skewX(-15deg);} .bdgBox>div>h5>span {position:relative; z-index:1} .bdgBox>div>h5,.bdgBox>div>ul{padding:1rem} .bdgBox>div>ul{padding:1rem 2rem} .bdgBox>div>ul>li {margin-bottom:0.333rem} .bdgBox.mdBox>div:after {background:none} .mdInBox>li {width:100%; display:flex; justify-content:center; align-items:center; color:#fff; max-width:348px; min-height:200px; background-repeat:no-repeat; background-size:cover} .mdInBox>li>span {font-weight:700; font-size:1.125rem} .mdInBox>li:nth-of-type(1) {background-image:url(../images/contents/mdPic1.jpg);} .mdInBox>li:nth-of-type(2) {background-image:url(../images/contents/mdPic2.jpg);} .mdInBox>li:nth-of-type(3) {background-image:url(../images/contents/mdPic3.jpg);} .mdInBox>li:nth-of-type(4) {background-image:url(../images/contents/mdPic4.jpg);} .bizsec24 {background:#dff4ff; position:relative} .photoSec {align-items:center} .photoSec ul.Blist {display:flex; flex-flow:row wrap; max-width:350px; margin-bottom:2rem} .photoSec ul.Blist li {position:relative; font-size:1.125rem; color:#003399; font-weight:700; padding-left:0.666rem; margin:0.333em 2rem 0.222em 0} .photoSec ul.Blist li:before {content:""; width:3px; height:80%; background:#003399; position:absolute; left:0; top:50%; transform:translateY(-50%);} .picBox li {width:46%; margin:2%} .picBox p {background:#222; color:#ccc; text-align:center; padding:0.666rem;} .dlBoxW {display:flex; flex-flow:row wrap} .dlBoxW>dl {width:100%; border:1px solid #ddd} .dlBoxW>dl>dt {background:#0791ec; color:#fff; font-weight:500} .dlBoxW>dl>dt,.dlBoxW>dl>dd {padding:0.666rem 1rem} .rdList {justify-content:center;} .rdList>div {display:flex; flex-flow:column wrap; justify-content:center; align-items:center; background:#fff; width:160px; height:160px; border-radius:100%; margin:2%} .facInfo>div:nth-of-type(1) {margin-bottom:1rem} .proBox {width:100%; background:#f0f0f0} .proBox>h6 {background:#007dc6; color:#fff; padding:0.666rem 1rem} .proBox>div {padding:1rem} .proBox .photo {width:73px} .proBox .photo img {width:100%} .proBox ul {width:calc(100% - 90px)} .mdInBox {justify-content:center} @media only screen and (min-width:768px){ .mdInBox>li {width:48%; margin:1%; min-height:250px} .facInfo>div:nth-of-type(1) {margin-bottom:0rem} .dlBoxW>dl {width:46%; margin:2%} } @media only screen and (min-width:980px){ .bizinfo>div:nth-of-type(1) {width:40%} .bizinfo>div:nth-of-type(2) {width:56%} .bizsec12 dl {width:31%; padding:3rem 2rem; margin:0} .bizsec12 dl dt{font-size:2.250rem;padding-bottom:1.5rem; margin-bottom:1.5rem} .bizsec12 dl dt span {display:block} .bizsec12 dl dd {font-size:1.125rem} .bizsec13 div div:nth-of-type(1), [class*='stepinfo'] div div:nth-of-type(1) {width:30%} .bizsec13 div div:nth-of-type(2),[class*='stepinfo'] div div:nth-of-type(2) {width:60%} .bizsec24:before {content:""; position:absolute; opacity:0.5; top:0; left:10%; transform:translate(-50%,-50%); width:480px; height:260px;background-image:url(../images/contents/airplane.png); background-repeat:no-repeat; background-size:cover} .processW [class*='step'] {position:relative; width:14%} .processW [class*='step']:after {content:""; } /*.processW div.step1 {width:20%; margin:1% 4% 1% 1%}*/ .listBox li {width:31.333%} .sgStep li {width:31.333%;} .bdgBox>div {width:48%; margin:1%; min-height:250px} .bdgBox.mdBox>div{width:98%;} .bdgBox>div:after {width:176px; height:147px; right:2rem} .bdgBox>div>ul>li {font-size:1.125rem} .photoSec>div>p {font-size:1.5em} .dlBoxW {margin:-2%} .mdInBox>li>span {font-size:1.25rem} .proBox {width:46%; marign:2%} } @media only screen and (min-width:1200px){ #container-wrap [class*='bizsec'] {padding:4rem 0 5rem 0} #container-wrap [class*='infoSec'] {padding:2rem 0 0 0} #container-wrap [class*='bizsec'] h4 {font-size:1.625rem;} .sgStep li {width:23%;} .mdInBox>li {width:23%;} .bizinfo h3 {font-size:3rem;} } /*회사소개*/ .infoW {background:url(../images/contents/infoSecBG.jpg) no-repeat center center; background-size:cover; padding:2rem} .infoW>div>div {position:relative; padding:1rem; z-index:2;} .comInfoW { background:linear-gradient(120deg, #623399 0%, #133fa2 20%); color:#fff; padding:2rem} .comInfoW p:nth-of-type(1) {font-size:1.125rem; font-weight:700; margin-bottom:1rem} .comInfoW p:nth-of-type(2) {font-size:2rem; font-weight:800; letter-spacing:-0.08em; line-height:1.1; margin-bottom:2rem} .comInfoW dl dt,.comInfoW dl dd {margin-bottom:0.333rem} .comInfoW dl dt {width:100px} .comInfoW dl dd {width:calc(100% - 100px)} .comInfoW h5 {position:relative; margin-bottom:2rem; font-size:0.875rem;} .comInfoW h5:after {content:""; width:calc(100% - 70px); height:1px; background:rgba(255,255,255,0.2); position:absolute; right:0; top:50%; transform:translateY(-50%)} .comInfoW h5 span {display:inline-block; width:90px;} .infoW>div.inner {position:relative; max-width:1600px; padding:3%;} .infoW>div.inner:before {content:""; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1} .comVision{display:flex; flex-flow:column wrap; align-items:center; width:100%; background-color:#04040c; background-image:url(../../ko/images/contents/ovBG.png); background-position:-3rem top; background-size:contain; background-repeat:no-repeat} .comVision>div {width:460px; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; margin-bottom:1rem} .comVision>div>p {color:#fff;} .comVision>div>p:nth-of-type(1) {width:99px; height:99px; display:flex; justify-content:center; align-items:center; background:#333; border-radius:100%; font-weight:800} .comVision>div>p:nth-of-type(2) {width:calc(100% - 120px);} .comVision>div>p:nth-of-type(2) span {display:block; font-size:1.35rem; font-weight:800; letter-spacing:-0.08em; margin-top:0.333rem} /*공장현황*/ .facSwiper {position:relative} .facSwiper .swiper-button-next {right:2rem} .facSwiper .swiper-button-prev {left:2rem} .facSwiper .swiper-pagination {bottom:-30px !important} .facSwiper .info {display:flex; flex-flow:row wrap; position:absolute; width:100%; bottom:0; left:0; padding:1.5rem; background:rgba(0,0,0,0.5); color:#fff} .facSwiper .info:before {content:""; width:6px; height:100%; background:#007dc6; position:absolute; left:0; top:0} .facSwiper .info h5 {color:#fff; font-size:1.125rem; font-weight:700; margin-right:2rem} .facSwiper .info h5 span {font-size:0.825rem; display:block; font-weight:400; margin-top:0.333rem} .facSwiper .info dl {display:flex; flex-flow:row wrap} .facSwiper .info dl dt,.facSwiper .info dl dd {margin:0 0 0.333rem 0} .facSwiper .info dl dd {font-weight:800} /*work*/ .galList{display:flex; flex-flow:row wrap; padding:2rem 0 4rem 0; margin:-2%/*justify-content:space-between;*/} .galList .cardtheum {position:relative; width:100%; margin:2%; cursor:pointer; overflow:hidden;} .cardtheum a {display:block} .galList .cardtheum .p-photo:after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0)} .galList .cardtheum .p-photo {display:flex; justify-content:center; width:100%; position:relative; overflow:hidden} .galList .cardtheum .p-photo img {width:100%; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;} .galList .cardtheum:hover .p-photo img{transform: scale(1.1);} .galList .cardtheum .p-name {position:relative; display:flex; background:#eee; padding:1rem; word-break: keep-all;} .galList .cardtheum .p-name:after {content:""; width:40px; height:23px; position:absolute; bottom:1.5rem; right:1.5rem; background:url(../images/contents/kai.png) no-repeat center top; background-size:100%} .p-name>dt{font-size:1.25rem; font-weight:800; color:#222; text-align:center} .p-name>dt>span {display:block; font-size:1.0rem; font-weight:400} .galList .cardtheum .p-name dd {font-size:0.875rem} @media only screen and (min-width:768px){ .facSwiper .info {padding:2rem} .facSwiper .info h5 {font-size:1.5rem} .facSwiper .info dl dt {width:100px} .facSwiper .info dl dd {width:calc(100% - 100px)} } @media only screen and (min-width:1000px){ .galList .cardtheum {width:46%; margin:2%} .galList .cardtheum .p-name {padding:2rem 1rem} .galList .cardtheum .p-name dt {width:28%; max-width:160px; font-size:1.5rem;} .galList .cardtheum .p-name dd {width:70%} .galList .cardtheum .p-name.long dt{width:70%; max-width:none;} .galList .cardtheum .p-name.long dd {width:28%} .infoW>div>div {padding:2rem} .comInfoW {display:flex; flex-flow: column wrap;justify-content: space-around;width:45%; padding:3rem !important} .comInfoW p:nth-of-type(2) {font-size:2.5rem;} .comVision {width:55%; padding:2rem; align-items:flex-end;} .comVision>div>p:nth-of-type(1) {width:110px; height:110px; font-size:1.25rem} .comVision>div>p:nth-of-type(2) {width:calc(100% - 150px); font-size:1.125rem} .comVision>div>p:nth-of-type(2) span {font-size:1.525rem;} } @media only screen and (min-width:1500px){ .galList .cardtheum .p-name dt{width:22%; font-size:1.625rem;} .galList .cardtheum .p-name:after {width:51px; height:29px; } .galList .cardtheum .p-name dd {width:76%} .comInfoW {width:35%} .comVision {width:65%;} } /*회사개요*/ .picContBox {display:flex; flex-flow:row wrap; justify-content:space-between;} .picContBox>div {width:100%} .picContBox .pic {position:relative; max-width:500px; max-height:400px; margin:0 auto} .picContBox .pic img {position:relative; z-index:2} .picContBox .pic:after {content: ""; display: block; width: 100%; height: 100%; background-color: #247417; position: absolute; left: -20px; top: 20px; z-index: 1;} .picContBox .cont {padding:1em} .picContBox .cont p { color:#333; line-height:1.6em; margin-bottom:1em} .picContBox .cont p span {white-space:nowrap} .picContBox .cont p:last-child {margin-top:2rem; color:#666; text-align:right} /*사훈*/ .motto {position:relative; background:url(../images/contents/mottoBG.jpg) no-repeat center top; background-size:1200px 530px; padding:3rem 0 3rem 0; text-align:center} .motto:before {content:""; width:96%; height:90%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(41,119,68,80%); border:1px solid #fff; z-index:1} .motto h4 {position:relative; display:inline-block; font-size:1.5em; color:#fff} .motto h4:after {content:""; display:block; width:90%; height:3px; background:#fff; margin:0.666em auto 2em auto} .motto h4,.motto ul {z-index:2} .motto h4 span:nth-of-type(1) {margin-right:1em} .motto ul {position:relative; display:flex; justify-content:center; align-items:center} .motto ul li {display:flex; justify-content:center; align-items:center; font-size:2em; color:#333; width:130px; height:130px; margin:0 0.333em; background:rgba(255,255,255,80%); border-radius:100%} .motto ul li span:nth-of-type(1) {margin-right:1rem} .mottoTxt {background:#f4eee2; text-align:center; padding:2rem 0 3rem 0; margin-bottom:2rem} .mottoTxt p {line-height:1.2em; margin-bottom:0.666em} .mottoTxt p span {display:inline-block} .mottoTxt p:nth-of-type(2) {} @media only screen and (min-width:980px){ .picContBox .cont {padding:1em 1em 2em 1em} .picContBox .cont p {margin-bottom:1.5em} .picContBox .pic {width:43%;} .picContBox .cont {width:53%;} .motto {padding:6rem 0 8rem 0;} .mottoTxt {font-size:1.125em} .motto ul {margin-top:2em} .motto ul li {font-size:3.5em; width:180px; height:180px; margin:0 1em} .mottoTxt p {line-height:1.8em; margin-bottom:0} } /* ========================================================================== 개인정보취급방침 ========================================================================== */ .privacy {font-family:'nsk';margin: 0.750em 0 2em 0;padding: 2em 1.250em;border: 1px solid #c8c8cc; background: #fff; box-shadow:0 3px 3px 0 rgba(0, 0, 0, .05); height:600px; overflow-y:scroll} .privacy > h3 {font-size:1.375em; font-weight:500; margin-bottom:20px; text-align:center} .privacy > h4 {display:block; font-size:1.125em; font-weight:500; padding-top:20px; } .privacy > pre > h5 {font-size:1.125em; font-weight:400 !important; color:#333} .privacy pre { font-family:'nsk'; white-space: pre-line;font-size: 0.875em;display: block; padding: 0px; color:#555; line-height:1.6} .privacy pre strong { font-weight:400; display:inline-block; margin-right:10px} /*공사실적- 웹접근성 보완_20190227*/ .w_bbs {width:100%} .w_bbs>ul{display:flex; margin-bottom:0.333em} .w_bbs>ul>li {margin:0 10px 5px 0} .w_bbs>ul>li>a{text-align:center; border:1px solid #666; font-size:0.875em; color:#333; padding:0 0.666em; line-height:38px; display:block;} .w_bbs>ul>li>a,.w_bbs>ul>li>a:hover,.w_bbs>ul>li>a:visited,.w_bbs>ul>li>a:active {text-decoration:none !important} .w_bbs .board-con {position:relative;} /*.w_bbs>ul>li.current>a:after{content:""; display:block; width:80%; height:2px; margin:0 auto; background:#333333;}*/ .w_bbs>ul>li.current>a{background:#333; color:#fff; font-weight:400} .w_bbs .wBoard{position:relative; left:auto; top:auto; width:auto;} .w_bbs .wBoard.hide{position:absolute; left:-9999em; top:-9999em; width:100%;} @media only screen and (min-width:1200px){ .w_bbs>ul>li>a{/*font-size:1.125em; line-height:58px;*/ padding:0 0.666em;} .w_bbs>ul {margin-bottom:1.5em;} }