@charset "UTF-8";

.sub-wrap .area { float: left; width: 100%; }
.sub-wrap.sub-main .title-wrap p { font-size: 106%; }

.title-wrap { float: left; width: 100%; }
.title-wrap p:last-child { margin-bottom: 0; }
.content-wrap { position: relative; float: left; width: 100%; margin-bottom: 150px; }
.content-wrap.narrow { padding: 0 45px; }
section .btn { min-width:200px !important; padding:13px 50px 11px 25px; font-size:20px; margin-bottom: 20px; margin-left: 3px; margin-right: 3px; background-image:url(../img/btn_arrow.png); background-repeat:no-repeat; background-position:right 22px top 50%; border-radius: 5px; text-align:left; }
.v_center { transform: translate(-50%, -50%); position: absolute !important; top: 50%; left: 50%; }

ul.flip { margin-left: -12px; margin-right: -12px; }
ul.flip li { float: left; width: 50%; padding: 12px; }
ul.flip li .box { position: relative; border-radius: 20px; overflow: hidden; padding-top: 50%; background-size: cover; background-position: 50% 50%; }
ul.flip li .box p { visibility: hidden; opacity: 0; padding: 10px 0; color: #fff; }
ul.flip li .box h3 { margin-bottom: 10px; color: #fff; font-size: 25px; }
ul.flip li .box h3 span { color: #ffa200; font-size: 85%; }
ul.flip li .box .content { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; padding: 30px 35px; opacity: 1; transition: all 0.2s; }
ul.flip li .box .layer { position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(80,74,75,0.7); }
ul.flip li .box .seemore { display: none; position: absolute; bottom: 30px; right: 30px; height: 30px; opacity: 1; transition: all 0.2s; }
ul.flip li:nth-child(1) .box { background-image: url(../img/img_introduction_biz1.jpg); }
ul.flip li:nth-child(2) .box { background-image: url(../img/img_introduction_biz2.jpg); }
ul.flip li:nth-child(3) .box { background-image: url(../img/img_introduction_biz3.jpg); }
ul.flip li:nth-child(4) .box { background-image: url(../img/img_introduction_biz4.jpg); }
ul.flip li .box:hover p { visibility: visible; opacity: 1; }
ul.flip li .box:hover .layer { background: rgba(205,128,0,0.9); }
ul.flip li .box:hover .seemore { opacity: 0; }

ul.icon { margin-left: -10px; margin-right: -10px; }
ul.icon li { float: left; width: 12.5%; padding: 10px; text-align: center; }
ul.icon li a { display: block; float: left; width: 100%; padding: 15px 0 20px 0; border: 1px solid #dfdfdf; border-radius: 7px; box-shadow: 0px 5px 5px rgba(0,0,0,0.07); }
ul.icon li h4 { margin-bottom: 0; color: #777; font-size: 18px; }
ul.icon li .img { width: 100%; padding-top: 80%; background-size: 85%; background-position: 50% 50%; background-repeat: no-repeat; }
ul.icon li:nth-child(1) .img { background-image:url('../img/icons/ic_health_gray.png'); }
ul.icon li:nth-child(2) .img { background-image:url('../img/icons/ic_education_gray.png'); }
ul.icon li:nth-child(3) .img { background-image:url('../img/icons/ic_labor_gray.png'); }
ul.icon li:nth-child(4) .img { background-image:url('../img/icons/ic_culture_gray.png'); }
ul.icon li:nth-child(5) .img { background-image:url('../img/icons/ic_social_gray.png'); }
ul.icon li:nth-child(6) .img { background-image:url('../img/icons/ic_safety_gray.png'); }
ul.icon li:nth-child(7) .img { background-image:url('../img/icons/ic_living_gray.png'); }
ul.icon li:nth-child(8) .img { background-image:url('../img/icons/ic_environment_gray.png'); }
ul.icon li:nth-child(1) a:hover .img { background-image:url('../img/icons/ic_health.png'); }
ul.icon li:nth-child(2) a:hover .img { background-image:url('../img/icons/ic_education.png'); }
ul.icon li:nth-child(3) a:hover .img { background-image:url('../img/icons/ic_labor.png'); }
ul.icon li:nth-child(4) a:hover .img { background-image:url('../img/icons/ic_culture.png'); }
ul.icon li:nth-child(5) a:hover .img { background-image:url('../img/icons/ic_social.png'); }
ul.icon li:nth-child(6) a:hover .img { background-image:url('../img/icons/ic_safety.png'); }
ul.icon li:nth-child(7) a:hover .img { background-image:url('../img/icons/ic_living.png'); }
ul.icon li:nth-child(8) a:hover .img { background-image:url('../img/icons/ic_environment.png'); }
ul.icon li a:hover { border-color: #ffa200; }
ul.icon li a:hover h4 { color: #ffa200; }

ul.image { margin-left: 0; margin-right: 0; }
ul.image li { padding: 0; }
ul.image li:first-child img { border-radius: 20px 0 0 20px; overflow: hidden; }
ul.image li:last-child img { border-radius: 0 20px 20px 0; overflow: hidden; }

.area.intro .symbol { width: 100px; height: 100px; background-color: #fff; background-image:url('../img/logo_symbol.png'); background-size: 70%; background-position: 50% 50%; background-repeat: no-repeat; border-radius: 100%; border: 1px solid #ffa200; box-shadow: 0px 5px 5px rgba(0,0,0,0.07); z-index: 2; }
.area.intro .title-wrap img { width: 80px; position: absolute; top: 50px; }
.area.intro .title-wrap img.left { left: 15%; }
.area.intro .title-wrap img.right { right: 15%; }


@media only screen and (max-width:1250px) {

.content-wrap { margin-bottom: 120px; }

section .btn { font-size: 15px; min-width: 150px !important; 	padding: 10px 38px 10px 18px; background-position: right 15px top 50%; background-size: 8px; }

ul.flip li .box h3 { font-size: 22px; }
ul.flip li .box p { font-size: 14px; margin-bottom: 10px; }
ul.flip li .box .content { padding: 22px 28px; }
ul.flip li .box .seemore { bottom: 25px; right: 25px; height: 25px; }

.area.intro .symbol { width: 90px; height: 90px; }

}

@media only screen and (max-width:1100px) {

ul.icon { margin-left: -6px; margin-right: -6px; }
ul.icon li { padding: 6px; }
ul.icon li a { padding: 10px 0 15px 0; }

ul.flip li .box h3 { margin-bottom: 5px; font-size: 20px; }
ul.flip li .box p { font-size: 13px; }
ul.flip li .box .content { padding: 20px 25px; }
ul.flip li .box .content p { padding-top: 5px; }

.area.intro .symbol { width: 80px; height: 80px; }
.area.intro .title-wrap img { width: 70px; }

}

@media only screen and (max-width:1024px) {

.content-wrap { margin-bottom: 80px; }

section .btn { padding: 10px 40px 10px 17px; margin-bottom: 15px; background-position: right 15px top 50%; background-size: 8px; }

ul.icon li h4 { font-size: 16px; }

.sub-wrap.sub-main .title-wrap { margin-bottom: 40px; }

.area.intro .title-wrap img { width: 60px; }

}

@media only screen and (max-width:1023px) {

ul.icon { margin-left: -5px; margin-right: -5px; }
ul.icon li { padding: 5px; }
ul.icon li a { padding: 5px 0 10px 0; }
ul.icon li h4 { font-size: 14px; }

ul.flip li .box { padding-top: 57%; border-radius: 15px; }
ul.flip li .box h3 { font-size: 18px; }

ul.image li:first-child img { border-radius: 15px 0 0 15px; }
ul.image li:last-child img { border-radius: 0 15px 15px 0; }

.area.intro .title-wrap img.right { right: 10%; }
.area.intro .title-wrap img.left { left: 10%; }

}

@media only screen and (max-width:810px) {

section .btn { min-width: 150px !important; font-size: 15px; }

ul.icon li a { box-shadow: 0px 2px 3px rgba(0,0,0,0.07); }
ul.flip li .box p { font-size: 12px; line-height: 1.4; }

}

@media only screen and (max-width:809px) {

.sub-wrap.sub-main .title-wrap h2 { font-size: 22px; } 

ul.flip li .box { padding-top: 60%; }
ul.flip li .box h3 { font-size: 16px; margin-bottom: 3px; }
ul.flip li .box .content { padding: 18px 22px; }
ul.flip li .box .content p { padding-top: 3px; }

}

@media only screen and (max-width:767px) {

.sub-wrap.sub-main .title-wrap { margin-bottom: 20px; }
.sub-wrap.sub-main .title-wrap h2 { font-size: 20px; }
.sub-wrap.sub-main .title-wrap h2 br { display: none; }

.content-wrap.narrow { padding: 0; }

section .btn { padding: 8px 30px 8px 15px; font-size: 15px; background-size: 6px; background-position: right 14px top 50%; min-width: 120px !important; border-radius: 3px; }

ul.flip { margin-left: -15px; margin-right: -15px; }
ul.flip li { width: 100%; padding: 10px 15px; }
ul.flip li .box { padding-top: 55%; border-radius: 10px; }
ul.flip li .box h3 { margin-bottom: 5px; font-size: 17px; }
ul.flip li .box p { margin-bottom: 0; line-height: 1.6; }
ul.flip li .box .content { padding: 15px 18px; }
ul.flip li .box .content p { padding-top: 5px; }
ul.flip li .box .seemore { height: 22px; bottom: 17px; right: 17px; display: block; }
ul.flip li:nth-child(6) { display: none; }

ul.icon { margin-left: 0; margin-right: -4px; }
ul.icon li { width: 25%; padding: 0; margin-left: -1px; margin-bottom: -1px; }
ul.icon li a { padding: 10px 0; box-shadow: 0px 0px 0px rgba(0,0,0,0.07); border-radius: 0; }
ul.icon li a:hover { position: relative; z-index: 2; }
ul.icon li:nth-child(1) a { border-radius: 10px 0 0 0; }
ul.icon li:nth-child(4) a { border-radius: 0 10px 0 0; }
ul.icon li:nth-child(5) a { border-radius: 0 0 0 10px; }
ul.icon li:nth-child(8) a { border-radius: 0 0 10px 0; }
ul.icon li h4 { font-size: 13px; }
ul.icon li .img { padding-top: 70%; }

ul.image li { width: 50%; }
ul.image li:first-child img { border-radius: 10px 0 0 10px; }
ul.image li:nth-child(2) img { border-radius: 0 10px 10px 0; }
ul.image li:last-child img { border-radius: 0 10px 10px 0; display: none; }

.area.intro .symbol { display: none; }
.area.intro .title-wrap { padding: 0 30px; }
.area.intro .title-wrap img { width: 30px; top: 25px; }
.area.intro .title-wrap img.right { right: 5px; }
.area.intro .title-wrap img.left { left: 5px; }

.area.business .content-wrap { border-radius: 10px; box-shadow: 0px 3px 3px rgba(0,0,0,0.07); }

}