@charset "utf-8";


/*#main_content{ display:block; width:100%;}*/
#main_div{ display:block; clear:both; text-align:center;}
.main_div{ display:block; margin:0 auto;  clear:both; padding: 0 40px}
.main_div > div{display:inline-block;}

#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; font-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: 100%;width: 100%;    top: 0;    left: 0;	z-index: 1;	position: relative;	display:block;	content:''; }

/*#visual{background-color:#000;}*/
#visual{	width: 100%;    height: 100%;    overflow: hidden;    position: relative;    z-index: 500; }
/*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:auto;
    left: auto;
	right: 0;
    *background-color: yellow;
    z-index: 99999999;
    width: 60px;
	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;


}


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

/*.slItems .slItem #top_video{width:100%; height:auto;}*/
.slItems .slItem.video{
      width: 100%;
      height: 100%;
      overflow: hidden;
	  background-color:#000;
	  }

#top_video {
      /* Make video to at least 100% wide and tall */
      min-width: 100%;
      min-height: 100%;
      /* Setting width & height to auto prevents the browser from stretching or squishing the video */
      width: auto;
      height: auto;
      /* Center the video */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }

.video_text{position: absolute;   text-align: center;    top: 40%;    left: 0;    right: 40%;}
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; }
.visual_text {text-align:left; color:#fff; font-size:63px;  padding-left:150px; width:1200px; line-height:1.3em;letter-spacing: -0.04em;}
.visual_text > p.title {font-weight:500; color:#fff; font-size:63px;  margin-bottom: 20px;letter-spacing: -0.04em;}



/* 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 { */
#main div p.sec_title{ font-size:45px; font-weight:500; letter-spacing: -0.04em;}
#main div p.sec_con{ font-size:20px; font-weight:400; letter-spacing: -0.02em;}
#main div p.sec_title_s{ font-size:35px; font-weight:500; letter-spacing: -0.04em; margin-bottom:32px;}

.img_p {background-image: url('/theme/basic/img/main/main_img_p3.png') ;background-position: center; background-size: cover;padding:120px 0;}

.main_bizarea1 { margin: 0 auto; color:#000;}
.main_bizarea1 hr {display:block; margin:20px auto; text-align:center; }
.main_bizarea1 p {font-size:18px; line-height:1.25em; margin-bottom:-6px;}
.main_bizarea1 > div {display:flex; width:100%; max-width:1400px; margin:0 auto;}
.main_bizarea1 > div > div {display:inline-block; width:100%; height:630px; margin-right:20px; padding:10px; border:1px solid #333; position:relative; color:#fff; font-size:18px; margin-top:50px; background-position: center;    background-size: cover;}

.main_bizarea1 > div > div.logis1{background-image: url('/theme/basic/img/main/main_sub2_04.png');}
.main_bizarea1 > div > div.logis2{background-image: url('/theme/basic/img/main/main_sub2_02.png');}
.main_bizarea1 > div > div.logis3{background-image: url('/theme/basic/img/main/main_sub2_01.png');}
.main_bizarea1 > div > div:nth-last-child{margin-right:0px;}
.main_bizarea1 > div > div > div.border_line { position:absolute; top:4px;left:4px; display:none;  width:calc(100% - 10px); height:calc(100% - 10px); border:1px solid #fff;}
.main_bizarea1 > div > div > div.box_cont{ position:absolute; left:54px; bottom:54px; text-align:left;}
.main_bizarea1 > div > div > div.box_cont a {color:#fff; width:140px; height:40px; border:1px solid #fff; display:block; line-height:40px; text-align:center; margin-top:40px;}
.main_bizarea1 > div > div:hover > div {display:block;} 
.main_bizarea1 > div > div:hover > div.box_cont a{background-color:#007fa4; border:1px solid #007fa4;}


.main_bizarea { margin: 120px auto;}
.main_bizarea hr {display:block; margin:20px auto; text-align:center; }
.main_bizarea p {font-size:18px; line-height:1.3em; margin-bottom:-8px;}
.main_bizarea > div {display:inline-block; width:466px; height:630px; margin-right:20px; padding:10px; border:1px solid #333; position:relative; color:#fff; font-size:18px; margin-top:50px; background-position: center;
    background-size: cover;}

.main_bizarea > div.logis1{background-image: url('/theme/basic/img/main/main_sub2_03.png');}
.main_bizarea > div.logis2{background-image: url('/theme/basic/img/main/main_sub2_02.png');}
.main_bizarea > div.logis3{background-image: url('/theme/basic/img/main/main_sub2_01.png');}


.main_bizarea > div.logis2 >  div.box_cont > p.box_cont_p {margin-bottom:54px;}
.main_bizarea > div.logis3 >  div.box_cont > p.box_cont_p {margin-bottom:54px;}

.main_bizarea > div:nth-last-child{margin-right:0px;}
.main_bizarea > div > div.border_line { position:absolute; top:4px;left:4px; display:none;  width:calc(100% - 10px); height:calc(100% - 10px); border:1px solid #fff;}
.main_bizarea > div > div.box_cont{ position:absolute; left:50px; bottom:50px; text-align:left; width:370px; font-size:20px;}
.main_bizarea > div > div.box_cont a {color:#fff; width:140px; height:40px; border:1px solid #fff; display:block; line-height:40px; text-align:center; margin-top:40px; font-size:18px;}
.main_bizarea > div:hover > div {display:block;} 
.main_bizarea > div:hover > div.box_cont a{background-color:#007fa4; border:1px solid #007fa4;}

#main .main_box2{padding:160px 0; float:left; display:block; text-align:left; background-size:cover; color:#fff;line-height:1.5em; width:50%; }
#main .main_box2 a {color:#fff;    width: 140px;    height: 40px;  font-size:14px;  border: 1px solid #fff;    display: block;    line-height: 40px;    text-align: center;    margin-top: 30px;}
#main .main_box2 div > a:hover {color:#fff;   background-color: #007fa4;    border: 1px solid #007fa4;} 

#main .main_box2.youn{ background-image: url('/theme/basic/img/main/main_sub3_01.jpg');}
#main .main_box2.youn > div{float:right;  max-width:520px; width:100%; margin-right:120px}
#main .main_box2.chae{  background-image: url('/theme/basic/img/main/main_sub3_02.jpg');}
#main .main_box2.chae > div{float:left;  max-width:520px; width:100%; margin-left:120px}

#main .main_box2.chae > div p:nth-of-type(2) {margin-bottom:57px;}



#main .main_box2:after{clear:both; display:block; content:'';}
#main .main_box2 p { font-size:18px; line-height:1.5em;}
/* main content } */

#slider > div.visual_text {max-width:1800px; display:block; margin:0 auto; position:absolute; top:40%; *bottom:0; z-index:8;}
.visual_text {text-align:left; color:#fff; font-size:45px;  padding-left:300px;  line-height:1.3em; font-weight:400;}
.visual_text > p.title {font-weight:900; color:#fff; font-size:58px;  margin-bottom: 10px;  line-height:1.1em;
-webkit-text-shadow: 3px 3px 31px rgba(0,0,0,0.54);
-moz-text-shadow: 3px 3px 31px rgba(0,0,0,0.54);
text-shadow: 3px 3px 31px rgba(0,0,0,0.54);}

#main > section.div_sec{ width:100%; clear:both; /*display:flex;*/}


hr.line_hr { /*width:74px; height:3px; color:#007fa4; border-bottom:3px solid #007fa4;*/
	border: none;
    border-bottom: 3px solid #007fa4;
    width: 74px;
    display: block;
    color: #007fa4;
    height: 3px;
    margin-bottom: 40px;
}

@media(max-width:1400px){

	
	#main .main_box2{width:50%; padding:60px 20px; text-align:center;min-height:500px}
	#main .main_box2.youn > div{float:none; margin-right:0; margin:0 auto;}
	#main .main_box2.chae > div{float:none;  margin-left:0;  margin:0 auto;}
	

	#slider > div.visual_text {width:100%; text-align:center; padding-left:unset; height:100%;  }

	.main_bizarea1 {margin:60px auto}
	.main_bizarea1 > div {padding:20px;}
	.main_bizarea1 > div > div {width:33%;margin-right:10px; height:auto; min-height:340px; padding: 40px 10px ;  }
	.main_bizarea1 > div > div:last-child{margin-right:0;}
	.main_bizarea1 > div > div > div.box_cont {position:relative; text-align:center; padding: 60px 10px;left:0; bottom:0; padding: 0 0px; }
	.main_bizarea1 > div > div > div.box_cont a {margin:0 auto;  height:auto; padding:10px 20px; line-height:1.0em; text-align:center; }

	.main_bizarea1 p {margin-bottom: 0}
	.main_bizarea1 p.box_cont_p {margin:30px 0; }

	#main div p.sec_title_s {font-size: 25px;}
	#main div p.sec_title {font-size:36px;} 
	#main .main_box2 a {margin: 40px auto 0 auto;}
	hr.line_hr {margin: 10px auto 40px auto;}


}

@media (max-width:840px) {

	#main div p {font-size:16px;}
	#slider { width: 100%; height: 100vh; *height: 400px; position: relative;	}
	#main .visual_text > p.title{ font-size:30px;}
	#main .visual_text > p{ font-size:18px;}
	#slider div.slItems {height:100%; }
	#slider .slDots, #slider .sldNavNum, .slider > .ctrlPrev, .slider > .ctrlNext{ display:none; }	
	
	.main_bizarea1 {margin:20px auto; padding:10px 0;}
	.main_bizarea1 > div {padding:0;    flex-direction: column;  flex-wrap: nowrap;}
	.main_bizarea1 > div > div{width: 100%; }
	.main_bizarea1 > div > div { margin:0; *margin-bottom:10px; min-height:auto;}
	.main_bizarea1 p.box_cont_p {margin: 0 auto; display:block; width:90%;  margin-bottom:40px;}
	
	#main div p.sec_con {padding:10px;}
	#main div p.sec_title{ font-size:25px; font-weight:500;letter-spacing: -0.04em;}
	#main div p.sec_con{ font-size:16px; font-weight:400;letter-spacing: -0.02em;}
	#main div p.sec_title_s{ font-size:20px; font-weight:500;letter-spacing: -0.04em;margin-bottom:32px;}
	.main_bizarea1 > div div.box_cont a {font-size:14px !important;}

	#main .main_box2{width:100%; padding:30px 10px; font-size:15px }
	#main .main_box2.youn > div{float:none; font-size:15px}
	#main .main_box2.chae > div{float:none; font-size:15px }


}