/* swiper */
.visual { position:relative; height:calc(100vh + 160px); padding-bottom:220px; display:flex; align-items:end; padding-top:200px; } 
.visual .swiper { position:absolute; left:0; top:0; width:100%; height:100%; } 
.visual .swiper:after { content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; z-index:1; } 
/* .visual .swiper:after { content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; z-index:1; background-color:rgba(0, 0, 0, .3); } */
.visual .swiper img { object-fit:contain; width:100%; height: 100%; } 
.visual .swiper img.m-ver { display:none; } 
.swiper-cont { z-index:2; position:absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; color:#fff; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.visual .inner { z-index:2; position:absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; } 
/* .visual .inner .cont-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; } */
.visual .copy { color:#fff; display: flex; align-items: center; justify-content: space-between; } 
.visual .control { display:inline-flex; align-items:center; flex-direction: column; } 
.visual .control .btn-visual-prev,
.visual .control .btn-visual-next,
.visual .control .btn-visual-play { width:24px; height:24px; display:inline-block; font-size:0; overflow:hidden; white-space:nowrap;; } 
/* .visual .control .btn-visual-prev { background:url(/sites/www/images/main/btn_visual_prev.svg) no-repeat center/contain; transform: rotate(90deg); } */
.visual .control .btn-visual-prev { background:url('/sites/www/images/main/btn_visual_prev02.svg') no-repeat center/contain; } 
.visual .control .btn-visual-next { background:url('/sites/www/images/main/btn_visual_next02.svg') no-repeat center/contain; } 
.visual .control .btn-visual-play { background:url('/sites/www/images/main/btn_visual_play.svg') no-repeat center/10px auto; } 
.visual .control .swiper-pagination { position:relative; width:auto; display:flex; flex-direction:column; bottom:auto; top:auto; margin-bottom: 20px; } 
.visual .control .swiper-pagination-bullet { width:3px; height:60px; border-radius:0; position:relative; overflow:hidden; margin:0 8px 0 0; background: rgba(255, 255, 255, 0.53); opacity:1; } 
.visual .control .swiper-pagination-bullet::before { content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; } 
.visual .control .swiper-pagination-bullet-active { background: rgba(255, 255, 255, 0.53); } 
.visual .control .swiper-pagination-bullet-active::before { background-color:#fff; animation:slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards; } 
.visual .swiper-paused .swiper-pagination-bullet-active::before { animation-play-state:paused; animation:none; transform:translateX(-100%); } 
.visual .nectar-shape-divider { position: absolute; left:0; right:0; bottom:0; width:100%; z-index:100; height:15%; } 
@media (max-width: 768px){
 .visual .copy { margin-left:0; } 
 .visual .copy .sub { font-size:20px; } 
 .visual .copy .title { font-size:32px; line-height:1.4; } 
 .visual .swiper img.pc-ver { display:none; } 
 .visual .swiper img.m-ver { display:block; } 
 .visual .nectar-shape-divider { height: 72px; } 
 }
@media (max-width: 500px){
 .visual { padding-top:140px; align-items:start; height:calc(100vh + 72px); padding-bottom:100px; } 
 .visual .nectar-shape-divider { height: 72px; } 
 .visual .inner { display:flex; justify-content:space-between; flex-direction:column; align-items:center; /* height:100%; */}
 .visual .copy .sub { font-size:16px; margin-bottom:6px; } 
 .visual .copy .title { font-size:22px; } 
 .visual .control .swiper-pagination-bullet { width:40px; } 
 }

.sec01 { margin-top: 110px; height: 735px; } 
.sec01 .sub-row { background: url(/sites/www/images/main/img_sec01.png) no-repeat 100% 100%; background-size: cover; height: 620px; display: flex; flex-direction: column; align-items: center; } 
.sec01-title { color: #fff; text-align: center; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25); word-break: keep-all; font-family: Pretendard; font-size: 62px; font-style: normal; font-weight: 700; line-height: 70px; /* 145.833% */}
.sec01-cont01 { margin-top: 40px; font-size: 28px; font-weight: 200; } 
.sec01-cont01 span { font-size: 28px; font-weight: 500; } 
.sec01-cont02 { font-size: 26px; } 
.sec01-serch { margin-top: 250px; display: flex; align-items: center; border-bottom: 1px solid #fff; height: 60px; width: 800px; max-width: 800px; } 
.sec01-serch select { -webkit-appearance: none; /* for chrome */
-moz-appearance: none; /*for firefox*/
appearance: none; background: url('/sites/www/images/main/ico_select_arrow.svg') no-repeat 88% 50%/12px auto; color: #fff; text-align: left; font-family: Pretendard; font-size: 20px; padding-left: 16px; font-style: normal; font-weight: 400; line-height: 60px; /* 300% */
border: none; width: 170px; outline:none; } 
.sec01-serch select option { color: #000; } 
.sec01-serch input { font-size: 20px; color: #fff; background-color: rgba(0, 0, 0, 0); border: none; padding-left: 24px; border-left: 1px solid #fff; flex: 1; outline:none; -webkit-appearance: none; /* iOS 기본 스타일 제거 */
-moz-appearance: none; /* Firefox 기본 스타일 제거 */
appearance: none; /* 기타 브라우저 기본 스타일 제거 */
background-clip: padding-box; -webkit-tap-highlight-color: transparent; transform: translateZ(0); } 
.sec01-serch input::placeholder { font-size: 20px; color: #fff; } 
.sec01-scroll { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; gap: 65px; } 
.sec01-scroll-cont { display: inline-block; text-transform: uppercase; writing-mode: vertical-rl; } 
@media (max-width: 500px){
.sec01-title { text-align: center; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25); font-size: 62px; font-style: normal; font-weight: 700; line-height: 70px; /* 145.833% */}
.sec01-cont01 { margin-top: 20px; font-size: 20px; } 
.sec01-cont01 span { font-size: 20px; } 
.sec01-cont02 { font-size: 20px; } 
.visual .control { display: none; } 
.visual .scroll-wrap { display: none; } 
}

/* rolling-list */
.rolling-list-wrap { padding: 35px 60px; border-radius: 50px; background: #f5f5f7; margin-top: 10px; } 
.rolling-list { width: 100%; height: 0; margin: 0 auto; overflow: hidden; } 
.rolling-list ul { position: relative; display: block; width: 100%; margin: 0 auto; text-align: left; overflow: hidden; } 
.rolling-list li { overflow: hidden; display: flex; } 
.rolling-list li a { width: 100%; display: flex; align-items: center; justify-content: space-between; } 
.rolling-list li a p { display: flex; align-items: center; gap: 8px; color: var(--b, #454545); font-family: Pretendard; font-size: 24px; font-style: normal; font-weight: 500; line-height: 29px; /* 120.833% */}
.rolling-list li a p:nth-child(1) { width: 135px; } 
.rolling-list li a p:nth-child(2) { flex: 1; } 
.rolling-list li a p:nth-child(3) { margin-right: 70px; } 
.rolling-list li a p:nth-child(4) { } 
.rolling-list li:first-of-type { border-top: 0; } 
.info-list-wrap { margin-top: 83px; } 
.info-list-title { color: #2d2d2d; font-family: Pretendard; font-size: 32px; font-style: normal; font-weight: 700; line-height: var(--line-height-39_2, 39.2px); /* 122.5% */
letter-spacing: var(--letter-spacing--0_5, -0.5px); margin-bottom: 29px; } 
.info-list { display: flex; height: 456px; width: 100%; gap: 16px; } 
.info-list li { width: 143px; position: relative; overflow: hidden; border-radius: 25px; padding: 48px 0 32px 0; transition: all 0.6s; } 
.info-list li > * { transition: all 0.6s; } 
.info-list li.is-active { min-width: 143px; width: auto; flex: 1; } 
.info-list li:nth-child(1) .info-list-bg { background: url('/sites/www/images/main/img_info_list01.jpg') no-repeat 50% 100%; background-size: cover; width: 100%; min-width: 380px; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; } 
.info-list li:nth-child(2) .info-list-bg { background: url('/sites/www/images/main/img_info_list02.jpg') no-repeat 50% 100%; background-size: cover; width: 100%; min-width: 380px; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; } 
.info-list li:nth-child(3) .info-list-bg { background: url('/sites/www/images/main/img_info_list03.jpg') no-repeat 50% 100%; background-size: cover; width: 100%; min-width: 380px; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; } 
.info-list li:nth-child(4) .info-list-bg { background: url('/sites/www/images/main/img_info_list04.jpg') no-repeat 50% 100%; background-size: cover; width: 100%; min-width: 380px; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; } 
.info-list li.is-active { padding: 51px 63px; display: flex; flex-direction: column; justify-content: flex-end; } 
.info-list li.is-active .info-list-bg { /* background-size: auto; */}
.info-list li .info-list-bg::before { width: 200%; height: 200%; content: ""; display: block; position: absolute; left: 0; top: 0; fill: rgba(185, 185, 185, 0.1); backdrop-filter: blur(7.5px); } 
.info-list li.is-active .info-list-bg::before { opacity: 0; } 
.info-list li a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; align-items: center; pointer-events: none; } 
.info-list li.is-active a { display: flex; align-items: center; gap: 21px; flex-direction: row; justify-content: flex-start; height: auto; animation: show 0.3s 0.6s both linear; pointer-events: initial; } 
@keyframes show { 
  0% { opacity: 0; } 
  100% { opacity: 1; } 
}
.info-list li a::after { content: ""; display: block; width: 55px; height: 55px; background: url('/sites/www/images/main/ico_info_btn01.svg') no-repeat 50% 50%; background-size: contain; } 
.info-list li.is-active a::after { display: block; width: 43px; height: 43px; background: url('/sites/www/images/main/ico_info_btn02.svg') no-repeat 50% 50%; background-size: contain; } 
.info-list li a h3 { color: #fff; font-family: Pretendard; font-size: 36px; font-style: normal; font-weight: 700; line-height: 35px; /* 97.222% */
width: 30px; text-align: center; display: flex; align-items: center; flex-direction: column; gap: 16px; margin-bottom: 0px; padding-bottom: 0px; } 
.info-list li a h3 span { display: inline-block; width: 30px; } 
.info-list li.is-active a h3 { width: auto; flex-direction: row; gap: 8px; } 
.info-list li.is-active a h3 span { width: auto; } 
.info-list li.is-active a h3.none-act { display: none; } 
.info-list li a h3.act { display: none; } 
.info-list li.is-active a h3.act { display: block; } 
.info-list li > p { color: #fff; font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28.8px; /* 160% */
/* display: none; */ opacity: 0; transition: none; } 
.info-list li.is-active > p { /* display: block; */
margin-top: 16px; opacity: 1; transition: all 0.6s; animation: show 0.3s 0.6s both linear; } 
.sec03 { border-radius: 300px 0px 0px 0px; background: #eff6ff; margin-top: 100px; padding-top: 120px; /* max-width: 1920px; */
margin-left: auto; margin-right: auto; overflow: hidden; } 


/* section */
section {margin:100px 0 0 !important;}

@media (max-width:1230px){
  section {margin:75px 0 0 !important;}
}
@media (max-width:991px){
  section {margin:50px 0 0 !important;}
}

/* icon-box */
.icon-box {display:flex; flex-wrap:wrap; align-items:center;}
.icon-box a {display:block; font-size:0; width:20px; height:20px; margin:0 10px 0 0;}
.icon-box a:last-of-type {margin:0;}
/*.icon-box a.like {background:url('/sites/www/images/main/ico_like.svg') no-repeat center / 20px auto;}*/
/*.icon-box a.like.active {background-image:url('/sites/www/images/main/ico_like_on.svg'); animation:like .5s 1 alternate;}*/
.icon-box a.share {background:url('/sites/www/images/main/ico_share.svg') no-repeat center / 19px auto;}
.icon-box a.copy {background:url('/sites/www/images/main/ico_link.svg') no-repeat center / 20px auto;}
@media (max-width:500px){
.icon-box a {width:18px; height:18px;}
.icon-box a.like {background-size:18px auto;}
.icon-box a.share {background-size:17px auto;}
.icon-box a.copy {background-size:18px auto;}
}
@keyframes like {
    0% {transform: scale(1);}
    40% {transform: scale(1.25);}
    70% {transform: scale(0.9);}
    100% {transform: scale(1);}
}

/* list-box */
.list-box {padding:134px 0 40px; position:relative; min-height: 500px;}
.list-box .list-dot {position:absolute; background-size:cover; background-position:center; transition:all ease 0.5s; border-radius:50%;}
.list-box .list-dot.red {background-image:url('/sites/www/images/main/img_dot_red.svg'); width:350px; height:350px;}
.list-box .list-dot.blue {background-image:url('/sites/www/images/main/img_dot_blue.svg'); width:250px; height:250px;}
.list-box .list-dot.yellow {background-image:url('/sites/www/images/main/img_dot_yellow.svg') no-repeat / cover; width:150px; height:150px;}
.list-box .list {display:flex; flex-wrap:wrap; position:relative; z-index:10; margin:0 -12px -35px;}
.list-box .list .list-item {position:relative; width:calc(25% - 24px); margin:0 12px 35px; padding:22px 24px; border-radius:25px; background:rgba(247, 246, 246, 0.6); border:2px solid transparent; transition:all ease 0.5s;}
.list-box .list .title-wrap {width: 50%; padding: 0 14px;}
.list-box .list .list-item .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 20px;}
.list-box .list .list-item .list-head strong {transition:all ease 0.5s; border-radius:50px; height:45px; padding:0 18px; font-size:18px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid;}
.list-box .list .list-item .list-body .inner {display:block; pointer-events:none;}
.list-box .list .list-item .list-body .inner strong {display:-webkit-box; font-size:21px; font-weight:bold; line-height:1.5; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.list-box .list .list-item .list-body .inner p {display:-webkit-box; padding:20px 0 0; margin:20px 0 0; border-top:1px solid #bebebe; font-size:17px; line-height:1.5; color:#454545; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.list-box .list .list-item .list-body .more {pointer-events:none; opacity:0; position:absolute; right:-15px; bottom:-15px; width:60px; height:60px; font-size:0; background:url('/sites/www/images/main/ico_list_more.svg') no-repeat center / cover; transition:all ease 0.5s; box-shadow:3px 3px 4px rgba(124, 124, 124, 0.25); border-radius:50%;}
.list-box .list .list-item .list-foot {display:none;}
.list-box .list .list-item:hover {background:url('/sites/www/images/main/bg_list.svg') no-repeat center center / 200%; box-shadow:4px 5px 4px rgba(46, 46, 46, 0.25);}
.list-box .list .list-item:hover .list-body .more {pointer-events:inherit; opacity:1;}
.list-box .list .list-item.yellow .list-head strong {color:#e2c12f; border-color:#e2c12f;}
.list-box .list .list-item.yellow:hover {border-color:#e2c12f;}
.list-box .list .list-item.yellow:hover .list-head strong {background:#e2c12f; color:#fff;}
.list-box .list .list-item.red .list-head strong {color:#F05F82; border-color:#F05F82;}
.list-box .list .list-item.red:hover {border-color:#F05F82;}
.list-box .list .list-item.red:hover .list-head strong {background:#F05F82; color:#fff;}
.list-box .list .list-item.orange .list-head strong {color:#F1A046; border-color:#F1A046;}
.list-box .list .list-item.orange:hover {border-color:#F1A046;}
.list-box .list .list-item.orange:hover .list-head strong {background:#F1A046; color:#fff;}
.list-box .list .list-item.green .list-head strong {color:#65C7B0; border-color:#65C7B0;}
.list-box .list .list-item.green:hover {border-color:#65C7B0;}
.list-box .list .list-item.green:hover .list-head strong {background:#65C7B0; color:#fff;}
.list-box .list .list-item.blue .list-head strong {color:#0087CC; border-color:#0087CC;}
.list-box .list .list-item.blue:hover {border-color:#0087CC;}
.list-box .list .list-item.blue:hover .list-head strong {background:#0087CC; color:#fff;}
.list-box .list .list-item.lightgreen .list-head strong {color:#83b973; border-color:#83b973;}
.list-box .list .list-item.lightgreen:hover {border-color:#83b973;}
.list-box .list .list-item.lightgreen:hover .list-head strong {background:#83b973; color:#fff;}
.list-box .list .list-item.purple .list-head strong {color:#8C73B8; border-color:#8C73B8;}
.list-box .list .list-item.purple:hover {border-color:#8C73B8;}
.list-box .list .list-item.purple:hover .list-head strong {background:#8C73B8; color:#fff;}
.list-box .title {/* width:calc(50% - 24px); */ padding:0; border-radius:0; display:flex; flex-wrap:wrap; align-items:center; margin-bottom: 30px; position: relative; z-index: 10;}
.list-box .title .list-left {flex:1; min-width:0; padding:0 15px 0 0;}
.list-box .title .list-left small {font-size:20px; font-weight:600; color:#605b5b; line-height:1.5; display:block;}
.list-box .title .list-left h2 {margin:5px 0 0; font-size:43px; font-weight:500; line-height:1;  color:#292929;}
.list-box .title .list-left h2 strong {font-size:43px; font-weight:700; line-height:1; color:#202020;}
.list-box .title .list-left h2 b {font-size:43px; font-weight:700; color:#0E70DD;}
.list-box .title .list-left ul {max-width:530px; margin:30px -5px -20px; display:flex; flex-wrap:wrap;}
.list-box .title .list-left ul li {margin:0 5px 20px;}
.list-box .title .list-left ul li a {height:45px; border-radius:30px; padding:0 17px; font-size:16px; font-weight:600; transition:all ease 0.5s; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.list-box .title .list-left ul li.all a {background:#eeeeee; color:#2D2D2D;}
.list-box .title .list-left ul li.yellow a {background:#FEFFD8; color:#D3A423;}
.list-box .title .list-left ul li.red a {background:#FFD2DD; color:#F05F82;}
.list-box .title .list-left ul li.green a {background:#D9F1EC; color:#1FAD8D;}
.list-box .title .list-left ul li.blue a {background:#E8F2FF; color:#0087CC;}
.list-box .title .list-left ul li.orange a {background:#FFEDD9; color:#EC8615;}
.list-box .title .list-left ul li.lightgreen a {background:#E0F5DA; color:#729867;}
.list-box .title .list-left ul li.purple a {background:#E1D8F1; color:#7052A6;}
.list-box .title .list-left ul li a:hover {box-shadow:4px 4px 4px rgba(69, 69, 69, 0.17);}
.list-box .title .list-right div {animation:colorCycle 1s infinite; margin:0 0 8px; font-size:0; display:block; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:15px solid #858585; transition:all ease 0.3s;}
.list-box .title .list-right div:last-of-type {margin:0;}
.list-box .list .list-item.add {background:none !important; padding:0; border-radius:0; border:0 !important; box-shadow:none !important;}
.list-box .list .list-item.add a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center; width:100%; height:100%;}
.list-box .list .list-item.add a p {width:82px; height:82px; font-size:0; border-radius:50%; background:#4F6175 url('/sites/www/images/main/ico_list_add.svg') no-repeat center / 27px auto; box-shadow:4px 4px 4px rgba(168, 168, 168, 0.25); position:relative; transition: all ease 0.5s;}
.list-box .list .list-item.add a p:before {position:absolute; content:""; left:50%; top:-40px; transform:translateX(-50%); width:1px; height:34px; background:rgba(0,0,0,0.29);}
.list-box .list .list-item.add a p:hover{background-color: #2f445c;}
.list-box .list .list-item.image {padding:0 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:none !important; padding:0; border-radius:0; border:0 !important; box-shadow:none !important;}
.list-box .list .list-item.image img {width:100%; max-width:158px;}

.list-box .title .list-left ul li.active a { box-shadow: 4px 4px 4px rgba(69, 69, 69, 0.25); }
.list-box .list .list-item { transition: all 0.3s ease; }
.list-box .list .list-item[style*="display: none"] { opacity: 0; transform: scale(0.9); }

@media (max-width:1300px){
.list-box .list {margin:0 -12px -24px;}
.list-box .list .list-item {width:calc(33.33% - 24px); padding:20px; margin:0 12px 24px;}
.list-box .title {width:98%; margin-bottom:34px;}
.list-box .list .title-wrap {width: 100%;}
}
@media (max-width:1100px){
.list-box {padding:60px 0;}
.list-box .list {margin:0 -7.5px -15px;}
.list-box .list .list-item {border-radius:10px; width:calc(33.33% - 15px); margin:0 7.5px 15px; padding:15px 10px;}
.list-box .list .list-item .list-head {margin:0 0 10px;}
.list-box .list .list-item .list-head strong {height:35px; font-size:14px; padding:0 10px;}
.list-box .list .list-item .list-body .inner strong {font-size:16px;}
.list-box .list .list-item .list-body .inner p {font-size:14px; margin:10px 0 0; padding:10px 0 0;}

}
@media (max-width:800px){
.list-box .list-dot {display:none;}
.list-box .list .list-item {width:calc(50% - 15px); /*background:url('/sites/www/images/bg_list.png') no-repeat center / cover;*/}
.list-box .list .list-item .list-body .inner {pointer-events:inherit;}
.list-box .list .list-item .list-body .more {display:none;}
/*
.list-box .list .list-item.red .list-head strong {background:#F05F82; color:#fff;}
.list-box .list .list-item.orange .list-head strong {background:#F1A046; color:#fff;}
.list-box .list .list-item.green .list-head strong {background:#65C7B0; color:#fff;}
.list-box .list .list-item.blue .list-head strong {background:#0087CC; color:#fff;}
.list-box .list .list-item.purple .list-head strong {background:#8C73B8; color:#fff;}
*/
.list-box .title {position:relative; width: 100%;}
.list-box .title .list-left {padding:0;}
.list-box .title .list-left small {font-size:18px;}
.list-box .title .list-left h2 {font-size:36px; line-height:1.3;}
.list-box .title .list-left h2 strong {font-size:36px; line-height:1.3;}
.list-box .title .list-left h2 b {font-size:36px;}
.list-box .title .list-left ul {max-width:100%; margin:20px -2.5px -5px;}
.list-box .title .list-left ul li {margin:0 4px 7px;}
.list-box .title .list-left ul li a {height:40px; padding:0 10px; font-size:14px;}
.list-box .title .list-right {position:absolute; right: 7px; top:30px;}
}
@media (max-width:560px){
.list-box .list {margin:0 -5px -10px;}
.list-box .list .list-item {width:calc(50% - 10px); margin:0 5px 10px; padding:10px;}
.list-box .list .list-item .list-head strong {font-size:13px; padding:0 8px; height:30px;}
.list-box .list .list-item .list-head .icon-box {display:none;}
.list-box .list .list-item .list-body .inner strong {font-size:14px;}
.list-box .list .list-item .list-body .inner p {font-size:12px; min-height:65px; margin:7px 0 0; padding:7px 0 0;}
.list-box .list .list-item .list-foot {display:block; margin:10px 0 0;}
.list-box .list .list-item .list-foot .icon-box {justify-content:flex-end;}
.list-box .list .list-item.image img {max-width:110px;}
.list-box .list .list-item.add a p {width:65px; height:65px; background-size:21px auto;}
}

/* 각 요소에 순차적 애니메이션 딜레이 설정 */
.list-box .title .list-right div:nth-child(1) { animation-delay: 0s; }
.list-box .title .list-right div:nth-child(2) { animation-delay: 0.2s; }
.list-box .title .list-right div:nth-child(3) { animation-delay: 0.4s; }
.list-box .title .list-right div:nth-child(4) { animation-delay: 0.6s; }

/* 색상 순환 애니메이션 (4단계) */
@keyframes colorCycle {
  0%   { border-top-color: #858585; }
  20%  { border-top-color: #858585; }
  25%  { border-top-color: #B4B4B4; }
  45%  { border-top-color: #B4B4B4; }
  50%  { border-top-color: #D9D9D9; }
  70%  { border-top-color: #D9D9D9; }
  75%  { border-top-color: #EFEFEF; }
  95%  { border-top-color: #EFEFEF; }
  100% { border-top-color: #858585; }
}

/* search-box */
.search-box {position:relative; overflow-x: hidden;}
.search-box .swiper .swiper-slide .slide1 {background: url('/sites/www/images/main/visual_slide.jpg') no-repeat center center; background-size: cover;}
.search-box .swiper .swiper-slide .slide2 {background: url('/sites/www/images/main/visual_slide2.jpg') no-repeat center center; background-size: cover;}
.search-box .swiper .swiper-slide .slide3 {background: url('/sites/www/images/main/visual_slide3.jpg') no-repeat center center; background-size: cover;}
.search-box .swiper .swiper-slide > div {position:relative;  border-radius:0; overflow:hidden; }
.search-box .swiper .swiper-slide > div:before {display:block; content:""; padding-bottom:32.5%;}
.search-box .swiper .swiper-slide > div:after {position:absolute; left:0; top:0; width:100%; height:100%; content:"";}
/* .search-box .swiper .swiper-slide > div img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;} */
/* .search-box .swiper .swiper-slide > div img.mo {display:none;} */
.search-control {position: absolute; top: 50%; transform: translateY(-50%); right: 100px; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:5px;}
.search-control .search-pagination {display: flex; flex-direction: column;}
.search-pagination .swiper-pagination-bullet {width: 10px; height: 38px; border-radius: 100px; border: 1px solid #fff; background: none; opacity: 1; margin: 3px 0;}
.search-pagination .swiper-pagination-bullet-active {background-color: #fff;}
.search-button-play-stop {width: 24px; height:24px; background: url("/sites/www/images/main/icon_play_stop.svg")no-repeat center center; background-size: cover;}
.search-button-play-stop.active {background:url("/sites/www/images/main/icon_play.svg")no-repeat center center; background-size: cover; transform: rotate(180deg);}

/* .search-box .swiper .swiper-slide.swiper-slide-active > div {border-radius:0 0 150px 0;} */
.search-box .text {position:absolute; z-index:20; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background-color: rgba(0, 0, 0, 0.1);}
.search-box .text .container {width:100%;}
.search-box .text h2 {overflow: hidden;font-size:52px; font-weight:bold !important; text-align:center; line-height:1.4; color:rgba(255,255,255,0.9); word-break:keep-all;}
.char {font-weight: bold;}
.split {visibility: hidden;}

.search-box .text p {text-align:center; font-size:34px; font-weight:600; line-height:1.5; color:rgba(255,255,255,0.7); word-break:keep-all; animation:fadeInUp 0.5s ease-in-out forwards; opacity:0; animation-delay: 1s !important;}
.search-box .text p br {display:none;}
.search-box .text .inner {padding:0 24px 0 0; max-width:800px; margin:30px auto 0; border-bottom:1px solid rgba(255,255,255,0.87); display:flex; flex-wrap:wrap; align-items:center;}
.search-box .text .inner select {height:60px; padding:0 24px 0; font-size:21px; font-weight:600; color:rgba(255,255,255,0.6); background:url('/sites/www/images/main/ico_select.svg') no-repeat right center / 12px;}
.search-box .text .inner select option {color:#333; font-size:18px;}
.search-box .text .inner .input {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; position:relative;}
.search-box .text .inner .input:before {display:inline-block; content:""; width:1px; height:20px; background:#fff; margin:0 30px;}
.search-box .text .inner .input input {height:60px; min-width:0; flex:1; font-size:21px; font-weight:bold; color:#fff; background:none;}
.search-box .text .inner .input form  {display:flex; align-items: center; justify-content: center; flex:1;}
.search-box .text .inner .input form .search {width:35px; height:35px; font-size:0; background:url('/sites/www/images/main/ico_search.svg') no-repeat center / 32px auto;}
.search-box .text .scroll {display:block; margin:0 auto; width:45px; height:60px; background:url('/sites/www/images/main/ico_scroll.svg') no-repeat center / cover; font-size:0; position:absolute; left:50%; transform:translateX(-50%); bottom:5%;}

.search-box .swiper{position: relative;}
.search-box .swiper-shape-divider{position: absolute; right: 0; bottom: 0; z-index: 99;}

.search-box .text .inner .input input::placeholder {font-size:21px; font-weight:bold; color:rgba(255,255,255,0.6);}

@media (max-width:1300px){
.search-box .swiper .swiper-slide > div:before {padding-bottom:50%;}
.search-box .swiper .swiper-slide > div img.mo {display:block;}
.search-box .swiper .swiper-slide > div img.pc {display:none;}
.search-box {position:relative;}
.search-box .swiper .swiper-slide .slide1 {background: url('/sites/www/images/main/visual_slide_m.jpg') no-repeat center center; background-size: cover;}
.search-box .swiper .swiper-slide .slide2 {background: url('/sites/www/images/main/visual_slide_m2.jpg') no-repeat center center; background-size: cover;}
.search-box .swiper .swiper-slide .slide3 {background: url('/sites/www/images/main/visual_slide_m3.jpg') no-repeat center center; background-size: cover;}
.search-box .text h2 {font-size:45px;}
.search-box .text p {line-height:1.3; font-size:26px;}
.search-box .text p br {display:block;}
.search-box .text .inner select {font-size:18px;}
.search-box .text .inner select option {font-size:16px;}
.search-box .text .inner .input p span {font-size:18px;}
.search-box .text .inner .input input {font-size:18px;}
.search-box .text .inner .input .search {background-size:27px auto;}
}
@media (max-width:1230px){
  .search-control {right: 75px;}
}
@media (max-width:1080px){
  .search-control {display: none;}
}
@media (max-width:991px){
.search-box .swiper .swiper-slide > div:before {padding-bottom:70%;}
.search-box .text h2 {font-size:30px;}
.search-box .text p {font-size:20px;}
.search-box .swiper-shape-divider { position: absolute; right: 0; bottom: 0; z-index: 99; width: 98px; height: 99px;}
}

@media (max-width:767px){
.search-box .swiper .swiper-slide > div:before {padding-bottom:90%;}
/* .search-box .swiper .swiper-slide.swiper-slide-active > div {border-radius:0 0 70px 0;} */
.search-box .text h2 {font-size:20px;}
.search-box .text p {font-size:18px;}
.search-box .text p br {display:none;}
.search-box .text .inner {padding:0 10px; border:0;}
.search-box .text .inner select {height:45px; font-size:18px; padding:0 24px 0 10px; width:100%; border-bottom:1px solid rgba(255,255,255,0.87);}
.search-box .text .inner select option {font-size:14px;}
.search-box .text .inner .input {flex:none; width:100%; border-bottom:1px solid rgba(255,255,255,0.87);}
.search-box .text .inner .input form {flex-wrap: wrap; width: 100%; flex:1;}
.search-box .text .inner .input:before {display:none;}
.search-box .text .inner .input input {height:45px; font-size:18px; padding:0 10px;}
/* .search-box .text .inner .input p {margin:0; height:45px; padding:0 10px;} */
.search-box .text .inner .input input::placeholder {font-size:18px;}
.search-box .text .inner .input form .search {background-size:24px auto;}
.search-box .text .scroll {display:none; width:33px; height:55px; transform:none; position:static; margin:30px auto 10px;}
}

@media (max-width:370px){
.search-box .swiper .swiper-slide > div:before {padding-bottom:110%;}
.search-box .text h2 {font-size:17px;}
.search-box .text p {font-size:15px;}
}
@keyframes fadeInUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}


/* notice-box */
.notice-box {margin:46px 0 75px;}
.notice-box .notice-inner {display:flex; flex-wrap:wrap; align-items:center; background:rgba(236, 236, 244, 0.68); border-radius:50px; box-shadow:3px 10px 8px rgba(156, 156, 156, 0.25);}
.notice-box .notice-inner .swiper {flex:1; min-width:0;}
.notice-box .notice-inner .swiper .swiper-container {height:100px; border-radius:50px;}
.notice-box .notice-inner .swiper .swiper-slide .inner {padding:0 60px; display:flex; flex-wrap:wrap; align-items:center; height:100%;}
.notice-box .notice-inner .swiper .swiper-slide .inner p {font-size:24px; font-weight:500; color:#3C3C3C;}
.notice-box .notice-inner .swiper .swiper-slide .inner p.subject {flex:1; min-width:0; padding:0 60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.notice-box .notice-inner .swiper .swiper-slide .inner:hover p.subject {text-decoration:underline;}
.notice-box .notice-inner .more {display:flex; flex-wrap:wrap; align-items:center; padding:0 60px 0 0; font-size:24px; font-weight:500; color:#3c3c3c;}
.notice-box .notice-inner .notice-tit {font-size:24px; font-weight:500; color:#3c3c3c; padding: 0 0 0 60px;}
.notice-box .notice-inner .more:after {display:inline-block; content:""; width:18px; height:18px; margin:0 0 0 8px; background:url('/sites/www/images/main/ico_notice_more.svg') no-repeat center / cover; transition: transform 0.5s;}
.notice-box .notice-inner .more:hover:after {transform: rotate(180deg);}
@media (max-width:1300px){
.notice-box {margin:40px 0;}
.notice-box .notice-inner .swiper .swiper-container {height:86px;}
.notice-box .notice-inner .swiper .swiper-slide .inner {height:86px;}
.notice-box .notice-inner .swiper .swiper-slide .inner p {font-size:20px;}
.notice-box .notice-inner .more,.notice-box .notice-inner .notice-tit {font-size:20px;}
}
@media (max-width:991px){
.notice-box .notice-inner .swiper .swiper-container {height:60px;}
.notice-box .notice-inner .swiper .swiper-slide .inner {padding:0 20px; height:60px;}
.notice-box .notice-inner .swiper .swiper-slide .inner p {font-size:17px;}
.notice-box .notice-inner .swiper .swiper-slide .inner p.subject {padding:0 20px;}
.notice-box .notice-inner .more {font-size:17px; padding:0 20px 0 0;}
.notice-box .notice-inner .notice-tit {font-size:17px; padding:0 0 0 20px;}
.notice-box .notice-inner .more:after {width:14px; height:14px; margin:0 0 0 5px;}
}
@media (max-width:767px){
.notice-box {margin:24px 0;}
.notice-box .notice-inner .swiper .swiper-container {height:60px;}
.notice-box .notice-inner .swiper .swiper-slide .inner {padding:0 20px; height:60px;}
.notice-box .notice-inner .swiper .swiper-slide .inner p {font-size:14px;}
.notice-box .notice-inner .swiper .swiper-slide .inner p:last-of-type {display:none;}
.notice-box .notice-inner .swiper .swiper-slide .inner p.subject {padding:0 15px;}
.notice-box .notice-inner .more {font-size:14px; padding:0 20px 0 0;}
.notice-box .notice-inner .notice-tit {font-size:14px;}
.notice-box .notice-inner .more:after {width: 12px; height: 12px; margin:0 0 0 5px;}
}

/* graph-box */
.graph-box {background:rgba(241, 245, 251, 0.36); border-radius:150px 0 0 0; padding:112px 0 60px;}
.graph-box .follower {pointer-events:none; position:absolute; width:203px; height:144px; transform:translate(-50%, -50%);  background:url('/sites/www/images/main/drag_cursor.svg') no-repeat center / cover; z-index:15;}
.graph-box .list-head {margin:0 0 60px;}
.graph-box .list-head h2 {text-align:center; font-size:41px; font-weight:bold; color:#2d2d2d; margin:0 0 20px;}
.graph-box .list-head p {text-align:center; font-size:23px; line-height:1.3; color:#2d2d2d; word-break:keep-all;}
.graph-box .list-body .container {max-width:100%; padding:0;}
.graph-box .list-body .swiper-control {max-width:1600px; margin:-120px 12px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; cursor:none !important;}
.graph-box .list-body .swiper-control > div {opacity:1; background:#fff url('/sites/www/images/main/ico_swiper_prev.svg') no-repeat center / 16px; margin:0 14px 0 0; position:static; width:65px; height:65px; box-shadow:4px 4px 4px rgba(177, 177, 177, 0.25); border-radius:50%;}
.graph-box .list-body .swiper-control > div:last-of-type {margin:0;}
.graph-box .list-body .swiper-control > div:hover {background-color:#838383;}
.graph-box .list-body .swiper-control > div.swiper-button-next {background-image:url('/sites/www/images/main/ico_swiper_next.svg');}
.graph-box .list-body .swiper-control > div.swiper-button-prev:hover {background-image:url('/sites/www/images/main/ico_swiper_prev_w.svg');}
.graph-box .list-body .swiper-control > div.swiper-button-next:hover {background-image:url('/sites/www/images/main/ico_swiper_next_w.svg');}
.graph-box .list-body .swiper-page {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:35px 0 0;}
.graph-box .list-body .swiper-page .swiper-pagination {position:static;}
.graph-box .list-body .swiper-page .swiper-pagination span {margin:0 5px; transition:all ease 0.5s; width:16px; height:16px; background:#fff; box-shadow:3px 3px 4px rgba(130, 130, 130, 0.25); opacity:1;}
.graph-box .list-body .swiper-page .swiper-pagination span.swiper-pagination-bullet-active {width:35px; border-radius:10px; background:#0072FF;}
.graph-box .list-body .swiper-page .play {width:38px; height:38px; border-radius:50%; box-shadow:3px 3px 4px rgba(130, 130, 130, 0.25); background:#fff url('/sites/www/images/main/ico_pause.svg') no-repeat center / 12px auto; font-size:0; margin:0 0 0 10px;}
.graph-box .list-body .swiper-page .play.active {background-image:url('/sites/www/images/main/ico_play.svg'); background-size:12px auto}
.graph-box .list-body .swiper-container {padding:30px 80px 60px;}
.graph-box .list-body .swiper-container .swiper-slide {transition:top ease 0.5s; top:0;} 
.graph-box .list-body .swiper-container .swiper-slide .inner {max-height: 350px; }
.graph-box .list-body .swiper-container .swiper-slide.swiper-slide-prev {top:30px;}
.graph-box .list-body .swiper-container .swiper-slide.swiper-slide-next {top:30px;}
.graph-box .list-body .inner {position:relative; background:#fff; overflow:hidden; border-radius:30px; box-shadow:4px 4px 8px rgba(0,0,0,0.25);}
.graph-box .list-body .inner:after {display:block; content:""; padding-bottom:105%;}
.graph-box .list-body .inner .inner-wrap {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; align-content:center;}
.graph-box .list-body .inner .list-image {/*height:169px;*/ height: 55%; width:100%; display: flex; align-items: center;}
.graph-box .list-body .inner .list-image img {width:100%; max-height:100%; object-fit:fill; display:block;}
.graph-box .list-body .inner .list-image .image3 {object-fit:scale-down}
.graph-box .list-body .inner .list-content {padding:15px; width:100%;}
.graph-box .list-body .inner .list-content strong {padding:0; display:block; font-size:22px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.graph-box .list-body .inner .list-bottom {width:100%; padding:0 15px 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.graph-box .list-body .inner .list-bottom .bottom-left{width:60px; height: 60px; background-color: #ebf4f9; border-radius: 50%;display: flex; justify-content: center; align-items: center;}
.graph-box .list-body .inner .list-bottom .bottom-left > img{width: 60%; object-fit: cover;}
.graph-box .list-body .inner .list-bottom .bottom-right > div{width:30px; height: 30px; background-color: #909090; border-radius: 50%;display: flex; justify-content: center; align-items: center; margin-left: 10px; }
.graph-box .list-body .inner .list-bottom .bottom-right.red > div{background-color: #fb4949;}
.graph-box .list-body .inner .list-bottom .bottom-right.blue > div{background-color: #1f56bc;}
.graph-box .list-body .inner .list-bottom > div {display:flex; flex-wrap:wrap; align-items:center;}
.graph-box .list-body .inner .list-bottom > div img {width:18px;}
.graph-box .list-body .inner .list-bottom > div strong {display:flex; flex-wrap:wrap; align-items:baseline; font-size:46px; font-weight:bold; color:#3c3c3c;}
.graph-box .list-body .inner .list-bottom > div strong em {margin:0 0 0 3px; font-size:22px; font-weight:bold; color:#5c5c5c; position:relative; bottom:2px;}
.graph-box .list-body .inner .list-hover {pointer-events:none; opacity:0; transition:all ease 0.5s; position:absolute; left:0; top:0; width:100%; height:100%; border:4px solid #0072ff; border-radius:30px; overflow:hidden;}
.graph-box .list-body .inner .list-hover .hover-background {position:absolute; left:0; top:0; width:100%; height:100%;}
.graph-box .list-body .inner .list-hover .hover-background img {width:100%; height:100%; object-fit:cover;}
.graph-box .list-body .inner .list-hover .hover-background:after {position:absolute; content:""; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:block;}
.graph-box .list-body .inner .list-hover .hover-content {padding:20px 15px; position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center;}
.graph-box .list-body .inner .list-hover .hover-content > img {border-radius:50%; width:76px; height:76px; margin:0 auto 20px; box-shadow:2px 2px 2px rgba(0,0,0,0.25);}
.graph-box .list-body .inner .list-hover .hover-content > p { margin-top: 18px; text-shadow:2px 3px 4px rgba(0,0,0,0.25); width:100%; font-size:24px; text-align:center; font-weight:bold; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.graph-box .list-body .inner .list-hover .hover-content > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; margin:15px 0 0;}
/* .graph-box .list-body .inner .list-hover .hover-content > div img {width:30px; margin:0 0 0 7px;} */
.graph-box .list-body .inner .list-hover .hover-content > div strong {font-size:46px; font-weight:800; color:#fff; text-shadow:2px 3px 4px rgba(0,0,0,0.25);}
.graph-box .list-body .inner:hover .list-hover {pointer-events:inherit; opacity:1;}
.graph-box .list-body .inner .list-hover .hover-content .state-background-circle {width: 80px; height: 80px; background-color: #ebf4f9; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.graph-box .list-body .inner .list-hover .hover-content .state-background-circle img{margin: 0; width: 40px;} 
.graph-box .list-body .inner .list-hover .hover-content .arrow-background-circle{width: 30px; height: 30px; background-color: #909090; border-radius: 50%;display: flex;  justify-content: center; align-items: center; margin-left: 10px;}
.graph-box .list-body .inner .list-hover .hover-content .arrow-background-circle.red{background-color: #fb4949;}
.graph-box .list-body .inner .list-hover .hover-content .arrow-background-circle.blue{background-color: #1f56bc;}
.graph-box .list-body .inner .list-hover .hover-content .arrow-background-circle img {width:18px;}
.graph-box .list-foot p {text-align:right; font-size:17px; font-weight:300; color:#262626;}
.graph-box .swiper-container:hover,
.graph-box .swiper-container *:hover { cursor: none !important; }

@media (max-width:1500px){
.graph-box .list-head h2 {font-size:35px;}
.graph-box .list-head p {font-size:18px;}
.graph-box .list-body .inner .list-content strong {font-size:20px;}
.graph-box .list-body .inner .list-bottom { padding: 0 15px 10px;}
.graph-box .list-body .inner .list-bottom > img {width:45px;}
.graph-box .list-body .inner .list-bottom > div img {width:20px;}
.graph-box .list-body .inner .list-bottom > div strong {font-size:40px;}
.graph-box .list-body .inner .list-bottom > div strong em {font-size:20px;}
}
@media (max-width:1366px){
.graph-box .follower {display:none;}
}
@media (max-width:991px){
.graph-box {border-radius:50px 0 0 0; padding:60px 0 60px;}
.graph-box .follower {display:none;}
.graph-box .list-head {margin:0 0 30px;}
.graph-box .list-head h2 {font-size:25px;}
.graph-box .list-head p {font-size:16px;}
.graph-box .list-head p br {display:none;}
.graph-box .list-body .swiper-container {padding:10px 80px 50px;}
.graph-box .list-body .swiper-control {display:none;}
.graph-box .list-body .swiper-page {margin:40px 0 0;}
.graph-box .list-body .inner {border-radius:15px;}
.graph-box .list-body .inner .list-content {padding:12px 10px;}
.graph-box .list-body .inner .list-content strong {font-size:16px;}
.graph-box .list-body .inner .list-bottom > img {width:35px;}
.graph-box .list-body .inner .list-bottom > div img {width:25px;}
.graph-box .list-body .inner .list-bottom > div strong {font-size:26px;}
.graph-box .list-body .inner .list-bottom > div strong em {font-size:16px;}
.graph-box .list-body .inner .list-bottom > div img {width:12px;}
.graph-box .list-body .inner .list-bottom .bottom-left{width:40px; height: 40px; } 
.graph-box .list-body .inner .list-bottom .bottom-left > img { width: 50%; }
.graph-box .list-body .inner .list-bottom .bottom-right > div { width: 22px; height: 22px; }
.graph-box .list-body .inner .list-hover {border-radius:15px;}
.graph-box .list-body .inner .list-hover .hover-content > img {width:35px; height:35px;}
.graph-box .list-body .inner .list-hover .hover-content > p {font-size:20px;}
.graph-box .list-body .inner .list-hover .hover-content > div img {width:30px;}
.graph-box .list-body .inner .list-hover .hover-content > div strong {font-size:16px;}
.graph-box .list-body .inner .list-hover .hover-content .arrow-background-circle { width: 24px; height: 24px; }
.graph-box .list-body .inner .list-hover .hover-content .arrow-background-circle img { width: 14px; }
.graph-box .list-foot p {font-size:13px; position:relative; top:-70px;}
}