@charset "UTF-8";
/*================================
page-resource.css
=================================*/

/*================================
o/w
=================================*/

header{
background:url(../img/page-resource/header_bg.jpg) no-repeat center top;
overflow: hidden;
width:100%;
position: relative;
margin:0 auto 0;
}


/* .bgon #intro
-------------------------------- */

#intro.bgon{
height:970px;
}

#page-resource .bgon .topbg{
height:710px;
}

#page-resource .bgon .btmbg{
top:710px;
height:260px;
}

.bgon .btmbg .cloud.cloud01{top: 30px; left: 120px;}
.bgon .btmbg .cloud.cloud02{top:80px; right: 200px;}

#page-resource .bgon .row_inner .card .topcard{height:610px;}



#page-resource .bgon .card h3 {
background: url(../img/page-resource/intro_tit.png) no-repeat left top;
}

#page-resource .bgon .card .pic {
background: url(../img/page-resource/intro_pic.png) no-repeat right top;
}


#page-resource #intro.bgon .card ul li{
display: inline-block;
padding:0!important;
margin:0 auto;
}


#page-resource #intro.bgon .card ul li a{
display: block;
width:400px;
height:260px;
}

#page-resource #intro.bgon .card ul li.li01 a{
background: url(../img/page-resource/intro_li01_with.png) no-repeat center bottom;
}
#page-resource #intro.bgon .card ul li.li02 a{
background: url(../img/page-resource/intro_li02_with.png) no-repeat center bottom;
}
#page-resource #intro.bgon .card ul li.li03 a{
background: url(../img/page-resource/intro_li03_with.png) no-repeat center bottom;
}



/* (.flow ) #workflow  style o/w
-------------------------------- */

#workflow.flow.flow_paper h3{ background: url(../img/page-resource/flow_paper_tit.png) no-repeat center center; }
#workflow.flow.flow_iron h3{ background: url(../img/page-resource/flow_iron_tit.png) no-repeat center center; }



/* (.bgon ) #means  style o/w
-------------------------------- */


#means.means_paper h3 {
background:url(../img/page-resource/means_paper_tit.png) no-repeat center center;
}

#means.bgon.means_paper .card ul li.li01.card_twin,
#means.bgon.means_paper .card ul li.li02.card_twin{
height:330px;
}

#means.bgon.means_paper .card ul li.li03.card_twin,
#means.bgon.means_paper .card ul li.li04.card_twin{
height:490px;
}

#means.bgon.means_paper .card ul li table{
background-color:#f7f7f7;
margin:20px 0;
}


#means.means_iron h3 {
background:url(../img/page-resource/means_iron_tit.png) no-repeat center center;
}

#means.bgon.means_iron .card ul li.li01.card_twin,
#means.bgon.means_iron .card ul li.li02.card_twin,
#means.bgon.means_iron .card ul li.li03.card_twin,
#means.bgon.means_iron .card ul li.li04.card_twin{
height:250px;
}

#means.bgon.means_iron p.desc {
text-align: center;
margin-bottom:20px;
}


#means.bgon.means_iron .card_plain_single {
background-color: #219184;
text-align: center;
outline: 1px solid #3E9F96;
}

#means.bgon.means_iron .card_plain_single h5 {
color: #fff;
}

#means.bgon.means_iron .card_plain_single h6 {
font-size: 22px;
font-weight: bold;
color: #EEE411;
}

#means.bgon.means_iron .card_plain_single p {
text-align: center;
color: #fff;
}



#means.bgon.means_other .card ul li{
display: inline-block;
width:600px;
height:680px;
position: relative;
margin:0 auto;
vertical-align: top;
}

#means.bgon.means_other .card ul li.li01{
background: url(../img/page-resource/other_li01_with.png) no-repeat center top;
}
#means.bgon.means_other .card ul li.li02{
background: url(../img/page-resource/other_li02_with.png) no-repeat center top;
}

#means.bgon.means_other .card ul li h6{
font-size: 23px;
font-weight: bold;
line-height: 1.6em;
color:#219184;
margin-top:295px;
margin-bottom: 10px;
}

#means.bgon.means_other .card{
margin-top:30px;
margin-bottom: 30px;
}


/* #paper (.sepheader o/w)
-------------------------------- */

#paper.sepheader{
background: url(../img/page-resource/paper_tit.png) no-repeat center top;
}
#paper.sepheader h4{
margin:370px auto 30px;
}

#iron.sepheader{
background: url(../img/page-resource/iron_tit.png) no-repeat center top;
}
#iron.sepheader h4{
margin:370px auto 30px;
}
#iron.sepheader p{
width:890px;
}

#other.sepheader{
background: url(../img/page-resource/other_tit.png) no-repeat center top;
}
#other.sepheader h4{
margin:370px auto 30px;
}


/*
#qa ( style o/w )
-------------------------*/

#qa.qa_paper h3 {
background:url(../img/page-resource/qa_paper_tit.png) no-repeat center center;
}
#qa.qa_paper h3 {
background:url(../img/page-resource/qa_iron_tit.png) no-repeat center center;
}