@charset "utf-8";

/* section0 첫번째 화면 */
#section0 {overflow: hidden;}
#section0 .inrbg {background: url('../images/common/bg_mainV.jpg')no-repeat;background-size: cover;transform: scale(1.5);-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-ms-transform: scale(1.5);-o-transform: scale(1.5);height: 100%;}
#section0.move .inrbg {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1); transition: ease all 3s;-webkit-transition: ease all 3s;-moz-transition: ease all 3s;-ms-transition: ease all 3s;-o-transition: ease all 3s;}
#section0 .txtw,
#section0 .maparea {position: absolute;}
#section0 .maparea {right: 5%;bottom: -16%;background: url('../images/main/bg_map.png')no-repeat;width: 714px;height: 787px;background-size: cover;opacity: 0;transform: scale(1.5);-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-ms-transform: scale(1.5);-o-transform: scale(1.5);transition: ease all 3s;-webkit-transition: ease all 3s;-moz-transition: ease all 3s;-ms-transition: ease all 3s;-o-transition: ease all 3s;}
#section0.move .maparea {opacity: 1;
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
#section0 .maparea > div {position: absolute;border: 1px solid rgba(255,255,255,0.3);border-radius: 50%;margin: 0 auto;text-align: center;}
#section0 .maparea > div:after {content: "";display: inline-block;clear: both;position: absolute;background-color: rgba(255,255,255,0.1);width: 100%;height: 100%;border-radius: 50%;animation:ripple 1.8s infinite;-webkit-animation:ripple 1.8s infinite;-moz-animation:ripple 1.8s infinite;-ms-animation:ripple 1.8s infinite;-o-animation:ripple 1.8s infinite;left: 0;top: 0;}
#section0 .maparea > div.traffic {left: 45%;padding:15px;width: 75px;height: 75px; }
#section0 .maparea > div.computer {left:70%;top: 22%;padding:15px;width: 96px;height: 96px;line-height: 60px;}
#section0 .maparea > div.bus {left:37%;top: 25%;width: 64px;height: 64px;line-height: 55px;}
#section0 .maparea > div.water {left:18%;top: 40%;width: 78px;height: 78px;line-height: 70px;}
#section0 .maparea > div.sos {left:55%;top: 47%;width: 112px;height: 112px;line-height: 110px;}
#section0 .maparea > div.ship {left:80%;top: 67%;width: 137px;height: 137px;line-height: 110px;}
#section0 .txtw {text-align: center;color:#fff;left: 0;top: 22%;width: 100%;line-height: 70px;}
#section0 .txtw:before {content: "";display: inline-block;clear: both;position: absolute;background-color: rgba(255,255,255,0.2);width: 0;height: 1px;left: 0;top: 53%;}
#section0.move .txtw:before {width: 100%;transition:all 1.5s;-webkit-transition:all 1.5s;-moz-transition:all 1.5s;-ms-transition:all 1.5s;-o-transition:all 1.5s;transition-delay: 1.5s;-webkit-transition-delay: 1.5s;-moz-transition-delay: 1.5s;-ms-transition-delay: 1.5s;-o-transition-delay: 1.5s;}
#section0 .txtw h2 {font-size:2.5rem;font-weight: 500;opacity: 0;margin-top: 50px;}
#section0.move .txtw h2 {opacity: 1;transition:all 2s;-webkit-transition:all 2s;-moz-transition:all 2s;-ms-transition:all 2s;-o-transition:all 2s;transition-delay: 0.5s;-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-ms-transition-delay: 0.5s;-o-transition-delay: 0.5s;margin-top: 0;}
#section0.move .txtw h2 br {display: none;}
#section0 .txtw p {font-size:1.4375rem;font-weight: 100;opacity: 0;margin-top: 30px;}
#section0.move .txtw p {opacity: 1;transition:all 1.5s;-webkit-transition:all 1.5s;-moz-transition:all 1.5s;-ms-transition:all 1.5s;-o-transition:all 1.5s;transition-delay: 1s;-webkit-transition-delay: 1s;-moz-transition-delay: 1s;-ms-transition-delay: 1s;-o-transition-delay: 1s;margin-top: 0;}
#section0.move .txtw p br {display: none;}
#section0 .maparea br {display: none;}
#section0 .scroll {position: absolute;width: 100%;bottom: 45px;left: 0;text-align: center;color:#fff;font-weight: 300;-webkit-animation:scroll 0.8s infinite;}
#section0 .scroll p {margin-bottom: 5px;}
#section0 .scroll .arrow {height: 12px;margin-top: 20px;}
#section0 .scroll .arrow .inr{width: 17px;height: 1px;position: relative;margin: 0 auto;}
#section0 .scroll .arrow .inr:before,
#section0 .scroll .arrow .inr:after {content: "";display: inline-block;clear: both;position: absolute;width: 100%;height: 100%;background-color: #fff;}
#section0 .scroll .arrow .inr:before {transform: rotate(-45deg);left: 6px;}
#section0 .scroll .arrow .inr:after {transform: rotate(45deg);left: -5px;}
#section0 .scroll .arrow .inr span {background-color: #fff;width: 3px;height: 3px;border-radius: 50%;position: absolute;left: 50%;margin-left: -1.5px;top: -6px;}
@keyframes ripple{
  0%{opacity:1;transform: scale(0.1);}
  100%{ opacity:0;transform:scale(1.5);}
}
@keyframes scroll{
  0% {bottom: 45px;}
  50% {bottom: 35px;}
  100% {bottom: 45px;}
    
}
@media all and (max-width: 1024px){
    #section0 {height: 700px !important;}
    #section0 .txtw {top: 25%;}
    #section0 .maparea {background: none;width: 100%;left: 0;bottom:35%;text-align: center;height: auto;}
    #section0 .maparea > div {vertical-align: top; position: relative;left: 0 !important;top: 0 !important;display: inline-block;width: 64px !important;height: 64px !important;padding: 0 !important;line-height: 0 !important;margin-right: 15px;}
    #section0 .maparea > div:last-child {margin-right: 0;}
    #section0 .maparea > div .imgsize {margin: 0 auto;}
    #section0 .maparea > div.traffic .imgsize {max-width:40px;line-height: 55px;}
    #section0 .maparea > div.computer .imgsize {max-width:35px;line-height: 60px;}
    #section0 .maparea > div.bus .imgsize {max-width:35px;line-height: 55px;}
    #section0 .maparea > div.water .imgsize {max-width:25px;line-height: 60px;}
    #section0 .maparea > div.sos .imgsize {max-width:50px;line-height: 60px;}
    #section0 .maparea > div.ship .imgsize {max-width:40px;line-height: 55px;}
    .fp-tableCell {height:100% !important;}
    #section0.move .txtw h2 {font-size:2.125rem;}
    #section0.move .txtw p {font-size:1.313em;}
}
@media all and (max-width: 767px){
    #section0 {height: 500px !important;}
    #section0 .txtw {top: 20%;}
    #section0.move .txtw h2 {font-size:1.125rem;line-height: 25px;padding-bottom: 5%;font-weight: 300;}
    #section0.move .txtw h2 br {display: block;} 
    #section0.move .txtw p {font-size:0.9375rem;line-height: 22px;} 
    #section0.move .txtw p br {display: block;}
}
@media all and (max-width: 639px){
    #section0 {height: 600px !important;}
    #section0 .txtw {top: 22%;}
    #section0 .maparea {bottom: 30%;}
    #section0 .maparea > div {margin-right: 0;margin:0 5px;width: 55px !important;height: 55px !important;}
    #section0 .maparea > div:nth-child(3n) {margin-bottom: 10px;}
    #section0 .maparea br {display: block;}
    #section0 .maparea > div.traffic .imgsize {max-width:33px;line-height: 50px;}
    #section0 .maparea > div.computer .imgsize {max-width:30px;line-height: 50px;}
    #section0 .maparea > div.bus .imgsize {max-width:30px;line-height: 50px;}
    #section0 .maparea > div.water .imgsize {max-width:20px;line-height: 50px;}
    #section0 .maparea > div.sos .imgsize {max-width:40px;line-height: 50px;}
    #section0 .maparea > div.ship .imgsize {max-width:30px;line-height: 50px;}
    #section0 .scroll p {font-size:0.875rem;margin-bottom: 0;}
    #section0 .scroll .arrow {margin-top: 15px;}
    #section0 .scroll .imgsize {width: 15px;margin: 0 auto;}
    #section0 .scroll .arrow .inr {width: 15px;}
}
@media all and (max-width: 320px){
    #section0 {height: 550px !important;}
    #section0 .maparea {bottom: 25%;}
}

/* section1 두번째 화면 */
#section1 {position: relative;margin-top: 200px;opacity: 0;transform: translateY(200px);-webkit-transform: translateY(200px);-moz-transform: translateY(200px);-ms-transform: translateY(200px);-o-transform: translateY(200px);}
/* 메인밑에서 올라오는 효과 */
#section1.active {
    -webkit-transition: 1s all ease 0.5s;
   transition: 1s all ease 0.5s;
    -moz-transition: 1s all ease 0.5s;
    -ms-transition: 1s all ease 0.5s;
    -o-transition: 1s all ease 0.5s;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    opacity: 1;
}
#section1:after {content: "";display: inline-block;clear: both;position: absolute;width: 0;height: 13px;background-color: #2359b1;left: 0;bottom: 0;}
#section1.active:after {width: 100%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
}
#section1 .inr {max-width: 1200px;margin: 0 auto;}
#section1 .inr .subtit {text-align: center;}
#section1 .inr .subtit p {color:#1c1c1c;font-size:1.75rem;font-weight: 300;}
#section1 .inr .subtit p.bluebg {font-size:2.5rem;color:#fff;position: relative;display: inline-block;padding:0 30px;font-weight: 700;margin:30px 0;} 
#section1 .inr .subtit p.bluebg:before {content: "";display: inline-block;clear: both;position: absolute;width: 100%;height: 0;background-color: #2359b1;left: 0;top: 0;z-index: -1;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;}
#section1.active .inr .subtit p.bluebg:before {height: 100%;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition-delay: 1s;-webkit-transition-delay: 1s;-moz-transition-delay: 1s;-ms-transition-delay: 1s;-o-transition-delay: 1s;}
#section1 .inr .subtit p.smalltxt {color:#000;font-size:1.125rem;font-weight: 100;}
#section1 .inr ul.circlew {margin-top: 6%;text-align: center;}
#section1 .inr ul.circlew li {border:1px solid #d2d2d2;border-radius: 50%;width: 430px;height: 430px;display: inline-block;text-align: center;padding:7% 0;vertical-align: top;}
#section1 .inr ul.circlew li:nth-child(2) {margin-left: -50px;}
#section1 .inr ul.circlew li:nth-child(3) {margin-left: -50px;}
#section1 .inr ul.circlew li .num {color:#2359b1;font-size:1.25rem;font-weight: 700;}
#section1 .inr ul.circlew li .imgsize {margin:15% 0;}
#section1 .inr ul.circlew li .tit {color:#000;font-size:1.188rem;font-weight: 100;line-height: 25px;}
@media all and (max-width: 1460px){
    #section1 .inr .subtit {padding:0 15%;}
    #section1 .inr ul.circlew li {width: 300px;height: 300px;padding:6% 0;}
    #section1 .inr ul.circlew li .imgsize {margin:8% 0;}
}
@media all and (max-width: 1024px){
    #section1 {padding:10% 3%;margin-top: 0;height: auto !important;-webkit-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    opacity: 1;}
    #section1:after {width: 100%;}
    #section1 .fp-tableCell {height: 100% !important;}
    #section1 .inr .subtit {padding: 0;}
    #section1 .inr .subtit p.bluebg:before {height: 100%;}
    #section1 .inr ul.circlew li {width: 200px;height: 200px;padding:3% 0;} 
    #section1 .inr ul.circlew li:nth-child(2) {margin-left: -30px;}
    #section1 .inr ul.circlew li:nth-child(3) {margin-left: -30px;}
    #section1 .inr ul.circlew li .num {font-size:1.0625rem;}
    #section1 .inr ul.circlew li .imgsize {max-width: 35px;margin: 8% auto;}
    #section1 .inr ul.circlew li .tit {font-size:1.0625rem;}
}
@media all and (max-width: 767px){
    #section1 {height: auto !important;padding:10% 5%;}
    #section1:after {height: 6px;}
    #section1 .inr .subtit p.bluebg {font-size:2.125rem;margin: 3% 0;}
    #section1 .inr .subtit p {font-size: 1.125rem;}
    #section1 .inr .subtit p.bluebg {font-size:1.188rem;padding: 1% 30px;}
    #section1 .inr .subtit p.smalltxt {font-size:0.9375rem;word-break: 	keep-all;}
    #section1 .inr .subtit p.smalltxt br {display: none;}
    #section1 .inr ul.circlew {margin-top: 5%;text-align: center;}
    #section1 .inr ul.circlew:after {content: "";display: inline-block;clear: both;} 
    #section1 .inr ul.circlew li {width: 100%;height: auto !important;float: left;margin: 0 auto !important;padding:3% 6% !important;border: none;}
    #section1 .inr ul.circlew li p,
    #section1 .inr ul.circlew li div {float: left;}
    #section1 .inr ul.circlew li:nth-child(2) {margin-left: 0;}
    #section1 .inr ul.circlew li:nth-child(3) {margin-left: 0;padding:5% 0;}
    #section1 .inr ul.circlew li .num {font-size:0.9375rem;width: 40px;}
    #section1 .inr ul.circlew li .imgsize {margin: 0;margin:0 5% 0 10%;max-width: 25px;}
}
@media all and (max-width: 320px){
    #section1 .inr ul.circlew li {padding:9% 0;}
    #section1 .inr ul.circlew li .tit {font-size:1rem;}
}

/* 세번째 화면 */
#section2 {position: relative;margin-top: 200px;opacity: 0;transform: translateY(200px);-webkit-transform: translateY(200px);-moz-transform: translateY(200px);-ms-transform: translateY(200px);-o-transform: translateY(200px);}
/* 메인밑에서 올라오는 효과 */
#section2.active {
    -webkit-transition: 1s all ease 0.5s;
   transition: 1s all ease 0.5s;
    -moz-transition: 1s all ease 0.5s;
    -ms-transition: 1s all ease 0.5s;
    -o-transition: 1s all ease 0.5s;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    opacity: 1;
}
#section2 .inr {max-width: 1200px;margin: 0 auto;}
#section2 .inr .subtit {font-size:1.75rem;color:#000;font-weight: 100;line-height: 35px}
#section2 .inr .subtit span {display: block;color:#2359b1;font-size:1.25rem;font-weight: 900;margin-top: 10px;}
#section2 .inr ul.award {overflow: hidden;margin:6% 0;}
#section2 .inr ul.award li {float: left;width: 33.33%;margin-bottom: 35px;height: 70px;}
#section2 .inr ul.award li:nth-child(3n):last-child {margin-bottom: 0;}
#section2 .inr ul.award li > div {float: left;}
#section2 .inr ul.award li .txtw {padding: 1%;}
#section2 .inr ul.award li .txtw p {color:#1c1c1c;font-weight: 300;}
#section2 .inr ul.award li .txtw p.week {color:#838383;font-weight: 100;}
#section2 .inr .certi {position: relative;height: 156px;}
#section2 .inr .certi > div {width: 446px;height: 156px;border-radius: 100px;position: absolute;text-align: center;left: 0;opacity: 0;}
#section2 .inr .certi > div a {display: block;padding:5% 0;height: 100%;}
#section2.active .inr .certi > div {opacity: 1;
transition: all 0.5s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
}
#section2 .inr .certi .patent {background-color: #e4e8eb;}
#section2.active .inr .certi .patent {left: 0;}
#section2 .inr .certi .GS {border:1px solid #2359b1;background-color: #fff;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}
#section2.active .inr .certi .GS {left: 50%;}
#section2 .inr .certi .enroll {background-color: #2359b1;}
#section2.active .inr .enroll {left: 100%;transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);-o-transform: translateX(-100%);}
#section2 .inr .certi .imgsize {margin: 0 auto;}
#section2 .inr .certi .patent .imgsize {background: url('../images/main/ico_certi01_pc.png')no-repeat;width: 30px;height: 33px;background-size: cover;}
#section2 .inr .certi .GS .imgsize {background: url('../images/main/ico_certi02_pc.png')no-repeat;width: 32px;height: 34px;background-size: cover;}
#section2 .inr .certi .enroll .imgsize {background: url('../images/main/ico_certi03_pc.png')no-repeat;width: 30px;height: 34px;background-size: cover;}
#section2 .inr .certi > div .imgsize {margin-bottom: 10px;}
#section2 .inr .certi > div p {color:#242424;font-size:1.188rem;font-weight: 100;line-height: 30px}
#section2 .inr .certi > div p.num b {color:#2359b1;font-size:1.563em;}
#section2 .inr .certi > div.enroll p {color:#fff;}
#section2 .inr .certi > div.enroll p b {color:#fff;}
@media all and (max-width: 1460px){
    #section2 .inr {padding:0 15%;}
    #section2 .inr ul.award {margin:2% 0;}
    #section2 .inr ul.award li {width: 50%;margin-bottom: 10px;}
    #section2.active .inr .certi > div {text-align: left;border-radius: 5px;}
    #section2.active .inr .certi > div a {padding:11% 10px;}
    #section2 .inr .certi .imgsize {margin: 0;}
    #section2 .inr .certi .patent .imgsize {background: url('../images/main/ico_certi01.png')no-repeat;width: 30px;height: 33px;background-size: cover;}
    #section2 .inr .certi .GS .imgsize {background: url('../images/main/ico_certi02.png')no-repeat;width: 32px;height: 34px;background-size: cover;}
    #section2 .inr .certi .enroll .imgsize {background: url('../images/main/ico_certi03.png')no-repeat;width: 30px;height: 34px;background-size: cover;}
}
@media all and (max-width: 1024px){
    #section2 {padding:10% 3%;margin-top: 0;height: auto !important;-webkit-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    opacity: 1;}
    #section2 .inr {padding: 0;}
    #section2 .inr .subtit {text-align: center;margin-bottom: 5%;}
    #section2 .inr ul.award {margin:5% 0;}
    #section2 .inr .certi {overflow: hidden;}
    #section2 .inr .certi > div {opacity: 1;position: absolute;margin-right: 2%;width: 32%;float: left;border-radius: 5px !important;}
    #section2.active .inr .certi > div {text-align: center;}
    #section2 .inr .certi > div a {padding:9% 10px;}
    #section2 .inr .certi > div:last-child {margin-right: 0;}
    #section2 .inr .certi .patent {left: 0 !important;}
    #section2 .inr .certi .GS {left: 50% !important;}
    #section2 .inr .certi .enroll {left: 100% !important;transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);-o-transform: translateX(-100%);}
    #section2 .inr .certi > div p {font-size:1.0625rem;}
    #section2 .inr .certi > div p.num b {font-size:1.313em;}
    #section2 .inr .certi .imgsize {margin: 0 auto;}
}
@media all and (max-width: 767px){
    #section2 {padding:10% 5%;}
    #section2 .inr .subtit {font-size: 1.0625rem;line-height: 25px;word-break: keep-all;}
    #section2 .inr .subtit br {display: none;}
    #section2 .inr .subtit span {font-size: 0.9375rem;}
    #section2 .inr ul.award {margin:6% 0;padding-top: 6%;border-top: 1px solid #e9e9e9;}
    #section2 .inr ul.award li {text-align: center;margin-right: 3%;width: 47%;height: 100px;}
    #section2 .inr ul.award li:nth-child(2n) {margin-right: 0;}
    #section2 .inr ul.award li > div {float:initial;}
    #section2 .inr ul.award li > div .imgsize {max-width: 50px;margin: 0 auto;}
    #section2 .inr ul.award li .txtw {font-size:0.9375rem;word-break: keep-all;}
    #section2 .inr .certi {overflow: inherit;height:auto !important;}    
    #section2 .inr .certi > div {position: inherit;width: 100%;margin-right: 0;}
    #section2 .inr .certi > div p {font-size:0.9375rem;line-height: 27px;}
    #section2 .inr .certi > div {height: 100%;}
    #section2 .inr .certi > div {overflow: hidden;margin-bottom: 5px;}
    #section2 .inr .certi > div:last-child {margin-bottom: 0;}
    #section2 .inr .certi > div p,
    #section2 .inr .certi > div div {float: left;} 
    #section2 .inr .certi > div .imgsize { margin-right: 10px;margin-bottom: 0;}
    #section2 .inr .certi .patent .imgsize {background: url('../images/main/ico_certi01.png')no-repeat;width: 22px;height: 24px;background-size: cover;margin-top: 1px;}
    #section2 .inr .certi .GS .imgsize {background: url('../images/main/ico_certi02.png')no-repeat;width: 22px;height: 23px;background-size: cover;margin-top: 2px;}
    #section2 .inr .certi .enroll .imgsize {background: url('../images/main/ico_certi03.png')no-repeat;width: 20px;height: 22px;background-size: cover;margin-top: 2px;}
    #section2 .inr .certi > div p.num b {font-size:1rem;margin-left: 10px;}
    #section2 .inr .certi > div a {padding:3% !important;height: 45px;}
}
@media all and (max-width: 640px){
    #section2 .inr ul.award li {height:130px;}
    #section2 .inr ul.award li .txtw p {line-height: 22px;}
}

/* 네번째 화면 */
#section3 {background: url('../images/main/bg_issu.jpg')no-repeat;width: 100%;height: 100%;background-size: cover;} 
#section3 .inr {position: relative;margin-top: 200px;opacity: 0;transform: translateY(200px);-webkit-transform: translateY(200px);-moz-transform: translateY(200px);-ms-transform: translateY(200px);-o-transform: translateY(200px);}
/* 메인밑에서 올라오는 효과 */
#section3.active .inr {
    -webkit-transition: 1s all ease 0.5s;
   transition: 1s all ease 0.5s;
    -moz-transition: 1s all ease 0.5s;
    -ms-transition: 1s all ease 0.5s;
    -o-transition: 1s all ease 0.5s;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    opacity: 1;
}
#section3 .inr {max-width: 1200px;margin: 0 auto;}
#section3 .inr .subtit {color:#fff;overflow: hidden;position: relative;margin-bottom: 3%;}
#section3 .inr .subtit h3,
#section3 .inr .subtit p {float: left;}
#section3 .inr .subtit h3 {font-size:2.188rem;font-weight: 500;}
#section3 .inr .subtit p {font-size:1.25rem;font-weight: 100;position: absolute;right: 0;bottom: 0;}
#section3 .inr .boxw {overflow: hidden;}
#section3 .inr .boxw .box {float: left;width: 33.33%;border-top: 1px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(255,255,255,0.2);height: 470px;border-right: 1px solid rgba(255,255,255,0.2);padding: 60px 50px 50px 50px;color:#fff;}
#section3 .inr .boxw .box:first-child {border-left: 1px solid rgba(255,255,255,0.2);}
#section3 .inr .boxw .box .tit {text-align: center;}
#section3 .inr .boxw .box .tit h4 {font-size:1.375rem;font-weight: 500;margin-bottom: 35px;border-bottom: 2px solid #fff;padding-bottom: 25px;}
#section3 .inr .boxw .box .txtw p {font-size:1.125rem;font-weight: 100;line-height: 30px;}
#section3 .inr .boxw .box .inrmargin {height: 100%;position: relative;}
#section3 .inr .boxw .box .qabtn {display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: 45px;line-height: 45px;text-align: center;color:#000;font-size:1.125rem;background-color: rgba(255,255,255,0.7);font-weight: 300;}
#section3 .inr .boxw .box .qabtn:hover,
#section3 .inr .boxw .box .qabtn:active,
#section3 .inr .boxw .box .qabtn:focus {background-color: #2359b1;transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;color:#fff;font-weight: 300;}
#section3 .inr .boxw .box .snsbtnw a {display: block;color:#fff;font-size:1.125rem;font-weight: 100;line-height: 60px;position: relative;}
#section3 .inr .boxw .box .snsbtnw a .imgsize {display: inline-block;vertical-align: top;margin-top: 10px;}
#section3 .inr .boxw .box .snsbtnw a.facebook .imgsize {background: url('../images/main/ico_sns01.png')no-repeat;width: 45px;height: 45px;background-size: cover;}
#section3 .inr .boxw .box .snsbtnw a.youtube .imgsize {background: url('../images/main/ico_sns02.png')no-repeat;width: 45px;height: 45px;background-size: cover;}
#section3 .inr .boxw .box .snsbtnw a:before,
#section3 .inr .boxw .box .snsbtnw a:after {content: "";display: inline-block;clear: both;position: absolute;background-color: #fff;width: 0;height: 1px;right: 0;top: 20px;}
#section3 .inr .boxw .box .snsbtnw a:before {top: 27px;}
#section3 .inr .boxw .box .snsbtnw a:after {height: 0;width: 1px;right: 7px;}
#section3 .inr .boxw .box .snsbtnw a:hover:before,
#section3 .inr .boxw .box .snsbtnw a:active:before,
#section3 .inr .boxw .box .snsbtnw a:focus:before {width: 16px;transition: all 0.3s;transform: rotate(-360deg);}
#section3 .inr .boxw .box .snsbtnw a:hover:after,
#section3 .inr .boxw .box .snsbtnw a:active:after,
#section3 .inr .boxw .box .snsbtnw a:focus:after {height: 16px;transition: all 0.6s;transform: rotate(180deg);}
#section3 .inr .boxw .box .imgsize  {margin-right: 10px;}
/* 채용정보 */
#section3 .inr .boxw .box.Hire {padding: 60px 0 50px 0;}
#section3 .inr .boxw .box.Hire .tit {padding:0 50px;}
#section3 .inr .boxw .box.Hire ul.list li a {display: block;padding: 0 50px;overflow: hidden;color:#fff;line-height: 45px;position: relative;z-index: 1;}
#section3 .inr .boxw .box.Hire ul.list li a:before {content: "";display: inline-block;clear: both;position: absolute;width: 0;height: 100%;background-color: #2359b1;opacity: 0;z-index: -1;}
#section3 .inr .boxw .box.Hire ul.list li a:hover:before,
#section3 .inr .boxw .box.Hire ul.list li a:active:before,
#section3 .inr .boxw .box.Hire ul.list li a:focus:before {opacity: 1;width: 100%;transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;left: 0;top: 0;}
#section3 .inr .boxw .box.Hire ul.list li a p {float: left;font-size:1.125rem;font-weight: 100;}
#section3 .inr .boxw .box.Hire ul.list li a p .imgsize {display: inline-block;text-align: center;vertical-align: top;}
#section3 .inr .boxw .box.Hire ul.list li a.developer p .imgsize {background: url('../images/main/hire/ico_Hire01.png')no-repeat;width: 30px;height: 25px;margin-top: 13px;}
#section3 .inr .boxw .box.Hire ul.list li a.webdesigner p .imgsize {background: url('../images/main/hire/ico_Hire02.png')no-repeat;width: 30px;height: 27px;margin-top: 12px;}
#section3 .inr .boxw .box.Hire ul.list li a.sale p .imgsize {background: url('../images/main/hire/ico_Hire03.png')no-repeat;width: 30px;height: 39px;margin-top: 10px;}
#section3 .inr .boxw .box.Hire ul.list li a p:last-child {float: right;font-size:0.875rem;}
#section3 .inr .boxw .box.Hire ul.list li a p:last-child b {font-size:1.375rem;font-weight: 500;}
@media all and (max-width: 1460px){
    #section3 .inr {padding:0 15%;}
    #section3 .inr .boxw .box {padding: 60px 25px 50px 25px;}
    #section3 .inr .boxw .box.Hire .tit {padding:0 25px;}
    #section3 .inr .boxw .box .txtw p br {display: none;}
    #section3 .inr .boxw .box.Hire ul.list li a {padding:0 25px;}
    #section3 .inr .boxw .box .snsbtnw a .imgsize {display: inline-block;vertical-align: top;margin-top: 10px;}
    #section3 .inr .boxw .box .snsbtnw a.facebook .imgsize {background: url('../images/main/ico_sns01_mob.png')no-repeat;width: 40px;height: 40px;background-size: cover;}
    #section3 .inr .boxw .box .snsbtnw a.youtube .imgsize {background: url('../images/main/ico_sns02_mob.png')no-repeat;width: 40px;height: 40px;background-size: cover;}
    #section3 .inr .boxw .box .snsbtnw a:before,
    #section3 .inr .boxw .box .snsbtnw a:after {display: none;}
}
@media all and (max-width: 1024px){
    #section3 {height: auto !important;}
    #section3 .inr {padding:10% 5%;margin-top: 0;height: auto !important;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);opacity: 1;}
    #section3 .inr .subtit h3 {font-size: 1.75rem;}

}
@media all and (max-width: 767px){
    #section3 {background: url(../images/main/bg_issu.jpg)no-repeat center;background-size: cover;}
    #section3 .inr .subtit {text-align: center;margin-bottom: 6%;}
    #section3 .inr .subtit h3 {font-size:1.188rem;float: inherit;}
    #section3 .inr .subtit p {font-size: 0.9375rem;position: inherit;width: 100%;}
    #section3 .inr .boxw .box {width: 100%;height: auto;padding: 15px 25px 15px 25px;margin-bottom: 10px;}
    #section3 .inr .boxw .box:nth-child(2),
    #section3 .inr .boxw .box:nth-child(3) {border-left: 1px solid rgba(255,255,255,0.2);}
    #section3 .inr .boxw .box:last-child {margin-bottom: 0;}
    #section3 .inr .boxw .box.Hire {padding:15px 0;}
    #section3 .inr .boxw .box .tit h4 {font-size: 1rem;font-weight: 300;}
    #section3 .inr .boxw .box .tit h4 {padding-bottom: 10px;margin-bottom: 10px;}
    #section3 .inr .boxw .box .qabtn {position: inherit;height: 35px;line-height: 35px;margin-top: 10px;font-size:0.9375rem;}
    #section3 .inr .boxw .box .txtw p {font-size:0.9375rem;line-height: 20px;margin: 15px 0;}
    #section3 .inr .boxw .box.Hire ul.list li a {line-height: 30px;}
    #section3 .inr .boxw .box.Hire ul.list li a .imgw {display: inline-block;width: 30px;margin: 0 auto;}
    #section3 .inr .boxw .box.Hire ul.list li a p .imgsize {margin: 0;}
    #section3 .inr .boxw .box.Hire ul.list li a.developer p .imgsize {background: url('../images/main/hire/ico_Hire01_mob.png')no-repeat center;width: 23px;height: 19px;margin-top: 6px;background-size: cover;}
    #section3 .inr .boxw .box.Hire ul.list li a.webdesigner p .imgsize {background: url('../images/main/hire/ico_Hire02_mob.png')no-repeat center;width: 23px;height: 21px;margin-top: 5px;background-size: cover;}
    #section3 .inr .boxw .box.Hire ul.list li a.sale p .imgsize {background: url('../images/main/hire/ico_Hire03_mob.png')no-repeat center;width: 20px;height: 26px;margin-top: 4px;background-size: cover;}
    #section3 .inr .boxw .box.Hire ul.list li a p {font-size:0.9375rem;}
    #section3 .inr .boxw .box.Hire ul.list li a p:last-child b  {font-size:1.188rem;}
    #section3 .inr .boxw .box .snsbtnw a {font-size:0.9375rem;line-height: 40px;}
    #section3 .inr .boxw .box .snsbtnw a .imgsize {margin-top: 6px;margin-right: 5px;}
    #section3 .inr .boxw .box .snsbtnw a.facebook .imgsize {background: url('../images/main/ico_sns01_mob.png')no-repeat;width: 30px;height: 30px;background-size: cover;}
    #section3 .inr .boxw .box .snsbtnw a.youtube .imgsize {background: url('../images/main/ico_sns02_mob.png')no-repeat;width: 30px;height: 30px;background-size: cover;}
    #section3 .inr .boxw .box .snsbtnw a:before,
    #section3 .inr .boxw .box .snsbtnw a:after {display: block;top: 13px;}
    #section3 .inr .boxw .box .snsbtnw a:before {top: 20px;}
}

/* 메인의 footer */
#section4 {height:auto !important;}
#section4 .fp-tableCell {height:auto !important;}
#fp-nav ul li:nth-child(5) {display: none;}

/* 20210615 언어버튼추가 */
.lang {display: flex;margin-left: 40px;}
.lang button {padding:0 15px;font-weight: 300;background: rgba(255,255,255,0);color:#fff;border: 1px solid #fff;font-size:14px;height: 25px;}
.lang button.on {background: #fff;color:#2359b1;}
.lang button:first-child {border-radius: 20px 0 0 20px;}
.lang button:last-child {border-radius: 0 20px 20px 0;}
.fp-viewing-secondPage .lang,
.fp-viewing-3rdPage .lang,
.fp-viewing-4rdPage .lang {display: none;}
@media all and (max-width: 640px){
    .lang {margin-left: 0;margin-top: 20px;}
    .lang button {font-size:15px;padding: 0 10px;}
    header .logow {display: block;}
}