@charset "utf-8";

#main{ padding: 155px 0; min-height: calc(100vh - 286px); background: url(/_public/images2/main/main_bg.png); background-size: cover;}
#main .section01 { margin-bottom: 50px}
#main .section01 .maintit { }
#main .section01 .maintit span { color: #fff; font-size: 28px; font-weight: 600}
#main .section01 .maintit p { color: #fff; font-size: 54px; font-weight: 800}

#main .section02 { }
#main .section02 .mainbox { display:grid;gap:15px;grid-template-columns:1fr 1fr 1.4fr;align-items:stretch;}
#main .section02 .mainbox .mibox { background: #fff; padding: 25px; border-radius: 10px}
#main .section02 .mainbox .mibox .mbtit { display: flex; justify-content: space-between; margin-bottom: 10px}
#main .section02 .mainbox .mibox .mbtit strong { font-size: 18px; color:#FF9211; font-weight: bold;}
#main .section02 .mainbox .mibox .mbtit a { }
#main .section02 .mainbox .mibox .buslink { position: relative}
#main .section02 .mainbox .mibox .buslink h3 {font-size: 24px; margin-bottom: 10px}
#main .section02 .mainbox .mibox .buslink ul { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
#main .section02 .mainbox .mibox .buslink ul li { width: 50%}
#main .section02 .mainbox .mibox .buslink ul li a{ font-size: 16px; color: #787878; font-weight: 500}
#main .section02 .mainbox .mibox .buslink ul li a:hover { font-weight: bold;}
#main .section02 .mainbox .mibox .buslink:last-child ul { display: block; margin-bottom: 5px}
#main .section02 .mainbox .mibox .buslink:last-child ul li { width: 100%}
#main .section02 .mainbox .mibox .busimg { position: absolute; right: 0; bottom: 0}
#main .section02 .mainbox .mibox.mb02 { }
#main .section02 .mainbox .mibox.mb02 p { font-size: 18px; font-weight: 500; line-height: 1.5; margin-bottom: 50px;}
#main .section02 .mainbox .mibox.mb02 p em { font-weight: bold; display: block;}
#main .section02 .mainbox .mibox .invlink { display: flex; gap:35px}
#main .section02 .mainbox .mibox .invlink ul {flex:1;}
#main .section02 .mainbox .mibox .invlink ul li:first-child {margin-bottom:10px;}
#main .section02 .mainbox .mibox .invlink ul li a {display:flex;align-items:center;justify-content:space-between;padding:5px 16px;font-weight:500;border-radius:10px;border:1px solid #0D2D65;font-size:15px;color:#0D2D65;text-decoration:none;}
#main .section02 .mainbox .mibox .invlink ul li a .arrow {flex-shrink:0;width:10px;height:10px;border-top:2px solid #0D2D65;border-right:2px solid #0D2D65;transform:rotate(45deg);}
#main .section02 .mainbox .mibox.mb03 { overflow:hidden;}
#main .section02 .mainbox .mibox.mb03 strong {display:block;font-size:18px;color:#FF9211;font-weight:700;margin-bottom:10px;}
#main .section02 .mainbox .mibox.mb03 h3 {font-size:24px;font-weight:800;margin:0 0 8px;line-height:1.2;}
#main .section02 .mainbox .mibox.mb03 p { word-break: keep-all; margin:0;color:#111;font-size:17px;line-height:1.4;max-width:520px;}
#main .section02 .mainbox .mibox.mb03 .slide {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
#main .section02 .mainbox .mibox.mb03 .products-slidebox {flex:1;min-width:0;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist { position: relative;width:240px;background:#f1f1f1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist a {display:block;width:100%;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist img {display:block;width:100%;height:auto;object-fit:contain;transition:transform .4s ease;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist a:hover img {transform:scale(1.08);}
#main .section02 .mainbox .mibox.mb03 .slide-biglist a::before {content:"";position:absolute;inset:0;background:rgba(0,0,0,0.35);opacity:0;transition:opacity .35s ease;z-index:1;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist a:hover::before {opacity:1;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist a::after {content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);width:60px;height:60px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:#fff;opacity:0;transition:opacity .35s ease,transform .35s ease;z-index:2;}
#main .section02 .mainbox .mibox.mb03 .slide-biglist a:hover::after {opacity:1;transform:translate(-50%,-50%) scale(1);}
#main .section02 .mainbox .mibox.mb03 .slide-minilist {display:flex;align-items:center;gap:12px;margin-top:18px;}
#main .section02 .mainbox .mibox.mb03 .slide-minilist button {width:20px;height:20px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
#main .section02 .mainbox .mibox.mb03 .slide-minilist .btn-next img {transform:rotate(180deg);}
/* ✅ 핵심: 90px 썸네일 4개만 보이게 */
#main .section02 .mainbox .mibox.mb03 .thumb-viewport {overflow:hidden;flex:1;min-width:0;max-width:calc((90px * 4) + (18px * 3));}
#main .section02 .mainbox .mibox.mb03 .thumbs {display:flex;gap:14px;list-style:none;margin:0;padding:0;transform:translateX(0);transition:transform .35s ease;will-change:transform;}
#main .section02 .mainbox .mibox.mb03 .thumbs li {flex:0 0 auto;}
#main .section02 .mainbox .mibox.mb03 .thumbs li a {display:flex;align-items:center;justify-content:center;width:90px;height:62px;background:#f1f1f1;position:relative;}
#main .section02 .mainbox .mibox.mb03 .thumbs li a img {max-width:86%;max-height:86%;object-fit:contain;display:block;}
#main .section02 .mainbox .mibox.mb03 .thumbs li.is-active a {outline:4px solid #111;outline-offset:-4px;}

#main .section03 { margin-top: 20px}
#main .section03 .linkicon { display: flex; background: #0D2D65; padding: 40px 0; border-radius: 10px}
#main .section03 .linkicon a { flex:1; color: #fff; text-align:center; font-size: 18px; font-weight: 600; position: relative;}
#main .section03 .linkicon a i { margin: auto; display: block; width: 55px; height: 55px; margin-bottom: 10px;}
#main .section03 .linkicon a:first-child i { background:url(/_public/images2/main/link-icon01.svg); }
#main .section03 .linkicon a:nth-child(2) i { background:url(/_public/images2/main/link-icon02.svg); }
#main .section03 .linkicon a:last-child i { background:url(/_public/images2/main/link-icon03.svg); }
#main .section03 .linkicon a::before { content: ""; width: 1px; height:90px; background:#627584; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%)}
#main .section03 .linkicon a:last-child::before { display: none;}


/* tablet */
@media all and (max-width:1440px) {
#main .section01 .maintit span { font-size: 26px}
#main .section01 .maintit p { font-size: 50px}
}

/* tablet */
@media all and (max-width:1280px) {
    #main { padding: 110px 20px}
    #main .section01 .maintit span { font-size: 22px}
    #main .section01 .maintit p { font-size: 44px; word-break: keep-all; line-height: 1.4}
    #main .section02 .mainbox {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"mb01 mb03" "mb02 mb03";align-items:stretch;}
    #main .section02 .mainbox .mibox {min-width:0;}
    #main .section02 .mainbox .mibox.mb01 {grid-area:mb01;}
    #main .section02 .mainbox .mibox.mb02 {grid-area:mb02;}
    #main .section02 .mainbox .mibox.mb03 {grid-area:mb03;}
    #main .section02 .mainbox .mibox.mb02 p br { display: none;}
    #main .section02 .mainbox .mibox .invlink {flex-wrap: wrap;flex-direction: column;}
    #main .section02 .mainbox .mibox.mb03 .slide { display: block;}
    #main .section02 .mainbox .mibox.mb03 .slide-biglist { width: 100%; }
    #main .section02 .mainbox .mibox.mb02 p { margin-bottom: 34px}
    #main .section02 .mainbox .mibox.mb03 .products-slidebox { margin-bottom: 10px}
}

/* tablet */
@media all and (max-width:1024px) {
    #main .section02 .mainbox {grid-template-columns:1fr 1fr;grid-template-areas:"mb01 mb02" "mb03 mb03";}
    #main .section02 .mainbox .mibox { padding: 20px}
    #main .section02 .mainbox .mibox.mb01 {grid-area:mb01;}
    #main .section02 .mainbox .mibox.mb02 {grid-area:mb02;}
    #main .section02 .mainbox .mibox.mb03 {grid-area:mb03;}
    #main .section02 .mainbox .mibox .invlink { gap:24px }
    #main .section02 .mainbox .mibox.mb03 .slide { display: flex;  flex-wrap: wrap;  flex-direction: column-reverse;}
    #main .section02 .mainbox .mibox .busimg { position: relative; margin: auto; display: block;}
}

/* tablet */
@media all and (max-width:786px) {
#main { padding: 90px 20px 30px}
#main .section01 { margin-bottom: 30px}
#main .section01 .maintit span { font-size: 17px; margin-bottom: 10px; display: block;line-height: 1.2}
#main .section01 .maintit p { font-size: 30px; line-height: 1.2}
#main .section02 .mainbox { display: flex; flex-direction: column;}
#main .section02 .mainbox .mibox .mbtit strong { font-size: 16px}
#main .section02 .mainbox .mibox .buslink h3 { font-size: 20px}
#main .section02 .mainbox .mibox .buslink ul li a { display: block; padding: 2px 0;}
#main .section02 .mainbox .mibox .busimg { position: absolute; width:60px}
#main .section02 .mainbox .mibox .mbtit { margin-bottom: 5px}
#main .section02 .mainbox .mibox.mb02 p { font-size: 16px; margin-bottom: 24px}
#main .section02 .mainbox .mibox.mb03 strong  { font-size: 16px}
#main .section02 .mainbox .mibox.mb03 h3 { font-size: 20px}
#main .section02 .mainbox .mibox.mb03 p { font-size: 16px}
#main .section02 .mainbox .mibox.mb03 .thumbs li a { width: 64px; height: 45px}
#main .section03 .linkicon a { font-size: 16px}
#main .section03 .linkicon a i { width: 45px; height: 45px; }
#main .section03 .linkicon a:first-child i { background-size:contain;}
#main .section03 .linkicon a:nth-child(2) i { background-size:contain;}
#main .section03 .linkicon a:last-child i { background-size:contain;}
}