@import url("common.css");

#wrap{overflow:hidden; height:auto;}

/* css */
.basicCont{box-sizing:border-box; margin:0 auto 160px auto;}

.sub_title{font-size:1.7647rem; color:#f7f7f7; font-weight:100; letter-spacing:-1.5pt; line-height:2.4rem; margin-bottom:30px}
.sub_title2{font-size:1.2941rem; color:#f7f7f7; font-weight:500; letter-spacing:-0.8pt; line-height:1.8rem}
.sub_title3{font-size:2.5rem; font-weight:700; letter-spacing:-1.5pt; line-height:3rem; margin-bottom:15px}
.sub_title4{font-size:2.25rem; color:#f7f7f7; font-weight:700; text-align:center; letter-spacing:-1.5pt; line-height:2.4rem; margin-bottom:40px}
.dep_title{position: relative; color:#f7f7f7; font-size:1.5294rem; font-weight:700; letter-spacing:-1pt; line-height: 2rem; margin-bottom:25px}
.dep_title:before{width:40px; height:4px; display:block; background:#a40102; content:''; margin-bottom:10px}
.tbold{font-weight:500; color:#d3ba04;}
.grt{font-size:0.82353rem; line-height:1; margin-bottom:10px; color:#a40102; font-weight:700}
.t_title{color: #f7f7f7; text-align:center; font-weight: 700;font-size: 2.7059rem;letter-spacing: -2pt;line-height: 3.4rem; margin-bottom: 50px;}
.sub_txt{color:#ddd; line-height:1.7rem; letter-spacing:-0.3pt;}
.number{color:#a40102; font-weight:700; text-decoration: underline; line-height: 100%; margin-bottom: 10px;}

.tit_area{margin:0 auto; max-width:1350px; text-align:center;}
.tit_area .title{color:#fff; font-weight:700; font-size:2.7059rem; letter-spacing: -2pt; line-height: 3.4rem; margin-bottom:70px}

.compad {padding:160px 0; box-sizing:border-box;}
.compad_b {padding:0 0 160px; box-sizing:border-box;}
.compad_t {padding:160px 0 0; box-sizing:border-box;}

/* visual */
#visual_wrap{position:relative; width:100%; height:560px;}
#visual{position:relative; width:100%; height:100%; overflow:hidden;}
#visual:after{position:absolute; top:0; left:0; background:rgba(0,0,0,.5); width:100%; height:100%; content:"";}
#visual .v_bg{position:absolute; left:0; top:0; width:100%; height:100%; background:#000; background-repeat:no-repeat; background-size:cover; background-position:center; animation-duration: 5s; animation-name:visualScale; animation-timing-function:all 2.5s cubic-bezier(0.215,0.61,0.355,1); z-index: -1;}
#visual .subtop_about{background-image:url('../img/visual01.jpg'); background-position:bottom -165px center;}
#visual .subtop_business{background-image:url('../img/subtop_business.jpg');}
#visual .subtop_esg{background-image:url('../img/subtop_esg.jpg');}
#visual .subtop_recruit{background-image:url('../img/subtop_recruit.jpg');}
#visual .subtop_other{background-image:url('../img/subtop_other.jpg');}
#visual .v_txt{position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); width:100%; text-align:right; z-index:1;}
#visual .v_txt span{display:block; font-size:20px; letter-spacing:-0.3pt; font-weight:700; color:rgba(255,255,255,.3); opacity:0; line-height:120%; word-break:keep-all; animation:visualScale2 1s .3s forwards ease-in-out;}
#visual .v_txt h2{font-size:60px; letter-spacing:0pt; font-weight:700; color:#fff; line-height:120%; padding:4px 0 0; opacity:0; animation:visualScale2 1.2s .6s forwards ease-in-out;}
	

@keyframes visualScale2 {
0% {opacity:0; transform:translateY(0px);}
100% {opacity:1; transform:translateY(-20px);}
}

@keyframes visualScale {
0% {transform:scale(1.15); -ms-transform: scale(1.15); -webkit-transform: scale(1.15);}
100% {transform:scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
}
/* // visual */

.effectCont{opacity:0; transform:translateY(60px); transition:all 1s cubic-bezier(0.215,0.61,0.355,1);}
.effectCont.action{opacity:1; transform:translateY(0); transition:all 1s cubic-bezier(0.215,0.61,0.355,1); transition-delay:0s;}
.effectCont.delay1.action{transition-delay:0.2s;}
.effectCont.delay2.action{transition-delay:0.4s;}
.effectCont.delay3.action{transition-delay:0.6s;}
.effectCont.delay4.action{transition-delay:0.8s;}
.effectCont.delay5.action{transition-delay:1.0s;}
.effectCont.delay6.action{transition-delay:1.2s;}

.stickyMenu{position:relative; opacity: 0; transition-delay:0.3s; z-index:1}

@keyframes effect_2 {
	0% {top:30px; opacity:0;}
	100%  {top:0; opacity:1;}
}

.dropLst .dlst {display:none; position:absolute; z-index:100;} /* box-shadow:1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.2);  min-width:100%; */

/** 2018.12.17 서브 네비게이션 모바일 **/
.mobile_snb {display: block; margin-bottom:60px; text-align:center;}
.mobile_snb .lnbHome{position:relative; width:14px; height:12px; line-height:100%; display:inline-block; background:url('../img/lnbhome.png') center no-repeat; margin-right:30px;}
.mobile_snb .lnbHome:after{position: absolute; right: -19px;  top: 4px; background:url('../img/lnb_ar1.png') no-repeat; width:4px; height:6px; content:''; display:block;}
.mobile_snb .sub_frist{line-height: 100%; position:relative; display:inline-block; color:#fff; font-size:0.938rem; letter-spacing:0.3pt; margin-right: 30px;}
.mobile_snb .sub_frist:after{position: absolute; right:-19px; top:6px; background:url('../img/lnb_ar1.png') no-repeat; width:4px; height:6px; content:''; display:block;}
.mobile_snb .box {display:inline-block; font-size:0.938rem; letter-spacing:0.3pt; position: relative;} 
.mobile_snb .box.dep1 {/*background-color: #003591;*/}
.mobile_snb .dropLst .txt, 
.mobile_snb .dropLst li span, 
.mobile_snb .dropLst > a {width:100%; border:none; z-index: 99; box-sizing:border-box; }
.mobile_snb .box div > .txt {line-height:100%; color:#fff; padding-right:20px; font-size: 0.938rem; letter-spacing: 0.3pt;}
.mobile_snb .box .dropLst .txt:before {content: ""; position: absolute; top:50%; right:0px; display: block; width:6px; height:4px; margin-top:-2px; background: url("../img/lab_ar2.png") no-repeat center center/cover; background-size:100%; -webkit-transition:all 0.2s cubic-bezier(0, 0, 0.25, 1); transition:all 0.2s cubic-bezier(0, 0, 0.25, 1);}
.mobile_snb .box .dropLst .txt.on:before {-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.mobile_snb .box .dropLst ul {padding:20px; margin-top:15px;}
.mobile_snb .box.dep1 .dropLst ul,
.mobile_snb .box.dep1 .dropLst ul li {background-color: #fff;} /* background-color: #003591; */
.mobile_snb .box.dep1 .dropLst ul li:first-child {}
.mobile_snb .box.dep1 .dropLst ul li:last-child {border-bottom:0;}
.mobile_snb .box.dep1 .dropLst li .value {padding-left:20px; width:100%; height: 50px; line-height: 50px; font-size:15px; border:none; z-index: 99; box-sizing:border-box; letter-spacing:-0.5pt; color:#555;}
.mobile_snb .box.dep1 .dropLst li .value.on {color:#fff;  background:#ed1c25;}
.mobile_snb .box.dep1 .dropLst .txt {color:#666; } /* color:#fff; */
.mobile_snb .box.dep1 .dropLst .txt:before {background-position:top left;} /* 첫번째 서브메뉴 화살표 위치 */ /* background-position: 0px 0px */
.mobile_snb .box.dep2 .dropLst ul,
.mobile_snb .box.dep2 .dropLst ul li{background-color: #fff; } /*background-color: #fff;*/
.mobile_snb .box.dep2 .dropLst li{margin-bottom:8px;}
.mobile_snb .box.dep2 .dropLst ul li:last-child{margin-bottom:0}
.mobile_snb .box.dep2 .dropLst li .value {width:100%; font-size: 0.938rem; letter-spacing:-0.7pt;  border:none; z-index: 99; box-sizing:border-box;  color:#777;} /*color:#003591;*/
.mobile_snb .box.dep2 .dropLst li a{transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.mobile_snb .box.dep2 .dropLst li a:hover{color:#111;}
.mobile_snb .box.dep2 .dropLst li .value.on {color:#111; font-weight:700;  background:#fff; letter-spacing:-0.3pt;} /*color:#00aeef;*/
.mobile_snb .dropLst {width:100%; box-sizing: border-box; display: inline-block; vertical-align:middle;}
.mobile_snb .dropLst .dlst {}
.mobile_snb .dropLst .dlst ul {}

#contents{position:relative;}
.contents_in {position:relative; padding-top:120px; min-height:400px; background:#111;}

.left_menu{position:absolute; width:345px; top:120px; left:50%; margin-left:-700px; z-index:90;}
.left_menu.view {display:none !important;}
.left_menu .menuCont{}
.left_menu .hey .menuCont {top:220px !important;}
.left_menu .menuCont .v_title {margin:0 0 40px;}
.left_menu .menuCont ul {}
.left_menu .menuCont ul li {margin:0 0 7px;}
.left_menu .menuCont ul li a {position:relative; font-family: 'josefin-sans', sans-serif; font-weight:600; font-size:1rem; line-height:1.2; display:inline-block; transition:all 0.5s;}
.left_menu .menuCont ul li a::after {content:''; width:0; height:1px; background:#888; position:absolute; bottom:4px; left:0; transition:all 0.5s;}
.left_menu .menuCont ul li a.mPS2id-highlight {color:#111; transition:all 0.5s;}
.left_menu .menuCont ul li a.mPS2id-highlight::after {width:100%; transition:all 0.5s;}

#sticky-wrapper {position:absolute; width:100%;}

.lnb_mo {display:none; opacity:0; animation:fadeIn 1s linear forwards; animation-delay:0.3s;}
.lnb_mo.view {display:none !important;}

.right_cont {width:calc(100% - 500px); margin-left:500px;}

/* 어바웃 */
.ceo_con{position:relative; display:flex; align-items:center;}
.ceo_con .pic{margin-right:60px; box-shadow:-7px -7px 12px rgba(0,0,0,.3); width:calc(100% - 60px); text-align:center; max-width:450px;}
.ceo_con .c_cont .ceot{margin-top:60px; display:flex; align-items:center;}
.ceo_con .c_cont .ceot span{font-size:1.1rem; font-weight:600; letter-spacing:0; color:#fff; display:inline-block; margin-right:10px;}

/* 오시는길 */
.contact_cont .cont_info dl dd {width:50%; padding:45px 50px; box-sizing:border-box; letter-spacing:-0.05em; color:#f0f0f0;}
.contact_cont .cont_info dl dd h4 {font-weight:500; color:#fff; letter-spacing:-0.05em; font-size:1rem; line-height:1.3; margin:0 0 7px;}
.contact_cont .cont_info dl dd span{margin-right:18px; display:inline-block; letter-spacing:0pt;}
.contact_cont .cont_info dl dd span img {margin-right:6px; position:relative; top:-1px;}
.contact_cont .cont_info dl dd ul{display:flex; justify-content:flex-end;}
.contact_cont .cont_info dl dd ul a{display:flex; flex-direction:column;}
.contact_cont .cont_info dl dd ul li{margin-right:6px;}
.contact_cont .cont_info dl dd ul li:last-child{margin-right:0px;}

.contact_cont .cont_info.head{margin:0;}
.contact_cont .cont_info.head dl{width:100%; padding:0; display:flex; box-sizing:border-box; flex-wrap:wrap; align-items:center; background:rgba(255,255,255,.05);}


/***프로젝트***/
#project .rolling {position:relative; margin-bottom:100px;}
#project .rolling .slick-list::after {content:''; display:block; clear:both;}
#project .rolling dl {position:relative; margin-left:30px; filter: grayscale(1); opacity:0.5; transition:all 0.2s linear;}
#project .rolling dl:before{content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:30%; background: rgb(0,0,0,0.5); background: linear-gradient(360deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); z-index:5;transition:all 0.2s linear;}
#project .rolling dl.slick-active {filter: grayscale(0); opacity:1; transition:all 0.2s linear;}
#project .rolling dl dt {}
#project .rolling dl dt img {max-width:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
#project .rolling dl dd {position:absolute; bottom:0; left:0; width:100%; padding:0 40px; box-sizing:border-box; overflow:hidden; opacity:0; visibility:hidden; transition:all 0.5s; z-index:99; display:flex; flex-direction:column;}
#project .rolling dl.slick-active dd {opacity:1; visibility:visible; transition:all 0.5s; bottom:35px;}
#project .rolling dl dd h4 {float:left; font-size:1rem; color:#fff; font-weight:bold; letter-spacing:-0.5pt; line-height:1.4;}
#project .rolling dl dd p {float:right; font-size:1rem; color:rgba(255,255,255,0.7); letter-spacing:-0.3pt; line-height:1.4;}

#project .rolling .slick-arrow {width:33px; height:33px; display:block; cursor:pointer; font-size:0; border:0; position:absolute; bottom:40px; margin:-16.5px 0 0; z-index:999; transition:all 0.2s linear;}
#project .rolling .slick-arrow:hover {opacity:0.6; transition:all 0.2s linear;}
#project .rolling .slick-prev {right:85px; background:url("../img/prevArrow.png")no-repeat center;}
#project .rolling .slick-next {right:35px; background:url("../img/nextArrow.png")no-repeat center;}

/***견적문의***/

/*고객지원*/
#inquiry{position:relative;}
#inquiry select{font-size:1rem; color:#fff; border:none; padding:0 10px; height:52px; border:1px solid #888;}
#inquiry select{position:relative; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#111;}
#inquiry select::after{position:absolute; right:20px; top:20px; background:url('../img/arrow_w.svg')no-repeat right; transform:rotate(90deg); content:""; width:7px; height:11px;}
#inquiry select::-ms-expand {display:none}
#inquiry select > option{color:#333;}
#inquiry .select_num + span, #inquiry .input_num + span{display:inline-block; width:3%; text-align:center;}
#inquiry .textarea {font-size:1rem; color:#f7f7f7; border:none; background-color:rgba(0,0,0,.1); padding:10px !important; box-sizing:border-box; width:100%; height: 200px; letter-spacing:-0.25pt; border:1px solid #333;}
#inquiry .input {font-size:1rem; color:#fff; border:none; background-color:#111; padding:0 10px; height:52px; box-sizing:border-box; width:100%; border:1px solid #888;}
#inquiry .input::placeholder{color:#fff;}
#inquiry .input_num, #inquiry .select_num{width:31.3333%;}
#inquiry .form_table{width:100%; border-collapse:separate; border-spacing:0px; border-top: 1px solid #222;}
#inquiry .form_table th{font-size:1rem; color:#fff; font-weight:500; text-align:left; padding:12px 0; letter-spacing:-0.35pt; width:20%; border-bottom: 1px solid #888;}
#inquiry .form_table td{font-size:1rem; padding:12px 0; text-align:left; border-bottom: 1px solid #888;}
#inquiry .form_table td#phone{display:flex; align-items:center;}
#inquiry .form_table input:disabled{background:#a40102 !important;}
#inquiry .agree_con{position: relative; overflow: hidden; padding: 30px 40px; margin: 30px 0 50px; background:rgba(0,0,0,.3);}
#inquiry .agree_con h4{font-weight:700; color:#fff; font-size:18px; letter-spacing:-0.7pt; padding:0 0 10px 0}
#inquiry .agree_con .textarea{padding:15px; height:150px; font-size:14px;}
#inquiry .agree_con .agree{margin: 15px 0 0; text-align:center;}
#inquiry .agree_con .agree > label{display:flex; align-items:center; justify-content: center;}
#inquiry .agree_con .agree dt{}
#inquiry .agree_con .agree dd{font-size:1rem; color:#fff; font-weight: 500; cursor:pointer;}
#inquiry .btn_area{text-align:center;}
#inquiry .btn_area .btn{display: inline-block; position: relative; overflow: hidden; margin: 0 auto; width:250px; height:62px; border-radius:62px;  box-sizing:border-box;}
#inquiry .btn_area .btn:before{
 content: '';
    width: 0%;
    height: 110%;
    display: block;
    background: #fff;
    position: absolute;
      -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg);
    left: -10%;
    opacity: 1;
    top: -4px;
    z-index:2;
    -moz-transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
       box-shadow:2px 0px 14px rgba(0,0,0,.6);}

#inquiry .btn_area .btn:hover:before{background: #a40102; opacity:1; width: 116%;}
#inquiry .btn_area .btn .btn_confirm{font-size:1rem; padding: 0; width:100%; height:100%; text-align:center; line-height:58px; box-sizing:border-box; display:block; border-radius:62px; background:none; cursor:pointer; border:0; color:#a40102; font-weight:600; border:2px solid #a40102; padding:0 30px; transition:all .2s linear; position:relative; z-index: 9;}
#inquiry .btn_area .btn:hover .btn_confirm{color:#fff !important;}
#inquiry .check__line input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#inquiry .check__line input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}
#inquiry .check__line input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 24px;
  text-align: center;
  background: url('../img/check_off.png')no-repeat;  
  box-sizing: border-box;
  border-radius: 5px;
}

/* 보여질 부분의 스타일을 추가하면 된다. */
#inquiry .check__line input[type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;  
  background: url('../img/check_on.png')no-repeat;  
  background-position: center center;
  border-radius: 5px;
}

#inquiry .check__line input[type="checkbox"] + label span {
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;  
  letter-spacing: -1px;
  color:#fff;
}



/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) {

.compad {padding:120px 0; box-sizing:border-box;}
.compad_b {padding:0 0 120px; box-sizing:border-box;}
.compad_t {padding:120px 0 0; box-sizing:border-box;}

#sticky-wrapper {height:60px !important; position:absolute; z-index:ddd9; position:absolute; width:100%; left:0; top:-65px; transition:all 0.5s;  overflow:hidden;}
#sticky-wrapper .swiper-wrapper {padding:0 5%; box-sizing:border-box; justify-content: center;}
#sticky-wrapper .swiper-wrapper li {margin-right:20px;}
#sticky-wrapper .swiper-wrapper li:last-child {margin-righT:0;}

#sticky-wrapper.hey {}
#sticky-wrapper.hey .lnb_mo {background:#fff; border-bottom:1px solid #ddd; height:60px;}
#sticky-wrapper.hey .lnb_mo li a {line-height:60px;}
#sticky-wrapper.hey .lnb_mo li a::after {bottom:-1px;}

#sticky-wrapper.hey .lnb_mo.fixed {top:86px !important; transition:all 0.5s; }

.left_menu {display:none;}
.right_cont {margin-left:0; width:100%; }

.lnb_mo {display:block;}
.lnb_mo li a {position:relative; font-family: 'josefin-sans', sans-serif; font-weight:600; font-size:1rem; line-height:1.2; display:inline-block; transition:all 0.5s;}
.lnb_mo li a::after {content:''; width:0 ;height:1px; background:#888; position:absolute; bottom:3px; left:0; transition:all 0.5s;}
.lnb_mo li a.mPS2id-highlight {color:#111; transition:all 0.5s;}
.lnb_mo li a.mPS2id-highlight::after {width:100%; transition:all 0.5s;}

.ceo_con{flex-direction:column; flex-flow:wrap-reverse;}
.ceo_con .pic{margin:0; width:100%; margin-top:60px; box-shadow:none; max-width:100%;}

}