@charset "utf-8";
@import url( "layout.css" );

/* -----------------------------------------------------------------
 * 프로젝트: 한국음악협회
 * 파일명: main.css
 * 작업자: 유상민
 * 작업일: 2021. 03. 24 ~ 
/* --------------------------------------------------------------- */

/* ============================================
 * main_visual
/* ========================================== */

.mv_slide {height:580px; overflow:hidden;width:100%;min-width:1200px}
.mv_slide .swiper-wrapper:after {content:''; position:absolute; bottom:0px; right:0; width:20%; height:70px; background:#fff;}
.mv_slide .item {display:inline-block; width:100%; height:580px; overflow:hidden;}
.mv_slide .item a{display:block}
.mv_slide .item img {display:block; margin:0 auto; position:relative; left:50%; margin-left:-960px;width:1920px;height:580px}
.mv_slide .mv_paging {position:absolute; width:300px; height:70px; bottom:0; left:auto; right:0; z-index:1; background:#fff; text-align:center; line-height:72px; font-size:18px; font-weight:500; color:#000;}
.mv_slide .swiper-button-prev {position:absolute; top:-18px; left:auto; right:214px; width:56px; height:15px; background:url("/assets/images/main/mv_arrow.png") no-repeat 0 0;}
.mv_slide .swiper-button-next {position:absolute; top:-18px; right:30px; width:56px; height:15px; background:url("/assets/images/main/mv_arrow.png") no-repeat 0 -30px;}
.mv_slide .swiper-button-prev:hover {background:url("/assets/images/main/mv_arrow.png") no-repeat 0 -15px;}
.mv_slide .swiper-button-next:hover {background:url("/assets/images/main/mv_arrow.png") no-repeat 0 -45px;}


/* ============================================
 * section 공통
/* ========================================== */

.section {width:1400px; min-width:1400px; height:425px; margin-top:100px; letter-spacing:-0.025em;}
/* .section:last-child {margin-bottom:100px;} */
.section:after, .section .tab:after {content:''; display:block; clear:both;}
.section .tab {height:60px;}
.section .tab li {float:left; font-size:25px; font-weight:500; margin-top:10px; color:#000; cursor:pointer; position:relative;}
.section .tab li:after {content:''; display:inline-block; width:4px; height:4px; border-radius:50%; background:#656d78; margin:0 40px; margin-bottom:7px;} /* 공지사항 옆 Dot */
.section .tab li:last-child:after {content:none;}
.section .more {position:absolute; top:0; right:0; display:inline-block; width:42px; height:42px; background:url("/assets/images/main/main_more.png") no-repeat 0 0; font-size:0; color:transparent; z-index:1;}
.section .more_on {z-index:2;}
.section a[href^="http://"], .section a[href^="https://"] {padding-right:0;}
.section a[href^="http://"]:after, .section a[href^="https://"]:after {content:none;} /* a태그 옆에 링크 이미지 생기는 것 방지 */

/* ============================================
 * section1
/* ========================================== */

.sec1>div {float:left; width:650px; position:relative;}
.sec1 .tab li.tab_on:before {content:''; position:absolute; bottom:-3px; display:inline-block; margin:0 auto; width:53%; height:10px;}
.sec1 .tab li.tab_on:last-child:before {width:100%;}

/* tab 클릭했을 시 색변경&밑줄 */
.sec1 .sec1_left {margin-right:100px;}
.sec1 .sec1_left .tab li.tab_on {color:#c01f2d;}
.sec1 .sec1_left .tab li.tab_on:before {background:rgba(192,31,45,.26);}
.sec1 .sec1_right .tab li.tab_on {color:#0475f4;}
.sec1 .sec1_right .tab li.tab_on:before {background:rgba(4,117,244,.26);}

/* tab 클릭했을 시 해당 컨텐츠 등장! */
.sec1 .main_box {position:relative; width:100%; height:365px; border-top:2px solid #000; border-bottom:1px solid #c7c7c7;}
.sec1 .main_box>* {position:absolute; left:0; top:0; width:100%; /* display:none; */ z-index:0;}
.sec1 .box_on {/* display:block!important;  */z-index:10;background:#fff; height:100%;}

/* 공지사항·보도자료 */
.sec1_left .more:hover {background-position:0 -42px;}
.sec1_left .main_box ul li {width:100%; color:#191919; border-bottom:1px dashed rgba(0,0,0,.13); height:60px;}
.sec1_left .main_box ul li:last-child {border-bottom:none;}
.sec1_left .main_box ul li a {display:inline-block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:21px 0; height:100%; line-height:1.5;}
.sec1_left .main_box ul li a:hover {background:#faf4f5; color:#b32733;}
.sec1_left .main_box ul li a span {margin-right:25px;}
.sec1_left .main_box ul li a img {margin-right:8px;}
.sec1_left .main_box ul li a p:hover {display:inline-block;}

/* 지부지회·산하단체 */
.sec1_right .more:hover {background-position:0 -84px;}
.sec1_right .main_box {border-bottom:1px solid #c7c7c7;}
.sec1_right .main_box .sec1_slide {height:362px; background:#fff; overflow:hidden;}
.sec1_right .main_box .sec1_slide .swiper-slide {height:300px; margin-top:15px; background:#fff;}
.sec1_right .main_box .sec1_slide .swiper-slide:after {content:''; display:block; clear:both;}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_img {float:left;}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_img img {width:210px; height:306px; padding:5px; border:1px solid #ccc; object-fit:cover;}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_txt {float:right; width:400px; margin-left:40px; margin-top:30px;}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_txt strong {font-size:18px; color:#243141; font-weight:500; margin-bottom:35px; word-break:keep-all; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:3em;}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_txt ul li {font-size:14px; color:#657588; font-weight:300; margin:10px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_txt a {display:inline-block; width:180px; height:45px; background:#e8ecf3; border-radius:22.5px; text-align:center; line-height:45px; margin-top:20px;}
.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_txt a:hover {background:#0475f4; color:#fff;}
.sec1_right .main_box .sec1_slide .swiper-pagination {background:#fff;}
.sec1_right .main_box .sec1_slide .swiper-pagination .swiper-pagination-bullet {margin:0 6px; width:10px; height:10px; background-color:#aab2bd; border-radius:10px; box-sizing:border-box; opacity:1; transition:all .5s ease-in-out;}
.sec1_right .main_box .sec1_slide .swiper-pagination.swiper-pagination-bullets {bottom:15px;}
.sec1_right .main_box .sec1_slide .swiper-pagination .swiper-pagination-bullet-active {padding:0 20px;background-color:#0475f4;}

/* ============================================
 * section2
/* ========================================== */

.sec2_left .tab li, .sec2_center .tab li {cursor:auto;}
.sec2_left {float:left; width:495px; position:relative; margin-right:65px;}
.sec2_center {float:left; width:450px; position:relative; margin-right:40px;}
.sec2_right {float:left; width:calc(100% - 1050px); position:relative;}

/* 연주회 소식 */
.sec2_left .more:hover {background-position:0 -42px;}
.sec2_left .main_box {border:1px solid #c7c7c7; border-top:2px solid #000;}
.sec2_left .main_box .sec2_slide {height:362px; background:#fff; overflow:hidden;}
.sec2_left .main_box .sec2_slide .swiper-slide {padding:0 30px; margin-top:30px;}
.sec2_left .main_box .sec2_slide .swiper-slide:after {content:''; display:block; clear:both;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_img {float:left;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_img img {width:185px; height:265px; padding:5px; border:1px solid #ccc; object-fit:cover;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt {float:right; width:calc(100% - 210px); margin-top:10px;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt strong {font-size:18px; color:#243141; font-weight:500; margin-bottom:30px; word-break:keep-all; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; height:3.6em; display:inline-block;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt ul {}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt p {font-size:14px; color:#657588; font-weight:300; line-height:1.5; height:6em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt a {display:inline-block; width:180px; height:45px; background:#e8ecf3; border-radius:22.5px; text-align:center; line-height:45px; margin-top:30px;}
.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt a:hover {background:#c01f2d; color:#fff;}
.sec2_left .main_box .sec2_slide .swiper-pagination .swiper-pagination-bullet {margin:0 6px; width:10px; height:10px; background-color:#aab2bd; border-radius:10px; box-sizing:border-box; opacity:1; transition:all .5s ease-in-out;}
.sec2_left .main_box .sec2_slide .swiper-pagination.swiper-pagination-bullets {bottom:20px;}
.sec2_left .main_box .sec2_slide .swiper-pagination .swiper-pagination-bullet-active {padding:0 20px; background-color:#c01f2d;}
.sec2_left .main_box .sec2_slide .swiper-button-prev {position:absolute; top:50%; left:-26px; width:52px; height:52px; background:url("/assets/images/main/sec2_left_prev.png") no-repeat;}
.sec2_left .main_box .sec2_slide .swiper-button-next {position:absolute; top:50%; right:-26px; width:52px; height:52px; background:url("/assets/images/main/sec2_left_next.png") no-repeat;}

/* 예술계 소식 */
.sec2_center .more:hover {background-position:0 -84px;}
.sec2_center .main_box {border-bottom:1px solid #c7c7c7; border-top:2px solid #000; height:362px;}
.sec2_center .main_box ul li {width:100%; color:#191919; border-bottom: 1px dashed rgba(0,0,0,.13);}
.sec2_center .main_box ul li:last-child {/* border-bottom:none; */}
.sec2_center .main_box ul li a {display:inline-block; width:100%; height:100%; padding:19px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sec2_center .main_box ul li a:hover {color:#0854aa; background:#f0f7ff;}
.sec2_center .main_box ul li a:after {content:''; display:block; clear:both;}
.sec2_center .main_box ul li a .sec2_list_img {float:left; margin-top:8px;}
.sec2_center .main_box ul li a .sec2_list_img img {width:105px; height:152px; padding:1px; border:1px solid #ccc;}
.sec2_center .main_box ul li a .sec2_list_txt {position:relative; float:right; width:calc(100% - 130px); margin-top:5px;}
.sec2_center .main_box ul li a .sec2_list_txt strong {font-size:17px; font-weight:500; line-height:1.5; margin-bottom:40px; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:3em; white-space:normal;}
.sec2_center .main_box ul li a .sec2_list_txt:after {content:''; position:absolute; top:70px; left:0; width:35px; height:1px; background:#000; margin-bottom:20px; overflow:visible;}
.sec2_center .main_box ul li a .sec2_list_txt span {display:block; font-size:14px; color:#657588; line-height:1.5; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; height:4.6em; white-space:normal; font-weight:300;}
.sec2_center .main_box ul li a:hover .sec2_list_txt span {color:#628ebf;}

/* 음악예술 */
.sec2_right {position:relative; height:425px; background:#136bcf; }
.sec2_right:after {content:''; display:block; clear:both; background:url('/assets/images/main/white_bg.png') no-repeat; width:173px; height:425px; position:absolute; top:0; left:0}
.sec2_right .sec2_musicart_img {position:relative; margin:50px 0 35px 50px;}
.sec2_right .sec2_musicart_img img {width:200px; height:244px; position:relative; z-index:1; object-fit:cover; border:1px solid #000;}
.sec2_right .sec2_musicart_img:after {content:''; position:absolute; bottom:0; left:26px; width:200px; height:30px; transform:skew(-60deg); background:#073296; z-index:0;}
.sec2_right>img {display:inline-block; margin-left:55px;}
.sec2_right .more {background:url("/assets/images/main/main_more_white.png"); top:auto; bottom:40px; left:285px;}

.line_bg {position:relative;}
.line_bg .container {background:#fff;}
.line_bg:after {position:absolute; top:0; left:1050px; content:''; display:block; clear: both; background:#136bcf; width:calc(100% - 1050px); height:425px; z-index:-1;}


/* =================================================================
 * media Query
/* =============================================================== */

@media screen and (max-width: 1400px) {
	.sec2_left .main_box .sec2_slide .swiper-button-prev {position:absolute; top:50%; left:0; width:52px; height:52px; background:url("/assets/images/main/sec2_left_prev.png") no-repeat;}
}

@media screen and (max-width: 1300px) {
	.section {width:1200px; min-width:1200px;/*  margin:0 auto; */}
	.sec1 .sec1_left {float:left; position:relative; width:560px; margin-right:80px;}
	.sec1 .sec1_right {float:left; position:relative; width:560px;}
	.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_img img {width:190px;}
	.sec1_right .main_box .sec1_slide .swiper-slide .sec1_slide_txt {width:345px; margin-left:auto;}
	.sec2_left {float:left; width:425px; margin-right:55px;}
	.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_img img {width:160px;}
	.sec2_left .main_box .sec2_slide .swiper-slide .sec2_slide_txt {width:calc(100% - 180px);}
	.sec2_center {float:left; width:390px; margin-right:30px;}
	.sec2_right {float:left; width:calc(100% - 900px);}
	.sec2_right .more {top:auto; bottom:18%; left:255px;}
	.line_bg:after {left:900px; width:calc(100% - 900px); }
}