@charset "utf-8";

/* CSS Document */
@import url('/home/css/basic.css');
@import url('/home/css/nav.css');
@import url('/home/css/form.css');

/* header start */
header > h1 {position:absolute; left:5%; height:50px; line-height:50px; z-index:99; margin-top:0;} 
header > h1 a {display:block; height:100%; font-size:1.2em; font-weight:600; text-decoration:none; overflow:hidden;}
header > h1 a:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-size:100%;}

.container {width:100%;}
.container section {position:relative; width:100%; margin:0 auto;}
.container section#visual{height:100vh; background:url('/home/images/visual01')no-repeat; background-size:cover}

.section article {padding: 0 16px;}
.container article {position:relative; width:92%; margin:0 auto; padding:50px 0 30px; z-index: 1}

.top-box {position:relative; width:100%; height:200px; background-size:cover; overflow:hidden;}
.top-box .box_ .sub_title_box_ {position:absolute; left:5%; top:50%; width:90%; margin:0 auto; font-size:1.7em; color:#fff; font-weight:500; text-align:center; z-index:3;}
.top-box .box_ .sub_nav {display:none; position:absolute; left:5%; top:60%; width:90%; margin:0 auto; font-size:1.1em; color:#fff; font-weight:500; text-align:center; z-index:3; text-shadow: 0 0 5px #333}
.top-box .box_ .sub_nav > div {display:flex; position:relative;align-items: center; justify-content: center; left:0; top:0; font-weight: 200; z-index: 3}
.top-box .box_ .sub_nav:after {display:block; position: absolute; left:50%; width:150%; height:50px; transform:translateX(-50%); content: ''; clear: both; z-index: 1}
.top-box > h2 p {padding-bottom:15px; font-weight:600; text-transform:uppercase}
.top-box .box_01 {position:relative; top:0; left:0; height:100%; background:url('/home/images/content/box_01.jpg')no-repeat center;background-size: cover;}
.top-box .box_02 {position:relative; top:0; left:0; height:100%; background:url('/home/images/content/box_02')no-repeat center;background-size: cover;}
.top-box .box_03 {position:relative; top:0; left:0; height:100%; background:url('/home/images/content/box_03')no-repeat center;background-size: 160%;}
.top-box .box_04 {position:relative; top:0; left:0; height:100%; background:url('/home/images/content/box_04')no-repeat center;background-size: cover;}
.top-box .box_05 {position:relative; top:0; left:0; height:100%; background:url('/home/images/content/box_05')no-repeat center;}
.top-box .box_::after {position:absolute; top:0; left:0; right:0; bottom:0; background-color: rgba(0, 0, 0, 1); content:""; opacity: 0; }


.sub_title_box_ {position:relative; width:90%; margin:0 auto; }
.sub_nav {position:relative;  height:20px; width:100%;}

.top-box .box_ .sub_nav > div div:nth-child(2), .top-box .box_ .sub_nav > div div:nth-child(4) {padding:0 15px; font-size: 0.7em}
.sub_name {font-size: 1em; text-shadow: 0 0 5px rbga(0,0,0,.3)}
.sub_nav .list {width:auto !important}
.sub_nav .list i {position: relative; top: 0; font-size: 0.6em}


.path-box {position:relative; top:0; width:100%; height:45px; text-align:center; background:#f7f7f7; border-bottom:1px solid #d4d4d4}
.path-box ul.path {position:relative; top:0; width:1200px; height:45px; margin:0 auto; padding:0;}
.path-box ul.path >li {float:left; display:inline-block; position:relative; height:45px;}
.path-box ul.path >li a {display:block; height:45px; padding:0 20px;line-height:45px; font-size:1em; color:#777;}
.path-box ul.path >li a.on {color:#004ac5; font-weight: 400; background:#fff; border-bottom:2px solid #004ac5}
.paths_box {position:relative; top:0; width:100%; height:auto; text-align:center; background:#f7f7f7}
.paths_box ul.paths {position:relative; top:0; width:1100px; height:35px; margin:0 auto; padding:0;}
.paths_box ul.paths >li {float:left; display:inline-block; position:relative; height:35px; font-size:.8em; }
.paths_box ul.paths >li a {display:block; height:35px; padding:10px 20px 0; color:#333;}
.paths_box ul.paths >li a:hover {color:#004ac5;}
.paths_box ul.paths >li a.on {color:#004ac5; font-weight:bold}

#lnb {display:none;}

.navbar{min-height:50px !important;border-bottom:1px solid #d4d4d4;background:#fff;}
/* sub-common-nav */
.lnb.navbar {margin-bottom:0;}
.lnb ul.nav {border-left:1px solid #d4d4d4;margin:0;}
.lnb ul.nav >li {width:250px;border-right:1px solid #d4d4d4; background:url('/home/images/arrow_violet')no-repeat 92% 22px !important;}
.lnb ul.nav >li a {display:block;width:250px;height:50px;font-size:1.1em;padding:0 20px;font-weight:600;line-height:50px;}
.lnb ul.nav li ul.deth li a {font-weight:400;color:#888;height:36px;line-height:36px;font-size:1em;}
.lnb ul.nav li ul.deth li a:hover {background:#fff;color:#2c5c9d;}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color:none !important;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {background:rgba(255,255,255,0);}

.title-box {display:none; position:relative; width:100%; margin:0 auto; padding:30px 0 0; border-bottom:1px solid #ddd;}
.title-box h3 {display:inline-block; padding:0 20px 10px 20px; font-size:1.6em; font-weight:600; border-bottom:3px solid #333; color:#333;}


.column-right {display:none !important}

/*   서브컨텐츠  */
/*.container .inner {position:relative; width:90%; margin:0 auto; padding:30px 0 0;}*/

/* 공통1시작 */
.s_con h2 { font-size:1.8em; font-family: 'Daeojamjil';}
.s_con > h2 > span {display:block; font-size:.55em; font-weight:500; color:#bbb; font-family: 'Pretendard'}

.add_stitle {margin:0 0 20px; font-size: 1.6em; font-weight:300; line-height: 1.4em; text-align: center; color:#333;}
.add_cont {font-size: 1em; font-weight: 200; line-height: 1.4em; text-align: center;word-break: keep-all;}

h3.type1 {display:inline-block; position:relative; font-size:1.5em; font-weight:600; margin-bottom:20px;}
h3.type1:after {display: block; position:absolute; left:0; top:-22px; width:15px; height:15px; clear: both; background:#3a62c0; content:''; z-index: 1}
h3.type1:before {display: block; position:absolute; left:18px; top:-22px; width:15px; height:15px; clear: both; background:#eee; content:''; z-index: 1}
h3.type1 p {position: relative; display: block; z-index: 3}

hr {display:block; width:100%; height:1px; margin:40px 0 60px; border:0; background: #ddd}

.bas p {margin-bottom: 10px; font-size: 1em; line-height: 1.2em; font-weight: 200; color: #333;}
.bas p > span {font-size:.8em; color:#999;}
.bas p.bas_img img {width:100%;}
/* 공통1끝 */

/* 회사소개 (about-인사말),(history-연혁) */
.about .area01 { }
.about .area01 > div {margin-top:50px;}
.about .area01 .h2 {position:relative; width:100%; margin:0 auto}
.about .area01 .h2 h2 {display:block; position:relative; font-size:1.5em; line-height:1.2em; font-family: 'Daeojamjil'; z-index: 3}
.about .area01 .h2 h2 span {background-color:rgba(193,206,230,.3)}
.about .area01 .h2:after {display:block; position:absolute; right:0; bottom:-30px; clear: both;  content:'FIRETEC119'; font-size:4em; font-weight:900; color:#eee; z-index: 0}
.about .area01 .flex_ {display: flex; position:relative; left:0; top:0; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap}
.about .area01 .flex_ > .img {display:block; width:100%; height:200px; margin-bottom:30px; overflow: hidden}
.about .area01 .flex_ > .img img {width:96%}
.about .area01 .flex_ > .text {position:relative; display:block; width:100%; padding-top:30px; line-height:1.3em; color:#333; word-break: keep-all;}
.about .area01 .flex_ > .text .fir {color:#111; font-weight: 500}
.about .area01 .flex_ > .text .fir > span {font-size:1.3em; background: #eee}
.about .area01 .flex_ > .text:after {display: block; position:absolute; left:0; top:0; width:35px; height:5px; background: #4057cd; border-radius:3px; clear: both; content: '';}
.about .area01 .flex_ > .text .ceo_sign {display:flex; position:relative; margin-top:20px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; text-align: right}
.about .area01 .flex_ > .text .ceo_sign img {width:30%; padding-left:15px}
.about .area02 {margin-top:70px}
.about .area02 h3 {display:block; position:relative; margin-bottom:40px; font-size:1.2em; line-height:1.2em; text-align:center;}

.bici { font-size: 1.3em; margin-bottom: 20px; font-weight: 600;}


/*     연혁      */
.history .txt_box {position:relative; width:100%; height:180px; background-attachment: fixed; background-image: url('/home/images/content/history_2020.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; text-align:center; color:#fff; font-size:2.5em; border-radius:40px 0 40px 0; overflow: hidden; font-weight:600}
.history .txt_box2 {background-image: url('/home/images/content/history_2010.jpg');}
.history .txt_box:before {display: block; content: ''; clear: both; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0;}
.history ._txt {display:flex; position: relative; align-items:center;justify-content:center;height:100%;flex-direction: column; gap: 5px; font-family: 'Isamanru'; z-index: 2;}
.history ._txt p {font-size: .5em; font-weight: 300;}
.history .list_box {padding-left: 20px;}
.history .list_box ul:first-child {padding-top: 80px;}
.history ul {display:block; width: 100%; padding: 20px 0 50px 40px; border-left: 1px solid #e5e5e5;}
.history ul li:first-child {vertical-align: top; width: 100%; font-size:2em; font-weight: 600;	color: #666; margin-bottom: 15px; position: relative; transition: all 0.7s;}
.history ul li:first-child:before {display: block; content: ''; clear: both; width: 35px; height: 2px; background: #e5e5e5; position: absolute; left: -40px; top: 50%; transform: translateY(-50%);}
.history ul li:first-child:after {display: block; content: ''; clear: both; width: 10px; height: 10px; background: #666; border-radius: 50%; position: absolute; left: -45px; top: 50%; transform: translateY(-50%);}
#history-section.scroll .history .list_box ul li:first-child {background: #157ddd;}
#history-section.scroll .history .list_box ul li:first-child:before {background: #157ddd;}
#history-section.scroll .history .list_box ul li:first-child:after {background: #157ddd;}
.history .list_box ul li:first-child { font-family:'Isamanru';}
.history .list_box ul li:first-child.active {color: #4057cd;}
.history ul li:last-child.active i {color: #333;}
.history ul li:last-child.active i > span {color: #333;}
.history ul li:last-child.active b {color: #333; background: #eee}
.history .list_box ul li:first-child:before.active {background: #3898c5;}
.history .list_box ul li:first-child:after.active {background: #3898c5;}
.history ul li {display:block;}
.history ul li:last-child {line-height: 24px; vertical-align: top;}
.history ul li:last-child p {display:table; font-size:1.1em; margin-bottom:15px; margin-top:12px;}
.history ul li:last-child i {transition: all 0.7s; display:table-cell; width:60px; color: #666; font-size:1.1em; font-weight:600; font-style:normal; vertical-align:top; transform: translateY(2px);}
.history ul li:last-child i > span {display: block;}
.history ul li:last-child span {display:block; padding-top:2px; font-size:.9em; line-height:1.3em; color:#777;}
.history ul li p > span {padding-left:10px; background:url('/home/images/content/list-dot.png')no-repeat left 10px}


/* 오시는길 */
.location {position:relative; display:block; width:100%;}
.location .map_frame {display:block; position:relative; left:0; width:100%; height:300px;}
.location .address {font-size:1em; font-style:normal; color:#999; line-height:1.3em; text-align:left; padding:20px 10px;}
.location .address span {display:block; font-size:1.3em; line-height:1.3em; color:#333; margin-bottom:15px;}
.location .contact {display:block; position:relative; justify-content: flex-start; align-items: flex-start; gap:0; flex-wrap: nowrap; border-top:1px solid #ddd; margin-top:20px; padding:15px 0 0;}
.location .contact > div {display:block; position:relative; width:100%; margin-bottom:30px; font-size:1.1em; align-items: center}
/*.location .contact p > i {display:flex; align-items: center; width:30px; height:30px;}
.location .contact p > i > img {width:100%;}*/
.location .contact div > p {display:block; margin:10px 0; background: #687bd3; border-radius: 20px; text-align: center; color: #fff; padding: 8px 0; font-size:.8em; font-style: normal}
.location .contact div > span a {display:block; color:#333; margin-bottom:8px; font-size:.85em; text-align: center}
.location .contact div > span > a > i {font-size:.9em; margin-right:5px; color:#3a4eab; background: #eee; font-style: normal}
.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_controllers, .root_daum_roughmap .cont, .wrap_btn_zoom {display:none !important}


/* 사업실적 */
.patent > h2 {display:block; margin-bottom:60px;}
.patent .area01 {display:block; position:relative; margin-bottom:100px;}
.patent .area01:last-child {margin-bottom:0;}
.patent .area01:after {display: block; position:absolute; left:-10px; top:-5px; width:25px; height:25px; clear: both; background:#3a62c0; content:''; z-index: 1}
.patent .area01:before {display: block; position:absolute; left:80px; top:22px; width:25px; height:25px; clear: both; background:#eee; content:''; z-index: 2}
.patent .area01 > h3 {display:block; position:relative; margin-bottom:30px; font-size:2.4em; font-family: 'Daeojamjil'; z-index: 3}			
.patent .area01 .photo-li {display:flex; justify-content:center; align-items: flex-start; gap: 0; flex-wrap: wrap}
.patent .area01 .photo-li li {position:relative; width:100%; height:250px; margin-bottom:10px; border-radius:20px; overflow: hidden}
.patent .area01 .photo-li li img {width:100%; height:100%}
.patent .area01 .photo-li li > em {diplay:block; position:absolute; right:15px; bottom:15px; padding:10px 20px; border-radius:30px; background:rgba(0,0,0,.7); font-size:1em; color:#fff; font-style: normal}
.patent .area01 .text-li {margin-top:35px;}
.patent .area01 .text-li span {display:inline-block; margin-right:15px; margin-bottom:10px; padding-left:10px; line-height: 1.3em; color:#555; font-size:1em; background:url('/home/images/content/list-dot.png')no-repeat left 10px}
.patent .area01 .text-li span.point {font-size: 1.2em; font-weight:500; background:url('/home/images/content/list-dot.png')no-repeat left 15px;color: #0277b4;}


/* 사업분야 */
.container article.pd_n {padding-bottom:0}
.business div.sub.bg1 {position:relative; min-height:320px}
.business div.sub.bg1:after {display:block; position:absolute; left:-50%; top:-50px; width:200%; height:320px; background:url('/home/images/content/agency_bg.jpg')no-repeat fixed; background-size:cover; content: ''; clear: both; z-index: 1}
.business div.sub.bg2:after {display:block; position:absolute; left:-50%; top:0; width:200%; height:500px; background:url('/home/images/content/agency_bg2.jpg')no-repeat fixed right top; background-size:cover;  content: ''; clear: both; z-index: 1}
.business div.sub.bg3:after {display:block; position:absolute; left:-50%; top:0; width:200%; height:290px; background:url('/home/images/content/culs_bg.jpg')no-repeat fixed right top; background-size:cover;  content: ''; clear: both; z-index: 1}
.business {position:relative; z-index: 2}
.business h2 {position:relative; display:block; font-size:2.1em; font-family:'Daeojamjil'; text-align:center; z-index: 3}
.business .add_title {position:relative; margin-top:20px; text-align: center; z-index: 3}
.business .add_title > p {display: inline-block; margin-top: 20px; margin-bottom:40px; padding: 15px; font-size: 1em; font-weight: 300; text-align: center; color: #fff; background: #10224d; border-radius: 50px;}
.business .add_title > span {display:block; font-size:1.15em; color:#333}
.bg-motion-text {font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(120deg, #0b3c5d, #1e90ff, #e6f6ff, #1e90ff, #0b3c5d);
  background-size: 300% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: fireTechMove 2.8s ease-out forwards;}
.area01 {position:relative;}
.area01.tx {margin:50px 0 !important;}
.area01 > h3 {display:block; margin:0 0 40px; font-size:1.6em; font-family: 'Daeojamjil'; text-align: center}
.business .area02 h3 {display:inline-block; position:relative; font-size:1.5em; font-weight:600; margin-bottom:20px;}
.business .area02 h3:after {display: block; position:absolute; left:0; top:-22px; width:15px; height:15px; clear: both; background:#3a62c0; content:''; z-index: 1}
.business .area02 h3:before {display: block; position:absolute; left:18px; top:-22px; width:15px; height:15px; clear: both; background:#eee; content:''; z-index: 1}
.business .area02 h3 p {position: relative; display: block; z-index: 3}
.area02 > hr {display:block; width:100%; height:1px; margin:30px 0; background: none; border:none}
.business .area02 > p.bl {margin-bottom:10px; font-size:1em; line-height:1.2em ; font-weight: 200; color:#333; padding-left:10px; background: url(/home/images/content/list-dot.png) no-repeat left 7px;}
.business .area02 > .cont {display:flex; justify-content: flex-start; gap:20px; position:relative; width:100%; margin-top:80px;  flex-wrap:wrap}
.business .area02 > .cont > div {display:block; position:relative; left:0; width:100%; margin-bottom:30px;}
.business .area02 > .cont .level {position:absolute; left:25px; top:-25px; width:80px; height:80px; line-height:80px; color:#fff; text-align: center; font-size:1.5em; font-weight: 600; z-index: 3}
.business .area02 > .cont .img {display:block; height:200px; overflow: hidden}
.business .area02 > .cont .img img {width:100%;}
.business .area02 > .cont .list {position:relative; left:0; width:100%; min-height:auto;  padding:20px;  border:1px solid #ddd;}
.business .area02 > .cont .list > p {display:inline-block; margin-bottom:15px; padding:10px; font-size:.85em; color:#fff; background:#333}
.business .area02 > .cont .list ul {display:block; margin-bottom:30px;}
.business .area02 > .cont .list ul:last-child {margin-bottom:0;}
.business .area02 > .cont .list ul h4 {font-size:1em; margin-bottom:8px; font-weight: 600; color:#333;}
.business .area02 > .cont .list ul li {padding-left:10px; background:url('/home/images/content/list-dot.png')no-repeat left 6px; font-size:.9em; margin:2px 0; color:#555;}
.business .area03 {display:block; position:relative; padding:60px 0 10px;}
.business .area03 > h3 {display:block; position:relative; margin:0 0 40px; font-size:1.8em; color:#fff; text-align: center; font-weight:600; z-index: 3}
.business .area03 > h3 span {display:block;}
.business .area03 > .cont {display:flex; position:relative; justify-content: flex-start; gap:20px; flex-wrap: wrap; z-index: 3}
.business .area03 > .cont > div {display:flex; width:98%; justify-content: flex-start; align-items: center; color:#fff; font-weight:100;}
.business .area03 > .cont > div > p {display:block; width:50px; margin-bottom:0; font-size:1.4em; color:#0C7FD7; font-weight: 600}
.business .area03 > .cont > div > span {display:block; width:calc(100% - 50px);}
.business .area04 {display:block; position:relative; margin-top:50px; }
.business .area04 > h4 {display:block; position:relative; font-size:1.5em; padding-left:20px; padding-bottom:20px; font-weight: 700; color:#333;}
.business .area04 > h4:after {display:block; position:absolute; left:0; top:5px; width:5px; height:20px; clear: both; content:''; background: #555}
.business .area05 h3 p {position: relative; display: block; z-index: 3}
.business .area05 {display:block; position:relative; margin-top:50px; }
.business .area05 .cont {position:relative; display:block; width:100%;}
.business .area05 .cont > div {width:100%; margin-bottom:25px;}
.business .area05 .cont > div > .img {width:100%; height:180px; overflow: hidden; background: #f7f7f7}
.business .area05 .cont > div > .img img {height:100%;}
.business .area05 .cont > div > .text {margin-top:10px; font-size:1em; text-align: center}
.business .area06 h3 {display:inline-block; position:relative; font-size:1.5em; font-weight:600; margin-bottom:20px;}
.business .area06 h3:after {display: block; position:absolute; left:0; top:-22px; width:15px; height:15px; clear: both; background:#3a62c0; content:''; z-index: 1}
.business .area06 h3:before {display: block; position:absolute; left:18px; top:-22px; width:15px; height:15px; clear: both; background:#eee; content:''; z-index: 1}
.business .area06 div {margin-top:10px}
.business .area06 div ul li {margin-bottom: 20px;}
.business .area06 div ul li p {display: inline-block; padding-left: 15px; background: url(/home/images/content/list-dot.png) no-repeat left 10px; font-weight:600; font-size: 1.05em; line-height: 1.3em; color: #1843a7; margin-bottom: 10px;}
.business .area06 div ul li span {display: block; padding-left:15px; font-size:.95em; color: #222; font-weight: 200; line-height: 1.4em;}
.business .area07 {position:relative; width:100%; height:290px; margin-top: 30px; margin-bottom: 80px;}
.business .area07 .cont {position:relative; display: flex; justify-content:flex-start; align-items:center; flex-wrap: wrap; padding:30px 0 0; z-index: 3}
.business .area07 .cont > div {width:100%; height:40px; line-height:40px; margin: 3px 0; padding:0; text-align: left}
.business .area07 .cont > div i {display:inline-block; margin:0; width:35px; height:35px;}
.business .area07 .cont > div i img {width:100%;}
.business .area07 .cont > div p {display:inline-block; padding-left:10px; font-size:.95em; color:#fff; font-weight: 200}
.business .area07 .cont > div p span {display:inline-block}

.cont_img_in {margin-top:30px;}

.door01 {position:relative; margin:30px auto 0;}
.door01 ul {display:block}
.door01 ul li {width:96%; margin:0 auto; text-align: center; overflow: hidden}
.door01 ul li img {height:100%;}
.door02 {position:relative; margin:30px auto 0;}
.door02 ul {display:flex; justify-content: center; align-items: center; gap:15px; flex-wrap: wrap}
.door02 ul li {width:47.8%; margin:0 auto; padding:10px; text-align: center; overflow: hidden; border:1px solid #eee}
.door02 ul li img {width:100%;}
.door02 ul li span {display:block; font-size:.9em; font-weight:600; color:#333;}



/*business 리스트*/
div.li_list_st1 {border-top:1px solid #333;}
div.li_list_st1 > ul {display:block; position:relative; padding:30px 0; border-bottom:1px solid #ddd; }
div.li_list_st1 > ul li {font-size:1.05em;}
div.li_list_st1 > ul li.tt {width:100%; margin-bottom:10px; padding-left:10px; font-size:1.15em; font-weight: 600; }
div.li_list_st1 > ul li.ct {width:100%; padding-right:10px; font-size:1em; font-weight: 300; color:#222;}
div.li_list_st1 > ul li.ct p {margin-bottom:5px; padding-left:10px; line-height:1.3em; background:url('/home/images/content/list-dot2.png')no-repeat left 10px; }
div.li_list_st1 > ul li.ct p:last-child {margin:0}
div.li_list_st1 > ul li.ct p b {color:#000;}
div.li_list_st1 > ul li.ct p span {display:block; font-size:.9em;}
div.li_list_st1 > ul li.ct p.note {color:#d31313;}

div.li_list_st2 {width:100%; display:flex; justify-content: center; align-items: flex-start; gap:25px; margin-top:15px; flex-wrap: wrap;}
div.li_list_st2 > div {width:100%; padding:20px 0; border:1px solid #ddd; border-top:3px solid #384297;}
div.li_list_st2 > div p.title {width:100%; font-size:1.4em; text-align: center; font-weight: 600}
div.li_list_st2 > div p.img {width:100%; height:200px; margin:15px 0; background:#eee; overflow:hidden}
div.li_list_st2 > div p.img img {width:100%;}
div.li_list_st2 > div p.text {padding:0 30px;}
div.li_list_st2 > div p.text span {display:block; padding-left:10px; margin:6px 0; font-size:1.1em; background:url('/home/images/content/list-dot.png')no-repeat left 10px; }
div.li_list_st2 > div p.text span > em {display:block; font-size:.8em; font-weight: 200; font-style: normal; color:#454545;}
div.li_list_st2 > div p.text span > em:first-child {margin-top:5px;}


@keyframes bgMove {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
				
@keyframes fireTechMove {
  0% {background-position: 0% 50%;}
  100% {background-position: 100% 50%;}
}


/* 퀵메뉴 */
.quickmenu {position:fixed !important; flex-wrap:nowrap !important; display:block; bottom:calc(167px + env(safe-area-inset-bottom)) !important; right:17px !important; transform:translateY(-50%); width:auto !important; z-index:999;}
.quick {width:100%;}
.quick-link {width:38px;height:38px;border-radius:50%;position:relative;}


/* 이용약관,개인정보보호정책 */
.scroll_text {max-height:800px; padding:0 30px 70px 0; overflow-y: auto; direction:ltr; scrollbar-color: #d4aa70 #e4e4e4; scrollbar-width: thin;}
.scroll_text h3 {margin-bottom:35px; font-size:1.2em; font-weight:400}
.scroll_text > div {margin-bottom:80px;}
.scroll_text .inner { margin-bottom:40px;}
.scroll_text .inner > h4 {margin-bottom:15px; font-size:1.0em;}
.scroll_text .inner > h4 > span {font-size:.8em; color:#999;}
.scroll_text .inner > div > p {margin-bottom:10px; line-height:1.4em; font-size:1em; color:#555; font-weight:300}
.scroll_text .inner > div > p > span {display:block; padding-left:8px; font-size:.9em; color:#777;}
.scroll_text .inner > div > p > span:first-child {margin-top:8px;}
.scroll_text .inner > div > p > span > em {display:block; padding-left:15px; font-size:.9em; font-style:normal}
.scroll_text .inner > div > p > span > em:first-child {margin-top:5px;}
.scroll_text .inner > div > p > span > span {display:block; padding-left:10px;}
.scroll_text::-webkit-scrollbar {width:5px;}
.scroll_text::-webkit-scrollbar-track {background-color: #e4e4e4; border-radius: 100px;}
.scroll_text::-webkit-scrollbar-thumb {border-radius: 100px; border: 2px solid rgba(0, 0, 0, 0.18); border-left: 0; border-right: 0; background-color: #19988b;}
.scroll_text .inner > p {width:100%; padding:30px; line-height:1.6em; font-size:1em; border:1px solid #ddd; background:#f7f7f7;}/* 이메일수집거부 */
.scroll_text .inner > span {display:block; width:100%; padding:10px; font-size:.9em; color:#555;}
.scroll_text .inner > div > table {width:100%; border-top:1px solid #aaa; border-right:1px solid #ddd;}
.scroll_text .inner > div > table tr.th td {text-align:center; background:#f7f7f7;}
.scroll_text .inner > div > table td {padding:8px; text-align:left; border-left:1px solid #ddd; border-bottom:1px solid #ddd; font-size:.8em;}


/* @keyframes motion {
    0% {transform:translateY(0);}
    50% {transform:translateY(-10px);}
    100% {transform:translateY(0);}
} */

#quick-box, #menu-btn {position:fixed;left:-9999px;}

.quick-1 {position:absolute;top:0px;left:50%;background:#2c5c9d;text-align:center;width:0;height:40px;border-radius:50%;transform:scale(0) translate(-50%,0);transform-origin:top;transition:all .3s;}
.quick-2 {top:0px;right:0;background:#fdc23d;}
.quick-3 {top:0px;right:0;background:#0ea527;}
.quick-4 {top:0px;right:0;background:#e02191;}
.quick-1 > a {position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);width:100%; font-size:.8em; color:#fff;}
.quick-1 > a img {width:23px;}
.quick-2 > a img {width:31px;}

.quick-btn {display:block;width:38px;height:38px;line-height:35px;border-radius:44%; box-shadow:0px 0px 6px 1px rgba(0,0,0,0.2); cursor:pointer;background:#a5c9e1;opacity:0.8;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5em;width:100%;text-align:center;}
.quick-btn:hover {background:#a5c9e1; opacity:1;}

#quick-box:checked ~ .quick-1 {left:0%;top:-45px;transform:scale(1);width:38px; height:38px;}
#quick-box:checked ~ .quick-2 {top:-90px;}
#quick-box:checked ~ .quick-3 {top:-135px;}
#quick-box:checked ~ .quick-4 {top:-180px;}


footer .inner {position:relative; width:100%; height:100%; margin:0 auto;}
footer .inner .logo {font-size:1.1em; }
footer .inner .util {padding:10px 0; border-bottom:1px solid #555;}
footer .inner .util a {display:inline-block; margin-right:30px; font-size:.9em; font-weight:100; color:#bbb;}
footer .inner .info {padding:10px 0; font-size:.9em; font-weight:100; color:#bbb;}
footer .inner .info p {display:inline-block; margin-right:30px; }
footer .inner .info address {font-style:normal;}
footer .inner .copyright {font-size:.95em; font-weight:200; color:#777;}


/* toast 설정 */
.toast_style {display:block; position:fixed; bottom:-100px; width:100%; height:auto; padding:15px 0; background:rgba(0,0,0,.7); z-index: 11}
.toast_a, .toast_p {display:block; height:30px; padding:0 25px; text-align: center; font-size:.9em; line-height:30px; color:#fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.toast_inner {display:flex; justify-content:center; flex-wrap:nowrap; width:auto;}
.toast_inner .toast_button {width:80px; height:30px; margin:0 5px; line-height:28px; text-align:center; border:1px solid #FFC726; border-radius:15px; font-size:.8em; color:#FFC726}

@media (max-width: 768px) {
  .check-wrap .img { width: 100%; margin: 0; height: auto !important;}
  .check-wrap .img img { display: block; width: 100%; height: auto !important; }
}



@media screen and (min-width: 640px) {
	
	.sub_name {font-size: 1.2em;}
	
	.about .area01 .h2 h2 {font-size:2.1em;}
	.about .area01 .h2:after {bottom:-50px; font-size:6em;}
	.about .text h3 {font-size:2.5em; text-align:left; font-style:normal; margin-bottom: 5px;}
	.about .area01 .flex_ > .text {font-size:1.15em; line-height: 1.3em; text-align:left; margin-bottom: 20px}
	.about .area01 .flex_ > .text > span {font-size:1.2em; text-align:left; margin-top:40px;}	
	.about .a_box02 .wrap_ .count-box ._count > div {width:25%;}

	.location .address {font-size:.9em;}
	
	.business h2 {font-size:2.8em;}
	
	.business .area05 .cont {display:flex; width:100%; justify-content: center; align-items:flex-start; flex-wrap: wrap; gap:15px}
	.business .area05 .cont > div {width:48.8%; margin-bottom:20px;}
	/*.business .area05 .cont > div > .img {height:200px;}*/
	.business .area05 .cont > div > .img {width:100%; height:180px; overflow: hidden; background: #f7f7f7}

}	

@media screen and (min-width: 760px) {
	
	/*.container .inner {width:100%;}*/

	.about .area01 h2 {margin-bottom:50px; font-size:2em; line-height:1.2em;}
	.business .area03 > h3 span {display:inline-block;}
}

@media screen and (min-width: 920px) {
	
	header > h1 {left:3%; margin-left:0; height:90px;/* line-height:70px;*/}
	.container article {width:96%; padding:110px 0;}
	.container article.tt_top {padding:70px 0 110px;}
	
	.top-box {height:360px;}
	.sub_name {font-size: 1.9em}
	.sub_nav .list {color:#aaa;}
		
	.path-box {display:none;}
	
	#lnb { display:flex; align-items:center; justify-content: center; position:relative; width:100%; height:45px; background:#f7f7f7; border-bottom:1px solid #d4d4d4;}
	#lnb > ul {width:1100px;}
	#lnb > ul > li {float:left; position:relative; border-left:1px solid #ddd;}
	#lnb > ul > li:last-child {border-right:1px solid #ddd}
	#lnb > ul > li > a {display:block; width:auto; height:45px; border-bottom:1px solid #ddd;  line-height:45px; padding:0 25px; text-align:left; color:#999;}
	#lnb > ul > li:last-child > a {color:#333; background: #fff; font-weight: 600; border-bottom:2px solid #1c77c4;}
	#lnb > ul > li > ul {position:absolute; left:-1px; top:44px; padding:25px 15px 15px; border:1px solid #ddd; background:#fff; opacity:0; visibility:hidden; z-index:19 }
	#lnb > ul > li > ul > li {width:180px; height:35px;}
	#lnb > ul > li > ul > li > a {display:block; width:180px; height:35px; line-height:18px; padding:0 10px; color:#aaa;}
	#lnb > ul > li > ul > li > a:hover {color:#222}
	#lnb > ul > li:hover > a {color:#222; background:#fff;}
	#lnb > ul > li:hover .dropdown-toggle {opacity: 1; visibility: visible}
	
	.title-box {width:1200px; margin:0 auto; padding:80px 0 0;}
	.title-box h3 {font-size:2.5em;}
	
	
	/* 공통1시작 */
	.s_con h2 { font-size:3em;}
	.s_con > h2 > span {display: inline-block; font-size:.55em; }
	
	.add_stitle {font-size: 1.6em; }
	.add_cont {font-size:1.2em;}
	
	h3.type1 {font-size:2em; margin-top:30px; margin-bottom:20px;}
	h3.type1:after {top:-32px; width:20px; height:20px;}
	h3.type1:before {left:25px; top:-32px; width:20px; height:20px;}	
	
	hr {margin:80px 0;}
	
	.bas p {font-size: 1.2em; line-height: 1.4em;}
	.bas p.bas_img img {width:fit-content;}
	/* 공통1끝 */
	
	.history ul {display: table; padding: 50px 0 50px 50px;}
	.history ul li {/*display: table-cell;*/font-size:1.1em;}
	.history ul li:first-child {width:180px; font-size:2.3em; }
	.history ul li p:first-child {margin-top:5px;}
	.history ul li:first-child:before {width: 45px; left: -50px;}
	.history ul li:first-child:after {left: -55px;}
	.history ul li:last-child {line-height: 30px; vertical-align: top;}
	.history ul li:last-child span {display:block; padding:0; color:#555; font-size:1em; line-height:1.8em;}
	.history ul li p > span {padding-left:12px !important; background:url('/home/images/content/list-dot.png')no-repeat left 15px}
	.history ._txt {font-size:1.4em;}
	.history ._txt p {font-size: .3em;}	
	
	.location .map_frame {height:450px;}
	.location .address {margin-top:25px; font-size:1.1em; line-height:1.4em; }
	.location .address span {font-size:1.3em; line-height:1.3em;}
	.location .contact {display:flex; gap:30px;}
	.location .contact > div {display:flex; width:33%; font-size:1.1em; align-items: flex-start}
	.location .contact > div p {width:100px; margin:0;}
	.location .contact div > span {padding-left:20px;}
	.location .contact div > span a {text-align: left}
	.location .contact div:nth-child(2) > span a {padding-top:6px}
  .root_daum_roughmap .wrap_map {height:450px !important;}

	.about .area01 .flex_ > .img {width:50%; height:auto; margin-bottom:30px; overflow:auto}
	.about .area01 .flex_ > .text {width:50%; padding:80px 0 0 30px;}
	.about .area01 .flex_ > .text:after {left:30px; top:50px; width:50px;}
	.about .area02 {margin-top:90px;}
	.about .area02 h3 {margin-bottom:70px; font-size:1.6em;}
	.about .area01 .flex_ > .text > div {margin-top:20px}

	.catalog {margin-top: 80px;}
	.catalog .ca_title {margin-bottom:30px;}
	.catalog .ca_title h2 {font-size:2em; font-weight:600;}
	.catalog .ca_title span {padding:9px 20px;}
	.catalog .ca_title span a {font-size:.9em;}
	.catalog .ca_title span a > img {width:12px; margin:3px 0 0 10px;}

	.bici {font-size: 2em; margin-bottom: 30px;}
	
	.patent > h2 {margin-bottom:120px;}
	.patent .area01 {margin-bottom:100px;}
	.patent .area01:before {left:110px; top:32px;}
	.patent .area01 > h3 {margin-bottom:30px; font-size:3.2em;}			
	.patent .area01 .photo-li {flex-wrap:nowrap; gap: 15px}
	.patent .area01 .photo-li li {width:50%; height:300px;}
	.patent .area01 .photo-li li > em {right:15px; bottom:15px; padding:10px 20px; font-size:1em;}
	.patent .area01 .text-li {margin-top:35px;}
	.patent .area01 .text-li span {display:inline-block; margin-right:15px; margin-bottom:10px; padding-left:10px; line-height: 1.5em; color:#555; font-size:1.15em; background:url('/home/images/content/list-dot.png')no-repeat left 10px}
	.patent .area01 .text-li span.point {font-size: 1.4em;}
	
	
	/* 사업분야 */
	.business div.sub.bg1:after {top: -110px; height:670px;}
	.business div.sub.bg2:after {height:640px}
	.business div.sub.bg3:after {height:200px;}
	.business h2 {font-size:6em;}
	.business .add_title {margin-top:20px; text-align: center}
	.business .add_title > p {margin: 80px 0 65px; padding:15px 35px; text-align:center;  font-size:1.8em;}
	.business .add_title > span {font-size:2.2em;}
	.area01 {margin:110px 0;}
	.area01.ty {margin:0 0 110px 0 !important;}
	.area01.tx {margin:70px 0 70px 0 !important;}
	.area01 > h3 {margin:0 0 60px; font-size:3em;}
	.business .area02 h3 {font-size:2em; margin-top:30px; margin-bottom:20px;}
	.business .area02 h3:after {top:-32px; width:20px; height:20px;}
	.business .area02 h3:before {left:25px; top:-32px; width:20px; height:20px;}
	.business .area02 > p.bl {margin-bottom:10px; font-size:1.2em; line-height:1.4em ; padding-left:15px; background: url(/home/images/content/list-dot.png) no-repeat left 10px;}
	.business .area02 > hr {margin:60px 0;}
	.business .area02 > .cont {margin-top:100px;}
	.business .area02 > .cont > div {width:48%; margin-bottom:30px;}
	.business .area02 > .cont .img {height:300px;}
	.business .area02 > .cont .list {min-height:400px;  padding:40px;}
	.business .area02 > .cont .list:nth-child(3), .business .area02 > .cont .list:nth-child(4) {min-height:530px;}
	.business .area02 > .cont .list ul li {background:url('/home/images/content/list-dot.png')no-repeat left 10px; font-size:1em;}
	.business .area03 {min-height:320px; padding: 130px 0px 80px}
	.business .area03 > h3 {font-size:2.5em; margin-bottom:60px;}
	.business .area03 > h3 span {display:inline-block;}
	.business .area03 > .cont > div {width:48%; border:1px solid rgba(255,255,255,0.2); padding:20px; border-radius:10px; line-height: 1.3em;}	
	.business .area04 {margin-top:100px;}
	.business .area04 > h4 {font-size:2em;}
	.business .area04 > h4:after {top:5px; width:5px; height:27px;}
	.business .area05 {margin:100px 0 50px; }
	.business .area05 .cont > div {width:23.8%;}
	.business .area05 .cont.thr > div {width:32%;}
	.business .area06 h3 {font-size:2em; margin-top:30px; margin-bottom:20px;}
	.business .area06 h3:after {top:-32px; width:20px; height:20px;}
	.business .area06 h3:before {left:25px; top:-32px; width:20px; height:20px;}
	.business .area06 div ul li p {font-size: 1.3em; margin-bottom: 10px;}
	.business .area06 div ul li span {font-size: 1.1em;line-height: 1.3em;}
	.business .area07 {height:200px; margin-top: 0;}
	.business .area07 .cont {width:100%; padding:30px 0 0; justify-content: center; align-items: flex-start; flex-wrap: nowrap; z-index: 3}
	.business .area07 .cont > div {width:20%; height:auto; line-height:normal; padding:20px 0; margin:0; text-align: center}
	.business .area07 .cont > div i {display:block; margin:0 auto 20px; width:50px; height:50px;}
	.business .area07 .cont > div p {display:block; padding-left:0; font-size:1em;}
	.business .area07 .cont > div p span {display:block;}
	
	.cont_img_in {margin-top:0;}
	
	.door01, door02 {margin:50px auto 0;}
	.door01 ul {display:flex; justify-content: center; align-items: center; gap:15px; flex-wrap: wrap}
	.door01 ul li, .door02 ul li {width:32%;}
	.door02 ul li:nth-child(4), .door02 ul li:nth-child(5) {width:48.8%;}
	.door02 ul li img {width:60%;} 
	.door02 ul li span {font-size:1.1em;}
	
	
	/*business 리스트*/
	div.li_list_st1 > ul {display:flex; ustify-content: flex-start; align-items: flex-start; padding:30px 0; }	
  div.li_list_st1 > ul li.tt {width:200px; margin:0; padding-left:20px; font-size:1.15em;}	
	div.li_list_st1 > ul li.ct {width:calc(100% - 200px); padding-right:20px; }
	
	div.li_list_st2 {flex-wrap:nowrap;}
	div.li_list_st2 > div {width:33%; padding:20px 0;}
	div.li_list_st2 > div p.text {min-height:120px;}



	/* 퀵메뉴 */
	.quickmenu {position:fixed !important; flex-wrap:nowrap !important; display:block; bottom:calc(143px + env(safe-area-inset-bottom)) !important; right:24px !important; transform:translateY(-50%); width:auto !important; z-index:999;}
	.quick-link {width:60px;height:60px;border-radius:42%;position:relative;}

	.quick-1 > a {position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);width:100%; font-size:1em; color:#fff;}
	.quick-1 > a img {width:35px;}
	.quick-2 > a img {width:45px;}

	.quick-btn {display:block; width:60px; height:60px; line-height:60px; border-radius:42%; cursor:pointer; background:#a5c9e1; opacity:0.8; color:#fff; position:absolute; top:50%; left:50% ;transform:translate(-50%,-50%); font-size:2em; /*width:100%;*/ text-align:center;}
	.quick-btn:hover {background:#a5c9e1; opacity:1;}

	#quick-box:checked ~ .quick-1 {left:0%;top:-70px;transform:scale(1);width:60px; height:60px; border-radius:42%;}
	#quick-box:checked ~ .quick-2 {top:-140px;}
	#quick-box:checked ~ .quick-3 {top:-210px;}
	#quick-box:checked ~ .quick-4 {top:-280px;}

	
	/* toast 설정 */
	.toast_style {display:flex; justify-content:center;}
	.toast_link, .toast_p {display:block; height:30px; margin-right:15px; text-align: center; font-size:.9em; line-height:30px; color:#fff;}
	.toast_button {width:auto; margin-left:8px; padding:0 15px; height:30px; line-height:30px; border:1px solid #FFC726; border-radius:15px; font-size:.8em; color:#FFC726}
	}	


@media screen and (min-width: 1024px) {	
	
	.top-box {height:530px;}
	.top-box .box_ .sub_nav {display:flex; justify-content:center; align-items: center; height:50px;}
	
	.about .area01 .h2 h2 {font-size:3em; line-height:1.2em;}
	.about .area01 .h2:after {bottom:-50px; font-size:8em;}	
	
	.business .area03 > .cont {flex-wrap: nowrap;}
	.business .area03 > .cont > div {width:18%; display:block; align-items:center;padding: 40px 25px;}
	.business .area03 > .cont > div > p {width:98%; margin-bottom:15px; font-size:1.8em;}
	.business .area03 > .cont > div > span {width:98%;}
	.business .area03.nwap {padding: 110px 0px 70px;}
	.business .area03.nwap > .cont {flex-wrap: wrap;}
	.business .area03.nwap > .cont > div {width:100%; display:flex; padding:20px 30px;}
	.business .area03.nwap > .cont > div > p {width:50px; margin-bottom:0; font-size:1.4em;}
}


@media screen and (min-width: 1280px) {	
	
	.top-box .box_ .sub_nav {font-size:1.2em;}
	
	
	
/*	.container .inner {width:1200px; margin:0 auto;}*/
	.container article {width:1140px;}
	.container article.tt_top {padding:110px 0;}
	
	.container article > div {}
	.container article > div > div.board {}
	
	.history .txt_box {height: 300px; font-size: 3em; background-size: cover;}
	
	.patent .area01 .photo-li li {height:360px;}	
	
	.business .area05 .cont.thr > div {width:32.3%;}

	.top-box .box_ .sub_title_box_ {top:45%; font-size:2.4em; font-weight: 600}
	.sub_title_box_ {width: 1200px;}

	footer .inner {width:1200px;}
}


@media screen and (min-width: 1440px) {	
	
	header > h1 {left:7%;}
	
	.about .area01 > div {margin-top:80px}
	.about .area01 .h2:after {bottom:-80px; font-size:10em;}
	.about .area01 .flex_ p.text {font-size:1.4em}
	
}


footer {position:relative; width:100%;}
.inner_box {position:relative; top:0; width:100%; padding:30px 0; background:#282e38; text-align:center}
/*.footer_logo {position: absolute;left: 0;top: 40px;}*/
.inner_box .util {position:relative; width:1020px; margin:0 auto; padding:0 0 10px; border-bottom:1px solid #424242; text-align:center}
.inner_box .util a {font-size:.8em; color:#777; margin:0 10px;}
.inner_box .copyright {position:relative; width:1020px; margin:0 auto; padding:10px 0 0; border-top:1px solid #222; font-size:.75em; color:#555;}


/* Scroll Animation (sa, 스크롤 애니메이션)
.sa {
	opacity: 0;
	transition: all .8s ease;
}

/* 아래에서 위로 페이드 인 */
/*.sa-up {
	transform: translate(0, 100px);
}*/
/* 위에서 아래로 페이드 인 */
/*.sa-down {
	transform: translate(0, -100px);
}*/
/* 왼쪽에서 오른쪽으로 페이드 인 */
/*.sa-right {
	transform: translate(-100px, 0);
}*/
/* 오른쪽에서 왼쪽으로 페이드 인 */
/*.sa-left {
	transform: translate(100px, 0);
}*/
/* 왼쪽으로 회전하면서 페이드 인 */
/*.sa-rotateL {
	transform: rotate(180deg);
}*/
/* 오른쪽으로 회전하면서 페이드 인 */
/*.sa-rotateR {
	transform: rotate(-180deg);
}*/
/* 작아진 상태에서 커지면서 페이드 인 */
/*.sa-scaleUp {
	transform: scale(.5);
}*/
/* 커진 상태에서 작아지면서 페이드 인 */
/*.sa-scaleDown {
	transform: scale(1.5);
}*/

/*.sa.show {
	opacity: 1 !important;
	transform: none;
}*/