@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 300, 700, 800  font-family:'Pretendard Variable';*/

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}


/* 탭 콘텐츠 공통 */
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

.tab-group {position:relative;}
.tab-group .tabs {padding:1.333333em;}
.tab-group .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.tab-group .tabs li button.on .selected {display:block;}

.tab-group .tab-content {padding:0 0 1.333333em;}
.tab-group .tab-con {display:none;}
.tab-group .tab-con:after {content:''; clear:both; display:block;}
.tab-group .tab-con.on {display:block;}



/* 슬라이드 콘텐츠 공통 */
/****************************************************************
	Slider Common Style
****************************************************************/
.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper li {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}
.fix-scroll .swiper-wrapper li a {display:block; position:relative;}
.fix-scroll .swiper-wrapper li a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

/** 슬라이드 전체보기 팝업 */
.popup-slide-view {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; background:rgba(0,0,0,.8);}
.popup-slide-view .popup {position:absolute; height:630px; top:50%; margin-top:-315px; width:1300px; left:50%; margin-left:-650px; max-width:100%;}
.popup-slide-view .popup .pop-title {display:block; position:relative; padding:0 1em 2.5em; color:#fff;}
.popup-slide-view .popup .pop-title p > * {display:inline-block; position:relative; vertical-align:bottom; font-size:1em; line-height:1; font-family:'GmarketSans', sans-serif;}
.popup-slide-view .popup .pop-title strong {font-size:2.5em; font-weight:800; color:#fffb87;}
.popup-slide-view .popup .pop-title span {margin-left:1em; padding-left:1em; position:relative;}
.popup-slide-view .popup .pop-title span:before {content:""; display:block; position:absolute; width:2px; height:1em; left:-1px; top:50%; margin-top:-.5em; background:#d6d8da;}
.popup-slide-view .popup .pop-title span em {color:#ff8a35; font-size:1.3em;}
.popup-slide-view .popup .list {height:545px;}
.popup-slide-view .popup .list li {display:inline-block; position:relative; vertical-align:top; width:19.35em; height:11.6em; margin:1em; border-radius:1em; overflow:hidden; background:#dbdbdb; border:1px solid #dbdbdb;}
.popup-slide-view .popup .list li a {display:block; position:relative; width:100%; height:100%;}
.popup-slide-view .popup .list li img {display:block; position:absolute; top:50%; left:50%; max-width:100%; max-height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.popup-slide-view .visual-goto {display:block; position:absolute; top:0; right:1em; width:2.5em; height:2.9em; background:url(닫기이미지경로) no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-999px;}
@media all and (max-width:1340px) {
	.popup-slide-view .popup {margin-left:0; width:auto; left:1em; right:1em;}
	.popup-slide-view .popup .list li {width:30%; margin:1.5%;}
	.popup-slide-view .popup .list:after {content:""; display:block; clear:both;}
}
@media all and (max-width:1024px) {
	.popup-slide-view .popup {top:0; left:1em; right:1em; bottom:0; height:auto; margin-top:0;}
	.popup-slide-view .visual-goto {top:2em;}
	.popup-slide-view .popup .pop-title {padding:2em 1em;}
	.popup-slide-view .popup .list {position:absolute; left:0; right:0; bottom:0; top:6em; height:auto; padding-bottom:2em;}
	.popup-slide-view .popup .list li {width:48%; margin:1%; float:left;}
}
@media all and (max-width:640px) {
	.popup-slide-view .popup .pop-title {padding:2em 0;}
	.popup-slide-view .popup .pop-title strong {display:block; font-size:2em;}
	.popup-slide-view .popup .pop-title span {padding-left:0; margin-left:0;}
	.popup-slide-view .popup .pop-title span:before {display:none;}
	.popup-slide-view .popup .pop-title span em {font-size:1em;}
	.popup-slide-view .popup .list li {display:block; width:auto; margin:1% 0; float:none;}
	.popup-slide-view .visual-goto {right:0;}
}

/****************************************************************
	임의 스타일 정의
****************************************************************/
.mycode {display:block; position:relative; margin:0 auto;}
.mycode .control {position:relative; display:flex; z-index:1; text-align:center; align-items:center; justify-content:center; margin:1.777778em 0 0;}
.mycode .control > * {display:block; position:relative; align-items:center; }
.mycode .control .pager {display:flex; align-items:center; width:auto; color:#ddd;}
.mycode .control .pager > * {position:relative; width:.666667em; height:.666667em; margin:0 .222222em; background:none; border:3px solid #222; opacity:.3;}
.mycode .control .pager .swiper-pagination-bullet-active,
.mycode .control .pager .swiper-pagination-bullet:hover,
.mycode .control .pager .swiper-pagination-bullet:focus {background:#222; opacity:1;}
.mycode .control .swiper-scrollbar {}
.mycode .control button {width:2.666667em; height:2.666667em; text-indent:-9999px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; overflow:hidden;}
.mycode .control .prev {background-image:url(../img/common/prev.svg);}
.mycode .control .next {background-image:url(../img/common/next.svg);}
.mycode .control .stop {background-image:url(../img/common/stop.svg);}
.mycode .control .play {display:none; background-image:url(../img/common/play.svg);}

.mycode .control button:hover {background-color:#a57234;}
.mycode .control .prev:hover {background-image:url(../img/common/prev_w.svg);}
.mycode .control .next:hover {background-image:url(../img/common/next_w.svg);}
.mycode .control .stop:hover {background-image:url(../img/common/stop_w.svg);}
.mycode .control .play:hover {background-image:url(../img/common/play_w.svg);}

.mycode .slider {display:block; position:relative; height:100%;overflow:hidden;}
.mycode .slider .swiper-container,
.mycode .slider .swiper-wrapper,
.mycode .slider .swiper-slide {height:100%;}
.mycode .slider .swiper-slide > * {display:block;}
.mycode .slider .swiper-slide a {text-align:center;}


/****************************************************************
	레이어팝업
****************************************************************/

.layerPopup {display:none; position:fixed; z-index:99; top:120px; background:#fff; border:1px solid #000; overflow:hidden;}
.layerPopup .pop-con {position:relative;}
.layerPopup .pop-con img {display:block; max-width:100%;}
.layerPopup .pop-control {display:block; position:relative; background:#000; color:#fff; padding:10px 40px 10px 10px; font-size:11px; min-width:200px; height:40px; overflow:hidden;}
.layerPopup .pop-control .dayCloseCheck {display:block; position:absolute; top:0; left:0; opacity:0; z-index:-9999; height:0 !important; width:0 !important;}
.layerPopup .pop-control .dayCloseCheck + label {display:inline-block; position:relative; line-height:20px; padding:0; cursor:pointer;}
.layerPopup .pop-control .dayCloseCheck + label:before {content:""; display:inline-block; width:12px; height:12px; vertical-align:middle; background:#fff; border:3px solid #fff; border-radius:100%; margin-right:.5em; box-sizing:border-box;}
.layerPopup .pop-control .dayCloseCheck:focus + label {text-decoration:underline;}
.layerPopup .pop-control .dayCloseCheck:checked + label:before {background:#0089ff;}
.layerPopup .pop-control .pop-close {display:block; position:absolute; top:10px; right:10px; width:20px; height:20px; background:transparent; overflow:hidden; text-indent:-999px;}
.layerPopup .pop-control .pop-close:before {content:"⨯"; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:20px; text-indent:0; color:#fff; font-size:2em;}


#layerpopup_mycode {left:100px;}

@media all and (max-width:1024px) {
	#layerpopup_mycode {left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
}