@charset "utf-8";
@import url("common.css");

[class^="main0"] .btn_type01 {min-width:118px;}

strong {font-weight:normal;}
.btn_shorcut {min-width:53px; min-height:20px; display:inline-block; position:relative; z-index:10;}
.btn_shorcut:after {content:""; width:20px; height:20px; border-radius:100px; background:#fff; position:absolute; right:0; bottom:0; z-index:10;}
.btn_shorcut:before {content:""; width:calc(100% - 8px); height:5px; position:absolute; left:0; bottom:8px; border-bottom:1px solid #000; background:url('../imgs/bg/bg_btn.png') no-repeat right bottom; background-size:5px; z-index:100;}

.vis_main {width:100%; overflow:inherit; position:fixed; left:0; right:0; top:0; margin:0; z-index:-1; background:#e1dde0;}
.vis_main:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.2); z-index:100;}
.vis_main .motion {width:100%; height:100%; position:relative; left:0; top:0; margin:0; z-index:10;}
.vis_main .motion span {position:absolute; z-index:10;}
.vis_main .motion span img {width:100%;}
.vis_main .motion span:nth-of-type(1) {width:46%; left:0; top:78px; opacity:0; animation:motion01 1.5s forwards;}
.vis_main .motion span:nth-of-type(2) {width:73%; right:0; top:97px; opacity:0; animation:motion02 2s .5s forwards;}
.vis_main .motion span:nth-of-type(3) {width:90%; left:0; bottom:43px; opacity:0; animation:motion03 2.5s 1s forwards;}
.vis_main .motion.on span:nth-of-type(1) {left:0; top:78px; transition:1s .5s; opacity:1;}
.vis_main .motion.on span:nth-of-type(2) {right:0; top:97px; opacity:0; transition:1s .8s; opacity:1;}
.vis_main .motion.on span:nth-of-type(3) {left:0; bottom:43px; opacity:0; transition:1s 1.2s; opacity:1;}
@keyframes motion01 {
  from {
    opacity:0;
	transform:translateX(0);
	transform:scale(10);
  }
  to {
    opacity:1;
	transform:translateX(0);
	transform:scale(1);
  }
}

@keyframes motion02 {
	from {		
		transform:translateX(0);
		transform:scale(10);
	}
	to {		
		transform:translateX(0);
		transform:scale(1);
	}
	0%   {opacity:0;}
    25%  {opacity:0.2;}
    50%  {opacity:0.4;}
    75%  {opacity:0.6;}
    100% {opacity:1;}
}

@keyframes motion03 {
	from {
		transform:translateX(0);
		transform:scale(7);
	}
	to {
		transform:translateX(0);
		transform:scale(1);
	}
	0%   {opacity:0;}
    25%  {opacity:0.1;}
    50%  {opacity:0.2;}
    75%  {opacity:0.5;}
    100% {opacity:1;}
}
.vis_main a {height:32px; display:inline-block; color:#fff; line-height:34px; padding:0 20px; margin:59px 0 0; border:1px solid #fff;}
.vis_main > div {position:absolute; left:50%; top:50%; z-index:1000; margin:-94px 0 0 -70px;}
.vis_main > div:nth-of-type(2) {opacity:0; animation:text01 1.5s 2s forwards;}
@keyframes text01 {
	from {				
		opacity:0;
		transform:translateX(50px);
	}
	to {		
		opacity:1;
		transform:translateX(0);
	}
}

.vis_main > div p {font-size:1.63rem; color:#fff; font-family:'NotokrR'; margin-top:18px; opacity:0; animation:text02 1.5s 3s forwards;}
@keyframes text02 {
	from {				
		opacity:0;
		transform:translateX(-50px);
	}
	to {		
		opacity:1;
		transform:translateX(0);
	}
}
.vis_main > div > img {width:107px;}
.vis_main > button.scroll {display:inline-block; font-size:.9rem; font-family:'MontserratSB'; color:#000; position:absolute; left:50%; bottom:15px; padding:0 0 52px; margin-left:-20px; z-index:1000;}
.vis_main > div > a {opacity:0; animation:btnMotion 1.5s 3s forwards;}
@keyframes btnMotion {
	from {				
		opacity:0;
	}
	to {		
		opacity:1;
	}
}
.vis_main > button.scroll:after {content:""; width:8px; height:45px; border-left:1px solid #000; position:absolute; left:50%; bottom:0; background:url('../imgs/bg/bg_scroll.png') no-repeat right bottom; background-size:8px;}

.main_con {width:100%; padding:50px 0 173px; margin:640px 0 0; text-align:center; background:#fff; position:relative; z-index:100;}
.main_con > div {margin:0 auto; box-sizing:border-box;}
.main_con > div ~ div {margin-top:50px;}
.main_con h2 {font-size:1.27rem; font-family:'MontserratB'; color:#000;}
.main_con h2 + p {margin-top:15px;}

.main01, .main02 > div:nth-of-type(3) {overflow:hidden; padding:0 15px;}
.main01 > div {width:100%; margin-top:28px; padding:0; box-sizing:border-box; text-align:left; position:relative;}
.main01 > div + div {margin-top:20px;}
.main01 > div > img {width:100%;}
.main01 > div div {position:absolute; left:25px; top:50%; margin-top:-50px;}
.main01 > div strong {font-size:1.18rem; font-family:'MontserratSB'; color:#000;}
.main01 > div span {display:block; font-family:'MontserratM'; margin:10px 0 16px;}

.main02 {width:100%; position:relative; overflow:hidden;}
.main02 > span {font-size:3.27rem; font-family:'MontserratSB'; color:#e9e9e9; position:absolute; left:50%; top:73px; margin-left:-148px; z-index:1; opacity:0;}
.main02.on > span {transition:1s; opacity:1;}
.main02 .motion01, .main02 .motion02 {position:relative; margin-top:65px; z-index:100;}
.main02 .motion01 {width:100%; padding:0 13px; box-sizing:border-box;}
.main02 .motion01 span {width:17.5%; opacity:0; display:inline-block;}
.main02 .motion01 span + span {margin-left:-4px;}
.main02 .motion01 span img, .main02 .motion02 img {width:100%;}
.main02 .motion01 span:nth-of-type(3) {width:26%; padding:0 0 2px; position:relative;}
.main02 .motion01 span:nth-of-type(3) i {position:absolute; left:0; bottom:0; z-index:-1; opacity:0;}
.main02.on .motion01 span:nth-of-type(3) {transition:1s 1s; opacity:1;}
.main02.on .motion01 span:nth-of-type(3) i {transition:1s 1.5s; opacity:1;}
.main02 .motion01 span:nth-of-type(1) {transform:translateX(-50px);}
.main02 .motion01 span:nth-of-type(2) {transform:translateX(-50px);}
.main02 .motion01 span:nth-of-type(4) {transform:translateX(50px);}
.main02 .motion01 span:nth-of-type(5) {transform:translateX(50px);}
.main02.on .motion01 span:nth-of-type(1) {transition:1s 2s; opacity:1; transform:translateX(0);}
.main02.on .motion01 span:nth-of-type(2) {transition:1s 1.5s; opacity:1; transform:translateX(0);}
.main02.on .motion01 span:nth-of-type(4) {transition:1s 1.5s; opacity:1; transform:translateX(0);}
.main02.on .motion01 span:nth-of-type(5) {transition:1s 2s; opacity:1; transform:translateX(0);}

.main02 .motion02 {width:305px; margin:25px auto 0; padding-top:30px; box-sizing:border-box; position:relative;}
.main02 .motion02 > span {width:195px; display:block; opacity:0; margin:0 auto;}
.main02 .motion02 > span:nth-of-type(1) {position:absolute; left:50%; top:0; margin-left:-98px; z-index:100;}
.main02 .motion02 > span:nth-of-type(3) {transform:translateY(-50px);}
.main02 .motion02 > span:nth-of-type(5) {margin-top:-2px; transform:translateY(-50px);}
.main02 .motion02 > span:nth-of-type(7) {margin-top:-5px; transform:translateY(-50px);}
.main02 .motion02 > span.txt {position:absolute; text-align:left; margin:0; line-height:1.45rem; z-index:100;}
.main02 .motion02 > span.txt:after {content:""; width:77px; height:1px; background:#000; position:absolute; right:0; top:50%;}
.main02 .motion02 > span.txt:before {content:""; width:6.5px; height:6.5px; border:2px solid rgba(0,0,0,.6); border-radius:100px; box-sizing:border-box; position:absolute; top:50%; right:-6px; margin-top:-3px;}
.main02 .motion02 > span:nth-of-type(2) {width:135px; left:0; top:35px; transform:translateX(-50px);}
.main02 .motion02 > span:nth-of-type(4) {width:40px; right:-10px; top:75px; padding-left:80px; transform:translateX(50px);}
.main02 .motion02 > span:nth-of-type(4):after {width:70px; right:auto; left:0;}
.main02 .motion02 > span:nth-of-type(4):before {right:auto; left:-6px;}
.main02 .motion02 > span:nth-of-type(6) {width:105px; left:0; top:100px; transform:translateX(-50px);}
.main02 .motion02 > span:nth-of-type(6):after {width:70px;}
.main02 .btn_type01 {margin-top:28px; font-size:1rem;}

.main02.on .motion02 > span:nth-of-type(3) {transition:1s 2.5s; opacity:1; transform:translateY(0);}
.main02.on .motion02 > span:nth-of-type(5) {transition:1s 2.8s; opacity:1; transform:translateY(0);}
.main02.on .motion02 > span:nth-of-type(7) {transition:1s 3.2s; opacity:1; transform:translateY(0);}
.main02.on .motion02 > span:nth-of-type(1) {transition:1s 3.5s; opacity:1;}
.main02.on .motion02 > span:nth-of-type(2) {transition:1s 3.8s; opacity:1; transform:translateX(0);}
.main02.on .motion02 > span:nth-of-type(4) {transition:1s 4.2s; opacity:1; transform:translateX(0);}
.main02.on .motion02 > span:nth-of-type(6) {transition:1s 4.5s; opacity:1; transform:translateX(0);}

.main02 > div:nth-of-type(3) {margin-top:60px;}
.main02 > div:nth-of-type(3) > div {width:100%; box-sizing:border-box; text-align:left; color:#fff; position:relative;}
.main02 > div:nth-of-type(3) > div > img {width:100%;}
.main02 > div:nth-of-type(3) > div + div {margin-top:20px;}
.main02 > div:nth-of-type(3) > div div {position:absolute; left:25px; top:50%; margin-top:-42px;}
.main02 > div:nth-of-type(3) > div strong {font-size:1.18rem; font-family:'MontserratM'; line-height:1.636rem;}
.main02 > div:nth-of-type(3) > div span {display:block; font-family:'MontserratM'; line-height:1.636rem; margin:15px 0 0;}

.main03 .highlight {width:100%; box-sizing:border-box; position:relative; margin-top:30px; padding:0 15px;}
.main03 .btn_type01 {font-size:1rem; margin-top:30px;}
.highlight div {width:100%; height:100%;}
.highlight div.bg01 {background:url('../imgs/main/hightlights01.jpg') no-repeat center center; background-size:100%; transition:.5s;}
.highlight div.bg02 {background:url('../imgs/main/hightlights02.jpg') no-repeat center center; background-size:100%; transition:.5s;}
.highlight div.bg03 {background:url('../imgs/main/hightlights03.jpg') no-repeat center center; background-size:100%; transition:.5s;}
.highlight div img {width:100%;}
.highlight ul {width:100%; position:absolute; left:0; top:50%; margin-top:-65px;}
.highlight ul li {position:relative; font-size:1.27rem; font-family:'NotokrM'; color:#fff; line-height:2.5rem; text-align:left; text-indent:-35px; padding:0 0 0 70px; transition:1s; opacity:.6;}
.highlight ul li.on {color:#fff; transition:1s; opacity:1;}
.highlight ul li + li {margin-top:25px;}
.highlight ul li + li:after {content:""; width:1px; height:60px; background:rgba(255,255,255,.5); position:absolute; left:0; top:50%; margin-top:-30px;}
.highlight ul li i {margin-right:20px;}
.highlight ul li.on span {border-bottom:1px solid #fff;}

.main04 {overflow:hidden;}
.main04 > div {width:100%; position:relative; margin-top:30px;}
.main04 > div > div {position:absolute; z-index:99;}
.main04 > div > div > img, .main04 img {width:100%;}
.main04 > div > p {position:absolute; left:15px; top:-7px;}
.main04 > div > p span {display:block; text-align:left; font-family:'MontserratSB'; color:#000; opacity:0; transform:translateX(-50px);}
.main04 > div > div {width:250px; opacity:0;}
.main04 > div > div:nth-of-type(1) {left:calc(50% - 250px); top:42px; transform:translateX(-50px);}
.main04 > div > div:nth-of-type(2) {right:calc(50% - 250px); bottom:0; transform:translateX(50px);}
.main04 > div > div:nth-of-type(2) span {position:absolute; opacity:0;}
.main04 > div > div:nth-of-type(2) span:nth-of-type(1) {left:10px; bottom:0;}
.main04 > div > div:nth-of-type(2) span:nth-of-type(1) img {width:53px;}
.main04 > div > div:nth-of-type(2) span:nth-of-type(2) {display:block; width:90px; height:75px; left:50px; top:-65px; transform:translateX(50px);}
.main04 > div > span {width:91px; display:block; margin:0 auto; position:relative; z-index:100; opacity:0;}
.main04 .btn_shorcut {color:#000; display:inline-block; margin:20px auto 0; padding:0 40px 15px 0; opacity:0; transform:translateX(-50px);}
.main04 .btn_shorcut:after {background:#f2f2f2;}

.main04.on > div > span {transition:2s; opacity:1;}
.main04.on > div > div:nth-of-type(1) {transition:1s 1s; opacity:1; transform:translateX(0);}
.main04.on > div > div:nth-of-type(2) {transition:1s 1.5s; opacity:1; transform:translateX(0);}
.main04.on > div > p span:nth-of-type(1) {transition:1s 1.5s; opacity:1; transform:translateX(0);}
.main04.on > div > p span:nth-of-type(2) {transition:1s 1.8s; opacity:1; transform:translateX(0);}
.main04.on > div > p span:nth-of-type(3) {transition:1s 2.1s; opacity:1; transform:translateX(0);}
.main04.on > div > div:nth-of-type(2) span:nth-of-type(1) {transition:1s 2.1s; opacity:1;}
.main04.on > div > div:nth-of-type(2) span:nth-of-type(2) {transition:1s 2.1s; opacity:1; transform:translateX(0);}
.main04.on .btn_shorcut {transition:1s 2.3s; opacity:1; transform:translateX(0);}

.main05 > ul {width:100%; overflow:hidden; margin-top:30px; padding:0 15px; box-sizing:border-box; text-align:left;}
.main05 > ul li {width:calc((100% - 20px) / 3); display:inline-block;}
.main05 > ul li img {width:100%;}
.main05 > ul li + li {margin-left:6px;}
.main05 > ul li:nth-of-type(3n + 1) {margin-left:0;}
.main05 > ul li:nth-of-type(3n) ~ li {margin-top:24px;}

.fr_brc01 {margin-top:15px;}

.map > button:nth-of-type(1) {left:1%; top:16%;}
.map > button:nth-of-type(2) {left:13%; top:35%;}
.map > button:nth-of-type(3) {left:43.43%; top:25%;}
.map > button:nth-of-type(4) {right:17%; top:23.5%;}
.map > button:nth-of-type(5) {right:9%; top:31%;}
.map > button:nth-of-type(6) {right:3%; top:42%; padding:15px 0 0;}
.map > button:nth-of-type(1):after, .map > button:nth-of-type(4):after, .map > button:nth-of-type(6):after {border:3px solid #d0112b;}
.map > button:nth-of-type(5):after {border:3px solid #ef7622;}
.map > button:nth-of-type(6):after {bottom:auto; top:0;}