@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

hr.con_hr {height:40px}

.sub_vi {width:100%; height:370px; display:flex; align-items:center; position:relative; top:0; overflow:hidden; }
.sub_vi .img {width:100%; height:100%;  -webkit-animation: fadeOut 4s 1 linear;
  animation: fadeOut 4s 1 linear; position:absolute; left:0; top:0;}
/* .sub_vi .img img {min-width:100%; min-height:100%;  max-width:150%; position:absolute; top:50%; left:50%;  transform: translate(-50%, -50%);   }
 */
.sub_vi div {position:Relative; z-index:99; width:100%; text-align:center; color:#fff}
.sub_vi  h2 {color:#fff; font-size:3rem; letter-spacing:0px; margin-bottom:5px; margin-top:20px }
.sub_vi  p {  font-size:1.1rem;  }

.rgba_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0,.4);
    display: inline-block;
    z-index: 9;
    content: '';
}


@keyframes fadeOut {
	   0% {transform: scale(1.15);}
  	   100% {transform: scale(1);}
	}


.sub_menu {width:100%; border-bottom:1px solid #ddd}
.sub_menu ul {display:flex; justify-content:center; width:100%;  padding:0 4% 0 4%; max-width:1200px; margin:0 auto; box-sizing:border-box;}
.sub_menu ul li {margin:0 10px; font-size:1.25em; transition: all 0.3s ease-out;}
.sub_menu ul li a {display:inline-block; padding:15px 10px; color:#555; }
.sub_menu ul li.ov {border-bottom:2px solid #222; font-weight:600 }
.sub_menu ul li.ov  a {color:#222}
.sub_menu ul li:hover {border-bottom:2px solid #222; font-weight:600 }


h2.guide {font-size:2.3rem; font-weight:700; color:#111; display:none; width:100%; text-align:center; padding:70px 0 20px 0}

.sub_con {width:100%; padding:0 4% 100px 4%; box-sizing:border-box; max-width:1200px; margin:0 auto; margin-top:70px}
.sub_con h3 {font-size:1.5em; font-weight:600}
 
 @media all and (max-width:900px) {
             .sub_con { padding:0 4% 70px 4%; }

			.sub_menu ul li { font-size:1.1em; }
			.sub_menu ul li a { padding:13px 5px;  }

			 h2.guide {font-size:1.9rem;  padding:50px 0 20px 0}
 			.sub_vi { height:250px; margin-top:62px }
 			.sub_vi  h2 {  font-size:2rem; letter-spacing:1px; margin-top:0  }
			.sub_vi  p {  font-size:.93rem; line-height:1.3; box-sizing:border-box; width:100%; padding:0 8% }
 
}



ul.gall_list {width:100%; justify-content:space-between;  display:flex; flex-wrap:wrap; margin-top:10px; margin-bottom:50px}
ul.gall_list li {width:100%; margin-bottom:15px; display:flex; align-items:center} 
ul.gall_list li img {max-width:100%}
ul.gall_list li:last-child {margin-bottom:0}
ul.gall_list li img.img {width:43%; border:1px solid #ddd; border-radius:20px}
ul.gall_list li div {width:53%; margin-left:auto}
ul.gall_list li h3 {font-size:1.5rem; font-weight:600; line-height:1.3; display:block; margin:15px 0 15px 0}
 
ul.gall_list li p {font-size:1.07em; font-weight:500; line-height:1.4; color:#333; width:100%; margin-top:15px }
ul.gall_list li p:last-child {font-size:1em;  display:block; font-weight:400; background:#f9f9f9; box-sizing:border-box; padding:20px; display:flex; flex-wrap:wrap}
ul.gall_list li p:last-child b {width:80px} 
ul.gall_list li p:last-child span {width:calc(100% - 80px); line-height:1.35} 

 @media all and (min-width:900px) {
 
		ul.gall_list li:nth-child(2n) img {order:2; margin-left:auto}
		ul.gall_list li:nth-child(2n) div {order:1; margin-left:0}
 
}
 

 @media all and (max-width:900px) {
 
			ul.gall_list {margin-bottom:30px;}
			ul.gall_list li {flex-wrap:wrap; border:1px solid #ddd; border-radius:10px; box-sizing:border-box; padding:20px; text-align:left; }
			ul.gall_list li div {width:100%; margin-top:25px; margin-left:auto; }
            ul.gall_list li img.img {border:none; width:100%;  border-radius:10px; margin:0 auto; }

  			ul.gall_list li h3 {font-size:1.25rem; }

			ul.gall_list li p {font-size:.97rem; }
			ul.gall_list li p:last-child {font-size:.93rem; padding:0; background:none;   border-top:1px solid #ddd; padding-top:15px }
 
}




.company1 .top_text  p.t1 {font-weight:400; font-size:1.2em}
.company1 .top_text  p.t2  {font-family:'Roboto'; font-size:5.5em; line-height:1.1; letter-spacing:-2px; font-weight:500; margin-bottom:15px}
.company1 .top_text  p.t2  span {font-weight:200}
.company1 .top_text  span.t3 {font-size:1em; letter-spacing:7px}


.company1 .about_text {font-size:1.1em; color:#333;  line-height:1.5;}
.company1 .about_text b {color:#1b2b57; font-size:1.6em; display:block; }
.company1 .about_text span.t1 {color:#1b2b57; font-weight:600; font-size:1.2em; display:block; margin:10px 0 }


.company1_bottom_wrap {width:100%; background-color:#f9f9f9;  border-top:1px solid #ddd; padding:50px 0 60px 0; margin-top:-40px; display:inline-block }
.company1_bottom_wrap .sub_con {padding:0 4% 0 4%; max-width:1100px; margin:0 auto}
.company1_bottom_wrap h3 {font-size:1.7em; font-weight:500; color:#333; margin-bottom:25px}


.img_list {width:100%;   box-sizing:border-box;   display:flex; flex-wrap:wrap; justify-content:space-between}
.img_list li {width:24%; background-color:#fff; height:100px; display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
.img_list li:nth-child(n + 5) {margin-top:.9%}
.img_list li img {max-width:80%; max-height:65px}


 @media all and (max-width:900px) {
			.company1 .top_text  p.t1 {font-weight:400; font-size:1em}
			.company1  .top_text  p.t2  { font-size:12vw; line-height:1; letter-spacing:-1px; margin:5px  0 10px 0}
			.company1  .top_text  span.t3 {font-size:.8em; letter-spacing:5px}

			.company1 .about_text {font-size:1em;  line-height:1.4 }
			.company1 .about_text b {  font-size:1.3em;  }
			.company1 .about_text span.t1 { font-size:1.15em; line-height:1.35 }
			.company1_bottom_wrap { margin-top:-20px;  }
			.company1_bottom_wrap h3 {font-size:1.4em;   margin-bottom:15px}
			.img_list { justify-content:center}
			.img_list li {width:33.3333%; padding:0 1% ; height:80px;  }
			.img_list li:nth-child(n + 4) {margin-top:1%}
			.img_list li img { max-height:60px}


}


.history div.box {display:flex; width:100%; padding-bottom:10px; margin-bottom:15px; border-bottom:1px solid #ddd}
.history div.box span {width:120px; font-weight:600; font-size:1.2em; color:#054dae}
.history div.box ul {width:calc(100% - 120px);  }
.history div.box ul li {color:#333; list-style:disc;   margin-bottom:3px; font-size:1em; line-height:1.3}


.history .flex_box h2 {width:250px; color:#222; font-size:3rem; font-weight:800; line-height:1.1; margin-top:-5px}
.history .flex_box > div {width:calc(100% - 250px); margin-left:auto}

@media all and (max-width:900px) {
		.history .flex_box {flex-wrap:wrap}
		.history .flex_box h2 {width:100%; font-size:1.5em; margin-top:0; margin-bottom:20px}
		.history .flex_box > div {width:100%;}
		.history div.box ul li {  font-size:.95em;  }
 

}




.organization {width:94%;   position:relative;  padding-bottom:0; margin-bottom:100px; font-size:1em; padding:0;   }
.organization .flex_box {justify-content:space-between; align-items:flex-start; width:100%}
.organization p.box {width:200px; padding:15px 0;  background-color:#333; color:#fff; text-align:center; font-size:1.1em; font-weight:600; position:absolute; z-index:99}
.organization p.box:after {width:calc(100% - 10px); height:calc(100% - 10px); position:absolute; left:5px; top:5px; border:1px solid rgba(255,255,255,.8); content:''; box-sizing:border-box;  }


.organization  p.box.ceo {left:49%;  background-color:#054dae}
.organization  p.box:nth-child(2) {left:29%; top:90px}
.organization  p.box:nth-child(3) {right:16.5%; top:90px}
.organization  p.box:nth-child(4) {left:29%;  top:180px}
.organization  p.box:nth-child(5) {right:4%; top:180px}

.organization ul {width:24%; border-radius:5px; border:2px solid #ddd; background-color:#fff;  padding:20px 0 15px 0; box-sizing:border-box;  margin-top:330px; position:relative; z-index:99}
.organization ul  li {width:100%; text-align:left; padding:2px 25px; font-size:.95em;  box-sizing:border-box; color:#333; }
.organization ul  li.tt {font-weight:600; width:100%; text-align:center; border-bottom:1px solid #ddd;  font-size:1.2em; padding-bottom:8px; margin-bottom:12px; padding-left:0; padding-right:0 }
.organization ul:nth-child(4)  li.tt {  border-bottom:none;  font-size:1.2em; padding-bottom:0; margin-bottom:0 }

.organization ul:after {content:''; position:absolute; left:50%; top:-10px; margin-left:-10px; width:20px; height:20px; border-radius:50%;  border:5px solid #054dae; background-color:#fff; z-index:99; box-sizing:border-box}
.organization ul:nth-child(1):after {margin-left:-9px}

.pc_line_wrap {  width:100%; left:0; display:inline-block; position:absolute; top:0;  }

.line-x {width:100%; height:1px; position:absolute; background-color:#d3d3d3; display:inline-block}
.line-y {width:1px; height:100%; position:absolute; background-color:#d3d3d3; display:inline-block}

 @media all and (min-width:900px) {
   .m_line_wrap {display:none}

}

 @media all and (max-width:900px) {

        .organization  {font-size:.95em; margin-bottom:70px; }
		.organization p.box {width:150px;  font-size:1.1em;  }
		.organization  p.box.ceo  {left:50%; transform: translate(-50%, 0);}
		.organization  p.box:nth-child(2) {left:4%; top:75px}
		.organization  p.box:nth-child(3) {right:4%; top:75px}
		.organization  p.box:nth-child(4) {left:50%; margin-left:-75px; top:150px}
		.organization  p.box:nth-child(5) {left:50%; margin-left:-75px; top:auto; bottom:78px}

		.pc_line_wrap {display:none}
		.organization .flex_box {flex-wrap:wrap}
		.organization ul {width:47%; margin-top:270px; padding:15px 0}
		.organization ul  li {  text-align:left;  padding:2px 10px}
		.organization ul  li.tt {  font-size:1.1em;   }
		.organization ul:nth-child(3) {margin-top:30px;  margin-left:26.5%}
		.organization ul:nth-child(4) {margin-top:105px;  margin-left:26.5%}
		.organization ul:nth-child(4)  li.tt {  padding-bottom:0 }
 
		.organization ul:after { margin-left:-7px; width:16px; height:16px;  }
		.organization ul:nth-child(1):after {margin-left:-10px}

 }



.map {color:#333; font-size:1em; line-height:1.4}
.root_daum_roughmap_landing {width:100% !important; height:300px !important}
.map h3 {font-size:1.4em; padding-bottom:8px}
.map a:hover {text-decoration:underline}

 @media all and (max-width:900px) {

  .map { font-size:.95em; }
  .root_daum_roughmap_landing { height:180px !important}
  .map h3 {font-size:1.3em;}
  .map .flex_box.col-2 div:nth-child(2) {margin-top:15px}
}