@charset "utf-8";
/* CSS Document */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

/* bold 300 Regular */ 
/* bold 500 Medium */ 
/* bold 600 SemiBold*/
/* bold 700 Bold*/
@font-face {
    font-family: 'TJJoyofsingingL';
	src: url('../fonts/TJJoyofsingingL.woff') format('woff');
    font-weight: 300; 
    font-style: normal;
}
@font-face {
    font-family: 'TJJoyofsingingM';
	src: url('../fonts/TJJoyofsingingM.woff') format('woff');
    font-weight:500;
    font-style: normal;
}
@font-face {
    font-family: 'TJJoyofsingingB';
	src: url('../fonts/TJJoyofsingingB.woff') format('woff');
    font-weight:700;
    font-style: normal;
}
@font-face {
    font-family: 'TJJoyofsingingEB';
	src: url('../fonts/TJJoyofsingingEB.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
body { font-family:'TJJoyofsingingM', sans-serif, -apple-system, "Apple SD Gothic Neo", Roboto, NotosansKR; 
	overflow-x: hidden; background-color: #F6F8FA; 
	font-smooth: always;
	font-smoothing: antialiased; 
	-moz-font-smoothing:antialiased; 
	-webkit-font-smoothing: antialiased; 
	-webkit-font-smoothing: subpixel-antialiased;
}

html {scroll-behavior: smooth; /* 부드러게 */ overflow-x: hidden;}
body, div, dd, dt, dl, ul, li {margin:0; padding:0; box-sizing: border-box; color: #343a40; }
ul, li {list-style:none}
a{color:#343a40;text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis;font-family: 'TJJoyofsingingM';}
a:link,a:hover,a:active{text-decoration:none;}
.on a, .ok a, .click a {color:#FFFFFF}
img {border:none}

input { border:none; font-family: 'TJJoyofsingingM'; }
input::-webkit-input-placeholder {color:#757575 !important;}
input::-moz-input-placeholder {color:#757575 !important;}
input::-ms-input-placeholder {color:#757575 !important;}
footer {clear: both}
sp, h1, h2, h3, h4, h5 {padding:0; margin:0; font-weight:normal; color:#fff;}

fieldset, img {
    border: 0;
}
div {display: block}
button {
    cursor: pointer;
    user-select: none;
    color: inherit;
    letter-spacing: inherit;
    appearance: none;
    background: none;
    box-shadow: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
	font-family: 'TJJoyofsingingM';
}

a:link,a:hover,a:active{text-decoration:none; font-family: 'TJJoyofsingingM';}
ul,ol,li{list-style:none;}

a {  text-decoration: none;}

a:hover {  text-decoration: none;}


.header {width: 100%; height: 100px; background-color: #fff; border-bottom: 1px solid #efeff4; display: block; }

.gnb {max-width: 1198px; margin: 0 auto; padding: 40px 20px 0 20px; }
.logo { width: 143px; display: inline-block; margin-top: 12px;}
.logo img {object-fit: cover; width: 100%;  cursor: pointer}

.gnb_btn { float: right; padding-top: 7px; font-weight: 500;}
.gnb_btn li {
	float: left; 
	cursor:pointer;
}
.gnb_btn li:first-child {
	background-color:#fff;
	border-radius:17px;
	border:1px solid #222222;
	display:inline-block;
	color:#222222;
	font-size:14px;
	padding:8px 15px;
	text-decoration:none;
	margin-right: 10px;
}
.gnb_btn li:nth-child(2) {
	background-color:#fff;
	border-radius:17px;
	border:1px solid #222222;
	display:inline-block;
	color:#222222;
	font-size:14px;
	padding:8px 15px;
	text-decoration:none;
	margin-right: 10px;
}
.gnb_btn li:last-child {
	background-color:#222222;
	border-radius:18px;
	display:inline-block;
	color:#fff;
	font-size:14px;
	padding:8px 15px;
	text-decoration:none;	
}
.gnb_btn a {color:inherit;}
.gnb_btn img.person {
	margin-right: 5px;
	width: 11px;
}
.gnb_nav {
    box-sizing: border-box;
	max-width:420px;
	margin: 0 auto;
	text-align: center;
	margin-top: -21px;
}

.dropdown {position: relative;}
.dropdown-content {display: none; position: absolute; top: 47px; min-width: 200px; min-height: 50px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background: #fff; z-index: 1}
.dropdown-content li {color: #222; font-size: 17px; font-weight: 300; text-align: left;}
.dropdown-content a {padding: 14px 18px; display: block;}

.dropdown-content a:hover { font-weight: 700; }
.dropdown:hover .dropdown-content { display: block; }


.gnb_nav_list{ 
}

.gnb_nav_list .list_item {
    display: inline-block;
	margin: 0 10px;
	max-width: 80px;
	}

.gnb_nav_list .list_item .link {
	padding: 20px;
    font-size: 20px;
	color: #222;
	font-weight: 300;
}

.gnb_nav_list .list_item a:hover {font-weight: 700;}


.gnb_nav_list .list_item .text {
    display: inline-block;
    position: relative;

}


.gnb_nav_list .list_item .link[aria-current=page] .text:after {
    position: absolute;
    right: 0;
    bottom: -23px;
    left: 0;
    z-index: 1;
    border-bottom: 3px solid #222;
    border-radius: 1.5px;
    content: "";
	}

.gnb_nav_list .list_item .link[aria-current=page] {
    font-weight:700;
}


.mobile-nav-toggle {display: none}
#mobile_nav { opacity: 0; }

.mobile_menu {display: none}


.slider {width: 100%; background:#f6f8fa; }
.slider_wrap {
	max-width: 1700px; 
	overflow: hidden; 
	margin: 0 auto; 
	height: 510px; 
	padding-top: 40px; 
	position: relative; 
	z-index:0}
#slider_banner {max-width:1680px; height:100%}
.slider_wrap .container {
	max-width: 1660px; 
	margin:0 auto;  
	display: flex; 
	flex-flow: row nowrap; /*justify-content: center;*/ 
	align-items:center; 
	display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align:center; 
	position: absolute;
	left:50%;	
	top:50%;	
	transform:translate(-50%, -50%);
	z-index: 5;
}


.slider_wrap .container li { position: relative; margin: 0 10px 0 0;}
.slider_wrap .container div {height:391px; display: flex; justify-content: center; align-items: center; width:auto; margin: 0 15px;}
.slider_wrap .container img {object-fit: cover; width: 100%; border-radius: 10px;} 
.banner {min-width: 527px;}
.banner_focus {min-width: 586px;}
.banner_img {height:352px;}
.banner_focus_img {height:391px;}

.slider_wrap .arrow_btn { max-width: 686px; height: 510px; margin: 0 auto; position:relative; z-index:10}
.arrow_btn i {color:#ecf0f1; font-size: 2.6em; filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.35)); cursor: pointer}
.arrow_btn .bi-arrow-left-circle-fill {position: absolute; top:35%; }
.arrow_btn .bi-arrow-right-circle-fill  {position: absolute; top:35%; right: 0;}



.bullets{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    z-index: 2;
}


.bullets input[type="radio"] {   display:none;}

.bullets input[type="radio"] + label span {display: inline-block;
    border-radius: 50%;
    background-color: rgba(34,34,34,0.15);
    width: 12px;
    height: 12px;
	margin: 6px;
    cursor: pointer;}
.bullets input[type="radio"]:checked + label span {background: #222; color: #222;}


#today_song {background:#222; width: 100%; height: 435px;}
.todaysong_bg {max-width: 1198px; margin: 0 auto; text-align: center; position: relative;

}
.todaysong_bg h2 {padding-top: 18px; padding-bottom: 8px; font-weight: 500; }
.todaysong_bg .hot {  max-width: 120px;	height: 40px;  margin-left: 11px;  border-radius: 30px;	font-size: 0.63em;	padding: 0 1.2em;
	background: #fa9ce6; /* Old browsers */
	background: -moz-linear-gradient(left, #fa9ce6 0%, #8e20e1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #fa9ce6 0%,#8e20e1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #fa9ce6 0%,#8e20e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9ce6', endColorstr='#8e20e1',GradientType=1 ); /* IE6-9 */
	font-weight: 600;	vertical-align:3px;}
.todaysong_bg .hot img,
.todaysong_bg .new img {
	width: 18px;
	vertical-align:sub;
	margin-right: 3px;
}
.todaysong_bg .new {  max-width: 120px;	height: 40px;  margin-left: 11px;  border-radius: 30px;	font-size: 0.63em;	padding: 0 18px;
	background: #7dc6e9; /* Old browsers */
	background: -moz-linear-gradient(left, #7dc6e9 0%, #232eec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #7dc6e9 0%,#232eec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #7dc6e9 0%,#232eec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dc6e9', endColorstr='#232eec',GradientType=1 ); /* IE6-9 */
	font-weight: 600;	vertical-align:2.5px;}

#todaysong_sc {max-width: 1060px; margin: 0 auto; overflow-x:hidden}

.todaysong_list {max-width: 1060px; margin: 0 auto;font-family:'TJJoyofsingingM';}
.todaysong_list ul { 
	display: grid;
    grid: repeat(3,112px) / auto-flow 316px;
    grid-column-gap: 41px;
    display: -ms-grid;
    -ms-grid-rows:3;
    -ms-grid-columns: 316px 41px 316px 41px 316px;
}

.todaysong_list li {  -webkit-box-sizing: content-box; box-sizing: content-box;
	display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-grid-column-align:center;
	width: 100%;
	height: 100%;
	position: relative;
}

.todaysong_list .cell_1 {-ms-grid-row: 1; -ms-grid-column: 1;}
.todaysong_list .cell_2 {-ms-grid-row: 2; -ms-grid-column: 1;}
.todaysong_list .cell_3 {-ms-grid-row: 3; -ms-grid-column: 1;}
.todaysong_list .cell_4 {-ms-grid-row: 1; -ms-grid-column: 3;}
.todaysong_list .cell_5 {-ms-grid-row: 2; -ms-grid-column: 3;}
.todaysong_list .cell_6 {-ms-grid-row: 3; -ms-grid-column: 3;}
.todaysong_list .cell_7 {-ms-grid-row: 1; -ms-grid-column: 5;}
.todaysong_list .cell_8 {-ms-grid-row: 2; -ms-grid-column: 5;}
.todaysong_list .cell_9 {-ms-grid-row: 3; -ms-grid-column: 5;}



.todaysong_list .rank { font-family:'TJJoyofsingingM'; width: 81px; }
.todaysong_list .rank h3 {width: 81px; font-size: 1em; position: absolute; top: 18px;}
.todaysong_list .rank p {font-size: 0.4em; color:#ecf0f1; margin-top: 50px; }
.todaysong_list .rank p img {width: 9px; margin:0 4px 1px 0}
.todaysong_list .bi-caret-up-fill {font-size: 0.7em; color: #ff354e; margin-right: 5px}
.todaysong_list .bi-caret-down-fill {font-size: 0.7em; color: #00a2ff; margin-right: 5px}
.todaysong_list .caret-up-fill {background: url("../img/caret-up-fill.svg") no-repeat; width:0.7em; height: 0.7em; fill: #ff354e;}

.todaysong_list .song_info {width: 237px; height: 100%; text-align: left;color: #fff; border-bottom: 1px #555 solid; padding: 18px 0 14px 0; display: block;}

.song_info h3 {
	font-size: 1em; 
	font-family:'TJJoyofsingingM'; 
	overflow: hidden;  
	-o-text-overflow: ellipsis;  
	text-overflow: ellipsis;  
	white-space: nowrap;
}
.song_info .singer { 
	font-size: 0.8em;  
	overflow: hidden;  
	-o-text-overflow: ellipsis;  
	text-overflow: ellipsis;  
	white-space: nowrap;
	word-wrap:break-word; 
	display:block; 
	font-family:'TJJoyofsingingL';
	margin-top: 5px;
	opacity: 0.75;
}
.song_info .song_number {font-size: 0.85em; margin-top: 15px;}
.song_info .song_number span { padding: 0.3em 0.3em 0.2em 0.3em; background: #fd0058;  border-radius: 3px; font-weight: 600;}
.song_info .song_number span.hot_purple { background: #874ab6; }
.song_info .song_number span.new_blue { background: #2793d7; }



.todaysong_page i {color:#ecf0f1; font-size: 2.6em; filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.35)); cursor: pointer; }
.todaysong_page .bi-arrow-left-circle-fill {position: absolute; top: 50%; left:0.3%; z-index:1}
.todaysong_page .bi-arrow-right-circle-fill {position: absolute; top: 50%; right: 0.3%; z-index:1}

#service_btn {background: #f6f8fa; width: 100%; padding: 80px 0 100px;}
#service_btn .container {display: grid; display: -ms-grid; 
	grid-template-columns: 202px 202px 202px 289px;
	max-width: 990px;
    grid-column-gap: 30px;
	grid-row-gap: 20px;
	grid-auto-rows: minmax(202px, 202px);
	margin: 0 auto; text-align: center; position: relative;
	-ms-grid-columns:202px 30px 202px 30px 202px 30px 289px;
	-ms-grid-rows:202px 30px 202px;

}

#service_btn .container div {  -webkit-box-sizing:border-box ; box-sizing:border-box;
	display: -webkit-box;
    display: flex;
	display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-grid-column-align:center;
	width: 100%;
	height: 100%;
	border-radius: 6px;
    cursor: pointer;
}


#service_btn .zillersong {
	-ms-width:202px;
	-ms-height: 202px;
	-ms-grid-column: 1;
    -ms-grid-row: 1;
	text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
	color: #fff;
	background:url("../img/btn_bg_zillersong.png") no-repeat;
	background-size: 100%;
}
#service_btn .zillerting {
	text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
	color: #fff;
	-ms-grid-column: 3;
    -ms-grid-row: 1;
	background:url("../img/btn_bg_zillerting.png") no-repeat;
	background-size: 100%;
}
#service_btn .youtube {
	text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
	color: #ffffff;
	-ms-grid-column: 5;
    -ms-grid-row: 1;
	background:url("../img/btn_bg_youtube.png") no-repeat;
	background-size: 100%;
}
#service_btn .zillersong .title, #service_btn .zillerting .title, #service_btn .youtube .title {color: #fff;}
#service_btn .ticketshop {
	color: #222222;
	-ms-grid-column: 1;
    -ms-grid-row: 3;
}
#service_btn .tjshop {
	color: #222222;
	-ms-grid-column: 3;
    -ms-grid-row: 3;
}
#service_btn .songrequest {
	color: #222222;
	-ms-grid-column: 5;
    -ms-grid-row: 3;
	
}
#service_btn .cs {cursor: default!important;
	color: #222222;
	-ms-grid-column:7;
    -ms-grid-row: 1 / 3;
	-ms-grid-row-span: 3;
	grid-column: 4;
	grid-row: 1 / 3;
	position: relative;
	box-sizing: border-box;
}

#service_btn .cs .number {
	background: #00AFEC;
	display: block;
	position: absolute;
	top: -28px;
	left: 0;
	padding: 0.8em 0;
	font-size: 1.4em;
	font-weight: 700;
	width: 100%;
	letter-spacing: 1px;
	color: #fff!important;
box-sizing: border-box;
	border-radius: 6px 6px 0 0 ;
}

#service_btn .cs li:first-child {
	margin-top: 50px;
}
#service_btn .cs .bi-clock-fill {
	font-size: 2.2em;
	color: #222;
	filter: drop-shadow(0px 0px );
}
#service_btn .cs .time .bi-clock-fill {
	display: none;
}

#service_btn .cs .time {
	font-size: 1.1em;
	margin-top: 5px;
}

#service_btn .cs .time:after {
	content: '';
	width: 100%;
	height: 1px;
	display: block;
	background-color: #dfdfdf;
	margin:20px 0 25px;
}

#service_btn .cs .btn_cs {
  padding: 0.9em 2.2em 0.8em;
  border-radius: 2em;
  background-color: #222222; 
	color: white;
	font-size: 0.85em;
	display: block;
	margin-top: 20px;
	cursor: pointer;
}
#service_btn .cs img.clock {
	width: 42px;	
}
#service_btn .cs img.clock_mobile {
	display: none;
}
#service_btn .cs .btn_cs img {
	width: 18px;
	vertical-align:bottom;
	margin-right: 6px;
}


#btn_cs_mobile {
	display: none;
}
#service_btn .cs .fa-envelope {
	font-size: 1.1em;
	filter: drop-shadow(0px 0px );
	margin-right: 10px;
	color: white;
}

#service_btn .cs .detail {
	font-size: 0.8em;
	line-height: 150%;
	font-weight: 500; 
	opacity: 0.75;
}

#service_btn .zillersong, #service_btn .zillerting, #service_btn .youtube, #service_btn .ticketshop, #service_btn .tjshop, #service_btn .songrequest, #service_btn .cs {
	font-weight: 700;
	font-size: 1.2em;
	
}
#service_btn .mobile-event {display: none;
    visibility: hidden;
    width: 0%;}

#service_btn .ticketshop, #service_btn .tjshop, #service_btn .songrequest, #service_btn .cs {
	background: white;
	border: 1px solid #dfdfdf; 
}

#service_btn .ticketshop .title, #service_btn .tjshop .title, #service_btn .songrequest .title {
	margin-top: -5px; 
}
#service_btn .ticketshop .detail, #service_btn .tjshop .detail, #service_btn .songrequest .detail {
	font-size: 0.7em;
	font-weight: 300;
	margin-top: 0.5em;
	opacity: 0.75;
}

#service_btn .container .icon { width: 82px; height: 82px; margin-top: -10px; }

#main_notice {background: #fff; width: 100%; padding: 20px 0; border-top: 1px solid #dfdfdf}

.board {
	max-width: 990px; margin: 0 auto; height: 30px;
}

.board li {
	float: left; cursor: pointer;
}
.board li:first-child {width: 81px}
.board .icon {
	width: 100%;
	height: 34px;
  border-radius: 2em;
  border: solid 1px #222222;
	margin-top: -2px;
	margin-right: 20px;
	text-align: center;
	line-height: 33px;
	font-weight: 700;
	font-size: 1em;
}
.board .title {	line-height: 30px;	font-weight: 500;	font-size: 1.1em;	margin-right: 40px;}

.board .date {
	font-size: 0.8em;
	line-height: 31px;
	font-weight: 300;
	opacity: 0.7
}

footer {
	width: 100%;
	background-color: #eaecef;
	padding: 4em 0 8em 0;
}

.footer_inner .bi-arrow-up-circle-fill { font-size: 2.5em;  cursor: pointer; position: absolute; top: -3em; right: 0; color: #222;}

.footer_inner {
	max-width: 990px;
	margin: 0 auto;
	position: relative;
}

.footer_inner .tjlicense {
	margin: 2em 0 3em 0;
	font-size: 0.8em;
	line-height: 1.9;
	letter-spacing: -0.02em;
}


.footer_inner .menu  {	position: relative;}
.footer_inner .menu a {	margin: 0 0.5em;} 
.footer_inner .menu a:first-child {
	margin: 0 0.5em 0 0;
}
.footer_inner .menu a:after {
	content: '';
	position: absolute;
	top: 11px;
	margin: 0 0.5em;
	width: 2px;
	height: 2px;
	background: #222;
	border-radius: 2px;
	display: inline-block;
} 

.footer_inner .menu a:nth-child(3):after { display: none;} 

.footer_inner .btn {
	 position: absolute;
	 top: 0;
 	 right: 0;
	 text-align: center;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
}


.footer_inner .btn li {
	float: left;
	width: 130px;
  height: 42px;
	border-radius: 20px;
	line-height: 42px;
	
}

.footer_inner .btn li:first-child {
	  border: solid 1px #222222;
	margin-right: 10px;

}

.footer_inner .btn li:last-child {
	background-color: #222222;
	color: white;
}

.footer_inner .btn li:last-child a {
	color: white;
}

.footer_inner p {
	position: absolute;
	right: 0;
	top: 75px;
}

.footer_inner #mobile {
	display: none;
}

.footer_inner .copyright {font-size: 13px; opacity: 0.4; margin-top: 2em}



/** 팝업 **/

#black_bg {position: fixed; overflow: hidden; background-color:rgba(0, 0, 0,.5); width:100%; height:100%; z-index:5;}
.popup {width: 590px; min-height: 427px; height: auto; background: #fff; position: absolute;
    left: 50%;
	top: 50%;
    transform:  translate(-50%,-50%);
	border-radius: 30px;
	padding-top: 40px;
}
.popup h2 {font-size: 30px; color: #343a40; font-weight: 600; margin-bottom: 15px; padding: 0 40px; }
.popup h3 {color: #454d55; padding: 0 40px; font-size: 20px; margin-bottom: 15px; }
.popup .green_highlight {background: linear-gradient(to top, rgba(0,122,114,0.2) 50%, transparent 50%); color: inherit;}
.orange_highlight {background: linear-gradient(to top, rgba(255,74,43,0.2) 50%, transparent 50%); color: inherit;}
.purple_highlight {background: linear-gradient(to top, rgba(140,99,220,0.2) 50%, transparent 50%); color: inherit;}
.cyan_highlight {background: linear-gradient(to top, rgba(63,205,199,0.2) 50%, transparent 50%); color: inherit;}
.pink_highlight {background: linear-gradient(to top, rgba(242,53,104,0.16) 50%, transparent 50%); color: inherit;}
.orange {color: #00afec;}
.green {color: #007a72;}
.purple {color: #8737ff}
.orangeBG {background-color: #00afec;}
.whiteBG {background-color: #fff; }
.yellowBG {background-color: #FFD952;}
.lightyellowBG {background-color: #FFEBC2;}

.orangeGRA_BG {background: #00afec; /* Old browsers */
background: -moz-linear-gradient(left, #00afec 0%, #26BBEF 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #00afec 0%,#26BBEF 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #00afec 0%,#26BBEF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00afec', endColorstr='#26BBEF',GradientType=1 ); /* IE6-9 */
}


.popup .orange {color: #00afec; font-weight: 600;}
.popup .popupCheck {padding: 10px 40px;}
.popup .textBox {padding: 10px 40px; border-radius: 4px; background: rgba(52,58,64,0.05)}
.popup .inp_chk {padding: 10px 0; color: #343a40;}
.popup .txt_lab {font-size: 16px; font-weight: 500; line-height: 21px;}
.popup .bi-x-circle-fill {font-size: 34px; color: #979797; position: absolute; top: -13px; right: -5px; cursor: pointer}
.popup .bi-circle-fill {font-size: 32px; color: #fff; position: absolute; top: -8px; right: -1px;}

.popup .content {padding: 0 40px; font-size:18px; color: #454d55; font-weight: 300; line-height: 30px; text-align: justify; padding-bottom: 112px;}


.popup .block {padding: 0 40px; font-size:18px; color: #454d55; font-weight: 300; line-height: 30px; text-align: justify;  margin-bottom: 20px;}
.popup .block p {font-size: 18px; font-weight: 700; padding-bottom: 90px;}

.popup_button {border-top: 1px solid #dfdfdf; width:100%; margin:0 auto; height: auto; padding: 16px 0; position: absolute; bottom: 0; text-align: center; }

.popup_button .disable_lg { font-size: 18px; width:200px; height: 40px; margin: 0 auto; background: #f3f3f4; border-radius: 10px; color: #454d55; }
.popup_button .able_lg { font-size: 18px; width:200px; height: 40px; margin: 0 auto; background: #00afec; color: #fff; border-radius: 10px; }

.popup_button .disable:hover, .popup_button .disable_lg:hover {background: #dfdfdf;}
.popup_button .able:hover, .popup_button .able_lg:hover { background: #26BBEF}

.popup_button .able { font-size: 18px; width:140px; height: 40px; margin: 0 auto; color: #fff; background: #00afec; border-radius: 10px; }
.popup_button .disable { font-size: 18px; width:140px; height: 40px; margin: 0 auto; background: #f3f3f4; border-radius: 10px; color: #454d55;}
.popup .popup_button button:last-child {margin-left: 15px;}
.popup_alert {width: 460px; min-height: 200px; height: auto; background: #fff; position: absolute;
    left: 50%;
	top: 50%;
    transform:  translate(-50%,-50%);
	border-radius: 30px;
	padding-top: 40px;
}
.popup_alert .content {padding: 0 40px; text-align: center; font-size:16px; color: #222; font-weight: 300; line-height: 30px;  padding-bottom: 112px;}
.popup_alert strong { color: #00afec;}
.popup_alert .popup_button button:first-child {margin-right: 15px;}
.popup_alert span {font-size: 16px; line-height: 0px;}
.popup_alert ul.list {text-align: left; margin:5px 0 5px 38px; line-height: 28px;}
.popup_alert span.small {font-size: 14px; color: #a2a3a3; margin-bottom: -10px;}
.popup_alert span.small i {vertical-align: middle; margin-right: 2px}

.popup .coupon {
    width: 500px;
    margin:25px auto;
    box-sizing: border-box;
    background-color: #fff;
	display:block;
}

.popup .coupon input {
    border: none;
    outline: 0;
    -webkit-appearance: none;
	display: inline-block;
	width:calc(100% - 232px)
		
    }

.popup .coupon input.text {    display:inline-block;	padding: 18px 30px;    font-size: 18px;    color: #222;    -webkit-appearance: none;	white-space: nowrap; background: #f3f3f4; border-radius: 0 4px 4px 0; }

.popup .coupon label {
	font-size: 18px;
	text-align:center;
	display: inline-block; 
	padding: 18px 36px; background: #007a72; display: inline-block; color: #fff; border-radius: 4px 0 0 4px;
}
.popup .fa-ticket-alt {opacity: 0.5; font-size: 20px; vertical-align: middle; margin-right: 4px;}

.popup .coupon input:placeholder {font-weight: 300; letter-spacing: 20px;}
.popup .coupon input:-ms-input-placeholder { /* IE 10+ */ color: #454d55; font-weight: 300;}
.popup .fa-check, .popup .bi-dash {font-size: 12px; padding-right: 10px; margin-left: -23px;}
.popup .noteUl {font-size: 15px; line-height: 28px; margin-left: 23px; padding: 0 45px}
.popup .small {font-size: 14px; line-height: 24px;}
.popup .small .fa-check {font-size: 10px; color: #454d55}















/** 로그인 **/


.subbg {padding-top: 4em; padding-bottom: 10em;} 
.subbg h2 {  font-size: 2em; color: #343a40; text-align: center; font-weight: 600; }

.inner_login input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font-size: 0.6em;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

.inner_login {
	max-width:460px; margin: 0 auto;
}
.screen_out {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
    text-indent: -9999px;    
}

.login_form .error {font-size: 0.8em; color: #ff0000; text-align: center; margin-top: 5px; margin-bottom: 0;}

.login_form .box_login {
    margin: 35px 0 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    box-sizing: border-box;
}
.login_form .inp_text {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 18px 19px 19px;
    box-sizing: border-box;
}
.login_form .inp_text+.inp_text {
    border-top: 1px solid #dadada;
}

.inp_text input {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #343a40;
    border: none;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;

}

.btn_login {
    margin: 10px 0 0;
    width: 100%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #fff;
    background-color: #00afec;
	font-weight: 500;

}
.btn_login:hover{opacity: 0.8 }
.btn_join {
    margin: 10px 0 0;
    width: 100%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #fff;
	background-color: #00AFEC;
	font-weight: 500;
	box-shadow: 0px 2px 2px 0px rgba(34,34,34,0.05);
}
.btn_join:hover { opacity: 0.8}
.login_append {
    overflow: hidden;
    padding: 10px 0 5px;
}

.inp_chk {
    display: inline-block;
    position: relative;
	margin-top: 3px
}
.login_append .inp_chk {
    float: left;
}

.login_append .inp_chk .lab_g {
    display: inline-block;
    margin-right: 19px;
    color: #222;
    font-size: 0.9em;
    line-height: 19px;
}
 .inp_chk .txt_lab {
    vertical-align:text-top; 
	color: #222; 
}
.login_append .txt_find {
    float: right;
    color: #222;
	font-size: 0.9em;
	padding-top: 5px;
}
.inp_chk input[type=checkbox] {
    display:none;
}
.inp_chk input[type=checkbox] + label { 
    cursor: pointer; 
    padding-left: 24px;  
    background-repeat: no-repeat;
    background-image: url('../img/circle.svg');
	background-size: 18px 18px;
}
.inp_chk input[type=checkbox]:checked + label {
    background-image: url('../img/check-circle-fill.svg') ;
}
.inp_chk input[type=checkbox]:disabled + label {
    background-image: url('../img/circle.svg'); 
}

.social_login {margin: 40px 0 ;}
.social_login h3 { font-size: 0.9em; color: #222; text-align: center; display:flex;
	flex-basis:100%;
	align-items:center;
	opacity: 0.7;
}
.social_login h3:before {
	content:'';
	flex-grow:1;
	margin-right: 16px;
	background:rgba(0,0,0,0.35);
	height:1px;
	font-size:0px;
	line-height: 0px;
}
.social_login h3:after {
	content:'';
	flex-grow:1;
	margin-left: 16px;
	background:rgba(0,0,0,0.35);
	height:1px;
	font-size:0px;
	line-height: 0px;
}

.social_login ul {margin-top: 20px;}
.social_login li {float: left; cursor: pointer; width: 90px; height: 60px; border-radius: 10px; margin-right: 24px}
.social_login li:last-child {margin-right: 0;}

.social_login .kakao {background: url("../img/logo_kakao.png") no-repeat; }
.social_login .facebook {}
.social_login .google {background: url("../img/logo_google.png") no-repeat; }
.social_login .apple {background: url("../img/logo_apple.png") no-repeat; }
.social_login .naver {background: url("../img/logo_naver.png") no-repeat; }
.social_login .kakao,
.social_login .facebook,
.social_login .google,
.social_login .apple,
.social_login .naver {
	background-size: 90px 60px;
}


.find_container {width: 1030px;  margin: 0 auto; padding: 0; }

.common_tab_menu {display: block;
    overflow: visible;
    height: 50px;
    padding: 0 0 13px;
    border-bottom: 1px solid #dfdfdf;
	position: relative;
	}

.common_tab_item {
	cursor: pointer;
	margin-right: 30px;
    padding: 0;
    font-size: 23px;
    color: #959595;

	font-weight: 500;
	display: inline-block;
    width: auto;
    text-align: left;
	position: relative;
    line-height: 42px;
}

.common_tab_item[aria-selected=true] {
    color: #00afec;
	font-weight: 700;
}


.common_tab_item[aria-selected=true]:after {
    position: absolute;
    right: -1px;
    bottom:-8px;
    left: 0;
    z-index: 1;
    border-bottom: 3px solid #00afec;
    border-radius: 3px;
    content: '';
	
}

#find_id_tab, #find_password_tab {
	max-width: 600px; margin: 0 auto; position: relative;
	color: #222;
	padding: 20px 0;
}
#find_id_tab h3, #find_password_tab h3 {color: #222; font-size: 20px; line-height: 20px; font-weight: 500; margin: 30px 0 15px 0;}
#find_id_tab i {vertical-align: middle}

.options {
    width:auto;
    display: block;
    overflow: hidden;

}
.check{
    overflow: hidden;
	padding: 10px 0;
	
}
.check .btn{
    display: block;
    padding: 20px;
    background-color: #fff;
	border: 1px solid #dfdfdf;
	box-sizing: border-box;
    color: #222;
    position: relative;
	
}


.check .orange {color: #00afec; margin-right: 8px;}
.subInput{
    background: #fff;
    overflow: hidden;
    transition: max-height 0.7s;
    max-height: 0;
}
.subInput input{
    display: block;
    padding: 14px 20px;
    color: #222;
    position: relative;
    width: 80%;
	margin: 16px auto;
	box-sizing: border-box;
	border-bottom: 1px solid #222;
	outline:none;
	font-size: 16px;
	
}
.subInput input:focus{
	background: #f3f4f4;

}
.subInput input:hover{
    background: #f3f4f4;
    
}
.subInput input:last-child{
    border:none;
}
.check:target .subInput{
    max-height: 30em;
}

.subInput .submit {background: #00afec; color: #fff; font-weight: 500; font-size: 1em; border-radius: 4px;}
.subInput input .submit:hover, .subInput input .submit:focus {background: #FF6E55; }
.subInput .submit:hover {background: #FF6E55;}
.subInput input:-ms-input-placeholder { /* IE 10+ */
  color:#757575;
	font-size: 14px;
}

.changePw .box_changePw {
	margin-top: 30px;
    box-sizing: border-box;
}
.changePw .box_changePw div {
	margin: 5px 0;
}
.box_changePw label {
	text-align:justify;
	width: 26%;
	display: inline-block; 
	line-height: 40px;
}
.changePw .inp_text {
    width: 100%;
    margin: 0;
    padding: 12px 30px;
    box-sizing: border-box;
	border: 1px solid #dfdfdf;
    background-color: #fff;
	display: inline-block;
	
}
.changePw .inp_text input {
    display:inline-block;
	padding: 10px;
	width: 64%;
    height: 100%;
    font-size: 14px;
    color: #222;
    border: none;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
	white-space: nowrap;
}
.changePw .inp_text input:-ms-input-placeholder { /* IE 10+ */
  color:#757575;
	font-size: 14px;
}
.changePw .error {font-size: 0.8em; color: #ff0000; text-align: left; margin-top: 5px; margin-bottom:5px;  margin-left: 31%; width: 65%}


.width600 {max-width: 600px; margin: 0 auto;}
.width700 {max-width: 700px; margin: 0 auto;}
.width1030 {max-width: 1030px; margin: 0 auto;}
.width1280 {max-width: 1280px; margin: 0 auto;}
.width100per {width: 100%; margin: 0 auto;}

.changePw ul {padding-top: 50px; font-size: 14px; line-height: 17px; text-align: justify; margin-left: 10px; }
.changePw ul li { position : relative; padding-left: 3px; margin-top: 5px;} 
.paddingtop15 {padding-top: 15px;}
.paddingbottom6em {padding-bottom: 6em;}
.changePw .fa-check {font-size: 12px; padding-right: 10px; margin-left: -20px;}
.changePw .bi-dash {font-size: 12px; padding-right: 10px; }
.font-weight300 { font-weight: 300;}
.z-index100 {z-index: 100}
.box-shadow {-webkit-box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.2);
-moz-box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.2);
box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.2)}













/**** 가입 ****/
.agreement .btn_login_disable {
    margin: 10px 0 0;
    width: 100%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #fff;
    background: #F9C4BC;
	font-weight: 500;
}
.join {max-width: 600px; margin: 0 auto; position: relative;
	color: #222;
	padding: 20px 0;
	z-index: 1;}

.join iframe { font-family: 'TJJoyofsingingM'; 
	resize: none; border: none; width: 100%; height: 200px;
    margin: 0;
    padding: 30px 30px;
    box-sizing: border-box;
	border: 1px solid #dfdfdf;
    background-color: #fff;
	color: #222;
}



.agreement input[type=checkbox] {
    display:none;
}
.agreement input[type=checkbox] + label { 
    cursor: pointer; 
    padding-left: 24px;  
    background-repeat: no-repeat;
    background-image: url('../img/circle.svg');
	background-size: 18px 18px;
}
.agreement input[type=checkbox]:checked + label {
    background-image: url('../img/check-circle-fill.svg') ;
}
.agreement input[type=checkbox]:disabled + label {
    background-image: url('../img/circle.svg');
}
.agreement .lab_g {
    display: inline-block;
    color: #222;
    font-size: 16px;
    line-height: 18px;
	float: right;
	margin-top: 5px;
	font-weight: 500;
    }
.agreement .center {
	font-size: 18px;
	font-weight: 600;
}
.agreement .agree_center {width:160px; margin: 10px auto; padding-bottom: 40px;}
.join .box_join {
	margin-top: 30px;
    box-sizing: border-box;
}
.join .box_join div {
	margin: 5px 0;
}
.box_join label {
	text-align:justify;
	width: 26%;
	display: inline-block; 
	line-height: 40px;
}
.join .inp_text {
    width: 100%;
    margin: 0;
    padding: 12px 30px;
    box-sizing: border-box;
	border: 1px solid #dfdfdf;
    background-color: #fff;
	float: left;
	display: inline-block;
	z-index: 100;
	position: relative;
	
}
.join .inp_text .text {
    display:inline-block;
	padding: 10px;
	width: 50%;
    height: 100%;
    font-size: 14px;
    color: #222;
    border: none;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
	white-space: nowrap;
}
.join .inp_text .text_lg {
    display:inline-block;
	padding: 10px;
	width: 64%;
    height: 100%;
    font-size: 14px;
    color: #222;
    border: none;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
	white-space: nowrap;
}
.join .inp_text input:placeholder {font-size: 14px;}
.join .error {font-size: 0.8em; color: #ff0000; text-align: left; margin-top: 5px; margin-left: 31%; width: 65%; margin-bottom:5px;}
.join .overlap_ch {font-size: 0.8em; color: #00AFEC; text-align: left; margin: 5px 185px; width: 65%}
.inp_text .inbtn {width: 100px; height: 40px; background: #00AFEC; display: inline-block; color: #fff; border-radius: 4px;
	float: right; cursor: pointer
}
.inp_text .inbtn:hover {opacity: 0.8;}

.join .inp_text input:-ms-input-placeholder { /* IE 10+ */
  color:#757575;
	font-size: 14px;
}

.box_join .fa-eye,
.box_join .fa-eye-slash {font-size: 18px; padding: 3px 1px; cursor: pointer; color: #ccc;}
.box_join .asterisk {font-size: 12px;  color:#00afec;}

.join #joinArea {width: 70%; border:none; font-family: 'TJJoyofsingingM'; margin-left: 1%}


.box_join .lab_g {
    display: inline-block;
    color: #222;
    font-size: 0.95em;
    line-height: 1.3em;
    }
.box_join .inp_chk {
	width: 73%; 
	padding-left: 2%; 
	vertical-align:middle;
	line-height: 0;
}
.box_join .txt_lab {
	display: inline-block;
}
.box_join .inp_chk span {
	margin-top: 1px;
}

.box_join .agreement {font-size: 14px; margin-left: 30.5%; text-align: justify; color: #757575; font-weight: 300; }
.bottomMargin {margin-bottom: 10em;}

.box_join p {font-size: 13px;  opacity: 0.7;}










/**** 마이페이지 ****/

.mypage_profile {width: 100%; margin: 0 auto; padding: 0;margin-top: 50px; }

.mypage_profile .userImg {margin: auto; width: auto; text-align: center;}
.mypage_profile .userImg .default {width: 100px; height: 100px; border-radius: 50%; object-fit: cover; overflow: hidden; }
.mypage_profile .userImg h3 {color: #222; text-align: center; font-weight: 700; font-size: 20px;}
.mypage_profile .userImg label {margin-top: 10px; display: inline-block;}
.mypage_profile .userImg .input-file-button {padding: 2px 16px; font-size: 16px; text-align: center; background: #00afec; color: #fff; border-radius: 4px; line-height: 36px; cursor: pointer}
.mypage_profile .userImg .input-file-button img { width: 18px; margin-right: 5px; vertical-align: middle; }
.mypage_profile .userImg .input-file-button:hover {opacity: 0.7; transition: 0.3s}
.mypage_profile .userImg input {display: none}

.social_mypage { /*padding-left: 30%; padding-top: 65px; width: 100%; */ display: block; float:right;}

.social_mypage ul { margin-bottom: 15px; margin-top: 5px; float: right;}
.social_mypage li {float: left; cursor: pointer; width: 80px; height: 53px; border-radius: 10px; margin-right: 28px; display: inline-block;}
.social_mypage li:last-child {margin-right: 15px;}
.social_mypage li:hover {opacity: 0.7; transition: 0.2s;}

.social_mypage .kakao {background-color: #FAE100; }
.social_mypage .kakao .fa-comment {color: #502929; font-size: 30px; margin:11px 25px}
.social_mypage .facebook {background-color: #1778F2; }
.social_mypage .facebook .fa-facebook-f {font-size: 30px;color: #fff; margin:12px 30px}
.social_mypage .google {background-color: #EA4335; }
.social_mypage .google .fa-google-plus-g {font-size: 30px; color: #fff;margin:11px 21px}
.social_mypage .apple {background-color: #333333; }
.social_mypage .apple .fa-apple {color: #fff; font-size: 30px;margin:10px 28px}

.social_mypage .disable {background-color: #fff; border: 1px solid #dfdfdf; cursor: default}
.social_mypage li.disable:hover {opacity: 1; }
.social_mypage .disable .fa-facebook-f {color: #1778F2;}
.social_mypage .disable .fa-google-plus-g {color: #EA4335;}
.social_mypage .disable .fa-apple {color: #333333;}
.social_mypage li .date { font-size: 12px; line-height: 13px; text-align:justify; font-weight: 500;}
.social_mypage li .date i { font-size: 10px;}
.social_mypage li p { display: block; width: 81px;  font-size: 12px;  line-height: 10px; text-align:center; }
.social_mypage .detail {background: #eaecef; float: right; width: 60%; color:#555; padding: 15px 30px; border-radius: 6px; text-align: justify;font-size: 14px; display: block; margin-top: 25px; margin-bottom: 0px}

.btn2_orange {
	margin-top: 40px;
    width: 48%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #fff;
    background-color: #00afec;
	font-weight: 500;
}
.btn2_green {
	margin-top: 40px;
    width: 48%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #fff;
    background-color: #00AFEC;
	font-weight: 500;
	float: right;
}
.btn2_gray {
	margin-top: 40px;
    width: 48%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #222;
    background-color: #e1e2e5;
	font-weight: 500;
	float: right;
}
.btn2_orange:hover, .btn2_green:hover, .btn2_gray:hover {opacity: 0.8; transition: 0.2s}
.join .bottom {font-size: 14px; font-weight: 300; text-align: center; margin: 60px 0 0 0; line-height: 24px; border-top:1px solid rgba(34,34,34,0.1);  padding: 30px; border-radius: 6px; } 
.join .bottom strong {color: #00afec;}
.join .bottom span {font-weight: 600; border-bottom: 1px solid #555; color: #555; }
#reason {width: 70%; border:none; font-family: 'TJJoyofsingingM'; margin-left: 1%}

.changePw .withdraw {display: table; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;}
.changePw .inp_chk .lab_g {
    display: inline-block;
    margin-right: 19px;
    color: #222;
    font-size: 1em;
    line-height: 19px;
    vertical-align: top;
}






.table { max-width: 1030px; margin: 0 auto;}
.table p {text-align: left; margin: 0; float: left; font-size: 14px; margin-bottom: 10px; font-weight: 300;}
.table p i {vertical-align: middle;}
.common_sub_menu { }
.common_sub_item {cursor: pointer;padding: 10px 20px; background:#eaecef; border-radius: 6px;  float: left; margin: 50px 20px 20px 0;}

.common_sub_menu .coupon {float: right;  background: #007a72; color: #fff; margin-right: 0;}
.common_sub_menu .fa-plus { vertical-align: middle; font-size: 15px; margin-right: 7px;}
.common_sub_menu a:hover {opacity: 0.7; transition: 0.2s}
.common_sub_item[aria-selected=true] {
    color: #fff;
	background:#00afec;
}

.common_table {width: 100%; font-family: 'TJJoyofsingingM'; 
	border-collapse: separate;
    border-spacing: 0 6px; 
	border-radius: 4px;
}


.thead-dark { background: #343a40; color: #fff; }
.thead-dark tr {line-height: 2.5; }
.thead-dark th { border-bottom:1px solid #dfdfdf; font-size: 13px; font-weight: 300; }
.thead-dark th:first-child {border-radius: 6px 0 0 6px; }
.thead-dark th:last-child {border-radius: 0 6px 6px 0; }
.thead-dark .left {text-align: left}
.thead-dark .right {text-align: right}

.common_table .section {text-align: center; width: 23%;}

.common_table .song {background: rgba(255,74,43,0.1);   color: #00afec; }
.common_table .ting {background: rgba(94,92,167,0.12);  color: #5E5CA7; }
.common_table .mobile {background: rgba(0,122,114,0.1);   color: #007a72; }
.common_table .song, .common_table .ting, .common_table .mobile { padding: 8px 30px; border-radius: 30px; font-size: 13px; font-weight: 300;}

.common_table .list {
position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
	background: #fff;
	line-height: 3.5;
	box-shadow: 0px 1px 1px 0px rgba(34,34,34,0.05);
   }
.common_table .list td:nth-child(2) {font-size: 16px; margin: 0 auto; }
.common_table .list .control {width: 35%; text-align: center;  font-weight: 300;}
.common_table .expire .control {cursor:default}
.common_table .list .control span {
}

.common_table .no { text-align:center; font-size: 14px; color: #454d55; }
.common_table .songTitle, .common_table .singer { color: #343a40;  padding-left: 20px; 
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	word-break: normal;}
.common_table .singer {color: #454d55; padding-left: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	word-break: normal;
}
.common_table .down { color: #fff;cursor: pointer; text-align: center; transition: 0.2s;
background: #00AFEC; 
}
.common_table .down fa-music {filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.35))}
.common_table .down:hover {opacity: 0.8; transition: 0.2s;}
.border_gray span { cursor: pointer;border: 1px solid rgba(34,34,34,0.15); color: rgba(34,34,34,0.7); background: rgba(34,34,34,0.02); border-radius: 30px; line-height: 30px; padding: 8px 40px; }
.border_gray .bi-x-lg {font-size: 13px;vertical-align: middle; line-height: 30px;}

.border { width: auto;  padding:0 40px; vertical-align:middle;  cursor: pointer;
        border: 1px solid transparent;
        border-radius: 30px; 
        overflow: hidden;
        background: -webkit-linear-gradient(white, white), -webkit-linear-gradient(left, #9130fe 0%, #ff00a2 100% #ff3b00 100%);
        background: -o-linear-gradient(white, white), -o-linear-gradient(left, #9130fe 0%, #ff3b00 100%);
        background: linear-gradient(white, white), linear-gradient(to right, #9130fe 0%, #ff3b00 100%);
        -webkit-background-clip: padding-box, border-box;
        -moz-background-clip: padding-box, border-box;
        background-clip: padding-box, border-box;
        -webkit-background-origin: border-box;
        background-origin: border-box;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        display: inline-block;}
 .border span {
        width: 100%;
        font-size: 16px;
        color: #454d55;
        line-height: 40px;
        text-align: center;
	 display: block; font-weight: 500;transition: 0.1s;}

.border:hover {color: #fff; transition: 0.1s;
background: rgb(145,48,254); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(145,48,254) 0%, rgb(255,0,162) 50%, rgb(255,59,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgb(145,48,254) 0%,rgb(255,0,162) 50%,rgb(255,59,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgb(145,48,254) 0%,rgb(255,0,162) 50%,rgb(255,59,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9130fe', endColorstr='#ff3b00',GradientType=1 ); /* IE6-9 */
	
}
.border:hover span {color: #fff;}

.common_table .list td:first-child {border-radius: 6px 0 0 6px;}
.common_table .list td:last-child {border-radius: 0 6px 6px 0;}

.common_table .expire { opacity: 0.55;}

.common_table .date {text-align: center; font-size: 12px; font-weight: 300;color: #454d55; width: 170px; opacity: 0.5}
.common_table .outline_gray {text-align: center; }
.common_table .outline_gray span { padding: 8px 20px; border-radius: 30px; font-size: 13px; font-weight: 300; border: 1px solid rgba(69,77,85,0.15); color: #454d55; line-height: 16px; }
.common_table .outline_gray span i {font-size: 15px; vertical-align: middle; margin-right: 8px}
.common_table .width140 {width: 140px;}
.common_table .width10 {width: 10px;}
.common_table .numberOrange {font-weight: 600; color: #00afec; letter-spacing: 0.5px; font-size: 17px; text-align: right; padding-right:65px; width: 20%;}
.common_table .tam {padding-right:70px;}
.common_table .usetam { width: 24px; height: 24px;  margin: -2px 0 0 5px; vertical-align: middle; }
.common_table .bi-three-dots {  opacity: 0.3;}
.common_table .numberPurple {font-weight: 600; color: #8c63dc; letter-spacing: 0.5px; font-size: 17px; text-align: right; padding-right:68px; width: 20%;}
.common_table .numberPurple .candy {width: 28px; height: 28px;  margin: -3px 0 0 5px; vertical-align: middle; }


.module_paging {    width: 100%;    text-align: center;    padding: 20px 0; }
.module_paging ul.paging_wrap {    display: inline-block;    text-align: center;}
.module_paging ul.paging_wrap li {    display: inline-block;    position: relative;    z-index: 2;    margin-left: -1px;  }
.module_paging ul.paging_wrap li.btn_next,
.module_paging ul.paging_wrap li.btn_prev,
.module_paging ul.paging_wrap li.btn_first { margin-top: 1px; }
.module_paging ul.paging_wrap li.btn_first span {color:#808991 }
.module_paging ul.paging_wrap li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    color: #808991;
    height: 30px;
    line-height: 30px;
    padding: 5px 15px;
    text-align: center;
    min-width: 20px;
	cursor: pointer;
}
.module_paging ul.paging_wrap li a:hover {opacity: 0.7; transition: 0.2s}
.module_paging ul.paging_wrap li.page_this a {
    cursor: default;
    color: #222;
    background: #EAECEF;
    border-color: #0e7bc3;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 700;
	padding: 5px 18px;
}

.bottomNotice {margin:50px 0; text-align: center; color: #454d55; line-height: 1.7; font-size: 14px; }
.bottomNotice strong {border-bottom: 1px solid#454d55; font-weight: 600;}

.myRecord { margin: 50px 0 15px 0; font-size: 18px; color:#454d55;}
.myRecord span {background: rgba(255,74,43,0.08); border-radius: 4px; padding: 8px 4px 11px 15px; font-weight: 600; color: #454d55; cursor: pointer}
.myRecord button {background: #00afec;  border-radius: 4px; color: #fff; margin-left: 15px; height: 38px; width: 57px; vertical-align:middle;}
.myRecord button:hover {opacity: 0.8;  }
.myRecord .font16 {font-size: 16px; font-weight: 500;}















/* 서비스 소개 */


.orangeBG {/*position: absolute; right: 0; width: 31%; background: rgba(255,74,43,0.2); height: 40%; z-index: -2; top: 30%;  background: url("../img/orangeBG.png") no-repeat; background-position: center; background-size: 100%;*/
}

.subtitle {max-width: 1030px;  margin: 0 auto; position: relative; padding: 20px 0; margin-bottom: 60px;}
.subtitle p {padding: 0; margin: 0;}
.subtitle p.etc { font-size: 0.9em; margin-top: 0.8em; line-height: 2.1;}
.subtitle p.etc i {color:#8737ff }
.subtitle p.etc strong { padding: 0 4px 0 4px; }
.subtitle p.etc strong.btn {border: 1px solid #8737ff; border-radius: 20px; padding: 2px 10px; color: #8737ff; cursor: pointer}
.subtitle p.install {color: #a2a3a3; font-size: 0.9em; margin-top: 0.8em; line-height: 2.1; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;}
.subtitle p.install i { margin-right: 5px; }
.subtitle .left {width: 50%;}
.subtitle .left .title { text-align: left; display: inline-block; }
.subtitle .left .title .pcsong {width: 105%; max-width:400px;height: auto; background:none; }
.subtitle .left .title .youtube {width: 120%; max-width:400px;  height: auto; background:none;}
.subtitle .left .title .mobile {width: 142%; max-width:450px;  height: auto; background:none;}
.subtitle .left .title .tv {width: 102%; max-width:370px;height: auto; background:none;}
.subtitle .small {font-size:1em; font-weight: 300; margin-top: 5%; line-height: 1.7; word-break: break-all;}
.subtitle .down_img {position: absolute; right: 0; top: 0px; width:80%; float: right; transform: none !important;
perspective: none !important; z-index: -1;}
.subtitle .up_img {position: absolute; right: 0; top: -20px; width:80%; float: right; transform: none !important;
perspective: none !important; z-index: -1;}

.subtitle button:hover {opacity: 0.8; transition: 0.2s;}
.subtitle .song, .subtitle .and {display: inline-block; width: 47.6%; height: 52px; margin-top: 50px; margin-right: 2%; background: #F23568; border-radius: 4px; color: #fff; font-size: 1em; }
.subtitle .left .song:nth-child(4) { margin: 0; padding: 0; }
.subtitle .ting {display: inline-block; width: 47.6%; height: 52px; margin-top: 50px;background: #8737ff; border-radius: 4px; color: #fff; font-size: 1em;}
.subtitle .youtube1 {display: inline-block; width: 47.6%; height: 52px; margin-top: 50px; margin-right: 2%; background: #3fcdc7; border-radius: 4px; color: #fff; font-size: 1em;}
.subtitle .youtube2 {display: inline-block; width: 47.6%; height: 52px; margin-top: 50px; background: #a779d2; border-radius: 4px; color: #fff; font-size: 1em;}
.subtitle .ios {display: inline-block; width: 47.6%; height: 52px; margin-top: 50px; background-color: #653BBF; border-radius: 4px; color: #fff; font-size: 1em;}
.subtitle .orange {display: none}
/*
.service_intro  {max-width: 1030px;  margin: 80px auto;}
.service_intro .box li { float: left; text-align: left;}
.service_intro .box {background: #fff; padding: 20px; }
*/

.part_title {
	margin: 60px 0 ; /*background: rgba(255,74,43,0.05);*/ 
	padding: 5% 0 1% 0; 
	text-align: center; 
	font-weight: 700; 
	font-size: 1.8em; 
	color: #343a40; }
.part_title i {vertical-align: middle}
.part_title img {width: 1.1em; vertical-align: middle}

.service_intro {  display: grid; display: -ms-grid; 
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
	max-width: 1280px;
    grid-column-gap: 20px;
	grid-row-gap: 20px;
	grid-auto-rows: minmax(295px, auto);
	margin: 0 auto; text-align: center; position: relative;
	-ms-grid-columns:295px 20px 295px 20px 295px 20px 295px;
}
.intro_qrbox {width: 100%; background: #fff; padding: 3em 0 2em 0; float:right; margin:2em 0 10em 0;
  box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.07);
  text-align: center;
  border: 1px solid #fff;
	border-radius: 4px;}
.intro_qrbox .qr {margin: 0 auto 20px auto; width: 50%; float: left;}
.intro_qrbox .qr .code { border-radius: 6px; border: 20px solid #F6F8FA; width: 35%; height: auto;}
.intro_qrbox .qr .icon {width: 20px; vertical-align:bottom; margin-top: 10px; margin-right: 3px;}
.intro_qrbox .qr .title {color: #343a40; font-size: 1.em; font-weight: 700;}



.wp-block-quote { color: #454d55; text-align:justify;  line-height: 2;
    width: 96%;
    float: left;
    padding: 0 0 0 24px;
    margin: 60px 0 50px;
	border-left: 5px solid #454d55;}
.mobile_content {  width: 100%; font-size: 1.15em;  margin: 0;  color: #454d55; display: block;}

.intro_tingbox {-ms-grid-columns:413px 20px 413px 20px 413px}

.service_intro .song-box1 {-ms-width:295px; 
	-ms-height: auto;
	-ms-grid-column: 1;
    -ms-grid-row: 1;}
.service_intro .song-box2 {-ms-width:295px;
	-ms-height: auto;
	-ms-grid-column: 3;
    -ms-grid-row: 1;}
.service_intro .song-box3 {-ms-width:295px;
	-ms-height: auto;
	-ms-grid-column: 5;
    -ms-grid-row: 1;}
.service_intro .song-box4 {-ms-width:295px;
	-ms-height: auto;
	-ms-grid-column: 7;
    -ms-grid-row: 1;}

.service_intro .ting-box1 {-ms-width:295px; 
	-ms-height: auto;
	-ms-grid-column: 1;
    -ms-grid-row: 1;}
.service_intro .ting-box2 {-ms-width:295px;
	-ms-height: auto;
	-ms-grid-column: 3;
    -ms-grid-row: 1;}
.service_intro .ting-box3 {-ms-width:295px;
	-ms-height: auto;
	-ms-grid-column: 5;
    -ms-grid-row: 1;}

.service_intro .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  margin: 0  0 30px 0;
  background: #fff;
  box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.07);
  transition: all 0.3s ease-in-out;
  text-align: center;
  border: 1px solid #fff;
	border-radius: 4px;
}


.service_intro .icon {
  margin: 0 auto 20px auto;
  padding-top: 17px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 72px;
  height: 72px;
}


.service_intro .icon i {
  font-size: 30px;
  line-height: 1.3;
}


.service_intro .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 1.2em;
	color: #343a40;
}

.service_intro .description { text-align:center justify; font-weight: 300;
  font-size: 0.94em;
  line-height: 24px;
  margin-bottom: 0;
	color: #454d55;
	opacity: 0.75;
}

.service_intro .icon-box-orange .icon {  background: #FEF1EB;}
.service_intro .icon-box-orange .icon i {  color: #FF7816;}

.service_intro .icon-box-cyan .icon {  background: #E6FDFC;}
.service_intro .icon-box-cyan .icon i {  color: #3fcdc7;}

.service_intro .icon-box-green .icon {  background: #eafde7;}
.service_intro .icon-box-green .icon i {  color: #41cf2e;}

.service_intro .icon-box-blue .icon {  background: #e1eeff;}
.service_intro .icon-box-blue .icon i {  color: #2282ff;}

.service_intro .icon-box-pink .icon {  background: #fceef3;}
.service_intro .icon-box-pink .icon i {  color: #ff689b;}

.service_intro_single .icon-box-red .icon {  background: #FDEAE8;}
.service_intro_single .icon-box-red .icon i {  color: #F0351A;}

.service_intro .icon-box-pink .icon img,
.service_intro .icon-box-cyan .icon img,
.service_intro .icon-box-green .icon img,
.service_intro .icon-box-blue .icon img {
	width: 30px;
	height: 30px;
	padding-top: 3px;
}

.service_intro2 {background-color: transparent;}
.service_intro2 ul {padding: 0 1em; padding-bottom: 1em;}
.service_intro2 ul li:last-child {margin-bottom: 6em;}
.service_intro2 .title, .service_intro3 .title {font-size: 1.3em; font-weight: 600;  line-height: 2; color: #343a40; margin-bottom: 5px;  }
.service_intro2 .number, .service_intro3 .number {width: 30px; padding-top: 2px; margin-right: 0.5em; vertical-align:middle; }
.service_intro2 .content, .service_intro3 .content {font-weight: 300;font-size: 0.95em; color: #454d55; line-height: 26px;  margin-bottom: 2.5%; text-align: justify; display: block;}
.service_intro2 .content, .service_intro3 .content:after { content: ''; display: block; border-bottom: 1px solid rgba(69,77,85,0.1); width: 100%; padding-bottom: 15px;}
.service_intro2 .content, .service_intro3 .content:after:last-child {border:none;}
.service_intro2 .content img {vertical-align:middle;  }
.service_intro2 .content img.icon {
	height: 36px; margin-right: 8px; border-radius: 12px;	
}
.service_intro2 .content .iconSmall {margin-left: 1.5%;}
.service_intro2 .content .icon {  margin-bottom: 5px;}
.service_intro2 .content .strong {color: #454d55; font-weight: 600; padding: 0 5px}

.service_intro3 .route { display: block; width: calc(100% - 1em);margin: 0 auto; text-align: left; float: left}
.service_intro3 .left {width: 48%; padding-bottom: 10em; display: inline-block;  }
.service_intro3 .left img {width: 100%;}
.service_intro3 .route ul {width:50%; text-align: justify; display: inline-block; margin-top: 7em}
.service_intro3 .top {width:100%;  background: rgba(69,77,85,0.07); border-radius: 4px; padding-left: 2%; font-size:1em; color: #454d55; height: 3em; font-size: 1.1em; line-height: 3em; margin-bottom: 3%; display: block;}
.service_intro3 .top .bi-arrow-right-circle-fill {opacity: 0.4; vertical-align:middle; padding: 0 1%; }
.service_intro2 .content span, .service_intro3 .content span {color: #00afec;}
.service_intro2 .fa-exclamation-circle {vertical-align: middle}
.service_intro2 p {text-align: center;}
.service_intro2 p img { max-width: 100%; /* 이미지의 최대사이즈 */}

.legend_detail {font-size: 18px; line-height: 2; color: #343a40; padding-bottom: 5em; font-weight: 300; width: 70%; margin: 3em auto;
	padding:  3em;   box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.1);
  transition: all 0.3s ease-in-out;
  text-align:justify;
  border: 1px solid #fff;
	border-radius: 4px; }
.width1030 .right { float: right; width: 45%; height: auto; position: relative;top: -7.4em;}
.legend_detail img { width:144px; vertical-align:middle;  }
.legend_detail strong {font-size: 20px}
.legend_detail i {color: #3fcdc7; font-weight: 700; vertical-align: middle; margin-right: 5px;}
.legend_detail img.icon {width: 20px; vertical-align: middle; margin-right: 8px;}
.legend_detail p {margin: 1em 0; background: rgba(63,205,199,0.08); padding: 1em 2em; border-radius: 4px; font-weight: 600;  }
.legend_detail .legend { width: 100%;
    height: 55px;
    border-radius: 4px;
    font-size: 1.1em;
    color: #fff;
	margin-top: 2em; margin-bottom: 1em;
	background: rgb(44,235,205); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgb(44,235,205) 0%, rgb(167,121,210) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgb(44,235,205) 0%,rgb(167,121,210) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgb(44,235,205) 0%,rgb(167,121,210) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cebcd', endColorstr='#a779d2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.legend_detail .legend:hover {opacity: 0.8; transition: 0.8s }
.legend_detail .down {margin-top: 2px; float: right; background-color: #3fcdc7; border-radius: 4px; padding: 2px 14px; font-size: 16px; color: #fff; font-weight: 600;text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); cursor: pointer}
.legend_detail .down i {color: #fff;}
.legend_detail .down img {
	width: 20px;
	margin-right: 6px;
}

.intro_tv {width: 100%; height:auto; background: #fff; }
.intro_tv2 {max-width: 1030px; margin: 0 auto; height:auto; background: #fff; padding: 0 0 12em 0;}

.intro_tv header {position: relative; margin: 0em;}
.intro_tv header h2 {font-weight: 700; line-height: 1.4; font-size: 1.6em; color: #343a40; position: absolute; left: 50%;	transform:  translate(-50%); top:77%;width: 100%;}
.intro_tv header h2 i {vertical-align: middle;}
.intro_tv .icon {width: 23px; vertical-align:sub; margin-right: 8px;} 
.intro_tv header span {text-align:center; font-weight: 300; font-size: 0.7em; }
.intro_tv header span.small {font-size: 0.5em; background: rgba(255,255,255,0.7); padding: 2px 10px; border-radius: 4px;}
.tv_imgbg {margin: 0 auto; width: 100%; text-align: center; }

.intro_tv2 .intro_tv_title { clear: both;width: 100%; font-size: 1.5em; font-weight: 600;display: block;}
.intro_tv2 .intro_tv_title blockquote.wp-block-quote {line-height: 1.4; margin: 5em 0 ;}
.intro_tv2 .intro_tv_title blockquote span.small {font-size: 0.7em; font-weight: 300;  }


.history .left .ktlogo {width: 28%; height: auto; padding-top: 0.5% }
.history .left .btvlogo {width: 42%; height: auto;}
.history .left .upluslogo {width: 48%; height: auto;}
.history .left .skylifelogo {width: 60%; height: auto;}
.history .left .lghellologo {width: 70%; height: auto;}
.history .left .hyundailogo {width: 70%; height: auto; margin-top: 20px;}
.history .left .dlivelogo {width: 60%; height: auto;}

.history {width: 100%;  margin:0 0 31px 0; float: left;background: #fff; display: block; }
.history:last-child { padding-bottom: 10em;}
.history .left {     width: 180px;  float: left ; }
.history .right {     width: calc(100% - 180px);  float: left;}
.history .right ul.tv-history { clear: both;width: calc(100% + 20px);    margin: 0 -10px;    float: left; }
.history .right ul.tv-history > li { 
	width: calc(33% - 20px); 
	height: 10em; 
	text-align: center;
    margin: 3px 10px 20px 10px;
    padding: 10px 0 0 0;
    float: left;
    color: #454d55;
    line-height: 1.5;
    font-size: 1em;
    font-weight: 500;   
	border-top: 1px solid #454d55; }
.history .right ul.tv-history > li > span {display: block; text-align: center; padding: 10px 0 7px; border-radius: 20px;
    width: 70%;
    margin: 0 auto; margin-top: 45px;
    font-weight: 600; border: 1px solid rgba(52,58,64,0.2); color: #454d55; line-height: 16px; }
.history .right ul.tv-history p.table_logo {
	display: block; 
	width: 55%; 
	height: 3em; 
	text-align: center; 
	margin: 0 auto; 
	margin-top: 5%;
	object-fit: contain;
}
.history .right ul.tv-history p.table_logo img {width: 100%; height: auto; object-fit: contain; }
.history .right ul.tv-history li img.coin {width: 130%; margin-left:-15%;}
.history .right ul.tv-history li img.ikoo {width: 90%; margin-top:-7%;}
article div.history:last-child {margin-bottom: 0;}


.event_list {    margin-right: -40px;    padding: 40px 0 0;}
.event_list .event_item {
    box-sizing: border-box;
    display: inline-block;
    width: 47%;
	padding: 30px;
    vertical-align: top;
	background: #fff;
	  box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.07);
  transition: all 0.3s ease-in-out;
  border: 1px solid #fff;
	border-radius: 4px;
	margin-right: 1em;
	margin-bottom: 3em;
 cursor: pointer;
}

.expiredEvent .event_thumb{  position: relative; transition: 0.2s;}
.expiredEvent .event_thumb .event_thumb_image {opacity: 0.6 ;}
.expiredEvent .event_thumb:hover {background-color:#343a40; transition: 0.2s;}
.expiredEvent .event_thumb span {text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4); opacity: 0;  color: #fff; font-size: 27px; font-weight: 600; z-index: 1; position: absolute; left: 50%;	top: 50%;    transform:  translate(-50%,-50%);}
.expiredEvent .event_thumb:hover span {opacity: 1;transition: 0.2s;}
.expiredEvent .event_thumb:hover .event_thumb_image {opacity: 0.3;}

.event_list .event_thumb {
    display: block;
    overflow: hidden;
    text-align: center;
	margin: auto;
	width: 100%;
	max-height: 248px;
    border-radius: 4px;
}
.event_list .event_thumb_image {transition: 0.2s;
    width: 100%; 
}
.event_list .event_thumb_image:hover {transform: scale(1.05); transition: 0.3s;}

.event_list .event_info_area {
    position: relative;
}

.event_list .event_title {
    display:inline-block;
    max-width: 100%;
    padding: 16px 0 0   ;
	font-size: 1.2em;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

}
.event_list .event_title span {
	vertical-align: middle;
}
.event_list .event_title .youtube, .event_list .event_title .app, .event_list .event_title .tv, .event_list .event_title .regular{    
	margin-right: 7px;
    padding: 5px 8px 5px;
    background-color: #3fcdc7;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
}
.event_list .event_title .youtube {    background-color: #3fcdc7;}
.event_list .event_title .app {   background-color: #00AFEC;}
.event_list .event_title .tv {background-color: #007a72}
.event_list .event_title .regular {background-image: linear-gradient(to left, #8CD8CC, #00AFEC);
}
.event_list .event_info span {color:rgba(69,77,85,0.5); font-size: 0.8em;}
.event_list .event_info span:first-child {margin-right: 14px;}
.event_list .event_info .orange {color: #00afec;}
.event_list .event_info i {vertical-align: middle; margin-right: 4px;}
.event_list .event_info span img,
.event_detail .event_info span img {
	width: 16px;
	vertical-align:middle; 
	margin-right: 6px;
}
 .event_detail { margin-top: 40px;  padding:5em 4em; box-sizing: border-box;width: 100%;
    vertical-align: top;
	background: #fff;
	  box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.07);
  border: 1px solid #fff;
	border-radius: 4px;}
.event_detail h2 { font-size:1.8em; text-align: left; }
.event_detail .event_info {padding: 0.5em 0 3em 0; }
.event_detail .event_info span {color:rgba(69,77,85,0.5)}
.event_detail .event_info span:nth-child(2) {margin:0 14px;}
.event_detail .event_info i {vertical-align: middle; margin-right: 6px;}
.event_detail .contents {font-size: 1em; font-weight: 300; line-height: 1.8em; }
.event_detail .contents img {width: 100%; margin-bottom: 2em;}
.event_detail .contents strong {font-weight: 600;}
.event_detail .contents a {font-size: 1em; font-weight: 500; color: #454d55}
.event_detail .contents a:hover {opacity: 0.8}
.event_detail .btn_join {width: 50%; margin-left: 25%; margin-top: 5em;}




.shop_container {width: 1030px;  margin: 0 auto; padding: 0; }

.shop_container .common_tab_menu {display: block;
    overflow: visible;
    height: 50px;
    padding: 0 0 13px;
	position: relative;
	}

.shop_container .common_tab_item {
	cursor: pointer;
	margin-right: 30px;
    padding: 0;
    font-size: 23px;
    color: #343a40;
	font-weight: 400;
	display: inline-block;
    width: auto;
    text-align: left;
	position: relative;
    line-height: 42px;
}

.shop_container .common_tab_item[aria-selected=true] {
    color: #343a40;
	font-weight: 700;
}


.shop_container .common_tab_item[aria-selected=true]:after {
    position: absolute;
    right: -1px;
    bottom:-8px;
    left: 0;
    z-index: 1;
    border-bottom: 3px solid #00afec;
    border-radius: 3px;
    content: '';
	
}

#shop_ticket {padding:4em 0; z-index: 10;}

.ticket_list_top {margin: 0 auto; height: 280px;}
.ticket_list_top li {background: #fff;	 box-shadow: 0 5px 20px 0 rgba(255,74,43, 0.15);  border: 1px solid #fff; border-radius: 40px; padding: 30px; box-sizing: border-box;   float: left; z-index: 1;}
.ticket_list_top.ting {clear: both;}
.ticket_list_top li.ting {background: #fff;	 box-shadow: 0 5px 20px 0 rgba(135,55,255, 0.1);  border: 1px solid #fff; border-radius: 40px; padding: 30px; box-sizing: border-box;   float: left}
.ticket_list_top .only {height: 220px; float: left; margin-left:25px;}
.ticket_list_top .ting {width: 80%; position: relative}
.ticket_list_top h3 {padding-top: 5px;}
.ticket_list_top .small {   padding-top: 60px; font-size: 17px;	color:#454d55; font-weight: 400;}
.ticket_list_top .title { font-size: 27px; font-weight: 600;   color: #00afec; }
.ticket_list_top ul li {margin: 0 auto; text-align: center}
.ticket_list_top ul li:first-child:nth-last-child(1) {  width: 70%; margin-left: 15%;}
.ticket_list_top ul li:first-child:nth-last-child(2),
.ticket_list_top ul li:first-child:nth-last-child(2) ~ li {  width: 46%; margin: 0 2%}

.ticket_list_top ul button {padding: 10px 20px;}
.ticket_list_top ul .monthly { position: relative; transition: 0.2s; 
    height: 80px;
    width: 210px;
    margin: 40px auto 0;
    font-size: 26px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    border-radius: 8px;
background: rgb(145,48,254); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(145,48,254) 0%, rgb(255,0,162) 50%, rgb(255,59,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgb(145,48,254) 0%,rgb(255,0,162) 50%,rgb(255,59,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgb(145,48,254) 0%,rgb(255,0,162) 50%,rgb(255,59,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9130fe', endColorstr='#ff3b00',GradientType=1 ); /* IE6-9 */}
.ticket_list_top ul .monthly:hover, .ticket_list ul li button:hover {opacity: 0.8; transition: 0.2s;}
.ticket_list_top ul li .add {position:absolute; width: 25%; top: -5%; right: -5%; }

.ticket_list {position: relative;    overflow: hidden;    width: 1280px;    margin: 0 auto;    z-index: 2; padding: 100px 0;}
.ticket_list h2 {margin-bottom: 60px;}
.ticket_list h2 span {font-size: 18px; font-weight: 300;}
.ticket_list ul li {    position: relative;    float: left;      padding-top: 100px;	text-align: center;padding:50px 30px;
  overflow: hidden;
  margin: 0  0 30px 0;
  background: #fff;
  box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.07);
  text-align: center;
  border: 1px solid #fff;
	border-radius: 4px;}
.ticket_list ul li:first-child:nth-last-child(1) {  width: 50%;}

.ticket_list ul li:first-child:nth-last-child(2),
.ticket_list ul li:first-child:nth-last-child(2) ~ li { width: 44%; margin: 0 3%;}

.ticket_list ul li:first-child:nth-last-child(4),
.ticket_list ul li:first-child:nth-last-child(4) ~ li {  width: 23%; margin: 0 1%;}

.ticket_list ul li span {    display: inline-block;    font-size: 17px;	color:#454d55;}
.ticket_list ul li strong {    display: inline-block;    margin-top: 13px;    font-size: 27px;    color: #00afec;}
.ticket_list ul li .price {    margin-top: 26px;    font-size: 24px;	color: rgba(69,77,85,0.5);}
.ticket_list ul li .price del {    text-decoration: line-through;}
.ticket_list ul li button {
    position: relative;
    height: 80px;
    width: 210px;
    margin: 20px auto 0;
    font-size: 26px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    border-radius: 8px;
    background: #343a40;
}

.ticket_list ul li button .small {color: #fff; font-weight: 300;}
.ticket_list .item button {font-size: 18px;}
.ticket_list .item .icon {width: 40%;}
.ticket_list .item .example {font-size: 15px; margin: 0; padding: 0; font-weight: 600;color:#454d55;}
.ticket_list h4 {text-align: center; color: #9ea3a9; margin-top: 430px; }
.ticket_list_top.ting h3, .ticket_list.ting ul li strong { color: #8737ff;}
.ticket_list_top.mobile h3, .ticket_list.mobile ul li strong { color: #13A590;}

.popup .content_buy {padding: 0 40px;  color: #454d55;margin-top: 30px; }
.popup .content_buy table {background: rgba(255,74,43,0.05); padding: 20px 40px 10px 40px; width: 100%; border: 0; border-radius: 6px; font-size: 16px;}
.popup .content_buy table th {text-align: left;  width: 40%; font-weight: 400; padding-bottom: 10px; }
.popup .content_buy table td {text-align:right; padding-bottom: 10px;font-weight: 600; font-size: 17px;}

.popup .content_buy .inp_chk {
	margin-top: 15px; 
	padding-top: 5px ; 
	text-align: center; 
	width: 100%;
}
.popup .content_buy .inp_chk .txt_lab {
	font-size: 15px; 
	vertical-align:baseline;
}
.popup .content_buy .inp_chk .lab_g {    
	display: inline-block;    
	margin-right: 19px;    
	color: #222;    
	font-size: 1em;    
	line-height: 19px;    
	vertical-align: top;     
	padding-bottom: 5px;  
}
.content_buy .shop { 
	margin: -40px; 
	border:none; 
	width:100%; 
	margin:0 auto; 
	height: auto; 
	padding: 10px 0 50px 0;  
	position:relative; 
	text-align: center; 
	border-bottom: 1px solid #dfdfdf; 
}
.content_buy .notice_bottom {margin: 40px 0 50px 0;}
.content_buy .notice {margin: 25px 0;}
.content_buy .notice_detail {position: relative; 
    padding: 4px 0 4px 6px;
    font-size: 14px;
    line-height: 20px;
    color: #888;
	font-weight: 300;
}
.content_buy .notice_detail:before {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #888;
    position: absolute;
    top: 12px;
    left: 0;
    content: "";
}
.content_buy .notice_detail strong {color: #00afec; font-weight: 500;}

.shoptopBG {position: relative; width: 100%; z-index: 0; background-color: #FFD952;}
.shoptopBG .bgimg { position: absolute; z-index: -1;  width:1500px; height:100%; left: 50%;   transform: translateX(-50%); }
.shoptopBG.song {background:#FFB04A}
.shoptopBG.ting {background: #8436F2;}
.shoptopBG.mobile {background: #20b3a3;}


.company_intro { background: url("../img/company_bg.jpg") no-repeat; background-position: 10% center; padding: 4em 3em; color: #fff; line-height: 1.8; opacity: 0.9;  text-shadow : 0px 0px 5px #000; border-radius: 6px; word-break:keep-all; margin-top: 4em;}
.company_intro strong {font-size: 1.5em; font-style: italic; font-weight: inherit}

table.company {width: 100%;    border-collapse: collapse;   margin-top: 5em; }

table.company caption {
    height: 1px;
    font-size: 0;
    line-height: 0;
}
table.company .list {
	background: #fff;
	box-shadow: 0px 1px 1px 0px rgba(34,34,34,0.05);
   }
table.company .list tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

table.company .list td {  
	font-weight: 300;
	padding: 15px 10px 15px 25px;
    border-bottom: 1px solid rgba(52,58,64,0.1);
	border-top: 1px solid rgba(52,58,64,0.1);;
	color: #454d55;
}
table.company .list th {    width: 20%; font-size: 0.9em; font-weight: 600;
	border-top: 1px solid rgba(52,58,64,0.1);;
	border-bottom: 1px solid rgba(52,58,64,0.1);
    padding: 15px 10px;
    background: rgba(52,58,64,0.02);
    font-weight: 500;
    text-align: center;
	color: #343a40;
}

table.company tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

article.content {color: #454d55; padding: 5em 0; line-height: 1.8; word-break:keep-all; position: relative;}
article.content h3 {color:#343a40; font-size: 2em; font-weight: 600; line-height: 1.6;}
article.content h4 {color:#343a40; font-size: 1.5em; font-weight: 600;     line-height: 1.36;    margin: 24px 0 16px 0;}
article.content .terms {    margin: 0 0 1.625rem 0;}

article.content .btn_login {width: 50%; margin-top: 2em; margin-left: 25%;}
article.content .legend_detail {width: 50%; margin-top: 4em;}
article.content .legend_detail p {font-weight: 500; }
article.content .right {  width: 23%; height: auto; margin: 5em 7% 0 7%; }
article.content ul { margin: 0 0 1.625rem 0;}
article.content ul li {list-style:disc; margin-left: 20px; }

.footer_notice {padding-top: 5em;}
.footer_notice .common_table .mobile-title {
		width: 100%;		
		float: left;
  		  clear: left;
 	   text-align: left;
		word-break: keep-all;
		border-radius: 4px;
		line-height: 1.5;
	padding: 3% 0;
	}
.more-view {display: none;}


.form-field {    margin:3em 0 2em 0; }

.form-field label {    display: block;  font-weight: 400;  font-size: 0.95em;  margin-bottom: 5px; margin-top: 25px;}
.form-field input {    border: 1px solid rgba(52,58,64,0.1); 
     padding: 14px 20px;    width: 100%;box-sizing: border-box; font-size: 1em; font-weight: 400; color: #343a40}


.form-field textarea {font-family: 'TJJoyofsingingL'; font-weight: 300; font-size: 1em; 
    border: 1px solid #e6e8eb;
    resize: vertical;
    width: 100%;
    outline: none;
    padding: 14px 20px; 
	min-height: 120px;
	vertical-align: middle;box-sizing: border-box;
	line-height: 1.8;
}

.upload {
	background: #fff;
    font-size: 0.85em;
    overflow: hidden;
    position: relative;
    text-align: center;
	border-radius: 0;
}

.form-field p {font-size: 0.84em; font-weight: 300; line-height: 1.7; padding: 1em 0 3em 0; }

.family-site {color: #343a40; background: #EAECEF; border: 1px solid #454d55; width: 140px; height: 30px; font-family:'TJJoyofsingingL'; font-weight: 400; padding-left: 10px; border-radius: 0;  }


/* 질러팅 다운안내 팝업 */
.pop_guide {  width: 1030px; margin: 70px auto; background: #fff; padding: 70px 50px; border-radius: 40px; color: #343a40;}
.pop_guide img.width100 {width: 100%;}
.pop_guide h2 { color: #343a40; margin-bottom: 80px;}
.pop_guide p {font-size: 1.2em; font-weight: 300; margin-bottom: 200px; letter-spacing:0.03em; line-height: 1.8}
.pop_guide p:last-child {margin-bottom: 70px;}


.btn_down {
	border: 1px solid #222; 
	padding: 14px 30px; 
	margin: 5em 0 0;
	text-align: center;
	cursor: pointer;
} 
.btn_down i .i-chevron-right{
	vertical-align:bottom
}