@charset "utf-8";


#club_main{width: 100%; position: relative; padding-left: 350px;}
#club_main:after{width: 100%; position: absolute; height:622px; display:block; content:""; left:0; bottom:0; z-index:-1;}

/*¸ÞÀλó´Ü*/
.club_top{width:100%; height:250px; overflow:hidden; position:relative; padding:35px 0;}
.club_top img{position:absolute; min-width:100%; left:49.99%; top:0; transform:translateX(-50%);}
.club_top .top_in{width:1100px; margin:0 auto; position:relative; text-align:right;}
.club_top .top_in a{display:inline-block; vertical-align:middle; min-width:85px; height:32px; font-size:17px; font-weight:500; text-align:center; border-radius:5px; padding:5px 10px;}
.club_top .top_in span.name{display:inline-block; vertical-align:middle; margin-right:10px; padding:1px 8px; font-weight:500;}
.club_top .top_in span.name span{font-weight:700;}
.club_top .go_login{background-color:#1e2145; color:#fff;}
.club_top .logout{background-color:#1e2145; color:#ff8d8d;}
.club_top .go_myteam{background-color:#313131;}

.main_in{width:1100px; margin:0 auto; padding:45px 0 180px 0;}


/*¿ì¸®Å¬·´Àº*/
.our_club{margin-top:20px; width:100%; border:2px solid #606060; position:relative; margin-bottom:60px;  padding:30px 10px 15px 30px;}
.our_club:before{width:30px; height:30px; display:block; content:""; position:absolute; top:-2px; left:-2px;}
.our_club:after{width:125px; height:30px; display:block; content:""; position:absolute; bottom:-2px; right:-2px;}
.our_club h1{font-weight:500; font-size:28px; padding:0 10px 0 50px; background:url(/club/images/main/our_club_icon.png) no-repeat; background-position:left 10px center; background-color:#fff; display:inline-block; z-index:1; position:absolute; top:-20px; left:30px;}
.our_club h1 span{font-weight:700;}
.our_club .oc_in{width:100%; height:186px; overflow-y:auto;}
.our_club .oc_in::-webkit-scrollbar{width:4px; height:100%; background-color:#000; border-radius:5px;}
.our_club .oc_in::-webkit-scrollbar-thumb{width:4px; border-radius:5px;}
.our_club .oc_in .oc_txt{width:100%; font-size:18px; line-height:1.4em; padding-right:20px;}
.our_club span.bg{display:block; content:""; position:absolute; z-index:1; right:30px; bottom:-20px;}


/*Ŭ·´¼Ò½Ä*/
.club_notice{font-size:0; margin-bottom:70px;}
.club_notice h1, .notice_list{display:inline-block; vertical-align:top;}
.club_notice h1{width:210px; font-size:30px; font-weight:500; padding-left:40px; background:url(/club/images/main/notice_icon.png) no-repeat; background-position:left center;}
.club_notice h1 span{font-weight:700;}
.club_notice h1 img{margin-top:-7px;}
.notice_list{width:calc(100% - 210px);}
.notice_list li{background:#303030; border-radius:100px; width:100%; margin-bottom:2px; overflow:hidden;}
.notice_list li:last-child{margin-bottom:0;}
.notice_list li a{display:block; width:100%; padding:20px 30px;}
.notice_list li span{display:inline-block; vertical-align:middle; font-size:18px;}
.notice_list li span.date{font-weight:600; width:110px;}
.notice_list li span.txt{width:calc(100% - 110px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff !important; font-weight:300;}
.notice_list li.nothing{background:linear-gradient(45deg, #222, #494949); padding:25px 15px; text-align:center; width:100%; border-radius:100px; font-size:18px; font-weight:500; display: block !important; height:auto;}


/*Ŭ·´ÀÏÁ¤*/
.club_plan{font-size:0; margin-bottom:70px;}
.club_plan h1, .plan_list{display:inline-block; vertical-align:top;}
.club_plan h1{width:210px; font-size:30px; font-weight:500; padding-left:40px; background:url(/club/images/main/plan_icon.png) no-repeat; background-position:left center;}
.club_plan h1 span{font-weight:700;}
.club_plan h1 img{margin-top:-7px;}
.plan_list{width:calc(100% - 210px);}
.plan_list li{display:inline-block; vertical-align:top; border-radius:30px; width:calc((100% - 20px)/3); margin-right:10px; overflow:hidden; height:135px; position:relative; background:#fff;}
.plan_list li:before{display:block; content:""; position:absolute; width:83px; height:100%; background:#303030; left:0; top:0;}
.plan_list li:last-child{margin-right:0;}
.plan_list li a{display:block; width:100%; height:100%; border:3px solid #303030; border-radius:30px; position:relative;}
.plan_list li a:hover{background:#303030;}
.plan_list li a:before{display:inline-block; width:0; height:100%; content:""; position:relative; vertical-align:middle;}
.plan_list li a > div{display:inline-block; vertical-align:middle; position:relative;}
.plan_list li a > div.date{background:#303030; font-weight:600; font-size:25px; text-align:center; width:80px; line-height:0.8em;}
.plan_list li a > div.date > span{display:block;}
.plan_list li a > div.date > span.time{font-size:17px; color:#fff; font-weight:400; margin-top:8px;}
.plan_list li a > div.date > span.time img{margin-top:-2px;}
.plan_list li a > div.txt{width:calc(100% - 80px); font-size:18px; word-break:keep-all; padding:15px;}
.plan_list li a:hover > div.txt{color:#fff;}
.plan_list li.nothing{background:linear-gradient(45deg, #222, #494949); padding:25px 15px; text-align:center; width:100%; border-radius:100px; font-size:18px; font-weight:500; display: block !important; height:auto;}
.plan_list li.nothing:before{display:none;}


/*Ŭ·´»çÁø*/
.club_photo h1{font-size:30px; font-weight:500; padding-left:40px; background:url(/club/images/main/photo_icon.png) no-repeat; background-position:left center;}
.club_photo h1 span{font-weight:700;}
.club_photo h1 img{margin-top:-7px;}

.photo_list{width:100%; font-size:0; margin-top:18px;}
.photo_list li{display:inline-block; vertical-align:top; width:calc((100% - 40px)/3); margin-right:20px; overflow:hidden; position:relative; text-align:center;}
.photo_list li:last-child{margin-right:0;}
.photo_list li a{display:block; width:100%; height:100%; border-radius:30px; }
.photo_list li a .imgbox{display:block; width:100%; padding-top:60.85%; border-radius:30px; background:#ddd; margin-bottom:15px; position:relative; overflow:hidden;}
.photo_list li a .imgbox img{width:110%; left:50%; top:50%; position:absolute; transform:translate(-50%, -50%); transition:0.3s all ease; min-height:100%;}
.photo_list li a:hover .imgbox img{width:120%;}
.photo_list li a .txt{font-weight:500; font-size:20px;}
.photo_list li.nothing{background:linear-gradient(45deg, #222, #494949); padding:25px 15px; text-align:center; width:100%; border-radius:100px; font-size:18px; font-weight:500; display: block !important; height:auto;}

/*Ŭ·´°¡ÀÔ*/
.club_join{width:550px; border:3px solid #151c2f; border-radius:30px; margin:0 auto; text-align:center; position:fixed; overflow:hidden; padding-bottom:20px; background:#fff; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:10;}
.club_join .club_join_top{width:100%; background:#000; text-align:center; padding:15px 0; margin-bottom:20px;}
.club_join h2{font-size:22px; font-weight:700; color:#fff;}
.club_join a img{position:absolute; top:20px; right:35px;}
.club_join_box{font-size:0;}
.club_join_box div.input_box{width:350px; margin:0 auto;}
.club_join_box .input_box ul li{margin-bottom:7px; text-align:left;}
.club_join_box .input_box ul li label{display:inline-block; vertical-align:middle; font-weight:600; color:#000; font-size:18px; width:100px;}
.club_join_box .input_box ul li input{display:inline-block; vertical-align:middle; border:1px solid #333; border-radius:50px; font-family:"Pretendard"; font-weight:400; font-size:17px; padding:11px 15px; width:calc(100% - 100px); background:#f6f9ff;}
.club_join_box .input_box ul li input::placeholder{font-weight:600; font-size:16px; color:#666;}
.club_join_box .input_box ul li select{display:inline-block;vertical-align:middle;border:1px solid #333;border-radius:50px;font-family:"Pretendard";font-weight:400;font-size:17px;padding: 9px 15px;width:130px;background:#fff;height:44px; appearance: none; background: url(/images/board/select_arr.png) no-repeat; background-position: right 10px center;}

.join_exp{width:430px; padding:10px 25px; background:#e5e5e5; border-radius:20px; margin:10px auto; font-size:15px;}
.join_exp ul li{position:relative; display:inline-block; margin-right:5px;}
.join_exp ul li:first-child{padding-left:11px;}
.join_exp ul li:first-child:before{position:absolute; display:block; content:""; background:url(/club/images/contents/join_exp_icon.png)left top no-repeat; width:15px; height:14px; left:-7px; top:1px;}

.club_join p{color:#f5003f; font-size:16px; font-weight:500;}

.cj_btn{display:block; margin:10px auto 0 auto; border-radius:60px; width:200px; max-width:100%; font-family:"Pretendard"; font-weight:500; text-align:center; background-color:#000; padding:12px 15px; font-size:20px; color:#ccff00;}
.cj_btn:hover{background-color:#bbe806; color:#000; font-weight:600;}

/*Ŭ·´Å»Åð*/
.club_delete{width:550px; border:3px solid #151c2f; border-radius:30px; margin:0 auto; text-align:center; position:fixed; overflow:hidden; padding-bottom:20px; background:#fff; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:10;}
.club_delete .club_delete_top{width:100%; background:#000; text-align:center; padding:15px 0; margin-bottom:20px;}
.club_delete h2{font-size:22px; font-weight:700; color:#fff;}
.club_delete a img{position:absolute; top:20px; right:35px;}
.club_delete_box{font-size:0;}
.club_delete_box div.input_box{width:85%; margin:0 auto;}
.club_delete_box .input_box ul li{margin-bottom:7px; text-align:left;}
.club_delete_box .input_box ul li label{display:inline-block; vertical-align:middle; font-weight:600; color:#000; font-size:18px; width:75px;}
.club_delete_box .input_box ul li input{display:inline-block; vertical-align:middle; border:1px solid #333; border-radius:50px; font-family:"Pretendard"; font-weight:400; font-size:17px; padding:11px 15px; width:calc(100% - 75px); background:#fff;}
.club_delete_box .input_box ul li input::placeholder{font-weight:600; font-size:16px; color:#666;}
.club_delete_box .input_box ul li select{display:inline-block;vertical-align:middle;border:1px solid #333;border-radius:50px;font-family:"Pretendard";font-weight:400;font-size:17px;padding: 9px 15px;width:130px;background:#fff;height:44px; appearance: none; background: url(/images/board/select_arr.png) no-repeat; background-position: right 10px center;}

.delete_exp{width:400px; padding:10px 25px; background:#fff3f7; border-radius:20px; margin:10px auto; font-size:15px;}
.delete_exp ul li{position:relative; padding-left:11px; display:inline-block; margin-right:5px;}
.delete_exp ul li:before{position:absolute; display:block; content:""; background:url(/club/images/contents/join_exp_icon.png)left top no-repeat; width:15px; height:14px; left:-7px; top:1px;}

.club_delete p{color:#f5003f; font-size:16px; font-weight:500;}

.cd_btn{display:block; margin:10px auto 0 auto; border-radius:60px; width:200px; max-width:100%; font-family:"Pretendard"; font-weight:500; text-align:center; background-color:#000; padding:12px 15px; font-size:19px; color:#ccff00;}
.cd_btn:hover{background-color:#bbe806; color:#000; font-weight:600;}


/*============================Å״ϽºÅ¬·´===================================*/

#wrap.tn #club_main:after{background:#f4f8e5;}
#wrap.tn .club_top .want_join{background:#bae900;}
#wrap.tn .club_top .top_in span.name{background-color:#ccff00;}
#wrap.tn .club_top .go_myteam{color:#bae900;}
#wrap.tn .our_club:before{border-top:2px solid #add800; border-left:2px solid #add800;}
#wrap.tn .our_club:after{border-bottom:2px solid #add800; border-right:2px solid #add800;}
#wrap.tn .our_club .oc_in::-webkit-scrollbar-thumb{background:#add800;}
#wrap.tn .our_club span.bg{width:66px; height:66px; background:url(/club/images/main/ourclub_tn.png) no-repeat;}
#wrap.tn .notice_list li span.date{color:#ccff00;}
#wrap.tn .notice_list li a:hover span.txt{color:#ccff00 !important;}
#wrap.tn .plan_list li a > div.date{color:#ccff00;}
#wrap.tn .photo_list li a:hover .txt{color:#005b0d;}
#wrap.tn .notice_list li.nothing{color:#ccff00;}
#wrap.tn .plan_list li.nothing{color:#ccff00;}
#wrap.tn .photo_list li.nothing{color:#ccff00;}




/*============================¹èµå¹ÎÅÏŬ·´===================================*/

#wrap.bm #club_main:after{background:#e1fbfa;}
#wrap.bm .club_top .want_join{background:#01fffd;}
#wrap.bm .club_top .top_in span.name{background-color:#00fefc;}
#wrap.bm .club_top .go_myteam{color:#01fffd;}
#wrap.bm .our_club:before{border-top:2px solid #01fffd; border-left:2px solid #01fffd;}
#wrap.bm .our_club:after{border-bottom:2px solid #01fffd; border-right:2px solid #01fffd;}
#wrap.bm .our_club .oc_in::-webkit-scrollbar-thumb{background:#01fffd;}
#wrap.bm .our_club span.bg{width:60px; height:68px; background:url(/club/images/main/ourclub_bm.png) no-repeat;}
#wrap.bm .notice_list li span.date{color:#01fffd;}
#wrap.bm .notice_list li a:hover span.txt{color:#01fffd !important;}
#wrap.bm .plan_list li a > div.date{color:#01fffd;}
#wrap.bm .photo_list li a:hover .txt{color:#00fefc;}
#wrap.bm .notice_list li.nothing{color:#00fefc;}
#wrap.bm .plan_list li.nothing{color:#00fefc;}
#wrap.bm .photo_list li.nothing{color:#00fefc;}




/*============================Ź±¸Å¬·´===================================*/

#wrap.pp #club_main:after{background:#fff2dd;}
#wrap.pp .club_top .want_join{background:#ff9c00;}
#wrap.pp .club_top .top_in span.name{background-color:#ff9c00;}
#wrap.pp .club_top .go_myteam{color:#ff9c00;}
#wrap.pp .our_club:before{border-top:2px solid #ff9c00; border-left:2px solid #ff9c00;}
#wrap.pp .our_club:after{border-bottom:2px solid #ff9c00; border-right:2px solid #ff9c00;}
#wrap.pp .our_club .oc_in::-webkit-scrollbar-thumb{background:#ff9c00;}
#wrap.pp .our_club span.bg{width:71px; height:58px; background:url(/club/images/main/ourclub_pp.png) no-repeat;}
#wrap.pp .notice_list li span.date{color:#ff9c00;}
#wrap.pp .notice_list li a:hover span.txt{color:#ff9c00 !important;}
#wrap.pp .plan_list li a > div.date{color:#ff9c00;}
#wrap.pp .photo_list li a:hover .txt{color:#7d2600;}
#wrap.pp .notice_list li.nothing{color:#ff9c00;}
#wrap.pp .plan_list li.nothing{color:#ff9c00;}
#wrap.pp .photo_list li.nothing{color:#ff9c00;}



/*============================¸¶¶óÅæŬ·´===================================*/

#wrap.mt #club_main:after{background:#ffe9f3;}
#wrap.mt .club_top .want_join{background:#ff0090;}
#wrap.mt .club_top .top_in span.name{background-color:#ff97de;}
#wrap.mt .club_top .go_myteam{color:#ff0090;}
#wrap.mt .our_club:before{border-top:2px solid #ff0090; border-left:2px solid #ff0090;}
#wrap.mt .our_club:after{border-bottom:2px solid #ff0090; border-right:2px solid #ff0090;}
#wrap.mt .our_club .oc_in::-webkit-scrollbar-thumb{background:#ff0090;}
#wrap.mt .our_club span.bg{width:56px; height:45px; background:url(/club/images/main/ourclub_mt.png) no-repeat; bottom: -18px;}
#wrap.mt .notice_list li span.date{color:#ffaddb;}
#wrap.mt .notice_list li a:hover span.txt{color:#ffaddb !important;}
#wrap.mt .plan_list li a > div.date{color:#ffaddb;}
#wrap.mt .photo_list li a:hover .txt{color:#ff0090;}
#wrap.mt .notice_list li.nothing{color:#ffaddb;}
#wrap.mt .plan_list li.nothing{color:#ffaddb;}
#wrap.mt .photo_list li.nothing{color:#ffaddb;}



/*============================µî»êŬ·´===================================*/

#wrap.ds #club_main:after{background:#ddfff1;}
#wrap.ds .club_top .want_join{background:#0aeba9;}
#wrap.ds .club_top .top_in span.name{background-color:#0aeba9;}
#wrap.ds .club_top .go_myteam{color:#0aeba9;}
#wrap.ds .our_club:before{border-top:2px solid #0aeba9; border-left:2px solid #0aeba9;}
#wrap.ds .our_club:after{border-bottom:2px solid #0aeba9; border-right:2px solid #0aeba9;}
#wrap.ds .our_club .oc_in::-webkit-scrollbar-thumb{background:#0aeba9;}
#wrap.ds .our_club span.bg{width:54px; height:39px; background:url(/club/images/main/ourclub_cl.png) no-repeat; bottom: -15px;}
#wrap.ds .notice_list li span.date{color:#0aeba9;}
#wrap.ds .notice_list li a:hover span.txt{color:#0aeba9 !important;}
#wrap.ds .plan_list li a > div.date{color:#0aeba9;}
#wrap.ds .photo_list li a:hover .txt{color:#00815b;}
#wrap.ds .notice_list li.nothing{color:#0aeba9;}
#wrap.ds .plan_list li.nothing{color:#0aeba9;}
#wrap.ds .photo_list li.nothing{color:#0aeba9;}



/*============================³¬½ÃŬ·´===================================*/

#wrap.ns #club_main:after{background:#ddeeff;}
#wrap.ns .club_top .want_join{background:#48afff;}
#wrap.ns .club_top .top_in span.name{background-color:#74c2ff;}
#wrap.ns .club_top .go_myteam{color:#74c2ff;}
#wrap.ns .our_club:before{border-top:2px solid #48afff; border-left:2px solid #48afff;}
#wrap.ns .our_club:after{border-bottom:2px solid #48afff; border-right:2px solid #48afff;}
#wrap.ns .our_club .oc_in::-webkit-scrollbar-thumb{background:#48afff;}
#wrap.ns .our_club span.bg{width:60px; height:42px; background:url(/club/images/main/ourclub_fs.png) no-repeat; bottom: -18px;}
#wrap.ns .notice_list li span.date{color:#74c2ff;}
#wrap.ns .notice_list li a:hover span.txt{color:#74c2ff !important;}
#wrap.ns .plan_list li a > div.date{color:#74c2ff;}
#wrap.ns .photo_list li a:hover .txt{color:#0568b5;}
#wrap.ns .notice_list li.nothing{color:#74c2ff;}
#wrap.ns .plan_list li.nothing{color:#74c2ff;}
#wrap.ns .photo_list li.nothing{color:#74c2ff;}





@media screen and (max-width:1500px){



#club_main{padding-left: 280px;}

}



@media screen and (max-width:1430px){

#club_main:after{height:520px;}

/*¸ÞÀλó´Ü*/
.club_top{height:200px; padding:35px 15px;}
.club_top .top_in{width:100%;}

.main_in{width:100%; padding:30px 15px 100px 15px;}

/*¿ì¸® Ŭ·´Àº*/
.our_club{margin-bottom:45px;}

/*Ŭ·´¼Ò½Ä*/
.club_notice{margin-bottom:45px;}
.club_notice h1, .notice_list{display:block;}
.club_notice h1{width:100%; margin-bottom:20px;}
.notice_list{width:100%;}


/*Ŭ·´ÀÏÁ¤*/
.club_plan{margin-bottom:45px;}
.club_plan h1, .plan_list{display:block;}
.club_plan h1{width:100%; margin-bottom:20px;}
.plan_list{width:100%;}



}




@media screen and (max-width:1100px){

#club_main{padding-left: 0;}

.club_top {height: 180px; padding: 60px 15px 15px 15px; 
}
.club_top .top_in{height:100%; padding-top:75px;}
.club_top .top_in a.go_myteam{display:none;}




}



@media screen and (max-width:850px){


/*Ŭ·´¼Ò½Ä*/
.notice_list li a{padding:18px 20px;}
.notice_list li span.date{width:100px;}
.notice_list li span.txt{width:calc(100% - 100px);}


/*Ŭ·´ÀÏÁ¤*/
.plan_list li{display:block; width:100%; margin-right:0; margin-bottom:10px; height:100px;}
.plan_list li:before{width:153px;}
.plan_list li:last-child{margin-bottom:0;}
.plan_list li a > div.date{width:150px; font-size:22px;}
.plan_list li a > div.date > span{display:inline-block;}
.plan_list li a > div.date > span.time{margin-top:7px; display:block;}
.plan_list li a > div.txt{width:calc(100% - 150px);}


/*Ŭ·´»çÁø*/
.photo_list li{width:calc((100% - 20px)/2);}
.photo_list li:nth-child(2){margin-right:0;}
.photo_list li:nth-child(3){display:none;}
.photo_list li a .txt{font-size:19px;}

}


@media screen and (max-width:630px){

/*Ŭ·´°¡ÀÔ*/
.club_join{width:90%;}
.club_join div.input_box{width:80%;}
.join_exp{width:90%;}
.club_join_box .input_box ul li label{font-size: 17px;}
.club_join_box .input_box ul li input{font-size: 16px;}
.club_join_box .input_box ul li select{font-size: 16px; height: 42px;}
.cj_btn {font-size: 19px;}

/*Ŭ·´Å»Åð*/
.club_delete{width:90%;}
.club_delete_box div.input_box{width:90%;}
.delete_exp{width:90%;}
.club_delete_box .input_box ul li label{font-size: 17px;}
.club_delete_box .input_box ul li input{font-size: 16px;}
.club_delete_box .input_box ul li select{font-size: 16px; height: 42px;}
.cd_btn {font-size: 18px;}
}



@media screen and (max-width:530px){

/*Ŭ·´ÀÏÁ¤*/
.plan_list li:before{width:133px;}
.plan_list li a > div.date{width:130px; font-size:20px;}
.plan_list li a > div.txt{width:calc(100% - 130px); padding:10px;}


/*Ŭ·´»çÁø*/
.photo_list li{width:100%; margin-right:0;}
.photo_list li:nth-child(2){display:none;}

}


@media screen and (max-width:440px){

/*¿ì¸® Ŭ·´Àº*/
.our_club h1 {left: 10px;}
.our_club {padding: 30px 10px 15px 15px;}

/*Ŭ·´°¡ÀÔ*/
.club_join{width: 95%; margin: 0 auto;}
.club_join div.input_box{width:92%;}
.club_join_box .input_box ul li select {width:110px;}

/*Ŭ·´Å»Åð*/
.club_delete{width:95%; margin: 0 auto;}
.club_delete_box div.input_box{width:92%;}
}