/* ----- 공통 컬러 (var 제거) ----- */
 /* 기존 root 색상 직접 치환 */
 /* primary: #003CFF; secondary: #EBF2F8; bg: #F0F2F6; strong-bg: #BFD4E8;
    depth1: #F8F8F7; depth2: #F0F0EF; text1: #0F0F0F; text2: #383838; 
    text3: #676767; text-dis: #CCCCCC; th: #F2F5F8; td-hover: #EEF3F8;
    line: #DEDEDE; blue-bg: #A7C2D5; yellow-btn: #FFE812; blue-btn: #1362EB;
    gradient-btn1: #87C6E5; gradient-btn2: #6B6CCA; 
    footer-bg1: #1D5B80; footer-bg2: #6D72CC; 
 */

/* 수영 */
/* 포트폴리오 list */
#bo_btn_top {margin-bottom: 40px;}
#gall_allchk {margin-bottom: 1rem;}
/* 수영 리뉴얼 ver3 */
#custom-cursor {transition: opacity 0.2s, width 0.2s; opacity: 0; position: fixed; top: 0; left: 0; aspect-ratio: 1/1; width: 50px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 99999; cursor: none; display: flex; align-items: center; justify-content: center;}
#custom-cursor .rotate-txt {position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; animation: rotateImage 10s linear infinite;}
#custom-cursor.click {opacity: 1; width: 100px;}
.board-main {padding: 170px 0 115px; display: flex; flex-direction: column; align-items: center;}
.board-section:last-child {padding-bottom: 100px;}
.board-section .inner {max-width: 1280px;}
/* 리스트 */
#gall_ul {display: flex; flex-wrap: wrap; column-gap: 24px;}
.gall_li {aspect-ratio: 619/769; width: calc(100% / 2 - 12px); position: relative; margin-bottom: 10%;}
.gall_li:nth-child(2n) {margin-top: 15%;}
.gall_li .gall_con {width: 100%; height: 100%;}
.gall_li .gall_con:hover {cursor: none;}
.gall_li .img-wrap {transition: background 0.2s; aspect-ratio: 619/700;  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1362eb00, #5290fb00, #65F66500) border-box; border: 6px solid transparent; border-radius: 30px; overflow: hidden;}
.gall_li .img-wrap:hover {background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1362eb, #5290fb, #65F665) border-box;}
.gall_li .img-wrap img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}
.gall_li .gall_info {margin-top: 12px;}
.gall_li .gall_info p {font-size: 18px; font-weight: 500; color: #fff;}
.gall_li .gall_info h5 {font-size: 24px; font-weight: 600; color: #fff; margin-top: 6px;}
/* 뷰페이지 */
.bo_v_nb {margin:20px 0;position:relative;clear:both;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-top:1px solid #f1f1f1;padding:13px; color: #b3b3b3;}
.bo_v_nb li:last-child {border-bottom:1px solid #f1f1f1}
.bo_v_nb li:hover {color:#2B2B2B}
.bo_v_nb li i {font-size:13px;color:#b3b3b3}
.bo_v_nb li .nb_tit {display:inline-block;padding-right:20px;color:#b3b3b3}
.bo_v_nb li .nb_date {float:right;color:#b3b3b3}
.device-wrap {overflow: hidden; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #545454 0%, #2A2A2A 4%, #2A2A2A 44%, #545454 58%, #2A2A2A 65%) border-box; border: 6px solid transparent; box-shadow: 14px 14px 33px rgba(0, 0, 0, 0.25);}
.device-wrap img {width: 100%; object-position: top center; object-fit: contain;}
.pc-wrap {width: calc(75% - 40px); aspect-ratio: 942/619; border-radius: 30px;}
.mo-wrap {width: 25%; aspect-ratio: 280/506; border-radius: 40px;}
.pf-cont h5 {font-size: 24px; font-weight: 600;}
.pf-cont1 {position: relative; padding-top: 232px;}
.pf-cont1::after {content: ''; display: block; width: 100%; height: 50%; position: absolute; top: 0; left: 0; background-color: #5290FB; z-index: -1;}
.pf-cont1 .pf-tit-box {text-align: center; margin-bottom: 60px;}
.pf-cont1 .pf-tit-box .round-btn {margin: 0 auto; cursor: pointer;}
.pf-cont1 .preview-wrap {overflow: visible; position: relative; max-width: 1400px; margin: 0 auto; aspect-ratio: 1391/750;}
.pf-cont1 .preview-wrap .device-wrap {position: absolute;}
.pf-cont1 .preview-wrap .pc-wrap {width: 95%; aspect-ratio: 1262/620; top: 0; left: 0; z-index: 1;}
.pf-cont1 .preview-wrap .mo-wrap {aspect-ratio: 332/600; bottom: 0; right: 0; z-index: 2;}
.pf-cont1 .pf-info-wrap {margin-top: 28px; display: flex; align-items: center;}
.pf-cont1 .pf-info-wrap .pf-detail {border-right: 1px solid #C2C2C2; padding-right: 24px; margin-right: 24px;}
.pf-cont1 .pf-info-wrap .pf-detail .detail-tit {margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between;}
.pf-cont1 .pf-info-wrap .pf-detail .detail-tit .sc-ul {display: flex; align-items: center; column-gap: 30px;}
.pf-cont1 .pf-info-wrap .pf-detail .detail-tit .sc-ul .circle-btn {position: relative;}
.pf-cont1 .pf-info-wrap .pf-detail .detail-tit .sc-ul .circle-btn .bubble{z-index: 10; display: none; position: absolute; white-space: nowrap; bottom: calc(100% + 15px); left: 50%; transform: translateX(-50%); padding: 0 10px; border-radius: 10px; background-color: #c0c0c0; color: #fff; font-size: 18px; line-height: 1.8; font-weight: 500;}
/* 말풍선꼬리만들기 */
.pf-cont1 .pf-info-wrap .pf-detail .detail-tit .sc-ul .circle-btn:hover .bubble {display: block;}
.pf-cont1 .pf-info-wrap .pf-detail p {font-size: 18px; font-weight: 500; color: #5c5c5c; line-height: 1.4;}
.pf-cont1 .pf-info-wrap .type-list {min-width: 320px; width: fit-content;}
.pf-cont1 .pf-info-wrap .type-list li:first-child {margin-bottom: 20px;}
.pf-cont1 .pf-info-wrap .type-list li {display: flex; align-items: center; column-gap: 35px;}
.pf-cont1 .pf-info-wrap .type-list li span {width: 140px; font-size: 24px; font-weight: 600;}
.pf-cont1 .pf-info-wrap .type-list li strong {font-size: 18px; color: #5c5c5c;}
.pf-cont2 {background-color: #5290FB; padding: 74px 0; color: #fff;}
.pf-cont2 .inner {max-width: 885px; display: flex; align-items: flex-start; justify-content: space-between;}
.pf-cont2 .left {display: flex; align-items: center; column-gap: 10px; font-size: 16px; font-weight: 500;}
.pf-cont2 .right {font-size: 20px; line-height: 2;}
.pf-cont3 > div {padding: 130px 0;}
.pf-cont3 .design-tit {margin-bottom: 30px;}
.pf-cont3 .device-wrapper {display: flex; align-items: center; column-gap: 40px;}
.pf-cont3 .sub-design {background-color: #F3F3F3;}
.pf-cont3 .sub-design .device-wrapper {margin-bottom: 200px;}
.pf-cont3 .sub-design .device-wrapper:last-child {margin-bottom: 0;}

@keyframes rotateImage {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 1280px 이하 */
@media (max-width: 1280px) {
    .board-main {padding: 130px 0 90px;}
    .pf-cont1 {padding-top: 200px;}
    .pf-cont3 .sub-design .device-wrapper {margin-bottom: 160px;}
}

/* 1024px 이하 */
@media (max-width: 1024px) {
    .gall_li .gall_con .gall_info .gall_tit {font-size: 32px;}
    .pc-wrap {width: calc(75% - 20px); border-radius: 20px;}
    .mo-wrap {width: 25%; border-radius: 25px;}
    .pf-cont3 .device-wrapper {column-gap: 20px;}
}

/* 768px 이하 */
@media (max-width: 768px) {
    #gall_ul {max-width: 500px; margin: 0 auto;}
    .board-main {padding: 100px 0 70px;}
    .gall_li {width: 100%;}
    .gall_li:nth-child(2n) {margin-top: 0;}
    .gall_li .gall_info p {font-size: 16px;}
    .gall_li .gall_info h5 {font-size: 20px;}
    .gall_li {margin-bottom: 100px;}
    .pf-cont1 {padding-top: 160px;}
    .pf-cont1 .pf-info-wrap {flex-direction: column-reverse; align-items: flex-start;}
    .pf-cont1 .pf-info-wrap .pf-detail {padding-right: 0; margin-right: 0; border-right: 0; padding-top: 24px; margin-top: 24px; border-top: 1px solid #C2C2C2;}
    .pf-cont1 .pf-info-wrap .type-list li span {font-size: 20px;}
    .pf-cont1 .pf-info-wrap .type-list li strong {font-size: 16px;}
    .pf-cont1 .pf-info-wrap .pf-detail p {font-size: 16px;}
    .pf-cont2 {padding: 50px 0;}
    .pf-cont2 .inner {flex-direction: column; row-gap: 30px;}
    .pf-cont2 .right {width: 100%; text-align: right; font-size: 18px;}
    .pf-cont3 .sub-design .device-wrapper {margin-bottom: 120px;}
}

/* 480px 이하 */
@media (max-width: 480px) {
    #custom-cursor {display: none;}
    .gall_li {margin-bottom: 60px;}
    .gall_li .gall_con:hover {cursor: pointer;}
    .gall_li .gall_con .gall_info {padding: 20px;}
    .gall_li .gall_con .gall_info .gall_tit {font-size: 24px;}
    .pc-wrap {border-radius: 10px; width: 90%;}
    .mo-wrap {border-radius: 15px; width: 30%;}
    .pf-cont1::after {height: 35%;}
    .pf-cont1 .preview-wrap {aspect-ratio: 1400 / 970;}
    .pf-cont1 .preview-wrap .pc-wrap {aspect-ratio: 942 / 619;}
    .pf-cont1 .preview-wrap .mo-wrap {aspect-ratio: 280 / 506;}
    .pf-cont2 .right {text-align: left;}
    .pf-cont3 .sub-design .device-wrapper {margin-bottom: 80px;}
    .pf-cont3 .device-wrapper {position: relative;}
    .pf-cont3 .device-wrapper .mo-wrap {position: absolute; bottom: -20px; right: 0;}
}

/* 잘림방지 */
/* 잘림방지 */
/* 잘림방지 */
/* 잘림방지 */
/* 잘림방지 */
/* 잘림방지 */
/* 잘림방지 */
/* 잘림방지 */