body{font-family: 'Roboto', sans-serif;}

.toTop{display: none; position: fixed; width: 100px; height: 100px; z-index: 20; bottom: 100px; right: 200px; cursor: pointer;}
.toTop>img{width: 60px; height: 60px; position: absolute; margin: auto; top: 0; bottom: 0; right: 0; left: 0; }
.toTop>.bg{width: 100px; height: 100px; position: absolute; top: 0; background-color: #000; opacity:0.1; border-radius: 20px; transition-duration: .5s;} 
.toTop:hover>.bg{opacity: 0.2;}

.hdrWrap{width: 100%; height: 170px; position: relative; z-index:1; border-bottom: 2px solid #fff; box-sizing: border-box;}
.hdrWrap header{width: 1200px; margin: 0 auto; color: #fff; position: relative; }
.hdrWrap header>.logo{width: 170px; height: 170px; position: absolute; left: 0; right: 0; margin: auto; background-position: center; line-height: 170px;
background-size: cover; background-repeat: no-repeat; font-size: 48px; font-weight: bold; 
color: #f80; cursor: pointer;

  background: -webkit-linear-gradient(#fff, #f60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.hdrWrap header>.logo img{width: 180px; position: absolute; top: 50px; left: -20px;}
.hdrWrap header>ul{padding-top: 100px;}
.hdrWrap header>ul>li{font-size: 22px; line-height: 36px; margin: 0 20px; float: left; cursor: pointer; position: relative; 
}
.hdrWrap header>ul>li>a:hover{color: #f60;}
.hdrWrap header>ul.left>li>a>i{font-size: 24px; display: block; position: absolute; top: 0px; left: 105px;}
.hdrWrap header>.left, .right{


}
.hdrWrap header>.left{float: left; margin-left: 30px;}
.hdrWrap header>.left>li{}
.hdrWrap header>.right{float: right; margin-right: 30px;}
.hdrWrap header>.right>li{}
.hdrWrap header>.tel{position: absolute; padding:0; top: 30px; right: 30px;}
.hdrWrap header>.tel>li{float: none; line-height: 18px; font-size: 14px;}
.hdrWrap header>.tel>li>span{color:#f60; font-size: 12px;}
.hdrWrap .hdr_bg{position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.6; top: 0;}
.pageC{color:#f60;}


.lnb_service{width: 340px; height: 160px;  border: 1px solid #fff; border-top: 0px; box-sizing: border-box; position: absolute; top: 34px; left:-10px; padding: 10px 0 0 0; opacity: 0;transition-duration: .5s; position: relative;}
.lnb_service>li{font-size: 16px; line-height: 35px; color: #fff; padding-left: 20px; position: relative; z-index: 1; cursor: pointer;}
.lnb_service>li:first-child{background-color: #000; opacity: 0.6; width: 100%; height: 100%; position: absolute; top: 0; box-sizing: border-box;}
.lnb_service>li:hover{color: #f60;}


.banner{background-image: url('../img/banner_05.jpg'); background-position: center; background-size: cover; width: 100%; height: 700px; position: absolute; top: 0;}
.banner>.text{padding-top: 350px;}
.banner>.text>li{font-size: 24px; color: #fff; text-align: center; line-height: 50px; text-shadow: 1px 1px 1px #000;}
.banner>.text>li>span{font-size: 42px; line-height: 70px; font-weight: bold; text-shadow: 2px 2px 2px #000;}
.banner>.text>li>font{font-size: 18px; line-height: 40px; display: block; margin-top: 0px; text-shadow: 2px 2px 2px #000;}

.intro{background-color: #ccc; width: 100%; padding: 0 0 60px;}
.intro>h2{color: #f60; font-size: 24px; font-weight: bold; line-height: 120px; text-align: center; width: 1200px; margin: 0 auto;}
.intro>p{text-align: center; width: 1200px; font-size: 16px; margin: 0 auto; line-height: 30px; }

.content{width: 1200px; margin: 0 auto; padding: 40px 0 80px; position: relative;}
.content::after{content:""; display: block; clear: both;}
.content>ul{margin-top: 80px;}
.content>h3{color: #f60; font-size: 32px; line-height: 120px; font-weight: bold; text-align: center;}
.content>p{line-height: 40px; text-align: center;}



.service{width: 100%; background-color: #d8d8d8; background-image: url('../img/services.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.service>ul{width: 1200px; overflow: hidden; margin: 80px auto 0;}
.service>ul>li{width: 400px; height: 200px; background-color: ; float: left;  overflow: hidden;}
.service>ul>li:nth-child(4){margin-left:200px;}
.service>ul>li>div{float: left;}
.service>ul>li>.segment{width: 270px; float: left; padding: 0 20px; box-sizing: border-box;}
.service>ul>li>.segment>h4{ font-size: 16px; font-weight: bold; line-height: 30px;}
.service>ul>li>.segment>p{width: 230px; line-height: 20px;}
.service>ul>li>.img{width: 110px; position: relative; cursor: pointer;}
.service>ul>li>.img::before{display: block; content: ""; border-bottom: 35px solid #444; border-left: 55px solid transparent; border-right: 55px solid transparent; transition-duration: .5s; height:0; width:0;}
.service>ul>li>.img>span{display:block; width: 110px; height: 60px; background-color: #444; transition-duration: .5s;  color: #fff; text-align: center; font-size: 48px; line-height: 60px;}
.service>ul>li>.img::after{display: block; content: ""; border-top: 35px solid #444; border-left: 55px solid transparent; border-right: 55px solid transparent; transition-duration: .5s; height:0; width:0;}
.service>ul>li:hover>.img>span{background-color: #f60;}
.service>ul>li:hover>.img::after, .service>ul>li:hover>.img::before{border-top-color: #f60; border-bottom-color: #f60;}

.who{padding-bottom:0; margin-top: 250px;}
.who>h3{}
.who>p{}
.who>ul{overflow: hidden;}
 .who>ul>li{width: 360px; height: 650px; float: left; margin: 0 20px;} 
/*.who>ul>li{width: 280px; height: 650px; float: left; margin: 0 10px;}*/
.who>ul>li:nth-child(5){margin-left: ;}
 .who>ul>li>.img{width: 360px; height: 360px; background-color: ; position: relative; background-color: #ccc; border-radius: 10%; border:  2px solid #ccc; overflow: hidden; cursor: pointer;}
.who>ul>li>.img>img{width: 360px;  transition-duration: .5s;}
/*.who>ul>li>.img{width: 280px; height: 280px; background-color: ; position: relative; background-color: #ccc; border-radius: 10%; border:  2px solid #ccc; overflow: hidden; cursor: pointer;}
.who>ul>li>.img>img{width: 280px; transition-duration: .5s;}*/
.who>ul>li>.img:hover>img{transform:scale(1.1);}
.who>ul>li>h4{line-height: 50px; text-align: center; font-size: 16px; font-weight: bold; color: #f60; margin-top: 20px;}
.who>ul>li>p{text-align: center; line-height: 25px; text-align: center;}



.partners{background-color: #eee; width: 100%; padding: 40px 0 80px}
.partners>h3{}
.partners>p{}
.partners .partWrap{width: 1200px; height: 40px; overflow: hidden; margin: 40px auto 0;}
.partners ul{width: 2470px; height: 40px;}
.partners ul>li{float: left; width: 150px; height: 40px; margin: 0 20px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.partners ul>li.ptn01{background-image: url('../img/kt.png');}
.partners ul>li.ptn02{background-image: url('../img/north_samsung.png');}
.partners ul>li.ptn03{background-image: url('../img/wongwang.png');}
.partners ul>li.ptn04{background-image: url('../img/buchon.png');}
.partners ul>li.ptn05{background-image: url('../img/nongsim.png');}
.partners ul>li.ptn06{background-image: url('../img/injae.png');}
.partners ul>li.ptn07{background-image: url('../img/assestar.png');}
.partners ul>li.ptn08{background-image: url('../img/hyundai.png');}
.partners ul>li.ptn09{background-image: url('../img/edu.png');}
.partners ul>li.ptn10{background-image: url('../img/jogyesa.png');}
.partners ul>li.ptn11{background-image: url('../img/mcube.png');}
.partners ul>li.ptn12{background-image: url('../img/lg.png');}
.partners ul>li.ptn13{background-image: url('../img/webcash.png');}

.process{background-color: #000; width: 100%; }
.process>h3{color: #fff;}
.process>ul{ position: relative; width: 1200px; margin: 40px auto 0;}
.process>ul::before{content:""; display:block; width: 210px; height: 2px; background-color: #777; position: absolute; top: 130px; left: 260px;}
.process>ul::after{content:""; display:block; width: 210px; height: 2px; background-color: #777; position: absolute; top: 130px; left: 730px;}
.process>ul>li{float: left;}
.process>ul>li.i02{margin: 0 210px;}
.process>ul>li.i02::before{content:""; display:block; width: 10px; height: 10px; background-color: #f60; position: absolute; top: 126px; left: 365px; border-radius: 50%; z-index: 2;}
.process>ul>li.i02::after{content:""; display:block; width: 10px; height: 10px; background-color: #f60; position: absolute; top: 126px; left: 835px; border-radius: 50%; z-index: 2;}
.process>ul>li:nth-child(4){float: right; margin: 60px 240px 0 0;}
.process>ul>li:nth-child(4)::before{content:""; display: block; width: 110px; height: 180px; border-right: 2px solid #777; border-bottom: 2px solid #777; position: absolute; left: 960px; top: 420px;}
.process>ul>li:nth-child(4)::after{content:""; display:block; width: 10px; height: 10px; background-color: #f60; position: absolute; top: 596px; left: 1065px; border-radius: 50%; z-index: 2;}
.process>ul>li:nth-child(5){float: right; margin-right: 210px; margin-top: 60px;}
.process>ul>li:nth-child(5)::before{content:""; display:block; width: 210px; height: 2px; background-color: #777; position: absolute; top: 600px; left: 490px;}
.process>ul>li:nth-child(5)::after{content:""; display:block; width: 10px; height: 10px; background-color: #f60; position: absolute; top: 596px; left: 595px; border-radius: 50%; z-index: 2;}
.process>ul>li>.img{width: 260px; position: relative; cursor: pointer;}
.process>ul>li>.img::before{display: block; content: "";  border-bottom: 70px solid #444; border-left: 130px solid transparent; border-right: 130px solid transparent; transition-duration: .5s; height:0; width:0;}
.process>ul>li>.img>span{display:block; width: 260px; height: 140px; background-color: #444; transition-duration: .5s;  color: #fff; text-align: center; font-size: 72px;line-height: 140px;}
.process>ul>li>.img::after{display: block; content: ""; border-top: 70px solid #444; border-left: 130px solid transparent; border-right: 130px solid transparent; transition-duration: .5s; height:0; width:0;}
.process>ul>li:hover>.img>span{background-color: #f60;}
.process>ul>li:hover>.img::after, .process>ul>li:hover>.img::before{border-top-color: #f60; border-bottom-color: #f60;}
.process>ul>li>div{}
.process>ul>li>h4{color: #f60; text-align: center; font-size: 18px; font-weight: bold; line-height: 60px;}
.process>ul>li>p{color: #fff; text-align: center; width: 260px; line-height: 20px;}


.contactWrap{margin: 80px auto 0;}
.contactWrap>h3{line-height: 120px; margin-bottom: 80px;}
.contactWrap>.address{width: 600px; float: left; font-size: 16px; padding-left: 40px; box-sizing: border-box; position: relative;}
.contactWrap>.address>div{float: left; width: 280px; height: 150px; line-height: 25px;}
.contactWrap>.address::after{content:""; display: block; position: absolute; width: 430px; height: 1px; background-color: #aaa; top: 200px; left: 30px;}
.contactWrap>.address>div>h4{color:#f60; font-size: 16px; font-weight: bold;}
.contactWrap>.address>.office{}
.contactWrap>.address>.labor{}
.contactWrap>.address>.support{margin-top: 80px; }
.contactWrap>.contact{width: 600px; float: left; padding-left: 20px; box-sizing: border-box;}
.contactWrap>.contact>h3{font-size: 24px; font-weight: bold; color: #f60;}
.contactWrap>.contact>.csWrap{margin-top: 20px;}
.contactWrap>.contact>.csWrap h3{font-size: 14px; line-height: 50px; color: #555; }
.contactWrap>.contact>.csWrap input{width: 100%; height: 40px; text-indent: 20px;}
.contactWrap>.contact>.csWrap textarea{width: 100%;  height: 80px; text-indent: 20px; resize: none;}
.contactWrap>.contact>.csWrap .btn{width: 100%;}
.contactWrap>.contact>.csWrap .btn>button{width: 90px; height: 40px; border: 0; border-radius: 5px; background-color: #f60; color: #fff; cursor: pointer; margin: 20px 0 0 85%;}
.map{height: 400px;}
.map>iframe{width: 100%; height: 400px;}


.social{width: 100%; background-color: #333; padding: 80px 0;}
.social>ul{overflow: hidden; width: 1200px; margin: 0 auto;}
.social>ul>li{width: 360px; height: 200px; float: left; position: relative; margin: 0 20px; background-color: ;}
.social>ul>li>h3{color: #f60; font-size: 24px; line-height: 40px; font-weight: bold;}
.social>ul>li>h3::after{content:""; display: block; position: absolute; height: 1px; width: 360px; background-color: #777; top: 40px;}
.social>ul>li>p{color: #fff; line-height: 40px;}
.social>ul>li>p a{display: inline;}
.social>ul>li>p i{font-size: 36px; line-height: 50px; margin-right: 10px;}


.ftrWrap{width: 100%; height: 120px; background-color: #000; color: #fff; padding: 40px 0;}
.ftrWrap>footer{width: 1200px; margin: 0 auto;}
.ftrWrap>footer>ul{width: 480px; float: left; margin-top: 40px;}
.ftrWrap>footer>ul>li{float: left; width: 120px; height: 40px; position: relative;}
.ftrWrap>footer>ul>li:hover{color: #f60;}
.ftrWrap>footer>ul>li>.line{height: 1px; background-color: #f60; position: absolute; transform: scale(0); transition-duration: .5s; top: 20px;}
.ftrWrap>footer>ul>li:hover>.line{transform: scale(1);}
.ftrWrap>footer>ul>li::after{content:""; display: block; height: 20px; width:1px; position: absolute; top: -5px; left: 90px; background-color: #fff;}
.ftrWrap>footer>ul>li:nth-child(4)::after{display:none;}
.ftrWrap>footer>ul>li:nth-child(6)::after{display:none;}
.ftrWrap>footer>p{float: right; margin-top: 80px;}
.ftrWrap>footer>p>b{color: #f60; font-size: 16px;}