@charset "UTF-8";
/*
2019.02.22
leewooju@secondspace.kr
작성자 : 이우주

주식회사 세컨드스페이스
*/
@font-face {
  font-family: 'Noto Sans KR';
  font-display: auto;
}
body{
    font-size: 15px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Noto Sans KR';
    width: 100%;
    }

.logo{width: 30px;height: 30px;position: fixed;border: 9px solid #fff;bottom: 80px;right: 80px;box-sizing: border-box}
#logo{width: 140px;height: 20px;position: fixed;z-index: 20;top: 50px;left: 50px;background-size: cover;background-repeat: no-repeat;}
#logo a:focus{background-color: none}
#logo:before{display: none}
.white #logo{background-image: url(../imgs/logoW.png);}
.black #logo{background-image: url(../imgs/logoB.png)}
p,input,label,textarea{font-family: 'Noto Sans KR'}

/* button */ 
.button,.readyBtn{position: relative;box-sizing: border-box;padding: 1em 2em;text-decoration: none;text-align: left;overflow: hidden;cursor: pointer;}
.button:focus{background-color: yellow}
body a.button:hover{z-index: 1;}
.button span{margin-left: 20px}
.white .button{color: #fff;}
.white .button::before{content: '';width: 0px;height: 0px;background-color: #fff}
a.button:hover span{}
.btnBox{margin: 3em 0 1em;}
.black .button:hover{transition: .2s;color: #fff;border-color: #000;z-index: 3;}
.black .button:hover:before{width: 100%;height: 100%;opacity: 1;background-color: rgba(0,0,0,1);}
.btnBox a.readyBtn{
    color: #999;
    cursor: no-drop;
}
.btnBox a.readyBtn:before{
    display: none;
}
.readyBtn{
    background-color: #eee;
    border: 2px solid #ddd;
    font-weight: 400;
}
.black .button{color: #000;font-weight: 700;border: 2px solid;z-index: 1;}
.black .button:before{
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  width: 90%;
  position: absolute;
  background-color: rgba(0,0,0,1);
  transition: .2s;
  z-index: -1;
  opacity: 0;
  }
.services h2 b{color: #2196F3;display: block;font-size: 0.8em;}
.white{color: rgba(255,255,255,.8);background: #000}
.white a{color: rgba(255,255,255,.6);}
.white a:hover{color: rgba(255,255,255,1);transition: .2s}
.white .bar{background-color: rgba(255,255,255,.05);}
ul{list-style: none}
.div{width: 100%; float: left;height: 1px;}
.contents{
    width: 100%;
    float: left;
    transition: .6s linear;
}
.black .contents{width: 100%;overflow: hidden;}
.black{color: #000;background-color: #fff;}
.black a{color: #000;position: relative;}
.black .bar{background-color: rgba(0,0,0,.1)}
.black .logo{border-color: #000;}
.black h1,.black h2,.black h3,.black h4,.black h5,.black h6{color: #000;}
h1,h2,h3,h4,h5,h6{font-family: 'Roboto Mono';word-break: keep-all;}
p{font-family: 'Noto Sans KR'}
a{font-family: 'Roboto Mono';font-weight: 300;}
a:before{content: "";width: 0;margin-top: 2.1em;height: 3px;position: absolute;z-index: 0;transition: .2s;background-color: yellow;cursor: pointer}
a:hover{transition: .2s;color: #000;font-weight: 500}
a:hover:before{width: 100%;}
.main_slide{width: 100%; height: 100%;overflow: hidden;position: absolute;z-index: -3;}
.main_slide h2{font-size: 1.5em;
    font-weight: 100;
    letter-spacing: .3em;
    line-height: 1.2em;
    color: rgba(255,255,255,.8);
    width: 100%;
    text-align: center;
    text-shadow: 0 0 12px #fff
}
.main_slide h4{width: 100%;letter-spacing: .35em;font-weight: 400;}
#myVideo {
    display: none;
  position: absolute;
  right: 0;
  top: 0;
  min-width: 100%; 
  min-height: 100%;
    opacity: .6;
    z-index: -2;
}
.bgSpace{position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;}
.bgSpace>div{position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;animation-iteration-count: infinite;animation-timing-function: linear;}
.bgMain{background-image: url(../imgs/bgMain.jpg);}
.bg1{background-image:url(../imgs/space1.jpg);animation-name: bg1;animation-duration: 10s;animation-delay: 4s}
.bg2{background-image: url(../imgs/space2.png);animation-name: bg2;animation-duration: 2s;}
.bg3{background-image: url(../imgs/space3.png);animation-name: bg3;animation-duration: 4s;}
.bg4{background-image: url(../imgs/space4.png);animation-name: bg4;animation-duration: 8s;}
.bg5{background-image: url(../imgs/space5.png);animation-name: bg5;animation-duration: 8s;}
.bg6{background-image: url(../imgs/space5.png);animation-name: bg5;animation-duration: 8s;animation-delay: 4s}
.menuBox{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    position: fixed;
    background: rgb(16,33,88);
    background: linear-gradient(119deg, rgba(16,33,88,1) 0%, rgba(50,9,56,1) 100%);
}
.menu{text-align: center;position: fixed;width: 100%;box-sizing: border-box;top: 0;left: 0;z-index: 20}
.menu a{text-decoration: none;overflow: hidden;width: auto;position: relative;}
.menu .nav{padding: 0;position: fixed;top: 150px;left: 80px;}
.menu .sns{position: fixed;bottom: 80px;left: 80px;padding: 0;font-size: .9em;}
.menu .sns li{margin-top: 1em}
.menu ul li{
    list-style: none;
    text-align: left;
}
.menu #logo{font-size: 1.2em;font-weight: 600;margin: 80px;letter-spacing: .1em;position: fixed;}
.menu .nav li{font-size: 1.2em;margin: 1em 0;}
.menu .dnd{position: fixed;top: 0;right: 0;padding: 0;margin: 80px;font-size: .9em;}
.menu .dnd li{
    display: inline-block;
    margin-left: 20px;
    padding: 0;
}
.bg{
    background-image: url(../imgs/bgRow.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.headLine{
    color: #fff;
    margin: 100px
}
.copyWrap{font-family: 'Roboto Mono';
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -43px;}
.copy span.dud{color: rgba(255,255,255,.3) !important}
.headLine h1{font-size: 4em; font-weight: 400; letter-spacing: .1em; line-height: .4em;}
.headLine h2{font-weight: 200; letter-spacing: .15em; font-size: 2em}
.main{color: #fff}
.center_con{width: 980px;margin: 180px auto;}
.c10{width: 10%}
.c20{width: 20%}
.c30{width: 30%}
.c40{width: 40%}
.c50{width: 50%}
.c60{width: 60%}
.c70{width: 70%}
.c80{width: 80%}
.c90{width: 90%}
.c100{width: 100%}
.bar{width: 100%;height: 1px}
.aboutSB{width: 800px;height: 800px;position: absolute;background-image: url(../imgs/SVG/sbSvg2.svg);left: 50%;margin-left: -400px;z-index: -1;top: 90px;animation-name: r360;animation-duration: 100s;animation-iteration-count: infinite;animation-timing-function: linear;}
.about div, .services div{float: left;}
.about p{width: 100%}
.portfolio h1,.about h1, .services h1,.contact h1{font-size: 5em;width: 100%;text-align: center;font-weight: 100;margin: 158px auto;}
.about h1{}
.about h2,.services h2{
    margin-top: 0;
    font-size: 1.2em;
    letter-spacing: .2em;
    float: left;
    line-height: 1.8em;
}
p{float: left;line-height: 1.8em;margin: 0;word-break: keep-all;}
.gap{width: 100%;height: 360px;}
.about .bar,.services .bar{margin: 4em 0;}
.history{
    margin: 0;
}
.history dt, .history dd{margin-bottom: 20px;}
.history dt{display: inline-block;width: 10%;color: #999;}
.history dd{display: inline-block;width: 80%}
.memberWrap{width: 100%;}
.member{width: 100%;background-color: rgba(0,0,0,.9);border: 1px solid #fff;margin-bottom: 1px;height: 300px;padding: 60px 0;overflow: hidden;position: relative;transition: .2s;box-sizing: border-box;}
.member h3{font-size: 3em;text-align: center;font-weight: 300;color: #fff;}
.member h3 span{font-size: .5em;color: yellow;display: block;margin-top: 1em;}
.lwj{background-image: url(../imgs/lwj.png);background-position: 50% 20%;background-size: 30%;}
.lwjWrap:hover{background-color: rgba(0,0,0,0);border: 10px solid rgba(0,0,0,.1);}
.lwjWrap:hover h3{color: #000;font-weight: 900;}
.lwjWrap:hover h3 span{color: magenta;}
.lwjWrap:hover .lwj{background-size: 80%;opacity: 1;transition: 2s}
.lwjWrap:hover .ksh{background-size: 50%;opacity: 1;transition: 2s; background-position: 50% 10%}
.lwjWrap:hover .ljh{background-size: 100%;opacity: 1;transition: 2s; background-position: 50% 70%}
.lwjWrap:hover .lys{background-size: 60%;opacity: 1;transition: 2s; background-position: 50% 5%}
.lwjWrap:hover .kjm{background-size: 80%;opacity: 1;transition: 2s; background-position: 50% 50%}
.lwjWrap:hover .ndh{background-size: 80%;opacity: 1;transition: 2s; background-position: 50% 50%}
.lwjWrap:hover .chy{background-size: 100%;opacity: 1;transition: 2s; background-position: 50% 40%}
.lwjWrap:hover .dsj{background-size: 100%;opacity: 1;transition: 2s; background-position: 50% 15%}
.lwjWrap:hover .mz{background-size: 80%;opacity: 1;transition: 2s;background-position: 50% 50%;}
.lwjWrap:hover .tc{background-size: 80%;opacity: 1;transition: 2s;background-position: 50% 50%;}

.lwj,.ksh,.lys,.ljh,.kjm,.ndh,.chy,.dsj,.mz,.tc{width: 100%;height: 300px;position: absolute;margin-top: -60px;opacity: .8;z-index: -1;transition: 2s;background-repeat: no-repeat;background-color: #999;}
.ksh{background-image: url(../imgs/ksh.png);background-position: 50% 60%;background-size: 25%;}
.lys{background-image: url(../imgs/lys.png);background-position: 50% 50%;background-size: 20%;}
.ljh{background-image: url(../imgs/ljh.png);background-position: 50% 0%;background-size: 50%;}
.kjm{background-image: url(../imgs/kjm.png);background-position: 50% 0%;background-size: 25%;}
.ndh{background-image: url(../imgs/ndh.png);background-position: 50% 50%;background-size: 30%;}
.chy{background-image: url(../imgs/chy.png);background-position: 50% 30%;background-size: 30%;}
.dsj{background-image: url(../imgs/dsj.png);background-position: 50% 100%;background-size: 30%;}
.mz{background-image: url(../imgs/mozzi.jpg);background-position: 50% 50%;background-size: 60%;background-color: transparent;}
.lwjWrap:hover>div{}
.tc{background-image: url(../imgs/taco.jpg);background-position: 50% 50%;background-size: 50%;background-color: transparent;}
.services p b{
    display: block;
    margin-bottom: 12px;
}
.imgFrm{width: 100%;height: 140px;background-color: #000;margin: 2em 0;}
h2 span{font-size: .5em;color: #999}
.services h1{color:#000;}
.servSb{width: 600px;height: 735px;background-image: url(../imgs/SVG/sbSvg.svg);background-size: cover;position: absolute;left: 50%;margin-left: -300px;top: 104px;z-index: -2;opacity: .1;background-repeat: no-repeat;animation-duration: 100s;animation-name: r360;animation-timing-function: linear;animation-iteration-count: infinite;}
.portfolio .c100, .portfolio .gap{float: left;}
.portfolio .c50{width: 486px;margin: 2px;float: left;overflow: hidden;}
.pfWrap{width: 100%;height: 486px;overflow: hidden;position: relative;}
.pfWrap .cover{width: 100%;height: 100%;position: absolute;border-color: rgba(0,0,0,0);background-color: rgba(0,0,0,.3);display: table;z-index: 1;}
.pfWrap:hover .cover{width: 100%; height: 100%;transition: .2s;background-color: rgba(0,0,0,.7)}
.pfWrap:hover .cover:before{color: rgba(255,255,255,1)}
.pfCon{width: 100%;height: 100%;background-color: #eee;position: absolute;z-index: 0;display: table;}
.pfTxt{color: #fff;position: absolute;bottom: 1.6em;left: 2em;}
.pfTxt h3{font-family: 'Noto sans kr';margin: 0;color: #fff;text-shadow: 0 0 8px rgba(0,0,0,.3);font-weight: 400;font-size: 1.1em;}
.pfWrap:hover .descBox{opacity: 1}
.cover h4:before{content: '';background-image: url(../imgs/symbol_white.png);width: 100%;height: 30px;display: block;background-size: contain;background-repeat: no-repeat;background-position: center;margin-bottom: 3em;transition: 1s;opacity: 0;}
.pfWrap:hover .cover h4:before{margin-bottom: 2em;opacity: 1;}
.contact h2{font-size: 4em;margin: .3em auto;width: 50%;word-spacing: -.2em;font-weight: 100;text-align: center;line-height: 1.3em;}
.conTxt{
    width: 100%;
    float: left;
    padding-bottom: 50px;
}
select{
    -webkit-appearance: none;
}
.selectWrap{
    position: relative;
}
.selectWrap::before{content: '\f0d7';  font-family: "Font Awesome 5 Pro"; font-weight: 900; position: absolute;right: 9px;top: 49%;font-size: 1em;z-index: -1; color: #666;line-height: 2.2em;}
.contact input,select{width: 100%;box-sizing: border-box;font-size: 1em;padding: 7px 18px;border: 2px solid rgba(0,0,0,.1);background-color: transparent;border-radius: 3px;line-height: 2em;}
.contact textarea{width: 100%;box-sizing: border-box;border: 2px solid rgba(0,0,0,.1);background-color: rgba(255,255,255,.8);padding: 10px 18px 9px;font-size: 1em;}
.contact input[type="submit"]{
    border: 2px solid;
    font-weight: bold;
    margin-top: .6em;
}
.contact input[type="submit"]:before{
    content: '';
}
.contact input[type="submit"]:hover{
}
.contact input[type="submit"]:hover:before{
}
.contact input[type="checkbox"]{
    width: auto;
    float: left;
    margin: -.2em 0 0;
    margin-right: 10px;
    -webkit-appearance: none;
    width: 1.5em;
    height: 1.5em;
    padding: 0.5em;
    border-radius: 2em;
}
input[type=checkbox]:checked{border: 2px solid #eee;}
input[type=checkbox]:checked:after{
    content: '\002713';
    position: absolute;
    margin: -15px -4px;
    font-size: 1.5em;
}
.contact .button{
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 0px;
    padding: 11px;
}
.contact input:focus,select:focus{
    outline: 0;
    transition: .1s;
    border-color: #000;
    background-color: #fff;
}
.contact textarea:focus{border-color: #000;outline: none;}
.stb-select-container:focus{}
label{
    font-weight: bold;
    margin: 0 0 .5em;
    float: left;
}
.reqFormL,.reqFormR{
    list-style: none;
    padding: 0 0 2em;
    width: 48%;
    float: left;
    margin: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.reqFormL{}
.reqFormR{}
.contact li{
    margin: 0 0 10px;
    padding: 10px 0 0;
    float: left;
    width: 100%;
}
li.privChk{
    padding: 3px 0;
    margin: 0;
}
li.privChk label{
    margin-top: -2px;
    font-size: 13px;
}
.conForm{float: left;width: 100%;border-top: 2px solid rgba(0,0,0,1);box-sizing: border-box;padding: 44px 0 0; display: flex;}
.contact .disc{width: 100%;float: left;color: rgba(0,0,0,.8);}
.contact p{
    width: 33%;
    margin-top: 10px;
    text-align: center;
    float: none;
    margin: 20px auto;
}
.contact dl{
    width: 236px;
    margin: 38px auto;
    font-size: 13px;
}
.contact dt{
    /* font-weight: bold; */
    width: 60px;
    float: left;
}
.contact dd{
    margin: 0;
}
.contact dd a{
    font-weight: bold;
    text-decoration: none;
    letter-spacing: .05em;
    font-family: 'Noto sans kr';
}
.contact{
    transition: 1s;
}
.conPaper{float: left;width: 70%;height: 1173px;padding: 5% 5%;margin: 0 10%;overflow: hidden;}

.tilt{background-image: url(../imgs/people2.gif);background-position: 50% 25%;background-size: cover;}
.tilt-1{width: 300px; height: 300px; top: 50%; left: 50%; background-color: rgba(0,0,0,.1);position: absolute; border-radius: 500px}
.tilt-dot{letter-spacing: 1em; position: absolute; left: 5%; top: 50%}
.aniRonud{width: 1000px;height: 500px;position: fixed;top: 40%;left: 40%;z-index: -1;border-radius: 300px;filter: blur(300px);}

.aniRonud.ani6 {}
.ani1{background: rgb(198, 0, 255);animation-name: rot;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: linear;}


.ani2{animation-name: rot2;margin-top: -30%;margin-left: 20%;animation-duration: 30s;animation-iteration-count: infinite;background: rgb(255,0,234);
background: -moz-linear-gradient(135deg, rgba(255,0,234,0.15309873949579833) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(135deg, rgba(255,0,234,0.15309873949579833) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(135deg, rgba(255,0,234,0.15309873949579833) 0%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff00ea",endColorstr="#ffffff",GradientType=1);}

.tilt,.doseYs,.serviceImg{width: 100%;height: 300px;margin-bottom: 50px;}
.doseYs{background-image: url(../imgs/workLoop.gif);margin: 4em 0 0;background-position: 0% 40%;}
.serviceImg{opacity: .85;transition: 2s;overflow: hidden;}
.serviceImg>div{
    width: 100%;
    height: 300px;
    background-position: 50% 50%;
    transition: 2s;
    background-size: 120%;
    }
.doseOnly{background-image: url(../imgs/IMG_0610.jpg);}
.teamS{background-image: url(../imgs/team.jpg);background-size: 160%;}
.dh{background-image: url(../imgs/develop.jpg)}
.third{background-image: url(../imgs/img2.jpg)}
.serviceImg:hover{/* background-position: 0; */opacity: 1;}
.serviceImg:hover>div{transform: scale(1.2)}
.arecibo{background-image: url(../imgs/SVG/Arecibo.svg);width: 100%;height: 309px;float: left;/* border-top: 5px solid; */}

.complate{
    width: 700px;
    height: 460px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -350px;
    z-index: -2;
    opacity: 0;
    transition: 1s;
    transition-delay: 2s;
    transform: scale(.9);
}
.conForm span{
    font-size: 13px;
    background-color: yellow;
    margin-left: 8px;
    padding: 0 3px 0 6px;
    display: none;
}
.error label span{display: inline;}
.error input,.error select,.error textarea{
    border-color: yellow;
}
.opa1{opacity: 1;transform: scale(1)}
.conOut{opacity: 0; transform: scale(.9); transition: 2s; height: 500px;margin-top: -100px}
/* circle */
.googleMap{position: absolute;width: 100%;height: 100%;z-index: 0;top: 0;left: 0;filter: saturate(.05);box-sizing: border-box;}
.locInfo{position: absolute;z-index: 10;background-color: rgba(0,0,0,.8);color: #fff;padding: 30px;box-shadow: 10px 10px 20px -5px rgba(0,0,0,.5);top:50%;right: 50px;box-sizing: border-box;margin-top: -78px;}
.locInfo a{color: rgba(255,255,255,.5); text-decoration: none; font-family: 'Noto Sans KR'; letter-spacing: 1px;font-weight: 100;}
.locInfo li:nth-child(1){}
.locInfo li:nth-child(2){margin: 6px 0 24px}
.locInfo li:nth-child(3) a{color: #fff;font-size: 13px;}
.menuBtn:focus{outline: 0px solid; background-color: yellow; border-radius: 30px}
.menuBtn:focus ul li{background-color: #000}
.menuBox{overflow: hidden;display: none;}
.menuBox div{float: left;box-sizing: border-box;}
.menuBox .rssBox{padding: 100px 5%;}
.menuBox a:focus{background-color: transparent;}
.menuBox p{
    font-size: 13px;
    color: rgba(255,255,255,.3);
}
.menuBox h4{
    color: rgba(255,255,255,.3);
    font-size: 13px;
    margin: 0;
    letter-spacing: 1px;
    font-weight: 100;
}
.nav{
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    padding: 100px 5%;
}
.nav ul{
    padding: 0;
    margin: 46px 0 0;
}
.nav ul li a{
    text-decoration: none;
    color: rgba(255,255,255,.7);
    font-weight: 400;
    font-size: 2.3em;
    line-height: 3em;
    position: relative;
    transition: .2s
}
.nav ul li a:hover{color: rgba(255,255,255,1);}
.rssFeed{
    float: left;
    width: 100%;
    padding: 0;
    margin: 80px 0;
}
.rssFeed h2{
    font-weight: 400;
    margin: 0;
    font-size: 1.3em;
    width: 400px;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.8);
    font-family: 'Noto Sans KR';
}
.rssFeed h3{
    float: left;
    font-size: 1em;
    display: none;
}
.rssFeed h5{
    font-weight: 400;
    font-family: 'Noto Sans KR';
    font-size: 13px;
    margin: 6px 0 20px;
    color: rgba(255,255,255,.3);
}
.rssFeed p{
    width: 80%;
    height: 3.4em;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
    color: rgba(255,255,255,.5);
}
.rssFeed a{
    text-decoration: none;
    color: rgba(255,255,255,.6);
    font-family: 'Noto Sans KR';
    transition: .2s
}
.rssFeed a:hover:before{
    width: 400px;
}
.rssFeed a:before{
    width: 0;
    margin-top: 1.7em;
    height: 3px;
}
.rssFeed a:hover h2{color: rgba(255,255,255,1)}
.rssFeed img{display: none}
.rssFeed li{
    float: left;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: 50px;
    margin-bottom: 50px;
    width: 100%;
}
.rssFeed li:nth-last-child(1){border: none}
.langSns{width: 20%;height: 100%;right: 0;position: absolute;box-sizing: border-box}
.langSns ul{padding: 0;margin-top: 70px}
.langSns li{line-height: 50px}
.langSns a{color:rgba(255,255,255,.5);text-decoration: none;position: relative;font-weight: 300;}
.langSns a:hover{color: rgba(255,255,255,1)}
.langSns .c50{padding: 100px 10%;height: 50%;}
.langSns .c100{height: 25%;padding:10%;}
.langSns .c100 h3{width: 100px;font-size: 1.3em;font-weight: 100;margin: 0 0 30px;color: rgba(255,255,255,.6);}
.desSpace{background-color: rgba(0,0,0,.2);display: table;}
.devSpace{background-color: rgba(0,0,0,.3)}
.language{background-color: rgba(0,0,0,.5)}
.sns{background-color: rgba(0,0,0,.3)}
.menuBg1, .menuBg2{position: absolute; filter: blur(300px); animation-duration: 15s; z-index: -1; animation-iteration-count: infinite;opacity: .3; animation-timing-function: linear}
.menuBg1{background-color: #00e0ff; width: 2000px; height: 1000px; left: -20%; animation-name: rot3; bottom: 0}
.menuBg2{background-color: #ff00f1; width: 2000px; height: 1000px; right: -20%;animation-name: rot4; top: 0}
.menuBtn{position: fixed !important;top: 30px;right: 40px;z-index: 30;padding: 10px;width: 50px;height: 50px;cursor: pointer;border: none;background-color: transparent;}
div.menuOpen ul li{background-color: rgba(255,255,255,1)}
.menuBtn .white li{background-color: rgba(255,255,255,1)}
.black .menuBtn li{background-color: rgba(255,255,255,1);}
.menuBtn li{width: 30px;height: 4px;position: absolute;transition: .3s;margin: 0;}
.menuBtn ul{
    margin: 0;
    padding: 0;
}

.menuBtn li:nth-child(1){transform: rotate(45deg);
    margin: 0;}
.menuBtn li:nth-child(2){
    width: 0;
    opacity: 0;
    margin-left: 15px;
}
.menuBtn li:nth-child(3){transform: rotate(-45deg);
    margin: 0;
    width: 30px;}
.black .menuOpen ul li{background-color: #000}
.menuOpen ul li:nth-child(1){margin-top: -10px;transform: rotate(0deg);}
.menuOpen ul li:nth-child(2){opacity: 1;width: 30px;margin: 0;}
.menuOpen ul li:nth-child(3){margin-top: 10px;width: 20px;transform: rotate(0deg);}
.conBlur{filter: blur(10px);}
.pfCon{background-position: 50% 50%; background-size: cover; background-repeat: no-repeat}
    .pf1{background-image: url(../imgs/hce.jpg)}
    .pf2{background-image: url(../imgs/mimicpro.jpg)}
.pf3{background-image: url(../imgs/friend.jpg)}
.pf4{background-image: url(../imgs/tanker.jpg)}
.pf5{background-image: url(../imgs/ynk.jpg)}
.pf6{background-image: url(../imgs/phonak.jpg)}
.pf7{background-image: url(../imgs/mad.jpg)}
.pf8{background-image: url(../imgs/mahon.jpg)}
.pf9{background-image: url(../imgs/inko_t.jpg)}
.pf10{background-image: url(../imgs/wnh_t.jpg)}
.pf11{background-image: url(../imgs/orp1_t.jpg)}
.pf12{background-image: url(../imgs/orp2_t.jpg)}
.pf13{background-image: url(../imgs/b_t.jpg)}
.pf14{background-image: url(../imgs/duo_t.jpg)}
.pf15{background-image: url(../imgs/placea.png)}
.pf16{background-image: url(../imgs/thum-dram.jpg)}
.reqFormR li:last-child{padding: 3px 0 0;}
.descBox{    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: rgba(255,255,255,1);
    font-size: 1em;
    opacity: 0;
    font-weight: 400;}
.descBox h4{
    color: #fff;
    font-size: 1.5em;
    font-weight: 100;
    line-height: 0;
    margin: 0 0 30px;
}
.descBox a{
    color: yellow;
    text-decoration: none;
    font-weight: 400;
}
.ggm{background-image: url(../imgs/goguma_thumb.jpg)}
.sports{background-image: url(../imgs/spooorts_thumb.jpg)}
.pc{display: block}
.no{display: none}
.error404M{}
.error404M .bg{background-image: none}
.error404M .bgMain{background-image: none}
.error404M .bg1{background-image: none}
.error404{margin-top: -113px;}
.error404 h1{text-shadow: 0 0 19px #fff;
    font-size: 8em;
    font-weight: 100;
    text-align: center;
    margin: 0;
    opacity: .8;}
@media all and (max-width: 1608px) {
    .portfolio h1,.about h1, .services h1
    {/* -webkit-text-stroke: 1px rgba(255,255,255,.6); */}
    .about h1{
}
}
@media all and (max-width: 1408px) {
    body{font-size: 13px}
    .portfolio .c50{width: 396px;}
    .pfWrap{
    height: 396px;
}
    .contact li{
    padding: 12px 0 0;
}
    .center_con{width: 800px}
    .reqFormR li:last-child{padding: 10px 0 0;}
}
@media all and (max-width: 1408px) {
    .center_con{}
}
@media all and (max-width: 799px) {
    .pc{display: none}
    :focus{background-color: transparent}
    .center_con{width: 100%;overflow: hidden;margin: 100px 0 100px;}
    .aboutSB{width: 600px;height: 600px;margin-left: -300px;top: -66px;position: relative;}
    #logo{
    top: 17px;
    left: 17px;
    width: 100px;
    height: 18px;
}
    .menuBtn{
    top: 0;
    right: 7px;
}
    .menuBtn li{
        height: 2px
}
    .locInfo{
    bottom: 0;
    top: auto;
    width: 100%;
    right: auto;
    margin: 0;
    left: 0;
}
    .black{
        width: 100%;
        overflow-x: hidden;
    }
    .menuBox .rssBox{
    position: absolute;
    bottom: 0;
    width: 70%;
    height: 30%;
    padding: 20px 40px;
}
    .nav{
    width: 70%;
    height: 70%;
    padding: 60px 40px 0;
}
    .langSns{
    width: 30%;
    height: 100%;
}
    .langSns .c50{
    width: 100%;
    padding: 60px 20px 0;
    height: 35%;
}
    .language{
    width: 100%;
}
    .langSns div.sns{
    padding: 30px 20px;
}
    .nav ul{
    margin: 1em 0;
}
    .nav ul li a{
    font-size: 1.7em;
}
    .langSns ul{
    margin: 20px 0 0;
}
    .langSns ul li{line-height: 36px;}
    .langSns .c100{
    padding: 16px 20px;
    box-sizing: border-box;
    height: 15%;
}
    .langSns .c100 h3{display: none}
    .rssFeed{
    margin: 20px 0;
    overflow: hidden;
}
    .rssFeed h2{
    width: 100%;
    font-size: 1em;
}
    .rssFeed h5{
    margin: 0;
    font-size: .9em;
}
    .rssFeed p{
    display: none;
}
    .rssFeed li{
    margin-bottom: 14px;
    padding-bottom: 14px;
}
    .rssFeed li:nth-last-child(2){border: none}
    .rssFeed li:last-child{display: none}
    .portfolio .c50{width: 100%;margin: 0 0 2px;}
    .portfolio h1, .about h1, .services h1, .contact h1{
    font-size: 3em;
    margin: 50px 0 100px;
    padding: 0;
    text-align: center;
    width: 100%;
    letter-spacing: 0;
}
    .contact h2{font-size: 3em;}
    .contact p{width: 200px;}
    .complate{width: 100%;margin: 0;left: 0;top: 100px;}
    .conPaper{width: 100%;padding: 0;margin: 0;height: auto;}
    .reqFormL, .reqFormR{width: 100%;margin: 0;padding: 0;}
    .conForm{
    width: 86%;
    margin: 0 7%;
    display: block;
}
    .serviceImg{height: 200px;margin-bottom: 30px;width: 100%;}
    .serviceImg>div{
    background-size: cover;
    height: 200px;
}
    .c30,.c70{width: 100%}
    .services .c30{font-size: 1em;text-align: center;}
    .services .c70{
    width: 90%;
    margin-left: 5%;
}
    .about,.services{
    text-align: center;
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    }
    .about h2{
    width: 100%;
    margin-bottom: 20px;
}
    .history dt,.history dd{width: 100%;margin: 0;}
    .history dd{margin: 4px 0 30px;}
    .btnBox{width: 100%}
    .services h2{
    width: 100%;
    font-size: 1.4em;
}
    .menuBtn:focus {
        background-color: transparent;}
    .menuBtn ul li{background-color: #fff}
    .menuBtn:focus ul li{background-color: #fff}
    .member{
    height: 200px;
}
    .lwj, .ksh, .lys, .ljh, .kjm, .ndh, .chy, .dsj, .mz, .tc{
    height: 200px;
    margin-top: -60px;
}
    .member h3{
    font-size: 2em;
    margin: 10px;
}
    .lwjWrap:hover{border: 5px solid rgba{0,0,0,.1}}
    .contact textarea{float: left;margin-bottom: 20px;}
    .servSb{
    position: relative;
    top: -132px;
}
    .aniBody{}
    .portfolio{
    margin: 50px 0;
}
    body.black .menuOpen>ul>li{background-color: #000}
    body.white .menuOpen>ul>li{background-color: #fff}
    .bgMain, .bg, .bg1, .bg6{background-image: none}
    .main_slide h2{font-size: 1em}
    .gap{
    height: 60px;
}
    .selectWrap:after{display: none}
    .mask{
    width: 100%;
    height: 630px;
    -webkit-clip-path: inset(0px);
    clip-path: inset(0px);
    overflow: hidden;
    position: absolute;
}
}

@media all and (max-width: 360px) {
    .nav ul li a{
    line-height: 2.5em;
}
    .langSns ul li{
    line-height: 30px;
}
    .rssFeed li{
    margin-bottom: 10px;
    padding-bottom: 10px;
}
}

/* IE10과 IE11 : -ms-high-contrast */

	@media all and (-ms-high-contrast:none)

	{
        *{font-family: 'Dotum','돋움' !important}
	}

@keyframes r360{
    0{}
    100%{transform: rotate(360deg)}
}
@keyframes rot {
  0% {transform: rotate(0deg);opacity: .3;}
  50% {transform: rotate(180deg);opacity: .8;}
100% {transform: rotate(360deg);opacity: .3;}
}
@keyframes rot2 {
  from {transform: rotate(0deg)}
  to {transform: rotate(-360deg)}
}

@keyframes rot3 {
  0% {transform: rotate(0deg);opacity: .3}
  50% {transform: rotate(180deg);opacity: .1}
  100% {transform: rotate(360deg);opacity: .3}
}
@keyframes rot4 {
  0% {transform: rotate(0deg);opacity: .1}
  50% {transform: rotate(-180deg);opacity: .3}
  100% {transform: rotate(-360deg);opacity: .1}
}
@keyframes bg1{
    0%{transform: scale(1);opacity: 0}
    50%{transform: scale(1.4) rotate(1deg);opacity: .5}
    100%{transform: scale(1.8) rotate(0);opacity: 0}
}
@keyframes bg2{
    0%{transform: scale(1);opacity: 0}
    50%{transform: scale(1.2) ;opacity: 1}
    100%{transform: scale(1.4) ;opacity: 0}
}
@keyframes bg3{
    0%{transform: scale(1);opacity: 0}
    50%{transform: scale(1.25);opacity: 1}
    100%{transform: scale(1.5);opacity: 0}
}
@keyframes bg4{
    0%{transform: scale(1);opacity: 0}
    50%{transform: scale(1.5);opacity: 1}
    100%{transform: scale(2);opacity: 0}
}
@keyframes bg5{
    0%{transform: scale(1);opacity: 0}
    50%{transform: scale(2);opacity: 1}
    100%{transform: scale(3);opacity: 0}
}