@charset "utf-8";


.doc{font-size: 16px;}
.box1{ width:1300px; max-width: 96%; margin:0 auto; position:relative } 
.mobile_only{display:none;}

/*header*/
#header{z-index: 200; position: fixed; top: 0; left: 0; width:100%; background-color: #fff;}
#header .va_wrap,
#header .h_wrap{height:var(--header_H);}
#header #logo{z-index:800;}
#header #logo img{display:block;}
#header .gnb_wrap{margin:0 auto;}
#header .gnb_wrap .gnb .depth1{margin:0 40px; position: relative;}
#header .gnb_wrap .gnb .depth1 > a{font-size: 1.125em; line-height: inherit; font-weight:500; color:#111; position: relative;}
#header .gnb_wrap .gnb .depth1 > ul{background:#fff; min-width: 160px; border: 1px solid #ddd; border-top:0; margin-top:-2px; transition:all .5s; position:absolute; left:50%; transform:translateX(-50%); max-height:0; overflow:hidden; opacity:0 }
#header .gnb_wrap .gnb .depth1 > ul:after{content: ""; position: absolute; left: 0; top: -2px; width: 100%; height:5px; background-color:var(--mainColor); transform: scaleX(0); transition: .3s;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a{display: block; text-align: center; color:#444; border-top: 1px dotted #ddd; font-weight:400; padding: 15px 10px;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a:hover{background: #f5f5f5;}
#header .gnb_wrap .gnb .depth1:hover ul{ max-height:500px; opacity:1 }
#header .gnb_wrap .gnb .depth1:hover > ul:after{transform: scaleX(1);}

/*검색*/
#header .hd_sch_btn{font-size:1.125em; color:#fff; cursor: pointer;}
#header .hd_sch_btn.on .xi:before{content:'\e921';}
#header .hd_sch_wr #hd_sch{border:1px solid rgba(255,255,255,.8); border-radius: 50px; position: relative; width:240px; overflow: hidden;}
#header .hd_sch_wr #hd_sch #sch_stx{border:0; background:transparent; color:#fff; width:100%; height: 45px; padding:5px 55px 5px 20px; font-size:.95em; box-sizing: border-box;}
#header .hd_sch_wr #hd_sch #sch_stx::placeholder{color:rgba(255,255,255,.8)!important;}
#header .hd_sch_wr #hd_sch button{border:0; background-color:var(--mainColor); width:38px; height: 38px; color:#fff; position: absolute; top:50%; transform: translateY(-50%); right:4px; border-radius: 50%; font-size:.9em;}

/*회원*/
#header .hd_login{margin-left:20px;}
#header .hd_login > li a{color:#555; margin-left:15px; font-weight: 300;}
#header .hd_login > li:first-child a{margin-left:0px;}
#header .hd_login > li .xi{vertical-align: baseline; margin-right:4px;}

/*전체메뉴버튼*/
#header .btn_gnb{position: relative; z-index: 10000; margin-left:25px; background-color: var(--mainColor); color:#fff; padding:10px 20px; border-radius: 50px;}
#header .btn_gnb .xi{margin-right:5px;}


.scroll #header{box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

/*탑버튼*/
.qk_list{position:fixed; bottom:15px; right:15px; z-index: 800;}
.qk_list > li a{display:block; width:50px; height: 50px; line-height: 50px; border-radius: 50%; font-size:1.25em; text-align: center; margin-top:3px; transition: .3s;}
.qk_list > li a:hover{box-shadow: 3px 3px 7px rgba(0,0,0,0.15);}
.qk_list > li.top_btn a{background-color:#333; color:#fff;}
.qk_list > li.kakao_btn a{background-color:#fae100; color:#3c1e1e;}
.qk_list > li.blog_btn a{background-color:#03c75a; color:#fff;}
.qk_list > li.ins_btn a{background-image: linear-gradient(120deg, #574dc0, #c93b99, #ff942a); color: #fff;}
.qk_list > li.you_btn a{background-color: #ff0033; color: #fff;} 

/*footer*/
#footer{background-color:#111; padding:60px 0 0; margin-top:8em;}
#footer .f_menu{margin-top:30px; text-align: right;}
#footer .f_menu > li{ margin-bottom: 10px;}
#footer .f_menu > li a{color:#fff; opacity: .7; text-align: right;}
#footer .f_menu > li a:hover{opacity: .9;}
#footer .f_info{margin-top:30px;}
#footer .f_info > li{color:#bbb; margin-right:60px; margin-bottom: 8px;}
#footer .f_info > li span{color:#888; margin-right:15px;}
#footer .f_site{width:180px; position: relative; margin-left:auto;}
#footer .f_site .f_site_btn{width:100%; color:#999; padding:10px 20px; cursor: pointer; border:1px solid #aaa; text-align: center;}
#footer .f_site .f_site_btn .xi{vertical-align: middle; margin-left:10px;}
#footer .f_site .f_site_list{width:100%; background-color: #444; padding:3px 10px; max-height: 150px; overflow-y: scroll; position: absolute; top:60px; left: 0; display: none; z-index: 5;}
#footer .f_site .f_site_list.on{display:block;}
#footer .f_site .f_site_list > li a{ color:#bbb; padding:10px 0; border-bottom:1px dotted #888; display:block; font-size:.938em;}
#footer .f_site .f_site_list > li a:hover{ color:#eee;}
#footer .f_site .f_site_list > li:last-child a{border-bottom:none;}
#footer .f_site .f_site_list::-webkit-scrollbar{width:3px;}
#footer .f_site .f_site_list::-webkit-scrollbar-thumb{background-color: #999; border-radius: 5px;}
#footer .f_site .f_site_list::-webkit-scrollbar-track{}
#footer .f_copy{font-size:.875em; color:#fff; opacity: .4; margin-top:70px; letter-spacing: 0; font-weight: 200; text-align: center; border-top:1px solid rgba(255,255,255,.2); padding:20px 0; text-transform: uppercase}
.main #footer{margin-top:0;}

/*서브 비주얼*/
.sub_v_wrap{position: relative;}
#sub_visual{height:430px; position: relative; overflow: hidden;}
#sub_visual .bgfix{position:absolute; top: 0; left:0; width:100%; height: 100%; transform: scale(1.15); transition-timing-function: ease-in-out; transition: 1s;}
#sub_visual .sub_v_tit{ font-weight: 700; text-align:center; font-size:3.625em; color:#fff; position: relative; z-index: 10; margin-right:3em; opacity:0; transition:1s;}
.load #sub_visual .bgfix{transform: scale(1);}
.load #sub_visual .sub_v_tit{margin-right:0; opacity:1}

#sub_visual.sub10 .bgfix{background-image:url(../img/sub/sub_v_01.jpg);}
#sub_visual.sub20 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub30 .bgfix{background-image:url(../img/sub/sub_v_03.jpg);}
#sub_visual.sub40 .bgfix{background-image:url(../img/sub/sub_v_04.jpg);} 
#sub_visual.sub50 .bgfix{background-image:url(../img/sub/sub_v_05.jpg);}

/*snb*/
#snb { position: absolute; bottom:4em; left:50%; transform: translateX(-50%); z-index: 10; opacity: 0; transition: 1.5s; width:96%;}
#snb .snb_list .sdp1 a{display:block; width:55px; height: 55px; line-height: 55px; border-radius: 50%; text-align:center; background-color:var(--mainColor); color:#fff; font-size:1.125em;}
#snb .snb_list .sdp2,
#snb .snb_list .sdp3,
#snb .snb_list .last{position: relative; width:250px; border-bottom:1px solid rgba(255,255,255,.3);padding:15px 20px; margin-left:20px; cursor: pointer; box-sizing: border-box;}
#snb .snb_list .last{cursor: default;}
#snb .snb_list .sdp_tt{ color:#fff; font-size:1.125em; font-weight: 500; padding-right:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#snb .snb_list .sdp_tt:before{content:'\e943'; font-family: 'xeicon'; position: absolute; top: 50%; right:20px; transform: translateY(-50%); font-size:.938em;}
#snb .snb_list .last .sdp_tt:before{display:none;}
#snb .snb_list .sdp_list_wrap{ max-height: 0px; position: absolute; top: 75px; left: 0;  width: 100%;  background: #fff; border-radius: 20px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); z-index: 10; transition: .3s; transition-timing-function: ease-in-out; opacity: 0; overflow: hidden;}
#snb .snb_list .Aon .sdp_list_wrap{ max-height: 1000px; opacity: 1;}
#snb .snb_list .sdp_list{ padding: 25px; }
#snb .snb_list .sdp_list > li{margin-bottom:7px;}
#snb .snb_list .sdp_list > li:last-child{margin-bottom:0;}
#snb .snb_list .sdp_list > li a{color:#777; font-size:1.05em;}
#snb .snb_list .sdp_list > li.on a{color:var(--mainColor); font-weight: 500;}
.load #snb{ opacity: 1;}

/*컨텐츠 페이지*/
.ctt_admin{display:none;}/*관리자 내용수정 버튼*/
#ctt header{display:none;}/*컨텐츠 페이지 타이틀 header*/

/*컨텐츠 타이틀*/
.container_title{font-weight: 200; font-size: 2.125em; padding-top: 35px; margin: 55px 0; text-align: center; position: relative;}
.container_title:before{content:''; width:1px; height: 26px; visibility: hidden; transition: .8s; transition-timing-function: ease-in-out; transform: scaleY(0); transform-origin: left top; background: #222; position: absolute; top: 0; left: 50%;}
.load .container_title:before{transform: scaleY(1); visibility: visible;} 

/*개인정보&이용약관*/
.agree_box{ border:1px solid #ddd; background:#f9f9f9; border-radius:5px}
.agree_box .in_con{  padding:2em; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .in_con .agree_wrap{ font-size: .938em;}
.agree_box .in_con .agree_wrap span{ display: block;}


/*=================================================================main============================================================*/

/*메인 비주얼*/
.mainSlider{position:relative;}
.mainSlider .el{ height:100vh; position:relative; overflow:hidden}
.mainSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.2,1.2); transition-delay:1s}
.mainSlider .slogan{ position:absolute; top:50%; left:50%; transform: translate(-50%, -60%); color:#fff;}
.mainSlider .slogan .t1{ font-size:3.625em; display:block; transform:translateY(1em); font-weight: 800; opacity:0; margin-bottom: 5px; line-height: 1.2;}
.mainSlider .slogan .t2{ font-size:1.5em; font-weight: 300; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:40px;}
.mainSlider .el.swiper-slide-active .bg{ transform:scale(1); transition:2s; transition-delay:0; transition-timing-function:ease-in}
.mainSlider .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.mainSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.mainSlider .mainSlider-pagination{ position: absolute; left:50%; bottom:3em; transform: translateX(-50%); z-index: 100;}
.mainSlider .mainSlider-pagination .swiper-pagination-bullet{width:120px; height:auto; margin: 0 20px 0 0; border-radius: 0; opacity: .4; background:transparent; color:#fff; border-bottom:2px solid #fff; padding-bottom:5px;}
.mainSlider .mainSlider-pagination .swiper-pagination-bullet-active{opacity: 1;}
.scroll_wrap{position: absolute; bottom: 0; left:0;width:100%; z-index: 10;}
.scroll_wrap .mainSlide_scroll{ color: #fff; font-size: 0.85em; text-align: center; letter-spacing: 4px; font-weight: 200;}
.scroll_wrap .mainSlide_scroll_bar{ width: 1px; height: 35px; background: rgba(255,255,255,.5); margin: 5px auto 0; position: relative; overflow: hidden;}
.scroll_wrap .scroll_bar {width:1px; height: 15px; background: #fff; animation: box-ani 2s linear infinite backwards; position: absolute;}

@keyframes box-ani { 
0% {transform: translate(50%, 0);} 
100% {transform: translate(50%, 53px);}
}


.main_tit{ margin-bottom: 40px;}
.main_tit .in_en{ font-size:1.5em; margin-bottom: 10px; font-weight: 200; letter-spacing: .5px;}
.main_tit .in_tt{ font-size:2.437em; color:#111; line-height: 1.3;}
.main_control{}
.main_control .b_prev{}
.main_control .b_next{margin-left:35px; position: relative;}
.main_control .b_next:before{content:''; width:1px; height: 27px; background-color: #ddd; position: absolute; top: 5px; left: -17px;}
.main_control .xi{ cursor: pointer; color:#aaa; font-size:2.25em; line-height: 1;}
.main_control .xi:hover{color:var(--mainColor);}
.more_btn .xi{width:40px; height: 40px; line-height: 40px; color: #fff; border-radius: 50%; text-align: center; transition:.3s; background-color: #fdaf27; font-size:1em;}
.main_plus{color:#aaa; font-size:2.25em;}
.main_plus:hover{color:var(--mainColor);}

/*about us*/
.main_bus{padding:110px 0 150px;}
.main_bus .bus_slide{position:relative;}
.main_bus .bus_slide .in .img_z{height:305px; position: relative; overflow: hidden;}
.main_bus .bus_slide .in .img_z .bgfix{position: absolute; top: 0; left: 0; width:100%; height: 100%; transition: .3s; transform: scale(1); background-color: #ddd;}
.main_bus .bus_slide .in:hover .img_z .bgfix{ transform: scale(1.1);}
.main_bus .bus_slide .in .more_btn{ position: absolute; top: 0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.2); display:flex; flex-wrap:wrap; align-content: center; justify-content: center; opacity: 0; transition: .3s;}
.main_bus .bus_slide .in:hover .more_btn{ opacity:1;}
.main_bus .bus_slide .in .txt_z{color:#333; font-weight: 500; font-size:1.375em; margin-top:20px; text-align: center;}
.main_bus .main_control{position: absolute; top: -80px; right:0;}
.main_bus .bus_pagen {width:100%;height: 4px; background: #ddd; position: relative; margin-top:60px;}
.main_bus .bus_pagen .swiper-pagination-progressbar-fill{background: var(--mainColor); }

/* 회사소개 */
.main_about{position: relative; padding:180px 0 0; z-index: 5;} 
.main_about .bg_before:before{content:''; position: absolute; top: 0;left: 0; width: 100%; height: 100%; background-color: #10237a; clip-path:polygon(0 0, 100% 8%, 100% 100%, 0 92%); }
.main_about .bg_before:after{content:''; position: absolute; top: 0;left: 0; width: 100%; height: 100%; background:linear-gradient(90deg, #03abcd, #a3cc18, #03abcd); clip-path: polygon(0 8%,100% 0, 100% 100%, 100% 100%, 100% 92%, 0 100%); z-index: -2;}
.main_about .abo_logo{position: absolute; bottom:25%; left:0;}
.main_about .main_tit{width:40%;}
.main_about .main_tit .in_en{ color: #fff}
.main_about .main_tit .in_tt{ color: #fff}
.main_about .about_con{width:740px; max-width:60%;}
.main_about .about_list{}
.main_about .about_list > li{width:50%;}
.main_about .about_list > li:nth-child(2n-1){margin-top:-170px;}
.main_about .about_list > li:nth-child(2n){margin-top:50px;}
.main_about .about_list > li .in{position: relative; overflow: hidden; display: block; height: 400px;  margin-left:50px;}
.main_about .about_list > li .in .in_img{position: absolute; top: 0; left: 0; width:100%; height: 100%; transition: .3s; }
.main_about .about_list > li .in .in_box{position: absolute; bottom:0; left: 0; width:100%; padding:40px 40px 30px; background: linear-gradient(0deg, rgba(0,0,0,.5), #0000);}
.main_about .about_list > li .in .in_box .in_tt{color:#fff; font-size:1.625em; font-weight: 600; line-height: 1;}
.main_about .about_list > li .in:hover .in_img{transform: scale(1.1);}

/*경기일정*/
.main_rally{background-color: #f9f9f9; padding:180px 0 100px; margin-top:-50px;}
.main_rally .main_control{ position: absolute; top:-75px; right:45px;}

/* 메인 게시판 공통 */
.notice_cont{margin-right:-40px;}
.notice_cont .in_box{width: 50%;}
.notice_cont .in_box{padding-right:40px;}
.notice_cont .in_box .ti{ margin-bottom: 30px;}
.notice_cont .in_box .ti p{font-size:1.875em; font-weight: 600; color: #111;}
.notice_cont .in_box .empty_li{padding:50px 30px; font-size:1.125em; color:#666;}

/* 커뮤니티 */
.main_community{padding: 100px 0 80px; overflow: hidden;}
.main_community .main_control{ position: absolute; top:-85px; left:50%; transform: translateX(-50%);}

/* 관련사이트 */
.main_partner{background-color: #f9f9f9; border-top:1px solid #ccc; padding:15px 0; margin-top: 100px;}
.main_partner .main_tit{width:270px; padding-right:30px;}
.main_partner .main_tit .in_stt{font-size:1.068em; font-weight: 600; color: #222;}
.main_partner .ptn_slide{width:calc(100% - 270px);}
.main_partner .ptn_control .arr_st{color:#999; font-size:1.125em; cursor: pointer;}
.main_partner .ptn_control .arr_st:hover{color:#444;}
.main_partner .ptn_control .in_next{margin-left:20px; position: relative;}
.main_partner .ptn_control .in_next:before{content:''; width:1px; height: 18px; background-color: #bbb; position: absolute; top: 6px; left: -10px;}



/*=================================================================sub=================================================================*/



/**/
.tab_idx{ margin:-1em 0 3em -1em;}
.tab_idx > li{flex:1 20%;}
.tab_idx > li > a{ padding:0 .5em; height:4em; border:1px solid #ddd; margin:1em 0 0 1em; color:#666; transition:.3s;}
.tab_idx > li > a .va{font-size:1.068em; font-weight:500}
.tab_idx > li > a:hover,
.tab_idx > li.on > a{ box-shadow:0 0 1em .125em rgba(0,0,0,.1); color:var(--mainColor); border-color:var(--mainColor)}

/**/
.nm_page_tt{font-size:1.5em; text-align: center; margin:80px auto 30px;}
.nm_page_tt .nmb{width:50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: var(--mainColor); display: inline-block; color:#fff; margin-right:5px;}
.page_tt{font-size:1.825em; font-weight: 600;}
.page_stt{font-size:1.45em; font-weight: 600;}
.page_tx{font-size:1.125em; font-weight: 300;}
.page_stx{font-size:1em; font-weight: 300;}

/**/
.dot_list{padding: 0!important; margin: 0!important; text-align: left;}
.dot_list > li{line-height: 1.8; font-size: 1em; position: relative; padding-left: 10px;}
.dot_list > li:before{content: ''; display: block; width: 3px; height: 3px; background: #bbb; border-radius: 50%; position: absolute; top: 10px; left: 0;}
.table_st{table-layout:fixed; border-top: 2px solid var(--mainColor); margin-bottom: 10px;}
.table_st th, 
.table_st td{padding: .7em 1em; border: 1px solid #ddd; text-align: center; line-height: 1.6;}
.table_st th{color:#222; background-color:#f9f9f9; font-size:1em; font-weight: 500;}
.table_st td{color:#333;}
.table_st .co_1{background: #f9f9f9;}
.table_st .co_2{background: var(--mainColor); color: #fff;}
.table_info{display: none;}


/*증명서 신청*/
.app_wrap{}

/*장애인축구 등록*/
.team_wrap .info_box .page_tt{margin-bottom: 10px;}
.team_wrap .info_box .page_stt{margin-top: 30px; margin-bottom: 10px;}
.team_wrap .info_box .info_list{padding: 30px; border: 1px solid #ddd;}
.team_wrap .info_box .info_list > li{display: flex; margin-bottom: 10px;}
.team_wrap .info_box .info_list > li .num{display: inline-block; font-size: 1.25em; font-weight: 700; color: var(--mainColor); text-align: center; margin-right: 15px;}
.team_wrap .info_box .info_list > li .page_tx{line-height: 1.6;}
.team_wrap .info_box .btn_st{margin-top: 4em; text-align: center;}
.team_wrap .info_box .btn_st a{display: inline-block; font-size: 1.125em; font-weight: 500; background: var(--mainColor); color: #fff; border-radius: 50px; padding: 15px 30px; transition: .3s;}
.team_wrap .info_box .btn_st a:hover{background: #333;}