@import url('basic.css');

#contents{/*min-width:1100px; width:100%;*/}
#contents.main-contents	{width:auto;}

.slides-framebox{position:relative;overflow:hidden;}

#main-slides{position:relative;}
#main-slides li{position:relative;left:0;top:0;text-align:center;color:#fff;line-height:1.3em;font-size:110%;font-weight:bold;height:370px;background-repeat:no-repeat;background-position:center 0;}
#main-slides li>img{display:inline-block;text-align:center;/*padding:90px 0 17px;*/}
#main-slides li>strong{font-size:270%;line-height:1.7em;}

/*
.slides-con-box2{position:absolute;margin:0px;padding:0px;top:0px;left:0px;bottom:0;right:0;}
.slides-con-box2 li{margin:0px;padding:0px;width:100%;height:370px;width:100%;}
.slides-con-box{position:relative;width:1100px;margin:0 auto;height:370px;}
.slides-con-box .bx-wrapper{height:100%;}*/
.slides-con-box{position:relative;margin:0 auto;height:370px;}
.slides-con-box .bx-wrapper{height:100%;margin:0;}
.slides-con-box .bx-wrapper .bx-pager{padding:0;bottom:45px;}
.slides-con-box .bx-wrapper .bx-pager .bx-pager-link{width:14px;height:14px;margin:0 3px;background:url(../../images/main/pop_btn.png);}
.slides-con-box .bx-wrapper .bx-pager .bx-pager-link.active{background:url(../../images/main/pop_btn_on.png);}
.slides-con-box .bx-wrapper .bx-pager .bx-pager-link:hover{background:url(../../images/main/pop_btn.png);}
.slides-con-box .bx-wrapper .bx-pager .bx-pager-link.active:hover{background:url(../../images/main/pop_btn_on.png);}
.slides-framebox .slides-prev-btn{position:absolute;top:44%;left:0;cursor:pointer;z-index:40;}
.slides-framebox .slides-next-btn{position:absolute;top:44%;right:0;cursor:pointer;z-index:40;}


.board-quick-frame{background-color:#2d2d2d;}
.board-quick-frame .board-quick-box{width:996px;margin:0 auto;color:#fff;}
.board-quick-box .notice-box	{position:relative;border-bottom:1px solid #494b50; }
.board-quick-box .notice-box h3	{position:absolute;left:0;top:8px;font-size:95%;color:#fff;font-weight:normal;padding:2px 10px 4px;background-color:#ed1c24;}
.board-quick-box .notice-box .notice-list	{padding:12px 50px 12px 82px;}
.board-quick-box .notice-box .notice-list>ul{height:16px;line-height:16px;overflow:hidden; }
.board-quick-box .notice-box .notice-list>ul>li		{position:relative;padding:0 90px 0 0;color:#e2e2e2; }
.board-quick-box .notice-box .notice-list>ul>li a	{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:bold;font-size:105%;}
/*.board-quick-box .notice-box .notice-list>ul>li time{position:absolute;right:0;top:0;font-size:95%; }*/
#nt-title>li	 {padding:0 90px 0 0;}
#nt-title>li a	 {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#nt-title>li>span{position:absolute;right:0;top:0;font-size:95%;color:#999;}

.board-quick-box .notice-box .notice-btn	{position:absolute;right:0;top:5px;}
.board-quick-box .notice-box .notice-btn a	{display:block;padding:1px 0 0;}

.main-framebox {}
.main-framebox .ssl-list-box {position:relative;width:996px;margin:0 auto;padding:20px 0 0;}
.main-framebox .ssl-list-box .ssl-list-more {position:absolute;right:0;top:38px;color:#333;font-weight:bold;padding:0 18px 0 0;background:url(../../images/main/btn_more.png) no-repeat right center;}
.main-framebox .ssl-list-box img{vertical-align:middle;}
.main-framebox .ssl-list-box>ul {/*margin:30px 0 10px -35px;*/margin:60px 0 40px;}
.main-framebox .ssl-list-box>ul:after {clear:both;content:'';display:block;}
.main-framebox .ssl-list-box>ul>li {float:left;width:306px;/*height:439px;margin:20px 0 30px 35px;*/margin:13px;background-color:#f8f8f8;}
.main-framebox .ssl-list-box>ul>li.brick[data-state="init"] {display:none;}
.main-framebox .ssl-list-box>ul>li.brick[data-state="start"] {display:block;animation: start 0.5s;-webkit-animation: start 0.5s;}
.main-framebox .ssl-list-box>ul>li.brick[data-state="move"] {transition:top 0.5s, left 0.5s, width 0.5s, height 0.5s;-webkit-transition:top 0.5s, left 0.5s, width 0.5s, height 0.5s;}
.main-framebox .ssl-list-box>ul>li .ssl-data-box {padding:0 25px 25px;border:1px solid #e4e4e4;}
.main-framebox .ssl-list-box>ul>li h3 {height:70px;line-height:70px;margin:0 5px;text-align:center;border-bottom:1px solid #e4e4e4;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box{text-align:center;font-weight:bold;padding:25px 0 0;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box h4	{padding:0 0 30px;font-size:120%;color:#154a96;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>ul	{/*padding:0 0 20px;*/height:60px;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>ul>li	{padding:0 0 0 12px;line-height:1.3em;color:#2b2b2b;text-align:left;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>ul>li>span	{font-weight:normal;font-size:0.85em;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>span	{position:relative;display:block;font-size:115%;letter-spacing:-0.04em;color:#fff;background-color:#ed1c24;overflow:hidden;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>span a{position:relative;display:block;padding:10px 0;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>span:hover{color:#ed1c24;background-color:#fff;}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>span:before{position:absolute;left:0;top:0;width:100%;height:100%;content:'';display:block;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}
.main-framebox .ssl-list-box>ul>li .ssl-price-box>span:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);box-shadow:inset 0 0 0 3px #ed1c24;}
.main-framebox .ssl-list-box>ul>li .ssl-info-box{font-size:95%;padding:20px 0 0 4px;}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul{}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li	{color:#575757;line-height:1.2em;padding:0 0 5px;letter-spacing:-0.04em;}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span{color:#1a1a1a;padding:0 0 0 17px;background-repeat:no-repeat;background-position:0 2px;}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span.icon-compat{background-image:url(../../images/main/option_icon1.png);}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span.icon-price{background-image:url(../../images/main/option_icon2.png);}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span.icon-renewal{background-image:url(../../images/main/option_icon3.png);}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span.icon-security{background-image:url(../../images/main/option_icon4.png);}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span.icon-time{background-image:url(../../images/main/option_icon5.png);}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>ul>li>span.icon-way{background-image:url(../../images/main/option_icon6.png);}
.main-framebox .ssl-list-box>ul>li .ssl-info-box>strong{display:block;color:#ed1c24;letter-spacing:-0.06em;padding:10px 0 0;}

/* 펜타코드 배너 */
.main-framebox .ssl-list-box .penta-banner,
.main-framebox .ssl-list-box .penta-banner * { box-sizing:border-box; }
.main-framebox .ssl-list-box .penta-banner { display: block; font-family: 'Noto Sans KR'; position: absolute; width: 260px; background-color: #0755a6; left: 100%; top: 93px; margin-left: 35px; padding: 10px; letter-spacing: -0.5px; }
.main-framebox .ssl-list-box .penta-banner .service-list { padding: 15px 20px 20px 20px; }
.main-framebox .ssl-list-box .penta-banner .service-list > li { color: #d2e0f8; font-size: 15px; margin-bottom: 10px; background: url(/images/common/icon_chk.png) no-repeat left top 2px; padding-left: 22px; }
.main-framebox .ssl-list-box .penta-banner .service-list > li:last-child { margin-bottom: 0; }
.main-framebox .ssl-list-box .penta-banner .banner-content { padding: 18px 23px; background-color: #fff; font-size: 15px; color: #666; letter-spacing: -0.7px; line-height: 1.4; }
.main-framebox .ssl-list-box .penta-banner .banner-content .desc1 { margin-bottom: 10px; }
.main-framebox .ssl-list-box .penta-banner .banner-content .desc2 { font-size: 22px; color: #0755a6; line-height: 1.3; margin-bottom: 18px; }

.mainquick-frame{height:330px;background:url(../../images/main/quick_bg.png) no-repeat center 0;}
.mainquick-frame .quickmenu-box	{}
.mainquick-frame .quickmenu-box>ul{width:898px;margin:0 auto;}
.mainquick-frame .quickmenu-box>ul>li{float:left;text-align:center;padding:55px 0 20px;}
.mainquick-frame .quickmenu-box>ul>li.refund-quick{padding:55px 100px 20px 65px;}
.mainquick-frame .quickmenu-box>ul>li a{position:relative;display:inline-block;padding:140px 0 0;color:#fff;background-repeat:no-repeat;background-position:center 0;}
.mainquick-frame .quickmenu-box>ul>li a:before{position:absolute;top:0;left:50%;margin:0 0 0 -45px;content:'';width:90px;height:106px;display:block;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;background-repeat:no-repeat;}
.mainquick-frame .quickmenu-box>ul>li a:after{position:absolute;top:0;left:50%;margin:0 0 0 -45px;content:'';width:90px;height:106px;display:block;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;opacity:0;-webkit-transform: translateY(48px) rotateX(-90deg);-moz-transform: translateY(48px) rotateX(-90deg);-ms-transform: translateY(48px) rotateX(-90deg);transform: translateY(48px) rotateX(-90deg);background-repeat:no-repeat;}
.mainquick-frame .quickmenu-box>ul>li a:hover:before{-webkit-transform: translateY(-48px) rotateX(-90deg);-moz-transform: translateY(-48px) rotateX(-90deg);-ms-transform: translateY(-48px) rotateX(-90deg);transform: translateY(-48px) rotateX(-90deg);}
.mainquick-frame .quickmenu-box>ul>li a:hover:after{opacity:1;-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0);}
.mainquick-frame .quickmenu-box>ul>li.personal-quick a{/*background-image:url(../../images/main/quickmenu_icon01.png); */}
.mainquick-frame .quickmenu-box>ul>li.personal-quick a:before{background-image:url(../../images/main/quickmenu_icon01.png);}
.mainquick-frame .quickmenu-box>ul>li.personal-quick a:after{background-image:url(../../images/main/quickmenu_icon01.png);}

.mainquick-frame .quickmenu-box>ul>li.refund-quick a{/*background-image:url(../../images/main/quickmenu_icon02.png);*/}
.mainquick-frame .quickmenu-box>ul>li.refund-quick a:before{background-image:url(../../images/main/quickmenu_icon02.png);}
.mainquick-frame .quickmenu-box>ul>li.refund-quick a:after{background-image:url(../../images/main/quickmenu_icon02.png);}
.mainquick-frame .quickmenu-box>ul>li.faq-quick a{/*background-image:url(../../images/main/quickmenu_icon03.png);*/}
.mainquick-frame .quickmenu-box>ul>li.faq-quick a:before{background-image:url(../../images/main/quickmenu_icon03.png);}
.mainquick-frame .quickmenu-box>ul>li.faq-quick a:after{background-image:url(../../images/main/quickmenu_icon03.png);}

.mainquick-frame .quickmenu-box>ul>li h3{line-height:1.3em;padding:0 0 10px;font-size:125%;}
.mainquick-frame .quickmenu-box>ul>li span{display:block;line-height:1.3em;}
.mainquick-frame .quickmenu-box>ul:after{clear:both;content:'';display:block;}

.contact-frame{padding:10px 0;text-align:center;}
.contact-frame p{display:inline-block;font-size:115%;}
.contact-frame p>strong{display:inline-block;color:#333;padding:0 5px 0 45px;height:30px;line-height:30px;/*background:url(../../images/main/tel.png) no-repeat 0 0;*/}
.contact-frame p>em{display:inline-block;font-weight:bold;color:#ed1c24;}

@media only all and (max-width: 1600px) {

/* 펜타코드 배너 */
.main-framebox .ssl-list-box .penta-banner { position: static; width: auto; margin-left: 13px; margin-right: 13px; margin-bottom: 40px; }
.main-framebox .ssl-list-box .penta-banner .service-list { display: flex; flex-wrap:wrap; margin-bottom: -10px; }
.main-framebox .ssl-list-box .penta-banner .service-list > li { width: 33.3%; }
.main-framebox .ssl-list-box .penta-banner .service-list > li:last-child { margin-bottom: 10px; }
.main-framebox .ssl-list-box .penta-banner .banner-content { position: relative; padding-right: 170px; }
.main-framebox .ssl-list-box .penta-banner .banner-content .desc1 { margin-bottom: 5px; }
.main-framebox .ssl-list-box .penta-banner .banner-content .desc1 br { display: none; }
.main-framebox .ssl-list-box .penta-banner .banner-content .desc2 br { display: none; }
.main-framebox .ssl-list-box .penta-banner .banner-content .banner-img { position: absolute; right: 23px; bottom: 18px; }

}

@media only all and (max-width: 1000px) {
	#contents{width:auto;min-width:auto;}

	.slides-con-box{height:auto;}
	#main-slide{height:100%;}
	#main-slides li{display:table-cell;float:none !important;height:auto;vertical-align:middle;background-size:auto 100%;}
	.slides-con-box .bx-wrapper .bx-pager{bottom:20px;}
	.board-quick-frame .board-quick-box{width:auto;}

	.main-framebox{padding:0 15px;}
	.main-framebox .ssl-list-box{width:auto;}
	.main-framebox .ssl-list-box>ul{margin:60px 0 20px;}
	.main-framebox .ssl-list-box>ul>li{/*margin:0;*/width:32%;margin:0 0.5%;}
	.main-framebox .ssl-list-box>ul>li .ssl-data-box{padding:0 15px 20px;min-height:475px;}

	.mainquick-frame .quickmenu-box>ul{display:table;width:100%;}
	.mainquick-frame .quickmenu-box>ul>li{display:table-cell;width:34%;float:none;vertical-align:top;}
	.mainquick-frame .quickmenu-box>ul>li:first-child{width:33%;}
	.mainquick-frame .quickmenu-box>ul>li:last-child{width:33%;}
	.mainquick-frame .quickmenu-box>ul>li.refund-quick{padding:55px 0 20px;}

	/* 펜타코드 배너 */
	.main-framebox .ssl-list-box .penta-banner { margin-left: 0.5%; margin-right: 0.5%; }
}
@media only all and (max-width: 768px) {
	.slides-framebox .slides-prev-btn img{width:25px;}
	.slides-framebox .slides-next-btn img{width:25px;}

	.main-framebox .ssl-list-box .ssl-list-more{top:20px;}
	.main-framebox .ssl-list-box>ul{margin:35px 0 20px;}
	.main-framebox .ssl-list-box>ul>li h3{height:60px;line-height:60px;}
	.main-framebox .ssl-list-box>ul>li .ssl-price-box{padding:15px 0 0;}
	.main-framebox .ssl-list-box>ul>li .ssl-price-box h4{padding:0 0 15px;}
	.main-framebox .ssl-list-box>ul>li .ssl-data-box{min-height:435px;}
}
@media only all and (max-width: 640px) {
	.slides-con-box .bx-wrapper .bx-pager{bottom:5px;}
	.slides-framebox .slides-prev-btn img{width:20px;}
	.slides-framebox .slides-next-btn img{width:20px;}

	.main-framebox .ssl-list-box>ul>li{width:49%;margin:0 0.5% 10px;}
	.main-framebox .ssl-list-box>ul>li .ssl-data-box{min-height:440px;}

	.board-quick-box .notice-box .notice-list{font-size:95%;letter-spacing:-0.04em;}

	.mainquick-frame .quickmenu-box>ul{padding:10px 0 0;}	
	.mainquick-frame .quickmenu-box>ul>li{display:block;width:auto;padding:15px 10px 15px 22px;text-align:left;}
	.mainquick-frame .quickmenu-box>ul>li.refund-quick{padding:15px 10px 15px 22px;}
	.mainquick-frame .quickmenu-box>ul>li:first-child{width:auto;}
	.mainquick-frame .quickmenu-box>ul>li:last-child{width:auto;}
	.mainquick-frame .quickmenu-box>ul>li a{display:block;padding:0 0 0 85px;background-position:0 center;background-size:auto 75px;}
	.mainquick-frame .quickmenu-box>ul>li a:before{width:64px;height:75px;left:0;margin:0;background-size:auto 75px;}
	.mainquick-frame .quickmenu-box>ul>li a:after{width:64px;height:75px;left:0;margin:0;background-size:auto 75px;}
	.mainquick-frame .quickmenu-box>ul>li a:hover:before{-webkit-transform: translateY(-28px) rotateX(-90deg);-moz-transform: translateY(-28px) rotateX(-90deg);-ms-transform: translateY(-28px) rotateX(-90deg);transform: translateY(-28px) rotateX(-90deg);}

	/* 펜타코드 배너 */
	.main-framebox .ssl-list-box .penta-banner .service-list { padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 15px; }
	.main-framebox .ssl-list-box .penta-banner .service-list > li { font-size: 13px; background-size: 11px; background-position: left top 4px; padding-left: 18px; }
	.main-framebox .ssl-list-box .penta-banner .banner-content { padding: 15px; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .desc1 { font-size: 14px; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .desc2 { font-size: 20px; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .banner-img { width: 112px; }
}

@media only all and (max-width: 540px) {
	/* 펜타코드 배너 */
	.main-framebox .ssl-list-box .penta-banner .service-list { margin-bottom: -7px; }
	.main-framebox .ssl-list-box .penta-banner .service-list > li { width: 50%; margin-bottom: 7px; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .desc1 br { display: block; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .desc2 { font-size: 18px; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .desc2 br { display: block; }
	.main-framebox .ssl-list-box .penta-banner .banner-content .banner-img { right: 15px; bottom: 10px; }
}

@media only all and (max-width: 480px) {
	.main-framebox .ssl-list-box>ul>li{width:auto;margin:0 0 10px;float:none;}
	.main-framebox .ssl-list-box>ul>li .ssl-data-box{min-height:auto;}

	.board-quick-box .notice-box .notice-list{padding:12px 22px 12px 82px;}

	.mainquick-frame {height:auto;background-position:center center;}
	.mainquick-frame .quickmenu-box>ul{padding:10px 0;}
	.mainquick-frame .quickmenu-box>ul>li{padding:10px 10px 10px 22px;font-size:85%;}
	.mainquick-frame .quickmenu-box>ul>li a{padding:0 0 0 70px;background-size:auto 62px;}
	.mainquick-frame .quickmenu-box>ul>li a:before{width:55px;height:61px;background-size:auto 62px;}

	.contact-frame p{font-size:100%;letter-spacing:-0.04em;}
}
@media only all and (max-width: 360px) {
}	