@charset "utf-8";
/*!
 * --------------------------------------------------------------------------------
 * Service     : 한국조폐공사 쇼핑몰
 * File Name   : koreamint_main.css
 * Description : 메인페이지 스타일시트
 * Author      : 한지영 (iam.hanjiyeong@gmail.com)
 * Date        : 2021-12-15
 * --------------------------------------------------------------------------------
 */

.inner {padding-left:0; padding-right:0}

/* Main Section */
.main-section {padding-top:4rem}
.main-section .section-title {margin-bottom:0; font-size:2.2rem; font-weight:700; line-height:1.5; letter-spacing:0; text-align:center}
.main-section .section-body {margin-top:2.4rem; overflow:hidden}

/* Visual Banner */
.slider-main-vis .img-pc {display:none}

/* Best */
.main-best-section .section-body {padding:0 1.6rem}

/* Event */
.main-event-section {background-color:#F5F6F7}
.main-event-section .desc {position:relative; margin:-6rem 0 0 3.2rem; padding:2.4rem 2.8rem; background-color:#141F26; color:#fff}
.main-event-section .desc .title {font-size:2rem; font-weight:700; word-break:keep-all}
.main-event-section .desc p {margin:0.8rem 0 1.2rem; font-size:1.4rem}
.main-event-section .desc .link {display:inline-block; height:4.4rem; padding:0 1.6rem; border:2px solid #fff; font-size:1.4rem; font-weight:500; line-height:4rem}
.main-event-section .image a {display:block}
.main-event-section .image img {width:100%}

/* Special */
.main-special-section {background-color:#F5F6F7}
.main-special-section .item-title {position:absolute; top:2rem; left:2.4rem; right:2.4rem; z-index:1; color:#fff; font-size:2rem; font-weight:700; line-height:1.34; word-break:keep-all}
/* .main-special-section .item-list .item-thumb .thumb::after {top:0; bottom:auto; height:48%; background-image:linear-gradient(rgba(12,12,24,0.48),transparent)} */
.main-special-section .item-list .item-thumb .thumb::after {top:0; bottom:auto; height:48%; background-image:linear-gradient(rgba(12,12,24,0.0),transparent)}

/* 쇼핑몰 가이드 */
.main-guide-section {border-top:1px solid #E8EAEC; color:#686C70}
.main-guide-section .col {border-bottom:1px solid #E8EAEC}
.main-guide-section .title {height:5.2rem; padding:0 2.4rem; font-size:1.6rem; font-weight:500; line-height:5.4rem}
.main-guide-section .desc {display:none; padding:0.8rem 2.4rem 1.6rem; font-size:1.5rem}
.main-guide-section .tel a {color:#111; font-size:2.4rem; letter-spacing:0}
.main-guide-section .col.active {background-color:#F5F6F7}
.main-guide-section .col.active .foot-title {color:#111}

/* 오늘의 금시세 */
.today-gold .section-head {position:relative; padding:1rem 0 1rem 6rem; background-color:#D0B36F; color:#111}
.today-gold .section-head::before {content:''; position:absolute; top:50%; left:2rem; display:block; width:3.2rem; height:3.2rem; background:transparent url(../images/icons/icon-coin.png) no-repeat 50% 50%; background-size:100%; transform:translateY(-50%)}
.today-gold .section-body {margin-top:0; padding:1.6rem 2.4rem 2rem; background-color:#111; color:#fff; font-size:1.3rem}
.today-gold .section-title {margin-top:0.2rem; font-size:1.6rem; font-weight:700; line-height:1.3; text-align:left}
.today-gold .date {font-size:1.2rem; font-weight:500}
.today-gold dl {margin:0.6rem 0}
.today-gold dt {float:left; width:50%}
.today-gold dd {float:right; width:50%; color:#D0B36F; text-align:right; font-weight:700}

/* 공지사항 */
.main-notice-section {padding:2rem 2.4rem 1.6rem}
.main-notice-section .section-title {margin-bottom:1.2rem; font-size:1.6rem; font-weight:700; line-height:1.3; letter-spacing:0}
.main-notice-section .link {display:block; font-size:1.5rem}
.main-notice-section .date {color:#89929D}
.main-notice-section .title {margin-left:1.2rem; font-weight:400}

@media screen and (min-width:1024px) {
	/*#km-header {position:fixed; top:0; left:0; right:0}*/
	/*.header-top {background-color:transparent}*/
	/*.header-nav {background-color:transparent}*/
	.main-section {padding-top:8rem}
	.main-section .section-title {font-size:3.2rem}
	.main-section .section-body {margin-top:3.2rem; overflow:hidden}
	.slider-main-vis .img-mo {display:none}
	.slider-main-vis .img-pc {display:block}
	.main-best-section .item-list.col-4 .item {width:25%}
	.main-event-section .desc {float:left; width:50%; height:36rem; margin:0; padding:6rem 8rem}
	.main-event-section .desc .title {font-size:3.6rem}
	.main-event-section .desc p {margin:1.6rem 0 3.2rem; font-size:1.8rem}
	.main-event-section .desc .link {height:4.8rem; padding:0 2rem; font-size:1.6rem; line-height:4.2rem}
	.main-event-section .desc .br {display:block}
	.main-event-section .image {float:right; width:50%; height:36rem}
	.main-special-section .item-title {top:4rem; left:4.8rem; right:4.8rem; font-size:2.4rem}

	/* 쇼핑몰 가이드 */
	.main-guide-section {background-color:#F5F6F7; padding:4.8rem 0 6rem; border:0}
	.main-guide-section .inner {padding:0 2.4rem}
	.main-guide-section .col {float:left; width:25%; border:0}
	.main-guide-section .title {height:auto; padding:0; color:#111; font-size:1.6rem; line-height:5.4rem}
	.main-guide-section .desc {display:block !important; padding:0; font-size:1.3rem}
	.main-guide-section .desc p {margin-bottom:0.4rem}
	.main-guide-section .desc .br {display:block}

	/* 오늘의 금시세 */
	.today-gold .section-head {float:left; width:28rem; height:8rem; padding:1.8rem 0 0 8rem}
	.today-gold .section-head::before {left:2.4rem; width:4rem; height:4rem}
	.today-gold .section-body {float:right; width:calc(100% - 28rem); height:8rem; padding:0}
	.today-gold .section-title {margin-top:0.2rem; font-size:1.8rem}
	.today-gold .date {font-size:1.3rem}
	.today-gold dl {float:left; width:25%; height:100%; margin:0; padding-top:1.8rem}
	.today-gold dl:not(:first-child) {border-left:1px solid rgba(255,255,255,.2)}
	.today-gold dt, .today-gold dd {float:none; width:100%; text-align:center}
	.today-gold dt {font-size:1.3rem; font-weight:500}
	.today-gold dd {margin-top:0.2rem; font-size:1.6rem}

	/* 공지사항 */
	.main-notice-section {padding:2.4rem 2.4rem 2rem}
	.main-notice-section .section-title {float:left; width:16rem; margin-bottom:0; font-size:1.6rem; font-weight:700; line-height:1.3}
	.main-notice-section .section-body {position:relative; float:right; width:calc(100% - 16rem)}
	.main-notice-section .link {max-width:60%; font-size:1.4rem}
	.main-notice-section .ui-btn {position:absolute; top:-1rem; right:0}
}

@media screen and (min-width:1320px) {
	.main-guide-section {padding:7.2rem 0 10rem}
	.main-guide-section .inner {padding:0}
	.main-guide-section .title {font-size:1.7rem; font-weight:700}
	.main-guide-section .desc {font-size:1.4rem}
	.main-notice-section {padding:2.4rem 0.2rem 2rem}
}