.hidden{display:none;} /*신규 리디자인 Product Page 전체공통영역*/ .subTitleArea {width:100%; position:relative;} .subTitleArea .content {width:100%; position:absolute; z-index:1; bottom:0; padding:80px 10%; box-sizing:border-box} .subTitleArea .content .top{width:100%; display:flex; border-bottom:1px solid #fff; padding:0px 0px 32px 0px; justify-content:space-between; align-items:end;} .subTitleArea .content .top .logo {width:320px;} .subTitleArea .content .top .logo_tx{font-size:60px; color:#fff; font-weight:bold; line-height:52px;} .subTitleArea .content .top .logo_tx span{font-size:24px; color:#fff; font-weight:bold; display:inline-block; margin-left:32px; padding-left:12px; position:relative; vertical-align:middle; font-weight:400;} .subTitleArea .content .top .logo_tx span:before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:-12px; width:8px; height:8px; background:#fff; border-radius:50%;} .subTitleArea .content .top .logo img{width:100%;} .subTitleArea .content .info{width:100%; margin-top:32px; display:flex; gap:12px; flex-direction:column;} .subTitleArea .content .info .subject{width:100%; font-size:32px; font-weight:bold; color:#fff;} .subTitleArea .content .info .substance{width:100%; font-size:18px; color:#fff; word-break:keep-all; line-height:26px;} .subTitleArea .bg{width:100%;} .subTitleArea .bg img{width:100%;} .btn{display:inline-block;} .btn a{padding:12px 40px; display:flex; gap:8px; align-items:center; border-radius:4px;} .btn a .icon{width:20px;} .btn a .icon img{width:100%;} .btn a .tx{font-size:18px; color:#fff;} .download_btn a{background:#222;} .subTitleArea .counsel_btn a{border:1px solid #fff;} .section .titleA{width:100%; box-sizing:border-box; border-bottom:1px solid #e5e5e5; padding:0px 0px 20px; border-bottom:1px solid #e5e5e5; display:Flex; justify-content:space-between; align-items:end;} .section .titleA .txA{ display:Flex; gap:4px; flex-direction:column;} .section .titleA .subTitle{font-size:24px; color:#444;} .section .titleA .title{font-size:40px; color:#222; font-weight:bold;} .centerTitle .titleA{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px;} .whiteTitle .titleA .subTitle, .whiteTitle .titleA .title{color:#fff;} .titleA.noborder{border:0;} @media (max-width: 1439px) { .subTitleArea {width:100%; position:relative;} .subTitleArea .content {width:100%; position:absolute; z-index:1; bottom:0; padding:80px 5%; box-sizing:border-box} .subTitleArea .content .top{width:100%; display:flex; border-bottom:1px solid #fff; padding:0px 0px 20px 0px; justify-content:space-between; align-items:end;} .subTitleArea .content .top .logo {width:260px;} .subTitleArea .content .top .logo_tx{font-size:60px; color:#fff; font-weight:bold; line-height:52px;} .subTitleArea .content .top .logo_tx span{font-size:18px; color:#fff; font-weight:bold; display:inline-block; margin-left:32px; padding-left:12px; position:relative; vertical-align:middle; font-weight:400;} .subTitleArea .content .top .logo_tx span:before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:-12px; width:8px; height:8px; background:#fff; border-radius:50%;} .subTitleArea .content .top .logo img{width:100%;} .subTitleArea .content .info{width:100%; margin-top:32px; display:flex; gap:12px; flex-direction:column;} .subTitleArea .content .info .subject{width:100%; font-size:32px; font-weight:bold; color:#fff;} .subTitleArea .content .info .substance{width:100%; font-size:20px; color:#fff; word-break:keep-all;} .subTitleArea .bg{width:100%; overflow:hidden;} .subTitleArea .bg img{width:130%; position:relative; left:50%; transform:translateX(-50%);} .btn{display:inline-block;} .btn a{padding:8px 32px; display:flex; gap:8px; align-items:center; border-radius:4px;} .btn a .icon{width:20px;} .btn a .icon img{width:100%;} .btn a .tx{font-size:16px; color:#fff;} .download_btn a{background:#222;} .subTitleArea .counsel_btn a{border:1px solid #fff;} .section .titleA{width:100%; box-sizing:border-box; border-bottom:1px solid #e5e5e5; padding:0px 0px 20px; border-bottom:1px solid #e5e5e5; display:Flex; justify-content:space-between; align-items:end;} .section .titleA .txA{ display:Flex; gap:4px; flex-direction:column;} .section .titleA .subTitle{font-size:20px; color:#444;} .section .titleA .title{font-size:36px; color:#222; font-weight:bold;} .centerTitle .titleA{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px;} .whiteTitle .titleA .subTitle, .whiteTitle .titleA .title{color:#fff;} .titleA.noborder{border:0;} } @media (max-width: 1023px) { .subTitleArea {width:100%; position:relative;} .subTitleArea .content {width:100%; position:absolute; z-index:1; bottom:0; padding:40px 3%; box-sizing:border-box} .subTitleArea .content .top{width:100%; display:flex; border-bottom:1px solid #fff; padding:0px 0px 20px 0px; justify-content:space-between; align-items:end;} .subTitleArea .content .top .logo {width:200px;} .subTitleArea .content .top .logo_tx{font-size:60px; color:#fff; font-weight:bold; line-height:52px;} .subTitleArea .content .top .logo_tx span{font-size:16px; color:#fff; font-weight:bold; display:inline-block; margin-left:32px; padding-left:12px; position:relative; vertical-align:middle; font-weight:400;} .subTitleArea .content .top .logo_tx span:before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:-12px; width:8px; height:8px; background:#fff; border-radius:50%;} .subTitleArea .content .top .logo img{width:100%;} .subTitleArea .content .info{width:100%; margin-top:32px; display:flex; gap:12px; flex-direction:column;} .subTitleArea .content .info .subject{width:100%; font-size:28px; font-weight:bold; color:#fff;} .subTitleArea .content .info .substance{width:100%; font-size:16px; color:#fff; word-break:keep-all;} .subTitleArea .bg{width:100%; overflow:hidden;} .subTitleArea .bg img{width:160%; position:relative; left:50%; transform:translateX(-50%);} .btn{display:inline-block;} .btn a{padding:8px 20px; display:flex; gap:8px; align-items:center; border-radius:4px;} .btn a .icon{width:16px;} .btn a .icon img{width:100%;} .btn a .tx{font-size:14px; color:#fff;} .download_btn a{background:#222;} .subTitleArea .counsel_btn a{border:1px solid #fff;} .section .titleA{width:100%; box-sizing:border-box; border-bottom:1px solid #e5e5e5; padding:0px 0px 20px; border-bottom:1px solid #e5e5e5; display:Flex; justify-content:space-between; align-items:end;} .section .titleA .txA{ display:Flex; gap:4px; flex-direction:column;} .section .titleA .subTitle{font-size:16px; color:#444;} .section .titleA .title{font-size:28px; color:#222; font-weight:bold;} .centerTitle .titleA{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px;} .whiteTitle .titleA .subTitle, .whiteTitle .titleA .title{color:#fff;} .titleA.noborder{border:0;} } @media (max-width: 767px) { .subTitleArea {width:100%; position:relative;} .subTitleArea .content {width:100%; position:absolute; z-index:1; bottom:0; padding:32px 3%; box-sizing:border-box} .subTitleArea .content .top{width:100%; display:flex; border-bottom:1px solid #fff; padding:0px 0px 12px 0px; justify-content:space-between; align-items:end;} .subTitleArea .content .top .logo {width:160px;} .subTitleArea .content .top .logo img{width:100%;} .subTitleArea .content .top .logo_tx{font-size:36px; color:#fff; font-weight:bold; line-height:52px;} .subTitleArea .content .top .logo_tx span{font-size:14px; color:#fff; font-weight:bold; margin-top:0px; display:block; margin-left:0px; padding-left:0px; position:relative; vertical-align:middle; line-height:14px; font-weight:400;} .subTitleArea .content .top .logo_tx span:before{display:none;content:''; position:absolute; top:50%; transform:translateY(-50%); left:-12px; width:8px; height:8px; background:#fff; border-radius:50%;} .subTitleArea .content .info{width:100%; margin-top:20px; display:flex; gap:12px; flex-direction:column;} .subTitleArea .content .info .subject{width:100%; font-size:20px; font-weight:bold; color:#fff;} .subTitleArea .content .info .substance{width:100%; font-size:14px; color:#fff; word-break:keep-all; line-height:22px;} .subTitleArea .bg{width:100%; overflow:hidden;} .subTitleArea .bg img{width:220%; position:relative; left:50%; transform:translateX(-50%);} .btn{display:inline-block;} .btn a{padding:8px 16px; display:flex; gap:8px; align-items:center; border-radius:4px;} .btn a .icon{width:16px;} .btn a .icon img{width:100%;} .btn a .tx{font-size:13px; color:#fff;} .download_btn a{background:#222;} .subTitleArea .counsel_btn a{border:1px solid #fff;} .section .titleA{width:100%; box-sizing:border-box; border-bottom:1px solid #e5e5e5; padding:0px 0px 12px; border-bottom:1px solid #e5e5e5; display:Flex; justify-content:center; align-items:center; flex-direction:column; gap:16px;} .section .titleA .txA{display:Flex; gap:2px; flex-direction:column;} .section .titleA .subTitle{font-size:14px; color:#444; word-break:keep-all; text-align:Center;} .section .titleA .title{font-size:24px; color:#222; font-weight:bold; word-break:keep-all; text-align:Center;} .centerTitle .titleA{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px;} .whiteTitle .titleA .subTitle, .whiteTitle .titleA .title{color:#fff;} .titleA.noborder{border:0;} } @media (max-width: 374px) { .subTitleArea {width:100%; position:relative;} .subTitleArea .content {width:100%; position:absolute; z-index:1; bottom:0; padding:32px 3%; box-sizing:border-box} .subTitleArea .content .top{width:100%; display:flex; border-bottom:1px solid #fff; padding:0px 0px 20px 0px; justify-content:space-between; align-items:start;} .subTitleArea .content .top .logo {width:160px;} .subTitleArea .content .top .logo img{width:100%;} .subTitleArea .content .top .logo_tx{font-size:32x; color:#fff; font-weight:bold; line-height:20px;} .subTitleArea .content .top .logo_tx span{font-size:14px; color:#fff; font-weight:bold; margin-top:12px; display:block; margin-left:0px; padding-left:0px; position:relative; vertical-align:middle; line-height:20px; font-weight:400;} .subTitleArea .content .top .logo_tx span:before{display:none;content:''; position:absolute; top:50%; transform:translateY(-50%); left:-12px; width:8px; height:8px; background:#fff; border-radius:50%;} .subTitleArea .content .top .btn{display:none;} .subTitleArea .content .info{width:100%; margin-top:20px; display:flex; gap:12px; flex-direction:column;} .subTitleArea .content .info .subject{width:100%; font-size:20px; font-weight:bold; color:#fff;} .subTitleArea .content .info .substance{width:100%; font-size:14px; color:#fff; word-break:keep-all;} .subTitleArea .bg{width:100%; overflow:hidden;} .subTitleArea .bg img{width:260%; position:relative; left:50%; transform:translateX(-50%);} .btn{display:inline-block;} .btn a{padding:8px 16px; display:flex; gap:8px; align-items:center; border-radius:4px;} .btn a .icon{width:16px;} .btn a .icon img{width:100%;} .btn a .tx{font-size:13px; color:#fff;} .download_btn a{background:#222;} .subTitleArea .counsel_btn a{border:1px solid #fff;} .section .titleA{width:100%; box-sizing:border-box; border-bottom:1px solid #e5e5e5; padding:0px 0px 12px; border-bottom:1px solid #e5e5e5; display:Flex; justify-content:center; align-items:center; flex-direction:column; gap:16px;} .section .titleA .txA{display:Flex; gap:2px; flex-direction:column;} .section .titleA .subTitle{font-size:14px; color:#444; word-break:keep-all; text-align:Center;} .section .titleA .title{font-size:20px; color:#222; font-weight:bold; word-break:keep-all; text-align:Center;} .centerTitle .titleA{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px;} .whiteTitle .titleA .subTitle, .whiteTitle .titleA .title{color:#fff;} .titleA.noborder{border:0;} } /*solution*/ .solution{width:100%; display:flex; gap:40px; margin-top:60px;} .solution dd{width:100%; padding:32px; box-sizing:border-box; display:flex; gap:32px; border-radius:20px; background:#fff; flex-direction:column; box-shadow:1px 1px 20px rgba(0,0,0,0.07); align-items:center; justify-content:space-between;} .solution dd .subjA{width:100%; padding-bottom:20px; border-bottom:1px solid #e5e5e5;} .solution dd .subjA .numbering{width:100%; font-size:16px; color:#F8844A; } .solution dd .subjA .subject{width:100%; font-size:28px; color:#222; font-weight:700; margin-top:16px;} .solution dd .subjA .substance{width:100%; font-size:18px; color:#444; margin-top:8px; word-break:keep-all;} .solution dd .thumbnail{width:100%;} .solution dd .thumbnail img{width:100%;} .solution dd .discriptionList{width:100%; display:flex; flex-direction:column; gap:20px} .solution dd .discriptionList li{width:100%; padding-left:28px; box-sizing:border-box; display:flex; gap:4px; flex-direction:column;} .solution dd .discriptionList li .subj{font-size:18px; color:#222; font-weight:500; position:Relative;} .solution dd .discriptionList li .subj:before{background-image:url('https://static.wixstatic.com/media/ec35eb_314a5f204cf04d36a890994f95307506~mv2.png'); width:20px; height:20px; position:absolute; left:-28px; background-size:100%; content:''; top:50%; transform:translateY(-50%);} .solution dd .discriptionList li .subs{font-size:16px; color:#777; word-break:keep-all;} .solution dd .download{width:100%; background:#222; color:#fff; cursor:pointer; padding:12px 20px; box-sizing:border-box; text-align:center;} @media (max-width: 1439px) { .solution{width:100%; display:flex; gap:40px; margin-top:40px; flex-wrap:wrap;} .solution dd .subjA{width:100%; padding-bottom:20px; border-bottom:1px solid #e5e5e5;} .solution dd .subjA .numbering{width:100%; font-size:16px; color:#F8844A; } .solution dd .subjA .subject{width:100%; font-size:28px; color:#222; font-weight:700; margin-top:16px;} .solution dd .subjA .substance{width:100%; font-size:18px; color:#444; margin-top:8px; word-break:keep-all;} .solution dd .thumbnail{width:100%;} .solution dd .thumbnail img{width:100%;} .solution dd .discriptionList{width:100%; display:flex; flex-direction:column; gap:20px} .solution dd .discriptionList li{width:100%; padding-left:28px; box-sizing:border-box; display:flex; gap:4px; flex-direction:column;} .solution dd .discriptionList li .subj{font-size:18px; color:#222; font-weight:500; position:Relative;} .solution dd .discriptionList li .subj:before{background-image:url('https://static.wixstatic.com/media/ec35eb_314a5f204cf04d36a890994f95307506~mv2.png'); width:20px; height:20px; position:absolute; left:-28px; background-size:100%; content:''; top:50%; transform:translateY(-50%);} .solution dd .discriptionList li .subs{font-size:16px; color:#777; word-break:keep-all;} .solution dd .download{width:100%; background:#222; color:#fff; cursor:pointer; padding:12px 20px; box-sizing:border-box; text-align:center;} } @media (max-width: 1023px) { .solution{width:100%; display:flex; gap:20px; margin-top:40px;flex-wrap:wrap;} .solution dd .subjA{width:100%; padding-bottom:20px; border-bottom:1px solid #e5e5e5;} .solution dd .subjA .numbering{width:100%; font-size:14px; color:#F8844A; } .solution dd .subjA .subject{width:100%; font-size:24px; color:#222; font-weight:700; margin-top:16px;} .solution dd .subjA .substance{width:100%; font-size:16px; color:#444; margin-top:8px; word-break:keep-all;} .solution dd .thumbnail{width:100%;} .solution dd .thumbnail img{width:100%;} .solution dd .discriptionList{width:100%; display:flex; flex-direction:column; gap:20px} .solution dd .discriptionList li{width:100%; padding-left:24px; box-sizing:border-box; display:flex; gap:4px; flex-direction:column;} .solution dd .discriptionList li .subj{font-size:16px; color:#222; font-weight:500; position:Relative;} .solution dd .discriptionList li .subj:before{background-image:url('https://static.wixstatic.com/media/ec35eb_314a5f204cf04d36a890994f95307506~mv2.png'); width:16px; height:16px; position:absolute; left:-24px; background-size:100%; content:''; top:50%; transform:translateY(-50%);} .solution dd .discriptionList li .subs{font-size:14px; color:#777; word-break:keep-all;} .solution dd .download{width:100%; background:#222; color:#fff; cursor:pointer; padding:12px 20px; box-sizing:border-box; text-align:center; font-size:16px;} } @media (max-width: 767px) { .solution{width:100%; display:flex; gap:20px; margin-top:32px;flex-wrap:wrap;} .solution dd{width:100%; padding:20px; box-sizing:border-box; display:flex; gap:32px; border-radius:20px; background:#fff; flex-direction:column; box-shadow:1px 1px 20px rgba(0,0,0,0.07); align-items:center; justify-content:space-between} .solution dd .subjA{width:100%; padding-bottom:20px; border-bottom:1px solid #e5e5e5;} .solution dd .subjA .numbering{width:100%; font-size:14px; color:#F8844A; } .solution dd .subjA .subject{width:100%; font-size:20px; color:#222; font-weight:700; margin-top:12px;} .solution dd .subjA .substance{width:100%; font-size:16px; color:#444; margin-top:4px; word-break:keep-all;} .solution dd .thumbnail{width:100%;} .solution dd .thumbnail img{width:100%;} .solution dd .discriptionList{width:100%; display:flex; flex-direction:column; gap:20px} .solution dd .discriptionList li{width:100%; padding-left:24px; box-sizing:border-box; display:flex; gap:4px; flex-direction:column;} .solution dd .discriptionList li .subj{font-size:16px; color:#222; font-weight:500; position:Relative;} .solution dd .discriptionList li .subj:before{background-image:url('https://static.wixstatic.com/media/ec35eb_314a5f204cf04d36a890994f95307506~mv2.png'); width:16px; height:16px; position:absolute; left:-24px; background-size:100%; content:''; top:50%; transform:translateY(-50%);} .solution dd .discriptionList li .subs{font-size:14px; color:#777; word-break:keep-all;} .solution dd .download{width:100%; background:#222; color:#fff; cursor:pointer; padding:12px 20px; box-sizing:border-box; text-align:center; font-size:16px;} } @media (max-width: 374px) { .solution{width:100%; display:flex; gap:20px; margin-top:32px;flex-wrap:wrap;} .solution dd{width:100%; padding:20px; box-sizing:border-box; display:flex; gap:32px; border-radius:20px; background:#fff; flex-direction:column; box-shadow:1px 1px 20px rgba(0,0,0,0.07); align-items:center; justify-content:space-between} .solution dd .subjA{width:100%; padding-bottom:20px; border-bottom:1px solid #e5e5e5;} .solution dd .subjA .numbering{width:100%; font-size:13px; color:#F8844A; } .solution dd .subjA .subject{width:100%; font-size:16px; color:#222; font-weight:700; margin-top:12px;} .solution dd .subjA .substance{width:100%; font-size:14px; color:#444; margin-top:4px; word-break:keep-all;} .solution dd .thumbnail{width:100%;} .solution dd .thumbnail img{width:100%;} .solution dd .discriptionList{width:100%; display:flex; flex-direction:column; gap:20px} .solution dd .discriptionList li{width:100%; padding-left:24px; box-sizing:border-box; display:flex; gap:4px; flex-direction:column;} .solution dd .discriptionList li .subj{font-size:14px; color:#222; font-weight:500; position:Relative;} .solution dd .discriptionList li .subj:before{background-image:url('https://static.wixstatic.com/media/ec35eb_314a5f204cf04d36a890994f95307506~mv2.png'); width:16px; height:16px; position:absolute; left:-24px; background-size:100%; content:''; top:50%; transform:translateY(-50%);} .solution dd .discriptionList li .subs{font-size:13px; color:#777; word-break:keep-all;} .solution dd .download{width:100%; background:#222; color:#fff; cursor:pointer; padding:12px 20px; box-sizing:border-box; text-align:center; font-size:14px;} } /*siemsoar*/ #seimsoar{width:100%;} #seimsoar .section01{width:100%; padding:120px 10%; box-sizing:border-box;} #seimsoar .section01 .top{width:100%; position:relative;} #seimsoar .section01 .top .topChart{width:100%; display:flex; gap:12px; } #seimsoar .section01 .top .topChart .customer{width:50%; display:flex; gap:0px; position:relative;} #seimsoar .section01 .top .topChart .customer .customerBox{width:calc(100% - 220px); border:1px solid #e5e5e5; padding:32px; box-sizing:border-box; display:Flex; flex-direction:column; justify-content:space-between;} #seimsoar .section01 .top .topChart .customer .customerBox .subjectBox{background:#e5e5e5; color:#222;} #seimsoar .section01 .top .topChart .customer .customerBox .list{width:100%; display:flex; flex-wrap:wrap;} #seimsoar .section01 .top .topChart .customer .customerBox .list li{width:50%; padding:16px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon{width:52px;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .subj{width:100%; text-align:center; font-size:16px; color:#444;} #seimsoar .section01 .top .topChart .customer .customerBox .discription{width:100%;text-align:center; font-size:18px; color:#444; margin-top:12px;} #seimsoar .section01 .top .topChart .customer .arrowA{width:220px; position:relative; z-index:1; margin-left:-1px; align-items:center; display:flex; justify-content:center;} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg{width:100%;} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg img{width:100%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA{width:100%; position:absolute; top:50%; gap:4px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon{width:52px;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .tx{font-size:16px; color:#444} #seimsoar .section01 .top .topChart .seim_soar{width:50%; border:1px solid #e5e5e5; position:relative; padding:32px; display:flex; justify-content:space-between;} #seimsoar .section01 .top .topChart .seim_soar .listCont{width:40%;} #seimsoar .section01 .top .topChart .seim_soar .listCont .subjectBox{background:#F8844A; color:#fff;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list{width:100%; margin-top:20px; height:100%; display:flex; gap:20px; flex-direction: column; padding:20px 0px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li{width:100%; background:#FEF3ED; text-align:center; word-break:keep-all; padding:32px 12px; box-sizing:border-box; font-size:16px; color:#444} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li span{width:100%; display:block; font-weight:600;} #seimsoar .section01 .top .topChart .seim_soar .arrowList{width:20%; margin-top:20px; height:calc(100% - 90px); place-self:center; display:flex; justify-content:space-between; flex-direction:column; padding:16px 0px;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li{width:100%; display:flex; align-items:center; justify-content:center; position:relative;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow{width:70%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow img{width:100%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .tx{width:70%; position:absolute; top:50%; transform:translateY(-50%); text-align:Right; padding:0px 20px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .subjectBox{font-size:18px; padding:12px 32px; font-weight:500; border-radius:50px; position:relative; left:50%; transform:translateX(-50%); margin-top:-52px; text-align:Center; display:inline-block;} #seimsoar .section01 .top .arrow_txA{width:73%; position:relative; left:52%; transform:translateX(-50%); margin-top:-28px;} #seimsoar .section01 .top .arrow_txA .arrowBg{width:100%;} #seimsoar .section01 .top .arrow_txA .arrowBg img{width:100%;} #seimsoar .section01 .top .arrow_txA .tx{position:absolute; left:50%; transform:translateX(-50%); display:inline-block; padding:0px 12px; background:#fff; color:#F8844A; bottom:0; font-size:20px; font-weight:600; margin-top:-4px;} #seimsoar .section01 .tagA{width:100%; margin-top:40px; border-radius:150px; background:#f7f7f7; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; justify-content:space-between;} #seimsoar .section01 .tagA .processTag{width:73%; display:flex; justify-content:space-between;} #seimsoar .section01 .tagA .processTag li{width:100%; color:#444; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:200px; flex:1 1 100px; font-size:18px} #seimsoar .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #seimsoar .section01 .tagA .arrow{width:7%; place-self:center;} #seimsoar .section01 .tagA .arrow img{width:100%;} #seimsoar .section01 .tagA .result{width:20%; background:#F8844A;border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; font-size:18px; max-width:200px; padding:0px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #seimsoar .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #seimsoar .section02{width:100%; padding:0px 10%; box-sizing:border-box;} #seimsoar .section02 .substance{width:100%; font-size:18px; margin-top:32px; color:#444; text-align:left; word-break:keep-all;} #seimsoar .section03{width:100%; padding:120px 10%; box-sizing:border-box; display:flex; gap:40px; align-items:center; flex-direction:column;} #seimsoar .section03 .titleA{border:0; width:100%;} #seimsoar .section03 .titleA .txA{width:100%;} #seimsoar .section03 .titleA .txA .subTitle{text-align:center;} #seimsoar .section03 .titleA .txA .title{text-align:center;} #seimsoar .section03 .youtube{width:100%; aspect-ratio: 16 / 9;} #seimsoar .section03 .substance{width:100%; font-size:18px; text-align:center; color:#444; word-break:keep-all;} @media (max-width: 1439px) { #seimsoar{width:100%;} #seimsoar .section01{width:100%; background:#fff; padding:80px 5%; box-sizing:border-box;} #seimsoar .section01 .top{width:100%; position:relative;} #seimsoar .section01 .top .topChart{width:100%; display:flex; flex-direction:column; gap:20px;} #seimsoar .section01 .top .topChart .customer{width:100%; display:flex; gap:20px; position:relative; flex-direction:column;} #seimsoar .section01 .top .topChart .customer .customerBox{width:100%; border:1px solid #e5e5e5; padding:32px 32px 20px; box-sizing:border-box; display:Flex; flex-direction:column; justify-content:space-between; position:relative; background:#fff; z-index:1;} #seimsoar .section01 .top .topChart .customer .customerBox .subjectBox{background:#e5e5e5; color:#222;} #seimsoar .section01 .top .topChart .customer .customerBox .list{width:100%; display:flex; flex-wrap:nowrap;} #seimsoar .section01 .top .topChart .customer .customerBox .list li{width:100%; padding:16px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon{width:52px;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .subj{width:100%; text-align:center; font-size:16px; color:#444;} #seimsoar .section01 .top .topChart .customer .customerBox .discription{width:100%;text-align:center; font-size:18px; color:#444; margin-top:12px;} #seimsoar .section01 .top .topChart .customer .arrowA{width:100%; position:relative; z-index:1; margin-left:0px; margin-top:-1px; align-items:center; display:flex; justify-content:center; flex-direction: column; z-index:0;} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg{width:auto; height:auto; position:Relative; transform:rotate(90deg); margin-top:12%} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg img{width:40%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA{width:100%; position:relative; top:auto; gap:4px; transform:translateY(0%); display:flex;align-items:center; justify-content:center; margin-top:-8%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon{width:40px;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .tx{font-size:16px; color:#444} #seimsoar .section01 .top .topChart .seim_soar{width:100%; border:1px solid #e5e5e5; position:relative; padding:20px 32px; display:flex; justify-content:space-between; box-sizing:border-box;} #seimsoar .section01 .top .topChart .seim_soar .listCont{width:calc(100% / 2 - 110px); height:100%;} #seimsoar .section01 .top .topChart .seim_soar .listCont .subjectBox{background:#F8844A; color:#fff;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list{width:100%; height:100%; margin-top:0px; display:flex; justify-content:space-between; flex-direction: column; padding:20px 0px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li{width:100%; background:#FEF3ED; text-align:center; word-break:keep-all; padding:32px 12px; box-sizing:border-box; font-size:16px; color:#444} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li span{width:100%; display:block; font-weight:600;} #seimsoar .section01 .top .topChart .seim_soar .arrowList{width:200px; place-self:auto; gap:0px; display:flex; justify-content:space-between; flex-direction:column;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li{width:100%; display:flex; align-items:center; justify-content:center; position:relative; padding:19px 0px; } #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow{width:50%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow img{width:100%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .tx{width:50%; position:absolute; top:50%; transform:translateY(-50%); text-align:Right; padding:0px 20px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .subjectBox{font-size:18px; width:160px; padding:12px 32px; font-weight:500; border-radius:50px; position:relative; left:50%; transform:translateX(-50%); margin-top:-52px; text-align:Center; display:inline-block;} #seimsoar .section01 .top .arrow_txA{width:100%; position:relative; left:50%; transform:translateX(-50%); margin-top:0px;} #seimsoar .section01 .top .arrow_txA .arrowBg{width:100%; display:none;} #seimsoar .section01 .top .arrow_txA .arrowBg img{width:100%;} #seimsoar .section01 .top .arrow_txA .tx{position:relative; left:50%; transform:translateX(-50%); display:inline-block; padding:12px 20px; background:#F8844A; color:#fff; bottom:0; font-size:18px; font-weight:600; margin-top:-24px; border-radius:50px;} #seimsoar .section01 .tagA{width:100%; margin-top:40px; border-radius:150px; background:#f7f7f7; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; justify-content:space-between;} #seimsoar .section01 .tagA .processTag{width:73%; display:flex; justify-content:space-between;} #seimsoar .section01 .tagA .processTag li{width:100%; color:#444; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:160px; flex:1 1 100px; font-size:16px} #seimsoar .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #seimsoar .section01 .tagA .arrow{width:7%; place-self:center;} #seimsoar .section01 .tagA .arrow img{width:100%;} #seimsoar .section01 .tagA .result{width:20%; background:#F8844A;border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; font-size:16px; max-width:160px; padding:0px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #seimsoar .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #seimsoar .section02{width:100%; padding:0px 5%; box-sizing:border-box;} #seimsoar .section02 .substance{width:100%; font-size:18px; margin-top:32px; color:#444;} #seimsoar .solution dd{width:calc(100% / 2 - 20px); padding:32px; box-sizing:border-box; display:flex; gap:32px; border-radius:20px; background:#fff; flex-direction:column; box-shadow:1px 1px 20px rgba(0,0,0,0.07); align-items:center; justify-content:space-between} #seimsoar .section03{width:100%; padding:80px 5%; box-sizing:border-box; display:flex; gap:40px; align-items:center; flex-direction:column;} #seimsoar .section03 .titleA{border:0; width:100%;} #seimsoar .section03 .titleA .txA{width:100%;} #seimsoar .section03 .titleA .txA .subTitle{text-align:center;} #seimsoar .section03 .titleA .txA .title{text-align:center;} #seimsoar .section03 .youtube{width:100%; aspect-ratio: 16 / 9;} #seimsoar .section03 .substance{width:100%; font-size:18px; text-align:center; color:#444; word-break:keep-all;} } @media (max-width: 1023px) { #seimsoar{width:100%;} #seimsoar .section01{width:100%; background:#fff; padding:80px 3%; box-sizing:border-box;} #seimsoar .section01 .titleA{border-bottom:0;} #seimsoar .section01 .tagA{width:100%; margin-top:40px; border-radius:32px; background:#f7f7f7; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column;} #seimsoar .section01 .tagA .processTag{width:100%; display:flex; justify-content:space-between;} #seimsoar .section01 .tagA .processTag li{width:100%; color:#444; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:160px; flex:1 1 100px; font-size:16px} #seimsoar .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #seimsoar .section01 .tagA .arrow{width:12%; place-self:center; transform:rotate(90deg)} #seimsoar .section01 .tagA .arrow img{width:100%;} #seimsoar .section01 .tagA .result{width:100%; background:#F8844A;border-radius:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:0; font-size:16px; max-width:100%; padding:20px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #seimsoar .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #seimsoar .section01 .top .topChart .customer{width:100%; display:flex; gap:20px; position:relative; flex-direction:column;} #seimsoar .section01 .top .topChart .customer .customerBox{width:100%; border:1px solid #e5e5e5; padding:32px 32px 20px; box-sizing:border-box; display:Flex; flex-direction:column; justify-content:space-between; position:relative; z-index:1; background:#fff;} #seimsoar .section01 .top .topChart .customer .customerBox .subjectBox{background:#e5e5e5; color:#222;} #seimsoar .section01 .top .topChart .customer .customerBox .list{width:100%; display:flex; flex-wrap:nowrap;} #seimsoar .section01 .top .topChart .customer .customerBox .list li{width:100%; padding:16px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon{width:52px;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .subj{width:100%; text-align:center; font-size:16px; color:#444;} #seimsoar .section01 .top .topChart .customer .customerBox .discription{width:100%;text-align:center; font-size:18px; color:#444; margin-top:12px;} #seimsoar .section01 .top .topChart .customer .arrowA{width:100%; position:relative; z-index:0; margin-left:0px; margin-top:-1px; align-items:center; display:flex; justify-content:center; flex-direction: column;} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg{width:auto; height:auto; position:Relative; transform:rotate(90deg); margin-top:20%} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg img{width:40%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA{width:100%; position:relative; top:auto; gap:4px; transform:translateY(0%); display:flex;align-items:center; justify-content:center; margin-top:-12%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon{width:40px;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .tx{font-size:16px; color:#444} #seimsoar .section01 .top .topChart .seim_soar{width:100%; border:1px solid #e5e5e5; position:relative; padding:20px 32px; display:flex; justify-content:space-between; box-sizing:border-box;} #seimsoar .section01 .top .topChart .seim_soar .listCont{width:calc(100% / 2 - 90px); height:100%;} #seimsoar .section01 .top .topChart .seim_soar .listCont .subjectBox{background:#F8844A; color:#fff;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list{width:100%; height:100%; margin-top:0px; display:flex; justify-content:space-between; flex-direction: column; padding:20px 0px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li{width:100%; background:#FEF3ED; text-align:center; word-break:keep-all; padding:32px 12px; box-sizing:border-box; font-size:16px; color:#444} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li span{width:100%; display:block; font-weight:600;} #seimsoar .section01 .top .topChart .seim_soar .arrowList{width:160px; place-self:auto; gap:0px; display:flex; justify-content:space-between; flex-direction:column;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li{width:100%; display:flex; align-items:center; justify-content:center; position:relative; padding:26px 0px; } #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow{width:50%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow img{width:100%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .tx{width:50%; position:absolute; top:50%; transform:translateY(-50%); text-align:Right; padding:0px 20px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .subjectBox{font-size:18px; width:160px; padding:12px 32px; font-weight:500; border-radius:50px; position:relative; left:50%; transform:translateX(-50%); margin-top:-52px; text-align:Center; display:inline-block;} #seimsoar .section02{width:100%; padding:0px 3%; box-sizing:border-box;} #seimsoar .section02 .substance{width:100%; font-size:16px; margin-top:32px; color:#444;} #seimsoar .solution dd{width:100%; padding:32px; box-sizing:border-box; display:flex; gap:32px; border-radius:20px; background:#fff; flex-direction:column; box-shadow:1px 1px 20px rgba(0,0,0,0.07); align-items:center; justify-content:space-between} #seimsoar .section03{width:100%; padding:80px 3%; box-sizing:border-box; display:flex; gap:40px; align-items:center; flex-direction:column;} #seimsoar .section03 .titleA{border:0; width:100%;} #seimsoar .section03 .titleA .txA{width:100%;} #seimsoar .section03 .titleA .txA .subTitle{text-align:center;} #seimsoar .section03 .titleA .txA .title{text-align:center;} #seimsoar .section03 .youtube{width:100%; aspect-ratio: 16 / 9;} #seimsoar .section03 .substance{width:100%; font-size:16px; text-align:center; color:#444; word-break:keep-all;} } @media (max-width: 767px) { #seimsoar{width:100%;} #seimsoar .section01{width:100%; background:#fff; padding:60px 3%; box-sizing:border-box;} #seimsoar .section01 .top .topChart .customer{width:100%; display:flex; gap:20px; position:relative; flex-direction:column;} #seimsoar .section01 .top .topChart .customer .customerBox{width:100%; border:1px solid #e5e5e5; padding:20px; box-sizing:border-box; display:Flex; flex-direction:column; justify-content:space-between; position:relative; z-index:1; background:#fff;} #seimsoar .section01 .top .topChart .customer .customerBox .subjectBox{background:#e5e5e5; color:#222;} #seimsoar .section01 .top .topChart .customer .customerBox .list{width:100%; display:flex; flex-wrap:wrap;} #seimsoar .section01 .top .topChart .customer .customerBox .list li{width:33%; padding:16px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon{width:40px;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .customerBox .list li .subj{width:100%; text-align:center; font-size:14px; color:#444;} #seimsoar .section01 .top .topChart .customer .customerBox .discription{width:100%;text-align:center; font-size:16px; color:#444; margin-top:12px;} #seimsoar .section01 .top .topChart .customer .arrowA{width:100%; position:relative; z-index:1; margin-left:0px; margin-top:-1px; align-items:center; z-index:0; display:flex; justify-content:center; flex-direction: column;} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg{width:auto; height:auto; position:Relative; transform:rotate(90deg); margin-top:16%; z-index:-1;} #seimsoar .section01 .top .topChart .customer .arrowA .arrowImg img{width:40%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA{width:100%; position:relative; top:auto; gap:4px; transform:translateY(0%); display:flex;align-items:center; justify-content:center; margin-top:-20%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon{width:40px;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .icon img{width:100%;} #seimsoar .section01 .top .topChart .customer .arrowA .txA .tx{font-size:14px; color:#444} #seimsoar .section01 .top .topChart .seim_soar{width:100%; border:0px solid #e5e5e5; position:relative; padding:0px; display:flex; justify-content:center; box-sizing:border-box; flex-direction:column; gap:20px; margin-top:0px;} #seimsoar .section01 .top .topChart .seim_soar .listCont{width:100%; } #seimsoar .section01 .top .topChart .seim_soar .listCont .subjectBox{background:#F8844A; color:#fff; margin-top:0px !important} #seimsoar .section01 .top .topChart .seim_soar .listCont .list{width:100%; height:100%; margin-top:0px; display:flex; justify-content:space-between; flex-direction: column; padding:20px 0px; box-sizing:border-box;} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li{width:100%; background:#FEF3ED; text-align:center; word-break:keep-all; padding:20px 12px; box-sizing:border-box; font-size:14px; color:#444} #seimsoar .section01 .top .topChart .seim_soar .listCont .list li span{width:100%; display:block; font-weight:600;} #seimsoar .section01 .top .topChart .seim_soar .arrowList{width:100%; place-self:auto; gap:0px; display:flex; justify-content:space-between; flex-direction:row; } #seimsoar .section01 .top .topChart .seim_soar .arrowList li{width:100%; display:flex; align-items:center; justify-content:center; position:relative; padding:0px 0px; } #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow{width:80%; transform:rotate(90deg)} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .arrow img{width:100%;} #seimsoar .section01 .top .topChart .seim_soar .arrowList li .tx{width:40%; position:absolute; top:50%; transform:translateY(-50%); text-align:Right; padding:0px 20px; box-sizing:border-box; z-index:1;} #seimsoar .section01 .top .topChart .subjectBox{font-size:14px; width:160px; padding:12px 32px; font-weight:500; border-radius:50px; position:relative; left:50%; transform:translateX(-50%); margin-top:-52px; text-align:Center; display:inline-block;} #seimsoar .section01 .top .arrow_txA{width:100%; position:relative; left:50%; transform:translateX(-50%); margin-top:0px;} #seimsoar .section01 .top .arrow_txA .arrowBg{width:100%; display:none;} #seimsoar .section01 .top .arrow_txA .arrowBg img{width:100%;} #seimsoar .section01 .top .arrow_txA .tx{position:relative; left:50%; transform:translateX(-50%); display:inline-block; padding:0px 0px; background:#fff; color:#F8844A; bottom:auto; font-size:16px; font-weight:600; margin-top:12px; border-radius:50px;} #seimsoar .section01 .tagA{width:100%; margin-top:40px; border-radius:32px; background:#f7f7f7; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column;} #seimsoar .section01 .tagA .processTag{width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:16px;} #seimsoar .section01 .tagA .processTag li{width:calc(100% / 2 - 8px); color:#444; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:auto; flex:auto; font-size:16px} #seimsoar .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #seimsoar .section01 .tagA .arrow{width:16%; place-self:center; transform:rotate(90deg)} #seimsoar .section01 .tagA .arrow img{width:100%;} #seimsoar .section01 .tagA .result{width:100%; background:#F8844A;border-radius:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:0; font-size:16px; max-width:100%; padding:20px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #seimsoar .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #seimsoar .section02{width:100%; padding:0px 3%; box-sizing:border-box;} #seimsoar .section02 .substance{width:100%; font-size:14px; margin-top:20px; color:#444; text-align:center;} #seimsoar .section03{width:100%; padding:80px 3%; box-sizing:border-box; display:flex; gap:40px; align-items:center; flex-direction:column;} #seimsoar .section03 .titleA{border:0; width:100%;} #seimsoar .section03 .titleA .txA{width:100%;} #seimsoar .section03 .titleA .txA .subTitle{text-align:center;} #seimsoar .section03 .titleA .txA .title{text-align:center;} #seimsoar .section03 .youtube{width:100%; aspect-ratio: 16 / 9;} #seimsoar .section03 .substance{width:100%; font-size:16px; text-align:center; color:#444; word-break:keep-all;} } @media (max-width: 374px) { #seimsoar{width:100%;} #seimsoar .section01{width:100%; background:#fff; padding:60px 3%; box-sizing:border-box;} #seimsoar .section01 .titleA{border-bottom:0;} #seimsoar .section01 .tagA{width:100%; margin-top:40px; border-radius:32px; background:#f7f7f7; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column;} #seimsoar .section01 .tagA .processTag{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;} #seimsoar .section01 .tagA .processTag li{width:calc(100% / 2 - 8px); color:#444; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:auto; flex:auto; font-size:14px} #seimsoar .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #seimsoar .section01 .tagA .arrow{width:24%; place-self:center; transform:rotate(90deg)} #seimsoar .section01 .tagA .arrow img{width:100%;} #seimsoar .section01 .tagA .result{width:100%; background:#F8844A;border-radius:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:0; font-size:16px; max-width:100%; padding:20px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #seimsoar .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #seimsoar .section02{width:100%; padding:0px 3%; box-sizing:border-box;} #seimsoar .section02 .substance{width:100%; font-size:14px; margin-top:20px; color:#444;} #seimsoar .section03{width:100%; padding:60px 3%; box-sizing:border-box; display:flex; gap:20px; align-items:center; flex-direction:column;} #seimsoar .section03 .titleA{border:0; width:100%;} #seimsoar .section03 .titleA .txA{width:100%;} #seimsoar .section03 .titleA .txA .subTitle{text-align:center;} #seimsoar .section03 .titleA .txA .title{text-align:center;} #seimsoar .section03 .youtube{width:100%; aspect-ratio: 16 / 9;} #seimsoar .section03 .substance{width:100%; font-size:14px; text-align:center; color:#444; word-break:keep-all;} } /*radware*/ /*radware 공통영역*/ #radware .tagList{width:100%; display:flex; gap:12px; margin-top:40px;} #radware .tagList li{width:100%;text-align:Center; padding:12px; box-sizing:border-box; background:#FEF3ED; color:#F8844A} /*radware CSS*/ #radware .section01{width:100%; padding:120px 10%; box-sizing:border-box;} #radware .section01 .infoList{width:100%; padding:60px 0px; border-bottom:1px solid #e5e5e5; display:flex;} #radware .section01 .infoList li{width:100%; border-right:1px solid #e5e5e5; display:Flex; flex-flow:column; align-items:center;} #radware .section01 .infoList li:last-child{border-right:0;} #radware .section01 .infoList li .icon{width:81px;} #radware .section01 .infoList li .icon img{width:100%;} #radware .section01 .infoList li .subj{width:100%; margin-top:52px; font-size:24px; color:#222; font-weight:bold; text-align:Center;} #radware .section01 .infoList li .subs{width:100%; margin-top:8px; font-size:18px; color:#444; text-align:center; word-break:keep-all;} #radware .section01 .radwareInfo{width:100%; padding:60px 0px 0px; display:Flex; align-items:center;} #radware .section01 .radwareInfo .graph{width:100%;} #radware .section01 .radwareInfo .graph img{width:100%;} #radware .section01 .radwareInfo .infoA{width:100%; padding:0px 0px 0px 60px; box-sizing:border-box;} #radware .section01 .radwareInfo .infoA .logo{width:255px;} #radware .section01 .radwareInfo .infoA .logo img{width:100%;} #radware .section01 .radwareInfo .infoA .radwareList{width:100%; margin-top:40px; display:flex; flex-direction:column; gap:20px;} #radware .section01 .radwareInfo .infoA .radwareList li{width:100%; padding:20px; box-sizing:border-box; background:#f7f7f7; display:flex; gap:40px; align-items:center;} #radware .section01 .radwareInfo .infoA .radwareList li .img{width:120px;} #radware .section01 .radwareInfo .infoA .radwareList li .img img{width:100%} #radware .section01 .radwareInfo .infoA .radwareList li .tx{width:calc(100% - 120px); font-size:16px; line-height:26px; color:#222;} #radware .section02{width:100%; padding:0px 10%; box-sizing:border-box;} #radware .section02 .productA{width:100%;} #radware .section02 .productA .top{width:100%; display:flex; justify-content:space-between;gap:24%; align-items: center; margin-top:60px;} #radware .section02 .productA .top .txA{width:100%;} #radware .section02 .productA .top .txA .tx{width:100%; font-size:18px; color:#444; line-height:26px; word-break:Keep-all;} #radware .section02 .productA .top .productThum{width:100%;} #radware .section02 .productA .top .productThum img{width:100%;} #radware .section02 .boxList{width:100%; display:flex; gap:40px; margin-top:60px;} #radware .section02 .boxList ul{width:100%; display:Flex; flex-direction:column; gap:40px;} #radware .section02 .boxList ul li{width:100%; padding:32px 40px; box-sizing:border-box; background:#f7f7f7; height:100%; display:flex; align-items: center; gap:32px;} #radware .section02 .boxList ul:first-child li{flex-direction:column;justify-content:center} #radware .section02 .boxList ul:first-child li .subs{text-align:Center;} #radware .section02 .boxList ul:first-child li .subj{text-align:Center;} #radware .section02 .boxList ul li .icon{width:100px;} #radware .section02 .boxList ul li .icon img{width:100%;} #radware .section02 .boxList ul li .subj{font-size:24px; font-weight:bold; color:#222; word-break:keep-all;} #radware .section02 .boxList ul li .subs{font-size:18px; color:#444; word-break:keep-all; margin-top:12px;} #radware .section02 .boxList ul li .subs br{display:block;} #radware .section03{width:100%; padding:120px 10%; box-sizing:border-box;} #radware .section03 .subsA{width:100%; margin-top:60px;} #radware .section03 .subsA .subs{width:100%; text-align:center; font-size:18px; color:#444;} #radware .section03 .subsA .tagList{justify-content:center;} #radware .section03 .subsA .tagList li{width:auto; padding:12px 40px;} #radware .section03 .feather{width:100%; margin-top:60px; position:relative;} #radware .section03 .feather .thumbnail{width:432px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1;} #radware .section03 .feather .thumbnail img{width:100%;} #radware .section03 .feather .featherList{width:100%; display:flex; gap:40px; flex-flow:wrap;} #radware .section03 .feather .featherList li{width:calc(100% / 2 - 20px); background:#f7f7f7; padding:40px 25% 40px 40px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; justify-content:center;} #radware .section03 .feather .featherList li:nth-child(2n){text-align:right; padding:40px 40px 40px 25%; } #radware .section03 .feather .featherList li .txA{display:flex; gap:8px; flex-direction:column;} #radware .section03 .feather .featherList li .txA .subj{font-size:24px; color:#222; font-weight:bold; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs{font-size:18px; color:#444; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs br{display:block;} #radware .section03 .feather .featherList li .keyword{position:absolute; right:190px; text-align:right; color:#F8844A;} #radware .section03 .feather .featherList li .keyword:after{position:absolute; content:''; top:50%; transform:translateY(-50%); background:#F8844A; border-radius:50%; width:12px; height:12px;} #radware .section03 .feather .featherList li:nth-child(2n) .keyword{left:190px; text-align:left; right:auto;} #radware .section03 .feather .featherList li:nth-child(1) .keyword:after{right:-12%;} #radware .section03 .feather .featherList li:nth-child(2) .keyword:after{left:-16%;} #radware .section03 .feather .featherList li:nth-child(3) .keyword:after{right:-19%;} #radware .section03 .feather .featherList li:nth-child(4) .keyword:after{left:-21%;} @media (max-width: 1919px) { #radware .section03 .feather .featherList li{width:calc(100% / 2 - 20px); background:#f7f7f7; padding:40px 30% 40px 40px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; justify-content:center;} #radware .section03 .feather .featherList li:nth-child(2n){text-align:right; padding:40px 40px 40px 30%; } #radware .section03 .feather .featherList li .txA{display:flex; gap:8px; flex-direction:column;} #radware .section03 .feather .featherList li .txA .subj{font-size:20px; color:#222; font-weight:bold; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs{font-size:16px; color:#444; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs br{display:none;} #radware .section03 .feather .featherList li .keyword{position:absolute; right:190px; text-align:right; color:#F8844A;} #radware .section03 .feather .featherList li .keyword:after{position:absolute; content:''; top:50%; transform:translateY(-50%); background:#F8844A; border-radius:50%; width:12px; height:12px;} #radware .section03 .feather .featherList li:nth-child(1) .keyword:after{right:-18%;} #radware .section03 .feather .featherList li:nth-child(2) .keyword:after{left:-20%;} #radware .section03 .feather .featherList li:nth-child(3) .keyword:after{right:-19%;} #radware .section03 .feather .featherList li:nth-child(4) .keyword:after{left:-19%;} } #radware .section04{width:100%; padding:120px 10%; box-sizing:border-box; background:#111111;} #radware .section04 .substance{width:100%; text-align:Center; color:#ddd; font-size:18px; line-height:26px; margin-top:60px;} #radware .section04 .chartA{width:100%; margin-top:60px; display:flex; gap:40px;} #radware .section04 .chartA div{width:100%;} #radware .section04 .chartA div.contentbox{background:#222222; padding:48px 20px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px; border-radius:20px;} #radware .section04 .chartA div.colorbox{background:linear-gradient(180deg, #F8844A 0%, #964319 100%);} #radware .section04 .chartA div.contentbox .icon{width:100px;} #radware .section04 .chartA div.contentbox .icon img{width:100%;} #radware .section04 .chartA div.contentbox .subj{font-size:24px; color:#fff; font-weight:600; text-align:Center; line-height:32px;} #radware .section04 .chartA div.connectA{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;} #radware .section04 .chartA div.connectA .box{background:#222222; border:1px solid #444; padding:12px; box-sizing:border-box; word-break:keep-all; text-align:Center; font-size:18px; color:#ddd} #radware .section04 .chartA div.connectA .arrow{width:20%;} #radware .section04 .chartA div.connectA .arrow img{width:100%;} #radware .section04 .exList{width:100%; display:flex; gap:20px; margin-top:60px;} #radware .section04 .exList li{width:100%; background:#222222; padding:40px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;} #radware .section04 .exList li .subj{font-size:24px; color:#fff; font-weight:bold;} #radware .section04 .exList li .subs{font-size:18px; color:#ddd; text-align:Center; word-break:keep-all;} #radware .section04 .exList li .subs br{display:block;} #radware .section05{padding:120px 10%; box-sizing:border-box; position:relative; width:100%;} #radware .section05:after{position:absolute; z-index:-1; content:'RADWARE'; color:#f7f7f7; font-size:300px; text-align:center; width:100%; top:0; left:0; font-weight:900; line-height:240px;} #radware .section05 .titleA{border:0;} #radware .section05 .thumbnail{width:100%;} #radware .section05 .thumbnail img{width:100%;} #radware .section05 .infoBoxList{width:100%; margin-top:20px; display:flex; gap:20px;} #radware .section05 .infoBoxList li{width:100%;padding:52px 20px; box-sizing:border-box; background:#f7f7f7; display:flex; flex-direction:column; align-items:center; justify-content:center;} #radware .section05 .infoBoxList li .icon{width:100px;} #radware .section05 .infoBoxList li .icon img{width:100%;} #radware .section05 .infoBoxList li .subj{font-size:24px; text-align:center; color:#222; font-weight:bold; margin-top:32px;} #radware .section05 .infoBoxList li .subs{font-size:18px; text-align:center; color:#444; margin-top:12px; word-break:keep-all;} #radware .section05 .infoBoxList li .subs br{display:block} @media (max-width: 1439px) { /*radware 공통영역*/ #radware .tagList{width:100%; display:flex; gap:12px; margin-top:40px;} #radware .tagList li{width:100%;text-align:Center; padding:8px; box-sizing:border-box; background:#FEF3ED; color:#F8844A; font-size:16px;} /*radware CSS*/ #radware .section01{width:100%; padding:120px 5%; box-sizing:border-box;} #radware .section01 .infoList{width:100%; padding:60px 0px; border-bottom:1px solid #e5e5e5; display:flex;} #radware .section01 .infoList li{width:100%; padding:0px 20px; box-sizing:border-box; border-right:1px solid #e5e5e5; display:Flex; flex-flow:column; align-items:center;} #radware .section01 .infoList li:last-child{border-right:0;} #radware .section01 .infoList li .icon{width:60px;} #radware .section01 .infoList li .icon img{width:100%;} #radware .section01 .infoList li .subj{width:100%; margin-top:40px; font-size:20px; color:#222; font-weight:bold; text-align:Center;} #radware .section01 .infoList li .subs{width:100%; margin-top:4px; font-size:16px; color:#444; text-align:center; word-break:keep-all;} #radware .section01 .radwareInfo{width:100%; padding:60px 0px 0px; display:Flex; align-items:end;} #radware .section01 .radwareInfo .graph{width:100%;} #radware .section01 .radwareInfo .graph img{width:100%;} #radware .section01 .radwareInfo .infoA{width:100%; padding:0px 0px 0px 40px; box-sizing:border-box;} #radware .section01 .radwareInfo .infoA .logo{width:180px;} #radware .section01 .radwareInfo .infoA .logo img{width:100%;} #radware .section01 .radwareInfo .infoA .radwareList{width:100%; margin-top:20px; display:flex; flex-direction:column; gap:20px;} #radware .section01 .radwareInfo .infoA .radwareList li{width:100%; padding:12px; box-sizing:border-box; background:#f7f7f7; display:flex; gap:40px; align-items:center;} #radware .section01 .radwareInfo .infoA .radwareList li .img{width:100px;} #radware .section01 .radwareInfo .infoA .radwareList li .img img{width:100%} #radware .section01 .radwareInfo .infoA .radwareList li .tx{width:calc(100% - 100px); font-size:13px; line-height:22px; color:#222; word-break:keep-all;} #radware .section02{width:100%; padding:0px 5%; box-sizing:border-box;} #radware .section02 .productA{width:100%;} #radware .section02 .productA .top{width:100%; display:flex; justify-content:space-between; gap:16%; align-items: center; margin-top:60px;} #radware .section02 .productA .top .txA{width:100%;} #radware .section02 .productA .top .txA .tx{width:100%; font-size:18px; color:#444; line-height:26px; word-break:Keep-all;} #radware .section02 .productA .top .productThum{width:100%;} #radware .section02 .productA .top .productThum img{width:100%;} #radware .section02 .boxList{width:100%; display:flex; gap:20px; margin-top:60px;} #radware .section02 .boxList ul{width:100%; display:Flex; flex-direction:column; gap:20px;} #radware .section02 .boxList ul li{width:100%; padding:20px 32px; box-sizing:border-box; background:#f7f7f7; height:100%; display:flex; align-items: center; gap:32px;} #radware .section02 .boxList ul:first-child li{flex-direction:column;justify-content:center} #radware .section02 .boxList ul:first-child li .subs{text-align:Center;} #radware .section02 .boxList ul:first-child li .subj{text-align:Center;} #radware .section02 .boxList ul li .icon{width:64px;} #radware .section02 .boxList ul li .icon img{width:100%;} #radware .section02 .boxList ul li .tx{width:100%;} #radware .section02 .boxList ul li .subj{font-size:20px; font-weight:bold; color:#222; word-break:keep-all;} #radware .section02 .boxList ul li .subs{font-size:16px; color:#444; word-break:keep-all; margin-top:12px;} #radware .section02 .boxList ul li .subs br{display:none;} #radware .section03{width:100%; padding:120px 5%; box-sizing:border-box;} #radware .section03 .subsA{width:100%; margin-top:60px;} #radware .section03 .subsA .subs{width:100%; text-align:center; font-size:16px; color:#444;} #radware .section03 .subsA .tagList{justify-content:center;} #radware .section03 .subsA .tagList li{width:auto; padding:8px 32px;} #radware .section03 .feather{width:100%; margin-top:60px; position:relative;} #radware .section03 .feather .thumbnail{width:32%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1;} #radware .section03 .feather .thumbnail img{width:100%;} #radware .section03 .feather .featherList{width:100%; display:flex; gap:20px; flex-flow:wrap;} #radware .section03 .feather .featherList li{width:calc(100% / 2 - 10px); background:#f7f7f7; padding:32px 20% 32px 20px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; justify-content:center;} #radware .section03 .feather .featherList li:nth-child(2n){text-align:right; padding:32px 20px 32px 20%; } #radware .section03 .feather .featherList li .txA{display:flex; gap:8px; flex-direction:column;} #radware .section03 .feather .featherList li .txA .subj{font-size:20px; color:#222; font-weight:bold; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs{font-size:16px; color:#444; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs br{display:none;} #radware .section03 .feather .featherList li .keyword{position:absolute; right:190px; text-align:right; color:#F8844A; display:none;} #radware .section03 .feather .featherList li .keyword:after{position:absolute; content:''; top:50%; transform:translateY(-50%); background:#F8844A; border-radius:50%; width:12px; height:12px;} #radware .section03 .feather .featherList li:nth-child(1) .keyword:after{right:-22%;} #radware .section03 .feather .featherList li:nth-child(2) .keyword:after{left:-26%;} #radware .section03 .feather .featherList li:nth-child(3) .keyword:after{right:-34%;} #radware .section03 .feather .featherList li:nth-child(4) .keyword:after{left:-36%;} #radware .section04{width:100%; padding:120px 5%; box-sizing:border-box; background:#111111;} #radware .section04 .substance{width:100%; text-align:Center; color:#ddd; font-size:16px; line-height:26px; margin-top:32px;} #radware .section04 .chartA{width:100%; margin-top:60px; display:flex; gap:20px;} #radware .section04 .chartA div{width:100%;} #radware .section04 .chartA div.contentbox{background:#222222; padding:20px 20px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; border-radius:20px;} #radware .section04 .chartA div.colorbox{background:linear-gradient(180deg, #F8844A 0%, #964319 100%);} #radware .section04 .chartA div.contentbox .icon{width:60px;} #radware .section04 .chartA div.contentbox .icon img{width:100%;} #radware .section04 .chartA div.contentbox .subj{font-size:18px; color:#fff; font-weight:600; text-align:Center; line-height:26px;} #radware .section04 .chartA div.connectA{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;} #radware .section04 .chartA div.connectA .box{background:#222222; border:1px solid #444; padding:8px 12px; box-sizing:border-box; word-break:keep-all; text-align:Center; font-size:14px; color:#ddd} #radware .section04 .chartA div.connectA .arrow{width:20%;} #radware .section04 .chartA div.connectA .arrow img{width:100%;} #radware .section04 .exList{width:100%; display:flex; gap:20px; margin-top:60px;} #radware .section04 .exList li{width:100%; background:#222222; padding:40px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;} #radware .section04 .exList li .subj{font-size:20px; color:#fff; font-weight:bold;} #radware .section04 .exList li .subs{font-size:16px; color:#ddd; text-align:Center; word-break:keep-all;} #radware .section04 .exList li .subs br{display:none;} #radware .section05{padding:120px 5%; box-sizing:border-box; position:relative; width:100%;} #radware .section05:after{position:absolute; z-index:-1; content:'RADWARE'; color:#f7f7f7; font-size:180px; text-align:center; width:100%; top:0; left:0; font-weight:900; line-height:120px;} #radware .section05 .titleA{border:0;} #radware .section05 .thumbnail{width:100%;} #radware .section05 .thumbnail img{width:100%;} #radware .section05 .infoBoxList{width:100%; margin-top:20px; display:flex; gap:20px;} #radware .section05 .infoBoxList li{width:100%;padding:20px 16px; box-sizing:border-box; background:#f7f7f7; display:flex; flex-direction:column; align-items:center; justify-content:center;} #radware .section05 .infoBoxList li .icon{width:60px;} #radware .section05 .infoBoxList li .icon img{width:100%;} #radware .section05 .infoBoxList li .subj{font-size:20px; text-align:center; color:#222; font-weight:bold; margin-top:32px;} #radware .section05 .infoBoxList li .subs{font-size:16px; text-align:center; color:#444; margin-top:12px; word-break:keep-all;} #radware .section05 .infoBoxList li .subs br{display:block} } @media (max-width: 1023px) { /*radware 공통영역*/ #radware .tagList{width:100%; display:flex; gap:4px; margin-top:20px;} #radware .tagList li{width:100%;text-align:Center; padding:8px; box-sizing:border-box; background:#FEF3ED; color:#F8844A; font-size:14px;} /*radware CSS*/ #radware .section01{width:100%; padding:80px 3%; box-sizing:border-box;} #radware .section01 .infoList{width:100%; padding:32px 0px; border-bottom:1px solid #e5e5e5; display:flex;} #radware .section01 .infoList li{width:100%; padding:0px 20px; box-sizing:border-box; border-right:1px solid #e5e5e5; display:Flex; flex-flow:column; align-items:center;} #radware .section01 .infoList li:last-child{border-right:0;} #radware .section01 .infoList li .icon{width:40px;} #radware .section01 .infoList li .icon img{width:100%;} #radware .section01 .infoList li .subj{width:100%; margin-top:20px; font-size:16px; color:#222; font-weight:bold; text-align:Center;} #radware .section01 .infoList li .subs{width:100%; margin-top:4px; font-size:14px; color:#444; text-align:center; word-break:keep-all;} #radware .section01 .radwareInfo{width:100%; padding:0px 0px 0px; display:Flex; align-items:center; flex-direction:column; margin-top:60px;} #radware .section01 .radwareInfo .graph{width:80%;} #radware .section01 .radwareInfo .graph img{width:100%;} #radware .section01 .radwareInfo .infoA{width:100%; padding:0px 0px 0px 0px; box-sizing:border-box; margin-top:32px;} #radware .section01 .radwareInfo .infoA .logo{width:180px; margin:0 auto;} #radware .section01 .radwareInfo .infoA .logo img{width:100%;} #radware .section01 .radwareInfo .infoA .radwareList{width:100%; margin-top:20px; display:flex; flex-direction:column; gap:12px;} #radware .section01 .radwareInfo .infoA .radwareList li{width:100%; padding:20px; box-sizing:border-box; background:#f7f7f7; display:flex; gap:40px; align-items:center;} #radware .section01 .radwareInfo .infoA .radwareList li .img{width:100px;} #radware .section01 .radwareInfo .infoA .radwareList li .img img{width:100%} #radware .section01 .radwareInfo .infoA .radwareList li .tx{width:calc(100% - 100px); font-size:13px; line-height:22px; color:#222; word-break:keep-all;} #radware .section02{width:100%; padding:0px 3%; box-sizing:border-box;} #radware .section02 .productA{width:100%;} #radware .section02 .productA .top{width:100%; display:flex; justify-content:space-between; gap:12%; align-items: center; margin-top:32px;} #radware .section02 .productA .top .txA{width:100%;} #radware .section02 .productA .top .txA .tx{width:100%; font-size:16px; color:#444; line-height:24px; word-break:Keep-all;} #radware .section02 .productA .top .productThum{width:100%;} #radware .section02 .productA .top .productThum img{width:100%;} #radware .section02 .boxList{width:100%; display:flex; gap:12px; margin-top:60px; flex-direction:column;} #radware .section02 .boxList ul{width:100%; display:Flex; flex-direction:column; gap:12px;} #radware .section02 .boxList ul li{width:100%; padding:20px 32px; box-sizing:border-box; background:#f7f7f7; height:100%; display:flex; align-items: center; gap:32px;} #radware .section02 .boxList ul:first-child li{flex-direction:row;align-items: center; gap:32px;} #radware .section02 .boxList ul:first-child li .subs{text-align:left;} #radware .section02 .boxList ul:first-child li .subj{text-align:left;} #radware .section02 .boxList ul li .icon{width:64px;} #radware .section02 .boxList ul li .icon img{width:100%;} #radware .section02 .boxList ul li .tx{width:100%;} #radware .section02 .boxList ul li .subj{font-size:20px; font-weight:bold; color:#222; word-break:keep-all;} #radware .section02 .boxList ul li .subs{font-size:16px; color:#444; word-break:keep-all; margin-top:12px;} #radware .section02 .boxList ul li .subs br{display:none;} #radware .section03{width:100%; padding:80px 3%; box-sizing:border-box;} #radware .section03 .subsA{width:100%; margin-top:60px;} #radware .section03 .subsA .subs{width:100%; text-align:center; font-size:16px; color:#444; word-break:keep-all;} #radware .section03 .subsA .subs br{display:none;} #radware .section03 .subsA .tagList{justify-content:center;} #radware .section03 .subsA .tagList li{width:auto; padding:8px 32px;} #radware .section03 .feather{width:100%; margin-top:60px; position:relative;} #radware .section03 .feather .thumbnail{width:36%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1;} #radware .section03 .feather .thumbnail img{width:100%;} #radware .section03 .feather .featherList{width:100%; display:flex; gap:20px; flex-flow:wrap;} #radware .section03 .feather .featherList li{width:calc(100% / 2 - 10px); background:#f7f7f7; padding:32px 20% 32px 20px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; justify-content:center;} #radware .section03 .feather .featherList li:nth-child(2n){text-align:right; padding:32px 20px 32px 20%; } #radware .section03 .feather .featherList li .txA{display:flex; gap:8px; flex-direction:column;} #radware .section03 .feather .featherList li .txA .subj{font-size:20px; color:#222; font-weight:bold; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs{font-size:16px; color:#444; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs br{display:none;} #radware .section03 .feather .featherList li .keyword{position:absolute; right:190px; text-align:right; color:#F8844A; display:none;} #radware .section03 .feather .featherList li .keyword:after{position:absolute; content:''; top:50%; transform:translateY(-50%); background:#F8844A; border-radius:50%; width:12px; height:12px;} #radware .section03 .feather .featherList li:nth-child(1) .keyword:after{right:-22%;} #radware .section03 .feather .featherList li:nth-child(2) .keyword:after{left:-26%;} #radware .section03 .feather .featherList li:nth-child(3) .keyword:after{right:-34%;} #radware .section03 .feather .featherList li:nth-child(4) .keyword:after{left:-36%;} #radware .section04{width:100%; padding:80px 3%; box-sizing:border-box; background:#111111;} #radware .section04 .substance{width:100%; text-align:Center; color:#ddd; font-size:16px; line-height:26px; margin-top:32px;} #radware .section04 .chartA{width:100%; margin-top:60px; display:flex; gap:20px;} #radware .section04 .chartA div{width:100%;} #radware .section04 .chartA div.contentbox{background:#222222; padding:12px 12px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; border-radius:20px;} #radware .section04 .chartA div.colorbox{background:linear-gradient(180deg, #F8844A 0%, #964319 100%);} #radware .section04 .chartA div.contentbox .icon{width:44px;} #radware .section04 .chartA div.contentbox .icon img{width:100%;} #radware .section04 .chartA div.contentbox .subj{font-size:16px; color:#fff; font-weight:600; text-align:Center; line-height:24px;} #radware .section04 .chartA div.connectA{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;} #radware .section04 .chartA div.connectA .box{background:#222222; border:1px solid #444; padding:8px 8px; box-sizing:border-box; word-break:keep-all; text-align:Center; font-size:13px; color:#ddd} #radware .section04 .chartA div.connectA .arrow{width:40%;} #radware .section04 .chartA div.connectA .arrow img{width:100%;} #radware .section04 .exList{width:100%; display:flex; gap:20px; margin-top:60px;} #radware .section04 .exList li{width:100%; background:#222222; padding:40px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;} #radware .section04 .exList li .subj{font-size:16px; color:#fff; font-weight:bold;} #radware .section04 .exList li .subs{font-size:14px; color:#ddd; text-align:Center; word-break:keep-all;} #radware .section04 .exList li .subs br{display:none;} #radware .section05{padding:80px 3%; box-sizing:border-box; position:relative; width:100%;} #radware .section05:after{position:absolute; z-index:-1; content:'RADWARE'; color:#f7f7f7; font-size:120px; text-align:center; width:100%; top:0; left:0; font-weight:900; line-height:100px;} #radware .section05 .titleA{border:0;} #radware .section05 .thumbnail{width:100%;} #radware .section05 .thumbnail img{width:100%;} #radware .section05 .infoBoxList{width:100%; margin-top:20px; display:flex; gap:12px; flex-flow:wrap;} #radware .section05 .infoBoxList li{width:calc(100% / 2 - 10px);padding:20px 16px; box-sizing:border-box; background:#f7f7f7; display:flex; flex-direction:column; align-items:center; justify-content:center;} #radware .section05 .infoBoxList li .icon{width:60px;} #radware .section05 .infoBoxList li .icon img{width:100%;} #radware .section05 .infoBoxList li .subj{font-size:20px; text-align:center; color:#222; font-weight:bold; margin-top:32px;} #radware .section05 .infoBoxList li .subs{font-size:16px; text-align:center; color:#444; margin-top:12px; word-break:keep-all;} #radware .section05 .infoBoxList li .subs br{display:block} } @media (max-width: 767px) { /*radware 공통영역*/ #radware .tagList{width:100%; display:flex; gap:4px; margin-top:20px;} #radware .tagList li{width:100%;text-align:Center; padding:8px 4px; box-sizing:border-box; background:#FEF3ED; color:#F8844A; font-size:13px;} /*radware CSS*/ #radware .section01{width:100%; padding:60px 3%; box-sizing:border-box;} #radware .section01 .infoList{width:100%; padding:32px 0px; border-bottom:1px solid #e5e5e5; display:flex; flex-flow:wrap;} #radware .section01 .infoList li{width:50%; padding:20px 20px; box-sizing:border-box; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5; display:Flex; flex-flow:column; align-items:center;} #radware .section01 .infoList li:nth-child(2n){border-right:0;} #radware .section01 .infoList li:nth-child(3), #radware .section01 .infoList li:nth-child(4){border-bottom:0;} #radware .section01 .infoList li .icon{width:40px;} #radware .section01 .infoList li .icon img{width:100%;} #radware .section01 .infoList li .subj{width:100%; margin-top:20px; font-size:16px; color:#222; font-weight:bold; text-align:Center;} #radware .section01 .infoList li .subs{width:100%; margin-top:4px; font-size:14px; color:#444; text-align:center; word-break:keep-all;} #radware .section01 .radwareInfo{width:100%; padding:0px 0px 0px; display:Flex; align-items:center; flex-direction:column; margin-top:60px;} #radware .section01 .radwareInfo .graph{width:100%;} #radware .section01 .radwareInfo .graph img{width:100%;} #radware .section01 .radwareInfo .infoA{width:100%; padding:0px 0px 0px 0px; box-sizing:border-box; margin-top:32px;} #radware .section01 .radwareInfo .infoA .logo{width:180px; margin:0 auto;} #radware .section01 .radwareInfo .infoA .logo img{width:100%;} #radware .section01 .radwareInfo .infoA .radwareList{width:100%; margin-top:20px; display:flex; flex-direction:column; gap:12px;} #radware .section01 .radwareInfo .infoA .radwareList li{width:100%; padding:20px; box-sizing:border-box; background:#f7f7f7; display:flex; gap:40px; align-items:center;} #radware .section01 .radwareInfo .infoA .radwareList li .img{width:100px;} #radware .section01 .radwareInfo .infoA .radwareList li .img img{width:100%} #radware .section01 .radwareInfo .infoA .radwareList li .tx{width:calc(100% - 100px); font-size:13px; line-height:22px; color:#222; word-break:keep-all;} #radware .section02{width:100%; padding:0px 3%; box-sizing:border-box;} #radware .section02 .productA{width:100%;} #radware .section02 .productA .top{width:100%; display:flex; justify-content:center; gap:32px; align-items: center; margin-top:20px; flex-direction:column;} #radware .section02 .productA .top .txA{width:100%;} #radware .section02 .productA .top .txA .tx{width:100%; font-size:14px; color:#444; line-height:22px; word-break:Keep-all; text-align:center;} #radware .section02 .productA .top .productThum{width:80%;} #radware .section02 .productA .top .productThum img{width:100%;} #radware .section02 .boxList{width:100%; display:flex; gap:12px; margin-top:32px; flex-direction:column;} #radware .section02 .boxList ul{width:100%; display:Flex; flex-direction:column; gap:12px;} #radware .section02 .boxList ul li{width:100%; padding:20px 32px; box-sizing:border-box; background:#f7f7f7; height:100%; display:flex; align-items: center; gap:32px;} #radware .section02 .boxList ul:first-child li{flex-direction:row;align-items: center; gap:32px;} #radware .section02 .boxList ul:first-child li .subs{text-align:left;} #radware .section02 .boxList ul:first-child li .subj{text-align:left;} #radware .section02 .boxList ul li .icon{width:60px;} #radware .section02 .boxList ul li .icon img{width:100%;} #radware .section02 .boxList ul li .tx{width:100%;} #radware .section02 .boxList ul li .subj{font-size:16px; font-weight:bold; color:#222; word-break:keep-all;} #radware .section02 .boxList ul li .subs{font-size:14px; color:#444; word-break:keep-all; margin-top:8px;} #radware .section02 .boxList ul li .subs br{display:none;} #radware .section03{width:100%; padding:60px 3%; box-sizing:border-box;} #radware .section03 .subsA{width:100%; margin-top:20px;} #radware .section03 .subsA .subs{width:100%; text-align:center; font-size:14px; color:#444; word-break:keep-all;} #radware .section03 .subsA .subs br{display:none;} #radware .section03 .subsA .tagList{justify-content:center;} #radware .section03 .subsA .tagList li{width:100%; padding:8px 8px;} #radware .section03 .feather{width:100%; margin-top:32px; position:relative;} #radware .section03 .feather .thumbnail{width:50%; position:absolute; left:50%; top:52%; transform:translate(-50%, -50%); z-index:1; display:none;} #radware .section03 .feather .thumbnail img{width:100%;} #radware .section03 .feather .featherList{width:100%; display:flex; gap:12px; flex-flow:wrap;} #radware .section03 .feather .featherList li{width:calc(100% / 2 - 6px); background:#f7f7f7; padding:20px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; justify-content:center; text-align:Center;} #radware .section03 .feather .featherList li:nth-child(2n){text-align:center; padding:20px;} #radware .section03 .feather .featherList li:nth-child(2){ margin-bottom:0px;} #radware .section03 .feather .featherList li .txA{display:flex; gap:4px; flex-direction:column;} #radware .section03 .feather .featherList li .txA .subj{font-size:16px; color:#222; font-weight:bold; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs{font-size:14px; color:#444; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs br{display:none;} #radware .section03 .feather .featherList li .keyword{position:absolute; right:190px; text-align:right; color:#F8844A; display:none;} #radware .section03 .feather .featherList li .keyword:after{position:absolute; content:''; top:50%; transform:translateY(-50%); background:#F8844A; border-radius:50%; width:12px; height:12px;} #radware .section03 .feather .featherList li:nth-child(1) .keyword:after{right:-22%;} #radware .section03 .feather .featherList li:nth-child(2) .keyword:after{left:-26%;} #radware .section03 .feather .featherList li:nth-child(3) .keyword:after{right:-34%;} #radware .section03 .feather .featherList li:nth-child(4) .keyword:after{left:-36%;} #radware .section04{width:100%; padding:60px 3%; box-sizing:border-box; background:#111111;} #radware .section04 .substance{width:100%; text-align:Center; color:#ddd; font-size:14px; line-height:22px; margin-top:20px; word-break:keep-all;} #radware .section04 .substance br{display:none;} #radware .section04 .chartA{width:100%; margin-top:32px; display:flex; gap:20px; flex-direction:column; align-items:center;} #radware .section04 .chartA div{width:100%;} #radware .section04 .chartA div.contentbox{background:#222222; padding:32px 12px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; border-radius:20px; width:50%} #radware .section04 .chartA div.colorbox{background:linear-gradient(180deg, #F8844A 0%, #964319 100%);} #radware .section04 .chartA div.contentbox .icon{width:44px;} #radware .section04 .chartA div.contentbox .icon img{width:100%;} #radware .section04 .chartA div.contentbox .subj{font-size:16px; color:#fff; font-weight:600; text-align:Center; line-height:24px;} #radware .section04 .chartA div.connectA{display:flex; align-items:center; justify-content:center; flex-direction:row; gap:8px;} #radware .section04 .chartA div.connectA .box{background:#222222; border:1px solid #444; padding:8px 8px; box-sizing:border-box; word-break:keep-all; text-align:Center; font-size:13px; color:#ddd} #radware .section04 .chartA div.connectA .arrow{width:20%; transform:rotate(90deg)} #radware .section04 .chartA div.connectA .arrow img{width:100%;} #radware .section04 .exList{width:100%; display:flex; gap:12px; margin-top:60px; flex-direction:column;} #radware .section04 .exList li{width:100%; background:#222222; padding:40px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;} #radware .section04 .exList li .subj{font-size:16px; color:#fff; font-weight:bold;} #radware .section04 .exList li .subs{font-size:14px; color:#ddd; text-align:Center; word-break:keep-all;} #radware .section04 .exList li .subs br{display:none;} #radware .section05{padding:60px 3%; box-sizing:border-box; position:relative; width:100%;} #radware .section05:after{position:absolute; z-index:-1; content:'RADWARE'; color:#f7f7f7; font-size:80px; text-align:center; width:100%; top:0; left:0; font-weight:900; line-height:60px;} #radware .section05 .titleA{border:0;} #radware .section05 .thumbnail{width:100%;} #radware .section05 .thumbnail img{width:100%;} #radware .section05 .infoBoxList{width:100%; margin-top:20px; display:flex; gap:12px; flex-flow:wrap;} #radware .section05 .infoBoxList li{width:calc(100% / 2 - 10px);padding:16px 12px; box-sizing:border-box; background:#f7f7f7; display:flex; flex-direction:column; align-items:center; justify-content:center;} #radware .section05 .infoBoxList li .icon{width:60px;} #radware .section05 .infoBoxList li .icon img{width:100%;} #radware .section05 .infoBoxList li .subj{font-size:16px; text-align:center; color:#222; font-weight:bold; margin-top:20px;} #radware .section05 .infoBoxList li .subs{font-size:14px; text-align:center; color:#444; margin-top:4px; word-break:keep-all;} #radware .section05 .infoBoxList li .subs br{display:block} } @media (max-width: 374px) { /*radware 공통영역*/ #radware .tagList{width:100%; display:flex; gap:4px; margin-top:20px;} #radware .tagList li{width:100%;text-align:Center; padding:8px 4px; box-sizing:border-box; background:#FEF3ED; color:#F8844A; font-size:13px;} /*radware CSS*/ #radware .section01{width:100%; padding:60px 3%; box-sizing:border-box;} #radware .section01 .infoList{width:100%; padding:0px 0px; border-bottom:1px solid #e5e5e5; display:flex; flex-flow:nowrap; flex-direction:column;} #radware .section01 .infoList li{width:100%; padding:20px 0px; box-sizing:border-box; border-bottom:1px solid #e5e5e5; border-right:0px solid #e5e5e5; display:Flex; flex-flow:column; align-items:center;} #radware .section01 .infoList li:nth-child(2n){border-right:0;} #radware .section01 .infoList li:nth-child(3){border-bottom:1px solid #e5e5e5;} #radware .section01 .infoList li:nth-child(4){border-bottom:0;} #radware .section01 .infoList li .icon{width:40px;} #radware .section01 .infoList li .icon img{width:100%;} #radware .section01 .infoList li .subj{width:100%; margin-top:20px; font-size:16px; color:#222; font-weight:bold; text-align:Center;} #radware .section01 .infoList li .subs{width:100%; margin-top:4px; font-size:14px; color:#444; text-align:center; word-break:keep-all;} #radware .section01 .radwareInfo{width:100%; padding:0px 0px 0px; display:Flex; align-items:center; flex-direction:column; margin-top:60px;} #radware .section01 .radwareInfo .graph{width:100%;} #radware .section01 .radwareInfo .graph img{width:100%;} #radware .section01 .radwareInfo .infoA{width:100%; padding:0px 0px 0px 0px; box-sizing:border-box; margin-top:32px;} #radware .section01 .radwareInfo .infoA .logo{width:132px; display:inline-block} #radware .section01 .radwareInfo .infoA .logo img{width:100%;} #radware .section01 .radwareInfo .infoA .radwareList{width:100%; margin-top:16px; display:flex; flex-direction:column; gap:12px;} #radware .section01 .radwareInfo .infoA .radwareList li{width:100%; padding:20px 12px; box-sizing:border-box; background:#f7f7f7; display:flex; gap:20px; align-items:start; flex-direction:column;} #radware .section01 .radwareInfo .infoA .radwareList li .img{width:80px;} #radware .section01 .radwareInfo .infoA .radwareList li .img img{width:100%} #radware .section01 .radwareInfo .infoA .radwareList li .tx{width:100%; font-size:13px; line-height:22px; color:#222; word-break:keep-all;} #radware .section02{width:100%; padding:0px 3%; box-sizing:border-box;} #radware .section02 .productA{width:100%;} #radware .section02 .productA .top{width:100%; display:flex; justify-content:center; gap:32px; align-items: center; margin-top:20px; flex-direction:column;} #radware .section02 .productA .top .txA{width:100%;} #radware .section02 .productA .top .txA .tx{width:100%; font-size:14px; color:#444; line-height:22px; word-break:Keep-all; text-align:center;} #radware .section02 .productA .top .productThum{width:80%;} #radware .section02 .productA .top .productThum img{width:100%;} #radware .section02 .boxList{width:100%; display:flex; gap:12px; margin-top:32px; flex-direction:column;} #radware .section02 .boxList ul{width:100%; display:Flex; flex-direction:column; gap:12px;} #radware .section02 .boxList ul li{width:100%; padding:16px; box-sizing:border-box; background:#f7f7f7; height:100%; display:flex; align-items: center; gap:12px; flex-direction: column;} #radware .section02 .boxList ul:first-child li{flex-direction:column;align-items: center; gap:16px;} #radware .section02 .boxList ul:first-child li .subs{text-align:center;} #radware .section02 .boxList ul:first-child li .subj{text-align:center;} #radware .section02 .boxList ul li .icon{width:40px;} #radware .section02 .boxList ul li .icon img{width:100%;} #radware .section02 .boxList ul li .tx{width:100%} #radware .section02 .boxList ul li .subj{font-size:16px; font-weight:bold; color:#222; word-break:keep-all; text-align:center;} #radware .section02 .boxList ul li .subs{font-size:14px; color:#444; word-break:keep-all; margin-top:8px; text-align:center;} #radware .section02 .boxList ul li .subs br{display:none;} #radware .section03{width:100%; padding:60px 3%; box-sizing:border-box;} #radware .section03 .subsA{width:100%; margin-top:20px;} #radware .section03 .subsA .subs{width:100%; text-align:center; font-size:14px; color:#444; word-break:keep-all;} #radware .section03 .subsA .subs br{display:none;} #radware .section03 .subsA .tagList{justify-content:center;} #radware .section03 .subsA .tagList li{width:100%; padding:8px 8px;} #radware .section03 .feather{width:100%; margin-top:32px; position:relative;} #radware .section03 .feather .thumbnail{width:50%; display:none; position:absolute; left:50%; top:52%; transform:translate(-50%, -50%); z-index:1;} #radware .section03 .feather .thumbnail img{width:100%;} #radware .section03 .feather .featherList{width:100%; display:flex; gap:12px; flex-flow:nowrap; flex-direction:column;} #radware .section03 .feather .featherList li{width:100%; background:#f7f7f7; padding:20px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; justify-content:center; text-align:Center;} #radware .section03 .feather .featherList li:nth-child(2n){text-align:center; padding:20px;} #radware .section03 .feather .featherList li:nth-child(2){ margin-bottom:0px;} #radware .section03 .feather .featherList li .txA{display:flex; gap:4px; flex-direction:column;} #radware .section03 .feather .featherList li .txA .subj{font-size:16px; color:#222; font-weight:bold; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs{font-size:14px; color:#444; word-break:keep-all;} #radware .section03 .feather .featherList li .txA .subs br{display:none;} #radware .section03 .feather .featherList li .keyword{position:absolute; right:190px; text-align:right; color:#F8844A; display:none;} #radware .section03 .feather .featherList li .keyword:after{position:absolute; content:''; top:50%; transform:translateY(-50%); background:#F8844A; border-radius:50%; width:12px; height:12px;} #radware .section03 .feather .featherList li:nth-child(1) .keyword:after{right:-22%;} #radware .section03 .feather .featherList li:nth-child(2) .keyword:after{left:-26%;} #radware .section03 .feather .featherList li:nth-child(3) .keyword:after{right:-34%;} #radware .section03 .feather .featherList li:nth-child(4) .keyword:after{left:-36%;} #radware .section04{width:100%; padding:60px 3%; box-sizing:border-box; background:#111111;} #radware .section04 .substance{width:100%; text-align:Center; color:#ddd; font-size:14px; line-height:22px; margin-top:20px; word-break:keep-all;} #radware .section04 .substance br{display:none;} #radware .section04 .chartA{width:100%; margin-top:32px; display:flex; gap:20px; flex-direction:column; align-items:center;} #radware .section04 .chartA div{width:100%;} #radware .section04 .chartA div.contentbox{background:#222222; padding:32px 12px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; border-radius:20px; width:70%} #radware .section04 .chartA div.colorbox{background:linear-gradient(180deg, #F8844A 0%, #964319 100%);} #radware .section04 .chartA div.contentbox .icon{width:44px;} #radware .section04 .chartA div.contentbox .icon img{width:100%;} #radware .section04 .chartA div.contentbox .subj{font-size:16px; color:#fff; font-weight:600; text-align:Center; line-height:24px;} #radware .section04 .chartA div.connectA{display:flex; align-items:center; justify-content:center; flex-direction:row; gap:0px;} #radware .section04 .chartA div.connectA .box{background:#222222; height:100%; border:1px solid #444; padding:8px 8px; box-sizing:border-box; word-break:keep-all; text-align:Center; font-size:13px; color:#ddd} #radware .section04 .chartA div.connectA .arrow{width:20%; transform:rotate(90deg)} #radware .section04 .chartA div.connectA .arrow img{width:100%;} #radware .section04 .exList{width:100%; display:flex; gap:12px; margin-top:60px; flex-direction:column;} #radware .section04 .exList li{width:100%; background:#222222; padding:40px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;} #radware .section04 .exList li .subj{font-size:16px; color:#fff; font-weight:bold;} #radware .section04 .exList li .subs{font-size:14px; color:#ddd; text-align:Center; word-break:keep-all;} #radware .section04 .exList li .subs br{display:none;} #radware .section05{padding:60px 3%; box-sizing:border-box; position:relative; width:100%;} #radware .section05:after{position:absolute; z-index:-1; content:'RADWARE'; color:#f7f7f7; font-size:80px; text-align:center; width:100%; top:0; left:0; font-weight:900; line-height:60px;} #radware .section05 .titleA{border:0;} #radware .section05 .thumbnail{width:100%;} #radware .section05 .thumbnail img{width:100%;} #radware .section05 .infoBoxList{width:100%; margin-top:20px; display:flex; gap:12px; flex-flow:wrap;} #radware .section05 .infoBoxList li{width:100%;padding:16px 12px; box-sizing:border-box; background:#f7f7f7; display:flex; flex-direction:column; align-items:center; justify-content:center;} #radware .section05 .infoBoxList li .icon{width:60px;} #radware .section05 .infoBoxList li .icon img{width:100%;} #radware .section05 .infoBoxList li .subj{font-size:16px; text-align:center; color:#222; font-weight:bold; margin-top:20px;} #radware .section05 .infoBoxList li .subs{font-size:14px; text-align:center; color:#444; margin-top:4px; word-break:keep-all;} #radware .section05 .infoBoxList li .subs br{display:block} } /*sase*/ #sase{width:100%;} #sase .section01{width:100%; background:#f7f7f7; padding:120px 10%; box-sizing:border-box;} #sase .section01 .titleA{border-bottom:0;} #sase .section01 .topChart{width:100%; display:flex; gap:0; margin-top:40px; gap:30px;} #sase .section01 .topChart .connect{width:20%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; flex-direction: column; justify-content:center;} #sase .section01 .topChart .connect li{width:100%; position:Relative; border-bottom:1px dashed #e5e5e5; padding:20px 0px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;} #sase .section01 .topChart .connect:first-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:50%; transform:translateY(-50%); right:-4px;} #sase .section01 .topChart .connect:first-child li:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; right:-30px;} #sase .section01 .topChart .connect:last-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:50%; transform:translateY(-50%); left:-4px;} #sase .section01 .topChart .connect:last-child li:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; left:-30px;} #sase .section01 .topChart .connect li .icon{width:120px;} #sase .section01 .topChart .connect li .icon img{width:100%;} #sase .section01 .topChart .connect li .subj{font-size:18px; color:#222; text-align:Center; word-break:Keep-all;} #sase .section01 .topChart .connect li:last-child{border-bottom:0px dashed #e5e5e5;} #sase .section01 .topChart span{position:relative; width:0;} #sase .section01 .topChart .leftDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:50%; transform:translateY(-50%); left:26px; z-index:1;} #sase .section01 .topChart .leftDot:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; left:0px;} #sase .section01 .topChart .rightDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:50%; transform:translateY(-50%); right:26px;} #sase .section01 .topChart .rightDot:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; right:-6px;} #sase .section01 .topChart .infoBox:before{width:0px; top:0; bottom:0; padding:192px 0px; height:auto; border:1px dashed #ddd; positioN:absolute; top:50%; transform:translateY(-50%); content:''; left:-30px} #sase .section01 .topChart .infoBox:after{width:0px; top:0; bottom:0; padding:192px 0px; height:auto; border:1px dashed #ddd; positioN:absolute; top:50%; transform:translateY(-50%); content:''; right:-30px} #sase .section01 .topChart .infoBox{position:relative;width:60%; background:#fff; padding:20px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05); border-radius:20px} #sase .section01 .topChart .infoBox .subject{width:100%; text-align:center; font-size:28px; color:#444; font-weight:600;} #sase .section01 .topChart .infoBox .sortList{width:100%; display:flex; gap:12px; flex-direction:column;} #sase .section01 .topChart .infoBox .sortList li{width:100%; background:#FEF3ED; padding:20px 0px; display:flex; flex-direction:column; gap:16px; align-items:center;} #sase .section01 .topChart .infoBox .sortList li .icon{width:60px;} #sase .section01 .topChart .infoBox .sortList li .icon img{width:100%;} #sase .section01 .topChart .infoBox .sortList li .txA{width:100%; display:flex; gap:4px; flex-direction: column;} #sase .section01 .topChart .infoBox .sortList li .txA .subj{text-align:center; color:#222; font-size:24px; font-weight:600;} #sase .section01 .topChart .infoBox .sortList li .txA .subs{text-align:center; color:#444; font-size:20px;} #sase .section01 .topChart .infoBox .infoList{width:100%; display:flex; flex-wrap:wrap; gap:12px;} #sase .section01 .topChart .infoBox .infoList li{width:calc(100% / 2 - 6px); background:#f7f7f7; font-size:18px; color:#444; padding:20px; box-sizing:border-box; text-align:Center; word-break:keep-all;} #sase .section01 .tagA{width:100%; margin-top:40px; border-radius:150px; background:#fff; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; justify-content:space-between;} #sase .section01 .tagA .processTag{width:73%; display:flex; justify-content:space-between;} #sase .section01 .tagA .processTag li{width:100%; color:#444; background:#f7f7f7; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:200px; flex:1 1 100px; font-size:18px} #sase .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #sase .section01 .tagA .arrow{width:7%; place-self:center;} #sase .section01 .tagA .arrow img{width:100%;} #sase .section01 .tagA .result{width:20%; background:#F8844A;border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; font-size:18px; max-width:200px; padding:0px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #sase .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #sase .section02{width:100%; padding:120px 10%; box-sizing:border-box;} #sase .solution dd{justify-content:start;} #sase .solution dd .thumbnail{width:70%;} @media (max-width: 1439px) { #sase{width:100%;} #sase .section01{width:100%; background:#f7f7f7; padding:80px 5%; box-sizing:border-box;} #sase .section01 .titleA{border-bottom:0;} #sase .section01 .topChart{width:100%; display:flex; gap:0; margin-top:40px; gap:30px;} #sase .section01 .topChart .connect{width:20%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; flex-direction: column; justify-content:center;} #sase .section01 .topChart .connect li{width:100%; position:Relative; border-bottom:1px dashed #e5e5e5; padding:20px 0px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;} #sase .section01 .topChart .connect:first-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:50%; transform:translateY(-50%); right:-4px;} #sase .section01 .topChart .connect:first-child li:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; right:-30px;} #sase .section01 .topChart .connect:last-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:50%; transform:translateY(-50%); left:-4px;} #sase .section01 .topChart .connect:last-child li:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; left:-30px;} #sase .section01 .topChart .connect li .icon{width:80px;} #sase .section01 .topChart .connect li .icon img{width:100%;} #sase .section01 .topChart .connect li .subj{font-size:16px; color:#222; text-align:Center; word-break:Keep-all;} #sase .section01 .topChart .connect li:last-child{border-bottom:0px dashed #e5e5e5;} #sase .section01 .topChart span{position:relative; width:0;} #sase .section01 .topChart .leftDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:50%; transform:translateY(-50%); left:26px; z-index:1;} #sase .section01 .topChart .leftDot:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; left:0px;} #sase .section01 .topChart .rightDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:50%; transform:translateY(-50%); right:26px;} #sase .section01 .topChart .rightDot:after{width:30px; height:0px; border:1px dashed #ddd; top:50%; transform:translateY(-50%); position:absolute; content:''; right:-6px;} #sase .section01 .topChart .infoBox:before{width:0px; top:0; bottom:0; padding:152px 0px; height:auto; border:1px dashed #ddd; positioN:absolute; top:50%; transform:translateY(-50%); content:''; left:-30px} #sase .section01 .topChart .infoBox:after{width:0px; top:0; bottom:0; padding:152px 0px; height:auto; border:1px dashed #ddd; positioN:absolute; top:50%; transform:translateY(-50%); content:''; right:-30px} #sase .section01 .topChart .infoBox{position:relative;width:60%; background:#fff; padding:20px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05); border-radius:20px} #sase .section01 .topChart .infoBox .subject{width:100%; text-align:center; font-size:24px; color:#444; font-weight:600;} #sase .section01 .topChart .infoBox .sortList{width:100%; display:flex; gap:12px; flex-direction:column;} #sase .section01 .topChart .infoBox .sortList li{width:100%; background:#FEF3ED; padding:16px 0px; display:flex; flex-direction:column; gap:12px; align-items:center;} #sase .section01 .topChart .infoBox .sortList li .icon{width:40px;} #sase .section01 .topChart .infoBox .sortList li .icon img{width:100%;} #sase .section01 .topChart .infoBox .sortList li .txA{width:100%; display:flex; gap:4px; flex-direction: column;} #sase .section01 .topChart .infoBox .sortList li .txA .subj{text-align:center; color:#222; font-size:20px; font-weight:600;} #sase .section01 .topChart .infoBox .sortList li .txA .subs{text-align:center; color:#444; font-size:18px;} #sase .section01 .topChart .infoBox .infoList{width:100%; display:flex; flex-wrap:wrap; gap:12px;} #sase .section01 .topChart .infoBox .infoList li{width:calc(100% / 2 - 6px); background:#f7f7f7; font-size:16px; color:#444; padding:20px; box-sizing:border-box; text-align:Center; word-break:keep-all;} #sase .section01 .tagA{width:100%; margin-top:40px; border-radius:150px; background:#fff; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; justify-content:space-between;} #sase .section01 .tagA .processTag{width:73%; display:flex; justify-content:space-between;} #sase .section01 .tagA .processTag li{width:100%; color:#444; background:#f7f7f7; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:160px; flex:1 1 100px; font-size:16px} #sase .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #sase .section01 .tagA .arrow{width:7%; place-self:center;} #sase .section01 .tagA .arrow img{width:100%;} #sase .section01 .tagA .result{width:20%; background:#F8844A;border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; font-size:16px; max-width:160px; padding:0px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #sase .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #sase .section02{width:100%; padding:80px 5%; box-sizing:border-box;} #sase .solution dd .thumbnail{width:80%;} } @media (max-width: 1023px) { #sase{width:100%;} #sase .section01{width:100%; background:#f7f7f7; padding:80px 3%; box-sizing:border-box;} #sase .section01 .titleA{border-bottom:0;} #sase .section01 .topChart{width:100%; display:flex; gap:0; margin-top:12px; gap:30px; flex-direction:column;} #sase .section01 .topChart .connect{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; flex-direction: row; justify-content:center;} #sase .section01 .topChart .connect li{width:100%; position:Relative; border-right:1px dashed #e5e5e5; border-bottom:0px dashed #e5e5e5; padding:20px 0px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;} #sase .section01 .topChart .connect:first-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:auto; transform:translateY(0%); right:auto; left:50%; transform:translateX(-50%); bottom:-4px;} #sase .section01 .topChart .connect:first-child li:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; right:auto; bottom:-30px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .connect:last-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:-4px; transform:translateY(0%); left:50%; transform:translateX(-50%);} #sase .section01 .topChart .connect:last-child li:after{width:0px; height:30px; border:1px dashed #ddd; top:-30px; transform:translateY(0%); position:absolute; content:''; left:50%; transform:translateX(-50%)} #sase .section01 .topChart .connect li .icon{width:80px;} #sase .section01 .topChart .connect li .icon img{width:100%;} #sase .section01 .topChart .connect li .subj{font-size:16px; color:#222; text-align:Center; word-break:Keep-all;} #sase .section01 .topChart .connect li:last-child{border-bottom:0px dashed #e5e5e5; border-right:0;} #sase .section01 .topChart span{position:relative; width:100%;} #sase .section01 .topChart .leftDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:auto; transform:translateY(0%); left:auto; z-index:1; top:26px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .leftDot:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .rightDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:auto; transform:translateY(0%); bottom:26px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .rightDot:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; right:auto;left:50%; transforM:translateX(-50%); bottom:-8px;} #sase .section01 .topChart .infoBox:before{width:auto; padding:0px 33%; height:0px; border:1px dashed #ddd; positioN:absolute; top:auto; transform:translateY(0%); content:''; right:auto; left:50%; transform:translate(-50%, 0px); top:-30px;} #sase .section01 .topChart .infoBox:after{width:auto; padding:0px 33%; height:0px; border:1px dashed #ddd; positioN:absolute; top:auto; transform:translateY(0%); content:''; right:auto; left:50%; transform:translate(-50%, 0px); bottom:-30px;} #sase .section01 .topChart .infoBox{position:relative;width:100%; background:#fff; padding:20px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05); border-radius:20px} #sase .section01 .topChart .infoBox .subject{width:100%; text-align:center; font-size:24px; color:#444; font-weight:600;} #sase .section01 .topChart .infoBox .sortList{width:100%; display:flex; gap:12px; flex-direction:column;} #sase .section01 .topChart .infoBox .sortList li{width:100%; background:#FEF3ED; padding:16px 0px; display:flex; flex-direction:column; gap:12px; align-items:center;} #sase .section01 .topChart .infoBox .sortList li .icon{width:40px;} #sase .section01 .topChart .infoBox .sortList li .icon img{width:100%;} #sase .section01 .topChart .infoBox .sortList li .txA{width:100%; display:flex; gap:4px; flex-direction: column;} #sase .section01 .topChart .infoBox .sortList li .txA .subj{text-align:center; color:#222; font-size:20px; font-weight:600;} #sase .section01 .topChart .infoBox .sortList li .txA .subs{text-align:center; color:#444; font-size:18px;} #sase .section01 .topChart .infoBox .infoList{width:100%; display:flex; flex-wrap:wrap; gap:12px;} #sase .section01 .topChart .infoBox .infoList li{width:calc(100% / 2 - 6px); background:#f7f7f7; font-size:16px; color:#444; padding:20px; box-sizing:border-box; text-align:Center; word-break:keep-all;} #sase .section01 .tagA{width:100%; margin-top:40px; border-radius:32px; background:#fff; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column;} #sase .section01 .tagA .processTag{width:100%; display:flex; justify-content:space-between;} #sase .section01 .tagA .processTag li{width:100%; color:#444; background:#f7f7f7; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:160px; flex:1 1 100px; font-size:16px} #sase .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #sase .section01 .tagA .arrow{width:12%; place-self:center; transform:rotate(90deg)} #sase .section01 .tagA .arrow img{width:100%;} #sase .section01 .tagA .result{width:100%; background:#F8844A;border-radius:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:0; font-size:16px; max-width:100%; padding:20px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #sase .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #sase .section02{width:100%; padding:80px 3%; box-sizing:border-box;} #sase .solution dd .thumbnail{width:100%;} } @media (max-width: 767px) { #sase{width:100%;} #sase .section01{width:100%; background:#f7f7f7; padding:60px 3%; box-sizing:border-box;} #sase .section01 .titleA{border-bottom:0;} #sase .section01 .topChart{width:100%; display:flex; gap:0; margin-top:12px; gap:30px; flex-direction:column;} #sase .section01 .topChart .connect{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; flex-direction: row; justify-content:center;} #sase .section01 .topChart .connect li{width:100%; position:Relative; border-right:1px dashed #e5e5e5; border-bottom:0px dashed #e5e5e5; padding:20px 0px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;} #sase .section01 .topChart .connect:first-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:auto; transform:translateY(0%); right:auto; left:50%; transform:translateX(-50%); bottom:-4px;} #sase .section01 .topChart .connect:first-child li:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; right:auto; bottom:-30px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .connect:last-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:-4px; transform:translateY(0%); left:50%; transform:translateX(-50%);} #sase .section01 .topChart .connect:last-child li:after{width:0px; height:30px; border:1px dashed #ddd; top:-30px; transform:translateY(0%); position:absolute; content:''; left:50%; transform:translateX(-50%)} #sase .section01 .topChart .connect li .icon{width:60px;} #sase .section01 .topChart .connect li .icon img{width:100%;} #sase .section01 .topChart .connect li .subj{font-size:14px; color:#222; text-align:Center; word-break:Keep-all; padding:0px 10px;} #sase .section01 .topChart .connect li:last-child{border-bottom:0px dashed #e5e5e5; border-right:0;} #sase .section01 .topChart span{position:relative; width:100%;} #sase .section01 .topChart .leftDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:auto; transform:translateY(0%); left:auto; z-index:1; top:26px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .leftDot:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .rightDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:auto; transform:translateY(0%); bottom:26px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .rightDot:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; right:auto;left:50%; transforM:translateX(-50%); bottom:-8px;} #sase .section01 .topChart .infoBox:before{width:auto; padding:0px 33%; height:0px; border:1px dashed #ddd; positioN:absolute; top:auto; transform:translateY(0%); content:''; right:auto; left:50%; transform:translate(-50%, 0px); top:-30px;} #sase .section01 .topChart .infoBox:after{width:auto; padding:0px 33%; height:0px; border:1px dashed #ddd; positioN:absolute; top:auto; transform:translateY(0%); content:''; right:auto; left:50%; transform:translate(-50%, 0px); bottom:-30px;} #sase .section01 .topChart .infoBox{position:relative;width:100%; background:#fff; padding:12px; box-sizing:border-box; display:flex; gap:16px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05); border-radius:20px} #sase .section01 .topChart .infoBox .subject{width:100%; text-align:center; font-size:20px; color:#444; font-weight:600;} #sase .section01 .topChart .infoBox .sortList{width:100%; display:flex; gap:8px; flex-direction:column;} #sase .section01 .topChart .infoBox .sortList li{width:100%; background:#FEF3ED; padding:16px 0px; display:flex; flex-direction:column; gap:12px; align-items:center;} #sase .section01 .topChart .infoBox .sortList li .icon{width:40px;} #sase .section01 .topChart .infoBox .sortList li .icon img{width:100%;} #sase .section01 .topChart .infoBox .sortList li .txA{width:100%; display:flex; gap:4px; flex-direction: column;} #sase .section01 .topChart .infoBox .sortList li .txA .subj{text-align:center; color:#222; font-size:18px; font-weight:600;} #sase .section01 .topChart .infoBox .sortList li .txA .subs{text-align:center; color:#444; font-size:16px;} #sase .section01 .topChart .infoBox .infoList{width:100%; display:flex; flex-wrap:wrap; gap:8px;} #sase .section01 .topChart .infoBox .infoList li{width:100%; background:#f7f7f7; font-size:14px; color:#444; padding:20px; box-sizing:border-box; text-align:Center; word-break:keep-all;} #sase .section01 .tagA{width:100%; margin-top:40px; border-radius:32px; background:#fff; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column;} #sase .section01 .tagA .processTag{width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:16px;} #sase .section01 .tagA .processTag li{width:calc(100% / 2 - 8px); color:#444; background:#f7f7f7; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:auto; flex:auto; font-size:16px} #sase .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #sase .section01 .tagA .arrow{width:16%; place-self:center; transform:rotate(90deg)} #sase .section01 .tagA .arrow img{width:100%;} #sase .section01 .tagA .result{width:100%; background:#F8844A;border-radius:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:0; font-size:16px; max-width:100%; padding:20px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #sase .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #sase .section02{width:100%; padding:60px 3%; box-sizing:border-box;} #sase .solution dd .thumbnail{width:100%;} } @media (max-width: 374px) { #sase{width:100%;} #sase .section01{width:100%; background:#f7f7f7; padding:60px 3%; box-sizing:border-box;} #sase .section01 .titleA{border-bottom:0;} #sase .section01 .topChart{width:100%; display:flex; gap:0; margin-top:12px; gap:30px; flex-direction:column;} #sase .section01 .topChart .connect{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; flex-direction: row; justify-content:center;} #sase .section01 .topChart .connect li{width:100%; position:Relative; border-right:1px dashed #e5e5e5; border-bottom:0px dashed #e5e5e5; padding:12px 0px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;} #sase .section01 .topChart .connect:first-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:auto; transform:translateY(0%); right:auto; left:50%; transform:translateX(-50%); bottom:-4px;} #sase .section01 .topChart .connect:first-child li:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; right:auto; bottom:-30px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .connect:last-child li:before{width:8px; height:8px; border-radius:50%; background:#DDD; position:absolute; content:''; top:-4px; transform:translateY(0%); left:50%; transform:translateX(-50%);} #sase .section01 .topChart .connect:last-child li:after{width:0px; height:30px; border:1px dashed #ddd; top:-30px; transform:translateY(0%); position:absolute; content:''; left:50%; transform:translateX(-50%)} #sase .section01 .topChart .connect li .icon{width:40px;} #sase .section01 .topChart .connect li .icon img{width:100%;} #sase .section01 .topChart .connect li .subj{font-size:13px; color:#222; text-align:Center; word-break:Keep-all; padding:0px 10px;} #sase .section01 .topChart .connect li:last-child{border-bottom:0px dashed #e5e5e5; border-right:0;} #sase .section01 .topChart span{position:relative; width:100%;} #sase .section01 .topChart .leftDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:auto; transform:translateY(0%); left:auto; z-index:1; top:26px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .leftDot:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .rightDot:before{width:8px; height:8px; border-radius:50%; background:#F8844A; position:absolute; content:''; top:auto; transform:translateY(0%); bottom:26px; left:50%; transform:translateX(-50%);} #sase .section01 .topChart .rightDot:after{width:0px; height:30px; border:1px dashed #ddd; top:auto; transform:translateY(0%); position:absolute; content:''; right:auto;left:50%; transforM:translateX(-50%); bottom:-8px;} #sase .section01 .topChart .infoBox:before{width:auto; padding:0px 33%; height:0px; border:1px dashed #ddd; positioN:absolute; top:auto; transform:translateY(0%); content:''; right:auto; left:50%; transform:translate(-50%, 0px); top:-30px;} #sase .section01 .topChart .infoBox:after{width:auto; padding:0px 33%; height:0px; border:1px dashed #ddd; positioN:absolute; top:auto; transform:translateY(0%); content:''; right:auto; left:50%; transform:translate(-50%, 0px); bottom:-30px;} #sase .section01 .topChart .infoBox{position:relative;width:100%; background:#fff; padding:12px; box-sizing:border-box; display:flex; gap:16px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05); border-radius:20px} #sase .section01 .topChart .infoBox .subject{width:100%; text-align:center; font-size:20px; color:#444; font-weight:600;} #sase .section01 .topChart .infoBox .sortList{width:100%; display:flex; gap:8px; flex-direction:column;} #sase .section01 .topChart .infoBox .sortList li{width:100%; background:#FEF3ED; padding:12px 0px; display:flex; flex-direction:column; gap:12px; align-items:center;} #sase .section01 .topChart .infoBox .sortList li .icon{width:40px;} #sase .section01 .topChart .infoBox .sortList li .icon img{width:100%;} #sase .section01 .topChart .infoBox .sortList li .txA{width:100%; display:flex; gap:4px; flex-direction: column;} #sase .section01 .topChart .infoBox .sortList li .txA .subj{text-align:center; color:#222; font-size:16px; font-weight:600;} #sase .section01 .topChart .infoBox .sortList li .txA .subs{text-align:center; color:#444; font-size:14px;} #sase .section01 .topChart .infoBox .infoList{width:100%; display:flex; flex-wrap:wrap; gap:8px;} #sase .section01 .topChart .infoBox .infoList li{width:100%; background:#f7f7f7; font-size:14px; color:#444; padding:20px; box-sizing:border-box; text-align:Center; word-break:keep-all;} #sase .section01 .tagA{width:100%; margin-top:40px; border-radius:32px; background:#fff; padding:20px; box-sizing:border-box; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column;} #sase .section01 .tagA .processTag{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;} #sase .section01 .tagA .processTag li{width:calc(100% / 2 - 8px); color:#444; background:#f7f7f7; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio: 1 / 1; max-width:auto; flex:auto; font-size:14px} #sase .section01 .tagA .processTag li span{font-weight:600; color:#F8844A;} #sase .section01 .tagA .arrow{width:24%; place-self:center; transform:rotate(90deg)} #sase .section01 .tagA .arrow img{width:100%;} #sase .section01 .tagA .result{width:100%; background:#F8844A;border-radius:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; aspect-ratio:0; font-size:16px; max-width:100%; padding:20px 12px; box-sizing:border-box; word-break:Keep-all; color:#fff;} #sase .section01 .tagA .result span{text-decoration:underline; font-weight:600;} #sase .section02{width:100%; padding:60px 3%; box-sizing:border-box;} #sase .solution dd .thumbnail{width:100%;} } /* 보안패브릭 */ #fabric{width:100%;} #fabric .subTitleArea .content .top .logontitle{ display:flex; gap:8px; align-items:center;} #fabric .subTitleArea .content .top .logontitle .txTit{font-size:36px; color:#fff; font-weight:bold;} #fabric .section01{width:100%;} #fabric .section01 .top{width:100%; padding:120px 10% 60px; box-sizing:border-box; background:#f7f7f7;} #fabric .section01 .top .substance{width:100%; text-align:Center; font-size:18px; color:#444; margin-top:40px; word-break:Keep-all; line-height:26px;} #fabric .section01 .top .substance br{display:block;} #fabric .section01 .top .sortList{width:100%; display:flex; gap:20px; margin-top:60px;} #fabric .section01 .top .sortList dd{width:100%; background:#fff; padding:00px 16px 20px; box-sizing:border-box; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); position:relative;} #fabric .section01 .top .sortList dd .subjA{width:100%; position:relative; margin-top:-30px; display:flex; gap:4px; justify-content:center; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .subjA .icon{width:60px;} #fabric .section01 .top .sortList dd .subjA .icon img{width:100%;} #fabric .section01 .top .sortList dd .subjA .subj{width:100%; font-size:16px; color:#222; font-weight:500; text-align:Center; word-break:keep-all;} #fabric .section01 .top .sortList dd .detailList{width:100%; margin-top:20px; display:flex; gap:16px; flex-direction:column;} #fabric .section01 .top .sortList dd .detailList li{width:100%; display:flex; gap:4px; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .detailList li .icon{width:32px;} #fabric .section01 .top .sortList dd .detailList li .icon img{width:100%;} #fabric .section01 .top .sortList dd .detailList li .name{width:100%; text-align:center; color:#777; word-break:keep-all; font-family:'poppins','pretendard';} #fabric .section01 .top .keyword{width:100%; text-align:Center; margin-top:60px; background:#fff; border-radius:300px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:0px 32px 32px; box-sizing:border-box;} #fabric .section01 .top .keyword .titleBox{text-align:center; display:inline-block; padding:12px 32px; background:#F8844A; color:#fff; font-size:24px; font-weight:600; border-radius:50px; position:relative; margin-top:-26px;} #fabric .section01 .top .keyword .keywordList{width:100%; display:flex; justify-content:space-between; margin-top:12px; } #fabric .section01 .top .keyword .keywordList li{max-width:200px; width:100%; aspect-ratio: 1 / 1; background:#f7f7f7; border-radius:50%; display:flex; gap:8px; flex-direction:column; justify-content:center; align-items:center;} #fabric .section01 .top .keyword .keywordList li .icon{width:52px;} #fabric .section01 .top .keyword .keywordList li .icon img{width:100%;} #fabric .section01 .top .keyword .keywordList li .tx{width:100%; text-align:Center; font-size:18px; color:#444; word-break:keep-all;} #fabric .section01 .exList{width:100%; padding:40px 10% 120px; box-sizing:border-box; position:relative; display:flex; gap:20px;} #fabric .section01 .exList:before{width:100%; height:50%; background:#f7f7f7; content:''; position:absolute; z-index:-1; top:0; left:0} #fabric .section01 .exList li{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:40px 40px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:32px;} #fabric .section01 .exList li .icon{width:auto; height:60%;} #fabric .section01 .exList li .icon img{height:100%;} #fabric .section01 .exList li .txA{height:100%; display:flex; gap:12px; flex-direction:column;} #fabric .section01 .exList li .txA .subj{height:100%; text-align:center; font-size:24px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section01 .exList li .txA .subs{height:100%; text-align:center; font-size:18px; color:#444; word-break:keep-all;} #fabric .section02{width:100%; padding:60px 10% 120px; box-sizing:border-box;} #fabric .section02 .titleA{border:0;} #fabric .section02 .diagram{width:100%; margin-top:20px; display:flex; gap:120px;} #fabric .section02 .diagram .box{width:calc(100% / 2 - 120px - 60px); background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column; padding:32px; box-sizing:border-box; align-items:center; justify-content:center;} #fabric .section02 .diagram .box .icon{width:auto; height:62px;} #fabric .section02 .diagram .box .icon img{height:100%;} #fabric .section02 .diagram .box .txA{width:100%;gap:12px; display:flex; flex-direction:column;} #fabric .section02 .diagram .box .txA .subject{font-size:24px; text-align:Center; color:#222; word-break:keep-all; font-weight:600;} #fabric .section02 .diagram .box .txA .subject span{display:block; color:#F8844A} #fabric .section02 .diagram .box .txA .subs{width:100%; text-align:Center; font-size:18px; color:#444; word-break:keep-all; line-height:26px;} #fabric .section02 .diagram .fa_solution{width:120px;} #fabric .section02 .diagram .fa_solution .solutionList{width:100%;display:flex; gap:20px; flex-direction:column; justify-content:center; align-items:center; height:100%; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li{width:100%; aspect-ratio: 1 / 1; position:relative; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:12px; border-radius:20px; display:flex; gap:8px; align-items:center; justify-content:center; flex-direction:column; box-sizing:border-box; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li .icon{width:64px;} #fabric .section02 .diagram .fa_solution .solutionList li .icon img{width:100%;} #fabric .section02 .diagram .fa_solution .solutionList li .subj{width:100%; text-align:Center; font-size:18px; color:#444;} #fabric .section02 .diagram .fa_solution .solutionList li:before{width:126px; height:6px; left:-123px; position:absolute; z-index:2; background:url(../images/product/fabric/line_orange.png); content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:after{width:126px; height:6px; right:-123px; position:absolute; z-index:2; background:url(../images/product/fabric/line_red.png); content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:nth-child(2):after{display:none;} #fabric .section02 .exList{width:100%; margin-top:60px; display:flex; gap:40px;} #fabric .section02 .exList li{width:100%; padding:60px 20px; background:#f7f7f7; border-radius:20px; display:flex; gap:12px; align-items:center; flex-direction:column;} #fabric .section02 .exList li .subj{width:100%; text-align:Center; font-size:24px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section02 .exList li .subs{width:100%; text-align:Center; font-size:20px; color:#444; word-break:keep-all;} #fabric .section03{width:100%; padding:0px 10% 120px; box-sizing:border-box;} #fabric .section03 .titleA{border:0;} #fabric .section03 .case2List{width:100%; display:flex; gap:20px; flex-direction:column; margin-top:20px;} #fabric .section03 .case2List li{width:100%; display:flex; gap:52px;} #fabric .section03 .case2List li .subjBox{width:33%; background:#f7f7f7; padding:32px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;} #fabric .section03 .case2List li .subjBox .solutionA{width:100%; display:flex; gap:12px; align-items:center; justify-content:center;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t{width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icons{width:100%; display:flex; justify-content:center; gap:8px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon{width:48px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon img{width:100%;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .name{width:100%; font-family:'poppins', 'pretendard'; text-align:Center; font-size:16px; color:#777; word-break:keep-all;} #fabric .section03 .case2List li .subjBox .solutionA .arrow{width:36px;} #fabric .section03 .case2List li .subjBox .solutionA .arrow img{width:100%;} #fabric .section03 .case2List li .subjBox .subject{width:100%; text-align:Center; margin-top:20px; font-size:20px; font-weight:500; word-break:keep-all;} #fabric .section03 .case2List li .subjBox:after{width:60px; position:absolute; content:''; height:6px; background:url(../images/product/fabric/line_gray.png); background-size:100%; right:-56px; z-index:1;} #fabric .section03 .case2List li .substance{width:67%; background:#fff; padding:32px; border:1px solid #e5e5e5; box-sizing:Border-box; display:flex; flex-direction:column; justify-content:center; word-break:keep-all; font-size:18px; color:#444; line-height:26px;} #fabric .section03 .exList{width:100%; margin-top:60px; display:flex; gap:40px;} #fabric .section03 .exList li{width:100%; padding:60px 20px; background:#fff; display:flex; gap:12px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05)} #fabric .section03 .exList li .subjA{width:100%; display:flex; gap:8px; align-items:center;} #fabric .section03 .exList li .subjA .checkIco{width:20px;} #fabric .section03 .exList li .subjA .checkIco img{width:100%;} #fabric .section03 .exList li .subjA .subj{word-break:keep-all; font-size:22px; color:#444; font-weight:600;} #fabric .section03 .exList li .substance{width:100%; font-size:18px; color:#777; word-break:keep-all; padding-left:28px; box-sizing:border-box; line-height:26px;} #fabric .section04{width:100%; position:relative;} #fabric .section04 .bg{width:100%;} #fabric .section04 .bg img{width:100%;} #fabric .section04 .cont{width:100%; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:40px; flex-direction:column; align-items:center;} #fabric .section04 .cont .subs{width:100%;font-size:32px; color:#fff; text-align:Center; font-weight:600; line-height:44px;} #fabric .section04 .cont .counsel_btn{background:#F8844A; border-radius:4px;} @media (max-width: 1439px) { #fabric{width:100%;} #fabric .section01{width:100%;} #fabric .section01 .top{width:100%; padding:80px 5% 40px; box-sizing:border-box; background:#f7f7f7;} #fabric .section01 .top .substance{width:100%; text-align:Center; font-size:18px; color:#444; margin-top:40px; word-break:Keep-all; line-height:26px;} #fabric .section01 .top .substance br{display:none;} #fabric .section01 .top .sortList{width:100%; display:flex; gap:60px 20px; margin-top:60px; flex-wrap:wrap;} #fabric .section01 .top .sortList dd{width:calc(100% / 4 - 15px); background:#fff; padding:00px 16px 20px; box-sizing:border-box; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); position:relative;} #fabric .section01 .top .sortList dd .subjA{width:100%; position:relative; margin-top:-30px; display:flex; gap:4px; justify-content:center; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .subjA .icon{width:60px;} #fabric .section01 .top .sortList dd .subjA .icon img{width:100%;} #fabric .section01 .top .sortList dd .subjA .subj{width:100%; font-size:16px; color:#222; font-weight:500; text-align:Center; word-break:keep-all;} #fabric .section01 .top .sortList dd .detailList{width:100%; margin-top:20px; display:flex; gap:16px; flex-direction:column;} #fabric .section01 .top .sortList dd .detailList li{width:100%; display:flex; gap:4px; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .detailList li .icon{width:32px;} #fabric .section01 .top .sortList dd .detailList li .icon img{width:100%;} #fabric .section01 .top .sortList dd .detailList li .name{width:100%; text-align:center; color:#777; word-break:keep-all;} #fabric .section01 .top .keyword{width:100%; text-align:Center; margin-top:80px; background:#fff; border-radius:300px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:0px 24px 24px; box-sizing:border-box;} #fabric .section01 .top .keyword .titleBox{text-align:center; display:inline-block; padding:12px 32px; background:#F8844A; color:#fff; font-size:20px; font-weight:600; border-radius:50px; position:relative; margin-top:-26px;} #fabric .section01 .top .keyword .keywordList{width:100%; display:flex; justify-content:space-between; margin-top:12px; } #fabric .section01 .top .keyword .keywordList li{max-width:160px; width:100%; aspect-ratio: 1 / 1; background:#f7f7f7; border-radius:50%; display:flex; gap:8px; flex-direction:column; justify-content:center; align-items:center;} #fabric .section01 .top .keyword .keywordList li .icon{width:52px;} #fabric .section01 .top .keyword .keywordList li .icon img{width:100%;} #fabric .section01 .top .keyword .keywordList li .tx{width:100%; text-align:Center; font-size:18px; color:#444; word-break:keep-all;} #fabric .section01 .exList{width:100%; padding:20px 5% 80px; box-sizing:border-box; position:relative; display:flex; gap:20px;} #fabric .section01 .exList:before{width:100%; height:50%; background:#f7f7f7; content:''; position:absolute; z-index:-1; top:0; left:0} #fabric .section01 .exList li{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:40px 32px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:32px;} #fabric .section01 .exList li .icon{width:auto; height:60px;} #fabric .section01 .exList li .icon img{height:100%;} #fabric .section01 .exList li .txA{height:100%; display:flex; gap:12px; flex-direction:column; justify-content:start;} #fabric .section01 .exList li .txA .subj{height:100%; text-align:center; font-size:20px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section01 .exList li .txA .subs{height:100%; text-align:center; font-size:16px; color:#444; word-break:keep-all; line-height:22px;} #fabric .section02{width:100%; padding:40px 5% 80px; box-sizing:border-box;} #fabric .section02 .titleA{border:0;} #fabric .section02 .diagram{width:100%; margin-top:20px; display:flex; gap:100px;} #fabric .section02 .diagram .box{width:calc(100% / 2 - 100px - 60px); background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column; padding:32px; box-sizing:border-box; align-items:center; justify-content:center;} #fabric .section02 .diagram .box .icon{width:auto; height:52px;} #fabric .section02 .diagram .box .icon img{height:100%;} #fabric .section02 .diagram .box .txA{width:100%;gap:12px; display:flex; flex-direction:column;} #fabric .section02 .diagram .box .txA .subject{font-size:20px; text-align:Center; color:#222; word-break:keep-all; font-weight:600;} #fabric .section02 .diagram .box .txA .subject span{display:inline-block; color:#F8844A} #fabric .section02 .diagram .box .txA .subs{width:100%; text-align:Center; font-size:16px; color:#444; word-break:keep-all; line-height:24px;} #fabric .section02 .diagram .fa_solution{width:120px;} #fabric .section02 .diagram .fa_solution .solutionList{width:100%;display:flex; gap:20px; flex-direction:column; justify-content:center; align-items:center; height:100%; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li{width:100%; aspect-ratio: 1 / 1; position:relative; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:12px; border-radius:20px; display:flex; gap:8px; align-items:center; justify-content:center; flex-direction:column; box-sizing:border-box; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li .icon{width:60px;} #fabric .section02 .diagram .fa_solution .solutionList li .icon img{width:100%;} #fabric .section02 .diagram .fa_solution .solutionList li .subj{width:100%; text-align:Center; font-size:16px; color:#444;} #fabric .section02 .diagram .fa_solution .solutionList li:before{width:106px; height:6px; left:-103px; position:absolute; z-index:2; background:url(../images/product/fabric/line_orange.png) no-repeat; content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:after{width:106px; height:6px; right:-103px; position:absolute; z-index:2; background:url(../images/product/fabric/line_red.png) no-repeat; content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:nth-child(2):after{display:none;} #fabric .section02 .exList{width:100%; margin-top:60px; display:flex; gap:20px;} #fabric .section02 .exList li{width:100%; padding:40px 20px; background:#f7f7f7; border-radius:20px; display:flex; gap:12px; align-items:center; flex-direction:column;} #fabric .section02 .exList li .subj{width:100%; text-align:Center; font-size:20px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section02 .exList li .subs{width:100%; text-align:Center; font-size:16px; color:#444; word-break:keep-all; line-height:24px;} #fabric .section03{width:100%; padding:0px 5% 80px; box-sizing:border-box;} #fabric .section03 .titleA{border:0;} #fabric .section03 .case2List{width:100%; display:flex; gap:20px; flex-direction:column; margin-top:20px;} #fabric .section03 .case2List li{width:100%; display:flex; gap:20px;} #fabric .section03 .case2List li .subjBox{width:33%; background:#f7f7f7; padding:24px 16px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;} #fabric .section03 .case2List li .subjBox .solutionA{width:100%; display:flex; gap:12px; align-items:center; justify-content:center;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t{width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icons{width:100%; display:flex; justify-content:center; gap:8px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon{width:48px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon img{width:100%;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .name{width:100%; font-family:'poppins', 'pretendard'; text-align:Center; font-size:16px; color:#777; word-break:keep-all;} #fabric .section03 .case2List li .subjBox .solutionA .arrow{width:36px;} #fabric .section03 .case2List li .subjBox .solutionA .arrow img{width:100%;} #fabric .section03 .case2List li .subjBox .subject{width:100%; text-align:Center; margin-top:20px; font-size:20px; font-weight:500; word-break:keep-all;} #fabric .section03 .case2List li .subjBox:after{width:26px; position:absolute; content:''; height:6px; background:url(../images/product/fabric/line_gray.png) no-repeat; background-size:100%; right:-23px; z-index:1;} #fabric .section03 .case2List li .substance{width:67%; background:#fff; padding:32px; border:1px solid #e5e5e5; box-sizing:Border-box; display:flex; flex-direction:column; justify-content:center; word-break:keep-all; font-size:18px; color:#444; line-height:26px;} #fabric .section03 .exList{width:100%; margin-top:60px; display:flex; gap:20px;} #fabric .section03 .exList li{width:100%; padding:40px 20px; background:#fff; display:flex; gap:12px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05)} #fabric .section03 .exList li .subjA{width:100%; display:flex; gap:8px; align-items:start;} #fabric .section03 .exList li .subjA .checkIco{width:20px; padding-top:2px;} #fabric .section03 .exList li .subjA .checkIco img{width:100%;} #fabric .section03 .exList li .subjA .subj{word-break:keep-all; font-size:20px; color:#444; font-weight:600; width:100%;} #fabric .section03 .exList li .substance{width:100%; font-size:16px; color:#777; word-break:keep-all; padding-left:28px; box-sizing:border-box; line-height:24px;} #fabric .section04{width:100%; position:relative;} #fabric .section04 .bg{width:100%;} #fabric .section04 .bg img{width:100%;} #fabric .section04 .cont{width:100%; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:40px; flex-direction:column; align-items:center;} #fabric .section04 .cont .subs{width:100%;font-size:24px; color:#fff; text-align:Center; font-weight:600; line-height:32px;} #fabric .section04 .cont .counsel_btn{background:#F8844A; border-radius:4px;} } @media (max-width: 1023px) { #fabric{width:100%;} #fabric .section01{width:100%;} #fabric .section01 .top{width:100%; padding:80px 3% 40px; box-sizing:border-box; background:#f7f7f7;} #fabric .section01 .top .substance{width:100%; text-align:Center; font-size:16px; color:#444; margin-top:40px; word-break:Keep-all; line-height:24px;} #fabric .section01 .top .substance br{display:none;} #fabric .section01 .top .sortList{width:100%; display:flex; gap:60px 20px; margin-top:60px; flex-wrap:wrap;} #fabric .section01 .top .sortList dd{width:calc(100% / 4 - 15px); background:#fff; padding:00px 16px 20px; box-sizing:border-box; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); position:relative;} #fabric .section01 .top .sortList dd .subjA{width:100%; position:relative; margin-top:-30px; display:flex; gap:4px; justify-content:center; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .subjA .icon{width:60px;} #fabric .section01 .top .sortList dd .subjA .icon img{width:100%;} #fabric .section01 .top .sortList dd .subjA .subj{width:100%; font-size:16px; color:#222; font-weight:500; text-align:Center; word-break:keep-all;} #fabric .section01 .top .sortList dd .detailList{width:100%; margin-top:20px; display:flex; gap:16px; flex-direction:column;} #fabric .section01 .top .sortList dd .detailList li{width:100%; display:flex; gap:4px; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .detailList li .icon{width:32px;} #fabric .section01 .top .sortList dd .detailList li .icon img{width:100%;} #fabric .section01 .top .sortList dd .detailList li .name{width:100%; text-align:center; color:#777; word-break:keep-all;} #fabric .section01 .top .keyword{width:100%; text-align:Center; margin-top:80px; background:#fff; border-radius:300px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:0px 20px 20px; box-sizing:border-box;} #fabric .section01 .top .keyword .titleBox{text-align:center; display:inline-block; padding:12px 24px; background:#F8844A; color:#fff; font-size:18px; font-weight:600; border-radius:50px; position:relative; margin-top:-26px;} #fabric .section01 .top .keyword .keywordList{width:100%; display:flex; justify-content:space-between; margin-top:12px; } #fabric .section01 .top .keyword .keywordList li{max-width:120px; width:100%; aspect-ratio: 1 / 1; background:#f7f7f7; border-radius:50%; display:flex; gap:8px; flex-direction:column; justify-content:center; align-items:center;} #fabric .section01 .top .keyword .keywordList li .icon{width:52px;} #fabric .section01 .top .keyword .keywordList li .icon img{width:100%;} #fabric .section01 .top .keyword .keywordList li .tx{width:100%; text-align:Center; font-size:16px; color:#444; word-break:keep-all;} #fabric .section01 .exList{width:100%; padding:20px 3% 80px; box-sizing:border-box; position:relative; display:flex; gap:20px;} #fabric .section01 .exList:before{width:100%; height:50%; background:#f7f7f7; content:''; position:absolute; z-index:-1; top:0; left:0} #fabric .section01 .exList li{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:32px 24px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:32px;} #fabric .section01 .exList li .icon{width:auto; height:52px;} #fabric .section01 .exList li .icon img{height:100%;} #fabric .section01 .exList li .txA{height:100%; display:flex; gap:12px; flex-direction:column; justify-content:start;} #fabric .section01 .exList li .txA .subj{height:100%; text-align:center; font-size:20px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section01 .exList li .txA .subs{height:100%; text-align:center; font-size:16px; color:#444; word-break:keep-all; line-height:22px;} #fabric .section02{width:100%; padding:40px 3% 80px; box-sizing:border-box;} #fabric .section02 .titleA{border:0;} #fabric .section02 .diagram{width:100%; margin-top:20px; display:flex; gap:60px;} #fabric .section02 .diagram .box{width:calc(100% / 2 - 60px - 60px); background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column; padding:32px; box-sizing:border-box; align-items:center; justify-content:center;} #fabric .section02 .diagram .box .icon{width:auto; height:52px;} #fabric .section02 .diagram .box .icon img{height:100%;} #fabric .section02 .diagram .box .txA{width:100%;gap:12px; display:flex; flex-direction:column;} #fabric .section02 .diagram .box .txA .subject{font-size:20px; text-align:Center; color:#222; word-break:keep-all; font-weight:600;} #fabric .section02 .diagram .box .txA .subject span{display:inline-block; color:#F8844A} #fabric .section02 .diagram .box .txA .subs{width:100%; text-align:Center; font-size:16px; color:#444; word-break:keep-all; line-height:24px;} #fabric .section02 .diagram .fa_solution{width:120px;} #fabric .section02 .diagram .fa_solution .solutionList{width:100%;display:flex; gap:20px; flex-direction:column; justify-content:center; align-items:center; height:100%; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li{width:100%; aspect-ratio: 1 / 1; position:relative; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:12px; border-radius:20px; display:flex; gap:8px; align-items:center; justify-content:center; flex-direction:column; box-sizing:border-box; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li .icon{width:52px;} #fabric .section02 .diagram .fa_solution .solutionList li .icon img{width:100%;} #fabric .section02 .diagram .fa_solution .solutionList li .subj{width:100%; text-align:Center; font-size:16px; color:#444;} #fabric .section02 .diagram .fa_solution .solutionList li:before{width:66px; height:6px; left:-63px; position:absolute; z-index:2; background:url(../images/product/fabric/line_orange.png) no-repeat; content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:after{width:66px; height:6px; right:-63px; position:absolute; z-index:2; background:url(../images/product/fabric/line_red.png) no-repeat; content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:nth-child(2):after{display:none;} #fabric .section02 .exList{width:100%; margin-top:60px; display:flex; gap:20px;} #fabric .section02 .exList li{width:100%; padding:40px 20px; background:#f7f7f7; border-radius:20px; display:flex; gap:12px; align-items:center; flex-direction:column;} #fabric .section02 .exList li .subj{width:100%; text-align:Center; font-size:20px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section02 .exList li .subs{width:100%; text-align:Center; font-size:16px; color:#444; word-break:keep-all; line-height:24px;} #fabric .section03{width:100%; padding:0px 3% 80px; box-sizing:border-box;} #fabric .section03 .titleA{border:0;} #fabric .section03 .case2List{width:100%; display:flex; gap:32px; flex-direction:column; margin-top:8px;} #fabric .section03 .case2List li{width:100%; display:flex; gap:4px; flex-direction:column;} #fabric .section03 .case2List li .subjBox{width:100%; background:#f7f7f7; padding:20px 16px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;} #fabric .section03 .case2List li .subjBox .solutionA{width:100%; display:flex; gap:12px; align-items:center; justify-content:center;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t{width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icons{width:100%; display:flex; justify-content:center; gap:8px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon{width:36px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon img{width:100%;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .name{width:100%; font-family:'poppins', 'pretendard'; text-align:Center; font-size:16px; color:#777; word-break:keep-all;} #fabric .section03 .case2List li .subjBox .solutionA .arrow{width:40px;} #fabric .section03 .case2List li .subjBox .solutionA .arrow img{width:100%;} #fabric .section03 .case2List li .subjBox .subject{width:100%; text-align:Center; margin-top:12px; font-size:18px; font-weight:500; word-break:keep-all;} #fabric .section03 .case2List li .subjBox:after{width:26px; display:none; position:absolute; content:''; height:6px; background:url(../images/product/fabric/line_gray.png) no-repeat; background-size:100%; right:-23px; z-index:1;} #fabric .section03 .case2List li .substance{width:100%; background:#fff; padding:20px 32px; border:1px solid #e5e5e5; box-sizing:Border-box; display:flex; flex-direction:column; justify-content:center; word-break:keep-all; font-size:16px; color:#444; line-height:24px; text-align:center;} #fabric .section03 .exList{width:100%; margin-top:60px; display:flex; gap:20px;} #fabric .section03 .exList li{width:100%; padding:32px 20px; background:#fff; display:flex; gap:12px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05)} #fabric .section03 .exList li .subjA{width:100%; display:flex; gap:8px; align-items:start;} #fabric .section03 .exList li .subjA .checkIco{width:20px; padding-top:2px;} #fabric .section03 .exList li .subjA .checkIco img{width:100%;} #fabric .section03 .exList li .subjA .subj{word-break:keep-all; font-size:18px; color:#444; font-weight:600; width:100%;} #fabric .section03 .exList li .substance{width:100%; font-size:16px; color:#777; word-break:keep-all; padding-left:28px; box-sizing:border-box; line-height:24px;} #fabric .section04{width:100%; position:relative;} #fabric .section04 .bg{width:100%;} #fabric .section04 .bg img{width:100%;} #fabric .section04 .cont{width:100%; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:40px; flex-direction:column; align-items:center;} #fabric .section04 .cont .subs{width:100%;font-size:24px; color:#fff; text-align:Center; font-weight:600; line-height:32px; word-break:keep-all;} #fabric .section04 .cont .counsel_btn{background:#F8844A; border-radius:4px;} } @media (max-width: 767px) { #fabric{width:100%;} #fabric .subTitleArea .content .top .logontitle .txTit{display:none;} #fabric .section01{width:100%;} #fabric .section01 .top{width:100%; padding:60px 3% 20px; box-sizing:border-box; background:#f7f7f7;} #fabric .section01 .top .substance{width:100%; text-align:Center; font-size:14px; color:#444; margin-top:32px; word-break:Keep-all; line-height:20px;} #fabric .section01 .top .substance br{display:none;} #fabric .section01 .top .sortList{width:100%; display:flex; gap:40px 16px; margin-top:60px; flex-wrap:wrap;} #fabric .section01 .top .sortList dd{width:calc(100% / 2 - 8px); background:#fff; padding:00px 16px 20px; box-sizing:border-box; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); position:relative;} #fabric .section01 .top .sortList dd .subjA{width:100%; position:relative; margin-top:-30px; display:flex; gap:4px; justify-content:center; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .subjA .icon{width:52px;} #fabric .section01 .top .sortList dd .subjA .icon img{width:100%;} #fabric .section01 .top .sortList dd .subjA .subj{width:100%; font-size:16px; color:#222; font-weight:500; text-align:Center; word-break:keep-all;} #fabric .section01 .top .sortList dd .detailList{width:100%; margin-top:20px; display:flex; gap:16px; flex-direction:column;} #fabric .section01 .top .sortList dd .detailList li{width:100%; display:flex; gap:4px; flex-direction:column; align-items:center;} #fabric .section01 .top .sortList dd .detailList li .icon{width:32px;} #fabric .section01 .top .sortList dd .detailList li .icon img{width:100%;} #fabric .section01 .top .sortList dd .detailList li .name{width:100%; text-align:center; color:#777; word-break:keep-all; font-size:14px;} #fabric .section01 .top .keyword{width:100%; text-align:Center; margin-top:80px; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:0px 20px 20px; box-sizing:border-box;} #fabric .section01 .top .keyword .titleBox{text-align:center; display:inline-block; padding:12px 20px; background:#F8844A; color:#fff; font-size:14px; font-weight:600; border-radius:50px; position:relative; margin-top:-26px; word-break:keep-all;} #fabric .section01 .top .keyword .keywordList{width:100%; display:flex; justify-content:center; margin-top:12px; flex-wrap:wrap; align-items:center; gap:20px;} #fabric .section01 .top .keyword .keywordList li{max-width:120px; width:100%; aspect-ratio: 1 / 1; background:#f7f7f7; border-radius:50%; display:flex; gap:8px; flex-direction:column; justify-content:center; align-items:center;} #fabric .section01 .top .keyword .keywordList li .icon{width:52px;} #fabric .section01 .top .keyword .keywordList li .icon img{width:100%;} #fabric .section01 .top .keyword .keywordList li .tx{width:100%; text-align:Center; font-size:14px; color:#444; word-break:keep-all;} #fabric .section01 .exList{width:100%; padding:20px 3% 60px; box-sizing:border-box; position:relative; display:flex; gap:12px; flex-direction:column;} #fabric .section01 .exList:before{width:100%; height:50%; background:#f7f7f7; content:''; position:absolute; z-index:-1; top:0; left:0} #fabric .section01 .exList li{width:100%; background:#fff; border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:32px 24px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:32px; box-sizing:border-box;} #fabric .section01 .exList li .icon{width:auto; height:40px;} #fabric .section01 .exList li .icon img{height:100%;} #fabric .section01 .exList li .txA{height:100%; display:flex; gap:8px; flex-direction:column; justify-content:start;} #fabric .section01 .exList li .txA .subj{height:100%; text-align:center; font-size:16px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section01 .exList li .txA .subs{height:100%; text-align:center; font-size:14px; color:#444; word-break:keep-all; line-height:20px;} #fabric .section02{width:100%; padding:20px 3% 60px; box-sizing:border-box;} #fabric .section02 .titleA{border:0;} #fabric .section02 .diagram{width:100%; margin-top:20px; display:flex; gap:60px; flex-direction:column;} #fabric .section02 .diagram .box{width:100%; background:rgba(255,255,255,0); border-radius:20px; box-shadow:5px 5px 20px rgba(0,0,0,0.05); display:flex; gap:32px; flex-direction:column; padding:32px; box-sizing:border-box; align-items:center; justify-content:center; } #fabric .section02 .diagram .box .icon{width:auto; height:52px;} #fabric .section02 .diagram .box .icon img{height:100%;} #fabric .section02 .diagram .box .txA{width:100%;gap:12px; display:flex; flex-direction:column;} #fabric .section02 .diagram .box .txA .subject{font-size:18px; text-align:Center; color:#222; word-break:keep-all; font-weight:600;} #fabric .section02 .diagram .box .txA .subject span{display:inline-block; color:#F8844A} #fabric .section02 .diagram .box .txA .subs{width:100%; text-align:Center; font-size:14px; color:#444; word-break:keep-all; line-height:20px;} #fabric .section02 .diagram .fa_solution{width:100%; position:relative; z-index:1;} #fabric .section02 .diagram .fa_solution .solutionList{width:100%;display:flex; gap:8px; flex-direction:row; justify-content:center; align-items:center; height:100%; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li{width:100%; aspect-ratio: 1 / 1; position:relative; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.05); padding:12px; border-radius:20px; display:flex; gap:8px; align-items:center; justify-content:center; flex-direction:column; box-sizing:border-box; z-index:0;} #fabric .section02 .diagram .fa_solution .solutionList li .icon{width:52px;} #fabric .section02 .diagram .fa_solution .solutionList li .icon img{width:100%;} #fabric .section02 .diagram .fa_solution .solutionList li .subj{width:100%; text-align:Center; font-size:14px; color:#444;} #fabric .section02 .diagram .fa_solution .solutionList li:before{width:6px; top:-63px; transform:translateX(-50%); height:66px; left:50%; position:absolute; z-index:9; background:url(../images/product/fabric/line_orange_vertical.png) no-repeat center; content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:after{width:6px; bottom:-63px; transform:translateX(-50%); height:66px; left:50%; position:absolute; z-index:9; background:url(../images/product/fabric/line_red_vertical.png) no-repeat center; content:''; background-size:100%;} #fabric .section02 .diagram .fa_solution .solutionList li:nth-child(2):after{display:none;} #fabric .section02 .exList{width:100%; margin-top:40px; display:flex; gap:12px; flex-direction:column;} #fabric .section02 .exList li{width:100%; padding:40px 20px; background:#f7f7f7; border-radius:20px; display:flex; gap:12px; align-items:center; flex-direction:column; box-sizing:Border-box;} #fabric .section02 .exList li .subj{width:100%; text-align:Center; font-size:16px; color:#222; font-weight:600; word-break:keep-all;} #fabric .section02 .exList li .subs{width:100%; text-align:Center; font-size:14px; color:#444; word-break:keep-all; line-height:20px;} #fabric .section03{width:100%; padding:0px 3% 80px; box-sizing:border-box;} #fabric .section03 .titleA{border:0;} #fabric .section03 .case2List{width:100%; display:flex; gap:32px; flex-direction:column; margin-top:8px;} #fabric .section03 .case2List li{width:100%; display:flex; gap:4px; flex-direction:column;} #fabric .section03 .case2List li .subjBox{width:100%; background:#f7f7f7; padding:20px 16px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;} #fabric .section03 .case2List li .subjBox .solutionA{width:100%; display:flex; gap:12px; align-items:center; justify-content:center;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t{width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icons{width:100%; display:flex; justify-content:center; gap:8px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon{width:36px;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .icon img{width:100%;} #fabric .section03 .case2List li .subjBox .solutionA .solution_t .name{width:100%; font-family:'poppins', 'pretendard'; text-align:Center; font-size:14px; color:#777; word-break:keep-all;} #fabric .section03 .case2List li .subjBox .solutionA .arrow{width:40px;} #fabric .section03 .case2List li .subjBox .solutionA .arrow img{width:100%;} #fabric .section03 .case2List li .subjBox .subject{width:100%; text-align:Center; margin-top:12px; font-size:16px; font-weight:500; word-break:keep-all;} #fabric .section03 .case2List li .subjBox:after{width:26px; display:none; position:absolute; content:''; height:6px; background:url(../images/product/fabric/line_gray.png) no-repeat; background-size:100%; right:-23px; z-index:1;} #fabric .section03 .case2List li .substance{width:100%; background:#fff; padding:20px 32px; border:1px solid #e5e5e5; box-sizing:Border-box; display:flex; flex-direction:column; justify-content:center; word-break:keep-all; font-size:14px; color:#444; line-height:22px; text-align:center;} #fabric .section03 .exList{width:100%; margin-top:40px; display:flex; gap:12px; flex-direction:column;} #fabric .section03 .exList li{width:100%; padding:20px 20px; background:#fff; display:flex; box-sizing:border-box; gap:4px; flex-direction:column; box-shadow:5px 5px 20px rgba(0,0,0,0.05)} #fabric .section03 .exList li .subjA{width:100%; display:flex; gap:8px; align-items:start;} #fabric .section03 .exList li .subjA .checkIco{width:16px; padding-top:2px;} #fabric .section03 .exList li .subjA .checkIco img{width:100%;} #fabric .section03 .exList li .subjA .subj{word-break:keep-all; font-size:16px; color:#444; font-weight:600; width:100%;} #fabric .section03 .exList li .substance{width:100%; font-size:14px; color:#777; word-break:keep-all; padding-left:24px; box-sizing:border-box; line-height:22px;} #fabric .section04{width:100%; position:relative;} #fabric .section04 .bg{width:100%; overflow:hidden;} #fabric .section04 .bg img{width:140%; position:Relative; left:50%; transform:translateX(-50%);} #fabric .section04 .cont{width:100%; padding:0px 3%; box-sizing:border-box;position:absolute; z-index:1; top:50%; transform:translateY(-50%); display:flex; gap:20px; flex-direction:column; align-items:center;} #fabric .section04 .cont .subs{width:100%;font-size:16px; color:#fff; text-align:Center; font-weight:600; line-height:26px; word-break:keep-all;} #fabric .section04 .cont .subs br{display:none;} #fabric .section04 .cont .counsel_btn{background:#F8844A; border-radius:4px;} } /* TEPSEG */ #tepseg .product{width:100%; padding:120px 10%; box-sizing:border-box;} #tepseg .product .titleA .tabmenu{width:100%; display:flex; margin-top:12px;} #tepseg .product .titleA .tabmenu li{width:auto; padding:0px 12px; border-left:1px solid #e5e5e5; font-size:20px; color:#999; cursor:pointer; line-height:20px;} #tepseg .product .titleA .tabmenu li:first-child{padding:0px 12px 0px 0px; border:0;} #tepseg .product .titleA .tabmenu li.current{color:#F8844A; text-decoration:underline; font-weight:500;} #tepseg .product .productList{width:100%; margin-top:60px; display:flex; gap:48px; flex-flow:wrap;} #tepseg .product .productList dd{width:calc(100% / 3 - 32px); cursor:pointer; background:#f7f7f7; padding:20px; box-sizing:border-box; border-radius:12px; display:flex; flex-direction:column; align-items:center; cursor:pointer;} #tepseg .product .productList dd .series{font-size:18px; color:#222;} #tepseg .product .productList dd .thumbnail{width:260px;} #tepseg .product .productList dd .thumbnail img{width:100%;} #tepseg .product .productList dd .tagList{width:100%; display:flex; justify-content:center; gap:4px;} #tepseg .product .productList dd .tagList li{width:auto; padding:4px 16px; background:#F8844A; color:#fff; font-size:15px; border-radius:50px;} #tepseg .product .productList dd .informationA{width:100%; margin-top:40px; display:flex; flex-direction:column; gap:4px; text-align:Center; align-items:center;} #tepseg .product .productList dd .informationA .subject{font-size:32px; color:#222; font-weight:bold;} #tepseg .product .productList dd .informationA .discription{font-size:18px; color:#444; word-break:keep-all; line-height:26px;} #tepseg .product .productList dd .informationA .discription br{display:block;} /*withVTM*/ #withVTM{width:100%;} #withVTM .section01{width:100%; padding:120px 10%; box-sizing:border-box;} #withVTM .section01 .titleA{border-bottom:0;} #withVTM .section01 .titleA .substance{font-size:24px; color:#444;} #withVTM .section01 .reList{width:100%; margin-top:60px; display:flex; gap:40px;} #withVTM .section01 .reList li{width:100%; border-radius:20px; background:#fff; gap:12px; box-shadow:5px 5px 25px rgba(0,0,0,0.05); padding:60px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;} #withVTM .section01 .reList li .num{font-size:80px; color:#222; font-weight:bold;} #withVTM .section01 .reList li .icon{width:auto; height:100px;} #withVTM .section01 .reList li .icon img{height:100%;} #withVTM .section01 .reList li .subs{text-align:center; font-size:18px; color:#444; word-break:keep-all;} #withVTM .section01 .reList li .subs br{display:block;} #withVTM .section01 .sloganA{width:100%; position:relative; margin-top:60px;} #withVTM .section01 .sloganA .slogan{width:100%; text-align:center; font-size:32px; color:#222; position:absolute; top:50%; transform:translateY(-50%);} #withVTM .section01 .sloganA .name{width:100%; text-align:center; font-size:120px; color:#F8844A; opacity:0.1;font-family:'poppins','pretendard'; font-weight:900; z-index:-1;} #withVTM .section02{width:100%; padding:120px 10%; box-sizing:border-box; background:#f7f7f7} #withVTM .section02 .top{width:100%; display:flex; align-items:end; justify-content:space-between;} #withVTM .section02 .top .mockupA{width:58%; display:flex; flex-direction:column; gap:-12px;} #withVTM .section02 .top .mockupA .subjA{width:100%; display:flex; flex-direction:column; gap:16px;} #withVTM .section02 .top .mockupA .subjA .titlebox{padding:12px 20px; background:#F8844A; color:#fff; font-size:24px; width:fit-content; border-radius:8px;} #withVTM .section02 .top .mockupA .subjA .titleLogo{width:280px;} #withVTM .section02 .top .mockupA .subjA .titleLogo img{width:100%;} #withVTM .section02 .top .mockupA .mockupImg{width:100%;} #withVTM .section02 .top .mockupA .mockupImg img{width:100%;} #withVTM .section02 .top .keywordList{width:36%; display:flex; flex-direction:column; gap:8px;} /* #withVTM .section02 .top .keywordList li{width:100%; background:#fff; border-radius:12px; padding:48px 20px; box-sizing:border-box; font-weight:bold; color:#222; font-size:20px; text-align:Center;} */ #withVTM .section02 .top .keywordList>li{width:100%; background:#fff; border-radius:12px; padding:32px 32px; box-sizing:border-box;} #withVTM .section02 .top .keywordList>li .subj{font-size:20px; color:#F8844A; font-weight:bold;} #withVTM .section02 .top .keywordList>li .subs{font-size:18px; color:#444; margin-top:12px;>line-height:26px;} #withVTM .section02 .top .keywordList>li .subsList{width:100%; display:flex; gap:8px; margin-top:12px; padding-left:20px; box-sizing:border-box; flex-direction:column;} #withVTM .section02 .top .keywordList>li .subsList li{width:100%; font-size:18px; word-break:keep-all; list-style:disc; color:#444} #withVTM .section03.functionList{width:100%; padding:0px 10% 120px; box-sizing:border-box; background: linear-gradient(180deg, #F7F7F7 16.34%, #FFF 16.35%); display:flex; gap:40px; flex-wrap:wrap;} #withVTM .section03.functionList>li{width:calc(100% / 3 - 27px); background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.07); border-radius:12px; padding:20px 32px; box-sizing:border-box; display:flex; gap:32px; align-items:center;} #withVTM .section03.functionList>li .icon{width:72px;} #withVTM .section03.functionList>li .icon img{width:100%;} #withVTM .section03.functionList>li .txA{width:100%; display:flex; gap:12px; flex-direction:column;} #withVTM .section03.functionList>li .txA .numbering{width:fit-content; border-radius:50px; color:#fff; background:#F8844A; padding:8px 20px; font-size:16px;} #withVTM .section03.functionList>li .txA .numbering span{font-weight:bold; opacity:0.5} #withVTM .section03.functionList>li .txA .subj{font-size:24px; color:#222; font-weight:600;} #withVTM .section03.functionList>li .txA .subs{width:100%; padding-left:20px; box-sizing:border-box; display:flex; flex-direction: column; gap:8px;} #withVTM .section03.functionList>li .txA .subs>li{width:100%; list-style:disc; font-size:16px; color:#444; word-break:keep-all; line-height:24px;} #withVTM .section04{width:100%; padding:120px 10%; background:#222; box-sizing:border-box;} #withVTM .section04 .titleA{border:0;} #withVTM .section04 .chartList{width:100%; display:flex; gap:60px; margin-top:60px;} #withVTM .section04 .chartList dd{width:100%; display:flex; flex-direction:column; align-items: center;} #withVTM .section04 .chartList dd .subjA{width:192px;aspect-ratio: 1/1;margin:0 auto; position:relative; border:1px solid #444; background:#2a2a2a; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:100%;} #withVTM .section04 .chartList dd .subjA .icon{width:52px;} #withVTM .section04 .chartList dd .subjA .icon img{width:100%;} #withVTM .section04 .chartList dd .subjA .subj{text-align:center; font-size:18px; font-weight:700; color:#fff; word-break:keep-all;} #withVTM .section04 .chartList dd .subjA .subj br{display:block;} #withVTM .section04 .chartList dd .subjA:after{content:'';width:12px; height:12px; background:#F8844A; border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;} #withVTM .section04 .chartList dd .detailA{width:100%; height:100%; border:1px solid #444; background:#2a2a2a; position:relative; margin-top:60px; padding:52px 32px 32px; box-sizing:Border-box;} #withVTM .section04 .chartList dd .detailA .step{width:fit-content; margin:-76px auto 0; padding:12px 20px; background:#F8844A; color:#fff; font-size:16px; border-radius:50px;} #withVTM .section04 .chartList dd .detailA .step span{font-weight:bold; opacity:0.5;} #withVTM .section04 .chartList dd .detailA .detailList{width:100%; height:100%; display:flex; gap:12px; flex-direction:column; padding-left:20px; box-sizing:border-box; margin-top:28px;} #withVTM .section04 .chartList dd .detailA .detailList li{width:100%; font-size:18px; color:#ddd; list-style:disc; word-break:keep-all;} #withVTM .section04 .chartList dd .detailA:before{content:''; position:absolute; width:1px; height:40px; background:#F8844A; left:50%; transform:translateX(-50%); top:-64px;} #withVTM .section05{width:100%; padding:120px 10%; box-sizing:border-box;} #withVTM .section05 .titleA{border:0;} #withVTM .section05 .img{width:100%;} #withVTM .section05 .img img{width:100%;} #withVTM .section05 .impactList{width:100%; display:flex; gap:40px; margin-top:60px;} #withVTM .section05 .impactList dd{width:100%; border-radius:20px; background:#f7f7f7; padding:40px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column;} #withVTM .section05 .impactList dd .icon{width:72px;} #withVTM .section05 .impactList dd .icon img{width:100%;} #withVTM .section05 .impactList dd .subj{font-size:24px; font-weight:700; color:#222; word-break:keep-all; line-height:32px;} #withVTM .section05 .impactList dd .subsList{width:100%; display:flex; gap:12px; padding-left:20px; box-sizing:border-box; flex-direction: column;} #withVTM .section05 .impactList dd .subsList li{width:100%; font-size:18px; color:#444; list-style:disc; word-break:keep-all; line-height:26px;} /* #withVTM .section05 .impactList dd:last-child{background:#FEEBE2;} */ #withVTM .section06{width:100%; position:relative;} #withVTM .section06 .bg{width:100%;} #withVTM .section06 .bg img{width:100%;} #withVTM .section06 .cont{width:100%; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:40px; flex-direction:column; align-items:center;} #withVTM .section06 .cont .subs{width:100%;font-size:32px; color:#fff; text-align:Center; font-weight:600; line-height:44px;} #withVTM .section06 .cont .counsel_btn{background:#F8844A; border-radius:4px;} @media (max-width: 1439px) { #withVTM{width:100%;} #withVTM .section01{width:100%; padding:80px 5%; box-sizing:border-box;} #withVTM .section01 .titleA{border-bottom:0;} #withVTM .section01 .titleA .substance{font-size:20px; color:#444;} #withVTM .section01 .reList{width:100%; margin-top:40px; display:flex; gap:40px;} #withVTM .section01 .reList li{width:100%; border-radius:20px; background:#fff; gap:12px; box-shadow:5px 5px 25px rgba(0,0,0,0.05); padding:60px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;} #withVTM .section01 .reList li .num{font-size:52px; color:#222; font-weight:bold;} #withVTM .section01 .reList li .icon{width:auto; height:100px;} #withVTM .section01 .reList li .icon img{height:100%;} #withVTM .section01 .reList li .subs{text-align:center; font-size:16px; color:#444; word-break:keep-all;} #withVTM .section01 .reList li .subs br{display:none;} #withVTM .section01 .sloganA{width:100%; position:relative; margin-top:40px;} #withVTM .section01 .sloganA .slogan{width:100%; text-align:center; font-size:24px; color:#222; position:absolute; top:50%; transform:translateY(-50%);} #withVTM .section01 .sloganA .name{width:100%; text-align:center; font-size:120px; color:#F8844A; opacity:0.1;font-family:'poppins','pretendard'; font-weight:900; z-index:-1;} #withVTM .section02{width:100%; padding:80px 5%; box-sizing:border-box; background:#f7f7f7} #withVTM .section02 .top{width:100%; display:flex; align-items:end; justify-content:space-between;} #withVTM .section02 .top .mockupA{width:58%; display:flex; flex-direction:column; gap:-12px;} #withVTM .section02 .top .mockupA .subjA{width:100%; display:flex; flex-direction:column; gap:16px;} #withVTM .section02 .top .mockupA .subjA .titlebox{padding:12px 20px; background:#F8844A; color:#fff; font-size:20px; width:fit-content; border-radius:8px;} #withVTM .section02 .top .mockupA .subjA .titleLogo{width:220px;} #withVTM .section02 .top .mockupA .subjA .titleLogo img{width:100%;} #withVTM .section02 .top .mockupA .mockupImg{width:100%;} #withVTM .section02 .top .mockupA .mockupImg img{width:100%;} #withVTM .section02 .top .keywordList{width:35%; display:flex; flex-direction:column; gap:8px;} #withVTM .section02 .top .keywordList>li{width:100%; background:#fff; border-radius:12px; padding:32px 32px; box-sizing:border-box;} #withVTM .section02 .top .keywordList>li .subj{font-size:20px; color:#F8844A; font-weight:bold;} #withVTM .section02 .top .keywordList>li .subs{font-size:18px; color:#444; margin-top:12px;>line-height:26px;} #withVTM .section02 .top .keywordList>li .subsList{width:100%; display:flex; gap:8px; margin-top:12px; padding-left:20px; box-sizing:border-box; flex-direction:column;} #withVTM .section02 .top .keywordList>li .subsList li{width:100%; font-size:18px; word-break:keep-all; list-style:disc; color:#444} #withVTM .section03.functionList{width:100%; padding:0px 5% 80px; box-sizing:border-box; background: linear-gradient(180deg, #F7F7F7 16.34%, #FFF 16.35%); display:flex; gap:32px; flex-wrap:wrap;} #withVTM .section03.functionList>li{width:calc(100% / 2 - 16px); background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.07); border-radius:12px; padding:20px 20px; box-sizing:border-box; display:flex; gap:32px; align-items:center;} #withVTM .section03.functionList>li .icon{width:60px;} #withVTM .section03.functionList>li .icon img{width:100%;} #withVTM .section03.functionList>li .txA{width:100%; display:flex; gap:12px; flex-direction:column;} #withVTM .section03.functionList>li .txA .numbering{width:fit-content; border-radius:50px; color:#fff; background:#F8844A; padding:8px 20px; font-size:16px;} #withVTM .section03.functionList>li .txA .numbering span{font-weight:bold; opacity:0.5} #withVTM .section03.functionList>li .txA .subj{font-size:20px; color:#222; font-weight:600;} #withVTM .section03.functionList>li .txA .subs{font-size:16px; color:#444; word-break:keep-all;} #withVTM .section03.functionList>li .txA .subs br{display:none;} #withVTM .section04{width:100%; padding:80px 5%; background:#222; box-sizing:border-box;} #withVTM .section04 .titleA{border:0;} #withVTM .section04 .chartList{width:100%; display:flex; gap:32px; margin-top:40px;} #withVTM .section04 .chartList dd{width:100%; display:flex; flex-direction:column; align-items: center;} #withVTM .section04 .chartList dd .subjA{width:192px;aspect-ratio: 1/1;margin:0 auto; position:relative; border:1px solid #444; background:#2a2a2a; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:100%;} #withVTM .section04 .chartList dd .subjA .icon{width:52px;} #withVTM .section04 .chartList dd .subjA .icon img{width:100%;} #withVTM .section04 .chartList dd .subjA .subj{text-align:center; font-size:18px; font-weight:700; color:#fff; word-break:keep-all;} #withVTM .section04 .chartList dd .subjA .subj br{display:block;} #withVTM .section04 .chartList dd .subjA:after{content:'';width:12px; height:12px; background:#F8844A; border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;} #withVTM .section04 .chartList dd .detailA{width:100%; height:100%; border:1px solid #444; background:#2a2a2a; position:relative; margin-top:60px; padding:52px 12px 32px; box-sizing:Border-box;} #withVTM .section04 .chartList dd .detailA .step{width:fit-content; margin:-76px auto 0; padding:12px 20px; background:#F8844A; color:#fff; font-size:16px; border-radius:50px;} #withVTM .section04 .chartList dd .detailA .step span{font-weight:bold; opacity:0.5;} #withVTM .section04 .chartList dd .detailA .detailList{width:100%; height:100%; display:flex; gap:12px; flex-direction:column; padding-left:20px; box-sizing:border-box; margin-top:28px;} #withVTM .section04 .chartList dd .detailA .detailList li{width:100%; font-size:16px; color:#ddd; list-style:disc; word-break:keep-all;} #withVTM .section04 .chartList dd .detailA:before{content:''; position:absolute; width:1px; height:40px; background:#F8844A; left:50%; transform:translateX(-50%); top:-64px;} #withVTM .section05{width:100%; padding:80px 5%; box-sizing:border-box;} #withVTM .section05 .titleA{border:0;} #withVTM .section05 .img{ width:100%;} #withVTM .section05 .img img{width:100%;} #withVTM .section05 .impactList{width:100%; display:flex; gap:20px; margin-top:40px;} #withVTM .section05 .impactList dd{width:100%; border-radius:20px; background:#f7f7f7; padding:20px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column;} #withVTM .section05 .impactList dd .icon{width:72px;} #withVTM .section05 .impactList dd .icon img{width:100%;} #withVTM .section05 .impactList dd .subj{font-size:20px; font-weight:700; color:#222; word-break:keep-all; line-height:28px;} #withVTM .section05 .impactList dd .subsList{width:100%; display:flex; gap:12px; padding-left:20px; box-sizing:border-box; flex-direction: column;} #withVTM .section05 .impactList dd .subsList li{width:100%; font-size:16px; color:#444; list-style:disc; word-break:keep-all;} #withVTM .section06{width:100%; position:relative;} #withVTM .section06 .bg{width:100%;} #withVTM .section06 .bg img{width:100%;} #withVTM .section06 .cont{width:100%; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:40px; flex-direction:column; align-items:center;} #withVTM .section06 .cont .subs{width:100%;font-size:24px; color:#fff; text-align:Center; font-weight:600; line-height:32px;} #withVTM .section06 .cont .counsel_btn{background:#F8844A; border-radius:4px;} } @media (max-width: 1023px) { #withVTM{width:100%;} #withVTM .section01{width:100%; padding:80px 3%; box-sizing:border-box;} #withVTM .section01 .titleA{border-bottom:0;} #withVTM .section01 .titleA .substance{font-size:16px; color:#444;} #withVTM .section01 .reList{width:100%; margin-top:40px; display:flex; gap:20px;} #withVTM .section01 .reList li{width:100%; border-radius:20px; background:#fff; gap:12px; box-shadow:5px 5px 25px rgba(0,0,0,0.05); padding:60px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;} #withVTM .section01 .reList li .num{font-size:52px; color:#222; font-weight:bold;} #withVTM .section01 .reList li .icon{width:auto; height:100px;} #withVTM .section01 .reList li .icon img{height:100%;} #withVTM .section01 .reList li .subs{text-align:center; font-size:16px; color:#444; word-break:keep-all;} #withVTM .section01 .reList li .subs br{display:none;} #withVTM .section01 .sloganA{width:100%; position:relative; margin-top:40px;} #withVTM .section01 .sloganA .slogan{width:100%; text-align:center; font-size:20px; color:#222; position:absolute; top:50%; transform:translateY(-50%);} #withVTM .section01 .sloganA .name{width:100%; text-align:center; font-size:92px; color:#F8844A; opacity:0.1;font-family:'poppins','pretendard'; font-weight:900; z-index:-1;} #withVTM .section02{width:100%; padding:80px 3%; box-sizing:border-box; background:#f7f7f7} #withVTM .section02 .top{width:100%; display:flex; align-items:end; justify-content:space-between;} #withVTM .section02 .top .mockupA{width:58%; display:flex; flex-direction:column; gap:-12px;} #withVTM .section02 .top .mockupA .subjA{width:100%; display:flex; flex-direction:column; gap:16px;} #withVTM .section02 .top .mockupA .subjA .titlebox{padding:12px 20px; background:#F8844A; color:#fff; font-size:20px; width:fit-content; border-radius:8px;} #withVTM .section02 .top .mockupA .subjA .titleLogo{width:220px;} #withVTM .section02 .top .mockupA .subjA .titleLogo img{width:100%;} #withVTM .section02 .top .mockupA .mockupImg{width:100%;} #withVTM .section02 .top .mockupA .mockupImg img{width:100%;} #withVTM .section02 .top .keywordList{width:35%; display:flex; flex-direction:column; gap:8px;} #withVTM .section02 .top .keywordList>li{width:100%; background:#fff; border-radius:12px; padding:32px 32px; box-sizing:border-box;} #withVTM .section02 .top .keywordList>li .subj{font-size:20px; color:#F8844A; font-weight:bold;} #withVTM .section02 .top .keywordList>li .subs{font-size:16px; color:#444; margin-top:12px;>line-height:24px;} #withVTM .section02 .top .keywordList>li .subsList{width:100%; display:flex; gap:8px; margin-top:12px; padding-left:20px; box-sizing:border-box; flex-direction:column;} #withVTM .section02 .top .keywordList>li .subsList li{width:100%; font-size:16px; word-break:keep-all; list-style:disc; color:#444} #withVTM .section03.functionList{width:100%; padding:0px 3% 80px; box-sizing:border-box; background: linear-gradient(180deg, #F7F7F7 16.34%, #FFF 16.35%); display:flex; gap:20px; flex-wrap:wrap;} #withVTM .section03.functionList>li{width:calc(100% / 2 - 10px); flex-direction:column; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.07); border-radius:12px; padding:20px 20px; box-sizing:border-box; display:flex; gap:32px; align-items:start;} #withVTM .section03.functionList>li .icon{width:60px;} #withVTM .section03.functionList>li .icon img{width:100%;} #withVTM .section03.functionList>li .txA{width:100%; display:flex; gap:12px; flex-direction:column;} #withVTM .section03.functionList>li .txA .numbering{width:fit-content; border-radius:50px; color:#fff; background:#F8844A; padding:8px 12px; font-size:14px;} #withVTM .section03.functionList>li .txA .numbering span{font-weight:bold; opacity:0.5} #withVTM .section03.functionList>li .txA .subj{font-size:20px; color:#222; font-weight:600;} #withVTM .section03.functionList>li .txA .subs{font-size:16px; color:#444; word-break:keep-all;} #withVTM .section03.functionList>li .txA .subs br{display:none;} #withVTM .section04{width:100%; padding:80px 5%; background:#222; box-sizing:border-box;} #withVTM .section04 .titleA{border:0;} #withVTM .section04 .chartList{width:100%; display:flex; flex-wrap:wrap; gap:20px; margin-top:40px;} #withVTM .section04 .chartList dd{width:calc(100% / 2 - 10px); display:flex; flex-direction:column; align-items: center;} #withVTM .section04 .chartList dd .subjA{width:192px;aspect-ratio: 1/1;margin:0 auto; position:relative; border:1px solid #444; background:#2a2a2a; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:100%;} #withVTM .section04 .chartList dd .subjA .icon{width:52px;} #withVTM .section04 .chartList dd .subjA .icon img{width:100%;} #withVTM .section04 .chartList dd .subjA .subj{text-align:center; font-size:18px; font-weight:700; color:#fff; word-break:keep-all;} #withVTM .section04 .chartList dd .subjA .subj br{display:block;} #withVTM .section04 .chartList dd .subjA:after{content:'';width:12px; height:12px; background:#F8844A; border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;} #withVTM .section04 .chartList dd .detailA{width:100%; height:100%; border:1px solid #444; background:#2a2a2a; position:relative; margin-top:60px; padding:52px 12px 32px; box-sizing:Border-box;} #withVTM .section04 .chartList dd .detailA .step{width:fit-content; margin:-76px auto 0; padding:12px 20px; background:#F8844A; color:#fff; font-size:16px; border-radius:50px;} #withVTM .section04 .chartList dd .detailA .step span{font-weight:bold; opacity:0.5;} #withVTM .section04 .chartList dd .detailA .detailList{width:100%; height:100%; display:flex; gap:12px; flex-direction:column; padding-left:20px; box-sizing:border-box; margin-top:28px;} #withVTM .section04 .chartList dd .detailA .detailList li{width:100%; font-size:16px; color:#ddd; list-style:disc; word-break:keep-all;} #withVTM .section04 .chartList dd .detailA:before{content:''; position:absolute; width:1px; height:40px; background:#F8844A; left:50%; transform:translateX(-50%); top:-64px;} #withVTM .section05{width:100%; padding:80px 3%; box-sizing:border-box;} #withVTM .section05 .titleA{border:0;} #withVTM .section05 .img{ width:100%;} #withVTM .section05 .img img{width:100%;} #withVTM .section05 .impactList{width:100%; display:flex; gap:20px; margin-top:40px; flex-wrap:wrap;} #withVTM .section05 .impactList dd{width:calc(100% / 2 - 10px); border-radius:20px; background:#f7f7f7; padding:20px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column;} #withVTM .section05 .impactList dd .icon{width:72px;} #withVTM .section05 .impactList dd .icon img{width:100%;} #withVTM .section05 .impactList dd .subj{font-size:20px; font-weight:700; color:#222; word-break:keep-all;} #withVTM .section05 .impactList dd .subsList{width:100%; display:flex; gap:12px; padding-left:20px; box-sizing:border-box; flex-direction: column;} #withVTM .section05 .impactList dd .subsList li{width:100%; font-size:16px; color:#444; list-style:disc; word-break:keep-all;} #withVTM .section06{width:100%; position:relative;} #withVTM .section06 .bg{width:100%;} #withVTM .section06 .bg img{width:100%;} #withVTM .section06 .cont{width:100%; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:40px; flex-direction:column; align-items:center;} #withVTM .section06 .cont .subs{width:100%;font-size:24px; color:#fff; text-align:Center; font-weight:600; line-height:32px;} #withVTM .section06 .cont .counsel_btn{background:#F8844A; border-radius:4px;} } @media (max-width: 767px) { #withVTM{width:100%;} #withVTM .section01{width:100%; padding:80px 3%; box-sizing:border-box;} #withVTM .section01 .titleA{border-bottom:0;} #withVTM .section01 .titleA .substance{font-size:14px; color:#444;} #withVTM .section01 .reList{width:100%; margin-top:40px; display:flex; flex-direction:column; gap:16px;} #withVTM .section01 .reList li{width:100%; border-radius:20px; background:#fff; gap:12px; box-shadow:5px 5px 25px rgba(0,0,0,0.05); padding:32px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;} #withVTM .section01 .reList li .num{font-size:48px; color:#222; font-weight:bold;} #withVTM .section01 .reList li .icon{width:auto; height:100px;} #withVTM .section01 .reList li .icon img{height:100%;} #withVTM .section01 .reList li .subs{text-align:center; font-size:16px; color:#444; word-break:keep-all;} #withVTM .section01 .reList li .subs br{display:none;} #withVTM .section01 .sloganA{width:100%; position:relative; margin-top:40px;} #withVTM .section01 .sloganA .slogan{width:100%; text-align:center; font-size:16px; color:#222; position:absolute; top:50%; transform:translateY(-50%);} #withVTM .section01 .sloganA .name{width:100%; text-align:center; font-size:40px; color:#F8844A; opacity:0.1;font-family:'poppins','pretendard'; font-weight:900; z-index:-1;} #withVTM .section02{width:100%; padding:80px 3%; box-sizing:border-box; background:#f7f7f7} #withVTM .section02 .top{width:100%; display:flex; align-items:center; justify-content:space-between; flex-direction:column;} #withVTM .section02 .top .mockupA{width:100%; display:flex; flex-direction:column; gap:-12px;} #withVTM .section02 .top .mockupA .subjA{width:100%; display:flex; flex-direction:column; gap:16px;} #withVTM .section02 .top .mockupA .subjA .titlebox{padding:12px 20px; background:#F8844A; color:#fff; font-size:16px; width:fit-content; border-radius:8px;} #withVTM .section02 .top .mockupA .subjA .titleLogo{width:200px;} #withVTM .section02 .top .mockupA .subjA .titleLogo img{width:100%;} #withVTM .section02 .top .mockupA .mockupImg{width:100%; margin-top:20px;} #withVTM .section02 .top .mockupA .mockupImg img{width:100%;} #withVTM .section02 .top .keywordList{width:100%; display:flex; flex-direction:column; gap:8px; margin-top:20px;} /* #withVTM .section02 .top .keywordList li{width:100%; background:#fff; border-radius:12px; padding:20px 8px; box-sizing:border-box; font-weight:bold; color:#222; font-size:16px; text-align:Center; word-break:keep-all;} */ #withVTM .section02 .top .keywordList>li{width:100%; background:#fff; border-radius:12px; padding:32px 32px; box-sizing:border-box;} #withVTM .section02 .top .keywordList>li .subj{font-size:18px; color:#F8844A; font-weight:bold;} #withVTM .section02 .top .keywordList>li .subs{font-size:14px; color:#444; margin-top:12px;>line-height:26px;} #withVTM .section02 .top .keywordList>li .subsList{width:100%; display:flex; gap:4px; margin-top:12px; padding-left:20px; box-sizing:border-box; flex-direction:column;} #withVTM .section02 .top .keywordList>li .subsList li{width:100%; font-size:14px; word-break:keep-all; list-style:disc; color:#444} #withVTM .section03.functionList{width:100%; padding:0px 3% 80px; box-sizing:border-box; background: linear-gradient(180deg, #F7F7F7 16.34%, #FFF 16.35%); display:flex; gap:20px; flex-wrap:wrap;} #withVTM .section03.functionList>li{width:100%; flex-direction:column; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.07); border-radius:12px; padding:20px 32px; box-sizing:border-box; display:flex; gap:32px; align-items:start;} #withVTM .section03.functionList>li .icon{width:60px;} #withVTM .section03.functionList>li .icon img{width:100%;} #withVTM .section03.functionList>li .txA{width:100%; display:flex; gap:12px; flex-direction:column;} #withVTM .section03.functionList>li .txA .numbering{width:fit-content; border-radius:50px; color:#fff; background:#F8844A; padding:8px 12px; font-size:14px;} #withVTM .section03.functionList>li .txA .numbering span{font-weight:bold; opacity:0.5} #withVTM .section03.functionList>li .txA .subj{font-size:18px; color:#222; font-weight:600;} #withVTM .section03.functionList>li .txA .subs{font-size:14px; color:#444; word-break:keep-all;} #withVTM .section03.functionList>li .txA .subs br{display:none;} #withVTM .section04{width:100%; padding:80px 5%; background:#222; box-sizing:border-box;} #withVTM .section04 .titleA{border:0;} #withVTM .section04 .chartList{width:100%; display:flex; flex-wrap:wrap; gap:20px; margin-top:40px;} #withVTM .section04 .chartList dd{width:100%; display:flex; flex-direction:column; align-items: center;} #withVTM .section04 .chartList dd .subjA{width:192px;aspect-ratio: 1/1;margin:0 auto; position:relative; border:1px solid #444; background:#2a2a2a; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:100%;} #withVTM .section04 .chartList dd .subjA .icon{width:52px;} #withVTM .section04 .chartList dd .subjA .icon img{width:100%;} #withVTM .section04 .chartList dd .subjA .subj{text-align:center; font-size:18px; font-weight:700; color:#fff; word-break:keep-all;} #withVTM .section04 .chartList dd .subjA .subj br{display:block;} #withVTM .section04 .chartList dd .subjA:after{content:'';width:12px; height:12px; background:#F8844A; border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;} #withVTM .section04 .chartList dd .detailA{width:100%; height:100%; border:1px solid #444; background:#2a2a2a; position:relative; margin-top:60px; padding:52px 12px 32px; box-sizing:Border-box;} #withVTM .section04 .chartList dd .detailA .step{width:fit-content; margin:-76px auto 0; padding:12px 20px; background:#F8844A; color:#fff; font-size:16px; border-radius:50px;} #withVTM .section04 .chartList dd .detailA .step span{font-weight:bold; opacity:0.5;} #withVTM .section04 .chartList dd .detailA .detailList{width:100%; height:100%; display:flex; gap:12px; flex-direction:column; padding-left:20px; box-sizing:border-box; margin-top:28px;} #withVTM .section04 .chartList dd .detailA .detailList li{width:100%; font-size:16px; color:#ddd; list-style:disc; word-break:keep-all;} #withVTM .section04 .chartList dd .detailA:before{content:''; position:absolute; width:1px; height:40px; background:#F8844A; left:50%; transform:translateX(-50%); top:-64px;} #withVTM .section05{width:100%; padding:80px 3%; box-sizing:border-box;} #withVTM .section05 .titleA{border:0;} #withVTM .section05 .img{ width:100%;} #withVTM .section05 .img img{width:100%;} #withVTM .section05 .impactList{width:100%; display:flex; gap:20px; margin-top:40px; flex-direction: column;} #withVTM .section05 .impactList dd{width:100%; border-radius:20px; background:#f7f7f7; padding:20px; box-sizing:border-box; display:flex; gap:20px; flex-direction:column;} #withVTM .section05 .impactList dd .icon{width:72px;} #withVTM .section05 .impactList dd .icon img{width:100%;} #withVTM .section05 .impactList dd .subj{font-size:18px; font-weight:700; color:#222; word-break:keep-all; line-height:26px;} #withVTM .section05 .impactList dd .subsList{width:100%; display:flex; gap:8px; padding-left:20px; box-sizing:border-box; flex-direction: column;} #withVTM .section05 .impactList dd .subsList li{width:100%; font-size:14px; color:#444; list-style:disc; word-break:keep-all; line-height:22px;} #withVTM .section06{width:100%; position:relative;} #withVTM .section06 .bg{width:100%; overflow:hidden;} #withVTM .section06 .bg img{width:320%; position:Relative; left:50%; transform:translateX(-50%);} #withVTM .section06 .cont{width:100%; position:absolute; z-index:1; top:50%; transform:translateY(-50%); display:flex; gap:12px; flex-direction:column; align-items:center;} #withVTM .section06 .cont .subs{width:100%; font-size:16px; word-break:keep-all; color:#fff; text-align:Center; font-weight:600; line-height:24px;} #withVTM .section06 .cont .counsel_btn{background:#F8844A; border-radius:4px;} } #withREX{width:100%;} #withREX .section01{width:100%; position:relative; padding:120px 10%; box-sizing:border-box; display:flex; justify-content:space-between; align-items:start;} #withREX .section01 .titleA{width:60%; position:sticky; top:12%;} #withREX .section01 .titleA .txA{gap:32px;} #withREX .section01 .titleA .title{color:#F8844A;} #withREX .section01 .titleA .title br{display:block;} #withREX .section01 .titleA .title span{font-weight:normal; color:#444; font-size:24px; display:inline-block; margin-bottom:8px;} #withREX .section01 .titleA .substance{font-size:24px; color:#444; line-height:32px; word-break:keep-all; color:#444} #withREX .section01 .titleA .substance br{display:block;} #withREX .section01 .exList{width:40%; display:flex; flex-direction:column; gap:32px;} #withREX .section01 .exList li{width:100%; border-radius:20px; overflow:hidden; padding:100px 20px 28px; box-sizing:border-box; display:flex; flex-direction:column; align-items: center;} #withREX .section01 .exList li:nth-child(1){background:url(/a/images/product/withREX/exThum01.png) center center no-repeat;} #withREX .section01 .exList li:nth-child(2){background:url(/a/images/product/withREX/exThum02.png) center center no-repeat;} #withREX .section01 .exList li:nth-child(3){background:url(/a/images/product/withREX/exThum03.png) center center no-repeat;} #withREX .section01 .exList li .subject{text-align:center; color:#fff; font-size:24px; font-weight:bold; word-break:keep-all;} #withREX .section01 .exList li .num{text-align:center; color:#fff; font-size:60px; font-weight:bold; margin-top:20px;} #withREX .section01 .exList li .description{text-align:center; color:#fff; font-size:16px; word-break:keep-all; margin-top:8px; line-height:24px;} #withREX .section01 .exList li .description span{display:block; font-weight:bold; color:#F8844A} #withREX .section01 .exList li:nth-child(3) .description{margin-top:20px;} #withREX .section02{width:100%; display:flex; padding:120px 10% 120px 10%; box-sizing:border-box; justify-content:space-between; align-items:end; background: linear-gradient(180deg, rgba(1, 1, 1, 0.26) 0%, rgba(1, 1, 1, 0.72) 100%), url(/a/images/product/withREX/section02Bg.png) no-repeat center bottom; background-size:100%;} #withREX .section02 .simbol{width:79px;} #withREX .section02 .simbol img{width:100%;} #withREX .section02 .subject{width:100%; font-size:40px; color:#fff; font-weight:bold; margin-top:32px;} #withREX .section02 .subject span{width:100%; font-size:36px; font-weight:normal; display:block;} #withREX .section02 .counsel_btn{margin-top:60px; background:#F8844A; border-radius:8px;} #withREX .section02 .right_slogan{text-align:right; color:#fff; font-size:32px; font-weight:600;} #withREX .section02 .right_slogan br{display:block;} /* ===== withREX Section03 ~ Section07 ===== */ /* Section03 - 제품 소개 (어두운 배경) */ #withREX .section03Wrap{width:100%; position:relative; background:#010101;} #withREX .section03{width:100%; height:100vh; display:flex; padding:0 10%; box-sizing:border-box; justify-content:space-between; align-items:center; background:#010101; position:sticky; top:0;} #withREX .section03 .titleA{width:45%; border:0; flex-shrink:0;} #withREX .section03 .titleA .txA{display:flex; flex-direction:column; gap:20px;} #withREX .section03 .subTitle{color:#9f9f9f; font-size:24px;} #withREX .section03 .title{color:#fff; font-size:40px; font-weight:bold;} #withREX .section03 .subs{color:#ddd; font-size:24px; word-break:keep-all; line-height:34px;} #withREX .section03 .productThumbWrap{width:52%; flex-shrink:0; overflow:hidden;} #withREX .section03 .productThumb{display:flex; gap:12px; align-items:center; width:270%; will-change:transform;} #withREX .section03 .productThumb li{flex:1; min-width:0; border-radius:12px; overflow:hidden;} #withREX .section03 .productThumb li img{width:100%; display:block;} /* Section04 - 서비스 카드 + 주요기능 */ #withREX .section04{width:100%; padding:120px 10%; box-sizing:border-box;background:url(/a/images/product/withREX/section04Bg.png)no-repeat bottom; background-color:#101010; } /* 서비스 카드 - 흰색 배경 */ #withREX .section04 .service{width:100%; display:flex; gap:24px;} #withREX .section04 .service li{flex:1; background:#fff; border:0; border-radius:16px; padding:40px 12px 0px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:20px; align-items:center;} #withREX .section04 .service li .subj{font-size:20px; font-weight:600; color:#222; word-break:keep-all; line-height:32px; text-align:center; width:100%;} #withREX .section04 .service li .icon{width:153px; height:134px; display:flex; align-items:center; justify-content:center;} #withREX .section04 .service li .icon img{width:100%; height:100%; object-fit:contain;} #withREX .section04 .service li .description{font-size:16px; color:#222; text-align:center; line-height:24px; word-break:keep-all; flex:1; width:100%;} #withREX .section04 .service li .comment{width:100%; font-size:15px; color:#222; padding:16px 0px; text-align:center; border-top:1px solid #e5e5e5; margin-top:auto; word-break:keep-all; line-height:22px; } #withREX .section04 .service li .comment span{color:#F8844A; font-weight:600; margin-bottom:0; flex-shrink:0; display:inline-block; margin-right:8px} /* Key Features 영역 */ #withREX .section04 .features{width:100%; margin-top:120px;} #withREX .section04 .features .titleA{flex-direction:column; justify-content: center; align-items:center;gap:8px;} #withREX .section04 .features .titleA .subTitle{color:#999} /* Features 2x2 그리드 */ #withREX .section04 .featuresList{width:100%; margin-top:32px; display:flex; flex-wrap:wrap; gap:20px;} #withREX .section04 .featuresList dd{width:calc(50% - 10px);display:flex; gap:32px; align-items:center; background:rgba(255,255,255,0.1); border:0; border-radius:16px; padding:32px; box-sizing:border-box; } #withREX .section04 .featuresList dd .icon{width:160px; height:160px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden;} #withREX .section04 .featuresList dd .icon img{width:100%;} #withREX .section04 .featuresList dd .txA{flex:1; display:flex; flex-direction:column; gap:16px;} #withREX .section04 .featuresList dd .subjA{display:flex; flex-direction:column; gap:12px;} #withREX .section04 .featuresList dd .numbering{font-size:14px; color:#fff; font-weight:400; background:#F8844A; display:inline-block; padding:8px 16px; border-radius:20px; width:fit-content;} #withREX .section04 .featuresList dd .numbering span{font-weight:bold; opacity:1;} #withREX .section04 .featuresList dd .subj{font-size:20px; color:#fff; font-weight:bold; word-break:keep-all; line-height:32px;} #withREX .section04 .featuresList dd .detailList{width:100%; display:flex; flex-direction:column; gap:8px; padding-left:20px; box-sizing:border-box;} #withREX .section04 .featuresList dd .detailList li{font-size:16px; color:#ddd; list-style:disc; word-break:keep-all; line-height:28px;} /* Section05 - 프로세스 */ #withREX .section05{width:100%; padding:120px 10% 0px; box-sizing:border-box; background:#fff;} #withREX .section05 .titleA .txA{text-align:Center; width:100%;} #withREX .section05 .processList{width:100%; display:flex; gap:24px; margin-top:60px;} #withREX .section05 .processList dd{flex:1; display:flex; flex-direction:column; gap:0;} #withREX .section05 .processList dd .num{position:relative; left:50%; transform:translateX(-50%); font-size:18px; color:#fff; font-weight:600; background:#F8844A; padding:8px 16px; border-radius:20px; width:fit-content; display:inline-flex; gap:4px; align-items:center; border-bottom:0;} #withREX .section05 .processList dd .num span{font-weight:700; color:#fff;} #withREX .section05 .processList dd .num span:last-child{color:#fff; margin-left:4px;} #withREX .section05 .processList dd .contentsBox{width:100%; background:#f7f7f7; padding:52px 20px 32px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:32px; flex:1; margin-top:-16px;} #withREX .section05 .processList dd .contentsBox .subj{font-size:24px; font-weight:bold; color:#222; text-align:center;} #withREX .section05 .processList dd .contentsBox .icon{height:60px; margin:0 auto;} #withREX .section05 .processList dd .contentsBox .icon img{height:100%;} #withREX .section05 .processList dd .contentsBox .subsList{width:100%; display:flex; flex-direction:column; gap:8px; padding-left:20px; box-sizing:border-box;} #withREX .section05 .processList dd .contentsBox .subsList li{font-size:18px; color:#444; list-style:disc; word-break:keep-all; line-height:28px;} /* Section06 - 기대 효과 */ #withREX .section06{width:100%; padding:120px 10%; box-sizing:border-box; background:#fff;} #withREX .section06 .titleA .txA{width:100%; text-align:center;} #withREX .section06 .imgBox{width:100%; margin-top:32px; padding:160px 40px; box-sizing:border-box; border-radius:0; background:url(/a/images/product/withREX/impactBg.png); border:0; text-align:center; font-size:36px; color:#fff; line-height:50px; word-break:keep-all; font-weight:700; background-size:100%;} #withREX .section06 .imgBox br{display:block;} #withREX .section06 .impactList{width:100%; display:flex; gap:24px; margin-top:48px;} #withREX .section06 .impactList dd{flex:1; background:#f7f7f7; border:0; border-radius:0; padding:40px; box-sizing:border-box; display:flex; flex-direction:column; gap:24px; align-items:center;} #withREX .section06 .impactList dd .icon{width:88px;} #withREX .section06 .impactList dd .icon img{width:100%;} #withREX .section06 .impactList dd .subjA{display:flex; flex-direction:column; gap:8px; text-align:center;} #withREX .section06 .impactList dd .subj{font-size:24px; font-weight:bold; color:#222; word-break:keep-all; line-height:32px;} #withREX .section06 .impactList dd .subs{font-size:16px; color:#999; font-weight:400;} #withREX .section06 .impactList dd .detailList{width:100%; display:flex; flex-direction:column; gap:8px; padding-left:20px; box-sizing:border-box;} #withREX .section06 .impactList dd .detailList li{font-size:18px; color:#444; list-style:disc; word-break:keep-all; line-height:28px;} /* Section07 - CTA (문의하기) */ #withREX .section07{width:100%; position:relative; overflow:hidden;} #withREX .section07 .bg{width:100%;} #withREX .section07 .bg img{width:100%; display:block;} #withREX .section07 .cont{width:100%; position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; padding:0 10%; box-sizing:border-box;} #withREX .section07 .cont .simbol{width:79px;} #withREX .section07 .cont .simbol img{width:100%;} #withREX .section07 .cont .subs{font-size:36px; color:#fff; font-weight:400; line-height:50px; word-break:keep-all;} #withREX .section07 .cont .subs br{display:block;} #withREX .section07 .cont .counsel_btn{background:#F8844A; border-radius:8px;} /* ===== withREX 반응형 ===== */ @media (max-width: 1439px) { #withREX .section01{padding:80px 5%;} #withREX .section01 .titleA{width:55%;} #withREX .section01 .titleA .txA{gap:24px;} #withREX .section01 .titleA .title span{font-size:20px;} #withREX .section01 .titleA .substance{font-size:20px; line-height:28px;} #withREX .section01 .exList{width:42%; gap:24px;} #withREX .section01 .exList li{padding:80px 16px 24px;} #withREX .section01 .exList li .subject{font-size:20px;} #withREX .section01 .exList li .num{font-size:48px;} #withREX .section01 .exList li .description{font-size:14px; line-height:22px;} #withREX .section02{padding:80px 5%;} #withREX .section02 .simbol{width:60px;} #withREX .section02 .subject{font-size:36px; margin-top:24px;} #withREX .section02 .subject span{font-size:28px;} #withREX .section02 .counsel_btn{margin-top:40px;} #withREX .section02 .right_slogan{font-size:28px;} #withREX .section03{padding:0 5%;} #withREX .section03 .subTitle{font-size:20px;} #withREX .section03 .title{font-size:36px;} #withREX .section03 .subs{font-size:20px; line-height:30px;} #withREX .section04{padding:80px 5%;} #withREX .section04 .service{gap:16px;} #withREX .section04 .service li{padding:32px 12px 0px; gap:16px;} #withREX .section04 .service li .subj{font-size:18px; line-height:26px;} #withREX .section04 .service li .icon{width:120px; height:105px;} #withREX .section04 .service li .description{font-size:14px; line-height:22px;} #withREX .section04 .service li .comment{font-size:13px;} #withREX .section04 .features{margin-top:80px;} #withREX .section04 .featuresList{gap:16px;} #withREX .section04 .featuresList dd{padding:24px; gap:24px;} #withREX .section04 .featuresList dd .icon{width:120px; height:120px;} #withREX .section04 .featuresList dd .subj{font-size:18px; line-height:26px;} #withREX .section04 .featuresList dd .detailList li{font-size:14px; line-height:24px;} #withREX .section05{padding:80px 5% 0px;} #withREX .section05 .processList{gap:16px; margin-top:40px;} #withREX .section05 .processList dd .num{font-size:16px; padding:6px 14px;} #withREX .section05 .processList dd .contentsBox{padding:44px 16px 28px;} #withREX .section05 .processList dd .contentsBox .subj{font-size:20px;} #withREX .section05 .processList dd .contentsBox .subsList li{font-size:16px; line-height:26px;} #withREX .section06{padding:80px 5%;} #withREX .section06 .imgBox{padding:120px 32px; font-size:32px; line-height:44px;} #withREX .section06 .impactList{gap:16px;} #withREX .section06 .impactList dd{padding:32px;} #withREX .section06 .impactList dd .icon{width:72px;} #withREX .section06 .impactList dd .subj{font-size:20px; line-height:28px;} #withREX .section06 .impactList dd .detailList li{font-size:16px; line-height:26px;} #withREX .section07 .cont{gap:24px; padding:0 5%;} #withREX .section07 .cont .simbol{width:64px;} #withREX .section07 .cont .subs{font-size:28px; line-height:40px;} } @media (max-width: 1023px) { #withREX .section01{padding:80px 3%; flex-direction:column; gap:40px;} #withREX .section01 .titleA{width:100%; position:relative; top:auto;} #withREX .section01 .titleA .txA{gap:20px;} #withREX .section01 .titleA .title span{font-size:16px;} #withREX .section01 .titleA .substance{font-size:18px; line-height:26px;} #withREX .section01 .exList{width:100%; flex-direction:row; gap:16px;} #withREX .section01 .exList li{padding:60px 16px 20px; flex:1;} #withREX .section01 .exList li .subject{font-size:18px;} #withREX .section01 .exList li .num{font-size:40px; margin-top:12px;} #withREX .section01 .exList li .description{font-size:13px; line-height:20px;} #withREX .section02{padding:80px 3%; flex-direction:column; align-items:start; gap:40px;} #withREX .section02 .simbol{width:52px;} #withREX .section02 .subject{font-size:28px; margin-top:20px;} #withREX .section02 .subject span{font-size:24px;} #withREX .section02 .counsel_btn{margin-top:32px;} #withREX .section02 .right_slogan{font-size:24px; text-align:left;} #withREX .section02 .right_slogan br{display:none;} #withREX .section03{padding:0 3%;} #withREX .section03 .titleA{width:40%;} #withREX .section03 .subTitle{font-size:16px;} #withREX .section03 .title{font-size:28px;} #withREX .section03 .subs{font-size:16px; line-height:26px;} #withREX .section03 .productThumbWrap{width:57%;} #withREX .section04{padding:80px 3%;} #withREX .section04 .service{gap:12px;} #withREX .section04 .service li{padding:24px 10px 0px; gap:12px; border-radius:12px;} #withREX .section04 .service li .subj{font-size:16px; line-height:24px;} #withREX .section04 .service li .icon{width:100px; height:88px;} #withREX .section04 .service li .description{font-size:13px; line-height:20px;} #withREX .section04 .service li .comment{font-size:12px; line-height:20px;} #withREX .section04 .features{margin-top:60px;} #withREX .section04 .featuresList{gap:12px;} #withREX .section04 .featuresList dd{padding:20px; gap:20px;} #withREX .section04 .featuresList dd .icon{width:100px; height:100px;} #withREX .section04 .featuresList dd .numbering{font-size:12px; padding:6px 12px;} #withREX .section04 .featuresList dd .subj{font-size:16px; line-height:24px;} #withREX .section04 .featuresList dd .detailList li{font-size:13px; line-height:22px;} #withREX .section05{padding:80px 3% 0px;} #withREX .section05 .processList{gap:12px; margin-top:32px;} #withREX .section05 .processList dd .num{font-size:14px; padding:6px 12px;} #withREX .section05 .processList dd .contentsBox{padding:40px 14px 24px; gap:24px;} #withREX .section05 .processList dd .contentsBox .subj{font-size:18px;} #withREX .section05 .processList dd .contentsBox .icon{height:48px;} #withREX .section05 .processList dd .contentsBox .subsList li{font-size:14px; line-height:22px;} #withREX .section06{padding:80px 3%;} #withREX .section06 .imgBox{padding:80px 24px; font-size:24px; line-height:36px;} #withREX .section06 .impactList{gap:12px;} #withREX .section06 .impactList dd{padding:24px;} #withREX .section06 .impactList dd .icon{width:60px;} #withREX .section06 .impactList dd .subj{font-size:18px; line-height:26px;} #withREX .section06 .impactList dd .subs{font-size:14px;} #withREX .section06 .impactList dd .detailList li{font-size:14px; line-height:22px;} #withREX .section07 .cont{gap:20px; padding:0 3%;} #withREX .section07 .cont .simbol{width:52px;} #withREX .section07 .cont .subs{font-size:24px; line-height:36px;} } @media (max-width: 767px) { #withREX .section01{padding:60px 3%; flex-direction:column; gap:32px;} #withREX .section01 .titleA{width:100%; position:relative; top:auto;} #withREX .section01 .titleA .txA{gap:16px;} #withREX .section01 .titleA .title{text-align:center;} #withREX .section01 .titleA .title span{font-size:14px;} #withREX .section01 .titleA .title br{display:none;} #withREX .section01 .titleA .substance{font-size:14px; line-height:22px; text-align:center;} #withREX .section01 .titleA .substance br{display:none;} #withREX .section01 .exList{width:100%; flex-direction:column; gap:16px;} #withREX .section01 .exList li{padding:48px 16px 20px; flex:auto;} #withREX .section01 .exList li .subject{font-size:16px;} #withREX .section01 .exList li .num{font-size:36px; margin-top:8px;} #withREX .section01 .exList li .description{font-size:13px; line-height:20px;} #withREX .section02{padding:60px 3%; flex-direction:column; align-items:center; gap:32px; text-align:center;} #withREX .section02 .simbol{width:44px; margin:0 auto;} #withREX .section02 .subject{font-size:24px; margin-top:16px;} #withREX .section02 .subject span{font-size:20px;} #withREX .section02 .counsel_btn{margin-top:24px;} #withREX .section02 .right_slogan{font-size:18px; text-align:center;} #withREX .section02 .right_slogan br{display:none;} #withREX .section03Wrap{height:auto !important;} #withREX .section03{height:auto; padding:60px 3%; flex-direction:column; gap:32px; position:relative; top:auto;} #withREX .section03 .titleA{width:100%; text-align:center;} #withREX .section03 .subTitle{font-size:14px;} #withREX .section03 .title{font-size:24px;} #withREX .section03 .subs{font-size:14px; line-height:22px; text-align:center;} #withREX .section03 .productThumbWrap{width:100%; overflow:visible;} #withREX .section03 .productThumb{width:100%; gap:8px; flex-wrap:wrap; transform:none !important;} #withREX .section03 .productThumb li{flex:none; width:calc(100% / 3 - 6px);} #withREX .section04{padding:60px 3%;} #withREX .section04 .service{flex-direction:column; gap:12px;} #withREX .section04 .service li{flex:auto; padding:24px 16px 0px 16px; flex-direction:column; gap:16px; align-items:center;} #withREX .section04 .service li .subj{font-size:16px; line-height:22px; text-align:center;} #withREX .section04 .service li .icon{width:80px; height:70px; flex-shrink:0;} #withREX .section04 .service li .description{font-size:13px; line-height:20px; text-align:center;} #withREX .section04 .service li .comment{font-size:12px; text-align:center;} #withREX .section04 .features{margin-top:40px;} #withREX .section04 .featuresList{flex-direction:column; gap:12px;} #withREX .section04 .featuresList dd{width:100%; padding:20px; gap:16px;} #withREX .section04 .featuresList dd .icon{width:80px; height:80px;} #withREX .section04 .featuresList dd .numbering{font-size:12px; padding:6px 10px;} #withREX .section04 .featuresList dd .subj{font-size:16px; line-height:22px;} #withREX .section04 .featuresList dd .detailList li{font-size:13px; line-height:20px;} #withREX .section05{padding:60px 3% 0px;} #withREX .section05 .processList{flex-direction:column; gap:16px; margin-top:24px;} #withREX .section05 .processList dd{flex:auto;} #withREX .section05 .processList dd .num{font-size:14px; padding:6px 12px; left:0; transform:none;} #withREX .section05 .processList dd .contentsBox{padding:32px 16px 24px; gap:20px; margin-top:-16px;} #withREX .section05 .processList dd .contentsBox .subj{font-size:16px; text-align:left;} #withREX .section05 .processList dd .contentsBox .icon{height:44px; margin:0;} #withREX .section05 .processList dd .contentsBox .subsList li{font-size:14px; line-height:22px;} #withREX .section06{padding:60px 3%;} #withREX .section06 .imgBox{padding:80px 16px; font-size:18px; line-height:28px; margin-top:24px;} #withREX .section06 .impactList{flex-direction:column; gap:12px;} #withREX .section06 .impactList dd{flex:auto; padding:24px; align-items:start;} #withREX .section06 .impactList dd .subjA{text-align:left;} #withREX .section06 .impactList dd .icon{width:52px;} #withREX .section06 .impactList dd .subj{font-size:16px; line-height:24px;} #withREX .section06 .impactList dd .subs{font-size:13px;} #withREX .section06 .impactList dd .detailList li{font-size:14px; line-height:22px;} #withREX .section07 .cont{gap:16px; padding:0 3%; overflow:hidden;} #withREX .section07 .cont .simbol{width:44px;} #withREX .section07 .cont .subs{font-size:18px; line-height:28px;} #withREX .section07 .cont .subs br{display:none;} #withREX .section07 .bg{width:220%; position:relative; left:50%; transform:translateX(-50%);} } @media (max-width: 374px) { #withREX .section01{padding:60px 3%;} #withREX .section01 .exList li{padding:40px 12px 16px;} #withREX .section01 .exList li .subject{font-size:14px;} #withREX .section01 .exList li .num{font-size:32px;} #withREX .section01 .exList li .description{font-size:12px;} #withREX .section02 .subject{font-size:20px;} #withREX .section02 .subject span{font-size:18px;} #withREX .section02 .right_slogan{font-size:16px;} #withREX .section03 .subTitle{font-size:13px;} #withREX .section03 .title{font-size:20px;} #withREX .section03 .subs{font-size:13px; line-height:20px;} #withREX .section03 .productThumb li{width:calc(100% / 3 - 4px);} #withREX .section03 .productThumb{gap:4px;} #withREX .section04 .service li .subj{font-size:14px;} #withREX .section04 .service li .icon{width:60px; height:52px;} #withREX .section04 .service li .description{font-size:12px;} #withREX .section04 .featuresList dd .icon{width:60px; height:60px;} #withREX .section04 .featuresList dd .subj{font-size:14px; line-height:20px;} #withREX .section04 .featuresList dd .detailList li{font-size:12px; line-height:18px;} #withREX .section05 .processList dd .contentsBox .subj{font-size:14px;} #withREX .section05 .processList dd .contentsBox .subsList li{font-size:13px; line-height:20px;} #withREX .section06 .imgBox{padding:60px 12px; font-size:16px; line-height:24px;} #withREX .section06 .impactList dd{padding:20px;} #withREX .section06 .impactList dd .icon{width:44px;} #withREX .section06 .impactList dd .subj{font-size:14px; line-height:22px;} #withREX .section06 .impactList dd .detailList li{font-size:13px; line-height:20px;} #withREX .section07 .cont .simbol{width:36px;} #withREX .section07 .cont .subs{font-size:16px; line-height:24px;} } /* ============================================== /* ============================================== AiriX v6 ─ product.css 하단 추가 (Figma 실측 전면 반영) ============================================== */ #airix, #airix-x740 { font-family: inherit; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S01 : Wi-Fi 7 ENTERPRISE WLAN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ax-s01 {width:100%; padding:60px 10%; box-sizing:border-box; display:flex; align-items:center; gap:160px} .ax-s01-lf { width:64%;} .ax-s01-rt { width:36%;} .ax-s01-rt img {width:100%;} /* Eyebrow: gray #444, 24px (Figma: rgba(68,68,68), fs=24, fw=400) */ .ax-s01-eyebrow { font-size:24px; font-weight:400; color:#444; letter-spacing:0; text-transform:none; margin-bottom:16px; } /* Title: 64px fw700 (Figma: fs=64, fw=700) */ .ax-main-title { font-size:64px; font-weight:700; color:#222; line-height:1; letter-spacing:-2px; margin-bottom:28px; } /* Stat row */ .ax-statrow { display:flex; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; margin-bottom:32px; } .ax-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 12px; text-align:center; } .ax-stat-div { width:1px; background:#e5e5e5; align-self:stretch; } .ax-stat-ico svg { display:block; } /* Stat values: 20px fw700 orange (Figma: fs=20, fw=700, rgba(248,132,74)) */ .ax-stat-val { font-size:20px; font-weight:700; color:#F8844A; line-height:1.1; white-space:nowrap; } .ax-stat-val em { font-size:13px; font-style:normal; font-weight:600; color:#777; } /* Stat labels: 16px #777 (Figma: fs=16, rgba(119,119,119)) */ .ax-stat-lbl { font-size:16px; color:#777; font-weight:400; line-height:1.3; } .ax-s01-btn { display:inline-block; margin-top:80px;} /* Hero subTitleArea button keeps transparent+white-border style */ #airix .ax-s01-btn a { background:#F8844A; border-radius:4px; } #airix .ax-s06 .counsel_btn a { background:#F8844A; border-radius:4px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S02 : 핵심 경쟁력 Figma: 이미지(상단) + 텍스트(하단) 완전 분리 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ax-s02 { background:#f7f7f7; padding:120px 10%; box-sizing:border-box; } .ax-s02-hd { margin-bottom:40px; } /* S02 title: 40px fw700 #222, LEFT aligned */ .ax-s02-ttl { font-size:40px; font-weight:700; color:#222; margin-bottom:20px; line-height:1.3; } /* S02 subtitle: 24px fw400 #444 */ .ax-s02-sub { font-size:24px; font-weight:400; color:#444; word-break:keep-all; } /* 2×2 card grid, gap=40 */ .ax-compgrid { display:grid; grid-template-columns:1fr 1fr; gap:40px; list-style:none; padding:0; margin:0; } /* Card: VERTICAL layout, gap=20 (image top, text bottom) */ .ax-comp-card { display:flex; flex-direction:column; gap:20px; } /* Image: border-radius 20px, no overlay */ .ax-comp-img img { width:100%; display:block; border-radius:20px; object-fit:cover; aspect-ratio:820/280; /* Figma image proportions */ } .ax-comp-txt { display:flex; flex-direction:column; gap:12px; } /* Card title: 24px fw700 #222, CENTER (Figma confirmed) */ .ax-comp-txt strong { display:block; font-size:20px; font-weight:700; color:#222; margin-top:16px; } /* Card description: 18px fw400 #444, LEFT */ .ax-comp-txt p { font-size:16px; font-weight:400; color:#444; word-break:keep-all; margin:0; line-height:24px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S03 : 호크아이 (풀width 이미지 + info boxes) Figma: Frame 54 = IMAGE, border-radius=20, 텍스트 overlay, 아래에 info boxes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S03 light : 호크아이 특징 그리드 Figma: 3×2, gap=0, 구분선, padding 60t 120r 60b 120l ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ax-s03-lt { background:#fff; padding:0 10% 60px; box-sizing:border-box; } .ax-featgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; list-style:none; padding:0; margin:0 0 24px; border-top:1px solid #eee; border-left:1px solid #eee; } .ax-featgrid li { display:flex; flex-direction:column; align-items:center; gap:32px; padding:60px 40px; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; } .ax-feat-ico svg { display:block; } .ax-featgrid li strong { font-size:24px; font-weight:700; color:#222; line-height:1.4; } .ax-featgrid li p { font-size:18px; font-weight:400; color:#444; line-height:1.6; word-break:keep-all; margin:0; } .ax-notice { font-size:16px; color:#777; text-align:center; padding-top:16px; margin:0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S04 : 제품 라인업 Figma: "Product" gray 24px, 탭 개별 버튼, 설명 24px, 스탯 num=20px lbl=16px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ax-s04 { background:#fff; padding:80px 10% 0; box-sizing:border-box; text-align:center; } /* Section label: gray 24px normal weight (NOT small orange uppercase) */ .ax-s04-label { font-size:24px; font-weight:400; color:#444; margin-bottom:16px; text-align:center; } .ax-s04-ttl { font-size:40px; font-weight:700; color:#222; margin-bottom:24px; } /* Tabs: side-by-side individual buttons (NOT pill container) */ .ax-prodtabs { display:flex; gap:20px; justify-content:center; margin-bottom:32px; } .ax-tab { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 52px; background:#f7f7f7; border:none; border-radius:4px; font-size:20px; font-weight:400; color:#777; cursor:pointer; transition:all .2s; line-height:1.3; } .ax-tab span { font-size:14px; font-weight:400; color:#999; } .ax-tab.active { background:#F8844A; color:#fff; font-weight:700; } .ax-tab.active span { color:rgba(255,255,255,0.8); } /* Description: 24px fw400 #444 */ .ax-s04-desc { font-size:20px; font-weight:400; color:#444; line-height:1.6; margin-bottom:48px; word-break:keep-all; } /* Product cards */ .ax-prodlist { display:flex; gap:40px; justify-content:center; } .ax-prodcard { display:flex; flex-direction:column; align-items:center; flex:1; max-width:820px; border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; background:#fff; } /* Badges: right-aligned (Figma: align=MAX) */ .ax-prod-badges { display:flex; gap:8px; justify-content:flex-end; width:100%; padding:20px 20px 0 20px; box-sizing:border-box; } .bge-or { padding:8px 12px; background:rgba(248,132,74,0.08); color:#F8844A; border-radius:50px; font-size:16px; font-weight:400; } /* Product image */ .ax-prod-imglink { display:flex; align-items:center; justify-content:center; width:100%; padding:24px; box-sizing:border-box; height:220px; } .ax-prod-imglink img, .ax-prodcard > .ax-prod-imglink > img { max-width:260px; max-height:180px; width:auto; height:auto; object-fit:contain; display:block; } /* Product name + subtitle */ .ax-prod-info { text-align:center; padding:0 24px 24px; } .ax-prod-name { font-size:36px; font-weight:700; color:#F8844A; margin-bottom:8px; } .ax-prod-sub { font-size:16px; font-weight:400; color:#444; line-height:1.5; word-break:keep-all; } /* Stats row */ .ax-prod-stats { display:flex; width:100%; border-top:1px solid #eee; } .ax-prod-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:20px; border-right:1px solid #eee; text-align:center; } .ax-prod-stat:last-child { border-right:none; } /* Stat num: 20px fw700 #222 */ .ps-num { font-size:20px; font-weight:700; color:#222; line-height:1.2; } /* Stat label: 16px #444 */ .ps-lbl { font-size:16px; font-weight:400; color:#444; } .ax-ctrlcard { min-height:200px; justify-content:center; gap:12px; padding:32px; } .ax-ctrlcard .ax-prod-badges { justify-content:center; padding:0; } .ax-ctrlcard .ax-prod-name { margin-top:8px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S05 : FAQ Figma: "FAQ" gray 24px, 4개 가로 나열, gray card ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ax-s05 { background:#fff; padding:80px 10%; box-sizing:border-box; text-align:center; } /* Section label: gray 24px normal weight */ .ax-s05-label { font-size:24px; font-weight:400; color:#444; margin-bottom:16px; } .ax-s05-ttl { font-size:40px; font-weight:700; color:#222; margin-bottom:40px; } /* 4-column horizontal layout */ .ax-faqrow { display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left; } .ax-faqitem { background:#f7f7f7; border-radius:8px; padding:20px; } .ax-faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; background:none; border:none; cursor:pointer; font-size:18px; font-weight:400; color:#444; text-align:left; line-height:1.5; word-break:Keep-all; } /* Circle icon: white bg */ .ax-faq-ic { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:300; color:#444; transition:all .2s; line-height:1; } .ax-faqitem.open .ax-faq-ic { background:#F8844A; border-color:#F8844A; color:#fff; } .ax-faq-a { display:none; padding:14px 0 0; font-size:15px; color:#555; line-height:1.8; word-break:keep-all; } .ax-faqitem.open .ax-faq-a { display:block; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ S06 : CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ax-s06 { position:relative; min-height:280px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:80px 10%; box-sizing:border-box; } .ax-s06-bg { position:absolute; inset:0; z-index:0; } .ax-s06-bg img { width:100%; height:100%; object-fit:cover; } .ax-s06-inner { position:relative; z-index:1; max-width:640px; } .ax-s06-ttl { font-size:36px; font-weight:700; color:#fff; margin-bottom:12px; line-height:1.45; word-break:keep-all; } .ax-s06-sub { font-size:24px; font-weight:400; color:rgba(255,255,255,.8); margin-bottom:32px; line-height:1.5; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ X740 HERO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .xh-hero { display:flex; align-items:stretch; background:#fff; padding:60px 10%; box-sizing:border-box; gap:60px; min-height:560px; } .xh-hero-img { flex:0 0 42%; background:#f5f5f5; border-radius:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .xh-hero-img img { width:85%; object-fit:contain; } .xh-hero-rt { flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; } .xh-flagship { display:inline-block; position:absolute; top:0; right:0; padding:6px 16px; background:#F8844A; color:#fff; border-radius:50px; font-size:13px; font-weight:700; letter-spacing:1px; } .xh-eyebrow { font-size:12px; color:#777; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; margin-top:16px; } .xh-title { font-size:48px; font-weight:700; color:#111; line-height:1; letter-spacing:-1px; margin-bottom:14px; } .xh-subtitle{ font-size:18px; color:#555; line-height:1.6; margin-bottom:28px; word-break:keep-all; } .xh-statrow { display:flex; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; margin-bottom:24px; } .xh-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 10px; text-align:center; } .xh-stat-div { width:1px; background:#e5e5e5; align-self:stretch; } .xh-stat-ico svg { display:block; } .xh-stat-val { font-size:20px; font-weight:700; color:#F8844A; line-height:1.1; white-space:nowrap; } .xh-stat-val em { font-size:13px; font-style:normal; font-weight:600; color:#888; } .xh-stat-lbl { font-size:13px; color:#888; font-weight:500; line-height:1.3; } .xh-cta-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 0; background:#F8844A; color:#fff; text-decoration:none; border-radius:6px; font-size:16px; font-weight:600; transition:background .2s; } .xh-cta-btn:hover { background:#e06b30; } .xh-btn-ico { width:18px; height:18px; object-fit:contain; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ X740 TAB BAR (pill style per Figma) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .xh-tabs { display:flex; gap:0; background:#f7f7f7; border-radius:8px; padding:8px 12px; box-sizing:border-box; margin:0 10%; transition:box-shadow .2s; } .xh-tabs.sticky { position:fixed; top:0; left:0; right:0; margin:0; border-radius:0; z-index:100; box-shadow:0 2px 16px rgba(0,0,0,.08); } .xh-tab { display:flex; align-items:center; gap:6px; padding:8px 16px; font-size:14px; font-weight:500; color:#999; text-decoration:none; border-radius:4px; transition:all .2s; white-space:nowrap; } .xh-tab:hover { color:#F8844A; } .xh-tab.active { background:#F8844A; color:#fff; font-weight:700; } .xh-tab svg { opacity:.6; } .xh-tab.active svg { opacity:1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ X740 SECTIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .xh-section { padding:64px 0; background:#fff; } .xh-section.xh-bg-gray { background:#f7f7f7; } .xh-sec-inner { max-width:1280px; margin:0 auto; padding:0 10%; box-sizing:border-box; } .xh-sec-label { font-size:13px; font-weight:700; color:#F8844A; margin-bottom:8px; } .xh-sec-title { font-size:32px; font-weight:800; color:#111; margin-bottom:40px; line-height:1.3; } .xh-overview-body p { font-size:15px; color:#555; line-height:1.9; margin-bottom:16px; word-break:keep-all; } .xh-notice { font-size:12px; color:#aaa; border-top:1px solid #eee; padding-top:14px; margin-top:8px !important; } .xh-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .xh-feat-card { background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:32px; display:flex; flex-direction:column; gap:14px; } .xh-feat-ttl { font-size:24px; font-weight:700; color:#111; line-height:1.4; margin:0; } .xh-feat-desc{ font-size:18px; color:#555; line-height:1.8; flex:1; word-break:keep-all; margin:0; } .xh-feat-tags { display:flex; gap:6px; flex-wrap:wrap; list-style:none; padding:0; margin:0; } .xh-feat-tags li { padding:4px 12px; background:#f7f7f7; border:1px solid #e5e5e5; border-radius:4px; font-size:11px; color:#555; } .xh-accordion { display:flex; flex-direction:column; gap:8px; } .xh-acc-group { border:1px solid #eee; border-radius:8px; overflow:hidden; } .xh-acc-hd { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 24px; background:#fafafa; border:none; cursor:pointer; font-size:15px; font-weight:700; color:#111; text-align:left; transition:background .2s; } .xh-acc-hd:hover { background:#FEF5F1; } .xh-acc-ic { font-size:20px; color:#F8844A; font-weight:300; line-height:1; } .xh-acc-body { display:none; } .xh-acc-group.open .xh-acc-body { display:block; } .xh-spec-tbl { width:100%; border-collapse:collapse; font-size:13px; } .xh-spec-tbl tr:nth-child(odd) { background:#fafafa; } .xh-spec-tbl tr:hover { background:#FEF5F1; } .xh-spec-tbl td { padding:11px 20px; border-bottom:1px solid #eee; color:#444; line-height:1.6; word-break:keep-all; vertical-align:top; } .xh-spec-tbl td.sk { font-weight:600; color:#222; white-space:nowrap; width:28%; border-right:1px solid #eee; } .xh-list-btn-wrap { display:flex; justify-content:flex-end; margin-top:40px; } .xh-list-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; background:#F8844A; color:#fff; text-decoration:none; border-radius:6px; font-size:14px; font-weight:600; transition:background .2s; } .xh-list-btn:hover { background:#e06b30; } .ax-se01{width:100%; display:Flex;padding:60px 10%; box-sizing:border-box; gap:160px;justify-content: center; align-items: center;} .ax-se01 .ax-s01-lf1{width:64%; } .ax-se01 .ax-s01-rt1{width:36%; } .ax-se01 .ax-s01-rt1 img{width:100%; } .s_chList{width:100%; display:Flex; margin-top:60px;} .s_chList li{width:100%; padding:0px 20px; border-right:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center;} .s_chList li:last-child{border-right:0px solid #e5e5e5} .s_chList li .icon{height:48px;} .s_chList li .icon img{height:100%;} .s_chList li .subj{width:100%; text-align:center; font-size:20px; color:#F8844A; font-weight:bold; margin-top:20px;} .s_chList li .dis{width:100%; text-align:center; font-size:16px; color:#777; margin-top:8px;} .ax-section03{width:100%; padding:120px 10% 0px; box-sizing:border-box;} .ax-section03 .wrap{width:100%; position:relative;} .ax-section03 .cont{width:100%;position:absolute; top:50%; transform:translateY(-50%); padding:0px 60px; box-sizing:border-box;} .ax-section03 .cont .subTit{font-size:16px; color:#999;} .ax-section03 .cont .tit{font-size:40px; color:#fff; font-weight:bold; margin-top:40px; word-break:keep-all; line-height:52px;} .ax-section03 .cont .tit br{display:block;} .ax-section03 .cont .subs{font-size:18px; color:#ddd; margin-top:20px; line-height:26px;} .ax-section03 .cont .box{margin-top:60px; gap:8px; border-radius:8px; background:rgba(255,255,255,0.28); width:auto; display:inline-flex; justify-content:center; align-items:center;padding:16px 32px; box-sizing:border-box;} .ax-section03 .cont .box .icon{width:20px;} .ax-section03 .cont .box .tx{font-size:16px; color:#fff;} .ax-section03 .bg{width:100%;} .ax-section03 .bg img{width:100%;} .ax-section04{width:100%; display:flex; gap:20px; padding:60px 10%; box-sizing:border-box;} .ax-section04 li{width:100%; background:#FEF5F1; padding:20px 32px; box-sizing:border-box; border-top:4px solid #F8844A;} .ax-section04 li .subj{display:inline-block; padding:8px 12px; font-size:16px; color:#fff; background:#F8844A; border-radius:50px;} .ax-section04 li .subs{font-size:18px; color:#444; margin-top:20px; line-height:26px;} .ax-section05{width:100%;} .ax-section05 .section05List{width:100%; display:Flex; flex-wrap: wrap; border-top:1px solid #e5e5e5} .ax-section05 .section05List li{width:33.3333%; padding:60px 8%; border-bottom:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; border-left:1px solid #e5e5e5;} .ax-section05 .section05List li .icon{height:60px;} .ax-section05 .section05List li .icon img{height:100%;} .ax-section05 .section05List li strong{font-size:20px; color:#222; font-weight:bold; margin-top:32px; text-align:center;} .ax-section05 .section05List li p{font-size:16px; color:#444; margin-top:12px; line-height:24px; text-align:center; word-break:keep-all;} .ax-section05 .notice{font-size:14px; color:#777;width:100%; padding:12px 10%; box-sizing:border-box; text-align:right;} .ax-s04 .ax-prodlist{width:100%; display:flex; gap:40px;} .ax-s04 .ax-prodlist dd{width:100%; border:1px solid #e5e5e5; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA{width:100%; position:Relative;padding:20px 0px 0px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .tagList{width:100%; gap:8px; align-items:center; justify-content:end;display:flex; position:absolute; top:0; left:0; padding:20px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .tagList li{display:inline-block; background:rgba(248,132,74,0.1); color:#F8844A; font-size:14px; padding:8px 12px; border-radius:50px;} .ax-s04 .ax-prodlist dd .info{width:100%;} .ax-s04 .ax-prodlist dd .info .subj{width:100%; text-align:center; font-size:36px; color:#F8844A; font-weight:bold;} .ax-s04 .ax-prodlist dd .info .subs{width:100%; text-align:center; font-size:16px; color:#444; margin-top:8px;} .ax-s04 .ax-prodlist dd .detail{width:100%; margin-top:20px; border-top:1px solid #e5e5e5; display:flex;} .ax-s04 .ax-prodlist dd .detail li{width:100%; padding:20px 0px; display:flex; flex-direction:column; gap:4px} .ax-s04 .ax-prodlist dd .detail li .al{width:100%; text-align:Center; font-size:20px; color:#222; font-weight:bold;} .ax-s04 .ax-prodlist dd .detail li .al span{color:#777; font-size:14px; font-weight:400;} .ax-s04 .ax-prodlist dd .detail li .dis{color:#444; font-size:16px;} /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 1439px) { .ax-se01{width:100%; display:Flex; padding:60px 5%; box-sizing:border-box; gap:40px; justify-content: center; align-items: center;} .ax-se01 .ax-s01-lf1{width:72%; } .ax-se01 .ax-s01-rt1{width:28%; } .ax-se01 .ax-s01-rt1 img{width:100%; } .s_chList{width:100%; display:Flex; margin-top:60px;} .s_chList li{width:100%; padding:0px 8px; border-right:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center;} .s_chList li:last-child{border-right:0px solid #e5e5e5} .s_chList li .icon{height:36px;} .s_chList li .icon img{height:100%;} .s_chList li .subj{width:100%; text-align:center; font-size:18px; color:#F8844A; font-weight:bold; margin-top:20px;} .s_chList li .dis{width:100%; text-align:center; font-size:14px; color:#777; margin-top:8px;} .ax-s02{width:100%; padding:60px 5% ; box-sizing:border-box;} .ax-section03{width:100%; padding:60px 5% 0px; box-sizing:border-box;} .ax-section03 .wrap{width:100%; position:relative;} .ax-section03 .cont{width:100%;position:absolute; top:50%; transform:translateY(-50%); padding:0px 60px; box-sizing:border-box; z-index:1;} .ax-section03 .cont .subTit{font-size:16px; color:#999;} .ax-section03 .cont .tit{font-size:32px; color:#fff; font-weight:bold; margin-top:32px; word-break:keep-all; line-height:42px;} .ax-section03 .cont .tit br{display:block;} .ax-section03 .cont .subs{font-size:16px; color:#ddd; margin-top:16px; line-height:24px;} .ax-section03 .cont .box{margin-top:40px; gap:8px; border-radius:8px; background:rgba(255,255,255,0.28); width:auto; display:inline-flex; justify-content:center; align-items:center;padding:16px 32px; box-sizing:border-box;} .ax-section03 .cont .box .icon{width:20px;} .ax-section03 .cont .box .tx{font-size:16px; color:#fff;} .ax-section03 .bg{width:100%; position:relative; overflow:hidden; border-radius:20px;} .ax-section03 .bg img{width:120%; position:relative; left:50%; transform:translateX(-50%);} .ax-section04{width:100%; display:flex; gap:20px; padding:60px 5%; box-sizing:border-box;} .ax-section04 li{width:100%; background:#FEF5F1; padding:20px 32px; box-sizing:border-box; border-top:4px solid #F8844A;} .ax-section04 li .subj{display:inline-block; padding:8px 12px; font-size:16px; color:#fff; background:#F8844A; border-radius:50px;} .ax-section04 li .subs{font-size:16px; color:#444; margin-top:20px; line-height:26px;} .ax-section05{width:100%;} .ax-section05 .section05List{width:100%; display:Flex; flex-wrap: wrap; border-top:1px solid #e5e5e5} .ax-section05 .section05List li{width:33.3333%; padding:60px 3%; border-bottom:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; border-left:1px solid #e5e5e5;} .ax-section05 .section05List li .icon{height:60px;} .ax-section05 .section05List li .icon img{height:100%;} .ax-section05 .section05List li strong{font-size:20px; color:#222; font-weight:bold; margin-top:32px; text-align:center;} .ax-section05 .section05List li p{font-size:16px; color:#444; margin-top:12px; line-height:24px; text-align:center; word-break:keep-all;} .ax-section05 .notice{font-size:14px; color:#777;width:100%; padding:12px 5%; box-sizing:border-box; text-align:right;} .ax-s04{width:100%; padding:60px 5%; box-sizing:border-box;} .ax-s04-desc{font-size:18px; word-break:keep-all; line-height:263px;} .ax-s04-desc .ax-tabpanel{width:100;} .ax-s04 .ax-prodlist{width:100%; display:flex; gap:20px;} .ax-s04 .ax-prodlist dd{width:50%; border:1px solid #e5e5e5; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA{width:100%; position:Relative;padding:20px 0px 0px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .thum{width:100%;} .ax-s04 .ax-prodlist dd .ThumA .thum img{width:100%;} .ax-s04 .ax-prodlist dd .ThumA .tagList{width:100%; gap:8px; align-items:center; justify-content:end;display:flex; position:absolute; top:0; left:0; padding:20px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .tagList li{display:inline-block; background:rgba(248,132,74,0.1); color:#F8844A; font-size:14px; padding:8px 12px; border-radius:50px;} .ax-s04 .ax-prodlist dd .info{width:100%;} .ax-s04 .ax-prodlist dd .info .subj{width:100%; text-align:center; font-size:36px; color:#F8844A; font-weight:bold;} .ax-s04 .ax-prodlist dd .info .subs{width:100%; text-align:center; font-size:16px; color:#444; margin-top:8px;} .ax-s04 .ax-prodlist dd .detail{width:100%; margin-top:20px; border-top:1px solid #e5e5e5; display:flex;} .ax-s04 .ax-prodlist dd .detail li{width:100%; padding:20px 0px; display:flex; flex-direction:column; gap:4px} .ax-s04 .ax-prodlist dd .detail li .al{width:100%; text-align:Center; font-size:20px; color:#222; font-weight:bold;} .ax-s04 .ax-prodlist dd .detail li .al span{color:#777; font-size:14px; font-weight:400;} .ax-s04 .ax-prodlist dd .detail li .dis{color:#444; font-size:16px;} .ax-s05{width:100%; padding:60px 5%; box-sizing:border-box;} .ax-s05 .ax-faqrow{width:100%; display:flex; flex-direction:column; gap:12px;} } @media (max-width: 1023px) { .subTitleArea .content .top .logo_tx{font-size:48px;} .ax-se01{width:100%; display:Flex; padding:60px 3%; box-sizing:border-box; gap:40px; justify-content: center; align-items: center; flex-direction:column-reverse} .ax-se01 .ax-s01-lf1{width:100%; text-align:Center;} .ax-se01 .ax-s01-lf1 .ax-s01-btn{margin-top:40px;} .ax-se01 .ax-s01-rt1{width:50%;} .ax-se01 .ax-s01-rt1 img{width:100%; } .s_chList{width:100%; display:Flex; margin-top:60px;} .s_chList li{width:100%; padding:0px 8px; border-right:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center;} .s_chList li:last-child{border-right:0px solid #e5e5e5} .s_chList li .icon{height:36px;} .s_chList li .icon img{height:100%;} .s_chList li .subj{width:100%; text-align:center; font-size:18px; color:#F8844A; font-weight:bold; margin-top:20px;} .s_chList li .dis{width:100%; text-align:center; font-size:14px; color:#777; margin-top:8px;} .ax-s02{width:100%; padding:60px 3% ; box-sizing:border-box;} .ax-compgrid { display:grid; grid-template-columns:1fr 1fr; gap:20px;list-style:none; padding:0; margin:0;} .ax-comp-card{gap:12px} .ax-comp-card .ax-comp-txt{gap:8px} .ax-comp-card .ax-comp-txt strong{font-size:16px; margin-top:12px;} .ax-comp-card .ax-comp-txt p{font-size:14px; line-height:21px; } .ax-section03{width:100%; padding:60px 3% 0px; box-sizing:border-box;} .ax-section03 .wrap{width:100%; position:relative;} .ax-section03 .cont{width:100%;position:absolute; top:50%; transform:translateY(-50%); padding:0px 60px; box-sizing:border-box; z-index:1;} .ax-section03 .cont .subTit{font-size:14px; color:#999;} .ax-section03 .cont .tit{font-size:26px; color:#fff; font-weight:bold; margin-top:16px; word-break:keep-all; line-height:34px;} .ax-section03 .cont .tit br{display:block;} .ax-section03 .cont .subs{font-size:14px; color:#ddd; margin-top:16px; line-height:21px;} .ax-section03 .cont .box{margin-top:20px; gap:8px; border-radius:8px; background:rgba(255,255,255,0.28); width:auto; display:inline-flex; justify-content:center; align-items:center;padding:12px 20px; box-sizing:border-box;} .ax-section03 .cont .box .icon{width:16px;} .ax-section03 .cont .box .icon img{width:100%;} .ax-section03 .cont .box .tx{font-size:14px; color:#fff;} .ax-section03 .bg{width:100%; position:relative; overflow:hidden; border-radius:20px;} .ax-section03 .bg img{width:140%; position:relative; left:50%; transform:translateX(-50%);} .ax-section04{width:100%; display:flex; gap:20px; padding:60px 3%; box-sizing:border-box;} .ax-section04 li{width:100%; background:#FEF5F1; padding:16px 24px; box-sizing:border-box; border-top:4px solid #F8844A;} .ax-section04 li .subj{display:inline-block; padding:8px 12px; font-size:14px; color:#fff; background:#F8844A; border-radius:50px;} .ax-section04 li .subs{font-size:14px; color:#444; margin-top:20px; line-height:21px;} .ax-section05{width:100%;} .ax-section05 .section05List{width:100%; display:Flex; flex-wrap: wrap; border-top:1px solid #e5e5e5} .ax-section05 .section05List li{width:50%; padding:60px 3%; border-bottom:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; border-left:1px solid #e5e5e5;} .ax-section05 .section05List li .icon{height:60px;} .ax-section05 .section05List li .icon img{height:100%;} .ax-section05 .section05List li strong{font-size:16px; color:#222; font-weight:bold; margin-top:20px; text-align:center;} .ax-section05 .section05List li p{font-size:14px; color:#444; margin-top:12px; line-height:21px; text-align:center; word-break:keep-all;} .ax-section05 .notice{font-size:14px; color:#777;width:100%; padding:12px 3%; box-sizing:border-box; text-align:right;} .ax-s04{width:100%; padding:60px 3%; box-sizing:border-box;} .ax-s04-desc{font-size:16px; word-break:keep-all; line-height:21px;} .ax-s04-desc .ax-tabpanel{width:100;} .ax-prodtabs{width:100%; gap:12px;} .ax-prodtabs .ax-tab { padding:12px 40px; font-size:16px; } .ax-s04 .ax-prodlist{width:100%; display:flex; gap:20px; flex-direction:column;} .ax-s04 .ax-prodlist dd{width:100%; border:1px solid #e5e5e5; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA{width:100%; position:Relative;padding:20px 0px 0px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .thum{width:50%; margin:0 auto;} .ax-s04 .ax-prodlist dd .ThumA .thum img{width:100%;} .ax-s04 .ax-prodlist dd .ThumA .tagList{width:100%; gap:8px; align-items:center; justify-content:end;display:flex; position:absolute; top:0; left:0; padding:20px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .tagList li{display:inline-block; background:rgba(248,132,74,0.1); color:#F8844A; font-size:14px; padding:8px 12px; border-radius:50px;} .ax-s04 .ax-prodlist dd .info{width:100%;} .ax-s04 .ax-prodlist dd .info .subj{width:100%; text-align:center; font-size:36px; color:#F8844A; font-weight:bold;} .ax-s04 .ax-prodlist dd .info .subs{width:100%; text-align:center; font-size:16px; color:#444; margin-top:8px;} .ax-s04 .ax-prodlist dd .detail{width:100%; margin-top:20px; border-top:1px solid #e5e5e5; display:flex;} .ax-s04 .ax-prodlist dd .detail li{width:100%; padding:20px 0px; display:flex; flex-direction:column; gap:4px} .ax-s04 .ax-prodlist dd .detail li .al{width:100%; text-align:Center; font-size:20px; color:#222; font-weight:bold;} .ax-s04 .ax-prodlist dd .detail li .al span{color:#777; font-size:14px; font-weight:400;} .ax-s04 .ax-prodlist dd .detail li .dis{color:#444; font-size:16px;} .ax-s05{width:100%; padding:60px 3%; box-sizing:border-box;} .ax-s05 .ax-faqrow{width:100%; display:flex; flex-direction:column; gap:12px;} } @media (max-width: 767px) { .subTitleArea .content .top .logo_tx{font-size:32px;} .subTitleArea .content .top .logo_tx span{display:none;} .ax-se01{width:100%; display:Flex; padding:60px 3%; box-sizing:border-box; gap:40px; justify-content: center; align-items: center; flex-direction:column-reverse} .ax-se01 .ax-s01-lf1{width:100%; text-align:Center;} .ax-se01 .ax-s01-lf1 .ax-s01-btn{margin-top:40px;} .ax-se01 .ax-s01-rt1{width:50%;} .ax-se01 .ax-s01-rt1 img{width:100%; } .s_chList{width:100%; display:Flex; margin-top:20px; flex-wrap:wrap;} .s_chList li{width:50%; padding:16px 8px; border-right:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center; box-sizing:border-box;} .s_chList li:nth-child(even){border-right:0px solid #e5e5e5} .s_chList li:nth-child(1), .s_chList li:nth-child(2){border-bottom:1px solid #e5e5e5} .s_chList li .icon{height:36px;} .s_chList li .icon img{height:100%;} .s_chList li .subj{width:100%; text-align:center; font-size:18px; color:#F8844A; font-weight:bold; margin-top:20px;} .s_chList li .dis{width:100%; text-align:center; font-size:14px; color:#777; margin-top:8px;} .ax-s02{width:100%; padding:60px 3% ; box-sizing:border-box;} .ax-compgrid { display:grid; grid-template-columns:1fr ; gap:32px;list-style:none; padding:0; margin:0;} .ax-comp-card{gap:12px} .ax-comp-card .ax-comp-txt{gap:8px} .ax-comp-card .ax-comp-txt strong{font-size:16px; margin-top:8px;} .ax-comp-card .ax-comp-txt p{font-size:14px; line-height:21px; } .ax-section03{width:100%; padding:60px 3% 0px; box-sizing:border-box;} .ax-section03 .wrap{width:100%; position:relative;} .ax-section03 .cont{width:100%;position:absolute; top:50%; transform:translateY(-50%); padding:0px 20px; box-sizing:border-box; z-index:1;} .ax-section03 .cont .subTit{font-size:12px; color:#999; display:none;} .ax-section03 .cont .tit{font-size:18px; color:#fff; font-weight:bold; margin-top:0px; word-break:keep-all; line-height:24px;} .ax-section03 .cont .tit br{display:block;} .ax-section03 .cont .subs{font-size:13px; color:#ddd; margin-top:12px; line-height:20px;} .ax-section03 .cont .box{margin-top:20px; gap:8px; border-radius:8px; background:rgba(255,255,255,0.28); width:auto; display:none; justify-content:center; align-items:center;padding:12px 20px; box-sizing:border-box;} .ax-section03 .cont .box .icon{width:16px;} .ax-section03 .cont .box .icon img{width:100%;} .ax-section03 .cont .box .tx{font-size:14px; color:#fff;} .ax-section03 .bg{width:100%; position:relative; overflow:hidden; border-radius:20px;} .ax-section03 .bg img{width:220%; position:relative; left:50%; transform:translateX(-50%);} .ax-section04{width:100%; display:flex; flex-direction:column; gap:12px; padding:60px 3%; box-sizing:border-box;} .ax-section04 li{width:100%; background:#FEF5F1; padding:16px 20px; box-sizing:border-box; border-top:4px solid #F8844A;} .ax-section04 li .subj{display:inline-block; padding:8px 12px; font-size:14px; color:#fff; background:#F8844A; border-radius:50px;} .ax-section04 li .subs{font-size:14px; color:#444; margin-top:20px; line-height:21px; word-break:keep-all;} .ax-section05{width:100%;} .ax-section05 .section05List{width:100%; display:Flex; flex-direction:column; flex-wrap: nowrap; border-top:1px solid #e5e5e5} .ax-section05 .section05List li{width:100%; padding:32px 3%; border-bottom:1px solid #e5e5e5; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; border-left:1px solid #e5e5e5;} .ax-section05 .section05List li .icon{height:60px;} .ax-section05 .section05List li .icon img{height:100%;} .ax-section05 .section05List li strong{font-size:16px; color:#222; font-weight:bold; margin-top:20px; text-align:center;} .ax-section05 .section05List li p{font-size:14px; color:#444; margin-top:12px; line-height:21px; text-align:center; word-break:keep-all;} .ax-section05 .notice{font-size:14px; color:#777;width:100%; padding:12px 3%; box-sizing:border-box; text-align:right;} .ax-s04{width:100%; padding:60px 3%; box-sizing:border-box;} .ax-s04-desc{font-size:16px; word-break:keep-all; line-height:21px;} .ax-s04-desc .ax-tabpanel{width:100;} .ax-prodtabs{width:100%; gap:12px;} .ax-prodtabs .ax-tab { padding:12px 40px; font-size:16px; } .ax-s04 .ax-prodlist{width:100%; display:flex; gap:20px; flex-direction:column;} .ax-s04 .ax-prodlist dd{width:100%; border:1px solid #e5e5e5; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA{width:100%; position:Relative;padding:20px 0px 0px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .thum{width:100%; margin:0 auto;} .ax-s04 .ax-prodlist dd .ThumA .thum img{width:100%;} .ax-s04 .ax-prodlist dd .ThumA .tagList{width:100%; gap:8px; align-items:center; justify-content:end;display:flex; position:absolute; top:0; left:0; padding:20px; box-sizing:border-box;} .ax-s04 .ax-prodlist dd .ThumA .tagList li{display:inline-block; background:rgba(248,132,74,0.1); color:#F8844A; font-size:14px; padding:8px 12px; border-radius:50px;} .ax-s04 .ax-prodlist dd .info{width:100%;} .ax-s04 .ax-prodlist dd .info .subj{width:100%; text-align:center; font-size:32px; color:#F8844A; font-weight:bold;} .ax-s04 .ax-prodlist dd .info .subs{width:100%; text-align:center; font-size:14px; color:#444; margin-top:8px;} .ax-s04 .ax-prodlist dd .detail{width:100%; margin-top:20px; border-top:1px solid #e5e5e5; display:flex;} .ax-s04 .ax-prodlist dd .detail li{width:100%; padding:20px 0px; display:flex; flex-direction:column; gap:4px} .ax-s04 .ax-prodlist dd .detail li .al{width:100%; text-align:Center; font-size:16px; color:#222; font-weight:bold;} .ax-s04 .ax-prodlist dd .detail li .al span{color:#777; font-size:13px; font-weight:400;} .ax-s04 .ax-prodlist dd .detail li .dis{color:#444; font-size:14px;} .ax-s05{width:100%; padding:60px 3%; box-sizing:border-box;} .ax-s05 .ax-faqrow{width:100%; display:flex; flex-direction:column; gap:12px;} } @media (max-width:1100px) { .ax-s01 { flex-direction:column; padding-bottom:0; min-height:auto; } .ax-s01-lf { padding-bottom:40px; } .ax-s01-rt { flex:none; width:65%; max-width:400px; align-self:center; } .ax-main-title { font-size:52px; } .ax-s02-sub { font-size:18px; } .ax-s03-imgwrap { padding:48px; } .ax-s03-ttl { font-size:32px; } .xh-hero { flex-direction:column; } .xh-hero-img { flex:none; height:320px; width:100%; } .xh-title { font-size:40px; } .xh-flagship { top:auto; bottom:calc(100% + 8px); } .xh-tabs { margin:0 5%; } } @media (max-width:900px) { /* .ax-compgrid { grid-template-columns:1fr; } */ .ax-prodlist { flex-direction:column; align-items:center; } } @media (max-width:768px) { .ax-s01 { padding:60px 5% 0; } .ax-main-title { font-size:40px; } .ax-s01-eyebrow { font-size:18px; } .ax-statrow { flex-wrap:wrap; } .ax-stat { min-width:45%; } .ax-stat-div { display:none; } .ax-stat-lbl { font-size:12px; } .ax-s02 { padding:60px 5%; } .ax-s02-ttl { font-size:28px; } .ax-s02-sub { font-size:16px; line-height:24px; } .ax-s03 { padding:48px 5% 40px; } .ax-s03-imgwrap { padding:32px; min-height:300px; } .ax-s03-ttl { font-size:24px; } .ax-s03-sub { font-size:16px; } .ax-inforow { grid-template-columns:1fr; } .ax-s03-lt { padding:0 5% 40px; } .ax-featgrid { grid-template-columns:1fr 1fr; } .ax-featgrid li { padding:32px 20px; gap:20px; } .ax-featgrid li strong { font-size:18px; } .ax-featgrid li p { font-size:15px; } .ax-s04-ttl { font-size:28px; } .ax-s04-desc { font-size:18px; } .ax-s05 { padding:60px 5%; } .ax-s05-ttl { font-size:28px; } .ax-faqrow { grid-template-columns:1fr; } .ax-faq-q { font-size:15px; } .ax-s06 { padding:60px 5%; } .ax-s06-ttl { font-size:24px; } .xh-hero { padding:40px 5%; } .xh-title { font-size:36px; } .xh-statrow { flex-wrap:wrap; } .xh-stat { min-width:45%; } .xh-stat-div { display:none; } .xh-tabs { margin:0; padding:8px 5%; border-radius:0; } .xh-tab { padding:8px 12px; font-size:13px; } .xh-sec-inner { padding:0 5%; } .xh-feat-grid { grid-template-columns:1fr; } .xh-sec-title { font-size:24px; } .xh-feat-ttl { font-size:20px; } .xh-feat-desc { font-size:15px; } } @media (max-width:480px) { .ax-featgrid { grid-template-columns:1fr; } .ax-faqrow { grid-template-columns:1fr; } } #productDetail .productWrap{width:100%; padding:120px 10%; box-sizing:border-box;} #productDetail .productWrap .hero{width:100%; height:auto; display:flex; gap:60px;} #productDetail .productWrap .hero .thum{width:40%; background:#f7f7f7; border-radius:20px; display:Flex; flex-direction:column; justify-content:center;} #productDetail .productWrap .hero .thum img{width:100%;} #productDetail .productWrap .hero .info{width:60%;height:100%; display:Flex; flex-direction:column; justify-content:space-between;} #productDetail .productWrap .hero .top{width:100%;display:flex; flex-direction:column;} #productDetail .productWrap .hero .top .enTitleA{width:100%;display:flex; justify-content:space-between; align-items:center;} #productDetail .productWrap .hero .top .enTitleA .entit{font-size:16px; color:#777;} #productDetail .productWrap .hero .top .enTitleA .tagList{display:flex; gap:4px;} #productDetail .productWrap .hero .top .enTitleA .tagList li{background:#F8844A; color:#fff; padding:6px 16px; font-size:16px; border-radius:50px;} #productDetail .productWrap .hero .top .tit{font-size:48px; color:#222; font-weight:bold; margin-top:4px;} #productDetail .productWrap .hero .top .subs{font-size:18px; color:#444; line-height:26px; margin-top:20px;} #productDetail .productWrap .hero .top .s_chList{width:100%; display:flex; margin-top:60px;} #productDetail .productWrap .hero .top .s_chList li{width:100%; align-items:center; border-right:1px solid #e5e5e5; padding:0px 16px; display:flex; flex-direction:column;} #productDetail .productWrap .hero .top .s_chList li:last-child{border-right:0;} #productDetail .productWrap .hero .top .s_chList li .icon{height:48px;} #productDetail .productWrap .hero .top .s_chList li .icon img{height:100%;} #productDetail .productWrap .hero .top .s_chList li .subj{font-size:18px; color:#F8844A; font-weight:bold; text-align:center; margin-top:20px;} #productDetail .productWrap .hero .top .s_chList li .dis{font-size:15px; color:#777; text-align:center; margin-top:8px;} #productDetail .productWrap .hero .counselBtn{width:100%; margin-top:80px;} #productDetail .productWrap .hero .counselBtn a{width:100%; border-radius:4px; display:Flex;padding:12px 0px; gap:8px; display:Flex; justify-content: center; align-items:center; background:#F8844A;} #productDetail .productWrap .hero .counselBtn a .tx{color:#fff;} #productDetail .productWrap .contents{width:100%;margin-top:80px;} #productDetail .productWrap .contents .tabmenu{width:100%; display:flex; background:#f7f7f7; border-radius:4px;padding:4px; box-sizing:border-box; position:sticky; top:20px;} #productDetail .productWrap .contents .tabmenu li{border-radius:4px; overflow:hidden;} #productDetail .productWrap .contents .tabmenu li a{display:inline-flex; gap:8px; padding:8px 12px;} #productDetail .productWrap .contents .tabmenu li a .icon svg path{fill:#999} #productDetail .productWrap .contents .tabmenu li a .text{font-size:14px; color:#999;} #productDetail .productWrap .contents .tabmenu li:hover a .icon svg path{fill:#F8844A} #productDetail .productWrap .contents .tabmenu li:hover a .text{color:#F8844A;} #productDetail .productWrap .contents .tabmenu li.current a{background:#F8844A} #productDetail .productWrap .contents .tabmenu li.current a .icon svg path{fill:#fff} #productDetail .productWrap .contents .tabmenu li.current a .text{color:#fff;} #productDetail .productWrap .contents .contentsWrap{width:100%; display:flex; flex-direction:column; gap:80px;} #productDetail .productWrap .contents .contentsWrap dd{width:100%;} #productDetail .productWrap .contents .contentsWrap dd:first-child{margin-top:20px;} #productDetail .productWrap .contents .contentsWrap dd .tit{width:100%; font-size:28px; font-weight:bold; color:#222;} #productDetail .productWrap .contents .contentsWrap dd .subs{font-size:16px; color:#444; line-height:24px; margin-top:16px;} #productDetail .productWrap .contents .contentsWrap dd .alList{width:100%; margin-top:20px; display:grid; gap:20px; grid-template-columns:repeat(2,1fr);} #productDetail .productWrap .contents .contentsWrap dd .alList li{padding:20px; box-sizing:border-box; border:1px solid #e5e5e5; border-radius:12px;} #productDetail .productWrap .contents .contentsWrap dd .alList li .subj{font-size:20px; color:#222; font-weight:600;} #productDetail .productWrap .contents .contentsWrap dd .detailList{display:flex; flex-direction:column; margin-top:20px;} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont{border-top:1px solid #e5e5e5} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont:last-child{border-bottom:1px solid #e5e5e5} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .titLine{width:100%; display:flex; align-items:center; justify-content:space-between} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .titLine .title{font-size:18px; font-weight:600; color:#222; padding:20px 0px;} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .titLine .button{width:16px; height:16px; position:relative;} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .titLine .button .hor{width:1px; height:16px; background:#222; position:absolute; left:50%; transform:translateX(-50%);} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .titLine .button .ver{width:16px; height:1px; background:#222; position:absolute; top:50%; transform:translateY(-50%);} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .droplist{width:100%;display:Flex; flex-direction:column; padding-bottom:20px; display:none;} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .droplist li{width:100%;display:Flex; border-radius:4px; padding:16px; box-sizing:border-box;} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .droplist li:nth-child(odd){background:#f7f7f7} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .droplist li .subj{width:20%; font-size:16px; color:#444; font-weight:500;} #productDetail .productWrap .contents .contentsWrap dd .detailList .cont .droplist li .dis{width:80%; font-size:16px; color:#444; word-break:keep-all;}