html.show { overflow:hidden; }


.wrap { width:100%; }
.container { width:100%; max-width:1854px; margin: 0 auto; }

br.mobile { display:none; }

.outter { padding-top: 100px; box-sizing:border-box; transition:all 0.3s; }

.header { position:fixed; top:0; z-index:3; background:#fff; transition: all 0.3s; }

.header .container { display:flex; align-items:center; justify-content:space-between; transition: all 0.3s; }
.header .mLogo { width:203px; }
.header .mLogo a {  }
.header .mLogo a img { transition:all 0.3s; }

.header .gnb {  }
.header .gnb .de1_ul { display:flex; }
.header .gnb .de1_ul .de1_li { text-align: center; position:relative; }
.header .gnb .de1_ul .de1_li .de1_a { padding: 0 2.8rem; box-sizing:border-box; font-size:1.8rem; color:#2f2f2f; font-weight: 600; display:flex; align-items:center; justify-content:center; height:100px; transition:all 0.3s; }
.header .gnb .de1_ul .de1_li .de2_ul { position:absolute; background:rgba(255, 255, 255, 0.8); font-size:1.7rem; color:#3a3a3a; font-weight: 400; border: 1px solid #eaeaea; box-sizing:border-box; border-radius:2rem; width:200px; margin-left: -100px; left:50%; padding: 15px 0; display:none; backdrop-filter: blur(10px); }
.header .gnb .de1_ul .de1_li .de2_ul .de2_li { height:45px; display:flex; align-items:center; }
.header .gnb .de1_ul .de1_li .de2_ul .de2_li .de2_a { display:block; width:100%; transition:all 0.3s; }

.header .gnb .de1_ul .de1_li:hover .de1_a { color:var(--sky_B); }
.header .gnb .de1_ul .de1_li .de2_a:hover { color:var(--sky_M); }

.header .right { display:flex; align-items:center; gap:30px; }
.header .right .tel { display:inline-flex; width:143px; height:54px; align-items:center; justify-content:center; text-align: center; border: 1px solid #000; box-sizing:border-box; border-radius:500px; font-size:1.8rem; color:#2f2f2f; font-weight: 600; position:relative; transition:all 0.5s; overflow:hidden; }
.header .right .tel span { transition:all 0.5s; position:relative; z-index:2; }
.header .right .tel:before { content:""; display:block; height:2px; width:100%; background:#000; opacity:0; transition:all 0.5s; position:absolute; top:50%; margin-top: -1px; }

.header .right .tel:hover span { color:#fff; }
.header .right .tel:hover:before { transform:scaleY(28); opacity:1; }

.header .right .toggle {  }
.header .right .toggle a { display:flex; flex-direction:column; align-items:end; gap:7px; }
.header .right .toggle a span { display:inline-block; background:#0c0c0d; height:3px; }
.header .right .toggle a .bar01 { width:15px; }
.header .right .toggle a .bar02 { width:30px; }


.outter.fixed { padding-top: 80px; }

.header.fixed { background:transparent; padding-top: 10px; box-sizing:border-box; }
.header.fixed .container { background:rgba(255, 255, 255, 1); border-radius:500px; padding: 0 3rem; box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.08); }
.header.fixed .mLogo a img { width:auto; height:40px; }
.header.fixed .mLogo a svg,
.header.fixed .mLogo a svg image { width:118px; height:40px; }
.header.fixed .gnb .de1_ul .de1_li .de1_a { height:70px; }


.allGnb { position:fixed; right:0; top:0; width:100%; height:100vh; z-index:14; opacity: 0; transform: scale(0); transition: all 0.3s; transition-delay: 0s; }
.allGnb .inner { display:flex; height:100%; }
.allGnb .inner .close { position:absolute; right:5rem; top:5rem; }
.allGnb .inner .close a { position:relative; display:block; width:50px; height:50px; }
.allGnb .inner .close a span { display: inline-block; width: 100%; height: 2px; background: #fff; position: absolute; top: 50%; left: 0; }
.allGnb .inner .close a span:first-child { transform: rotate(-45deg); }
.allGnb .inner .close a span:nth-child(2) { transform: rotate(45deg); }
.allGnb .inner .left { width:400px; flex-shrink:0; display:flex; flex-direction:column; justify-content:space-between; padding: 5rem; box-sizing:border-box; border-right: 1px solid #333; }
.allGnb .inner .left .logo {  }
.allGnb .inner .left .info { display:flex; flex-direction:column; gap:14px; }
.allGnb .inner .left .info li { font-size:1.8rem; color:#fff; font-weight: 400; }
.allGnb .inner .left .info li span { display:block; font-size:1.6rem; color:#aaa; font-weight: 600; }

.allGnb .inner .anbOutter { width:calc(100% - 400px); height:100%; display:flex; align-items:center; justify-content:center; }
.allGnb .inner .de1_ul { display:flex; flex-direction:column; gap:5rem; width:100%; max-width:1000px; }
.allGnb .inner .de1_ul .de1_li { display:flex; align-items:center; }
.allGnb .inner .de1_ul .de1_li .de1_a { width:300px; flex-shrink:0; display:flex; font-size:3rem; color:#dadada; font-weight: 700; }
.allGnb .inner .de1_ul .de1_li .de2_ul { display:flex; align-items:center; width:calc(100% - 300px); flex-wrap:wrap; gap:2rem 0; }
.allGnb .inner .de1_ul .de1_li .de2_ul .de2_li { width:25%; }
.allGnb .inner .de1_ul .de1_li .de2_ul .de2_li .de2_a { font-size:2rem; color:#dadada; font-weight: 400; }

.allBg { width: 100%; height: 100vh; backdrop-filter:blur(10px); background:rgba(255, 255, 255, 0.9); background:rgba(0, 0, 0, 0.9); position: fixed; top: 0; left: 50%; transform: translateX(-50%); clip-path: circle(0% at 100% 0%); z-index: 13; transition: all 0.8s; }

.allGnb.show { transform: scale(1); opacity: 1; transition-delay: 0.3s; }
.allBg.show { clip-path: circle(145vmax at 100% 0); transition: all 1s; }



.footer { background:#070a0b url(../img/footer_bg.png) right 3rem top 2rem no-repeat;}
.footer .consultBox { text-align: center; padding: 7.8rem 0 7rem; box-sizing:border-box; }
.footer .consultBox .esgBox { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align: center; gap:2rem; margin-bottom:5rem; }
.footer .consultBox .esgBox .eTit { font-size:4rem; color:#dcdcde; font-weight: 600; }
.footer .consultBox .esgBox .img {  }
.footer .consultBox .tit { font-size:7rem; color:#fff; font-weight: 600; line-height: 9rem; text-align: center; margin-bottom: 7rem; }
.footer .consultBox a { display:inline-flex; width:350px; height:350px; border: 1px solid #fff; box-sizing:border-box; border-radius:50%; align-items:center; justify-content:center; text-align: center; font-size:3.2rem; color:#fff; font-weight: 600; position:relative; overflow:hidden; transition:all 0.5s; }
.footer .consultBox a span { transition:all 0.5s; mix-blend-mode:difference; }
.footer .consultBox a:before { content:""; display:inline-block; width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; left:50%; top:50%; margin-top: -10px; margin-left: -10px; transition:all 0.5s; opacity:0; }

.footer .consultBox a:hover { transform:rotateZ(-45deg); }
.footer .consultBox a:hover:before { opacity:1; transform:scale(20); }

.footer .infobox {padding-top: 5.8rem; border-top: 1px solid #7b7c7d; }
.footer .infoLine { display:flex; padding-bottom: 5.4rem; justify-content:space-between; }
.footer .infoLine .top {display: flex;flex-direction: column;justify-content: space-between;}
.footer .esgLine { width:100%; box-sizing:border-box; margin-top: 1rem; margin-bottom: 2rem;text-align: right; }
.footer .esgLine img { max-width:240px; }
.footer .infoLine .fnb { display:flex; gap:4.5rem; margin-bottom: 4.6rem; }
.footer .infoLine .fnb li {  }
.footer .infoLine .fnb li a { font-size:14px; color:#fff; font-weight: 500; }
.footer .infoLine .fnb li a span { color:var(--sky_M); }
.footer .infoLine .fnb li.intro a { font-size:14px; color:#ff9c00; font-weight: 500; }

.footer .infoLine .bottom { display:flex; /*padding: 4.6rem 0 5.4rem;*/ box-sizing:border-box; justify-content:space-between; padding-top: 0; }
.footer .infoLine .info { display:flex; flex-wrap:wrap; gap:1.8rem 0; width:680px; }
.footer .infoLine .info li { display:flex; font-size:14px; color:#fff; font-weight: 500; width:50%; max-width:345px; text-decoration: none; }
.footer .infoLine .info li a { text-decoration: none; color:#fff; }
.footer .infoLine .info li span { display:block; flex-shrink:0; width:130px; color:#aaa; }
.footer .infoLine .bottom .rightBox { display:flex; flex-direction:column; justify-content:space-between; }
.footer .infoLine .bottom .rightBox .tit { font-size:4rem; text-align: right; color:#fff; line-height: 5rem; }
.footer .infoLine .bottom .rightBox .tit strong { color:var(--sky_M); font-weight: 700; }
.footer .infoLine .bottom .copyright { font-size:14px; color:#fff; font-weight: 500; text-align: right; }
.footer .infoLine .bottom .copyright strong { color:var(--sky_M); }


.subHead { height:300px; display:flex; align-items:center; justify-content:center; }
.subHead .container { max-width:1400px; }
.subHead .subTit { font-size:5.6rem; color:#000; line-height: 7.6rem; }
.subHead .subTit strong { color:var(--sky_B); }



.borderCon { max-width:1854px; margin: 0 auto; }

.subBox { height:750px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align: center; background-size:cover; background-repeat:no-repeat; border-radius:30px; margin-bottom: 13rem; }
.subBox .tit { font-size:6rem; color:#fff; font-weight: 600; line-height: 8rem; }
.subBox .stit { font-size:3rem; color:#fff; font-weight: 600; margin-bottom: 2rem; margin-top: -2rem; }
.subBox .txtBox { margin-top: 7.8rem; }
.subBox .txtBox.mt0 { margin-top: 0; }
.subBox .txtBox .txt { font-size:2.4rem; color:rgba(255, 255, 255, 0.6); line-height: 3.8rem; margin-top: 4rem; }
.subBox .txtBox .txt:first-child { margin-top: 0; }
.subBox .txtBox .txt strong { color:#fff; }

.subBox.smallType { height:250px; background-position: center center; }
.subBox.noneBg { background-image:none; height:auto; padding: 11.8rem 3rem; box-sizing:border-box; }


.greeting .subBox { background-image:url(../img/content/greeting_intro.png); }
.mission .subBox { background-image:url(../img/content/mission_intro.png); }
.history .subBox { background-image:url(../img/content/history_intro.png); }
.organization .subBox { background-image:url(../img/content/organization_intro.png); }
.keyword .subBox { background-image:url(../img/content/keyword_intro.png); }
.viral .subBox { background-image:url(../img/content/viral_intro.png); }
.homepage .subBox { background-image:url(../img/content/homepage_intro.png); }
.hosting .subBox { background-image:url(../img/content/hosting_intro.png); }
.maintenance .subBox { background-image:url(../img/content/maintenance_intro.png); }
.video .subBox { background-image:url(../img/content/video_intro.png); }
.design .subBox { background-image:url(../img/content/design_intro.png); }
.nation .subBox { background-image:url(../img/content/nation_intro.png); }
.event .subBox { background-image:url(../img/content/event_intro.png); }
.notice .subBox { background-image:url(../img/content/notice_intro.png); }
.estimate .subBox { background-image:url(../img/content/estimate_intro.png); }
.deposit .subBox { background-image:url(../img/content/deposit_intro.png); }



.basicPop .pop { position:fixed; width:100vw; height:100vh; left:0; top:0; display:none; align-items:center; justify-content:center; z-index:3; }
.basicPop .pop > .inner { width: 100%; height: 100%; max-width: 80%; max-height: 90%; margin: 0; background:#fff; border-radius:3rem; padding: 30px 30px 50px; box-sizing:border-box; position:relative; z-index:3; text-align: center; }
.basicPop .pop:after { content:""; display:block; width:100%; height:100%; background:rgba(40, 40, 40, 0.55); position:absolute; z-index:2; }
.basicPop .pop > .inner {  }
.basicPop .pop > .inner .img { margin-bottom: 20px; }
.basicPop .pop > .inner .img img {  }
.basicPop .pop > .inner .close { font-size:12px; color:#fff; font-weight: 500; display:inline-flex; align-items:center; justify-content:center; text-align: center; padding: 0 20px; box-sizing:border-box; background:#0048ff; height:20px; border-radius:200px; }
.basicPop .pop > .inner .close.blue { background:#506afb; }
.basicPop .pop > .inner .close.purple { background:#322598; }
.basicPop .pop > .inner .close.sky { background:#0092f8; }

.basicPop .pop.active { display:flex !important; }

textarea.term_box { width:100%; height:100%; border: 0 !important; outline:0 !important; box-shadow:0 0 0 0 !important; resize:none; padding: 20px; box-sizing:border-box; }
.termTit { font-size:24px; color:#666; margin-bottom: 10px; border-bottom: 1px solid #dadada; box-sizing:border-box; padding: 0 20px; height:60px; display:flex; align-items:center; }



.policy .pop {  }
.policy .pop > .inner { max-width: 80%; max-height: 80%; overflow-y:hidden; text-align: left; padding: 0; }
.policy .pop > .inner .close { display:inline-block; background:transparent; height:auto; border-radius:0; position:absolute; right:10px; top:18px; }
.policy .pop > .inner .close:before { content:"\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 600; font-size:24px; color:#aaa; }

.policy .tit_box .btit { border-bottom: 1px solid #dadada; box-sizing:border-box; padding: 45px 40px 30px; background:#f7f7f7; margin-left: -8px; margin-top: -8px; margin-bottom: 0; }
.policy .term_box .pinner { border: 0; width:100%; font-size:16px; line-height: 1.5em; padding: 30px; box-sizing:border-box; }