/* ==== xe.min.css ==== */ @charset "utf-8";body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px}body{word-wrap:break-word}a img{border:0}.xe_content img{max-width:100%;height:auto}@media \0screen{.xe_content img{max-width:none}}.btnArea{margin:1em 0;text-align:right;zoom:1;clear:both}.btnArea:after{content:"";display:block;clear:both}.btnArea .etc{float:left}.btn{position:relative;display:inline-block;vertical-align:middle}.btn *{display:inline-block;padding:0 8px;font-size:12px;height:24px;line-height:22px;margin:0;font-weight:bold!important;color:#fff;text-decoration:none!important;border:1px solid;cursor:pointer;overflow:visible;border-radius:3px;box-shadow:inset 0 0 1px #fff;background-color:#666;text-shadow:0 -1px 0 #333;zoom:1}.btn *[disabled=disabled]{opacity:.5;*filter:alpha(opacity=50)}.btn a,.btn *[type=button]{border-color:#ccc;color:#333!important;background-color:#ddd;text-shadow:1px 1px 0 #fff}.btn *[type=submit]{border-color:#666;background-color:#000!important;color:#ffc!important}.btn a{height:22px}.btn.medium *{padding:0 12px;font-size:16px;height:30px;line-height:28px}.btn.medium a{height:28px}.btn.large *{padding:0 18px;font-size:22px;height:36px;line-height:34px}.btn.large a{height:34px}input[type=submit].text,input[type=button].text,button[type=submit].text,button[type=button].text{border:0;overflow:visible;padding:0;margin:0 4px 0 0;color:#33a!important;background:0;text-decoration:underline;cursor:pointer}#popup_menu_area{position:absolute;background:#fff;border:1px solid #e9e9e9;border-radius:5px;padding:10px;line-height:1.3;box-shadow:0 0 6px #666;font-size:12px;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5)}#popup_menu_area ul{list-style:none;margin:0;padding:0}#popup_menu_area li{margin:0;padding:0}#popup_menu_area a{text-decoration:none;color:#333}#popup_menu_area a:hover,#popup_menu_area a:avtive,#popup_menu_area a:focus{text-decoration:underline}.message{border:1px solid #ddd;background:#f8f8f8;margin:1em 0;padding:0 1em;border-radius:5px;line-height:1.4;font-size:12px}.message p{margin:1em 0!important}.message em{font-style:normal;color:#e00}.message.info,.message.error,.message.update{padding-left:55px}.message.info{border-color:#e0e8ec;background:#edf9ff url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/f074d2a702ff2e6060aaa4440cf8b294f5d29cdefdf8f45417562cb88dd59430.webp) no-repeat 1em .5em}.message.error{border-color:#efdcdc;background:#ffecec url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/3f4853cbd766783ef504898fe938e0b5272bc32bb3b0f494e10a0f24da0e2118.webp) no-repeat 1em .5em}.message.update{border-color:#eae9dc;background:#fffdef url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/89affde3efd384421e356b05427bbdc3a761c501b9fe278fa5df1a428556c3cc.webp) no-repeat 1em .5em}.wfsr{display:none;position:absolute;position:fixed;left:0;top:0;z-index:100;border:1px solid #eae9dc;background:#fffdef url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/common/img/msg.loading.gif) no-repeat 1em .5em;margin:1em;padding:1em 1em 1em 55px;border-radius:5px;line-height:1.4;font-size:12px;font-weight:bold}.wfsr_fog{position:absolute;top:0;left:0;width:100%;_height:100%;min-height:100%;z-index:100}.wfsr_fog .bg{position:absolute;position:fixed;background:#000;_background:0;width:100%;height:100%;opacity:.5;z-index:2;filter:alpha(opacity=50);zoom:1}.wfsr_fog .ie6{position:absolute;left:0;top:0;width:100%;height:100%;border:0;opacity:0;filter:alpha(opacity=0);z-index:1} /* ==== style.css ==== */ /* 레이아웃 기본 제한 설정 ------------------------------------------------------------- */ #container { position:relative; clear:both; *zoom:1; } #container:after{ content:""; display:block; clear:both;} /* 레이아웃 스타일링 --------------------------------------------------------------------- */ #container { margin:0 auto; height:100%; } /* 바디 컬러셋 */ #container.white #body { background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9dcc8a6e82a1ee54725fb967c15b8b898cabc18ece38b4807dee6438611ccedc.webp) repeat #151515; color:#aaa; border-color:#222; } #container.black #body { background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9dcc8a6e82a1ee54725fb967c15b8b898cabc18ece38b4807dee6438611ccedc.webp) repeat #ddd; color:#444; border-color:#eee #e0e0e0; } /* 기본 설정 */ body { font:11px "굴림","돋움",Dotum; padding:0; margin:0; overflow-y:scroll;} img { border:0; } .top_box ul, .layout_head ul, .layout_content .leftside ul, .page_title ul, .layout_foot ul { list-style-type:none; margin:0; padding:0; } /* 상단 로그인 로그아웃등 글자색상 바꾸기 2차메뉴 왼쪽메뉴색상도 같이 변함*/ a { color:#b8b8b8; cursor:pointer; text-decoration:none;} .clear { clear:both; } /* 메뉴 통으로 전체 높이 조절 전체다 따라올라옴 */ .top_box { position:relative; z-index:50; height:0px; } .top_box a { text-decoration:none;} .top_box a:active { color:#000000; text-decoration:none; } /* 상단 로그인 아웃등 마우스 올려지면 글자색상 바뀌기 */ .top_box a:hover { color:#a6a6a6; text-decoration:none; } /* 상단1줄 라인 색상 바꾸기 */ .top_box { border-bottom:0px solid #fff; } .top_box .layout_width { width:1110px; margin:0 auto; text-align:right; height:5px; position:relative; } .top_box .layout_width .box_right { position:absolute; right:-5px; top:0; font-size:11px; } .top_box .layout_width .box_right li { float:left; margin:0; color:#444; font-family:"돋움",Dotum; height:25px; } .top_box .layout_width .box_right li[data-spf-admin-link][hidden] { display:none !important; } .top_box .layout_width .box_right li a { display:block; height:25px; line-height:25px; padding:0 5px; } .top_box .layout_width .bookmark { position:absolute; height:25px; line-height:25px; left:0; margin:0; } .top_box .layout_width .bookmark a { display:block; height:25px; } .top_box .layout_width .box_right .select_lang { position:relative; } .top_box .layout_width .box_right .select_lang ul { position:absolute; left:50%; top:25px; margin-left:-52px; text-align:center; background:#fff; border:2px solid #ccc; width:100px; z-index:1002; display:none; } .top_box .layout_width .box_right .select_lang li { display:block; margin:0; float:none; } .top_box .layout_width .box_right .select_lang li a { display:block; text-decoration:none; } .top_box .layout_width .box_right .select_lang li a:hover { background:#ccc; color:#fff; font-weight:bold; } /* Layout_head */ .layout_head { clear:both; width:1110px; margin:0 auto; position:relative; z-index:30; } .layout_head .logo_line { width:1110px; margin:10px 0 0 0; position:relative; z-index:1002; } .layout_head .logo_line h1 { position:absolute; } .layout_head .logo_line .head_ad { position:absolute; word-break:break-all; overflow:hidden; } /* GNB * 메뉴만 높이 top으로 조절 폭조절은 width */ .layout_head .layout_topmenu { margin:0 auto; top:80px; height:86px; width:1310px; position:relative; z-index:1; background: url("https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/cbff8be4c04ff0d89f4216e4a168be465a48c7b198f1bb5da364132479d8847a.webp") no-repeat left top; } .layout_head .layout_topmenu a { color:#fff; cursor:pointer; text-decoration:none; } /* 2차메뉴 젤뒤에 백그라운드*/ .layout_head .layout_topmenu ul ul { background:#transparent; } .layout_head .layout_topmenu .main_menu { height:36px; margin-left:80px; display:inline-block;} .layout_head .layout_topmenu .home_menu { position:absolute; top:-14px; left:-6px; z-index:10; } .layout_head .layout_topmenu .home_menu img { background:#666; } /* 1차메뉴 글자만 왼쪽 폭 조절 left로 조절*/ .layout_head .layout_topmenu .menu_top { float:left; left:-10px; height:175px; position:relative; text-align:center; } .layout_head .layout_topmenu .menu_top:hover { background:url("https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/0985130de838359d9cebe87856b46a62193abd7b70080f6cb78d059ca00be9bd.webp") repeat-x left top; } .layout_head .layout_topmenu .menu_top:hover>a { color:#00aff0; } .layout_head .layout_topmenu .menu_top.selected>a { color:#00aff0; background:url("https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/0985130de838359d9cebe87856b46a62193abd7b70080f6cb78d059ca00be9bd.webp") repeat-x left top; } .layout_head .layout_topmenu .menu_top.bgnone { background:none; } /* 메인메뉴 1차 글자만 높이 조절 1차메뉴 글자 폰트 색깔 color ★height조절은 1차메뉴 마우스 오버시 서브네뉴 선택되는 영역조절함 */ .layout_head .layout_topmenu .menu_top>a { font-family:'Segoe UI',Meiryo,'나눔고딕',NanumGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif; display:block; height:48px; line-height:56px; padding:0 25px; position:relative; z-index:20; font-weight:bold; color:#fff; font-size:15px;} /* 서브내려오는거 높이 조절 top:00px 조절하면됨 min-width는 2차 외각영역 크기 설정 boder-width는 상자 테두리 굵기 조절*/ /* live 메인: 하위메뉴 상시 오픈 (호버로 열고 닫는 타입 아님) */ .layout_head .layout_topmenu .menu_top .sub { position:absolute; top:50px; left:0px; min-width:100px; white-space:nowrap; border:solid #d2d2d2; border-width:0px 0px 0px 0px; display:block; } .layout_head .layout_topmenu .menu_top .sub li { position:relative; text-align:left; border-top:0px solid #dfdfdf; } /* 2차메뉴 글자색 padding 0 0 0 xxpx는 2차 왼쪽 폭 조절*/ .layout_head .layout_topmenu .menu_top .sub li a { display:block; height:20px; line-height:20px; padding:0px 0px 0px 30px; color:#fff; } .layout_head .layout_topmenu .menu_top .sub li.selected>a { font-weight:bold; color:#fff000;} /* 2차 마우스 오버했을떼 나오는 배경색 */ .layout_head .layout_topmenu .menu_top .sub li:hover { background:#e5e5e5; } /* 2차 마우스 오버했을떼 글자 색 */ .layout_head .layout_topmenu .menu_top .sub li:hover>a { color:#000; } .layout_head .layout_topmenu .menu_top .sub li:first-child>a { border-top:none; } /* Update News */ .layout_head .update_news {top:134px; margin:0px; background:#302b25; border:0px solid #ccc; border-top:none; padding:0px; height:125px; line-height:125px; position:relative; } .layout_head .update_news .update_widget { padding:0; margin:0; font-size:12px; height:125px; } .layout_head .update_news .update_widget .rows { float:left; height:125px; } /* Search Form */ .layout_search { position:absolute; z-index:1000; } .layout_search .search_text { position:relative; width:100px; height:14px; font-size:12px; vertical-align:bottom; margin:0; padding:2px 5px; background:#f7f7f7; border:1px solid #aaa; } .layout_search .search_text:hover, .layout_search .search_text:focus { background:#fff; } .layout_search .submit { vertical-align:bottom; padding:0; } /* Layout_content 로고와 게시판 사이 폭 조절 */ .layout_content { margin:190px auto; width:1110px; position:relative; z-index:20; } /* 2차메뉴 왼쪽 가로폭 설정 */ .layout_content .leftside { width:225px; float:left; margin:0 25px 0 0; } .layout_content .leftside .layout_login { margin:0 0 3px 0; } .layout_content .lnb a { display:block; text-decoration:none; } /* 왼쪽메뉴 타이틀 배경 글자 가운데 정렬*/ .layout_content .lnb>.top_menu { background:#575757; border:1px solid #ccc; text-align:center; } /* 왼쪽메뉴 타이틀 메뉴 글자크기 상하폭조절은 padding로 조절*/ .layout_content .lnb>.top_menu a { border:none; padding:20px 5px; font-size:14px; font-weight:bold; color:#f7f7f7;} .layout_content .lnb>ul { border:1px solid #ccc; padding:3px; border-top:none; } /* 왼족메뉴 글자크기 색상지정 */ .layout_content .lnb>ul li>a { font-size:12px; color:#000; margin-left:12px; border-top:1px solid #ccc; padding-left:15px; height:25px; line-height:25px; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/legacy/layouts/we_home/images/icons.gif') no-repeat 4px -6px; } .layout_content .lnb>ul li.has_sub>a { border-bottom:1px dashed #d5d5d5; } .layout_content .lnb>ul li:hover>a { font-weight:bold; color:#ff7e7e; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/legacy/layouts/we_home/images/icons.gif') no-repeat 4px 10px; } .layout_content .lnb>ul li.selected>a { font-weight:bold; color:#ff7e7e; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/legacy/layouts/we_home/images/icons.gif') no-repeat 4px 10px; } .layout_content .lnb>ul>li:first-child>a { border-top:none; } .layout_content .lnb ul li ul { margin:0 0 0 10px; border:none; padding:0; } .layout_content .lnb ul ul a { margin:0 0 0 20px; height:22px; line-height:22px; font-size:11px; border:none; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/legacy/layouts/we_home/images/icons.gif') no-repeat 4px -8px; } .layout_content .lnb ul ul li:hover>a { font-weight:bold; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/legacy/layouts/we_home/images/icons.gif') no-repeat 4px 8px; } .layout_content .lnb ul ul li.selected>a { font-weight:bold; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/legacy/layouts/we_home/images/icons.gif') no-repeat 4px 8px; } .layout_content .rightside { width:270px; float:left; margin:0 0 0 30px; } /* Layout_foot */ .layout_foot { margin:0 auto; padding-top:5px; width:1100px; clear:both; position:relative; z-index:20; } .layout_foot .notice { padding:10px 5px; position:relative; height:20px; line-height:20px; border-top:2px solid #d1d1d1; } .layout_foot .notice .family_site { height:24px; line-height:24px; position:absolute; } .layout_foot .notice .family_site>span { border:1px solid #ccc; width:100px; text-align:center; display:block; text-decoration:none; position:relative; z-index:20; cursor:pointer; } .layout_foot .notice .family_site ul { position:absolute; bottom:23px; border:1px solid #ccc; border-bottom:none; width:100px; background:#ffffff; z-index:10; display:none; } .layout_foot .notice .family_site li { border-bottom:1px dashed #ccc; } .layout_foot .notice .family_site li a { display:block; text-decoration:none; padding:2px 4px; } .layout_foot .bottom_menu_copy { border-top:0px solid #ccc; } .layout_foot .bottom_menu_copy .bottom_menu { overflow:hidden; margin:0; text-align:center; } .layout_foot .bottom_menu_copy .bottom_menu ul { padding:5px 0; height:20px; line-height:20px; margin-left:-20px; white-space:nowrap; display:inline-block; } .layout_foot .bottom_menu_copy .bottom_menu li { padding-left:20px; display:inline; } .layout_foot .bottom_menu_copy .bottom_menu li.selected a { font-weight:bold; color:#000; } .layout_foot .bottom_menu_copy .bottom_menu li:first-child { background:none; } .layout_foot .bottom_menu_copy .bottom_menu li a:hover { text-decoration:underline; } .layout_foot .bottom_menu_copy .copy { text-align:center; } /* Skin By */ .designedby { padding:0 10px 10px; margin:0; text-align:right; } /* ==== sitemap.css ==== */ /* Sitemap */ #sitemap { position:absolute; display:none; left:0; top:127px; width:1110px; min-height:58px; max-height:min(70vh, 520px); box-sizing:border-box; margin:0; padding:10px 18px; overflow-x:hidden; overflow-y:auto; z-index:30; letter-spacing:normal; line-height:1.4;} #sitemap.is-open { display:block; } #sitemap[hidden], #sitemap_button [hidden] { display:none !important; } #sitemap {background:#333;} /* Keep desktop sitemap scrolling available without an exposed native bar. */ @media (min-width: 769px) { #sitemap { scrollbar-width: none; -ms-overflow-style: none; } #sitemap::-webkit-scrollbar { display: none; width: 0; height: 0; } } #sitemap nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; min-height:38px; } #sitemap nav a.section { display:block; flex:0 0 auto; margin:0; padding:6px 8px; color:#FBB917; font:700 12px/1.4 Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; text-decoration:none; white-space:nowrap; } #sitemap nav a.section:hover, #sitemap nav a.section:focus { color:#fff; } #sitemap .title {position:absolute; width:210px; height:33px; left:0px; top:12px; background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9dcc8a6e82a1ee54725fb967c15b8b898cabc18ece38b4807dee6438611ccedc.webp) 0 0 no-repeat;} /* 서비스맵 보기 버튼 */ #sitemap_button { z-index:1;position:absolute;margin:0;padding:0; top:28px; right:0px; background:transparent; } #sitemap_button button {margin:0;padding:0; z-index:1; background:transparent;cursor:pointer; width:151px; height:41px; border:0;} #sitemap_button button:hover { width:151px; height:41px; } #sitemap_button .sitemap_open {position:relative;margin:0;padding:0; top:0px;*top:0px;right:0px; background:transparent; display:block; } #sitemap_button .sitemap_close {position:relative;margin:0;padding:0; top:0px;*top:0px;right:0px; background:transparent; display:none; } #sitemap_button .sitemap_open:not([hidden]) { display:block; } #sitemap_button .sitemap_close:not([hidden]) { display:inline-block; } #sitemap_button button:disabled, #sitemap_button button[aria-disabled="true"] { cursor: not-allowed !important; } /* Full mobile sitemap for the main page and board routes. Sponsor cards stay * available on desktop; phones use the readable legacy category menu. */ @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap nav.spf-mobile-sitemap-nav, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap nav.spf-mobile-sitemap-nav { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; overflow: visible; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav > .main_menu, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav > .main_menu { display: block; width: 100%; margin: 0; padding: 0; list-style: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .menu_top, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .menu_top { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; background: transparent; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .first_a, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .first_a { display: block; height: 40px; box-sizing: border-box; padding: 10px 28px 10px 10px; border-bottom: 1px solid #999; color: #333; background: #ccc; font-size: 14px; font-weight: 400; line-height: 20px; text-decoration: none; white-space: nowrap; position: relative; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .first_a::after, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .first_a::after, html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .second_a::after, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .second_a::after { content: '›'; position: absolute; right: 10px; color: #666; font-size: 20px; line-height: 18px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .sub, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .sub { display: block; position: static; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .sub li, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .sub li { display: block; position: relative; width: 100%; height: 38px; margin: 0; padding: 0; border-bottom: 1px solid #ddd; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .second_a, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .second_a { display: block; position: relative; height: 38px; box-sizing: border-box; padding: 9px 28px 9px 24px; color: #333; background: #fff; font-size: 13px; line-height: 20px; text-decoration: none; white-space: nowrap; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-mobile-sitemap-nav .spf-sponsor-sitemap, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-mobile-sitemap-nav .spf-sponsor-sitemap { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap .spf-sponsor-sitemap, html:not([data-spf-view-mode="desktop"]) body.spf-mid #sitemap .spf-sponsor-sitemap { display: none; } } #sitemap_button button:focus-visible { outline: 2px solid #00aff0; outline-offset: 2px; } #sitemap nav.spf-mobile-sitemap-nav { display: none; } #sitemap .spf-sponsor-sitemap { width: 100%; } #sitemap .spf-sponsor-group { margin: 0 0 28px; } #sitemap .spf-sponsor-group:last-child { margin-bottom: 0; } #sitemap .spf-sponsor-sitemap h2 { display: flex; min-width: 0; min-height: 72px; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; margin: 0; color: #00aff0; background: #fff; font-size: 18px; font-weight: 400; } #sitemap .spf-sponsor-sitemap h2 span { display: block; width: 100%; box-sizing: border-box; margin-bottom: auto; padding: 2px 6px; color: #fff; background: #00aff0; font-size: 11px; font-style: italic; line-height: 16px; text-align: center; } #sitemap .spf-sponsor-sitemap h2::after { content: ''; margin-top: auto; } #sitemap .spf-sponsor-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; } #sitemap .spf-sponsor-item { min-width: 0; border: 1px solid #666; background: #fff; } #sitemap .spf-sponsor-item > a, #sitemap .spf-sponsor-item > div { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 7px; color: #333; text-align: center; } #sitemap .spf-sponsor-grid a:hover, #sitemap .spf-sponsor-grid a:focus { outline: 2px solid #00aff0; outline-offset: -2px; } #sitemap .spf-sponsor-grid img { display: block; width: 100%; height: 42px; object-fit: contain; } #sitemap .spf-sponsor-company, #sitemap .spf-sponsor-name { display: none; } #sitemap .spf-sponsor-empty { margin: 0; padding: 15px; color: #ccc; background: #fff; text-align: center; } @media (min-width: 1110px) { /* The desktop sponsor panel is compact enough to show both groups without * introducing a second scrollbar inside the page overlay. */ #sitemap.is-open { max-height: none; overflow: visible; padding: 8px 14px; } #sitemap .spf-sponsor-group { margin-bottom: 12px; } #sitemap .spf-sponsor-grid { gap: 5px; } #sitemap .spf-sponsor-sitemap h2 { min-height: 58px; font-size: 16px; } #sitemap .spf-sponsor-item > a, #sitemap .spf-sponsor-item > div { min-height: 58px; box-sizing: border-box; gap: 3px; padding: 5px; } #sitemap .spf-sponsor-grid img { height: 34px; } } body.spf-page-main > .layout_body:has(#sitemap.is-open), body.spf-mid > .layout_body:has(#sitemap.is-open) { z-index: 1001 !important; } @media (min-width: 768px) and (max-width: 1109px) { #sitemap.is-open { position: fixed; top: 127px; left: 0; width: 100vw; max-height: calc(100vh - 127px); } #sitemap .spf-sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 769px) and (max-width: 1109px) { body.spf-page-main .layout_head, body.spf-mid .layout_head, body.spf-page-main .layout_head .logo_line, body.spf-mid .layout_head .logo_line, body.spf-page-main .layout_head .layout_topmenu, body.spf-mid .layout_head .layout_topmenu { width: 100% !important; min-width: 0; max-width: 1110px; box-sizing: border-box; } body.spf-page-main .layout_head .layout_topmenu .menu_top, body.spf-mid .layout_head .layout_topmenu .menu_top { left: 0 !important; } #sitemap.is-open { max-height: none; overflow: visible; } #sitemap .spf-sponsor-group { margin-bottom: 12px; } #sitemap .spf-sponsor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } #sitemap .spf-sponsor-sitemap h2 { min-height: 58px; font-size: 16px; } #sitemap .spf-sponsor-item > a, #sitemap .spf-sponsor-item > div { min-height: 58px; box-sizing: border-box; gap: 3px; padding: 5px; } #sitemap .spf-sponsor-grid img { height: 34px; } } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) #sitemap.is-open { position: fixed; top: 42px; right: 0; bottom: 0; left: 0; width: 100vw; min-height: 0; max-height: none; margin: 0; padding: 18px 14px 28px; overflow-y: auto; background: #333; z-index: 1002; } html:not([data-spf-view-mode="desktop"]) #sitemap .spf-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:not([data-spf-view-mode="desktop"]) #sitemap .spf-sponsor-sitemap h2 { min-height: 82px; } html:not([data-spf-view-mode="desktop"]) #sitemap .spf-sponsor-item > a, html:not([data-spf-view-mode="desktop"]) #sitemap .spf-sponsor-item > div { min-height: 82px; } } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap_button .sitemap_close::after { content: '‹ 돌아가기'; } } /* ==== character_select.css ==== */ /*character icon출력 --------------------------------------------------------------------- */ #character_select { position:relative; clear:both; *zoom:1; width:1030px; margin:20px 10px 10px 40px; } /* 안쓰는것*/ #character_select .character_icons { position:relative; margin:0; padding:0; list-style:none; display:inline; } #character_select .character_icons:after { content:""; display:block; clear:both;} #character_select .character_icons li { display:inline; width:69px; height:69px; padding:0; margin:0; } #character_select .character_icons li a span {visibility:hidden; text-indent:-9999px; } #character_select .character_icons li a { display:inline-block; width:69px; height:69px; cursor:pointer; } #character_select .character_icons li a { background:transparent url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9dcc8a6e82a1ee54725fb967c15b8b898cabc18ece38b4807dee6438611ccedc.webp) no-repeat; } #character_select .character_icons li a.Tak { background-position:0 0; } #character_select .character_icons li a.Tak:hover { background-position:0 -138px; } #character_select .character_icons li a.Aki { background-position:-70px 0; } #character_select .character_icons li a.Aki:hover { background-position:-70px -138px; } #character_select .character_icons li a.Pai { background-position:-140px 0; } #character_select .character_icons li a.Pai:hover { background-position:-140px -138px; } #character_select .character_icons li a.Lau { background-position:-210px 0; } #character_select .character_icons li a.Lau:hover { background-position:-210px -138px; } #character_select .character_icons li a.Kag { background-position:-279px 0; } #character_select .character_icons li a.Kag:hover { background-position:-279px -138px; } #character_select .character_icons li a.Jef { background-position:-348px 0; } #character_select .character_icons li a.Jef:hover { background-position:-348px -138px; } #character_select .character_icons li a.Wol { background-position:-416px 0; } #character_select .character_icons li a.Wol:hover { background-position:-416px -138px; } #character_select .character_icons li a.Sar { background-position:-486px 0; } #character_select .character_icons li a.Sar:hover { background-position:-486px -138px; } #character_select .character_icons li a.Jac { background-position:-554px 0; } #character_select .character_icons li a.Jac:hover { background-position:-554px -138px; } #character_select .character_icons li a.Shu { background-position:-623px 0; } #character_select .character_icons li a.Shu:hover { background-position:-623px -138px; } #character_select .character_icons li a.Lio { background-position:-693px 0; } #character_select .character_icons li a.Lio:hover { background-position:-693px -138px; } #character_select .character_icons li a.Aoi { background-position:-762px 0; } #character_select .character_icons li a.Aoi:hover { background-position:-762px -138px; } #character_select .character_icons li a.Jea { background-position:-831px 0; } #character_select .character_icons li a.Jea:hover { background-position:-831px -138px; } /*--------character icon 가로 1줄 끝--------------- */ #character_select .character_icons li a.Eil { background-position:0 -70px; } #character_select .character_icons li a.Eil:hover { background-position:0 -208px; } #character_select .character_icons li a.Goh { background-position:-70px -70px; } #character_select .character_icons li a.Goh:hover { background-position:-70px -208px; } #character_select .character_icons li a.Bra { background-position:-140px -70px; } #character_select .character_icons li a.Bra:hover { background-position:-140px -208px; } #character_select .character_icons li a.Van { background-position:-210px -70px; } #character_select .character_icons li a.Van:hover { background-position:-210px -208px; } #character_select .character_icons li a.Lei { background-position:-279px -70px; } #character_select .character_icons li a.Lei:hover { background-position:-279px -208px; } #character_select .character_icons li a.Elb { background-position:-348px -70px; } #character_select .character_icons li a.Elb:hover { background-position:-348px -208px; } /*--------character icon 가로 2줄 끝--------------- */ /* ==== quick_scroll.css ==== */ /* 좌측 */ #quick_scroll { position:absolute; z-index:99; top:150px; margin:0; padding:2px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #quick_scroll .quick_scroll_body { margin:0; padding:5px; overflow:hidden; *zoom:1; } #quick_scroll .quick_scroll_body img { vertical-align:top; } #container.black #quick_scroll { background:#111; border:1px solid #222; } #container.black #quick_scroll .quick_scroll_body { background:#2b2b2b; color:#aaa; } #container.white #quick_scroll { background:#fff; border:1px solid #c1c1c1; } #container.white #quick_scroll .quick_scroll_body { background:#f9f9f9; color:#555; } /* 우측 */ #quick_scroll2 { position:absolute; z-index:99; top:150px; margin:0; padding:2px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #quick_scroll2 .quick_scroll_body { margin:0; padding:5px; overflow:hidden; *zoom:1; } #quick_scroll2 .quick_scroll_body img { vertical-align:top; } #container.black #quick_scroll2 { background:#111; border:1px solid #222; } #container.black #quick_scroll2 .quick_scroll_body { background:#2b2b2b; color:#aaa; } #container.white #quick_scroll2 { background:#fff; border:1px solid #c1c1c1; } #container.white #quick_scroll2 .quick_scroll_body { background:#f9f9f9; color:#555; } /* ==== social.css ==== */ #social { z-index:99999; position:relative; bottom:20px; clear:both; *zoom:1; right:0px; margin:0 0 10px; } #social:after{ content:""; display:block; clear:both; } #social .social_icons { position:relative; float:right; padding:0; margin:0; list-style:none; } #social .social_icons li { float:left; width:24px; height:25px; padding:0; margin:0; } #social .social_icons li a span {visibility:hidden; text-indent:-9999px; } #social .social_icons li a { display:block; width:24px; height:25px; cursor:pointer; } #social .social_icons li a { background:transparent url("https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/da0bc0d4ff644a7379ab8c97a18b5b1233f79c32babc2ebb7957c582fd231d93.webp") no-repeat; } #social .social_icons li a.twitter { background-position:0 0; } #social .social_icons li a.twitter:hover { background-position:0 -25px; } #social .social_icons li a.facebook { background-position:-25px 0; } #social .social_icons li a.facebook:hover { background-position:-25px -25px; } #social .social_icons li a.me2day { background-position:-50px 0; } #social .social_icons li a.me2day:hover { background-position:-50px -25px; } #social .social_icons li a.rss { background-position:-75px 0; } #social .social_icons li a.rss:hover { background-position:-75px -25px; } /* Footer social links sit beside the KSA mark instead of covering it. */ .footer-brand-cell { white-space: nowrap; vertical-align: middle; } .footer-brand-cell > img { display: inline-block; vertical-align: middle; } /* 새 로고는 기존 푸터 로고 높이 안에서 비율을 유지한다. */ .footer-brand-cell > img.spf-footer-logo { width: 150px; height: auto; max-width: 100%; } /* 게시판 푸터는 새 로고의 높이를 문서 흐름에 포함한다. */ body.spf-board-mode-list .layout_foot .notice, body.spf-board-mode-detail .layout_foot .notice { height: auto; } .footer-brand-cell #social { display: inline-block; margin-left: 12px; vertical-align: middle; } .footer-brand-cell #social .social_icons { float: none; display: inline-flex; vertical-align: middle; } .footer-email { white-space: nowrap; } /* 375 모바일: 로고+전환+소셜이 한 줄을 강제해 가로 잘리지 않게 줄바꿈 허용. PC보기 모드는 nowrap 유지. */ @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) .footer-brand-cell { white-space: normal; flex-wrap: wrap; } html:not([data-spf-view-mode="desktop"]) .footer-email { white-space: normal; overflow-wrap: anywhere; } } .layout_foot td > a[href^="mailto:"] { display: block; } .spf-legacy-social-placeholder { display: none; } .spf-mobile-competition-links { display: none; } /* ==== widget.css ==== */ @charset "utf-8"; .widgetContainer{font-size:12px;line-height:18px;} .floatLeft{float:left;} .floatRight{float:right;} .clearLeft{clear:left;} .clearRight{clear:right;} .HanbiMore {position:absolute;top:5px;left:5px;height:0;overflow:hidden;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/sp.gif) repeat left top;z-index:1;*display:inline-block;*zoom:1; cursor:pointer;} .HanbiWrapImg{display:block;position:relative;margin:0;margin-bottom:5px;padding:4px;background:#fcfcfc;border:1px solid #ddd;*zoom:1;} .HanbiWrapImg img{display:block;position:relative;width:100%;} .HanbiwidgetZineA .HanbiWrapImg{margin:0;margin-right:10px;} .widgetContainer .open{display:block !important;} .widgetContainer a{text-decoration:none;} .widgetContainer img{border:0;} .widgetContainer em{position:relative;display:inline-block;font-style:normal;} .widgetContainer form{margin:0;padding:0;} .widgetContainer fieldset{border:0;margin:0;padding:0;} .widgetContainer em {line-height: 1;font-style: normal;} /* Class */ .replyNum a{padding:0 0 0 15px;background-position:left top;position:relative;display:inline-block;_display:inline;} .Hanbidate span{padding:0 0 0 15px;background-position:left -17px;position:relative;display:inline-block;height:18px;line-height:18px;} .HanbiIcon span{display:inline-block;padding-top:3px;position:relative;} .Hanbititle span{ line-height:18px;overflow:hidden;position:relative;display:inline;*display:inline-block;*zoom:1;color:#444 !important;} .HanbiWrapNick{position:relative;*zoom:1;display:inline-block;line-height:0;overflow:hidden;margin:0;padding:0;white-space:nowrap;} .HanbiWrapNick:after{content:"";display:block;clear:both;} .HanbiWrapNick li{float:left;position:relative;display:inline-block;margin:0;margin-right:10px;white-space:nowrap;line-height:18px;} .widgetClear{display:block;font-size:0;height:1px;clear:both;position:relative;} /* font */ /*.Malgun{font-family:Arial, "Malgun Gothic", AppleGothic, Dotum, Sans-serif;}*/ .widgetA .Hanbititle, .normalAwidget a.Hanbititle, .normalATable a.Hanbititle{color:#444; line-height} .Hanbiauthor span, .Hanbiauthor a, .Hanbititle a{color:#555;} .Hanbidate a, .replyNum a{color:#666;} .HanbiContent a, .widgetA, .widgetA a, .normalAwidget, .normalAwidget a, .Hanbidate, .normalATable, .normalATable a{color:#777;} /* img colection */ .Hanbiproducts .replyNum, .normalAwidget li, .widgetA li, .Hanbidate span, .widgetA .Hanbidate, .normalAwidget .Hanbidate, .normalATable span.Hanbidate, .normalAwidget span.HanbiAuthor, .widgetGalleryA span.HanbiAuthor, .Hanbiauthor span.HanbiAuthor, .widgetA span.HanbiAuthor, .normalATable span.HanbiAuthor, .replyNum a{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9aa827828ab4b777b5b6850d048808c2c65c755bcb20dbe456635b3963dcfc8b.webp);background-repeat:no-repeat;} /* image */ div.HanbidateArea, .wrap_thumb .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/05268ce19c246eaeb2d887acd8c56beb960fa5c5ad8758ec38eff2e11f5bd584.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/date.gif);background-repeat:no-repeat;} .HanbiDateStyleYT div.HanbidateArea, .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9f259da9e417e216c3f651797a93d78e512e20788cf9852c72209c6f8edab380.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/dateT.gif);background-repeat:no-repeat;} /* -- HanbidateArea & HanbiIcon -- */ .wrap_thumb{position:relative;*zoom:1; z-index:1;} div.HanbidateArea{position:absolute;color:#fff;width:60px;height:50px;display:block;*zoom:1;background-position:left top;overflow:hidden;} div.HanbidateArea em{margin-top:2px;} div.HanbidateArea span{position:absolute;display:inline-block;} .wrap_thumb .HanbiIcon{display:none;width:48px;height:48px;*zoom:1;background-position:left -50px;position:absolute;} .wrap_thumb .HanbiIcon img{display:none;} .AddNew div.HanbidateArea{display:none;} .wrap_thumb.AddNew .HanbiIcon{display:block;top:0;left:0;} .wrap_ZineA .HanbiIcon{display:inline-block;} .HanbiIcon img.NoneNew{display:none;} .ClearNew .HanbiIcon img.NoneNew{display:inline-block;*display:inline;} /* HanbidateArea date */ .forhanbiM{width:14px;height:12px;top:6px;left:5px;background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/897f2f56d7951e34c1d8e972a1a4633e3ae60519e31b8380524cd635cf7a88c0.webp);background-repeat:no-repeat;text-indent:-6669px} .HanbiSubSlide .forhanbiM{_text-indent:0px;_background:none;_top:2px} .HanbiDateStyleYT .forhanbiM{left:9px;top:5px;} .HanbiSubSlide .HanbiDateStyleYT .forhanbiM{_left:6px;_top:1px;} .forhanbiM.MJan{background-position:left top} .forhanbiM.MFeb{background-position:left -30px} .forhanbiM.MMar{background-position:left -60px} .forhanbiM.MApr{background-position:left -90px} .forhanbiM.MMay{background-position:left -120px} .forhanbiM.MJun{background-position:left -150px} .forhanbiM.MJul{background-position:left -180px} .forhanbiM.MAug{background-position:left -210px} .forhanbiM.MSep{background-position:left -240px} .forhanbiM.MOct{background-position:left -270px} .forhanbiM.MNov{background-position:left -300px} .forhanbiM.MDec{background-position:left -330px} .forhanbiD{width:14px;height:12px;top:6px;left:25px;background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/897f2f56d7951e34c1d8e972a1a4633e3ae60519e31b8380524cd635cf7a88c0.webp);background-repeat:no-repeat;text-indent:-6669px} .HanbiSubSlide .forhanbiD{_text-indent:0px;_background:none;_top:2px;_left:28px;} .HanbiDateStyleYT .forhanbiD{left:29px;top:5px;} .HanbiSubSlide .HanbiDateStyleYT .forhanbiD{_top:1px;_left:31px;} .forhanbiD.D01{background-position:left top} .forhanbiD.D02{background-position:left -30px} .forhanbiD.D03{background-position:left -60px} .forhanbiD.D04{background-position:left -90px} .forhanbiD.D05{background-position:left -120px} .forhanbiD.D06{background-position:left -150px} .forhanbiD.D07{background-position:left -180px} .forhanbiD.D08{background-position:left -210px} .forhanbiD.D09{background-position:left -240px} .forhanbiD.D10{background-position:left -270px} .forhanbiD.D11{background-position:left -300px} .forhanbiD.D12{background-position:left -330px} .forhanbiD.D13{background-position:left -360px} .forhanbiD.D14{background-position:left -390px} .forhanbiD.D15{background-position:left -420px} .forhanbiD.D16{background-position:left -450px} .forhanbiD.D17{background-position:left -480px} .forhanbiD.D18{background-position:left -510px} .forhanbiD.D19{background-position:left -540px} .forhanbiD.D20{background-position:left -570px} .forhanbiD.D21{background-position:left -600px} .forhanbiD.D22{background-position:left -630px} .forhanbiD.D23{background-position:left -660px} .forhanbiD.D24{background-position:left -690px} .forhanbiD.D25{background-position:left -720px} .forhanbiD.D26{background-position:left -750px} .forhanbiD.D27{background-position:left -780px} .forhanbiD.D28{background-position:left -810px} .forhanbiD.D29{background-position:left -840px} .forhanbiD.D30{background-position:left -870px} .forhanbiD.D31{background-position:left -900px} .forhanbidot{width:6px;height:12px;top:6px;left:18px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9a6837845e761f341dd32a00f1f375c880e16fcb292d309014bf86cf446f9af8.webp) no-repeat 2px top;text-indent:-6669px} .HanbiSubSlide .forhanbidot{_text-indent:0px;_background:none;_top:2px;_left:23px;} .HanbiDateStyleYT .forhanbidot{left:22px;top:5px;} .HanbiSubSlide .HanbiDateStyleYT .forhanbidot{_top:1px;_left:25px;} .Hanbiproducts .forhanbiM{width:28px;left:6px;} .Hanbiproducts .forhanbiD{left:39px;} .Hanbiproducts .forhanbidot{left:33px;} /* -- colorset -- */ /* Blue */ .BlueColor .ColorBorder{border-color:#95a2fc} .PurpleColor .ColorBorder{border-color:#b0a2f2} .GreenColor .ColorBorder{border-color:#bbcd95} .RedColor .ColorBorder{border-color:#cd4833} .LightPurpleColor .ColorBorder{border-color:#b19bba} .OrangeColor .ColorBorder{border-color:#ef8d49} .LightRedColor .ColorBorder{border-color:#e66e69} .GoldColor .ColorBorder{border-color:#d5c286} .BrownColor .ColorBorder{border-color:#b3a289} .LightBrownColor .ColorBorder{border-color:#c9c299} .PinkColor .ColorBorder{border-color:#f9a7b0} .GreyColor .ColorBorder{border-color:#666392} .BlackColor .ColorBorder{border-color:#aaa} .BlueColor .ProfileZineDiv .TTcolor{color:#95a2fc} .PurpleColor .ProfileZineDiv .TTcolor{color:#b0a2f2} .GreenColor .ProfileZineDiv .TTcolor{color:#bbcd95} .RedColor .ProfileZineDiv .TTcolor{color:#cd4833} .LightPurpleColor .ProfileZineDiv .TTcolor{color:#b19bba} .OrangeColor .ProfileZineDiv .TTcolor{color:#ef8d49} .LightRedColor .ProfileZineDiv .TTcolor{color:#e66e69} .GoldColor .ProfileZineDiv .TTcolor{color:#d5c286} .BrownColor .ProfileZineDiv .TTcolor{color:#b3a289} .LightBrownColor .ProfileZineDiv .TTcolor{color:#c9c299} .PinkColor .ProfileZineDiv .TTcolor{color:#f9a7b0} .GreyColor .ProfileZineDiv .TTcolor{color:#666392} .BlackColor .ProfileZineDiv .TTcolor{color:#aaa} .BlueColor .HanbiDateStyleY div.HanbidateArea, .BlueColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/0598c82353ad9937f1f56880fab3cacd24fc95012423e34214ed7314d710d98d.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Blue/date.gif);background-repeat:no-repeat;} .GreenColor .HanbiDateStyleY div.HanbidateArea, .GreenColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/5fbf98ee7c334886c24cd4208bc9cb0bcc263b04f9d48ebf2d19ad51413cd81b.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Green/date.gif);background-repeat:no-repeat;} .LightPurpleColor .HanbiDateStyleY div.HanbidateArea, .LightPurpleColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/7842ff5e53f7bd268108e96c7e9e53090667bd87967427a8ef121dc1780e49ae.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/LightPurple/date.gif);background-repeat:no-repeat;} .PurpleColor .HanbiDateStyleY div.HanbidateArea, .PurpleColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/88f039fa002a74476a9e0ff6678a6edbafb8709f261cbc9bc520646c57286dfd.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Purple/date.gif);background-repeat:no-repeat;} .OrangeColor .HanbiDateStyleY div.HanbidateArea, .OrangeColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/e1ee5f0e23985cb93e8348aa723b3ef32ec293b085fd7f8c872f315a89d8be39.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Orange/date.gif);background-repeat:no-repeat;} .RedColor .HanbiDateStyleY div.HanbidateArea, .RedColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/5a4aea19a0cf584b28192136315e88cf6107d6a89389745b267fe14ec9b75090.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Red/date.gif);background-repeat:no-repeat;} .LightRedColor .HanbiDateStyleY div.HanbidateArea, .LightRedColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/e2c4ae7133c2773ec45a321cc9da03ee5ad7a71318534cc01d0cd74696a43495.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/LightRed/date.gif);background-repeat:no-repeat;} .GoldColor .HanbiDateStyleY div.HanbidateArea, .GoldColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/3f94c592ae6eaf8aeda754b748533aa2b4475ad6b9172f75c8c3d8fc60c816e9.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Gold/date.gif);background-repeat:no-repeat;} .BrownColor .HanbiDateStyleY div.HanbidateArea, .BrownColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/05fed923ff31fadf64ebf411224e4b229f16a6d82d4d7bc4117230cabd601067.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Brown/date.gif);background-repeat:no-repeat;} .LightBrownColor .HanbiDateStyleY div.HanbidateArea, .LightBrownColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/7d87fa87c06f27cfdba9ac71097105dff553831f5ef9fdb2ae4e8a0e13524776.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/LightBrown/date.gif);background-repeat:no-repeat;} .PinkColor .HanbiDateStyleY div.HanbidateArea, .PinkColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/456e0aeb23e7b56ea4eabfadb64028801645e67065908cc1d0905c33c4b51c73.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Pink/date.gif);background-repeat:no-repeat;} .GreyColor .HanbiDateStyleY div.HanbidateArea, .GreyColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/cd7a3b0b497a023cc4f5b682dc432b3ddc005c42379a8e5227ad64281be562f8.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Grey/date.gif);background-repeat:no-repeat;} .BlackColor .HanbiDateStyleY div.HanbidateArea, .BlackColor .wrap_thumb.HanbiDateStyleY .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/cd7a3b0b497a023cc4f5b682dc432b3ddc005c42379a8e5227ad64281be562f8.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Grey/date.gif);background-repeat:no-repeat;} .BlueColor .HanbiDateStyleYT div.HanbidateArea, .BlueColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/c497ece0a928e6d71a418a00e51894f88ffbb6fdb3e549960ed4aa8c354232a0.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Blue/dateT.gif);background-repeat:no-repeat;} .GreenColor .HanbiDateStyleYT div.HanbidateArea, .GreenColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/74aa08043559137d33096b45e92967a1344363ee63543d7cf54265e2a084c515.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Green/dateT.gif);background-repeat:no-repeat;} .LightPurpleColor .HanbiDateStyleYT div.HanbidateArea, .LightPurpleColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/d379cc6f808427743bfdcc961ab0b15a10753fb51560f684983b72600d9f9916.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/LightPurple/dateT.gif);background-repeat:no-repeat;} .PurpleColor .HanbiDateStyleYT div.HanbidateArea, .PurpleColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/e580fa804bbd4bb58888cf264102f76fdc053a997a0a0f5bb9f85d5442135ba9.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Purple/dateT.gif);background-repeat:no-repeat;} .OrangeColor .HanbiDateStyleYT div.HanbidateArea, .OrangeColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/35cc191c0b9fe8a3c5edb1f29569935956022be3785d016691306de0919ab3e1.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Orange/dateT.gif);background-repeat:no-repeat;} .RedColor .HanbiDateStyleYT div.HanbidateArea, .RedColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/5058d6b18f1b4619f8c3b88bae98353e3aec5dab55e8f3d6cea6488f7c3da44b.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Red/dateT.gif);background-repeat:no-repeat;} .LightRedColor .HanbiDateStyleYT div.HanbidateArea, .LightRedColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/a960b9b805d72ab4c8cc6311cda7e1e906c26b42cccb14f462c4290f1eb3e4e2.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/LightRed/dateT.gif);background-repeat:no-repeat;} .GoldColor .HanbiDateStyleYT div.HanbidateArea, .GoldColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/8cdf8444f38d33db8e306b45203468aff87890a3c22eb8b44a2f234c68160fa0.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Gold/dateT.gif);background-repeat:no-repeat;} .BrownColor .HanbiDateStyleYT div.HanbidateArea, .BrownColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/e93784a23640bfe7ecfe4ede73a3dc85328ea1c7eceeb0a8118c4ac2eb543156.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Brown/dateT.gif);background-repeat:no-repeat;} .LightBrownColor .HanbiDateStyleYT div.HanbidateArea, .LightBrownColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/bc732df7e6e9ad929b29210487cb2c620b71439d5ff3bb6577ef14a66850ceca.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/LightBrown/dateT.gif);background-repeat:no-repeat;} .PinkColor .HanbiDateStyleYT div.HanbidateArea, .PinkColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/160807612b6f849b509611e68be212158352f4b93f96aa489026301f22962df5.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Pink/dateT.gif);background-repeat:no-repeat;} .GreyColor .HanbiDateStyleYT div.HanbidateArea, .GreyColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/32155de81c7ad8ace3b038876810a6bac69c358fccc9259b2ca44d0d8d92737d.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Grey/dateT.gif);background-repeat:no-repeat;} .BlackColor .HanbiDateStyleYT div.HanbidateArea, .BlackColor .wrap_thumb.HanbiDateStyleYT .HanbiIcon{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/32155de81c7ad8ace3b038876810a6bac69c358fccc9259b2ca44d0d8d92737d.webp);_background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/Grey/dateT.gif);background-repeat:no-repeat;} .HanbiDateStyleYT div.HanbidateArea{top:2px;} .HanbiDateStyleY div.HanbidateArea{top:3px;left:3px !important} .widgetTabC{margin:0;padding:0;font-size:12px;border-top:1px solid;} .widgetTabC li{list-style:none;border-bottom:1px solid;*zoom:1;margin-bottom:1px;} .widgetTabC li a{display:block;padding:7px 0 6px 10px;*zoom:1;} .widgetNavigator{margin:0;padding:0;text-align:right;clear:both;} .widgetNavigator li{list-style:none;display:inline;} .widgetNavigator li button{width:16px;height:16px;padding:0;background-color:transparent;background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/buttonWidgetNavigation.gif);border:1px solid #666;cursor:pointer;} .widgetNavigator li button.prev{background-position:left center;*background-position:-1px center;} .widgetNavigator li button.next{background-position:right center;*background-position:13px center;} .widgetNavigator li button span{position:absolute;display:block;width:0;height:0;overflow:hidden;visibility:hidden;} /* 기타 */ .imgNone{display:block;position:relative;cursor:pointer;background:#eee url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/NoImage.gif) no-repeat 50% 50%;color:#eeeeee;font-size:1px;} .slides_container div a{text-decoration:none;color:#666;} /* imgSlide */ .Hanbiproducts, .Hanbiproducts .slides_container a{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/ad9c6b6769d9b0ab15792f8b14bf96d2be993ecee30dffa6b3ead90a545890cd.webp);background-repeat:no-repeat} .Hanbiproducts {position:absolute;overflow:hidden;left:0;width:980px;height:300px;background-position:7px 8px;} .Hanbiproducts:after{content:"";display:block;clear:both;} .Hanbiproducts .slides_container{height:260px;width:390px;position:relative;*zoom:1;float:left;overflow:hidden;padding:20px;display:none;} .Hanbiproducts .slides_container .inner_slides_container{position:relative;width:390px;height:260px;} .Hanbiproducts .slides_container .wrap_TC{position:absolute;overflow:hidden;top:195px;left:5px;height:50px;width:370px;padding:5px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/2bbd004b38fa50688c4f6240c634418f7381612c1887e1aea2acc64fcb4aa9ac.webp) no-repeat left top;color:#fcfcfc;} .Hanbiproducts .slides_container a {width:416px;height:0;padding-top:286px;position:absolute;top:-12px;left:-13px;background-position:left top;} .Hanbiproducts .slides_container .HanbiproductsTitle{display:block;font-weight:bold;width:370px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;} .Hanbiproducts .HanbiproductsDate{color:#fff;top:3px;left:3px;font-size:12px;height:25px;width:60px;padding:0 4px 12px 2px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/4397e10851998623d03eeb3c670a143a5ed07c0cbe101e0421c9fad386a76dfd.webp) no-repeat left top;position:absolute;} div.HanbiproductsDate span{position:absolute;display:inline-block;} div.HanbiproductsDate .forhanbiM{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/cd0322b549a0d2c7f2cc1b4509b32ef77769539c07cacfdeb78292462f3134cc.webp);top:7px;left:4px;} div.HanbiproductsDate .forhanbiD{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/578be9e072728b95549dcc52845b5bce4b5a02183dcad4b8143267eca011e50b.webp);top:7px;left:37px;} div.HanbiproductsDate .forhanbidot{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/c20b2665a8f7318337b3a117cdb45f58c22e45aaed73ccd77cba15a63985f0cf.webp) no-repeat 2px top;} .Hanbiproducts .pagination{float:right;height:300px;width:530px;padding-left:20px;margin:0;position:relative;*zoom:1;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/52db0b6e2c04eb83edb8eec649c4ecbbde659b4bd980aa6aeebee11df8b251f3.webp) repeat-y right top;} .Hanbiproducts .pagination:after{content:"";display:block;clear:both;} .Hanbiproducts .pagination li{list-style:none;float:left;display:inline;width:150px;height:100px;margin:16px 0 19px 0;padding:9px 12px 6px 12px;overflow:hidden;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9db457427e02e49289ff45cd96589a321a71e9ec50f9157b18535e864b923d36.webp) no-repeat left top;position:relative;opacity:.7;filter:alpha(opacity=70);} .Hanbiproducts .pagination li.current{opacity:1;filter:alpha(opacity=100);background-position:left -200px;} .Hanbiproducts .pagination li a{font-size:0;text-decoration:none;height:100px;overflow:hidden;position:relative;} .Hanbiproducts .HanbiIcon img{display:none;position:relative;} .HanbiReplies .replyNum a{background-position:left 3px;} /* -- MainBanner -- */ #MainBanner a, #MainBannerA a{font-size:0;} /* -- widgetGalleryA 이미지 -- */ .widgetGalleryA{position:relative;margin:0;padding:0;*zoom:1;} .widgetGalleryA:after{content:"";display:block;clear:both;} .widgetGalleryA li{float:left;display:inline-block;*display:inline;position:relative;overflow:hidden;list-style:none;} .widgetGalleryA.ImgBanner li{display:inline;} .widgetGalleryA li li{float:none;clear:both;white-space:normal;display:block;} .widgetGalleryA .HanbiWrapNick li{float:left;display:inline-block;clear:none;} .widgetGalleryA ul{margin:0;padding:0;} .wrap_GalleryA li{line-height:0;} .wrap_GalleryA li a, .wrap_GalleryA li a span{line-height:18px;} .NormalGallery .wrap_GalleryA .Hanbititle span{font-weight:normal} .NormalGallery .wrap_GalleryA.normalfont .Hanbititle span{font-weight:bold} .widgetGalleryA span.HanbiAuthor{background-position:left -36px;_background-position:left -17px;padding-left:15px;line-height:18px;height:18px;*zoom:1;display:inline-block;} .widgetGalleryA .replyNum a{background-position:left 3px;} /* widgetGalleryA - galleryA 이미지 마우스오버 효과 */ .ForhanbiHide{position:absolute;top:100%;left:1px;background:#fff;overflow:hidden;z-index:1;opacity:.9;} /* -- HanbiwidgetZineA 이미지 제목 내용(가로 배열 - 라운드처리) -- */ .Hanbiauthor span.HanbiAuthor{background-position: left -36px;_background-position: left -37px;padding-left: 15px;line-height: 18px;height: 18px;display: inline-block;} .HanbiwidgetZineA{position:relative;margin:0;padding:0;*zoom:1;} .HanbiwidgetZineA:after{content:"";display:block;clear:both;} .HanbiwidgetZineA li{list-style:none;line-height:0;} .HanbiwidgetZineA a, .HanbiwidgetZineA span{line-height:18px;} .HanbiwidgetZineA li.HanbiZineA_li {position:relative;*zoom:1;*display:inline-block;background:#fafafa;margin-bottom:10px;} .topHanbiZineA, .bottomHanbiZineA{position:relative;height:3px;display:block;clear:both;} .topHanbiZineA{border-top:1px solid #e2e2e2;} .bottomHanbiZineA{border-bottom:1px solid #e2e2e2;} .topHanbiZineA span, .bottomHanbiZineA span{width:4px;height:4px;position:absolute;font-size:0;background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/4pxRound.gif);background-repeat:no-repeat;} .topHanbiZineA span.TL{left:0;top:-1px;background-position:left top;} .topHanbiZineA span.TR{right:0;top:-1px;background-position:right top;} .bottomHanbiZineA span.BL{left:0;bottom:-1px;_bottom:-2px;background-position:left bottom;} .bottomHanbiZineA span.BR{right:0;bottom:-1px;_bottom:-2px;background-position:right bottom;} .WrapHanbiZineA{position:relative;padding:2px 5px 1px 5px;*zoom:1;} .WrapHanbiZineA:after{content:"";display:block;clear:both;} .borderHanbiZineA{border-left:1px solid #e2e2e2;border-right:1px solid #e2e2e2;} .HanbiwidgetZineA .wrap_thumb{float:left;} .HanbiwidgetZineA ul{margin:0;padding:0;} .wrap_ZineA .Hanbititle{font-weight:bold;} .HanbiZineE_li .wrap_ZineA .Hanbititle{font-weight:normal;} .HanbiZineE_li .wrap_ZineA .Hanbititle span{color:#888;} .HanbiwidgetZineA li li.HanbiContent{margin-top:5px;} .HanbiZineB_li {position:relative;padding:5px 0;margin:5px 0;*zoom:1;*display:inline-block;border-width:3px;border-style:solid;border-color:#fff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} .HanbiZineC_li{position:relative;*zoom:1;*display:inline-block;margin-bottom:10px;} .HanbiZineC_li .wrap_ZineA li.ZineAContent{margin-top:0px;} .HanbiZineDColor{background:#f5f5f5;border:3px solid #f2f2f2;} .ColorBorder{border-color:#e2e2e2;} .HanbiZineD_li div.Hanbititle{font-weight:bold;} .HanbiExtraVar{line-height:18px !important;color: #555;} .HanbiExtraVar span{position:relative; padding:0 8px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/BgZineCLi.gif) no-repeat 3px 4px;white-space: nowrap;} /* -- 이미지 제목 -- */ /* widgetThumb */ .widgetThumb{position:relative;margin:0;margin-top:3px;z-index:1;} .widgetThumb .thumb{display:block;margin-bottom:5px;position:relative;*zoom:1;_float:left;color:#555;} .widgetThumb .thumb img{display:block;width:100%;background:white;padding:4px;border:1px solid #e2e2e2;} .widgetThumb .thumb span{height:20px;overflow:hidden;position:relative;display:block;margin-top:5px;font-weight:bold;text-align:center} /*widgetA*/ .WrapWidgetA{position:relative;float:left;} ul.widgetA {margin:0;padding:0;} ul.widgetA li{list-style:none;*margin-bottom:2px;background-position:left -82px;padding-left:10px;line-height:18px;margin-bottom:5px;} .widgetA span.Hanbidate{background-position:left -18px;_background-position:left -17px;padding-left:15px;line-height:18px;height:18px;*zoom:1;display:inline-block;} .widgetA span.HanbiIcon{*display:inline;} .widgetA span.HanbiAuthor{background-position: left -36px;padding-left: 15px;line-height: 18px;height: 18px;display: inline-block;} .widgetA .replyNum{padding-left:3px;} .widgetA span.HanbiIcon img {line-height:0;top:1px;position:relative;} .widgetA span{margin-left:3px;} /* -- 제목 -- */ /*리스트 */ .normalAwidget {margin:0;padding:0;} .normalAwidget li {list-style:none;padding-left:15px;line-height:18px;margin-bottom:5px;} .normalAwidget a.board {padding-right:5px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/lineTextDiv.gif) no-repeat right center;} .normalAwidget .notice{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/lineTextDiv.gif) no-repeat right center;} .normalAwidget .category{color:#555;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/lineTextDiv.gif) no-repeat right center;padding-right:5px;} .normalAwidget span.Hanbidate{background-position:left -17px;padding-left:15px;line-height:18px;height:18px;*zoom:1;display:inline-block;} .normalAwidget span.HanbiAuthor{background-position:left -36px;_background-position:left -37px;padding-left:15px;line-height:18px;height:18px;*zoom:1;display:inline-block;} .normalAwidget span.HanbiIcon{*display:inline;} .normalAwidget .replyNum{padding-left:3px;} .normalAwidget span.HanbiIcon img {line-height:0;top:1px;position:relative;} .normalAwidget span{margin-left:3px;} .normalAwidget li.WidgetListA{background-position:left -82px;_background-position:left -81px;} .normalAwidget li.WidgetListB{background-position:left -127px;} .normalAwidget li.WidgetListC{background-position:left -173px;} .normalAwidget li.WidgetListD{background-position:left -224px;} .normalAwidget li.WidgetListE{background-position:left -276px;} /* 테이블 */ .normalATable {width:100%;position:relative;border:0;} .normalATable td{border:0;white-space:nowrap;vertical-align:top;padding:2px;} .normalATable td.title{width:100%;white-space:normal;} .normalATable td .board{padding-right:5px;} .normalATable td .notice{padding-right:5px;} .normalATable td .category{padding-right:5px;font-weight:normal;} .normalATable td .replyNum, .normalATable td span{margin-left:3px;} .normalATable td span.HanbiAuthor{background-position: left -36px;_background-position: left -37px;padding-left: 15px;line-height: 18px;height: 18px;display: inline-block;} .normalATable span.HanbiIcon{*display:inline;} .normalATable span.HanbiIcon img {line-height:0;top:1px;position:relative;} .normalATable span.Hanbidate{background-position:left -17px;padding-left:15px;*zoom:1; line-height:18px; height:18px;display:inline-block;} .normalATable td .board, .normalATable td .notice, .normalATable td .category{color:#555;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/lineTextDiv.gif) no-repeat right center;} /* -- TabA -- */ .wrapwidgetTab, .widgetTabA{position:relative;*zoom:1;} .wrapwidgetTab:after, .widgetTabA:after{content:"";display:block;clear:both;} .WrapTabA, .WrapTabA .widgetTabA, .WrapTabA .widgetTabA li a, .WrapTabA .widgetTabA li a span{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/widgetTabA.gif);background-repeat:no-repeat;*zoom:1;position:relative;} .WrapTabA{background-position:right top;} .widgetTabA{margin:0;padding:0;} .WrapTabA .widgetTabA{padding-left:5px;margin-right:5px;background-position:left top;height:33px;border:0;} .widgetTabA li.active a{color:#333;*display:inline-block;} .WrapTabA .widgetTabA li a, .WrapTabA .widgetTabA li a span{background-position:-5000px -5000px;} .WrapTabA .widgetTabA li.active a{background-position:left -100px;} .WrapTabA .widgetTabA li.active a span{background-position:right -100px;*display:inline-block;} .widgetTabA li{float:left;margin-right:1px;list-style:none;background-repeat:no-repeat;position:relative;} .widgetTabA li a{position:relative;text-decoration:none !important;font-size:12px;padding-left:8px;display:inline-block;color:#888;} .widgetTabA li a span{height:20px;padding:10px 13px 3px 5px;display:inline-block;position:relative;} .WrapTabA dl.widgetDivider{padding:5px;padding-top:10px;} dl.widgetDivider{margin:0;padding-top:10px;z-index:1;clear:both;background:#fff;position:relative;*zoom:1;} dl.widgetDivider:after{content:"";display:block;clear:both;} dl.widgetDivider dt{position:absolute;width:0;height:0;overflow:hidden;font-size:0;line-height:0;} dl.widgetDivider dd{display:none;margin:0;} .WrapTabB, .WrapTabC{border:1px solid #ddd;} .WrapTabB .widgetTabA, .WrapTabC .widgetTabA{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/BgTabBwidgetTabA.gif) repeat-x left bottom;border:1px solid #fff;border-bottom:0;height:29px;} .WrapTabC .widgetTabA{overflow:hidden;position:relative;} .WrapTabB .widgetTabA li{border-right:1px solid #ddd;height:30px;top:-1px;_top:0;} .WrapTabC .widgetTabA li{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/lineTextDiv.gif) no-repeat left center;left:-1px;} .WrapTabB .widgetTabA li a, .WrapTabC .widgetTabA li a{padding:0;} .WrapTabB .widgetTabA li a span{height:20px;padding:7px 15px 3px 15px;} .WrapTabB[data-spf-tabs="board"] .widgetTabA{display:flex;} .WrapTabB[data-spf-tabs="board"] .widgetTabA li{flex:1 1 0;min-width:0;margin-right:0;} .WrapTabB[data-spf-tabs="board"] .widgetTabA li a{display:block;} .WrapTabB[data-spf-tabs="board"] .widgetTabA li a span{display:block;padding:7px 3px 3px;text-align:center;white-space:nowrap;} .WrapTabC .widgetTabA li a span{height:20px;padding:6px 15px 3px 15px;} .WrapTabB .widgetTabA li.active a{background:#fff;padding-bottom:1px;} .WrapTabB dl.widgetDivider, .WrapTabC dl.widgetDivider{padding:5px;padding-top:10px;} .WrapTabD .widgetTabA{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/BgwidgetTabA.gif) repeat-x left bottom;} .WrapTabD .widgetTabA a, .WrapTabD .widgetTabA li{background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/buttonWidgetTab.gif);background-repeat:no-repeat;} .WrapTabD .widgetTabA li{float:left;margin-right:1px;list-style:none;background-repeat:no-repeat;background-position:0 0;} .WrapTabD .widgetTabA li.active{background-position:0 -30px;z-index:3;} .WrapTabD .widgetTabA li a{position:relative;left:2px;float:left;height:20px;padding:5px 15px 3px 15px;text-decoration:none;font-size:12px;background-repeat:no-repeat;background-position:right 0;} .WrapTabD .widgetTabA li.active a{background-position:right -30px;} .WrapTabD .widgetTabA li a span{height:20px;padding:0;} /* -- HanbiSubSlide -- */ .HanbiSubSlide{padding:10px 20px;overflow:hidden;position:relative;} .HanbiSubSlide.HanbiSubSlideTitle{padding-top:0;} .slides_container{display:none;} .HanbiSubSlide ul{margin:0;padding:0;} .HanbiSubSlide ul li{list-style:none;float:left;_display:inline;} .HanbiSubSlide .prev, .HanbiSubSlide .next{position:absolute;top:50px;height:12px;width:8px;overflow:hidden;display:inline-block;background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/BgPN.gif);background-repeat:no-repeat;text-indent:-9999px} .HanbiSubSlide.HanbiSubSlideTitle .prev, .HanbiSubSlide.HanbiSubSlideTitle .next{top:70px;} .HanbiSubSlide .prev{right:5px;background-position:left -50px;} .HanbiSubSlide a.prev:hover{background-position:right -50px;} .HanbiSubSlide .next{left:5px;background-position:left top;} .HanbiSubSlide a.next:hover{background-position:right top;} .slides_container{z-index:1;} .slides_container .Hanbititle a{color:#444;} .slides_container div .HanbiContent a{color:#888;} .HanbiSubSlide .board, .HanbiSubSlide .category{text-align:center;height:25px;line-height:25px;display:block;font-weight:bold;} .HanbiSubSlideB{background:#fafafa;border:1px solid #eee;} .HanbiSubSlide.HanbiSubSlideTitle.HanbiSubSlideB{padding-top:5px;} /* -- line -- */ .widget_line{position:relative;height:15px;clear:both;} .widget_line div{height:15px;} .HanbilineA{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/BgWidgetLine.gif) repeat-x left 5px;} .HanbilineB div{ background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/cbb7b52339bf822068c0963bda0fed1728b33fd1be98481e8065a6e87355b7ad.webp); background-repeat:repeat-x} .HanbilineC{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/HanbilineC.gif) repeat-x left 7px;} .HanbilineD div{ background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/5b8ed1169c1526b33c86b1bbd29d23fa0dfb55358f05ed6ee5315f3b6f860723.webp); background-repeat:repeat-x} .HanbilineCenter{margin:0 30px; background-position:left -16px;} .HanbilineLeft, .HanbilineRight{position:absolute; top:0; width:30px;} .HanbilineLeft{left:0;background-position:left 4px;} .HanbilineRight{right:0;background-position:left -36px;} /* ImgBanner */ .ImgBanner{font-size:0; } .ImgBanner a{background:#fff; padding:4px; border:1px solid #e2e2e2;display:inline-block;} .WrapQuickBanner {background: url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/QM.gif) repeat-y left top;display:block;text-align:center; width:120px;position:relative; margin-bottom:5px;} .WrapQuickBanner .quick_menuT{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/QT.gif) no-repeat left top;padding-top:5px;font-size:0;margin-bottom:0 !important;} .WrapQuickBanner .quick_menuB {background: url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/QB.gif) no-repeat left bottom;height:5px;font-size:0;} .WrapQuickBanner a{position:relative; display:inline-block; *display:block; width:110px;} .WrapQuickBanner a span{z-index:3;width:110px;height:3px;display:inline-block;font-size:0;} .WrapQuickBanner .quick_image img{display:block;} .WrapQuickBanner .quick_sp1{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/e0a9583346067ead951b9f07ffe1dc625f83916447f1eb8ec82731d8243d0c6d.webp) no-repeat left top;position:absolute; top:0; left:0;} .WrapQuickBanner .quick_sp2{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/8b703b4992ea6fcadc10afa189ae5d099c461e1084436518aad71b809695cdc5.webp) no-repeat left bottom;position:relative; top:-3px; margin-bottom:-3px; } /* 롤링 배너 */ .HBbanner{padding:0;margin:0;list-style:none;} .HBbanner li{margin-bottom:5px;} .HBbanner p{padding:0;margin:0} .HDDateStyle{background:#f5f5f5;border:1px solid #eee;padding:5px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;} .HBbanner .imgNone{text-indent:-9999px;overflow:hidden;} /*profile*/ .ProfileZine{margin:0;padding:0;list-style:none;} .ProfileZine li .wrap_profile{position:relative;width:70px;height:70px;margin:0;padding:4px;float:left;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background:#ccc;border:1px solid #c5c5c5;} .wrap_profile a{position:absolute;width:70px;height:18px;line-height:18px;_padding-top:2px;_height:16px;top:56px;left:4px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/38f2ae20931c1842d46cff7ba41b5a1b8a2fd659f54f64d86ab8186d444e03a9.webp) repeat; text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;} .ProfileZine li .wrap_profile .author{color:#fff !important;} .HBprofile{width:70px;height:70px;} .ProfileZine li a{text-decoration:none !important} .ProfileZine li .category{color:#666;} .ProfileZine li .title, .ProfileZine li .data_replay .replyNum{font-size:13px;font-weight:normal;font-family:NanumGothic,나눔고딕,Tahoma,Arial, Geneva,applegothic,sans-serif;position:relative; margin-right:10px;} .ProfileZine li{position:relative;*zoom:1;padding:5px;margin-bottom:5px;*margin-bottom:3px;*display:inline-block;} .ProfileZine li:after{content:"";display:block;clear:both;} .ProfileZine li .data_replay{position:absolute;right:5px;bottom:3px;font-size:12px;} .ProfileZine li .data_replay .date, .ProfileZine li .data_replay .hour{font-size:12px; font: 12px Tahoma;} .ProfileNone{width:70px;height:70px;display:inline-block;position:relative;text-indent:-999px;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/anonym.gif) no-repeat left top;} .FBwidgetContainer .ProfileZine .text{position:relative; padding-bottom:15px;} .ProfileZine li .board {background: url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgets/forhanbicontent/skins/default/img/white/lineTextDiv.gif) no-repeat right center;padding-right: 5px;} .HBwidgetZineB li.HBZinetitle, .ProfileZine li .board, .ProfileZine li .category{font-size:13px;font-weight:normal;font-family:NanumGothic,나눔고딕,Tahoma,Arial, Geneva,applegothic,sans-serif;} .ProfileZineDiv{position:relative;*zoom:1;padding:3} .ProfileZineDiv:after{content:"";clear:both;display:block;} .ProfileZineDiv p{margin:0;padding:0;} .ProfileZineDiv .Tcolor{color:#333;} .ProfileZineDiv .Ccolor{color:#777;} /* 서브 롤링 배너 */ .subRolling{position:relative;} .spansubRolling{width:5px;height:5px;font-size:0;overflow:hidden;position:absolute;background-image:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/8615d15655052eec3ad7ab74d03cbcae1a5d2cb7cf4209ee32c14e48266ea29b.webp);background-repeat:no-repeat;z-index:999;} .subRollingTL{top:0;left:0;background-position:left top;} .subRollingTR{top:0;right:0;background-position:-10px top;} .subRollingBL{bottom:0;left:0;background-position:left -10px;} .subRollingBR{bottom:0;right:0;background-position:-10px -10px;} /* ==== style.css ==== */ div.hanbisimpleWidgetStyle{position:relative;margin-bottom:20px;overflow:hidden;*zoom:1;} div.hanbisimpleWidgetStyle h2{margin:0 0 10px 0;padding:10px 0;font:bold 14px "Malgun Gothic", AppleGothic, Dotum, Sans-serif;height:24px;line-height:24px;color:#575757;} div.simpleWidgetStyleA h2{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgetstyles/ForhanbiStyle/WidgetStyleA.gif) repeat-x left bottom;} div.hanbisimpleWidgetStyle a.widgetMoreLink{text-decoration:none; color:#575757; padding-right:20px;height:24px;line-height:24px;display:inline-block;background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgetstyles/ForhanbiStyle/BgAniH2WSA.gif) no-repeat right 50%} div.hanbisimpleWidgetStyle.black h2{color:#333;} div.hanbisimpleWidgetStyle.black h2{color:#999;} div.simpleWidgetStyleB{border:1px solid #ddd;} div.simpleWidgetStyleB .widgetContainer{padding:0 5px 10px 5px;} div.simpleWidgetStyleB h2{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgetstyles/ForhanbiStyle/simpleWidgetStyleB.gif) repeat-x left bottom;padding:5px 15px;border:1px solid #fff;} div.simpleWidgetStyleC h2{background:url(https://d1kdw48hwet1m9.cloudfront.net/static/legacy/widgetstyles/ForhanbiStyle/simpleWidgetStyleC.gif) repeat-x left bottom;padding:5px 15px;} div.simpleWidgetStyleD h2{padding:5px 15px;border-bottom:1px solid #ddd;} /* ==== live head styles ==== */ /* 배경색, 배경이미지 설정 */ body.spf-page-main { background:url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/a934fe8b82da47e21a8f1a57b839fe279dd4a30c6f377893b970320a3cd79096.webp) no-repeat center top scroll ;background-position-y: 92%;} /* Layout Style */ .layout_content .main_content { width:1100px; margin:0; } .layout_head .logo_line .head_ad { left:200px; top:10px; } .layout_search { right:150px; top:40px; } .layout_foot .notice .family_site { right:10px; top:7px; } .layout_head .logo_line h1 { top:10px; } /* 스크롤 배너 위치 조절 */ #quick_scroll2 { top:250px; } #quick_scroll { width:110px; left:-120px; } #quick_scroll2 { width:130px; right:-140px; } #quick_scroll .quick_scroll_body img { width:100px; } #quick_scroll .quick_scroll_body2 img { width:120px; } .textT1_wowSlider_298176236, .textT1_wowSlider_298176236 a, .textT1_wowSlider_298176236 a:visited { color:#000; font-family: Tahoma,Arial,Helvetica; font-size: 14px; font-weight: bold; text-decoration: none; display:block;} .textT1_wowSlider_298176236 a:hover, .textT1_wowSlider_298176236 a:focus { text-decoration: underline; } .textC1_wowSlider_298176236, .textC1_wowSlider_298176236 a, .textC1_wowSlider_298176236 a:visited { text-align:justify; color:; font-family: ; font-size: px; font-weight: normal; text-decoration: none; display:block;} .textC1_wowSlider_298176236 a:hover, .textC1_wowSlider_298176236 a:focus { text-decoration: underline; } #wowslider-container { /* overflow: hidden; */ zoom: 1; position: relative; width:400px; height:290px; margin:0 auto; z-index:100; } #wowslider-images{ position: absolute; width:400px; height:290px; overflow:hidden; cursor:pointer; } #wowslider-images a{ text-decoration: none; color:transparent; } #wowslider-images img{ top:0; left:0; border:none 0; } #wowslider-container a{ text-decoration: none; outline: none; border: none; } #wowslider-container .ws_bullets { font-size: 0px; padding: 10px; float: left; position:absolute; right: 10px; top: 10px; z-index:1001; } #wowslider-container .ws_bullets a { margin-left:4px; width:22px; height:22px; background: url('https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/88cc65edb594a639f3f3f910a345b2c938772542c148293781d537aa58e09327.webp') left top; float: left; text-indent: -1000px; position:relative; } #wowslider-container .ws_bullets a.ws_selbull, #wowslider-container .ws_bullets a:hover{ background-position: 0 100%; } #wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; font-size:0; top:50%; margin-top:-15px; position:absolute; z-index:1001; height: 30px; width: 30px; background-image: url('https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/9aeb47401670dc524b4c51f9d2b6bcf7beaa2b43b13b41933c698ec38269f5f3.webp'); } #wowslider-container a.ws_next{ background-position: 100% 0; right:21px; } #wowslider-container a.ws_prev { left:21px; background-position: 0 0; } * html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev{display:block} #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev {display:block} #wowslider-container:focus-within a.ws_next, #wowslider-container:focus-within a.ws_prev {display:block} #wowslider-container .ws-title{ position:absolute; display:block; bottom: 20px; left: 20px; margin-right:25px; padding:10px; background-color:white; color:#000; z-index: 50; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family: Tahoma,Arial,Helvetica; font-size: 14px; } #wowslider-container .ws-title div{ padding-top:5px; font-size: 14px; } #wowslider-container .ws_bullets a img{ text-indent:0; display:block; top:20px; left:-80px; visibility:hidden; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #FFF; box-shadow: 0 0 5px #FFF; border: 2px solid #000; border-radius:4px; -moz-border-radius:4px; } #wowslider-container .ws_bullets a:hover img{ visibility:visible; } #wowslider-container .ws_bulframe div div{ height:60px; overflow:visible; position:relative; } #wowslider-container .ws_bulframe div { overflow:hidden; position:relative; width:80px; } #wowslider-container .ws_bulframe{ display:none; top:35px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #FFF; box-shadow: 0 0 5px #FFF; border: 2px solid #000; border-radius:4px; -moz-border-radius:4px; } #wowslider-container .ws_bulframe span{ display:block; position:absolute; top:-8px; margin-left:1px; left:32.5px; background:url('https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/45c3e9bad004691542f9ecf0a073bcae2c47cc3031de9452061911d2a2d14762.webp'); width:15px; height:6px; } a#vlb{display:none} /* WOWSlider blast parity: the legacy effect splits the outgoing frame into 4x3 pieces. */ #wowslider-images > a { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; z-index: 1; } #wowslider-images > a.is-active { opacity: 1; visibility: visible; z-index: 2; } #wowslider-images > a img { display: block; width: 100%; height: 100%; object-fit: cover; } #wowslider-images .spf-blast-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; } #wowslider-images.is-blasting { overflow: visible; } #wowslider-images .spf-blast-tile { position: absolute; display: block; opacity: 1; transform: translate3d(0, 0, 0); transform-origin: center; will-change: opacity, transform; transition: opacity 1000ms ease, transform 1000ms cubic-bezier(.2, .75, .25, 1); } #wowslider-images .spf-blast-outgoing { opacity: 1; } #wowslider-images .spf-blast-incoming { opacity: 0; transform: translate3d(var(--blast-x), var(--blast-y), 0); } #wowslider-images .spf-blast-layer.is-blasting .spf-blast-outgoing { opacity: 0; transform: translate3d(var(--blast-x), var(--blast-y), 0); } #wowslider-images .spf-blast-layer.is-blasting .spf-blast-incoming { opacity: 1; transform: translate3d(0, 0, 0); } @media (max-width: 640px) { #wowslider-container, #wowslider-images { width: 100%; height: auto; aspect-ratio: 400 / 290; } } /* auto from live inline positions */ .spf-pos-1 {margin-left:10px;} .spf-pos-2 {width:1100px;} .spf-pos-3 {overflow:hidden;background-position: 0px 0px; margin: 0px; border: 0px solid rgb(255, 255, 255); width: 35%; height: 340px; float: left; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-4 {*zoom:1;padding:0px 0px 0px 0px !important; padding:none !important;} .spf-pos-5 {overflow:hidden;background-position: 0px 0px; margin: 0px 0px 0px 16px; border: 0px solid rgb(255, 255, 255); width: 30%; height: 340px; float: left; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-6 {margin-right:2px;} .spf-pos-7 {font-weight:bold} .spf-pos-8 {display:none} .spf-pos-9 {overflow:hidden;background-position: 0px 0px; margin: 0px; border: 0px solid rgb(255, 255, 255); width: 365px; height: 170px; float: right; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-10 {width:110px;margin-right:-110px} .spf-pos-11 {width:100px;height:75px} .spf-pos-12 {padding-left:120px} .spf-pos-13 {overflow:hidden;margin: 0px; border: 0px solid rgb(255, 255, 255); width: 369px; height: 134px; float: right; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-14 {padding:0px 0px 0px 0px !important; padding:none !important;} .spf-pos-15 {} .spf-pos-16 {overflow:hidden;background-position: 0px 0px; margin: 0px; border: 0px solid rgb(255, 255, 255); width: 660px; height: 186px; float: left; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-17 {width:640px;} .spf-pos-18 {width:140px; padding:10px; margin:0px 0px 0px 0px} .spf-pos-19 {width:130px;height:90px} .spf-pos-20 {width:130px;height:90px;} .spf-pos-21 {left:91px} .spf-pos-22 {width:130px;padding-top:90px} .spf-pos-23 {width:130px; padding:0 5px;} .spf-pos-24 {overflow:hidden;background-position: 0px 0px; border-width: 0px 0px 0px 1px; border-style: solid solid solid dotted; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(255, 255, 255) rgb(210, 210, 210); margin: 0px 0px 0px 10px; width: 420px; height: 190px; float: right; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-25 {*zoom:1;padding:0px 0px 0px 10px !important; padding:none !important;} .spf-pos-26 {overflow:hidden;background-position: 0px 0px; margin: 0px; border: 0px solid rgb(255, 255, 255); width: 40%; height: 320px; float: left; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-27 {overflow:hidden;background-position: 0px 0px; margin: 0px; border: 0px solid rgb(255, 255, 255); width: 30%; height: 160px; float: left; background-image: none; background-repeat: repeat; background-color: transparent; user-select: auto;} .spf-pos-28 {margin:0px 0px 0px 0px} .spf-pos-29 {left:61px} .spf-pos-30 {width:100px;padding-top:75px} .spf-pos-31 {height:20px;} .spf-pos-32 {color: rgb(99, 99, 99);} .spf-pos-33 {color: rgb(0, 0, 255);} /* === header parity: match live we_home header geometry === */ /* 메인과 일반 사용자 페이지가 동일한 헤더 배경을 공유한다. */ body.spf-page-main { position: relative; background: #fff !important; } /* 일반 사용자 mid 페이지도 동일한 헤더 배경을 사용한다. viewer 화면은 이 규칙 대상이 아니다. */ html body.spf-mid { position: relative; background: #fff !important; } /* 메인 헤더까지만 원본 크기의 이미지를 노출하고, 본문은 흰색으로 시작한다. */ body.spf-page-main::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 280px; background: url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/a934fe8b82da47e21a8f1a57b839fe279dd4a30c6f377893b970320a3cd79096.webp) no-repeat center top; background-position-y: 90%; pointer-events: none; } html body.spf-mid::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 280px; background: url(https://d1kdw48hwet1m9.cloudfront.net/static/webp-main/a934fe8b82da47e21a8f1a57b839fe279dd4a30c6f377893b970320a3cd79096.webp) no-repeat center top; background-position-y: 90%; pointer-events: none; } /* 헤더와 본문을 이미지 레이어 위에 유지하되 레이아웃 흐름은 바꾸지 않는다. */ body.spf-page-main .layout_body { position: relative; z-index: 1; } html body.spf-mid .layout_body { position: relative; z-index: 1; } /* logo_line must NOT gain flow height — h1 is absolute (live). Earlier min-height:90px pushed GNB from y≈90 to y≈180. */ .layout_head .logo_line { min-height: 0 !important; height: 0 !important; } .layout_head { min-height: 0 !important; } /* Live references ColorMenu1.png (404) → use menu_bg.png; keep bar dark enough for white text */ .layout_head .layout_topmenu { display: block !important; visibility: visible !important; position: relative !important; top: 80px !important; height: 86px !important; width: 1110px !important; margin: 0 auto !important; z-index: 1 !important; overflow: visible !important; /* live ColorMenu1.png 404 → transparent bar over lake (same effective look) */ background-color: transparent !important; background-image: none !important; } .layout_head .layout_topmenu .main_menu { display: inline-block !important; margin-left: 10px !important; height: 36px !important; } body.spf-page-main .layout_head .layout_topmenu .main_menu, body.spf-mid .layout_head .layout_topmenu .main_menu { width: 100% !important; display: flex !important; margin-left: 0 !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top, body.spf-mid .layout_head .layout_topmenu .menu_top { flex: 1 1 0; min-width: 0; float: none !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top > a.first_a, body.spf-mid .layout_head .layout_topmenu .menu_top > a.first_a { padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; } .layout_head .layout_topmenu .menu_top { display: block !important; float: left !important; position: relative !important; } .layout_head .layout_topmenu .menu_top > a.first_a, .layout_head .layout_topmenu .menu_top > a { color: #fff !important; font-size: 15px !important; font-weight: bold !important; font-family: 'Segoe UI', Meiryo, '나눔고딕', NanumGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, AppleGothic, sans-serif !important; } .layout_head .layout_topmenu .menu_top, .layout_head .layout_topmenu .menu_top .sub li a { font-family: 'Segoe UI', Meiryo, '나눔고딕', NanumGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, AppleGothic, sans-serif; } /* The mega-menu is 175px tall while its parent keeps the legacy 86px flow box. Give the content an explicit separation so it never starts underneath it. */ body.spf-page-main .layout_content, body.spf-mid .layout_content { margin-top: 190px; } /* Submenus: live header keeps all .sub open (mega-menu), not hover-only */ .layout_head .layout_topmenu .menu_top .sub { display: block !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top, body.spf-mid .layout_head .layout_topmenu .menu_top { height: 175px !important; min-height: 175px !important; background-color: rgba(0, 0, 0, .68) !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top:hover, body.spf-page-main .layout_head .layout_topmenu .menu_top.selected, body.spf-mid .layout_head .layout_topmenu .menu_top:hover, body.spf-mid .layout_head .layout_topmenu .menu_top.selected { background-color: rgba(0, 0, 0, .78) !important; } /* Authenticated admin-board navigation shares the fixed mega-menu row. */ body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"], body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] { flex: 2 1 0; } body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub, body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub { left: auto; right: 0; width: 240px; min-width: 240px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 20px); grid-auto-flow: row; } body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub li, body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub li { min-width: 0; } body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub li a, body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub li a { box-sizing: border-box; width: 100%; height: 20px; line-height: 20px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Primary navigation stays in the header; children are revealed only while * the pointer or keyboard focus is inside that primary item. */ @media (min-width: 769px) { /* Keep the hovered desktop menu's stacking context above the content * stacking context. The mobile sitemap and public popup use their own * higher layers and are unaffected by this hover-only elevation. */ body.spf-page-main > .layout_body:has(.layout_head .layout_topmenu .menu_top:hover), body.spf-page-main > .layout_body:has(.layout_head .layout_topmenu .menu_top:focus-within), body.spf-mid > .layout_body:has(.layout_head .layout_topmenu .menu_top:hover), body.spf-mid > .layout_body:has(.layout_head .layout_topmenu .menu_top:focus-within) { z-index: 1001 !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top, body.spf-mid .layout_head .layout_topmenu .menu_top { height: 36px !important; min-height: 36px !important; background: transparent !important; } /* The legacy link uses a 48px box and 56px line-height. Reset it to the * 36px desktop menu row so each primary label is vertically centered. */ body.spf-page-main .layout_head .layout_topmenu .menu_top > a.first_a, body.spf-mid .layout_head .layout_topmenu .menu_top > a.first_a { display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: 36px !important; line-height: 1.2 !important; } body.spf-page-main .layout_head .layout_topmenu .main_menu, body.spf-mid .layout_head .layout_topmenu .main_menu { background: rgba(51, 51, 51, .52); } body.spf-page-main .layout_head .layout_topmenu .menu_top:hover, body.spf-page-main .layout_head .layout_topmenu .menu_top:focus-within, body.spf-page-main .layout_head .layout_topmenu .menu_top.selected, body.spf-mid .layout_head .layout_topmenu .menu_top:hover, body.spf-mid .layout_head .layout_topmenu .menu_top:focus-within, body.spf-mid .layout_head .layout_topmenu .menu_top.selected { background: rgba(51, 51, 51, .78) !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top .sub, body.spf-mid .layout_head .layout_topmenu .menu_top .sub { display: none !important; top: 36px; min-width: 150px; padding: 6px 0; background: rgba(51, 51, 51, .88); border: 1px solid rgba(255, 255, 255, .25); z-index: 40; } body.spf-page-main .layout_head .layout_topmenu .menu_top:hover .sub, body.spf-page-main .layout_head .layout_topmenu .menu_top:focus-within .sub, body.spf-mid .layout_head .layout_topmenu .menu_top:hover .sub, body.spf-mid .layout_head .layout_topmenu .menu_top:focus-within .sub { display: block !important; } body.spf-page-main .layout_head .layout_topmenu .menu_top .sub li a, body.spf-mid .layout_head .layout_topmenu .menu_top .sub li a { height: 28px; line-height: 28px; padding: 0 18px; color: #fff; } body.spf-page-main .layout_head .layout_topmenu .menu_top .sub li:hover, body.spf-mid .layout_head .layout_topmenu .menu_top .sub li:hover { background: rgba(255, 255, 255, .15); } body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"], body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] { flex: 1 1 0; } body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub, body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"] .sub { display: none !important; grid-template-columns: none; grid-template-rows: none; width: auto; min-width: 180px; } body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"]:hover .sub, body.spf-page-main .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"]:focus-within .sub, body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"]:hover .sub, body.spf-mid .layout_head .layout_topmenu .menu_top[data-spf-admin-menu="1"]:focus-within .sub { display: block !important; } } /* Mobile/PC switch: the button is intentionally compact and reuses the * existing project neutrals/brand blue. */ /* Keep member-only navigation hidden for guests even when desktop layout * rules override the browser's native hidden presentation. */ .layout_topmenu [data-spf-member-admin-link][hidden] { display: none !important; } /* Shared GNB/LNB/mobile clones must honor the authorization-controlled hidden flag. */ [data-spf-member-board][hidden] { display: none !important; } .spf-view-mode-toggle { display: none; appearance: none; -webkit-appearance: none; margin: 0 10px; padding: 6px 12px; border: 1px solid #111; background: #111; box-shadow: none; color: #fff; font: inherit; font-size: 12px; font-weight: 400; line-height: 1.4; text-decoration: none; white-space: nowrap; word-break: keep-all; vertical-align: middle; flex-shrink: 0; cursor: pointer; } .spf-view-mode-toggle:hover { background: #222; border-color: #222; color: #fff; text-decoration: none; } .spf-view-mode-toggle:focus-visible { outline: 2px solid #00aff0; outline-offset: 2px; } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .spf-mobile-competition-links { display: flex; gap: 6px; margin: 0 0 12px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .spf-mobile-competition-links a { flex: 1 1 0; min-width: 0; padding: 10px 4px; border: 1px solid #ccc; color: #333; background: #fff; text-align: center; text-decoration: none; font-size: 12px; line-height: 18px; } html:not([data-spf-view-mode="desktop"]) .footer-brand-cell .spf-view-mode-toggle { display: inline-block; } } html[data-spf-view-mode="desktop"] .footer-brand-cell .spf-view-mode-toggle { display: inline-block; } .spf-mobile-auth { display: none; } .layout_search { position: absolute !important; right: 150px !important; top: 40px !important; z-index: 1000 !important; } .layout_head .logo_line h1 { position: absolute !important; top: 10px !important; } .layout_head .logo_line h1 img { display: block; width: 376px; height: 50px; max-width: none; object-fit: contain; object-position: left center; } .top_box .layout_width .box_right li a, .top_box .layout_width .bookmark a { color: #b8b8b8 !important; } .spf-row { display: block !important; } /* Authenticated user controls retain the legacy header/login widget tone. */ .top_box .layout_width .box_right .btn_logout { appearance: none; background: transparent; border: 0; color: #b8b8b8; font: inherit; height: 25px; line-height: 25px; padding: 0 5px; cursor: pointer; white-space: nowrap; } .top_box .layout_width .box_right .btn_logout:hover { color: #a6a6a6; } .top_box .layout_width .box_right .btn_logout:focus-visible { outline: 1px solid #ccc; outline-offset: -1px; } .layout_login [data-spf-authenticated-widget] { box-sizing: border-box; width: 200px; min-height: 58px; padding: 11px; border: 2px solid #d9d9d9; color: #282828; line-height: 24px; } .layout_login [data-spf-authenticated-widget] strong { margin-right: 2px; font-weight: bold; } .layout_login [data-spf-authenticated-widget] .btn_logout { appearance: none; background: transparent; border: 0; color: #54564b; font: inherit; padding: 0; cursor: pointer; white-space: nowrap; } .layout_login [data-spf-authenticated-widget] .btn_logout:hover { text-decoration: underline; } .layout_login [data-spf-authenticated-widget] .btn_logout:focus-visible { outline: 1px solid #ccc; outline-offset: 2px; } /* Guest/authenticated controls stay reserved but invisible until auth.js has * resolved the session, preventing a first-paint login flash. */ html[data-spf-auth-state="pending"] .top_box .box_right, html[data-spf-auth-state="pending"] #fo_login_widget { visibility: hidden; } html[data-spf-auth-state="pending"] .lnb[data-spf-member-admin-link], .layout_content .lnb[data-spf-member-admin-link][hidden] { display: none !important; } html[data-spf-auth-state="pending"] .layout_content .lnb[data-spf-public-lnb]:has(+ .lnb[data-spf-admin-lnb]) { visibility: hidden; } /* Keep the public left navigation out of the way when its authenticated * ADMIN counterpart is active. */ .layout_content .lnb[data-spf-public-lnb][hidden] { display: none !important; } /* Keep the pointer state consistent across legacy and migrated controls. */ button:not(:disabled), input[type=button]:not(:disabled), input[type=submit]:not(:disabled), [role="button"]:not([aria-disabled="true"]), .btn a:not([aria-disabled="true"]) { cursor: pointer; } button:disabled, input[type=button]:disabled, input[type=submit]:disabled, [aria-disabled="true"] { cursor: not-allowed !important; } /* 운영 사이트의 compact mobile home. Desktop legacy placement remains unchanged. */ .spf-mobile-header, .spf-mobile-sponsors, .spf-mobile-sponsor-block { display: none; } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]), html:not([data-spf-view-mode="desktop"]) body { min-width: 0; width: 100%; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main { background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main::before { display: none !important; content: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .top_box { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_body, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_head { width: 100%; min-width: 0 !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_head { height: 42px !important; min-height: 42px !important; background: #222; border-bottom: 2px solid #666; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_head { min-height: 48px !important; height: auto !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; height: auto; padding: 0 76px 0 8px; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) .spf-mobile-brand { display: block; flex: 1 1 auto; width: auto; min-width: 0; height: 34px; overflow: hidden; } html:not([data-spf-view-mode="desktop"]) .spf-mobile-auth { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } html:not([data-spf-view-mode="desktop"]) .spf-mobile-auth a, html:not([data-spf-view-mode="desktop"]) .spf-mobile-auth .btn_logout { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; color: #fff; background: transparent; border: 0; text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 700; } html:not([data-spf-view-mode="desktop"]) .spf-mobile-brand img { display: block; width: auto; max-width: 100%; height: auto; max-height: 34px; object-fit: contain; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .logo_line, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_topmenu, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .search { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap_button { top: 7px; right: 8px; z-index: 1004; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap_button button { width: 64px; height: 28px; border: 1px solid #666; border-radius: 3px; background: #333; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap_button button img { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap_button button::after { color: #fff; font: 600 12px/24px Arial, sans-serif; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #sitemap_button .sitemap_open::after { content: 'Menu ›'; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_content { width: 100% !important; margin: 0 !important; padding: 0 6px; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #container.spf-pos-2 { width: 100% !important; min-width: 0 !important; height: 0; margin: 0; overflow: visible; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main #container.spf-pos-2 #quick_scroll2 { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_content .main_content { display: flex; flex-direction: column; width: 100% !important; min-width: 0; margin: 0 !important; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-5 { order: 1; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-26 { order: 2; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-mobile-sponsor-block { order: 3; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-27 { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-3 { order: 4; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-9, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-13, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-16, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-24 { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-3, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-5, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-26, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-27 { width: 100% !important; height: auto !important; min-height: 0; margin: 0 !important; float: none !important; overflow: visible; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content .AniH2WS { margin: 0; padding: 10px 8px 8px; border-bottom: 1px dotted #ccc; font-size: 15px; line-height: 20px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content .widgetMoreLink { color: #333; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-5 .normalATable, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .normalATable { width: 100%; table-layout: fixed; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-5 .normalATable td.title, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .normalATable td.title { padding: 3px 4px; border: 0; font-size: 12px; line-height: 18px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-5 .normalATable a, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .normalATable a { display: inline; overflow-wrap: anywhere; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 > .spf-pos-4 { display: block; width: 100%; margin: 0 0 18px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab { width: 100%; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA { display: flex; flex-wrap: wrap; height: auto; background: #fff; border: 0; border-bottom: 1px solid #666; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA > li { flex: 1 1 0; min-width: 0; height: auto; top: 0; border-right: 1px solid #ccc; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA > li > a { display: flex; min-height: 36px; align-items: center; justify-content: center; padding: 6px 4px; color: #333; background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA > li > a span { display: block; height: auto; padding: 0; font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA > li.active > a { font-weight: bold; background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .widgetDivider { padding: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .widgetDivider > dd.open { display: block; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .widgetDivider > dd.open tbody tr:nth-child(n+6) { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-block { display: block; margin: 0 0 18px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsors { display: flex; gap: 6px; margin: 0; font-size: 11px; line-height: 18px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsors > a { display: flex; flex: 1 1 0; min-width: 0; min-height: 44px; box-sizing: border-box; align-items: center; justify-content: center; padding: 10px 4px; border: 1px solid #ccc; color: #333; text-align: center; text-decoration: none; white-space: nowrap; word-break: keep-all; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsors > a.active { color: #00aff0; font-weight: bold; background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsors > a:focus-visible { outline: 2px solid #00aff0; outline-offset: 2px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel { display: block; margin: 0; padding: 8px 4px 0; border-bottom: 1px solid #ccc; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-group { margin: 0 0 12px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-group[hidden] { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel h2 { display: flex; grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 0; height: auto; align-self: start; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; padding: 4px 8px; color: #00aff0; background: #fff; font-size: 13px; font-weight: 400; border: 1px solid #666; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel h2 span { display: inline-block; width: auto; box-sizing: border-box; margin: 0; padding: 2px 8px; color: #fff; background: #00aff0; font-size: 10px; font-style: italic; line-height: 14px; text-align: center; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel h2::after { content: none; display: none; margin: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-item { min-width: 0; border: 1px solid #666; background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-item > a, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-item > div { display: flex; min-height: 72px; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; color: #333; text-align: center; text-decoration: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-item > a:focus-visible { outline: 2px solid #00aff0; outline-offset: -2px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel img { display: block; width: 100%; height: 42px; object-fit: contain; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-company { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-company.is-fallback { display: block; font-size: 11px; line-height: 14px; overflow-wrap: anywhere; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-mobile-sponsor-panel .spf-sponsor-empty { margin: 0; padding: 12px 8px; color: #666; background: #fff; text-align: center; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-3 #wowslider-container, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-3 #wowslider-images, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-3 #wowslider-images a, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-3 #wowslider-images img { width: 100%; max-width: 100%; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-3 #wowslider-images img { height: auto; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-3 .ws-title { max-width: calc(100% - 16px); } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot { width: 100%; min-width: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice { height: auto; min-height: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice > div { width: 100%; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice table, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice tbody, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice tr, html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice td { display: block; width: 100%; height: auto; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice table { margin: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice td { text-align: center; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .notice td:first-child img { display: block; margin: 0 auto 8px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot #social { position: static; width: 100%; margin: 12px 0 0; text-align: center; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot #social .social_icons { display: inline-flex; float: none; margin: 0 auto; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot td.footer-brand-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; white-space: normal; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot td.footer-brand-cell > img { display: inline-block; margin: 0; max-width: 58%; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .footer-brand-cell #social { display: inline-block; width: auto; margin: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .footer-brand-cell #social .social_icons { display: inline-flex; float: none; margin: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .layout_foot .footer-email { display: inline-block; margin-top: 2px; } } /* Responsive shell for page.php static/member screens. Board modes keep their * dedicated responsive rules and are intentionally excluded. */ @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-mid::before { height: 42px; } html:not([data-spf-view-mode="desktop"]) body.spf-mid .layout_content, html:not([data-spf-view-mode="desktop"]) body.spf-mid .main_content { background: #fff; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) { width: 100%; min-width: 0; overflow-x: hidden; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .top_box, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .logo_line, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_topmenu, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .search { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_body, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_content, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_foot { width: 100% !important; min-width: 0 !important; max-width: none; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head { display: block; height: 42px !important; min-height: 42px !important; background: #222; border-bottom: 2px solid #666; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .spf-mobile-header { display: flex; align-items: center; width: 100%; height: 40px; padding: 0 76px 0 8px; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .spf-mobile-auth { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .spf-mobile-auth a, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .spf-mobile-auth .btn_logout { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; color: #fff; background: transparent; border: 0; text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 700; } html:not([data-spf-view-mode="desktop"]) .spf-mobile-sitemap-nav [data-spf-admin-link][hidden], html:not([data-spf-view-mode="desktop"]) .spf-mobile-sitemap-nav [data-spf-member-admin-link][hidden] { display: none !important; } html:not([data-spf-view-mode="desktop"]) .spf-mobile-sitemap-nav [data-spf-admin-link] .second_a { min-height: 44px; height: 44px; padding-top: 12px; padding-bottom: 12px; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .spf-mobile-brand { flex: 1 1 auto; width: auto; min-width: 0; height: 34px; margin-right: 72px; overflow: hidden; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .spf-mobile-brand img { display: block; width: auto; max-width: 100%; height: auto; max-height: 34px; object-fit: contain; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) #sitemap_button { position: absolute; top: 4px; right: 8px; z-index: 1003; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) #sitemap_button button { width: auto; height: 32px; padding: 0 10px; border: 1px solid #666; border-radius: 2px; color: #fff; background: #333; font-size: 12px; font-weight: bold; white-space: nowrap; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) #sitemap_button button img { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) #sitemap_button .sitemap_open::after { content: 'Menu ›'; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) #sitemap_button .sitemap_close::after { content: '‹ 돌아가기'; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_content { margin: 0 !important; padding: 10px; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .leftside, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .rightside, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) #quick_scroll2 { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .main_content { width: 100% !important; max-width: 100%; min-width: 0; float: none; margin-left: 0; margin-right: 0; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_content img, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_content video, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_content iframe { max-width: 100% !important; height: auto; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_foot, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_foot .notice, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_foot .notice > div, html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_foot table { display: block; width: 100% !important; min-width: 0 !important; height: auto; box-sizing: border-box; } /* page.php 스냅샷에 mobile_header가 없을 때만 레거시 logo_line을 헤더 대역으로 쓴다. * login/signup 등은 mobile_header를 주입하므로 logo_line을 다시 켜면 로고가 겹친다. */ html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head:not(:has(.spf-mobile-header)) .logo_line { display: block !important; position: relative; width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head:not(:has(.spf-mobile-header)) .logo_line h1 { top: 4px !important; left: 8px; width: calc(100% - 82px); height: 34px; margin: 0; overflow: hidden; } html:not([data-spf-view-mode="desktop"]) body.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head:not(:has(.spf-mobile-header)) .logo_line h1 img { display: block; width: auto; max-width: 100%; height: 34px; object-fit: contain; } } .spf-title-bold { font-weight: 700; } /* Forced desktop view on a phone: keep the 1110px canvas (.layout_content) * and allow horizontal scroll instead of collapsing via max-width:768 rules. * min-width must not sit on html — that expands the canvas and Chrome * scale-to-fits (visualViewport.scale < 1) instead of scrolling. * body overflow는 hidden이 아니라 visible — 푸터 2열(기업은행/copyright)이 * 잘리지 않고 html 하나의 가로 스크롤포트로만 이동한다. */ html[data-spf-view-mode="desktop"] { overflow-x: auto; overflow-y: auto; } html[data-spf-view-mode="desktop"] body { min-width: 1110px; width: 1110px; overflow: visible !important; } html[data-spf-view-mode="desktop"] .layout_head .layout_topmenu { width: 1110px !important; } html[data-spf-view-mode="desktop"] #container, html[data-spf-view-mode="desktop"] .layout_body, html[data-spf-view-mode="desktop"] .layout_head, html[data-spf-view-mode="desktop"] .layout_content, html[data-spf-view-mode="desktop"] .layout_foot, html[data-spf-view-mode="desktop"] .main_content, html[data-spf-view-mode="desktop"] #container .main_content { overflow: visible !important; overflow-x: visible !important; } html[data-spf-view-mode="desktop"] .layout_body, html[data-spf-view-mode="desktop"] .layout_head, html[data-spf-view-mode="desktop"] .layout_content, html[data-spf-view-mode="desktop"] .layout_foot, html[data-spf-view-mode="desktop"] #container .main_content { min-width: 1110px; width: 1110px; max-width: none; } html[data-spf-view-mode="desktop"] .layout_foot, html[data-spf-view-mode="desktop"] .layout_foot table, html[data-spf-view-mode="desktop"] .layout_foot td, html[data-spf-view-mode="desktop"] .layout_foot .notice { overflow: visible !important; } html[data-spf-view-mode="desktop"] .layout_foot .notice { height: auto; min-height: 20px; } html[data-spf-view-mode="desktop"] .footer-brand-cell { white-space: nowrap; } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head .logo_line, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head .logo_line, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head .logo_line, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid:not(.spf-board-mode-list):not(.spf-board-mode-detail):not(.spf-board-mode-viewer) .layout_head .logo_line { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid .layout_content, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .layout_content, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid .layout_content, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid .layout_content { width: 100% !important; margin: 0 !important; overflow: visible !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid .leftside, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .leftside, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid .leftside, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid .leftside, html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid .rightside, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .rightside, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid .rightside, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid .rightside { display: none !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid .layout_content .main_content, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .layout_content .main_content, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid .layout_content .main_content, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid .layout_content .main_content { width: 100% !important; float: none !important; margin: 0 !important; max-width: 100%; box-sizing: border-box; overflow: visible !important; } html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid input[type="text"], html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid input[type="password"], html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid input[type="email"], html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid input[type="text"], html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid input[type="password"], html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid input[type="email"], html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid select, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .inputText, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid input[type="text"], html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid input[type="password"], html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid input[type="email"], html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid input[type="text"], html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid input[type="password"], html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid input[type="email"] { width: 100% !important; max-width: 100%; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .a { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* 메일링/쪽지 라디오는 p.a — 세로 스택 대신 라디오+라벨을 한 줄로 */ html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid p.a { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid p.a input[type="radio"] { width: auto !important; margin: 0; } html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid p.a label { display: inline; white-space: nowrap; } html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .xm > div, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .form, html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid .xm, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid .xm, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid .xm { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } html:not([data-spf-view-mode="desktop"]) body.spf-page-login.spf-mid .spf-mobile-auth, html:not([data-spf-view-mode="desktop"]) body.spf-page-signup.spf-mid .spf-mobile-auth, html:not([data-spf-view-mode="desktop"]) body.spf-page-find_account.spf-mid .spf-mobile-auth, html:not([data-spf-view-mode="desktop"]) body.spf-page-reset_password.spf-mid .spf-mobile-auth { display: flex !important; } /* login/find_account/signup/reset_password: 메인과 같은 컴팩트 푸터 스택. * 우측 기업은행/copyright 셀을 로고 아래로 내려 잘리지 않게 한다. 토글은 텍스트 유지. */ html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot { width: 100%; min-width: 0; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice { height: auto; min-height: 0; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice > div { width: 100%; box-sizing: border-box; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice table, html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice tbody, html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice tr, html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice td { display: block; width: 100%; height: auto; box-sizing: border-box; overflow: visible; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice table { margin: 0; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice td { text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice td:first-child img { display: block; margin: 0 auto 8px; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot #social { position: static; width: 100%; margin: 12px 0 0; text-align: center; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot #social .social_icons { display: inline-flex; float: none; margin: 0 auto; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot td.footer-brand-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; white-space: normal; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot td.footer-brand-cell > img { display: inline-block; margin: 0; max-width: 58%; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .footer-brand-cell #social { display: inline-block; width: auto; margin: 0; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .footer-brand-cell #social .social_icons { display: inline-flex; float: none; margin: 0; } html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .footer-email, html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice td strong, html:not([data-spf-view-mode="desktop"]) body:is(.spf-page-login, .spf-page-find_account, .spf-page-signup, .spf-page-reset_password).spf-mid .layout_foot .notice td span { display: inline; white-space: normal; overflow-wrap: anywhere; } } /* PFL 공지 목록은 아래 배너와 함께 공지사항 높이에 맞춰 여섯 행씩 표시한다. */ .spf-main-pfl-notice { height: 200px; } .spf-main-pfl-notice .is-page-hidden { display: none; } .spf-main-pfl-notice .normalATable { width: 100%; table-layout: fixed; } .spf-main-pfl-notice .normalATable td.title { padding: 2px; line-height: 18px; } .spf-main-pfl-notice .normalATable td.title > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-main-video { display: block; width: 100% !important; height: auto !important; min-height: 0; margin: 0 !important; float: none !important; overflow: visible; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-main-pfl-notice { display: none; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-26 { order: 3; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-mobile-sponsor-block { order: 4; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-pos-3 { order: 5; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .main_content > .spf-main-video { order: 6; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-main-pfl-notice .normalATable { width: 100%; table-layout: fixed; } } /* 공개 메인의 리그 메뉴는 숨김 속성을 활성 패널 스타일보다 우선한다. */ [data-spf-tabs="board"] [data-spf-member-admin-link][hidden], .spf-mobile-competition-links [data-spf-member-admin-link][hidden] { display: none !important; } /* 메인 게시판의 활성 패널은 모바일과 PC 모두에서 표시한다. */ [data-spf-tabs="board"] .widgetDivider > dd.open { display: block; } /* 모바일 공지 탭은 PC 화면/PC보기에서 활성 패널보다 숨김을 우선한다. */ [data-spf-tabs="board"] [data-spf-mobile-only-tab] { display: none !important; } [data-spf-tabs="board"] [data-spf-mobile-only-tab][hidden] { display: none !important; } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) [data-spf-tabs="board"] .widgetTabA > li[data-spf-mobile-only-tab]:not([hidden]), html:not([data-spf-view-mode="desktop"]) [data-spf-tabs="board"] .widgetDivider > dd.open[data-spf-mobile-only-tab]:not([hidden]) { display: block !important; } } @media (max-width: 768px) { html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA > li > a { box-sizing: border-box; min-height: 48px; height: 48px; } html:not([data-spf-view-mode="desktop"]) body.spf-page-main .spf-pos-26 .wrapwidgetTab > .widgetTabA > li > a span { white-space: normal; word-break: keep-all; overflow: visible; text-overflow: clip; text-align: center; } }