@charset "utf-8";

.main-visual {position: relative; overflow: hidden;}
.main-visual .item {position: relative; height: 100%;}
.main-visual .item .img-box {position: relative; width:100%; max-height: 100vh; min-height: 65vh; height: 100%;}
.main-visual .item .img-box img {width: 100%; height: 100%; min-height: 65vh; object-fit: cover;}
.main-visual .item .text-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; max-width: 1630px; width: 100%; height: 100%; padding: 0 15px; margin: 40px auto 0; z-index: 2;}
.main-visual .item .text-box small {display: block; font-family: 'montserrat'; font-size: 16px; font-weight: 600; line-height: 1.3em; color: rgba(255,255,255,0.6); margin-bottom: 10px;}
.main-visual .item .text-box h2 {font-family: 'montserrat'; font-size: 70px; font-weight: 700; line-height: 1.1em; letter-spacing: -0.02em; color: #fff; margin-bottom: 6px;}
.main-visual .item .text-box p {font-size: 44px; font-weight: 500; line-height: 1.2em; letter-spacing: -0.02em; color: #fff; margin-bottom: 68px;}
.main-visual .item .text-box a {position: relative; display: inline-block; width: 184px; height: 60px; font-size: 14px; font-weight: 600; line-height: 60px; color: #fff; background: #001f5d; border-radius: 30px; text-align: center; padding-right: 28px;}
.main-visual .item .text-box a:after {position: absolute; top: 50%; margin-top: -6px; right: 37px; content: ''; width: 15px; height: 13px; background: url('../img/main/btn_more.png') no-repeat right center; transition: all 0.4s;}
.main-visual .item .text-box a:hover:after {right: 32px;}
.main-visual .item.slick-active .text-box small {animation: text-up 1.5s both 0.3s;}
.main-visual .item.slick-active .text-box h2 {animation: text-up 1.5s both 0.5s;}
.main-visual .item.slick-active .text-box p {animation: text-up 1.5s both 0.7s;}
.main-visual .item.slick-active .text-box a {animation: text-up 1.5s both 0.9s;}
@keyframes text-up {0% {transform: translateY(50px); opacity: 0;} 100% {transform: translateY(0px); opacity: 1;}}

.main-visual .controler-wrap {position: absolute; bottom: 60px; left: 100px; display: flex; align-items: center; padding: 0 12px;}
.main-visual .slick-arrow {position: absolute; top: 50%; margin-top: -6px; width: 8px; height: 12px; font-size: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center center;}
.main-visual .slick-prev {left: 0; background-image: url('../img/main/main_visual_btn_prev.png');}
.main-visual .slick-next {right: 0; background-image: url('../img/main/main_visual_btn_next.png');}
.main-visual .slick-dots li {display: none; font-size: 14px; color: rgba(255,255,255,0.5);}
.main-visual .slick-dots li.slick-active {display: block;}
.main-visual .slick-dots li span {display: inline-block; color: #fff; margin-right: 5px;}
.main-visual .controler {position: absolute; top: 50%; right: -22px; margin-top: -5px;}
.main-visual .controler button {display: block; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center center; border: 0; background-color: transparent;}
.main-visual .controler .btn-stop {background-image: url('../img/main/main_visual_btn_pause.png');}
.main-visual .controler .btn-play {display: none; background-image: url('../img/main/main_visual_btn_play.png');}

.main-visual .scroll-down {position: absolute; bottom: 0; right: 100px; padding-bottom: 70px;}
.main-visual .scroll-down:before {position: absolute; bottom: 0; left: 0; content: ''; width: 8px; height: 60px; background: rgba(255,255,255,0.3);}
.main-visual .scroll-down:after {position: absolute; bottom: 52px; left: 0; content: ''; width: 8px; height: 8px; background: #fff; animation: move 2.5s ease-in-out infinite both;}
@keyframes move {0%,100% {bottom: 52px;} 50% {bottom: 0;};}

.sec-title-wrap {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 63px;}
.sec-title h3 {font-family: 'montserrat'; font-size: 68px; font-weight: 700; line-height: 1.2em; color: #000; margin-bottom: 19px;}
.sec-title p {font-size: 22px; line-height: 1.4em; color: #666;}
.sec-title.white h3 {font-size: 58px; color: #fff; margin-bottom: 19px;}
.sec-title.white p {font-weight: 500; color: rgba(255,255,255,0.8);}
.sec-title-wrap .btn-area a {position: relative; display: inline-block; width: 180px; height: 60px; font-size: 14px; font-weight: 500; line-height: 60px; color: #fff; background: #001f5d; border-radius: 30px; text-align: center; padding-right: 28px; margin-bottom: 6px;}
.sec-title-wrap .btn-area a:after {position: absolute; top: 50%; margin-top: -6px; right: 37px; content: ''; width: 15px; height: 13px; background: url('../img/main/btn_more.png') no-repeat right center; transition: all 0.3s;}
.sec-title-wrap .btn-area a:hover:after {right: 32px;}

/* section01 */
.sec01 {padding-top: 153px;}
.sec01 .sec-title {margin-bottom: 65px;}
.sec01 .items {display: flex; flex-wrap: wrap; justify-content: center; margin: -10px;}
.sec01 .item {padding: 10px;}
.sec01 .item .inner {position: relative; width: 385px; min-height: 580px; height: 100%; padding: 45px 50px; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden;}
.sec01 .item-product .inner:before {opacity: 0; position: absolute; bottom: -100%; left: 0; content: ''; width: 100%; height: 100%; background: #001f5d; transition: all 0.6s;}
.sec01 .item-product .inner:hover:before {bottom: 0; opacity: 0.85;}
.sec01 .item:nth-child(1) .inner {background-image: url('../img/main/collection_img01.jpg');}
.sec01 .item:nth-child(2) .inner {background-image: url('../img/main/collection_img02.jpg');}
.sec01 .item:nth-child(3) .inner {background-image: url('../img/main/collection_img03.jpg');}
.sec01 .item:nth-child(4) .inner {background-image: url('../img/main/collection_img04.jpg');}
.sec01 .item .text-box {position: relative; z-index: 2;}
.sec01 .item .inner:hover .text-box * {transition: all 0.6s;}
.sec01 .item-product .text-box h4 {font-size: 40px; font-weight: 500; line-height: 1.3em; color: #fff;}
.sec01 .item-product .text-box p {opacity: 0; margin-bottom: -20px; font-size: 20px; line-height: 1.7em; color: #fff; margin-top: 70px; padding-top: 35px;  border-top: 1px solid rgba(255,255,255,0.2);}
.sec01 .item-product .inner:hover .text-box p {opacity: 0.6; margin-top: 35px; transition-delay:.2s;}
.sec01 .item-product .btn-area {position: absolute; bottom: 20px; right: 50px; transition: all 0.5s;}
.sec01 .item-product .inner:hover .btn-area {bottom: 50px;}
.sec01 .item-product .btn-area > * {opacity: 0; transition: all 0.5s;}
.sec01 .item-product .inner:hover .btn-area > * {opacity: 1;}
.sec01 .item-product .btn-area a {display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; font-size: 16px; line-height: 1.3em; color: rgba(255,255,255,0.6); transition: all 0.5s;}
.sec01 .item-product .btn-area a:hover {color: #fff;}
.sec01 .item-product .btn-area a span {margin-left: 15px;}
.sec01 .item-product .btn-more {display: block; width: 60px; height: 60px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; background: url('../img/main/btn_more.png') no-repeat center center; transition: all 0.5s;}
.sec01 .item-product .btn-more:hover {background-image: url('../img/main/btn_more_black.png'); background-color: #fff;}
.sec01 .item02 .btn-area a:hover span {background-image: url('../img/main/btn_more_black.png'); background-color: #fff;}

.sec01 .item-search .inner {padding: 180px 20px 0; text-align: center; transition: all 0.5s;}
.sec01 .item-search .inner:hover {padding-top: 50px;}
.sec01 .item-search .text-box h4 {font-size: 40px; font-weight: 500; line-height: 1.3em; color: #fff;}
.sec01 .item-search .text-box p {height: 0; opacity: 0; font-size: 20px; line-height: 1.7em; color: #fff; padding: 0 15px; margin-top: 14px; transition: all 0.5s;}
.sec01 .item-search .inner:hover .text-box p {height: 100%; opacity: 0.6; transition-delay:.2s;}
.sec01 .item-search .btn-area {position: absolute; bottom: 213px; left: 50%; margin-left: -95px;}
.sec01 .item-search .btn-search {position: relative; width: 190px; height: 64px; font-size: 18px; font-weight: 500; line-height: 64px; color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 32px; padding-left: 32px; transition: all 0.5s;}
.sec01 .item-search .btn-search:before {position: absolute; top: 50%; margin-top: -8px; left: 40px; content: ''; width: 16px; height: 16px; background: url('../img/main/btn_search.png') no-repeat left center; transition: all 0.5s;}
.sec01 .item-search .btn-search:hover {color: #001f5d; background-color: #fff;}
.sec01 .item-search .btn-search:hover:before {background-image: url('../img/main/btn_search_black.png');}

/* section02 */
.sec02 {padding-top: 175px;}
.sec02 .sec-title-wrap {max-width: 1630px; width: 100%; padding: 0 15px; margin: 0 auto 63px;}
.sec02 .cont-wrap {display: flex;}
.sec02 .origin {max-width: 1100px; width: 100%;}
.sec02 .img-box {width: 100%; height: 660px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sec02 .thumb {display: flex; flex-direction: column; justify-content: center; width: 1%; flex: 1 1 auto; background: #f8f8f8; padding: 0 160px 0 110px;}
.sec02 .thumb h4 {position: relative; font-size: 40px; font-weight: 500; line-height: 1.4em; color: #000; padding-bottom: 27px; margin-bottom: 31px;}
.sec02 .thumb h4:after {position: absolute; bottom: 0; left: 0; content: ''; width: 24px; height: 1px; background: #999;}
.sec02 .thumb p {min-height: 260px; font-size: 20px; line-height: 1.8em; color: #666;}
.sec02 .paging ul {display: flex; flex-wrap: wrap; margin: -10px;}
.sec02 .paging ul li {padding: 10px;}
.sec02 .paging ul li button {position: relative; font-size: 18px; font-weight: 600; line-height: 60px; color: #bfbfbf; padding: 0 10px; border: 0; border-bottom: 3px solid #bfbfbf; background: transparent; transition: all 0.5s;}
.sec02 .paging ul li button:hover {color: #888; border-bottom: 3px solid #888;}
.sec02 .paging ul li.slick-active button {color: #001f5d;}
.sec02 .paging ul li button:before {position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 3px; background: #001f5d; transition: all 0.5s;}
.sec02 .paging ul li.slick-active button:before {width: 100%;}

/* section03 */
.sec03 {padding: 160px 0 190px;}
.sec03 .items {margin: 0 -10px;}
.sec03 .item {padding: 0 10px;}
.sec03 .item a {border: 1px solid #ddd; transition: all 0.5s;}
.sec03 .item .img-box {overflow: hidden;}
.sec03 .item .img-box .pic {position:relative; height:0; padding-bottom:61.54%; overflow:hidden; transition:all 0.6s;}
.sec03 .item .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.sec03 .item .text-box {border-top: 1px solid #ddd; padding: 52px 60px 62px;}
.sec03 .item .title p {font-size: 26px; font-weight: 600; line-height: 1.53em; color: #333; margin-bottom: 38px; height:calc(1.53em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition: all 0.5s;}
.sec03 .item .date p {position: relative; font-size: 18px; line-height: 1.3em; color: #999; padding-left: 23px;}
.sec03 .item .date p:before {position: absolute; top: 50%; margin-top: -15px; left: 0; content: ''; width: 30px; height: 30px; background: url('../img/main/gallery_icon_date.png') no-repeat left center/50% 50%;}
.sec03 .item a:hover {border: 1px solid #001f5d;}
.sec03 .item a:hover .img-box .pic {transform: scale(1.05);}
.sec03 .item a:hover .title p {color: #001f5d;}

/* section04 */
.sec04 {position: relative; height: 862px; background: url('../img/main/contact_bg.jpg') no-repeat center center/cover;}
.sec04:before {position: absolute; top: 0; left: 50%; content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.3);}
.sec04 .wrap {display: flex; align-items: center; height: 100%;}
.sec04 .wrap > div {width: 50%; text-align: center; padding: 0 15px;}
.sec04 .sec-title {margin-bottom: 47px;}
.sec04 .cont {min-height: 245px;}
.sec04 .left-box {padding-left: 100px;}
.sec04 .right-box {padding-right: 90px;}
.sec04 .left-box .icon {width: 180px; height: 180px; background: url('../img/main/windowstory_icon.png') no-repeat center center rgba(255,255,255,0.1); border-radius: 50%; margin: 0 auto;}
.sec04 .right-box dl {display: flex; max-width: 580px; width: 100%; margin: 0 auto 12px;} 
.sec04 .right-box dt {max-width: 140px; width: 100%; height: 44px; font-size: 16px; font-weight: 600; line-height: 44px; color: #fff; background: rgba(255,255,255,0.1); margin-right: 17px;}
.sec04 .right-box dd {width: 1%; flex: 1 1 auto; font-size: 20px; line-height: 1.4em; color: #fff; padding-top: 8px; text-align: left;}

.sec04 .btn-area a {position: relative; display: block; width: 250px; height: 70px; border-radius: 35px; border: 2px solid #fff; font-size: 16px; font-weight: 500; line-height: 66px; color: #fff; padding-left: 28px; margin: 35px auto 0; transition: all 0.3s;}
.sec04 .btn-area a:hover {background-color: rgba(255,255,255,0.3);}
.sec04 .btn-area a:before {position: absolute; top: 50%; margin-top: -7px; content: ''; width: 15px; height: 15px; background-repeat: no-repeat; background-position: left center;}
.sec04 .left-box .btn-area a:before {left: 48px; background-image: url('../img/main/btn_search.png');}
.sec04 .right-box .btn-area a:before {left: 65px; background-image: url('../img/main/btn_contact.png');}