@charset "UTF-8";
@keyframes recommended-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
body {
width: 100%;
}
#wrap {
position: relative;
height: 100%;
padding-top: 89px;
background-color: #fff;
}
.fixed {
overflow: hidden;
}
.fixed #wrap {
position: fixed;
width: 100%;
overflow: hidden;
}
.dim {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
#content {
padding: 49px 0 100px;
}
#header > .inner,
#content > section,
#content > .main-title > section,
#footer > .inner {
position: relative;
width: 1138px;
margin: 0 auto;
}
#wrap::after,
#header > .inner::after,
#content > section::after,
#content > .main-title > section::after,
#footer > .inner::after {
display: block;
clear: both;
content: "";
}
.c--theme {
color: #326cf9;
}
.c--red {
color: #f00;
}
.ico--person {
background-image: url('data:image/svg+xml,');
}
.ico--magnifier {
background-image: url('data:image/svg+xml,');
}
.ico--clock {
background-image: url('data:image/svg+xml,');
}
.ico--won {
background-image: url('data:image/svg+xml,');
}
.ico--doc {
background-image: url('data:image/svg+xml,');
}
.ico--build {
background-image: url('data:image/svg+xml,');
}
.ico--exclamation-red {
background-image: url('data:image/svg+xml,');
}
.ico--exclamation {
background-image: url('data:image/svg+xml,');
}
.ico--state {
background-image: url('data:image/svg+xml,');
}
.ico--new {
background-image: url('data:image/svg+xml,');
}
.align--left {
text-align: left;
}
.align--center {
text-align: center;
}
.align--right {
text-align: right;
}
.btns-area {
display: flex;
justify-content: center;
gap: 5px;
}
.btns-area > button, .btns-area [role=button] {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
min-height: 38px;
line-height: normal;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
padding-left: 10px;
padding-right: 10px;
}
.btns-area > button:focus, .btns-area [role=button]:focus {
animation: recommended-animation 0.5s ease-in-out;
}
.btns-area > button.in-icon, .btns-area [role=button].in-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
}
.btns-area > button.in-icon > [class*=ico--], .btns-area [role=button].in-icon > [class*=ico--] {
width: 1.3rem;
height: 1.3rem;
background-repeat: no-repeat;
background-size: contain;
}
.btns-area.align-right {
justify-content: flex-end;
}
.btns-area.align-left {
justify-content: flex-start;
}
.btns-area.multi-line {
flex-wrap: wrap;
}
.btns-area.multi-line > button, .btns-area.multi-line [role=button] {
flex-basis: 100%;
}
.btns-area.gap {
margin-top: 50px;
margin-bottom: 50px;
}
.btns-size--xsmall button, .btns-size--xsmall [role=button] {
max-width: 130px;
}
.btns-size--small button, .btns-size--small [role=button] {
max-width: 150px;
}
.btns-size--middle button, .btns-size--middle [role=button] {
max-width: 180px;
padding-top: 8px;
padding-bottom: 8px;
}
.btns-size--large button, .btns-size--large [role=button] {
max-width: 250px;
padding-top: 12px;
padding-bottom: 12px;
}
.btn--primary {
background-color: #007aff;
color: #fff;
border: 1px solid #007aff;
transition: 0.2s;
}
.btn--primary:hover {
background-color: #3395ff;
}
.btn--primary:active {
background-color: #004999;
}
.btn--outline {
background-color: #fff;
color: #007aff;
border: 1px solid #007aff;
transition: 0.2s;
}
.btn--outline:hover {
background-color: #f3f3f3;
}
.btn--outline:active {
background-color: #e4e4e4;
}
.btn--secondary {
border: 1px solid #808080;
background-color: #808080;
color: #fff;
transition: 0.2s;
}
.btn--secondary:hover {
background-color: #9a9a9a;
}
.btn--secondary:active {
background-color: #4d4d4d;
}
.none-data {
width: 100%;
padding: 0 10px;
}
.none-data .inner {
min-height: 30vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
font-size: 16px;
font-weight: 500;
color: #666;
border: 1px solid #eee;
border-radius: 10px;
}
.input-search-wrap {
position: relative;
display: inline-block;
width: 100%;
max-width: 350px;
}
.input-search-wrap .input-search {
width: 100%;
height: 40px;
font-size: 14px;
}
.input-search-wrap .btn-search {
position: absolute;
right: 1px;
top: 1px;
width: 35px;
height: calc(100% - 2px);
background-color: transparent;
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
text-indent: -99999px;
color: transparent;
font-size: 1px;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
border-bottom: 1px solid #e7e7e7;
z-index: 1000;
background: #fff;
}
.header-logo {
position: absolute;
top: 50%;
left: 0;
margin-top: -20px;
}
.header-logo a {
display: block;
width: 92px;
height: 40px;
background: url(../img/common/header_logo.png) no-repeat 0 0;
text-indent: -9999px;
font-size: 0;
background-size: contain;
background-position: center;
}
.header-menu {
float: right;
padding-right: 65px;
}
.header-menu::after {
display: block;
clear: both;
content: "";
}
.header-menu > li {
float: left;
position: relative;
margin: 0 15px;
padding: 14px 0;
}
.header-menu > li a {
display: block;
height: 40px;
padding: 0 20px;
font-size: 17px;
font-weight: 500;
color: #081b50;
letter-spacing: -0.075em;
line-height: 40px;
}
.header-menu > li a.new:before {
content: "N";
position: absolute;
top: 1em;
right: 0.3em;
color: #f00;
font-size: 12px;
font-weight: 700;
height: 20px;
width: 20px;
line-height: normal;
display: flex;
align-items: center;
justify-content: center;
}
.header-menu > li a:hover {
color: #007aff;
}
.header-menu > li a:hover::after {
display: block;
clear: both;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background-color: #007aff;
}
.header-btn {
display: block;
position: absolute;
top: 50%;
right: 0px;
margin-top: -20px;
width: 40px;
height: 40px;
border: 0 none;
background-color: #fff;
cursor: pointer;
z-index: 2;
}
.header-btn em {
display: block;
position: absolute;
overflow: hidden;
width: 0;
height: 0;
}
.header-btn span, .header-btn span::after, .header-btn span::before {
display: block;
position: relative;
height: 2px;
width: 19px;
background-color: #1e1e1e;
backface-visibility: hidden;
}
.header-btn span {
margin: 0 auto;
transition: background-color 0.2s;
background-color: #1e1e1e;
}
.header-btn span::before, .header-btn span::after {
position: absolute;
content: "";
left: 0;
transition: transform 0.2s;
}
.header-btn span::before {
transform: translateY(-5px);
}
.header-btn span::after {
transform: translateY(5px);
}
/*
.fixed .header-aside-btn span{background-color:rgba(255, 255, 255, 0);}
.fixed .header-aside-btn span::before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.fixed .header-aside-btn span::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
*/
.header-back {
display: none;
position: absolute;
top: 50%;
left: 20px;
margin-top: -20px;
}
.header-back a {
display: block;
width: 40px;
height: 40px;
overflow: hidden;
background: url(../img/common/header_back.png) no-repeat 50% 50%;
text-indent: -9999px;
font-size: 0;
}
/* 전체메뉴 */
.amenu-area {
display: block;
position: fixed;
top: 0px;
right: -320px;
width: 320px;
height: 100%;
background-color: #fff;
z-index: 1001;
}
.amenu-area > .inner {
position: relative;
overflow-y: auto;
width: 100%;
height: 100%;
padding: 0 15px;
background: #fff;
-webkit-overflow-scrolling: touch;
}
.amenu-area .amenu-close {
display: block;
position: absolute;
top: 20px;
right: 0;
width: 24px;
height: 24px;
text-indent: -9999px;
overflow: hidden;
background: url(../img/common/allmenu_close.png) no-repeat 0 50%/24px 24px;
}
.amenu-area .amenu-setting {
display: block;
position: absolute;
top: 20px;
right: 30px;
width: 24px;
height: 24px;
text-indent: -9999px;
overflow: hidden;
background: url(../img/common/allmenu_setting.png) no-repeat 0 50%/24px 24px;
}
.setting-area {
display: block;
position: fixed;
top: 0px;
right: -320px;
width: 320px;
height: 100%;
background-color: #fff;
z-index: 1101;
}
.setting-dim {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1100;
}
.setting-area > .inner {
position: absolute;
overflow-y: auto;
width: 100%;
height: 100%;
padding: 0 26px;
background: #fff;
-webkit-overflow-scrolling: touch;
}
.setting-area .setting-close {
display: block;
position: absolute;
top: 20px;
right: 0;
width: 24px;
height: 24px;
text-indent: -9999px;
overflow: hidden;
background: url(../img/common/allmenu_close.png) no-repeat 0 50%/24px 24px;
}
.setting-area .setting-head {
position: relative;
height: 60px;
border-bottom: 1px solid #000000;
line-height: 55px;
font-size: 15px;
font-weight: 500;
color: #000000;
letter-spacing: -0.05em;
}
.setting-area .setting-list {
padding-top: 12px;
}
.setting-area .setting-list li {
border-bottom: 1px solid #f7f7f7;
}
.setting-area .setting-list li a {
position: relative;
display: block;
padding: 15px 0;
font-size: 13px;
font-weight: 500;
color: #000000;
letter-spacing: -0.05em;
}
.setting-area .setting-list li .switch-wrap {
position: relative;
display: block;
padding: 15px 0;
font-size: 13px;
font-weight: 500;
color: #000000;
letter-spacing: -0.05em;
}
.setting-area .setting-list li.switch span {
display: block;
position: absolute;
top: 50%;
right: 0;
width: 36px;
height: 22px;
margin-top: -11px;
background-color: #b1b4b9;
border-radius: 22px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.setting-area .setting-list li.switch.on span {
background-color: #4388fa;
}
.setting-area .setting-list li.switch span i {
display: block;
position: absolute;
top: 50%;
right: 15px;
width: 20px;
height: 20px;
margin-top: -10px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.setting-area .setting-list li.switch.on span i {
right: 1px;
}
.amenu-head {
position: relative;
padding: 44px 0 22px;
border-bottom: 1px solid #f7f7f7;
}
.amenu-head::after {
display: block;
clear: both;
content: "";
}
.amenu-user {
position: relative;
}
.amenu-user::after {
display: block;
clear: both;
content: "";
}
.amenu-user .amenu-user-id {
position: relative;
float: left;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.1em;
color: #000;
z-index: 1;
line-height: 18px;
}
.amenu-user .amenu-user-id::after {
display: block;
clear: both;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #007aff;
z-index: -1;
}
.amenu-user .amenu-user-text {
clear: both;
font-size: 18px;
font-weight: 700;
color: #000000;
}
.amenu-user .amenu-user-btn {
position: absolute;
bottom: 0;
right: 0;
padding: 5px 14px;
border-radius: 5px;
background-color: #111;
font-size: 13px;
color: #fff;
}
.amenu-status-list {
padding: 26px 0;
border-bottom: 1px solid #f7f7f7;
}
.amenu-status-list::after {
display: block;
clear: both;
content: "";
}
.amenu-status-list > li {
position: relative;
float: left;
width: 33.33%;
}
.amenu-status-list > li .title {
position: relative;
display: block;
margin-bottom: 18px;
padding-left: 9px;
font-size: 14px;
color: #000000;
letter-spacing: -0.1em;
}
.amenu-status-list > li .title::after {
display: block;
clear: both;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 4px;
background-color: #4d2bf4;
}
.amenu-status-list > li + li {
padding-left: 10px;
}
.amenu-status-list > li + li::before {
display: block;
clear: both;
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: #f7f7f7;
}
.amenu-status-list > li div {
padding-left: 9px;
}
.amenu-status-list > li div b, .amenu-status-list > li div span {
display: inline-block;
font-weight: 700;
color: #000;
letter-spacing: -0.05em;
line-height: 1;
vertical-align: bottom;
}
.amenu-status-list > li div b {
font-family: "Roboto";
font-size: 22px;
}
.amenu-status-list > li div span {
padding: 0 0 2px 2px;
font-size: 12px;
}
.amenu-status-list > li.item1 {
width: 32%;
}
.amenu-status-list > li.item2 {
width: 34%;
}
.amenu-status-list > li.item3 {
width: 34%;
}
.amenu-status-list > li.item1 div b {
color: #007aff;
}
.amenu-status-list > li.item2 div b {
color: #44cd00;
}
.amenu-shortcut {
padding: 20px 0 30px;
border-bottom: 1px solid #f7f7f7;
}
.amenu-shortcut::after {
display: block;
clear: both;
content: "";
}
.amenu-shortcut > li {
position: relative;
float: left;
width: 25%;
}
.amenu-shortcut > li a {
display: block;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.1em;
color: #000000;
line-height: 1;
text-align: center;
}
.amenu-shortcut > li i {
display: block;
height: 35px;
margin-bottom: 10px;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: auto 35px;
}
.amenu-shortcut > li.item1 i {
background-image: url(../img/common/amenu_shortcut_ico_01.png);
}
.amenu-shortcut > li.item2 i {
background-image: url(../img/common/amenu_shortcut_ico_02.png);
}
.amenu-shortcut > li.item3 i {
background-image: url(../img/common/amenu_shortcut_ico_03.png);
}
.amenu-shortcut > li.item4 i {
background-image: url(../img/common/amenu_shortcut_ico_04.png);
}
.allim-head {
padding: 23px 0 6px;
}
.allim-head::after {
display: block;
clear: both;
content: "";
}
.allim-head em, .allim-head span {
display: block;
}
.allim-head em {
float: left;
}
.allim-head em {
position: relative;
display: block;
padding-left: 9px;
font-size: 14px;
color: #000000;
letter-spacing: -0.1em;
}
.allim-head em::after {
display: block;
clear: both;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 4px;
background-color: #4d2bf4;
}
.allim-head span.totle {
float: left;
font-size: 12px;
letter-spacing: -0.1em;
color: #000000;
line-height: 18px;
padding-left: 5px;
text-decoration: none;
}
.allim-head span {
float: right;
font-size: 12px;
letter-spacing: -0.1em;
color: #000000;
line-height: 12px;
text-decoration: underline;
cursor: pointer;
}
.allim-head span b {
color: #007aff;
}
.allim-scroll {
position: relative;
}
.allim-none {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
transform: translateY(-50%);
line-height: 1.29;
letter-spacing: -0.5px;
text-align: center;
color: #919ba4;
}
.allim-box {
height: 100%;
overflow-y: auto;
}
.allim-list {
border-top: 1px solid #f7f7f7;
background-color: #ffffff;
}
.allim-list > li {
border-bottom: 1px solid #f7f7f7;
}
.allim-list > li a {
display: block;
padding: 15px 36px 15px 12px;
background: url(../img/common/allim_list_arrow.png) no-repeat right 20px center/8px auto;
}
.allim-list > li a::after {
display: block;
clear: both;
content: "";
}
.allim-list > li .title {
display: block;
height: 40px;
line-height: 20px;
font-size: 14px;
color: #444444;
letter-spacing: -0.05em;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.allim-list > li .date {
display: block;
padding-top: 5px;
font-size: 12px;
color: #999999;
line-height: 1;
letter-spacing: -0.05em;
}
.amenu-button {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.amenu-button::after {
display: block;
clear: both;
content: "";
}
.amenu-button a {
display: block;
float: left;
width: 50%;
height: 60px;
overflow: hidden;
}
.amenu-button a.kakao {
padding-left: 58px;
background: #007aff url(../img/common/amenu_button_kakao.png) no-repeat 18px 50%/auto 30px;
line-height: 60px;
font-size: 17px;
font-weight: 500;
color: #ffffff;
letter-spacing: -0.075em;
}
.amenu-button a.tel {
padding: 15px 0 0 55px;
background: #2f3135 url(../img/common/amenu_button_tel.png) no-repeat 18px 50%/auto 30px;
}
.amenu-button a.tel b, .amenu-button a.tel span {
display: block;
float: left;
font-weight: 500;
letter-spacing: -0.075em;
color: #fff;
line-height: 14px;
}
.amenu-button a.tel b {
font-size: 12px;
}
.amenu-button a.tel span {
padding-left: 4px;
font-size: 10px;
}
.amenu-button a.tel div {
clear: both;
font-family: "Roboto";
font-size: 16px;
font-weight: 500;
letter-spacing: -0.075em;
color: #fff;
line-height: 1;
}
#footer {
background-color: #363636;
}
#footer .inner {
padding: 30px 0 20px 226px;
}
.footer-logo {
position: absolute;
top: 30px;
left: 0;
width: 122px;
height: 38px;
background: url(../img/common/footer_logo.png) no-repeat 0 0;
text-indent: -9999px;
font-size: 0;
}
.footer-info {
font-size: 13px;
color: #c3c3c3;
line-height: 24px;
letter-spacing: -0.05em;
}
.footer-info .etc {
font-size: 0;
}
.footer-info .etc span {
position: relative;
display: inline-block;
font-size: 13px;
}
.footer-info .etc span + span {
margin-left: 7px;
padding-left: 8px;
}
.footer-info .etc span + span::before {
display: block;
clear: both;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 11px;
margin-top: -5px;
background-color: #c3c3c3;
}
.footer-info .etc span a.pv {
text-decoration: underline;
color: #fff;
}
/* 팝업 (얼럿) */
.dimmed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
z-index: 1000;
display: none;
}
.dimmed_loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
z-index: 1000;
display: none;
}
.dimmed_loading .ico_loading {
display: block;
position: absolute;
top: 45%;
left: 50%;
width: 300px;
height: 50px;
margin: -25px 0 0 -150px;
line-height: 48px;
text-align: center;
background: url(/resources/img/common/mob_load_bg.png) 50% 0 no-repeat;
background-size: 50px 50px;
}
.dimmed_loading .ico_loading img {
width: 42px;
vertical-align: middle;
}
.dimmed_loading .ico_loading p {
color: #fff;
font-weight: 300;
line-height: 24px;
margin-top: 20px;
}
.dimmed_alert {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10005;
background: rgba(0, 0, 0, 0.5);
}
.ly_pop {
position: absolute;
top: 50%;
left: 50%;
margin: -233px 0 0 -145px;
width: 290px;
z-index: 500;
}
.ly_pop .ly_pop_cont {
overflow: hidden;
height: 100%;
background: #fff;
}
.ly_pop .tit {
padding: 25px 16px 7px;
font-size: 13px;
color: #383838;
}
.ly_pop_cont .txt_dsc {
font-size: 15px;
padding: 0 20px 0;
letter-spacing: -1px;
line-height: 17px;
}
.ly_pop_cont .txt_dsc2 {
font-size: 17px;
padding: 30px 0 25px;
line-height: 20px;
text-align: center;
font-weight: 500;
letter-spacing: -0.5px;
}
.ly_pop_cont .btn_area {
height: 37px;
margin-top: 10px;
*zoom: 1;
}
.ly_pop_cont .btn_area:after {
display: block;
clear: both;
content: "";
}
.ly_pop_cont .btn_area li {
width: 50%;
float: left;
}
.ly_pop_cont .btn_area .btn {
display: block;
color: #fff;
margin: 0 5px;
height: 37px;
line-height: 37px;
}
.ly_pop_cont .btn_area.full .btn {
margin: 0;
}
.ly_btn_close {
position: absolute;
width: 45px;
height: 45px;
top: 0;
right: 0;
cursor: pointer;
}
.ly_btn_close span {
position: absolute;
width: 18px;
height: 18px;
top: 50%;
left: 50%;
margin: -9px 0 0 -9px;
background-position: -28px -78px;
}
.ly_alert {
position: fixed;
top: 50%;
left: 50%;
z-index: 10006;
width: auto;
min-width: 320px;
max-width: 90%;
margin: 0;
padding: 24px;
box-sizing: border-box;
background: #fff;
transform: translate(-50%, -50%);
text-align: center;
display: none;
border: #eee solid 1px;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.ly_alert .btn_area {
margin: 10px;
text-align: center;
}
.ly_alert .btn_area ul li {
display: inline-block;
width: calc(50% - 6px);
margin-left: 6px;
}
.ly_alert .btn_area ul li:first-child {
margin-left: 0;
}
.ly_alert .btn_area .btn {
width: 100%;
margin: 0;
}
.ly_alert .txt_dsc2 {
padding-top: 20px;
min-height: 60px;
line-height: 2;
}
.ly_alert .txt_dsc2 span {
display: inline-block;
line-height: 1.5;
vertical-align: middle;
}
.ly_alert .ly_btn_close {
width: 16px;
height: 16px;
margin: 15px;
opacity: 0.7;
}
/* buttons */
.btn {
overflow: hidden;
display: inline-block;
height: 50px;
font-size: 14px;
font-weight: 400;
line-height: 50px;
text-align: center;
}
.btn_txt {
display: inline-block;
min-width: 56px;
height: auto;
min-height: 30px;
padding: 0 7px;
border: 1px solid #cdcdcd;
box-sizing: border-box;
background-color: #fff;
font-size: 0;
text-align: center;
vertical-align: middle;
} /* 텍스트 버튼 유형 (AML 산출물 참고) */
.btn_txt .txt {
display: inline-block;
font-size: 14px;
color: #555;
letter-spacing: -0.5px;
line-height: 18px;
vertical-align: middle;
}
.btn_area {
overflow: hidden;
}
.btn_area .btn_ok {
background: #3a85ff;
}
.btn_area .btn_cancel {
background: #515360;
}
.none {
text-align: center;
padding: 20px;
}
.none p, .accountInfo2Box.none1 p {
margin-top: 20px;
}
@media screen and (max-width: 1199px) {
#header > .inner, #content > section, #content > .main-title > section, #footer > .inner {
width: 100%;
}
.header-logo,
.footer-logo {
left: 38px;
}
.header-menu {
padding-right: 95px;
}
.header-btn {
right: 30px;
}
}
@media screen and (max-width: 799px) {
.header-logo,
.footer-logo {
left: 20px;
}
.header-logo {
margin-top: -15px;
}
.header-logo a {
width: 92px;
height: 30px;
background-size: auto 30px;
}
.header-menu, .footer-info .addr, .footer-info .etc {
display: none;
}
#header .inner {
position: relative;
height: 100%;
}
.header-btn, .header-back {
display: block;
}
.header-btn, .header-back {
margin-top: -15px;
}
.header-btn {
right: 15px;
}
.header-back {
left: 15px;
}
.header-btn {
width: 30px;
height: 30px;
}
.header-back a {
width: 30px;
height: 30px;
background-size: auto 18px;
}
#footer .inner {
padding: 15px 10px;
}
.footer-logo {
width: 64px;
height: 20px;
background-size: 100% 100%;
top: 50%;
margin-top: -10px;
}
.footer-info .copy {
text-align: right;
}
#footer {
padding-bottom: 54px;
}
}
@media screen and (max-width: 479px) {
#wrap {
padding-top: 50px;
}
#header {
height: 50px;
}
.header-logo {
position: absolute;
left: 20px;
margin-top: -10px;
}
.header-logo a {
width: 61px;
height: 20px;
background-size: auto 20px;
}
.footer-logo {
top: 50%;
margin-top: -10px;
width: 64px;
height: 20px;
background-size: 100% 100%;
}
.none img {
width: 20%;
}
#footer {
padding-bottom: 54px;
}
}
.bPopup {
display: none;
width: 600px;
}
.bPopup .pop-content {
padding: 20px 30px 10px;
background-color: #fff;
border-radius: 0 0 3px 3px;
}
@media (max-width: 640px) {
.bPopup {
width: 100%;
padding: 15px;
}
}
/* 추천 설정 팝업 */
.recommendSettingPopup .pop-content {
border-radius: 15px;
padding-bottom: 40px;
}
@media (max-width: 640px) {
.recommendSettingPopup .pop-content {
padding-left: 20px;
padding-right: 20px;
}
}
.recommendSettingPopup .head {
padding: 0 6px 20px;
}
.recommendSettingPopup .cate {
display: inline-block;
height: 28px;
line-height: 28px;
margin-bottom: 10px;
padding: 0 23px;
border-radius: 14px;
background-color: #007aff;
font-size: 16px;
font-weight: 500;
color: #ffffff;
letter-spacing: -0.075em;
}
.recommendSettingPopup .anno {
float: right;
font-size: 1.2rem;
font-weight: bold;
}
.recommendSettingPopup .title {
padding-left: 4px;
font-size: 24px;
font-weight: 700;
color: #222222;
letter-spacing: -0.075em;
}
.recommendSettingPopup .main-select {
display: flex;
gap: 7px;
margin-bottom: 20px;
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select {
flex-wrap: wrap;
}
}
.recommendSettingPopup .main-select .item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
cursor: pointer;
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select .item {
flex-basis: 100%;
}
}
.recommendSettingPopup .main-select .item [type=radio]:checked + .item__inner {
border-color: #007aff;
background-color: #f6fbff;
}
.recommendSettingPopup .main-select .item .item__inner {
border: 2px solid #dfdfdf;
color: #1a1a1a;
padding: 20px 7px;
border-radius: 10px;
text-align: center;
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select .item .item__inner {
padding: 15px 10px;
}
}
.recommendSettingPopup .main-select .item .item__inner .title {
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select .item .item__inner .title {
margin-bottom: 0;
font-size: 16px;
}
}
.recommendSettingPopup .main-select .item .item__inner .percent {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select .item .item__inner .percent {
margin-bottom: 0;
font-size: 18px;
}
}
.recommendSettingPopup .main-select .item .item__inner .desc {
font-size: 18px;
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select .item .item__inner .desc {
font-size: 16px;
}
}
@media (max-width: 640px) {
.recommendSettingPopup .main-select .item .item__inner {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.recommendSettingPopup .main-select .item .item__inner .title {
flex-shrink: 0;
}
}
.recommendSettingPopup .sub-select {
display: flex;
border-bottom: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
margin-bottom: 20px;
}
@media (max-width: 640px) {
.recommendSettingPopup .sub-select {
flex-wrap: wrap;
}
}
.recommendSettingPopup .sub-select .item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
text-align: center;
border-top: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
cursor: pointer;
}
@media (max-width: 640px) {
.recommendSettingPopup .sub-select .item {
flex-basis: 50%;
}
}
.recommendSettingPopup .sub-select .item [type=radio]:checked + .value {
background-color: #191919;
color: #fff;
}
.recommendSettingPopup .sub-select .item .value {
padding: 10px 3px;
}
.recommendSettingPopup .details {
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 20px;
}
.recommendSettingPopup .details ul {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
color: #575757;
}
.recommendSettingPopup .details ul li::before {
content: "· ";
display: inline-block;
margin-right: 3px;
}
.recommendSettingPopup .input-block {
display: flex;
gap: 3px;
align-items: center;
margin-top: 20px;
}
.recommendSettingPopup .input-block .name {
flex-shrink: 0;
margin-right: 10px;
min-width: 60px;
}
.recommendSettingPopup .input-block .input-text {
text-align: right;
flex-grow: 1;
}
.recommendSettingPopup .comment {
text-align: right;
font-size: 14px;
padding-right: 15px;
padding-top: 5px;
word-break: keep-all;
}
.recommendSettingPopup .btns-area {
margin-top: 30px;
}
.tbl-scroll {
overflow-x: auto;
}
.tbl--type1 {
width: 100%;
min-width: -moz-max-content;
min-width: max-content;
border-collapse: collapse;
border-spacing: 0;
}
.tbl--type1 th, .tbl--type1 td {
padding: 10px;
}
.tbl--type1 thead {
background-color: #f5f5f5;
font-size: 14px;
color: #575757;
font-weight: 500;
letter-spacing: -0.05em;
text-align: center;
}
.tbl--type1 thead tr th {
padding: 15px 10px;
border: 1px solid #dbdbdb;
}
.tbl--type1 tbody {
font-size: 14px;
color: #575757;
letter-spacing: -0.05em;
text-align: center;
}
.tbl--type1 tbody tr td {
border: 1px solid #dbdbdb;
}
.tbl--type1 tbody tr td .ico--new {
display: inline-block;
width: 43px;
height: 17px;
vertical-align: top;
background-repeat: no-repeat;
background-size: contain;
}
.tbl--type1 tbody tr td .subject {
display: inline-block;
max-width: 550px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tbl--type1 tbody tr td .downfile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
}
.tbl--type1 tbody tr td .downfile [class*=ico--] {
display: block;
height: 30px;
width: 30px;
background-repeat: no-repeat;
background-size: contain;
}
.tbl--type1 tbody tr td .downfile:hover, .tbl--type1 tbody tr td .downfile:focus {
background-color: #f5f5f5;
}/*# sourceMappingURL=common.css.map */