@charset "utf-8";
/* reset */
*, :after, :before {background-repeat:no-repeat;box-sizing:border-box}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;tab-size:4}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, sub, sup, tt, var,  u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block; }
ol, ul{list-style:none; }
blockquote, q{quotes:none; }
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none; }
table{border-collapse:collapse; border-spacing:0; }
img, picture, video, canvas, svg {max-width:100%;height: auto;}
a{background-color:transparent;text-decoration:none; color:inherit;}
a:active, a:hover{outline:0; }
[hidden], template{display:none; }
sub, sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sup{top:-0.5em; }
sub{bottom:-0.25em; }
small{font-size:80%; }
code, kbd, pre, samp{font-family:monospace, monospace; font-size:1em; }
button, input, optgroup, select, textarea{color:inherit; font:inherit;  margin:0;-webkit-border-radius:0;border-radius:0;border:0}
button, 
html input[type="button"], 
input[type="reset"], 
input[type="submit"]{/*-webkit-appearance:button;*/cursor:pointer;padding:0;background:transparent;}
button[disabled], 
html input[disabled]{cursor:default; }
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none; }
input[type="search"]{/*-webkit-appearance:textfield;*/box-sizing:content-box; }
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button{height:auto; }
input[type="checkbox"], input[type="radio"]{box-sizing:border-box; padding:0; }
input{line-height:normal; }
textarea {-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:transparent;border:0;word-break:keep-all;word-wrap:break-word}
input::placeholder,textarea::placeholder{opacity:1;color:theme('colors.gray.400',#9ca3af)}

.br-pc,.br-mb {display: none;}
@media screen and (max-width: 640px) {
    .br-mb {display: block;height: 0;}
    #name-wide.w-detail .info-sec{min-height:280px;}
}
@media screen and (min-width: 641px) {
    .br-pc {display: block;height: 0;}
}



/* layout */
html{font-size:62.5%;  -webkit-text-size-adjust:100%;;-webkit-overflow-scrolling: touch;}
body{font-size:1.6rem; font-family:'NanumSquareRound'; line-height:1.5;color:var(--font-color1); -webkit-font-smoothing:antialiased;word-wrap: break-word;word-break: keep-all;-webkit-overflow-scrolling: touch;}
:root {
    --font-color1:#000; 
    --font-color2:#666;
    --def-family:'sans-serif';
    --ex-bold:'NanumSquare';
}
*{outline-color: #b5e1e6;}

body::-webkit-scrollbar{width:17px;} 
body::-webkit-scrollbar-thumb{width:10px;;background-color:rgba(0,0,0,0.1);border-radius:50px;background-clip: padding-box;border:4px solid transparent;border-top: 5px solid transparent;border-bottom: 5px solid transparent;}
body::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.5);}
body::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.02);}

.chrome {image-rendering: -webkit-optimize-contrast;}
.skip-nav a{position:absolute; top:-30px; left:10px; background:#000; height:30px; line-height:30px; color:#fff; font-size:12px; padding:0 6px;border-radius:10px;transition:all .4s ease-in-out;opacity:0;z-index:100}
.skip-nav a:focus,
.skip-nav a:active{top:10px;left:10px;opacity:1;}
.doc-size{position:fixed;z-index:9999;display:flex;left:0;bottom:0;width:100%;height:20px;font-size:1.0rem;justify-content: center;align-items: center;opacity:0.4;display:none;}
.doc-size:before{content:'';width:100%;height:100%;position:absolute;z-index:-1;background:#ddd;}

.hidden-obj{padding: 0 !important;margin: 0 !important;overflow: hidden;position: absolute;border: 0;width: 1px;height: 1px;clip: rect(1px,1px,1px,1px);}
dialog::backdrop{background:#000;}

/* layout mobile => pc */
/* home */
.page-wrap{position:relative;/*min-height: 100vh*/;min-height: calc(var(--vh, 1vh) * 100);overflow-y: hidden;}
.m4a-symbol {margin-left:8px;display:block;width:46px;height:38px;color:transparent;user-select:none;overflow:hidden;background:url(../images/m4a-sym.png) 0 center no-repeat;background-size:100% auto;transition:all .4s ease-in-out;}
/* .header{position:fixed;left:0;top:0;z-index:10;width:100%;transition:all .4s ease-in-out;transition-delay: .2s;} */ /*20250730*/
.header:after{content:'';position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1;background:#fff;opacity:0;transition:all .6s ease-in-out;}
.header.works:after,
.header.on:after{opacity:0.8}
.header .inc-wrap{height:70px;display:flex;flex-wrap: wrap;align-items: center}
.header .m4a-ci{position:relative;z-index:2;}
.header .nav-group{flex:none;display:flex;flex-wrap:nowrap;position:fixed;left:-100%;top:0;width:100vw;/*height: 100vh;*/height: calc(var(--vh, 1vh) * 100);background: linear-gradient(to right, white 40%,  rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0));z-index:1;transition:left .6s ease-in-out;flex-direction: column;justify-content: space-between;}
.header .nav-group.on{left:0%;}
.header .main-nav{padding:130px 22px 22px;transition: all .4s ease-in-out;}
.header .nav-near-conts{padding:22px 22px 80px;transition:all .4s ease-in-out;}
.header .nav-trg {position:relative;z-index:2;display:flex;width: 38px; height: 38px; overflow:hidden;flex-direction: column;margin-left:20px;transition:all .4s ease-in-out;}
.header .nav-trg span{color:transparent;user-select:none;overflow:hidden;}
.header .nav-trg span,
.header .nav-trg:before,
.header .nav-trg:after {content:'';display:block;width:24px;height:2px;background:#000;position:absolute;right:50%;transform:translateX(-50%);transition:all .4s ease-in-out;}
.header .nav-trg span{top:50%;right:0;}
.header .nav-trg:before{top:12px;right:0;}
.header .nav-trg:after {top:26px;right:0;}
.header .nav-trg.on span{opacity:0;}
.header .nav-trg.on:before{right:14px;top:18px;transform:rotate(45deg);}
.header .nav-trg.on:after{right:14px;bottom:auto;top:18px;transform:rotate(-45deg);}
.main-nav .nav-item{font-size:2.7rem;font-weight:900;line-height:1;font-family:var(--ex-bold)}
.main-nav li + li{margin-top:40px;}
#salesInquiry2{display:none;}
.sales-inquiry .btn-mailcopy{border:0px solid #eee;padding:0px 12px;border-radius:20px;display:inline-flex;align-items: center;}
.sales-inquiry .inquiry-trg{display:none;}
.mailID{font-size:1.6rem;}
.sales-inquiry .tel{display:none;margin-left:78px;margin-top:8px;}
.sales-inquiry .tel > a{position: relative;padding-right: 25px;display:inline-flex;align-items: center;font-size: 1.4rem;}
.sales-inquiry .tel > a:after{content: '';width: 18px;height: 18px;background: url(../images/tel1.webp) 0 0 no-repeat;background-size: 100% auto;margin-left:5px;position: relative;top: -2px;}
.sales-inquiry .btn-copy{display:inline-block;position:relative;padding: 0 9px;border-radius: 9px;background-color: #000;font-size: 1rem;color: #fff;letter-spacing:1px;vertical-align:middle;margin-left:12px;padding-top:1px;}
.sales-inquiry .btn-copy:before{content:'';position:absolute;width:100%;height:17px;background:#000;border-radius:10px;left:0;top:50%;transform:translateY(-50%);z-index:-1;}
.header .sales-mask{overflow:hidden;position:absolute;right:50px;top:50px;padding-left:10px;transition:all .4s ease-in-out;transition-delay: .2s;}
.header .sales-mask .sales-inquiry{position:relative;right:-192px;transition:all .4s ease-in-out;}
.header .sales-mask .sales-inquiry.on{right:0;}
.header .sales-mask .sales-inquiry .email{border-bottom:1px solid #000}
.header .sales-mask .sales-inquiry .tel{border-bottom:1px solid #000;padding:10px 5px 5px 10px;margin-left:134px;}
.header .sales-mask .sales-inquiry .tel > a{padding-right:0;}
.header .sales-mask .sales-inquiry .btn-mailcopy{padding:0 0 5px 10px;}
.header .sales-mask .inquiry-trg{display:block;position:absolute;left:-10px;top:0;color:transparent;user-select:none;overflow:hidden;width:75px;height:24px;padding-left:10px;}
.header .sales-mask .inquiry-trg.on:after{transform: rotate(180deg) translateY(50%);}
.header .sales-mask .inquiry-trg:after{content: '';position: absolute;height: 0;width: 0;border: 5px solid transparent;border-left: 0;border-right-color: #000;border-top-width: 4px;border-bottom-width: 4px;left: 0;top: 50%;transform: translateY(-50%);transition: all .6s ease-in-out;}
.header .sales-mask .sales-inquiry{font-size:1.4rem;font-weight:normal;}
.nav-near-conts .link-brouchure{margin-top:35px;}
.link-arrow1{position: relative;display: inline-block;padding-right: 30px;padding-bottom: 8px;font-size:1.1rem;letter-spacing: 0.02em;font-weight:900;}
.link-arrow1:before{content:'';position:absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: #000;}
.link-arrow1:after{content:'';position:absolute;right: 2px;bottom: 0;width: 10px;height: 6px;transform: skew(40deg);border-right: 1px solid #000;}
/* .footer{position:absolute;z-index:9;display:flex;align-items: center;justify-content: center;height:30px;width:100%;left:0;bottom:10px;transition:all .4s ease-in-out;}
.footer .copyright{font-size:1.0rem;} */

.header .inc-wrap{transition:all .4s ease-in-out;}
@media only screen and (min-width: 641px) {
    .page-wrap{/*min-height: 100vh;*/min-height: calc(var(--vh, 1vh) * 100);}
    .header .inc-wrap{height:125px;}
    .header .nav-trg{margin-left:44px;}
    .header .nav-trg:before,
    .header .nav-trg:after,
    .header .nav-trg span{height:2px;}
    .header.on:after{display:none;}
    .header .nav-group{background-image:linear-gradient(to right, white 30%,  rgba(255, 255, 255, 0));}
    .m4a-symbol{width:65px;margin-left:20px;}
    .pc .header .nav-trg:hover:before { width: 30%;left:auto; right: 10px; transform: rotate(45deg); top: 16px; }
    .pc .header .nav-trg:hover:after { width: 30%;left:auto; right: 10px; transform: rotate(-45deg);top:auto; bottom: 14px; }
    .pc .header .nav-trg.on:hover:before { width: 30%;left:auto; right: 27px; transform: rotate(-45deg); top: 16px; }
    .pc .header .nav-trg.on:hover:after { width: 30%;left:auto; right: 27px; transform: rotate(45deg);top:auto; bottom: 14px; }
    .pc .header .nav-trg.on:hover span{opacity:1;}
    /* .footer{width:auto;left:45px;bottom:50px;margin-top:0;height:auto;}
    .footer .copyright{font-size:1.2rem;} */
    #salesInquiry2{display:block;}
    /* .header .main-nav{padding:180px 0px 0px 100px;;}
    .main-nav li + li{margin-top:68px;} */
    .main-nav .nav-item{font-size:4rem;position:relative;}
    .main-nav .nav-item:before{content: '';position: absolute;left: 300px;max-width: 900px;height: 440px;transition: all .6s ease-in-out;opacity: 0;pointer-events: none;border-radius: 10px;width: calc(100vw - 410px);background-position: center center;background-size: auto 100%;}
    .pc .main-nav .nav-item:hover:before{left:260px;opacity:1;}
    .main-nav .nav-item:after{content: '';height: 2px;width: 0px;background: #000;position: absolute;bottom: -20px;left: 0;transition: all .6s ease-in-out;}
    .pc .main-nav .nav-item:hover:after{width:520px;}
    .main-nav li:nth-child(1) .nav-item:before{background-image:url(../images/nav-img1.webp)}
    .main-nav li:nth-child(2) .nav-item:before{top:-100px;background-image:url(../images/nav-img2.webp)}
    .main-nav li:nth-child(3) .nav-item:before{top:-210px;background-image:url(../images/nav-img3.webp)}
    .header .nav-near-conts{padding-left:100px;}
}

@media only screen and (min-width: 1024px) {
    .header{top:50px;}
    .header .nav-trg{margin-left:100px;}
    .header .sales-mask{right:100px;}
    /* .footer{left:100px;bottom:90px;} */
    .header .sales-mask .sales-inquiry{right:-195px;}
}

.main-content.home{/*height: 100vh;*/height: calc(var(--vh, 1vh) * 100);display:flex;flex-direction: column;min-height:600px;}
.home .home-art1{height:60%;flex:none;transition:all .4s ease-in-out;}
.home .home-art2{background:#fff;flex:1;display:flex;flex-direction: column;padding-bottom:40px;transition:all .4s ease-in-out;}
.home .home-swiper{height:100%;}
.home .home-swiper .swiper-container{height:100%;position:relative;overflow:hidden;}
.home .home-swiper .swiper-wrapper{height:100%;}
.home .home-swiper .swiper-controler{position:absolute;right:10px;bottom:10px;z-index:4;transition:all .4s ease-in-out;}
.home .home-art2 .text-sec{padding:40px 27px 0px;}
.home .home-art2 .btn-sec{flex: 1;display: flex;align-items: center;align-content: center;justify-content: center;}
.home .home-art2 .tit1{font-weight:900;line-height:1.1;font-size:1.8rem;}
.home .home-art2 .text1{font-size:1.1rem;margin-top:10px;margin-bottom:20px;}
.home [class*=prj-item]{position:relative;width:100%;height:100%;overflow:hidden;}
.home [class*=prj-item]:before{content:'';display:block;width:100%;max-width:400px;height:100%;background:url(../images/home-prj1-m.webp) center center no-repeat;background-size:100% auto;margin:0 auto;}
.home [class*=prj-item] .view-more{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);font-size:1.0rem;transition: all .2s ease-in-out;letter-spacing:10px;text-align:center;padding:10px;white-space:nowrap;padding-right:0;transform-origin: left;font-weight:900;}
.home [class*=prj-item] .view-more:before{content:'';padding: 3px 10px;left: -10px;top: -3px;background: rgba(255, 255, 255, 0.2);opacity: 1;box-shadow: 1px 1px 15px rgb(0 0 0 / 0.12);border-radius: 30px;position: absolute;transition: all .2s ease-in-out;width:100%;height:100%;box-sizing:content-box;}
.home [class*=prj-item] .info-sec{position:absolute;;z-index:3;width:100%;left:0;top:50%;transform:translateY(-80%);transition:all .4s ease-in-out;transition-delay:.2s;text-align:center;opacity:1}
.home [class*=prj-item] .contract{position:relative;font-size:2.7rem;font-weight:900;line-height:1.1;padding:0px 50px;transition: all .4s ease-in-out;font-family:var(--ex-bold)}
.home [class*=prj-item] .contract .name{display:inline-flex;position:relative;}
.home [class*=prj-item] .contract .name:before{content:'';position:absolute;left:-11px;top:50%;transform:translateY(-50%) rotate(30deg);width:1px;height:20px;background:#000;}
.home [class*=prj-item] .contract .name:after{content:'';position:absolute;right:-11px;top:50%;transform:translateY(-50%) rotate(30deg);width:1px;height:20px;background:#000;}
.home [class*=prj-item] .partner{font-size:1.0rem;display:flex;margin-bottom:5px;align-items: center;justify-content: center;font-weight:bold;}
.home [class*=prj-item] .partner .plus{width:30px;text-align:center;font-weight:normal;}
.home [class*=prj-item] .text1{text-align:right;flex:1;}
.home [class*=prj-item] .text2{text-align:left;flex:1;}
#homeSwiper .swiper-pagination{width:100%;bottom:20px;left:0;z-index:3;transition:all .4s ease-in-out;}
#homeSwiper .swiper-pagination > span{flex:1;border-radius:0;margin:4px;opacity:0.2;height:2px;width:13px;transition:all .4s ease-in-out;overflow:hidden;color:transparent;user-select:none;}
#homeSwiper .swiper-pagination > span.swiper-pagination-bullet-active{background:#000;opacity:1}
#homeSwiper .swiper-pagination > span.swiper-pagination-bullet-active:before{content:'현재 ';position:absolute;}
#homeSwiper .swiper-button-prev, #homeSwiper .swiper-button-next{border-bottom: 1px solid #000;width: 100px;padding: 2px 5px;font-size: 1.6rem;margin-top: -50px;transition: all .4s ease-in-out;opacity: 0;color:var(--font-color1);z-index:5;}
#homeSwiper .swiper-button-prev:after, #homeSwiper .swiper-button-next:after{display:none;}
#homeSwiper .swiper-button-prev{left:40px;text-align:right;}
.pc #homeSwiper .swiper-button-prev:hover{left:50px;font-weight:bold;}
#homeSwiper .swiper-button-prev:before{content: '';width: 15px;height: 15px;border-left: 1px solid #000;position: absolute;left: 8px;bottom: 0;transform: skew(-45deg);}
#homeSwiper .swiper-button-next{right:40px;text-align:left;}
.pc #homeSwiper .swiper-button-next:hover{right:50px;font-weight:bold;}
#homeSwiper .swiper-button-next:before{content: '';width: 15px;height: 15px;border-right: 1px solid #000;position: absolute;right: 8px;bottom: 0;transform: skew(45deg);}
#homeSwiper .pagination-num{position:absolute;left:50%;top:50%;z-index:9;margin-top:130px;transform:translateX(-50%);letter-spacing:4px;transition:all .4s ease-in-out;opacity:0;font-weight:bold;}
#homeSwiper .pagination-num > b{font-weight:900;}

#homeSwiper .prj-item1{background:linear-gradient(-45deg, #9bd4e7, #a8c7ea);}
#homeSwiper .prj-item1:before{background-image:url(../images/home-prj1-m.webp?v=1);}
#homeSwiper .prj-item2{background:linear-gradient(-45deg, #c9c1f4, #b8aeeb);}
#homeSwiper .prj-item2:before{background-image:url(../images/home-prj2-m.webp?v=1);background-position:right center;margin-right:0}
#homeSwiper .prj-item3{background:linear-gradient(-45deg, #bac0f0, #bac1ef);}
#homeSwiper .prj-item3:before{background-image:url(../images/home-prj3-m.webp?v=1)}
#homeSwiper .prj-item4{background:linear-gradient(-45deg, #b4e1e7, #b4e1e7);}
#homeSwiper .prj-item4:before{background-image:url(../images/home-prj4-m.webp?v=1)}
#homeSwiper .prj-item5{background:linear-gradient(-45deg, #f9f9fb, #c6d0eb);}
#homeSwiper .prj-item5:before{background-image:url(../images/home-prj5-m.webp?v=1);background-position:center bottom;}
#homeSwiper .prj-item6{background:linear-gradient(0deg, #c6d0eb , #cfc3eb);}
#homeSwiper .prj-item6:before{background-image:url(../images/home-prj6-m.webp?v=1);background-position:center bottom;}


.swiper-controler button{display: inline-block;width: 40px;height: 40px;color: transparent;position: relative;transition: all .6s ease-in-out;overflow:hidden;user-select:none;}
.swiper-stop:before{content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-left: 4px;height: 11px;width: 3px;background: #000;}
.swiper-stop:after{content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-left: -4px;height: 11px;width: 3px;background: #000;}
.swiper-play:after{content: '';position: absolute;height: 0;width: 0;border: 8px solid transparent;
border-right: 0;border-left-color: #000;border-top-width: 6px;border-bottom-width: 6px;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-left: 2px;}

.btn-all-project {text-align:left;position:relative;display: inline-block;font-weight:100;font-size: 1.2rem;width: 100px;padding-bottom: 10px;border-bottom: 1px solid #fff;margin-top: -10px;transition: all .2s ease-in-out;transform-origin: right bottom;font-weight:900;}
.btn-all-project:before{content:'';width: 10px;height: 10px;transform: skew(35deg);position: absolute;right: 2px;bottom: -1px;border-right: 2px solid #fff;}
.pc .btn-all-project:hover{transform: scale(1.1);}


.wheel-zone {position:relative;font-size:1.1rem;line-height:1.4;height:60px;width:120px;margin:0 auto;padding-left:25px;transition:all .4s ease-in-out;font-weight:bold;}
.wheel-zone button{text-align:left;padding:10px;margin:-10px}
.wheel-zone button em{display:none;}
.wheel-zone .ani-arrow { width: 18px; height: 40px; position: absolute; left: -10px; bottom: 25px; border-right: 1px solid #000; animation: moveDown 1s ease-in-out infinite; }
.wheel-zone .ani-arrow:before {content:'';width: 7px; height: 7px; border-bottom: 1px solid #000; position: absolute; bottom: 0; right: 0; transform: rotate(35deg); transform-origin: bottom right; }
.wheel-zone.on .ani-arrow:before{bottom:auto;;top:-2px; transform: rotate(-55deg);border-top: 1px solid #000;border-bottom:0;right:0px;transform-origin:top right;}
@keyframes moveDown { 0% { bottom: 25px; }
  50% { bottom: 15px; }
  100% { bottom: 25px; } 
}

.home-prj-list{position:fixed;width:100vw;/*height: 100vh;*/height: calc(var(--vh, 1vh) * 100);background:rgba(0,0,0,0.7);left:0;top:100vh;z-index:8;color:#fff;transition:top .6s ease-in-out;border-radius:30px;}
.homePrjOpen .home-prj-list{top:0vh;border-radius:0px;}
.homePrjOpen .header{width:calc(100% - 38px);filter: invert();transition:all .4s ease-in-out;transition-delay:.4s;}
.homePrjOpen .header .nav-group{left:-120%;}
.homePrjOpen .header .nav-group.on{left:0;}
/* .homePrjOpen .footer{filter: invert();font-weight:bold;} */
.homePrjOpen .home [class*=prj-item] .info-sec{transform: translateY(-140%); opacity:0;transition-delay:0s;}

.homePrjOpen .wheel-zone{opacity:0;}
.homePrjOpen #homeSwiper .pagination-num{margin-top:200px;opacity:0;}
.homePrjOpen #homeSwiper .swiper-button-prev,
.homePrjOpen #homeSwiper .swiper-button-next{margin-top:20px;opacity:0;transition-delay:0s;} 
.home-prj-list .prj-list-wrap{padding:18vh 15px 0px 30px;display:flex;flex-direction: column;transition:all .4s ease-in-out;}
.home-prj-list .prj-list-wrap .under-box{text-align:right;}
.btn-close-w{z-index: 10;width: 38px;height: 38px;position: absolute;right: 15px;top: 15px;overflow: hidden;color:transparent;user-select: none;}
.btn-close-w:before{content:'';position: absolute;width: 24px;height: 1px;background: #fff;right: 6px;transform: rotate(45deg);top: 17px;}
.btn-close-w:after{content:'';position: absolute;width: 24px;height: 1px;background: #fff;right: 6px;transform: rotate(-45deg);top: 17px;}
.home-prj-list .link-block{display: inline-block;line-height: 1.2;opacity: 1;transition: all .6s ease-in-out;position: relative;}
.home-prj-list a.link-block:before{content: '';height: 1px;width: 0;background: #fff;position: absolute;bottom: -15px;left: 0;transition: all .4s ease-in-out;}
.pc .home-prj-list a.link-block:hover:before{width: calc(100% + 30px);}
.home-prj-list .prj-item{margin-bottom:23px;max-width:100%;}
.home-prj-list .prj-item .contract{font-weight:bold;}
.home-prj-list .prj-item .text1{font-size:1.1rem;margin-bottom:8px;}

@media only screen and (min-width: 641px) {
    .home .home-art1{height:100%;min-height:640px;}
    .home .home-art2{height:0;padding:0;}
    .home .home-art2 .text-sec{display:none;}    
    .home .home-swiper .swiper-controler{right:35px;bottom: 40px;}
    .home [class*=prj-item]:before{background-size:180% auto;max-width:100%;}
    .home [class*=prj-item]:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:rgba(255,255,255,0.5)}
    .home [class*=prj-item] .partner{font-size:1.6rem;font-weight:bold;margin-bottom:20px;}
    .home [class*=prj-item] .contract{font-size:5.2rem;padding:0px 50px;margin-top:25px;max-width:1200px;margin:0 auto;}
    .home [class*=prj-item] .contract .name{margin:0px 100px;}
    .home [class*=prj-item] .contract .name:before,
    .home [class*=prj-item] .contract .name::after{opacity:0;}
    
    #homeSwiper .pagination-num{opacity:1;}
    .pc .home [class*=prj-item] .view-more:hover{transform: scale(1.15) translateX(-50%);}
    .home .home-art2 .btn-sec{position:relative;z-index:4}
    .wheel-zone{margin-top:-250px;font-size:1.5rem;width:145px;}
    .wheel-zone .ani-arrow{height:70px;}
    .wheel-zone .ani-arrow:before{width:20px;height:20px;}
    @keyframes moveDown { 
        0% { bottom: 0px; }
        50% { bottom: -10px; }
        100% { bottom: 0px; } 
    }
    
    #homeSwiper .swiper-pagination{bottom:0px;display:flex;}
    #homeSwiper .swiper-pagination > span{margin:0;height:3px;background:#fff;opacity:0.2}
    #homeSwiper .swiper-button-prev, #homeSwiper .swiper-button-next{display:block;transition-delay:.2s;opacity:1;}
    #homeSwiper .prj-item1{background:linear-gradient(-45deg, #2773cb, #0297c2);}
    #homeSwiper .prj-item1:before{background-image:url(../images/home-prj1-t.webp?v=2);}
    #homeSwiper .prj-item2{background:linear-gradient(-45deg, #5037db, #7c62e9);}
    #homeSwiper .prj-item2:before{background-image:url(../images/home-prj2-t.webp?v=2);background-position:center top;}
    #homeSwiper .prj-item3{background:linear-gradient(-45deg, #555cd0, #5166db);}
    #homeSwiper .prj-item3:before{background-image:url(../images/home-prj3-t.webp?v=2)}
    #homeSwiper .prj-item4{background:linear-gradient(-45deg, #42b3c5, #42b3c5);}
    #homeSwiper .prj-item4:before{background-image:url(../images/home-prj4-t.webp?v=2)}
    #homeSwiper .prj-item5{background:linear-gradient(-45deg, #f0f1f6,#89a2dd);}
    #homeSwiper .prj-item5:before{background-image:url(../images/home-prj5-t.webp?v=2);background-position:center bottom;}
    #homeSwiper .prj-item6{background:linear-gradient(0deg, #718acc , #8868cd);}
    #homeSwiper .prj-item6:before{background-image:url(../images/home-prj6-t.webp?v=2);background-position:center bottom;}
    .home-prj-list .prj-list-wrap{padding:200px 45px 0px 45px;}
    .home-prj-list .prj-list-wrap > ul{overflow:visible;display:flex;flex-wrap:wrap;}
    .home-prj-list .prj-list-wrap .prj-item {width:50%;margin-bottom:30px;}
    .home-prj-list .prj-item .text1{font-size: 1.6rem;font-weight: normal;}
    .home-prj-list .prj-item .contract{font-size:2.4rem;font-weight: bold;word-break: break-word;margin-top: 10px;transition: all .6s ease-in-out;}
    .pc .home-prj-list .prj-list-wrap .link-block:hover:before{width: calc(100% + 30px);}
    .btn-all-project{font-size: 1.6rem;position: relative;width: 300px;margin-top:20px;transform-origin:left;}
    .btn-all-project:before{width:10px;height:20px;right:6px;}
    .btn-all-project br{display:none;}
    .homePrjOpen .sales-mask{right:12px;transition-delay:.4s;}
    
}

@media only screen and (min-width: 750px) {
    .home [class*=prj-item]:before{background-size:1400px auto;}  
}

@media only screen and (min-width: 1024px) {
    .home .home-swiper .swiper-controler{right:87px;bottom:80px;}
    #homeSwiper .swiper-button-prev{left:90px;}
    #homeSwiper .swiper-button-next{right:90px;}
    .pc #homeSwiper .swiper-button-prev:hover{left:100px;}
    .pc #homeSwiper .swiper-button-next:hover{right:100px;}
    .home [class*=prj-item] .contract{font-size:6.0rem;line-height:1;}
    .home [class*=prj-item] .contract .name {display: inline-block;margin: 0px 250px;}
    .home [class*=prj-item] .contract .name:before{opacity:1;left: -40px;font-weight: bold;width:3px;height:30px;}
    .home [class*=prj-item] .contract .name:after{opacity:1;position: absolute;right: -40px;top: 50%;font-weight: bold;width:3px;height:30px;}
    .header .main-nav{padding-top:220px;padding-left:155px;}
    .header .nav-near-conts{padding-left:155px;}
    .home-prj-list .prj-list-wrap{padding:220px 100px 0px;align-items: center;}
    .home-prj-list .prj-list-wrap > ul{max-width:1000px;}
}

@media only screen and (min-width: 1440px) {
    .home [class*=prj-item]:before{background-size:auto 100%;}
}

/* about */
.about .art1{background:url(../images/bg-about1.webp) center 0 no-repeat fixed;background-size:1000px auto;height:100vh;overflow:hidden;}
.about .art2{background:url(../images/bg-about2.webp) center 0 no-repeat fixed;background-size:cover;}
.about .art3{background:url(../images/bg-about3.webp) center 0 no-repeat fixed;background-size:cover;}
.about .ioa-art{min-height:100vh;position:relative;transition:all .4s ease-in-out;}
.about .art1:before{content:'';position: absolute;left: 0px;top: 0;width: 100%;height: 100%;background: #fff;opacity: 0.8;}
.about .art1.observe .art1-ani{content:'';position: fixed;left: 0px;top: 0;width: 100%;height: 100%;background: url(../images/bg-about1-ani.webp) center 0 no-repeat fixed;animation: aboutArt1 3s infinite;background-size:1000px auto;color:transparent;user-select:none;}
@keyframes aboutArt1 { 
    0% { transform: translateY(20px); }
    50% { transform: translateY(0); }
    100% { transform: translateY(20px); } 
}


/*.about .ioa-art:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:calc(100vh - 430px);background:linear-gradient(to top,#f1f1f1,transparent);}*/
.about .art2:before,
.about .art3:before{content:'';width:100%;height:100%;position:absolute;left:0;top:0;background:#fff;opacity:0.8}
.about .ioa-art .art-contents{position:relative;z-index:1;top:40px;transition:all .5s ease-in-out;transition-delay:.4s;padding:80px 20px 0px 20px;min-height:100vh;}
.about .ioa-art.observe{opacity:1;}
.about .ioa-art.observe .art-contents{top:0;}
.about .btn-sec{margin-top:40px;}
.about .art3 .btn-sec{margin-top:20px;}
.about .art1{position:sticky;width:100%;height:100vh;left:0;top:0;}
.about .art2,
.about .art3{opacity:1;transition:all 1s ease-in-out;}
.about .art1 .btn-sec{text-align:left;}
.about .art1 .art-contents{height:100vh;top:-40px;}
.about .subject{position:absolute;width:100%;top:50%;left:0;text-align:center;margin-top:110px;}
.about .subject .tit{font-size:2.0rem;line-height:1.2;font-weight:900;transition:all .4s ease-in-out;text-shadow: 1px 1px #fff;font-family:var(--ex-bold)}
.about .subject .sub-txt{font-size:1.1rem;margin-top:10px;}
.about .art-tit{font-size:2.4rem;line-height: 1.1;transition: all .4s ease-in-out;font-weight:900;font-family:var(--ex-bold)}
.about .art-txt{margin-top: 20px;max-width: 790px;font-size: 1.4rem;}
.about .process{margin-top: 15px;transition: all .4s ease-in-out;}
.about .process .tit{font-size: 1.6rem;line-height:1.1;font-weight:900;}
.about .process .sub-txt{font-size:1.2rem;margin-top:10px;}
.about .art3 .process{display:flex;flex-wrap:wrap;align-content: flex-start;align-items: flex-start;flex-direction: row;}
.about .process .step{padding-top:15px;}
.about .art3 .process .step{width:50%;}
.about .art3 .process .step:nth-child(even){padding-left:12px;}
.about .art3 .process .step:nth-child(odd){padding-right:12px;}
.about .art3 .process .step + .step{margin-top:0;}
.about .art3 .process .step li{padding-left:15px;position:relative;}
.about .art3 .process .step li:before{content:'- ';position:absolute;left:0;top:0;}
.about .art3 .process .step li + li{margin-top:4px;}

@media only screen and (min-width: 641px) {
    .about .ioa-art:after{display:none;}
    .about .art1,
    .about .art1.observe .art1-ani,
    .about .art2,
    .about .art3{background-size:cover;}
    .about .wheel-zone{margin-top:50px;}
    .about .subject{margin-top:150px;}
    .about .subject .tit{font-size:3.5rem;}
    .about .subject .tit br{display:none;}
    .about .subject .sub-txt{font-size:1.4rem;}
    .about .ioa-art .art-contents{padding:180px 50px 0px 50px;}
    .about .art-tit{font-size:3.5rem;}
    .about .art-txt{font-size:1.6rem;font-weight:bold;}
    .about .process{display:flex;margin-top:80px;justify-content: space-between;}
    .about .process .step{flex:1;}
    .about .process .step + .step{margin-left:50px;}
    .about .process .tit{font-size:2.0rem;padding-bottom: 24px;border-bottom:2px solid #000;}
    .about .process .sub-txt{margin-top: 24px;font-weight: bold;font-size: 1.6rem;}
    .about .art3 .process{flex-wrap:wrap;margin-top:60px;}
    .about .art3 .process .step{flex:none;}
    .about .art3 .process .step + .step{margin-left:0;}
    .about .art3 .process .step:nth-child(odd){padding-right:25px;}
    .about .art3 .process .step:nth-child(even){padding-left:25px;}
    .about .art3 .process .tit{font-size:1.6rem;padding-bottom:15px;}
    .about .art3 .process .sub-txt{font-size:1.4rem;margin-top:15px;}
}
@media only screen and (min-width: 1024px) {
    .about .art1,
    .about .art1.observe .art1-ani{background-size:1500px auto;}
    .about .ioa-art .art-contents{padding:230px 100px 0px;}
    .about .wheel-zone{margin-top:100px;}
    .about .art1 .wheel-zone{margin-top:60px;}
    .about .subject .tit{font-size:4.8rem;}
    .about .subject .sub-txt{font-weight: bold;letter-spacing: 3px;}
    .about .art-tit{font-size:4.8rem;}
    .about .art3 .process .tit{height:35px;position:relative}
    .about .art3 .process .tit:before{content:'';height: 20px;width: 20px;border-right: 2px solid #000;transform-origin: right bottom;position: absolute;right: 0;bottom: 0;transform: skew(35deg);}
    .about .art3 .process .step{flex:1; width:auto;}
    .about .art3 .process .step:nth-child(odd){padding-right:50px;}
    .about .art3 .process .step:nth-child(even){padding-left:0px;padding-right:50px}
}

/* contact*/
.contact-sec{padding: 90px 20px 40px;display:flex;flex-direction: column;height: calc(100vh - 55px);}
.contact-art1{padding-bottom:30px;}
.contact-art2{width:100%;padding-bottom:30px;flex:1;}
.contact .address{font-size:2.7rem;transition:all .4s ease-in-out;line-height:1.2;font-weight:bold;}
.contact .address-eng{font-size:1.2rem;margin-top:20px;font-weight:bold;}
.contact .info{margin-top:20px;font-size:1.2rem;}
.contact .info b{display:inline-block;width:40px;font-weight:900;}
.contact .brochure{position:absolute;left:20px;bottom:80px;}
.contact .m4a-map{width:100%;height:100%;/*background:url(../images/nav-img3.webp) center center no-repeat;*/transition:all .4s ease-in-out;border-radius:10px ;}
@media only screen and (min-width: 641px) {
    .contact-sec{padding: 150px 40px 60px;flex-direction: row-reverse;} 
    .contact-art1{width:200px;position:relative;}
    .contact-art2{/* padding-right:40px; */ padding-bottom:0;}
    .contact .address{font-size:2.0rem;}
    .contact .info{font-size:1.4rem;margin-top:45px;}
    .contact .brochure{left:0;bottom:0;}
    .main-content.contact{min-height:100vh}

}
@media only screen and (min-width: 1024px) {
    .contact-sec{padding: 200px 100px 130px;} 
    .contact-art1{width:365px;}
    .contact .address{font-size:4.0rem;}
    .contact .address-eng{font-size:1.4rem;}

}

/* wrok */
.works-list-sec{padding:85px 20px 0px}
.works-list-sec .works-list{display:flex;flex-wrap:wrap;}
.works-list-sec .list-item{padding-bottom:60px;position:relative;width:100%;opacity:0;margin-top:40px;transition:all .4s ease-in-out;}
.works-list-sec .list-item .link-block{display:block;position:relative;transition:all .4s ease-in-out;}
.works-list-sec .list-item.observe{opacity:1;margin-top:0;}
.w-detail .info-sec{position:relative;}
.w-detail .ptn{font-size:1.2rem;font-weight:900;}
.w-detail .name{font-size:2.0rem;font-weight:900;line-height:1.3;margin-top:3px;text-shadow: 1px 1px 0px rgb(255 255 255 / 60%);}
.w-detail .date,
.w-detail .kind{margin-top:8px;font-size:1.2rem;position:relative;padding-left:110px;}/* 20250523수정 padding-left:70px */
.w-detail .date b,
.w-detail .kind b{font-weight:900;position:absolute;left:0;top:0;}
.w-detail .kind{margin-top:0;}
.w-detail.type1 .info-sec{padding-top:18px;}
.w-detail.type1 .img-sec{position:relative;width:100%;height:0px;padding-top:65%;background-color:rgba(0,0,0,0.0);background-size:100% auto;background-position:center center;transition:all .4s ease-in-out;}
.works-list-sec .type1 a.link-block:hover .img-sec{background-size:110% auto;}
.works-list-sec .type2:before{content:'';width:200px;height:200px;position:absolute;border-radius:100%;right:0;top:0;background:#7a92f1;z-indeX:-1;}
.works-list-sec .type2.bg2:before{background:#26a57a}
.works-list-sec .type2.bg3:before{background:#f37163}
.works-list-sec .type2.bg4:before{background:#616c97}
.works-list-sec .type2{height:260px;}
.works-list-sec .type2 .link-block{height:100%;}
.w-detail.type2 .info-sec{position:absolute;top:50%;transform:translateY(calc(-50%));margin-top:-3px;left:50px;width:200px;}
.works-list-sec .type2.bg4 .info-sec{width:170px;}
.w-detail.type3 .info-sec{padding-bottom:18px;}
.w-detail.type3 .info-sec:after{content:'';width:87%;height:2px;background:#000;position:absolute;left:0;bottom:0;}
.works-list-sec .type4{padding-top:15px;padding-bottom:75px;}
.works-list-sec .type4:before{content:'';position: absolute;right: 17%;top: 0;width: 63%;height:calc(100% - 60px);border-style: solid;border-image: linear-gradient(125deg, #c0e7fb 0%, #b7b2f4 100%);border-width: 7px;border-image-slice: 1;z-indeX:-1;}
.works-list-sec .type4.bg2:before{border-image: linear-gradient(125deg, #fbd4d0 0%, #ff968c 100%);
border-image-slice: 1;}
.works-list-sec a.link-block:before{content:'CLICK';position:absolute;right:10px;top:-10px;width:30px;height:30px;background:url(../images/click.webp) center center no-repeat;text-align:center;display:flex;background-size:100% auto;color:transparent;opacity:.9;transform:rotate(-35deg);animation: worksClick 2s infinite;}


@keyframes worksClick { 
    0% { transform: rotate(-35deg); }
    5% { transform: rotate(-45deg); }
    10% { transform: rotate(-35deg); }
    15% { transform: rotate(-45deg); }
    20% { transform: rotate(-35deg); } 
    100% { transform: rotate(-35deg); } 
}

@media only screen and (min-width: 641px) {
    .works-list-art2{margin-top:20px;padding-top:80px;border-top:1px solid #ccc;}
    .header.works{top:-30px;opacity:0;transition-delay:0s}
    .header.works:after{opacity:0;}
    .works-list-sec{padding:150px 40px 60px;}
    .works-list-sec .works-list{align-items: center;margin:0px -15px;}
    .works-list-sec .list-item{width:calc(50% - 30px);margin-left:15px;margin-right:15px;}
    .works-list-sec .type2:before{left:120px;right:auto;}
    .works-list-sec .type4:before{max-height:100px}
    .w-detail.type3 .info-sec:after{max-width:300px}
    .works-list-sec .list-item.type1 .kind{min-height:42px}
    .w-detail.type3 .info-sec .name{min-height:52px;}
}
@media only screen and (min-width: 1024px) {
    .works-list-sec{padding: 200px 100px 130px;} 
    .works-list-sec .list-item{width:50%;width:calc(25% - 30px);}
    .works-list-sec .type2:before{left:auto;right:0;}
}

@media only screen and (min-width: 1800px) {
    .works-list-sec .list-item{width:50%;width:calc(20% - 30px);}
}


/* worksDetail */
.works-detail-sec .swiper-container{overflow:hidden;height:100vh;}
.works-detail-sec .swiper-button-next{display:none;position:relative;width:10px;height:20px;color:transparent;;overflow:hidden;right:auto;margin:0;}
.works-detail-sec .swiper-button-next:before{content:'';display:block;transition:all .4s ease-in-out;position: absolute;width: 0px;height: 0px;border: 20px solid transparent;border-top: 25px solid #000;}
.works-detail-sec .swiper-button-prev{display:none;position:absolute;top:-20px;right:0;left:auto;width:10px;height:20px;color:transparent;;overflow:hidden;right:auto;margin:0;}
.works-detail-sec .swiper-button-prev:before{content:'';transition:all .4s ease-in-out;position: absolute;width: 0px;height: 0px;border: 20px solid transparent;border-bottom: 25px solid #000;}
.works-detail-sec .swiper-button-prev.swiper-button-disabled,
.works-detail-sec .swiper-button-next.swiper-button-disabled{opacity:1;}
.works-detail-sec .swiper-button-next.swiper-button-disabled:before, 
.works-detail-sec .swiper-button-prev.swiper-button-disabled:before{opacity:.1;}
.works-detail-sec .swiper-button-next:after, 
.works-detail-sec .swiper-button-prev:after{display:none;}
.works-detail-sec .swiper-control.on{top:25%;transform:translateY(-50%)}
.works-detail-sec .swiper-control{position:absolute;width:10px;right:5px;top:160px;z-index:8;transition:all .4s ease-in-out;transform:translateY(-50%)}
.works-detail-sec .swiper-control .swiper-pagination .swiper-pagination-bullet{display:block;height:20px;width:10px;background:#000;transition:all .4s ease-in-out;opacity:1;overflow:hidden;color:transparent;user-select:none;margin:7px auto;border-radius:0;opacity:.1;}
.works-detail-sec .swiper-control .swiper-pagination .swiper-pagination-bullet-active{opacity:1;}
.works-detail-sec .in-swiper-button-prev,
.works-detail-sec .in-swiper-button-next{z-index:3;position:absolute;display:none;}
.works-detail-sec .detail-art1{display:flex;flex-direction: column}
.works-detail-sec .detail-art1 .w-detail{flex:1;position:relative;z-index:1;min-height:300px;}
.works-detail-sec .w-detail .plus{width: 30px;text-align: center;font-weight: normal;display:inline-block;}
.works-detail-sec .w-detail .name{font-size:3.0rem;margin-top:10px;padding:0px 50px;line-height:1.2;transition:all .4s ease-in-out;font-family:var(--ex-bold)}
.works-detail-sec .w-detail .name > span{display:inline-flex;position:relative;}
.works-detail-sec .w-detail .name > span:before{content: '';position: absolute;left: -20px;top: 50%;transform: translateY(-50%) rotate(30deg);width: 1px;height: 20px;background: #000;}
.works-detail-sec .w-detail .name > span:after{content: '';position: absolute;right: -20px;top: 50%;transform: translateY(-50%) rotate(30deg);width: 1px;height: 20px;background: #000;}
.works-detail-sec .w-detail .info-sec{width:100%;height:100%;display:flex;flex-direction: column;align-items: center;justify-content: center;text-align:center;}
.works-detail-sec .w-detail .etc-group{text-align:left;position:absolute;left:20px;bottom:25px;width:100%;transition:all .4s ease-in-out;}
.works-detail-sec .w-detail .etc-group .etc{margin-top:5px;}
.works-detail-sec .detail-art1 .img-sec{flex:1;/*border-radius:14px 14px 0px 0px;*/position:relative;}
.works-detail-sec .detail-art1 .img-sec .img-url{width:100%;height:100%;background-position:center center;background-repeat:no-repeat;background-size:600px auto}
.art-tpl{padding:80px 20px 0px;display:flex;flex-direction: column;height:100%;}
.art-tpl .sec1{flex:none;}
.art-tpl .sec1 .tit{font-size:1.2rem;color:#2375ca;font-weight:900;}
.art-tpl .sec1 .tit1{font-size:2.8rem;line-height:1.2;font-weight:bold;margin-top:15px;}
.art-tpl .sec1 .paging{font-size:1.2rem;margin-top:15px;letter-spacing:3px;}
.art-tpl .sec1 .paging > b{font-weight:900;}
.art-tpl .sec2{display:flex;flex-direction: column;height:100%;padding-bottom:60px;}
.art-tpl .sec2 .para-sec{font-size:1.4rem;padding:20px 0px;flex:none;}
.art-tpl .sec2 .img-sec{margin:0px -20px;height:100%;animation: worksImgShow 14s infinite;background-size:auto 100%;background-position:0 center;background-repeat:no-repeat;}
.detail-art3 .art-tpl .sec2 .img-sec{background-color:#2280d8}
.art-tpl .sec2.mid{justify-content: center;}
@keyframes worksImgShow { 
    0% { background-position-x:0 }
    40% { background-position-x:100% }
    50% { background-position-x:100% }
    90% { background-position-x:0 }
    100% { background-position-x:0}
}
.art-tpl .tit-box{height:115px;position:relative;}
.art-tpl .tit-box .tit1{transition:all .4s ease-in-out;position:absolute;top:20px;opacity:0;}
.art-tpl .tit-box .tit1.on{top:0;opacity:1;}
.art-tpl .tooltip-txt{position: absolute;display: flex;background: #000;color: #fff;text-align: center;align-items: center;white-space: nowrap;transition: all .4s ease-in-out;padding: 7px 16px;font-size: 1.3rem;border-radius: 8px;z-index:4;opacity:0;top:-40px;left:50%;transform:translateX(-50%);top:-58px}
.art-tpl .tooltip-txt:after{content:'';position: absolute;left: 50%;background: #000;transform: rotate(45deg) translateX(-50%);top: 32px;width: 6px;height: 6px;}
.art-tpl .tooltip-txt.on{animation: bounce 1s ease-in-out;opacity:1;}
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { margin-top: 0px; }
    40% { margin-top: -14px; }
    60% { margin-top: -7px; } 
}

.wd1 .detail-art3 .art-tpl .sec2 .img-sec{background-size:auto 180px;}
.wd2 .detail-art3 .art-tpl .sec2 .img-sec{background-size:auto 180px;background-color:#0fb1b0}
.wd3 .detail-art3 .art-tpl .sec2 .img-sec{background-size:auto 180px;background-color:#5750de}
.wd4 .detail-art3 .art-tpl .sec2 .img-sec{background-size:auto 180px;background-color:#7f76e6}
.wd5 .detail-art3 .art-tpl .sec2 .img-sec{background-size:auto 200px;background-color:#5574ed}

.wd2.works-detail-sec .detail-art1 .img-sec .img-url{background-position:center bottom;background-size:auto 100%;}
.wd3.works-detail-sec .detail-art1 .img-sec .img-url{background-position:center top;}
.wd4.works-detail-sec .detail-art1 .img-sec .img-url{background-position:center bottom;background-size:auto 100%;}
.wd5.works-detail-sec .detail-art1 .img-sec .img-url{background-position:center top;background-size:auto 90%;}


.works-btm-fixed{position:fixed;left:0;bottom:0;z-index:5;width:100%;background: rgba(255, 255, 255, 0.2);padding:0px 20px;height:60px;/*text-shadow:1px 1px 4px rgba(255,255,255,.6)*/;display:flex;justify-content: space-between;align-items: center;border-top: 1px solid rgba(0, 0, 0, 0.1);font-weight:900;transition:all .4s ease-in-out;}
.works-btm-fixed .app-group{display:flex;align-items: center;}
.works-btm-fixed .app-group .app1{width:38px;height:38px;overflow:hidden;color:transparent;background:url(../images/ico-app-store.webp) center 8px  no-repeat;background-size:16px auto;overflow:hidden;}
.works-btm-fixed .app-group .app2{width:38px;height:38px;overflow:hidden;color:transparent;background:url(../images/ico-google-play.webp) center 10px  no-repeat;background-size:15px auto;overflow:hidden;}
.works-btm-fixed .app-group .col {margin: 0 12px;color:transparent;user-select:none;overflow:hidden;width:1px;height:10px;background:#000;overflow:hidden;}
.works-btm-fixed .ctrl-group{font-size:1.4rem;display:flex;align-items: center;justify-content: flex-end;}
.works-btm-fixed .ctrl-group .list{width:38px;height:38px;color:transparent;user-select:none;overflow:hidden;background:url(../images/ico-list.webp) center center  no-repeat;background-size:18px auto;margin:0 12px;}
.works-btm-fixed .ctrl-group > a{position:relative;}
.works-btm-fixed .ctrl-group .next{padding-right:12px;}
.works-btm-fixed .ctrl-group .next:after{content:'';width:8px;height:8px;border-right:1px solid #000;border-top:1px solid #000;position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(45deg);transform-origin:center right;margin-top:1px;}
.works-btm-fixed .ctrl-group .prev{padding-left:12px;}
.works-btm-fixed .ctrl-group .prev:after{content:'';width:8px;height:8px;border-left:1px solid #000;border-top:1px solid #000;position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:center left;margin-top:1px;}
.works-btm-fixed .swiper2-line{flex:none;position:absolute;left:0;top:-1px;height:2px;background:#f37163;transition:all .4s ease-in-out;}


.in-swiper {position:relative;}
.in-swiper img{vertical-align:top;}

.detail-swiper1 {position:relative;margin:0px -20px;z-index:1;}
.detail-swiper1:after{content:'';position:absolute;left:0;top:0;width:calc(100vw - 90px);height:100%;box-shadow: 1px 10px 40px #b8c5db;margin-left:60px;border-radius:10px;}
.detail-swiper1 .swiper-mask{overflow:hidden;margin-left:60px;}
.detail-swiper1 .swiper{margin:0;position:relative;z-index:1;width:calc(100vw - 90px);padding:6px;border-radius:5px;background:url(../images/bg-device1.webp) 0 0 no-repeat;background-size:100% auto;}
.detail-swiper1 .swiper:before{content:'';position:absolute;left:0;top:0;width:7px;height:100%;background:url(../images/bg-device1.webp) 0 0 no-repeat;background-size:auto 100%;z-index:5;}
.detail-swiper1 .swiper:after{content:'';position:absolute;right:0;top:0;width:7px;height:100%;background:url(../images/bg-device1.webp) right 0 no-repeat;background-size:auto 100%;z-index:5;}
.detail-swiper1 .swiper{overflow:visible;}
.detail-swiper1 .tooltip-txt{display:flex;}

.detail-swiper2{position:absolute;left:5px;bottom:-8vw;z-index:3;}
.detail-swiper2 .swiper-mask{width:22vw;background:url(../images/bg-device2.webp) 0 0 no-repeat;background-size:100% auto;padding:4px;border-radius:5px;box-shadow: 1px 10px 40px #b8c5db;}
.detail-swiper2 .tooltip-txt{display:none;}

.in-swiper.type1{width:210px;margin:0 auto;}
.detail-swiper3:after{content:'';position:absolute;left:o;top:0;height:100%;width:210px;border-radius:33px;box-shadow: 1px 10px 40px #b8c5db;}
.detail-swiper3 .swiper-mask{background:url(../images/bg-device2.webp) 0 0 no-repeat;background-size:210px auto;padding:14px 12px;;overflow:hidden;width:100vw;border-radius:33px}
.detail-swiper3 .swiper-mask:before{content:'';width:40px;height:100%;left:calc(210px - 40px);position:absolute;top:0;background: url(../images/bg-device2.webp) right 0 no-repeat;background-size:210px 100%;z-index:3;}
.detail-swiper3 .swiper-mask:after{content:'';width:40px;height:100%;left:-3px;position:absolute;top:0;background: url(../images/bg-device2.webp) left 0 no-repeat;background-size:210px 100%;z-index:3;}
.detail-swiper3 .swiper{margin:0;overflow:visible;width:calc(210px - 24px);}

.wd4 .detail-swiper3:before{content:'';background:url(../images/ico-sc.webp) 0 0 no-repeat;width:96px;height:119px;position:absolute;bottom:0;left:-80px;transform:rotate(-15deg);z-index:4;}
.wd5 .detail-swiper3:before{content:'';background:url(../images/ic-fang.webp) 0 0 no-repeat;width:96px;height:119px;position:absolute;bottom:0;left:-80px;z-index:4;}

@media only screen and (min-width: 641px) {
    [class*=detail-art]{max-height:100vh;overflow:hidden;}
    .works-detail-sec .swiper-control{top:175px;}
    .works-detail-sec .w-detail .etc-group{left:50px;bottom:50px;}
    .w-detail .date, 
    .w-detail .kind{font-size:1.4rem;}
    .works-detail-sec .w-detail .name{font-size:5.0rem;}
    .works-detail-sec .w-detail .name > span:before{width:2px;height:30px;left:-40px;}
    .works-detail-sec .w-detail .name > span:after{width:2px;height:30px;right:-40px;}
    .works-detail-sec .detail-art1 .img-sec{border-radius:0;}
    .works-detail-sec .detail-art1 .img-sec .img-url{background-size:120% auto;}
    .art-tpl{padding:120px 50px 00px;}
    .art-tpl .tit-box{height:62px;}
    .art-tpl .sec1 .tit1{font-size:3.5rem;margin-top:20px;}
    .art-tpl .sec1 .tit1 br {display:none;}
    .art-tpl .sec2 .para-sec{font-size:1.6rem;padding:30px 0px;}
    .art-tpl .sec1 .paging{margin-top:25px;}
    .art-tpl .sec2 .img-sec{margin:0;background-position:center 0;background-size:100% auto;background-color:transparent;height:44vw;max-height:400px;border-radius:10px;}
    .detail-art3 .art-tpl .sec2 .img-sec{margin:0;background-size:100% auto;background-position:center center;animation:none;max-height:350px}
    .in-swiper{width:100%;max-width:600px;;overflow:visible;position:absolute;left:50%;transform:translateX(-50%)}
    .in-swiper .swiper-mask{width:100vw;}
    .detail-swiper1{margin:0px -50px;}
    .detail-swiper1 .swiper{width:calc(100vw - 190px);max-width:530px;}
    .detail-swiper1 .swiper-mask{margin-left:100px;}
    .detail-swiper1:after{margin-left:100px;width:calc(100vw - 190px);max-width:530px;}
    .detail-swiper2 .swiper-mask{max-width:158px;}
    .detail-swiper2{bottom:max(-58px);}
    .art-tpl .tooltip-txt{left:50%;}
    .works-btm-fixed{padding:0px 30px}
    .art-tpl .sec2{min-height:400px;}
    .wd3.works-detail-sec .detail-art1 .img-sec .img-url{background-size:auto 100%;}
    .in-swiper.type1{width:260px;}
    .detail-swiper3:after{width:260px;border-radius:42px;height:100%;}
    .detail-swiper3 .swiper-mask{background-size:260px 100%;padding:17px 13px;border-radius:40px;}
    .detail-swiper3 .swiper-mask:before{left:217px;width:44px;background-size:260px 100%;height:100%;}
    .detail-swiper3 .swiper-mask:after{left:-4px;width:44px;background-size:260px 100%;}
    .detail-swiper3 .swiper-mask .swiper{width:234px;border-radius:40px;}
    .detail-art4 .art-tpl .sec2{min-height:400px;}
    .detail-art5 .art-tpl .sec2{min-height:500px;}
    
}

@media only screen and (min-width: 1024px) {
    .works-btm-fixed{padding:0px 80px;}
    .works-detail-sec .swiper-control{top:270px;}
    .works-detail-sec .swiper-control.on{top:27%;}
    .works-detail-sec .w-detail .info-sec{padding-top:50px;}
    .works-detail-sec .w-detail .etc-group{left:100px;bottom:20px;}
    .w-detail .ptn{font-size:1.4rem;}
    .works-detail-sec .w-detail .name{font-size:6.0rem;margin-top:20px;}
    .works-detail-sec .detail-art1 .img-sec .img-url{background-size:auto 140%;}
    .art-tpl{padding:200px 100px 0px;flex-direction: row;}
    .art-tpl .sec1{flex:none;width:270px;padding-right:60px;}
    .art-tpl .sec1 .tit1{font-size:4.0rem;margin-top:40px;}
    .art-tpl .sec1 .tit{font-size:1.4rem;}
    .art-tpl .sec1 .tit1 br{display:block;}
    .art-tpl .sec1 .paging{margin-top:30px;font-size:1.6rem;position:relative;height:180px;}
    .art-tpl .sec1 .paging:before{content:'';position:absolute;width:30px;height:100px;left:0;bottom:00px;border-left:1px solid #000;}
    .art-tpl .sec1 .paging:after{content:'';width:20px;height:20px;position:absolute;border-bottom:1px solid #000;left:0;bottom:0;transform:skew(-30deg, -30deg);transform-origin:left bottom;}
    .art-tpl .sec2{flex:1;}
    .art-tpl .sec2 .para-sec{padding-top:62px;max-width:1024px;}
    .art-tpl .sec2 .img-sec{max-height:495px;max-width:1024px;border-radius:10px;}
    .wd1 .detail-art3 .art-tpl .sec2 .img-sec{background-size:80% auto;animation:none;height:22vw}
    .art-tpl .tit-box{height:184px;}
    .in-swiper{max-width:none;left:400px;transform:translateX(0);width:calc(30vw - 230px);max-width:250px;min-width:135px;}
    .detail-swiper1:after{margin-left:20vw;max-width:900px;width: calc(100vw - 700px);min-width:500px;border-radius:30px;}
    .detail-swiper1 .swiper-mask{margin-left:20vw;}
    .detail-swiper1 .swiper{max-width:900px;width: calc(100vw - 700px);min-width:500px;padding:23px;}
    .detail-swiper2{bottom:auto;left:0;bottom:0;border-radius:30px;}
    .detail-swiper1 .swiper:before,
    .detail-swiper1 .swiper:after{width:25px;}
    .detail-swiper2 .swiper-mask{width:calc(30vw - 230px);max-width:250px;padding:10px;border-radius:30px;min-width:135px;}
    .art-tpl .tooltip-txt{top:0;padding:0px 30px;height:40px;}
    .art-tpl .tooltip-txt:after{top:auto;bottom:-4px;}
    .art-tpl .detail-swiper3  .tooltip-txt{top:-60px;}
    .works-btm-fixed .app-group .app2,
    .works-btm-fixed .app-group .app1{display: inline-flex;width:auto;color:inherit;padding-left:30px;align-items: center;background-position-x:0;}
    .works-btm-fixed .app-group .col{margin:0px 40px;}
    
}

/* Members */
.h-tit2{font-size:2.4rem;font-weight: 900;font-family: var(--ex-bold);margin-bottom:30px;transition:all .4s ease-in-out;}
.membeer-sec{padding: 0 20px 90px;transition:all .4s ease-in-out;}
.membeer-sec .members-list + .members-list{margin-top:30px;border-top:1px solid #ddd;padding-top:25px}
.membeer-sec .members-list > li + li{margin-top: 20px;}
.membeer-sec .members-list .out-link{position:relative;font-weight: 900;transition:all .4s ease-in-out;}
.membeer-sec .members-list .out-link:before{content:'';position:absolute;left:0;bottom:-5px;width:0%;height:1px;background:#000;transition:all .4s ease-in-out;color:#000;}
.membeer-sec .members-list .out-link:after{content:'';width:15px;height:15px;display:inline-flex;position:relative;background:url(../images/out-link.svg) center center no-repeat;background-size:100% auto;margin-left:5px;}

.membeer-sec .members-list .out-link .img{width:200px;height:155px;background-color:transparent;background-position:center center;background-size:100% auto;background-repeat:no-repeat;border:2px solid #eee;border-radius:10px;box-shadow:1px 1px 12px rgba(0,0,0,0.12);transition:all .4s ease-in-out;position:fixed;bottom:40px;right:20px;color:transparent;user-select:none;opacity:0;}
.pc .membeer-sec .members-list .out-link:hover:before{width:100%}
.pc .membeer-sec .members-list .out-link:hover{color:#BE3455;}
.pc .membeer-sec .members-list .out-link:hover .img{opacity:1;bottom:80px;}

@media only screen and (min-width: 641px) {
    .membeer-sec{padding: 0 20px 100px;min-height:100vh}
    .h-tit2{font-size: 3.5rem;margin-bottom:40px;}
    .membeer-sec .members-list{display:flex;flex-wrap: wrap;align-items: flex-start;margin:0px -20px;}
    .membeer-sec .members-list > li{width:calc(30% - 21px);margin:0px 20px;margin-bottom:40px;padding-bottom:25%;position:relative;}
    .membeer-sec .members-list > li + li{margin-top:0px;}
    .membeer-sec .members-list .out-link .img{opacity:1;position:absolute;bottom:auto;top:40px;right:auto;left:0;width:100%;height:0;padding-top:78%;}
    .membeer-sec .members-list .out-link{white-space:nowrap;position:static;}
    .pc .membeer-sec .members-list .out-link:hover .img{background-size:110% auto;}
    .membeer-sec .members-list .out-link:before{top:-5px;bottom:auto;width:18px;height:2px;}
    .pc .membeer-sec .members-list .out-link:hover:before{background:#BE3455;}
    .membeer-sec .members-list + .members-list{margin-top:10px;padding-top:50px;}

}
@media only screen and (min-width: 1280px) {
    .membeer-sec{padding: 0 100px 200px;}
    .membeer-sec .members-list > li{width:calc(20% - 40px);margin-bottom:0;padding-bottom:18%;}
}
@media only screen and (min-width: 1600px) {
    .membeer-sec{padding: 0 100px 200px;}
    .membeer-sec .members-list > li{width:calc(16% - 40px);margin-bottom:0;padding-bottom:13%;}
}
/* ipad */
.ipad .doc-size{bottom:auto;top:0;}
.ipad .header{top:0;}