@charset "utf-8";

/* 
 * content CSS Document
 *
 */

/* form active - 디자인가이드 input radio, checkbox 디자인 관련입니다. 필요없는경우 삭제하시고 작업하시면되요.*/


/* sub-visual */
.area-subVisual{width:100%; height:380rem; border-top:1rem solid #e8e8e8; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-color:var(--black);} 
.area-subVisual .inr{position:relative;height:100%; display:flex; flex-direction:column; justify-content:center; }
.area-subVisual .visual-navi{display:flex; align-items:center; justify-content:center; gap:12rem; font-weight:300; color:rgba(255, 255, 255, 0.7);}
.area-subVisual .visual-navi [data-subtitle="current"]{color:var(--white) !important;}
/* .area-subVisual .visual-title{width:100%; display:flex; justify-content:space-between; align-items:flex-end;} */
.area-subVisual h2{font-size:52rem; font-weight:600; color:var(--white);}
.area-subVisual p{font-size:18rem; color:var(--white); margin-top:25rem; font-weight:300; opacity:0.8;}
.area-subVisual[data-subLayout="about"]{background-image:url('/images/content/sub-visual01.jpg')}
.area-subVisual[data-subLayout="license"]{background-image:url('/images/content/sub-visual02.jpg')}
.area-subVisual[data-subLayout="result"]{background-image:url('/images/content/sub-visual03.jpg')}
.area-subVisual[data-subLayout="data"]{background-image:url('/images/content/sub-visual04.jpg')}
.area-subVisual[data-subLayout="contact"]{background-image:url('/images/content/sub-visual05.jpg')}
/* lnb */
.area-lnb{width:100%; background:var(--white); border-bottom:1rem solid #e8e8e8;}
.area-lnb .lnb ul{display:flex; justify-content:center;}
.area-lnb .lnb li{height:75rem;}
.area-lnb .lnb a{display:flex;align-items:center; width:100%; height:100%; padding:0 30rem; box-sizing:border-box; font-size:18rem; font-weight:600; color:rgba(0, 0, 0, 0.2)}
.area-lnb .lnb a.on{color:var(--point); border-bottom:2rem solid var(--point);}
/* common */
#content{padding:120rem 0; min-height:300rem;}
.sub-title{margin-bottom:60rem; text-align:center;}
.sub-title small{display:block; font-size:16rem; font-weight:500; color:var(--point); margin-bottom:20rem; text-transform:uppercase;}
.sub-title h2{font-size:40rem; line-height:1.3; font-weight:700;}

@media (max-width:1080px){
    #content{padding:100rem 0;}
}
@media (max-width:767px){
    .area-subVisual{height:350rem;}
    .area-subVisual .inr{text-align:center;}
    .area-subVisual h2{font-size:40rem;}
    .area-subVisual p{margin-top:20rem; font-size:16rem;}
    /* .area-subVisual .visual-title{flex-direction:column-reverse; align-items:center; gap:15rem;} */
    #content{padding:80rem 0;}
    .area-lnb .inr{overflow-x:auto; justify-content:flex-start; gap:0;}
    .area-lnb .lnb li{height:60rem;}
    .area-lnb .lnb a{font-size:15rem; padding:0 22rem; }
    .sub-title{margin-bottom:40rem;} 
    .sub-title small{margin-bottom:20rem;}
    .sub-title h2{font-size:35rem;}
}
@media (max-width:480px){
    .area-subVisual h2{font-size:35rem;}
    #content{padding:60rem 0;}
    .area-lnb .lnb ul{display:flex; justify-content:center; white-space:nowrap;}
    .sub-title{margin-bottom:30rem;} 
    .sub-title small{font-size:15rem; margin-bottom:15rem;}
    .sub-title h2{font-size:25rem;}
}

/* about01 - 회사개요 */
[data-sub="about01"]{margin-bottom: -120rem;}
[data-sub="about01"] .ss01 {margin-top:40rem;}
[data-sub="about01"] .ss01_txt{display:grid; grid-template-columns:repeat(4,1fr); gap:15rem; text-align:center;}
[data-sub="about01"] .ss01_txt li{display:flex; justify-content:center; flex-direction:column; height:230rem; padding:0 25rem; box-sizing:border-box; border:1rem solid #e8e8e8; font-size:18rem;}
[data-sub="about01"] .ss01_txt li + li{animation-delay: .3s;}
[data-sub="about01"] .ss01_txt i{font-size:28rem;}
[data-sub="about01"] .ss01_txt dl{margin-top:25rem;}
[data-sub="about01"] .ss01_txt dt{font-weight:600;}
[data-sub="about01"] .ss01_txt dd{color:#666; font-size:16rem; line-height:1.5; margin-top:15rem;}
[data-sub="about01"] .ss02{padding:130rem 0; background:url(/images/main/bu_bg.jpg) repeat; margin-top:120rem;}
[data-sub="about01"] .ss02 .sub-title{text-align:center;}
[data-sub="about01"] .hisBox{position:relative; display:flex; flex-direction:column; margin-top:80rem; font-family:var(--font-num);}
[data-sub="about01"] .hisBox::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1rem; height:100%; background:#ddd;}
[data-sub="about01"] .hisBox h5{position:relative; font-size:40rem;  font-weight:800; margin-bottom:30rem; font-style:italic;}
[data-sub="about01"] .hisBox h5::before{position:absolute; content:''; top:50%; width:12rem; height:12rem; border-radius:50%; transform:translateY(-50%); background:var(--point);}
[data-sub="about01"] .hisBox li{display:flex; flex-wrap:wrap; gap:10rem; align-items:center; font-size:18rem; }
[data-sub="about01"] .hisBox li + li{margin-top:15rem;}
[data-sub="about01"] .hisBox li strong{display:inline-block; width:70rem; font-weight:500;}
[data-sub="about01"] .hisBox li p{color:#666; font-weight:400;}
[data-sub="about01"] .hisBox .con{width:50%;}
[data-sub="about01"] .hisBox .con + .con{margin-top:80rem; animation-delay:.4s;}
[data-sub="about01"] .hisBox .con:nth-child(odd){text-align:right; padding-right:100rem;}
[data-sub="about01"] .hisBox .con:nth-child(odd) li{flex-direction:row-reverse;}
[data-sub="about01"] .hisBox .con:nth-child(even){align-self:flex-end; padding-left:100rem;}
[data-sub="about01"] .con:nth-child(even) h5::before{left:-106rem; }
[data-sub="about01"] .con:nth-child(odd) h5::before{right:-106rem; background:var(--white); border:1rem solid var(--point);}

/* about02 - 인사말 */
[data-sub="about02"]{}
[data-sub="about02"] .ab02_img{width:100%; height:400rem; margin-bottom:60rem;}
[data-sub="about02"] .ab02_img img{width:100%; height:100%; max-width:100%; object-fit:cover;}
[data-sub="about02"] .ab02_txt{text-align:center;}
[data-sub="about02"] .ab02_txt dd{font-size:19rem; line-height:1.8; font-weight:300; color:#666;}
[data-sub="about02"] .ab02_txt dd + dd{margin-top:35rem; animation-delay:.4s;}
[data-sub="about02"] .ab02_txt .ceo{display:flex; gap:15rem; align-items:center; justify-content:center; font-size:19rem; font-weight:600; margin-top:50rem;}
[data-sub="about02"] .ab02_txt .ceo strong{ display:flex; gap:20rem; align-items:center; font-weight:500; }
[data-sub="about02"] .ab02_txt .ceo span{font-size:30rem; font-family:'HAN-YONG-UN';}

/* about03 - 조직도 */
[data-sub="about03"]{}
[data-sub="about03"] .org_box{text-align:center; position:relative;}
[data-sub="about03"] .org_box::before{content:''; position:absolute; top:50rem; left:50%; transform:translateX(-50%); width:1rem; height:78.7%; background:#ddd; z-index:-5;}
[data-sub="about03"] .org_box .or1{text-align:center;}
[data-sub="about03"] .org_box .or1 span{display:flex; align-items:center; justify-content:center; width:190rem; height:190rem; font-size:22rem; font-weight:600; color:var(--white); margin:0 auto; box-shadow:0rem 8rem 15rem 5rem rgba(0, 0, 0, 0.05); border-radius:50%; background:-webkit-linear-gradient(-45deg, #444 0%, #000 100%);}
[data-sub="about03"] .org_box .or2{padding-top:60rem; position:relative;}
[data-sub="about03"] .org_box .or2 span{display:flex; align-items:center; justify-content:center; width:190rem; height:190rem; font-size:22rem; font-weight:600; color:var(--white); margin:0 auto; box-shadow:0rem 8rem 15rem 5rem rgba(255, 155, 61, 0.15); border-radius:50%; background:-webkit-linear-gradient(-45deg, #ffa800 0%, #ff8835 100%);}
[data-sub="about03"] .org_box .or3{display:flex; justify-content:space-between; align-items:flex-start; font-size:18rem;  margin-top:80rem;}
[data-sub="about03"] .org_box .or3 > div{width:50%; margin-top:50rem;}
[data-sub="about03"] .org_box .or3 > div:first-child span::after{transform:translate(50%, 0);}
[data-sub="about03"] .org_box .or3 span{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:70rem; background:var(--point); color:var(--white);}
[data-sub="about03"] .org_box .or3 span::before{position:absolute; content:''; top:-50rem; left:50%; width:1rem; height:50rem; background:#ddd;}
[data-sub="about03"] .org_box .or3 span::after{position:absolute; content:''; top:-50rem; left:0; width:100%; height:1rem; transform:translate(-50%, 0); background:#ddd;}
[data-sub="about03"] .org_box .or3_1{padding:0 15% 0 5%;}
[data-sub="about03"] .org_box .or3_2{padding:0 5% 0 15%;}
[data-sub="about03"] .org_box .or3_1 ul{border:2rem solid var(--point)}
[data-sub="about03"] .org_box .or3_1 li{display:flex; align-items:center; justify-content:center; width:100%; height:70rem; color:var(--point);}
[data-sub="about03"] .org_box .or3_1 li + li{border-top:1rem dotted #ddd;}
[data-sub="about03"] .org_box .or4{padding-top:60rem;}
[data-sub="about03"] .org_box .or4 > span{display:flex; align-items:center; justify-content:center; width:25%; height:70rem; font-size:18rem; background:#222; color:var(--white); margin:0 auto}
[data-sub="about03"] .org_box .or4_2{width:100%; display:grid; grid-template-columns:repeat(6,1fr); margin-top:80rem;}
[data-sub="about03"] .org_box .or4_2 > li{position:relative; padding:50rem 10rem 0 10rem;}
[data-sub="about03"] .org_box .or4_2 > li:first-child::after{display:none;}
[data-sub="about03"] .org_box .or4_2 > li::before{position:absolute; content:''; top:0; left:50%; width:1rem; height:50rem; background:#ddd; z-index:-10;}
[data-sub="about03"] .org_box .or4_2 > li::after{position:absolute; content:''; top:0; left:0; width:100%; height:1rem; transform:translate(-50%, 0); background:#ddd;}
[data-sub="about03"] .org_box .or4_2 span{display:flex; align-items:center; justify-content:center; width:100%; height:70rem; border:2rem solid #333; font-weight:500; background:var(--white);}
[data-sub="about03"] .org_box .or4_2 li:last-child span{background:#333; color:var(--white); border:0;}
[data-sub="about03"] .org_box .or4_2 li:last-child li span{background:var(--white); color:#555; border:2rem solid #333;}

@media (max-width:1080px){
    [data-sub="about03"] .org_box{padding:40rem 0;}
    [data-sub="about01"] .hisBox .con:nth-child(odd){padding-right:70rem;}
    [data-sub="about01"] .hisBox .con:nth-child(even){ padding-left:70rem;}
    [data-sub="about01"] .con:nth-child(even) h5::before{left:-76rem}
    [data-sub="about01"] .con:nth-child(odd) h5::before{right:-76rem}
    [data-sub="about01"] .hisBox .con + .con{margin-top:50rem;}
}
@media (max-width:767px){
    /* about01 */
    [data-sub="about01"] .ss01{margin-top:40rem;}
    [data-sub="about01"] .ss01_txt{ grid-template-columns:repeat(2,1fr);}
    [data-sub="about01"] .ss01_txt dl{margin-top:20rem;}
    [data-sub="about01"] .ss02{padding:100rem 0; margin-top:80rem;}
    [data-sub="about01"] .hisBox{margin-top:50rem;}
    [data-sub="about01"] .hisBox::before{left:0; transform:translateX(0);}
    [data-sub="about01"] .hisBox h5{font-size:30rem; font-weight:700; margin-bottom:20rem;}
    [data-sub="about01"] .hisBox li{font-size:16rem;}
    [data-sub="about01"] .hisBox li + li{margin-top:20rem;}
    [data-sub="about01"] .hisBox .con{width:100%;}
    [data-sub="about01"] .hisBox .con:nth-child(odd){padding-right:0;padding-left:30rem; text-align:left;}
    [data-sub="about01"] .hisBox .con:nth-child(even){ padding-left:30rem;}
    [data-sub="about01"] .con:nth-child(even) h5::before{left:-36rem}
    [data-sub="about01"] .hisBox .con:nth-child(odd) li{flex-direction:row;}
    [data-sub="about01"] .con:nth-child(odd) h5::before{right:auto; left:-36rem}
    [data-sub="about01"] .hisBox .con + .con{margin-top:40rem;}
    /* about02 */
    [data-sub="about02"] .ab02_img{height:350rem; margin-bottom:50rem;}
    [data-sub="about02"] .ab02_txt dd{font-size:15rem; line-height:1.5;}
    [data-sub="about02"] .ab02_txt dd br{display:none;}
    [data-sub="about02"] .ab02_txt dd + dd{margin-top:25rem; }
    [data-sub="about02"] .ab02_txt .ceo{font-size:18rem; margin-top:40rem;}
    /* about03 */
    [data-sub="about03"] .org_box{padding:0;}
    [data-sub="about03"] .org_box::before{height:79.2%;}
    [data-sub="about03"] .org_box .or1 span{width:170rem; height:170rem; font-size:18rem;}
    [data-sub="about03"] .org_box .or2{padding-top:40rem;}
    [data-sub="about03"] .org_box .or2 span{width:170rem; height:170rem; font-size:18rem;}
    [data-sub="about03"] .org_box .or3{margin-top:60rem; font-size:16rem;}
    [data-sub="about03"] .org_box .or3 span{height:60rem;}
    [data-sub="about03"] .org_box .or3_1{padding:0 10% 0 0;}
    [data-sub="about03"] .org_box .or3_1 li{height:60rem;}
    [data-sub="about03"] .org_box .or3_2{padding:0 0 0 10%;}
    [data-sub="about03"] .org_box .or4 > span{width:35%; height:60rem; font-size:16rem;}
    [data-sub="about03"] .org_box .or4_2{font-size:15rem; margin-top:40rem;  grid-template-columns:repeat(3,1fr);}
    [data-sub="about03"] .org_box .or4_2 > li{padding:40rem 10rem 0 10rem;}
    [data-sub="about03"] .org_box .or4_2 > li:nth-child(n+4){padding-top:20rem;}
    [data-sub="about03"] .org_box .or4_2 > li:nth-child(n+4)::after{display:none;}
    [data-sub="about03"] .org_box .or4_2 > li::before{height:40rem;}
    [data-sub="about03"] .org_box .or4_2 span{height:60rem;}
    [data-sub="about03"] .org_box .or4_2 li:last-child ul{margin-top:0;}

}
@media (max-width:480px){
    [data-sub="about01"] .hisBox{margin-top:40rem;}
    [data-sub="about01"] .hisBox h5{font-size:25rem;}
    [data-sub="about01"] .hisBox li{font-size:15rem; flex-direction:column !important; align-items:flex-start;}
    [data-sub="about01"] .ss01_txt{ grid-template-columns:repeat(1,1fr); gap:10rem;}
    [data-sub="about01"] .ss01_txt li{min-height:170rem; padding:0 20rem;}
    [data-sub="about01"] .ss01_txt dl{margin-top:15rem;}
    [data-sub="about01"] .ss02{margin-top:60rem;}
    [data-sub="about02"] .ab02_img{height:220rem; margin-bottom:30rem;}
    [data-sub="about02"] .ab02_txt .ceo strong{gap:15rem;}
    [data-sub="about02"] .ab02_txt .ceo span{font-size:25rem;}
    /* about03 */
    [data-sub="about03"] .org_box::before{height:65.3%;}
    [data-sub="about03"] .org_box .or1 span{width:138rem; height:138rem; font-size:16rem;}
    [data-sub="about03"] .org_box .or2{padding-top:20rem;}
    [data-sub="about03"] .org_box .or2 span{width:138rem; height:138rem; font-size:16rem;}
    [data-sub="about03"] .org_box .or3{margin-top:40rem;}
    [data-sub="about03"] .org_box .or3 span{height:50rem;}
    [data-sub="about03"] .org_box .or3 span::before{height:40rem; top:-40rem;}
    [data-sub="about03"] .org_box .or3 span::after{top:-40rem;}
    [data-sub="about03"] .org_box .or3 > div{margin-top:40rem;}
    [data-sub="about03"] .org_box .or3_1{padding:0 5% 0 0;}
    [data-sub="about03"] .org_box .or3_1 li{height:50rem;}
    [data-sub="about03"] .org_box .or3_2{padding:0 0 0 5%;}
    [data-sub="about03"] .org_box .or4{padding-top:30rem;}
    [data-sub="about03"] .org_box .or4 > span{width:60%; height:50rem;}
    [data-sub="about03"] .org_box .or4_2{margin-top:30rem;  grid-template-columns:repeat(2,1fr);}
    [data-sub="about03"] .org_box .or4_2 > li{padding:30rem 5rem 0 5rem;}
    [data-sub="about03"] .org_box .or4_2 > li:nth-child(n+3){padding-top:10rem;}
    [data-sub="about03"] .org_box .or4_2 > li:nth-child(n+3)::after{display:none;}
}

/* about04 - 오시는길 */
[data-sub="about04"] .root_daum_roughmap{width:100%;}
[data-sub="about04"] .root_daum_roughmap .wrap_map{height:500rem; border-bottom:1px solid rgba(0,0,0,.1);}
[data-sub="about04"] .root_daum_roughmap .wrap_controllers{display:none;}
[data-sub="about04"] .root_daum_roughmap .cont{display:none;}
[data-sub="about04"] .ab04_info{margin-top:50rem;}  
[data-sub="about04"] .ab04_info .txt{width:100%; border-top:2rem solid #111; border-bottom:1rem solid #111; display:grid; grid-template-columns:repeat(2,1fr);}
[data-sub="about04"] .ab04_info .txt li{padding:30rem 20rem; font-size:17rem;}
[data-sub="about04"] .ab04_info .txt li:nth-child(n+3){border-top:1rem dotted #ddd;}
[data-sub="about04"] .ab04_info .txt li:nth-child(even){border-left:1rem dotted #ddd;}
[data-sub="about04"] .ab04_info .txt dl{display:flex; flex-direction:column; align-items:center; gap:25rem;}
[data-sub="about04"] .ab04_info .txt dt{display:flex; gap:20rem; align-items:center; font-size:18rem; font-weight:600;}
[data-sub="about04"] .ab04_info .txt dt i{font-size:20rem;}
[data-sub="about04"] .ab04_info .txt dd{color:#555;}

@media (max-width:480px){
    /* 오시는 길 */
    [data-sub="about04"] .root_daum_roughmap .wrap_map{height:350rem;}
    [data-sub="about04"] .ab04_info{margin-top:30rem;}
    [data-sub="about04"] .ab04_info .txt{grid-template-columns:repeat(1,1fr);}
    [data-sub="about04"] .ab04_info .txt dl{align-items:flex-start; gap:15rem;}
    [data-sub="about04"] .ab04_info .txt dt{gap:10rem; font-size:16rem;}
    [data-sub="about04"] .ab04_info .txt dt i{font-size:16rem;}
    [data-sub="about04"] .ab04_info .txt li{font-size:15rem; padding:22rem 10rem;}
    [data-sub="about04"] .ab04_info .txt li:nth-child(n+2){border-top:1rem dotted #ddd;}
    [data-sub="about04"] .ab04_info .txt li:nth-child(even){border-left:0;}
}

/* 사업및 인증 */
.certList{display:grid; grid-template-columns:repeat(4,1fr); gap:50rem 30rem; text-align:center;}
.certList p{font-size:20rem; font-weight:500; margin-top:25rem;}
.certList .certCon{position:relative; display:block; padding:60rem 20rem; box-sizing:border-box; background:#f5f5f5;}
.certList .img{display:block; width:58%;  min-width:180rem;  height:254rem; margin:0 auto;  background:#fff;}
.certList .img img{width:100%; max-width:100%; object-fit:contain;}
.certList .certCon:hover .over{overflow:visible; display:flex;}
.certList .over{overflow:hidden; display:none; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:100%; height:100%; border:2rem solid var(--point); box-sizing:border-box;}
.certList .xi-search{width:70rem; height:70rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--point); color:#fff; font-size:25rem; font-weight:300;}
.modal-con{display:none; position:fixed; top:0; left:0; z-index:100; width:100%; height:100%; background:rgba(0,0,0,0.3);}
.modal-con__img{position:absolute; top:50%; left:50%; width:28%; transform:translate(-50%, -50%); box-shadow:0px 0px 30px 0px rgba(0,0,0,0.1);}
.modal-con__img .img{display:block;}
.modal-con__img img{width:100%;}
.modal-con .close{position:absolute; top:0; right:-80rem; display:block; width:60rem; height:60rem; border-radius:100%; background:#111;}
.modal-con .close::before{content:''; position:absolute; top:50%; left:50%; width:20rem; height:2rem; background:#fff; transform:translate(-50%, -50%) rotate(45deg);}
.modal-con .close::after{content:''; position:absolute; top:50%; left:50%; width:20rem; height:2rem; background:#fff; transform:translate(-50%, -50%) rotate(-45deg);}
@media (max-width:1080px){
	.certList{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767px){
	.certList{grid-template-columns:repeat(2,1fr); gap:30rem 20rem;}
	.certList p{font-size:18rem; margin-top:20rem;}
	.modal-con__img{width:90%; padding:20rem; box-sizing:border-box; background:#fff;}
	.modal-con .close{top:-55rem; right:0; width:45rem; height:45rem;}
	.modal-con .close::before{width:15rem;}
	.modal-con .close::after{width:15rem;}
}
@media (max-width:480px){
	.certList{gap:30rem 15rem;}
	.certList .certCon{padding:15rem;}
	.certList .img{ width:100%; min-width:100%;  height:auto;}
	.certList p{font-size:15rem; margin-top:15rem;}
}

/* category design */
.category-bbs{margin-bottom:30rem;}
.category-bbs .tab{justify-content:center;}
.category-bbs a{display:flex; justify-content:center; align-items:center; min-width:120rem; height:47rem; padding:0 20rem; background-color:#fff; border:2rem solid #ececec; border-radius:50em; font-size:17rem; color:#777; font-weight:600; text-align:center; transition:0.3s ease;}
.category-bbs a.on{background-color:var(--point); border-color:var(--point); color:#fff;}	 
@media (max-width:768px){
	.category-bbs a{min-width:100rem;}
}

/* tab scroll mob  */
.scroll_control .inner ul{display:flex;}
.scroll_control .inner ul li{flex:none; white-space:nowrap;}
.scroll_control .inner ul li:first-child{padding-left:0 !important;}
.scroll_control.full{--sizeBg:30rem; position:relative;}
.scroll_control.full .inner{position:relative; overflow-x:auto; overflow-y:hidden; width:100%;}
.scroll_control.full .inner > ul{flex-wrap:nowrap; justify-content:flex-start; margin:0;}
.scroll_control.full .inner > ul > li:last-child{padding-right:var(--sizeBg);}
/* mask사용시 */
.scroll_control.full{mask:linear-gradient(90deg, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);}
/* tab */
.tab-area{
	&{position:relative;}
	.tab{
		&{--sizeGap:5rem; display:flex; align-items:stretch;}
		li{display:flex; padding:0 var(--sizeGap);}
		a{display:inline-flex; justify-content:center; align-items:center; position:relative; transition:color 0.3s;}
	}
	.tab-box{
		&{opacity:0; visibility:hidden; position:absolute; transition:0.3s ease; transition-property:opacity, visibility;}
		&.active{opacity:1; visibility:visible;}
	}
}

/* contact */
[data-sub="contact"] .online-box{padding:50rem; box-sizing:border-box; border:4rem solid #f5f5f5; max-width:1300rem; margin:0 auto;}
[data-sub="contact"] .online_form li{display:flex; align-items:center; gap:40rem;}
[data-sub="contact"] .online_form li + li{margin-top:40rem;}
[data-sub="contact"] .online_form li div{width:100%;}
[data-sub="contact"] .online_form .tel{display:grid; grid-template-columns:repeat(3,1fr); gap:20rem;}
[data-sub="contact"] .online_form .mail{display:flex; align-items:center; gap:20rem;}
[data-sub="contact"] .online_form input{margin:0; width:100%; height:55rem; padding:20rem 15rem; background:0; border:0; border-bottom:1rem solid #bbb; border-radius:0;}
[data-sub="contact"] .online_form textarea{margin:0; width:100%; height:150rem; padding:20rem; box-sizing:border-box; background:#f5f5f5; border:0;}
[data-sub="contact"] .online_form .checkbox label{display:flex; align-items:center; font-size:15rem; font-weight:300; color:#555;}
[data-sub="contact"] .online_form input[type="checkbox"]{width:20rem; height:20rem; border-radius:50%; margin-right:10rem;}
[data-sub="contact"] .online_form .checkbox a{font-weight:500; color:var(--black);}
[data-sub="contact"] .online-box .agree-box{display:flex; flex-direction:column; gap:10rem; justify-content:space-between; margin-top:50rem;}
[data-sub="contact"] .online-box .agree-box .csBtn{width:100%; height:70rem; display:flex; gap:10rem; font-size:18rem; align-items:center; justify-content:center; background:#222; color:var(--white); margin-top:25rem;}
[data-sub="contact"] .online-box .agree-box .csBtn i{font-size:22rem;}
[data-sub="contact"] .online_form li.spam{flex-direction:column; align-items:flex-start; gap:20rem;}
[data-sub="contact"] .online_form li.spam em{display:flex; align-items:center; white-space:nowrap; font-size:18rem;}
[data-sub="contact"] .spam-num {display: flex; align-items: center;}
[data-sub="contact"] .spam-num p {display: flex; gap: 6rem; white-space: nowrap; margin-right: 20rem;}
[data-sub="contact"] .fieldset-box {display: flex; align-items: center; gap: 20rem; width: 100%;}
[data-sub="contact"] .spam-num .spam {display: flex; align-items: center; justify-content: center; height: 55rem;  font-size: 16rem; min-width: 110rem; text-align: center; padding: 0 20rem; border-radius: 4rem; box-sizing: border-box; background: #222; color: var(--white);}
[data-sub="contact"] .online_form input::placeholder{font-size:16rem; font-weight: 300; color: #888;}
[data-sub="contact"] .marking {margin: 0; }

@media (max-width:767px){
    [data-sub="contact"] .online-box{padding:30rem; max-width:100%;}
    [data-sub="contact"] .online_form input{padding:15rem 10rem; border-bottom:0; background:#f5f5f5;}
    [data-sub="contact"] .online_form li{gap:20rem;}
    [data-sub="contact"] .online_form li + li{margin-top:20rem;}
    [data-sub="contact"] .online_form textarea{margin:0; height:100rem; padding:10rem}
    [data-sub="contact"] .online_form .tel{gap:10rem;}
    [data-sub="contact"] .online_form .mail{gap:10rem;}
    [data-sub="contact"] .online-box .agree-box{margin-top:30rem;}
    [data-sub="contact"] .online_form input {height: 50rem;}
    [data-sub="contact"] .online_form input[type="checkbox"]{width:18rem; height:18rem; margin-right:0;}
    [data-sub="contact"] .online_form .checkbox label{gap:8rem; font-size:13rem; flex-wrap:wrap;}
    [data-sub="contact"] .online_form input::placeholder{font-size:14rem;}
    [data-sub="contact"] .online-box .agree-box .csBtn{height:55rem; font-size:16rem;; margin-top:20rem;}
	[data-sub="contact"] .spam-num {flex-direction: column; align-items: flex-start; gap: 20rem;}
	[data-sub="contact"] .fieldset-box {gap: 10rem;}
    [data-sub="contact"] .spam-num p {margin-right: 0;}
	[data-sub="contact"] .spam-num .spam {border-radius: 0; height: 50rem;}
}
@media (max-width:480px){
    [data-sub="contact"] .online-box{padding:0; border:0;}
    [data-sub="contact"] .online_form ul{padding:20rem 0; border-top:1rem solid #333; border-bottom:1rem solid #333}
    [data-sub="contact"] .online_form li{display:flex; flex-direction:column; align-items:flex-start; gap:15rem;}
    [data-sub="contact"] .online_form li + li{margin-top:15rem;}
    [data-sub="contact"] .online_form input{padding:12rem 10rem;}
    [data-sub="contact"] .spam-num .spam {min-width: auto; font-size: 16rem;}
}