/*서브-상단비주얼 */
#svisual{ width:100%; min-width:1200px; height:150px; background:url(../img/main/s_top01.jpg) no-repeat center 0px; margin:0px auto; position:relative;}
#svisual.a{/*background:url(../img/sub/s_top01.jpg) no-repeat center top;*/background: #163161;}
#svisual.b{/*background:url(../img/sub/s_top02.jpg) no-repeat center bottom;*/    background: #163161;}
#svisual.c{/*background:url(../img/sub/s_top03.jpg) no-repeat center bottom;*/    background: #163161;}
#svisual.d{/*background:url(../img/sub/s_top04.jpg) no-repeat center bottom; */   background: #163161;}
#svisual.e{/*background:url(../img/sub/s_top05.jpg) no-repeat center bottom; */   background: #163161;}
#svisual .s_text{color:#fff; text-align:center; padding-top:100px;}
#svisual .s_text h3{font-size:2.7em; ;display:inline-block; font-weight:700; margin-bottom:8px; z-index:2; position:relative;}
#svisual .s_text span{margin-left:10px; font-size:1.35em; font-family:Tahoma, Geneva, sans-serif; color:rgba(255,255,255,0.5); font-weight:300; line-height:1.5em; letter-spacing:0.2px; }
@media (max-width:1200px) {
#svisual { min-width:100%; height:160px; background-position:center top; background-size:cover; }
#svisual .s_text {    padding-top: 50px;}
}


#service01  { padding:50px 0; /*background:linear-gradient( to bottom, #163161 0%,   #163161b8 50%, #163161 100%),url(../img/sub/servicebg.jpg) no-repeat center center;  background-color: #163161; */}
#service01  .flex-0 {display: flex;    max-width: 1400px;    margin: 0 auto;    padding-top: 0px;flex-direction: row}
#service01  .flex-2 {width: 20%;    padding: 7.5px;     padding-top: 150px;}
#service01  .flex-3 {width: 20%;    padding: 7.5px;     padding-top: 300px;}
#service01  .flex-1 {width: 60%;    padding:0 30px;}
#service01  .flex-4 {display: none}
#service01  .slogan {position: relative;  padding: 50px 10px;;   color: #163161;     margin: 0 auto; text-align: left}
#service01  .slogan h2{     font-size: 4.5em;    font-weight: bold;line-height: 1em; }
#service01   .slogan h2 span{   color: rgba(255,255,255,1.00); /* -webkit-text-stroke: 1px white;*/}
#service01 .slogan h4{ font-size: 1.5em;font-weight: 400;line-height: 1.2em}
#service01 .slogan h3{ font-size: 2.5em;font-weight: 600;line-height: 1.2em}
#service01  .slogan p:first-child{padding-top: 50px}
#service01  .slogan p{ font-size: 1.15em;line-height: 2em;padding-top: 20px;    letter-spacing: -0.5px;}
@media (max-width: 950px) {
	#service01 .slogan { text-align: left}
	#service01  .slogan p{ padding-top: 0px}
	#service01 .slogan h2{     font-size: 3em;    }
	#service01 .slogan h4{ font-size: 1.2em;line-height: 1.5em}
	#service01 .slogan h3{ font-size: 1.8em;line-height: 1.2em}
	#service01  .slogan p{ font-size: 1em;line-height: 2em;}
}



.page {    height:100vh;    border:10px solid red;    box-sizing:border-box}
.page-2 {    height:150vh;}
.page-3 {    height:150vh;}
.page-4 {    height:80vh;}
.page-5 {    height:180vh;}
.page-indicator {    position:fixed;    top:50%;    right:20px;    transform:translateY(-50%);    padding:10px;    transition:transform 0.3s;}
.page-indicator > ul > li {  padding:10px 0;}
.page-indicator > ul > li.active {    background-color:#fff;}
.page-indicator > ul > li.active a {    color:#000!important; padding: 0 5px;}
html[data-current-page-index="0"] .page-indicator {    transform:translateY(0);}

#service01 .list {	position: relative;	margin: 0 auto;	padding: 1em 0 4em;	max-width: 1500px;	list-style: none;	text-align: center;   }
#service01 .list figure {	position: relative;	float: left;	overflow: hidden;	margin: 10px 1%;		width: 100%;
	background: #163161;	text-align: center;	cursor: pointer;}
#service01 .list figure img {	position: relative;	display: block;	min-height: 100%;	max-width: 100%;	opacity: 0.8;}
#service01 .list figure figcaption {	padding: 2em;	color: #fff;	text-transform: uppercase;	font-size: 1.25em;	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;}
#service01 .list figure figcaption::before,#service01 .list figure figcaption::after {	pointer-events: none;}
#service01 .list figure figcaption,#service01 .list figure figcaption > a {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}
#service01 .list figure figcaption > a {	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}
#service01 .list figure h2 {	word-spacing: -0.05em;	font-weight: 300;}
#service01 .list figure h2 span {	font-weight: 800;}
#service01 .list figure h2,#service01 .list figure p {	margin: 0;}
#service01 .list figure p {	letter-spacing: 1px;	font-size: 68.5%;}
#service01 figure.item figcaption::before {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, #16316199 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, #16316199 75%);
	content: '';	opacity: 0;	-webkit-transform: translate3d(0,50%,0);	transform: translate3d(0,50%,0);}
#service01 figure.item h2 {	position: absolute;	top: 90%;	left: 0;	width: 100%;	color: #fff;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);	transform: translate3d(0,-50%,0);}
#service01 figure.item figcaption::before,#service01 figure.item p {	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;}
#service01 figure.item p {	position: absolute;	bottom: 0;	left: 0;	padding: 2em;	width: 100%;	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);	transform: translate3d(0,10px,0);}
#service01 figure.item:hover h2 {	color: #fff;	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);}
#service01 figure.item:hover figcaption::before ,#service01 figure.item:hover p {	opacity: 1;	-webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);}
@media (max-width:1200px) {
	#service01 .list {	width: 95%;}
	#service01 .list figure {	width: 23%;}
	#service01  .flex-0 {display: block}
	#service01  .flex-4 {display: block;width: 100%;    padding: 10px;}
	#service01  .flex-2 {display: none}
	#service01  .flex-3 {display: none}
	#service01  .flex-1 {width: 100%;    padding:0 30px;}
	#svisual .s_text h3 {		padding-top: 50px;}

}
@media (max-width:550px) {
	.list figure {	width: 48%!important;}
	
}


#service02  { padding:50px 0; ;
    max-width: 1400px;
    margin: 0 auto; }
#service02  .slogan {position: relative;  padding: 50px 10px;;   color: #163161;     margin: 0 auto; text-align: left}
#service02  .slogan h2{     font-size: 4.5em;    font-weight: bold;line-height: 1em; }
#service02   .slogan h2 span{   color: rgba(255,255,255,1.00); /* -webkit-text-stroke: 1px white;*/}
#service02 .slogan h4{ font-size: 1.5em;font-weight: 600;line-height: 1.2em}
#service02 .slogan h3{ font-size: 2.5em;font-weight: 800;line-height: 1.2em}
#service02  .slogan p:first-child{padding-top: 50px}
#service02  .slogan p{ font-size: 1.15em;font-weight: 400;line-height: 2em;padding-top: 20px;    letter-spacing: -0.5px;}
@media (max-width: 950px) {
	#service02 .slogan { text-align: left}
	#service02  .slogan p{ padding-top: 0px}
	#service02 .slogan h2{     font-size: 3em;    }
	#service02 .slogan h4{ font-size: 1.2em;line-height: 1.5em}
	#service02 .slogan h3{ font-size: 1.8em;line-height: 1.2em}
	#service02  .slogan p{ font-size: 1em;line-height: 2em;}
}

.section_3 .flex-0 {    flex-direction: row-reverse;}



.section04 {min-height: 50vh;padding: 00px 0 50px 0}
.section04 .wrap { max-width: 1400px; width: 100%; margin: 0 auto}
.section04 .flex-01 {   margin-top: 50px}
.section04 .slogan {   padding: 10px;padding-top: 50px; text-align: center}
.section04 .slogan h2{    text-transform: uppercase;   color: #163161;  font-size: 3em;    font-weight: 900;line-height: 1.25em; }
.section04 .slogan h3{     color: #000;font-size: 1.5em;font-weight: 500;line-height: 1.5em;padding-top: 10px}
.section04  .slogan p{     color: #000;font-size: 1.15em;font-weight: 300;line-height: 2em;padding-top: 40px}
.section04 .sloimg {width: 100%; height: 300px; position: relative;     background-blend-mode: luminosity;
             -webkit-transition: transform .3s ease-out;         -moz-transition: transform .3s ease-out; 
        -ms-transition: transform .3s ease-out;        -o-transition: transform .3s ease-out;         transition: transform .3s ease-out;    }
.section04 .sloimg:hover { -webkit-transform: scale(1.05);        -moz-transform: scale(1.05);        -ms-transform: scale(1.05); /* IE 9 */
        -o-transform: scale(1.05);        transform: scale(1.05);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
    background-color: none;    background-blend-mode: normal;}
.section04 .sloimg.bg01 {width: 100%; height: 300px;background: url(../img/main/mainbg01.jpg) bottom center; background-size: cover;   background-color: #163161;}
.section04 .sloimg.bg02 {width: 100%; height: 300px;background: url(../img/main/mainbg02.jpg) bottom center;    background-color: #163161;}
.section04 .sloimg.bg03 {width: 100%; height: 450px;background: url(../img/main/mainbg03.jpg) bottom center; background-size: cover;   background-color: #163161;}
.section04 .sloimg.bg04 {width: 100%; height: 300px;background: url(../img/main/mainbg04.jpg) center center;    background-color: #163161;}

.section04 .sloimg h2  {position: absolute; color:#fff;text-align: center ; font-weight: 900; font-size: 4em; top:50%;left:50%;transform: translate(-50%,-50%) ; text-transform: uppercase; opacity: 0.5;       transition:  .3s ease-out; mix-blend-mode: overlay;}

.section04 .sloimg:hover h2  {opacity: 1;       transition:  .3s ease-out;mix-blend-mode: normal; }

@media only screen and (max-width: 1200px){
	.section04 {padding: 20px 0;}
	.section04 .wrap {		max-width: 1400px;		width: 100%;		margin: 0 auto;	}
	.section04 .flex-01 {padding: 0;   margin-top: 10px}
	.section04 .slogan {   padding-top: 0px}
	.section04 .slogan h2{     font-size: 1.7em;   padding-top: 20px  }
	.section04 .slogan h3{     font-size: 1.1em;}
	.section04 .slogan h3 br{     display: none}
	.section04 .slogan p br{     display: none}
	.section04  .slogan p{   font-size: 1em; padding-top: 20px}
	.section04 .sloimg {width: 100%; height: 200px!important; }
	.section04 .sloimg h2  {font-size: 2em; }
	.location {padding: 0!important; }
	.location > div {padding: 0!important; }
}

/* 준비중페이지 */
#ready{text-align:center; background:url(../img/common/ready.png) no-repeat 50% 0; margin:80px 0;  
        padding-top:130px; font-size:1.5em; line-height:1.3em; color:#333;}
#ready strong{font-weight:600; color:#32c0eb;}
#ready p{font-size:0.8em; color:#666;}

.ready{ text-align:center;}