@charset "utf-8";

@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* 영문폰트
font-family: 'Poppins', sans-serif;
font-family: 'Noto Sans KR',
*/



/*modal*/

.modal {position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:10000;display:none;}
.modal .xi-close{position:absolute;right:1%; top:1%;z-index:10001;}
.modal .xi-close:hover{cursor:pointer;color:#fff;}
.modal img {position:absolute;left:50%;top:50%;width:40%;}
.modal .bg{width:100%;height:100%;}


/* detail modal*/
.scail img {width:30%;}



.wrap{ width:1200px; margin:0 auto;padding:0 10px;box-sizing: border-box;}

*{letter-spacing:-1px;}
.header_pc{height:100px;background:#fff;width:100%;position:fixed;top:0;left:0;z-index:9999;}
.container {width:1200px; margin:0 auto;padding: 0 10px;}

.container .pc_logo{width:40%;float:left;line-height:100px;padding: 0 0 2px;}
.container .pc_logo a{display:inline-block;vertical-align:middle;background:url(../img/logo.png) no-repeat left center;width:220px;color:transparent;height:100px;background-size:80%;}
.container .menu_wrap{width:60%;float:left;}
.container .menu > li{width:25%;float:left;}
.container .menu > li > a{color: #333; padding: 0 20px;font-weight: 500;text-align: center; display: block; font-family: 'Poppins', sans-serif !important;font-size:18px;line-height: 100px;font-weight: 600;}
.container .menu > li > a:hover{text-decoration:none;}
.container .submenu{padding-top:15px;}
.container .submenu li a{display: block; font-size: 15px;color: #333;text-align: Center;font-weight: 500;  padding-top:15px;padding: 7px 20px;}
.container .sub_bg{width: 100vw;background: rgba(255,255,255,0.9);position: absolute; top: 100px; z-index: -1; left: 0; border-top: 1px solid #e4e4e4;}
.container .submenu li a:hover{text-decoration:none;color:#1a6498}
.header_mb{display:none;}
.uk-offcanvas {background:none;}



/*slide*/
.slide .bx-wrapper {width:100%;margin:0 auto;border:0;}
.slide .bx-wrapper ul{}
.slide li {position:relative;}
.slide li img {width:100%;}
.slide li h2{width:100%;font-family:'Poppins', sans-serif; font-size:5.2em;font-weight: 600;line-height:100%;;color:#fff;text-align:center;position:absolute;left:50%;top:50%; transform: translate(-50%,-50%);}
.slide li h2 span {display:block;font-size:0.38em;line-height:100%;font-weight:300;color:#fff;padding:1em 0  0}
.slide .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom: 50px !Important}
.slide_640,
.slide_1024{display:none;}

/*main_list*/
.main_list {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5c2c9+0,ebeef0+100 */
background: rgb(181,194,201); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(181,194,201,1) 0%, rgba(235,238,240,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(181,194,201,1) 0%,rgba(235,238,240,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(181,194,201,1) 0%,rgba(235,238,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5c2c9', endColorstr='#ebeef0',GradientType=1 ); /* IE6-9 */}


.main_list {padding:24px 0;}
.main_list > div {font-size:0;}
.main_list > div > div {display:inline-block;width:25%;text-align:center;box-sizing:border-box;position:relative;}
.main_list > div > div:after {content:"";width:1px;height:50px;background:rgba(255,255,255,0.6);position:absolute;right:0;top:50%; transform: translateY(-50%);}
.main_list > div > div:last-child:after{display:none;}
.main_list > div > div > div {width:100%;height:68px;position:relative;opacity: 0.5;}
.main_list div > div:nth-child(1) div {background:url(../img/iconbg01.png) no-repeat center center;}
.main_list div > div:nth-child(2) div {background:url(../img/iconbg02.png) no-repeat center center;}
.main_list div > div:nth-child(3) div {background:url(../img/iconbg03.png) no-repeat center center;}
.main_list div > div:nth-child(4) div {background:url(../img/iconbg04.png) no-repeat center center;}
.main_list div > div > div img { display:inline-block; width:32px;position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.main_list div > div p {font-family: 'Poppins', sans-serif;font-size:16px; color:#fff;padding-top:8px;}



.contact_us > div {padding-top:142px;}
.contact_us div.left {display:left;width:50%;text-align:center;box-sizing:border-box;}
.contact_us div.left img {width:100%;display:inline-block;width:490px;overflow:hidden;}
.contact_us div.right {float:right;width:50%;box-sizing:border-box;padding-left:20px;}
.contact_us div.right h2 {font-family:'Poppins', sans-serif;font-size:4.2rem;color:#434345;font-weight:600;line-height:55px;letter-spacing: -2px;padding: 0 0 92px;}
.contact_us div.right div.touch {font-family:'Poppins', sans-serif;font-size:3.0rem;color:#989898;letter-spacing: -2px;font-weight: 200;padding: 0 0 2em;position:relative;}
.contact_us div.right div.touch:before {content:"";width:80px; height:2px; background:#33ccff;position:absolute;left:0;top:-20px;}
.contact_us div.right div.cont {width:100%;position:relative;}
.contact_us div.right div.cont div.call{display:inline-block;padding-right:2.5em;font-family: 'Montserrat', sans-serif;font-size:10.0em;color:#33ccff;letter-spacing: -2px;font-weight:600;position:relative; }
.contact_us div.right div.cont div.call span {display:inline-block;}
.contact_us div.right div.cont div.call span.call_num{font-family: 'Montserrat', sans-serif;font-size:5.2rem;color:#33ccff;font-weight:600;position:absolute;right:0;top:0.5em;letter-spacing: -2px;}
.contact_us div.right div.cont div.call span.call_num:before {content:"";width:100%;height:1px;background:#ddd;position:absolute;left:0;bottom:0.22em;}
.contact_us div.right div.cont div.mail { display: inline-block;font-family:'Poppins', sans-serif;font-style:italic;font-size:1.6rem;color:#989898;font-weight:300;text-align:justify;position:absolute;left:11.4em;bottom:2em;}


.skill {background:url(../img/skill_bg.jpg) no-repeat center bottom;background-size:cover; width:100%;height:447px;}
.skill > div > div {padding:92px 0; width:calc( 50% - 10px );}
.skill div div h2 {font-family: 'Poppins', sans-serif;font-size:4.2rem;line-height:100%;color:#fff;font-weight:700;padding: 0 0 34px;}
.skill div div li {font-family: 'Poppins', sans-serif;font-size:1.8rem;line-height:100%;color:#fff;font-weight:400;padding:0 0 18px;}
.skill div div li span{display:inline-block;padding:0 0 15px ;}
.skill div div li span.per_text {width:20%;}
.skill div div li span.per_num {width:80%;color:#ddd;font-weight:200;text-align:right;}
.skill div div li div.progress { width: 100%;height: 11px;}
.skill div div li div.progress-wrap {background-color:#33ccff;border-radius:11px;overflow: hidden;position: relative;}
.skill div div li div.progress-bar { background: #999; position: absolute; left: 0; top: 0;}



/*Certificate*/
.Certi {padding:98px 0 84px 0;}
.Certi h2 {font-family: 'Poppins', sans-serif;font-size:4.2rem;line-height:100%;color:#434345;font-weight:700;text-align:center;padding: 0 0 85px;}
.Certi ul {font-size:0;width:100%;text-align:center;box-sizing:border-box;}
.Certi ul li {display:inline-block;width:32%; margin: 0 1%;}
.Certi ul li:first-child {margin-left:0;}
.Certi ul li:last-child {margin-right:0;}
.Certi ul li p{font-family: 'Poppins', sans-serif;font-size:1.6rem;color:#434345;font-weight:200;background:#f4f4f4 url('../img/que.png') no-repeat left 14px top 14px; padding:20px;}
.Certi div.ce_list div.right h3{font-family: 'Poppins', sans-serif;font-size:1.8rem;line-height:100%;color:#434345;font-weight:600;}
.Certi div.ce_list div.right div.date {font-family: 'Poppins', sans-serif;font-size:1.6rem;line-height:100%;color:#33ccff;font-weight:400;}
.Certi div.ce_list div.left {float:left;width:80px;line-height:80px;vertical-align:middle;padding-top:39px;}
.Certi div.ce_list div.left img {width:80px;}
.Certi div.ce_list div.right h3{padding: 0 0 14px;}
.Certi div.ce_list div.right {float:left;width: calc(100% - 80px);box-sizing:border-box;padding-left:20px;padding-top:39px;}
.Certi div.ce_list div.right > div {display:table-cell;vertical-align:middle;text-align:left;height:80px;}


/*smart_tool*/
.smart_tool {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d7f1ff+0,b4c1c9+100 */
background: rgb(215,241,255); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(215,241,255,1) 0%, rgba(180,193,201,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(215,241,255,1) 0%,rgba(180,193,201,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(215,241,255,1) 0%,rgba(180,193,201,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7f1ff', endColorstr='#b4c1c9',GradientType=1 ); /* IE6-9 */
padding:100px 0 118px 0;}
.smart_tool h2{font-family: 'Poppins', sans-serif;font-size:4.2rem;line-height:100%;color:#434345;font-weight:700;text-align:center;padding: 0 0 100px;}
.smart_tool ul {text-align:center;box-sizing:border-box;}
.smart_tool li {float:left; width:23.5%; background:#fff;-webkit-box-shadow: 26px 22px 53px 0px rgba(43,48,51,0.43);
-moz-box-shadow: 26px 22px 53px 0px rgba(43,48,51,0.43);
box-shadow: 26px 22px 53px 0px rgba(43,48,51,0.43);margin:0 1%;}
.smart_tool ul li:nth-child(1){margin-left:0;}
.smart_tool ul li:nth-child(4){margin-right:0;}
.smart_tool li img{width:100%;}
.smart_tool li h3{font-family: 'Poppins', sans-serif;font-size:2.2rem;line-height:100%;color:#434345;font-weight:400;text-align:left;padding:28px 0 12px 20px;}
.smart_tool li a{display:block;font-family: 'Poppins', sans-serif;font-size:1.6rem;line-height:100%;color:#33ccff;font-weight:300;text-align:left;padding: 0 0 37px 20px;}


/*about*/
.about {padding:114px 0;}
.about h2{font-family: 'Poppins', sans-serif;font-size:4.2rem;line-height:100%;color:#434345;font-weight:700;text-align:center;padding: 0 0 54px;}
.about div.left{ float:left;width:50%;}
.about div.left img {display:inline-block;}
.about div.right{ float:right; width:50%;}
.about div.right h3{font-family: 'Poppins', sans-serif;font-size:2.8rem;line-height:100%;color:#434345;font-weight:400;}
.about div.right span{display:block;font-family: 'Poppins', sans-serif;font-size:1.6rem;line-height:100%;color:#434345;font-weight:300;padding:7px 0;}
.about div.right p{font-family: 'Poppins', sans-serif;font-size:1.6rem;line-height:1.2;color:#989898;font-weight:200;padding:31px 0 128px;}
.about div.right a{display:inline-block;font-family: 'Poppins', sans-serif;font-size:1.6rem;color:#fff;text-align:center;background:#33ccff;width:220px;height:50px;line-height:50px;transition:all 0.9s;}
.about div.right a:hover{box-shadow: 300px 0 0 0 rgba(0,0,0,0.25) inset, -300px 0 0 0 rgba(0,0,0,0.25) inset;}


/*footer-top*/
.footer_top {width:100%;background:url(../img/foo2.jpg) no-repeat center bottom; background-size:cover; background-attachment: fixed; height:412px;text-align:center; position:relative;
 background-position-y: 43%;}
.footer_top > div {position:absolute;left:50%;top:50%; transform:translate(-50%, -50%);}
.footer_top ul {text-align:center;padding: 40px 0 0 }
.footer_top ul li {display:inline-block;margin: 0 4px;}
.footer_top li a i {display:inline-block;}
.footer_top li a i.xi-circle {background:#343435;width:20px; height:20px; border-radius:20px;padding:8px; }
.footer_top li a:hover i {color:#434345 !important ;background:#fff;}
footer adress {display:block;font-family: 'Poppins', sans-serif;font-size:1.6rem;height:100px;color:#fff;letter-spacing:0;text-align:center;font-weight:400;line-height:100px;background:#343435;}



/*기존 css 추가분 */

.inner {width:1200px;margin:0 auto;padding: 0 10px}
#mContent {position:absolute;left:0px;top:0px;width:100%;}

#main h2{font-family: 'Poppins', sans-serif;font-style: normal;font-weight:300;font-size:30px;letter-spacing:-1px;color:#496094;padding:30px 0 8px;text-align:center;}
#main h2 strong{color:#5c6bdb;}
#main p{ffont-family: 'Poppins', sans-serif;font-style: normal;font-weight: 200;color:#738ca7;font-size:14px;line-height:22px;text-align:center;}
#main .list {padding:50px 0 0;}
#main .list li{float:left;border:6px solid rgba(125,125,125,0.5);margin-left:36px;overflow:hidden;}
#main .list li img{height:268px;}
#main .list li:first-child{margin:0;}

#side{background:#4b4b4b;padding:27px 0;}
#side .cont{width:33.3333%;float:left;}
#side .wrap{padding:0 20px;height:111px;border-right:1px solid #919191;}
#side .cont:first-child .wrap{border-left:1px solid #919191;}
#side h3{font-family: 'Roboto', sans-serif;font-style: normal;font-size:14px;line-height:20px;color:#FFF;margin-bottom:10px;}
#side .list li{font-size:13px;line-height:22px;color:#DDD;position:relative;}
#side .date{position:absolute;right:0px;top:0px;}
#side .dot{display:inline-block;width:10px;height:8px;border-radius:10px;border:1px solid #FFF;}
#side .image{text-align:center;}








#sub_head {background:url("../img/sub_bg.jpg") no-repeat center bottom; background-size: cover; background-attachment: fixed; height:420px;background-position-y:-281px;position:relative;min-width: 360px;}

#sub_head .cont span {font-size:1.42em;color:#fff; font-weight:500;}
#sub_head .cont {font-family: 'Poppins', sans-serif !important;font-style: normal;font-weight:lighter;font-size:3.3em;color:#fff;letter-spacing:-1px;text-align:center;position:absolute;right:4%; bottom:8%;}


/*history*/
.hs_content {position:relative;margin:50px 0;}
.hs_content:before {display:block; content:""; width:4px; height:69%;
background: -webkit-gradient(linear, left top, right top, from(#33ccff), to(#3399cc));
background: linear-gradient(180deg, #33ccff 0%, #3399cc 100%);
position:absolute;left:50%; top:4%;transform: translate(-50%,0%);}


.hs_tit{font-family: 'Noto Sans KR', sans-serif;font-size:32px;color:#173e64;height:120px;line-height:120px;letter-spacing:-1px;text-align:center;}
.hs_box,
.hs_box2 {display: flex;padding:50px 0; overflow:hidden;}
.hs_left1 {float:left; width:40%;overflow:hidden;}
.hs_left1 img{width:480px;height:336px;transition:all 1s;}
.hs_left1:hover img {transform:scale(1.2);transition:all 1s;}
.hs_right1 {float:right;width:40%;margin-left:20%;text-align:left;position:relative;}
.hs_right1 .count1 {font-size: 7.0rem;font-weight: 700;font-family: 'Poppins', sans-serif !important;color:#33ccff;position:relative; margin-top: -30px;}
.hs_right1 .count2 {font-family: 'Poppins', sans-serif !important;font-weight: 700; font-size: 4.8rem; padding-top:20px;}
.hs_right1 ul li {font-size:1.8rem; color: #333; font-weight:500; text-align:left; font-weight:500;}


.hs_right1:before {display:block;content:"";width:12px;height:12px;border-radius:12px;border:5px solid #33ccff;background:#fff;position:absolute;left:-26.8%;top:0;z-index:1;}
.hs_right1 .count1:before {display:block;content:""; position:absolute;left:-112px; top:40px; width:18%; height:2px; background:#33ccff;}

.hs_left2 {float:left;width:40%;margin-right:20%;text-align:right;position:relative;}
.hs_left2 .count1 {font-size: 7.0rem;font-weight: 700;font-family: 'Poppins', sans-serif !important;color:#33ccff;position:relative; margin-top: -30px;}
.hs_left2 .count2 {font-family: 'Poppins', sans-serif !important;font-weight: 700;font-size: 4.8rem; padding-top:20px;}
.hs_left2 ul li {font-size:18px; color: #333; font-weight:400;text-align:right;font-weight:500;}
.hs_left2:before{display:block;content:"";width:12px;height:12px;border-radius:12px;border: 5px solid #33ccff;background:#fff;position:absolute;right:-27.8%;top:0; z-index:1;}
.hs_left2 .count1:before {display:block;content:""; position:absolute;right:-112px; top:40px; width:18%; height:2px;background:#33ccff;}

.hs_right2 {float:right;width:40%;overflow:hidden;}
.hs_right2 img{display:inline-block;width:480px;height:336px;transition:all 1s;}
.hs_right2:hover img {transform:scale(1.2);transition:all 1s;}


#sub h2 {font-family: 'Poppins', sans-serif;font-size:3.0rem;font-weight:600;line-height:55px;color:#333;letter-spacing:-1px;padding:42px 0 0 0;border-bottom:1px solid #ccc;letter-spacing:-1px;}
#sub h2 span {display:inline-block;margin:0 0 0 6px;font-size:18px;line-height:18px;color:#666;font-weight:300;}

/*전자카탈로그*/
#sub .cont_01 {text-align:center;padding: 50px 0;}
#sub .cont_01 .left,
#sub .cont_01 .right {position:relative;margin: 0 0 180px 0;}
#sub .cont_01 .con_text{display:table;position:absolute; width:280px; height:180px;z-index: 999;}
#sub .cont_01 .con_text div {display:table-cell;text-align:center;vertical-align:middle;box-sizing:border-box;}
#sub .cont_01 .po_l {left:0;bottom:-10%;background:#666;}
#sub .cont_01 .po_r {right:0;bottom:-10%;background:#666;}
#sub .cont_01 .con_text span{display:block;}
#sub .cont_01 .con_text .big_title{font-size:2.0rem; line-height:100%;color:#fff;font-weight:600;z-index: 999;}
#sub .cont_01 .con_text .title,
#sub .cont_01 .con_text .date {font-size:1.2rem; font-weight:200;line-height:100%; color:#fff;}
#sub .cont_01 .con_text .title {font-size:1.6rem; padding:10px 0 4px 0;}

#sub .cont > div {padding: 10px;}
#sub .list { padding:50px 0; }
#sub .list ul{font-size:0;}
#sub .cont {display:inline-block;width:33.333%;text-align:center; margin-bottom: 60px;}


#sub .cont .thumb {position:relative;border:1px solid #eee;height:0;padding-top:56.25%;text-align:center;overflow:hidden;box-sizing:border-box; border-radius:2px;}
#sub .cont .thumb img {width:100%;position: absolute; left:0; right:0; top:0; bottom:0;transition: transform .5s;}
#sub .cont:hover .thumb {cursor:pointer;}
#sub .cont .thumb:hover img { cursor:pointer;
       transform:scale(1.1); /* 마우스 오버시 이미지 크기를 1.1 배만큼 확대시킨다. */
       -o-transform:scale(1.1);
       -moz-transform:scale(1.1);
       -webkit-transform:scale(1.1);}
#sub .cont.thumb:hover img {width:110%;}
#sub .cont .title {font-family: 'Poppins', sans-serif !important;font-size:1.2rem;color:#989898;font-weight:300;}
#sub .title {font-family: 'Poppins', sans-serif !important;font-size:1.2rem;font-weight:300;line-height:100%;padding:10px 0;color:#989898; }
#sub .date {font-family: 'Poppins', sans-serif !important;font-size:1.0rem;font-weight:300;line-height:100%;color:#989898; }

#sub .cont .thumb iframe {position:absolute;left:0px; top:0; width:100%;height:100%;}

/*mobile web*/
#sub .one{width:100% !important;}

/*편집디자인 높이조절*/
#sub .edit_sizing .cont {width:50%;}
#sub .edit_sizing .cont .thumb {padding-top:141%;overflow:hidden;}



/*모바일높이조절*/
#sub .mobile_sizing .thumb {padding-top:182%;}

/*youtube*/
.border_none{border:none !important;}


/*smartweb  portfolio*/
#sub .pr {padding:50px 0;width:100%;margin: 0 auto;}
#sub .pr .thumb {text-align:center;}
#sub .pr .thumb {border-bottom:3px dotted #ececec;padding:50px 0 50px; text-align:center;overflow:hidden;}
#sub .pr .thumb img {width: 90%;}



#footer{background:#ccc;text-align:center;padding:30px 0;}
#footer .logo{background:url("../img/logo_bottom.png") no-repeat;width:181px;height:23px;;margin:0 auto;text-indent:-20000px;overflow:hidden;}
#footer .port,#footer .logo,#footer .copy{color:#6e6e6e;font-weight:500;line-height:38px;font-size:12px;}
#google_translate_element{position:relative;left:0px; top:3px;}
#google_translate_element>span{position:absolute;left:420px;top:0px;text-indent:-3500px;}


 /*detail design*/

#columns{-webkit-column-count:4;-webkit-column-gap:2%;-moz-column-count:4;-moz-column-gap:2%;column-count:4;column-gap:2%;}

.card{display:inline-block;width:88%;padding:6%;margin-bottom:40px;background:#fff;box-shadow:1px 1px 10px #ccc;text-align: center;}
.card img{max-width: 100%;height: auto !important;border-bottom:1px solid #ccc;padding-bottom:7%;margin-bottom:2%;}
.card p{color:#333;margin:0; padding:10px;}
.card:hover {cursor:pointer;}

/*Q&A*/

#sub .contact {padding:100px 0;background-attachment:fixed;width:100%;background:url("../contact/img/q_bg.jpg")no-repeat center center; background-size: cover;}
#sub .contact h1 {font-family: 'Noto Sans KR', sans-serif;color: #fff; text-align: center; font-size: 3.2rem;font-weight: bold;letter-spacing:-1px;}
#sub .contact h1 span {display: block;font-family: 'Noto Sans KR', sans-serif; font-size: 1.6rem;font-weight: 500;padding: 20px 0;}
#sub table{border-collapse:collapse;width:70%;margin:0 auto;}
#sub table td {font-size:1.5rem; padding:10px;}
#sub td {font-weight:500; color:#fff !important;}
#sub input::placeholder ,textarea::placeholder{ font-size:1.5rem; color:#e4e4e4 !important;}
#sub .uk-input, .uk-select, .uk-textarea {font-family: 'Noto Sans KR', sans-serif;background:none !important;border-radius: 6px; color: #fff !important;}
#sub .contact button{display:block; font-family: 'Noto Sans KR', sans-serif; font-size: 1.6rem; color: #fff;text-align: center; background: #33ccff; width: 220px; height: 50px; line-height: 50px; transition: all 0.9s;margin:50px auto 0 auto;}
#sub .contact button:hover{box-shadow: 300px 0 0 0 rgba(0,0,0,0.25) inset, -300px 0 0 0 rgba(0,0,0,0.25) inset;cursor:pointer;}


input[type=text], input[type=password], textarea {
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none}

.br_block{display:none;}





/*map*/
#sub .adress {position:relative;}
#sub .adress .adress_txt{position:absolute;right:20%;top:0;width:450px;height:100%;background:url("../contact/img/lo_bg.png")no-repeat left center;background-size: cover;z-index:999;padding:70px 50px;box-sizing:border-box;}
#sub .adress .adress_txt h3{font-family:'Poppins', sans-serif !important;font-size:4.0rem;font-weight:700;color:#fff; padding-bottom: 10px;border-bottom:2px solid #fff;margin-bottom:20px;}
#sub .adress .adress_txt span{display:block;}
#sub .adress .adress_txt li {font-size:1.7rem;color:#fff;padding:7px 0;}








@media screen and (max-width: 1200px)
{
html{font-size:56%;}
 .wrap{width:90%;}
  .header_pc{display:none;}
   .header_mb{display: block;position:relative;width:100%;height:80px;background:#fff;}
    #mobile-menu i{ padding-left: 20px;padding-top:20px; width: 73px;cursor: pointer;}
   .slide li h2 {width:90%;}
	#mobile-logo a{width:180px;height:80px;display: block;background:url(../img/logo.png) no-repeat center center;color:transparent;background-size:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    .uk-offcanvas-bar{background:#232f3a !Important;width:250px !Important;padding:0 !Important;}
    .uk-nav-default{font-size:15px !Important;}
    .uk-nav>li>a{padding: 7px 0 !Important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700;}
    .uk-nav-parent-icon>.uk-parent>a::after{transform: rotate(270deg);}
    .m_b_menu li a{display: block;
    padding: 7px 0;
    color: #ccc !important;
    font-size: 13px;}
    .uk-nav-default >li >a{color:#fff !Important;}
    .open_bar{padding:20px;}
    .bar_btn{}
    .bar_btn ul{overflow: hidden;
    padding: 10px 0;
    background: #12192d;}
    .bar_btn ul li{
    width: 100%;
    background: #12192d;}
    .bar_btn ul li a{    display: block;
    padding: 10px 20px;
    font-size: 15px;}
	/*menu*/


.main_list > div > div > div {height:0;padding:33px 0;}



.inner{width:90%;}
.adress_img{width:100%;}
#main .mBtn { display:none; }

#columns{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
.modal img {width:70%;height:auto;}
.map img {width:100%;}
.hs_tit{font-size: 20px;}
.hs_right1:before{left: -27.3%;}
.hs_right1 .count1:before {left:-24%;}

.hs_left2:before{right: -28.3%;}
.hs_left2 .count1:before {right:-24%;}

table{width:90%;}
.br_block{display:block;}




}




@media screen and (max-width: 1024px)

{

/*slide*/
.slide .bxslider{display:none;}
.slide .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {display:none;}

/*slide*/
.slide_1024 {display:block;}
.slide_1024 .bx-wrapper {width:100%;margin:0 auto;border:0;}

.slide_1024 li {position:relative;}
.slide_1024 li img {width:100%;}
.slide_1024 li h2{width:90%;font-family:'Poppins', sans-serif; font-size:4.6em;font-weight: 600;line-height:1.2;color:#fff;text-align:center;position:absolute;left:50%;top:30%; transform: translate(-50%,-50%);}
.slide_1024 li h2 span {display:block;font-size:0.38em;line-height:100%;font-weight:300;color:#fff;padding:1em 0  0;}
.slide_1024 .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{bottom:30px !Important;}

.main_list div > div:nth-child(1) div,
.main_list div > div:nth-child(2) div,
.main_list div > div:nth-child(3) div,
.main_list div > div:nth-child(4) div {background:none;}
.main_list > div > div {display:inline-block;width:50%;}
.main_list > div > div:nth-child(1),
.main_list > div > div:nth-child(2){margin-bottom:24px}
.main_list > div > div:nth-child(2):after{display:none;}
.main_list div > div > div img { display:inline-block; width:32px;position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.main_list div > div p {font-family: 'Poppins', sans-serif;font-size:16px; color:#fff;padding-top:8px;}


#sub_head .cont {width:100%;right:0; bottom:0; left:50%; top:50%;transform:translate(-50%,-50%);}
#sub_head .cont span {display:block;}

/*Certificate*/

.Certi ul li {display:inline-block;width:100%; margin:0 0 40px 0;padding:0 10%;text-align:left;}
.Certi ul li:last-child {margin-bottom:0;}



/*smart_tool*/
.smart_tool li {float:left; width:49%;margin: 0 2% 4% 0%;}
.smart_tool ul li:nth-child(2),
.smart_tool ul li:nth-child(4){margin-right:0;}



.contact_us div.left {width:100%;}
.contact_us div.right {float:none;width:100%;text-align:center;padding-left:0px;padding-bottom:40px;}
.contact_us div.right div.touch:before {left:50%;top:-20px; transform:translateX(-50%);}
.contact_us div.right div.cont div.call{margin-right:2%;}


/*전자카달로그*/
#sub .cont_01 .con_text{position:relative; width:100%;height:0;padding:30px 0;margin: 2% 0 0;z-index:0;}
#sub .cont_01 .con_text div{text-align:left;padding:0 4%;}
#sub .cont_01 .con_text div span{}
#sub .cont_01 .po_l {bottom:0%;}
#sub .cont_01 .po_r {bottom:0%;}

#columns{-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
#sub .cont{width:50%;}


}




@media screen and (max-width:960px){


/*history */

.hs_content {position:relative; margin:0;}
.hs_content:before {display:none;}
.hs_tit{font-size:32px; color:#173e64; height:120px;line-height:120px;letter-spacing:-1px;text-align:center;}
.hs_box, .hs_box2 {padding:0;}
.hs_box{ display: grid !Important;}
.hs_box2{ display: grid !Important;}
.hs_left1 {float:none; width:100%;}
.hs_left1 img{width:100%;transition:all 1s;height:auto;}
.hs_left1:hover img {transform:scale(1.2);transition:all 1s;}
.hs_right1 {float:none;width:100%;margin-left:0;text-align:left;padding:50px 0;}
.hs_right1 .count1 {font-size: 3.2rem;margin-top:0}
.hs_right1 .count2 {font-size: 3.2rem;}
.hs_right1 ul{border-bottom:1px dotted #e9e9e9;padding-bottom: 20px; }
.hs_right1 ul li{font-size:1.6rem;}
.hs_right1:before{display:none;}
.hs_right1 .count1:before {display:none;}
.hs_left2 {float:none;width:100%;margin-right:0;text-align:left;order:2;padding:50px 0;}
.hs_left2 .count1 {font-size: 3.2rem;margin-top:0;}
.hs_left2 .count2 {font-size: 3.2rem;}
.hs_left2:before{display:none;padding: 50px 0;}
.hs_left2 .count1:before {display:none;}
.hs_left2 ul {border-bottom:1px dotted #e9e9e9;padding-bottom: 20px;}
.hs_left2 ul li{text-align: left;font-size:1.6rem;}
.hs_right2 {float:none;width:100%;order:1;}
.hs_right2 img{width:100%;height:auto;}


}





 @media screen and (max-width:992px)
{

.slide li h2 {font-size:4.2em;}
.skill > div > div {width:100%;}


/*about*/
.about div.left{ float:none;width:100%;text-align:center;}
.about div.left img {display:inline-block;}
.about div.right{ float:none; width:100%;text-align:center;padding:40px 0 0 0;}


}




 @media screen and (max-width:640px)

{

html{font-size:50%;}
/*smart_tool*/
.smart_tool li {float:left; width:100%;margin:0;margin: 0 0 10% 0;}
.smart_tool li:last-child{margin:0;}

.contact_us div.right div.cont {border: 1px solid #cfe4ea;}
.main_list > div > div:after{display:none;}



/*slide*/
.slide .bxslider,
.slide_1024 .bxslider {display:none;}
.slide_640 {display:block;}
.slide_640 .bx-wrapper {width:100%;margin:0 auto;border:0;}
.slide_640 li {position:relative;}
.slide_640 li img {width:100%;}
.slide_640 li h2{width:90%;font-family:'Poppins', sans-serif; font-size:4.6em;font-weight: 600;line-height:1.2;color:#fff;text-align:center;position:absolute;left:50%;top:30%; transform: translate(-50%,-50%);}
.slide_640 li h2 span {display:block;font-size:0.38em;line-height:100%;font-weight:300;color:#fff;padding:1em 0 0;}
.slide_640 .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{bottom:30px !Important;}
.slide_1024 .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {display:none;}

.contact_us > div { padding-top: 100px;}
.contact_us div.right div.touch:before{height:3px;}


#columns{-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}


#sub .list li{padding-right:0;}
#side{background:#404f79;padding:0 0 10px 0;}
#side .cont{float:none;width:100%;}
#side .wrap{padding:10px 20px;height:auto;border:0 none;}
#side .cont:first-child .wrap{border:0 none;}
#side .cont:last-child {display:none;}
#side h3{line-height:24px;text-align:center;}

/*location*/
#sub .adress .adress_txt{width:100%;top:0;right:0;left:0;bottom:0;position:relative;}
#sub .adress .adress_txt li{font-size:15px;}

#sub h2 {display:none;}
#sub .list {padding:52px 0;}
#sub .cont {display: block;}
#sub .cont > div { padding: 0;}
#sub .list li {width:100%;float:none;margin:0 auto;text-align:center;margin-bottom: 52px;}
#sub .list li:hover {cursor:pointer;}
#sub .list .thumb:hover img {width:100%;margin:0;}
#sub .list .thumb {height:auto;background: #fff;}


/*편집디자인 높이조절*/
#sub .edit_sizing .cont {width:100%;}



/*modal*/
.modal {overflow:auto;}
.modal img {width:80%;height:auto;}
#sub .cont {padding:20px 0;}
#sub .cont img {width:90%;}
#sub .cont_01 .con_text {margin:0;}
#sub .cont_01 .left,
#sub .cont_01 .right {margin: 0 0 100px 0;}




 }





 @media screen and (max-width:480px)
  {
.slide_640 li h2{font-size:3.8em;}

#detail_wrap{	max-width:480px;min-width:200px;}



}