main{margin: 0 auto;}
p{word-break:break-all;}
.breadcrumb{margin: 32px 0;}
.breadcrumb a{color:#333333;}
.breadcrumb-item.active{font-weight: bold;}


/* carousel */
.swiper {width: 100%;max-width:870px;height:auto;border-radius: 8px;margin-bottom: 24px;}
.swiper-wrapper{width: 100%;}
/* .mySwiper .swiper-slide{width: 200px !important;height: 112px !important;} */
.swiper-slide img {border-radius: 8px;object-fit: cover;}
.swiper-button-next,.swiper-button-prev{opacity: 0;}
.swiper-slide {background-size: cover;background-position: center;}
.mySwiper .swiper-slide {width: 25%;height: 100%;}
.mySwiper .swiper-slide-thumb-active:before{content:"";width: 100%;height: 100%; background-color: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;border-radius: 8px;}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
@media screen and ( max-width:1300px){
    .swiper{max-width: 1300px;width: 100%;}
}
@media screen and ( max-width:768px){
    /* .mySwiper .swiper-slide{width: 160px !important;height:90px !important;} */
}

/* production */
.production .row{width: 95vw;margin: 0 auto;}
.production-text{margin: 0 auto;margin-left: 64px;display: flex;flex-direction: column;}
.production-text h1{font-size: 22px;color: #333333;padding: 64px 0 32px 0;letter-spacing: 0.05em;}
.production-text p{font-size: 16px;color:#636363;line-height: 160%;letter-spacing: 0.1em;word-break:break-all;}
.production-text .txt{margin-bottom:auto;}
.production-text .btn{margin-left: auto;}
.production-text button {margin-left: auto;box-shadow:0 0 0 0 rgba(0,0,0,0.1); padding: 8px 24px;background-color: #EE7616;color: #ffffff;border: 0px solid transparent;border-radius: 50px;letter-spacing: 0.1em;align-self: flex-end;transition: 0.5s;}
.production-text button:hover {background-color: #F8B500;padding: 8px 32px;}
.tag{text-align: right;}
.tag a{color:#666666;font-weight: normal;margin-left: 5px;}
@media screen and ( max-width:1300px ){
    .production-text{margin-left: 0;}
}
@media screen and ( max-width:768px ){
    .production-text h1{padding: 32px 0;}
}

/*portfolio item*/
.portfolio-item{margin-top: 104px;}
.portfolio-item .title{display: flex;align-items: center;margin-bottom: 24px;}
.portfolio-item .title .hr{border-top: 1px solid #666666;width: 100%;}
.portfolio-item .title p{font-size: 22px;letter-spacing: 0.1em;}
.portfolio-item .row{width: 95vw;margin: 0 auto;}
.portfolio-item img{ width: 100%;border-radius: 4px;}
.portfolio-item p{ margin-top: 16px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;line-height: 1.4em;-webkit-line-clamp: 3;}
.portfolio-item span {font-size: 16px;font-weight: bold;letter-spacing: 0.05em;line-height: 160%;}
.portfolio-img::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(238, 118, 22,0.4); opacity: 0; transition: opacity 0.3s ease-in-out;border-radius: 8px;}
.portfolio-img:hover::before {opacity: 1;}
.portfolio-img{overflow: hidden;position: relative;}
img[alt="zoomIn"]{width: 50px;height: 50px;opacity: 0;position: absolute;top:calc(50% - 25px);left:calc(50% - 25px) ;}
.portfolio-img:hover img[alt="zoomIn"]{opacity: 1;z-index: 995;}
.portfolio-button{text-align: center;}
.portfolio-item button {width: 100%;max-width: 400px;color: #333333;background-color: #fff; letter-spacing: 0.1em;padding: 16px 0;border-radius: 4px;border: 1px solid #333333;}
.portfolio-button button:hover {background-color: #636363;color: #ffffff;border: 1px solid #636363;transition: 0.5s;}

@media screen and ( max-width:768px ){
    .portfolio-item{margin-top: 32px;}
    .portfolio-item .title p{font-size: 16px;}
    .portfolio-item .title{margin-bottom:0px;}
    .tag a{font-size: 14px;}
}