@charset "utf-8";

#box1 { position:relative; padding:50px 0 60px;}
#box1 >img { position:absolute; right:0; bottom:0;}

#box2 { padding:0 0 50px;}
#box2 .left { width:542px;}
#box2 .left img { margin-bottom:24px;}
#box2 .con { margin-left:600px;}
#box2 .con h3 { color:#504c4a; font-weight:normal; font-size:18px;}
#box2 .con p { margin:0; line-height:24px; color:#a9a5a2;}
#box2 .con img { margin:20px 0;}


#box3 { background:#dc534a;}
#box3 .main_width { position:relative;}
#box3 .left { position:absolute; left:20%; top:50%; margin:-45px 0 0 -140px; padding:15px 0 10px 100px; width:200px; color:#fff; background:url(../images/icon_smiling_face.png) no-repeat left center;}
#box3 .left h2 { margin:0; font-size:24px; line-height:30px;}
#box3 .left h3 { margin:0; font:24px/30px "Trebuchet MS","Lucida Sans Typewriter","Lucida Sans",Arial;}
#box3 .right { padding:40px 0; width:55%; background:#c6524a;}
#box3 .right p { margin:auto; width:400px; font-size:18px; line-height:30px; color:#fff;}

#box4 { padding:60px 0;}
#box4 .tabs { text-align:right;}
#box4 .tabs a { display:inline-block;}
#box4 .tabs a span { display:inline-block;}
#box4 .tabs a span.ico { padding:14px 50px; border:1px solid #94918f; transition:all .2s;}
#box4 .tabs a.sel span.ico { background:#d63818; border-color:#d63818;}
#box4 .tabs a span.ico img { vertical-align:middle; width:60px; height:60px; background:url(../images/service_fwtx_box3_ico.png) no-repeat;}
#box4 .tabs a.no1 span.ico img { background-position:0 0;}
#box4 .tabs a.no2 span.ico img { background-position:-60px 0;}
#box4 .tabs a.no3 span.ico img { background-position:-120px 0;}
#box4 .tabs a.sel.no1 span.ico img { background-position:0 -60px;}
#box4 .tabs a.sel.no2 span.ico img { background-position:-60px -60px;}
#box4 .tabs a.sel.no3 span.ico img { background-position:-120px -60px;}
#box4 .tabs a span.txt { padding:15px; text-align:center; line-height:60px; font-size:16px; color:#504c4a; white-space:nowrap; display:none;}
#box4 .tabs a.sel span.txt { display:inline-block;}
#box4 .tabs_con >div { margin:10px 0 0;}
#box4 .tabs_con >div h2 { position:relative; margin:0; background:#eeedeb; line-height:60px; font-weight:normal; font-size:18px; color:#504c4a; cursor:pointer;}
#box4 .tabs_con >div h2 img.ico { vertical-align:middle; width:60px; height:60px; margin:0 10px 0 20px; background:url(../images/service_fwtx_box3_ico.png) no-repeat;}
#box4 .tabs_con >div.no1 h2 img.ico { background-position:0 -120px;}
#box4 .tabs_con >div.no2 h2 img.ico { background-position:-60px -120px;}
#box4 .tabs_con >div.no3 h2 img.ico { background-position:-120px -120px;}
#box4 .tabs_con >div h2 img.arrow { position:absolute; right:20px; top:50%; width:40px; height:40px; margin-top:-20px; background:url(../images/arrow_group6.png) no-repeat center bottom; transition:.3s;}
#box4 .tabs_con >div.sel h2 img.arrow { transform:rotate(180deg); background-position:center top\9;}
#box4 .tabs_con >div >div { display:none; padding:40px;}
#box4 .tabs_con >div.sel >div { display:block;}
#box4 .tabs_con >div >div .left,
#box4 .tabs_con >div >div .right { width:48%;}
#box4 .tabs_con >div >div h4 { color:#d21b02;}
#box4 .tabs_con >div >div ul { float:left; padding:0 2%; width:20%; line-height:30px; border-left:1px solid #eee;}
#box4 .tabs_con >div >div ul:first-child { border:0;}
#box4 .tabs_con >div >div ul li { height:30px;}
#box4 .tabs_con >div >div ul strong { float:left; color:#666;}
#box4 .tabs_con >div >div ul span { float:right;}