@charset "utf-8";/* CSS Document */


/* sub */

.page_con.p1 {padding: 0em 0 6em;}
.page_con.bg {background: #f4f4f4;}

.page_sec{ padding:5em 0;}
.page_sec.conP1{ padding:3em 0;}
.page_sec.conP2{ padding:3em 0 5em;}
.page_sec.bg1{ background:var(--crGray);}
.page_sec.bg2{ background:var(--crGray2);}
.page_sec.bg3{ background:var(--siteBg1);}
.page_sec.bg4{ position: relative;}
.page_sec.bg4 .box1{ position: relative; z-index: 1;}
.page_sec.bg4::after{ content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); position: absolute; left: 0; top: 0;}
.page_sec.line{ border-top:5px solid #eee;}
.doc.pd0 .page_sec:last-child,
.doc.pb0 .page_sec:last-child{ padding-bottom:10em;}

.page_tit .tit1 { text-align: center; font-size: 2em; font-weight: 700; line-height: 1.8em; } 
.page_tit .tit2 { text-align: center; font-size: 1.5em; line-height: 1.6; text-transform: uppercase; font-weight: 600; } 

.page_tit.ico1{ margin-bottom: 1em; padding-left: 0.5em; font-weight: 800; font-size: 1.5em; color:#111; position: relative;}
.page_tit.ico1::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--siteC2); position: absolute; left: 0; top: 0;}
.page_tit.ico2{padding-left: 1em;padding-top: .5em;position: relative;}
.page_tit.ico2::before{ content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--siteC2); position: absolute; left: 0; top: 0; opacity: 1;}

.page_tt { font-size: 1em; word-break: keep-all; line-height: 1.6; letter-spacing: -0.05em;} 
.page_tt > .tt + .tt { margin-top: 1.5em; } 
.page_tt.o1 { opacity: .75; } 
.page_tt.s1 { font-size: 0.938em}
.page_tt.s2 { font-size: 1.063em}
.page_tt.s3 { font-size: 1.125em}
.page_tt.s4 { font-size: 1.250em; font-weight: 600;} 
.page_tt.s5 { font-size: 1.313em}
.page_tt.s6 { font-size: 1.500em;} 
.page_tt.s7 { font-size: 1.625em}
.page_tt.s8 { font-size: 1.875em}
.page_tt.s9 { font-size: 2.00em; } 
.page_tt.s10 { font-size: 2.65em;} 
.page_tt.s11 { font-size: 3em;} 
.page_tt.s12 { font-size: 4.000em;} 
.page_tt.s13 { font-size: 6.500em;} 
.page_tt.s14 { font-size: 2.250em;} 

.page_tt.w400 {font-weight: 400;}
.page_tt.w500 {font-weight: 500;}
.page_tt.w600 {font-weight: 600;}
.page_tt.w700 {font-weight: 700;}
.page_tt.w800 {font-weight: 800;}

.ttdot{ position:relative; padding-left:1rem; line-height:1.3; letter-spacing: -0.05em;}
.ttdot:before{ content:""; position:absolute; left:0; top:.375em; width:.313rem; height:.313rem; background:var(--siteC); border-radius:50%;}
.ttdot + .ttdot{ margin-top:.75em;}

.memo_box{ padding:2em 2.5em; background:#f6f6f6; border-radius: .8em;}
.memo_box.st1{ display:flex; flex-wrap:wrap; gap:1em 2em;}
.memo_box.st1 > *{ box-sizing:border-box; min-width:0;}
.memo_box.st1 .memo_con{ flex:1;}
.memo_box.st2{ padding: 1.5em 1.5em}
.memo_box.bgW{background:#fff;}

.imgdiv_Wrap { } 
.imgdiv_Wrap .s_imgdiv { gap: 1em; } 
.imgdiv_Wrap .s_imgdiv.st1 > li { } 
.imgdiv_Wrap .s_imgdiv.st1 > li:first-of-type { flex: 2; } 
.imgdiv_Wrap .s_imgdiv.st2 > li{ width: calc((100% - 4.5em) / 4);}
.imgdiv_Wrap .s_imgdiv.st2 > li .imgsec { height: 100%; } 
.imgdiv_Wrap .s_imgdiv > li { flex: 1; position: relative;} 
.imgdiv_Wrap .s_imgdiv > li .imgsec { width: 100%; height: 28.5em; overflow: hidden; border-radius: .8em; } 
.imgdiv_Wrap .s_imgdiv > li .imgsec > img { width: 100%; height: 100%; object-fit: cover; }
.imgdiv_Wrap .s_imgdiv > li .imgsec.logo{ height: 15em; padding: 2em; box-sizing: border-box; background: #fff;}
.imgdiv_Wrap .s_imgdiv > li .imgsec.logo > img{ object-fit: contain;}
.imgdiv_Wrap .s_imgdiv > li .txtsec{ display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 2em; box-sizing: border-box;  border-radius: .8em; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); position: absolute; left: 0; bottom: 0;}
.imgdiv_Wrap .s_imgdiv > li .txtsec > .tt{ font-weight: 600; font-size: 1.25em; color: #fff;}
.imgdiv_Wrap .s_imgdiv.st3 > li {width: calc((100% - 2em) / 3); flex: none;}
.imgdiv_Wrap .s_imgdiv.st3 > li .imgsec { height: 12.5em; } 
.imgdiv_Wrap .s_imgdiv.st3 > li .imgsec.bg{ height: 0; padding-bottom: 65%;}



/* 회사소개 */
.dp1_company.dp2_companyinfo #contents .sub_page_con {display: none;}

.greet_tit {padding: 2em 0;}
.greet_tit .t1 {font-size: 4em; font-weight: 800; background-image: url(../images/sub/company_bg1.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; text-shadow: 2px 0 6px rgba(0, 0, 0, .15); background-clip: text; -webkit-background-clip: text; color: transparent;}
.greet_tit .t2 {font-size: 1.375em; color: #333; line-height: 1.5; margin-top: 1em;}

.intro_bg {padding: 6em 3em;}
.intro_bg .intro_tbox {}
.intro_bg .intro_tbox .page_tt {color: #fff; line-height: 1.6; margin-bottom: 1em;}

.vision_con .vision_top {position: relative; z-index: 1;}
.vision_con .vision_top .logo {background: linear-gradient(45deg, rgba(235,128,20,1) 0%, rgba(230,0,18,1) 100%); width: 15em; height: 15em; z-index: 10; border-radius: 50%; text-align: center; margin: 0 auto;}
.vision_con .vision_top .logo img { filter: var(--crWhitefil); width: 11em;}
.circle { border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border: 2px solid #ddd;}
.circle.st1 {
  transition: all 0.5s;
  opacity: 0;
  animation: circle 3s 1s infinite forwards;
  width: 20em; 
  height: 20em;
  background: rgba(237,237,237,.7);
}
.circle.st2 {transition: all 0.5s;
    opacity: 0;
    animation: circle 3s 1.5s infinite forwards;
    width: 25em; 
  height: 25em;
  background: rgba(237,237,237,.7);
  }

@keyframes circle{
	0%{ opacity: 0;}
	50%{ opacity: 1; }
	100%{ opacity: 0; }
} 

.vision_con .vision_list {margin-top: 4em; gap: 1em; z-index: 10; position: relative;}
.vision_con .vision_list li {flex: 1; border-radius: 1em; overflow: hidden;}
.vision_con .vision_list li .inn {padding-bottom: 66.6%; position: relative;}
.vision_con .vision_list .tbox { padding: 1em; color: #fff; position: absolute; left: 0; bottom: 0;}
.vision_con .vision_list .tbox .title {font-size: 1.4em; font-weight: 800; margin-bottom: 0.5em;}
.vision_con .vision_list .tbox .tx {font-size: 1.125em;}


/* 연혁 */
.page_twrap_img {position: relative; padding-bottom: 7em}
.page_twrap_img .wrap_con {width: 70%; background: #fff; position: relative; z-index: 1; box-sizing: border-box; padding: 4em 3em; padding-bottom: 4em}
.page_twrap_img .wrap_con .p_ttl {font-size: 1.85em; font-weight: 700; margin-bottom: 1em;}
.page_twrap_img .wrap_con:before {content: ""; position: absolute; left: 0; top: 0; width: 2em; height: 2em; border: .25em solid var(--siteC); border-right: none; border-bottom: none}
.page_twrap_img .wrap_img {position: absolute; left: 0; bottom: 0; width: 100%; height: 70%}
.page_twrap_img .wrap_img .img {height: 100%}
.page_twrap_img.st1 {padding-bottom: 5em}
.page_twrap_img.st1 .wrap_con {width: 80%; margin: 0 auto; text-align: center; padding: 3em; border-top: 1px solid var(--siteC)}
.page_twrap_img.st1 .wrap_con:before {display: none}
.page_twrap_img.st1 .wrap_img {height: 80%}

.history_wrap{ display:flex; align-items:flex-start; position:relative; padding:4em 0 1em 0}
.history_wrap:before{ content:""; position:absolute; top:0; width:1px; height:calc(100% - 3em); background:#ddd}
.history_wrap:before,
.history_wrap .tabLink{ left:27em}
.history_wrap .wrap_tab{ width:27em; padding:1em 0; padding:0 6em 0 3em; box-sizing:border-box}
.history_wrap .wrap_tab > li > a{ margin:2em 0; color:#111; position:relative; filter:grayscale(1); transition:.3s}
.history_wrap .wrap_tab > li > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.5)}
.history_wrap .wrap_tab > li > a .t1{ font-weight:800; font-size:1.75em}
.history_wrap .wrap_tab > li.on > a,
.history_wrap .wrap_tab > li > a:hover,
.history_wrap .wrap_tab > li > a:focus{ filter:grayscale(0); color:#fff}
.history_wrap .wrap_tab > li.on > a:before,
.history_wrap .wrap_tab > li > a:hover:before,
.history_wrap .wrap_tab > li > a:focus:before{ width:100%; height:100%; background:rgba(0,0,0,.2)}
.history_wrap .wrap_tab > li.on > a{ border-color:#111; box-shadow:0 0 .5em rgba(0,0,0,.1)}
.history_wrap .wrap_tab > li.on > a:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; border:.25em solid var(--siteC);}
.history_wrap .wrap_con{ flex:1 1 0%; min-width:0; box-sizing:border-box; padding:2em 0; padding-right:6em}
.history_wrap .tabLink{ width:5em; height:3em; position:absolute; bottom:0; transform:translatex(-50%)}
.fadeAni{ animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite}
.history_wrap .tabLink .xi{ font-size:3em; position:absolute; left:0; top:0; width:100%; text-align:center;color:#ddd; margin-left:1px; animation-duration: 3s; animation-iteration-count: infinite}
.history_wrap .tabLink .xi:before{content:"\e943"}
.history_wrap .tabLink.tab1 .xi:before{content:"\e946"}
.history_wrap .tabLink .xi:nth-child(1){ transform:translateY(-.188em) scale(.6); animation-name: angleAni1}
.history_wrap .tabLink .xi:nth-child(2){ transform:scale(.8); animation-name: angleAni2}
.history_wrap .tabLink .xi:nth-child(3){ transform:translateY(.188em); animation-name: angleAni3}
.history_wrap .tabLink.tab1 .xi:nth-child(1) { transform:translateY(-.188em) scale(1); animation-name: angleAni3}
.history_wrap .tabLink.tab1 .xi:nth-child(3) { transform:translateY(.188em) scale(.6); animation-name: angleAni1}
.history_wrap .tabLink:hover .xi,
.history_wrap .tabLink:focus .xi{animation-name: none; color:var(--siteC);}

@keyframes angleAni1{
	0% {color: #ddd}
	10% {color: var(--siteC)}
	20% {color: #ddd}
}
@keyframes angleAni2{
	10% {color: #ddd}
	20% {color: var(--siteC)}
	30% {color: #ddd}
}
@keyframes angleAni3{
	20% {color: #ddd}
	30% {color: var(--siteC)}
	40% {color: #ddd}
}

.history > li{ padding:0 0 4em 4em; position:relative}
.history > li:before{ content:""; position:absolute; left:0; top:1.25em; width:3em; height:1px; background:#ddd}
.history > li .dot{ position:absolute; left:0; top:1.25em; transform:translate(-50%,-50%); width:1.5em; height:1.5em}
.history > li .dot:before,
.history > li .dot:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:50%}
.history > li .dot:before{ background:none; }
.history > li .dot:after{ background:#ccc; width:40%; height:40%}
.history > li .year .t1{ font-weight:800; font-size:1.75em; letter-spacing:-.063em}
.history > li .list{ padding:1em 0}
.history > li .list > li{ display:flex; padding:.5em .125em}
.history > li .list > li .month{ width:4em; margin-right:2em}
.history > li .list > li .con{ flex:1 1 0%; min-width:0; padding:.125em 0;}
.history > li .list > li .con .t1{ font-size:1.063em}
.history > li .month .t1{ font-weight:600; font-size:1.125em;}
.history > li.on .year,
.history > li.on .list > li .month{ color:var(--siteC);}
.history > li.on .list > li .con{ color:#000; font-weight:500}
.history > li.on .dot:before{ background:var(--siteC); opacity:.4;  animation-name: scaleAni; animation-duration: 2s; animation-iteration-count: infinite}
.history > li.on .dot:after{ background:var(--siteC);}

@keyframes scaleAni{
	100% { opacity:0; width:150%; height:150%}
}

/* 회사위치 */
.sub_location {}
.sub_location .map{ margin-bottom: 5em;}
.sub_location .address_box {margin-bottom: 1em;}
.sub_location .address_box .a_icon1 {background: var(--siteC); width: 1.5em; height: 1.5em; border-radius: 50%; text-align: center; color: #fff;line-height: 1.5em; font-size: 1em;}
.sub_location .info {margin-top: 3em; border-top: 2px solid var(--siteC); border-bottom: 1px solid #555;}
.sub_location .info li {padding: 1.5em 3em; border-bottom: 1px dashed #ddd; gap: 3em;}
.sub_location .info .icon {border: 1px solid #ddd; width: 4em; height: 4em; line-height: 4em;text-align: center; border-radius: .8em;}
.sub_location .info .icon > i {font-size: 1.4em;}
.sub_location .info .inner {}
.sub_location .info .inner .title {font-size: 1.125em; font-weight: 600; margin-bottom: 1em;}
.sub_location .info .inner .detail {margin-bottom: 1em;}
.sub_location .info .inner .detail:last-child {margin-bottom: unset;}
.sub_location .info .inner .detail .ti {margin-bottom: .5em;}
.sub_location .info .inner .detail .ti span {background: #333; color: #fff; border-radius: 3em; padding: .3em 1em; font-size: 0.96em;}
.sub_location .info .inner .detail .ti span.c1 {background: #717c01;}
.sub_location .info .inner .detail .ti span.c2 {background: #01509f;}
.sub_location .info .inner .detail .ti span.c3 {background: #2d949f;}
.sub_location .info .inner .detail .ti span.c4 {background: #2da74d;}
.sub_location .info .inner .detail .tx {}

.root_daum_roughmap .wrap_controllers{ display: none;}

/* 유지보수 */