.section1 { padding: 3rem 0 4.1rem; position: relative; }
.section1 .chat_service_wrap { position: absolute; left: 50%; margin-left: -32rem; top: 1rem; z-index: 1; }
.section1 .chat_service_wrap.active { width: calc(100% - 2rem); max-width:1280px; }

.section1 .service section { position: relative; z-index: 0; padding-left: 570px; }
.section1 .service section:before { position: absolute; content: ''; width: 100vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; }

.section1 .service_list_wrap { padding-bottom: 1.5rem; text-align: center; }
.section1 .service_list_wrap:before { background: #CFE1FB; height: calc(100% + 5rem) !important; top: -3rem !important; }
.section1 .service_list_wrap h2 { font-size: 1.8rem; font-weight: 700; }
.section1 .service_list_wrap > p { font-size: 0.9rem; color: #2065be; }
.section1 .service_list_wrap .service_list { border-radius: 30px; background:#2065AD; /* background: rgba(4, 12, 26, 0.5); */ display: inline-block; padding: 8px 1rem; margin-top: 1.5rem; }
.section1 .service_list_wrap .service_list button { color: #6296c3; padding: 0 .2rem; display: inline-block; vertical-align: middle; }
.section1 .service_list_wrap .service_list button.active, .section1 .service_list_wrap .service_list button:hover, .section1 .service_list_wrap .service_list button:focus, .section1 .service_list_wrap .service_list button.seleted { color: #f5f0ff; }
.section1 .service_list_wrap .service_list button + button { margin-left: .3rem; }
.section1 .service_list_wrap .service_list button.selected { margin: 5px; border-radius: 15px; padding: 2px .4rem; background: #fff; color: #323b67; font-weight: 700; }
.section1 .service_list_wrap .service_list .scroll { width: 100%; overflow: hidden; }
.external_scroll { width: 100%; overflow: hidden; }
.section1 .service_list_wrap .example_wrap { text-align: center; margin: 15px 0 1.85rem; min-height: 170px; overflow: hidden; }
.section1 .service_list_wrap .example_wrap a { display: inline-block; vertical-align: middle; background: rgba(0, 0, 0, 0.09); padding: .5rem; border-radius: 10px; color: #000; margin: 5px; }
.section1 .service_list_wrap .example_wrap a:hover, .section1 .service_list_wrap .example_wrap a:focus { text-decoration: underline; }
.section1 .service_list_wrap .pager { text-align: center; }
.section1 .service_list_wrap .pager a { display: inline-block; vertical-align: middle; font-size: 0.75rem; width: 2rem; height: 2rem; line-height: 2rem; border-radius: 50%; color: #666; text-align: center; }
.section1 .service_list_wrap .pager a:hover, .section1 .service_list_wrap .pager a:focus { text-decoration: underline; }
.section1 .service_list_wrap .pager a.prev, .section1 .service_list_wrap .pager a.next { background: rgba(255, 255, 255, 0.5); }
.section1 .service_list_wrap .pager a.prev { margin-right: .75rem; }
.section1 .service_list_wrap .pager a.next { margin-left: .75rem; }
.section1 .service_list_wrap .pager a.now { background: #333; font-weight: 700; color:#fff; }

.section1 .chat_guide { padding: 80px 0 10px 0; color:#666;}
.section1 .chat_guide:before { background: #edf2fa; height: calc(100% + 2.1rem) !important; bottom: -4.1rem !important; }
.section1 .chat_guide:after { position: absolute; content: ''; width: 7.0rem; height: 7.0rem; background: url("/resources/images/gcc/main/people.png") no-repeat center/contain; right: 0; top: 3.15rem; }
.section1 .chat_guide h2 { font-size: 1.3rem; font-weight: 700; display:inline-block; }
.section1 .chat_guide span { font-size: 0.9rem;font-weight:700 }
.section1 .chat_guide p { font-size: 0.9rem; margin-top: .5rem; line-height: 1.8; word-break: keep-all; }
.section1 .chat_guide .img { display: block; margin-top: 1.75rem; -webkit-transition: margin-left .2s; transition: margin-left .2s; }
.section1 .chat_guide a { display: block; }
.section1 .chat_guide a:hover p, .section1 .chat_guide a:focus p { text-decoration: underline; }
.section1 .chat_guide a:hover .img, .section1 .chat_guide a:focus .img { margin-left: 1rem; }

.section2 { background: #fff; padding:1.5rem 0 }
.section2 h2 {font-size:1.15rem;font-weight:600;color:#222;float:left;padding:1rem 25px 1rem 0;margin:0}
.section2 h2 strong { font-weight: 700; color: #323b67; }
.section2 .row { margin: -.85rem 0 0 -.85rem; }
.section2 .col-xs-12 { padding: .85rem 0 0 .85rem; }
.section2 .box { background: #fff; border-radius: 10px 10px 40px 10px; -webkit-box-shadow: 10px 8px 15px rgba(0, 0, 0, 0.1); box-shadow: 10px 8px 15px rgba(0, 0, 0, 0.1); padding: 2.35rem 1rem; height: 274px; text-align: center; }
.section2 .box > * { display: block; }
.section2 .box .img { height: 3rem; margin-bottom: .95rem; }
.section2 .box p { font-size: 0.95rem; color: #333; font-weight: 500; }
.section2 .box .number { color: #3c47cb; font-size: 1.4rem; font-weight: 700; margin: 3px 0 5px; line-height: 1; }
.section2 .box a:hover, .section2 .box a:focus { text-decoration: underline; }
.section2 .banner_slider {float:left;width:calc(100% - 106px);position:relative;padding:0 2.5rem}
.section2 .banner_slider li {width:224px !important;margin-right:15px}
.section2 .banner_slider li a {display:block;width:100%;height:100%;border:1px solid #ddd;text-align:center;overflow:hidden;height:78px;line-height:76px;}
.section2 .banner_slider .bx-controls a {position:absolute;top:50%;transform:translateY(-50%);color:#a5a5a5;width:1.5rem;text-align:center}
.section2 .banner_slider .bx-controls a.bx-prev {left:0}
.section2 .banner_slider .bx-controls a.bx-next {right:0}

.mainlayerpop { position: absolute; z-index: 3; }
.mainlayerpop .cont { border: 1px solid #ddd; padding: 10px; background: #fff; }
.mainlayerpop .control { background: #000; color: #fff; padding: 5px; }
.mainlayerpop .control:after { display: block; clear: both; content: ''; }
.mainlayerpop .control .form_check { float: left; margin: 2px 0px 0px 6px; }
.mainlayerpop .control .form_check > * { line-height: 1; display: inline-block; vertical-align: middle; }
.mainlayerpop .control .form_check label { padding-left: 4px; }
.mainlayerpop .control .close { float: right; padding: 9px 0 8px; margin-right: 9px; }

@media (max-width: 1300px) {
  .section1 .chat_service_wrap { left: 1rem; margin-left: 0; }
  .section1 .service section { padding-left: 550px; }
}

@media (max-width: 1080px) {
  html { overflow : hidden; }
  html, body, #wrap, #main, .section1, .container { height: 100%; }
  
  .section1 { padding: 0; }
  .section1 .service { display: none; }
  .section2 { display: none; }
  
  .section1 .chat_service_wrap { position: relative; left: inherit; top: inherit; margin: auto; }
  .section1 .chat_service_wrap { width: calc(100% + 2rem); margin-left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 0; height: calc(100% - 56px); }
  .section1 .chat_service_wrap.active { width: calc(100% + 2rem); max-width:none; }
  
  .section1 .chat_service_wrap .chat_view { height: calc(100% - 5.5rem); padding: 1rem .5rem 1rem 1rem; }
  .section1 .chat_service_wrap .chat_view .scroll { height: 100%; }
  .external_scroll { height: 100%; }
  .section1 .chat_service_wrap .chat_view .chat_box .message_wrap .message { max-width: 100%; }
  .section1 .chat_service_wrap .chat_view .chat_box .message_wrap .message.wd { max-width: 80%; }

  .section1 .chat_service_wrap .chat_btn_wrap { position:absolute; left:0; bottom:55px } 
  .section1 .chat_service_wrap .chat_input { position: absolute; left: 0; bottom: 0; width: 100%; }

  .section1 .chat_service_wrap .chat_foot { position: absolute; left: 0; bottom: 0; width: 100%; }
    
  .mainlayerpop { width: 90vw !important; }

  #footer { display: none; }
  /* .header { border-bottom: 0; }  */

  /*
  #header { position: absolute; left: 0; top:-4.97rem; width: 100%; transition:top .2s; }
  */
/*  #header { position: absolute; left: 0; width: 100%; z-index: 2; }
*/  #header .tab_basic { margin:0; padding:0; width:100%; max-width:100%; display:none; transition:top .2s; }

  #header .down { display:inline-block; position:absolute; left:50%; transform:translateX(-50%); width:25vw; top:0px; }
  #header .down:after { content:''; position: absolute; left:0; top:0; border-top: 15px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; width:100%; z-index:-1 } 
  #header .down i { color:#323b67 }

  #wrap { transition:padding-top .2s }

  /*
  #wrap.down { padding-top:4.85rem; }
  #wrap.down #header { top:0; }
  */
  #wrap.down .chat_service_wrap { height: calc(100% - 156px); top: 156px; }
  #wrap.down #header .tab_basic { display:inline; transition:top 2s; }
  
  #wrap.down #header .down { top:156px; }
  #wrap.down #header .down i {transform:rotate(180deg)}
}

@media (max-width: 992px) {
  .section2 .box { height: auto; }
  .mainlayerpop { left: 50% !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; }
}

@media (max-width: 600px) {
  .chat_service_wrap { width: 100%; }
  .chat_service_wrap .chat_view .chat_box .message_wrap .message.wd { max-width: 75vw !important; }
  .chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap { width: 67vw; }
  .section1 .service .chat_guide { padding: 1.5rem 0; }
  .section1 .service .chat_guide:before { height: 100% !important; bottom: 0 !important; }
  .section1 .service .chat_guide:after { position: static; right: inherit; top: inherit; display: block; margin: auto; }
  .section2 h2 strong { display: block; }
  .mainlayerpop { width: 90vw !important; } 
}

@media (max-width: 430px) {
  .chat_service_wrap .head .title { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 5.5rem; }
  .chat_service_wrap .chat_view .chat_box .img { margin-right: 5px; }
  /*.chat_service_wrap .chat_view .chat_box .message_wrap { width: calc(100% - 49px); }*/
  .chat_service_wrap .chat_view .chat_box .message_wrap .message { padding: 10px; }
  .section1 .service_list_wrap > p { word-break: keep-all; }
}