@charset "utf-8";
/****************************************************/
.clear { clear: both }
.margin30px { width: 100%; padding: 15px 0; }
.margin60px { width: 100%; padding: 30px 0; }
.margin90px { width: 100%; padding: 50px 0; }
.navDisplay { position: fixed !important; top: 0; z-index: 600; background: rgba(0,0,0,.7) !important; transition: .2s ease-in-out; }
.cd-top { display: inline-block; justify-content: center; align-items: center; visibility: hidden; overflow: hidden; position: fixed; left: calc(100% - 100px); bottom: 70px; z-index: 1000; width: 40px; height: 40px; border-radius: 100%; background: rgba(255, 255, 255, 0.3) url(../images/common/cd-top-arrow.svg) no-repeat center 50%; text-indent: 100%; white-space: nowrap; opacity: 0; transition: .2s ease-in-out; font-size: 20px; flex-direction: column; }
.cd-top > em { font-size: 14px }
.cd-top.cd-is-visible { visibility: visible; opacity: 1 }
.cd-top.cd-fade-out { opacity: .5 }
.cd-top:hover { background-color: #121212; color: #fff; opacity: 1; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.confirm-area .btn { display: inline-block; padding: 28px 66px; cursor: pointer; font-size: 24px }
.confirm-area .btn.confirm { background: #fff; color: #167dd9; border: 1px solid #167dd9; transition: .2s ease-in-out; }
.confirm-area .btn.confirm:hover { background: #167dd9; color: #fff; box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff; }
.confirm-area .btn.basic { background: #666; color: #fff }
.confirm-area .btn.basic:hover { background: #333; color: #fff }
.confirm-area .btn.gray { background: #fff; color: #333; border: 1px solid #333; transition: .2s ease-in-out; }
.confirm-area .btn.gray:hover { background: #333; color: #fff; box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff; }
.confirm-area .btn.more { color: #666; margin-top: 50px; display: inline-block; width: 100px; height: 140px; position: relative; padding: 0; font-size: 20px; }
.confirm-area .btn.more em { display: inline-block; margin-top: 20px }
.confirm-area .btn.more > img { transition: .2s ease-in-out; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
.confirm-area .btn.more:hover { color: #121212 }
.confirm-area .btn.more:hover > img { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
/***********************************************************/
.board-area { width: 100%; margin-bottom: 100px; }
.board_section { width: 100%; margin: 0 auto; }
/* 검색섹션 */
.search_area_content { float: left; width: 100%; margin: 10px 0 10px }
.search_area_content ul.search_area { float: right; margin-right: 4px }
.search_area_content ul li { float: left; margin-right: 6px; position: relative }
.search_area_content ul li img.ui-datepicker-trigger { position: relative; top: 2px; margin-left: 3px; vertical-align: top; }
.search_area_content ul li.resveEndDe::before { content: "~"; margin: 0 3px; display: inline-block }
.search_area_content ul li.search_title { margin-left: 10px; position: relative; }
.search_area_content .page_menu { float: right }
.search_area_content { }
.sBtn_02 { display: inline-block; margin: 0; padding: 0; border: 1px solid #707070; background: #707070; border-radius: 4px; font-size: 14px; line-height: 160%; cursor: pointer; overflow: hidden; color: #fff; }
.btn_search { position: absolute; right: 0; top: 2px; display: inline-block; background-color: #fff; margin: 0; padding: 8px; font-size: 20px; cursor: pointer; }
/*테이블목록*/
.table_section { float: left; width: 100%; font-size: 18px }
.table-area { float: left; width: 100%; margin: 10px 0 30px; background-color: #fff }
.table-area.news { border-top: 2px solid #7d7f82; border-bottom: 2px solid #7d7f82 }
.gallery-area { display: block; width: 100%; margin: 10px 0 30px; }
.tHeader { display: table; width: 100%; border-collapse: collapse; border-top: 2px solid #848484 }
.tHeader .th.td { background-color: #efefef; color: #121212; padding: 32px 10px; text-align: center }
.tBody { display: table; width: 100%; border-collapse: collapse; }
.tBody > a { width: 100%; display: table-row-group }
.tRow { display: table-row; border-bottom: 1px solid #dfdfdf; }
.tRow.notice { }
.tRow.notice .td.title { font-weight: 600; line-height: 150%; font-size: 20px }
.tRow.notice { }
.td { display: table-cell; padding: 32px 10px; color: #999; }
.tBody .td { }
.tBody .td a { color: #333 }
.tBody .td a:hover { color: #000 }
.tBody .th { text-align: center; color: #121212; }
.tBody .th > em { position: relative; top: 10px; }
.td.nm { color: #333; text-align: center; }
.td.title { text-align: left; padding-left: 40px; color: #121212; }
.td.count { text-align: center; }
.td.date { text-align: left; padding-left: 20px }
/*.td.title a { display: inline-block; width:90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }*/
.td.top { vertical-align: top; }
.td.middle { display: table-cell; vertical-align: middle; text-align: center }
.td.bottom { vertical-align: bottom; }
.td.left { text-align: left; }
.td.center { text-align: center; }
.td.right { text-align: right; padding-right: 14px }
.tBody > ul:nth-child(odd) { background-color: #fff }
.tBody > a:nth-child(odd) { background-color: #fff }
.tBody > ul:hover { background-color: #f5f5f5; }
.tBody > a:hover { background-color: #f5f5f5; }
.tBody.list .td i { display: none; margin-right: 4px }
.tBody.list .td.file i { display: inline-block; }
.tBody.write { border-top: 2px solid #222222; }
.tBody.write .tRow { border-bottom: 1px solid #fff; }
.tBody.write .td i { display: inline-block; }
.tBody.write .td { float: left }
.tBody.write > ul { background-color: #fff }
/*********************************************************************************/
.board-area.recruit { }
.board-area.recruit .tRow { display: table-row; border: 1px solid #dfdfdf; padding: 30px 50px; float: left; width: 100% }
.board-area.recruit .tBody .td { float: left; width: 100% !important; padding: 10px 0px; }
.board-area.recruit .tBody .td.ctg { }
.board-area.recruit .tBody .td.ctg > span { background-color: #333; color: #fff; padding: 8px 14px; }
.board-area.recruit .tBody .td.title { padding: 40px 0 30px !important }
.board-area.recruit .tBody .td > p { float: left; font-size: 32px; font-weight: 600; line-height: 130% }
.board-area.recruit .tBody .td > em { float: right; font-size: 18px; font-weight: normal }
.board-area.recruit .tBody .td dl { float: left; color: #666 }
.board-area.recruit .tBody .td dl dd { float: left; margin-right: 16px; padding-right: 16px; margin-bottom: 10px; position: relative; }
.board-area.recruit .tBody .td dl dd::after { content: ""; width: 1px; height: 12px; background: #ccc; position: absolute; top: 3px; right: 0; }
.board-area.recruit .tBody .td dl dd:last-child::after { content: none; }
.board-area.recruit .tBody > a { float: left; margin-bottom: 30px }
/**********************************************************************************/
.board-area.recruit .readHeader .date { float: right; font-size: 17px; margin-bottom: 20px }
.board-area.recruit .readHeader .infor { font-size: 17px }
.board-area.recruit .readHeader .infor li { }
.board-area.recruit .readHeader .infor li em { font-weight: 600; color: #333; margin-right: 10px }
/**********************************************************************************/
.col-12 { width: 100% }
.col-11 { width: 90% }
.col-10 { width: 83% }
.col-9 { width: 75% }
.col-8 { width: 66.666666666667% }
.col-7 { width: 58.333333333333% }
.col-6 { width: 50% }
.col-5 { width: 41.666666666667% }
.col-4 { width: 33.333333333333% }
.col-3 { width: 25% }
.col-2 { width: 16.666666666667% }
.col-1 { width: 10% }
.col { width: auto !important }
/*상세보기*/
.readHeader { display: table; width: 100%; border-collapse: collapse; border-top: 1px solid #848484; border-bottom: 1px solid #eee }
.readHeader > h3 { font-size: 28px; padding: 20px 20px 10px; line-height: 160%; font-weight: normal }
.readHeader .infor { float: left; font-size: 14px; color: #999; padding: 0 20px 20px }
.readHeader .infor li { float: left; }
.readHeader .infor li::after { content: "|"; color: #ccc; font-size: 12px; margin: 0 14px; position: relative; top: -1px }
.readHeader .infor li:last-child::after { content: none }
.readHeader .infor i { display: inline-block !important; margin-right: 4px; position: relative; top: 1px; }
.readHeader .infor .name { color: #666 }
.readHeader .news-ico { float: right; font-size: 17px }
.readHeader .news-ico img { border-radius: 4px; margin-right: 4px; width: 16px; height: 16px; }
.readHeader p.url_link { display: block; float: left; font-size: 14px; width: 100%; padding: 0 20px 20px; }
.readHeader p.url_link span { position: relative }
.readHeader p.url_link span::after { content: "|"; color: #ccc; font-size: 12px; margin: 0 14px; position: relative; top: -1px }
.readHeader p.url_link a { word-break: break-all }
.readHeader p.url_link a:hover { color: #145fe5 }
.readBody { float: left; width: 100%; border-collapse: collapse; }
.readBody > .contents { width: 100% !important; padding: 20px 20px 50px; color: #000; font-size: 18px; line-height: 200%; overflow: hidden; position: relative }
.readBody > .contents ul { list-style-type: disc; margin: 1.2em; }
.readBody > .contents ul li { float: none }
.readBody > .contents ol { list-style-type: decimal; margin: 1em; }
.readBody > .contents table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.readBody > .contents div { font-family: 'Pretendard-Light' !important }
.readBody > .contents p { font-family: 'Pretendard-Light' !important }
.readBody > .contents span { font-family: 'Pretendard-Light' !important }
/*노티*/
span.noti { display: inline-block; font-size: 15px; border-radius: 3px; text-align: center; padding: 3px 16px; color: #fff; background: #222 }
/*페이지번호*/
.pagination { margin: 10px auto 34px; text-align: center; position: relative; display: flex; justify-content: center; align-items: center; }
.pagination:after { display: block; overflow: hidden; clear: both; content: '' }
/*.pagination a { display: inline-block; overflow: hidden; width: 24px; height: 16px; margin: 0 1px; line-height: 100%; text-align: center; vertical-align: middle }*/
.pagination a.active, .pagination a:hover { background: #333; color: #fff }
.pagination a.first_page, .pagination a.prev_page, .pagination a.next_page, .pagination a.last_page { background: #fff; color: #666 }
.pagination a { width: auto; height: 36px; min-width: 36px; margin: 0 2px; padding: 1px 2px 0; font-size: 17px; display: flex; justify-content: center; align-items: center; }
.pagination a.first_page:hover { background-color: #333; color: #fff }
.pagination a.prev_page:hover { background-color: #333; color: #fff }
.pagination a.next_page:hover { background-color: #333; color: #fff }
.pagination a.last_page:hover { background-color: #333; color: #fff }
.pageCount { position: absolute; right: 0 }
.view_list { overflow: auto; width: 100%; height: 300px; border-top: 1px solid #333; }
/****************/
/* 레이어팝업 */
.pop-layer .pop_box { float: left; overflow: auto; width: 100%; padding: 0; }
.pop-layer .pop_box.portArea { display: flex }
.pop-layer .pop_box.portArea .galleryArea { flex-basis: calc(100% - 300px); overflow: hidden; }
.pop-layer .pop_box.portArea .inforArea { flex-basis: 400px; position: relative; padding-top: 60px }
.pop-layer .pop_box.portArea .inforArea dl { width: 100%; height: 430px; overflow: auto; padding: 0 40px 40px; text-align: left; line-height: 150%; font-size: 17px; }
 .pop-layer .pop_box.portArea .inforArea dl::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 border: 3px solid rgba(255,255,255,.5);
}
 .pop-layer .pop_box.portArea .inforArea dl::-webkit-scrollbar-button:start:decrement, .pop-layer .pop_box.portArea .inforArea dl::-webkit-scrollbar-button:end:increment {
 display: block;
 height: 10px;
 background: rgba(0,0,0,.1);
}
 .pop-layer .pop_box.portArea .inforArea dl::-webkit-scrollbar-track {
 background-color: rgba(0, 0, 0, .05);
 -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .1)
}
 .pop-layer .pop_box.portArea .inforArea dl::-webkit-scrollbar-thumb {
 height: 50px;
 width: 50px;
 background: rgba(0, 0, 0, .1);
}
.pop-layer .pop_box.portArea .inforArea dl dt { font-weight: 600; font-size: 24px; padding: 10px 0; margin-bottom: 10px; }
.pop-layer .pop_box.portArea .inforArea dl dt span { padding: 10px 0; border-bottom: 2px solid #333; line-height: 200% }
.pop-layer .pop_box.portArea .inforArea dl dd { margin: 20px 0; }
.pop-layer .pop_box.portArea .inforArea dl dd span { }
.pop-layer .pop_box.portArea .inforArea dl dd ul { padding-left: 20px }
.pop-layer .pop_box.portArea .inforArea dl dd ul li { list-style: square; margin-bottom: 20px }
.pop-layer .pop_box.portArea .inforArea dl dd ul li::marker {
}
.pop-layer .pop_box.portArea .inforArea dl dd ul li p { font-weight: 600 }
.pop-layer .pop_box.portArea .inforArea dl dd ul li span { }
.pop-layer .pop_box.portArea .inforArea a.close { position: absolute; top: 20px; right: 20px; padding: 10px }
.pop-layer .pop_box.portArea .inforArea a.close > i { transition: .2s ease-in-out; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
.pop-layer .pop_box.portArea .inforArea a.close:hover > i { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
.pop-layer .pop_box.portArea .port_list_top .swiper-slide { background-size: cover; background-position: center; height: 640px }
.pop-layer .pop_box.portArea .port_list_btm { height: 70px; box-sizing: border-box; padding: 0; width: 300px; position: absolute; bottom: 60px; right: 36px; overflow: hidden; }
.pop-layer .pop_box.portArea .port_list_btm .swiper-slide { width: 33.3%; height: 70px; opacity: 0.3; cursor: pointer }
.pop-layer .pop_box.portArea .port_list_btm .swiper-slide-thumb-active { opacity: 1; }
.pop-layer .pop_box.portArea .galleryArea .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-btn { width: 374px; height: 70px; position: absolute; bottom: 60px; right: 0; }
.swiper-btn .swiper-button-next, .swiper-btn .swiper-container-rtl .swiper-button-prev { right: 8px; left: auto; }
.swiper-btn .swiper-button-prev, .swiper-btn .swiper-container-rtl .swiper-button-next { left: 8px; right: auto; }
.swiper-btn .swiper-button-next:after, .swiper-btn .swiper-button-prev:after { font-size: 20px; }
.swiper-btn .swiper-button-next:after, .swiper-btn .swiper-container-rtl .swiper-button-prev:after { color: #333; }
.swiper-btn .swiper-button-prev:after, .swiper-btn .swiper-container-rtl .swiper-button-next:after { color: #333; }
/* 권한없는사용자포트폴리오 */
.pop-layer .pop_box.portArea.guest { }
.pop-layer .pop_box.portArea.guest .port_list_top .swiper-slide::after { content: ''; display: block; background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pop-layer .pop_box.portArea.guest .port_list_btm .swiper-slide::after { content: ''; display: block; background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pop-layer .pop_box.portArea.guest .port_list_top .swiper-slide div.txt { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; font-size: 28px; text-align: center; color: #fff; line-height: 170%; padding: 30px 0 0; }
.pop-layer .pop_box.portArea.guest .port_list_top .swiper-slide div.txt > span { margin-top: 40px; display: block; font-size: 20px }
.pop-layer .pop_box.portArea.guest .port_list_top .swiper-slide div.txt > span a { color: #fff }
.pop-layer .pop_box.portArea.guest .port_list_top .swiper-slide div.txt > span a:hover { text-decoration: underline; text-underline-position: under }
.pop-layer .pop_box.order { padding: 30px 20px; }
.pop-layer .pop_box div.txt { line-height: 160%; font-size: 20px; margin-bottom: 20px }
.pop-layer .pop_box div.txt > img { width: 100px; margin-bottom: 20px }
/***************************************/
/* 레이어팝업 */
.pop-layer .pop_box { float: left; overflow: auto; width: 100%; padding: 0; }
.pop-layer .pop_box.productArea { }
.pop-layer .pop_box.productArea a.close { position: absolute; top: 20px; right: 20px; padding: 10px; z-index: 999 }
.pop-layer .pop_box.productArea a.close > i { transition: .2s ease-in-out; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
.pop-layer .pop_box.productArea a.close:hover > i { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
.pop-layer .pop_box.productArea .body { padding: 0; text-align: left; overflow: auto; height: 90vh; }
.pop-layer .pop_box.productArea .body .cont { padding: 6vh 6vw 0; }
.pop-layer .pop_box.productArea .body .cont > h1 { padding: 20px 0 0; }
.pop-layer .pop_box.productArea .body .cont > p.point-font { font-size: 32px; font-weight: 600; line-height: 130%; margin-bottom: 40px; }
.pop-layer .pop_box.productArea .body .cont > p.point-font em { color: #0678D3; }
.pop-layer .pop_box.productArea .body .cont > ul { display: flex; flex-wrap: wrap; align-items: flex-start; }
.pop-layer .pop_box.productArea .body .cont > ul li { background-color: #F0F8FF; border-radius: 6px; flex-basis: 24%; margin-left: 10px; margin-bottom: 10px; min-height: 450px; }
.pop-layer .pop_box.productArea .body .cont > ul li:first-child { margin-left: 0 }
.pop-layer .pop_box.productArea .body .cont > ul li > div { width: 100%; padding: 14px; }
.pop-layer .pop_box.productArea .body .cont > ul li > div > p { width: 100%; }
.pop-layer .pop_box.productArea .body .cont > ul li > div > p > img { width: 100%; max-width: 100%; }
.pop-layer .pop_box.productArea .body .cont > ul li > div > span { font-weight: 600; display: block; color: #333; font-size: 22px; width: 100%; text-align: center; padding: 20px 0; line-height: 140%; }
.pop-layer .pop_box.productArea .body .cont > ul li > div > em { display: inline-block; text-align: center; font-size: 17px; line-height: 140%; }
/**/
.pop-layer .pop_box.productArea .body .cont .product_component { width: 100%; position: relative; margin: 90px 0; display: flex }
.pop-layer .pop_box.productArea .body .cont .product_component h2 { font-size: 26px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px }
.pop-layer .pop_box.productArea .body .cont .product_component>div { width: 100%; border-top: 2px solid #121212 }
.pop-layer .pop_box.productArea .body .cont .product_component>div ul { margin: 80px 0 50px; display: grid; width: 100%; gap: 2%; grid-template-columns: 49% 49%; }
.pop-layer .pop_box.productArea .body .cont .product_component>div ul li { font-size: 22px; margin-bottom: 30px; line-height: 140% }
.pop-layer .pop_box.productArea .body .cont .product_component>div ul li div { }
.pop-layer .pop_box.productArea .body .cont .product_component>div ul li div > img { width: 100%; max-width: 100% }
.pop-layer .pop_box.productArea .body .cont .product_component>div ul li p { font-weight: 600; padding: 20px 0 10px }
.pop-layer .pop_box.productArea .body .cont .product_component>div ul li span { font-size: 20px; word-break: break-all/* line-height: 140% */ }
.pop-layer .pop_box.productArea .body .cont .product_component>div > p.cmt { position: relative; top: -40px }
.pop-layer .pop_box.productArea .body .cont .product_component>div > p > span { display: block; font-weight: 600; padding: 20px 0 10px; font-size: 22px }
.pop-layer .pop_box.productArea .body .cont .product_component>div > p > em { font-size: 20px; line-height: 140% }
.pop-layer .pop_box.productArea .body .cont .product_component .process { text-align: center; padding-top: 30px }
.pop-layer .pop_box.productArea .body .cont .product_component .process > img { max-width: 100% }
.pop-layer .pop_box.productArea .body .cont .product_component .process > p { text-align: left; }
/**/
.pop-layer .pop_box.productArea .body .cont .product_func { width: 100%; position: relative; margin: 40px 0; display: flex }
.pop-layer .pop_box.productArea .body .cont .product_func h2 { font-size: 26px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px }
.pop-layer .pop_box.productArea .body .cont .product_func>div { width: 100%; border-top: 2px solid #121212 }
.pop-layer .pop_box.productArea .body .cont .product_func>div ol { margin-top: 80px }
.pop-layer .pop_box.productArea .body .cont .product_func>div ol li { font-size: 22px; margin-bottom: 50px; line-height: 140% }
.pop-layer .pop_box.productArea .body .cont .product_func>div ol li p { font-weight: 600; margin-bottom: 10px }
.pop-layer .pop_box.productArea .body .cont .product_func>div ol li span { font-size: 20px; /* line-height: 140% */ }
/**/
.pop-layer .pop_box.productArea .body .cont .product_effect { width: 100%; position: relative; margin: 40px 0; display: flex }
.pop-layer .pop_box.productArea .body .cont .product_effect h2 { font-size: 26px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px }
.pop-layer .pop_box.productArea .body .cont .product_effect>div { width: 100%; border-top: 2px solid #121212 }
.pop-layer .pop_box.productArea .body .cont .product_effect>div figure { margin-top: 40px; width: 100%; }
.pop-layer .pop_box.productArea .body .cont .product_effect>div figure > img { width: 100%; max-width: 100%; }
/**/
.pop-layer .pop_box.productArea .body .product_gallery-area { }
.pop-layer .pop_box.productArea .body .product_gallery { overflow: hidden; position: relative; margin-top: 100px }
.pop-layer .pop_box.productArea .body .product_gallery>p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 70%; background-color: rgba(0, 0, 0, .5); color: #fff; padding: 4vh 4vw; font-size: 20px; line-height: 170%; display: block; text-align: center; }
.pop-layer .pop_box.productArea .body .product_gallery .product_list li { width: 100% !important; height: 480px }
.pop-layer .pop_box.productArea .body .product_gallery .product_list li >p { width: 100%; height: 100%; position: relative }
.pop-layer .pop_box.productArea .body .product_gallery .product_list li >p>img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.pop-layer .pop_box.productArea .body .product_gallery .product_list li >p::before { content: ''; display: block; background-color: rgba(0,0,0,.2); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
/**/
.pop-layer .pop_box.productArea .body .product_gallery .product_list.newProduct li { width: 100% !important; height: 326px }
.pop-layer .pop_box.productArea .body .product_gallery .product_list.newProduct li >p { width: 100%; height: 100%; position: relative }
.pop-layer .pop_box.productArea .body .product_gallery .product_list.newProduct li >p>img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.pop-layer .pop_box.productArea .body .product_gallery .product_list li >p::before { content: none }
/* notice */
.mw { position: fixed; _position: absolute; top: 0; left: 0; z-index: 99999; width: 100%; height: 100% }
.mw .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3); animation: fadein 300ms ease-out; -moz-animation: fadein 300ms ease-out; -webkit-animation: fadein 300ms ease-out; -o-animation: fadein 300ms ease-out; }
.mw .fg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,.1); animation: fadeinTop 300ms ease-out; -moz-animation: fadeinTop 300ms ease-out; -webkit-animation: fadeinTop 300ms ease-out; -o-animation: fadeinTop 300ms ease-out; }
.mw .fg .pop_box { }
.mw .fg .pop_box > p { }
.mw .fg .pop_box > .img { width: 100%; }
.mw .fg .pop_box > .img > img { width: 100%; max-width: 100% }
.mw .fg .pop_box > div { padding: 40px 40px 30px; text-align: center }
.mw .fg .pop_box > div > p.title { font-size: 32px; line-height: 120%; }
.mw .fg .pop_box > div > p.title > span { color: #0678D3; display: block }
.mw .fg .pop_box > div > p.txt { font-size: 17px; padding: 30px 0 20px; line-height: 140% }
.mw .fg .pop_box > div > p.conact { text-align: left; line-height: 170%; margin-bottom: 30px; padding: 0 6px }
.mw .fg .pop_box > div > p.conact > em { display: inline-block; min-width: 70px; margin-right: 20px; position: relative }
.mw .fg .pop_box > div > p.conact > em::after { content: ""; position: absolute; top: 8px; right: -10px; width: 2px; height: 10px; background: #ccc; }
.mw .fg .pop_box .confirm-area .btn { padding: 20px 40px; cursor: pointer; font-size: 17px }
.mw .fg .btn-area { padding: 16px 20px; font-size: 17px }
.mw .fg .btn-area > a { padding: 8px 20px; background: #666; color: #fff; text-align: center; float: right; position: relative; top: -12px }
.mw .fg .btn-area > a:hover { background: #333; }
.fadeinTop { animation: fadeinTop 300ms ease-out; -moz-animation: fadeinTop 300ms ease-out; -webkit-animation: fadeinTop 300ms ease-out; -o-animation: fadeinTop 300ms ease-out; }
@keyframes fadeinTop { from {
opacity:0;
top: 52%;
}
to { opacity: 1; top: 50%; }
}
@-moz-keyframes fadeinTop { from {
opacity:0;
top: 52%;
}
to { opacity: 1; top: 50%; }
}
@-webkit-keyframes fadeinTop { from {
opacity:0;
top: 52%;
}
to { opacity: 1; top: 50%; }
}
@-o-keyframes fadeinTop { from {
opacity:0;
top: 52%;
}
to { opacity: 1; top: 50%; }
}
.fadein { animation: fadein 300ms ease-out; -moz-animation: fadein 300ms ease-out; -webkit-animation: fadein 300ms ease-out; -o-animation: fadein 300ms ease-out; }
@keyframes fadein { from {
opacity:0;
}
to { opacity: 1; }
}
@-moz-keyframes fadein { from {
opacity:0;
}
to { opacity: 1; }
}
@-webkit-keyframes fadein { from {
opacity:0;
}
to { opacity: 1; }
}
@-o-keyframes fadein { from {
opacity:0;
}
to { opacity: 1; }
}
/* **************** */
:root { --e-transform-transition-duration: .5s;
}