@charset "utf-8";
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

*{margin: 0; padding: 0; box-sizing: border-box; border-collapse: collapse; font-family: 'Pretendard-Regular';}

body{overflow-x: hidden}
ul, ol, li{list-style: none}
h1, h2, h3, h4, h5, h6{font-size: inherit; font-size: 16px}
h1, h2, h3, h4, h5, h6, b, strong, th, dt{font-weight: 900;}
span, p, a, i, b, dt, dd, small, button{letter-spacing: -0.02em;}
span, a, i, b, label, color{display: inline-block}
a{text-decoration: none; color: inherit}
i, address{font-style: normal}
table{width: 100%}
figure{margin: 0}
img, label{vertical-align: middle;}
fieldset{border: none}
input{outline: none;}
select{background: #fff}
input, select, textarea{border: 1px solid #ddd;}
input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"]), select{width: 150px; height: 38px; padding: 0 0.5em;}
button{border: none; }
button, label, input[type="button"], input[type="submit"]{cursor: pointer;}
textarea{width: 100%; resize: none;}

.container{max-width: 1200px; margin: 0 auto}
.italic{font-style: italic}
.Important{color: orange;}
.none{display: none}
.hide{position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }


/*************************************** header ***************************************/
/*header{position: fixed; left: 0; top: 0; transition: all 0.5s; width: 100%; z-index: 30; background: #fff}*/
header{transition: all 0.5s; width: 100%; background: #fff}
header.on{position: fixed;}
header.delay{opacity: 0}
header.transition{transition: all 0.5s; }

header.main_header{border-bottom: 1px solid #ededed}

#header_add{padding: 10px 1em; background: #8a51ff}
#header_add > div{height: 28px; }
#header_add .swiper-wrapper{}
#header_add a{display: flex; justify-content: space-between; align-items: center; width: 100%}
#header_add li{color: #fff}
#header_add .color{color: #ffff29}
#header_add span{font-size: 14px}
#header_add .loc{}
#header_add .tit{}
#header_add .tit b{padding: 5px; border-radius: 5px; background: #44287f}
#header_add .dates{}
#header_add .dates b{}

#simple_head{padding: 16px 0}
#simple_head img{width: 100px}
#simple_head > div.container{display: flex; justify-content: space-between; align-items: center}
#simple_head .back_btn{font-size: 16px; background: transparent;}

header .content{padding: 25px 1em}
header .content > div::after{content: ''; display: block; clear: both}
header .content .logo{float: left}
header .content .logo img{width: 110px}
header .content .nav_btn{float: right; width: 22px; height: 20px;  background: url('http://netpro.co.kr/mobile/img/nav_btn.png') no-repeat}

nav{border-bottom: 1px solid #ededed;}
nav a{display: block; padding: 16px 0; color: #666666}
nav a.on{font-weight: 900; color: #8a51ff}
nav > div{display: table; table-layout: fixed; width: 100%; text-align: center}
nav > div > p{display: table-cell; vertical-align: middle}


#mobile_nav{position: fixed; left: 0; top: 0; z-index: 31; transform: translateX(100vw); width: 100%; height: 100vh; overflow: hidden; background: #fff}
#mobile_nav.event{transform: translateX(0);}
.nav_user_box{padding: 20px 1em; border-bottom: 1px solid #eeeeee}
.nav_user_box > div{display: flex; justify-content: space-between; align-items: center}
.nav_user_box .user{display: flex; align-items: center;}
.nav_user_box .user button{width: 25px; height: 25px; background: url('http://netpro.co.kr/mobile/img/back_btn.png') no-repeat}
.nav_user_box .user_data{padding-left: 30px}
.nav_user_box .user_data .name{color: #8a51ff}
.nav_user_box .user_data small{color: #666666}
.nav_user_box .utill_box{font-size: 14px}
.nav_user_box .utill_box a{background: transparent; color: #666666}
.nav_user_box .utill_box a + a::before{content: '|'; margin: 0 8px; color: #dddddd}

.nav_menu_box{}
.nav_menu_box > div{}
.nav_menu_box > div::after{content: ''; display: block; clear: both}
.nav_menu_box .menu{position: relative; left: 0; top: 0; width: 190px; padding: 25px 15px; border-right: 1px solid #eee; background: #f9f9f9}
.nav_menu_box .menu::before{content: ''; position: absolute; left: -5000px; top: 0; width: 5000px; height: 100vh; background: #f9f9f9}
.nav_menu_box .menu, .nav_menu_box .sub_menu_wrapper{float: left; height: calc(100vh - 79px)}
.nav_menu_box .menu p{font-size: 18px; color: #959595;cursor:pointer}
.nav_menu_box .menu p + p{margin-top: 25px}
.nav_menu_box .menu p.on{color: #666666}
.nav_menu_box .sub_menu_wrapper{width: calc(100% - 190px);}
.nav_menu_box .sub_menu_wrapper > li{display: none; padding: 25px; overflow-y: scroll; height: 100%}
.nav_menu_box .sub_menu_wrapper > li.active{display: block}
.nav_menu_box .sub_menu_wrapper > li ~ li p{color: #707070}
.nav_menu_box .sub_menu_wrapper > li ~ li p::before{content: '·'; margin-right: 0.5em; color: #8a51ff}
.nav_menu_box .sub_menu_wrapper > li ~ li p + p{margin-top: 0.5em}
.nav_menu_box .homepage_box{}
.nav_menu_box .homepage_box + .homepage_box{margin-top: 40px}
.nav_menu_box .homepage_box .title{font-size: 18px; color: #8a51ff}
.nav_menu_box .homepage_box .list_wrapper{margin-top: 16px}
.nav_menu_box .homepage_box .list_wrapper .txt_name{letter-spacing: -1px; color: #707070;cursor:pointer;}
.nav_menu_box .homepage_box .list_wrapper > li{}
.nav_menu_box .homepage_box .list_wrapper > li + li{margin-top: 0.5em}
.nav_menu_box .homepage_box .menu_tag{}
.nav_menu_box .homepage_box .menu_tag span{}
.nav_menu_box .homepage_box .menu_tag .cnt{color: #c7c7c7}
.nav_menu_box .homepage_box .menu_tag ~ .sub_list{padding: 1em; border-bottom-right-radius: 20px; box-shadow: inset -5px -5px 10px -8px rgb(0 0 0 / 10%);}
.nav_menu_box .homepage_box .menu_tag ~ .sub_list li{font-size: 14px; }
.nav_menu_box .homepage_box .menu_tag ~ .sub_list li::marker{content: '· '; color: #8a51ff}
.nav_menu_box .homepage_box .menu_tag ~ .sub_list li + li{margin-top: 0.5em}
.nav_menu_box .homepage_box .menu_tag ~ .sub_list li a{}

.nav_menu_box .homepage_box .menu_tag .txt{}

.nav_menu_box .homepage_box .func_btn{display: flex; justify-content: space-between; align-items: center; }
.nav_menu_box .homepage_box .func_btn .more_btn{background: transparent}
.nav_menu_box .homepage_box .func_btn .more_btn::before{content: '+'; font-size: 18px; color: #c7c7c7}

.nav_menu_box .homepage_box.package_box{}
.nav_menu_box .homepage_box.package_box li{}

.nav_menu_box .homepage_box .com_tag{margin-left: 8px; animation: textclip 1.5s linear infinite; font-size: 13px; font-weight: 900;  -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-size: 200% auto;}
.nav_menu_box .homepage_box .new_tag{ background-image: linear-gradient(-225deg, #EFE9F4 0%, #c1c1ed 29%, #93a5db 67%, #5078F2 100%);}
.nav_menu_box .homepage_box .hot_tag{ background-image: linear-gradient(-225deg, #ffd2d2 0%, #ff9b9b 29%, #f15c5c 67%, #ff0000 100%);}

@keyframes textclip {
	to {
		background-position: -200% center;
	}
}

@media screen and (max-width: 1200px){
#simple_head{padding: 16px 1em}
}

@media screen and (max-width: 500px){
.nav_menu_box .menu p{font-size: 16px}
.nav_menu_box .menu{width: 140px;}
.nav_menu_box .sub_menu_wrapper{width: calc(100% - 140px)}
}

@media screen and (max-width: 360px){
.nav_user_box > div{display: unset;}
.nav_user_box .utill_box{margin-top: 0.5em; text-align: right}
}


/************************************** main ***************************************/
.color{color: #5d2bc9}
.non_color{color: #777}
main{background: #fff}
#INDEX_MAIN > div.container{}
#INDEX_MAIN > div.container::after{content: ''; display: block; clear: both}
#INDEX_MAIN > div.container > div{float: left; width: calc(100% / 2)}

@media screen and (max-width: 800px){
#INDEX_MAIN > div.container > div{float: none; width: 100%}
}


#INDEX_MAIN section .title_sec_box{text-align: center}
#INDEX_MAIN section .title_sec_box .sub_title{font-size: 16px; color: #8f8f8f}
#INDEX_MAIN section .title_sec_box .title{position: relative; width: fit-content; margin: 0 auto; font-size: 30px;}
#INDEX_MAIN section .title_sec_box .title::before{content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ff9700}

#portfolio_sec .title_sec_box .title::before{content: ''; top: 0; right: -10px}
#besthomp_sec .title_sec_box .title::before{content: ''; top: 0; left: -10px}
#notice_sec .title_sec_box .title::before{content: ''; top: 0; right: -10px}
#contact_sec .title_sec_box .title::before{content: ''; top: 0; right: -10px}

/*헤드라인*/
#headline_sec{}	
#headline_sec article{height: 700px}
#headline_sec .pager{position: absolute; left: 50%; bottom: 40px; z-index: 1; transform: translateX(-50%); width: fit-content}
#headline_sec .pager span{transition: all 0.5s; width: 7px; height: 7px; border-radius: 1em; opacity: 1; background: #8a8a8a}
#headline_sec .pager span.swiper-pagination-bullet-active{width: 30px; background: #404040}
#headline_sec .warpper{}
#headline_sec .warpper > li{position: relative; }
#headline_sec .txt_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 1em}
#headline_sec .top_title{font-size: 40px;}
#headline_sec .top_title i{}
#headline_sec .top_title i.color{-webkit-text-stroke: 1px #ff5f00; color: #ff5f00}
#headline_sec .top_title i.txt{-webkit-text-stroke: 1px #000}
#headline_sec .sub_title{margin: 35px 0; word-break: keep-all; text-align: justify; font-size: 16px; color: #8c8b89}
#headline_sec .btn_loc{text-align: center}
#headline_sec .btn_loc .this_btn{width: 180px; padding: 30px; border-radius: 30px; border: 1px solid}
#headline_sec .btn_loc img{width: 35px}
#headline_sec .btn_loc .btn_loc_txt{margin-top: 10px; font-size: 14px}
#headline_sec .btn_loc .this_btn + .this_btn{margin-left: 16px}
#headline_sec .btn_loc .this_btn:first-of-type{border-color: #efefef; background: #fff}
#headline_sec .btn_loc .this_btn:first-of-type .btn_loc_txt{color: #ff7d1e}
#headline_sec .btn_loc .this_btn:last-of-type{border-color: transparent; background: linear-gradient(100deg, rgba(255,145,64,1) 24%, rgba(255,128,119,1) 100%);}
#headline_sec .btn_loc .this_btn:last-of-type .btn_loc_txt{color: #fff}

@media screen and (max-width: 800px){
/*#headline_sec article{height: calc(100vh - (72px + 190px))}*/
}

@media screen and (max-width: 410px){
#headline_sec .btn_loc .this_btn{width: 140px; padding: 20px}
}

/*포트폴리오 섹션*/
#portfolio_sec{padding-top: 70px}
#portfolio_sec > article:not(.portfolio_live){}
#portfolio_sec > article + article{}

.portfolio_art{margin-top: 50px; text-align: center}	
.portfolio_art .wrapper{}
.portfolio_art .wrapper > li{transform: scale(0.9); transition: all 0.5s; opacity: 50%}
.portfolio_art .wrapper > li.swiper-slide-active{transform: scale(1); opacity: 100%}
.portfolio_art .img_box{aspect-ratio: 6/4; overflow: hidden; border-radius: 30px}
.portfolio_art .img_box img{width: 100%; height: 100%; object-fit: cover}
.portfolio_art .title_box{ width: fit-content; margin: 20px auto 0 auto; overflow: hidden;}
.portfolio_art .title_box span{float: left}
.portfolio_art .loc{width: 95px; text-align: left; color: #ff9700}
.portfolio_art .tit{width: calc(100% - 95px)}
 /* .portfolio_art button{width: 280px; margin-top: 45px; padding: 10px 0; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; color: #666}  */
.portfolio_art a.allBtn{display:inline-block;width: 280px; margin-top: 45px; padding: 10px 0; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; color: #666}

.portfolio_add{position: relative; padding: 110px 1em 120px 1em}
.portfolio_add .txt_box{}
.portfolio_add .top_txt{font-size: 18px;}
.portfolio_add .top_txt strong{font-size: 28px;}
.portfolio_add .top_txt i{position: relative}
.portfolio_add .top_txt i::before{content: ''; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 50%; background: #ebe2ff}
.portfolio_add .bot_txt{margin-top: 30px; line-height: 25px; color: #999}
.portfolio_add img{position: absolute; right: 0; top: 50%; z-index: -1;transform: translateY(-50%)}

.portfolio_live{display: flex; justify-content: center; align-items: center; gap: 0 60px; padding: 15px 1em; border-top: 1px solid; border-bottom: 1px solid; border-color: #eeeeee}
.portfolio_live .title, .portfolio_live .live_list_box{}
.portfolio_live .title{}
.portfolio_live .title .color{color: #7844e6}
.portfolio_live .title i{position: relative;}
.portfolio_live .title i::before{content: ''; position: absolute; left: 50%; top: -5px; width: 3px; height: 3px; border-radius: 50%; background: #7844e6}
.portfolio_live .live_list_box{ height: 25px;}
.portfolio_live .num, .portfolio_live .txt{vertical-align: middle}
.portfolio_live .num{color: #b97bf8}
.portfolio_live .num b{font-size: 20px}

@media screen and (max-width: 500px){
.portfolio_add img{width: 150px}
}

@media screen and (max-width: 400px){
.portfolio_live{flex-direction: column; padding: 20px 1em 15px 1em}
.portfolio_live .live_list_box{margin-top: 10px}
}

@media screen and (max-width: 360px){
.portfolio_add img{opacity: 50%}
}

/*홈페이지 5종*/
#besthomp_sec{position: relative; z-index: 1; padding: 70px 1em; overflow: hidden; background: #f9f9f9}
#besthomp_sec a{display: block;}
#besthomp_sec::before{content: 'NETPRO'; position: absolute; right: -42px; top: 0; z-index: -1; font-size: 115px; font-weight: 900; color: #fff}
#besthomp_sec article{position: relative; z-index: 1; width: 430px; margin: 0 auto}
#besthomp_sec article::after{content: ''; display: block; clear: both}
#besthomp_sec article > div{float: left; width: calc((100% / 2) - 5px)}
#besthomp_sec article > div + div{float: right;}

#besthomp_sec .title_sec_box{width: fit-content; margin: 0 auto; padding: 2em 1em 4em 1em; text-align: right}
#besthomp_sec .title_sec_box color{color: #ff9140}

#besthomp_sec .type_box{position: relative; overflow: hidden; border-radius: 30px; border: 1px solid #f5f5f5; box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%); background: #fff;}
#besthomp_sec .type_box + .type_box{margin-top: 10px}
#besthomp_sec .type_box:not(.color_type) .tit{color: #ff8a29}
#besthomp_sec .type_box .tit{position: relative; z-index: 1; padding: 30px 10px 0 10px; font-size: 21px; color: #fff}
#besthomp_sec .color_type{background: #ffbd67 url(/mobile/img/type_box_color_circle.png) no-repeat -30px -30px}
#besthomp_sec .color_type .more{color: #666 !important}
#besthomp_sec .normal_type{background: #fff url(/mobile/img/type_box_netpro.png) no-repeat 90% -3px}
#besthomp_sec .basic_type{}
#besthomp_sec .img_box{padding: 15px 0 25px 0}
#besthomp_sec .img_box img{width: calc(100% - 1.5em)}
#besthomp_sec .img_box .more{padding: 1em 1em 0 1em; text-align: right; font-size: 14px; color: #949494}
#besthomp_sec .l_img_box{text-align: left;}
#besthomp_sec .r_img_box{text-align: right; }

@media screen and (max-width: 1000px){
#besthomp_sec article{width: 100%; margin: unset}
}

@media screen and (max-width: 800px){
#besthomp_sec article{width: 500px; margin: 0 auto}
}

@media screen and (max-width: 530px){
#besthomp_sec article{width: 100%; margin: unset}
#besthomp_sec .img_box{padding: 15px 0 30px 0}
}

@media screen and (max-width: 500px){
#besthomp_sec .title_sec_box .title{font-size: 28px}
}

@media screen and (max-width: 400px){
#besthomp_sec .img_box img{width: calc(100% - 1em)}
}

/*사이트를 자주 방문햐시나요*/
#netpro_info_sec{position: relative; z-index: 1; padding-top: 70px; background: #fff}	
#netpro_info_sec article{ }
#netpro_info_sec .wrapper{margin-top: 30px}
#netpro_info_sec::before{content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: url('/mobile/img/netpro_info_sec_back.png') no-repeat -3px 50px;}
#netpro_info_sec .title_art_box{line-height: 32px; text-align: center}
#netpro_info_sec .title_art_box .sub_title{color: #666666}
#netpro_info_sec .title_art_box .title{ font-size: 28px}
#netpro_info_sec .title_art_box .title i{position: relative;}
#netpro_info_sec .title_art_box .title i::before{content: ''; position: absolute; left: 0; bottom: 0;  z-index: -1; width: 100%; height: 50%; background: #ebe2ff}
#netpro_info_sec .title_art_box .title color{-webkit-text-stroke: 1px #cab5ff; font-size: 23px; color: #cab5ff}

.info_loc_art{padding: 0 1em; text-align: center}
.info_loc_art .wrapper{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
.info_loc_art .wrapper > li{overflow: hidden; border: 1px solid #eeeeee; border-radius: 30px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%); background: #fff}
.info_loc_art .loc_box{display: block; padding: 30px 0;}
.info_loc_art .loc_box img{width: 70px}
.info_loc_art .caption{margin-top: 20px; font-size: 14px; color: #7a7a7a}

.info_buy_art{width: 430px; margin: 0 auto; padding: 90px 1em 150px 1em}
.info_buy_art .wrapper{position: relative}
.info_buy_art .wrapper .background{position: absolute; bottom: 0px; left: 0}
.info_buy_art .wrapper::after{content: ''; display: block; clear: both}
.info_buy_art .wrapper > div{clear: both; width: fit-content; padding: 30px; border: 1px solid; border-radius: 30px; overflow: hidden; box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%); background: #fff}
.info_buy_art .wrapper > div + div{margin-top: 25px}
.info_buy_art .wrapper > div:nth-of-type(odd){float: left; border-color: #bb88f8; text-align: left}
.info_buy_art .wrapper > div:nth-of-type(odd) color{color: #8a51ff}
.info_buy_art .wrapper > div:nth-of-type(even){float: right; border-color: #ffbd67; text-align: right}
.info_buy_art .wrapper > div:nth-of-type(even) .name{float: right}
.info_buy_art .wrapper > div:nth-of-type(even) color{color: #ff5f00}
.info_buy_art .wrapper > div > span{float: left; font-weight: 600; }
.info_buy_art .name{ width: 85px; -webkit-text-stroke: 1px #333; font-size: 20px; color: #333}
.info_buy_art .name b{letter-spacing: 1px}
.info_buy_art .name b{position: relative}
.info_buy_art .name b::before{content: ''; position: absolute; left: -5%; bottom: 0; z-index: -1; width: 110%; height: 50%; background: red}
.info_buy_art .txt{width: calc(100% - 85px); color: #7a7a7a}
.info_buy_art .txt color{}
.info_buy_art .wrapper > div:nth-of-type(odd) .name b::before{background: #ebe2ff}
.info_buy_art .wrapper > div:nth-of-type(even) .name b::before{background: #ffdeb3}

.info_call_art{display: flex; justify-content: center; align-items: center; gap: 0 40px; padding: 15px 1em; border-top: 1px solid; border-bottom: 1px solid; border-color: #eeeeee; overflow: hidden}
.info_call_art .title{}
.info_call_art .title strong{color: #7844e6}
.info_call_art .title i{position: relative; }
.info_call_art .title i::before{content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px;  border-radius: 50%; background: #7844e6}
.info_call_art .call{position: relative; padding-left: 60px;}
.info_call_art .call .background{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 65px;}
.info_call_art .call{color: #7844e6}
.info_call_art .call a{font-size: 18px}

@media screen and (max-width: 900px){
.info_buy_art{width: 100%; margin: unset}
}

@media screen and (max-width: 800px){
.info_buy_art{width: 430px; margin: 0 auto;}
}

@media screen and (max-width: 500px){
.info_loc_art .loc_box  img{width: 50px}

.info_buy_art{width: 100%; margin: unset}
}

@media screen and (max-width: 410px){
.info_buy_art .wrapper .background{width: 60px;}

.info_call_art{flex-direction: column; padding: 20px 1em 15px 1em;}
.info_call_art .call{margin-top: 13px}
}

@media screen and (max-width: 360px){
.info_buy_art .wrapper > div{width: 100%}
.info_buy_art .wrapper > div:nth-of-type(even){text-align: left}
.info_buy_art .wrapper > div > span{float: none; width: 100%}
.info_buy_art .wrapper .background{bottom: unset; left: unset; top: -50px; right: -10px}
}

/*공지사항*/
#notice_sec{padding: 70px 1em; background: #f9f9f9}
#notice_sec .title_sec_box{text-align: left !important}
#notice_sec .title_sec_box .title, #notice_sec .title_sec_box .sub_title{display: inline-block} 
#notice_sec .title_sec_box .sub_title{margin-left: 10px}
#notice_sec > article{margin-top: 30px}
#notice_sec .wrapper{border-top: 1px solid; border-bottom: 1px solid; border-color: #eeeeee}
#notice_sec .wrapper > li{padding: 10px 0;}
#notice_sec .wrapper > li p{float: left}
#notice_sec .wrapper > li p:not(.txt_box){}
#notice_sec .wrapper > li + li{border-top: 1px solid #eeeeee}
#notice_sec .wrapper a{display: flex; justify-content: space-between; align-items: center}
#notice_sec .wrapper .subject_box{width: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;}
#notice_sec .wrapper .subject_box .tag{padding: 2px 12px; margin-right: 5px; border-radius: 1em; color: #fff; background: #ff9140}
#notice_sec .wrapper .datetime{width: 70px; text-align: right; font-size: 12px; color: #777}


/*고객지원 센터*/
#contact_sec{position: relative; z-index: 1; padding: 70px 1em 110px 1em}
#contact_sec::before{content: ''; position: absolute; left: 0; top: 80px; z-index: -1; width: 100%; height: 100%; background: url('/mobile/img/contact_sec_back.png') no-repeat -3px 20px;}
#contact_sec .title_sec_box{text-align: left !important;}
#contact_sec .title_sec_box .title, #contact_sec .title_sec_box .sub_title{display: inline-block}
#contact_sec .title_sec_box .title{}
#contact_sec .title_sec_box .sub_title{margin-left: 10px}
#contact_sec > article{margin-top: 60px}
#contact_sec .contact_list{margin-bottom: 40px}
#contact_sec .contact_list > li{overflow: hidden}
#contact_sec .contact_list > li + li{margin-top: 20px}

#contact_sec .contact_list .bank_li img.bank{width: 110px}

#contact_sec .contact_list .tit, .contact_list .txt_data{float: left}
#contact_sec .contact_list .tit{width: 80px; color: #ff5f00}
#contact_sec .contact_list .txt_data{width: calc(100% - 80px)}
#contact_sec .contact_list .tel{font-size: 25px}
#contact_sec .contact_list .cus_data{position: relative; margin-top: 10px; color: #666666}
#contact_sec .contact_list .cus_data span{vertical-align: top; font-size: 14px;}
#contact_sec .contact_list .cus_data span + span{}
#contact_sec .contact_list .cus_data span + span::before{content: '|'; margin: 0 0.5em; color: #666666}
#contact_sec .contact_list .email{}
#contact_sec .contact_list .account_num{}
#contact_sec .contact_list .account_num small{color: #666666}
#contact_sec .contact_list .email, .contact_list .account_num{width: fit-content; padding-right: 30px; background: url('/mobile/img/copy_btn_img.png') no-repeat top right}

#contact_sec .contact_box{padding: 15px; border: 1px solid #eeeeee; border-radius: 16px; text-align: center; box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%)}
#contact_sec .contact_box + .contact_box{margin-top: 20px}
#contact_sec .contact_box .title{color: #666666}
#contact_sec .contact_box .wrapper{margin-top: 15px}

#contact_sec .name_server li{font-size: 14px}
#contact_sec .name_server .color{margin-left: 35px; color: #ff5f00}

#contact_sec .net_pro_sns_more{}
#contact_sec .net_pro_sns_more .wrapper{display: flex; justify-content: center; flex-wrap: wrap; gap: 7px}
#contact_sec .net_pro_sns_more a{display: block; width: 35px; height: 35px; text-indent: -9999px; background: url('/mobile/img/sns_btn.png') no-repeat}
#contact_sec .net_pro_sns_more .youtube a{background-position-x: -0}
#contact_sec .net_pro_sns_more .facebook a{background-position-x: -35px}
#contact_sec .net_pro_sns_more .twitter a{background-position-x: -70px}
#contact_sec .net_pro_sns_more .instagram a{background-position-x: -105px}
#contact_sec .net_pro_sns_more .blog a{background-position-x: -140px}
#contact_sec .net_pro_sns_more .ntv a{background-position-x: -175px}

@media screen and (max-width: 880px){
#contact_sec .name_server li + li{margin-top: 0.5em}
#contact_sec .name_server span{display: block}
#contact_sec .name_server .color{margin-left: unset}
}

@media screen and (max-width: 800px){
#contact_sec .name_server li + li{margin-top: unset}
#contact_sec .name_server span{display: inline-block}
#contact_sec .name_server .color{margin-left: 35px}
}

@media screen and (max-width: 500px){
#contact_sec .name_server li + li{margin-top: 0.5em}
#contact_sec .name_server span{display: block}
#contact_sec .name_server .color{margin-left: unset}
}

@media screen and (max-width: 410px){
#contact_sec .contact_list .bank_li img.bank{display: block; margin-bottom: 8px;}
}

@media screen and (max-width: 380px){
#contact_sec .contact_list .cus_data span{display: block}
#contact_sec .contact_list .cus_data span + span{margin-top: 0.5em}
#contact_sec .contact_list .cus_data span + span::before{content: none; margin: unset;}
}


/*컨트롤 네비*/
#control_nav{position: fixed; left: 0; bottom: 0; z-index: 10;  transition: all 0.3s; width: 100%; visibility: visible; opacity: 1}
/*control_nav.on{visibility: hidden; opacity: 0} 푸터에 도달 했을때 페이드 아웃*/
/*control_nav.on{position: absolute; } 푸터에 도달 했을때 고정*/
#control_nav button{background: transparent}
#control_nav .user_btn_box{position: absolute; right: 0; padding: 1em; text-align: center}
#control_nav .user_btn_box img{}
#control_nav .user_btn_box .btn{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 60px; height: 60px; border: 1px solid; border-radius: 20px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%)}
#control_nav .user_btn_box .btn + .btn{margin-top: 5px}
#control_nav .user_btn_box .btn + .btn img{width: 20px}

#control_nav .user_btn_box .btn_txt{margin-top: 5px; font-size: 12px}
#control_nav .user_btn_box .top_btn{transition: all 0.2s ; border-color: #eeeeee; visibility: hidden; opacity: 0; background: rgb(255 255 255 / 90%); color: #666666;}
#control_nav .user_btn_box .top_btn.on{visibility: visible; opacity: 1}
#control_nav .user_btn_box .contact_call{border-color: #febc67; background: rgb(255 255 255); color: #ff8623;}
#control_nav .user_btn_box .chat_btn{border-color: #c8c8c8; background: #fff; color: #fff}
#control_nav .user_btn_box .kakao_btn{background: #fae100; color: #3c1d1e}
#control_nav .user_btn_box .talk_btn{background: #00c63b}

#control_nav .btn_location{display: flex; padding: 10px 0; border-top: 1px solid; border-bottom: 1px solid; border-color: #e7e7e7; background: #fff}
#control_nav .btn_location .box img{width: 20px; height: 20px}
#control_nav .btn_location.event{transform: translateY(0);}
#control_nav .btn_location > *{ flex: 1}
#control_nav .btn_location .box{position: relative; width: fit-content; margin: 0 auto; text-align: center}
#control_nav .btn_location .box.on::before{content: ''; position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-radius: 50%; background: #ff9900}

#control_nav .btn_location .btn_txt{margin-top: 10px; font-size: 12px; color: #8f8f8f}


/*************************************** footer ***************************************/
footer{}
.fot_content_sec{padding: 40px 1em; background: #666666}
.fot_content_sec > div{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px}
.fot_content_sec .fot_logo{text-align: center}
.fot_content_sec .title{font-size: 16px; color: #fff}
.fot_content_sec .title + .title{margin-top: 10px}
.fot_content_sec .wrapper{margin-top: 20px}
.fot_content_sec .wrapper > li{font-size: 14px; color: #adadad}
.fot_content_sec .wrapper > li + li{margin-top: 10px}

.fot_netpro_dates{padding: 40px 1em}
.fot_netpro_dates .title{font-size: 18px}
.fot_netpro_dates .wrapper{margin-top: 20px}
.fot_netpro_dates .wrapper > li{overflow: hidden; font-size: 14px; color: #777;}
.fot_netpro_dates .wrapper > li span{float: left; letter-spacing: -1px}
.fot_netpro_dates .wrapper > li .tit::after{content: ' : '; margin-right: 0.3em}
.fot_netpro_dates .wrapper > li.repling{}
.fot_netpro_dates .wrapper > li.add{}
.fot_netpro_dates .wrapper > li.ceo{}
.fot_netpro_dates .wrapper > li.tel{}
.fot_netpro_dates .wrapper > li.mail{}
.fot_netpro_dates .wrapper > li.num_1{}
.fot_netpro_dates .wrapper > li.num_2{}
.fot_netpro_dates .wrapper > li + li{margin-top: 8px}
.fot_netpro_dates .device_pc{display: block; width: 100%; margin-top: 48px; padding: 16px 0; border: 1px solid #e3e3e3; border-radius: 5px; text-align: center; font-size: 12px; background: whitesmoke; color: #777}
.fot_netpro_dates .device_pc i{font-size: 12px; margin-right: 5px}


.copyright{padding: 15px 0; text-align: center; font-size: 12px; background: #000; color: #fff;}

#sameAs_box{display: inline}
#sameAs_box a{display: inline}