@charset "UTF-8";

/**************************************************
프로그램 ID : pcSpopping.css
프로그램 명 : Layout Cascading Style Sheets
작  성   자 :
최초 작성일 : 2019/04/24
최종 작성일 :
참고   사항 :
**************************************************/

@font-face {font-family:"Noto Sans KR"; src:url('../font/NotoSansCJKkr-Light.eot'); src:url('../font/NotoSansCJKkr-Light.eot#iefix') format('embedded-opentype'), url('../font/NotoSansCJKkr-Light.woff') format('woff'), url('../font/NotoSansCJKkr-Light.ttf') format('truetype'), url('../font/NotoSansCJKkr-Light.svg') format('svg'); font-weight:200; font-style:normal;}
@font-face {font-family:"Noto Sans KR"; src:url('../font/NotoSansCJKkr-DemiLight.eot'); src:url('../font/NotoSansCJKkr-DemiLight.eot#iefix') format('embedded-opentype'), url('../font/NotoSansCJKkr-DemiLight.woff') format('woff'), url('../font/NotoSansCJKkr-DemiLight.ttf') format('truetype'), url('../font/NotoSansCJKkr-DemiLight.svg') format('svg'); font-weight:300; font-style:normal;}
@font-face {font-family:"Noto Sans KR"; src:url('../font/NotoSansCJKkr-Regular.eot'); src:url('../font/NotoSansCJKkr-Regular.eot#iefix') format('embedded-opentype'), url('../font/NotoSansCJKkr-Regular.woff') format('woff'), url('../font/NotoSansCJKkr-Regular.ttf') format('truetype'), url('../font/NotoSansCJKkr-Regular.svg') format('svg'); font-weight:400; font-style:normal;}
@font-face {font-family:"Noto Sans KR"; src:url('../font/NotoSansCJKkr-Medium.eot'); src:url('../font/NotoSansCJKkr-Medium.eot#iefix') format('embedded-opentype'), url('../font/NotoSansCJKkr-Medium.woff') format('woff'), url('../font/NotoSansCJKkr-Medium.ttf') format('truetype'), url('../font/NotoSansCJKkr-Medium.svg') format('svg'); font-weight:500; font-style:normal;}
@font-face {font-family:"Noto Sans KR"; src:url('../font/NotoSansCJKkr-Bold.eot'); src:url('../font/NotoSansCJKkr-Bold.eot#iefix') format('embedded-opentype'), url('../font/NotoSansCJKkr-Bold.woff') format('woff'), url('../font/NotoSansCJKkr-Bold.ttf') format('truetype'), url('../font/NotoSansCJKkr-Bold.svg') format('svg'); font-weight:700; font-style:normal;}


/* 초기화
------------------------------------------------------------------------------- */
.shoppingInfo * {margin:0; padding:0; border:0 none transparent; box-sizing:border-box;}
:before, :after {box-sizing:border-box;}
.shoppingInfo * {font-family:"Happiness-Sans", sans-serif; font-size:12px; line-height:18px; color:#666; font-weight:200; letter-spacing:-0.03em;}/* 2022-03-04 */
.shoppingInfo form, .shoppingInfo fieldset, .shoppingInfo p, .shoppingInfo figure {word-break:normal; word-wrap:break-word;}
.shoppingInfo legend, .shoppingInfo caption, .shoppingInfo figcaption {display:none;padding:0 20px;}
.shoppingInfo caption {display: block;width: 1px; height: 0; font-size: 0; line-height: 0; overflow: hidden;} /* 2020-웹접근성-1차-002 추가 */
.shoppingInfo menu, .shoppingInfo ol, .shoppingInfo ul, .shoppingInfo li, .shoppingInfo dl, .shoppingInfo dt, .shoppingInfo dd {list-style:none;}
.shoppingInfo menu, .shoppingInfo ol, .shoppingInfo ul, .shoppingInfo dl, .shoppingInfo dt {display:block;}
.shoppingInfo table {width:100%; border-collapse:collapse;}
.shoppingInfo table th, .shoppingInfo table td {color:#666; vertical-align:top; word-break:normal; word-wrap:break-word;}
.shoppingInfo button, .shoppingInfo label {cursor:pointer;}
.shoppingInfo button::-moz-focus-inner {padding:0; border:0;}
.shoppingInfo a {text-decoration:none; cursor:pointer; transition:color 0.1s linear 0s, background-color 0.1s linear 0s, opacity 0.1s linear 0s !important;}
.shoppingInfo a:link, .shoppingInfo a:visited {color:#666;}
.shoppingInfo a:hover, .shoppingInfo a:active {color:#222;}
.shoppingInfo h1, .shoppingInfo h2, .shoppingInfo h3, .shoppingInfo h4, .shoppingInfo h5, .shoppingInfo h6 {line-height:1; word-break:normal; word-wrap:break-word;}
.shoppingInfo h1, .shoppingInfo h2, .shoppingInfo h3, .shoppingInfo h4, .shoppingInfo h5, .shoppingInfo h6, .shoppingInfo strong, .shoppingInfo th {font-weight:700;}
.shoppingInfo address, .shoppingInfo em, .shoppingInfo i {font-style:normal;}
.shoppingInfo figure > span {line-height:0; display:block;}
.blind, .hide {position:absolute !important; width:0 !important; height:0 !important; font-size:0; line-height:0; visibility:hidden; overflow:hidden;}
.tit_page {min-height:29px; margin-bottom:54px; font-size: 29px; color: #000; line-height: 29px; font-family: 'Happiness-Sans-Title';}/* 2022-03-04 수정 */
button {text-indent:inherit !important;}

/* 기존 사이트에 있던 스타일 적용시 삭제
------------------------------------------------------------------------------- */
/*.content {width:764px; min-height:380px; margin:52px auto 0 auto;}
.tit_page {min-height:29px; margin-bottom:54px;}
input.text {min-height:18px; padding:4px 5px;font-size:12px; color:#666; line-height:18px; border:1px solid #ccc; vertical-align:middle;}
.btn_type02 {display:inline-block; vertical-align:middle;}
.btn_type02 button {height:28px; text-indent:0; font-size:12px; line-height:17px; overflow:visible;}
.btn_type02 button span {padding:5px 20px 4px 20px; font-family:"돋움", Dotum, Helvertia, Arial, Sans-serif; font-size:12px; font-weight:bold; color:#fff; line-height:17px; letter-spacing:-1px; white-space:nowrap; cursor:pointer; border:1px solid #666; background:#666; vertical-align:middle; display:block;}
.btn_type02 button:hover span {border-color:#000; background-color:#000; text-decoration:none;}
.paging {min-height:22px; margin-top:20px; text-align:center;}
.paging a, .paging strong {margin:0 3px; padding:2px 7px 0px 7px; color:#666; text-align:center; text-decoration:none; line-height:18px; border:1px solid #e0e0e0; vertical-align:middle; display:inline-block;}
.paging .on {font-weight:bold; color:#fff; border:1px solid #000; background:#000;}*/


/* 버튼
------------------------------------------------------------------------------- */
.shoppingInfo .btn {font-family:"Noto Sans KR"; font-size:20px; color:#fff; font-weight:400; text-align:center; background:none; vertical-align:middle;}
.shoppingInfo a.btn {color:#fff; vertical-align:middle; display:inline-block;}

.shoppingInfo .btn.base {height:70px; padding:0 20px; border-radius:0; background:rgba(51,51,51, 0.9);}
.shoppingInfo a.btn.base {line-height:70px;}

.shoppingInfo .btn.txt {width:360px; height:50px; font-size:24px; background:#376155;}
.shoppingInfo a.btn.txt {line-height:70px;}
.shoppingInfo .btn.txt.st01 {height:auto; font-size:13px; color:#666; border-radius:0; border-bottom:1px solid #666; background:none;}

.shoppingInfo .btn.txt.line {font-weight:200; color:#666; border:1px solid #e6e6e6; background:none;}
.shoppingInfo .btn.txt.line > strong {font-weight:400; color:#1f7460;}
.shoppingInfo .btn.txt.line.st01 {height:70px; font-size:24px; font-weight:400; color:#376155; border-color:#376155;}

/* 안내
------------------------------------------------------------------------------- */
.shoppingInfo .note:not(ol):not(ul), .shoppingInfo .note > li {padding-left:14px; font-size:20px; line-height:32px; text-align:left; word-break:keep-all;}
.shoppingInfo .note > li:not(:first-of-type) {padding-top:7px;}
.shoppingInfo .note:not(ol):not(ul):before, .shoppingInfo .note > li:before {width:4px; height:4px; margin:0 10px 0 -14px; font-weight:200; background:#898989; word-break:break-all; white-space:normal; vertical-align:5px; display:inline-block; content:"";}
.shoppingInfo .note.st01:not(ol):not(ul):before, .shoppingInfo .note.st01 > li:before {width:auto; height:auto; margin-right:3px; background:none; vertical-align:0; content:"※";}


/* 표형태
------------------------------------------------------------------------------- */
.shoppingInfo .table {width:100%; display:table;}
.shoppingInfo .table.col > * {width:50%; vertical-align:top; display:table-cell;}
.shoppingInfo .table.row {width:auto;}
.shoppingInfo .table.row > * {display:table-row;}


/* 표
------------------------------------------------------------------------------- */
/* 정보 */
.shoppingInfo table.info th, .shoppingInfo table.info td {font-size:24px; line-height:36px; word-break:break-all; vertical-align:top;}
.shoppingInfo table.info th {width:120px; padding-right:33px; text-align:left; font-weight:200; white-space:nowrap;}
.shoppingInfo table.info td {/*width:100%;*/ font-weight:400; color:#222;}
.shoppingInfo table.info tr:not(:last-of-type) th, .shoppingInfo table.info tr:not(:last-of-type) td {padding-bottom:8px;}
/* 제품 */
.shoppingInfo table.product th, table.product td {font-size:24px; line-height:36px; color:#333; word-break:keep-all; vertical-align:top;}
.shoppingInfo table.product th {padding-right:10px; text-align:left; font-weight:400; color:#222;}
.shoppingInfo article.noImgProduct {padding:19px 0 18px 0 !important;}
.shoppingInfo article.noImgProduct + article.noImgProduct {border-top:1px dashed #e6e6e6;}
.shoppingInfo article.noImgProduct + article.noImgProduct:last-of-type {padding-bottom:0px;}
.shoppingInfo table.product.tr td {text-align:right;}


/* 결과없음
------------------------------------------------------------------------------- */
.shoppingInfo div.none {width:100%; height:203px; margin-bottom:20px; border:1px solid #e6e6e6; display:table;}
.shoppingInfo div.none > section {text-align:center; vertical-align:middle; display:table-cell;}
.shoppingInfo div.none h5 {font-weight:700; font-size:20px; color:#222; line-height:30px;}
.shoppingInfo div.none p {margin-top:12px; font-size:16px; line-height:26px;}


/* 목록페이지
------------------------------------------------------------------------------- */
.shoppingSearch {position:relative; float:right; z-index:10;}
.tabArea {position:relative; padding-top:30px !important;}
.tabArea > h4 {position:absolute; top:6px; left:0;}
.tabArea > h4:nth-of-type(2) {left:108px;}
.tabArea > h4:nth-of-type(3) {left:218px;}
.tabArea > h4:nth-of-type(4) {left:346px;}
.tabArea > h4:nth-of-type(5) {left:472px;}
.tabArea > h4 a {font-size:20px; font-weight:200; color:#666; display:block;}
.tabArea > h4.on a {position:relative; font-weight:700; color:#222;}
.tabArea > h4.on a:before {position:absolute; top:-6px; right:-6px; width:6px; height:6px; background:#222; display:block; content:"";}
.tabArea > .tabCont {margin-top:50px;}
p.result {padding-bottom:30px; font-size:16px; font-weight:400; color:#222; line-height:16px;}
p.result strong {font-size:16px; font-weight:700; color:#d13535;}
#pick p.result strong {color:#376155;}
.eventList {margin-bottom:-20px;}
.eventList:after {clear:both; display:block; content:"";}
.eventList li:not(:nth-child(3n)) {margin-right:25px;}
.eventList li {float:left; width:238px; height:358px; margin-bottom:57px;}
.eventList li a {display:block;} /* 2020-웹접근성-1차-002 변경 */
.eventList li figure > span {width:238px; height:238px; overflow:hidden; display:block;}
.eventList li figure figcaption {margin-top:22px; display:block;}
.eventList li figure figcaption h5 {font-family: "Happiness-Sans"; width:200px; height:62px; font-size:21px; color:#222; line-height:32px; letter-spacing:-0.05em; word-break:keep-all; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}/* 2022-06-30 */
.eventList li figure figcaption h5 + p {font-family: "Happiness-Sans"; margin-top:18px; font-size:16px; font-weight:400; color:#898989;}/* 2022-03-04 */
.shoppingInfo .paging {clear:both;}

/* 상세페이지
------------------------------------------------------------------------------- */

.mainImg .videoArea, .changeArea > div.videoArea {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.mainImg .videoArea iframe, .mainImg .videoArea embed, .changeArea .videoArea iframe, .changeArea .videoArea embed {position:absolute; top:0; left:0; width:100%; height:100%;}
figure img, .mainImg img, .barcode img, #popBarcode img {width:100%; vertical-align:top;}
.fixArea {clear:both; position:relative; padding:0 65px 0 65px !important; font-size:20px; line-height:32px;}
.fixArea *, .changeArea * {font-size:20px; line-height:32px;}
/*.fixArea:before {position:absolute; top:24px; left:0; width:100%; height:50px; box-shadow:0 0 60px #fff; display:block; content:"";}*/
.fixArea h2 { position:relative; margin-top:51px; font-size:54px; color:#222; font-weight:700; line-height:64px; font-family: 'Happiness-Sans-Title';}/* 2022-03-04 수정 */
.fixArea h2 + p {padding-top:17px; font-size:20px;}
.fixArea table.info {margin-top:25px;}
.fixArea table + dl {margin-top:39px;}
.changeArea {padding:0 65px 40px 65px;}
.changeArea article:not(:first-of-type), .changeArea figure.mainImg {padding-top:10px;} 
.changeArea .oneProduct {position:relative}
.changeArea > div.videoArea {margin-top:40px;}
/*.changeArea .blank {height:40px;}*/
.changeArea .subTit + .subTit {padding-top:0;}
.changeArea .subTit h3 {font-size:30px; color:#222; font-weight:700; line-height:42px; word-break:keep-all; font-family: 'Happiness-Sans-Title';}/* 2022-03-04 수정 */
.changeArea .subTit h3 em {padding-bottom:11px; font-weight:400; line-height:16px; color:#3d5c52; display:block;}
.changeArea .subTit h3 em.st01 {font-weight:700; color:#222;}
.changeArea .subTit > p {padding-top:11px; font-weight:400; word-break:keep-all;}
.changeArea .oneProduct > a figure figcaption, .changeArea .twoProduct > a figure figcaption {position:relative;}
.changeArea .oneProduct > a figure figcaption:before, .changeArea .twoProduct > a figure figcaption:before {position:absolute; right:0; top:-67px; width:53px; height:53px; background:url(../../images/btn/btn_plus01.png) 50% no-repeat #f5f5f5; display:block; content:"";}
.changeArea .oneProduct figure > span, .changeArea .twoProduct figure > span, .changeArea .mainImg > span, #popProduct .changeArea figure > span > em, .mainImg > span {position:absolute;margin-top:-40px; padding:0 0 10px 10px; font-size:20px; line-height:20px; display:block;}
.changeArea .oneProduct figure .top {position: absolute;top: 10px;margin-top: 0px;padding: 10px 0 0 10px;left:0;}
.changeArea .twoProduct figure .top {position: absolute;top: 0;margin-top: 0px;padding: 15px 0 0 20px;left:0;}
.changeArea .oneProduct figure figcaption {display:block;}
.changeArea .oneProduct figure figcaption, .changeArea .twoProduct figure figcaption {margin-top:14px; display:block;}
.changeArea .oneProduct figure figcaption dl > dt, .changeArea .twoProduct figure figcaption dl > dt, dl.priceArea > dt {display:none;}
.changeArea .oneProduct figure figcaption dl > dd, .changeArea .twoProduct figure figcaption dl > dd {font-weight:400; font-size:24px; color:#222;}
.changeArea .oneProduct figure figcaption dl > dd:not(:first-of-type), .changeArea .twoProduct figure figcaption dl > dd:not(:first-of-type) {margin-top:2px;}
.changeArea dl > dd strong, dl.priceArea > dd strong, .changeArea table td strong {font-size:28px; font-weight:700; color:#d13535; word-break:keep-all;}
.changeArea .oneProduct figure figcaption dl > dd:first-of-type strong, .changeArea .twoProduct figure figcaption dl > dd:first-of-type strong {font-size:24px; color:#222;}
.changeArea dl > dd span, dl.priceArea > dd span, .changeArea table td span {font-size:20px; font-weight:200; color:#898989; text-decoration:line-through;}
.changeArea dl > dd span, dl.priceArea > dd span, .changeArea table td span {padding-right:17px;}
.changeArea .twoProduct {width:calc(100% + 24px); margin:0 -12px;position:relative;}
.changeArea .twoProduct figure figcaption dl > dd span {display:block;}
.changeArea .twoProduct figure {padding:0 12px;position:relative;}
.shoppingInfo hr {border-top:1px solid #e6e6e6;}
.changeArea hr {margin-right:-65px; display:block !important;}
.changeArea hr.dotdot {border-style:dashed; overflow:hidden;}
.changeArea .btnArea {text-align:center;}
.changeArea .infoArea {padding-top:4px;}
.changeArea .noteArea h4 {font-weight:400; font-size:24px; color:#666;}
.changeArea .noteArea .note {margin-top:21px; padding:47px 40px 48px 40px; background:#f5f5f5;}
.changeArea table.info td p, dl.priceArea > dd p {font-size:20px; color:#898989;}
.changeArea .eventInfo {padding:13px 0 15px 0;}
.changeArea .eventInfo p {font-size:24px; font-weight:400; color:#222; word-break:keep-all;}
.changeArea .callArea dt {padding-right:8px; font-weight:400;}
.imgBatchRight {left:52% !important;}
.imgBatchRightFigure {display:table-cell !important;}
.imgBatchRightFigure .wrap_p_img {width:47%;display:inline-block;float:right;}
.imgBatchRightFigure .rightA {width:50%;float:right;}
.rightFigcaption {margin:0px;width:50%;padding-right:30px;}
/*가로형 추가 20.05.26*/
.changeArea .oneProductHorizontal > a figure:before {    position: absolute;
    bottom: 0px;
    width: 53px;
    height: 53px;
    background: url(../../../images/btn/btn_plus01.png) 50% no-repeat #f5f5f5;
    display: block;
    background-size:24px;
    content: "";}
.changeArea .oneProductHorizontal > a figure figcaption:before {display:none;}
.changeArea .oneProductHorizontal figure{display:inline-flex;position:relative;} 
.changeArea .oneProductHorizontal figure img{width:100%; margin-right:8px;padding-right:12px;} 
.changeArea .oneProductHorizontal figure figcaption {display:inline-block;width:49%;vertical-align:top;} 
.changeArea .oneProductHorizontal figure > span {position:absolute;bottom:0;left:0;}
.changeArea .oneProductHorizontal strong {display:block;}
.changeArea .oneProductHorizontal figcaption{margin-top:-5px !important;}


#popProduct figure > span {width:200px;}
#popProduct figure img {width:100%;}
#popProduct figure figcaption {padding-left:40px}
#popProduct figure figcaption span {margin:10px 0 4px 0; display:block;}
#popProduct h4 {font-size:24px; color:#222; font-weight:700;}
#popProduct .changeArea article:last-of-type {padding-bottom:0;}
#popProduct .changeArea .eventInfo {padding-top:25px}
#popProduct .changeArea .eventInfo p {font-size:20px; font-weight:200; color:#898989; line-height:30px;}


/* 암막/팝업
------------------------------------------------------------------------------- */
#mask {opacity:0.54; z-index:300 !important;}
.iframe_layer {position:absolute; border:none; background-color:transparent; z-index:300;}
.dimmed {position:absolute; left:0; top:0; min-width:1280px; width:100%; background:rgba(0,0,0,0.54); z-index:400;}
#loadingOverlay {position:absolute; text-align:center; display:none; z-index:500;}
/* .popup {position:absolute; width:636px; background:#fff; display:none; z-index:350;} */
.popup {position:fixed; top:50% !important; left:50% !important; transform:translate(-50%,-50%); width:636px; background:#fff; display:none; z-index:350;}
.popup > section {position:relative; padding:60px 65px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.popup .close01 {position:absolute; top:30px; right:30px; width:30px; height:30px; font-size:0; background:url(../../images/btn/btn_close01.png) no-repeat; background-position:50% 50%; vertical-align:middle; overflow:hidden; display:inline-block;}


.btnLink {position: absolute;
    bottom: 0px;
    width: 53px;
    height: 53px;
    background: url(../../../images/btn/btn_plus01.png) 50% no-repeat #f5f5f5;
    display: block; right:0;
    background-size: 24px;
    content: "";}
    
 .wrap_p_img {position:relative;}
 
 .figureHorizontal .btnLink {right:11px}
 
 
.p_link {     height: 50px;
    font-size: 16px;
    font-weight: 400;
    color: #376155;
    border-color: #376155;
    border: 1px solid #376155;
    background: none;
    display: block;
    text-align: center;
    line-height: 50px;
    margin:15px 0px;}
    
    .mainImg {position:relative};
.mainImg .top {top:70px;position:absolute; !important;}

.waterTop {top:60px !important;}