@charset "UTF-8"; /*------------------------------------------------------------------- 분류그룹 : 공통 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content {display: block; padding-bottom: 60px;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:800px) { #content {padding-bottom: 45px;} } /*------------------------------------------------------------------- 분류그룹 : 공통 > 타이틀 & 텍스트 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ .bul-01 {display: block; position: relative; margin-bottom: 20px; padding-left: 30px; font-weight: 700; font-size: 1.25rem; color: #000000;} .bul-01::before {content:""; position: absolute; top: calc(0.8rem - 2.5px); left: 0; width: 25px; height: 5px; border-radius: 5px; background-color: #AD733E; background: linear-gradient(90deg, rgba(0,93,169,1) 50%, rgba(173,115,62,1) 50%, rgba(173,115,62,1) 100%);} .bul-02 {display: block; position: relative; margin-bottom: 10px; padding-left: 15px; font-weight: 600; font-size: 1.125rem; color: #494949;} .bul-02::before {content:""; position: absolute; top: calc(0.73rem - 3px); left: 0; width: 8px; height: 8px; border-radius: 50%; background-color: #AD733E;} .txt-1 {display: block; font-weight: 700; font-size: 1.25rem; color: #000000;} .txt-2 {display: block; font-weight: 700; font-size: 1.125rem; color: #141414;} .txt-6 {display: block; font-weight: 400; font-size: 1rem; color: #5C6C82;} a.t-link {display: inline-block; border-bottom: 1px solid #4659E3; font-weight: 500; font-size: 1rem; color: #4659E3;} .t-ref {display: block; margin-top: 20px; margin-bottom: 10px; font-weight: 500; font-size: 1rem; color: #AD733E; text-align: center;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 800px) { .section-title {margin-bottom: 20px;} } /*------------------------------------------------------------------- 분류그룹 : 공통 > 리스트 & 여백 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ .dpt-01 {padding-left: 20px;} .dpt-02 {padding-left: 15px;} .dpt-03 {padding-left: 10px;} .dpt-04 {padding-left: 5px;} .list-01 > li {margin-bottom: 30px;} .list-01 > li:last-child {margin-bottom: 0;} .list-02 > li {margin-bottom: 20px;} .list-02 > li:last-child {margin-bottom: 0;} .list-03 > li {margin-bottom: 15px;} .list-03 > li:last-child {margin-bottom: 0;} .list-04 > li {margin-bottom: 10px;} .list-04 > li:last-child {margin-bottom: 0;} .list-05 > li {margin-bottom: 5px;} .list-05 > li:last-child {margin-bottom: 0;} /*------------------------------------------------------------------- 분류그룹 : 공통 > 이미지 박스 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ .scr-img-box {display: block;} .scr-img-box .img-con {display: block; overflow-x: auto; overflow-y: hidden; padding: 10px; border: 1px solid #e9e9e9;} .scr-img-box .img-con::-webkit-scrollbar {width: 5px; height: 5px; box-sizing: content-box;} .scr-img-box .img-con::-webkit-scrollbar-thumb {height: 30%; border-radius: 5px; background: #AD733E;} .scr-img-box .img-con::-webkit-scrollbar-track {padding: 0 5px; border-radius: 5px; background: #e4e4e4;} .scr-img-box .img-con img {display: block; margin: 0 auto;} .scr-img-box .tit {display: block; padding: 15px; background-color: #265A83; background: linear-gradient(90deg, rgba(38,90,131,1) 0%, rgba(0,56,99,1) 100%); font-weight: 600; font-size: 1rem; color: #ffffff; text-align: center;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 800px) { .scr-img-box .img-con img {min-width: 600px;} } /*------------------------------------------------------------------- 분류그룹 : 공통 > section 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container .section-1 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid #e9e9e9;} #container .section-1 .section-title {display: block; position: relative; width: 340px; padding-left: 70px; padding-right: 10px; line-height: 60px; font-weight: 700; font-size: 1.25rem; color: #141414; flex-shrink: 0;} #container .section-1 .section-title::before {content:""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 50%; background-color: #f3f3f3; background-repeat: no-repeat; background-position: center;} #container .section-1 .section-title > span {display: inline-block; line-height: 1; vertical-align: middle;} #container .section-1 .section-con {display: block; padding-top: 20px; flex-grow: 1;} #container .section-2 {display: block; margin-bottom: 30px;} #container .section-3 {display: block; margin-bottom: 20px;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container .section-1 .section-title.type-txt::before {background-image: url(../images/sub/i_section_txt.svg);} #container .section-1 .section-title.type-time::before {background-image: url(../images/sub/i_section_time.svg);} #container .section-1 .section-title.type-system::before {background-image: url(../images/sub/i_section_system.svg);} #container .section-1 .section-title.type-disease::before {background-image: url(../images/sub/i_section_disease.svg);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1600px){ #container .section-1 .section-title {width: 250px; padding-left: 60px; line-height: 50px;} #container .section-1 .section-title::before {width: 50px; height: 50px;} } @media screen and (max-width: 1200px){ #container .section-1 {display: block;} #container .section-1 .section-title {width: 100%; margin-bottom: 20px; padding-right: 0;} #container .section-1 .section-con {padding-top: 0;} } @media screen and (max-width: 800px){ #container .section-1 {padding-bottom: 20px; margin-bottom: 35px;} #container .section-2 {margin-bottom: 20px;} #container .section-3 {margin-bottom: 10px;} } @media screen and (max-width: 600px){ #container .section-1 .section-title {padding-left: 40px; line-height: 36px;} #container .section-1 .section-title::before {width: 36px; height: 36px; background-size: 20px;} } /*------------------------------------------------------------------- 분류그룹 : snb 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #spot .snb {width:100%; border-bottom:1px solid #e9e9e9; background-color:#F8F8F8;} #spot .snb .snb-menu {display:flex; width:100%; max-width: 1600px; margin:0 auto;} #spot .snb .snb-menu > li {position:relative;height:60px;} #spot .snb .snb-menu > li::before {content:''; position:absolute; top:50%; right:0; width:1px; height:20px; background-color:#CDCDCD; transform: translateY(-50%);} #spot .snb .snb-menu > li:last-child::before {display: none;} #spot .snb .snb-menu > li.type-a {max-width:calc((100% - 80px)/ 4); flex-grow: 1;} #spot .snb .snb-menu > li.home {} #spot .snb .snb-menu > li.home .icon {display:block; position:relative; width:80px; height:100%; } #spot .snb .snb-menu > li.home .icon > .i-home {position:absolute; top:calc(50% - 12px); left:calc(50% - 12px); width:24px; height:24px; background-image: url(../images/layout/i_home.svg); background-repeat: no-repeat; background-position: center;} #spot .snb .snb-menu > li.type-a .menu-tit {display: block; position:relative; height:100%; padding:0 30px 0 20px; font-weight:600; font-size:0.9375rem; line-height: 60px;} #spot .snb .snb-menu > li.type-a .menu-tit::after {content:''; position:absolute; top:calc(50% - 3px); right:20px; width:6px; height:6px; border-right:2px solid #000000; border-bottom:2px solid #000000; transform:rotate(45deg) translateY(-50%);} #spot .snb .snb-menu > li.type-a .menu-tit > span {display: inline-block; line-height: 1; vertical-align:middle; word-break: break-word;} #spot .snb .snb-menu > li.type-a >.menu-02 {display: none; position:absolute; top:100%; left:0; z-index: 10; width:100%; border:1px solid #e9e9e9;} #spot .snb .snb-menu > li.type-a >.menu-02 li {border-bottom:1px solid #e9e9e9; background-color:#ffffff;} #spot .snb .snb-menu > li.type-a >.menu-02 li:last-child {border-bottom:0;} #spot .snb .snb-menu > li.type-a >.menu-02 li > a {display: block; padding:15px 20px; font-weight:600; color:#666666;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #spot .snb .snb-menu > li.home .icon > .i-home {transition:background 0.3s;} #spot .snb .snb-menu > li.home .icon > .i-home:focus, #spot .snb .snb-menu > li.home .icon > .i-home:hover {background-image:url(../images/layout/i_home_on.svg);} #spot .snb .snb-menu > li.type-a >.menu-02 li > a {transition:background 0.3s, color 0.3s;} #spot .snb .snb-menu > li.type-a >.menu-02 li > a:focus, #spot .snb .snb-menu > li.type-a >.menu-02 li > a:hover {background-color:#AD733E; color:#ffffff;} #spot .snb .snb-menu > li.type-a .menu-tit {transition:color 0.3s;} #spot .snb .snb-menu > li.type-a .menu-tit:focus, #spot .snb .snb-menu > li.type-a .menu-tit:hover {color:#AD733E;} #spot .snb .snb-menu > li.type-a .menu-tit::after {transition:transform 0.1s;} #spot .snb .snb-menu > li.type-a .menu-tit.active::after {transform: rotate(-135deg);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:1200px) { #spot .snb .snb-menu {display: none;} } /*------------------------------------------------------------------- 분류그룹 : snb > 모바일 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #spot .snb .nav-wrap {display: none;} #spot .snb .nav-wrap .nav-list {display:flex; padding:12px 20px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} #spot .snb .nav-wrap .nav-list > li {position:relative; padding-right:16px;} #spot .snb .nav-wrap .nav-list > li::before {content:''; position:absolute; top:calc(50% - 2px); right:6px; width:4px; height:4px; border-right:1px solid #000000; border-bottom:1px solid #000000; transform: rotate(-45deg);} #spot .snb .nav-wrap .nav-list > li:last-child::before {display: none;} #spot .snb .nav-wrap .nav-list > li > .menu {display: block; font-weight:600; font-size:0.875rem; color:#000000;} #spot .snb .nav-wrap .nav-list > li > .menu.home {width:14px; height:14px; background-image: url(../images/layout/i_home.svg); background-repeat: no-repeat; background-position: center; background-size:cover;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #spot .snb .nav-wrap .nav-list > li > .menu {transition:color 0.3s;} #spot .snb .nav-wrap .nav-list > li > .menu:focus, #spot .snb .nav-wrap .nav-list > li > .menu:hover {color:#8a5c32;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:1200px) { #spot .snb .nav-wrap {display: block;} } @media screen and (max-width:800px) { #spot .snb .nav-wrap .nav-list {padding: 12px 15px;} } /*------------------------------------------------------------------- 분류그룹 : 서브페이지 공통 > 서브타이틀 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .sub-con {max-width: 1793px; margin: 50px auto 0;} #content .sub-con .sub-tit {display: block; margin-bottom:50px; font-weight:700; font-size:1.875rem; color:#000000; text-align: center;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width:800px) { #content .sub-con {margin-top:30px;} } @media screen and (max-width:600px) { #content .sub-con .sub-tit {margin-bottom:30px; font-size:1.625rem;} } @media screen and (max-width:425px) { #content .sub-con {margin-top:20px;} } /*------------------------------------------------------------------- 분류그룹 : 서비스 소개 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .main-intro-page {display: block;} #content .main-intro-page .intro-visual {display: block; height: 350px; margin-bottom: 50px; background: url(../images/sub/img_intro_visual.png) no-repeat center / cover;} #content .main-intro-page .reason-box {display: block; padding: 20px; background-color: #F8F8F8;} #content .main-intro-page .reason-box .tit {display: block; margin-bottom: 15px;} #content .main-intro-page .reason-box .con-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -10px;} #content .main-intro-page .reason-box .con-box .dot-list {max-width: 50%; padding: 0 10px;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1200px) { #content .main-intro-page .intro-visual {height: 300px;} #content .main-intro-page .reason-box .con-box .dot-list {padding-right: 30px;} } @media screen and (max-width: 800px) { #content .main-intro-page .intro-visual {height: 250px; margin-bottom: 30px;} #content .main-intro-page .reason-box .con-box {display: block;} #content .main-intro-page .reason-box .con-box .dot-list {max-width: none; margin-bottom: 5px; padding-right: 0;} } @media screen and (max-width: 600px) { #content .main-intro-page .intro-visual {height: 200px;} } /*------------------------------------------------------------------- 분류그룹 : 서비스 소개 > 발생 주기 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .main-intro-page .cycle-box {display: block; margin-bottom: 30px;} #content .main-intro-page .cycle-box .img-box {display: block; text-align: center;} #content .main-intro-page .cycle-box .mobile-box {display: none;} #content .main-intro-page .cycle-box .mobile-box .list {display: block;} #content .main-intro-page .cycle-box .mobile-box .list > li {display: block; overflow: hidden; position: relative; padding-bottom: 60px;} #content .main-intro-page .cycle-box .mobile-box .list > li:last-child {padding-bottom: 0;} #content .main-intro-page .cycle-box .mobile-box .list > li::before {content:""; position: absolute; top: 0; left: 55px; height: 100%; border-right: 1px dashed #e9e9e9;} #content .main-intro-page .cycle-box .mobile-box .list > li:first-child::before {top: 20px;} #content .main-intro-page .cycle-box .mobile-box .list > li .case {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #content .main-intro-page .cycle-box .mobile-box .list > li .case .year {display: block; position: relative; margin-right: 20px; width: 45px; font-weight: 600; font-size: 1rem; color: #141414; flex-shrink: 0;} #content .main-intro-page .cycle-box .mobile-box .list > li .case .year::before {content:""; position: absolute; top: calc(50% - 5px); left: 50px; width: 10px; height: 10px; border-radius: 50%; background-color: #AD733E;} #content .main-intro-page .cycle-box .mobile-box .list > li .tit {display: block; padding: 0 15px; border-radius: 5px; line-height: 40px; background-color: #265A83; background: linear-gradient(90deg, rgba(38,90,131,1) 0%, rgba(0,56,99,1) 100%); flex-grow: 1;} #content .main-intro-page .cycle-box .mobile-box .list > li .tit > span {display: inline-block; line-height: 1; font-weight: 600; font-size: 1rem; color: #F2E1CC; vertical-align: middle;} #content .main-intro-page .cycle-box .mobile-box .list > li .range {position: absolute; left: 65px; bottom: 15px; padding: 0 20px; border-radius: 5px; background-color: #141414; line-height: 30px; font-weight: 600; font-size: 1rem; color: #fff;} #content .main-intro-page .cycle-box .mobile-box .list > li .range::before {content:""; position: absolute; top: 15px; left: -10px; width: 10px; height: 1px; background-color: #e9e9e9;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 800px) { #content .main-intro-page .cycle-box .img-box {display: none;} #content .main-intro-page .cycle-box .mobile-box {display: block;} } /*------------------------------------------------------------------- 분류그룹 : 서비스 소개 > 질병재난 시스템 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .main-intro-page .system-diagram {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 30px;} #content .main-intro-page .system-diagram .column {display: block; position: relative;} #content .main-intro-page .system-diagram .column .col-title {display: block; height: 80px; padding: 5px; line-height: 70px; background-color: #265A83; background: linear-gradient(90deg, rgba(38,90,131,1) 0%, rgba(0,56,99,1) 100%); font-weight: 600; font-size: 1.125rem; color: #ffffff; text-align: center;} #content .main-intro-page .system-diagram .column .col-title > span {display: inline-block; line-height: 1; vertical-align: middle;} #content .main-intro-page .system-diagram .column .col-con {height: calc(100% - 80px); padding: 20px; border-width: 0 1px 1px; border-style: solid; border-color: #e9e9e9;} #content .main-intro-page .system-diagram .column.type-main {padding: 0 50px; flex-grow: 1;} #content .main-intro-page .system-diagram .column.type-side {width: 165px;} #content .main-intro-page .system-diagram .column.type-side .col-con {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #content .main-intro-page .system-diagram .column.type-a::before {content:""; position: absolute; top: calc(50% - 10px); right: -35px; width: 20px; height: 20px; background: url(../images/sub/i_intro_arr_next.svg) no-repeat center;} #content .main-intro-page .system-diagram .column.type-b::before {content:""; position: absolute; top: calc(50% - 10px); left: -35px; width: 20px; height: 20px; background: url(../images/sub/i_intro_arr_prev.svg) no-repeat center;} /* 사이트 목록 */ #content .main-intro-page .system-diagram .column .col-con .site-list {display: block; width: 100%; text-align: center;} #content .main-intro-page .system-diagram .column .col-con .site-list > li {display: block; margin-bottom: 20px;} #content .main-intro-page .system-diagram .column .col-con .site-list > li:last-child {margin-bottom: 0;} #content .main-intro-page .system-diagram .column .col-con .site-list > li .tit {display: block; padding-top: 30px; background: url(../images/sub/i_intro_site.svg) no-repeat center top; font-weight: 600; font-size: 1rem; color: #141414;} /* 연구원 목록 */ #content .main-intro-page .system-diagram .column .col-con .manager-list {display: block; width: 100%; text-align: center;} #content .main-intro-page .system-diagram .column .col-con .manager-list > li {display: block; margin-bottom: 20px;} #content .main-intro-page .system-diagram .column .col-con .manager-list > li:last-child {margin-bottom: 0;} #content .main-intro-page .system-diagram .column .col-con .manager-list > li .tit {display: block; padding-top: 30px; background: url(../images/sub/i_intro_human.svg) no-repeat center top; font-weight: 600; font-size: 1rem; color: #141414;} /* 시스템 목록 */ #content .main-intro-page .system-diagram .column .col-con .info-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -5px;} #content .main-intro-page .system-diagram .column .col-con .info-list > li {display: block; width: 25%; padding: 0 5px;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item {display: block; height: 100%; text-align: center;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .tit {display: block; height: 30px; line-height: 30px; font-weight: 600; font-size: 1.125rem; color: #141414;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list {display: block; height: calc(100% - 30px); padding: 10px; border: 1px solid #e9e9e9;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list > li {display: block; min-height: 40px; margin-bottom: 10px; padding: 4px 5px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: #F8F8F8; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); line-height: 30px; font-weight: 400; font-size: 1rem; color: #5C6C82; word-break: break-all;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list > li:last-child {margin-bottom: 0;} #content .main-intro-page .system-diagram .column .col-con .info-list > li.type-a {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;} #content .main-intro-page .system-diagram .column .col-con .info-list > li.type-a .item {height: auto;} #content .main-intro-page .system-diagram .column .col-con .info-list > li.type-a .item .list {height: auto;} /* 저장소 */ #content .main-intro-page .system-diagram .column .col-con .archive-con {display: block; margin-top: 50px;} #content .main-intro-page .system-diagram .column .col-con .archive-con .title {display: block; height: 50px; padding: 0 10px; background-color: #AD733E; line-height: 50px; font-weight: 600; font-size: 1.125rem; color: #ffffff; text-align: center;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 20px; border-width: 0 1px 1px; border-style: solid; border-color: #e9e9e9; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item {display: block; position: relative; min-height: 40px; margin: 0 20px; padding: 4px 20px 4px 40px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: #F8F8F8; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); line-height: 30px; font-weight: 600; font-size: 1rem; color: #5C6C82;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item::before {content:""; position: absolute; top: 0; left: 10px; width: 20px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 20px;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item.type-data::before {background-image: url(../images/sub/i_intro_data.svg);} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item.type-db::before {background-image: url(../images/sub/i_intro_db.svg);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1600px) { #content .main-intro-page .system-diagram .column .col-con {padding: 10px;} #content .main-intro-page .system-diagram .column.type-main {padding: 0 30px;} #content .main-intro-page .system-diagram .column.type-side {width: 130px;} #content .main-intro-page .system-diagram .column.type-a::before {right: -25px;} #content .main-intro-page .system-diagram .column.type-b::before {left: -25px;} } @media screen and (max-width: 1024px) { #content .main-intro-page .system-diagram {margin: 0 -5px 30px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} #content .main-intro-page .system-diagram .column.type-main {width: 100%; padding: 0 5px; order: 3;} #content .main-intro-page .system-diagram .column.type-side {margin-bottom: 30px;} /* #content .main-intro-page .system-diagram .column.type-side .col-con {display: block;} */ #content .main-intro-page .system-diagram .column.type-a {width: 50%; padding: 0 5px; order: 1;} #content .main-intro-page .system-diagram .column.type-a::before {top: auto; bottom: -25px; left: calc(50% - 10px); right: auto; background-image: url(../images/sub/i_intro_arr_down.svg);} #content .main-intro-page .system-diagram .column.type-b {width: 50%; padding: 0 5px; order: 2;} #content .main-intro-page .system-diagram .column.type-b::before {top: auto; bottom: -25px; left: calc(50% - 10px); background-image: url(../images/sub/i_intro_arr_down.svg);} #content .main-intro-page .system-diagram .column .col-title {height: 60px; line-height: 50px; font-size: 16px;} #content .main-intro-page .system-diagram .column .col-title br {display: none;} #content .main-intro-page .system-diagram .column .col-con {height: calc(100% - 60px);} #content .main-intro-page .system-diagram .column .col-con .site-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} #content .main-intro-page .system-diagram .column .col-con .site-list > li {padding: 0 5px; margin: 5px 0; flex-grow: 1;} #content .main-intro-page .system-diagram .column .col-con .archive-con {margin-top: 30px;} #content .main-intro-page .system-diagram .column .col-con .archive-con .title {height: 40px; line-height: 40px;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box {padding: 10px;} } @media screen and (max-width: 800px) { #content .main-intro-page .system-diagram .column .col-con .info-list {display: block;} #content .main-intro-page .system-diagram .column .col-con .info-list > li {width: 100%; margin-bottom: 10px;} #content .main-intro-page .system-diagram .column .col-con .info-list > li:last-child {margin-bottom: 0;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 5px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list > li {width: calc(33.333% - 10px); margin: 5px;} #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list > li:last-child {margin: 5px;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item {width: calc(50% - 10px); margin: 0 5px;} } @media screen and (max-width: 425px) { #content .main-intro-page .system-diagram .column .col-con .info-list > li .item .list > li {width: calc(50% - 10px);} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box {display: block;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item {width: 100%; margin: 0 0 10px;} #content .main-intro-page .system-diagram .column .col-con .archive-con .con-box .item:last-child {margin-bottom: 0;} } /*------------------------------------------------------------------- 분류그룹 : 주요 컨텐츠 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .con-intro-page {display: block; padding-top: 50px; border-top: 2px solid #141414;} #content .con-intro-page .disease-range {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;} #content .con-intro-page .disease-range .t-range {display: block; position: relative; padding-right: 20px; padding-left: 25px; line-height: 20px; font-weight: 600; font-size: 1.125rem; color: #141414; background: url(../images/common/i_date_bk.svg) no-repeat left center / 17px;} #content .con-intro-page .disease-range .t-range::before {content:""; position: absolute; top: 0; right: 9px; width: 2px; height: 100%; background-color: #d3d3d3; transform: rotate(15deg);} #content .con-intro-page .disease-range .t-range:last-child {padding-right: 0;} #content .con-intro-page .disease-range .t-range:last-child::before {display: none;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 600px) { #content .con-intro-page .section-1 .section-title > span br {display: none;} } /*------------------------------------------------------------------- 분류그룹 : 주요 컨텐츠 > 수집 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .con-intro-page .collect-info {display: block; margin-top: 30px;} #content .con-intro-page .collect-info .list {display: block;} #content .con-intro-page .collect-info .list > li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #content .con-intro-page .collect-info .list > li .tit {display: block; width: 80px; padding-right: 10px; flex-shrink: 0;} #content .con-intro-page .collect-info .list > li .con-box {display: block; font-weight: 600; font-size: 1rem; color: #141414; flex-grow: 1;} #content .con-intro-page .collect-info .list > li .con-box .txt {display: block; font-weight: 400; font-size: 1rem; color: #5C6C82;} #content .con-intro-page .collect-info .list > li .con-box .count-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -5px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} #content .con-intro-page .collect-info .list > li .con-box .count-list > li {display: block; padding: 5px;} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count {display: block; position: relative; padding-left: 35px; line-height: 30px; font-weight: 400; font-size: 1rem; color: #5C6C82;} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count::before {content:""; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 4px; background-color: #333333; background-repeat: no-repeat; background-position: center;} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count {transition: background 0.4s, color 0.4s;} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count.type-a::before {background-color: #4D72BE; background-image: url(../images/common/i_curation_01.svg);} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count.type-b::before {background-color: #AD733E; background-image: url(../images/common/i_curation_02.svg);} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count.type-c::before {background-color: #50ACAC; background-image: url(../images/common/i_curation_03.svg);} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count.type-d::before {background-color: #754FA6; background-image: url(../images/common/i_curation_04.svg);} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count.type-e::before {background-color: #E4032E; background-image: url(../images/common/i_curation_05.svg);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 600px) { #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count {padding-left: 30px; line-height: 24px; font-size: 12px;} #content .con-intro-page .collect-info .list > li .con-box .count-list > li .count::before {width: 24px; height: 24px;} #content .con-intro-page .collect-info .list > li {display: block;} #content .con-intro-page .collect-info .list > li .tit {width: auto; margin-bottom: 5px; padding-right: 0;} } /*------------------------------------------------------------------- 분류그룹 : 주요 컨텐츠 > 대응 단계 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #content .con-intro-page .react-step {display: block;} #content .con-intro-page .react-step .list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -25px;} #content .con-intro-page .react-step .list > li {display: block; position: relative; width: 33.333%; padding: 0 25px;} #content .con-intro-page .react-step .list > li::before {content:""; position: absolute; top: calc(50% - 10px); right: -10px; width: 20px; height: 20px; background: url(../images/sub/i_intro_arr_next.svg) no-repeat center;} #content .con-intro-page .react-step .list > li:last-child::before {display: none;} #content .con-intro-page .react-step .list > li .item {display: block; height: 100%;} #content .con-intro-page .react-step .list > li .item .tit-box {display: block; height: 60px; padding: 0 20px; background-color: #265A83; background: linear-gradient(90deg, rgba(38,90,131,1) 0%, rgba(0,56,99,1) 100%); line-height: 60px; text-align: center;} #content .con-intro-page .react-step .list > li .item .tit-box .tit {display: inline-block; line-height: 1; font-weight: 600; font-size: 1.125rem; color: #F2E1CC; vertical-align: middle;} #content .con-intro-page .react-step .list > li .item .con-box {display: block; height: calc(100% - 60px); padding: 20px; border-width: 0 1px 1px; border-style: solid; border-color: #e9e9e9;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1200px) { #content .con-intro-page .react-step .list {margin: 0 -15px;} #content .con-intro-page .react-step .list > li {padding: 0 15px;} #content .con-intro-page .react-step .list > li .item .tit-box {padding: 0 15px;} #content .con-intro-page .react-step .list > li .item .tit-box .tit {font-size: 1rem;} #content .con-intro-page .react-step .list > li .item .con-box {padding: 15px;} } @media screen and (max-width: 800px) { #content .con-intro-page .react-step .list {display: block; margin: 0;} #content .con-intro-page .react-step .list > li {width: 100%; padding: 0 0 30px;} #content .con-intro-page .react-step .list > li::before {top: auto; right: calc(50% - 10px); bottom: 5px; background-image: url(../images/sub/i_intro_arr_down.svg);} #content .con-intro-page .react-step .list > li:last-child {padding: 0;} } /*------------------------------------------------------------------- 분류그룹 : section-05 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ .sub-banner-box {display: block; padding: 20px; background-color: #F8F8F8;} .sub-banner-box .banner-wrap {display: block; overflow: hidden; position: relative; padding: 0 50px;} .sub-banner-box .banner-wrap .nav-box {display: block;} .sub-banner-box .banner-wrap .nav-box .btn-nav {position: absolute; top: 0; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 4px; background-color: transparent; background-repeat: no-repeat; background-position: center;} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-prev {left: 0;} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-prev::before {content:""; position: absolute; top: calc(50% - 6px); left: calc(50% - 4px); width: 9px; height: 9px; border-width: 0 0 3px 3px; border-style: solid; border-color: #000000; transform: rotate(45deg);} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-next {right: 0;} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-next::before {content:""; position: absolute; top: calc(50% - 6px); right: calc(50% - 4px); width: 9px; height: 9px; border-width: 3px 3px 0 0; border-style: solid; border-color: #000000; transform: rotate(45deg);} .sub-banner-box .banner-wrap .sub-banner-slide {display: block; overflow: hidden;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide {display: block; min-width: 16.666%; max-width: 100%; width: auto;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide .item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 40px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide .item > img {display: block; width: auto; max-height: 40px; margin: 0 auto;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ .sub-banner-box .banner-wrap .nav-box .btn-nav {transition: border 0.4s, background 0.4s;} .sub-banner-box .banner-wrap .nav-box .btn-nav:focus, .sub-banner-box .banner-wrap .nav-box .btn-nav:hover {border-color: #e9e9e9; background-color: #ffffff;} .sub-banner-box .banner-wrap .nav-box .btn-nav::before {transition: border 0.4s;} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-prev:focus::before, .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-prev:hover::before, .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-next:focus::before, .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-next:hover::before {border-color: #AD733E;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide .item:focus-visible {position: relative; outline-color: transparent;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide .item:focus-visible::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #000000; box-sizing: border-box;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 600px) { .sub-banner-box {padding: 15px;} .sub-banner-box .banner-wrap {padding: 0 45px;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide {width: 100%; min-width: 0;} } @media screen and (max-width: 425px) { .sub-banner-box {padding: 10px 5px;} .sub-banner-box .banner-wrap {padding: 0 35px;} .sub-banner-box .banner-wrap .nav-box .btn-nav {top: 2.5px; width: 25px; height: 25px;} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-prev::before {top: calc(50% - 4px); left: calc(50% - 3px); width: 6px; height: 6px; border-width: 0 0 2px 2px;} .sub-banner-box .banner-wrap .nav-box .btn-nav.btn-next::before {top: calc(50% - 4px); right: calc(50% - 3px); width: 6px; height: 6px; border-width: 2px 2px 0 0;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide .item {height: 30px;} .sub-banner-box .banner-wrap .sub-banner-slide .swiper-wrapper .swiper-slide .item > img {max-height: 30px;} }