@charset "utf-8";

#footer{margin-top:0 !important;}

/* 비주얼 */
.area_visual{position:relative; width:100%;}
.area_visual .mob{display:none;}
.area_visual a{display:block; width:100%;}
.area_visual span{display:block; width:100%;}
.area_visual img{width:100%;}
.area_visual .control{display:flex; position:absolute; bottom:40px; left:50%; transform:translateX(-50%); justify-content:center; z-index:1; width:100%; pointer-events:none;}
.area_visual .control .arrow{position:relative; margin:0; left:auto; right:auto; width:47px; height:30px; pointer-events:auto;}
.area_visual .control .arrow:after{display:none;}
.area_visual .control .swiper-pagination{display:flex; position:relative; bottom:auto; left:auto; margin:0 50px; pointer-events:auto; width:auto; align-items:center;}
.area_visual .control .swiper-pagination-bullet{position:relative; width:8px; height:8px; border-radius:50%; background:#fff !important; opacity:1 !important}
.area_visual .control .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:25px;}
.area_visual .control .swiper-pagination-bullet:before{content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0; height:0; border-radius:50%; border:2px solid #fff; transition:0.5s ease;}
.area_visual .control .swiper-pagination-bullet-active:before{width:22px; height:22px;}


#content .inr{margin:auto; padding:0 20px; max-width:1320px; width:100%;}
#content > div[class^="area_"]{margin-top:120px;}
#content h2.tit{margin-bottom:55px; font-size:35px; color:#182202; font-family:'SCoreDream'; text-align:center;}

/* 리뷰 */ 
.area_review{padding:120px 0; background:#f6faed;}
.area_review ul{display:flex; justify-content:space-between; flex-wrap:wrap;}
.area_review ul li{margin-bottom:30px; width:calc(100% / 2 - 15px);}
.area_review ul li a{display:flex; justify-content:space-between; padding:20px; background:#fff; box-shadow:0 0 20px rgba(35,46,8,0.05);}
.area_review ul li a .img{position:relative; height:200px; width:200px; overflow:hidden;}
.area_review ul li a .img img{width:100%; height:100%; object-fit:cover; transition:0.5s ease;}
.area_review ul li a:hover .img img{transform:scale(1.1);}
.area_review ul li a .txt{display:flex; flex-direction:column; justify-content:space-between; width:calc(100% - 220px);}
.area_review ul li a .txt .tit h3{margin-bottom:3px; font-size:20px; color:#111; font-weight:500;}
.area_review ul li a .txt .tit span{display:block; font-size:0;}
.area_review ul li a .txt .tit span em{display:inline-block; color:#ddd; font-size:20px;}
.area_review ul li a .txt .tit span em+em{margin-left:3px;}
.area_review ul li a .txt .tit span em.on{color:var(--point);}
.area_review ul li a .txt p{font-size:16px; color:#666; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.area_review ul li a .txt i{font-size:12px; color:#aaa;}
.area_review .btn_more{display:block; margin:30px auto 0; width:110px; height:40px; border:1px solid #ccc; border-radius:20px; font-size:16px; text-align:center; line-height:40px; color:#666; transition:0.3s ease;}
.area_review .btn_more:hover{opacity:0.7; }
.area_review .btn_more img{display:inline-block; margin:-4px 0 0 8px; vertical-align:middle; width:15px;}


/* 고객센터 및 공지 */
.area_info{display:flex; margin:80px auto !important;}
.area_info .box{width:calc(100% / 3);}
.area_info h3{margin-bottom:30px; font-size:18px; color:#111; font-weight:600;}
.area_info .cs{padding-right:4%}
.area_info .cs a{display:block; margin-bottom:30px; font-size:30px; color:#111; font-weight:500;}
.area_info .cs a img{display:inline-block; vertical-align:middle; margin:-7px 8px 0 0; width:38px;}
.area_info .cs ul li{font-size:16px; color:#777;}
.area_info .cs ul li+li{margin-top:3px;}
.area_info .cs ul li i{display:inline-block; font-weight:600; color:#222; width:48px;}
.area_info .cs ul li span{display:inline-block; color:#444;}
.area_info .bank{padding:0 4%; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.area_info .bank ul li{font-size:18px;}
.area_info .bank ul li+li{margin-top:3px;}
.area_info .bank ul li i{display:inline-block; color:#222; width:50px; font-weight:600;}
.area_info .bank ul li sapn{display:inline-block; color:#444;}
.area_info .bank em{display:block; margin-top:10px; padding:4px 5px; font-size:16px; color:#444; background:#edf7d4; border-radius:5px; width:147px; text-align:center;}
.area_info .notice{padding-left:4%;}
.area_info .notice .list li{position:relative; padding:15px 0; border-bottom:1px solid #ddd;}
.area_info .notice .list li:first-child{padding-top:0 !important;}
.area_info .notice .list li:nth-child(n+4){display:none;}
.area_info .notice .list li:before,
.area_info .notice .list li:after{content:''; display:block; position:absolute; right:0; bottom:19px; background-repeat:no-repeat; background-position:center; background-size:contain; width:15px; height:15px; transition:0.3s ease;}
.area_info .notice .list li:before{background-image:url(../images/common/img_more_b.png);}
.area_info .notice .list li:after{background-image:url(../images/common/img_more_c.png); opacity:0;}
.area_info .notice .list li:hover:before{opacity:0;}
.area_info .notice .list li:hover:after{opacity:1;}
.area_info .notice .list li a{display:block; font-size:16px; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:calc(100% - 25px); transition:0.3s ease;}
.area_info .notice .list li:hover a{opacity:0.6;}




@media screen and (max-width:1280px){
    #content .inr{padding:0 2%;}
}

@media screen and (max-width:1024px){
    .area_visual{margin-top:72px;}
    .area_visual .web{display:none;}
    .area_visual .mob{display:block;}
    .area_visual .control .arrow{display:none;}
    .area_visual .control .swiper-pagination-bullet{width:6px; height:6px;}
    .area_visual .control .swiper-pagination-bullet-active:before{width:20px; height:20px;}
    .area_visual .control .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:22px;}
    
    #content > div[class^="area_"]{margin-top:90px;}
    #content h2.tit{margin-bottom:40px; font-size:30px;}
    
    .area_review{padding:90px 0;}
    .area_review ul li{margin-bottom:20px; width:calc(100% / 2 - 10px);}
    .area_review ul li a{padding:10px;}
    .area_review ul li a .img{width:150px; height:150px;}
    .area_review ul li a .txt{width:calc(100% - 160px);}
    .area_review ul li a .txt .tit h3{margin-bottom:0; font-size:17px;}
    .area_review ul li a .txt .tit span em{font-size:16px;}
    .area_review ul li a .txt .tit span em+em{margin-left:2px;}
    .area_review ul li a .txt p{-webkit-line-clamp:2; font-size:15px;}
    .area_review .btn_more{margin-top:25px;}
    
    .area_info{margin:60px auto !important;}
    .area_info h3{margin-bottom:20px; font-size:16px;}
    .area_info .cs{padding-right:15px;}
    .area_info .cs a{margin-bottom:15px; font-size:22px;}
    .area_info .cs a img{margin:-5px 6px 0 0; width:26px;}
    .area_info .cs ul li{font-size:14px;}
    .area_info .cs ul li i{width:35px;}
    .area_info .bank{padding:0 15px;}
    .area_info .bank ul li{font-size:16px;}
    .area_info .bank ul li i{width:40px;}
    .area_info .bank em{margin-top:7px; font-size:14px; width:136px;}
    .area_info .notice{padding-left:15px;}
    .area_info .notice .list li{padding:10px 0;}
    .area_info .notice .list li a{font-size:14px;}
    .area_info .notice .list li:before, 
    .area_info .notice .list li:after{bottom:14px; width:13px; height:13px;}
}

@media screen and (max-width:767px){
    .area_visual{margin-top:60px;}
    .area_visual .control{bottom:25px;}
    
    #content > div[class^="area_"]{margin-top:70px;}
    #content h2.tit{margin-bottom:30px; font-size:25px;}
    
    .area_new{margin-top:35px !important;}
    
    .area_review{padding:70px 0;}
    .area_review ul li{margin-bottom:15px; width:calc(100% / 2 - 5px);}
    .area_review ul li a{flex-direction:column; padding:0;}
    .area_review ul li a .img{padding-top:100%; width:100%;}
    .area_review ul li a .img img{position:absolute; top:0; left:0;}
    .area_review ul li a .txt{padding:15px 10px; width:100%;}
    .area_review ul li a .txt .tit h3{font-size:15px;}
    .area_review ul li a .txt .tint span em{font-size:15px;}
    .area_review ul li a .txt .tit span em+em{margin-left:1px;}
    .area_review ul li a .txt p{font-size:14px; margin:10px 0;}
    .area_review .btn_more{font-size:15px; height:38px; line-height:38px;}
    
    .area_info{margin:45px auto !important; flex-wrap:wrap;}
    .area_info h3{margin-bottom:15px; font-size:14px;}
    .area_info .cs{width:50%; padding-right:10px;}
    .area_info .cs a{font-size:16px;}
    .area_info .cs a img{margin:-3px 5px 0 0;}
    .area_info .cs ul li{font-size:13px;}
    .area_info .cs ul li+li{margin-top:2px;}
    .area_info .cs ul li i{width:30px;}
    .area_info .bank{width:50%; border-right:0; padding:0 0 0 10px;}
    .area_info .bank ul li{font-size:14px;}
    .area_info .bank ul li i{width:30px;}
    .area_info .notice{width:100%; padding:25px 0 0; margin-top:25px; border-top:1px dashed #ddd;}
}