@charset "utf-8";
@import url( "base.css" );
@import url( "/module/board_v7/css/board.css" );
@import url( "board.css" );
@import url( "button.css" );
@import url( "reset.css" );
@import url( "modal.css" );
@import url( "member.css" );
/* =================================================================
 * 프로젝트: 한국음악협회
 * 파일명: layout.css
 * 작업자: 유상민
 * 작업일: 2020. 12. 21 ~ 
/* =============================================================== */


.txt_red{color:#f00!important}
.txt_blue{color:#159dd9!important}
.caution{font-size:14px;color:#e4004b}

/* --------------------------------------------
 * default
/* ------------------------------------------ */

/*감추기*/

.hidden,.noview {font-size:0!important; width:0!important; height:0!important; color:transparent !important; line-height:0!important; position:absolute; left:-1000px; top:0;    overflow:hidden; text-indent:-30000px;}


/* =================================================================
 * layout
/* =============================================================== */

* {font-family: 'S-CoreDream', sans-serif; box-sizing:border-box;}
a {text-decoration: none; color: inherit;}

.container {width:1400px; margin:0 auto; position:relative;}
.container:after,.ctt_wrap:after,.ctt:after {content:''; display:block; clear:both;}
.header_top .top_area:after, .header_top ul:after, .header:after, .header .gnb:after {content:''; display:block; clear:both;}


/* =================================================================
 * header
/* =============================================================== */

header {letter-spacing:-0.025em; width:100%; position:relative; z-index:100; margin-bottom:80px; min-width:1400px;}
.header_top {background:#f9f9f9; height:40px; border-bottom:1px solid #e7e7e7; font-weight:500;}
.header_top #favorite {display:block; float:left; width:100px; line-height:40px; font-size:13px; border:1px solid #e7e7e7; border-top:none; border-bottom:none; text-align:center; color:#708096;}
.header_top ul {float:right;}
.header_top ul li {float:left; border-left:1px solid #e7e7e7; width:140px; text-align:center;}
.header_top ul li:last-child {border-right:1px solid #e7e7e7;}
.header_top ul li a {color:#1b3854; font-size:13px; display:inline-block; width:100%; line-height:40px; font-weight:500;}
.header {width:100%; height:80px; position:fixed; top:40px; left:0; background:#fff;/*  transition: height 0.85s cubic-bezier(0.770, 0.000, 0.175, 1.000), top .5s;  */overflow:hidden;}
.header_top a {transition:background 0.5s ease; -moz-transition:background 0.5s ease; -webkit-transition:background 0.5s ease; -o-transition:background 0.5s ease;}
.header_top a:hover {background:rgba(0,0,0,.04);}

.header h1 {float:left; margin-left:10px; margin-top:24px;}
.header .gnb {margin-left:21.4286%;}
.header .gnb>li {float:left; margin:0px; height:80px;}
.header .gnb>li>a {position:relative; display: inline-block; font-size:20px; width:100%; height:80px; line-height:80px; padding:0 45px; color:#42454c; font-weight:500; text-align:center;}
.header .gnb>li>a:after {content:''; display:block; height:4px; width:0; position:absolute; top:0; left:0; color:#21234f; background:#21234f; opacity:0; transition:width 0.8s ease; -moz-transition:width 0.8s ease; -webkit-transition:width 0.8s ease; -o-transition:width 0.8s ease; }
.header .gnb>li>a.active:after {width:45%; left:50%; transform:translateX(-50%); opacity:1;}

.header .allmenu {position:absolute; top:40px; transform:translateY(-50%); right:0; background:#fff; display:inline-block; font-size:14px; color:#3d5068;}
.header .allmenu:before {content:"\e91c"; display:inline-block; position:absolute; top:6px; transform:translateY(-50%); right:50px; font-family:'xeicon'; font-size:30px; color:#000; width:40px;}
.header .allmenu:hover {color:#c3161d; transition:color 0.3s ease; -moz-transition:color 0.3s ease; -webkit-transition:color 0.3s ease; -o-transition:color 0.3s ease;}
.header .allmenu:hover:before {color:#c3161d; transition:color 0.3s ease; -moz-transition:color 0.3s ease; -webkit-transition:color 0.3s ease; -o-transition:color 0.3s ease;}

header.nav-down .header_top {position:relative; top:-40px;}
header.nav-down .header {position:fixed; top:0; box-shadow:0 10px 10px -10px rgba(0, 0, 0, 0.4); border-bottom:none;}
header a[href^="http://"], header a[href^="https://"] {padding-right:0;}
header a[href^="http://"]:after, header a[href^="https://"]:after {content:none;} /* a태그 옆에 링크 이미지 생기는 것 방지 */




/* =================================================================
 * header_active
/* =============================================================== */

header.active .header {height:300px; box-shadow:0 10px 10px -10px rgba(0, 0, 0, 0.4); border-bottom:none;}
header.active .header:before {content:''; display:block; width:100%; height:1px; background:#eaeaea; position:absolute; top:80px; left:0; transition:0.4s;}

.deps {width:100%; height:250px; position:absolute; top:80px; left:0; display:none;}
.deps:before {content:''; position:absolute; background:#21234f url("/assets/images/common/header_active_bg.png") 0  bottom no-repeat ; height:230px; width:50%; right:55%; margin-right:280px;}
.deps.active {display:block;}
.dep2_wrap {width:1400px; margin:0 auto; position:relative;}
.dep2_wrap:after {content:''; display:block; clear:both;}
.dep2_wrap h2 {float:left; font-size:40px; color:#fff; width:320px; margin-right:30px; text-align:right; padding-top:50px; padding-right:25px; font-weight:600; position:relative;}
.dep2_wrap ul {overflow:hidden; padding-top:30px; padding-left:30px; margin-top:1px; z-index:10; width:930px;}
.dep2_wrap ul:after {content:''; display:block; clear:both;}
.dep2_wrap ul li {float:left; text-align:center;}
.dep2_wrap ul li a {display:block; border:1px solid #ddd; width:180px; height:75px; vertical-align:middle; line-height:75px; margin-right:-1px; margin-top:-1px; padding:0; font-size:15px; -webkit-transition-delay:0.05s; transition-delay:0.05s; transition:0.3s ease; -moz-transition:0.3s ease; -webkit-transition:0.3s ease; -o-transition:0.3s ease; background:#fff; font-weight:500; color:#000;}
.dep2_wrap ul li a:hover{color:#fff; background:#21234f; z-index:1; border:1px solid #21234f;}

/* =================================================================
 * allmenu
/* =============================================================== */

.allmenu_mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(33,35,79,.97); z-index:100;}
.allmenu_wrap {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.allmenu_wrap h2 {font-size:35px; font-weight:600; color:#fff; padding:50px; border-bottom:3px solid #fff; margin:50px 30px;}
.allmenu_wrap .allmenu_gnb {width:1200px; margin:0 auto;}
.allmenu_wrap .allmenu_gnb>li {float:left; width:20%; padding:0 15px;}
.allmenu_wrap .allmenu_gnb>li>a {display:block; font-size:22px; font-weight:500; color:#fff; padding:15px 0; border:1px solid #fff; text-align:center; transition: color .4s, background .4s, border .4s;}
.allmenu_wrap .allmenu_gnb>li>a:hover {color:#1b3854; border:1px solid #fff; background:#fff;}
.allmenu_wrap .allmenu_gnb .allmenu_dep2 {width:100%;}
.allmenu_wrap .allmenu_gnb .allmenu_dep2 li {padding: 15px 0 0;}
.allmenu_wrap .allmenu_gnb .allmenu_dep2 li a {display:block; font-size:16px; color:#bbb; padding:12px 0; border:1px solid #bbb; text-align:center; transition: color .4s, background .4s, border .4s;}
.allmenu_wrap .allmenu_gnb .allmenu_dep2 li a:hover {color:#1b3854; border:1px solid #eee; background:#eee;}
.allmenu_title {position:relative;}
.allmenu_wrap .allmenu_close {position:absolute; top:50%; right:30px; transform:translateY(-50%);}
.allmenu_wrap .allmenu_close i {font-family:'xeicon'; font-size:50px; color:#fff; cursor:pointer;}


/* =================================================================
 * footer
/* =============================================================== */

/* 배너 */
footer {width:100%; min-width:1400px; margin-top:100px;}
footer a[href^="http://"], footer a[href^="https://"] {padding-right:0;}
footer a[href^="http://"]:after, footer a[href^="https://"]:after {content:none;} /* a태그 옆에 링크 이미지 생기는 것 방지 */
.banner {width:100%; height:90px; padding-top:13px; background:#fff; border-top:1px solid #ccd1d9;}
.banner .banner_slide {width:85.7143%; height:65px; overflow:hidden; padding-right:5px;}
.banner .banner_slide .swiper-wrapper {}
.banner .banner_slide .swiper-wrapper .swiper-slide {border:1px solid #d2d2d2; background:#fff;}
.banner .banner_slide .swiper-wrapper .swiper-slide a {display:inline-block; height:65px; line-height:65px; width:100%; text-align:center;}
.banner .banner_slide .swiper-wrapper .swiper-slide a img {vertical-align:middle; object-fit:cover; overflow:hidden; width:160px;}
.banner .banner_slide .banner_control {position:absolute; top:0; right:0; width:calc(100% - 85.7143%); height:65px; background:#fff; border:1px solid #d2d2d2;}
.banner .banner_slide .banner_control i {position:absolute; font-size:24px; top:50%; transform:translateY(-50%); color:#646464; cursor:pointer;}
.banner .banner_slide .banner_control .xi-angle-left {left:20px;}
.banner .banner_slide .banner_control .xi-pause {left:55px;}
.banner .banner_slide .banner_control .xi-play {left:55px;}
.banner .banner_slide .banner_control .xi-angle-right {left:90px;}
.banner .banner_slide .banner_control a {color:transparent; font-size:0;}
.banner .banner_slide .banner_control a .xi-bars{display:inline-block; right:0; border-left:1px solid #d2d2d2; height:100%; padding:20px;}

/* 푸터 */
.footer {background:#eff1f5; height:160px; border-top:1px solid #ccd1d9; position:relative;}
.footer .container {width:1200px;}
.footer .footer_info {padding-top:40px;}
.footer .footer_info .footer_nav {padding-bottom:12px;}
.footer .footer_info .footer_nav:after {content:''; display:block; clear:both;}
.footer .footer_info .footer_nav li {float:left;}
.footer .footer_info .footer_nav li:after {content:''; display:inline-block; width:2px; height:2px; border-radius:50%; background:#444a54; margin:0 15px; margin-bottom:5px;}
.footer .footer_info .footer_nav li:last-child:after {content:none;}
.footer .footer_info .footer_nav li a {font-size:14px; font-weight:500; color:#444a54;}
.footer .footer_info .footer_nav li:nth-child(2) a {color:#136bcf;}
.footer .footer_info p {font-size:13px; color:#647082; font-weight:300; line-height:1.5;}
.footer .footer_info p a {color:#647082;}
.footer img {position:absolute; top:40px; right:230px;}
.footer select {position:absolute; top:50px; right:0; width:185px; height:40px; background:#b1b8c3 url("/assets/images/common/footer_family_arrow.png") no-repeat 85% 50%; color:#fff!important; font-size:13px; letter-spacing:0; font-weight:500; padding-left:40px; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.footer select::-ms-expand {display: none;}
.footer select option {background:#fff; color:#000;}
  

/* 탑버튼 */
.top_btn {position:fixed; bottom:50px; right:30px; width:56px; height:56px; background:#000; z-index:21; border-radius:50%; cursor:pointer; display:none; transition:background 0.2s ease; -moz-transition:background 0.2s ease; -webkit-transition:background 0.2s ease; -o-transition:background 0.2s ease;}
.top_btn.on {display:block;}
.top_btn:hover {background:#0475f4;}
.top_btn span:before {content:"\e944"; font-family:'xeicon'; font-size:16px; color:#fff; display:block; width:100%; text-align:center;}
.top_btn span {display:block; color:#fff; text-align:center; font-weight:600; font-size:12px; line-height:1.2; margin-top:10px;}

/* =================================================================
 * sub_layout
/* =============================================================== */

/* 사이드 네비 */
.sub {position:relative;}
.sub:after {content:''; display:block; clear:both;}
.sub .snb {float:left; width:250px; background:url("/assets/images/common/snb_bg.jpg") no-repeat; position:relative; z-index:2; margin-right:60px;}
.sub .snb h2 {font-size:30px; font-weight:500; color:#f2f2f5; padding:85px 0 95px 30px;}
.sub .snb ul {padding-bottom:100px; background:url("/assets/images/common/snb_bg.jpg") no-repeat 0 bottom;}
.sub .snb ul li {width:230px; margin-left:30px;}
.sub .snb ul li a {display:block; position:relative;padding:15px 0 15px 20px; font-weight:500; color:#c2c3e2; -webkit-transition-delay:0.3s; transition-delay:0.3s; transition:color 0.5s ease; -moz-transition:color 0.5s ease; -webkit-transition:color 0.5s ease; -o-transition:color 0.5s ease;}
.sub .snb ul li a:hover {color:#fff;}
.sub .snb ul li a::before {content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; width:8px; height:8px; border-radius:50%; background:#fff; opacity:0; -webkit-transition-delay:0.3s; transition-delay:0.3s; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease;}
.sub .snb ul li:hover a::before {opacity:1;}
.sub .snb ul li a.on {background:#c3161d; color:#fff;}
.sub .snb ul li:hover a.on::before {opacity:0;}
/* .sub a[href^="http://"], .sub a[href^="https://"] {padding-right:0;}
.sub a[href^="http://"]:after, .sub a[href^="https://"]:after {content:none;} */

/* 로컬 네비 */
.sub .lnb {position:absolute; width:100%; height:45px; background:#f9f9f9; z-index:1; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; min-width:1400px;}
.sub .lnb:after {content:''; display:block; clear:both;}
.sub .lnb_container {float:right; width:1090px; height:45px; padding-top:13px;}
.sub .lnb_container img {display:inline-block; width:18px;}
.sub .lnb_container i {display:inline-block; font-size:14px; margin-right:15px;}
.sub .lnb_container a , .sub .lnb_container span {display:inline-block; font-size:14px; margin-right:15px;}
.sub .lnb_container a:hover {color:#c3161d;}

/* 컨텐츠 */
.content {float:left; width:calc(100% - 310px);}
.content .sub_title {position:relative; width:100%; height:210px; border-bottom:1px solid #c3c4dd; margin-bottom:50px;}
.content .sub_title:after {content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:220px; height:5px; background:#2e3192;}
.content .sub_title h3 {font-size:40px; font-weight:500; width:100%; text-align:center; padding-top:100px;}

/* sns공유 프린트 */
.content .sub_title .content_util {position:absolute; top:100px; right:0;}
.content .sub_title .content_util .print {display:inline-block; width:45px; height:45px; border:1px solid #dddddd;}
.content .sub_title .content_util .print i {font-size:20px; display:inline-block; width:100%; text-align:center; line-height:45px; color:#949494;}
.content .sub_title .content_util .print:hover {background:#eff0ff;}
.content .sub_title .content_util .print:hover i {color:#21223f;}
.content .sub_title .content_util .print span {color:transparent; text-indent:-9999px; font-size:0;}
.content .sub_title .content_util .sns {display:inline-block; margin-right:-6px;}
.content .sub_title .content_util .sns a {border-right:none;}
.content .sub_title .content_util .sns>a.active+ul {display:block;}
.content .sub_title .content_util .sns ul {display:none; position:absolute; right:0; width:180px; border:1px solid #dddddd; padding:20px 5px 10px 12px; text-align:center; background:#fff;}
.content .sub_title .content_util .sns ul li {float:left; margin:0 6px;}
.content .sub_title .content_util .sns ul li a:hover {color:#1a4793; transition: .3s;}
.content .sub_title .content_util .sns ul li a span {font-size:11px;}
.content .sub_title .content_util .sns ul li a span:before {content:''; display:block; width:34px; height:34px; background:green url('/assets/images/common/sns_icon.png') 0 0 no-repeat; margin:0 auto;}
.content .sub_title .content_util .sns ul .facebook a span:before {background-position:-45px 0;}
.content .sub_title .content_util .sns ul .urlcopy a span:before {background-position:-90px 0;}


@media screen and (max-width: 1300px) {
	.container {width:1200px; margin:0 auto; position:relative;}
	header {min-width:1200px;}
	.header {min-width:1200px;}
	.header .gnb {margin-left:21.4286%;}
	.header .gnb>li>a {padding:0 40px;}
	.deps:before {right:50%;}
	.dep2_wrap {width:1200px; margin:0 auto; position:relative;}
	.dep2_wrap h2 {margin-right:30px; padding-right:45px;}
	.dep2_wrap ul {width:830px; padding-left:5px;}
	.dep2_wrap ul li a {width:160px; font-size:14px;}
	footer {min-width:1200px;}
	.banner .banner_slide .banner_control .xi-angle-left {left:10px;}
	.banner .banner_slide .banner_control .xi-pause {left:40px;}
	.banner .banner_slide .banner_control .xi-play {left:40px;}
	.banner .banner_slide .banner_control .xi-angle-right {left:70px;}
	.footer .container {width:1080px;}
	.footer .footer_info .footer_nav li:after {margin:0 10px;}
	.footer img {position:absolute; top:40px; right:190px;}
	.sub .snb {width:225px; margin-right:40px;}
	.sub .snb ul li {width:220px; margin-left:15px;}
	.sub .lnb {min-width:1200px;}
	.sub .lnb_container {width:935px;}
	.content {width:calc(100% - 265px);}
}