@charset "utf-8";
@import url('fonts.css');
/* company */
.company .fl {width:100%;padding-right: 50%;float:none;background:url(../images/img_portpolio.png) right 80% no-repeat; word-break:keep-all;}
.company .fl p {margin-bottom:30px; font-size:18px; line-height:1.8;}
.company .fl p.portpolio{margin-bottom: 0;}
.company .fr {width:40%; text-align:right;}
.company .portpolio {font-size:24px; margin-top:80px;}

/* history */

.history {position: relative; font-size:18px; line-height:1.8; overflow:hidden;}
.history .trace {position: relative; margin-left:-150px;}
.history .trace:before {content:""; position:absolute; top:30px; left:50%; bottom:30px; width:1px; background:#ccc;}
.history .trace ul li {padding:0 0 0 50%; height:160px;}
.history .trace ul li:last-child {height:auto;}
.history .trace ul li .year {float:left; width:40%; height:100%; word-wrap: normal; position: relative; display:inline-block; font-family: 'Montserrat', sans-serif; font-size:60px; font-weight:800; padding:0 0 0 50px; line-height:1;  word-break:keep-all;}
.history .trace ul li .year:before {content:"";position:absolute;top: 30px;left:-5px;width:10px;height:10px;transform: translateY(-50%);background:#000;border-radius:5px;}
.history .trace ul li dl {float:left; width:60%; padding:0 0 0 30px; overflow:hidden;}
.history .trace ul li dl dt {float:left; width:15%; padding-top:20px; font-family: 'Montserrat', sans-serif;}
.history .trace ul li dl dd {float:left; width:85%; padding-top:20px; word-break: keep-all;}
.history .trace ul li.on .year:before {content:"";position:absolute;top: 30px;left:-5px;width:10px;transform: translateY(-50%);height:10px;background:#e50012!important;border-radius:5px;}
.history .trace ul li:nth-child(2n) {padding:0 50% 0 0;}
.history .trace ul li:nth-child(2n) .year {float:right; text-align:right; position: relative; display:inline-block; font-family: 'Montserrat', sans-serif; font-size:60px; font-weight:800; padding:0 50px 0 0; line-height:1;}
.history .trace ul li:nth-child(2n) .year:before {content:"";position:absolute;top: 30px;left:auto;right:-5px;width:10px;height:10px;transform: translateY(-50%);background:#000;border-radius:5px;}
.history .trace ul li:nth-child(2n) dl {float:right; width:60%; padding:0 30px 0 0 ; direction:rtl;}
.history .trace ul li:nth-child(2n) dl dt {float:right; width: 15%;padding-top:20px;text-align:right; direction:rtl;}
.history .trace ul li:nth-child(2n) dl dd {float:right; width:85%; padding-top:20px; text-align:right; direction:rtl;}

/* history */
*,
*:before,
*:after {
  box-sizing: border-box;
}

.aos-all {
  width: 1000px;
  max-width: 98%;
  margin: 10vh auto 0 auto;
}

.aos-item {
  display: inline-block;
  float: left;
  width: 33.3333%;
  height: 300px;
  padding: 20px;
}

.aos-item__inner {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  background: #1da4e2;
  line-height: 260px;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 800px) {
  .aos-item {
    width: 50%;
  }
}

/* award */

.award {position: relative; font-size:18px;}
.award .list {margin-right:-50px;}
.award .list li {width:196px; height:196px; float:left; border:1px solid #000; border-radius:24px; margin:0 50px 50px 0; transition: 0.25s ease-out; cursor:pointer; overflow:hidden;}
.award .list li:hover {box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); border:1px solid #fff;}
.award .list li .award_title {text-align:center; font-weight:400; width:100%; height:100%; display:block; padding:0; border-radius:24px; overflow: hidden;}
.award .list li .award_title p {display:block; vertical-align:middle; width:100%; height:60px; padding:0 20px;  line-height:1.2;}
.award .list li img{-webkit-filter: grayscale(100%);filter: gray;transition:all .3s;text-align: center;transform: translate(-50%);margin-left: 50%;}
.award .list li:hover img{-webkit-filter: grayscale(0%); filter: none;}

.award .list li img {
	filter: url('../js/filters.svg#grayscale'); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Webkit Nightlies, Google Chrome Canary and Microsoft Edge*/
}
.award .list li:hover img {
	filter: none; /* Applies to FF + IE */
	-webkit-filter: grayscale(0);
}


.awardTitle{padding: 15px 0; border:1px solid #000; border-radius:50px; overflow:hidden; box-sizing: border-box;}
.awardTitle .jb-table-cell{font-size: 16px; padding:0 20px; border-right:1px solid #cccccc; font-weight: 600; width:200px;}
.awardTitle .jb-table-cell p{font:inherit;}
.awardTitle .jb-table-cell:last-child{width:auto; border-right:0;}

.awardPopTable{font-size: 16px; padding:0px;}
.awardPopTable p{font:inherit; line-height: 1.8;}
.awardPopTable .jb-table-cell{padding: 15px 20px; border-right:none; width:200px;}
.awardPopTable .jb-table-cell:last-child{width:auto;}
.awardPopTable .jb-table-row{border-bottom: 1px solid #e5e5e5;}
.awardPopTable .jb-table-row:nth-child(2n){background: #f6f6f6;}
.awardPopTable .col1{font-size: 36px; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 800;}
.awardPopTable .col2{font-weight:bold;}

.popWrap.pop_award >.content_wrap .container {padding-bottom: 350px;}
.popWrap.pop_award .content_wrap{width:100%;}

.awardStyle{}
.awardStyle .awardTitle{}
.awardStyle .awardTitle .title_fix{}
.awardStyle .awardTitle .title_fix >li{width:20%; float: left; font-size: 16px; padding:0 20px; border-right:1px solid #cccccc; font-weight: 600;}
.awardStyle .awardTitle .title_fix >li.col4{width:40%; border-right:0;}

.awardStyle .awardPopTable th.col1{padding-left: 20px;}
.awardStyle .awardPopTable td{line-height: 1.8; padding-right: 20px;}
.awardPopList >li{padding:20px 0;}
.awardPopList >li:nth-child(2n){background:#f6f6f6;}

.awardStyle .awardPopList.pc {display: block;}
.awardStyle .awardPopList.mobile {display: none;}


/* network */

.network {position: relative; font-size:16px; line-height:1.8;}
.network .fl {width:46%}
.network .fr {width:46%}
.network .list {}
.network .list>li {width: 100%; overflow: hidden; border-bottom:1px solid rgba(0,0,0,0.1); }
.network .list dl {width:50%; float: left; padding:30px 0;}
.network .list dl dt {font-size:24px; font-weight:700;}
.network .list dl dd.loc {padding-left:24px; background:url(../images/ico_loc.png) 0 7px no-repeat; margin-top:10px;}
.network .list dl dd.tel {padding-left:24px; background:url(../images/ico_tel.png) 0 center no-repeat; margin-top:10px;}
.network .list dl dd.loc a:hover {text-decoration:underline;}
.network .list dl dd a span {display:none; background:url(../images/ico_go.png) 0 0 no-repeat; width:20px; height:20px; position: relative; top:3px; margin-left:5px;}
.network .list dl dd.loc a:hover span {display:inline-block;}
.map_area{width:100%; height:612px; background: url(../images/img_network_map.jpg) 0 0 no-repeat;}
.map_area .map_info{border-radius:50px; border:1px solid #000; padding:10px 20px; font-weight: bold; background: #fff; cursor:pointer; padding-right: 40px; transition:all .3s;}
.map_area .map_info i.detail{width:20px;height:20px; background: #000 url(../images/ico_plus_detail.png) center no-repeat; border-radius:50%; position: absolute; float:none; right:15px; top:50%; margin-top: -10px; transition:all .3s;}
.map_area .map_info.list1{top: 300px;left:180px;}
.map_area .map_info.list2{top: 335px;left:490px;}
.map_area .map_info.list3{top: 248px;left:490px;}
.map_area .map_info.list4{top: 360px;left:180px;}
.map_area .map_info:hover{background: #000; color:#fff}
.map_area .map_info:hover i.detail{background: #fff url(../images/ico_plus_detail_on.png) center no-repeat;}


.map_area .txt_info{border-radius:50px; border:1px solid #000; font-weight:normal; padding:5px 15px; background: #fff; font-size:17px;}
.map_area .txt_info.list1{top: 20px; left:80px;}
.map_area .txt_info.list2{top: 125px; left:250px;}
.map_area .txt_info.list3{top:468px; left:558px;}
.map_area .txt_info.list4{top:285px; left:750px;}


.map_txtWrap{bottom:0;}
.map_txtWrap img{vertical-align:middle; margin-right:8px; margin-bottom:2px;}


.network .con.imgarea{width:46%;margin: 70px auto;height:0;padding:0 0 25.875%;position:relative;}
.network .con.imgarea .video{width:100%; height:100%; position:absolute; left:0; top:0;}
.network_pop_con{}
.network_pop_con .con{width:100%;}
.network_pop_con .con.txtarea{}
.network_pop_con .info.loc {padding-left:28px; background:url(../images/ico_loc.png) 0 7px no-repeat; margin-top:10px;}
.network_pop_con .info.loc span {display:none; background:url(../images/ico_go.png) 0 0 no-repeat; width:20px; height:20px; position: relative; top:3px; margin-left:5px;}
.network_pop_con .info.loc:hover a{text-decoration:underline;}
.network_pop_con .info.loc:hover span{display: inline-block;}
.network_pop_con .info.tel {padding-left:28px; background:url(../images/ico_tel.png) 0 center no-repeat; margin-top:10px;}
.network_pop_con .info.mail {padding-left:28px; background:url(../images/ico_mail.png) 0 center no-repeat; margin-top:10px;}
.network .con_box{font-size:20px; padding:20px 20px; border-radius:30px; line-height:1.4; font-weight:bold;}

.popWrap.pop_network a.go_map{width:120px; height:40px; border-radius:20px; border: 1px solid #000;  display: block; margin:30px auto; text-align: center; line-height: 40px; box-sizing:border-box; font-size: 18px; transition:all .3s;}
.popWrap.pop_network a.go_map:hover{background: #000; color:#fff;}
.popWrap.pop_network{width:540px; height:auto; border-radius:20px; border: 1px solid #000; left:50%; top:50%; margin-top: -175px; margin-left: -270px; display: none;  position: absolute; z-index: 800; }
.popWrap.pop_network .container{width:100%; padding-bottom: 0; height:auto;}
.popWrap.pop_network.on{box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2); display: block;}
.popWrap.pop_network>.content_wrap{padding:20px; width:100%;}
.popWrap.pop_network>.content_wrap .pop_title {width:100%;}
.popWrap.pop_network >.content_wrap .pop_title h3.sub_title{margin-top: 0; padding: 20px 0; font-size: 28px; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 10px; text-transform:none}
.popWrap.pop_network .pop_close{width:18px; height:18px; background-size:100%;;}



/* career */

.career {position: relative; font-size:18px;}
.career .list {padding-bottom:35px;}
.career .list li {width:124px; height:200px; float:left; margin-right:52px;}
.career .list li:first-child {margin-left:0;}
.career .list li .ico {position: relative; border:1px solid #000; width:124px; height:124px; border-radius:63px;}
.career .list li .ico:after {content:""; position:absolute; top:50%; right:-33px; transform: translateY(-50%); width:15px; height:24px; background:url(../images/ico_step.png) 0 0 no-repeat;}
.career .list li:last-child .ico:after {display:none;}
.career .list li .ico.apply {background:url(../images/ico_career_apply.png) center no-repeat #f6f6f6;}
.career .list li .ico.doc {background:url(../images/ico_career_doc.png) center no-repeat #f6f6f6;}
.career .list li .ico.ltab {background:url(../images/ico_career_ltab.png) center no-repeat #f6f6f6;}
.career .list li .ico.interview {background:url(../images/ico_career_interview.png) center no-repeat #f6f6f6;}
.career .list li .ico.interview01 {background:url(../images/ico_career_interview01.png) center no-repeat #f6f6f6;}
.career .list li .ico.interview02 {background:url(../images/ico_career_interview02.png) center no-repeat #f6f6f6;}
.career .list li .ico.intern {background:url(../images/ico_career_intern.png) center no-repeat #f6f6f6;}
.career .list li .ico.repute {background:url(../images/ico_career_repute.png) center no-repeat #f6f6f6;}
.career .list li .ico.final {background:url(../images/ico_career_final.png) center no-repeat #f6f6f6;}
.career .list li .txt {text-align:center; margin-top:20px;}
.career .list li .txt span {font-size:14px; display:block; margin-top:10px;}
.career .con2 li,.career .con3 li {height:240px;}

.career .list.border{border-bottom: 1px solid rgba(0,0,0,0.1);}
.career .caution {background:url(../images/ico_caution.png) 0 center no-repeat; padding-left:14px; font-size:14px;}
.career .caution a {text-decoration:underline;}
.career .btn {border-top:1px solid rgba(0,0,0,0.1); text-align:center; margin-top:80px; padding:80px; padding-bottom: 0;}
.career .btn a.jump {display:inline-block; background:#fff; width:300px; line-height:70px; border-radius:35px; font-size:24px; font-weight:700; color:#000; transition:all .3s; border: 1px solid #000;}
.career .btn a.jump span {display:inline-block; width:24px; height:22px; background:url(../images/ico_jump.png) center no-repeat; margin-left:10px;}
.career .btn a.jump:hover,.career .btn a.jump:focus,.career .btn a.jump:active{ background:#000; color:#fff;}
body:not(.mobile) .career .btn a.jump:hover span,body:not(.mobile) .career .btn a.jump:focus span,body:not(.mobile) .career .btn a.jump:active span{background:url(../images/ico_jump_active.png) center no-repeat;}


/* contact */

.contact {position: relative; font-size:16px; line-height:1.8;}
.contact #map {border:1px solid #000; border-radius:24px; height:600px; overflow: hidden;}
.contact .loc {padding-left:24px; background:url(../images/ico_loc.png) 0 center no-repeat; margin-bottom:80px;}
.contact .cp {overflow:hidden;}
.contact .cp dl {float:left; width:40%; margin-bottom:40px;}
.contact .cp dl dt {display:block; font-size:18px; font-weight:700; margin-bottom:10px;}
.contact .cp dl dd {display:inline-block;}
.contact .cp dl dd.tel {padding-left:24px; background:url(../images/ico_tel.png) 0 center no-repeat; width:120px;}
.contact .cp dl dd.mail {padding-left:30px; background:url(../images/ico_mail.png) 0 center no-repeat; margin-left:20px;}
.contact .cp dl dd.mail a:hover {text-decoration:underline;}


/* creative */

/*.creative {position: relative; font-size:18px;}
.creative .kv { border-radius:24px; overflow:hidden;}
.creative .kv img {width:100%;}
.creative p {margin-top:50px;}*/

.creative {}
.creative .fl {width:100%; padding-right: 400px; float:none; position:relative;}
.creative .fl .live_img{position:absolute; top:0; right:0;}
.creative .fl p {margin-bottom:30px; font-size:18px; line-height:1.8;}
.creative .fl p:last-child{margin-bottom:0;}
.creative .pf_btn .btn{width:180px; margin-top:20px; font-size: 14px; padding:0 30px;  height:50px; line-height: 50px; border-radius:50px; display: inline-block; font-weight: normal; letter-spacing: 0; border:1px solid #000; transition:all .3s;}
.creative .pf_btn .btn i{width: 15px; height: 10px; background: url(../images/main/ico_arr.png) center no-repeat; margin-left: 10px;}
.creative .pf_btn .btn:hover{background:#000; color:#fff;}
.creative .pf_btn .btn:hover i{background: url(../images/main/ico_arr_w.png) center no-repeat;}


/* btl */

.btl {position: relative; font-size:18px;}
.btl ul.list {padding-top:30px;}
.btl ul.list li {width:50%; float:left; padding: 0 100px 50px 0; height:350px;}
.btl ul.list li .ico {width:120px; height:120px; border-radius:60px; border:1px solid #000;}
.btl ul.list li .ico.design {background:url(../images/ico_design.png) center no-repeat #f6f6f6;}
.btl ul.list li .ico.promotion {background:url(../images/ico_promotion.png) center no-repeat #f6f6f6;}
.btl ul.list li .ico.ex {background:url(../images/ico_ex.png) center no-repeat #f6f6f6;}
.btl ul.list li .ico.marketing {background:url(../images/ico_marketing.png) center no-repeat #f6f6f6;}
.btl ul.list li dl {margin-top:30px;}
.btl ul.list li dl dt {font-size:24px; font-weight:700; padding-bottom:30px; margin-bottom:30px; position: relative;}
.btl ul.list li dl dt:after {content:""; position:absolute; bottom:0; left:0;width:50px; height:2px; background:#000;}


/* media */

.media {position: relative; font-size:18px; line-height:1.6;}
.media .box_txt {background:#f6f6f6; height:100px; border-radius:50px; position: relative; padding:25px; display:table; width:100%;}
.media .box_txt .num {position:absolute; top:50%; margin-top: -25px; font-size:22px; font-weight:700; background:#000; color:#fff; text-align:center; display:inline-block; width:50px; line-height:50px; border-radius:25px; font-family: 'Montserrat', sans-serif; font-weight: 800;}
.media .box_txt p {padding-left:70px; height:50px; display:table; font-size: 20px; font-weight: bold;}
.media .box_txt p span {display:table-cell; vertical-align:middle; line-height: 1.3;}
.media ul.process li {width:236px; float:left; padding: 0; margin-bottom: 20px;}
.media ul.process li .ico {width:120px; height:120px; border-radius:60px; border:1px solid #000; position: relative;}
.media ul.process li .ico:after {content:""; position:absolute; top:50%; right:-65px; transform: translateY(-50%); width:15px; height:24px; background:url(../images/ico_step.png) 0 0 no-repeat;}
.media ul.process li:last-child .ico:after {display:none;}
.media ul.process li .ico.step1 {background:url(../images/ico_process01.png) center no-repeat #f6f6f6;}
.media ul.process li .ico.step2 {background:url(../images/ico_process02.png) center no-repeat #f6f6f6;}
.media ul.process li .ico.step3 {background:url(../images/ico_process03.png) center no-repeat #f6f6f6;}
.media ul.process li .ico.step4 {background:url(../images/ico_process04.png) center no-repeat #f6f6f6;}
.media ul.process li .ico.step5 {background:url(../images/ico_process05.png) center no-repeat #f6f6f6;}
.media ul.process li dl {margin-top:30px;}
.media ul.process li dl dt {font-weight:700; padding-bottom:30px; margin-bottom:30px; position: relative;}
.media ul.process li dl dt:after {content:""; position:absolute; bottom:0; left:0;width:50px; height:2px; background:#000;}
.media ul.process li dl dd{padding-right: 20px;}
.media ul.list li {position: relative; padding-left:13px; margin-bottom:10px;}
.media ul.list li:before {content:""; position:absolute; top:13px; left:0; width:3px; height:3px; background:#000; border-radius:50%;}


/* big data */

.big_data {position: relative; font-size:18px;}



/* sports */

.sports {position: relative; font-size:18px;}
.sports ul.list {padding-top:30px;}
.sports ul.list li {width:50%; height:325px; float:left; margin-bottom: 50px;}
.sports ul.list li .ico {width:120px; height:120px; border-radius:60px; border:1px solid #000;}
.sports ul.list li .ico.sports1 {background:url(../images/ico_sports01.png) center no-repeat #f6f6f6;}
.sports ul.list li .ico.sports2 {background:url(../images/ico_sports02.png) center no-repeat #f6f6f6;}
.sports ul.list li .ico.sports3 {background:url(../images/ico_sports03.png) center no-repeat #f6f6f6;}
.sports ul.list li .ico.sports4 {background:url(../images/ico_sports04.png) center no-repeat #f6f6f6;}
.sports ul.list li:nth-last-child(1),.sports ul.list li:nth-last-child(2){height:auto; margin-bottom: 0;}
.sports ul.list li dl {margin-top:30px;}
.sports ul.list li dl dt {font-size:24px; font-weight:700; padding-bottom:30px; margin-bottom:30px; position: relative; }
.sports ul.list li dl dt:after {content:""; position:absolute; bottom:0; left:0;width:50px; height:2px; background:#000;}
.sports ul.list li dl dd {padding: 0 80px 0 0;}


/* 020 */

.marketing020 {position: relative; font-size:18px;}
.marketing020 .txt img {vertical-align:middle;}
.marketing020 .kv { border-radius:24px; overflow:hidden; min-height:400px;}
.marketing020 .kv img {width:100%;}
/*.marketing020 ul.list li {position: relative; padding-left:20px; margin-bottom:10px;}
.marketing020 ul.list li:last-child{margin-bottom: 0;}
.marketing020 ul.list li:before {content:""; position:absolute; top:9px; left:0; width:3px; height:3px; background:#000;}*/

.marketing020 .imgArea {width:25%;}
.marketing020 ul.list {padding-top:30px; width:100%; overflow: hidden;}
.marketing020 ul.list >li {width:25%; height:325px; float:left;} /* modify 191226 */
.marketing020 ul.list >li .ico { width:58px; height:58px;}
.marketing020 ul.list >li .ico.marketing020_1 {background:url(../images/020_ico1.png) center no-repeat;}
.marketing020 ul.list >li .ico.marketing020_2 {background:url(../images/020_ico2.png) center no-repeat;}
.marketing020 ul.list >li .ico.marketing020_3 {background:url(../images/020_ico3.png) center no-repeat;}
.marketing020 ul.list >li .ico.marketing020_4 {background:url(../images/020_ico4.png) center no-repeat;}
.marketing020 ul.list >li:nth-last-child(1),.sports ul.list li:nth-last-child(2){height:auto; margin-bottom: 0;}
.marketing020 ul.list >li dl {margin-top:30px;}
.marketing020 ul.list >li dl dt {font-size:18px; font-weight:700; padding-bottom:20px; margin-bottom:20px; position: relative; }
.marketing020 ul.list >li dl dt:after {content:""; position:absolute; bottom:0; left:0;width:50px; height:2px; background:#000;}
.marketing020 ul.list >li dl dd {padding: 0 80px 0 0; line-height: 1.4;}
.marketing020 .brandList{background: #f6f6f6; overflow: hidden; border-radius:30px;}
.marketing020 .brandList ul{padding: 20px 30px; overflow: hidden; }
.marketing020 .brandList ul >li{width:20%; height:auto; padding-bottom: 20px; margin: 0;text-align: center;border-right:1px solid rgba(0,0,0,0.1); box-sizing:border-box; font-size: 15px; font-weight: 500; float: left; }
.marketing020 .brandList ul >li:nth-child(1),.marketing020 .brandList ul >li:nth-child(2),.marketing020 .brandList ul >li:nth-child(3),.marketing020 .brandList ul >li:nth-child(4),.marketing020 .brandList ul >li:nth-child(5){ border-bottom:1px solid rgba(0,0,0,0.1);}
.marketing020 .brandList ul >li:nth-child(5n){border-right:0;}
.marketing020 .brandList ul >li .logo{margin: 20px auto 10px; width:80%; max-width:146px; }
.marketing020 .brandList ul >li .logo img{width:100%;}

/* bigdata */

.bigdata {position: relative; font-size:18px; line-height:1.6;}
.bigdata .img img {max-width: 100%;}
.bigdata .box_txt {background:#f6f6f6; border-radius:16px; position: relative; padding:50px;}
.bigdata .box_txt strong {font-size:20px;display:block;}
.bigdata .consult li {width:16.8%; margin-right:4%; float:left; font-size:20px;transition: 0.25s ease-out; font-weight:400; letter-spacing:-1px;}
.bigdata .consult li:last-child{margin-right:0;}
.bigdata .consult li strong {font-size:30px; font-family: 'Montserrat', sans-serif; display:block; font-weight:900}
.bigdata .consult li strong sup {font-size:14px;}
.bigdata .consult li .line{padding-top:30px; margin-bottom:30px; border-bottom:2px solid #000;}
.bigdata .consult li p{ line-height:1.6; }
.bigdata .bigs li {width:25%; float:left; padding: 0;}
.bigdata .bigs li .ico {width:120px; height:120px; border-radius:60px; border:1px solid #000; position: relative;}
.bigdata .bigs li .ico.bigs1 {background:url(../images/ico_bigs01.png) center no-repeat #f6f6f6;}
.bigdata .bigs li .ico.bigs2 {background:url(../images/ico_bigs02.png) center no-repeat #f6f6f6;}
.bigdata .bigs li .ico.bigs3 {background:url(../images/ico_bigs03.png) center no-repeat #f6f6f6;}
.bigdata .bigs li .ico.bigs4 {background:url(../images/ico_bigs04.png) center no-repeat #f6f6f6;}
.bigdata .bigs li dl {margin-top:30px; padding-right:30px;}
.bigdata .bigs li dl dt {font-weight:700; padding-bottom:30px; margin-bottom:30px; position: relative;}
.bigdata .bigs li dl dt:after {content:""; position:absolute; bottom:0; left:0;width:50px; height:2px; background:#000;}
.bigdata h5 {font-size:20px;line-height:1.6; }
.bigdata .list li {position: relative; padding-left:15px;}
.bigdata .list li:before {content:""; position:absolute; top:12px; left:0; width:3px; height:3px; background:#000;}
.bigdata .sphere li {width:22%; /*height:430px;*/ float:left; margin-left:4%; position: relative;}
.bigdata .sphere li:first-child {margin-left:0;}
.bigdata .sphere li img {text-align: center; max-width: 100%;}
.bigdata .fl, .bigdata .fr {width:48%;}
.bigdata .fl dt, .bigdata .fr dt {font-weight: normal; border-bottom:2px solid #000; padding:20px 0; margin-bottom:20px;}

.bigdata .con_list{width:100%; height:100%; border-top:1px solid rgba(0,0,0,0.1);}
.bigdata .con_list>li{border-bottom:1px solid rgba(0,0,0,0.1); padding:37px 0;}
.bigdata .con_list>li h4{font-size:24px; position:relative; padding-left:40px;}
.bigdata .con_list>li .num{width:32px; height:32px; background:#000; text-align:center; color:#fff; display:inline-block; border-radius:50%; line-height:32px; font-size:16px; position:absolute; top:50%; margin-top:-16px; left:0;}

.img_bigdata{width:100%;}


.ooh .oohList_wrap{overflow: hidden; padding: 50px 10px; background: #f6f6f6; border-radius:30px;;}
.ooh .oohList{overflow: hidden;}
.ooh .oohList>li{text-align: center; width:33.333%; border-right: 1px solid rgba(0,0,0,0.1); float: left; box-sizing: border-box; padding: 20px;}
.ooh .oohList>li:last-child{border-right:none;;}
.ooh .oohList>li h5{font-size: 24px; margin-bottom: 5px;}
.ooh .oohList>li.list1 i{width:73px; height: 72px; background: url(../images/ooh_list_ico1.png) center no-repeat; margin-bottom: 10px;}
.ooh .oohList>li.list2 i{width:96px; height: 58px; background: url(../images/ooh_list_ico2.png) center no-repeat; margin: 5px 0 18px;}
.ooh .oohList>li.list3 i{width:72px; height: 66px; background: url(../images/ooh_list_ico3.png) center no-repeat; margin: 0 0 16px;}

/* portfolio */

/*.portfolio {position: relative; font-size:18px; line-height:1.6; padding: 0 120px 0 22%;}*/
.portfolio .gallery> li {
	float: left; width: 30%; padding-bottom:5px; margin: 0 5% 8% 0; 
	position: relative; border-radius:15px; overflow:hidden; transition: 0.25s ease-out;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.portfolio .gallery> li:nth-child(3n) {margin: 0 0 8% 0;}
.portfolio .gallery> li a { display: block; width: 100%; height:100%; }
.portfolio .gallery> li a .thumb {height:240px; overflow:hidden; position:relative;}
.portfolio .gallery> li a .thumb img {min-width:100%; width:100%; transform:translate(-50%,-50%); left:50%; top:50%; position:absolute;}
.portfolio .gallery> li a .info {padding: 20px;}
.portfolio .gallery> li a .info .client {
	font-size: 20px; color:#000; text-overflow:ellipsis; white-space:nowrap; 
	word-wrap:normal; width:100%; overflow:hidden;
}
.portfolio .gallery> li a .info .title {font-size: 16px; color:#000; font-weight:400; text-overflow: ellipsis;white-space:nowrap;
	word-wrap:normal; width:100%; overflow:hidden;}
.portfolio .gallery> li:hover { box-shadow: 0 0 40px rgba(0, 0, 0, 0.4); }
.portfolio .live {width:50px; height:50px; margin: 0 auto;}

.portfolio .portfolio_lnb{position: absolute; background: #fff; padding:20px; width:100%; border: 2px solid #000; border-radius:0 0 30px 30px; display:none;overflow:hidden; z-index: 20;}
.portfolio .portfolio_lnb.on{display:block;}
.portfolio .portfolio_lnb>li{padding:0; font-size:18px; margin-bottom:10px; border-bottom:none;}
.portfolio .portfolio_lnb>li:last-child{margin-bottom: 0;}
.portfolio .portfolio_lnb>li a{font-weight: normal; padding:0;}
.portfolio .portfolio_lnb>li:hover a{color:#e50012;}


/*모바일페이지 부분*/
.mobile_content {
	width: 100%; padding:2em; margin: 0 5% 8% 0; 
	border-radius:14px; overflow:hidden; transition: 0.25s ease-out;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.mobile_content ul li {float: left; width:25%; padding: 1.5em;}
.mobile_content ul li p{
	  float: left;
    width: 100%;
    height: 100%;
    background: url(../images/mobile_bg.png) no-repeat center / 100%;
    overflow: hidden;
}
.mobile_content ul li p img{width:100%; height:100%;}

.mobile_content .congroup{padding:2em;}
.mobile_content .congroup p{padding:1em 0; background-image:none;}
.mobile_content .congroup p img{width:80%;}
.mobile_content .congroup dl{padding:1em;}
.mobile_content .congroup dl dt{font-size:1.5em; color:#666666; font-weight:400;}
.mobile_content .congroup dl dd{font-size:1em; color:#999999; padding: 1em 0;}
.mobile_content .congroup dl a{
	width:90%; height:2.5em;  
	background-color: #5c6d91; display: inline-block; border-radius:25px; text-align:center;
	font-size: 1.2em; color:#fff; font-weight: 400; line-height: 2.5;
	transition: all 0.4s;
}
.mobile_content .congroup dl a:hover {background-color: #32a31b;}


.mobile_half {
	float: left;
	width: 48%; padding:1em; margin: 0 2% 8% 0; 
	border-radius:14px; overflow:hidden; transition: 0.25s ease-out;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.moright {width: 48%; padding:1em; margin: 0 0 8% 2%; }

.mobile_half ul li {float: left; width:50%; padding: 1.5em;}
.mobile_half ul li p {
	  float: left;
    width: 100%;
    height: 100%;
    background: url(../images/mobile_bg.png) no-repeat center / 100%;
    overflow: hidden;
}
.mobile_half ul li p img{width:100%; height:100%;}

.mobile_half .congroup{padding:2em;}
.mobile_half .congroup dl{padding:1em;}
.mobile_half .congroup dl dt{font-size:1.5em; color:#666666; font-weight:400; margin-top:2em;}
.mobile_half .congroup dl dd{font-size:1em; color:#999999; padding: 1em 0; line-height:1.4;}
.mobile_half .congroup dl a{
	margin-top: 30px;
	width:90%; height:2.5em;  
	background-color: #5c6d91; display: inline-block; border-radius:25px; text-align:center;
	font-size: 1.2em; color:#fff; font-weight: 400; line-height: 2.5;
	transition: all 0.4s;
}
.mobile_half .congroup dl a:hover {background-color: #32a31b;}

/*about*/
#about {width:100%;}
#about div{float:left; border-radius:30px;}
#about .available {
	padding: 1em;
    width: 100%;
    border: 1px solid #bfbfbf;
    box-sizing: border-box;
    margin: 1em 0 5em;
}
#about .available div{float:left; font-family: 'NanumSquareRound', sans-serif; color:#0c2861;}
#about .available .graphic{width:60%; padding:0.8em 0.8em 0.8em 1.5em;}
#about .available .graphic h5 {font-family: 'Noto Sans KR'; font-weight: 400;}
#about .available .graphic ul li{
	float: left; 
	width: calc(100%/5);
	padding: 10px 40px 10px 0;
}
#about .available .graphic ul li img{width:100%;}

#about .available .publishing{width:40%; padding:0.8em 0.8em 0.8em 1.5em;}
#about .available .publishing h5 {font-family: 'Noto Sans KR'; font-weight: 400;}
#about .available .publishing ul li{
	float: left; 
	width: calc(100%/3);
	padding: 10px 50px 10px 0;
}
#about .available .publishing ul li img{width:100%;}


#about .technical{width:100%; text-align:center; margin: 1em 0 5em;}
#about .technical p{display:inline-block; font-size:1.8rem; color:#666666; border-bottom: 1px solid #c2c2c2; height: 1.5em;}
#about .technical p span{color:#cc66ff; font-weight:bold;}
#about .technical ul li{float:left; width:30%; border:1px solid #bfbfbf; box-sizing:border-box; border-radius:30px; margin-right:5%;}
#about .technical ul li:last-child {margin-right:0;}
#about .technical ul li dl dt{
	line-height: 2.5;
  font-size: 1.5em;
  background: #516ca4;
  border-radius: 18px;
  width: 90%;
  margin: 10px auto;
  color: #fff;
}
#about .technical ul li dl dd{
	line-height: 1.5;
	font-size: 1.25em;
}

#about .career{width:100%; text-align:center; margin:1em 0 5em;} 
#about .career p{display:inline-block; font-size:1.8rem; color:#666666; border-bottom: 1px solid #c2c2c2; height: 1.5em;}

#about .career p span{color:#cc66ff; font-weight:bold;}
#about .career ul li{
	  float: left;
    width: 23.5%;
    border: 1px solid #bfbfbf;
    box-sizing: border-box;
    border-radius: 30px;
    margin-right: 2%;
}
#about .career ul li:last-child {margin-right:0;}
#about .career ul li p {height:75px; border-bottom:none;}
#about .career ul li p img {
	width: 80%;
  transform: translateY(10px);
  vertical-align: bottom;
}

#about .career ul li dl dt{
  font-size: 0.9em;
  color: #333366;
}
#about .career ul li dl dd{
	font-size: 0.85em;
	line-height: 1.5;
}

#about .individual{width:100%; margin: 1em 0 5em;} 
#about .individual p{display:inline-block; font-size:1.8rem; color:#666666; border-bottom: 1px solid #c2c2c2; height: 1.5em; margin-right: auto;}

#about .individual .academic{width:45%;}
#about .individual .academic div{width:100%;}
#about .individual .academic p span{color:#cc66ff; font-weight:bold;}
#about .individual .academic dl{float:left; width:50%;}
#about .individual .academic dl dt{font-size: 1.5em; color:#333366; font-weight:bold;}
#about .individual .academic dl dd{font-size: 1.2em; line-height: 1.5;}

#about .individual .certificate{width:55%;}
#about .individual .certificate div{width:100%;}

#about .individual .certificate p span{color:#cc66ff; font-weight:bold;}
#about .individual .certificate ul{width:100%;}
#about .individual .certificate ul li{float:left; width:33.33%; font-size: 1.2em; line-height: 1.5; position: relative; padding-left:1.33%;}
#about .individual .certificate ul li:before {
	content: "";
	width:5px; height:5px; border-radius:25%; background:#858585; 
	position: absolute; top:40%; left:0px;
} 

/*contactus*/
#contactus {width:100%;}
#contactus .point{float:left; width:50%; padding-left:1%;}
#contactus .point h5{font-family: 'Noto Sans KR'; font-size: 2em; font-weight: 400;}
#contactus .point dl{padding:30px 0;}
#contactus .point dl dt{font-size: 1.3em; color:#000066; font-weight:bold;}
#contactus .point dl dd{font-size: 1.5em;}

#contactus .message{float:left; width:50%; padding-right:1%;}
#contactus .message h5{font-family: 'Noto Sans KR'; font-size: 2em; font-weight: 400;}
#contactus .message span {display:block; float: left; font-size: 1.2em; width: 20%;}
#contactus .message form ul li{margin: 10px 0; height: 30px;}

/*form*/
#contactus form {height: 220px;} 
#contactus form label {
	border-radius: 15px;
	float: left;
	width: 75%;
	display:block;
	height: 30px;
	line-height: 30px;
}
#contactus form input[type="text"],
#contactus form input[type="password"] {
  width: 90%;
	display: block;
	padding-left: 5px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #ebebeb;
}
#contactus form .email label {border: 0;}
/*이메일 입력란은 텍스트 입력과 주소선택으로 분리되어있으므로 label 요고가 가지는 테두리 속성을 없앰.*/
#contactus form .email input[type="text"] {
	width: 50%;
	display: inline-block;
	border: 1px solid #ccc;
	margin-right: 5px;
	border-radius: 10px;
	background-color: #ebebeb;
}
#contactus form .email select {
	border-radius: 10px;
	width: 30%;
	height: 30px;
	border: 1px solid #ccc;
	background-color: #ebebeb;
}
#contactus form .email select:focus {outline: 0;}
/*:focus 속성은 커서가 위치했을 때 상태*/

#contactus form textarea {
    min-height:50px;
    width: 75%;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    line-height: 1.6;
	  background-color: #ebebeb;
}

#contactus form .btnArea {text-align: center;}
#contactus form .btnArea button {
    color: #ffffff;
    display: inline-block;
    line-height: 40px;
    border-radius: 15px;
    margin-top: 30px;
    padding: 0px 45px 0px 20px;
    font-size: 18px;
    background: #cc66ff url(../images/massage_blit.png) 130px center no-repeat;
}

#contactus .addressIn {width:100%; padding:1%;}
#contactus .addressIn h5 {font-family: 'Noto Sans KR'; font-size: 2em; font-weight: 400;}
#contactus .addressIn span {font-size: 1.5em; line-height: 2em;}
#contactus .addressIn .mapIn {width:100%; height:400px; border-radius: 10px; overflow: hidden;}