.visual-wrap{
    position: relative;
}

.visual{
    height: 100vh;
}

.visual01{
    background: url('/design/mra2024/images/visual01.jpg') no-repeat center top;
    background-size: cover;
}

.visual02 {
    background: url(/design/mra2024/images/visual02.jpg) no-repeat center top;
}

.visual .text{
    width: 100%;
    max-width: 1200px;
    padding: 0 2%;
    left: 50%;
    top: 47.5%;
    position: absolute;
    transform: translate(-50% ,-50%);
}

.visual .text .title{
    margin-bottom: 3rem;
    font-family: 'JalpullineunoneulM';
    font-size: 5.2rem;
    color: #080876;
}

.visual .text .sub{
    color: #111;
    font-size: 2.2rem;
}
.visual-wrap .nav-box{
    width: 100%;
    max-width: 1200px;
    padding: 0 2%;
    left: 50%;
    top: 70%;
    position: absolute;
    transform: translate(-50% ,-50%);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    z-index: 10;
}

.visual-wrap .nav-box .swiper-counter {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.visual-wrap .nav-box .swiper-counter span.num{
    width: 3rem;
    display: block;
    font-size: 1.8rem;
    color: #333;
}

.visual-wrap .nav-box .swiper-counter span.num.total{
    text-align: right;
}

.visual-wrap .nav-box .swiper-progress-bar {
    width: 14rem;
    height: 2px;
    margin-top: 1.2rem;
    position: relative;
    background: #ddd;
}

.visual-wrap .nav-box .swiper-progress-bar .progress {
  height: inherit;
  left: 0;
  top: 0;
  position: absolute;
  background: #4a4a4a;
  z-index: 1;
}


/*
.visual-wrap .nav-box .swiper-pagination{
    width: 19rem;
    position: absolute;
    bottom: auto;
    top: 0;
    left: 2%;
    text-align:left;
}

.visual-wrap .nav-box .swiper-pagination .pagination{
    position: relative;
    width: 14rem;
    height: 2px;
    background: #ddd;
}

.swiper-container .nav-box .swiper-pagination-bullet span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    opacity: .2;
}

.swiper-container .nav-box .swiper-pagination-bullet span:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    z-index: 10;
}

.swiper-container .nav-box .swiper-pagination-bullet-active span:after {
    width: 100%;
    animation: pager 4s linear;
    background-color: #fff;
}

@keyframes pager {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}
*/

.visual-wrap .nav-box .btn{
    width: 1rem;
    height: 1.1rem;
    margin-left: 1.5rem;
    margin-top: .7rem;
    font-size: 0;
    text-indent: -99999px;
    background: url('/design/mra2024/images/visual_btn.png') no-repeat left top;
    background-size: 100%;
    cursor: pointer;
}

.visual-wrap .nav-box .btn.stop{
}
.visual-wrap .nav-box .btn.play{
    display: none;
    background-position: left -1.1rem;
}

.visual-wrap .scroll{
    position: absolute;
    left: 50%;
    bottom: 4rem;
    transform: translateX(-50%);
    font-size: 1.4rem;
    color: #a7a7a7;
    text-align: center;
    font-family: 'JalpullineunoneulM';
    z-index: 10;
}

.visual-wrap .scroll::before{
    content: '';
    width: 2.1rem;
    height: 3.2rem;
    display: block;
    margin: 0 auto 9px;
    background: url('/design/mra2024/images/scroll.png') no-repeat left top;
    background-size: 100%;
}

.Title{
    text-align: center;
}

.Title .eng{
    font-size: 4.5rem;
    font-family: 'JalpullineunoneulM';
    color: #5bc4f3;
}

.section01{
    padding: 9rem 0 0;
    text-align: center;
}

.section01 .Title .eng{
    color: #d22229;
}

.Title h3{
    font-size: 3.5rem;
    color: #333;
    font-family: 'JalpullineunoneulM';
}

.Title .btm{
    width: 50rem;
    display: block;
    margin: 1.2rem auto 0;
    padding-top: .6rem;
    position: relative;
    font-size: 1.2rem;
    color: #999;
    letter-spacing: 1.4rem;
    border-top: 1px solid #a7a7a7;
}

.Title .btm::before,
.Title .btm::after{
    content: '';
    width: .7rem;
    height:.7rem;
    position: absolute;
    left: 0;
    top: -.9rem;
    border-radius: 50%;
    border: 5px solid #fff;
    background: #a7a7a7;
}

.Title .btm::after{
    left: auto;
    right: 0;
}

.section01 .btn-brand{
    display: inline-block;
    padding: 1.3rem 4rem 1rem;
    margin: 3rem auto 0;
    color: #fff;
    font-size: 1.6rem;
    background: #d22229;
    border-radius: 30px;
}

.section01 .brand-list{
    margin-top: 4rem;
    margin-bottom: 7rem;
    position: relative;
}

.section01 .brand-list::before{
    content: '';
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 1.8rem;
    position: absolute;
    background: #999;
    z-index: 4;
}

.section01 .brand-list ul{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.section01 .brand-list ul li{
    position: relative;
    display: block;
    width: 24rem;
    padding-bottom: 4rem;
    font-size: 1.8rem;
    color: #999;
    text-align: center;
    cursor: pointer;
}

.section01 .brand-list ul li.on{
    color: #333;
}

.section01 .brand-list ul li::before{
    content: '';
    width: 1.1rem;
    height: 1.1rem;
    position: absolute;
    left: 50%;
    margin-left: -.55rem;
    bottom: 1.3rem;
    background: #999;
    border-radius: 50%;
    z-index: 5
}

.section01 .brand-list ul li.on::before{
    background: #333;
}

.section01 .brand-list ul li.on::after{
    content: '';
    width: 3.7rem;
    height: 3.7rem;
    position: absolute;
    left: 50%;
    margin-left: -1.85rem;
    bottom: 0;
    border-radius: 50%;
    background:#eaeaea;
    z-index: 2;
}

.section01 .swiper-container .swiper-slide{
    width: 97.3rem;
    padding-top: 3rem;
    padding-bottom: 14rem;
    position: relative;
    transition: padding 0.3s;
}

.section01 .swiper-container .swiper-slide.swiper-slide-active{
    padding-top: 0;
}

.section01 .box{
    height: 53.4rem;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
}

.section01 .brand01{
    background: url('/design/mra2024/images/sec01_img01.jpg') no-repeat right bottom;
}
.section01 .brand02{
    background: url('/design/mra2024/images/sec01_img02.jpg') no-repeat right bottom;
}
.section01 .brand03{
    background: url('/design/mra2024/images/sec01_img03_20230427.jpg') no-repeat right bottom;
}
.section01 .brand04{
    background: url('/design/mra2024/images/sec01_img04_20230427.jpg') no-repeat right bottom;
}
.section01 .brand05{
    background: url('/design/mra2024/images/sec01_img05_2023.jpg') no-repeat right bottom;
}
/* .section01 .brand06{
    background: url('/design/mra2024/images/sec01_img06.jpg') no-repeat right bottom;
} */
/* .section01 .brand07{
    background: url('/design/mra2024/images/sec01_img07.jpg') no-repeat right bottom;
} */

.section01 .box .text{
    width: 44%;
    padding-left: 5rem;
    text-align: left;
}

.section01 .box .text::before{
    content: '';
    width: 75rem;
    height: 75rem;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
    position: absolute;
    border-radius: 50%;
    background: #0eb8c8;
}

.section01 .box.brand01 .text::before{
    background: #980748;
}
.section01 .box.brand02 .text::before{
    background: #083172;
}
.section01 .box.brand03 .text::before{
    background: #171d3f;
}
.section01 .box.brand04 .text::before{
    background: #7b6568;
}
.section01 .box.brand05 .text::before{
    background: #064065;
}
.section01 .box.brand06 .text::before{
    background: #0e2f52;
}
.section01 .box.brand07 .text::before{
    background: #434748;
}

.section01 .box .text .desc{
    padding-left: 1rem;
    margin-top: 7rem;
    position: relative;
    color: #fff;
    font-size: 1.6rem;
}

.section01 .box .text .name{
    margin-top: 6rem;
    padding-left: 1rem;
    position: relative;
    color: #fff;
    font-size: 2.4rem;
}

.section01 .box .text .tit{
    padding-left: 1rem;
    margin-top: .5rem;
    position: relative;
    color: #fff;
    font-size: 4.5rem;
}

.section01 .box .btn{
    overflow: hidden;
    margin-top: 4rem;
}

.section01 .box .btn a{
    display: block;
    float: left;
    width: 13.5rem;
    height: 13.5rem;
    position: relative;
    margin-right: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
    line-height: 13.5rem;
}

.section01 .box .btn a i{
    position: relative;
}

.section01 .box .btn a::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .2;
    border-radius: 50%;
}

.section01 .box .btn a.about::before{
    background: #000;
}
.section01 .box .btn a.buy::before{
    background: #fff;
}

.section01 .prod{
    position: absolute;
    right: 3rem;
    bottom: 0;
}

.section01 .brand03 + .prod{
	bottom: -6rem;
}
.section01 .brand04 + .prod{
    bottom: -8rem;
}
.section01 .brand05 + .prod{
    right: 3rem;
	bottom: -6rem;
}
.section01 .brand06 + .prod{
    right: 5rem;
}
.section01 .brand07 + .prod{
    right: 1rem;
    bottom: 3rem;
}

.section01 .arrow{
    width: 97.3rem;
    margin: 0 auto 0;
    position: absolute;
    top: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 13;
}

.section01 .swiper-button-next,
.section01 .swiper-button-prev{
    width: .6rem;
    height: 1.2rem;
    left: 6.6rem;
    background: url('/design/mra2024/images/sec01_arrow.png') no-repeat left top;
    background-size: 100%;
}

.section01 .swiper-button-next{
    left: 9rem;
    right: auto;
    transform: rotate(180deg);
}

.section02{
    padding: 2rem 0 0;
}

.section02 .text-tab{
    display: none;
}

.section02 .tab-container{
    max-width: 1200px;
    width: 100%;
    margin: 6.5rem auto 0;
    overflow: hidden;
}

.section02 .tab-content{
    width: 40rem;
    height: 40rem;
    text-align: center;
    border-radius: 50%;
}

.section02 .tab-content.fr{
    float: left;
    border: 15px solid #19b5f4;
}

.section02 .tab-content.sec{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 15px solid #19b5f4;
}

.section02 .tab-content.la{
    float: right;
    border: 15px solid #19b5f4;
}

.section02 .eng span{
    display: inline-block;
    padding-top: 5rem;
    font-size: 2.4rem;
    color: #5bc4f3;
}

.section02 .eng p{
    margin-top: .5rem;
    margin-bottom: 2rem;
    color: #5bc4f3;
    line-height: 1;
    font-size: 12.5rem;
}

.section02 .fr .eng span,
.section02 .fr .eng p{
    color: #5bc4f3;
}

.section02 .desc .tit{
    color: #32a7db;
    font-size: 2.4rem;
}

.section02 .desc .txt{
    width:55%;
    margin: 1rem auto 0;
    font-size: 1.6rem;
    color: #999;
}

.section03{
    margin-top: 15rem;
    padding-top: 9.5rem;
    background: url('/design/mra2024/images/sec03_bg.jpg') no-repeat center top;
    background-size: cover;
}

.section03 .Title .eng{
    color: #fff;
}

.section03 .Title h3{
    color: #fff;
}

.section03 .Title .btm{
    color: #fff;
    border-top:1px solid #7bc5e0;
}

.section03 .Title .btm::before, 
.section03 .Title .btm::after{
    top: -.4rem;
    left: -1.3rem;
    border: 0;
    background: #7bc5e0;
}

.section03 .Title .btm::after{
    left: auto;
    right: -1.3rem;
}

.section03 .banner{
    margin-top: 8.5rem;   
}

.section03 .banner .swiper-container{
    max-width: 1200px;
    width: 100%;
}

.section03 .banner .swiper-slide{
    display: block;
    position: relative;
}

.section03 .banner .swiper-slide .img{
    position: relative;
}

.section03 .banner .swiper-slide .img::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: .2;
}

.section03 .banner .swiper-slide:hover .img::before,
.section03 .banner .swiper-slide:focus .img::before{
    background: #32a7db;
    opacity: .7;
}

.section03 .banner .swiper-slide .img img{
    width: 100%;
}

.section03 .banner .swiper-slide .text{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.section03 .banner .swiper-slide .text .tit{
    font-size: 3rem;
    color: #fff;
}

.section03 .banner .swiper-slide .text .txt{
    height: 0;
    opacity: 0;
    padding: 0 6rem;
    margin-top: 1.5rem;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.7;
    transition: all 0.2s ease-in;
}

.section03 .banner .swiper-slide .text .more{
    height: 0;
    opacity: 0;
    display: block;
    width: 7.2rem;
    margin: 0 auto 0;
    font-size: 0;
    text-indent: -99999px;
    background: url('/design/mra2024/images/sec03_more.png') no-repeat left top;
    background-size: 100%;
    transition: all 0.2s ease-in;
}

.section03 .banner .swiper-slide:hover .text .txt,
.section03 .banner .swiper-slide:focus .text .txt{
    height: auto;
    opacity: 1;
}

.section03 .banner .swiper-slide:hover .text .more,
.section03 .banner .swiper-slide:focus .text .more{
    height: 7.2rem;
    opacity: 1;
    margin-top: 2.5rem;
}

.section04{
    margin-top: 9rem;
}

.section04 .Title .eng{
    color: #180f5e;
}

.section04 .box-wrap{
    max-width: 1200px;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin: 6rem auto 0;
}

.section04 .box-wrap .box{
    width: 58rem;
    height: 40rem;
    padding: 5rem;
    padding-right: 2rem;
    border-radius: 25px;
}

.section04 .box-wrap .box.box01{
    margin-right: 4rem;
    background: #180f5e;
}

.section04 .box-wrap .box.box02{
    background: #1cb5f2;
}

.section04 .box-wrap .box .tit{
    margin-bottom: 2.5rem;
    font-size: 2.9rem;
    color: #fff;
    line-height: 1.2;
}

.section04 .box-wrap .box::before{
    content: '';
    width: 7.2rem;
    height: 6.4rem;
    display: block;
    margin-bottom: 3.2rem;
}

.section04 .box-wrap .box.box01::before{
    background: url('/design/mra2024/images/sec04_icon01.png') no-repeat left top;
    background-size: 100%;
}
.section04 .box-wrap .box.box02::before{
    background: url('/design/mra2024/images/sec04_icon02.png') no-repeat left top;
    background-size: 100%;
}

.section04 .box-wrap .box .txt{
    color: #fff;
    font-size: 1.6rem;
}

.section04 .box-wrap .box a{
    display: block;
    width: 16.5rem;
    position: relative;
    overflow: hidden;
    margin-top: 4.5rem;
    line-height: 3.8rem;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
}

.section04 .box-wrap .box a i{
    position: relative;
}

.section04 .box-wrap .box a::before{
    content: '';
    width: 100%;
    height: 4rem;
    position: absolute;
    left: 0;
    bottom: -108%;
    background: #fff;
    transition: all 0.2s ease-out;
}

.section04 .box-wrap .box.box01 a:hover{
    color: #180f5e;
}
.section04 .box-wrap .box.box02 a:hover{
    color: #1cb5f2;
}

.section04 .box-wrap .box a:hover::before{
    bottom: 0;
}


.section05{
    margin: 10rem 0 4.5rem;
}

.section05 .sec05-wrap{
    width: 100%;
    max-width: 1200px;
    margin: 7.5rem auto 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.sec05-wrap .news{
    width: 52.5%;
    margin-right: 3.5%;
}

.sec05-wrap .news .swiper-slide a{
    display: block;
    background: #f5f5f5;
}

.sec05-wrap .news .swiper-slide a:hover{
    background: #fff;
}

.sec05-wrap .news .swiper-slide a::before{
	box-sizing: inherit;
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 0;
	opacity: 0;
	box-shadow: inset 3px 3px 0 0px #d22229;
	transition: width 0.4s ease-out, height 0.4s ease-out 0.1s;
}

.sec05-wrap .news .swiper-slide a::after {
	box-sizing: inherit;
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 0;
    height: 0;
    opacity: 0;
    box-shadow: inset -3px -3px 0 0 #d22229;
	transition: width 0.4s ease-out, height 0.4s ease-out 0.1s;
}
.sec05-wrap .news .swiper-slide a:hover::before,
.sec05-wrap .news .swiper-slide a:hover::after{
	opacity: 1;
	width: 100%;
	height: 100%;
}

.sec05-wrap .news .swiper-slide .img{
    display: block;
}

.sec05-wrap .news .swiper-slide .img img{
    width: 100%;
	height: 237px;
}

.sec05-wrap .news .swiper-slide .text{
    padding: 3.1rem 2.5rem 3rem;
}

.sec05-wrap .news .swiper-slide .text .head{
    height: 6rem;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1.8rem;
    line-height: 1.7;
    color: #333;
}

.sec05-wrap .news .swiper-slide .text .date{
    margin-top: 1.2rem;
    font-size: 1.6rem;
    color: #999;
}

.sec05-wrap .news .swiper-pagination{
    position: relative;
    margin-top: 2.6rem;
}

.sec05-wrap .news .swiper-pagination .swiper-pagination-bullet{
    width: 4rem;
    height: 2px;
    margin: 0 .4rem;
    opacity: 1;
    border-radius: 0;
    background: #000;
}

.sec05-wrap .news .swiper-pagination .swiper-pagination-bullet-active{
    background: #ff0000;
}


.sec05-wrap .util{
    width: 44%;
}

.sec05-wrap .util .btn{
    margin-bottom: 4rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.sec05-wrap .util .btn a{
    width: 24.5rem;
    display: block;
    padding: 11.4% 0 10.5%;
    text-align: center;
    font-size: 2.4rem;
    color: #fff;
    border-radius: 50%;
}

.sec05-wrap .util .btn .event{
    margin-right: 31px;
    background: #180f5e;
}

.sec05-wrap .util .btn .font{
    background: #5bc4f3;
}

.sec05-wrap .util .btn a::before{
    content: '';
    width: 6.5rem;
    height: 7.5rem;
    display: block;
    margin: 0 auto 2rem;
}

.sec05-wrap .util .btn .event::before{
    background: url('/design/mra2024/images/sec05_icon01.png') no-repeat left top;
    background-size: 100%;
}
.sec05-wrap .util .btn .font::before{
    background: url('/design/mra2024/images/sec05_icon02.png') no-repeat left top;
    background-size: 100%;
}

.sec05-wrap .util .cs{
    overflow: hidden;
    padding-top: 2.4rem;
    border-top: 1px solid #ccc;
}

.sec05-wrap .util .cs .tit{
    float: left;
    width: 14rem;
    margin-top: 2rem;
    margin-right: 1rem;
    text-align: center;
    font-size: 2.2rem;
    color: #333;
}

.sec05-wrap .util .cs .right{
    width: calc(100% - 15rem);
    float: left;
}

.sec05-wrap .util .cs .number{
    font-size: 3.5rem;
    color: #180f5e;
}

.sec05-wrap .util .cs .number span{
    display: inline-block;
    color: #333;
    font-size: 1.5rem;
}

.sec05-wrap .util .cs .time{
    color: #333;
    font-size: 1.5rem;
}

.section06{
    padding: 4.5rem 0;
    background: #f5f5f5;
}

.section06 .sec06-wrap{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.section06 .sec06-wrap .head{
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
    color: #333;
}

.section06 .sec06-wrap > div{
    float: left;
    width: 49.2%;
}

.section06 .left{
    margin-right: 1.6%;
}

.section06 .left .box{
    height: 21.6rem;
    padding-left: 50%;
    padding-top: 5rem;
    background: url('/design/mra2024/images/recruit.jpg') no-repeat left top;
    background-size: cover;
}

.section06 .left .box .text{
    font-size: 2.4rem;
    color: #333;
    font-family: 'JalpullineunoneulM';
}

.section06 .left .box .text span{
    color: #d22229;
}

.section06 .left .box a{
    display: inline-block;
    padding: .5rem 3rem;
    margin-top: 1.6rem;
    color: #fff;
    font-size: 1.4rem;
    background: #999;
}

.section06 .video{
    height: 21.6rem;
}

.section06 .video .video-inner{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 50%;
}

.section06 .video .video-inner iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}



@media screen and (max-width: 1200px){
    
    .visual01{
        background-position: 60% top;
    }
    
    .sec05-wrap .util .btn a{
        font-size: 2rem;
    }
    
    .sec05-wrap .util .btn a::before{
        width: 6rem;
        height: 6.7rem;
    }
    

}



/*tablet*/
@media screen and (max-width: 1024px){
    
    .Title .eng{
        font-size: 3.8rem;
    }
    
    .Title h3{
        font-size: 3rem;
    }
    
    .section01 .swiper-container{
        width: 92%;
        margin: 0 auto;
    }

    .section01 .swiper-container .swiper-slide{
        width:100%;
        padding-top: 0;
    }

    .section01 .brand04 + .prod{
        width: 42rem;
    }
    .section01 .brand04 + .prod img,
    .section01 .brand07 + .prod img{
        width: 100%;
    }
    .section01 .brand05 + .prod{
        right: 2rem;
    }
    .section01 .brand06 + .prod{
        right: 2rem;
    }
    .section01 .brand07 + .prod{
        width: 42rem;
    }
    
    .section01 .box .text{
        width: 47%;
        padding-left: 3rem;
    }
    
    .section01 .box .text::before{
        transform: translate(-94%, -50%);
    }
    
    .section01 .box .text .desc{
        font-size: 1.4rem;
    }
    
    .section01 .box .text .name{
        margin-top: 6rem;
        font-size: 2rem;
    }
    
    .section01 .box .text .tit{
        font-size: 3.7rem;
    }
    
    .section01 .box .btn{
        margin-top: 10rem;
    }
    
    .section01 .box .btn a{
        width: 12rem;
        height: 12rem;
        line-height: 12rem;
        font-size: 1.5rem;
    }
    
    .section01 .arrow{
        width: 100%;
        left: 47%;
    }
    
    .section02 .tab-content{
        width: 30rem;
        height: 30rem;
        display: block;
    }
    
    .section02 .eng span{
        padding-top: 3rem;
        font-size: 2rem;
    }
    
    .section02 .eng p{
        margin-bottom: 0;
        font-size: 9rem;
    }
    
    .section02 .desc .tit{
        font-size: 1.9rem;
    }
    
    .section02 .desc .txt{
        width: 65%;
        font-size: 1.4rem;
    }
    
    .section03 .banner .swiper-slide .text .txt{
        padding: 0 3rem;
        font-size: 1.2rem;
    }
    
    .section03 .banner .swiper-slide .text .more{
        width: 5rem;
    }
    
    .section03 .banner .swiper-slide:hover .text .more,
    .section03 .banner .swiper-slide:focus .text .more{
        height: 5rem;
    }
    
    .section04 .scroll{
        overflow-x: scroll;
        overflow-y: hidden;
    }
    
    .section04 .box-wrap{
        width: 120rem;
    }
    
    .sec05-wrap .news .swiper-slide .text{
        padding:2.5rem 1.5rem 2rem;
    }
    
    .sec05-wrap .news .swiper-slide .text .head{
        height: 5rem;
        font-size: 1.5rem
    }
    
    .sec05-wrap .news .swiper-slide .text .date{
        margin-top: .8rem;
        font-size: 1.3rem;
    }
    
    .sec05-wrap .util .btn{
        margin-bottom: 3rem;
    }
    
    .sec05-wrap .util .btn a{
        font-size: 1.7rem;
    }
    
    .sec05-wrap .util .btn a::before{
        width: 4.2rem;
        height: 4.8rem;
        margin-bottom: 1.3rem;
    }
    
    .sec05-wrap .util .btn .event{
        margin-right: 15px;
    }
    
    .sec05-wrap .util .cs .tit{
        width: 9rem;
        font-size: 1.8rem;
    }
    
    .sec05-wrap .util .cs .right{
        width: calc(100% - 10rem);
    }
    
    .sec05-wrap .util .cs .number{
        font-size: 2.5rem;
    }
    
    .sec05-wrap .util .cs .number span{
        font-size: 1.3rem;
    }
    
    .sec05-wrap .util .cs .time{
        font-size: 1.2rem;
    }
    
    .sec05-wrap .util .cs .time br{
        display: block;
    }
    
    .section06 .left .box .text{
        font-size: 1.8rem;
    }
    
    
}



/*mobile*/
@media screen and (max-width: 768px){
    
    
    .visual01{
        background: url('/design/mra2024/images/m_visual01.jpg') no-repeat center top;
        background-size: cover;
    }
    
    .visual .text{
        top: 26.5%;
        padding: 0 8%;
    }
    
    .visual .text .title{
        margin-bottom: 1.5rem;
        font-size: 2.3rem;
    }
    
    .visual .text .sub{
        font-size: 1.1rem;
    }
    
    .visual-wrap .nav-box{
        top: 40%;
        padding: 0 8%;
    }
    
    .visual-wrap .nav-box .swiper-counter span.num{
        width: 1.5rem;
        font-size: 1.1rem;
    }
    
    .visual-wrap .nav-box .swiper-progress-bar{
        width: 6rem;
        height: 1px;
        margin-top: .8rem;
        background: #fff;
    }
    
    .visual-wrap .nav-box .btn{
        margin-left: 1.2rem;
        margin-top: .3rem;
    }

    .visual-wrap .scroll{
        bottom: 1.5rem;
        font-size: .8rem;
    }

    .visual-wrap .scroll::before{
        width: 1.6rem;
        height: 2.5rem;
        margin: 0 auto 4px;
    }
    
    .section01{
        padding: 4rem 0 0;
    }
    
    .Title .eng{
        margin-bottom: .3rem;
        font-size: 1.3rem;
    }
    
    .Title h3{
        font-size: 1.5rem;
    }
    
    .Title .btm{
        width: 38rem;
        font-size: 1rem;
        letter-spacing: .8rem;
        transform: scale(.6) translateX(-15%);
    }
    
    .Title .btm::before, 
    .Title .btm::after{
        width: .5rem;
        height: .5rem;
        top: -.7rem;
    }
    
    .section01 .btn-brand{
        padding: .7rem 3rem .6rem;
        margin: 1rem auto 0;
        font-size: 1rem;
    }

    .section01 .brand-list{
        overflow-x: auto;
        margin-bottom: 3.5rem;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    
    .section01 .brand-list::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera*/
    }

    .section01 .brand-list::before{
        width: 73.5rem;
        bottom: .8rem;
    }

    .section01 .brand-list ul{
        width: 73.5rem;
    }

    .section01 .brand-list ul li{
        width: 10.5rem;
        padding-bottom: 2.2rem;
        font-size: 1.2rem;
    }

    .section01 .brand-list ul li::before{
        transform: scale(.4);
        bottom: .3rem;
    }
    
    .section01 .brand-list ul li.on::after{
        width: 1.6rem;
        height: 1.6rem;
        margin-left: -.8rem;
    }
    
    .section01 .swiper-container{
        width: 90%;
    }
    
    .section01 .swiper-container .swiper-slide{
        padding-bottom: 4rem;
    }

    .section01 .box{
        height: auto;
        border-radius: 25px;
        padding-bottom: 16rem;
        background-size: 100%;
    }

    .section01 .box .text{
        width: 100%;
        padding: 0 1rem 3rem;
    }

    .section01 .box .text::before{
        width: 45rem;
        height: 45rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-96%);
    }
    
    .section01 .box .text .desc{
        margin-top: 2rem;
        font-size: 1.1rem;
    }
    
    .section01 .box .text .name{
        margin-top: 1.5rem;
        font-size: 1rem;
    }
    
    .section01 .box .text .tit{
        font-size: 1.6rem;
    }
    
    .section01 .box .btn{
        width: 14rem;
        margin: 1.5rem auto 0;
    }
    
    .section01 .box .btn a{
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
        font-size: .8rem;
        margin: 0 .5rem;
    }
    
    .section01 .prod{
        width: 9rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .section01 .brand04 + .prod{
        width: 15rem;
        bottom: -4rem;
    }
	.section01 .brand03 + .prod{
        width: 13rem;
        bottom: 0;
    }

    .section01 .brand02 + .prod,
    
    .section01 .brand06 + .prod{
        width: 11rem;
    }

	.section01 .brand05 + .prod{
		width: 13rem;
		bottom:-3rem;
	}

    .section01 .brand07 + .prod{
        width: 17rem;
        bottom: 0;
    }
	.section01 .brand10 + .prod{
        width: 17rem;
        bottom: 0;
    }
    
    .section01 .arrow{
        display: none;
    }
    
    .section02 .text-tab{
        display: block;
        margin-top: .8rem;
        text-align: center;
    }
    
    .section02 .text-tab a{
        position: relative;
        margin: 0 .5rem;
        padding: 0 1rem;
        font-size: 2.5rem;
        color: #999;
    }
    
    .section02 .text-tab a::before{
        content: '';
        width: 22px;
        height: 1px;
        position: absolute;
        left: 50%;
        margin-left: -11px;
        bottom: 0;
        background: #999;
    }
    
    .section02 .text-tab a.active{
        color: #19b5f4
    }
    
    .section02 .text-tab a.active::before{
        background: #19b5f4;
    }
    
    .section02 .tab-container{
        margin-top: 2rem;
    }
    
    .section02 .tab-content{
        width: 100%;
        height: auto;
        display: none;
        padding: 0 2rem;
        float: none !important;
        border: 0 !important;
        overflow: hidden;
        border-radius: 0;
    }
    
    .section02 .tab-content.fr{
        display: block;
    }
    
    .section02 .tab-content.sec{
        position: relative;
        left: auto;
        transform: translate(0);
    }
    
    .section02 .tab-content .eng{
        width: 11rem;
        height: 11rem;
        float: left;
        border: .7rem solid #19b5f4;
        border-radius: 50%;
    }
    
    .section02 .tab-content.sec .eng{
        border: .7rem solid #19b5f4;
    }
    .section02 .tab-content.la .eng{
        border: .7rem solid #19b5f4;
    }
    
    .section02 .eng span{
        padding-top: 1.5rem;
        font-size: 1.3rem;
    }
    
    .section02 .eng p{
        margin-top: .2rem;
        font-size: 4.5rem;
    }
    
    .section02 .tab-content .desc{
        width: calc(100% - 12.5rem);
        float: right;
        text-align: left;
    }
    
    .section02 .tab-content .desc .tit{
        margin-top: 2.6rem;
        font-size: 1.4rem;
    }
    
    .section02 .tab-content .desc .txt{
        width: 88%;
        margin: .7rem 0 0;
        font-size: 1rem;
    }
    
    .section03{
        margin-top: 4rem;
        padding-top: 4.5rem;
        background-position: right top;
    }
    
    .section03 .banner{
        margin-top: 2rem;
    }
    
    .section03 .swiper-container{
        padding-left: 2.2rem;
    }
    
    .section03 .banner .swiper-slide{
        width: 17rem;
    }
    
    .section03 .banner .swiper-slide .text .tit{
        font-size: 1.3rem;
    }
    
    .section03 .banner .swiper-slide .text .txt{
        padding: 0;
        margin: 0;
        transform: scale(.8);
        font-size: .8rem;
    }
    
    .section03 .banner .swiper-slide .text .more{
        width: 3rem;
    }
    
    .section03 .banner .swiper-slide:hover .text .more, 
    .section03 .banner .swiper-slide:focus .text .more{
        height: 3rem;
        margin-top: .8rem;
    }

    .section04{
        margin-top: 4rem;
    }

    .section04 .box-wrap{
        width:58rem;
        padding-left: 2rem;
        margin: 2rem auto 0;
    }

    .section04 .box-wrap .box{
        width: 27rem;
        height: 20.5rem;
        padding: 2.3rem 2rem 0;
        border-radius: 15px;
        margin-right: 1rem;
    }

    .section04 .box-wrap .box.box01{
        margin-right: 1rem;
    }

    .section04 .box-wrap .box .tit{
        margin-bottom: 1.3rem;
        font-size: 1.5rem;
    }

    .section04 .box-wrap .box::before{
        width: 3.9rem;
        height: 3.4rem;
        margin-bottom: 1.7rem;
    }

    .section04 .box-wrap .box .txt{
        font-size: 1rem;
    }

    .section04 .box-wrap .box a{
        width: 10rem;
        margin-top: 2.7rem;
        line-height: 2.1rem;
        font-size: 1.1rem;
    }
    
    .section04 .box-wrap .box a::before{
        bottom: -200%;
    }
    
    .section05{
        margin: 4rem 0 3.5rem;
    }
    
    .section05 .sec05-wrap{
        margin-top: 3.5rem;
        display: block;
        padding: 0 2rem;
    }
    
    .sec05-wrap .news{
        width: 100%;
        margin-right: 0;
    }
    
    .sec05-wrap .news .swiper-slide .text{
        padding: 1rem 1.2rem;
    }
    
    .sec05-wrap .news .swiper-slide .text .head{
        height: 3rem;
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .sec05-wrap .news .swiper-slide .text .date{
        margin-top: .3rem;
        font-size: .8rem;
    }
    
    .sec05-wrap .news .swiper-pagination{
        margin-top: 1rem;
    }

    .sec05-wrap .util{
        width: 100%;
        margin-top: 2.5rem;
    }
    
    .sec05-wrap .util .btn a{
        font-size: 1.1rem;
    }

    .sec05-wrap .util .btn a::before{
        width: 3.8rem;
        height: 4.4rem;
        margin-bottom: 1rem;
    }
    
    .sec05-wrap .util .cs .tit{
        font-size: 1.4rem;
    }
    
    .sec05-wrap .util .cs .number{
        font-size: 1.6rem;
    }
    
    .sec05-wrap .util .cs .number span,
    .sec05-wrap .util .cs .time{
        font-size: 1.1rem;
    }
    
    .section06{
        width: calc(100% - 4rem);
        margin: 0 auto 6rem;
        padding: 0;
        background: #fbfbfb;
    }
    
    .section06 .sec06-wrap .head{
        display: none;
    }
    
    .section06 .sec06-wrap .right{
        display: none;
    }
    
    .section06 .sec06-wrap .left{
        width: 100%;
        float: none;
    }
    
    .section06 .left .box{
        padding-left: 0;
        padding-top: 3rem;
        text-align: center;
        background: url('/design/mra2024/images/m_recruit.jpg') no-repeat center bottom;
        background-size: 100%;
    }
    
    .section06 .left .box .text{
        font-size: 1.3rem;
    }
    
    .section06 .left .box .text span{
        color: #333;
    }
    
    .section06 .left .box a{
        padding: .4rem 2.5rem .3rem;
        margin-top: 1rem;
        font-size: 1rem;
        background: #d22229;
    }
    

}




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


.visual01{
    background: url('/design/mra2024/images/2b8c7ec5b514ab4339758ac1e23fbc76.jpg') no-repeat center top;
	background-size: cover;
}


.visual02{
    background: url('/design/mra2024/images/f01fda2bf37ae54a97da65d295093ada.jpg') no-repeat center top;
	background-size: cover;
}

    

}