/* Skip Navigation */ #skip_to_container a {z-index: 100000;position: absolute;top: 0;left: 0;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;} #skip_to_container:hover,#skip_to_container:active,#skip_to_container:focus{width:100%; height:auto; margin:0; padding:5px 0; font-weight:400; font-size:12px; line-height:1; color:#202020; text-decoration:none !important; text-indent:10px} /* s: All Style */ a:link, a:visited{text-decoration:none} a:hover{text-decoration:none} input[type=text],input[type=email],input[type=tel],input[type=submit],input[type=password],input[type=image],input[type=button],textarea,select{ -webkit-border-radius:0; -moz-appearance:none; -webkit-appearance:none; appearance:none;} select::-ms-expand {display:none} input[type=radio],input[type=checkbox]{-webkit-border-radius:0; /*-webkit-appearance:none; display:none*/} img,video,audio,object,embed,iframe{max-width:100%;} /*:lang(zh), zh{font-family: 'Kanit', sans-serif;}*/ body,th,td,input,select,button,textarea{font-style:normal; font-weight:normal; font-weight:400; font-size:12px; font-family: 'Noto Sans Korean', 'Malgun Gothic', 'Dotum', sans-serif; color:#0d0d0d; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;*/ } table{width:100%; /*border-collapse:collapse;*/ table-layout:fixed;} {/*-webkit-transition: .45s; transition: .45s;*/} /*{-webkit-transition: 0.75s; transition: 0.75s;}*/ /* 텍스트 테스트 */ .clear{clear:both;} .infit{font-size:0;letter-spacing:0;word-spacing:0;} *, :before, :after {box-sizing:border-box;word-break:keep-all;} .pVer {display:block !important;} .mVer {display:none !important;} /* e: All Style */ /*//// 끝나고 지워주세요 ///*/ #posY {display:none;position:fixed;bottom:50px;left:0;z-index:9999999;font-size:11px;line-height:0.75em;padding:5px;color:#ffea00;background-color:#000;} #msg {display:none;position:fixed;bottom:30;left:0;z-index:9999999;font-size:12px;line-height:14px;padding:5px;color:#ffea00;background-color:#000;} /*//// 끝나고 지워주세요 ///*/ /* s: Layer Style */ #contents * {word-break:keep-all;} .inConts{position:relative; width:100%; padding:0 80px; margin:0 auto;} #header.mobile > .inConts > div > .gnb > div > ul.displaynone {display:none !important;} /* s: Layer Style */ /* s: Header Style */ #header {position:fixed;top:0;left:0;width:100%;z-index:999;background-color:rgba(255,255,255,0.0);} #header > .inConts {height:160px;display:flex;justify-content:space-between;align-items:center;} #header > .inConts > div > .gnb {} #header > .inConts > div > .gnb {display:flex;} #header > .inConts > div > .gnb > div {position:relative;} #header > .inConts > div > .gnb > div + div {margin-left:50px;} #header > .inConts > div > .gnb > div > a {color:#222;font-size:22px;font-weight:600;line-height:1.6;padding:15px 0;} #header > .inConts > div > .gnb > div.active > a {color:#283e7f;} #header > .inConts > div > .gnb > div > ul {display:none;} #header > .inConts > div > .gnb > div.portfolio > ul.active, #header > .inConts > div > .gnb > div.portfolio:hover > ul {position:absolute;bottom:-30px;right:0;display:flex;} #header > .inConts > div > .gnb > div > ul > li + li {margin-left:15px;} #header > .inConts > div > .gnb > div > ul > li > a {white-space:nowrap;color:#787878;font-size:18px;line-height:1.0;letter-spacing:-0.03em;} #header > .inConts > div > .gnb > div > ul > li > a:hover {color:#283e7f;} #header > .inConts > div > .gnb > div > ul > li > a.active {color:#283e7f;font-weight:600;} #header.main > .inConts > div > .gnb > div > a {color:#fff;text-shadow:3px 3px 3px rgba(0,0,0,0.35);} #header.main.mobile > .inConts > div > .gnb > div > a {color:#222;text-shadow:none;} #header.sub {background-color:rgba(255,255,255,0.96);} #header.sub.scroll {border-bottom:1px solid #bab9c3;} #header.main.mobile {background-color:rgba(255,255,255,1.0);} #header.mobile > .inConts {height:60px;} #header.mobile > .inConts > a.home {width:280px;} #header.mobile > .inConts > div > .gnb {display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#dedee4;padding:20px 15px;} #header.mobile > .inConts > div > .gnb > div {width:100%;margin:0;} #header.mobile > .inConts > div > .gnb > div > a {display:block;width:100%;text-align:center;background-color:#fff;border-radius:5px;} #header.mobile > .inConts > div > .gnb > div + div {margin-top:10px;} #header.mobile > .inConts > div > .gnb > div > ul {position:relative !important;bottom:0 !important;display:block !important;margin-top:15px;} #header.mobile > .inConts > div > .gnb > div > ul > li {text-align:center;margin-left:0px;padding:10px 0;} #header.mobile > .inConts > div > .mobile > .btn-menu { position: relative; display: inline-block; width: 37px; height: 37px; border-radius: 0; vertical-align:top; -o-transition: all .4s .0s ease-in-out; -ms-transition: all .4s .0s ease-in-out; -moz-transition: all .4s .0s ease-in-out; -webkit-transition: all .4s .0s ease-in-out; transition: all .4s .0s ease-in-out; z-index: 3; } #header.mobile > .inConts > div > .mobile > .btn-menu > span { display: block; position: absolute; top: 50%; left: 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; margin-left: -10px; width: 20px; height: 2px; background-color: #000; -o-transition: margin-top .3s .4s ease-in-out,-o-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; -ms-transition: margin-top .3s .4s ease-in-out,-ms-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; -moz-transition: margin-top .3s .4s ease-in-out,-moz-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; -webkit-transition: margin-top .3s .4s ease-in-out,-webkit-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; transition: margin-top .3s .4s ease-in-out,transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; } #header.mobile > .inConts > div > .mobile > .btn-menu .l1 {margin-top: -6px;} #header.mobile > .inConts > div > .mobile > .btn-menu .l2 {margin-top: 0px;} #header.mobile > .inConts > div > .mobile > .btn-menu .l3 {margin-top: 6px;} #header.mobile > .inConts > div > .mobile > .btn-menu > span {background-color:#000;} /* btn-menu: selected */ #header.mobile.active > .inConts > div > .mobile > .btn-menu > span {background-color:#000;} #header.mobile.active > .inConts > div > .mobile > .btn-menu .l1 { margin-top: 0px; -o-transform: rotate(135deg); -ms-transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); } #header.mobile.active > .inConts > div > .mobile > .btn-menu .l2 { opacity: 0; } #header.mobile.active > .inConts > div > .mobile > .btn-menu .l3 { margin-top: 0px; -o-transform: rotate(-315deg); -ms-transform: rotate(-315deg); -moz-transform: rotate(-315deg); -webkit-transform: rotate(-315deg); transform: rotate(-315deg); } #gnbArea {display:none;height:50px;padding:0 30px;background-color:#283e7f;position:relative;overflow:hidden;} #gnbArea.mobile {display:block;} #gnbArea .slick-arrow {position:absolute;top:0;width:30px;height:50px;font-size:0;line-height:0;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center center;background-size:40px 40px;z-index:2;} #gnbArea .slick-disabled {display:none !important;} #gnbArea .slick-prev {left:-30px;background-image:url('../../common/images/common/btn_gnb_prev.jpg');} #gnbArea .slick-next {right:-30px;background-image:url('../../common/images/common/btn_gnb_next.jpg');} /*#gnbArea .gnbRoll { position:relative; z-index:1; font-size:0; line-height:0; white-space:nowrap; overflow: hidden; overflow-x: auto; /-webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } #gnbArea .gnbRoll::-webkit-scrollbar { display: none; }*/ /*#gnbArea .gnbRoll ul { display:flex; } #gnbArea .gnbRoll ul li { position: relative; display: inline-block; vertical-align: top; padding: 0 10px; }*/ #gnbArea .gnbRoll div.list {padding:0 15px;} #gnbArea .gnbRoll div.list a {display:block;color:#bab9c3;font-size:14px;line-height:50px;white-space:nowrap;} #gnbArea .gnbRoll div.list a.active {color:#fff;} #container.portfolio .portfolio-wrap ul li h2 {font-size:5.0vw;} #container.portfolio .portfolio-wrap ul {margin-left:0px;} #container.portfolio .portfolio-wrap ul li {width:100%;margin-left:0px;} #container.portfolio-view .portfolio-view-wrap > h2 {font-size:6.0vw;} #container.portfolio-view .portfolio-view-wrap > .btn-wrap > a {font-size:5.0vw;} #container.portfolio-view .portfolio-view-wrap > .contents {padding:0 0 50px;margin-top:30px;} #container.mobile > footer > div > .title {font-size:4.0vw;} #container.mobile > footer > div > address > span {font-size:3.6vw;} #container.sub > #pageTop {right:10px;width:30px;height:30px;background-size:25px 25px;} /* e: Header Style */ /* s: Main Style */ #container.main {height:100%;} #container section.cover-wrap {position:relative;height:100%;} #cover-content-pc, #cover-content-pc figure, #cover-content-pc .slick-list, #cover-content-pc .slick-track {height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;} #cover-content-pc .slick-dots {display:none;position:absolute;bottom:20px;left:50%;transform:translate(-50%,0);display:flex;} #cover-content-pc .slick-dots button {font-size:0;line-height:0;padding:0;margin:0;border:0;} #cover-content-m, #cover-content-m figure, #cover-content-m .slick-list, #cover-content-m .slick-track {height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;} #cover-content-m .slick-dots {display:none;position:absolute;bottom:20px;left:50%;transform:translate(-50%,0);display:flex;} #cover-content-m .slick-dots button {font-size:0;line-height:0;padding:0;margin:0;border:0;} #cover-content-pc {display:block !important;} #cover-content-m {display:none !important;} /* e: Main Style */ /* s: Content Style */ #container.sub > h1 {color:#222;font-size:22px;font-weight:600;padding:40px 80px 30px;} #container.sub > h1 > span {font-weight:400;} #container.sub > h1 > span:before {content:"";display:inline-block;width:3px;height:16px;background-color:#283e7f;margin:0 10px;} #container.profile .profile-wrap {max-width:1130px;width:100%;padding:0 15px 100px;margin:0 auto;} #container.profile .profile-wrap > ul > li {display:block;overflow:hidden;/*display:flex;justify-content:center;align-items:flex-start;*/} #container.profile .profile-wrap > ul > li + li {margin-top:200px;} #container.profile .profile-wrap > ul > li > figure {width:50%;} #container.profile .profile-wrap > ul > li.left > figure {float:left;} #container.profile .profile-wrap > ul > li.right > figure {float:right;} #container.profile .profile-wrap > ul > li > div {width:50%;} #container.profile .profile-wrap > ul > li.left > div {padding-left:40px;float:right} #container.profile .profile-wrap > ul > li.right > div {padding-right:40px;float:left;} #container.profile .profile-wrap > ul > li > div > h2 {color:#222;font-size:16px;font-weight:600;letter-spacing:-0.05em;line-height:1.0;} #container.profile .profile-wrap > ul > li > div > .position {color:#283e7f;font-size:16px;letter-spacing:-0.05em;line-height:1.0;margin-top:15px;} #container.profile .profile-wrap > ul > li > div > .email {color:#787878;font-size:16px;letter-spacing:-0.05em;line-height:1.0;margin-top:5px;} #container.profile .profile-wrap > ul > li > div > ul {margin-top:30px;} #container.profile .profile-wrap > ul > li > div > ul:before {content:"";display:block;width:60px;height:4px;background-color:#283e7f;margin-bottom:15px;} #container.profile .profile-wrap > ul > li > div > ul > li {position:relative;padding-left:125px;color:#787878;font-size:14px;letter-spacing:-0.05em;line-height:1.6;} #container.profile .profile-wrap > ul > li > div > ul > li > span {position:absolute;top:0;left:0;color:#adadad;} #container.profile .profile-wrap > ul > li > div > ul > li + li {margin-top:4px;} #container.portfolio .portfolio-wrap {width:100%;padding:0 80px 100px;margin:0 auto;} #container.portfolio .portfolio-wrap ul {margin-left:-20px;font-size:0;line-height:0;} #container.portfolio .portfolio-wrap ul li {width:calc(25% - 20px);margin-left:20px;font-size:0;line-height:0;} #container.portfolio .portfolio-wrap ul li h2 {color:#222;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:-0.05em;margin:10px 0 50px;} #container.portfolio .portfolio-wrap ul li figure {position:relative;font-size:0;line-height:0;overflow:hidden;} #container.portfolio .portfolio-wrap ul li figure:before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65) url('../../common/images/common/portfolio_bgIcon.png') no-repeat center center;transform:translateY(100%);-webkit-transition: .35s; transition: .35s;} #container.portfolio .portfolio-wrap ul li a:hover figure:before {transform:translateY(0%);} #container.portfolio-view > h2 {position:absolute;width:100%;color:#222;font-size:26px;line-height:1.2;letter-spacing:-0.075em;font-weight:600;padding:10px 80px;} #container.portfolio-view > h2.fixed {position:fixed;left:0;} #container.portfolio-view > h2 span {background-color:rgba(255,255,255,0.9);padding:10px 10px 10px 0;} #container.portfolio-view .portfolio-view-wrap {width:100%;padding:0 80px 100px;margin:0 auto;} #container.portfolio-view .portfolio-view-wrap > .contents {width:100%;max-width:1130px;padding:0 0 100px;margin:80px auto 0;text-align:center;} #container.portfolio-view .portfolio-view-wrap > .contents figure {font-size:0;line-height:0;} #container.portfolio-view .portfolio-view-wrap > .contents figure + figure {margin-top:30px;} #container.portfolio-view .portfolio-view-wrap > .btn-wrap {display:flex;justify-content:center;} #container.portfolio-view .portfolio-view-wrap > .btn-wrap > a {color:#fff;font-size:20px;line-height:1.0;background-color:#283e7f;border-radius:5px;padding:15px 30px;min-width:150px;text-align:center;} /* e: Content Style */ /* s: Footer Style */ #container.main > footer {position:absolute;bottom:20px;left:50%;transform:translate(-50%,0);width:100%;max-width:1100px;background-color:rgba(51,51,51,0.5);} #container.main > footer > div {padding:25px;text-align:center;} #container.main > footer > div > .title {color:#fff;font-size:16px;font-weight:500;letter-spacing:-0.075em;} #container.main > footer > div > address {margin-top:10px;} #container.main > footer > div > address > span {color:#adadad;font-size:13px;letter-spacing:-0.075em;font-style:normal;} #container.main > footer > div > address > span + span:before {content:"";display:inline-block;width:1px;height:12px;background-color:rgba(255,255,255,0.25);margin:0 10px;} #container.main > footer > div > address > span > em {font-style:normal;margin-right:5px;} #container.main > #pageTop {display:none;} #container.sub > footer, #container.mobile > footer {left:0;transform:none;width:100%;background-color:#ececef;} #container.sub > footer > div, #container.mobile > footer > div {padding:25px;text-align:center;} #container.mobile > footer > div {padding:10px;} #container.sub > footer > div > .title, #container.mobile > footer > div > .title {color:#787878;font-size:16px;font-weight:500;letter-spacing:-0.075em;} #container.sub > footer > div > address, #container.mobile > footer > div > address {margin-top:10px;} #container.sub > footer > div > address > span, #container.mobile > footer > div > address > span {color:#adadad;font-size:13px;letter-spacing:-0.075em;font-style:normal;} #container.sub > footer > div > address > span + span:before, #container.mobile > footer > div > address > span + span:before {content:"";display:inline-block;width:1px;height:12px;background-color:rgba(184,184,184,1.0);margin:0 10px;} #container.sub > footer > div > address > span > em, #container.mobile > footer > div > address > span > em {font-style:normal;margin-right:5px;} #container.sub > #pageTop { display:none; position:fixed; bottom:15px; right:70px; width:40px; height:40px; background:url('../../common/images/common/pageTop.png') no-repeat center center/cover; opacity:0; z-index:9; cursor:pointer; } #container.sub > #pageTop.visible { display:block; -webkit-animation: fadeInUp 1s forwards; -moz-animation: fadeInUp 1s forwards; -o-animation: fadeInUp 1s forwards; animation: fadeInUp 1s forwards; } @keyframes fadeInUp { 0% {opacity:0;transform:translateY(100%);} 100% {opacity:1;transform:translateY(0);} } #container.sub > #pageTop.hidden { opacity:0; -webkit-animation: fadeInRight 1s forwards; -moz-animation: fadeInRight 1s forwards; -o-animation: fadeInRight 1s forwards; animation: fadeInRight 1s forwards; } @keyframes fadeInRight { 0% {opacity:1;transform:translateX(0);} 100% {opacity:0;transform:translateX(100%);} } /* e: Footer Style */ @media only screen and (max-width:1280px) { #header > .inConts {padding:0 15px;height:100px;} #header > .inConts > div > .gnb > div > ul > li > a {font-size:16px;} #container.sub > h1 {padding:20px 15px;} #container.sub > h2 {padding:20px 15px;} #container.portfolio .portfolio-wrap {padding:0 15px 100px;} #container.portfolio-view .portfolio-view-wrap {padding:0 15px 100px;} #container.sub > #pageTop {right:15px;} #container.portfolio-view .portfolio-view-wrap > .contents img { width: 100%; height: auto !important; } .pop-layer-mobile-control { top: 60px !important; left: 50% !important; transform: translate(-50%,0); } } @media only screen and (max-width:1100px) { #container.main > footer {bottom:0;} #header > .inConts > div > .gnb > div > ul > li > a {font-size:16px;} #header > .inConts > div > .gnb > div.portfolio > ul.active {bottom:-25px;} } @media only screen and (max-width:1024px) { #container.profile .profile-wrap > ul > li > figure {width:35%;} #container.profile .profile-wrap > ul > li > div {width:65%;} #container.portfolio .portfolio-wrap ul {margin-left:-20px;} #container.portfolio .portfolio-wrap ul li {width:calc((100% / 3) - 20px);margin-left:20px;} #container.portfolio-view > h2 {font-size:20px;} } @media only screen and (max-width:960px) { } @media only screen and (max-width:760px) { #container.profile .profile-wrap > ul > li {} #container.profile .profile-wrap > ul > li + li {margin-top:100px;} #container.profile .profile-wrap > ul > li > figure {width:100%;} #container.profile .profile-wrap > ul > li > figure > img {width:100%;} #container.profile .profile-wrap > ul > li > div {width:100%;padding:30px 0 0 !important;} #container.portfolio .portfolio-wrap ul {margin-left:-20px;} #container.portfolio .portfolio-wrap ul li {width:calc((100% / 2) - 20px);margin-left:20px;} } @media only screen and (max-width:480px) { #header.mobile > .inConts > a.home {width:200px;} #cover-content-pc {display:none !important;} #cover-content-m {display:block !important;} #container.sub > h1 {font-size:5.0vw;} #container.profile .profile-wrap > ul > li > div > h2 {font-size:4.6vw;} #container.profile .profile-wrap > ul > li > div > .position {font-size:4.6vw;} #container.profile .profile-wrap > ul > li > div > .email {font-size:4.0vw;} #container.profile .profile-wrap > ul > li > div > ul > li {font-size:4.0vw;padding-left:90px;} #container.profile .profile-wrap > ul > li > div > ul > li > span {font-size:4.0vw} #container.portfolio-view > h2 {font-size:4.2vw;} }