@charset "utf-8";
#mainslider{position: relative;}
#mainslider .txt{position: absolute; inset: 0; padding: 5% 3%; color: #fff;}
#mainslider .txt .desc{font-family: "Jost", sans-serif; font-weight: 300; font-size: 5.4rem; line-height: 1.3; letter-spacing: 0.1em}
#mainslider .txt .title{font-family: "Jost", sans-serif; font-weight: 500; font-size: clamp(3rem, 3vw + 1.5rem, 7.2rem); line-height: 1; letter-spacing: 0.05em; white-space: nowrap;}
#mainslider .txt .sub-title{text-align: right; font-size: 2.3rem; font-weight: 300;}

#slider { display: none;}
#slider.slick-initialized { display: block;}
#slider figure {position: relative; overflow: hidden;}

#slider figure img {transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 8s; width: 100%;}
#slider .slick-active figure img, 
#slider .slick-continue figure img {transform: scale(1.2);}
#slider .first-slide figure img {transform: scale(1);}
#slider .first-active figure img {transform: scale(1.1);}

.infoBox{display: flex; justify-content: space-between;padding-top: 40px;max-width: 1200px; margin:0 auto 30px; flex-wrap: wrap}
.topics{width: 70%;}
.topics .head{background: #eeeeee; padding:  5px 20px; margin-right: 10px;}
.topics .head span{font-family: "Jost", sans-serif; font-weight: 300; font-size: 1.8rem;}
.topics .date{font-family: "Jost", sans-serif; font-weight: 500;}
.topics  li{width: 100% !important; padding: 10px 10px 20px;margin-bottom: 10px; border-bottom: 1px dotted #ccc;}
.topics  a{font-size: 1.6rem; text-decoration: underline;}
.topics .bx-wrapper{box-shadow: none; border: none; margin-bottom: 0}
.topics a:hover{opacity: 0.8;}

.fbBox{width: 28%;}
.fbBox .bnrInsta{padding-top: 25px;}
.fbBox .bnrInsta a{transition: 0.5s ease;}
.fbBox .bnrInsta a:hover{opacity: 0.8;}


.sec-title .title{font-family: "Jost", sans-serif; font-size: 4.5rem; font-weight: 300; color: #999999; line-height: 1; margin-bottom: 1.5rem;}
.sec-title .sub-title{color: #999999; font-weight: 700; font-size: 1.5rem; margin-bottom: 3rem; font-style: italic;}
.sec-title .desc{font-size: 1.6rem; line-height: 1.8;}

.btn-contact{background: #e00019; width: 100%; max-width: 560px; padding: 40px 12px; display: inline-flex; align-items: center; justify-content: center; height: 60px;}
.btn-contact span{font-size: 1.6rem; font-weight: 500; color: #fff;}
.btn-contact .arrow{width: 38%; height: 1px; background: #fff; margin-left: 15px; position: relative; transition: all 0.5s ease;}
.btn-contact .arrow::after{content: ''; position: absolute; border: solid #fff; border-width: 0 1px 0 0; display: inline-block; padding: 6px; right: 3px; bottom: -5px; transform: rotate(-45deg);}
.btn-contact:hover .arrow {transform: translateX(20px);}
.btn-contact:hover{background: #9b000d;}

.about{padding: 90px 0;}
.about .container{max-width: 1680px;}
.about-wrap{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.about-img figure:nth-child(1){width: 71%;}
.about-img figure:nth-child(2){width: 69.6%; margin: -3% 0 0 auto;}
.trading{
	padding: 90px 0;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../../../assets/img/top/bg_map.jpg);
}

.contact{padding: 90px 0; text-align: center;}
.links a{margin: 0 20px; display: inline-flex; align-items: center;}
.links a span{font-size: 2.1rem; color: #999999; margin-right: 10px;}
.links a:hover span{color: #e00019;}

.product{padding: 90px 0;}
.product figure{overflow: hidden;}
.product figure img{transition: all 1s ease;}
.product .txt{padding-top: 20px; text-align: center;}
.product .company{height: 33px; display: flex; align-items: center;}
.product .txt img{display: block; margin: 0 auto;}
.product .txt p{font-size: 2rem; border-top: 1px solid #999999; margin-top: 10px; padding-top: 10px; line-height: 1.5; font-weight: 700;}

.product-slider{margin: 0 -30px;}
.product-slider .slick-slide{margin-left: 30px; margin-right: 30px;}
.product-slider a:hover figure img{transform: scale(1.1);}

.product-title{margin-bottom: 90px; text-align: center; position: relative; }
.product-title p{font-family: "Jost", sans-serif; font-size: 2.9rem; color: #999999; line-height: 1; background: #fff; padding: 0 2%; display: inline-block; font-weight: 700; letter-spacing: 0.1em;}
.product-title::after{content: ''; position: absolute; border-bottom: 1px solid #999999; width: 100%; left: 0; top: 50%; z-index: -1;}

.red{color: #e00019;}

.modal-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 9990; display: none;}
.modal-wrap{margin: 0 auto; max-width: 1066px; width: 94%; background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9995; display: none;}
.modal-close{cursor: pointer; position: fixed; right: 5px; top: -55px;}

.modal-body{display: flex; align-items: center; max-height: 70vh; overflow: auto;}
.modal-body figure{flex: 1;}
.modal-body figure img{object-fit: cover;}
.modal-body .txt{width: 35%; padding: 2%;}
.modal-body .txt .title{font-size: 2.4rem; margin-top: 10px; line-height: 1.4;}
.modal-body .txt .desc{font-size: 1.4rem; padding: 20px; line-height: 2;}

@media (min-width: 768px){
/*
    .topics-wrap{display: flex; align-items: flex-start;}
    .topics .txt-slider .date{border-right: 1px solid #999999; padding-right: 10px; margin: 0 10px;}
    .topics .txt-slider a{font-size: 1.6rem; display: flex; align-items: baseline;}
*/

    #mainslider .txt{display: flex; align-items: center; justify-content: space-between;}

    .links{margin-top: 40px;}

    .about-wrap .sec-title{width: 50%;}
    .about-img{width: 46%;}
}

@media (min-width: 1200px){
    #mainslider .txt .desc{font-size: 10rem; line-height: 1.5;}
    #mainslider .txt .sub-title{font-size: 2.6rem;}

    .topics .txt-slider a{font-size: 1.8rem;}
    
    .sec-title .title{font-size: 10rem;}
    .sec-title .desc{font-size: 1.8rem;}
    .sec-title .sub-title{font-size: 2.8rem;}
}

@media (min-width: 1500px){
    #mainslider .txt .desc{font-size: 12rem;}
}

@media (max-width: 767px){
    .btn-contact{position: fixed; left: 0; bottom: 0; max-width: 100%;}
    .btn-contact img{width: 35%;}
    .links a{margin: 5px 0; display: flex; justify-content: center;}

    .modal-body{flex-direction: column;}
    .modal-body .txt{width: 100%;}

    .product-title{margin-bottom: 30px;}
    .product-title p{font-size: 2.2rem;}
    .product .txt p{font-size: 1.6rem;}
    .product-slider{margin: 0 -10px;}
    .product-slider .slick-slide{margin-left: 10px; margin-right: 10px;}

    .sec-title .title{text-align: center;}

    .about-wrap{flex-direction: column;}
    .about-img{margin-top: 30px;}

    #mainslider .txt .desc{margin-bottom: 20%;}
    #mainslider .txt .title{text-align: center;}
    #mainslider .txt .sub-title{text-align: center;}

    .mv .container{width: 100%;}
    
    .topics{padding: 1rem 0;width: 95%; margin: 0 auto 40px; overflow-y: scroll; height: 300px}
    .topics .head{display: inline-block; margin-bottom: 5px;}
    .topics .date{display: block;}
    .topics .head span, .topics .txt-slider .date{font-size: 1.2rem;}
	.fbBox{width: 90%; margin: auto}

    .trading .sec-title .desc{text-align: left;}

    .about, .trading{padding: 68px 0;}
    .product, .contact{padding: 20px 0;}

    #mainslider .txt .desc{font-size: 13vw; text-align: center;padding-left: 2%;}
}