@charset "utf-8";

/* main-common */
.container-wide {
    max-width:1630px;
    width:100%;
    min-width:1230px;
    margin:0 auto;
    padding:0 15px;
}
.sec-title {
    text-align: center;
    margin:0 0 35px;
    font-size:27px;
    font-weight:bold;
    line-height:normal;
    letter-spacing: -0.01em;
}

/* sec-visual */
#main-index .sec-visual {
    display:flex;
    gap:30px 20px;
}
#main-index .sec-visual .main-visual {
    position: relative;
    flex:1;
}
#main-index .sec-visual .swiper-arrow-wrap {
    width:1060px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
    pointer-events: none;
    display:flex;
    align-items: center;
    justify-content: space-between;
    z-index:1;
}
#main-index .sec-visual .swiper-arrow-wrap > div {
    pointer-events: auto;
    padding:0 17px;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}
#main-index .sec-visual .swiper-arrow-wrap > div img {
    display:block;
    border-radius:50%;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
}
#main-index .sec-visual .swiper-controls-wrap {
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    gap:0 10px;
}
#main-index .sec-visual .swiper-controls-wrap .swiper-controls {
    min-width:114px;
    background:rgba(0,0,0,0.5);
    border-radius:18px;
    padding:0 20px;
    height:36px;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:0 15px;
    color:#fff;
    font-size:15px;
    letter-spacing: -0.01em;
    line-height:normal;
}
#main-index .sec-visual .swiper-controls-wrap .swiper-controls .swiper-btns {
    display:flex;
    align-items: center;
    gap:0 10px;
}
#main-index .sec-visual .swiper-controls-wrap .swiper-controls .swiper-btns img {
    display:block;
}
#main-index .sec-visual .swiper-controls-wrap .swiper-controls .divided:before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.6);
}
#main-index .sec-visual .swiper-controls-wrap .swiper-autoplay-toggle {
    width:36px;
    height:36px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:rgba(0,0,0,0.5);
    border-radius:50%;
    cursor:pointer;
}
#main-index .sec-visual .swiper-controls-wrap .swiper-autoplay-toggle > div {
    width:8px;
    height:12px;
    background:url(../imgs/pause.png) no-repeat center;
}
#main-index .sec-visual .swiper-controls-wrap .swiper-autoplay-toggle > div.stop {
    background:url(../imgs/play.png) no-repeat center;
}
#main-index .sec-visual .event-area {
    flex-basis:32.5%;
    min-width:0;
    min-height:0;
    position:relative;
}
#main-index .sec-visual .event-area > .swiper-wrapper {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* sec-middle-banner */
#main-index .sec-middle-banner {
    margin-top:70px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
}

/* sec-best */
#main-index .sec-best {
    margin-top:120px;
}
#main-index .sec-best .best-list {
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    gap:70px 0;
}
#main-index .sec-best .best-item {
    flex-basis:20%;
    padding:0 20px;
}
#main-index .sec-best .best-item a {
    color:#333;
    text-decoration: none;
    display:block;
}
#main-index .sec-best .best-item .title {
    display:block;
    font-size:17px;
    font-weight:bold;
    letter-spacing: -0.01em;
    margin-top:25px;
}
#main-index .sec-best .more-btn {
    display:block;
    margin:40px auto 0;
    width:170px;
    line-height:40px;
    border:1px solid #b2b2b2;
    border-radius:21px;
    text-align:center;
    color:#333;
    font-size:15px;
    letter-spacing: -0.01em;
}

/* sec-blog */
#main-index .sec-blog {
    margin-top:95px;
    background:#f9f9f9;
    padding:60px 50px 50px;
}

/* sec-middle-banner2 */
#main-index .sec-middle-banner2 {
    margin-top:100px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
}

/* sec-new */
#main-index .sec-new {
    margin-top:115px;
    padding-bottom:105px;
    border-bottom:1px solid #e5e5e5;
}

/* sec-board */
#main-index .sec-board {
    margin-top:80px;
    display:flex;
    gap:0 60px;
}

/* sec-cs */
#main-index .sec-cs {
    margin-top:110px;
    display:flex;
    align-items: center;
}
#main-index .sec-cs .title {
    background:#ff62b0;
    flex:0 0 190px;
    border-radius:8px 0 0 8px;
    height:132px;
    display:flex;
    align-content: center;
    justify-content: center;
    padding-top:37px;
}
#main-index .sec-cs .title span {
    display:block;
    font-size:18px;
    font-weight:bold;
    color:#fff;
    letter-spacing: -0.01em;
    padding-top:37px;
    background:url(../imgs/ico_cs.png) no-repeat center top;
}
#main-index .sec-cs .content {
    flex:1;
    display:flex;
    align-items: center;
    height:132px;
    border:1px solid #e5e5e5;
    border-left:none;
    border-radius:0 8px 8px 0;
}
#main-index .sec-cs .info {
    flex:0 0 532px;
    padding-left:50px;
}
#main-index .sec-cs .info .tel {
    font-size:21px;
    font-weight:bold;
    letter-spacing: -0.01em;
    margin-bottom:6px;
    line-height:normal;
}
#main-index .sec-cs .info .tel span {
    font-size:16px;
    vertical-align: baseline;
}
#main-index .sec-cs .info p {
    font-size:13px;
}
#main-index .sec-cs .info .mail {
    display:inline-block;
    font-size:14px;
    font-weight:bold;
    padding-left:25px;
    background:url(../imgs/ico_mail.png) no-repeat left center;
    color:#333;
    line-height:1;
}
#main-index .sec-cs .shortcut-area {
    flex:1;
    display:flex;
    padding:0 45px;
    align-items:center;
    justify-content: space-between;
    position:relative;
    gap:0 80px;
}
#main-index .sec-cs .shortcut-area:before {
    content:'';
    display:block;
    width:1px;
    height:80px;
    background:#e5e5e5;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
}
#main-index .sec-cs .shortcut-area a {
    flex:1;
    color:#333;
    text-align:center;
}
#main-index .sec-cs .shortcut-area span {
    margin-top:12px;
    display:block;
    font-size:14px;
    font-weight:bold;
    letter-spacing: -0.01em;
    line-height:normal;
}

#main-index .sec-goods-slider {
    margin-top: 100px;
}