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

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

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


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

#intro.bgon{
height:3660px;
}

#page-sdgs .bgon .topbg{
height:740px;
}

#page-sdgs .bgon .btmbg{
top:1420px;
height:2240px;
}

.bgon .btmbg .cloud.cloudpos1{top:100px;  left:  20px;}
.bgon .btmbg .cloud.cloudpos2{top:1200px; left: 150px;}
.bgon .btmbg .cloud.cloudpos3{top:1900px; left:  70px;}
.bgon .btmbg .cloud.cloudpos4{top:300px;  right: 10px;}
.bgon .btmbg .cloud.cloudpos5{top:900px;  right:170px;}
.bgon .btmbg .cloud.cloudpos6{top:2000px; right: 90px;}


#page-sdgs .bgon .row_inner .card .topcard{height:1160px;}

#page-sdgs .bgon .card {
position: relative;
overflow: hidden;
text-align: center;
}

#page-sdgs .bgon .card .topcard h3.efforts {
background: url(../img/page-sdgs/efforts_tit.png) no-repeat center top;
position: relative;
display: block;
width: 100px;
height: 30px;
margin: 50px auto 0;
}

#page-sdgs .bgon .card .topcard .pic {
background: url(../img/page-sdgs/efforts_bg.png) no-repeat center top;
position: relative;
display: block;
width: 820px;
height: 560px;
margin: 50px auto 0;
top: 0;
}

.boy_l{
background:url(../img/page-sdgs/efforts_boy_l.png) no-repeat center center;
width:103px;
height: 170px;
position: absolute;
top: 580px;
left: 140px;
}

.boy_r{
background:url(../img/page-sdgs/efforts_boy_r.png) no-repeat center center;
width:114px;
height: 170px;
position: absolute;
top: 580px;
left: 960px;
}

#page-sdgs .bgon .card .topcard p {
width: auto;
height: auto;
margin: 80px auto 0;
text-align: center;
}

#page-sdgs .bgon .card .topcard .sig {
background: url(../img/page-sdgs/efforts_sig.png) no-repeat center center;
display: block;
width: 430px;
height: 140px;
position: absolute;
top: 980px;
left: 730px;
}


#page-sdgs .bgon .card h3.oursdgs {
background: url(../img/page-sdgs/intro_tit.png) no-repeat center top;
position: relative;
display: block;
width: 250px;
height: 80px;
margin: 50px auto 30px;
}

.bgon .card ul {
position: relative;
display: block;
width: 1220px;
margin: 0 auto;
}


.bgon .card ul li.li01.card_single{ height:660px;}
.bgon .card ul li.li02.card_single{ height:770px;}
.bgon .card ul li.li03.card_single{ height:660px;}


.bgon .card ul li.card_single .ico{
display: block;
width:820px;
height: 130px;
position: relative;
margin:20px auto 40px;
}
.bgon .card ul li.li01.card_single .ico{background: url(../img/page-sdgs/intro_li_01_ico.png) no-repeat center center;}
.bgon .card ul li.li02.card_single .ico{background: url(../img/page-sdgs/intro_li_02_ico.png) no-repeat center center;}
.bgon .card ul li.li03.card_single .ico{background: url(../img/page-sdgs/intro_li_03_ico.png) no-repeat center center;}

.bgon .card ul li.card_single table{
width:660px;
position: relative;
text-align: left;
}

.bgon .card ul li.card_single table th {
padding: 4px 30px;
}
.bgon .card ul li.card_single table td {
padding: 4px 0 20px 30px;
}

.bgon .card ul li.card_single table th{
color: #3B9E93;
background-color:#F7F7F7;
font-size: 20px;
font-weight: bold;
}


.bgon .card ul li.card_single .pic {
display: block;
width: 540px;
height: 500px;
position: absolute;
top: 280px;
right: 20px;
z-index: 999;
}

.bgon .card ul li.li01.card_single .pic { background: url(../img/page-sdgs/intro_li_01_pic.png) no-repeat right top; }
.bgon .card ul li.li02.card_single .pic { background: url(../img/page-sdgs/intro_li_02_pic.png) no-repeat right top; top: 300px;}
.bgon .card ul li.li03.card_single .pic { background: url(../img/page-sdgs/intro_li_03_pic.png) no-repeat right top; top: 220px;}

.bgon .card ul li.li02.card_single .cert {
background: url(../img/page-sdgs/intro_li_02_cert.png) no-repeat center top;
display: block;
width: 272px;
height: 378px;
position: absolute;
top: 326px;
right: 380px;
}