@charset "utf-8";
 
.pc_img{display:block;}
.img_480{display:none;}

#main em { font-style: normal; display: inline-block; letter-spacing: -0.15em; }
#main #sec01 span em { letter-spacing: -0.3em; }
#main .left-spece { margin-left: 0.4em; }

#main #sec01 { position: relative; width: 100%; height: 1148px; overflow: hidden; }
#main #sec01 .swiper-slide { display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; }
#main #sec01 .swiper-slide img {width: 100%; height: 1148px; object-fit: cover; }
#main #sec01 .tit-wr { position: absolute; top: 50%; left:50%; z-index: 2; width: 100%; color: #fff; text-align: center; transform: translate(-50%, -16.056em); }
#main #sec01 .tit-wr img { display: inline-block; width: auto; }
#main #sec01 .tit { margin-bottom: 0.18em; font-size: 4.0rem; line-height: 1.4; }
#main #sec01 .tit span { font-weight: 400; }
#main #sec01 .txt { margin-top: 2em; color: #fff; font-size: 1.8rem; line-height: 1.8; font-weight: 500; }
#main #sec01 .swiper-progress-bar { position: absolute; top: calc(100vh - 100px); left: 50%; z-index: 2; display: inline-block; width: calc(100% - 32.29166666666%); height: 1px; border-radius: 11px; overflow: hidden; transform: translateX(-50%); }
#main #sec01 .swiper-progress-bar .slide_progress-bar { position: absolute; height: 4px; background: rgba(225, 225, 225, 0.4); width: auto; clear: both; opacity: 0; left: 0; right: 0; }
#main #sec01 .swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background:#fff; height: 100%; width: 0; content: ""; transition: 0.1s width linear; }
#main #sec01 .swiper-progress-bar.active .slide_progress-bar { opacity: 1; }
#main #sec01 .swiper-progress-bar.animate .slide_progress-bar:after { width: 100%; transition: width linear; transition-delay: unset; transition-duration: 5s; }
#main #sec01 .swiper-button-next, #main #sec01 .swiper-button-prev { top: calc(100vh - 119px); left: var(--main-padding); width: auto; height: auto; }
#main #sec01 .swiper-button-next, #main #sec01 .swiper-container-rtl .swiper-button-prev { right: initial; left: 169px; background-image: none; }
#main #sec01 .swiper-button-prev, #main #sec01 .swiper-container-rtl .swiper-button-next { background-image: none; }
#main #sec01 .scroll { position: absolute; top: calc(100vh - 140px); right: var(--main-padding); width: 84px; height: 84px; background-color: rgba(255, 255, 255, 0.382); border-radius: 100%; z-index: 2; }
#main #sec01 .scroll .scroll-btn { position: absolute; left: 50%; top: -50%; margin-top: -1em; margin-left: -0.5em; animation: upDown 1.5s ease-in-out infinite; }


@keyframes upDown {
0% {
opacity: 0.6;
transform: translateY(-5px);
 }
50% {
opacity: 1;
transform: translateY(5px);
 }
100% {
opacity: 0.6;
transform: translateY(-5px);
 }
 }

/**/
#main #sec02 .inner { display: flex; padding: 0 var(--main-padding); }
#main #sec02 .sec02-img { display: flex; }
#main #sec02 .sec02-tit-wr { align-self: center; margin-top: 10em; }
#main #sec02 .sec02-tit-wr .txt { margin-bottom: 5.500em; }
#main #sec02 .bo-radius { position: relative; }
#main #sec02 .bo-radius img { width: 104%; height: 100%; margin-left: -2%; margin-top: -6%; }
#main #sec02 .img-box { position: relative; width: 406px; height: 583px; margin-right: 3.611em; z-index: 1; }
#main #sec02 .img-box::after { position: absolute; bottom: -3em; right: -2.3em; z-index: -1; width: 100%; height: 100%; }
#main #sec02 .img-box.img-box01::after { background: url("/dw3/img/sec02_img01_sh.png")no-repeat center / cover; content:''; }
#main #sec02 .img-box.img-box02::after { bottom: -4em; right: -3.3em; background: url("/dw3/img/sec02_img02_sh.png")no-repeat center / cover; content: ''; }
#main #sec02 .img-box.img-box01 { margin-top: -3.778em; }
#main #sec02 .img-box.img-box02 { margin-top: 10.056em; }
#main #sec02 .img-txt { position: absolute; left: 3em; bottom:3.667em; color: #fff; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); z-index: 1; }
#main #sec02 .img-txt .sub-tit { width: 100%; height: 100%; margin-top: 0.2em; font-size: 1.8rem; font-weight: 500; object-fit: cover; }
#main #sec02 .img-txt .tit { width: 100%; height: 100%; margin-bottom: 0; font-size: 3.5rem; object-fit: cover; }

/**/
#main #sec03 em.sub-tit { letter-spacing: -0.08em; }
#main #sec03 { position: relative; margin-top: 9.000em; }
#main #sec03 .sec03-bg { position: absolute; top: 0; width: 100%; height: 480px; background: #F3F1F1 url("/dw3/img/sec03_bg.png")no-repeat 104% 85%; z-index: -1; }
#main #sec03 .inner { padding: 6.667em var(--main-padding) 10.333em; }
#main #sec03 .swiper { overflow: hidden;}
#main #sec03 .box { position: relative; margin-bottom: 0.5em; filter: drop-shadow(0px 4px 4px rgba(0,0,0,.05));}
#main #sec03 .box img { transition: .5s; }
#main #sec03 .box::after { position: absolute; top: 0; width: 100%; height: 100%; border: 0 solid var(--main-color); border-radius: 1.8rem; box-sizing: border-box; content: ''; z-index: 1; transition: .3s; }
#main #sec03 .box:hover::after { border: 5px solid var(--main-color); }
#main #sec03 .box:hover img { transform: scale(1.03); }
#main #sec03 .box .txt { position:absolute; top:1em; left: 1em; color: inherit; font-size: 1.6rem; font-weight: 600; z-index: 2; }
#main #sec03 .box .more-btn { position:absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); z-index: 2; transition: .3s; }
#main #sec03 .box:hover .more-btn { opacity: 1; }



/**/
#main #sec04 { position:relative; width:100%; height: 815px; }
#main #sec04 .tit-wr { position: absolute; top: 44%; left: var(--main-padding); margin-top: -5em; color: #fff; z-index: 10; }
#main #sec04 .tit-wr .sub-tit { font-weight: 300; letter-spacing: 0; }
#main #sec04 .tab-button { position: relative; font-size: 2rem; line-height: 1.5; cursor: pointer; }
#main #sec04 .tab-button.on::before { margin-right: 0.5em; content: '→'; }
#main #sec04 .tab-cont { position: absolute; top: 0; visibility: hidden; opacity: 0; transition: .3s; }
#main #sec04 .tab-cont.show { visibility: visible; opacity: 1; }
#main #sec04 .sec04-cont { display: grid; grid-template-columns: 1fr 1fr; }
#main #sec04 .sec04-cont .img-box img { height: 100%; object-fit: cover; }
#main #sec04 .sec04-cont .text-box { padding: 5.167em 9.167em; background: #EAECE8; text-align: center; }
#main #sec04 .sec04-cont .text-box .txt { margin:1.389em 0 1.667em; }
#main #sec04 .sec04-cont .text-box .icon { margin-bottom: 1.778em; }
#main #sec04 .sec04-cont .text-box .more-btn { margin-top: 0.7em; color: inherit; }
#main #sec04 .sec04-cont .text-box .more-btn span { color: inherit; }
#main #sec04 .sec04-cont .text-box .swiper { position: relative; }
#main #sec04 .sec04-cont .text-box .swiper-slide { position: relative; }
#main #sec04 .sec04-cont .text-box .swiper-slide .txt { position: absolute; bottom: 0; width: 100%; margin-bottom: 0; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 600; line-height: 61px; background: #0000008c; }
#main #sec04 .sec04-cont .bo-radius { width:630px; height: 380px; }
#main #sec04 .sec04-cont .bo-radius iframe { width: 100%; height: 100%; }
#main #sec04 .swiper-button-prev , #main #sec04 .swiper-button-next { bottom: 0; top: auto; }
#main #sec04 .swiper-button-prev, #main #sec04 .swiper-container-rtl .swiper-button-next,
#main #sec04 .swiper-button-next, #main #sec04 .swiper-container-rtl .swiper-button-prev { background: none; }
#main #sec04 .swiper-button-prev span, #main #sec04 .swiper-button-next span { color: #fff; }

/**/
#main #sec05 { margin: 7.778em 0 6.833em; }
#main #sec05 .box-cont { display: grid; }
#main #sec05 .box-cont01 { grid-template-columns: 1fr 1fr; }
#main #sec05 .box-cont01 .box { position: relative; height: 272px; overflow: hidden; }
#main #sec05 .box-cont01 .box .more-btn { position: absolute; right: 2.611em; bottom: 2.611em; color: #F3F1F1; z-index: 1; }
#main #sec05 .box-cont01 .box img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
#main #sec05 .box-cont01 .box .tit-wr { position: absolute; top: 2.611em; left: 2.611em; color: #fff; z-index: 1; }
#main #sec05 .box-cont01 .box .tit-wr .sub-tit { font-size: 1.2rem; font-weight: 400; letter-spacing: -0em; }
#main #sec05 .box-cont01 .box .tit-wr .tit { font-size: 2.5rem; font-weight: 600; letter-spacing: 0; }
#main #sec05 .box-cont01 .box:hover img { transform: scale(1.1); }

#main #sec05 .box-cont02 { grid-template-columns: 1fr 1fr 1fr; margin-top: 2.417em; }
#main #sec05 .box-cont02 .box { display: grid; justify-items: center; }
#main #sec05 .box-cont02 .box .sub-tit { margin: 0.778em 0 0.389em; font-size: 1.8rem; }
#main #sec05 .box-cont02 .box .txt { font-size: 1.6rem; }
#main #sec05 .box-cont02 .box.box02 { border-right: 1px solid #D7D8D5; border-left: 1px solid #D7D8D5; }



@media all and (max-width:1600px) {
 #main #sec01 .swiper-progress-bar { width: calc(100% - 39.291667%); }
 #main #sec01 .swiper-button-next, #main #sec01 .swiper-container-rtl .swiper-button-prev { left: 148px; }

 #main #sec02 .img-box { width: 323px; height: 483px; }

 #main #sec03 .inner { padding: 4.667em var(--main-padding) 8.333em; }
 #main #sec03 .sec03-bg { height: 399px; }

 #main #sec04 { height: 698px; }
 #main #sec04 .tab-cont { height: 100%; }
 #main #sec04 .sec04-cont { height: 100%; }
 #main #sec04 .sec04-cont .bo-radius { width: 100%; height: calc(100% - 14.5em); }
 #main #sec04 .sec04-cont .text-box { padding: 4.167em 5.167em; }
 }

 /*1024*/
@media all and (max-width:1299px) {
 #main #sec01 { height: 100vh; }
 #main #sec01 .tit-wr { transform: translate(-50%, -10.056em); word-break: keep-all;}
 #main #sec01 .scroll { top: auto; bottom: 5em; width: 70px; height: 70px; transform: translateY(35px); }
 #main #sec01 .scroll .scroll-btn { margin-top: -1.8em; }
 #main #sec01 .swiper-progress-bar { top: auto; bottom: 5em; }
 #main #sec01 .swiper-button-next, #main #sec01 .swiper-button-prev { top: auto; bottom: 5em; width: 70px; height: 70px; transform: translateY(35px); }
 #main #sec01 .swiper-button-next img, #main #sec01 .swiper-button-prev img { width: 100%; }
 #main #sec01 .swiper-button-next, #main #sec01 .swiper-container-rtl .swiper-button-prev { left: 113px; }

 #main #sec02 .inner { flex-direction: column-reverse; }
 #main #sec02 .sec02-tit-wr { align-self: flex-start; margin-top: calc(var(--main-padding)*2); }
 #main #sec02 .sec02-tit-wr .txt { margin-bottom: 2.5em; }
 #main #sec02 .sec02-img { justify-content: flex-end; }
 #main #sec02 .img-box.img-box01 { margin-top: 0; }
 #main #sec02 .img-box.img-box02 { margin-left: 1em; margin-top: -10.056em; }
 #main #sec02 .img-box { margin-right: 0; }

 #main #sec03 { margin-top: calc(var(--main-padding)*2); }
 #main #sec03 .inner { padding-right: 0; padding-top: calc(var(--main-padding)*2); }
 #main #sec03 .scroll-wr { overflow-x: scroll; }
 #main #sec03 .box-wr { width: 1300px; padding-bottom: 1em; }
 #main #sec03 .sec03-bg { height: 341px; background: #F3F1F1 url(../img/sec03_bg.png)no-repeat 100% 122% / 52%; }

 #main #sec04 { height: 600px; }
 #main #sec04 .sec04-cont .text-box { padding: 4.167em 4.167em; }



 }


 /*768*/
 @media all and (max-width:1023px) {
 #main #sec01 .swiper-progress-bar { width: 50%; }
 #main #sec01 .swiper-button-next, #main #sec01 .swiper-container-rtl .swiper-button-prev { left: 96px; }

 #main #sec02 .img-box { width: 50%; height: auto; }
 #main #sec02 .img-box.img-box02 { margin-top: 0; }
 #main #sec02 .sec02-img { justify-content: flex-start; margin-top: var(--main-padding); }

 #main #sec03 .sec03-bg { background: #F3F1F1 url(../img/sec03_bg.png)no-repeat 100% -50% / 52%; }

 #main #sec04 { height: 517px; }
 #main #sec04 .sec04-cont .text-box { display: grid; align-content: center; justify-items: center; padding: 4.167em 3.167em; }
 #main #sec04 .sec04-cont .text-box .swiper-slide .txt { line-height: 45px; }
 #main #sec04 .sec04-cont .text-box .more-btn { margin-right: auto; }
 #main #sec04 .sec04-cont .bo-radius { height: auto; min-height: 182px; }
 #main #sec04 .swiper-button-next, #main #sec04 .swiper-button-prev { height: 35px; }

 #main #sec05 .box-cont01 .box { height: 173px; }

 }


 @media all and (max-width:950px) {
  #main #sec01 .tit{font-size: 3.5rem;}
}
 /*420*/
 @media all and (max-width:767px) {



 #main #sec01 .tit { font-size: 3rem; }
 #main #sec01 .tit-wr { padding: var(--main-padding); }
 #main #sec01 .tit-wr img { width: 187px; }
 #main #sec01 .swiper-button-next, #main #sec01 .swiper-button-prev { width: 55px; height: 55px; }
 #main #sec01 .swiper-button-next, #main #sec01 .swiper-container-rtl .swiper-button-prev { left: 69px; }
 #main #sec01 .scroll { width: 55px; height: 55px; }
 #main #sec01 .scroll .scroll-btn { width: 14px; }

 #main #sec02 .inner { padding-right: 0;}
 #main #sec02 .img-txt { left: 1.5em; bottom: 1.667em; }

 #main #sec02 .img-box::after { bottom: -1.8em; right: -1.3em; }
 #main #sec02 .img-box.img-box02::after { bottom: -2.5em; right: -1.5em; }
 #main #sec02 .img-txt .tit {font-size: 2.5rem;}
 #main #sec02 .img-txt .sub-tit {font-size: 1.6rem; white-space: nowrap;font-family: 'poppins';}
 #main #sec02 .scroll-wr {    overflow-x: scroll;    padding-bottom: 4em;}
 #main #sec02 .sec02-img {width: 532px;}
 #main #sec02 .sec02-tit-wr .txt {word-break: keep-all;padding-right: var(--main-padding); }
 #main #sec02 .sec02-tit-wr .txt br {display: none;}

 #main #sec03 .sec03-bg {    background: #F3F1F1 url(../img/sec03_bg.png)no-repeat 100% -29% / 66%;}

 #main #sec04 {height: 860px;}
 #main #sec04 .sec04-cont {grid-template-columns: 1fr;}
 #main #sec04 .sec04-cont .img-box {    height: 270px;}
 #main #sec04 .tit-wr {top: calc(var(--main-padding)*1.52);   left: var(--main-padding);    margin-top: 0;}
 #main #sec04 .sec04-cont .text-box {padding:4em var(--main-padding);height: 590px;}
 #main #sec04 .sec04-cont .text-box .icon {width: 28px;}

 #main #sec05 {margin: calc(var(--main-padding)*3) 0;}
 #main #sec05 .box-cont01 {    grid-template-columns: 1fr;}
 #main #sec05 .box-cont01 .box .tit-wr {top: calc(var(--main-padding)*2); left: var(--main-padding);}
 #main #sec05 .box-cont01 .box .more-btn {right:calc(var(--main-padding)*2); bottom:calc(var(--main-padding)*2);}
 #main #sec05 .box-cont02 .box .txt {display: none;}

 }

 @media all and (max-width:480px) {
   .pc_img{display:none !important;}
   .img_480{display:block;}
    #main #sec01 .swiper-progress-bar{bottom: 4.5em;left: 55%;width: 45%}

    #main #sec02 .sec02-tit-wr .more-btn{font-size: 2rem;}

    #main #sec04 .tab-button{font-size: 2.2rem;}
    #main #sec04 .sec04-cont .text-box .icon{width: 40px;}
    #main #sec04 .sec04-cont .sub-tit{font-size: 3rem;}
    #main #sec04 .sec04-cont .text-box .more-btn{font-size: 2rem;}
    #main #sec04 .sec04-cont .text-box .swiper-slide .txt{font-size: 2.3rem;}

    #main #sec05 .box-cont02 .box .sub-tit {font-size: 2.2rem;}
    #main #sec05 .box-cont01 .box .tit-wr .sub-tit{font-size: 1.9rem;}
    #main #sec05 .box-cont01 .box .tit-wr .tit{font-size: 2.9rem;}
    #main #sec05 .box-cont01 .box .more-btn{font-size: 2rem;}
 }



 /*340*/
 @media all and (max-width:400px) {
  #main #sec01 .swiper-progress-bar{width: 35%}
 }