@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.only-desktop-tablet {display:block;}

#wrapper {position:relative; padding-top:calc(var(--size30) + var(--header-height));}

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {position:relative; width:100%; max-width:1260px; padding-left:30px;padding-right:30px; margin:0 auto;}
.contain:after {content:" "; display:block; clear:both;}

/* header */
#header {position:fixed; z-index:90; left:0; top:0; width:100%; background:#121212; transition:0.2s all ease; padding-top:var(--size30);}
#header .contain {position:relative; height:var(--header-height);}
#header .header-inner {position:relative; background:#000; height:var(--header-height); border-radius:1em; transition:0.2s all ease;}
.sitelogo {position:absolute; left:var(--container-space); top:50%; margin-top:-16px; z-index:10;}
.sitelogo a {display:block;}

#headMenu {position:absolute; right:calc(var(--container-space) + 47px); top:50%; transform:translateY(-50%);}
#headMenu ul {display:flex; align-items:center;}
#headMenu ul li {margin-left:var(--size30);}
#headMenu ul li:last-child {margin-right:0;}
#headMenu ul li a {display:inline-block; font-weight:400; line-height:1; letter-spacing:-0.04em; color:#777;}
#headMenu ul li a:hover {color:#fff;}
#headMenu ul li.type-round a {min-width:94px; padding:10px; font-weight:700; color:#121212; background:#fff; text-align:center; border-radius:100vh;}
#headMenu ul li.type-round a:hover {background:#3e3e3e; color:#fff;}

.header-fixed #header {_border-bottom:1px solid #dfdfdf; padding-top:0;}
.header-fixed #header .contain {height:60px;}
.header-fixed #header .header-inner {height:60px;}

.head-search {position:absolute; right:calc(230px + var(--container-space) + 30px); top:50%; transform:translateY(-50%); width:50%; max-width:488px;}
.head-search .in {display:flex; border-radius:1em; width:0; margin:0 0 0 auto; background:#0047ab; overflow:hidden; transition:0.2s all ease;}
.head-search .in.active {width:100%;}
.head-search button {display:flex; align-items:center; justify-content:center; padding:0 16px; border:0; background:0; flex:0 0 auto;}
.head-search button img {display:block;}
.head-search .input {background:0; border-radius:1em 0 0 1em; border:0; height:42px; color:#fff; transition:0.2s all ease;}
.head-search .input::placeholder {color:#507ebe;}
.head-search .cate {position:relative;}
.head-search .cate:before {content:""; position:absolute; width:1px; height:16px; top:50%; margin-top:-8px; background:#ddd; right:0;}
.head-search .cate:after {content:""; position:absolute; width:1px; height:16px; top:50%; margin-top:-8px; background:#ddd; left:0;}

.head-search-open {display:flex; align-items:center; justify-content:center; height:42px; position:absolute; top:0; right:0; padding:0 16px;}

.m-head-search {padding:0 15px; margin-top:20px;}
.m-head-search .in {display:flex; border:1px solid #ddd;}
.m-head-search .input {border:0;}
.m-head-search .in button {border:0; background:0; padding:0 10px;}
.m-head-search .in img {display:block;}

/* for mobile */
.btn-m-menu {position:absolute; top:50%; margin-top:-12px; right:var(--container-space); width:27px; height:24px; text-align:center; text-indent:-9999em; z-index:92; transition: all 0.5s ease-in-out;}
.btn-m-menu span {position:absolute; left:0; top:10px; height:2px; width:27px;background:#fff;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:27px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.btn-m-menu span:before {top:-10px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-10px; transition-property:bottom, transform;}

.m-head-menu {padding:0 20px;}
.m-head-menu ul {display:flex; flex-wrap:wrap; margin:-5px;}
.m-head-menu ul li {width:50%; padding:5px;}
.m-head-menu ul li a {display:flex; align-items:center; justify-content:center; padding:0 25px; text-align:center; height:42px; border:1px solid #a8a8a8; border-radius:5px; font-size:15px; font-weight:400; line-height:1em; letter-spacing:0.04em; color:#505050;}
.m-head-menu ul li a img {display:inline-block; margin-right:15px;}
.m-head-menu ul li.m1 a {background-color:var(--color-primary) !important; border-color:var(--color-primary) !important; color:var(--color-white) !important;}

.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:300px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#ffffff; z-index:101;}
.mobile-navigation .home {padding-bottom:20px; padding-left:15px; font-size:25px; font-weight:700; line-height:1.2em; letter-spacing:-0.04em;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:14px 15px; display:block; color:#242424; font-size:1.3em; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#224d82;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #224d82; border-bottom:2px solid #224d82;}
.mobile-navigation .nav-menu>ul>li.active>a:after{transform: translateY(-35%) rotate(-135deg); border-color: #224d82;}
.mobile-navigation .nav-menu .submenu {display:none; position:static; transform: translateX(0); margin:-1px 0 0 0; width:100%;  padding:10px 0;background:#224d82; padding-bottom:10px;}
.mobile-navigation .nav-menu .submenu>ul {display:block; width:100%;}
.mobile-navigation .nav-menu .submenu>ul>li {text-align:left; padding:0;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 0 5px 25px; color:#fff; font-size:16px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:after {content:"";position:absolute; top:14px; left:15px; width:4px; height:4px; border-radius:100%; background:#fff; transition:.2s ease-in-out;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#fff}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#fff}
.mobile-navigation .close {position:absolute; top:20px; right:18px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#242424;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.76; z-index:98;} 

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* 셀렉트박스 */
.list-cate .custom-select {display:block; margin:0 calc(var(--size30) + var(--container-space)) 4px auto; max-width:200px; position:relative; z-index:10;}
.list-cate .custom-select .select-hidden {display:none;}
.list-cate .custom-select .select-input {position:relative; padding:0 10px 0 35px; height:36px; line-height:34px; letter-spacing:-.04em; overflow:hidden; white-space:nowrap; cursor:pointer; background:0; border-top:1px solid #444; border-bottom:1px solid #444; color:#fff; z-index:2;}
.list-cate .custom-select .select-options {display:none; position:absolute; margin-top:-1px; left:0; width:100%; max-height:200px;  border-top:1px solid #444; overflow:auto;}
.list-cate .custom-select .select-options li {position:relative; padding:0 10px 0 35px; height:36px; line-height:34px; border-bottom:1px solid #444; letter-spacing:-.04em; background:#272727; color:#fff; cursor:pointer; transition:.2s;}
.list-cate .custom-select .select-options li:before {content:''; position:absolute; left:0.88em; top:50%; margin-top:-4px; border-left:7px solid #0047ab; border-top:4px solid transparent; border-bottom:4px solid transparent; opacity:0; transform:translateX(-10px); transition:0.2s all ease;}
.list-cate .custom-select .select-options li:hover {background:#000; color:#0047ab;}
.list-cate .custom-select .select-options li.selected {background:#000; color:#0047ab;}
.list-cate .custom-select.active .select-input {background:#000; color:#0047ab;}
.list-cate .custom-select.active .select-options li.selected:before,
.list-cate .custom-select .select-options li:hover:before {opacity:1; transform:translateX(0);}

/* main */ 
.main-search-area {padding:var(--size35) var(--size55) var(--size50); margin-bottom:var(--size55); background:url('/images/main/main-search-bg.jpg') no-repeat center bottom/cover; border-radius:1em; overflow:hidden;}
.main-search-area .txt-wrap {display:flex; align-items:center; margin-bottom:var(--size40);}
.main-search-area .txt-wrap .txt {margin-left:var(--size35); flex:1 1 auto; min-width:0; width:1%; line-height:1.5; letter-spacing:-0.04em; color:#eee;}

.main-search-area .in {display:flex; border-radius:6px; background:rgba(255,255,255,0.9); position:relative;}
.main-search-area .in button {display:flex; align-items:center; padding:0 16px; border:0; background:0;}
.main-search-area .in button img {display:block;}
.main-search-area .input {border:0; background:0; color:#000;}
.main-search-area .input::placeholder {color:#878787;}

.main-music-cate {margin-bottom:15px;}

.music-cate .items {display:flex; flex-wrap:wrap; margin:-4px;}
.music-cate .item {padding:4px;}
.music-cate .item .btn {display:inline-block; background:0; border:0; padding:0.67em 1.56em; font-size:clamp(14px,calc(18/var(--inner) * 100vw ),18px); font-weight:700; line-height:1; letter-spacing:-0.04em; color:#888; transition:0.2s all ease;}
.music-cate .item .tag {font-size:10px; vertical-align:top;}
.music-cate .item .btn:hover,
.music-cate .item.active .btn {background:#000; border-radius:100vh; color:#ddd;}

.main-music-cate .custom-select {display:block; flex:0 0 auto; margin:0 var(--size25) 0 auto; width:120px; position:relative; z-index:10;}
.main-music-cate .custom-select .select-hidden {display:none;}
.main-music-cate .custom-select .select-input {position:relative; padding:0 9px; height:26px; line-height:24px; font-size:var(--font-size-14); letter-spacing:-.04em; overflow:hidden; white-space:nowrap; cursor:pointer; background:0; border:1px solid #777; color:#777; border-radius:2px; z-index:2;}
.main-music-cate .custom-select .select-options {display:none; position:absolute; margin-top:-1px; left:0; width:100%; max-height:200px; padding:10px 0; background:#272727; overflow:auto;}
.main-music-cate .custom-select .select-options li {position:relative; padding:0 10px; font-size:var(--font-size-14); line-height:1.4; letter-spacing:-.04em;color:#434343; cursor:pointer; transition:.2s;}
.main-music-cate .custom-select .select-options li:hover {color:#777;}
.main-music-cate .custom-select .select-options li.selected {color:#777;}

.main-music-cate .custom-select .select-input:before {content:''; position:absolute; right:0.71em; top:50%; margin-top:-0.215em; width:0.71em; height:0.43em; background:url('/images/main/icon-select.png') no-repeat 50% 50%; transition:0.2s all ease;}
.main-music-cate .custom-select.active .select-input:before {transform:rotate(180deg);}
.main-music-cate .custom-select.active .select-input {color:#777;}

.cate-box {display:flex; height:42px; align-items:center;}

.result-group .list-type-btn {justify-content:flex-end; margin-bottom:var(--size20);}
.list-type-btn {display:flex; align-items:center;}
.list-type-btn a {display:inline-block; margin-right:10px; width:16px; height:16px; background-position:50% 50%; background-size:contain; background-position:50% 50%; background-repeat:no-repeat;}
.list-type-btn .btn-list {background-image:url('/images/main/icon-list.png');}
.list-type-btn .btn-grid {background-image:url('/images/main/icon-grid.png');}
.list-type-btn .btn-list.active, 
.list-type-btn .btn-list:hover {background-image:url('/images/main/icon-list-white.png');}
.list-type-btn .btn-grid.active,
.list-type-btn .btn-grid:hover {background-image:url('/images/main/icon-grid-white.png');}
.list-type-btn a:last-child {margin-right:0;}

.type-grid {margin-bottom:clamp(30px, calc( 65 / var(--inner) * 100vw ), 65px);}
.type-grid .items {display:flex; flex-wrap:wrap; margin:0 -5px calc(0px - var(--size25));}
.type-grid .item {width:16.666%; padding:0 5px; margin-bottom:var(--size25); text-align:center;}
.type-grid .in {position:relative; height:100%; padding-bottom:10px; transition:0.2s all ease;}
.type-grid .in:before {content:''; position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); opacity:0; transition:0.2s all ease; pointer-events:none;}

.type-grid .image {position:relative; overflow:hidden; border-radius:4px;}
.type-grid .thumb {position:relative; padding-bottom:100%; overflow:hidden;}
.type-grid .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.type-grid .hover-cont {display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; opacity:0; transition:0.2s all ease;}
.type-grid .hover-cont a {display:inline-block; margin-bottom:4px; width:119px; text-align:center; padding:10px; background:#1f1f1f; border-radius:4px; font-size:0.88em; color:#999; line-height:1em;}
.type-grid .hover-cont a img {display:inline-block; vertical-align:middle; margin-right:10px;}
.type-grid .hover-cont .price {margin-top:0.6em; font-weight:700; color:#494db1;}

.type-grid .in:hover {background:#000;}
.type-grid .in:hover:before {opacity:1;}
.type-grid .in:hover .hover-cont {opacity:1;}

.type-grid .dot-menu {display:none; position:absolute; z-index:2; right:13px; top:13px;}
.type-grid .album-info {display:flex; align-items:center; justify-content:space-between; position:absolute; left:0; bottom:0; width:100%; padding:10px; font-size:12px; font-weight:400; line-height:1; letter-spacing:-0.04em; color:#eee;}
.type-grid .album-info img {display:inline-block; vertical-align:middle; margin-right:8px;}
.type-grid .tit {position:relative; z-index:2; margin:10px 0 5px; padding:0 1em; font-weight:400; line-height:1.5; letter-spacing:-0.04em; color:#eee;}
.type-grid .tit:hover {text-decoration:underline;}
.type-grid .name {position:relative; z-index:2;font-size:12px; line-height:1.2; letter-spacing:-0.04em; color:#666;}
.type-grid .name:hover {text-decoration:underline;}

.type-list {margin-bottom:20px;}
.type-list .item {display:flex; align-items:center; position:relative; padding:10px; min-height:60px; margin-bottom:2px; background:#1f1f1f; border-radius:4px; font-weight:400; line-height:1.2; letter-spacing:-0.04em; color:#eee; transition:0.2s all ease;}
.type-list .item:last-child {margin-bottom:0;}
.type-list .item:hover {background:#000;}
.type-list .dot-menu .menu-wrap {position:absolute; z-index:1; right:0; top:70%;}
.type-list .dot-menu {height:40px;}
.type-list .dot-menu button {display:block; height:100%; width:70px;}
.type-list .ico {position:relative; width:30px;}
.type-list .ico:before {content:''; position:absolute; left:6px; top:50%; margin-top:-6.5px; width:11px; height:13px; background:url('/images/main/icon-pin.png') no-repeat 50% 50%/contain; opacity:0; transform:translate(-10px,-10px); transition:0.2s all ease;}
.type-list .item:hover .ico:before {opacity:1; transform:translate(0);}
.type-list .tit {flex:1 1 auto; min-width:0; width:1%;}
.type-list .tit .price {display:inline-block; margin-left:10px; font-weight:700; color:#494db1; opacity:0; transform:translateY(100%); transition:0.2s all ease;}
.type-list .name {min-width:280px; text-align:center;}
.type-list .running-time {width:95px;}
.type-list .view {width:105px; text-align:center;}
.type-list .running-time img,
.type-list .view img {display:inline-block; vertical-align:middle; margin-right:8px;}

.type-list .tit:hover a,
.type-list .name:hover {text-decoration:underline;}
.type-list .tit:hover .price {transform:translateY(0); opacity:1;}

.dot-menu button {display:block; margin:0 0 0 auto; width:17px; height:17px; background:url('/images/main/icon-dot.png') no-repeat 50% 50%; border:0;}
.dot-menu .menu-wrap {background:#000; padding:10px 0; max-width:120px; border-radius:6px; overflow:hidden;}
.dot-menu .menu-wrap a {display:block; padding:6px 10px; font-size:var(--font-size-14); line-height:1; letter-spacing:-0.04em; color:#999; text-align:left;}
.dot-menu .menu-wrap a:hover {color:#fff;}
.dot-menu .menu-wrap a img {display:inline-block; vertical-align:middle; margin-right:1em;}
.dot-menu .price {margin-top:0.6em; font-weight:700; color:#494db1; text-align:center;}

.full-list-btn {display:block; padding:1.38em; border-radius:4px; border:1px solid #434343; line-height:1; letter-spacing:-0.04em; color:#fff; text-align:center;}
.full-list-btn img {display:inline-block; margin-right:10px; vertical-align:middle;}

.main-more a {display:inline-block; padding:1.13em 2em; border-radius:100vh; font-size:var(--font-size-15); font-weight:500; line-height:1em; letter-spacing:-0.04em; color:#fff; background:#3e3e3e;}
.main-more.ver2 {margin-top:40px;}


/* sub page */
.sub-title {margin:var(--size40) 0 var(--size60) 0; padding:0 var(--container-space);}
.sub-title h1 {position:relative; font-size:clamp(20px,calc(24/var(--inner) * 100vw ),24px); line-height:1.2em; font-weight:700; letter-spacing:-0.04em; color:#eee;}

.page-menu {margin-bottom:80px; border-bottom:1px solid #ddd;}
.page-menu ul {display:flex; margin:0 -20px;}
.page-menu ul li {padding:0 20px;}
.page-menu ul li a {display:block; padding:0 var(--size20) var(--size30); font-size:18px; line-height:1em; letter-spacing:-0.02em; color:#505050; position:relative;}
.page-menu ul li.active a {font-weight:700; color:#006bb6;}
.page-menu ul li.active a:before {content:""; position:absolute; width:100%; height:2px; background:#006bb6; left:0; bottom:-1px;}

#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.real-cont {padding-bottom:120px;}
.real-cont.none {padding-bottom:0;}

/* footer */
.foot-banner {padding:var(--size55) 0 clamp(40px,calc(100/var(--inner) * 100vw ),100px);}
.foot-banner a {display:block; margin-bottom:var(--size25); border-radius:1em; overflow:hidden;}
.foot-banner a:last-child {margin-bottom:0;}

#footer {position:relative; font-size:var(--font-size-15); letter-spacing:-0.04em; line-height:1.73; color:#555; font-weight:400;}
#footer .contain {}
#footer .f-logo {margin-bottom:clamp(10px,calc(26/var(--inner) * 100vw ),26px);}

.f-cnt {position:relative; padding:var(--size40) 0 var(--size80); border-top:1px solid #333;}
.f-sns-btn {position:absolute; right:0; bottom:calc(var(--size80) + 16px);}
.f-sns-btn .items {display:flex; margin:0 -6px;}
.f-sns-btn .item {padding:0 6px;}
.f-sns-btn a {display:block; width:24px; height:24px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain; text-indent:-999em; overflow:hidden;}
.f-sns-btn a.face {background-image:url('/images/common/f-sns-icon1.png');}
.f-sns-btn a.spo {background-image:url('/images/common/f-sns-icon2.png');}
.f-sns-btn a.you {background-image:url('/images/common/f-sns-icon3.png');}

#footer address { font-style:normal;}
#footer address span {display:inline-block;}

.quick {position:fixed; z-index:20; right:clamp(15px,calc(230/var(--inner) * 100vw ),230px); bottom:var(--size55);}
.quick a {display:block; margin-bottom:var(--size20);}
.quick a:last-child {margin-bottom:0;}