@charset "utf-8";

header.main{position: absolute;left: 0;right: 0;z-index: 1;}
header.main .wrap{height: 65px;justify-content: end;}
header.main .main-header{border: 0;}
header.main .wrap>a.main-logo{background: url(../images/main/img-main_logo.png)no-repeat;position: absolute;left: 50%;transform: translateX(-50%);}
header.main .wrap>.header-menu>.menu-detail>ul:not(.management-menu)>li.system-management>a{background: url(../images/main/ico-header-menu-detail.png)no-repeat center;}
header.main .wrap>.header-menu>.menu-detail>ul:not(.management-menu)>li:hover{background: unset;border: 1px solid var(--border-color-type02);}
header.main .wrap>.header-menu .search-box{display: none;}
header.main .wrap>.header-menu>.menu-detail>ul:not(.management-menu)>li.login>a{background: url(../images/main/ico-header-login.png)no-repeat center;}
.main-bg{background:#000 url(../images/main/img-main_low_2.png)no-repeat center / cover;width:100%;height:100%;max-height: 100%;position: relative;}/* animation:main-bg 1s ease-in-out forwards; */
.main-bg .wrap{position: relative;height: 100%;}
article{width: 800px;height: 800px;float: right;position: relative;}
article>.drill-img{position: absolute;}
article>.drill-img.line{right: 27px;top: 188px;animation: drill-line .6s ease-in-out forwards;animation-delay: 2s;opacity: 0;}
article>.drill-img.ex{bottom: 70px;opacity: 0.9;overflow: hidden;}
article>.drill-img.ex>img{animation: drill-ex .5s ease-in forwards;animation-delay: 2s;opacity: 0;}
.drill-img.scroll{cursor:pointer; z-index: 1;opacity: 0;bottom: 75px;color: #fff;position: absolute;left: 50%;transform: translate(-50%,60px);font-size: 12px;animation: drill-ex2 .5s ease-out forwards;animation-delay: 1s;}
article>.pics{transform: rotate(-30deg);width: 540px;bottom: 150px;position: absolute;right: 110px;}

.icon-scroll,.icon-scroll:before{position: absolute;}
.icon-scroll {width: 20px;height: 28px;bottom: 20px;left:50%;transform: translateX(-50%);border: 1.5px solid #fff;border-radius: 25px;}
.main-text{color: #fff;padding-top: 175px;}
.main-text h1{font-size: 64px;font-weight: 500;}
.main-text p{font-size: 16px;}

.search-screen>ul>li{gap:16px;}
/* section.main .search-screen>ul>li>p>span{width: 115px;text-align: right;} */

.main-bg .search-box{margin-top: 40px;margin-right: 0;position: relative;}
.main-bg .search-box button{width: 25px;height: 25px;background: url(../images/main/ico-main-search.png)no-repeat center;position: absolute;left: 20px;transform: translateY(-50%);top: 50%;}
.main-bg .search-box input[type="text"]{border-radius: 50px;font-size: 18px;width: 664px;background: rgba(255 255 255 / .2);border: 2px solid #70A166;padding: 16px;color: #fff;font-weight: 500;padding-left: 66px;}
.main-bg .search-box input[type="text"]::placeholder{color: rgba(255 255 255 / .5);}
.main-bg .search-box input[type="text"]:focus{outline: 1px solid #70A166;}
.img-title{text-align: right;position: absolute;right: 0;bottom: 30px;color: #fff;}
section.main{padding: 100px 0;}
.title{text-align: center;}
.title>h1{font-size: 40px;font-weight: 600;position: relative;}
.title>h2{font-size: 40px;font-weight: 600;position: relative;}
.title>p{font-size: 18px;margin-top: 14px;}
section.main.quick{overflow: hidden;}
section.main.quick .title>h1{color: #fff;text-align: right;}
section.main.quick .title>p{color: #fff;text-align: right;position: absolute;right: 20px;}
section.main.quick .title>p::after{content: '';display: block;position: absolute;left: 0;height: 1px;background: #fff;opacity: .5;right: -100%;top: 65px;}
section.main.quick .wrap{position: relative;}
section.main:not(section.quick,section.board-area) .title>h1::before{content: '';display: inline-block;width: 70px;height: 5px;background-color: #707070;position: absolute;left: 50%;transform: translateX(-50%);top: -10px;}
section.main.quick:not(.type){padding:80px 0;background: url(../images/main/img-quick-menu-bg.png)no-repeat center}
section.main.quick .quick-menu{margin-top: 160px;text-align: right;}
section.main.quick .quick-menu>ul{display: flex;gap: 80px;justify-content: end;}
section.main.quick .quick-menu>ul>li>a{color: #fff;display: flex;flex-direction: column;gap: 32px;text-align: center;font-size: 18px;font-weight: 500;}
section.main.quick .quick-menu>ul>li:nth-child(1)>a::before{background-image: url(../images/main/ico-quick_menu1.png);}
section.main.quick .quick-menu>ul>li:nth-child(2)>a::before{background-image: url(../images/main/ico-quick_menu2.png);}
section.main.quick .quick-menu>ul>li:nth-child(3)>a::before{background-image: url(../images/main/ico-quick_menu3.png);}
section.main.quick .quick-menu>ul>li:nth-child(4)>a::before{background-image: url(../images/main/ico-quick_menu4.png);}
section.main.quick .quick-menu>ul>li:nth-child(5)>a::before{background-image: url(../images/main/ico-quick_menu5.png);}
section.main.quick .quick-menu>ul>li>a::before{content: '';display: block;width: 60px;height: 60px;background-repeat: no-repeat;background-position: center;background-size: contain;}

section.main .situation{margin-top: 80px;background: url(../images/main/BIOMIMICRY.png)no-repeat center;display: flex;justify-content: center;gap: 100px;}
section.main .situation>div{display: flex;align-items: center;}
section.main .situation>div>div{display: flex;align-items: baseline;}
section.main .situation .big-title{font-size: 24px;font-weight: 600;margin-right: 24px;}
section.main .situation .today{font-size: 12px;margin-right: 8px;font-weight: 300;color: #888888;text-transform: uppercase;}
section.main .situation .today-num{font-size: 20px;font-weight: 600;color: #888888;margin-right: 40px;}
section.main .situation .small-title{font-size: 20px;font-weight: 300;margin-right: 24px;text-transform: uppercase;}
section.main .situation .big.num{font-size: 32px;font-weight: 600;}
section.main .situation ul{display: flex;flex-direction: column;}
section.main .situation ul>li{display: flex;gap: 40px;align-items: baseline;margin: 8px 0;}
section.main .situation .name{font-size: 16px;font-weight: 600;display: inline-block;width: 85px;}
section.main .situation .name span{font-size: 14px;font-weight: 600;display:block;color: #848484;}
section.main .situation .name + p{font-weight: 600;font-size: 22px;}


section.main.quick.type{overflow: unset;padding-top: 80px;padding-bottom: 0;position: relative;}
section.main.quick.type::before{content: '';display: block;position: absolute;top: 0;background: #000;background: #54B99A;width: 100%;height: 280px;}
section.main.quick.type .wrap{display: flex;justify-content: space-between;}
section.main.quick.type .title>h1{text-align: left;}
section.main.quick.type .title>p{text-align: left;left: 20px;right: unset;}
section.main.quick.type .title>p::after{left: -150%;right: 0;}
section.main.quick.type .quick-list>ul{display: flex;gap: 16px;}
section.main.quick.type .quick-list>ul::after{content: none;}
section.main.quick.type .quick-list>ul>li{width: 300px;height: 335px;background-repeat: no-repeat;background-position: center;transition:all .3s ease-in-out;}
section.main.quick.type .quick-list>ul>li:hover{transform: translate(0,-30px);box-shadow: 3px 5px 10px rgba(0 0 0 / .3);}
section.main.quick.type .quick-list>ul>li:nth-child(1){background-image: url(../images/main/img-quick-list1.png);}
section.main.quick.type .quick-list>ul>li:nth-child(2){background-image: url(../images/main/img-quick-list2.png);}
section.main.quick.type .quick-list>ul>li:nth-child(3){background-image: url(../images/main/img-quick-list3.png);}

section.main.quick.type .quick-list>ul>li>a{display: flex;width: 100%;height: 100%;flex-direction: column;justify-content: end;}
section.main.quick.type .quick-list>ul>li>a>span{color: #fff;background-color: rgba(0 0 0 / .65);padding: 16px 20px;font-size: 20px;font-weight: 600;}

section.board-area .title{border-bottom: 1px solid var(--border-color-type02);padding-bottom: 16px;}
section.board-area .title>h1::before{content: none;}
section.board-area .title{display: flex;align-items: baseline;justify-content: space-between;}
section.board-area .title a{position: relative;font-size: 16px;color: var(--font-function-title-color);}
section.board-area .title a:hover{color:var(--btn-color-blue)}
section.board-area .title a::after{content: '';display: inline-block;margin-left: 16px;width: 8px;height: 8px;background: url(../images/main/ico-detail-arrow.png)no-repeat center}

section.board-area ul{margin-top: 24px;display: flex;flex-direction: column;gap: 24px;}
section.board-area ul::after{content: none;}
section.board-area ul span{font-size: 18px;}
section.board-area ul .date{color: #777;font-weight: 500;margin: 0;flex-shrink: 0;}
section.board-area ul .date::after{display: inline-block;vertical-align: middle;content: '';width: 1px;height: 16px;margin: 0 20px;background-color: #ccc;}
section.board-area ul .board-title{font-weight: 600;color: var(--font-normal-color);}
section.board-area ul .writer{color: #777;font-weight: 500;display:block;flex-shrink: 0;}
section.board-area ul>li{width: 100%;}
section.board-area ul>li>a{display: flex;justify-content: space-between;}
section.board-area ul>li>a>.flex-box{width: calc(100% - 80px);}

section.board-area ul>li>a .board-title{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

footer.main{margin: 0;}





























@media (max-width: 767px) {
    .icon-scroll {
        position: relative;
    }
}
.icon-scroll:before {content: '';width: 4px;height: 6px;background: #fff;left: 50%;transform: translateX(-50%);top: 4px;border-radius: 4px;animation-duration: 1.5s;animation-iteration-count: infinite;animation-name: scroll;}
@keyframes scroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%,10px);
    }
}

/* @keyframes drill-line {
    0%{
        opacity: 0;
        transform: translate(20px,-20px);
    }
    100%{
        opacity: 1;
        transform: translate(0,0);
    }
} */

@keyframes main-bg{
    0%{
        background-size: 110%;
    }
    100%{
        background-size: 105%;
    }
}