@charset "utf-8";


.swiper-container .swiper-slide a {display: block; width: 100%; cursor: default; position: relative;}
.swiper-container .swiper-slide a[target='_blank'] {cursor: pointer;}
.swiper-container .swiper-slide a img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.swiper-container .control {position: relative; max-width: 1636px; width: 100%; margin: 0 auto;}
.swiper-container .control .wrapper {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 10px;}
.swiper-container .control .wrapper > div {cursor: pointer; padding: 3px;}
.swiper-container .control .wrapper .pagination {display: flex; gap: 10px; align-items: center; margin: 0;}
.swiper-pagination-bullet {background: #c3c3c3!important; opacity: 1!important;}
.swiper-pagination-bullet-active {background: #fefefe!important;}


section.sc01 {max-width: 100%; padding: 0;}
section.sc01 .swiper-container .swiper-slide a {padding-top: 28.377%;}


section.sc02 .chart_cate {display: flex; flex-wrap: wrap; gap: 20px;}
section.sc02 .chart_cate li {width: calc(100% / 3 - 13.3333px);}
section.sc02 .chart_cate li .tit.circle {position: relative; padding-left: 25px;}
section.sc02 .chart_cate li .tit.circle::before {content: ""; width: 15px; height: 15px; border-radius: 100%; margin-right: 15px; position: absolute; left: 0; top: 50%; transform:translateY(-50%);}
section.sc02 .chart_cate li.ai .tit.circle::before {background: #5EC2CD;}
section.sc02 .chart_cate li.bd .tit.circle::before {background: #C3D844;}
section.sc02 .chart_cate li.bc .tit.circle::before {background: #ed8427;}


section.sc03 .tit_wrap sub {margin-left: 10px;}
section.sc03 .chart_total .chart_box {display: flex; flex-wrap: wrap; gap: 20px;}
section.sc03 .chart_total .chart_box .lf {width: calc(100% / 3 * 2 - 10px);}
section.sc03 .chart_total .chart_box .rt {width: calc(100% / 3 - 10px);}


section.sc04 .news {width: 100%; padding: 33.835% 0 0 0;}
section.sc04 .news > img {position: absolute; left: 0; top: 0;width: 100%; height: 100%; object-fit: cover;}
section.sc04 .news > video {position: absolute; left: 0; top: 0;width: 100%; height: 100%; /*object-fit: cover;*/}
section.sc04 .news .link {display: inline-flex; align-items: center; width: auto; position: absolute; padding: 10px 24px; right: 40px; bottom: 40px; background: #fefefe; border-radius: 10px; color: #1a1a1a; font-weight: 500;}
section.sc04 .news .link img {width: 8px; height: 12px; position: relative; margin-left: 5px;}


section.sc05 .inner {width: 100%;}
section.sc05 .tab_top {display: flex; justify-content: space-between;}
section.sc05 .tab_top .tab_list {display: flex;}
section.sc05 .tab_top .tab_list li {width: 150px; height: 60px; padding: 10px; font-size: 1.125rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 20px 20px 0 0; border: 1px solid #000; background: #474747; border-bottom: 1px solid #c3c3c3; color: #c3c3c3; transition: color .3s; position: relative; z-index: 1;}
section.sc05 .tab_top .tab_list li.current {color: #fff; border: 1px solid #a9a9a9; border-bottom: 1px solid transparent; position: relative; box-shadow: 4px -4px 6px rgba(0, 0, 0, 0.30); z-index: 3;}
section.sc05 .tab_top .tab_list li:nth-child(1).current {background: linear-gradient(to right, #474747, #404040);}
section.sc05 .tab_top .tab_list li:nth-child(2).current {background: linear-gradient(to right, #404040, #3B3B3B);}
section.sc05 .tab_top .tab_list li:nth-child(3).current {background: linear-gradient(to right, #3B3B3B, #343434);}
section.sc05 .tab_top .tab_list li:nth-child(4).current {background: linear-gradient(to right, #343434, #2e2e2e);}
section.sc05 .tab_top .tab_list li:nth-child(5).current {background: linear-gradient(to right, #2e2e2e, #272727);}
section.sc05 .tab_content {display: none; margin-top: -1px; border-radius: 0 20px 20px 20px; box-shadow: 4px -4px 6px rgba(0, 0, 0, 0.30);}
section.sc05 .tab_content li {display: flex; flex-wrap: wrap; width: 100%; animation: boxShow 1s ease; animation-fill-mode: forwards; opacity: 0;}
section.sc05 .tab_content.current {display: flex; flex-wrap: wrap; gap: 10px;}
section.sc05 .tab_content > li a {width: 100%; height: 100px; border: 1px solid #a9a9a9; border-radius: 20px; padding: 0 50px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: url(/resources/images/layout/box_bg.png) center center no-repeat; background-size: cover; transition: .4s;}
section.sc05 .tab_content > li a:hover {border: 1px solid #fefefe;}
section.sc05 .tab_content > li:nth-child(2) {animation-delay: 0.5s;}
section.sc05 .tab_content > li:nth-child(3) {animation-delay: 1s;}
section.sc05 .tab_content > li:nth-child(4) {animation-delay: 1.5s;}
section.sc05 .tab_content > li:nth-child(5) {animation-delay: 2s;}
section.sc05 .tab_content > li.empty {font-size: 2rem; color: #c3c3c3; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center;}
section.sc05 .tab_content > li .grade {width: 15%; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px;}
section.sc05 .tab_content > li .grade span.num {font-size: 1.5rem; font-weight: 500; color: #fff; text-align: left; width: 60%;}
section.sc05 .tab_content > li .grade span.ico {color: #c3c3c3; font-size: 1.125rem; font-weight: 700; padding-left: 20px; position: relative; width: 40%; text-align: left;}
section.sc05 .tab_content > li .grade span.ico::before,
section.sc05 .tab_content > li .cnt span.ico::before {content: ""; width: 14px; height: 14px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url(/resources/images/main/ico_none.png) center center no-repeat; background-size: 80%;}
section.sc05 .tab_content > li .grade span.ico.up::before,
section.sc05 .tab_content > li .cnt span.ico.up::before {background: url(/resources/images/main/ico_up.png) center center no-repeat; background-size: 80%;}
section.sc05 .tab_content > li .grade span.ico.down::before,
section.sc05 .tab_content > li .cnt span.ico.down::before {background: url(/resources/images/main/ico_down.png) center center no-repeat; background-size: 80%;}
section.sc05 .tab_content > li .company {width: 85%; display: flex; align-items: center; justify-content: space-between; gap: 0 10px;}
section.sc05 .tab_content > li .company .thum {display: flex; align-items: center; gap: 10px;}
section.sc05 .tab_content > li .company .thum img {width: 48px; height: 48px; object-fit: cover; border-radius: 100%; overflow: hidden; border: 1px solid #c3c3c3;}
section.sc05 .tab_content > li .company .thum span {font-size: 1.5rem; color: #fff; font-weight: 700;}
section.sc05 .tab_content > li .cnt {width: 40%; max-width: 300px; display: flex; align-items: center; gap: 10px;}
section.sc05 .tab_content > li .cnt span.num {text-align: right; width: 60%; font-size: 1.375rem; font-weight: 500; color: #fff;}
section.sc05 .tab_content > li .cnt span.ico {text-align: left; display: block; width: 40%; min-width: 80px; color: #c3c3c3; padding-left: 20px; position: relative;}


section.sc06 .compare {display: flex; flex-wrap: wrap; gap: 10px;}
section.sc06 .compare .item {width: calc(100% / 2 - 5px); min-height: 450px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 20px; position: relative; transition: background .4s;}
section.sc06 .compare .item button {background: transparent; width: 100%; height: 100%; cursor: pointer;}
section.sc06 .compare .item:hover {background:linear-gradient(135deg, rgba(255,255,255,.2), #424242 50%);}
section.sc06 .compare .item.select {border: 1px solid #fefefe; gap: 10px;}
section.sc06 .compare .item.select:hover {background: linear-gradient(135deg, rgba(255,255,255,.2), #1a1a1a 50%);}
section.sc06 .compare .item.select .del {position: absolute; right: 40px; top: 40px; background: url(/resources/images/layout/ico_close_w.svg) center center no-repeat; width: 24px; height: 24px; background-size: cover; cursor: pointer;}
section.sc06 .compare .item.select .thum {width: 100%; text-align: center;}
section.sc06 .compare .item.select .thum img {width: 80px; height: 80px; object-fit: cover; border-radius: 100%; overflow: hidden; border: 1px solid #c3c3c3;}
section.sc06 .compare .item.select .info {color: #333; text-align: center; padding-top: 15px;}
section.sc06 .compare .item.select .info h4 {font-size: 1.5rem; color: #fff; font-weight: 700;}
section.sc06 .compare .item.select .info ul {display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px;}
section.sc06 .compare .item.select .info ul li {position: relative;}
section.sc06 .compare .item.select .info ul li + li::before {content: ""; width: 1px; height: 50%; background: #c3c3c3; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}
section.sc06 .compare .item.select .info ul li span {font-size: 1.125rem; color: #c3c3c3;}
section.sc06 .cate {display: flex; align-items: center;}
section.sc06 .cate span {display: inline-block; position: relative;}
section.sc06 .cate span + span {margin-left: 6px;}
section.sc06 .cate span + span::before {content: ","; font-size: .9375rem; position: absolute; left: -6px; bottom: 2px;}
section.sc06 .company .item.deselect {background: #f9f9f9; border: 1px dashed #d9d9d9;}
section.sc06 .company .item.deselect .plus {display: block; width: 100%; height: 100%; cursor: pointer; background: transparent;}
section.sc06 .compare .item.deselect .txt {width: 100%; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 20px; position: relative;}
section.sc06 .compare .item.deselect .txt span {width: 100%; display: block; text-align: center; font-size: 1.5rem; color: #c3c3c3; font-weight: 500;}
section.sc06 .compare .item .box {width: 100%; padding: 20px 30px; background: #f6f9ff; border-radius: 15px;}
section.sc06 .compare .item .box.tit {display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 0; padding: 0; margin-bottom: 20px;}
section.sc06 .compare .item .box.tit img {width: 70px; height: 70px; object-fit: cover; border-radius: 5px; border: 1px solid #c3c3c3; overflow: hidden;}
section.sc06 .compare .item .box.tit .info {width: calc(100% - 90px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 20px;}
section.sc06 .compare .item .box.tit .info li h3 {font-size: 1.25rem; color: #333;}
section.sc06 .compare .item .box.tit .info li ul {display: flex; gap: 20px; margin-top: 5px;}
section.sc06 .compare .item .box.tit .info li ul li {color: #747474; font-size: .9375rem; position: relative;}
section.sc06 .compare .item .box.tit .info li ul li + li::before {content: ""; width: 1px; height: 50%; background: #747474; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}
section.sc06 .compare .item .box.tit .info li ul li.cate span {color: #747474;}

section.sc06 .modal {position: fixed; left: 0; top: 0; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 999999; display: none; transition: .4s; background: rgba(0,0,0,.6);}
section.sc06 .modal .modal_wrap {max-width: 960px; width: 95%; max-height: 100vh; height: auto; margin: 0 auto; border: none;}
section.sc06 .modal .modal_wrap .tit_wrap {align-items: center;}
section.sc06 .modal .modal_wrap .tit_wrap .close {background: url(/resources/images/layout/ico_close_w.svg) center center no-repeat; background-size: cover; width: 24px; height: 24px; cursor: pointer;}
section.sc06 .modal .modal_wrap .ul_tbl {width: 100%; height: 100%; max-height: 674px; overflow: overlay;}
section.sc06 .modal .modal_wrap .ul_tbl::-webkit-scrollbar-thumb {background: #fefefe; border-radius: 10px;}
section.sc06 .modal .modal_wrap .ul_tbl::-webkit-scrollbar {background: transparent; width: 4px; height: 4px;}
section.sc06 .modal .modal_wrap .ul_tbl > ul {width: 100%; min-width: 800px;}
section.sc06 .modal .modal_wrap .ul_tbl > ul > li {width: 100%;}
section.sc06 .modal .modal_wrap .ul_tbl > ul > li .tr > span:nth-child(1) {width: 264px;}
section.sc06 .modal .modal_wrap .ul_tbl > ul > li .tr > span:nth-child(2) {width: 80px;}
section.sc06 .modal .modal_wrap .ul_tbl > ul > li .tr > span:nth-child(3) {width: 160px;}
section.sc06 .modal .modal_wrap .ul_tbl > ul > li .tr > span:nth-child(4) {width: 50px;}
section.sc06 .modal .modal_wrap .ul_tbl > ul > li .tr > span:nth-child(5) {width: 170px;}
section.sc06 .modal .modal_wrap .ul_tbl .thead li .tr {width: 100%; display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 0 60px;}
section.sc06 .modal .modal_wrap .ul_tbl .thead li .tr > span:nth-child(1) {padding-left: 84px;}
section.sc06 .modal .modal_wrap .ul_tbl .thead li .tr .th {color: #c3c3c3; font-size: 1rem; padding: 10px 0; white-space: nowrap;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody > li + li {margin-top: 10px;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr {display: flex; align-items: center; justify-content: space-between; background: url(/resources/images/layout/box_bg.png) center center no-repeat; border: 1px solid #c3c3c3; border-radius: 20px; overflow: hidden; transition: .4s; width: 100%; height: 80px; text-align: left; cursor: pointer; padding: 0 60px;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr:hover {border: 1px solid #fefefe;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr .td {font-size: 1.125rem; line-height: 1.5; font-weight: 700; color: #fff; padding: 25px 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr .td span {font-size: 1.125rem;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr .td .thum {width: 60px; height: 60px; border-radius: 100%; vertical-align: middle; margin-right: 24px; object-fit: cover; overflow: hidden; border: 1px solid #c3c3c3;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li.empty .tr:hover {border: 1px solid #fefefe;}
section.sc06 .modal .modal_wrap .ul_tbl .tbody li.empty .tr .td {text-align: center; display: block; width: 100%; padding: 60px 15px;}


section.sc07 {padding-bottom: 74px;}
section.sc07 .company_list {display: flex; flex-wrap: wrap; gap: 20px;}
section.sc07 .company_list > li {width: calc(100% / 2 - 10px);}
section.sc07 .company_list > li a {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; gap: 20px; border-radius: 15px; background: url(/resources/images/layout/box_bg.png) center center no-repeat; background-size: cover; overflow: hidden; border: 1px solid #a9a9a9; transition: ease-in-out .4s;}
section.sc07 .company_list > li a:hover {border: 1px solid #fefefe;}
section.sc07 .company_list > li a .img {width: 80px; height: 80px; position: relative; background: #fff; border-radius: 50%; overflow: hidden; border: 1px solid #c3c3c3;}
section.sc07 .company_list > li a .img img {width: 100%; height: 100%; object-fit: cover;}
section.sc07 .company_list > li a .info {width: calc(100% - 90px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 20px;}
section.sc07 .company_list > li a .info li h4 {font-size: 1.5rem; font-weight: 700; color: #fff; width: 100%;}
section.sc07 .company_list > li a .info li ul {display: flex; flex-wrap: wrap; margin-top: 8px;}
section.sc07 .company_list > li a .info li ul li {position: relative; color: #c3c3c3; font-size: 1rem;}
section.sc07 .company_list > li a .info li ul li + li {margin-left: 20px;}
section.sc07 .company_list > li a .info li ul li + li::before {content: ""; width: 1px; height: 50%; background: #c3c3c3; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}
section.sc07 .company_list > li a .info li ul li.cate {display: flex; align-items: center;}
section.sc07 .company_list > li a .info li ul li.cate span {display: inline-block; color: #c3c3c3; font-size: 1rem; position: relative;}
section.sc07 .company_list > li a .info li ul li.cate span + span {margin-left: 6px;}
section.sc07 .company_list > li a .info li ul li.cate span + span::before {content: ","; font-size: 1rem; position: absolute; left: -6px; bottom: 2px;}


@media (max-width: 1240px) {
    section.sc02 .chart_cate li {width: 100%;}


    section.sc03 .chart_total .chart_box .lf,
    section.sc03 .chart_total .chart_box .rt {width: calc(100% / 2 - 10px);}


    section.sc05 .tab_top .tab_list {width: 100%;}
    section.sc05 .tab_top .tab_list li {width: calc(100% / 5);}
    section.sc05 .tab_top .tab_list li:nth-child(1).current {background: linear-gradient(to right, #474747, #3b3b3b);}
    section.sc05 .tab_top .tab_list li:nth-child(2).current {background: linear-gradient(to right, #3b3b3b, #303030);}
    section.sc05 .tab_top .tab_list li:nth-child(3).current {background: linear-gradient(to right, #303030, #262626);}
    section.sc05 .tab_top .tab_list li:nth-child(4).current {background: linear-gradient(to right, #262626, #1a1a1a);}
    section.sc05 .tab_top .tab_list li:nth-child(5).current {background: linear-gradient(to right, #1a1a1a, #1a1a1a);}
    section.sc05 .tab_content {border-radius: 0 0 20px 20px;}
    section.sc05 .tab_content > li .grade span.num,
    section.sc05 .tab_content > li .company .thum span,
    section.sc05 .tab_content > li .cnt span.num {font-size: 1.25rem;}
    section.sc05 .tab_content > li .cnt span.ico,
    section.sc05 .tab_content > li .grade span.ico {font-size: 1rem;}


    section.sc07 .company_list > li {width: 100%;}
    section.sc07 .company_list > li a {gap: 10px; padding: 15px;}
    section.sc07 .company_list > li a .img {width: 40px; height: 40px;}
    section.sc07 .company_list > li a .info {width :calc(100% - 50px);}
    section.sc07 .company_list > li a .info li h4 {font-size: 1.25rem;}
}


@media (max-width: 768px) {
    section.sc01 .swiper-container .swiper-slide a {padding-top: calc(26.275% * 2);}


    section.sc03 .chart_total .chart_box .lf,
    section.sc03 .chart_total .chart_box .rt {width: 100%;}


    /*section.sc04 .news {padding-top: calc(21.127% * 2);}*/
    section.sc04 .news .link {right: 20px; bottom: 20px;}


    section.sc05 .tab_top .tab_list li {font-size: 1rem; height: auto; padding: 10px 5px; border-radius: 10px 10px 0 0;}
    section.sc05 .tab_content > li a {height: auto; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 15px;}
    section.sc05 .tab_content > li.empty {font-size: 1.5rem;}
    section.sc05 .tab_content > li .company .thum img {width: 40px; height: 40px;}
    section.sc05 .tab_content > li .grade {width: 100%; text-align: left; justify-content: flex-start; margin-bottom: 10px;}
    section.sc05 .tab_content > li .grade span.num {text-align: left; width: auto;}
    section.sc05 .tab_content > li .company {width: 100%;}
    section.sc05 .tab_content > li .company .thum {width: 60%;}
    section.sc05 .tab_content > li .cnt {width: 40%; justify-content: flex-end;}
    section.sc05 .tab_content > li .cnt span.num,
    section.sc05 .tab_content > li .cnt span.ico {width: auto; min-width: inherit; font-size: 1.0625rem;}
    section.sc05 .tab_content > li .grade span.ico,
    section.sc05 .tab_content > li .cnt span.ico {padding-left: 12px;}
    section.sc05 .tab_content > li .grade span.ico::before,
    section.sc05 .tab_content > li .cnt span.ico::before {width: 10px; height: 10px;}


    section.sc06 .compare .item {width: 100%; min-height: 200px;}
    section.sc06 .compare .item.deselect .txt img,
    section.sc06 .compare .item.select .thum img {width: 50px; height: 50px;}
    section.sc06 .compare .item.deselect .txt span,
    section.sc06 .compare .item.select .info h4 {font-size: 1.5rem;}
    section.sc06 .compare .item.select {padding: 20px;}
    section.sc06 .compare .item.select .del {width: 18px; height: 18px; top: 20px; right: 20px;}
    section.sc06 .modal .modal_wrap {padding: 20px; overflow-y: overlay; max-height: 95vh;}
    section.sc06 .modal .modal_wrap .ul_tbl {max-height: 400px;}
    section.sc06 .modal .modal_wrap .ul_tbl .thead li .tr {padding: 0 5px;}
    section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr {height: 55px; padding: 0 5px;}
    section.sc06 .modal .modal_wrap .ul_tbl .tbody li .tr .td .thum {width: 30px; height: 30px;}
    section.sc06 .modal .modal_wrap .search_wrap {margin: 10px auto; max-width: 100%; height: 40px;}


    section.sc07 .select_wrap {margin: 10px auto 0; width: 100%;}
    section.sc07 .select_wrap li {width: 50%;}
    section.sc07 .select_wrap li select,
    section.sc07 .select_wrap li:last-child select {width: 100%;}
}


@media (max-width: 500px) {
    section.sc04 .news .link {padding: 5px 12px; right: 10px; bottom: 10px; font-size: 1rem;}
}