@charset "utf-8"; @import url("./base.css"); @import url("./common.css"); #container { padding-top: 6.25em; margin-bottom:max(7%, 5em); } /* location */ .subFunc { margin-top:4.875em; margin-bottom:6.25em; } .subFunc .pageTit, .siteLocation { max-width:1220px; margin:0 auto; padding:0 6%; } .subFunc .pageTit.mo { display: none; } .subFunc .pageTit { font-size: 2.75em; } .subFunc .pageTit span { display: inline-block; position: relative; padding-right:0.5455em; } /*.subFunc .pageTit span::after { content:''; position: absolute; bottom:0.8rem; right: 0; width: 1.1rem; height: 1.1rem; border-radius:50%; background: #4040a4; }*/ .siteLocation, .siteLocation .locationTab, .siteLocation .pageFunc { display:flex; justify-content:space-between; align-items:center; } .siteLocation .location { margin-top: 1.625em; } .siteLocation .location .home a { display:block; overflow:hidden; width:36px; height:1.625em; background:url(../images/sub/icon_home.png) 0 50% no-repeat; background-size:1.25em auto; text-indent:-99em; } .locationTab>li { position:relative; } .locationTab>li::after { content:''; position:absolute; right:0; top:50%; width:1px; height:1em; margin-top: -0.5em; background:#dbdbdb; } .locationTab>li button { width:100%; min-width:11em; padding:0.5em 1em; color:#000; text-align:left; font-weight: 500; } .locationTab>li button span { display:block; position:relative; padding-right:1.625em; } .locationTab>li button span::after { content:''; position:absolute; right:1px; top:50%; width:.625em; height:.625em; margin-top:-.5em; border-right:2px solid; border-bottom:2px solid; color:#000; box-sizing:border-box; transform:rotate(45deg); transition:transform 0.4s; } .locationTab>li button.active span::after { margin-top: 0; transform:rotate(225deg); } .locationTab > li div { display:none; position:absolute; left:0; width:100%; background:#fff; border:1px solid #232323; z-index:5; } .locationTab > li div ul { padding:0.75em; border:1px solid #d3d3d3; box-sizing:border-box; } .locationTab > li div ul li { margin:.25em 0; } .locationTab > li div ul li a { overflow: hidden; display:block; max-width:100%; white-space:nowrap; text-overflow:ellipsis; } .locationTab > li div ul li a:hover, .locationTab > li div ul li a:focus { color:#3535cf; font-weight: 500; } /* share, print */ .pageFunc>li { position: relative; } .pageFunc>li>button { overflow:hidden; display: inline-block; width:2.75em; height:1.625em; border:none; background-position:center; background-repeat:no-repeat; text-indent:-99em; } .pageFunc .btnShare { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18px' height='25px'%3E%3Cpath fill-rule='evenodd' fill='rgb(0, 0, 0)' d='M13.997,8.018 C13.003,8.018 12.105,7.643 11.404,7.044 L7.802,10.794 C7.924,11.179 8.009,11.581 8.009,12.007 C8.009,12.485 7.911,12.938 7.757,13.364 L11.372,16.996 C12.077,16.380 12.988,15.995 13.997,15.995 C16.213,15.995 18.009,17.791 18.009,20.007 C18.009,22.222 16.213,24.018 13.997,24.018 C11.782,24.018 9.985,22.222 9.985,20.007 C9.985,19.521 10.085,19.062 10.243,18.631 L6.635,15.007 C5.929,15.629 5.012,16.018 3.997,16.018 C1.782,16.018 -0.015,14.222 -0.015,12.007 C-0.015,9.791 1.782,7.995 3.997,7.995 C5.045,7.995 5.991,8.406 6.706,9.065 L10.243,5.382 C10.085,4.951 9.985,4.492 9.985,4.007 C9.985,1.791 11.782,-0.005 13.997,-0.005 C16.213,-0.005 18.009,1.791 18.009,4.007 C18.009,6.222 16.213,8.018 13.997,8.018 ZM13.998,22.207 C15.211,22.207 16.194,21.223 16.194,20.011 C16.194,18.798 15.211,17.815 13.998,17.815 C12.786,17.815 11.802,18.798 11.802,20.011 C11.802,21.223 12.786,22.207 13.998,22.207 ZM3.998,9.750 C2.750,9.750 1.738,10.762 1.738,12.010 C1.738,13.258 2.750,14.270 3.998,14.270 C5.247,14.270 6.258,13.258 6.258,12.010 C6.258,10.762 5.247,9.750 3.998,9.750 ZM13.998,1.815 C12.786,1.815 11.802,2.798 11.802,4.011 C11.802,5.223 12.786,6.206 13.998,6.206 C15.211,6.206 16.194,5.223 16.194,4.011 C16.194,2.798 15.211,1.815 13.998,1.815 Z'/%3E%3C/svg%3E"); } .pageFunc .btnPrint { background-image: url(../images/sub/icon_print.png); } .pageFunc .shareList { visibility:hidden; display:flex; justify-content:center; align-items:center; opacity:0; position:absolute; right:0; padding:0.8rem; background:#fff; border:1px solid #999; box-sizing:border-box; text-align:center; z-index:10; transition:.4s opacity ease; } .pageFunc .active .shareList { opacity:1; visibility:visible; } .pageFunc .active .shareList ul { display:flex; } .pageFunc .active .shareClose { display:inline-block; } .pageFunc .active .shareList ul { width:160px; width:max-content; } .pageFunc .shareList ul li { display: inline-block; margin:0 0.4em; font-size: 1rem; } .pageFunc .shareList ul li a, .pageFunc .shareClose button { overflow:hidden; display:block; width:3.2em; height:3.2em; border-radius:50%; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; text-indent:-999px; box-sizing:border-box; } .pageFunc .shareList ul li.iconKakao a { background-image:url(../images/sub/icon_location_kakao.png); } .pageFunc .shareList ul li.iconBand a { background-image:url(../images/sub/icon_location_band.png); } .pageFunc .shareList ul li.iconFacebook a { background-image:url(../images/sub/icon_location_facebook.png); } .pageFunc .shareList ul li.iconUrl a { border:1px solid #dcdcdc; background-image:url(../images/sub/icon_location_url.png); } .pageFunc .shareClose { display: none; margin-left: 1em; font-size: 1rem; } .pageFunc .shareClose button { position:relative; border:1px solid #999; } .pageFunc .shareClose button::before, .pageFunc .shareClose button::after { content:''; position:absolute; left:50%; top:50%; width:1.8em; height:2px; margin-left:-0.9em; background:#999; } .pageFunc .shareClose button::before { transform:rotate(45deg); } .pageFunc .shareClose button::after { transform:rotate(135deg); } @media screen and (max-width:1400px) { #container { padding-top:6.375rem; } } @media screen and (max-width:1200px) { .subFunc { margin-top: 0; margin-bottom:4.5rem; } .subFunc .pageTit, .locationTab>li.home, .locationTab>li.depth1, .siteLocation .pageFunc, .locationTab>li::after { display: none; } .siteLocation, .siteLocation .locationTab { display: block; padding:0; } .siteLocation .location { margin-top: 0; } .locationTab>li button { padding:1.125em 6%; background: #4040a4; color: #fff; font-weight: 700; font-size: 2rem; } .locationTab>li button span::after { width:0.75em; height:0.75em; border-right:1px solid; border-bottom:1px solid; color:#fff; } .locationTab > li div { position:relative; left: auto; border: none; } .locationTab > li div ul { padding:0.8em 0; } .locationTab > li div ul li a { padding:0.4em 6%; font-size: 1.75rem; } .subFunc .pageTit.mo { display: block; margin-top:5.25rem; font-size:3.125rem; } .subFunc .pageTit span::after { width:0.7rem; height:0.7rem; } } /* selectbox */ .selectbox { position:relative; min-width:7.53333em; background:#fff; border:1px solid #d0d0d0; color:#000; font-size:.9375em; -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; z-index:1; } .selectbox:after { content:''; position:absolute; top:1.071em; right:1em; width:0.625em; height:0.625em; border-top: 1px solid #636363; border-right:1px solid #636363; -webkit-transform: rotate(135deg); transform: rotate(135deg); transition:0.3s; } .selectbox.focus { border-color:#66afe9; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .selectbox.focus:after { top:1.429em; transform:rotate(-45deg); } .selectbox span, .selectbox select { display:block; width:100%; box-sizing:border-box; white-space:nowrap; } .selectbox span { overflow:hidden; position:absolute; top:0; left:0; padding-right:2em; box-sizing:border-box; text-align:left; z-index:-1; text-indent:.58em; white-space:nowrap; text-overflow:ellipsis; } .selectbox select { height:auto; line-height:normal; font-family:inherit; border:0; opacity:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .buttonSelect { position:relative; } .buttonSelect .viewCode, .buttonSelect .viewCode2 { position:relative; } .buttonSelect button { width:100%; text-align:left; } .buttonSelect button::after { content:''; display:block; position:absolute; top:50%; right:0; width:0.8rem; height:0.8rem; margin-top:-0.5rem; 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:-3px; } .selectList {display:none;position:absolute;top: 100%;left: 50%;width: 86.9791%;min-width: 8.125em;margin-top:-.125em;padding: 1.6875em 1.25em 1.6875em 1.875em;font-size:1em;background: #fff;border: 1px solid #dcdcdc;border-radius: 0.5rem;box-sizing: border-box;box-shadow: 0 24px 30px 0 rgba(0, 0, 0, 0.06);transform: translateX(-50%);z-index:6;} .selectList.type2 { width:120%; } .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;} .selectList ul::-webkit-scrollbar { width:3px; height:3px;} .selectList li {display:block;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 label:focus, .selectList li label:hover, .selectList li label:active { color:#1a3ac5; } .selectList li label:focus::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);} /* member */ .memberWrap, .mypageWrap { max-width:1200px; margin:8rem auto; padding:0 6%; } .joinTurnList { display:flex; justify-content:center; margin-bottom:7rem; text-align:center; } .joinTurnList li { position:relative; display:inline-block; padding-right:7.4rem; font-size: 1.8rem; } .joinTurnList li:last-child { padding-right:0; } .joinTurnList li:before { content:''; position:absolute; top:3.7rem; left:30%; width:100%; height:0; border:1px solid #b9b9ff; } .joinTurnList li:last-child:before { content:none; } .joinTurnList li span { display:inline-block; position:relative; padding-top:9.2rem; } .joinTurnList li span:after { content:''; z-index:1; position:absolute; left:50%; top:0; width:7.3rem; height:7.3rem; margin-left:-3.7rem; border-radius:50%; border:1px solid #3535cf; background-color:#fff; background-position:center; background-repeat:no-repeat; background-size:auto 3.7rem; letter-spacing:-0.04em; box-sizing:border-box; } .joinTurnList li.turn01 span:after { background-image:url(../images/use/icon_join01.png); } .joinTurnList li.turn02 span:after { background-image:url(../images/use/icon_join03.png); } .joinTurnList li.turn03 span:after { background-image:url(../images/use/icon_join02.png); } .joinTurnList li.turn04 span:after { background-image:url(../images/use/icon_join04.png); } .joinTurnList li.turn01.active span:after { background-color:#3535cf; background-image:url(../images/use/icon_join01_on.png); } .joinTurnList li.turn02.active span:after { background-color:#3535cf; background-image:url(../images/use/icon_join03_on.png); } .joinTurnList li.turn03.active span:after { background-color:#3535cf; background-image:url(../images/use/icon_join02_on.png); } .joinTurnList li.turn04.active span:after { background-color:#3535cf; background-image:url(../images/use/icon_join04_on.png); } .joinTurnList li.on span:after { background-color:#3535cf; background-image:url(../images/use/turn_join_on.png); background-size:auto 1em; } .joinType { max-width:984px; margin:0 auto; } .joinType ul { display:flex; } .joinType ul li { display:inline-block; width:48%; margin:0 1%; text-align:center; vertical-align:top; letter-spacing:-0.06em; } .joinType ul li a { display:block; border:1px solid #dcdcdc; } .joinType ul li a span { display: block; } .joinType ul li a .tit { margin:7.8rem 1rem 0; padding-top:15.4rem; background-position:center top; background-repeat:no-repeat; background-size:13.2rem auto; font-size:1.375em; } .joinType .i1 a .tit { background-image:url(../images/use/icon_join_type01.png); } .joinType .i2 a .tit { background-image:url(../images/use/icon_join_type02.png); } .joinType ul li a .txt { margin-top:0.75em; margin-bottom:4.75em; color:#616161; line-height:1.3; } .joinType ul li a .join { padding:1.8em 0.5em; background-color:#fafafa; border-top:1px solid #dcdcdc; font-size:1.250em; } .joinType ul li a .join i { display:inline-block; padding-right:2.4rem; background:url(../images/use/arrow_join_type.png) right center no-repeat; background-size:0.8rem auto; font-style:normal; } .checkStyle, .radioStyle { overflow:hidden; position:relative; padding-left:1px; text-align:center; } .checkStyle input[type="checkbox"], .checkStyle input[type="radio"], .radioStyle input[type="checkbox"], .radioStyle input[type="radio"] { overflow:hidden; position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; } .checkStyle label, .radioStyle label { position:relative; min-height:2.1rem; padding-left:2.8rem; cursor:pointer; } .radioStyle .label, .checkStyle .label { position:relative; display:inline-block; width:1.1em; height:1.1em; } .checkStyle label::before, .checkStyle .label::before, .radioStyle label::before, .radioStyle .label::before { content:''; position:absolute; left:0; top:.1rem; width:2rem; height:2rem; background:#fff; margin-left:1px; border:1px solid #000; box-sizing:border-box; } .checkStyle .label::before { top:0; } .checkStyle label::before, .checkStyle .label::before { border-radius:3px; } .radioStyle label::before, .radioStyle .label::before { border-radius:50%; } .checkStyle input[type="checkbox"]:checked + label::before, .checkStyle input[type="radio"]:checked + label::before, .checkStyle input[type="checkbox"]:checked + .label::before, .checkStyle input[type="radio"]:checked + .label::before { background:#3535cf; border-color:#3535cf; } .formTable .checkStyle input[type="checkbox"]:checked + label::before, .formTable .checkStyle input[type="checkbox"]:checked + .label::before, .checkStyle input[type="checkbox"]:checked + label::after, .checkStyle input[type="radio"]:checked + label::after, .checkStyle input[type="checkbox"]:checked + .label::after, .checkStyle input[type="radio"]:checked + .label::after { content:''; position:absolute; left:.05rem; top:.1rem; width:2rem; height:2rem; background:url(../images/use/icon_check.svg) center no-repeat; } .checkStyle input[type="checkbox"]:checked + .label::after, .checkStyle input[type="radio"]:checked + .label::after { top:0; } .radioStyle input[type="checkbox"]:checked + label::before, .radioStyle input[type="radio"]:checked + label::before, .radioStyle input[type="checkbox"]:checked + .label::before, .radioStyle input[type="radio"]:checked + .label::before { background:#000; border:2px solid #fff; outline:1px solid #000; } .checkStyle input[type="checkbox"]:focus + label, .checkStyle input[type="radio"]:focus + label, .checkStyle input[type="checkbox"]:focus + .label, .checkStyle input[type="radio"]:focus + .label, .radioStyle input[type="checkbox"]:focus + label, .radioStyle input[type="radio"]:focus + label { outline:2px dashed; box-sizing:border-box; } /* 회원가입 - 약관동의 */ .joinSect { margin-bottom:5.8rem; padding:1em 3px 0; border-top:1px solid #ddd; } .joinSect>p { font-size:1.125em; } .clauseWrap .clauseTit { margin-top:3.8rem; font-weight: 800; font-size:2.6rem; } .clauseWrap .clauseBox { overflow:hidden; padding-top:1rem; } .clauseWrap .clauseTxt { overflow-y:scroll; height:26rem; padding:2.5rem 3rem; border:1px solid #ddd; letter-spacing:-0.04em; font-size:1.125em; box-sizing:border-box; } .clauseWrap .clauseTxt table th, .clauseWrap .clauseTxt table td { word-break:break-all; } .clauseWrap .clauseTxt h4 { margin:2.1112em 0 1em; font-size:1.125em; } .clauseWrap .clauseTxt h4:nth-of-type(1) { margin-top:0; } .clauseWrap .clauseTxt h5 { margin:1.5em 0 0.625em; } .clauseWrap .clauseTxt h5:nth-of-type(1) { margin-top:0; } .clauseWrap .clauseTxt p, .clauseWrap .clauseTxt ol, .clauseWrap .clauseTxt ul, .clauseWrap .clauseTxt dl { margin:0.625em 0; } .clauseWrap .clauseTxt ol ul, .clauseWrap .clauseTxt ol ol, .clauseWrap .clauseTxt ul ol, .clauseWrap .clauseTxt ul ul { margin-top:0.5rem; } .clauseWrap .clauseTxt li { margin-bottom:0.5em; } .clauseWrap .clauseTxt li li { margin-bottom:2px; } .clauseWrap .clauseTxt ul>li { position:relative; padding-left:1.1em; } .clauseWrap .clauseTxt ul>li::before { content:''; position:absolute; top:0.7rem; left:0.375em; width:0.4rem; height:0.4rem; border-radius:50%; background:#000; } .clauseWrap .clauseTxt ul>li>ul>li::before { content:'-'; top:0; width:auto; height:auto; border-radius:0; background:none; } .clauseWrap .clauseTxt ol { counter-reset:section; } .clauseWrap .clauseTxt ol>li { position:relative; padding-left:1.25em; } .clauseWrap .clauseTxt ol>li::before { counter-increment:section; content:counter(section)"."; position:absolute; top:0; left:0; min-width:1em; text-align:right; } .clauseWrap .agree { display:flex; padding:1.5rem 3rem; border:1px solid #ddd; border-top:0; font-size:1.8rem; } .clauseWrap .agree > div { padding-right:2.5em; } .memberWrap .agreeAll { padding:1.5em 1.375em 0; color: #000; text-align: left; font-size:1.8rem; } /* 회원가입 - 인증종류선택 */ .authCheck>ul { display:flex; justify-content:center; } .authCheck>ul>li { width: 100%; max-width:515px; padding:8.2rem 2% 6.5rem; border:1px solid #ddd; text-align:center; vertical-align:top; box-sizing:border-box; } .authCheck>ul>li dl{ padding-top:11.5rem; background-position:center top; background-repeat:no-repeat; } .authCheck .authMail dl { background-image:url(../images/use/icon_auth_mail.jpg); } .authCheck .authSms dl { background-image:url(../images/use/icon_auth_sms.jpg); } .authCheck .authPin dl { background-image:url(../images/use/icon_auth_pin.jpg); } .authCheck>ul>li dl dt { font-weight:600; font-size:1.5em; } .authCheck>ul>li dl dd.txt { margin-top:1rem; font-size:1.7rem; word-break:keep-all; } .authCheck>ul>li dl dd.btnSe { display:inline-block; min-width:14.8rem; margin-top:1.3889em; letter-spacing:-0.02em; } .authCheck>ul>li dl dd a { display:block; padding:1.3rem 2.2rem 1.4rem 4.6rem; background:url(../images/use/bl_auth_check.png) 2rem center no-repeat; border:1px solid #cfcfcf; border-radius:3px; font-size:1.125em; } .authCheck .info { margin:2.223em auto 0; text-align:center; word-break:keep-all; font-size: 1.125em; } .authCheck .info>span { display:block; } /* 회원가입 - form style */ .joinForm { margin-top:8rem; } .tableTop { display:flex; justify-content:space-between; align-items:center; margin:6rem 0 2rem; } .pointTxt { position: relative; padding-left:1.4rem; color:#6f6f6f; } .pointTxt.red { color:#d30000; } .pointTxt:before { content:'※'; position: absolute; top: 0; left: 0; } .joinForm .formTit { display:flex; align-items:center; gap:1.4rem; } .joinForm .formTit strong { font-size:2.6rem; font-weight:800; } .joinForm .formTit span { font-size:1.8rem; font-weight:500; } i.required { overflow:hidden; display:inline-block; position:relative; width:.5em; margin-right: 0.4rem; color:#e01f1f; font-weight:400; text-indent:-10em; vertical-align:middle; } i.required::after { content:'*'; position:absolute; left:0; top:0; text-indent:0; } .formTable { width:100%; border-top:1px solid #1c2449; border-bottom:1px solid #1c2449; } .formTable th, .formTable td { height:6rem; border-bottom:1px solid #c9c9c9; background:#fff; vertical-align:middle; box-sizing:border-box; letter-spacing:-.025em; font-size:1.8rem; } .formTable th { width:22%; background:#f3f3f3; text-align:center; font-weight:600; } .formTable th label, .formTable th span { display:inline-block; } .formTable td { padding-left: 2rem; background:#fff; } .formTable td input[type="text"], .formTable td input[type="password"], .formTable td input[type="tel"], .formTable td input[type="number"], .formTable td input[type="email"], .formTable td input[type="date"], .formTable td input[type="number"], .formTable td input[type="url"] { position:relative; width:100%; height:6rem; margin: 0; padding:0 2rem; box-sizing:border-box; background:transparent; border:none; resize:none; } .formTable td input[type="number"]::-webkit-outer-spin-button, .formTable td input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .formTable td input[type="number"] { -moz-appearance: textfield; } .formTable td:has(input), .formTable td:has(select) { padding-left: 0; } .formTable ::placeholder { color:#919191; } .formTable td select { width:100%; height:6rem; border:none; font-weight:400; } .formTable td button { width:100%; max-width:13rem; height:6rem; background:#919191; color:#fff; } .formTable td .tdBox { display:flex; justify-content:space-between; min-height:6rem; border-top:1px solid #c9c9c9; } .formTable td .tdBox:first-child { border-top-width:0; } .formTable td .tdBox input, .formTable td .tdBox .selectBox { flex:1; } .formTable td .tdBox button { flex-grow:0; flex-shrink:0; } .formTable td .pointTxt { margin:0.4rem 1rem 1rem; } .formTable td .parentConfirmBtn { display:flex; align-items:center; margin:1.5rem 0; } .formTable td .parentConfirmBtn button { flex-shrink:0; margin-right: 1.5rem;} /* 회원가입 완료 */ .join_fin { line-height:1.3; text-align:center; } .join_fin p { font-weight:500; font-size:1.5em; } .joinFin_txt { margin:2em 0; } .joinFin_txt ul { margin-bottom:2em;} .joinFin_txt ul li { font-weight:300; font-size:1.063em; } .joinFin_txt dl { display:flex; justify-content:center; align-items:center; max-width:380px; margin:0 auto; border-bottom:1px solid #ddd; } .joinFin_txt .joinFin_name { border-top:1px solid #000; } .joinFin_txt dl dt { display:inline-block; min-width:160px; padding:1.125em 1.091em; box-sizing:border-box; } .joinFin_txt dl dd { flex-grow:1; padding:0.813em 4px; text-align:left; } @media screen and (max-width:960px) { /* 회원가입 - 가입유형선택 */ .joinTurnList { margin-bottom:35px; } .joinTurnList li { padding-right:11%; letter-spacing: -0.04em; font-size: 1.75rem; } .joinTurnList li:before { top:27px; } .joinTurnList li span { padding-top:65px; } .joinTurnList li span:after { width:54px; height:54px; margin-left:-27px; background-size:auto 2.364rem; } .joinType ul { flex-direction:column; align-items:center; } .joinType ul li { width:100%; max-width:400px; margin:0 0 2em; } /* 회원가입 - 약관동의 */ .clauseWrap .clauseTit { font-size: 2.5rem; } .clauseWrap .agree { padding:0; } .clauseWrap .agree > div { width: 50%; padding:1.25rem 0; } .clauseWrap .agree > div:first-child { border-right: 1px solid #ddd; } .clauseWrap .agree > div label span { display: none; } /* 회원가입 - 인증종류선택 */ .authCheck>ul { display:block; } .authCheck>ul>li { display:block; padding:2.727em 1.818em; } .authCheck>ul>li dl { padding:0 0 0 9.091em; background-position:left center; background-size:7.273em auto; text-align:left; } .authCheck>ul>li dl dd a { display:inline-block; padding:0 2.5rem 0 0; background:url(../images/use/arrow_join_type_mo.png) right center no-repeat; background-size:0.75rem auto; border:0 none; color:#dd3e00; } .authCheck .info>span { display: inline; } } @media screen and (max-width: 767px) { /* 회원가입 - form style */ .joinForm .tableTop { display:block; margin:4rem 0 1rem; } .joinForm .formTit { flex-direction:column; align-items:flex-start; } .joinForm .formTit strong { font-size: 2.5rem; } .joinForm .formTit span { display:flex; justify-content:flex-end; width:100%; } .moRowTable, .moRowTable thead, .moRowTable tbody, .moRowTable tr, .moRowTable th { display:block; width:100%; border:none; } .moRowTable th { display:flex; align-items:center; height:auto; margin:4rem 0 1.2rem; background:#fff; text-align:left; } .moRowTable tr:first-child th { margin-top:0; } .moRowTable td { display:flex; flex-wrap:wrap; align-items:center; width: 100%; height: auto; min-height:6rem; border: none; background:#f3f3f3; } .formTable td .tdBox { width: 100%; } .formTable td .pointTxt { width:100%; margin: 0; padding-top:1rem; padding-bottom:1.2rem; background: #fff; } .formTable .pointTxt::before { top: 1rem; } .formTable td .parentConfirmBtn { display: block; } .formTable td .parentConfirmBtn .pointTxt { background: #f3f3f3; } } /* 회원서비스 > 로그인 */ /* login */ .loginWrap { padding:10rem 6% 0; } .loginWrap a:hover, .loginWrap a:focus { text-decoration:underline; } .loginArea { max-width:640px; margin:0 auto; } .loginArea .topTit { margin-bottom: 2.5em; text-align:center; } .loginArea .topTit h3 { font-size:4.6rem; line-height:1; } .loginArea .topTit p { margin-top:3.6rem; font-size:1.25em; font-weight:600; line-height:3rem; } .loginForm .inputGroup { margin:2.5em 0; } .loginForm .formItem { position:relative; margin:2rem 0; font-size:1.125em; } .loginForm .formItem label { position:absolute; top:50%; left:4.6rem; padding:0 .5rem; color:#919191; background:#F3F3F3; transform:translateY(-50%); transition:all 0.3s ease; pointer-events:none; } .loginForm .formItem input { width:100%; padding:2.8rem 1.6rem 3rem 5rem; background:#F3F3F3 no-repeat left 1.6rem center; background-size:2.4rem; border-radius:.3rem; border:1px solid transparent; box-sizing:border-box; } .loginForm .formItem input:focus { border:1px solid #000; outline:none; } .loginForm .formItem input[type="text"] { background-image:url(../images/use/icon_login_id.png);} .loginForm .formItem input[type="password"] { background-image:url(../images/use/icon_login_pass.png);} .loginForm .formItem.focused label { top:0; left:1.6rem; font-size:0.875em; background-image:none; } .loginForm .formItem.focused label i { display:none; } .loginForm .btnFind { display:flex; justify-content:space-between; align-items:center; } .loginForm .btnFind .checkStyle label { cursor:pointer; font-size:1.25em; } .loginForm .btnFind .checkStyle input[type="checkbox"]:checked + label::before { background:#3535cf; border-color:#3535cf; } .loginForm .btnFind .find { display:flex; } .loginForm .btnFind .find li { position:relative; margin-left:1em; padding-left:1em; } .loginForm .btnFind .find li::before { content:''; position:absolute; top:50%; left:0;width:1px;height:1em;margin-top: -.5em;background: #919191;} .loginForm .btnFind .find li:first-child::before { display:none; } .loginForm .btnFind .find li a {display: block;font-size:1.25em;color: #919191;} .loginForm .btnLogin {margin-top: 2.5em;} .loginForm .btnLogin a, .loginForm .btnLogin button {display: block;width: 24rem;margin: 2rem auto;font-size:1.25em;color:#3535cf;line-height: 3em;text-align: center;border-radius: .1875em;} .loginForm .btnLogin .point {background: #3535cf;color: #fff;} /* find id */ .tabBtn { display:flex; margin-bottom: 2rem; } .tabBtn li { flex:1; } .tabBtn li a { display:block; padding:.625em 0; text-align:center; border-bottom:8px solid #C9C9C9; } .tabBtn li a span { font-size:1.5em; color:#919191; font-weight:600; } .tabBtn li .active {border-color:#3535cf; } .tabBtn li .active span { color:#3535cf; } .loginArea .tabBtn { margin-top:4rem; } .findForm .infoTxt { margin-top: 1.9em; margin-bottom:3em; text-align:center; color:#343434; font-weight:500; font-size: 2rem; } .findForm dl { margin-top:2.5em;} .findForm dl dt {margin-bottom:.75em;} .findForm dl dt label {font-size:1.25em;font-weight:600; text-align:center; color:#343434;} .findForm dl dd input {width: 100%;font-size: 1.25em;color:#343434;padding: 2.8rem 2rem;background: #F3F3F3;border-radius: .3rem;border: 1px solid transparent;box-sizing: border-box;} .findForm dl dd input::placeholder { color:#919191;} .findForm dl dd input:focus { border:1px solid #000; outline:none; } .findForm dl dd .certifi { display:flex; gap:.625em; } .findForm dl dd .certifi>p { flex-grow:1; position:relative; } .findForm dl dd .certifi>p input { background:#fff; border-color:#3535cf;} .findForm dl dd .certifi>p span {position:absolute;top: 50%;right: 2rem;transform: translateY(-50%);font-size: 1.25em;font-weight: 600;color:#3535cf;} .findForm dl dd .certifi>button { flex-shrink:0; width:16.6rem; border-radius: .3rem;font-size:1.25em;font-weight:600; color:#fff;background:#3535cf;} .findForm .btnBox { margin-top:8rem; } .findForm .resultTxt { margin-top:4rem; font-size:1.625em; font-weight:800; text-align:center; } .findForm .resultTxt strong { color:#3535cf; } .findForm .btnBox.col1 { max-width:24rem; margin-top:8rem; } @media only screen and (max-width:960px) { .loginWrap { padding-top: 2rem; } .loginArea .topTit h3 { font-size:2.5rem; } .tabBtn li a span { font-size:2rem; } .findForm .btnBox { max-width:none; margin-top: 6rem; } } /* btn Style */ .btnBox { max-width:48rem; width:100%; margin:6rem auto 0; background:#fff; color:#1c2449; font-size:2rem; } .btnBox ul { display:flex; justify-content:space-around; border:1px solid #1c2449; border-radius:.3rem; } .btnBox ul li { flex:1; height:6rem; } .alertWrap .btnBox ul li { height:8rem; } .btnBox button, .btnBox a { width:100%; height:100%; background:#fff; font-weight:600; } .btnBox button:focus, .btnBox a:focus { outline:2px dashed #4040a4; } .btnBox a { display:flex; justify-content:center; align-items:center; } .btnBox button:disabled { background:#c9c9c9; border-radius:.5rem; color:#fff; } .btnBox .submitBtn { background:#1c2449; color:#fff; } @media screen and (max-width:720px) { .btnBox { max-width:none; } .btnBox button:disabled { border-radius:0; } } /* alert layerpopup */ dialog { padding: 0; border: none; } dialog[open] { overflow-y: auto; display: block; z-index: 900; position: fixed; top: 0; left: 0; width: 100%; } dialog::backdrop { background: rgba(0,0,0,0.7); } .alertWrap { display: none; text-align: center; } dialog.alertWrap, div.alertWrap .popInner { overflow: hidden; width: 100%; max-width:515px; border-radius:1.2rem; background-color: #fff; } div.alertWrap { z-index: 900; position:fixed; top: 0; left: 0; width: 100%; height: 100%; margin:0 auto; background-color:rgba(0,0,0,0.7); } div.alertWrap .popLayout { display:flex; justify-content:center; align-items:center; width: 100%; height: 100%; } .alertWrap .txtArea { padding:2.875em 7.7% 2.25em; } .alertWrap .txtArea .poinTxt { margin-bottom:1.1334em; padding-top: 2.533em; background:url(../images/sub/icon_notice.svg) no-repeat 50% 0; background-size:6.5rem auto; color: #3535cf; font-weight: 700; font-size: 1.875em; } .alertWrap .txtArea .tit { font-size: 1.5em; } .alertWrap .txtArea .txt { margin-top:0.5455em; word-break:keep-all; font-size: 1.375em; } .alertWrap .confirmBtn { width: 100%; height:3.182em; background: #3535cf; color: #fff; font-weight: 500; font-size: 1.375em; } @media screen and (max-width:767px) { dialog.alertWrap, div.alertWrap .popInner { max-width:36.25rem; } .alertWrap .txtArea .poinTxt { background-size:5rem auto; font-size: 2.25rem; } .alertWrap .txtArea .tit { font-size:2.125rem; } .alertWrap .txtArea .txt { font-size:1.875rem; } .alertWrap .confirmBtn { font-size: 2rem; } } /* searchStyle */ .searchWrap { padding:0 6%; } .searchWrap .searchInner {display:flex;position:relative;max-width:1180px;margin:0 auto 2.5em; border:1px solid #dcdcdc;box-sizing:border-box; font-weight:500; letter-spacing:-.05em; } .searchWrap .selectItem { display:flex; flex-grow:0; flex-shrink:0; align-items:center; } .searchWrap .selectItem .buttonSelect { flex-grow:1; position:relative; min-width:12.188em; } .searchWrap .column .selectItem .buttonSelect { min-width:10em; } .searchWrap .selectItem .buttonSelect::before { content:''; display:block; position:absolute; top:50%; right:-1px; width:1px; height:1.6875em; margin-top:-.84375em; background:#e1e1e1; } .searchWrap .selectItem .buttonSelect button { height:6rem; padding:0 2.35294em 0 1.17647em; color: #171717; font-weight: 500; font-size:1.125em; } .searchWrap .selectItem .buttonSelect button::after { right:1.875rem; } .searchWrap .inputItem { flex-grow:1; flex-shrink:1; position:relative; padding:0 1.5rem; } .searchWrap .inputItem input { width:100%; height:6rem; border:none; font-size: 1.125em; } .searchWrap .btnFilter { flex-grow:0; flex-shrink:0; } .searchWrap .btnFilter button { overflow:hidden; display:block; position:relative; height:100%; padding:0 1.3334em; border-left:1px solid #e1e1e1; font-size:1.125em; transition:all .15s; } .searchWrap .btnFilter button span { display:inline-block; padding-left:1.3334em; background:url(../images/board/icon_board_search.png) 0 65% no-repeat; background-size:1em auto; line-height:1.5; color:#044bbf; font-weight:700; transition:all .15s; } .searchWrap .btnFilter button:focus, .searchWrap .btnFilter button:hover { background:#044bbf; } .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.ai { background-image:url(../images/board/icon_file_ai.png); } i.hwp, i.hwpx { background-image:url(../images/board/icon_file_hwp.png); } i.pdf { background-image:url(../images/board/icon_file_pdf.png); } i.txt { background-image:url(../images/board/icon_file_txt.png); } i.doc { background-image:url(../images/board/icon_file_doc.png); } i.xls, i.xlsx { background-image:url(../images/board/icon_file_xls.png); } i.ppt, i.pptx { background-image:url(../images/board/icon_file_ppt.png); } i.zip { background-image:url(../images/board/icon_file_zip.png); } i.eps { background-image:url(../images/board/icon_file_eps.png); } i.fi { background-image:url(../images/board/icon_file_fi.png); } i.jpg { background-image:url(../images/board/icon_file_jpg.png); } i.gif { background-image:url(../images/board/icon_file_gif.png); } i.id { background-image:url(../images/board/icon_file_id.png); } .boardStyle {overflow:hidden;max-width:1180px;margin:0 auto;padding:0 6%;} .boardStyle .boardTit { text-align: center; font-weight:600; font-size: 2.5em; } .boardStyle .boardTxt { margin-top: 0.625rem; margin-bottom:1.909em; color: #626262; text-align: center; font-weight:500; font-size: 1.375em; } .boardStyle .boardTxt b { display: inline-block; margin-left:0.5em; } .noData {padding: 5em 0;border-bottom:1px solid #dcdcdc;text-align:center;font-size:1.625em;} /* board List */ .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 .file {width:4.5em;} .boardList .hits { width: 6.5em; } .boardList .catetory {width:10em;} .boardList .writer {width:9em;} .boardList .status {width:7.5em;} .boardList .date {width:8em;} .boardList th, .boardList td {box-sizing:border-box;line-height:1.5;text-align:center;color:#373737;letter-spacing:-.025em;font-size: 1.125em; vertical-align:middle; } .boardList th {padding:0.8889em .5em;font-weight:400;} .boardList td { padding:1.111em .5em; } .boardList td i { font-style:normal; } .boardList .subject {text-align:left;} .boardList th.subject { padding-left:.5882em; text-align:center; } .boardList td.subject a { overflow:hidden;display:inline-block;max-width:calc(100% - 6.2rem);white-space:nowrap;text-overflow:ellipsis;vertical-align: middle; } .boardList td .new { display:inline-block; vertical-align:middle; width:4.2rem; height:1.9rem; margin-bottom:3px; margin-left: 0.5em; background-image:url(../images/board/ico_new.png); background-repeat:no-repeat; background-position:center; background-size:100%; text-indent:-9999px; } .boardList .num .notice { display: inline-block; padding:3px .7em 1px; background: #3d37ac; border-radius:2em; color: #fff; font-weight:500; font-size:0.8333em; } .boardList td .icoStatus, .formTable 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; } .boardList td .icoStatus.ing, .formTable td .icoStatus.ing { background:#238aaf; } .boardList td .icoStatus.finish, .formTable td .icoStatus.finish { background:#4e4e4e; } .boardList td .fileIcon { overflow:hidden; display:inline-block; width:2.9rem; height:2.9rem; background-image: url(../images/board/icon_file.png); background-position:center; background-repeat:no-repeat; background-size:contain; vertical-align:top; color:transparent; } .boardList td.subject i { overflow: hidden; display: inline-block; margin-right: 0.25em; background-repeat: no-repeat; background-position: 50% 50%; text-indent:-999px; vertical-align:bottom; } .boardList td i.secret { width:1em; background-image:url(../images/board/ico_lock.gif); } .boardList td i.reply { overflow:visible; position:relative; margin-left:1.333em; margin-right: 0.6rem; padding:0.250em 0.583em; border:1px solid #b5b8bc; background:#f6f7f9; color:#3f3f3f; vertical-align:baseline; text-indent:0; font-style:normal; font-size:12px; } .boardList td i.reply:before { content:''; position:absolute; top:0; left:-1.333em; width:1.4rem; height:100%; background:url(../images/board/icon_reply.png) left top no-repeat; background-size:1.166em auto; } /* board List - btn */ .boardBtn { margin-top:3em; 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; border-radius:.5rem; font-size:1.063em; 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:#3d37ac; border-color:#3d37ac; color:#fff; } .boardBtn i { display:inline-block; width:1.25em; height:1.125em; margin-right:.1875em; background-image:url(../images/board/bg_board_btn.png); background-repeat:no-repeat; background-size:100% auto; vertical-align:middle; font-size:16px; } .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/board/bg_board_btn_on.png); } .boardBtn i.list { background-position:0 -14.1875em; } .boardBtn i.write { background-position:0 -3.625em; } .boardBtn i.cancel { 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/board/bg_board_btn_next.png); background-position:center; } .boardBtn a:focus i.next, .boardBtn a:hover i.next { background-image:url(../images/board/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:#3d37ac; border-radius:1.333em; color:#fff; text-align:center; font-size:1.125em; } /* pageNav */ .pageNav { margin-top:2.875em; } .pageNav ul { display:flex; justify-content:center; align-items:center; } .pageNav ul li { margin:0 2px; color:#737373; } .pageNav ul li a, .pageNav .pcVer span, .pageNav ul li strong { display:block; padding:0 .5em; } .pageNav ul li a, .pageNav ul li.index { position:relative; box-sizing:border-box; color:#737373; font-weight:400; font-size:1.125em; } .pageNav ul li.prev { margin-right:1em; } .pageNav ul li.next { margin-left:1em; } .pageNav .pcVer span::before { content:'...'; display:inline-block; margin-right:.5em; } .pageNav .pcVer strong { color:#3d37ac; font-weight:700; text-decoration:underline; } .pageNav ul li.pageBtn a, .pageNav ul li.prev a, .pageNav ul li.next a { overflow:hidden; width:3.9rem; height:3.9rem; margin:0 3px; padding:0; background-position:center; background-repeat:no-repeat; background-size:1em auto; border:1px solid #e3e3e3; border-radius:50%; text-indent:-999px; } .pageNav ul li.prev a, .pageNav ul li.next a { background-image: url(../images/board/arrow_page.png); } .pageNav ul li.prev a:hover, .pageNav ul li.prev a:focus, .pageNav ul li.next a:hover, .pageNav ul li.next a:focus { border-color:#3d37ac; background-color:#3d37ac; background-image: url(../images/board/arrow_page_on.png); } .pageNav ul li.first a, .pageNav ul li.last a { background-image: url(../images/board/btn_first.png); } .pageNav ul li.first a:hover, .pageNav ul li.first a:focus, .pageNav ul li.last a:hover, .pageNav ul li.last a:focus { background-image: url(../images/board/btn_first_w.png); } .pageNav ul li.next a, .pageNav ul li.last a { transform:rotate(180deg); } .pageNav ul li.pageBtn a:hover, .pageNav ul li.pageBtn a:focus { border-color:#3d37ac; background-color:#3d37ac; } .pageNav .mVer { display:none; } .pageNav .mVer li { display:inline-block; white-space:nowrap; } .pageNav .mVer li strong { display:inline-block; margin-right:.25em; font-weight:700; color:#3d37ac; } .pageNav .mVer li span { display:inline-block; margin-left:.25em; color:#535353; } .pageNav .mVer li.prev a, .pageNav .mVer li.next a { overflow:hidden; display:block; min-width:4.375rem; height:4.375rem; background-size:auto 1rem; border:1px solid #dcdcdc; color:#444; } /* galleryWrap */ .galleryBoard ul { display:flex; flex-wrap:wrap; } .galleryBoard ul li { width:32.54%; margin-bottom:0.875em; margin-right:1.19%; box-sizing:border-box; vertical-align:top; } .galleryBoard ul li:nth-child(3n) { margin-right: 0; } .galleryBoard a { display:block; position: relative; padding:1.7rem 1.7rem 2.6rem; border:1px solid #dcdcdc; border-radius:.25em; transition:all .4s; } .galleryBoard a:hover, .galleryBoard a:focus { border-color:#0061ce; box-shadow: 0px 0.2rem 1rem 0.6rem rgba(0,0,0,0.1); } .galleryBoard a span { display:block; } .galleryBoard a span.img { overflow:hidden; position:relative; padding-top:59.77011%; background:#ddd url(../images/board/img_dfault.jpg) center no-repeat; background-size:cover; border-radius:.25em; } .galleryBoard a span.img::after { content:''; position: absolute; top: 0; left: 0; width:0; height: 100%; transition:background 0.4s; } .galleryBoard a:hover span.img::after, .galleryBoard a:focus span.img::after { width: 100%; background-color:rgba(000,000,000,0.43); } .galleryBoard a span.img img { display: block; position: absolute; top: 0; left: 0; object-fit:cover; object-position:center top; width:100%; height:100%; transition:0.4s; } .galleryBoard a span.tit { overflow: hidden; margin-top: 1.4em; white-space:nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 1.25em; } .galleryBoard a span.date { margin-top: 1em; } /* 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; text-align:center; } .viewTit h4 { font-size:1.25em; font-weight:500; letter-spacing:-.025em; line-height:1.3; } .viewTit .viewInfo { flex-shrink:0; display:flex; align-items:center; margin-left: 0.5em; } .viewTit .viewInfo li { position:relative; padding:0 .6em; 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: 1rem;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 .img { text-align:center; } .viewContent .viewContentInner .img .report { max-width:926px; margin-bottom:2em; border:1px solid #c2c2c2; } .viewContent .viewContentInner .vidFrame { position: relative; margin:0.25em 0; padding-top:56.25%; } .viewContent .viewContentInner .vidFrame video, .viewContent .viewContentInner .vidFrame iframe { display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } /* 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-weight:400; color:#656565; box-sizing:border-box; } .boardFile h5::before { content:''; position:absolute; left:0; top:50%; width:2px; height:2px; margin-top:-.0666em; background:#656565; } .boardFile h5::after { content:''; position:absolute; right:0; top:50%; width:1px; height:1.75em; 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 { flex-shrink:0; display:inline-block; width:1.4375em; height:1.75em; background-repeat:no-repeat; background-size:100%; text-indent:-9999px; } .boardFile ul li span.fileName { overflow:hidden; display:block; margin-left:.5em; 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/board/icon_down.png) no-repeat left .125em; background-size:auto 0.875em; color:#656565; } .fileBox { letter-spacing:-.025em; } .fileBox .tit { color:#19296c; font-weight:600; } .fileBox .boxList { overflow:hidden; display:flex; justify-content:space-around; flex-wrap:wrap; gap:1em; } .fileBox .boxList>li { overflow:hidden; flex:1; width:100%; display:flex; justify-content:space-between; border:1px solid #dcdcdc; box-sizing:border-box; } .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 { 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 { background:#0061ce; color:#fff; } .fileBox .fileControl i { display:block; width:100%; height:1.7rem; margin-bottom:.41176em; background:center top no-repeat; background-size:auto 100%; } .fileBox .fileControl .download i { background-image:url(../images/board/icon_file_down.png); } .fileBox .fileControl .quickView i { background-image:url(../images/board/icon_file_view.png); } .fileBox .fileControl .quickListen i { background-image:url(../images/board/icon_file_listen.png); } .fileBox .fileControl .download a:hover i, .fileBox .fileControl .download a:focus i { background-image:url(../images/board/icon_file_down_on.png); } .fileBox .fileControl .quickView a:hover i, .fileBox .fileControl .quickView a:focus i { background-image:url(../images/board/icon_file_view_on.png); } .fileBox .fileControl .quickListen a:hover i, .fileBox .fileControl .quickListen a:focus i { background-image:url(../images/board/icon_file_listen_on.png); } .fileBox .fileControl span { display:block; } /* 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: 1.125em;} .commentForm .writeBox textarea {width: 100%;margin-top: .7647em;height: 4em;border:none;box-sizing:border-box;font-size: 1.063em;resize:none; } .commentForm .writeBox textarea::-webkit-scrollbar { display:none; } .commentForm .writeBox textarea::placeholder {color:#cecece;} .commentForm .writeBox .txtCount {position: absolute; bottom: 1.125em; right: 1.125em; font-weight: 300;color: #7c7c7c;} .commentForm .btn {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width:10rem;border: 1px solid #dcdcdc;border-radius: 0 .8rem .8rem 0;cursor:pointer;transition: all .15s; font-size: 1.0625em; font-weight: 500; } .commentForm .btn i {display:inline-block; width:2rem;height:1.8rem;margin-right: .5rem;background-image:url(../images/board/bg_board_btn.png);background-repeat:no-repeat; background-size:100% auto;vertical-align: middle; background-position: 0 -5.8rem; } .commentForm .btn:focus, .commentForm .btn:hover {background:#3d37ac; color:#fff; } .commentForm .btn:focus i, .commentForm .btn:hover i {background-image:url(../images/board/bg_board_btn_on.png);} .commentList {position:relative;margin-top:2.2em;} .commentList .count {padding: 0 1.6666em 1em; font-size: 1.125em;color: #808280;border-bottom: 1px solid #dcdcdc;} .commentList .count em { color:#3d398d; font-weight: 700; } .commentList .tableInfo {position:absolute; top:.3rem; right:3rem; 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: 1.063em;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: .8em;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 { margin-left:1.5em;} .commentList .item .titArea .btn li button {font-size: 1.063em;color: #6b6b6b;} .commentList .item .titArea .btn li i {display:inline-block;margin: -.125em .4375em 0 0;background-repeat:no-repeat;background-size: 100%;vertical-align: middle; } .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 .txtArea {margin-top: 1.25em;} .commentList .item .txtArea pre {white-space:pre-wrap;font-size: 1.063em;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 .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/board/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:#3d37ac; border-color:#3d37ac; } .viewCtrl .ctrlBtn a:focus i, .viewCtrl .ctrlBtn a:hover i { background-image:url(../images/board/arrow_page_on.png); } .viewCtrl .ctrlBtn span { overflow:hidden; position:relative; white-space:nowrap; padding:1px 0; font-size:1.063em; 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:#3d37ac; transition:all .2s; } .viewCtrl .ctrlBtn a:focus span, .viewCtrl .ctrlBtn a:hover span { color:#1a3ac5; } .viewCtrl .boardBtn { margin-top:0; } /* board write */ .writeTbl { width:100%; border-bottom:1px solid #dcdcdc; } .writeTbl th { width:12.0588em; padding:2.8rem 3rem; border:1px solid #dcdcdc; border-width:1px 0; font-size:1.063em; 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:4.8rem; padding:0 1.5rem; font-size:1.063em; border:1px solid #dcdcdc; border-radius:.4em; 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:43rem; } .writeTbl td .editor { height:16.625em; box-sizing:border-box; } .writeTbl td .editor textarea { width:100%; height:100%; padding:1.5rem; border:1px solid #dcdcdc; resize:none; font-size:1.063em; border-radius:.4rem; 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:20rem; } .writeTbl td .groupEmail .tilde { margin:0 .4117em; font-size:1.063em; 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:18rem; height:4.8rem; padding:0 4rem 0 1.5rem; font-size:1.063em; border:1px solid #dcdcdc; border-radius:.4rem; box-sizing:border-box; } .writeTbl td .groupEmail .domain .buttonSelect button::after { right:1.5rem; } .writeTbl td .groupEmail .domain .selectList { top:2.8125em; width:100%; } .writeTbl td .groupEmail .domain .selectList.top { top:auto; bottom:100%; margin:0 0 -.125em; } .writeTbl td .tableInfo { margin-top:.3333em; font-weight:300; text-align:left; } .writeTbl td .btnSel { display:flex; } .writeTbl td .btnSel .buttonSelect { margin-left:.625em; } .writeTbl td .btnSel .buttonSelect:first-child { margin-left:0; } .writeTbl td .btnSel .buttonSelect button { min-width:18rem; height:3rem; padding:0 2.5rem 0 1.5rem; font-size:1.063em; border:1px solid #dcdcdc; border-radius:.4rem; box-sizing:border-box; } .writeTbl td .btnSel .buttonSelect button::after { right:1.5rem; } .writeTbl td .btnSel .selectList { top:100%; width:100%; } .writeTbl ul.fileList li { overflow:hidden; display:flex; align-items:center; padding:.3125em 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:4.8rem; padding:0 3rem; font-size:1.063em; 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:1.063em; } .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 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/board/icon_download.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:4.8rem; padding:0 .7647em; font-size:1.063em; border:1px solid #2544c8; border-radius:0.4rem; box-sizing:border-box; color:#2544c8; cursor:pointer; } .writeTbl ul.fileList li .label label span { padding-left:1.4117em; background-image:url(../images/board/icon_attach.png); background-repeat:no-repeat; background-position:left center; background-size:1.5rem auto; } /* 공공누리 */ .openType { max-width:1180px; margin:6.25em auto 0; padding:0 6%; } .openType .item { display:flex; align-items:center; padding:20px; border: 1px solid #dadada; } .openType .item .img { margin-right: 1.5em; } .openType .item .txt a { font-weight: 700; } @media screen and (max-width:1024px) { /* filterWrap */ .searchWrap .searchInner.column, .searchWrap .searchInner.column .selectItem { flex-wrap:wrap; } .searchWrap .searchInner.column { } .searchWrap .column .selectItem { width: 100%; border-bottom: 1px solid #e1e1e1; } .searchWrap .column .selectItem .buttonSelect { flex-grow:0; min-width:auto; width: 50%; border-bottom: 1px solid #e1e1e1; } .searchWrap .column .selectItem .buttonSelect:last-child { border-bottom: none; } .searchWrap .column .inputItem { border-top:none; } } @media screen and (max-width:960px) { /* filterWrap */ .searchWrap .searchInner { flex-wrap:wrap; } .searchWrap .selectItem { flex-grow:1; } .searchWrap .inputItem input, .searchWrap .btnFilter button, .searchWrap .selectItem .buttonSelect { min-width:12.5rem; } .searchWrap .selectItem .buttonSelect::before { z-index: 1; } .searchWrap .selectItem .buttonSelect button { padding:0 1.875rem; } .searchWrap .selectItem .buttonSelect button::after { right: 1em; } .searchWrap .inputItem { margin-top: -1px; padding:0; border-top:1px solid #dcdcdc; } .searchWrap .inputItem input { padding:0 0.8em; } .searchWrap .btnFilter { width: 100%; border-top: 1px solid #dcdcdc; } .searchWrap .btnFilter button { width:100%; height:3.194em; border: none; } .searchWrap .btnFilter button span { background-position:0 50%; } /* Board List */ .boardStyle .boardTit { font-size: 2em; } .boardStyle .boardTxt { font-size: 1.273em; } .boardList .moNone { display:none; } .boardList th, .boardList td { } .boardList td.subject { padding-left:1em; } .boardList td.subject i.reply { font-size: 10px; } /* Board List - Btn */ .boardBtn p a { display:block; margin-right:2px; padding:10px 20px 12px 49px; font-size:14px; } .boardBtn p input { display:block; margin-right:2px; padding:12px 15px 12px 40px; font-size:14px; } .boardBtn .modify { background-position:24px -9px; } .boardBtn .write { background-position:24px -47px; } .boardBtn .cancel { background-position:24px -104px; } .boardBtn .delete { background-position:24px -161px; } .boardBtn .list { background-position:24px -216px; } /* boardPage */ .pageNav .pcVer { display:none; } .pageNav .mVer { display:flex; } .pageNav ul li.prev { margin-right:1em; } .pageNav ul li.next { margin-left:1em; } /* fileList */ .fileBox .boxList { overflow:hidden; flex-direction:column; } /* galleryWrap */ .galleryBoard ul li { width:48.5%; margin-bottom:1em; margin-right:3%; } .galleryBoard ul li:nth-child(3n) { margin-right:3%; } .galleryBoard ul li:nth-child(even) { margin-right: 0; } .galleryBoard a { padding:1rem 1rem 1.75rem; } .galleryBoard a span.tit { margin-top: 1em; } .galleryBoard a span.date { margin-top: 0.5em; } /* board View */ .boardStyle .viewTit { flex-direction:column; justify-content:flex-start; align-items:flex-start; } .boardStyle .viewTit h4 { margin-bottom: 1rem; word-break:keep-all; } .viewContent { padding:2em 1%; border:none; } .viewContent .viewContentInner { padding:0; } .viewContent .viewContentInner .img { padding:0; } /* board view - File */ .boardFile { padding:20px; background-color:#fbfbfb; border:1px solid #cfcfcf; } .boardFile h5 { display:none; } .boardFile ul { margin-left:0; } .boardFile > p { display:block; } .fileName span { display:none; } /* board view - Ctrl */ .viewCtrl { display: block; margin-top:1em; } .viewCtrl .ctrlBtn { display: none; } /* board view - comment */ .commentWrap { margin-top: 1em; margin-bottom:3em; } .commentList .item .titArea .btn li { margin-left: 0.5em; } .commentList .item .titArea .btn li i { display: none; } .commentList .item { padding:1.875em 1em; } /* board write */ .writeTbl th { width:8.5rem; padding:1.25em 0; } .writeTbl td { padding:1.25em 0; word-break:break-all; } .writeTbl td input[type="text"].text { width:100%; } .writeTbl td .editor { height:13.6363em; } .writeTbl td .groupEmail { flex-wrap:wrap; margin-top:1em; } .writeTbl td .groupEmail input[type="text"] { width:90%; } .writeTbl td .groupEmail .domain { display:block; width:100%; margin-top:.2727em; } .writeTbl td .groupEmail .domain input[type="text"] { width:100%; } .writeTbl td .groupEmail .domain .buttonSelect { margin:.2727em 0 0; } .writeTbl td .groupEmail .domain .buttonSelect button { height:3.75em; } .writeTbl td .tableInfo { margin-top:.7272em; font-size:1em !important; } .writeTbl td .btnSel { display:block; } .writeTbl td .btnSel .buttonSelect { margin:.2727em 0 0; } .writeTbl td .btnSel .buttonSelect button { min-width:auto; height:3.75em; } .writeTbl ul.fileList { margin:-.4545em 0; } .writeTbl ul.fileList li { flex-wrap:wrap; padding:.4545em 0; } .writeTbl ul.fileList li .fileArea { width:100%; margin-bottom:.2727em; } .writeTbl ul.fileList li .txt { flex-grow:1; width:auto; padding:0 0.9375em; } .writeTbl ul.fileList li .txt span { line-height:4.75rem; } .writeTbl ul.fileList li .btn { flex-shrink:0; width:4.0909em; margin-left:.4545em; } .writeTbl ul.fileList li .btn .delBtn label { width:4.75rem; height:4.75rem; } .writeTbl ul.fileList li .btn .delBtn label::before, .writeTbl ul.fileList li .btn .delBtn label::after { width:1em; } .writeTbl ul.fileList li .btn .minus:before, .writeTbl ul.fileList li .btn .plus:before, .writeTbl ul.fileList li .btn .plus:after { width:1em; } .writeTbl ul.fileList li .btn .download { background-image:url(../images/board/btn_file_down_mo.png); background-size:auto 1em; } .writeTbl ul.fileList li .label { width:49.5%; margin:0; } .writeTbl ul.fileList li .label label { height:4.75rem; font-size: 1em; } .writeTbl ul.fileList li .label label span { background-image:url(../images/board/icon_attach_mo.png); background-size:auto 1.5rem; } } @media screen and (max-width:359px) { .searchWrap .inputItem input, .searchWrap .btnFilter button { min-width:auto; } .searchWrap .selectItem .buttonSelect { min-width:33.33333%; } } /* 페이지 준비중 */ .readyArea { position:relative; max-width:780px; margin:3em auto; padding:.5em 6%; } .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 28.2rem; border-bottom:1px solid #e0ebf8; color:#26376d; font-size:3.6rem; } .readyArea .small { color:#24315c; font-size:1.8rem; } .readyArea .small p { margin-top:.75em; } /* default Content */ .defaultLayout { max-width:1180px; margin:0 auto; padding:0 6%; } .defaultLayout .tit1 { margin-top: 5.8rem; margin-bottom:1.6rem; font-size:2.4rem; font-weight:500; } .defaultLayout .buTit { margin-top:4rem; margin-bottom:2rem; margin-left: 0; padding-left:1em; background:url(../images/sub/bu_tit.png) no-repeat left 0.2rem; background-size:1.5rem auto; font-weight:500; font-size:2.4rem; } .defaultLayout p.txt { margin-top: 2rem; margin-bottom: 2.2rem; word-break:keep-all; line-height: 1.45; font-size: 1.8rem; } .defaultLayout [class*="txtList"] { margin-top: 2.4rem; margin-bottom: 2.4rem; } .defaultLayout [class*="txtList"] li { margin:1rem 0; font-size: 1.8rem; } .defaultLayout .txtList2 > li { padding-left:1.8rem; background:url(../images/sub/bu_list.png) no-repeat 0 0.8rem; background-size:1.1rem auto; font-weight: 400; } .defaultLayout .txtList3 > li { padding-left: 2rem; background:url(../images/sub/bu_list2.png) no-repeat 0 0.6rem; background-size:auto 1rem; font-weight: 400; } .defaultLayout .txtList4 > li { padding-left:1.2rem; background:url(../images/sub/bu_list3.png) no-repeat 0 0.7rem; background-size:auto 0.8rem; font-weight: 400; } .defaultLayout ol.countList { counter-reset:content-counter; } .defaultLayout ol.countList>li { display:flex; font-size:1.125rem; } .defaultLayout ol.countList>li::before { counter-increment:content-counter; content:counter(content-counter) '. '; } .defaultLayout .txtBox { margin:-1em 1em 1em; padding:1em; border:1px solid #dcdcdc; } .defaultLayout .boxTxt { margin-top:0.625em; margin-bottom:2em; padding:1.625em 2em 1.875em; background: #f0f3f4; } .defaultLayout .btnGroup { display:flex; justify-content:center; margin:1.75em 0; } .defaultLayout .btnGroup a, .defaultLayout .btnGroup button { display: inline-block; margin:0 1rem; padding:0.8333em 2.3333em; border-radius:0.375rem; border: 1px solid #3d37ac; color: #3d37ac; text-align: left; letter-spacing: -0.03em; font-weight: 500; font-size: 1.125rem; box-sizing:border-box; } .defaultLayout .btnGroup span { display:inline-block; padding-right: 5em; background-repeat: no-repeat; background-position: right center; } .defaultLayout .btnGroup .down span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='19'%3E%3Cpath fill='%233D37AC' fill-rule='evenodd' d='M19.999 18.999h-20v-5h1v4h19v-4h1v5h-1ZM9.792 13.156h.001L5.136 8.5l.707-.707 4.156 4.156V-.001h1V11.95l4.157-4.157.708.707-5.364 5.363-.708-.707Z'/%3E%3C/svg%3E"); background-size:1.16667em auto; } .defaultLayout .btnGroup a:hover, .defaultLayout .btnGroup a:focus, .defaultLayout .btnGroup button:hover, .defaultLayout .btnGroup button:focus { background-color: #3d37ac; color: #fff; transition:background 0.4s; } .defaultLayout .btnGroup .down:hover span, .defaultLayout .btnGroup .down:focus span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='21px' height='19px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M19.999,18.999 L0.999,18.999 L-0.001,18.999 L-0.001,18.999 L-0.001,13.999 L0.999,13.999 L0.999,17.999 L19.999,17.999 L19.999,13.999 L20.999,13.999 L20.999,17.999 L20.999,18.999 L19.999,18.999 ZM9.792,13.156 L9.793,13.156 L5.136,8.500 L5.843,7.793 L9.999,11.949 L9.999,-0.001 L10.999,-0.001 L10.999,11.950 L15.156,7.793 L15.864,8.500 L10.500,13.863 L9.792,13.156 Z'/%3E%3C/svg%3E"); } /* tableStyle */ .tableDrag { display:none; font-size:1em; color:#666; text-align:center; } .tableDrag span { display:inline-block; padding:.3571em 0 .3571em 4.5em; background:url(../images/sub/icon_table_drag.png) left center no-repeat; background-size:3.5714em auto; } .tableUnit { display:block; text-align:right; font-size:.9375em; color:#586167; } .tableInfo { position:relative; padding-left:1em; color:#3535cf; font-weight:500; font-size: 1.6rem; } .tableInfo::before { content:'※ '; position:absolute; left:0; top:0; } .tableStyle { table-layout:fixed; width:100%; margin-top:1rem; margin-bottom:2rem; border-top:2px solid #4040a4; font-size:1.8rem; } .viewCaption caption { width:auto; height:auto; margin:.25em 0; text-indent:0; text-align:left; } .tableStyle th, .tableStyle td { padding:1.5rem 1.6rem; border:1px solid #d3d5d7; vertical-align:middle; text-align:center; word-break:keep-all; font-weight:400; } .tableStyle th.bdNone, .tableStyle td.bdNone { border-left:none; } .tableStyle th, .tableStyle .th { color:#272770; background:#fafafa; } .tableStyle td ul { margin:0; text-align:left; } .tableStyle td ul li { font-size:1em; } @media screen and (max-width:767px) { .defaultLayout .tit1 { margin-top: 4.75rem; } .defaultLayout .buTit { font-size: 1.273em; } .defaultLayout .btnGroup { justify-content:space-between; } .defaultLayout .btnGroup a, .defaultLayout .btnGroup button { width: 48%; margin: 0; padding:1rem 0; text-align: center; font-size: 1.273em; } .defaultLayout .btnGroup span { padding-right:3.1667em; } } @media screen and (max-width:960px) { /* tableStyle */ .tableDrag { display:block; } .scrollTblWrap { overflow-x:auto; overflow-y:hidden; width:100%; margin-bottom: 1em; } .scrollTblWrap table { width:860px; margin-bottom: 0; } .tableInfo { padding-left:1.2em; background-size:10px auto; } .moTable colgroup, .moTable thead { display: none; } .moTable, .moTable tbody { display: block; } .moTable tbody tr, .moTable tbody tr td, .moTable tbody tr th { display:flex; } .moTable tbody tr { flex-wrap:wrap; } .moTable th, .moTable td { align-items:center; border-top: none; box-sizing:border-box; } .moTable th { justify-content:center; width: 11.75rem; } .moTable td { width:calc(100% - 11.75rem); border-left: none; text-align: left; } } /* 평생학습관 > 인사말 */ .greetings { max-width:1114px; margin:0 auto; padding:0 6%; } .greetings .txtArea { padding-left: 46.8%; background:url(../images/sub/img_greetings.png) no-repeat 0 0; background-size:39.67684% auto; line-height: 1.5; } .greetings .txtArea h4 { margin-bottom:3rem; font-weight: 400; font-size: 1.75em; } .greetings .txtArea h4 b { display: block; font-size:1.0714em; } .greetings .txtArea p { letter-spacing: -0.04em; word-break:keep-all; font-size: 1.125em; } .greetings .sign { margin-top: 2em; text-align: right; } .greetings .sign span { display: inline-block; margin-bottom: 0.4rem; vertical-align: bottom; font-size: 1.25em; } .greetings .sign b { display: inline-block; margin-left: 0.375em; vertical-align: top; font-size: 2em; font-family:'경기천년바탕', 'GyeonggiBatangRegular', 'Batang', '바탕'; } @media screen and (max-width: 767px) { .greetings .txtArea { padding-top: 37.5rem; padding-left: 0; background-size:27.75rem auto; } .greetings .txtArea h4 { margin-bottom:0.8em; } .greetings .txtArea p, .greetings .sign span { font-size:1.875rem; } .greetings .sign b { font-size:2.875rem; } } /* 평생학습관 > 찾아오시는 길 */ .trafficLayout { max-width:1180px; margin:0 auto; padding:0 6%; } .trafficLayout .mapView { width:100%; height:58rem; border-radius:0.5em 0.5em 0 0; border: 1px solid #dcdcdc; border-bottom: none; box-sizing:border-box; } .trafficLayout .mapCustom { position:absolute; left:50%; bottom:42px; padding-bottom:28px; text-align:left; transform:translateX(-50%); } .trafficLayout .mapCustom:after { content:''; position:absolute; bottom:0; left:0; width:100%; height:28px; background:url(../images/sub/bg_map.png) no-repeat center bottom; } .trafficLayout .mapCustom .info { overflow:hidden; border-radius:10px; background-color:#fff; -webkit-box-shadow:2px 2px 6px 0px rgba(0,0,0,0.3); box-shadow:2px 2px 6px 0px rgba(0,0,0,0.3); } .trafficLayout .mapCustom .info .title { position:relative; padding:1.7rem 3rem; background:#4040a4; color:#fff; font-weight: 700; font-size:1.25em; } .trafficLayout .mapCustom .info .close { position:absolute; top:0;right:0; width:2.813em; height:100% ;background:url(../images/sub/icon_map_close.svg) center no-repeat; background-size:1.056em auto; } .trafficLayout .mapCustom .info .close:hover { cursor:pointer; } .trafficLayout .mapCustom .info .txtBox { padding:1.125em 1.875em 1em; color: #020202; line-height:1.4; } .trafficLayout .mapCustom .info .txtBox p { padding-left:2.8rem; background-repeat: no-repeat; background-position:0 0.4rem; background-size:auto 1em; font-size:1.125em; } .trafficLayout .mapCustom .info .txtBox .add { background-image: url(../images/sub/icon_homepage_bl.png); } .trafficLayout .mapCustom .info .txtBox .phone { margin-top:1.4rem; background-image: url(../images/board/icon_tell_bl.png); } .trafficLayout .mapCustom .info .txtBox .phone b { display: inline-block; margin-left:0.6rem; font-weight: 500; } .trafficLayout .mapSearch { position:relative; padding:1.625em 10.5em 1.625em 12.75em; border-radius:0 0 0.5em 0.5em; border:1px solid #dcdcdc; } .trafficLayout .mapSearch .mapTit { position:absolute; top:calc(50% - 3rem/2); left:4rem; height:3rem; padding-top: 0.4rem; padding-left:3.2rem; background:url(../images/sub/icon_location_map.png) 0 50% no-repeat; background-size:auto 3rem; font-weight: 600; font-size:1.125em; } .trafficLayout .mapSearch .searchForm { display:flex; } .trafficLayout .mapSearch .searchForm li { display:flex; position: relative; width:calc(50% - 2.4rem); border-radius:0.5rem; border:1px solid #cfcfcf; font-size:1.0625em; } .trafficLayout .mapSearch .searchForm li:first-child { margin-right:5rem; } .trafficLayout .mapSearch .searchForm li:first-child::before { content:''; position: absolute; top: 0; right:-5rem; width:5rem; height: 100%; background:url(../images/sub/arrow_map.png) center no-repeat; background-size:0.7rem auto; } .trafficLayout .mapSearch .searchForm li input[type="text"] { width:100%; border-radius:0.5rem; border: none; line-height:5.2rem; text-indent:1.2rem; box-sizing:border-box; } .trafficLayout .mapSearch .searchForm li label { flex-shrink:0; display:inline-block; padding:0 2rem; border-right:1px solid #cfcfcf; text-align:center; line-height:5rem; } .trafficLayout .mapSearch .btn { position:absolute; top:2.6rem; right:4rem; width:11rem; height:5.4rem; border-radius:0.5rem; border:1px solid #4040a4; background-color: #fff; color:#4040a4; font-weight:600; font-size: 1.125em; cursor:pointer; } .trafficLayout .tableStyle { margin-top:2em; } .trafficLayout .tableStyle tbody .th { width: 22%; text-align: center; } .trafficLayout .tableStyle tbody td { text-align: left; } @media screen and (max-width:767px) { .trafficLayout .mapSearch { padding:1.75rem 9.75rem 1.75rem 1.75rem; } .trafficLayout .mapSearch .mapTit, .trafficLayout .mapSearch .searchForm li:first-child::before { display: none; } .trafficLayout .mapSearch .searchForm { display: block; } .trafficLayout .mapSearch .searchForm li { width: 100%; } .trafficLayout .mapSearch .searchForm li:first-child { margin-bottom: 5px; margin-right: 0; } .trafficLayout .mapSearch .btn { top:1.75rem; right:1rem; width:7.25rem; height:calc(100% - 3.5rem); line-height:normal; } } /* 평생학습관 > 시설소개 */ .facilityWrap { max-width:1180px; margin:0 auto; padding:0 6%; line-height: 1.45; word-break:keep-all; } .facilityWrap .tit { margin-bottom:1.8rem; font-weight: 500; font-size: 1.875em; } .facilityWrap > .txt { font-size: 1.125em; } .facilityWrap .imgArea { overflow: hidden; display:flex; margin-top:2.875em; border-radius:0.75em; } .facilityWrap .imgArea .img { flex-shrink:0; display: block; width:72.20339%; } .facilityWrap .imgArea .img img { object-fit:cover; height: 100%; } .facilityWrap .imgArea .txt { flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background: #4040a4; color: #fff; line-height: 1.4; letter-spacing: -0.04em; box-sizing:border-box; } .facilityWrap .imgArea .txt p { padding:8.2rem 2.6rem; background-image: url(../images/sub/bg_facility_left.png), url(../images/sub/bg_facility_right.png); background-repeat: no-repeat, no-repeat; background-position:0 0, 100% 100%; background-size: auto 4.2rem, auto 4.2rem; font-weight: 500; font-size: 2.7rem; } .facilityWrap .imgArea .txt p b { display: block; margin-top: 1.2rem; font-size: 3rem; } @media screen and (max-width:960px) { .facilityWrap .tit { font-size: 2.5rem; } .facilityWrap .tit b { display: block; } .facilityWrap > .txt { font-size: 1.875rem; } .facilityWrap .imgArea { display: block; } .facilityWrap .imgArea .img { width: 100%; } .facilityWrap .imgArea .img img { height: auto; } .facilityWrap .imgArea .txt { display: block; padding:1.25rem; } .facilityWrap .imgArea .txt p { padding:2.75rem 3rem; background-size:auto 2.75rem, auto 2.75rem; font-size: 2.25rem; text-align: center; } .facilityWrap .imgArea .txt p br { display: none; } .facilityWrap .imgArea .txt p b { margin-top: 0; font-size: 2.5rem; } } /* 기관별 프로그램 소개 */ .imgInfoTxt { display:flex; justify-content:space-between; } .imgInfoTxt .imgArea { flex-shrink:0; width:48.3899%; margin-right: 3.4%; } .imgInfoTxt .txtArea { flex-grow:1; } .imgInfoTxt .txtArea .areaTit { padding-left: 1rem; padding-bottom:1rem; border-bottom: 1px solid #4040a4; font-weight: 600; font-size: 2em; } .imgInfoTxt .txtArea .item { display:flex; margin-bottom: 1.5rem; padding-left: 1rem; padding-top: 1.625em; } .imgInfoTxt .txtArea .item + .item { border-top: 1px solid #dedede; } .imgInfoTxt .txtArea .item .itemTit { flex-shrink:0; flex-basis:11.4rem; font-weight: 700; font-size: 1.25em; } .imgInfoTxt .txtArea .item .infoList { flex-grow:1; } .imgInfoTxt .txtArea .item .infoList li { display:flex; position: relative; margin-bottom:0.8rem; padding-left: 1rem; letter-spacing: -0.03em; word-break:keep-all; font-size: 1.125em; } .imgInfoTxt .txtArea .item .infoList li::before { content:''; position: absolute; top:10px; left: 0; width: 3px; height: 3px; border-radius:50%; background: #6b6b6b; } .imgInfoTxt .txtArea .item .infoList .tit { flex-shrink:0; flex-basis:11.4rem; display: block; color: #6b6b6b; } .imgInfoTxt .txtArea .item .infoList .txt { display: block; } .defaultLayout .imgList { margin-top:1rem; } .defaultLayout .imgList ul { display:flex; flex-wrap:wrap; gap:1.2rem; } .defaultLayout .imgList li { width:calc(50% - 0.6rem); margin-bottom: 2rem; } .defaultLayout .imgList .col3 li { width:calc(33.33333% - 0.8rem); } .defaultLayout .imgList li a { display: block; } .defaultLayout .imgList li span { display: block; } .defaultLayout .imgList li img { object-fit:cover; max-width:100%; width:100%; height:100%; border:1px solid #d4d4d9; box-sizing:border-box; } .defaultLayout .imgList li .tit { margin-top:0.7em; text-align: center; font-weight:600; font-size:1.25em; } @media screen and (max-width:960px) { .imgInfoTxt { display: block; } .imgInfoTxt .imgArea { width: 100%; margin-bottom: 3rem; margin-right: 0; } .imgInfoTxt .txtArea .areaTit { padding-left: 0; font-size: 2.25rem; } .imgInfoTxt .txtArea .item { display: block; padding-top: 2rem; padding-left:1rem; } .imgInfoTxt .txtArea .item .itemTit { position: relative; margin-bottom: 1.25rem; } .imgInfoTxt .txtArea .item .itemTit::before { content:''; position: absolute; top:1rem; left: -1rem; width: 3px; height: 3px; border-radius:50%; background: #232323; } .imgInfoTxt .txtArea .item .infoList li::before { content:none; } .imgInfoTxt .txtArea .item .infoList li { padding-left: 0; font-size: 1.875rem; } .defaultLayout .imgList ul { display: block; } .defaultLayout .imgList li, .defaultLayout .imgList .col3 li { width: 100%; } } /* 수강신청 - 목록 */ .dataTable thead th { line-height: 1.2; } .dataTable thead th.subject { text-align: left; } .dataTable td { padding:1.3rem .5em; color: #000; word-break:keep-all; line-height: 1.3; font-weight: 500; } .dataTable .num { width: 4.2em; } .dataTable .target { width: 6em; } .dataTable .field, .dataTable .status { width:11rem; } .dataTable .place, .dataTable .btnCell { width:13.5rem; } .dataTable .doc { width:18rem; } .boardList .dataTable td.subject a { max-width:98%; } .dataTable .subject a:hover, .dataTable .subject a:focus { text-decoration:underline; } .dataTable .subject a span { overflow: hidden; display: block; color: #333; white-space:nowrap; text-overflow: ellipsis; font-weight: 400; font-size:0.8889em; } .dataTable td .btn { display: inline-flex; justify-content:center; align-items:center; min-width:10.2rem; height: 4.3rem; padding:0.5em 0.8889em; border-radius:0.3rem; border:1px solid; background-color: #fff; text-align: center; font-weight: 500; box-sizing:border-box; } .dataTable td a.btn:hover, .dataTable td a.btn:focus, .dataTable td button.btn:hover, .dataTable td button.btn:focus { color: #fff; transition:0.4s; } .dataTable td .btn.apply { border-color:#cf42a2; color: #cf42a2; } .dataTable td .btn.apply:hover, .dataTable td .btn.apply:focus { background-color: #cf42a2; } .dataTable td .btn.ing { border-color:#4c4c73; color: #4c4c73; } .dataTable td .btn.end { border-color:#929292; color: #929292; } .dataTable td .btn.cancel { border-color:#4040a4; color: #4040a4; } .dataTable td .btn.cancel:hover, .dataTable td .btn.cancel:focus { background-color: #4040a4; } .dataTable td .btn.down { border-color:#dfdfdf; color: #232323; font-size: 1.7rem; } .dataTable td .btn.down:hover, .dataTable td .btn.down:focus { background-color: #232323; } .dataTable .period p { display:flex; letter-spacing: -0.04em; text-align: left; } .dataTable .period p + p { margin-top:3px; } .dataTable .period p span { display: inline-block; width:4.5em; height: 100%; margin-right: 0.75em; padding:2px 0; border-radius:0.3rem; text-align: center; font-weight: 400; font-size: 1.6rem; } .dataTable .period p.t1 span { background-color: #f0f0fd; color: #34349a; } .dataTable .period p.t2 span { background-color: #faf0f4; color: #98245e; } /* 수강신청 - 상세 */ .viewCourse { max-width:1180px;margin:0 auto;padding:0 6%; } .viewCourse .conTit { margin-top: 5.8rem; margin-bottom: 1.6rem; font-weight: 500; font-size: 1.5em; } .viewCourse .viewTop { display:flex; justify-content:space-between; margin-bottom: 2.5em; } .viewCourse .viewTop .imgArea { overflow: hidden; flex-shrink:0; position: relative; width:22.4577%; margin-right: 3.4%; padding-top:13.9831%; } .viewCourse .viewTop .imgArea img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit:cover; } .viewCourse .viewTop .txtArea { flex-grow:1; } .viewCourse .viewTop .txtArea .topTit { margin-bottom:1.0834em; padding-left:0.8rem; padding-bottom:0.5834em; border-bottom: 1px solid #4040a4; font-weight:+600; font-size: 1.5em; } .viewCourse .viewTop .txtArea ul { margin-left: 0.8rem; } .viewCourse .viewTop .txtArea ul li { display:flex; margin:0.9rem 0; font-size: 1.125em; } .viewCourse .viewTop .txtArea ul li span { display: block; } .viewCourse .viewTop .txtArea ul li .tit { flex-shrink:0; flex-basis:4.2223em; margin-right: 1rem; color: #6b6b6b; } .viewCourse .conTable { width: 100%; margin: 1.6rem 0; border-top: 2px solid #4040a4; } .viewCourse .conTable td { padding:0.8334em 1em; border: 1px solid #d4d4d9; word-break:keep-all; font-size: 1.125em; } .viewCourse .conTable td.th { width: 17%; background-color: #f7f7f9; color: #272770; text-align: center; vertical-align: middle; } @media screen and (max-width:960px) { .boardList .dataTable { border-top: 1px solid #dcdcdc; } .boardList .dataTable, .boardList .dataTable tbody { display: block; } .boardList .dataTable thead { display: none; } .boardList .dataTable tr { display:flex; flex-wrap:wrap; position: relative; padding:1em 4.5em 1.2em 0; } .boardList .dataTable td { padding:0; text-align: left; } .boardList .dataTable td.moNone { display: none; } .boardList .dataTable .field, .boardList .dataTable .target, .boardList .dataTable .place, .boardList .dataTable .status, .boardList .dataTable .doc { width:auto; } .boardList .dataTable .subject, .boardList .dataTable .period { width: 100%; } .boardList .dataTable .field, .boardList .dataTable .place { color: #6b6b6b; } .boardList .dataTable .place, .boardList .dataTable .doc { position: relative; margin-left: 0.3em; padding-left: 0.6em; } .boardList .dataTable .place::before, .boardList .dataTable .doc::before { content:'/'; position: absolute; top: 0; left: 0; } .boardList .dataTable .subject { margin-top:0.375em; margin-bottom: 0.2em; font-size:2rem; } .boardList .dataTable .subject + .subject { margin-top: 0; margin-bottom: 0.375em; } .boardList .dataTable .subject a { line-height: 1.3; } .boardList .dataTable .period { margin-top: 0.7em; font-size:1em; } .boardList .dataTable .period p span { margin-right: 0.3em; } .boardList .dataTable .status, .boardList .dataTable .doc { margin-top:0.8em; color: #333; font-size: 1em; } .boardList .dataTable .btnCell { position: absolute; top:calc(50% - 7.75rem/2); right: 0; width: auto; } .boardList .dataTable td .btn { width:6.875rem; min-width:auto; height:7.75rem; line-height: 1.3; word-break:break-all; } .boardList .dataTable td .btn.down { width: auto; height:3.625rem; margin-top: -0.625rem; } .boardList .dataTable tr:not(:has(.btn)) { padding-right: 0; } /* 수강신청 - 상세 */ .viewCourse .viewTop { display: block; } .viewCourse .viewTop .imgArea { width:70.3892%; margin:0 auto 2.5rem; padding-top:44.19053%; } .viewCourse .viewTop .txtArea .topTit { padding-left: 0; padding-bottom: 0.8rem; font-size:2.125rem; } .viewCourse .viewTop .txtArea ul { margin-left: 0; } .viewCourse .conTable { border-left:1px solid #d4d4d9; } .viewCourse .conTable, .viewCourse .conTable tbody, .viewCourse .conTable td { display: block; box-sizing:border-box; } .viewCourse .conTable tr { display:flex; flex-wrap:wrap; } .viewCourse .conTable td.th { flex-grow:0; flex-shrink:0; flex-basis:10.75rem; } .viewCourse .conTable td { flex-grow:1; width: 100%; max-width:calc(100% - 10.75rem); border-top: none; border-left: none; } } /* print */ @page { size: A4; } @media print { * { -webkit-print-color-adjust:exact; print-color-adjust:exact; } html { font-size:4pt; } .header, .subFunc, .footer, .overlayBg { display:none; } #container { padding-top: 0; } #content > div { padding:0; } }