/* 서브 공통 */ body * {margin:0;padding:0;font-family: "Manrope", "Pretendard", sans-serif;list-style:none;outline: 0} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} .inner{ width: 1560px; margin: 0 auto; } #header.s_header #logo a svg *#패스_62{fill: #dc741b} #header.s_header #logo a svg *#패스_61{fill: #dc741b} #sub .sub_visual{ height: 600px; width: 100%; position: relative; } #sub .sub_visual .s_img{ position: relative; width: 100%; height: 600px; overflow: hidden; z-index: -1; } #sub .sub_visual .s_img img{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-65%); } #sub .sub_visual .s_txt{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; padding: 100px 0; display:flex; align-items: flex-end; } #sub .sub_visual .s_txt .inner{ position: relative; } #sub .sub_visual .s_txt .wrap{ display: flex; flex-flow: column; gap: 30px; } #sub .sub_visual .s_txt .wrap strong{ font-size: 60px; font-weight: 700; color: #fff;letter-spacing: -0.02em; } #sub .sub_visual .s_txt .wrap p{ font-size: 24px; line-height: 1.5em; color:#FFFFFF; font-weight: 400; } #sub .sub_visual .s_txt .wrap p b{ font-weight: 600; } #sub .sub_visual .s_txt .wrap span{font-size: 24px;font-weight: 600;color: #FFFFFF} #sub .sub_visual .s_txt .loc{ position: absolute; right: 0; bottom: 0; } #sub .sub_visual .s_txt .loc > ul{ display:flex; align-items: center; gap: 20px; } #sub .sub_visual .s_txt .loc > ul > li{ display:flex; align-items: center; gap: 20px; position: relative; } #sub .sub_visual .s_txt .loc > ul > li:after{ content:""; display: block; width: 1px; height: 13px; background-color: rgba(255,255,255,0.3); } #sub .sub_visual .s_txt .loc > ul > li > button{ font-size: 18px; font-weight: 500; color:#FFFFFF; letter-spacing: -0.02em; display:flex; align-items: center; gap: 12px; } #sub .sub_visual .s_txt .loc > ul > li:last-child:after{ display: none; } #sub .sub_visual .s_txt .loc .sub_m{ position: absolute; left: 0; top: 100%; transform: translateY(20px); width: 180px; border-radius: 8px; border: 1px solid #C6C9CE; background-color: #fff; padding: 25px; display: none; } #sub .sub_visual .s_txt .loc .sub_m li{ margin-bottom: 20px; } #sub .sub_visual .s_txt .loc .sub_m li:last-child{ margin-bottom: 0; } #sub .sub_visual .s_txt .loc .sub_m li a{ font-size: 17px; color:#46494D; font-weight: 500; letter-spacing: -0.02em; transition: color .3s; } #sub .sub_visual .s_txt .loc .sub_m li a:hover{ color: #1F73D5; } #sub .sub_con{ padding-top: 140px; background-color: #fff; display:flex; flex-flow: column; gap: 160px; } #sub .sub_con > div:last-child{ padding-bottom: 160px; } #sub.view .p_con *{text-align: center !important} #sub.view .v_con *{text-align: center !important} #sub.view .p_con img{display: block !important;margin-left: auto !important;margin-right: auto !important} #sub.view .v_con img{display: block !important;margin-left: auto !important;margin-right: auto !important} #sub .st01{ display: block; font-size: 38px; line-height: 1.3em; font-weight: 500; letter-spacing: -0.02em; color:#222222; } #sub .st02{ display: block; font-size: 36px; line-height: 1.3em; font-weight: 500; letter-spacing: -0.02em; color:#222222; } #sub .st03{ display: block; font-size: 42px; line-height: 1.3em; font-weight: 500; color: #222; letter-spacing: -0.02em; } #sub .p01{ font-size: 20px; line-height: 1.6em; font-weight: 400; color:#46494D; } #sub .p01 .color{ color:#1F73D5; font-weight: 600; } #sub .br{ display: block; } #footer{ background-color: #fff; } #sub .sub_visual .s_txt .wrap strong{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; } #sub .sub_visual .s_txt .wrap span{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; } #sub .sub_visual.on .s_txt .wrap strong{ transform: translateY(0); opacity: 1; } #sub .sub_visual.on .s_txt .wrap span{ transform: translateY(0); opacity: 1; } #sub .sub_visual .s_txt .wrap p{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #sub .sub_visual.on .s_txt .wrap p{ transform: translateY(0); opacity: 1; } #sub .sub_visual .s_txt .loc{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .4s; } #sub .sub_visual.on .s_txt .loc{ transform: translateY(0); opacity: 1; } #sub .sub_visual .s_img img{ transition: transform 2s; transform: translate(-50%,-50%); } #sub .sub_visual.on .s_img img{ transform: translate(-50%,-65%); } #sub .go_btn{ display:flex; justify-content: center; } #sub .go_btn a{ width: 240px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: #1F73D5; border-radius: 8px; } #sub .go_btn a .wrap ul{ width: 145px; height: 30px; overflow: hidden; } #sub .go_btn a .wrap ul li{ width: 100%; text-align: center; height: 30px; display:flex; align-items: center; justify-content: center; font-size: 22px; color:#FFFFFF; font-weight: 800; transition: transform .3s; } #sub .go_btn a:hover .wrap ul li{ transform: translateY(-100%); } /* CEO 인사말 */ #sub.greeting .con01 .inner{ display: flex; gap: 190px; } #sub.greeting .right{ display:flex; gap: 40px; flex-flow: column; } #sub.greeting .right .name{ display: flex; align-items: center; justify-content: flex-end; gap: 16px;} #sub.greeting .right .name p{ font-size: 20px; color:#46494D; } #sub.greeting .right .name strong{ font-size: 28px; color:#222222; font-weight: 600; } #sub.greeting .left .img{ margin-top: 80px; } #sub.greeting .left .img img{ border-radius: 12px; display: block; } /* 썸텍 소개 */ #sub.intro .p_wrap{ display:flex; flex-flow: column; gap: 40px; } #sub.intro .p_wrap{ padding-left: 550px; } #sub.intro .con01 .st01{ padding-bottom: 80px; border-bottom: 1px solid #ECECEC; margin-bottom: 80px; } #sub.intro .con02{ padding: 160px 0; background: url('/img/sub/intro_bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed; } #sub.intro .con02 .inner *{ color: #fff; } #sub.intro .con02 .st02{ margin-bottom: 80px; } #sub.intro .con02 .p01{ padding-left: 550px; } #sub.intro .con03 .inner{ position: relative; } #sub.intro .con03 .inner:after{ content:""; display: block; width: 410px; height: 1px; background-color: #ECECEC; left: 0; top: 10px; position: absolute; } /* 연혁 */ #sub.history .h_tit{ padding-bottom: 40px; display:flex; align-items: center; gap: 20px; border-bottom: 1px solid #ECECEC; position: relative; } #sub.history .h_tit:after{ content:""; display: block; width: 130px; height: 1px; background-color: #1F73D5; position: absolute; left: 0; bottom: -1px; } #sub.history .h_tit strong{ display: block; width: 272px; font-size: 42px; color:#222222; letter-spacing: -0.02em; } #sub.history .h_tit p{ font-size: 24px; font-weight: 600; color: #46494d; } #sub.history .h_list{ padding-left: 286px; display:flex; flex-flow: column; gap: 20px; margin-top: 40px; } #sub.history .h_list dl{ display:flex; gap: 20px; } #sub.history .h_list dl dt{ width: 140px; font-size: 26px; font-weight: 600; color:#444444; letter-spacing: -0.02em; font-family: "Pretendard", sans-serif; line-height: 1.5em; } #sub.history .h_list dl dd{ font-size: 20px; color:#46494D; letter-spacing: -0.02em; line-height: 2em; } /* 연구개발 */ #sub.rnd .r_tit{ padding-bottom: 45px; border-bottom: 1px solid #ECECEC; margin-bottom: 45px; } #sub.rnd .r_tit p{display: block;font-size: 20px;color: #46494D;margin-top: 15px} #sub.rnd .con01 .r_tit{ padding-bottom: 80px; display:flex; justify-content: space-between;margin-bottom: 0; align-items: flex-end} #sub.rnd .con01 .r_tit .cont{display: flex;align-items: center;gap: 33px} #sub.rnd .con01 .r_tit .cont strong{font-size: 20px;color: #46494D;font-weight: 600} #sub.rnd .con01 .r_tit .cont .key {display: flex;gap: 24px;align-items: center} #sub.rnd .con01 .r_tit .cont .key span{color: #46494D;font-size: 20px;} #sub.rnd .con01 .r_tit .cont .key i{display: block;background: #BFC4C9;width: 1px;height: 12px} #sub.rnd .con01 .list{ display:flex; gap: 30px; margin-top: 80px; } #sub.rnd .con01 .list dl{ width: 25%; border-radius: 12px; background-color: #F4F6F9; padding: 40px; display:flex; flex-flow: column; gap: 40px; } #sub.rnd .con01 .list dl dd { display:flex; flex-flow: column; gap: 8px; } #sub.rnd .con01 .list dl dd strong{ font-size: 28px; font-weight: 600; color:#222222; } #sub.rnd .con01 .list dl dd p{ font-size: 16px; font-family: "Pretendard", sans-serif; color:#969EA8; } #sub.rnd .con02{ background-color: #F1F4F6; padding: 140px 0; } #sub.rnd .con02 .list{ display:flex; gap: 60px; } #sub.rnd .con02 .list > ul{ width: 50%; display:flex; flex-flow: column; gap: 20px; } #sub.rnd .con02 .list > ul > li{ font-size: 20px; line-height: 1.6em; color:#596370; font-family: "Pretendard", sans-serif; letter-spacing: -0.02em; position: relative; padding-left: 14px; } #sub.rnd .con02 .list > ul > li:after{content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #596370; position: absolute; left: 0; top: 15px; } #sub.rnd .con03 .gr svg{ display: block; margin: 0 auto; max-width: 100%; height: auto; } #sub.rnd .con04{ background-color: #f1f4f6; padding-top: 140px; } #sub.rnd .con04 .wrap{ display:flex; flex-flow: column; gap: 100px; } #sub.rnd .con04 .wrap .s_wrap{ border-bottom: 1px solid #D4DCE5; padding-bottom: 100px; display:flex; gap: 70px; align-items: center; } #sub.rnd .con04 .wrap .s_wrap > div{ width :50%; } #sub.rnd .con04 .wrap .s_wrap:last-child{ padding-bottom: 0; border-bottom: none; } #sub.rnd .con04 .wrap .s_wrap .img img{ display: block; width: 100%; border-radius: 12px; } #sub.rnd .con04 .wrap .s_wrap .txt > strong{ font-size: 40px; font-weight: 600; color:#222222; letter-spacing: -0.02em; margin-bottom: 40px; display: block; } #sub.rnd .con04 .wrap .s_wrap .t_slide{ padding: 60px 0; padding-right: 60px; width: 100%; position: relative; height: 400px; } #sub.rnd .con04 .wrap .s_wrap .t_slide:after{ content:""; display: block; width: calc(100% + 120px); border-radius: 12px; background-color: #083E7E;height: 100%; position: absolute; right: 0; top: 0; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-slide{ opacity: 0 !important; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-slide-active{ opacity: 1 !important; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt { } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt strong{ font-size: 26px; font-weight: 600; color:#FFFFFF; letter-spacing: -0.02em; display: block; margin-bottom: 20px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt ul{ display:flex; flex-flow: column; gap: 8px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt ul li{ padding-left: 14px; font-size: 20px; line-height: 1.5em; color:#AEC1D8; letter-spacing: -0.02em; position: relative; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #AEC1D8; position: absolute; left: 0; top: 13px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev{ width: 46px; height: 46px; position: absolute; right: 110px; bottom: 44px; left: auto; top: auto; transition: background .3s; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev:hover{ background-color: rgba(255,255,255,0.1); } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev svg{ width: auto; height: auto; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev:after{ display: none; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next{ width: 46px; height: 46px; right: 65px; bottom: 44px; left: auto; top: auto; transition: background .3s; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next:hover{ background-color: rgba(255,255,255,0.1); } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next svg{ width: auto; height: auto; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next:after{ display: none; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control{ position: absolute; left: 0; bottom: 0; display:flex; align-items: center; gap: 16px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .pg{ width: 320px; height: 2px; background-color: rgba(255,255,255,0.2); position: relative; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .pg:after{ position: absolute; content:""; display: block; width: 0; height: 100%; left: 0; top: 0; background-color: #fff; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-slide-active .control .pg:after{ width: 100%; transition: 4s linear; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .num{ display:flex; align-items: center; font-size: 14px; color:rgba(255,255,255,0.4); font-weight: 600; gap: 3px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .num b{ color: #fff; } #sub.rnd .con04 .wrap .s_wrap2{ flex-flow: row-reverse; } #sub.rnd .con04 .wrap .s_wrap2 .t_slide:after{ right: auto; left: -100px; width: calc(100% + 220px); } #sub.rnd .con04 .wrap .s_wrap2 .txt{ padding-left: 100px; } #sub.rnd .con05{background: #F4F6F9;padding: 140px 0} #sub.rnd .con05 ul{display: flex;gap: 10px} #sub.rnd .con05 ul li{flex: 1} #sub.rnd .con05 ul li .wrap{background: #1F73D5;padding: 40px;height: 100%;border-radius: 12px} #sub.rnd .con05 ul li .wrap strong{display: block;line-height: 28px;color: #FFFFFF;font-size: 20px;border-bottom: 1px solid #FFFFFF23;padding-bottom: 20px;margin-bottom: 30px;min-height: 105px} #sub.rnd .con05 ul li .wrap p{font-size: 18px;line-height: 32px;color: #FFFFFF80;} #sub.rnd .con06 .wrap{display: flex;flex-wrap: wrap;gap: 60px 30px} #sub.rnd .con06 .wrap > div{width: calc(33.33% - 20px)} #sub.rnd .con06 .wrap .tit{display: flex;align-items: center;gap: 15px;margin-bottom: 20px} #sub.rnd .con06 .wrap .tit strong{font-size: 26px;color: #222222;} #sub.rnd .con06 .wrap ul{background: #F1F4F6;padding: 40px;border-radius: 12px;height: calc(100% - 80px);display: flex;flex-direction: column;gap: 15px} #sub.rnd .con06 .wrap ul li{font-size: 18px;color: #596370;position: relative;padding-left: 14px} #sub.rnd .con06 .wrap ul li:before{content: '';display: block;width: 4px;height: 4px;background: #596370;border-radius: 50%;position: absolute;left: 0;top: 10px} #sub.rnd .sub_con > div.con07{background: url(/img/sub/vision.png) center center;padding: 125px 0;} #sub.rnd .sub_con > div.con07 .r_tit{display: flex;align-items: center;border-color: #ffffff23} #sub.rnd .sub_con > div.con07 .r_tit > *{flex: 1;align-items: center} #sub.rnd .sub_con > div.con07 .r_tit strong{color: #fff} #sub.rnd .sub_con > div.con07 .r_tit p{font-size: 20px;line-height: 32px;color: #FFFFFF} #sub.rnd .sub_con > div.con07 .txt{display: flex;justify-content: flex-end} #sub.rnd .sub_con > div.con07 .txt p{width: 50%;font-size: 26px;color: #FFFFFF;font-weight: 600;} /* 게시판 공통 */ #sub.board .b_top{ display:flex; justify-content: space-between; align-items: center; margin-bottom: 60px; } #sub.board .b_top .b_cate ul{ display:flex; gap: 10px; } #sub.board .b_top .b_cate ul li a{ display:flex; align-items: center; height: 40px; text-align: center; width: 100px; justify-content: center;border-radius: 20px; font-family: 'Pretendard', sans-serif; background-color: #fff; border: 1px solid #fff; color:#7A7A7A; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; transition: color .3s, border .3s; } #sub.board .b_top .b_cate ul li a:hover{ border-color: #1f73d5; color: #1f73d5; } #sub.board .b_top .b_cate ul li.on a{ background-color: #1F73D5 !important; border-color:#1F73D5 !important; color: #fff !important; } #sub.board .b_top .b_search{ width: 412px; height: 58px; border-radius: 8px; border: 1px solid #D4DBE3; position: relative; } #sub.board .b_top .b_search input{ width: 100%; height: 100%; padding-left: 25px; font-size: 17px; font-weight: 500; color:#696C71; border: none; background-color: transparent; border-radius: 8px; } #sub.board .b_top .b_search .b_btn{ position: absolute; right: 25px; top: 50%; transform: translate(0,-50%); } #sub.board .b_top .b_search .b_btn svg{ display: block; } #sub.board .g_list ul{ display:flex; flex-flow: wrap; gap: 60px; } #sub.board .g_list ul li{ width: calc(33.33333333% - 40px); } #sub.board .g_list ul li a{ display: flex; flex-flow: column; gap: 30px; } #sub.board .g_list ul li a .txt{ padding-bottom: 35px; border-bottom: 1px solid #ECECEC; position: relative; } #sub.board .g_list ul li a .txt:after{ content:""; display: block; width: 0; height: 1px; background-color: #222222; position: absolute; left: 0; bottom: -1px; transition: width .5s; } #sub.board .g_list ul li a .img{ border-radius: 12px; overflow: hidden; aspect-ratio: 80 / 51; position: relative; } #sub.board .g_list ul li a .img img{ display: block; width: 100%; transition: transform .5s; height: 100%} #sub.board .g_list ul li a .img .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display:flex; align-items: center; justify-content: center; background-color: rgba(0,54,116,0.7); backdrop-filter: blur(5px) brightness(90%); opacity: 0; transition: opacity .5s; z-index: 2; display: none} #sub.board .g_list ul li a:hover .img .hover{ opacity: 1; } /*#sub.board .g_list ul li a:hover .img img{ transform: scale(1.1); }*/ #sub.board .g_list ul li a:hover .txt:after{ width: 100%; } #sub.board .g_list ul li a .txt{ display:flex; flex-flow: column; gap: 12px; } #sub.board .g_list ul li a .txt strong{ font-size: 22px; font-weight: 700; color: #2C2C2C; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sub.board .g_list ul li a .txt p{ font-size: 16px; line-height: 1.6em; color:#46494D; margin-bottom: 8px; height: 52px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #sub.board .g_list ul li a .txt span{ font-size: 16px; color:#B2B2B4 } #sub.board .paging{ display:flex; justify-content: center; margin-top: 70px; } #sub.board .paging ul{ display:flex; gap: 10px; } #sub.board .paging ul li{ width: 42px; height: 42px; } #sub.board .paging ul li a{ display:flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-family: "Pretendard", sans-serif; font-size: 16px; color:#82766C; font-weight: 500; } #sub.board .paging ul li.on a{ border-radius: 50%; background-color: #1F73D5; color: #fff; } #sub.view .v_tit{ padding-bottom: 40px; border-bottom: 1px solid #ECECEC; } #sub.view .v_tit strong{ font-size: 26px; color:#2C2C2C; font-weight: 700; display: block; margin-bottom: 12px; } #sub.view .v_tit p{ font-size: 16px; color:#818181; } #sub.view .v_con{ padding-top: 60px; padding-bottom: 60px; min-height: 600px; border-bottom: 1px solid #ececec; margin-bottom: 60px; } #sub.view .v_con img{ max-width: 100%; } #sub.contact .con01 .inner{ display:flex; gap: 70px; align-items: flex-end; } #sub.contact .con01 .img img{ display: block; border-radius: 12px; } #sub.contact .con01 .right{ width:calc(100% - 450px); } #sub.contact .con01 .right .c_tit{ padding-bottom: 40px; border-bottom:1px solid #ECECEC; margin-bottom: 58px; } #sub.contact .con01 .right .list{ display:flex; gap: 23px; } #sub.contact .con01 .right .list dl{ width: 25%; padding: 40px; border-radius: 12px; background-color: #F4F6F9; display:flex; flex-flow: column; justify-content: space-between; position: relative; transition: background .3s; } #sub.contact .con01 .right .list dt{ margin-bottom: 34px; } #sub.contact .con01 .right .list dd{ display:flex; flex-direction: column; gap: 10px; } #sub.contact .con01 .right .list dd span{font-size: 16px; color:#90A0B4; font-weight: 700; } #sub.contact .con01 .right .list dd strong{ font-size: 20px; font-weight: 600; color:#222222; letter-spacing: -0.02em; } #sub.contact .con01 .right .list dd p{ font-size: 16px; line-height: 1.6em; font-weight: 400; color:#46494D; letter-spacing: -0.02em; word-break: keep-all; font-family: "Pretendard", sans-serif; } #sub.contact .con01 .right .list dl dt svg{ overflow: visible; } #sub.contact .con01 .right .list dl:after{ content:""; display: block; width: 21px; height :76px; background: url('/img/sub/contact_arrow.png') center center no-repeat; position: absolute; right: -13px; top: 50%; transform: translate(100%,-50%); z-index: 1; } #sub.contact .con01 .right .list dl:last-child:after{ display: none; } #sub.contact .con01 .right .list dl:hover{ background-color: #1F73D5; } #sub.contact .con01 .right .list dl:hover dd span{ color: #FFFFFF } #sub.contact .con01 .right .list dl:hover dd strong{ color: #FFFFFF } #sub.contact .con01 .right .list dl:hover dd p{ color: #D5E8FF } #sub.contact .con01 .right .list dl:hover dt svg path{ fill: #fff; } #sub .in_form{ } #sub .st04{ font-size: 20px; font-weight: 600; color: #46494D; letter-spacing: -0.02em; } #sub .st04 span{ color: #1F73D5; } #sub .in_form .st04{ margin-bottom: 20px; display: block; } #sub .in_form .per{ padding-bottom: 80px; border-bottom: 1px solid #ECECEC; margin-top: 80px; } #sub .in_form .per .p_box{ display:flex; flex-flow: column; gap: 40px; padding: 30px 35px; border-radius: 8px; background-color: #F4F6F9; height: 212px; overflow-y: scroll; } #sub .in_form .per .p_box > div > p{ font-size: 16px; line-height: 1.6em; color:#6E747B; font-weight: 500; white-space: pre-wrap; } #sub .in_form .per .p_box > div { display:flex; flex-flow: column; gap: 15px; } #sub .in_form .per .p_box > div > strong{ font-size: 24px; color:#444444; font-weight: 500; display: block; } #sub .in_form .per .chk{ position: relative; display:flex; align-items: center; gap: 12px; margin-top: 22px; } #sub .in_form .per .chk input{ width: 28px; height: 28px; position: absolute; left: 0; top: 0; opacity: 0; display: none; } #sub .in_form .per .chk label{ width: 28px; height: 28px; display: block; background: url('/img/sub/chk1.png') center center no-repeat; cursor: pointer; } #sub .in_form .per .chk p{ font-size: 18px; font-weight: 500; color:#46494D; } #sub .in_form .per .chk input:checked + label{ background: url('/img/sub/chk2.png') center center no-repeat; } #sub .in_form .forms{ margin-top: 80px; } #sub .in_form .forms ul{ display:flex; flex-flow: wrap; gap: 50px 60px; } #sub .in_form .forms ul li{ width: calc(50% - 30px); display:flex; flex-flow: column; justify-content: flex-end; } #sub .in_form .forms ul li .input_b select{ width: 100%; height: 58px; border-radius: 8px; border: 1px solid #BBBFC4; font-size: 17px; font-weight: 500; color:#696C71; padding-left: 25px; -webkit-appearance: none; /* 크롬 화살표 없애기 */ -moz-appearance: none; /* 파이어폭스 화살표 없애기 */ appearance: none; /* 화살표 없애기 */ background: url('/img/sub/input_a.png') right 25px center no-repeat; } #sub .in_form .forms ul li .input_b select:focus{ border-color:#1F73D5; } #sub .in_form .forms ul li .input_b input{ width: 100%; height: 58px; border-radius: 8px; border: 1px solid #BBBFC4; font-size: 17px; font-weight: 500; color:#696C71; padding-left: 25px; } #sub .in_form .forms ul li .input_b textarea{ width: 100%; height: 200px; border-radius: 8px; border: 1px solid #BBBFC4; font-size: 17px; font-weight: 500; color:#696C71; padding: 25px; } #sub .in_form .forms ul li .files{ position: relative; width: 100%; height: 58px; border-radius: 8px; border: 1px solid #bbbfc4; padding-left: 58px; } #sub .in_form .forms ul li .files svg{ position: absolute; left: 22px; top: 50%; transform: translate(0,-50%); } #sub .in_form .forms ul li .files input{ width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; cursor: pointer; } #sub .in_form .forms ul li .files p{ font-size: 17px; height: 100%; display:flex; align-items: center; color:#696C71; } #sub .in_form .forms ul li > p{font-size: 16px; line-height: 1.5em; color:#8E9095; word-break: keep-all; margin-top: 20px; } #sub .in_form .forms ul li.all_li{ width: 100%; } #sub .in_form .go_btn{ margin-top: 70px; } #sub.product .b_top .b_cate{ width: 100%; } #sub.product .b_top .b_cate ul{ flex-flow: wrap; } #sub.product .b_top .b_cate ul li a{ width: auto; padding: 0 20px; white-space: nowrap; font-size: 1.25em} #sub.product .p_tit{ display:flex; flex-flow: column; align-items: center; text-align: center; gap: 20px; padding-bottom: 50px; border-bottom: 1px solid #ECECEC; margin-bottom: 90px; } #sub.product .p_tit strong{ display: block; width: 665px; display: block; font-size: 42px; line-height: 1.3em; font-weight: 600; color: #222; letter-spacing: -0.02em;; } #sub.product .p_tit p{ width: calc(100% - 665px); margin-top: 0; !important; font-size: 20px; line-height: 1.6em; color:#46494D; } #sub.product .g_list2 > strong{ display: block; position: relative; padding-left: 21px; font-size: 32px; color:#222222; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 40px; } #sub.product .g_list2 > strong:after{ content:""; display: block; width: 11px; height: 11px; border: 3px solid #1F73D5; box-sizing: border-box; border-radius: 50%;position: absolute; left: 0; top: 50%; transform: translate(0,-50%); } #sub.product .g_list2 > ul{ display:flex; flex-flow: wrap; gap: 60px; } #sub.product .g_list2 > ul > li{ width: calc(33.33333333333% - 40px); } #sub.product .g_list2 > ul > li > a{ border-radius: 12px; padding: 10px; background-color: #EFF4F8; display: flex; flex-flow: column; gap: 10px; border: 1px solid #EFF4F8; transition: border .5s, background .5s; } #sub.product .g_list2 > ul > li > a .img{ position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background-color: #EFF4F8; } #sub.product .g_list2 > ul > li > a .img .hover{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(31,115,213,0.8); display:flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; display: none !important; } #sub.product .g_list2 > ul > li > a .img img{ display: block; width: 100%; } #sub.product .g_list2 > ul > li > a .txt{ padding: 30px; padding-top: 0; } #sub.product .g_list2 > ul > li > a .txt .line{ width: 100%; height: 1px; display: block;background-color: #E0E8EE; margin-bottom: 30px; } #sub.product .g_list2 > ul > li > a .txt .product_logo{ padding: 4px 12px; border-radius: 60px; background-color: #FFFFFF; display: inline-block; margin-bottom: 6px; border: 1px solid #fff; transition: border .5s; display: none !important;} #sub.product .g_list2 > ul > li > a .txt strong{ display: block; font-size: 24px; line-height: 1.5em; color:#222222; letter-spacing: -0.02em; margin-bottom: 40px; transition: color .5s; } #sub.product .g_list2 > ul > li > a .txt p{ display: block; font-size: 18px; color:#707882; letter-spacing: -0.02em; font-weight: 600; } #sub.product .g_list2 > ul > li > a .txt .product_logo img{ display: block; height: 22px; } #sub.product .g_list2 > ul > li > a:hover .img .hover{ opacity: 1; } #sub.product .g_list2 > ul > li > a:hover{ border-color: #1F73D5; } #sub.product .g_list2 > ul > li > a:hover .txt strong{ color: #1F73D5; } #sub.product .g_list2 > ul > li > a:hover .txt .product_logo{ border-color:#DCDFE2; } #sub.product .con02{ padding-top: 180px; background-color: #F4F6F9; overflow: hidden; } #sub.product .con02 .inner{ display:flex; align-items: center; gap: 40px; } #sub.product .con02 .left{ width: 540px; display:flex; flex-flow: column; gap: 40px; position: relative; z-index: 5; } #sub.product .con02 .right{ width: calc(100% - 540px); } #sub.product .con02 .right .g_slide{ width: calc(100% + 300px);overflow: hidden} #sub.product .con02 .right .g_slide .swiper-slide{ width: 640px; opacity: 0; } #sub.product .con02 .right .g_slide .swiper-slide-active{ opacity: 1; } #sub.product .con02 .right .g_slide .swiper-slide-active + div{ opacity: 1; } #sub.product .con02 .right .g_slide .swiper-slide-active + div + div{ opacity: 1; } #sub.product .con02 .left .go_btn{ justify-content: flex-start; } #sub.product .con02 .left .btn{ display:flex; gap: 10px; } #sub.product .con02 .left .btn > div{ width: 46px; height: 46px; display:flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s; } #sub.product .con02 .left .btn > div:hover{ background-color: #004494; } #sub.product .con02 .left .btn > div svg path{ transition: stroke .3s; } #sub.product .con02 .left .btn > div:hover svg path{ stroke: #fff; } #sub.product .con02 .right .g_slide a{ display: flex; flex-flow: column; gap: 30px; } #sub.product .con02 .right .g_slide a .txt{ padding-bottom: 35px; border-bottom: 1px solid #ECECEC; position: relative; } #sub.product .con02 .right .g_slide a .txt:after{ content:""; display: block; width: 0; height: 1px; background-color: #222222; position: absolute; left: 0; bottom: -1px; transition: width .5s; } #sub.product .con02 .right .g_slide a .img{ border-radius: 12px; overflow: hidden; aspect-ratio: 80 / 51; position: relative; } #sub.product .con02 .right .g_slide a .img img{ display: block; width: 100%; transition: transform .5s; height: 100%} #sub.product .con02 .right .g_slide a .img .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display:flex; align-items: center; justify-content: center; background-color: rgba(0,54,116,0.7); backdrop-filter: blur(5px) brightness(90%); opacity: 0; transition: opacity .5s; z-index: 2; display: none} #sub.product .con02 .right .g_slide a:hover .img .hover{ opacity: 1; } /*#sub.product .con02 .right .g_slide a:hover .img img{ transform: scale(1.1); }*/ #sub.product .con02 .right .g_slide a:hover .txt:after{ width: 100%; } #sub.product .con02 .right .g_slide a .txt{ display:flex; flex-flow: column; gap: 12px; } #sub.product .con02 .right .g_slide a .txt strong{ font-size: 22px; font-weight: 700; color: #2C2C2C; } #sub.product .con02 .right .g_slide a .txt p{ font-size: 16px; line-height: 1.6em; color:#46494D; margin-bottom: 8px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub.product .con02 .right .g_slide a .txt span{ font-size: 16px; color:#B2B2B4 } #sub.pro .p_visual{ display:flex; flex-flow: row-reverse; align-items: center; gap: 40px; width: 1300px;margin: 100%;margin: 0 auto;max-width: 100%} #sub.pro .p_visual > div{ width: 50%; } #sub.pro .p_visual .txt_w{padding-left: 60px} #sub.pro .p_visual .product_logo{ margin-bottom: 20px; } #sub.pro .p_visual .product_logo img{ max-width: 100%; display: block; } #sub.pro .p_visual .txt strong{ font-size: 32px; color:#222222; font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; display: block; } #sub.pro .p_visual .img img{ width: 100%; display: block; } #sub.pro .p_con *, #sub.view .v_con *{ font-family: "Manrope", "Pretendard", sans-serif !important} #sub.pro .p_con.pc{display: block} #sub.pro .p_con.mobile{display: none} #sub.pro .p_con img{ display: block; max-width: 100%; } #sub.pro .p_vs{ height: 500px; display:flex; flex-flow: column; justify-content: center; align-items: center; } #sub.pro .p_vs strong{ font-size: 70px; color:#FFFFFF; font-weight: 600; text-align: center; } #sub.pro .p_vs p{ font-size: 22px; color:#FFFFFF; font-weight: 600;text-align: center; } #sub.pro .con03 .p_vs{ background: url('/img/sub/faq_bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed; } #sub.pro .con03 .f_list{ margin-top: 90px; } #sub.pro .con03 .f_list ul{ display:flex;flex-flow: column; gap: 12px; } #sub.pro .con03 .f_list ul li button{ min-height: 80px; border-radius: 12px; background-color: #F4F6F9; position: relative; text-align: left; padding: 15px 0; padding-left: 35px; display:flex; align-items: center; width: 100%; gap: 20px; font-size: 20px; font-weight: 600; color:#46494D; } #sub.pro .con03 .f_list ul li button span{ font-size: 24px; color:#1F73D5; font-weight: 700; width: 25px; } #sub.pro .con03 .f_list ul li svg{ position: absolute; right: 35px; top: 50%; transform: translate(0,-50%); } #sub.pro .con03 .f_list ul li .answer{ margin-top: 6px; border-radius: 12px; background-color: #fff; border-radius: 12px; border: 1px solid #1F73D5; padding: 35px; display: none; } #sub.pro .con03 .f_list ul li .answer p{ font-size: 18px; line-height: 1.6em; color:#46494D; } #sub.pro .con03 .f_list ul li button.on{ background-color: #1F73D5; } #sub.pro .con03 .f_list ul li button.on svg line{ stroke: #fff; } #sub.pro .con03 .f_list ul li button.on svg #선_12{ display: none; } #sub.pro .con03 .f_list ul li button.on{ color: #fff; } #sub.pro .con03 .f_list ul li button.on span{ color: #fff; } #sub.pro .con04 .p_vs{ background: url('/img/sub/in_bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed; margin-bottom: 90px; } #sub.esg_txt .con_w{ display:flex; flex-flow: column; gap: 65px; } #sub.esg_txt .con01 .con .tit strong{font-size: 26px;font-weight: 600;color: #353535; display: block; } #sub.esg_txt .con01 .txt ul li{display: block;font-size: 18px;line-height: 36px;color: #616161;letter-spacing: -0.3px;word-break: keep-all;position: relative;padding-left: 22px} #sub.esg_txt .con01 .txt.txt3 p{display: block;font-size: 18px;line-height: 36px;color: #353535;margin-top: 36px;font-weight: 500; letter-spacing: -0.3px;word-break: keep-all;position: relative;} #sub.esg_txt .con01 .txt.txt3 ul li{color: #353535;font-weight: 600;line-height: 44px;} #sub.esg_txt .con01 .txt ul li span{padding-left: 0;position: absolute;left: 0} #sub.esg_txt .con01 .txt ul li span img{position: relative;top: 15px;} #sub.esg_txt .con01 .txt ul li.d_list{padding-left: 0} #sub.esg_txt .con01 .txt table{width: 100%;border-collapse: collapse;margin-bottom: 12px;} #sub.esg_txt .con01 .txt table th, #sub.esg_txt .con01 .txt table td{height: 65px;border: 1px solid #d2d2d2;text-align: center;;vertical-align: middle;font-size: 17px;line-height: 1.6;word-break: keep-all;} #sub.esg_txt .con01 .txt.txt02 table {width: auto;} #sub.esg_txt .con01 .txt.txt02 table td{padding: 10px 30px;height: auto} #sub.esg_txt .con01 .tit p{font-size: 18px;color: #353535;line-height: 36px;margin-top: 20px;word-break: keep-all} #sub.esg_txt .con01 .txt p.date{font-size: 18px;color: #353535;line-height: 36px;margin-top: 40px;} #sub.esg_txt .con01 .txt strong.sign{display: block;font-size: 18px;color: #0083cb;line-height: 36px;margin-top: 40px;font-weight: 600} #sub.esg_txt .con01 .tit_area p{font-size: 18px;color: #353535;line-height: 36px;letter-spacing: -0.6px;word-break: keep-all} #sub.esg_txt .con01 .tit_area .tit_w{position: relative;margin-bottom: 30px;} #sub.esg_txt .con01 .tit_area .tit_w:before{content: '';display: block;width: 100%;height: 1px;background: #dddddd;position: absolute;top: 50%;left: 0} #sub.esg_txt .con01 .tit_area .tit_w strong{display: inline-block;font-size: 32px;font-weight: 600;color: #0083cb;background: #fff;padding-right: 30px;position: relative;z-index: 2} #sub.esg_txt .con01 .c_w{padding: 0 24px;margin-bottom: 36px;} #sub.esg_txt .con01 .c_w .tit2 strong{display: block;font-size: 18px;color: #353535;line-height: 36px;} #sub.esg_txt .con01 .tit_b{margin-bottom: 25px;} #sub.esg_txt .con01 .tit_b strong{display: block;font-size: 22px;font-weight: 600;color: #0083cb;letter-spacing: -0.5px;} #sub.esg_txt .con01 .tit_b strong:before{content: '';display: inline-block;width: 15px;height: 15px;background: url(/img/sub/d_bul.png); vertical-align: middle;margin-right: 5px;margin-top: -3px;} @media (min-width: 1920px) { #sub.rnd .sub_con > div.con07{background-size: 100% auto} } @media (max-width: 1920px) { #sub.rnd .sub_con > div.con07{background-size: auto 100% } } @media (max-width: 1600px) { #header.s_header:after{ width: calc(100% - 40px); } #sub.rnd .con01 .r_tit .st03{ width: 340px; } #sub.rnd .con01 .r_tit .p01{ width: calc(100% - 560px); } #sub.board .g_list ul li a .txt p br{ display: none; } } @media (max-width: 1580px) { .inner{ width: 100%; padding: 0 20px; } #sub .p01{ word-break: keep-all; } #sub .br{ display: none; } #sub.product .p_tit{ flex-flow: column; gap: 20px; } #sub.product .p_tit strong{ width: 100%; } #sub.product .p_tit p{ margin-top: 0; width: 100%; } #sub.rnd .con05 ul{flex-wrap: wrap} #sub.rnd .con05 ul li{flex: auto;width: calc(50% - 5px)} #sub.product .g_list2 > ul > li > a .txt strong{ word-break: keep-all; } } @media (max-width: 1300px) { #header.s_header #gnb > ul > li > div > a{color: #000} #sub.pro .con04 .p_vs, #sub.pro .con03 .p_vs{background-attachment: inherit} } @media (max-width: 1260px) { #sub.product .con02 .right .g_slide{width: 100%;overflow: visible} #sub.product .con02 .right .g_slide .swiper-slide{ width: 300px; } #sub.greeting .con01 .inner{ gap: 60px; } #sub.board .g_list ul{ gap: 40px; } #sub.board .g_list ul li{ width: calc(50% - 20px); } #sub.board .g_list ul li a .txt p{ word-break: keep-all; } #sub.contact .con01 .right .list{ flex-flow: wrap; gap: 20px; } #sub.contact .con01 .right .list dl{ width: calc(50% - 10px); } #sub.contact .con01 .inner{ align-items: flex-start; } #sub.contact .con01 .right .list dl{ padding: 30px; } #sub.product .g_list2 > ul{ gap: 40px 20px; } #sub.product .g_list2 > ul > li{ width: calc(33.333333333333% - 13.33333333333px); } #sub.product .g_list2 > ul > li > a .txt{ padding: 20px; padding-top: 0; } #sub.product .con02 .right .g_slide a{ width: 300px; } #sub.product .con02 .right .g_slide a .img .hover svg{ width: 32px; height: auto; } #sub.product .con02 .right .g_slide a .txt strong{ font-size: 18px; } #sub.product .con02 .right .g_slide a .txt p{ font-size: 14px; line-height: 1.5em; margin-bottom: 0; } #sub.product .con02 .right .g_slide a{ gap: 20px; } #sub.product .con02 .right .g_slide a .txt span{ font-size: 14px; } #sub.product .con02 .right .g_slide a .txt{ gap: 6px; padding-bottom: 20px; } #sub.product .con02 .left{gap: 20px; } } @media (max-width: 1000px) { #sub.rnd .con05{padding: 60px 0} #sub.rnd .con01 .r_tit .cont{gap: 15px} #sub.rnd .con01 .r_tit .cont .key{gap: 7px} #sub.rnd .con01 .r_tit .cont .key span, #sub.rnd .con01 .r_tit .cont strong{font-size: 14px} #sub .sub_visual .s_txt .wrap{ gap: 12px; } #sub .sub_visual .s_txt .loc{ position: relative; margin-top: 40px; } #sub .sub_visual .s_txt .wrap strong{ font-size: 40px; } #sub .sub_visual .s_txt .wrap p{ font-size: 20px; } #sub.greeting .con01 .inner{ flex-flow: column; gap: 40px; } #sub.greeting .left .img{ margin-top: 30px; } #sub.greeting .left .img img{ max-width: 100%; } #sub .st01{ font-size: 30px; } #sub .sub_con{ padding-top: 80px; gap: 80px; } #sub .p01{ font-size: 16px; } #sub.greeting .right{ gap: 20px; } #sub.greeting .right .name p{ font-size: 16px; } #sub.greeting .right .name{ gap: 8px; } #sub.greeting .right .name strong{ font-size: 20px; } #sub .sub_con > div:last-child{ padding-bottom: 100px; } #footer{ margin-top: 0 !important; } #sub.intro .p_wrap{ padding-left: 60px; } #sub.intro .con01 .st01{ padding-bottom: 40px; margin-bottom: 40px; } #sub.intro .con02 .p01{ padding-left: 60px; } #sub.intro .con02{ padding: 100px 0; } #sub.intro .con02 .st02{ margin-bottom: 50px; } #sub.intro .con03 .inner:after{ display: none; } #sub.intro .p_wrap{ gap: 20px; } #sub.history .h_list{ padding-left: 0; } #sub.history .h_tit{ padding-bottom: 20px; } #sub.history .h_tit strong{ width: 100%; font-size: 30px; } #sub.history .h_tit{ flex-flow: column; align-items: flex-start; gap: 8px; } #sub.history .h_tit p{ font-size: 18px; } #sub.history .h_list{ gap: 20px; margin-top: 30px; } #sub.history .h_list dl dt{ font-size: 18px; width: 80px; line-height: 1.4em; } #sub.history .h_list dl dd{ font-size: 16px; line-height: 1.5em; } #sub.rnd .con01 .r_tit{ gap: 20px; flex-flow: column; } #sub.rnd .con01 .r_tit .st03{ width: 100%; } #sub.rnd .con01 .r_tit .p01{ width: 100%; } #sub .st03{ font-size: 30px; } #sub.rnd .con01 .r_tit{ gap: 12px; padding-bottom: 40px; } #sub.rnd .con01 .list{ margin-top: 40px; } #sub.rnd .con01 .list{ flex-flow: wrap; gap: 20px;} #sub.rnd .con01 .list dl dt svg{ height: 40px; width: auto; } #sub.rnd .con01 .list dl{ width: calc(50% - 10px); padding: 25px; gap: 20px; } #sub.rnd .con01 .list dl dd strong{ font-size: 20px; } #sub.rnd .con01 .list dl dd p{ font-size: 14px; } #sub.rnd .con02{ padding: 100px 0; } #sub.rnd .r_tit{ padding-bottom: 20px; margin-bottom: 20px; } #sub.rnd .con02 .list > ul > li{ font-size: 16px; padding-left: 12px; } #sub.rnd .con02 .list > ul > li:after{ top: 10px; } #sub.rnd .con02 .list > ul{ gap: 12px; width: 100%; } #sub.rnd .con02 .list{ gap: 12px; flex-flow: column; } #sub.rnd .con04 .wrap .s_wrap .txt > strong { font-size: 20px; margin-bottom: 20px; } #sub.rnd .con04 .wrap .s_wrap{ flex-flow: column; gap: 20px; padding-bottom: 60px; } #sub.rnd .con04 .wrap{ gap: 60px; } #sub.rnd .con04 .wrap .s_wrap > div{ width: 100%; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt strong{ font-size: 18px; margin-bottom: 10px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt ul li{ font-size: 14px; padding-left: 12px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt ul li:after{ top: 9px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt ul{ gap: 6px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev{ width: 32px; height: 32px; right: 70px; bottom: 30px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next{ width: 32px; height: 32px; right: 38px; bottom: 30px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev svg{ width: 6px; height: auto; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next svg{ width: 6px; height: auto; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control{ gap: 8px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .pg{ width: 200px; } #sub.rnd .con04 .wrap .s_wrap .t_slide { padding: 30px 0; } #sub.rnd .con04 .wrap .s_wrap .t_slide{ height: 280px; } #sub.rnd .con04 .wrap .s_wrap2 .txt{ padding-left: 0px; } #sub.rnd .con04 .wrap .s_wrap2 .t_slide:after{ left: auto; right: 0; width: calc(100% + 120px);} #sub.rnd .con04{ padding-top: 100px; } #sub.board .b_top{ flex-flow: column; gap: 12px; align-items: flex-start; } #sub.board .b_top .b_search{ width: 100%; height: 44px; } #sub.board .b_top .b_search input{padding-left: 15px; font-size: 15px; } #sub.board .b_top .b_search .b_btn{ right: 15px; } #sub.board .b_top .b_search .b_btn svg{ width: 16px; height: auto; } #sub.board .b_top .b_cate ul{ gap: 5px; } #sub.board .b_top .b_cate ul li a{ width: auto; padding: 0 12px; height: 32px; font-size: 14px; } #sub.board .b_top{ margin-bottom: 40px; } #sub.board .g_list ul li a{ gap: 20px; } #sub.board .g_list ul li a .txt strong{ font-size: 18px; display: block; text-overflow: ellipsis; white-space: nowrap; } #sub.board .g_list ul li a .txt p{ font-size: 14px; height: 44px; } #sub.board .g_list ul li a .txt{ gap: 6px; padding-bottom: 20px; } #sub.board .g_list ul li a .txt span{ font-size: 14px; } #sub.board .paging{ margin-top: 40px; } #sub.board .paging ul li{ width: 32px; height: 32px; } #sub.board .paging ul li a{ font-size: 14px; } #sub.board .paging ul li a svg{ width: 100%; height: auto; } #sub.board .paging ul{ gap: 6px; } #sub.board .g_list ul{ gap: 30px 20px; } #sub.board .g_list ul li{ width: calc(50% - 10px); } #sub.board .g_list ul li a .txt strong{ font-size: 16px; } #sub.view .v_con{ padding-bottom: 30px; padding-top: 30px; margin-bottom: 40px; } #sub.view .v_tit strong{ font-size: 20px; margin-bottom: 8px; } #sub.view .v_tit p{ font-size: 14px; } #sub.view .v_tit{ padding-bottom: 20px; } #sub .go_btn a{ width:160px; height:44px; } #sub .go_btn a .wrap ul li{ font-size: 16px; } #sub.contact .con01 .inner{ flex-flow: column; gap: 30px; } #sub.contact .con01 .right{ width: 100%; } #sub.contact .con01 .img img{ max-width: 100%; } #sub .in_form .per{ padding-bottom: 60px; margin-top: 60px; } #sub .in_form .st04{ margin-bottom: 12px; } #sub .st04{ font-size: 16px; } #sub .in_form .per .p_box > div > p{ font-size: 14px; line-height: 1.5em; } #sub .in_form .per .p_box{ padding: 20px; gap: 12px; height: 150px; } #sub .in_form .per .p_box > div > strong{ font-size: 16px; } #sub .in_form .per .p_box > div{ gap: 6px; } #sub .in_form .per .chk{ margin-top: 16px; gap: 8px; } #sub .in_form .per .chk p{ font-size: 14px; } #sub .in_form .per .chk input{ width: 20px; height: 20px; } #sub .in_form .per .chk label{ width: 20px; height: 20px; background-size: 100% 100% !important; } #sub .in_form .forms ul{ gap: 30px 20px; } #sub .in_form .forms ul li{ width: calc(50% - 10px); } #sub .in_form .forms ul li .input_b input{ height: 48px; font-size: 15px; padding-left: 18px; } #sub .in_form .forms ul li .input_b select{ height: 48px; font-size: 15px; padding-left: 18px; background-size: 10px auto; background-position: right 18px center; } #sub .in_form .forms ul li .input_b textarea{ height: 48px; font-size: 15px; padding-left: 18px; height: 140px; padding: 18px; } #sub .in_form .forms ul li .files{ height: 48px; padding-left: 40px; } #sub .in_form .forms ul li .files svg{ left: 15px; } #sub .in_form .forms ul li .files p{ font-size: 15px; } #sub .in_form .forms ul li > p{ font-size: 13px; margin-top: 10px; } #sub .in_form .go_btn{ margin-top: 40px; } #sub .in_form .forms{ margin-top: 60px; } #sub.product .g_list2 > ul > li{ width: calc(50% - 10px); } #sub.product .g_list2 > ul > li > a .txt strong{ font-size: 18px; margin-bottom: 20px; } #sub.product .g_list2 > ul > li > a .txt p{ font-size: 14px; } #sub.product .g_list2 > ul > li > a .txt .product_logo img{ height: 18px; } #sub.product .p_tit strong { font-size: 30px; } #sub.product .p_tit p{ font-size: 16px; } #sub.product .p_tit{ gap: 10px; padding-bottom: 30px; margin-bottom: 40px; } #sub.product .g_list2 > strong{ font-size: 18px; margin-bottom: 20px; padding-left: 15px; } #sub.product .g_list2 > strong:after{ width: 8px; height: 8px; border-width: 2px; } #sub.product .g_list2 > ul > li > a .img .hover svg{ width: 40px; height: auto; } #sub.product .con02 .left{ width: 300px; } #sub.product .con02 .right{ width: calc(100% - 340px); } #sub.pro .p_visual .txt strong{ font-size: 24px; margin-top: 4px; } #sub.pro .con03 .f_list ul li button{ font-size: 16px; gap: 10px; padding-left: 20px; padding-right: 20px; word-break: keep-all; } #sub.pro .con03 .f_list ul li button span{ font-size: 16px; width: 20px;} #sub.pro .con03 .f_list ul li svg{ display: none; } #sub.pro .con03 .f_list ul li .answer{ padding: 20px; } #sub.pro .con03 .f_list ul li .answer p{ font-size: 14px; line-height: 1.5em; word-break: keep-all; } #sub.pro .p_vs { height: 300px; } #sub.pro .p_vs strong{ font-size: 30px; } #sub.pro .p_vs p{ font-size: 16px; } #sub.pro .con03 .f_list{ margin-top: 60px; } #sub.pro .con04 .p_vs{ margin-bottom: 60px; } #sub.pro .p_visual .txt_w{padding-left: 20px} #sub.pro .con03 .f_list ul li button{min-height: 0} #sub.board .paging ul li a svg{width: 7px} #sub.rnd .con05 ul li .wrap strong{font-size: 15px;line-height: 1.5;padding-bottom: 15px;margin-bottom: 15px} #sub.rnd .con05 ul li .wrap p{font-size: 14px;line-height: 1.5} #sub.rnd .con05 ul li .wrap{padding: 20px;border-radius: 7px} #sub.rnd .con06 .wrap ul li{font-size: 13px} #sub.rnd .con06 .wrap ul{gap: 7px;padding: 15px;border-radius: 7px} #sub.rnd .con06 .wrap ul li:before{top: 6px} #sub.rnd .con06 .wrap{gap: 10px} #sub.rnd .con06 .wrap > div{width: calc(50% - 5px)} #sub.rnd .con06 .wrap .tit img{width: 30px;display: block} #sub.rnd .con06 .wrap .tit strong{font-size: 16px} #sub.rnd .con06 .wrap .tit{margin-bottom: 10px} #sub.rnd .con06 .wrap ul{height: calc(100% - 40px)} #sub.rnd .sub_con > div.con07 .r_tit p, #sub.rnd .sub_con > div.con07 .txt p{font-size: 14px;line-height: 1.5} #sub.rnd .sub_con > div.con07 .r_tit{flex-direction: column;justify-content: center;text-align: center;gap: 10px} #sub.rnd .sub_con > div.con07 .txt{justify-content: center;text-align: center} #sub.rnd .sub_con > div.con07{padding: 60px 0} #sub.rnd .sub_con > div.con07 .txt p{width: 100%} #sub .sub_visual .s_txt .wrap span{font-size: 16px} #sub.rnd .r_tit p{font-size: 14px;margin-top: 7px} #sub.rnd .con05 ul li .wrap strong{min-height: 0} #sub.esg_txt .con01 .con .tit strong{font-size: 19px;} #sub.esg_txt .con01 .tit p{margin-top: 5px} #sub.esg_txt .con01 .txt ul li, #sub.esg_txt .con01 .tit p, #sub.esg_txt .con01 .tit_area p{font-size: 13px;line-height: 1.8} #sub.esg_txt .con01 .tit_area .tit_w strong{font-size: 22px;} #sub.esg_txt .con01 .txt p.date, #sub.esg_txt .con01 .txt strong.sign, #sub.esg_txt .con01 .txt.txt3 p, #sub.esg_txt .con01 .btm_tag p, #sub.esg_txt .con01 .btm_tag span{font-size: 13px;margin-top: 15px;line-height: 1.8} #sub.esg_txt .con01 .tit_b strong{font-size: 15px;line-height: 1.8;word-break: keep-all} #sub.esg_txt .con01 .c_w{padding: 0 7px;} #sub.esg_txt .con01 .txt.txt3 ul li{line-height: 2} #sub.esg_txt .con01 .txt ul li span img{top: 5px;} #sub.esg_txt .con01 .c_w .tit2 strong{font-size: 15px;} #sub.esg_txt .con01 .c_w, #sub.esg_txt .con01 .tit_b{margin-bottom: 15px;} #sub.esg_txt .con_w{ gap: 30px; } } @media (max-width: 640px) { #sub.rnd .con01 .r_tit .cont{width: 100%;gap: 4px} #sub.rnd .con01 .r_tit{align-items: flex-start} #sub.rnd .con01 .r_tit .cont{flex-direction: column;align-items: center;justify-content: center} #sub.product .con02 .right .g_slide .swiper-slide{width: 240px} #sub.pro .p_con.pc{display: none} #sub.pro .p_con.mobile{display: block} #sub .sub_visual .s_txt .wrap strong{ font-size: 28px; } #sub .sub_visual .s_txt .wrap p{ font-size: 15px; } #sub .sub_visual .s_txt .loc > ul > li > button{ font-size: 14px; } #sub .sub_visual .s_txt .loc > ul > li > button svg{ width: 9px; height: auto; } #sub .sub_visual .s_txt .loc > ul > li > a > svg{ width: 12px; height: auto; } #sub .sub_visual .s_txt .loc > ul{ gap: 10px; } #sub .sub_visual .s_txt .loc > ul > li{ gap: 10px; } #sub .sub_visual .s_txt .loc .sub_m{ padding: 15px; } #sub .sub_visual .s_txt .loc .sub_m li a{ font-size: 14px; } #sub .sub_visual .s_txt .loc .sub_m li{ margin-bottom: 8px; } #sub .sub_visual .s_txt{ padding: 60px 0; } #sub .sub_visual{ height: 400px; } #sub .sub_visual .s_img img{ min-height: 50vh; height: 100%; } #sub .st01{ font-size: 22px; } #sub.greeting .con01 .inner{ gap: 20px; } #sub .p01{ font-size: 14px; } #sub.greeting .right{ gap: 10px; } #sub .sub_con{ padding-top: 60px; gap: 60px; } #sub .sub_con > div:last-child{ padding-bottom: 60px; } #sub.greeting .left .img{margin-top: 20px; } #sub.greeting .right .name p{ font-size: 14px; } #sub.greeting .right .name strong{ font-size: 16px; } #sub .sub_visual.on .s_txt .wrap p br{ display: none; } #sub .sub_visual.on .s_txt .wrap p{ word-break: keep-all; } #sub .st02{ font-size: 20px; } #sub.intro .con02 .st02{ margin-bottom: 20px; } #sub.intro .con02{ padding: 60px 0; } #sub.intro .con01 .st01{ padding-bottom: 20px; margin-bottom: 20px; } #sub.intro .p_wrap{ padding-left: 20px; } #sub.intro .con02 .p01{ padding-left: 20px; } #sub.history .h_list dl dt{ font-size: 16px; width: 70px; } #sub.history .h_list dl dd{ font-size: 14px; width: calc(100% - 90px); } #sub.history .h_list{ gap: 12px; } #sub.history .h_tit strong{ font-size: 22px; } #sub.history .h_tit p{ font-size: 15px; word-break: keep-all;} #sub.history .h_tit{ padding-bottom: 12px; } #sub.history .h_tit:after{ width: 60px; } #sub.history .h_list{ margin-top: 20px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .pg{ width: 140px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .control .num{ font-size: 12px; } #sub.rnd .con04 .wrap .s_wrap .txt > strong{ font-size: 18px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .tt strong{ font-size: 16px; } #sub.rnd .con04{ padding-top: 60px; } #sub .st03{ font-size: 20px; } #sub.rnd .con02{ padding: 60px 0; } #sub.rnd .con02 .list > ul > li{ font-size: 14px; } #sub.rnd .con02 .list > ul > li:after{ top: 9px; } #sub.rnd .con02 .list > ul{ gap: 6px; } #sub.rnd .r_tit{ padding-bottom: 10px; margin-bottom: 15px; } #sub.rnd .con01 .r_tit{ padding-bottom: 20px; } #sub.rnd .con01 .list{ margin-top: 20px; } #sub.rnd .con01 .list dl dt svg{height: 30px; } #sub.rnd .con01 .list dl dd strong{ font-size: 16px; } #sub.rnd .con01 .list dl dd{ gap: 4px; } #sub.rnd .con01 .list dl{ gap: 10px; padding: 15px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-next{ bottom: 20px; } #sub.rnd .con04 .wrap .s_wrap .t_slide .swiper-button-prev{ bottom: 20px; } #sub.board .g_list ul li{ width: 100%; } #sub.board .g_list ul li a .img .hover svg{ width: 40px; height: auto; } #sub.view .v_con{ padding-bottom: 20px; padding-top: 20px; margin-bottom: 30px; } #sub.view .v_tit strong{ font-size: 18px; margin-bottom: 6px; } #sub.view .v_tit{ padding-bottom: 12px; } #sub.contact .con01 .right .list dt{ margin-bottom: 15px; } #sub.contact .con01 .right .list dl dt svg{ height: 30px; width: auto; } #sub.contact .con01 .right .list dd span{ font-size: 14px; } #sub.contact .con01 .right .list dd strong{ font-size: 16px; } #sub.contact .con01 .right .list dd p{ font-size: 13px; line-height: 1.5em; } #sub.contact .con01 .right .list dd{ gap: 4px; } #sub.contact .con01 .right .list dl{ padding: 20px; } #sub.contact .con01 .right .list dl:after{ display: none; } #sub.contact .con01 .right .c_tit{ padding-bottom: 12px; margin-bottom: 20px; } #sub .in_form .per{ padding-bottom: 40px; margin-top: 40px; } #sub .st04{font-size: 15px; } #sub .in_form .per .p_box > div > p{ font-size: 13px; } #sub .in_form .per .p_box > div > strong{ font-size: 14px; } #sub .in_form .forms ul{ flex-flow: column; gap: 20px; } #sub .in_form .forms ul li{ width: 100%; } #sub.product .g_list2 > ul > li{ width: 100%; } #sub.product .g_list2 > ul { gap: 20px; } #sub.product .g_list2 > ul > li > a .txt{ padding: 10px; padding-top: 0; } #sub.product .g_list2 > ul > li > a .txt strong{ font-size: 15px; margin-bottom: 4px; } #sub.product .g_list2 > ul > li > a .txt .line{ margin-bottom: 12px; } #sub.product .p_tit strong{ font-size: 20px; } #sub.product .p_tit p{ font-size: 14px; word-break: keep-all; } #sub.product .p_tit p br{ display: none; } #sub.product .p_tit{ padding-bottom: 12px; margin-bottom: 20px; } #sub.product .con02{ padding-top: 60px; } #sub.product .con02 .inner{ flex-flow: column; } #sub.product .con02 .left{ width: 100%; gap: 8px; } #sub.product .con02 .right{ width: 100%; } #sub.product .con02 .right .g_slide a .txt strong{ font-size: 15px; } #sub.product .con02 .right .g_slide a .txt p{ font-size: 13px; } #sub.product .con02 .right .g_slide a .txt p br{ display: none; } #sub.product .con02 .right .g_slide a .txt span{ font-size: 13px; } #sub.product .con02 .right .g_slide a { width: 240px; } #sub.product .con02 .inner{ gap: 30px; } #sub.pro .p_visual{ gap: 20px; flex-flow: column; margin-bottom: 40px; } #sub.pro .p_visual > div{width: 100%;} #sub.pro .p_visual .txt strong{ font-size: 18px; margin-top: 2px; } #sub.pro .con03 .f_list ul li button{ font-size: 14px; padding: 8px 15px; height: auto; } #sub.pro .con03 .f_list ul li .answer p{ font-size: 13px; } #sub.pro .con03 .f_list ul li .answer { padding: 15px; } #sub.product .con02 .left .btn{ gap: 5px; } #sub.product .con02 .left .btn > div{ width: 32px; height: 32px; } #sub.product .con02 .left .btn > div svg{ width: 6px; height: auto; } #sub.product .con02 .inner{ gap: 20px; } #sub.board .g_list ul li a .txt p{ height: auto; } #sub.rnd .sub_con > div.con07 .r_tit p br{display: none} #sub.rnd .con06 .wrap > div, #sub.rnd .con05 ul li{width: 100%} #sub.rnd .con05 ul li .wrap p{font-size: 13px} html, body{ overflow-x: hidden; } }