@charset "utf-8";

#main {padding-top:120px; letter-spacing:-.03em;}
/* main-visual */
.main-visual {background:#f8f8f8; padding:80px 0; position:relative;}
.main-visual .img-box {position:relative; margin-bottom:60px;}
.main-visual .img-box .pic {position:relative; height:0; padding-bottom:40.85%; overflow:hidden; transition:all 0.6s; border-radius:20px;}
.main-visual .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;}
.main-visual .img-box span {display:block; font-size:140px; line-height:1.1em; color:#fcaf17; font-family:'Foxlite Script'; position:absolute; right:20px; bottom:-64px; z-index:1;}
.main-visual .txt-box {position:relative; display:flex; padding-right:80px; align-items:center;}
.main-visual .txt-box .tit {width:100%; max-width:100px; text-align:center;}
.main-visual .txt-box .tit p {font-size:16px; font-weight:700; color:#111; line-height:44px; border-radius:22px; background:#fcaf17;}
.main-visual .txt-box .txt {width:1%; flex:1 1 auto; padding-left:20px;}
.main-visual .txt-box .txt h3 {font-size:34px; line-height:1.1em; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-visual .arrows {position:absolute; bottom:10px; right:15px; width:70px; height:26px; display:flex; justify-content:space-between; align-items:center;}
.main-visual .arrows:after {content:''; width:1px; height:26px; position:absolute; top:50%; margin-top:-13px; left:50%; background:#ddd;}
.main-visual .arrows .slick-arrow {width:14px; height:26px; background-repeat:no-repeat; background-size:cover; font-size:0; background-color:transparent; border:0; cursor:pointer; transition:all 0.4s;}
.main-visual .arrows .slick-prev {background-image:url('../img/main/visual-prev.png');}
.main-visual .arrows .slick-next {background-image:url('../img/main/visual-next.png');}
.main-visual .arrows .slick-prev:hover {background-image:url('../img/main/visual-prev-on.png');}
.main-visual .arrows .slick-next:hover {background-image:url('../img/main/visual-next-on.png');}
.main-visual .paging {width:100%; max-width:1450px; padding:0 15px; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}
.main-visual .progress-container {width:100%; height:6px; border-radius:3px; background-color:#dcdcdc; overflow:hidden;}
.main-visual .progress-bar {height:100%; background:#fcaf17; width:0; transition:width 4.8s; border-radius:3px;}
/* section common */
.sec-tit h3 {font-size:72px; line-height:1em; font-weight:500; font-family:'Aggravo'; color:#010101; position:relative; z-index:1;}
.sec-tit h3 span {font-size:140px; font-family:'Foxlite Script'; color:#f8f8f8; position:absolute; line-height:1.1em; z-index:-1; left:20px; bottom:6px; display:block; letter-spacing:-.02em;}
.sec-tit .more a {font-size:18px; font-weight:700; color:#111; letter-spacing:0; position:relative; padding-right:30px; display:inline-block;}
.sec-tit .more a:after {content:''; width:14px; height:14px; background:url('../img/main/sec-more.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-7px; right:0; transition:all 0.4s;}
.sec-tit .more a:hover:after {right:10px;}

.cursor {position:fixed; width:130px; height:130px; border-radius:50%; background:url('../img/main/sec02-cursor.png') no-repeat; pointer-events:none; transform:translate(0, 0); opacity:0; transition:opacity .4s ease; z-index:9999;}
/* section01 */
.section01 {padding-top:166px;}
.section01 .sec-tit {display:flex; justify-content:space-between; align-items:center;}
.section01 .tit-box {margin-bottom:46px; text-align:right;}
.section01 .tit-box h4 {font-size:50px; line-height:1.1em; color:#111;}
.section01 .cont {width:100%; max-width:1870px; padding:0 15px; margin:0 auto;}
.section01 .col {display:flex; margin:0 -10px;}
.section01 .col .row {width:33.3333333%; padding:0 10px;}
.section01 .inner {border:1px solid transparent; transition:all 0.4s; overflow:hidden; position:relative; border-radius:20px; margin-bottom:20px;}
.section01 .inner:last-child {margin-bottom:0;}
.section01 .inner:hover {border-color:#fcaf17;}
.section01 .inner:before {content:''; opacity:0; width:100%; height:100%; position:absolute; top:0; left:0; z-index:5; background:linear-gradient(0deg,rgba(17, 17, 17, 0.8) 0%, rgba(17, 17, 17, 0) 100%); transition:all 0.4s;}
.section01 .inner:hover:before {opacity:1;}
.section01 .inner  .img .pic {position:relative; height:0; overflow:hidden; transition:all 0.6s;}
.section01 .inner01  .img .pic {padding-bottom:80%;}
.section01 .inner02  .img .pic {padding-bottom:60%;}
.section01 .inner03  .img .pic {padding-bottom:60%;}
.section01 .inner04  .img .pic {padding-bottom:80%;}
.section01 .inner05  .img .pic {padding-bottom:143.33%;}
.section01 .inner  .img .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;}
.section01 .inner .txt {padding:46px 50px; color:#fff; opacity:0; transition:all 0.4s; position:absolute; z-index:10; width:100%; height:100%; top:0; left:0; display:flex; flex-direction:column; justify-content:flex-end;}
.section01 .inner:hover .txt {opacity:1;}
.section01 .inner .txt h5 {font-size:30px; line-height:1.1em; font-weight:600; margin-bottom:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.section01 .inner .txt .tt {display:flex; justify-content:space-between; align-items:center;}
.section01 .inner .txt .tt p.writer {font-size:16px; line-height:1.8em;}
.section01 .inner .txt .tt p.date {font-size:18px; line-height:1.6em;}
/* section02 */
.section02 {padding:210px 0;}
.section02 .col {display:flex;}
.section02 .tit-box {position:relative; width:1%; flex:1 1 auto;}
.section02 .tit-box .sec-tit {position:sticky; top:220px;}
.section02 .tit-box .sec-tit h3 {margin-bottom:46px;}
.section02 .txt-box {width:100%; max-width:830px;}
.section02 .txt-box .wrap {display:flex; flex-wrap:wrap; margin:0 -25px -76px;}
.section02 .txt-box .row {width:50%; padding:0 25px; margin-bottom:76px;}
.section02 .txt-box .row:nth-child(even) {transform:translateY(180px)}
.section02 .inner .img {margin-bottom:36px;}
.section02 .inner .img .pic {position:relative; height:0; padding-bottom:135.90%; overflow:hidden; transition:all 0.6s; border-radius:20px; border:1px solid transparent;}
.section02 .inner:hover .img .pic {border-color:#fcaf17;}
.section02 .inner .img .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 h4 {font-size:26px; margin-bottom:20px; line-height:1.2em; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; display:block;}
.section02 .inner .txt h4:before {content:''; width:0; height:100%; position:absolute; z-index:-1; left:0; background:#fcaf17; border-radius:10px; transition:all 0.4s;}
.section02 .inner:hover .txt h4:before {width:100%;}
.section02 .inner .txt p {font-size:16px; line-height:1.75em; color:#666; height:calc(1.75em * 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;}
/* section03 */
.section03 {padding:200px 0 180px; background:#f8f8f8; position:relative;}
.section03 .sec-tit {margin-bottom:36px;}
.section03 .sec-tit h3 span {color:#fff;}
.section03 .sec-tit .more {text-align:right;}
.section03 .wrap {position:relative;}
.section03 .items {margin:0 -10px;}
.section03 .item {padding:0 10px;}
.section03 .inner {border:1px solid transparent; transition:all 0.4s; padding:110px 50px 56px; border-radius:20px; background:#fff; position:relative;}
.section03 .inner:hover {border-color:#fcaf17;}
.section03 .inner span {position:absolute; top:40px; right:40px; width:20px; height:20px; display:block;}
.section03 .inner span:before,
.section03 .inner span:after {content:''; width:20px; height:2px; background:#ddd; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-10px; transition:all 0.4s; z-index:1;}
.section03 .inner span:after {transform:rotate(90deg);}
.section03 .inner:hover span:before,
.section03 .inner:hover span:after {background:#fcaf17;}
.section03 .inner .tit {margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid #ddd;}
.section03 .inner .tit p {font-size:18px; line-height:1.6em; color:#fcaf17; font-weight:700; margin-bottom:24px;}
.section03 .inner .tit h4 {font-size:26px; line-height:1.4em; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.section03 .inner .txt p {font-size:16px; line-height:1.8em; color:#666; height:calc(1.8em * 1 * 5); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;}
.section03 .slick-arrow {width:36px; height:68px; margin-top:-34px; position:absolute; top:50%; background-repeat:no-repeat; background-size:cover; background-color:transparent; font-size:0; border:0; z-index:11; transition:all 0.4s;}
.section03 .slick-prev {background-image:url('../img/main/sec03-prev.png'); left:-90px;}
.section03 .slick-next {background-image:url('../img/main/sec03-next.png'); right:-90px;}
.section03 .slick-prev:hover {background-image:url('../img/main/sec03-prev-on.png');}
.section03 .slick-next:hover {background-image:url('../img/main/sec03-next-on.png');}