/* 서브 공통 */ #sub .br{ display: block; } #sub .inner{ width: 1680px; margin: 0 auto; } #sub .inner2{ width: 1440px; margin: 0 auto; } #sub .inner3{ width: 1400px; margin: 0 auto; } #sub .sub_visual{ height: 580px; position: relative; display: flex; flex-flow: column; align-items: center; text-align: center; padding-top: 240px; gap: 80px; } #sub .sub_visual .s_tit{ display: flex; flex-flow: column; align-items: center; gap: 20px; } #sub .sub_visual .s_tit .mask{ overflow: hidden; } #sub .sub_visual .s_tit strong{ font-size: 60px; font-weight: 600; color:#242424; display: block; line-height: 1.3em; } #sub .sub_visual .s_tit em{ font-size: 24px; font-weight: 600; color:#2A7D48; display: block; line-height: 1.3em; } #sub .sub_visual .s_tab button{ display: none; } #sub .sub_visual .s_tab .inner ul{ display: flex; flex-flow: wrap; gap: 40px 80px; justify-content: center; } #sub .sub_visual .s_tab .inner ul > li{ position: relative; } #sub .sub_visual .s_tab .inner ul > li:before{ content:""; display: block; width: 1px; height: 16px; background-color: #D1D1D1; position: absolute; left: -40px; top: 50%; transform: translate(0,-50%); } #sub .sub_visual .s_tab .inner ul > li > a{ font-size: 20px; font-weight: 500; color:#747474; } #sub .sub_visual .s_tab .inner ul > li:first-child:before{ display: none; } #sub .sub_visual .s_tab .inner ul > li.no_line:before{ display: none; } #sub .sub_visual .s_tab .inner ul > li.on > a{ color: #377D2A; font-weight: 600; } #sub.product .con{ position: relative; padding-top: 60px; } #sub.product .con:after{ content:""; display: block; width: 1680px; height: 1px; background-color: #E9E9E9; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); } #sub .con{ padding-bottom: 160px; } #sub .go_btn2 { width: 360px; height: 60px; } #sub .go_btn2 a ul{ right: auto; left: 0; transition: left .4s; width: 720px !important; } #sub .go_btn2 a ul li{ width: 360px; } #sub .go_btn2 a:hover ul{ right: auto; left: -100%; } #sub .go_btn2 a ul li:nth-child(1){ background-color: #377D2A; } #sub .go_btn2 a ul li:nth-child(2){ background-color: #8BB94E; } #sub .go_btn3 { width: 200px; height: 60px; } #sub .go_btn3 a ul{ right: auto; left: 0; transition: left .4s; width: 400px !important; } #sub .go_btn3 a ul li{ width: 200px; } #sub .go_btn3 a:hover ul{ right: auto; left: -100%; } #sub .go_btn3 a ul li:nth-child(1){ background-color: #377D2A; } #sub .go_btn3 a ul li:nth-child(2){ background-color: #8BB94E; } #sub .m_title{ display: flex; flex-flow: column; } #sub .m_title .mask{ overflow: hidden; } #sub .m_title .mask strong{ font-size: 40px; line-height: 1.5em; color: #3B403D; font-weight: 700; display :block; } #sub .m_title .mask strong{ transform: translateY(100%) !important; transition: transform 1s; } #sub .on .m_title .mask strong{ transform: translateY(0) !important; } #sub .p01{ font-size: 20px; line-height: 32px; color: #4C554F; } #sub .p01 span{ font-weight: 600; color:#377D2A; } /* 게시판 공통 */ #sub.board .b_top{ display:flex; justify-content: space-between; margin-bottom: 40px; align-items: flex-end; } #sub.board .b_top .search{ width: 340px; height: 52px; position: relative; border-radius: 50px; background-color: #F6F7F8; } #sub.board .b_top .search input{ width: 100%; height: 100%; border: none; background-color: transparent; font-size: 18px; color:#4C554F; padding-left: 24px; } #sub.board .b_top .search .search_b{ position: absolute; right: 24px; top: 50%; transform: translate(0,-50%); z-index: 1; } #sub.board .b_top .b_tit{ display: flex; flex-flow: column; gap: 28px; } #sub.board .b_top .b_tit strong{ font-size: 60px; font-weight: 700; color:#3B403D; } #sub.board .b_top .b_tit p{ font-size: 22px; font-weight: 400; color:#4C554F; } #sub.board .page{ margin-top: 100px; display: flex; justify-content: center; } #sub.board .page ul{ display:flex; justify-content: center; gap: 12px; } #sub.board .page ul li{ width: 40px; height: 40px; } #sub.board .page ul li a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color:#848F88; } #sub.board .page ul .num a{ background-color: #F6F7F8; border-radius: 50%; } #sub.board .page ul .num.on a{ background-color: #377D2A; color: #fff; } #sub.board .page ul .first{ background: url('/img/sub/page_first.jpg') center center no-repeat; } #sub.board .page ul .prev{ background: url('/img/sub/page_prev.jpg') center center no-repeat; } #sub.board .page ul .next{ background: url('/img/sub/page_next.jpg') center center no-repeat; } #sub.board .page ul .last{ background: url('/img/sub/page_last.jpg') center center no-repeat; } #sub.board .b_top .go_btn2{ width: auto; } #sub.board .b_top .go_btn2 a{ width: 360px; } #sub.board .b_top .go_btn{ display:flex; flex-flow: row; gap: 10px; } /* 제품소개 */ #sub.board .p_list ul{ display: flex; flex-flow: wrap; gap: 60px 26px; } #sub.board .p_list ul li{ width: calc(25% - 19.5px); } #sub.board .p_list ul li a .img{ position: relative; overflow: hidden; border-radius: 10px; border-radius: 10px; border: 1px solid #EEEEEE; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;} #sub.board .p_list ul li a .img .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(241,241,241,0.8); backdrop-filter: blur(10px) brightness(110%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; } #sub.board .p_list ul li a .img .hover .txt{ display:flex; flex-flow: column; gap: 12px; align-items: center; text-align: center; } #sub.board .p_list ul li a .img .hover .txt .plus{ margin-top: 28px; width: 76px; height: 76px;display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: #377D2A; } #sub.board .p_list ul li a .img .hover .txt span{ display: flex; align-items: center; padding: 0 20px; border-radius: 70px; border: 1px solid #377D2A; height: 39px;font-size: 16px; color: #377D2A; } #sub.board .p_list ul li a .img .hover .txt strong{ font-size: 22px; font-weight: 600; color:#000000; } #sub.board .p_list ul li a .img img{ display: block; width: 100%; } #sub.board .p_list ul li a > .txt{ margin-top: 14px; } #sub.board .p_list ul li a > .txt strong{ font-size: 22px; font-weight: 600; color:#000000; transition: opacity .3s; } #sub.board .p_list ul li a:hover .img .hover{ opacity: 1; } #sub.board .p_list ul li a:hover > .txt strong{ opacity: 0; } #sub.board .b_cate{ padding-bottom: 60px; border-bottom: 1px solid #E9E9E9; } #sub.board .b_cate ul{ display: flex; flex-flow: wrap; gap: 14px; } #sub.board .b_cate ul li a{ display:flex; height: 52px; padding: 0 24px; border-radius: 70px; border: 1px solid #AAB8AF; color: #AAB8AF; font-size: 18px; align-items: center; } #sub.board .b_cate ul li.on a{ border-color: #377D2A; color:#377D2A; } #sub.p_view .con{ margin-top: 80px; } #sub.p_view .con .pv_tit{ display: flex; align-items: flex-end; justify-content: space-between; border-right: 1px solid #E9E9E9; border-left: 1px solid #E9E9E9; padding: 0 40px; padding-top: 35px; padding-bottom: 30px; border-bottom: 1px solid #E9E9E9; } #sub.p_view .con .pv_tit .left{ display: flex; flex-flow: column; gap: 7px; } #sub.p_view .con .pv_tit .left strong{ font-size: 48px; font-weight: 700; color:#242424; } #sub.p_view .con .pv_tit .left p{ font-size: 16px; color:#2A7D48; font-weight: 500; } #sub.p_view .con .pv_loc ul{ display:flex; gap :24px; } #sub.p_view .con .pv_loc ul li{ position: relative; font-size: 16px; color:#747474; } #sub.p_view .con .pv_loc ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; border: 1px solid #747474; box-sizing: border-box; position: absolute; right: -14px; top: 50%; transform: translate(0,-50%); } #sub.p_view .con .pv_loc ul li:last-child{ font-weight: 600; } #sub.p_view .con .pv_loc ul li:last-child:after{ display: none; } #sub.p_view .pv_con{ border-bottom: 1px solid #E9E9E9; } #sub.p_view .pv_con .inner{ display: flex; border-right: 1px solid #E9E9E9; border-left: 1px solid #E9E9E9; } #sub.p_view .pv_con .pv_left{ width: 705px; border-right: 1px solid #e9e9e9; } #sub.p_view .pv_con .pv_left img{ width: 100%; height: auto; } #sub.p_view .pv_con .pv_right{ width: calc(100% - 705px); overflow: hidden; display: flex; flex-flow: column; gap: 18px; background-color: #F8F9FA; justify-content: space-between; } #sub.p_view .pv_con .pv_right .pv_info{ height: 230px; padding: 12px; background-color: #fff; border-bottom: 1px solid #e9e9e9; } #sub.p_view .pv_con .pv_right .pv_info > div{ height: 100%; overflow-y: scroll; font-size: 18px; line-height: 2em; color:#292D2B; padding: 38px; } #sub.p_view .pv_con .pv_right .pv_table table{ width: 100%; border-top: 1px solid #E9E9E9; background-color: #fff; } #sub.p_view .pv_con .pv_right .pv_table table th{ width: 210px; font-size: 18px; text-align: left; font-weight: 600; color:#4C554F; height: 60px; vertical-align: middle; padding-left: 50px; border-bottom: 1px solid #E9E9E9; border-right: 1px solid #E9E9E9; } #sub.p_view .pv_con .pv_right .pv_table table td{ font-size: 18px; text-align: left; font-weight: 400; color:#2A7D48; height: 60px; vertical-align: middle; padding-left: 50px; border-bottom: 1px solid #E9E9E9; } #sub.p_view .pv_con .pv_right .p_slide{ background-color: #fff; } #sub.p_view .pv_con .pv_right .p_slide .ps_top{ height: 60px; border-bottom: 1px solid #E9E9E9; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; } #sub.p_view .pv_con .pv_right .p_slide .ps_top .ps_tit strong{ font-size: 18px; color:#4C554F; font-weight: 600; } #sub.p_view .pv_con .pv_right .p_slide .ps_top .swiper-pagination{ position: static; width: auto; display: flex; gap: 4px; } #sub.p_view .pv_con .pv_right .p_slide .ps_top .swiper-pagination .swiper-pagination-bullet{ margin: 0; border-radius: 0; width: 16px; height: 2px; background-color: #A9C8B4; opacity: 1; } #sub.p_view .pv_con .pv_right .p_slide .ps_top .swiper-pagination .swiper-pagination-bullet-active{ background-color: #2A7D48; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt{ display: flex; height :145px; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .ps_slide{ width: calc(100% - 100px); } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .swiper-button-prev{ position: static; margin-top: 0; width: 50px; height: 100%; background: url('/img/sub/ps_prev.png') center center no-repeat; background-color: #F8F9FA; border-right: 1px solid #E9E9E9; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .swiper-button-prev:after{ display: none; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .swiper-button-next{ position: static; margin-top: 0; width: 50px; height: 100%; background: url('/img/sub/ps_next.png') center center no-repeat; background-color: #F8F9FA; border-left: 1px solid #E9E9E9; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .swiper-button-next:after{ display: none; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a{ display: block; width: 100%; display: flex; gap: 40px; align-items: center; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .img{ border-right: 1px solid #e9e9e9; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .img img{ width: 145px; height: auto; display: block; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .txt{ width: calc(100% - 195px); padding-right: 40px; height: 100%; display: flex; align-items: center; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .txt p{ font-size: 22px; font-weight: 400; color:#4C554F; } #sub.news .b_top { margin-bottom: 80px; } #sub.news .b_top .search{ width: 520px; } #sub.board .n_list{ margin-top: 60px; } #sub.board .n_list ul{ display:flex; gap: 70px 90px; flex-flow: wrap; } #sub.board .n_list ul li{ width: calc(33.333333% - 60px); } #sub.board .n_list ul li a{ position: relative; display: block; } #sub.board .n_list ul li a .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-flow: column; justify-content: space-between; padding: 40px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px) brightness(110%); opacity: 0; transition: opacity .4s; z-index: 1; } #sub.board .n_list ul li a:hover .hover{ opacity: 1; } #sub.board .n_list ul li a .hover .txt{ display: flex; flex-flow: column; gap: 10px; } #sub.board .n_list ul li a .hover .txt strong{ display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 22px; font-weight: 600; color: #000; line-height: 1.5em; } #sub.board .n_list ul li a .hover .txt p{ font-size: 18px; font-weight: 300; color: #666666; } #sub.board .n_list ul li a .hover .bt{ display:flex; align-items: center; justify-content: space-between; } #sub.board .n_list ul li a .hover .bt .tag{ display: flex; gap: 8px; } #sub.board .n_list ul li a .hover .bt .tag span{ font-size: 14px; color:#377D2A; padding: 5px 10px; border-radius: 50px; border: 1px solid #377D2A; } #sub.board .n_list ul li a .hover .bt .plus{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #377D2A; } #sub.board .n_list ul li a .wrap{ position: relative; border-radius: 10px; overflow: hidden; } #sub.board .n_list ul li a .img img{ display: block; width: 100%; transition: transform .4s; } #sub.board .n_list ul li a:hover .img img{ transform: scale(1.1); } #sub.board .n_list ul li a .txts{ margin-top: 20px; margin-bottom: 26px; display: flex; flex-flow: column; gap: 10px; transition: opacity .3s; } #sub.board .n_list ul li a .txts strong{ font-size: 22px; font-weight: 600; color:#000000; } #sub.board .n_list ul li a .txts p{ font-size: 18px; color:#666666; font-weight: 300; } #sub.board .n_list ul li a .txt_cate{ display: flex; flex-flow: wrap; gap: 10px; transition: opacity .3s; } #sub.board .n_list ul li a .txt_cate span{ height: 36px; border-radius: 50px; background-color: #F6F7F8; padding: 0 20px; display: flex; align-items: center; font-size: 14px; font-weight: 400; color:#4C554F; } #sub.board .n_list ul li a:hover .txts{ opacity: 0; } #sub.board .n_list ul li a:hover .txt_cate{ opacity: 0; } #sub.view .b_top{ margin-bottom: 60px; } #sub.view .v_tit{ display: flex; justify-content: space-between; align-items: center; padding: 36px 0; border-top: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9; } #sub.view .v_tit dl{ width: calc(100% - 120px); display:flex; gap: 30px; } #sub.view .v_tit dl dt{ font-size: 22px; font-weight: 400; color: #000; } #sub.view .v_tit dl dd{ font-size: 22px; font-weight: 600; color:#000000; } #sub.view .v_tit p{ font-size: 18px; font-weight: 300; color:#666666; } #sub.view .v_con{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; min-height: 500px; } #sub.view .v_con .v_cate{ display: flex; flex-flow: wrap; gap: 10px; margin-bottom: 40px; } #sub.view .v_con .v_cate span{ height: 36px; border-radius: 50px; background-color: #F6F7F8; padding: 0 20px; display: flex; align-items: center; font-size: 14px; font-weight: 400; color:#4C554F; } #sub.view .v_con .v_info{ line-height: 1.5em; } #sub.view .go_btn2{ height: 60px; width: 200px; transition: width .4s; margin: 0 auto; margin-top: 80px; } #sub.view .go_btn2 a ul{ width: 400px !important; transition: left .4s, width .4s; } #sub.view .go_btn2 a ul li{ width: 200px; transition: width .4s; } #sub.view .go_btn2:hover{ width: 220px; } #sub.view .go_btn2:hover a ul{ width: 440px !important; } #sub.view .go_btn2:hover a ul li{ width: 220px; } /* 상담문의 */ #sub.contact .sub_visual .s_tab strong{ font-size: 20px; font-weight: 600; color:#377D2A; display: inline-block; position: relative; } #sub.contact .sub_visual .s_tab strong:after{ content:""; display: block; width: 1px; height: 16px; background-color: #D1D1D1; position: absolute; right: -40px; top: 50%; transform: translate(0,-50%); } #sub.contact .sub_visual .s_tab strong:before{ content:""; display: block; width: 1px; height: 16px; background-color: #D1D1D1; position: absolute; left: -40px; top: 50%; transform: translate(0,-50%); } #sub.contact .b_top{ width: 100%; padding-bottom: 60px; border-bottom: 1px solid #E9E9E9; margin-bottom: 100px; } #sub.contact .b_top .b_tit{ gap: 14px; width: 100%; } #sub.contact .b_top .b_tit strong{ display: block; margin-bottom: 16px; } #sub.contact .b_top .b_tit p{ font-size: 24px; font-weight: 500; color:#3B403D } #sub.contact .b_top .b_tit em{ font-size: 20px; font-weight: 500; color: #4C554F; line-height: 38px; } #sub.contact .go_btn{ margin: 0 auto; margin-top: 80px; } #sub.contact .f_box{ display: flex; flex-flow: column; gap: 130px; } #sub.contact .f_box .fb{ display: flex; gap: 60px; flex-flow: column; } #sub.contact .f_box .fb .fb_wrap{ display: flex; gap: 60px; } #sub.contact .f_box .fb .fb_wrap .f_input{ width: calc(33.33333333% - 40px); } #sub.contact .f_box .fb .f_input{ display: flex; flex-flow: column; gap: 18px; } #sub.contact .f_box .f_input > .f_t{ display:flex; gap: 20px; } #sub.contact .f_box .f_input > .f_t p{ font-size: 18px; color: #4C554F} #sub.contact .f_box .f_input strong{ font-size: 20px; font-weight: 500; color:#3B403D; } #sub.contact .f_box .f_input strong span{ color:#377D2A; } #sub.contact .f_box .f_input .f_select{ position: relative; } #sub.contact .f_box .f_input .f_select .label{ height: 68px; width: 100%; position: relative; text-align: left; display: flex; align-items: center; border-bottom: 1px solid #9E9E9E; } #sub.contact .f_box .f_input .f_select .label span{ font-size: 20px; font-weight: 500; color:#3B403D; } #sub.contact .f_box .f_input .f_select .label svg{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); } #sub.contact .f_box .f_input .f_select .optionList{ position: absolute; left: 0; top: 100%; transform: translateY(20px); z-index: 10; background-color: #fff; border: 1px solid #E4ECE7; border-radius: 20px; width: 100%; padding: 10px 30px; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .5s; max-height: 260px; overflow-y: scroll; } #sub.contact .f_box .f_input .f_select.active .optionList{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #sub.contact .f_box .f_input .f_select .optionList .optionItem{ height: 60px; display: flex; align-items: center; color: #868F89; font-size: 20px; cursor: pointer; transition: color .3s; } #sub.contact .f_box .f_input .f_select .optionList .optionItem:hover{ color: #3B403D; } #sub.contact .f_box .f_input .f_select .optionList::-webkit-scrollbar { width: 30px; } #sub.contact .f_box .f_input .f_select .optionList::-webkit-scrollbar-thumb { background: #2A7D48; /* 스크롤바 색상 */ border-radius: 30px; /* 스크롤바 둥근 테두리 */ border: 13px solid rgba(255,255,255,1); } #sub.contact .f_box .f_input .f_select .optionList::-webkit-scrollbar-track { background: transparent; /*스크롤바 뒷 배경 색상*/ } #sub.contact .f_box .f_input .f_txt{ height: 68px; width: 100%; border: none; border-bottom: 1px solid #9e9e9e; color: #3B403D; font-size: 20px; font-weight: 500; } #sub.contact .f_box .f_input .f_txt:focus{ border-color: #2A7D48; } #sub.contact .f_box .f_input .t_area{ height: 220px; width: 100%; border: none; border-bottom: 1px solid #9e9e9e; color: #3B403D; font-size: 20px; font-weight: 500; } #sub.contact .f_box .f_input .files{ height: 68px; width: 100%; border-bottom: 1px solid #9e9e9e; position: relative; display:flex; align-items: center; } #sub.contact .f_box .f_input .files p{ font-size: 20px; color:#9E9E9E; display: block; width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sub.contact .f_box .f_input .files input{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 2; } #sub.contact .f_box .f_input .files input:hover{ cursor: pointer;} #sub.contact .f_box .f_input .files .add_file{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); z-index: 0; } #sub.contact .check_box{ display: flex; flex-flow: column; gap: 20px; } #sub.contact .check_box > .box{ border-radius: 10px; background-color: rgba(246,247,248,0.7);} #sub.contact .check_box > .box .c_top{ width:100%; height: 105px; display:flex; align-items: center; justify-content: space-between; padding: 0 40px; cursor: pointer; } #sub.contact .check_box > .box .c_top strong{ font-size: 20px; font-weight: 600; color: #3B403D; } #sub.contact .check_box > .box .c_top label{ font-size: 20px; font-weight: 600; color: #3B403D; } #sub.contact .check_box > .box .b_info{ padding: 0 40px; padding-bottom: 40px; display: none; } #sub.contact .check_box > .box .b_info .info_p{ font-size: 20px; color: #9E9E9E; margin-bottom: 70px; } #sub.contact .check_box > .box .c_top .chk{ display: flex; position: relative; gap: 12px; } #sub.contact .check_box > .box .c_top .chk > div{ display: flex; gap: 12px; align-items: center; } #sub.contact .check_box > .box .c_top .chk .chk_in{ width: 20px; height: 20px; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); opacity: 0; } #sub.contact .check_box > .box .c_top .chk .check-icon{ width:20px; height: 20px; background: url('/img/sub/chk.png') center center no-repeat; display: block; } #sub.contact .check_box > .box .c_top .chk .chk_in:checked + div .check-icon{ background: url('/img/sub/chk_on.png') center center no-repeat; } #sub.contact .check_box > .box .b_info .p_box{ height: 204px; } #sub.contact .check_box > .box .b_info .p_box p{ height: 100%; overflow-y: scroll; white-space: pre-wrap; font-size: 20px; line-height: 32px; color: #9E9E9E} #sub.contact .check_box > .box .c_top .maketing{ display: flex; gap: 50px; align-items: center; } #sub.contact .check_box > .box .c_top .maketing:before{ content:""; display: block; width: 1px; height: 15px; background-color: #D1D1D1; } #sub.contact .check_box > .box .c_top .maketing ul{ display:flex; gap: 60px; } #sub.contact .check_box > .box .c_top .maketing ul li .chk > div label{ font-weight: 500; color:#4C554F; font-size: 20px; } #sub.contact .check_box > .box .c_top .wrap{ display: flex; gap: 50px; align-items: center; } #sub.c_result .b_top .b_tit{ width: calc(100% - 260px); } #sub.c_result .b_top .b_tit strong{ font-size: 50px; } #sub.c_result .b_top{ margin-bottom: 0 !important;} #sub.se_list .se_tit{ margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #E9E9E9; } #sub.se_list .se_tit strong{ font-size: 32px; font-weight: 600; color: #3B403D; } #sub.se_list .con{ display: flex; flex-flow: column; gap: 140px; } /* 회사소개 */ /* .main_visual .main_slider .slide_box .main_img .videobcg{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } */ #sub .con_w > div{ margin-top: 200px; } #sub .con_w > div:nth-child(1){ margin-top: 0; } #sub.company .con01{ height: 100vh; position: relative; overflow: hidden; } #sub.company .con01 .bg{ width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; z-index: -1; } #sub.company .con01 .bg .video{ width: 100%; height: 100%; overflow: hidden; clip-path: inset(25% 20% 25% 20% round 20px); position: relative; } #sub.company .con01 .bg .video .dim{ content:""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; } #sub.company .con01 .bg .video video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.8); } #sub.company .con01 .txt .inner{ display: flex; justify-content: space-between; } #sub.company .con01 .txt .s_tit{ display:flex; flex-flow: column; gap: 12px; height: 100vh; justify-content: center; transform: translateX(70px); opacity: 0; } #sub.company .con01 .txt .s_tit strong{ font-size: 50px; color:#FFFFFF; font-weight: 500; transform: translateY(-50px);} #sub.company .con01 .txt .s_tit p{ font-size: 40px; line-height: 1.5em; color:#FFFFFF; transform: translateY(-50px);} #sub.company .con01 .txt .list{ width: calc(100% - 600px); display: flex; flex-flow: column; transform: translateX(100px); opacity: 0; } #sub.company .con01 .txt .list > div{ height: 100vh; display: flex; flex-flow: column; justify-content: center; } #sub.company .con01 .txt .list > div .wrap{ display: flex; flex-flow: column; gap: 25px; padding-right: 120px; padding-top: 45px; padding-left: 40px; position: relative; } #sub.company .con01 .txt .list > div .line{ width: calc(100% + 300px); background-color: #fff; height: 1px; position: absolute; left: 0; top: 0; } #sub.company .con01 .txt .list > div .wrap strong{ font-size: 32px; font-weight: 500; color:#FFFFFF; } #sub.company .con01 .txt .list > div .wrap p{ font-size: 22px; font-weight: 500; color:#EFEFEF; line-height: 38px; } #sub.company .con{ padding-bottom: 0; } #sub.company .con02 { } #sub.company .con02 .inner{ display: flex; gap: 250px; border-bottom: 1px solid #E9E9E9; padding-bottom: 130px; } #sub.company .con02 .inner .p01{ white-space: pre-wrap; } #sub.company .con02 .inner .p01 br{ display: none; } #sub.company .con02 .inner .p01{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #sub.company .con02.on .inner .p01{ transform: translateY(0); opacity: 1; } #sub.company .con03 .inner{ display: flex; flex-flow: row-reverse; align-items: center; justify-content: space-between; } #sub.company .con03 .img{ height: 659px; overflow: hidden; border-radius: 20px; } #sub.company .con03 .txt{ display: flex; flex-flow: column; gap: 40px; } #sub.company .con03 .right{ display: flex; flex-flow: column; gap: 18px; align-items: flex-end; } #sub.company .con03 .right svg{ width: 232px; height: auto; } #sub.company .con03.on .right svg .cls-11{ transition: stroke-dashoffset .5s; transition-delay: 1s; } #sub.company .con03.on .right svg .cls-12{ transition: stroke-dashoffset .2s; transition-delay: 1.5s; } #sub.company .con03.on .right svg .cls-13{ transition: stroke-dashoffset .2s; transition-delay: 1.7s; } #sub.company .con03.on .right svg .cls-14{ transition: stroke-dashoffset .3s; transition-delay: 1.9s; } #sub.company .con03.on .right svg .cls-15{ transition: stroke-dashoffset .8s; transition-delay: 2.2s; } #sub.company .con03.on .right svg .cls-16{ transition: stroke-dashoffset .2s; transition-delay: 3s; } #sub.company .con03.on .right svg .cls-17{ transition: stroke-dashoffset .3s; transition-delay: 3.2s; } #sub.company .con03.on .right svg .cls-18{ transition: stroke-dashoffset .5s; transition-delay: 3.5s; } #sub.company .con03.on .right svg .cls-1{ stroke-dashoffset: 0 !important; } #sub.company .con03 .p01{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #sub.company .con03.on .p01{ transform: translateY(0); opacity: 1; } #sub.company .con03 .right{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .4s; } #sub.company .con03.on .right{ transform: translateY(0); opacity: 1; } #sub.company .con04{ background-color: #fff; padding-bottom: 160px; } #sub.company .con04 .inner{ position: relative; display:flex; align-items: flex-start; justify-content: flex-end; } #sub.company .con04 .inner > div{ width: 50%; } #sub.company .con04 .m_title{ position: relative; display: flex; text-align: left; justify-content: center; gap: 20px; height: 100vh; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); } #sub.company .con04 .m_title .s_wrap{ position: relative; } #sub.company .con04 .m_title .p_wrap{ position: relative; } #sub.company .con04 .circle{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub.company .con04 .m_title .circle svg{ overflow: visible; } #sub.company .con04 .m_title strong{ font-size: 60px; font-weight: 500; color: #3B403D; width: fit-content; display: block; } #sub.company .con04 .m_title p{ font-size: 22px; line-height: 38px; color:#4C554F; width: fit-content;} #sub.company .con04 .h_list{ display: flex; gap : 140px; flex-flow: column; position: relative; margin-top: 200vh; } #sub.company .con04 .h_list > div{ display: flex; flex-flow: column; gap: 20px; align-items: flex-start; text-align: left; position: relative; padding-left: 100px; opacity: 0; } #sub.company .con04 .h_list > div > strong{ display: block; position: relative; font-size: 48px; font-weight: 400; color: #3B403D; transform: translateX(100px); } #sub.company .con04 .h_list > div:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #377D2A; position: absolute; left: -3px; top: 30px; } #sub.company .con04 .h_list > div > ul{ display: flex; flex-flow: column; transform: translateX(180px);} #sub.company .con04 .h_list > div > ul > li{ font-size: 20px; line-height: 2em; color: #4C554F; font-weight: 300; } #sub.company .con04 .line{ display: block; position: absolute; left: 50%; top: 0; width: 1px !important; height: 100vh; background-color: #ECECEC; padding: 0 !important; opacity: 0; } #sub.company .con04 .line span{ position: absolute; left: 0; top: 0; width: 100%; height: 0; background-color: #377D2A; display: block; } /*하이윈캐릭터*/ #sub.character .con_w > div{ margin-top: 150px; } #sub.character .con01{ background-color: #56B879; height: 750px; position: relative; } #sub.character .con01:after{ content:""; display: block; height: calc(100% - 80px); aspect-ratio: 1/1; position: absolute; left: -110px; top: 50%; transform: translate(0,-50%) scale(0); background-color: #6DD492; border-radius: 50%; opacity: 0; transition: opacity 1s, transform 1s; } #sub.character .con01 .inner{ display: flex; align-items: center; gap: 110px; height: 100%; position: relative; z-index: 1; } #sub.character .con01 .inner > div{ width: 50%; } #sub.character .con01 .inner .img{ display: flex; align-items: center; justify-content: center; } #sub.character .con01 .inner .img img{ display: block; max-width: 100%; } #sub.character .con01 .txt p{ font-size: 24px; font-weight: 400; color:#FFFFFF; } #sub.character .con01 .txt{ display: flex; flex-flow: column; gap: 20px; } #sub.character .con01 .txt strong{ font-size: 68px; line-height: 1.2em; color:#FFFFFF; font-weight: 700; } #sub.character .con02 .inner{ display: flex; align-items: center; flex-flow: row-reverse; gap: 60px; } #sub.character .con02 .inner > div{ width: 50%; } #sub.character .con02 .inner .img{ display:flex; justify-content: flex-end; } #sub.character .con02 .inner .img img{ display: block; max-width: 100%; } #sub.character .con02 .inner .txt{ display: flex; flex-flow: column; gap: 60px; } #sub.character .con02 .inner .txt strong{ font-size: 40px; line-height: 1.5em; color: #3B403D; font-weight: 500; } #sub.character .con02 .inner .txt p{ font-size: 20px; line-height: 38px; color:#4C554F; } #sub.character .con03 .img_slide{ display: flex; } #sub.character .con03 .img_slide .wrap{ display: flex; gap: 40px; animation: slide 30s linear infinite; } #sub.character .con03 .img_slide .wrap .box{ display: flex; gap: 40px; } #sub.character .con03 .img_slide .wrap .box > div{ position: relative; } #sub.character .con03 .img_slide .wrap .box .img img{ border-radius: 20px; display: block; box-shadow: 4px 4px 15px rgba(68,68,68,0.08); } #sub.character .con03 .img_slide .wrap .box .txt{ position: absolute; left: 0; bottom: 30px; text-align: center; width: 100%; text-align: center; } #sub.character .con03 .img_slide .wrap .box > div .txt strong{ font-size: 20px; font-weight: 500; } #sub.character .con03 .img_slide .wrap .box > div:nth-child(1) .txt strong{ color:#2A7D48; } #sub.character .con03 .img_slide .wrap .box > div:nth-child(2) .txt strong{ color:#6CA720; } #sub.character .con03 .img_slide .wrap .box > div:nth-child(3) .txt strong{ color:#DEB821; } #sub.character .con03 .img_slide .wrap .box > div:nth-child(4) .txt strong{ color:#3298C7; } #sub.character .con01.on:after{ transform: translate(0,-50%) scale(1); opacity: 1; } /* 오시는길 */ #sub.location .con01{ border-top: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9; } #sub.location .con01 .inner{ } #sub.location .m_top{ display:flex; flex-flow: row-reverse; border-right: 1px solid #E9E9E9; border-left: 1px solid #e9e9e9; } #sub.location .m_top .maps{ width: calc(100% - 400px); height: 600px; } #sub.location .m_top .maps .root_daum_roughmap{ width: 100%; height: 100%;} #sub.location .m_top .maps .root_daum_roughmap .wrap_map{ width: 100%; height: 100%; } #sub.location .m_top .maps .root_daum_roughmap .map_border{ display: none; } #sub.location .m_top .m_btn{ display:flex; flex-flow: column; width: 400px; border-right: 1px solid #e9e9e9; } #sub.location .m_top .m_btn > div{ height: 50%; display: flex; flex-flow: column; justify-content: space-between; padding: 20px; border-bottom: 1px solid #e9e9e9; } #sub.location .m_top .m_btn > div:last-child{ border-bottom: none; } #sub.location .m_top .m_btn > div > strong{ display: block; text-align: left; font-size: 24px; font-weight: 600; color:#4C554F; } #sub.location .m_top .m_btn > div > ul{ display: flex; gap: 10px; justify-content: flex-end } #sub.location .m_top .m_btn > div > ul > li > a{ height: 60px; width: 146px; display: flex; align-items: center; text-align: center; font-size: 20px; color:#B1B7B3; border: 1px solid #B1B7B3; justify-content: center; } #sub.location .m_top .m_btn > div > ul > li.on > a{ border-radius: 100px; border-color: #91C54D; color: #fff; background-color: #91C54D; font-weight: 600; } #sub.location .m_bt{ border-top: 1px solid #E9E9E9; } #sub.location .m_bt .inner{ display:flex; } #sub.location .m_bt .m_info{ width: 400px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; background-color: #FCFCFC; } #sub.location .m_bt .m_info strong{ font-size: 40px; font-weight: 600; color:#E9E9E9; } #sub.location .m_bt .info_box{ display: flex; background-color: #377D2A; height: 100px; width: calc(100% - 400px); border-right: 1px solid #E9E9E9; } #sub.location .m_bt .info_box > dl{ width: 25%; display:flex; justify-content: center; text-align: center; align-items: center; height: 100%; border-right: 1px solid #E9E9E9; gap: 14px; } #sub.location .m_bt .info_box > dl > dd{ font-size: 18px; font-weight: 500; color:#D9E9DE; } #sub.location .m_bt .info_box > dl > dt{ font-size: 18px; font-weight: 600; color:#FFFFFF; } #sub.location .m_bt .info_box > dl:last-child{ border-right: none; } #sub.location .m_bt .info_box > dl:nth-child(1){ width: 50%; } /* 글로벌 */ #sub.global .b_top{ border-bottom: 1px solid #e9e9e9; padding-bottom: 60px; margin-bottom: 0; } #sub.global .graphic{ border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: center; padding: 30px; } #sub.global .graphic svg{ max-width: 100%; height: auto; } #sub.global .g_tab{ border-top: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9; padding: 60px 0; } #sub.global .g_tab .inner{ display: flex; gap: 100px; } #sub.global .g_tab .inner > div{ display:flex; flex-flow: column; gap: 14px; } #sub.global .g_tab .inner > div > strong{ font-size: 20px; font-weight: 600; color:#3B403D; } #sub.global .g_tab .inner > div > ul{ display:flex; gap: 10px; } #sub.global .g_tab .inner > div > ul > li > a{ height: 43px; display: flex; align-items: center; padding: 0 20px; font-size: 18px; color:#AAB8AF; text-align: center; border-radius: 100px; border: 1px solid #AAB8AF; transition: border .3s, color .3s; } #sub.global .g_tab .inner > div > ul > li > a:hover{ color: #377D2A; border-color: #377D2A; } #sub.global .graphic svg .hover{ opacity: 0; transition: opacity .3s; } #sub.global .graphic svg .dots{ cursor: pointer; } #sub.global .graphic svg .dots:hover{ z-index: 10; } #sub.global .graphic svg .dots:hover .hover{ opacity: 1; } #sub.global .graphic svg .dots:hover g[data-name="타원 28"]{ stroke: #91EBB0; } #sub.global .graphic svg .dots:hover ellipse[data-name="타원 27"]{ fill: #5FCF86; } #sub.global .graphic svg .dots.on{ z-index: 10; } #sub.global .graphic svg .dots.on .hover{ opacity: 1; } #sub.global .graphic svg .dots.on g[data-name="타원 28"]{ stroke: #91EBB0; } #sub.global .graphic svg .dots.on ellipse[data-name="타원 27"]{ fill: #5FCF86; } #sub.global .g_tab .inner > div > ul > li.on > a{ color: #377D2A; border-color: #377D2A; } /* esg */ #sub.esg .sub_visual:after{ content:""; display: block; width: calc(100% - 240px); height: 1px; background-color: #E9E9E9; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); } #sub.esg .con01 { position: relative; height: 100vh; overflow: hidden; } #sub.esg .con01 .bg { height: 100%; } #sub.esg .con01 .bg .video{ clip-path: inset(25% 20% 25% 20% round 20px); position: relative; height: 100%; } #sub.esg .con01 .bg .video .dim{ position :absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } #sub.esg .con01 .txt { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; } #sub.esg .con01 .txt .inner{ display:flex; height: 100%; align-items: center; position :relative; } #sub.esg .con01 .txt .p_box{ position: absolute; right: 0; transform: translateX(100px);top: 0; display: flex; align-items: center; height: 100%; opacity: 0; } #sub.esg .con01 .txt .p_box p{ color:#EFEFEF; font-size: 22px; line-height: 38px; font-weight: 500; } #sub.esg .con01 .txt .s_tit{ display: flex; flex-flow: column; gap: 30px; justify-content: center; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -260px; text-align: left; opacity: 0; } #sub.esg .con01 .txt .s_tit p{ font-size: 40px; line-height: 1.5em; color:#FFFFFF; font-weight: 400; width:fit-content; } #sub.esg .con01 .txt .s_tit .p_wrap{ position: relative; } #sub.esg .con01 .txt .s_tit p b{ font-weight: 700; } #sub.esg .con01 .txt .s_tit strong{ font-size: 22px; font-weight: 300; color:#FFFFFF; font-weight: 300; opacity: .8; width: fit-content; display: block; } #sub.esg .con01 .line{ width: calc(100% - 1300px); height: 1px; background-color: #fff; position: absolute; z-index: -1; opacity: 0; } #sub.esg .con01 .line01{ left: 0; top: 46%; } #sub.esg .con01 .line02{ right: 0; top: 46%; } #sub.esg .con02 { height: 100vh; overflow: hidden; position: relative; } #sub.esg .con02 .bg{ height: 100%; position: relative; z-index: 1; } #sub.esg .con02 .bg .video{ clip-path: inset(20% 10% round 20px); position: relative; height: 100%; } #sub.esg .con02 .bg .video .dim{ position :absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } #sub.esg .con02 .txt{ height: 100%; width: 100%; display: flex; flex-flow: column; gap: 19px; align-items: center; text-align: center; justify-content: center; position: relative; z-index: 5; transform: translateY(45px); } #sub.esg .con02 .txt .st{ display: flex; gap: 580px; opacity: 0; } #sub.esg .con02 .txt .st strong{ font-size: 40px; font-weight: 400; color:#3B403D; } #sub.esg .con02 > .inner3{ position: absolute; left: 0; right: 0; margin: 0 auto; height: 100%; top: 0; z-index: 2; } #sub.esg .con02 .txt p{ font-size: 20px; line-height: 32px; color:#4C554F; margin-top: 20px; opacity: 0; } #sub.esg .con02 .txt em{ font-size: 22px; color: #fff; font-weight: 400; transform: translateY(55px) scale(1.1); } #sub.esg .con02 .line{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #sub.esg .con02 .line .inner3{ position: relative; height: 100%; } #sub.esg .con02 .line span{ width: 1px; height: 100%; display: block; background-color: #E9E9E9; position: absolute; top: 0; } #sub.esg .con02 .line span:nth-child(1){ left:0; } #sub.esg .con02 .line span:nth-child(2){ left:33.333%; } #sub.esg .con02 .line span:nth-child(3){ left:66.666%; } #sub.esg .con02 .line span:nth-child(4){ left:100%; } @keyframes slide{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } } #sub.esg .esg_box { height: 100vh; position: relative; display: flex; align-items: center; } #sub.esg .esg_box .bg{ width: 100%; height: calc(100% + 200px); background-color: #F6F7F8; position: absolute; left: 0; top: 0; } #sub.esg .esg_box .v_wrap{ width: 1260px; height: 670px; overflow: hidden; position: absolute; border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub.esg .esg_box .v_wrap .dim{ position :absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1; } #sub.esg .con01 .txt { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; } #sub.esg .esg_box .v_wrap video{ width: auto; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.1); } #sub.esg .esg_box .v_wrap .title{ display: block; width: 640px; height: auto; padding-bottom: 30px; text-align: center; border-bottom: 1px solid #E9E9E9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; } #sub.esg .esg_box .v_wrap .title strong{ font-size: 50px; font-weight: 500; color: #fff; } #sub.esg .esg_box .txt{ width: 50%; padding-left: 80px; display: flex; flex-flow: column; justify-content: center; gap: 40px; position: relative; z-index: 2; } #sub.esg .esg_box .txt dl{ display: flex; flex-flow: column; gap: 20px; } #sub.esg .esg_box .txt dl dt{ font-size: 22px; font-weight: 700; color: #3B403D; } #sub.esg .esg_box .txt dl dd{ font-size: 20px; line-height: 32px; color:#4C554F; } #sub.esg .esg_box.c_right .txt{ padding-left: 120px; } #sub.esg .esg_box.c_left{ justify-content: flex-end; } #sub.esg .esg_box.c_left .txt{ transform: translateX(50%); opacity: 0; } #sub.esg .esg_box.c_left .bg{ left: auto; right: 0; } #sub.esg .esg_box.c_right .txt{ transform: translateX(-50%); opacity: 0; } #sub.esg .esg_box.c_right .v_wrap{ left: auto; right: 50%; transform: translate(50%,-50%); } /* 애니메이션 */ #sub .sub_visual .s_tit strong{ transform: translateY(100%); transition: transform 1s; } #sub .sub_visual .s_tit em{ transform: translateY(100%); transition: transform 1s; } #sub .sub_visual.on .s_tit strong{ transform: translateY(0); } #sub .sub_visual.on .s_tit em{ transform: translateY(0); } #sub .sub_visual .s_tab{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #sub .sub_visual.on .s_tab{ transform: translateY(0); opacity: 1; } #sub.board .b_top .b_tit strong{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .4s; } #sub.board .on .b_top .b_tit strong{ transform: translateY(0); opacity: 1; } #sub.board .b_top .b_tit p{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .6s; } #sub.board .on .b_top .b_tit p{ transform: translateY(0); opacity: 1; } #sub.board .b_top .b_tit em{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .8s; } #sub.board .on .b_top .b_tit em{ transform: translateY(0); opacity: 1; } #sub.c_result .b_top .b_tit em{ transition-delay: .6s; } /*#sub.company .con04 .m_title.ac{ left: 0; transform: translate(0,0); }*/ #sub.character .con01 .txt p{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; } #sub.character .con01.on .txt p{ transform: translateY(0); opacity: 1; } #sub.character .con01 .txt .mask{ overflow: hidden; } #sub.character .con01 .txt strong{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .4s; display: block; } #sub.character .con01.on .txt strong{ transform: translateY(0); opacity: 1; } #sub.character .con02 .inner .txt strong{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; display: block; } #sub.character .con02.on .inner .txt strong{ transform: translateY(0); opacity: 1; } #sub.character .con02 .inner .txt p{ transform: translateY(50px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; display: block; } #sub.character .con02.on .inner .txt p{ transform: translateY(0); opacity: 1; } /* @media (max-width: 1919px){ #sub.esg .esg_box .v_wrap{ width: calc(100% - 300px); } } */ /* 개인정보처리방침 */ #sub.privacy .p_wrap { display:flex; flex-flow: column; gap: 60px; } #sub.privacy .p_wrap .p01{ white-space: pre-wrap; } #sub.privacy .table_wrap table{ width: 100%; border-top: 2px solid #333; } #sub.privacy .table_wrap table th{ padding: 8px; text-align: center; vertical-align: middle; font-size: 18px; line-height: 1.5em; border-bottom: 1px solid #ddd; height: 60px; } #sub.privacy .table_wrap table td{ padding: 8px; text-align: center; vertical-align: middle; font-size: 18px; line-height: 1.5em; border-bottom: 1px solid #ddd; } #sub.privacy .table_wrap table th:nth-child(1){ width: 60px; } @media (max-width: 1700px){ #sub .inner{ width: 100%; padding: 0 20px; } #sub.company .con01 .txt .list > div .wrap p .br{ display: none; } #sub.company .con01 .txt .list > div .wrap p{ word-break: keep-all; } #sub.company .con03 .inner{ gap: 80px; } #sub.company .con03 .p01{ word-break: keep-all; } #sub.company .con03 .p01 .br{ display: none; } #sub.company .con03 .img{ width: 495px; } #sub.company .con03 .txt{ width: calc(100% - 575px); } #sub.global .g_tab .inner{ flex-flow: wrap; } #sub.contact .f_box .f_input > .f_t p{ font-size: 14px; } #sub.contact .f_box .f_input > .f_t{ flex-flow: column; gap: 12px; } #sub .sub_visual .s_tab .inner ul{ gap: 20px 40px; } #sub .sub_visual .s_tab .inner ul > li:before{ left: -20px; } #sub .sub_visual .s_tab .inner ul > li > a{ font-size: 16px; } #sub .sub_visual{ gap: 40px; } #sub.p_view .pv_con .inner{ padding:0; width: calc(100% - 40px); } #sub.p_view .pv_con .pv_right .pv_table table th{ height: 40px; } #sub.p_view .pv_con .pv_right .pv_table table td{ font-size: 14px; padding-left: 20px; height: 40px; } #sub.p_view .pv_con .pv_right .pv_table table th{ font-size: 14px; padding-left: 20px; width: 140px; } #sub.p_view .pv_con .pv_right .p_slide .ps_top{ padding: 0 20px; height: 40px; } #sub.p_view .pv_con .pv_right .p_slide .ps_top .ps_tit strong{ font-size: 14px; } #sub.esg .con01 .txt .inner{ width: calc(100% - 40px); } #sub.esg .esg_box.c_right .txt{ padding-left: 40px; } #sub.esg .esg_box .v_wrap .title strong{ font-size: 30px; } #sub.esg .esg_box .v_wrap .title{ width: calc(100% - 300px); } #sub.esg .esg_box .txt{ padding-right: 40px; gap: 30px; } #sub.esg .esg_box .txt dl{ gap: 12px; } #sub.esg .esg_box .txt dl dt{ font-size: 18px; } #sub.esg .esg_box .txt dl dd{ font-size: 15px; line-height: 1.5em; word-break: keep-all; } } @media (max-width: 1520px){ #sub.location .m_bt .info_box > dl{ flex-flow: column; align-items: flex-start; gap: 8px; text-align: left; padding-left: 15px; padding-right: 15px; } #sub .inner2{ width: 100%; padding: 0 20px; } #sub .inner3{ width: 100%; padding: 0 20px; } } @media (max-width: 1380px){ #sub.board .n_list ul{ gap: 50px 20px; } #sub.board .n_list ul li{ width: calc(33.3333333% - 13.33333333333333px); } #sub.board .n_list ul li a .hover .txt strong{ font-size: 18px; line-height: 1.5em; } #sub.board .n_list ul li a .txts strong{ font-size: 18px; line-height: 1.5em; } #sub.board .n_list ul li a .txts p{ font-size: 14px; } #sub.board .n_list ul li a .txts{ gap: 6px; margin-bottom: 20px; margin-top: 20px; } #sub.board .n_list ul li a .txt_cate{ gap: 6px; } #sub.board .n_list ul li a .txt_cate span{ height: 28px; padding: 0 8px; font-size: 12px; } #sub.board .n_list ul li a .hover .bt .tag{ gap: 6px; } #sub.board .n_list ul li a .hover .bt .tag span{ padding: 5px 8px; font-size: 12px; } #sub.board .n_list ul li a .hover .txt p{ font-size: 14px; } #sub.board .n_list ul li a .hover{ padding: 30px; } #sub.board .b_top .b_tit{ gap: 12px; } #sub.board .b_top{ flex-flow: column; justify-content: flex-start; width: 100%; align-items: flex-start; gap: 30px; } #sub.news .b_top{ margin-bottom: 30px; } #sub.character .con01 .inner{ gap: 50px; } #sub.character .con01{ height: 650px; } #sub.character .con01 .txt p{ font-size: 18px;} #sub.character .con02 .inner .txt{ gap: 20px; } #sub.character .con01 .txt strong{ font-size: 40px; } #sub.character .con02 .inner .txt strong{ font-size: 28px; } #sub.character .con02 .inner .txt p{ font-size: 16px; line-height: 1.7em; word-break: keep-all; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .txt p{ font-size: 18px; } #sub.esg .con02 .txt .st{ gap: 350px; } } @media (max-width: 1200px){ #sub.company .con01 .txt .s_tit strong{ font-size: 30px; } #sub.company .con01 .txt .s_tit p{ font-size: 24px; } #sub.company .con01 .txt .list > div .wrap{ gap: 15px; padding-top: 30px; padding-left: 20px; padding-right: 0; } #sub.company .con01 .txt .list > div .wrap strong{ font-size: 22px; } #sub.company .con01 .txt .list > div .wrap p{ font-size: 18px; line-height: 1.5em; } #sub .m_title .mask strong{ font-size: 24px; } #sub .p01{ font-size: 18px; line-height: 1.5em; } #sub.company .con04 .circle svg{ width: 480px; height: auto; } #sub.company .con04 .m_title strong{ font-size: 30px; } #sub.company .con04 .m_title p{ font-size: 18px; line-height: 1.7em; } #sub.company .con04 .h_list > div > ul > li{ font-size: 16px; } #sub.company .con04 .h_list > div > strong{ font-size: 30px; } #sub.company .con04 .h_list > div:after{ top: 15px; } #sub.company .con04 .h_list > div{ padding-left: 50px; } #sub .con_w > div{ margin-top: 100px; } #sub.board .b_cate ul li a{ height: 40px; padding: 0 12px; font-size: 14px; } #sub.board .b_cate ul{ gap: 6px; } #sub.location .m_bt .info_box > dl > dt{ font-size: 14px; } #sub.location .m_bt .info_box > dl > dd{ font-size: 14px; } #sub.contact .f_box .fb .fb_wrap{ gap: 20px; } #sub.contact .f_box .fb .f_input{ gap: 8px; } #sub.contact .f_box .fb .fb_wrap .f_input{ width: calc(33.33333333% - 13.33333333333333px); } #sub.contact .f_box .f_input .f_select .label span{ font-size: 16px; } #sub.contact .f_box .f_input strong{ font-size: 16px; } #sub.contact .f_box .f_input .f_txt { font-size: 16px; } #sub.contact .f_box .f_input .f_select .optionList .optionItem{ font-size: 14px; height: 40px; } #sub.contact .f_box .f_input .f_select .optionList{ max-height: 180px } #sub.contact .f_box .f_input .t_area{ height: 150px; font-size: 16px; } #sub.contact .f_box .f_input .files p{ font-size: 16px; } #sub.contact .check_box > .box .b_info .info_p{ font-size: 14px; margin-bottom: 20px; } #sub.contact .check_box > .box .c_top{ height: 80px; padding: 0 25px; } #sub.contact .check_box > .box .b_info .p_box{ height: 140px; } #sub.contact .check_box > .box .b_info .p_box p{ font-size: 14px; line-height: 1.7em; } #sub.contact .check_box > .box .c_top strong{ font-size: 16px; } #sub.contact .check_box > .box .c_top label{ font-size: 16px; } #sub.contact .check_box > .box .c_top .maketing ul{ gap: 20px; } #sub.contact .check_box > .box .c_top .wrap{ gap: 20px; } #sub.contact .check_box > .box .c_top .maketing{ gap: 20px; } #sub.contact .check_box > .box .c_top .maketing ul li .chk > div label{ font-size: 14px; } #sub.board .p_list ul{ gap: 40px 20px; } #sub.board .p_list ul li{ width: calc(50% - 10px); } #sub.board .p_list ul li a .img .hover .txt .plus{ width: 36px; height: 36px; margin-top: 15px; } #sub.board .p_list ul li a .img .hover .txt .plus svg{ width: 14px; height: auto; } #sub.board .p_list ul li a .img .hover .txt strong{ font-size: 16px; } #sub.board .p_list ul li a .img .hover .txt span{ padding: 0 8px; height: 30px; font-size: 13px; } #sub.board .p_list ul li a > .txt strong { font-size: 18px; } #sub.product .b_top{ gap: 12px; } #sub.board .b_top .search{ width: 100%; height: 40px; } #sub.p_view .con{ padding-top: 0; } #sub.p_view .pv_con .pv_left{ width: 600px; } #sub.p_view .pv_con .pv_right{ width: calc(100% - 600px); } #sub.p_view .pv_con .pv_right .pv_info > div{ font-size: 14px; padding: 20px; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .img img{ width: 80px; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .txt p{ font-size: 14px; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a{ gap: 15px; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt{ height: 80px; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .swiper-button-prev{ width: 30px; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .swiper-button-next{ width: 30px; } #sub.p_view .pv_con .pv_right .p_slide .ps_slide a .txt{ width: calc(100% - 95px); padding-right: 10px; } #sub.p_view .pv_con .pv_right .p_slide .ps_bt .ps_slide{ width: calc(100% - 60px); } #sub.esg .con01 .txt .inner{ flex-flow: column; } #sub.esg .con01 .txt .s_tit{ width: 100%; height: 50%; left: 0; top: 15%; transform: translate(0,0); margin-left: 0; } #sub.esg .con01 .txt .p_box{ width: 100%; height: auto; top: 50%; } #sub.esg .sub_visual:after{ width: calc(100% - 40px); } #sub.esg .con01 .txt .s_tit{ gap:12px; } #sub.esg .con01 .txt .s_tit p{ font-size: 24px; } #sub.esg .con01 .txt .s_tit strong{ font-size: 16px; } #sub.esg .con01 .txt .p_box p{ font-size: 16px; line-height: 1.7em; } #sub.esg .con02 .txt .st strong{ font-size: 20px; } #sub.esg .con02 .txt em{ font-size: 16px; transform: translateY(0) scale(1.1); } #sub.esg .con02 .txt{ gap: 8px; } #sub.esg .con02 .txt p{ font-size: 14px; line-height: 1.6em; margin-top: 10px; } } @media (max-width: 980px){ #sub .sub_visual .s_tit strong{ font-size: 34px; } #sub .sub_visual .s_tit em{ font-size: 18px; } #sub .sub_visual .s_tit{ gap: 10px; } #sub .sub_visual .s_tab .inner ul > li > a{ font-size: 16px; } #sub .sub_visual .s_tab .inner ul{ gap: 20px 40px; } #sub .sub_visual .s_tab .inner ul > li:before{ left: -20px; } #sub.company .con01 .txt .list{ width: calc(100% - 260px); } #sub.company .con02 .inner{ flex-flow: column; gap: 20px; } #sub .p01{ font-size: 16px; } #sub.company .con03 .img{ width: 280px; height: 345px; } #sub.company .con03 .img img{ width: 100%; } #sub.company .con03 .txt{ width: calc(100% - 340px); gap: 20px; } #sub .br{ display: none; } #sub.company .con02 .inner .p01{ white-space: normal; word-break: keep-all; } #sub.board .b_top .b_tit strong{ font-size: 30px; } #sub.board .b_top .b_tit p{ font-size: 16px; line-height: 1.5em; word-break: keep-all; } #sub.board .b_top .b_tit{ gap: 8px; } #sub.global .b_top{ margin-bottom: 0; padding-bottom: 30px; } #sub.global .g_tab{ padding: 30px 0; } #sub.global .g_tab .inner{ flex-flow: column; gap: 30px; } #sub.global .g_tab .inner > div > strong{ font-size: 16px; } #sub.global .g_tab .inner > div{ gap: 8px; } #sub.global .g_tab .inner > div > ul > li > a{ height: 32px; padding: 0 10px; font-size: 13px; } #sub.global .g_tab .inner > div > ul{ gap: 4px; flex-flow: wrap; } #sub .con{ padding-bottom: 100px; } #sub.board .n_list ul{ gap: 40px 20px; } #sub.board .n_list ul li{ width: calc(50% - 10px); } #sub.board .page{ margin-top: 50px; } #sub.board .page ul li a{ font-size: 12px; } #sub.board .page ul li{ width: 30px; height: 30px; background-size: 100% 100% !important; } #sub.board .page ul{ gap: 5px; } #sub.board .n_list ul li a .hover .bt .plus{ width: 30px; height: 30px; } #sub.board .b_cate{ padding-bottom: 20px; } #sub.board .n_list{ margin-top: 20px; } #sub.news .b_top .search{ width: 100%; height: 40px; } #sub.board .b_top .search input{ padding-left: 18px; font-size: 14px; } #sub.view .v_tit dl dt{ display: none; } #sub.view .v_tit dl{ width: 100%; gap: 0; } #sub.view .v_tit dl dd{ font-size: 18px; } #sub.view .v_tit p{ font-size: 14px; text-align: left; } #sub.view .v_tit{ flex-flow: column; align-items: flex-start; gap: 6px; padding: 18px 0; } #sub.view .v_con .v_cate{ margin-bottom: 20px; gap: 5px; } #sub.view .v_con .v_cate span{ height: 28px; padding: 0 8px; font-size: 14px; } #sub.view .v_con{ padding: 20px 0; min-height: 300px; } #sub.view .go_btn2{ margin-top: 40px; } #sub.character .con01 { height: auto; padding: 60px 0; } #sub.character .con01 .inner{ flex-flow: column; height: auto; } #sub.character .con01 .inner > div{ width: 100%; } #sub.character .con01 .inner > div{ text-align: center; } #sub.character .con01:after{ height: auto; width: 60%; left: 20%; top: 40%; } #sub.character .con_w > div{ margin-top: 100px; } #sub.character .con02 .inner{ flex-flow: column; align-items: flex-start; gap: 30px; } #sub.character .con02 .inner > div{ width: 100%; } #sub.character .con02 .inner .txt{ gap: 12px; } #sub.character .con02 .inner .txt strong{ font-size: 20px; } #sub.character .con02 .inner .txt p{ font-size: 14px; } #sub.character .con02 .inner .img img{ width: 100%; max-width: auto; } #sub.location .m_top{ flex-flow: column; } #sub.location .m_top .m_btn{ width: 100%; border-right: none; } #sub.location .m_top .maps{ width: 100%; height: 320px; } #sub.location .m_top .m_btn > div > ul > li > a{ height: 38px; width: 100px; font-size: 14px; } #sub.location .m_top .m_btn > div > strong{ font-size: 18px; margin-bottom: 10px; } #sub.location .m_bt .m_info{ display: none; } #sub.location .m_bt .info_box{ width: 100%; } #sub.contact .f_box .f_input .f_select .label{ height: 48px; } #sub.contact .f_box .f_input .f_txt{ height: 48px; font-size: 14px; } #sub.board .b_top .b_tit em{ font-size: 14px; line-height: 1.5em; } #sub.contact .b_top{ margin-bottom: 40px; padding-bottom: 40px; } #sub.contact .f_box .fb{ gap: 40px; } #sub.contact .f_box .fb .fb_wrap{ flex-flow: column; } #sub.contact .f_box .fb .fb_wrap .f_input{ width: 100%; } #sub.contact .f_box{ gap: 60px; } #sub.contact .f_box .f_input .files .add_file svg{ width: 30px; height: auto; } #sub.contact .check_box > .box .c_top .wrap{ flex-flow: column; align-items: flex-start; gap: 12px; } #sub.contact .check_box > .box .c_top .maketing{ gap: 0; } #sub.contact .check_box > .box .c_top i svg{ width: 14px; height: auto; } #sub.contact .check_box{ gap: 8px; } #sub.contact .check_box > .box .b_info{ padding: 0 12px; padding-bottom: 20px; } #sub.contact .go_btn{ margin-top: 40px; } #sub .go_btn2 { width: 170px; height: 44px; } #sub .go_btn2 a ul{ width: 340px !important; } #sub .go_btn2 a ul li{ width: 170px; } #sub.p_view .pv_con .pv_left{ width: 100%; } #sub.p_view .pv_con .inner{ flex-flow: column; } #sub.p_view .pv_con .pv_right{ width: 100%; } #sub.p_view .con .pv_tit .left strong{ font-size: 24px; } #sub.p_view .con .pv_tit .left p{ font-size: 13px; } #sub.p_view .con .pv_tit{ padding: 25px; } #sub.p_view .con .pv_loc ul li{ font-size: 12px; } #sub.p_view .pv_con .pv_right .pv_info > div{ font-size: 13px; line-height: 1.6em; padding: 10px; word-break: keep-all; } #sub.p_view .pv_con .pv_right .pv_info{ height: 140px; } #sub.p_view .con .pv_tit{ flex-flow: column; align-items: flex-start; gap: 12px; } #sub.esg .esg_box .v_wrap{ width: calc(100% - 100px); } #sub.esg .esg_box .v_wrap .title strong{ font-size: 24px; } #sub.company .con03 .right svg{ width: 160px; height: auto; } #sub.board .b_top .go_btn2 a{ width: 170px; } } @media (max-width: 800px){ #sub.company .con03 .inner{ flex-flow: column; gap: 40px; align-items: flex-start; } #sub.company .con03 .txt{ width: 100%; } #sub .m_title .mask strong{ font-size: 20px; } #sub .p01{ font-size: 14px; } #sub.company .con03 .right img{ width: 140px; height: auto; } #sub.company .con04 .m_title p{ font-size: 14px; line-height: 1.5em; } #sub.company .con04 .m_title{ gap: 8px; } #sub.company .con04 .h_list{ gap: 100px; } #sub.company .con04 .inner > div{ width: 100%; } #sub.company .con04 .line{ left: 19px; } #sub.company .con02 .inner{ padding-bottom: 60px; } #sub .con_w > div{ margin-top: 60px; } #sub.company .con01 .txt .s_tit strong{ font-size: 20px; } #sub.company .con01 .txt .s_tit p{ font-size: 15px; } #sub.company .con01 .txt .list{ width: calc(100% - 140px); } #sub.company .con01 .txt .list > div .wrap strong{ font-size: 18px; } #sub.company .con01 .txt .list > div .wrap p{ font-size: 14px; } #sub.company .con04 .h_list > div{ padding-left: 25px; } #sub.company .con04 .h_list > div{ gap: 10px; } #sub.company .con04 .h_list > div > ul > li{ font-size: 14px; word-break: keep-all; } #sub.company .con04 .h_list > div > strong{ font-size: 24px; } #sub.company .con04 .circle svg{ width: 280px; } #sub.global .graphic{ padding: 10px; } #sub .con{ padding-bottom: 60px; } #sub.board .b_top .b_tit strong{ font-size: 20px; } #sub.board .b_top .b_tit p{ font-size: 14px; } #sub.view .go_btn2{ height: 44px; width: 140px; } #sub.view .go_btn2 a ul{ width: 280px !important; } #sub.view .go_btn2 a ul li{ width: 140px; transition: width .4s; } #sub.view .go_btn2:hover{ width: 140px; } #sub.view .go_btn2:hover a ul{ width: 280px !important; } #sub.view .go_btn2:hover a ul li{ width: 140px; } #sub.character .con_w > div{ margin-top: 60px; } #sub.character .con03 .img_slide { gap: 20px; } #sub.character .con03 .img_slide .wrap{ gap: 20px; } #sub.character .con03 .img_slide .wrap .box .img img{ width: 300px; } #sub.character .con03 .img_slide .wrap .box{ gap: 20px; } #sub.character .con03 .img_slide .wrap .box > div .txt strong{ font-size: 14px; } #sub.character .con03 .img_slide .wrap .box .txt{ bottom: 20px; } #sub.character .con01{ margin-top: 0 !important; } #sub.location .m_bt .info_box > dl:nth-child(1){ width: 100%; border-right: none; } #sub.location .m_bt .info_box{ flex-flow: column; height: auto; border-right: none; } #sub.location .m_bt .info_box > dl{ width: 100%; height: auto; padding: 15px;border-right: none; border-bottom: 1px solid #e9e9e9; } #sub .sub_visual .s_tab .inner ul > li > a{ font-size: 13px; } #sub .sub_visual .s_tab .inner ul{ gap: 10px 15px; } #sub .sub_visual .s_tab .inner ul > li:before{ left: -8px; } #sub.c_result .go_btn{ margin-top: 0; } #sub.c_result .b_top .b_tit{ text-align: center; width: 100%; } #sub .go_btn3 { width: 150px; height: 44px; } #sub .go_btn3 a ul{ width: 300px !important; } #sub .go_btn3 a ul li{ width: 150px; } #sub.esg .esg_box .v_wrap{ width: calc(100% - 40px); height:200px; } #sub.esg .esg_box .v_wrap video{ height: auto;width: 100%; } #sub.esg .esg_box .v_wrap .title{ } #sub.esg .esg_box .v_wrap .title{ } #sub.esg .esg_box .bg{ display: none; } #sub.esg .esg_box{ height: auto; padding: 60px 0; } #sub.esg .esg_box .txt{ transform: translate(0,0); position: static; width: calc(100% - 40px) !important; margin: 0 auto; padding: 0 !important; } #sub.esg .esg_box .v_wrap{ position: relative; left: 0; top: 0; transform: translate(0,0); } #sub.esg .esg_box{ flex-flow: column; gap: 30px; } #sub.esg .esg_box.c_right .v_wrap{ right: 0; transform: translate(0,0); } #sub.esg .esg_box.c_left .txt{ width: calc(100% - 40px) !important; margin: 0 auto; opacity: 1 !important; transform: translateX(0) !important;} #sub.esg .esg_box.c_right .txt{ width: calc(100% - 40px) !important; margin: 0 auto; opacity: 1 !important; transform: translateX(0) !important;} #sub.esg .esg_box .v_wrap .title{ padding-bottom: 12px; } #sub.esg .con02 .txt em{ transform: translateY(15px) scale(1.1); } #sub.esg .con01 .bg .video video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; } #sub.esg .con02 .txt p{ word-break: keep-all; } #sub.esg .esg_box .v_wrap .title{ width: calc(100% - 30px); } #sub.esg .esg_box .txt dl dd{ font-size: 14px; } #sub.esg .esg_box .txt dl dt{ font-size: 16px; } #sub.esg .esg_box .txt dl { gap: 6px; } #sub.esg .esg_box .txt{ gap: 15px; } #sub.esg .esg_box{ padding: 30px 0; } #sub.privacy .p_wrap{ gap: 20px; } #sub.privacy .sub_visual{ height: 400px; } } @media (max-width: 640px){ #sub .m_title .mask strong{ font-size: 18px; } #sub.company .con01 .bg{ left: 0; top: 0; transform: translate(0,0); } #sub.company .con01 .bg .video video{ height: 100%; } #sub.board .b_cate ul li a{ height: 32px; padding: 0 8px; font-size: 12px; } #sub.board .n_list ul li a .hover{ display: none !important; } #sub.board .n_list ul li a:hover .txts{ opacity: 1; } #sub.board .n_list ul li a:hover .txt_cate{ opacity: 1; } #sub.board .n_list ul li a .txts strong{ font-size: 15px; } #sub.board .n_list ul li a .txts p{ font-size: 12px; } #sub.board .n_list ul{ gap: 40px; flex-flow: column; } #sub.board .n_list ul li{ width: 100%; } #sub.character .con01 .txt p{ font-size: 14px; } #sub.character .con01 .txt strong{ font-size: 24px; } #sub.character .con03 .img_slide .wrap .box .img img{ width: 240px; } #sub.board .p_list ul li a > .txt strong{ font-size: 14px; } #sub.esg .con02 .txt .st{ gap: 0; } }