.sub_visual{
	height: 60vh;
	background-position: center; background-size: cover;
	position: relative;
	    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}


.sub_visual p{color: #fff; font-size: 20px; font-weight: 800; word-break: keep-all}
.sub_visual h2{color: #fff; margin-top: 20px; font-size: 48px; font-weight: 800; word-break: keep-all}

.sub_visual.bg01{
	background-image: url(../img/sub/sub_visual01.png)
}

.sub_visual.bg01_2{
	background-image: url(../img/sub/sub_visual01_2.png)
}
.sub_visual.bg01_3{
	background-image: url(../img/sub/sub_visual01_3.png)
}
.sub_visual.bg01_4{
	background-image: url(../img/sub/sub_visual01_4.png)
}
.sub_visual.bg01_5{
	background-image: url(../img/sub/sub_visual01_5.png)
}


.sub_visual.bg02{
	background-image: url(../img/sub/sub_visual02.png)
}

.sub_visual.bg02_2{
	background-image: url(../img/sub/sub_visual02_2.png)
}
.sub_visual.bg02_3{
	background-image: url(../img/sub/sub_visual02_3.png)
}


.sub_visual.bg03{
	background-image: url(../img/sub/sub_visual03.png)
}

.sub_visual.bg03_2{
	background-image: url(../img/sub/sub_visual03_2.png)
}

.sub_visual.bg04{
	background-image: url(../img/sub/sub_visual04.png)
}

.sub_visual.bg04_2{
	background-image: url(../img/sub/sub_visual04_2.png)
}


.sub_visual_nav{ 
	border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
position: absolute; left: 0;
bottom: 0; width: 100%
}
.sub_visual_nav .sub_deps{display: flex;     justify-content: center;}
.sub_visual_nav .sub_deps a{text-align: center; position: relative; padding: 20px 80px; color: #fff; font-size: 16px; font-weight: 700;opacity: 0.6; transition-duration: .8s }
.sub_visual_nav .sub_deps a.on,
.sub_visual_nav .sub_deps a:hover{opacity: 1}


.sub_visual_nav .sub_deps a:after{
	content: '';
	position: absolute; left: 0; bottom: 0;
	width: 0%; height: 2px; background: #0078FF;
	transition-duration: .8s
}

.sub_visual_nav .sub_deps a:hover:after,
.sub_visual_nav .sub_deps a.on:after{width: 100%}



.sub_section{padding: 150px 0}

.service{
	display: flex;
	align-items: flex-start;
    justify-content: space-between;
}

.service_nav{flex:1;
    position: sticky;
    top: 100px;
    left: 0;}

.service_nav a{display: block; color: #222; font-size: 16px; word-break: keep-all; line-height: 150%; transition-duration: .8s}
.service_nav a + a{margin-top: 20px;}
.service_nav a.on_nav{color: #0078FF; font-weight: bold}

.service_content{width: 1000px; }

.service_section { scroll-margin-top: 100px; }

.service_section + .service_section{margin-top: 150px}


.img_box{height: 300px;display: flex; border: 1px solid #ddd; border-radius: 10px; 
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.03); background: #fff;
justify-content: center;
align-items: center; }

.img_box.noshadow{box-shadow: none; height: auto; padding: 30px}
 
.service_title{margin-bottom: 30px;}
.service_title h3{color: #0E0E0F; font-size: 24px; line-height: 160%; word-break: keep-all; font-weight: 700; }
.service_title h3 b{font-weight: 700; color: #0078FF}
.service_title h4{line-height: 160%; word-break: keep-all; font-size: 20px; font-weight: bold; color:#0E0E0F }
.service_title p{margin-top: 15px; word-break: keep-all; color: #333; line-height: 150%; font-size: 18px;}
.service_title p b{font-weight: 700; color: #0078FF}
.service_title p b.black{font-weight: 700; color: #333}

.genomom_center{padding: 30px; text-align: center; background: #0078FF; border-radius: 10px;}
.genomom_center p{color: #fff; font-size: 18px; word-break: keep-all; line-height: 160%}
.genomom_center h4{color: #fff; font-size: 20px; word-break: keep-all; line-height: 160%}
.genomom_center h4 span{background: #fff; padding: 0 8px; border-radius: 5px; color: #0078FF;}


.genomom_center + .genomom_flex{margin-top: 15px;}

.genomom_flex{
	padding: 40px; 
	 border: 1px solid #ddd; border-radius: 10px; 
	 text-align: center;
	 
}

.genomom_flex.left{text-align: left}

.genomom_flex p.small{font-size: 18px; color: #333; line-height: 150%; word-break: keep-all; margin-bottom: 15px;}
.genomom_flex p.small b{color:#0078FF }

.genomom_flex h3{color: #0E0E0F; font-size: 24px; line-height: 160%; word-break: keep-all; margin-bottom: 60px;}

.genomom_flex.left h3{margin-bottom: 10px}
.genomom_flex.left h3 span{font-size: 18px; font-weight: 400}

.genomom_flex .in_flex{display: flex; gap:30px; text-align: center}
.genomom_flex .in_flex .box{flex:1; position: relative; padding: 60px 30px 30px 30px; border: 1px solid #1C2952;
border-radius: 10px;}

.genomom_flex.left .in_flex{gap:20px;}

.genomom_flex.left .in_flex .box{
	background: #F9F9F9; border: 0
}



.genomom_flex.left .in_flex .box p{margin-top: 10px}
.genomom_flex.left .in_flex .box p span{color: #7E7777; font-size: 14px;}

.genomom_flex.left .in_flex .box p + p + p{font-size: 16px;}


.genomom_flex.left .in_all{margin-top: 20px; text-align: center; padding: 20px; background: #f9f9f9; border-radius: 10px;}
.genomom_flex.left .in_all p{color: #0E0E0F; font-size: 16px; word-break: keep-all; line-height: 150%; font-weight: 400; }
.genomom_flex.left .in_all p b{color: #0078FF}
.genomom_flex.left .in_all p span{display: block; color: #7E7777; font-size: 14px;} 

.genomom_flex.left .in_all p + img{margin-top: 10px;}

.genomom_flex .in_flex .box .num{
	width: 60px; height: 60px; border: 10px solid #1C2952;
	display: flex; justify-content: center;
align-items: center; font-size: 20px; font-weight: 500; color: #0E0E0F; background: #fff; z-index: 2; position: absolute;
top: -30px; left: 50%; border-radius: 60px;
transform: translateX(-50%);
}


.genomom_flex .in_flex .box .in_txt{}
.genomom_flex .in_flex .box .in_txt img{margin-bottom: 10px;}
.genomom_flex .in_flex .box .in_txt p{font-size: 18px; color:#0E0E0F; word-break: keep-all }
.genomom_flex .in_flex .box .in_txt .line{margin: 10px 0; width: 100%; height: 1px; background: #1C2952}
.genomom_flex .in_flex .box .in_txt h4{color: #0E0E0F; font-size: 22px; font-weight: 600; word-break: keep-all; line-height: 160%}
.genomom_flex .in_flex .box .in_txt p.gray{font-size: 18px; color: #7E7777}

.genomom_flex .in_flex .box .in_txt h5{
	color: #000;
font-size: 18px;
font-weight: 400;
line-height: 150%;
margin-top: 10px;
}

.genomom_flex .in_flex .box .in_txt h5 b{color: #0078FF; font-weight: 700; font-size: 20px;}



* + .service_title{margin-top: 150px;}

.img_box + .service_title{margin-top: 30px;}
.technology_top + .service_title{margin-top: 30px;}
.full_img + .service_title{margin-top: 30px;}

.genomom_why{}

.genomom_why p.only{ word-break: keep-all; line-height: 150%; color: #333; font-size: 18px}

.genomom_why .box{padding: 30px 40px; border: 1px solid #ddd; border-radius: 10px;}
.genomom_why .box .tag{padding: 5px 10px; border-radius: 10px; background: #0078FF;
 display: inline-block; color: #fff; font-size: 18px; word-break: keep-all; margin-bottom: 15px}
.genomom_why .box p{ word-break: keep-all; line-height: 150%; color: #333; font-size: 18px}
.genomom_why .box p b{color: #0078FF}
.genomom_why .box p b.black{color: #333}

.genomom_why .box p.last{color: #7E7777; margin-top: 30px;}

.genomom_why .box ul{}
.genomom_why .box ul li{position: relative; font-size: 18px; line-height: 150%; word-break: keep-all; padding-left: 15px}
.genomom_why .box ul li b{color: #0078FF}
.genomom_why .box ul li:after{content: '·'; position: absolute; 
left: 0; top: 0; color: #0078FF}

.genomom_why .box ul li span{font-size: 16px; word-break: keep-all; line-height: 155%; display: block;}
.genomom_why .box ul li + li{margin-top: 5px}

.genomom_why .box.navy .tag{background: #1C2952}
.genomom_why .box.navy ul li b,
.genomom_why .box.navy ul li:after{color: #1C2952}

.genomom_why .box + p.only{margin-top: 15px;}
.genomom_why p.only + .box{margin-top: 15px;}
.genomom_why .box + .box{margin-top: 15px;}
.genomom_why .box + .tlb{margin-top: 15px;}

.genomom_why .box.flex{display: flex;
    justify-content: space-between;
    align-items: center; gap:20px}

.genomom_why .box.navy.flex ul li b,
.genomom_why .box.navy.flex ul li:after{color: #0078FF}

.genomom_why .box h5{margin-bottom: 15px; font-size: 20px; word-break: keep-all; color: #0E0E0F; line-height: 150%; font-weight: 700}



.genomom_why .box.center{
	text-align: center
}


.genomom_why .box.center h3{
	color: #0E0E0F;
font-size: 20px;
font-weight: 700;
line-height: 160%; /* 32px */
}
.genomom_why .box.center h3 b{color: #0078FF; font-weight: 700}

.genomom_why .box.center h3 + p{color: #7E7777}
.genomom_why .box.center p + .technology_list_img_flex{margin-top: 20px;}

.genomom_why_gray_flex{padding: 30px 100px; background: #f9f9f9; border-radius: 10px; display: flex; margin-bottom: 20px;}
.genomom_why_gray_flex .in_txt{text-align: center; flex:1}
.genomom_why_gray_flex .in_txt img{margin-bottom: 15px}
.genomom_why_gray_flex .in_txt p{color: #333; font-size: 16px; word-break: keep-all; line-height: 150%; }
.genomom_why_gray_flex .in_txt p + p{margin-top: 5px}
.genomom_why_gray_flex .in_txt p b{color: #0E0E0F}

.tlb{border-radius: 10px; overflow: hidden; border: 1px solid #ddd}
.tlb table{width: 100%; border-spacing: 0; }
.tlb table th{padding: 15px 12px; background: #0078FF; color: #fff; font-size: 20px; word-break: keep-all; border-bottom: 1px solid #DDD}
.tlb table td{padding: 15px 12px; background: #fff; color: #333; font-size: 18px; word-break: keep-all; border-bottom: 1px solid #DDD}
.tlb table td .color{color: #0078FF}

.tlb table th + th,
.tlb table td + td,
.tlb table th + td{ border-left: 1px solid #DDD}

.tlb table tr:last-child td,
.tlb table tr:last-child th{border-bottom: 0}

.tlb table td span{font-size: 16px;}
.tlb table th span{font-size: 18px;}
.tlb table td .block{display: block}



.genomom_why .tlb table td{text-align: center}

ul.who{}
ul.who li{position: relative;padding: 20px 40px 20px 74px; font-size: 18px; line-height: 150%; font-weight: 500; color: #333;  
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.03); border: 1px solid #ddd; border-radius: 10px;}
ul.who li b{color: #0078FF}
ul.who li:after{content: '';
width: 24px; height: 24px; position: absolute; left: 40px; top: 20px;
background: url(../img/sub/whock.png);
background-repeat: no-repeat; background-size: 100% auto
}

ul.who li + li{margin-top: 15px;}

ul.who li span.list{color: #333; display: block; position: relative; padding-left: 15px;}
ul.who li span.list:after{position: absolute; left: 0; top: 0; content: '-'}

.what_different{}
.what_different .box{padding: 30px 40px; border: 1px solid #ddd; border-radius: 10px; text-align: center}
.what_different .box p{word-break: keep-all; line-height: 150%; color: #333; font-size: 18px}
.what_different .box p b{color: #0078FF}
.what_different .box + .tlb{margin-top: 15px;}

.what_different .tlb{}
.what_different .tlb table td{text-align: center; color: #333}
.what_different .tlb table td span{display: block; color: #7E7777}
.what_different .tlb table th{font-size: 18px;}
.what_different .tlb table th.gray{background: #F5F5F5; color: #333; }
.what_different .tlb table td.blue{color: #0078FF; background: rgba(0, 120, 255, 0.10); font-weight: bold}
.what_different .tlb table td.blue span{color: #7E7777}

.what_different .tlb table td.red{color: #D0111B}

.what_different .tlb table td.rospan{border-bottom: 0}
.what_different .tlb table td.left{border-left: 1px solid #ddd}

.what_different .tlb table td span.small{display: inline-block; color: #7E7777; font-size: 16px;}


.what_different .note_p{margin-top: 20px; font-size: 16px;}


.genomom_why .tlb table td.gray{background: #F5F5F5; color: #0078FF; font-weight: bold}



.what_different .tlb + .box{margin-top: 15px; background: #F9F9F9; border-color: #F9F9F9}


.service_step{display: flex; gap:15px;
    justify-content: flex-start;
    align-items: center;}
.service_step .box{
	border-radius: 10px;
border: 1px solid #DDD;
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.03);
padding: 22px; text-align: center; background: #fff;
flex:auto
}

.service_step .box h3{font-size: 18px; word-break: keep-all; color: #0078FF; line-height: 150%}
.service_step .box p{font-size: 16px; word-break: keep-all; color: #333; line-height: 150%}
.service_step .box img{margin-bottom: 10px}





.service_end{}
.service_end li{position: relative; padding-left: 15px; font-size: 18px; line-height: 150%; word-break: keep-all; color: #333}
.service_end li + li{margin-top: 5px;}
.service_end li:after{content: '·'; position: absolute; 
left: 0; top: 0;}

.service_end li.red{color: #D0111B}

.service_end li span{position: relative; display: block; padding-left: 15px}
.service_end li span:after{content: '-'; position: absolute; 
left: 0; top: 0;}




.genovro_box{
	border: 1px solid #ddd; border-radius: 10px; padding: 30px 40px
}

.genovro_box + .genovro_box{margin-top: 15px}


.genovro_box h3{
	color: #0E0E0F; font-size: 20px; line-height: 150%; word-break: keep-all
}

.genovro_box p.top_p{font-size: 18px; word-break: keep-all; color:#333; line-height: 150%; margin-bottom: 10px; }
.genovro_box p.top_p b{color: #0078FF}

.genovro_box_in{display: flex; margin-top: 15px; gap:20px;}

.genovro_box_in .box{flex:auto; background: #f9f9f9f9; border-radius: 10px; padding: 20px;  text-align: center}
.genovro_box_in .box img{margin-bottom: 15px;}
.genovro_box_in .box p{font-size: 18px; word-break: keep-all; color:#0E0E0F }

.genovro_box .genovro_box_end{margin-top: 20px; background:#1C2952; border-radius: 10px; padding: 5px 10px; text-align: center;
display: flex;
    align-items: center;
    justify-content: center; gap:10px;}

.genovro_box .genovro_box_end p{font-size: 16px; color: #fff; line-height: 150%; word-break: keep-all; font-weight: 700}
.genovro_box .genovro_box_end p b{font-size: 20px; font-weight: 700}


.genovro_box_in2{display: flex; margin-top: 15px; gap:20px;}
.genovro_box_in2 .box{flex:auto; text-align: center;
display: flex;
    flex-direction: column;
    justify-content: space-between;}
.genovro_box_in2 .box p{
	background: #f9f9f9f9; border-radius: 10px; padding: 20px;  text-align: center;
	font-size: 18px; word-break: keep-all; color:#0E0E0F; line-height: 150%
}

.genovro_box_in2 .box .thum{display: flex;
    justify-content: center;
    align-items: center; flex:1}



.chromosome{
	border: 1px solid #ddd; border-radius: 10px; padding: 30px 40px;
	margin-top: 15px;
}

.chromosome .service_step{margin-top: 20px;}
.chromosome .service_step .box{
box-shadow: none;
}


.chromosome p.only{color: #333;
font-size: 18px;
font-weight: 500;
line-height: 150%; /* 27px */ ; word-break: keep-all}

.chromosome .only_img{margin-top: 20px; text-align: center}
.chromosome .only_img img{max-width: 100%}

.chromosome h3{
	color: #0E0E0F; font-size: 20px; line-height: 150%; word-break: keep-all;
	margin-bottom: 15px;
}

.chromosome h3 span{font-size: 18px; color: #7E7777; font-weight: 400}

.chromosome h3 b{color: #0078FF; font-weight: 700}

.chromosome_flex{
	display: flex; gap:20px;
	flex-wrap: wrap;
}

.chromosome_flex .box{display: flex; padding: 25px 20px; background:#F9F9F9; border-radius: 10px;
width: calc(33.33% - 13.33px);
align-items: center;
    justify-content: space-between;}
.chromosome_flex .box .tag{padding: 5px 10px; border-radius: 10px; background: #0078FF;
 display: inline-block; color: #fff; font-size: 16px; word-break: keep-all; margin-bottom: 8px; font-weight: 400}
.chromosome_flex .box  h2{font-size: 18px; font-weight: 700; word-break: keep-all; color:#0E0E0F }

.chromosome_flex .box .left{flex:1}

.how_chromosome{display: flex; 
align-items: center;
    justify-content: space-between;}


.how_chromosome p{font-size: 18px; line-height: 150%; word-break: keep-all; color: #333}
.how_chromosome p b{color: #0078FF}
.how_chromosome .info{padding: 10px 20px; border: 1px solid #ddd; border-radius: 10px; margin-top: 20px;}

.how_chromosome .info p{font-size: 14px; display: flex;     align-items: center; gap:8px}
.how_chromosome .info p span{flex:1}
.how_chromosome .info p i{width: 22px;
height: 5px; border-radius: 5px; background: #0078FF}

.how_chromosome .info p + p{margin-top: 10px}
.how_chromosome .info p + p i{background: #1C2952}

.how_chromosome .thum .thum_flex{display: flex; align-items: center; gap:25px;}

.how_chromosome .thum .t_right{font-size: 12px; color: #6b6b6b; text-align: right}

.how_chromosome .thum .info_txt p{display: flex; gap:5px; color: #333; word-break: keep-all; font-size: 14px; line-height: normal;
align-items: center; }
.how_chromosome .thum .info_txt p + p{margin-top: 5px;}
.how_chromosome .thum .info_txt p i{width: 10px; height: 10px; border-radius: 10px}
.how_chromosome .thum .info_txt p:nth-child(1) i{background: #67C2C4}
.how_chromosome .thum .info_txt p:nth-child(2) i{background: #7DB47B}
.how_chromosome .thum .info_txt p:nth-child(3) i{background: #6ACCE8}
.how_chromosome .thum .info_txt p:nth-child(4) i{background: #4A8CB9}
.how_chromosome .thum .info_txt p:nth-child(5) i{background: #7668AE}
.how_chromosome .thum .info_txt p:nth-child(6) i{background: #CD5C78}
.how_chromosome .thum .info_txt p:nth-child(7) i{background: #E7AE55}


ul.dot{}
ul.dot li{padding-left: 15px; font-size: 18px; color: #333; word-break: keep-all; line-height: 150%; position: relative}
ul.dot li:after{position: absolute; left: 0; top: 0; content: '·';}


.chromosome .table_flex{border: 1px solid #ddd; border-radius: 10px; overflow: hidden; display: flex; flex-wrap: wrap; margin-top: 15px; margin-bottom: 20px;}
.chromosome .table_flex li{width: 33.33%; padding: 12px; text-align: center; color: #333; font-size: 16px; line-height: 150%; word-break: keep-all;
border-top: 1px solid #ddd}

.chromosome .table_flex li:first-child{border-left: 0; border-top: 0}
.chromosome .table_flex li:nth-child(2),
.chromosome .table_flex li:nth-child(3){border-top: 0}

.chromosome .table_flex li:nth-child(3n + 1){border-left: 0;}

.chromosome .table_flex li + li{border-left: 1px solid #ddd}

.chromosome .note_box{margin-top: 15px;}

.note_box{padding: 20px 24px; background: #f9f9f9; border-radius: 10px}
.note_box p{font-size: 16px; word-break: keep-all; line-height: 150%; color: #7E7777}
.note_box p + p{margin-top: 5px;}




.ora_box{
	border: 1px solid #ddd; border-radius: 10px; padding: 30px 40px;
}

.ora_box h3{
	color: #0E0E0F; font-size: 20px; line-height: 150%; word-break: keep-all;
	margin-bottom: 15px;
}

.ora_box h3 span{font-size: 18px; font-weight: 400}

.ora_box .ora_box_img{text-align: center; padding: 20px; border-radius: 10px; background: #f9f9f9}

.ora_box_ck{
	border: 1px solid #ddd; border-radius: 10px; padding: 30px 40px;
	margin-top: 15px
}



.ora_box_ck .box{}
.ora_box_ck .box + .box{margin-top: 15px;}
.ora_box_ck h3{
	color: #0078FF; font-size: 20px; line-height: 150%; word-break: keep-all;
	margin-bottom: 15px; padding-left: 34px; position: relative
}

.ora_box_ck h3:after{content: '';
width: 24px; height: 24px; position: absolute; left: 0px; top: 0px;
background: url(../img/sub/whock.png);
background-repeat: no-repeat; background-size: 100% auto
}

.ora_box_ck h4{font-size: 18px; line-height: 150%; font-weight: 700; word-break: keep-all;}
.ora_box_ck h4 b{color: #0078FF; font-weight: 700}

.ora_box_ck ul.dot{margin-top: 10px;}

.ora_box_ck .note_box{margin-top: 20px;}





.technology_top{display: flex; gap:20px;}
.technology_top .box{
	border-radius: 10px;
border: 1px solid #DDD;
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
display: flex;
justify-content: center;
align-items: center;
flex:auto;
padding: 20px 60px;
}

.technology_top .box img{max-width: 100%}

.technology_top .box_right{
	border-radius: 10px;
border: 1px solid #DDD;
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
padding: 40px;
flex:auto
}



.technology_top .box_right ul{margin-top: 30px;}
.technology_top .box_right ul li{display: flex; 
align-items: center;
gap: 10px;
color: #333;
font-size: 16px;
line-height: 160%; /* 25.6px */
}

.technology_top .box_right ul li + li{margin-top: 20px;}

.technology_top .box_right img.top_img{display: block; margin: 0 auto; max-width: 100%}


.technology_list{}
.technology_list li + li{margin-top: 25px;}

.technology_list li h4{
	color:#0E0E0F;
font-size: 20px;
font-weight: 700;
line-height: 160%; 
word-break: keep-all
}

.technology_list li p{
	color: #333;
font-size: 18px;
font-weight: 500;
line-height: 160%; word-break: keep-all
}

.technology_list li h4 + p{margin-top: 10px;}


.technology_list_img_flex{
	padding: 30px; position: relative;
	border-radius: 10px;
background: #F5F5F5;
display: flex;
justify-content: space-around;
    align-items: center;
}

.technology_list_img_flex .tlb{min-width: 410px}

.technology_list_img_flex .tlb table th{text-align: center}

.technology_list_img_flex p.small{
	color: #4B4B4B;
text-align: right;
font-size: 14px;
font-weight: 400;
line-height: 150%;
position: absolute; right: 20px;
bottom: 20px;
}


.genomom_why .box.center .technology_list_img_flex .tlb{min-width: 300px}

.genomom_why .box.center .technology_list_img_flex .tlb th,
.genomom_why .box.center .technology_list_img_flex .tlb td{font-size: 16px;}




.full_img{
	border-radius: 10px;
border: 1px solid #DDD;
background: url(<path-to-image>) lightgray 0px -154.749px / 100% 219.706% no-repeat;

/* Drop */
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
overflow: hidden
}

.full_img img{display: block; width: 100%}


.sub_title{text-align: center; margin-bottom: 50px;}
.sub_title h3{ color: #0E0E0F; font-size: 30px; font-weight: bold; line-height: 160%; word-break: keep-all}
.sub_title h3 b{color: #0078FF; font-weight: bold;}

.sub_title h4{ color: #0078FF; font-size: 20px; font-weight: bold; line-height: 120%; word-break: keep-all; margin-bottom: 20px;}
.sub_title h2{font-size: 50px; word-break: keep-all; font-weight: bold; color: #0E0E0F}
.sub_title p{margin-top: 30px; font-size: 30px; color: #111; word-break: keep-all; line-height: 150%}
.sub_title p.small{color: #7E7777; font-size: 16px; margin-top: 15px;}


.vision{text-align: center; margin: 80px auto}
.vision_flex{display: flex; max-width: 1440px; margin: 0 auto;
justify-content: space-around;}
.vision_flex .box{text-align: center}
.vision_flex .box h3{margin-top: 7px; font-size: 24px; font-weight: bold; color: #0E0E0F; word-break: keep-all; 
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
align-self: stretch;}


.vision_flex .box h3 b{color: #0078FF; font-size: 44px; font-weight: 700}

.vision_flex .box p{margin-top: 15px;  font-size: 16px; color: #111; word-break: keep-all}







.history_section{margin-top: 60px; position: relative}

.year_group{display: flex; gap:240px; align-items: flex-start;
    justify-content: center;}
.year_group .year_range{text-align: center; width: 100%; max-width: 600px;
    position: sticky;
    top: 100px;}
.year_group .year_range h2{font-size: 40px; color: #0078FF; transition-duration: .5s}
.year_group .year_range .thum{border-radius: 20px; overflow: hidden; margin-top: 20px;}
.year_group .year_range .thum img{max-width: 100%}

.year_txt{width: calc(50% - 120px)}
.year_txt .box + .box{margin-top: 50px}

.year_group + .year_group{margin-top: 150px}

.year_txt .box h3{font-size: 20px; color: #0078FF}
.year_txt .box ul{margin-top: 15px}
.year_txt .box ul li{position: relative; padding-left: 15px; font-size: 18px; line-height: 150%; word-break: keep-all; color: #333}
.year_txt .box ul li:after{
	content: '·';
	position: absolute; left: 0; top: 
}


.year_txt .box ul li + li{margin-top: 5px}



.history_section .gauge {
  width: 2px;
  height: 100%;
  background: #ddd;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  top: 0
}

.gauge_fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #0078FF;
  transition: height 0.5s linear;
}

.gauge_fill:after{
	content: '';
	position: absolute; bottom: 0;
	width: 40px; height: 40px; border-radius: 40px; z-index: 2; 
	background: #CFE6FF;
	left: 50%;
    transform: translateX(-50%)
}

.gauge_fill:before{
	content: '';
	position: absolute; bottom: 15px;
	width: 10px; height: 10px; border-radius: 40px; z-index: 3; 
	background: #0078FF;
	left: 50%;
    transform: translateX(-50%)
}



.map_in .map{overflow: hidden; border-radius: 10px;}
.map_in .map iframe{width: 100%; display: block}

.location{margin-top: 25px; display: flex; gap:20px 40px;    flex-wrap: wrap;}
.location li{display: flex; gap:15px; font-size: 18px; word-break: keep-all; line-height: 150%;
align-items: center;}

.location li.w100{width: 100%}

.form_in,
.map_in{flex:1}


/*문의하기*/

.inquery_flex{display: flex;
align-items: flex-start;
    justify-content: flex-start;}
.inquery_flex .inquery_title{width: 35%;
    position: sticky;
    top: 100px;
    left: 0;}

.inquery_flex .form_in{flex:1}


.inquery_title h2{color: #0E0E0F; font-size: 30px; line-height: 150%; word-break: keep-all;}
.inquery_title p{
	color: #7E7777;

font-size: 16px;
font-weight: 400;
line-height: 140%; 
margin-top: 18px;
}



.form_in ul{display: flex; gap:30px; flex-wrap: wrap;}
.form_in ul li{width: calc(50% - 15px);}
.form_in ul li.w100{width: 100%}


.form_in ul li p{
	color: #0E0E0F; font-size: 16px; margin-bottom: 10px; word-break: keep-all;
	font-weight: 600
}

.form_in ul li p span{color: #0078FF}


.form_in ul li input[type="text"],
.form_in ul li input[type="email"],
.form_in ul li select{
	border-radius: 100px;
	border: 1px solid #DDD;
	background: #FFF;
	height: 60px; padding: 0 20px;
	font-size: 16px; word-break: keep-all;
	width: 100%;
	font-weight: 400
}


.form_in ul li select{background: #fff url(../img/sub/drop_search.png); 
background-position: 96% center; background-repeat: no-repeat; background-size: 24px auto;
-o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; position: relative}


.form_in ul li input::placeholder{color: #C0C0C0; font-weight: 400}

.form_in ul li textarea{
	border-radius: 20px;
	border: 1px solid #DDD;
	background: #FFF;
	height: 250px; padding: 20px;
	font-size: 16px; word-break: keep-all;
	width: 100%;
	font-weight: 400
}

.file_are{
	display: flex;
	border-radius: 100px;
	border: 1px solid #DDD;
	background: #FFF; padding: 0 20px;
	overflow: hidden;
	    justify-content: space-between;
    align-items: center;
}

.form_in ul li .file_are input[type="text"]{flex:1; border: 0; padding: 0; border-radius: 0}

.file_are button{
	border-radius: 100px;
background: #1C2952;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.02);
display: inline-flex;
height: 40px;
padding: 0 16px;
justify-content: center;
align-items: center;
color: #fff; font-size: 14px;
border: 0;
}


.flex_radio{display: flex; gap:10px}
.flex_radio input{display: none}
.flex_radio input + label{
	display: flex;
height: 60px;
padding:0 20px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
border-radius: 100px;
border: 1px solid #DDD;
background: #FFF;
font-size: 16px;
color: #C0C0C0;
cursor: pointer;
transition-duration: .5s
}

.flex_radio input:checked + label{color: #fff; background: #0078FF; border-color: #0078FF}




.ck_agree{ margin-top: 30px; display: flex; gap:8px; align-items: center;}
.ck_agree input{display: none}
.ck_agree input + label{
	width: 22px; height: 22px;
	background: url(../img/sub/ck.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%; auto;
	cursor: pointer
}

.ck_agree input:checked + label{background-image: url(../img/sub/ckon.png);}


.ck_agree p{
	color:#0E0E0F;
font-size: 16px;
font-weight: 400; word-break: keep-all
}

.ck_agree p a{color: #0078FF; text-decoration: underline; font-weight: 600}

.form_in_btn{text-align: center; margin-top: 50px;}
.form_in_btn button,
.form_in_btn a{
	display: inline-flex;
height: 60px;
padding: 0 40px;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 18px; color: #fff; word-break: keep-all;
background: #0078FF; border-radius: 60px;
border: 0;
min-width: 180px
}



/*board*/

.board_common_btn_list{margin-top: 80px}
.board_common_btn_list ul{display: flex; gap:10px;align-items: center;
    justify-content: flex-end;}
.board_common_btn_list a, .board_common_btn_list button{border: 1px solid #ddd; border-radius: 5px; background: #fff; font-size: 16px; 
padding: 0 15px; height: 40px; line-height: 40px; color: #333; display: inline-block; text-align: center}

.board_top_flex{display: flex; justify-content: center;
    align-items: center; margin-bottom: 80px}

.total_board{}
.total_board p{font-size: 14px; color: #666}
.total_board p b{font-weight: bold; color: #222}

.search_board form{display: flex; gap:10px}
.search_board form select{background: #fff url(../img/sub/drop_search.png); 
background-position: 90% center; background-repeat: no-repeat; background-size: 24px auto;
border-radius: 60px; padding: 0 20px; font-size: 15px; color: #666; height: 60px; line-height: 60px; border: 1px solid #ddd;
-o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; position: relative; min-width: 180px}

.search_board form select::-ms-expand{ 
	display: none;
}

.search_board .sch_bar{display: flex; gap:10px}
.search_board .sch_bar input{font-size: 15px; padding: 0 20px; height: 60px; line-height: 60px; border: 1px solid #ddd;
border-radius: 60px;}
.search_board .sch_bar button{border: 0; background: #0078FF; border-radius: 60px; width: 60px;}


.board_tlb table{width: 100%; border-top:1px solid #222; border-spacing: 0 }
.board_tlb table td{font-size:18px; padding:35px 15px; border-bottom: 1px solid #ddd; font-weight: 500; color: #666 }
.board_tlb table td.empty_table{font-size: 1em;padding: 20px 0 !important;
    color: #666;
    text-align: center;}

.board_tlb table td.num{text-align: center; width: 80px; font-size: 15px; color: #999}
.board_tlb table td.num .notice_icon{color: #D96739}

.board_tlb table td.date{width: 170px;  }
.board_tlb table td.date p{font-size: 16px; color: #999; text-align: center;display: flex; gap:5px}
.board_tlb table td.down{text-align: center; width: 170px; font-size: 15px; color: #999}
.board_tlb table td a.flexa{display: flex; gap:10px}
.board_tlb table td .point{font-size: 14px; background:#FF8A00 ; padding:5px 10px ; border-radius: 3px; color: #fff}


.board_tlb .down_load{}

.board_tlb .down_load{display: inline-flex; gap:10px; justify-content: center;
    align-items: center; font-size: 16px; color: #fff; background: #18459D; padding: 15px 25px 15px 15px; border-radius: 100px}
.board_tlb .down_load i{background: #fff; width: 30px; height: 30px; display: flex; justify-content: center;
    align-items: center; border-radius: 30px}




.board_detail_content{border-top: 2px solid #111; padding: 0px 0 50px; border-bottom: 1px solid #ddd}




.gall_list_style{display: flex; gap:40px 30px;    flex-wrap: wrap;}
.gall_list_style li{width: calc(33.33% - 19.99px)}
.gall_list_style li.empty_list{width: 100%}

.gall_list_style .gall_img{overflow: hidden; border-radius: 10px; border: 1px solid #ddd; transition-duration: .5s}
.gall_list_style .gall_img img{width: 100%; height: 100%;object-fit: cover;
    aspect-ratio: 16 / 10;}
    
    
.gall_list_style .gall_img:hover{box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);}
    
  
.gall_list_style.certifications .gall_img img{aspect-ratio: 21 / 29;}
    
.gall_list_style.certifications li{width: calc(25% - 45px)}
    
    
    
.review_list{display: flex; gap:40px 30px;    flex-wrap: wrap;}
.review_list li{width: calc(33.33% - 19.99px)}
.review_list li.empty_list{width: 100%}
    
    
    
.board_list_txt{margin-top: 25px}
.board_list_txt p{font-size: 16px; color: #aaa; margin-top: 10px}  
.board_list_txt h3{color: #222; font-size: 18px; font-weight: bold;
word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; text-align: left }    

.review_list .board_list_txt{margin: 0}

.review_list .board_list_txt h3{
	-webkit-line-clamp: 2;
	font-size: 20px;
}

.review_list .board_list_txt h4{color: rgba(34, 34, 34, 0.50); font-size: 18px; font-weight: bold;
word-break: keep-all;
display: -webkit-box;
  -webkit-line-clamp: 3; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; text-align: left; line-height: 150%; margin-top: 15px; font-weight: 500}   

.review_box{border: 1px solid #DDD;
background: #FFF; padding: 50px 40px; display: block; transition-duration: .8s}


.review_box:hover{
	border: 1px solid var(--Point, #0078FF);
background: #FFF;

/* Drop */
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.10);
}

.review_list .board_list_txt p.ca_name{margin-bottom: 20px; color: #0078FF; font-size: 20px; word-break: keep-all; font-weight: 600; margin-top: 0}







.board_list_txt p.list_date_flex{display: flex; margin-top: 30px; font-size: 16px;
color: rgba(34, 34, 34, 0.50); gap:10px; align-items: center;}

.board_list_txt p.list_date_flex i{
	height: 10px; width: 1px; background: #DDD;
	display: block
}








.gall_list_style.certifications .board_list_txt{text-align: center}
    
.if_video_are{max-width: 1024px; margin: 0 auto 50px}   
    
.board_detail_content .video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
  overflow: hidden; border-radius: 5px;
}

.board_detail_content .video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}


#bo_v_file li{padding: 25px 0; border: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; box-shadow: none;
border-radius: 0}
#bo_v_file li a{display: flex; gap:20px; font-size: 18px}

#bo_v_file li i{float: none; margin: 0}
#bo_v_file li i img{margin: 0}

#bo_v_file li a strong{font-weight: 400}




.board_view_btn .common_btn{background: #1B97D3; height: 60px; color: #fff; font-size: 18px; border-radius: 60px; padding: 0 45px; display: inline-flex;
justify-content: center;
    align-items: center; text-align: center; border: 0}

.board_name{padding: 50px 40px; border-bottom: 1px solid #ddd; margin-bottom: 50px}
.board_name h2{font-weight: bold; font-size: 25px; margin-bottom: 20px;}
.board_name ul{display: flex; gap:40px;}
.board_name ul li{font-size: 16px; font-weight: 500; display: flex; gap:10px; color: #333}
.board_name ul li span{font-weight: 400; color: #999}
.board_name ul li b{font-weight: 500}

#bo_v_con{padding: 50px 40px; margin: 0}
#bo_v_con *{font-size: 16px; line-height: 150%; }

#bo_v_img img{margin: 0 auto 20px; display: block}




.line_list_style{border-top: 2px solid #111}
.line_list_style li{border-bottom: 1px solid #ddd}
.line_list_style li a{padding: 50px 40px; display: block; transition-duration: .5s; background: #fff}
.line_list_style li a:hover{background: #F8F8F8}
.line_list_style li a h3{font-size: 25px; color: #222; transition-duration: .5s}
.line_list_style li a:hover h3{color: #1B97D3}
.line_list_style li a p{font-size: 18px; color: #222; line-height: 150%; word-break: keep-all; margin-top: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap}
.line_list_style li a p.list_date{margin-top: 35px; font-size: 16px; opacity: .5}









.form_etc{text-align: right; font-size: 16px; margin-bottom: 15px}
.form_etc span{color: #1B97D3}







#bo_cate {margin-bottom:40px}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1; display: flex; gap:10px;}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;}
#bo_cate a {display:block;line-height:60px;padding:0px 20px;border-radius:60px;border:1px solid #DDD;color:#C0C0C0; font-size: 16px; transition-duration: .8s}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#0078FF;color:#fff; border-color: #0078FF}
#bo_cate #bo_cate_on {z-index:2;background:#0078FF;color:#fff;font-weight:bold;border:1px solid #0078FF;}


.review_top {margin-bottom:40px; display: flex;     justify-content: space-between;}
.review_top #bo_cate{margin: 0}


.review_top a.btn-example{line-height:60px;padding:0px 20px;border-radius:60px;border:1px solid #0078FF;color:#fff; font-size: 16px; transition-duration: .8s;
background: #0078FF}


.pop-layer {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height:100%;
  z-index: 10;
  background: rgba(0,0,0,0.8)
}


.pop-layer .pop-container {
  width: 100%; max-width: 650px;
  position: absolute; left: 50%; top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}



.pop_top{padding: 16px 24px; background: #0078FF}
.pop_top p{font-size: 20px; font-weight: 700; color: #fff; word-break: keep-all}
a.btn-layerClose {
  position: absolute; right: 24px; top:16px;
}




.pop_conts{padding: 30px 24px; max-height: 80vh; overflow-y: auto}
.pop_conts p{color: #7E7777; font-size: 14px; word-break: keep-all; line-height: 140%}



.pop_conts .form_in{margin-top: 30px}





.form_in ul li .flex_li{display: flex; gap:20px 10px; flex-wrap: wrap;}

.form_in ul li .flex_li .box{width: calc(50% - 5px)}
.form_in ul li .flex_li .box p{font-size: 400; font-size: 14px}


.form_in ul li .flex_li .box.w100{width: 100%}
.form_in ul li .flex_li .box.w33{width: calc(33.33% - 6.66px)}


.agree_box{border-radius: 10px;
background: #F9F9F9; height: 160px; padding: 20px; overflow-y: auto}

.form_in ul li .agree_box p{font-size: 14px; color: #7E7777}