/* common */
header .headerBox .logo{ filter: brightness(0) invert(1); transition:all 0.1s; }
header .headerBox.active .logo,
header .headerBox:hover .logo{ filter:none; }

#sv .subVisual{ position: relative; height: 600px; z-index: 5; }
#sv .subVisual .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#sv .subVisual > div{ display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
#sv .subVisual > div .title{ color:#fff; font-family: var(--out); font-weight: bold; margin-bottom: 15px; }
#sv .subVisual #lnb{ display:flex; align-items:center; margin-bottom: 70px; }
#sv .subVisual #lnb a{ display:flex; justify-content:center; align-items:center; }
#sv .subVisual #lnb li{ color:#fff; font-family:var(--out); display:flex; align-items:center; }
#sv .subVisual #lnb li:not(:last-child):after{ content:''; display:block; width: 20px; height: 20px; background: url(/img/sub/lnbArrow.png) no-repeat 50% 50%; margin: 0 10px;}
#sv .subVisual #lnb li.path2{ font-family: var(--pre);}
#sv .subVisual #lnb li span{ text-transform: lowercase; }
#sv .subVisual #lnb li span::first-letter{text-transform: uppercase;}
#sv .subVisual .gnbBox ul{ display:flex; border-radius:10px 10px 0 0; overflow: hidden; }
#sv .subVisual .gnbBox ul li{ width: 100%; height: 75px; flex-grow: 1;}
#sv .subVisual .gnbBox ul li a{ display:flex; justify-content:center; align-items:center; width: 100%; height: 100%; font-family: var(--out); color:rgba(255,255,255,0.5); font-weight: 500; font-size:22px; 
background: rgba(255, 255, 255, 0.01); backdrop-filter: blur(17px); letter-spacing: -0.44px;}
#sv .subVisual .gnbBox ul li.on a{ background: rgba(1, 65, 144, 0.50); backdrop-filter: blur(0px); color:#fff; }

#sv .subVisual .gnb3 ul li a,
#sv .subVisual .gnb5 ul li a,
#sv.sv05 #lnb li,
#sv.sv05 .subVisual > div .title,
#sv.sv06 #lnb li,
#sv.sv06 .subVisual > div .title,
#sv.sv07 #lnb li,
#sv.sv07 .subVisual > div .title{ font-family: var(--baseF);}

#sv.sv06 .subVisual #lnb{ margin-bottom: 145px;}
#sv.sv06 .subVisual #lnb li:not(:first-child):after,
#sv.sv07 .subVisual #lnb li:not(:first-child):after{ display:none; }

#sv.sv01 .subVisual .bg{ background: url("/img/sub/subVisual01.png") no-repeat 50% 50%; background-size:cover;  }
#sv.sv02 .subVisual .bg{ background: url("/img/sub/subVisual02.png") no-repeat 50% 50%; background-size:cover;  }
#sv.sv03 .subVisual .bg{ background: url("/img/sub/subVisual03.png") no-repeat 50% 50%; background-size:cover;  }
#sv.sv04 .subVisual .bg{ background: url("/img/sub/subVisual04.png") no-repeat 50% 50%; background-size:cover;  }
#sv.sv05 .subVisual .bg{ background: url("/img/sub/subVisual05.png") no-repeat 50% 50%; background-size:cover;  }
#sv.sv06 .subVisual .bg{ background: url("/img/sub/subVisual06.png") no-repeat 50% 50%; background-size:cover;  }
#sv.sv07 .subVisual .bg{ background: url("/img/sub/subVisual07.png") no-repeat 50% 50%; background-size:cover;  }

#subContents{ padding: 160px 0 180px;}
#subContents > h1.title{ text-align: center; color:#111; font-weight: 600; font-family: var(--out); letter-spacing: -1.4px; margin-bottom: 60px; letter-spacing: -1.4px;}
#subContents > h1.title3,
#subContents > h1.title5,
#subContents > h1.title6,
#subContents > h1.title7{ font-family: var(--baseF);}

#tabBox{ display:flex; justify-content:center; margin-bottom: 70px;}
#tabBox li{ position: relative; width: 220px; height: 70px; border-radius:50px; overflow: hidden; background: #F7F7F7;}
#tabBox li:before{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%);
 opacity: 0; transition:all 0.5s; }
#tabBox li:not(:last-child){ margin-right: 10px;}
#tabBox li a{ position: relative; z-index: 2; display:flex; justify-content:center; align-items:center; width: 100%; height: 100%; color:#aaa; font-weight: 500; transition:all 0.5s; }
#tabBox li.on a,
#tabBox li:hover a{ color:#fff; }
#tabBox li.on:before,
#tabBox li:hover:before{ opacity: 1;}

#sTitle{ text-align: center; color:#111; font-weight: bold; margin-bottom: 60px;}
#sTitle span{ position: relative; display:inline-block; letter-spacing: -0.8px;}
#sTitle span:after{ content:''; display:block; width: 10px; height: 10px; border-radius:50%; background: linear-gradient(267deg, #3E76BB 11.71%, #1DA7D2 88.29%); 
position: absolute; top: 0; left: 100%;}

#sTxt{ margin-top: -40px; text-align: center; color:#777; margin-bottom: 90px; letter-spacing: -0.2px;}

#btnBox{ display:flex; justify-content:center; align-items:center; }
#btnBox button{ width: 190px; height: 70px; border-radius:10px; background: var(--mainC); display:flex; justify-content:center; align-items:center; color:#fff; font-weight: 500;}
#btnBox button.white{ background: #fff; box-shadow:0 0 0 1px var(--mainC); color:var(--mainC); margin-right: 10px;}
#btnBox button img{ margin-left: 15px;}

.board .content .selectBox{ display:flex; margin-bottom: 40px; background: #f5f5f5; padding: 15px; border-radius: 15px; }
.board .content .selectBox .Box{ position: relative; width: 100%; margin-right: 15px;}
.board .content .selectBox .Box:after{ content:''; display:block; position: absolute; transform:translateY(-50%); top: 50%; right: 20px; width: 11px; height: 7px; background: url(/img/sub/selectIcon.png) no-repeat 50% 50%; background-size:cover; }
.board .content .selectBox .Box select,
.board .content .selectBox input{ height: 70px;}
.board .content .selectBox .Box select{ position: relative; width: 100%;  border:none; background: #fff; padding: 0 20px; color:#222; border-radius:10px; }
.board .content .selectBox .inputBox{ width: 390px; flex-shrink:0; background: #fff; border-radius:10px;  overflow: hidden; padding: 0 20px; display:flex; align-items:center; justify-content:space-between; }
.board .content .selectBox .inputBox input{ color:#222; outline:none; border: none;}
.board .content .selectBox .inputBox input::placeholder{ color:#aaa; }

#genoSeminar section:not(:first-child){ padding-top: 180px;}
#genoSeminar .intro{ position: relative; padding: 120px 0;}
#genoSeminar .intro .bg{ position:absolute; top: 0; left: 0; width: 100%; }
#genoSeminar .intro p{ position: relative; z-index: 5; text-align: center; }
#genoSeminar .intro p.title{ color:#fff; font-weight: bold;margin-bottom: 60px;}
#genoSeminar .intro p.txt{ line-height: 1.8; color:#fff; font-weight: 300; }
#genoSeminar .intro p.txt span{ font-weight: 500;}
#genoSeminar .content .ctnBox{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 35px; }
#genoSeminar .content .ctnBox .itemBox{ width: calc((100% - 70px) / 3);}
#genoSeminar .content .ctnBox .itemBox figure{ width: 100%; height: 400px;  border-radius: 15px; margin-bottom: 30px; }
#genoSeminar .content .ctnBox .itemBox .title{ color:#222; font-weight: bold;}
#genoSeminar .content .ctnBox .itemBox .txt{ color:var(--mainC); margin: 15px 0 30px;}
#genoSeminar .content .ctnBox .itemBox .day{ color:#aaa; font-weight: 500; }
#genoSeminar .apply dl{ display:flex; height: 85px; }
#genoSeminar .apply dl:not(:last-child){ margin-bottom: 20px;}
#genoSeminar .apply dl > *{ display:flex; align-items:center; }
#genoSeminar .apply dl dt{ width: 280px; height: 100%; border-radius:15px; background: #F7F7F7; color:#222; text-align: center; font-weight: 600; justify-content:center;
flex-shrink:0; margin-right: 30px;}
#genoSeminar .apply dl dd{ width: 100%; border-bottom:1px solid #ddd; padding:15px; }
#genoSeminar .apply dl dd input{ border:none; height: 100%; width: 100%; color:#444; font-weight: 400;}
#genoSeminar .apply dl dd .inputDate{ position: relative; display:flex; height: 100%; width: 200px; background: #f7f7f7; border-radius:5px; overflow: hidden; }
#genoSeminar .apply dl dd .inputDate img{ position:absolute; transform:translateY(-50%); top: 50%; right: 20px; pointer-events:none; }
#genoSeminar .apply dl dd .inputDate input{ background: #f7f7f7; padding: 0 20px; color:#aaa; }
#genoSeminar .apply dl dd .inputDate input::placeholder{ color:#aaa; }
#genoSeminar .apply .txt{ margin: 30px 0 60px; color:#777; }
#genoSeminar .apply .txt span{ color:#D41616; }

.completed .ctnBox{ padding: 120px 20px 130px; border-radius: 15px; background: rgba(1, 65, 144, 0.04); text-align: center; }
.completed .ctnBox .txtBox{ margin: 90px 0 60px;}
.completed .ctnBox .txtBox .title{ color:#222; font-weight: bold; margin-bottom: 30px; }
.completed .ctnBox .txtBox .txt{ line-height: 1.8; color:#222; }

#suggest .board_box table td a{ flex-direction:column; align-items: flex-start;}

.imgBoard .ctnBox{ display:flex; flex-wrap:wrap; gap:70px 50px; }
.imgBoard .ctnBox .itemBox{ position: relative; width: calc((100% - 100px) / 3);}
.imgBoard .ctnBox .itemBox .imgBox{ position: relative; width: 100%; height: 350px; margin-bottom: 30px;}
.imgBoard .ctnBox .itemBox .imgBox .bg{ width: 100%; height: 100%;  border-radius:	10px; }
.imgBoard .ctnBox .itemBox .imgBox .logoBox{ position: absolute; bottom: 20px; left: 20px; display:flex; }
.imgBoard .ctnBox .itemBox .imgBox .logoBox .logo{ width: 70px; height: 70px; border-radius:	10px; }
.imgBoard .ctnBox .itemBox .imgBox .logoBox .logo:not(:last-child){ margin-right: 10px;}
.imgBoard .ctnBox .itemBox .txtBox .title{ text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; 
margin-bottom: 15px; color:#222; line-height: 1.6; font-weight: 500;}
.imgBoard .ctnBox .itemBox .txtBox .title span{ color:var(--mainC); }
.imgBoard .ctnBox .itemBox .txtBox .txt{ font-weight: 500; color:#aaa;}

#activity .ctnBox .itemBox .txtBox .title{ font-weight: 600;}

#contact .ctnBox{ border-top: 1px solid var(--mainC); margin-bottom: 100px;}
#contact .ctnBox dl{ display:flex; border-bottom:1px solid #ddd; }
#contact .ctnBox dl dt{ width: 300px; flex-shrink:0; display:flex; align-items:center; justify-content: center; align-items:center; color:#222;  font-weight: 600; background: #F5F8FB;}
#contact .ctnBox dl dd{ width: 100%; min-height: 100px; padding: 15px 25px; }
#contact .ctnBox dl dd .inputBox{ height: 100%; display:flex; align-items:center; }
#contact .ctnBox dl dd .inputBox input{ display:none; }
#contact .ctnBox dl dd .inputBox label:not(:last-of-type){ margin-right: 30px;}
#contact .ctnBox dl dd .inputBox label p{ display:flex; align-items:center; color:#666; cursor:pointer; }
#contact .ctnBox dl dd .inputBox label span{ position: relative; display:block; width: 20px; height: 20px; border-radius:50px; border:2px solid #DBDBDB; margin-right: 7px; transition:all 0.5s; }
#contact .ctnBox dl dd .inputBox label span:after{ content:''; display:block; width: 10px; height: 10px; background: #0071D9; border-radius:50%; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; transition:all 0.5s; opacity: 0;}
#contact .ctnBox dl dd .inputBox input[type="radio"]:checked + label p span{ border:2px solid rgba(0,113,217,0.2);}
#contact .ctnBox dl dd .inputBox input[type="radio"]:checked + label span:after{ opacity: 1;}
#contact .ctnBox dl dd > input,
#contact .ctnBox dl dd textarea{ border:1px solid #DFDFDF; border-radius:10px; width: 100%; height: 100%; padding: 0 20px;}
#contact .ctnBox dl dd textarea { resize:none; height: 350px; padding: 20px;}

#mypage .ctnBox{ border-top:1px solid var(--mainC); margin-bottom: 100px;}
#mypage .ctnBox dl{ display:flex; border-bottom:1px solid #ddd; }
#mypage .ctnBox dl dt{ width: 250px; padding: 0 25px; color:#222; font-weight: 600; display:flex; align-items:center; flex-shrink:0; }
#mypage .ctnBox dl dd{ min-height:100px; display:flex; align-items:center; padding: 15px; width: 100%;}
#mypage .ctnBox dl dd p{ color:#222; font-weight: 300;}
#mypage .ctnBox dl dd input{ padding: 0 20px; width: 100%; height: 70px; color:#222; background: #f7f7f7; border-radius:10px; border:none; outline:none; }
#mypage .ctnBox dl dd input::placeholder{ color:#bbb; }
#mypage .ctnBox dl dd .passBox,
#mypage .ctnBox dl dd .inputBox{ display:flex; align-items:center; }
#mypage .ctnBox dl dd .passBox{ position: relative; width: 100%;}
#mypage .ctnBox dl dd .passBox i{ position: absolute; transform:translateY(-50%); top: 50%; right: 20px;}
#mypage .ctnBox dl dd .inputBox input{ width: 250px; text-align: center; }
#mypage .ctnBox dl dd .inputBox span{ display:block; width: 7px; height: 1px; background: #666; margin: 0 10px;}

#apply .btmBox{ position: relative; } 
#apply .btmBox #btnBox{ position: absolute; transform:translateY(-50%); top: 50%; right: 0;}

.searchAll h4.title{ color:#111; font-weight: bold; letter-spacing: -0.8px; margin-bottom: 40px;}
.searchAll section:not(:last-child){ margin-bottom: 120px; }
.searchAll .intro .searchBox{ text-align: center; margin-bottom: 60px;}
.searchAll .intro .searchBox .inputBox{ position: relative; min-width:840px; height: 90px; border-radius:50px; background: #f7f7f7; display:inline-flex; margin: 0 auto 30px; padding: 10px 50px;}
.searchAll .intro .searchBox .inputBox input{ height: 100%; border:none; background: transparent; color:#222; font-weight: 300;}
.searchAll .intro .searchBox .inputBox input::placeholder{ color:#777; font-weight: 300;} 
.searchAll .intro .searchBox .inputBox button{ position:absolute; transform:translateY(-50%); top: 50%; right: 50px; }
.searchAll .intro .searchBox .txt{ color:#222; font-weight: 300;}
.searchAll .intro .searchBox .txt span{ color:var(--mainC); }
.searchAll .intro .searchBox .txt span.bold{ font-weight: 600; }
.searchAll .intro .searchCtn{ border:1px solid #ddd; border-radius:10px; text-align: center;  }
.searchAll .intro .searchCtn .searchTab{ display:flex; gap:15px; padding: 15px; }
.searchAll .intro .searchCtn .searchTab li{ position: relative;  width: calc((100% - 105px) / 8); height: 64px; border-radius:10px; overflow: hidden;}
.searchAll .intro .searchCtn .searchTab li:first-child a{ color:#fff; }
.searchAll .intro .searchCtn .searchTab li:first-child:before{ content:''; display:block; width: 100%; height: 100%; background: linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%);
position: absolute; top: 0; left: 0; z-index: -1; transition:all 0.5s; }
.searchAll .intro .searchCtn .searchTab li a{ width: 100%; height: 100%; display:flex; justify-content:center; align-items:center; letter-spacing: -0.36px; color:#bbb; font-weight: 500; 
transition:all 0.5s; }
.searchAll .intro .searchCtn .txt{ background: #F7F7F7; color:#111;font-weight: 600; letter-spacing: -0.52px; padding: 60px 0;}
.searchAll .intro .searchCtn .txt span{ color:var(--mainC); }
.searchAll .intro .searchCtn .txt ul{ display:flex; justify-content:center; align-items:center; padding: 0 20px; margin-top: 40px;}
.searchAll .intro .searchCtn .txt ul li:not(:last-child){ margin-right: 50px;}
.searchAll .intro .searchCtn .txt ul li a{ color:#222; font-weight: 300; transition:all 0.5s; }
.searchAll .intro .searchCtn .txt ul li:hover a,
.searchAll .intro .searchCtn .txt ul li.on a{ color:var(--mainC); }

/* on */
.searchAll .intro .searchCtn .searchTab li:not(:first-child):hover a,
.searchAll .intro .searchCtn .searchTab li:not(:first-child).on a{ color:var(--mainC); }

.searchAll .data .ctnBox .itemBox{ width: 100%; background: #F5F8FB; border-radius:10px; }
.searchAll .data .ctnBox .itemBox:not(:last-child){ margin-bottom: 10px;}
.searchAll .data .ctnBox .itemBox a{ display:flex;justify-content:space-between; align-items:center; padding: 20px 30px; width: 100%;}
.searchAll .data .ctnBox .itemBox a span{ text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; height: 50px; 
line-height: 50px; color:#222; }
.searchAll .data .ctnBox .itemBox a img{ transition:all 0.5s; filter: grayscale(1) brightness(3); }
.searchAll .data .ctnBox .itemBox:hover a img{ filter: none; }

.genomic .intro{ position: relative; }
.genomic .intro .fitBox{ position: absolute; top: 0; left: 0; z-index: -1;}
.genomic section.mb{ margin-bottom: 180px;}

.genomic section.overview .ctnBox{ display:flex; justify-content:space-between; }
.genomic section.overview .ctnBox .titleBox{ margin-bottom: 40px;}
.genomic section.overview .ctnBox .txtBox .title{ color:#111; font-weight: bold; }
.genomic section.overview .ctnBox .txtBox .title span{ font-family: var(--baseF);}
.genomic section.overview .ctnBox .txtBox .title span.gradient{background: linear-gradient(265deg, #8EC31F 5.52%, #1DA7D2 97.9%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--out); display:block; margin-bottom: 10px; letter-spacing: -1.28px;} 
.genomic section.overview .ctnBox .txtBox .txt{ color:#444; font-weight: 300; line-height: 1.8; letter-spacing: -0.38px;} 
.genomic section.overview .ctnBox .txtBox .txt:not(:last-of-type){ margin-bottom: 35px;}
.genomic section.overview .ctnBox .txtBox .txt span{ color:#111; font-weight: 600;}
.genomic section.overview .ctnBox .imgBox{ margin-right: -20px;} 

.genomic section.system .titleBox .txt{ color:#666; margin-top: -35px; text-align: center;  margin-bottom: 60px; letter-spacing: -0.42px;} 
.genomic section.system .ctnBox { display:flex; flex-wrap:wrap; gap:30px 35px; margin-bottom: 60px; }
.genomic section.system .ctnBox .itemBox{ width: calc((100% - 35px) / 2); border:2px solid #E5E5E5; border-radius:10px; padding: 70px; display:flex; align-items:center; flex-direction:column; text-align: center; background: #fff; }
.genomic section.system .ctnBox .itemBox .sTxt{ color:var(--mainC); font-weight: 600; font-family: var(--out);}
.genomic section.system .ctnBox .itemBox .title{ margin: 10px 0 35px; font-family: var(--out); font-weight: 600; color:#111; }
.genomic section.system .ctnBox .itemBox .txt{ color:#222; letter-spacing: -0.38px; font-weight: 300; line-height: 180%;}
.genomic section.system .ctnBox .itemBox .txt:not(:last-child){ margin-bottom: 15px;}
.genomic section.system .ctnBox .itemBox:first-child{ width: 100%; flex-direction:row; text-align: left;}
.genomic section.system .ctnBox .itemBox:first-child figure{ flex-shrink:0; margin-right: 40px;}
.genomic section.system .imgBox{ position: relative; padding: 50px; border-radius:10px; overflow: hidden; margin-bottom: 60px;}
.genomic section.system .imgBox .txtBox{ text-align: center;  padding: 110px 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(10px); color:#222; line-height: 1.75; font-weight: 300; letter-spacing: -0.4px; } 
.genomic section.system .imgBox .txtBox p:not(:last-child){ margin-bottom: 30px;}
.genomic section.system .imgBox .txtBox span{ color:var(--mainC); font-weight: 600; }
.genomic section.system .ctnBox2{ display:flex; flex-wrap:wrap; gap:20px; }
.genomic section.system .ctnBox2 .itemBox{ width: calc((100% - 100px) / 6); text-align: center; color:#111; font-weight: 500; }
.genomic section.system .ctnBox2 .itemBox figure{ margin-bottom: 35px; }

.genomic section.works{ position: relative; }
.genomic section.works .bg{ position: absolute; top: 20%; left: 0; z-index: -1;}
.genomic section.works > div > .txtBox{ display:flex; margin-bottom: 60px;}
.genomic section.works > div > .txtBox .titleBox{ margin-right: 165px; flex-shrink:0; }
.genomic section.works > div > .txtBox .titleBox span{ font-weight: 700; letter-spacing: -0.96px; color:#111; font-family: var(--baseF);}
.genomic section.works > div > .txtBox .titleBox span.gradient{ margin-bottom: 10px; background: var(--gradient2, linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--out);}
.genomic section.works > div > .txtBox p{ color:#222; font-weight: 300; line-height: 1.8; letter-spacing: -0.38px; }
.genomic section.works .imgBox{ display:flex; justify-content:center; align-items:center; padding: 45px; background: #fff; border:2px solid #ebebeb; border-radius: 10px; margin-bottom: 40px;}
.genomic section.works .imgBox img:not(:last-child){ margin-right: 28px; }
.genomic section.works .orderBox{ border-radius: 10px; background: linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%); text-align: center; color:#fff; 
padding: 50px;}
.genomic section.works .orderBox .title{ margin-bottom: 40px; font-weight: bold; line-height: 1.7;}
.genomic section.works .orderBox .ctnBox,
.genomic section.works .orderBox .ctnBox .itemBox{ display:flex; align-items:center; justify-content:center; font-family: var(--out); }
.genomic section.works .orderBox .ctnBox .itemBox .txt{ border: 1px dashed #FFF; width: 280px; height: 60px; display:flex; justify-content:center; align-items:center; padding: 10px;}
.genomic section.works .orderBox .ctnBox .itemBox figure{ margin: 0 25px 0 32px;}
.genomic section.works .orderBox .ctnBox .itemBox:not(:first-child){ margin-left: 70px;}
.genomic section.works .arrow{ width: 50%; text-align: center; margin: -40px 0 10px; position: relative; z-index: -1;}
.genomic section.works .orderBox2{ position: relative; }
.genomic section.works .orderBox2 .capBox{ position: relative; position: absolute; width: calc(50% + 20px); height: calc(100%  + 50px) ; top: -10px; left: -10px; z-index: 5;} 
.genomic section.works .orderBox2 .capBox:before{  width: calc(100% - 8px); height: calc(100% - 8px); aspect-ratio: 1; content: ""; position: absolute; inset:0; padding: 4px; border-radius: 10px; background: linear-gradient(to left, rgba(62, 118, 187, 1), rgba(29, 167, 210, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;}
.genomic section.works .orderBox2 .capBox p{ position: absolute; bottom: 0; left: 0; width: 100%; height: 75px; border-radius: 10px; background: linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%); display:flex; justify-content:center; align-items:center; color:#fff; font-weight: 500; letter-spacing: -0.48px;}
.genomic section.works .orderBox2 .ctnBox{ position: relative; display:flex; border-radius:10px; overflow: hidden;}
.genomic section.works .orderBox2 .ctnBox:after{ content:''; display:block; width: calc(100% - 3px); height: calc(100% - 90px); position:absolute; bottom: 0; left: 0; border:1px solid #CFE2F0; border-top:none; border-radius:0 0 10px 10px; }
.genomic section.works .orderBox2 .ctnBox .itemBox{ width: calc(100% / 6); text-align: center; }
.genomic section.works .orderBox2 .ctnBox .itemBox dt{ color:#fff; background: #ccc; height: 90px; line-height: 90px; font-family: var(--out); font-weight: 600; }
.genomic section.works .orderBox2 .ctnBox .itemBox dd{ padding: 20px 0 60px; background: #fff; }
.genomic section.works > .txtBox{ background: #F9F9F9; padding: 215px 0 120px; margin-top: -120px; }
.genomic section.works > .txtBox p{ background: #fff; border-radius:10px; padding: 60px 20px; text-align: center; line-height: 1.8; font-weight: 300; color:#222; }

.genomic section.insurance .tableBox{ position: relative; text-align: center; padding: 180px 0 120px; }
.genomic section.insurance .tableBox figure.bg{ position:absolute; top: 0; left: 0;}
.genomic section.insurance .tableBox .titleBox{ margin-bottom: 60px;}
.genomic section.insurance .tableBox .titleBox .title{ color:#111; font-weight: 700; line-height: 1.6; letter-spacing: -0.8px; margin-bottom: 25px; }
.genomic section.insurance .tableBox .titleBox .gradient{ background: linear-gradient(265deg, #8EC31F 5.52%, #1DA7D2 97.9%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.genomic section.insurance .tableBox .titleBox .txt{ color:#666; line-height: 1.8; letter-spacing: -0.42px; }
.genomic section.insurance .tableBox table{ position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 60px;}
.genomic section.insurance .tableBox table:after{ content:''; display:block; width: calc(100% - 5px); height: calc(100% - 80px); position:absolute; bottom: 0; left: 0; border:2px solid #E5E5E5; border-top:none; border-radius:0 0 10px 10px; }
.genomic section.insurance .tableBox table tr.head{ background: linear-gradient(to left, rgba(142, 195, 31, 1), rgba(29, 167, 210, 1));  }
.genomic section.insurance .tableBox table th{ height: 80px; color:#fff; font-weight: 600; letter-spacing: -0.4px;}
.genomic section.insurance .tableBox table td{ padding: 27px 0; text-align: center;  background: #fff; color:#222; font-weight: 500; }
.genomic section.insurance .tableBox table tr.bg td{ background: #f9fcf2;}
.genomic section.insurance .tableBox table tr.last td span{ background: linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%);background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;}
.genomic section.insurance .tableBox .bTxt{ color:var(--mainC); font-weight: 500; line-height: 1.8; letter-spacing: -0.44px;}
.genomic section.insurance .ctnBox{ position: relative; padding: 120px 0;}
.genomic section.insurance .ctnBox .bg{ position: absolute; top: 0; left: 0; z-index: -1; }
.genomic section.insurance .ctnBox > div{ display:flex; flex-wrap:wrap; }
.genomic section.insurance .ctnBox .itemBox{ color:#fff; border-radius: 10px; background: rgba(54, 112, 209, 0.40); backdrop-filter: blur(20px); text-align: center; padding: 40px 20px;
display:flex; flex-direction:column; justify-content: center; align-items:center; }
.genomic section.insurance .ctnBox .itemBox .txt { line-height: 1.8; letter-spacing: -0.4px; font-weight: 500;}
.genomic section.insurance .ctnBox .itemBox .txt:not(:last-child){ margin-bottom: 10px;} 
.genomic section.insurance .ctnBox .itemBox .tTxt{ padding: 10px 65px; background: #096ED4; border-radius:50px; display:inline-block; margin-bottom: 40px; }
.genomic section.insurance .ctnBox .itemBox .imgBox{ display:flex; justify-content:center; text-align: center; }
.genomic section.insurance .ctnBox .itemBox .imgBox > div{ text-align: center; }
.genomic section.insurance .ctnBox .itemBox .imgBox > div:not(:last-child){ margin-right: 110px;}
.genomic section.insurance .ctnBox .item1{ width: 100%; margin-bottom: 20px;}
.genomic section.insurance .ctnBox .item2{ margin-right: 20px; width: 912px; padding-bottom: 75px;}
.genomic section.insurance .ctnBox .item3{ background: rgba(142, 195, 31, 0.50); width: calc(100% - 932px);}

.genomic section.data .ctnBox .itemBox{ width: 100%; border-radius: 10px; border: 2px solid #E5E5E5; letter-spacing: -0.38px; }
.genomic section.data .ctnBox .itemBox:not(:last-child){ margin-bottom: 15px;}
.genomic section.data .ctnBox .itemBox a{ display:flex; justify-content:space-between; align-items:center; color:#222; padding: 32px 30px; }
.genomic section.data .ctnBox .itemBox a img{  transition: all 0.5s; filter: grayscale(1) brightness(3);}
.genomic section.data .ctnBox .itemBox:hover a img{ filter: none;}


/* graidTable */
.graidTable{ overflow-x: auto; overflow-y: clip; }
.graidTable table{ border-collapse: separate; border-spacing: 0; }
.graidTable th,
.graidTable td{ padding: 30px 10px; }
.graidTable thead tr{ background: linear-gradient(90deg, #8EC31F 0%, #1DA7D2 100%); clip-path: inset(0 0 0 0 round 10px 10px 0 0); -webkit-clip-path: inset(0 0 0 0 round 10px 10px 0 0); }  
.graidTable thead th{ font-weight: 500; color: #FFF; }
.graidTable tbody{ position: relative; z-index: 10; }
.graidTable tbody tr:nth-of-type(odd){ background: #FFF; }
.graidTable tbody tr:nth-of-type(even){ background: #F6FBED; }
.graidTable tbody tr td:first-child{ border-left: 2px solid #E5E5E5; }
.graidTable tbody tr td:last-child{ border-right: 2px solid #E5E5E5; }
.graidTable tbody tr:last-of-type td{ border-bottom: 2px solid #E5E5E5; }
.graidTable tbody tr:last-of-type td:first-of-type{ border-radius: 0 0 0 10px; }
.graidTable tbody tr:last-of-type td:last-of-type{ border-radius: 0 0 10px 0; }
.graidTable tbody td{ font-weight: 300; color: #222; text-align: center; }
.graidTable tbody td strong{ font-weight: 500; }
.graidTable tbody td span{ background: linear-gradient(90deg, #3E76BB 0%, #1DA7D2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


#angle .titleBox.ani span:not(.gradient){ animation: fadeUp both 1.2s 1.2s;}
#angle section.system .ctnBox .itemBox .txt span{ color:var(--mainC); font-weight: 600;}
#angle section.system .imgBox .txtBox span{ color:#222; } 
#angle section.guide{ padding-bottom: 180px;}
#angle section.guide .tableBox table{ position: relative; }
#angle section.guide .tableBox table:after{ content:''; display:block; width: calc(100% - 4px); height: calc(100% - 82px); position:absolute; bottom: 0; left: 0; border:2px solid #E5E5E5; border-top:none; border-radius:0 0 10px 10px; pointer-events: none;}
#angle section.guide .tableBox table thead tr th{ border: 1px #E5E5E5; background: linear-gradient(265deg, #8EC31F 5.52%, #1DA7D2 97.9%); color:#fff; font-family: var(--out) ; font-weight: 600; 
letter-spacing: -0.48px; height: 80px; border-radius:10px 10px 0 0}
#angle section.guide .tableBox table tbody tr td{ text-align: center; color:#222; font-weight: 300; font-family: var(--out); height: 120px; background: #fff;}
#angle section.guide .tableBox table tbody tr.head th{ padding: 15px 0; font-family: var(--out); color:#222; letter-spacing: -0.38px; font-weight: 500; background: #fff;}
#angle section.guide .tableBox table tbody tr.bg td{ background: #f9fcf2; text-align: center; padding: 13px 0; } 
#angle section.guide .tableBox table tbody tr.bg td span{ background: linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--out); font-weight: 500;}
#angle section.guide .tableBox table tbody tr.last td div{ position: relative; height: 100%; display:flex; justify-content:center; align-items:center; }
#angle section.guide .tableBox table tbody tr.last td div:after{ content:''; display:block; width: 100%; height: calc(100% - 28px); aspect-ratio: 1; content: ""; position: absolute; transform:translate(-50%,-50%); top:50%; left: 50%; padding: 4px; border-radius: 20px; background: linear-gradient(to left, rgba(62, 118, 187, 1), rgba(29, 167, 210, 1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 5;}
#angle section.guide .tableBox table tbody tr.last td div img{ position: absolute; top: calc(100% - 10px); transform:translateX(-50%); left: 50%; z-index: 5;}
#angle section.guide .tableBox .bTxt{ color:var(--mainC); font-family: var(--out); text-align: center; line-height: 1.5; font-weight: 500; margin: 40px 0 105px;}
#angle section.guide .txtBox{ border-radius: 20px; background: var(--gradient1, linear-gradient(265deg, #3E76BB 5.52%, #1DA7D2 97.9%)); color:#fff; text-align: center; padding: 60px 20px;
line-height: 1.7; font-weight: 500; letter-spacing: -0.64px; margin-bottom: 40px;}
#angle section.guide .txtBox2{ border-radius: 20px; border: 2px solid #E5E5E5; background: #FFF; color:#222; line-height: 1.8; letter-spacing: -0.38px; font-weight: 300; padding: 50px 20px; text-align: center; }
#angle section.guide .txtBox2 span{ font-weight: 600; }
#angle section.usefulness{ position: relative; padding: 120px 0;}
#angle section.usefulness .bg{ position: absolute; top: 0; left: 0; z-index: -1; }
#angle section.usefulness .titleBox #sTitle{ color:#fff; margin-bottom: 25px;}
#angle section.usefulness .titleBox #sTitle span:after{ background: #fff; }
#angle section.usefulness .titleBox .txt{ text-align: center; color:#fff; font-weight: 500; line-height: 1.8; margin-bottom: 80px;}
#angle section.usefulness .ctnBox{ display:flex; justify-content:center; flex-wrap:wrap; gap:20px 40px; }
#angle section.usefulness .ctnBox .itemBox{ width: calc((100% - 40px) / 2); text-align: center; padding: 32px 30px; border-radius: 10px; background: rgba(54, 112, 209, 0.40); backdrop-filter: blur(20px); line-height: 1.8; color:#fff; }
#angle section.usefulness .ctnBox .itemBox:nth-child(2n){ background: rgba(142, 195, 31, 0.40);  text-align: center; }
#angle section.down{ position: relative; padding: 180px 0; }
#angle section.down .bg{ position: absolute; top: 0; left: 0; z-index: -1; }
#angle section.down .ctnBox{ margin: 80px 120px; display:flex; gap:80px; }
#angle section.down .ctnBox .itemBox{ position: relative; width: calc((100% - 160px) / 3); border-radius:20px; overflow: hidden;}
#angle section.down .ctnBox .itemBox .fitBox{ height: 323px; }
#angle section.down .ctnBox .itemBox .txt{ background: var(--mainC); color:#fff; font-weight: 500; padding: 22px 20px; text-align: center; }
#angle section.down > div > .txt{ padding: 60px 20px; border: 2px solid #E5E5E5; border-radius:20px; background: #fff; line-height: 1.8; font-weight: 300; color:#222; text-align: center; }
#angle section.down > div > .txt span{ color:var(--mainC); font-weight: 500; }


/* Guardant Health */
#guardant{ letter-spacing: -0.02em; }
#guardant figure.fitBox img{ min-height: unset; object-fit: unset; top: 0; left: 0; transform: unset; }
#guardant #sTitle{ line-height: 1.5; }
#guardant #sTitle em{ background: linear-gradient(90deg, #8EC31F 0%, #1DA7D2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

#guardant .overview #sTitle{ margin-bottom: 90px; }
#guardant .overview .ctnBox > *{ width: 50%; }
#guardant .overview .txtBox{ padding-top: 30px; }
#guardant .overview .gridBox{ display: grid; grid-template-columns: 70.732% calc(100% - 70.732%); margin: -10px; }
#guardant .overview .gridBox > *{ margin: 10px; }
#guardant .overview .gridBox .block{ grid-column: auto / span 2; }
#guardant .overview .gridBox figure{ border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; }
#guardant .overview .gridBox figure img{ width: 100%; height: 100%; object-fit: cover; }

#guardant .algorithm #sTitle span span::after{ display: none; }
#guardant .algorithm .borderBox{ background: #FFF; border: 2px solid #E5E5E5; border-radius: 10px; text-align: center; padding: 60px 30px; }
#guardant .algorithm .borderBox h6{ font-family: var(--out); font-weight: 600; color: var(--mainC); }
#guardant .algorithm .borderBox figure{ margin: 60px 0; }
#guardant .algorithm .borderBox ul{ display: inline-flex; flex-direction: column; text-align: left; }
#guardant .algorithm .borderBox ul li{ display: inline-block; font-weight: 300; color: #222; padding-left: 14px; position: relative; }
#guardant .algorithm .borderBox ul li:not(:last-of-type){ margin-bottom: 10px; }
#guardant .algorithm .borderBox ul li::before{ content: ""; width: 4px; height: 4px; background: var(--mainC); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#guardant .epigenetics #sTitle{ margin-bottom: 80px; }
#guardant .epigenetics .flex-box{ display: flex; justify-content: center; }
#guardant .epigenetics .item{ max-width: calc((100% - 40px) / 2); width: 400px; display: flex; flex-direction: column; text-align: center; }
#guardant .epigenetics .item:not(:last-of-type){ margin-right: 40px; }
#guardant .epigenetics .item figure{ display: block; background: #FFF; border: 2px solid #F5F5F5; border-bottom: none; border-radius: 20px 20px 0 0; padding: 40px; padding-bottom: 70px; }
#guardant .epigenetics .item dl{ flex: 1 0 auto; border-radius: 0 0 20px 20px; font-family: var(--out); color: #111; padding: 22px; }
#guardant .epigenetics .item01 dl{ background: #E9F7FC; }
#guardant .epigenetics .item02 dl{ background: #F3FAEC; }
#guardant .epigenetics .item dl dt{ font-weight: 600; margin-bottom: 15px; }
#guardant .epigenetics .item dl dd{ font-weight: 400; }

#guardant .technology #sTitle{ margin-bottom: 80px; }
#guardant .technology figure{ display: block; background: #FFF; border: 2px solid #E5E5E5; border-radius: 10px; text-align: right; padding: 20px; }
#guardant .technology p{ font-family: var(--out); font-size: 14px; font-weight: 400; color: #999; text-align: right; margin-top: 10px; }

#guardant .graidTable colgroup col.s{ width: 25%; }

#guardant .lineup .table{ overflow-x: auto; overflow-y: clip; }
#guardant .lineup .table table{ border-collapse: separate; border-spacing: 0; }
#guardant .lineup .table thead{ clip-path: inset(0 0 0 0 round 10px 10px 0 0); -webkit-clip-path: inset(0 0 0 0 round 10px 10px 0 0); }
#guardant .lineup .table thead th{ font-family: var(--out); font-weight: 500; color: #FFF; padding: 27px; }
#guardant .lineup .table thead th.th01{ background: #8EC31F; }
#guardant .lineup .table thead th.th02{ background: #1DA7D2; }
#guardant .lineup .table thead th.th03{ background: #025DB7; }
#guardant .lineup .table tbody{ position: relative; z-index: 10; }
/* #guardant .lineup .table tbody::after{ content: ""; width: 100%; height: 100%; border: 2px solid #E5E5E5; border-radius: 0 0 10px 10px; position: absolute; top: 0; left: 0; z-index: -1; box-sizing: border-box; } */
#guardant .lineup .table tbody td{ font-weight: 300; color: #222; text-align: center; padding: 0 5px; }
#guardant .lineup .table tbody .gray{ background: #F5F5F5; }
#guardant .lineup .table tbody .gray td{ padding-block: 20px; }
#guardant .lineup .table tbody .border td{ border-right: 1px solid #E5E5E5; border-bottom: 2px solid #E5E5E5; padding-block: 37px; }
#guardant .lineup .table tbody .border td:first-of-type{ border-left: 2px solid #E5E5E5; border-radius: 0 0 0 10px; }
#guardant .lineup .table tbody .border td:last-of-type{ border-right-width: 2px; border-radius: 0 0 10px 0; }
#guardant .lineup .table tbody .border td.ptb{ padding-block: 16px; } 
#guardant .lineup .table tbody .border div{ margin-top: 30px; }
#guardant .lineup .table tbody .border div p:not(:last-of-type){ margin-bottom: 20px; }

#guardant .consignment ul{ display: flex; text-align: center; }
#guardant .consignment ul li{ flex: 1 0 auto; width: 20%; display: flex; flex-direction: column; position: relative; z-index: var(--index); }
#guardant .consignment ul li:nth-of-type(1){ --color: #7A78B8; }
#guardant .consignment ul li:nth-of-type(2){ --color: #025DB7; }
#guardant .consignment ul li:nth-of-type(3){ --color: #1DA7D2; }
#guardant .consignment ul li:nth-of-type(4){ --color: #1BADAD; }
#guardant .consignment ul li:nth-of-type(5){ --color: #8EC31F; }
#guardant .consignment ul li span{ height: 80px; display: flex; justify-content: center; align-items: center; background: var(--color); font-family: var(--out); font-weight: 500; color: #FFF; position: relative; }
#guardant .consignment ul li:first-of-type span{ border-radius: 10px 0 0 0; }
#guardant .consignment ul li:last-of-type span{ border-radius: 0 10px 0 0; }
#guardant .consignment ul li span::after{ content: ""; width: 20px; height: 100%; background: var(--color); clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); position: absolute; top: 0; right: 1px; transform: translateX(100%); }
#guardant .consignment ul li:last-of-type span::after{ display: none; }
#guardant .consignment ul li .box{ flex: 1 0 auto; display: flex; flex-direction: column; padding: 55px 30px; border-bottom: 2px solid #E5E5E5; }
#guardant .consignment ul li:first-of-type .box{ border-left: 2px solid #E5E5E5; border-radius: 0 0 0 10px; }
#guardant .consignment ul li:last-of-type .box{ border-right: 2px solid #E5E5E5; border-radius: 0 0 10px 0; }
#guardant .consignment ul li .box p{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; font-weight: 300; color: #222; text-align: center; margin-top: 30px; }