@charset "utf-8";

/* sub layout : sub visual */
.max-sub-visual.about {background-image:url("../image/common/bg_sub_visual1.jpg");}

/* about */
.about .inspiration ul {position:relative; overflow:hidden; margin-top:2.5em;}
.about .inspiration ul li {float:left; width:32.2%; margin-left:1.111em; background:#f8f8f8; padding:1.8em; position:relative; overflow:hidden;}
.about .inspiration ul li:nth-child(3n+1) {margin-left:0;}
.about .inspiration ul li:after {display:block; width:100%; height:auto; font-size:12.222em; font-weight:700; /* font:600 4.167em 'Poppins',sans-serif; */ position:absolute; bottom:-.275em; left:69%; transform:translateX(-50%); color:#f0f0f0;}
.about .inspiration ul li:nth-child(1):after {content:'01';}
.about .inspiration ul li:nth-child(2):after {content:'02';}
.about .inspiration ul li:nth-child(3):after {content:'03';}
.about .inspiration ul li dl {position:absolute; z-index:1; padding-right:1.8em;}
.about .inspiration ul li dl dt {border-bottom:1px solid #ddd; padding-bottom:.7em;}
.about .inspiration ul li dl dd {padding-top:1em; line-height:150%;}
.about .inspiration ul li:nth-child(1),
.about .inspiration ul li:nth-child(2),
.about .inspiration ul li:nth-child(3) {height:17em;}
.about .inspiration ul li dl dd p {padding-bottom:10px;}
.about .inspiration ul li dl dd a.max-lnk {padding:.8em 2.4em 1em 0;}
.about .inspiration ul li dl dd a.max-lnk.more {margin-top:-14px;}

@media screen and (max-width: 1135px) {
	.about .inspiration ul li {width:31.9%;}
}

@media screen and (max-width: 900px) {
	.about .inspiration ul li {width:48%;}
	.about .inspiration ul li:nth-child(3) {margin-left:0; margin-top:1.111em;}
	.about .inspiration ul li:after {left:103%; font-size:9.222em;}
}

@media screen and (max-width: 568px) {
	.about .inspiration ul li {width:100%;}
	.about .inspiration ul li{margin-left:0; margin-top:1.111em;}
	.about .inspiration ul li:after {left:100%; font-size:9.222em;}
}

.about .profile .profile_wp {position:relative; overflow:hidden;}
.about .profile .profile_wp p.img_box {width:25.25%; padding:1em 0; background-image:url("../image/sub/about_logo_bg.jpg"); border:1px solid #eee; float:left; background-size:100%;}
.about .profile .profile_wp p.img_box img {display:block; margin:0 auto; padding:40% 10%; max-width:100%;}
.about .profile .profile_wp .profile_txt {margin-left:8.23%; float:right; width:66.52%;}
.about .profile .profile_wp .profile_txt p {font-weight:bold; padding-bottom:20px;}
.about .profile .profile_wp .profile_txt dl {padding:20px; border-bottom:1px solid #e1e1e1;}
.about .profile .profile_wp .profile_txt dl.bor_top {border-top:1px solid #e1e1e1;}
.about .profile .profile_wp .profile_txt dl dt {font-size:18px; display:inline-block; padding-left:30px; width:50%;}
.about .profile .profile_wp .profile_txt dl dd {font-size:22px; display:inline-block; padding-left:30px;}

.about .office_pic {height:auto;}
.about .office_pic .swiper-wrapper {position:relative;}
.about .office_pic .swiper-wrapper .swiper-slide {float:left;}
.about .office_pic .swiper-wrapper .swiper-slide img {width:100%;}

.about .mission.mobile {display:none;}
.about .mission .txt_box {padding:0 0 2em 25%;}
.about .mission .txt_box p {padding:10px 0; line-height:150%}

@media screen and (max-width: 900px) {
	.about .profile .profile_wp p.img_box {width:30%;}
	.about .profile .profile_wp .profile_txt {width:66%; margin-left:0;}
	.about .profile .profile_wp .profile_txt dl {padding:15px 0;}
	.about .profile .profile_wp .profile_txt dl dt {font-size:1.2em;}
	.about .profile .profile_wp .profile_txt dl dd {font-size:1.2em;}
}

@media screen and (max-width: 568px) {
	.about .inspiration h3 {font-size:1.1em;}
	.about .inspiration h3 .nb {display:none;}
	.about .inspiration h3 .mobile_pd {padding:4px; display:block;}

	.about .profile .profile_wp p.img_box {width:100%; background-image:url("../image/sub/about_logo_bg_mobile.jpg"); padding:3em 0;}
	.about .profile .profile_wp p.img_box img {max-width:100%; padding:0;}
	.about .profile .profile_wp .profile_txt {width:100%; margin-top:2em;}
	.about .profile .profile_wp .profile_txt dl dt {font-size:1em;}
	.about .profile .profile_wp .profile_txt dl dd {font-size:1em;}

	.about .mission {height:auto;}
	.about .mission.pc {display:none;}
	.about .mission.mobile {display:block; overflow-x:hidden;}
	.about .mission h4 {padding:0 1.2em;}
	.about .mission .txt_box {padding:0 0 2em 0%;}
	.about .mission .txt_box p {padding:10px 6% 10px 0;}

	.mission .swiper-pagination-bullet {width:10px; height:10px; background: #e0e0e0 !important;}
	.mission .swiper-pagination-bullet-active {background:#184c80 !important;}
	.mission .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {text-align:center;}
	.mission .swiper-pagination-bullet {font-size:24px; line-height:26px; border-radius:10px;}

}

.about .vision {background:#f8f8f8; overflow:hidden; padding-top:7.778em;}
.about .vision ul {position:relative; margin-top:60px;}
.about .vision ul li {float:left; width:32%; padding-left:2em;}
.about .vision ul li:nth-child(1) {padding-left:0;}
.about .vision ul li span {line-height:140%;}
.about .vision ul li span:before {content:""; width:80px; height:70px; display:block; margin-bottom:30px;}
.about .vision ul li span.ico1:before {background:url("../image/sub/about_ico1.png") left no-repeat;}
.about .vision ul li span.ico2:before {background:url("../image/sub/about_ico2.png") left no-repeat;}
.about .vision ul li span.ico3:before {background:url("../image/sub/about_ico3.png") left no-repeat;}
.about .vision ul li p {margin-top:30px; line-height:150%;}

.about .Value {background:#f8f8f8; overflow:hidden;  padding-top:7.778em;}
.about .Value h3 {line-height:150%;}
.about .Value ul {position:relative; margin-top:60px;}
.about .Value ul li {float:left; width:32%; padding-left:2em;}
.about .Value ul li:nth-child(1) {padding-left:0;}
.about .Value ul li span {line-height:140%;}
.about .Value ul li span:before {content:""; width:80px; height:70px; display:block; margin-bottom:30px;}
.about .Value ul li span.ico4:before {background:url("../image/sub/about_ico4.png") left no-repeat;}
.about .Value ul li span.ico5:before {background:url("../image/sub/about_ico5.png") left no-repeat;}
.about .Value ul li span.ico6:before {background:url("../image/sub/about_ico6.png") left no-repeat;}
.about .Value ul li p {margin-top:30px; line-height:180%;}

.about .clients h3 {line-height:150%; margin-bottom:.5em;}
.about .clients .clients_wp {padding-top:3em; overflow:hidden; position:relative;}
.about .clients .clients_wp p {line-height:150%; float:left; width:20%; margin-top:32px;}
.about .clients .clients_wp ul {position:relative; float:right; width:80%;}
.about .clients .clients_wp ul li {float:left; width:33.333%; margin:10px 0;}
.about .clients .clients_wp ul li img {width:100%;}

@media screen and (max-width: 900px) {
.about .clients .clients_wp:nth-child(1) {border-bottom:1px solid #dbdbdb;}
.about .clients .clients_wp p {width:30%;}
.about .clients .clients_wp ul {width:70%;}
}
@media screen and (max-width: 568px) {
	.about .vision ul li {width:100%; padding-left:0; padding:40px 0; border-bottom:1px solid #dbdbdb;}
	.about .vision ul li:nth-child(1) {padding-top:0;}
	.about .vision ul li:nth-child(3) {border:0}
	.about .vision ul li p {margin-top:14px;}
	.about .vision ul li span:before {margin-bottom:24px;}

	.about .Value ul li {width:100%; padding-left:0; padding:40px 0; border-bottom:1px solid #dbdbdb;}
	.about .Value ul li:nth-child(1) {padding-top:0;}
	.about .Value ul li:nth-child(3) {border:0}
	.about .Value ul li p {margin-top:14px;}
	.about .Value ul li span:before {margin-bottom:24px;}
}

/* history */
#contents.history {padding-top:0 !important;}
.history .history_wp {}
.history .history_wp .tab_cont .img_box {padding-top:4.5em;}
.history .history_wp .tab_cont .img_box img {width:100%;}
.history .history_wp .tab_cont .txt_box {overflow:hidden; position:relative; padding-top:1.8em;}
.history .history_wp .tab_cont .txt_box ul {float:left; width:50%; padding-left:2%;}
.history .history_wp .tab_cont .txt_box ul:nth-child(1) {padding-left:0;}
.history .history_wp .tab_cont .txt_box ul li {line-height:200%;}

.swiper-container {width:100%; height:100%;}
.swiper-pagination {position:inherit; padding-top:4.444em;}
.swiper-pagination-bullet {padding:5px 45px; border-radius:0; width:auto; height:30px; text-align:center; line-height:44px; font-size:40px; font-weight:bold; color:#e0e0e0; opacity:1; background:none;}
.swiper-pagination-bullet-active {color:#333; background:none;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {display:inline-table; vertical-align:middle;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {top:78px; right:78%; background:url("../image/sub/history_next.png") center no-repeat; width:90px; height:120px;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {top:78px; left:78%; background:url("../image/sub/history_prev.png") center no-repeat; width:90px; height:120px;}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {content:'';}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {content:'';}

@media screen and (max-width: 1280px) {
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {right:70%;}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {left:70%;}
	.swiper-pagination-bullet {padding:5px 30px;}
}
@media screen and (max-width: 900px) {
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {display: none;}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {display: none;}
	.swiper-pagination-bullet {font-size:24px; line-height:26px;}
	.history .history_wp .tab_cont .img_box {padding-top:1em;}
	.swiper-pagination {padding-top:2.444em;}
}
@media screen and (max-width: 568px) {
	.swiper-pagination-bullet-active {background:none !important;}
	.swiper-pagination-bullet {padding:5px 5px; font-size:20px;}
}

.history .growth {position:relative; width:100%; height:50.556em; margin:0px auto; overflow:hidden;}
.history .growth video {position:absolute; top:0; left:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1;}
.history .growth .growth_txt {width:100%; padding-top:7.778em;/* position:absolute; top:15%; left:0; margin-left:-590px; */ color:#fff;}
.history .growth .growth_txt h3 {line-height:130%; padding-bottom:.4em;}
.history .growth .growth_txt p {padding-top:1em; line-height:150%;}

.growth_graph {/* width:100%; text-align:right; position:absolute; top:10%; right:1.2em; */position: absolute; top:7.778em; left: 50%; margin-right: -300px;}
.growth_graph img {width:60%;}

.graph_wrap {width:588px; height:auto; padding:34px 30px; background-color:rgba(21,21,21,.9); text-align:center; position:absolute; top:7.778em; left:50%; margin-right:-300px;}
.graph_wrap p {position:absolute; top:30px; left:0; width:100%; height:auto; text-align:center; font-weight:500; font-size:18px; color:#fff;}

.graph_wrap .graph_box {width:100%;}
.graph_wrap .graph_box svg {width:100%; height:auto;}

@media screen and (max-width: 1365px) {
	.graph_wrap {display:none;}
	.growth_graph {display:block;}
}
@media screen and (max-width: 1024px) {
	.history .growth {height:40.556em;}
}
@media screen and (max-width: 900px) {
	.history .growth .growth_txt {padding-top:5.133em;}
	.growth_graph {top:5.133em;}
}
@media screen and (max-width: 768px) {
	.history .growth {height:auto;}
	.growth_graph {position:static; padding:1.2em 1.2em 5.133em; margin-right:0;}
	.growth_graph img {width:60%;}
}
@media screen and (max-width: 568px) {
	.history .growth .growth_txt p .nb {display:inline-block;}
	.growth_graph img {width:100%; max-width:100%;}
}



.history .global h3 {line-height:150%;}
.history .global .img_box {margin-top:4em; position:relative;}
.history .global .img_box picture img {max-width:100%;}
.history .global .img_box .pin_wrap {}
.history .global .img_box .pin_wrap span {display:block; opacity:0; position:absolute;}
.history .global .img_box .pin_wrap span .effect_pin {}
.history .global .img_box .pin_wrap span .effect_line {position:absolute;}

.history .global .img_box .pin_wrap .pin1 {top:233px; right:165px;}
.history .global .img_box .pin_wrap .pin2 {top:243px; left:303px;}
.history .global .img_box .pin_wrap .pin2 .effect_line {width:693px; top:-69px; left:7px; animation-delay:.8s;}
.history .global .img_box .pin_wrap .pin2 .effect_pin {animation-delay:1s;}
.history .global .img_box .pin_wrap .pin3 {top:248px; right:124px;}
.history .global .img_box .pin_wrap .pin3 .effect_line {width:46px; top:15px; left:-34px; animation-delay:1.1s;}
.history .global .img_box .pin_wrap .pin3 .effect_pin {animation-delay:1.2s;}
.history .global .img_box .pin_wrap .pin4 {top:229px; right:226px;}
.history .global .img_box .pin_wrap .pin4 .effect_line {width:60px; top:18px; left:9px; animation-delay:1.3s;}
.history .global .img_box .pin_wrap .pin4 .effect_pin {animation-delay:1.4s;}
.history .global .img_box .pin_wrap .pin5 {top:302px; right:209px;}
.history .global .img_box .pin_wrap .pin5 .effect_line {width:44px; top:-30px; left:9px; animation-delay:1.5s;}
.history .global .img_box .pin_wrap .pin5 .effect_pin {animation-delay:1.6s;}
.history .global .img_box .pin_wrap .pin6 {top:423px; left:384px;}
.history .global .img_box .pin_wrap .pin6 .effect_line {width:606px; top:-174px; left:11px; animation-delay:1.7s;}
.history .global .img_box .pin_wrap .pin6 .effect_pin {animation-delay:1.8s;}
.history .global .img_box .pin_wrap .pin7 {top:296px; right:178px;}
.history .global .img_box .pin_wrap .pin7 .effect_line {width:26px; top:-24px; left:9px; animation-delay:1.9s;}
.history .global .img_box .pin_wrap .pin7 .effect_pin {animation-delay:2s;}
.history .global .img_box .pin_wrap .pin8 {top:374px; right:231px;}
.history .global .img_box .pin_wrap .pin8 .effect_line {width:70px; top:-107px; left:9px; animation-delay:2.1s;}
.history .global .img_box .pin_wrap .pin8 .effect_pin {animation-delay:2.2s;}
.history .global .img_box .pin_wrap .pin9 {top:248px; left:546px;}
.history .global .img_box .pin_wrap .pin9 .effect_line {width:449px; top:-36px; left:9px; animation-delay:2.3s;}
.history .global .img_box .pin_wrap .pin9 .effect_pin {animation-delay:2.4s;}
.history .global .img_box .pin_wrap .pin10 {top:354px; right:248px;}
.history .global .img_box .pin_wrap .pin10 .effect_line {width:84px; top:-83px; left:9px; animation-delay:2.5s;}
.history .global .img_box .pin_wrap .pin10 .effect_pin {animation-delay:2.6s;}
.history .global .img_box .pin_wrap .pin11 {top:353px; right:161px;}
.history .global .img_box .pin_wrap .pin11 .effect_line {width:29px; top:-82px; left:3px; animation-delay:2.7s;}
.history .global .img_box .pin_wrap .pin11 .effect_pin {animation-delay:2.8s;}

.history .global .company {overflow:hidden; position:relative; padding-top:3em;}
.history .global .company p.txt_sm {line-height:150%; float:left; width:20%;}
.history .global .company .company_wp {position:relative; float:right; width:80%;}
.history .global .company.pc {display:block;}
.history .global .company.mobile {display:none;}
.history .global .company .company_wp p {line-height:150%;}
.history .global .company .company_wp ul {padding-top:5em; width:100%;}
.history .global .company .company_wp ul li {float:left; width:49%; margin-left:2%; margin-bottom:2%; overflow:hidden; box-sizing:border-box;}
.history .global .company .company_wp ul li:nth-child(odd) {margin-left:0;}
.history .global .company .company_wp ul li img {width:100%; display:block; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s;}
.history .global .company .company_wp ul li:hover img {-webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2);}

/* technology */
.technology .product {position:relative; overflow:hidden;}
.technology .product .txt_sm {line-height:150%; float:left; width:30%;}
.technology .product .product_wp {line-height:150%; float:right; width:70%; position:relative;}
.technology .product .product_wp .img_box img {width:100%;}
.technology .product .product_wp .txt_box {overflow:hidden;}
.technology .product .product_wp .txt_box .tit {padding:40px 0 20px;}
.technology .product .product_wp .txt_box ul {float:left; width:48%; padding-right:20px;}
.technology .product .product_wp .txt_box ul li {line-height:180%;}

.technology .system {position:relative; overflow:hidden;}
.technology .system .txt_sm {line-height:150%; float:left; width:28%;}
.technology .system .img_box {line-height:150%; float:right; width:72%;}
.technology .system .img_box img {width:100%;}
.technology .system .img_box div {position:relative; overflow:hidden; padding-top:40px;}
.technology .system .img_box div .tit {float:left; width:35%;}
.technology .system .img_box div .cont {float:right; width:65%; line-height:180%;}
.technology .system .img_box h3 {line-height:150%;}

@media screen and (max-width: 1366px) {
	.history .global .img_box .pin_wrap {display:none;}
}
@media screen and (max-width: 900px) {
	.history .history_wp .tabmenu-2 li {height:3em;}
	.history .history_wp .tabmenu-2 li a {padding-left:0;}
}

@media screen and (max-width: 568px) {
	.history .history_wp .tab_cont .txt_box ul {width:100%; padding:0;}
	.history .global .img_box {padding-bottom:4em;}
	.history .global .company.pc {display:none;}
	.history .global .company.mobile {display:block; border-top: 1px solid #dbdbdb;}
	.history .global .company p.txt_sm {width:30%;}
	.history .global .company .company_wp {width:64%; padding-bottom:30px;}
	.swiper-container3 {width:100%; height:100%; padding-top: 30px;}
	.swiper-container3 .swiper-slide {text-align:center; font-size:18px; background:#fff; width:90%; overflow:hidden; /* Center slide text vertically */ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
	.swiper-container3 .swiper-slide img {width:100%;}

	.technology .product .txt_sm {width:100%;}
	.technology .product .txt_sm .nb {display:none;}
	.technology .product .product_wp {width:100%;}
	.technology .product .product_wp .txt_box ul {width:100%;}
	.technology .product .product_wp .img_box {margin-top:3em;}

	.technology .system .txt_sm .nb {display:none;}
	.technology .system .txt_sm {width:100%;}
	.technology .system .img_box {width:100%; border-bottom:1px solid #dbdbdb; margin-top:3em;}
	.technology .system .img_box:nth-child(4) {border-bottom:0;}
	.technology .system .img_box div {padding-top:20px;}
	.technology .system .img_box div .tit {width:100%; margin-bottom:10px;}
	.technology .system .img_box div .cont {width:100%;}
	.technology .system .img_box h3 {text-align:center;}


}

/* csr */
.max-sub-visual.csr{
	background-image: url("../image/common/hd/hd1.png");
	height: 40em;
	display:flex;
	font-weight:normal;
	font-size:1.5em;
	padding:0 12% 0;
}

.max-sub-visual.csr .max_left{display:flex; flex-direction:column; justify-content:center; width: 50%; text-align:left;}
.max-sub-visual.csr .max_right{display:flex; flex-direction:column; justify-content:center; width: 50%; text-align:left; padding-left:5%; font-weight:300; line-height:1.5;}

.max-sub-visual.csr h2{font-size:2em; font-weight:600;margin-bottom:0.5em;}
.max-sub-visual.csr strong{font-weight:500;}
.max-sub-visual.csr span{font-weight:300;}

#contents.csr{padding:0;}
#contents.csr .inner{max-width:100%;}

#contents.csr .transparent{color:transparent;}
#contents.csr .yellow{color:#ffe000;}

#contents.csr .inner .csr_inner_div{height:40em; display:flex; font-weight:400; font-size:2em; background-position:center; background-size:cover; background-repeat:no-repeat; flex-direction:column; justify-content:center; align-content:center;}
#contents.csr .inner #hd2{background-image: url("../image/common/hd/hd2.png")}
#contents.csr .inner #hd3{background-image: url("../image/common/hd/hd3.png"); height:50em;}
#contents.csr .inner #hd4{background-image: url("../image/common/hd/hd4.png")}

#contents.csr .inner #hd2 > div{display:flex; width:100%; justify-content:center;}
#contents.csr .inner #hd2 .hd2_img_div {text-align:center;margin-bottom:50px;}
#contents.csr .inner #hd2 .hd2_img_div img{max-width:100%;}
#contents.csr .inner #hd2 .hd2_txt_div{display:flex; flex-direction:column; align-items:center;font-size:1em; line-height:1.5; color:#fff; font-weight:400;}

#contents.csr .inner #hd3{display:flex; flex-direction:row; align-items:center;}
#contents.csr .inner #hd3 .hd3_left{display:flex; width:50%; flex-direction:column; color:#fff; font-weight:600; padding-left:5%;}
#contents.csr .inner #hd3 .hd3_right{display:flex; width:50%;}

#contents.csr .inner #hd3 .hd3_left .h3_img_div{padding-left: 1.5em;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div{display:flex; flex-direction:column; line-height:2; font-size:1.2em; }
#contents.csr .inner #hd3 .hd3_left .h3_txt_div span{padding-left:1.5em}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .outline{font-size:1.3em; padding:5px 1em; border:4px solid #f46969; border-radius:1.3em; width:fit-content;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .bottom_space{padding-bottom:30px;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .underwave{padding-left:0; padding-bottom:30px;color:#f4c8c8; background-image:url("../image/common/hd/hd3_wave.png"); background-position:bottom;  background-repeat:no-repeat;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .weak{font-size:0.6em; font-weight:100; margin-top:30px;}
#contents.csr .inner #hd3 .hd3_right span{display: flex; flex-wrap: wrap; justify-content: flex-end;font-size: 5em;color: #ffffff; font-weight: 600; padding-right: 10%; width: 100%;}

#contents.csr .inner #hd4{color:#ffffff; }
#contents.csr .inner #hd4 .hd4_top_div{display:flex; flex-direction: column; align-items: center; width:100%; padding:0 15%; font-weight:600; font-size:1.6em;}
#contents.csr .inner #hd4 .hd4_top_div .hd4_top_img_div{margin-bottom:30px;}
#contents.csr .inner #hd4 .hd4_bot_div{display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; font-weight:600; font-size:1.6em;}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_date_div{display:flex; font-size:2.5em; font-family:'Noto Sans KR'; font-weight:700; margin-top:1em; margin-bottom:1em;}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_date_div span{margin-left:0.3em;}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_date_div #hd4_time{margin-right: 30px; font-family:'Noto Sans KR';}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_bot_txt_div{display:flex; flex-direction:column; align-items:center;line-height:3;font-size:0.5em;font-weight:400;}
#contents.csr .inner #hd4 .hd4_bot_div .m_span{display:none;}


@media screen and (max-width: 1366px) {

#contents.csr .inner {padding:0;}

#contents.csr .inner #hd2{background-size:cover;}
#contents.csr .inner #hd3{background-size:cover;}
#contents.csr .inner #hd4{background-size:cover;}


#contents.csr .inner #hd2 .hd2_txt_div{font-size:0.8em;}



#contents.csr .inner #hd3 .hd3_left{width:70%;padding-left:0%;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div span{padding-left:1.2em}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .outline{font-size:1.1em;}
#contents.csr .inner #hd3 .hd3_right{width:30%;}
#contents.csr .inner #hd3 .hd3_right span{font-size:3em;}
}

@media screen and (max-width: 900px) {
.max-sub-visual.csr{background-image: url("../image/common/hd/m_hd1.png");flex-direction:column; justify-content:center; font-size:1em; height:50em;}
.max-sub-visual.csr h2{font-size:1.5em; font-weight:600;}
.max-sub-visual.csr span{font-weight:200;}
.max-sub-visual.csr .max_left, .max-sub-visual.csr .max_right{width:100%; padding:0;}
.max-sub-visual.csr .max_left{margin-bottom: 5em;}
.max-sub-visual.csr .max_lright{font-weight:200;}

#contents.csr .inner {padding:0;}

#contents.csr .inner .csr_inner_div{height:12em;}
#contents.csr .inner #hd2{background-image: url("../image/common/hd/m_hd2.png")}
#contents.csr .inner #hd3{background-image: url("../image/common/hd/m_hd3.png")}
#contents.csr .inner #hd4{background-image: url("../image/common/hd/m_hd4.png"); height:30em;}

#contents.csr .inner #hd2 .hd2_img_div {margin-bottom:30px;}
#contents.csr .inner #hd2 .hd2_img_div img{width:35%;}
#contents.csr .inner #hd2 .hd2_txt_div{font-size:0.5em; font-weight:200; text-align:center;}

#contents.csr .inner #hd3 {flex-direction:column; justify-content:flex-end;height:20em;}
#contents.csr .inner #hd3 .hd3_left, #contents.csr .inner #hd3 .hd3_right{width:100%; padding:0;}
#contents.csr .inner #hd3 .hd3_left .h3_img_div{text-align:center; padding-left:0;}
#contents.csr .inner #hd3 .hd3_left .h3_img_div img{width:35%;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div{font-size:0.6em;padding-left:5%;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .underwave{padding-bottom:10px;background-image:url("../image/common/hd/m_hd3_wave.png");}
#contents.csr .inner #hd3 .hd3_right{align-items:center; margin-top:5em; padding-bottom:10px; text-align:center;}
#contents.csr .inner #hd3 .hd3_right span{justify-content:center; padding-right:0; font-size:2em;}

#contents.csr .inner #hd4 .hd4_top_div{display:flex; padding:0; margin-bottom:2em; font-size:0.8em;font-weight:400; align-items:center;}
#contents.csr .inner #hd4 .hd4_top_div .hd4_top_img_div {padding:0; text-align:center; width:100%;}
#contents.csr .inner #hd4 .hd4_top_div .hd4_top_img_div img{width:35%;}
#contents.csr .inner #hd4 .hd4_bot_div{font-size: 1em;font-weight:400; text-align:center;}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_date_div{font-size:1.2em; margin-bottom:2.5em}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_date_div #hd4_time{margin-right: 10px;}
#contents.csr .inner #hd4 .hd4_bot_div .pc_span{display:none;}
#contents.csr .inner #hd4 .hd4_bot_div .m_span{display:flex;}
#contents.csr .inner #hd4 .hd4_bot_div #hd4_bot_txt_div{font-size:0.5em; font-weight:200;line-height:1.8;}
#contents.csr .inner #hd4 .hd4_bot_div .upper_space_txt{margin-top:1.5em;}


}

@media screen and (max-width: 900px) and (min-width: 568px) {

#contents.csr .inner .csr_inner_div{height:28em;}
#contents.csr .inner #hd2 .hd2_txt_div{font-size:1.1em;}

#contents.csr .inner #hd3 { }
#contents.csr .inner #hd3 .hd3_left{width:70%;padding-left:0%;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div span{padding-left:1.2em}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div{font-size:0.8em;padding-left:5%;}
#contents.csr .inner #hd3 .hd3_left .h3_txt_div .outline{font-size:1.5em;}
#contents.csr .inner #hd3 .hd3_right{width:30%;}
#contents.csr .inner #hd3 .hd3_right span{font-size:3em;}

}