@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');

body { overflow:hidden;}
#contents {position:relative; opacity:0; filter: alpha(opacity=0;); width:100%; zoom:1;}
#contents:after {clear:both;content:"";display:block;}
.mainCon { position:relative;}
.section { position:relative; height:100vh; z-index:1;}
#section0 { }
.mainNav, .mainBg { background:#000;}
.mainNav:after, .mainBg:after {content:"";display:block;clear:both;}
.mainBg li {position:relative; float:left; width:50%; height:80px;}
.mainNav li { position:relative; float:left; width:50%; height:calc(50vh - 40px);}
.mainNav li a { display:block; }
.mainNav li span { color:#fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.mainNav .bg01, .mainNav .bg02, .mainNav .bg03 { position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important;}
.mainBg .bg01, .mainBg .bg02, .mainBg .bg03 { position:absolute; width:100%; height:100%; left:0; top:0; background-repeat:no-repeat !important; background-position:center top !important; background-size:cover !important;}
.mainNav .title { position:absolute; width:70%; left:15%; z-index:3; text-align:center;}
.mainNav .mainNav01 .title, .mainNav .mainNav03 .title { text-align:center;}
.mainNav .mainNav01 .title, .mainNav .mainNav02 .title { bottom:55%;}
.mainNav .mainNav03 .title, .mainNav .mainNav04 .title { top:25%;}

.mainNav .mainNav01:hover .title, .mainNav .mainNav02:hover .title { bottom:50%;}
.mainNav .mainNav03:hover .title, .mainNav .mainNav04:hover .title { top:35%;}

.mainNav .title01 {font-family: 'Alex Brush', cursive; font-size:12em; letter-spacing:-1px; line-height:1em;}
.mainNav .title01 > span {position:relative; display:inline-block; -webkit-transition: none; -moz-transition: none; -ms-transition:none; -o-transition: none; transition: none;}
.mainNav .title01 span span { position:absolute; display:block; width:4px; height:4px; left:50%; top:-0.2em; margin-left:-4px; border-radius:50%; background:#e4cc98;  }
.mainNav .title02 { font-size:1.1em; line-height:1.6em; letter-spacing:0.01em; font-weight:200;}
.mainNav .title02 span {font-family: 'Droid Serif', serif; color:#e4cc98; font-style:italic; }
.mainNav .title03 { position:absolute; width:100%; bottom:0; font-family: 'Alex Brush', cursive; opacity:0; filter: alpha(opacity=0;);  font-weight:700; text-align:center;}
.mainNav .title04 { position:absolute; bottom:0.3em; font-family: 'Flamenco', cursive; font-size:5em; font-weight:300; line-height:1em;}

.mainNav .mainNav01 .title04, .mainNav .mainNav03 .title04 { left:28%; bottom:-50%;}
.mainNav .mainNav02 .title04, .mainNav .mainNav04 .title04 {  left:28%; bottom:-50%;}

.mainNav .title > span { display:block;}
.mainNav .bg01, .mainBg .bg01 { z-index:1;}
.mainNav .bg02, .mainBg .bg02 {opacity:0; filter: alpha(opacity=0;); z-index:2;}
.mainNav .bg03, .mainBg .bg03 {opacity:0; filter: alpha(opacity=0;); z-index:3;}
.mainNav a.on .title { text-align:center;}
.mainNav a.on .title01 { font-size:10em;}
.mainNav a.on .title01 span span { opacity:0; filter: alpha(opacity=0;);  }
.mainNav a.on .title03 { font-size:18em; line-height:1.05em; opacity:0.2;  filter: alpha(opacity=20;); }
.mainNav a.on .title04 { opacity:1; filter: alpha(opacity=100;); }
.mainNav a.on .bg02, .mainBg li.on .bg02 {opacity:1; filter: alpha(opacity=100;); }
.mainNav a.off .bg01, .mainBg li.off .bg01 { opacity:0; filter: alpha(opacity=0;); }
.mainNav a.off .bg03, .mainBg li.off .bg03 { opacity:0.7; filter: alpha(opacity=70;);}
.mainNav .mainNav01 .bg01, .mainBg li.mainNav01 .bg01 { background:url(/web/img/index/main_pic_1.jpg);}
.mainNav .mainNav02 .bg01, .mainBg li.mainNav02 .bg01 { background:url(/web/img/index/main_pic_2.jpg);}
.mainNav .mainNav03 .bg01 { background:url(../images/main/mainNav03.jpg);}
.mainNav .mainNav04 .bg01 { background:url(../images/main/mainNav04.jpg);}
.mainNav .mainNav01 .bg02, .mainBg li.mainNav01 .bg02 { background:url(/web/img/index/main_Gpic_1.jpg);}
.mainNav .mainNav02 .bg02, .mainBg li.mainNav02 .bg02 { background:url(/web/img/index/main_Gpic_2.jpg);}
.mainNav .mainNav03 .bg02 { background:url(../images/main/mainNav03_on.jpg);}
.mainNav .mainNav04 .bg02 { background:url(../images/main/mainNav04_on.jpg);}
.mainNav .mainNav01 .bg03, .mainBg li.mainNav01 .bg03 { background:url(/web/img/index/main_Bpic_1.jpg);}
.mainNav .mainNav02 .bg03, .mainBg li.mainNav02 .bg03 { background:url(/web/img/index/main_Bpic_2.jpg);}
.mainNav .mainNav03 .bg03 { background:url(../images/main/mainNav03_gray.jpg);}
.mainNav .mainNav04 .bg03 { background:url(../images/main/mainNav04_gray.jpg);}

.mainLink { position:fixed; right:20px; top:50%; margin-top:-140px; z-index:10; }
.mainLink li { padding:14px 0; }
.mainLink li a { display:inline-block; width:28px; height:28px; border-radius:50%; font-family: 'Josefin Sans', sans-serif; color:#fff; font-size:1.2em; line-height:26px; text-align:center; font-weight:700; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.mainLink li.active a, .mainLink li a:hover, .mainLink li a:focus { background:#000;}

.lSSlideOuter  { position:relative;  z-index:1;}
.lSSlideWrapper { z-index:1;}
.lightslider { height:100vh !important; padding-bottom:0 !important;}
.lSAction { position:absolute; width:120px; right:80px; bottom:80px; z-index:2;}
.lSAction > a { position:absolute; display:inline-block; width:40px; height:40px; top:0; margin:0; font-size:3em; line-height:40px; color:#fff; text-align:center; opacity:1; filter: alpha(opacity=100;); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index:2;}
.lSAction > a.lSPrev { left:10px;}
.lSAction > a.lSPrev:hover { left:0px;}
.lSAction > a.lSNext {right:10px;}
.lSAction > a.lSNext:hover { right:0px;}
.main_typo { position:absolute; width:40%; left:30%; top:50%; text-align:center; color:#fff; z-index:2; }
.main_typo dt {}
.main_typo dt a {font-family: 'Josefin Sans', sans-serif; font-size:1vw; font-weight:700; line-height:0.78em; margin:-0.7em 0 0.15em; opacity:0; filter: alpha(opacity=0;); display:inline-block; color:#fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.main_typo dt a:hover, .main_typo dt a:focus { transform: rotateY(360deg); -ms-transform:rotateY(360deg); -webkit-transform:rotateY(360deg);}
.main_typo dd {opacity:0; filter: alpha(opacity=0;);}
.main_typo dd p {font-family: 'Josefin Sans', sans-serif; font-size:3.4em; font-weight: 700; letter-spacing:0.12em; line-height:1em; margin-bottom:0.3em;}
.main_typo dd div {font-family: 'Droid Serif', serif; font-size:1.1em; letter-spacing:0.02em; line-height:1.6em;  font-style:italic; }

.count { position:absolute; display:block; width:60px; right:200px; bottom:40px; text-align:center; font-family: 'Playfair Display', serif; font-size:1.5em; line-height:1.5em; color:#fff;  -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);z-index:5;}
.count .current { position:absolute; right:35px; top:-10px;}
.count .count_line {}
.count .total { position:absolute; left:35px; bottom:-5px;}

.main_scroll { position:absolute; display:block; width:110px; left:50%; bottom:-100px; margin-left:-55px;  opacity:0; filter: alpha(opacity=0;); z-index:3;}
.main_scroll span { display:block; width:1px; height:36px; background:#fff; margin:25px auto 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.main_scroll:hover span, .main_scroll:focus span { height:24px;}

.active .main_typo dt a {opacity:1; filter: alpha(opacity=100;); font-size:16vw; transition: all 0.5s ease 0.6s;}
.active .main_typo dd {opacity:1; filter: alpha(opacity=100;); transition: all 0.5s ease 0.6s;}
.active .main_scroll { opacity:1; filter: alpha(opacity=100;); bottom:0; transition: all 0.2s ease 1.3s; }

.mainBottom { position:fixed; height:40px; left:0; bottom:-40px; z-index:10;}

@media  (max-width: 1280px){

.section, .lightslider { height:70vw !important;}
}
@media  (max-width: 560px){
}

#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;max-width:970px;height:0}
#hd_pop h2, .sound_only {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}