@charset "UTF-8";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,code,em,img,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,footer,header,hgroup,menu,nav,section,main,audio,video {margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,.1)}

/*html5추가 시멘틱엘리먼트를 익스하위버전에서 블럭으로 인식되도록함*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display: block}

/* button태그에 손모양 커서 */
button {cursor: pointer}
/* 익스하위버전에서 이미지 선없애기 */
fieldset,img {border: 0; vertical-align: top}
/* 리스트 기호 빼기 */
ol,ul {list-style: none}
/* 태그 기본 기울임꼴 제거 */
address,em {font-style: normal}
/* 페이지안에서 가장 많은 링크색 지정 */
a {text-decoration: none; /*color: #1c1c1c*/}
/* iframe으로 외부컨텐츠를 연결했을때
외부컨텐츠안쪽내용이 우리페이지에 영향을 주지못하도록 가려줌
*/
iframe {overflow: hidden; border: 0}
/* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */
/*
칸에 아주 긴 데이터가 들어올경우 col에 적은 width가 무시되어 칸이 늘어나면서 테이블길이가 커짐
table-layout: fixed;를 이용하여 커지지않게함
*/
table {border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;}
/* 굵기 빼고 헤딩태그 폰트크기를 body에 선언한 크기와 일치시킴 */
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%}
/* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴 */
input,select,textarea,button {vertical-align: middle; margin: 0; padding: 0; box-sizing: border-box;}
/* textarea 리사이즈기능 빼기 */
textarea {resize: none}
/* 페이지안의 모든 폰트의 줄간격을 1.5로 통일시킴
모바일 크롬, 모바일 사파리 브라우져의 텍스트 자동확대 방지
*/
body {line-height: 1.5; -webkit-text-size-adjust:none}

/* legend,caption,메뉴제목,섹션제목 블라인드 */
legend,caption,.blind {position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px}


body,button,input,select,textarea,table {
/*    헬베티카 폰트, 애플 산돌 네오고딕있을경우 해당폰트로 보여지고 없을경우 단말기 기본폰트로 보여짐*/
    font-family: 'Noto Sans KR','Helvetica Neue','Apple SD Gothic Neo',sans-serif;
    font-size: 14px;
}


/************************* 공통스타일 ***************************/
/* ::selection {background: #b3d4fc;} */

/*********** 폼요소 공통 ************/
input[type="text"]::-ms-clear {
  display:none;
}
input[type="checkbox"] + label {
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 30px;
    padding-left: 40px;
    padding-bottom: 2px;
    letter-spacing: -0.05em;
}
input[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width:26px;
    height: 26px;
    border: 2px solid #dddddd;
    border-radius: 100%;
}
input[type="checkbox"] + label em {color: #009223;}
input[type="checkbox"] + label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 5px;
    width:24px;
    height: 20px;
    background: url(../images/icon_checkbox.png) no-repeat;
    display: none;
}
input[type="checkbox"]:checked + label:after {display: block;}

/* ie x버튼 삭제 */
input::-ms-clear,input::-ms-reveal {display: none;}

/* 텍스트필드 공통 */
input[type="text"]:focus {
    border-color:none; !important;
    outline: none;
}
textarea:focus {
    border-color:#414141 !important;
    outline: none;
}

/* select 공통 */
.select_wrap {display: inline-block; width:196px;    border: 2px solid #ddd; margin-left: 7px; position: relative;}
.select_wrap2 {margin-left: 0}
.select_wrap select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    width:100%;
    height: 41px;
    border: none;
    padding-left: 15px;
    color: #999;
/*    제자리띄우기하여 :after 화살표위로 올려줌*/
    position: relative;
    z-index: 100;
    background: none;
}
select::-ms-expand {display: none;}
.select_wrap:after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    width:12px;
    height: 7px;
    background: url(../images/icon_select_arr.png) no-repeat;
}

/* textarea 공통 */
textarea {width:100%; font-size: 14px; border: 1px solid #f8f8f8; background: #f8f8f8; padding: 15px; box-sizing: border-box; margin: 12px 0;}

/* 파일선택폼 */
.file_wrap {
    border: 2px solid #dddddd;
    display: inline-block;
    width:368px;
    padding-right: 98px;
    position: relative;
    cursor: pointer;
}
.file_wrap input {background: none !important; cursor:default; border: none !important;}
.file_wrap:before {
    content: '';
    position: absolute;
    right:96px;
    top: 50%;
    margin-top: -8px;
    width:2px;
    height: 16px;
    background: #e8e8e8;
}
.file_wrap:after {
    content: '파일선택';
    position: absolute;
    right:20px;
    top: 10px;
    font-weight: 500;
    letter-spacing: -0.05em;
    color: #009223;
}

/***************************** myl_lpoint.html 달력(jQuery UI datepicker) *****************************************/
/*#ui-datepicker-div {left: -200px !important; top: 30px !important;}

.ui-corner-all {border-radius:0;}
.ui-widget-content {border-color:#ccc;}
.ui-datepicker {padding:10px; width:260px;}
.ui-datepicker .ui-datepicker-header {padding:0; background:#fff; border:none;}
.ui-datepicker .ui-datepicker-title {line-height:2; font-size:17px; letter-spacing:-0.05em; font-weight:600;}*/

/*이전 달 버튼*/
/*.ui-datepicker .ui-datepicker-prev {left:53px; top:3px;}
.ui-datepicker .ui-datepicker-prev span {background:url(../images/arrow_prev_grey.png) no-repeat center center; width:6px; height:11px; margin-left:-3px; margin-top:-5px;}
.ui-datepicker .ui-datepicker-prev-hover {border:none; background:none; left:53px; cursor:pointer;}*/

/*다음 달 버튼*/
/*.ui-datepicker .ui-datepicker-next {right:53px; top:3px;}
.ui-datepicker .ui-datepicker-next span {background:url(../images/arrow_next_grey.png) no-repeat center center; width:6px; height:11px; margin-left:-3px; margin-top:-5px;}
.ui-datepicker .ui-datepicker-next-hover {border:none; background:none; right:53px; cursor:pointer;}*/

/*달력*/
/*.ui-datepicker table {font-size:12px; margin:0;}
.ui-datepicker th {padding:5px 10px;}
.ui-datepicker .ui-datepicker-week-end {color:#ff4d3c;}
.ui-datepicker .ui-datepicker-week-end a {color:#ff4d3c;}
.ui-datepicker .ui-datepicker-week-end:last-child {color:#009bfa;}
.ui-datepicker .ui-datepicker-week-end:last-child a {color:#009bfa;}
.ui-datepicker .ui-datepicker-week-end:last-child a:hover {color:#fff;}
.ui-datepicker td span, .ui-datepicker td a {text-align:center; text-decoration:none;}
.ui-datepicker td a {width:19px; height:20px; margin:0 auto; border:2px solid #fff; border-radius:100%; line-height:20px; padding:1px; color:#555;}
.ui-datepicker td a:hover, .ui-state-highlight, .ui-datepicker .ui-state-active, .ui-datepicker .ui-datepicker-today .ui-state-active {border-color:#009bfa!important; background:#009bfa!important; color:#fff;}
.ui-datepicker-current-day .ui-state-active {border-color:#84ccef!important; background:#84ccef!important; color:#fff;}
.ui-datepicker .ui-datepicker-week-end.ui-datepicker-unselectable span {color:#ffd4d1;}
.ui-datepicker .ui-datepicker-week-end:last-child.ui-datepicker-unselectable span {color:#cde6fd;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {opacity:1;}
.ui-datepicker .ui-datepicker-unselectable span {color:#ccc;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border:2px solid #fff; background:none;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background:#009bfa; color:#fff;}*/

/* 창스크롤바 제거
#wrap으로 높이 100%하여 hidden하면 높이가 줄어들면서
화면이 위로 올라감
body는 살짝 특수한 성질을 가지고 있으며
높이가 없어도 화면바깥쪽을 가려줄수있음
*/
body.on {overflow: hidden;}

/* 안드로이드 최소단말 기준 */
#wrap {min-width: 360px;}

/*////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////헤더///////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////*/
#header {
    height: 50px;
    background: #fff;
    position: relative;
}

#header .btn_menu {
    border: none;
    text-indent: -9999px;
    float: left;
    background: url(../images/lct_menu.png) no-repeat 50% 50%;
    background-size: 28px;
    width: 50px;
    height: 50px;
} /*시안,아이콘 모두 48x40 -> 반으로 줄여 24px*/

#header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#header .logo img {
    width:82.5px;
    height: 26px;
}

#header .btn_login {
    background: url(../images/lct_mypage.png) no-repeat 50% 50%;
    background-size: 29px;
    width: 50px;
    height: 50px;
    float: right;
    text-indent: -9999px;
}

/*////////////////////////////사이드메뉴////////////////////////////////*/
#header .dimm {
    position: fixed;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    z-index: 9999;
}

#header .gnb_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: calc(100% - 60px);
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: all 0.5s;
    z-index: 99999;
    overflow: auto;
}

#header.on .gnb_wrap {
    transform: translateX(0%);
}

/*top_gnb(로그인)*/
#header .gnb_wrap .top_gnb {
    background: #fff;
    padding: 12px 15px 15px;
    position: relative;
}

#header .gnb_wrap .top_gnb .gnb_logo {
    width:82.5px;
    height: 26px;
}

#header .gnb_wrap .top_gnb .option{
    background: url(../images/nav_option.png) no-repeat 50% 50%;
    background-size: 24px;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    display: inline-block;
    position: absolute;
    right: 55px;
    top: 10px;
    border: none;
}

#header .gnb_wrap .top_gnb .btn_close {
    background: url(../images/nav_close.png) no-repeat 50% 50%;
    background-size: 26px;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    position: absolute;
    right: 15px;
    top: 10px;
    border: none;
}

#header .gnb_wrap .top_gnb .profile {
    width:41px;
    height: 41px;
    position: absolute;
    right: 20px;
    top: 65px;
}
#header .gnb_wrap .top_gnb .login_tit {
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
}

#header .gnb_wrap .top_gnb .login_txt {
    position: relative;
}

#header .gnb_wrap .top_gnb .login_txt:after {
    content: '';
    background: #777;
    width:1px;
    height: 12px;
    position: absolute;
    left: 45px;
    top: 5px;
}

#header .gnb_wrap .top_gnb .login_txt a {
    font-size: 14px;
    margin-top: 5px;
    color: #282828;
    display: inline-block;
    margin-right: 9px;
}

/*bottom_gnb(메뉴)*/
#header .gnb_wrap .bottom_gnb {
}
#header .gnb_wrap .bottom_gnb .gnb>li {
    
}
#header .gnb_wrap .bottom_gnb .gnb>li>a {
    position: relative;
}

#header .gnb_wrap .bottom_gnb .gnb>li>a.active {
    color: #07b;
}

#header .gnb_wrap .bottom_gnb .gnb>li>a .arrow {
    content: '';
    position: absolute;
    right: 15px;
    top: 30%;
    background: url(../images/nav_arrow.png) no-repeat 50% 50%;
    transform: rotate(180deg);
    background-size: 15px;
    width:20px;
    height: 20px;
}

#header .gnb_wrap .bottom_gnb .gnb>li>a.active .arrow {
    background: url(../images/nav_arrow.png) no-repeat 50% 50%;
    transform: rotate(0);
    background-size: 15px;
    width:20px;
    height: 20px;
} 


#header .gnb_wrap .bottom_gnb .gnb>li>a {
    display: block;
    font-size: 18px;
    color: #282828;
    line-height: 50px;
    padding: 0 15px;
    border-top: 1px solid #ddd;
    position: relative;
}

#header .gnb_wrap .bottom_gnb .gnb>li:last-child {
    border-bottom: 1px solid #ddd;
}

#header .gnb_wrap .bottom_gnb .gnb .depth2 {
    background: #eee;
    display: none;
}

#header .gnb_wrap .bottom_gnb .gnb .depth2>li>a {
    display: block;
    font-size: 14px;
    color: #555;
    line-height: 50px;
    padding: 0 30px;
    border-top: 1px solid #ddd;
}

#header .gnb_wrap .bottom_gnb .app_banner img{
    width:100%;
}

/*////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////메인///////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////*/

#main .main_slider img {width:100%;}

#main .main_slider .swiper-pagination {bottom:10px;}

#main .main_slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(0,0,0,0.5);
}

#main .main_slider .swiper-pagination .swiper-pagination-bullet-active {
    width:6px;
    height: 6px;
    border-radius: 100%;
    background: #07b;
}
#main .app_banner {
    background: #fff;
    padding: 15px;
}
#main .app_banner img {
    width: 100%; 
}

#main .content_wrap {
}
#main .content_wrap  .content {
    border : 1px solid #ddd;
    height: 220px;
    margin: 0 15px;
}

#main .content_wrap  .content li {
    width: 33.33%;
    height: 110px;
    float: left;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
}

#main .content_wrap  .content li:nth-child(3n) {
    width:33.34%;
    border-right: none;
}

#main .content_wrap  .content li:nth-child(4) {
    border-bottom: none;
}

#main .content_wrap  .content li:nth-child(5) {
    border-bottom: none;
}

#main .content_wrap  .content li:nth-child(6) {
    border-bottom: none;
}


#main .content_wrap  .content li a {
    color: #282828;
    display: block;
    padding: 24px 10px;  
}

#main .content_wrap  .content li:nth-child(5) a {
    padding: 14px 10px;
}
#main .content_wrap  .content li a img {
    width: 50px;
    height: 35px;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}

#main .dum_wrap {
    padding: 15px;
    position: relative;
}
/*탭 목록*/
#main .dum_wrap .dum_tap li {
    float: left;
    width: 25%;
    text-align: center;
    border-right: none;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;

}

#main .dum_wrap .dum_tap li:last-child {
    border-right: 1px solid #ddd;
}
#main .dum_wrap .dum_tap li a {
    display: block;
    line-height: 40px;
    color: #aaa;
    border-bottom: 1px solid #ddd;
}
#main .dum_wrap .dum_tap li a.active {
    border-bottom: none;
    border-top: 2px solid #07b;
    color: #282828; 
    margin-top: -1px;
}




/*탭 이미지*/

#main .dum_wrap .dum_product {
    border: 1px solid #ddd;
    border-top: none;
}
#main .dum_wrap .dum_product .product_slider {
    width: 100%;
    text-align: center;
}

#main .dum_wrap .dum_product .swiper-slide {
    padding: 20px;
}
#main .dum_wrap .dum_product .swiper-slide-active {
    padding: 20px 0px 20px 20px;
}
#main .dum_wrap .dum_product .swiper-slide-next {
    padding: 20px 20px 20px 0px;
}
#main .dum_wrap .dum_product .swiper-slide img {
    width:100px;
    height: 100px;
    margin-bottom: 15px;
}

#main .dum_wrap .dum_product .swiper-slide p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
}
#main .dum_wrap .dum_product .swiper-slide .left {
    margin: 0 10px 0 15px;
}

#main .dum_wrap .dum_product .swiper-slide .right {
    margin: 0 10px 0 10px;
}

#main .dum_wrap .dum_product .swiper-slide span {
    font-size: 16px;
}

#main .dum_wrap .dum_product .swiper-button-prev {
    background: url(../images/btn_arrow.png) no-repeat 50% 50%;
    background-size: 13px;
    transform: rotate(180deg);
    width: 30px;
    height: 50px;
    left: 0px;
}

#main .dum_wrap .dum_product .swiper-button-next {
    background: url(../images/btn_arrow.png) no-repeat 50% 50%;
    background-size: 13px;
    width: 30px;
    height: 50px;
    right:0;
}

#main .dum_product .product_slider {
    height: 0;
}

#main .dum_product .product_slider.active {
    height: auto;
}

#main .dum_wrap .btn_more a{
    background: url(../images/btn_more.png) no-repeat 50% 50%;
    background-size: 15px;
    width:20px;
    height:20px;
    position: absolute;
    right: 33px;
    top: 74px;
    z-index: 10;
}

/*공지사항*/
#main .notice_wrap {
    padding: 0 15px 15px;
}
#main .notice_wrap .notice {
    border: 1px solid #ddd;
    padding: 15px;
}

#main .notice {
    position: relative;
}

#main .notice h3 {
    font-size: 16px;
    display: inline-block;
}

#main .notice .btn_more a{
    background: url(../images/btn_more.png) no-repeat 50% 50%;
    background-size: 15px;
    width:20px;
    height:20px;
    position: absolute;
    right: 17px;
    top: 17px;
}

#main .notice .notice_list {
    margin-top: 10px;
}
#main .notice .notice_list li {
    position: relative;
}

#main .notice .notice_list li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width:2px;
    height: 2px;
    border-radius: 100%;
    background: #282828;
}
#main .notice .notice_list li a {
    display: block;
    color: #282828;
    margin-left: 10px;
    line-height: 25px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////푸터///////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////*/
#footer{
    background: #eee;
    padding-bottom: 10px;
}
#footer .quick_menu {
    overflow: hidden;
}
#footer .quick_menu li {
    float: left;
    width:33.33%;
    background: #ddd;
    text-align: center;
    position: relative;
}
#footer .quick_menu li:last-child {
    width:33.34%
}
#footer .quick_menu li a {
    display: block;
    line-height: 40px;
    color: #282828;
    font-weight: 500;
}

#footer .quick_menu li:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #eee;
    width:1px;
    height: 40px;
}

#footer .quick_menu li:first-child:after {
    display: none;
}

#footer .quick_link {
    overflow: hidden;
    padding: 15px;
    text-align: center;
}
#footer .quick_link li {
    display: inline-block;
    text-align: center;
}

#footer .quick_link li a {
    display: inline-block;
    color: #282828;
    font-weight: 500;
}

#footer .quick_link span {
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #282828;
    margin: 0 5px;
}
#footer address {
    font-size: 13px;
    text-align: center;
}
#footer address em {
    font-size: 12px;
    padding-top: 8px;
    display: block;
}

#footer address span {
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #282828;
    margin: 0 2px;
}

/*패밀리사이트*/
#footer .family_site {
    margin: 15px;
    position: relative;
}

#footer .family_site .btn_retail {
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    text-align: left;
    line-height: 40px;
    padding-left: 15px;
    font-weight: 500;
    position: relative;
    outline: none;
}
#footer .family_site .btn_retail.on {
    color: #07b;
}

#footer .family_site .btn_retail:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/btn_arrow_footer.png) no-repeat 50% 50%;
    transform: rotate(0deg);
    background-size: 15px;
    width: 40px;
    height: 40px; 
}

#footer .family_site .btn_retail.active:after {
    background: url(../images/btn_arrow_footer.png) no-repeat 50% 50%;
    transform: rotate(180deg);
    background-size: 15px;
    width: 40px;
    height: 40px; 
}
#footer .family_site .family_list {
    position: absolute;
    left: 0;
    bottom: 41px;
    width:100%;
    border: 1px solid #ddd;
    padding: 10px 0;
    background: #fff;
    display: none;
}

#footer .family_site .family_list li a {
    display: block;
    color: #282828;
    line-height: 30px;
    padding-left: 15px;
} 

/*////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////서브페이지///////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////*/

/*/////////////////서브페이지 공통//////////////////////*/
#container {
    position: relative;
}

#container .sub_location .btn_location {
    width:100%;
    height: 40px;
    border: none;
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
    outline: none;
    z-index: 100;
}

#container .sub_location .btn_location span {
    font-size: 18px;
    color: #07b;
}

#container .sub_location .btn_location span:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/btn_arrow.png) no-repeat 50% 50%;
    background-size: 10px;
    transform: rotate(90deg);
    width:40px;
    height: 40px;
}
#container .sub_location .btn_location.active span:after {
    background: url(../images/btn_arrow.png) no-repeat 50% 50%;
    background-size: 10px;
    transform: rotate(-90deg);
    width:40px;
    height: 40px;
}

#container .sub_location .list_location {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    display: none;
    position: absolute;
    left: 0;
    top: 39px;
    width:100%;
    z-index: 10;
    background: #fff;
    
}

#container .sub_location .list_location li a{
    display: block;
    color: #282828;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
}

#container .sub_location .list_location li.on a{
    color: #07b;
}


/*/////////////////서브페이지1(행사상품)//////////////////////*/
#container h2 {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}
#container .sub_product_slider {
    padding-bottom: 20px;
}

#container .sub_product_slider .swiper-wrapper {
    border: 1px solid blue;
    text-align: center;
}

#container .sub_product_slider .swiper-wrapper p {
    font-size: 18px;
    color: #282828;
}

#container .sub_product_slider .swiper-wrapper span {
    font-size: 16px;
    color: #282828;
}
#container .sub_product_slider img {
    width:285px;
}

#container .sub_product_slider .swiper-pagination {
    position: relative;
    bottom: -10px;
}

#container .sub_product_slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(0,0,0,0.5);
}

#container .sub_product_slider .swiper-pagination-bullet-active {
    width:6px;
    height: 6px;
    border-radius: 100%;
    background: #07b;
}

#container .sub_product_slider .swiper-button-prev {
    background: url(../images/btn_arrow.png) no-repeat 50% 50%;
    background-size: 13px;
    transform: rotate(180deg);
    width: 30px;
    height: 50px;
    left: 10px;
    top:43%;
}

#container .sub_product_slider .swiper-button-next {
    background: url(../images/btn_arrow.png) no-repeat 50% 50%;
    background-size: 13px;
    width: 30px;
    height: 50px;
    right: 10px;
    top:43%;
}

#container .warning {
    padding: 15px;
    color: #c30000;
    font-size: 12px;
}


#container .product_wrap {
}
#container .product_wrap .search_wrap {
    position: relative;
}
#container .product_wrap .search_wrap input[type="text"] {
    background: #fff;
    border: 1px solid #ddd;
    height: 40px;
    padding: 0 50px 0 50px;
    width: 100%;
}

#container .product_wrap .search_wrap:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/product_search.png) no-repeat 50% 50%;
    background-size: 18px;
    width:40px;
    height: 40px;
}

#container .product_wrap .search_wrap:after {
    content: '';
    position: absolute;
    left: 40px;
    top: 12px;
    background: #ddd;
    width: 1px;
    height: 18px;
}

#container .product_wrap .search_wrap .search_btn {
    border: none;
    background: #1abdd7;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 20%;
    outline: none;
}

/*상품 탭------------------------*/
#container .product_wrap .product_content_tap {
    padding: 15px 15px 0;
    overflow: hidden;
}

#container .product_wrap .product_content_tap .product_tap li {
    float: left;width:25%;
    background: #eee;
    text-align: center;
    position: relative;
}

#container .product_wrap .product_content_tap .product_tap li:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width:1px;
    height: 40px;
    background: #ddd;
}

#container .product_wrap .product_content_tap .product_tap li:first-child:after {
    background: none;
}
#container .product_wrap .product_content_tap .product_tap li>a {
    color: #282828;
    line-height: 40px;
    display: block;
}

#container .product_wrap .product_content_tap .product_tap li.active a {
    background: #07b;
    color: #fff;
}



/*상품 이미지------------------------*/

#container .product_wrap .product_content_con {
    padding: 15px;  
}

#container .product_wrap .product_content_con .product_list {
    overflow: hidden;
}

#container .product_wrap .product_content_con .product_list li {
    width: 47.7%;
    float: left;
    border: 1px solid #ddd;
    margin: 10px 0 10px;
    height: 200px;
    text-align: center;
    padding: 20px;
}

#container .product_wrap .product_content_con .product_list li:nth-child(2n-1) {
    margin-right: 15px;
}

#container .product_wrap .product_content_con .product_list li:nth-child(2n) {
}

#container .product_wrap .product_content_con .product_list li img {
    width: 107px;
    height: 107px;
    margin-bottom: 10px;
}

#container .product_wrap .product_content_con .product_list li .product_tit {
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 5px;
}

#container .product_wrap .product_content_con .product_list li .product_txt {
    font-weight: 500;
}

#container .product_wrap .product_content_con .product_list.three li .product_tit {
    margin-bottom: 0px;
}

#container .product_wrap .product_more {
    border-top: 1px solid #ddd;
    margin: 0 15px 15px;

}

#container .product_wrap .product_more a {
    display: block;
    color: #282828;
    text-align: center;
    line-height: 40px;
    position: relative;
    margin-left: -20px;
}

#container .product_wrap .product_more a:after {
    content: '';
    position: absolute;
    right: 50%;
    top: 0;
    background: url(../images/nav_arrow.png) no-repeat 50% 50%;
    transform: rotate(-180deg);
    background-size: 14px;
    width:40px;
    height: 40px;
    margin-right: -60px;
}


/*/////////////////서브페이지2(창업가이드)//////////////////////*/
#container.franchise_page .franchise_guide {
    margin: 15px;
    position: relative;
}
#container.franchise_page .franchise_guide .btn_franchise {
    width: 100%;
    height: 40px;
    background: #fff;
    border: 1px solid #ddd;
    position: relative;
    outline: none;
}
#container.franchise_page .franchise_guide .btn_franchise span:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/btn_arrow_footer.png) no-repeat 50% 50%;
    background-size: 17px;
    transform: rotate(180deg);
    width: 40px;
    height: 40px;
}
#container.franchise_page .franchise_guide .btn_franchise.active span:after {
    background: url(../images/btn_arrow_footer.png) no-repeat 50% 50%;
    background-size: 17px;
    transform: rotate(0deg);
    width: 40px;
    height: 40px;
}

#container.franchise_page .franchise_guide .list_franchise {
    position: absolute;
    left: 0;
    top: 40px;
    width:100%;
    background: #fff;
    z-index: 5;
    display: none;
}

#container.franchise_page .franchise_guide .list_franchise li a{
    display: block;
    color: #282828;
    line-height: 40px;
    text-align: center;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    /* margin: 0 15px; */
}

#container.franchise_page .franchise_guide .list_franchise li:last-child a {
    border-bottom: 1px solid #ddd;
}
#container.franchise_page .franchise_guide .list_franchise li.on a{
    color: #07b;
}

#container.franchise_page .franchise_content .tap {
    width:100%;
    overflow: hidden;
}
#container.franchise_page .franchise_content .tap li {
    float: left;
    width:50%;
    text-align: center;
    height: 50px;
    font-weight: 500;
}

#container.franchise_page .franchise_content .tap li a {
    color: #282828;
    background:#fff;
    display: block;
    height: 50px;
    border: 1px solid #ddd;
    padding-top: 4px;
    
}
#container.franchise_page .franchise_content .tap li.on a {
    background: #07b;
    color: #fff;
    border: 1px solid #07b;
}



/*첫번째탭 내용*/
#container.franchise_page .trust_wrap .trust_part1 {
    padding: 0 15px 15px;
}
#container.franchise_page .trust_wrap .trust_part1 h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    position: relative;
}

#container.franchise_page .trust_wrap .trust_part1 h2:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #1cbed8;
}

#container.franchise_page .trust_wrap .trust_part1 img {
    margin: 0 auto;
    display: block;
    width:235px;
    height: 210px;
    margin-top: 50px;
}

#container.franchise_page .trust_wrap .trust_part1 p {
    margin-top: 40px;
    text-align: center;
    
}

#container.franchise_page .trust_wrap .trust_part2 {
    padding: 15px;
}

#container.franchise_page .trust_wrap .trust_part2 .award li {
    background: #eee;
    border-bottom: 1px solid #aaa;
    width:100%;
    height: 100px;
    padding: 25px 30px 25px;
}

#container.franchise_page .trust_wrap .trust_part2 .award li .type1 {
    width:68px;
    height: 50px;
}

#container.franchise_page .trust_wrap .trust_part2 .award li .type2 {
    width:70px;
    height: 70px;
    margin-top: -11px;
}

#container.franchise_page .trust_wrap .trust_part2 .award li p{
    display: inline-block;
    margin-left: 25px;
    margin-top: 4px;
}

#container.franchise_page .trust_wrap .trust_part3 {
    padding: 15px;
}

#container.franchise_page .trust_wrap .trust_part3 h3 {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 50px;
    position: relative;
}
#container.franchise_page .trust_wrap .trust_part3 h3:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #1cbed8;
}

#container.franchise_page .trust_wrap .trust_part3 img {
    margin: 0 auto;
    display: block;
    width:301px;
    height: 858px;
}

/*두번째탭 내용*/

#container.franchise_page .grow_wrap h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    position: relative;
}

#container.franchise_page .grow_wrap h2:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #1cbed8;
}
#container.franchise_page .grow_wrap img {
    display: block;
    margin: 0 auto;
    margin-bottom: 15px;
}
#container.franchise_page .grow_wrap .image1 {
    width:330px;
    height: 280px;
    margin-top: 50px;
}

#container.franchise_page .grow_wrap .image2 {
    width:330px;
    height: 270px;
}

#container.franchise_page .grow_wrap .image3 {
    width:330px;
    height: 500px;
}

#container.franchise_page .btn_top {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 100;
}

#container.franchise_page .btn_top img {
    width:36px;
    height: 36px;
}