@charset "utf-8"; @import url("./base.css"); @import url("./common.css"); /* layout */ :root { /* size */ --font-titA:2rem; --font-titB:1.5rem; --font-titC:1.25rem; --font-titD:1.375rem; --font-tabA:1.125rem; --font-txtA:1.0625rem; --font-txtB:1rem; --font-txtC:.9375rem; } .header { background:rgba(0,0,0,.6); } #wrap { position:relative; margin-top:3rem; } /* location */ .siteLocation, .location, .locationTab, .funcItem { display:flex; justify-content:space-between; align-items:center; } .subFunc { background:url(../images/sub/bg_visual.jpg) center top no-repeat; background-size:cover; } .subFunc .visualBox { max-width:1200px; margin:0 auto; padding:0 1.25em; } .subFunc .visualBox h2 { display:inline-block; position:relative; margin:11.875rem 0 5.625rem; padding-right:.5em; line-height:1; color:#fff; font-size:2.875rem; font-weight:bold; letter-spacing:.025em; } .subFunc .visualBox h2::after { content:''; position:absolute; right:0; bottom:0; width:.9375rem; height:.9375rem; background:#ffe400; border-radius:50%; } .siteLocation { max-width:1200px; margin:0 auto; padding:0 1.25em; font-size:var(--font-txtA); } .location { height:4.75rem; } .location .home, .locationTab, .locationTab>li { height:100%; } .location .home a { display:flex; align-items:center; overflow:hidden; position:relative; height:100%; padding:0 .875rem 0 1.25rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='13px'%3E%3Cpath fill='rgb(255, 255, 255)' d='M12,5.999 L12,12.999 L2,12.999 L2,5.999 L-0,6 L7,-0 L14,6 L11.1000,5.999 Z'/%3E%3C/svg%3E") left center no-repeat; background-size:14px 13px; color:#fff; font-weight:400; } .locationTab>li { position:relative; } .location .home a::before, .locationTab>li::before { content:''; position:absolute; right:0; top:50%; width:1px; height:.9375rem; margin-top:-.46875rem; background:#fff; opacity:.49; } .locationTab>li:last-child::before { display:none; } .locationTab>li button { width:100%; height:100%; padding:0 .625rem; color:#000; text-align:left; } .locationTab>li button span { display:block; position:relative; min-width:7.6em; padding-right:2rem; color:#fff; } .locationTab>li button span::after { content:''; position:absolute; right:0; top:50%; width:.625rem; height:.625rem; margin-top:-.4rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; box-sizing:border-box; transform:rotate(45deg); transition:all .4s ease; } .locationTab>li button.active span::after { margin-top:-.125rem;transform:rotate(225deg); } .locationTab > li div { display:none; position:absolute; left:0; min-width:100%; background:#fff; border:1px solid #000; z-index:11; } .locationTab > li div ul { padding:.5em; border:1px solid #d3d3d3; box-sizing:border-box; } .locationTab > li div ul li { margin:.25em 0; } .locationTab > li div ul li a { display:block; font-weight:300; white-space:nowrap; } .locationTab > li div ul li a:hover, .locationTab > li div ul li a:focus { color:#004b9f; } .locationTab > li div ul li a[target="_blank"] { padding-right:1rem; background:url(../images/common/icon_blank.png) right center no-repeat; background-size:.875rem auto; } .funcItem { position:relative;} .funcItem>li { margin-left:.4375em; } .funcItem>li>button { overflow:hidden; width:2.625rem; height:2.625rem; background-position:center; background-repeat:no-repeat; border:1px solid rgba(255,255,255,.43); border-radius:50%; text-indent:-99em; } .funcItem>li>button:focus { outline:2px dashed #0c82e9; } .btnShare { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22'%3E%3Cpath fill='rgb(255, 255, 255)' d='M11.935,6.641 C11.341,6.641 10.791,6.469 10.311,6.191 L6.746,9.757 C7.024,10.237 7.195,10.787 7.195,11.381 C7.195,11.899 7.063,12.382 6.848,12.817 L9.892,15.861 C10.452,15.406 11.157,15.122 11.935,15.122 C13.736,15.122 15.195,16.581 15.195,18.381 C15.195,20.182 13.736,21.640 11.935,21.640 C10.135,21.640 8.676,20.182 8.676,18.381 C8.676,18.104 8.721,17.840 8.786,17.584 L5.452,14.250 C4.997,14.491 4.486,14.641 3.935,14.641 C2.135,14.641 0.676,13.181 0.676,11.381 C0.676,9.581 2.135,8.122 3.935,8.122 C4.410,8.122 4.857,8.228 5.264,8.410 L8.964,4.709 C8.782,4.303 8.676,3.856 8.676,3.382 C8.676,1.581 10.135,0.122 11.935,0.122 C13.736,0.122 15.195,1.581 15.195,3.382 C15.195,5.181 13.736,6.641 11.935,6.641 ZM11.943,20.069 C12.807,20.069 13.508,19.368 13.508,18.505 C13.508,17.640 12.807,16.940 11.943,16.940 C11.079,16.940 10.379,17.640 10.379,18.505 C10.379,19.368 11.079,20.069 11.943,20.069 ZM3.943,9.940 C3.079,9.940 2.379,10.640 2.379,11.505 C2.379,12.369 3.079,13.069 3.943,13.069 C4.807,13.069 5.508,12.369 5.508,11.505 C5.508,10.640 4.807,9.940 3.943,9.940 ZM11.943,1.940 C11.079,1.940 10.379,2.640 10.379,3.504 C10.379,4.368 11.079,5.069 11.943,5.069 C12.807,5.069 13.508,4.368 13.508,3.504 C13.508,2.640 12.807,1.940 11.943,1.940 Z'/%3E%3C/svg%3E"); } .btnPrint { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='19'%3E%3Cpath fill='rgb(255, 255, 255)' d='M21.015,14.014 L21.015,16.014 L17.015,16.014 L17.015,19.014 L15.015,19.014 L15.015,18.983 L7.015,18.983 L7.015,19.015 L5.015,19.015 L5.015,18.983 L4.984,18.983 L4.984,16.983 L5.015,16.983 L5.015,16.014 L1.015,16.014 L1.015,15.952 L0.984,15.952 L0.984,4.014 L1.015,4.014 L1.015,4.014 L4.984,4.014 L4.984,0.014 L6.983,0.014 L6.983,0.014 L17.015,0.014 L17.015,0.015 L17.015,2.014 L17.015,4.014 L18.984,4.014 L18.984,3.983 L20.984,3.983 L20.984,4.014 L21.015,4.014 L21.015,6.015 L20.984,6.015 L20.984,14.014 L21.015,14.014 ZM15.015,16.983 L15.015,16.014 L15.015,14.014 L15.015,12.983 L7.015,12.983 L7.015,14.014 L7.015,16.014 L7.015,16.983 L15.015,16.983 ZM15.015,2.014 L6.983,2.014 L6.983,4.014 L15.015,4.014 L15.015,2.014 ZM18.984,6.015 L2.984,6.015 L2.984,14.014 L5.015,14.014 L5.015,12.983 L5.015,11.015 L5.015,10.983 L17.046,10.983 L17.046,12.983 L17.015,12.983 L17.015,14.014 L18.984,14.014 L18.984,6.015 ZM15.015,6.983 L17.015,6.983 L17.015,8.952 L15.015,8.952 L15.015,6.983 Z'/%3E%3C/svg%3E"); } .funcItem>li::after { content:''; visibility:hidden; position:absolute; left:50%; bottom:-1.5em; width:1em; height:1em; margin-left:-1.625em; background:#fff; border-style:solid; border-color:#999; border-width:0; border-top-width:1px; border-left-width:1px; box-sizing:border-box; transform:rotate(45deg); z-index:10; transition:.4s all ease; opacity:0; } .funcItem .shareList { visibility:hidden; position:absolute; right:0; top:3.465em; padding:.5em; background:#fff; border:1px solid #999; box-sizing:border-box; text-align:center; z-index:10; opacity:0; transition:.4s all ease; } .funcItem>li.active::after { opacity:1; visibility:visible; } .funcItem .active .shareList { opacity:1; visibility:visible; } .funcItem .shareList h3 { text-align:left; } .funcItem .shareList ul { overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:.188em; width:100%; margin:.5em 0; } .funcItem .shareList ul li a { overflow:hidden; display:block; width:2.5rem; height:2.5rem; border-radius:50%; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; text-indent:-999px; box-sizing:border-box; } .funcItem .shareList ul li a:focus { border:2px dashed #f00; outline:none; } .funcItem .shareList ul li.iconKakao a { background-image:url(../images/sub/icon_ft_kakao.png); } .funcItem .shareList ul li.iconBand a { background-image:url(../images/sub/icon_ft_band.png); } .funcItem .shareList ul li.iconTwitter a { background-image:url(../images/sub/icon_ft_twitter.png); } .funcItem .shareList ul li.iconFacebook a { background-image:url(../images/sub/icon_ft_facebook.png); } .funcItem .shareList ul li.iconUrl a { border:1px solid #dcdcdc; background-image:url(../images/sub/icon_location_url.png); } .funcItem .shareList .urlCopy { display:flex; } .funcItem .shareList .urlCopy input { flex:1; border:1px solid #999; } .funcItem .shareList .urlCopy button { white-space:nowrap; padding:.5em .25em; background:#13294b; line-height:1.2; color:#fff; letter-spacing:-.05em; } .funcItem .shareList .urlCopy button:focus { border:2px dashed #f00; box-sizing:border-box; outline:none; } .funcItem .shareClose { position:absolute; right:.25em; top:.25em; } .funcItem .shareClose button { overflow:hidden; display:inline-block; position:relative; width:1.875em; height:1.875em; border-radius:50%; text-indent:-999px; box-sizing:border-box; } .funcItem .shareClose button::before, .funcItem .shareClose button::after { content:''; position:absolute; left:50%; top:50%; width:1.5em; height:2px; margin-left:-.75em; background:#000; } .funcItem .shareClose button::before { transform:rotate(45deg); } .funcItem .shareClose button::after { transform:rotate(135deg); } /* contentGroup */ #contentGroup { overflow:hidden; position:relative; margin:5.25rem 0; } /* pageTopWrap */ .pageTopWrap { position:relative; max-width:1200px; margin:0 auto 2.5rem; padding:0 1em; } .pageTopWrap h3.pageTit { margin-bottom:1em; padding-bottom:1.85em; background:url(../images/sub/bu_pagetit.png) no-repeat center bottom / auto .75em; text-align:center; line-height:1; font-size:2.5em; letter-spacing:-.025em; } /* tabmenu */ .tabNav { margin:3.125em 0; } .tabNav > p { display:none; } .tabNav .tabList ul { display:flex; justify-content:center; align-items:center; gap:.5em; } .tabNav .tabList ul li a { display:block; position:relative; padding:1em 1.66666em; background:#e2f0ff; border-radius:1.7em; line-height:1.11111; color:#004b9f; font-size:var(--font-tabA); font-weight:500; letter-spacing:-.035em; } .tabNav .tabList ul li.active a { background-color:#0061ce; color:#fff; font-weight:700; } .tabNav .tabList ul li.active a:focus { outline:2px dashed #000; } @media only screen and (max-width:2000px) { #contentGroup { background-size:auto; } } @media screen and (max-width:1200px) { .header.active { background:rgba(0,0,0,.6); } #container { margin-top:0; padding-top:0; } } @media screen and (max-width:960px) { .header, .header.active, .header.fix, .header.fix.active { background:#fff; } .header.fix { border-bottom:1px solid #e3e3e3; } .header .logo a, .header.active .logo a, .header.fix .logo a { background-image:url(../images/common/logo_bk_mo.png); } .header .btnSearch a, .header.active .btnSearch a, .header.fix .btnSearch a { background-image:url(../images/common/btn_search_bk.png); } .header .btnLogin a, .header.active .btnLogin a, .header.fix .btnLogin a, .header .btnLogin button, .header.active .btnLogin button, .header.fix .btnLogin button { background-image:url(../images/common/icon_login_bk.png); } .header .btnLogout a, .header.active .btnLogout a, .header.fix .btnLogout a, .header .btnLogout button, .header.active .btnLogout button, .header.fix .btnLogout button { background-image:url(../images/common/icon_logout_bk.png); } .header .btnMoGnb i, .header .btnMoGnb i::before, .header .btnMoGnb i::after, .header.active .btnMoGnb i, .header.active .btnMoGnb i::before, .header.active .btnMoGnb i::after, .header.fix .btnMoGnb i, .header.fix .btnMoGnb i::before, .header.fix .btnMoGnb i::after { background:#000; } #container, #contentGroup { background:none; } #container { margin-top:8.3333rem; } /* location */ .subFunc { background:none; } .visualBox { display:none; } #contentGroup { overflow:hidden; margin:4rem 0; padding-bottom:4%; } .siteLocation { position:static; padding:0; } .siteLocation p.home, .siteLocation .funcItem { display:none; } .siteLocation { display:block; } .siteLocation .location, .siteLocation .location .locationTab { display:block; height:auto; } .siteLocation .location .locationTab > li { display:none; position:static; } .siteLocation .location .locationTab > li:last-child { display:block; } .siteLocation .location .locationTab > li:last-child .locBtn { background:#004b9f; color:#fff; } .siteLocation .location .locationTab > li > button { min-width:auto; padding:0 5.5555%; font-size:1.2857rem; } .siteLocation .location .locationTab > li > button span { display:block; min-width:auto; padding:1.5714rem 0; } .siteLocation .location .locationTab > li > button span:after { content:''; position:absolute; right:.2857rem; top:50%; width:1rem; height:1rem; margin-top:-.7142rem; border-top:none; border-left:none; border-right:2px solid #fff; border-bottom:2px solid #fff; box-sizing:border-box; transform:rotate(45deg); transition:all .3s; } .siteLocation .location .locationTab > li > button.active span:after { margin-top:-.1428rem; transform:rotate(225deg); } .siteLocation .location .locationTab > li:last-child > button span:after { border-color:#fff; } .siteLocation .location .locationTab>li div { font-size:1.2857rem; box-sizing:border-box; } .siteLocation .location .locationTab>li div ul { padding:0.75em 0; border-left:none; border-right:none; } .siteLocation .location .locationTab>li div ul a { padding:0.1em 1.286em; } .pageTopWrap h3.pageTit { margin-bottom:1em; font-size:2.2857rem; } /* tabmenu */ .pageTopWrap { padding:0; } .tabNav { margin:0; padding:0; } .tabList { display:block; padding:0 1em; overflow-x:auto; } .tabNav .tabList ul { justify-content:flex-start; } .tabNav a { white-space:nowrap; } } @media only screen and (max-width:640px) { #container { margin-top:8.5714rem; } } /* content */ .readyArea { position:relative; max-width:780px; margin:0 auto; padding:.5em; } .readyArea::after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:url(../images/sub/icon_ready.png) left top no-repeat, url(../images/sub/icon_ready.png) right top no-repeat, url(../images/sub/icon_ready.png) left bottom no-repeat, url(../images/sub/icon_ready.png) right bottom no-repeat; background-size:1.0625em auto; } .readyArea .inner { padding:6.10169% 7.18644%; border:1px solid #ccccde; text-align:center; word-break:keep-all; } .readyArea .big { margin-bottom:.5em; padding:9em 0 .5em; background:url(../images/sub/bg_ready.png) center top no-repeat; background-size:auto 7.83333em; border-bottom:1px solid #e0ebf8; color:#26376d; font-size:2.25em; } .readyArea .small { color:#24315c; font-size:1.125em; } .readyArea .small p { margin-top:.75em; } /* default Content */ .content .pageTopInfo, .content .pageTxtInfo { max-width:1200px; margin:0 auto 2rem; padding:0 1.25rem; text-align:center; color:#000; word-break:keep-all; } .content .pageTopInfo .tit { margin-bottom:1rem; line-height:1.3636; font-size:var(--font-titD); font-weight:bold; letter-spacing:-.025em; } .content .pageTopInfo .txt { line-height:1.4444; font-size:var(--font-tabA); letter-spacing:-.025em; } .content .pageTopInfo .txt strong { color:#0061ce; font-weight:500; } .content .pageTxtInfo { line-height:1.5; font-size:var(--font-titC); font-weight:bold; letter-spacing:-.025em; } .content .pageTxtInfo strong { color:#0061ce; } .topFlexBox { display:flex; justify-content:space-between; gap:1em; margin-bottom:1em; padding:2%; border:1px solid #dcdcdc; } .topFlexBox .imgArea { flex-grow:0; flex-shrink:0; width:20%; } .topFlexBox .txtArea { flex:1; } .topFlexBox .txtArea .logo { height:5em; } .topFlexBox .txtArea .logo img { max-height:100%; } .topFlexBox .txtArea .copyright { text-align:right; } .pageTopBox { position:relative; padding:1.25em; background:#f8f9fd; border:.9375rem solid #dfe4f4; letter-spacing:-.025em; } .pageTopBox.topPosition { padding:0; } .pageTopBox::before { content:''; position:absolute; left:3.5rem; right:3.5rem; top:-.9375rem; bottom:-.9375rem; background:#f8f9fd; } .pageTopBox .boxInner { display:flex; position:relative; } .pageTopBox .topTit, .pageTopBox .imgArea { flex-grow:0; flex-shrink:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; width:24%; padding:.5em 3em; border-right:1px solid #dfe4f4; box-sizing:border-box; text-align:center; line-height:1.5; font-size:var(--font-titC); word-break:keep-all; } .noneBorder .imgArea { border-right:none; } .pageTopBox .imgArea { padding:.5em 1em; } .pageTopBox .imgArea .img { max-width:13rem; } .pageTopBox.topPosition .imgArea { position:relative; width:28%; padding:0; border:none; } .pageTopBox.topPosition p.img { position:absolute; left:5rem; bottom:-.9375rem; width:100%; margin:0; } .pageTopBox .buList, .pageTopBox .txtArea, .pageTopBox .titTxtArea { flex:1; margin:.3em 2.5%; line-height:1.4; font-size:var(--font-txtA); } .pageTopBox.topPosition .txtArea { margin:1.25rem 2rem; } .pageTopBox .buList li { padding-left:.75em; background:url("../images/sub/bu_li4.png") no-repeat left .375em / auto .5em; } .pageTopBox .buList li.BackgroundNone { padding-left:0; } .pageTopBox dl { margin:.5em 0; } .pageTopBox dt { margin:.75em 0 .5em; color:#0061ce; font-size:var(--font-titD); font-weight:bold; } .pageTopBox dt:first-child { margin-top:0; } .pageTopBox dd { margin-top:.75em; } .pageTopBox p.txt { margin:0; padding:0; font-size:var(--font-tabA); } .pageTopBox p.copyright { margin-top:1.25em; color:#848484; font-size:var(--font-txtB); } .pageTopBox strong { color:#044bbf; } .pageTopBox .titTxtArea dt span { display:block; font-size:var(--font-tabA); font-weight:400; } .pageTopBox .titTxtArea dd ul li { position:relative; margin-top:.5em; padding-left:.5em; line-height:1.3; font-size:var(--font-tabA); } .pageTopBox .titTxtArea dd ul li::before { content:''; position:absolute; left:0; top:.625em; width:.25rem; height:.125rem; background:#000; } .pageTopBox .titTxtArea dd .txt { margin-top:1em; } .pageTopTxtBox { background:#fafafa; border:1px solid #dcdcdc; } .pageTopTxtBox .innerBox { margin:3rem 3.5rem; } .pageTopTxtBox h4.tit { font-size:var(--font-titD); } .pageTopTxtBox strong { color:#0061ce; } .pageTopTxtBox .fileBox .boxList li { background:#fff; } .topLinkArea { display:flex; gap:2rem; } .topLinkArea .imgBox { flex-grow:0; flex-shrink:0; width:32.5%; } .topLinkArea .imgBox a { display:block; position:relative; } .topLinkArea .imgBox a::after { content:''; position:absolute; right:0; bottom:0; width:3.125em; height:3.125em; background:rgba(0,0,0,.5) url('../images/sub/icon_zoom.png') center no-repeat; } .topLinkArea .rightBox { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:2.375rem; } .topLinkArea .rightBox .pageTopBox { flex:1; display:flex; justify-content:center; align-items:center; } .topLinkArea .rightBox .lkLink { flex-grow:0; flex-shrink:0; display:flex; justify-content:space-around; gap:.9375rem; } .topLinkArea .rightBox .lkLink>li { flex:1; } .topLinkArea .rightBox .lkLink a { display:flex; justify-content:space-between; align-items:center; height:5.875em; padding:1.375em 1.5em; border-radius:.625rem; box-sizing:border-box; } .topLinkArea .rightBox .lkLink .kakao a { background:#f9e000; color:#371c1d; } .topLinkArea .rightBox .lkLink .blog a, .topLinkArea .rightBox .lkLink .naver a { background:#039b29; color:#fff; } .topLinkArea .rightBox .lkLink span { flex:1; font-size:var(--font-tabA); font-weight:500; } .topLinkArea .rightBox .lkLink i { flex-grow:0; flex-shrink:0; width:3.125rem; height:3.125rem; margin-right:.5rem; background:no-repeat center / contain; } .topLinkArea .rightBox .lkLink .kakao i { background-image:url(../images/sub/icon_kakao.png); } .topLinkArea .rightBox .lkLink .blog i { background-image:url(../images/sub/icon_blog.png); } .topLinkArea .rightBox .lkLink .naver i { background-image:url(../images/sub/icon_naver.png); } .defaultLayout, .privacyLayout { max-width:1200px; margin:0 auto; padding:0 1.25em; } .defaultLayout .tit { margin-top:1em; margin-bottom:.5em; color:#171717; font-size:var(--font-titA); font-weight:700; } .defaultLayout .buTit { margin-top:.5em; padding-left:1.125em; background:url(../images/sub/bu_con_tit.png) left .125em no-repeat; background-size:1rem auto; color:#171717; font-size:var(--font-titB); font-weight:500; } .defaultLayout p.img { margin:1em; text-align:center; } .defaultLayout .boxInner p.img { margin:0; } .defaultLayout .txt { margin:1em .5em; line-height:1.4444; font-size:var(--font-tabA); letter-spacing:-.025em; word-break:keep-all; } .defaultLayout .txtList { margin:1.25em 0 2.5em 1em; letter-spacing:-.025em; } .defaultLayout .txtList>li, .viewCaption caption, .liTit { margin-top:.25em; padding-bottom:.5em; padding-left:1em; background:url(../images/sub/bu_li1.png) left .625em no-repeat; background-size:.625em auto; line-height:1.4; color:#313b48; font-size:var(--font-txtA); } .defaultLayout .txtList>li>ul, .defaultLayout .txtList>li>ol { margin-top:.5em; margin-bottom:1em; } .defaultLayout .txtList>li>ul>li, .defaultLayout .txtList>li>ol>li { padding-left:1em; background:url(../images/sub/bu_li2.png) left .5em no-repeat; background-size:.625em auto; } .defaultLayout .txtList>li>ul>li>ul, .defaultLayout .txtList>li>ol>li>ol { margin-top:.5em; margin-bottom:1em; } .defaultLayout .txtList>li>ul>li>ul>li, .defaultLayout .txtList>li>ol>li>ol>li { padding-left:.5em; background:url(../images/sub/bu_li3.png) left .5em no-repeat; background-size:.25em auto; } .defaultLayout .txtList.rowLine>li { display:flex; justify-content:space-between; position:relative; max-width:30em; } .defaultLayout .txtList.rowLine>li::before { content:''; position:absolute; left:1.25em; right:0; top:.6em; height:1px; border-top:1px dashed #dbdbdb; } .defaultLayout .txtList.rowLine>li span { display:block; position:relative; background:#fff; z-index:2; } .defaultLayout .txtList.rowLine>li span.txt { padding-right:.5em; } .defaultLayout .txtList.rowLine>li span.date { width:8em; padding-left:.5em; } .defaultLayout .txtList.rowLine>li span.date i { font-style:normal; } .defaultLayout .txtList button { vertical-align:baseline; line-height:inherit; } .defaultLayout ol.countList, .defaultLayout ol.countRoundList { counter-reset:content-counter; } .defaultLayout ol.countList>li { position:relative; padding-left:1.25em; line-height:1.4; color:#313b48; font-size:var(--font-txtA); } .defaultLayout ol.countList>li::before { position:absolute; left:0; top:0; counter-increment:content-counter; content:counter(content-counter) '. '; } .defaultLayout .txtList ol.countRoundList>li { display:flex; background:none; padding-left:0; line-height:1.4; color:#313b48; font-size:var(--font-txtA); } .defaultLayout ol.countRoundList>li::before { counter-increment:content-counter; content:counter(content-counter); display:inline-flex; flex-grow:0; flex-shrink:0; justify-content:center; align-items:center; width:1.4em; height:1.4em; margin:.125em .25em 0 0 ; background:#0f5eae; border-radius:50%; color:#fff; font-size:.875em;} ol.countRoundList.grayColor>li::before { margin-top:.25em; background:none; border:1px solid; vertical-align:top; line-height:1; color:#000; font-size:.625em; } .liTit { margin-bottom:.25em; } .defaultLayout .txtBox { margin:-1em 1em 1em; padding:1em; border:1px solid #dcdcdc; } .defaultLayout .boxImgArea { margin-top:1em; border:1px solid #dcdcdc; } .defaultLayout .boxImgArea dt { padding:.5em; background:#0f5eae; text-align:center; color:#fff; } .defaultLayout .boxImgArea dd { padding:1em; text-align:center; } .defaultLayout .cellTableStyle { display:table; table-layout:fixed; width:100%; } .defaultLayout .cellTableStyle li { display:table-row; background:none; } .defaultLayout .cellTableStyle li span { display:table-cell; padding:.25em; } .defaultLayout .cellTableStyle li span.date { position:relative; width:5.5em; padding-left:1em; background:url(../images/sub/bu_li1.png) left .875em no-repeat; background-size:.625em auto; } .defaultLayout .cellTableStyle li span.date::after { content:':'; position:absolute; right:0; top:.125em; } .defaultLayout .imgList ul { display:flex; flex-wrap:wrap; gap:1em; } .defaultLayout .imgList li { display:inline-block; } .defaultLayout .imgList.col2 ul li { width:calc(50% - .75em); } .defaultLayout .txtList .imgList { margin:.5em 0 1em; } .defaultLayout .txtList .imgList ul { width:100%; flex-wrap:nowrap; } .defaultLayout .txtList .imgList li { background:none; margin:0; padding:0; } .defaultLayout .imgList li span { display:block; text-align:center; } .defaultLayout .imgList li img { object-fit:cover; max-width:100%; width:100%; height:100%; border-radius:.625em; } .defaultLayout .imgBoxList { display:flex; justify-content:space-between; gap:.675em; margin-top:1.25em; } .defaultLayout .imgBoxList dl { overflow:hidden; flex:1 1 auto; display:flex; flex-direction:column; border:1px solid #d4d4d9; border-radius:.625em; text-align:center; } .defaultLayout .imgBoxList dt { flex-grow:0; flex-shrink:0; padding:1.2em; background:#627ac7; line-height:1.3777; color:#fff; font-size:var(--font-tabA); font-weight:bold; } .defaultLayout .grayTit dt { background:#f0f0f0; color:#000; } .defaultLayout .imgBoxList dd { flex:1; display:flex; justify-content:center; align-items:center; padding:1.5em 1.25em; background:#fff; } .defaultLayout .imgBoxList.imgBoxList dt, .defaultLayout .imgBoxList.imgBoxList dd { padding:.5em; word-break:keep-all; } .defaultLayout .imgBoxList dd .imgRow { display:flex; justify-content:center; gap:1.375em; } .defaultLayout .imgBoxList dd .imgRow strong, .defaultLayout .imgBoxList dd .imgRow span { display:block; } .defaultLayout .imgBoxList dd .imgRow strong { margin-bottom:1em; padding:.5em; background:#ebebf6; border-radius:1.75em; text-align:center; line-height:1.35294; color:#353b50; font-size:var(--font-txtA); } .defaultLayout .imgBoxList.samWid { justify-content:space-around; } .defaultLayout .imgBoxList.samWid dl { flex:1; } .defaultLayout .imgBoxList.samWid dt { font-size:var(--font-txtA); font-weight:normal; } .defaultLayout .imgBoxList.tit2Line dt { min-height:2.6em; } .defaultLayout .imgBoxList .imgBorder img { border:1px solid #b1b0b0; } .defaultLayout .borderBoxArea { margin-top:.5em; padding:1.5em; background:#fff; border:1px solid #dcdcdc; border-radius:.625rem; font-size:var(--font-txtA); } .defaultLayout .borderBoxArea dt { font-weight:bold; } .defaultLayout .borderBoxArea dd { margin-top:.75rem; } .defaultLayout .borderBoxArea ul li { position:relative; padding-left:.75rem; } .defaultLayout .borderBoxArea ul li::before { content:''; position:absolute; left:0; top:.625rem; width:.37rem; height:.125em; background:#000; } .defaultLayout .borderBoxArea p.txt { margin:0; } .rowLineBox { display:flex; justify-content:space-around; gap:2.375rem; } .rowLineBox .item { flex:1; padding:0; border:1px solid #dcdcdc; } .rowLineBox .item h4 { margin:1.25rem 1.75rem; padding:.363636em 0 2.27272em; background:no-repeat 93% top / 9.75rem auto; color:#0061ce; font-size:var(--font-titD); font-weight:bold; } .rowLineBox .iconFood1 h4 { background-image:url('../images/sub/bg_food1.png'); } .rowLineBox .iconFood2 h4 { background-image:url('../images/sub/bg_food2.png'); } .rowLineBox .fileBox .boxList>li { border-width:0; border-top-width:1px;} .lkDown, .lkBox { margin-top:2em; text-align:center; } .lkDown a, .lkBox a { display:flex; justify-content:space-between; align-items:center; max-width:578px; margin:0 auto; padding:1.4em; border:1px solid; box-sizing:border-box; color:#1c86ad; font-size:1.25em; } .lkDown a i { display:inline-block; padding-right:2em; background:url(../images/sub/icon_down_blue.png) right center no-repeat; background-size:1.5625em auto; font-size:.8em; font-style:normal; } .lkBox a i { display:inline-block; position:relative; width:2em; height:2em; font-style:normal; } .lkBox a i::after { content:''; position:absolute; left:50%; top:50%; width:.75em; height:.75em; margin-top:-.375em; margin-left:-.375em; border-right:1px solid #1c86ad; border-bottom:1px solid #1c86ad; transform:rotate(-45deg); } .iconBoxList ul { display:flex; justify-content:space-around; gap:1.25em; letter-spacing:-.025em; } .iconBoxList ul li { flex:1; padding:1.75em; background:94% center / auto 4.375rem no-repeat; border:1px solid #dcdcdc; border-radius:.5em; } .iconBoxList ul li.icon1 { background-image:url(../images/sub/bg_sub01020301.png); } .iconBoxList ul li.icon2 { background-image:url(../images/sub/bg_sub01020302.png); } .iconBoxList ul li.icon3 { background-image:url(../images/sub/bg_sub01020303.png); } .iconBoxList ul li span { display:block; } .iconBoxList ul li span.rowTit { margin-bottom:.5em; padding-left:1.25em; background:url(../images/sub/icon_check.png) no-repeat left center / .954545em auto; color:#0061ce; font-size:var(--font-titD); font-weight:bold; } .iconBoxList ul li span.rowTxt { color:#232323; font-size:var(--font-tabA); } /* Ion.Zoom// css version 1.2.63// 짤 2013 Denis Ineshin | IonDen.com//// Project page: http://ionden.com/a/plugins/ion.zoom/// GitHub page: https://github.com/IonDen/ion.zoom//// Released under MIT licence:// http://ionden.com/a/licence.html// ===================================================================================================================*/ /* .ion-zoom-preloader {position:absolute;top:-9999px;left:-9999px;width:48px;height:48px;margin:-15px 0 0 -15px;border-radius:50%;background:#3FD97F;box-shadow:0 0 3px rgba(0, 0, 0, 0.3);cursor:pointer;z-index:998;} */ .ion-zoom-preloader {position:absolute;top:-9999px;left:-9999px;width:48px;height:48px;margin:-15px 0 0 -15px; display:grid; width:75px; aspect-ratio:1; z-index:998; } .ion-zoom-preloader::before, .ion-zoom-preloader::after { content:""; grid-area:1/1; width:35px; aspect-ratio:1; box-shadow:0 0 0 3px #fff inset; filter:drop-shadow(40px 40px 0 #fff); animation:l8 2s infinite alternate; } .ion-zoom-preloader:after { margin:0 0 0 auto; filter:drop-shadow(-40px 40px 0 #fff); animation-delay:-1s; } @keyframes l8 { 0%,10% {border-radius:0} 30%,40% {border-radius:50% 0} 60%,70% {border-radius:50%} 90%,100% {border-radius:0 50%} } .ion-zoom-image {position:absolute;display:block;top:-9999px;left:-9999px;background:#222;cursor:pointer;outline:none !important;z-index:1002;overflow:hidden;} .ion-zoom-image img {display:block !important;border:0 !important;padding:0 !important;z-index:1;max-width:none;} .ion-zoom-image.isOpen {box-shadow:0 0 10px rgba(0, 0, 0, 0.8);} .ion-zoom-image.noControls div {display:none !important;} .ion-zoom-close, .ion-zoom-prev, .ion-zoom-next {position:absolute;background:#000;background:rgba(0, 0, 0, 0.7); -webkit-transition:all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);-moz-transition:all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);-ms-transition:all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);-o-transition:all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);transition:all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);/* ease-in-out */-webkit-transition-timing-function:cubic-bezier(0.420, 0.000, 0.580, 1.000);-moz-transition-timing-function:cubic-bezier(0.420, 0.000, 0.580, 1.000);-ms-transition-timing-function:cubic-bezier(0.420, 0.000, 0.580, 1.000);-o-transition-timing-function:cubic-bezier(0.420, 0.000, 0.580, 1.000);transition-timing-function:cubic-bezier(0.420, 0.000, 0.580, 1.000);/* ease-in-out */} .ion-zoom-close {top:-30px;right:-30px;width:30px;height:30px;border-radius:0 0 0 5px;z-index:2;font:22px/30px Arial, Helvetica, sans-serif;color:#fff;text-shadow:none;text-align:center;} .ion-zoom-prev {top:50%;left:-30px;margin-top:-25px;width:30px;height:50px;overflow:hidden;border-radius:0 5px 5px 0;z-index:2;} .ion-zoom-prev div {position:absolute;top:15px;left:-3px;border:10px solid transparent;border-right-color:#fff;} .ion-zoom-next {top:50%;right:-30px;margin-top:-25px;width:30px;height:50px;overflow:hidden;border-radius:5px 0 0 5px;z-index:2;} .ion-zoom-next div {position:absolute;top:15px;left:13px;border:10px solid transparent;border-left-color:#fff;} .ion-zoom-image.isOpen .ion-zoom-close {top:0;right:0;} .ion-zoom-image.isOpen .ion-zoom-prev {left:0;} .ion-zoom-image.isOpen .ion-zoom-next {right:0;} .ion-zoom-image.posterView { padding:3em 1em 1em; background:#fff; } .ion-zoom-image.posterView .ion-zoom-close { background:none; color:#000; -webkit-transition:none; transition:none; } .ion-zoom-image.noControls .ion-zoom-close { left:50%; top:0; width:3rem; height:3rem; margin-left:-1.5em; border-radius:0; } .ion-zoom-image.noControls .ion-zoom-close div { display:block !important; font-size:3rem; } .ion-zoom-image.noControls .ion-zoom-prev, .ion-zoom-image.noControls .ion-zoom-next { display:none; } /* verticalSortList */ .verticalSortList>ol { counter-reset:content-counter; letter-spacing:-.025em; } .verticalSortList>ol>li { position:relative; margin-top:1.875rem; padding-left:4.875rem; } .verticalSortList>ol>li::before { counter-increment:content-counter; content:'0' counter(content-counter); display:flex; justify-content:center; align-items:center; position:absolute; background:#0061ce; left:0; top:0; width:3.75rem; height:100%; color:#fff; font-size:var(--font-tabA); font-weight:700; } .verticalSortList>ol>li::after { content:''; position:absolute; left:3.75rem; top:50%; margin-top:-.375rem; border-top:.375rem solid transparent; border-bottom:.375rem solid transparent; border-left:.5rem solid #0061ce; } .verticalSortList>ol>li>ol { display:table; width:100%; border-collapse:collapse; table-layout:fixed; } .verticalSortList>ol>li>ol>li { display:table-row; } .verticalSortList>ol>li>ol>li>div { display:table-cell; padding:1em; border:1px solid #dcdcdc; vertical-align:middle; font-size:var(--font-tabA); word-break:keep-all; } .verticalSortList>ol>li div.rowTit { width:12em; padding:2em 1em; background:#f7f7f9; text-align:center; } /* 목적 그래프 */ .graphStyle1 { word-break:keep-all; } .graphStyle1>ol>li.top { padding-bottom:1.3125rem;} .graphStyle1>ol>li.mid { position:relative; padding:2.625rem 3.5rem 0; background:url(../images/sub/arrow_down.png) no-repeat center top / auto 1.625rem; } .graphStyle1>ol>li.mid::before { content:''; position:absolute; left:0; top:70%; width:100%; height:30%; background:#c9d9eb; border-top-left-radius:.75rem; border-top-right-radius:.75rem; } .graphStyle1 .areaType { position:relative; padding:1.625rem 0; font-weight:bold; } .graphStyle1 .areaType dt { display:flex; justify-content:center; align-items:center; position:absolute; left:50%; top:50%; width:5.66666em; height:5.66666em; margin:-2.83333em 0 0 -2.83333em; background:#004b9f; outline:.5em solid rgba(65, 139, 223, .56); border-radius:50%; color:#fff; font-size:var(--font-titB); } .graphStyle1 .areaType dd ul { display:flex; justify-content:space-around; gap:.875rem; } .graphStyle1 .areaType dd ul li { flex:1; display:flex; justify-content:center; align-items:center; padding:1.5em; background:#fff; border:1px solid #418bdf; border-radius:3.125rem; text-align:center; line-height:1.2; color:#004b9f; font-size:var(--font-titC); letter-spacing:-.025em; } .graphStyle1 .areaType dd .pcNone { display:none; } .graphStyle1 .boxList { position:relative; } .graphStyle1 .boxList ul { display:flex; justify-content:space-around; gap:1em; } .graphStyle1 .boxList ul li { flex:1; display:flex; justify-content:center; align-items:center; padding:6px; background:#fff; border:2px solid #81aad7; border-radius:1em; font-size:var(--font-tabA); } .graphStyle1 .boxList ul li>div { display:flex; width:100%; height:100%; padding:6%5%; justify-content:center; align-items:center; border:2px dotted #8abbf1; box-sizing:border-box; border-radius:.66666em; text-align:center; word-break:keep-all; } .graphStyle1 .boxType { overflow:hidden; background:#c9d9eb; border-bottom-left-radius:.75rem; border-bottom-right-radius:.75rem; } .graphStyle1 .boxType dt { margin:2rem; text-align:center; color:#0e325a; font-size:var(--font-titD); font-weight:bold; } .graphStyle1 .boxType dd ul { display:flex; justify-content:space-around; padding:0 3.5rem 2rem; } .graphStyle1 .boxType dd ul>li { flex:1; display:flex; justify-content:center; align-items:center; padding:1.25rem 2rem; border-radius:10em; text-align:center; color:#fff; font-size:var(--font-tabA); font-weight:500; word-break:keep-all; } .graphStyle1 .boxType dd ul>li.left { margin-right:-.625rem; background:rgba(18, 107, 108, .73); } .graphStyle1 .boxType dd ul>li.right { margin-left:-.625rem; background:rgba(40, 43, 195, .73); } /* privacyLayout */ .label_wrap>ul { display:flex; flex-wrap:wrap; justify-content:space-around; position:relative; width:100%; margin-bottom:1em; gap:1em; } .label_wrap>ul>li { flex:1; } .label_wrap .item { position:relative; width:100%; height:100%; } .label_wrap .item button { display:flex; flex-flow:column; justify-content:center; align-items:center; position:relative; width:100%; height:12em; background-color:#fff; border:1px solid #fff; border-radius:.625em; box-sizing:border-box; box-shadow:0 0.2rem 0.8rem rgba(22,71,170,0.2); cursor:pointer; } .label_wrap .item button span.img { line-height:6em; } .label_wrap .item button:hover, .label_wrap .item button:focus { transition:0.2s; border:1px solid #1647aa; } .label_wrap .item .itemContent { display:none; position:absolute; top:0; width:calc(200% + 1em); min-width:15em; min-height:100%; box-sizing:border-box; border-radius:.625rem; background-color:#fff; border:1px solid #eee; z-index:999; } .label_wrap>ul>li:nth-child(1) .itemContent { left:calc(100% + 1em); } .label_wrap>ul>li:nth-child(2) .itemContent { left:calc(100% + 1em); } .label_wrap>ul>li:nth-child(3) .itemContent { right:calc(100% + 1em); } .label_wrap>ul>li:nth-child(4) .itemContent { right:calc(100% + 1em); } .label_wrap .item:hover > .itemContent, .label_wrap .item button:focus ~ .itemContent { display:block; } .itemContent .label_desc_top { width:100%; box-sizing:border-box; padding:.625rem; background-color:#1647aa; border-top-right-radius:.625rem; border-top-left-radius:.625rem; } .itemContent .label_desc_top p { color:#fff; } .itemContent .label_desc_btm { width:100%; box-sizing:border-box; padding:1rem 1.25rem; } .desc_box { display:flex; flex-flow:row wrap; justify-content:space-between; width:100%; margin-top:.625rem; padding:.625rem 1rem; border-radius:.625rem; border:1px solid #eee; box-sizing:border-box; } .desc_tit { font-weight:400; color:#1647aa; word-break:keep-all; } .desc_cnt { color:#333; font-size:var(--font-txtC); } .privacyLayout .boxList { margin-top:1.25em; padding:1.25rem; border:1px solid #d9d9d9; } .privacyLayout .boxList ul { display:flex; flex-wrap:wrap; justify-content:space-around; gap:1.25em; } .privacyLayout .boxList li { flex:1 1 calc(50% - 1.25em); position:relative; } .privacyLayout .boxList li a { display:block; min-height:1.5625rem; padding-left:1.875rem; background:no-repeat left top; box-sizing:border-box; color:#444; } .privacyLayout .boxList li:first-child a, .privacyLayout .boxList li.articleIcon01 a { background-image:url(../images/sub/img_object_20.png); } .privacyLayout .boxList li:nth-child(2) a, .privacyLayout .boxList li.articleIcon02 a { background-image:url(../images/sub/img_period_20.png); } .privacyLayout .boxList li:nth-child(3) a, .privacyLayout .boxList li.articleIcon03 a { background-image:url(../images/sub/img_court_20.png); } .privacyLayout .boxList li:nth-child(4) a, .privacyLayout .boxList li.articleIcon04 a { background-image:url(../images/sub/img_private_20.png); } .privacyLayout .boxList li:nth-child(5) a, .privacyLayout .boxList li.articleIcon05 a { background-image:url(../images/sub/img_contract_20.png); } .privacyLayout .boxList li:nth-child(6) a, .privacyLayout .boxList li.articleIcon06 a { background-image:url(../images/sub/img_destruction_20.png); } .privacyLayout .boxList li:nth-child(7) a, .privacyLayout .boxList li.articleIcon07 a { background-image:url(../images/sub/img_safe_20.png); } .privacyLayout .boxList li:nth-child(8) a, .privacyLayout .boxList li.articleIcon08 a { background-image:url(../images/sub/img_cookie_20.png); } .privacyLayout .boxList li:nth-child(9) a, .privacyLayout .boxList li.articleIcon09 a { background-image:url(../images/sub/img_cpo_20.png); } .privacyLayout .boxList li:nth-child(10) a, .privacyLayout .boxList li.articleIcon10 a { background-image:url(../images/sub/img_browse_20.png); } .privacyLayout .boxList li:nth-child(11) a, .privacyLayout .boxList li.articleIcon11 a { background-image:url(../images/sub/img_help_20.png); } .privacyLayout .boxList li:nth-child(12) a, .privacyLayout .boxList li.articleIcon12 a { background-image:url(../images/sub/img_browse_20.png); } .privacyLayout .boxList li:nth-child(13) a, .privacyLayout .boxList li.articleIcon13 a { background-image:url(../images/sub/img_help_20.png); } .privacyLayout .boxList li:last-child a, .privacyLayout .boxList li.articleIcon14 a { background-image:url(../images/sub/img_change_20.png); } /* 개인정보처리방침 콘텐츠 내용 */ .privacyLayout .tit { margin-top:2em; margin-bottom:.5em; text-align:center; color:#171717; font-size:var(--font-titA); font-weight:700; } .privacyLayout h5.buTit { margin:2rem 0 1rem; font-size:var(--font-titB); font-weight:600; color:#171717; box-sizing:border-box; vertical-align:middle; } .privacyLayout h5.buTit span { display:inline-block; margin-right:.5rem; vertical-align:top; } .privacyLayout h5.buTit img { vertical-align:top; } .privacyLayout>ol { margin-left:1em; } .privacyLayout ol li { margin-top:.5em; } .privacyLayout>ol>li { padding-left:1.25em; text-indent:-1.25em; word-break:keep-all; } .privacyLayout>ol>li.point { padding-left:1.25em; text-indent:0; } .privacyLayout>ol>li * { text-indent:0; } .privacyLayout>ol>li b { white-space:nowrap; color:#333; } .privacyLayout>ol>li h6, .privacyLayout>ol>li .buTit { margin:1em 0 .5em 0; font-weight:500; } .privacyLayout>ol>li .buTit { position:relative; padding-left:1.25em; } .privacyLayout>ol>li .buTit::before { content:'▶'; position:absolute; left:0; top:0; } .privacyLayout>ol>li p.point { margin:.5em 0 0 1.25em; padding-left:1.25em; } .privacyLayout>ol>li ul>li { position:relative; padding-left:.75em; } .privacyLayout>ol>li ul>li::before { content:'-'; position:absolute; left:0; top:0; } .privacyLayout dl { text-align:left; } .privacyLayout dl dt { font-weight:500; } .privacyLayout dl dd li { margin-top:0; } .privacyLayout .tableStyle { width:100%; } /* accordionList */ .accordionList, .accordionStyleList { max-width:1200px; margin:3em auto; border-top:1px solid #d7d7d7; } .accordionList .accordionTit, .accordionStyleList .accordionTit { border-bottom:1px solid #d7d7d7; } .accordionStyleList .accordionTit { border-top:1px solid #2944b4; } .accordionList .panel, .accordionStyleList .panel { overflow:hidden; background:#fbfbfc; border-bottom:1px solid #2944b4; } .accordionStyleList .panel { margin-bottom:-1px;} .accordionList .panel { display:none; } .accordionList .panelInner, .accordionStyleList .panelInner { margin:3.5%;} .accordionList .accordionTit.active { border-bottom-color:#2944b4; } .accordionList .accordionTit button, .accordionStyleList .accordionTit span { display:flex; width:100%; height:3.77777em; padding:0 1.55555em; justify-content:space-between; align-items:center; box-sizing:border-box; text-align:left; color:#171717; font-size:var(--font-tabA); font-weight:500; } .accordionList .accordionTit.active button { color:#044bbf; font-weight:700; } .accordionList .accordionTit button i.openIcon { display:block; overflow:hidden; flex-grow:0; flex-shrink:0; position:relative; width:1em; height:1em; color:transparent; } .accordionTit button i.openIcon::before, .accordionTit button i.openIcon::after { content:''; position:absolute; background:#000; transition:all .4s ease; } .accordionTit button i.openIcon::before { left:0; top:50%; width:100%; height:.125rem; margin-top:-.0625rem; } .accordionTit button i.openIcon::after { left:50%; top:0; width:.125rem; height:100%; margin-left:-.0625rem; } .accordionList .accordionTit.active i.openIcon::after { transform:rotate(270deg); } .accordionList .panel h5.tit { font-size:var(--font-tabA); } .accordionList .panel h6.buTit { margin-bottom:.5em; font-size:var(--font-titC); background-size:auto 1em; } .accordionList .panel .boxGrid { display:grid; grid-template-columns:1fr 1fr; gap:2.625rem; margin-bottom:2em; } .accordionList .panel .boxGrid.col3 { grid-template-columns:1fr 1fr 1fr; } .accordionList .panel .boxGrid.rowLine { grid-template-columns:1fr; } .accordionList .panelInner>.img { text-align:center; margin-bottom:1.5em;} .accordionList .countList.boxGrid { gap:.125rem 1.5rem; grid-auto-flow:column; grid-template-rows:repeat(5, auto); } .accordionList .boxGrid .doubleBox { grid-row:auto / span 2; } .accordionList .boxGrid .item h5, .accordionList .boxGrid p.boxTxt { margin-bottom:1.75rem; padding:1em; background:#e2f0ff; border:1px solid #94bbe6; border-top-left-radius:.5em; border-top-right-radius:.5em; text-align:center; line-height:1.33333; color:#004b9f; font-size:var(--font-tabA); word-break:keep-all; box-sizing:border-box; } .accordionList .panel .boxGrid.rowLine p.boxTxt { width:calc(50% - 1.3125rem); } .accordionList .boxGrid .txtList, .defaultLayout ol.countList { margin:0 .625rem; } .accordionList .txt { font-size:var(--font-txtA); } .accordionList .boxGridType2 .item { overflow:hidden; background:#fff; border:1px solid #dcdcdc; border-radius:.5em; } .accordionList .boxGridType2 .item h5 { margin:0; background:#f0f0f0; border:none; border-bottom:1px solid #dcdcdc; border-radius:0; color:#000000; } .accordionList .boxGridType2 .txtArea { margin:1em 2em; } .accordionList .boxGridType2 .tableBox { display:table; table-layout:fixed; width:100%; } .accordionList .boxGridType2 .tableBox dl { display:table-row; } .accordionList .boxGridType2 .tableBox dt, .accordionList .boxGridType2 .tableBox dd { display:table-cell; padding:.375em .25em; font-size:var(--font-tabA); } .accordionList .boxGridType2 .tableBox dt { width:5em; color:#044bbf; font-weight:700; } .accordionList .boxGridType2 .tableBox dd .txtList { margin:0; } .accordionList .imgRightBox { position:relative; padding-right:10.625rem; } .accordionList .imgRightBox .img { position:absolute; right:0; top:0; width:10.625rem; } .accordionList .titArea { position:relative; } .accordionList .btnResult { position:absolute; top:-.6875em; right:0; } .accordionList .btnResult button { display:flex; align-items:center; padding:.625em 1.25em; color:#171717; font-weight:500; background:#e2f0ff; border:1px solid #accaeb; border-radius:.25em; box-sizing:border-box; } .accordionList .btnResult i { display:block; width:1.0625rem; height:1.0625rem; margin-top:.125em; margin-right:.375em; background:url(../images/sub/icon_file_result.png) center top no-repeat; background-size:auto 100%; } .accordionList .btnResult button:focus, .accordionList .btnResult button:hover { background:#0061ce; color:#fff; outline:2px dashed #000; } .accordionList .btnResult button:focus i, .accordionList .btnResult button:hover i { background-image:url(../images/sub/icon_file_result_on.png); } /* 상단 알림 박스 */ .rowBox, .rowCheckBox { display:flex; overflow:hidden; border:1px solid #dcdcdc; border-radius:.625rem; } .rowBox .infoTit, .rowCheckBox .checkTit { display:flex; justify-content:center; align-items:center; flex-grow:0; flex-shrink:0; width:20%; box-sizing:border-box; } .rowBox .infoTit { padding:2% 5%; border-right:1px solid #dcdcdc; } .rowCheckBox .checkTit { padding:2%; background:#2c9e8e; } .rowBox .infoTit span, .rowCheckBox .checkTit span { display:block; padding-top:2em; background:center top no-repeat; text-align:center; font-size:var(--font-tabA); font-weight:bold; word-break:keep-all; } .rowBox .infoTit span { background-image:url(../images/sub/icon_info.png); color:#034abe; } .rowCheckBox .checkTit span { background-image:url(../images/sub/icon_tit_check.png); color:#fff; } .rowBox .infoTxt, .rowCheckBox .checkTxt { flex:1; margin:0; padding:1.75rem; } /* 손씻기 스타일 */ .flexSortLine {padding:3em; background:#fff; border:1px solid #dcdcdc; border-radius:.625rem; } .flexSortLine ol { overflow:hidden; display:grid; justify-content:center; grid-template-columns:1fr 1fr 1fr; gap:2rem 3rem; } .flexSortLine ol li { position:relative; text-align:center; } .flexSortLine ol li::before { content:''; position:absolute; left:-3em; top:0; width:3em; height:100%; background:url(../images/sub/arrow_sort2.png) no-repeat center 30% / auto 1.4375rem; } /* 단계별 순서 스타일 */ .sortBoxList>ol { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2.5rem; } .sortBoxList.col2>ol { grid-template-columns:1fr 1fr; } .sortBoxList>ol>li { position:relative; } .sortBoxList>ol>li::before { content:''; position:absolute; left:-2.5rem; top:0; width:2.5rem; height:100%; background:url(../images/sub/arrow_sort.png) no-repeat 50% 1.5rem / auto 1.125rem; } .sortBoxList>ol>li:first-child::before, .sortBoxList>ol>li.beforeNone::before { display:none; } .sortBoxList>ol>li.spanRow { grid-row:1 / span 2;} .sortBoxList .item { overflow:hidden; display:flex; flex-direction:column; height:100%; border:1px solid #dcdcdc; border-radius:.625em; } .sortBoxList .item h5 { flex-grow:0; flex-shrink:0; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:3.33333em; padding:.25em; background:#767676; text-align:center; color:#fff; font-size:var(--font-tabA); } .sortBoxList .sortLine1 h5 { background:#637ac8; } .sortBoxList .sortLine2 h5 { background:#445aa3; } .sortBoxList .sortLine3 h5 { background:#3a4e8b; } .sortBoxList .txtArea { flex:1; margin:0; padding:1.5em; background:#fff; } .sortBoxList .flexBox { display:flex; justify-content:center; align-items:center; } .sortBoxList .txtArea dt { font-size:var(--font-tabA); font-weight:bold; } .sortBoxList .txtArea .txtList { margin:0; } .sortBoxList.flexLine>ol { display:flex; justify-content:space-between; } .sortBoxList.flexLine>ol>li { flex:auto; text-align:center; } .sortBoxList.flexLine>ol>li.otherItemStyle { margin-left:-2.5rem; } .sortBoxList.flexLine>ol>li.otherItemStyle::before { display:none; } .sortBoxList.flexLine>ol>li::before { background-position:center 2.5rem; } .sortBoxList.flexLine ul.columnList { display:flex; flex-direction:column; position:relative; } .sortBoxList.flexLine ul.columnList::before { content:''; position:absolute; left:1rem; top:0; width:1px; height:100%; background:#637ac8; } .sortBoxList.flexLine ul.columnList>li { position:relative; } .sortBoxList.flexLine ul.columnList>li:first-child::before, .sortBoxList.flexLine ul.columnList>li:last-child::before { content:''; position:absolute; left:1rem; width:1px; height:50%; background:#fff; } .sortBoxList.flexLine ul.columnList>li:first-child::before { top:0; } .sortBoxList.flexLine ul.columnList>li:last-child::before { bottom:0; } .sortBoxList.flexLine ul.columnList>li>dl { display:flex; position:relative; align-items:center; padding-left:1rem; } .sortBoxList.flexLine ul.columnList>li>dl::before { content:''; position:absolute; left:1rem; right:0; top:50%; height:1px; background:#637ac8; } .sortBoxList.flexLine ul.columnList>li:first-child>dl::before { left:0; } .sortBoxList.flexLine ul.columnList>li>dl>dt { position:relative; flex-grow:0; flex-shrink:0; width:9em; padding:0 1em; } .sortBoxList.flexLine ul.columnList>li>dl>dt span { display:block; padding:.5em .25em; background:#fff; border:1px solid #637ac8; border-radius:.625rem; font-size:var(--font-txtA); } .sortBoxList.flexLine ul.columnList>li>dl>dd { position:relative; flex:1; } .sortBoxList.flexLine ul.columnList>li.afterArrow>dl>dd { padding-top:2.5rem; } .sortBoxList.flexLine ul.columnList>li.afterArrow>dl>dd::after { content:''; position:absolute; left:0; top:0; width:100%; height:2.5rem; background:url(../images/sub/arrow_sort.png) no-repeat 50% / auto 1.125rem; transform:rotate(-90deg); } .sortBoxList.flexLine .item { height:auto; } .sortBoxList.flexLine .item h5 { min-height:3rem; padding:.25em; box-sizing:border-box; } .sortBoxList.flexLine .txtArea { padding:0; } .sortBoxList.flexLine .txtArea p.txt { margin:.625em; } .sortBoxList.flexLine .txtArea span { display:inline-block; } .sortBoxList.flexLine .txtArea i.arrow { overflow:hidden; position:relative; width:1em; height:1.25em; color:transparent; } .sortBoxList.flexLine .txtArea i.arrow::after { content:''; position:absolute; left:50%; top:50%; width:.625rem; height:.625rem; margin:-.25rem 0 0 -.5rem; border-top:.125rem solid #848484; border-right:.125rem solid #848484; box-sizing:border-box; transform:rotate(45deg); } /* 계란 선별 포장 유통 */ .imgSortList { display:flex; justify-content:space-around; max-width:1150px; margin:0 auto; text-align:center; letter-spacing:-.025em; } .imgSortList>li { flex:1; margin-left:-1px; border:1px solid #dcdcdc; box-sizing:border-box; } .imgSortList>li:first-child { margin-left:0; } .imgSortList .imgArea { position:relative; width:100%; padding-top:57.20524%; border-bottom:1px solid #dcdcdc; } .imgSortList .imgArea img { position:absolute; left:0; top:0; object-fit:cover; width:100%; height:100%; } .imgSortList .txtArea { position:relative; } .imgSortList .txtArea::before, .imgSortList .txtArea::after { content:''; position:absolute; left:0; top:1.75rem; box-sizing:border-box; } .imgSortList .txtArea::before { width:1.875rem; height:1.875rem; margin:-.9375rem 0 0 -.9375rem; background:#fff; border:1px solid #d4d4d9; border-radius:50%; } .imgSortList .txtArea::after { width:.5rem; height:.5rem; margin:-.25rem 0 0 -.33333rem; border-top:.125rem solid #4f81d2; border-right:.125rem solid #4f81d2; transform:rotate(45deg); } .imgSortList>li:first-child .txtArea::before, .imgSortList>li:first-child .txtArea::after { display:none; } .imgSortList .txtArea { padding:1em .5em; } .imgSortList .txtArea dt { padding:0 1em; color:#044bbf; font-size:var(--font-tabA); font-weight:bold; } .imgSortList .txtArea dd { margin-top:.5em; line-height:1.25; color:#232323; } .eggBox { overflow:hidden; position:relative; max-width:1140px; margin:0 auto; background:#fff; border:1px solid #dcdcdc; border-radius:.625rem; letter-spacing:-.025em; } .eggBox h5 { padding:1.75rem; background:#627ac7; } .eggBox h5 span { display:inline-block; padding-left:1.4em; background:url(../images/sub/bu_check.png) no-repeat 0 center / 1em auto; line-height:1.2; color:#fff; font-size:var(--font-tabA); } .eggBox dl { padding:1rem 1.875rem; font-size:var(--font-tabA); } .eggBox dl dt { font-weight:bold; } .eggBox dl dd { margin:.5em 0 0 1.25em; font-size:var(--font-txtA); font-weight:500; } .eggBox>ol { position:relative; padding:1.875rem; border-top:1px solid #dcdcdc; font-size:var(--font-tabA); font-weight:bold; } .eggBox>ol>li { position:relative; margin-top:1.125rem; padding-right:17%; z-index:2; } .eggBox>ol>li:first-child { margin-top:0; } .eggBox>ol>li { padding-left:1.125em; text-indent:-1.125em; } .eggBox>ol>li::before { text-indent:0; } .eggBox>ol>li * { margin-top:.25em; text-indent:0; } .eggBox>ol>li li { position:relative; padding-left:.75em; } .eggBox>ol>li li::before { content:'-'; position:absolute; left:0; top:0; font-weight:bold; } .eggBox ol .point { padding-left:.75em; color:#848484; font-size:var(--font-txtB); font-weight:400; } .eggBox ol .point::before { content:'*'; } .eggBox>ol::after { content:''; position:absolute; right:1.875rem; bottom:1.875rem; width:17.80701%; padding-top:17.4561%; background:url(../images/sub/icon_egg.png) no-repeat center / contain; } /* 당류 섭취 줄이기 */ .Y24O17-box1 *{font-family: 'S-Core-Dream';} .Y24O17-box1 img{vertical-align: top;} .Y24O17-box1{color: #fff;font-size: 18px;padding: 50px 60px 35px;background: #d77216;} .Y24O17-box1 .text-01{position: relative;padding: 0 200px 50px 0;} .Y24O17-box1 .text-01::after{position: absolute;right: 0;bottom: -8px;width: 253px;min-height: 324px;height: 100%;background: url('../images/sub/Y24O17_box1_bg1.png') no-repeat right bottom;background-size: 100%;content:"";} .Y24O17-box1 .text-01 li{color: #fff;font-size: 18px;line-height: 1.2;word-break: keep-all;} .Y24O17-box1 .text-01 li strong{font-weight: 600;} .Y24O17-box1 .text-01 .li01{display: table;padding: 0 4px;background: #724c2a;color: #ffdf2f;font-size: 34px;font-weight: bold;} .Y24O17-box1 .text-01 .li02{margin: 24px 0 16px;font-weight: 600;} .Y24O17-box1 .text-01 .li03{margin: -10px 0 0 -10px;display: flex;flex-wrap: wrap;align-items: center;} .Y24O17-box1 .text-01 .li03 > *{margin: 10px 0 0 10px;} .Y24O17-box1 .text-01 .li03 span{background: #fff;color: #d17725;font-weight: 600;line-height: 18px;padding: 8px 15px;border-radius: 25px;} .Y24O17-box1 .text-01 .li03 strong{font-size: 19px;} .Y24O17-box1 .text-01 .li03 span + p{margin-left: 20px;} .Y24O17-box1 .text-01 .li04{margin-top: 25px;font-size: 24px;line-height: 1.5;} .Y24O17-box1 .text-01 .li04 span{display: inline-block;background: #a47244;font-weight: 600;line-height: 30px;padding: 0 5px;} .Y24O17-box1 .white-box{margin-bottom: 22px;padding: 30px;background: #fff;border-radius: 8px;} .Y24O17-box1 .stat1-title1{margin-bottom: 30px;color: #333;font-size: 20px;display: flex;justify-content: space-between;align-items: center;} .Y24O17-box1 .stat1-title1 p{font-weight: 600;line-height: 1.35;} .Y24O17-box1 .stat1-title1 span{display: inline-block;font-weight: 400;} .Y24O17-box1 .stat1-title1 .ft-16{font-size: 16px;} .Y24O17-box1 .stat1-title1 ul{overflow: hidden;} .Y24O17-box1 .stat1-title1 ul > li{margin-left: 15px;float: left;color: #333;font-size: 16px;line-height: 18px;padding-left: 14px;position: relative;} .Y24O17-box1 .stat1-title1 ul > li::before{position: absolute;top: 5px;left: 0;width: 8px;height: 8px;content:"";} .Y24O17-box1 .stat1-title1 ul > li.bg1::before{ background:url(../images/sub/bg_bar1.png); } .Y24O17-box1 .stat1-title1 ul > li.bg2::before{ background:url(../images/sub/bg_bar2.png); } .Y24O17-box1 .stat1-list1{margin: -18px -3px 0;display: flex;flex-wrap: wrap;align-items: end;justify-content: center;} .Y24O17-box1 .stat1-list1 > dl{width: calc(12.5% - 6px);min-width: 70px;margin:18px 3px 0;padding-bottom: 30px;position: relative;text-align: center;} .Y24O17-box1 .stat1-list1 > dl dt { display:flex; justify-content:center; align-items:flex-end; } .Y24O17-box1 .stat1-list1 > dl dt .lBox { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:200px; margin-top:-80px; } .Y24O17-box1 .stat1-list1 > dl dt .count { color:#333; font-size:.875em; letter-spacing:-.05em; } .Y24O17-box1 .stat1-list1 > dl dt .bar { width:100%; min-width:2em; } .Y24O17-box1 .stat1-list1 > dl dt .korea .bar { background:url(../images/sub/bg_bar1.png); } .Y24O17-box1 .stat1-list1 > dl dt .seoul .bar { background:url(../images/sub/bg_bar2.png); } .Y24O17-box1 .stat1-list1 > dl > dd{position: absolute;left: 0;bottom: 0;width: 100%;color: #333;font-size: 16px;letter-spacing: -0.5px;line-height: 20px;text-align: center;} @media screen and (max-width: 900px){ .Y24O17-box1{padding: 35px 30px 30px;} .Y24O17-box1 .text-01{padding: 0 60px 50px 0;} .Y24O17-box1 .text-01::after{right: -20px;width: 178px;min-height: auto;} .Y24O17-box1 .text-01 .li01{font-size: 32px;} .Y24O17-box1 .text-01 .li02{margin: 20px 0 14px;} .Y24O17-box1 .text-01 .li03 span{padding: 6px 12px;} .Y24O17-box1 .text-01 .li03 span + p{margin-left: 15px;} .Y24O17-box1 .text-01 .li04{margin-top: 22px;font-size: 22px;} .Y24O17-box1 .white-box{margin-bottom: 20px;padding: 25px 20px;} .Y24O17-box1 .stat1-title1{display: block;margin-bottom: 22px;font-size: 18px;overflow: hidden;} .Y24O17-box1 .stat1-title1 > p{float: left;} .Y24O17-box1 .stat1-title1 > ul{float: right;margin-top: 6px;} .Y24O17-box1 .stat1-list1 > dl > dd{font-size: 15px;} .accordionList .btnResult { top:-.5625em; } .accordionList .btnResult button { padding:.5em 1em; } } @media screen and (max-width: 768px){ .Y24O17-box1 .stat1-list1 > dl{width: calc(25% - 6px);} } @media screen and (max-width: 580px){ .Y24O17-box1{font-size: 16px;padding: 20px 18px;} .Y24O17-box1 .text-01{padding: 0 0 40px 0;} .Y24O17-box1 .text-01::after{width: 130px;} .Y24O17-box1 .text-01 li{font-size: 16px;} .Y24O17-box1 .text-01 .li01{font-size: 28px;} .Y24O17-box1 .text-01 .li02{margin: 15px 0 10px;} .Y24O17-box1 .text-01 .li03 span + p{margin-left: 10px;} .Y24O17-box1 .text-01 .li03 strong{font-size: 17px;} .Y24O17-box1 .text-01 .li04{margin-top: 15px;font-size: 18px;padding-right: 40px;} .Y24O17-box1 .text-01 .li04 span{line-height: 24px;} } @media screen and (max-width: 425px){ .Y24O17-box1 .text-01{padding-bottom: 25px;} .Y24O17-box1 .text-01::after{width: 90px;} .Y24O17-box1 .text-01 .li01{font-size: 24px;} .Y24O17-box1 .text-01 .li04{font-size: 17px;padding-right: 22px;} .Y24O17-box1 .stat1-list1 > dl{width: calc(50% - 6px);} } /* custom */ .sortBoxListType2.blockList { margin:.5em 0 1em .5em; } .txtList .sortBoxListType2.blockList { margin-left:0; } .sortBoxListType2>ol { display:flex; justify-content:space-around; text-align:center; letter-spacing:-.025em; } .sortBoxListType2.blockList>ol { flex-direction:column; } .sortBoxListType2>ol.rowLine { margin:.5em 0 1em;} .sortBoxListType2>ol>li { flex:1; position:relative; padding:1.875rem 1.5rem; background:#fff; border:1px solid #d4d4d9; margin-left:-1px; } .sortBoxListType2.blockList>ol>li { margin-top:-1px; margin-left:0; } .sortBoxListType2.blockList>ol>li:first-child { padding-top:1.5rem; } .sortBoxListType2.blockList>ol>li:last-child { padding-bottom:1.5rem; } .sortBoxListType2>ol.rowLine>li { padding:.5rem 1.5rem; } .sortBoxListType2>ol>li::before, .sortBoxListType2>ol>li::after { content:''; position:absolute; left:0; top:50%; box-sizing:border-box; } .sortBoxListType2>ol>li::before { width:2.375rem; height:2.375rem; margin:-1.1875rem 0 0 -1.1875rem; background:#fff; border:1px solid #d4d4d9; border-radius:50%; } .sortBoxListType2>ol>li::after { width:.75rem; height:.75rem; margin:-.375rem 0 0 -.5rem; border-top:.125rem solid #000; border-right:.125rem solid #000; transform:rotate(45deg); } .sortBoxListType2.blockList>ol>li::before, .sortBoxListType2.blockList>ol>li::after { left:50%; top:0; } .sortBoxListType2.blockList>ol>li::before, .sortBoxListType2>ol.rowLine>li::before { width:1.875rem; height:1.875rem; margin:-.9375rem 0 0 -.9375rem; } .sortBoxListType2.blockList>ol>li::after, .sortBoxListType2>ol.rowLine>li::after { width:.5rem; height:.5rem; margin:-.25rem 0 0 -.33333rem; } .sortBoxListType2.blockList>ol>li::after { margin:-.33333rem 0 0 -.25rem; transform:rotate(135deg); } .sortBoxListType2>ol>li:first-child { margin-left:0; } .sortBoxListType2>ol>li:first-child::before, .sortBoxListType2>ol>li:first-child::after { display:none; } .sortBoxListType2>ol>li>.boxTxt { display:flex; justify-content:center; align-items:center; width:100%; height:100%; word-break:keep-all; } .sortBoxListType2>ol>li .box { padding-top:5rem; background:no-repeat center top / auto 3.75rem; } .sortBoxListType2>ol>li .box.item1 { background-image:url(../images/sub/icon_rsn01.png); } .sortBoxListType2>ol>li .box.item2 { background-image:url(../images/sub/icon_rsn02.png); } .sortBoxListType2>ol>li .box.item3 { background-image:url(../images/sub/icon_rsn03.png); } .sortBoxListType2>ol>li .box.item4 { background-image:url(../images/sub/icon_rsn04.png); } .sortBoxListType2>ol>li .box dt { display:flex; justify-content:center; align-items:center; min-height:2.6em; line-height:1.3; margin-bottom:.8em; font-size:var(--font-titC); font-weight:500; } .sortBoxListType2>ol>li .box dd p.top { position:relative; padding:0 1.5em; color:#0061ce; } .sortBoxListType2>ol>li .box dd p.top::before { content:''; position:absolute; left:0; top:50%; width:100%; height:1px; margin-top:-1px; background:currentColor; } .sortBoxListType2>ol>li .box dd p.top span { display:block; position:relative; padding:.7em .25em; background:#fff; border:1px solid; border-radius:2em; text-align:center; line-height:1.3647; font-size:var(--font-txtA); font-weight:500; } .sortBoxListType2>ol>li .box dd p.btm { margin-top:1.25em; line-height:1.5; color:#232323; } .sortBoxListType2.blockList>ol>li.definition { padding:0; background:#fff; border-color:#d4d4d9; word-break:keep-all; } .sortBoxListType2>ol>li.definition .top { padding:1.375rem 1rem 1.25rem; background:#f0f0f0; color:#232323; font-weight:bold; } .sortBoxListType2>ol>li.definition .btm { padding:1.375rem; border-top:1px solid #d4d4d9; text-align:left; } .sortBoxListType2>ol>li.definition .btm li { position:relative; padding-left:.75em; } .sortBoxListType2>ol>li.definition .btm li::before { content:'-'; position:absolute; left:0; top:0; } .gridBox {display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:2em; margin-bottom:3em; } .gridBox.col2 { grid-template-columns:1fr 1fr; } .gridBox.col3 { grid-template-columns:1fr 1fr 1fr; } .gridBox.col5 { grid-template-columns:1fr 1fr 1fr 1fr 1fr; } .gridBox.col6 { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; } .gridBoxInner { position:relative; width:100%; } .gridBox .contBox { height:100%; } .gridBox .contBox::after { content:''; position:absolute; left:0; top:50%; width:1em; height:1em; margin:-.5em 0 0 -1.75em; border-right:2px solid #000; border-bottom:2px solid #000; box-sizing:border-box; transform:rotate(-45deg); } .gridBox .gridBoxInner:first-child .contBox::after { display:none; } .gridBox .box { height:100%; text-align:center; padding:5em 5% 1.5em; background:#fff center top no-repeat; box-sizing:border-box; border-radius:10px; border:1px solid; } .gridBox .box.center { display:flex; align-items:center; justify-content:center; } .gridBox .box.item1 {background-image:url("../images/sub/rsm06_icon1.gif");} .gridBox .box.item2 {background-image:url("../images/sub/rsm06_icon2.gif");} .gridBox .box.item3 {background-image:url("../images/sub/rsm06_icon3.gif");} .gridBox .box.item4 {background-image:url("../images/sub/rsm06_icon4.gif");} .gridBox .contBox dt { display:flex; justify-content:center; align-items:center; height:2.8em; margin-bottom:.625em; color:#1a7fc3; font-size:var(--font-titC); font-weight:500; } .gridBox .contBox dd strong, .gridBox .contBox dd span { display:block; margin-top:.5em; } .gridBox .contBox dd strong { font-size:1rem; } .gridBox .contBox dd span { color:#777; font-size:var(--font-txtC); font-weight:300;} .contBox .boxTit {overflow:hidden; position:relative; line-height:1.75; margin:0 4%; padding:.5em; text-align:center; color:#fff; border-radius:2em; text-shadow:0px 0px 1px rgba(0, 0, 0, 0.6); z-index:1; font-size:var(--font-txtA);} .contBox.bgc1 .boxTit {background:#0A759D;} .contBox.bgc2 .boxTit {background:#2a5baa;} .contBox.bgc3 .boxTit {background:#0f719e;} .contBox.bgc4 .boxTit {background:#197ec2;} .contBox.bgc5 .boxTit {background:#47539f;} .contBox.bgc6 .boxTit {background:#289dc2;} .contBox.bgc1 strong {color:#1a98c8;} .contBox.bgc2 strong {color:#2a5baa;} .contBox.bgc3 strong {color:#0f719e;} .contBox.bgc4 strong {color:#197ec2;} .contBox.bgc5 strong {color:#47539f;} .contBox.bgc6 strong {color:#42aed7;} .step .contBox .img {text-align:center; padding:.625em 0;} .step .contBox .box {position:relative; width:100%; margin-top:-25px; padding:1.5em 5% 1em; border:1px solid #ddd; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;text-align:left;} .step .contBox ul.txtList { margin-bottom:0; } .step .contBox .flexBox { display:flex; width:100%; height:100%; justify-content:center; align-items:center; margin-top:-25px; padding:2.25em 5% 1.25em; background:#fff; border:1px solid #ddd; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } /* contTabList 2019 */ .contTabList { display:flex; justify-content:space-between; position:relative; margin-bottom:1em; } .contTabList li { flex:1; } .contTabList a {position:relative; display:block; margin-left:-1px; background:#fff; padding:.5em; text-align:center; color:#1f1f1f; font-weight:500; border:1px solid #d3d3d3; } .contTabList li:first-child a { margin-left:0; } .contTabList a.active { color:#fff; border:1px solid #2a6bac; background:#2a6bac; z-index:2; } .systemList { overflow:hidden; word-break:keep-all; } .systemList > ul { display:grid; grid-template-columns:repeat(5, 1fr); margin:0; gap:1.75rem 3.5rem; } .systemList > ul > li { position:relative; padding:1.625rem 1.25rem; background:#fff; border:1px solid #dcdcdc; border-radius:.625rem; box-sizing:border-box; } .systemList > ul > li::after { position:absolute;left:-2.5625rem;top:50%;margin-top:-.5625rem;width:1.625rem;height:1.125rem;content:"";background:url('../images/sub/arrow_list.png') center no-repeat; background-size:contain; } .systemList > ul > li > .item { display:flex; flex-direction:column; height:100%; text-align:center; } .systemList > ul > li > .item > .iconImg { display:block; width:100%; height:4.5rem; background:no-repeat center / contain; } .systemList > ul > li > .item > .iconImg.bg1{background-image:url('../images/sub/icon_system1.png'); } .systemList > ul > li > .item > .iconImg.bg2{background-image:url('../images/sub/icon_system2.png'); } .systemList > ul > li > .item > .iconImg.bg3{background-image:url('../images/sub/icon_system3.png'); } .systemList > ul > li > .item > .iconImg.bg4{background-image:url('../images/sub/icon_system4.png'); } .systemList > ul > li > .item > .iconImg.bg5{background-image:url('../images/sub/icon_system5.png'); } .systemList > ul > li > .item > .iconImg.bg6{background-image:url('../images/sub/icon_system6.png'); } .systemList > ul > li > .item > .iconImg.bg7{background-image:url('../images/sub/icon_system7.png'); } .systemList > ul > li > .item > .iconImg.bg8{background-image:url('../images/sub/icon_system8.png'); } .systemList > ul > li > .item > .iconImg.bg9{background-image:url('../images/sub/icon_system9.png'); } .systemList > ul > li > .item > .iconImg.bg10{background-image:url('../images/sub/icon_system10.png'); } .systemList > ul > li > .item > .iconImg.bg11{background-image:url('../images/sub/icon_system11.png'); } .systemList > ul > li > .item > .iconImg.bg12{background-image:url('../images/sub/icon_system12.png'); } .systemList > ul > li > .item > .iconImg.bg13{background-image:url('../images/sub/icon_system13.png'); } .systemList > ul > li > .item > .iconImg.bg14{background-image:url('../images/sub/icon_system14.png'); } .systemList > ul > li > .item > .iconImg.bg15{background-image:url('../images/sub/icon_system15.png'); } .systemList > ul > li > .item .boxTxt { flex:0; display:table; width:100%; } .systemList > ul > li > .item .boxTxt>span { display:table-cell; height:3.888em; vertical-align:middle; } .systemList > ul > li > .item .boxTxt i { display:inline-block; width:.875rem; height:1rem; margin-left:.125rem; background:url(../images/common/icon_blank_mo.png) no-repeat top center / .875rem auto; vertical-align:middle; } /* 바로가기 */ .btnGo { max-width:440px; margin:1em auto; padding:0 1em; text-align:center; } .btnGo a { display:block; padding:1em 1.6em; background:#0061ce; text-align:left; line-height:1.22222; color:#fff; font-size:var(--font-tabA); font-weight:500; } .btnGo a:focus { outline:2px dashed #000; } .btnGo a span { display:block; position:relative; word-break:keep-all; } .btnGo a i { position:absolute; right:0; top:50%; width:.5rem; height:.5rem; margin-top:-.25rem; vertical-align:middle; transform:rotate(135deg); } .btnGo a i::before, .btnGo a i::after { content:''; position:absolute; left:0; top:0; color:#fff; } .btnGo a i::before { width:100%; height:100%; border-left:.125rem solid; border-top:.125rem solid; } .btnGo a i::after { width:1rem; height:.125rem; background:currentColor; transform:rotate(45deg); transform-origin:0 100%; } .boardStyle .btnGo { margin-top:2.5em; } /* tableStyle */ .tableDrag { display:none; margin-bottom:.7142em; font-size:1em; font-weight:300; color:#666; text-align:center; } .tableDrag span { display:inline-block; padding:.3571em 0 .3571em 4.5em; background:url(/gccf/images/sub/icon_table_drag.png) left center no-repeat; background-size:3.5714em auto; } .tableUnit { display:block; text-align:right; font-size:.9375em; font-weight:300; color:#586167; } .tableInfo, .point, .info { position:relative; padding-left:1.25em; color:#2b343f; font-size:var(--font-txtC); font-weight:500; } .tableInfo.right { float:right; margin-bottom:.9375rem; text-align:right; } .tableInfo a[target="_blank"] { padding-right:1.25rem; background:url(../images/common/icon_blank.png) no-repeat right center; background-size:.875rem auto; } .content .defaultLayout .txtList li.point { margin:0; padding-left:1.25em; background:none; font-size:var(--font-txtA); font-weight:400; } .tableInfo::before, .point::before, .content .defaultLayout .borderBoxArea ul li.point::before { content:'※ '; position:absolute; left:0; top:0; width:auto; height:auto; background:none; } .info, .defaultLayout .txtList .info { background:url(../images/sub/ico_ex.png) left .25em no-repeat; background-size:1em auto; } .tableStyle { table-layout:fixed; width:100%; margin-top:.5em; margin-bottom:1.2941em; border-top:2px solid #0061ce; font-size:var(--font-txtA); } .viewCaption caption { width:auto; height:auto; margin:.25em 0; text-indent:0; text-align:left; } /*.viewCaption caption { width:auto; height:auto; margin:.5em 0 0; padding-left:1.125em; background:url(../images/sub/bu_con_tit.png) left .125em no-repeat; background-size:.625em auto; text-indent:0; text-align:left; color:#171717; font-size:var(--font-titC); font-weight:500; }*/ .tableStyle th, .tableStyle td { padding:1.375rem 1rem; border-style:solid; border-color:#d3d5d7; border-right-width:1px; border-bottom-width:1px; vertical-align:middle; text-align:center; font-weight:400; } .tableStyle thead th { padding:1.063rem 1rem; } .tableStyle th:last-child, .tableStyle td:last-child { border-right-width:0; } .tableStyle th .txt { display:block; font-size:12px; letter-spacing:-.03em; } .tableStyle [rowspan] { border-left-width:1px; } .tableStyle [rowspan]:first-child { border-left-width:0; } .tableStyle th.bdNone, .tableStyle td.bdNone { border-left:none; } .tableStyle th { color:#717171; background:#fafafa; } .tableStyle th span { display:inline-block; } .tableStyle td { color:#171717; } .tableStyle td .txtList { margin:0; text-align:left; } .tableStyle td .txtList li { font-size:1em; } .tableStyle td.tableLine { padding:0; vertical-align:top; } .tableStyle td.tableLine>ul { display:flex; flex-direction:column; justify-content:space-around; min-height:16em; } .tableStyle td.tableLine>ul>li { display:flex; justify-content:center; align-items:center; flex:1; padding:0 .25em; border-top:1px solid #d3d5d7; white-space:nowrap; } .tableStyle td.tableLine>ul>li:first-child { border-top:none; } /* table scroll */ .rollTable { width:auto; min-width:700px; } .scroltable-wrapper {overflow:hidden;position:relative; } .scroltable-wrapper table { margin-bottom:0; } .detailInfo .scroltable-wrapper { margin-bottom:1.125em; } .scroltable-container {overflow:auto; } .scroltable-nav {display:none;position:absolute;width:60px;height:100%;cursor:pointer;z-index:2;} .scroltable-nav.scroltable-nav-left {left:0;background:url(../images/sub/arrow-left.png) no-repeat 10px center, -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-left.png) no-repeat 10px center, -moz-linear-gradient(to left, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-left.png) no-repeat 10px center, -ms-linear-gradient(to left, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-left.png) no-repeat 10px center, -o-linear-gradient(to left, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-left.png) no-repeat 10px center, linear-gradient(to left, rgba(255, 255, 255, 0), #fff)} .scroltable-nav.scroltable-nav-right {right:0;background:url(../images/sub/arrow-right.png) no-repeat right 10px center, -webkit-linear-gradient(0, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-right.png) no-repeat right 10px center, -moz-linear-gradient(to right, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-right.png) no-repeat right 10px center, -ms-linear-gradient(to right, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-right.png) no-repeat right 10px center, -o-linear-gradient(to right, rgba(255, 255, 255, 0), #fff);background:url(../images/sub/arrow-right.png) no-repeat right 10px center, linear-gradient(to right, rgba(255, 255, 255, 0), #fff)} /* 신청 공모 참여 */ .memberList .inner { display:flex; justify-content:space-around; margin-top:.5em; gap:.5em; } .memberList dl { flex:1; border:1px solid #d3d5d7; } .memberList dl dt, .memberList dl dd { padding:1em .75em; letter-spacing:-.05em; } .memberList dl dt { background:#f8f8f8; border-bottom:1px solid #d3d5d7; text-align:center; color:#197292; font-size:1.125em; } .memberList dl dd { border-top:none; color:#3a3a3a; font-size:1.0625em; } .memberList dd ul { text-align:left; } .memberList dd ul li { display:flex; justify-content:space-between; align-items:center; margin:.25em 0; } .memberList dd ul li button { margin-left:.125em; padding:.25em .5em; border:1px solid #777; border-radius:.25em; } .btnType { margin-top:.5em; text-align:right; line-height:1; } .btnType a { display:inline-block; min-width:7.375em; margin-left:.5em; padding:1em; background:#fff; border: 1px solid #dcdcdc; border-radius:.25em; text-align: center; color: #2492ba; font-weight: 500; } /* 신청서 작성 */ .writeForm { table-layout:auto; } .writeForm th { width:16%; box-sizing:border-box; } .writeForm td { width:auto; background:#fff; padding:.5em 1em; text-align:left; } .writeForm td input[type="text"], .writeForm td input[type="tel"], .writeForm td input[type="mail"], .writeForm td input[type="date"], .writeForm td select { width:100%; height:2.75em; padding:0 1em; border:1px solid #dcdcdc; color:#404040; box-sizing:border-box; } .writeForm td input[type="file"] { width:100%; height:2.75em; line-height:2.75em; border:1px solid #dcdcdc; } .writeForm td ul.radioList { display:flex; column-gap:2em; } .writeForm .radio { overflow:hidden; position:relative; } .writeForm .radio input[type="radio"] { position:absolute; left:0; top:0; width:1px; height:1px; margin-top:-5px; } .writeForm .radio label i { display:inline-block; position:relative; width:1.25em; height:1.25em; margin-top:.125em; margin-right:.5em; border:1px solid #ddd; border-radius:50%; vertical-align:top; box-sizing:border-box; } .writeForm .radio input[type="radio"]:checked + label i { border-color:#ef2865; } .writeForm .radio input[type="radio"]:checked + label i::before { content:''; position:absolute; left:50%; top:50%; width:.625em; height:.625em; margin:-.3125em 0 0 -.3125em; background:#ef2865; border-radius:50%; box-sizing:border-box; } .btnCenter { display:flex; justify-content:center; align-items:center; margin:5em 1em; } .btnCenter button, .btnCenter a { display:inline-block; min-width:12.72222em; height:3.88888em; line-height:1.88888em; padding:1em; vertical-align:top; text-align:center; color:#fff; font-size:1.125em; box-sizing:border-box; } .btnCenter .lkList { background:#595959; } .btnCenter .submit { background:#1c86ad; } .btnCenter .complete { background:#808080; } .btnCenter .print { background:#461fab; } /* popup Style */ .popupWrap { display:none; position:fixed; left:0; top:0; right:0; bottom:0; padding:5%; background:rgba(0,0,0,.65); z-index:120; } .popupArea { display:flex; justify-content:center; align-items:center; width:100%; height:100%; } .popInner { display:flex; flex-direction:column; position:relative; max-width:1080px; width:100%; max-height:80%; margin:0 auto; padding:2.125em 2.875em; background:#fff; border-radius:.751rem; box-sizing:border-box; } .popInner .popTit { margin-bottom:2.125rem; padding-right:2rem; font-size:var(--font-titB); font-weight:500; color:#232323; } .popInner .popContent { overflow-y:auto; } .popInner .lazyWid { max-width:500px; margin:2em auto 1em; padding:0 1em; } .popInner .lazyWid button { min-width:2em !important; } .popInner .btnClose { position:absolute; right:2.875em; top:2.125em; z-index:30; } .popInner .btnClose button { position:relative; width:1.875em; height:1.875em; color:transparent; } .popInner .btnClose button::before, .popInner .btnClose button::after { content:''; position:absolute; left:0; top:50%; width:100%; height:2px; background:#000; border-radius:2em; } .popInner .btnClose button::before { transform:rotate(45deg); } .popInner .btnClose button::after { transform:rotate(-45deg); } .popInner .sellView { display:flex; flex-wrap:wrap; } .popInner .sellView .item:nth-child(1) { display:flex; flex-direction:column; width:39.8785%; } .popInner .sellView .item:nth-child(2) { width:60.1215%; padding-left:1em; box-sizing:border-box; } .popInner .sellView .item.half { display:flex; width:100%; margin-top:1.875em; } .popInner .sellView .item.half .box:nth-child(1) { width:39.8785%; } .popInner .sellView .item.half .box:nth-child(2) { width:60.1215%; padding-left:1em; box-sizing:border-box; } .popInner .sellView .item .thumb { overflow:hidden; width:100%; height:22.5em; border-radius:.25em; } .popInner .sellView .item .thumb img { width:100%; height:100%; object-fit:contain; } .popInner .sellView .swiperArea { position:relative; } .popInner .sellView .swiperArea .thumbSlide { overflow:hidden; width:100%; height:22.5em; margin-bottom:1.75em; border-radius:.25em; } .popInner .sellView .swiperArea .thumbControl { position:absolute; bottom:0; left:50%; padding:.875em 1em; background:#fff; border:1px solid #e5ecee; border-radius:2em; box-shadow:0px 12px 21px rgba(0, 0, 0, .02); transform:translateX(-50%); z-index:2; } .popInner .sellView .swiperArea .thumbControl button { display:inline-block; position:relative; width:1.5em; height:1.5em; text-indent:-9999px; } .popInner .sellView .swiperArea .thumbControl button::after { content:''; position:absolute; right:50%; top:50%; width:.4375em; height:.4375em; margin-top:-.25em; margin-right:-.375em; border-top:2px solid #767676; border-left:2px solid #767676; transform:rotate(-45deg); } .popInner .sellView .swiperArea .thumbControl .next::after { margin-right:-.1875em; transform:rotate(135deg); } .popInner .sellView .swiperArea .thumbControl .pagination { display:inline-block; vertical-align:middle; width:auto; margin:0 .5rem; font-size:.9375em; color:#757575; } .popInner .sellView .swiperArea .thumbControl .pagination .now { font-weight:700; color:#070707; } .popInner .sellView .swiperArea .thumbControl .dots { display:none; } .popInner .sellView .item .infoTxt { flex-grow:1; padding-top:1em; } .popInner .sellView .item .infoTxt>div { display:flex; flex-direction:column; justify-content:center; height:100%; padding:0 1.125em; border:1px solid #dcdcdc; box-sizing:border-box; } .popInner .sellView .item .infoTxt ul li { display:flex; position:relative; margin:.5em 0; padding-left:.625em; letter-spacing:-.025em; color:#232323; } .popInner .sellView .item .infoTxt ul li::before { content:''; position:absolute; top:.5625em; left:0; width:.1875em; height:.1875em; background:#232323; border-radius:50%; } .popInner .sellView .item .infoTxt ul li strong { font-weight:700; } .popInner .sellView .item .infoTxt ul li p { padding-left:.25em; } .popInner .sellView .item .infoTxt ul li.block { display:block; } .popInner .sellView .item .infoTxt ul li.block p { position:relative; margin:.5em 0; padding-left:4.375em; } .popInner .sellView .item .infoTxt ul li.block .blue { position:absolute; top:0; left:0; font-weight:700; color:#0061ce; } .popInner .sellView .item .infoTxt2>li { position:relative; padding-left:.625rem; font-size:var(--font-txtA); font-weight:700; letter-spacing:-.025em; color:#232323; } .popInner .sellView .item .infoTxt2>li::before { content:''; position:absolute; top:.5625rem; left:0; width:.1875rem; height:.1875rem; background:#232323; border-radius:50%; } .popInner .sellView .item .infoTxt2>li>ul>li { margin:.5em 0; font-size:1rem; font-weight:500; } .popInner .sellView .item .infoTxt2>li>ul>li::before { content:'-'; margin-right:.25em; } .popInner .sellView .item .infoTxt2>li>ul>li a[target="_blank"] { padding-right:1.25rem; background:url(../images/common/icon_blank.png) no-repeat right center; background-size:.875rem auto; } .popInner .sellView .item .infoTxt3 { padding:1em 1.375em; background:#f7f7f7; } .popInner .sellView .item .infoTxt3 li { margin:.375em 0; letter-spacing:-.025em; color:#232323; } .popInner .sellView .item .infoTxt3 li::before { content:'·'; margin-right:.25em; } .popInner .sellView .item .tableStyle { margin:0; } .popInner .sellView .item .bdtBox { min-height:5em; overflow-y:auto; } .popInner .sellView .item.noBox { display:flex; align-items:center; justify-content:center; width:100%; height:30.625em; padding:0 3%; background:#ebebeb; box-sizing:border-box; } .popInner .sellView .item.noBox p { font-size:var(--font-tabA); font-weight:500; letter-spacing:-.025em; color:#232323; line-height:1.6; text-align:center; word-break:keep-all; } .popInner .sellView .item.noBox p .block { display:block; } .popInner .sellView .item.noBox p strong { color:#0061ce; } /* alertPop */ .alertWrap { display:none; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.55); z-index:1000; } .alertWrap .popInner { display:flex; width:100%; height:100%; justify-content:center; align-items:center; } .alertWrap .popContent { position:relative; background:#fff; } .alertWrap .popContent .contentInner { min-width:200px; max-width:500px; padding:2em; font-size:1.25em; } .alertWrap .popContent .btnLine { display:flex; justify-content:space-around; } .alertWrap .popContent .btnLine button, .alertWrap .popContent .btnLine a { flex:1; display:block; height:3.88888em; padding:1em; box-sizing:border-box; line-height:1.88888em; text-align:center; color:#fff; font-size:1.125em; } .alertWrap .popContent .btnLine .cancel { background:#595959; } .alertWrap .popContent .btnLine .submit { background:#1c86ad; } @media all and (max-width:1024px) { /* tableStyle */ .tableDrag { display:block; } .scrollTblWrap { width:100%; overflow-x:auto; overflow-y:hidden; } .scrollTblWrap table { width:960px; } .tableInfo { padding-left:1.2em; background-size:10px auto; } .tableStyle th, .tableStyle td { font-size:1em; } } @media only screen and (max-width:960px) { .topLinkArea { flex-direction:column; } .topLinkArea .imgBox { width:100%; } .gridBox.col6 { grid-template-columns:1fr 1fr 1fr; } .system-list > ul{ grid-template-columns:1fr 1fr 1fr 1fr; } .systemList > ul { grid-template-columns:repeat(4, 1fr); } .popInner .sellView .swiperArea .thumbControl { bottom:0; left:10%; width:80%; transform:translateX(0); box-sizing:border-box; text-align:center; } } @media only screen and (max-width:840px) { .tableInfo.right { float:none; text-align:left; } .memberList .inner { flex-direction:column; } /* popup Style */ .popInner { max-height:90%; padding:2em; } .popInner .popTit { margin-bottom:2rem; } .popInner .btnClose { right:2em; top:2em; } .popInner .sellView { display:block; } .popInner .sellView .item:nth-child(1) { width:100%; flex-direction:row; justify-content:space-between; } .popInner .sellView .item:nth-child(2) { width:100%; margin-top:1em; padding:0; } .popInner .sellView .item.half { display:block; margin-top:1.4285em; } .popInner .sellView .item.half .box:nth-child(1) { width:100%; } .popInner .sellView .item.half .box:nth-child(2) { width:100%; margin-top:1.4285em; padding:0; } .popInner .sellView .item .thumb { width:50%; } .popInner .sellView .swiperArea { width:100%; } .popInner .sellView .swiperArea .thumbSlide { width:100%; max-width:390px; height:auto; aspect-ratio:394 / 360; box-sizing:border-box; } .popInner .sellView .swiperArea .swiper-slide { width:100%; height:100%; } .popInner .sellView .swiperArea .swiper-slide img { max-width:100%; margin:0 auto; } .popInner .sellView .item .infoTxt { flex-grow:0; width:44.7761%; padding:0; } .popInner .sellView .item .infoTxt>div { padding:0; border:none; } .popInner .sellView .item .infoTxt ul li { display:block; padding:0; } .popInner .sellView .item .infoTxt ul li::before { display:none; } .popInner .sellView .item .infoTxt ul li p { margin:.25em 0; padding:0; } .popInner .sellView .item .infoTxt ul li.block p { margin:.25em 0; padding:0; } .popInner .sellView .item .infoTxt ul li.block .blue { position:static; margin-right:.2857em; } .popInner .sellView .item .infoTxt2>li { padding:0; } .popInner .sellView .item .infoTxt2>li::before { display:none; } .popInner .sellView .item.noBox { padding:0 13.5338%; } .popInner .sellView .item.noBox p { line-height:1.8; } .popInner .sellView .item.noBox p .block { display:inline-block; } } @media only screen and (max-width:767px) { /* pageTopBox */ .pageTopBox { padding:.5em 1.5em; } .pageTopBox .boxInner { flex-direction:column; } .pageTopBox .topTit, .pageTopBox .imgArea { width:100%; padding:.5em; border-right:none; border-bottom:1px solid #dfe4f4; } .pageTopBox .buList, .pageTopBox .txtArea { margin:.5em; } .pageTopBox .imgArea { padding:1em 5%; } .pageTopBox .imgArea .img { max-width:50%; } .pageTopBox.topPosition .imgArea { display:none; } .noneBorder .imgArea { display:none; } .pageTopBox .txtArea { margin-top:1em; } .pageTopBox .buList li { margin-top:.5em; } .pageTopTxtBox .innerBox { margin:2rem; } .rowLineBox { flex-direction:column; } /* defaultLayout */ .defaultLayout .txtList.rowLine>li { display:block; max-width:none; } .defaultLayout .txtList.rowLine>li::before { display:none; } .defaultLayout .txtList.rowLine>li span.txt { padding-bottom:.5em; border-bottom:1px dashed #dbdbdb; } .defaultLayout .txtList.rowLine>li span.date { width:auto; text-align:right; margin-top:-.75em; background:none; } .defaultLayout .txtList.rowLine>li span.date i { display:inline-block; padding-left:.5em; background:#fff; font-style:normal; } .defaultLayout .imgList li { width:calc(50% - 1rem); } .defaultLayout .imgList.col2 ul li { width:100%; } .accordionList .panel .boxGrid.col3, .accordionList .panel .boxGrid { grid-template-columns:1fr; } .accordionList .panel .boxGrid.rowLine p.boxTxt { width:100%; } .boxWrap .boxArea { padding:94% 2.75em 5em; background-position:center top; background-size:114% auto; } .defaultLayout .imgBoxList { flex-direction:column; } .defaultLayout .imgBoxList.tit2Line dt { min-height:0; } .accordionList .imgRightBox { padding-right:0; } .accordionList .imgRightBox .img { position:static; width:auto; margin:-2em 0 2em; text-align:center; } /* 콘텐츠 상단 박스 스타일 */ .rowBox, .rowCheckBox { flex-direction:column; } .rowBox .infoTit, .rowCheckBox .checkTit { width:100%; padding:4%; } .rowBox .infoTit { border-bottom:1px solid #dcdcdc; border-right:none; } .rowBox .infoTit span, .rowCheckBox .checkTit span { display:block; padding-top:0; padding-left:2em; background-position:left center; background-size:contain; } .rowBox .infoTxt, .rowCheckBox .checkTxt { padding:1em; word-break:keep-all; } .rowBox .countList.boxGrid { gap:.25rem; grid-auto-flow:row; grid-template-columns:1fr; } /* gridbox style */ .sortBoxListType2>ol { flex-direction:column; } .sortBoxListType2>ol>li { padding:1.5rem; margin-top:-1px; margin-left:0; } .sortBoxListType2>ol.rowLine>li { padding:1.5rem .5rem; } .sortBoxListType2>ol>li::before, .sortBoxListType2>ol>li::after { left:50%; top:0; } .sortBoxListType2>ol>li::after { margin:-.625rem 0 0 -.375rem; transform:rotate(135deg); } .sortBoxListType2>ol.rowLine>li::after { margin:-.33333rem 0 0 -.25rem;} .sortBoxListType2>ol>li .box { padding-top:4.5rem; } .panelInner .gridBox { grid-template-columns:1fr; gap:3em; } .gridBox .contBox::after { left:50%; top:0; margin:-1.75em 0 0 -.5em; transform:rotate(45deg); } .contTabList { flex-direction:column; } .contTabList a { margin-top:-1px; margin-left:0; } .systemList > ul { grid-template-columns:repeat(3, 1fr); } /* iconBoxList */ .iconBoxList ul { flex-direction:column; gap:1em; } /* verticalSortList */ .verticalSortList>ol>li>ol, .verticalSortList>ol>li>ol>li, .verticalSortList>ol>li>ol>li>div { display:block; } .verticalSortList>ol>li div.rowTit, .verticalSortList>ol>li div.rowTxt { margin-bottom:-1px; padding:.75rem; box-sizing:border-box; } .verticalSortList>ol>li div.rowTit { width:100%; } .verticalSortList>ol>li div.rowTxt { font-size:var(--font-txtA); } /* sortBoxList */ .sortBoxList>ol, .sortBoxList.col2>ol { grid-template-columns:1fr; gap:2.5rem; } .sortBoxList>ol>li::before { left:0; top:-2.5rem; width:100%; height:2.5rem; background-position:50%; transform:rotate(90deg); } .sortBoxList>ol>li:last-child::before { display:block; } .sortBoxList>ol>li:nth-child(1), .sortBoxList>ol>li:nth-child(2) { grid-row:span 1; } .sortBoxList.flexLine>ol { flex-direction:column; } .sortBoxList.flexLine>ol>li::before { background-position:50%; } .sortBoxList.flexLine>ol>li.leftPosition::before { width:50%; } .sortBoxList.flexLine>ol>li.otherItemStyle { position:relative; margin:-2.5rem 0 0 0; padding-top:1rem; } .sortBoxList.flexLine>ol>li.otherItemStyle::before { content:''; position:absolute; left:50%; top:0; width:1px; height:1rem; background:#637ac8; display:block; transform:rotate(0); } .sortBoxList.flexLine ul.columnList { flex-direction:row; justify-content:space-around; column-gap:2.5rem; } .sortBoxList.flexLine ul.columnList>li { flex:1; } .sortBoxList.flexLine ul.columnList>li>dl { flex-direction:column; padding-top:1rem; padding-left:0; } .sortBoxList.flexLine ul.columnList::before { left:0; top:0; width:100%; height:1px; margin-top:-1px; } .sortBoxList.flexLine ul.columnList>li>dl::before { left:50%; right:auto; top:0; bottom:0; width:1px; height:auto; } .sortBoxList.flexLine ul.columnList>li:first-child>dl::before { left:50%; } .sortBoxList.flexLine ul.columnList>li:first-child::before, .sortBoxList.flexLine ul.columnList>li:last-child::before { width:50%; height:1px; top:-1px; background:#fff; } .sortBoxList.flexLine ul.columnList>li:first-child::before { left:0; } .sortBoxList.flexLine ul.columnList>li:last-child::before { left:auto; right:0; bottom:auto; right:-1px; } .sortBoxList.flexLine ul.columnList>li>dl>dt { width:100%; padding:0; } .sortBoxList.flexLine ul.columnList>li>dl>dd { position:relative; flex:1; width:100%; } .sortBoxList.flexLine ul.columnList>li>dl>dd, .sortBoxList.flexLine ul.columnList>li.afterArrow>dl>dd { padding-top:1rem; } .sortBoxList.flexLine ul.columnList>li.afterArrow>dl>dd::after { left:-2.5rem; width:2.5rem; height:100%; transform:rotate(180deg); } /* 계란 선별 포장 유통 */ .imgSortList { flex-wrap:wrap; } .imgSortList>li { flex:1 1 calc(50%); margin-top:-1px; } .imgSortList .imgArea { padding-top:11rem; } .imgSortList .txtArea::before, .imgSortList .txtArea::after { display:none; } .eggBox h5 { padding-right:9rem; } .eggBox>ol { position:static; } .eggBox>ol::after { top:1.5em; right:1rem; bottom:auto; width:6rem; height:6rem; padding:0; background-position:center top; } .eggBox>ol>li { padding-right:0; } /* 손씻기 */ .flexSortLine { padding:1.5em; } .flexSortLine ol { grid-template-columns:1fr 1fr; gap:1.5rem; } .flexSortLine ol li::before { display:none; } /* 목적 콘텐츠 스타일 */ .graphStyle1>ol>li.mid { padding-left:5%; padding-right:5%; } .graphStyle1>ol>li.mid::before { top:60%; height:40%; } .graphStyle1 .areaType { padding:3.6875rem 0 .625rem; } .graphStyle1 .areaType dt { top:0; width:4em; height:4em; margin:0 0 0 -2em; } .graphStyle1 .areaType dd ul { display:flex; justify-content:space-around; gap:1.25rem; } .graphStyle1 .areaType dd ul li { padding:1em 1.75em; border-radius:1em; } .graphStyle1 .areaType dd .pcNone { display:block; } .graphStyle1 .boxList ul { flex-direction:column; gap:.5rem; padding:.5rem; background:#fff; border:1px solid #81aad7; border-radius:1em; } .graphStyle1 .boxList ul li { padding:0; border:none; } .graphStyle1 .boxType dd ul { flex-direction:column; gap:.625em; padding-left:5%; padding-right:5%; } #wrap .graphStyle1 .boxType dd ul li { margin:0; } #wrap .graphStyle1 .boxType dd ul li.left { background:#126bb6; } } @media only screen and (max-width:640px) { .topLinkArea .rightBox .lkLink { flex-direction:column; } .topLinkArea .rightBox .lkLink a br { display:none; } /* 게시판 */ .writeForm { display:block; } .writeForm tr { display:flex; flex-wrap:wrap; } .writeForm tr th, .writeForm tr td { height:auto; margin-top:-1px; padding:.5em; letter-spacing:-.05em; box-sizing:border-box; } .writeForm tr th { display:flex; align-items:center; justify-content:center; width:28%; margin-right:-1px; } .writeForm tr td { display:block; width:72%; } } @media only screen and (max-width:520px) { .imgSortList>li { flex:1 1 calc(100%); margin-left:0; } .defaultLayout .imgBoxList dd .imgRow { flex-direction:column; } .boxWrap .btnGo { margin-top:-1.5em;} .boxWrap .btnGo a { font-size:1em; } .systemList > ul { grid-template-columns:repeat(2, 1fr); } .defaultLayout .imgList li { width:100%; } } /* map api */ /* 주변정보 지도 */ .mapBox { height:712px; margin-bottom:3.75em; border:1px solid #dcdcdc; } .pointBox .label button { display:block; width:3.125em; height:4em; background:no-repeat center; background-size:contain; } .pointBox.food1 .label button { background-image:url(../images/sub/food_point01.png); } .pointBox.food1_2 .label button { background-image:url(../images/sub/food_point0102.png); } .pointBox.food2 .label button { background-image:url(../images/sub/food_point02.png); } .pointBox.food3 .label button { background-image:url(../images/sub/food_point03.png); } /* 상세 내용 */ .pointBox .detail { display:none; position:absolute; left:50%; bottom:100%; padding-bottom:1.75em; transform:translateX(-50%); } .pointBox .detail2 { display:block; } .pointBox .detail .boxTxt, .pointBox .detail2 .boxTxt { position:relative; padding:1.25em 1.5em; background:#fff; border:1px solid; border-radius:.5em; box-shadow:0 5px 12px rgba(0, 0, 0, .2); } .pointBox.food1 .detail .boxTxt, .pointBox.food1 .detail2 .boxTxt { border-color:#027e45; } .pointBox.food1_2 .detail .boxTxt, .pointBox.food1_2 .detail2 .boxTxt { border-color:#027e45; } .pointBox.food2 .detail .boxTxt, .pointBox.food2 .detail2 .boxTxt { border-color:#c24638; } .pointBox.food3 .detail .boxTxt, .pointBox.food3 .detail2 .boxTxt { border-color:#724b0b; } .pointBox .detail .boxTxt::before, .pointBox .detail2 .boxTxt::before { content:''; position:absolute; bottom:-.75em; left:50%; width:1em; height:.75em; margin-left:-.5em; background:no-repeat center; background-size:contain; } .pointBox.food1 .detail .boxTxt::before, .pointBox.food1 .detail2 .boxTxt::before { background-image:url(../images/sub/bg_map_before01.png); } .pointBox.food1_2 .detail .boxTxt::before, .pointBox.food1_2 .detail2 .boxTxt::before { background-image:url(../images/sub/bg_map_before01.png); } .pointBox.food2 .detail .boxTxt::before, .pointBox.food2 .detail2 .boxTxt::before { background-image:url(../images/sub/bg_map_before02.png); } .pointBox.food3 .detail .boxTxt::before, .pointBox.food3 .detail2 .boxTxt::before { background-image:url(../images/sub/bg_map_before04.png); } .pointBox .detail .boxTxt dl dt span, .pointBox .detail2 .boxTxt dl dt span { display:block; margin-bottom:.625em; font-weight:700; } .pointBox.food1 .detail .boxTxt dl dt span, .pointBox.food1 .detail2 .boxTxt dl dt span { color:#027e45; } .pointBox.food1_2 .detail .boxTxt dl dt span, .pointBox.food1_2 .detail2 .boxTxt dl dt span { color:#027e45; } .pointBox.food2 .detail .boxTxt dl dt span, .pointBox.food2 .detail2 .boxTxt dl dt span { color:#c24638; } .pointBox.food3 .detail .boxTxt dl dt span, .pointBox.food3 .detail2 .boxTxt dl dt span { color:#724b0b; } .pointBox .detail .boxTxt dl dt p, .pointBox .detail2 .boxTxt dl dt p { font-size:var(--font-tabA); font-weight:700; color:#373737; } .pointBox .detail .boxTxt dl dd, .pointBox .detail2 .boxTxt dl dd { margin-top:.5em; } .pointBox .detail .boxTxt dl dd ul li, .pointBox .detail2 .boxTxt dl dd ul li { padding-left:1.25em; letter-spacing:-.025em; color:#393939; background:no-repeat left .1875em; background-size:.75em auto; } .pointBox .detail .boxTxt dl dd .addr, .pointBox .detail2 .boxTxt dl dd .addr { background-image:url(../images/sub/icon_map_addr.png); } .pointBox .detail .boxTxt dl dd .call, .pointBox .detail2 .boxTxt dl dd .call { background-image:url(../images/sub/icon_map_call.png); } .pointBox .detail .boxTxt dl dd .menu, .pointBox .detail2 .boxTxt dl dd .menu { background-image:url(../images/sub/icon_map_menu.png); background-size:1em; } .pointBox .detail .close, .pointBox .detail2 .close { position:absolute; top:1.25em; right:1.5em; line-height:1; } .pointBox .detail .close button i, .pointBox .detail2 .close button i { display:block; position:relative; width:1.125em; height:1.125em; text-indent:-9999px; } .pointBox .detail .close button i::before, .pointBox .detail2 .close button i::before, .pointBox .detail .close button i::after, .pointBox .detail2 .close button i::after { content:''; position:absolute; top:50%; left:0; width:100%; height:2px; background:#000; border-radius:2em; transform:rotate(45deg); } .pointBox .detail .close button i::after, .pointBox .detail2 .close button i::after { transform:rotate(135deg); } .foodMapList .type { width:25%; } .foodMapList .name { width:20%; } .foodMapList .btn { width:18%; } .foodMapList td { font-size:var(--font-tabA); } .foodMapList td.address { text-align:left; } .foodMapList .typeTxt { display:flex; align-items:center; } .foodMapList .typeTxt i { flex-shrink:0; width:1.875em; height:2.125em; background:no-repeat center; background-size:contain; } .foodMapList .typeTxt span { flex-grow:1; font-size:var(--font-titC); font-weight:700; } .foodMapList .typeTxt.food1 i { background-image:url(../images/sub/food_point01_ico.png); } .foodMapList .typeTxt.food1 span { color:#027e45; } .foodMapList .typeTxt.food1_2 i { background-image:url(../images/sub/food_point0102_ico.png); } .foodMapList .typeTxt.food1_2 span { color:#027e45; } .foodMapList .typeTxt.food2 i { background-image:url(../images/sub/food_point02_ico.png); } .foodMapList .typeTxt.food2 span { color:#c24638; } .foodMapList .typeTxt.food3 i { background-image:url(../images/sub/food_point03_ico.png); } .foodMapList .typeTxt.food3 span { color:#724b0b; } .btnPoint { display:inline-block; width:6.4444em; padding:.3333em 0; color:#004b9f; border:1px solid #004b9f; background:#fff; } .infoTxtBox { margin-top:3.125em; padding:2em; background:#f3f5f9; } .infoTxtBox p { margin-top:.25em; letter-spacing:-.025em; color:#232323; } .infoTxtBox p:first-child { margin-top:0; } .infoTxtBox .ico i { display:inline-block; vertical-align:middle; width:1em; height:1em; margin-right:.25em; margin-top:-.25em; background:url(../images/sub/icon_info_txt.png) no-repeat; background-size:contain; } @media only screen and (max-width: 767px) { /* 주변정보 지도 */ .mapBox { height:29.2857em; margin-bottom:2.5714em; } .pointBox .label button { width:2.4285em; height:3.1428em; } .pointBox.food1 .label button { background-image:url(../images/sub/food_point01_mo.png); } .pointBox.food1_2 .label button { background-image:url(../images/sub/food_point0102_mo.png); } .pointBox.food2 .label button { background-image:url(../images/sub/food_point02_mo.png); } .pointBox.food3 .label button { background-image:url(../images/sub/food_point03_mo.png); } /* 상세 내용 */ .pointBox .detail, .pointBox .detail2 { padding-bottom:1.5714em; } .pointBox .detail .boxTxt, .pointBox .detail2 .boxTxt { padding:1em 1.1428em; } .pointBox .detail .boxTxt dl dd .addr, .pointBox .detail2 .boxTxt dl dd .addr { background-image:url(../images/sub/icon_map_addr_mo.png); } .pointBox .detail .boxTxt dl dd .call, .pointBox .detail2 .boxTxt dl dd .call { background-image:url(../images/sub/icon_map_call_mo.png); } .pointBox .detail .boxTxt dl dd .menu, .pointBox .detail2 .boxTxt dl dd .menu { background-image:url(../images/sub/icon_map_menu_mo.png); } .pointBox .detail .close, .pointBox .detail2 .close { top:1em; right:1.1428em; } .foodMapList td { font-size:var(--font-txtA); } .foodMapList .type { width:7%; } .foodMapList .name { width:20%; } .foodMapList .btn { width:12%; } .foodMapList .address { display:none; } .foodMapList .typeTxt { justify-content:center; } .foodMapList .typeTxt i { width:1.5714em; height:1.7857em; } .foodMapList .typeTxt span { display:none; } .foodMapList .typeTxt.food1 i { background-image:url(../images/sub/food_point01_ico_mo.png); } .foodMapList .typeTxt.food1_2 i { background-image:url(../images/sub/food_point0102_ico_mo.png); } .foodMapList .typeTxt.food2 i { background-image:url(../images/sub/food_point02_ico_mo.png); } .foodMapList .typeTxt.food3 i { background-image:url(../images/sub/food_point03_ico_mo.png); } .btnPoint { width:5.7142rem; } .infoTxtBox p { margin-top:1.4285em; } .infoTxtBox .ico i { margin-top:-1px; } } /* 오시는 길 안내 */ .mapGuideWrap { max-width:1200px; margin:0 auto; padding:0 1.25em; } .mapOverlay { padding-bottom:.75em; } .mapOverlay>div { position:relative; width:13.5em; background:#fff; box-shadow:0 5px 12px rgba(0, 0, 0, .2); text-align:center; } .mapOverlay>div::before { content:''; position:absolute; bottom:-.6875em; left:50%; width:1em; height:.75em; margin-left:-.5em; background:url(../images/sub/bg_map_before03.png) no-repeat center; background-size:contain; } .mapOverlay .name { padding:.875rem 0; font-size:var(--font-titC); font-weight:700; color:#fff; background:#0061ce; border-radius:.5rem .5rem 0 0; } .mapOverlay .addr { padding:.75rem 0; font-size:var(--font-tabA); color:#393939; letter-spacing:-.025em; border:1px solid #393939; border-top:none; border-radius:0 0 .5rem .5rem; } .mapWay .item { margin-top:1.875em; padding:2.875em 2.375em 2.875em 8.75em; border:1px solid #d2d2d2; border-top:2px solid #0061ce; background:no-repeat 2.375em 2.375em; background-size:4.125em auto; } .mapWay .item.ico1 { background-image:url(../images/sub/icon_map_way01.png); } .mapWay .item.ico2 { background-image:url(../images/sub/icon_map_way02.png); } .mapWay .item.ico3 { background-image:url(../images/sub/icon_map_way03.png); } .mapWay .item h5 { font-size:var(--font-tabA); color:#232323; } .mapWay .item ul li { margin-top:.625em; } .mapWay .item ul li .type { flex-shrink:0; width:5.875rem; margin-right:.75rem; font-size:var(--font-txtC); line-height:2rem; text-align:center; color:#fff; border-radius:3em; } .mapWay .item ul li .type.bg1 { background:#0061ce; } .mapWay .item ul li .type.bg2 { background:#027e45; } .mapWay .item ul li .type.bg3 { background:#cd1134; } .mapWay .item ul li .type.bg4 { background:#232323; } .mapWay .item ul li .txt { font-size:var(--font-tabA); color:#232323; letter-spacing:-.025em; } .mapWay .item.ico3 ul { margin-top:1em; } .mapWay .item.ico3 ul li { display:flex; align-items:flex-start; margin-top:.625em; } .mapWay .item.ico3 ul li .txt { flex-grow:1; padding-top:.25rem; } @media only screen and (max-width:767px) { .mapWay .item { padding:1.4285em 2.1428em 1.4285em 4.8571em; background-size:2.7857em auto; background-position:1.2857em 1.2857em; } .mapWay .item.ico1 { background-image:url(../images/sub/icon_map_way01_mo.png); } .mapWay .item.ico2 { background-image:url(../images/sub/icon_map_way02_mo.png); } .mapWay .item.ico3 { background-image:url(../images/sub/icon_map_way03_mo.png); } .mapWay .item h5, .mapWay .item ul li .txt { font-size:var(--font-txtB); } .mapWay .item ul li { margin-top:.3571em; } .mapWay .item.ico3 ul { margin-top:.7142em; } .mapWay .item.ico3 ul li { flex-direction:column; margin-top:.7142em; } } /* 국제 콘퍼런스 */ .conferenceWrap { margin:3.75em 0; } .conferenceWrap .topTit { display:flex; align-items:center; justify-content:space-between; margin-bottom:3.125em; padding:3.625em; background-color:#0061ce; background-image:url(../images/sub/bg_conf_tit1.png), url(../images/sub/bg_conf_tit2.png); background-repeat:no-repeat; background-size:24.875em auto, 22em auto; background-position:left top, right bottom; color:#fff; letter-spacing:-.025em; } .conferenceWrap .topTit h4 { font-size:2.1875em; word-break:keep-all; } .conferenceWrap .topTit p { font-size:var(--font-tabA); } .conferenceWrap .conArea .img { margin:1em 0; border:1px solid #dcdcdc; box-sizing:border-box; } .conferenceWrap .conArea .img img { width:100%; } .conferenceWrap .conArea .txt { margin:3.125rem 0; } .conferenceWrap .conArea .video { position:relative; padding-top:56.25%; } .conferenceWrap .conArea .video iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; } .conferenceWrap .conArea .imgBox { margin:1em 0; } .conferenceWrap .conArea .imgBox ul { display:grid; gap:1em; } .conferenceWrap .conArea .imgBox ul li { border:1px solid #dcdcdc; box-sizing:border-box; } .conferenceWrap .conArea .imgBox ul li img { width:100%; height:100%} .conferenceWrap .conArea .imgBox.style1 ul li:nth-child(1) { grid-column:1 / 3; } .conferenceWrap .conArea .imgBox.style1 ul li:nth-child(2) { grid-column:3 / 5; } .conferenceWrap .conArea .imgBox.style2 ul { grid-template-columns:repeat(3, 1fr); } .conferenceWrap .conArea .imgBox.style3 ul li:last-child { grid-column:1 / 4; } .conferenceWrap .conArea .imgBox.style4 ul { grid-template-columns:repeat(3, 1fr); } .conferenceWrap .conArea .imgBox.style5 ul li:last-child { grid-column:1 / 4; } @media only screen and (max-width:767px) { .conferenceWrap { margin:2.8571em 0; } .conferenceWrap .topTit { display:block; margin-bottom:2.1428em; padding:2.1428em; } .conferenceWrap .topTit h4 { font-size:var(--font-titB); } .conferenceWrap .topTit p { margin-top:.7142em; } .conferenceWrap .conArea .img { margin:.5em 0; } .conferenceWrap .conArea .txt { margin:2.1428rem 0; } .conferenceWrap .conArea .imgBox { margin:.5em 0; } .conferenceWrap .conArea .imgBox ul { gap:.5em; } .conferenceWrap .conArea .imgBox.style2 ul { grid-template-columns:repeat(2, 1fr); } .conferenceWrap .conArea .imgBox.style1 ul li:nth-child(2), .conferenceWrap .conArea .imgBox.style2 ul li:nth-child(1) { grid-column:1 / 3; } .conferenceWrap .conArea .imgBox.style3 ul { grid-template-columns:repeat(2, 1fr); } .conferenceWrap .conArea .imgBox.style3 ul li:last-child { grid-column:auto; } .conferenceWrap .conArea .imgBox.style4 ul { grid-template-columns:repeat(2, 1fr); } .conferenceWrap .conArea .imgBox.style5 ul { grid-template-columns:repeat(2, 1fr); } .conferenceWrap .conArea .imgBox.style5 ul li:last-child { grid-column:auto; } } /* buttonSelect */ .buttonSelect { position:relative; } .buttonSelect .viewCode { position:relative; } .buttonSelect button { width:100%; text-align:left; } .buttonSelect button::after { content:''; display:block; position:absolute; top:50%; right:0; width:.5em; height:.5em; margin-top:-.5em; border-width:0 2px 2px 0; border-style:solid; border-color:#171717; transform:rotate(45deg); transition:all .15s; } .buttonSelect button.on::after { transform:rotate(225deg); margin-top:-.25em; } .selectList { display:none; position:absolute; top:100%; left:50%; width:100%; min-width:8.125em; margin-top:-.125em; padding:1.6875em 1.25em 1.6875em 1.875em; font-size:var(--font-txtB); background:#fff; border:1px solid #dcdcdc; border-radius:.5rem; box-sizing:border-box; box-shadow:0 24px 30px 0 rgba(0, 0, 0, 0.06); transform:translateX(-50%); z-index:6; } .selectList::before { content:''; display:block; position:absolute; top:-.375em; left:50%; width:.75em; height:.75em; margin-left:-.375em; background:#fff; border-width:1px 1px 0 0; border-style:solid; border-color:#dcdcdc; border-radius:.125em; box-sizing:border-box; transform:rotate(-45deg); } .selectList ul {overflow-y:auto; max-height:17.5em; } .selectList li { display:block; position:relative; margin:.625em 0; } .selectList li:first-child { margin-top:0; } .selectList li:last-child { margin-bottom:0; } .selectList li input { position:absolute; left:-9999px; width:1px; height:1px; } .selectList li a, .selectList li label { display:inline-block; position:relative; padding:1px 0; transition:all .15s; word-break:keep-all; cursor:pointer; } .selectList li label::after { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; } .selectList li a:focus, .selectList li a:hover, .selectList li a:active, .selectList li input:focus ~ label, .selectList li label:hover, .selectList li label:active { color:#1a3ac5; } .selectList li input:focus ~ label { outline:1px dashed #044bbf; } .selectList li input:focus ~ label::after, .selectList li label:hover::after, .selectList li label:active::after { width:100%; background:#1a3ac5; transition:all .2s; } .selectList.top { top:auto; bottom:3.5em; } .selectList.top::before { top:auto; bottom:-.625em; transform:rotate(180deg); } /* searchStyle */ .searchTab { width:15.875em; margin-left:.9375em; } .searchTab.style2 { width:35.75em; } .searchTab ul { display:flex; height:100%; } .searchTab ul li { flex:1; } .searchTab ul li button { width:100%; height:3.647em; font-size:var(--font-txtA); word-break:keep-all; line-height:1.2; border:1px solid #dcdcdc; border-left:none; box-sizing:border-box; transition:.15s; } .searchTab ul li:first-child button { border-left:1px solid #dcdcdc; } .searchTab ul li.active button { font-weight:700; color:#fff; background:#044bbf; border-color:#044bbf; } .searchTab ul li.active button:focus { outline:2px dashed #000; } .searchWrap { margin:0 1.25em; } .searchWrap .inner { display:flex; max-width:1200px; margin:0 auto 2.35294em; } .searchWrap .searchInner { flex-grow:1; display:flex; position:relative; padding-right:5.875rem; border:1px solid #dcdcdc; box-sizing:border-box; font-size:var(--font-txtA); font-weight:500; letter-spacing:-.05em; } .searchWrap .searchInner>div { position:relative; } .searchWrap .searchInner>div::before { content:''; display:block; position:absolute; top:50%; left:-1px; width:1px; height:1.6875em; margin-top:-.84375em; background:#e1e1e1; } .searchWrap .searchInner>div:first-child::before, .searchWrap .searchInner .btnFilter::before { display:none; } .searchWrap .selectItem { display:flex; flex-grow:0; flex-shrink:0; align-items:center; } .searchWrap .selectItem .buttonSelect { position:relative; min-width:10em; } .searchWrap .selectItem .buttonSelect button { height:3.5294em; padding:0 2.35294em 0 1.17647em; } .searchWrap .selectItem .buttonSelect button:focus { outline:2px dashed #000; } .searchWrap .selectItem .buttonSelect button::after { right:1.17647em; } .searchWrap .inputItem { flex-grow:1; flex-shrink:1; padding:0 1.17647em; } .searchWrap .inputItem input { width:100%; height:3.5294em; border:none; } .searchWrap .dateItem { min-width:8em; padding:0 1.17647em; box-sizing:border-box; } .searchWrap .dateItem input { width:100%; height:3.5294em; border:none; } .searchWrap .btnFilter { position:absolute !important; top:0; right:0; width:5.875rem; height:100%; text-align:center; } .searchWrap .btnFilter button { overflow:hidden; display:block; position:relative; width:100%; height:100%; border-left:1px solid #e1e1e1; transition:all .15s; } .searchWrap .btnFilter button span { display:inline-block; padding-left:1.4117em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='22'%3E%3Cpath fill='%23044bbf' d='M20.513,19.658 L18.820,21.169 L13.284,15.522 C11.921,16.450 10.276,16.994 8.502,16.994 C3.806,16.994 -0.001,13.188 -0.001,8.496 C-0.001,3.802 3.806,-0.003 8.502,-0.003 C13.198,-0.003 17.006,3.802 17.006,8.496 C17.006,10.599 16.237,12.520 14.970,14.004 L20.513,19.658 ZM8.502,2.279 C5.066,2.279 2.280,5.063 2.280,8.497 C2.280,11.930 5.066,14.714 8.502,14.714 C11.937,14.714 14.723,11.930 14.723,8.497 C14.723,5.063 11.937,2.279 8.502,2.279 Z'/%3E%3C/svg%3E") left center no-repeat; background-size:1.0588em auto; line-height:1.5; color:#044bbf; font-weight:700; transition:all .15s; } .searchWrap .btnFilter button:focus, .searchWrap .btnFilter button:hover { background:#1a3ac5; } .searchWrap .btnFilter button:focus { outline:2px dashed #000; } .searchWrap .btnFilter button:focus span, .searchWrap .btnFilter button:hover span { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='22'%3E%3Cpath fill='%23fff' d='M20.513,19.658 L18.820,21.169 L13.284,15.522 C11.921,16.450 10.276,16.994 8.502,16.994 C3.806,16.994 -0.001,13.188 -0.001,8.496 C-0.001,3.802 3.806,-0.003 8.502,-0.003 C13.198,-0.003 17.006,3.802 17.006,8.496 C17.006,10.599 16.237,12.520 14.970,14.004 L20.513,19.658 ZM8.502,2.279 C5.066,2.279 2.280,5.063 2.280,8.497 C2.280,11.930 5.066,14.714 8.502,14.714 C11.937,14.714 14.723,11.930 14.723,8.497 C14.723,5.063 11.937,2.279 8.502,2.279 Z'/%3E%3C/svg%3E"); color:#fff; } /* Board Style */ i.file { background-image:url(../images/sub/icon_file.png); } i.ai { background-image:url(../images/sub/icon_file_ai.png); } i.hwp, i.hwpx { background-image:url(../images/sub/icon_file_hwp.png); } i.pdf { background-image:url(../images/sub/icon_file_pdf.png); } i.txt { background-image:url(../images/sub/icon_file_txt.png); } i.doc { background-image:url(../images/sub/icon_file_doc.png); } i.xls, i.xlsx { background-image:url(../images/sub/icon_file_xls.png); } i.ppt, i.pptx { background-image:url(../images/sub/icon_file_ppt.png); } i.zip { background-image:url(../images/sub/icon_file_zip.png); } i.eps { background-image:url(../images/sub/icon_file_eps.png); } i.fi { background-image:url(../images/sub/icon_file_fi.png); } i.jpg { background-image:url(../images/sub/icon_file_jpg.png); } i.gif { background-image:url(../images/sub/icon_file_gif.png); } i.id { background-image:url(../images/sub/icon_file_id.png); } .boardStyle { /* overflow:hidden; */ max-width:1200px; margin:0 auto; padding:0 1.25em; } .boardStyle::after { content:''; display:block; clear:both; } /* board List */ .boardCount { display:inline-block; margin-bottom:.9375rem; font-size:var(--font-txtC); color:#454545; } .boardCount b { font-weight:500; color:#0061ce; } .boardList { width:100%; } .boardList table { width:100%; table-layout:fixed; text-align:center; } .boardList thead { border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; } .boardList tbody tr { border-bottom:1px solid #dcdcdc; } .boardList tbody tr:hover { background-color:#fafafa; } .boardList .subject { width:auto; } .boardList .num, .boardList .hits { width:6.25em; } .boardList .writer { width:10em; } .boardList .file, .boardList .status { width:7em; } .boardList .date { width:10em; } .boardList .period { width:13em; } .boardList .state, .galleryList .state { display:inline-block; width:5.25rem; line-height:2.125rem; font-style:normal; font-size:var(--font-txtA); font-weight:500; color:#fff; text-align:center; border-radius:3em; } .boardList .state.col1, .galleryList .state.col1 { background:#dd2f79; } .boardList .state.col2, .galleryList .state.col2 { background:#0061ce; } .boardList .state.col3, .galleryList .state.col3 { background:#848484; } .boardList th, .boardList td { vertical-align:middle; box-sizing:border-box; line-height:1.5; text-align:center; color:#373737; letter-spacing:-.025em; } .boardList th { padding:1em .5em; font-weight:400; color:#6b6b6b; } .boardList td { padding:1.125em .5em; } .boardList th.subject { padding:1em 1.875em; } .boardList td.subject { padding:1.125em 1.875em; text-align:left; } .boardList td.subject a { overflow:hidden; display:block; font-size:var(--font-tabA); font-weight:500; white-space:nowrap; text-overflow:ellipsis; } .boardList td .new { display:inline-block; vertical-align:middle; width:2.625rem; height:1.1875rem; margin:-.125rem .5rem 0 0; background-image:url(../images/sub/ico_new.png); background-repeat:no-repeat; background-position:center; background-size:100%; text-indent:-9999px; } .boardList td .icoStatus { display:inline-block; width:3.77777em; margin:-1em 0; line-height:1.44444em; padding:.5em; background:#f00; border-radius:.25em; text-align:center; color:#fff; font-size:var(--font-tabA); } .boardList td .icoStatus.ing { background:#238aaf; } .boardList td .icoStatus.finish { background:#4e4e4e; } .boardList td .fileIcon { overflow:hidden; display:inline-block; width:100%; height:1.75rem; background-position:center; background-repeat:no-repeat; background-size:contain; vertical-align:top; color:transparent; } .noData { padding:5em 0; border-bottom:1px solid #dcdcdc; text-align:center; font-size:var(--font-tabA); } /* board List - btn */ .boardBtn { margin-top:2em; text-align:right; } .writeBtn { margin:2em 0; text-align:center; } .boardBtn.center { text-align:center; } .boardBtn p, .boardBtn ul li, .writeBtn ul li { display:inline-block; } .boardBtn a, .boardBtn input, .boardBtn button { display:block; margin:0 .0882em; padding:0 1.4705em; border:1px solid #dcdcdc; box-sizing:border-box; font-size:var(--font-txtA); line-height:3.0588em; letter-spacing:-.05em; color:#000; transition:all .15s; } .boardBtn a:focus, .boardBtn a:hover, .boardBtn input:focus, .boardBtn input:hover, .boardBtn button:focus, .boardBtn button:hover { background-color:#1a3ac5; border-color:#1a3ac5; color:#fff; } .boardBtn a:focus, .boardBtn input:focus, .boardBtn button:focus { outline:2px dashed #000; } .boardBtn i { display:inline-block; width:1.25em; height:1.125em; margin-right:.1875em; background-image:url(../images/sub/bg_board_btn.png); background-repeat:no-repeat; background-size:100% auto; vertical-align:middle; font-size:var(--font-txtB); } .boardBtn a:focus i, .boardBtn a:hover i, .boardBtn input:focus i, .boardBtn input:hover i, .boardBtn button:focus i, .boardBtn button:hover i { background-image:url(../images/sub/bg_board_btn_on.png); } .boardBtn i.list { background-position:0 -14.1875em; } .boardBtn i.write { background-position:0 -3.625em; } .boardBtn i.cancle { background-position:0 -7.1875em; } .boardBtn i.delete { background-position:0 -10.625em; } .boardBtn i.modify { background-position:0 -1.3125em; } .boardBtn i.next { margin-top:-.125em; background-image:url(../images/sub/bg_board_btn_next.png); background-position:center; } .boardBtn a:focus i.next, .boardBtn a:hover i.next { background-image:url(../images/sub/bg_board_btn_next_on.png); } .writeBtn input, .writeBtn button, .writeBtn a { display:block; min-width:11.111em; height:2.666em; line-height:2.666em; padding:0 .5em; background:#301cad; border-radius:1.333em; color:#fff; text-align:center; font-size:var(--font-tabA); } /* pageNav */ .pageNav { margin-top:3em; } .pageNav ul { display:flex; justify-content:center; align-items:center; } .pageNav ul li { font-size:var(--font-txtA); color:#737373; letter-spacing:-.05em; } .pageNav ul li a, .pageNav .pcVer span, .pageNav ul li strong { display:block; padding:0 .375rem; } .pageNav ul li a { position:relative; box-sizing:border-box; color:currentColor; font-weight:400; } .pageNav .pcVer span::before { content:'...'; display:inline-block; margin-right:.5em; } .pageNav .pcVer strong { color:#044bbf; font-weight:500; text-decoration:underline; } .pageNav ul li.pageBtn a { overflow:hidden; width:2.375rem; height:2.375rem; margin:0 .125em; padding:0; background-image:url(../images/sub/btn_page_prev.png); background-position:center; background-repeat:no-repeat; background-size:auto .75em; border:1px solid #e3e3e3; border-radius:50%; text-indent:-999px; } .pageNav ul li.next a { transform:rotate(180deg); } .pageNav ul li.first a { background-image:url(../images/sub/btn_page_first.png); } .pageNav ul li.last a { background-image:url(../images/sub/btn_page_first.png); transform:rotate(180deg); } .pageNav ul li.pageBtn a:hover { border-color:#000; } .pageNav ul li.pageBtn a:focus { outline:2px dashed #000; } .pageNav .mVer { display:none; } .pageNav .mVer li.index { display:inline-block; color:#c4c4c4; white-space:nowrap; } .pageNav .mVer li strong { display:inline-block; margin-right:.5em; padding:0 .125rem; border-bottom:1px solid currentColor; font-weight:300; color:#4a37d8; } .pageNav .mVer li span { display:inline-block; margin-left:.5em; color:#535353; } .pageNav .mVer li.first a, .pageNav .mVer li.last a, .pageNav .mVer li.prev a, .pageNav .mVer li.next a { overflow:hidden; display:block; min-width:2.5em; height:2.5em; line-height:2.5em; background-size:auto 1rem; border:1px solid #dcdcdc; color:#444; } /* galleryList */ .galleryList { display:flex; flex-wrap:wrap; margin:0 -.75em; } .galleryList .state { margin-right:.5rem; } .galleryList li { flex-grow:0; flex-shrink:0; width:33.33%; margin-bottom:1.125em; padding:.75em; box-sizing:border-box; vertical-align:top; } .galleryList a, .galleryList button { overflow:hidden; display:block; width:100%; height:auto; padding:1.125em; border:1px solid #dcdcdc; border-radius:.5em; transition:all .15s; text-align:left; box-sizing:border-box; } .galleryList li a:focus, .galleryList li a:hover, .galleryList button:focus, .galleryList button:hover { border-color:#0061ce; box-shadow:0 14px 18px 0 rgba(0, 0, 0, 0.1); } .galleryList a span, .galleryList button span { display:block; } .galleryList a span.img, .galleryList button span.img { overflow:hidden; position:relative; width:100%; height:15.25em; background:#ddd; background-size:contain; border-radius:.25em; } .galleryList a span.img img, .galleryList button span.img img { width:100%; height:100%; } .galleryList a span.txt, .galleryList button span.txt { padding:1.625em 0 .75em; color:#000; letter-spacing:-.025em; } .galleryList a span.txt strong, .galleryList button span.txt strong { overflow:hidden; display:block; margin-bottom:.75em; font-size:var(--font-titC); white-space:nowrap; text-overflow:ellipsis; } .galleryList a span.txt span, .galleryList button span.txt span { overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; color:#232323; } .galleryList a span.txt time, .galleryList button span.txt time { display:block; } .galleryList.cardnews a span.img { height:21.625em; } .galleryList.video a span.img::before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .4); } .galleryList.video a span.img::after { content:''; position:absolute; left:50%; top:50%; width:3.125em; height:3.125em; margin:-1.5625em 0 0 -1.5625em; background:url(../images/sub/icon_player.svg) center no-repeat; background-size:contain; } .galleryList.sell { margin:0 -.25em; } .galleryList.sell li { width:25%; padding:.25em; } .galleryList.sell button span.img { height:14em; } .telArea { padding:1.25em; } .telArea dl { display:flex; justify-content:center; align-items:center; max-width:415px; margin:0 auto; padding:1em; border:1px solid; color:#3099bf; font-size:var(--font-titC); font-weight:500; } .telArea dl dt { position:relative; margin-right:1.4em; padding:0 1.4em 0 2.5em; background:url(../images/sub/icon_tel3.png) left center no-repeat; line-height:2em; } .telArea dl dt::after { content:''; position:absolute; right:0; top:50%; width:1px; height:.875em; margin-top:-.4375em; background:#b0d4e3; } /* board view */ .viewTit { display:flex; align-items:center; justify-content:space-between; width:100%; padding:1em 1.875em; border:1px solid #dcdcdc; border-width:1px 0; box-sizing:border-box; } .viewTit h4 { font-size:var(--font-titC); font-weight:500; letter-spacing:-.025em; line-height:1.3; } .viewTit .period { display:block; margin-top:.5rem; font-size:var(--font-tabA); font-weight:400; color:#0045d2; } .viewTit .viewInfo { display:flex; align-items:center; } .viewTit .viewInfo li { position:relative; padding:0 .8em; font-size:var(--font-txtC); color:#505050; letter-spacing:-.025em; } .viewTit .viewInfo li:first-child { padding-left:0; } .viewTit .viewInfo li:last-child { padding-right:0; } .viewTit .viewInfo li::before { content:''; display:block; position:absolute; top:50%; left:0; width:1px; height:1em; margin-top:-.5em; background:#dfdfdf; } .viewTit .viewInfo li:first-child::before { display:none; } .viewTit .viewInfo li span { display:inline-block; margin-left:.5em; } .viewTit .icoStatus { display:inline-block; vertical-align:middle; margin:-.125em .25em 0 0; padding:.375em .9375em; font-size:var(--font-txtB); border:1px solid; border-radius:2em; line-height:1; } .viewTit .icoStatus.bg1 { border-color:#00813c; color:#00813c; } .viewTit .icoStatus.bg2 { border-color:#6b6b6b; color:#6b6b6b; } .viewContent { padding-top:3.375em; border-bottom:1px solid #dcdcdc; word-break:keep-all; } .viewContent pre { margin:0; padding:0; background:transparent; } .viewContent .viewContentInner { overflow:hidden; width:100%; margin:0 0 3.375em; padding:0 1.875em; white-space:normal; font-family:inherit; word-wrap:break-word; line-height:1.4; box-sizing:border-box; } .viewContent .viewContentInner .borderInnerLayout { padding:0; } .viewContent .viewContentInner .borderInnerLayout ul { margin-bottom:0; } .viewContent .viewContentInner .borderInnerLayout table { width:100%; } .viewContent .viewContentInner .borderInnerLayout table tfoot { display:table-row-group; } .viewContent .viewContentInner .borderInnerLayout table tbody { display:table-footer-group; } .viewContent .viewContentInner .borderInnerLayout table th, .viewContent .viewContentInner .borderInnerLayout table td { padding:.5rem 1rem; } .viewContent .viewContentInner .img { text-align:center; } .viewContent .viewContentInner .img .report { max-width:926px; margin-bottom:2em; border:1px solid #c2c2c2; } .viewContent .viewContentInner .videoWrap { display:flex; flex-direction:column; gap:1rem; } .viewContent .viewContentInner .videoWrap iframe { max-width:100%; } .viewContent .viewContentInner .videoWrap .ccBox { border:1px solid #d2d2d2; } .viewContent .viewContentInner .videoWrap .ccBox .tit { padding:.5em; border-bottom:1px solid #d2d2d2; text-align:center; font-size:1.25rem; } .viewContent .viewContentInner .videoWrap .subtitle { padding:1em; max-height:20em; white-space:pre-line; overflow-y:auto; } /* board view - edu */ .eduView .conTxt li { position:relative; padding-left:.875rem; font-size:var(--font-tabA); font-weight:700; color:#232323; } .eduView .conTxt li::before { content:'·'; position:absolute; top:0; left:0; } .eduView .instructor { display:flex; margin-top:1.875em; border:1px solid #d2d2d2; box-sizing:border-box; } .eduView .instructor .thumb { overflow:hidden; flex-shrink:0; position:relative; width:14.375em; height:13.75em; } .eduView .instructor .thumb img { width:100%; height:100%; object-position:top; } .eduView .instructor .infoBox { flex-grow:1; padding:2.125em 2.5em; border-left:1px solid #d2d2d2; } .eduView .instructor .infoBox dl dt { font-size:var(--font-titD); color:#232323; letter-spacing:-.025em; } .eduView .instructor .infoBox dl dt span { border-bottom:2px solid #0061ce; } .eduView .instructor .infoBox dl dd { margin-top:1.125em; } .eduView .instructor .infoBox dl dd ul li { position:relative; padding-left:.75rem; font-size:var(--font-tabA); color:#232323; letter-spacing:-.025em; } .eduView .instructor .infoBox dl dd ul li::before { content:'-'; position:absolute; top:0; left:0; } .eduView .eduList { margin-top:1.25em; } .eduView .eduList li { position:relative; margin-top:.625rem; padding-right:13.5rem; font-size:var(--font-tabA); line-height:3.1111em; letter-spacing:-.025em; } .eduView .eduList li .name { overflow:hidden; padding:0 1.25rem; color:#232323; white-space:nowrap; text-overflow:ellipsis; border:1px solid #d2d2d2; border-right:none; } .eduView .eduList li .link { position:absolute; top:0; right:0; width:13.5rem; } .eduView .eduList li .link a { display:block; text-align:center; border:1px solid #0061ce; } .eduView .eduList li .link span { display:inline-block; padding-right:3.4444em; color:#004b9f; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16px' height='12px'%3E%3Cpath fill-rule='evenodd' fill='rgb(0, 75, 159)' d='M13.656,7.413 L13.656,7.413 L9.999,11.070 L8.585,9.656 L11.241,7.000 L-0.000,7.000 L-0.000,5.000 L11.243,5.000 L8.585,2.342 L9.999,0.928 L15.070,5.999 L13.656,7.413 Z'/%3E%3C/svg%3E") no-repeat right center; background-size:1rem auto; } /* board view - survey */ .surveyView .item { border:1px solid #d4d4d9; border-top:none; box-sizing:border-box; } .surveyView .item:first-child { border-top:1px solid #d4d4d9; } .surveyView .item .que { padding:1.125em 1.375em; background:#f7f7f9; } .surveyView .item .que p { font-size:1.063em; letter-spacing:-.025em; color:#1c1c1c; } .surveyView .item .que p b { margin-right:.25rem; } .surveyView .item .ans { padding:.875em 1.375em; border-top:1px solid #d4d4d9; } .surveyView .item .ans .checkList li, .surveyView .item .ans .radioList li { width:50%; margin:.25em 0; box-sizing:border-box; } .surveyView .item .ans .editor { height:5.625em; box-sizing:border-box; } .surveyView .item .ans .editor textarea { width:100%; height:100%; padding:.25rem 0; resize:none; font-size:var(--font-txtA); border:none; } .surveyView .item .ans .editor textarea::-webkit-scrollbar { display:none; } .surveyView .item .ans .editor textarea::placeholder { color:#cecece; } .surveyView .item .ans .editor textarea:focus { border-color:#000; } .surveyView .btnSurvey { margin-top:3.75em; text-align:center; } .surveyView .btnSurvey button { width:17.25em; background:#0061ce; } .surveyView .btnSurvey button span { display:inline-block; line-height:3.625rem; padding-right:9.75rem; font-size:var(--font-tabA); color:#fff; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16px' height='12px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M13.656,7.413 L13.656,7.413 L9.999,11.070 L8.585,9.656 L11.241,7.000 L-0.000,7.000 L-0.000,5.000 L11.243,5.000 L8.585,2.342 L9.999,0.928 L15.070,5.999 L13.656,7.413 Z'/%3E%3C/svg%3E") no-repeat right center; background-size:1rem auto; } /* board view - file */ .boardFile { overflow:hidden; padding:.9375em 2.1875em .9375em 1.5625em; border-top:1px solid #dcdcdc; box-sizing:border-box; } .boardFile h5 { float:left; position:relative; width:5.2em; margin-top:.4666em; padding-left:.5333em; font-size:var(--font-txtC); font-weight:400; color:#656565; box-sizing:border-box; } .boardFile h5::before { content:''; position:absolute; left:0; top:50%; width:.1333em; height:.1333em; margin-top:-.0666em; background:#656565; } .boardFile h5::after { content:''; position:absolute; right:0; top:50%; width:1px; height:1.9333em; margin-top:-.9666em; background:#e1e1e1; } .boardFile ul { margin-left:6.0625em; } .boardFile ul li { overflow:hidden; position:relative; display:flex; align-items:center; padding:.1875em 6.25em .1875em 0; box-sizing:border-box; } .boardFile ul li i { display:inline-block; width:1.4375em; height:1.75em; background-repeat:no-repeat; background-position:center; background-size:100%; text-indent:-9999px; } .boardFile ul li span.fileName { overflow:hidden; display:block; margin-left:.25em; font-size:var(--font-txtC); white-space:nowrap; text-overflow:ellipsis; } .boardFile ul li .btn { display:block; position:absolute; top:50%; right:0; margin-top:-.6em; padding-left:1.5333em; background:url(../images/sub/icon_down.png) no-repeat left .125em; background-size:.9375rem auto; font-size:var(--font-txtB); color:#656565; line-height:1.2em; } .fileBox { letter-spacing:-.025em; } .fileBox .tit { color:#19296c; font-size:var(--font-txtA); font-weight:600; } .fileBox .boxList { display:flex; justify-content:space-around; flex-wrap:wrap; gap:1em; } .viewContent .fileBox .boxList { margin-top:1em; flex-direction:column; gap:.25em; } .fileBox .boxList>li { flex:1 1 calc(50% - 1em); width:100%; display:flex; justify-content:space-between; border:1px solid #dcdcdc; box-sizing:border-box; } .fileBox .boxList>li.showHide { display:none; } .fileBox .boxList>li.btnGo { max-width:none; margin:0; border:none; } .fileBox .boxList>li.btnGo a { width:100%; } .fileBox .boxList>li.downTxt { border:none; } .fileBox .boxList>li.downTxt .fileName { padding:0; } .fileBox .fileName { overflow:hidden; flex:1; display:flex; height:3.75em; padding:0 1em; align-items:center; box-sizing:border-box; } .fileBox .fileName span { overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis; font-size:var(--font-txtA); } .fileBox .fileControl { display:flex; justify-content:space-around; } .fileBox .fileControl li { flex:1; border-left:1px solid #dcdcdc; } .fileBox .fileControl a, .fileBox .fileControl button { display:flex; width:5em; height:3.75em; justify-content:center; align-items:center; flex-direction:column; color:#171717; } .fileBox .fileControl a:hover, .fileBox .fileControl a:focus, .fileBox .fileControl button:hover, .fileBox .fileControl button:focus { background:#0061ce !important; color:#fff; } .fileBox .fileControl a:focus, .fileBox .fileControl button:focus { outline:2px dashed #000; } .fileBox .fileControl .iconResult { margin:-1px -1px -1px 0; border:1px solid #accaeb; } .fileBox .fileControl .iconResult button { background:#e2f0ff; font-weight:500; } .fileBox .fileControl i { display:block; width:100%; height:1.0625rem; margin-bottom:.41176em; background:center top no-repeat; background-size:auto 100%; } .fileBox .fileControl .download i { background-image:url(../images/sub/icon_file_down.png); } .fileBox .fileControl .quickView i { background-image:url(../images/sub/icon_file_view.png); } .fileBox .fileControl .quickListen i { background-image:url(../images/sub/icon_file_listen.png); } .fileBox .fileControl .iconWrite i { background-image:url(../images/sub/icon_file_write.png)} .fileBox .fileControl .iconCheck i { background-image:url(../images/sub/icon_file_check.png)} .fileBox .fileControl .iconResult i { background-image:url(../images/sub/icon_file_result.png)} .fileBox .fileControl .download a:hover i, .fileBox .fileControl .download a:focus i { background-image:url(../images/sub/icon_file_down_on.png); } .fileBox .fileControl .quickView a:hover i, .fileBox .fileControl .quickView a:focus i, .fileBox .fileControl .quickView button:hover i, .fileBox .fileControl .quickView button:focus i { background-image:url(../images/sub/icon_file_view_on.png); } .fileBox .fileControl .quickListen a:hover i, .fileBox .fileControl .quickListen a:focus i { background-image:url(../images/sub/icon_file_listen_on.png); } .fileBox .fileControl .iconWrite a:hover i, .fileBox .fileControl .iconWrite a:focus i { background-image:url(../images/sub/icon_file_write_on.png); } .fileBox .fileControl .iconCheck a:hover i, .fileBox .fileControl .iconCheck a:focus i { background-image:url(../images/sub/icon_file_check_on.png); } .fileBox .fileControl .iconResult a:hover i, .fileBox .fileControl .iconResult a:focus i, .fileBox .fileControl .iconResult button:hover i, .fileBox .fileControl .iconResult button:focus i { background-image:url(../images/sub/icon_file_result_on.png); } .fileBox .fileControl span { display:block; font-size:var(--font-txtB); } .fileBox .buttonSelect { width:100%; } .fileBox .buttonSelect button { height:3.75rem; padding:0 2.25rem 0 1rem; font-size:var(--font-txtA); } .fileBox .buttonSelect button::after { right:1rem; } /* board view - comment */ .commentWrap { margin-top:4.375em; } .commentForm { display:flex; position:relative; } .commentForm .writeBox { flex-grow:1; position:relative; padding:1.875em; border:1px solid #dcdcdc; border-right:none; border-radius:.5rem 0 0 .5rem; } .commentForm .writeBox .name { font-size:var(--font-tabA); } .commentForm .writeBox textarea { width:100%; margin-top:.7647em; height:4em; border:none; box-sizing:border-box; font-size:var(--font-txtA); resize:none; } .commentForm .writeBox textarea::-webkit-scrollbar { display:none; } .commentForm .writeBox textarea::placeholder { color:#cecece; } .commentForm .writeBox .txtCount { position:absolute; bottom:1.875em; right:1.875em; font-size:var(--font-txtC); font-weight:300; color:#7c7c7c; } .commentForm .btn { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:7.6865%; border:1px solid #dcdcdc; border-radius:0 .5rem .5rem 0; cursor:pointer; transition:all .15s; } .commentForm .btn i {display:inline-block;width: 1.25em;height: 1.125em;margin-right: .3125em;background-image:url(../images/board/bg_board_btn.png);background-repeat:no-repeat;background-size:100% auto;vertical-align: middle;font-size:var(--font-txtB);background-position: 0 -3.625rem;} .commentForm .btn input {font-size:var(--font-txtA);font-weight: 500;} .commentForm .btn:focus, .commentForm .btn:hover {background:#1a3ac5;} .commentForm .btn:focus i, .commentForm .btn:hover i {background-image:url(../images/board/bg_board_btn_on.png);} .commentForm .btn:focus input, .commentForm .btn:hover input { color:#fff;} .commentList {position:relative;margin-top: 4.375em;} .commentList .count {padding: 0 1.6666em 1em;font-size:var(--font-tabA);color: #808280;border-bottom: 1px solid #dcdcdc;} .commentList .count em { color:#1a3ac3; } .commentList .tableInfo {position:absolute; top:.1875rem; right:1.875rem; margin:0; } .commentList .item {padding: 1.875em;border-bottom: 1px solid #dcdcdc;} .commentList .item .titArea {display: flex;justify-content: space-between;align-items: center;} .commentList .item .titArea .tit .name {display: inline-block;vertical-align: middle;padding-left: 1.2941em;font-size:var(--font-txtA);background: url(../images/board/icon_writer.png) no-repeat left center;background-size: auto 1em;} .commentList .item .titArea .tit .date {display: inline-block;vertical-align: middle;position: relative;margin-left: .7333em;padding-left: .7333em;font-size:var(--font-txtC);font-weight: 300;color: #6b6b6b;} .commentList .item .titArea .tit .date::before {content:'';display:block;position:absolute;top: .1333em;left:0;width:1px;height:.8em;background: #bebebe;} .commentList .item .titArea .btn {display: flex;align-items: center;justify-content: center;transition: all .15s;} .commentList .item .titArea .btn li i {display:inline-block;margin: -.125em .4375em 0 0;background-repeat:no-repeat;background-size: 100%;vertical-align: middle;font-size:var(--font-txtB);} .commentList .item .titArea .btn li i.delete {width: .9375em;height: .875em;background-image:url(../images/board/btn_comment_delete.png);} .commentList .item .titArea .btn li i.reply {width: .6875em;height: .8125em;background-image:url(../images/board/btn_comment_reply.png);} .commentList .item .titArea .btn li i.modify {width: .875em;height: .875em;background-image:url(../images/board/btn_comment_modify.png);} .commentList .item .titArea .btn li { margin-left:1.5em;} .commentList .item .titArea .btn li button {font-size:var(--font-txtA);color: #6b6b6b;} .commentList .item .txtArea {margin-top: 1.25em;} .commentList .item .txtArea pre {white-space:pre-wrap;font-size:var(--font-txtA);line-height: 1.3;} .commentList .item.reply { padding-left:5.125em; background-image:url(../images/board/bg_comment_reply.png); background-repeat:no-repeat; background-position:1.875em center; background-size:1.375em auto; } /* board view - ctrl */ .viewCtrl { display:flex; justify-content:space-between; align-items:center; margin-top:4.375em; } .viewCtrl .ctrlBtn { width:40%; } .viewCtrl .prevList { order:1; } .viewCtrl .boardBtn { order:2; } .viewCtrl .nextList { order:3; } .viewCtrl .ctrlBtn a { display:flex; align-items:center; gap:.8125em; } .viewCtrl .nextList a { flex-direction:row-reverse; } .viewCtrl .ctrlBtn i { flex-grow:0; flex-shrink:0; width:2.5em; height:2.5em; background-image:url(../images/sub/arrow_page.png); background-position:center; background-repeat:no-repeat; background-size:1.125em auto; border:1px solid #dcdcdc; border-radius:50%; box-sizing:border-box; text-indent:-9999px; transition:all .15s; } .viewCtrl .nextList i { transform:rotate(180deg); } .viewCtrl .ctrlBtn a:focus i, .viewCtrl .ctrlBtn a:hover i { background-color:#1a3ac5; border-color:#1a3ac5; } .viewCtrl .ctrlBtn a:focus i, .viewCtrl .ctrlBtn a:hover i { background-image:url(../images/sub/arrow_page_on.png); } .viewCtrl .ctrlBtn span { overflow:hidden; position:relative; white-space:nowrap; padding:1px 0; font-size:var(--font-txtA); color:#737373; letter-spacing:-.05em; text-overflow:ellipsis; } .viewCtrl .ctrlBtn span::after { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; } .viewCtrl .ctrlBtn a:focus span::after, .viewCtrl .ctrlBtn a:hover span::after { width:100%; background:#1a3ac5; transition:all .2s; } .viewCtrl .ctrlBtn a:focus span, .viewCtrl .ctrlBtn a:hover span { color:#1a3ac5; } .viewCtrl .boardBtn { margin-top:0; } /* board write */ .dateWrap { position:relative; } input[type="date"] { position:relative; cursor:pointer;} input[type="date"]:focus { border:2px dashed #f00; } input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button { display:none; } input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; top:0; right:0; width:3em; height:100%; background-position:center; background-size:1em auto; box-sizing:border-box; } .checkList, .radioList { display:flex; flex-wrap:wrap; } .checkList li, .radioList li { overflow:hidden; position:relative; padding:1px; } .checkList li input[type="checkbox"], .radioList li input[type="radio"] { overflow:hidden; position:absolute; left:0; top:0; width:1px; height:1px; margin-left:-9999px; } .checkList li input[type="checkbox"] + label, .radioList li input[type="radio"] + label { display:block; position:relative; margin-right:1.7647em; padding-left:1.7647em; font-size:var(--font-txtA); cursor:pointer; line-height:1.3; } .checkList li input[type="checkbox"]:focus + label, .radioList li input[type="radio"]:focus + label { outline:2px dashed; } .checkList li input[type="checkbox"] + label::before, .radioList li input[type="radio"] + label::before { content:''; display:block; position:absolute; top:.0625rem; left:0; width:1.25rem; height:1.25rem; border:1px solid #7e7e7e; border-radius:50%; box-sizing:border-box; transition:border .15s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='7px'%3E%3Cpath fill-rule='evenodd' fill='rgb(126, 126, 126)' d='M11.014,1.078 L5.525,6.567 C5.396,6.696 5.210,6.729 5.048,6.672 C4.887,6.729 4.701,6.696 4.572,6.567 L0.919,2.914 L1.716,2.116 L5.048,5.449 L10.217,0.280 C10.396,0.101 10.687,0.101 10.866,0.280 L11.014,0.429 C11.194,0.608 11.194,0.899 11.014,1.078 Z'/%3E%3C/svg%3E") no-repeat center; background-size:.75rem auto; } .checkList li input[type="checkbox"] + label::before { border-radius:0; } .checkList li input[type="checkbox"]:checked + label::before { border-color:#1a3ac5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='7px'%3E%3Cpath fill-rule='evenodd' fill='rgb(4, 75, 191)' d='M11.014,1.078 L5.525,6.567 C5.396,6.696 5.210,6.729 5.048,6.672 C4.887,6.729 4.701,6.696 4.572,6.567 L0.919,2.914 L1.716,2.116 L5.048,5.449 L10.217,0.280 C10.396,0.101 10.687,0.101 10.866,0.280 L11.014,0.429 C11.194,0.608 11.194,0.899 11.014,1.078 Z'/%3E%3C/svg%3E"); } .radioList li input[type="radio"] + label::before { background-image:none; } .radioList li input[type="radio"]:checked + label::before { border-color:#1a3ac5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='8px'%3E%3Cpath fill-rule='evenodd' fill='rgb(0, 62, 203)' d='M4.000,-0.001 C6.209,-0.001 8.000,1.790 8.000,4.000 C8.000,6.209 6.209,8.000 4.000,8.000 C1.791,8.000 -0.000,6.209 -0.000,4.000 C-0.000,1.790 1.791,-0.001 4.000,-0.001 Z'/%3E%3C/svg%3E"); background-size:.5rem; } .writeTbl { width:100%; table-layout:fixed; border-bottom:1px solid #dcdcdc; } .writeTbl th { width:12.0588em; padding:1.75rem 1.875rem; border:1px solid #dcdcdc; border-width:1px 0; font-size:var(--font-txtA); font-weight:400; vertical-align:top; text-align:left; color:#6a6a6a; box-sizing:border-box; } .writeTbl td { padding:.875em 1.875em; border:1px solid #dcdcdc; border-width:1px 0; vertical-align:middle; } .writeTbl td.pd { padding:.875em 0; } .writeTbl td input[type="text"] { width:100%; height:3rem; padding:0 .9375rem; font-size:var(--font-txtA); border:1px solid #dcdcdc; border-radius:.25rem; box-sizing:border-box; transition:all .15s; } .writeTbl td input[type="text"]::placeholder { color:#cecece; } .writeTbl td input[type="text"]:focus { border-color:#000; } .writeTbl td input[type="text"].text { width:26.875rem; } .writeTbl td .editor { height:16.625em; box-sizing:border-box; } .writeTbl td .editor textarea { width:100%; height:100%; padding:.9375rem; border:1px solid #dcdcdc; resize:none; font-size:var(--font-txtA); border-radius:.25rem; transition:all .15s; } .writeTbl td .editor textarea::-webkit-scrollbar { display:none; } .writeTbl td .editor textarea::placeholder { color:#cecece; } .writeTbl td .editor textarea:focus { border-color:#000; } .writeTbl td .groupEmail { display:flex; align-items:center; } .writeTbl td .groupEmail input[type="text"] { width:12.5rem; } .writeTbl td .groupEmail .tilde { margin:0 .4117em; font-size:var(--font-txtA); color:#6a6a6a; } .writeTbl td .groupEmail .domain { display:flex; align-items:center; } .writeTbl td .groupEmail .domain .buttonSelect { margin-left:.625em; } .writeTbl td .groupEmail .domain .buttonSelect button { min-width:11.25rem; height:3rem; padding:0 2.5rem 0 .9375rem; font-size:var(--font-txtA); border:1px solid #dcdcdc; border-radius:.25rem; box-sizing:border-box; } .writeTbl td .groupEmail .domain .buttonSelect button::after { right:.9375rem; } .writeTbl td .groupEmail .domain .selectList { top:2.8125em; } .writeTbl td .groupEmail .domain .selectList.top { top:auto; bottom:100%; margin:0 0 -.125em; } .writeTbl td .groupAddr { position:relative; } .writeTbl td .groupAddr .btnZipcode { display:block; position:absolute; top:0; right:0; width:8em; height:3em; border:1px solid #2544c8; border-radius:.25rem; text-align:center; line-height:2.875em; box-sizing:border-box; } .writeTbl td .groupAddr .btnZipcode span { display:inline-block; font-size:var(--font-txtA); color:#2544c8; } .writeTbl td .groupAddr .addrTxt { display:flex; flex-wrap:wrap; padding-right:8.625em; } .writeTbl td .groupAddr .addrTxt .txt { min-width:auto; margin-right:0; } .writeTbl td .groupAddr .addrTxt .txt:nth-of-type(1) { flex-shrink:0; width:11em; } .writeTbl td .groupAddr .addrTxt .txt:nth-of-type(2) { flex-grow:1; width:auto; margin-left:.625em; } .writeTbl td .groupAddr > input.txt { width:100%; margin-top:0.375em; margin-right:0; } .writeTbl td .dateSel { display:flex; align-items:center; } .writeTbl td .dateSel input[type="date"] { width:14em; height:3rem; padding:0 .9375rem; font-size:var(--font-txtA); border:1px solid #dcdcdc; border-radius:.25rem; box-sizing:border-box; transition:all .15s; } .writeTbl td .dateSel .tilde { margin:0 .5em; } .writeTbl td .tableInfo { float:none; margin-bottom:.5em; font-weight:300; text-align:left; } .writeTbl td .buttonSelect { display:inline-block; min-width:14em; margin-left:.5em; } .writeTbl td .buttonSelect:first-child { margin-left:0; } .writeTbl td .buttonSelect button { height:3rem; padding:0 2.5rem 0 .9375rem; font-size:var(--font-txtA); border:1px solid #dcdcdc; border-radius:.25rem; box-sizing:border-box; } .writeTbl td .buttonSelect button::after { right:.9375rem; } .writeTbl ul.fileList li { overflow:hidden; display:flex; align-items:center; margin-top:.625em; } .writeTbl ul.fileList li:first-child { margin-top:0; } .writeTbl ul.fileList li .fileArea { position:relative; width:77.1028%; } .writeTbl ul.fileList li .fileArea input[type="file"] { position:absolute; left:0; top:0; width:100%; height:3rem; padding:0 1.875rem; font-size:var(--font-txtA); box-sizing:border-box; opacity:0; } .writeTbl ul.fileList li .fileArea span { display:block; } .writeTbl ul.fileList li .fileArea span input { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .writeTbl ul.fileList li .txt { width:77.1028%; padding:.8125em 0.9375em; border:1px solid #dcdcdc; border-radius:.25em; box-sizing:border-box; } .writeTbl ul.fileList li .txt span { font-size:var(--font-txtA); } .writeTbl ul.fileList li .btn { margin-left:.625em; } .writeTbl ul.fileList li .btn .delBtn { position:relative; } .writeTbl ul.fileList li .btn .delBtn input { overflow:hidden; position:absolute; left:-10000px; width:1px; height:1px; } .writeTbl ul.fileList li .btn .delBtn label { display:inline-block; cursor:pointer; position:relative; width:3em; height:3em; border:1px solid #dcdcdc; border-radius:.25em; text-indent:-9999px; box-sizing:border-box; transition:all .15s; } .writeTbl ul.fileList li .btn .delBtn input:focus + label { outline:2px dashed; } .writeTbl ul.fileList li .btn .delBtn label::before, .writeTbl ul.fileList li .btn .delBtn label::after { content:''; position:absolute; left:50%; top:50%; width:1.063em; height:1px; margin-top:-1px; margin-left:-.46875em; background:#000; transform:rotate(45deg); } .writeTbl ul.fileList li .btn .delBtn label::after { transform:rotate(135deg); } .writeTbl ul.fileList li .btn .delBtn input:checked + label { background:#1a3ac5; border-color:#1a3ac5; } .writeTbl ul.fileList li .btn .delBtn input:checked + label::before, .writeTbl ul.fileList li .btn .delBtn input:checked + label::after { background:#fff; } .writeTbl ul.fileList li .btn button { overflow:hidden; position:relative; width:3em; height:3em; border:1px solid #dcdcdc; border-radius:.25em; text-indent:-9999px; box-sizing:border-box; } .writeTbl ul.fileList li .btn .minus:before, .writeTbl ul.fileList li .btn .plus:before, .writeTbl ul.fileList li .btn .plus:after { content:''; position:absolute; left:50%; top:50%; width:.9375em; height:1px; margin-top:-1px; margin-left:-.46875em; background:#000; } .writeTbl ul.fileList li .btn .plus:after { transform:rotate(90deg); } .writeTbl ul.fileList li .btn .download { background-image:url(../images/sub/icon_attach.png); background-repeat:no-repeat; background-position:center; background-size:.9375em auto; } .writeTbl ul.fileList li .label { margin-left:.625em; } .writeTbl ul.fileList li .label label { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:3rem; padding:0 .7647em; font-size:var(--font-txtA); border:1px solid #2544c8; border-radius:0.25rem; box-sizing:border-box; color:#2544c8; cursor:pointer; } .writeTbl ul.fileList li .label label span { padding-left:1.4117em; background-image:url(../images/sub/icon_attach.png); background-repeat:no-repeat; background-position:left center; background-size:.9375rem auto; } #dropDropFileZone { font-size:1rem; background:#fafafa; border:2px dashed #dcdcdc; border-radius:.25rem; box-sizing:border-box; } #dropDropFileZone button { width:100%; padding:1.75rem 0; font-size:var(--font-txtA); color:#bbb; word-break:keep-all; } #dragDropFileList { font-size:1rem; margin-top:.625em; } #dragDropFileList .fileZoneStatusbar { display:flex; justify-content:space-between; position:relative; margin-top:.25em; padding:.25em .625em .25em 1.875em; } #dragDropFileList .fileZoneFileManage { position:absolute; top:50%; left:0; transform:translateY(-50%); } #dragDropFileList .fileZoneFileManage button { display:block; position:relative; width:1.75em; height:1.75em; text-indent:-9999px; } #dragDropFileList .fileZoneFileManage button::before, #dragDropFileList .fileZoneFileManage button::after { content:''; position:absolute; top:50%; left:50%; width:.8125em; height:1px; margin-left:-.375em; background:#333; transform:rotate(45deg); } #dragDropFileList .fileZoneFileManage button::after { transform:rotate(135deg); } #dragDropFileList .fileZoneFilename { overflow:hidden; width:65%; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.025em; } #dragDropFileList .fileInfo { display:flex; align-items:center; } #dragDropFileList .fileZoneFilesize { padding:0 .625em; color:#333; text-align:right; letter-spacing:-.025em; } #dragDropFileList .fileZoneProgressBar { position:relative; width:6.25em; height:1em; background:#f2f2f2; } #dragDropFileList .fileZoneProgressBar div { position:absolute; top:0; left:0; height:100%; background:#0c82e9; text-indent:-9999px; } .deleteWrap { max-width:680px; margin:0 auto; padding:0 1.25em; } .deleteWrap .inner { padding:5em 10%; border:1px solid #e8e8e8; border-radius:.5rem; box-sizing:border-box; } .deleteWrap h4 { margin-bottom:.75rem; font-size:1.625em; text-align:center; } .deleteWrap .txt { font-size:var(--font-txtA); text-align:center; color:#333; } .deleteWrap .inputGroup { margin-top:2.25em; } .deleteWrap .inputGroup input { width:100%; height:3.611em; margin:0.312rem 0; padding:0 3.2222em 0 3.7777em; border-radius:.5rem; border:1px solid #b7b7b7; background:url(../images/sub/icon_lock.png) no-repeat 1.5em 50%; background-size:1.055em auto; line-height:3.611em; font-size:var(--font-tabA); transition:all .15s; } .deleteWrap .btnWrap a, .deleteWrap .btnWrap button { display:block; width:100%; height:3.611em; margin-top:0.625rem; border-radius:.5rem; text-align:center; line-height:3.611em; font-size:var(--font-tabA)1.125em; border:1px solid #b7b7b7; color:#474747; transition:background .15s; } .deleteWrap .btnWrap a:focus, .deleteWrap .btnWrap a:hover, .deleteWrap .btnWrap button:focus, .deleteWrap .btnWrap button:hover { background:#0060ce; border-color:#0060ce; color:#fff; font-weight:700; } @media screen and (max-width:960px) { /* searchStyle */ .searchTab, .searchTab.style2 { width:100%; margin-top:.75em; margin-left:0; } .searchWrap .inner { flex-wrap:wrap; } .searchWrap .searchInner { flex-wrap:wrap; width:100%; } .searchWrap .searchInner.col4 { padding-right:0; } .searchWrap .searchInner.col4 .selectItem, .searchWrap .searchInner.col4 .dateItem { min-width:auto; width:33.33%; } .searchWrap .searchInner.col4 .selectItem .buttonSelect { min-width:auto; width:100%; } .searchWrap .searchInner.col4 .dateItem, .searchWrap .searchInner.col4 .inputItem, .searchWrap .searchInner.col4 .btnFilter { border-top:1px solid #dcdcdc; } .searchWrap .searchInner.col4 .btnFilter { position:static !important; height:auto; } .searchWrap .searchInner.col4>div:nth-child(4)::before { display:none; } /* board List */ .boardList .state, .galleryList .state { width:4.5rem; } /* galleryList */ .galleryList.sell li { width:33.33%; } /* board View */ .viewTit { flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:1.1428em .8571em; } .viewTit .viewInfo { margin-top:.5em; } .viewContent { padding:1.25em 1%; border:none; } .viewContent .viewContentInner { padding:0 .8571em; } /* board view - survey */ .surveyView .item .ans .checkList li, .surveyView .item .ans .radioList li { width:100%; } /* board view - File */ .boardFile { padding:1em; background-color:#fbfbfb; border:1px solid #cfcfcf; } .boardFile h5 { display:none; } .boardFile ul { margin-left:0; } .boardFile > p { display:block; } .boardFile dl { overflow:hidden; margin-top:5px; padding:0; border-top:0 none; } .boardFile dl dt { display:none; } .boardFile dl dd.fileName { position:relative; width:100%; padding:0 0 10px 13px; border-bottom:1px solid #eaeaea; } .boardFile dl dd.fileName:before { content:'ㆍ'; position:absolute; top:0; left:0; display:block; color:#3a53a2; } .boardFile dl dd.fileName a { display:block; width:auto; color:#3a53a2; } .boardFile dl dd.fileDown { position:static; top:auto; right:auto; float:right; margin-top:5px; } .fileName span { display:none; } /* board view - Ctrl */ .viewCtrl { justify-content:center; margin-top:1em; } .viewCtrl .ctrlBtn { display:none; } /* board write */ .boardWrite .tit { margin-left:0; } .boardStyle .writeTbl select { max-width:none; border:none; } .writeTbl + .writeTbl { margin-top:0.909em;border-bottom:0 none; } .writeTbl tbody th { width:5.7142rem; padding:.8571rem .7142rem; } .writeTbl tbody th .label { padding-left:0.615em; background-position:left 0.462em; } .writeTbl tbody th .label>span { display:none; } .writeTbl tbody td { padding:.7142rem; } .writeTbl td .editor { height:12em; } .writeTbl + .writeTbl tbody th { display:block; width:auto; padding:1.154em 0.769em; border-bottom:0 none; } .writeTbl + .writeTbl tbody td { display:block; width:auto; } .writeTbl .txt { border:none; } .writeTbl .txt.w30 { width:100%; } .writeTbl .editor textarea { border:0 none; } .writeTbl .selectArea { width:100%; } .writeTbl .selectBtn { border:0 none; } .writeTbl td .groupAddr .btnZipcode { width:6em; } .writeTbl td .groupAddr .addrTxt { padding:0; } .writeTbl td .groupAddr .addrTxt .txt:nth-of-type(1) { width:calc(100% - 6.625rem); } .writeTbl td .groupAddr .addrTxt .txt:nth-of-type(2) { margin:.4166em 0 0; } .writeTbl td .buttonSelect { min-width:50%; } .writeTbl td .dateSel { flex-wrap:wrap; } .writeTbl td .dateSel input[type="date"] { width:90%; } .writeTbl td .dateSel input[type="date"]:last-child { margin-top:.4166em; } .writeTbl ul.fileList li.beforeFile p.txtBox { width:100%; padding-right:0; padding-bottom:5px; } .writeTbl ul.fileList li p.fileArea { display:flex; } .writeTbl ul.fileList li p.fileArea label { order:2; float:none; margin-left:5px; } .writeTbl ul.fileList li p.fileArea span { flex-grow:1; order:1; padding-right:0; } .writeTbl ul.fileList li p.btnArea { position:static; right:auto; top:auto; width:100%; margin:0; padding:0; text-align:right; } .writeTbl ul.fileList li p.btnArea button, .writeTbl ul.fileList li p.btnArea .delBtn { margin:0; width:50%; } .writeTbl ul.fileList li p.btnArea button:nth-of-type(1) { width:49%; margin-right:1%; } .writeTbl ul.fileList li p.btnArea .delBtn label { text-align:center; margin:0; width:100%; } .writeTbl ul.fileList li .label label { width:3rem; padding:0;} .writeTbl ul.fileList li .label label span { width:100%; height:100%; padding:0; text-indent:-9999px; background-position:center; } .writeTbl .guideTxt { margin:10px 10px 0; } #dragDropFileList .fileZoneStatusbar { padding:.3333em .625em .3333em 1.875em; } #dragDropFileList .fileInfo { display:none; } #dragDropFileList .fileZoneFilename { width:100%; } .deleteWrap .inner { padding:4em 8%; } } @media screen and (max-width:767px) { /* searchStyle */ .searchTab { margin:1.0714em 0 0 ; } .searchTab ul li button { height:3.5294em; } .searchWrap .selectItem .buttonSelect { min-width:7em; } .searchWrap .searchInner { padding:0; } .searchWrap .searchInner.col2 .selectItem { width:50%; } .searchWrap .searchInner.col2 .selectItem .buttonSelect { min-width:auto; width:100%; } .searchWrap .searchInner.col2 .inputItem { border-top:1px solid #dcdcdc; } .searchWrap .searchInner.col4 .selectItem, .searchWrap .searchInner.col4 .dateItem { width:50%; } .searchWrap .searchInner.col4>div:nth-child(3) { border-top:1px solid #dcdcdc; } .searchWrap .searchInner.col4>div:nth-child(4)::before { display:block; } .searchWrap .searchInner.sel>div:nth-child(-n+2) { border-top:none; } .searchWrap .searchInner.sel .selectItem { width:50%; border-top:1px solid #dcdcdc; } .searchWrap .btnFilter { position:static !important; width:100%; height:auto; border-top:1px solid #dcdcdc; } .searchWrap .btnFilter button { width:100%; height:3.5294em; border-left:none; } /* Board List */ .boardList .moNone { display:none; } .boardList .date { width:6em; } .boardList .status { width:6em; } .boardList .state, .galleryList .state { display:block; width:5.2857rem; line-height:2.2142rem; } .boardList .state { margin:0 auto; } .boardList th, .boardList th.subject { padding:1em 0; } .boardList td, .boardList td.subject { padding:1.125em 0; } /* Board List - Btn */ .boardBtn { text-align:center; } .boardBtn i { display:none; } /* pageNav */ .pageNav { margin-top:2em; } .pageNav .pcVer { display:none; } .pageNav .mVer { display:flex; } .pageNav ul li.prev { margin-right:1em; } .pageNav ul li.next { margin-left:1em; } /* galleryList */ .galleryList { margin:1px -.25em; } .galleryList .state { margin-bottom:.7142rem; } .galleryList li { width:50%; margin-bottom:.5em; padding:1px .25em; } .galleryList a, .galleryList button { padding:.6428em; } .galleryList a span.txt, .galleryList button span.txt { padding:1.1428em 0 .4285em; } .galleryList a span.txt strong, .galleryList button span.txt strong { margin-bottom:.625em; } .galleryList.sell { margin:1px -.25em; } .galleryList.sell li { width:50%; padding:1px .25em; } /* board view - edu */ .eduView .instructor { display:block; } .eduView .instructor .thumb { width:100%; height:17.1428em; } .eduView .instructor .infoBox { padding:1em; border-left:none; border-top:1px solid #d2d2d2; } .eduView .instructor .infoBox dl dd { margin-top:.8571em; } .eduView .eduList { margin-top:2.4285em; } .eduView .eduList li { padding:0; line-height:1.3; } .eduView .eduList li .name { padding:1.1428em 1.0714em; border-right:1px solid #d2d2d2; border-bottom:none; white-space:pre-wrap; line-height:1.4; } .eduView .eduList li .link { position:static; width:100%; } .eduView .eduList li .link span { line-height:3rem; background-size:1.1428rem auto; } /* board view - survey */ .surveyView .btnSurvey button { width:100%; } .surveyView .btnSurvey button span { padding-right:3.1428rem; background-size:1.1428rem auto; } /* board view - file */ .boardFile ul li span.fileName { font-size:var(--font-txtA); } .fileBox .boxList { overflow:hidden; flex-direction:column; } .fileBox .fileName { height:3em; } .fileBox .fileControl a, .fileBox .fileControl button { width:3em; height:3em; } .fileBox .fileControl i { margin-bottom:0; } .fileBox .fileControl span { display:none; } .fileBox .buttonSelect button { height:3rem; } /* board write */ .checkList li, .radioList li { width:100%; } .checkList li input[type="checkbox"] + label::before, .radioList li input[type="radio"] + label::before { width:1.2142rem; height:1.2142rem; background-size:.7857rem auto; } .writeTbl td .buttonSelect { min-width:100%; } } @media screen and (max-width:480px) { .galleryList a span.img, .galleryList button span.img { height:27.2222vw; } .galleryList.cardnews a span.img { height:38.6111vw; } .galleryList.sell button span.img { height:33.8888vw; } } /* form style */ .formTable { width:100%; table-layout:fixed; } .formTable th, .formTable td { background:#fff; border:1px solid #d4d4d9; vertical-align:middle; font-size:var(--font-txtA); font-weight:400; letter-spacing:-.025em; box-sizing:border-box; } .formTable th { background:#f7f7f9; text-align:center; } .formTable th label, .formTable th .label { display:inline-block; vertical-align:middle; } .formTable td .text { width:100%; height:3.4375rem; padding:0 1.25rem; border:none; } .formTable td input[type="file"].text { line-height:3.4375rem; } .formTable td a.iconLk { display:block; width:100%; padding:.5rem 1.25rem; box-sizing:border-box; border-width:0; border-style:solid; border-color:#d4d4d9; } .formTable td a.BOT { border-top-width:1px; } .formTable td a.BOB { border-bottom-width:1px; } .formTable td a.iconLk span { display:flex; align-items:center; padding:.5rem 2.5rem; background:url("/resource/images/sub/icon_file.png") no-repeat left center / auto 1.75rem; } .formTable td textarea.text { height:6.875rem; padding:1.25rem; resize:none; } p i.required, .formTable .required { display:inline-block; overflow:hidden; vertical-align:middle; width:.375rem; height:.875rem; margin-left:.25rem; text-indent:-9999px; background:url(../images/sub/icon_required.svg) no-repeat top center; background-size:contain; text-align:left; } p i.required { margin-right:.25em;} .formTable .br { display:block; } .formTable .groupAddr .zipcode { display:flex; border-bottom:1px solid #d4d4d9; } .formTable .groupAddr .zipcode .text { flex-grow:1; } .formTable .groupAddr .zipcode .btn { flex-shrink:0; width:6.375rem; height:3.4375rem; line-height:3.4375rem; background:#d8dced; text-align:center; } .formTable .groupFile { padding:.875em 1.25em; box-sizing:border-box; } .formTable .groupFile .tableInfo { margin-bottom:.5em; font-weight:300; } .formTable th .btn { display:none; } .formTable .radioList { padding:.9375rem 1.25rem; } .formTable .radioList.input { padding:0 1.25rem; } .formTable .radioList.input li { display:flex; align-items:center; } .formTable .radioList.input li input[type="radio"] + label { white-space:nowrap; } .formTable .radioList.input li.item label { margin-right:.5rem; } .formTable .formTxt p { min-height:3.4375rem; padding:1rem 1.25rem; box-sizing:border-box; } .formTable .formTxt p + p { border-top:1px solid #d4d4d9; } .clauseBox { margin-bottom:1em; } .clauseBox .inner { /* overflow-y:auto; max-height:14em; */ padding:2.25em; background:#fff; border:1px solid #d4d4d9; box-sizing:border-box; } .clauseBox .clauseTxt { letter-spacing:-.05em; line-height:1.5; } .clauseBox .clauseTxt h4 { margin:1.875rem 0 .875rem; font-size:var(--font-tabA); font-weight:500; color:#282828; } .clauseBox .clauseTxt h4:first-child { margin-top:0; } .clauseBox .clauseTxt p { margin:.625em 0; color:#282828; } .clauseBox .clauseTxt ul { margin:.625em 0; } .clauseBox .clauseTxt ul li { position:relative; margin:.5em 0; padding-left:1.25em; color:#282828; } .clauseBox .clauseTxt ul li i { position:absolute; top:0; left:0; font-style:normal; } .clauseBox .clauseTxt ul li ul { margin:0; } .clauseBox .clauseTxt ul li ul li { margin:.25em 0; padding-left:0; } .clauseBox .clauseTxt ul li ul li::before { content:'-'; margin-right:.25rem; } .clauseBox .agree { display:flex; align-items:center; padding:1.125em 1.75em .875em; background:#fff; border:1px solid #d4d4d9; border-top:none; box-sizing:border-box; text-align:right; } .clauseBox .agree p.input { flex:1; display:flex; justify-content:flex-end; } .clauseBox .agree p.txt { flex:1; margin:0; font-size:var(--font-txtB); text-align:left; } .clauseBox .agree ul { display:flex; gap:1em; } .clauseBox .agree p, .clauseBox .agree ul li { overflow:hidden; display:inline-block; position:relative; padding:1px; } .clauseBox .agree input { overflow:hidden; position:absolute; left:0; top:0; /*width:1px; height:1px; margin-left:-9999px;*/opacity:0; } .clauseBox .agree input + label { display:block; position:relative; padding-left:1.625rem; font-size:var(--font-txtC); font-weight:300; cursor:pointer; } .clauseBox .agree input:focus + label { outline:2px dashed; } .clauseBox .agree input + label::before { content:''; display:block; position:absolute; top:50%; left:0; width:1.125rem; height:1.125rem; margin-top:-.5625rem; border:1px solid #af6d41; box-sizing:border-box; } .clauseBox .agree input:checked + label::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='7px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 0, 0)' d='M11.014,1.078 L5.525,6.567 C5.396,6.696 5.210,6.729 5.048,6.672 C4.887,6.729 4.701,6.696 4.572,6.567 L0.919,2.914 L1.716,2.116 L5.048,5.449 L10.217,0.280 C10.396,0.101 10.687,0.101 10.866,0.280 L11.014,0.429 C11.194,0.608 11.194,0.899 11.014,1.078 Z'/%3E%3C/svg%3E") no-repeat center; background-size:.75rem auto; } .btnForm { display:flex; justify-content:center; } .btnForm button { width:13.875rem; padding:.9375rem 0; font-size:var(--font-txtA); font-weight:500; } .btnForm button:focus { border:2px dashed #f00; outline:2px dashed #f00; box-sizing:border-box; } .btnForm .btn1 { background:#0061ce; color:#fff; } .btnForm .btn2 { background:#003e84; color:#fff; } .btnForm .btn3 { border:1px solid #0061ce; box-sizing:border-box; color:#004b9f; } @media screen and (max-width:960px) { .formTable { border-top:1px solid #d4d4d9; } .formTable colgroup { display:none; } .formTable tr { display:flex; flex-wrap:wrap; } .formTable th, .formTable td { border-left:none; border-top:none; } .formTable th { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:6.7142rem; padding:.2857rem; border-left:1px solid #d4d4d9; } .formTable td { display:flex; align-items:center; width:calc(100% - 6.7142rem); } .formTable td.moColumn { flex-direction:column; } .formTable td .text { padding:0 .7142rem; } .formTable td textarea.text { padding:.7142rem; } .formTable .br { display:inline-block; } .formTable .groupAddr { width:100%; } .formTable .groupAddr .zipcode .btn { display:none; } .formTable .groupFile { width:100%; padding:.875em .7142em; } .formTable th .btn { display:block; margin:.7142rem auto 0; width:5.1428rem; height:2.4285rem; line-height:2.4285rem; color:#474750; background:#d8dced; border:1px solid #a0a5b8; box-sizing:border-box; } .formTable .radioList { padding:.5rem .7142rem; } .formTable .radioList.input { padding:.5rem .7142rem; } .formTable .formTxt { width:100%; } .clauseBox .inner { max-height:18em; overflow-y:auto; padding:2em; } .clauseBox .agree { flex-direction:column; align-items:flex-end; text-align:left; } .btnForm button { flex:1; width:100%; } } @media screen and (max-width:767px) { .formTable .radioList { flex-direction:column; } .formTable .radioList.input li { display:block; } } /* 농수산물 검사결과 */ .testResult { display:flex; max-width:1200px; margin:0 auto 5.375em; padding:0 1.25em; } .testResult .searchTab { display:none; } .testResult .dateType { flex-shrink:0; position:relative; margin-right:3.3333%; } .testResult .dateType .inner { display:flex; align-items:center; position:relative; width:19.375em; height:18.375em; border:1px solid #dcdcdc; box-sizing:border-box; } .testResult .itemYear { overflow-y:auto; width:100%; max-height:100%; padding:.5em 12.9032%; box-sizing:border-box; } .testResult .itemYear::-webkit-scrollbar { width:4px; height:4px; } .testResult .itemYear::-webkit-scrollbar-thumb { background:#535353; } .testResult .itemYear::-webkit-scrollbar-track { background:#dcdcdc; } .testResult .itemYear::-webkit-scrollbar-corner { background:#dcdcdc; } .testResult .itemYear .yearList li { margin:.125em 0; } .testResult .itemYear .yearList button { width:100%; border:1px solid #dcdcdc; box-sizing:border-box; transition:.15s; } .testResult .itemYear .yearList button span { display:inline-block; position:relative; padding:.875rem .9375rem .875rem 0; font-size:var(--font-tabA); } .testResult .itemYear .yearList button span::after { content:''; display:block; position:absolute; top:50%; right:0; width:.375rem; height:.375rem; margin-top:-.1875rem; border-width:2px 2px 0 0; border-style:solid; border-color:#5e5e5e; transform:rotate(45deg); transition:all .15s; } .testResult .itemYear .yearList button i { font-style:normal; } .testResult .itemYear .yearList .active button { background:#253b80; border-color:#253b80; } .testResult .itemYear .yearList .active button:focus { outline:2px dashed #000; } .testResult .itemYear .yearList .active button span { font-weight:700; color:#fff; } .testResult .itemYear .yearList .active button span::after { border-color:#fff; } .testResult .resultBox { flex-grow:1; } .testResult .resultBox h4 { margin-bottom:.5rem; font-size:var(--font-titC); font-weight:500; color:#2b343f; } .testResult .resultBox .tableStyle { width:100%; min-width:auto; } .testResult .resultBox .tableStyle th, .testResult .resultBox .tableStyle td { padding:1.375rem .5rem; } .testResult .resultBox .tableStyle thead th { padding:1.063rem .5rem; } .testResult .resultBox .tableStyle tbody th { padding:.875rem .5rem; } .testResult .resultBox .tableInfo { float:right; margin-top:.875rem; } .testResult .calendarTbl .calTop { display:flex; justify-content:space-between; align-items:center; padding:.625em 1.625em 1.5em; } .testResult .calendarTbl .calTop .btns { display:flex; } .testResult .calendarTbl .calTop button { overflow:hidden; display:inline-block; width:1.6875em; height:1.6875em; border:1px solid #5e5f64; border-radius:50%; background:no-repeat center; background-size:auto .8125em; text-indent:-9999px; } .testResult .calendarTbl .calTop .prevY { margin-right:.5em; background-image:url(../images/sub/btn_cal_prev_y.svg); } .testResult .calendarTbl .calTop .prevM { background-image:url(../images/sub/btn_cal_prev_m.svg); } .testResult .calendarTbl .calTop .nextY { margin-left:.5em; background-image:url(../images/sub/btn_cal_next_y.svg); } .testResult .calendarTbl .calTop .nextM { background-image:url(../images/sub/btn_cal_next_m.svg); } .testResult .calendarTbl .calTop h4 { font-size:var(--font-tabA); } .testResult .calendarTbl .dateHead, .testResult .calendarTbl .dateList { display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 1.25em; text-align:center; } .testResult .calendarTbl .dateHead li, .testResult .calendarTbl .dateList li { width:14.2857%; } .testResult .calendarTbl .dateHead li span { display:block; padding:.375em 0; } .testResult .calendarTbl .dateHead li:first-child span, .testResult .calendarTbl .dateList li:nth-child(7n+1) span, .testResult .calendarTbl .dateHead li:last-child span, .testResult .calendarTbl .dateList li:nth-child(7n+7) span { color:#7c1ecb; } .testResult .calendarTbl .dateList li span { display:flex; align-items:center; justify-content:center; width:2.25em; height:2.25em; margin:0 auto; color:#3b3b3b; letter-spacing:-.025em; } .testResult .calendarTbl .dateList li button { display:block; width:100%; height:100%; font-weight:500; color:#db1b87; border-radius:50%; border:1px solid transparent; box-sizing:border-box; text-decoration:underline; } .testResult .calendarTbl .dateList li button.active { background:#e8f4ff; border-color:#377ced; font-weight:700; } .testResult .dateType .legend { padding:.875em 0 0 .875em; letter-spacing:-.025em; color:#3b3a3b; } .testResult .dateType .legend i { display:inline-block; position:relative; vertical-align:middle; width:.75em; height:.75em; margin-right:.25em; margin-bottom:.25em; background:#db1b87; border-radius:50%; } .testResult .dateType .legend i::after { content:''; position:absolute; left:0; bottom:-.25em; width:100%; height:1px; background:#db1b87; } .testResultWrap .boardList tr.bg { background:#ffe6d5; } @media screen and (max-width: 960px) { .testResult { display:block; } .testResult .dateType { margin:0 0 2em; } .testResult .dateType .inner { width:100%; height:auto; } .testResult .itemYear { overflow-x:auto; overflow-y:hidden; max-width:100%; padding:.8571em 0; } .testResult .itemYear .yearList { white-space:nowrap; box-sizing:border-box; text-align:center; } .testResult .itemYear .yearList li { display:inline-block; margin:0 .1428em; } .testResult .itemYear .yearList li:first-child { margin-left:.5em; } .testResult .itemYear .yearList li:last-child { margin-right:.5em; } .testResult .itemYear .yearList button span { padding:1rem 1.4285rem; font-weight:500; color:#253b80; } .testResult .itemYear .yearList button span::after { display:none; } .testResult .itemYear .yearList button i { display:none; } } @media screen and (max-width: 767px) { .testResultWrap { display:flex; flex-direction:column; } .testResultWrap form { order:2; } .testResultWrap .testResult { order:1; width:100%; margin-bottom:3.1428em; box-sizing:border-box; } .testResultWrap .boardStyle { order:3; width:100%; box-sizing:border-box; } .testResultWrap .searchWrap .searchTab { display:none; } .testResult .searchTab { display:block; } .testResult .resultBox .tableStyle { width:auto; min-width:700px; } .testResult .resultBox .tableInfo { float:none; } .testResult .calendarTbl .calTop { padding:1.8571em 2em; } .testResult .calendarTbl .calTop button { width:1.9285em; height:1.9285em; background-size:auto .9285em; } .testResult .calendarTbl .calTop .prevY { margin-right:.7142em; } .testResult .calendarTbl .calTop .nextY { margin-left:.7142em; } .testResult .calendarTbl .calTop h4 { margin:0 1.8571rem; } .testResult .calendarTbl .dateHead, .testResult .calendarTbl .dateList { padding:0 1.7142em; } .testResult .calendarTbl .dateList { padding-bottom:1.4285em; } .testResult .calendarTbl .dateList li span { width:2.5714em; height:2.5714em; } } /* login */ .loginWrap { max-width:542px; margin:0 auto; padding:4em 4.40677%; background:#fbfbfb; border:1px solid #dcdcdc; box-sizing:border-box; text-align:center; } .loginWrap h4 { color:#007bda; font-size:1.75em; } .loginWrap h4 span { display:inline-block; padding-left:2rem; background:url('../images/sub/icon_login.png') left center no-repeat; background-size:auto 1em; } .loginWrap p.txt { margin:1.47368em 0 2.63157em; color:#010101; font-size:1.1875em; } .loginWrap .loginLk li { margin-top:1.625em; } .loginWrap .loginLk button, .loginWrap .loginLk a { display:flex; justify-content:space-between; align-items:center; width:100%; border:1px solid; color:#371c1d; font-size:1.25em; font-weight:500; } .loginWrap .loginLk .iconKakao button, .loginWrap .loginLk .iconKakao a { background:#f9e000; border-color:#d9c405; } .loginWrap .loginLk .iconGoogle button, .loginWrap .loginLk .iconGoogle a { background:#fff; border-color:#dedede; } .loginWrap .loginLk li i { display:block; position:relative; flex-grow:0; flex-shrink:0; width:4.1em; height:3.6em; background:center no-repeat; background-size:2.2em auto; } .loginWrap .loginLk .iconKakao i { background-image:url('../images/sub/icon_kakao.png'); color:#dac005; } .loginWrap .loginLk .iconGoogle i { background-image:url('../images/sub/icon_google.png'); color:#d8d8d8; } .loginWrap .loginLk li i::after { content:''; position:absolute; right:0; top:50%; width:1px; height:2em; margin-top:-1em; background:currentColor; } .loginWrap .loginLk li span { flex:1; } /* 통합검색 */ .siteSearchWrap .header { background:#fff; } .siteSearchWrap .header .headWrap { border-bottom:1px solid #e3e3e3; } .siteSearchWrap .header .logo a { background-image:url(../images/common/logo_bk.png); } .siteSearchWrap .header .btnSearch a { background-image:url(../images/common/btn_search_bk.png); } .siteSearchWrap .header .btnSitemap i, .siteSearchWrap .header .btnMoGnb i, .siteSearchWrap .header .btnSitemap i::before, .siteSearchWrap .header .btnSitemap i::after, .siteSearchWrap .header .btnMoGnb i::before, .siteSearchWrap .header .btnMoGnb i::after { background:#000; } .siteSearchWrap .header .gnb .gnbList>li>a { color:#000; } .siteSearchWrap .header .btnLogin button { background-image:url(../images/common/icon_login_bk.png); } .siteSearchWrap .header .btnLogout button { background-image:url(../images/common/icon_logout_bk.png); } .siteSearchWrap .header.active .headWrap { border:none; } .siteSearchWrap .pageTopWrap { padding-top:10.75em; } .siteSearchWrap .pageTopWrap h3.pageTit { padding-bottom:0; background:none; } .searchForm { max-width:1200px; margin:0 auto; padding:2.75em 1.25em 4.5em; } .searchForm .searchBox { display:flex; max-width:710px; margin:0 auto; border-bottom:1px solid #044bbf; } .searchForm .searchBox input { flex-grow:1; height:4rem; padding:0 1.25rem; font-size:1.375em; font-weight:500; border:none; } .searchForm .searchBox button { flex-shrink:0; width:3.75em; height:4em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32px' height='33px'%3E%3Cpath fill-rule='evenodd' fill='rgb(4, 75, 191)' d='M31.712,30.270 L29.287,32.434 L19.926,22.911 C17.973,24.241 15.615,25.021 13.074,25.021 C6.347,25.021 0.893,19.570 0.893,12.848 C0.893,6.124 6.347,0.673 13.074,0.673 C19.800,0.673 25.255,6.124 25.255,12.848 C25.255,15.860 24.154,18.611 22.341,20.736 L31.712,30.270 ZM13.073,3.942 C8.151,3.942 4.161,7.930 4.161,12.849 C4.161,17.768 8.151,21.755 13.073,21.755 C17.994,21.755 21.985,17.768 21.985,12.849 C21.985,7.930 17.994,3.942 13.073,3.942 Z'/%3E%3C/svg%3E") center no-repeat; background-size:1.875em auto; color:transparent; } .searchForm .resultCount { margin-top:5em; } .searchForm .resultCount p { font-size:1.875rem; text-align:center; letter-spacing:-.025em; word-break:keep-all; } .searchForm .resultCount strong { color:#d31019; } .searchResult { max-width:1200px; margin:0 auto; padding:0 1.25em 1.75em; } .searchResult .searchPost { position:relative; padding:3em 0; border-bottom:1px solid #d4d4d4; } .searchResult .searchPost.more { padding-bottom:4.5em; } .searchResult h4 { margin-bottom:2rem; font-size:1.625em; font-weight:500; } .searchResult h4 b { font-weight:500; color:#d31019; } .searchResult .btnMore { position:absolute; bottom:-1.75em; left:50%; width:15.125em; margin-left:-7.5em; background:#fff; border:1px solid #454545; border-radius:5em; box-sizing:border-box; text-align:center; z-index:1; } .searchResult .btnMore a { display:block; } .searchResult .btnMore span { display:inline-block; vertical-align:middle; font-size:var(--font-tabA); font-weight:500; color:#454545; line-height:3.375rem; } .searchResult .btnMore i { display:inline-block; vertical-align:middle; position:relative; width:1rem; height:1rem; margin-left:.625em; } .searchResult .btnMore i::before, .searchResult .btnMore i::after { content:''; position:absolute; top:50%; left:0; width:100%; height:2px; background:#454545; } .searchResult .btnMore i::after { transform:rotate(90deg); } .searchResult .resltMenu li { position:relative; margin-top:1.75em; padding-left:.875em; } .searchResult .resltMenu li:first-child { margin-top:0; } .searchResult .resltMenu li::before { content:''; position:absolute; top:.6875rem; left:0; width:.25rem; height:.25rem; background:#3152db; border-radius:50%; } .searchResult .resltMenu li a { display:block; } .searchResult .resltMenu li span { display:inline-block; font-size:var(--font-titC); font-weight:500; color:#3152bd; letter-spacing:-.025em; border-bottom:1px solid #3152bd; } .searchResult .resltMenu li a[target="_blank"] span { padding-right:1.25rem; background:url(../images/common/icon_blank.png) no-repeat right center; background-size:.875rem auto; } .searchResult .resltList li { position:relative; margin-top:2.75em; padding-left:.875em; } .searchResult .resltList li:first-child { margin-top:0; } .searchResult .resltList li::before { content:''; position:absolute; top:.6875rem; left:0; width:.25rem; height:.25rem; background:#3152db; border-radius:50%; } .searchResult .resltList li a { display:block; } .searchResult .resltList li span { display:block; } .searchResult .resltList li .tit { overflow:hidden; font-size:var(--font-titC); font-weight:500; color:#3152bd; letter-spacing:-.025em; display:-webkit-box; max-height:3em; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:pre-wrap; } .searchResult .resltList li .txt { overflow:hidden; margin-top:.75rem; font-size:var(--font-tabA); line-height:1.5; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.025em; } .searchResult .resltList li .txt em { font-weight:500; color:#d31019; } .searchResult .resltList li .txt.row { display:-webkit-box; max-height:4.5em; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:pre-wrap; } @media only screen and (max-width:1200px) { .siteSearchWrap .header { border-bottom:1px solid #e3e3e3; } .siteSearchWrap .header .headWrap { border:none; } .siteSearchWrap .pageTopWrap { padding-top:9.25em; } } @media only screen and (max-width:960px) { .siteSearchWrap .pageTopWrap { padding-top:3.5714em; } .searchForm { padding:.3571em 1.25em 2.8571em; } .searchForm .searchBox input { height:3.2857rem; font-size:var(--font-tabA); } .searchForm .searchBox button { width:2em; height:3.2857rem; background-size:1.2857em auto; background-position:right center; } .searchResult .btnMore i { width:.9285rem; height:.9285rem; margin-top:-1px;} .searchResult .btnMore i::before, .searchResult .btnMore i::after { height:1px; } .searchForm .resultCount { margin-top:3.5714em; } .searchForm .resultCount p { font-size:var(--font-titC); } .searchResult .resltList li .txt { display:-webkit-box; max-height:4.5em; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:pre-wrap; } .searchResult .resltList li .txt.row { max-height:9em; -webkit-line-clamp:6; } } /* print */ @media print { body{ width:210mm; height:297mm; margin:0; } .header, .footerWrap, .subFunc, .satisfactionWrap { display:none; } #container { margin:0 auto; } #contentGroup { padding:0; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }