#cs_a,#cs_b,#cs_e,#cs_d{
  padding-top: 170px;
}
.cg_ban{
  background: url(../images/cs_banner.jpg) no-repeat;
}

.page_top {
    height: 338px;
}

.content {
    width: 100%;
    margin-top: 110px;
}

.clearfix::after {
  content: "";
  display:table;
  clear: both;
}

.m_r {
    margin-right: 15px;
}

.m_l {
    margin-left: 15px;
}

.m {
    margin: 50px;
}

.ch-6 {
    width: 49.5%;
}

.con-bg {
    width: 100%;
    margin-bottom: 22%;
}

.con-l {
    width: 45%;
    margin: 0% 0px 0 0;
    position: absolute;
    z-index: 1;
    background: url(../images/cs-contact-img01.jpg) no-repeat;
}

.con-r {
    width: 58%;
    float: right;
    right: 0;
    height: 350px;
    margin-top: 0.7%;
}

.con-if_block {
    display: inline-block;
    float: right;
    width: 60%;
}

.con-if_block h3 {
    color: #fff;
    font-size: 24px;
}

ul.con-if-ul {
    border-left: 1px #FFF solid;
    margin-top: 4%;
    padding-left: 12px;
}

ul.con-if-ul li {
    color: #FFF;
    padding-bottom: 2.5%;
    font-size: 18px;
}

.con-if_block {
    display: inline-block;
    float: right;
    width: 60%;
    padding: 30% 0%;
    position: relative;
}

.cs-tab {
    width: 100%;
}

.con-pro {
    background: url(../images/cs-contact-bg.png) #f5f5f5 no-repeat right 100%;
    width: 100%;
    right: 0;
    margin-top: -0.6%;
    padding: 2% 0% 2% 11.5%;
    height: 450px;
}

ul.cs-tab-ul {
    padding-left: 6%;
}



ul.cs-tab-ul li.blue-line {
    float: left;
    height: 0;
    border-bottom: 40px solid #36adf9;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    background: url(../images/tab-style.png);
}

ul.cs-tab-ul li a {
    color: #FFF;
    padding: 7px 5px 7px 38px;
    display: inline-block;
}

h3.pro-tit {
    font-size: 22px;
    color: #36adf9;

}

h4.pro-tit1 {
    font-size:16px;
    padding:7px 0px 5px 0px;
    letter-spacing: 1.5px;
}

.pr50 {
    margin: 0;
    display: inline-block;
    vertical-align: text-top;
}

ul.pro-ul {
    list-style-image: url(../images/cg_bor_img4.png);
    padding: 2.5% 0% 1% 8%;
}

ul.pro-ul01 {
    list-style-image: url(../images/cg_bor_img4.png);
    padding: 2.5% 0% 1% 8%;
    display: inline-block;
    float: left;
}

.pro-if {
    width: 80%;
}

.dm-block {
    width: 100%;
    height: 427px;
}

.dm-l {
    display: inline-block;
    float: left;
    width: 50%;
}

.dm-r {
    display: inline-block;
    width: 50%;
    background: #f5f5f5;
}

.dm-left {
    float: left;
    width: 100%;
}

a.dm-link span {
    display: block;
    margin-top: 40%;
}

a.dm-link {
    border-right: 1px #DDD solid;
    color: #333333;
    display: inline-block;
    float: left;
    background: url(../images/roll.png) no-repeat 50% 35%;
    width: 50%;
    text-align: center;
    vertical-align: text-bottom;
    padding: 14.4% 8%;
    font-size: 20px;
}

a.dm-link:hover {
    background: url(../images/roll-01.png) no-repeat 50% 35% #36adf9;
    color: #FFF;
}

a.dm-link2 {
    border-right: 1px #DDD solid;
    color: #333333;
    display: inline-block;
    float: left;
    background: url(../images/coil.png) no-repeat 50% 35%;
    width: 50%;
    text-align: center;
    vertical-align: text-bottom;
    padding: 14.4% 8%;
    font-size: 20px;
}

a.dm-link2:hover {
    background: url(../images/coil-1.png) no-repeat 50% 35% #36adf9;
    color: #FFF;
}

a.dm-link2 span {
    display: block;
    margin-top: 40%;
}

.page-number_block {
    width: 100%;
    display: block;
    margin: 0% 0% 8%;
}

ul.page-number-ul {
    width: 100%;
    text-align: center;
    margin-top: 21%;
    padding: 0;
    display: inline-block;
    margin: 0 auto;
    position: relative;
}

ul.page-number-ul li {
    float: left;
    padding: 0% 3.5%;
}

ul.page-number-ul li a {
    font-size: 30px;
    color: #bbbbbb;
}

ul.page-number-ul li a:hover {
    color: #36adf9;
}

h3.file-tit {
    font-size: 20px;
    color: #36adf9;
    padding: 0% 0% 5%;
}

.file {
    width: 100%;
}

.file-l {
    width: 50%;
    float: left;
    display: inline-block;
}

.file-r {
    width: 50%;
    float: right;
    display: inline-block;
}

.Screen-txt {
    background: rgba(54, 173, 249, 0.87);
    color: #FFF;
    text-align: center;
    padding: 2.5% 0%;
    position: relative;
    top: -53px;
}

.file-block {
    width: 90%;
    float: right;
}
span.file-blue {
    background: #3badf9;
    color: #FFF;
    display: inline-block;
    padding: 1.2% 7%;
    margin: 2% 0%;
}

.newpd-block {
    width: 100%;
}

.newpd-l {
    display: inline-block;
    float: left;
    width: 38%;
}

.newpd-r {
    display: inline-block;
    width: 62%;
}

.newpd-if {
    float: left;
    width: 96%;
    margin-left: 3%;
}

.section-padding2 {
    padding-bottom: 80px;
}

table.newpd-table {
    color: #333333;
    width: 100%;
}

thead.newpd-thead {
    background: #dbe9f1;
    font-size: 20px;
    width: 100%;
}

thead.newpd-thead th {
	font-size: 17px;
	padding: 1.5% 0%;
	text-align: center;
	font-weight: bold;
}

tbody.newpd-tbody tr td,tfoot.newpd-tfoot tr td {
    text-align: center;
    font-size: 15px;
}

table.newpd-table td {
    padding: 2% 0%;
}

tbody.newpd-tbody tr {
    border-bottom: 1px #40adf9 solid;
}

ul.table-ul {
    list-style-image: url(../images/cg_bor_img4.png);
    padding-left: 26px;
}

ul.table-ul li {
    padding-right: 7px;
}

tbody.newpd-tbody td,tfoot.newpd-tfoot td {
    border-right: 1px #b8b8b8 dotted;
}

.ask-r {
    width: 55%;
    float: right;
    display: inline-block;
}

.ask-l {
    width: 45%;
    float: left;
    display: inline-block;
    padding-right: 5%;
}

.ask {
    width: 100%;
}

h3.ask-tit {
    font-size: 20px;
    padding: 0% 0% 5%;
}

.dow_list > li {
    float: left;
    width: 46%;
    height: 270px;
    margin: 8px 2px;
    padding: 70px 20px 30px 20px;
    background-color: #fff;
    border: 1px solid #55bafa;
    border-bottom: 2px solid #55bafa;
    font-size: 20px;
}

.dow_list li > img {
    margin: 20px 0;
}

.learn-more {
    padding:10px 17px;
}

.dow_list {
    width: 100%;
    float: left;
    padding-left: 0;
}

.dow_list > li:hover {
    border: 1px solid #55bafa;
    background-color: #F0F0F0;
}

h3.ask-title {
    font-size: 20px;
    color: #36adf9;
    margin-bottom: 2.5%;
}

.ask-if {
    background: rgba(255, 255, 255, 0.8);
    border: 1px #d3d3d3 solid;
    padding: 25px 13%;
    margin-top: 3%;
	color:#4d4e4e;
}
.ask-if a{
	color:#4d4e4e;
}
.ask-if p {
    font-size: 18px;
    color: #4d4e4e;
    line-height: 25px;
}

a.ask-flow h3 img {
    margin: 0% 7%;
}

a.ask-flow h3 {
    color: #36adf9;
    font-size: 20px;
}

a.ask-flow {
    background: rgba(255, 255, 255, 0.8);
    border: 1px #d3d3d3 solid;
    padding: 25px 13%;
    margin: 3% 0% 10% 0%;
    display: block;
}

a.ask-flow:hover {
    border: 1px #3badf9 solid;
    box-shadow: 0px 0px 8px #a4dbff;
}

.ask-bg {
    background: url(../images/ask-bg.png) no-repeat 0% 100%;
}

ul.ask-ul {
    list-style-image: url(../images/icon1.png);
    padding-left: 15px;
}

ul.ask-ul li {
    padding-left: 1.5%;
}

span.ask-ul-span {
    background: #3badf9;
    color: #FFF;
    display: inline-block;
    padding: 1.2% 4%;
    margin: 2% 0%;
    float: right;
}

.newpd-txt {
    color: #535353;
    font-size: 16px;
    float: right;
    margin-top: 1.5%;
}

sub.fo-min {

    position: relative;
    right: 1px;
    top: 0;
}

sup.fo-min {

    padding-left: 1px;
    position: relative;
    left: 1.5px;
}

.tab .nav-tabs li {
    margin-top: -13px;
}

.tab-content .newpd01 {
    border: 1px solid #d3d3d3;
    background: #fff;
    line-height: 22px;
}

.if-replace {
    position: absolute;
    top: 28%;
    text-align: left;
    left: 3%;
}

.con-tab01 {
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    padding-bottom: 52px;
}

a.con-tab01 {
    color: #36adf9;
    border-bottom: 1px #36adf9 solid;
    padding: 0px 5px 5px 5px;
}

a.con-tab02 {
    color: #a5a5a5;
    margin: 0px 15px;
}

a.con-tab02:hover {
    color: #36adf9;
}

span.pro-span0 {
    width: 100%;
    display: inline-block;
    margin-top: 37px;
}

span.pro-span {
    width: 100%;
    display: inline-block;
    margin-top: 34px;
}

span.pro-span2 {
    width: 100%;
    display: inline-block;
    margin-top: 33px;
}

span.pro-span3 {
    margin-top: 43px;
    display: inline-block;
}

h4.pro-tit2 {
    font-size: 20px;
    padding: 12px 0px 5px 0px;
    letter-spacing: 1.5px;
}

ul.pro-ul li {
    padding: 4px 0px;font-size: 17px;
}


/**寬度開始**/
@media screen and (min-width: 1200px) and (max-width: 1559px) {
    .pro-if {
        width: 65%;
    }
    .newpd-if {
    width: 96%;
    }
}


@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .con-l {
    width: 45%;
    background: url(../images/cs-contact-img02.jpg) no-repeat;
    }

    .con-if_block {
    display: inline-block;
    float: right;
    position: relative;
    width: 80%;
    padding: 55% 0%;
    }

    .ask-bg {
    background: none;
    }

    .con-bg {
    width: 100%;
    margin-bottom: 29%;
    }

    a.dm-link {
    width: 50%;
    padding: 13.8% 8%;
    }

    a.dm-link2 {
    width: 50%;
    padding: 13.8% 8%;
    }

    .dm-block {
    height: 300px;
    }



}

@media screen and (min-width: 1024px) and (max-width: 1199px) {

    .section-padding2 {
    padding-bottom: 0px;
    }

    .con-if_block {
    width: 93%;
    padding: 48% 0%;
    }

    .con-r {
    margin-top: 0%;
    width: 55%;
    }

    ul.cs-tab-ul {
    padding-left: 0%;
    }

    .con-pro {
    padding: 2% 0% 2% 8.5%;
    }

    .tab .nav-tabs li a {
    padding: 19px 30px 11px 50px;
    }
    .pro-if {
    width: 80%;
    }

    .con-l {
    background: url(../images/cs-contact-img02.jpg) no-repeat;
    }
    .con-bg-max {
    margin-bottom: 20%!important;
    }
    /**型錄下載**/
    .dm-r {
    width: 46%;
    }
    .dm-l {
    width: 54%;
    }

    a.dm-link2 {
    border-right:none;
    width: 50%;
    padding: 17% 8%;
    }

    a.dm-link {
    width: 50%;
    padding: 17% 8%;
    }
    .dm-left {
    width: 100%;
    }
    .dm-block {
    height: 235px!important ;
    }

    /**推廣產品**/
    .newpd-if {
    float: left;
    width: 100%;
    margin-left: 0%;
    }
    .newpd-l {
    display: none;
    }

    .newpd-r {
    width: 100%;
    }

    /**客訴流程**/
    .ask-bg {
    background: none;
    }
    .ask-if {
    padding: 25px 8%;
    }
    a.ask-flow {
    padding: 25px 5%;
    margin: 3% 0% 5% 0%;
    }

}
@media screen and (min-width: 768px) and (max-width: 1024px) {


    .con-if_block {
    width: 97%;
    padding: 70% 0%;
    }

    .con-r {
    margin-top: 0%;
    width: 55%;
    }

    ul.cs-tab-ul {
    padding-left: 0%;
    }

    .con-pro {
    padding: 2% 0% 2% 8.5%;
    height: 440px;
    }

    .tab .nav-tabs li a {
    padding: 19px 30px 11px 50px;
    }
    .pro-if {
    width: 95%;
    }

    span.pro-span0 {
    margin-top: 6px;
    }

    span.pro-span {
    margin-top: 13px;
    }

    span.pro-span2 {
    margin-top: 25px;
    }

    .con-l {
    background: url(../images/cs-contact-img02.jpg) no-repeat;
    }
    .pr50 {
    float: left;
    }
    .con-bg-max {
    margin-bottom: 20%;
    }

    /**型錄下載**/
    .dm-r {
    width: 46%;
    }
    .dm-l {
    width: 54%;
    }

    a.dm-link2 {
    border-right:none;
    width: 50%;
    padding: 16.5% 8%;
    }

    a.dm-link {
    width: 50%;
    padding: 16.5% 8%;
    }
    .dm-left {
    width: 100%;
    }
    .dm-block {
    height: 150px;
    }

    /**推廣產品**/
    .newpd-if {
    float: left;
    width: 100%;
    margin-left: 0%;
    }
    .newpd-l {
    display: none;
    }

    .newpd-r {
    width: 100%;
    }

    .tab-block {
    margin: 0 15px;
    }

    table.newpd-table {
        width: 210%;
    }

    /**客訴流程**/
    .ask-bg {
    background: none;
    }

    .dow_list > li {
    width: 49%;
    margin: 8px 3px;
    margin-right: 0%!important;
    }

    .ask-l {
    width: 48%;
    padding-right: 3%;
    }
    .ask-r {
    width: 52%;
    }

    .dow_list > li {
    width: 49%;
    margin: 8px 2px;
    padding: 70px 6px 30px;
    font-size: 18px;
    }

    .ask-if {
    padding: 25px 5%;
    }

    .ask-if p {
    font-size: 16px;
    }
    a.ask-flow {
    padding: 25px 0%;
    }

}
@media screen and (min-width: 414px) and (max-width: 768px) {
    .if-replace {
    top: 8%;
    }

    .con-if_block {
    width: 100%;
    padding: 28% 0%;
    }

    .con-r {
    width: 100%;
    }
    .cs-tab {
    width: 100%;
    position: relative;
    top: -23px;
    left: -25px;
    }

    .con-l {
    margin: 2.5% 0px 0 0;
    background: url(../images/cs-contact-img02.jpg) no-repeat;
    width: 100%;
    }

    .con-bg-max {
    margin-bottom: 134%;
    }

    .con-pro {
    margin-top: 52.6%;
    padding: 4% 0% 105% 4.5%;
    height: auto;
    }

    .pro-if {
    width: 100%;
    }

    .pr50 {
    float: left;
    }
    span.pro-span0 {
    margin-top: 5px;
    }

    span.pro-span {
    margin-top: 11px;
    }

    .dm-r {
    width: 100%;
    background: #f5f5f5;
    float: right;
    position: relative;
    top: -25px;
    }
    .dm-left {
    float: left;
    width: 100%;
    }
    a.dm-link {
    width: 50%;
    padding: 16.5% 8%;
    }
    a.dm-link2 {
    border-right: none;
    width: 50%;
    padding: 16.5% 8%;
    }

    .dm-l {
    display: none;
    }

    .dm-block {
    height: 165px;
    }

    .file-r {
    width: 100%;
    }

    .file-l {
    width: 100%;
    }
    ul.page-number-ul li {
    padding: 0% 2.5%;
    }
    .file-block {
    width: 100%;
    float: none;
    }
    .newpd-l {
    display: none;
    }

    .newpd-r {
    width: 100%;
    }

    .newpd-if {
    float: none;
    width: 100%;
    margin-left: 0%;
    }

    .tab .nav-tabs li a.tab-new-a {
    padding: 19px 26px 11px 21px;
    }

    thead.newpd-thead {
    font-size: 16px;
    }
    tbody.newpd-tbody tr td, tfoot.newpd-tfoot tr td {
    font-size: 16px;
    }

    .section-padding2 {
    padding-bottom: 0px;
    }
    .ask-bg {
    background: none;
    }
    .ask-l {
    width: 100%;
    float: none;
    padding-right: 0%;
    }
    .dow_list > li {
    width: 46%;
    height: 270px;
    margin: 8px 3px;
    padding: 70px 10px 30px;
    }
    .ask-r {
    width: 100%;
    }

    ul.cs-tab-ul {
    padding-left: 6%;
    }

    /**推廣產品**/
    .tab-block {
    margin: 0 15px;
    }

    table.newpd-table {
        width: 210%;
    }



}

@media screen and (min-width: 320px) and (max-width: 393px) {

}

@media screen and (min-width: 320px) and (max-width: 414px) {
    .if-replace {
    top: 8%;
    }

    .con-if_block {
    width: 100%;
    padding: 35% 0%;
    }

    .con-r {
    width: 100%;
    }
    .cs-tab {
    width: 100%;
    position: relative;
    top: -23px;
    left: -25px;
    }

    .con-l {
    margin: 16% 0px 0 0;
    background: url(../images/cs-contact-img02.jpg) no-repeat;
    width: 100%;
    }

    .con-bg-max {
    margin-bottom: 155%;
    }

    .con-pro {
    margin-top: 62.6%;
    padding: 4% 0% 115% 4.5%;
    height: auto;
    }

    .pro-if {
    width: 100%;
    }

    .pr50 {
    float: left;
    }
    span.pro-span0 {
    margin-top: 5px;
    }

    span.pro-span {
    margin-top: 11px;
    }

    .dm-r {
    width: 100%;
    background: #f5f5f5;
    float: right;
    position: relative;
    top: -25px;
    }
    .dm-left {
    float: left;
    width: 100%;
    }
    a.dm-link {
    width: 50%;
    padding: 16.5% 8%;
    }
    a.dm-link2 {
    border-right: none;
    width: 50%;
    padding: 16.5% 8%;
    }

    .dm-l {
    display: none;
    }

    .dm-block {
    height: 165px;
    }

    .file-r {
    width: 100%;
    }

    .file-l {
    width: 100%;
    }
    ul.page-number-ul li {
    padding: 0% 2.5%;
    }
    .file-block {
    width: 100%;
    float: none;
    }
    .newpd-l {
    display: none;
    }

    .newpd-r {
    width: 100%;
    }

    .newpd-if {
    float: none;
    width: 100%;
    margin-left: 0%;
    }

    .tab .nav-tabs li a.tab-new-a {
    padding: 19px 18px 11px 16px;
    }

    thead.newpd-thead {
    font-size: 16px;
    }
    tbody.newpd-tbody tr td, tfoot.newpd-tfoot tr td {
    font-size: 16px;
    }

    .section-padding2 {
    padding-bottom: 0px;
    }
    .ask-bg {
    background: none;
    }
    .ask-l {
    width: 100%;
    float: none;
    padding-right: 0%;
    }
    .dow_list > li {
    width: 46%;
    height: 270px;
    margin: 8px 3px;
    padding: 70px 10px 30px;
    }
    .ask-r {
    width: 100%;
    }

    .dow_list > li {
    width: 48%;
    margin: 8px 5px;
    padding: 70px 10px 30px;
    margin-right: 0%!important;
    }

    .ask-if p {
    font-size: 17px;
    }

    .ask-if {
    padding: 25px 6%;
    }

    a.ask-flow {
    padding: 25px 0%;
    margin: 3% 0% 4% 0%;
    }

    /**推廣產品**/
    .tab-block {
    margin: 0 15px;
    }

    table.newpd-table {
        width: 210%;
    }



    .cg_ban {
        background: url(../images/cs_banner.jpg) no-repeat -280px 0px;
    }

}


/**Galaxy S5**/
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){

}

/**「iphone6專用」**/
@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2){
    .con-l {
    margin: 17.5% 0px 0 0;
    }
}

/**「iphone5專用」**/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    .con-if_block {
    padding: 38% 0%;
    }

    .con-pro {
    margin-top: 66.6%;
    }


    .con-pro {
    padding: 4% 0% 137% 4.5%;
    }

    .con-bg-max {
    margin-bottom: 177%;
    }

    ul.cs-tab-ul {
    padding-left: 7%;
    }
    .con-l {
    margin: 18.5% 0px 0 0;
    }

}

/**Galaxy S5**/
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
    .con-l {
    margin: 18.5% 0px 0 0;
    }

    .con-bg {
    margin-bottom: 34%;
    }

    .tab .nav-tabs li a.tab-new-a {
    padding: 19px 14px 11px 14px;
    }
}