@charset "utf-8";
/* 
 * main CSS Document
 */

/* 공통 */
.wrapper{position: relative; width:980px; margin:0 auto; }
#content {clear: both;}
#content .tit_main{font-family:'Noto Sans KR'; font-size:35px; margin-bottom:30px; color:#000; letter-spacing:-1px;}
.square{font-family: 'Nanum Square';}
.orange{color:#ff5400 !important;}
/* header */
header#header .header_top{}
header#header p.search_naver{position:absolute; left:0; top:30px;}
header#header .header_top h1{padding:38px 0;text-align:center;}
header#header p.info_call{position:absolute; right:0; top:30px; z-index:50;}
header#header p.info_call > a{display:block; height:100%;}

header#header nav{overflow:hidden; border-top:1px solid #e1e1e1; border-bottom:2px solid #10a5af;}
header#header .box_gnb{max-width:980px; margin:0 auto;}
header#header ul.gnb{display:table; width:100%;}
header#header ul.gnb li{display:table-cell;}
header#header ul.gnb li a{display:block; position:relative; padding:18px 0; font-size:18px; color:#333; text-align:center;}
header#header ul.gnb li a:before{content:''; position:absolute; top:25px; left:0; width:1px; height:15px; background:#ccc;}
header#header ul.gnb li.first a{text-align:left;}
header#header ul.gnb li:last-child a{text-align:right;}
header#header ul.gnb li.first a:before{display:none;}

/*메인비주얼*/
.cxslide_fade{overflow:hidden;position:relative; width:100%; height:439px;}
.cxslide_fade .box{overflow:hidden;position:relative;width:100%;height:439px;z-index:4;}
.cxslide_fade .box a{display:block;width:100%;height:439px;}
.cxslide_fade .box a:hover{text-decoration:none;}
.cxslide_fade .box_list{width:980px; margin:0 auto;}
.cxslide_fade .list{overflow:hidden; height:439px;}
.cxslide_fade .list li{position:relative; width:100%; height:100%;}
.cxslide_fade .list li a{background-repeat:no-repeat; background-position:50% 50%;}
.cxslide_fade .list img{vertical-align:top;}
.cxslide_fade .box_list .tel{overflow:hidden; position:absolute; bottom:0px; z-index:61; width:260px;}
.cxslide_fade .list img{display:none;}
/*퀵상담*/
.quick{position:absolute; top:178px;right: 50%; margin-right: -750px; box-sizing: border-box;  z-index:9;}
.quick .quick_top{overflow:hidden; padding:10px 7px; background:#2f3a4c;}
.quick .quick_top img{float:left; margin-left:5px;}
.quick .quick_top > div{float:left; margin-left:10px;}
.quick .quick_top > div > h3{margin-bottom:5px; color:#fff; font-size:15px; font-weight:500;}
.quick .quick_top > div > p{color:#fff247; font-size:25px; font-weight:bold; line-height: 1; letter-spacing:-1px;}
.quick .quick_top > div > p a{display:inline-block; color:#fff247;}
.quick .quick_top > div > span{display:block; margin-top:5px; color:#fff247; font-size:17px; font-weight:bold; line-height: 1;}
.quick .quick_top > div > span > a{display:inline-block; color:#fff247;}
.quick .quick_form {padding:14px; margin-bottom:10px; background: #fff; border:1px solid #dfdfdf; border-top:none;}
.quick .quick_form ul > li > *{vertical-align:middle;}
.quick .quick_form input{width:140px;}
.quick .quick_form span{display:inline-block; float:left; width:80px; height:33px; line-height:33px; margin:2px 0px;}
.quick .quick_form .spam em{display:inline-block; height:33px; line-height:33px; margin:2px 0px; padding:0 20px; background:#444; color:#fff;}
.quick .quick_form .spam input[type="text"]{display:block; float:none; clear:left; width:220px;}
.consulting_inner{padding: 10px 0;}
.quick  .consulting_inner input{width: auto;}
.quick input[type=checkbox] + label, input[type=radio] + label{margin-right: 4px; letter-spacing: -1px;}
.quick .btn_box a{display:block; width:100%; padding:7px 0; text-align:center; color:#fff; font-size:18px;}
.quick .btn_box .btn01{background:#e11b22; margin-bottom:5px;}
.quick .btn_box .btn02{background:#828282;}
.quick .quick_icon ul:after{content:''; display:block; clear:both;}
.quick .quick_icon li{float:left; width:33%; height:100px; background:#fff; text-align: center; border:1px solid #dfdfdf; border-left-width:0px; box-sizing: border-box;}
.quick .quick_icon li:first-child{float:left; border-left-width:1px;}
.quick .quick_icon li:last-child{width:34%;}
.quick .quick_icon li a{display:block; padding:12px 5px;}
.quick .quick_icon li span{display:block; margin:10px 0 3px 0; font-size:10px; line-height: 1; color:#444;}
.quick .quick_icon li p{font-size:14px; color:#000; line-height: 1; letter-spacing:-1px;}
.quick .quick_icon li:last-child{background:#2f3a4c; border-color:#2f3a4c;}
.quick .quick_icon li:last-child span{letter-spacing:-1px; color:#fff;}
.quick .quick_icon li:last-child p{color:#fff;}
button.Show, .Hide{display:none;}
button.Show{width:50px; height:120px; background:#224390; color:#fff; border-top-left-radius: 15px; border-bottom-left-radius: 15px;}
button.Hide{background:none;}

.ie .quick .quick_form input{line-height:0px;}

/* Popup box BEGIN */
.hover_bkgr_fricc{cursor:pointer; display:none; height:100%; position:fixed; text-align:center; top:0; width:100%; z-index:10000;}
.hover_bkgr_fricc .helper{display:inline-block; height:100%; vertical-align:middle;}
.hover_bkgr_fricc > div{background-color: #fff; display: inline-block; height: auto; max-width: 551px; min-height: 100px; vertical-align: middle; width: 60%; position: relative; border-radius:8px; border:3px solid #555; padding: 15px 5%;}
.popupCloseButton{background-color: #fff; border: 3px solid #999; border-radius: 50px; cursor: pointer; display: inline-block; font-weight: bold; position: absolute; top: -20px; right: -20px; font-size: 25px; line-height: 30px; width: 30px; height: 30px; text-align: center;}
.popupCloseButton:hover {background-color: #ccc;}
.trigger_popup_fricc {cursor: pointer; color:#fc6e2e;}
   
/*인기상품*/
article.popular_product{margin-top:50px; overflow:hidden;}
article.popular_product h2:before{content:''; display:block; width:21px; height:2px; margin-bottom:5px; background:#ff334b}
ul.list_product:after{content:''; display:block; clear:both;}
ul.list_product li{position: relative; float: left; width: 32.1%; margin-left: 1.5%; margin-bottom:1.5%; border: 1px solid #d6d6d6;}
ul.list_product li:hover{border: 1px solid #224390; transition: 0.5s;}
ul.list_product li:nth-child(3n+1){clear:left; margin-left: 0;}
ul.list_product li a{display: block; box-sizing: border-box; padding:14px;}
ul.list_product li a .img{display:block; overflow:hidden; width:285px; height:256px; border:1px solid #eaeaea; text-align:center;}
ul.list_product li a .img img{height:100%; margin-left:-100%; margin-right:-100%;}
ul.list_product li a .text{margin-top:14px;}
ul.list_product li .list_icon span{display:inline-block; font-size:12px; width:53px; height:18px; text-align:center; color:#fff;}
ul.list_product li .list_icon .icon01{background:#f2b206;}
ul.list_product li .list_icon .icon02{background:#db4b4b;}
ul.list_product li .list_icon .icon03{background:#10a5af;}
ul.list_product li .list_icon .icon04{background:#f2b206;}
ul.list_product li p.account{margin-top:10px; font-size:13px; color:#888; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
ul.list_product li p.tit_product{font-size:18px; font-weight:bold; color:#000;}
ul.list_product li .list_price{min-height:37px; margin-top: 10px;}
ul.list_product li .list_price .discount{float:left; padding-right:7px; font-size:40px; color:#d0453a; font-weight:800; letter-spacing: -2px;}
ul.list_product li .list_price span.price{padding-right:7px; font-size:25px; color:#333; font-weight: bold; letter-spacing: -1px;}
ul.list_product li .list_price span ~ em{font-size:15px;color:#888; text-decoration:line-through; font-weight:normal;}
ul.list_product li .list_price em{font-size:25px; color:#333; font-weight:bold;}
article.popular_product ul.list_product li span.icon_best{position: absolute; right: 22px; top: 0;}
article.popular_product ul.list_product li span.icon_best img{border:none;}
article.digital_product{margin-top:50px; overflow:hidden;}
article.digital_product h2:before{content:''; display:block; width:21px; height:2px; margin-bottom:5px; background:#3369d5}

article.print_product{margin-top:50px; overflow:hidden;}
article.print_product h2:before{content:''; display:block; width:21px; height:2px; margin-bottom:5px; background:#f2b206}

article.computer_product{margin-top:50px; overflow:hidden;}
article.computer_product h2:before{content:''; display:block; width:21px; height:2px; margin-bottom:5px; background:#b029e8}

/*하단 정보*/
footer#footer{overflow: hidden; clear: both;}
.company_info{clear:both; overflow:hidden; padding:30px 0; margin-top:40px; background:#333949;} 
.company_info > div > div{float:left; width:33.3%;}
.company_info > div > div h3{margin-bottom:15px; color:#fff; font-size:22px; font-weight:500;}
.company_info > div > div h3 a{color:#fff;}
.company_info .cs_center p.call a{display:block; margin-bottom:10px; font-size:30px; color:#35ccd5; font-weight:bold;}
.company_info .cs_center ul li{color:#fff; font-size:14px; line-height: 1.3;}
.company_info .cs_center span{font-size:14px; color:#b7b7b7;}

.company_info .notice ul li{position:relative; margin-bottom:18px; padding-left:10px; font-size:14px; color:#fff; }
.company_info .notice ul li:before{content:''; position:absolute; width:4px; height:4px; left:0; top: 9px; background:#ccc}
.company_info .notice ul li a{display:block; padding-right:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff;}

.company_info .bank .account_number{font-size:25px; color:#1fddc9; font-weight:bold;}
.company_info .bank .account_name{margin-top:15px; font-size:14px; color:#fff;}
.company_info .bank span{font-size:14px; color:#b7b7b7;}

.footer_menu{overflow: hidden; border-bottom:1px solid #dbdbdb}
.footer_menu ul{width:100%; text-align:center;}
.footer_menu ul li{display:inline-block; padding:13px 20px;}
.footer_menu .scroll_top{position:absolute; top:0px; right:0; width:49px; height:48px; cursor:pointer; border-right:1px solid #dbdbdb; border-left:1px solid #dbdbdb; text-align:center;}
.footer_menu .scroll_top img{padding:11px 0;}

.copy_area.wrapper{overflow: hidden; padding:25px 0 50px 0;}
.copy_area span.footer_logo{display: block; float: left; width: 20%;}
.copy_area .copy_text{float: right; width: 80%; color:#444;}
.copy_area .copy_text span{padding-right:15px;letter-spacing: -1.5px;}
.copy_area .copy_text p{font-size:14px; color:#777;}

/* label price update 240725 */
ul.list_product { display: flex; flex-wrap: wrap; }
ul.list_product li .list_price .discount { font-size: 30px; margin-top: 5px; }
ul.list_product li .list_price span.price::before { content: '월'; font-size: 25px; margin-right: 5px; font-weight: 500; }

@media all and (min-width:981px){
	.cxslide_fade .btn{position:absolute; top:0; z-index:60; height:calc(100% - 76px);}
	.cxslide_fade .btn li{width:260px; height:calc(100% / 5);}
	.cxslide_fade .btn li img{height:70px;}
	.cxslide_fade .btn li:first-child{margin-left:0;}
	.cxslide_fade .btn li:first-child a{border-top-width:0px;}
	.cxslide_fade .btn a{display:block; position:relative; height:100%; box-sizing:border-box; background:#fff; border:1px solid #cacaca; border-bottom-width:0px; color:#555;}
	.cxslide_fade .btn a:before{content:''; display:block; opacity:0; position:absolute; top:-1px; left:-1px; z-index:62; width:calc(100% + 2px); height:calc(100% + 2px); box-sizing:border-box; border:3px solid #1153af; transition:all 0.3s ease 0s;}
	.cxslide_fade .btn a.active:before{opacity:1;}
}

@media all and (max-width:1550px){
	.quick{right: 0; margin-right:0;}
}

@media all and (max-width:1200px){
	div#target {display: none;}
	button.Show{display:block;}
	.quick {z-index: 98; right: 0; margin-right:0;}
}

@media all and (max-width:1024px){
	header#header ul.gnb li a{font-size:17px;}
}

@media all and (max-width:980px){
	.wrapper{width:100%;}
	header#header .stellarnav.mobile ul.gnb li{width:100%;}
	header#header .stellarnav.mobile ul.gnb li a{color:#fff; padding:15px 15px; font-size:15px;}
	header#header ul.gnb li a{padding:18px 30px;}
	header#header ul.gnb li.first a{padding-left:15px;}	
	.stellarnav a.close-menu.half{width:100%; color:#fff; text-align: right !important;}
	
	.main_slide01 a{background:#ecfbfd url(../images/main/m_main_visual01.jpg) no-repeat 50% 50%;}
	.main_slide02 a{background:#fdf0f7 url(../images/main/m_main_visual02.jpg) no-repeat 50% 50%;}
	.main_slide03 a{background:#f2f2f2 url(../images/main/m_main_visual03.jpg) no-repeat 50% 50%;}
	.main_slide04 a{background:#e2eaff url(../images/main/m_main_visual04.jpg) no-repeat 50% 50%;}
	.main_slide05 a{background:#fbfaeb url(../images/main/m_main_visual05.jpg) no-repeat 50% 50%;}

	.cxslide_fade .box_list .tel{display:none;}
	.cxslide_fade .list li a{background-position:60% 50%;}
	.cxslide_fade .btn{position:absolute; bottom:30px; left:0px; z-index:60; width:100%; text-align:center;}
	.cxslide_fade .btn li{display:inline-block;}
	.cxslide_fade .btn li img{display:none;}
	.cxslide_fade .btn li a{display:inline-block; width:10px; height:10px; background:#fff; transition:all 0.3s ease 0s;}
	.cxslide_fade .btn li a.active{width:20px; background:#204492;}

	ul.list_product li{width:32%;}
	ul.list_product li a .img{width:100%; height: auto;}
	ul.list_product li a .img img{width:100%;}
	ul.list_product li .list_price .discount{font-size:35px;}
	ul.list_product li .list_price span.price{font-size:20px; padding: 0 1%;}
	
	.copy_area span.footer_logo {float: none; width: 100%; margin-bottom:10px; text-align: center;}
	.copy_area .copy_text{width:100%; text-align: center;}
	.copy_area .copy_text p{margin-top:5px;}

	ul.list_product li a .img {
        aspect-ratio: 1 / 1;
    }
	ul.list_product li a .img img {
        object-fit: contain;
    }
}

@media all and (max-width:950px){
	header#header ul.gnb{text-align:center;}
	header#header ul.gnb li{float:none; display:inline-block;}
	header#header ul.gnb li a{padding:18px 25px;}
}

@media all and (max-width:900px){
	header#header p.info_call{top:7px; right:60px; width:180px; height:42px; background:url(../images/main/top_inquiry_mob.png) no-repeat 50% 50%; background-size:100%;}
	header#header p.info_call img{display:none;}
	header#header p.search_naver{display:none;}
	header#header .header_top h1{text-align:left; padding:12px 0 12px 10px;}
	header#header .header_top h1 img{width:200px;}
	header#header nav{border-top:0;}
	header#header ul.gnb{padding:0px; text-align:left;}
	header#header ul.gnb li a:before{display:none;}
	header#header .stellarnav.mobile ul.gnb li a{text-align:left;}
	.stellarnav.mobile .menu-toggle{display:inline-block;}

	ul.list_product li a{padding:10px;}
	ul.list_product li p.tit_product{max-height: 42px; min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 1.2;}
}

@media all and (max-width:800px){	
	.company_info > div > div{width:100%;margin-top: 20px; padding-top:20px; border-top: 1px solid #4c515f; text-align: center;}
	.company_info .notice ul li:before{display:none;}
	.company_info .notice ul li a{padding-right:0px;}
	.company_info .cs_center {padding-top: 0; margin-top: 0; border-top: 0;}
}

@media all and (max-width:768px){		
	/* article.popular_product ul.list_product li:nth-child(3){display:none;} */
	article.popular_product, .digital_product, .print_product, .computer_product{padding:0 1%; box-sizing: border-box;}
	ul.list_product li{float:left; width:49%; margin-left:0px;}
	ul.list_product li:nth-child(2n){float:right;}
	ul.list_product li:nth-child(3n+1){clear:none;}
	ul.list_product li:nth-child(2n+1){clear:left;}
	
	.company_info > div > div h3{font-size:18px; font-weight:bold;}
	.company_info .cs_center p.call a, .company_info .bank .account_number{font-size:23px;}
	.company_info .notice ul li{margin-bottom:10px;}	
	.copy_area .copy_text span{display:block;}
	
	#content .tit_main{font-size: 25px; margin-bottom: 15px; color: #000;}
	.footer_menu ul{width:auto;}
	.footer_menu ul li{padding: 13px 5px;}

}

@media all and (max-width:640px){	
	.cxslide_fade .list li a{display:block; height:inherit; background-image:none !important; text-align:center;}
	.cxslide_fade .list img{display:inline-block; max-height:100%;}
	.cxslide_fade,
	.cxslide_fade .box,
	.cxslide_fade .list,
	.cxslide_fade .box a{height:350px;}
}

@media all and (max-width:600px){	
	ul.list_product li .list_price .discount{width:100%; display:block; font-size:27px;}
	ul.list_product li .list_price{min-height:60px;}

	.area_visual .cxslide_fade .box a, .area_visual .cxslide_fade .list li{width:100%; height:100%;}
	.main_slide01 a{background:#ecfbfd;}
	.main_slide02 a{background:#fdf0f7;}
	.main_slide03 a{background:#f2f2f2;}
	.main_slide04 a{background:#e2eaff;}
	.main_slide05 a{background:#fbfaeb;}

	article.computer_product, article.print_product, article.digital_product, article.popular_product{margin-top:20px;}
	.footer_menu ul{padding:13px 55px 13px 10px; box-sizing:border-box; text-align:left;}
	.footer_menu ul li{padding:0px;}
	.footer_menu ul li a{padding:0 10px; font-size:13px;}
	.footer_menu .scroll_top{right:10px; top:50%; margin-top:-24px; border:1px solid #dbdbdb;}
}	

@media all and (max-width:470px){	
	#content .tit_main{font-size:18px;}
	header#header .header_top h1 img{width:150px;}
	header#header p.info_call{top:6px; width:150px; height:35px;}
	ul.list_product li .list_price span.price{font-size:18px;}
	article.popular_product ul.list_product li span.icon_best{right:9px;}
	article.popular_product ul.list_product li span.icon_best img{width:50px;}	
	ul.list_product li p.tit_product{font-size:15px;}
	ul.list_product li .list_price .discount{font-size:23px;}
	.quick{margin-top: -90px;}

	.cxslide_fade,
	.cxslide_fade .box,
	.cxslide_fade .list,
	.cxslide_fade .box a{height:280px;}

	/* label price update 240725 */
	ul.list_product li p.tit_product { -webkit-line-clamp: 3; }
	ul.list_product li .list_price span.price::before { font-size: 20px; }
}

@media all and (max-width:420px){	
	ul.list_product li a{padding:5px;}
	ul.list_product li .list_price{min-height:41px;}
	ul.list_product li .list_icon span{width:45px; font-size:11px;}
	ul.list_product li .list_price span.price{font-size:15px;}
	ul.list_product li .list_price .discount{font-size:17px;}
}

@media all and (max-width:375px){	
	.area_visual, .area_visual .cxslide_fade .box a, .area_visual .cxslide_fade .list li {height:250px;}
	header#header p.info_call{top:8px; width:130px; height:30px;}
}

@media all and (max-width:350px){
	header#header .header_top h1 img{width:130px;}
	header#header p.info_call{right:45px;}
}