.sub_title .content,.sub_title .bg{height: 830px; width: 100%;}
.sub_title .bg{overflow: hidden;}
.sub_title .bg img{height: 100%;}
.sub_title .inner{position: absolute; top: 100px; left: 0; width: 100%; height: 730px;}
.sub_title .inner .txt{position: absolute; top: 24%; left: 0; width: 100%;}
.sub_title .inner .txt p{font-weight: 500; padding-top: 16px; font-size: 19px; color: #fff; opacity: 0.7; text-transform: uppercase;}
.sub_title .inner .txt h1{font-size: 70px; color: #fff; font-weight: 600; line-height: 1;}
.sub_title .inner .txt h4{color: #fff; font-weight: 500; font-size: 36px; margin-bottom: 80px;}
.sub_title .slide_page{position: absolute; right: 80px; top: 50%; transform: translateY(-50%);}
.sub_title .slide_page span{display: block; position: relative; width: 5px; height: 5px; background-color: #fff; border-radius: 50%;}
.sub_title .slide_page li{padding: 30px 0;}
.sub_title .slide_page .on span::before{content: ""; width: 35px; height: 35px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: rgba(255, 255, 255, 0.18);}
.sub_title .scroll{position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px;
  animation-name: scroll; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite;}

@keyframes scroll {
  from {bottom: 45px;}
  to {bottom: 30px;}
}

.sub_title{margin-bottom: 140px;}
.sub_menu{padding: 36px 0 30px 0;}
.sub_menu .depth01{display: flex; justify-content: space-between; font-size: 20px; text-transform: uppercase;}
.sub_menu .left{position: relative;}
.sub_menu .left .rep{font-weight: bold; cursor: pointer; border-bottom: 2px solid #333; padding-bottom: 6px; position: relative; top: -6px;}
.sub_menu .left .rep span{display: inline-block; width: 14px; margin-left: 24px; position: relative; top: -2px;}
.sub_menu .left .depth02{display: none; width: 130px; position: absolute; left: 50%; transform: translateX(-50%); top: 35px; border: 1px solid #ddd; background-color: rgba(255, 255, 255, 0.8); z-index: 5;}
.sub_menu .left .depth02 li{font-size: 17px; border-bottom: 1px solid #ddd;}
.sub_menu .left .depth02 li.on{background-color: #f0f0f0;}
.sub_menu .left .depth02 li:hover{background-color: #f0f0f0;}
.sub_menu .left .depth02 li a{width: 100%; height: 100%; display: block; padding: 7px 16px; background-color: #fff;}
.sub_menu .left .depth02 li:last-child{border-bottom: 0;}
.sub_menu .depth03{display: flex; font-size: 18px; word-break: keep-all;}
.sub_menu .depth03 li{padding: 0 12px;}
.sub_menu .depth03 li.on{font-weight: bold;}

.sub_title .scroll{display: none;}

.sub_tab{margin-bottom: 180px;}
.sub_tab ul{display: flex; /* border: 1px solid #e5e5e5; */ background-color: #f8f8f8;}
.sub_tab ul>li{width: 33.333%; font-size: 18px; cursor: pointer; text-align: center; border-right: 2px solid #fff;}
.sub_tab ul>li:hover{background-color: #4ca9df; color: #fff;}
.sub_tab ul>li:last-child{border-right: 0;}
.sub_tab ul>li.on{background: linear-gradient(90deg,#4ca9df, #292e91); color: #fff;}
.sub_tab ul>li a{display: block; width: 100%; height: 100%; padding: 16px;}

.small_title{margin-bottom: 14px;}
.small_title span b{font-size: 20px; line-height: 1; text-transform: uppercase;}
.small_title span i{display: inline-block; width: 16px;}
.small_title span i img{object-fit: contain;}

.overview{padding-bottom: 140px;}
.txt_content{display: flex;}
.txt_content>li:nth-child(1){width: 550px;}
.txt_content>li:nth-child(2){width: calc(100% - 550px);}
h2.common{font-size: 58px; font-weight: 600; line-height: 1;}
.txt_content p{font-size: 18px; line-height: 1.9;}

.overview.o02{background-color: #f8f9fc; padding: 140px 0;}
.overview.o02 .content{display: flex;}
.overview.o02 .content li{width: 33.333%; padding: 0 80px; text-align: center;}
.overview.o02 .content li .txt{padding-top: 40px;}
.overview.o02 .content li .txt h6{font-size: 24px; margin-bottom: 14px;}
.overview.o02 .content li .txt p{line-height: 1.6; color: #555;}
.overview.o02 .txt_content{margin-bottom: 90px; padding-top: 60px;}

.overview.o02 .mis{width: 100%; font-size: 32px; text-align: center; padding: 24px; text-transform: uppercase; border-radius: 100px;}
.overview.o02 .mis p span{padding-right: 10px; font-size: 32px; display: block; width: 100%; padding-bottom: 5px; font-weight: 300;}
.overview.o02 .mis.top_content{background-color: #4ca9df; font-weight: bold; color: #fff; /* margin-bottom: 100px; */}
.overview.o02 .mis.bot_content{background-color: #292e91; font-size: 36px;  font-weight: bold; color: #fff; /* margin-top: 100px; */ margin-bottom: 60px;}
.overview.o02 .mid_content{width: 300px; margin: 0 auto;}

.greeting{padding-bottom: 60px;}
.greeting .pic{margin-bottom: 120px;}
.greeting .txt_content p{font-size: 20px;}
.greeting .txt_content p i{font-weight: bold;}
.greeting p b{font-size: 30px; line-height: 1.7; margin-bottom: 40px; display: block;}
.greeting .sign{text-align: right; width: 100%; display: block; margin-top: 80px;}
.greeting .sign i{font-size: 24px; font-weight: 600; margin-left: 8px;}
.greeting p .icon{width: 40px; display: inline-block;}
.greeting p .icon.left{margin-right: 6px;}
.greeting p .icon.right{position: relative; top: 2px; margin-left: 4px;}
.needle_deco{position: absolute; bottom: 0; width: 400px;}

.ceo_g br{display: none;}

h3.common{line-height: 1.4; font-size: 48px; font-weight: 300; margin-bottom: 80px;}
h3.common span{font-size: 50px; font-weight: 600;}
/* .company.c01{background-color: #f8f9fc; padding: 140px;} */
.company.c01 .present{display: flex; flex-wrap: wrap; margin: -40px;}
.company.c01 .present li{width: 33.333%; padding: 40px;}
.company.c01 .present li .inner{border: 15px solid #f5f5f5; box-sizing: border-box; padding: 30px 40px;}
.company.c01 .present li .inner .icon{width: 80px;}
.company.c01 .present li .inner .txt{padding-top: 85px; text-align: right;}
.company.c01 .present li .inner .txt h5{font-size: 70px; font-weight: 400; line-height: 1;}

.company.c02{padding-top: 140px;}
.company.c02 .content{border-top: 2px dashed #e9e9e9; padding-top: 120px;}
.history_wrap>ul{display: flex; flex-wrap: wrap; position: relative;}
.history_wrap>ul::-webkit-scrollbar {
    display: none;
}
.history_wrap>ul>li{width: 50%;}
.sticky{position: sticky; top: 0; height: 100vh; width: 100%;}
.sticky .pic{width: 100%; height: 100%;}
.sticky .pic img{height: 100%;}
.history{padding-left: 60px;}
.history .inner{display: flex; border-bottom: 1px solid #eeeeee; padding: 40px 0;}
.history .inner:last-child{border-bottom: 0;}
.history .inner .year{font-size: 40px; padding-right: 60px; line-height: 1; font-weight: bold; color: #d5d5d5; padding-top: 10px;}
.history .inner .detail li{padding: 15px 0; font-size: 18px; line-height: 1.7; position: relative; padding-left: 20px;}
.history .inner .detail li i{display: inline-block; width: 5px; height: 5px; background-color: #4ca9df; position: absolute; left: 0; top: 25px;}

.award_wrap{padding-top: 80px; width: 100%; overflow: hidden;}
.award_wrap>ul{display: flex;}
.award_wrap>ul li{width: 16.666%; padding: 20px;}

.certi .content>div>ul{display: flex; flex-wrap: wrap; margin: -24px -16px;}
.certi .content>div>ul li{width: 20%; padding: 24px 16px;}
.certi .content>div>ul .pic{background-color: #f5f5f5; width: 100%; padding-bottom: 141.4%; position: relative;}
.certi .content>div>ul .pic img{width: calc(100% - 40px); height: calc(100% - 40px); object-fit: cover; object-position: center; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.certi .content>div>ul li p{padding-top: 10px; text-align: center; display: none;}
.certi h4{font-size: 40px; padding-bottom: 30px;}
.certi .content>div:last-child{padding-top: 120px; margin-top: 120px; border-top: 2px dashed #e9e9e9;}

.tech .small_title{padding-left: 4px;}
.tech h2.common{line-height: 1.3; position: relative;}
.tech .txt_content .pic{margin-bottom: 40px;}
.tech .txt_content p b{font-size: 22px; line-height: 1.8; display: initial;}
.tech.t02{background-color: #f8f9fc; padding: 140px 0; margin-top: 120px;}
.tech .rimit{display: flex; margin: -40px; flex-wrap: wrap;}
.tech .rimit li{width: 33.333%; padding: 40px; text-align: center;}
.tech .rimit li .pic{width: 100%;}
.tech .rimit li .txt{padding-top: 28px;}
.tech .rimit li .txt h6{font-size: 20px; font-weight: 500; margin-bottom: 10px;}
.tech .rimit li .txt p{line-height: 1.7;}

h4.common{font-size: 40px; font-weight: 600; padding-bottom: 60px;}

.tech.t03{padding-top: 140px;}

.tech.t03 .pic.circle{width: 100%; padding-bottom: 100%; margin-top: 40px; margin-bottom: 0; background-color: #f8f9fc; position: relative; border-radius: 50%;}
.tech.t03 .pic.circle img{position: absolute; width: 70%; top: 50%; left: 50%; transform: translate(-50%,-50%);
    animation-name: patch; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}


    @keyframes patch {
        from {top: 52%;}
        to {top: 50%;}
      }


.tech.t03 .txt_content>li:nth-child(2){padding-left: 150px; width: calc(90% - 550px);}
/* .tech.t03 .txt_content .txt{padding-top: 70px;} */
.tech.t03 .txt_list{padding-top: 40px; font-size: 18px; line-height: 1.7;}
.tech.t03 .txt_list i{position: absolute; left: 0; top: 4px; background: url(../img/sub/check.png)no-repeat; background-size: contain; width: 20px; height: 20px; display: inline-block;}
.tech.t03 .txt_list li{position: relative; padding-left: 30px; margin-bottom: 6px; padding-bottom: 5px; font-size: 22px; /* border-bottom: 1px solid #e5e5e5; */ font-weight: 600; color: #292e91;}
.tech.t03 .txt_list li:last-child{border-bottom: 0;}
.tech.t03 .txt_content p b{font-size: 21px;}
.tech.t03 .txt_content p b.clip_gd{font-size: 22px;}
.tech.t03 .txt_content{align-items: center;}


.tech.t02 .full{width: 100%; text-align: center; background-color: #fff; padding: 40px; margin-top: 60px; line-height: 2; font-size: 18px; border: 12px solid #f0f0f0;}
.tech.t02 .full i{display: inline-block; text-align: center; font-size: 18px; width: 24px; height: 24px; background-color: #292e91; color: #fff; line-height: 24px; border-radius: 50%; position: relative; top: -1px;}
.tech.t02 .full span{display: block; font-weight: 600;}
.tech.t02.other .full p{padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px dashed #e9e9e9;}
.tech.t02.other .full p:last-child{padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
.tech.t02.other .full span{font-size: 21px;}
.tech.t02.other .full span i{margin-right: 3px;}
.tech.t02.bg_white{background-color: #fff; margin-top: 40px; padding-bottom: 0;}
.tech.other .rimit{margin: -20px;}
.tech.other .rimit li{position: relative; padding: 20px;}

.tech .grid_4 li{width: 25%;}

.tech.other02 .rimit li{width: 20%;}
.tech.other .rimit li::before{content: ""; opacity: 0.3; width: 13px; height: 22px; background: url(../img/sub/sub_arrow_right.png)no-repeat; position: absolute; top: 46%; right: -7px;}
.tech.other .rimit li:last-child::before{content: none;}
.txt_content h5{font-size: 32px; padding-bottom: 12px;}
.tech.other02 .rimit li::before{top: 36%;}
.tech.other03 .rimit li{position: relative;}
.tech.other03 .rimit li::before{content: ""; opacity: 0.2; width: 18px; height: 32px; background: url(../img/sub/sub_arrow_right01.png)no-repeat; background-size: contain; position: absolute; top: 50%; right: -10px;}
.tech.other03 .rimit li:last-child::before{content: none;}


.tech.t04{padding-top: 120px;}
.tech.t04 .advant{display: flex; flex-wrap: wrap; margin: -40px; padding-top: 80px;}
.tech.t04 .advant li{width: 33.333%; padding: 40px;}
.tech.t04 .advant li .inner{border: 15px solid #f5f5f5; box-sizing: border-box; padding: 30px 40px; height: 100%;}
.tech.t04 .advant li .inner .icon{width: 100px;}
.tech.t04 .advant li .inner .txt{padding-top: 44px; text-align: right;}
.tech.t04 .advant li .inner .txt p{font-size: 20px; line-height: 1.6;}
.tech.t04 .advant li .inner .txt i{font-size: 40px; font-weight: bold; color: #ddd;}

.tech.none .rimit li::before{display: none;}


.tech.t04 .rimit li .pic{position: relative;}
.tech.t02 .rimit li .pic i{color: #fff; font-size: 24px; font-weight: bold; position: absolute; top: 50px; left: 70px;}

.tech.t03 .tech_other{display: flex; margin: -40px; padding-top: 60px;}
.tech.t03 .tech_other li{width: 33.333%; padding: 40px; }
.tech.t03 .tech_other li .inner{border: 15px solid #f5f5f5; padding: 30px; height: 100%;}
.tech.t03 .tech_other li .inner h6{ font-size: 28px;}
.tech.t03 .tech_other li .txt_inner{border-top: 2px dashed #e9e9e9; padding-top: 18px; margin-top: 14px;}

.tech.t03 .tech_other li .txt_inner p{font-size: 17px; padding-bottom: 4px; line-height: 1.7; position: relative; padding-left: 20px;}
.tech.t03 .tech_other li .txt_inner p i{display: inline-block; width: 5px; height: 5px; background-color: #4ca9df; position: absolute; left: 0; top: 10px;}


.coated_pic>ul{width: 100%; display: flex; flex-wrap: wrap;}
.coated_pic>ul>li{width: 33.333%;}

.lscr .content{margin-top: 160px; padding-top: 160px; border-top: 2px dashed #e9e9e9;}

.lab_pic{display: flex; justify-content: center; align-items: center; padding-top: 80px; text-align: center;}
.lab_pic02{display: flex; margin: -20px; flex-wrap: wrap;}
.lab_pic02 li{padding: 20px; width: 50%;}
.lab_pic .vs{padding: 40px; font-size: 36px; font-weight: bold;}
.lab_pic .txt{padding-top: 20px;}
.lab_pic .txt i{font-size: 15px;}
.lab_pic .txt p{font-size: 20px; font-weight: 500; padding-top: 4px;}
.lab_pic .txt.other{position: relative; left: -70px;}

.lab_btn.rot_btn .btn>span{width: 240px; height: 80px;}
.lab_btn.rot_btn .btn> span> i{font-size: 15px;}

.odm{width: 100%; background-position: center; background: url(../img/sub/odm.png)no-repeat; background-size: cover; padding: 100px 0;}
.odm .content .txt{text-transform: uppercase; /* text-align: center; */ line-height: 1;}
.odm .content .txt h6{color: #bbbbbb; font-size: 28px; padding-bottom: 13px;}
.odm .content .txt h2{font-size: 60px; margin-bottom: 40px;}
.odm .content .txt p{line-height: 1.8; font-size: 18px; color: #777777; text-transform: none;}

.odm02{padding: 140px 0;}
.odm02 h4{padding-bottom: 20px;}
.odm02 p{line-height: 1.8; font-size: 18px; color: #777777;}
.odm02 .pic{margin-top: 80px;}

.odm03{background-color: #f8f9fc;}
.odm03 .qc_system{width: 100%; display: flex; margin: -10px; padding-top: 80px; flex-wrap: wrap;}
.odm03 .qc_system li{width: calc(100%/5); padding: 10px; height: 100%;}
.odm03 .qc_system .inner{border: 12px solid #f3f3f3; background-color: #fff; padding: 20px; min-height: 173px; display: flex; flex-direction: column; justify-content: space-between;}
.odm03 .qc_system .inner h1{font-weight: bold; font-size: 36px; line-height: 1;}
.odm03 .qc_system .inner h1 span{font-size: 44px; padding-right: 2px;}
.odm03 .qc_system .inner p{line-height: 1.4; text-align: right; padding-bottom: 4px; color: #444; font-size: 19px;}

.cdmo{background-color: #f8f9fc; padding: 140px 0;}
.cdmo .flex_box{display: flex; justify-content: space-between;}
.cdmo .flex_box .rot_btn{margin-top: 26px;}
.cdmo .full{width: 100%; text-align: center; background-color: #fff; padding: 40px; line-height: 2; font-size: 18px; border: 12px solid #f0f0f0;}
.cdmo .cdmo_pic{width: 100%; padding-top: 80px;}
.cdmo .cdmo_pic>ul{display: flex; margin: -10px;}
.cdmo .cdmo_pic>ul li{text-align: center;}
.cdmo .cdmo_pic>ul li .pic{padding: 10px;}
.cdmo .cdmo_pic>ul li p{padding-top: 8px; font-size: 18px;}

.esg{display: flex; margin: -20px; flex-wrap: wrap;}
.esg li{width: 25%; padding: 20px;}
.esg.other li{width: 33.333%;}

.esg li .inner{border: 15px solid #f5f5f5; background-color: #fff; box-sizing: border-box; padding: 20px 24px;}
.esg li .inner .num{font-size: 50px; font-weight: bold; line-height: 1;}
.esg li .inner .txt{padding-top: 85px; text-align: right;}
.esg li .inner .txt h5{font-size: 70px; font-weight: 400; line-height: 1;}

.esg li .inner .txt h6{font-size: 20px; padding-bottom: 12px;}
.esg li .inner .txt p{line-height: 1.6;}

.esg.other li .inner{padding: 40px 26px;}


.esg_table{width: 100%;}
.esg_table table{width: 100%;}
.esg_table table td{background-color: #fff; border: 1px solid #ddd; text-align: center; font-size: 18px; padding: 14px;}
.esg_table table td.gray{background-color: #f9f9f9;}
.esg_table p{margin-top: 14px; display: block; text-align: right;}
.esg_table span{font-size: 22px; font-weight: bold;}

.tech.t02 .full.esg_pic{padding-left: 0; padding-right: 0;}
.tech.t02 .full.esg_pic img{width: 80%;}


.cyber .full{text-align: left;}
.cyber_title{padding-top: 60px; font-size: 24px; font-weight: bold; padding-bottom: 14px;}
.cyber_s_title{line-height: 1.8; padding-bottom: 24px;}
.cyber_s_title p{font-size: 18px;}
.cyber .full .list li{position: relative; padding-left: 16px;}
.cyber .full .list li i{width: 5px; height: 5px; background-color: #4ca9df; display: inline-block; position: absolute; left: 0; top: 14px;}
.cyber .call{display: flex; flex-wrap: wrap;}
.cyber .call li{width: 50%;}
.cyber .call li>div span{font-weight: bold;}
.cyber .call li:nth-child(1)>div.top{border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding-bottom: 20px;}
.cyber .call li:nth-child(2)>div.top{border-bottom: 1px solid #e5e5e5; padding-bottom: 20px; padding-left: 40px;}
.cyber .call li:nth-child(1)>div.bot{border-right: 1px solid #e5e5e5; padding-top: 20px;}
.cyber .call li:nth-child(2)>div.bot{padding-top: 20px; padding-left: 40px;}
.cyber .call li>div.bot p{position: relative; padding-left: 80px;}
.cyber .call li>div.bot p span{position: absolute; left: 0;}
.cyber .call li>div.top i{font-weight: bold;}
.cyber .lab_info{display: flex; flex-wrap: wrap; margin: -20px;}
.cyber .lab_info>li{width: 50%; padding: 0 20px;}
.cyber .lab_info .full{margin-top: 0;}
.lab_info h5{font-size: 32px; padding-bottom: 16px;}
.lab_info .full h6{padding-bottom: 6px; font-size: 20px;}

.ed_logo{width: 220px;}

.brand.b01{width: 100%; padding: 140px; padding-left: 8%; height: 100vh; background: url(../img/sub/brand01.jpg)no-repeat; background-size: cover; background-position: center;}
.brand .logo_txt{width: 420px; margin-top: 36px;}
.brand .txt p{font-size: 20px; line-height: 1.8; padding-top: 46px;}
.brand h2.common{font-size: 88px;}
.brand>ul.content{display: flex; flex-wrap: wrap; align-items: center;}
.brand>ul.content>li{width: 50%;}
.brand>ul.content>li .txt{width: 580px; max-width: 100%; margin: 0 auto;}
.brand>ul.content>li .txt span{font-size: 20px; font-weight: bold; color: #ccc;}
.brand>ul.content>li .txt h5{font-size: 62px; line-height: 1.2;}


.recruit{background: url(../img/sub/recruit_bg.jpg)no-repeat; background-position: center; display: flex; align-items: center; width: 100%; height: 930px; padding: 140px 0;}
.recruit h3{margin-bottom: 50px;}
.recruit p{font-size: 19px; line-height: 1.8;}

.inquiry{background-color: #f8f9fc; padding: 140px 0;}
.inquiry .content{margin: -20px;}
.inquiry .content li{padding: 30px 0; display: flex;}
.inquiry .content .in_txt{width: 50%; padding: 0 30px;}
.inquiry .content .in_txt.textarea{width: 100%;}
.inquiry .content .input_wrap{position: relative; padding-left: 100px;}

.inquiry .content .inquiry_radio_wrap{display: flex; gap: 1rem; align-items: flex-start; }
.inquiry .content .inquiry_radio{display: flex; gap: 1rem; flex-wrap: wrap;}
.inquiry .content .inquiry_radio_wrap__label_tit{align-self: flex-start; flex-shrink: 0;}




.inquiry .content .input_wrap p{position: absolute; top: 13px; left: 0; font-weight: 600; font-size: 17px;}
.inquiry .content .input_wrap p span{color: #4ca9df; padding-right: 5px; position: relative; top: 3px;}
.inquiry .content .input_wrap input{width: 100%; border: 1px solid #ddd; background-color: #fff; height: 50px; padding: 0 10px;}
.inquiry .content .input_wrap textarea{width: 100%; border: 1px solid #ddd; resize: none; height: 300px; padding: 10px; line-height: 1.6;}
.inquiry .content .input_wrap input:focus{outline: 1px solid #4ca9df;}
.inquiry .content .input_wrap textarea:focus{outline: 1px solid #4ca9df;}
.inquiry .inner .warning{display: block; text-align: right; font-size: 15px; border: 12px solid #f0f0f0; background-color: #fff; padding: 30px 30px; margin-bottom: 70px; line-height: 1.8;}
.inquiry .inner .warning p{font-weight: bold; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5;}
.inquiry .rot_btn{margin-top: 20px; cursor: pointer;}
.inquiry .rot_btn .btn>span{background: linear-gradient(90deg,#4ca9df, #292e91);}
.inquiry .rot_btn .btn> span> i{color: #fff;}
.inquiry .rot_btn .btn> span::before{background-color: #fff;}
.inquiry .rot_btn .btn> span::after{background-color: #fff;}
.agree_info{background-color: #f9f9f9; margin-top: 20px; padding: 20px; height: 250px; overflow-y: auto; display: none;}
.agree_info p{font-weight: normal !important; border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0!;}
.agree_info::-webkit-scrollbar {
  width: 5px;
}
.agree_info::-webkit-scrollbar-thumb {
  background: #ccc;
}

.check_line input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.check_line input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}
.check_line input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #ccc;
  box-sizing: border-box;
  border-radius: 5px;
}
.check_line input[type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;  
  background: url(../img/sub/check_icon.png)no-repeat #4ca9df;  
  background-position: center center;
  border-radius: 5px;
}

.check_line input[type="checkbox"] + label span {
  font-weight: 400;
}


.map{background-color: #f8f9fc; padding: 140px 0;}
.map .content{display: flex; flex-wrap: wrap; margin: -40px -20px;}
.map .content>li{width: 50%; padding: 40px 20px;}
.map .content>li:nth-child(1){width: 100%;}
.map .content .map_img{border-bottom: 1px solid #ddd;}
.map .content .map_info{width: 100%; background-color: #fff; padding: 40px; margin-top: 40px; line-height: 2; font-size: 18px; border: 12px solid #f0f0f0;}
.map .content .map_info h6{font-size: 20px; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5;}
.map .content .map_info p{margin-bottom: 5px; position: relative; padding-left: 110px; line-height: 1.6;}
.map .content .map_info p:last-child{margin-bottom: 0;}
.map .content .map_info span{font-weight: bold; color: #aaa; width: 110px; display: inline-block; position: absolute; left: 0;}

.priv{background: linear-gradient(90deg,#4ca9df, #292e91); padding: 200px 0 140px 0;}
.priv h6{font-size: 48px; font-weight: bold; color: #fff; text-align: center; padding-bottom: 40px;}
.priv .content{background-color: #fff; border: 15px solid #f5f5f5; min-height: 90vh; padding: 80px;}


.mo_btn{display: none;}
.cdmo .mo_btn{text-align: center;}

:lang(en) .cyber .call li>div.bot p{padding-left: 175px;}
:lang(en) h3.common{line-height: 1.2;}

/* ********************************************* *
 * 1660px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   

  .sub_title .content, .sub_title .bg{height: 680px;}
  .sub_title .inner{height: 580px;}
  .sub_title .inner .txt h1{font-size: 62px; line-height: 1.1;}
  .sub_title .inner .txt h4{font-size: 32px;}

  .odm{background: #f8f9fc; height: auto !important;}
  .odm_mo_pic{display: block !important;}

  .recruit{height: auto;}

  .tech.t02 .full.esg_pic img{width: 100%;}

  
}
/* ********************************************* *
 * 1440px
 * ********************************************* */
 @media screen and (max-width: 1440px){
  

  .txt_content>li:nth-child(1){width: 400px;}
  .txt_content>li:nth-child(2){width: calc(100% - 400px);}

  .ceo_g br{display: block;}

  .company.c01 .present{margin: -20px;}
  .company.c01 .present li{padding: 20px;}

  .history .inner .year{padding-right: 30px;}
  
  h3.common{font-size: 38px;}
  h3.common span{font-size: 42px;}
  .company.c01 .present li .inner .txt h5{font-size: 60px;}
  .company.c01 .present li .inner .txt{padding-top: 70px;}
  .company.c01 .present li .inner{padding: 30px;}

  .tech.t03 .tech_other{margin: -20px;}
  .tech.t03 .tech_other li{padding: 20px;}

  .sample_patch .txt_content>li{width: 50% !important;}

  .brand .logo_txt{font-size: 360px;}
  .brand>ul.content>li .txt h5{font-size: 48px;}
  .brand .txt p{font-size: 18px;}

  
}
/* ********************************************* *
 * 1300px
 * ********************************************* */
 @media screen and (max-width: 1300px){

  .overview.o02 .content li{padding: 0 30px;}

  .certi .content>div>ul li{width: 25%;}
  .tech.t04 .advant li .inner .txt{padding-top: 0;}
  .tech.t04 .advant li{padding: 20px;}
  .tech.t04 .advant{margin: -20px;}
  .tech.t04 .advant li .inner .txt p{font-size: 18px;}
  .tech.t04 .advant li .inner .txt p br{display: none;}
  .tech.t03 .txt_content>li:nth-child(2){padding-left: 20px;}

  .brand>ul.content>li .txt{padding-left: 20px; padding-right: 20px;}
  .brand .txt p{text-align: left;}

 }
 /* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px){
 

  .sub_title .content, .sub_title .bg{height: 550px;}
  .sub_title .inner{height: 470px; top: 80px;}
  .sub_title .inner .txt h4{font-size: 32px; margin-bottom: 20px;}
  .sub_title .inner .txt h1{font-size: 50px;}

  
  .txt_content{flex-wrap: wrap;}
  .txt_content>li{width: 100% !important;}
  .txt_content>li:nth-child(2){padding-top: 40px;}

  .overview.o02 .mid_content{width: 220px;}
  .overview.o02 .mis p span{font-size: 24px;}
  .overview.o02 .mis{font-size: 26px; padding: 18px;}
  .overview.o02 .mis.bot_content{font-size: 30px;}
  .overview.o02 .mid_content{width: 180px;}

  .ceo_g br{display: none;}

  
  .history_wrap>ul>li{width: 100%;}
  .sticky{position: relative; height: 300px;}
  .history{padding-left: 0;}

  .tech h2.common br{display: none;}
  .tech .rimit{margin: -20px;}
  .tech .rimit li{padding: 20px;}

  .tech.other02 .rimit li{width: 33.333%;}
  .tech.other02 .rimit li:nth-child(3):before{display: none;}
  
  .lab_btn{margin-top: 60px; text-align: center;}
  .mo_btn{display: block;}
  .pc_btn{display: none;}

  .cyber .lab_info{flex-wrap: wrap;}
  .cyber .lab_info>li{width: 100%;}
  .cyber .lab_info>li:nth-child(2){margin-top: 40px;}

  .lab_pic .txt.other{left: -10%;}

  .odm .content .txt h2{font-size: 48px; margin-bottom: 30px;}
  .odm .content .txt p,.odm02 p{font-size: 17px;}
  .odm02 p br{display: none;}

  .odm03 .qc_system li{width: calc(100%/4);}
  .odm03 .qc_system .inner p{font-size: 17px;}
  .odm03 .qc_system .inner h1{font-size: 28px;}
  .odm03 .qc_system .inner h1 span{font-size: 34px;}

  .map .content>li{width: 100%;}
  .map .content .map_info{padding-left: 20px; padding-right: 20px;}

  .cyber .lab_info .full{min-height: auto !important;}

 }

  /* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 1024px){

  .company.c01 .present li{width: 50%;}
  .company.c01 .present li .inner .txt{padding-top: 50px;}

  .certi .content>div>ul li{width: 33.333%;}

  .tech .rimit li{display: flex; width: 100%; align-items: center;}
  .tech .rimit li .pic{width: 40%;}
  .tech .rimit li .txt{width: 60%; text-align: left; padding-top: 0; padding-left: 20px;}
  
  .tech .rimit01{margin: -10px;}
  .tech .rimit01 li{width: 33.333%; padding: 10px;}
  .tech .rimit li .pic{width: 100%;}

  .tech.t03 .tech_other{flex-wrap: wrap; padding-top: 40px;}
  .tech.t03 .tech_other li{width: 100%;}
  .tech.other03 .rimit li{width: 33.333%;}
  .tech.other03 .rimit li .pic{width: 100%;}
  .tech.other02 .rimit li{display: block;}
  .tech.other02 .rimit li .pic{width: 100%;}
  .tech.other02  .rimit li .txt{width: 100%; padding-left: 0; text-align: center;}

  .txt_content h5{font-size: 26px; padding-bottom: 5px; line-height: 1.6;}
  .tech.tech_process .rimit li{width: 33.333%; display: block;}
  .tech.tech_process .rimit li .pic{width: 100%;}
  .tech.tech_process .rimit li .txt{padding-left: 0; text-align: center; width: 100%;}

  .lab_btn.rot_btn .btn>span{width: 190px; height: 65px;}
  .rot_btn .btn> span> i{margin-left: 20px;}
  .rot_btn .btn> span::after{right: 20px;}
  .rot_btn .btn> span::before{right: 26px;}

  .tech.t04 .advant li .inner{padding: 16px;}  
  .tech.t04 .advant li .inner .icon{width: 80px;}

  .sample_patch .txt_content>li{width: 100% !important; padding-left: 0 !important; padding-top: 0;}
  .sample_patch .txt_content{flex-wrap: wrap; flex-direction: column-reverse;}
  .sample_patch .txt_content>li:nth-child(1){padding-top: 30px;}
  .sample_patch h4.common{padding-bottom: 20px !important;}

  .odm .content .txt p br{display: none;}

  
  .odm03 .qc_system li{width: calc(100%/3);}
  .cdmo .full p br{display: none;}
  .cdmo .full{padding: 24px; line-height: 1.7;}
  .cdmo .cdmo_pic>ul{flex-wrap: wrap;}
  .cdmo .cdmo_pic>ul li{width: 50%;}

  .inquiry .content .in_txt{padding: 0 16px;}
  .cyber .full p br{display: block;}

  :lang(jp) .cyber .full .list li i,:lang(cn) .cyber .full .list li i{top: 11px;}

 }

   /* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 960px){
 
  
  .overview.o02 .content{flex-wrap: wrap; margin: -20px 0;}
  .overview.o02 .content li{width: 100%; display: flex; padding: 20px 0; align-items: center;}
  .overview.o02 .content li .txt{padding-top: 0; text-align: left; padding-left: 20px;}
  .overview.o02 .content li .icon{max-width: 150px;}

  .sub_tab ul>li{font-size: 16px;}
  
  .tech.t04 .advant li{width: 50%;}
  
  .lab_pic .txt i{font-size: 14px;}
  .lab_pic .txt p{font-size: 16px;}
  .lab_pic .vs{padding: 16px; font-size: 28px;}

  .cyber .call li{width: 100%;}
  .cyber .call li:nth-child(1)>div.top{border-right: 0;}
  .cyber .call li:nth-child(1)>div.bot{border-right: 0;}
  .cyber .call li:nth-child(2)>div.top{padding-left: 0;}
  .cyber .call li:nth-child(2)>div.bot{padding-left: 0;}
  .cyber .call li:nth-child(2){padding-top: 40px;}

  
  .brand>ul.content>li{width: 100%;}
  .reverse{flex-direction: column-reverse;}
  .brand>ul.content>li .txt{padding-top: 60px; padding-bottom: 80px; width: 100%;}

 }


   /* ********************************************* *
 * 760px
 * ********************************************* */
 @media screen and (max-width: 760px){
  .sub_tab ul{flex-wrap: wrap;}
  .sub_tab ul>li{width: 100%; border-bottom: 2px solid #fff; border-right: 0;}

  .sub_menu .left{display: none;}

  .greeting p b{font-size: 24px;}
  .greeting p .icon{width: 24px;}

  .greeting p .icon{display: none;}
  .greeting .pic{margin-bottom: 60px; height: 280px;}
  .greeting .pic img{height: 100%;}

  .history .inner .detail li{padding-top: 10px; padding-bottom: 10px;}
  h3.common br{display: none;}
  .history .inner .detail li i{top: 21px;}
  .company.c01 .present{margin: -10px;}
  .company.c01 .present li{padding: 10px;}

  h3.common{font-size: 28px; margin-bottom: 40px;}
  h3.common span{font-size: 32px;}

  .certi .content>div>ul{margin-left: -10px; margin-right: -10px;}
  .certi .content>div>ul li{padding-left: 10px; padding-right: 10px;}
  .certi .content>div>ul .pic img{width: calc(100% - 20px); height: calc(100% - 20px);}
  
  
  .tech .rimit li{display: block;}
  .tech .rimit li .pic{width: 100%;}
  .tech .rimit li .txt{width: 100%; text-align: center; padding-top: 20px; padding-left: 0;}

  .tech .txt_content p b{line-height: 1.7;}
  .tech .txt_content p br{display: none;} 

  .tech.other03 .rimit{margin: -10px;}
  .tech.other03 .rimit li{padding: 10px;}
  .tech.other03 .rimit li::before{width: 10px; right: -6px;}

  .lab_pic02{margin: -10px;}
  .lab_pic02 li{padding: 10px;}

  .recruit p{font-size: 17px;}
  .recruit h3.common{font-size: 32px;}

  .inquiry .content li{flex-wrap: wrap;}
  .inquiry .content .in_txt{width: 100%; padding: 10px 20px;}
  .inquiry .inner .warning p br{display: none;}
  .inquiry .content li{padding: 0;}

  .brand.b01{padding: 80px 20px; height: auto; background-position: left;}
  .brand .txt p br{display: none;}

  .brand .logo_txt{width: 320px;}

 }

     /* ********************************************* *
 * 690px
 * ********************************************* */
 @media screen and (max-width: 690px){

  .company.c01 .present li .inner .icon{width: 70px;}
  .company.c01 .present li .inner .txt p{font-size: 14px;}
  .company.c01 .present li .inner .txt h5{font-size: 42px;}
  .company.c01 .present li .inner{height: 100%;}

  .certi .content>div>ul li{width: 50%;}
  
  .tech.t04 .advant li{width: 100%;}

  .tech .rimit01 li{width: 100%;}

  .lab_pic02 li{width: 100%;}

  .odm03 .qc_system{margin: -5px;}
  .odm03 .qc_system li{width: calc(100%/2); padding: 5px;}

  .map .content .map_info p{padding-left: 0;}
  .map .content .map_info span{position: relative; width: 100%;}

  .recruit p br{display: none;}
  .recruit p span{width: 100%; display: block;}

  .check_line input[type="checkbox"] + label span{width: 100%; display: block; text-align: left; font-size: 14px;}
  .check_line input[type="checkbox"] + label{width: 100%;}

  .inquiry .inner .warning p{text-align: left;}
  
  .cyber_s_title p br{display: none;}

 }

    /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){

  .sub_title .inner .txt h1{font-size: 40px;}
  .sub_title .inner .txt h4{font-size: 24px;}
  .sub_title .content, .sub_title .bg{height: 420px;}
  .sub_title .inner{height: 340px;}
  .sub_title .bg img{object-position: center;}

  .sub_menu .depth03{overflow-x: auto; width: 100%; padding-bottom: 10px;}
  .sub_menu{padding-bottom: 20px; padding-top: 22px;}

  .sub_menu .depth03::-webkit-scrollbar {
    height: 5px;
  }
  ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      /* border-radius: 100px; */
  }
  ::-webkit-scrollbar-thumb {
      background-color: #fff;
      /* border-radius: 100px; */
  }
  ::-webkit-scrollbar-thumb {
      background: #ddd;
      box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
      /* border-radius: 100px; */
  }

  .sub_menu .right{width: 100%;}

  h2.common{font-size: 36px;}
  h4.common{font-size: 32px; padding-bottom: 40px;}
  :lang(en) h4.common{font-size: 28px;}
  .txt_content p{font-size: 16px !important; line-height: 1.8;}
  .greeting p b{font-size: 20px; line-height: 1.6; margin-bottom: 24px;}

  .overview.o02 .mis{font-size: 20px;}
  .overview.o02 .mis.bot_content{font-size: 25px; line-height: 1.1;}
  .overview.o02 .mis p span{font-size: 18px;}
  .overview.o02 .mid_content{width: 150px;}

  .overview.o02 .content li{display: block;}
  .overview.o02 .content li .icon{max-width: 100%; width: 300px; margin: 0 auto; margin-bottom: 10px;}
  .overview.o02 .content li .txt{width: 100%; padding-left: 0; text-align: center;}

  .sub_menu .depth03{font-size: 16px;}
  .txt_content>li:nth-child(2){padding-top: 30px;}
  .overview.o02 .txt_content{margin-bottom: 60px;}

  .company.c01 .present li{width: 100%;}
  .history .inner .detail li{font-size: 16px; padding-left: 16px;}
  .history .inner .detail li i{top: 20px;}
  .history .inner{flex-wrap: wrap;}
  .history .inner .year{width: 100%; font-size: 36px; padding-right: 0; padding-top: 0; padding-bottom: 4px;}
  .company.c01 .present li .inner .txt{padding-top: 10px;}
  .history .inner{padding: 24px 0;}
  .sub_title{margin-bottom: 100px;}

  .tech .txt_content p b{font-size: 17px;}
  .small_title span b{font-size: 16px;}
  .small_title{margin-bottom: 5px;}

  .tech.t03 .tech_other li .inner{padding-left: 20px; padding-right: 20px;}
  .tech.t03 .tech_other li .inner h6{font-size: 24px;}

  .coated_pic{margin-top: 30px !important;}
  .cyber .lab_info .full{padding: 30px 20px; font-size: 16px; min-height: 0 !important;}

  .coated_pic>ul>li{width: 50%;}
  .lab_info h5{font-size: 28px; padding-bottom: 10px;}

  .txt_content h5{font-size: 22px; padding-bottom: 0;}
  .tech.t03 .txt_content p b{font-size: 19px;}

  .lab_pic{flex-wrap: wrap;}
  .lab_pic li{width: 100%;}

  .lab_pic .txt.other{width: 100%; left: 0;}

  .odm .content .txt p,.odm02 p{font-size: 16px; font-size: 1.7;}
  .odm .content .txt h2{font-size: 40px;}

  .cdmo .cdmo_pic>ul li p{padding-top: 0; padding-bottom: 8px; font-size: 16px;}
  .cdmo .full{font-size: 15px; padding-left: 10px; padding-right: 10px;}

  .map .content .map_info p{font-size: 16px;}
  .map .content .map_info{padding-top: 20px; padding-bottom: 20px;}

  .recruit{padding-top: 100px; padding-bottom: 100px; background-position: 68%;}

  .inquiry .content .input_wrap{padding-left: 0;}
  .inquiry .content .input_wrap p{position: relative; top: 0; font-size: 16px; padding-bottom: 3px;}
  .inquiry .inner .warning{padding: 20px 14px;}



  .cyber_s_title p{font-size: 16px;}
  .cyber .call li>div.bot p{padding-left: 65px;}

  
  .cyber .call li:nth-child(1)>div.top{padding-bottom: 10px;}
  .cyber .call li:nth-child(1)>div.bot{padding-top: 10px;}
  .cyber .call li:nth-child(2)>div.top{padding-bottom: 10px;}
  .cyber .call li:nth-child(2)>div.bot{padding-top: 10px;}

  .esg_table table td{font-size: 16px; padding: 14px 4px; vertical-align: middle;}
  .esg_table span{font-size: 18px;}

  .sub_menu .depth03 li{padding-left: 10px; padding-right: 10px;}

  .tech.other .rimit{margin: -10px;}
  .tech.other02 .rimit li{width: 50%; padding: 10px;}
  .tech.other .rimit li::before{display: none;}

  .tech.other03 .rimit{margin-top: -20px; margin-bottom: -20px;}
  .tech.other03 .rimit li{width: 100%; padding-top: 20px; padding-bottom: 20px;}
  .tech.other03 .rimit li::before{right: auto; top: auto; bottom: -16px; transform: rotate(90deg); width: 18px;}

  .tech.tech_process .rimit li{width: 100%;}

  .ed_logo{width: 170px;}

  .brand .logo_txt{width: 250px;}
  .brand .rot_btn{margin-top: 40px;}
  .brand .txt p{padding-top: 24px;}


  :lang(en) .cyber .call li>div.bot p{padding-left: 0;}
  :lang(en) .cyber .call li>div.bot p span{width: 100%; position: relative; display: block;}

  :lang(jp) .greeting .sign i{display: block; padding-top: 4px;}

 }

     /* ********************************************* *
 * 440px
 * ********************************************* */
 @media screen and (max-width: 440px){

  .odm03 .qc_system li{width: 100%;}
  .brand>ul.content>li .txt h5{font-size: 42px;}
  ul#media_tab_list>li{width: 100% !important;}
  
}