@charset "utf-8";


/*#main_content{ display:block; width:100%;}*/
#main_div{ display:block; clear:both;width:100%; height:100%; margin-top:128px}
.main_div{ display:block; margin:0 auto;  clear:both; padding: 0 0px}


#hd {display:block; position:fixed; padding-top:50px; min-height:35px; margin:0 auto;background-color:inherit; z-index:9999; left: 0; right: 0;font-size:18px; color:#fff; border-bottom:1px solid #ccc; padding-bottom:10px;}
#hd > .ci_logo {width:200px; float:left;}
#hd > .menu {padding-left: 25px;width: auto;;padding-right: 50px; padding-top:5px;}
#hd > .menu > li {margin: 0 25px; display:inline-block; }
#hd > .menu > li > a{color:#fff;}
#hd > .menu > li > a:hover{text-decoration: none;}
#hd > .hd_right {float:right;}
#main{background-position: center center;background-size: cover;height: 360px;width: 100%;    top: 0;    left: 0;	z-index: 1;	position: relative;	display:block;	content:''; font-size:20px; letter-spacing:-1px}

/*#visual{background-color:#000;}*/
#visual{	width: 100%;    height: 360px;    overflow: hidden;    position: relative;    z-index: 8; }
/*left_page_nation*/
#page_navi{position:fixed; left:72px; top:40%; z-index:9; display:none;}/*일단 none으로 만들어버림 필요하면 block해서 쓰셈*/
#page_navi > ul > li  > a:before{content : '●';color:white;}
#page_navi > ul > li  > a:hover{ padding:5px; border:2px solid #fff; border-radius:100%;}
#page_navi > ul > li  > a{padding:7px; display:block; margin-bottom:20px;}

.mob_class{display:block; min-height:500px; height:100%; width:100%;     position: relative;}
.mid_text{position: absolute;   text-align: center;    top: 40%;    left: 0;    right: 0;}



/* slider pc { */
#slider  {max-width:100%; display:block; margin:0 auto}
#slider div.slItems{max-width:100%; height:100vh; *padding-top:49.6%} /*반응형일때 height를 없애고 padding-top으로.*/
#slider .slDots{
	position: absolute;
    /*top: 40%;*/
	bottom: 15%;
    left: 50%;
    right: auto;
    *background-color: yellow;
    z-index: 99999999;
    width: auto;
	
	/*display:none;*/
}

.slDotsSingle {
    width: 10px;
    height: 10px;
    margin: 30px;
    border-radius: 100%;
}
.slDotsSingle {
    width: 2px;
    height: 30px;
    *float: left;
    margin: 2px 0;
    margin-right: 1px;
    cursor: pointer;
    background: #fff;
    transition: background 0.3s ease;
    display: block;
}
.slDots .slDotsSingle.active{content : '●';background:#ff9933; }

.slDots .slDotsSingle.active:before{
	
	width: 2px;
    height: 30px;
    *float: left;
    *margin: 2px 0;
    *margin-right: 1px;
	margin-top:30px;
    cursor: pointer;
    background: #fff;
    transition: background 0.3s ease;
    display: block;
	*margin: 30px 15px;


}


/*=======================================================*/




.video_text{position: absolute;   text-align: center;    top: 0;    left: 0;   ;}
ul.milestone{ margin-bottom:85px; bottom:85px; text-align:left; float:right; margin-right:180px;}
ul.milestone > li {width:280px; margin-right:12px; padding-left:5px; padding-bottom:8px; display:inline-block; float:left; font-size:18px; color:#fff; border-bottom:1px solid #fff; font-size:20px;}
ul.milestone > li > a > span{margin-left:15px; font-size:15px; color:#ccc;}
ul.milestone > li > a {color: #fff;}

/* #slide navigator custom */
.slider > .ctrlPrev{top:auto; bottom:90px; left:100px; z-index:99999; display:block;}
.slider > .ctrlNext{top:auto; bottom:90px; left:150px; z-index:99999; display:block;}
.sldNavNum{ position:absolute;color:#fff; font-size:20px; bottom:90px; left:180px; *display:none;}
.sldNavNum > span.sldChk {font-size:20px; *display:none;}
.sldNavNum > span.sldmid {font-size:20px; *display:none;}
.sldNavNum > span.sldMax {font-size:20px; *display:none;}


.slDotsSingle{    width: 10px;    height: 10px;    margin: 15px;    border-radius: 100%;}
.slDotsSingle:hover {border:2px solid #fff; border-radius:100%; display:absolute; }


/* slide navigator custom*/
				.ctrlPrev{top:auto; bottom:85px; left:20px; z-index:9999999}
				.ctrlNext{top:auto; bottom:85px; left:100px; z-index:9999999}
				.sldNavNum{bottom:90px; left:180px;}
				.sldNavNum > span.sldChk {font-size:20px}
				.sldNavNum > span.sldmid {font-size:20px}
				.sldNavNum > span.sldMax {font-size:20px}
				.slDots{bottom:90px; top:auto; left:300px;}
				.slDotsSingle{width:5px; height:5px; margin-left:5px;display:inline-block;}
				


/* slider pc } */


/* main content { */
.swiper-wrapper > .swiper-slide div.background_div {width:100%; height:100%; background-size:cover;background-position:center; position:relative}
.vis00 {  background:#c4013e; }
.vis01 {  background:#EF8BA6;}
.vis02 { background-image:url('');}
.vis03 { background-image:url('');}
.slide_text {max-width:1700px; margin:0 auto; height:100%; color:#fff; line-height:1.5em; display:flex; ; display:flex; justify-content:space-between; align-items:center; position:relative }
.slide_text > div > p.slide_text_01 {font-size:1.2em; font-weight:600; }
.slide_text > div  > p.slide_text_02 {font-size:2.4em; font-weight:700; margin-bottom:10px;line-height:1.2em}
.slide_text > div  > p.slide_text_03 {font-size:1em; font-weight:400; }

/* 사업영역 { */
#main_biz { width:100%; max-width:1700px; margin:0 auto; padding:32px 10px}
#main_biz ul { width:100%;display:flex; flex-wrap:wrap;}
#main_biz ul > li { width:25%; padding:16px; }
#main_biz ul > li:nth-child(1), #main_biz ul > li:nth-child(2) { width:50%;}
#main_biz ul > li > div { width:100%; padding:16px; height:160px; background:#f7f7f7; display:flex; justify-content:space-between; align-items:center; overflow:hidden; position:relative}
#main_biz ul > li > div p:nth-child(1) { font-weight:700; font-size:1.5em; line-height:1.5em }
#main_biz ul > li > div p:nth-child(1) span:after{content:""; width:1em; height:1em; background:url('/images/main/More.png' ) no-repeat; background-size:cover; display:inline-block; margin-left:10px; vertical-align:middle }
#main_biz ul > li > div p:nth-child(2) { font-size:font-size:0.8em;  }
#main_biz ul > li > div a {  position:absolute; height:100%; width:100%; display:block; }
@media (max-width:1200px){
.slide_text {padding-left:10px; }
}
@media (max-width:840px){
#main_biz ul > li { width:50%;  padding:5px}
.slide_text > div  > p.slide_text_02 {font-size:1.8em; font-weight:700; margin-bottom:10px;line-height:1.2em}
.slide_text > div:nth-child(2) {position:absolute; bottom:0; right:0; width:150px }
#main_biz ul > li > div { padding:16px; height:100px; }
#main_biz ul > li > div span { width:90px; }

}

@media (max-width:640px){
#main_biz ul > li { width:100%;}
#main_biz ul > li:nth-child(1), #main_biz ul > li:nth-child(2) { width:100%;}
}



/*  { */  



/*  { */


/*  { */


.active .slidein {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;

  }

  to {
    margin-left: 0%;

  }
}

.active .slidein2 {
  animation-duration: 2s;
  animation-name: slidein2;
}

@keyframes slidein2 {
  from {
    margin-left: -100%;

  }

  to {
    margin-left: 0%;

  }
}
.slidein3 {
  animation-duration: 2s;
  animation-name: slidein3;
}

@keyframes slidein3 {
  from {
    margin-left: -100%;

  }

  to {
    margin-left: 0%;

  }
}

.fade-in {
      
        transition: 0.3s;
		animation-duration: 3s;
  animation-name: fade-in;
      }


@keyframes fade-in {
  from {
   opacity: 0;

  }

  to {
    opacity: 1;

  }
}








/* 사이즈별 폰트크기 섹션 패딩 */
@media (max-width:1400px){
#main_div{ margin-top:0px}
}

@media (max-width:1000px){
#main{font-size:18px; letter-spacing:0px}
#main p.main_title{ font-size:2.2em; font-weight:700;letter-spacing: -0.02em;}
#main p.main_txt{}
div.esg{  padding:100px 0; }
div.latest{padding:100px 10px !important;}
div.biz{padding:100px 10px;}
}
@media (max-width:840px){
#main{font-size:16px; letter-spacing:0px}
#main p.main_title{ font-size:2em; font-weight:700;letter-spacing: -0.02em;}
#main p.main_txt{}
div.esg{  padding:80px 0; }
div.latest{padding:80px 10px !important;}
div.biz{padding:80px 10px;}
}

@media (max-width:640px){
#main{font-size:14px; letter-spacing:0px}

}