@charset "UTF-8";
@import url(font.css);
@import url(default.css);
@import url(layout.css);
@import url(slick.css);

/* product */
.prdCont {}
.prdCont .prdHead {}
.prdCont .prdSlide {margin-bottom:20px;}
.prdCont .prdInfo {margin:50px 0; padding-bottom:50px; border-bottom:1px solid #d9e6ec;}
.prdCont .prdInfo em {float:left; width:20%; font-size:25px; color:#0068b7;}
.prdCont .prdInfo span {float:left; width:80%; font-size:16px; color:#555; line-height:23px;}
.prdCont .prdSlide .slick-arrow {display:block; position:absolute; bottom:0; width:55px; height:55px; cursor:pointer; border:0; text-indent:-999em; overflow:hidden; background:0 0 no-repeat; z-index:10;}
.prdCont .prdSlide .slick-prev {right:58px; background-image:url(../images/btn_prev2.png);}
.prdCont .prdSlide .slick-next {right:2px; background-image:url(../images/btn_next2.png);}
.numlist {margin-bottom:30px;}
.numlist:after {content:''; clear:both; display:block;}
.numlist dt {font-size:27px; margin-bottom:20px;}
.numlist dd {font-size:16px; margin-bottom:10px;}
.numlist dd em {display:inline-block; vertical-align:middle; margin:-3px 3px 0 0; border-radius:50px; width:17px; height:17px; line-height:17px; font-size:10px; color:#fff; text-align:center; background:#111;}
.numlist dd.tit {position:relative; font-size:20px; color:#0068b7; padding-left:10px;}
.numlist dd.tit:before {content:''; position:absolute; top:5px; left:0; width:3px; height:16px; background:#0068b7;}
.numlist .cont {float:left; width:45%; margin:2%;}
.prdBox {padding:40px; background:#0068b7;}
.prdBox h5 {font-size:27px; color:#fff; margin-bottom:20px;}
.prdBox ul li {float:left; width:48%;}
.prdBox ul li:first-child {margin-right:4%;}
.prdBox2 {padding:20px 0; border-bottom:1px solid #dfdfdf;}
.prdBox2:after {content:''; clear:both; display:block;}
.prdBox2 ol {float:left; width:48%; padding:0 2%; padding-left:0; }
.prdBox2 ol li {font-size:15px; color:#868686; line-height:23px;}
.prdBox2 ol li em {display:inline-block; vertical-align:middle; margin:-3px 3px 0 0; border-radius:50px; width:17px; height:17px; line-height:17px; font-size:10px; color:#fff; text-align:center; background:#0068b7;}
.prdBox2 .cont {float:left; /* width:46%; padding:0 2%; */width:47%; padding:0 1%;}
.prdBox2 .cont em {display:inline-block; padding:3px 10px; border-radius:3px; color:#fff; background:#0068b7;}
.prdBox2 .cont .txt {font-size:15px; color:#868686; margin-top:5px;}
.prdBox3, .prdBox4 {padding-bottom:50px; border-bottom:1px solid #d9e6ec;}
.prdBox3 ul li {float:left;}
.prdBox3 ul li.left {width:30%;}
.prdBox3 ul li.right {width:68%;}
.prdBox3 ul li:first-child {margin-right:2%;}
.prdBox3 ul li img {width:100%;}
.prdBox4 ul {margin-top:30px;}
.prdBox4 ul li {float:left; width:31.5%; margin-right:2%; border:1px solid #dcdcdc;}
.prdBox4 ul li:last-child {margin-right:0;}
.txtbox {font-size:17px; text-align:center; color:#fff; padding:5px 0; background:#afafaf;}
.txtbox.type2 {background:#0068b7;}
.cap {display:block; margin-top:10px; position:relative; padding-left:10px;}
.cap:before {content:''; display:block; position:absolute; top:8px; left:0; width:5px; height:5px; border-radius:50px; background:#0068b7; }
.prdTypeA {margin-bottom:30px;}
.prdTypeA dt {margin-bottom:10px;}
.prdTypeA dt em {display:inline-block; font-size:17px; padding:5px 10px; border-radius:5px; color:#fff; background:#0068b7;}
.prdTypeA dd {position:relative; font-size:16px; color:#868686;}
.prdTypeA dd.cap {margin-top:5px;}
.prdTypeA dd.cap:before {top:10px;}
.prdTypeB dd em {display:inline-block; vertical-align:middle; margin:-3px 3px 0 0; border-radius:50px; width:17px; height:17px; line-height:17px; font-size:10px; color:#fff; text-align:center; background:#0068b7;}
.guide {border:1px solid #dbdbdb; padding:30px 50px; background:#fbfbfb;}
.guide:after {content:''; clear:both; display:block;}
.guide .tit {display:block; float:left; width:25%;}
.guide .tit span {display:inline-block; padding:15px 0 35px 105px; font-size:22px; line-height:26px; background:url(../images/ico_lock.png) 0 0 no-repeat;}
.guide .cont {display:block; float:left; width:75%; font-size:16px; color:#858585;line-height:23px;}
.prdList span {display:inline-block; vertical-align:top; width:23%; margin:0 2% 3% 0;}
.prdList span em {display:block; margin-top:10px; font-size:16px; color:#555;}
.prdList span:nth-child(4n) {margin-right:0;}

.mgt {margin-top:50px;}
.line {padding-bottom:30px; border-bottom:1px solid #d9e6ec;}

/* faq */
.faq {border-top:1px solid #111;}
.faq dt {padding:10px 15px; border-bottom:1px solid #d9e6ec;}
.faq dt a {display:block; position:relative; font-size:16px; padding:5px 5px 5px 20px; background:url(../images/arr_down2.png) 100% center no-repeat;}
.faq dt a:before {content:'Q'; display:block; position:absolute; top:7px; left:0; color:#0068b7; font-family:'Roboto', 'dotum', sans-serif;}
.faq dt.on a {background:url(../images/arr_up2.png) 100% center no-repeat;}
.faq dd {display:none; position:relative; padding:20px 30px 20px 43px; background:#f4f4f4; border-bottom:1px solid #e6e6e6;}
.faq dd:before {content:'A'; display:block; position:absolute; top:23px; left:27px; color:#666; font-weight:bold; font-family:'Roboto', 'dotum', sans-serif;}

.policy {}
.policy b {display:block; margin:10px 0 5px; font-size:17px;}
.policy p {margin-bottom:10px;}

/* ac story */
.acStory {}
.acStory .bgbox {text-align:center; background:#fffeec;}
.acStory .numlist dd.ac {margin-bottom:30px;}
.acStory .list {margin-bottom:30px;}

/* company */
.introduce {}
.introduce .pimg {float:left; width:45%; padding-right:5%;}
.introduce .pimg .sign {margin-top:15px; font-size:20px;}
.introduce .pimg .sign em {display:block; font-size:16px; color:#858585;}
.introduce .ceotxt {float:right; width:50%;}
.introduce .ceotxt .tit {    display: block;
    font-size: 35px;
    letter-spacing: -2px;
    line-height: 48px;
    padding: 63px 0 30px 0;
    background: url(../images/ico_db.png) 0 0 no-repeat;}
.introduce .ceotxt .tit:after {content:''; display:block; width:38px; height:2px; background:#c2c2c2; margin-top:20px;}
.introduce .ceotxt p {font-size:18px; color:#858585; margin-bottom:20px;}
.introduce2 {}
.introduce2 .tit {font-size:30px; letter-spacing:-1px; line-height:40px; /* font-family:'Noto Sans L', 'dotum', sans-serif; */font-family: 'Roboto', sans-serif;}
.introduce2 .subtxt {font-size:16px; color:#858585; margin-top:40px;}
.introduce2 .cycle {margin-top:100px;}
.introduce2 .cycle span {display:inline-block; width:225px; height:225px; border-radius:225px;}
.introduce2 .cycle span.icon1 {background:#0068b7; vertical-align:top;}
.introduce2 .cycle span.icon2 {background:#9fa0a0; margin:0 10%;}
.introduce2 .cycle span.icon3 {background:#f39800;}
.introduce2 .cycle span em {display:block; padding-top:90px; color:#fff; font-size:24px;}
.introduce3 {}
.introduce3 .tit {display:block; font-size:45px; letter-spacing:-2px; line-height:48px; margin-bottom:20px;}
.introduce3 p {font-size:16px; color:#858585; margin-bottom:30px;}
.introduce2 .cycle span.icon1 em {padding-top:100px;}

.vision {text-align:center; margin-bottom:40px;}
.vision .tit {display:block; font-size:45px; letter-spacing:-2px; line-height:48px; padding:60px 0 50px; background:url(../images/ico_db.png) center 0 no-repeat;}
.vision .subtxt {font-size:18px; color:#858585; margin-bottom:20px;}
.vision2 {padding-top:80px; background:url(../images/vision_bg1.jpg) center 0 no-repeat;}
.vision2 ul {}
.vision2 ul:after {content:''; clear:both; display:block;}
.vision2 li {float:left; width:28%;}
.vision2 li b {display:block; font-size:23px;}
.vision2 li p {padding-top:25px;}
.vision2 li p:first-child {padding-bottom:100px;}
.vision2 li p.cont1 {border-top:2px solid #f39800;}
.vision2 li p.cont2 {border-top:2px solid #0068b7;}
.vision2 li .txt {display:block; padding-top:25px; font-size:16px; line-height:22px; color:#858585;}
.vision2 li.center {width:375px; height:375px; padding:0; margin:0 3%; text-align:center; background:url(../images/vision_one.png) 0 0 no-repeat;}
.vision2 li.center b {font-size:30px; line-height:34px; padding-top:150px; color:#fff;}
.visionCont {margin-top:100px;}
.visionCont .subtxt {    font-size: 18px;
    color: #858585;
    margin-bottom: 10px;
    margin-top: 20px;}
.vision3 {}
.vision3 .clear {position:relative; margin-top:30px;}
.vision3 .clear:before {content:''; position:absolute; top:70px; left:0; width:100%; height:1px; /*background:#e1e1e1; */z-index:-1;}
.vision3 dl {float:left; width:32%; margin-right:2%; text-align:center;}
.vision3 dl:last-child {margin-right:0;}
.vision3 dl dt {padding-bottom:35px; font-size:30px; font-family:'Roboto', 'dotum', sans-serif;    display: none;
}
.vision3 dl dd {position:relative; /*padding-top:50px; */margin-top:-10px; /*background:url(../images/dot2.png) center 0 no-repeat;*/}
.vision3 dl dd:before {content:''; position:absolute; top:5px; left:50%; width:1px; height:50px; /*background:#e1e1e1;*/ z-index:-1;}
.vision3 dl dd .box {padding:10% 1%; background:#f4f4f4; border:1px solid #e1e1e1; height:240px;}
.vision3 dl dd .box .tit {display:block; font-size:20px; margin-bottom:10px;}
.vision3 dl dd .box span {display:block; font-size:15px; color:#858585; line-height:24px;}
.vision4 {}
.vision4 .cycleCont {position:relative; margin-top:40px; text-align:center; background:url(../images/vision_bg2.png) center center no-repeat; background-size:95%;}
.vision4 .cycleCont .dotline1 {position:absolute; top:133px; left:50%; margin-left:-29px;}
.vision4 .cycleCont .dotline2 {display:none; position:absolute; top:198px; left:50%; margin-left:-7px;}
.vision4 .cycleCont .cyc {display:inline-block; width:260px; height:260px; margin:0 18px; border-radius:500px; background:#fff;}
.vision4 .cycleCont .cyc b {display:block; margin-top:80px; font-size:25px;}
.vision4 .cycleCont .cyc em {display:block; margin-top:5px; font-size:20px;}
.vision4 .cycleCont .cyc1 {border:3px solid #0068b7; vertical-align:top;}
.vision4 .cycleCont .cyc2 {border:3px solid #f39800;}
.vision4 .cycleCont .cyc1 b, .vision4 .cycleCont .cyc1 em {color:#0068b7;}
.vision4 .cycleCont .cyc2 b, .vision4 .cycleCont .cyc2 em {color:#f39800;}

.history {position:relative;}
.history:before {content:''; display:block; position:absolute; top:16px; left:50%; width:1px; height:98%; background:#d9e6ec;}
.history dl {padding-left:50%; margin-bottom:80px;}
.history dl dt {position:relative; padding-left:30px; margin-bottom:40px; font-size:24px;    font-family: system-ui;
    font-weight: bold;}
.history dl dt:before {content:''; display:block; position:absolute; top:15px; left:-8px; width:17px; height:17px; border-radius:50px; background:#f39800;}
.history dl dd {position:relative; padding-left:30px; margin-bottom:20px;}
.history dl dd:after {content:''; display:block; clear:both;}
.history dl dd:before {content:''; display:block; position:absolute; top:8px; left:-3px; width:7px; height:7px; border-radius:50px; background:#d9e6ec;}
.history dl dd .date {display:block; float:left; width:21%; font-size:16px; color:#858585; /*font-family:'Roboto', 'dotum', sans-serif;*/}
.history dl dd span {display:block; float:left; width:75%; font-size:17px; margin-top:-3px;}
.history dl.type2 {padding:0 50% 0 0;}
.history dl.type2 dt {text-align:right; padding:0 30px 0 0;}
.history dl.type2 dt:before {left:auto; right:-9px; background:#0068b7;}
.history dl.type2 dd {padding:0 30px 0 0;}
.history dl.type2 dd .date {float:right; margin:0; text-align:right;} 
.history dl.type2 dd:before {left:auto; right:-4px;}
.history dl.type2 dd span {float:right; text-align:right;}
.history dl.hs1 {}
.history dl.hs2 {}
.history dl.hs3 {background:url(../images/history3.jpg) 28% 15px no-repeat;}

.titleA {text-align:center; margin-bottom:45px;}
.titleA .tit {display:block; font-size:45px; font-family:'Roboto', 'dotum', sans-serif; font-weight:700;}
.titleA .subtxt {display:block; font-size:18px; color:#858585; margin-top:10px;}

.titleB {position:relative; margin:50px 0 10px;}
.titleB:after {content:''; display:block; clear:both;}
.titleB .tit {display:inline-block; font-size:27px; font-family:'Noto Sans B', 'dotum', sans-serif; font-weight:700;}
.titleB .tit2 {display:block; margin-top:10px; font-size:35px; line-height:42px;}
.titleB .subtxt {display:inline-block; font-size:18px; color:#858585; margin-left:10px;}
.titleB .subtxt.bc {display:block; margin-left:0; margin-top:10px;}
.titleB .subtxt2 {float:right; font-size:13px; color:#868686; padding-top:15px;}
.titleB .subtxt3 {font-size:16px; color:#868686; line-height:23px;}
.titleB .clear .subtxt3 {float:left; width:40%;}
.titleB .btndown {position:absolute; top:0; right:0;}
.titleB .ar {position:absolute; bottom:0; right:5px;}

.titleC {text-align:center; margin-bottom:45px;}
.titleC .tit {display:block; font-size:30px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#333;}
.titleC .subtxt {display:block; font-size:15px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#858585; margin-top:20px;}

.group {position:relative; text-align:center;}
.group:before {content:''; display:block; position:absolute; top:0; left:50%; width:1px; /* height:90%; */height:46.2%; background:#e0e0e0; z-index:-1;}
.group .icon1 {display:inline-block; width:135px; height:135px; padding-top:57px; font-size:16px; color:#fff; background:#0068b7; border-radius:200px; box-sizing:border-box;}
.group .icon2 {display:inline-block; width:155px; height:44px; padding-top:7px; font-size:16px; color:#0068b7; background:#fff; border:3px solid #0068b7; border-radius:200px; box-sizing:border-box;}
.group .icon3 {display:inline-block; width:155px; height:44px; padding-top:7px; font-size:16px; color:#6b7787; background:#fff; border:3px solid #6b7787; border-radius:200px; box-sizing:border-box;}
.group .cont1 {position:relative; padding-bottom:25px;}

.group .cont2 {position:relative; padding-bottom:15px;}
.group .cont3 {padding-bottom:40px;}
.group .cont3 p {margin-left:50%; position:relative;}
.group .cont3 p:before {content:''; display:block; position:absolute; top:23px; left:0; width:50%; height:1px; background:#e0e0e0; z-index:-1;}
.group .cont4 {position:relative;}
.group .cont4:before {content:''; display:block; position:absolute; top:0; /* left:16.5%; */left:12.5%; /* width:66%;  */width:75%; height:1px; background:#e0e0e0; z-index:-1;}
.group .cont4:after {content:''; display:block; clear:both;}
.group .cont4 li {position:relative; float:left; /* width:25%;  */width:23%; margin:0 1%;  padding-top:40px;}
.group .cont4 li:before {content:''; display:block; position:absolute; top:0; left:50%; width:1px; height:90%; background:#e0e0e0; z-index:-1;}
.group .cont4 li.none:before {display:none;}
.group .cont4 li .tit {display:block; margin-bottom:10px; font-size:16px; color:#fff; padding:10px 0; background:#6b7787; border-radius:50px;}
.group .cont4 li .txt {margin-bottom:10px; display:block; background:#f7f7f7; text-align:left; /* min-height:125px; */ /* padding:10% 0 10% 10%; */padding:6%; border:1px solid #e0e0e0; border-radius:10px;}
.group .cont4 li .txt em {display:block; font-size:16px; background:url(../images/dot.jpg)left 7px no-repeat; padding-left:10px;}

.mapArea {margin-bottom:90px;}
.mapArea:last-child {margin-bottom:0;}
.mapArea .info {position:relative;}
.mapArea .info span {display:inline-block; font-size:16px; height:27px; padding-left:28px; margin-right:15px; color:#858585; background:0 3px no-repeat;}
.mapArea .info span.addr {background-image:url(../images/map_ico1.jpg);}
.mapArea .info span.tel {background-image:url(../images/map_ico2.jpg);}
.mapArea .info span.fax {background-image:url(../images/map_ico3.jpg);}
.mapArea .info .btnmore {display:block; position:absolute; top:-10px; right:0;}
.mapArea .map {margin-top:20px;}

/* 20190709 수정 */
.group_right {/* position:absolute; */position:relative; /* top:170px; left:-30%; */ padding-left:20px;}
.group_right:before {content:""; display:block; background:#e0e0e0; width:1px; height:101px; position:absolute; left:11px; top:-10%;}
.group_right .txt:before {content:""; display:block; /* width:14%; */width:4%; height:1px; background:#e0e0e0; position:absolute; top:72%; /* left:-14%; */left:5%;}
.group_right .txt01:before {content:""; display:block; /* width:14%; */width:4%; height:1px; background:#e0e0e0; position:absolute; top:17%; /* left:-14%; */left:5%;}
.group .cont4 .second_li:before {height:60%;}
/* .list thead th {word-break:keep-all;} */

/* main */
.slideArea {position:relative; z-index:2;}
.slideArea .bg {width:100%; height:500px; background:center 0 no-repeat; background-size:cover;}
.slideArea .mainText {text-align:center;}
.slideArea .mainText h2 {padding-top:60px; font-size:60px; color:#fff; font-family:'Roboto', 'dotum', sans-serif;}
.slideArea .mainText .txts {padding-top:20px; font-size:19px; color:#fff; font-family:'Roboto', 'dotum', sans-serif;}
.slideArea .mainText .imgprd {margin-top:70px; text-align:center;}
.slideArea .mainText .imgprd img {display:inline-block;}
.slideArea .mainText .more {margin-top:50px;}
.slideArea .mainText .more a {display:inline-block; width:150px; height:40px; line-height:40px; color:#fff; font-family:'Roboto', 'dotum', sans-serif; border:1px solid rgba(255,255,255,.5);}
.slideArea .slick-arrow {display:block; position:absolute; top:50%; margin-top:-32px; width:36px; height:65px; cursor:pointer; border:0; text-indent:-999em; overflow:hidden; background:0 0 no-repeat; z-index:10;}
.slideArea .slick-prev {left:2%; background-image:url(../images/btn_main_prev.png);}
.slideArea .slick-next {right:2%; background-image:url(../images/btn_main_next.png);}
.slideArea .slick-dots {position:absolute; bottom:20px; left:0; width:100%; text-align:center;}
.slideArea .slick-dots li {display:inline-block; margin:0 2px;}
.slideArea .slick-dots li button {display:inline-block; width:16px; height:16px; text-indent:-999em; overflow:hidden; cursor:pointer; border:0; background:url(../images/page_off.png) 0 0 no-repeat;}
.slideArea .slick-dots li.slick-active button {background:url(../images/page_on.png) 0 0 no-repeat;}
#mainCont h3 {text-align:center; font-size:40px; font-family:'Roboto', 'dotum', sans-serif; font-weight:700; text-transform:uppercase;}
#mainCont .subtxt {text-align:center; font-size:17px; color:#888; margin:10px 0 30px;}
.mainBox {padding:100px 0 90px;}
.mainBox .box {margin-top:30px;}
.mainBox .box:after {content:''; display:block; clear:both;}
.mainBox .box a {display:block; float:left; width:20%; padding:60px 0 50px; text-align:center; box-sizing:border-box;}
.mainBox .box a b {display:block; font-size:20px; color:#fff; padding-top:105px; background:center 0 no-repeat;}
.mainBox .box a.box1 {background:#2a4f82; border:1px solid #2a4f82;}
.mainBox .box a.box2 {background:#0068b6; border:1px solid #0068b6;}
.mainBox .box a.box3 {background:#898989; border:1px solid #898989;}
.mainBox .box a.box4 {background:#565656; border:1px solid #565656;}
.mainBox .box a.box5 {background:#fff; border:1px solid #ccc;}
.mainBox .box a.box1 b {background-image:url(../images/mainB_1.png);}
.mainBox .box a.box2 b {background-image:url(../images/mainB_2.png);}
.mainBox .box a.box3 b {background-image:url(../images/mainB_3.png);}
.mainBox .box a.box4 b {background-image:url(../images/mainB_4.png);}
.mainBox .box a.box5 b {background-image:url(../images/mainB_5.png); color:#111;}

.mainNews {padding:120px 0 90px;}
.mainNews ul li {float:left; width:32%; margin-right:2%;}
.mainNews ul li:last-child {margin-right:0;}
.mainNews ul li .pimg {display:block; height:220px; overflow:hidden; background:#f4f4f4;}
.mainNews ul li .pimg img {-webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.mainNews ul li a:hover .pimg img {-webkit-transform:scale(1.1); transform:scale(1.1);}
.mainNews ul li .tit {display:block; font-size:23px; margin:30px 0 10px;}
.mainNews ul li .cont {display:block; font-size:15px; color:#555;}

/* 회원가입, 로그인, 회원탈퇴 */
.joinArea {}
.joinArea .grayBox {}
.joinArea .grayBox h4 {font-size:21px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#333; margin:0 0 10px;}
.joinArea .grayBox h4 em {font-size:14px; color:#ff0000; margin:0 0 0 5px;}
.joinArea .grayBox .scr {width:100%; height:256px; padding:15px 30px; border:1px solid #e1e1e1; overflow:hidden; overflow-y:auto; box-sizing:border-box; background:#fafafa;}
.joinArea .grayBox .scr p {font-size:15px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#555;}
.joinArea .grayBox .agreeBox {margin-top:20px;}
.joinArea .btnArea {margin-top:60px; text-align:center;}
.mgt50 {margin-top:50px !important;}
.joinArea .finishBox {text-align:center;}
.joinArea .finishBox .tit {font-size:30px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#333; margin:33px 0;}
.joinArea .finishBox .subtxt {font-size:16px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#858585;}
.joinArea input[type="text"], input[type="password"], input[type="tel"] {width:195px; border:1px solid #e5e5e5;}
.joinArea select {border:1px solid #e5e5e5; padding:10px; color:#858585; height:42px; background:url(../images/select.png) no-repeat right 10px center;}
.joinArea .col input,
.joinArea .col select {float:left;}
.joinArea .col a {float:left; display:block; background:#f3f3f3; border:1px solid #e5e5e5; border-left:0; box-sizing:border-box; font-size:14px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#000; height:42px; line-height:42px; vertical-align:top; padding:0 14px;}
.joinArea .col:after {content:''; display:block; clear:both;}
.joinArea .caption {font-size:13px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#858585; margin-top:5px; letter-spacing:-0.5px}
.joinArea .caption em {color:#ff0000;}
.joinArea .phone span,
.joinArea .birth span, 
.joinArea .email span {margin:0 5px;}
.joinArea .email .col {float:left; margin-left:5px;}
.joinArea .email:after {content:''; display:block; clear:both;}
.joinArea .birth div.col {margin-top:5px;}
.joinArea .birth div.col input[type="radio"] + label {margin-right:10px;}
.joinArea .birth div.col input[type="radio"] + label:before {margin:-3px 5px 0 0;}
.joinArea .address > input {width:550px !important; margin-top:10px;}
.w100 {width:100px !important;}
.w150 {width:150px !important;}

.loginArea {max-width:702px; margin:0 auto;}
.loginArea .tit {font-size:40px; font-family:'Roboto', 'dotum', sans-serif; color:#0068b7; margin:33px 0 15px; text-align:center;}
.loginArea .subtxt {font-size:15px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#858585; text-align:center;}
.loginArea ul {margin-top:30px; border-top:2px solid #0068b7; border-bottom:1px solid #d7d7d7; padding:50px 94px;}
.loginArea ul:after {content:''; display:block; clear:both;}
.loginArea li {float:left; min-height:95px; box-sizing:border-box;}
.loginArea li:nth-child(1) {width:23%;}
.loginArea li:nth-child(2) {width:55%; padding:9px 0;}
.loginArea li:nth-child(3) {width:22%; float:right; padding:8.5px 0; text-align:right;}
.loginArea li input {margin-bottom:10px;}
.loginArea li input:last-child {margin-bottom:0;}
.loginArea input[type="text"], input[type="password"] {border:1px solid #e5e5e5; width:100% !important;}
.loginArea .btnTypeD {font-size:16px; width:95px; height:95px; line-height:95px; margin:0; border-radius:0;}

ul.secede {border-top:1px solid #dedede; border-bottom:1px solid #dedede; padding:15px;}
ul.secede:after {content:''; display:block; clear:both;}
ul.secede li {float:left; width:50%; margin:0 0 10px 0;}
ul.secede li:nth-child(5), ul.secede li:nth-child(6) {margin:0;}
ul.secede input[type="radio"] + label {font-size:15px;}
ul.secede input[type="radio"] + label:before {margin:-3px 6px 0 0;}
div.secede {background:#f8f8f8; padding:15px;}

@media (max-width: 1300px) {
.vision2 li {width:26%;}
.vision2 li.center {width:300px; height:300px; background-size:300px;}
.vision2 li.center b {padding-top:120px; font-size:25px; line-height:28px;}
.vision2 li .txt br {display:none;}
.vision3 dl dd .box {padding:5%;}
.vision3 dl dd .box span {min-height:112px; font-size:15px; line-height:22px;}

.mapArea .info .btnmore {position:static;}
}

@media (max-width: 1250px) {
.guide {padding:30px;}
.guide .tit {width:30%;}
.guide .cont {width:70%;}

.prdCont .prdInfo em {width:25%;}
.prdCont .prdInfo span {width:75%;}
.prdCont .prdInfo span br {display:none;}

.introduce .ceotxt .tit, .vision .tit {/* font-size:40px; */ line-height:42px;}
.introduce .ceotxt p {font-size:16px;}
.introduce2 .tit {/* font-size:35px; */ line-height:38px;}
.introduce2 .cycle span {width:200px; height:200px;}
.introduce2 .cycle span em {padding-top:60px; font-size:24px;}
.introduce2 .cycle span.icon1 em {padding-top:90px;}
.introduce2 .cycle span.icon2 em {padding-top:80px;}
.introduce2 .cycle span.icon2 {margin:0 5%; vertical-align:top;}
.introduce3 {padding:100px 55% 0 0; background-size:40%;}
.introduce3 .tit {font-size:40px; line-height:42px; margin-bottom:40px;}

.history dl.hs1 {background-size:290px;}
.history dl.hs2 {background-size:210px;}
.history dl.hs3 {background-size:210px;}

.history dl dd .date {width:20%;}
.history dl dd span {width:70%;}

.mapArea .info .btnmore {margin-top:10px; width:140px;}

.mainBox {padding:100px 0 0;}
.mainBox .box a b {font-size:22px; background-size:180px;}
.mainNews {padding:100px 3% 50px;}
.mainNews ul li .pimg {height:220px;}

.boardArea .bdTop .bdSearch input[type=text] {width:70% !important;}
}

@media (max-width: 1000px) {
.guide {padding:30px;}
.guide .tit {float:none; width:100%;}
.guide .tit span {padding:10px 0 30px 75px; background-size:60px;}
.guide .cont {float:none; width:100%;}

.prdCont .prdInfo {margin:20px 0;}
.prdCont .prdInfo em {display:block; float:none; width:100%; margin-bottom:15px;}
.prdCont .prdInfo em br {display:none;}
.prdCont .prdInfo span {display:block; float:none; width:100%;}
.prdBox {padding:30px;}

.prdList span {width:30%; margin:0 2% 2% 0 !important;}

.introduce .ceotxt p br, .introduce2 .subtxt br, .introduce3 .tit br, .vision .subtxt br {display:none;}
.introduce .ceotxt .tit, .vision .tit {margin-top:40px; padding:40px 0; font-size:32px; line-height:34px;}
.introduce .ceotxt .tit:after {margin-top:40px;}
.introduce2 .tit {font-size:28px; line-height:34px;}
.introduce2 .cycle span {width:180px; height:180px; margin:0 3% !important;}
.introduce2 .cycle span em {padding-top:55px; font-size:22px;}
.introduce3 {margin-top:0; padding:50px 0 0; background:none;}
.introduce3 .tit {font-size:32px; line-height:34px;}
.vision .subtxt, .visionCont .subtxt {font-size:16px;}
.vision2 {padding-top:40px; background-position:center center;}
.vision2 li {float:none; width:60%; margin:0 auto 10px;}
.vision2 li p {padding:15px 0 30px !important;}
.vision2 li.center {margin:0 auto 30px;}
.vision2 li .txt {padding-top:15px;}
.vision3 .clear {margin-top:20px;}
.vision3 .clear:before {top:0; left:50%; width:1px; height:100%;}
.vision3 dl {float:none; width:100%; margin:0 auto 20px;}
.vision3 dl dt {padding:15px 0 20px; font-size:23px; background:#fff;}
.vision3 dl dd .box span {min-height:auto;}
.vision3 dl dd .box .tit {font-size:18px;}
.vision4 .cycleCont .cyc {width:220px; height:220px;}
.vision4 .cycleCont .cyc b {margin-top:55px; font-size:25px;}
.vision4 .cycleCont .cyc em {font-size:17px;}
.vision4 .cycleCont .dotline1 {top:107px;}

.history:before {left:10%;}
.history dl {padding:0 0 0 10% !important; background-image:none !important;}
.history dl.type2 dt {text-align:left; padding:0 0 0 30px;}
.history dl.type2 dt:before {left:-8px; right:auto;}
.history dl.type2 dd {padding:0 0 0 30px;}
.history dl.type2 dd:before {right:auto; left:-3px;}
.history dl.type2 dd .date {float:left; text-align:left;}
.history dl.type2 dd span {float:left; text-align:left;}

.titleA .tit {font-size:40px;}
.titleA .subtxt {font-size:16px;}
.titleB .tit {font-size:22px;}
.titleB .tit2 {font-size:28px; line-height:32px;}
.titleB .subtxt {font-size:15px;}
.titleB .subtxt3 {font-size:15px;}
.titleB .clear .subtxt3 {float:none; width:100%;}
.titleB .ar {position:static; margin:5px 5px 0 0;}

.group .cont4 li {width:29%; margin:0 2%;}
.group .cont4 li .txt {padding:7%;}

.slideArea .bg {height:450px;}
.slideArea .mainText .imgprd {padding:0 5%; margin-top:40px;}
.slideArea .mainText .more {margin-top:30px;}
.slideArea .slick-arrow {display:none !important;}
.slideArea .slick-dots {bottom:20px;}
#mainCont h3 {font-size:35px;}
.mainBox .box a {width:50%; padding:40px 0 30px;}
.mainBox .box a:last-child {width:100%;}
.mainNews ul li .pimg {height:180px;}
.mainNews ul li .tit {font-size:20px;}

.introduce2 .cycle span.icon1 em {padding-top:80px;}
.introduce2 .cycle span.icon2 em {padding-top:70px;}

.vision3 dl dd .box {height:auto;}

.group .cont4 li {width:21%;}
.group_right {left:0;}
.group:before {height:46%;}
}

@media (max-width:768px) {
.joinArea input[type="text"], input[type="password"], input[type="tel"] {width:140px;}
.joinArea .email .fl {margin-bottom:5px;}
.joinArea .email .col {float:none; margin-left:0;}
.joinArea .address > input {width:100% !important;}
.w150 {width:120px !important;}
}

@media (max-width: 700px) {
.prdCont .prdInfo em {font-size:24px;}
.numlist dt, .prdBox h5 {font-size:22px;}
.prdCont .prdInfo span {font-size:15px;}
.numlist dd {font-size:15px;}

.introduce .pimg {float:none; width:100%; padding:0; text-align:right;}
.introduce .pimg img {float:left; width:100%;}
.introduce .ceotxt {float:none; width:100%;}
.introduce2 .tit br {display:none;}
.introduce2 .cycle {padding-top:50px; margin-top:50px;}
.introduce2 .cycle span {width:150px; height:150px; margin:3% !important;}
.introduce2 .cycle span em {padding-top:45px; font-size:18px;}
.introduce2 .cycle span.icon1 em {padding-top:70px;}
.introduce2 .cycle span.icon2 em {padding-top:60px;}
.visionCont {margin-top:70px;}
.vision4 .cycleCont .cyc {width:180px; height:180px;}
.vision4 .cycleCont .cyc b {margin-top:45px; font-size:23px;}
.vision4 .cycleCont .cyc em {font-size:15px;}
.vision4 .cycleCont .dotline1 {top:86px;}
.history:before {left:2%;}
.history dl {padding:0 0 0 2% !important;}
.history dl dt {font-size:30px; margin-bottom:20px;}
.history dl dt:before {top:12px;}
.history dl dd .date {font-size:16px;}
.history dl dd span {font-size:16px;}

.history dl dd .date {width:17%;}
.history dl dd span {width:83%;}
.mapArea {margin-bottom:50px;}
.mapArea .info span {padding-left:22px; background-size:20px;}

.mainNews ul li {float:none; width:70%; margin:0 auto 15px;}
.mainNews ul li:last-child {margin:0 auto;}
.mainNews ul li .pimg img {width:100%;}
.mainNews ul li .tit {margin:20px 0 10px;}

.prdBox2 .cont {width:100%; box-sizing:border-box;}

.group .cont4 li {width:100%; margin:0;}
.group .cont4:before {display:none;}
.group .cont4 li {padding-top:0;}
.group_right {position:relative; top:0; padding-left:0;}
.group_right:before {display:none;}
.group .cont4 {margin-top:30px;}
.group .cont4 li .last_group {position:absolute; bottom:-35%; display:block; z-index:9; width:100%;}
.group_right .txt01:before {display:none;}
.group .cont4 li .txt {padding:20px;}
.group .cont4 li:before {top:-10px;}
}

@media (max-width: 540px) {
.numlist dd.tit {font-size:17px;}
.prdCont .prdInfo {padding-bottom:30px;}
.prdCont .prdInfo em {font-size:22px;}
.prdCont .prdSlide .slick-arrow {width:30px; height:30px; background-size:30px;}
.prdCont .prdSlide .slick-prev {right:31px;}
.prdCont .prdSlide .slick-next {right:0px;}
.numlist dt, .prdBox h5 {font-size:20px; margin-bottom:10px;}
.btnlist {padding:5px 10px}
.btnlist span {font-size:14px;}
.prdCont .prdInfo span {font-size:14px;}
.prdBox {padding:15px;}
.prdBox ul li, .prdBox3 ul li {float:none; width:100%; margin:3% 0;}
.prdBox4 ul li {width:48%; margin:0 2% 2% 0;}
.prdBox4 ul li:nth-child(2n) {margin-right:0;}
.prdBox2 ol {float:none; width:100%; margin:0 0 5%; padding:0;}
.prdBox2 .cont {float:none; width:100%; margin:0; padding:0;}
.prdBox2 .cont em {font-size:14px;}
.prdBox3, .prdBox4 {padding-bottom:30px;}
.numlist dd {font-size:14px; margin-bottom:15px;}
.txtbox {font-size:15px;}
.cap {font-size:14px;}
.prdTypeA dt em {font-size:15px;}
.prdTypeA dd {font-size:14px;}
.prdTypeA dd.cap:before {top:8px;}
.guide {padding:20px;}
.guide .tit span {font-size:18px; padding:10px 0 20px 45px; background-size:35px;}
.guide .tit span br {display:none;}
.guide .cont {font-size:14px;}

.prdList span {width:48%; margin:0 2% 2% 0 !important;}
.prdList span:nth-child(even) {margin-right:0 !important;}
.prdList span em {font-size:14px;}

.mgt {margin-top:30px;}

.introduce .pimg .sign {font-size:17px;}
.introduce .pimg .sign em {font-size:14px;}
.introduce .ceotxt .tit, .vision .tit {font-size:28px; line-height:34px;}
.introduce .ceotxt .tit:after {margin-top:40px;}
.introduce .ceotxt p {font-size:15px; margin-bottom:15px;}
.introduce2 {margin-top:70px; padding-bottom:70px;}
.introduce2 .tit {font-size:26px; line-height:32px;}
.introduce2 .subtxt {font-size:15px; margin-bottom:15px;}
.introduce2 .cycle {margin-top:0;}
.introduce3 .tit {font-size:28px; line-height:34px; margin-bottom:30px;}
.introduce3 p {font-size:15px; margin-bottom:15px;}
.vision {margin-bottom:20px;}
.vision .subtxt {font-size:15px; margin:-10px 0 0;}
.vision .tit br {display:none;}
.visionCont .subtxt {font-size:15px;}
.vision2 li.center {width:250px; height:250px; background-size:250px;}
.vision2 li.center b {font-size:20px; line-height:24px; padding-top:100px;}
.vision2 li b {font-size:18px;}
.vision2 li .txt {font-size:15px; padding-top:10px;}
.vision3 .clear {margin-top:0;}
.vision3 dl dt {font-size:21px;}
.vision3 dl dd .box .tit {font-size:17px;}
.vision4 .cycleCont .cyc {margin:17px 6%;}
.vision4 .cycleCont .dotline1 {display:none;}
.vision4 .cycleCont .dotline2 {display:block;}
.history dl {margin-bottom:40px;}
.history dl dt {letter-spacing:-1px; padding-left:20px;}
.history dl dd {padding-left:20px;}
.history dl dd .date {width:23%; margin-top:-2px;}
.history dl dd span {width:77%; line-height:20px;}
.history dl dd:before {top:5px;}

.titleA .tit {font-size:30px; letter-spacing:-1.5px;}
.titleA .subtxt {font-size:15px;}

.titleB {margin:30px 0 10px;}
.titleB .tit {font-size:20px;}
.titleB .tit2 {font-size:23px; line-height:28px;}
.titleB .subtxt {margin-left:0; font-size:14px;}
.titleB .subtxt3 {font-size:14px;}
.titleB .ar {font-size:13px;}

.group .icon1 {width:115px; height:115px; padding-top:46px;}
.group .icon2, .group .icon3 {/* width:125px; */ font-size:15px;}
.group .cont4 li .tit {font-size:15px;}
.group .cont4 li .txt {/* padding:7% 5%; min-height:62px; */}
.group .cont4 li .txt em {font-size:14px; word-break:break-all;}

.faq dt a {font-size:15px;}

.slideArea .bg {height:340px;}
.slideArea .mainText {padding:0 5%;}
.slideArea .mainText h2 {padding-top:40px; font-size:40px;}
.slideArea .mainText .txts {padding-top:15px; font-size:17px;}
.slideArea .mainText .more a {width:100px; height:30px; line-height:30px; font-size:13px;}

#mainCont h3 {font-size:24px;}
#mainCont .subtxt {font-size:15px; margin:5px 0 20px;}
.mainBox {padding:70px 0 0;}
.mainBox .box a {padding:20px 0;}
.mainBox .box a b {padding-top:74px; font-size:17px; background-size:130px;}
.mainNews {padding:70px 3% 30px;}
.mainNews ul li {width:100%; margin:0 auto 15px;}
.mainNews ul li .tit {font-size:17px; margin:15px 0 5px;}
.mainNews ul li .cont {font-size:13px;}
.mainNews ul li .pimg {height:200px;}

.list thead th {background:#2483c5;}
}

@media (max-width:414px) {
.joinArea .finishBox .tit {font-size:24px;}
.joinArea .col input {width:65%;}
.joinArea .col a {width:35%;}
.joinArea .email .fl {float:none !important;}
.joinArea .email span {margin:5px; display:block;}
.w100 {width:32% !important;}
.w150 {width:100% !important;}
.joinArea select {padding:13px 5px;}
.loginArea ul {padding:50px 10px;}
.loginArea li:nth-child(1) {width:30%;}
.loginArea li img {width:70%; vertical-align:middle;}
.loginArea li:nth-child(2) {width:70%; padding:0;}
.loginArea li:nth-child(3) {width:100%; float:none; clear:both; padding:0; min-height:auto;}
.loginArea .btnTypeD {width:100%; height:44px; line-height:44px; margin-top:40px;}
ul.secede li {float:none; width:100%; margin:0 0 10px 0;}
ul.secede li:nth-child(5) {margin:0 0 10px 0;}

.history dl dd .date {width:100%;}
.history dl dd span {width:100%; margin-top:10px;}

.boardArea .bdTop .bdSearch input[type=text] {width:60% !important;}
.boardArea .bdBtnB {padding:10px !important;}
}

@media (max-width:320px) {
.joinArea .finishBox .tit {font-size:24px;}
.joinArea .col input {width:55%;}
.joinArea .col a {width:45%;}
}

/* references */
.referencesWrap {margin-top:20px;}
.referencesWrap ul:after {content:""; display:block; clear:both;}
.referencesWrap ul {margin:0 -1%; overflow:hidden;}
.referencesWrap ul li {border:1px solid #e6e6e6; float:left; width:31.3%; box-sizing:border-box; margin:20px 1%; text-align:center; height:307px;}
.referencesWrap ul li .references_txt {font-size:16px; padding:15px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.referencesWrap ul li img {width:100%; /* max-width:none; */}
.referencesWrap ul .no_img {width:100%; height:auto;}
.referencesWrap ul li .references_img {height:256px; overflow:hidden;}

.viewWrap .view_title {font-size:23px; border-top:1px solid #505050; margin:50px 0 30px 0; padding:15px; border-bottom:1px solid #e6e6e6; font-weight:bold;}
.view_con_wrap {padding:0 30px; margin-bottom:50px;}
.view_con_wrap p img {margin-bottom:30px;}
.view_con_wrap h4 {position:relative; color:#0068b7; font-size:19px;/*  border-bottom:1px solid #e6e6e6;  */padding-bottom:10px; margin:0; padding-left:15px;}
.view_con_wrap h4:before {content:""; display:block; background:#0068b7; width:3px; height:20px; position:absolute; left:0; top:2px; }
.view_con_wrap .view_con .view_con_title {float:left; font-size:17px;}
.view_con_wrap .view_con .view_con_text {float:right; color:#6f6f6f;}
.view_con_wrap .view_con {margin-bottom:30px; }
.view_con_wrap .view_con li:after {content:""; display:block; clear:both;}
.view_con_wrap .view_con li {padding:13px; border-bottom:1px solid #e6e6e6;}


@media (max-width:1400px) {
.referencesWrap ul li img {height:100%;}
}

@media (max-width:700px) {
.referencesWrap ul li {height:207px;}
.referencesWrap ul li .references_img {height:157px;}
}


@media (max-width:414px) {
.view_con_wrap {padding:0 10px;}
.view_con_wrap .view_con .view_con_title {width:100%;}
.view_con_wrap .view_con .view_con_text {float:left; margin-top:8px;}

.viewWrap .view_title {font-size:18px;}
.view_con_wrap h4 {font-size:17px;}

.referencesWrap ul li {width:48%;}
}