@charset "UTF-8";
/* CSS Document */
/*====================================================================================
■01.RESET HTML
■02.CLEAR FLOAT
■03.MARGIN DEFAULT
■04.LAYOUT
■05.USE MEDIA
■06.OTHER
■07.PAGE UP
■08.HEADER
■09.GOLABLE NAVIGATION
■10.FOOTER
====================================================================================*/
/*====================================================================================
■01.RESET HTML
====================================================================================*/
h4 { font-size: 14px; }

ul, li { list-style: none; }

img { margin: 0px; padding: 0px; border: 0px; transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; }

.ov_hover:hover img { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70)"; }

a { color: #333; text-decoration: underline; -webkit-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s; }

a:hover { text-decoration: none; }

html { overflow-y: auto; }

body { font-size: 14px; font-family: "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif; color: #232323; min-width: 1000px; overflow: hidden; }

/*====================================================================================
■02.CLEAR FLOAT
====================================================================================*/
.clearfix:after { clear: both; display: block; content: " "; height: 0px; visibility: hidden; }

.clearfix { display: inline-block; }

/* Hide these rules from IE-mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }

/*====================================================================================
■03.MARGIN DEFAULT
====================================================================================*/
/* margin */
.mat { margin: auto         !important; }

.m00 { margin: 0px         !important; }

.m05 { margin: 5px         !important; }

.m10 { margin: 10px         !important; }

.m15 { margin: 15px         !important; }

.m20 { margin: 20px         !important; }

.m25 { margin: 25px         !important; }

.m30 { margin: 30px         !important; }

.m35 { margin: 35px         !important; }

.m40 { margin: 40px         !important; }

.m45 { margin: 45px         !important; }

.m50 { margin: 50px         !important; }

.m55 { margin: 55px         !important; }

.m60 { margin: 60px         !important; }

.m65 { margin: 65px         !important; }

.m70 { margin: 70px         !important; }

.m75 { margin: 75px         !important; }

.m80 { margin: 80px         !important; }

.m85 { margin: 85px         !important; }

.m90 { margin: 90px         !important; }

.mt00 { margin-top: 0px     !important; }

.mt05 { margin-top: 5px     !important; }

.mt10 { margin-top: 10px     !important; }

.mt15 { margin-top: 15px     !important; }

.mt20 { margin-top: 20px     !important; }

.mt25 { margin-top: 25px     !important; }

.mt30 { margin-top: 30px     !important; }

.mt35 { margin-top: 35px     !important; }

.mt40 { margin-top: 40px     !important; }

.mt45 { margin-top: 45px     !important; }

.mt50 { margin-top: 50px     !important; }

.mt55 { margin-top: 55px     !important; }

.mt60 { margin-top: 60px     !important; }

.mt65 { margin-top: 65px     !important; }

.mt70 { margin-top: 70px     !important; }

.mt75 { margin-top: 75px     !important; }

.mt80 { margin-top: 80px     !important; }

.mt85 { margin-top: 85px     !important; }

.mt90 { margin-top: 90px     !important; }

.mr00 { margin-right: 0px   !important; }

.mr05 { margin-right: 5px   !important; }

.mr10 { margin-right: 10px   !important; }

.mr15 { margin-right: 15px   !important; }

.mr20 { margin-right: 20px   !important; }

.mr25 { margin-right: 25px   !important; }

.mr30 { margin-right: 30px   !important; }

.mr35 { margin-right: 35px   !important; }

.mr40 { margin-right: 40px   !important; }

.mr45 { margin-right: 45px   !important; }

.mr50 { margin-right: 50px   !important; }

.mr55 { margin-right: 55px   !important; }

.mr60 { margin-right: 60px   !important; }

.mr65 { margin-right: 65px   !important; }

.mr70 { margin-right: 70px   !important; }

.mr75 { margin-right: 75px   !important; }

.mr80 { margin-right: 80px   !important; }

.mr85 { margin-right: 85px   !important; }

.mr90 { margin-right: 90px   !important; }

.mb00 { margin-bottom: 0px  !important; }

.mb05 { margin-bottom: 5px  !important; }

.mb10 { margin-bottom: 10px  !important; }

.mb15 { margin-bottom: 15px  !important; }

.mb20 { margin-bottom: 20px  !important; }

.mb25 { margin-bottom: 25px  !important; }

.mb30 { margin-bottom: 30px  !important; }

.mb35 { margin-bottom: 35px  !important; }

.mb40 { margin-bottom: 40px  !important; }

.mb45 { margin-bottom: 45px  !important; }

.mb50 { margin-bottom: 50px  !important; }

.mb55 { margin-bottom: 55px  !important; }

.mb60 { margin-bottom: 60px  !important; }

.mb65 { margin-bottom: 65px  !important; }

.mb70 { margin-bottom: 70px  !important; }

.mb75 { margin-bottom: 75px  !important; }

.mb80 { margin-bottom: 80px  !important; }

.mb85 { margin-bottom: 85px  !important; }

.mb90 { margin-bottom: 90px  !important; }

.ml00 { margin-left: 0px    !important; }

.ml05 { margin-left: 5px    !important; }

.ml10 { margin-left: 10px    !important; }

.ml15 { margin-left: 15px    !important; }

.ml20 { margin-left: 20px    !important; }

.ml25 { margin-left: 25px    !important; }

.ml30 { margin-left: 30px    !important; }

.ml35 { margin-left: 35px    !important; }

.ml40 { margin-left: 40px    !important; }

.ml45 { margin-left: 45px    !important; }

.ml50 { margin-left: 50px    !important; }

.ml55 { margin-left: 55px    !important; }

.ml60 { margin-left: 60px    !important; }

.ml65 { margin-left: 65px    !important; }

.ml70 { margin-left: 70px    !important; }

.ml75 { margin-left: 75px    !important; }

.ml80 { margin-left: 80px    !important; }

.ml85 { margin-left: 85px    !important; }

.ml90 { margin-left: 90px    !important; }

/* margin */
/* padding */
.p00 { padding: 0px        !important; }

.p05 { padding: 5px        !important; }

.p10 { padding: 10px        !important; }

.p15 { padding: 15px        !important; }

.p20 { padding: 20px        !important; }

.p25 { padding: 25px        !important; }

.p30 { padding: 30px        !important; }

.p35 { padding: 35px        !important; }

.p40 { padding: 40px        !important; }

.p45 { padding: 45px        !important; }

.p50 { padding: 50px        !important; }

.p55 { padding: 55px        !important; }

.p60 { padding: 60px        !important; }

.p65 { padding: 65px        !important; }

.p70 { padding: 70px        !important; }

.p75 { padding: 75px        !important; }

.p80 { padding: 80px        !important; }

.p85 { padding: 85px        !important; }

.p90 { padding: 90px        !important; }

.pt00 { padding-top: 0px    !important; }

.pt05 { padding-top: 5px    !important; }

.pt10 { padding-top: 10px    !important; }

.pt15 { padding-top: 15px    !important; }

.pt20 { padding-top: 20px    !important; }

.pt25 { padding-top: 25px    !important; }

.pt30 { padding-top: 30px    !important; }

.pt35 { padding-top: 35px    !important; }

.pt40 { padding-top: 40px    !important; }

.pt45 { padding-top: 45px    !important; }

.pt50 { padding-top: 50px    !important; }

.pt55 { padding-top: 55px    !important; }

.pt60 { padding-top: 60px    !important; }

.pt65 { padding-top: 65px    !important; }

.pt70 { padding-top: 70px    !important; }

.pt75 { padding-top: 75px    !important; }

.pt80 { padding-top: 80px    !important; }

.pt85 { padding-top: 85px    !important; }

.pt90 { padding-top: 90px    !important; }

.pr00 { padding-right: 0px  !important; }

.pr05 { padding-right: 5px  !important; }

.pr10 { padding-right: 10px  !important; }

.pr15 { padding-right: 15px  !important; }

.pr20 { padding-right: 20px  !important; }

.pr25 { padding-right: 25px  !important; }

.pr30 { padding-right: 30px  !important; }

.pr35 { padding-right: 35px  !important; }

.pr40 { padding-right: 40px  !important; }

.pr45 { padding-right: 45px  !important; }

.pr50 { padding-right: 50px  !important; }

.pr55 { padding-right: 55px  !important; }

.pr60 { padding-right: 60px  !important; }

.pr65 { padding-right: 65px  !important; }

.pr70 { padding-right: 70px  !important; }

.pr75 { padding-right: 75px  !important; }

.pr80 { padding-right: 80px  !important; }

.pr85 { padding-right: 85px  !important; }

.pr90 { padding-right: 90px  !important; }

.pb00 { padding-bottom: 0px !important; }

.pb05 { padding-bottom: 5px !important; }

.pb10 { padding-bottom: 10px !important; }

.pb15 { padding-bottom: 15px !important; }

.pb20 { padding-bottom: 20px !important; }

.pb25 { padding-bottom: 25px !important; }

.pb30 { padding-bottom: 30px !important; }

.pb35 { padding-bottom: 35px !important; }

.pb40 { padding-bottom: 40px !important; }

.pb45 { padding-bottom: 45px !important; }

.pb50 { padding-bottom: 50px !important; }

.pb55 { padding-bottom: 55px !important; }

.pb60 { padding-bottom: 60px !important; }

.pb65 { padding-bottom: 65px !important; }

.pb70 { padding-bottom: 70px !important; }

.pb75 { padding-bottom: 75px !important; }

.pb80 { padding-bottom: 80px !important; }

.pb85 { padding-bottom: 85px !important; }

.pb90 { padding-bottom: 90px !important; }

.pl00 { padding-left: 0px   !important; }

.pl05 { padding-left: 5px   !important; }

.pl10 { padding-left: 10px   !important; }

.pl15 { padding-left: 15px   !important; }

.pl20 { padding-left: 20px   !important; }

.pl25 { padding-left: 25px   !important; }

.pl30 { padding-left: 30px   !important; }

.pl35 { padding-left: 35px   !important; }

.pl40 { padding-left: 40px   !important; }

.pl45 { padding-left: 45px   !important; }

.pl50 { padding-left: 50px   !important; }

.pl55 { padding-left: 55px   !important; }

.pl60 { padding-left: 60px   !important; }

.pl65 { padding-left: 65px   !important; }

.pl70 { padding-left: 70px   !important; }

.pl75 { padding-left: 75px   !important; }

.pl80 { padding-left: 80px   !important; }

.pl85 { padding-left: 85px   !important; }

.pl90 { padding-left: 90px   !important; }

/* padding */
/* font */
.f10 { font-size: 10px !important; }

.f11 { font-size: 11px !important; }

.f12 { font-size: 12px !important; }

.f13 { font-size: 13px !important; }

.f14 { font-size: 14px !important; }

.f15 { font-size: 15px !important; }

.f16 { font-size: 16px !important; }

.f17 { font-size: 17px !important; }

.f18 { font-size: 18px !important; }

.f19 { font-size: 19px !important; }

.f20 { font-size: 20px !important; }

.f21 { font-size: 21px !important; }

.f22 { font-size: 22px !important; }

.f23 { font-size: 23px !important; }

.f24 { font-size: 24px !important; }

/*====================================================================================
■04.LAYOUT
====================================================================================*/
.container { position: relative; width: 1000px; margin: 0 auto; }

/*■05.FLEX*/
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; /* Safari */ display: -moz-flex; /* Firefox */ display: -ms-flex; /* IE */ }

/*justify-content*/
.flex_jus_start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; }

.flex_jus_end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; }

.flex_jus_center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; }

.flex_jus_between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; }

.flex_jus_around { -ms-flex-pack: distribute; justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; }

.flex_jus_ini { -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; -webkit-justify-content: initial; -moz-justify-content: initial; -ms-justify-content: initial; }

/*align-items*/
.flex_align_item_start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; }

.flex_align_item_end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; }

.flex_align_item_stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; }

.flex_align_item_baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; }

.flex_align_item_center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; }

.flex_align_item_ini { -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; -webkit-align-items: initial; -moz-align-items: initial; -ms-align-items: initial; }

.flex_container { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

/*====================================================================================
■05.USE MEDIA
====================================================================================*/
.pull-left { float: left; }

.pull-right { float: right; }

.media, .media-body { overflow: hidden; }

.media > .pull-left { margin-right: 20px; }

.media > .pull-right { margin-left: 20px; }

.media-text:after { clear: both; display: block; content: ""; height: 0px; visibility: hidden; }

/*====================================================================================
■06.OTHER
====================================================================================*/
.text-normal { font-weight: normal; }

.text-bold { font-weight: bold; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

.text-underline { text-decoration: underline; }

.text-none-underline { text-decoration: none !important; }

.font14 { font-size: 14px; }

.font11 { font-size: 11px; }

.add_font { font-family: "Roboto", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

/*====================================================================================
■07.PAGE UP
====================================================================================*/
footer .page_up { position: fixed; right: -550px; bottom: 120px; z-index: 999; }

/*====================================================================================
■08.HEADER
====================================================================================*/
header .h1_sec { margin-bottom: 10px; }

header .h1_sec .container h1 { font-size: 11px; font-weight: normal; color: #a6a6a6; }

header .h_sec { margin-bottom: 20px; }

header .h_sec .container .h_sub { width: 217px; }

header .h_sec .container .h_sub li .icon { color: #cf0d0d; margin-right: 5px; }

header .h_sec .container .h_sub li a { font-size: 11px; text-decoration: none; }

header .h_sec .container .h_sub li a:hover { text-decoration: underline; }

header .h_sec .container .right { width: 433px; }

header .h_sec .container .right p { text-align: center; font-size: 11px; }

header .h_sec .container .right ul li:last-child { width: 230px; }

header .h_sec .container .right ul li:last-child a { line-height: 40px; height: 40px; text-align: center; color: #fff; display: inline-block; text-decoration: none; width: 188px; position: relative; overflow: hidden; z-index: 2; }

header .h_sec .container .right ul li:last-child a:after { content: ""; display: block; width: 100%; height: 80px; background: #333333; background: -moz-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #333333), color-stop(50%, #333333), color-stop(50%, #c00909), color-stop(100%, #c00909)); background: -webkit-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -o-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -ms-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -webkit-gradient(linear, left top, left bottom, from(#333333), color-stop(50%, #333333), color-stop(50%, #c00909), to(#c00909)); background: linear-gradient(to bottom, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#c00909', GradientType=0 ); position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

header .h_sec .container .right ul li:last-child a:hover:after { background-position: 0px -40px; }

/*====================================================================================
■09.GOLABLE NAVIGATION
====================================================================================*/
header .h_menu { background: #cc0000; }

header .h_menu li:first-child a { border-left: 1px solid #a60c0c; }

header .h_menu li a { display: block; padding: 20px 32px; color: #fff; text-decoration: none; text-align: center; border-right: 1px solid #a60c0c; z-index: 2; overflow: hidden; position: relative; }

header .h_menu li a span { font-family: "Roboto"; font-size: 11px; color: #f7b1b1; }

header .h_menu li a:after { content: ""; display: block; width: 100%; height: 164px; background: #cc0000; background: -moz-linear-gradient(top, #cc0000 0%, #cc0000 50%, #333333 50%, #333333 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #cc0000), color-stop(50%, #cc0000), color-stop(50%, #333333), color-stop(100%, #333333)); background: -webkit-linear-gradient(top, #cc0000 0%, #cc0000 50%, #333333 50%, #333333 100%); background: -o-linear-gradient(top, #cc0000 0%, #cc0000 50%, #333333 50%, #333333 100%); background: -ms-linear-gradient(top, #cc0000 0%, #cc0000 50%, #333333 50%, #333333 100%); background: -webkit-gradient(linear, left top, left bottom, from(#cc0000), color-stop(50%, #cc0000), color-stop(50%, #333333), to(#333333)); background: linear-gradient(to bottom, #cc0000 0%, #cc0000 50%, #333333 50%, #333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#333333', GradientType=0 ); position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; background-position: 0px 0px; }

header .h_menu li a:hover:after { background-position: 0px -82px; }

/*====================================================================================
■10.FOOTER
====================================================================================*/
.bd div { background: #cc0000; position: absolute; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.bd div.bdT { width: 0; height: 1px; top: 0; left: 0; }

.bd div.bdB { width: 0; height: 1px; bottom: 0; right: 0; }

.bd div.bdR { height: 0; width: 1px; right: 0; top: 0; }

.bd div.bdL { height: 0; width: 1px; left: 0; bottom: 0; }

ul li { position: relative; }

ul li:hover .bd1 div.bdT, ul li:hover .bd1 div.bdB { width: 100%; }

ul li:hover .bd1 div.bdR, ul li:hover .bd1 div.bdL { height: 100%; }

footer .f_cm { padding: 85px 0; background: #f1f1f1; }

footer .f_cm .container h2 { color: #cc0000; font-size: 30px; font-family: "Roboto"; font-weight: bold; margin-bottom: 20px; text-align: center; }

footer .f_cm .container > p { text-align: center; margin: 0 0 50px; }

footer .f_cm .container .banner1 { margin-bottom: 16px; }

footer .f_cm .container .banner1 li a { border: 1px solid #d7d7d7; display: block; }

footer .f_cm .container .banner2 li a { border: 1px solid #d7d7d7; display: block; }

footer .f_cm .container .wrap_box { margin-bottom: 50px; }

footer .f_cm .container .wrap_box .box { border-bottom: 1px solid #cc0000; width: 480px; padding-bottom: 12px; }

footer .f_cm .container .wrap_box .box ul { height: 53px; }

footer .f_cm .container .wrap_box .box ul li:first-child { color: #cc0000; font-size: 16px; margin-right: 15px; }

footer .f_cm .container .wrap_box .box ul:last-child li:last-child { width: 240px; }

footer .f_cm .container .wrap_box .box ul:last-child li:last-child a { line-height: 47px; height: 47px; text-align: center; color: #fff; display: inline-block; text-decoration: none; width: 188px; position: relative; overflow: hidden; z-index: 2; }

footer .f_cm .container .wrap_box .box ul:last-child li:last-child a:after { content: ""; display: block; width: 100%; height: 94px; background: #333333; background: -moz-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #333333), color-stop(50%, #333333), color-stop(50%, #c00909), color-stop(100%, #c00909)); background: -webkit-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -o-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -ms-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -webkit-gradient(linear, left top, left bottom, from(#333333), color-stop(50%, #333333), color-stop(50%, #c00909), to(#c00909)); background: linear-gradient(to bottom, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#c00909', GradientType=0 ); position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

footer .f_cm .container .wrap_box .box ul:last-child li:last-child a:hover:after { background-position: 0px -47px; }

footer .f_sec { background: #cc0000; padding: 50px 0; -webkit-animation: breakthe 2s 0s infinite alternate ease-in-out forwards; animation: breakthe 2s 0s infinite alternate ease-in-out forwards; }

footer .f_sec .container .left { width: 360px; }

footer .f_sec .container .left .f_logo { margin-bottom: 30px; }

footer .f_sec .container .left .f_add { font-size: 12px; color: #fff; margin-bottom: 30px; }

footer .f_sec .container .left .f_add a { text-decoration: none; color: #fff; margin-left: 20px; }

footer .f_sec .container .left .f_add a i { margin-left: 5px; color: #fff; }

footer .f_sec .container .left ul li { font-size: 18px; font-weight: bold; font-family: "Roboto"; color: #fff; }

footer .f_sec .container .right { width: 405px; margin-right: 95px; }

footer .f_sec .container .right > ul > li { margin-bottom: 8px; }

footer .f_sec .container .right > ul > li a { color: #fff; text-decoration: none; font-size: 12px; }

footer .f_sec .container .right > ul > li a:hover { text-decoration: underline; }

footer .f_sec .container .right > ul > li li { margin-bottom: 8px; margin-left: 13px; }

footer .f_sec .container .right > ul > li li:first-child { margin-top: 8px; }

/*==========================================
■11.breadcrumb
====================================================================================*/
.breadcrumb { margin: 0px auto 50px; font-size: 12px; padding-top: 11px; }

.breadcrumb .icon a { color: #000; text-decoration: none; }

.breadcrumb_in { padding: 0 0 0 20px !important; background: url(../common_img/bg_bread.png) no-repeat left center; }

.breadcrumb a { text-decoration: none; }

.breadcrumb li { color: #4f3912; float: left; padding: 0 15px 0 0px; }

.breadcrumb li a:hover { color: #4f3912; }

.cm_btn { text-align: center; position: relative; z-index: 9; }

.cm_btn a { display: inline-block; height: 50px; line-height: 50px; font-weight: bold; color: #fff; text-align: center; width: 100%; text-decoration: none; position: relative; overflow: hidden; font-family: 16px; font-weight: bold; }

.cm_btn a:after { content: ""; display: block; width: 100%; height: 100px; background: #333333; background: -moz-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #333333), color-stop(50%, #333333), color-stop(50%, #c00909), color-stop(100%, #c00909)); background: -webkit-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -o-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -ms-linear-gradient(top, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); background: -webkit-gradient(linear, left top, left bottom, from(#333333), color-stop(50%, #333333), color-stop(50%, #c00909), to(#c00909)); background: linear-gradient(to bottom, #333333 0%, #333333 50%, #c00909 50%, #c00909 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#c00909', GradientType=0 ); position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; background-position: 0px -2px; }

.cm_btn a:hover:after { background-position: 0px -50px; }

.cm_btn a i { position: absolute; right: 20px; top: 18px; }

/*==========================================
■12.Keyframe
====================================================================================*/
@-webkit-keyframes breakthe { 0% { background: #cc0000; }
  100% { background: #a00000; } }
@keyframes breakthe { 0% { background: #cc0000; }
  100% { background: #a00000; } }