/*body { font-size: 14px; font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MSPGothic",sans-serif;} div{ font-size: 14px; font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MSPGothic",sans-serif;} p{ font-size: 14px; font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MSPGothic",sans-serif;} body, div, p { -webkit-text-size-adjust: auto;#005bac} コンテンツ部分 */ /* ---------------------------------------------------------- */ .subtitle { width: 800px; height: 20px; margin: 48px auto 15px; padding: 5px; font-size: 18px; font-weight: bold;} .subtitle:before { content: "　"; background: url("../img/h-box.png") left center no-repeat; background-size: 6px;} .subtitle:after { content: ""; height: 0px; width: 800px; border: 1px solid #AAA; box-shadow: 0px 2px 3px #CCC; float: left;} .arr-title { height: 18px; margin: 10px auto; color: #F31024; font-size: 16px; font-weight: bold; clear: both;} .arr-title p{ margin-left: 20px;} .arr-title:before { content: "　"; width: 20px; background: url("../img/rc-arrow.png") left center no-repeat; background-size: 12px; display: block; float: left;} .arr-title:after { content: ""; border-bottom: 1px solid #AAA; height: 0px; width: 780px; float: left;} .head-line { color: #FFF; background-image: url("../img/footer-bg.png"); background-size: 8px;} .head-line p{ width: 960px; margin: 0px auto;} .red-b { font-weight: bold; color: #F31024;} .entry_div { height: 116px; width: 445px; margin: 20px auto; background: url("../img/entry.png") no-repeat top center; background-size: 445px;} .entry_div a{ width: 196px; padding: 68px 0px 0px; display: block; float: left; } #rakuchaku .entry_div a:nth-child(1){ width: 180px; padding: 68px 0px 0px 40px; display: block; float: left; } #rakuchaku .entry_div a:nth-child(2){ width: 150px; padding: 68px 40px 0px 0px; display: block; float: right; } .inline { display: inline-block;} .bold { font-weight: bold;} /* トップページ */ /* ---------------------------------------------------------- */ #top .image { margin: 20px 0px 0px;} #top .menu_ul li{ float: left; padding: 0; margin: 0;} #top .info { width: 787px; margin: 40px auto;} #top #info_tab { width: 787px; overflow: hidden; border-radius: 10px 10px 0px 0px; border: 1px solid #CCC; border-bottom: 0; background: rgb(247,247,247); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */ } #top #info_tab li { float: left; margin: 0px; padding: 0px;} #top #info_tab li a { display: block; padding: 16px 30px; width: 136px; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC;} #top #info_tab li:nth-child(1) a { border-left: 0; border-radius: 10px 0px 0px 0px; background: url("../img/tab-ikken_off.png") center center no-repeat; background-size: 86px;} #top #info_tab li:nth-child(2) a { background: url("../img/tab-accounting_off.png") center center no-repeat; background-size: 86px;} #top #info_tab li:nth-child(3) a { background: url("../img/tab-supply_off.png") center center no-repeat; background-size: 86px;} #top #info_tab li:nth-child(4) a { background: url("../img/tab-office_off.png") center center no-repeat; background-size: 86px;} #top #info_tab li:nth-child(1) a:hover { background: url("../img/tab-ikken_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(2) a:hover { background: url("../img/tab-accounting_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(3) a:hover { background: url("../img/tab-supply_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(4) a:hover { background: url("../img/tab-office_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(1).present a { background: url("../img/tab-ikken_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(2).present a { background: url("../img/tab-accounting_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(3).present a { background: url("../img/tab-supply_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li:nth-child(4).present a { background: url("../img/tab-office_on.png") center center no-repeat #FFF; background-size: 86px;} #top #info_tab li a:hover { border-bottom: 1px solid #CCC; background-color: #FFF;} #top #info_tab li.present a { border-bottom: 1px solid #FFF; background-color: #FFF;} #top #pg1,#top #pg2,#top #pg3,#top #pg4 { padding: 0px 0px 20px; display: inline-block; width: 787px; border: 1px solid #CCC; border-top: 0; border-radius: 0px 0px 10px 10px;} #top .info_dl { padding: 20px; display: inline-block;} #top .info_dl dt { width: 136px; padding: 5px; color: #777; float: left; clear: left;} #top .info_dl dd { width: 580px; padding: 5px; text-overflow: ellipsis; white-space: nowrap; float: left; overflow: hidden;} #top .info_dl dd div { padding: 2px 20px; float: left;} /* サービス１　楽着 */ /* ---------------------------------------------------------- */ #rakuchaku .about { width: 100%; margin: 10px auto; display: inline-block; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */ } #rakuchaku .about_div { width: 770px;} #rakuchaku .about_ul ul { width: 730px; margin: 34px auto; padding: 25px 35px; background: #FEFEFE; border-radius: 7px;} #rakuchaku .about_ul ul li { margin: 10px auto 0px;} #rakuchaku .about_ul ul li p{ width: 600px; display: inline-block;} #rakuchaku .about_ul ul li a{ text-decoration: #F31024; width: 130px; display: block; float: left;} #rakuchaku .about_ul ul li a font{ color: #F31024; font-size: 18px; font-weight: bold;} #rakuchaku .about_ul ul li a:before{ content: "　"; width: 20px; background: url("../img/rc-arrow.png") left center no-repeat; background-size: 12px; display: block; float: left;} #rakuchaku .option_menu { width: 930px; clear: both; } #rakuchaku .option_menu ul li { float: left;} #rakuchaku .advantage { width: 800px; margin: 40px auto;} #rakuchaku .advantage .advan_content { display: inline-block;} #rakuchaku .advantage .advan_div { height: 320px; width: 253px; display: inline-block; position: relative; float: left;} #rakuchaku .advantage .advan_div h2{ margin-top: 90px; font-weight: bold;} #rakuchaku .advantage .advan_div p{ width: 200px; margin-top: 18px; margin-bottom: 20px; font-size: 13px;} #rakuchaku .advantage .advan_div .pdf_link{ width: 180px; height: 36px; display: block; position: absolute; bottom: 20px; left: 35px;} #rakuchaku .advantage .advan_div:nth-child(1){ background: url("../img/rc-point1.png") no-repeat top left; background-size: 250px;} #rakuchaku .advantage .advan_div:nth-child(2){ background: url("../img/rc-point2.png") no-repeat top center; background-size: 250px; margin-left: 20px;} #rakuchaku .advantage .advan_div:nth-child(3){ background: url("../img/rc-point3.png") no-repeat top right; background-size: 250px; margin-left: 20px;} #rakuchaku .series, #rakuchaku .service { width: 810px;} #rakuchaku .series_div { display: inline-block; padding: 10px;} #rakuchaku .series .series_img { width: 310px; padding: 5px;} #rakuchaku .service { width: 780px; margin: 10px auto;} #rakuchaku .service .service_sub { padding: 10px 0px; display: inline-block; clear: both;} #rakuchaku .service .service_sub .img1{ width: 420px; padding: 5px;} #rakuchaku .service .service_sub .img2{ width: 180px; padding: 5px;} #rakuchaku .service .service_sub .dosa th { padding: 10px 5px; background: #41A390; color: #FFF; font-weight: bold; border: 2px solid #FFF;} #rakuchaku .service .service_sub .dosa td { padding: 10px 5px; background: #EAFAEA; border: 2px solid #FFF;} #rakuchaku .service .service_sub h3:after { content: none;} /* カンパニー */ /* ---------------------------------------------------------- */ #company .ibs { width: 800px; margin: 40px auto;} #company .ibs .subtitle:after { border: 0;} #company .ibs_div { width: 770px; padding: 28px; margin: 40px auto 0px; border: 1px solid #CCC; box-shadow: 1px 1px 2px #CCC; border-radius: 10px; font-size: 14px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */ } #company .ibs_img { width: 250px; padding: 5px; display: inline-block;} #company .info { width: 800px; margin: 40px auto 0px;} #company .info_cont { width: 760px; margin: 0px auto;} #company .info table { width: 100%; margin: 20px auto 0px; border: 1px solid #CCC; border-bottom: 0; } #company .info table tr th{ width: 120px; margin: 0px auto; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; padding: 20px 5px; vertical-align: top; background-color: #EEE;} #company .info table tr td{ width: 640px; margin: 0px auto; border-bottom: 1px solid #CCC; padding: 20px 10px;} #company .info .contact { display: block; width: 740px; height: 190px; margin: 40px auto; background: url("../img/contacts.png") no-repeat left top; background-size: 740px;} #company .info .contact a { position: relative; left: 500px; top: 60px;} /* 考事苑 */ /* ---------------------------------------------------------- */ #kojien .point_1 { width: 740px; height: 170px; margin: 50px auto 10px; padding-top: 50px; background: url("../img/ben-point1.png") no-repeat top center; background-size: 740px;} #kojien .point_2 { width: 740px; height: 170px; margin: 10px auto; padding-top: 50px; background: url("../img/ben-point2.png") no-repeat top center; background-size: 740px;} #kojien .point_3 { width: 740px; height: 170px; margin: 10px auto 50px; padding-top: 50px; background: url("../img/ben-point3.png") no-repeat top center; background-size: 740px;} #kojien h2 { margin-left: 60px; color: #444; font-size: 23px; font-weight: bold;} #kojien .detail { position: relative; right: 40px; bottom: 10px;} #kojien p { width: 650px; height: 85px; margin: 45px auto 10px; padding-top: 10px; padding-left: 20px; display: block;} /* 考事苑 便利帳*/ /* ---------------------------------------------------------- */ #benricho { width: 800px;} #benricho .subtitle:before { content: none;} #benricho .subtitle:after { margin-top: 10px; margin-bottom: 20px;} #benricho .list-up { margin: 10px 0px 10px 5px; width: 800px; display: inline-block;} #benricho .list-left,#benricho .list-right { width: 388px; display: inline-block; float: left;} #benricho .list-left { padding-right: 10px;} #benricho .list-right { padding-left: 10px;} #benricho .list-up .title { width: 388px; height: 40px; padding: 5px 40px; font-weight: bold; background: url("../img/title-bar-kojien.png") no-repeat left top; background-size: 388px; } #benricho .list-up .menu { height: 90px;} #benricho .list-up .menu a { padding-left: 5px;} /* 更新情報まとめ　*/ /* ---------------------------------------------------------- */ #rss .rss_index { display: inline-block; clear: both; margin-bottom: 30px; width: 100%; height: 205px; background: url("../img/h-bg.png") repeat-x left top; background-size: 1px 210px; box-shadow: 0px 3px 5px #AAA;} #rss .rss-index-p { width: 822px; margin: 0px auto; height: 250px; background: url("../img/info-h.png") no-repeat top center; background-size: 822px;} #rss .rss-index-p p{ width: 440px; margin: 0px 62px; top: 92px; position: relative;} #rss .info { padding: 0px 0px 20px; display:block; width: 810px; margin: 0px auto;} #rss .info .info_dl { padding: 20px; display: inline-block;} #rss .info .info_dl li { padding: 5px 0px; border-bottom: 1px dashed #AAA; display: inline-block;} #rss .info .info_dl li:nth-child(2n-1) .info_div{ background: url("../img/rss-bar-back.png") repeat left center; background-size: 10px; display: inline-block;} #rss .info .info_dl li:last-child { border-bottom: 0;} #rss .info .info_dt { width: 150px; float: left; clear: left; padding: 5px;} #rss .info .info_dt:before { content: "　"; width: 20px; margin-top: 5px; float: left; background: url("../img/rc-arrow.png") left top no-repeat; background-size: 12px; display: block;} #rss .info .info_dd { width: 500px; float: left; padding: 5px;} #rss .info .info_icon { padding: 7px 10px; float: left;} /* プライバシー情報 */ /* ---------------------------------------------------------- */ #privacy { width: 800px; margin: 0px auto 80px;} #privacy div h2 { color: #402392; font-weight: bold; font-size: 18px; padding: 5px 0px;} #privacy div h2:before { content: "　"; width: 20px; margin-top: 5px; float: left; background: url("../img/rc-arrow.png") left top no-repeat; background-size: 12px; display: block;} #privacy div h2:after { content: ""; border-top: 1px dashed #AAA; height: 0px; width: 750px; float: left;} #privacy .div_1st { width: 750px; margin: 10px auto; padding: 20px; border: 1px solid #CCC; display: inline-block;} #privacy .div_2nd { width: 750px; margin: 10px auto; padding: 20px; border: 1px solid #CCC; display: inline-block;} #privacy .div_3rd { width: 750px; margin: 10px auto; padding: 20px; border: 1px solid #CCC; display: inline-block;} #privacy .pri_p { padding: 10px;} #privacy .pri_p ul li { margin: 10px auto;} #privacy .pri_p ul li p{ text-indent: -15px; padding-left: 20px;} /* 免責事項 */ /* ---------------------------------------------------------- */ #disclaimer { width: 800px; margin: 0px auto 80px;} #disclaimer div h2 { color: #402392; font-weight: bold; font-size: 18px; padding: 5px 0px;} #disclaimer div h2:before { content: "　"; width: 20px; margin-top: 5px; float: left; background: url("../img/rc-arrow.png") left top no-repeat; background-size: 12px; display: block;} #disclaimer div h2:after { content: ""; border-top: 1px dashed #AAA; height: 0px; width: 750px; float: left;} #disclaimer .div_1st { width: 750px; margin: 10px auto; padding: 20px; border: 1px solid #CCC; display: inline-block;} #disclaimer .div_2nd { width: 750px; margin: 10px auto; padding: 20px; border: 1px solid #CCC; display: inline-block;} #disclaimer .div_3rd { width: 750px; margin: 10px auto; padding: 20px; border: 1px solid #CCC; display: inline-block;} #disclaimer .dis_p { padding: 10px;} #disclaimer .dis_p ul li { margin: 10px auto;} #disclaimer .dis_p ul li p{ text-indent: -15px; padding-left: 20px;} /* Thanksページ */ /* ---------------------------------------------------------- */ #thanks { margin: 40px auto;} #tankus p { padding: 10px 0px;} /* よくある質問 */ /* ---------------------------------------------------------- */ #faq h2 { width: 220px; margin: 30px 0px 10px; padding: 7px 0px; padding-left: 50px; background: url("../img/faq-small-title.png") no-repeat left top; background-size: 250px; } #faq .q-list { width: 780px;} #faq .q-list p{ margin-left: 40px;} #faq .q-list a{ text-decoration: none;} #faq .faq-list { width: 780px;} #faq .faq-list div { margin-left: 40px;} #faq .q-icon { margin-bottom: 10px; padding-top: 25px;} #faq .a-icon { padding-bottom: 25px; padding-left: 30px; text-indent: -30px; border-bottom: 1px solid #CCC;} #faq .q-icon:before { content:""; padding: 15px; background: url("../img/faq-q-icon.png") no-repeat left center; background-size: 25px;} #faq .a-icon:before { content:""; padding: 15px; background: url("../img/faq-a-icon.png") no-repeat left center; background-size: 25px;} /* 製品一覧と料金表 */ /* ---------------------------------------------------------- */ #product table{ width:780px; margin: 10px auto;} #product table th, #product table td { padding: 5px; padding-right: 0px; border: 2px solid #FFF; vertical-align: center; text-align: center;} #product table thead th{ background-color: #af0d0d; color: #FFF; font-weight: bold; font-size: 20px;} #product table font{ color: #402392;} #product table .tr_bar { background-color: #CCCCCC;} #product table p{ display: inline-block;} #product .rete1_table th{ width: 150px; background-color: #ffb8ac; font-weight: bold;} #product .rete1_table td{ background-color: #f8f8f8;} #product table tbody.rete2_table th{ background-color: #ffb8ac; font-weight: bold;} #product table tbody.rete2_table td.td_1 { width: 100px; background-color: #ffe4df; text-align: center;} #product table tbody.rete2_table td.td_2 { width: 120px; background-color: #f8f8f8; text-align: right;} #product table tbody.rete2_table td.td_3 { width: 440px; background-color: #fffce8; text-align: left;} #product table tbody.rete2_table td.td_4 { width: 130px; background-color: #eeeeee; text-align: left; color: #666;} #product table tbody.rete3_table th{ background-color: #ffb8ac; font-weight: bold;} #product table tbody.rete3_table td.td_1 { width: 180px; background-color: #ffe4df; text-align: center;} #product table tbody.rete3_table td.td_2 { width: 100px; background-color: #f8f8f8; text-align: right;} #product table tbody.rete3_table td.td_3 { width: 150px; background-color: #fffce8; text-align: center;} #product table tbody.rete3_table td.td_4 { width: 360px; background-color: #eeeeee; text-align: left; color: #666;} #product table tbody.rete4_table th{ background-color: #ffb8ac; font-weight: bold;} #product table tbody.rete4_table td.td_1 { width: 210px; background-color: #ffe4df; text-align: left;} #product table tbody.rete4_table td.td_2 { width: 100px; background-color: #f8f8f8; text-align: right;} #product table tbody.rete4_table td.td_3 { width: 460px; background-color: #eeeeee; text-align: left; color: #666;} #product table tbody.rete5_table th{ background-color: #ffb8ac; font-weight: bold;} #product table tbody.rete5_table td.td_1 { width: 210px; background-color: #ffe4df; text-align: left;} #product table tbody.rete5_table td.td_2 { width: 100px; background-color: #f8f8f8; text-align: right;} #product table tbody.rete5_table td.td_3 { width: 460px; background-color: #eeeeee; text-align: left; color: #666;} #product table tbody.rete6_table th{ background-color: #ffb8ac; font-weight: bold;} #product table tbody.rete6_table td.td_1 { width: 215px; background-color: #ffe4df; text-align: left;} #product table tbody.rete6_table td.td_2 { width: 160px; background-color: #f8f8f8; text-align: right;} #product table tbody.rete6_table td.td_3 { width: 260px; background-color: #eeeeee; text-align: left; color: #666;} #product table tbody.rete6_table td.td_4 { width: 360px; background-color: #FFFFFF; text-align: right; color: #000;} /* 楽着会計とは　楽着給与とは　楽着Officeとは */ /* ---------------------------------------------------------- */ #accouting .acount_div{ width: 780px; margin: 40px auto;} #accouting .acount_div h2{ background: url("../img/rakuchaku-kaikei-title.png") no-repeat left top; background-size: 300px; width: 260px; padding: 6px 0px; padding-left: 40px; margin: 40px 0px 5px;} #accouting .options { width: 780px;} #accouting .options .op_div { margin: 20px auto; display: inline-block; clear: both;} #accouting .options .img-size { padding: 10px; width: 220px;} #accouting .option_table { width: 780px; margin: 40px auto;} #accouting .option_table table { width: 350px; float: left;} #accouting .option_table table th { width: 120px; padding: 5px; background: #309071; border: 2px solid #FFF; color: #FFF; font-weight: bold; vertical-align: top;} #accouting .option_table table td { border: 2px solid #FFF;} #accouting .option_table p { font-weight: bold;} #accouting .option_table div { display: inline-block;} #accouting .option_table font{ color: #402392; font-weight: normal;} /* 個別インフォページ */ /* ---------------------------------------------------------- */ #infopage .info_div{ margin: 40px auto;} #infopage div { width: 780px; margin: 0px auto;} #infopage p{ width: 780px; margin: 0px auto;} /* 楽着BPOページ */ /* ---------------------------------------------------------- */ #bpo .bpo-cont { width: 800px; margin: 40px auto;} #bpo .bpo-cont .subtitle:after { border: 0;} #bpo .bpo-div { width: 770px; padding: 28px; margin: 10px auto 0px; border: 1px solid #CCC; box-shadow: 1px 1px 2px #CCC; border-radius: 5px; font-size: 14px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */ } #bpo .bpo_img { width: 250px; padding: 5px;} #bpo .bpo-list { display: inline-block;} #bpo .bpo-list div { height: 225px; width: 230px; padding: 5px; float: left;} #bpo .bpo-list div p { width: 200px; margin: 0px auto; padding-top: 100px;} #bpo .bpo-list .list1 { background: url("../img/bpo/bpo-cheaply.png") center no-repeat; background-size: 230px;} #bpo .bpo-list .list2 { background: url("../img/bpo/bpo-readily.png") center no-repeat; background-size: 230px;} #bpo .bpo-list .list3 { background: url("../img/bpo/bpo-anytime.png") center no-repeat; background-size: 230px;} #bpo .bpo-list .list4 { background: url("../img/bpo/bpo-safety.png") center no-repeat; background-size: 230px;} #bpo .reason { width: 880px; margin: 0px auto; padding: 30px 0px;} #bpo .reason h1 { margin-bottom: 40px;} #bpo .reason div { width: 770px; margin: 0px auto;} #bpo .reason div p { padding-left: 150px;} #bpo .reason div h2 { padding: 60px 10px 10px; font-size: 25px; font-weight: bold;} #bpo .reason1 h2:before { content: ""; width: 135px; height: 80px; margin-top: -40px; float: left; background: url("../img/bpo/bpo-reason1.png") no-repeat left center; background-size: 80px 80px;} #bpo .reason2 h2:before { content: ""; width: 135px; height: 80px; margin-top: -40px; float: left; background: url("../img/bpo/bpo-reason2.png") no-repeat left center; background-size: 90px 80px;} #bpo .reason3 h2:before { content: ""; width: 135px; height: 80px; margin-top: -40px; float: left; background: url("../img/bpo/bpo-reason3.png") no-repeat left center; background-size: 90px 80px;} #bpo .bpo-service .step1 { height: 85px; width: 700px; margin: 0px auto; background: url("../img/bpo/bpo-step1.png") center no-repeat; background-size: 700px; clear: both;} #bpo .bpo-service .step2 { height: 105px; width: 700px; margin: 0px auto; background: url("../img/bpo/bpo-step2.png") center no-repeat; background-size: 700px; clear: both;} #bpo .bpo-service .step3 { height: 175px; width: 700px; margin: 0px auto; background: url("../img/bpo/bpo-step3.png") center no-repeat; background-size: 700px; clear: both;} #bpo .bpo-service .step4 { height: 85px; width: 700px; margin: 0px auto; background: url("../img/bpo/bpo-step4.png") center no-repeat; background-size: 700px; clear: both;} #bpo .bpo-service .step1 p { padding: 40px 80px 20px 190px; font-size: 20px;} #bpo .bpo-service .step2 p { padding: 30px 80px 30px 190px; font-size: 20px;} #bpo .bpo-service .step3 p { padding: 20px 25px 5px 170px; font-size: 20px;} #bpo .bpo-service .supervision { width: 520px; height: 80px; margin: 0px 10px 15px 160px; background: url("../img/bpo/bpo-supervision.png") center no-repeat; background-size: 520px;} #bpo .bpo-service .supervision p { padding: 20px 10px 10px 90px; font-size: 18px;} #bpo .bpo-service .step4 p { padding: 40px 80px 20px 190px; font-size: 20px;} #bpo .bpo-service .step1:after { content: ""; width: 100%; height: 40px; float:left; display: block; background: url("../img/bpo/bpo-arrow.png") center no-repeat; background-size: 50px;} #bpo .bpo-service .step2:after { content: ""; width: 100%; height: 40px; float:left; display: block; background: url("../img/bpo/bpo-arrow.png") center no-repeat; background-size: 50px;} #bpo .bpo-service .step3:after { content: ""; width: 100%; height: 30px; float:left; display: block; background: url("../img/bpo/bpo-arrow.png") bottom no-repeat; background-size: 50px;} #bpo .charge-plan p { width: 760px; margin: 0px auto; padding-bottom: 25px;} #bpo .charge-plan table { width: 760px; margin: 0px auto;} #bpo .charge-plan table thead td { padding: 5px; border: #FFF 2px solid; color: #FFF; background: #841B42; font-weight: bold; text-align: center;} #bpo .charge-plan table .th-th { padding: 5px 10px; border: #FFF 2px solid; background: #FDB6AB; font-weight: bold;} #bpo .charge-plan table th { padding: 5px 10px; border: #FFF 2px solid; background: #FFECDE;} #bpo .charge-plan table td { padding: 5px; border: #FFF 2px solid; background: #EFEFEF; text-align: center} #bpo .option { padding-bottom: 50px;} #bpo .option p { width: 760px; margin: 0px auto; padding-bottom: 20px;} #bpo .option div { width: 700px; height: 87px; margin: 10px auto;} #bpo .option div p { width: 500px; padding: 20px 20px 20px 195px;} #bpo .name { background: url("../img/bpo/bpo-name-frame.png") no-repeat; background-size: 700px;} #bpo .salary { background: url("../img/bpo/bpo-salary-frame.png") no-repeat; background-size: 700px;} #bpo .office { background: url("../img/bpo/bpo-office-frame.png") no-repeat; background-size: 700px;}