@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2018-12-01
Modify Date : 2018-12-10
File : /event/landing/freeskin
*******************************************/

/* 상단 비주얼 */
.newskin {background:#ebf2f8 url('/images/event/20180101/newskin_bg.png') repeat-y center top; padding:50px 0 60px;}
.newskin li {letter-spacing:-1px;}
#bxslider1 li {position:relative; *zoom:1;}
#bxslider1 li:after {display:block; clear:both; content:'';}
#bxslider1 li .icon {display:none; position:absolute; top:30px; left:90px; width:80px; height:80px; border-radius:50%; background:#df454b; background:rgba(223,69,75,1); text-align:center;}
#bxslider1 li .icon span {display:block; padding-top:22px; font-size:13px; color:#fff;}
#bxslider1 li .img {float:left; width:690px;}
#bxslider1 li .txt_wrap {float:left; margin:30px 0 0 50px;}
#bxslider1 li .txt_wrap li.stit {font-size:18px; font-weight:400; color:#628cb2;}
#bxslider1 li .txt_wrap li.tit {margin:5px 0; font-size:42px; font-weight:100; color:#333; letter-spacing:-5px;}
#bxslider1 li .txt_wrap li.tit strong {font-size:inherit;}
#bxslider1 li .txt_wrap li.stxt {font-size:20px; font-weight:400; color:#3f94fb;}
#bxslider1 li .txt_wrap li.sbtn {margin-top:40px;}
#bxslider1 li .txt_wrap li.sbtn a {display:inline-block; width:165px; line-height:50px; background:#3f94fb; text-align:center; font-size:16px; font-weight:300; color:#fff; letter-spacing:0; transition:all linear 0.5s;}
#bxslider1 li .txt_wrap li.sbtn a:hover {background:#1b72db;}
#bxslider1 li .txt_wrap li.sbtn a span {margin-right:-10px; font-family:'dotum';}

/* #bxslider */
.bx-wrapper {width:1180px; margin:0 auto; box-shadow:none; border:none; background:transparent !important;}
.bx-wrapper .bx-pager {bottom:-30px; text-align:center;}
.bx-wrapper .bx-pager.bx-default-pager a, .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a:focus {display:block; width:13px; height:13px; margin:0 3px; border-radius:50%; background:#fff;}
.bx-wrapper .bx-pager.bx-default-pager a.active {background:#3f94fb;}
.bx-wrapper .bx-prev {display:block; left:0; background:url('/images/event/20180101/event01_arrow.png') no-repeat 0 -62px; width:33px !important; height:62px !important;}
.bx-wrapper .bx-next {display:block; right:0; background:url('/images/event/20180101/event01_arrow.png') no-repeat -33px -62px; width:33px !important; height:62px !important;}
.bx-wrapper .bx-prev:hover {background:url('/images/event/20180101/event01_arrow.png') no-repeat 0 0; width:33px; height:62px;}
.bx-wrapper .bx-next:hover {background:url('/images/event/20180101/event01_arrow.png') no-repeat -33px 0; width:33px; height:62px;}
.bx-wrapper .bx-controls-direction a {position:absolute; top:50%; margin-top:-20px; outline:0; text-indent:-9999px; z-index:1;}
.bx-wrapper .bx-controls-direction a.disabled {display:none;}

/* 콘텐츠 */
.contents {width:1180px; margin:0 auto; font-size:14px; color:#2c2c2c;}

/* 디자인 기능 배너 */
.skin_banner {margin:40px auto; background: #fff; text-align:center}
.skin_banner ul {margin:0 auto; padding-left:0; *zoom:1;}
.skin_banner ul:after {display:block; clear:both; content:'';}
.skin_banner li {float:left; width:33.3333%; margin-right:-1px; background:#f4f4f4;}
.skin_banner img {vertical-align:top; width:100%; transition:0.3s ease-in-out;}

/* 무료스킨 종수 */
.skinListArea {position:relative; width:100%;}
.skinListArea h1 {position:relative; padding-bottom:10px; text-align:left; font-size:20px; font-weight:600; color:#414141;}
.skinListArea .skin_tab {position:absolute; top:5px; right:0px; cursor:pointer; font-size:16px; color:#898989;}
.skinListArea .skin_tab li {float:left; border-left:1px solid #ccc; padding-left:10px; line-height:0.8;}
.skinListArea .skin_tab li:first-child {border-left:none; padding-right:10px;}
.skinListArea .skin_tab li a {display:block; font-size:14px; font-weight:500; color:#aaa;}
.skinListArea .skin_tab li.current a {font-weight:500; color:#2ea6f9;}

/* 무료스킨 썸네일 */
.skin_list {position:relative; margin-left:-20px;}
.skin_list li {float:left; width:calc(20% - 20px); margin:0 0 20px 20px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.skin_list li .border_table:hover {border-color:#5da1f1;} 
.skin_list li .border_table {margin-bottom:5px; border:1px solid #d9d9d9; padding:10px;}
.skin_list li .border_table img {width:100%; transform:scale(1); transition:0.3s ease-in-out;}
.skin_list li .border_table img:hover {transform:scale(1.04);}
.skin_list li .new {display:inline-block; width:33px; height:13px; vertical-align:middle; background:url('/images/event/20180101/new_icon2.gif') no-repeat;}

/* 읽어주세요 */
.footer_guide {margin-top:30px; background:#414856; padding:30px 0;}
.footer_guide ul {width:1180px; margin:auto;}
.footer_guide li {padding-left:10px; text-indent:-10px; font-size:13px; color:#ccc; line-height:2.0;}
.footer_guide img.footer_bl {margin:7px 0 0 0;}

@media (min-width:0) and (max-width:1024px) {
.bx-wrapper, .contents, .footer_guide ul {width:auto;}
.contents, .footer_guide ul {margin:0 20px;}
#bxslider1 li .txt_wrap {margin-left:200px;}
#bxslider1 li .txt_wrap li.sbtn {margin-top:30px;}
.bx-wrapper .bx-prev, .bx-wrapper .bx-next {display:none;}
.skin_list li {width:22.9%;}
}
@media (min-width:0) and (max-width:960px) {
.skin_list li {width:30.8%;}
}
@media (min-width:0) and (max-width:768px) {
.skin_list li {width:47%;}
}
@media (min-width:0) and (max-width:680px) {
#bxslider1 li .img {padding:0 10px 30px;}
#bxslider1 li .icon {display:none;}
#bxslider1 li .txt_wrap {float:none; margin:auto;}
#bxslider1 li .txt_wrap li {text-align:center;}
#bxslider1 li .txt_wrap li.tit {font-size:36px;}
#bxslider1 li .txt_wrap li.stxt {display:none;}
#bxslider1 li .txt_wrap li.sbtn {margin-top:10px;}
.skin_banner li {width:100%; margin:5px 0;}
.skin_list li {width:calc(100% - 20px);}
}
@media (min-width:0) and (max-width:360px) {
#bxslider1 li .txt_wrap {margin-left:30px;}
#bxslider1 li .txt_wrap li.sbtn a {width:150px;}
.bx-wrapper .bx-pager {bottom:-30px;}
.skinListArea h1 {padding-bottom:0;}
.skinListArea .skin_tab {position:relative; top:0; float:right; padding-bottom:10px;}
}