@charset "utf-8"; /*--------------------------------------------------------------------------------------------------------------------------------------------------- - 그레이벨라 버젼:v2.1.3 - 레이아웃개발: 심플아이(*그레이브 디자인) - 고객센터: http://simpleeye.ivyro.net/xe/gdesign_sub_qna - 저작권: 개발코드(css+html)및 디자인도용, 소스재판매는 xe마켓 지적저작권법에 위반됩니다.(*마켓셀러 주의요망) - 라이선스: 1도메인(1웹사이트) 1라이선스 입니다. ----------------------------------------------------------------------------------------------------------------------------------------------------*/ /*기본설정*/ html, body, iframe, h1, h2, h3, h4, h5, h6, a, img, dl, dt, dd, fieldset, form, input, label, table, caption, tbody, tfoot, thead, tr, th, td, embed, hgroup{margin:0; padding:0;} img{border:0;} table{border-collapse:separate; border-spacing:1;} :focus{outline:0;} /*탑영역(로고+언어+검색)*/ #tgnb1_wrap0 {position:relative; margin:0 auto; width:980px; z-index:200;} /*로고*/ #logo {float:left; position:absolute; padding:0; left:0; top:0;} /*언어선택*/ .lang_grey #language{position:absolute; left:897px; margin:0;} .lang_grey #language dd{float:left;position:relative;width:79px;height:17px;margin:0; border-left:1px solid #d4d4d4; border-right:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; background-color:#ffffff; line-height:16px; text-align:center; background:url(../imgs/lang_icon.jpg) no-repeat 65px 6px; } .lang_grey #language dd a{display:block; color:#000; font-size:12px; text-decoration:none;} .lang_grey #language ul{margin:0; padding:0; list-style:none; display:none;position:absolute;top:15px;left:-1px;width:79px; border:1px solid #d4d4d4; background-color:#d8d8d8;} .lang_grey #language ul li{border-bottom:1px solid #f5f5f5;} .lang_grey #language ul li a{display:block; color:#fff;font:11px Tahoma; text-align:left; text-decoration:none; padding:2px 0 2px 0; text-align:center;} .lang_grey #language ul li a:hover{background-color:#3a3a3a} /*검색*/ #gb_search {float:right; position:relative; top:12px; width:213px; height:38px; border-bottom:1px solid #ebebeb;} #gb_form_search .inputText{ color:#888; background:#fff; width:187px; height:20px; margin:14px 0 3px 0; vertical-align:bottom; *display:inline; border:0;} #gb_form_search .submit{ width:18px; height:20px; *padding-top:12px;} /*탑메뉴1,2타입*/ /*탑메뉴1타입*/ #tgnb2_wrap00 {width:100%;} #tgnb2_wrap0 {width:980px; height:36px; margin:0 auto; position:relative; z-index:199;} #menu{float:left; position:absolute; left:-9px; top:7px; z-index:100; letter-spacing:0.2px;} /* (1차메뉴설정)*/ #menu ul.topnav {float:left; margin:0; padding:0; list-style:none; text-transform:none;} #menu ul.topnav li.mnav_li{margin:0; position:relative; float:left; height:36px;} #menu ul.topnav a.mnav{display:block; text-decoration:none; float:left; padding:2px 9px 3px 10px; *padding:2px 10px 3px 10px; font-weight:900;} /* #menu ul.topnav a.mnav:hover{} */ /* (2차메뉴설정)*/ #menu ul.topnav li ul.subnav {position:absolute; left:-2px; top:29px; margin:0; padding:0; list-style:none; background-color:#fff; display:none; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; text-transform:none;} #menu ul.topnav li ul.subnav li {margin:0; clear:both; border-bottom:1px solid #f1f1f1; font-size:12px;} #menu ul.topnav li ul.subnav li a.snav {display:block; padding:6px 12px 6px 12px; text-decoration:none; font-weight:900;} /* #menu ul.topnav li ul.subnav li a.snav:hover{} */ /* (로그인+회원정보) */ #login{float:right; position:absolute; right:0; top:11px; text-transform:uppercase; font-size:11px; font-weight:normal; color:#000; letter-spacing:0.2px; margin-right:8px;} #login ul{float:right; margin:0; padding:0; list-style:none; border-right:1px dotted #d7d7d7;} #login li{float:right; padding:0 5px 0 5px; *padding:0 2px 0 5px; border-left:1px dotted #d7d7d7;} #login li a{color:#888; text-decoration:none;} #login li a:hover{color:#000; text-decoration:none;} /* (개인화영역[레이어]) */ #login { z-index :600;} #login .profile button{ border:0; padding:0; width:53px; height:15px; cursor:pointer; overflow:visible;} #login .profile button span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;} #login .profile .memberProfile{display:none; position:absolute; top:22px; right:0; padding:10px 10px 3px 10px; background:#fcfcfc; border:2px solid #888;} #login .profile .memberProfile.active{ display:block;} #login .profile .memberProfile .authorName{ padding: 0 0 5px 0; font-size:14px; font-weight:900; color:#000; white-space:nowrap; border-bottom:1px solid #4e4e4e;} #login .profile .memberProfile ul{ margin:0; padding:0; list-style:none; padding:12px 0 0 0; border-right:none;} #login .profile .memberProfile li{ float:none; white-space:nowrap; padding:0 0 6px 0; font-size:11px; border-left:none;} #login .profile .memberProfile li a{ background:none; color:#535353; text-decoration:none;} #login .profile .memberProfile li a:hover, #login .profile .memberProfile li a:active, #login .profile .memberProfile li a:focus{ text-decoration:underline;} #login .profile .memberProfile .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:17px; height:17px; background:transparent url(../imgs/acc/buttonCloseX.gif) no-repeat center center;} #login .profile .memberProfile .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;} /*탑메뉴2타입*/ #tgnb2_wrap00_st2 {width:100%; margin-top:3px;} #tgnb2_wrap0_st2 {width:980px; height:34px; margin:0 auto; position:relative; z-index:199;} #menu_st2{float:left; position:absolute; left:-7px; top:0; z-index:100; letter-spacing:0.2px;} /* (1차메뉴설정)*/ #menu_st2 ul.topnav_st2 {float:left; margin:0; padding:0; list-style:none; text-transform:none; margin-top:6px; margin-top:7px\9;} #menu_st2 ul.topnav_st2 li.mnav_li{margin:0; position:relative; float:left; height:34px; padding-right:8px;} #menu_st2 ul.topnav_st2 a.mnav{display:block; text-decoration:none; font-size:14px; height:28px; height:27px\9; line-height:22px; padding:0 5px 0 6px; font-weight:900;} /* (2차메뉴설정) */ #menu_st2 ul.topnav_st2 li ul.subnav_st2 {position:absolute; left:-1px; top:28px; top:27px\9; margin:0; padding:0; list-style:none; display:none; background-color:#fff; text-transform:none;} #menu_st2 ul.topnav_st2 li ul.subnav_st2 li {margin:0; clear:both; border-bottom:1px solid #f1f1f1; font-size:12px;} #menu_st2 ul.topnav_st2 li ul.subnav_st2 li a.snav{ display:block; padding:6px 10px 6px 10px; text-decoration:none; font-weight:900;} /* (로그인+회원정보) */ #login_st2{float:right; position:absolute; right:0; top:10px; top:8px\9; text-transform:uppercase; font-size:11px; font-weight:normal; color:#fff; letter-spacing:0.2px; margin-right:8px;} #login_st2 ul{float:right; margin:0; padding:0; list-style:none; border-right:1px dotted #b8b8b8;} #login_st2 li{float:right; padding:0 5px 0 5px; padding:3px 5px 0 5px\9; *padding:3px 1px 0 5px; border-left:1px dotted #b8b8b8;} #login_st2 li a{color:#f5f5f5; text-decoration:none;} #login_st2 li a:hover{color:#dddddd; text-decoration:none;} /* (개인화영역[레이어]) */ #login_st2 { z-index :600;} #login_st2 .profile button{ border:0; padding:0; width:53px; height:15px; cursor:pointer; overflow:visible;} #login_st2 .profile button span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;} #login_st2 .profile .memberProfile{display:none; position:absolute; top:20px; right:0; padding:10px 10px 3px 10px; background:#fcfcfc; border:2px solid #888;} #login_st2 .profile .memberProfile.active{ display:block;} #login_st2 .profile .memberProfile .authorName{ padding: 0 0 5px 0; font-size:14px; font-weight:900; color:#000; white-space:nowrap; border-bottom:1px solid #4e4e4e;} #login_st2 .profile .memberProfile ul{ margin:0; padding:0; list-style:none; padding:12px 0 0 0; border-right:none;} #login_st2 .profile .memberProfile li{ float:none; white-space:nowrap; padding:0 0 6px 0; font-size:11px; border-left:none;} #login_st2 .profile .memberProfile li a{ background:none; color:#535353; text-decoration:none;} #login_st2 .profile .memberProfile li a:hover, #login_st2 .profile .memberProfile li a:active, #login_st2 .profile .memberProfile li a:focus{ text-decoration:underline;} #login_st2 .profile .memberProfile .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:17px; height:17px; background:transparent url(../imgs/acc/buttonCloseX.gif) no-repeat center center;} #login_st2 .profile .memberProfile .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;} /*메인+서브배너*/ /* 단일배너*/ #banner_wrap000 {width:100%; height:310px; border-bottom:1px solid #e6e6e6; background:url(../imgs/main_sc01.jpg) no-repeat center center;} /* 롤링배너*/ #banner_wrap00 { height:310px;} .headerimg { background-position: center center; background-repeat: no-repeat; width:100%; height:310px; position:absolute;} /* 배너스타일1 */ #headertxt_wrap { width:210px; height:310px; margin:0 auto; clear:both; position:relative; left:385px; top:-26px; background:url(../imgs/ban/mb_copy_bg.gif) repeat left top;} #firstline { width:132px; color:#fff; font-size:18px; margin:62px 0 0 44px; float:left; letter-spacing:1px; font-weight:900; overflow:hidden; white-space:nowrap; } #secondline { width:130px; color:#ddd; text-decoration:none; font-size:12px; margin:10px 0 0 44px; float:left; clear:both; height:121px; line-height:23px; letter-spacing:0.4px; overflow:hidden; white-space:normal; } #secondline a:hover { text-decoration:none;} .pictured { color:#FFF; font-size:12px; margin: 1px 0 0 44px; text-transform:uppercase; float:left; clear:both; font-weight:900;} .pictured a { letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; } .pictured a:hover { text-decoration:underline; } /* 배너스타일2 */ #headertxt_wrap_st2 { width:450px; margin:0 auto; clear:both; position:relative; left:-270px; top:50px;} #firstline_st2 { background-color:#fff; color:#333; font-size:19px; padding:4px 13px 7px; float:left; display:block; font-weight:900; } #secondline_st2 { background-image:url("../imgs/ban/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:35px; padding:0 13px 10px; float:left; display:block; clear:both; overflow:hidden; white-space:normal; width:400px;} #secondline_st2 a:hover { text-decoration:none; color:#7F000C; } .pictured_st2 { color:#FFF; font-size:12px; padding: 5px 0 0 20px; text-transform:uppercase; float:left; clear:both; font-weight:900; } .pictured_st2 a { letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; } .pictured_st2 a:hover { text-decoration:underline; } /* 배너스타일3 */ #headertxt_wrap_st3 { width:450px; margin:0 auto; clear:both; position:relative; left:-265px; top:230px;} #firstline_st3 { background-color:#343434; color:#fff; font-size:14px; padding:4px 13px 7px; float:left; display:block; font-weight:900; text-decoration:none; } /* 배너스타일4 */ #headertxt_wrap_st4 { width:1px; margin:0 auto; clear:both; position:relative; left:436px; top:221px;} .pictured_st4 {background-color:#343434; color:#fff; font-size:11px; padding:1px 5px 3px 5px; float:left; display:block; font-weight:900; text-decoration:none; } .pictured_st4 a {color:#fff; text-decoration:none; } .pictured_st4 a:hover { text-decoration:underline; } /* 공통 좌우 컨트롤 위치및 버튼 */ #headernav_wrap{ position:relative; top:277px; z-index :400; margin:0 auto; width:980px; } #headernav { padding-left:922px;} .nav_btn { height:26px; width:26px; float:left; cursor:pointer;} #back { background-image:url("../imgs/ban/btn_back.png"); } #next { background-image:url("../imgs/ban/btn_next.png"); } /* #control { background-image:url("../imgs/ban/btn_pause.png"); } */ /*서브배너*/ #s_banner_wrap00 {width:100%; height:180px;} /*컨텐츠 상단스페이스*/ #space1 {height:40px;} #space1_of {height:47px;} #space1_st2 {height:40px;} #space1_user {height:50px;} #space1_de {height:40px;} /*메인_오피스1타입*/ #con0_wrap0 {width:980px; margin:0 auto; position:relative;} /*(about+shop)*/ #con1_wrap0 {width: 980px; float: left; position: relative;} /* (about) */ #cons11_wrap { width: 460px; float: left; position: relative;} #contit1 { width: 100%; float: left; position: relative; text-transform:uppercase; font-size: 25px; color:#000; font-weight:700;} #contxt1 { width: 95%; float: left; position: relative; font-size:12px; font-weight:normal; color:#4e4e4e; line-height: 20px; padding: 10px 0 0 0;} /* (shop) */ #cons12_wrap {width: 483px; float: right; position: relative;} #contit2 { width:100%; float:lef; position:relative; text-transform:uppercase; font-size: 25px; color:#000; font-weight:700;} #contxt2 { width: 100%; float: left; position: relative;} #contxt2 ul {margin:0; padding:0; list-style:none; padding:15px 0 0 0;} #contxt2 li {float:left;} #contxt2 li img{margin-right:4px;} #contxt2 li+li+li img{margin-right:0;} /*(gal+key) */ #con2_wrap0 {width: 980px; float: left; position: relative; margin:32px 0 45px 0;} /* (gall) */ #cons21_wrap{width:617px; float:left; position:relative; margin-top:13px;} #cons21_wrap_st2{width:980px; float:left; position:relative; margin:45px 0 45px 0;} /* (design key) */ #constit2 {float:right; position:relative; text-align:right; margin-top:22px;} /*(컨텐츠(게시물추출+스타일) */ #con3_wrap0 { width: 980px; float:left; position: relative;} /* (게시물추출) */ #cons31_wrap { width: 430px; float: left; position: relative;} #cons31_wrap .xe-widget-wrapper {flex-grow: 1;} /* (스타일) */ #cons32_wrap { width: 483px; float: right; position: relative;} #contit3 { width: 100%; float: left; position: relative; text-transform:uppercase; font-size: 25px; color:#000; font-weight:700;} #contxt3 { width: 100%; float: left; position: relative; font-size: 12px; font-weight: normal; color:#4e4e4e; line-height: 20px; padding: 10px 0 0 0;} /*메인_오피스2타입*/ #con0_wrap0_of {width:980px; margin:0 auto; position:relative;} #con1_wrap0_of {width: 980px; position: relative; float:left; margin:0 0 50px 0;} .con11_b1_of { width:250px; float:left; background:url(../imgs/of_banner_sum01_dot.jpg) no-repeat 231px 0;} .con11_b1_of_N1 { width:250px; float:left;} .con11_b2_of { width:250px; float:left; background:url(../imgs/of_banner_sum01_dot.jpg) no-repeat 231px 0;} .con11_b2_of_N1 { width:250px; float:left;} .con11_b3_of { width:250px; float:left; background:url(../imgs/of_banner_sum01_dot.jpg) no-repeat 231px 0;} .con11_b3_of_N1 { width:250px; float:left;} .con11_b4_of { width:230px; float:left; background:url(../imgs/of_banner_sum01_dot.jpg) no-repeat;} .con11_b4_of_N1 { width:230px; float:left;} #con2_wrap0_of {width: 980px; position:relative; float:left;} #con21_wrap_of{position: relative; float:left; width: 480px; margin:0 20px 0 0;} #con21_t_of {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 15px 0; } #con21_wg_of{position: relative;} #con22_wrap_of{position: relative; float:left; width: 230px; margin:0 20px 0 0;} #con22_t_of {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 15px 0; } #con22_wg_of{position: relative;} #con23_wrap_of {width: 230px; position:relative; float:left;} #con23_wrap_of ul {list-style:none; margin:0; padding:0;} #con23_wrap_of li.con23_b1_of {width:230px; float:left; padding:0 0 13px 0;} #con23_wrap_of li.con23_b2_of {width:230px; float:left;} #con3_wrap0_of {width: 980px; position:relative; float:left; margin:20px 0 0 0;} /*메인_3타입(커뮤니티)*/ #con0_wrap0_st2 {width:980px; margin:0 auto; position:relative;} /*(왼쪽 컨텐츠)*/ #left11_wrap0_st2 {width:206px;float:left; position:relative;} #left11_wrap_st2{position: relative;} #left11_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #left11_c_st2{position: relative;} #left12_wrap_st2{position: relative;} #left12_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #left12_c_st2{position: relative;} #left13_wrap_st2{position: relative;} #left13_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #left13_c_st2{position: relative;} #left14_wrap_st2{position: relative;} #left14_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #left14_c_st2{position: relative;} #left15_wrap_st2{position: relative;} #left15_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #left15_c_st2{position: relative;} #left16_wrap_st2{position: relative;} #left16_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #left16_c_st2{position: relative;} /*(중앙 컨텐츠)*/ #mid21_wrap0_st2{width:508px;float: left; position: relative; margin:0 30px 0 30px;} #mid21_wrap_st2{ position: relative;} #mid21_t_st2{position:relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 15px 8px 0; border-bottom:1px solid #e6e6e6; } #mid21_c_st2{position: relative;} #mid22_wrap_st2{ position: relative;} #mid22_t_st2{position:relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 15px 8px 0; border-bottom:1px solid #e6e6e6; } #mid22_c_st2{position: relative;} #mid23_wrap_st2{position: relative;} #mid23_t_st2{position:relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 15px 8px 0; border-bottom:1px solid #e6e6e6; } #mid23_c_st2{position: relative;} #mid24_wrap_st2{ position: relative;} #mid24_t_st2{position:relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 15px 8px 0; border-bottom:1px solid #e6e6e6; } #mid24_c_st2{position: relative;} #mid25_wrap_st2{ position: relative;} #mid25_t_st2{position:relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 15px 8px 0; border-bottom:1px solid #e6e6e6; } #mid25_c_st2{position: relative;} #mid26_wrap_st2{ position: relative;} #mid26_t_st2{position:relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 15px 8px 0; border-bottom:1px solid #e6e6e6; } #mid26_c_st2{position: relative;} /*(오른쪽 컨텐츠)*/ #right31_wrap0_st2 {width:206px; float:left; position:relative;} #right31_wrap_st2{ position: relative;} #right31_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #right31_c_st2{position: relative;} #right32_wrap_st2{ position: relative;} #right32_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #right32_c_st2{position: relative;} #right33_wrap_st2{ position: relative;} #right33_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #right33_c_st2{position: relative;} #right34_wrap_st2{ position: relative;} #right34_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #right34_c_st2{position: relative;} #right35_wrap_st2{ position: relative;} #right35_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #right35_c_st2{position: relative;} #right36_wrap_st2{ position: relative;} #right36_t_st2 {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #right36_c_st2{position: relative;} /*(오른쪽 배너)*/ #right37_wrap_st2{ position: relative; margin:0 0 0 0;} #right37_c_st2{position: relative; padding:10px 0 0 0;} #right37_c_st2 ul{ float: left; list-style:none; margin:0; padding:0;} #right37_c_st2 li{padding: 0 0 10px 0;} /*서브컨텐츠*/ /*(로케이션 맵)*/ #s_con0_map { width:980px; margin:0 auto; height:40px; position: relative; color:#000; letter-spacing:0.1px; border-bottom:1px dashed #e6e6e6;} #s_con0_map ul { margin:0; padding:0; list-style:none; padding:13px 0 0 0px; float:right;} #s_con0_map li { float: left; padding: 0 0 0 19px; background: url(../imgs/icon_location.gif) no-repeat 10px 4px;} #s_con0_map li a{color:#000; font-size:12px; text-decoration:none; font-weight:700;} #s_con0_map li a:hover{color:#888; text-decoration:none;} /*(서브 좌측컨텐츠_왼쪽)*/ #s_con0_wrap0 {width:980px; margin:0 auto; position:relative; background-color:#fff; clear:both;} #s_left11_wrap0 {width:206px; float:left; position:relative; margin:10px 0 0 0;} #s_left11_wrap{position: relative;} /*(서브스타일1)*/ /*(1차메뉴 설정)*/ #s_left11_wrap h2 {text-transform:uppercase; font-size: 23px; font-weight:900; height:25px;} /*(2차메뉴 설정)*/ #s_left11_wrap ul {margin:0; padding:0; list-style:none; padding:16px 0 0 0;} #s_left11_wrap li {padding: 0 0 6px 0;} #s_left11_wrap li a.on2{padding-left:6px; padding-top:3px; padding-top:4px\9; height:20px; height:19px\9; width:200px; display:block; overflow:hidden; font-weight:900; text-decoration:none;} #s_left11_wrap li a.on2_no{color:#000; background-color:#f0f0f0; padding-left:5px; padding-top:3px; padding-top:4px\9; text-decoration:none; font-weight:900; height:20px; height:19px\9; width:201px; display:block; overflow:hidden; } #s_left11_wrap li a.on2_no:hover {padding-left:6px; padding-top:3px; padding-top:4px\9; height:20px; height:19px\9; width:200px; display:block; overflow:hidden; font-weight:900; text-decoration:none;} /*(3차메뉴 설정)*/ #s_left11_wrap ul li ul{ margin:0; padding:0; list-style:none; margin-top:5px; padding:3px 0 0 0; } #s_left11_wrap ul li ul li{ padding: 0 0 8px 12px; background: url(../imgs/icon_location.gif) no-repeat 6px 5px; } #s_left11_wrap ul li ul li a {color:#686868; text-decoration:none; } #s_left11_wrap ul li ul li a.on3{color:#000; font-weight:900;} #s_left11_wrap ul li ul li a:hover {color:#000; text-decoration:none; font-weight:900;} /*(서브스타일2)*/ /*(1차메뉴 설정)*/ #s_left11_wrap_st2 h2 { text-transform:uppercase; font-size: 16px; font-weight:900; padding:8px 0 8px 0; text-align:center; border-bottom:2px solid #e6e6e6; background-color:#ee4b27; color:#fff;} /*(2차메뉴 설정)*/ #s_left11_wrap_st2 ul {margin:0; padding:0; list-style:none; padding:20px 0 0 0;} #s_left11_wrap_st2 li {padding: 0 0 11px 0;} #s_left11_wrap_st2 li a{color:#000; text-decoration:none; } #s_left11_wrap_st2 li a.on2{text-decoration:none; font-weight:900; } /*(2차 선택됬을때 컬러)*/ #s_left11_wrap_st2 li a.on2_no{text-decoration:none; font-weight:900;} /*(2차 비선택시 기본컬러)*/ #s_left11_wrap_st2 li a.on2_no:hover{text-decoration:none;}/*(2차 마우스오버시 컬러)*/ /*(3차메뉴 설정)*/ #s_left11_wrap_st2 ul li ul{ margin:0; padding:0; list-style:none; margin-top:5px; padding:6px 0 0 0; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;} #s_left11_wrap_st2 ul li ul li{ padding: 0 0 9px 12px; background: url(../imgs/icon_location.gif) no-repeat 6px 5px; } #s_left11_wrap_st2 ul li ul li a {color:#686868; text-decoration:none;} #s_left11_wrap_st2 ul li ul li a.on3{color:#000; font-weight:900;} #s_left11_wrap_st2 ul li ul li a.on3_no{color:#686868;} #s_left11_wrap_st2 ul li ul li a.on3_no:hover{color:#000; text-decoration:none; font-weight:900;} /*(서브2단,3단_좌측컨텐츠)*/ #s_left12_wrap{position: relative; margin:20px 0 0 0;} #s_left12_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_left12_c{position: relative;} #s_left13_wrap{position: relative;} #s_left13_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_left13_c{position: relative;} #s_left14_wrap{position: relative;} #s_left14_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_left14_c{position: relative; } #s_left15_wrap{position: relative;} #s_left15_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_left15_c{position: relative; } /*(서브2단형_중앙컨텐츠)*/ #s_mid21_wrap0{width:734px; float:left; position: relative; margin:9px 0 0 40px;} /*(서브3단형_중앙컨텐츠)*/ #s_mid21_wrap0_3area{float:left; position:relative;} /*(서브3단형_우측컨텐츠)*/ #s_right31_wrap0{float:left; position:relative;} #s_right32_wrap{position: relative; margin:20px 0 0 0;} #s_right32_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_right33_c{position: relative;} #s_right33_wrap{position: relative;} #s_right33_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_right33_c{position: relative;} #s_right34_wrap{position: relative;} #s_right34_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_right34_c{position: relative; } #s_right35_wrap{position: relative;} #s_right35_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_right35_c{position: relative; } #s_right36_wrap{position: relative;} #s_right36_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_right36_c{position: relative; } #s_right37_wrap{position: relative;} #s_right37_t {position: relative; text-transform:uppercase; font-size: 12px; font-weight:900; color:#000; padding:0 0 8px 0; border-bottom:1px solid #e6e6e6; } #s_right37_c{position: relative; } /*컨텐츠 하단스페이스*/ #space2 { height: 40px; clear: both;} #space2_of {height:47px; *height:50px; clear: both;} #space2_st2 { height:40px; clear: both;} #space2_st3 { height:25px; clear: both;} #space2_user {height:50px; clear: both;} #space2_de {height:40px; clear: both;} /*하단 사이트맵*/ #con4_wrap00 { width: 100%; position: relative; background-color: #eaeaea; border-bottom:1px solid #fff; clear:both;} #cons41_wrap0 { margin:0 auto; position: relative; width: 980px; letter-spacing:0.2px;} /* (사이트맵 묶음) */ #cons41_wrap0 .section{float:left; padding-left:96px; padding-left:94px\9;} #cons41_wrap0 .section:first-child{padding-left:0;} @media screen and (-webkit-min-device-pixel-ratio:0){#cons41_wrap0 .section{padding-left:94px;}} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){#cons41_wrap0 .section{padding-left:94px;}} #cons41_wrap0 .section ul{margin:0; padding:0; list-style: none;} #cons41_wrap0 .section ul li{list-style: none;} /* (사이트맵 타이틀) */ #cons41_wrap0 .sectit {font-size:13px; font-weight:900; margin-bottom:8px; text-transform:uppercase;} #cons41_wrap0 .sectit a{color:#000; text-decoration:none;} #cons41_wrap0 .sectit a:hover{color:#888; text-decoration:none;} /* (사이트맵 리스트) */ #cons41_wrap0 .seclist {font-size:11px; font-weight:normal; line-height: 18px;} #cons41_wrap0 .seclist a{color: #4e4e4e; text-decoration: none;} #cons41_wrap0 .seclist a:hover{color: #888; text-decoration: none;} /*하단 풋터*/ #footer1_wrap00 { width:100%; height:66px; position: relative; clear: both; background:url(../imgs/mb_copy_bg.gif) repeat left top;} #footer1_wrap00_bg { width:100%; height:66px; position: relative; clear: both;} #footer1_wrap0 { width: 980px; margin:0 auto; position: relative;} /*(카피라이터)*/ #copytxt{float:left; padding-top:10px; line-height:16px;} #copytxt a{text-decoration:none; color:#fff;} #copytxt a:hover{text-decoration:underline;} /*(하단로고)*/ #copylogo{float:right; text-align:right; padding-top:19px;} /*팝업1,2*/ #divpop1{position:absolute; z-index:998;} #divpop1 .pop_area_out{border:1px solid #838892;} #divpop1 .pop_area_in{border:4px solid #f6f6f6;} #divpop1 .pop_middle{border:2px solid #fff; background-color:#fff;} #divpop1 .pop_bott{background-color:#f6f6f6; height:28px;} #divpop1 .pop_bott .pop_bott_1day{float:left; padding:8px 0 0 1px;} #divpop1 .pop_bott .pop_bott_close{float:right; padding:8px 1px 0 0;} #divpop2{position:absolute; z-index:998;} #divpop2 .pop_area_out{border:1px solid #838892;} #divpop2 .pop_area_in{border:4px solid #f6f6f6;} #divpop2 .pop_middle{border:2px solid #fff; background-color:#fff;} #divpop2 .pop_bott{background-color:#f6f6f6; height:28px;} #divpop2 .pop_bott .pop_bott_1day{float:left; padding:8px 0 0 1px;} #divpop2 .pop_bott .pop_bott_close{float:right; padding:8px 1px 0 0;} /*로그인레이어*/ .loginWindow{ display:none; position:fixed; left:0; top:0; _position:absolute; width:100%; height:100%; z-index:1300;} .loginWindow.open{ display:block;} .loginWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%;_height:expression(body.scrollHeight); background:#000; opacity:.3; filter:alpha(opacity:35);} .loginWindow .loginLayer{ position:absolute; width:230px; top:150px; left:50%; padding:20px; border:3px solid #333; margin:0 0 0 -155px; background:#fff; box-sizing: content-box;} .loginWindow .loginLayer form{ display:none; *zoom:1; margin:0 0 15px 0;} .loginWindow .loginLayer form:after{ content:""; display:block; clear:both;} .loginWindow .loginLayer form legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;} .loginWindow .loginLayer fieldset{ border:0; margin:0; padding:0;} .loginWindow .loginLayer.loginTypeA form.typeA, .loginWindow .loginLayer.loginTypeB form.typeB{ display:block;} .loginWindow .loginLayer dl{ margin:0; padding:0 0 1px 0;} .loginWindow .loginLayer dt{ font-size:11px; color:#868d95; margin:2px 0 2px 0; } .loginWindow .loginLayer dd{ margin:0 0 10px 0;} .loginWindow .loginLayer .inputText{ width:229px; height:20px; padding:6px 0 0 0; border:1px solid #ddd; font:12px Tahoma; color:#333;} .loginWindow .loginLayer .inputText:focus{ background-color:#fbfbfb;} .loginWindow .loginLayer .inputCheck{ margin:0 3px 0 0; width:13px; height:13px; vertical-align:middle;} .loginWindow .loginLayer.loginTypeA .inputText{ background:none;} .loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../imgs/acc/bgOpenidText.gif); background-repeat:no-repeat; background-position:right top; padding:6px 9px 0 35px; width:243px;} .loginWindow .loginLayer .keep{ margin:0; float:left; font-size:11px; line-height:normal; white-space:nowrap;} .loginWindow .loginLayer .keep label{color:#555;} .loginWindow .loginLayer .loginButton, .loginWindow .loginLayer .loginButton input{ position:relative; border:0; color:#fff; font-size:12px; background:transparent url(../imgs/acc/buttonLoginAction.gif) no-repeat center center; font-weight:900; display:inline-block; height:29px; line-height:32px; overflow:visible;} .loginWindow .loginLayer .loginButton{ float:right; background-position:0 0; right:11px;} .loginWindow .loginLayer .loginButton input{ left:11px; background-position:right 0; padding:0 11px 0 22px; cursor:pointer;} .loginWindow .loginLayer .help{ margin:0 -20px -20px -20px; padding:6px 0; list-style:none; text-align:center; background:#333; border-top:1px solid #1d1d1d;} .loginWindow .loginLayer .help li{ display:inline; font-size:11px; line-height:11px; padding:0 5px 0 5px;} .loginWindow .loginLayer .help li.join{ } .loginWindow .loginLayer .help li.find{ border-left:1px solid #686868;} .loginWindow .loginLayer .help li.typeA, .loginWindow .loginLayer .help li.typeB{ display:none; border-left:1px solid #686868;} .loginWindow .loginLayer.loginTypeA .help li.typeA, .loginWindow .loginLayer.loginTypeB .help li.typeB{ display:inline;} .loginWindow .loginLayer .help li a{ text-decoration:none; color:#fff;} .loginWindow .loginLayer .help li a:hover, .loginWindow .loginLayer .help li a:active, .loginWindow .loginLayer .help li a:focus{ text-decoration:underline;} .loginWindow .loginLayer .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../imgs/acc/buttonCloseX.gif) no-repeat center center;} .loginWindow .loginLayer .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;} /* ═══ KOSSA: 갤러리 게시판(thumbnailBox) 4열 정렬 ═══ 스킨(xe_board)이 .cell 폭을 200px로 인라인 하드코딩 → 3열+빈칸 발생. flex로 재배치해 4열 × 5줄(20개)로 꽉 차게 표시. 2026-09-01 */ .thumbnailBox { display:flex !important; flex-wrap:wrap !important; gap:18px 14px !important; } .thumbnailBox .cell { float:none !important; width:calc((100% - 42px)/4) !important; height:auto !important; margin:0 !important; } .thumbnailBox .cell img.thumb { width:100% !important; height:auto !important; } .thumbnailBox .clear, .thumbnailBox br { display:none !important; } /* ═══════════ KOSSA UI 개선 v1 스타일 (2026-09-01) ═══════════ */ /* 1. 스티키 GNB */ /* 메뉴/로그인이 absolute 배치라, 고정 시 outer를 본문과 동일한 1002px 중앙 기준으로 맞춤. 남색 배경을 outer에 직접 칠하고(평소엔 다른 요소가 담당) box-shadow로 좌우 끝까지 연장 */ #tgnb2_wrap0_st2.kx-fixed { position:fixed !important; top:0 !important; left:50% !important; margin-left:-490px !important; width:980px !important; right:auto !important; z-index:9000 !important; background:none !important; box-shadow:none !important; } /* 고정 시에도 ::before(전체폭 그라디언트)가 함께 따라가며 배경·그림자 담당 */ /* 4. TOP 버튼 */ #kxTopBtn { position:fixed; right:26px; bottom:30px; width:46px; height:46px; border-radius:50%; background:#1c3f73; color:#fff; border:none; cursor:pointer; font-size:18px; line-height:44px; text-align:center; box-shadow:0 4px 14px rgba(20,40,80,.3); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s, background .2s; z-index:9500; transform:translateY(8px); } #kxTopBtn.on { opacity:1; pointer-events:auto; transform:none; } #kxTopBtn:hover { background:#2f6db5; } /* 3. 스크롤 리빌 */ .kx-reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .kx-reveal.kx-in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .kx-reveal { opacity:1 !important; transform:none !important; transition:none !important; } } /* 7. 게시판 리스트 현대화 (boardList) */ table.boardList { border-collapse:separate !important; border-spacing:0 !important; border-top:2px solid #1c3f73 !important; } table.boardList thead th { background:#f0f5fb !important; color:#1c3f73 !important; font-weight:700 !important; padding:5px 8px !important; border-bottom:1.5px solid #ccdaea !important; font-size:13px !important; } table.boardList tbody td { padding:13px 8px !important; border-bottom:1px solid #e8eef5 !important; font-size:13.5px !important; color:#3a4a5a !important; } table.boardList tbody tr { transition:background .15s; } table.boardList tbody tr:hover { background:#f4f8fc !important; } table.boardList tbody td.title a { color:#1a2a3a !important; } table.boardList tbody td.title a:hover { color:#2f6db5 !important; } /* 8. 서브배너 페이지 제목 오버레이 */ #s_banner_wrap00 { position:relative !important; } .kx-banner-title { position:absolute; left:50%; bottom:34px; transform:translateX(-50%); width:1002px; font-size:30px; font-weight:900; letter-spacing:-0.5px; color:#fff; pointer-events:none; text-shadow:0 2px 12px rgba(10,25,50,.55), 0 1px 3px rgba(10,25,50,.7); } /* ══ GNB 모던 v2 ══ */ /* 바 배경: 가상요소로 화면 전체폭 그라디언트 + 부드러운 그림자 (컨테이너는 980이라 직접 칠하면 좌우 잘림) */ #tgnb2_wrap0_st2 { position:relative; background:none !important; border:none !important; } #tgnb2_wrap0_st2::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; background:linear-gradient(180deg,#12508c 0%,#0d4173 100%); box-shadow:0 3px 16px rgba(14,60,120,.25); } #tgnb2_wrap00_st2 { background:transparent !important; } #menu_st2 .mnav { color:#fff !important; background:transparent !important; padding:0 13px !important; height:28px !important; line-height:28px !important; display:inline-block !important; box-sizing:border-box !important; border-radius:6px !important; font-weight:600 !important; letter-spacing:-0.2px !important; position:relative !important; transition:background .18s, color .18s !important; } #menu_st2 .mnav:hover { background:rgba(255,255,255,.13) !important; color:#fff !important; } /* 활성 메뉴(.kx-act — g_Toggle.js가 로드시 1회 판정): 하이라이트 + 하단 인디케이터 */ #menu_st2 .mnav.kx-act { background:rgba(255,255,255,.16) !important; color:#fff !important; } #menu_st2 .mnav.kx-act::after { content:''; position:absolute; left:10px; right:10px; bottom:0; height:3px; background:#7fb3ff; border-radius:2px; } /* 드롭다운 라운드+그림자 */ .subnav_st2 { border-radius:0 0 10px 10px !important; overflow:hidden !important; box-shadow:0 14px 30px rgba(10,30,60,.22) !important; } /* ══ 사이드바 모던 v2 ══ */ #s_left11_wrap { background:none !important; border:none !important; } #s_left11_wrap0 { background:none !important; } #s_left11_wrap h2 { color:#1c3f73 !important; font-size:19px !important; font-weight:900 !important; letter-spacing:-0.5px !important; padding:2px 2px 10px !important; margin-bottom:6px !important; border-bottom:2px solid #1c3f73 !important; } #s_left11_wrap ul li { border:none !important; background:none !important; padding-bottom:0 !important; height:auto !important; } #s_left11_wrap > ul > li > a { height:auto !important; } #s_left11_wrap > ul > li > a { display:block !important; background:#fff !important; color:#3a4a5a !important; border:none !important; border-left:3px solid transparent !important; border-radius:8px !important; padding:7px 12px !important; margin:2px 0 !important; font-size:13.5px !important; font-weight:600 !important; line-height:1.35 !important; transition:all .18s ease !important; width:auto !important; } #s_left11_wrap > ul > li > a:hover { background:#f0f5fb !important; color:#1c3f73 !important; border-left-color:#3a7bd5 !important; transform:translateX(2px); } #s_left11_wrap > ul > li > a.on2 { background:#0e487e !important; color:#fff !important; border-left-color:#7fb3ff !important; box-shadow:0 3px 10px rgba(14,72,126,.28) !important; } /* 모바일 왼쪽 쏠림 방지: 뷰포트(1020)를 넘는 요소 차단 */ html, body { overflow-x:hidden !important; } [id^="gySliderBot"] { max-width:100% !important; overflow:hidden !important; } #kossa_partner, #kossa_partner .sbWrap { max-width:100% !important; overflow:hidden !important; } /* 스티키 푸터: 내용이 짧은 페이지에서 푸터를 화면 바닥에 밀착 (flex) ⚠ body/html에 배경색 금지 — 메인 배너가 음수 z-index라 배경색이 덮어버림 */ body { display:flex !important; flex-direction:column !important; min-height:100vh !important; } #footer1_wrap00_bg, #footer1_wrap00 { margin-top:auto !important; } /* ══ 푸터 표준 fix — 전역(게시판 포함 모든 페이지) ══ 일부 페이지에서 배경 div 폭이 0으로 붕괴(레이아웃 height:px 공란 버그)해 남색 배경이 사라지던 문제를 전역에서 교정 */ #footer1_wrap00_bg, #footer1_wrap00 { width:100% !important; max-width:none !important; position:relative !important; left:0 !important; right:auto !important; margin-left:0 !important; box-sizing:border-box !important; height:auto !important; min-height:80px !important; padding:20px 0 !important; } /* 푸터: 플랫 단색·선명한 경계 → 그라디언트 + 위쪽 부드러운 그림자/하이라이트 */ #footer1_wrap00_bg { background:linear-gradient(180deg,#123f6d 0%,#0b2f52 100%) !important; border-top:none !important; box-shadow:0 -6px 20px rgba(14,60,120,.12), inset 0 1px 0 rgba(255,255,255,.07) !important; } #copytxt { color:rgba(255,255,255,.72) !important; line-height:1.9 !important; } #copytxt a { color:rgba(255,255,255,.6) !important; transition:color .15s; } #copytxt a:hover { color:#fff !important; } #copylogo img { opacity:.85; } /* ══ 게시판 상단 정돈 ══ 우측 회원가입/로그인(GNB와 중복)·스킨정보·태그·목록스타일 아이콘(구식) 숨김 */ .boardInformation .accountNavigation li.join, .boardInformation .accountNavigation li.loginAndLogout, .boardInformation .accountNavigation li.skin_info, .boardInformation .accountNavigation li.tag_info, .boardInformation .accountNavigation li.listType { display:none !important; } .boardInformation .articleNum { font-size:12.5px !important; color:#5a7fa0 !important; } .boardInformation .articleNum strong { color:#1c3f73 !important; } /* 목록 접기(더보기) 버튼 */ .kx-more-btn { display:block; width:100%; margin:14px 0 0; padding:11px 0; text-align:center; background:#f0f5fb; border:1.5px solid #ccdaea; border-radius:8px; cursor:pointer; font-size:13px; font-weight:700; color:#1c3f73; transition:background .15s; font-family:inherit; } .kx-more-btn:hover { background:#e2edf8; } .kx-row-hidden { display:none !important; } /* 사이드 위젯(행사사진/공지사항) 숨김 */ #s_left12_wrap, #s_left13_wrap { display:none !important; } /* ══ 메인 UI v2 ══ */ /* 1. 히어로 오버레이(문구·버튼은 g_Toggle.js가 주입) */ #banner_wrap00 { position:relative !important; } .kx-hero-ov { position:absolute; left:0; right:0; bottom:0; top:0; z-index:5; pointer-events:none; background:linear-gradient(to right, rgba(10,30,60,.55) 0%, rgba(10,30,60,.25) 45%, rgba(10,30,60,0) 70%); } .kx-hero-in { position:absolute; z-index:6; left:50%; bottom:44px; transform:translateX(-50%); width:980px; pointer-events:none; } .kx-hero-t { font-size:34px; font-weight:900; color:#fff; letter-spacing:-0.5px; text-shadow:0 2px 14px rgba(0,20,50,.5); margin:0 0 6px; } .kx-hero-s { font-size:15px; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,20,50,.5); margin:0 0 16px; } .kx-hero-btns a { pointer-events:auto; display:inline-block; margin-right:10px; padding:10px 22px; border-radius:24px; font-size:13.5px; font-weight:700; text-decoration:none; transition:all .18s; } .kx-hero-btns a.pri { background:#2f6db5; color:#fff; } .kx-hero-btns a.pri:hover { background:#3a7bd5; transform:translateY(-1px); } .kx-hero-btns a.gho { background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.7); } .kx-hero-btns a.gho:hover { background:rgba(255,255,255,.28); } /* 2-0. 협회소개 카드 (시안 A 네이비 그라디언트 — g_Toggle.js가 주입, 성공 시 kx-on으로 기존 탭박스만 숨김) */ #cons11_wrap.kx-on #div_01 { display:none !important; } #kx-intro { position:relative; border-radius:14px; overflow:hidden; padding:22px 24px 20px; background:linear-gradient(135deg,#0d3f70 0%,#1c4f8a 55%,#2f6db5 100%); box-shadow:0 6px 18px rgba(14,60,120,.25); box-sizing:border-box; } #kx-intro .deco { position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.06); } #kx-intro .deco2 { position:absolute; right:30px; bottom:-46px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.05); } #kx-intro .badge { display:inline-block; padding:4px 12px; border-radius:14px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); color:#cfe3ff; font-size:11px; font-weight:700; letter-spacing:.5px; margin-bottom:11px; } #kx-intro .logo { font-size:28px; font-weight:900; color:#fff; letter-spacing:1px; line-height:1.15; margin-bottom:2px; } #kx-intro .logo .ax { color:#7fb3ff; } #kx-intro .slogan { font-size:13px; font-weight:700; color:#9cc4f5; letter-spacing:.3px; margin-bottom:10px; } #kx-intro .desc { font-size:12.5px; color:rgba(255,255,255,.88); line-height:1.7; margin-bottom:14px; word-break:keep-all; } #kx-intro .btns a { display:inline-block; margin-right:8px; padding:8px 16px; border-radius:18px; font-size:12px; font-weight:700; text-decoration:none; transition:all .15s; } #kx-intro .btns a.b1 { background:#fff; color:#1c3f73; } #kx-intro .btns a.b1:hover { background:#e8f1fc; } #kx-intro .btns a.b2 { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); } #kx-intro .btns a.b2:hover { background:rgba(255,255,255,.15); } /* 2. 협회소개 탭박스 정돈 */ #cons11_wrap a[href^="javascript:show_layer"] { border-radius:10px 10px 0 0 !important; font-size:14px !important; } #cons11_wrap [id^="layer_"] { border-radius:0 0 10px 10px !important; } /* 3. 캘린더 카드화 */ #cons12_wrap { background:#fff; border:1px solid #e3ecf5 !important; border-radius:12px !important; box-shadow:0 2px 10px rgba(20,40,80,.06) !important; padding:18px 20px !important; box-sizing:border-box; } /* 4-0. 공지/행사 좌우 통일 카드 (타이틀은 g_Toggle.js가 주입) */ #con3_wrap0 { gap:20px; align-items:stretch !important; } #cons31_wrap, #cons32_wrap { background:#fff; border:1px solid #e3ecf5 !important; border-radius:12px !important; box-shadow:0 2px 10px rgba(20,40,80,.06) !important; padding:16px 18px !important; box-sizing:border-box; max-width:none !important; flex:1 1 0 !important; display:block !important; } #cons31_wrap img[src*="m_sumNotice"] { display:none !important; } /* 구형 NOTICE 이미지 */ .kx-wtit { display:flex; align-items:center; gap:7px; font-size:15px; font-weight:800; color:#1c3f73; letter-spacing:-0.3px; padding-bottom:9px; margin-bottom:8px; border-bottom:1.5px solid #e3ecf5; } .kx-wtit::before { content:''; width:5px; height:16px; border-radius:3px; background:#1c3f73; } .kx-wtit .more { margin-left:auto; font-size:11.5px; font-weight:600; color:#9ab0c4; text-decoration:none; } .kx-wtit .more:hover { color:#2f6db5; } /* NEW 배지 (g_Toggle.js가 최근 게시글에 자동 부착) */ .kx-new { display:inline-block; margin-left:6px; padding:1px 5px 2px; border-radius:4px; background:#e8503a; color:#fff; font-size:9.5px; font-weight:800; line-height:1.2; vertical-align:2px; } /* 4. 공지/행사 리스트 정돈 — 좌우 행 피치·구분선·날짜 완전 통일 */ .widgetZineA { margin:0 !important; padding:0 !important; } .widgetZineA li { margin:0 !important; padding:9px 2px !important; line-height:1.4 !important; border-bottom:1px solid #eef3f8 !important; transition:background .15s; } .widgetZineA li:last-child { border-bottom:none !important; } .widgetZineA li:hover { background:#f6f9fc !important; } .widgetZineA li p, .widgetZineA li div { margin:0 !important; padding:0 !important; } .widgetZineA li a { color:#2a3a4a !important; font-size:13px !important; font-weight:500 !important; } .widgetZineA li a:hover { color:#2f6db5 !important; } .widgetZineA li .date { float:right !important; font-size:12.5px !important; color:#8a9bb0 !important; } #recent-posts-widget > div { margin:0 !important; padding:9px 2px !important; border-bottom:1px solid #eef3f8 !important; transition:background .15s; } #recent-posts-widget > div:last-child { border-bottom:none !important; } #recent-posts-widget > div:hover { background:#f6f9fc !important; } #recent-posts-widget > div > a { height:auto !important; } #con3_wrap0 #recent-posts-widget p[class*="xe-text-"], #con3_wrap0 #recent-posts-widget a > *:last-child { font-size:12.5px !important; color:#8a9bb0 !important; } /* 5. KOSSA 주요활동 — 포토 3장 자리(협회소개 아래)를 카드형으로 (헤더는 g_Toggle.js 주입) */ #cons21_wrap { display:block !important; margin-top:6px !important; } .kx-act-hd { display:flex; align-items:center; gap:7px; font-size:15px; font-weight:800; color:#1c3f73; letter-spacing:-0.3px; margin:0 0 8px; } .kx-act-hd::before { content:''; width:5px; height:16px; border-radius:3px; background:#1c3f73; } .kx-act-hd .arrow { margin-left:auto; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:1.5px solid #ccdaea; border-radius:50%; color:#1c3f73; text-decoration:none; font-size:13px; font-weight:700; background:#fff; transition:all .15s; } .kx-act-hd .arrow:hover { background:#1c3f73; color:#fff; border-color:#1c3f73; } #cons21_wrap .widgetGalleryA { width:100% !important; display:flex !important; gap:13px; margin:0 !important; padding:0 !important; } #cons21_wrap .widgetGalleryA li { width:auto !important; flex:1 1 0; min-width:0; margin:0 !important; background:#fff; border:1px solid #e3ecf5; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(20,40,80,.06); transition:transform .2s, box-shadow .2s; } #cons21_wrap .widgetGalleryA li:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,40,80,.15); } #cons21_wrap a.thumb { width:100% !important; height:94px !important; display:block !important; border-radius:0 !important; } #cons21_wrap a.thumb img { width:100% !important; height:100% !important; object-fit:cover; display:block; } #cons21_wrap a.title { padding:8px 10px 10px !important; font-size:12px !important; font-weight:600 !important; color:#243a52 !important; line-height:1.45 !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; } #cons21_wrap li:hover a.title { color:#2f6db5 !important; } /* 캘린더 위젯 고정 min-height(400px) 해제 — 하단 빈 공간 제거 */ #cons12_wrap #xe-calendar-first { min-height:0 !important; } /* 카드가 늘어날 때 달력을 수직 중앙 배치(여백 위아래 분산) */ #cons12_wrap { display:flex !important; flex-direction:column !important; } #cons12_wrap #xe-calendar-first { margin:auto 0 !important; } /* 달력 자체 세로 확장 — 위젯 JS가 열 폭을 px로 고정하므로 .calendar-table__body에 7열 균등 강제 */ #xe-calendar-first .calendar-table__body { grid-template-columns:repeat(7, minmax(0,1fr)) !important; width:100% !important; row-gap:4px !important; } #xe-calendar-first .btn-calendar-date { width:100% !important; height:46px !important; aspect-ratio:auto !important; max-width:none !important; } /* 5-2. 주요 회원사: 타이틀 통일 + 로고 롤링 세련화 */ #contit1 { display:flex !important; align-items:center; gap:7px; font-size:15px !important; font-weight:800 !important; color:#1c3f73 !important; letter-spacing:-0.3px !important; margin:38px 0 2px !important; } #contit1::before { content:''; width:5px; height:16px; border-radius:3px; background:#1c3f73; flex-shrink:0; } #contit1 br { display:none !important; } /* 캘린더 위젯 자체 타이틀도 표준(▍5×16 + 15px/800)에 맞춤 */ #xe-calendar-first > div:first-child p { font-size:15px !important; font-weight:800 !important; color:#1c3f73 !important; letter-spacing:-0.3px !important; } #xe-calendar-first > div:first-child svg { width:5px !important; height:16px !important; } #xe-calendar-first > div:first-child rect { fill:#1c3f73 !important; } #xe-calendar-first > div:first-child a, #xe-calendar-first > div:first-child a p { font-size:11.5px !important; font-weight:600 !important; color:#9ab0c4 !important; } .gySliderBot { padding:12px 0 6px !important; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .gySliderBot .imgList li { padding:0 10px !important; } .gySliderBot .imgList li img { filter:grayscale(1); opacity:.72; border:1px solid #eef2f7 !important; border-radius:10px !important; background:#fff; transition:filter .25s, opacity .25s, transform .25s, box-shadow .25s; } .gySliderBot .imgList li:hover img { filter:grayscale(0); opacity:1; transform:translateY(-3px); box-shadow:0 8px 18px rgba(20,40,80,.14); } /* 6. 섹션 여백 리듬 */ #con1_wrap0 { margin-top:34px !important; } #con3_wrap0 { margin-top:26px !important; } /* ══ 포토뉴스 갤러리 카드 v2 ══ */ .thumbnailBox .cell { background:#fff !important; border:1px solid #e3ecf5 !important; border-radius:12px !important; overflow:hidden !important; box-shadow:0 2px 8px rgba(20,40,80,.06) !important; padding:0 0 12px !important; box-sizing:border-box !important; transition:transform .2s ease, box-shadow .2s ease !important; } .thumbnailBox .cell:hover { transform:translateY(-4px) !important; box-shadow:0 12px 26px rgba(20,40,80,.15) !important; border-color:#cfe0f0 !important; } .thumbnailBox .cell > a { display:block; overflow:hidden; border-radius:0 !important; } .thumbnailBox .cell img.thumb { width:100% !important; height:auto !important; display:block !important; transition:transform .35s ease; } .thumbnailBox .cell:hover img.thumb { transform:scale(1.05); } .thumbnailBox .cell .title { padding:10px 12px 2px !important; } .thumbnailBox .cell .title a { font-size:13px !important; font-weight:600 !important; color:#243a52 !important; line-height:1.45 !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; border-radius:0 !important; } .thumbnailBox .cell .title a:hover { color:#2f6db5 !important; } /* 카드 호버 시 제목 전체 표시 (2줄 말줄임 해제) */ .thumbnailBox .cell:hover .title a { -webkit-line-clamp:unset !important; } .thumbnailBox .cell .readAndRecommend { padding:4px 12px 0 !important; font-size:11px !important; color:#9ab0c4 !important; } .thumbnailBox .cell .readAndRecommend .num { color:#5a7fa0 !important; font-weight:700 !important; } /* 게시판 제목 한 줄 말줄임(…) 처리 */ table.boardList { table-layout:fixed !important; width:100% !important; } table.boardList thead th { text-align:center !important; } table.boardList th.no_line { width:40px !important; } /* 번호/공지 칸: 좌우 여백 최소화 */ table.boardList tbody td.no, table.boardList tbody td.notice { padding-left:2px !important; padding-right:2px !important; } table.boardList tbody td.notice { color:#1c3f73 !important; font-weight:700 !important; font-size:12px !important; } /* 모든 셀 가운데 정렬(가로+세로) — 제목만 아래에서 왼쪽으로 예외 */ table.boardList tbody td { vertical-align:middle !important; text-align:center !important; } table.boardList tbody td.title { text-align:left !important; } table.boardList tbody td.author > div { display:inline-block !important; margin:0 !important; padding:0 !important; line-height:inherit !important; vertical-align:middle !important; } table.boardList th.author { width:70px !important; } table.boardList th.date { width:86px !important; } table.boardList th.reading { width:54px !important; } /* 분류 select 크기 */ table.boardList th.category select { max-width:110px !important; font-size:12px !important; } /* 클래스 없는 th — 위치별 정밀 지정 (관리자 모드에서 열이 밀려도 안전) */ table.boardList thead th:first-child:not([class]) { width:34px !important; } /* 관리자 체크박스 */ table.boardList thead th:nth-child(2):not([class]) { width:40px !important; } /* 관리자 모드의 번호 열 */ table.boardList thead th:nth-last-child(2):not([class]) { width:110px !important; } /* 캘린더 등 날짜 열 */ table.boardList tbody td.title { overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; padding-right:14px !important; text-align:left !important; } table.boardList tbody td.title a, table.boardList tbody td.title span { white-space:nowrap !important; } /* 게시글 제목 서식 통일 — 에디터 인라인 크기·색 무력화 (굵기=공지 강조와 분류 색상탭은 유지) */ table.boardList tbody td.title a, table.boardList tbody td.title a span { font-size:13.5px !important; font-family:inherit !important; color:#1a2a3a !important; } table.boardList tbody td.title a:hover, table.boardList tbody td.title a:hover span { color:#2f6db5 !important; } /* 캘린더 분류 색상탭: 크기만 일관되게 (색상·모양 유지) */ table.boardList td.title .category-wrapper { font-size:11px !important; vertical-align:1px; } table.boardList td.title .category-wrapper .category { font-size:11px !important; } /* ═══ [KOSSA] 10-6. 협회소개 표준 리드 헤더 (g_Toggle.js가 주입) ═══ */ .kx-lead-std{background:linear-gradient(135deg,#0d3f70,#2f6db5);border-radius:12px;padding:18px 24px;color:#fff;margin:0 0 26px;box-sizing:border-box;} .kx-lead-std .b{display:inline-block;padding:3px 11px;border-radius:13px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);font-size:11px;font-weight:700;color:#cfe3ff;margin-bottom:7px;letter-spacing:.5px;} .kx-lead-std .t{font-size:15px;font-weight:800;line-height:1.5;word-break:keep-all;} /* ═══ [KOSSA] 10-7. 사이드바 제목 box-sizing 오염 방지 ═══ */ /* 일부 페이지 본문 CSS가 *,*::before,*::after{box-sizing:border-box}를 전역 선언해 사이드바 제목(h2) 높이가 39px→25px로 줄어드는 현상 차단 */ [id^="s_left"] h2, [id^="s_left"] h2::before, [id^="s_left"] h2::after { box-sizing: content-box !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 11. 사이트 전체 1200px 확장 (리눅스재단 규격) 기존 980px 컨테이너를 1200px로 승격. 배너/GNB바/푸터바 등 전체폭 요소는 건드리지 않는다(배너 슬라이더 깨짐 방지). ═══════════════════════════════════════════════════════════ */ #tgnb1_wrap0, #tgnb2_wrap0, #tgnb2_wrap0_st2, #headernav_wrap, #con0_wrap0, #con1_wrap0, #con2_wrap0, #cons21_wrap_st2, #con3_wrap0, #con0_wrap0_of, #con1_wrap0_of, #con2_wrap0_of, #con3_wrap0_of, #con0_wrap0_st2, #s_con0_map, #s_con0_wrap0, #cons41_wrap0, #footer1_wrap0 { width:1200px !important; max-width:1200px !important; } /* 메인 2단 비율 (좌 575 + 우 595 / 하단 590+590) */ #cons11_wrap { width:575px !important; } #cons12_wrap { width:595px !important; } #cons31_wrap, #cons32_wrap { width:590px !important; } /* 서브 본문 컬럼 = 1200 - 사이드바 206 - 여백 40 */ #s_mid21_wrap0 { width:954px !important; } /* 스티키 GNB (10-1 블록의 980/-490 승계 override) */ #tgnb2_wrap0_st2.kx-fixed { width:1200px !important; margin-left:-600px !important; } /* GNB 메뉴: 넓어진 바에서 중앙 정렬 */ #menu_st2 { left:50% !important; right:auto !important; width:690px !important; transform:translateX(-50%) !important; } /* 배너 타이포/타이틀 정렬 폭 */ .kx-banner-title, .kx-hero-in { width:1200px !important; } /* 주요 회원사 로고 롤링 */ [id^="gySliderBot"] { width:1200px !important; } [id^="gySliderBot"] .sbWrap { width:1160px !important; } /* ─ 메인 상단 섹션: 화면 전체폭 배경 밴드 (좌우 여백을 '디자인'으로) ─ */ #con1_wrap0 { position:relative; z-index:0; margin:36px 0 !important; } /* top:-76px = 자체 margin 36px + 배너~콘텐츠 사이 스페이서 40px → 배너 하단에 밀착 */ #con1_wrap0::before { content:''; position:absolute; left:50%; margin-left:-50vw; width:100vw; top:-76px; bottom:-36px; z-index:0; pointer-events:none; background:linear-gradient(180deg,#f2f7fc,#e6eef8); } #con1_wrap0 > * { position:relative; z-index:1; } /* ═══ [KOSSA] 12. GNB 드롭다운 줄바꿈 방지 (K-OpenSource X 등 긴 항목) ═══ */ .subnav_st2 { width:auto !important; min-width:150px !important; } .subnav_st2 a { white-space:nowrap !important; } /* ═══ [KOSSA] 13. 모바일 잘림 방지 (1200px 확장 대응) ═══ */ /* viewport meta가 누락되거나 좁은 뷰포트로 진입해도 전체폭 배경 띠(GNB/배너/푸터)가 980px에서 잘리지 않도록 콘텐츠 폭(1200px)을 최소 보장 */ html, body { min-width:1200px !important; } #tgnb2_wrap00_st2, #tgnb2_wrap00, #s_banner_wrap00, #banner_wrap00, #footer1_wrap00_bg, #footer1_wrap00, #space1, #space2 { min-width:1200px !important; } /* ═══ [KOSSA] 14. 캘린더 6주 월 높이 고정 (하단 라인 정렬 유지) ═══ */ /* 2027.01처럼 6주로 표시되는 달에 카드가 아래로 늘어나 왼쪽 컬럼과 어긋나는 문제. 본문 그리드 높이를 246px로 고정하고 행을 균등 분할해, 5주/6주 모두 동일 높이 유지 */ .calendar-table__body { height:246px !important; grid-template-rows:unset !important; grid-auto-rows:minmax(0,1fr) !important; } .calendar-table__body > * { height:100% !important; min-height:0 !important; aspect-ratio:auto !important; } /* ═══ [KOSSA] 15. 조직도 SVG 확대 방지 (1200px 확장 대응) ═══ */ /* SVG가 width:100%라 본문 컬럼이 734→954px로 넓어지면서 1.32배로 확대되어 도형·글자가 과도하게 커지는 문제. 원 설계 폭(720)에 맞춰 상한을 두고 중앙 정렬 */ .org-section svg { max-width:740px !important; display:block !important; margin-left:auto !important; margin-right:auto !important; } /* ═══ [KOSSA] 16. 오시는길 지도 정렬 (1200px 확장 대응) ═══ */ /* 카카오 약도는 스크립트에 지정된 고정폭으로 렌더된다. 본문(954px)보다 좁게 남는 경우에도 왼쪽으로 치우치지 않도록 중앙 정렬 */ .kl-map-box { display:block !important; margin-left:auto !important; margin-right:auto !important; max-width:100% !important; } /* .wrap_map 의 height 는 절대 건드리지 않는다 (0px 붕괴 → 지도 사라짐) */ /* ═══ [KOSSA] 17. 전체폭 배경 띠 최소폭 보정 ═══ */ /* 100vw 는 뷰포트 기준이라, 브라우저 창이 콘텐츠(1200px)보다 좁으면 GNB 남색 바·메인 배경 밴드가 화면 오른쪽까지 덮지 못하고 잘린다. */ #tgnb2_wrap0_st2::before, #con1_wrap0::before { min-width:1200px !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 18. 상단 메뉴바 리디자인 (차콜 슬림) 그라디언트 남색 → 단색 차콜(#26292e), 바 높이 34→58px, 1200px 폭에 맞춰 메뉴 간격 확대·정중앙 정렬, 배경 하이라이트 → 하단 밑줄 애니메이션 ═══════════════════════════════════════════════════════════ */ #tgnb2_wrap0_st2::before { background:#26292e !important; min-width:1200px !important; box-shadow:0 2px 10px rgba(0,0,0,.14) !important; } #tgnb2_wrap00_st2, #tgnb2_wrap0_st2 { height:58px !important; } /* 메뉴 컨테이너: 내용 폭만큼 잡아 정중앙 (width 고정값이면 좌측 쏠림) */ #menu_st2 { top:0 !important; width:max-content !important; } #menu_st2 ul.topnav_st2 { height:58px !important; margin:0 !important; padding:0 !important; } #menu_st2 ul.topnav_st2 li.mnav_li { height:58px !important; padding-right:0 !important; } /* 메뉴 링크 */ #menu_st2 ul.topnav_st2 a.mnav, #menu_st2 .mnav { height:58px !important; line-height:58px !important; padding:0 30px !important; font-size:15.5px !important; font-weight:600 !important; letter-spacing:0.2px !important; color:rgba(255,255,255,.88) !important; background:transparent !important; position:relative !important; transition:color .18s !important; } #menu_st2 .mnav::after { content:'' !important; position:absolute !important; left:26px; right:26px; bottom:15px; top:auto !important; height:2px !important; border-radius:0 !important; background:#8ab4f8 !important; transform:scaleX(0); transform-origin:center; transition:transform .22s ease !important; } #menu_st2 .mnav:hover { color:#fff !important; background:transparent !important; } #menu_st2 .mnav:hover::after { transform:scaleX(1); } #menu_st2 .mnav.kx-act { color:#fff !important; background:transparent !important; } #menu_st2 .mnav.kx-act::after { transform:scaleX(1); } /* 드롭다운: 바 하단에 밀착 */ #menu_st2 ul.topnav_st2 li ul.subnav_st2 { top:58px !important; } /* 로그인 영역 수직 중앙 */ #login_st2 { top:21px !important; } #login_st2 li a { color:rgba(255,255,255,.6) !important; } #login_st2 li a:hover { color:#fff !important; } /* ═══ [KOSSA] 19. 푸터 차콜 통일 (상단 메뉴바와 동일 계열) ═══ */ #footer1_wrap00_bg { background:linear-gradient(180deg,#33373d 0%,#25282c 100%) !important; box-shadow:0 -6px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ═══ [KOSSA] 20. 공지/주요행사 리스트 시원하게 (1200px 확장 대응) ═══ */ /* 행 피치 37→49px, 제목 13→14.5px, 날짜 12.5→13px. 좌우 위젯 구조가 달라 (.widgetZineA li / #recent-posts-widget > div) 양쪽을 동일 수치로 묶는다 */ #cons31_wrap, #cons32_wrap { padding:20px 22px !important; } .kx-wtit { font-size:16px !important; padding-bottom:11px !important; margin-bottom:10px !important; } .widgetZineA li, #recent-posts-widget > div { padding:13px 4px !important; line-height:22px !important; } .widgetZineA li a, #recent-posts-widget > div > a { font-size:14.5px !important; line-height:22px !important; } #recent-posts-widget > div > a > *:first-child { font-size:14.5px !important; line-height:22px !important; } .widgetZineA li .date, #con3_wrap0 #recent-posts-widget p[class*="xe-text-"], #con3_wrap0 #recent-posts-widget a > *:last-child { font-size:13px !important; line-height:22px !important; } .kx-new { vertical-align:1px !important; } /* ═══ [KOSSA] 21. GNB 드롭다운 확대 (메인 메뉴 15.5px에 맞춤) ═══ */ /* 12px/행 30px/폭 150 → 14px/행 42px/폭 190. 라운드·그림자 유지, 호버 시 살짝 들여쓰기 */ #menu_st2 ul.topnav_st2 li ul.subnav_st2 { min-width:190px !important; padding:6px 0 !important; background:#fff !important; border-radius:0 0 12px 12px !important; box-shadow:0 14px 34px rgba(0,0,0,.18) !important; } #menu_st2 ul.topnav_st2 li ul.subnav_st2 li { font-size:14px !important; border-bottom:1px solid #f0f3f7 !important; } #menu_st2 ul.topnav_st2 li ul.subnav_st2 li:last-child { border-bottom:none !important; } #menu_st2 ul.topnav_st2 li ul.subnav_st2 li a.snav { display:block !important; padding:11px 18px !important; font-size:14px !important; font-weight:600 !important; color:#33465c !important; line-height:1.4 !important; transition:background .15s, color .15s, padding-left .15s; } #menu_st2 ul.topnav_st2 li ul.subnav_st2 li a.snav:hover { background:#f2f6fb !important; color:#0d4173 !important; padding-left:22px !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 22. 헤더 통합 (로고 + 메뉴 한 줄) — KOSTA 방식 g_Toggle.js 0-1 블록이 #tgnb1_wrap0(흰 로고 행)을 숨기고 로고를 #kx-logo 로 감싸 메뉴바 맨 앞에 넣는다. 여기서는 그 결과물의 배치만 담당. ═══════════════════════════════════════════════════════════ */ #tgnb2_wrap00_st2, #tgnb2_wrap0_st2 { height:70px !important; } /* 로고: 바 왼쪽 끝, 세로 중앙, 남색 로고를 흰색으로 반전 */ #kx-logo { position:absolute; left:0; top:0; height:70px; display:flex; align-items:center; z-index:5; } #kx-logo a { display:block; line-height:0; } #kx-logo img { height:22px !important; width:auto !important; display:block; filter:brightness(0) invert(1); } /* 메뉴: 중앙 정렬 해제, 로고 오른쪽(318px)부터 시작 — 로고 끝과 42px 간격 */ #menu_st2 { left:318px !important; transform:none !important; top:0 !important; } #menu_st2 ul.topnav_st2, #menu_st2 ul.topnav_st2 li.mnav_li { height:70px !important; } #menu_st2 ul.topnav_st2 a.mnav, #menu_st2 .mnav { height:70px !important; line-height:70px !important; padding:0 22px !important; } #menu_st2 .mnav::after { left:18px !important; right:18px !important; bottom:20px !important; } #menu_st2 ul.topnav_st2 li ul.subnav_st2 { top:70px !important; } /* 로그인: 70px 바 기준 세로 중앙 */ #login_st2 { top:27px !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 23. 헤더 우측 묶음 (로그인·검색·언어) — g_Toggle 0-1이 #kx-util 로 이동 1200px 안에 로고+메뉴 7개+우측 묶음이 들어가야 하므로 메뉴 여백 22→17px, 검색은 아이콘형(포커스 시 펼침), 언어는 'KO ▾' 축약 ═══════════════════════════════════════════════════════════ */ #kx-util { position:absolute; right:0; top:0; height:70px; display:flex; align-items:center; gap:6px; z-index:6; } #menu_st2 ul.topnav_st2 a.mnav, #menu_st2 .mnav { padding:0 17px !important; } #menu_st2 .mnav::after { left:13px !important; right:13px !important; } /* 로그인: 22블록의 absolute 배치 해제 → 묶음 안 정적 배치 */ #login_st2 { position:static !important; float:none !important; margin:0 8px 0 0 !important; top:auto !important; right:auto !important; font-size:12px !important; } /* 검색: 34px 원형 아이콘, 포커스 시 190px로 펼쳐지는 입력창 */ #kx-util #gb_search { position:static !important; margin:0 !important; width:auto !important; height:auto !important; } #kx-util #gb_form_search { display:flex; align-items:center; justify-content:flex-end; height:34px; width:34px; padding:0; border-radius:17px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); overflow:hidden; transition:width .25s ease; } #kx-util #gb_form_search:focus-within { width:190px; padding-left:12px; } #kx-util #gb_form_search .inputText { width:0; flex:1; min-width:0; height:20px !important; padding:0 !important; background:transparent !important; border:0 !important; color:#fff !important; font-size:12.5px !important; outline:0; } #kx-util #gb_form_search .inputText::placeholder { color:rgba(255,255,255,.5); } #kx-util #gb_form_search .submit { flex:none; width:16px; height:16px; margin:0 9px; cursor:pointer; filter:brightness(0) invert(1); opacity:.85; } /* 언어선택: 'KO ▾' 버튼 + 흰 드롭다운 (열림/닫힘은 스킨의 showHide() 인라인 토글 그대로) */ #kx-util #language { position:relative !important; margin:0 !important; width:auto !important; height:auto !important; font-size:12px; } #kx-util #language dd > a { color:rgba(255,255,255,.75) !important; text-decoration:none; padding:7px 8px; border-radius:6px; font-weight:600; } #kx-util #language dd > a { position:relative; padding-right:20px !important; } /* 화살표는 글자 대신 CSS 삼각형 — 문자 이스케이프/인코딩 문제 원천 차단 */ #kx-util #language dd > a::after { content:''; position:absolute; right:7px; top:50%; margin-top:-2px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid rgba(255,255,255,.7); } #kx-util #language dd > a:hover { color:#fff !important; background:rgba(255,255,255,.1); } #kx-util #selectLang { display:none; position:absolute; right:0; top:36px; margin:0; padding:6px 0; min-width:130px; list-style:none; background:#fff; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.18); } #kx-util #selectLang li a { display:block; padding:9px 16px; font-size:13px; color:#33465c; text-decoration:none; white-space:nowrap; } #kx-util #selectLang li a:hover { background:#f2f6fb; color:#0d4173; } /* ═══ [KOSSA] 24. 메인 배너 화살표 — 좌우 가장자리 세로 중앙, 반투명 원형(살짝만 보이게) ═══ */ #headernav_wrap { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:auto !important; max-width:none !important; height:310px !important; margin:0 !important; pointer-events:none; z-index:400; } #headernav { padding:0 !important; position:relative; width:100%; height:100%; } #headernav .nav_btn { position:absolute !important; top:50% !important; width:46px !important; height:46px !important; margin-top:-23px !important; border-radius:50% !important; float:none !important; cursor:pointer; pointer-events:auto; background:rgba(255,255,255,.18) !important; border:1px solid rgba(255,255,255,.35) !important; backdrop-filter:blur(2px); opacity:.55; transition:opacity .2s, background .2s; } #headernav .nav_btn:hover { opacity:1; background:rgba(255,255,255,.32) !important; } #headernav #back { left:28px !important; } #headernav #next { right:28px !important; } #headernav .nav_btn::before { content:''; position:absolute; top:50%; left:50%; width:12px; height:12px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translate(-40%,-50%) rotate(45deg); } #headernav #next::before { transform:translate(-60%,-50%) rotate(-135deg); } /* ═══ [KOSSA] 25. 배너~본문 간격 축소 (76px → 24px) ═══ */ /* 스킨의 빈 스페이서 #space1(40px) 제거 + 11블록의 margin-top 36px → 24px. 메인 배경 밴드(::before)도 같은 값으로 당겨 배너 하단에 계속 밀착시킨다 */ #space1 { display:none !important; height:0 !important; } #con1_wrap0 { margin-top:24px !important; } #con1_wrap0::before { top:-24px !important; } /* ═══ [KOSSA] 26. 협회소개 카드 라이트 시안(C) — 남색 그라디언트 → 흰/연블루 ═══ */ /* 헤더·푸터가 차콜로 바뀐 뒤 진한 카드가 무거워져 밝은 톤으로 전환. 타이포는 남색 계열 */ #kx-intro { background:linear-gradient(135deg,#ffffff 0%,#eef4fb 100%) !important; border:1px solid #dbe6f2 !important; box-shadow:0 4px 18px rgba(20,40,80,.08) !important; } #kx-intro .deco { background:rgba(28,63,115,.06) !important; } #kx-intro .deco2 { background:rgba(47,109,181,.08) !important; } #kx-intro .badge { background:#e8f0fb !important; border-color:#bcd6f0 !important; color:#1c3f73 !important; } #kx-intro .logo { color:#1c3f73 !important; } #kx-intro .ax { color:#2f6db5 !important; } #kx-intro .slogan{ color:#2f6db5 !important; } #kx-intro .desc { color:#3a4a5a !important; } #kx-intro .btns .b1 { background:#1c3f73 !important; color:#fff !important; border-color:#1c3f73 !important; } #kx-intro .btns .b1:hover { background:#2f6db5 !important; border-color:#2f6db5 !important; } #kx-intro .btns .b2 { background:#fff !important; color:#1c3f73 !important; border:1.5px solid #ccdaea !important; } #kx-intro .btns .b2:hover { border-color:#2f6db5 !important; color:#2f6db5 !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 27. 서브 배너 — 사진 제거, 라이트 + KOSSA 워터마크 (선명 블루) 주사위·만년필 사진(#s_banner_wrap00 배경)을 CSS 밴드로 대체. 이미지 관리 불필요. 팔레트: 배경 #fff→#f3f8ff, 하늘색 글로우, 타이포 #1e40af, 라인 #1d4ed8→#38bdf8 페이지명(.kx-banner-title)은 g_Toggle 8블록이 주입 — 여기서 크기/색/위치만 재정의 ═══════════════════════════════════════════════════════════ */ #s_banner_wrap00, #s_banner_wrap00 * { background-image:none !important; } #s_banner_wrap00 img { display:none !important; } #s_banner_wrap00 { position:relative !important; overflow:hidden !important; height:200px !important; background: radial-gradient(900px 260px at 78% 120%, rgba(56,189,248,.20) 0%, rgba(56,189,248,0) 60%), linear-gradient(135deg,#ffffff 0%,#f3f8ff 100%) !important; border-bottom:1px solid #dbeafe !important; } /* 대형 워터마크: 1200px 컨테이너 오른쪽 끝에 맞춰 배치, 아래로 살짝 잘려 '새겨진' 느낌 */ #s_banner_wrap00::before { content:'KOSSA'; position:absolute; right:calc(50% - 600px); bottom:-22px; font-family:Pretendard,'Pretendard Variable','Noto Sans KR',sans-serif; font-size:150px; font-weight:900; letter-spacing:-4px; line-height:1; color:rgba(29,78,216,.09); pointer-events:none; } #s_banner_wrap00::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#1d4ed8 0%,#38bdf8 45%,rgba(56,189,248,0) 100%); } /* 페이지명: 세로 정중앙, 선명한 로열블루 */ .kx-banner-title { font-size:34px !important; font-weight:800 !important; letter-spacing:-0.5px !important; color:#1e40af !important; bottom:auto !important; top:50% !important; transform:translate(-50%,-50%) !important; text-shadow:none !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 28. 서브페이지 팔레트 — 잉크 네이비 (#122F5C · #1D4C8F · #EAEFF7) "채도 유지·명도만 내림". 27블록(서브 배너)의 선명 블루 값을 이 계열로 덮어쓰고 사이드바·상단 리드 박스·페이지 제목을 같은 색으로 통일한다. ═══════════════════════════════════════════════════════════ */ /* 서브 배너 */ #s_banner_wrap00 { background: radial-gradient(900px 260px at 78% 120%, rgba(18,47,92,.10) 0%, rgba(18,47,92,0) 60%), linear-gradient(135deg,#ffffff 0%,#eaeff7 100%) !important; border-bottom:1px solid #d8e0ee !important; } #s_banner_wrap00::before { color:rgba(18,47,92,.08); } #s_banner_wrap00::after { background:linear-gradient(90deg,#122f5c 0%,#1d4c8f 50%,rgba(29,76,143,0) 100%); } .kx-banner-title { color:#122f5c !important; } /* 사이드바 (기존 '모던 v2'보다 높은 특이성으로 덮어씀) */ #s_left11_wrap0 #s_left11_wrap h2 { color:#122f5c !important; border-bottom-color:#1d4c8f !important; } #s_left11_wrap0 #s_left11_wrap > ul > li > a { color:#334155 !important; } #s_left11_wrap0 #s_left11_wrap > ul > li > a:hover { background:#eaeff7 !important; color:#1d4c8f !important; border-left-color:#1d4c8f !important; } #s_left11_wrap0 #s_left11_wrap > ul > li > a.on2 { background:#122f5c !important; color:#fff !important; border-left-color:#7f9fcf !important; box-shadow:0 5px 14px rgba(18,47,92,.26) !important; } /* 상단 리드 박스 (GREETINGS 등) */ .kx-lead-std { background:linear-gradient(135deg,#122f5c 0%,#1a4278 100%) !important; box-shadow:0 8px 22px rgba(18,47,92,.20) !important; } .kx-lead-std .b { background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.42) !important; color:#dbe5f5 !important; } /* 페이지 제목(26px) — 각 페이지의 표준 제목 클래스들을 같은 잉크 네이비로 */ .kg-section-title, .kp2-title, .kh-page-title, .ko-page-title, .ko2-page-title, .kp-section-title, .kl-page-title, .kossa-wrap .section-heading, .kb-title, .kg-title, .ksc-title, .kwp-title, .kre-title, .kax-title, .km-title, .kd2-title, .kd3-title, .kj-title, .kf-title, .kq-title { color:#122f5c !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 29. 페이지 소스 내장 리드 박스 통일 — 잉크 네이비 사업소개·회원사·회원가입 페이지는 소스 안에 자체 리드 클래스를 가진다. (1) 남색 그라디언트형 8종 → 28블록과 같은 #122F5C 계열로 교체 (2) 연회색 박스형 3종(유관기관·회원가입절차·회원구분) → 같은 네이비 밴드로 승격 + CSS 배지 ═══════════════════════════════════════════════════════════ */ /* (1) 그라디언트형 */ .kb-lead, .kg-lead, .ksc-lead, .kwp-lead, .km-lead, .kd2-lead, .kd3-lead, .kax-hero { background:linear-gradient(135deg,#122f5c 0%,#1a4278 100%) !important; box-shadow:0 8px 22px rgba(18,47,92,.20) !important; } .kb-lead .b, .kg-lead .b, .ksc-lead .b, .kwp-lead .b, .km-lead .b, .kd2-lead .b, .kd3-lead .b, .kax-hero .yr { background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.42) !important; color:#dbe5f5 !important; } .kax-hero .tm { color:#c9d9f2 !important; } /* (2) 연회색 박스형 → 네이비 밴드 */ .kre-lead, .kj-lead, .kf-lead { background:linear-gradient(135deg,#122f5c 0%,#1a4278 100%) !important; border:none !important; border-radius:12px !important; padding:22px 26px !important; color:rgba(255,255,255,.88) !important; font-size:13.5px !important; line-height:1.75 !important; box-shadow:0 8px 22px rgba(18,47,92,.20) !important; } .kre-lead strong, .kj-lead strong, .kf-lead strong { color:#fff !important; } .kre-lead::before, .kj-lead::before, .kf-lead::before { display:inline-block; margin-bottom:9px; padding:3px 11px; border-radius:13px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42); font-size:11px; font-weight:700; letter-spacing:.5px; color:#dbe5f5; } .kre-lead::before { content:'PARTNERS'; } .kj-lead::before { content:'PROCESS'; } .kf-lead::before { content:'MEMBERSHIP'; } .kre-lead::before, .kj-lead::before, .kf-lead::before { display:block; width:max-content; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 30. 메인 페이지 — 잉크 네이비 팔레트 ═══════════════════════════════════════════════════════════ */ /* 섹션 제목 4곳(공지/행사 .kx-wtit, 주요활동 .kx-act-hd, 주요 회원사 #contit1) 글자 + ▍막대 */ .kx-wtit, .kx-act-hd, #contit1 { color:#122f5c !important; } .kx-wtit::before, .kx-act-hd::before, #contit1::before { background:#122f5c !important; } .kx-wtit .more:hover { color:#1d4c8f !important; } .kx-act-hd .arrow { color:#122f5c !important; border-color:#d8e0ee !important; } .kx-act-hd .arrow:hover { background:#122f5c !important; border-color:#122f5c !important; color:#fff !important; } /* 협회소개 카드(라이트 C안) 포인트 색 */ #kx-intro .deco { background:rgba(18,47,92,.06) !important; } #kx-intro .deco2 { background:rgba(29,76,143,.08) !important; } #kx-intro .badge { background:#eaeff7 !important; border-color:#c5d3ea !important; color:#122f5c !important; } #kx-intro .logo { color:#122f5c !important; } #kx-intro .ax, #kx-intro .slogan { color:#1d4c8f !important; } #kx-intro .btns .b1 { background:#122f5c !important; border-color:#122f5c !important; } #kx-intro .btns .b1:hover { background:#1d4c8f !important; border-color:#1d4c8f !important; } #kx-intro .btns .b2 { color:#122f5c !important; border-color:#c5d3ea !important; } #kx-intro .btns .b2:hover { color:#1d4c8f !important; border-color:#1d4c8f !important; } /* 캘린더: 오늘 표시(남색 원)·월 이동 테두리, 위젯 제목 글자 */ #cons12_wrap [style*="background-color: rgb(14, 72, 126)"], #cons12_wrap .calendar-table__body [class*="today"], #cons12_wrap .calendar-table__body [aria-current] { background:#122f5c !important; border-color:#122f5c !important; } #contxt1 { border-color:#122f5c !important; } #cons12_wrap [class*="xe-text-"] { color:#122f5c !important; } /* ═══ [KOSSA] 31. 메인 공지/행사 제목 한 줄 말줄임 가드 ═══ */ /* 공지사항 제목은 위젯 설정(제목 글자수)이 서버에서 자른다 — 글자수를 늘린 뒤 긴 제목이 두 줄로 꺾이지 않도록 브라우저에서 한 줄 말줄임으로 마무리 */ .widgetZineA li a { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; } .widgetZineA li .date { float:right !important; margin-left:12px !important; } #recent-posts-widget > div > a > *:first-child { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; } /* ═══ [KOSSA] 32. 로그인 영역 '관리자' 팝업 가독성 복구 ═══ */ /* 18블록의 #login_st2 li a{color:흰색}이 흰 배경 팝업(.memberProfile) 안 링크까지 흰색으로 만들어 메뉴가 사라져 보이던 문제. 팝업 내부는 진한 글자로 되돌린다 */ #login_st2 .memberProfile { z-index:700 !important; } #login_st2 .memberProfile .authorName { color:#122f5c !important; } #login_st2 .memberProfile ul li { border:none !important; padding:2px 0 !important; float:none !important; } #login_st2 .memberProfile li a, #login_st2 .memberProfile a { color:#1a2a3a !important; font-size:12.5px !important; } #login_st2 .memberProfile li a:hover, #login_st2 .memberProfile a:hover { color:#1d4c8f !important; } /* ═══ [KOSSA] 33. 게시판 머리글·공지 라벨 잉크 네이비 ═══ */ /* 표 게시판 8곳(공지·협회소식·동향정보·캘린더·자료실·회원사소식·오픈소스기업·세미나) 검수 결과 글꼴/크기/굵기/정렬은 동일. 머리글 글자와 '공지' 라벨만 옛 남색(#1c3f73)이라 팔레트에 맞춤 */ table.boardList thead th { background:#eaeff7 !important; color:#122f5c !important; } /* 기존 스킨 규칙의 특이성이 높아 tbody tr 까지 명시해야 이긴다 (라이브 A/B 테스트로 확인) */ table.boardList tbody tr td.notice, table.boardList tbody tr.notice td.no_line { color:#122f5c !important; } table.boardList tbody tr td.title a:hover { color:#1d4c8f !important; } table.boardList tbody tr.notice td.title a { color:#122f5c !important; } /* ═══════════════════════════════════════════════════════════ [KOSSA] 34. 캘린더 타이포 통일 (메인 위젯 + 캘린더 게시판) 검수 결과: 날짜 숫자가 위젯 자체 글꼴 'Inter' 12px/300(가늘고 이질적), 메인과 게시판의 월 제목·요일 크기/색이 서로 다름, 메인은 30블록의 광범위 규칙 때문에 일요일 빨강이 사라짐. ═══════════════════════════════════════════════════════════ */ /* 날짜 숫자: Pretendard 13px/500 (높이 246px 유지 확인) — 색은 위젯 것(일요일 빨강 등) 유지 */ .calendar-table__body, .calendar-table__body * { font-family:Pretendard,'Pretendard Variable','Noto Sans KR','Malgun Gothic',sans-serif !important; } .calendar-table__body .btn-calendar-date, .calendar-table__body .btn-calendar-date p { font-size:13px !important; font-weight:500 !important; } /* 오늘 표시(위젯 고유 남색 #002060 → 잉크 네이비) — 반드시 날짜

에만! ([class*="bg-"] 광범위 지정은 흰 배경 유틸 클래스를 가진 호버 팝업까지 남색으로 칠했던 사고) */ .calendar-table__body .btn-calendar-date > div:first-child p[style*="background"], .calendar-table__body .btn-calendar-date > div:first-child p[class*="bg-"] { background-color:#122f5c !important; color:#fff !important; } /* 호버 팝업(일정 목록): 흰 배경 · 진한 글자 · 호버 시 잉크 네이비 */ .calendar-table__body .btn-small-modal, .calendar-table__body .btn-calendar-date .btn-small-modal { background:#fff !important; color:#1a1a1a !important; border:1px solid #d8e0ee !important; border-radius:10px !important; box-shadow:0 10px 26px rgba(18,47,92,.16) !important; } #cons12_wrap .calendar-table__body .btn-small-modal *, .calendar-table__body .btn-small-modal * { color:#1a1a1a !important; } #cons12_wrap .calendar-table__body .btn-small-modal .xe-modal-desc:hover, .calendar-table__body .btn-small-modal .xe-modal-desc:hover, .calendar-table__body .btn-small-modal a:hover { color:#122f5c !important; } /* 일정 막대(여러 날짜에 걸친 일정): 위젯 고유 #002060 → 잉크 네이비, 글자는 흰색 고정 */ .calendar-table__body .btn-calendar-data { background-color:#122f5c !important; } #cons12_wrap .calendar-table__body .btn-calendar-data, #cons12_wrap .calendar-table__body .btn-calendar-data *, .calendar-table__body .btn-calendar-data, .calendar-table__body .btn-calendar-data * { color:#fff !important; } /* 월 제목 · 요일 : 메인/게시판 동일 규격 (:has 미지원 브라우저는 기존 모습 유지) */ [class*="calendar"]:has(.calendar-table__body) [class*="xe-text-"], #cons12_wrap [class*="xe-text-"] { color:#122f5c !important; font-family:Pretendard,'Noto Sans KR',sans-serif !important; } [class*="calendar"]:has(.calendar-table__body) [class*="xe-text-"][class*="text-[1"], [class*="calendar"]:has(.calendar-table__body) [class*="font-[6"] { font-weight:600 !important; } /* 월 제목·요일 (구조 기반: 게시판 달력은 xe-text- 클래스가 없음 → 태그/위치로 지정) */ .xe-calendar-title { font-size:18px !important; font-weight:700 !important; color:#122f5c !important; font-family:Pretendard,'Noto Sans KR',sans-serif !important; } div:has(+ .calendar-table__body) > p, div:has(+ .calendar-table__body) p { font-size:14px !important; font-weight:600 !important; color:#122f5c !important; font-family:Pretendard,'Noto Sans KR',sans-serif !important; } /* 요일 첫 칸(일요일)은 빨강 유지 */ div:has(+ .calendar-table__body) > p:first-child, div:has(+ .calendar-table__body) > *:first-child p { color:#eb6363 !important; } /* 일요일 헤더 빨강은 유지 — 30블록/위 규칙보다 뒤에 두어 우선 */ #cons12_wrap [class*="EB6363"], #cons12_wrap [class*="eb6363"], [class*="calendar"]:has(.calendar-table__body) [class*="EB6363"], [class*="calendar"]:has(.calendar-table__body) [class*="eb6363"] { color:#eb6363 !important; } /* ═══ [KOSSA] 35. 캘린더 게시판 — 일정 등록 문의 바 (g_Toggle 10-10이 달력 아래에 주입) ═══ */ .kx-cal-cta { display:flex; align-items:center; gap:16px; margin:18px 0 26px; padding:16px 20px; border:1px solid #d8e0ee; border-radius:12px; background:linear-gradient(135deg,#ffffff,#eaeff7); font-family:Pretendard,'Pretendard Variable','Noto Sans KR',sans-serif; } .kx-cal-cta .ic { flex:none; width:38px; height:38px; border-radius:10px; background:#122f5c; color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; } .kx-cal-cta .tx { flex:1; min-width:0; } .kx-cal-cta .tt { font-size:14.5px; font-weight:800; color:#122f5c; letter-spacing:-0.3px; } .kx-cal-cta .ds { font-size:12.5px; color:#4a6070; margin-top:3px; line-height:1.6; word-break:keep-all; } .kx-cal-cta .bt { flex:none; display:inline-block; padding:9px 18px; border-radius:20px; background:#122f5c; color:#fff !important; font-size:12.5px; font-weight:700; text-decoration:none !important; transition:background .15s; } .kx-cal-cta .bt:hover { background:#1d4c8f; } /* ═══ [KOSSA] 36. 캘린더 게시판 — 이번 달·다음 달 2단 표시 (g_Toggle 10-11이 #f를 복제해 구성) ═══ */ #kx-cal2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } #kx-cal2 > * { min-width:0; } /* 복제본의 '오픈소스 캘린더' 제목 행은 자리는 남기고 글자만 감춘다. display:none 으로 지우면 오른쪽 달력이 43px 위로 붙어 상단이 어긋난다(실측). */ #kx-cal2 #f-next > div:first-child { visibility:hidden !important; } /* 화살표 배치: 왼쪽 달력에 '이전', 오른쪽 달력에 '다음' (두 달이 함께 이동) 복제본의 next 는 g_Toggle 10-11 이 원본 버튼으로 연결해 실제 동작시킨다 */ #kx-cal2 #f .xe-modal__btn-calendar-next { visibility:hidden !important; } #kx-cal2 #f-next .xe-modal__btn-calendar-prev { visibility:hidden !important; } #kx-cal2 #f-next .xe-modal__btn-calendar-next { visibility:visible !important; pointer-events:auto !important; cursor:pointer !important; } #kx-cal2 .calendar-table__body { height:auto !important; min-height:246px; } #kx-cal2 .btn-calendar-date, #kx-cal2 .btn-calendar-date p { font-size:12.5px !important; } #kx-cal2.kx-loading #f-next { opacity:.45; transition:opacity .2s; } /* ═══ [KOSSA] 37. 문서 페이지 하단 '이 게시물을' 팝업 메뉴 숨김 ═══ */ /* XE 문서(article) 페이지 스킨이 본문 아래에 출력하는 스크랩/신고용 트리거 — 안내 페이지에는 불필요 */ .xe_content .document_popup_menu { display:none !important; } /* ═══ [KOSSA] 38. 사이드바 3단계(하위) 메뉴 — 들여쓰기·간격 ═══ */ /* 2023/2022년 기업정보, 세미나 정보 등이 상위 항목과 같은 선에 12px 글씨로 붙어 있어 하위인지 구분이 안 되고 줄 간격도 좁았다(항목 높이 14px). 세로 안내선 + 대시 마커로 계층 표현 */ #s_left11_wrap ul li ul { margin:4px 0 8px 14px !important; padding:0 !important; border-left:1px solid #d8e0ee !important; } #s_left11_wrap ul li ul li { margin:0 !important; padding:0 !important; background:none !important; list-style:none !important; } #s_left11_wrap ul li ul li a { position:relative !important; display:block !important; padding:6px 10px 6px 20px !important; margin:1px 0 !important; font-size:12.5px !important; line-height:1.45 !important; color:#5a6b7f !important; border-radius:0 6px 6px 0 !important; text-decoration:none !important; } #s_left11_wrap ul li ul li a::before { content:'' !important; position:absolute !important; left:8px !important; top:50% !important; width:5px !important; height:1px !important; background:#a9b8cc !important; transition:width .15s, background .15s; } #s_left11_wrap ul li ul li a:hover { background:#eaeff7 !important; color:#1d4c8f !important; } #s_left11_wrap ul li ul li a:hover::before { background:#1d4c8f !important; width:8px !important; } /* 현재 보고 있는 하위 항목 */ #s_left11_wrap ul li ul li a.on3 { color:#122f5c !important; font-weight:700 !important; background:#eaeff7 !important; } #s_left11_wrap ul li ul li a.on3::before { background:#122f5c !important; width:8px !important; } /* ═══ [KOSSA] 39. 전체 검수 반영 (2026-09-02) ═══ */ /* 39-1 언어 선택(EN/JP) 숨김 — 번역 콘텐츠가 없어 선택해도 한국어 그대로라 혼란만 줌 */ #kx-util #language { display:none !important; } /* 39-2 터치 기기(실기기 폭 < 1000 또는 coarse pointer)에서는 스티키 푸터 해제 — 강제 viewport 1240 때문에 100vh가 화면의 2~3배가 되어 메인 하단 절반이 빈 화면으로 보였음 */ html.kx-touch body { min-height:0 !important; } html.kx-touch #footer1_wrap00_bg, html.kx-touch #footer1_wrap00 { margin-top:0 !important; } /* 39-3 시각적으로 숨긴 h1 (검색엔진·스크린리더용) */ .kx-sr-only { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; } /* 39-4 게시글 본문 가독성: 13px → 15px */ .xe_content .document_content, .xe_content .rd_body, .board_read .xe_content { font-size:15px !important; line-height:1.8 !important; } /* ═══ [KOSSA] 40. 캘린더 일정 표시 — 좁은 셀에서 제목이 잘리던 문제 (2026-09-09) ═══ 2단 달력에서 셀 폭이 65px까지 좁아져 "[행사] 오픈 테크넷 서미 2026(9/15(화))" 같은 제목이 두세 글자만 보이고 잘렸다. 셀에는 색 바만 남기고, 제목은 마우스 오버 툴팁과 날짜 클릭 모달로 옮긴다. (툴팁 주입은 g_Toggle.js 블록 0-6) */ 2026-10-25: 바 표시는 좁은 2단 달력(#kx-cal2, 게시판 목록)에서만. 글 보기 화면의 1단 달력은 셀이 넓어 제목이 바로 보여야 하는데, 바만 남아 '파란 줄만 있는 날'처럼 보였다 */ #kx-cal2 .calendar-table__body .btn-calendar-date-list { gap:3px !important; padding:0 1px !important; } #kx-cal2 .calendar-table__body .btn-calendar-date-list p { font-size:0 !important; line-height:0 !important; height:7px !important; padding:0 !important; border-radius:4px !important; letter-spacing:0 !important; overflow:hidden !important; text-indent:-9999px !important; } #kx-cal2 .calendar-table__body .btn-calendar-date-list p:hover { filter:brightness(.88); } /* 1단 달력: 제목 한 줄(넘치면 말줄임), 글씨는 셀에 맞게 조금 작게 */ .calendar-table__body .btn-calendar-date-list p { font-size:11.5px !important; line-height:14px !important; padding:3px 5px !important; } /* 일정이 있는 날은 날짜 숫자를 진하게 — 바와 함께 눈에 띄도록 */ .calendar-table__body .btn-calendar-date:has(.btn-calendar-date-list p) > div:first-child p { font-weight:700 !important; } /* ═══ [KOSSA] 41. NEW 배지 톤다운 (2026-09-09) ═══ 붉은 단색 블록에다 위젯의 13px !important 규칙까지 걸려 제목보다 눈에 띄었다. 연한 배경 · 붉은 글자 · 9px로 낮춰 '표시'로만 남긴다. (위치는 g_Toggle.js 10-3) */ .kx-new, #con3_wrap0 #recent-posts-widget .kx-new, #cons31_wrap .widgetZineA li .kx-new { display:inline-block !important; flex:0 0 auto !important; margin-left:5px !important; padding:0 4px !important; background:#fdeeea !important; color:#d2492e !important; font-size:9px !important; font-weight:700 !important; height:15px !important; line-height:15px !important; border-radius:3px !important; letter-spacing:.02em !important; vertical-align:1px !important; } /* ═══ [KOSSA] 42. 공지 팝업 위치 (2026-09-28) ═══ g_Toggle.js 0-1이 로고 행 안의 #divpop1을 body로 꺼내며 .kx-pop을 붙인다. 관리자 위치값(left:-400px)은 옛 980px 컨테이너 기준이라 본문 왼쪽 끝에 맞춘다. display/visibility는 건드리지 않는다 — '하루 보지 않기'·닫기가 인라인으로 제어 */ /* 2026-10-23: 팝업 여러 개(#divpop2 …) 대응 — 여러 개일 때 가로 위치는 g_Toggle.js 0-1 이 나란히 다시 잡는다 */ .kx-pop[id^="divpop"] { position:absolute !important; left:max(16px, calc(50% - 600px)) !important; top:120px !important; z-index:1000 !important; } .kx-pop[id^="divpop"] img { max-width:calc(100vw - 32px); height:auto; } /* ═══ [KOSSA] 43. 개인 회원가입 링크 숨김 (2026-10-23) ═══ 우측 상단 '회원가입'과 로그인 창의 '회원가입·인증메일 재발송'은 XE 개인 회원가입(dispMemberSignUpForm) — 새 사이트에서 개인 가입을 껐으므로 숨긴다. 상단 메뉴(GNB)의 '회원가입'(/xe/f1, 회원사 가입 안내)은 그대로 둔다 */ #login_st2 li:has(a[href*="dispMemberSignUpForm"]), #loginWindow .help li.join, #loginWindow .help li:has(a[href*="dispMemberResendAuthMail"]) { display:none !important; } /* ═══ [KOSSA] 44. 모바일·태블릿 반응형 (2026-10-26) ═══ 레이아웃은 1200px 고정 설계(그레이벨라). 900px 이하 화면에서는 고정 폭을 풀고 한 단으로 쌓는다. PC 화면은 전혀 바뀌지 않는다(미디어쿼리 안에만 작성). 뷰포트는 g_Toggle.js 블록 0 이 device-width 로 바꾼다. 메뉴는 g_Toggle.js 블록 0-8 이 햄버거 버튼(#kx-nav-btn)을 만들고 body.kx-nav-open 으로 연다. */ #kx-nav-btn { display:none; } /* PC 에선 숨김 — 아래 미디어쿼리에서만 보인다 */ @media (max-width: 900px) { html, body { min-width:0 !important; overflow-x:clip !important; } /* hidden 은 body 를 스크롤 상자로 만들어 sticky 머리띠가 풀린다 */ img, iframe, video, embed { max-width:100%; height:auto; } /* 고정 폭 컨테이너 전부 해제 */ #tgnb2_wrap00_st2, #tgnb2_wrap0_st2, #banner_wrap00, #headernav_wrap, #headernav, #headerimgs, #con0_wrap0, #con1_wrap0, #con3_wrap0, #cons11_wrap, #cons12_wrap, #cons21_wrap, #cons31_wrap, #cons32_wrap, #contit1, #contxt1, #space2, #space2_st3, #footer1_wrap00_bg, #footer1_wrap0, #s_banner_wrap00, #s_con0_map, #s_con0_wrap0, #s_left11_wrap0, #s_left11_wrap, #s_mid21_wrap0, .xe-widget-wrapper, #xe-calendar-first { width:100% !important; max-width:100% !important; min-width:0 !important; /* body 가 flex 라 auto 면 내용 폭(0)으로 줄어든다 */ float:none !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; } #con1_wrap0, #con3_wrap0 { display:block !important; height:auto !important; } #cons11_wrap, #cons12_wrap, #cons21_wrap, #cons31_wrap, #cons32_wrap { display:block !important; height:auto !important; padding:0 16px !important; } #con0_wrap0 > .xe-widget-wrapper, #contit1 { padding:0 16px !important; } #cons12_wrap { margin-top:16px !important; } .kx-act-hd { margin-top:28px !important; } /* PC에선 g_Toggle.js 가 캘린더 높이에 맞춰 inline margin 을 준다 */ #contit1 { position:relative !important; height:auto !important; min-height:40px; align-items:center; } #kx-mem-link { right:16px !important; } #cons11_wrap::after, #cons21_wrap::after, #cons31_wrap::after, #cons32_wrap::after, #con3_wrap0::after { content:""; display:block; clear:both; } #cons21_wrap { height:auto !important; overflow:visible !important; } #cons21_wrap > *, #cons31_wrap > *, #cons32_wrap > * { float:none !important; width:auto !important; max-width:100% !important; } #xe-calendar-first, #xe-calendar-first > * { width:100% !important; max-width:100% !important; box-sizing:border-box; } #cons32_wrap { margin-top:24px !important; } /* 헤더: 로고 왼쪽 · 검색·메뉴 버튼 오른쪽, 한 줄 */ #tgnb2_wrap00_st2 { position:sticky; top:0; z-index:900; } #tgnb2_wrap0_st2 { height:56px !important; display:flex !important; align-items:center; padding:0 12px 0 16px !important; } /* PC 는 스크롤하면 .kx-fixed(가운데 1200px 고정)로 바뀐다 — 모바일은 바깥 띠가 sticky 라 그대로 둔다 */ #tgnb2_wrap0_st2, #tgnb2_wrap0_st2.kx-fixed { position:relative !important; left:auto !important; top:auto !important; margin-left:0 !important; transform:none !important; } #kx-logo { position:static !important; height:auto !important; width:auto !important; flex:1; } #kx-logo { min-width:0; overflow:hidden; } #kx-logo img { height:auto !important; width:auto !important; max-width:min(230px, calc(100vw - 150px)) !important; max-height:22px; } #kx-util { position:static !important; height:auto !important; width:auto !important; gap:4px !important; } #kx-util #login_st2 { display:none !important; } #kx-nav-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:transparent; cursor:pointer; color:#fff; padding:0; } #kx-nav-btn span { display:block; width:22px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:background .15s; } #kx-nav-btn span::before, #kx-nav-btn span::after { content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s; } #kx-nav-btn span::before { top:-7px; } #kx-nav-btn span::after { top:7px; } body.kx-nav-open #kx-nav-btn span { background:transparent; } body.kx-nav-open #kx-nav-btn span::before { top:0; transform:rotate(45deg); } body.kx-nav-open #kx-nav-btn span::after { top:0; transform:rotate(-45deg); } /* 메뉴 패널: 헤더 아래 전체 폭, 아코디언 */ #menu_st2 { display:none !important; position:absolute !important; left:0 !important; right:0 !important; top:56px !important; width:auto !important; height:auto !important; max-height:calc(100vh - 56px); overflow-y:auto; background:#fff !important; border-bottom:1px solid #dfe3ea; box-shadow:0 18px 30px -20px rgba(11,37,69,.35); } body.kx-nav-open #menu_st2 { display:block !important; } #menu_st2 ul.topnav_st2 { float:none !important; width:auto !important; height:auto !important; display:block !important; } #menu_st2 ul.topnav_st2 > li.mnav_li, #menu_st2 ul.topnav_st2 > li { float:none !important; display:block !important; width:auto !important; height:auto !important; border-bottom:1px solid #eef1f5; background:none !important; position:static !important; } html body #tgnb2_wrap0_st2 #menu_st2 ul.topnav_st2 > li > a, #menu_st2 ul.topnav_st2 > li > a { display:block !important; padding:14px 18px !important; height:auto !important; line-height:1.4 !important; font-size:16px !important; font-weight:700 !important; color:#1d2433 !important; background:none !important; text-align:left !important; } /* 기존 PC용 밑줄 막대(a.mnav::after, 절대위치)·줄바꿈 공백이 만드는 빈 줄 제거 */ #menu_st2 ul.topnav_st2 > li, #menu_st2 ul.subnav_st2 > li { font-size:0 !important; line-height:0 !important; white-space:normal !important; padding:0 !important; } #menu_st2 ul.topnav_st2 > li > a.mnav::after { display:none !important; } #menu_st2 ul.topnav_st2 > li.kx-has-sub > a.mnav::after { display:block !important; position:static !important; background:none !important; height:8px !important; bottom:auto !important; left:auto !important; top:auto !important; } #menu_st2 ul.topnav_st2 > li.kx-has-sub > a::after { content:""; float:right; width:8px; height:8px; margin:6px 4px 0 0; border-right:2px solid #8a94a6; border-bottom:2px solid #8a94a6; transform:rotate(45deg); transition:transform .15s; } #menu_st2 ul.topnav_st2 > li.kx-open > a::after { transform:rotate(-135deg); margin-top:10px; } #menu_st2 ul.subnav_st2 { display:none !important; position:static !important; width:auto !important; height:auto !important; background:#f5f7fa !important; padding:6px 0 !important; margin:0 !important; border:0 !important; box-shadow:none !important; opacity:1 !important; visibility:visible !important; } #menu_st2 li.kx-open > ul.subnav_st2 { display:block !important; } #menu_st2 ul.subnav_st2 li { float:none !important; display:block !important; width:auto !important; height:auto !important; background:none !important; } html body #tgnb2_wrap0_st2 #menu_st2 ul.subnav_st2 li a, #menu_st2 ul.subnav_st2 li a { display:block !important; padding:10px 18px 10px 30px !important; height:auto !important; line-height:1.4 !important; font-size:15px !important; color:#55657a !important; background:none !important; text-align:left !important; width:auto !important; } /* 메인 배너(슬라이드): 안쪽이 모두 absolute 라 폭이 0 으로 접힌다 — 폭을 직접 준다 */ #banner_wrap00, #headernav_wrap, #headernav, #headerimgs, .headerimg { width:100% !important; left:0 !important; height:46vw !important; min-height:150px; max-height:310px; } #headertxt_wrap_st4 { width:auto !important; left:16px !important; right:16px !important; } .deco { display:none !important; } .headerimg { background-size:cover !important; background-position:center !important; } #headernav .nav_btn { transform:scale(.7); } /* 공지 팝업: 화면 폭에 맞춤 — 모바일에선 첫 번째 팝업만 */ .kx-pop[id^="divpop"] { position:fixed !important; left:16px !important; right:16px !important; top:72px !important; width:auto !important; } .kx-pop[id^="divpop"] .pop_area_out, .kx-pop[id^="divpop"] .pop_area_in { width:auto !important; } .kx-pop[id^="divpop"] img { width:100%; max-width:100% !important; } .kx-pop[id^="divpop"] .pop_bott { display:flex !important; align-items:center; justify-content:space-between; height:auto !important; } .kx-pop[id^="divpop"] .pop_bott_1day, .kx-pop[id^="divpop"] .pop_bott_close { float:none !important; display:flex !important; align-items:center; gap:4px; width:auto !important; } .kx-pop[id^="divpop"] .pop_bott img { width:auto !important; } /* '오늘 하루 보지 않기'·'닫기' 글자 그림은 원래 크기로 */ #divpop2.kx-pop { display:none !important; } /* 서브: 타이틀 배너 · 경로 · 왼쪽 메뉴를 가로 칩으로 */ #s_banner_wrap00 { height:110px !important; background-size:cover !important; } #s_banner_wrap00 { position:relative !important; } #s_banner_wrap00 .kx-banner-title { font-size:24px !important; left:16px !important; right:16px !important; width:auto !important; margin:0 !important; transform:none !important; top:50% !important; translate:0 -50%; } #s_con0_map { padding:0 16px !important; height:auto !important; } #s_con0_map ul { float:none !important; width:auto !important; } #s_left11_wrap0 { padding:8px 16px 0 !important; } #s_left11_wrap h2 { display:none !important; } #s_left11_wrap ul { display:flex !important; gap:8px; overflow-x:auto; padding:4px 0 10px !important; height:auto !important; -webkit-overflow-scrolling:touch; } #s_left11_wrap ul li { flex:0 0 auto; width:auto !important; height:auto !important; float:none !important; margin:0 !important; } #s_left11_wrap ul li a { display:block !important; white-space:nowrap; padding:7px 14px !important; height:auto !important; line-height:1.4 !important; border:1px solid #dfe3ea !important; border-radius:999px !important; font-size:14px !important; background:#fff !important; width:auto !important; } #s_mid21_wrap0 { padding:8px 16px 0 !important; width:auto !important; } /* 게시판 목록: 번호·글쓴이·조회 숨기고 제목+날짜만 */ table.boardList { width:100% !important; table-layout:fixed; } table.boardList th.no_line, table.boardList td.no_line, table.boardList th.author, table.boardList td.author, table.boardList th.reading, table.boardList td.reading, table.boardList th.recommend, table.boardList td.recommend, table.boardList td.no, table.boardList th.no, table.boardList td.num, table.boardList td.notice { display:none !important; } table.boardList tr.notice td.title, table.boardList tr:has(td.notice) td.title { font-weight:700; } table.boardList td.title { white-space:normal !important; word-break:break-all; } table.boardList td.title a { white-space:normal !important; } table.boardList td.date, table.boardList th.date { width:84px; white-space:nowrap; font-size:12px; } .boardBottom .pagination a, .boardBottom .pagination strong { min-width:30px; } .boardSearch { width:auto !important; } /* 소개 페이지 카드 줄(PC 3~6칸) → 모바일 한 줄에 하나(또는 둘) */ .kp2-branches, .kb-cards, .kax-cards, .kg-cards, .ksc-cards, .kwp-cards, .kf-benefit, .kx-cal-cta { flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; } .kp2-branches > *, .kb-cards > *, .kax-cards > *, .kg-cards > *, .ksc-cards > *, .kwp-cards > *, .kf-benefit > *, .kx-cal-cta > * { width:auto !important; max-width:none !important; min-width:0 !important; flex:0 0 auto !important; } .kre-grid, .kf-grade, .kj-steps, .thumbnailBox { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; } .kre-grid > *, .kf-grade > *, .kj-steps > *, .thumbnailBox > * { width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; float:none !important; } .kj-step::after { display:none !important; } /* 단계 사이 가로 연결선 */ .kb-stats, .kax-stats { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; } .kb-stats > *, .kax-stats > * { width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; border-left:0 !important; border-right:0 !important; } .kax-contact { grid-template-columns:1fr !important; } .thumbnailBox .cell { width:auto !important; } /* PC 4열 계산(calc 25%) 해제 */ /* K-OpenSource X 프로그램 표(시간·제목·연사 3칸) → 한 행을 위아래로 */ table.kax-prog, table.kax-prog tbody { display:block !important; width:auto !important; } table.kax-prog thead, table.kax-prog tr:has(> th) { display:none !important; } table.kax-prog tr { display:block !important; padding:12px 14px !important; border-bottom:1px solid #e3e9f2; } table.kax-prog td { display:block !important; width:auto !important; padding:2px 0 !important; border:0 !important; text-align:left !important; background:none !important; white-space:normal !important; } table.kax-prog td.t { font-size:13px !important; color:#5a6b80 !important; } table.kax-prog td.s { font-size:13px !important; } table.kax-prog td.s span { display:inline !important; margin-left:6px; } /* 역대회장: 현 회장 카드(글·사진 2단) 세로로, 역대 회장 4칸 → 2칸, 빈 자리 카드 숨김 */ .kp-hero { flex-direction:column !important; } .kp-hero > * { width:auto !important; max-width:none !important; flex:0 0 auto !important; } .kp-hero-photo img { max-width:220px; margin:0 auto; display:block; } .kp-row { display:grid !important; grid-template-columns:1fr 1fr !important; } .kp-row > .kp-card { width:auto !important; min-width:0 !important; border-bottom:1px solid #e4eef7; } .kp-row > .kp-card:not(:has([class])) { display:none !important; } /* 오시는 길: 카카오 약도는 952px 로 그려진다 — 상자를 화면 폭으로 줄이고 지도 가운데(협회 위치)를 맞춘다 */ .kl-map-box .root_daum_roughmap { width:100% !important; overflow:hidden !important; } .kl-map-box .root_daum_roughmap .wrap_map { position:relative; left:50%; margin-left:-476px; width:952px !important; height:340px !important; overflow:hidden !important; } .kl-map-box .root_daum_roughmap .wrap_map .map { position:relative !important; top:-55px; height:450px !important; } .kl-map-box .root_daum_roughmap .cont { width:auto !important; } .kl-map-box .root_daum_roughmap .cont * { white-space:normal !important; } /* 임원현황 표: PC 칸 폭·여백을 풀어 소속기관 칸이 세로로 깨지지 않게 */ table.ko2-table { width:100% !important; table-layout:auto !important; min-width:0 !important; } table.ko2-table th, table.ko2-table td { width:auto !important; min-width:0 !important; padding:10px 6px !important; font-size:13px !important; letter-spacing:0 !important; word-break:keep-all; } table.ko2-table td.role { white-space:nowrap; } table.ko2-table td.org { text-align:left !important; } /* 조직도: 담당자 연락처 4칸 → 한 줄에 하나(사이 구분선 숨김) */ .contact-bar { flex-direction:column !important; align-items:stretch !important; gap:14px !important; } .contact-bar > :not(.contact-item) { display:none !important; } .contact-bar > .contact-item { width:auto !important; max-width:none !important; flex:0 0 auto !important; } .contact-bar .c-info { width:auto !important; flex:1 1 auto !important; min-width:0 !important; } .contact-bar .c-info * { word-break:break-all; } /* 조직도 'One&only KOSSA 체계도' 표(5칸) → 담당자별 카드 */ .sys-section table, .sys-section table tbody, .sys-section table tr, .sys-section table td { display:block !important; width:auto !important; } .sys-section table { overflow:visible !important; } .sys-section table thead, .sys-section table tr:has(> th) { display:none !important; } .sys-section table tr { padding:12px 14px !important; border-bottom:1px solid #e3e9f2; } html body .sys-section table tr td { padding:2px 0 !important; border:0 !important; text-align:left !important; white-space:normal !important; background:none !important; height:auto !important; } .sys-section table td:nth-child(1), .sys-section table td:nth-child(2) { display:inline-block !important; font-weight:700; margin-right:6px; } .sys-section table td:nth-child(3)::before { content:"AX 카테고리 · "; color:#8a94a6; font-weight:400; } .sys-section table td:nth-child(4)::before { content:"연결 전문가 · "; color:#8a94a6; } /* 인사말: 사진(오른쪽 띄움)을 글 위로 */ .kg-photo-float { float:none !important; width:auto !important; max-width:240px; margin:0 auto 20px !important; } /* 글 보기: 본문 안 표·이미지가 화면을 넘지 않게 */ .boardRead, .readHeader, .readBody { width:auto !important; } .xe_content table { display:block; max-width:100%; overflow-x:auto; } .xe_content img { height:auto !important; } .xe_content iframe { max-width:100%; } /* 캘린더 게시판(2단 → 1단) · 메인 캘린더 */ #kx-cal2 { grid-template-columns:1fr !important; } #xe-calendar-first { min-height:0 !important; } /* 푸터 */ #footer1_wrap00_bg { height:auto !important; padding:20px 16px !important; } #footer1_wrap0, #copytxt { width:auto !important; float:none !important; height:auto !important; line-height:1.6; font-size:12px; } #copylogo { display:none !important; } #kxTopBtn { right:12px !important; bottom:12px !important; } } @media (max-width: 480px) { #s_banner_wrap00 { height:90px !important; } #s_banner_wrap00 .kx-banner-title { font-size:20px !important; } table.boardList td.date, table.boardList th.date { width:72px; } }