@charset "utf-8";

/* main-visual */
.main-visual {position:relative;}
.main-visual .item {height:100vh;}
.main-visual .item .secting-img {width:100%; height:100%; position:relative; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.main-visual .txt-box {position:absolute; width:100%; height:100%; top:0; left:0;}
.main-visual .txt-box .txt {display:flex; align-items:center; height:100%;}
.main-visual .txt-box h2 {font-size:72px; line-height:1.3em; color:#fff; font-weight:600; opacity:0; filter:blur(20px);}
.main-visual .slick-active .txt-box h2 {opacity:1; filter:blur(0); transition:all 1.4s;}

.visual-btn {position:absolute; left:100px; bottom:70px; z-index:11; display:flex; align-items:center;}
.visual-btn .pro-bar {margin-right:10px; width:140px; background:rgba(255,255,255,0.3); height:2px; position:relative;}
.visual-btn .pro-bar .pro-ani {width:0; height:2px; position:absolute; top:0; left:0; background:#fff; z-index:11;}
.visual-btn .pro-bar.on .pro-ani {width:100%; transition:all 4.5s;}
.visual-btn .paging {font-size:13px; line-height:20px; color:#fff; margin-right:10px; font-family:'Montserrat';}
.visual-btn .paging ul li {display:none;}
.visual-btn .paging ul li.slick-active {display:block;}
.visual-btn .paging ul li .num {opacity:0.4;}
.visual-btn .btn-wrap .btnw {width:14px; height:14px; background-repeat:no-repeat; background-size:auto; background-position:center center; cursor:pointer;}
.visual-btn .btn-wrap .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.visual-btn .btn-wrap .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.visual-btn .btn-wrap .btnw.bt-play {display:none;}
/* section */
.section {padding:180px 0 200px; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.sec-tit h3 {font-size:65px; line-height:1.3em; color:#000; font-family:'Montserrat';}
.sec-tit p {font-size:22px; line-height:1.4em; color:#666; margin-top:30px;}

/*
.section .more {width:120px; height:120px; position:relative;}
.section .more a {display:block;}
.section .more a span {position:absolute; top:0; left:0; animation:rotate-more 4s linear infinite both;}
@keyframes rotate-more {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
.section .more a .arrow {position:absolute; width:50px; height:50px; background:#b5aba0; border-radius:50%; top:50%; left:50%; margin-top:-25px; margin-left:-25px; transition:all 0.6s;}
.section .more a:hover .arrow {transform:scale(1.5);}
.section .more a .circle {content:''; width:10px; height:10px; background-repeat:no-repeat; background-size:cover; background-size:cover; position:absolute; top:50%; margin-top:-5px; left:50%; margin-left:-5px; background-image:url('../img/main/more-arrow-w.png');}
*/

.section .more a {display:block; width:180px; line-height:58px; border:1px solid #a68a68; border-radius:5px; padding:0 30px;  transition:all 0.4s; color:#a68a68; font-size:20px; position:relative;}
.section .more a:hover {background:#a68a68; color:#fff; padding:0 20px;}
.section .more a:after {content:''; width:10px; height:10px; background-repeat:no-repeat; background-size:cover; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:30px; background-image:url('../img/main/more-arrow.png'); transition:all 0.4s;}
.section .more a:hover:after {background-image:url('../img/main/more-arrow-w.png'); right:20px;}

.section {overflow:hidden;}
.section02 {overflow:visible;}
/* section01 */
.section01 .sec-tit {margin-bottom:100px;}
.section01 .col {display:flex; margin:0 -40px 60px; align-items:center;}
.section01 .col:nth-child(even) {flex-direction:row-reverse;}
.section01 .col:last-child {margin-bottom:0;}
.section01 .col > div {width:50%; padding:0 40px;}
.section01 .col .img-box img {border-radius:40px; transition:all .6s;}
.section01 .col:hover .img-box img {border-radius:230px;}
.section01 .col .txt-box .txt {padding-left:40px;}
.section01 .col .txt-box p {font-size:18px; line-height:1.8em; color:#a68a68; font-weight:600; margin-bottom:12px;}
.section01 .col .txt-box h4 {font-size:40px; line-height:1.1em; color:#111; font-family:'Montserrat'; margin-bottom:32px;}
.section01 .col .txt-box li {position:relative; font-size:20px; line-height:1.8em; color:#010101; padding-left:16px; opacity:0.8;}
.section01 .col .txt-box li:before {content:''; width:5px; height:5px; background:#a68a68; border-radius:50%; position:absolute; top:14px; left:0;}
.section01 .col:last-child .txt-box {padding-bottom:120px;}
.section01 .more {position:absolute; bottom:0; left:65px;}
/* section02 */
.section02 {background-image:url('../img/main/sec02bg.jpg');}
.section02 .more {margin-top:76px;}
.section02 .col {display:flex; height:100%; justify-content:space-between;}
.section02 .tit-box {width:100%; max-width:320px; padding-right:30px; position:relative;}
.section02 .tit-box .tit {position: sticky; top:200px;}
.section02 .cnt-box {width:100%; max-width:920px; padding-top:80px; display:flex; flex-wrap:wrap; justify-content:space-between;}
.section02 .cnt-box .row {width:50%; max-width:420px;}
.section02 .cnt-box .row:nth-child(odd) {margin-top:80px;}
.section02 .cnt-box .row:nth-child(even) {margin-top:-80px;}

.section02 .inner {display:block; border-radius:20px; overflow:hidden; background:#fff; height:490px; transition:all 0.6s; position:relative; margin-bottom:50px;}
.section02 .inner:last-child {margin-bottom:0;}
.section02 .inner:hover {border-radius:40px; background:#8a8279;}
.section02 .inner .img-box .pic {position:relative; height:0; padding-bottom:64.29%; overflow:hidden; transition:all 0.6s;}
.section02 .inner:hover .img-box .pic {padding-bottom:0; opacity:0;}
.section02 .inner .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;}
.section02 .inner .txt-box {padding:34px 40px; transition:all 0.6s;}
.section02 .inner:hover .txt-box {padding:54px 40px;}
.section02 .inner .txt-box h4 {font-size:26px; line-height:1.4em; color:#111; height:calc(1.4em * 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.6s;}
.section02 .inner:hover .txt-box h4 {color:#fff;}
.section02 .inner .txt-box p {font-size:18px; line-height:1.7em; color:#fff; opacity:0; height:0; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; transition:all 0.6s;}
.section02 .inner:hover .txt-box p {height:calc(1.7em * 1 * 4); opacity:0.7; margin-top:24px;}
.section02 .inner .txt-box .date {font-size:16px; line-height:1.8em; color:#666; margin-top:22px; transition:all 0.6s;}
.section02 .inner:hover .txt-box .date {color:#fff; opacity:0.8; margin-top:26px;}
.section02 .inner .mo {transform:translateY(100%); opacity:0; transition:all .6s; position:absolute; bottom:0; z-index:1; left:0; width:100%; line-height:80px; font-size:18px; color:#fff; font-weight:600; background:#b5aba0; padding:0 40px;}
.section02 .inner:hover .mo {transition-delay:0.2s; transform:translateY(0); opacity:1;}
.section02 .inner .mo span {display:block; width:80px; height:80px; position:absolute; right:0; top:0; background:#c2b8ae;}
.section02 .inner .mo span:before,
.section02 .inner .mo span:after {content:''; position:absolute; top:50%; left:50%; background:#fff;}
.section02 .inner .mo span:before {width:14px; height:2px; margin-top:-1px; margin-left:-7px;}
.section02 .inner .mo span:after {width:2px; height:14px; margin-top:-7px; margin-left:-1px;}
/* section03 */
.section03 {height:700px; background-image:url('../img/main/sec03bg.jpg'); padding:0;}
.section03 .wrap {display:flex; height:100%; align-items:center; justify-content:space-between;}
.section03 .sec-tit h3 {color:#fff;}
.section03 .sec-tit p {color:rgba(255,255,255,0.8);}
/*
.section03 .more a .arrow {background:#fff;}
.section03 .more a .circle {background-image:url('../img/main/more-arrow.png');}
.section03 .more:before {content:''; width:170px; height:170px; background:rgba(255,255,255,0.3); position:absolute; top:50%; left:50%; margin-top:-85px; margin-left:-85px; border-radius:50%;}
*/

.section03 .more a {border-color:#fff; color:#fff;}
.section03 .more a:hover {border-color:#a68a68;}
.section03 .more a:after {background-image:url('../img/main/more-arrow-w.png');}
.section03 .more a:hover:after {background-image:url('../img/main/more-arrow.png'); right:20px;}