@charset "utf-8";

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 400,
  'opsz' 48
}

*{margin:0;padding:0;box-sizing:border-box;color:inherit;flex-shrink:0; font-family: 'Pretendard Variable'; }
html, body { overflow-x:hidden; min-width: 1400px }
/*
html.no-scroll { overflow:hidden; }
body::-webkit-scrollbar {
    display: none;
}
*/
a {text-decoration:none}
a:hover{color:#7844e6;}
table {border-collapse:collapse;border-spacing:0}

.blind  {  position: absolute;width:1px !important;height:1px !important;clip: rect(0 0 0 0);margin: -1px;overflow: hidden;}


/* 우측 퀵메뉴 */
/*Top Button*/
#quickBar { position: fixed; bottom: 2%; right:30px; display: grid; grid-template-columns: 1fr; gap: 1em; justify-items: center; z-index: 99999; }
#quickBar .wrapper {background-color: rgba(255,255,255,0.9); padding: 1em; text-align: center; border-radius:2em; box-shadow:0 0 0.5em rgba(0,0,0,0.2); }
#quickBar .title { display:flex; justify-content: center; color:black; align-items:center; gap:6px; font-family: 'Open Sans'; font-size:15px; font-weight:bold; 
	text-transform:uppercase; line-height: 1.2; }
#quickBar .title h1 { font-size:16px; }
#quickBar .title .fa-chevron-up { font-size:10px; border-radius:50%; padding:4px; box-shadow:0 0 0.3em rgba(0,0,0,0.3); color:#888; }
#quickBar .qb_list a { display: grid; grid-template-columns:1fr; color:#5b5b5b; grid-row-gap: 0.3em; }
#quickBar .qb_list a:hover { color:#8a6bcd; }
#quickBar .qb_list a > p { font-size:15px; letter-spacing: -1pt; line-height:1.2; font-weight:500; }
#quickBar .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48; font-size: 2.2em; }
#quickBar .qb_list { display:grid; grid-gap:1em; grid-template-columns:1fr; margin-top:1em; }
.directBtn { display:block; width:100%; border-radius:2em; background-color:#e1e1e1; font-weight:900; letter-spacing: -0.5pt; margin-top: 1em; font-size: 14px; padding:3px 0; }
.directBtn:hover { color:#7844e6; }
.directBtn .fa-solid { font-size:10px; font-weight:900; }
#gofoot { margin-top:0.3em; }
.quickBar_btm { display:grid; grid-template-columns:1fr; gap:0.5em; }
.quickBar_btm a { display:grid; gap:3px; grid-template-columns:1fr; justify-items: center; }
.quickBar_btm a > p { font-weight:bold; }
.quickBar_btm a:hover { color:inherit; }


/* 상단 광고 영역 */
.topAdSwiper { width: 100%; height: 70px; background-color:#8a51ff; }
.topAdSwiper .swiper-wrapper { width:1280px; margin:0 auto; }
.topAdSwiper [class^=swiper-button]{
    transform:rotate(90deg);
    top: initial;
    left: initial;
    right: 10px;
    margin: 0;
}
.topAdSwiper .swiper-button-prev{
    top:0;
}
.topAdSwiper .swiper-button-next{
    bottom:0;
}
.topAdSwiper .swiper-button-next:after, .topAdSwiper .swiper-button-prev:after { font-size:1em; color:#b997ff; font-weight:bold; }

.topAd { height:100%; display:flex; align-items:center; justify-content: space-between; color:white; }
.topAd:hover > * { color:white; }
.topAd p { font-size:1.3em; }
.topAd p b { font-weight:bold; }

.topAd h1,  .topAd p.tit{ font-size:2em; text-align:center; font-weight:bold; }
.topAd h1 span ,  .topAd p.tit span{ background-color:#44287f; color:#fffd30; padding:5px 10px; border-radius:0.5em; }


/* 유틸리티 바 */
.utilityBar { width:100%; height:45px; border-bottom:1px solid #eee; font-size:15px; background-color: rgba(255,255,255,0.7); }
.utilityBar .wrapper { width:1280px; height: 100%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.utilityBar .leftUtil { display:flex; gap:1em; }
.utilityBar #group { height:100%; display:flex; align-items:center; gap:1em; }
.utilityBar .leftUtil a { color:#777; font-size: 14px; }
.utilityBar .leftUtil li::after { content:'|'; padding-left:1em; color:#ccc; font-size: 0.8em; }
.utilityBar .leftUtil li:last-child::after { content:''; }


/* 헤더 navbar */
#header { position:relative; z-index:9999; }
#headerBox { position: sticky; top: 0; width: 100%; height:98px; border-bottom:1px solid #eee; background-color:rgba(255,255,255,0.8); z-index: 999; background-color: #fff;}
.headerBoxWrap { width:1280px; height:100%; margin:0 auto; display: flex; justify-content: space-between; align-items:center; }
.headerBoxWrap .logo img { max-width:170px; }
.h_menu { display: flex; font-size:19px; gap:2em; font-weight:600; position:relative; align-items: center; }
.h_menu .quoteBox { padding:2px 15px 0; background-color:#fff; border:#2a156c; position:absolute; font-size:15px; font-weight:bold;
 color:#2a156c; border:1px solid #2a156c; border-radius:0.5em; left: 51.5%; transform: translateX(-50%); top: -17px; }
.h_menu .quoteBox:after { content: ''; display: block; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 1px solid #2a156c;
    border-bottom: 1px solid #2a156c; position: absolute; left: 50%; bottom:-5px; background-color: white; }
.h_menu ul.homepage { width: max-content; height:45px; display:flex; justify-content: center; background-color:#eee; border-radius:2em; position:relative; }
.h_menu ul.rest { display:flex; gap:1em; align-items:center; }
.h_menu ul.homepage > li { display:flex; align-items:center; justify-content: center; background-color:#f6f4fa; border-radius:2em; position:relative; }
.h_menu ul.homepage > li:first-child { width: 225px; border-radius: 2em 0 0 2em; border- }
.h_menu ul.homepage > li:last-child { width: 200px; border-radius: 0 2em 2em 0; border-left:0; padding-right: 0.8rem; }
.h_menu ul.homepage > li a { color:#000; display: flex; align-items: center; gap: 0.3rem; }
.h_menu .homepage li a.on { position:absolute; width: max-content; z-index: 1; color:white; background-color:#2a156c; border-radius:2em; 
	box-shadow:0 0 0.5rem rgba(42,21,108,0.5); padding:0.3rem 1.2rem; height:43px; }
.h_menu .homepage li a.active { position:absolute; width: max-content; z-index: 1; color:white; background-color:#2a156c; border-radius:2em; 
	box-shadow:0 0 0.5rem rgba(42,21,108,0.5); padding:0.3rem 1.2rem; height:43px; }
.h_menu ul.homepage > li.divWrap { position:absolute; left: 51.5%; top: 50%; transform: translate(-50%,-50%); }
.h_menu ul.homepage > li .numbering { font-size:12px; background-color:#fff; color:#000; border-radius:5px; padding:0.1rem 0.3rem; box-shadow: 0 0.15rem 0.4rem rgba(0,0,0,0.1); }
.h_menu ul.homepage > li .numbering::after { content:'종'; }
.h_menu ul.homepage > li a.active .numbering, .h_menu ul.homepage > li a.on .numbering { background-color:#8d77d0; color:#fff; }
.h_menu .divider { font-weight:300; padding:0 10px; color:#d6caed; }
.r_menu { display: flex; gap:3.5em; font-size:14px; font-weight:600; }
.r_menu li a { height: 100%; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; }
.easyPay { position:relative; }
.easyPay a { height: 60px !important; align-content: baseline !important; }
.easyPay p { width:80px; height: 31px; background:url('../images/icons/h_icon03-1.png') no-repeat; background-size:69px 31px; text-indent:-999999px; position:absolute; bottom:0; }
#nav_dropdown { display:none; background-color:#f7f7f7; width:100%; height:55vh; position:absolute; padding-bottom:45px; z-index:99; top: 143px; }
#nav_dropdown .navInner { padding:3em 0; overflow-x: hidden; overflow-y: scroll; height: 100%; }
#nav_dropdown .navInner .h_tabsect { width:1280px; margin:0 auto; }
#nav_dropdown .accordion-content { display: none; transition: max-height 0.2s ease-out; padding:1em 1.5em; border: 1px solid #eee; 
	background-color:#fff; position: absolute; z-index:1; width: 100%; }
#nav_dropdown .accordion-content a { font-size: 16px; line-height: 2.2; font-weight: 400; color: #777; position: relative; padding-left: 10px; }
#nav_dropdown .accordion-content li a::before { position:absolute; top:50%; left:0; transform: translateY(-50%); content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background-color:#eee; }
#nav_dropdown .accordion-content a:hover { color:#888; font-weight:bold; }
#nav_dropdown .accordion-content a .highlight { color:#ff723a; }
#nav_dropdown .accordion-header { cursor: pointer; padding:1em 1.5em; border: 1px solid #eee; margin-bottom: -1px; position: relative; background-color: #fff; 
	margin-top: 0; border-radius:0.5em; font-size:18px; font-weight:bold; }
#nav_dropdown .accordion-item { margin-bottom:1em; position: relative; }
#nav_dropdown .accordion-header i { position: absolute; right:1.2em; top: 50%; transform: translateY(-50%); }
#nav_dropdown .accordion-header .fa-chevron-up { transform: translateY(-50%) rotate(180deg); }
#nav_dropdown .accordion { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap:1.5em; max-width:1280px; margin:0 auto; }
#nav_dropdown .accordion-header.active { border-radius: 0.5em 0.5em 0 0; }	
.h_menu .rest > li { position:relative; padding: 0 0.7em; }
.h_menu .rest > li > a { line-height:100px; }
.h_menu .dropdown-menu { width: max-content; /*display: none;*/ position: absolute; top: 98px; left: 50%; transform: translateX(-50%); background-color: white; border: 1px solid #eee; 
	padding: 0.8em 2em; }
.h_menu .rest .dropdown-menu a { display: block; font-size: 17px; font-weight: 500; line-height: 2; text-align: center; }
#nav_dropdown .closeTab { position:absolute; left:0; bottom:0; width:100%; height:45px; background-color:#424242; color:#b5b5b5; }
#nav_dropdown .closeTab .wrapper { width:1280px; margin:0 auto; text-align:right; line-height:45px; }
#nav_dropdown .closeTab button { color:#b5b5b5; font-size:20px; display: inline-flex; align-items: center; }
#nav_dropdown .closeTab button > span { color:#fff; }
.counts { font-weight:lighter; font-size:16px; color:#aaa; padding:0 3px; transform: translateY(-1px); display: inline-block; }
.newTag { 
	text-transform: lowercase;
    font-style: italic;
    background-image: linear-gradient(-225deg, #EFE9F4 0%, #c1c1ed 29%, #93a5db 67%, #5078F2 100%);
    background-size: 200% auto;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 1.5s linear infinite;
    display: inline-block;
    transform: translateY(-6px);
    font-size: smaller;
    font-weight: 900;
}
@keyframes textclip {
	to {
		background-position: -200% center;
	}
}
.nIcon, .hIcon { display: inline-block; text-transform: uppercase; color: white; width: 15px; height: 15px; border-radius: 50%; font-weight: 600; text-align: center;
    line-height: 15px; font-size: 11px; transform: translateY(-2px); }
.nIcon { background-color:#4774ff; }
.hIcon { background-color:#ed1b23; }

.sticky { position: fixed; top: 0; width: 100%; }
.nav-item {display:inline-block;cursor: pointer; padding:0.5em 1em; border: 1px solid #eee; margin-bottom: -1px; position: relative; background-color: #fff; 
	margin-top: 0; border-radius:0.5em; font-size:18px; font-weight:bold;}

/* Header Navigation (renewed) */
#nav-rollover { position:absolute; background-color:white; width:1220px; top: 87px; left: 50%; transform: translateX(-50%); padding:1.8rem 1.5rem 1.5rem; border-radius:1rem; filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.15)); }
.rollover-in { display:none; position:relative; display: flex; gap:0.5rem; justify-content: space-between; }
.rollover-in::before { display:block; content:''; /*background-image:url(/images/quotebox-tail.png);*/ width:24px; height:11px; background-size:100%; position:absolute; }
.rollover01 .rollover-in::before { top:-40px; left:306px; }
.rollover02 .rollover-in::before { top:-40px; left:506px; }
.rollover-in .column { flex: 1; }
.rollover-in .column:last-child { }
.category-wrap { margin-bottom:0.5rem; border:1px solid #eee; border-radius:1rem; padding:1rem; } 
.category-wrap ul { padding:0.8rem 0.5rem 0; }
.category-wrap ul li { padding-bottom:0.3rem; }
.category-wrap ul li:last-child { padding-bottom:0; }
.category-wrap ul li a { font-size:0.9rem; font-weight:500; color:#555; }
.category-wrap ul li a:hover { color:#a17af5; }
.category-title { background-color:#f6f6f6; font-weight:800; padding:0.3rem 0.5rem; border-radius:5px; font-size:0.95rem; }
.category-title .numbering { color:#aaa; font-size:0.7rem; font-weight:300; display:inline-block; transform:translateY(-1px); }
.labels { width: 33px; text-align:center; border-radius:3px; background-color:#eee; font-size:0.7rem; font-weight:600; margin-left: 3px; display: inline-block; }
.labels2 { width: 27px; text-align: center; border-radius: 10px 10px 10px 0; background-color: #ff6e79; color: white; font-size: 0.7rem;
	font-weight: 600; display: inline-block; transform: translateY(-3px); }
.labels.new-label { color:#6676ff; background-color:#e6e8ff; }
.labels.hot-label { color:#ff6e79; background-color:#ffe1e3; }
#nav-rollover .close-btn { position:absolute; right:-13px; top:-26px; }
#nav-rollover .close-btn button { font-size:1.3rem; color:#9c9fbd; }
#nav-rollover.rollover01,
#nav-rollover.rollover02 {
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; opacity: 0; visibility: hidden; 
}
.h_menu .rest .dropdown-menu { overflow: hidden; max-height: 0; display: none;	transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; }
.h_menu .rest .dropdown-menu.show { max-height: 500px; display: block; }

.rollover02 .rollover-in { display: grid; grid-template-columns:repeat(4, 1fr); grid-template-rows: auto auto; gap: 10px; }
.rollover02 .item1 { grid-column: 1 / 2; grid-row: 1 / 2; height: max-content; }
.rollover02 .item2 { grid-column: 2 / 5; grid-row: 1; }
.rollover02 .item2 .list-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.rollover02 .item3 { grid-column: 1; grid-row: 2; }
.rollover02 .item4 { grid-column: 2; grid-row: 2 / 4;}
.rollover02 .item5 { grid-column: 3; grid-row: 2 / 3;}	
.rollover02 .item6 { grid-column: 4; grid-row: 2 / 4;}	
.rollover02 .item { margin:0; }
.shortcut-wrap { border:1px solid #eee; border-radius:1rem; padding:1.5rem; padding-bottom:11rem; background-image:url(/images/navImg02.png); background-position: 112% 92%; background-repeat: no-repeat; }
.shortcut-wrap .category-title { background-color:transparent; padding:0; padding-bottom:1rem; }
.shortcut-wrap a { font-weight:500; font-size:0.9rem; color: #555; }
.shortcut-wrap a::after { content: '\f105'; font-family: 'fontAwesome'; color: #b2b2b2; font-size: 1.2rem; display: inline-block; transform:translateY(1px); padding-left:6px; }
.shortcut-wrap a:hover, .shortcut-wrap a:hover::after  { color:#a17af5; }
.rollover-in .classify { padding-bottom:0.5rem; margin-bottom:0.5rem; border-bottom:1px solid #eee; }
.rollover-in .classify a { color:#8e8f8f; font-size:0.8rem;  font-weight:700; }

#nav-rollover .all-wrap { background-color: #f2edff; border:1px solid #e7dff9; font-weight:500; border-radius:1rem; font-size: 0.95rem; margin-bottom:0.5rem; }
#nav-rollover .all-wrap a {  padding:1rem 1.5rem; display:block; }
#nav-rollover .all-wrap a .numbering { font-size:0.7rem; font-weight:300; color:#aaa; }

#nav-rollover .all-wrap2 { position:absolute; bottom:0; right:0 ;font-size:0.95rem; padding:1rem; }



/* tooltip */
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltipImg { visibility: hidden; width:250px; height:190px; background-color:rgba(0,0,0,0.7); color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; margin-left: 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltipImg { visibility: visible; }
.tooltip .tooltipImg img { object-fit: cover; width: 100%; height: 100%; padding: 0.3em 0.5em; }



/* 메인슬라이더 */
#mainSlider { height:670px; }
.mainSlider { height:100%; }
.mainSlider .swiper-button-next, .mainSlider .swiper-button-prev { display:none; width:auto; height:auto; color:#ccc; top: 40%; }
.mainSlider .swiper-button-prev { left:8%; }
.mainSlider .swiper-button-next { right:8%; }
.mainSlider .swiper-button-next:after, .mainSlider .swiper-button-prev:after { content:''; }
.mainSlider .swiper-button-prev:after { display:block; width:61px; height:116px; background-image:url('../images/icons/mainSlider_prev.png'); }
.mainSlider .swiper-button-next:after { display:block; width:61px; height:116px; background-image:url('../images/icons/mainSlider_next.png'); }
.mainSlider .swiper-pagination-bullet-active { background-color:#897ca3; padding: 0 1em; border-radius: 5px; }
.mainSlider .swiper-slide { position:relative; }
.mainSlider .swiper-slide .bg-wrap { max-width:100%; height: 100%; text-align:center; }
.mainSlider .swiper-slide .bg-wrap img { max-width:100%; height:100%; object-fit:cover; }
.mainSlider .swiper-slide.img01 { background-color:#f8f8f8; }
.mainSlider .swiper-slide.img02 { background-color:rgb(247, 253, 255); }
.mainSlider .swiper-slide.img03 { background-color:rgb(217 224 243); } 
.mainSlider .swiper-slide.img04 { background-color:rgb(249 249 249); } 
.mainSlider .sliderTxt { width:1280px; margin:0 auto; padding:11em 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 1; }
.mainSlider .sliderTxt h1 { font-size:71px; font-weight:bold; line-height:1.2; margin-bottom:20px; }
.mainSlider .sliderTxt p { font-size:19px; color:#666; margin-top:0.5em; margin-bottom:2em; letter-spacing: -1pt; }
.mainSlider .sliderTxt .titlePhrase h2 { font-size: 4.5em; font-weight: 400; line-height: 1.3; letter-spacing: -2pt; }
.mainSlider .sliderTxt .titlePhrase h2 b { font-weight:bold; }
.mainSlider .btnWrap { display:flex; gap:1em; }
.mainSlider .btnWrap a { display:inline-block; }
.mainSlider .btnWrap button { padding:0.7em 1.2em; border:1px solid #333; border-radius:3em; font-size:18px; font-weight:bold; letter-spacing:-0.5pt; }
.mainSlider .btnWrap a:first-child button { background-color:#333; color:white; }
.mainSlider .btnWrap a:nth-child(2) button { background-color:#fff; }


/* 메인슬라이더 하단 (midBar) */
#midBar { width:100%; height:50px; position: relative; z-index: 1; border-top:1px solid #eee; border-bottom:1px solid #eee; background-color:white; }
.midBarWrap { width:1280px; height: 100%; margin:0 auto; display:grid; align-items:center; grid-template-columns: 1fr 2fr; position: relative; gap:4em; }
.midBar_head { display:flex; align-items:center; gap:1em; border-right:1px solid #eee; }
.midBar_head > span, .midBar_tail > span, .midBar_tail > h2 { font-size:17px; }
.midBar_head p { color:#7844e6; font-size:22px; font-weight:900; display: flex; align-items: center; gap:10px; }
.midBar_tail { height:100%; max-height: 50px; display:flex; align-items: center; gap:3em; }
.midBar_tail .popularLive { height:100%; margin-left: initial; font-size:17px; line-height: 2.2; }
.popularLive .swiper-slide > a { display: flex; align-items: center; gap:1em; }
.popularLive .swiper-slide em { font-weight: 900; color: #7844e6; font-size: x-large; }


/* 포트폴리오 */
#portfolio { padding:7em 0; }
#portfolio .prtWrap { width:1280px; margin:0 auto; }
#portfolio .titleWrap { text-align:center; }
#portfolio .titleWrap h2 { font-size:45px; font-family: 'Open Sans'; font-weight: bold; }
#portfolio .titleWrap h2::after { content:''; display:inline-block; border-radius:50%; width:10px; height:10px; background-color:#7844e6; transform: translateY(-23px); }
#portfolio .titleWrap p { font-size:19px; margin-bottom:3em; }
#portfolio .contWrap { display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:2em; }
#portfolio .contWrap li > a { display:block; }
#portfolio .contWrap li > a .imgWrap { border-radius:10px; box-shadow:0 0 1em rgba(0,0,0,0.2); transform: scale(1); overflow:hidden; height: 275px; }
#portfolio .contWrap li > a .imgWrap img { width:100%; transition: all 0.3s ease-in-out; aspect-ratio: 2 / 1.35; }
#portfolio .contWrap li > a:hover { color:inherit; }
#portfolio .contWrap li > a:hover .imgWrap img { transform: scale(1.05); }
#portfolio .contWrap li > a .imgWrap::after { content: ""; opacity: 0; transition: all 0.3s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.2); }
#portfolio .contWrap li > a:hover .imgWrap::after { opacity: 1; }
#portfolio .txtarea { display:grid; grid-template-columns:1fr 60px; grid-row-gap:0.5em; margin:1em 0; }
#portfolio .txtarea h3 { font-size:24px; font-weight:bold; }
#portfolio .txtarea .viewBtn { display:flex; align-items:center; gap:5px; font-size:14px; font-weight:bold; color:#777; text-transform: uppercase; margin-left: -9px; }
#portfolio .btnWrap { display:flex; gap:0.5em; }
#portfolio .btnWrap button { background-color:#eee; padding:5px 10px; color:#777; font-weight:bold; font-size:14px; }
#portfolio .txtarea *:nth-child(3) { grid-column: span 2; }
#portfolio .allBtnWrap { text-align:center; margin:3em 0; }
#portfolio .allBtn { padding:0.7em 2.5em; background-color:#fff; border:1px solid #ddd; border-radius:3em; color:#666; font-size:18px; font-weight:500; letter-spacing:-1pt; }
#portfolio .allBtn:hover { background-color:#f9f9f9; }


/* 광고영역 (포트폴리오 하단) */
#pfBtm_ad { width:100%; height:335px; background:url('../images/netpro_img01.jpg') no-repeat 50% 100%; background-size:cover; background-attachment: fixed; }
#pfBtm_ad .txtWrap { width:1280px; height:100%; margin:0 auto; color:white; display:flex; align-items:center; align-content: center; flex-wrap:wrap; gap:1em; line-height:1.3; }
#pfBtm_ad .txtWrap h2 { font-size:21px; font-weight:bold; width:100%;max-width: 100%; }
#pfBtm_ad .txtWrap p { width:100%; font-size:29px;  max-width:640px; text-align:justify; }


/* NETPRO가 제공하는 홈페이지 5종 */
#homepg_5types { margin:4em auto; padding:8em 0; }
#homepg_5types .wrapper { width:1280px; margin:0 auto;}
#homepg_5types .toptitle { margin: 0 auto; width: fit-content; font-size:35px; font-weight:bold; position: relative; }
#homepg_5types .toptitle::before { background:url("../images/netpro_spin_img.png") center/cover no-repeat; }
#homepg_5types .toptitle h2 {font-size:35px;line-height:52.5px;}
#homepg_5types .toptitle h2::after { content:''; display:inline-block; border-radius:50%; width:10px; height:10px; background-color:#7844e6; transform: translate(3px, -29px); }
#homepg_5types .toptitle h2 > em { font-family: 'Open Sans'; font-weight: bold; letter-spacing: -2pt; font-size: 42px; transform: translateY(3px); display: inline-block; }
#homepg_5types .tabpills ul { display:flex; justify-content:center; margin:3em 0 4em; }
#homepg_5types .tabpills ul li { display:flex; align-items:center; }
#homepg_5types .tabpills button { font-size:19px; font-weight:400; }
#homepg_5types .tabpills ul li::after { content:''; display:inline-block; width:1px; height:20px; border-right:1px solid #c6c6c6; margin:0 1.5em; }
#homepg_5types .tabpills ul li:last-child::after { display:none; }
#homepg_5types .tabpills button.active { font-weight:bold; position:relative; }
#homepg_5types .tabpills button.active::after { content:''; width:100%; height:10px; display:block; background-color:rgba(104, 46, 208, 0.2); position:absolute; bottom: 2px; }
#homepg_5types .swiper { width:80%; overflow:visible; }
#homepg_5types .swiper-button-next, #homepg_5types .swiper-button-prev { transition:all 0.3s; opacity:0; width:82px; height:82px; background-color: rgba(255,255,255,0.8); border-radius: 50%; padding: 3em; box-shadow: 0 0 1em rgba(0,0,0,0.3);}
#homepg_5types .tabCont:hover .swiper-button-next, #homepg_5types .tabCont:hover .swiper-button-prev { opacity:1; }
#homepg_5types .swiper-button-next:after, #homepg_5types .swiper-button-prev:after { font-size:2em; color:#969696; }
#homepg_5types .swiper-button-prev:after { transform: translateX(-3px); }
#homepg_5types .swiper-button-next:after { transform: translateX(3px); }
.fivetypes .swiper-wrapper { gap:3.5em; }
.fivetypes .swiper-slide { width:500px; background-color:white; box-shadow:0 0 1.5em rgba(0,0,0,0.1); overflow: hidden; position:relative; border-radius: 0.5em; }
.fivetypes .imgWrap { overflow:hidden; }
.fivetypes .imgWrap > img { width:100%;height:318px;object-fit:cover; }
.fivetypes .contWrap { padding:2em; padding-bottom: 100px; text-align:left; position: relative; z-index: 1; box-shadow: 0em -0.5em 1em rgba(0,0,0,.05); display: flex; flex-wrap: wrap;
    gap: 0.3em; }

.fivetypes .imgWrap { overflow:hidden; position:relative; }
.fivetypes .imgWrap::after { 
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; 
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 200%);
	opacity: 0.1;
	z-index:2;
}
.fivetypes .imgWrap:hover::after { opacity:0.5; }
.fivetypes .imgWrap:hover img { scale:1.05; transition:0.2s; }

.fivetypes .contWrap > * { width:100%; }
.fivetypes .contHead { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.fivetypes .contHead > strong { color:#ff5f00; background-color:#ffefe5; border-radius:2em; padding:3px 0.7em; display:inline-block; font-weight:700; font-size:16px; }
.fivetypes .contHead .btnWrap { display:flex; gap:0.5em; justify-content: flex-end; }
.fivetypes .contHead .btnWrap a { background-color:#eee; border-radius:50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.fivetypes .contHead .btnWrap a svg { width: 25px; height: 25px; }
.fivetypes .contHead .btnWrap a:hover { background-color:#fff; border:1px solid #ff5f00; }
.fivetypes .contHead .btnWrap a:hover svg { color:#ff5f00; }
.fivetypes .contWrap .title { font-size:23px; font-weight:bold; }
.fivetypes .contWrap .context { font-size:15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fivetypes .contWrap .txtWrap:hover { color:#777; }
.fivetypes .contFoot { width:100%; height:75px; display: grid; grid-template-columns: 1fr 2% 1fr; align-items: center; justify-items: center; position:absolute;
	 bottom:0; border-top:1px solid #eee; z-index:1; }
.fivetypes .contFoot li { font-size:17px; text-align:center; }
.fivetypes .contFoot > svg { width:15px; height:15px; }
.fivetypes .contFoot li a b { font-weight:bold; }
.fivetypes .contFoot li a i { color:#ff740b; }
.fivetypes .contFoot li a:hover { color:#ff5f00; }
#homepg_5types .tabCont { display:none; }


/* 넷프로를 자주 방문하시나요? */
#quickVisit { background-color:#f9f9f9; padding:8em 0; }
#quickVisit .wrapper { width:1280px; margin:0 auto; }
#quickVisit .toptitle, #quickVisit .toptitle h2 { margin: 0 auto 1em; width: fit-content; font-size: 33px; font-weight: bold; }
#quickVisit .contWrap { display:grid; grid-template-columns:repeat(6, 1fr); gap:2em; }
#quickVisit .contWrap li { width:100%; aspect-ratio: 1/1; background-color:white; border-radius:2em; box-shadow:0 0 1em rgba(0,0,0,0.1); transition:transform 0.1s ease-in-out; }
#quickVisit .contWrap li:hover { box-shadow:0 0 1em rgba(252,113,0,0.5); transform: translateY(-20px); }
#quickVisit .contWrap li a { width:100%; height:100%; overflow:auto; display:grid; grid-template-columns:1fr; align-items:center; justify-items: center; 
	grid-row-gap:1em; align-content: center; }
#quickVisit .contWrap h4 { font-size:17px; color:#777; font-weight:600; }
#quickVisit .contWrap img { width:70px; }


/* 구매형 vs 임대형 */
#hpgOptions { width:100%; height:480px; position: relative; }
#hpgOptions::before { content:''; display: inline-block; background-color:#7442ce; width:50%; height:100%; position:absolute; left:0; top:0; z-index:-1; }
#hpgOptions::after { content:''; display: inline-block; background-color:#d5712e; width:50%; height:100%; position:absolute; right:0; top:0; z-index:-1; }
#hpgOptions .wrapper { width:1280px; height:100%; margin:0 auto; background:url('../images/mockupImg.png') no-repeat 45% 60%; }
#hpgOptions .contWrap { display:grid; grid-template-columns:50% 50%; padding: 9em 0; }
#hpgOptions .contWrap li { color:white; }
#hpgOptions .contWrap li h2 { font-size:38px; font-weight:bold; margin-bottom:0.5em; } 
#hpgOptions .contWrap li dl { font-size:24px; letter-spacing:-1pt; }
#hpgOptions .contWrap li dl dd { margin-bottom: 10px; }
#hpgOptions .contWrap li dd::before { content:''; display:inline-block; width:36px; height:36px; margin: 0 10px; }
#hpgOptions .contWrap li:nth-child(1) dd::before { background:url('../images/icons/checkIcon1.png') no-repeat; float: left; margin-left:0; }
#hpgOptions .contWrap li:nth-child(2) dd::before { background:url('../images/icons/checkIcon2.png') no-repeat; float: right; margin-right:0; }
#hpgOptions .contWrap li dl dd > p { display:inline-block; }
#hpgOptions .contWrap li dl dd > p strong { font-weight:bold; font-size:28px; color:#fff000; }
#hpgOptions .contWrap li:nth-child(2) { text-align:right; }
#hpgOptions .contWrap li:nth-child(2) dl dd > p span { position:relative; z-index:0; }
#hpgOptions .contWrap li:nth-child(2) dl dd > p span::before { content:''; display:block; width:87px; height:22px; 
	background:url('../images/icons/underline_effect.png') no-repeat; position:absolute; bottom:-7px; right: 40px; z-index: -1; }


/* 공지사항 Board */
#index_board { padding:5em 0; background:url('../images/clockImg.png') no-repeat 112% 20%; }
#index_board .wrapper { width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; grid-column-gap:5em; }
#index_board .toptitle { line-height:1.3; margin-bottom:1em; }
#index_board .notice_brd .toptitle { margin-bottom:1.6em; }
#index_board .toptitle > p { color:#a3a3a3; font-size:25px;font-weight:400; font-family: 'Outfit'; }
#index_board .toptitle > h2 { font-size:36px; font-weight:bold; letter-spacing:-2pt; }
#index_board .toptitle > h2 > i { font-size:25px; transform: translateY(-7px); padding-left: 7px; }
#index_board .tabpills { display:flex; gap:0.5em; margin-bottom:1.5em; }
#index_board .tabpills > li {  }
#index_board .tabpills > li > button { border:1px solid #333; border-radius:2em; font-size:17px; font-weight:600; padding:0.5em 0.8em 0.4em; }
#index_board .tabpills > li button.active { background-color:#333; color:white; }
#index_board .boardList > li { border-top:1px solid #ddd; padding:1.2em 0; display:flex; align-items: center; justify-content: space-between; }
#index_board .boardList > li:last-child { border-bottom:1px solid #ddd; }
#index_board .boardList > li > a { display:flex; align-items: center; }
#index_board .boardList > li > a > * { font-size:17px; font-weight:400; }
#index_board .boardList > li > a .cate { font-size:17px; color:#777; padding-right:10px; font-weight: 600; }
#index_board .boardList > li > a .new { font-size:17px; color:#ff0000; border:none; font-weight: 600; }
#index_board .boardList > li > .date { font-size:15px; color:#777; font-weight:400; }
#index_board .boardList > li > a > P { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 380px; }
#index_board .tabCont { display:none; }


/* 고객지원센터 */
.cs_brd .infoWrap > dl > * { display:inline-block; }
.cs_brd .csCenter > dl > * { display:inline-block; }
.cs_brd .csCenter > dl > dt { font-size:19px; font-weight:bold; padding-right: 1em; }
.cs_brd .csCenter dd.tel { color:#ff5f00; font-size:40px; font-weight:500; }
.cs_brd .csHours > dl > * { display:inline-block; }
.cs_brd .csHours > dl { font-size:19px; font-weight:500; letter-spacing:-0.5pt; }
.cs_brd .csHours > dl > dt { margin-right:1em; }
.cs_brd .email { margin-top:0.7em; font-size:19px; font-weight:500; }
.cs_brd .infoBox { height:147px; padding:2em; border:3px solid #f5f5f5; border-radius: 1em; margin:1em 0; }
.cs_brd .infoBox.bankInfo { background-color:#f5f5f5; }
.cs_brd .infoBox .line { display:inline-block; width:100%; border-top:1px solid #999; text-indent:-9999999px; position:absolute; top: 50%; z-index:0; }
.cs_brd .boxTitle { position:relative; }
.cs_brd .boxTitle > h2 { position:inherit; z-index:1; color:#999; font-size:17px; font-weight:bold; text-align:center; margin-bottom:1em; }
.cs_brd .infoBox.bankInfo .boxTitle > h2 { text-shadow:-3px -3px 0 #f5f5f5, 3px -3px 0 #f5f5f5, -3px 3px 0 #f5f5f5, 3px 3px 0 #f5f5f5; }
.cs_brd .infoBox.nameServ .boxTitle > h2 { text-shadow:-3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff; }
.cs_brd .infoBox.bankInfo .boxCont { display:flex; gap: 2em; justify-content: center; align-items: center; }
.cs_brd .infoBox.bankInfo .boxCont p { font-size:25px; font-weight:bold; line-height: 1; }
.cs_brd .infoBox.bankInfo .boxCont p span { font-size:17px; font-weight:600; }
.cs_brd .infoBox.nameServ .boxCont li { display: flex; justify-content: center; gap:1.5em; font-size: 17px; font-weight:600; }
.cs_brd .infoBox.nameServ .boxCont li:first-child > p { letter-spacing: 0.15pt; }
.cs_brd .infoBox.nameServ .boxCont li .ip { color:#3f6ac1; }


/* FOOTER */
#footer { width:100%; border-top:1px solid #eee; padding:6em 0; }
#footer .wrapper { width:1280px; margin:0 auto; display:grid; grid-template-columns:170px 3fr 1fr; gap:2em; }
.f_head .logoBtm { display:flex; gap:2em; margin-bottom:2em; }
.f_head .mobileBtn { display:flex; align-items:center; justify-content:center; gap:5px; width:160px; height:50px; padding:1em 2em; 
	background: linear-gradient(90deg, rgba(254,179,28,1) 0%, rgba(255,124,14,1) 100%); color:white; border-radius:2em; font-size:17px; 
	text-transform:uppercase; font-weight:600; }
.f_body { display:grid; grid-template-columns:1fr; grid-gap:1em; }
.f_body .f_menu { display:flex; gap:2em; }
.f_body .f_menu li a { font-size:16px; font-weight:bold; color:#666; }
.f_body .f_txt { display:grid; grid-template-columns:1fr; grid-gap:1em; color:#999; font-size:14px; }
.f_body .f_txt p:last-child b { font-weight:bold; }
.f_sns .title { text-align:center; margin-bottom:1em; font-size:19px; color:#666; font-weight:bold; }
.f_sns .snsIcons { display:flex; gap:1em; }
.f_sns .snsIcons li a { display: block; transition:opacity 0.2s ease; }
.f_sns .snsIcons li a:hover { opacity:0.5; }




/*****************************/


/* 애니메이션 */
.cir-bg:before { content: ''; position: absolute; top: -60px; left: -54px; width: 113px; height: 116px; animation: spin 10s infinite linear; }
@keyframes spin {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}


/* 탭기능 */
.tab-content {
  display: none;
}

.tab-content.current {
  display: block;
}

/* 개발자가 추가한 css 시작 */
#contBody #homepage_list h1 { width:1280px; margin:0 auto;font-size:33px;font-weight:700;margin-bottom:30px; text-align:center;}
#contBody #portfolio h1 { width:1280px; margin:0 auto;font-size:33px;font-weight:700;margin-bottom:20px; text-align:center;}

/*.sub_wrap h1 { margin:0 auto;font-size:33px;font-weight:700;margin-bottom:20px; text-align:center;}
.sub_wrap .mypage h1 {position: absolute;width: 1px;height: 1px;clip: rect(0 0 0 0);margin: -1px;overflow: hidden;}  마이페이지 h1 */
.sub_wrap .member label{margin:1em 0;font-size:16px;display:block;}
.sub_wrap .member_form label, .sub_wrap .member_form p{font-size:16px;}
#topImage .title p:first-child {
	font-size:30px !important;
	font-weight:600 !important;
	line-height:2;
}
/* 개발자가 추가한 css 끝 */

.fivetypes .contWrap .hp_price { margin-top:0.3em; text-align:left; font-size:17px; font-weight: 600; color:#7844e6; }
.fivetypes .contWrap .hp_price strike { color: #aeaeae; font-weight:400; font-size:14px; letter-spacing:0; margin-right:0.7em; }
.fivetypes .contWrap .hp_price .discount {border: 1px solid #7844e6;color: #7844e6;font-size: 13px;letter-spacing: -1px;padding:3px 5px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius:4px;line-height: 1; /* margin: 0 5px; */ margin-right:5px; display: inline-block;position: relative;top:0;}



@media (max-width: 1650px) {
  
	#quickBar .qb_list { display:none; }

}

/* 메인 팝업 목록 */ 
#main_pop {z-index:10000;position:relative;margin:0 auto;height:0}
#main_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.main_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.main_pops img {max-width:100%}
.main_pops_con {}
.main_pops_footer {padding:0;background:#fff;color:#333;text-align:left;position:relative}
.main_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.main_pops_footer button {padding:10px;border:0;color:#333}
.main_pops_footer .main_pops_reject {background:#fff;text-align:left;cursor:pointer}
.main_pops_footer .main_pops_close {background:#fff;position:absolute;top:0;right:0;cursor:pointer}

/* 키워드 */
.keyword_wrap{margin-top: 5em; padding-top: 2.5em; border-top: 1px solid #ececec;}
.keyword{display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 14px;}
.keyword li{padding: 0.5rem 0.75rem; border: 1px solid #ececec; border-radius: 1.5rem; background-color: #fbfbfb; color: #888;}

/* 맞춤제작/구축[신청하기] 버튼 */
.contFoot_btn {position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;}
.contFoot_btn > a{display: block; text-align: center; background-color: #512ba1; height: 75px; line-height: 75px; font-size: 17px; color: #fff; font-weight: 600;}
.contFoot_btn > a:hover{background: #351772;}