@charset "utf-8";

#pages{background: #2145B4;background: linear-gradient(180deg, #2145B4 0%, #00A8FF 100%);}
#pages .contents{}

.company{}
.company .section01{background: url(/_public/images2/contents/company_img01.png) no-repeat;background-size: cover;padding:210px 0 168px;}
.company .section01 .box{display: flex;gap:20px;justify-content: space-between;align-items: flex-end;}
.company .section01 .box .left{}
.company .section01 .box .left i{display: inline-block;}
.company .section01 .box .left i img{display: block;}
.company .section01 .box .left h2{margin-top: 30px;font-size: 70px;font-weight: bold;line-height: 1.29;letter-spacing: -1.4px;color: #fff;}
.company .section01 .box .left em{display: block;margin-top:50px;  font-size: 32px;font-weight: 600;line-height: 1.41;letter-spacing: -0.64px;color: #fff;}
.company .section01 .box .left p{margin-top:30px;font-size: 22px;font-weight: normal;line-height: 1.55;letter-spacing: -0.44px;color: #fff;}
.company .section01 .box .right{width:100%;max-width: 650px;}
.company .section01 .box .right ul{}
.company .section01 .box .right ul li{position: relative;padding:40px 40px 40px 160px;border-radius: 20px;}
.company .section01 .box .right ul li + li{margin-top:20px;}
.company .section01 .box .right ul li:first-child{background: #ececec;}
.company .section01 .box .right ul li:last-child{background: rgba(0,0,0,0.3);}
.company .section01 .box .right ul li i{position: absolute;left:30px;top:40px;display: inline-block;}
.company .section01 .box .right ul li i img{display: block;}
.company .section01 .box .right ul li h3{font-size: 24px;font-weight: bold;letter-spacing: -0.48px;color: #000;}
.company .section01 .box .right ul li p{margin-top:20px;font-size: 20px;font-weight: 500;line-height: 1.6;letter-spacing: -1px;color: #000;}
.company .section01 .box .right ul li:last-child h3{color:#fff;}
.company .section01 .box .right ul li:last-child p{color:#fff;}

.company .section02{padding:168px 0 125px;}
.company .section02 .box{display: flex;gap:20px;justify-content: space-between;}
.company .section02 .box .left{}
.company .section02 .box .left h2{font-size: 60px;font-weight: bold;line-height: 1.33;letter-spacing: -1.2px;color: #fff;}
.company .section02 .box .left h2 span{color: #1be5c3;}
.company .section02 .box .left p{margin-top: 50px;font-size: 22px;font-weight: 500;line-height: 1.64;letter-spacing: -0.44px;color: #fff;}
.company .section02 .box .right{padding:60px;border-radius: 20px;background: #ececec;width:100%;max-width:650px;}
.company .section02 .box .right h3{font-size: 24px;font-weight: bold;line-height: 1.67;letter-spacing: -0.48px;color: #202020;}
.company .section02 .box .right p{margin-top: 15px;font-size: 20px;font-weight: 500;line-height: 1.5;letter-spacing: -0.4px;color: #202020;}
.company .section02 .box .right ul{margin-top: 60px;display: flex;gap:10px;}
.company .section02 .box .right ul li{display: flex;flex-direction: column;align-items: center;flex: 1;}
.company .section02 .box .right ul li i{display: inline-block;}
.company .section02 .box .right ul li i img{display: block;}
.company .section02 .box .right ul li em{display: inline-block;margin-top:18px;font-size: 20px;font-weight: bold;line-height: 1;letter-spacing: -0.4px;color: #202020;}
.company .section02 .box .right ul li span{display: inline-block;margin-top:3px;font-size: 20px;font-weight: normal;line-height: 1;letter-spacing: -0.4px;color: #202020;}

.company .section03{padding:125px 0 137px;}
.company .section03 h2{text-align: center;font-size: 60px;font-weight: 800;line-height: 1.33;letter-spacing: -1.2px;color: #fff;}
.company .section03 .box{margin-top:100px;display: flex;gap:100px;}
.company .section03 .box > div{flex:1;max-width:50%;}
.company .section03 .box .l-cont{width:100%;max-width:600px;}
.company .section03 .box .l-cont .inbox{position: sticky;top:120px;text-align: center;}
.company .section03 .box .l-cont .inbox .slider{}
.company .section03 .box .l-cont .inbox .swiper-slide{}
.company .section03 .box .l-cont .inbox .swiper-slide img{display: block;}
.company .section03 .box .r-cont{position: relative;width:calc(100%  - 700px);}
.company .section03 .box .r-cont .bullet{position:absolute;display: inline-block;bottom: -19px;left: -13px;width:26px;height:26px;transition: all 0.4s;}
.company .section03 .box .r-cont .bullet img{display: block;}
.company .section03 .box .r-cont .bar{content: "";position: absolute;top:0;left:0;width:2px;height:2px;background: #fff;z-index: 10;transition: all 0.5s;}
.company .section03 .box .r-cont .bullet img{display: block;}
.company .section03 .box .r-cont ul{position: relative;padding-left: 60px;}
.company .section03 .box .r-cont ul:before{content: "";position: absolute;top:0;left:0;width:2px;height:100%;background: #fff;}
.company .section03 .box .r-cont ul li{position: relative;}
.company .section03 .box .r-cont ul li + li{margin-top:100px;}
.company .section03 .box .r-cont ul li h3{font-size: 54px;font-weight: 800;letter-spacing: -1.08px;color: #fff;margin-bottom: 10px;}
.company .section03 .box .r-cont ul li h3 span{display:inline-block;font-size: 30px;font-weight: 800;letter-spacing: -0.6px;color: #fff;}
.company .section03 .box .r-cont ul li p{position: relative;padding-left: 16px;font-size: 22px;font-weight: 500;line-height: 2.55;letter-spacing: -0.88px;color: #fff;}
.company .section03 .box .r-cont ul li p:before{content: "";position: absolute;top:26px;left:0;width:6px;height:6px;border-radius: 100%;background: #fff;}


.work{}
.work .hgroup{margin-bottom:40px;display: flex;align-items: center;justify-content:space-between;gap:35px;}
.work .hgroup h2{font-size: 60px;font-weight: 800;letter-spacing: -1.2px;color: #fff;line-height: 1;}
.work .hgroup i{flex:auto;height:1px;background: #fff;}
.work .hgroup em{display: inline-block;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #1be5c3;line-height: 1;}
.work .section01{ padding:170px 0 180px;background:url(/_public/images2/contents/portfolio_img01.png) no-repeat;}
.work .section01 ul{display: flex;flex-wrap: wrap;gap:20px;}
.work .section01 ul li{ padding:20px 0;border-radius: 5px; display: flex; gap:40px}
.work .section01 ul li div { margin-top: 15px;}
.work .section01 ul li h3{position: relative;padding-left: 80px;font-size: 34px;font-weight: bold;line-height: 1;letter-spacing: -0.68px;color: #fff;margin-bottom: 40px;}
.work .section01 ul li i{display: inline-block;position: absolute;top:-12px;left:0;}
.work .section01 ul li i img{display: block;}
.work .section01 ul li p{position: relative;padding-left:13px;font-size: 20px;font-weight: normal;line-height: 1.7;letter-spacing: -0.4px;color: #fff;}
.work .section01 ul li p:before{content: "";position: absolute;top:16px;left:0;width: 7px;height:1px;background: #fff;}
.work .section01 ul li p + p{}
.work .section01 ul li img { width: auto;transition: all 0.3s;}

/*
.work .section01 ul li{ width:calc(50% - 10px);padding:40px 30px;border-radius: 5px;}
.work .section01 ul li:nth-child(1),
.work .section01 ul li:nth-child(4){background: rgba(17, 47, 139, 0.9);}
.work .section01 ul li:nth-child(2),
.work .section01 ul li:nth-child(3){background: rgba(0, 0, 0, 0.1);} */






.portfolio{}
.portfolio .hgroup{margin-bottom:40px;display: flex;align-items: center;justify-content:space-between;gap:35px;}
.portfolio .hgroup h2{font-size: 60px;font-weight: 800;letter-spacing: -1.2px;color: #fff;line-height: 1;}
.portfolio .hgroup i{flex:auto;height:1px;background: #fff;}
.portfolio .hgroup em{display: inline-block;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #1be5c3;line-height: 1;}
.portfolio .hgroup .total{display: inline-block;line-height: 1;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #fff;}
.portfolio .hgroup .total span{display: inline-block;line-height: 1;color: #1be5c3;}
.portfolio .list{position: relative;}
.portfolio .list:before{content: "";position: absolute;right:0;bottom:0;background: url(/_public/images2/contents/portfolio_img03.png) no-repeat;background-size: cover;display:block;width: 29.5%;padding-top: 43%;}
.portfolio .list .section01{padding:170px 0 90px;background: bottom left url(/_public/images2/contents/portfolio_img01.png) no-repeat;background-size: cover;}
.portfolio .list .section01 ul{display: flex;flex-wrap: wrap;gap:20px;}
.portfolio .list .section01 ul li{width:calc(50% - 10px);padding:40px 30px;border-radius: 5px;}
.portfolio .list .section01 ul li h3{position: relative;padding-left: 80px;font-size: 34px;font-weight: bold;line-height: 1;letter-spacing: -0.68px;color: #fff;margin-bottom: 40px;}
.portfolio .list .section01 ul li i{display: inline-block;position: absolute;top:-12px;left:0;}
.portfolio .list .section01 ul li i img{display: block;}
.portfolio .list .section01 ul li p{position: relative;padding-left:13px;font-size: 20px;font-weight: normal;line-height: 1.7;letter-spacing: -0.4px;color: #fff;}
.portfolio .list .section01 ul li p:before{content: "";position: absolute;top:16px;left:0;width: 7px;height:1px;background: #fff;}
.portfolio .list .section01 ul li p + p{}
.portfolio .list .section01 ul li:nth-child(1),
.portfolio .list .section01 ul li:nth-child(4){background: rgba(17, 47, 139, 0.9);}
.portfolio .list .section01 ul li:nth-child(2),
.portfolio .list .section01 ul li:nth-child(3){background: rgba(0, 0, 0, 0.1);}
.portfolio .list .section02{position:relative;padding: 180px 0 160px;background:  url(/_public/images2/contents/portfolio_img01.png) no-repeat;background-size: 100%;}
.portfolio .list .section02:before{content: "";position: absolute;top:45%;left:0;display:block;padding-top: 36%;width: 100%;background: url(/_public/images2/contents/portfolio_img02.png) no-repeat;background-size: cover;}
.portfolio .list .section02 ul{display: flex;flex-wrap: wrap;gap:40px;}
.portfolio .list .section02 ul li{width:calc(50% - 20px);}
.portfolio .list .section02 ul li a{position: relative;display: block;overflow: hidden;    border-radius: 10px;}
.portfolio .list .section02 ul li .img{position: relative;}
.portfolio .list .section02 ul li .img img{display: block;}
.portfolio .list .section02 ul li .ct{position: absolute;top:30px;left:30px;padding:9px 30px;line-height: 1;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #fff;border-radius: 22px;}
.portfolio .list .section02 ul li .ct01{background: #4c26e9;}
.portfolio .list .section02 ul li .ct02{background: #00b5a3;}
.portfolio .list .section02 ul li .ct03{background: #1471db;}
.portfolio .list .section02 ul li .txt{position: absolute;left:0;bottom:-90px;background: rgba(0,0,0,0.3);padding:30px;width:100%;transition: all 0.3s;}
.portfolio .list .section02 ul li .txt h3{font-size: 28px;font-weight: bold;letter-spacing: -0.8px;color: #fff;}
.portfolio .list .section02 ul li .txt i{position: absolute;top:37px;right:30px;width:24px;height:24px;background: url(/_public/images2/icon/ico_plus.png) no-repeat;background-size: cover;}
.portfolio .list .section02 ul li .txt p{margin-top:20px;font-size: 18px;font-weight: 500;letter-spacing: -0.36px;color: #fff;transition: all 0.3s;opacity: 0;}
.portfolio .list .section02 ul li .txt .b-box{margin-top:10px;display: flex;gap:25px;transition: all 0.3s;opacity: 0;}
.portfolio .list .section02 ul li .txt .b-box span{position: relative;font-size: 18px;font-weight: 500;letter-spacing: -0.36px;color: #ccc;}
.portfolio .list .section02 ul li .txt .b-box span:before{content: "";position: absolute;top:4px;left:-12px;width:1px;height:18px;background: #ccc;}
.portfolio .list .section02 ul li .txt .b-box span:first-child:before{display: none;}
.portfolio .list .section02 ul li:hover .txt{bottom:0;background: rgba(0, 7, 28, 0.7);}
.portfolio .list .section02 ul li:hover .txt p{opacity: 1;}
.portfolio .list .section02 ul li:hover .txt .b-box{opacity: 1;}

.portfolio .view{padding:170px 0 160px;background: url(/_public/images2/contents/portfolio_img01.png) no-repeat;background-size: 100%;}
.portfolio .view .box{padding: 60px;border-radius: 10px;background: #fff;display: flex;gap:50px;}
.portfolio .view .box .left{position:relative;width:calc(100% - 560px);display: flex; flex-direction: column; justify-content: space-between;}
.portfolio .view .box .left a{display: inline-block;position: absolute;right:0;top:8px;}
.portfolio .view .box .left a img{display: block;}
.portfolio .view .box .left .ct{display: inline-block;line-height: 1;padding:9px 18px; font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #fff;border-radius: 22px;}
.portfolio .view .box .left .ct01{background: #4c26e9;}
.portfolio .view .box .left .ct02{background: #00b5a3;}
.portfolio .view .box .left .ct03{background: #1471db;}
.portfolio .view .box .left .ctgr{ background: #e3e7ed; color: #000;}
.portfolio .view .box .left h2{margin-top:10px; font-size: 34px;font-weight: bold;letter-spacing: -0.68px;color: #202020;}
.portfolio .view .box .left p{margin-top:15px;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #3d495f;}
.portfolio .view .box .left .util{margin-top:15px;display: flex;gap:10px;flex-wrap: wrap;}
.portfolio .view .box .left .util span{display: inline-block;padding:9px 17px;line-height: 1; border-radius: 10px;background: #f0f4f9; font-size: 16px;font-weight: 600;letter-spacing: -0.32px;color: #202020;}
.portfolio .view .box .left p em { padding: 5px 10px; background: #687ea5; border-radius: 99px; font-size: 18px; color: #fff; margin-right:10px }
.portfolio .view .box .left dl{margin-top:25px;}
.portfolio .view .box .left dl dt{width:103px;}
.portfolio .view .box .left dl dt span{position: relative;padding-left: 25px;  font-size: 18px;font-weight: 600;letter-spacing: -0.36px;color: #545d8b;}
.portfolio .view .box .left dl dt span:before{content: "";position: absolute;left:0;width:20px;height:20px;}
.portfolio .view .box .left dl dt span.icon01:before{background: url(/_public/images2/contents/portfolio_view_icon01.png) no-repeat;background-size: cover;}
.portfolio .view .box .left dl dt span.icon02:before{background: url(/_public/images2/contents/portfolio_view_icon02.png) no-repeat;background-size: cover;}
.portfolio .view .box .left dl dd{padding:0 0 15px 103px;font-size: 18px;font-weight: 600;letter-spacing: -0.36px;color: #202020;}
.portfolio .view .box .left .txt{ word-break: keep-all; margin-top:10px;padding:25px;border-radius: 10px;background: #f0f4f9;font-size: 18px;font-weight: 500;line-height: 1.78;letter-spacing: -0.36px;color: #202020;}
.portfolio .view .box .right{width:510px;}
.portfolio .view .box .right img{display: block;width:100%;}
.portfolio .view .btn-box{margin-top:40px;display: flex;justify-content: center;}
.portfolio .view .btn-box a{display: flex;width:200px;height:60px;align-items: center;justify-content: center;gap:28px;line-height: 1; font-size: 18px;font-weight: 500;color: #fff;border:1px solid #fff;border-radius: 30px;}
.portfolio .view .btn-box a:before{content: "";position: relative;width:30px;height:18px;background: url(/_public/images2/contents/portfolio_view_icon04.png) no-repeat;background-size: cover;}


@media all and (max-width:1800px) {}
@media all and (max-width:1600px) {}
@media all and (max-width:1460px) {
.br { display: none;}
}

@media all and (max-width:1280px) {
    .company .section01 .box .left h2 { font-size: 55px }
    .company .section01 .box .left em { font-size: 28px}
    .company .section01 .box .left p { font-size: 20px}
    .company .section01 .box .right ul li p {font-size: 18px}
    .company .section01 .box .left i img { width: 200px}
    .company .section02 .box .left h2 { font-size: 50px}
    .company .section02 .box .left p { font-size: 20px}
    .company .section02 .box .left p.br { display: none;}
    .company .section02 .box .right { padding: 40px}
    .company .section02 .box .right h3 { font-size: 20px}
    .company .section02 .box .right p br { font-size: 18px; display: none;}
    .company .section03 h2 { font-size: 55px}
    .company .section03 .box .r-cont ul li h3 { font-size: 45px}
    .company .section03 .box .r-cont ul li p {font-size: 20px}
    .company .section03 .box .l-cont { max-width: 500px}
    .work .section01 ul li h3 { font-size: 28px}
    .work .section01 ul li p { font-size: 18px}
    .work .section01 ul li img { width: 550px;}
    .work .section01 ul li div img { width: 100%}
    .portfolio .view .box { padding: 40px}
    .portfolio .view .box .left h2 { font-size: 32px}
    .portfolio .view .box .left p { font-size: 19px}

}


@media all and (max-width:1024px) {
    .company .section01 .box .left h2 { font-size: 42px }
    .company .section01 .box .left em {font-size: 24px}
    .company .section01 .box .left p { font-size: 18px}
    .company .section01 .box .right ul li { padding: 30px 30px 30px 130px}
    .company .section01 .box .right ul li i img { width: 80px}
    .company .section01 .box .right ul li p br { display: none;}
    .company .section02 .box .left h2 { font-size: 42px}
    .company .section02 .box .left p { font-size: 18px}
    .company .section02 .box .right p { font-size: 17px}
    .company .section02 .box .right ul li em { font-size: 18px}
    .company .section02 .box .right ul li span{ font-size: 18px}
    .company .section03 h2 { font-size: 40px}
    .company .section03 .box { gap:50px }
    .company .section03 .box .r-cont ul li h3 { font-size: 32px }
    .company .section03 .box .l-cont { max-width: 380px}
    .company .section03 .box .r-cont ul li p { font-size: 18px}
    .company .section01 .box .right { max-width: 100%}
    .work .section01 { padding: 120px 0 120px;}
    .work .section01 ul li i { width: 50px;}
    .work .section01 ul li img { width: 100%}
    .work .hgroup h2 { font-size: 40px}
    .work .section01 ul { flex-direction: column; }
    .work .section01 ul li { width: 100%;  gap: 10px;  flex-direction: column;}
    .work .section01 ul li h3 { font-size: 24px; margin-bottom: 30px;padding-left:60px;}
    .work .section01 ul li p { font-size: 16px}

    .portfolio { width: 100%}
    .portfolio .hgroup h2 { font-size: 40px}
    .portfolio .list .section02 ul { gap:20px; }
    .portfolio .list .section02 ul li .txt { background: rgba(0, 7, 28, 0.7); bottom: 0; padding: 20px}
    .portfolio .list .section02 ul li .txt p {opacity: 1; font-size: 16px; margin-top: 15px;}
    .portfolio .list .section02 ul li .txt .b-box {opacity: 1; margin-top: 5px;}
    .portfolio .list .section02 ul li .txt h3 { font-size: 22px; width: 96.4%;}
    .portfolio .list .section02 ul li .txt .b-box span { font-size: 15px;}
    .portfolio .list .section02 ul li .ct { font-size: 16px; padding: 7px 20px; top: 15px;  left: 15px;}
    .portfolio .list .section02 ul li .txt i { top: 22px; width: 20px; height: 20px; right: 20px;}

    .portfolio .view .box { flex-direction: column;gap: 30px;}
    .portfolio .view .box { padding: 30px}
    .portfolio .view .box .left .ct { font-size: 16px}
    .portfolio .view .box .left { }
    .portfolio .view .box .left div:first-child{ }
    .portfolio .view .box .left h2 {font-size: 25px; word-break: keep-all;}
    .portfolio .view .box .left p { font-size: 17px;letter-spacing: -1px;margin-top: 10px;}
    .portfolio .view .box .left dl dt { width: 85px}
    .portfolio .view .box .left dl dt span{ font-size: 15px}
    .portfolio .view .box .left dl dd { font-size: 15px;padding: 0 0 15px 90px;}
    .portfolio .view .box .right { width: 100%}
    .portfolio .view .box .left { width: 100%}
    .portfolio .view .box .left .txt { margin-top: 30px; padding: 15px; font-size: 15px}
    .portfolio .view .box .left .util span { font-size: 14px}
}


@media all and (max-width:768px) {
    .company .section01 { padding: 60px 0 100px; background: url(/_public/images2/contents/company_img01_m.png) no-repeat 50%; background-size: cover;}
    .company .section01 .box { flex-direction: column;}
    .company .section01 .box .left h2 { font-size: 32px}
    .company .section01 .box .left em { margin-top: 20px; font-size: 20px; font-weight: bold;}
    .company .section01 .box .left em br { display: none;}
    .company .section01 .box .left i img { display: none;}
    .company .section01 .box .right ul li { padding: 20px 20px 20px 100px}
    .company .section01 .box .right ul li i { left: 20px; top: 20px}
    .company .section01 .box .right ul li i img { width: 60px}
    .company .section01 .box .right ul li h3 { font-size: 19px}
    .company .section01 .box .right ul li p { font-size: 15px; margin-top: 10px;line-height: 1.4;}
    .company .section01 .box .left p { margin-top: 10px; font-size: 16px}
    .company .section02  { padding: 50px 0 80px}
    .company .section02 .box { flex-direction: column;}
    .company .section02 .box .left h2 { font-size: 32px}
    .company .section02 .box .left p {font-size: 17px; margin-top: 30px}
    .company .section02 .box .right { padding: 20px}
    .company .section02 .box .right h3 br {display: none;}
    .company .section02 .box .right ul { margin-top: 40px}
    .company .section02 .box .right ul li em { font-size: 16px}
    .company .section02 .box .right ul li span{ font-size: 16px}
    .company .section02 .box .right ul li i img { width: 80px}
    .company .section03 { padding: 50px 0 80px}
    .company .section03 .box { margin-top: 40px; flex-direction: column;}
    .company .section03 .box .r-cont { width: 100%}
    .company .section03 .box > div { max-width: 100%}
    .company .section03 .box .r-cont ul { padding-left: 30px}
    .company .section03 .box .r-cont ul li + li { margin-top: 60px;}
    .company .section03 .box .r-cont ul li p {  margin-bottom: 10px; font-size: 17px; line-height: 1.8;}
    .company .section03 .box .r-cont ul li p:before { top: 12px; }
    .company .section03 .box .l-cont { max-width: 100%}

    .portfolio .view .box { padding: 22px}
    .portfolio .view{ padding: 120px 0 160px}
    .portfolio .list .section02{ padding: 120px 0 100px}
    .portfolio .list .section02 ul li { width: 100%}
    .portfolio .list .section02 ul li .img img { width: 100%}
    .portfolio .hgroup .total { font-size: 16px}
    .portfolio .view .btn-box a { font-size: 16px}
    .portfolio .view .box .left p:first-child { }
    .portfolio .view .box .left p { font-size: 16px;margin-top: 10px;display: flex;align-items: center;}
    .portfolio .view .box .left p em { display: inline-block; font-size: 15px; margin-right: 10px;height: max-content;}



}


@media all and (max-width:460px) {}