html,body {
    margin: 0;
    height: 100%;
}

body {
	overflow-x: hidden;
}

img {
    border: 0;
}

.w100 {
    width: 100%;
}

.w95 {
    width: 95%;
}

.w90 {
    width: 90%;
}

.w85 {
    width: 85%;
}

.w80 {
    width: 80%;
}

#wrapper {
    margin: 0px auto;
    padding-bottom: 0;
    background: #000;
	position: relative;
}

.content {
    width: 1280px;
	margin: 60px auto;	
}

#container {
   	width: 3000px;
    margin: 0 auto;
	padding-bottom: 90px;
    position: relative;
	left: 50%;
	margin-left: -1500px;
	background: url(../img/bg-pattern.png) top center repeat;
}

#container::before {
	content: "";
	display: block;
    background: url(../img/main-img.png) top center no-repeat;
	height: 825px;
}

@media screen and (max-width: 1280px) {
	#container {
		width: 1280px;
		min-width: 1280px;
		position: relative;
		left: 0;
		margin-left: 0;
		&::before {
			content: "";
			display: block;
			background: #000 url(../img/main-img.png) top center no-repeat;
			height: 825px;
		}
	}
}



#main_frame {
    width: 1280px;
    margin: -510px auto 0px;
    position: relative;
	right: 0;
}

#main_frame img {
    display: block;
}

#main_frame .sky_web_main {
    background-image: url(../img/bnr-skyper01.png);
    display: block;
    width: 629px;
    height: 325px;
    position: relative;
    float: right;
}

#main_frame .sky_web_main img {
    position: absolute;
    top: 127px;
    left: 17px;
    width: 290px;
}

a:hover.require img {
    opacity: 0.66;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#info {
	width: 1280px;
	margin: 23.4rem auto 5rem;
}

.sky_frame {
    position: relative;
    width: 1280px;
    height: 320px;
    margin: 0px auto;
    background-image: url(./../img/pc_skyper_back.jpg);
	border: 2px solid #ff0000;
}

.sky_text {
    text-align: center;
    padding-top: 90px;
}

.sky_left {
    position: absolute;
    top: 135px;
    left: 50px;
    z-index: 1;
}

.sky_right {
    position: absolute;
    top: 135px;
    right: 50px;
    z-index: 1;
}

.sky_image {
    display: inline-block;
    width: 580px;
    height: 160px;
}

.sky_left:hover img {
    opacity: 0.66;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#explanation {
	width: 1280px;
	margin: 5rem auto;
}

#live_frame {
    width: 1278px;
    border: solid 1px;
    border-color: #b3b3b3;
    padding: 30px 0px 0px 0px;
    margin: 30px 0px;
}

.live_image {
    text-align: center;
    padding: 0px 29px;
    margin: 0px 0px 30px 0px;
}

.live_image img {
    display: block;
}

.live_image_mixed_1 {
    position: relative;
    text-align: center;
    padding: 0px 0px 762px 0px;
    margin: 0px;
}

.live_image_mixed_top_1 {
    width: 1220px;
    position: absolute;
    padding: 0px;
    margin: 0px;
}

.live_image_mixed_top_1 img {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.info_frame {
    text-align: center;
    width: 1280px;
    padding: 0px 0px 0px 0px;
    margin: 30px 0px;
}

.info_image {
    padding: 0px 30px;
    margin: 0px 0px 30px 0px;
}

.info_image img {
    display: block;
}

.info_text {
    text-align: center;
}

area{
  border:none;
  outline:none;
}