@charset "UTF-8";
/* ------------------------ 2뎁스 탭 (데이터) ------------------------ */
.comTabData {
width: 100%;
margin-top: 60px;
}
.comTabData:first-child {
margin-top: 0;
}
.comTabData .tabMenuGroup {
width: 100%;
overflow: hidden;
}
.comTabData .tabMenuGroup .tabMenu {
width: 100%;
display: flex;
}
.comTabData .tabMenuGroup .tabMenu .tabItem {
width: max-content;
flex-shrink: 0;
display: flex;
justify-content: center;
}
.comTabData .tabMenuGroup .tabMenu .tabItem .tabName {
width: max-content;
height: 46px;
padding: 0 36px;
font-size: 1rem;
font-weight: 500;
border-radius: 8px;
line-height: 46px;
border-radius: 23px;
color: var(--Gray-600);
border: 1px solid var(--Gray-300);
background: #fff;
display: inline-block;
}
.comTabData .tabMenuGroup .tabMenu .tabItem .tabName.on {
color: #fff;
border: 1px solid var(--Primary);
background: var(--Primary);
}
.comTabData .tabMenuGroup .tabMenu .tabItem .tabName.on.orange {
border: 1px solid var(--Point-Orange);
background: var(--Point-Orange);
}
.comTabData .tabMenuGroup .tabMenu .tabItem .tabName.on.blue {
border: 1px solid var(--Point-Blue);
background: var(--Point-Blue);
}
.comTabData .tabMenuGroup .tabMenu .tabItem .tabName.on.mint {
border: 1px solid var(--Point-Primary2);
background: var(--Point-Primary2);
}
.comTabData:not(.modTab02) {
display: flex;
}
.comTabData:not(.modTab02) .tabMenuGroup {
flex: 1;
}
.comTabData:not(.modTab02) .right {
margin-top: auto;
}
.comTabData:not(.modTab02) .right .frmBox {
width: 160px;
max-width: 160px;
}
.comTitH2 + .comTabData:not(.modTab02) {
margin-top: 32px;
}
@media screen and (max-width: 767px) {
.comTabData {
width: calc(100% + 32px);
margin-left: -16px;
margin-top: 40px;
}
.comTabData .tabMenuGroup {
padding: 0 20px;
}
.comTabData .tabMenuGroup .tabMenu .tabItem .tabName {
padding: 0 24px;
font-size: 0.9375rem;
color: var(--Gray-700);
border: 1px solid var(--Bg-Line-line-100);
}
.comTabData:not(.modTab02) {
flex-wrap: wrap;
}
.comTabData:not(.modTab02) .right {
width: 100%;
margin-top: 24px;
padding: 0 20px;
}
.comTabData:not(.modTab02) .right .frmBox {
width: 100%;
min-width: 100%;
}
}
.comTabData + .listBoard {
margin-top: 40px !important;
}
@media screen and (max-width: 767px) {
.comTabData + .listBoard {
margin-top: 24px !important;
}
}
.comTabData.posRelative {
position: relative;
}
.comTabData .rightLink {
position: absolute;
right: 0;
top: 14px;
z-index: 1;
}
.comTabData .rightLink ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.comTabData .rightLink ul li a {
display: flex;
align-items: center;
height: 32px;
padding: 0 12px;
border-radius: 6px;
border: 1px solid var(--Gray-300);
background: #fff;
font-size: 0.875rem;
color: var(--Gray-600);
}
.comTabData .rightLink ul li a:hover {
color: #000;
border: 1px solid #000;
}
.comTabData .rightLink ul li a:active {
border: 1px solid #000;
background: var(--Bg-Line-bg-100);
}
.comTabData .rightLink ul li a:disabled {
color: var(--Gray-300);
border: 1px solid var(--Gray-200);
background: var(--Gray-100);
}
@media screen and (max-width: 767px) {
.comTabData .rightLink {
position: static;
margin-top: 40px;
padding: 0 16px;
}
.comTabData .rightLink ul {
gap: 12px 8px;
}
}
/* 모바일 요약출주표 전용(다른곳엔 팝업내 탭이 없다는 가정하에) */
.modPopup .modTab02 {
margin-right: -16px;
}
.modPopup .modTab02 .tabMenuGroup .tabMenu .tabItem {
margin-right: 12px;
}
.modPopup .modTab02 .tabMenuGroup .tabMenu .tabItem:last-child {
margin-right: 0;
}
.modPopup .modTab02 .tabContianer {
padding: 0;
}
/* ------------------------------- 헤더 ------------------------------- */
.cptHeader {
width: 100%;
background: #fff;
transition: transform 0.2s, background 0.2s;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
.cptHeader:not(.inMain).on {
transform: translateY(-112px);
background: var(--Primary);
}
.cptHeader:not(.inMain).on .headArea .headBox .logoBox {
width: 104px;
height: 26px;
position: absolute;
left: 20px;
top: 90px;
}
.cptHeader:not(.inMain).on .headArea .headBox .logoBox .logo g path {
fill: #fff;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup {
position: absolute;
right: 59px;
top: 93px;
gap: 16px;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item .myLink {
padding-left: 28px;
height: 24px;
font-size: 0;
display: block;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico01 .myLink {
background: url(../../../images/kboat/common/ic_head_01_on.svg) left 2px center no-repeat;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico02 .myLink {
background: url(../../../images/kboat/common/ic_head_02_on.svg) left 2px center no-repeat;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico02 .myMenuArea {
left: calc(50% - 105px);
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico03 .myLink {
background: url(../../../images/kboat/common/ic_head_03_on.svg) left 2px center no-repeat;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico04 .myLink {
background: url(../../../images/kboat/common/ic_head_04_on.svg) left 2px center no-repeat;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico05 .myLink {
background: url(../../../images/kboat/common/ic_head_05_on.svg) left 2px center no-repeat;
}
.cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico05 .myMenuArea {
left: auto;
right: -26px;
}
.cptHeader:not(.inMain).on .gnbArea {
border-top: 1px solid var(--Primary);
border-bottom: 1px solid var(--Primary);
}
.cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group {
margin-left: 165px;
margin-right: 290px;
}
.cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu .depth1Name {
color: #fff;
font-size: 16px;
}
.cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu.on .depth1Name, .cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu:hover .depth1Name, .cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu:focus .depth1Name {
color: var(--Point2);
}
.cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area) .depth1Name {
padding-right: 20px;
background: url(../../../images/kboat/common/ic_gnb_dep1_at.svg) right 2px center/14px no-repeat;
}
.cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area).on .depth1Name, .cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):hover .depth1Name, .cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):focus .depth1Name {
background: url(../../../images/kboat/common/ic_gnb_dep1_at_on.svg) right 2px center/14px no-repeat;
}
.cptHeader:not(.inMain).on .gnbArea .gnbBox .allMenu {
background: url(../../../images/kboat/common/ic_all_menu_on.svg) center no-repeat;
}
.cptHeader .quickArea {
width: 100%;
}
.cptHeader .quickArea .quickBox {
width: 100%;
max-width: 1480px;
height: 40px;
margin: 0 auto;
padding: 10px 20px;
}
.cptHeader .quickArea .quickBox .guickMenuGroup {
width: 100%;
height: 20px;
display: flex;
justify-content: flex-end;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item {
padding-left: 29px;
position: relative;
display: flex;
align-items: center;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item::before {
content: "";
width: 1px;
height: 16px;
background: var(--Bg-Line-line-100);
display: block;
position: absolute;
left: 14px;
top: 3px;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item:first-child::before {
display: none;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item a {
color: var(--Gray-700);
font-size: 0.9375rem;
font-weight: 400;
line-height: 150%;
display: block;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item a[target=_blank] {
padding-right: 20px;
background: url(../../../images/kboat/common/ic_link_blank.svg) right 2px center no-repeat;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item .txt {
color: var(--Gray-700);
font-size: 0.9375rem;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item .viewPer {
color: var(--Gray-700);
font-size: 0.9375rem;
font-style: normal;
font-weight: 400;
line-height: 1.5;
margin-left: 4px;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item .btnView {
width: 16px;
height: 16px;
font-size: 0;
border-radius: 4px;
border: 1px solid var(--Gray-300);
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item .btnView.minus {
background: url(../../../images/kboat/common/ic_12_header_minus.svg) center no-repeat;
margin-left: 8px;
}
.cptHeader .quickArea .quickBox .guickMenuGroup .item .btnView.plus {
background: url(../../../images/kboat/common/ic_12_header_plus.svg) center no-repeat;
margin-left: 4px;
}
.cptHeader .headArea {
width: 100%;
position: relative;
z-index: 101;
}
.cptHeader .headArea .headBox {
width: 100%;
max-width: 1480px;
height: 72px;
margin: 0 auto;
padding: 0 20px 12px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.cptHeader .headArea .headBox .logoBox {
width: 160px;
}
.cptHeader .headArea .headBox .logoBox .logo {
width: 100%;
}
.cptHeader .headArea .headBox .myMenuGroup {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.cptHeader .headArea .headBox .myMenuGroup .item {
position: relative;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myLink {
padding-left: 28px;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: 150%; /* 24px */
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico01 .myLink {
background: url(../../../images/kboat/common/ic_head_01.svg) left 2px center no-repeat;
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico02 .myLink {
background: url(../../../images/kboat/common/ic_head_02.svg) left 2px center no-repeat;
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico02 .myMenuArea {
left: calc(50% - 89px);
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico02 .myMenuArea .myMenuBox::after {
right: 98px;
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico03 .myLink {
background: url(../../../images/kboat/common/ic_head_03.svg) left 2px center no-repeat;
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico04 .myLink {
background: url(../../../images/kboat/common/ic_head_04.svg) left 2px center no-repeat;
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico05 .myLink {
background: url(../../../images/kboat/common/ic_head_05.svg) left 2px center no-repeat;
}
.cptHeader .headArea .headBox .myMenuGroup .item.ico05 .myMenuArea {
left: auto;
right: 0;
}
.cptHeader .headArea .headBox .myMenuGroup .item:hover .myMenuArea {
display: block;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea {
width: 210px;
padding-top: 20px;
position: absolute;
left: 0;
top: 20px;
filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.12));
display: none;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox {
width: 100%;
padding-top: 2px;
background: #fff;
border-radius: 12px;
filter: drop-shadow(0px 0px 1px #ededed);
overflow: hidden;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox::after {
content: "";
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom: 15px solid #fff;
display: block;
position: absolute;
right: 33px;
top: -20px;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .myInfo {
width: 100%;
padding: 16px 28px 11px;
border-bottom: 1px solid var(--Bg-Line-line-200);
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .myInfo .name {
color: var(--Gray-900);
font-size: 1.125rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
display: block;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .myInfo .timeTxt {
margin-top: 8px;
color: var(--Gray-600);
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
display: block;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .myInfo .timeBox {
width: 100%;
margin-top: 8px;
display: flex;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .myInfo .timeBox .time {
padding-left: 20px;
color: #254962;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.6;
background: url(../../../images/kboat/common/ic_16_clock.svg) left center no-repeat;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .myInfo .timeBox .btnOvertime {
height: 24px;
padding: 0 8px;
margin-left: 16px;
color: #254962;
font-size: 0.75rem;
font-weight: 700;
border-radius: 4px;
background: #EFF6FF;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .menuBox {
width: 100%;
padding-top: 8px;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .menuBox .subItem {
width: 100%;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .menuBox .subItem a {
width: 100%;
padding: 12px 24px;
color: var(--Gray-900);
font-size: 1rem;
font-weight: 500;
display: block;
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .menuBox .subItem a:hover {
background: var(--Bg-Line-bg-200);
}
.cptHeader .headArea .headBox .myMenuGroup .item .myMenuArea .myMenuBox .btnLogout {
width: 100%;
margin-top: 8px;
padding: 16px 24px 18px 48px;
color: var(--Primary);
font-size: 0.9375rem;
font-weight: 500;
text-align: left;
display: block;
border-top: 1px solid var(--Bg-Line-bg-200);
background: url(../../../images/kboat/common/ic_16_logout_green.svg) 24px center no-repeat;
}
.cptHeader .gnbArea {
width: 100%;
border-top: 1px solid var(--Bg-Line-line-100);
border-bottom: 1px solid var(--Bg-Line-line-100);
position: relative;
z-index: 100;
}
.cptHeader .gnbArea .gnbBox {
width: 100%;
max-width: 1480px;
height: 62px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cptHeader .gnbArea .gnbBox .depth1Group {
width: 1050px;
height: 100%;
margin-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu {
height: 100%;
align-content: center;
flex-grow: 1;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu .depth1Name {
width: max-content;
padding-right: 0;
color: var(--Gray-800);
font-size: 1.25rem;
font-weight: 700;
line-height: normal;
display: flex;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area) .depth1Name {
padding-right: 32px;
background: url(../../../images/kboat/common/ic_gnb_dep1_off.svg) right 2px center no-repeat;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area).on .depth1Name, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):hover .depth1Name, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):focus .depth1Name {
background: url(../../../images/kboat/common/ic_gnb_dep1_on.svg) right 2px center no-repeat;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area).on .depth2Area, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):hover .depth2Area, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):focus .depth2Area {
height: 470px;
display: block;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area).active .depth1Name {
background: url(../../../images/kboat/common/ic_gnb_dep1_on.svg) right 2px center no-repeat;
}
.cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu.on .depth1Name, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:hover .depth1Name, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu:focus .depth1Name, .cptHeader .gnbArea .gnbBox .depth1Group .depth1Menu.active .depth1Name {
color: var(--Primary);
}
.cptHeader .gnbArea .gnbBox .depth2Area {
width: 100%;
height: 0;
position: absolute;
left: 0;
top: 62px;
background: #fff;
border-top: 1px solid var(--Bg-Line-line-100);
box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1);
z-index: 99;
display: none;
overflow: hidden;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box {
width: 100%;
max-width: 1480px;
height: 100%;
margin: 0 auto;
padding: 12px 20px 40px;
display: flex;
justify-content: space-between;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group {
width: 100%;
height: 418px;
position: relative;
display: flex;
flex-wrap: wrap;
gap: 40px;
flex-direction: column;
align-content: flex-start;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu {
width: 220px;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu:first-child {
margin-top: 0;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu .depth2Name {
width: 100%;
padding: 20px;
color: var(--Gray-900);
font-size: 1.125rem;
font-weight: 700;
line-height: normal;
display: block;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu .depth2Name[target=_blank]::after {
content: "";
width: 20px;
height: 20px;
margin-left: 8px;
display: inline-block;
vertical-align: bottom;
background: url(../../../images/kboat/common/ic_20_outlink.svg) center no-repeat;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu:hover, .cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu.active {
border-radius: 12px;
background: #F9FAFC;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .bnBox {
width: 220px;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .bnBox .imgBox {
width: 100%;
height: 220px;
border-radius: 20px;
overflow: hidden;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .bnBox .textBox {
width: 100%;
margin-top: 16px;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .bnBox .textBox p {
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: normal;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .bnBox .moreBox {
width: 100%;
margin-top: 24px;
}
.cptHeader .gnbArea .gnbBox .depth2Area .depth2Box .bnBox .moreBox a {
width: max-content;
height: 20px;
color: var(--Gray-500);
font-size: 1rem;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
border-bottom: 1px solid var(--Gray-500);
display: block;
position: relative;
}
.cptHeader .gnbArea .gnbBox .depth3Group {
width: 100%;
}
.cptHeader .gnbArea .gnbBox .depth3Group .depth3Menu {
width: 100%;
}
.cptHeader .gnbArea .gnbBox .depth3Group .depth3Menu.active .depth3Name {
text-decoration: underline;
text-underline-position: under;
}
.cptHeader .gnbArea .gnbBox .depth3Group .depth3Menu .depth3Name {
width: 100%;
padding: 0 20px 20px;
color: var(--Gray-600);
font-size: 1rem;
font-weight: 400;
line-height: normal;
display: block;
}
.cptHeader .gnbArea .gnbBox .depth3Group .depth3Menu .depth3Name:hover {
text-decoration: underline;
text-underline-position: under;
}
.cptHeader .gnbArea .gnbBox .allMenu {
width: 24px;
height: 100%;
font-size: 0;
background: url(../../../images/kboat/common/ic_all_menu.svg) center no-repeat;
}
.cptHeader.inMain {
min-width: 1610px;
position: relative;
}
.cptHeader.inMain .quickArea .quickBox {
width: 1740px;
max-width: 1740px;
padding: 10px 150px;
}
.cptHeader.inMain .headArea .headBox {
max-width: 1740px;
width: 1740px;
padding: 0 150px 12px;
}
.cptHeader.inMain .gnbArea {
min-width: 1760px;
}
.cptHeader.inMain .gnbArea .gnbBox {
max-width: 1740px;
width: 1740px;
padding: 0 150px;
}
@media screen and (max-width: 1280px) {
.cptHeader:not(.inMain) .gnbArea .gnbBox {
justify-content: flex-end;
}
.cptHeader:not(.inMain) .gnbArea .gnbBox .depth1Group {
display: none;
}
}
@media screen and (max-width: 767px) {
.cptHeader:not(.inMain), .cptHeader:not(.inMain).on {
transform: translateY(-112px);
background: #fff;
}
.cptHeader:not(.inMain) .quickArea .quickBox .guickMenuGroup, .cptHeader:not(.inMain).on .quickArea .quickBox .guickMenuGroup {
display: none;
}
.cptHeader:not(.inMain) .headArea .headBox .logoBox, .cptHeader:not(.inMain).on .headArea .headBox .logoBox {
width: 110px;
height: 26px;
position: absolute;
left: 20px;
top: 94px;
}
.cptHeader:not(.inMain) .headArea .headBox .logoBox .logo g path, .cptHeader:not(.inMain).on .headArea .headBox .logoBox .logo g path {
fill: rgb(111, 111, 113);
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup {
position: absolute;
right: 74px;
top: 83px;
gap: 4px;
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup .item .myLink, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item .myLink {
width: 50px;
height: 50px;
padding-left: 0;
padding-top: 34px;
font-size: 0.75rem;
text-align: center;
display: block;
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup .item.ico01 .myLink, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico01 .myLink {
background: url(../../../images/kboat/common/ic_head_01.svg) center 8px no-repeat;
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup .item.ico02, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico02 {
display: none;
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup .item.ico03, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico03 {
display: none;
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup .item.ico04, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico04 {
display: none;
}
.cptHeader:not(.inMain) .headArea .headBox .myMenuGroup .item.ico05, .cptHeader:not(.inMain).on .headArea .headBox .myMenuGroup .item.ico05 {
display: none;
}
.cptHeader:not(.inMain) .gnbArea, .cptHeader:not(.inMain).on .gnbArea {
border-top: 1px solid #fff;
border-bottom: 1px solid var(--Bg-Line-line-100, #E1E4EA);
}
.cptHeader:not(.inMain) .gnbArea .gnbBox, .cptHeader:not(.inMain).on .gnbArea .gnbBox {
height: 70px;
}
.cptHeader:not(.inMain) .gnbArea .gnbBox .depth1Group, .cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group {
display: none;
}
.cptHeader:not(.inMain) .gnbArea .gnbBox .depth1Group .depth1Menu .depth1Name, .cptHeader:not(.inMain).on .gnbArea .gnbBox .depth1Group .depth1Menu .depth1Name {
color: #fff;
background: url(../../../images/kboat/common/ic_gnb_dep1_at.svg) right 2px center no-repeat;
}
.cptHeader:not(.inMain) .gnbArea .gnbBox .allMenu, .cptHeader:not(.inMain).on .gnbArea .gnbBox .allMenu {
width: 50px;
height: 50px;
padding-top: 34px;
color: var(--Gray-800, #2C2C2C);
font-size: 0.75rem;
font-weight: 700;
line-height: normal;
background: url(../../../images/kboat/common/ic_all_menu_mo.svg) center 8px no-repeat;
}
}
.allMenuArea {
width: 100%;
height: 100vh;
background: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 200;
display: none;
}
.allMenuArea.on {
display: block;
opacity: 0;
animation: openAllMenu 0.15s linear forwards;
}
@keyframes openAllMenu {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media screen and (min-width: 768px) {
.allMenuArea:not(.inMain) *:hover::-webkit-scrollbar-thumb {
background: rgba(87, 87, 87, 0.54);
}
.allMenuArea:not(.inMain) *::-webkit-scrollbar {
width: 30px;
padding: 10px;
background: #fff;
}
.allMenuArea:not(.inMain) *::-webkit-scrollbar-thumb {
padding: 10px;
border: 12px solid #fff;
border-radius: 15px;
background: rgba(87, 87, 87, 0.2); /* box-shadow: inset 6px 6px 0 rgba(87, 87, 87, 0.54); */
}
.allMenuArea:not(.inMain) *::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
}
.allMenuArea .allTop {
width: 100%;
height: 86px;
background: var(--Point-Primary2);
}
.allMenuArea .allTop .pcView {
width: 100%;
max-width: 1480px;
padding: 23px 20px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.allMenuArea .allTop .pcView .logo {
width: 160px;
align-content: center;
}
.allMenuArea .allTop .pcView .logo img {
width: 100%;
vertical-align: middle;
}
.allMenuArea .allTop .pcView .btnClose {
width: 40px;
height: 40px;
font-size: 0;
background: url(../../../images/kboat/common/ic_40_close.svg) center no-repeat;
align-content: center;
}
.allMenuArea .allTop .moView {
display: none;
}
.allMenuArea .allMenuGroup {
width: 100%;
height: calc(100vh - 86px);
overflow-y: scroll;
}
.allMenuArea .allMenuGroup .allMenuBox {
width: 100%;
max-width: 1480px;
padding: 0 20px;
margin: 0 auto;
}
.allMenuArea .allMenuGroup .allMenuBox .depth1Group {
width: 100%;
}
.allMenuArea .allMenuGroup .allMenuBox .depth1Group .depth1Menu {
width: 100%;
padding: 60px 0;
border-top: 1px solid var(--Bg-Line-line-100);
display: flex;
}
.allMenuArea .allMenuGroup .allMenuBox .depth1Group .depth1Menu:first-child {
border-top: 0;
}
.allMenuArea .allMenuGroup .allMenuBox .depth1Group .depth1Menu .depth1Name {
width: 23.6%;
color: var(--Primary);
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
flex-shrink: 0;
}
.allMenuArea .allMenuGroup .allMenuBox .depth2Group {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 40px 20px;
}
.allMenuArea .allMenuGroup .allMenuBox .depth2Group .depth2Menu {
width: calc(20% - 16px);
min-width: 160px;
}
.allMenuArea .allMenuGroup .allMenuBox .depth2Group .depth2Menu .depth2Name {
color: var(--Gray-900);
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
}
.allMenuArea .allMenuGroup .allMenuBox .depth2Group .depth2Menu .depth2Name[target=_blank]::after {
content: "";
width: 20px;
height: 20px;
margin-top: -3px;
margin-left: 8px;
display: inline-block;
vertical-align: bottom;
background: url(../../../images/kboat/common/ic_20_outlink.svg) center no-repeat;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group {
margin-top: 16px;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu {
margin-top: 8px;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu:first-child {
margin-top: 0;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name {
color: var(--Gray-800);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.6;
position: relative;
z-index: 1;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name[target=_blank]::after {
content: "";
width: 20px;
height: 20px;
margin-top: -3px;
margin-left: 8px;
display: inline-block;
vertical-align: middle;
background: url(../../../images/kboat/common/ic_16_outlink.svg) center no-repeat;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name::before {
content: "";
width: calc(100% + 4px);
height: 14px;
background: #B3E8FF;
display: block;
position: absolute;
left: -2px;
bottom: -3px;
z-index: -1;
opacity: 0;
transition: all 0.1s;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name:hover::before {
opacity: 1;
}
.allMenuArea .allMenuGroup .allMenuBox .depth3Group .depth3Menu.active .depth3Name::before {
opacity: 1;
}
.allMenuArea .allMenuGroup .allMenuBox .quickLink {
width: 100%;
padding: 20px 16px 32px;
border-top: 1px solid var(--Bg-Line-line-200);
display: none;
}
.allMenuArea .allMenuGroup .allMenuBox .quickLink .quickItem {
width: 100%;
margin-top: 12px;
}
.allMenuArea .allMenuGroup .allMenuBox .quickLink .quickItem:first-child {
margin-top: 0;
}
.allMenuArea .allMenuGroup .allMenuBox .quickLink .quickItem:first-child a {
letter-spacing: -0.3px;
}
.allMenuArea .allMenuGroup .allMenuBox .quickLink .quickItem a {
width: max-content;
height: 24px;
color: var(--Primary);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.6;
display: block;
}
.allMenuArea .allMenuGroup .allMenuBox .quickLink .quickItem a[target=_blank] {
padding-right: 18px;
background: url(../../../images/kboat/common/ic_link_blank_primary.svg) right center no-repeat;
}
@media screen and (max-width: 767px) {
.allMenuArea:not(.inMain) {
transform: translateY(112px);
}
.allMenuArea:not(.inMain) .allTop {
height: 65px;
}
.allMenuArea:not(.inMain) .allTop .pcView {
display: none;
}
.allMenuArea:not(.inMain) .allTop .moView {
width: 100%;
padding: 20px 16px;
display: flex;
justify-content: space-between;
}
.allMenuArea:not(.inMain) .allTop .moView .profile {
display: flex;
}
.allMenuArea:not(.inMain) .allTop .moView .profile .name {
height: 25px;
padding: 0 20px 0 24px;
color: #fff;
font-size: 1.1875rem;
font-weight: 400;
line-height: 1.3;
position: relative;
}
.allMenuArea:not(.inMain) .allTop .moView .profile .name::before {
content: "";
width: 20px;
height: 20px;
display: block;
background: url(../../../images/kboat/common/ic_head_05_on.svg) center no-repeat;
position: absolute;
left: 0;
top: 1px;
}
.allMenuArea:not(.inMain) .allTop .moView .profile .name::after {
content: "";
width: 20px;
height: 20px;
display: block;
background: url(../../../images/kboat/common/ic_16_profile.svg) center no-repeat;
position: absolute;
right: 0;
top: 2px;
}
.allMenuArea:not(.inMain) .allTop .moView .profile .name b {
font-weight: 600;
}
.allMenuArea:not(.inMain) .allTop .moView .profile .btnLogout {
height: 25px;
margin-left: 20px;
padding: 1px 8px 0;
color: #fff;
font-size: 0.75rem;
font-weight: 500;
line-height: 24px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.18);
display: block;
}
.allMenuArea:not(.inMain) .allTop .moView .btnClose {
width: 24px;
height: 24px;
font-size: 0;
background: url(../../../images/kboat/common/ic_40_close.svg) center/24px no-repeat;
}
.allMenuArea:not(.inMain) .allMenuGroup {
height: calc(100dvh - 65px);
overflow-y: auto;
position: relative;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox {
height: 100%;
padding: 0;
overflow-y: auto;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth1Group {
min-height: calc(100% - 185px);
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth1Group .depth1Menu {
padding: 0;
border-top: 0;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth1Group .depth1Menu .depth1Name {
width: 100%;
padding: 16px;
color: var(--Gray-800);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.3;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth1Group .depth1Menu.on .depth1Name {
color: var(--Primary);
font-weight: 700;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth1Group .depth1Menu.on .depth2Group {
display: flex;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group {
width: calc(100% - 150px);
height: 100%;
gap: 0;
border-left: 1px solid var(--Bg-Line-line-200);
overflow-y: auto;
background: #fff;
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: none;
align-content: baseline;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group .depth2Menu {
width: 100%;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group .depth2Menu .depth2Name {
width: 100%;
padding: 16px 12px 12px;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
display: block;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group .depth2Menu.on {
background: #F9FAFC;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group .depth2Menu.on .depth3Group {
display: block;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group .depth2Menu:has(.depth3Group) .depth2Name {
background: url(../../../images/kboat/common/ic_20_allmenu.svg) right 16px top 20px no-repeat;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth2Group .depth2Menu:has(.depth3Group).on .depth2Name {
background: url(../../../images/kboat/common/ic_20_allmenu_on.svg) right 16px top 20px no-repeat;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth3Group {
margin-top: 0;
padding-bottom: 8px;
display: none;
overflow: hidden;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth3Group .depth3Menu {
margin-top: 0;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name {
padding: 8px 12px;
font-size: 0.9375rem;
display: block;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name::before {
display: none;
}
.allMenuArea:not(.inMain) .allMenuGroup .allMenuBox .quickLink {
display: block;
}
}
/*
.cptHeader {
width:100%; background: #fff; transition: transform 0.2s, background 0.2s; position: fixed; left:0; top:0; z-index: 100;
&.on {
transform: translateY(-112px); background: var(--Primary);
.headArea {
.headBox {
.logoBox {
width: 104px; height: 26px; position: absolute; left: 20px; top: 90px;
.logo g path {fill: #fff;}
}
.myMenuGroup {
position: absolute; right: 68px; top: 93px; gap: 24px;
.item {
a {
padding-left: 28px; height: 24px; font-size:0; display:block;
}
&.ico01 a {background: url(../../../images/kboat/common/ic_head_01_on.svg) left 2px center no-repeat;}
&.ico02 a {background: url(../../../images/kboat/common/ic_head_02_on.svg) left 2px center no-repeat;}
&.ico03 a {background: url(../../../images/kboat/common/ic_head_03_on.svg) left 2px center no-repeat;}
&.ico04 a {background: url(../../../images/kboat/common/ic_head_04_on.svg) left 2px center no-repeat;}
}
}
}
}
.gnbArea {
border-top: 1px solid var(--Primary); border-bottom: 1px solid var(--Primary);
.gnbBox {
.depth1Group {
margin-left: 215px; margin-right:290px;
.depth1Menu {
.depth1Name {
color: #fff; background: url(../../../images/kboat/common/ic_gnb_dep1_at.svg) right 2px center no-repeat;
}
&.on {
.depth1Name {
color: var(--Point2); background: url(../../../images/kboat/common/ic_gnb_dep1_at_on.svg) right 2px center no-repeat;
}
}
}
}
.allMenu {background: url(../../../images/kboat/common/ic_all_menu_on.svg) center no-repeat;}
}
}
}
.quickArea {
width: 100%;
.quickBox {
width: 100%; max-width:1480px; height: 40px; margin: 0 auto; padding: 10px 20px;
.guickMenuGroup {
width: 100%; height:20px; display:flex; justify-content: flex-end;
.item {
padding-left:29px; position: relative;
&::before {content:""; width:1px; height:16px; background: var(--Bg-Line-line-100); display: block; position: absolute; left: 14px; top: 3px;}
&:first-child::before {display: none;}
a {
color: var(--Gray-700); font-size: rem(15px); font-weight: 400; line-height: 150%; display:block;
&[target=_blank] {
padding-right:20px; background: url(../../../images/kboat/common/ic_link_blank.svg) right 2px center no-repeat;
}
}
}
}
}
}
.headArea {
width:100%; position: relative; z-index: 101;
.headBox {
width: 100%; max-width:1480px; height: 72px; margin: 0 auto; padding: 0 20px 12px; display: flex; justify-content: space-between; align-items: center; position: relative;
.logoBox {
width:160px;
.logo {
width:100%;
}
}
.myMenuGroup {
display: flex; justify-content: flex-end; align-items: center; gap: 20px;
.item {
a {
padding-left: 28px; color: var(--Gray-800); font-size: rem(16px); font-weight: 700; line-height: 150%;
}
&.ico01 a {background: url(../../../images/kboat/common/ic_head_01.svg) left 2px center no-repeat;}
&.ico02 a {background: url(../../../images/kboat/common/ic_head_02.svg) left 2px center no-repeat;}
&.ico03 a {background: url(../../../images/kboat/common/ic_head_03.svg) left 2px center no-repeat;}
&.ico04 a {background: url(../../../images/kboat/common/ic_head_04.svg) left 2px center no-repeat;}
}
}
}
}
.gnbArea {
width:100%; border-top: 1px solid var(--Bg-Line-line-100); border-bottom: 1px solid var(--Bg-Line-line-100); position: relative; z-index: 100;
.gnbBox {
width: 100%; max-width:1480px; height: 62px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;
.depth1Group {
width: 824px; margin-right:20px; display: flex; justify-content: space-between; align-items: center; transition: margin-left 0.3s;
.depth1Menu {
.depth1Name {
padding-right:32px; color: var(--Gray-800); font-size: rem(20px); font-weight: 800; line-height: normal; display: flex;
background: url(../../../images/kboat/common/ic_gnb_dep1_off.svg) right 2px center no-repeat;
}
&.on {
.depth1Name {
color: var(--Primary); background: url(../../../images/kboat/common/ic_gnb_dep1_on.svg) right 2px center no-repeat;
}
.depth2Area {height:396px; display: block; }
}
}
}
.depth2Area {
width: 100%; height:0; position: absolute; left: 0; top: 63px; background: #fff;
box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); z-index: 99; display:block; overflow: hidden;
.depth2Box {
width: 100%; max-width: 1480px; margin: 0 auto; padding: 32px 20px 40px; display: flex; justify-content: space-between;
.depth2Group{
position: relative;
.depth2Menu {
width: 220px; height:28px; margin-top: 28px;
&:first-child {margin-top: 0;}
.depth2Name {
width: max-content; height:28px; padding-bottom:7px; color: var(--Gray-600); font-size: rem(18px); font-weight: 400; line-height: normal; display: block;
}
&.on {
background: url(../../../images/kboat/common/ic_gnb_dep2_arr.svg) right center no-repeat;
.depth2Name {
color: var(--Gray-900); font-weight: 700; position: relative;
&::before {
content:""; width:100%; height:1px; background: var(--Gray-900); display: block; position: absolute; left: 0; bottom: 3px;
}
}
.depth3Group {
display: block;
}
}
}
}
.bnBox {
width: 220px;
.imgBox {
width: 100%; height: 220px; border-radius: 20px; overflow: hidden;
}
.textBox {
width: 100%; margin-top: 16px;
p {
color: var(--Gray-800); font-size: rem(16px); font-weight: 700; line-height: normal;
}
}
.moreBox {
width: 100%; margin-top: 24px;
a {
width: max-content; height: 20px; color: var(--Gray-500); font-size: rem(16px); font-weight: 400; line-height: normal;
text-transform: capitalize; border-bottom: 1px solid var(--Gray-500); display: block; position: relative;
}
}
}
}
}
.depth3Group {
width:220px; position: absolute; left: 300px; top: 0; display:none;
.depth3Menu {
width: 220px; height:28px; margin-top: 28px;
&:first-child {margin-top: 0;}
.depth3Name {
width: max-content; height:28px; padding-bottom:7px; color: var(--Gray-600); font-size: rem(18px); font-weight: 400; line-height: normal; display: block;
}
&.on {
background: url(../../../images/kboat/common/ic_gnb_dep2_arr.svg) right center no-repeat;
.depth3Name {
color: var(--Gray-900); font-weight: 700; position: relative;
&::before {
content:""; width:100%; height:1px; background: var(--Gray-900); display: block; position: absolute; left: 0; bottom: 3px;
}
}
.depth4Group {
display: block;
}
}
}
}
.depth4Group {
width:220px; position: absolute; left: 300px; top: 0; display:none;
.depth4Menu {
width: 220px; height:28px; margin-top: 28px;
&:first-child {margin-top: 0;}
.depth4Name {
width: max-content; height:28px; padding-bottom:7px; color: var(--Gray-600); font-size: rem(18px); font-weight: 400; line-height: normal; display: block;
}
&.on {
background: url(../../../images/kboat/common/ic_gnb_dep2_arr.svg) right center no-repeat;
.depth4Name {
color: var(--Gray-900); font-weight: 700; position: relative;
&::before {
content:""; width:100%; height:1px; background: var(--Gray-900); display: block; position: absolute; left: 0; bottom: 3px;
}
}
}
}
}
.allMenu {
width: 24px; height: 100%; font-size: 0; background: url(../../../images/kboat/common/ic_all_menu.svg) center no-repeat;
}
}
}
@include media('pcs'){
.gnbArea {
.gnbBox {
justify-content: flex-end;
.depth1Group {
display: none;
}
}
}
}
@include media('mobile'){
& ,&.on {
transform: translateY(-112px); background: #fff;
.quickArea .quickBox .guickMenuGroup {display: none;}
.headArea {
.headBox {
.logoBox {
width: 110px; height: 26px; position: absolute; left: 20px; top: 94px;
.logo g path {fill: #00458D;}
}
.myMenuGroup {
position: absolute; right: 74px; top: 83px; gap: 4px;
.item {
a {
width: 50px; height: 50px; padding-left: 0; padding-top: 34px; font-size: rem(12px); text-align: center; display:block;
}
&.ico01 a {background: url(../../../images/kboat/common/ic_head_01.svg) center 8px no-repeat;}
&.ico02 {display: none;}
&.ico03 a {background: url(../../../images/kboat/common/ic_head_03.svg) center 8px no-repeat;}
&.ico04 {display: none;}
}
}
}
}
.gnbArea {
border-top: 1px solid #fff; border-bottom: 1px solid var(--Bg-Line-line-100, #E1E4EA);;
.gnbBox {
height: 70px;
.depth1Group {
display: none;
.depth1Menu {
.depth1Name {
color: #fff; background: url(../../../images/kboat/common/ic_gnb_dep1_at.svg) right 2px center no-repeat;
}
}
}
.allMenu {
width: 50px; height: 50px; padding-top: 34px;
color: var(--Gray-800, #2C2C2C); font-size: rem(12px); font-weight: 700; line-height: normal;
background: url(../../../images/kboat/common/ic_all_menu_mo.svg) center 8px no-repeat;
}
}
}
}
}
}
.allMenuArea {
width: 100%; height: 100vh; background: #fff; position: fixed; left: 0; top: 0; z-index: 200;
@include minWidth('mobile'){
*:hover::-webkit-scrollbar-thumb {
background: rgba(87, 87, 87, 0.54);
}
*::-webkit-scrollbar {width:30px; padding:10px;}
*::-webkit-scrollbar-thumb {padding:10px; border: 12px solid #fff; border-radius: 15px; background: rgba(87, 87, 87, 0.2); }
*::-webkit-scrollbar-track{background-color: rgba(0,0,0,0);}
}
.allTop {
width: 100%; height: 86px; background: var(--Point-Primary2);
.pcView {
width: 100%; max-width: 1480px; padding: 23px 20px; margin: 0 auto;
}
.moView {
display: none;
}
}
.allMenuGroup {
width: 100%; height: calc(100vh - 86px); overflow-y: scroll;
.allMenuBox {
width: 100%; max-width: 1480px; padding: 0 20px; margin: 0 auto;
.depth1Group {
width: 100%;
.depth1Menu {
width: 100%; padding: 60px 0; border-top: 1px solid var(--Bg-Line-line-100); display: flex;
&:first-child {border-top: 0;}
.depth1Name{
width: 23.6%; color: var(--Primary); font-size: rem(24px); font-style: normal; font-weight: 700; line-height: 1.4; flex-shrink: 0;
}
}
}
.depth2Group {
width: 100%; display: flex; flex-wrap: wrap; gap: 40px 20px;
.depth2Menu {
width: calc(20% - 16px); min-width: 160px;
.depth2Name {
color: var(--Gray-900); font-size: rem(20px); font-style: normal; font-weight: 700; line-height: 1.4;
}
}
}
.depth3Group {
margin-top: 16px;
.depth3Menu {
margin-top: 8px;
&:first-child {margin-top: 0;}
.depth3Name {
color: var(--Gray-800); font-size: rem(16px); font-style: normal; font-weight: 400; line-height: 1.6;
}
}
}
}
}
@include media('mobile'){
.allTop {
height: 136px;
.pcView {
display: none;
}
.moView {
width: 100%; padding: 20px 16px;
}
}
.allMenuGroup {
height: calc(100vh - 136px);
.allMenuBox {
height: 100%; padding: 0;
.depth1Group {
height: 100%; position: relative;
.depth1Menu {
padding: 0; border-top: 0;
.depth1Name{
width: 100%; padding: 16px; color: var(--Gray-800); font-size: rem(17px); font-weight: 500; line-height: 1.3;
}
&.on {
.depth1Name{color: var(--Primary); font-weight: 700;}
.depth2Group {display: flex;}
}
}
}
.depth2Group {
width: calc(100% - 150px); height: 100%; gap: 0; border-left: 1px solid var(--Bg-Line-line-200); overflow-y: auto; background: #fff;
position: absolute; top: 0; right: 0; display: none; align-content: baseline;
.depth2Menu {
width: 100%;
.depth2Name {
width: 100%; padding: 16px 12px 12px; font-size: rem(16px); font-weight: 700; line-height: 1.5; display: block;
background: url(../../../images/kboat/common/ic_20_allmenu.svg) right 16px top 20px no-repeat;
}
&.on {
background: #F9FAFC;
.depth2Name {background: url(../../../images/kboat/common/ic_20_allmenu_on.svg) right 16px top 20px no-repeat;}
.depth3Group {display: block;}
}
}
}
.depth3Group {
margin-top: 0; padding-bottom: 8px; display: none;
.depth3Menu {
margin-top: 0;
.depth3Name {
padding: 8px 12px; font-size: rem(15px); display: block;
}
}
}
}
}
}
}
*/
/* ------------------------------- 푸터 ------------------------------- */
.cptFooter {
width: 100%;
}
.cptFooter .footArea {
width: 100%;
background: var(--Bg-Line-bg-100);
}
.cptFooter .footArea .siteArea {
width: 100%;
border-top: 1px solid var(--Bg-Line-line-100);
border-bottom: 1px solid var(--Bg-Line-line-100);
background: #fff;
}
.cptFooter .footArea .siteArea .siteGroup {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
display: flex;
}
.cptFooter .footArea .siteArea .siteGroup .item {
width: 212px;
height: 54px;
border-right: 1px solid var(--Bg-Line-line-100);
position: relative;
}
.cptFooter .footArea .siteArea .siteGroup .item:first-child {
border-left: 1px solid var(--Bg-Line-line-100);
}
.cptFooter .footArea .siteArea .siteGroup .item .depth1Btn {
width: 100%;
height: 100%;
padding: 0 24px;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 400;
display: flex;
align-items: center;
background: url(../../../images/kboat/common/ic_ft_more.svg) right 24px center no-repeat;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth1Btn.on {
background-image: url(../../../images/kboat/common/ic_ft_more_off.svg);
background-position: right 21.5px center;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth1Btn.on + .depth2Group {
max-height: 250px;
padding: 12px 0;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group {
width: 100%;
max-height: 0;
padding: 0;
background: var(--Bg-Line-bg-200);
overflow: hidden;
position: absolute;
bottom: 55px;
left: 0;
transition: all 0.3s;
z-index: 99;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item {
padding: 6px 13px 6px 27px;
position: relative;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item::after {
display: block;
content: "";
width: 3px;
height: 3px;
background-color: var(--Gray-400);
position: absolute;
top: 17px;
left: 16px;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item .depth2Link {
height: 19px;
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
display: inline-block;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item .depth2Link.newW::after {
display: inline-block;
content: "";
width: 16px;
height: 18px;
margin-top: -1px;
padding-left: 2px;
border-bottom: 1px solid var(--Bg-Line-bg-200);
background: url(../../../images/kboat/common/ic_16_new_window.svg) 2px center/15px no-repeat;
vertical-align: middle;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item:hover .depth2Link {
color: var(--Primary);
text-decoration: underline;
text-underline-position: under;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item:hover .depth2Link.newW::after {
border-color: 1px solid var(--Primary);
background-image: url(../../../images/kboat/common/ic_16_new_window_point.svg);
}
.cptFooter .footArea .addressArea {
width: 100%;
padding: 40px 0;
}
.cptFooter .footArea .addressArea .logoGroup {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
}
.cptFooter .footArea .addressArea .logoGroup .logoBox {
width: 100%;
}
.cptFooter .footArea .addressArea .addressGroup {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 32px 20px;
display: flex;
justify-content: space-between;
}
.cptFooter .footArea .addressArea .addressGroup .alignL {
width: max-content;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox {
width: max-content;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine {
width: max-content;
margin-top: 18px;
font-size: 0;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine:first-child {
margin-top: 0;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine span {
margin-right: 24px;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 400;
line-height: 1;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine span:last-child {
margin-right: 0;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine b {
font-weight: 700;
}
.cptFooter .footArea .addressArea .addressGroup .alignR {
width: max-content;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .other {
width: max-content;
display: flex;
gap: 16px;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .other a {
height: 24px;
padding: 2px 22px 2px 2px;
color: var(--Gray-900, #111);
font-size: 1rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
background: url(../../../images/kboat/common/ic_ft_arr.svg) right 2px center no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns {
width: max-content;
margin: -50px 0 24px auto;
display: flex;
gap: 8px;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li {
width: 40px;
height: 40px;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li a {
width: 100%;
height: 100%;
font-size: 0;
display: block;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.inst a {
background: url(../../../images/kboat/common/img_sns_instagram.svg) center no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.utube a {
background: url(../../../images/kboat/common/img_sns_youtube.svg) center no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.sx a {
background: url(../../../images/kboat/common/img_sns_sx.svg) center no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.fb a {
background: url(../../../images/kboat/common/img_sns_facebook.svg) center no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.blog a {
background: url(../../../images/kboat/common/img_sns_blog.svg) center no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .ciGroup {
display: flex;
gap: 20px;
align-items: center;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .ciGroup img {
max-width: 100%;
}
.cptFooter .footArea .addressArea .menuGroup {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 16px 20px;
border-top: 1px solid var(--Bg-Line-line-100);
display: flex;
gap: 24px;
}
.cptFooter .footArea .addressArea .menuGroup .item {
width: max-content;
height: 24px;
display: flex;
}
.cptFooter .footArea .addressArea .menuGroup .item:first-child a {
color: var(--Primary);
font-weight: 700;
}
.cptFooter .footArea .addressArea .menuGroup .item a {
width: max-content;
height: 100%;
padding-top: 1px;
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 1;
display: block;
align-content: center;
}
.cptFooter .footArea .addressArea .copyGroup {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
display: flex;
}
.cptFooter .footArea .addressArea .copyGroup .copy {
color: #555;
font-size: 0.875rem;
font-weight: 400;
line-height: 1;
}
@media screen and (max-width: 1023px) {
.cptFooter .footArea .addressArea .addressGroup {
flex-wrap: wrap;
}
.cptFooter .footArea .addressArea .addressGroup .alignL {
width: 100%;
}
.cptFooter .footArea .addressArea .addressGroup .alignR {
width: 100%;
margin-top: 35px;
}
.cptFooter .footArea .addressArea .menuGroup {
flex-wrap: wrap;
gap: 5px 24px;
}
}
@media screen and (max-width: 767px) {
.cptFooter .footArea .siteArea {
border: 0;
}
.cptFooter .footArea .siteArea .siteGroup {
padding: 0;
border-top: 1px solid var(--Bg-Line-line-100);
flex-wrap: wrap;
}
.cptFooter .footArea .siteArea .siteGroup .item {
width: 100%;
height: auto;
border: 0;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptFooter .footArea .siteArea .siteGroup .item:first-child {
border-left: 0;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth1Btn {
height: 49px;
padding: 0 16px;
font-size: 0.875rem;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth1Btn.on + .depth2Group {
max-height: 260px;
padding: 16px 0;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group {
position: static;
transition: all 0.3s;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item {
padding: 7px 16px 7px 27px;
}
.cptFooter .footArea .siteArea .siteGroup .item .depth2Group .depth2Item .depth2Link {
height: 23px;
font-size: 0.9375rem;
}
.cptFooter .footArea .addressArea {
padding: 32px 0 40px;
}
.cptFooter .footArea .addressArea .logoGroup .logoBox {
width: 100px;
height: 20px;
}
.cptFooter .footArea .addressArea .logoGroup .logoBox svg {
width: 100%;
}
.cptFooter .footArea .addressArea .addressGroup {
padding: 24px 20px;
}
.cptFooter .footArea .addressArea .addressGroup .alignL {
width: 100%;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox {
width: 100%;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
}
.cptFooter .footArea .addressArea .addressGroup .alignL .adressBox .adressLine span {
margin-right: 0;
font-size: 0.75rem;
}
.cptFooter .footArea .addressArea .addressGroup .alignR {
width: 100%;
margin-top: 28px;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .other a {
font-size: 0.75rem;
background: url(../../../images/kboat/common/ic_ft_arr.svg) right 4px center/12px no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns {
margin-top: 8px;
margin-left: 0;
gap: 12px;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li {
width: 30px;
height: 30px;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.inst a {
background: url(../../../images/kboat/common/img_sns_instagram.svg) center/30px no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.utube a {
background: url(../../../images/kboat/common/img_sns_youtube.svg) center/30px no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.sx a {
background: url(../../../images/kboat/common/img_sns_sx.svg) center/30px no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.fb a {
background: url(../../../images/kboat/common/img_sns_facebook.svg) center/30px no-repeat;
}
.cptFooter .footArea .addressArea .addressGroup .alignR .sns li.blog a {
background: url(../../../images/kboat/common/img_sns_blog.svg) center/30px no-repeat;
}
.cptFooter .footArea .addressArea .menuGroup {
flex-wrap: wrap;
gap: 10px 12px;
}
.cptFooter .footArea .addressArea .menuGroup .item {
height: 14px;
}
.cptFooter .footArea .addressArea .menuGroup .item a {
font-size: 0.75rem;
}
.cptFooter .footArea .addressArea .copyGroup .copy {
font-size: 0.75rem;
}
}
.cptQuickMenu {
width: 110px;
border-radius: 14px;
background: #fff;
position: fixed;
left: 50%;
margin-left: 780px;
top: 200px;
box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.07);
overflow: hidden;
z-index: 95;
transition: opacity 0.3s;
}
.cptQuickMenu .quickHead {
width: 100%;
padding: 12px 3px;
text-align: center;
background: var(--Primary);
}
.cptQuickMenu .quickHead .headTit {
margin-bottom: 6px;
font-size: 0.875rem;
color: #fff;
font-weight: 600;
}
.cptQuickMenu .quickHead .point {
font-size: 1rem;
font-weight: 600;
color: #a7ffef;
}
.cptQuickMenu .quickHead .point i {
font-style: normal;
}
.cptQuickMenu .quickHead .linkLogin {
padding-left: 4px;
font-size: 1rem;
font-weight: 600;
color: #a7ffef;
display: inline-block;
}
.cptQuickMenu .quickHead .linkLogin::after {
display: inline-block;
vertical-align: middle;
content: "";
width: 16px;
height: 16px;
background: url(../../../images/kboat/common/ic_quick_arr.svg) center no-repeat;
}
.cptQuickMenu .quickBtns {
width: 100%;
padding: 12px 12px 20px;
text-align: center;
}
.cptQuickMenu .quickBtns .quickItem {
margin-bottom: 16px;
}
.cptQuickMenu .quickBtns .quickItem:last-child {
margin-bottom: 0;
}
.cptQuickMenu .quickBtns .quickItem .quickIco {
padding-top: 50px;
background: center 10px no-repeat;
font-size: 1rem;
color: var(--Gray-800);
display: inline-block;
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico01 {
background-image: url(../../../images/kboat/common/ic_quick_cal.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico02 {
background-image: url(../../../images/kboat/common/ic_quick_movie.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico03 {
background-image: url(../../../images/kboat/common/ic_quick_report.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico04 {
background-image: url(../../../images/kboat/common/ic_quick_coins.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico05 {
background-image: url(../../../images/kboat/common/ic_quick_board.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico06 {
background-image: url(../../../images/kboat/common/ic_quick_info.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico07 {
background-image: url(../../../images/kboat/common/ic_quick_other01.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico08 {
background-image: url(../../../images/kboat/common/ic_quick_other02.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico09 {
background-image: url(../../../images/kboat/common/ic_quick_other03.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico10 {
background-image: url(../../../images/kboat/common/ic_quick_other04.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico11 {
background-image: url(../../../images/kboat/common/ic_quick_other05.svg);
}
.cptQuickMenu .quickBtns .quickItem .quickIco.ico12 {
background-image: url(../../../images/kboat/common/ic_quick_other06.svg);
}
.cptQuickMenu .btnTop {
width: 100%;
height: 38px;
text-align: center;
font-size: 1.0625rem;
color: #fff;
font-weight: 700;
background: var(--Point-Blue);
}
.cptQuickMenu.inMain {
display: none;
}
@media screen and (max-width: 1790px) {
.cptQuickMenu:not(.inMain) {
opacity: 0.5;
}
}
@media screen and (max-width: 1575px) {
.cptQuickMenu:not(.inMain) {
display: none;
}
}
/* ------------------------------- 서브 탑 ------------------------------- */
.cptSubTop {
width: 100%;
background: #EDF5F2;
}
.cptSubTop.bg01 {
background: linear-gradient(92deg, #F2FCFF 1.1%, #DFF3FF 62.91%);
}
.cptSubTop.bg02 {
background: linear-gradient(92deg, #F5FBED 1.1%, #E3F5F9 62.91%);
}
.cptSubTop.bg03 {
background: linear-gradient(92deg, #FBF2F6 1.1%, #E9F3F7 61.05%);
}
.cptSubTop.bg04 {
background: linear-gradient(92deg, #FFFEE6 1.1%, #DFEFFF 62.91%);
}
.cptSubTop.bg05 {
background: linear-gradient(92deg, #F3F1FB 1.1%, #DDF3F2 62.91%);
}
.cptSubTop.bg06 {
background: linear-gradient(92deg, #EBF7F5 1.1%, #E7F3F9 62.91%);
}
.cptSubTop.bg07 {
background: linear-gradient(92deg, #D9EDFF 1.1%, #F0F9E0 62.91%);
}
.cptSubTop .subTopArea {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 24px 20px 50px;
position: relative;
}
.cptSubTop .subTopArea .location {
width: 100%;
display: flex;
justify-content: flex-end;
}
.cptSubTop .subTopArea .location .item {
height: 18px;
padding-left: 28px;
position: relative;
}
.cptSubTop .subTopArea .location .item:first-child {
padding-left: 0;
background: none;
}
.cptSubTop .subTopArea .location .item:first-child a {
width: 18px !important;
height: 18px !important;
font-size: 0 !important;
background: url(../../../images/kboat/common/ic_loca_home.svg) center no-repeat;
border-bottom: none;
}
.cptSubTop .subTopArea .location .item:first-child::before {
display: none;
}
.cptSubTop .subTopArea .location .item::before {
content: "";
width: 16px;
height: 16px;
display: block;
background: url(../../../images/kboat/common/ic_loca_arr.svg) center no-repeat;
position: absolute;
left: 6px;
top: 3px;
}
.cptSubTop .subTopArea .location .item a {
padding-bottom: 2px;
border-bottom: 1px solid var(--Gray-200);
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 400;
line-height: normal;
display: inline-block;
vertical-align: middle;
}
.cptSubTop .subTopArea .subTitle {
width: 100%;
margin-top: 26px;
}
.cptSubTop .subTopArea .subTitle h1 {
padding: 0 2px;
color: var(--Gray-900);
font-size: 1rem;
font-weight: 700;
display: inline-block;
position: relative;
z-index: 1;
}
.cptSubTop .subTopArea .subTitle h1::after {
display: block;
content: "";
width: calc(100% + 4px);
height: 12px;
background: var(--Point2);
position: absolute;
left: -2px;
bottom: 0;
z-index: -1;
}
.cptSubTop .subTopArea .subText {
width: 100%;
margin-top: 7px;
}
.cptSubTop .subTopArea .subText p {
color: var(--Gray-900);
font-size: 3.125rem;
font-weight: 200;
line-height: 1.3;
}
.cptSubTop .subTopArea .subText p b {
font-weight: 600;
}
.cptSubTop .subTopArea .subText p .mView {
display: none;
}
@media screen and (max-width: 767px) {
.cptSubTop .subTopArea .subText p .pcView {
display: none;
}
.cptSubTop .subTopArea .subText p .mView {
display: block;
}
}
.cptSubTop .subTopArea .addFunc {
display: flex;
gap: 4px;
position: absolute;
right: 20px;
top: 68px;
}
.cptSubTop .subTopArea .addFunc .item {
width: 40px;
height: 40px;
}
.cptSubTop .subTopArea .addFunc .item button {
width: 100%;
height: 100%;
font-size: 0;
}
.cptSubTop .subTopArea .addFunc .item button.btnPrint {
background: url(../../../images/kboat/common/ic_loca_print.svg) center no-repeat;
}
.cptSubTop .subTopArea .addFunc .item button.btnShare {
background: url(../../../images/kboat/common/ic_loca_share.svg) center no-repeat;
}
@media screen and (max-width: 767px) {
.cptSubTop .subTopArea {
padding: 32px 16px 24px;
}
.cptSubTop .subTopArea .location {
justify-content: flex-start;
}
.cptSubTop .subTopArea .location .item {
height: 16px;
display: none;
}
.cptSubTop .subTopArea .location .item a {
font-size: 0.875rem;
}
.cptSubTop .subTopArea .location .item::before {
top: 0;
}
.cptSubTop .subTopArea .location .item:nth-child(2) {
display: block;
width: 42px;
font-size: 0;
background: url(../../../images/kboat/common/ic_loca_dot.svg) 28px center no-repeat;
}
.cptSubTop .subTopArea .location .item:nth-child(2) a {
width: 16px;
height: 16px;
display: none;
}
.cptSubTop .subTopArea .location .item:first-child {
width: 16px;
height: 16px;
display: block;
}
.cptSubTop .subTopArea .location .item:first-child a {
width: 16px;
height: 16px;
display: block;
}
.cptSubTop .subTopArea .location .item:last-child {
width: max-content;
background: none;
display: block;
}
.cptSubTop .subTopArea .location .item:last-child a {
width: max-content;
height: auto;
font-size: 0.875rem;
display: block;
}
.cptSubTop .subTopArea .subTitle {
margin-top: 32px;
}
.cptSubTop .subTopArea .subTitle h1 {
font-size: 0.9375rem;
font-weight: 600;
}
.cptSubTop .subTopArea .subText {
margin-top: 12px;
}
.cptSubTop .subTopArea .subText p {
font-size: 1.75rem;
font-weight: 300;
word-break: keep-all;
}
.cptSubTop .subTopArea .addFunc {
right: 16px;
top: 29px;
}
.cptSubTop .subTopArea .addFunc .item {
width: 20px;
height: 22px;
}
.cptSubTop .subTopArea .addFunc .item.print {
display: none;
}
}
/* ------------------------------- 서브 바텀 (담당자) ------------------------------- */
.cptSubBtm {
width: 100%;
margin-bottom: 40px;
background: #fff;
}
.cptSubBtm .subBtmArea {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.cptSubBtm .subBtmArea .subBtmBox {
width: 100%;
padding: 20px 32px;
border-top: 2px solid var(--Gray-600);
display: flex;
justify-content: space-between;
}
.cptSubBtm .subBtmArea .subBtmBox .manager {
width: max-content;
display: flex;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dt {
width: max-content;
min-width: max-content;
height: 28px;
padding-left: 44px;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: 1.6;
background: url(../../../images/kboat/common/ic_cont_manager.svg) left center no-repeat;
display: block;
align-content: center;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dd {
width: max-content;
height: 28px;
padding-left: 32px;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
position: relative;
align-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dd::before {
content: "";
width: 1px;
height: 11px;
background: var(--Gray-300);
display: block;
position: absolute;
left: 16px;
top: 8px;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dd b {
margin-left: 16px;
font-weight: 600;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList {
width: max-content;
display: flex;
gap: 48px;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList li {
width: max-content;
height: 28px;
padding-left: 28px;
align-content: center;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList li.phone {
background: url(../../../images/kboat/common/ic_cont_phone.svg) left center no-repeat;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList li.email {
background: url(../../../images/kboat/common/ic_cont_email.svg) left center no-repeat;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList li a {
height: 100%;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.cptSubBtm {
width: 100%;
margin-bottom: 0;
}
.cptSubBtm .subBtmArea {
width: 100%;
padding: 0;
}
.cptSubBtm .subBtmArea .subBtmBox {
padding: 16px 16px 24px;
flex-wrap: wrap;
}
.cptSubBtm .subBtmArea .subBtmBox .manager {
width: 100%;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dt {
font-size: 0.9375rem;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dd {
font-size: 0.9375rem;
}
.cptSubBtm .subBtmArea .subBtmBox .manager dd b {
margin-left: 4px;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList {
width: 100%;
margin-top: 16px;
gap: 36px;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList li {
height: 24px;
padding-left: 32px;
}
.cptSubBtm .subBtmArea .subBtmBox .btmList li a {
font-size: 0.9375rem;
}
}
.cptLogin {
margin-top: 40px;
}
.cptLogin .loginArea {
width: 100%;
max-width: 680px;
margin: 0 auto;
padding: 60px 40px;
background: #fff;
border-radius: 16px;
}
.cptLogin .loginArea .loginTitle {
color: var(--Primary, #078B7B);
font-size: 1.125rem;
font-weight: 600;
line-height: 140%; /* 25.2px */
}
.cptLogin .loginArea .loginTitle h2 {
font-size: 2.25rem;
line-height: 140%; /* 25.2px */
}
.cptLogin .loginArea .frmGroup {
margin-top: 40px;
}
.cptLogin .loginArea .frmGroup + .frmGroup {
margin-top: 20px;
}
.cptLogin .loginArea .frmGroup .frmBox.inpId .iptText, .cptLogin .loginArea .frmGroup .frmBox.inpPw .iptText {
padding-left: 76px;
height: 56px;
}
.cptLogin .loginArea .frmGroup .frmBox.inpId .btnReset, .cptLogin .loginArea .frmGroup .frmBox.inpPw .btnReset {
top: 16px;
}
.cptLogin .loginArea .frmGroup .frmBox.inpId:after, .cptLogin .loginArea .frmGroup .frmBox.inpPw:after {
content: "";
position: absolute;
top: 12px;
left: 20px;
width: 24px;
height: 24px;
}
.cptLogin .loginArea .frmGroup .frmBox.inpId:after {
background: url("../../../images/kboat/common/ic_24_person.svg") no-repeat 50%;
background-size: 20px;
}
.cptLogin .loginArea .frmGroup .frmBox.inpPw:after {
background: url("../../../images/kboat/common/ic_24_lock.svg") no-repeat;
background-size: 100%;
}
.cptLogin .loginArea .comBtnGroup {
margin-top: 32px;
}
.cptLogin .loginArea .comBtnGroup .btnBox {
width: 100%;
}
.cptLogin .loginArea .comBtnGroup .btnBox .btn {
width: 100%;
}
.cptLogin .loginArea .comBtnGroup + .linkGroup {
margin-top: 32px;
}
.cptLogin .loginArea .linkGroup {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.cptLogin .loginArea .linkGroup.center {
gap: 64px;
}
.cptLogin .loginArea .linkGroup.center a {
flex: 1;
position: relative;
text-align: right;
}
.cptLogin .loginArea .linkGroup.center a + a {
text-align: left;
}
.cptLogin .loginArea .linkGroup.center a + a:after {
content: "";
position: absolute;
top: 8px;
left: -32px;
width: 1px;
height: 10px;
background: var(--Gray-200, #CED1D6);
}
.cptLogin .loginArea .linkGroup > span {
color: var(--font-600, #58595F);
font-size: 1rem;
font-weight: 300;
line-height: 160%; /* 25.6px */
}
.cptLogin .loginArea .linkGroup a {
font-size: 1rem;
color: var(--Gray-800, #2C2C2C);
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptLogin .loginArea .linkGroup a span {
border-bottom: 1px solid var(--font-600, #58595F);
}
.cptLogin .loginArea .linkGroup a strong {
font-weight: 600;
border-bottom: 1px solid var(--font-600, #58595F);
}
@media screen and (max-width: 767px) {
.cptLogin {
margin-top: 0;
}
.cptLogin .loginArea {
background: none;
padding: 0;
}
.cptLogin .loginArea .loginTitle h2 {
margin-top: 4px;
font-size: 1.75rem;
}
.cptLogin .loginArea .frmGroup + .frmGroup {
margin-top: 24px;
}
.cptLogin .loginArea .comBtnGroup {
margin-top: 40px;
}
.cptLogin .loginArea .comBtnGroup + .linkGroup {
margin-top: 40px;
}
.cptLogin .loginArea .comJoinBtmText {
margin-top: 40px;
margin-left: -16px;
width: calc(100% + 32px);
padding-left: 16px;
padding-right: 16px;
}
}
/* --------------------------- 게시판 리스트 --------------------------- */
.cptBoardList {
width: 100%;
margin-top: 60px;
}
.cptBoardList:first-child {
margin-top: 0;
}
.cptBoardList .boardListArea {
width: 100%;
}
.cptBoardList .boardListArea .listTable {
width: 100%;
margin-top: 20px;
}
.cptBoardList .boardListArea .listTable:first-child {
margin-top: 0;
}
.cptBoardList .boardListArea .listTable table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
border-top: 1px solid var(--Gray-900);
}
.cptBoardList .boardListArea .listTable table tr.noti td {
font-weight: 500;
background: var(--Bg-Line-bg-100);
}
.cptBoardList .boardListArea .listTable table tr.noti td.num .top {
width: 100%;
height: 26px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--Primary);
border-radius: 20px;
border: 1px solid var(--Primary);
background: #FFF;
display: block;
align-content: center;
}
.cptBoardList .boardListArea .listTable table tr.noti td.bdTitle .title a {
font-weight: 500;
}
.cptBoardList .boardListArea .listTable table tr td {
height: 62px;
padding: 18px 10px;
border-bottom: 1px solid var(--Bg-Line-line-100);
text-align: center;
vertical-align: middle;
color: var(--Gray-600);
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: 1.6;
position: relative;
}
.cptBoardList .boardListArea .listTable table tr td:first-child {
padding-left: 30px;
}
.cptBoardList .boardListArea .listTable table tr td:last-child {
padding-right: 30px;
}
.cptBoardList .boardListArea .listTable table tr td.num {
font-weight: 400;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title {
width: 100%;
display: flex;
align-items: center;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title a,
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .line1 {
width: max-content;
font-weight: 400;
color: var(--Gray-900);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons {
height: 26px;
padding: 0 10px;
display: flex;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .read {
margin-right: 12px;
color: var(--Primary);
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .read:last-child {
margin-right: 0;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .icon {
width: 16px;
height: 26px;
margin-right: 12px;
font-size: 0;
border-radius: 8px;
display: flex;
position: relative;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .icon:last-child {
margin-right: 0;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .icon.new {
min-width: 14px;
width: 14px;
background: url(../../../images/kboat/common/ic_20_new.svg) center no-repeat;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .icon.file {
background: url(../../../images/kboat/common/ic_20_file.svg) center no-repeat;
}
.cptBoardList .boardListArea .listTable table tr td.left {
text-align: left;
}
.cptBoardList .boardListArea .listTable table tr td .recommend {
min-width: 63px;
padding-left: 24px;
color: var(--Primary);
font-size: 1rem;
font-weight: 600;
line-height: 1.6;
text-align: left;
display: inline-block;
background: url(../../../images/kboat/common/ic_20_recommend.svg) left center no-repeat;
}
.cptBoardList .boardListArea .listTable table.thTable {
border-top: 1px solid var(--font-900, #111);
}
.cptBoardList .boardListArea .listTable table.thTable thead tr th {
height: 59px;
border-bottom: 1px solid var(--font-900, #111);
font-size: 1rem;
color: var(--font-900, #111);
text-align: center;
font-weight: 500;
line-height: normal;
}
.cptBoardList .boardListArea .listTable table.thTable thead tr th:first-child {
padding-left: 20px;
}
.cptBoardList .boardListArea .listTable table.thTable thead tr th:last-child {
padding-right: 20px;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.sort {
font-weight: 600;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.processing span {
display: inline-block;
align-content: center;
padding-left: 16px;
padding-right: 16px;
height: 26px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--Primary);
line-height: 26px;
border-radius: 20px;
border: 1px solid var(--Primary);
background: #FFF;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.processing.progress span {
color: var(--Point-Red);
border-color: var(--Point-Red);
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.processing.complete span {
color: var(--Gray-500);
border-color: var(--Gray-500);
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.processing.closed span {
color: var(--Gray-500);
border-color: transparent;
background: var(--Bg-Line-bg-200);
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.func span {
font-size: 0.9375rem;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.func .btn.sm {
min-width: 50px;
height: 32px;
padding: 0 10px;
line-height: 30px;
}
@media screen and (max-width: 767px) {
.cptBoardList .boardListArea .listTable table.thTable thead {
display: none;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr {
flex-direction: column;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.sort {
order: 2;
margin-top: 8px;
font-size: 0.9375rem;
height: 26px;
line-height: 26px;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.bdTitle {
order: 3;
margin-top: -26px;
text-indent: 38px;
height: auto;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.bdTitle a,
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.bdTitle .line1 {
height: auto;
overflow: visible;
white-space: normal;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.writing {
order: 4;
margin-top: 8px;
position: relative;
padding-left: 44px;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.writing:after {
content: "작성일:";
position: absolute;
top: 0;
left: 0;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.answer {
order: 5;
position: relative;
padding-left: 44px;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.answer:after {
content: "답변일:";
position: absolute;
top: 0;
left: 0;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.processing {
order: 1;
}
.cptBoardList .boardListArea .listTable table.thTable tbody tr td.processing span {
height: 24px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.75rem;
line-height: 24px;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr {
flex-direction: row;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="1"] {
order: 1;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="2"] {
order: 2;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="3"] {
order: 3;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="4"] {
order: 4;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="5"] {
order: 5;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="6"] {
order: 6;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="7"] {
order: 7;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="8"] {
order: 8;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="9"] {
order: 9;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td[data-order="10"] {
order: 10;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td:not(.sort) + .bdTitle {
margin-top: 0;
margin-bottom: 4px;
text-indent: 0;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.func {
width: 100%;
height: auto;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.func span {
margin-top: 4px;
font-size: 0.875rem;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.func .btn.sm {
margin-top: 16px;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.processing {
margin-bottom: 8px;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.bdInfo:not(.first) {
position: relative;
margin-left: 12px;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.bdInfo:not(.first)::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 1px;
height: calc(100% - 12px);
max-height: 40px;
background-color: var(--Gray-300);
transform: translateY(-50%);
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.writing, .cptBoardList .boardListArea .listTable table.thTable.mInline tr td.answer, .cptBoardList .boardListArea .listTable table.thTable.mInline tr td.processing, .cptBoardList .boardListArea .listTable table.thTable.mInline tr td .btn.sm {
width: 100%;
}
.cptBoardList .boardListArea .listTable table.thTable.mInline tr td.pcView {
display: none;
}
}
@media screen and (max-width: 767px) {
.cptBoardList .boardListArea .listTable {
width: calc(100% + 32px);
margin-top: 0;
margin-left: -16px;
display: flex;
}
.cptBoardList .boardListArea .listTable tbody {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.cptBoardList .boardListArea .listTable colgroup {
display: none;
}
.cptBoardList .boardListArea .listTable table {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.cptBoardList .boardListArea .listTable table tr {
width: 100%;
padding: 20px 16px;
border-bottom: 1px solid var(--Bg-Line-line-100);
display: flex;
flex-wrap: wrap;
column-gap: 12px;
position: relative;
}
.cptBoardList .boardListArea .listTable table tr.noti {
background: var(--Bg-Line-bg-100);
}
.cptBoardList .boardListArea .listTable table tr.noti td {
font-weight: 500;
background: var(--Bg-Line-bg-100);
}
.cptBoardList .boardListArea .listTable table tr.noti td:first-child {
padding-left: 0;
}
.cptBoardList .boardListArea .listTable table tr.noti td:last-child {
padding-left: 0;
}
.cptBoardList .boardListArea .listTable table tr.noti td.num {
display: flex;
}
.cptBoardList .boardListArea .listTable table tr.noti td.num .top {
width: 100%;
height: 24px;
font-size: 0.9375rem;
font-weight: 500;
border-radius: 0;
border: 0;
background: none;
display: block;
align-content: center;
}
.cptBoardList .boardListArea .listTable table tr.noti td.bdTitle .title a {
font-weight: 500;
}
.cptBoardList .boardListArea .listTable table tr td {
height: 22px;
padding: 0;
font-size: 0.875rem;
color: var(--Gray-500);
font-weight: 300;
border-bottom: 0;
display: flex;
}
.cptBoardList .boardListArea .listTable table tr td:last-child {
padding-right: 0;
}
.cptBoardList .boardListArea .listTable table tr td.num {
display: none;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle {
width: 100%;
height: 26px;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title {
width: 100%;
display: flex;
align-items: center;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title a,
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .line1 {
height: 26px;
padding: 0;
font-size: 1rem;
font-weight: 600;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons {
height: 26px;
padding: 0 4px;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .read {
color: var(--font-900);
margin-right: 9px;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .read:last-child {
margin-right: 0;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .icon {
height: 26px;
margin-right: 9px;
font-size: 0;
border-radius: 8px;
display: flex;
position: relative;
}
.cptBoardList .boardListArea .listTable table tr td.bdTitle .title .icons .icon:last-child {
margin-right: 0;
}
.cptBoardList .boardListArea .listTable table tr td.views::before {
content: "조회수:";
margin-right: 3px;
}
.cptBoardList .boardListArea .listTable table tr td.recom {
order: 10;
}
.cptBoardList .boardListArea .listTable table tr td .recommend {
min-width: 55px;
font-size: 0.875rem;
font-weight: 700;
}
}
@media screen and (max-width: 767px) {
.cptBoardList .boardListArea .comTitH2 {
display: none;
}
}
@media screen and (max-width: 767px) {
.cptSubTop + .layoutContArea .cptBoardList:first-child .listTable:first-child {
width: 100%;
margin-left: 0;
}
}
.cptAlbumList {
width: 100%;
margin-top: 60px;
}
.cptAlbumList:first-child {
margin-top: 0;
}
.cptAlbumList .albumListArea {
width: 100%;
}
.cptAlbumList .albumListArea .listBoard {
width: 100%;
margin-top: 60px;
}
.cptAlbumList .albumListArea .listBoard:first-child {
margin-top: 0;
}
.cptAlbumList .albumListArea .listBoard .listGroup {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem {
width: calc(25% - 30px);
display: flex;
flex-wrap: wrap;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .imgBox {
width: 100%;
padding-top: 100%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .imgBox img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox {
width: 100%;
margin-top: 8px;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .title {
width: 100%;
color: var(--Gray-800);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .progress {
width: 100%;
height: 24px;
margin-top: 4px;
display: flex;
gap: 4px;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .progress .mark {
width: max-content;
height: 24px;
padding: 0 10px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 20px;
line-height: 22px;
display: block;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .progress .mark.ing {
color: #fff;
border: 1px solid var(--Point-Primary2);
background: var(--Point-Primary2);
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .progress .mark.end {
color: var(--Gray-500);
border: 1px solid var(--Gray-500);
background: #fff;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .progress .mark.line {
color: var(--Primary);
border: 1px solid var(--Primary);
background: #fff;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .date {
width: 100%;
margin-top: 8px;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.6;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .date + .date {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.cptAlbumList {
margin-top: 40px;
}
.cptAlbumList:first-child {
margin-top: 0;
}
.cptAlbumList .albumListArea .listBoard {
margin-top: 40px;
}
.cptAlbumList .albumListArea .listBoard:first-child {
margin-top: 0;
}
.cptAlbumList .albumListArea .listBoard .listGroup {
gap: 32px 24px;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem {
width: calc(50% - 12px);
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox {
width: 100%;
margin-top: 8px;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .title {
font-size: 0.9375rem;
font-weight: 600;
height: 48px;
white-space: wrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .progress {
margin-top: 8px;
}
.cptAlbumList .albumListArea .listBoard .listGroup .listItem .infoBox .date {
color: var(--Gray-700);
font-size: 0.8125rem;
}
}
/* ------------------------ 앨범/갤러리 체인지 ------------------------ */
.cptGalleryList {
width: 100%;
margin-top: 60px;
}
.cptGalleryList:first-child {
margin-top: 0;
}
.cptGalleryList .galleryListArea {
width: 100%;
}
.cptGalleryList .galleryListArea .listBoard {
width: 100%;
margin-top: 20px;
}
.cptGalleryList .galleryListArea .listBoard:first-child {
margin-top: 0;
}
.cptGalleryList .galleryListArea .listBoard .listGroup {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem {
width: calc(25% - 30px);
display: flex;
flex-wrap: wrap;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .itemLink {
width: 100%;
display: block;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .imgBox {
width: 100%;
padding-top: 74.827%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .imgBox img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .imgBox .bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox {
width: 100%;
margin-top: 8px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .title {
width: 100%;
color: var(--Gray-800);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .progress {
width: 100%;
height: 24px;
margin-top: 4px;
display: flex;
gap: 4px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .progress .mark {
width: max-content;
height: 24px;
padding: 0 10px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 20px;
line-height: 22px;
display: block;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .progress .mark.ing {
color: #fff;
border: 1px solid var(--Point-Primary2);
background: var(--Point-Primary2);
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .progress .mark.end {
color: var(--Gray-500);
border: 1px solid var(--Gray-500);
background: #fff;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .progress .mark.line {
color: var(--Primary);
border: 1px solid var(--Primary);
background: #fff;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .context {
display: none;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .date {
width: 100%;
margin-top: 8px;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.6;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .date + .date {
margin-top: 0;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info {
display: flex;
flex-wrap: wrap;
column-gap: 24px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info > li {
width: auto;
margin-top: 0;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.6;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info > li.cate {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 12px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info > li.cate > span {
height: 18px;
padding-left: 18px;
position: relative;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info > li.cate > span:first-child {
padding-left: 0;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info > li.cate > span:first-child::before {
display: none;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox ul.info > li.cate > span::before {
content: "";
position: absolute;
top: 3px;
left: 1px;
width: 16px;
height: 16px;
display: block;
background: url(../../../images/kboat/common/ic_loca_arr.svg) center no-repeat;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup {
gap: 0;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem {
width: 100%;
padding: 40px 0;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem:first-child {
padding-top: 0;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .itemLink {
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
justify-content: space-between;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .imgBox {
width: 290px;
margin-left: 40px;
padding-top: 217px;
flex-shrink: 0;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox {
margin-top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox .title {
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox .context {
width: 100%;
margin-top: 8px;
color: var(--Gray-600);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
display: block;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox .date {
margin-top: 16px;
}
.cptGalleryList .galleryListArea .listBoard.col3_1 .listGroup .listItem {
width: calc(33.3333% - 26.6667px);
}
.cptGalleryList .galleryListArea .listBoard.col3_1 .listGroup .listItem:last-child {
width: calc(33.3333% - 26.6666px);
}
.cptGalleryList .galleryListArea .listBoard.col3_1 .listGroup .listItem .imgBox {
padding-top: 56.25%;
}
.cptGalleryList .galleryListArea .listChange {
width: 100%;
margin-top: 8px;
display: flex;
justify-content: flex-end;
}
.cptGalleryList .galleryListArea .listChange button {
width: 32px;
height: 32px;
margin-left: 8px;
font-size: 0;
}
.cptGalleryList .galleryListArea .listChange button:first-child {
margin-left: 0;
}
.cptGalleryList .galleryListArea .listChange button.album {
background: url(../../../images/kboat/common/ic_32_album_on.svg) center no-repeat;
}
.cptGalleryList .galleryListArea .listChange button.gallery {
background: url(../../../images/kboat/common/ic_32_gallery_off.svg) center no-repeat;
}
.cptGalleryList .galleryListArea .listChange.gallery button.album {
background: url(../../../images/kboat/common/ic_32_album_off.svg) center no-repeat;
}
.cptGalleryList .galleryListArea .listChange.gallery button.gallery {
background: url(../../../images/kboat/common/ic_32_gallery_on.svg) center no-repeat;
}
@media screen and (max-width: 767px) {
.cptGalleryList {
margin-top: 40px;
}
.cptGalleryList:first-child {
margin-top: 0;
}
.cptGalleryList .galleryListArea .listBoard {
margin-top: 20px;
}
.cptGalleryList .galleryListArea .listBoard:first-child {
margin-top: 0;
}
.cptGalleryList .galleryListArea .listBoard .listGroup {
gap: 32px 24px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem {
width: calc(50% - 12px);
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox {
width: 100%;
margin-top: 8px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .title {
font-size: 0.9375rem;
font-weight: 600;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .progress {
margin-top: 8px;
}
.cptGalleryList .galleryListArea .listBoard .listGroup .listItem .infoBox .date {
color: var(--Gray-700);
font-size: 0.8125rem;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem {
padding: 32px 0;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem:first-child {
padding-top: 0;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .imgBox {
width: 106px;
margin-left: 16px;
padding-top: 80px;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox {
width: calc(100% - 122px);
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox .context {
margin-top: 8px;
font-size: 0.9375rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptGalleryList .galleryListArea .listBoard.gallery .listGroup .listItem .infoBox .date {
margin-top: 8px;
}
.cptGalleryList .galleryListArea .listBoard.col3_1 .listGroup .listItem {
width: 100% !important;
}
.cptGalleryList .galleryListArea .listChange {
width: 100%;
margin-top: -35px;
display: flex;
justify-content: flex-end;
}
}
/* --------------------------- 게시판 상세 --------------------------- */
.cptBoardView {
width: 100%;
margin-top: 60px;
/*
.comBtnGroup {
.alignR {
justify-content: center;
}
.btnBox {
width: auto;
.btn {
width: max-content;
}
}
}
*/
}
.cptBoardView:first-child {
margin-top: 0;
}
.cptBoardView .boardViewArea {
width: 100%;
}
.cptBoardView .boardViewArea .viewTop {
width: 100%;
padding: 0 0 24px;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptBoardView .boardViewArea .viewTop.noline {
border-bottom: 0;
padding-bottom: 20px;
}
.cptBoardView .boardViewArea .viewTop .noti {
width: 100%;
margin-bottom: 12px;
font-style: normal;
display: flex;
gap: 8px;
}
.cptBoardView .boardViewArea .viewTop .noti .mark {
width: max-content;
height: 24px;
padding: 0 16px;
font-size: 0.75rem;
color: var(--Primary);
font-weight: 600;
line-height: 22px;
border-radius: 20px;
border: 1px solid var(--Primary);
display: block;
}
.cptBoardView .boardViewArea .viewTop .noti .mark.ing {
color: #fff;
border: 1px solid var(--Point-Primary2);
background: var(--Point-Primary2);
}
.cptBoardView .boardViewArea .viewTop .noti .mark.end {
color: var(--Gray-500);
border: 1px solid var(--Gray-500);
background: #fff;
}
.cptBoardView .boardViewArea .viewTop .viewTitle {
width: 100%;
color: var(--Gray-900);
font-size: 1.875rem;
font-weight: 600;
line-height: 1.4;
}
.cptBoardView .boardViewArea .viewTop .info {
width: 100%;
margin-top: 16px;
display: flex;
gap: 24px;
}
.cptBoardView .boardViewArea .viewTop .info .item {
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
}
.cptBoardView .boardViewArea .viewTop .info .item .recomNum {
color: var(--Primary);
font-weight: 600;
}
.cptBoardView .boardViewArea .viewTop .info .item.processing span {
display: inline-block;
align-content: center;
padding-left: 16px;
padding-right: 16px;
height: 26px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--Primary);
line-height: 26px;
border-radius: 20px;
border: 1px solid var(--Primary);
background: #FFF;
}
.cptBoardView .boardViewArea .viewTop .info .item.processing.progress span {
color: var(--Point-Red);
border-color: var(--Point-Red);
}
.cptBoardView .boardViewArea .viewTop .info .item.processing.complete span {
color: var(--Gray-500);
border-color: var(--Gray-500);
}
.cptBoardView .boardViewArea .viewBody {
width: 100%;
height: auto;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptBoardView .boardViewArea .viewBody .viewContArea {
width: 100%;
padding: 40px;
}
.cptBoardView .boardViewArea .viewBody .viewContArea img {
max-width: 100%;
}
.cptBoardView .boardViewArea .viewBtnGroup {
padding-bottom: 40px;
}
.cptBoardView .boardViewArea .viewBtnGroup .recom::before {
content: "";
width: 20px;
height: 20px;
margin-right: 5px;
margin-top: -1px;
background: url(../../../images/kboat/common/ic_20_recom.svg) center no-repeat;
vertical-align: middle;
display: inline-block;
}
.cptBoardView .boardViewArea .viewBtnGroup .report::before {
content: "";
width: 20px;
height: 20px;
margin-right: 5px;
margin-top: -1px;
background: url(../../../images/kboat/common/ic_20_report.svg) center no-repeat;
vertical-align: middle;
display: inline-block;
}
.cptBoardView .boardViewArea.customer .viewBody .viewContArea {
padding: 40px 32px;
}
.cptBoardView .boardViewArea.customer .comBtnGroup + .answerCont {
margin-top: 40px;
}
.cptBoardView .boardViewArea.customer .answerCont .answerTop dl {
display: flex;
align-items: center;
gap: 20px;
color: var(--font-600, #58595F);
font-size: 1.125rem;
font-weight: 600;
line-height: 160%;
}
.cptBoardView .boardViewArea.customer .answerCont .answerTop dl dd {
font-size: 0.9375rem;
font-weight: 400;
}
.cptBoardView .boardViewArea.customer .answerCont .answerBody {
margin-top: 12px;
background: var(--bg-line-bg-100, #F9FAFC);
padding: 32px;
color: var(--font-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
@media screen and (max-width: 767px) {
.cptBoardView .boardViewArea.customer .viewBody .viewContArea {
padding-left: 16px;
padding-right: 16px;
}
.cptBoardView .boardViewArea.customer .viewBody + .comBtnGroup {
margin-top: 0;
padding: 20px 16px 40px;
}
.cptBoardView .boardViewArea.customer .answerCont .answerTop {
padding: 0 16px;
}
.cptBoardView .boardViewArea.customer .answerCont .answerBody {
padding-left: 16px;
padding-right: 16px;
}
}
@media screen and (max-width: 767px) {
.cptBoardView {
width: calc(100% + 32px);
margin-left: -16px;
}
.cptBoardView .boardViewArea .viewTop {
padding: 0 16px 20px;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptBoardView .boardViewArea .viewTop.noline {
border-bottom: 0;
padding-bottom: 16px;
}
.cptBoardView .boardViewArea .viewTop .noti {
margin-bottom: 8px;
}
.cptBoardView .boardViewArea .viewTop .noti .mark {
width: max-content;
padding: 0 10px;
}
.cptBoardView .boardViewArea .viewTop .viewTitle {
font-size: 1.25rem;
font-weight: 700;
}
.cptBoardView .boardViewArea .viewTop .info {
margin-top: 8px;
gap: 4px 12px;
flex-wrap: wrap;
}
.cptBoardView .boardViewArea .viewTop .info .item {
color: var(--Gray-500);
font-size: 0.875rem;
font-weight: 300;
line-height: 1.6;
}
.cptBoardView .boardViewArea .viewBody .viewContArea {
padding: 32px 16px;
}
.cptBoardView .boardViewArea .viewBody .viewContArea table {
max-width: 100% !important;
}
.cptBoardView .boardViewArea .viewBody .comPlayerGrade {
padding: 0 16px;
}
.cptBoardView .boardViewArea .viewBtnGroup {
padding-bottom: 32px;
}
.cptBoardView .comBtnGroup {
padding: 0 20px;
}
}
.cptBoardView .boardViewArea .viewTop + .comContTable {
margin-top: 0;
}
.cptBoardView .boardViewArea .comContTable + .viewBtnGroup {
padding: 60px 0 0;
}
@media screen and (max-width: 767px) {
.cptBoardView .boardViewArea .comContTable {
padding: 0 16px;
}
.cptBoardView .boardViewArea .comContTable + .viewBtnGroup {
padding: 24px 0 0;
}
}
.modMdPopup .cptBoardView .boardViewArea .viewTop .eyebrow {
margin-bottom: 12px;
color: var(--Primary);
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
display: block;
}
.modMdPopup .cptBoardView .boardViewArea .viewTop .viewTitle {
font-size: 1.125rem;
}
.modMdPopup .cptBoardView .boardViewArea .viewTop .info {
margin-top: 12px;
}
.modMdPopup .cptBoardView .boardViewArea .viewBody .viewContArea {
padding-left: 0;
padding-right: 0;
}
.modMdPopup .cptBoardView .boardViewArea.bdNone .viewTop {
padding-bottom: 0;
border-bottom: none;
}
.modMdPopup .cptBoardView .boardViewArea.bdNone .viewBody {
border-bottom: none;
}
.modMdPopup .cptBoardView .boardViewArea.bdNone .viewBody .viewContArea {
padding-top: 12px;
padding-bottom: 0;
}
@media screen and (max-width: 767px) {
.modMdPopup .cptBoardView {
width: 100%;
margin: 0;
}
.modMdPopup .cptBoardView .boardViewArea .viewTop {
padding-left: 0;
padding-right: 0;
}
}
/* --------------------------- 게시판 쓰기 --------------------------- */
.cptBoardWrite {
width: 100%;
margin-top: 60px;
}
.cptBoardWrite:first-child {
margin-top: 0;
}
.cptBoardWrite .comFormTable .tableTop {
margin-bottom: 12px;
}
.cptBoardWrite .comFormTable .tableTop .normalTxt + .btnBox {
margin-left: 12px;
}
.cptBoardWrite .comFormTable .tableArea {
border-top: 1px solid var(--Bg-Line-line-100);
}
@media screen and (max-width: 767px) {
.cptBoardWrite .comFormTable .tableTop .alignR {
justify-content: flex-end;
}
}
/* --------------------------- 게시판 댓글 --------------------------- */
.cptComment {
width: 100%;
max-width: 1340px;
padding: 0 20px;
margin-top: 180px;
}
@media screen and (max-width: 767px) {
.cptComment {
margin-top: 80px;
}
}
.cptComment .cmtArea {
width: 100%;
}
.cptComment .cmtArea .cmtTop {
width: 100%;
display: flex;
}
.cptComment .cmtArea .cmtTop .cmtTitle {
color: #000;
font-size: 1.875rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.cptComment .cmtArea .cmtTop .number {
margin-left: 12px;
color: rgba(0, 0, 0, 0.5);
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: normal;
align-self: center;
}
.cptComment .cmtArea .cmtBody {
width: 100%;
margin-top: 14px;
border-top: 1px solid #eee;
}
.cptComment .cmtUnit {
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit {
padding-top: 30px;
flex-wrap: wrap;
}
}
.cptComment .cmtUnit .cmtName {
width: 150px;
height: 80px;
color: #000;
text-align: left;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: normal;
display: flex;
align-items: center;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtName {
width: 100%;
height: auto;
font-size: 0.75rem;
}
}
.cptComment .cmtUnit .cmtBox {
width: 100%;
}
.cptComment .cmtUnit .cmtBox .cmtCont {
width: 100%;
min-height: 80px;
padding: 25px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtCont {
width: 100%;
height: auto;
margin-top: 8px;
padding: 0 0 40px;
flex-wrap: wrap;
position: relative;
}
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtText {
width: 100%;
padding: 3px 0;
color: #000;
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtCont .cmtText {
padding: 0;
font-size: 0.9375rem;
}
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox {
width: 128px;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox {
width: 100%;
margin-top: 8px;
}
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn {
width: max-content;
min-width: 50px;
height: 30px;
margin-right: 4px;
padding: 0 15px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn {
min-width: 60px;
}
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn:last-child {
margin-right: 0;
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn.basic {
color: #FFF;
background: #4D5DF2;
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn.basic:disabled {
background: #BBC1F6;
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn.bGray {
color: #4053FF;
background: #F4F6F8;
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtBtnBox .btn.oGray {
color: #FF9900;
background: #F4F6F8;
}
.cptComment .cmtUnit .cmtBox .cmtCont .cmtDate {
width: 96px;
color: #000;
text-align: right;
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: normal;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtCont .cmtDate {
font-size: 0.75rem;
position: absolute;
top: -22px;
right: 0;
}
}
.cptComment .cmtUnit .cmtBox .cmtWriteBox {
width: 100%;
margin: 10px 0 48px;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtWriteBox {
margin: 0 0 30px;
}
}
.cptComment .cmtUnit .cmtBox .cmtWriteBox .writeText textarea {
min-height: 130px;
}
@media screen and (max-width: 767px) {
.cptComment .cmtUnit .cmtBox .cmtWriteBox .writeText textarea {
min-height: 165px;
}
}
.cptComment .cmtWriteBox {
width: 100%;
margin-top: 60px;
}
@media screen and (max-width: 767px) {
.cptComment .cmtWriteBox {
margin-top: 17px;
}
}
.cptComment .cmtWriteBox .writeText {
width: 100%;
position: relative;
}
.cptComment .cmtWriteBox .writeText textarea {
width: 100%;
min-height: 200px;
padding: 40px;
color: #000;
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: 1.5;
border: 0;
border-radius: 12px;
background: #F7F9FB;
resize: vertical;
}
.cptComment .cmtWriteBox .writeText textarea::placeholder {
color: rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 767px) {
.cptComment .cmtWriteBox .writeText textarea {
min-height: 165px;
padding: 45px 15px 35px;
font-size: 0.9375rem;
}
}
.cptComment .cmtWriteBox .writeText .byte {
color: rgba(0, 0, 0, 0.3);
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: normal;
display: block;
position: absolute;
right: 11px;
top: 11px;
}
@media screen and (max-width: 767px) {
.cptComment .cmtWriteBox .writeText .byte {
font-size: 0.75rem;
top: 19px;
}
}
.cptComment .cmtWriteBox .writeBtm {
width: 100%;
margin-top: 10px;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 767px) {
.cptComment .cmtWriteBox .writeBtm {
margin-top: 15px;
}
}
.cptComment .cmtWriteBox .writeBtm .btmL {
width: 100%;
padding-left: 10px;
display: flex;
justify-content: flex-start;
}
@media screen and (max-width: 767px) {
.cptComment .cmtWriteBox .writeBtm .btmL {
padding-left: 0;
}
}
.cptComment .cmtWriteBox .writeBtm .btmR {
width: 100%;
display: flex;
justify-content: flex-end;
}
.cptComment .cmtWriteBox .writeBtm .btmR .btn {
width: max-content;
min-width: 70px;
height: 30px;
margin-right: 4px;
padding: 0 15px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.cptComment .cmtWriteBox .writeBtm .btmR .btn:last-child {
margin-right: 0;
}
.cptComment .cmtWriteBox .writeBtm .btmR .btn.basic {
color: #FFF;
background: #4D5DF2;
}
.cptComment .cmtWriteBox .writeBtm .btmR .btn.basic:disabled {
background: #BBC1F6;
}
.cptComment .cmtWriteBox .writeBtm .btmR .btn.bGray {
color: #4053FF;
background: #F4F6F8;
}
.cptComment .cmtWriteBox .writeBtm .btmR .btn.oGray {
color: #FF9900;
background: #F4F6F8;
}
.cptSection {
width: 100%;
margin-top: 60px;
}
.cptSection:first-child {
margin-top: 0;
}
.cptSection:has(.comDateSwiper.sticky) {
position: sticky;
left: 0;
top: 64px;
z-index: 90;
background: #fff;
}
@media screen and (max-width: 767px) {
.cptSection:has(.comDateSwiper.sticky) {
top: 72px;
}
}
@media screen and (max-width: 767px) {
.cptSection {
margin-top: 40px;
}
}
.cptSection.btmLine {
padding-bottom: 60px;
border-bottom: 10px solid #f4f6fa;
}
.cptSection.btmLine:last-child {
padding-bottom: 0;
border-bottom: none;
}
@media screen and (max-width: 767px) {
.cptSection.btmLine {
padding-bottom: 0;
border-bottom: none;
}
.cptSection.btmLine::after {
display: block;
content: "";
width: calc(100% + 32px);
margin-left: -16px;
margin-top: 40px;
height: 10px;
background: #f4f6fa;
}
}
form:has(.cptSection:first-child) {
margin-top: 60px;
}
form:has(.cptSection:first-child):first-child {
margin-top: 0;
}
@media screen and (max-width: 767px) {
form:has(.cptSection:first-child) {
margin-top: 40px;
}
}
.cptCol2Section {
margin-top: 60px;
}
.cptCol2Section:first-child {
margin-top: 0;
}
.cptCol2Section .sectGroup {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 80px 100px;
align-items: stretch;
}
.cptCol2Section .sectGroup:first-child {
margin-top: 0;
}
.cptCol2Section .sectGroup .sectItem {
flex: 0 0 calc(50% - 50px);
}
@media screen and (max-width: 767px) {
.cptCol2Section {
margin-top: 30px;
}
.cptCol2Section .sectGroup {
margin-top: 20px;
gap: 40px;
}
.cptCol2Section .sectGroup .sectItem {
flex: 0 0 100%;
}
}
.cptCol3Section {
margin-top: 60px;
}
.cptCol3Section:first-child {
margin-top: 0;
}
.cptCol3Section .sectGroup {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 80px 40px;
align-items: stretch;
}
.cptCol3Section .sectGroup:first-child {
margin-top: 0;
}
.cptCol3Section .sectGroup .sectItem {
flex: 0 0 calc(33.3333% - 26.6667px);
}
@media screen and (max-width: 767px) {
.cptCol3Section {
margin-top: 30px;
}
.cptCol3Section .sectGroup {
margin-top: 16px;
gap: 32px;
}
.cptCol3Section .sectGroup .sectItem {
flex: 0 0 100%;
}
}
.cptLinkSection {
width: 100%;
margin-top: 60px;
padding-bottom: 60px;
border-bottom: 10px solid #f4f6fa;
}
.cptLinkSection:first-child {
margin-top: 0;
}
.cptLinkSection:last-child {
padding-bottom: 0;
border-bottom: none;
}
@media screen and (max-width: 767px) {
.cptLinkSection {
margin-top: 40px;
}
}
.cptEtcInfo {
margin-top: 60px;
}
.cptEtcInfo:first-child {
margin-top: 0;
}
.cptEtcInfo .infoBox {
width: 100%;
border: 1px solid var(--Point-Primary2);
border-radius: 20px;
padding: 40px 32px;
}
.cptEtcInfo .infoBox .info {
padding: 32px 0;
border-top: 1px solid var(--Bg-Line-line-200);
}
.cptEtcInfo .infoBox .info:first-child {
padding-top: 0;
border-top: none;
}
.cptEtcInfo .infoBox .info:last-child {
padding-bottom: 0;
}
.cptEtcInfo .infoBox .info dt {
min-height: 40px;
padding-left: 48px;
background: url(../../../images/kboat/common/ico_etc_info.svg) left center no-repeat;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.cptEtcInfo .infoBox .info dt .tit {
font-size: 1.25rem;
color: var(--Gray-800);
font-weight: 700;
line-height: 1.4;
}
.cptEtcInfo .infoBox .info dt .subTit {
margin-left: 24px;
font-size: 1.125rem;
color: var(--Primary);
font-weight: 600;
line-height: 1.6;
display: inline-block;
position: relative;
}
.cptEtcInfo .infoBox .info dt .subTit::after {
display: block;
content: "";
width: 1px;
height: 12px;
position: absolute;
left: -12px;
top: 8px;
background: var(--Gray-200);
}
.cptEtcInfo .infoBox .info dd {
margin-top: 32px;
}
.cptEtcInfo .infoBox .info dd .infoList {
padding-left: 7px;
flex: 1 1 auto;
}
.cptEtcInfo .infoBox .info dd .infoList .listGroup .item {
margin-top: 12px;
}
.cptEtcInfo .infoBox .info dd .infoList .listGroup .item em {
font-weight: 700;
}
.cptEtcInfo .infoBox .info dd .infoList .listGroup .item .etcInfoBox {
width: calc(100% + 11px);
margin-left: -11px;
}
.cptEtcInfo .infoBox .info dd .boxStep {
margin-top: 12px;
display: flex;
column-gap: 55px;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem {
padding: 14px 8px;
border-radius: 8px;
text-align: center;
background: var(--Bg-Line-line-300);
flex: 0 1 100%;
position: relative;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem::after {
display: block;
content: "";
width: 24px;
height: 24px;
background: url(../../../images/kboat/common/ic_20_arr_right_g.svg) center no-repeat;
position: absolute;
top: 50%;
right: -39px;
transform: translateY(-50%);
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem:last-child:after {
display: none;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem em {
font-size: 1.125rem;
color: var(--Primary);
font-weight: 700;
display: block;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem i {
margin-top: 4px;
font-style: normal;
font-size: 1rem;
color: var(--Gray-800);
font-weight: 300;
display: block;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem b {
font-weight: 600;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg {
margin-top: 255px;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg i {
font-weight: 400;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg::before {
content: "";
position: absolute;
top: -255px;
left: 0;
right: 0;
height: 255px;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg::after {
top: -90px;
}
.cptEtcInfo .infoBox .info dd .boxStep .step1::before {
background: url(../../../images/kboat/contents/cont06_07_01_step1.png) no-repeat top center/240px;
}
.cptEtcInfo .infoBox .info dd .boxStep .step2::before {
background: url(../../../images/kboat/contents/cont06_07_01_step2.png) no-repeat top center/254px;
}
.cptEtcInfo .infoBox .info dd .boxStep .step3::before {
background: url(../../../images/kboat/contents/cont06_07_01_step3.png) no-repeat top center/240px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem {
margin-top: 24px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem:first-child {
margin-top: 0;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit {
line-height: 1.6;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit .num {
font-size: 1.125rem;
color: var(--Primary);
font-weight: 700;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit .txt {
font-size: 1rem;
color: var(--Gray-800);
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit .bullet {
position: relative;
padding-left: 18px;
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 700;
line-height: 150%; /* 24px */
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit .bullet::after {
display: block;
content: "";
width: 3px;
height: 3px;
background: var(--Gray-400);
position: absolute;
left: 7px;
top: 8px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .aTxt {
margin-top: 12px;
border-radius: 8px;
padding: 24px 30px;
background: var(--Bg-Line-bg-200);
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .aTxt .pharse {
margin-top: 8px;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--Gray-800);
word-break: keep-all;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .aTxt .pharse:first-child {
margin-top: 0;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox {
width: 100%;
margin: 20px 0;
padding: 24px 30px;
border-radius: 8px;
background: var(--Bg-Line-bg-300);
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcTit {
margin-bottom: 12px;
font-size: 0.9375rem;
color: var(--Primary);
font-weight: 700;
display: inline-block;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcItem {
margin-top: 6px;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--Gray-800);
display: flex;
justify-content: flex-start;
align-items: flex-start;
column-gap: 5px;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcItem:first-child {
margin-top: 0;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcItem .txt {
font-style: normal;
line-height: 1.8;
display: inline-block;
vertical-align: middle;
flex: 0 1 auto;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcItem .num {
font-weight: 600;
display: inline-block;
vertical-align: middle;
}
.cptEtcInfo.col2 dd {
display: flex;
column-gap: 24px;
align-items: center;
}
@media screen and (max-width: 767px) {
.cptEtcInfo.col2 dd {
flex-wrap: wrap;
row-gap: 16px;
}
.cptEtcInfo.col2 dd .thumArea {
width: 100%;
text-align: center;
}
.cptEtcInfo.col2 dd .thumArea img {
max-width: 100%;
}
}
@media screen and (max-width: 767px) {
.cptEtcInfo {
margin-top: 40px;
}
.cptEtcInfo .infoBox {
border-radius: 16px;
padding: 24px;
}
.cptEtcInfo .infoBox .info dt {
min-height: auto;
padding-left: 0;
padding-top: 48px;
background-position: left top;
}
.cptEtcInfo .infoBox .info dt .tit {
width: 100%;
font-weight: 600;
}
.cptEtcInfo .infoBox .info dt .subTit {
margin-left: 0;
margin-top: 8px;
font-size: 1rem;
line-height: 1.3;
}
.cptEtcInfo .infoBox .info dt .subTit::after {
display: none;
}
.cptEtcInfo .infoBox .info dd {
margin-top: 16px;
}
.cptEtcInfo .infoBox .info dd .infoList {
padding-left: 0;
}
.cptEtcInfo .infoBox .info dd .boxStep {
gap: 36px 0;
flex-wrap: wrap;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem {
flex: 0 0 100%;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem::after {
width: 20px;
height: 20px;
top: auto;
right: auto;
bottom: -28px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem em {
font-size: 1rem;
}
.cptEtcInfo .infoBox .info dd .boxStep .stepItem i {
font-size: 0.9375rem;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg {
margin-top: 102px;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg i {
font-weight: 400;
}
.cptEtcInfo .infoBox .info dd .boxStep .kImg::before {
top: -102px;
height: 102px;
}
.cptEtcInfo .infoBox .info dd .boxStep .step1::before {
background-size: 120px;
}
.cptEtcInfo .infoBox .info dd .boxStep .step2::before {
background-size: 127px;
}
.cptEtcInfo .infoBox .info dd .boxStep .step3::before {
background-size: 120px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem {
margin-top: 20px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit {
display: flex;
align-items: flex-start;
column-gap: 5px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit .num {
font-size: 1rem;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .qTit .txt {
font-size: 0.9375rem;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .aTxt {
margin-top: 8px;
padding: 20px 16px;
}
.cptEtcInfo .infoBox .info dd .qnaList .qnaItem .aTxt .pharse {
margin-top: 8px;
font-size: 0.875rem;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox {
margin: 16px 0;
padding: 20px;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcItem {
margin-top: 8px;
display: inline-block;
}
.cptEtcInfo .infoBox .info dd .etcInfoBox .etcItem .txt {
line-height: 1.6;
}
}
.cptDescList {
margin-top: 40px;
}
.cptDescList:first-child {
margin-top: 0;
}
.cptDescList .thumList {
display: flex;
flex-wrap: wrap;
gap: 60px 100px;
}
.cptDescList .thumList .thumItem {
flex: 0 0 calc(50% - 50px);
}
.cptDescList .thumList .thumItem .thumArea {
width: 100%;
height: 320px;
border-radius: 12px;
overflow: hidden;
}
.cptDescList .thumList .thumItem .thumArea img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cptDescList .thumList .thumItem .descArea {
margin-top: 20px;
}
.cptDescList .thumList .thumItem .descArea dt {
display: flex;
align-items: center;
line-height: 1.4;
}
.cptDescList .thumList .thumItem .descArea dt .tit {
font-size: 1.25rem;
color: var(--Gray-800);
font-weight: 700;
}
.cptDescList .thumList .thumItem .descArea dt .ballon {
height: 27px;
margin-left: 14px;
padding: 0 10px;
border-radius: 8px;
line-height: 27px;
font-size: 1rem;
color: #fff;
font-weight: 600;
background: var(--Point-Primary2);
display: inline-block;
vertical-align: middle;
position: relative;
}
.cptDescList .thumList .thumItem .descArea dt .ballon .detail {
color: #fdffa0;
}
.cptDescList .thumList .thumItem .descArea dt .ballon::after {
display: block;
content: "";
width: 0;
height: 0;
border: 4.5px solid transparent;
border-right: 10px solid var(--Point-Primary2);
border-radius: 2px;
position: absolute;
left: -10px;
top: 10px;
}
@media screen and (max-width: 767px) {
.cptDescList {
margin-top: 32px;
}
.cptDescList .thumList {
gap: 40px;
}
.cptDescList .thumList .thumItem {
flex: 0 0 100%;
}
.cptDescList .thumList .thumItem .thumArea {
height: 185px;
}
.cptDescList .thumList .thumItem .descArea dt .tit {
font-size: 1.125rem;
font-weight: 600;
}
.cptDescList .thumList .thumItem .descArea dt .ballon {
height: 25px;
line-height: 25px;
font-size: 0.875rem;
}
.cptDescList .thumList .thumItem .descArea dt .ballon::after {
top: 9px;
}
}
.cptQuickMove {
margin-top: 60px;
}
.cptQuickMove:first-child {
margin-top: 0;
}
.cptQuickMove .boxArea {
border-radius: 16px;
padding: 24px 80px;
background: var(--Bg-Line-bg-100);
}
.cptQuickMove .boxArea .quickBox {
width: 100%;
padding: 24px 0;
border-top: 1px solid var(--Bg-Line-line-100);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.cptQuickMove .boxArea .quickBox:first-child {
border-top: none;
padding-top: 0;
}
.cptQuickMove .boxArea .quickBox:last-child {
padding-bottom: 0;
}
.cptQuickMove .boxArea .quickBox .txtArea .point {
font-size: 1.125rem;
font-weight: 700;
color: var(--Gray-900);
line-height: 1.4;
display: block;
}
.cptQuickMove .boxArea .quickBox .txtArea .desc {
margin-top: 9px;
font-size: 1rem;
line-height: 1.6;
color: var(--Gray-800);
}
.cptQuickMove .boxArea .quickBox .txtArea .desc b {
font-weight: 600;
}
.cptQuickMove .boxArea .quickBox .txtArea img {
display: inline-block;
vertical-align: middle;
}
.cptQuickMove .boxArea .quickBox .btnArea .btn::after {
display: inline-block;
content: "";
vertical-align: text-bottom;
width: 20px;
height: 20px;
margin-left: 4px;
background: url(../../../images/kboat/common/ic_16_arr_right_w.svg) center no-repeat;
}
.cptQuickMove .boxArea .quickBox .btnArea .btn.download:after {
background-image: url("../../../images/kboat/common/ic_16_file_download.svg");
background-size: 12px;
}
.cptQuickMove .boxArea .quickBox .btnArea .btn.downloadWhite:after {
background-image: url("../../../images/kboat/common/ic_16_file_download_white.svg") !important;
background-size: 12px;
}
.cptQuickMove .boxArea .quickBox .btnArea .btn.multiLine {
display: flex;
align-items: center;
width: 100%;
height: auto;
min-height: 48px;
line-height: normal;
padding: 10px 48px 10px 24px;
position: relative;
}
.cptQuickMove .boxArea .quickBox .btnArea .btn.multiLine:after {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.cptQuickMove .boxArea .quickBox .btnArea .btn.multiLine {
padding: 15px 48px 15px 24px;
}
}
.cptQuickMove .boxArea .quickBox .btnArea.multiBtn {
display: flex;
align-items: center;
gap: 12px;
}
.cptQuickMove .boxArea .quickBox .phoneArea {
width: 100%;
display: flex;
}
.cptQuickMove .boxArea .quickBox .phoneArea dt {
color: var(--Gray-800);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
}
.cptQuickMove .boxArea .quickBox .phoneArea dd {
margin-left: 32px;
padding-left: 32px;
color: var(--Gray-800);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
position: relative;
}
.cptQuickMove .boxArea .quickBox .phoneArea dd::before {
content: "";
width: 1px;
height: 11px;
background: var(--Gray-300);
display: block;
position: absolute;
left: 0;
top: 9px;
}
@media screen and (max-width: 767px) {
.cptQuickMove .boxArea .quickBox .phoneArea dt {
font-size: 1rem;
}
.cptQuickMove .boxArea .quickBox .phoneArea dd {
margin-left: 24px;
padding-left: 24px;
font-size: 1rem;
}
.cptQuickMove .boxArea .quickBox .phoneArea dd::before {
content: "";
width: 1px;
height: 11px;
background: var(--Gray-300);
display: block;
position: absolute;
left: 0;
top: 7.5px;
}
}
.cptQuickMove .boxArea.bgWhite {
border-radius: 16px;
border: 1px solid var(--bg-line-line-200, #EDEDED);
background: var(--bg-line-white, #FFF);
}
.cptQuickMove .boxArea.bgWhite .quickBox .btnArea .btn::after {
background-image: url("../../../images/kboat/common/ic_16_arr_right_g.svg");
}
.cptQuickMove .boxArea.bgKey {
background-color: #eef9fd;
}
.cptQuickMove .boxArea.interval {
padding: 24px 40px;
}
.cptQuickMove .boxArea.copyright .txt {
color: var(--Gray-900, #111);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptQuickMove .boxArea.copyright .txt b {
font-weight: 600;
}
.cptQuickMove .boxArea.copyright img {
height: 48px;
display: block;
}
.cptQuickMove .boxArea.bbsViewBt {
margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.cptQuickMove {
margin-top: 40px;
}
.cptQuickMove .pcView {
display: none;
}
.cptQuickMove .boxArea {
width: calc(100% + 32px);
margin-left: -16px;
border-radius: 0;
padding: 24px;
}
.cptQuickMove .boxArea .quickBox {
flex-wrap: wrap;
gap: 20px;
}
.cptQuickMove .boxArea .quickBox .txtArea {
flex: 0 0 100%;
word-break: keep-all;
}
.cptQuickMove .boxArea .quickBox .txtArea .desc {
margin-top: 9px;
font-size: 0.9375rem;
}
.cptQuickMove .boxArea .quickBox .btnArea {
flex: 0 0 100%;
}
.cptQuickMove .boxArea .quickBox .btnArea.multiBtn {
flex-direction: column;
align-items: normal;
}
.cptQuickMove .boxArea .quickBox .btnArea.multiBtn .btn {
min-width: 222px;
text-align: left;
display: flex;
align-items: center;
}
.cptQuickMove .boxArea .quickBox .btnArea.multiBtn .btn span {
flex: 1;
}
.cptQuickMove .boxArea.interval {
padding: 32px 24px;
width: 100%;
margin-left: 0;
}
.cptQuickMove .boxArea.copyright {
padding: 24px 24px 32px;
border-radius: 16px;
}
.cptQuickMove .boxArea.copyright .txt {
font-size: 0.9375rem;
}
.cptQuickMove .boxArea.copyright img {
height: 40px;
}
.cptQuickMove .boxArea.bbsViewBt {
margin-bottom: 32px;
}
.cptQuickMove .boxArea.bbsOnly {
margin-left: 16px;
margin-right: 16px;
width: calc(100% - 32px);
}
}
.cptQuickMove + .cptAnnounce {
margin-top: 60px;
}
@media screen and (max-width: 767px) {
.cptQuickMove + .cptAnnounce {
margin-top: 40px;
}
}
.cptQuickMove.login .comTitH3 h3 {
padding-left: 0;
background: none;
}
.cptQuickMove.login .comBasicTxt .txt {
color: var(--Gray-600);
}
.cptQuickMove.login .boxArea {
display: flex;
justify-content: center;
padding-left: 60px;
padding-right: 60px;
}
.cptQuickMove.login .boxArea:not(:first-child) {
margin-top: 20px;
}
.cptQuickMove.login .boxArea .tbBox {
position: relative;
display: flex;
align-items: center;
}
.cptQuickMove.login .boxArea .tbBox:not(:first-child) {
margin-left: 120px;
}
.cptQuickMove.login .boxArea .tbBox:not(:first-child)::before {
content: "";
position: absolute;
left: -60px;
top: 50%;
width: 1px;
height: 16px;
background-color: var(--Gray-200);
transform: translateY(-50%);
}
.cptQuickMove.login .boxArea .tbBox .tbTitle {
min-width: 90px;
padding-right: 40px;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
}
.cptQuickMove.login .boxArea .tbBox .tbCont {
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
}
@media screen and (max-width: 1280px) {
.cptQuickMove.login .boxArea .tbBox:not(:first-child) {
margin-left: 80px;
}
.cptQuickMove.login .boxArea .tbBox:not(:first-child)::before {
left: -40px;
}
.cptQuickMove.login .boxArea .tbBox .tbTitle {
min-width: 80px;
padding-right: 20px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 767px) {
.cptQuickMove.login .boxArea {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin: 0;
padding-left: 24px;
padding-right: 24px;
}
.cptQuickMove.login .boxArea .tbBox {
width: 100%;
}
.cptQuickMove.login .boxArea .tbBox:not(:first-child) {
margin-top: 20px;
margin-left: 0;
}
.cptQuickMove.login .boxArea .tbBox .tbCont {
width: 100%;
}
.cptQuickMove.login .boxArea .tbBox .tbCont .frmBox.frmMd {
width: 100%;
min-width: 100%;
}
}
.cptImgPopup {
margin-top: 32px;
}
.cptImgPopup:first-child {
margin-top: 0;
}
.cptImgPopup .imgArea .imgBox {
margin-top: 12px;
position: relative;
}
.cptImgPopup .imgArea .imgBox:first-child {
margin-top: 0;
}
.cptImgPopup .imgArea .imgBox .popInfo {
text-align: right;
position: absolute;
top: -34px;
right: 0;
}
.cptImgPopup .imgArea .imgBox .popInfo .info {
padding-left: 20px;
font-size: 0.875rem;
line-height: 1.6;
color: var(--Gray-600);
display: inline-block;
background: url(../../../images/kboat/common/ico_guide_default.svg) left center no-repeat;
}
.cptImgPopup .imgArea .imgBox .imgWrap {
width: 100%;
border-radius: 12px;
text-align: center;
overflow: hidden;
}
.cptImgPopup .imgArea .imgBox .imgWrap img {
max-width: 100%;
}
.cptImgPopup .imgArea .imgBox .infoGroup .numbItem {
position: absolute;
}
@media screen and (max-width: 767px) {
.cptImgPopup {
margin-top: 24px;
}
.cptImgPopup .imgArea .imgBox .popInfo {
margin-bottom: 16px;
text-align: left;
position: static;
}
.cptImgPopup .imgArea .imgBox .popInfo .info {
font-size: 0.8125rem;
display: block;
}
}
.cptImgGuideBox {
margin-top: 60px;
}
.cptImgGuideBox:first-child {
margin-top: 0;
}
.cptImgGuideBox .boxArea {
margin-top: 20px;
border: 1px solid var(--Bg-Line-line-200);
border-radius: 16px;
padding: 60px 80px;
display: flex;
align-items: stretch;
justify-content: space-between;
column-gap: 80px;
}
.cptImgGuideBox .boxArea:first-child {
margin-top: 0;
}
.cptImgGuideBox .boxArea .descArea {
flex: 0 0 calc(50% - 40px);
}
.cptImgGuideBox .boxArea .descArea .descItem {
padding: 0 0 44px 65px;
position: relative;
}
.cptImgGuideBox .boxArea .descArea .descItem::before {
display: block;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--Point-Primary2);
position: absolute;
top: 10px;
left: 34px;
}
.cptImgGuideBox .boxArea .descArea .descItem::after {
display: block;
content: "";
width: 1px;
height: calc(100% - 24px);
background: var(--Gray-200);
position: absolute;
top: 26px;
left: 38px;
}
.cptImgGuideBox .boxArea .descArea .descItem:last-child {
padding-bottom: 0;
}
.cptImgGuideBox .boxArea .descArea .descItem:last-child::after {
display: none;
}
.cptImgGuideBox .boxArea .descArea .descItem .num {
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
color: var(--Point-Primary2);
display: inline-block;
position: absolute;
top: 3px;
left: 0;
}
.cptImgGuideBox .boxArea .descArea .descItem dt {
font-size: 1.125rem;
font-weight: 700;
color: var(--Gray-900);
}
.cptImgGuideBox .boxArea .descArea .descItem dd {
margin-top: 4px;
font-size: 1rem;
font-weight: 500;
color: var(--Gray-800);
}
.cptImgGuideBox .boxArea .descArea .descItem i {
width: 100%;
margin-top: 4px;
font-style: normal;
font-size: 0.9375rem;
color: var(--Gray-600);
display: inline-block;
}
.cptImgGuideBox .boxArea .viewArea {
flex: 0 0 calc(50% - 40px);
}
.cptImgGuideBox .boxArea .viewArea .viewTit {
font-size: 1.25rem;
color: var(--Primary);
font-weight: 700;
}
.cptImgGuideBox .boxArea .viewArea .dotList {
margin-top: 20px;
}
.cptImgGuideBox .boxArea .viewArea .dotList .listGroup .item {
padding-left: 11px;
position: relative;
}
.cptImgGuideBox .boxArea .viewArea .dotList .listGroup .item::after {
content: "";
width: 3px;
height: 3px;
background: #92959A;
display: block;
position: absolute;
top: 11px;
left: 0;
}
.cptImgGuideBox .boxArea .viewArea .dotList .listGroup .item .sTit {
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
.cptImgGuideBox .boxArea .viewArea .dotList .listGroup.half::after {
display: block;
content: "";
clear: both;
}
.cptImgGuideBox .boxArea .viewArea .dotList .listGroup.half .item {
width: 50%;
float: left;
margin-top: 0;
margin-bottom: 12px;
}
.cptImgGuideBox .boxArea .viewArea .dotList.half {
display: flex;
}
.cptImgGuideBox .boxArea .viewArea .dotList.half .listGroup {
width: 50%;
}
.cptImgGuideBox .boxArea .viewArea .comImgWrap {
margin-top: 40px;
}
.cptImgGuideBox .boxArea .viewArea .comImgWrap:first-child {
margin-top: 0;
}
.cptImgGuideBox .boxArea .viewArea .comImgWrap.mgH {
margin-top: 15px;
}
@media screen and (max-width: 767px) {
.cptImgGuideBox {
margin-top: 40px;
}
.cptImgGuideBox .boxArea {
margin-top: 12px;
padding: 24px;
flex-wrap: wrap;
column-gap: 0;
}
.cptImgGuideBox .boxArea .descArea {
flex: 0 0 100%;
padding-bottom: 32px;
border-bottom: 1px solid var(--Bg-Line-line-200);
}
.cptImgGuideBox .boxArea .descArea .descItem {
padding: 0 0 24px 61px;
}
.cptImgGuideBox .boxArea .descArea .descItem::before {
top: 7px;
left: 33px;
}
.cptImgGuideBox .boxArea .descArea .descItem::after {
height: calc(100% - 22px);
top: 22px;
left: 37px;
}
.cptImgGuideBox .boxArea .descArea .descItem .num {
top: 1px;
}
.cptImgGuideBox .boxArea .descArea .descItem dt {
font-size: 1rem;
}
.cptImgGuideBox .boxArea .descArea .descItem dd {
font-size: 0.9375rem;
font-weight: 400;
}
.cptImgGuideBox .boxArea .descArea .descItem i {
font-size: 0.875rem;
}
.cptImgGuideBox .boxArea .viewArea {
flex: 0 0 100%;
padding-top: 32px;
}
.cptImgGuideBox .boxArea .viewArea .viewTit {
font-size: 1.125rem;
font-weight: 600;
}
.cptImgGuideBox .boxArea .viewArea .comImgWrap {
margin-top: 16px;
}
.cptImgGuideBox .boxArea .viewArea .comImgWrap.mgH {
margin-top: 12px;
}
.cptImgGuideBox.mReverse .descArea {
order: 1;
padding: 32px 0 0 0;
border-top: 1px solid var(--Bg-Line-line-200);
border-bottom: none;
}
.cptImgGuideBox.mReverse .viewArea {
order: 0;
padding: 0 0 32px 0;
}
}
.cptWordTab .btnArea {
padding-bottom: 40px;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptWordTab .btnArea .btnGroup {
width: 100%;
display: flex;
gap: 1%;
align-items: center;
justify-content: space-between;
}
.cptWordTab .btnArea .btnGroup .btnItem {
flex: 1 0 auto;
}
.cptWordTab .btnArea .btnGroup .btnItem .btn {
width: 100%;
border-radius: 23px;
}
.cptWordTab .contArea {
margin-top: 40px;
}
.cptWordTab .contArea .tabCont {
display: none;
}
.cptWordTab .contArea .tabCont.on {
display: block;
}
.cptWordTab .contArea .wordGroup .wordItem {
margin-top: 48px;
}
.cptWordTab .contArea .wordGroup .wordItem:first-child {
margin-top: 0;
}
.cptWordTab .contArea .wordGroup .wordItem dt {
display: flex;
align-items: center;
}
.cptWordTab .contArea .wordGroup .wordItem dt .word {
font-size: 1.5rem;
color: var(--Gray-900);
font-weight: 700;
}
.cptWordTab .contArea .wordGroup .wordItem dt .tagWrap {
margin-left: 12px;
}
.cptWordTab .contArea .wordGroup .wordItem dt .tagWrap .tag {
height: 24px;
padding: 0 10px;
margin-right: 4px;
border-radius: 12px;
line-height: 22px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
vertical-align: middle;
}
.cptWordTab .contArea .wordGroup .wordItem dt .tagWrap .tag.mint {
color: #078B7B;
border: 1px solid #078B7B;
}
.cptWordTab .contArea .wordGroup .wordItem dt .tagWrap .tag.blue {
color: var(--Point-Primary3);
border: 1px solid var(--Point-Primary3);
}
.cptWordTab .contArea .wordGroup .wordItem dd {
margin-top: 17px;
font-size: 1rem;
color: var(--Gray-800);
word-break: keep-all;
}
@media screen and (max-width: 1186px) {
.cptWordTab .btnArea .btnGroup {
gap: 10px 1%;
justify-content: flex-start;
flex-wrap: wrap;
}
.cptWordTab .btnArea .btnGroup .btnItem {
flex: 0 1 auto;
}
}
@media screen and (max-width: 767px) {
.cptWordTab {
margin-top: 20px;
}
.cptWordTab .btnArea .btnGroup {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
.cptWordTab .btnArea .btnGroup .btnItem {
flex: 0 0 60px;
}
.cptWordTab .btnArea .btnGroup .btnItem .btn {
height: 36px;
padding: 0 5px;
line-height: 34px;
border-radius: 18px;
}
.cptWordTab .contArea .wordGroup .wordItem {
margin-top: 32px;
}
.cptWordTab .contArea .wordGroup .wordItem dt .word {
font-size: 1.125rem;
font-weight: 600;
flex-shrink: 0;
}
.cptWordTab .contArea .wordGroup .wordItem dt .tagWrap {
width: 100%;
margin-left: 8px;
}
.cptWordTab .contArea .wordGroup .wordItem dd {
margin-top: 9px;
font-size: 0.9375rem;
}
}
.cptWordFilter.eng .btnArea .btnGroup {
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px 1%;
}
.cptWordFilter.eng .btnArea .btnGroup .btnItem {
flex: 0 0 auto;
}
.cptWordFilter .btnArea .btnGroup {
width: 100%;
display: flex;
gap: 1%;
align-items: center;
justify-content: space-between;
}
.cptWordFilter .btnArea .btnGroup .btnItem {
flex: 1 0 auto;
}
.cptWordFilter .btnArea .btnGroup .btnItem .btn {
width: 100%;
border-radius: 23px;
}
.cptWordFilter .comSearchBox {
margin-top: 32px;
}
@media screen and (max-width: 1186px) {
.cptWordFilter .btnArea .btnGroup {
gap: 10px 1%;
justify-content: flex-start;
flex-wrap: wrap;
}
.cptWordFilter .btnArea .btnGroup .btnItem {
flex: 0 1 auto;
}
}
@media screen and (max-width: 767px) {
.cptWordFilter {
margin-top: 20px;
}
.cptWordFilter .btnArea .btnGroup {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
.cptWordFilter .btnArea .btnGroup .btnItem {
flex: 0 0 60px;
}
.cptWordFilter .btnArea .btnGroup .btnItem .btn {
height: 36px;
padding: 0 5px;
line-height: 34px;
border-radius: 18px;
}
}
.cpt2ImgboxSect {
margin-top: 60px;
}
.cpt2ImgboxSect:first-child {
margin-top: 0;
}
.cpt2ImgboxSect .sectGroup {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 80px 100px;
align-items: stretch;
}
.cpt2ImgboxSect .sectGroup:first-child {
margin-top: 0;
}
.cpt2ImgboxSect .sectGroup .sectItem {
flex: 0 0 calc(50% - 50px);
}
.cpt2ImgboxSect .sectGroup .sectItem .boxTit h2 {
font-size: 1.25rem;
color: var(--Gray-900);
font-weight: 700;
}
.cpt2ImgboxSect .sectGroup .sectItem .comBasicTxt {
min-height: 52px;
}
.cpt2ImgboxSect .sectGroup .sectItem .comImgBox {
min-height: 320px;
}
@media screen and (max-width: 767px) {
.cpt2ImgboxSect {
margin-top: 30px;
}
.cpt2ImgboxSect .sectGroup {
margin-top: 24px;
gap: 40px;
}
.cpt2ImgboxSect .sectGroup .sectItem {
flex: 0 0 100%;
}
.cpt2ImgboxSect .sectGroup .sectItem .comBasicTxt {
min-height: auto;
}
.cpt2ImgboxSect .sectGroup .sectItem .comImgBox {
min-height: auto;
}
}
.cptOrderGuide {
margin-top: 60px;
}
.cptOrderGuide:first-child {
margin-top: 0;
}
.cptOrderGuide .imgGuide {
margin-top: 20px;
border-top: 1px solid var(--Gray-300);
padding-top: 32px;
}
.cptOrderGuide .imgGuide.noLine {
border-top: none;
padding-top: 0;
}
.cptOrderGuide .imgGuide .guideGroup {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem {
flex: 0 0 calc(25% - 24px);
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit {
margin-top: 16px;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit:first-child {
margin-top: 0;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit .num {
font-size: 1.25rem;
color: var(--Gray-300);
font-weight: 600;
display: inline-block;
vertical-align: top;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit .num.round {
width: 24px;
height: 24px;
border-radius: 50%;
line-height: 24px;
background: var(--Primary);
text-align: center;
font-size: 0.875rem;
color: #fff;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit .txt {
width: calc(100% - 30px);
margin-top: 4px;
font-size: 1rem;
color: var(--Gray-800);
font-weight: 700;
display: inline-block;
vertical-align: top;
word-break: keep-all;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .imgArea {
width: 100%;
margin-top: 12px;
overflow: hidden;
line-height: 1;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .imgArea:first-child {
margin-top: 0;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .imgArea img {
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .desc {
margin-top: 12px;
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .comAddGuide {
margin-top: 6px;
}
@media screen and (max-width: 767px) {
.cptOrderGuide {
margin-top: 40px;
}
.cptOrderGuide .imgGuide {
margin-top: 10px;
padding-top: 16px;
}
.cptOrderGuide .imgGuide .guideGroup {
gap: 19px 23px;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem {
flex: 0 0 calc(50% - 11.5px);
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit .num {
font-size: 0.9375rem;
display: block;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit .num.round {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 0.75rem;
display: inline-block;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit .txt {
font-size: 0.9375rem;
display: block;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit:has(.round) {
width: 100%;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .tit:has(.round) .txt {
display: inline-block;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .imgArea {
margin-top: 6px;
align-self: flex-end;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .desc {
margin-top: 8px;
font-size: 0.9375rem;
}
.cptOrderGuide .imgGuide .guideGroup .guideItem .comAddGuide {
margin-top: 8px;
}
}
.cptOrderGuide.col3 .imgGuide .guideGroup {
gap: 40px;
}
.cptOrderGuide.col3 .imgGuide .guideGroup .guideItem {
flex: 0 0 calc(33.3333% - 26.6667px);
}
@media screen and (max-width: 767px) {
.cptOrderGuide.col3 .imgGuide .guideGroup {
gap: 24px;
}
.cptOrderGuide.col3 .imgGuide .guideGroup .guideItem {
flex: 0 0 100%;
}
}
.cptNumbGuide {
margin-top: 60px;
}
.cptNumbGuide:first-child {
margin-top: 0;
}
.cptNumbGuide .imgArea {
padding: 20px 24px;
border-radius: 12px;
background: var(--Bg-Line-bg-200);
overflow-x: auto;
}
@media screen and (min-width: 768px) {
.cptNumbGuide .imgArea::-webkit-scrollbar {
height: 6px;
}
.cptNumbGuide .imgArea::-webkit-scrollbar-thumb {
background-color: #999;
}
}
.cptNumbGuide .imgArea .mView {
display: none;
}
.cptNumbGuide .imgArea img {
min-width: 100%;
}
.cptNumbGuide .descArea {
margin-top: 24px;
}
.cptNumbGuide .descArea .numGroup .numItem {
margin-top: 32px;
padding-left: 32px;
}
.cptNumbGuide .descArea .numGroup .numItem:first-child {
margin-top: 0;
}
.cptNumbGuide .descArea .numGroup .numItem .tit {
margin-left: -32px;
}
.cptNumbGuide .descArea .numGroup .numItem .tit .num {
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
line-height: 24px;
font-size: 0.8125rem;
color: #fff;
font-weight: 700;
background: var(--Point-Primary2);
display: inline-block;
vertical-align: middle;
}
.cptNumbGuide .descArea .numGroup .numItem .tit .txt {
margin-left: 3px;
font-size: 1.125rem;
color: var(--Gray-900);
font-weight: 700;
display: inline-block;
vertical-align: bottom;
}
.cptNumbGuide .descArea .numGroup .numItem .desc {
margin-top: 8px;
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
}
.cptNumbGuide .descArea .numGroup .numItem .comAddGuide {
margin-top: 2px;
}
.cptNumbGuide .descArea .numGroup .numItem .comBasicList, .cptNumbGuide .descArea .numGroup .numItem .cptEtcInfo .infoBox .info dd .infoList, .cptEtcInfo .infoBox .info dd .cptNumbGuide .descArea .numGroup .numItem .infoList, .cptNumbGuide .cptDescList .thumList .thumItem .descArea .numGroup .numItem dd, .cptDescList .thumList .thumItem .cptNumbGuide .descArea .numGroup .numItem dd, .cptNumbGuide .descArea .numGroup .numItem .cptImgGuideBox .boxArea .viewArea .dotList, .cptImgGuideBox .boxArea .viewArea .cptNumbGuide .descArea .numGroup .numItem .dotList {
margin-left: -13px;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea {
width: calc(100% + 32px);
margin-left: -32px;
margin-top: 20px;
display: flex;
column-gap: 160px;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea + .arwArea {
margin-top: 40px;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem {
flex: 1 0 calc(50% - 80px);
position: relative;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem::after {
display: block;
content: "";
width: 64px;
height: 24px;
background: url(../../../images/kboat/common/ic_64_arw_right_p.svg) center no-repeat;
position: absolute;
top: 50%;
right: -110px;
transform: translateY(-50%);
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem:last-child::after {
display: none;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem .comContTable table th {
padding: 15px 5px;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem .comContTable table td {
padding: 15px 5px;
}
@media screen and (max-width: 767px) {
.cptNumbGuide {
margin-top: 28px;
}
.cptNumbGuide .imgArea {
width: calc(100% + 32px);
margin-left: -16px;
padding: 16px;
border-radius: 0;
}
.cptNumbGuide .imgArea .mView {
display: block;
}
.cptNumbGuide .imgArea .pcView {
display: none;
}
.cptNumbGuide .descArea {
margin-top: 16px;
}
.cptNumbGuide .descArea .numGroup .numItem {
margin-top: 24px;
padding-left: 0;
}
.cptNumbGuide .descArea .numGroup .numItem .tit {
margin-left: 0;
}
.cptNumbGuide .descArea .numGroup .numItem .tit .num {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.cptNumbGuide .descArea .numGroup .numItem .tit .txt {
font-size: 1rem;
}
.cptNumbGuide .descArea .numGroup .numItem .desc {
margin-top: 5px;
font-size: 0.9375rem;
}
.cptNumbGuide .descArea .numGroup .numItem .comAddGuide {
margin-top: 2px;
}
.cptNumbGuide .descArea .numGroup .numItem .comBasicList, .cptNumbGuide .descArea .numGroup .numItem .cptEtcInfo .infoBox .info dd .infoList, .cptEtcInfo .infoBox .info dd .cptNumbGuide .descArea .numGroup .numItem .infoList, .cptNumbGuide .cptDescList .thumList .thumItem .descArea .numGroup .numItem dd, .cptDescList .thumList .thumItem .cptNumbGuide .descArea .numGroup .numItem dd, .cptNumbGuide .descArea .numGroup .numItem .cptImgGuideBox .boxArea .viewArea .dotList, .cptImgGuideBox .boxArea .viewArea .cptNumbGuide .descArea .numGroup .numItem .dotList {
margin-left: 0;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea {
width: 100%;
margin-left: 0;
margin-top: 18px;
row-gap: 48px;
flex-wrap: wrap;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea + .arwArea {
margin-top: 48px;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem {
flex: 1 0 100%;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem::after {
width: 24px;
height: 24px;
background: url(../../../images/kboat/common/ic_24_arw_bottom_p.svg) center no-repeat;
position: absolute;
top: auto;
bottom: -36px;
right: auto;
left: 50%;
transform: translateX(-50%);
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem .comContTable table th {
padding: 10px 5px;
}
.cptNumbGuide .descArea .numGroup .numItem .arwArea .arwItem .comContTable table td {
padding: 10px 5px;
}
}
.cptProcess {
width: 100%;
margin-top: 60px;
}
.cptProcess:first-child {
margin-top: 0;
}
.cptProcess .stepWrap {
margin-top: 20px;
}
.cptProcess .stepWrap .stepGroup {
display: flex;
justify-content: space-between;
gap: 65px;
}
.cptProcess .stepWrap .stepGroup .stepItem {
border: 1px solid var(--Point-Primary2);
border-radius: 12px;
padding: 20px 10px 15px;
text-align: center;
position: relative;
flex: 0 0 calc(25% - 48.75px);
}
.cptProcess .stepWrap .stepGroup .stepItem .num {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--Primary);
line-height: 30px;
font-size: 1rem;
color: #fff;
font-weight: 700;
display: inline-block;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont {
margin-top: 10px;
width: 100%;
min-height: 73px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont dt {
width: 100%;
font-size: 1.125rem;
font-weight: 700;
color: var(--Primary);
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont dd {
width: 100%;
font-size: 1rem;
color: var(--Gray-800);
font-weight: 500;
line-height: 1.6;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont dd .adds {
font-size: 0.875rem;
font-weight: 300;
}
.cptProcess .stepWrap .stepGroup .stepItem::after {
display: block;
content: "";
width: 24px;
height: 24px;
background: url(../../../images/kboat/common/ic_24_arw_right_g.svg) center no-repeat;
position: absolute;
top: 50%;
right: -46px;
transform: translateY(-50%);
}
.cptProcess .stepWrap .stepGroup .stepItem:last-child:after {
display: none;
}
.cptProcess .stepWrap .refer {
margin-top: 20px;
font-size: 0.9375rem;
color: var(--Gray-600);
}
@media screen and (max-width: 767px) {
.cptProcess {
margin-top: 40px;
}
.cptProcess .stepWrap {
margin-top: 16px;
}
.cptProcess .stepWrap .stepGroup {
flex-wrap: wrap;
gap: 40px;
}
.cptProcess .stepWrap .stepGroup .stepItem {
padding: 20px 10px;
flex: 0 0 100%;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont {
margin-top: 12px;
min-height: auto;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont dt {
font-size: 1rem;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont dd {
font-size: 0.9375rem;
}
.cptProcess .stepWrap .stepGroup .stepItem .stepCont dd .adds {
font-size: 0.8125rem;
}
.cptProcess .stepWrap .stepGroup .stepItem::after {
position: absolute;
top: auto;
bottom: -34px;
right: auto;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.cptProcess .stepWrap .refer {
margin-top: 16px;
font-size: 0.875rem;
}
}
.cptLaw {
margin-top: 60px;
}
.cptLaw:first-child {
margin-top: 0;
}
.cptLaw .lawGroup {
margin-top: 20px;
}
.cptLaw .lawGroup .lawItem {
margin-top: 32px;
}
.cptLaw .lawGroup .lawItem:first-child {
margin-top: 0;
}
.cptLaw .lawGroup .lawItem .lawTitH3 {
margin-bottom: 12px;
}
.cptLaw .lawGroup .lawItem .lawTitH3 h3 {
font-size: 1.125rem;
color: var(--Gray-900);
font-weight: 700;
line-height: 1.4;
}
.cptLaw .lawGroup .lawItem .lawTitH4 {
font-size: 1rem;
font-weight: 700;
color: var(--Gray-800);
line-height: 1.6;
}
.cptLaw .lawGroup .lawItem .lawTxt {
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
word-break: keep-all;
}
.cptLaw .lawGroup .lawItem .lawLink {
margin-top: 12px;
font-size: 0.875rem;
color: var(--Primary);
text-decoration: underline;
text-underline-position: under;
display: inline-block;
}
@media screen and (max-width: 767px) {
.cptLaw {
margin-top: 40px;
}
.cptLaw .lawGroup {
margin-top: 16px;
}
.cptLaw .lawGroup .lawItem {
margin-top: 24px;
}
.cptLaw .lawGroup .lawItem .lawTitH3 h3 {
font-size: 1rem;
}
.cptLaw .lawGroup .lawItem .lawTitH4 {
font-size: 0.9375rem;
}
.cptLaw .lawGroup .lawItem .lawTxt {
font-size: 0.9375rem;
}
.cptLaw .lawGroup .lawItem .lawLink {
margin-top: 8px;
}
}
.cptCompanys {
margin-top: 60px;
}
.cptCompanys .compGroup {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 28px 40px;
align-items: stretch;
}
.cptCompanys .compGroup .compItem {
flex: 0 1 calc(50% - 20px);
border: 1px solid var(--Bg-Line-line-100);
border-radius: 12px;
padding: 0 30px;
}
.cptCompanys .compGroup .compItem .compWrap {
min-height: 80px;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20px;
flex-wrap: wrap;
}
.cptCompanys .compGroup .compItem .compWrap .name {
font-size: 1.125rem;
color: var(--Gray-900);
line-height: 1.4;
font-weight: 700;
white-space: nowrap;
flex: 1 0 auto;
}
.cptCompanys .compGroup .compItem .compWrap .name a {
display: inline-block;
}
.cptCompanys .compGroup .compItem .compWrap .name a::after {
display: inline-block;
content: "";
width: 28px;
height: 28px;
margin-left: 8px;
border-radius: 50%;
background: var(--Bg-Line-bg-200) url(../../../images/kboat/common/ic_16_new_window.svg) center no-repeat;
vertical-align: middle;
}
.cptCompanys .compGroup .compItem .compWrap dd {
min-width: 355px;
display: flex;
gap: 0 40px;
flex-wrap: wrap;
justify-content: flex-start;
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
font-weight: 500;
flex: 0 1 auto;
}
.cptCompanys .compGroup .compItem .compWrap dd .person {
padding-left: 24px;
background: url(../../../images/kboat/common/ic_16_person.svg) left 5px no-repeat;
}
.cptCompanys .compGroup .compItem .compWrap dd .number {
padding-left: 24px;
background: url(../../../images/kboat/common/ic_16_number.svg) left 5px no-repeat;
text-align: right;
}
@media screen and (max-width: 767px) {
.cptCompanys {
margin-top: 28px;
}
.cptCompanys .compGroup {
margin-top: 16px;
gap: 24px 0;
}
.cptCompanys .compGroup .compItem {
flex: 0 0 100%;
padding: 20px 24px;
}
.cptCompanys .compGroup .compItem .compWrap {
min-height: auto;
padding: 0;
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 16px;
}
.cptCompanys .compGroup .compItem .compWrap .name {
width: 100%;
font-weight: 600;
flex: 0 0 100%;
}
.cptCompanys .compGroup .compItem .compWrap dd {
min-width: auto;
gap: 4px 0;
justify-content: flex-start;
font-size: 0.9375rem;
flex: 0 0 100%;
}
.cptCompanys .compGroup .compItem .compWrap dd > div {
width: 100%;
}
.cptCompanys .compGroup .compItem .compWrap dd > div.number {
text-align: left;
}
.cptCompanys .compGroup .compItem .compWrap dd > div.number br {
display: none;
}
}
.cptCalendar {
position: relative;
}
.cptCalendar .calenInfo {
width: 100%;
padding: 24px 32px;
border-radius: 16px;
background: var(--Bg-Line-bg-50);
}
.cptCalendar .calenInfo .markInfo {
padding-bottom: 16px;
border-bottom: 1px solid var(--Bg-Line-line-200);
margin-bottom: 12px;
display: flex;
column-gap: 20px;
}
.cptCalendar .calenInfo .markInfo .item .mark {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 600;
line-height: 1.6;
}
.cptCalendar .calenInfo .markInfo .item .mark::before {
display: inline-block;
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 8px;
}
.cptCalendar .calenInfo .markInfo .item .mark.mint::before {
background: #0EA3F6;
}
.cptCalendar .calenInfo .markInfo .item .mark.blue::before {
background: #28C39E;
}
.cptCalendar .calenInfo .markInfo .item .mark.yellow::before {
background: #ffb444;
}
.cptCalendar .calenWrap {
margin-top: 60px;
}
.cptCalendar .calenWrap .yearData {
text-align: center;
}
.cptCalendar .calenWrap .yearData .yearArw {
width: 40px;
height: 40px;
font-size: 0;
background: url(../../../images/kboat/common/ic_40_arw_prev_k.svg) center no-repeat;
vertical-align: middle;
}
.cptCalendar .calenWrap .yearData .yearArw.next {
transform: rotate(180deg);
}
.cptCalendar .calenWrap .yearData .yearArw:disabled {
opacity: 0.3;
}
.cptCalendar .calenWrap .yearData .yearTxt {
margin: 0 60px;
font-size: 3.125rem;
font-weight: 600;
line-height: 1.3;
color: var(--Gray-900);
display: inline-block;
vertical-align: middle;
}
.cptCalendar .calenWrap .yearGroup {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: stretch;
justify-content: center;
}
.cptCalendar .calenWrap .yearGroup .yearItem {
flex: 0 0 calc(25% - 30px);
}
.cptCalendar .calenWrap .yearGroup .yearItem.nowMonth {
border-radius: 16px;
border: 1px solid var(--Point-Primary2);
background: #fff;
box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.07);
}
.cptCalendar .calenWrap .yearGroup .yearItem.nowMonth .weekDays {
width: calc(100% - 20px);
margin-left: 10px;
padding: 6px;
}
.cptCalendar .calenPopup {
width: 360px;
position: absolute;
z-index: 9;
display: none;
}
.cptCalendar .calenPopup.open {
display: block;
}
.cptCalendar .calenPopup .popWrap {
border-radius: 20px;
background: #fff;
box-shadow: 2px 4px 30px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.cptCalendar .calenPopup .popWrap .popHead {
width: 100%;
padding: 16px 32px;
background: var(--Point-Primary2);
display: flex;
justify-content: space-between;
align-items: center;
}
.cptCalendar .calenPopup .popWrap .popHead .popTit {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
color: #fff;
}
.cptCalendar .calenPopup .popWrap .popHead .popClose {
width: 24px;
height: 24px;
font-size: 0;
background: url(../../../images/kboat/common/ic_24_pop_close_w.svg) center no-repeat;
}
.cptCalendar .calenPopup .popWrap .popBody {
width: 100%;
padding: 32px 32px 40px;
text-align: left;
}
.cptCalendar .calenPopup .popWrap .dateTit {
padding-bottom: 14px;
border-bottom: 1px solid var(--Gray-300);
margin-bottom: 20px;
font-size: 1.25rem;
color: var(--Gray-800);
font-weight: 600;
line-height: 1.3;
}
.cptCalendar .calenPopup .popWrap .dateTit:last-child {
margin-bottom: 0;
border-bottom: none;
}
.cptCalendar .calenPopup .popWrap .dateDesc .category {
padding-left: 24px;
font-size: 1rem;
color: var(--Gray-800);
position: relative;
}
.cptCalendar .calenPopup .popWrap .dateDesc .category::before {
display: block;
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
top: 2px;
left: 0;
}
.cptCalendar .calenPopup .popWrap .dateDesc .category.mint::before {
background: #0EA3F6;
}
.cptCalendar .calenPopup .popWrap .dateDesc .category.blue::before {
background: #28C39E;
}
.cptCalendar .calenPopup .popWrap .dateDesc .category.yellow::before {
background: #ffb444;
}
.cptCalendar .calenPopup .popWrap .dateDesc .desc {
margin-top: 12px;
font-size: 1rem;
color: var(--Gray-900);
}
.cptCalendar .calenPopup .popWrap .dateDesc .desc:first-child {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.cptCalendar .calenInfo {
width: calc(100% + 32px);
margin-left: -16px;
padding: 24px 16px 20px;
border-radius: 0;
border: 1px solid var(--Bg-Line-line-200);
border-left: none;
border-right: none;
}
.cptCalendar .calenInfo .markInfo {
padding-bottom: 20px;
column-gap: 14px;
}
.cptCalendar .calenInfo .markInfo .item .mark {
font-size: 0.875rem;
letter-spacing: -1px;
}
.cptCalendar .calenInfo .markInfo .item .mark::before {
width: 16px;
height: 16px;
margin-right: 4px;
vertical-align: text-top;
}
.cptCalendar .calenWrap {
margin-top: 40px;
}
.cptCalendar .calenWrap .yearData .yearArw {
width: 32px;
height: 32px;
background-size: 32px;
}
.cptCalendar .calenWrap .yearData .yearTxt {
margin: 0 40px;
font-size: 1.75rem;
color: var(--Gray-800);
}
.cptCalendar .calenWrap .yearGroup {
margin-top: 20px;
gap: 20px;
}
.cptCalendar .calenWrap .yearGroup .yearItem {
flex: 0 0 100%;
}
.cptCalendar .calenWrap .yearGroup .yearItem.nowMonth .weekDays {
width: calc(100% - 20px);
margin-left: 10px;
padding: 2px;
}
.cptCalendar .calenPopup {
width: 100%;
position: fixed;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
align-items: center;
justify-content: center;
}
.cptCalendar .calenPopup.open {
display: flex;
}
.cptCalendar .calenPopup .popWrap {
width: calc(100% - 60px);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
.cptCalendar .calenPopup .popWrap .popHead {
padding: 16px 20px;
}
.cptCalendar .calenPopup .popWrap .popHead .popTit {
font-size: 1.125rem;
}
.cptCalendar .calenPopup .popWrap .popBody {
padding: 28px 32px 40px;
}
.cptCalendar .calenPopup .popWrap .dateTit {
padding-bottom: 16px;
margin-bottom: 16px;
}
}
.cptPersonList {
margin-top: 60px;
}
.cptPersonList .listTit {
margin-top: 60px;
padding-bottom: 12px;
border-bottom: 1px solid var(--Bg-Line-line-200);
}
.cptPersonList .listTit:first-child {
margin-top: 0;
}
.cptPersonList .listTit h2 {
font-size: 1.875rem;
font-weight: 600;
line-height: 1.4;
color: var(--Primary);
}
.cptPersonList .prsnList {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
gap: 60px 34px;
align-items: stretch;
}
.cptPersonList .prsnList:first-child {
margin-top: 0;
}
.cptPersonList .prsnList .prsnItem {
flex: 0 0 112px;
}
.cptPersonList .prsnList .prsnItem .prsn {
width: 100%;
display: inline-block;
}
.cptPersonList .prsnList .prsnItem .thumWrap {
width: 100%;
height: 120px;
border-radius: 16px;
overflow: hidden;
text-align: center;
}
.cptPersonList .prsnList .prsnItem .thumWrap img {
width: 100%;
height: auto;
object-fit: cover;
object-position: top;
}
.cptPersonList .prsnList .prsnItem .txtWrap {
margin-top: 12px;
}
.cptPersonList .prsnList .prsnItem .txtWrap .name {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 600;
text-align: center;
display: block;
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup {
margin-top: 8px;
display: flex;
column-gap: 4px;
align-items: center;
justify-content: center;
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup .cate {
height: 24px;
padding: 0 8px;
border-radius: 4px;
line-height: 24px;
font-size: 0.75rem;
color: #fff;
font-weight: 600;
background: var(--Gray-500);
display: inline-block;
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup .cate.blue {
background: var(--Point-Blue);
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup .cate.mint {
background: #28C39E;
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup .cate.orange {
background: var(--Point-Orange);
}
@media screen and (max-width: 767px) {
.cptPersonList {
margin-top: 40px;
}
.cptPersonList .listTit {
margin-top: 40px;
}
.cptPersonList .listTit h2 {
font-size: 1.5rem;
font-weight: 700;
}
.cptPersonList .prsnList {
margin-top: 40px;
gap: 40px 20px;
}
.cptPersonList .prsnList .prsnItem {
flex: 0 0 100px;
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup {
margin-top: 8px;
display: flex;
column-gap: 4px;
align-items: center;
justify-content: center;
}
.cptPersonList .prsnList .prsnItem .txtWrap .cateGroup .cate {
height: 20px;
line-height: 20px;
}
}
.cptPersonDesc {
margin-top: 60px;
}
.cptPersonDesc:first-child {
margin-top: 0;
}
.cptPersonDesc .profBox {
margin-top: 20px;
padding: 60px 40px 60px 60px;
border-radius: 20px;
background: var(--Bg-Line-bg-50);
display: flex;
column-gap: 80px;
position: relative;
}
.cptPersonDesc .profBox .chkArea {
position: absolute;
top: 24px;
right: 40px;
}
.cptPersonDesc .profBox .chkArea label {
padding-left: 32px;
font-size: 1rem;
color: var(--Gray-600);
font-weight: 500;
line-height: 1.6;
background: url(../../../images/kboat/common/ic_24_chk_star_off.svg) left center no-repeat;
cursor: pointer;
}
.cptPersonDesc .profBox .chkArea input[type=checkbox]:checked + label {
background-image: url(../../../images/kboat/common/ic_24_chk_star_on.svg);
}
.cptPersonDesc .profBox .photoArea {
flex: 0 1 auto;
padding-top: 20px;
}
.cptPersonDesc .profBox .photoArea .thumArea {
width: 186px;
height: 240px;
padding: 13px;
background: url(../../../images/kboat/common/thum_person_border.svg) center no-repeat;
}
.cptPersonDesc .profBox .photoArea .thumArea .thumWrap {
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
}
.cptPersonDesc .profBox .photoArea .thumArea .thumWrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.cptPersonDesc .profBox .photoArea .txtArea {
margin-top: 24px;
text-align: center;
}
.cptPersonDesc .profBox .photoArea .txtArea .name {
font-size: 2.5rem;
font-weight: 500;
color: var(--Gray-900);
display: block;
}
.cptPersonDesc .profBox .photoArea .txtArea .date {
font-size: 1rem;
font-weight: 300;
color: var(--Gray-600);
line-height: 1.6;
font-style: normal;
display: block;
}
.cptPersonDesc .profBox .photoArea .txtArea .cateGroup {
margin-top: 12px;
}
.cptPersonDesc .profBox .photoArea .txtArea .cateGroup .cate {
height: 24px;
padding: 0 8px;
border-radius: 4px;
line-height: 24px;
font-size: 0.75rem;
color: #fff;
font-weight: 600;
background: var(--Gray-500);
display: inline-block;
vertical-align: middle;
}
.cptPersonDesc .profBox .photoArea .txtArea .cateGroup .cate.blue {
background: var(--Point-Blue);
}
.cptPersonDesc .profBox .photoArea .txtArea .cateGroup .cate.mint {
background: var(--Point-Primary2);
}
.cptPersonDesc .profBox .photoArea .txtArea .cateGroup .cate.orange {
background: var(--Point-Orange);
}
.cptPersonDesc .profBox .infoArea {
flex: 0 1 auto;
}
.cptPersonDesc .profBox .infoArea .infoGroup {
display: flex;
gap: 20px 80px;
align-items: flex-start;
flex-wrap: wrap;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem {
flex: 0 0 calc(50% - 40px);
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .infoTit {
padding-bottom: 8px;
margin-bottom: 16px;
border-bottom: 1px solid var(--Gray-900);
font-size: 1.25rem;
color: var(--Gray-900);
font-weight: 700;
line-height: 1.4;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item {
margin-top: 8px;
display: flex;
position: relative;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item:first-child {
margin-top: 0;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .tit {
min-width: 125px;
font-size: 1rem;
color: var(--Gray-700);
line-height: 1.6;
font-weight: 400;
display: inline-block;
vertical-align: middle;
flex: 1 0 34%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .txt {
font-size: 1rem;
color: var(--Gray-900);
line-height: 1.6;
font-weight: 600;
font-style: normal;
display: inline-block;
vertical-align: middle;
flex: 1 1 66%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .txt.etc {
font-weight: 400;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .popIcon {
width: 20px;
height: 20px;
margin-left: 8px;
font-size: 0;
background: url(../../../images/kboat/common/ic_20_pop_open.svg) center no-repeat;
vertical-align: text-top;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item a {
text-decoration: underline;
text-underline-position: under;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full {
flex: 0 0 100%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList {
display: flex;
column-gap: 80px;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList .item {
flex: 0 0 calc(50% - 40px);
margin-top: 0;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full {
flex-direction: column;
gap: 8px 0;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item {
flex: none;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .tit {
flex: 0 calc((100% - 80px) * 0.17);
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .txt {
flex: 1;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .thumList {
flex: 1;
display: flex;
gap: 0 24px;
flex-wrap: wrap;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .thumList .thum {
width: 180px;
max-width: 100%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .thumList .thum img {
display: block;
max-width: 100%;
border-radius: 12px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .tit {
flex: 0 0 40%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .txt {
flex: 1;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .thumList {
flex: 1;
gap: 16px 0;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList.full .item .thumList .thum {
width: 100%;
}
}
.cptPersonDesc .dataPart {
margin-top: 60px;
}
.cptPersonDesc .dataPart .comTitH3 {
position: relative;
}
.cptPersonDesc .dataPart .comTitH3 .comInfoLayerPop {
left: auto;
right: 0;
}
.cptPersonDesc .digramPart {
width: 100%;
margin-top: 60px;
}
.cptPersonDesc .digramPart .comTitH2 {
margin-top: 60px;
}
.cptPersonDesc .digramPart .comTitH2:first-child {
margin-top: 0;
}
@media screen and (max-width: 1023px) {
.cptPersonDesc .profBox {
flex-wrap: wrap;
row-gap: 36px;
}
.cptPersonDesc .profBox .photoArea {
flex: 0 0 100%;
}
.cptPersonDesc .profBox .photoArea .thumArea {
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.cptPersonDesc {
margin-top: 40px;
}
.cptPersonDesc .profBox {
margin-top: 12px;
padding: 20px 24px 32px;
row-gap: 36px;
flex-wrap: wrap;
}
.cptPersonDesc .profBox .chkArea {
position: static;
}
.cptPersonDesc .profBox .photoArea {
flex: 0 0 100%;
padding-top: 10px;
}
.cptPersonDesc .profBox .photoArea .thumArea {
margin: 0 auto;
}
.cptPersonDesc .profBox .photoArea .txtArea {
margin-top: 20px;
}
.cptPersonDesc .profBox .photoArea .txtArea .name {
font-size: 1.875rem;
font-weight: 700;
}
.cptPersonDesc .profBox .infoArea {
flex: 0 1 100%;
}
.cptPersonDesc .profBox .infoArea .infoGroup {
gap: 32px;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem {
flex: 0 0 100%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .infoTit {
padding-bottom: 12px;
font-size: 1.125rem;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .tit {
min-width: 120px;
font-size: 0.9375rem;
flex: 1 0 40%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .txt {
font-size: 0.9375rem;
flex: 1 1 60%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem .dlList .item .popIcon {
margin-left: 4px;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList {
flex-wrap: wrap;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList .item {
margin-top: 8px;
flex: 0 0 100%;
}
.cptPersonDesc .profBox .infoArea .infoGroup .infoItem.full .dlList .item:first-child {
margin-top: 0;
}
.cptPersonDesc .profBox .comInfoLayerPop {
width: calc(100% + 46px);
left: -23px;
}
.cptPersonDesc .profBox .comInfoLayerPop .popWrap .popBody {
height: 225px;
}
.cptPersonDesc .dataPart {
margin-top: 40px;
}
.cptPersonDesc .digramPart {
margin-top: 40px;
}
.cptPersonDesc .digramPart .comTitH2 {
margin-top: 40px;
}
}
.cptPersonDesc.inPopup .profBox {
padding: 50px 24px 32px;
column-gap: 32px;
}
.cptPersonDesc.inPopup .profBox .chkArea {
right: 24px;
top: 20px;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup {
gap: 40px 32px;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup .infoItem {
flex: 0 0 calc(50% - 16px);
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup .infoItem .dlList .item .tit {
min-width: 120px;
font-size: 0.9375rem;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup .infoItem .dlList .item .txt {
font-size: 0.9375rem;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup .infoItem.full {
flex: 0 0 100%;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup .infoItem.full .dlList {
column-gap: 32px;
}
@media screen and (max-width: 767px) {
.cptPersonDesc.inPopup .profBox {
padding: 20px 24px 32px;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup {
gap: 32px;
}
.cptPersonDesc.inPopup .profBox .infoArea .infoGroup .infoItem {
flex: 0 0 100%;
}
}
.cptCompareData .alertArea {
width: 100%;
padding-bottom: 32px;
margin-bottom: 60px;
border-bottom: 1px solid var(--Bg-Line-line-200);
text-align: center;
}
.cptCompareData .alertArea .mView {
display: none;
}
.cptCompareData .alertArea .txt {
font-size: 1.125rem;
font-weight: 500;
color: var(--Gray-800);
line-height: 1.6;
}
.cptCompareData .alertArea .comBtnGroup {
margin-top: 12px;
}
.cptCompareData .compareBox {
margin-top: 20px;
border-radius: 16px;
background: var(--Bg-Line-bg-100);
}
.cptCompareData .compareBox .cpList {
display: flex;
padding: 40px 60px;
justify-content: space-evenly;
align-items: start;
}
.cptCompareData .compareBox .cpList .cpItem {
text-align: center;
}
.cptCompareData .compareBox .cpList .cpItem:not(:has(.thumArea)) {
display: none;
}
.cptCompareData .compareBox .cpList .cpItem .thumArea {
width: 112px;
height: 133px;
border-radius: 16px;
overflow: hidden;
}
.cptCompareData .compareBox .cpList .cpItem .thumArea img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea {
margin-top: 12px;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .name {
font-size: 1.125rem;
color: var(--Gray-900);
font-weight: 600;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .cateGroup {
margin-top: 8px;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .cateGroup .cate {
height: 24px;
padding: 0 8px;
border-radius: 4px;
line-height: 24px;
font-size: 0.75rem;
color: #fff;
font-weight: 600;
background: var(--Gray-500);
display: inline-block;
vertical-align: middle;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .cateGroup .cate.blue {
background: var(--Point-Blue);
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .cateGroup .cate.mint {
background: var(--Point-Primary2);
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .cateGroup .cate.orange {
background: var(--Point-Orange);
}
@media screen and (max-width: 767px) {
.cptCompareData .alertArea {
margin-bottom: 40px;
}
.cptCompareData .alertArea .mView {
display: block;
}
.cptCompareData .alertArea .txt {
font-size: 1rem;
font-weight: 400;
}
.cptCompareData .alertArea .comBtnGroup {
margin-top: 20px;
}
.cptCompareData .compareBox {
width: calc(100% + 32px);
border-radius: 0;
margin-left: -16px;
}
.cptCompareData .compareBox .cpList {
padding: 20px 16px;
justify-content: space-between;
column-gap: 10px;
}
.cptCompareData .compareBox .cpList .cpItem {
flex: 0 1 auto;
}
.cptCompareData .compareBox .cpList .cpItem .thumArea {
max-width: 105px;
height: 121px;
width: auto;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .name {
font-size: 1rem;
}
.cptCompareData .compareBox .cpList .cpItem .txtArea .cateGroup .cate {
height: 20px;
line-height: 20px;
}
}
.cptFullFloat {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
}
.cptFullFloat.stick {
width: 100vw;
margin-left: calc(730px - 50vw);
margin-top: 60px;
position: static;
}
.cptFullFloat.stick .floatBox {
box-shadow: none;
}
.cptFullFloat .floatBox {
width: 100%;
border-top: 1px solid var(--Bg-Line-bg-100);
background: var(--Bg-Line-bg-200);
box-shadow: 0px -5px 30px 0px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s;
}
.cptFullFloat .floatBox .contArea {
max-width: 1480px;
padding: 50px 20px;
margin: 0 auto;
}
.cptFullFloat .floatBox .contArea .floatTit {
display: flex;
align-items: flex-end;
column-gap: 12px;
}
.cptFullFloat .floatBox .contArea .floatTit h3 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
color: var(--Primary);
}
.cptFullFloat .floatBox .contArea .floatTit .desc {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--Gray-600);
}
.cptFullFloat .floatBox .contArea .floatCont {
margin-top: 32px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox {
width: 100%;
padding: 24px 60px;
border-radius: 16px;
background: var(--Bg-Line-white);
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList {
display: flex;
flex-wrap: wrap;
gap: 20px 80px;
align-items: center;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem {
display: flex;
column-gap: 8px;
align-items: center;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .name {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 600;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .cateGroup .cate {
height: 24px;
padding: 0 8px;
border-radius: 4px;
line-height: 24px;
font-size: 0.75rem;
color: #fff;
font-weight: 600;
background: var(--Gray-500);
display: inline-block;
vertical-align: middle;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .cateGroup .cate.blue {
background: var(--Point-Blue);
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .cateGroup .cate.mint {
background: #28C39E;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .cateGroup .cate.orange {
background: var(--Point-Orange);
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .deleteBtn {
width: 16px;
height: 24px;
font-size: 0;
background: url(../../../images/kboat/common/ic_12_close.svg) center no-repeat;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .btn {
flex: 0 0 auto;
}
@media screen and (max-width: 767px) {
.cptFullFloat.stick {
width: calc(100% + 32px);
margin-left: -16px;
margin-top: 40px;
}
.cptFullFloat.stick .floatBox {
box-shadow: none;
}
.cptFullFloat .floatBox {
box-shadow: 0px -3px 20px 0px rgba(0, 0, 0, 0.15);
}
.cptFullFloat .floatBox .contArea {
padding: 24px 16px 88px;
position: relative;
}
.cptFullFloat .floatBox .contArea .floatTit {
flex-wrap: wrap;
gap: 4px;
}
.cptFullFloat .floatBox .contArea .floatTit h3 {
width: 100%;
font-size: 1.25rem;
}
.cptFullFloat .floatBox .contArea .floatCont {
margin-top: 12px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox {
padding: 20px 16px;
border-radius: 12px;
flex-wrap: wrap;
row-gap: 16px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList {
gap: 12px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .name {
font-size: 0.9375rem;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .cateGroup .cate {
height: 20px;
line-height: 20px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .cpList .cpItem .deleteBtn {
height: 20px;
}
.cptFullFloat .floatBox .contArea .floatCont .cpBox .btn {
flex: 0 0 auto;
position: absolute;
width: calc(100% - 32px);
left: 16px;
bottom: 16px;
height: 56px;
}
}
/* --------------------------- 완료 안내문 --------------------------- */
.cptComplete {
width: 100%;
margin-top: 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.cptComplete.mgh {
margin-top: 80px;
}
.cptComplete .compArea {
padding-top: 116px;
background: url(../../../images/kboat/common/ic_76_complete.svg) center top no-repeat;
}
.cptComplete .compArea .title {
color: var(--Gray-900);
font-size: 1.875rem;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
.cptComplete .compArea .titleDesc {
margin-top: 12px;
color: var(--Gray-500);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
text-align: center;
}
.cptComplete .compArea .msg {
margin-top: 24px;
color: var(--Gray-700);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
text-align: center;
}
.cptComplete .compArea .msg em {
color: var(--Gray-800);
font-weight: 700;
}
@media screen and (max-width: 767px) {
.cptComplete {
margin-top: 40px;
}
.cptComplete.mgh {
margin-top: 40px;
}
.cptComplete .compArea {
padding-top: 84px;
background: url(../../../images/kboat/common/ic_76_complete.svg) center top/60px no-repeat;
}
.cptComplete .compArea .title {
font-size: 1.375rem;
font-weight: 600;
}
.cptComplete .compArea .titleDesc {
font-size: 1rem;
}
.cptComplete .compArea .msg {
font-size: 1rem;
}
}
.cptDateSelect {
margin-top: 60px;
}
.cptDateSelect:first-child {
margin-top: 0;
}
.cptDateSelect .selectBox {
padding: 32px 40px;
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-200);
background: var(--Bg-Line-bg-100);
display: flex;
column-gap: 50px;
position: relative;
}
.cptDateSelect .selectBox .frmGroup {
flex: 1 0 auto;
}
.cptDateSelect .selectBox .frmGroup select {
background-color: transparent;
}
.cptDateSelect .selectBox .calendarBtn {
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 0;
background: var(--Primary) url(../../../images/kboat/common/ic_24_calendar.svg) center no-repeat;
flex: 0 0 48px;
}
.cptDateSelect .selectBox .layerPopup {
max-width: 360px;
border-radius: 20px;
overflow: hidden;
background: #fff;
position: absolute;
right: 20px;
top: 90px;
box-shadow: 2px 4px 30px 0px rgba(0, 0, 0, 0.1);
z-index: 91;
display: none;
}
.cptDateSelect .selectBox .layerPopup.on {
display: block;
}
.cptDateSelect .selectBox .layerPopup .popHead {
padding: 16px 32px;
background: var(--Point-Primary2);
display: flex;
align-items: center;
justify-content: space-between;
}
.cptDateSelect .selectBox .layerPopup .popHead h3 {
font-size: 1.25rem;
color: #fff;
font-weight: 700;
line-height: 1.4;
}
.cptDateSelect .selectBox .layerPopup .popHead .popClose {
width: 24px;
height: 24px;
font-size: 0;
background: url(../../../images/kboat/common/ic_24_close_white.svg) center no-repeat;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting {
padding: 10px 24px;
border-bottom: 1px solid var(--Gray-200);
display: flex;
column-gap: 8px;
align-items: center;
justify-content: space-between;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .btnGroup {
display: flex;
align-items: center;
column-gap: 4px;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .btnGroup .setBtn {
width: 36px;
height: 36px;
border-radius: 6px;
border: 1px solid var(--Bg-Line-line-100);
font-size: 0;
background: url(../../../images/kboat/common/ic_12_arr_fill_g.svg) center no-repeat;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .btnGroup .setBtn.first {
background-image: url(../../../images/kboat/common/ic_12_dbArr_fill_g.svg);
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .btnGroup .setBtn.next {
transform: rotate(180deg);
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .btnGroup .setBtn.last {
background-image: url(../../../images/kboat/common/ic_12_dbArr_fill_g.svg);
transform: rotate(180deg);
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .date span {
padding: 0 8px;
font-size: 1.125rem;
color: var(--Gray-900);
display: inline-block;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.cptDateSelect {
margin-top: 20px;
}
.cptDateSelect .selectBox {
padding: 0;
border: none;
background: none;
gap: 16px 15px;
position: relative;
}
.cptDateSelect .selectBox .frmGroup {
flex: 1 0 100%;
flex-wrap: wrap;
}
.cptDateSelect .selectBox .frmGroup .frmBox:last-child {
width: calc(100% - 63px);
}
.cptDateSelect .selectBox .calendarBtn {
position: absolute;
bottom: 0;
right: 0;
}
.cptDateSelect .selectBox .layerPopup {
right: 0;
top: 120px;
z-index: 91;
}
.cptDateSelect .selectBox .layerPopup .popHead {
padding: 16px 20px;
}
.cptDateSelect .selectBox .layerPopup .popHead h3 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting {
padding: 10px 20px;
justify-content: center;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .date {
text-align: center;
}
.cptDateSelect .selectBox .layerPopup .popCont .dateSetting .date span {
font-size: 1rem;
}
}
.cptMission {
margin-top: 60px;
}
.cptMission:first-child {
margin-top: 0;
}
.cptMission .mssnGroup {
margin-top: 12px;
display: flex;
gap: 40px;
align-items: stretch;
}
.cptMission .mssnGroup:first-child {
margin-top: 0;
}
.cptMission .mssnGroup .mssnItem {
flex: 0 0 calc(33.3333% - 26.6667px);
border-radius: 12px;
border: 1px solid var(--Point-Primary2);
padding: 24px 30px 20px;
}
.cptMission .mssnGroup .mssnItem dt {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--Bg-Line-line-200);
text-align: center;
}
.cptMission .mssnGroup .mssnItem dt .num {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--Primary);
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 30px;
display: inline-block;
}
.cptMission .mssnGroup .mssnItem dt b {
margin-top: 12px;
font-size: 1.25rem;
color: var(--Primary);
font-weight: 700;
display: block;
}
.cptMission .mssnGroup .mssnItem dd {
font-size: 1rem;
color: var(--Gray-800);
word-break: keep-all;
}
@media screen and (max-width: 767px) {
.cptMission {
margin-top: 40px;
}
.cptMission .mssnGroup {
flex-wrap: wrap;
gap: 24px;
}
.cptMission .mssnGroup .mssnItem {
flex: 0 0 100%;
padding: 20px 16px 16px;
}
.cptMission .mssnGroup .mssnItem dt {
padding-bottom: 16px;
margin-bottom: 16px;
}
.cptMission .mssnGroup .mssnItem dt b {
font-size: 1.125rem;
}
.cptMission .mssnGroup .mssnItem dd {
font-size: 0.9375rem;
}
}
.cptContSlide {
margin-top: 60px;
}
.cptContSlide .slideItem {
margin-bottom: 12px;
}
.cptContSlide .slideItem:last-child {
margin-bottom: 0;
}
.cptContSlide .slideItem .contBox {
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-200);
background-color: var(--Bg-Line-bg-50);
}
.cptContSlide .slideItem .contBox .slideTit {
width: 100%;
border-bottom: none;
padding: 24px 32px;
position: relative;
text-align: left;
}
.cptContSlide .slideItem .contBox .slideTit .tit {
font-size: 1.125rem;
font-weight: 700;
color: var(--Gray-800);
}
.cptContSlide .slideItem .contBox .slideTit::after {
display: block;
content: "";
width: 24px;
height: 24px;
background: url(../../../images/kboat/common/ic_20_arw_btm_k.svg) center no-repeat;
position: absolute;
right: 32px;
top: 24px;
transition: all 0.3s;
}
.cptContSlide .slideItem .contBox .slideCont {
padding: 0 32px;
overflow: hidden;
max-height: 0;
transition: all 0.3s;
}
.cptContSlide .slideItem .contBox .slideCont .paragraph {
margin-top: 32px;
}
.cptContSlide .slideItem .contBox .slideCont .paragraph:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .basicTxt {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 700;
}
.cptContSlide .slideItem .contBox .slideCont .basicList {
margin-top: 10px;
}
.cptContSlide .slideItem .contBox .slideCont .basicList:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem {
padding-left: 11px;
margin-top: 8px;
font-size: 1rem;
color: var(--Gray-800);
position: relative;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem::after {
display: block;
content: "";
width: 3px;
height: 3px;
position: absolute;
top: 11px;
left: 0;
background: var(--Gray-400);
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem .lineTit {
font-weight: 700;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem em {
font-weight: 700;
}
.cptContSlide .slideItem .contBox .slideCont .dashList {
margin-top: 8px;
}
.cptContSlide .slideItem .contBox .slideCont .dashList:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem {
padding-left: 11px;
margin-top: 8px;
font-size: 0.875rem;
color: var(--Gray-700);
position: relative;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem::after {
display: block;
content: "";
width: 4px;
height: 1px;
position: absolute;
top: 9px;
left: 0;
background: var(--Gray-300);
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem .lineTit {
font-weight: 700;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem .sTit {
font-weight: 700;
display: block;
}
.cptContSlide .slideItem .contBox .slideCont .imgList {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: stretch;
}
.cptContSlide .slideItem .contBox .slideCont .imgList:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem {
flex: 0 0 calc(50% - 20px);
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .imgArea {
border-radius: 12px;
overflow: hidden;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .imgArea img {
width: 100%;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea {
margin-top: 5px;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea .imgTit {
margin-bottom: 10px;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea .imgTit .num {
font-size: 1.25rem;
color: var(--Gray-300);
font-weight: 600;
display: inline-block;
vertical-align: middle;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea .imgTit .txt {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
.cptContSlide .slideItem .contBox .slideCont .imgWrap {
margin-top: 12px;
}
.cptContSlide .slideItem .contBox .slideCont .imgWrap:first-child {
margin-top: 0;
}
.cptContSlide .slideItem .contBox .slideCont .imgWrap img {
max-width: 100%;
}
.cptContSlide .slideItem .contBox .slideCont .comAddGuide {
margin-top: 8px;
}
.cptContSlide .slideItem.slideOn .slideTit {
border-bottom: 1px solid var(--Bg-Line-line-200);
}
.cptContSlide .slideItem.slideOn .slideTit::after {
transform: rotate(180deg);
}
.cptContSlide .slideItem.slideOn .slideCont {
padding: 36px 32px;
max-height: 1250px;
}
@media screen and (max-width: 767px) {
.cptContSlide {
margin-top: 40px;
}
.cptContSlide .slideItem {
margin-bottom: 0;
width: calc(100% + 32px);
margin-left: -16px;
}
.cptContSlide .slideItem .contBox {
border-radius: 0;
border: none;
border-top: 1px solid var(--Bg-Line-line-200);
background: none;
}
.cptContSlide .slideItem .contBox .slideTit {
padding: 18px 38px 18px 16px;
background: #fff;
transition: background-color 0.2s;
}
.cptContSlide .slideItem .contBox .slideTit .tit {
font-size: 1rem;
}
.cptContSlide .slideItem .contBox .slideTit .mSm {
font-size: 0.875rem;
transition: font-size 0.3s;
}
.cptContSlide .slideItem .contBox .slideTit::after {
width: 20px;
height: 20px;
right: 12px;
top: 20px;
background-size: 16px;
}
.cptContSlide .slideItem .contBox .slideCont {
padding: 0px 16px;
background-color: var(--Bg-Line-bg-50);
}
.cptContSlide .slideItem .contBox .slideCont .paragraph {
margin-top: 24px;
}
.cptContSlide .slideItem .contBox .slideCont .basicTxt {
font-size: 0.9375rem;
font-weight: 600;
}
.cptContSlide .slideItem .contBox .slideCont .basicList {
margin-top: 8px;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem {
font-size: 0.9375rem;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem::after {
top: 11px;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem .lineTit {
font-weight: 600;
}
.cptContSlide .slideItem .contBox .slideCont .basicList .listItem em {
font-weight: 600;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem {
font-size: 0.8125rem;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem .lineTit {
font-weight: 600;
}
.cptContSlide .slideItem .contBox .slideCont .dashList .listItem .sTit {
font-weight: 600;
}
.cptContSlide .slideItem .contBox .slideCont .imgList {
margin-top: 8px;
gap: 24px;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem {
flex: 0 0 100%;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea {
margin-top: 12px;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea .imgTit {
margin-bottom: 8px;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea .imgTit .num {
font-size: 0.9375rem;
}
.cptContSlide .slideItem .contBox .slideCont .imgList .imgItem .txtArea .imgTit .txt {
font-size: 0.9375rem;
font-weight: 600;
}
.cptContSlide .slideItem .contBox .slideCont .imgWrap {
margin-top: 8px;
}
.cptContSlide .slideItem:last-child .contBox {
border-bottom: 1px solid var(--Bg-Line-line-200);
}
.cptContSlide .slideItem.slideOn .slideTit {
border-bottom: 1px solid var(--Bg-Line-line-200);
background-color: var(--Bg-Line-bg-50);
}
.cptContSlide .slideItem.slideOn .slideTit .mSm {
font-size: 1rem;
}
.cptContSlide .slideItem.slideOn .slideCont {
padding: 24px 16px;
max-height: 2225px;
}
}
/* ---------------------- 회원 정보 입력 폼 ---------------------- */
.layoutArea.loginBox {
background: var(--bg-line-bg-100, #F9FAFC);
}
.cptJoinTable {
width: 100%;
}
.cptJoinTable .joinArea {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding-top: 40px;
}
.cptJoinTable .joinArea .joinStep .stepGroup {
width: 100%;
display: flex;
justify-content: center;
gap: 116px;
counter-reset: section;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step {
width: 36px;
height: 70px;
padding-top: 44px;
position: relative;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step:first-child {
margin-left: 0;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step:first-child::before {
display: none;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step::after {
content: counter(section);
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--Bg-Line-line-100);
counter-increment: section;
color: var(--Gray-500);
text-align: center;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 34px;
background: #fff;
display: block;
position: absolute;
left: 0;
top: 0;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step::before {
content: "";
width: 68px;
height: 4px;
background: url(../../../images/kboat/common/ic_etc_step.svg) center no-repeat;
display: block;
position: absolute;
left: -92px;
top: 16px;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step .txt {
width: max-content;
color: var(--Gray-400, #92959A);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
display: block;
position: absolute;
left: 18px;
bottom: 0;
transform: translateX(-50%);
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.complete::after {
font-size: 0;
border: 1px solid #0EA3F6;
background: #0EA3F6 url(../../../images/kboat/common/ic_20_step.svg) center no-repeat;
opacity: 0.4;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.complete::before {
background: url(../../../images/kboat/common/ic_etc_step_on.svg) center no-repeat;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.complete .txt {
color: var(--Gray-900);
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.current::after {
color: #fff;
font-weight: 700;
border: 1px solid #0EA3F6;
background: #0EA3F6;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.current::before {
background: url(../../../images/kboat/common/ic_etc_step_on.svg) center no-repeat;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.current .txt {
color: var(--Primary);
font-weight: 700;
}
.cptJoinTable .joinArea .joinStep + .membershipTitle, .cptJoinTable .joinArea .joinStep + .registrationTitle {
margin-top: 104px;
}
.cptJoinTable .joinArea .joinTitle {
width: 100%;
margin-top: 60px;
padding-bottom: 12px;
border-bottom: 1px solid var(--Gray-900);
}
.cptJoinTable .joinArea .joinTitle:first-child {
margin-top: 0;
}
.cptJoinTable .joinArea .joinTitle h2 {
color: var(--Gray-900);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
}
.cptJoinTable .joinArea .tbBox {
width: 100%;
margin-top: 40px;
}
.cptJoinTable .joinArea .tbBox:first-child {
margin-top: 0;
}
.cptJoinTable .joinArea .tbBox .tbTitle {
width: 100%;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
}
.cptJoinTable .joinArea .tbBox .tbCont {
width: 100%;
margin-top: 8px;
}
.cptJoinTable .joinArea .tbBox .tbCont .frmGroup .frmBox .iptText {
height: 56px;
}
.cptJoinTable .joinArea .tbBox .tbCont .frmGroup .frmBox .btnReset {
top: 16px;
}
.cptJoinTable .joinArea .required {
margin-left: 5px;
color: var(--Point-Red);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
}
.cptJoinTable .joinArea .alignCenter {
text-align: center;
}
.cptJoinTable .joinArea br.mView {
display: none;
}
.cptJoinTable .joinArea .comBtnGroup {
margin-top: 60px;
}
.cptJoinTable .joinArea .comJoinBtmText .item:not(:first-child) {
margin-top: 12px;
}
.cptJoinTable .joinArea .bulletTitle.flexCenter {
display: flex;
justify-content: center;
}
.cptJoinTable .joinArea .bulletTitle h3 {
color: var(--Gray-900, #111);
font-size: 1rem;
font-weight: 500;
line-height: 160%; /* 25.6px */
}
.cptJoinTable .joinArea .bulletTitle h3 span {
display: inline-block;
border-bottom: 1px solid var(--Gray-300, #B0B2B7);
}
.cptJoinTable .joinArea .bulletTitle h3.bullet {
position: relative;
padding-left: 30px;
}
.cptJoinTable .joinArea .bulletTitle h3.bullet:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: url("../../../images/kboat/common/ico_etc_info.svg") no-repeat 0 2px;
background-size: 20px;
}
.cptJoinTable .joinArea .bulletTitle > p {
color: var(--Primary, #078B7B);
font-size: 0.875rem;
font-weight: 400;
line-height: 160%; /* 22.4px */
}
.cptJoinTable .joinArea .bulletTitle > p span {
display: inline-block;
position: relative;
padding-left: 20px;
}
.cptJoinTable .joinArea .bulletTitle > p span:after {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 16px;
height: 16px;
background: url("../../../images/kboat/common/ic_16_info.svg") no-repeat;
background-size: 16px;
}
.cptJoinTable .joinArea .certifyGroup .comBtnGroup + .bulletTitle {
margin-top: 32px;
}
.cptJoinTable .joinArea .certifyTitle.color h2 {
color: var(--Primary, #078B7B);
font-weight: 700;
}
.cptJoinTable .joinArea .certifyTitle h2 {
color: var(--Gray-900, #111);
font-size: 1.5rem;
font-weight: 500;
line-height: 140%; /* 33.6px */
}
.cptJoinTable .joinArea .certifyTitle + .certifyResult {
margin-top: 20px;
}
.cptJoinTable .joinArea .certifyResult {
padding: 40px;
border-radius: 16px;
background: var(--Bg-Line-bg-100, #F9FAFC);
}
.cptJoinTable .joinArea .certifyResult .comBasicList .item:not(:first-child), .cptJoinTable .joinArea .certifyResult .cptEtcInfo .infoBox .info dd .infoList .item:not(:first-child), .cptEtcInfo .infoBox .info dd .cptJoinTable .joinArea .certifyResult .infoList .item:not(:first-child), .cptJoinTable .joinArea .certifyResult .cptDescList .thumList .thumItem .descArea dd .item:not(:first-child), .cptDescList .thumList .thumItem .descArea .cptJoinTable .joinArea .certifyResult dd .item:not(:first-child), .cptJoinTable .joinArea .certifyResult .cptImgGuideBox .boxArea .viewArea .dotList .item:not(:first-child), .cptImgGuideBox .boxArea .viewArea .cptJoinTable .joinArea .certifyResult .dotList .item:not(:first-child) {
margin-top: 12px;
}
.cptJoinTable .joinArea .certifyResult + .comBtnGroup {
margin: 60px 0;
}
.cptJoinTable .joinArea .certifyResult + .comBtnGroup .btnBox .btn {
min-width: 136px;
padding: 0;
}
.cptJoinTable .joinArea .membershipTitle h2 {
color: var(--Gray-900, #111);
font-size: 1.875rem;
font-weight: 500;
line-height: 140%; /* 42px */
}
.cptJoinTable .joinArea .membershipTitle h3 {
margin-top: 20px;
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptJoinTable .joinArea .membershipTitle h3 + .bulletTitle {
margin-top: 8px;
}
.cptJoinTable .joinArea .registrationTitle h2 {
color: var(--Gray-800, #2C2C2C);
font-size: 2rem;
font-weight: 300;
line-height: 160%; /* 51.2px */
}
.cptJoinTable .joinArea .registrationTitle h2 strong {
font-weight: 700;
}
.cptJoinTable .joinArea .registrationTitle h3 {
margin-top: 32px;
color: var(--Gray-800, #2C2C2C);
font-size: 1.125rem;
font-weight: 400;
line-height: 160%; /* 28.8px */
}
.cptJoinTable .joinArea .registrationTitle h3 strong {
color: var(--Primary, #078B7B);
font-weight: 600;
}
.cptJoinTable .joinArea .registrationTitle + .comBtnGroup + .linkBoxGroup {
margin-top: 100px;
}
.cptJoinTable .joinArea .linkBoxGroup {
display: flex;
padding: 32px 0px;
flex-direction: column;
align-items: center;
gap: 32px;
border-radius: 16px;
border: 1px solid #E1E4EA;
background: var(--Bg-Line-white, #FFF);
}
.cptJoinTable .joinArea .linkBoxGroup > p {
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptJoinTable .joinArea .linkBoxGroup > a {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
height: 42px;
position: relative;
color: var(--Gray-900, #111);
font-size: 1.125rem;
font-weight: 700;
line-height: 160%; /* 28.8px */
}
.cptJoinTable .joinArea .linkBoxGroup > a img {
position: relative;
top: 5px;
flex-shrink: 0;
height: 62px;
}
.cptJoinTable .joinArea .linkBoxGroup > a span {
position: relative;
padding-right: 26px;
}
.cptJoinTable .joinArea .linkBoxGroup > a span:after {
content: "";
position: absolute;
top: 5px;
right: 0;
width: 16px;
height: 16px;
background: url("../../../images/kboat/common/ic_16_arr_right_g.svg") no-repeat;
background-size: 100%;
}
@media screen and (max-width: 767px) {
.cptJoinTable .joinArea {
padding: 20px 0 0;
}
.cptJoinTable .joinArea .joinStep .stepGroup {
gap: 60px;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step {
width: 32px;
height: 66px;
padding-top: 40px;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step:first-child {
margin-left: 0;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step:first-child::before {
display: none;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step::after {
width: 32px;
height: 32px;
font-size: 1rem;
line-height: 32px;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step::before {
content: "";
width: 24px;
height: 4px;
background: url(../../../images/kboat/common/ic_etc_step_m.svg) center no-repeat;
display: block;
position: absolute;
left: -42px;
top: 16px;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step .txt {
display: none;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.complete::before {
background: url(../../../images/kboat/common/ic_etc_step_on_m.svg) center no-repeat;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.complete .txt {
display: none;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.current::before {
background: url(../../../images/kboat/common/ic_etc_step_on_m.svg) center no-repeat;
}
.cptJoinTable .joinArea .joinStep .stepGroup .step.current .txt {
display: block;
}
.cptJoinTable .joinArea .joinStep + .membershipTitle {
margin-top: 60px;
}
.cptJoinTable .joinArea .joinStep + .registrationTitle {
margin-top: 40px;
}
.cptJoinTable .joinArea .joinTitle h2 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.cptJoinTable .joinArea .joinTitle + .tbBox {
margin-top: 32px;
}
.cptJoinTable .joinArea .tbBox {
margin-top: 24px;
}
.cptJoinTable .joinArea .tbBox:first-child {
margin-top: 0;
}
.cptJoinTable .joinArea .tbBox .tbTitle {
font-weight: 600;
line-height: 1.6;
}
.cptJoinTable .joinArea .tbBox + .comPrivacyBox, .cptJoinTable .joinArea .tbBox + .comJoinBtmText {
margin-top: 40px;
}
.cptJoinTable .joinArea br.mView {
display: block;
}
.cptJoinTable .joinArea .comBtnGroup {
margin-top: 40px;
}
.cptJoinTable .joinArea .certifyResult {
padding: 40px 16px;
}
.cptJoinTable .joinArea .certifyResult + .comBtnGroup {
margin: 40px 0;
}
.cptJoinTable .joinArea .registrationTitle h2 {
font-size: 1.5rem;
}
.cptJoinTable .joinArea .registrationTitle h3 {
font-size: 1rem;
}
.cptJoinTable .joinArea .membershipTitle h2 {
font-size: 1.375rem;
font-weight: 600;
}
.cptJoinTable .joinArea .registrationTitle + .comBtnGroup + .linkBoxGroup {
margin-top: 60px;
}
.cptJoinTable .joinArea .linkBoxGroup {
gap: 24px;
}
.cptJoinTable .joinArea .linkBoxGroup > p {
text-align: center;
font-size: 0.9375rem;
}
.cptJoinTable .joinArea .linkBoxGroup > a {
gap: 6px;
}
.cptJoinTable .joinArea .linkBoxGroup > a img {
position: relative;
top: 5px;
flex-shrink: 0;
height: 62px;
}
.cptJoinTable .joinArea .linkBoxGroup > a span {
position: relative;
padding-right: 26px;
}
}
/* ---------------------- 고객광장 - 안내사항 ---------------------- */
.cptGuideLine .guideLineInfoBox {
margin-top: 8px;
}
.cptGuideLine .guideLineInfoBox .comBoardInfoBox {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.cptGuideLine .comBoardInfoBox {
border: 0 none;
}
}
.cptGuideLine + .cptQuickMove {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.cptGuideLine + .cptQuickMove {
margin-left: 16px;
margin-right: 16px;
}
}
/* ---------------------- 고객광장 - 이용안내 ---------------------- */
.cptAnnounce .announceInfoBox {
margin-top: 20px;
display: flex;
padding: 40px 0px;
align-items: center;
border-radius: 16px;
background: var(--bg-line-bg-100, #F9FAFC);
}
.cptAnnounce .announceInfoBox > div {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.cptAnnounce .announceInfoBox > div > dl {
color: var(--font-800, #2C2C2C);
font-size: 1.125rem;
font-weight: 400;
line-height: 160%;
}
.cptAnnounce .announceInfoBox > div > dl dt {
position: relative;
padding-left: 62px;
color: var(--Primary, #078B7B);
font-size: 1.75rem;
font-weight: 600;
line-height: 46px;
}
.cptAnnounce .announceInfoBox > div > dl dd {
margin-top: 24px;
text-align: center;
}
.cptAnnounce .announceInfoBox > div > dl dd ul > li + li {
margin-top: 4px;
}
.cptAnnounce .announceInfoBox > div > dl dd ul > li em {
margin-right: 4px;
font-weight: 600;
}
.cptAnnounce .announceInfoBox > div + div {
position: relative;
}
.cptAnnounce .announceInfoBox > div + div:after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 1px;
height: 62px;
background: var(--Gray-200, #CED1D6);
}
.cptAnnounce .announceInfoBox > div.callCenter dt {
background: url("../../../images/kboat/common/ic_46_call_center.svg") no-repeat 0 0;
}
.cptAnnounce .announceInfoBox > div.operatingHour dt {
background: url("../../../images/kboat/common/ic_46_operating_hour.svg") no-repeat 0 0;
}
@media screen and (max-width: 767px) {
.cptAnnounce .announceInfoBox {
display: block;
padding: 32px 40px;
}
.cptAnnounce .announceInfoBox > div {
display: block;
}
.cptAnnounce .announceInfoBox > div + div {
margin-top: 32px;
padding-top: 33px;
border-top: 1px solid var(--Gray-200, #CED1D6);
}
.cptAnnounce .announceInfoBox > div + div:after {
display: none;
}
.cptAnnounce .announceInfoBox > div > dl dd {
text-align: left;
}
}
/* ---------------------- 고객광장 - 고객의 소리 운영정책 ---------------------- */
.cptPrivacy .privacyProcessing {
margin-top: 40px;
}
.cptPrivacy .privacyProcessing .processingList {
display: flex;
align-items: center;
gap: 12px;
}
.cptPrivacy .privacyProcessing .processingList > li {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
height: 78px;
padding: 12px 0 12px 42px;
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
line-height: 160%;
background: url("../../../images/kboat/contents/cont07_04_001.svg") no-repeat;
background-size: 100% 100%;
}
.cptPrivacy .privacyProcessing .processingList > li > div {
display: flex;
align-items: center;
gap: 12px;
}
.cptPrivacy .privacyProcessing .processingList > li > div em {
background-color: #fff;
border-radius: 20px;
padding: 4px 10px;
font-size: 0.875rem;
font-weight: 700;
color: var(--Point-Primary2);
line-height: normal;
}
.cptPrivacy .privacyProcessing .processingList > li > div span {
font-weight: 600;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(1) {
padding-left: 32px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) {
background-image: url("../../../images/kboat/contents/cont07_04_002.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) div em {
color: #40C4DA;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(3) {
background-image: url("../../../images/kboat/contents/cont07_04_003.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(3) div em {
color: #2EAAFA;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(4) {
background-image: url("../../../images/kboat/contents/cont07_04_004.svg");
background-size: 100% 81px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(4) div em {
color: var(--Point-Primary3);
}
.cptPrivacy .privacyProcessing > .comContTable {
margin-top: 40px;
}
.cptPrivacy .privacyProcessing > .comContTable .basic + .comBasicTxt {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.cptPrivacy .comTitH2 {
margin-top: 40px;
}
.cptPrivacy .privacyProcessing .processingList {
flex-direction: column;
gap: 0;
}
.cptPrivacy .privacyProcessing .processingList > li {
width: 100%;
min-height: 93px;
height: auto;
justify-content: normal;
padding: 22px 0 0 60px;
background-image: url("../../../images/kboat/contents/cont07_04_001_m.svg");
background-position: 0 0;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(1) {
padding-left: 60px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) {
height: 84px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) {
padding-top: 26px;
background-image: url("../../../images/kboat/contents/cont07_04_002_m.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(3) {
padding-top: 26px;
background-image: url("../../../images/kboat/contents/cont07_04_003_m.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(4) {
padding-top: 28px;
background-image: url("../../../images/kboat/contents/cont07_04_004_m.svg");
background-size: 100% 100%;
}
.cptPrivacy .privacyProcessing .processingList > li > p {
margin-top: 4px;
}
}
/* ---------------------- 고객광장 - 신고센터 ---------------------- */
.cptReportingCenter .comTitH2 {
margin-top: 60px;
}
.cptReportingCenter .reportingCenterList {
margin-top: 12px;
}
.cptReportingCenter .reportingCenterList > ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 40px;
}
.cptReportingCenter .reportingCenterList > ul > li {
padding: 32px;
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-100, #E1E4EA);
background: #FFF;
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea h3 {
color: var(--Gray-800, #2C2C2C);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea h3 span {
font-size: 0.875rem;
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea p {
min-height: 48px;
margin-top: 10px;
color: var(--Gray-700, #414347);
font-size: 0.9375rem;
font-weight: 400;
line-height: 160%; /* 24px */
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea {
margin-top: 24px;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn {
padding: 0 20px;
min-width: 211px;
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn + a.btn {
margin-top: 8px;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn:after {
content: "";
display: inline-block;
vertical-align: text-bottom;
width: 20px;
height: 20px;
margin-left: 4px;
background: url("../../../images/kboat/common/ic_16_arr_right_g.svg") center no-repeat;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn.Primary:after {
background-image: url("../../../images/kboat/common/ic_16_arr_right_w.svg");
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn span {
flex: 1;
}
.cptReportingCenter .reportingCenterList .comBasicTxt p b {
color: var(--Primary);
}
@media screen and (max-width: 1023px) {
.cptReportingCenter .reportingCenterList > ul {
display: flex;
flex-direction: column;
gap: 40px;
}
}
@media screen and (max-width: 767px) {
.cptReportingCenter .comTitH2 {
margin-top: 40px;
}
.cptReportingCenter .reportingCenterList > ul {
display: flex;
flex-direction: column;
gap: 24px;
}
.cptReportingCenter .reportingCenterList > ul > li {
padding: 24px;
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea p {
min-height: auto;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn {
height: 36px;
}
}
/* ---------------------- 고객광장 - 신고접수제도 이용안내 ---------------------- */
.cptReportingSystem .comTitH3 {
margin-top: 40px;
}
.cptReportingSystem .comTitH3 + .reportingSystemList {
margin-top: 12px;
}
.cptReportingSystem .reportingSystemList > ol {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 60px 80px;
border-radius: 16px;
border: 1px solid var(--Bg-Line-line-200, #EDEDED);
background: #FFF;
position: relative;
}
.cptReportingSystem .reportingSystemList > ol > li {
display: flex;
gap: 24px;
position: relative;
}
.cptReportingSystem .reportingSystemList > ol > li:not(:last-child) {
padding-bottom: 44px;
}
.cptReportingSystem .reportingSystemList > ol > li:first-child > em span:after {
content: "";
position: absolute;
top: -400px;
left: 0;
width: 100%;
height: 400px;
background: #fff;
}
.cptReportingSystem .reportingSystemList > ol > li:last-child > em span:after {
content: "";
position: absolute;
top: 22px;
left: 0;
width: 100%;
height: 400px;
background: #fff;
}
.cptReportingSystem .reportingSystemList > ol > li > em {
position: relative;
flex-shrink: 0;
width: 42px;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--Point-Primary2);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
}
.cptReportingSystem .reportingSystemList > ol > li > em span {
position: relative;
display: block;
z-index: 10;
background: #fff;
}
.cptReportingSystem .reportingSystemList > ol > li > em span:before {
content: "";
position: absolute;
top: 5px;
right: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--Point-Primary2);
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup {
flex: 1;
display: flex;
align-items: center;
gap: 40px;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > p {
width: 240px;
display: flex;
flex-direction: column;
justify-content: center;
height: 72px;
color: var(--font-900, #111);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > p span {
display: block;
color: var(--font-800, #2C2C2C);
font-size: 1rem;
font-weight: 500;
line-height: 160%; /* 25.6px */
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div {
flex: 1;
display: flex;
align-items: center;
min-height: 72px;
padding: 16px 24px;
border-radius: 12px;
background: var(--bg-line-bg-200, #F3F5F8);
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div p {
color: var(--font-700, #414347);
font-size: 0.9375rem;
font-weight: 400;
line-height: 160%; /* 24px */
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .comBasicList .item, .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .cptEtcInfo .infoBox .info dd .infoList .item, .cptEtcInfo .infoBox .info dd .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .infoList .item, .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .cptDescList .thumList .thumItem .descArea dd .item, .cptDescList .thumList .thumItem .descArea .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div dd .item, .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .cptImgGuideBox .boxArea .viewArea .dotList .item, .cptImgGuideBox .boxArea .viewArea .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .dotList .item {
margin-top: 0;
}
.cptReportingSystem .reportingSystemList > ol:before {
content: "";
position: absolute;
top: 0;
left: 116px;
width: 1px;
height: 100%;
background: var(--Gray-200, #CED1D6);
}
.cptReportingSystem .reportingForm {
margin-top: 40px;
border-radius: 12px;
border: 1px solid var(--bg-line-line-100, #E1E4EA);
background: var(--bg-line-bg-50, #FBFBFB);
}
.cptReportingSystem .reportingForm .formTitle {
padding: 24px 32px;
border-bottom: 1px solid var(--bg-line-line-200, #EDEDED);
}
.cptReportingSystem .reportingForm .formTitle h4 {
color: var(--font-800, #2C2C2C);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 22.4px */
}
.cptReportingSystem .reportingForm .formList {
padding: 36px 32px;
}
.cptReportingSystem .reportingForm .formList > ul {
display: flex;
align-items: center;
gap: 32px;
}
.cptReportingSystem .reportingForm .formList > ul > li {
flex: 1;
background: var(--bg-line-bg-300, #EDF0F5);
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
min-height: 114px;
}
.cptReportingSystem .reportingForm .formList > ul > li > p {
color: var(--Primary);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.cptReportingSystem .reportingForm + .cptQuickMove, .cptReportingSystem .reportingForm + .cptQuickMove + .comBasicTxt {
margin-top: 40px;
}
@media screen and (max-width: 1023px) {
.cptReportingSystem .reportingForm .formList > ul {
display: block;
}
.cptReportingSystem .reportingForm .formList > ul > li + li {
margin-top: 32px;
}
}
@media screen and (max-width: 767px) {
.cptReportingSystem .reportingSystemList > ol {
padding: 40px 24px;
}
.cptReportingSystem .reportingSystemList > ol:before {
left: 60px;
}
.cptReportingSystem .reportingSystemList > ol > li {
gap: 20px;
}
.cptReportingSystem .reportingSystemList > ol > li > em {
margin-top: 2px;
justify-content: normal;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup {
display: block;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > p {
height: auto;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div {
margin-top: 4px;
padding: 12px 16px;
}
.cptReportingSystem .reportingForm {
margin-top: 24px;
width: calc(100% + 32px);
margin-left: -16px;
border-radius: 0;
border-left: 0 none;
border-right: 0 none;
border-bottom: 0 none;
}
.cptReportingSystem .reportingForm .formTitle {
padding: 18px 16px;
}
.cptReportingSystem .reportingForm .formTitle h4 {
font-size: 1rem;
}
.cptReportingSystem .reportingForm .formList {
padding: 24px 16px;
}
.cptReportingSystem .reportingForm .formList > ul {
display: block;
}
.cptReportingSystem .reportingForm .formList > ul > li + li {
margin-top: 24px;
}
.cptReportingSystem .reportingForm + .cptQuickMove {
margin-top: 24px;
}
.cptReportingSystem .reportingForm + .cptQuickMove + .comBasicTxt {
margin-top: 24px;
}
}
/* ---------------------- 고객광장 - 신고접수안내 ---------------------- */
.cptReportingReceipt .receiptList {
margin-top: 40px;
}
.cptReportingReceipt .receiptList > ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px;
}
.cptReportingReceipt .receiptList + .cptQuickMove {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.cptReportingReceipt .receiptList {
margin-top: 24px;
}
.cptReportingReceipt .receiptList > ul {
grid-template-columns: repeat(1, 1fr);
grid-gap: 24px;
}
}
.cptContBi {
width: 100%;
margin-top: 60px;
}
.cptContBi .BiInfo {
margin-top: 20px;
}
.cptContBi .biBox .biImg {
position: relative;
height: 403px;
background: url(../../../images/kboat/contents/cont06_02_bg2.svg) no-repeat center/cover;
display: flex;
align-items: center;
justify-content: center;
}
.cptContBi .biDownLoad {
margin-top: 20px;
text-align: center;
}
.cptContBi .biDownLoad .btn::before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
vertical-align: text-top;
margin-right: 4px;
background: url(../../../images/kboat/common/ic_20_file_download.svg);
}
.cptContBi .LogoSignInfo {
margin-top: 32px;
}
.cptContBi .LogoSignInfo .inbox {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 40px;
}
.cptContBi .LogoSignInfo .inbox .w50 {
width: calc(50% - 20px);
}
.cptContBi .LogoSignInfo .inbox .w50 .downWrap {
margin-top: 12px;
}
.cptContBi .LogoSignInfo .inbox .w50 .downWrap .img {
border-radius: 16px;
border: 1px solid var(--Bg-Line-line-200);
background-color: #FFF;
background-position: center;
background-repeat: no-repeat;
height: 280px;
}
.cptContBi .LogoSignInfo .inbox .w50.logo .img {
background-image: url(../../../images/kboat/contents/cont06_03_01.png);
}
.cptContBi .LogoSignInfo .inbox .w50.sign .img {
background-image: url(../../../images/kboat/contents/cont06_03_02.png);
}
@media screen and (max-width: 767px) {
.cptContBi {
margin-top: 40px;
}
.cptContBi .BiInfo {
margin-top: 16px;
}
.cptContBi .biBox .biImg {
height: 200px;
}
.cptContBi .biBox .biImg .i2 {
height: 116px;
}
.cptContBi .biDownLoad {
margin-top: 16px;
}
.cptContBi .LogoSignInfo {
margin-top: 24px;
}
.cptContBi .LogoSignInfo .inbox {
gap: 24px;
}
.cptContBi .LogoSignInfo .inbox .w50 {
width: 100%;
}
.cptContBi .LogoSignInfo .inbox .w50 .downWrap .img {
height: 200px;
}
.cptContBi .LogoSignInfo .inbox .w50.logo .img {
background-size: 186px;
}
.cptContBi .LogoSignInfo .inbox .w50.sign .img {
background-size: 266px;
}
}
.cptContHistory .contArea {
display: flex;
}
.cptContHistory .contArea .yearNum {
color: var(--Point-Primary2);
font-size: 3.125rem;
font-weight: 600;
width: 240px;
line-height: 0.8;
}
.cptContHistory .contArea .yearCont {
flex: 1;
}
.cptContHistory .contArea .yearCont .yearList {
padding-bottom: 32px;
display: flex;
position: relative;
}
.cptContHistory .contArea .yearCont .yearList::before {
content: "";
position: absolute;
top: 25px;
left: 12px;
bottom: 0;
width: 1px;
background: #ced1d6;
}
.cptContHistory .contArea .yearCont .yearList:last-child {
padding-bottom: 0;
}
.cptContHistory .contArea .yearCont .yearList .month {
color: var(--Gray-900);
font-size: 1.125rem;
font-weight: 700;
padding: 0 40px;
position: relative;
line-height: 1.4;
}
.cptContHistory .contArea .yearCont .yearList .month::before {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #ced1d6;
box-sizing: border-box;
z-index: 1;
}
.cptContHistory .contArea .yearCont .yearList .month::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%;
background: #d4f3ec;
box-sizing: border-box;
opacity: 0;
animation: big 1s ease-in-out infinite;
}
@keyframes big {
from {
transform: scale(0.5);
}
to {
transform: scale(1);
}
}
.cptContHistory .contArea .yearCont .yearList .monthCont {
flex: 1;
}
.cptContHistory .contArea .yearCont .yearList .monthCont p {
color: var(--font-800);
font-size: 1rem;
line-height: 1.6;
margin-top: 8px;
word-break: keep-all;
}
.cptContHistory .contArea .yearCont .yearList .monthCont p:first-child {
margin-top: 0;
}
.cptContHistory .contArea .yearCont .yearList .monthCont .more {
color: var(--Primary);
font-size: 0.875rem;
margin-top: 8px;
border-bottom: 1px solid var(--Primary);
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.cptContHistory .contArea .yearCont .yearList .monthCont .rowB {
display: none;
margin-top: 8px;
}
.cptContHistory .contArea .yearCont .yearList .monthCont .rowB.open {
display: block;
}
.cptContHistory .contArea .yearCont .yearList.on .month::before {
background: var(--Point-Primary2);
}
.cptContHistory .contArea .yearCont .yearList.on .month::after {
opacity: 1;
}
@media screen and (max-width: 767px) {
.cptContHistory .contArea {
display: block;
}
.cptContHistory .contArea .yearNum {
font-size: 1.75rem;
font-weight: 600;
width: auto;
line-height: 1.3;
padding-bottom: 24px;
position: relative;
}
.cptContHistory .contArea .yearNum::after {
content: "";
position: absolute;
left: 10px;
bottom: 0;
height: 30px;
width: 1px;
background: #ced1d6;
}
.cptContHistory .contArea .yearCont {
flex: 1;
}
.cptContHistory .contArea .yearCont .yearList {
padding-bottom: 24px;
display: block;
}
.cptContHistory .contArea .yearCont .yearList::before {
top: 21px;
left: 10px;
}
.cptContHistory .contArea .yearCont .yearList:last-child:before {
display: none;
}
.cptContHistory .contArea .yearCont .yearList .month {
font-size: 1rem;
padding: 0 28px;
}
.cptContHistory .contArea .yearCont .yearList .month::before {
content: "";
top: 7px;
left: 7px;
width: 7px;
height: 7px;
}
.cptContHistory .contArea .yearCont .yearList .month::after {
content: "";
top: 0;
left: 0;
width: 21px;
height: 21px;
}
.cptContHistory .contArea .yearCont .yearList .monthCont {
padding-top: 12px;
padding-left: 28px;
}
.cptContHistory .contArea .yearCont .yearList .monthCont p {
font-size: 0.9375rem;
}
.cptContHistory .contArea .yearCont .yearList .monthCont .more {
font-size: 0.875rem;
margin-top: 8px;
}
}
.cptContPrevention {
width: 100%;
margin-top: 60px;
}
.cptContPrevention .prevntBox {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.cptContPrevention .prevntBox .item {
position: relative;
width: calc(50% - 20px);
}
.cptContPrevention .prevntBox .item::before {
content: "";
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 50%;
border-radius: 16px 16px 25px 25px;
background-image: linear-gradient(to right, rgb(70, 195, 183), rgb(63, 144, 221));
background-origin: border-box;
background-clip: content-box, border-box;
}
.cptContPrevention .prevntBox .item a {
display: block;
padding: 40px 40px;
height: 100%;
background: #FFF;
border-radius: 16px;
border: 1px solid var(--Bg-Line-line-100);
position: relative;
z-index: 1;
}
.cptContPrevention .prevntBox .item a:hover {
background: linear-gradient(90deg, #EEFAF9 -0.24%, #EDF5FD 99.92%);
}
.cptContPrevention .prevntBox .item a:hover .lk {
color: var(--Primary);
}
.cptContPrevention .prevntBox .item a:hover .lk::after {
background: url(../../../images/kboat/common/ic_12_arr_right_p.svg) no-repeat center;
}
.cptContPrevention .prevntBox .item dl dt {
color: var(--font-800);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 10px;
}
.cptContPrevention .prevntBox .item dl dd {
color: var(--font-700);
font-size: 0.9375rem;
line-height: 1.6;
word-break: keep-all;
}
.cptContPrevention .prevntBox .item dl dd .lk {
display: block;
margin-top: 20px;
font-size: 0.875rem;
line-height: 2;
position: relative;
}
.cptContPrevention .prevntBox .item dl dd .lk::after {
content: "";
display: inline-block;
vertical-align: text-top;
background: url(../../../images/kboat/common/ic_12_arr_right_g.svg) no-repeat center;
width: 16px;
height: 16px;
margin-left: 2px;
}
.cptContPrevention .rightBtn {
text-align: right;
margin-top: 24px;
}
.cptContPrevention .rightBtn .btn::after {
display: inline-block;
content: "";
vertical-align: text-top;
width: 20px;
height: 20px;
margin-left: 4px;
background: url(../../../images/kboat/common/ic_16_arr_right_w.svg) center no-repeat;
}
@media screen and (max-width: 767px) {
.cptContPrevention {
margin-top: 40px;
}
.cptContPrevention .prevntBox {
gap: 20px;
}
.cptContPrevention .prevntBox .item {
width: 100%;
}
.cptContPrevention .prevntBox .item a {
padding: 32px 24px;
}
.cptContPrevention .prevntBox .item a dt {
font-size: 1.125rem;
margin-bottom: 6px;
}
.cptContPrevention .prevntBox .item a dd {
font-size: 0.875rem;
}
.cptContPrevention .prevntBox .item a dd .lk {
margin-top: 16px;
}
}
.cptContSelfTest {
margin-top: 60px;
}
.cptContSelfTest .testContSelect {
border-top: 2px solid var(--Gray-900);
display: flex;
align-items: center;
flex-wrap: wrap;
}
.cptContSelfTest .testContSelect .tit {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 700;
line-height: 1.4;
width: 200px;
}
.cptContSelfTest .testContSelect .cont {
flex: 1;
height: 48px;
display: flex;
align-items: center;
}
.cptContSelfTest .testContSelect .wd100,
.cptContSelfTest .testContSelect .wd50 {
width: 50%;
display: flex;
align-items: center;
border-bottom: 1px solid var(--Bg-Line-line-100);
padding: 16px 32px;
}
.cptContSelfTest .testContSelect .wd100 {
width: 100%;
}
.cptContSelfTest .testContInfoT {
margin-top: 60px;
}
.cptContSelfTest .testContTbl {
margin-top: 20px;
border-top: 2px solid var(--Gray-900);
}
.cptContSelfTest .testCont {
padding: 16px 24px;
height: 80px;
border-bottom: 1px solid var(--Bg-Line-line-100);
display: flex;
align-items: center;
justify-content: space-between;
}
.cptContSelfTest .testCont .subject {
display: flex;
align-items: center;
color: var(--Gray-800);
flex: 1;
padding-right: 30px;
}
.cptContSelfTest .testCont .subject .num {
width: 28px;
height: 28px;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
}
.cptContSelfTest .testCont .subject .txt {
font-size: 1rem;
line-height: 1.6;
margin-left: 20px;
max-width: 654px;
}
.cptContSelfTest .testCont .clickBox {
width: 510px;
}
.cptContSelfTest .testCont .clickBox ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cptContSelfTest .testCont .clickBox ul li {
height: 48px;
}
.cptContSelfTest .testCont .clickBox ul li input[type=radio] {
display: block;
}
.cptContSelfTest .testCont .clickBox ul li label {
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.5;
width: 120px;
height: 48px;
background: var(--Bg-Line-white);
border: 1px solid var(--Gray-200);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
}
.cptContSelfTest .testCont .clickBox ul li label::before {
content: "";
width: 20px;
height: 20px;
background: url(../../../images/kboat/common/ic_20_check_mini.svg) center no-repeat;
display: block;
margin-right: 8px;
}
.cptContSelfTest .testCont .clickBox ul li input[type=radio]:checked + label {
border: 1px solid var(--Primary);
background: #EEF9FD;
font-weight: 600;
color: var(--Gray-900);
}
.cptContSelfTest .testCont .clickBox ul li input[type=radio]:checked + label::before {
background: url(../../../images/kboat/common/ic_20_check_mini_on.svg) center no-repeat;
}
.cptContSelfTest .testCont.bg {
background: var(--Gray-50);
}
.cptContSelfTest .reFresh {
width: 110px;
padding: 0;
}
.cptContSelfTest .reFresh::before {
content: "";
display: inline-block;
vertical-align: middle;
margin-top: -3px;
width: 24px;
height: 24px;
margin-right: 8px;
background: url(../../../images/kboat/common/ic_24_refresh.svg) center no-repeat;
}
@media screen and (max-width: 1280px) {
.cptContSelfTest .testContSelect .wd50 {
width: 100%;
}
.cptContSelfTest .testCont {
padding: 16px 16px;
height: auto;
flex-direction: column;
}
.cptContSelfTest .testCont .subject {
justify-content: left;
width: 100%;
}
.cptContSelfTest .testCont .clickBox {
width: 100%;
margin-top: 14px;
}
.cptContSelfTest .testCont .clickBox ul li {
width: calc(25% - 8px);
}
.cptContSelfTest .testCont .clickBox ul li label {
width: 100%;
font-size: 0.9375rem;
}
.cptContSelfTest .comBtnGroup.section {
padding: 0 16px;
}
}
@media screen and (max-width: 767px) {
.cptContSelfTest {
margin-top: 40px;
}
.cptContSelfTest .testContSelect {
padding-top: 32px;
}
.cptContSelfTest .testContSelect .wd50,
.cptContSelfTest .testContSelect .wd100 {
padding: 16px 0;
flex-wrap: wrap;
border-bottom: 0;
}
.cptContSelfTest .testContSelect .wd50 .tit,
.cptContSelfTest .testContSelect .wd100 .tit {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 12px;
width: 100%;
}
.cptContSelfTest .testContSelect .wd50 .cont,
.cptContSelfTest .testContSelect .wd100 .cont {
flex: none;
width: 100%;
}
.cptContSelfTest .testContSelect .frmGroup {
width: 100%;
}
.cptContSelfTest .testContTbl {
margin-left: -16px;
margin-right: -16px;
}
.cptContSelfTest .testContInfoT {
margin-top: 40px;
}
.cptContSelfTest .testCont {
padding: 16px 16px;
height: auto;
flex-direction: column;
}
.cptContSelfTest .testCont .subject {
padding-right: 0;
}
.cptContSelfTest .testCont .subject .num {
font-size: 1.125rem;
}
.cptContSelfTest .testCont .subject .txt {
font-size: 0.9375rem;
margin-left: 10px;
flex: 1;
}
.cptContSelfTest .testCont .clickBox {
width: 100%;
margin-top: 14px;
}
.cptContSelfTest .testCont .clickBox ul li {
width: calc(50% - 5px);
}
.cptContSelfTest .testCont .clickBox ul li label {
width: 100%;
font-size: 0.9375rem;
}
}
.cptPopSelfTestResult .rowA {
text-align: center;
}
.cptPopSelfTestResult .rowA .txtTit {
font-size: 1.5rem;
color: var(--Grey-900);
font-weight: 700;
line-height: 1.4;
word-break: keep-all;
}
.cptPopSelfTestResult .rowA .ic {
width: 60PX;
height: 60px;
margin: 0 auto 16px;
background: url(../../../images/kboat/common/ic_76_complete.svg) no-repeat center/100%;
}
.cptPopSelfTestResult .rowA .totalCnt {
color: var(--Primary);
}
.cptPopSelfTestResult .rowB {
margin-top: 32px;
padding: 24px 20px;
text-align: center;
border-radius: 16px;
background: var(--Bg-Line-bg-200);
}
.cptPopSelfTestResult .rowB .txtRst {
font-size: 1.25rem;
color: var(--Secondary);
font-weight: 700;
line-height: 1.6;
}
.cptPopSelfTestResult .rowB .txtRstInfo {
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
margin-top: 8px;
}
.cptPopSelfTestResult .rowB .txtRstInfo .blk {
display: block;
}
.cptPopSelfTestResult .rowB .comAddGuide {
margin-top: 8px;
}
.cptPopSelfTestResult .rowB .comAddGuide .guide {
display: table;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.cptPopSelfTestResult {
padding-top: 20px;
}
.cptPopSelfTestResult .rowA .txtTit {
font-size: 1.25rem;
}
.cptPopSelfTestResult .rowB {
margin-top: 28px;
}
.cptPopSelfTestResult .rowB .txtRst {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.cptPopSelfTestResult .rowB .txtRstInfo {
font-size: 0.9375rem;
color: var(--Gray-800);
line-height: 1.6;
}
.cptPopSelfTestResult .rowB .txtRstInfo .blk {
display: inline-block;
}
}
.cptContProgram {
width: 100%;
margin-top: 60px;
}
.cptContProgram .prevntBox {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 32px;
}
.cptContProgram .prevntBox .item {
position: relative;
width: calc(50% - 20px);
}
.cptContProgram .prevntBox .item::before {
content: "";
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 50%;
border-radius: 16px 16px 25px 25px;
background-image: linear-gradient(to right, rgb(70, 195, 183), rgb(63, 144, 221));
background-origin: border-box;
background-clip: content-box, border-box;
}
.cptContProgram .prevntBox .item a {
display: block;
padding: 44px 40px 36px;
height: 100%;
background: #FFF;
border-radius: 16px;
border: 1px solid var(--Bg-Line-line-100);
position: relative;
z-index: 1;
}
.cptContProgram .prevntBox .item a .prevtPrgm .tit {
color: var(--font-800);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 10px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont {
display: flex;
align-items: center;
min-height: 90px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .txt {
color: var(--font-700);
font-size: 0.9375rem;
line-height: 1.6;
flex: 1;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .ic {
width: 80px;
height: 80px;
margin-left: 40px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon1 {
background: url(../../../images/kboat/contents/cont26_06_icon1.svg) no-repeat center/67px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon2 {
background: url(../../../images/kboat/contents/cont26_06_icon2.svg) no-repeat center/77px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon3 {
background: url(../../../images/kboat/contents/cont26_06_icon3.svg) no-repeat center/77px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon4 {
background: url(../../../images/kboat/contents/cont26_06_icon4.svg) no-repeat center/100%;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon5 {
background: url(../../../images/kboat/contents/cont26_06_icon5.svg) no-repeat center/100%;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon6 {
background: url(../../../images/kboat/contents/cont26_06_icon6.svg) no-repeat center/100%;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon7 {
background: url(../../../images/kboat/contents/cont26_06_icon7.svg) no-repeat center/100%;
}
.cptContProgram .prevntBox .item a .prevtPrgm .lk {
display: block;
margin-top: 20px;
font-size: 0.875rem;
line-height: 2;
position: relative;
}
.cptContProgram .prevntBox .item a .prevtPrgm .lk::after {
content: "";
display: inline-block;
vertical-align: text-top;
background: url(../../../images/kboat/common/ic_12_arr_right_g.svg) no-repeat center;
width: 16px;
height: 16px;
margin-left: 2px;
}
.cptContProgram .prevntBox .item a:hover {
background: linear-gradient(90deg, #EEFAF9 -0.24%, #EDF5FD 99.92%);
}
.cptContProgram .prevntBox .item a:hover .lk {
color: var(--Primary);
}
.cptContProgram .prevntBox .item a:hover .lk::after {
background: url(../../../images/kboat/common/ic_12_arr_right_p.svg) no-repeat center;
}
.cptContProgram .programSd_wrap {
overflow: hidden;
margin: 0 -90px;
padding: 0 90px;
position: relative;
}
.cptContProgram .programSd_wrap .programArr {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid var(--Bg-Line-line-100);
margin-top: -30px;
background: url(../../../images/kboat/common/ic_24_down_arr.svg) no-repeat center #FFF;
}
.cptContProgram .programSd_wrap .programArr::after {
display: none;
}
.cptContProgram .programSd_wrap .programArr.swiper-button-prev {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.cptContProgram .programSd_wrap .programArr.swiper-button-next {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.cptContProgram .programSd {
position: relative;
overflow: hidden;
padding-top: 4px;
}
.cptContProgram .programSd .swiper-slide .item {
width: 100%;
}
@media screen and (max-width: 1280px) {
.cptContProgram .programSd_wrap {
margin: 0 -16px 0 0;
padding: 0 0;
}
.cptContProgram .programSd_wrap .programArr {
display: none;
}
.cptContProgram .programSd_wrap .programSd .swiper-slide {
width: 700px;
}
}
@media screen and (max-width: 767px) {
.cptContProgram {
margin-top: 40px;
}
.cptContProgram .prevntBox {
gap: 20px;
margin-top: 16px;
}
.cptContProgram .prevntBox .item {
width: 100%;
}
.cptContProgram .prevntBox .item a {
padding: 24px 24px;
}
.cptContProgram .prevntBox .item a .prevtPrgm {
position: relative;
padding-top: 40px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .tit {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 6px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont {
display: flex;
align-items: center;
min-height: auto;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .txt {
font-size: 0.875rem;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .ic {
width: 30px;
height: 30px;
margin-left: 0;
position: absolute;
top: 0;
left: 0;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon1 {
background: url(../../../images/kboat/contents/cont26_06_icon1.svg) no-repeat center/25px;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon2 {
background: url(../../../images/kboat/contents/cont26_06_icon2.svg) no-repeat center/100%;
}
.cptContProgram .prevntBox .item a .prevtPrgm .cont .icon3 {
background: url(../../../images/kboat/contents/cont26_06_icon3.svg) no-repeat center/100%;
}
.cptContProgram .prevntBox .item a .prevtPrgm .lk {
margin-top: 16px;
font-size: 0.8125rem;
}
.cptContProgram .programSd_wrap .programSd .swiper-slide {
width: 280px;
height: auto;
}
.cptContProgram .programSd_wrap .programSd .swiper-slide .item {
height: 100%;
}
.cptContProgram .programSd_wrap .programSd .swiper-slide .item .prevtPrgm {
height: 100%;
padding-bottom: 35px;
}
.cptContProgram .programSd_wrap .programSd .swiper-slide .item .prevtPrgm .lk {
position: absolute;
left: 0;
bottom: 0;
margin-top: 0;
}
}
.cptContPrgmView {
width: 100%;
margin-top: 60px;
}
.cptContPrgmView .subViewTit {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.cptContPrgmView .subViewTit .ic {
width: 80px;
height: 80px;
margin-right: 30px;
border-radius: 12px;
background: linear-gradient(134deg, #E2FFF7 4%, #D6ECFF 91.52%);
position: relative;
}
.cptContPrgmView .subViewTit .ic:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 44px;
}
.cptContPrgmView .subViewTit .icon1::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon1.svg);
background-size: 41px;
}
.cptContPrgmView .subViewTit .icon2::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon2.svg);
}
.cptContPrgmView .subViewTit .icon3::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon3.svg);
}
.cptContPrgmView .subViewTit .icon4::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon4.svg);
}
.cptContPrgmView .subViewTit .icon5::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon5.svg);
}
.cptContPrgmView .subViewTit .icon6::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon6.svg);
}
.cptContPrgmView .subViewTit .icon7::before {
background-image: url(../../../images/kboat/contents/cont26_06_icon7.svg);
}
.cptContPrgmView .subViewTit .txt {
flex: 1;
}
.cptContPrgmView .subCont {
margin-top: 60px;
padding-bottom: 60px;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptContPrgmView .subCont .rowList {
display: flex;
padding-bottom: 60px;
position: relative;
}
.cptContPrgmView .subCont .rowList:last-child {
padding-bottom: 0;
}
.cptContPrgmView .subCont .rowList::before {
content: "";
position: absolute;
top: 18px;
left: 20px;
bottom: 0;
width: 2px;
background: url(../../../images/kboat/contents/cont26_06_dashed.svg);
}
.cptContPrgmView .subCont .rowList .num {
border-radius: 32px;
border: 4px solid var(--Bg-Line-white);
background: var(--Point-Primary2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: var(--Bg-Line-white);
width: 44px;
height: 44px;
position: relative;
z-index: 1;
}
.cptContPrgmView .subCont .rowList .contBox {
flex: 1;
margin-left: 20px;
}
.cptContPrgmView .subCont .rowList .contBox .comTitH2 {
height: 44px;
}
.cptContPrgmView .subCont .rowList .contBox .comBasicTxt {
margin-top: 0;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont {
margin-top: 20px;
gap: 20px;
display: flex;
flex-wrap: wrap;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 {
border-radius: 12px;
background: var(--Bg-Line-bg-100);
width: calc(50% - 10px);
padding: 20px 30px;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .smTit {
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
color: var(--Primary);
margin-bottom: 8px;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .comBasicList .item, .cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .cptEtcInfo .infoBox .info dd .infoList .item, .cptEtcInfo .infoBox .info dd .cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .infoList .item, .cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .cptDescList .thumList .thumItem .descArea dd .item, .cptDescList .thumList .thumItem .descArea .cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 dd .item, .cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .cptImgGuideBox .boxArea .viewArea .dotList .item, .cptImgGuideBox .boxArea .viewArea .cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .dotList .item {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.cptContPrgmView {
margin-top: 40px;
}
.cptContPrgmView .subViewTit .ic {
width: 50px;
height: 50px;
margin-right: 0;
margin-bottom: 12px;
}
.cptContPrgmView .subViewTit .txt {
flex: none;
width: 100%;
}
.cptContPrgmView .subCont {
margin-top: 40px;
padding-bottom: 40px;
}
.cptContPrgmView .subCont .rowList {
padding-bottom: 24px;
}
.cptContPrgmView .subCont .rowList::before {
left: 18px;
}
.cptContPrgmView .subCont .rowList .num {
width: 40px;
height: 40px;
font-size: 0.9375rem;
}
.cptContPrgmView .subCont .rowList .contBox {
margin-left: 10px;
}
.cptContPrgmView .subCont .rowList .contBox .comTitH2 {
height: 40px;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont {
margin-top: 12px;
gap: 12px;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 {
width: 100%;
padding: 16px 20px;
}
.cptContPrgmView .subCont .rowList .contBox .halfCont .wd50 .smTit {
font-size: 0.9375rem;
font-weight: 600;
}
}
.cptContCounsel {
width: 100%;
margin-top: 60px;
}
.cptContCounsel .cptArea {
display: flex;
flex-wrap: wrap;
}
.cptContCounsel .cptArea .itemList {
width: 20%;
}
.cptContCounsel .cptArea .itemList .rowA {
text-align: center;
}
.cptContCounsel .cptArea .itemList .rowA .ic {
width: 50px;
height: 50px;
margin: 0 auto;
}
.cptContCounsel .cptArea .itemList .rowA .icon1 {
background: url(../../../images/kboat/contents/cont26_07_01_icon1.svg) no-repeat center;
}
.cptContCounsel .cptArea .itemList .rowA .icon2 {
background: url(../../../images/kboat/contents/cont26_07_01_icon2.svg) no-repeat center;
}
.cptContCounsel .cptArea .itemList .rowA .icon3 {
background: url(../../../images/kboat/contents/cont26_07_01_icon3.svg) no-repeat center;
}
.cptContCounsel .cptArea .itemList .rowA .icon4 {
background: url(../../../images/kboat/contents/cont26_07_01_icon4.svg) no-repeat center;
}
.cptContCounsel .cptArea .itemList .rowA .icon5 {
background: url(../../../images/kboat/contents/cont26_07_01_icon5.svg) no-repeat center;
}
.cptContCounsel .cptArea .itemList .rowA .txt {
margin-top: 10px;
}
.cptContCounsel .cptArea .itemList .rowA .txt .m1 {
font-size: 0.875rem;
font-weight: 600;
color: var(--Point-Primary2);
line-height: 1.6;
}
.cptContCounsel .cptArea .itemList .rowA .txt .m2 {
font-size: 1.125rem;
font-weight: 700;
color: var(--Gray-800);
line-height: 1.4;
}
.cptContCounsel .cptArea .itemList .line {
margin: 16px 0;
position: relative;
text-align: center;
}
.cptContCounsel .cptArea .itemList .line::before {
content: "";
position: absolute;
top: 8px;
left: 0;
right: 0;
height: 2px;
background: url(../../../images/kboat/contents/cont26_07_01_dashed.svg);
}
.cptContCounsel .cptArea .itemList .line span {
width: 18px;
height: 18px;
border: 4px solid var(--Point-Primary2);
background: #FFF;
border-radius: 50%;
display: block;
margin: 0 auto;
position: relative;
}
.cptContCounsel .cptArea .itemList .rowB {
padding: 10px 20px 0;
height: calc(100% - 167px);
}
.cptContCounsel .cptArea .itemList .rowB .in {
padding: 20px 20px;
border-radius: 12px;
background: var(--Bg-Line-bg-200);
position: relative;
height: 100%;
}
.cptContCounsel .cptArea .itemList .rowB .in::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 8px 10px 8px;
border-color: transparent transparent var(--Bg-Line-bg-200) transparent;
}
.cptContCounsel .cptArea .itemList .rowB .in .item {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.cptContCounsel {
margin-top: 40px;
}
.cptContCounsel .cptArea {
display: flex;
flex-wrap: wrap;
}
.cptContCounsel .cptArea .itemList {
width: 100%;
position: relative;
padding-bottom: 40px;
}
.cptContCounsel .cptArea .itemList:last-child {
padding-bottom: 0;
}
.cptContCounsel .cptArea .itemList::before {
content: "";
position: absolute;
top: 25px;
left: 8px;
bottom: -25px;
width: 2px;
background: url(../../../images/kboat/contents/cont06_06_dashed.svg);
}
.cptContCounsel .cptArea .itemList:last-child::before {
bottom: 0;
}
.cptContCounsel .cptArea .itemList .rowA {
text-align: left;
padding-left: 46px;
display: flex;
align-items: center;
}
.cptContCounsel .cptArea .itemList .rowA .ic {
margin: 0 0;
}
.cptContCounsel .cptArea .itemList .rowA .txt {
margin-top: 0;
margin-left: 10px;
}
.cptContCounsel .cptArea .itemList .rowA .txt .m1 {
font-size: 0.8125rem;
}
.cptContCounsel .cptArea .itemList .rowA .txt .m2 {
font-size: 1rem;
}
.cptContCounsel .cptArea .itemList .line {
position: absolute;
top: 0;
left: 0;
}
.cptContCounsel .cptArea .itemList .line::before {
display: none;
}
.cptContCounsel .cptArea .itemList .rowB {
padding: 0;
padding-left: 46px;
height: auto;
margin-top: 14px;
}
.cptContCounsel .cptArea .itemList .rowB .in {
padding: 12px 14px;
border-radius: 12px;
}
.cptContCounsel .cptArea .itemList .rowB .in::before {
display: none;
}
}
.cptDataSum {
position: relative;
margin-top: 60px;
}
.cptDataSum .dataSum {
padding: 24px 20px;
border-radius: 12px;
border: 2px solid var(--Gray-900);
}
.cptDataSum .dataSum > .inner {
display: flex;
gap: 20px;
}
.cptDataSum .dataSum > .inner > li {
position: relative;
flex: 1;
text-align: center;
}
.cptDataSum .dataSum > .inner > li::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 1px;
height: calc(100% - 12px);
max-height: 40px;
background-color: var(--Gray-300);
transform: translateY(-50%);
}
.cptDataSum .dataSum > .inner > li:first-child::before {
display: none;
}
.cptDataSum .dataSum .item {
display: inline-block;
color: var(--Gray-600);
font-size: 0.9375rem;
line-height: 1.4;
}
.cptDataSum .dataSum .item .popIcon {
position: relative;
top: -2px;
}
.cptDataSum .dataSum .val {
display: inline-block;
margin-left: 15px;
color: var(--Gray-900);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
}
.cptDataSum .dataSum .val .unit {
font-size: 0.9375rem;
font-style: normal;
}
.cptDataSum .dataSum div.val {
display: block;
margin-left: 0;
margin-top: 6px;
}
.cptDataSum .dataSum .icon {
width: 40px;
height: 40px;
margin: 0 auto 8px;
}
.cptDataSum .dataSum .icon img {
vertical-align: top;
}
.cptDataSum .dataSum .icon .mView {
display: none;
}
@media screen and (max-width: 1023px) {
.cptDataSum .dataSum.tbRow .inner {
flex-wrap: wrap;
gap: 12px;
}
.cptDataSum .dataSum.tbRow .inner > li {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.cptDataSum .dataSum.tbRow .inner > li::before {
content: none;
}
.cptDataSum .dataSum.tbRow .inner .val {
margin-top: 0;
}
.cptDataSum .dataSum.tbRow .inner .icon {
display: none;
}
}
@media screen and (max-width: 767px) {
.cptDataSum .dataSum .inner {
gap: 12px;
}
.cptDataSum .dataSum .inner > li::before {
left: -6px;
}
.cptDataSum .dataSum .inner > li span.val {
display: block;
margin-left: 0;
margin-top: 6px;
}
.cptDataSum .dataSum.mRow .inner {
flex-wrap: wrap;
}
.cptDataSum .dataSum.mRow .inner > li {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.cptDataSum .dataSum.mRow .inner > li::before {
content: none;
}
.cptDataSum .dataSum.mRow .inner .item {
margin-right: auto;
}
.cptDataSum .dataSum.mRow .inner .val {
margin-top: 0;
}
.cptDataSum .dataSum.mRow .inner .icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0 8px 0 0;
}
.cptDataSum .dataSum.mRow .inner .icon .pcView {
display: none;
}
.cptDataSum .dataSum.mRow .inner .icon .mView {
display: block;
line-height: 1;
}
}
.cptDataSum .dataSum.totalSum {
display: flex;
gap: 80px;
}
.cptDataSum .dataSum.totalSum .total {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(33.3333% - 40px);
min-width: 290px;
padding: 12px;
background-color: var(--Bg-Line-bg-200);
border-radius: 6px;
}
.cptDataSum .dataSum.totalSum > .inner {
flex: 1;
flex-wrap: wrap;
gap: 16px 80px;
margin-right: 40px;
}
.cptDataSum .dataSum.totalSum > .inner > li {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: calc(50% - 40px);
}
.cptDataSum .dataSum.totalSum > .inner > li::before {
content: none;
}
.cptDataSum .dataSum.totalSum > .inner > li .val {
margin-left: auto;
}
@media screen and (max-width: 1280px) {
.cptDataSum .dataSum.totalSum {
gap: 40px;
}
.cptDataSum .dataSum.totalSum > .inner {
flex-wrap: wrap;
gap: 12px;
margin-right: 20px;
}
.cptDataSum .dataSum.totalSum > .inner > li {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.cptDataSum .dataSum.totalSum > .inner > li::before {
content: none;
}
}
@media screen and (max-width: 767px) {
.cptDataSum .dataSum.totalSum {
flex-wrap: wrap;
gap: 16px 0;
}
.cptDataSum .dataSum.totalSum .total {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 20px 12px;
}
.cptDataSum .dataSum.totalSum .total .val {
margin-top: 0;
margin-left: auto;
}
.cptDataSum .dataSum.totalSum > .inner {
margin: 0 12px;
}
}
.cptDataSum .comTitH2 + .dataSum {
margin-top: 20px;
}
.cptDataSum .addInfo {
display: flex;
justify-content: space-between;
margin-top: 15px;
color: var(--Gray-500);
}
.cptDataSum .addInfo .alignR {
margin-left: auto;
}
.cptDataSum .btnRefresh {
min-width: 24px;
height: 20px;
padding-left: 20px;
color: unset;
font-size: 0.875rem;
background: url(../../../images/kboat/common/icon_20_refresh.svg) no-repeat center left;
}
.cptDataSum[class*=bg] .dataSum {
border-color: transparent;
}
.cptDataSum[class*=bg] .dataSum .item {
color: var(--Gray-900);
}
.cptDataSum[class*=bg] .dataSum .val .unit {
font-size: unset;
}
.cptDataSum[class*=bg] .addInfo {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
@media screen and (max-width: 767px) {
.cptDataSum[class*=bg] .addInfo {
position: static;
}
}
.cptDataSum.bg01 .dataSum {
background-color: var(--Bg-Line-bg-100);
}
.cptDataSum.bg01 .dataSum .inner > li::before {
background-color: #eaecf1;
}
@media screen and (max-width: 767px) {
.cptDataSum {
margin-top: 40px;
}
}
.cptDataList {
position: relative;
margin-top: 60px;
}
.cptDataList .dataListBox {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.cptDataList .dataListBox > li {
position: relative;
width: calc(50% - 10px);
}
.cptDataList .dataListBox > li > .block {
position: relative;
display: flex;
flex-wrap: wrap;
column-gap: 20px;
min-height: 100%;
justify-content: space-between;
padding: 20px;
border-radius: 12px;
background: var(--Bg-Line-bg-100);
}
.cptDataList .dataListBox .cate {
width: 100%;
margin-bottom: 8px;
color: var(--Primary);
font-size: 1rem;
font-weight: 600;
}
.cptDataList .dataListBox .tit {
flex: 1;
color: var(--Gray-800);
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptDataList .dataListBox .tit.full {
flex: none;
width: 100%;
font-size: 1.125rem;
font-weight: 500;
}
.cptDataList .dataListBox .tit.full ~ .date {
margin-top: 4px;
}
.cptDataList .dataListBox .date {
flex: 0;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 400;
white-space: nowrap;
}
.cptDataList .dataListBox .val {
width: 100%;
margin-top: 15px;
font-size: 1.125rem;
font-weight: 700;
text-align: right;
}
.cptDataList .dataListBox .val .state {
margin-right: 3px;
color: var(--Gray-500);
font-size: 0.875rem;
font-weight: 500;
}
.cptDataList .dataListBox .val .unit {
font-size: 0.9375rem;
font-style: normal;
}
.cptDataList .dataListBox .new {
position: absolute;
top: 20px;
right: 20px;
width: 7px;
height: 7px;
background: url(../../../images/kboat/common/ico_6_app_new.svg) no-repeat top right;
background-size: 7px;
text-indent: -999999px;
overflow: hidden;
z-index: 1;
}
.cptDataList .dataListBox .finished .cate,
.cptDataList .dataListBox .finished .date {
color: var(--Gray-300);
}
.cptDataList .dataListBox .finished .tit {
color: var(--Gray-400);
}
.cptDataList .dataListBox.col3 > li {
width: calc(33.3333% - 13.3333px);
}
.cptDataList .dataListBox.col3 > li:last-child {
width: calc(33.3334% - 13.3334px);
}
@media screen and (max-width: 767px) {
.cptDataList .dataListBox > li {
width: 100%;
}
.cptDataList .dataListBox[class*=col] > li {
width: 100% !important;
}
}
.cptDataList .comTabData {
flex-wrap: wrap;
}
.cptDataList .comTabData .right {
flex: 1;
text-align: right;
}
.cptDataList .comTabData + .dataListBox,
.cptDataList .comTabData + .comNoneData {
margin-top: 32px;
}
.cptDataList .txtS {
font-size: 0.875rem;
color: var(--Gray-600);
line-height: 1.6;
}
.cptDataList .addInfo {
position: absolute;
left: 0;
bottom: 100%;
display: flex;
justify-content: flex-end;
width: 100%;
margin-bottom: 8px;
}
.cptDataList .addInfo .txtS {
margin-left: auto;
}
@media screen and (max-width: 767px) {
.cptDataList {
margin-top: 40px;
}
.cptDataList .addInfo {
position: static;
}
.cptDataList .comTabData .right {
flex: none;
text-align: left;
}
.cptDataList .comTabData + .dataListBox,
.cptDataList .comTabData + .comNoneData {
margin-top: 8px;
}
}
/* ---------------------- 고객광장 - 고객의 소리 운영정책 ---------------------- */
.cptPrivacy .privacyProcessing {
margin-top: 40px;
}
.cptPrivacy .privacyProcessing .processingList {
display: flex;
align-items: center;
gap: 12px;
}
.cptPrivacy .privacyProcessing .processingList > li {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
height: 78px;
padding: 12px 0 12px 42px;
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
line-height: 160%;
background: url("../../../images/kboat/contents/cont07_04_001.svg") no-repeat;
background-size: 100% 100%;
}
.cptPrivacy .privacyProcessing .processingList > li > div {
display: flex;
align-items: center;
gap: 12px;
}
.cptPrivacy .privacyProcessing .processingList > li > div em {
background-color: #fff;
border-radius: 20px;
padding: 4px 10px;
font-size: 0.875rem;
font-weight: 700;
color: var(--Point-Primary2);
line-height: normal;
}
.cptPrivacy .privacyProcessing .processingList > li > div span {
font-weight: 600;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(1) {
padding-left: 32px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) {
background-image: url("../../../images/kboat/contents/cont07_04_002.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) div em {
color: #40C4DA;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(3) {
background-image: url("../../../images/kboat/contents/cont07_04_003.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(3) div em {
color: #2EAAFA;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(4) {
background-image: url("../../../images/kboat/contents/cont07_04_004.svg");
background-size: 100% 81px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(4) div em {
color: var(--Point-Primary3);
}
.cptPrivacy .privacyProcessing > .comContTable {
margin-top: 40px;
}
.cptPrivacy .privacyProcessing > .comContTable .basic + .comBasicTxt {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.cptPrivacy .comTitH2 {
margin-top: 40px;
}
.cptPrivacy .privacyProcessing .processingList {
flex-direction: column;
gap: 0;
}
.cptPrivacy .privacyProcessing .processingList > li {
width: 100%;
min-height: 93px;
height: auto;
justify-content: normal;
padding: 22px 0 0 60px;
background-image: url("../../../images/kboat/contents/cont07_04_001_m.svg");
background-position: 0 0;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(1) {
padding-left: 60px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) {
height: 84px;
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(2) {
padding-top: 26px;
background-image: url("../../../images/kboat/contents/cont07_04_002_m.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(3) {
padding-top: 26px;
background-image: url("../../../images/kboat/contents/cont07_04_003_m.svg");
}
.cptPrivacy .privacyProcessing .processingList > li:nth-child(4) {
padding-top: 28px;
background-image: url("../../../images/kboat/contents/cont07_04_004_m.svg");
background-size: 100% 100%;
}
.cptPrivacy .privacyProcessing .processingList > li > p {
margin-top: 4px;
}
}
/* ---------------------- 고객광장 - 신고센터 ---------------------- */
.cptReportingCenter .comTitH2 {
margin-top: 60px;
}
.cptReportingCenter .reportingCenterList {
margin-top: 12px;
}
.cptReportingCenter .reportingCenterList > ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 40px;
}
.cptReportingCenter .reportingCenterList > ul > li {
padding: 32px;
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-100, #E1E4EA);
background: #FFF;
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea h3 {
color: var(--Gray-800, #2C2C2C);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea h3 span {
font-size: 0.875rem;
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea p {
min-height: 48px;
margin-top: 10px;
color: var(--Gray-700, #414347);
font-size: 0.9375rem;
font-weight: 400;
line-height: 160%; /* 24px */
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea {
margin-top: 24px;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn {
padding: 0 20px;
min-width: 211px;
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn + a.btn {
margin-top: 8px;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn:after {
content: "";
display: inline-block;
vertical-align: text-bottom;
width: 20px;
height: 20px;
margin-left: 4px;
background: url("../../../images/kboat/common/ic_16_arr_right_g.svg") center no-repeat;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn.Primary:after {
background-image: url("../../../images/kboat/common/ic_16_arr_right_w.svg");
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn span {
flex: 1;
}
.cptReportingCenter .reportingCenterList .comBasicTxt p b {
color: var(--Primary);
}
@media screen and (max-width: 1023px) {
.cptReportingCenter .reportingCenterList > ul {
display: flex;
flex-direction: column;
gap: 40px;
}
}
@media screen and (max-width: 767px) {
.cptReportingCenter .comTitH2 {
margin-top: 40px;
}
.cptReportingCenter .reportingCenterList > ul {
display: flex;
flex-direction: column;
gap: 24px;
}
.cptReportingCenter .reportingCenterList > ul > li {
padding: 24px;
}
.cptReportingCenter .reportingCenterList > ul > li .titleArea p {
min-height: auto;
}
.cptReportingCenter .reportingCenterList > ul > li .btnArea a.btn {
height: 36px;
}
}
/* ---------------------- 고객광장 - 신고접수제도 이용안내 ---------------------- */
.cptReportingSystem .comTitH3 {
margin-top: 40px;
}
.cptReportingSystem .comTitH3 + .reportingSystemList {
margin-top: 12px;
}
.cptReportingSystem .reportingSystemList > ol {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 60px 80px;
border-radius: 16px;
border: 1px solid var(--Bg-Line-line-200, #EDEDED);
background: #FFF;
position: relative;
}
.cptReportingSystem .reportingSystemList > ol > li {
display: flex;
gap: 24px;
position: relative;
}
.cptReportingSystem .reportingSystemList > ol > li:not(:last-child) {
padding-bottom: 44px;
}
.cptReportingSystem .reportingSystemList > ol > li:first-child > em span:after {
content: "";
position: absolute;
top: -400px;
left: 0;
width: 100%;
height: 400px;
background: #fff;
}
.cptReportingSystem .reportingSystemList > ol > li:last-child > em span:after {
content: "";
position: absolute;
top: 22px;
left: 0;
width: 100%;
height: 400px;
background: #fff;
}
.cptReportingSystem .reportingSystemList > ol > li > em {
position: relative;
flex-shrink: 0;
width: 42px;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--Point-Primary2);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
}
.cptReportingSystem .reportingSystemList > ol > li > em span {
position: relative;
display: block;
z-index: 10;
background: #fff;
}
.cptReportingSystem .reportingSystemList > ol > li > em span:before {
content: "";
position: absolute;
top: 5px;
right: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--Point-Primary2);
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup {
flex: 1;
display: flex;
align-items: center;
gap: 40px;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > p {
width: 240px;
display: flex;
flex-direction: column;
justify-content: center;
height: 72px;
color: var(--font-900, #111);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > p span {
display: block;
color: var(--font-800, #2C2C2C);
font-size: 1rem;
font-weight: 500;
line-height: 160%; /* 25.6px */
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div {
flex: 1;
display: flex;
align-items: center;
min-height: 72px;
padding: 16px 24px;
border-radius: 12px;
background: var(--bg-line-bg-200, #F3F5F8);
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div p {
color: var(--font-700, #414347);
font-size: 0.9375rem;
font-weight: 400;
line-height: 160%; /* 24px */
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .comBasicList .item, .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .cptEtcInfo .infoBox .info dd .infoList .item, .cptEtcInfo .infoBox .info dd .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .infoList .item, .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .cptDescList .thumList .thumItem .descArea dd .item, .cptDescList .thumList .thumItem .descArea .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div dd .item, .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .cptImgGuideBox .boxArea .viewArea .dotList .item, .cptImgGuideBox .boxArea .viewArea .cptReportingSystem .reportingSystemList > ol > li .systemGroup > div .dotList .item {
margin-top: 0;
}
.cptReportingSystem .reportingSystemList > ol:before {
content: "";
position: absolute;
top: 0;
left: 116px;
width: 1px;
height: 100%;
background: var(--Gray-200, #CED1D6);
}
.cptReportingSystem .reportingForm {
margin-top: 40px;
border-radius: 12px;
border: 1px solid var(--bg-line-line-100, #E1E4EA);
background: var(--bg-line-bg-50, #FBFBFB);
}
.cptReportingSystem .reportingForm .formTitle {
padding: 24px 32px;
border-bottom: 1px solid var(--bg-line-line-200, #EDEDED);
}
.cptReportingSystem .reportingForm .formTitle h4 {
color: var(--font-800, #2C2C2C);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 22.4px */
}
.cptReportingSystem .reportingForm .formList {
padding: 36px 32px;
}
.cptReportingSystem .reportingForm .formList > ul {
display: flex;
align-items: center;
gap: 32px;
}
.cptReportingSystem .reportingForm .formList > ul > li {
flex: 1;
background: var(--bg-line-bg-300, #EDF0F5);
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
min-height: 114px;
}
.cptReportingSystem .reportingForm .formList > ul > li > p {
color: var(--Primary);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.cptReportingSystem .reportingForm + .cptQuickMove, .cptReportingSystem .reportingForm + .cptQuickMove + .comBasicTxt {
margin-top: 40px;
}
@media screen and (max-width: 1023px) {
.cptReportingSystem .reportingForm .formList > ul {
display: block;
}
.cptReportingSystem .reportingForm .formList > ul > li + li {
margin-top: 32px;
}
}
@media screen and (max-width: 767px) {
.cptReportingSystem .reportingSystemList > ol {
padding: 40px 24px;
}
.cptReportingSystem .reportingSystemList > ol:before {
left: 60px;
}
.cptReportingSystem .reportingSystemList > ol > li {
gap: 20px;
}
.cptReportingSystem .reportingSystemList > ol > li > em {
margin-top: 2px;
justify-content: normal;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup {
display: block;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > p {
height: auto;
}
.cptReportingSystem .reportingSystemList > ol > li .systemGroup > div {
margin-top: 4px;
padding: 12px 16px;
}
.cptReportingSystem .reportingForm {
margin-top: 24px;
width: calc(100% + 32px);
margin-left: -16px;
border-radius: 0;
border-left: 0 none;
border-right: 0 none;
border-bottom: 0 none;
}
.cptReportingSystem .reportingForm .formTitle {
padding: 18px 16px;
}
.cptReportingSystem .reportingForm .formTitle h4 {
font-size: 1rem;
}
.cptReportingSystem .reportingForm .formList {
padding: 24px 16px;
}
.cptReportingSystem .reportingForm .formList > ul {
display: block;
}
.cptReportingSystem .reportingForm .formList > ul > li + li {
margin-top: 24px;
}
.cptReportingSystem .reportingForm + .cptQuickMove {
margin-top: 24px;
}
.cptReportingSystem .reportingForm + .cptQuickMove + .comBasicTxt {
margin-top: 24px;
}
}
/* ---------------------- 고객광장 - 신고접수안내 ---------------------- */
.cptReportingReceipt .receiptList {
margin-top: 40px;
}
.cptReportingReceipt .receiptList > ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px;
}
.cptReportingReceipt .receiptList + .cptQuickMove {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.cptReportingReceipt .receiptList {
margin-top: 24px;
}
.cptReportingReceipt .receiptList > ul {
grid-template-columns: repeat(1, 1fr);
grid-gap: 24px;
}
}
/* ---------------------- 고객광장 - 이용약관 ---------------------- */
.cptTerms .sectArea .termsContent .termsTitle {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.cptTerms .sectArea .termsContent .termsTitle .alignLeft h2 {
color: var(--Gray-900, #111);
font-size: 1.75rem;
font-weight: 500;
line-height: 140%; /* 39.2px */
}
.cptTerms .sectArea .termsContent .termsTitle .alignright p {
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptTerms .sectArea .termsContent .termsGroup {
margin-top: 40px;
}
.cptTerms .sectArea .termsContent .termsGroup > h2 {
color: var(--Primary, #078B7B);
font-size: 1.5rem;
font-weight: 700;
line-height: 140%; /* 33.6px */
}
.cptTerms .sectArea .termsContent .termsGroup > h2 + ul, .cptTerms .sectArea .termsContent .termsGroup > h2 + .cptQuickMove {
margin-top: 20px;
}
.cptTerms .sectArea .termsContent .termsGroup > h2:not(:first-child) {
margin-top: 60px;
}
.cptTerms .sectArea .termsContent .termsGroup > ul > li {
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptTerms .sectArea .termsContent .termsGroup > ul > li + li {
margin-top: 32px;
}
.cptTerms .sectArea .termsContent .termsGroup > ul > li > h3 {
color: var(--Gray-900, #111);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
@media screen and (max-width: 767px) {
.cptTerms .sectArea .termsContent .termsTitle {
display: block;
}
.cptTerms .sectArea .termsContent .termsTitle .alignLeft h2 {
font-size: 1.625rem;
}
.cptTerms .sectArea .termsContent .termsTitle .alignright {
margin-top: 4px;
}
.cptTerms .sectArea .termsContent .termsTitle .alignright p {
font-size: 0.9375rem;
}
.cptTerms .sectArea .termsContent .termsGroup {
margin-top: 32px;
}
.cptTerms .sectArea .termsContent .termsGroup > h2 {
font-size: 1.25rem;
}
.cptTerms .sectArea .termsContent .termsGroup > h2 + ul, .cptTerms .sectArea .termsContent .termsGroup > h2 + .cptQuickMove {
margin-top: 16px;
}
.cptTerms .sectArea .termsContent .termsGroup > h2:not(:first-child) {
margin-top: 40px;
}
.cptTerms .sectArea .termsContent .termsGroup > ul > li {
font-size: 0.9375rem;
}
.cptTerms .sectArea .termsContent .termsGroup > ul > li + li {
margin-top: 24px;
}
.cptTerms .sectArea .termsContent .termsGroup > ul > li > h3 {
font-size: 1rem;
}
}
.cptTerms .termsPopArea .termsTop dt h2 {
color: var(--Gray-900);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
}
.cptTerms .termsPopArea .termsTop dd {
margin-top: 12px;
color: var(--Gray-700);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
.cptTerms .termsPopArea .agreeGroup {
margin-top: 32px;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox {
width: 100%;
height: 200px;
margin-top: 12px;
padding: 20px 8px 20px 28px;
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-100);
background: var(--Bg-Line-bg-50);
}
.cptTerms .termsPopArea .agreeGroup .agreeBox .scrollBox {
width: 100%;
height: 100%;
padding-right: 20px;
overflow-y: auto;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox .scrollBox .termsGroup h2 {
margin-top: 8px;
font-size: 0.9375rem;
}
@media screen and (min-width: 768px) {
.cptTerms .termsPopArea .agreeGroup .agreeBox *:hover::-webkit-scrollbar-thumb {
background: rgba(87, 87, 87, 0.54);
}
.cptTerms .termsPopArea .agreeGroup .agreeBox *::-webkit-scrollbar {
width: 3px;
padding: 0;
background-color: transparent;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox *::-webkit-scrollbar-thumb {
padding: 0;
border: 0px solid #eee;
background: rgba(87, 87, 87, 0.2); /* box-shadow: inset 6px 6px 0 rgba(87, 87, 87, 0.54); */
min-height: 70px;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox *::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
}
.cptTerms .termsPopArea .termsGroup > ul > li + li {
margin-top: 12px;
}
.cptTerms .termsPopArea .termsGroup > ul > li > h3 {
color: var(--Gray-700);
font-size: 0.9375rem;
font-weight: 600;
line-height: 160%;
}
.cptTerms .termsPopArea .termsGroup > ul > li > h3 + .comBasicTxt {
margin-top: 4px;
}
.cptTerms .termsPopArea .termsGroup h2 {
margin-top: 12px;
color: var(--Gray-900);
font-size: 1.125rem;
font-weight: 600;
line-height: 160%;
}
.cptTerms .termsPopArea .termsGroup h2:first-child {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.cptTerms .termsPopArea .termsTop dt h2 {
font-size: 1.25rem;
}
.cptTerms .termsPopArea .termsTop dd {
margin-top: 8px;
font-size: 0.9375rem;
}
.cptTerms .termsPopArea .agreeGroup {
margin-top: 24px;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox {
margin-top: 8px;
padding: 16px 20px;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox .scrollBox {
padding-right: 0;
}
.cptTerms .termsPopArea .agreeGroup .agreeBox .scrollBox .termsGroup h2 {
margin-top: 8px;
font-size: 0.9375rem;
}
.cptTerms .termsPopArea .termsGroup > ul > li + li {
margin-top: 8px;
}
.cptTerms .termsPopArea .termsGroup > ul > li > h3 + .comBasicTxt {
margin-top: 4px;
}
.cptTerms .termsPopArea .termsGroup h2 {
margin-top: 8px;
color: var(--Gray-900);
font-size: 1rem;
}
.cptTerms .termsPopArea .termsGroup h2:first-child {
margin-top: 0;
}
}
/* 개발에서 팝업에 .termsContent만 붙여 사용할 때의 CSS */
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle .alignLeft h2 {
color: var(--Gray-900, #111);
font-size: 1.75rem;
font-weight: 500;
line-height: 140%; /* 39.2px */
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle .alignright p {
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup {
margin-top: 40px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2 {
color: var(--Primary, #078B7B);
font-size: 1.5rem;
font-weight: 700;
line-height: 140%; /* 33.6px */
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2 + ul, .modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2 + .cptQuickMove {
margin-top: 20px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2:not(:first-child) {
margin-top: 60px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > ul > li {
color: var(--Gray-800, #2C2C2C);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > ul > li + li {
margin-top: 32px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > ul > li > h3 {
color: var(--Gray-900, #111);
font-size: 1.125rem;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
@media screen and (max-width: 767px) {
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle {
display: block;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle .alignLeft h2 {
font-size: 1.625rem;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle .alignright {
margin-top: 4px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsTitle .alignright p {
font-size: 0.9375rem;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup {
margin-top: 32px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2 {
font-size: 1.25rem;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2 + ul, .modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2 + .cptQuickMove {
margin-top: 16px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > h2:not(:first-child) {
margin-top: 40px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > ul > li {
font-size: 0.9375rem;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > ul > li + li {
margin-top: 24px;
}
.modMdPopup:not(:has(.cptTerms)) .termsContent .termsGroup > ul > li > h3 {
font-size: 1rem;
}
}
/* --------------------------- 담당자 이메일 발송 (윈도우 팝업) --------------------------- */
.cptSendEmail {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 32px;
background: #fff;
}
.cptSendEmail .sectArea .titleBox {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 20px;
background: linear-gradient(90deg, #EBF8FA 0%, #EDF9F5 100%);
}
.cptSendEmail .sectArea .titleBox h1 {
color: var(--Primary, #078B7B);
font-size: 1.875rem;
font-weight: 600;
line-height: 140%; /* 42px */
}
.cptSendEmail .sectArea .titleBox ~ .comTitH3, .cptSendEmail .sectArea .titleBox ~ .comBtnGroup {
margin-top: 60px;
}
.cptSendEmail .sectArea .titleBox .btnClose {
display: none;
}
.cptSendEmail .sectArea .comTitH3 + .comFormTable {
margin-top: 20px;
}
.cptSendEmail .sectArea .comFormTable .tableArea {
border-top-width: 1px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr {
width: 100%;
padding: 20px 0;
display: flex;
flex-wrap: wrap;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr th, .cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td {
width: 100%;
padding: 0;
border: 0 none;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td {
margin-top: 8px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td .iptText {
height: 56px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td .iptText + .btnReset {
top: 16px;
}
.cptSendEmail .sectArea .comPrivacyBox .infoBox .boxCont .txtTit {
color: var(--Gray-900, #111);
font-size: 1.125rem;
}
.cptSendEmail .sectArea .comPrivacyBox .infoBox .boxCont .txt {
font-size: 1rem;
}
.cptSendEmail .sectArea .comPrivacyBox .infoBox .boxCont .orderedList > li {
font-size: 1rem;
}
@media screen and (max-width: 767px) {
.cptSendEmail {
padding: 0 16px 20px;
}
.cptSendEmail .sectArea .titleBox {
width: calc(100% + 40px);
margin-left: -20px;
justify-content: space-between;
position: relative;
}
.cptSendEmail .sectArea .titleBox .btnClose {
width: 44px;
height: 44px;
font-size: 0;
border: 0;
background: url(../../../images/kboat/common/ic_24_pop_close.svg) center no-repeat;
display: block;
position: absolute;
right: 9px;
top: 19px;
z-index: 10;
}
.cptSendEmail .sectArea .titleBox ~ .comBtnGroup {
margin-top: 40px;
}
.cptSendEmail .sectArea .comTitH3 + .comFormTable {
margin-top: 12px;
}
.cptSendEmail .sectArea .comFormTable + .comTitH3, .cptSendEmail .sectArea .comFormTable + .comPrivacyBox {
margin-top: 40px;
}
.cptSendEmail .sectArea .comFormTable .tableArea {
border-top-width: 1px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr {
padding: 12px 0;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr:first-child {
margin-top: 20px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr th, .cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td {
width: 100%;
padding: 0;
border: 0 none;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td {
margin-top: 8px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td .iptText {
height: 56px;
}
.cptSendEmail .sectArea .comFormTable .tableArea table tbody tr td .iptText + .btnReset {
top: 16px;
}
.cptSendEmail .sectArea .comPrivacyBox .infoBox .boxCont .txtTit {
font-size: 1rem;
}
.cptSendEmail .sectArea .comPrivacyBox .infoBox .boxCont .txt {
font-size: 0.9375rem;
}
.cptSendEmail .sectArea .comPrivacyBox .infoBox .boxCont .orderedList > li {
font-size: 0.9375rem;
}
}
/* --------------------------- 에러페이지 --------------------------- */
.cptErrorPage {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.cptErrorPage .sectArea {
width: 100%;
}
.cptErrorPage .sectArea .errorTitle {
position: relative;
padding-top: 216px;
text-align: center;
}
.cptErrorPage .sectArea .errorTitle:before, .cptErrorPage .sectArea .errorTitle:after {
content: "";
position: absolute;
left: 50%;
}
.cptErrorPage .sectArea .errorTitle:before {
top: 0;
transform: translateX(-50%);
width: 510px;
height: 114px;
background: url("../../../images/kboat/contents/cont00_004_01.svg") no-repeat 50%;
background-size: contain;
}
.cptErrorPage .sectArea .errorTitle:after {
top: 23px;
transform: translateX(-60%);
width: 148px;
height: 157px;
background: url("../../../images/kboat/contents/cont00_004_02.svg") no-repeat 50%;
background-size: 100% auto;
}
.cptErrorPage .sectArea .errorTitle.error:before {
background-image: url("../../../images/kboat/contents/cont00_005_01.svg");
}
.cptErrorPage .sectArea .errorTitle.error:after {
top: 57px;
transform: translateX(-50%);
width: 178px;
height: 122px;
background-image: url("../../../images/kboat/contents/cont00_005_02.svg");
}
.cptErrorPage .sectArea .errorTitle h1 {
color: var(--Gray-800, #2C2C2C);
font-size: 1.875rem;
font-weight: 600;
line-height: 140%; /* 42px */
}
.cptErrorPage .sectArea .errorTitle p {
margin-top: 12px;
color: var(--Gray-600, #58595F);
font-size: 1rem;
font-weight: 400;
line-height: 160%; /* 25.6px */
}
.cptErrorPage .sectArea .mView {
display: none;
}
.cptErrorPage .sectArea .comBtnGroup .btn {
padding: 0;
}
.cptErrorPage .sectArea .comBtnGroup .btn.gLine.reFresh::before {
content: "";
display: inline-block;
vertical-align: middle;
margin-top: -3px;
width: 24px;
height: 24px;
margin-right: 8px;
background: url("../../../images/kboat/common/ic_24_refresh.svg") center no-repeat;
}
@media screen and (max-width: 767px) {
.cptErrorPage {
padding: 0 16px;
}
.cptErrorPage .sectArea .errorTitle {
padding-top: 193px;
}
.cptErrorPage .sectArea .errorTitle:before {
width: calc(100% - 64px);
height: 62px;
}
.cptErrorPage .sectArea .errorTitle:after {
top: 32px;
width: 124px;
height: 132px;
}
.cptErrorPage .sectArea .errorTitle.error:after {
top: 44px;
width: 156px;
height: 114px;
}
.cptErrorPage .sectArea .errorTitle + .comBtnGroup {
margin-top: 36px;
}
.cptErrorPage .sectArea .errorTitle h1 {
color: var(--Gray-900, #2C2C2C);
font-size: 1.375rem;
}
.cptErrorPage .sectArea .errorTitle p {
margin-top: 8px;
font-size: 0.9375rem;
}
.cptErrorPage .sectArea .mView {
display: block;
}
}
.cptContFull {
width: 100%;
}
.cptContFull .sectArea {
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
}
.cptContFull .sectArea .comImgBox {
background-color: #fff;
}
.cptContFull[class*=addBg] {
padding: 80px 0 100px;
background-color: var(--Bg-Line-bg-100);
}
.layoutContArea + .cptContFull {
margin-top: -40px;
}
.cptContFull + .layoutContArea {
padding-top: 80px !important;
}
@media screen and (max-width: 767px) {
.cptContFull[class*=addBg] {
padding: 60px 0;
}
.layoutContArea + .cptContFull {
margin-top: -60px;
}
.cptContFull + .layoutContArea {
padding-top: 60px !important;
}
}
.cptBatSimul {
background-color: var(--Bg-Line-bg-200);
}
.cptBatSimul .smlHead {
width: 100%;
height: 68px;
padding: 10px 32px;
background: linear-gradient(90deg, #169EEA 0%, #1C4C7E 100%);
display: flex;
justify-content: center;
align-items: center;
}
.cptBatSimul .smlHead .headTit {
line-height: 0;
}
.cptBatSimul .smlHead .headTit .txt {
font-size: 1.25rem;
color: #fff;
font-weight: 700;
white-space: nowrap;
}
.cptBatSimul .smlHead .btnClose {
display: none;
}
.cptBatSimul .smlCont {
padding: 0 32px 240px;
}
.cptBatSimul .smlCont .noticeArea {
padding: 16px 0;
}
.cptBatSimul .smlCont .noticeArea .notice {
padding-left: 32px;
font-size: 0.9375rem;
color: var(--Gray-900);
font-weight: 600;
line-height: 24px;
background: url(../../../images/kboat/common/ic_24_notice.svg) left top 2px no-repeat;
}
@media screen and (max-width: 767px) {
.cptBatSimul .smlCont .noticeArea .notice .pcView {
display: none;
}
}
.cptBatSimul .smlCont .noticeArea .notice .mView {
display: none;
}
@media screen and (max-width: 767px) {
.cptBatSimul .smlCont .noticeArea .notice .mView {
display: block;
}
}
.cptBatSimul .smlCont .smryArea {
display: flex;
column-gap: 25px;
}
.cptBatSimul .smlCont .smryArea .smryBox {
width: calc(68% - 12.5px);
height: 260px;
border-radius: 12px;
background: #2C5574;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
flex: 0 0 calc(68% - 12.5px);
display: flex;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData {
padding: 28px 24px;
flex: 1 1 58.6%;
display: flex;
justify-content: space-between;
flex-flow: column;
position: relative;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData::after {
display: block;
content: "";
width: 1px;
height: calc(100% - 56px);
background: rgba(255, 255, 255, 0.1);
position: absolute;
top: 28px;
right: 0;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userName {
font-size: 1.125rem;
color: #fff;
line-height: 1.6;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userName .name {
font-size: 1.5rem;
font-weight: 700;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint {
display: flex;
flex-wrap: wrap;
text-align: right;
justify-content: flex-end;
align-items: center;
position: relative;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint h2 {
width: 100%;
font-size: 1rem;
color: #fff;
font-weight: 500;
line-height: 1.6;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint h2 .tooltip {
width: 16px;
height: 25px;
font-size: 0;
background: url(../../../images/kboat/common/ic_16_tooltip_mint.svg) center no-repeat;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint .point {
font-size: 2.25rem;
color: #fff;
font-weight: 600;
line-height: 1.4;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint .btnReload {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: 8px;
font-size: 0;
background: rgba(0, 0, 0, 0.2) url(../../../images/kboat/common/ic_20_reload.svg) center no-repeat;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord {
width: 41.3%;
padding: 24px 28px;
flex: 0 0 41.3%;
position: relative;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper {
width: 100%;
overflow: hidden;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdWeek {
margin-top: 8px;
font-size: 1rem;
color: #fff;
font-weight: 600;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup {
padding: 16px 0;
text-align: center;
display: flex;
gap: 16px 0;
flex-wrap: wrap;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup .rcrdItem {
flex: 0 0 50%;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup .rcrdItem .rcrd {
display: flex;
flex-wrap: wrap;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup .rcrdItem .rcrd dt {
width: 100%;
font-size: 0.8125rem;
color: var(--Gray-300);
order: 1;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup .rcrdItem .rcrd dd {
width: 100%;
font-size: 1rem;
color: #fff;
font-weight: 600;
order: 0;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup .rcrdItem .rcrd .tooltip {
width: 16px;
height: 16px;
font-size: 0;
background: url(../../../images/kboat/common/ic_16_tooltip_lg.svg) center no-repeat;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdNavi {
position: absolute;
top: 32px;
right: 24px;
display: flex;
z-index: 99;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdNavi > div {
width: 24px;
height: 24px;
margin: 0 4px 0 0;
font-size: 0;
border-radius: 6px;
background: rgba(0, 0, 0, 0.2) url(../../../images/kboat/common/ic_16_arr_right_lg.svg) center no-repeat;
position: static;
display: block;
opacity: 0.5;
cursor: default;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdNavi > div::after {
display: none;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdNavi > div.swiper-button-prev {
transform: rotate(180deg);
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdNavi > div.on {
opacity: 1;
cursor: pointer;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdLink .hotlink {
width: 100%;
height: 30px;
border-radius: 4px;
line-height: 30px;
font-size: 0.875rem;
color: var(--Gray-150);
background: rgba(0, 0, 0, 0.2);
text-align: center;
display: inline-block;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdLink .hotlink::after {
display: inline-block;
content: "";
width: 16px;
height: 16px;
margin-left: 3px;
background: url(../../../images/kboat/common/ic_16_new_window_w.svg) center no-repeat;
vertical-align: middle;
}
.cptBatSimul .smlCont .smryArea .rankingBox {
width: calc(32% - 12.5px);
border-radius: 12px;
padding: 28px 24px;
flex: 0 0 calc(32% - 12.5px);
background: #fff;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
position: relative;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit {
padding: 0 0 6px;
border-bottom: 1px solid var(--Bg-Line-line-100);
display: flex;
align-items: center;
position: relative;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .titArea {
font-size: 1.125rem;
color: var(--Gray-900);
font-weight: 700;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .titArea .tooltip {
width: 16px;
height: 24px;
font-size: 0;
background: url(../../../images/kboat/common/ic_16_tooltip_g.svg) center no-repeat;
vertical-align: middle;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .pageArea {
margin-left: auto;
text-align: right;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .pageArea .swiper-pagination {
position: static;
transform: translateY(-4px);
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .pageArea .swiper-pagination .swiper-pagination-bullet {
margin-left: 8px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .pageArea .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--Point-Primary2);
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper {
overflow: hidden;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList {
padding: 12px 0 8px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem {
margin-top: 3px;
display: flex;
align-items: center;
column-gap: 3px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem:first-child {
margin-top: 0;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem .num {
width: 30px;
flex: 0 0 30px;
padding: 0 12px;
font-size: 0.9375rem;
color: var(--Gray-600);
line-height: 1.6;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem .id {
font-size: 0.9375rem;
color: var(--Gray-800);
line-height: 1.6;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem .point {
margin-left: auto;
text-align: right;
font-size: 0.9375rem;
color: var(--Gray-600);
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem.ranker .num {
color: var(--Point-Primary2);
font-weight: 600;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem.ranker .id {
font-weight: 600;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem.ranker .point {
color: var(--Point-Primary2);
font-weight: 600;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankInfo {
text-align: right;
font-size: 0.875rem;
color: var(--Gray-400);
position: absolute;
bottom: 17px;
right: 24px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankInfo::before {
display: inline-block;
content: "";
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 2px;
background: url(../../../images/kboat/common/ic_16_clock_g.svg) center no-repeat;
}
.cptBatSimul .smlCont .smryArea .tooltipBox {
width: 280px;
padding: 16px 23px 16px 16px;
border-radius: 8px;
border: 1px solid var(--Point-Primary2);
background: #fff;
position: absolute;
z-index: 99;
display: none;
box-shadow: 10px 10px 10px 0px rgba(35, 165, 238, 0.1);
}
.cptBatSimul .smlCont .smryArea .tooltipBox .btnClose {
width: 16px;
height: 16px;
font-size: 0;
background: url(../../../images/kboat/common/ic_12_close.svg) center no-repeat;
position: absolute;
top: 8px;
right: 8px;
}
.cptBatSimul .smlCont .smryArea .tooltipBox .txt {
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.6;
color: var(--Gray-800);
text-align: left;
}
.cptBatSimul .smlCont .smryArea .tooltipBox .btnMore {
display: inline;
font-size: 0.9375rem;
color: var(--Point-Primary2);
}
.cptBatSimul .smlCont .smryArea .tooltipBox .btnMore::after {
display: inline-block;
content: "";
width: 16px;
height: 16px;
margin-left: 2px;
background: url(../../../images/kboat/common/ic_16_new_window_mint.svg) center no-repeat;
vertical-align: text-top;
}
.cptBatSimul .smlCont .smryArea .tooltipBox::after {
display: block;
content: "";
width: 14px;
height: 14px;
background: url(../../../images/kboat/common/ic_14_ballon_tail.svg) center no-repeat;
position: absolute;
top: -12px;
left: 30px;
z-index: 1;
}
.cptBatSimul .smlCont .smryArea .tooltipBox.on {
display: block;
}
.cptBatSimul .smlCont .smryArea .userPoint .tooltipBox {
top: 38px;
right: -234px;
}
.cptBatSimul .smlCont .smryArea .userRecord .tooltipBox {
bottom: -12px;
left: 68%;
}
.cptBatSimul .smlCont .smryArea .rankingBox .tooltipBox {
top: 42px;
left: -6px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .tooltipBox::after {
left: 110px;
}
.cptBatSimul .smlCont .matchSlct {
margin: 40px 0;
position: relative;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper {
width: calc(100% - 80px);
margin: 0 auto;
overflow: hidden;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper {
height: 157px;
display: flex;
align-items: center;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide {
width: 130px;
display: flex;
align-items: center;
justify-content: center;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox {
width: 117px;
height: 143px;
border-radius: 12px;
padding: 10px;
background: #fff;
text-align: center;
transition: all 0.3s;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox .matchTit {
font-size: 1.25rem;
font-weight: 700;
color: var(--Gray-800);
transition: all 0.3s;
background: url(../../../images/kboat/common/ic_20_match_check.png) center -24px no-repeat;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox .matchTag {
margin-top: 8px;
height: 25px;
padding: 0 10px;
line-height: 25px;
border-radius: 12.5px;
font-size: 0.875rem;
color: var(--Primary);
font-weight: 600;
background: #D6EFFA;
display: inline-block;
transition: all 0.3s;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox .matchTime {
margin-top: 4px;
font-size: 0.9375rem;
color: var(--Gray-600);
transition: all 0.3s;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on, .cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover {
width: 125px;
height: 157px;
background: linear-gradient(180deg, #179EEA 0%, #1D4E80 100%);
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on .matchTit, .cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover .matchTit {
padding-top: 24px;
color: #fff;
background-position: top center;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on .matchTag, .cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover .matchTag {
color: #44BCFF;
background: rgba(0, 0, 0, 0.3);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on .matchTime, .cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover .matchTime {
color: #fff;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled {
cursor: default;
width: 117px;
height: 143px;
background: #fff;
box-shadow: none;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled .matchTit {
padding-top: 0;
color: var(--Gray-300);
background-position: center -24px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled .matchTag {
background: var(--Gray-100);
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled .matchTime {
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div {
width: 24px;
height: 40px;
margin-top: 0;
background: url(../../../images/kboat/common/ic_20_arr_left_k.svg) center no-repeat;
transform: translateY(-50%);
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div::after {
display: none;
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div.swiper-button-prev {
left: 7px;
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div.swiper-button-next {
transform: translateY(-50%) rotate(180deg);
right: 7px;
}
.cptBatSimul .smlCont .matchDetail {
margin-top: 40px;
}
.cptBatSimul .smlCont .matchDetail .mtchTit {
display: flex;
align-items: center;
column-gap: 8px;
}
.cptBatSimul .smlCont .matchDetail .mtchTit .tit {
font-size: 1.5rem;
color: var(--Gray-800);
font-weight: 700;
}
.cptBatSimul .smlCont .matchDetail .mtchTit .tag {
height: 33px;
line-height: 32px;
padding: 0 16px;
border-radius: 16.5px;
font-size: 1.125rem;
font-weight: 600;
color: var(--Primary);
background: #D6EFFA;
}
.cptBatSimul .smlCont .matchDetail .mtchTit .etc {
font-size: 1.125rem;
color: var(--Gray-800);
font-weight: 500;
}
.cptBatSimul .smlCont .matchDetail .mtchDt {
width: 100%;
margin-top: 24px;
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabMenuGroup .tabMenu .tabItem .tabName {
height: 64px;
padding: 0 35px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabContianer {
margin-top: 0;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabContianer .tabCont {
padding: 40px 24px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo {
width: 100%;
border-radius: 12px;
padding: 12px 16px 12px 40px;
background: #E8F8FF url(../../../images/kboat/common/ic_20_info_mint.svg) 16px center no-repeat;
display: flex;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo dt {
font-size: 0.9375rem;
color: var(--Gray-800);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo dt em {
font-weight: 700;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo dt .tMint {
font-weight: 600;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo dd {
font-size: 0.9375rem;
color: var(--Gray-800);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection {
margin-top: 40px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .sctTit {
margin-bottom: 16px;
font-size: 1.125rem;
font-weight: 600;
color: var(--Gray-800);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .slctTit {
margin: 16px 0 5px;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--Gray-600);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem {
flex: 0 0 calc(16.6667% - 6.6667px);
position: relative;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input[type=radio] {
font-size: 0;
width: 1px;
height: 1px;
position: absolute;
top: -1px;
left: -1px;
opacity: 0.01;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label {
width: 100%;
height: 48px;
border-radius: 8px;
border: 1px solid var(--Gray-200);
text-align: center;
font-size: 0.9375rem;
font-weight: 600;
color: var(--Gray-800);
line-height: 45px;
background: #fff;
display: inline-block;
cursor: pointer;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number {
width: 16px;
height: 16px;
border: 1px solid var(--Gray-200);
border-radius: 50%;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
color: #fff;
line-height: 15px;
background: #fff;
display: inline-block;
vertical-align: middle;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num01 {
color: var(--Gray-200);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num02 {
background: var(--Gray-900);
border-color: var(--Gray-900);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num03 {
background: #ff2828;
border-color: #ff2828;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num04 {
background: #2a7ddf;
border-color: #2a7ddf;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num05 {
background: #ffb907;
border-color: #ffb907;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num06 {
background: #55b965;
border-color: #55b965;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .number.num07 {
background: #ff66af;
border-color: #ff66af;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label .name {
display: inline-block;
vertical-align: middle;
position: relative;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input:checked + label {
background: #E8F8FF;
border-color: var(--Primary);
color: var(--Primary);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input:checked + label .name::after {
display: block;
content: "";
width: 18px;
height: 18px;
background: url(../../../images/kboat/common/ic_12_chk_mit.svg) center no-repeat;
position: absolute;
right: -20px;
top: 13px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input:disabled + label {
border-color: var(--Gray-200);
background: var(--Gray-100);
cursor: default;
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input[type=text] {
width: 100%;
height: 48px;
padding: 0 15px;
border-radius: 8px;
border: 1px solid var(--Gray-200);
font-size: 0.9375rem;
font-weight: 400;
color: var(--Gray-800);
background: #fff;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input[type=text]::placeholder {
color: var(--Gray-600);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input[type=text]:disabled {
border-color: var(--Gray-200);
background: var(--Gray-100);
cursor: default;
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input[type=text]:disabled::placeholder {
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem.full {
flex: 1 0 auto;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo + .batSection {
margin-top: 32px;
}
.cptBatSimul .smlCont .bannerArea {
margin-top: 24px;
}
.cptBatSimul .smlCont .bannerArea .bannerBox {
width: 100%;
border-radius: 12px;
padding: 24px 32px;
background: #dce9f7;
display: flex;
justify-content: space-between;
align-items: center;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .txtArea b {
width: 100%;
font-size: 1.125rem;
color: #2b4c7a;
font-weight: 700;
display: inline-block;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .txtArea i {
width: 100%;
font-size: 0.875rem;
color: var(--Gray-600);
font-style: normal;
display: inline-block;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .btnArea a {
min-width: 200px;
height: 48px;
line-height: 48px;
padding: 0 30px;
border-radius: 8px;
font-size: 1rem;
color: #fff;
background: #33527c;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .btnArea a img {
vertical-align: text-top;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .btnArea a::after {
display: inline-block;
content: "";
width: 16px;
height: 16px;
margin-left: 4px;
background: url(../../../images/kboat/common/ic_16_new_window_w.svg) center no-repeat;
vertical-align: middle;
}
.cptBatSimul .smlFloating {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
background: #fff;
}
.cptBatSimul .smlFloating .contBox {
width: 100%;
border-top: 1px solid #000;
position: absolute;
bottom: 32px;
left: 0;
transition: bottom 0.2s;
}
.cptBatSimul .smlFloating .contBox .btnSlide {
width: 137px;
height: 36px;
border-radius: 8px 8px 0 0;
border: 1px solid #000;
border-bottom-color: #fff;
text-align: center;
font-size: 0.9375rem;
color: var(--Gray-800);
background: #fff;
position: absolute;
top: -36px;
right: 32px;
z-index: 1;
}
.cptBatSimul .smlFloating .contBox .btnSlide::after {
display: inline-block;
content: "";
width: 16px;
height: 12px;
margin-left: 4px;
background: url(../../../images/kboat/common/ic_12_arr_bottom.svg) center no-repeat;
transform: rotate(180deg);
transition: all 0.2s;
}
.cptBatSimul .smlFloating .contBox .contArea {
padding: 20px 32px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.cptBatSimul .smlFloating .contBox .contArea .contTit {
font-size: 1rem;
color: var(--Gray-500);
font-weight: 500;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt {
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 36px;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont {
display: flex;
column-gap: 8px;
align-items: center;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dt {
font-size: 0.9375rem;
color: var(--Gray-800);
font-weight: 600;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd {
font-size: 1rem;
color: var(--Gray-400);
display: flex;
gap: 4px;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number {
width: 16px;
height: 16px;
border: 1px solid var(--Gray-200);
border-radius: 50%;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
color: #fff;
line-height: 15px;
background: #fff;
display: inline-block;
vertical-align: middle;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num01 {
color: var(--Gray-200);
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num02 {
background: var(--Gray-900);
border-color: var(--Gray-900);
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num03 {
background: #ff2828;
border-color: #ff2828;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num04 {
background: #2a7ddf;
border-color: #2a7ddf;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num05 {
background: #ffb907;
border-color: #ffb907;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num06 {
background: #55b965;
border-color: #55b965;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .batCont dd .number.num07 {
background: #ff66af;
border-color: #ff66af;
}
.cptBatSimul .smlFloating .contBox.on {
bottom: 96px;
}
.cptBatSimul .smlFloating .contBox.on .btnSlide::after {
transform: rotate(0deg);
}
.cptBatSimul .smlFloating .unitArea {
width: 100%;
padding: 20px 32px;
position: relative;
z-index: 1;
display: flex;
column-gap: 40px;
background-color: #fff;
}
.cptBatSimul .smlFloating .unitArea::before {
display: block;
content: "";
width: calc(100% - 64px);
height: 1px;
background: var(--Gray-200);
position: absolute;
top: 0;
left: 32px;
opacity: 0;
transition: all 0.2s;
}
.cptBatSimul .smlFloating .unitArea .numUnit {
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem {
width: 50%;
text-align: center;
position: relative;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem::after {
display: block;
content: "";
width: 1px;
height: 36px;
background: var(--Gray-200);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem:last-child::after {
display: none;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem dt {
font-size: 1rem;
color: var(--Gray-500);
font-weight: 500;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem dd {
font-size: 1.25rem;
color: var(--Gray-900);
font-weight: 700;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem dd .result {
color: var(--Primary);
font-weight: 700;
}
.cptBatSimul .smlFloating .unitArea .btnArea {
flex: 0 0 360px;
}
.cptBatSimul .smlFloating .unitArea .btnArea .btnReload {
width: 95px;
height: 56px;
border: 1px solid var(--Gray-300);
border-radius: 8px;
background: #fff;
line-height: 55px;
text-align: center;
font-size: 1.125rem;
color: var(--Gray-600);
font-weight: 500;
}
.cptBatSimul .smlFloating .unitArea .btnArea .btnReload::before {
display: inline-block;
vertical-align: text-bottom;
content: "";
width: 20px;
height: 20px;
margin-right: 4px;
background: url(../../../images/kboat/common/ic_20_reload_k.svg) center no-repeat;
}
.cptBatSimul .smlFloating .unitArea .btnArea .btnBatting {
width: 253px;
height: 56px;
margin-left: 7px;
border-radius: 8px;
line-height: 55px;
text-align: center;
font-size: 1.125rem;
font-weight: 500;
color: #fff;
background: linear-gradient(270deg, #1E5183 0%, #189AE5 100%);
}
.cptBatSimul .smlFloating .unitArea .btnArea .btnBatting:disabled {
background: var(--Gray-150);
color: var(--Gray-300);
}
.cptBatSimul .smlFloating .contBox.on + .unitArea::before {
opacity: 1;
}
@media screen and (max-width: 959px) {
.cptBatSimul .smlHead {
justify-content: space-between;
}
.cptBatSimul .smlHead .btnClose {
width: 44px;
height: 44px;
font-size: 0;
border: 0;
background: url(../../../images/kboat/common/ic_24_pop_close_w.svg) center no-repeat;
display: block;
position: absolute;
right: 22px;
top: 12px;
z-index: 10;
}
.cptBatSimul .smlCont {
padding: 0 16px 207px;
}
.cptBatSimul .smlCont .noticeArea .notice {
padding-left: 24px;
font-size: 0.8125rem;
background-size: 20px;
}
.cptBatSimul .smlCont .smryArea {
flex-wrap: wrap;
row-gap: 20px;
}
.cptBatSimul .smlCont .smryArea .smryBox {
width: 100%;
height: auto;
flex: 0 0 100%;
flex-wrap: wrap;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData {
padding: 28px 24px 20px;
flex: 0 0 100%;
flex-wrap: wrap;
gap: 16px;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData::after {
width: calc(100% - 48px);
height: 1px;
top: auto;
bottom: 0;
right: 24px;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userName {
font-size: 1rem;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userName .name {
font-size: 1.25rem;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint {
align-items: center;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint h2 {
font-size: 0.9375rem;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint h2 .tooltip {
height: 24px;
}
.cptBatSimul .smlCont .smryArea .smryBox .userData .userPoint .point {
font-size: 2rem;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord {
width: 100%;
padding: 20px 24px 28px;
flex: 0 0 100%;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdWeek {
margin-top: 0;
font-size: 0.9375rem;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup {
padding: 12px 0;
gap: 12px 0;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdSwiper .rcrdGroup .rcrdItem .rcrd dd {
font-size: 1.125rem;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdNavi {
top: 20px;
}
.cptBatSimul .smlCont .smryArea .smryBox .userRecord .rcrdLink .hotlink {
height: 37px;
line-height: 36px;
font-size: 0.8125rem;
}
.cptBatSimul .smlCont .smryArea .rankingBox {
width: 100%;
flex: 0 0 100%;
padding: 28px 24px 40px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit {
padding: 0 0 12px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .titArea {
font-size: 1rem;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankTit .titArea .tooltip {
height: 22px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList {
padding: 16px 0 8px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem {
margin-top: 6px;
column-gap: 4px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem .num {
width: 40px;
flex: 0 0 40px;
text-align: center;
font-size: 0.875rem;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem .id {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankSwiper .rankList .rankItem .point {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .smryArea .rankingBox .rankInfo {
font-size: 0.8125rem;
bottom: 20px;
}
.cptBatSimul .smlCont .smryArea .tooltipBox {
padding: 12px 23px 12px 14px;
}
.cptBatSimul .smlCont .smryArea .tooltipBox .btnClose {
top: 10px;
right: 10px;
}
.cptBatSimul .smlCont .smryArea .tooltipBox .txt {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .smryArea .tooltipBox .btnMore {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .smryArea .tooltipBox::after {
left: auto;
right: 17px;
}
.cptBatSimul .smlCont .smryArea .userPoint .tooltipBox {
top: 38px;
right: -17px;
}
.cptBatSimul .smlCont .smryArea .userRecord .tooltipBox {
left: auto;
right: calc(24% - 40px);
}
.cptBatSimul .smlCont .smryArea .rankingBox .tooltipBox {
left: 25px;
}
.cptBatSimul .smlCont .smryArea .rankingBox .tooltipBox::after {
left: 68px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper {
width: calc(100% - 32px);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper {
height: 122px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide {
width: 101px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox {
width: 93px;
height: 114px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox .matchTit {
font-size: 1rem;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox .matchTag {
margin-top: 4px;
font-size: 0.8125rem;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox .matchTime {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover {
width: 93px;
height: 114px;
box-shadow: none;
background: #fff;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover .matchTit {
padding-top: 0;
color: var(--Gray-800);
background-position: center -24px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover .matchTag {
color: var(--Primary);
background: #D6EFFA;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox:hover .matchTime {
color: var(--Gray-600);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on {
width: 101px;
height: 122px;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
background: linear-gradient(180deg, #179EEA 0%, #1D4E80 100%);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on .matchTit {
padding-top: 24px;
color: #fff;
background-position: top center;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on .matchTag {
color: #44BCFF;
background: rgba(0, 0, 0, 0.3);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.on .matchTime {
color: #fff;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled {
width: 93px;
height: 114px;
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled .matchTit {
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled .matchTag {
background: var(--Gray-100);
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchSlct .matchSwiper .swiper-wrapper .swiper-slide .matchBox.disabled .matchTime {
color: var(--Gray-300);
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div {
background-size: 24px;
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div.swiper-button-prev {
left: -9px;
}
.cptBatSimul .smlCont .matchSlct .matchNavi > div.swiper-button-next {
transform: translateY(-50%) rotate(180deg);
right: -9px;
}
.cptBatSimul .smlCont .matchDetail .mtchTit {
gap: 8px;
flex-wrap: wrap;
}
.cptBatSimul .smlCont .matchDetail .mtchTit .tit {
font-size: 1.25rem;
}
.cptBatSimul .smlCont .matchDetail .mtchTit .tag {
height: 30px;
line-height: 29px;
font-size: 1rem;
}
.cptBatSimul .smlCont .matchDetail .mtchTit .etc {
width: 100%;
font-size: 1rem;
}
.cptBatSimul .smlCont .matchDetail .mtchDt {
width: calc(100% + 32px);
margin-top: 20px;
margin-left: -16px;
border-radius: 0;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabMenuGroup .tabMenu .tabItem {
min-width: 75px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabMenuGroup .tabMenu .tabItem .tabName {
height: 56px;
padding: 0 16px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabContianer {
margin-top: 0;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .modTab .tabContianer .tabCont {
padding: 28px 16px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo {
padding: 12px 12px 12px 36px;
background-position: 12px 14px;
display: block;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo dt {
font-size: 0.875rem;
display: inline;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo dd {
font-size: 0.875rem;
display: inline;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection {
margin-top: 40px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .sctTit {
margin-bottom: 12px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem {
flex: 1 0 calc(33.3333% - 5.3333px);
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input + label {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input:checked + label .name::after {
width: 16px;
height: 16px;
position: static;
display: inline-block;
vertical-align: text-bottom;
margin-left: 5px;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem input[type=text] {
font-size: 0.875rem;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batSection .batGroup .batItem.full {
flex: 1 1 auto;
}
.cptBatSimul .smlCont .matchDetail .mtchDt .batInfo + .batSection {
margin-top: 28px;
}
.cptBatSimul .smlCont .bannerArea {
margin-top: 20px;
}
.cptBatSimul .smlCont .bannerArea .bannerBox {
width: calc(100% + 32px);
margin-left: -16px;
border-radius: 0;
padding: 24px;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .txtArea {
width: 100%;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .txtArea b {
font-size: 1rem;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .txtArea i {
display: none;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .btnArea {
width: 100%;
margin-top: 10px;
}
.cptBatSimul .smlCont .bannerArea .bannerBox .btnArea a {
min-width: 180px;
height: 40px;
line-height: 40px;
padding: 0 23px;
font-size: 0.9375rem;
}
.cptBatSimul .smlFloating .contBox {
bottom: 1px;
min-height: 157px;
transition: all 0.3s;
}
.cptBatSimul .smlFloating .contBox .btnSlide {
width: 110px;
height: 28px;
font-size: 0.875rem;
top: -28px;
right: 16px;
}
.cptBatSimul .smlFloating .contBox .btnSlide::after {
height: 10px;
}
.cptBatSimul .smlFloating .contBox .contArea {
padding: 12px 16px;
flex-wrap: wrap;
justify-content: flex-start;
}
.cptBatSimul .smlFloating .contBox .contArea .contTit {
width: 100%;
font-size: 0.9375rem;
margin-bottom: 8px;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt {
flex-wrap: wrap;
gap: 5px;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .contItem {
width: 100%;
}
.cptBatSimul .smlFloating .contBox .contArea .contDt .contItem .batCont {
justify-content: space-between;
}
.cptBatSimul .smlFloating .contBox.on {
bottom: 100%;
min-height: 0;
}
.cptBatSimul .smlFloating .unitArea {
padding: 12px 16px 20px;
flex-wrap: wrap;
row-gap: 10px;
}
.cptBatSimul .smlFloating .unitArea::before {
width: calc(100% - 32px);
left: 16px;
}
.cptBatSimul .smlFloating .unitArea .numUnit {
width: 100%;
flex: 1 0 100%;
flex-wrap: wrap;
row-gap: 5px;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem {
width: 100%;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem::after {
display: none;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem dl {
display: flex;
justify-content: space-between;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem dl dt {
font-size: 0.9375rem;
}
.cptBatSimul .smlFloating .unitArea .numUnit .numItem dl dd {
font-size: 1.125rem;
}
.cptBatSimul .smlFloating .unitArea .btnArea {
flex: 0 0 100%;
}
.cptBatSimul .smlFloating .unitArea .btnArea .btnReload {
width: 100px;
}
.cptBatSimul .smlFloating .unitArea .btnArea .btnBatting {
width: calc(100% - 112px);
margin-left: 7px;
}
}
.cptinfoPoint .info {
font-size: 1rem;
color: var(--Gray-800);
}
.cptinfoPoint .pointGroup {
margin-top: 24px;
}
.cptinfoPoint .pointGroup .pointItem {
width: 100%;
padding: 12px 20px;
margin-top: 12px;
border-radius: 8px;
background: var(--Bg-Line-bg-200);
display: flex;
justify-content: space-between;
align-items: center;
}
.cptinfoPoint .pointGroup .pointItem:first-child {
margin-top: 0;
}
.cptinfoPoint .pointGroup .pointItem .act dt {
font-size: 1rem;
color: var(--Gray-800);
font-weight: 700;
}
.cptinfoPoint .pointGroup .pointItem .act dd {
font-size: 0.875rem;
color: var(--Gray-600);
}
.cptinfoPoint .pointGroup .pointItem .point {
font-size: 1.25rem;
color: var(--Primary);
font-weight: 700;
}
@media screen and (max-width: 959px) {
.cptinfoPoint .info {
font-size: 0.9375rem;
}
.cptinfoPoint .pointGroup {
margin-top: 12px;
}
.cptinfoPoint .pointGroup .pointItem {
padding: 12px 16px;
margin-top: 8px;
}
.cptinfoPoint .pointGroup .pointItem .act dt {
font-size: 0.9375rem;
}
.cptinfoPoint .pointGroup .pointItem .act dd {
font-size: 0.8125rem;
}
.cptinfoPoint .pointGroup .pointItem .point {
font-size: 1.125rem;
flex: 1 0 auto;
text-align: right;
}
}
.cptBatInfo .batTit {
margin-bottom: 12px;
}
.cptBatInfo .batTit h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--Gray-800);
}
.cptBatInfo .checkPoint {
margin-top: 32px;
border-radius: 12px;
background: #EEF9FD;
padding: 24px 20px;
}
.cptBatInfo .checkPoint .check {
display: flex;
justify-content: space-between;
align-items: center;
}
.cptBatInfo .checkPoint .check dt {
font-size: 0.9375rem;
color: var(--Gray-900);
font-weight: 500;
line-height: 1.6;
}
.cptBatInfo .checkPoint .check dd {
font-size: 2rem;
color: var(--Primary);
font-weight: 700;
line-height: 1.4;
}
.cptBatInfo .finalPoint {
margin-top: 32px;
}
.cptBatInfo .finalPoint .finalBox {
border-radius: 12px;
padding: 24px 20px;
background: var(--Bg-Line-bg-200);
}
.cptBatInfo .finalPoint .finalBox .finalItem {
border-bottom: 1px dashed var(--Bg-Line-line-100);
}
.cptBatInfo .finalPoint .finalBox .finalItem:last-child {
border-bottom: none;
}
.cptBatInfo .finalPoint .finalBox .finalItem .final {
padding-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cptBatInfo .finalPoint .finalBox .finalItem .final dt {
font-size: 0.875rem;
color: var(--Gray-600);
line-height: 1.6;
}
.cptBatInfo .finalPoint .finalBox .finalItem .final dd {
font-size: 1.125rem;
color: var(--Gray-800);
line-height: 1.6;
font-weight: 600;
}
.cptBatInfo .finalPoint .finalBox .finalItem .remain {
padding-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cptBatInfo .finalPoint .finalBox .finalItem .remain dt {
font-size: 0.9375rem;
color: var(--Gray-900);
line-height: 1.6;
font-weight: 500;
}
.cptBatInfo .finalPoint .finalBox .finalItem .remain dd {
font-size: 2rem;
color: var(--Primary);
line-height: 1.6;
font-weight: 700;
}
.cptBatInfo .btmTxt {
margin: 32px 0 12px;
}
.cptBatInfo .btmTxt .bold {
font-size: 1.125rem;
font-weight: 700;
color: var(--Gray-800);
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 959px) {
.cptBatInfo .batTit h3 {
font-size: 1.125rem;
font-weight: 600;
}
.cptBatInfo .checkPoint {
margin-top: 16px;
padding: 20px 16px;
}
.cptBatInfo .checkPoint .check {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.cptBatInfo .checkPoint .check dt {
width: 100%;
font-size: 0.875rem;
}
.cptBatInfo .checkPoint .check dd {
width: 100%;
font-size: 1.875rem;
}
.cptBatInfo .finalPoint {
margin-top: 16px;
}
.cptBatInfo .finalPoint .finalBox {
padding: 16px 24px;
}
.cptBatInfo .finalPoint .finalBox .finalItem .final {
padding-bottom: 8px;
}
.cptBatInfo .finalPoint .finalBox .finalItem .final dt {
font-size: 0.8125rem;
}
.cptBatInfo .finalPoint .finalBox .finalItem .final dd {
font-size: 0.875rem;
}
.cptBatInfo .finalPoint .finalBox .finalItem .remain {
padding-top: 16px;
flex-wrap: wrap;
justify-content: center;
}
.cptBatInfo .finalPoint .finalBox .finalItem .remain dt {
font-size: 0.875rem;
}
.cptBatInfo .finalPoint .finalBox .finalItem .remain dd {
font-size: 1.875rem;
}
.cptBatInfo .btmTxt {
margin: 28px 0 0;
}
.cptBatInfo .btmTxt .bold {
font-size: 1rem;
}
}
.cptContKBI {
width: 100%;
margin-top: 60px;
}
.cptContKBI:first-child {
margin-top: 0;
}
.cptContKBI.mgH32 {
margin-top: 32px;
}
.cptContKBI .biCont {
margin: 20px 0;
display: flex;
gap: 20px;
}
.cptContKBI .biCont .wd50 {
width: 50%;
height: 250px;
border-radius: 16px;
border: 1px solid var(--Bg-Line-line-200);
display: flex;
align-items: center;
justify-content: center;
}
.cptContKBI .biCont .wd50 .bi img {
display: block;
}
.cptContKBI .biCont .wd50.monoon {
background: url(../../../images/kboat/contents/cont06_02_bg2.svg) no-repeat center/cover;
}
.cptContKBI .downBtn {
text-align: center;
}
@media screen and (max-width: 767px) {
.cptContKBI {
margin-top: 40px;
}
.cptContKBI.mgH32 {
margin-top: 24px;
}
.cptContKBI .biCont {
margin: 16px 0;
flex-wrap: wrap;
gap: 12px;
}
.cptContKBI .biCont .wd50 {
width: 100%;
height: 138px;
border-radius: 8px;
}
.cptContKBI .biCont .wd50 .bi img {
height: 38px;
}
}
.cptContSpeedom {
width: 100%;
margin-top: 60px;
}
.cptContSpeedom:first-child {
margin-top: 0;
}
.cptContSpeedom .contArea .list {
display: flex;
flex-wrap: wrap;
margin-top: 100px;
}
.cptContSpeedom .contArea .list:first-child {
margin-top: 0;
}
.cptContSpeedom .contArea .img {
margin-right: 100px;
}
.cptContSpeedom .contArea .img img {
border-radius: 16px;
display: block;
max-width: 100%;
height: auto;
}
.cptContSpeedom .contArea .cont {
flex: 1;
}
.cptContSpeedom .contArea .cont .infoTxt {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--Bg-Line-line-100);
}
.cptContSpeedom .contArea .cont .infoTxt .tit {
color: var(--Primary);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.6;
}
.cptContSpeedom .contArea .cont .infoTxt dl {
display: flex;
color: var(--Gray-800);
font-size: 1rem;
margin-top: 12px;
}
.cptContSpeedom .contArea .cont .infoTxt dl:first-child {
margin-top: 0;
}
.cptContSpeedom .contArea .cont .infoTxt dl dt {
width: 120px;
font-weight: 700;
}
.cptContSpeedom .contArea .cont .infoTxt dl dt .blk {
display: block;
}
.cptContSpeedom .contArea .cont .infoTxt dl dd {
flex: 1;
line-height: 1.6;
}
.cptContSpeedom .contArea .btnGrp {
margin-top: 32px;
display: flex;
align-items: center;
gap: 12px;
}
.cptContSpeedom .contArea .btnGrp a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 24px;
background: var(--Primary);
border-radius: 8px;
color: #fff;
font-size: 1rem;
font-weight: 500;
position: relative;
}
.cptContSpeedom .contArea .btnGrp a::after {
content: "";
width: 20px;
height: 20px;
background: url(../../../images/kboat/common/ic_20_link_icon.svg) no-repeat center;
margin-left: 4px;
}
.cptContSpeedom .contArea .vrInfo {
margin-top: 60px;
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-100);
background: var(--Bg-Line-bg-100);
padding: 32px 32px;
}
.cptContSpeedom .contArea .vrInfo dt {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.6;
color: var(--Gray-800);
}
.cptContSpeedom .contArea .vrInfo dd {
font-size: 1rem;
line-height: 1.6;
color: var(--Gray-800);
margin-top: 12px;
}
.cptContSpeedom .contArea .list.bt .img {
margin-right: 0;
margin-left: 100px;
}
.cptContSpeedom .contArea .parkImg {
margin-top: 20px;
border-radius: 16px;
overflow: hidden;
}
.cptContSpeedom .contArea .parkImg img {
width: 100%;
}
@media screen and (max-width: 767px) {
.cptContSpeedom {
margin-top: 40px;
}
.cptContSpeedom .contArea .list {
margin-top: 60px;
}
.cptContSpeedom .contArea .img {
margin-right: 0;
width: 100%;
}
.cptContSpeedom .contArea .cont {
width: 100%;
flex: none;
margin-top: 24px;
}
.cptContSpeedom .contArea .cont .infoTxt dl dt {
width: 100px;
font-size: 0.9375rem;
line-height: 1.5;
}
.cptContSpeedom .contArea .cont .infoTxt dl dt .blk {
display: inline-block;
}
.cptContSpeedom .contArea .cont .infoTxt dl dd {
font-size: 0.9375rem;
}
.cptContSpeedom .contArea .cont.verDiv dl {
display: block;
}
.cptContSpeedom .contArea .cont.verDiv dl dt {
margin-bottom: 8px;
}
.cptContSpeedom .contArea .list.bt .cont {
order: 2;
}
.cptContSpeedom .contArea .list.bt .img {
order: 1;
margin-left: 0;
}
.cptContSpeedom .contArea .btnGrp {
margin-top: 40px;
}
.cptContSpeedom .contArea .btnGrp a {
width: 50%;
}
.cptContSpeedom .contArea .vrInfo {
margin-top: 40px;
padding: 20px 20px;
}
.cptContSpeedom .contArea .vrInfo dt {
font-size: 1rem;
}
.cptContSpeedom .contArea .vrInfo dd {
font-size: 0.9375rem;
}
}
.cptContBranch ul {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
.cptContBranch ul li {
width: 33.33333333%;
padding: 0 20px;
margin-top: 40px;
}
.cptContBranch ul li:nth-of-type(1), .cptContBranch ul li:nth-of-type(2), .cptContBranch ul li:nth-of-type(3) {
margin-top: 0;
}
.cptContBranch ul li .inCont {
padding: 36px 32px;
border-radius: 12px;
border: 1px solid var(--Bg-Line-line-100);
background: #fff;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cptContBranch ul li .inCont .rowB {
display: flex;
gap: 10px;
margin-top: 40px;
}
.cptContBranch ul li .inCont .rowB .linkBtn {
cursor: pointer;
border-radius: 6px;
background: #EEF6FC;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 50%;
height: 48px;
font-size: 1rem;
font-weight: 500;
color: var(--Secondary);
}
.cptContBranch ul li .inCont .rowB .linkBtn::before {
content: "";
width: 20px;
height: 20px;
}
.cptContBranch ul li .inCont .rowB .linkBtn.a1::before {
background: url(../../../images/kboat/contents/cont08_03_01_cald.svg);
}
.cptContBranch ul li .inCont .rowB .linkBtn.a2::before {
background: url(../../../images/kboat/contents/cont08_03_01_loc.svg);
}
.cptContBranch ul li .inCont .addrTxt {
font-size: 1.125rem;
line-height: 1.6;
color: var(--Gray-800);
margin-top: 12px;
}
.cptContBranch ul li .inCont .branchInfo {
margin-top: 24px;
}
.cptContBranch ul li .inCont .branchInfo dl {
margin-top: 8px;
display: flex;
font-size: 1rem;
line-height: 1.6;
}
.cptContBranch ul li .inCont .branchInfo dl:first-child {
margin-top: 0;
}
.cptContBranch ul li .inCont .branchInfo dl dt {
color: var(--Gray-800);
font-weight: 600;
width: 100px;
}
.cptContBranch ul li .inCont .branchInfo dl dd {
flex: 1;
color: var(--Gray-600);
}
.cptContBranch ul li .inCont .branchInfo dl dd b {
color: var(--Secondary);
font-weight: 600;
}
.cptContBranch ul li .comTitH2.bk h2 {
display: flex;
align-items: center;
gap: 8px;
}
.cptContBranch ul li .comTitH2.bk h2::before {
content: "";
display: block;
width: 20px;
height: 24px;
background: url(../../../images/kboat/contents/cont08_03_01_branchIcon.svg) no-repeat center;
}
@media screen and (max-width: 767px) {
.cptContBranch ul {
margin: 0 0;
}
.cptContBranch ul li {
width: 100%;
padding: 0 0;
margin-top: 0;
}
.cptContBranch ul li:nth-of-type(1), .cptContBranch ul li:nth-of-type(2), .cptContBranch ul li:nth-of-type(3) {
margin-top: 0;
}
.cptContBranch ul li .inCont {
padding: 32px 0;
border: 0;
border-bottom: 1px solid var(--Bg-Line-line-100);
border-radius: 0;
}
.cptContBranch ul li .inCont .addrTxt {
font-size: 1rem;
margin-top: 8px;
}
.cptContBranch ul li .inCont .branchInfo {
margin-top: 20px;
}
.cptContBranch ul li .inCont .branchInfo dl {
margin-top: 4px;
font-size: 0.9375rem;
}
.cptContBranch ul li .inCont .branchInfo dl dt {
width: 80px;
}
.cptContBranch ul li .inCont .rowB {
margin-top: 36px;
}
.cptContBranch ul li .inCont .rowB .linkBtn {
height: 36px;
font-size: 0.9375rem;
}
}
.cptFacInfo {
margin-top: 60px;
}
.cptFacInfo.mgH20 {
margin-top: 20px;
}
.cptFacInfo.mgH32 {
margin-top: 32px;
}
.cptFacInfo .list {
display: flex;
flex-wrap: wrap;
margin-top: 60px;
}
.cptFacInfo .list:first-child {
margin-top: 0;
}
.cptFacInfo .list .img {
margin-right: 100px;
}
.cptFacInfo .list .img img {
max-width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
.cptFacInfo .list .cont {
flex: 1;
}
.cptFacInfo .list .cont.verDiv {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cptFacInfo .list .cont .rowA dl dt {
font-size: 1.25rem;
color: var(--Gray-900);
font-weight: 700;
line-height: 1.4;
display: flex;
align-items: center;
}
.cptFacInfo .list .cont .rowA dl dt .rightTxt {
display: flex;
align-items: center;
height: 24px;
padding: 0 10px;
font-size: 0.75rem;
color: var(--Secondary);
font-weight: 600;
border-radius: 20px;
border: 1px solid var(--Point-Primary3);
margin-left: 20px;
line-height: normal;
}
.cptFacInfo .list .cont .rowA dl dd {
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
margin-top: 16px;
}
.cptFacInfo .list .cont .rowA dl dd .blueTxt {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--Point-Blue2);
}
.cptFacInfo .list .cont .rowB {
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid var(--Bg-Line-line-100);
}
.cptFacInfo .list .cont .rowB dl {
display: flex;
margin-top: 12px;
}
.cptFacInfo .list .cont .rowB dl:first-child {
margin-top: 0;
}
.cptFacInfo .list .cont .rowB dl dt {
width: 120px;
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
font-weight: 700;
}
.cptFacInfo .list .cont .rowB dl dd {
flex: 1;
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
}
.cptFacInfo .list .cont .rowB dl dd.flexAlign {
display: flex;
align-items: center;
}
.cptFacInfo .list .cont .rowB dl dd b {
font-weight: 600;
}
.cptFacInfo .list .cont .rowB dl dd .tKey {
margin-left: 20px;
}
.cptFacInfo .list .cont .rowB dl dd .popMap {
font-size: 0.9375rem;
color: var(--Primary);
cursor: pointer;
margin-left: 20px;
position: relative;
display: inline-flex;
align-items: center;
border-bottom: 1px solid var(--Primary);
line-height: 20px;
font-weight: 500;
flex-shrink: 0;
}
.cptFacInfo .list .cont .rowB dl dd .popMap::before {
content: "";
width: 16px;
height: 16px;
background: url(../../../images/kboat/contents/cont08_04_02_mapIcon.svg) no-repeat center;
}
.cptFacInfo .list .cont .rowB dl dd .popUseInfo {
font-size: 0.9375rem;
color: var(--Primary);
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
line-height: 20px;
font-weight: 500;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.cptFacInfo .list .cont .rowB dl dd .roomClass {
display: flex;
flex-wrap: wrap;
}
.cptFacInfo .list .cont .rowB dl dd .roomClass li {
width: 33.3333333%;
}
.cptFacInfo .list .cont .rowB dl dd .roomClass li em {
display: block;
color: var(--Point-Primary2);
font-weight: 700;
line-height: 1.6;
}
.cptFacInfo .list .cont .rowLink a {
display: flex;
align-items: center;
gap: 8px;
}
.cptFacInfo .list .cont .rowLink a::after {
content: "";
width: 20px;
height: 20px;
background: url(../../../images/kboat/common/ic_20_link.svg) no-repeat center;
}
.cptFacInfo .txtInfo {
margin-top: 60px;
padding: 40px 32px;
border-radius: 20px;
border: 1px solid var(--Point-Primary2);
}
.cptFacInfo .txtInfo h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--Gray-800);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 8px;
}
.cptFacInfo .txtInfo h3::before {
content: "";
width: 40px;
height: 40px;
background: url(../../../images/kboat/contents/cont28_info_icon.svg) no-repeat center;
}
.cptFacInfo .tableFacInfo {
margin-top: 20px;
}
.cptFacInfo .tableFacInfo .tableRightTxt {
margin-top: 12px;
color: var(--Gray-600);
font-size: 0.9375rem;
line-height: 1.6;
text-align: right;
}
.cptFacInfo .halfCont {
display: flex;
flex-wrap: wrap;
gap: 60px 40px;
}
.cptFacInfo .halfCont .list {
width: calc(50% - 20px);
margin-top: 0;
}
.cptFacInfo .halfCont .list .img {
margin-right: 32px;
width: 240px;
height: 200px;
}
.cptFacInfo .halfCont .list .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cptFacInfo .halfCont .list .cont .rowB {
padding-top: 0;
border-top: 0;
}
@media screen and (max-width: 1023px) {
.cptFacInfo .list .cont {
width: 100%;
margin-top: 24px;
flex: none;
}
}
@media screen and (max-width: 767px) {
.cptFacInfo.mgH32 {
margin-top: 20px;
}
.cptFacInfo .list {
margin-top: 60px;
display: block;
}
.cptFacInfo .list .img {
margin-right: 0px;
}
.cptFacInfo .list .cont {
flex: none;
width: 100%;
margin-top: 24px;
}
.cptFacInfo .list .cont .rowA dl dt {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.cptFacInfo .list .cont .rowA dl dd {
font-size: 0.9375rem;
line-height: 1.6;
margin-top: 12px;
}
.cptFacInfo .list .cont .rowB dl dt {
width: 90px;
font-size: 0.9375rem;
line-height: 1.5;
}
.cptFacInfo .list .cont .rowB dl dd {
font-size: 0.9375rem;
}
.cptFacInfo .list .cont .rowB dl dd.flexAlign {
flex-wrap: wrap;
flex-direction: column;
align-items: baseline;
}
.cptFacInfo .list .cont .rowB dl dd .popMap {
margin-left: 0;
margin-top: 4px;
}
.cptFacInfo .list .cont .rowB dl dd .tKey {
margin-left: 20px;
}
.cptFacInfo .list .cont .rowB dl dd .blk {
display: block;
}
.cptFacInfo .list .cont .rowB dl dd .roomClass {
gap: 12px;
}
.cptFacInfo .list .cont .rowB dl dd .roomClass li {
width: calc(50% - 6px);
}
.cptFacInfo .list .cont .rowB dl.mbType {
display: block;
}
.cptFacInfo .list .cont .rowB dl.mbType dt {
width: 100%;
margin-bottom: 12px;
}
.cptFacInfo .list .cont .rowLink {
margin-top: 20px;
}
.cptFacInfo .tableFacInfo .tableRightTxt {
font-size: 0.875rem;
}
.cptFacInfo .halfCont {
gap: 40px 0;
}
.cptFacInfo .halfCont .list {
width: 100%;
}
.cptFacInfo .halfCont .list .img {
margin-right: 0;
width: 100%;
}
.cptFacInfo .halfCont .list .cont .rowB {
padding-top: 16px;
border-top: 1px solid var(--Bg-Line-line-100);
}
.cptFacInfo .halfCont .list .cont .rowB dl {
margin-top: 6px;
}
}
.cptFacRental {
margin-top: 60px;
}
.cptFacRental:first-child {
margin-top: 0;
}
.cptFacRental .downBtn {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.cptFacRental .downBtn a {
display: inline-flex;
align-items: center;
gap: 4px;
height: 32px;
font-size: 0.875rem;
padding: 0 12px;
color: var(--Gray-600);
border-radius: 6px;
border: 1px solid var(--Gray-300);
background: #FFF;
}
.cptFacRental .downBtn a::after {
content: "";
width: 16px;
height: 16px;
background: url(../../../images/kboat/common/ic_16_file_download.svg) no-repeat center;
}
.cptFacRental .downBtn a:hover {
color: #000;
border: 1px solid #000;
}
.cptFacRental .downBtn a:active {
border: 1px solid #000;
background: var(--Bg-Line-bg-100);
}
.cptFacRental .downBtn a:disabled {
color: var(--Gray-300);
border: 1px solid var(--Gray-200);
background: var(--Gray-100);
}
.cptFacRental .flowGrp {
margin-top: 40px;
}
.cptFacRental .flowGrp ul {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.cptFacRental .flowGrp ul li {
flex: 1;
position: relative;
}
.cptFacRental .flowGrp ul li .contIn {
height: 100%;
min-height: 165px;
padding: 24px 10px;
border-radius: 8px;
border: 1px solid var(--Point-Primary2);
background: #fff;
text-align: center;
}
.cptFacRental .flowGrp ul li .contIn dl dt {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
color: var(--Primary);
}
.cptFacRental .flowGrp ul li .contIn dl dd {
margin-top: 12px;
font-size: 1rem;
line-height: 1.6;
color: var(--Gray-800);
}
.cptFacRental .flowGrp ul li .contIn dl dd .cauTxt {
margin-top: 4px;
font-size: 0.9375rem;
color: var(--Point-Blue2);
line-height: normal;
}
.cptFacRental .flowGrp ul li.arr {
position: relative;
width: 24px;
display: flex;
align-items: center;
flex: none;
}
.cptFacRental .flowGrp ul li.arr::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
width: 24px;
height: 24px;
padding: 0 0;
background: url(../../../images/kboat/common/ic_24_arw_right_g.svg) center no-repeat;
}
.cptFacRental .flowGrp ul li.arr.revs {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
.cptFacRental .flowGrp ul li.li3::after {
content: "";
position: absolute;
width: 24px;
height: 24px;
background: url(../../../images/kboat/common/ic_24_arw_right_g.svg) center no-repeat;
left: 50%;
margin-left: -12px;
bottom: -43px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.cptFacRental .flowGrp ul.rowA {
margin-bottom: 64px;
}
@media screen and (max-width: 767px) {
.cptFacRental {
margin: 40px -16px 0;
padding: 40px 16px 0;
border-top: 10px solid #F4F6FA;
}
.cptFacRental .downBtn {
gap: 8px;
}
.cptFacRental .mRow.right {
margin-top: 12px;
}
.cptFacRental .flowGrp ul li {
flex: none;
width: 100%;
}
.cptFacRental .flowGrp ul li .contIn {
height: auto;
padding: 24px 0;
}
.cptFacRental .flowGrp ul li.arr {
width: 100%;
height: 24px;
}
.cptFacRental .flowGrp ul li.arr::after {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.cptFacRental .flowGrp ul li.li6 {
order: 1;
}
.cptFacRental .flowGrp ul li.arr2 {
order: 2;
}
.cptFacRental .flowGrp ul li.li5 {
order: 3;
}
.cptFacRental .flowGrp ul li.arr1 {
order: 4;
}
.cptFacRental .flowGrp ul li.li4 {
order: 5;
}
.cptFacRental .flowGrp ul li.arr.revs {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
}
.cptLocation {
margin-top: 60px;
}
.cptLocation:first-child {
margin-top: 0;
}
.cptLocation .kkoMap {
margin: 20px 0;
}
.cptLocation .kkoMap .root_daum_roughmap .map {
border-radius: 16px;
}
.cptLocation .kkoMap .root_daum_roughmap .map_border {
display: none;
}
.cptLocation .parkInfo {
margin-top: 32px;
}
.cptLocation .parkInfo .img img {
width: 100%;
height: auto;
border-radius: 16px;
display: block;
}
.cptLocation .parkInfo .txtInfo {
margin-top: 20px;
display: flex;
padding: 32px 120px;
justify-content: space-between;
align-items: center;
border-radius: 12px;
background: var(--Bg-Line-bg-200);
}
.cptLocation .comBasicList.space, .cptLocation .cptEtcInfo .infoBox .info dd .space.infoList, .cptEtcInfo .infoBox .info dd .cptLocation .space.infoList, .cptLocation .cptDescList .thumList .thumItem .descArea dd.space, .cptDescList .thumList .thumItem .descArea .cptLocation dd.space, .cptLocation .cptImgGuideBox .boxArea .viewArea .space.dotList, .cptImgGuideBox .boxArea .viewArea .cptLocation .space.dotList {
padding: 0 16px;
}
.cptLocation .parkDet ul li {
min-height: 22.5px;
margin-top: 8px;
}
.cptLocation .parkDet ul li:first-child {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.cptLocation {
margin-top: 40px;
}
.cptLocation .kkoMap .root_daum_roughmap .wrap_map {
height: 300px !important;
}
.cptLocation .parkInfo {
margin-top: 24px;
padding: 12px 12px;
}
.cptLocation .parkInfo .txtInfo {
margin-top: 12px;
padding: 20px 20px;
flex-wrap: wrap;
}
.cptLocation .parkInfo .txtInfo .list {
width: 100%;
margin-top: 12px;
}
.cptLocation .parkInfo .txtInfo .list:first-child {
margin-top: 0;
}
}
.cptRoadMap {
margin-top: 20px;
}
.cptRoadMap .list {
padding-bottom: 62px;
display: flex;
position: relative;
}
.cptRoadMap .list:last-child {
padding-bottom: 0;
}
.cptRoadMap .list:last-child::after {
display: none;
}
.cptRoadMap .list::after {
content: "";
position: absolute;
top: 40px;
left: 42px;
width: 2px;
height: 100%;
z-index: -1;
}
.cptRoadMap .list.step1::after {
background: #41CCFF;
}
.cptRoadMap .list.step2::after {
background: #4ABEFF;
}
.cptRoadMap .list.step3::after {
background: #27ABF5;
}
.cptRoadMap .list.step4::after {
background: #218EE2;
}
.cptRoadMap .list.step5::after {
background: #3070B4;
}
.cptRoadMap .list .icBox {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 86px;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.cptRoadMap .list .icBox .txt {
font-size: 0.8125rem;
font-weight: 500;
color: var(--Bg-Line-white);
line-height: 1;
}
.cptRoadMap .list .icBox .num {
font-size: 2.5rem;
font-weight: 800;
color: var(--Bg-Line-white);
line-height: 1;
}
.cptRoadMap .list .txtBox {
padding-left: 60px;
flex: 1;
}
.cptRoadMap .list .txtBox dt {
color: var(--Gray-900);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 4px;
}
.cptRoadMap .list .txtBox dd {
color: var(--Gray-700);
font-size: 0.9375rem;
line-height: 1.6;
word-break: keep-all;
}
.cptRoadMap .list .txtBox h2 {
font-size: 1.25rem;
color: var(--Gray-900);
font-weight: 700;
line-height: 1.4;
}
.cptRoadMap .list .icBox.icon1 {
background-image: url(../../../images/kboat/contents/cont28_05_02_step1.svg);
}
.cptRoadMap .list .icBox.icon2 {
background-image: url(../../../images/kboat/contents/cont28_05_02_step2.svg);
}
.cptRoadMap .list .icBox.icon3 {
background-image: url(../../../images/kboat/contents/cont28_05_02_step3.svg);
}
.cptRoadMap .list .icBox.icon4 {
background-image: url(../../../images/kboat/contents/cont28_05_02_step4.svg);
}
.cptRoadMap .list .icBox.icon5 {
background-image: url(../../../images/kboat/contents/cont28_05_02_step5.svg);
}
.cptRoadMap .list .icBox.icon6 {
background-image: url(../../../images/kboat/contents/cont28_05_02_step6.svg);
}
@media screen and (max-width: 767px) {
.cptRoadMap {
margin-top: 40px;
}
.cptRoadMap .list {
padding-bottom: 40px;
}
.cptRoadMap .list::after {
display: none;
}
.cptRoadMap .list .icBox {
width: 32px;
height: 36px;
position: absolute;
top: 0;
left: 0;
}
.cptRoadMap .list .icBox .txt {
display: none;
}
.cptRoadMap .list .icBox .num {
font-size: 0.875rem;
font-weight: 700;
}
.cptRoadMap .list .txtBox {
padding: 0px;
}
.cptRoadMap .list .txtBox dt {
font-size: 0.9375rem;
font-weight: 700;
margin-bottom: 8px;
}
.cptRoadMap .list .txtBox dd {
font-size: 0.875rem;
}
.cptRoadMap .list .txtBox h2 {
font-size: 1.125rem;
line-height: 1.3;
padding-left: 48px;
padding-top: 6px;
}
}
.cptStepLine {
margin-top: 60px;
}
.cptStepLine:first-child {
margin-top: 0;
}
.cptStepLine .stepGroup .stepItem {
width: calc(100% - 22px);
border-left: 2px dashed var(--Gray-300);
margin-left: 22px;
padding: 56px 0 60px 40px;
position: relative;
}
.cptStepLine .stepGroup .stepItem:last-child {
border-left: none;
}
.cptStepLine .stepGroup .stepItem .stepTit {
display: flex;
position: absolute;
top: 0;
left: -18px;
z-index: 9;
}
.cptStepLine .stepGroup .stepItem .stepTit .num {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
line-height: 36px;
font-size: 1rem;
color: #fff;
font-weight: 700;
background: var(--Point-Blue);
display: inline-block;
vertical-align: middle;
}
.cptStepLine .stepGroup .stepItem .stepTit .tit {
margin-left: 20px;
font-size: 1.5rem;
color: var(--Gray-800);
font-weight: 700;
}
.cptStepLine .stepGroup .stepItem .stepCont {
padding: 24px 32px;
border-radius: 12px;
background: var(--Bg-Line-bg-100);
}
.cptStepLine .stepGroup .stepItem .stepCont .txt {
font-size: 1rem;
color: var(--Gray-800);
}
.cptStepLine .stepGroup .stepItem .stepCont .subTit {
margin-top: 24px;
font-size: 1.125rem;
font-weight: 700;
color: var(--Primary);
}
.cptStepLine .stepGroup .stepItem .stepCont .subTit:first-child {
margin-top: 0;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup {
margin-top: 12px;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup:first-child {
margin-top: 0;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup .item {
margin-top: 8px;
padding-left: 11px;
font-size: 1rem;
color: var(--Gray-800);
text-align: left;
position: relative;
word-break: keep-all;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup .item em {
font-weight: 600;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup .item .adds {
color: var(--Point-Primary2);
font-weight: 500;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup .item:first-child {
margin-top: 0;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup .item::after {
display: block;
content: "";
width: 3px;
height: 3px;
background: var(--Gray-400);
position: absolute;
left: 0;
top: 10px;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup.contTit .item {
display: flex;
column-gap: 3px;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup.contTit .item .tit {
font-weight: 700;
}
@media screen and (max-width: 767px) {
.cptStepLine {
margin-top: 40px;
}
.cptStepLine .stepGroup .stepItem {
width: 100%;
border-left: none;
margin-left: 0;
padding: 0;
margin-bottom: 40px;
}
.cptStepLine .stepGroup .stepItem:last-child {
margin-bottom: 0;
}
.cptStepLine .stepGroup .stepItem .stepTit {
margin-bottom: 12px;
display: flex;
position: static;
}
.cptStepLine .stepGroup .stepItem .stepTit .num {
width: 32px;
height: 32px;
margin: 0 4px;
line-height: 32px;
font-size: 0.9375rem;
}
.cptStepLine .stepGroup .stepItem .stepTit .tit {
margin-left: 8px;
font-size: 1.25rem;
}
.cptStepLine .stepGroup .stepItem .stepCont {
padding: 16px 20px;
}
.cptStepLine .stepGroup .stepItem .stepCont .txt {
font-size: 0.9375rem;
}
.cptStepLine .stepGroup .stepItem .stepCont .subTit {
margin-top: 10px;
font-size: 1rem;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup {
margin-top: 8px;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup .item {
font-size: 0.9375rem;
}
.cptStepLine .stepGroup .stepItem .stepCont .listGroup.contTit .item {
display: block;
}
}
.cptSchHd {
position: relative;
z-index: 97;
}
.cptSchHd .schDim {
width: 100%;
height: 100%;
font-size: 0;
background: #FFF;
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
.cptSchHd .mView {
display: none;
}
.cptSchHd .schHdClose {
position: fixed;
top: 176px;
right: 0;
width: 60px;
height: 60px;
background: url(../../../images/kboat/common/ic_28_close.svg) no-repeat left bottom;
cursor: pointer;
z-index: 4;
}
.cptSchHd .cptArea {
padding: 80px 0;
background: var(--Bg-Line-bg-100);
position: relative;
z-index: 3;
overflow-y: auto;
height: calc(100vh - 176px);
}
.cptSchHd .cptArea .inCont {
max-width: 960px;
padding: 0 80px;
margin: 0 auto;
}
.cptSchHd .cptArea .inCont h2 {
font-size: 3.125rem;
color: var(--Gray-900);
font-weight: 200;
line-height: 1.3;
}
.cptSchHd .cptArea .inCont h2 b {
font-weight: 600;
}
.cptSchHd .cptArea .inCont h2 .blk {
display: inline-block;
}
.cptSchHd .cptArea .inCont .schBox {
margin-top: 28px;
height: 64px;
position: relative;
border: 3px solid transparent;
border-radius: 8px;
background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #2F9BD8 0%, #1F4F82 100%);
background-origin: border-box;
background-clip: content-box, border-box;
}
.cptSchHd .cptArea .inCont .schBox .schFrmIpt {
width: 100%;
height: 100%;
border: 0;
background: #FFF;
border-radius: 8px;
padding: 0 20px;
font-size: 1.125rem;
font-weight: 600;
color: var(--Gray-900);
}
.cptSchHd .cptArea .inCont .schBox .schFrmIpt::placeholder {
color: var(--Gray-400);
font-weight: 400;
}
.cptSchHd .cptArea .inCont .schBox .schFrmIpt:focus-visible {
outline: none;
}
.cptSchHd .cptArea .inCont .schBox .schFrmIptBtn {
font-size: 0;
position: absolute;
top: 0;
right: 0;
width: 68px;
height: 60px;
background: url(../../../images/kboat/common/ic_28_search.svg) no-repeat center;
z-index: 1;
}
.cptSchHd .cptArea .inCont .schBox .schBoxRel {
display: none;
position: absolute;
top: 70px;
left: -3px;
width: 318px;
border-radius: 12px;
padding: 10px 0;
border: 1px solid var(--Gray-800);
background: #FFF;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.cptSchHd .cptArea .inCont .schBox .schBoxRel:not(:has(ul)) {
display: none !important;
}
.cptSchHd .cptArea .inCont .schBox .schBoxRel ul li {
font-size: 1rem;
color: var(--Gray-800);
line-height: 1.6;
padding: 6px 16px;
}
.cptSchHd .cptArea .inCont .schBox .schBoxRel ul li strong {
color: var(--Primary);
font-weight: 600;
}
.cptSchHd .cptArea .inCont .schBox .schBoxRel ul li:hover {
background: var(--Bg-Line-bg-300);
cursor: pointer;
font-weight: 600;
}
.cptSchHd .cptArea .inCont .schBox .schFrmIpt:focus + .schFrmIptBtn + .schBoxRel {
display: block;
}
@media screen and (max-width: 767px) {
.cptSchHd {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
padding-top: 68px;
overflow: auto;
}
.cptSchHd .schHdClose {
display: none;
}
.cptSchHd .mView {
display: flex;
background: #FFF;
height: 68px;
align-items: center;
padding: 0 16px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptSchHd .mView .mTit {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
}
.cptSchHd .mView .mSchHdClose {
position: absolute;
top: 20px;
right: 16px;
width: 24px;
height: 24px;
z-index: 1;
background: url(../../../images/kboat/common/ic_28_close.svg) no-repeat center;
cursor: pointer;
}
.cptSchHd .cptArea {
padding: 40px 0;
height: calc(100vh - 68px);
}
.cptSchHd .cptArea .schHdClose {
display: none;
}
.cptSchHd .cptArea .inCont {
padding: 0 16px;
}
.cptSchHd .cptArea .inCont h2 {
font-size: 1.75rem;
font-weight: 300;
}
.cptSchHd .cptArea .inCont h2 .blk {
display: block;
}
.cptSchHd .cptArea .inCont .schBox {
margin-top: 20px;
height: 56px;
border: 2px solid transparent;
}
.cptSchHd .cptArea .inCont .schBox .schFrmIpt {
font-size: 1rem;
padding: 0 12px;
}
.cptSchHd .cptArea .inCont .schBox .schFrmIptBtn {
height: 52px;
width: 52px;
background-size: 24px;
}
.cptSchHd .cptArea .inCont .schBox .schBoxRel {
top: 62px;
left: 0;
width: 100%;
}
}
.fixScroll {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.cptSchRst .schRstArea {
display: flex;
gap: 80px;
}
.cptSchRst .schRstArea .rstLe {
flex: 1;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty {
margin-top: 80px;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty h3 {
font-size: 1.875rem;
color: var(--Gray-800);
line-height: 1.4;
font-weight: 300;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty h3 strong {
font-weight: 600;
color: var(--Gray-900);
position: relative;
z-index: 1;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty h3 strong::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 13px;
background: #B3E8FF;
z-index: -1;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty h3 strong.hideMaker:after {
display: none;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty p {
font-size: 1rem;
color: var(--Gray-600);
line-height: 1.6;
margin-top: 12px;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty p .blk {
display: inline-block;
}
.cptSchRst .schRstArea .rstRi {
width: 240px;
}
.cptSchRst .schRstArea .rstRi .comPopularStx .listTen ul {
gap: 16px;
}
.cptSchRst .schRstArea .mView {
display: none;
}
@media screen and (max-width: 1280px) {
.cptSchRst .rstRi.pcView {
display: none;
}
.cptSchRst .mView {
display: block;
}
}
@media screen and (max-width: 767px) {
.cptSchRst .schRstArea {
gap: 0;
display: block;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty {
margin-top: 60px;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty h3 {
font-size: 1.375rem;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty h3 strong::after {
height: 11px;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty p {
font-size: 0.9375rem;
}
.cptSchRst .schRstArea .rstLe .schRstEmpty p .blk {
display: block;
}
.cptSchRst .schRstArea .rstRi {
width: auto;
margin: 100px -16px 0;
padding: 0 16px;
padding-top: 40px;
border-top: 10px solid #F4F6FA;
}
}
.cptSchRstCont {
margin-top: 60px;
}
.cptSchRstCont:first-child {
margin-top: 0;
}
.cptSchRstCont .topSort {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.cptSchRstCont .topSort .sortTit {
font-size: 1.5rem;
font-weight: 700;
color: var(--Gray-900);
line-height: 1.4;
}
.cptSchRstCont .topSort .sortSelect .comGroupTop {
margin-bottom: 0;
}
.cptSchRstCont .topSort .sortSelect .frmBox {
width: 210px;
min-width: 210px;
}
.cptSchRstCont .sortMore {
display: inline-block;
font-size: 0.9375rem;
color: var(--Gray-600);
line-height: 1.6;
border-bottom: 1px solid var(--Gray-600);
}
.cptSchRstCont .ctt .link {
display: block;
padding: 24px 0;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptSchRstCont .ctt dl dt {
font-size: 1.125rem;
color: var(--Gray-800);
font-weight: 600;
line-height: 1.6;
position: relative;
z-index: 1;
}
.cptSchRstCont .ctt dl dt a {
color: var(--Gray-800);
display: inline-block;
}
.cptSchRstCont .ctt .btInfo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 12px;
}
.cptSchRstCont .ctt .locTxt {
display: flex;
}
.cptSchRstCont .ctt .locTxt li {
font-size: 0.9375rem;
color: var(--Gray-600);
padding-right: 16px;
position: relative;
}
.cptSchRstCont .ctt .locTxt li::after {
content: "";
position: absolute;
top: 3px;
right: 0;
width: 16px;
height: 16px;
background: url(../../../images/kboat/common/ic_loca_arr.svg) center no-repeat;
}
.cptSchRstCont .ctt .locTxt li:last-child::after {
display: none;
}
.cptSchRstCont .ctt .bbsDate {
display: flex;
gap: 0 24px;
flex-wrap: wrap;
}
.cptSchRstCont .ctt .bbsDate li {
font-size: 0.9375rem;
color: var(--Gray-600);
}
.cptSchRstCont .ctt .bbsDate li.cate {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 12px;
}
.cptSchRstCont .ctt .bbsDate li.cate > span {
height: 18px;
padding-left: 18px;
position: relative;
}
.cptSchRstCont .ctt .bbsDate li.cate > span:first-child {
padding-left: 0;
}
.cptSchRstCont .ctt .bbsDate li.cate > span:first-child::before {
display: none;
}
.cptSchRstCont .ctt .bbsDate li.cate > span::before {
content: "";
position: absolute;
top: 3px;
left: 1px;
width: 16px;
height: 16px;
display: block;
background: url(../../../images/kboat/common/ic_loca_arr.svg) center no-repeat;
}
.cptSchRstCont .ctt .rstContent {
font-size: 0.9375rem;
color: var(--Gray-600);
line-height: 1.6;
margin-top: 4px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: normal;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptSchRstCont .ctt .rstContent .dot {
width: 4px;
height: 4px;
display: inline-block;
border-radius: 50%;
background: var(--Gray-300);
margin: 3px 8px;
}
.cptSchRstCont .ctt .rstContent a {
color: var(--Gray-600);
}
.cptSchRstCont .ctt .rstContent a a {
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: normal;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptSchRstCont .ctt .bbsFile {
margin-top: 12px;
}
.cptSchRstCont .ctt .bbsFile .fileAdd {
padding: 12px 12px;
background: var(--Bg-Line-bg-200);
border-radius: 12px;
}
.cptSchRstCont .ctt .bbsFile .fileAdd a {
display: block;
font-size: 1rem;
color: var(--Gray-900);
line-height: 1.6;
}
.cptSchRstCont .ctt .bbsFile .fileAdd a::before {
content: "";
width: 20px;
height: 20px;
background: url(../../../images/kboat/common/ic_20_file.svg) center no-repeat;
display: inline-block;
vertical-align: text-top;
margin-right: 8px;
}
.cptSchRstCont .ctt .bbsFile .bbsCont {
padding: 12px 12px;
background: var(--Bg-Line-bg-200);
border-radius: 12px;
margin-top: 8px;
}
.cptSchRstCont .ctt .bbsFile .bbsCont a {
font-size: 1rem;
color: var(--Gray-600);
line-height: 1.6;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: normal;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptSchRstCont .ctt .stxLine {
position: relative;
color: var(--Gray-800);
z-index: 1;
font-weight: 600;
}
.cptSchRstCont .ctt .stxLine::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 37%;
background: #B3E8FF;
z-index: -1;
}
.cptSchRstCont .ctt .playerRst {
display: flex;
align-items: center;
}
.cptSchRstCont .ctt .playerRst .pic {
width: 84px;
}
.cptSchRstCont .ctt .playerRst .pic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cptSchRstCont .ctt .playerRst dl {
flex: 1;
margin-left: 24px;
}
.cptSchRstCont .ctt .playerRst dl .playerName {
display: flex;
align-items: center;
}
.cptSchRstCont .ctt .playerRst dl .playerName .cateGroup {
display: flex;
margin-left: 8px;
gap: 4px;
}
.cptSchRstCont .ctt .playerRst dl .playerName .cateGroup .cate {
height: 24px;
padding: 0 8px;
border-radius: 4px;
line-height: 24px;
font-size: 0.75rem;
color: #fff;
font-weight: 600;
background: var(--Gray-500);
display: inline-block;
}
.cptSchRstCont .ctt .playerRst dl .playerName .cateGroup .cate.blue {
background: var(--Point-Blue);
}
.cptSchRstCont .ctt .playerRst dl .playerName .cateGroup .cate.mint {
background: var(--Point-Primary2);
}
.cptSchRstCont .ctt .playerRst dl .playerName .cateGroup .cate.orange {
background: var(--Point-Orange);
}
.cptSchRstCont .ctt + .btnMore {
margin-top: 40px;
}
.cptSchRstCont .thumGall {
margin: 32px -20px 0;
display: flex;
flex-wrap: wrap;
gap: 30px 0;
}
.cptSchRstCont .thumGall .list {
width: 25%;
padding: 0 20px;
}
.cptSchRstCont .thumGall .list a {
display: block;
cursor: default;
}
.cptSchRstCont .thumGall .list a .thum {
position: relative;
padding-bottom: 56.25%;
margin-bottom: 8px;
border-radius: 12px;
overflow: hidden;
}
.cptSchRstCont .thumGall .list a .thum img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.cptSchRstCont .thumGall .list a .thum + .videoPlayback {
margin-top: 20px;
}
.cptSchRstCont .thumGall .list a .thumTit {
font-size: 1.125rem;
color: var(--Gray-800);
font-weight: 600;
line-height: 1.6;
position: relative;
z-index: 1;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
overflow: hidden;
margin-bottom: 8px;
}
.cptSchRstCont .thumGall .list a .bbsDate {
margin-bottom: 8px;
}
.cptSchRstCont .thumGall .list a .videoPlayback {
display: flex;
gap: 8px;
height: 66px;
}
.cptSchRstCont .thumGall .list a .videoPlayback > button[class*=btnPlay] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
gap: 4px;
padding: 12px 0px 8px;
border-radius: 8px;
border: 1px solid var(--Bg-Line-line-100, #E1E4EA);
background: var(--Bg-Line-bg-200, #F3F5F8);
}
.cptSchRstCont .thumGall .list a .videoPlayback > button[class*=btnPlay] span {
color: var(--Gray-700, #414347);
font-size: 0.875rem;
font-weight: 500;
line-height: 160%; /* 22.4px */
}
.cptSchRstCont .thumGall .list a .videoPlayback > button[class*=btnPlay]:before {
content: "";
flex-shrink: 0;
width: 20px;
height: 20px;
}
.cptSchRstCont .thumGall .list a .videoPlayback > button[class*=btnPlay]:disabled {
cursor: default;
}
.cptSchRstCont .thumGall .list a .videoPlayback > button[class*=btnPlay]:disabled:before {
opacity: 0.5;
}
.cptSchRstCont .thumGall .list a .videoPlayback > button[class*=btnPlay]:disabled span {
color: var(--Gray-300);
}
.cptSchRstCont .thumGall .list a .videoPlayback > button.btnPlayIntro:before {
background: url("../../../images/kboat/contents/cont04_01_icon2.svg") no-repeat 50%;
}
.cptSchRstCont .thumGall .list a .videoPlayback > button.btnPlayRace:before {
background: url("../../../images/kboat/contents/cont04_01_icon1.svg") no-repeat 50%;
}
.cptSchRstCont .thumGall .list a .videoPlayback + * {
margin-top: 16px;
}
.cptSchRstCont .thumGall.fullSize {
gap: 40px 0;
}
.cptSchRstCont .thumGall.fullSize .list > a .thumTit {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptSchRstCont .thumGall + .btnMore {
margin-top: 40px;
}
.cptSchRstCont .btnMore {
display: flex;
justify-content: center;
}
.cptSchRstCont .btnMore .btn {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
min-width: 160px;
}
.cptSchRstCont .btnMore .btn:after {
content: "";
width: 12px;
height: 12px;
background: url("../../../images/kboat/common/ic_12_arr_bottom.svg") center no-repeat;
background-size: 100%;
}
@media screen and (max-width: 1280px) {
.cptSchRstCont .thumGall .list {
width: 33.33%;
}
}
@media screen and (max-width: 1023px) {
.cptSchRstCont .thumGall .list {
width: 50%;
}
}
@media screen and (max-width: 767px) {
.cptSchRstCont {
margin-top: 40px;
}
.cptSchRstCont .topSort {
min-height: 36px;
margin-bottom: 8px;
}
.cptSchRstCont .topSort .sortTit {
font-size: 1.25rem;
}
.cptSchRstCont .topSort .sortSelect .frmBox {
width: 110px;
min-width: 110px;
}
.cptSchRstCont .topSort .sortSelect .frmBox select.iptSlt {
height: 36px;
font-size: 0.875rem;
padding: 0 12px;
background-size: 16px;
background-position: 80px center;
}
.cptSchRstCont .sortMore {
font-size: 0.875rem;
}
.cptSchRstCont .ctt .link {
padding: 16px 0;
}
.cptSchRstCont .ctt dl dt {
font-size: 1rem;
}
.cptSchRstCont .ctt .btInfo {
margin-top: 8px;
}
.cptSchRstCont .ctt .locTxt {
display: flex;
}
.cptSchRstCont .ctt .locTxt li {
font-size: 0.875rem;
}
.cptSchRstCont .ctt .locTxt li::after {
width: 12px;
height: 12px;
top: 4px;
right: 2px;
}
.cptSchRstCont .ctt .bbsDate {
display: flex;
gap: 0 16px;
}
.cptSchRstCont .ctt .bbsDate li {
font-size: 0.875rem;
}
.cptSchRstCont .ctt .rstContent {
font-size: 0.875rem;
}
.cptSchRstCont .ctt .rstContent .dot {
margin: 3px 4px;
}
.cptSchRstCont .ctt .rstContent a {
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: normal;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptSchRstCont .ctt .bbsFile {
margin-top: 12px;
}
.cptSchRstCont .ctt .bbsFile .fileAdd a {
font-size: 0.9375rem;
gap: 0;
}
.cptSchRstCont .ctt .bbsFile .fileAdd a::before {
margin-right: 8px;
}
.cptSchRstCont .ctt .bbsFile .bbsCont {
padding: 12px 12px;
background: var(--Bg-Line-bg-200);
border-radius: 12px;
margin-top: 8px;
}
.cptSchRstCont .ctt .bbsFile .bbsCont a {
font-size: 1rem;
color: var(--Gray-600);
line-height: 1.6;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: normal;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cptSchRstCont .ctt .stxLine {
position: relative;
color: var(--Gray-800);
z-index: 1;
font-weight: 600;
}
.cptSchRstCont .ctt .stxLine::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 37%;
background: #B3E8FF;
z-index: -1;
}
.cptSchRstCont .ctt .playerRst {
display: flex;
align-items: center;
}
.cptSchRstCont .ctt .playerRst .pic {
width: 84px;
}
.cptSchRstCont .ctt .playerRst .pic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cptSchRstCont .ctt .playerRst dl {
margin-left: 16px;
}
.cptSchRstCont .ctt .playerRst dl .playerName .cateGroup .cate {
height: 20px;
line-height: 20px;
}
.cptSchRstCont .thumGall {
margin: 24px -12px 0;
gap: 24px 0;
}
.cptSchRstCont .thumGall .list {
width: 50%;
padding: 0 12px;
}
.cptSchRstCont .thumGall .list a {
display: block;
}
.cptSchRstCont .thumGall .list a .thum {
margin-bottom: 4px;
}
.cptSchRstCont .thumGall .list a .thum img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.cptSchRstCont .thumGall .list a .thumTit {
font-size: 1rem;
margin-bottom: 4px;
}
.cptSchRstCont .thumGall .list a .bbsDate {
margin-bottom: 4px;
}
.cptSchRstCont .thumGall.fullSize {
gap: 28px;
margin: 0;
}
.cptSchRstCont .thumGall.fullSize .list {
width: 100%;
padding: 0;
}
.cptSchRstCont .thumGall.fullSize .list a .thum + .videoPlayback {
margin-top: 12px;
}
.cptSchRstCont .thumGall.fullSize .list a .videoPlayback {
height: 40px;
}
.cptSchRstCont .thumGall.fullSize .list a .videoPlayback > button[class*=btnPlay] {
min-width: auto;
flex-direction: row;
justify-content: center;
padding: 0 8px;
}
.cptSchRstCont .thumGall.fullSize .list a .videoPlayback > button[class*=btnPlay] span {
font-size: 0.8125rem;
font-weight: 400;
line-height: 1;
}
.cptSchRstCont .btnMore .btn {
width: 100%;
font-size: 0.9375rem;
}
}
.cptTheater {
overflow-x: hidden;
}
.cptTheater .sectArea {
position: relative;
max-width: 1480px;
margin: 100px auto;
padding: 0 20px;
}
.cptTheater .sectArea .btnMore {
display: block;
width: 160px;
height: 48px;
margin: 40px auto 0;
padding: 0 24px;
font-size: 1rem;
font-weight: 500;
border-radius: 8px;
line-height: 46px;
color: var(--Primary);
border: 1px solid var(--Primary);
}
.cptTheater .sectArea .btnMore::before {
content: "+ ";
}
.cptTheater .sectArea .btnMore:hover {
color: #143E69;
border-color: #143E69;
background-color: rgba(0, 0, 0, 0.025);
}
.cptTheater .sectArea .btnMore:active {
color: #14314F;
border-color: #14314F;
}
.cptTheater .sectArea .btnMore:disabled {
color: var(--Gray-300);
border: 1px solid var(--Gray-200);
background: var(--Gray-100);
}
.cptTheater .sectArea[class*=addBg] {
position: relative;
max-width: 100%;
padding: 80px 0;
z-index: 0;
overflow: hidden;
}
.cptTheater .sectArea[class*=addBg]::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1780px;
max-width: 100%;
border-radius: 0px 100px;
z-index: -1;
transform: translateX(-50%);
}
.cptTheater .sectArea[class*=addBg].addBg01::before {
background: linear-gradient(270deg, #EEF9FA 0%, #F2F5FD 100%);
}
.cptTheater .sectArea[class*=addBg] > .inner {
position: relative;
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
}
.cptTheater .topArea + .sectArea {
margin-top: 80px;
}
.cptTheater .sectTit {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.cptTheater .sectTit .subTit {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
font-size: 1.25rem;
font-weight: 600;
color: var(--Primary);
}
.cptTheater .sectTit .tit {
font-size: 2.5rem;
font-weight: 600;
color: var(--Gray-800);
}
.cptTheater .sectTit .icon img {
vertical-align: top;
}
.cptTheater .sectTit .tabMenuGroup {
margin-left: auto;
}
.cptTheater .sortBtn {
display: flex;
height: 45px;
margin-left: 20px;
padding: 4px;
border-radius: 24px;
background-color: var(--Primary);
}
.cptTheater .sortBtn button {
height: 37px;
padding: 0 20px;
font-size: 1.125rem;
color: #fff;
border-radius: 20px;
}
.cptTheater .sortBtn button.on {
color: var(--Primary);
background-color: #fff;
}
.cptTheater [class*=swiper-] .btnPrev,
.cptTheater [class*=swiper-] .btnNext {
position: absolute;
top: calc(50% - 45px);
width: 50px;
height: 50px;
margin-top: -25px;
font-size: 0;
border-radius: 50%;
border: 1px solid var(--Bg-Line-line-100);
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.cptTheater [class*=swiper-] .btnPrev + button,
.cptTheater [class*=swiper-] .btnNext + button {
margin-left: 12px;
}
.cptTheater [class*=swiper-] .btnPrev:disabled,
.cptTheater [class*=swiper-] .btnNext:disabled {
opacity: 0.5;
}
.cptTheater [class*=swiper-] .btnPrev {
left: 0;
background: #fff url(../../../images/kboat/common/ic_20_tab_left.svg) center no-repeat;
background-size: 28px auto;
}
.cptTheater [class*=swiper-] .btnNext {
right: 0;
background: #fff url(../../../images/kboat/common/ic_20_tab_right.svg) center no-repeat;
background-size: 28px auto;
}
.cptTheater .swiper-autoheight {
height: auto;
}
.cptTheater .swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.cptTheater .swiper-autoheight .swiper-slide {
height: auto;
}
.cptTheater .comSchStx .schStx {
position: relative;
padding-left: 113px;
}
.cptTheater .comSchStx .schStx .schTit {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
height: 40px;
min-width: 113px;
padding-right: 20px;
font-size: 1.25rem;
}
.cptTheater .comSchStx .schStx .schStxRst {
margin-top: 0;
}
.cptTheater .comSchStx .schStx .schStxRst .schStxSlide {
padding-right: 94px;
}
.cptTheater .comSchStx .schStx .schStxRst .swiper-slide {
padding-right: 8px;
}
.cptTheater .comSchStx .schStx .schStxRst .swiper-slide .sTxt {
margin: 0;
padding-right: 20px;
border-color: transparent;
background-color: var(--Bg-Line-line-300);
}
.cptTheater .comSchStx .schStx .schStxRst .swiper-slide .sTxt::before {
content: "#";
}
.cptTheater .comSchStx .schStx .schStxSlidePage {
width: auto;
}
.cptTheater .comSchStx .schStx .schStxSlidePage::before {
width: calc(100% + 43px);
background: linear-gradient(90deg, rgba(249, 250, 252, 0.3) -8.6%, #fff 30.4%);
}
.cptTheater .comSchStx .schStx .schStxSlidePage button + button {
margin-left: 10px;
}
.cptTheater .newsInfo .sectTit {
position: absolute;
top: 0;
left: 20px;
flex-direction: column;
align-items: flex-start;
width: 360px;
min-height: 304px;
padding: 40px;
border-radius: 0px 80px 0px 0px;
background-color: var(--Primary);
}
.cptTheater .newsInfo .sectTit::after {
content: "";
position: absolute;
bottom: -50px;
left: 30px;
width: 150px;
height: 160px;
background: url(../../../images/kboat/common/hodol_bbs_news.svg) center no-repeat;
}
.cptTheater .newsInfo .sectTit .subTit {
color: rgba(255, 255, 255, 0.7);
}
.cptTheater .newsInfo .sectTit .tit {
color: #fff;
}
.cptTheater .newsInfo .listGallery {
position: relative;
padding: 78px 0 0 236px;
z-index: 1;
}
.cptTheater .newsInfo .listGallery .listGroup {
align-items: flex-start;
}
.cptTheater .newsInfo .listGallery .listGroup > li:nth-child(1) {
margin-bottom: 82px;
transform: translateY(82px);
}
.cptTheater .newsInfo .listGallery .listGroup > li:nth-child(3) {
margin-bottom: 42px;
transform: translateY(42px);
}
.cptTheater .eventNoti {
background: linear-gradient(90deg, #EFFDFF 0%, #E7F3FC 100%);
}
.cptTheater .eventNoti > .inner {
position: relative;
max-width: 1480px;
margin: 0 auto;
padding: 60px 375px 60px 407px;
}
.cptTheater .eventNoti > .inner::after {
content: "";
position: absolute;
bottom: 0;
right: -30px;
width: 120px;
height: 120px;
background: url(../../../images/kboat/common/hodol_bbs_event.svg) center no-repeat;
}
.cptTheater .eventNoti .sectTit {
position: absolute;
top: 50%;
left: 20px;
margin: 0;
padding-top: 2px;
transform: translateY(-50%);
}
.cptTheater .eventNoti .sectTit .subTit {
width: auto;
margin-right: 16px;
font-size: 1.125rem;
}
.cptTheater .eventNoti .sectTit .tit {
font-size: 2rem;
}
.cptTheater .eventNoti .listEvent {
position: relative;
padding-right: 100px;
}
.cptTheater .eventNoti .listEvent .infoBox {
display: flex;
column-gap: 20px;
}
.cptTheater .eventNoti .listEvent .infoBox .title {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptTheater .eventNoti .listEvent .infoBox .date {
color: var(--Gray-600);
}
.cptTheater .eventNoti .listEvent .imgBox {
position: absolute;
left: calc(100% + 54px);
bottom: calc(100% - 50px);
display: flex;
width: 262px;
height: 154px;
padding: 4px;
border-radius: 8px;
background-color: #A3D3E7;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.cptTheater .eventNoti .listEvent .imgBox .bg {
width: 100%;
border-radius: 6px;
background-size: cover;
}
.cptTheater .eventNoti .listEvent .txtMore {
position: absolute;
top: 0;
right: 0;
color: var(--Primary);
}
.cptTheater .eventNoti .listEvent .txtMore::before {
content: "+ ";
}
@media screen and (min-width: 1481px) {
.cptTheater .popularInfo .listGallery .listGroup > li:nth-child(1) {
width: 26.5625%;
}
.cptTheater .popularInfo .listGallery .listGroup > li:nth-child(2) {
width: 21.875%;
margin-bottom: 50px;
transform: translateY(50px);
}
.cptTheater .popularInfo .listGallery .listGroup > li:nth-child(3) {
width: 23.4375%;
transform: translateY(-40px);
}
.cptTheater .popularInfo .listGallery .listGroup > li:nth-child(4) {
flex: 1;
width: auto;
margin-bottom: 30px;
transform: translateY(30px);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.cptTheater .newsInfo .sectTit {
min-height: 270px;
}
.cptTheater .newsInfo .listGallery .listGroup .listItem {
width: calc(50% - 20px) !important;
}
.cptTheater .newsInfo .listGallery .listGroup > li:nth-child(3) {
display: none;
}
.cptTheater .eventNoti > .inner {
padding-left: 220px;
padding-right: 113px;
}
.cptTheater .eventNoti .sectTit .subTit {
display: none;
}
.cptTheater .eventNoti .listEvent .imgBox {
display: none;
}
}
@media screen and (max-width: 767px) {
.cptTheater .sectArea {
margin: 80px 0;
}
.cptTheater .sectArea .btnMore {
width: 100%;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.cptTheater .sectArea[class*=addBg] {
padding: 60px 0;
}
.cptTheater .sectArea[class*=addBg]::before {
border-radius: 0px 60px;
}
.cptTheater .sectTit {
margin-bottom: 28px;
}
.cptTheater .sectTit .subTit {
font-size: 1rem;
}
.cptTheater .sectTit .tit {
font-size: 1.75rem;
}
.cptTheater .sectTit .tabMenuGroup {
width: 100%;
margin-top: 28px;
}
.cptTheater .sectTit .sortBtn {
margin-left: auto;
}
.cptTheater .sortBtn {
height: 34px;
}
.cptTheater .sortBtn button {
height: 26px;
padding: 0 12px;
font-size: 0.875rem;
}
.cptTheater [class*=swiper-] .btnPrev,
.cptTheater [class*=swiper-] .btnNext {
width: 32px;
height: 32px;
background-size: 14px auto;
}
.cptTheater .comSchStx .schStx {
padding-left: 0;
}
.cptTheater .comSchStx .schStx .schTit {
position: static;
}
.cptTheater .comSchStx .schStx .schStxRst .schStxSlide {
padding-right: 0;
overflow: visible;
}
.cptTheater .comSchStx .schStx .schStxSlidePage {
display: none;
}
.cptTheater .newsInfo .sectTit {
position: relative;
left: auto;
width: auto;
min-height: auto;
margin-left: -20px;
margin-bottom: 32px;
padding: 36px 134px 32px 20px;
}
.cptTheater .newsInfo .sectTit::after {
bottom: -20px;
left: auto;
right: 40px;
width: 94px;
height: 100px;
background-size: 94px auto;
}
.cptTheater .newsInfo .listGallery {
padding: 0;
}
.cptTheater .newsInfo .listGallery .listGroup {
gap: 24px 0;
}
.cptTheater .newsInfo .listGallery .listGroup > li {
margin-bottom: 0 !important;
transform: none !important;
}
.cptTheater .eventNoti > .inner {
padding: 28px 20px 24px;
}
.cptTheater .eventNoti > .inner::after {
top: 50px;
right: 15px;
width: 70px;
height: 70px;
background-size: 70px auto;
}
.cptTheater .eventNoti .sectTit {
position: static;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
padding-right: 152px;
padding-bottom: 24px;
transform: none;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptTheater .eventNoti .sectTit .subTit {
margin: 0 0 8px 0;
font-size: 1rem;
}
.cptTheater .eventNoti .sectTit .tit {
width: 100%;
font-size: 1.5rem;
}
.cptTheater .eventNoti .listEvent {
position: static;
padding-right: 0;
}
.cptTheater .eventNoti .listEvent .infoBox {
gap: 8px 0;
flex-direction: column;
}
.cptTheater .eventNoti .listEvent .infoBox .date {
font-size: 0.875rem;
}
.cptTheater .eventNoti .listEvent .imgBox {
left: auto;
bottom: auto;
top: 24px;
right: 20px;
width: 150px;
height: 88px;
}
.cptTheater .eventNoti .listEvent .txtMore {
top: auto;
bottom: 24px;
right: 20px;
font-size: 0.9375rem;
}
}
.cptTheater .tabMenuGroup {
position: relative;
}
.cptTheater .tabMenuGroup::before {
content: "";
width: 100%;
height: 1px;
background: var(--Gray-150);
position: absolute;
left: 0;
bottom: 0;
}
.cptTheater .tabMenuGroup .sortTab {
width: 100%;
display: flex;
}
.cptTheater .tabMenuGroup .sortTab .tabItem {
width: 100%;
flex-shrink: 1;
display: flex;
justify-content: center;
}
.cptTheater .tabMenuGroup .sortTab .tabItem .tabName {
width: 100%;
height: 52px;
padding: 0 20px;
color: var(--Gray-600);
font-size: 1.25rem;
font-weight: 400;
line-height: 1.6;
border-bottom: 1px solid var(--Gray-150);
align-content: center;
position: relative;
white-space: nowrap;
}
.cptTheater .tabMenuGroup .sortTab .tabItem .tabName.on {
font-weight: 700;
color: var(--Primary);
}
.cptTheater .tabMenuGroup .sortTab .tabItem .tabName.on::before {
content: "";
width: 100%;
height: 4px;
background: var(--Primary);
position: absolute;
left: 0;
bottom: 0;
}
.cptTheater .tabMenuGroup .sortTab .tabItem .tabName.outlink::after {
content: "";
width: 16px;
height: 16px;
margin-left: 4px;
vertical-align: middle;
background: url(../../../images/kboat/common/ic_link_blank.svg) center no-repeat;
display: inline-block;
}
@media screen and (max-width: 767px) {
.cptTheater .tabMenuGroup .sortTab .tabItem .tabName {
padding: 0 16px;
font-size: 1rem;
border-bottom: 1px solid var(--Gray-150);
white-space: normal;
}
.cptTheater .tabMenuGroup .sortTab .tabItem .tabName.on::after {
height: 2px;
bottom: -1px;
}
.cptTheater .tabMenuGroup.toAll .sortTab .tabItem {
width: 180px;
min-width: max-content;
}
.cptTheater .tabMenuGroup.toTab .sortTab .tabItem {
width: 100%;
}
.cptTheater .tabMenuGroup.toMob .sortTab .tabItem {
width: 180px;
min-width: max-content;
}
.cptTheater .tabMenuGroup.toMob ~ .tabDirection {
display: block;
}
}
.cptTheater .listGallery .listGroup:not(.swiper-wrapper) {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.cptTheater .listGallery .listGroup .listItem {
width: calc(25% - 30px);
display: flex;
flex-wrap: wrap;
}
.cptTheater .listGallery .listGroup .listItem .itemLink {
width: 100%;
display: block;
}
.cptTheater .listGallery .listGroup .listItem .imgBox {
width: 100%;
padding-top: 56.25%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.cptTheater .listGallery .listGroup .listItem .imgBox img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.cptTheater .listGallery .listGroup .listItem .imgBox .bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.cptTheater .listGallery .listGroup .listItem .infoBox {
width: 100%;
margin-top: 8px;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .title {
width: 100%;
color: var(--Gray-800);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .progress {
width: 100%;
height: 24px;
margin-top: 4px;
display: flex;
gap: 4px;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .progress .mark {
width: max-content;
height: 24px;
padding: 0 10px;
font-size: 0.75rem;
font-weight: 600;
border-radius: 20px;
line-height: 22px;
display: block;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .progress .mark.ing {
color: #fff;
border: 1px solid var(--Point-Primary2);
background: var(--Point-Primary2);
}
.cptTheater .listGallery .listGroup .listItem .infoBox .progress .mark.end {
color: var(--Gray-500);
border: 1px solid var(--Gray-500);
background: #fff;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .progress .mark.line {
color: var(--Primary);
border: 1px solid var(--Primary);
background: #fff;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .context {
display: none;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .date {
width: 100%;
margin-top: 8px;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.6;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .date + .date {
margin-top: 0;
}
.cptTheater .listGallery .listGroup .listItem .infoBox ul.info {
display: flex;
flex-wrap: wrap;
column-gap: 24px;
margin-top: 8px;
}
.cptTheater .listGallery .listGroup .listItem .infoBox ul.info > li {
width: auto;
margin-top: 0;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.6;
}
.cptTheater .listGallery.col3_1 .listGroup .listItem {
width: calc(33.3333% - 26.6667px);
}
.cptTheater .listGallery.col3_1 .listGroup .listItem:last-child {
width: calc(33.3333% - 26.6666px);
}
.cptTheater .listGallery.col3_1 .listGroup .listItem .imgBox {
padding-top: 56.25%;
}
.cptTheater .listGallery.theaterSwiper.swiper-container {
margin: 0 -20px;
overflow: visible;
}
.cptTheater .listGallery.theaterSwiper.swiper-container .listGroup .listItem {
padding: 0 20px;
}
@media screen and (max-width: 767px) {
.cptTheater .listGallery .listGroup:not(.swiper-wrapper) {
gap: 24px 24px;
}
.cptTheater .listGallery .listGroup .listItem {
width: calc(50% - 12px);
}
.cptTheater .listGallery .listGroup .listItem .infoBox {
width: 100%;
margin-top: 8px;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .title {
font-size: 0.9375rem;
font-weight: 600;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .progress {
margin-top: 8px;
}
.cptTheater .listGallery .listGroup .listItem .infoBox .date {
color: var(--Gray-700);
font-size: 0.8125rem;
}
.cptTheater .listGallery .listGroup .listItem .infoBox ul.info {
column-gap: 0;
justify-content: space-between;
}
.cptTheater .listGallery .listGroup .listItem .infoBox ul.info > li {
font-size: 0.875rem;
}
.cptTheater .listGallery.col3_1 .listGroup .listItem {
width: 100% !important;
}
.cptTheater .listGallery.mColumn .listGroup {
flex-direction: column;
}
.cptTheater .listGallery.mColumn .listGroup .itemLink {
display: flex;
align-items: center;
column-gap: 12px;
}
.cptTheater .listGallery.mColumn .listGroup .itemLink .imgBox {
width: 41.3994%;
padding-top: 23.2871625%;
}
.cptTheater .listGallery.mColumn .listGroup .itemLink .infoBox {
width: auto;
flex: 1;
}
.cptTheater .listGallery.mColumn .listGroup .itemLink .infoBox ul.info {
justify-content: flex-start;
column-gap: 8px;
margin-top: 0;
}
.cptTheater .listGallery.theaterSwiper.swiper-container {
margin: 0 -6px;
padding-right: 63px;
}
.cptTheater .listGallery.theaterSwiper.swiper-container .listGroup {
gap: 0;
}
.cptTheater .listGallery.theaterSwiper.swiper-container .listGroup .listItem {
padding: 0 6px;
}
.cptTheater .listGallery.theaterSwiper.swiper-container .listGroup .listItem .infoBox ul.info {
justify-content: flex-start;
column-gap: 12px;
}
.cptTheater .listGallery.theaterSwiper.swiper-container .btnPrev, .cptTheater .listGallery.theaterSwiper.swiper-container .btnNext {
display: none;
}
}
.cptTheater .videoGallery {
position: relative;
padding: 80px 0;
z-index: 0;
}
.cptTheater .videoGallery .inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
display: flex;
gap: 64px;
}
.cptTheater .videoGallery .inner .title {
position: absolute;
top: 27px;
left: 710px;
display: flex;
align-items: center;
justify-content: center;
}
.cptTheater .videoGallery .inner .title::after {
content: "";
width: 30px;
height: 28px;
margin-left: 6px;
background: url(../../../images/kboat/common/ic_title_video.svg) no-repeat 100% 50%;
}
.cptTheater .videoGallery .inner .title h2 {
color: var(--Primary, #078B7B);
font-size: 1.875rem;
font-weight: 700;
line-height: 140%; /* 42px */
}
.cptTheater .videoGallery .inner .videoGallerySwiper {
width: 646px;
height: 400px;
border-radius: 28px;
box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiper-wrapper > .swiper-slide .movieBox {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiper-wrapper > .swiper-slide .movieBox::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: url(../../../images/kboat/common/ic_play_video.svg) no-repeat 42px 50%;
background-color: var(--Point-Primary2) !important;
border-radius: 50%;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn {
position: absolute;
left: 710px;
bottom: 28px;
display: flex;
align-items: center;
height: 50px;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperpage {
display: flex;
margin-right: 40px;
font-size: 1.25rem;
font-weight: 700;
color: var(--Gray-900);
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperpage .last {
position: relative;
margin-left: 100px;
font-weight: 400;
color: var(--Gray-600);
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperpage .last::before {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: 80px;
margin-right: 10px;
border-top: 1px solid var(--Gray-300);
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperbtn {
display: flex;
gap: 0 12px;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperbtn [class^=btn] {
position: static;
margin: 0;
box-shadow: none;
background-color: transparent;
}
.cptTheater .videoGallery .inner .galleryText {
flex: 1;
padding-top: 88px;
height: 168px;
box-sizing: content-box;
}
.cptTheater .videoGallery .inner .galleryText > ul {
position: relative;
height: 100%;
}
.cptTheater .videoGallery .inner .galleryText > ul > li {
opacity: 0;
transition: opacity 0.3s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cptTheater .videoGallery .inner .galleryText > ul > li.active {
opacity: 1;
}
.cptTheater .videoGallery .inner .galleryTit {
color: var(--Gray-800, #2C2C2C);
font-size: 2.5rem;
font-weight: 600;
line-height: 140%; /* 56px */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: keep-all;
}
.cptTheater .videoGallery .inner .galleryDate {
margin-top: 12px;
padding-left: 26px;
color: var(--Gray-600);
font-size: 1.125rem;
font-weight: 400;
background: url(../../../images/kboat/common/ic_20_calendar.svg) no-repeat 0 center;
}
.cptTheater .videoGallery > .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.cptTheater .videoGallery > .bg::before {
content: "";
position: absolute;
bottom: -40px;
left: 50%;
width: 1476px;
max-width: 100%;
height: 220px;
transform: translateX(-50%);
background: url(../../../images/kboat/common/hodol_top_visual.svg) no-repeat bottom right;
}
.cptTheater .videoGallery > .bg::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 62.5%;
background: linear-gradient(90deg, #F2FBFF 0%, #E5F1FD 100%);
border-radius: 0px 0px 0px 100px;
z-index: -2;
}
.cptTheater .videoGallery > .bg .deco {
position: absolute;
top: 0;
left: 50%;
width: 1440px;
max-width: 100%;
height: 100%;
transform: translateX(-50%);
}
.cptTheater .videoGallery > .bg .deco::before, .cptTheater .videoGallery > .bg .deco::after {
content: "";
position: absolute;
top: -324px;
right: -228px;
width: 600px;
height: 600px;
background: url(../../../images/kboat/common/deco_top_visual_2.svg) no-repeat 0 0;
background-size: cover;
}
.cptTheater .videoGallery > .bg .deco::after {
left: auto;
top: 199px;
left: -205px;
width: 480px;
height: 480px;
background: url(../../../images/kboat/common/deco_top_visual.svg) no-repeat 0 0;
background-size: cover;
}
@media screen and (min-width: 1481px) {
.cptTheater .videoGallery .inner {
transform: translateX(-80px);
}
}
@media screen and (max-width: 1280px) {
.cptTheater .videoGallery {
padding: 40px 0;
border-radius: 0 0 0 60px;
}
.cptTheater .videoGallery .inner {
display: block;
margin: 0 30px;
transform: translateX(0);
}
.cptTheater .videoGallery .inner .title {
position: static;
margin-bottom: 22px;
text-align: center;
}
.cptTheater .videoGallery .inner .title::after {
width: 24px;
height: 22px;
background-size: 24px auto;
}
.cptTheater .videoGallery .inner .title h2 {
font-size: 1.25rem;
}
.cptTheater .videoGallery .inner .videoGallerySwiper {
width: 100%;
height: auto;
padding-bottom: 64px;
border-radius: 0;
box-shadow: none;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiper-wrapper > .swiper-slide .movieBox {
/*height: 180px;*/
margin-bottom: 40px;
padding-top: 61.919504644%;
border-radius: 12px;
box-shadow: 4.352px 4.352px 8.704px 0px rgba(0, 0, 0, 0.1);
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiper-wrapper > .swiper-slide .movieBox::after {
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(../../../images/kboat/common/ic_play_video_m.svg) no-repeat 21px 50%;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn {
bottom: 0;
left: 0;
height: 32px;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperpage {
margin-right: 20px;
font-size: 1.125rem;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperpage .last {
margin-left: 64px;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperpage .last::before {
width: 40px;
margin-right: 12px;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperbtn {
gap: 0 8px;
}
.cptTheater .videoGallery .inner .videoGallerySwiper .swiperPageBtn .swiperbtn [class^=btn] {
width: 32px;
height: 32px;
background-size: 14px auto;
}
.cptTheater .videoGallery .inner .galleryText {
display: none;
}
.cptTheater .videoGallery .inner .galleryTit {
font-size: 1.5rem;
}
.cptTheater .videoGallery .inner .galleryDate {
font-size: 1rem;
}
.cptTheater .videoGallery > .bg::before {
left: auto;
bottom: -20px;
right: 20px;
width: 100px;
height: 120px;
margin-left: 0;
background-size: 100px auto;
transform: none;
}
.cptTheater .videoGallery > .bg::after {
width: 100%;
border-radius: 0px 0px 0px 60px;
}
.cptTheater .videoGallery > .bg .deco::before {
width: 400px;
height: 400px;
bottom: auto;
right: auto;
top: -40px;
left: 100%;
margin-left: -238px;
background: url(../../../images/kboat/common/deco_top_visual_m.svg) no-repeat 0 0;
background-size: cover;
}
.cptTheater .videoGallery > .bg .deco::after {
content: none;
display: none;
}
}
.cptTheaterDetail {
position: relative;
display: flex;
min-height: 100vh;
background-color: var(--Bg-Line-bg-300);
/*
.modTab02 {
margin-top: 16px;
.tabMenuGroup {
.tabMenu {
.tabItem {
flex-grow: 1;
.tabName {
width: max-content; height: 30px; padding: 0; font-size: rem(14px); border-radius: 0; line-height: 22px; color: var(--Gray-600);
border: 0; border-bottom: 2px solid var(--Gray-200); background: transparent; display: inline-block; flex-grow: 1;
&.on {
color: var(--Primary); border: 0; border-bottom: 4px solid var(--Primary); background: transparent;
}
}
}
}
}
.tabContianer {
margin-top: 8px;
}
}
*/
}
.cptTheaterDetail .theaterDetail {
width: 100%;
background: #fff;
padding-bottom: 40px;
}
.cptTheaterDetail .theaterDetail .videoArea {
width: 100%;
padding-top: 56.25%;
position: relative;
}
.cptTheaterDetail .theaterDetail .videoArea .playerBox {
width: 100%;
height: 100%;
background: #000 url(../../../images/kboat/contents/cont04_novideo.png) center no-repeat;
position: absolute;
left: 0;
top: 0;
}
.cptTheaterDetail .theaterDetail .videoArea img {
width: 100%;
vertical-align: top;
}
.cptTheaterDetail .theaterDetail .infoArea {
padding: 40px 32px 0;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 20px;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .title {
width: 100%;
margin-bottom: 16px;
font-size: 1.5rem;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .info {
display: flex;
gap: 0 24px;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .info .item {
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .bookmark {
padding-left: 30px;
font-size: 0.9375rem;
color: var(--Gray-600);
background: url(../../../images/kboat/common/ic_20_bookmark.svg) center left no-repeat;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .bookmark.on {
background: url(../../../images/kboat/common/ic_20_bookmark_on.svg) center left no-repeat;
}
.cptTheaterDetail .theaterDetail .infoArea .infoBody {
margin-top: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #E1E4EA;
}
.cptTheaterDetail .theaterDetail .infoArea .infoBody .btnGroup {
margin-bottom: 24px;
}
.cptTheaterDetail .theaterDetail .infoArea .infoBody .btnGroup .btn {
background-color: var(--Bg-Line-bg-200);
}
.cptTheaterDetail .theaterDetail .infoArea .infoBody .infoConArea {
color: var(--Gray-800);
}
.cptTheaterDetail .theaterDetail .infoArea .sectWrap + .sectWrap {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--Bg-Line-line-100);
}
.cptTheaterDetail .theaterDetail .bottomArea {
margin-top: auto;
}
.cptTheaterDetail .theaterDetail .bottomArea .copy {
padding: 24px 32px;
font-size: 0.875rem;
font-weight: 400;
color: var(--Gray-600);
}
.cptTheaterDetail .theaterAticle {
width: 320px;
flex-grow: 0;
flex-shrink: 0;
}
.cptTheaterDetail .theaterAticle .funcArea {
width: 100%;
padding: 12px;
background-color: var(--Bg-Line-bg-300);
overflow-y: auto;
}
.cptTheaterDetail .theaterAticle .funcArea + .infoArea {
padding-top: 0;
}
.cptTheaterDetail [class*=Area] .sectWrap:not(:first-child) {
margin-top: 16px;
}
.cptTheaterDetail [class*=Area] .sectWrap:not(:last-child) {
padding-bottom: 16px;
border-bottom: 1px solid #E1E4EA;
}
.cptTheaterDetail [class*=Area] .sectWrap > .tit {
margin-bottom: 8px;
font-size: 1rem;
font-weight: 700;
color: var(--Gray-900);
}
.cptTheaterDetail [class*=Area] .btnGroup {
display: flex;
gap: 8px;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn {
padding: 0 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn > span {
font-size: 0.875rem;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.on {
border-color: var(--Primary);
background-color: #F0FAF7 !important;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.on > span {
color: var(--Primary);
}
.cptTheaterDetail [class*=Area] .btnGroup .btn[class*=play] > span::before {
content: "";
position: relative;
top: -1px;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 4px;
background-color: rgba(255, 0, 0, 0.4);
vertical-align: middle;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.playAll > span::before {
background: url(../../../images/kboat/common/ic_20_playall.svg) no-repeat center center;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.playAll.on > span::before {
background: url(../../../images/kboat/common/ic_20_playall_on.svg) no-repeat center center;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.playAfter > span::before {
background: url(../../../images/kboat/common/ic_20_playafter.svg) no-repeat center center;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.playAfter.on > span::before {
background: url(../../../images/kboat/common/ic_20_playafter_on.svg) no-repeat center center;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.playSlow > span::before {
background: url(../../../images/kboat/common/ic_20_playslow.svg) no-repeat center center;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn.playSlow.on > span::before {
background: url(../../../images/kboat/common/ic_20_playslow_on.svg) no-repeat center center;
}
.cptTheaterDetail [class*=Area] .btnGroup:not(ul) .btn {
flex: 1;
}
.cptTheaterDetail [class*=Area] ul.btnGroup {
flex-wrap: wrap;
gap: 4px;
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li {
width: calc(25% - 3px);
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li .btn {
width: 100%;
height: 29px;
padding: 0;
color: var(--Gray-800);
font-size: 0.8125rem;
font-weight: 400;
line-height: 26px;
border-radius: 6px;
border: 1px solid var(--Gray-200);
background: #FFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li .btn.on.blue {
font-weight: 600;
border: 1px solid #2F9BD8;
background: #2F9BD8 !important;
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li .btn.on.red {
color: #fff !important;
font-weight: 600;
border: 1px solid #F45990;
background: #F45990 !important;
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li .btn.on.mint {
color: #fff !important;
font-weight: 600;
border: 1px solid #2EB273;
background: #2EB273 !important;
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li .btn.on span {
color: #fff !important;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem:not(:first-child) {
margin-top: 16px;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .itemLink {
width: 100%;
display: flex;
align-items: center;
column-gap: 12px;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .imgBox {
width: 37.8571%;
padding-top: 21.29461875%;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .imgBox .bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox {
flex: 1;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox .title {
width: 100%;
color: var(--Gray-800);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox .context {
display: none;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox .date {
width: 100%;
margin-top: 8px;
color: var(--Gray-600);
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.6;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox .date + .date {
margin-top: 0;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox ul.info {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
margin-top: 4px;
}
.cptTheaterDetail [class*=Area] .listGallery .listGroup .listItem .infoBox ul.info > li {
width: auto;
margin-top: 0;
color: var(--Gray-600);
font-size: 0.6875rem;
font-weight: 300;
line-height: 1.6;
}
.cptTheaterDetail [class*=Area] .raceInfo {
display: flex;
flex-wrap: wrap;
}
.cptTheaterDetail [class*=Area] .raceInfo .item {
display: flex;
align-items: center;
min-height: 29px;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemTit {
position: relative;
top: 1px;
margin-right: 12px;
font-size: 0.8125rem;
color: var(--Gray-600);
font-weight: 500;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal {
display: flex;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal + .itemVal {
margin-left: 8px;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number {
width: 16px;
height: 16px;
border: 1px solid var(--Gray-200);
border-radius: 50%;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
color: #fff;
line-height: 15px;
background: #fff;
display: inline-block;
vertical-align: middle;
align-self: center;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num01 {
color: var(--Gray-200);
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num02 {
background: var(--Gray-900);
border-color: var(--Gray-900);
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num03 {
background: #ff2828;
border-color: #ff2828;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num04 {
background: #2a7ddf;
border-color: #2a7ddf;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num05 {
background: #ffb907;
border-color: #ffb907;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num06 {
background: #55b965;
border-color: #55b965;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number.num07 {
background: #ff66af;
border-color: #ff66af;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .number + .number {
margin-left: 3px;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .txt {
margin-left: 3px;
color: var(--Gray-800);
font-size: 0.75rem;
font-weight: 500;
position: relative;
display: inline-block;
vertical-align: middle;
align-self: center;
}
.cptTheaterDetail [class*=Area] .raceInfo.half {
gap: 0 8px;
}
.cptTheaterDetail [class*=Area] .raceInfo.half .item {
width: calc(50% - 4px);
}
.cptTheaterDetail [class*=Area] .raceInfo.half .item .itemTit {
width: 34px;
}
.cptTheaterDetail [class*=Area] .raceInfo.full .item {
width: 100%;
}
.cptTheaterDetail [class*=Area] .raceInfo.full .item .itemVal + .itemVal {
margin-left: 16px;
}
.cptTheaterDetail .theaterTabArea {
margin-top: 16px;
}
.cptTheaterDetail .theaterTabArea .tabMenuGroup {
width: 100%;
overflow: hidden;
}
.cptTheaterDetail .theaterTabArea .tabMenuGroup .tabMenu {
width: 100%;
display: flex;
}
.cptTheaterDetail .theaterTabArea .tabMenuGroup .tabMenu .tabItem {
width: max-content;
flex-shrink: 1;
display: flex;
justify-content: center;
flex-grow: 1;
}
.cptTheaterDetail .theaterTabArea .tabMenuGroup .tabMenu .tabItem .tabName {
width: 100%;
height: 30px;
padding: 0;
color: var(--Gray-600);
font-size: 0.875rem;
font-weight: 400;
line-height: 22px;
background: transparent;
border-bottom: 2px solid var(--Gray-200);
align-content: center;
position: relative;
display: inline-block;
}
.cptTheaterDetail .theaterTabArea .tabMenuGroup .tabMenu .tabItem .tabName.on {
font-weight: 700;
color: var(--Primary);
border: 0;
border-bottom: 4px solid var(--Primary);
background: transparent;
}
.cptTheaterDetail .theaterTabArea .tabContianer {
margin-top: 8px;
}
.cptTheaterDetail .comCalendar {
padding: 12px 16px;
background-color: #fff;
border: 1px solid var(--Bg-Line-bg-300);
border-radius: 12px;
}
.cptTheaterDetail .comCalendar .monthData {
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0;
}
.cptTheaterDetail .comCalendar .monthData .monthTxt {
margin: 0 12px;
font-size: 1.125rem;
font-weight: 500;
color: var(--Gray-900);
}
.cptTheaterDetail .comCalendar .monthData .monthArw {
width: 30px;
height: 30px;
font-size: 0;
background: url(../../../images/kboat/common/ic_20_paging_prev.svg) center no-repeat;
vertical-align: middle;
}
.cptTheaterDetail .comCalendar .monthData .monthArw.next {
background: url(../../../images/kboat/common/ic_20_paging_next.svg) center no-repeat;
}
.cptTheaterDetail .comCalendar .monthData .monthArw:disabled {
opacity: 0.35;
}
.cptTheaterDetail .comCalendar .weekDays {
gap: 0 12px;
margin: 0 -4px;
padding: 4px;
}
.cptTheaterDetail .comCalendar .weekDays .dayItem {
flex: 1;
}
.cptTheaterDetail .comCalendar .dayGroup {
gap: 8px 12px;
min-width: 0;
margin: 12px 0;
padding: 0;
}
.cptTheaterDetail .comCalendar .dayGroup .dayItem > a, .cptTheaterDetail .comCalendar .dayGroup .dayItem > button {
width: 24px;
height: 24px;
font-size: unset;
}
@media screen and (max-width: 767px) {
.cptTheaterDetail {
flex-wrap: wrap;
}
.cptTheaterDetail .theaterDetail {
min-height: auto !important;
padding-top: 56.25%;
padding-bottom: 28px;
}
.cptTheaterDetail .theaterDetail .videoArea {
width: 100%;
padding-top: 56.25%;
position: fixed;
left: 0;
top: 66px;
z-index: 90;
}
.cptTheaterDetail .theaterDetail .videoArea .playerBox {
width: 100%;
height: 100%;
background: #000 url(../../../images/kboat/contents/cont04_novideo.png) center no-repeat;
position: absolute;
left: 0;
top: 0;
}
.cptTheaterDetail .theaterDetail .videoArea img {
width: 100%;
vertical-align: top;
}
.cptTheaterDetail .theaterDetail .infoArea {
padding: 28px 16px 0;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .title {
margin-bottom: 14px;
font-size: 1.25rem;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .info {
gap: 0 12px;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .info .item {
font-size: 0.875rem;
}
.cptTheaterDetail .theaterDetail .infoArea .infoHead .bookmark {
font-size: 0.875rem;
}
.cptTheaterDetail .theaterDetail .infoArea .infoBody .infoConArea {
font-size: 0.9375rem;
}
.cptTheaterDetail .theaterDetail .bottomArea .copy {
padding: 24px 16px 0;
font-size: 0.8125rem;
}
.cptTheaterDetail .theaterAticle {
width: 100%;
}
.cptTheaterDetail .theaterAticle .funcArea {
padding: 28px 16px;
position: static;
width: 100%;
height: auto;
}
.cptTheaterDetail .theaterAticle .funcArea + .infoArea {
padding-top: 28px;
}
.cptTheaterDetail .modTab02 {
width: 100%;
margin-left: 0;
margin-top: 24px;
}
.cptTheaterDetail .modTab02 .tabMenuGroup {
padding: 0;
}
.cptTheaterDetail .modTab02 .tabMenuGroup .tabMenu .tabItem .tabName {
height: 38px;
font-size: 1rem;
border-radius: 0;
line-height: 26px;
}
.cptTheaterDetail .modTab02 .tabContianer {
padding: 0;
margin-top: 16px;
}
.cptTheaterDetail [class*=Area] .sectWrap:not(:first-child) {
margin-top: 24px;
}
.cptTheaterDetail [class*=Area] .sectWrap:not(:last-child) {
padding-bottom: 24px;
}
.cptTheaterDetail [class*=Area] .sectWrap > .tit {
margin-bottom: 12px;
font-size: 1.125rem;
font-weight: 600;
color: var(--Gray-800);
}
.cptTheaterDetail [class*=Area] .btnGroup .btn {
padding: 0 10px;
}
.cptTheaterDetail [class*=Area] .btnGroup .btn > span {
font-size: 0.8125rem;
}
.cptTheaterDetail [class*=Area] ul.btnGroup {
flex-wrap: wrap;
gap: 5px;
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li {
width: calc(25% - 3.75px);
}
.cptTheaterDetail [class*=Area] ul.btnGroup > li .btn {
height: 36px;
font-size: 0.9375rem;
line-height: 33px;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemTit {
font-size: 0.9375rem;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal + .itemVal {
margin-left: 16px;
}
.cptTheaterDetail [class*=Area] .raceInfo .item .itemVal .txt {
font-size: 0.9375rem;
}
.cptTheaterDetail [class*=Area] .raceInfo.half {
gap: 8px;
}
.cptTheaterDetail [class*=Area] .raceInfo.half .item .itemTit {
width: 42px;
}
.cptTheaterDetail .comCalendar .weekDays {
column-gap: 8px;
}
.cptTheaterDetail .comCalendar .dayGroup {
column-gap: 8px;
}
.cptTheaterDetail .pcView {
display: none;
}
}
@media screen and (max-width: 500px) {
.cptTheaterDetail [class*=Area] .btnGroup:not(ul) .btn {
min-width: 92px;
}
.cptTheaterDetail [class*=Area] .btnGroup:not(ul) .btn:not(.playAfter) {
flex: 0;
}
.cptTheaterDetail [class*=Area] .btnGroup.div_3 .playAfter {
max-width: calc(100vw - 32px - 184px - 16px);
}
.cptTheaterDetail [class*=Area] .btnGroup.div_3 .playAfter > span {
margin-right: -1px;
}
}
.cptHeaderEn {
width: 100%;
background: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 100;
}
.cptHeaderEn .headArea {
display: flex;
max-width: 1480px;
margin: 0 auto;
padding: 0 20px;
}
.cptHeaderEn .headArea .headBox {
display: flex;
align-items: center;
width: 100%;
height: 78px;
}
.cptHeaderEn .headArea .headBox .logoBox {
width: 239px;
margin-right: 48px;
}
.cptHeaderEn .headArea .headBox .logoBox .logo {
width: 100%;
}
.cptHeaderEn .headArea .headBox .quickBox {
position: relative;
height: 30px;
margin-left: auto;
z-index: 100;
}
.cptHeaderEn .headArea .headBox .quickBox .linkName {
color: var(--Gray-800);
font-size: 0.8125rem;
font-weight: 700;
}
.cptHeaderEn .headArea .headBox .quickBox .quickSltBtn {
position: relative;
display: inline-flex;
align-items: center;
min-width: 96px;
height: 30px;
padding: 0 36px 0 12px;
z-index: 1;
background: url(../../../images/kboat/common/ic_12_down_arr.svg) no-repeat right 12px center;
}
.cptHeaderEn .headArea .headBox .quickBox .quickSltBtn .linkName {
padding: 1px 0 0 18px;
background: url(../../../images/kboat/common/ic_head_lang.svg) no-repeat 0 center;
}
.cptHeaderEn .headArea .headBox .quickBox .guickMenuGroup {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 30px;
padding-top: 27px;
border-radius: 16px;
border: 1px solid #B1B1B1;
background-color: #fff;
overflow: hidden;
}
.cptHeaderEn .headArea .headBox .quickBox .guickMenuGroup .item {
display: none;
}
.cptHeaderEn .headArea .headBox .quickBox .guickMenuGroup .item > * {
display: block;
padding-left: 20px;
}
.cptHeaderEn .headArea .headBox .quickBox .guickMenuGroup .item > *:hover {
background: var(--Bg-Line-bg-200);
}
.cptHeaderEn .headArea .headBox .quickBox.on .guickMenuGroup, .cptHeaderEn .headArea .headBox .quickBox:hover .guickMenuGroup, .cptHeaderEn .headArea .headBox .quickBox:focus .guickMenuGroup {
padding-bottom: 10px;
}
.cptHeaderEn .headArea .headBox .quickBox.on .guickMenuGroup .item, .cptHeaderEn .headArea .headBox .quickBox:hover .guickMenuGroup .item, .cptHeaderEn .headArea .headBox .quickBox:focus .guickMenuGroup .item {
display: block;
}
.cptHeaderEn .headArea .headBox .quickBox + .allMenuEn {
margin-left: 28px;
}
.cptHeaderEn .headArea .gnbBox {
display: flex;
align-items: center;
height: 78px;
}
.cptHeaderEn .headArea .gnbBox .depth1Group {
display: flex;
align-items: center;
height: 100%;
}
.cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu {
height: 100%;
align-content: center;
}
.cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu .depth1Name {
display: block;
height: 100%;
align-content: center;
padding: 0 30px;
color: var(--Gray-800);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):hover .depth2Area, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:has(.depth2Area):focus .depth2Area {
display: block;
height: auto;
}
.cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu.on .depth1Name, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:hover .depth1Name, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:focus .depth1Name {
color: #000;
}
.cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu.on .depth1Name > span, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:hover .depth1Name > span, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:focus .depth1Name > span {
position: relative;
font-weight: 700;
}
.cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu.on .depth1Name > span::after, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:hover .depth1Name > span::after, .cptHeaderEn .headArea .gnbBox .depth1Group .depth1Menu:focus .depth1Name > span::after {
display: block;
content: "";
width: 100%;
height: 12px;
background: #a1f4c7;
position: absolute;
left: -2px;
bottom: 0;
z-index: -1;
}
.cptHeaderEn .headArea .gnbBox .depth2Area {
width: 100%;
height: 0;
position: absolute;
left: 0;
top: 78px;
background: #fff;
border-top: 1px solid var(--Bg-Line-line-100);
box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1);
z-index: 99;
display: none;
overflow: hidden;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box {
width: 100%;
max-width: 1480px;
height: 100%;
margin: 0 auto;
padding: 24px 20px;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth2Group {
display: flex;
gap: 0 100px;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu {
flex: 1;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth2Group .depth2Menu .depth2Name {
display: block;
font-size: 1.125rem;
font-weight: 700;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group {
margin-top: 4px;
margin-bottom: 16px;
padding-top: 20px;
border-top: 1px solid #52555B;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group .depth3Menu {
position: relative;
padding-left: 12px;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group .depth3Menu::after {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 4px;
height: 4px;
background: var(--Gray-800);
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group .depth3Menu:not(:first-child) {
margin-top: 24px;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group .depth3Menu .depth3Name {
font-size: 1rem;
font-weight: 700;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group .depth3Menu .depth3Name.on {
text-decoration: underline;
text-underline-position: under;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth3Group:has(.depth4Name.on) .depth3Menu .depth3Name.on {
text-decoration: none;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth4Group .depth4Menu {
margin-top: 8px;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth4Group .depth4Menu .depth4Name {
font-size: 0.9375rem;
color: #555;
}
.cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth4Group .depth4Menu .depth4Name:hover, .cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth4Group .depth4Menu .depth4Name:focus, .cptHeaderEn .headArea .gnbBox .depth2Area .depth2Box .depth4Group .depth4Menu .depth4Name.on {
color: #000;
text-decoration: underline;
text-underline-position: under;
}
.cptHeaderEn .headArea .allMenuEn {
width: 24px;
height: 100%;
margin-left: auto;
font-size: 0;
background: url(../../../images/kboat/common/ic_all_menu.svg) center no-repeat;
}
@media screen and (max-width: 1280px) {
.cptHeaderEn .headArea .gnbBox .depth1Group {
display: none;
}
}
@media screen and (max-width: 767px) {
.cptHeaderEn .headArea .headBox .logoBox {
margin-right: 0;
}
.cptHeaderEn .headArea .headBox .quickBox {
display: none;
}
.cptHeaderEn .headArea .headBox .quickBox + .allMenuEn {
margin-left: auto;
}
}
.lytMainEng .cptHeaderEn {
position: absolute;
}
@media screen and (min-width: 768px) {
.lytMainEng .cptHeaderEn:not(.on) {
background: transparent;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .headBox .logoBox .logo path {
fill: #fff;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .headBox .quickBox .quickSltBtn {
background: url(../../../images/kboat/common/ic_12_down_arr_w.svg) no-repeat right 12px center;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .headBox .quickBox .quickSltBtn span {
color: #fff;
background: url(../../../images/kboat/common/ic_head_lang_w.svg) no-repeat 0 center;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .headBox .quickBox .guickMenuGroup {
background-color: transparent;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .headBox .quickBox .guickMenuGroup .item > *:hover {
background: var(--Gray-200);
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .headBox .quickBox .guickMenuGroup .item > * > span {
color: #fff;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .gnbBox .depth1Group .depth1Menu .depth1Name {
color: #fff;
}
.lytMainEng .cptHeaderEn:not(.on) .headArea .allMenuEn {
background: url(../../../images/kboat/common/ic_all_menu_on.svg) center no-repeat;
}
}
.allMenuAreaEn {
width: 100%;
height: 100vh;
background: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 200;
display: none;
}
.allMenuAreaEn.on {
display: block;
opacity: 0;
animation: openAllMenu 0.15s linear forwards;
}
@keyframes openAllMenu {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media screen and (min-width: 768px) {
.allMenuAreaEn *:hover::-webkit-scrollbar-thumb {
background: rgba(87, 87, 87, 0.54);
}
.allMenuAreaEn *::-webkit-scrollbar {
width: 30px;
padding: 10px;
background: #fff;
}
.allMenuAreaEn *::-webkit-scrollbar-thumb {
padding: 10px;
border: 12px solid #fff;
border-radius: 15px;
background: rgba(87, 87, 87, 0.2); /* box-shadow: inset 6px 6px 0 rgba(87, 87, 87, 0.54); */
}
.allMenuAreaEn *::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
}
.allMenuAreaEn .allTop {
width: 100%;
height: 86px;
background: #254862;
}
.allMenuAreaEn .allTop .pcView {
width: 100%;
max-width: 1480px;
padding: 23px 20px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.allMenuAreaEn .allTop .pcView .logo {
width: 276px;
align-content: center;
}
.allMenuAreaEn .allTop .pcView .logo img {
width: 100%;
vertical-align: middle;
}
.allMenuAreaEn .allTop .pcView .btnClose {
width: 40px;
height: 40px;
font-size: 0;
background: url(../../../images/kboat/common/ic_40_close.svg) center no-repeat;
align-content: center;
}
.allMenuAreaEn .allTop .moView {
display: none;
}
.allMenuAreaEn .allMenuGroup {
width: 100%;
height: calc(100vh - 86px);
overflow-y: scroll;
}
.allMenuAreaEn .allMenuGroup .allMenuBox {
width: 100%;
max-width: 1480px;
padding: 0 20px;
margin: 0 auto;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group {
width: 100%;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu {
width: 100%;
padding: 60px 0;
border-top: 1px solid var(--Bg-Line-line-100);
display: flex;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu:first-child {
border-top: 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu .depth1Name {
color: var(--Gray-900);
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
flex-shrink: 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu:has(.depth2Group) .depth1Name {
width: 17.3%;
min-width: 220px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 40px 32px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu {
flex: 1;
min-width: 240px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu .depth2Name {
color: #254862;
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group {
margin-top: 26px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu {
position: relative;
padding-left: 12px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu::after {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 4px;
height: 4px;
background: var(--Gray-800);
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu:not(:first-child) {
margin-top: 32px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name {
color: var(--Gray-800);
font-size: 1.125rem;
font-weight: 600;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu {
position: relative;
margin-top: 8px;
margin-left: -12px;
padding-left: 12px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu::after {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 4px;
border-bottom: 1px solid var(--Gray-300);
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu .depth4Name {
font-size: 1rem;
color: #555;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu .depth4Name:hover, .allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu .depth4Name:focus {
color: #000;
box-shadow: inset 0 -12px 0 #A1F4C7;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .quickLink {
width: 100%;
padding: 20px 16px 32px;
border-top: 1px solid var(--Bg-Line-line-200);
position: absolute;
left: 0;
bottom: 0;
display: none;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .quickLink .quickItem {
width: 100%;
margin-top: 12px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .quickLink .quickItem:first-child {
margin-top: 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .quickLink .quickItem:first-child a {
letter-spacing: -0.3px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .quickLink .quickItem a {
width: max-content;
height: 24px;
color: var(--Primary);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.6;
display: block;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .quickLink .quickItem a[target=_blank] {
padding-right: 18px;
background: url(../../../images/kboat/common/ic_link_blank_primary.svg) right center no-repeat;
}
@media screen and (max-width: 767px) {
.allMenuAreaEn .allTop {
height: 72px;
border-bottom: 1px solid #cdcdcd;
background: #fff;
}
.allMenuAreaEn .allTop .pcView {
display: none;
}
.allMenuAreaEn .allTop .moView {
display: flex;
justify-content: space-between;
width: 100%;
padding: 20px 16px;
}
.allMenuAreaEn .allTop .moView .quickLink {
display: flex;
gap: 0 20px;
}
.allMenuAreaEn .allTop .moView .quickLink .quickItem > a {
display: inline-block;
height: 32px;
padding: 0px 12px;
line-height: 30px;
border: 1px solid var(--Gray-600);
border-radius: 6px;
font-size: 0.875rem;
font-weight: 400;
color: var(--Gray-600);
}
.allMenuAreaEn .allTop .moView .quickLink .quickItem span {
padding-right: 20px;
background: url(../../../images/kboat/common/ic_link_blank.svg) right 2px center no-repeat;
white-space: nowrap;
}
.allMenuAreaEn .allTop .moView .btnClose {
width: 24px;
font-size: 0;
background: url(../../../images/kboat/common/ic_20_close.svg) center no-repeat;
}
.allMenuAreaEn .allMenuGroup .allMenuBox {
padding: 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu {
flex-direction: column;
padding: 0;
border-top: none;
border-bottom: 1px solid var(--Bg-Line-line-100);
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu .depth1Name {
padding: 16px 16px;
font-size: 1.25rem;
font-weight: 500;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu:has(.depth2Group) .depth1Name {
width: 100%;
background: url(../../../images/kboat/common/ic_20_allmenu_en.svg) right 16px top 20px no-repeat;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu.on .depth1Name {
font-weight: 700;
background: url(../../../images/kboat/common/ic_20_allmenu_en_on.svg) right 16px top 20px no-repeat;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu.on .depth1Name > span {
position: relative;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu.on .depth1Name > span::after {
display: block;
content: "";
width: 100%;
height: 12px;
background: #a1f4c7;
position: absolute;
left: -2px;
bottom: 0;
z-index: -1;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth1Group .depth1Menu.on .depth2Group {
display: block;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group {
display: none;
overflow: hidden;
background: #F3F5F8;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu .depth2Name {
display: block;
padding: 16px 24px;
font-size: 1.125rem;
color: var(--Gray-800);
font-weight: 500;
background: var(--Bg-Line-bg-100);
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu:has(.depth3Group) .depth2Name {
background: var(--Bg-Line-bg-100) url(../../../images/kboat/common/ic_20_extend.svg) right 16px top 20px no-repeat;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu.on .depth2Name {
font-weight: 700;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu.on:has(.depth3Group) .depth2Name {
background: var(--Bg-Line-bg-100) url(../../../images/kboat/common/ic_20_extend_on.svg) right 16px top 20px no-repeat;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth2Group .depth2Menu.on .depth3Group {
display: block;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group {
display: none;
margin-top: 0;
padding: 16px;
overflow: hidden;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu {
padding-left: 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu:not(:first-child) {
margin-top: 14px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu::after {
content: none;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth3Group .depth3Menu .depth3Name {
display: block;
padding: 12px 8px;
font-size: 1rem;
color: var(--Gray-800);
font-weight: 600;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group {
padding-top: 14px;
padding-left: 12px;
border-top: 1px solid #e1e1e1;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu {
margin-top: 0;
margin-left: 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu::after {
margin-top: 6px;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu .depth4Name {
display: block;
padding: 6px 0;
}
.allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu .depth4Name:hover, .allMenuAreaEn .allMenuGroup .allMenuBox .depth4Group .depth4Menu .depth4Name:focus {
box-shadow: none;
}
}
.cptFooterEn {
padding: 24px 20px 32px;
background: var(--Bg-Line-bg-100);
}
.cptFooterEn .addressGroup {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1480px;
margin: 0 auto;
}
.cptFooterEn .addressGroup .adressBox .adressLine {
font-size: 1rem;
}
.cptFooterEn .copyGroup {
width: 100%;
max-width: 1480px;
margin: 0 auto;
}
.cptFooterEn .copyGroup .copy {
font-size: 0.875rem;
color: #82858B;
}
.cptFooterEn .siteBox {
position: relative;
}
.cptFooterEn .siteBox .siteGroup {
display: none;
position: absolute;
bottom: 100%;
right: 0;
min-height: 30px;
padding: 10px 0;
border: 1px solid #B1B1B1;
background-color: #fff;
overflow: hidden;
z-index: 100;
}
.cptFooterEn .siteBox .siteGroup .item > * {
display: block;
padding: 5px 10px;
white-space: nowrap;
}
.cptFooterEn .siteBox .siteGroup .item > *:hover {
background: var(--Bg-Line-bg-200);
}
.cptFooterEn .siteBox .siteSltBtn {
position: relative;
padding: 8px 40px 8px 0;
color: var(--Gray-800);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
text-align: left;
line-height: 1;
border-bottom: 1px solid #9B9B9B;
}
.cptFooterEn .siteBox .siteSltBtn::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 20px;
height: 20px;
margin-top: -10px;
background: url(../../../images/kboat/common/ic_20_down_arr.svg) center no-repeat;
}
.cptFooterEn .siteBox.on .siteGroup, .cptFooterEn .siteBox:hover .siteGroup, .cptFooterEn .siteBox:focus .siteGroup {
display: block;
}
@media screen and (max-width: 767px) {
.cptFooterEn .addressGroup {
flex-direction: column-reverse;
}
.cptFooterEn .siteBox {
margin-bottom: 24px;
}
.cptFooterEn .siteBox .siteGroup {
width: 100%;
}
.cptFooterEn .siteBox .siteSltBtn {
width: 100%;
}
.cptFooterEn .copyGroup {
margin-top: 16px;
}
.cptFooterEn .copyGroup .copy {
font-size: 0.8125rem;
}
}
.lytMainEng .cptFooterEn {
background: #060A0D;
}
.lytMainEng .cptFooterEn .addressGroup .adressLine {
color: #A5A6A8;
}
.lytMainEng .cptFooterEn .copyGroup .copy {
color: #82858B;
}
.lytMainEng .cptFooterEn .siteBox .siteSltBtn {
color: #e1e1e1;
border-color: #E1E1E1;
}
.lytMainEng .cptFooterEn .siteBox .siteSltBtn::after {
background: url(../../../images/kboat/common/ic_20_down_arr_w.svg) center no-repeat;
}
/* ----------------- 모바일 플로팅 메뉴 ----------------- */
.cptFloatMob {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 90;
}
.cptFloatMob .floatArea {
width: 44px;
position: absolute;
right: 16px;
bottom: 11px;
}
.cptFloatMob .floatGroup {
width: 100%;
}
.cptFloatMob .floatGroup .item {
width: 100%;
}
.cptFloatMob .speedOn {
display: block;
border-radius: 10px;
border: 1px solid #DEE2E7;
box-shadow: 1.5px 1.5px 2px 0px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.cptFloatMob .speedOn img {
width: 100%;
display: block;
}
.cptFloatMob .goTop {
width: 44px;
height: 44px;
margin-top: 8px;
font-size: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5) url(../../../images/kboat/contents/cont_main_top_m.png) center no-repeat;
}
/*# sourceMappingURL=../maps/component.css.map */