.sb_wrap{ overflow:hidden; }
.sb_wrap, .sb_wrap *{ box-sizing:border-box; }
.btnArea{ display:none; }
section > .sub_con{ width:100%; margin:0 auto; }


.sub01_pt_wrap{ margin:0 0 100px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.sub01_pt_wrap:last-child{ margin:0; }
.sub01_pt{ display:-webkit-box; display:-ms-flexbox; display:flex; }

.sub01_pt_wrap.uneven > .sub01_pt.pt_lf{ width:55%; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; }
.sub01_pt_wrap.uneven > .sub01_pt.pt_rt{ width:45%; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }

.sub01_pt_wrap.even > .sub01_pt.pt_lf{ width:45%; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.sub01_pt_wrap.even > .sub01_pt.pt_rt{ width:55%; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; }

.sub01_img{ width:100%; padding-top:56.25%; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; border-radius:6px; opacity:0; box-shadow:0 0 0 0 rgba(0,0,0,0); transition:1s opacity, 1s transform, 1s box-shadow; }
.sub01_img.img_01{ background-image:url(./img/01-01.jpg); }
.sub01_img.img_02{ background-image:url(./img/01-02.jpg); }
.sub01_img.img_03{ background-image:url(./img/01-03.jpg); }
.sub01_img.img_04{ background-image:url(./img/01-04.jpg); }
.sub01_img.img_05{ background-image:url(./img/01-05.jpg); }
.sub01_img.img_06{ background-image:url(./img/01-06.jpg); }
.sub01_img.img_07{ background-image:url(./img/01-07.jpg); }
.sub01_img.img_08{ background-image:url(./img/01-08.jpg); }
.sub01_pt_wrap.uneven .sub01_img{ transform:perspective(2000px) rotateY(-90deg); transform-origin:right center; }
.sub01_pt_wrap.even .sub01_img{ transform:perspective(2000px) rotateY(90deg); transform-origin:left center; }
.sub01_pt_wrap.uneven .sub01_img.act,
.sub01_pt_wrap.even .sub01_img.act{ opacity:1; transform:perspective(2000px) rotateY(0deg); box-shadow:5px 5px 10px 0 rgba(0,0,0,0.3); }

.sub01_txt{ width:100%; word-break:keep-all; overflow:hidden; }
.sub01_txt > .txt_tt{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #ccc; transition:1s opacity, 1s transform; }
.sub01_txt > .txt_tt > h3{ font-family:'score'; font-size:40px; font-weight:500; color:#333; line-height:1.1em; margin-bottom:10px; }
.sub01_txt > .txt_tt > p{ font-size:16px; font-weight:300; color:#666; }

.sub01_txt > .txt_if{ transition:1s opacity, 1s transform; }
.sub01_txt > .txt_if > li{ display:-webkit-box; display:-ms-flexbox; display:flex; margin-bottom:5px; }
.sub01_txt > .txt_if > li:last-child{ margin-bottom:0; }
.sub01_txt > .txt_if > li > h4{ font-size:18px; font-weight:700; color:#333; white-space:nowrap; }
.sub01_txt > .txt_if > li > p{ width:100%; font-size:18px; font-weight:300; color:#666; }

.sub01_txt > a{ position:relative; z-index:1; display:inline-block; margin-top:40px; padding:13px 40px; width:180px; background-color:#fff; border:2px solid #333; border-radius:4px; overflow:hidden; font-size:16px; font-weight:300; color:#333; text-align:center; transition:1s opacity, 1s transform, 0.5s color; }
.sub01_txt > a:hover{ color:#fff; }
.sub01_txt > a > span{ position:relative; z-index:1; }

.sub01_pt_wrap.uneven .sub01_txt > .txt_tt{ opacity:0; transform:translate(-100px, 0); }
.sub01_pt_wrap.uneven .sub01_txt > .txt_if{ opacity:0; transform:translate(-300px, 0); }
.sub01_pt_wrap.uneven .sub01_txt > .txt_if > li{ flex-direction:row; }
.sub01_pt_wrap.uneven .sub01_txt > .txt_if > li > h4{ padding-right:15px; }
.sub01_pt_wrap.uneven .sub01_txt > a{ opacity:0; transform:translate(-500px, 0); }
.sub01_pt_wrap.uneven .sub01_txt > a:before{ content:''; position:absolute; top:-2px; bottom:-2px; left:-2px; right:100%; background-color:#333; transition:0.5s right; }
.sub01_pt_wrap.uneven .sub01_txt > a:hover:before{ right:-2px; }

.sub01_pt_wrap.even .sub01_txt > .txt_tt{ opacity:0; transform:translate(100px, 0); }
.sub01_pt_wrap.even .sub01_txt > .txt_if{ opacity:0; transform:translate(300px, 0); }
.sub01_pt_wrap.even .sub01_txt > .txt_if > li > h4{ order:1; padding-left:15px; }
.sub01_pt_wrap.even .sub01_txt > a{ opacity:0; transform:translate(500px, 0); }
.sub01_pt_wrap.even .sub01_txt > a:before{ content:''; position:absolute; top:-2px; bottom:-2px; left:100%; right:-2px; background-color:#333; transition:0.5s left; }
.sub01_pt_wrap.even .sub01_txt > a:hover:before{ left:-2px; }

.sub01_pt_wrap.uneven .sub01_txt{ padding-left:50px; text-align:left; }
.sub01_pt_wrap.uneven .sub01_txt.act > .txt_tt,
.sub01_pt_wrap.uneven .sub01_txt.act > .txt_if,
.sub01_pt_wrap.uneven .sub01_txt.act > a{ opacity:1; transform:translate(0, 0); }

.sub01_pt_wrap.even .sub01_txt{ padding-right:50px; text-align:right; }
.sub01_pt_wrap.even .sub01_txt.act > .txt_tt,
.sub01_pt_wrap.even .sub01_txt.act > .txt_if,
.sub01_pt_wrap.even .sub01_txt.act > a{ opacity:1; transform:translate(0, 0); }

@media(max-width:900px){
	.sub01_pt_wrap.uneven > .sub01_pt.pt_lf{ width:100%; margin-bottom:40px; }
	.sub01_pt_wrap.uneven > .sub01_pt.pt_rt{ width:100%; }

	.sub01_pt_wrap.even > .sub01_pt.pt_lf{ width:100%; }
	.sub01_pt_wrap.even > .sub01_pt.pt_rt{ width:100%; order:-1; margin-bottom:40px; }

	.sub01_pt_wrap.uneven .sub01_txt{ padding-left:0; text-align:left; }
	.sub01_pt_wrap.even .sub01_txt{ padding-right:0; text-align:left; }

	.sub01_pt_wrap.even .sub01_txt > .txt_tt{ opacity:0; transform:translate(-100px, 0); }
	.sub01_pt_wrap.even .sub01_txt > .txt_if{ opacity:0; transform:translate(-300px, 0); }
	.sub01_pt_wrap.even .sub01_txt > .txt_if > li > h4{ order:0; padding-left:0; padding-right:15px; }
	.sub01_pt_wrap.even .sub01_txt > a{ opacity:0; transform:translate(-500px, 0); }
	.sub01_pt_wrap.even .sub01_txt > a:before{ left:0; right:100%; background-color:#333; transition:0.5s right; }
	.sub01_pt_wrap.even .sub01_txt > a:hover:before{ right:0; }
}

@media(max-width:750px){
	.sub01_txt > .txt_tt > h3{ font-size:30px; }
	.sub01_txt > .txt_tt > p{ font-size:14px; }

	.sub01_txt > .txt_if > li > h4{ font-size:15px; }
	.sub01_txt > .txt_if > li > p{ font-size:15px; }
}