@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700;800&display=swap');
#ifrm {
    width: 100%;
   min-height: 300px;
    overflow: hidden;
    border: 0;
}


/* pc */
@media screen and (min-width:1300px){
   #memofile { max-width:1250px; }
}
/* tablet */
@media screen and (min-width:768px) and (max-width:1024px){
   #memofile { width:99%; }
}
/* mobile */
@media screen and (min-width:0) and (max-width:767px){
   #memofile { width:99%; }
}

body,div,p,h1,h2,h3,h4,h5,h6,ol,li,dl,dt,dd,ul,pre,form,fieldset,legend,button,table,th,td {
border:0;
margin:0;
padding:0;
}

ul,ol,li,dl {
list-style:none;
}

img {
border:0;
vertical-align:middle;
font-size:0;
}

address,caption,cite,code,dfn,em,var {
font-style:normal;
}

a {
text-decoration:none;
color:#333;
}

a:hover,a:active,a:focus {
text-decoration:none;
}

table {
border:0;
border-spacing:0;
border-collapse:collapse;
padding:0;
}

strong {
font-weight:500;
}

h1,h2,h3,h4,h5,h6 {
font-weight:400;
}

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,main {
display:block;
}

body,th,td,input,select,textarea,button {
color:#333;
font-size:16px;
line-height:1.5;
letter-spacing:-0.05em;
font-family: 'Pretendard';
font-weight:400;
}

:focus {
outline:none;
}

.blind,.gnb-open-btn,.gnb-close-btn,.mobile-gnb {
display:none;
}

.gnb:after,.sub-content:after {
clear:both;
display:block;
height:0;
content:"";
visibility:hidden;
}

.slick-slide {
display:inline-block;
}

header {
width:100%;
background:#fff;
}

.header-logo {
position:absolute;
left:100px;
text-align:left;
z-index:999;
top:10px;
}

header.drop,
header.on{
background:#fff;
box-shadow: 0 0 12px rgb(33 33 33 / 20%);
}

.header-logo a{
display:block;
width:95px;
}

.header-logo a img{
width:100%;
}

.header-area{
width:96%;
max-width:1280px;
margin:0 auto;
z-index:999;
position:relative;
height:100px;
}

.tnb{
border:1px #e0e0e0 solid;
border-radius:9999px;
display:inline-block;
position:absolute;
right:0;
top:50%;
margin-top:-17px;
}

.tnb a{
display:inline-block;
font-size:14px;
color:#666;
height:32px;
line-height:32px;
position:relative;
padding:0 15px;
border-left:1px #e0e0e0 solid;
}

.tnb a:first-child{
border-left-width:0;
}

.tnb a img{
width:28px;
}


.header-gnb {
height:58px;
width:100%;
}

.gnb{
width:100%;
max-width:1280px;
margin:0 auto;
box-sizing:border-box;
text-align:center;
}

.gnb > li {
position:relative;
text-align:center;
box-sizing:border-box;
vertical-align:top;
display:inline-block;
}


.gnb > li:hover > a{
font-weight:600;
}

.gnb > li > a {
display:block;
position:relative;
font-size:20px;
letter-spacing:0em;
padding:0 20px;/*45*/
line-height:100px;
}

/*.gnb > li > ul {
display:none;
position:absolute;
left:50%;
margin-left:-80px;
width:160px;
z-index:5;
background:#377cda;
box-sizing:border-box;
padding:5px 0;
border-radius:5px;
}*/
.gnb > li > ul:after{
content:"";
display:block;
background:url(img/menu-arrow.png);
width:12px;
height:7px;
position:absolute;
top:-7px;
left:50%;
margin-left:-6px;
}

.gnb > li > ul{
position:absolute;
display:none;
background:#273890;
width:160px;
left:50%;
margin-left:-80px;
top:100px;
}

.gnb > li:hover > ul {
height:auto;
display:block;

}

.gnb > li > ul li {
height:30px;
line-height:30px;
}

.gnb > li > ul{
padding-top:20px;
padding-bottom:20px;
box-sizing:border-box;
}

.gnb > li > ul li:first-child{
border-top-width:0;
}

.gnb > li > ul li a {
display:block;
color:rgba(255,255,255,0.7);
letter-spacing:0em;
padding:5px 0;
}


.gnb > li > ul li:hover a{
color:#fff;
font-weight:500;
}

.mobile-open-btn, .all-menu-area, .search-btn{
display:none;
}

/*footer*/
footer{
width:100%;
background:#282b3b;
box-sizing:border-box;
padding:55px 5% 45px;
text-align:center;
box-sizing:border-box;
}


footer span{
font-size:25px;
color:#fff;
font-weight:600;
line-height:1.1;
margin-bottom:20px;
display:block;
}

.foot-info p{
margin-bottom:15px;
color:#fff;
display:inline-block;
margin:0 10px;
letter-spacing:0em;
opacity:0.8;
}

.foot-info p strong{
font-weight:600;
}


.foot-copy{
margin-top:30px;
padding-top:20px;
border-top:1px rgba(255,255,255, 0.1) solid;
color:#fff;
letter-spacing:0;
opacity:0.6;
font-weight:300;
}


.side-quick{
position:fixed;
right:20px;
bottom:50px;
z-index:9999;
}

.side-quick li{
margin-top:15px;
}
.side-quick a{
display:block;
width:70px;
height:70px;
border-radius:9999px;
overflow:hidden;
}

.side-quick a img{
width:100%;
}

/********************* main *********************************/
.caption, .slick-slide::before, .slick-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.slick-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-slider{
width:100%;
overflow:hidden;
margin-bottom:-40px;
position:relative;
}
.slick-slide {
    position: relative;
    height: 55.8vw;
}

.slick-slide video{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}
.slick-slide iframe {
    /*position: relative;*/
    pointer-events: none;
}
.slick-slide figure {
    position: relative;
    height: 100%;
}
.slick-slide .slide-image {
    opacity: 1;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all .8s ease;
	position:relative;
	top:0%;
}
.slick-slide .slide-image.show {
    opacity: 1;
}

.slick-slide .slide-image img{
position:absolute;
left:50%;
top:50%;
}
.slick-slide .image-entity {
    width: 100%;
    opacity: 0;
    visibility: hidden;
}
.slick-slide .loading {
    position: absolute;
    top: 44%;
    left: 0;
    width: 100%;
}
.slick-slide .slide-media {
    animation: slideOut 0.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
.slick-slide.slick-active {
    z-index: 1;
}
.slick-slide.slick-active .slide-media {
    animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
.slick-slide.slick-active .caption {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.7s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s;
}
.caption {
    position: absolute;
    top: 43%;
    left: 10%;
    text-align: left;
    color: #fff;
    margin: 0;
    font-size: 70px;
    font-weight: bold;
    letter-spacing: .02em;
    opacity: 0;
    z-index: 1;
    transition: all .3s ease;
    transform: translateY(100px);
}

.cp2{
font-size:30px;
font-weight:300;
}
.slick-arrow{
position:absolute;
right:4%;
top:50%;
margin-top:-45px;
height:90px;
line-height:90px;
font-size:60px;
opacity:0.9;
background:transparent;
Z-INDEX:999;
color:#fff;
}

.slick-arrow.slick-prev{
right:auto;
left:4%;
}


@keyframes slideIn {
    from {
        filter: blur(15px);
    }
    to {
        filter: blur(0);
    }
}
@keyframes slideOut {
    from {
        filter: blur(0);
    }
    to {
        filter: blur(15px);
    }
}

@keyframes slideIn {
    from {
        filter: blur(15px);
    }
    to {
        filter: blur(0);
    }
}
@keyframes slideOut {
    from {
        filter: blur(0);
    }
    to {
        filter: blur(15px);
    }
}



.img{
width:100%;
padding-top:61%;
overflow:hidden;
position:relative;
}

.img img{
width:100%;
position:absolute;
left:50%;
top:50%;
}
@keyframes vt-ani {
	0 {opacity:0; -moz-transform:translatey(20%); -ms-transform:translatey(20%); transform:translatey(20%); }
	100% {opacity:1; moz-transform:translatey(0);  -ms-transform:translatey(0); transform:translatey(0);}
  }
.slick-list {
position:relative;
z-index:1;
}

#visual {
position:relative;
height:100%;
margin:0 auto;
margin-bottom:-7px;
z-index:1;
width:100%;
max-width:2000px;
overflow:hidden;
}

.visual-img {
position:relative;
}

.visual-img-bg {
position:relative;
overflow:hidden;
}

.visual-img-bg img{
position:relative;
left:50%;
margin-left:-1000px;
}

.visual-text{
position:absolute;
top:30%;
left:100px;
font-size:50px;
font-weight:700;
letter-spacing:-0.05em;
}

.slick-active .visual-text p{opacity:0;  -moz-transform:translatey(20%); -ms-transform:translatey(20%); transform:translatey(20%);  animation-timing-function: ease-out; animation-name: vt-ani;  animation-duration: 0.5s;animation-delay: 0.2s; animation-fill-mode:both;}
.slick-active .visual-text p.vt02{animation-delay: 0.8s; font-weight:300;}

.slick-dots {
z-index:999;
width:600px;
position:absolute;
z-index:9;
left:50%;
margin-left:-300px;
bottom:70px;
text-align:center;
}

.slick-dots li {
display:inline-block;
margin:0 5px;
}

.slick-dots li button {
display:block;
background:transparent;
width:18px;
height:18px;
font-size:0;
box-sizing:border-box;
border-radius:9999px;
border:3px #fff solid;
box-shadow: 1px 1px 2px rgb(0,0,0,0.1);
}

.slick-dots li.slick-active button {
background:#fff;
}

.product-area{
width:100%;
display:flex;
}

.product-area section{
width:25%;
text-align:center;
box-sizing:border-box;
}

.product-area section a{
display:flex;
color:#fff;
line-height:1.1;
justify-content: center;
align-items: center;
height:600px;
width:100%;
position:relative;
overflow:hidden;
}

.product-area section a:hover .pro-bg{ 
-webkit-transform: scale(1.2); 
transform: scale(1.2);
}


.pro-bg{
background-image:url(img/bg01.jpg);
background-position:50% 50%;
background-size:cover;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
-webkit-transition: transform .3s ease-out;
transition: transform .3s ease-out;
}

#accessories .pro-bg{
background-image:url(img/bg02.jpg);
}
#gripper .pro-bg{
background-image:url(img/bg03.jpg);
}
#package .pro-bg{
background-image:url(img/bg04.jpg);
}

.product-box{
width:100%;
}
.pro-tit{
position:relative;
z-index:2;
}
.pro-tit span{
opacity:0.2;
font-family: 'Poppins', sans-serif;
font-weight:200;
font-size:21px;
letter-spacing:0.1em;
text-transform: uppercase;
margin-bottom:5px;
display:block;
}

.pro-tit p{
opacity:0.2;
font-family: 'Poppins', sans-serif;
font-weight:700;
font-size:28px;
letter-spacing:0.1em;
text-transform: uppercase;
}

.pro-tit strong{
font-weight:700;
letter-spacing:0;
font-size:40px;
padding:15px 0;
text-transform: uppercase;
}

.pro-tit div{
font-size:18px;
font-weight:300;
opacity:0.7;
line-height:1.3;
}

.pro-btn{
display:inline-block;
border-bottom:2px #fff solid;
margin-top:30px;
position:relative;
z-index:2;
}

#notice{
width:95%;
max-width:1280px;
margin:80px auto;
position:relative;
}

.notice-tit{
line-height:1.1;
}

.notice-tit span{
font-size:30px;
opacity:0.8;
}

.notice-tit div{
font-family: 'Poppins', sans-serif;
font-weight:400;
font-size:55px;
letter-spacing:0;
text-transform: uppercase;
color:#3a3d4c;
}

.notice-tit div strong{
font-weight:700;
}

.notice-more{
display:inline-block;
position:absolute;
right:0;
top:40px;
color:#fff;
background:#3a3d4c;
padding:7px 25px;
border-radius:100px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.notice-more:hover{
background:#097ccc;
}

.notice-list{
padding-top:40px;
display:flex;
}

.notice-list li{
width:30%; 
box-sizing:border-box;
margin:0 2%;
position:relative;
}

.notice-list li:after{
content:"";
display:block;
width:1px;
height:100%;
left:-8%;
top:0;
background:#e0e0e0;
position:absolute;
}

.notice-list li a{
display:block;
width:100%;
box-sizing:border-box;
}

.notice-list li:first-child{
width:30%;
margin:0;
margin-right:2%;
}

.notice-list li:first-child:after{
display:none;
}

.notice-list li span{
color:#192ea6;
font-weight:600;
font-size:20px;
}

.notice-list li:hover{
text-decoration:underline;
}
.notice-list li:hover em{
font-weight:700;
color:#2e45a8;
}
.notice-list li p{
font-weight:600;
color:#1f2233;
font-size:22px;
height:2.4em;
line-height:1.2em;
overflow:hidden;
word-break:keep-all;
margin:10px 0 20px;
}
.notice-list li div{
font-size:18px;
color:#444;
font-weight:300;
height:2.8em;
line-height:1.4em;
max-height:80px;
overflow:hidden;
word-break:keep-all;
}
.notice-list li em{
margin-top:20px;
display:inline-block;
font-size:18px;
letter-spacing:0;
color:#1d1d1d;
}

#main-quick{
width:100%;
background:url(img/mq-area-bg.jpg);
background-size:cover;
background-position:50% 50%;
border:1px #dfe6f1 solid;
border-width:1px 0;
}

.main-quick-area{
display:table;
width:96%;
max-width:1280px;
margin:0 auto;
padding:65px 0 55px;
}

.mq-info{
display:table-cell;
width:50%;
vertical-align:top;
}

.mqi-tit{
line-height:1.1;
}

.mqi-tit span{
color:#283990;
font-size:30px;
}

.mqi-tit div{
font-family: 'Poppins', sans-serif;
font-weight:700;
background: -webkit-linear-gradient(#273890, #314ab3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:70px;
}

.mq-ul{
color:#2e396f;
letter-spacing:0em;
margin-top:5px;
}

.mq-li1 strong{
font-family: 'Poppins', sans-serif;
font-weight:700;
font-size:34px;
display:inline-block;
margin-left:10px;
}

.mq-li2 dt, 
.mq-li2 dd{display:inline-block; text-shadow: 0 0 10px rgb(255,255,255,0.9)}

.mq-li2 dt{font-weight:600; margin-right:5px;}
.mq-li2 dd{margin-right:25px;}

.mq-btn{
display:table-cell;
width:50%;
}

.mq-btn li{
display:inline-block;
margin-left:20px;
}

.mq-btn li a{
display:table;
}


.mq-btn li a > div{
display:table-cell;
width:170px;
height: 170px;
vertical-align:middle;
border-radius:99999%;
text-align:center;
line-height:1.1;
color:#fff;
font-size:20px;
}

.mq-btn li a > div img,
.mq-btn li a > div i{
display:block;
margin:0 auto;
}

.mq-btn li a > div img{
width:75px;
margin-top:5px;
margin-bottom:10px;
}

.mq-btn li.mq1 a > div{
background-image:url(img/mq1-bg.gif);
}

.mq-btn li.mq2 a > div{
background-image:url(img/mq2-bg.gif);
}

.mq-btn li.mq3 a > div{
background-image:url(img/mq3-bg.gif);
}

.mq-btn li.mq2 a > div img{
width:55px;
}


#main-location{
height:500px;
overflow:hidden;
}

#main-location .root_daum_roughmap .wrap_map{
height:550px !important;
}

@keyframes blink-effect {
	50% {
		background:#1a3c7d;
	}
  }
  

.banner{
background:#1483c9;
width:100%;
position:relative;
z-index:100;
animation: blink-effect 0.8s step-end infinite;
}

.banner a{
display:block;
padding:20px;
text-align:center;
background-image: linear-gradient( rgba(255,255,255,0.1), rgba(0,0,0,0.1));
}

.banner a p,
.banner a div{
display:inline-block;
color:#fff;
line-height:50px;
font-size:20px;
}

.banner a p{
font-size:22px;
font-weight:500;
}

.banner a div{
background:#f0c000;
padding:0 40px;
margin-left:30px;
border-radius:100px;
color:#1d2c4c;
}



.sub-tit{
width:100%;
height:380px;
display:table;
background-color:#333;
background-size:cover;
background-position:50% 50%;
color:#fff; 
background-image:url(img/sub-visual1.jpg);
}


.st1{
background-image:url(img/sub-visual1.jpg);
}

.sub-tit-area{
display:table-cell;
width:100%;
vertical-align:middle;
text-align:center;
}
.sub-tit h2{
font-size:56px; 
text-shadow: 0px 0px 10px rgb(0,0,0,0.5);
font-weight:700;
}
.sub-nav{
font-size:15px;
opacity:0.6;
}

.sub-nav span{
display:inline-block;
margin:0 5px;
}

.sub-nav p{
display:inline-block;
letter-spacing:0em;
}

.snb{
border-bottom:1px #e0e0e0 solid;
width:100%;
}

.snb ul{
width:100%;
max-width:1280px;
margin:0 auto;
display:flex;
border-right:1px #e0e0e0 solid;
}

.snb ul li{
width:20%;
}

.snb.snb2 ul li{
width:33.333%;
}

.snb.snb3 ul li{
width:25%;
}


	
.snb ul a{
display:block;
height:58px;
line-height:58px;
border-left:1px #e0e0e0 solid;
width:100%;
text-align:center;
font-size:18px;
}

.snb ul li.current a{
background:#273890;
color:#fff;
font-weight:500;
border-color:#273890;
}

.sub-content{
width:96%;
max-width:1280px;
margin:0 auto;
padding:100px 0 80px;
box-sizing:border-box;
}

/*1-1회사소개, 1-2Ceo인사말*/
.s11-top{
background:url(img/img11.jpg);
background-size:cover;
background-position:50%;
padding:60px 0 50px;
text-align:center;
color:#fff;
font-size:26px;
font-weight:600;
text-shadow: 0px 0px 5px rgba(0,0,0,0.9);
}

.s11-top.s11-top12{
background-image:url(img/img12.jpg);
}

.s11-top img{
width:80%;
max-width:160px;
margin-bottom:10px;
}

.s11-text{
text-align:center;
margin-top:50px;
word-break:keep-all;
}

.s11-t1{
font-size:23px;
color:#103c7e;
font-weight:600;
margin-bottom:20px;
}

.s11-t2{
font-size:20px;
font-weight:300;
line-height:1.6;
}

.s11-t2 p{
margin-top:15px;
}

/*1-3Vision*/
.sub13 dl{
border:1px #e0e0e0 solid;
display:table;
width:100%;
table-layout:fixed;
margin-top:20px;
border-radius:20px;
overflow:hidden;
}

.sub13 dt{
display:table-cell;
width:150px;
font-weight:700;
font-size:1.5em;
padding:25px;
vertical-align:top;
text-align:center;
color:#fff;
}

.sub13 dd{
display:table-cell;
padding:25px;
padding-left:50px;
}

.s13-dl1 dt{
background-color:#097ccc;
vertical-align:middle;
}

.s13-dl1 dd{
font-weight: 600;
font-size:1.25em;
}

.s13-dl2 dt{
background-color:#3660bd;
}

.s13-dl2 dd ul{
display:flex;
}

.s13-dl2 dd ul li{
width:32%;
box-sizing:border-box;
text-align:center;
margin-left:2%;

}

.s13-dl2 dd ul li:first-child{
margin-left:0;
}
.s13-dl2 dd ul li div{
display:table;
width:130px;
height:130px;
margin:0 auto;
border-radius:99999px;
overflow:hidden;
position:relative;
z-index:2;
}
.s13-dl2 dd ul li span{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
background:#4d6cad;
color:#fff;
padding:15px 0;
box-sizing:border-box;
font-size:1.125em;
font-weight:500;
}

.s13-dl2 dd ul li span img{
width:50px;
display:block;
margin:0 auto;
}


.s13-dl2 dd ul li p{
box-sizing:border-box;
padding:80px 0 20px;
word-break:keep-all;
line-height:1.7;
margin-top:-65px;
position:relative;
z-index:1;
background:#ecf1f8;
}

.s13-dl3 dt{
background-color:#273974;
}

.s13-dl3 dd ul li span{
font-size:1.125em;
font-weight:500;
color:#222e55;
}

.s13-dl3 dd ul li{
border-top:1px #e0e0e0 dashed;
padding:10px 0;
}

.s13-dl3 dd ul li:first-child{
border-top-width:0;
padding-top:0;
}


/*1-4연혁*/
.sub14-box{
display:table;
}
.s14-top{
display:table-cell;
width:700px;
font-size:1.85em;
padding-top:10px;
font-weight:300;
color:#2e396f;
}

.s14-top span{
font-weight:700;
font-size:1.2em;
}

.s14-top strong{
font-weight: 700;
background: -webkit-linear-gradient(#273890, #314ab3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:55px;
display:block;
text-transform: uppercase;
letter-spacing: 0;
font-family: 'Poppins', sans-serif;
}

.s14-top strong:before{
content:"";
display:block;
width:80px;
height:10px;
background:#273890;
margin:10px 0 30px;
}

.ul14{
display:table-cell;
margin-left:180px;
border-left:2px #e0e0e0 solid;
margin-top:50px;
vertical-align:top;

}
.ul14 li{
position:relative;
padding-left:20px;
box-sizing:border-box;
margin:50px 0;
}



.ul14 li:after{
content:"";
display:block;
width:8px;
height:8px;
border-radius:100px;
position:absolute;
background:#097ccc;
left:-5px;
top:10px;
}

.ul14 span{
position:absolute;
left:-180px;
text-align:center;
display:block;
font-weight:600;
background-color:#097ccc;
color:#fff;
border-radius:999px;
width:150px;
letter-spacing:0em;
padding:7px 0;
top:-5px;
font-size:1.125em;
}

.ul14 div{
display:table;
}

.ul14 em{
font-weight:600;
font-size:1.125em;
color:#075892;
display:table-cell;
width:180px;
}

.ul14 p{
display:table-cell;
}


/*1-5뉴스&미디어*/
.list-type3{
display:flex;
flex-wrap: wrap;
}

.list-type3 li{
width:49%;
margin-left:2%;
margin-bottom:30px;
}

.list-type3 li:nth-child(2n+1){
margin-left:0;
}

.lt3-text{
text-align:center;
margin-top:15px;
}

.lt3-text p{
font-size:1.25em;
}

.lt3-text span{
color:#666;
}

/*2사업분야*/
.dl21 dt{
font-weight:700;
font-size:32px;
margin-bottom:15px;
}

.dl21{
margin-top:60px;
border-top:1px #e0e0e0 solid;
padding-top:60px;
}

.dl21 img{
width:100%;
}

.dl21:first-child{
border-top-width:0;
margin-top:0;
padding-top:0;
}

.dl21-p1{
color:#283990;
font-size:22px;
font-weight:500;
}

.cl21-ul1{
display:flex;
flex-wrap: wrap;
}

.cl21-ul1 li{
width:23.5%;
margin-left:2%;
margin-bottom:25px;
text-align:center;
}

.cl21-ul2{
margin-top:20px;
display:flex;
}
.cl21-ul2 li{
width:45%;
margin-left:2%;
position:relative;
}

.cl21-ul2 li:first-child{
margin-left:0;
}

.cl21-ul2 li p{
background:#213268;
color:#fff;
padding:20px 0;
text-align:center;
font-size:20px;
font-weight:500;
position:absolute;
width:100px;
line-height:1.1;
}



.cl21-ul1 li:nth-child(4n+1){
margin-left:0;
}

.cl21-ul1 li div{
box-sizing:border-box;
border:1px #e0e0e0 solid;
border-top-width:0;
padding:15px;
text-align:left;
height:80px;
}

.cl21-ul1 li div span{
display:block;
position:relative;
padding-left:10px;
box-sizing:border-box;
word-break:keep-all;
}

.cl21-ul1 li div span:after{
position:absolute;
width:3px;
height:3px;
content:"";
display:block;
background:#333;
border-radius:99999px;
left:0;
top:10px;
}

.cl21-ul1 li p{
color:#fff;
font-weight:600;
font-size:1.125em;
background:#283990;
padding:15px 0;
position:relative;
}

.cl21-ul1 li:nth-child(even) p{
background:#2c3044;
}

.cl21-ul1 li p:after{
display:block;
width:30px;
height:15px;
content:"";
position:absolute;
background:url(img/arrow.png);
background-size:cover;
bottom:-15px;
left:50%;
margin-left:-15px;
}

.cl21-ul1 li:nth-child(even) p:after{
background:url(img/arrow-even.png);	
}

.dl21-box{
display:flex;
align-items: flex-end
}

.dl21-b1{
width:60%;
}

.dl21-b2{
width:35%;
padding-left:5%;
}

.dl21-box div img{
width:100%;
}



/*3 제품*/
.sub-tab{
text-align:center;
}


.sub-tab li{
display:inline-block;
}

.sub-tab input{
display:inline-block;
border:0;
background:transparent;
font-size:1.125em;
}

.sub-tab input:hover{
color:#000;
text-decoration:underline;
}

.sub-tab li.current input{
color:#314ab3;
font-weight:600;
}

.sub-tab li:before{
content:"";
display:inline-block;
width:1px;
height:16px;
background:#e0e0e0;
margin:0 5px;
}

.sub-tab li:first-child:before{
display:none;
}

.list-type2{
margin-top:30px;
border-bottom:1px #e0e0e0 solid;
}


.list-type2 li{
border-top:1px #e0e0e0 solid;
display:table;
width:100%;
table-layout:fixed;
margin-top:20px;
}

.lt2-img{
display:table-cell;
width:220px;
vertical-align:middle;
padding:20px 0;
overflow:hidden;
text-align:center;
}

.lt2-img img{
width:100%;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transition: all 0.3s ease-in-out; 
}

.lt2-img img:hover{
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}

.lt2-img a{
display:block;
}

.lt2-text{
display:table-cell;
vertical-align:middle;
padding:20px;
padding-left:60px;
}

.lt2-t1{
font-weight:600;
font-size:1.25em;
}

.lt2-t2{
color:#555;
margin:10px 0 20px;
word-break:break-all;
}

.lt2-btn a{
display:inline-block;
background:#333;
color:#fff;
padding:10px 20px;
border-radius:2px;
margin-right:10px;
margin-bottom:10px;
transition:all .3s ease;
}

.lt2-btn a i{
margin-right:5px;
font-size:1.125em;
vertical-align:-2px;
}

.lt2-btn a.btn-pdf{
background:#0878ca;
}

.lt2-btn a.btn-buy{
background:#273a76;

}

.lt2-btn a:hover{
background:#e57819;
}




/*4-1 적용사례*/
.list-type1 li{
box-sizing:border-box;
margin-bottom:25px;
}

.list-type1 li dt{
display:table; 
width:100%;
table-layout: fixed;
box-sizing:border-box;
background:#1a4ebe;
}
.list-type1 li dt span{
display:table-cell;
padding:15px;
background:#25357c;
width:50px;
text-align:center;
color:#fff;
font-weight:600;
font-size:1.5em;
}

.list-type1 li dt p{
display:table-cell;
padding:15px;
vertical-align:middle;
font-size:1.25em;
font-weight:500;

padding-left:25px;
color:#fff;
}

.list-type1 li dd{
display:table;
table-layout:fixed;
width:100%;
border:1px #e0e0e0 solid;
border-top-width:0;
box-sizing:border-box;
}

.lt1-youtube{
display:table-cell;
width:35%;
padding:20px;
}
.lt1-y-box{
position:relative; 
overflow:hidden; 
width:100%; 
padding-top:56.25%;
}
.lt1-y-box iframe,
.lt1-y-box object,
.lt1-y-box embed{
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%;
}

.lt1-text{
display:table-cell;
vertical-align:middle;
padding:20px;
word-break:keep-all;
}

/*상세보기*/
#detail{width:100%; margin:0 auto;}
.detail-img{width:40%; padding-top:35%; position:relative; overflow:hidden;box-sizing:border-box; float:left; border:1px #efefef solid}
.detail-img img{margin:0 auto; top:0; width:100%; position:absolute;}
.detail-top:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
.detail-info{box-sizing:border-box; padding-left:30px; transform:skew(-0.03deg); width:55%; float:right; box-sizing:border-box;}
.detail-info h2{font-weight:800; font-size:22px;}

.detail-btn{text-align:center;}
.detail-btn a{display:inline-block; line-height:50px; text-align:center; width:29%; box-sizing:border-box; margin-left:1%; background:#333; color:#fff; vertical-align:top;transition: all 0.3s ease-in-out; }
.detail-btn a:hover{background:#333; border-color:#333; color:#fff;}
.detail-btn i{font-size:20px; vertical-align:-10%; padding-right:5px;}
.detail-btn .db-purchase{background:#0a59b2; color:#fff; margin-left:0;}
.detail-btn .db-buy{background:#273a76;}
.detail-btn:after{clear:both; content:"."; display:block; height:10px; visibility:hidden;}

.detail-li {padding:30px 0 50px; min-height:180px; border-bottom:1px #e0e0e0 solid; margin-bottom:30px;}
.detail-li li{position:relative; margin-top:20px;}
.detail-li li span{position:absolute; left:0; padding-left:10px; color:#2d4047;}
.detail-li li span:after{content:""; display:block; width:5px; height:5px; border-radius:50%; background:#c0cbcf; position:absolute; left:0; top:10px; font-weight:500; }
.detail-li li p{box-sizing:border-box; padding-left:180px; color:#666;}

.detail-content{padding-top:50px; margin-top:30px; border-top:3px solid #333;}


/*페이징*/
.paging{
width:95%;
max-width:1200px;
margin:30px auto 0;
text-align:center;
}

.paging a,
.paging strong{
display:inline-block;
height:35px;
line-height:35px;
width:25px;
box-sizing:border-box;
color:#777;
}

.paging .page-prev{
margin-right:10px;
border:1px #e0e0e0 solid;
width:35px;
}

.paging .page-next{
margin-left:10px;
border:1px #e0e0e0 solid;
width:35px;
}

.paging strong{
background:#45525f;color:#fff;
width:35px;
}

	
/*5-4오시는길*/
.location ul{
margin-top:20px;
}
.location ul:after{
clear:both;
display:block;
height:0;
content:"";
visibility:hidden;
}
.location li{
width:50%;
font-size:1.125em;
margin-top:10px;
float:left;
}

.location li span{
display:inline-block;
padding-right:10px;
font-weight:700;
color:#263b7e;
}

.location  li p{
display:inline-block;
}

.location-box{
background:#f6f7f8;
border:1px #e7eaee solid;
box-sizing:border-box;
padding:15px 25px;
font-size:0.95em;
margin-top:15px;
}
.location-box p{
padding:3px 0;
color:#54565e;
}




.tbl{position:relative;float:left;width:100%;border-top:5px solid #449ef9;margin-bottom:10px;}
.tbl table{float:left;width:100%;}
.tbl table .hh {text-align:center;background:#ffffff;border-bottom:5px solid #449ef9;}
.tbl table .hh img{margin:0 20%;width:60%;max-width:400px;}

.tbl table th{text-align:center;font-size:16px;font-weight:400;color:#000;background:#f0f0f0;width:22%;}
.tbl table td{font-size:14px;color:#555;border-left:1px solid #b2b2b2;}
.tbl table th,.tbl table td{padding:10px;border-bottom:1px solid #b2b2b2;}

/* 시공문의 */
.tbl table td b{float:left;width:100%;font-size:16px;margin-top:10px;font-weight:400;}
.tbl table td span{float:left;height:44px;line-height:44px;font-size:26px;margin:0 2px;font-weight:400;}
.tbl table td .ip01{float:left;width:95%;height:42px;line-height:42px;font-size:16px;padding:0 12px;border:1px solid #ccc;}
.tbl table td .ip02{float:left;width:22%;height:42px;line-height:42px;font-size:16px;padding:0 12px;border:1px solid #ccc;}
.tbl table td textarea{float:left;width:95%;padding:10px;line-height:22px;font-size:16px;border:1px solid #ccc;}
.tbl table td select{float:left;width:25%;height:44px;line-height:24px;font-size:14px;padding:10px 12px;border:1px solid #ccc;}
input.tbl_btn{float:left;max-width:50%;min-width:140px;height:44px;line-height:44px;font-size:16px;font-weight:600;text-align:center;color:#fff;background:#000;border:none;}
.radio_btn{float:left;}
.radio_btn p{float:left;height:44px;line-height:44px;font-size:18px;font-weight:600;margin:0 40px 0 0;color:#777;}
.radio_btn input.rd_ip{float:left;width:18px;height:18px;margin:14px 10px 0 0;}

.terms{position:relative;float:left;width:96%;height:200px;padding:0 2% 2% 2%;overflow-x:hidden;overflow-y:scroll;font-size:14px;line-height:20px;background:#f4f4f4;}
.terms dl{float:left;width:100%;}
.terms dl dt{padding-bottom:10px;font-weight:600;font-size:16px;color:#555;margin-top:24px;}
.terms dl dd{padding-bottom:10px;font-size:14px;line-height:20px;color:#999;}

.agree{float:left;width:100%;margin:20px 0 60px 0;}
.agree input{float:left;width:18px;height:18px;line-height:18px;margin-right:10px;}
.agree label{float:left;font-size:18px;line-height:18px;}


.btn_w{position:relative;float:left;width:100%;text-align:center;margin-bottom:60px;}
input.btn{display:inline-block;width:260px;height:60px;line-height:30px;font-size:20px;font-weight:600;background:#aaa;text-align:center;color:#fff;border:2px solid #898989;margin:0 10px;}
input:hover.btn{background:#333;border:2px solid #000;}
input.btn2{display:inline-block;width:260px;height:60px;line-height:30px;font-size:20px;font-weight:600;background:#d24545;text-align:center;color:#fff;border:2px solid #b31515;margin:0 10px;}
input:hover.btn2{background:#fff;color:#d24545;border:2px solid #d24545;}


@media (max-width:1200px) {

.tbl table th{text-align:center;font-size:16px;font-weight:400;color:#000;background:#f0f0f0;width:30%;}
.tbl table td{font-size:14px;color:#555;border-left:1px solid #b2b2b2;}
.tbl table .hh img{margin:0 20%;width:60%;max-width:400px;}
}

@media (max-width:768px) {

.tbl table th{text-align:center;font-size:14px;font-weight:400;color:#000;background:#f0f0f0;width:30%;}
.tbl table .hh img{margin:0 20%;width:60%;}
.tbl table td{font-size:12px;color:#555;border-left:1px solid #b2b2b2;}
.tbl table td .ip02{float:left;width:19%;height:42px;line-height:42px;font-size:16px;padding:0 5px;border:1px solid #ccc;}
.tbl table td select{float:left;width:24%;height:44px;line-height:24px;font-size:14px;padding:0 4px;border:1px solid #ccc;}
}

@media (max-width:480px) {

.tbl table th{text-align:center;font-size:14px;font-weight:400;color:#000;background:#f0f0f0;width:30%;}
.tbl table .hh img{margin:0 20%;width:60%;}
.tbl table td{font-size:12px;color:#555;border-left:1px solid #b2b2b2;}
.tbl table td .ip02{float:left;width:19%;height:42px;line-height:42px;font-size:16px;padding:0 5px;border:1px solid #ccc;}
.tbl table td select{float:left;width:25%;height:44px;line-height:24px;font-size:14px;padding:0 4px;border:1px solid #ccc;}
}