/* CSS Document */

#main .case .box{display:none !important}

/*메인비주얼*/
#main .visual .swiper-slide .item{transform:scale(1);transition:transform 10s}
#main .visual .swiper-slide-active .item{transform: scale(1.2)}
@media (min-width:1300px){  
    #main .visual{position:relative;overflow:hidden}
	#main .visual .item{display:flex;flex-direction:column;justify-content:center;position:relative;height:100vh;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .visual .item:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 40%) 40%)}
    #main .visual .txet{display:flex;flex-direction:column;gap:2rem;position:absolute;z-index:10;top:calc(50% - 10rem);right:0;left:0;margin:0 auto;max-width:120rem}
    #main .visual .txet h3{font-size:6rem;font-weight:100;text-transform:uppercase;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .2s;opacity:0}
    #main .visual .txet p{font-size:2.4rem;font-weight:400;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .4s;opacity:0}
    #main .visual .txet em{font-size:1.4rem;font-weight:400;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .4s;opacity:0}
    #main .visual .swiper-slide-active .txet h3,
    #main .visual .swiper-slide-active .txet p,
    #main .visual .swiper-slide-active .txet em{transform:translateY(0);opacity:1}
    #main .visual .control{display:flex;align-items:center;gap:1rem;position:absolute;z-index:20;bottom:8rem;right:0;left:8rem}
    #main .visual .control .page-box{display:flex;align-items:center;gap:2rem;position:relative}
    #main .visual .control .page-num{display:flex;align-items:center;gap:14rem}
    #main .visual .control .page-num .current{font-size:1.6rem;font-weight:700;color:#fff}
    #main .visual .control .page-num .total{font-size:1.6rem;font-weight:700;color:#fff}
    #main .visual .control .page-bar{position:absolute;top:1rem;left:4rem;width:10rem;height:.2rem;background:rgb(255 255 255 / 20%)}
    #main .visual .control .page-bar .progress{position:absolute;top:0;left:0;display:block;width:0%;height:100%;background:#fff}
    #main .visual .control .page-bar .anim{animation:4s start linear}
    #main .visual .control .page-arr{display:flex;align-items:center;justify-content:center;cursor:pointer}
	#main .visual .control .page-arr i{font-size:2.4rem;color:#fff}
}
@media all and (min-width:749px) and (max-width:1299px) {
    #main .visual{position:relative;overflow:hidden}
	#main .visual .item{display:flex;flex-direction:column;justify-content:center;position:relative;height:100vh;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .visual .item:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 40%) 40%)}
    #main .visual .txet{display:flex;flex-direction:column;gap:1rem;position:absolute;z-index:10;top:calc(50% - 10rem);right:0;left:4rem;margin:0 auto;max-width:120rem}
    #main .visual .txet h3{font-size:5.4rem;font-weight:100;text-transform:uppercase;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .2s;opacity:0}
    #main .visual .txet p{font-size:2rem;font-weight:400;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .4s;opacity:0}
    #main .visual .txet em{font-size:1.2rem;font-weight:400;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .4s;opacity:0}
    #main .visual .swiper-slide-active .txet h3,
    #main .visual .swiper-slide-active .txet p,
    #main .visual .swiper-slide-active .txet em{transform:translateY(0);opacity:1}
    #main .visual .control{display:flex;align-items:center;gap:1rem;position:absolute;z-index:20;bottom:8rem;left:4rem;margin:0 auto;max-width:120rem}
    #main .visual .control .page-box{display:flex;align-items:center;gap:2rem;position:relative}
    #main .visual .control .page-num{display:flex;align-items:center;gap:14rem}
    #main .visual .control .page-num .current{font-size:1.6rem;font-weight:700;color:#fff}
    #main .visual .control .page-num .total{font-size:1.6rem;font-weight:700;color:#fff}
    #main .visual .control .page-bar{position:absolute;top:1rem;left:4rem;width:10rem;height:.2rem;background:rgb(255 255 255 / 20%)}
    #main .visual .control .page-bar .progress{position:absolute;top:0;left:0;display:block;width:0%;height:100%;background:#fff}
    #main .visual .control .page-bar .anim{animation:4s start linear}
    #main .visual .control .page-arr{display:flex;align-items:center;justify-content:center;cursor:pointer}
	#main .visual .control .page-arr i{font-size:2.4rem;color:#fff}
}
@media (max-width:748px) {
	#main .visual{position:relative;overflow:hidden}
	#main .visual .item{display:flex;flex-direction:column;justify-content:center;position:relative;height:100vh;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .visual .item:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 40%) 40%)}
    #main .visual .txet{display:flex;flex-direction:column;gap:2rem;position:absolute;z-index:10;top:calc(50% - 10rem);right:0;left:4rem;margin:0 auto;max-width:120rem}
    #main .visual .txet h3{font-size:3.6rem;font-weight:100;text-transform:uppercase;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .2s;opacity:0}
    #main .visual .txet p{font-size:1.8rem;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .4s;opacity:0}
    #main .visual .txet em{font-size:1.2rem;;color:rgb(255 255 255 / 100%);transform:translateY(2rem);word-break:keep-all;transition:1s .4s;opacity:0}
    #main .visual .swiper-slide-active .txet h3,
    #main .visual .swiper-slide-active .txet p,
    #main .visual .swiper-slide-active .txet em{transform:translateY(0);opacity:1}
    #main .visual .control{display:flex;align-items:center;gap:1rem;position:absolute;z-index:20;bottom:8rem;left:4rem;margin:0 auto;max-width:120rem}
    #main .visual .control .page-box{display:flex;align-items:center;gap:2rem;position:relative}
    #main .visual .control .page-num{display:flex;align-items:center;gap:7rem}
    #main .visual .control .page-num .current{font-size:1.2rem;font-weight:700;color:#fff}
    #main .visual .control .page-num .total{font-size:1.2rem;font-weight:700;color:#fff}
    #main .visual .control .page-bar{position:absolute;top:.7rem;left:2.5rem;width:5rem;height:.2rem;background:rgb(255 255 255 / 20%)}
    #main .visual .control .page-bar .progress{position:absolute;top:0;left:0;display:block;width:0%;height:100%;background:#fff}
    #main .visual .control .page-bar .anim{animation:4s start linear}
    #main .visual .control .page-arr{display:flex;align-items:center;justify-content:center;cursor:pointer}
	#main .visual .control .page-arr i{font-size:1.6rem;color:#fff}
}


/*메인*/
@media (min-width:1300px){
    #main .title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;padding:0 0 4rem 0}
    #main .title h3{line-height:1;font-size:4.8rem;font-weight:700;color:#222222;overflow:hidden}
    #main .title p{line-height:1;font-size:1.6rem;font-weight:400;color:#666666;overflow:hidden}
    #main .title h3 span{display:block;transition-delay:0.0s}
    #main .title p span{display:block;transition-delay:0.2s}
    
    #main .case{padding:22rem 0;background-color:#f0f0f0}
    #main .prod{padding:22rem 0;background-color:#fff}
    #main .maru{height:100vh;background:url("../img/maru/bg-maru.png") no-repeat 50% 50%;background-size:cover}
    #main .port{padding:22rem 0;background-color:#fff6f0}
    #main .noti{padding:22rem 0;background-color:#fff}
    
    #main .case .type{position:relative;padding-top:5rem;margin:0 auto;max-width:120rem;width:100%;overflow:hidden}
	#main .case .item{display:flex;flex-direction:column;justify-content:center}    
    #main .case .img{padding-bottom:37rem;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .case .box{display:flex}
    #main .case .opt{display:flex;flex-direction:column;gap:.8rem;margin-top:3rem}
    #main .case .opt strong{font-size:1.6rem;font-weight:400;color:#676767}
    #main .case .opt span{font-size:2rem;font-weight:500;color:#222}
    #main .case .opt + .opt{margin-left:3rem;padding-left:3rem;border-left:.1rem solid #d2d2d2}
    #main .case .control{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin:0 auto;max-width:120rem;width:100%}
    #main .case .control .page-box{display:flex;align-items:center;gap:2rem;position:static;z-index:10;bottom:0;height:9rem}
    #main .case .control .page-num{display:flex;align-items:flex-end;gap:1rem;line-height:1;font-size:1.6rem}
    #main .case .control .page-num .current{font-size:4rem;font-weight:400;color:#222}
    #main .case .control .page-num .total{position:relative;top:-.4rem;font-size:2rem;font-weight:400;color:#d3d3d3}
    #main .case .control .page-arr{display:flex;align-items:center;justify-content:center;gap:2rem;position:absolute;z-index:10;top:0;cursor:pointer}
	#main .case .control .page-arr i{position:relative;font-size:3.6rem;color:#222}
    #main .case .control .page-arr .xi-long-arrow-right{top:-.1rem}
    
    #main .prod .cont{display:flex;flex-wrap:wrap;gap:4rem 0;margin:0 auto;max-width:120rem;width:100%;overflow:hidden}
    #main .prod .cont .innr{width:25%}
    #main .prod .cont .item{display:flex;flex-direction:column;padding-right:2.4rem}
    #main .prod .cont .img{/*padding-bottom:28rem;*/background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .prod .cont .tit{padding:4rem 0  2.6rem 0;font-size:2rem;font-weight:700;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .prod .cont .txt{font-size:1.6rem;font-weight:400;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    #main .prod .cont .innr:nth-child(4),
    #main .prod .cont .innr:nth-child(8){padding-right:0}
    
    #main .maru{display:flex;align-items:center;justify-content:center}
    #main .maru .cont{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2rem;color:#fff}
    #main .maru .cont h2{font-size:6.4rem;font-weight:400}
    #main .maru .cont p{font-size:3.6rem;font-weight:400}
    #main .maru .cont div{margin:2rem 0}
    #main .maru .cont h2,
    #main .maru .cont p,
    #main .maru .cont div,
    #main .maru .cont span{display:block;overflow:hidden}
    #main .maru .cont h2 span{transition-delay:0.0s}
    #main .maru .cont p span{transition-delay:0.2s}
    #main .maru .cont div span{transition-delay:0.4s}
    #main .maru .cont span span{transition-delay:0.6s}
    
    #main .port .cont{display:flex;flex-wrap:wrap;gap:4rem 0;margin:0 auto;max-width:120rem;width:100%;overflow:hidden}
    #main .port .cont .innr{width:33.33%}
    #main .port .cont .item{display:flex;flex-direction:column;padding-right:2.4rem}
    #main .port .cont .img{padding-bottom:40rem;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .port .cont .tit{padding:4rem 0  2.6rem 0;font-size:2rem;font-weight:700;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .port .cont .txt{font-size:1.6rem;font-weight:400;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    #main .port .cont .innr:nth-child(4),
    #main .port .cont .innr:nth-child(8){padding-right:0}
    
    #main .noti .list{margin:0 auto;max-width:120rem;width:100%;border-top:.1rem solid #e3e3e3}
    #main .noti .list .innr{border-bottom:.1rem solid #e3e3e3;overflow:hidden}
    #main .noti .list .item{display:flex;align-items:center;padding:2rem 0}
    #main .noti .list .dat{display:flex;flex-direction:column-reverse;text-align:center;min-width:23rem}
    #main .noti .list .dat time{font-size:1.8rem;white-space:nowrap}
    #main .noti .list .dat strong{font-size:4rem}
    #main .noti .list .box{display:flex;flex-direction:column;width:100%}
    #main .noti .list .box strong{font-size:2.4rem;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .noti .list .box span{font-size:1.8rem;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .noti .list .btn{min-width:16rem;font-size:3.6rem;text-align:center}

    #main .button{display:flex;justify-content:center;position:relative;top:10rem;margin:0 auto;max-width:120rem;width:100%;overflow:hidden}
    #main .button .btn{display:flex;align-items:center;justify-content:space-between;padding:0 3rem;width:22rem;height:6rem;font-size:1.8rem;color:#fff;background:#222}
}

@media all and (min-width:749px) and (max-width:1299px) {
    #main .title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:0 0 3rem 0}
    #main .title h3{line-height:1;font-size:3.6rem;font-weight:700;color:#222222}
    #main .title p{line-height:1;font-size:1.4rem;font-weight:400;color:#666666}
    
    #main .case{padding:16rem 0;background-color:#f0f0f0}
    #main .prod{padding:16rem 0;background-color:#fff}
    #main .maru{height:100vh;background:url("../img/maru/bg-maru.png") no-repeat 50% 50%;background-size:cover}
    #main .port{padding:16rem 0;background-color:#fff6f0}
    #main .noti{padding:16rem 0;background-color:#fff}
    
    #main .case .type{position:relative;padding-top:5rem;margin:0 4rem;overflow:hidden}
	#main .case .item{display:flex;flex-direction:column;justify-content:center}    
    #main .case .img{padding-bottom:32rem;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .case .box{display:flex}
    #main .case .opt{display:flex;flex-direction:column;gap:.6rem;margin-top:2rem}
    #main .case .opt strong{font-size:1.4rem;font-weight:400;color:#676767}
    #main .case .opt span{font-size:1.8rem;font-weight:500;color:#222}
    #main .case .opt + .opt{margin-left:2rem;padding-left:2rem;border-left:.1rem solid #d2d2d2}
    #main .case .control{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin:0 4rem}
    #main .case .control .page-box{display:flex;align-items:center;gap:2rem;position:absolute;z-index:10;bottom:0}
    #main .case .control .page-num{display:flex;align-items:flex-end;gap:1rem;line-height:1;font-size:1.6rem}
    #main .case .control .page-num .current{font-size:4rem;font-weight:400;color:#222}
    #main .case .control .page-num .total{position:relative;top:-.4rem;font-size:2rem;font-weight:400;color:#d3d3d3}
    #main .case .control .page-arr{display:flex;align-items:center;justify-content:center;gap:2rem;position:absolute;z-index:10;top:0;right:0;cursor:pointer}
	#main .case .control .page-arr i{position:relative;font-size:3.6rem;color:#222}
    #main .case .control .page-arr .xi-long-arrow-right{top:-.1rem}
    
    #main .prod .cont{display:flex;flex-wrap:wrap;gap:4rem 0;margin:0 4rem;overflow:hidden}
    #main .prod .cont .innr{width:25%}
    #main .prod .cont .item{display:flex;flex-direction:column;padding-right:2.4rem}
    #main .prod .cont .img{/*padding-bottom:100%;*/background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .prod .cont .tit{margin:2rem 0 1rem 0;font-size:1.8rem;font-weight:700;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .prod .cont .txt{font-size:1.4rem;font-weight:400;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    #main .prod .cont .innr:nth-child(4),
    #main .prod .cont .innr:nth-child(8){padding-right:0}
    
    #main .maru{display:flex;align-items:center;justify-content:center}
    #main .maru .cont{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
    #main .maru .cont h2{font-size:4.8rem;font-weight:400}
    #main .maru .cont p{font-size:2.4rem;font-weight:400}
    #main .maru .cont span{font-size:1.6rem;font-weight:400}
    #main .maru .cont img{padding:2rem 0;width:40%}
    #main .maru .cont br{display:block}
    
    #main .maru .cont h2,
    #main .maru .cont p,
    #main .maru .cont div,
    #main .maru .cont span{display:block;overflow:hidden}
    #main .maru .cont h2 span{transition-delay:0.0s}
    #main .maru .cont p span{transition-delay:0.2s}
    #main .maru .cont div span{transition-delay:0.4s}
    #main .maru .cont span span{transition-delay:0.6s}
    
    #main .port .cont{display:flex;flex-wrap:wrap;gap:4rem 0;margin:0 4rem;overflow:hidden}
    #main .port .cont .innr{width:33.33%}
    #main .port .cont .item{display:flex;flex-direction:column;padding-right:2.4rem}
    #main .port .cont .img{padding-bottom:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .port .cont .innr:nth-child(4),
    #main .port .cont .innr:nth-child(8){padding-right:0}
    
    #main .noti .list{margin:0 4rem;border-top:.1rem solid #e3e3e3}
    #main .noti .list .item{display:flex;align-items:center;padding:2rem 0;border-bottom:.1rem solid #e3e3e3}
    #main .noti .list .dat{display:flex;flex-direction:column-reverse;text-align:center;min-width:23rem}
    #main .noti .list .dat time{font-size:1.8rem;white-space:nowrap}
    #main .noti .list .dat strong{font-size:4rem}
    #main .noti .list .box{display:flex;flex-direction:column;width:100%}
    #main .noti .list .box strong{font-size:2.4rem;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .noti .list .box span{font-size:1.8rem;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .noti .list .btn{min-width:16rem;font-size:3.6rem;text-align:center}

    #main .button{display:flex;justify-content:center;position:relative;top:10rem;margin:0 4rem;overflow:hidden}
    #main .button .btn{display:flex;align-items:center;justify-content:space-between;padding:0 3rem;width:22rem;height:6rem;font-size:1.8rem;color:#fff;background:#222}
}

@media (max-width:748px) {
    #main .title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:0 0 3rem 0}
    #main .title h3{line-height:1;font-size:3rem;font-weight:700;color:#222222}
    #main .title p{padding:0 4rem;line-height:1.4;font-size:1.4rem;font-weight:400;color:#666666}
    
    #main .case{padding:8rem 0;background-color:#f0f0f0}
    #main .prod{padding:8rem 0;background-color:#fff}
    #main .maru{height:100vh;background:url("../img/maru/bg-maru.png") no-repeat 50% 50%;background-size:cover}
    #main .port{padding:8rem 0;background-color:#fff6f0}
    #main .noti{padding:8rem 0;background-color:#fff}
    
    #main .case .type{position:relative;padding-top:5rem;margin:0 4rem;overflow:hidden}
	#main .case .item{display:flex;flex-direction:column;justify-content:center}    
    #main .case .img{padding-bottom:50%;background-repeat:no-repeat;background-position:50% 50%;background-size:auto 100%}
    #main .case .box{display:flex;flex-direction:column;gap:.6rem;padding:2rem 0}
    #main .case .opt{display:flex;align-items:center}
    #main .case .opt strong{min-width:6rem;font-size:1.2rem;font-weight:400;color:#676767}
    #main .case .opt span{font-size:1.4rem;font-weight:500;color:#222}
    #main .case .control{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin:0 4rem}
    #main .case .control .page-box{display:flex;align-items:center;gap:2rem;position:absolute;z-index:10;top:0;left:0}
    #main .case .control .page-num{display:flex;align-items:flex-end;gap:1rem;line-height:1;font-size:1.4rem}
    #main .case .control .page-num .current{font-size:2.4rem;font-weight:400;color:#222}
    #main .case .control .page-num .total{position:relative;top:-.4rem;font-size:1.8rem;font-weight:400;color:#777}
    #main .case .control .page-arr{display:flex;align-items:center;justify-content:center;gap:2rem;position:absolute;z-index:10;top:0;right:0;cursor:pointer}
	#main .case .control .page-arr i{position:relative;font-size:3.6rem;color:#222}
    #main .case .control .page-arr .xi-long-arrow-right{top:-.1rem}
    
    #main .prod .cont{display:flex;flex-wrap:wrap;gap:4rem 0;margin:0 2rem 0 4rem;overflow:hidden}
    #main .prod .cont .innr{width:50%}
    #main .prod .cont .item{display:flex;flex-direction:column;padding-right:2rem}
    #main .prod .cont .img{/*padding-bottom:100%;*/background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .prod .cont .tit{margin:2rem 0 1rem 0;font-size:1.8rem;font-weight:700;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .prod .cont .txt{font-size:1.4rem;font-weight:400;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    #main .prod .cont .innr:nth-child(4),
    #main .prod .cont .innr:nth-child(8){padding-right:0}
    
    #main .maru{display:flex;align-items:center;justify-content:center}
    #main .maru .cont{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
    #main .maru .cont h2{font-size:3.6rem;font-weight:400}
    #main .maru .cont p{font-size:2rem;font-weight:400}
    #main .maru .cont span{padding:0 4rem;font-size:1.6rem;font-weight:400;word-break:keep-all}
    #main .maru .cont img{padding:2rem 0;width:40%}
    #main .maru .cont br{display:block}
    
    #main .port .cont{display:flex;flex-wrap:wrap;gap:4rem 0;margin:0 2rem 0 4rem;overflow:hidden}
    #main .port .cont .innr{width:33.33%}
    #main .port .cont .item{display:flex;flex-direction:column;padding-right:2rem}
    #main .port .cont .img{padding-bottom:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
    #main .port .cont .innr:nth-child(4),
    #main .port .cont .innr:nth-child(8){padding-right:0}
    
    #main .noti .list{margin:0 4rem;border-top:.1rem solid #e3e3e3}
    #main .noti .list .item{display:flex;align-items:center;padding:2rem 0;border-bottom:.1rem solid #e3e3e3}
    #main .noti .list .dat{display:flex;flex-direction:column-reverse;text-align:center;min-width:12rem}
    #main .noti .list .dat time{font-size:1.4rem;white-space:nowrap}
    #main .noti .list .dat strong{font-size:3rem}
    #main .noti .list .box{display:flex;flex-direction:column;width:100%}
    #main .noti .list .box strong{font-size:1.8rem;color:#222;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .noti .list .box span{font-size:1.4rem;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    #main .noti .list .btn{min-width:8rem;font-size:2.4rem;text-align:center}

    #main .button{display:flex;justify-content:center;position:relative;top:4rem;margin:0 4rem;overflow:hidden}
    #main .button .btn{display:flex;align-items:center;justify-content:space-between;padding:0 3rem;width:18rem;height:4.8rem;font-size:1.6rem;color:#fff;background:#222}
}

@keyframes start {
    0% {
        width:0%
    }
    100% {
        width:100%
    }
}