@charset "utf-8";
*{ padding:0; margin:0; font-family:Arial, "微軟正黑體", "新細明體"; }
.l-container_main{ margin: auto; max-width: 1184px; background: #fff; padding: 0 40px; }
.navbox{ padding: 25px 0 5px; }
.navbox:after{ content:""; clear:both; display:block; }
.navbox .grids{ display:inline-block; vertical-align:middle; padding: 0 24px 0 0; font-size: 14px; position:relative; }
.navbox .grids a{ color: #3b4598; font-size: 14px; }
.navbox .grids:after{ position: absolute; top: 0.5em; right: 4px; display: inline-block; width: 6px; height: 6px; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: #666 1px solid; border-right: #666 1px solid; }
.navbox .grids:last-child:after{ display:none; }
.navbox .grids span{ font-weight:bold; color:#333; }

.c-lineup_heading_01{ padding:30px 0; }
.c-lineup_heading_01 h1{ font-size: 38px; font-weight: bold; color: #333; text-align: center; margin: 0; }
.c-lineup_heading_01 h2{ font-size:24px; font-weight: bold; color: #333; text-align: center; margin: 0; }
.c-lineup_text{ margin:24px 0 16px 0; font-size:18px; color:#333; }
.cables_box{ margin-left:-30px; font-size:0; display:flex; justify-content: center; }
.cables_box .grids{ display:flex; flex-wrap: wrap; width:50%; padding-left:30px; }
.cables_box .grids .links{ display:flex; flex-wrap:wrap; width:100%; border: 2px solid #c1e0fb; background-color: #fff; padding:40px 20px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.cables_box .grids .links .title{ font-size: 20px; padding: 0 0 20px 0; color:#42569f; text-align:center; width:100%; }
.cables_box .grids .links .btn{ width:160px; height:160px; line-height:160px; text-align:center; background-color: #c1e0fb; border-radius:50%;  -webkit-border-radius:50%;  -moz-border-radius:50%;     font-size: 42px; font-weight: bold; color:#42569f; margin:auto; }
.cables_box .grids.green .links{ border: 2px solid #81da87; align-items: center; align-content: center;  }
.cables_box .grids.green .links .title{ color: #007126; }
.cables_box .grids.green .links .btn{ background:#ade4b1; color: #007126; }

.cables_txt{ margin-top:30px; padding:10px 15px; font-size:15px; background-color:#eee; }
.cables_txt a{ color:#0060bf; font-size:1em; }

.samcom{ padding:20px; border:2px dashed #cfecff; background: #eef7fd; text-align:center; font-size:16px; color:#1e8bd4; }
.samcom img{ max-width:100%; width:auto !important; height:auto !important; }

.sambanner{ width:100%; }
.sambanner img{ width:100%; }
.samflex{ display:flex; align-items:center; padding:15px 0 0 0; width:100%; }
.samflex .txts{ flex:1; padding:0 0 0 20px; }
.samflex .txts .h1{ font-size:16px; color:#333; margin:0 0 5px 0; text-align:center; }
.samflex .txts .btns{ background:#09F; color:#fff; line-height:36px; font-size:24px; text-align:center; font-weight: bold; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.samqrcode{ width:40%; }
.samqrcode img{ width:100%; }

/*表格內頁*/
.prosort{ font-size:0; margin-left:-15px; }
.prosort.martop{ margin-top:30px; }
.prosort .progrids{ display:inline-block; vertical-align:middle; width:33.333%; padding-left:15px; }
.prosort .progrids .links{ width:100%; display: table; border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:20px; }
.prosort .progrids .links .imgs{ width:157px; display: table-cell; vertical-align:middle; }
.prosort .progrids .links .imgs img{ width:100%; }
.prosort .progrids .links .texts{ display: table-cell; vertical-align:middle; color:#42569f; font-size:15px; font-weight:bold; padding:0 0 0 5px; }

.samTxt{ padding:25px 0; }
.samTxt ul{ margin:0 0 0 25px; }
.samTxt ul li{ margin:0 0 5px 0; font-size:16px; color:#333; }

.samTitles{ display:block; padding:40px 0 10px 0; font-size:18px; font-weight:bold; }
.samTitles .rugrids{ font-weight:normal; }

.samTable{ display:table; width:100%; border-collapse:collapse; }
.samTable .trs{ display:table-row; }
.samTable .ths{ display:table-cell; vertical-align:middle; background:#fff; font-size:16px; padding:10px 15px; border:1px solid #ececec; width:160px; }
.samTable .tds{ display:table-cell; vertical-align:middle; background:#eef7fd; padding:10px 15px; border:1px solid #d8efff; }
.samTable .res{ color:#f00; } 
.samTable .inputs{ line-height:36px; height:36px; width:100%; padding:0 10px; background:#fff; border:none; font-size:15px; color:#333; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.samTable .inputs:focus{ background:#f5f5f5; outline:none; }

.tbox{ margin-left:-10px; font-size:0; }
.tgrids{ display:inline-block; vertical-align:middle; width:33.333%; padding-left:10px; margin:0 0 10px 0; }
.tgrids.ww1{ display:block; width:100%; margin:auto; }
.tgrids.marauto{ margin:auto; }

.tgrids2{ display:inline-block; vertical-align:middle; width:33.333%; padding-left:10px; margin:0 0 10px 0; }
.tgrids2.ww1{ display:block; width:100%; margin:auto; }
.tgrids2.marauto{ margin:auto; }

.rugrids{ display:inline-block; vertical-align:middle; padding:0 15px 0 0; font-size:15px; color:#333; }
.rugrids.longs{ display:block; padding:0; }
.rugrids label{ font-size:15px; }
.rugrids .rimgs{ padding:5px 0 0 0; text-align: center; }
.rugrids .h3{ text-align:center; font-size:14px; }
.rutitle{ font-size:18px; color: #42569f; font-weight:bold; padding:5px 0; }
.ruops{ color: #0060bf; text-decoration:underline; display:block; padding:10px 0 0 0; }

.flexgrid{ display:flex; align-items: center; }
.flexgrid .ltitle{ font-size: 14px; color: #1188df; font-weight: bold; margin-bottom: 10px; background: #c3e7ff; text-align: center; padding: 3px 0; }
.flexgrid .f3{ padding-right:20px; }
.flexgrid .f3 .addicon{ width:30px; height:30px; position:relative; }
.flexgrid .f3 .addicon:before{ content:""; display:block; width:3px; height:30px; background:#1188df; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.flexgrid .f3 .addicon:after{ content:""; display:block; width:30px; height:3px; background:#1188df; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }

.bottomblcok{ margin:40px 0 0 0; font-size:0; display:table; width:100%; }

.codeboxs{ display:table-cell; vertical-align:middle; width:380px; }
.codeboxs .texts{ font-size:16px; color:#333; margin:0 0 10px 0; }
.codeboxs .codeTable{ display:table; table-layout:fixed; }
.codeboxs .codeTable .codeTd{ display:table-cell; vertical-align:middle; }
.codeboxs .codeTable .codeTd .inputs{ width:100%; border:1px solid #e0e0e0; line-height:40px; height:40px; padding:0 10px; font-size:15px; color:#333; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; }
.codeboxs .codeTable .codeTd .inputs:focus{ background:#f5f5f5; outline:none; }
.codeboxs .codeTable .codeTd.ww1{ width:31px; padding:0 0 0 5px; }
.codeboxs .codeTable .rebtn{ width:100%; }

.agreesbox{ display:table-cell; vertical-align:middle; padding:20px 0 20px 40px; border-left:1px solid #ccc; font-size:14px; }
.agreesbox a{ color: #0060bf; }

.sendbtn{ text-align:center; padding:40px 0 0 0; }
.sendbtn .btns{ display:inline-block; padding:10px 20px; background:#1188df; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border:none; font-size:18px; color:#fff; }

.freelink{ background:#eee; padding:10px 15px 10px 30px; position:relative; margin: 40px 0 0 0; font-size:16px; color:#333; }
.freelink:before{ content:""; display:block; clear:both; border-style:solid; border-color:transparent transparent transparent #1e2766; border-width:5px 0 5px 10px; position:absolute; top:50%; left:12px; margin-top:-5px; }
.freelink a{ color: #0060bf; }

.addFlex{ margin-left:-10px; display:flex; flex-wrap:wrap; align-items: center; }
.addFlex .grids{ padding:0 0 0 10px; display:flex; align-items: baseline; margin:5px 0; }
.addFlex .grids > .grids{ margin:0; }
.addFlex .grids > .grids:first-child{ padding-left:0; }
.addFlex .grids.full{ width:100%; }
.addFlex .grids.flexone{ flex:1; }
.addFlex .grids.wh-70{ width:70px; }
.addFlex .grids.wd-33{ width:33.3334%; }


/*光箱*/
.lightbox_end{ position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; z-index:100000; background-color:rgba(0,0,0,0.8); display:flex; align-items: center; justify-content: center; }
.lightbox_end .wbg{ background:#fff; padding:20px; width:90%; max-width:300px; }
.lightbox_end .wbg .wtitle{ background:#1e2766; padding:5px; text-align:center; color:#fff; font-size:20px; }
.lightbox_end .wbg .wtxt{ color:#333; padding:20px 0; text-align:center; }

.lightbox_end .wbg .btn{ cursor:pointer; border:1px solid #1188df; display:block; width:60px; line-height:32px; color:#1188df; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin:auto; font-size:14px; text-align:center; }


/*================================●●●●●●●●●●●●hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1025px){
.cables_box .grids .links:hover{ background-color: #e9faff; }
.cables_box .grids.green .links:hover{ background-color: #f4ffef; }

.agreesbox a:hover{ text-decoration:underline; }
.freelink a:hover{ text-decoration:underline; }
}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:1024px){
.l-container_main{ padding:0 15px; }	

.navbox{ display:none; }

.c-lineup_heading_01 h1{ font-size:25px; }
.c-lineup_heading_01 h2{ font-size:20px; }
.c-lineup_text{ font-size:14px; margin: 0 0 16px 0; }

.cables_box{ margin-left:-15px; display:block; }
.cables_box .grids{ padding-left:15px; width:100%; margin:0 0 20px 0; }
.cables_box .grids .links{ padding:15px 10px; display:block; }
.cables_box .grids .links .title{ font-size:16px; height:60px; position:relative; padding:0 0 10px 0; }
.cables_box .grids .links .title span{ left:0; right:0; text-align:center; padding:0; top:50%; position:absolute; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); }
.cables_box .grids .links .btn{ width:80px; height:80px; line-height:80px; font-size: 30px; margin-top:10px; }

.samflex{ display:block; }
.samqrcode{ margin:auto; }
.samflex .txts{ padding:15px 0; }
.samflex .txts .h1{ font-size:14px; }
.samflex .txts .btns{ font-size:18px; }

/*表格內頁*/
.prosort{ margin:auto; }
.prosort .progrids{ display:block; width:auto; padding:0 0 10px 0; }
.prosort .progrids .links{ padding: 10px; display:table; width:100%; }
.prosort .progrids .links .imgs{ width:120px; display:table-cell; vertical-align:middle; }
.prosort .progrids .links .texts{ padding:0 0 0 10px; display:table-cell; vertical-align:middle; font-size:14px; text-align:left; width:auto; }

.samTxt{ padding:0 0 25px 0; }
.samTxt ul li{ font-size:14px; }

.samTable{ display:block; }
.samTable .trs{ display:block; }
.samTable .ths{ display:block; width:auto; font-size:14px; }
.samTable .tds{ display:block; border: none; border-left: 1px solid #ececec; border-right: 1px solid #ececec; padding:10px 5px 20px 5px; }
.samTable .trs:last-child .tds{ border-bottom: 1px solid #ececec; }
.samTable .inputs{ font-size:12px; padding: 0 5px; }
.rugrids label{ font-size:14px; }
.rutitle{ font-size:16px; }
.ruops{ font-size:14px; }

.tgrids2{ width:100%;}

.codeboxs{ display:block; width:auto; }
.codeboxs .texts{ font-size:14px; }
.codeboxs .codeTable .codeTd .inputs{ font-size:14px; }

.agreesbox{ display:block; padding:20px 0 0 0; border:none; width:auto; }

.bottomblcok{ display:block; border: 1px solid #e0e0e0; padding: 20px; margin:25px 0 0 0; }

.sendbtn .btns{ font-size:16px; }

.freelink{ font-size:14px; }

.flexgrid{ flex-direction: column; }
.flexgrid .f3{ padding:20px 0; }
.flexgrid .rugrids{ padding:0 15px 15px 0; }
.flexgrid .rugrids:last-child{ padding:0; }

.addFlex .grids{ font-size:12px; }
.addFlex .grids.wd-50-sp{ width:50%; }
}