@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
/*font-family: 'Noto Sans', sans-serif;*/
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
/*font-family: 'Poiret One', cursive;*/
@import url(https://fonts.googleapis.com/css?family=Halant);
/*font-family: 'Halant', serif;*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,heade,nav,aside,section,article,footer
{ margin:0;  padding:0;}
table {border-collapse:collapse; border-spacing:0;}
input,select { vertical-align:top; padding:0;}
fieldset,img {border:0; vertical-align:top;}
address,caption,cite,code,dfn,var {font-style:normal; font-weight:normal; }
ol,ul {list-style: none; }
caption,th { text-align:left;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight:normal;}
q:before,q:after {content:"";}
a{  text-decoration:none; color:#666; }
em { font-style:normal; }
body { font:normal 15px /1.4 'Halant', sans-serif; color:#fff; overflow-x:hidden;}
.h { position:absolute; top:-99999px;}

/*layout*/
.wrap { position: fixed; width:100%; height: 100%; background: url(../img/bg.jpg) no-repeat center center; background-size: cover; overflow: hidden; }
.wrap h1 { position: absolute; top:40px; left: 60px; }
.wrap h1 img { width: 210px; transition: all 0.5s; }
.wrap .social { position: absolute; top: 30px; right: 40px; }
.social ul li { float: left; width:30px; height: 30px; margin-left: 10px; }
.social ul li a { width: 100%; height: 100%; display: block; }
.social .faceBook { background: url(../img/faceBook.png) no-repeat 0 0px; opacity: 0.6; }
.social .twitter { background: url(../img/twitter.png) no-repeat 0 0px; opacity: 0.6; }
.social .cacao { background: url(../img/cacao.png) no-repeat 0 0px; opacity: 0.6; }
.social .youtube { background: url(../img/youtube.png) no-repeat 0 0px; opacity: 0.6; }
.social .email { background: url(../img/email.png) no-repeat 0 0px; opacity: 0.6; }
.social ul li:hover { background-position: 0 -30px; opacity: 1;}
.mainYuna { position: absolute; top:0; margin-top: -20px; left:53%; width: 810px; transition: all 0.5s; }
.mainTxt { position: absolute; top: 50%; left: 8%; margin-top: -185px; }
.mainTxt ul li:first-child { font:bold 135px/1  'Poiret One'; opacity:0;      text-shadow: 1px 1px #bbb;}
.mainTxt ul li:nth-child(2) {  font:71.5px/1  'Halant'; opacity:0;  margin-left: 10px;     letter-spacing: -0.2px;}
.mainTxt ul li:nth-child(3) {width: 0px; height: 3px; background-color: #E1205A; margin-left: 15px; margin-top: 30px;}
.mainTxt ul li:last-child { font:30px/2  'Halant'; opacity:0; color: #C75252; margin-left: 15px; letter-spacing: -0.3px;}
.button { position: absolute; top: 50%; left: 8%; margin-top: 7%; margin-left: 15px;/*transition: all 0.5s;*/ }
.button li { float: left;  }
.button li a { width: 209px; height: 35px; background-color: rgba(255,255,255,0.2); border: 1px solid #fff; color:#E1205A; text-align: center; display: block; margin-right: 30px;  font:normal 18px /2.1 'Halant', sans-serif; transition: all 0.5s; transition: all 0.5s; }
.button li a:hover { background-color: rgba(255,255,255,0.5); }
.footer { position: absolute; bottom: -100px; left: 0; width:100%; height: 140px; background-color: rgba(213,30,85,0.5); overflow: hidden; transition: all 0.5s;}
.footer:hover { bottom: 0;  background-color: rgba(213,30,85,0.7);}
.footerMap {  float: left; margin-left: 30px; margin-top: 11px;   transition: all 0.5s;}
.footer>div:nth-child(3),.footer>div:nth-child(4) { margin-left:80px;  transition: all 0.5s;}
.footerMap a { color:#F9B2BD; transition: all 0.3s; line-height: 1.5; }
.footerMap a:hover { color :  #fff; }
.footerMap h4 {  margin-bottom: 11px;}
.footer h2 { position: absolute; top:50%; left: 50%; margin-top: -10px; margin-left: -91px; transition:all 0.5s;}
.footer:hover h2 { margin-top:-36px; }
.footer h2 img { width: 75%; }
.footer .copyRight { position: absolute; top:11px; right:30px; }
.footer .address { position: absolute; bottom:10px; right: 30px; text-align: right; font-size:13px; color: #F9B2BD;}

article h3 { font: 43px/1 'Noto Sans', 'sans-serif'; color:#fff; }
article h3 span { opacity: 0.7; /*font: bold 40px/1 'Abel';*/}
article p { font: 22px/1.2 'Noto Sans', 'sans-serif'; color:#fff;}

/*box1*/
section.box1 { width: 1100px; height: 500px;  position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -620px; overflow: hidden; }
.box1 .top { position: absolute; top:0; left: 0; width: 0%; height: 1px; background-color: #000; }
.box1 .right { position: absolute; top:0; right: 0; width: 1px; height: 0%; background-color: #000; }
.box1 .bottom { position: absolute; bottom:0; right: 0; width: 0%; height: 1px; background-color: #000; }
.box1 .left { position: absolute; bottom:0; left: 0; width: 1px; height: 0%; background-color: #000; }
.box1 article { display: none; width: 1100px; height: 500px; background: rgba(0,0,0,0.9); overflow: hidden;}
.box1 article h3 {position: absolute; top: 100px; left: 450px; opacity: 0; }
.box1 article p { position: absolute; top:240px; left: 450px; opacity: 0; }
.box1 article .dmbg { position: absolute; top:0; left: 0; opacity: 0; }
.box1 .shine { position: absolute; top:50%; left:0; margin-top:-560px; margin-left: 0px; /*opacity: 0.5;*/ transition: all 0.5s; animation: ani 1.5s ease-in-out infinite alternate; }
.box1 .dm { position: absolute; top:50%; right:70px; /*margin-top: -110px;*/ width: 230px;  transition: all 0.5s; animation: ani2 1s ease infinite alternate; opacity: 0;}
.box1 a { display: block; }
.box1 a .close1{ position: absolute; top:20px; right: 20px; z-index: 1; }

/*box2*/
section.box2 { width: 100%; height: 430px; position: absolute; top: 50%; left: 0; margin-top: -215px;overflow: hidden;  }
.box2 .top { position: absolute; top:0; left: 0; width: 0%; height: 1px; background-color: rgb(165,26,58); }
.box2 .bottom { position: absolute; bottom:0; right: 0; width: 0%; height: 1px; background-color:  rgb(165,26,58); }
.box2 article { width: 100%; height: 0px;background: rgba(165,26,58,0.9); position: absolute; left:0; top: 50%; margin-top: 0px; overflow: hidden;}
.box2 article h3 {position: absolute; top: 60px; left: 70%;  opacity: 0; }
.box2 article p { position: absolute; top:200px; left: 70%;  opacity: 0; }
.box2 article .kvbg { position: absolute; top:0; left: 0; opacity: 0; }
.box2 .shine { position: absolute; top:50%; right:0; margin-top:-530px; /*opacity: 0.4;*/ transition: all 0.5s; animation: ani 1.5s ease-in-out infinite alternate; }
.box2 .kv { position: absolute; top:120px; left: 45%; /*margin-top: -95px; margin-left: -150px;*/ width: 330px; opacity: 0; animation: ani3 1s ease infinite alternate; opacity: 0; }
.box2 a .close2{ position: absolute; top:20px; right: 20px; }

/*box3*/
section.box3 { width: 450px; height: 100%;  position: absolute; top: 0; left: 50%;margin-left: -300px; overflow: hidden; transform: skewX(155deg);}
.box3 .right { position: absolute; top:0; right: 0; width: 1px; height: 0%; background-color: rgb(248,207,107); }
.box3 .left { position: absolute; bottom:0; left: 0; width: 1px; height: 0%; background-color: rgb(248,207,107); }
.box3 article { display:none; background: rgba(248,207,107,0.9); width: 100%; height: 100%; overflow: hidden;}
.box3 article h3 {position: absolute; top: 180px; left: 60px; transform: skewX(-155deg); opacity: 0; }
.box3 article p { position: absolute; top:320px; left: 115px; transform: skewX(-155deg); opacity: 0;}
.box3 article .lmbg { position: absolute; top: 50%; left: 0; margin-top: -200px; margin-left: -200px; transform:skewX(-155deg); }
.box3 .shine { position: absolute; top:0; left:0; margin-top: -400px; margin-left: -700px; /*opacity: 0.5;*/ transition: all 0.5s; animation: ani 1.5s ease-in-out infinite alternate; transform: skewX(-155deg) rotate(-90deg);  }
.box3 .lm { position: absolute; top:60px; right:60px; width: 320px; transform: skewX(-155deg); opacity: 0; animation: ani3 1s ease infinite alternate; }
.box3 a .close3{ position: absolute; top:20px; right: 20px; transform: skewX(-155deg); }


/*animation*/
@keyframes ani {
	0% { opacity: 0.3; }
	100% { opacity: 0.7;}
}

@keyframes ani2 {
	0% { margin-top: -90px; }
	100% { margin-top: -120px; }

}
@keyframes ani3 {
	0% { margin-top: -30px; }
	100% { margin-top: 0px; }

}

/*media*/
@media screen and (min-width:1400px) and (max-width:1680px){

	.wrap h1 { top:30px; left: 50px; }
	.wrap h1 img { width:200px;  }
	.mainYuna { width: 700px; }

	.mainTxt { left: 5%;}
	.mainTxt ul li:first-child { font: bold 120px/1  'Poiret One';  opacity:0;}
	.mainTxt ul li:nth-child(2) {  font:63.5px/1  'Halant';  opacity:0;}
	.mainTxt ul li:last-child {font:30px/1.8  'Halant'; opacity:0;}

	.button { left: 5%; }
	.button li a { width: 184px; }

	.box2 article .kvbg { margin-left:-100px;}
	.box2 .shine { margin-right: -200px; }

	section.box3 { margin-left: -400px;}

	.footer h2 { margin-left: -35px; }



}

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

	.wrap h1 { top:20px; left: 40px; }
	.wrap h1 img { width:190px; }
	.mainYuna { width: 700px; }

	.mainTxt { left: 3%;}
	.mainTxt ul li:first-child { font: bold 100px/1  'Poiret One';  opacity:0;}
	.mainTxt ul li:nth-child(2) {  font:53px/1  'Halant';  opacity:0;}
	.mainTxt ul li:last-child {font:30px/1.8  'Halant'; opacity:0;}

	.button { left: 3%; }
	.button li a { width: 155px; margin-right: 20px; }

	section.box1 { width: 1050px;margin-left: -530px; }
	.box1 article { width: 1050px; }
	.box1 article h3 { left: 410px;  }
	.box1 article p { left: 410px;  }
	.box1 article .dmbg { margin-left:-20px; }

	.box2 article .kvbg { margin-left:-400px;}
	.box2 .shine { margin-right: -400px; }
	.box2 article h3 { left: 63%;  }
	.box2 article p { left: 63%;  }
	.box2 .kv { left: 30%;  }

	section.box3 { margin-left: -410px;}

	.footer { font-size:13px; line-height: 1.8; }
	.footer h2 { /*margin-left: -35px; */ opacity: 0.2;}
	.footerMap { z-index: 2; }
	.footer>div:nth-child(2) {  margin-left: 10px;}
	.footer>div:nth-child(3),.footer>div:nth-child(4) { margin-left:50px; }
	.footer .address { line-height: 1.4;}
}
@media screen and (max-width: 739px) and (min-width: 320px){
	.wrap h1 { top: 10px; left: 10px; }
	.wrap h1 img { width: 100px; }
	.wrap .social { top: 10px; right: 10px; }
	.social ul li { width: 20px; height: 20px; background-size: cover !important; }
	.mainYuna { width: 350px; margin-top: 0; top: inherit; bottom: 0; left: 45%; }
	.mainTxt { left: 5%; margin-top: -205px; }
	.mainTxt ul li:first-child { font: bold 75px/1 'Poiret One'; }
	.mainTxt ul li:nth-child(2) { font: 40px/1 'Halant'; }
	.mainTxt ul li:nth-child(3) { margin-top: 15px; }
	.mainTxt ul li:last-child { font: 20px/2 'Halant'; }
	.button { top: 65%; margin-left: 5px; }
	article h3 { font: 30px/1 'Noto Sans', 'sans-serif'; }
	section.box1 { width: 100%; left: 0; margin-left: 0; }
	.box1 article { width: 100%; }
	.box1 article .dmbg { width: 100%; top: inherit; bottom: 0; left: inherit; right: 0; }
	.box1 .shine { width: 100%; margin-left: 0; margin-top: 0; }
	.box1 .dm { width: 130px; top: 80%; right: 30px; }
	.box1 article h3 { left: 10px; margin-top: -100px; }
	.box1 article p { left: 10px; margin-top: -130px; }
	.box1 a .close1 { width: 15px; height: 15px; }
	.box2 article .kvbg { left: -50%; margin-left: -350px; }
	.box2 .shine { width: 800px; margin-top: -240px; }
	.box2 .kv { width: 200px; top: 30%; }
	.box2 article h3 { left: inherit; right: 10px; text-align: right; margin-top: 170px; }
	.box2 article p { left: inherit; right: 10px; text-align: right; margin-top: 130px; }
	.box2 a .close2 { width: 15px; height: 15px; }
	.box3 .lm { width: 200px; right: 50%; margin-right: -70px; }
	.box3 article h3 { left: 110px; }
	.box3 article p { left: 170px; }
	.box3 a .close3 { right: 120px; width: 20px; height: 20px; }
	.footer { height: 90px; bottom: -55px; }
	.footer .address { display: none; }
	.footerMap { display: none; }
	.footer h2 { margin-left: -15%; }
	.footer:hover h2 { margin-top: -12px; }
	.footer h2 img { width: 50%; }

}