/* ==================== bx_prev bx_next 공통 ==================== */ .bx_prev{ display: inline-block; position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 50%; background-color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.2s; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.2); box-shadow: 0 0 7px rgba(0,0,0,0.2); } .bx_prev > a { display: block; position: relative; width: 100%; height: 100%; font-size: 0; cursor: pointer;} .bx_prev > a:before{ content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin-left: 2px; border-top: 2px solid #ccc; border-right: 2px solid #ccc; -webkit-transform: translate(-50%, -50%) rotate(-135deg); transform: translate(-50%, -50%) rotate(-135deg); transition: all 0.2s; } .bx_prev:hover { border: 1px solid #30beb2;} .bx_prev:hover > a:before { border-top: 2px solid #30beb2; border-right: 2px solid #30beb2;} .bx_next{ display: inline-block; position: absolute; top: 50%; right: -20px; width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 50%; background-color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.2s; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.2); box-shadow: 0 0 7px rgba(0,0,0,0.2); } .bx_next > a { display: block; position: relative; width: 100%; height: 100%; font-size: 0; cursor: pointer;} .bx_next > a:before{ content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin-left: -2px; border-top: 2px solid #ccc; border-right: 2px solid #ccc; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); transition: all 0.2s; } .bx_next:hover { border: 1px solid #30beb2;} .bx_next:hover > a:before { border-top: 2px solid #30beb2; border-right: 2px solid #30beb2;} /* ==================== sub_prev sub_next 공통 ==================== */ .sub_prev { display: inline-block; position: absolute; bottom: 0; left: 0; width: 20px; height: 20px; background-color: rgba(0,0,0,0.2);} .sub_prev > a { display: block; position: relative; width: 100%; height: 100%; font-size: 0; cursor: pointer;} .sub_prev > a:before{ content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: 2px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: translate(-50%, -50%) rotate(-135deg); transform: translate(-50%, -50%) rotate(-135deg); } .sub_next { display: inline-block; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background-color: rgba(0,0,0,0.2);} .sub_next > a { display: block; position: relative; width: 100%; height: 100%; font-size: 0; cursor: pointer;} .sub_next > a:before{ content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: -2px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } /* ==================== company_next ==================== */ .company_next { position: absolute; top: 0; right: 24px; width: 20px; height: 22px;} .company_next a { display: block; width: 100%; height: 100%; background: url(../images/btn_company_next.png) no-repeat center; font-size: 0;} .company_prev { position: absolute; top: 0; right: 0; width: 20px; height: 22px;} .company_prev a { display: block; width: 100%; height: 100%; background: url(../images/btn_company_next.png) no-repeat center; font-size: 0; transform: rotate(180deg);} /* ==================== tabs_form ==================== */ .tabs_form { display: block; position: relative ; width: 100%; padding: 0 1px; margin-bottom: 30px; border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid red;} .tabs_form::after { display: block; clear: both; content: '';} .tabs_form > li { float: left; position: relative; top: 1px; z-index: 0;} .tabs_form > li a { display: block; overflow: hidden; position: relative; z-index: 8; padding: 0; font-size: 18px; line-height: 1.4; color: #444; text-align: center; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .tabs_form > li.is_active { border-bottom: 2px solid #30beb2;} .tabs_form > li.is_active a { font-weight: 700; color: #30beb2;} .tabs_form.is_mywide2 { margin-bottom: 30px; border-bottom: 1px solid #e5e5e5;} .tabs_form.is_mywide2 li { width: 50%; height: auto; padding: 20px 0;} .tabs_form.is_mywide2 li + li { margin-left: 0;} .tabs_form.is_mywide2 li a { padding: 0; line-height: 1.4;} .tabs_form.is_wide2 { margin: 10px 0 20px; border-bottom: 1px solid #e5e5e5;} .tabs_form.is_wide2 li { width: 50%; height: auto; padding: 5px 0 13px;} .tabs_form.is_wide2 li + li { margin-left: 0;} .tabs_form.is_wide2 li a { padding: 0; font-size: 14px; line-height: 1.4;} .tabs_form.is_wide3 { margin-bottom: 30px; border-bottom: 1px solid #e5e5e5;} .tabs_form.is_wide3 li { width: 33.333%; height: auto; padding: 20px 0;} .tabs_form.is_wide3 li + li { margin-left: 0;} .tabs_form.is_wide3 li a { padding: 0; line-height: 1.4;} .tabs_form.is_wide4 { margin-bottom: 30px; border-bottom: 1px solid #e5e5e5;} .tabs_form.is_wide4 li { width: 25%; height: auto; padding: 20px 0;} .tabs_form.is_wide4 li + li { margin-left: 0;} .tabs_form.is_wide4 li a { padding: 0; line-height: 1.4;} /* 모바일만 */ @media screen and (max-width: 800px) { .tabs_form.is_wide3 { display: flex; align-items: center; margin-bottom: 20px;} .tabs_form.is_wide3 li { height: 60px; padding: 0; } .tabs_form.is_wide3 li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; font-size: 14px; } .tabs_form.is_mywide2 { display: flex; align-items: center; margin-bottom: 20px;} .tabs_form.is_mywide2 li { height: 60px; padding: 0; } .tabs_form.is_mywide2 li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; font-size: 14px; } } /* ==================== login ==================== */ .login { display: block; width: 100%; margin-top: 50px; font-size: 0; border: 1px solid #e5e5e5; padding: 35px 45px;} .login_header { display: inline-block; width: 50%; padding: 0 20px 300px 0; vertical-align: top; border-right: 1px solid #e5e5e5; background: url(../images/login_bg.png) no-repeat center 92%;} .login_tit { display: block; font-size: 40px; font-weight: 700;} .login_tit2 { margin-bottom: 10px; font-size: 16px; color: #30beb2;} .login_subtit { margin: 30px 0 10px; font-size: 20px; font-weight: 500;} .login_desc { color: #666;} .login_desc2 { margin: 25px 0; text-align: center;} .login .bullet1 li { color: #666;} .login_cont { display: inline-block; width: 50%; padding: 20px 0 0 0; vertical-align: top; } .login_cont .input { border: 1px solid #30beb2;} .login_cont_box { width: 400px; margin: 0 auto;} .login_cont .input { margin-bottom: 20px;} .btn_login_sign { display: block; width: 100%; height: 50px; border-radius: 2px; background-color: #30beb2; font-size: 18px; line-height: 50px; text-align: center; color: #fff;} .btn_login_join { display: block; width: 100%; height: 50px; border-radius: 2px; background-color: #4cabbf; font-size: 18px; line-height: 50px; text-align: center; color: #fff;} .login_or { display: block; position: relative; margin: 30px 0; text-align: center; color: #999;} .login_or::before { content: ''; position: absolute; top: 50%; left: 0; width: 45%; height: 1px; background-color: #bcbcbc; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .login_or::after { content: ''; position: absolute; top: 50%; right: 0; width: 45%; height: 1px; background-color: #bcbcbc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .btn_login_face { display: block; position: relative; width: 100%; height: 50px; padding-left: 20px; border-radius: 2px; border: 1px solid #3a5899; font-size: 18px; line-height: 48px; text-align: center; color: #3a5899;} .btn_login_face::before { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin-left: -100px; background: url(../images/icon_join_facebook.png) no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .login .area_securitycode { margin-bottom: 20px;;} .login .area_securitycode > div { border: 1px solid #30beb2;} /* ==================== All Categories ==================== */ .allcate { font-size: 0;} .allcate .page_head { margin-bottom: 40px;} .allcate .allcate_list { margin-bottom: 30px; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; font-size: 0;} .allcate_list > li { display: inline-block; width: 14.285714%; height: 60px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; vertical-align: top;} .allcate_list > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%;} .allcate_list > li > a:hover { background-color: #30beb2;} .allcate_list > li > a:hover p { color: #fff;} .allcate_list > li > a > p { font-size: 14px; line-height: 1.4; text-align: center;} .allcate > .allcate_item { display: inline-block; width: calc((100% - 20px)/2); vertical-align: top;} .allcate > div + div { margin-left: 20px;} .allcate_item > div { margin-bottom: 20px;} .allcate_item .allcate_title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px; border: 1px solid #30beb2; border-radius: 2px; cursor: pointer; } .allcate_item .allcate_title:hover { background-color: #30beb2;} .allcate_item .allcate_title:hover p { color: #fff;} .allcate_item .allcate_title p { position: relative; padding-left: 60px; font-size: 16px; color: #30beb2; text-align: center;} .allcate_item .allcate_title p::before { content: ''; position: absolute; top: -18px; left: 0; width: 60px; height: 60px; background: url(../images/icon_category.png) no-repeat;} .allcate_item #div1 .allcate_title p::before { background-position: 0 0;} .allcate_item #div1 .allcate_title:hover p::before { background-position: -60px 0;} .allcate_item #div2 .allcate_title p::before { background-position: -120px 0;} .allcate_item #div2 .allcate_title:hover p::before { background-position: -180px 0;} .allcate_item #div3 .allcate_title p::before { background-position: -240px 0;} .allcate_item #div3 .allcate_title:hover p::before { background-position: -300px 0;} .allcate_item #div4 .allcate_title p::before { background-position: -360px 0;} .allcate_item #div4 .allcate_title:hover p::before { background-position: -420px 0;} .allcate_item #div5 .allcate_title p::before { background-position: 0 -60px;} .allcate_item #div5 .allcate_title:hover p::before { background-position: -60px -60px;} .allcate_item #div6 .allcate_title p::before { background-position: -120px -60px;} .allcate_item #div6 .allcate_title:hover p::before { background-position: -180px -60px;} .allcate_item #div7 .allcate_title p::before { background-position: -240px -60px;} .allcate_item #div7 .allcate_title:hover p::before { background-position: -300px -60px;} .allcate_item #div8 .allcate_title p::before { background-position: -360px -60px} .allcate_item #div8 .allcate_title:hover p::before { background-position: -420px -60px} .allcate_item #div9 .allcate_title p::before { background-position: 0 -120px;} .allcate_item #div9 .allcate_title:hover p::before { background-position: -60px -120px;} .allcate_item #div10 .allcate_title p::before { background-position: -120px -120px;} .allcate_item #div10 .allcate_title:hover p::before { background-position: -180px -120px;} .allcate_item #div11 .allcate_title p::before { background-position: -240px -120px;} .allcate_item #div11 .allcate_title:hover p::before { background-position: -300px -120px;} .allcate_item #div12 .allcate_title p::before { background-position: -360px -120px;} .allcate_item #div12 .allcate_title:hover p::before { background-position: -420px -120px;} .allcate_item #div13 .allcate_title p::before { background-position: 0 -180px;} .allcate_item #div13 .allcate_title:hover p::before { background-position: -60px -180px;} .allcate_item #div14 .allcate_title p::before { background-position: -120px -180px;} .allcate_item #div14 .allcate_title:hover p::before { background-position: -180px -180px;} .allcate_item .depth1 { font-size: 0; padding: 30px 20px 20px 20px;} .allcate_item .depth1 h3 { display: block; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; font-size: 16px; text-align: center;} .allcate_item .depth1 > li { display: inline-block; width: calc((100% - 30px) / 2); margin-bottom: 30px; vertical-align: top;} .allcate_item .depth1 > li:nth-child(2n){ margin-left: 30px;} .allcate_item .depth2 li + li { margin-top: 10px;} .allcate_item .depth2 li a { display: block; overflow: hidden; padding-left: 20px; font-size: 12px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .allcate_item .depth2 li a:hover { color: #30beb2;} .allcate_item1 > div:nth-of-type(1) { height: 590px;} .allcate_item2 > div:nth-of-type(1) { height: 590px;} .allcate_item1 > div:nth-of-type(2) { height: 590px;} .allcate_item2 > div:nth-of-type(2) { height: 590px;} .allcate_item1 > div:nth-of-type(3) { height: 590px;} .allcate_item2 > div:nth-of-type(3) { height: 590px;} .allcate_item1 > div:nth-of-type(4) { height: 500px;} .allcate_item2 > div:nth-of-type(4) { height: 500px;} .allcate_item1 > div:nth-of-type(5) { height: 590px;} .allcate_item2 > div:nth-of-type(5) { height: 590px;} .allcate_item1 > div:nth-of-type(6) { height: 690px;} .allcate_item2 > div:nth-of-type(6) { height: 690px;} .allcate_item1 > div:nth-of-type(7) { height: 600px;} .allcate_item2 > div:nth-of-type(7) { height: 600px;} /* ==================== main ==================== */ .main_inner { width: 1440px; margin: 0 auto; padding: 30px 0 40px; text-align: center;} .main_bg { overflow-x: hidden; background-color: #fafafa;} .main_tit { display: block; position: relative; margin-bottom: 25px; font-size: 30px; text-align: center;} .main_tit > b { font-size: 30px; font-weight: 700;} .main_tit2 { display: block; position: relative; font-size: 30px; font-weight: 700; text-align: center;} .main_subtit { display: block; overflow: hidden; margin-bottom: 10px; font-weight: 700; text-align: left; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .main_subtit2 { overflow: hidden; margin-bottom: 10px; text-align: left; font-weight: 700; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .main_subtit3 { display: block; overflow: hidden; margin-bottom: 5px; font-size: 16px; text-align: left; font-weight: 700; color: #444; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .main_desc { display: inline-block; overflow: hidden; width: 100%; height: 40px; font-size: 12px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main_ellipsis2 { display: inline-block; overflow: hidden; width: 100%; line-height: 1.4; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main_columns { display: block; width: 100%; font-size: 0; text-align: left;} .column { display: inline-block; position: relative; vertical-align: top; } .is-2 { width: calc((100% - 24px) / 2);} .is-2:nth-child(2n) { margin: 0 0 40px 24px;} .is-3 { width: calc((100% - 96px) / 5);} .is-3:nth-of-type(2), .is-3:nth-of-type(4), .is-3:nth-of-type(7), .is-3:nth-of-type(9) { margin: 0 24px 24px 24px;} .is-4 { width: calc((100% - 72px) / 4);} .is-4:nth-child(2), .is-4:nth-child(6) { margin: 0 24px 24px 24px; } .is-4:nth-child(4), .is-4:nth-child(8) { margin: 0 0 24px 24px; } .is-5 { width: calc((100% - 72px) / 3);} .is-10 { width: 66.6%; margin-right: 24px;} .is-12 { width: calc(100% - 24px - 18.1%);} .is_pd { display: block; overflow: hidden; position: relative; width: 100%; margin-bottom: 10px; border: 1px solid #e5e5e5; background-color: #fff;} .is_pd::before { display: block; content: ''; padding-top: 100%;} .is_pd > img { display: block; position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.3);} .main_best_col1 { display: inline-block; width: 269px; margin-right: 24px; vertical-align: top; } .main_best_col1 > a { display: block; width: 100%; height: 100%;} .main_best_col1 > a img { display: block; width: 100%; height: 100%;} .main_best_col4 { display: inline-block; width: calc(100% - 293px); vertical-align: top; } .main_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 20px; font-size: 0;} .main_box > .left { display: inline-block; overflow: hidden; position: relative; width: 100px; height: 100px; border: 1px solid #e5e5e5;} .main_box > .left img { display: block; position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main_box > .right { display: inline-block; width: calc(100% - 100px); padding-left: 20px;} .main_module1 > li > a { display: block; overflow: hidden; position: relative; width: 100%; margin: 0 auto; border: 1px solid #e5e5e5; background-color: #fff; text-align: center;} .main_module1 > li > a::before { display: block; content: ''; padding-top: 48.5%;} .main_module1 > li > a > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; height: auto;} .main_module1 > li > p { height: 45px; margin: 17px 0 17px; } .main_module1 .main_box { padding-top: 25px; border-top: 1px solid #e5e5e5;} .main_module2 { padding: 23px 20px; border: 1px solid #e5e5e5; text-align: left;} .main_module2 > li { font-size: 0; } .main_module2 > li + li { margin-top: 25px; padding-top: 25px; border-top: 1px solid #e5e5e5;} .main_module2 .left { display: inline-block; width: calc(100% - 130px); margin-right: 20px;} .main_module2 .left > a { display: block; width: 100%; height: 100%;} .main_module2 .right { display: inline-block; overflow: hidden; width: 100px; height: 100px; border: 1px solid #e5e5e5; vertical-align: top;} .main_module2 .right > a { display: block; width: 100%; height: 100%; background-color: #fff;} .main_module2 .nation { margin-bottom: 8px;} .main_module2 .nation img { display: inline-block; overflow: hidden; width: 21px; height: 14px;} .main_module2 .nation em { display: inline-block; margin-left: 3px; font-size: 12px; vertical-align: middle;} .main_module2 .day { margin-top: 10px; font-size: 12px;} .main_module2 .tag { margin-top: 15px; font-size: 0;} .main_module2 .tag > li { display: inline-block; margin: 0 10px 5px 0; padding: 0 7px; border: 1px solid #e5e5e5; font-size: 12px; line-height: 23px; } /* ==================== tab -> select ==================== */ .tab_button_outer { display: block; margin-bottom: 20px;} .tab_select_outer { display: none; position: relative; margin-bottom: 20px; border: 1px solid #30beb2; background-color: #fff;} .tab_select_outer:after { content: ''; position: absolute; right: 18px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid #30beb2; border-right: 1.5px solid #30beb2; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);} .tab_select_outer select{ display: block; overflow: hidden; height: 30px; padding: 0 30px 0 10px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } /* ==================== main_toppd_wrap ==================== */ .main_toppd_wrap { position: relative; margin-bottom: 35px; border: 1px solid #e5e5e5; } .main_toppd_wrap .bx-viewport { height: auto !important; width: calc(100% + 1px) !important;} .main_toppd > li { display: block; height: 120px;} .main_toppd > li > a { display: block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 100%; padding-top: 40px; border-left: 1px solid #e5e5e5; transition: all 0.2s; font-size: 12px; line-height: 1.3; color: #555; } .main_toppd > li > a:before{ content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -20px; background: url(../images/icon_toppd.png) no-repeat; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .main_toppd > li > a.toppd_img1:before { background-position: 0 0;} .main_toppd > li > a.toppd_img2:before { background-position: -50px 0;} .main_toppd > li > a.toppd_img3:before { background-position: -100px 0;} .main_toppd > li > a.toppd_img4:before { background-position: -150px 0;} .main_toppd > li > a.toppd_img5:before { background-position: -200px 0;} .main_toppd > li > a.toppd_img6:before { background-position: -250px 0;} .main_toppd > li > a.toppd_img7:before { background-position: -300px 0;} .main_toppd > li > a.toppd_img8:before { background-position: -350px 0;} .main_toppd > li > a.toppd_img9:before { background-position: -400px 0;} .main_toppd > li > a.toppd_img10:before { background-position: -450px 0;} .main_toppd > li > a.toppd_img11:before { background-position: -500px 0;} .main_toppd > li > a.toppd_img12:before { background-position: -550px 0;} .main_toppd > li > a.toppd_img13:before { background-position: -600px 0;} .main_toppd > li > a.toppd_img14:before { background-position: -650px 0;} .main_toppd > li > a:hover, .main_toppd > li.is_active > a { background-color: #30beb2; color: #fff;} .main_toppd > li > a.toppd_img1:hover:before, .main_toppd > li.is_active > a.toppd_img1:before { background-position: 0 -60px;} .main_toppd > li > a.toppd_img2:hover:before, .main_toppd > li.is_active > a.toppd_img2:before { background-position: -50px -60px;} .main_toppd > li > a.toppd_img3:hover:before, .main_toppd > li.is_active > a.toppd_img3:before { background-position: -100px -60px;} .main_toppd > li > a.toppd_img4:hover:before, .main_toppd > li.is_active > a.toppd_img4:before { background-position: -150px -60px;} .main_toppd > li > a.toppd_img5:hover:before, .main_toppd > li.is_active > a.toppd_img5:before { background-position: -200px -60px;} .main_toppd > li > a.toppd_img6:hover:before, .main_toppd > li.is_active > a.toppd_img6:before { background-position: -250px -60px;} .main_toppd > li > a.toppd_img7:hover:before, .main_toppd > li.is_active > a.toppd_img7:before { background-position: -300px -60px;} .main_toppd > li > a.toppd_img8:hover:before, .main_toppd > li.is_active > a.toppd_img8:before { background-position: -350px -60px;} .main_toppd > li > a.toppd_img9:hover:before, .main_toppd > li.is_active > a.toppd_img9:before { background-position: -400px -60px;} .main_toppd > li > a.toppd_img10:hover:before, .main_toppd > li.is_active > a.toppd_img10:before { background-position: -450px -60px;} .main_toppd > li > a.toppd_img11:hover:before, .main_toppd > li.is_active > a.toppd_img11:before { background-position: -500px -60px;} .main_toppd > li > a.toppd_img12:hover:before, .main_toppd > li.is_active > a.toppd_img12:before { background-position: -550px -60px;} .main_toppd > li > a.toppd_img13:hover:before, .main_toppd > li.is_active > a.toppd_img13:before { background-position: -600px -60px;} .main_toppd > li > a.toppd_img14:hover:before, .main_toppd > li.is_active > a.toppd_img14:before { background-position: -650px -60px;} /* ==================== main_supweek_wrap ==================== */ .main_supweek_wrap { position: relative;} .main_supweek_wrap .bx-viewport { overflow: visible !important;} .main_supweek_wrap .bx-wrapper { max-width: auto !important;} .main_supweek > li[aria-hidden="true"] { opacity: 0.2;} .main_supweek_wrap .main_supweek_img { display: block; overflow: hidden; position: relative; width: 100%; border: 1px solid #e5e5e5;} .main_supweek_wrap .main_supweek_img:before { display: block; content: ''; padding-top: 40%;} .main_supweek_wrap .main_supweek_img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;} .bx_prev.supweek_prev { margin-top: -125px; } .bx_next.supweek_next { margin-top: -125px; } /* ==================== main_link ==================== */ .main_link { margin: 40px 0 60px; font-size: 0;} .main_link > li { display: inline-block; position: relative; width: calc((100% - 72px) / 4); height: 100px; background-color: #fafafa; border: 1px solid #e5e5e5; text-align: center; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .main_link > li + li { margin-left: 24px;} .main_link > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; flex-direction: column; overflow: hidden; width: 100%; height: 100%; padding: 0 5px;} .main_link > li > a strong { display: block; font-size: 25px; line-height: 1; font-weight: 700;} .main_link > li > a span { display: block; margin-top: 10px; font-size: 12px; line-height: 1.2; color: #666;} .main_link > li:hover { background-color: #30beb2; border: 1px solid #30beb2;} .main_link > li:hover a * { color: #fff} /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .main_inner { width: 100%; padding: 30px 20px 40px;} .main_tit { font-size: 28px;} .main_tit > b { font-size: 28px;} .main_subtit { margin-bottom: 5px;} .main_subtit2 { font-size: 12px;} .main_ellipsis2 { font-size: 12px;} .is_pd > img { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .main_best_col1 { width: calc(20.5% - 24px);} .main_best_col4 { width: 79.5%;} .main_box > .left { width: 80px; height: 80px;} .main_box > .right { width: calc(100% - 80px);} .main_module2 .left { width: 100%} .main_module2 .right { display: none;} .main_module2 > li + li { margin-top: 15px; padding-top: 15px;} .main_toppd > li { height: 100px;} .bx_prev.supweek_prev { margin-top: -90px;} .bx_next.supweek_next { margin-top: -90px;} .main_link > li > a strong { font-size: 23px;} .login_cont_box { width: calc(100% - 45px); margin: 0 0 0 45px;} .allcate_list > li { width: 25%;} } /* 모바일만 */ @media screen and (max-width: 800px) { .main_tit { margin-bottom: 15px; font-size: 20px; } .main_tit > b { font-size: 20px;} .main_tit2 { font-size: 20px;} .is-2 { width: 100%; margin-bottom: 25px;} .is-2:nth-child(2n) { margin: 0 0 25px 0;} .is-3 { width: calc((100% - 20px) / 2)} .is-3:nth-of-type(2), .is-3:nth-of-type(4), .is-3:nth-of-type(7), .is-3:nth-of-type(9) { margin: 0;} .is-3:nth-child(2n) { margin: 0 0 20px 20px;} .is-4 { width: calc((100% - 20px) / 2)} .is-4:nth-child(2), .is-4:nth-child(6) { margin: 0; } .is-4:nth-child(4), .is-4:nth-child(8) { margin: 0; } .is-4:nth-child(2n) { margin: 0 0 20px 20px;} .is-5 { display: block; width: 100%;} .is-10 { display: block; width: 100%;} .main_best_col1 { display: block; width: 100%; margin: 0 0 20px 0;} .main_best_col4 { display: block; width: 100%; } .main_box > .left { width: 70px; height: 70px;} .main_box > .right { width: calc(100% - 70px); padding-left: 15px;} .main_module1 > li > p { height: 38px; margin: 10px 0 5px;} .main_module1 .main_box { padding-top: 15px;} .main_module1 > li > a > img { width: 100%;} .main_module2 { padding: 0; border: none;} .bx_prev { left: 0; width: 30px; height: 30px;} .bx_next { right: 0; width: 30px; height: 30px;} .bx_prev > a:before { width: 6px; height: 6px;} .bx_next > a:before { width: 6px; height: 6px;} .tab_button_outer { display: none;} .tab_select_outer { display: block;} .main_link { margin: 0 0 10px} .main_link > li { width: calc((100% - 10px) / 2); height: 45px} .main_link > li:nth-child(2n){ margin: 0 0 10px 10px;} .main_link > li + li { margin-left: 0;} .main_link > li > a strong { font-size: 16px;} .main_link > li > a span { display: none;} .login { padding: 0; margin-top: 0; border: none;} .login_header { display: none;} .login_cont { display: block; width: 100%; padding: 0;} .login_cont_box { width: 100%; margin: 0;} .login_cont .input { margin-bottom: 20px;} .login_tit2 { font-size: 14px;} .login_desc2 { margin: 20px 0; font-size: 12px;} .btn_login_sign { font-size: 14px;} .btn_login_join { font-size: 14px;} .btn_login_face { font-size: 14px;} .btn_login_face::before { margin-left: -80px} .login_or { margin: 20px 0;} /* ==================== All Categories ==================== */ .allcate .page_head { margin-bottom: 20px;} .allcate > div + div { margin-left: 0;} .allcate_list > li { width: 50%; height: 45px;} .allcate_list > li > a > p { font-size: 12px;} .allcate > .allcate_item { display: block; width: 100%;} .allcate_item > div { margin-bottom: 10px;} .allcate_item .allcate_title { height: 50px;} .allcate_item .depth1 { padding: 20px 0 0 0;} .allcate_item .depth1 h3 { margin-bottom: 10px; font-size: 14px;} .allcate_item .depth1 > li { width: calc((100% - 15px) / 2);} .allcate_item .depth1 > li:nth-child(2n){ margin-left: 15px;} .allcate_item .depth2 li + li { margin-top: 5px;} .allcate_item .depth2 li a { padding-left: 0;} .allcate_item1 > div:nth-of-type(1) { height: auto;} .allcate_item2 > div:nth-of-type(1) { height: auto;} .allcate_item1 > div:nth-of-type(2) { height: auto;} .allcate_item2 > div:nth-of-type(2) { height: auto;} .allcate_item1 > div:nth-of-type(3) { height: auto;} .allcate_item2 > div:nth-of-type(3) { height: auto;} .allcate_item1 > div:nth-of-type(4) { height: auto;} .allcate_item2 > div:nth-of-type(4) { height: auto;} .allcate_item1 > div:nth-of-type(5) { height: auto;} .allcate_item2 > div:nth-of-type(5) { height: auto;} .allcate_item1 > div:nth-of-type(6) { height: auto;} .allcate_item2 > div:nth-of-type(6) { height: auto;} .allcate_item1 > div:nth-of-type(7) { height: auto;} .allcate_item2 > div:nth-of-type(7) { height: auto;} } /* ============================== input : checkbox ============================== */ input[type=checkbox] { vertical-align: middle;} input[type=checkbox] + label:before { display: none;} .input { overflow: hidden; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #e7e7e7; background-color: #fff; outline: none; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .input:hover, .input:focus { border-color: #30beb2;} .input:read-only, .textarea:read-only { background-color: #f5f5f5;} .input:read-only:hover, .input:read-only:focus{ border: 1px solid #e7e7e7;} textarea { width: 100%; min-height: 100px; padding: 10px; border: 1px solid #e7e7e7; background-color: #fff; color: #666; vertical-align: top;} .filename { position: relative; padding-left: 20px; color: #30beb2;} .filename::before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 20px; background: url(../images/icon_filename.png) no-repeat center;} .file { position: relative; font-size: 0;} .file .file_input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; outline: none; cursor: pointer;} .file .file_name { display: inline-block; overflow: hidden; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #e7e7e7; line-height: 38px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .file .file_label > div { font-size: 0;} /* ============================== input : datepicker_box ============================== */ .datepicker { width: 100%; padding: 0 50px 0 10px; background: #fff url(../images/datepicker.png) no-repeat right center; cursor: pointer;} .datepicker_box1 { display: inline-block; width: 100%;} .datepicker_boxday6 { font-size: 0;} .datepicker_boxday6 > .fit_middle { display: inline-block; width: 390px;} .datepicker_boxday6 > .datepicker_group { display: inline-block; margin-left: 10px; font-size: 0; vertical-align: top;} .datepicker_group a { display: inline-block; position: relative; width: 60px; height: 42px; margin: -1px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 14px; line-height: 37px; color: #666;} .datepicker_group a.is_active { border: 1px solid #30beb2; font-weight: 500; color: #30beb2;} .datepicker_group a.is_active::before { content: ''; position: absolute; top: -1px; right: 0; z-index: 1; width: 1px; height: 42px; background-color: #30beb2;} .datepicker_boxday6 > .search_button { display: inline-block; margin-left: 10px; vertical-align: top;} /* ============================== checkbox ============================== */ .checkbox { display: inline-block; position: relative; font-size: 0;} .checkbox input[type=checkbox] { overflow: hidden; position: absolute; top: 1px; left: 1px; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); border: 0;} .checkbox input[type=checkbox] + label { display: inline-block; position: relative; height: 100%; cursor: pointer; vertical-align: middle;} .checkbox input[type=checkbox] + label:before { display: inline-block; content: ''; position: relative; top: 1px; width: 10px; height: 10px; margin: 0 7px 0 0; border: 1px solid #30beb2; background-color: #fff; text-align: center; } .checkbox input[type=checkbox] + label:after { content: ''; position: absolute; top: 50%; left: 2px; width: 3px; height: 6px; margin-top: -2px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-50%); -webkit-transform: rotate(45deg) translateY(-50%); } .checkbox input[type=checkbox]:checked + label:before { background-color: #30beb2; } .checkbox input[type=checkbox]:checked + label:after { border: solid #fff; border-width: 0 1px 1px 0;} .checks { display: inline-block; position: relative; font-size: 0; vertical-align: top;} .checks input[type=checkbox] { overflow: hidden; position: absolute; top: 1px; left: 1px; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0);} .checks input[type=checkbox] + label { display: inline-block; position: relative; height: 100%; font-size: 12px; line-height: 1.5; color: #666; cursor: pointer; vertical-align: top;} .checks input[type=checkbox] + label:before { display: inline-block; content: ''; position: relative; top: 2px; width: 12px; height: 12px; margin: 0 10px 0 0; border: 1px solid #e5e5e5; background-color: #fff; text-align: center; } .checks input[type=checkbox] + label:after { content: ''; position: absolute; top: 3px; left: 5px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .checks input[type=checkbox]:checked + label:before { background-color: #30beb2; border: 1px solid #30beb2; } .checks input[type=checkbox]:checked + label:after { border: solid #fff; border-width: 0 1.5px 1.5px 0;} .checkt { display: inline-block; position: relative; font-size: 0; vertical-align: top;} .checkt input[type=checkbox] { overflow: hidden; position: absolute; top: 1px; left: 1px; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0);} .checkt input[type=checkbox] + label { display: inline-block; position: relative; height: 100%; font-size: 12px; line-height: 1.5; color: #666; cursor: pointer; vertical-align: top;} .checkt input[type=checkbox] + label:before { display: inline-block; content: ''; position: relative; top: 2px; width: 12px; height: 12px; margin: 0; border: 1px solid #e5e5e5; background-color: #fff; text-align: center; } .checkt input[type=checkbox] + label:after { content: ''; position: absolute; top: 3px; left: 5px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .checkt input[type=checkbox]:checked + label:before { background-color: #30beb2; border: 1px solid #30beb2; } .checkt input[type=checkbox]:checked + label:after { border: solid #fff; border-width: 0 1.5px 1.5px 0;} /* checks block으로 */ .checks_block1 { display: block; width: 100%;} .checks_block1 li { height: 40px;} .checks_block1 li + li { margin-top: 5px;} .checks_block1 .input { display:inline-block; width: 300px; vertical-align: middle;} .checks_block1 label { height: auto !important; line-height: 40px !important; vertical-align: middle !important;} .checks_block1 input[type=checkbox] + label:after { top: 14px;} .checks.is_block input[type=checkbox] + label { display: block;} /* radio_box */ [type="radio"]:checked, [type="radio"]:not(:checked) { position: absolute; left: -9999px;} [type="radio"]:checked + label, [type="radio"]:not(:checked) + label { display: inline-block; position: relative; padding-left: 25px; line-height: 29px; cursor: pointer;} [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border: 1px solid #ddd; border-radius: 100%; background: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); } [type="radio"]:checked + label:before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border: 1px solid #30beb2; border-radius: 100%; background: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%);} [type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after { content: ''; position: absolute; top: 50%; left: 3px; width: 8px; height: 8px; background: #30beb2; border-radius: 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%);} [type="radio"]:not(:checked) + label:after { opacity: 0;} [type="radio"]:checked + label:after { opacity: 1;} .radio_box { font-size: 0;} .radio_box label { display: inline-block;} .radio_box.radio_box_block label { display: block;} /* search_box */ .search_box { display: inline-block; position: relative; width: 100%; vertical-align: top;} .search_box input { width: 100%; height: 40px; padding: 0 85px 0 10px; border: 1px solid #e5e5e5;} .search_box .search_box_btn { position: absolute; top: 0; right: 0; height: 100%; } .search_box .sb_search { display: inline-block; height: 100%; padding: 0 15px; background-color: #30beb2; text-align: center; color: #fff;} .search_box2 { display: inline-block; position: relative; width: 100%; vertical-align: top;} .search_box2 input { padding: 0 45px 0 10px; width: 100%; height: 40px; border: 1px solid #e5e5e5;} .search_box2 .btn_search { position: absolute; top: 0; right: 0; width: 39px; height: 100%; border-left: 1px solid #e5e5e5; background: url(../images/btn_board1.png) no-repeat; font-size: 0;} /* input : select_box */ .select_box { display: inline-block; position: relative; z-index: 1; width: 100%; height: 40px; border: 1px solid #e5e5e5; background-color: #fff; vertical-align: top;} .select_box select { display: block; overflow: hidden; width: 100%; padding: 0 40px 0 15px; line-height: 36px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .select_box label { position: absolute; top: 10px; left: 0; z-index: -1; font-size: 14px; font-weight: 300; color: #535353;} .select_box:before { content: ''; position: absolute; right: 20px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);} /* ==================== search_button ==================== */ .search_button { font-size: 0; text-align: right;} .search_button a, .search_button button { display: inline-block; min-width: 80px; height: 40px; font-size: 14px; text-align: center; letter-spacing: -0.5px; vertical-align: middle;} .search_button a { line-height: 36px;;} .search_button.is_font a, .search_button.is_font button { font-size: 12px; } .search_button.is_small button { height: auto; min-width: 42px; height: 40px; padding: 10px;} .search_button.is_big a, .search_button.is_big button { height: 50px; min-width: 120px; padding: 0 10px; font-size: 14px; } .search_button a + a, .search_button button + button, .search_button a + button, .search_button button + a { margin-left: 10px;} .search_button.page_center { margin-top: 50px; text-align: center;} .search_button.page_center button { height: 50px; min-width: 150px; font-size: 14px;} .search_button.page_both { margin-top: 50px;} .search_button.page_both::after { display: block; clear: both; content: '';} .search_button.page_both > .left { float: left; display: inline-block; text-align: left;} .search_button.page_both > .right { float: right; display: inline-block; text-align: right;} .search_button.page_both button { height: 50px; min-width: 120px; padding: 0 10px; font-size: 14px;} .search_button.is_wide a, .search_button.is_wide button { min-width: 150px; } .search_button.is_wide2 a, .search_button.is_wide2 button { min-width: 150px; padding: 0 10px; } .search_button.is_wide3 a, .search_button.is_wide3 button { padding: 0 10px; } .search_button.is_table1 { margin-top: 50px;} .search_button.is_table1 button { height: 50px; min-width: 120px; padding: 0 10px;} .search_button.is_block { display: block; width: 100%; text-align: center;} .search_button.is_block button { display: block; padding: 0 10px; margin: 0 auto; text-align: center;} .search_button.is_block button + button { margin: 10px auto 0 ;} .btn0 { height: 30px; padding: 0 10px; background-color: #30beb2; border: 1px solid #30beb2; border-radius: 2px; font-size: 14px; text-align: center; letter-spacing: -0.5px; color: #fff;} .btn1 { background-color: #30beb2; border: 1px solid #30beb2; border-radius: 2px; color: #fff;} .btn2 { border: 1px solid #30beb2; border-radius: 2px; color: #30beb2; } .refresh { width: 40px; height: 40px; background: #fff url(../images/btn_refresh1.png) no-repeat center; border: 1px solid #30beb2; border-radius: 2px;} .btn_c1 { display: inline-block; width: 90px; height: 30px; padding: 0 10px; border: 1px solid #00b50c; border-radius: 2px; background-color: #fff; font-size: 12px; line-height: 28px; color: #00b50c; text-align: center;} .btn_down { display: inline-block; position: relative; width: 100px; height: 40px; padding: 0 30px 0 10px; border: 1px solid #30beb2; border-radius: 2px; line-height: 38px; color: #30beb2; text-align: center; vertical-align: middle; } .btn_down::after { display: block; content: ''; position: absolute; top: 50%; right: 15px; width: 10px; height: 13px; background: url(../images/btn_down1.png) no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .btn_plus2 { display: inline-block; height: 22px; padding-left: 30px; margin-left: 10px; background: url(../images/btn_plus2.png) no-repeat; background-position: 0 0; font-size: 14px; color: #30beb2; vertical-align: top;} .btn_minus2 { display: inline-block; height: 22px; padding-left: 30px; margin-left: 10px; background: url(../images/btn_minus2.png) no-repeat; background-position: 0 0; font-size: 14px; color: #30beb2; vertical-align: top;} /* arrow */ .btn_arrow1 { display: inline-block; position: relative; height: 30px; padding: 0 30px 0 10px; background-color: #30beb2; border-radius: 2px; font-size: 12px; line-height: 30px; color: #fff; } .btn_arrow1::before { content: ''; position: absolute; right: 13px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);} /* 정렬 */ .fit2, .fit3, .fit4, .fit2t { display: block; width: 100%; font-size: 0 !important;} .fit2 > * { display: inline-block; width: calc((100% - 10px) / 2); vertical-align: top; } .fit2t > * { display: inline-block; width: calc((100% - 24px) / 2); vertical-align: top; } .fit3 > * { display: inline-block; width: calc((100% - 20px) / 3); vertical-align: top; } .fit4 > * { display: inline-block; width: calc((100% - 30px) / 4); vertical-align: top; } .fit2 > * + * { margin-left: 10px;} .fit2t > * + * { margin-left: 24px;} .fit3 > * + * { margin-left: 10px;} .fit4 > * + * { margin-left: 10px;} .fit2.per_46 > :first-child { display: inline-block; width: calc(40% - 5px);} .fit2.per_46 > :last-child { display: inline-block; width: calc(60% - 5px);} .fit2.per_73 > :first-child { display: inline-block; width: calc(70% - 5px);} .fit2.per_73 > :last-child { display: inline-block; width: calc(30% - 5px);} .fit2.per_37 > :first-child { display: inline-block; width: calc(30% - 5px);} .fit2.per_37 > :last-child { display: inline-block; width: calc(70% - 5px);} .fit2.per_4 > :first-child { width: calc(40% - 5px);} .fit_box2 { font-size: 0 !important;} .fit_box2 > :first-child { display: inline-block; width: calc(100% - 90px); margin-right: 10px;} .fit_box2 > .search_button { display: inline-block; vertical-align: top;} .fit_box3 { font-size: 0;} .fit_box3 > input { display: inline-block; width: calc((100% - 115px) / 2); } .fit_box3 > .search_button { display: inline-block; margin-left: 10px; vertical-align: top;} .fit_middle { display: block; width: 100%; font-size: 0 !important;} .fit_middle > :nth-child(2n-1) { display: inline-block; width: calc((100% - 25px) / 2);} .fit_middle2 { display: block; width: 100%; font-size: 0;} .fit_middle2 > :nth-child(2n-1) { display: inline-block; width: calc((100% - 50px) / 3);} .fit_middle3 { display: block; width: 100%; font-size: 0;} .fit_middle3 > * { display: inline-block; width: calc((100% - 75px) / 4);} .fit_case1 { font-size: 0;} .fit_case1 > :first-child { display: inline-block; width: calc(30% - 10px); margin-right: 10px;} .fit_case1 > :last-child { display: inline-block; width: 70%;} .fit_case2 { font-size: 0;} .fit_case2 .cn { width: 70px; text-align: left; vertical-align: top;} .fit_case2 > .select_box { width: 150px; margin-right: 10px;} .fit_case3 { font-size: 0;;} .fit_case3 > :first-child { display: inline-block; width: calc(100% - 100px);} .fit_case3 > :last-child { display: inline-block; width: 100px; text-align: right; vertical-align: middle;} .cn0 { display: inline-block; line-height: 40px; text-align: center; vertical-align: middle; } .cn { display: inline-block; width: 25px; line-height: 40px; text-align: center; vertical-align: middle;} /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .datepicker_boxday6 > .fit_middle { display: block; margin: 0 auto 10px; width: 440px; } .datepicker_boxday6 > .datepicker_group { margin-left: 0;} .fit2t > * { display: block; width: 100%; } .fit2t > * + * { margin: 30px 0 0 0;} } /* 모바일만 */ @media screen and (max-width: 800px) { .checks_block1 li { height: auto;} .checks_block1 li + li { margin-top: 0;} .checks_block1 label { display: block !important;} .checks_block1 .input { display: block; width: 100%;;} .search_button.page_center { display: block; width: 100%;} .search_button.page_center button { display: block; width: 100%;} .search_button.page_center button + button { margin: 10px 0 0 0;} .search_button.is_table1 { display: block; width: 100%; margin-top: 20px;} .search_button.is_table1 button { display: block; width: 100%;} .search_button.is_table1 button + button { margin: 10px 0 0 0;} .search_button.page_both { margin-top: 30px;} .search_button.page_both > .left { display: block; float: none; text-align: center;} .search_button.page_both > .right { display: block; float: none; text-align: center;} .search_button.page_both > div + div { margin-top: 10px;} .search_button.page_both button { display: block; width: 100%;} .search_button.page_both button + button { margin-left: 0; margin-top: 10px;} .fit2.per_4 > :first-child { width: 100%;} .fit4 > * { display: inline-block; width: calc((100% - 10px) / 2)!important;} .fit4 > * + * { margin-left: 0;} .fit4 > *:nth-child(2n) { margin: 0 0 10px 10px !important;} .fit4 > button + button { margin-left: 0; vertical-align: top;} .fit_box2 > :first-child { display: block; width: 100%; margin: 0;} .fit_box2 > .search_button { display: block; width: 100%; margin-top: 10px; } .fit_box2 > .search_button button { display: block; width: 100%; } .fit_box3 { display: block;} .fit_box3 > input { width: calc((100% - 25px) / 2);} .fit_box3 > .search_button { display: block; width: 100%; margin-left: 0; margin-top: 10px;} .fit_box3 > .search_button button { display: block; width: 100%; } .fit_case1 > :first-child { display: block; width: 100%; margin: 0 0 10px 0;} .fit_case1 > :last-child { display: block; width: 100%;} .fit_case2 > .select_box { width: calc(100% - 80px); margin-bottom: 10px;} .datepicker_boxday6 > .fit_middle { width: 100%;} .datepicker_boxday6 > .fit_middle .datepicker { display: block; width: 100%;} .datepicker_boxday6 > .fit_middle .datepicker:nth-of-type(1){ margin-bottom: 10px;} .datepicker_boxday6 > .fit_middle .cn { display: none;} .datepicker_boxday6 > .datepicker_group { display: block; width: 100%; margin-bottom: 10px;} .datepicker_group a { width: calc((100% + 10px) / 6);} .datepicker_boxday6 > .search_button { display: block; width: 100%; margin-left: 0;} .datepicker_boxday6 > .search_button button { display: block; width: 100%} } /* ==================== xitem_block xitem_inline item_inline ==================== */ /* xitem을 block으로 */ .xitem_block > li { display: block; position: relative; width: 100%; height: 40px; padding: 0 40px 0 10px; border: 1px solid #e5e5e5; background-color: #fff;} .xitem_block > li + li { margin-top: 5px;} .xitem_block > li > span { display: block; overflow: hidden; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 38px;} .xitem_block .btn_xitem { position: absolute; top: 50%; right: 15px; width: 20px; height: 38px; font-size: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .xitem_block .btn_xitem:before, .xitem_block .btn_xitem:after { content:''; position: absolute; left:50%; top:50%; width: 13px; height: 1px; border-radius:4px; background:#666;} .xitem_block .btn_xitem:before { transform:translate(-50%,-50%) rotate(-45deg);} .xitem_block .btn_xitem:after { transform:translate(-50%,-50%) rotate(45deg);} /* xitem을 inline으로 */ .xitem_inline { font-size: 0;} .xitem_inline > li { display: inline-block; position: relative; } .xitem_inline > li > .item_box { height: 40px; padding: 0 30px 0 10px; border: 1px solid #e5e5e5; background-color: #fff;} .xitem_inline > li span { display: block; overflow: hidden; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 38px;} .xitem_inline .btn_xitem { position: absolute; top: 50%; right: 15px; width: 20px; height: 38px; font-size: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .xitem_inline .btn_xitem:before, .xitem_inline .btn_xitem:after { content:''; position:absolute; left:50%; top:50%; width: 13px; height:1px; border-radius:4px; background:#666;} .xitem_inline .btn_xitem:before { transform:translate(-50%,-50%) rotate(-45deg);} .xitem_inline .btn_xitem:after { transform:translate(-50%,-50%) rotate(45deg);} /* x가 없는 item을 inline으로 */ .item_inline { font-size: 0;} .item_inline > li { display: inline-block; position: relative; vertical-align: top;} .item_inline > li > .item_box{ height: 40px; padding: 0 10px; border: 1px solid #e5e5e5; background-color: #fff;} .item_inline > li span { display: block; overflow: hidden; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 38px;} .item_inline .search_button { text-align: left;} .item_inline3 { margin: 0 -5px -5px -5px;} .item_inline3 > li { width: 33.333%; padding: 0 5px 5px 5px;} .item_inline4 { margin: 0 -5px -5px -5px;} .item_inline4 > li { width: 25%; padding: 0 5px 5px 5px;} .item_inline5 { margin: 0 -5px -5px -5px;} .item_inline5 > li { width: 20%; padding: 0 5px 5px 5px;} /* plus minus */ .plmnitem_block li { font-size: 0;} .plmnitem_block li + li { margin-top: 10px;} .plmnitem_block .input { display: inline-block; width: calc(100% - 30px);} .plmnitem_block button { display: inline-block; width: 30px; height: 40px; vertical-align: middle;} .plmnitem_block button.btn_plus { background: url(../images/btn_plmn.png) no-repeat; background-position: 0 0;} .plmnitem_block button.btn_minus{ background: url(../images/btn_plmn.png) no-repeat; background-position: -30px 0;} /* input안에있는 x 버튼 */ .input_xitem { display: block; position: relative;} .input_xitem .input { padding: 0 40px 0 10px;} .input_xitem .btn_xitem2 { position: absolute; top: 50%; right: 15px; width: 20px; height: 38px; font-size: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .input_xitem .btn_xitem2:before, .input_xitem .btn_xitem2:after { content:''; position:absolute; left:50%; top:50%; width: 13px; height:1px; border-radius:4px; background:#666;} .input_xitem .btn_xitem2:before { transform:translate(-50%,-50%) rotate(-45deg);} .input_xitem .btn_xitem2:after { transform:translate(-50%,-50%) rotate(45deg);} /* ============================================================== input 끝 ========================================================== */ /* ==================== contents ==================== */ .contents_inner { width: 1440px; margin: 15px auto 100px; font-size: 0;} .other_inner { width: 100%; margin: 0 auto; font-size: 0;} aside { display: inline-block; position: relative; width: 220px; background-color: #fff; font-size: 14px;} aside.is_active { display: block;} .contents { display: block; width: 100%; font-size: 14px;} aside + .contents { display: inline-block; width: calc(100% - 244px); margin-left: 24px; vertical-align: top; } .page_head { display: block; margin-bottom: 20px; } .page_head.clearfix .page_subtit2{line-height: 40px;} .page_tit { font-size: 25px; font-weight: 700; } .page_tit2 { font-size: 40px; font-weight: 700; } .page_subtit { font-size: 18px; font-weight: 700; } .page_subtit1 { font-size: 18px; font-weight: 500; } .page_subtit2 { font-size: 14px; font-weight: 500; } .page_subtit2.mark { position: relative;} .page_subtit2.mark::after { content: '*'; position: relative; top: -2px; right: -4px; font-size: 12px; color: red;} .page_subtit3 { font-size: 14px; font-weight: 500; margin-bottom: 20px; } .page_subtit4 { font-size: 16px; font-weight: 500; margin-bottom: 15px; } .page_desc1 { margin: 10px 0; } /* . */ .bullet1 { display: block;} .bullet1 > li { position: relative; padding-left: 10px; } .bullet1 > li + li { margin-top: 5px;} .bullet1 > li::before { content: ''; position: absolute; top: 10px; left: 2px; width: 2px; height: 2px; border-radius: 50%; background-color: #444;} /* 기본 */ .bullet2 { display: block; margin: 10px 0;} .bullet2 > li { position: relative; color: #666;} .bullet2 > li + li { margin-top: 5px;} /* 원번호 */ .bullet3 { display: block;} .bullet3 > li { position: relative; padding-left: 25px; line-height: 24px; } .bullet3 > li::before { content: ''; position: absolute; top: 10px; left: 2px; width: 2px; height: 2px; border-radius: 50%; background-color: #444;} .bullet3 > li + li { margin-top: 10px;} .bullet3 > li .num { display: inline-block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 500; line-height: 15px; text-align: center; color: #fff; background-color: #30beb2;} .bullet4 { display: block;} .bullet4 > li { position: relative; color: #666;} .bullet4 > li + li { margin-top: 20px;} .bullet5 { display: block;} .bullet5 > li { position: relative; padding-left: 15px; font-size: 18px;} .bullet5 > li + li { margin-top: 10px;} .bullet5 > li::before { content: '*'; position: absolute; top: 10px; left: 0; font-size: 12px;} .lnb_tit { padding: 0 0 20px 10px; border-bottom: 1px solid #e5e5e5; font-size: 20px; line-height: 1.5; font-weight: 700; } .lnb_subtit { padding: 0 0 15px 10px; margin-top: 20px; border-bottom: 1px solid #e5e5e5; font-size: 16px; line-height: 1.5; font-weight: 700; } .lnb_subtit2 { padding: 0 0 15px 10px; margin-top: 20px; font-size: 14px; line-height: 1.5; font-weight: 700; } .lnb_subtit3 { padding: 0 0 15px 0; font-size: 16px; line-height: 1.5; font-weight: 700; } .lnb_search_box { display: inline-block; position: relative; width: calc(100% - 20px); margin: 0 10px 50px; vertical-align: top;} .lnb_search_box input { padding: 0 60px 0 10px; width: 100%; height: 40px; border: 1px solid #e5e5e5;} .lnb_search_box .search_box_btn { position: absolute; top: 0; right: 0; height: 100%; } .lnb_search_box .sb_search { display: inline-block; height: 100%; padding: 0 15px; background-color: #30beb2; text-align: center; color: #fff;} .lnb_btn { padding: 0 10px 20px;} .lnb_btn li { display: block; width: 100%;; background-color: #30beb2;} .lnb_btn li + li { margin-top: 10px;} .lnb_btn li a { display: block; line-height: 40px; color: #fff; text-align: center;} .lnb_mb_close { display: none; position: absolute; top: 0; right: 0; width: 60px; height: 60px; } .lnb_mb_close em { display: block;} .lnb_mb_close em { position: relative; width: 60px; height: 60px;} .lnb_mb_close em:before, .lnb_mb_close em:after { content:''; position:absolute; left:50%; top:50%; width: 20px; height: 2px; margin-left: 2px; background:#fff;} .lnb_mb_close em:before { transform: translate(-50%,-50%) rotate(-45deg);} .lnb_mb_close em:after { transform: translate(-50%,-50%) rotate(45deg);} .lnb_search_price { margin-top: 10px; font-size: 0;} .lnb_search_price > .input { display: inline-block; width: calc((100% - 67px)/2); } .lnb_search_price > .search_button { display: inline-block; vertical-align: top;} /* ==================== aside > lnb ==================== */ .lnb { padding: 15px 10px;} .lnb li { position: relative;} .lnb .depth2 { display: none; margin: 5px 0 10px;} .lnb .depth2 > li + li { margin-top: 10px;} .lnb .depth3 { display: none; margin: 7px 0 10px; } .lnb .depth3 > li + li { margin-top: 7px;} .lnb .depth_btn { display: block; position: relative; padding: 9px 0; width: 100%; max-height: 62px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .lnb .is_active.depth_btn {font-weight: 500; color: #30beb2;} .lnb .depth1_btn { display: block; overflow: hidden; position: relative; padding: 7px 15px 7px 0; font-size: 16px; width: 100%; max-height: 62px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .lnb .depth1_ico { position: absolute; top: 0; right: 0; width: 20px; height: 39px; font-size: 0;} .lnb .depth1_ico::before { content: ''; position: absolute; top: 18px; right: 2px; width: 5px; height: 5px; border-top: 2px solid #444; border-right: 2px solid #444; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); transition: all 0.2s;} .lnb .is_active .depth1_btn { font-weight: 500;} .lnb .is_active .depth1_ico::before { top: 20px; right: 2px; border-top: 2px solid #30beb2; border-right: 2px solid #30beb2; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);} /* depth2_btn */ .lnb .depth2_btn { display: block; overflow: hidden; position: relative; padding: 0 15px 0 0; font-size: 14px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .lnb .depth2_ico { position: absolute; top: 0; right: 0; width: 20px; height: 22px; font-size: 0;} .lnb .depth2_ico::before { content: ''; position: absolute; top: 10px; right: 0; width: 8px; height: 2px; background-color: #444; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.2s;} .lnb .depth2_ico::after { content: ''; position: absolute; top: 10px; right: 3px; width: 2px; height: 8px; background-color: #444; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.2s;} .lnb .is_active > .depth2 { display: block;} .lnb .is_active > .depth2_btn { font-weight: 500; color: #30beb2;} .lnb .is_active > .depth2_ico::after { display: none;} .lnb .is_active > .depth2_ico::before { background-color: #30beb2;} /* depth3_btn */ .lnb .depth3_btn { position: relative; display: inline-block; font-size: 12px;} .lnb .depth3_btn::before { display: none; content: ''; position: absolute; bottom: 0; right: 0; left: 0; width: 100%; height:1px; background-color: #30beb2;} .lnb .is_active > .depth3 { display: block;} .lnb .is_active > .depth3_btn { color: #30beb2;} .lnb .is_active > .depth3_btn::before { display: inline-block;} /* ==================== aside > lnb_filter ==================== */ .lnb_filter { padding: 15px 10px } .lnb_filter .depth2 { display: none; margin: 5px 0 15px;} .lnb_filter .depth2 > li + li { margin-top: 10px;} .lnb_filter .checkbox input[type=checkbox] + label { font-size: 12px;} .lnb_filter .depth1_btn { display: block; position: relative; padding: 9px 15px 9px 0; font-size: 14px;} .lnb_filter .depth2_btn { display: block; position: relative; font-size: 12px;} .lnb_filter .depth1_btn::before { content: ''; position: absolute; right: 0; top: 17px; width: 4px; height: 4px; border-top: 2px solid #444; border-right: 2px solid #444; -webkit-transform: rotate(135deg); transform: rotate(135deg);} .lnb_filter .is_active .depth1_btn { font-weight: 500;} .lnb_filter .is_active .depth1_btn:before { content: ''; position: absolute; right: 0; top: 20px; width: 4px; height: 4px; border-top: 2px solid #30beb2; border-right: 2px solid #30beb2; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} .lnb_filter .is_active > .depth2 { display: block;} .lnb_filter .depth2 > li.depth2_more { display: none;} .lnb_filter [type="radio"]:checked + label, .lnb_filter [type="radio"]:not(:checked) + label { padding-left: 20px; font-size: 12px; line-height: 20px; letter-spacing: -0.8px;} .lnb_filter [type="radio"]:not(:checked) + label:before { top: 4px; transform: none;} .lnb_filter [type="radio"]:checked + label:before { top: 4px; transform: none;} .lnb_filter [type="radio"]:checked + label:after { top: 7px; transform: none;} /* ==================== aside_menu ==================== */ .aside_menu { padding: 20px 20px 30px; border: 1px solid #e5e5e5;} .aside_menu > .lnb_tit2 { margin-bottom: 30px; font-size: 16px; font-weight: 700;;} .aside_menu > ul { display: block; font-size: 0;} .aside_menu > ul li { position: relative;} .aside_menu > ul li + li { margin-top: 18px;} .aside_menu > ul li a { display: block; overflow: hidden; position: relative; width: 100%; height: 100%;} .aside_menu > ul li a p { display: block; line-height: 1.4; word-break: break-word;} .aside_menu > ul li.is_active a p{ color: #30beb2;} /* ==================== aside_mypage ==================== */ .aside_mypage .lnb { padding: 0;} .aside_mypage .aside_mypage_box { padding: 22px 18px; border: 1px solid #e5e5e5;} .aside_mypage .aside_mypage_box + .aside_mypage_box { margin-top: 20px;} .aside_mypage .lnb .depth1_btn { padding: 10px 15px 10px 0; font-size: 14px;} .aside_mypage .lnb .depth2_btn { font-size: 12px;} /* ==================== pagination ==================== */ .pagination { margin-top: 80px; font-size: 0; text-align: center;} .pagination * { display: inline-block; vertical-align: top;} .pagination .pagination_list { font-size: 0; margin: 0 20px; } .pagination .pagination_list li { width: auto; min-width: 30px; height: 30px; } .pagination .pagination_list li + li { margin-left: 10px;} .pagination .pagination_list li a { display: block; height: 100%; padding: 0 3px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 12px; line-height: 30px; font-weight: 500; color: #666; text-align: center; } .pagination .pagination_list li.active a{ border: 1px solid #30beb2; color: #30beb2;} .pagination .pagination_first { width: 30px; height: 30px; padding: 0; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: 0 -1px;} .pagination .pagination_prev { width: 30px; height: 30px; padding: 0; margin-left: 10px; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: -30px -1px;} .pagination .pagination_next { width: 30px; height: 30px; padding: 0; margin-right: 10px; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: -60px -1px;} .pagination .pagination_last { width: 30px; height: 30px; padding: 0; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: -90px -1px;} .pagination2 { margin-top: 30px; font-size: 0; text-align: center;} .pagination2 * { display: inline-block; vertical-align: top;} .pagination2 .pagination_list { margin: 0 20px; font-size: 0; } .pagination2 .pagination_list li { width: auto; min-width: 30px; height: 30px; } .pagination2 .pagination_list li + li { margin-left: 10px;} .pagination2 .pagination_list li a { display: block; height: 100%; padding: 0 3px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 12px; line-height: 30px; font-weight: 500; color: #666; text-align: center; } .pagination2 .pagination_list li.active a{ border: 1px solid #30beb2; color: #30beb2;} .pagination2 .pagination_first { width: 30px; height: 30px; padding: 0; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: 0 -1px;} .pagination2 .pagination_prev { width: 30px; height: 30px; padding: 0; margin-left: 10px; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: -30px -1px;} .pagination2 .pagination_next { width: 30px; height: 30px; padding: 0; margin-right: 10px; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: -60px -1px;} .pagination2 .pagination_last { width: 30px; height: 30px; padding: 0; border: 1px solid #e5e5e5; background: #fafafa url(../images/icon_pagination.png) no-repeat; background-position: -90px -1px;} /* ==================== tab_form ==================== */ .tab_form { display: block; position: relative; width: 100%; } .tab_form .tab_form_head { border-bottom: 1px solid #f0f0f0; font-size: 0;} .tab_form .tab_form_head > li { display: inline-block; position: relative; top: 1px; z-index: 0; padding: 0;} .tab_form .tab_form_head > li > a { display: block; overflow: hidden; position: relative; z-index: 8; padding: 26px 40px; font-size: 18px; color: #444; text-align: center; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .tab_form .tab_form_head > li.is_active { border-bottom: 2px solid #30beb2; } .tab_form .tab_form_head > li.is_active > a { font-weight: 700; color: #30beb2;} /* ==================== tab_form_side ==================== */ .tab_form_side { position: absolute; top: 22px; right: 0; display: block; width: 340px; font-size: 0;} .btn_filter_mb { display: none; width: 30px; height: 30px; margin-left: 10px; border: 1px solid #30beb2; background: #fff url(../images/icon_filter.png) no-repeat center;} /* ==================== sort ==================== */ .sortby { margin: 20px 0 30px; font-size: 0; text-align: right;} .sortby > .search_sortby { display: inline-block; vertical-align: top; font-size: 0;} .sortby > .search_sortby button { display: inline-block; min-width: 100px; height: 30px; padding: 5px 10px; border-radius: 2px; font-size: 12px; text-align: center; } .select_sortby { position: relative; z-index: 1; display: inline-block; width: 140px; height: 30px; margin: 0 10px; border: 1px solid #e5e5e5; vertical-align: top;} .select_sortby select { display: block; overflow: hidden; width: 100%; padding: 0 20px 0 10px; font-size: 12px; line-height: 26px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .select_sortby label { position: absolute; top: 10px; left: 0; z-index: -1; font-size: 14px; font-weight: 300; color: #535353;} .select_sortby:before { content: ''; position: absolute; right: 10px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);} .sortby > .tabs { display: inline-block; vertical-align: top;} .sort { display: inline-block; font-size: 0;} .sort > li { display: inline-block; width: 30px; height: 30px; font-size: 0; vertical-align: top;} .sort > li > a { display: block; width: 100%; height: 100%; border: 1px solid #ccc; font-size: 0;} .sort > li.sort_album > a { background: #fff url(../images/icon_sort.png) no-repeat; background-position: 0 0;} .sort > li.sort_list > a { background: #fff url(../images/icon_sort.png) no-repeat; background-position: -27px 0;} .sort li.sort_album:hover > a, .sort li.sort_album.is_active > a { background-position: 0 -28px; border: 1px solid #30beb2;} .sort li.sort_list:hover > a, .sort li.sort_list.is_active > a { background-position: -28px -29px; border: 1px solid #30beb2;} /* ==================== area_banner_pd ==================== */ .area_banner_pd { height: 350px; margin-bottom: 35px; font-size: 0;} .area_banner_pd > .left { display: inline-block; width: calc(60% - 12px); height: 100%; margin-right: 24px; vertical-align: top;} .area_banner_pd > .left a { position: relative; display: block; width: 100%; height: 100%; border: 1px solid #e5e5e5; } .area_banner_pd > .left a:before { display: block; content: '';padding-top: 49.4%;} .area_banner_pd > .left a img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;} .area_banner_pd > .right { display: inline-block; width: calc(40% - 12px); height: 100%; padding: 20px 30px; border: 1px solid #e5e5e5;} .recommpd_wrap { position: relative; width: 100%; height: 100%; margin-top: 30px;} .recommpd_wrap .slider_recommpd { margin: 0 auto; text-align: center; } .recommpd_wrap .slider_recommpd > li > a { display: block; position: relative; margin: 0 auto; border: 1px solid #e5e5e5; background-color: #fff; width: 200px; height: 200px;} .recommpd_wrap .slider_recommpd > li > a:before{ display: block; content: ''; padding-top: 200px;} .recommpd_wrap .slider_recommpd > li > a img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .recommpd_wrap .slider_recommpd > li > p { display: inline-block; overflow: hidden; width: 200px; margin: 10px auto 0; font-size: 12px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .recommpd_wrap .bx_prev.recommpd_prev { margin-top: -55px} .recommpd_wrap .bx_next.recommpd_next { margin-top: -55px} /* ==================== section_sort_album ==================== */ .section_sort_album > ul { margin: -12px; font-size: 0; } .section_sort_album > ul > li { display: inline-block; width: 25%; padding: 12px; font-size: 0;} .section_sort_album > ul > li > .item { border: 1px solid #e5e5e5;} .section_sort_album > ul > li > .item > * { display: block; width: 100%;} .section_sort_album .item .item_img { display: block; overflow: hidden; position: relative; width: 100%; border-bottom: 1px solid #e5e5e5; background-color: #fff;} .section_sort_album .item .item_img:before { display: block; content: ''; padding-top: 100%;} .section_sort_album .item .item_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: 0.5s all;} .section_sort_album .item .item_img:hover img{ -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } .section_sort_album .item .item_txt { display: block; padding: 15px 10px;} .section_sort_album .item .item_txt > .name { display: block; overflow: hidden; font-weight: 700; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .section_sort_album .item .item_txt > .txt { display: inline-block; overflow: hidden; width: 100%; height: 33px; margin-top: 5px; line-height: 1.3; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .section_sort_album .item_btn { height: 40px; border-top: 1px solid #e5e5e5; font-size: 0;} .section_sort_album .item_btn > li { display: inline-block; width: 50%; height: 100%; } .section_sort_album .item_btn > li + li { border-left: 1px solid #e5e5e5;} .section_sort_album .item_btn > li > a { display: block; position: relative; width: 100%; height: 100%; font-size: 0;} .section_sort_album .item_btn > .btn_send > a:before { content: ''; display: block; width: 30px; height: 25px; position: absolute; top: 50%; left: 50%; background: url(../images/icon_sort_album.png) no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .section_sort_album .item_btn > .btn_add > a:before { display: block; content: ''; width: 30px; height: 25px; position: absolute; top: 50%; left: 50%; background: url(../images/icon_sort_album.png) no-repeat; background-position: -60px 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .section_sort_album .item_btn > li:hover { background-color: #30beb2; /*transition: 0.1s all;*/} .section_sort_album .item_btn > .btn_send:hover > a:before { background-position: -30px 0;} .section_sort_album .item_btn > .btn_add:hover > a:before { background-position: -90px 0;} /* ==================== list_type01 ==================== */ .pdtotal, .pdtotal * { font-size: 12px; line-height: 30px;} .pdtotal { height: 30px; margin: 20px 0 30px;} .list_type01 > ul > li { height: 270px; padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; font-size: 0;} .list_type01 > ul > li + li { margin-top: 50px;} .list_type01 .item { display: inline-block; position: relative; width: 72%; height: 100%; padding-right: 24px; font-size: 0; vertical-align: top;} .list_type01 .item .item_img { display: block; overflow: hidden; position: relative; width: 220px; height: 220px; border: 1px solid #e5e5e5; background-color: #fff;} .list_type01 .item .item_img img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*transition: 0.5s all;*/ } /* .list_type01 .item .item_img:hover img{ -webkit-transform: scale(1.2); transform: scale(1.2); } */ .list_type01 .item .search_button { margin-top: 10px; text-align: center;} .list_type01 .item dt { display: inline-block;} .list_type01 .item dd { display: inline-block; position: relative; width: calc(100% - 244px); height: 100%; margin-left: 24px; vertical-align: top;} .list_type01 .item_name { display: block; overflow: hidden; font-size: 18px; margin-bottom: 15px; width: 100%; line-height: 1.4; font-weight: 500; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .list_type01 .item_subname { margin-bottom: 12px; font-size: 14px; font-weight: 500; } .list_type01 .item_desc { margin-bottom: 20px; font-size: 12px; color: #666;} .list_type01 .item_txt { font-size: 0;} .list_type01 .item_txt > li { font-size: 0;} .list_type01 .item_txt > li + li { margin-top: 5px;} .list_type01 .item_txt .left { display: inline-block; position: relative; width: 130px; color: #666; vertical-align: top;} .list_type01 .item_txt .left::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .list_type01 .item_txt .right { display:inline-block; width: calc(100% - 140px); padding-left: 20px;} .list_type01 .item_txt .right span { display: block; overflow: hidden; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .list_type01 .item_btn { display: block; position: absolute; bottom: 0; left: 0;} .list_type01 .item_btn > li { display: inline-block; width: 40px; height: 40px; vertical-align: top;} .list_type01 .item_btn > li + li { margin-left: 15px; } .list_type01 .item_btn > li > a, .list_type01 .item_btn > li > button { display: block; position: relative; width: 100%; height: 100%; font-size: 0;} .list_type01 .item_btn > li > a:before, .list_type01 .item_btn > li > button:before { display: block; content: ''; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; background: url(../images/icon_sort_list.png) no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .list_type01 .item_btn > .btn_descrip > button:before { background-position: -10px -10px;} .list_type01 .item_btn > .btn_send > a:before { background-position: -110px -10px;} .list_type01 .item_btn > .btn_add > a:before { background-position: -210px -10px;} .list_type01 .item_btn > .btn_home > a:before { background-position: -310px -10px;} .list_type01 .item_btn > .btn_descrip:hover > button:before{ background-position: -60px -10px;} .list_type01 .item_btn > .btn_send:hover > a:before { background-position: -160px -10px;} .list_type01 .item_btn > .btn_add:hover > a:before { background-position: -260px -10px;} .list_type01 .item_btn > .btn_home:hover > a:before { background-position: -360px -10px;} .list_type01 .item_right { display: inline-block; position: relative; width: 28%; height: 100%; padding-left: 24px; border-left: 1px solid #e5e5e5; vertical-align: top;} .list_type01_check .area_checkt { display: inline-block; position: relative; width: 3%; height: 100%;} .list_type01_check .area_checkt .checkt { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type01_check.list_type01 .item { width: 69%;} .list_type01_check.list_type01 .item_right { width: 28%;} .list_type01_check.buying_list { margin-top: 0;} .list_type01_check2 .area_checkt { display: inline-block; position: relative; width: 3%; height: 100%;} .list_type01_check2 .area_checkt .checkt { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type01_check2.list_type01 .item { width: 97%; padding-right: 0;} .list_type01_check2.list_type01 .item_right { width: 28%;} .list_type01_check2.list_type01 .item_txt .left { width:130px; color: #444;} .list_type01_check2.list_type01 .item_txt .right { width: calc(100% - 130px);} .list_type01_check2.list_type01 > ul > li { height: 290px;} .list_type01_check2.list_type01 > ul > li .area_checkt { margin-top: -20px;} .list_type01_checkp.list_type01 > ul > li { height: 140px; padding-bottom: 20px;} .list_type01_checkp.list_type01 .area_checkt { display: inline-block; position: relative; width: 30px; height: 100%;} .list_type01_checkp.list_type01 .area_checkt .checkt { position: absolute; top: 50%; margin-top: -10px; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type01_checkp.list_type01 .item { display: inline-block; width: calc(100% - 30px); padding-right: 0;} .list_type01_checkp.list_type01 .item_txt > li + li { margin-top: 0;} .list_type01_checkp.list_type01 .item_name { margin-bottom: 5px;} .list_type01_checkp.list_type01 .item .item_img { width: 100px; height: 100px;} .list_type01_checkp.list_type01 .item dd { width: calc(100% - 130px);} .list_type01_radio { font-size: 0;} .list_type01_radio .radio_wrap { display: inline-block; position: relative; width: 30px; height: 100%;} .list_type01_radio .radio_wrap .radio_box { position: absolute; top: 50%; margin-top: -10px; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type01_radio.list_type01 .item { display: inline-block; width: calc(100% - 30px); padding-right: 0;} .list_type01_radio.list_type01 .item_right { width: 28%;} .list_type01_radio.list_type01 .item_txt .left { width:130px; color: #444;} .list_type01_radio.list_type01 .item_txt .right { width: calc(100% - 130px);} .list_type01_radio.list_type01 > ul > li { height: 140px; padding-bottom: 20px;} .list_type01_radio.list_type01 > ul > li + li { margin-top: 25px;} .list_type01_radio.list_type01 > ul > li .area_checkt { margin-top: -20px;} .list_type01_radio.list_type01 .item_txt > li + li { margin-top: 0;} .list_type01_radio.list_type01 .item_name { margin-bottom: 5px;} .list_type01_radio.list_type01 .item .item_img { width: 100px; height: 100px;} .list_type01_radio.list_type01 .item dd { width: calc(100% - 130px);} .list_type01_om.list_type01 .item { width: 100%; padding: 0;;} .list_type01_om.list_type01 > ul > li { height: auto;} .list_type01_om .item_code { display: block; margin: -5px 0 5px 0; font-weight: 500; } .list_type01_om.list_type01 > ul > li > .search_button { margin-top: 20px;} .list_type01_om.list_type01 .item_txt .left { width: 225px;} .list_type01_om.list_type01 .item_txt .right { width: calc(100% - 225px);} .list_type02 > ul > li { padding: 20px; margin-bottom: 20px; font-size: 0; border: 1px solid #e5e5e5; } .list_type02 .item_state { display: block; position: relative; width: 100%; font-size: 0;} .list_type02 .item_state .label { display: inline-block; height: 22px; padding: 0 5px; font-size: 12px; line-height: 22px; color: #fff; vertical-align: top;} .list_type02 .item_state .label.label_seller { background-color: #7d91f9;} .list_type02 .item_state .label.label_buyer { background-color: #fa76ab;} .list_type02 .item_state .date { float: right; line-height: 22px; color: #666;} .list_type02 .item_state .date em { position: relative; padding: 0 10px 0 15px; margin-right: 10px; line-height: 22px; color: #666;} .list_type02 .item_state .date em::before { content: ''; position: absolute; top: 5px; right: 0; width: 1px; height: 10px; background-color: #ccc;} .list_type02 .item { display: inline-block; position: relative; width: 100%; height: 100%; margin: 15px 0 20px; font-size: 0; vertical-align: top;} .list_type02 .item .item_img { display: block; overflow: hidden; position: relative; width: 100px; height: 100px; border: 1px solid #e5e5e5; background-color: #fff;} .list_type02 .item .item_img img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*transition: 0.5s all;*/ } /* .list_type02 .item .item_img:hover img{ -webkit-transform: scale(1.2); transform: scale(1.2); } */ .list_type02 .item dt { display: inline-block;} .list_type02 .item dd { display: inline-block; position: relative; width: calc(100% - 124px); height: 100%; margin-left: 24px; vertical-align: top;} .list_type02 .item_txt { font-size: 0;} .list_type02 .item_txt > li { font-size: 0;} .list_type02 .item_txt > li + li { margin-top: 5px;} .list_type02 .item_txt .left { display: inline-block; position: relative; width: 125px; vertical-align: top;} .list_type02 .item_txt .left::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type02 .item_txt .right { display:inline-block; width: calc(100% - 150px); padding-left: 20px;} .list_type02 .item_txt .right span { display: block; overflow: hidden; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .list_type02 .item_name { display: block; width: 100%; overflow: hidden; margin-bottom: 5px; font-size: 14px; line-height: 1.4; font-weight: 500; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .popup .list_type02 .item_txt .left { font-size: 12px;} .popup .list_type02 .item_txt .right span { font-size: 12px;} .list_type03 { margin-bottom: 20px; font-size: 0; } .list_type03 .item { display: inline-block; position: relative; width: 100%; height: 100%; font-size: 0; vertical-align: top;} .list_type03 .item .item_img { display: block; overflow: hidden; position: relative; width: 220px; height: 220px; border: 1px solid #e5e5e5; background-color: #fff;} .list_type03 .item .item_img img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*transition: 0.5s all;*/ } .list_type03 .item dt { display: inline-block;} .list_type03 .item dd { display: inline-block; position: relative; width: calc(100% - 244px); height: 100%; margin-left: 24px; vertical-align: top;} .list_type03 .item_txt { font-size: 0;} .list_type03 .item_txt > li { font-size: 0;} .list_type03 .item_txt > li + li { margin-top: 10px;} .list_type03 .item_txt .left { display: inline-block; position: relative; width: 140px; vertical-align: top;} .list_type03 .item_txt .left::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type03 .item_txt .right { display:inline-block; width: calc(100% - 140px); padding-left: 20px;} .list_type03 .item_txt .right span { display: block; overflow: hidden; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .list_type03 .list_type03_area1 { margin-top: 3px; font-size: 0;} .list_type03 .list_type03_area1 > strong { display: inline-block; position: relative; width: 70px; margin-right: 15px; color: #666;} .list_type03 .list_type03_area1 > strong::before{ content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .list_type03 .list_type03_area1 > b { display: inline-block; width: calc(100% - 85px); color: #666;} .list_type04 > ul > li { padding-bottom: 50px; font-size: 0; border-bottom: 1px solid #e5e5e5;} .list_type04 > ul > li + li { margin-top: 50px;} .list_type04 .item { display: inline-block; position: relative; width: 100%; height: 100%; padding-right: 24px; font-size: 0; vertical-align: top;} .list_type04 .item .item_img { display: block; overflow: hidden; position: relative; width: 220px; height: 220px; border: 1px solid #e5e5e5; background-color: #fff;} .list_type04 .item .item_img img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*transition: 0.5s all;*/ } /* .list_type04 .item .item_img:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } */ .list_type04 .item dt { display: inline-block;} .list_type04 .item dd { display: inline-block; position: relative; width: calc(100% - 244px); height: 100%; margin-left: 24px; vertical-align: top;} .list_type04 .item_head { font-size: 0;} .list_type04 .item_head .item_name { display: inline-block; width: 100%; overflow: hidden; font-size: 18px; line-height: 1.4; font-weight: 500; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .list_type04 .item_info { margin: 10px 0; border: 1px solid #ccc; font-size: 0;} .list_type04 .item_info li { display: inline-block; position: relative; width: 50%; padding: 8px 3px; text-align: center; vertical-align: middle;} .list_type04 .item_info li:first-child::before { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #ccc;} .list_type04 .item_info li * { color: #999; } .list_type04 .item_info li span { font-weight: 500;} .list_type04 .item_info.is_active { border: 1px solid #30beb2;} .list_type04 .item_info.is_active li * { color: #30beb2;} .list_type04 .item_info.is_active li:first-child::before{ background-color: #30beb2;} .list_type04 .item_txt { font-size: 0;} .list_type04 .item_txt > li { display: inline-block; width: 50%; font-size: 0;} .list_type04 .item_txt > li + li { margin-top: 5px;} .list_type04 .item_txt .left { display: inline-block; position: relative; width: 75px; color: #666; vertical-align: top;} .list_type04 .item_txt .left::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .list_type04 .item_txt .right { display:inline-block; width: calc(100% - 75px); padding-left: 20px;} .list_type04 .item_txt .right span { display: block; overflow: hidden; padding-right: 10px; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .list_type04 .item dd > .search_button { margin-top: 15px; text-align: left;} .list_type05 { margin-bottom: 50px;} .list_type05 .item { display: inline-block; position: relative; width: 100%; height: 100%; font-size: 0; vertical-align: top;} .list_type05 .item .item_img { display: inline-block; overflow: hidden; position: relative; width: 220px; height: 220px; border: 1px solid #e5e5e5; background-color: #fff;} .list_type05 .item .item_img img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*transition: 0.5s all;*/ } .list_type05 .item dd { display: inline-block; position: relative; width: calc(100% - 244px); height: 100%; margin-left: 24px; vertical-align: top;} .list_type05 .item dd .item_list { margin-bottom: 30px; font-size: 0;} .list_type05 .item dd .item_list > li { display: inline-block; width: calc((100% - 50px) / 3); border: 1px solid #e5e5e5; text-align: center; vertical-align: top;} .list_type05 .item dd .item_list > li + li { margin-left: 25px;} .list_type05 .item dd .item_list > li > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-direction: column; width: 100%; height: 138px; } .list_type05 .item dd .item_list > li > div .top { font-size: 18px; color: #666;} .list_type05 .item dd .item_list > li > div .bottom span { font-size: 25px; font-weight: 700;} .list_type05 .item dd .item_list > li > div .bottom em { font-size: 18px; font-weight: 500;} .list_type05 .item dd .item_price{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; background-color: #30beb2; } .list_type05 .item dd .item_price * { color: #fff;} .list_type05 .item dd .item_price span { margin-left: 5px; font-size: 16px; font-weight: 700;} .alist_type > ul { margin: -12px; font-size: 0;} .alist_type > ul li { display: inline-block; width: 20%; padding: 12px 12px 20px 12px; font-size: 0; vertical-align: top;} .alist_type.is_5 > ul li { width: 20%; } .alist_type > ul .item { width: 100%; margin-top: 10px; } .alist_type > ul .item_img { display: block; overflow: hidden; position: relative; width: 100%; border: 1px solid #e5e5e5; background-color: #fff;} .alist_type > ul .item_img:before { display: block; content: ''; padding-top: 100%;} .alist_type > ul .item_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .alist_type > ul .item .item_name { display: block; overflow: hidden; margin: 8px 0 5px; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} .alist_type > ul .item .item_day { font-size: 12px; color: #666;} .alist_type_small > ul { margin: -10px; font-size: 0;} .alist_type_small > ul li { display: inline-block; width: 12.5%; padding: 0 10px 10px 10px; font-size: 0; vertical-align: top;} .alist_type_small > ul .item_img { display: block; overflow: hidden; position: relative; width: 100%; margin-bottom: 10px; border: 1px solid #e5e5e5; background-color: #fff;} .alist_type_small > ul .item_img:before { display: block; content: ''; padding-top: 100%;} .alist_type_small > ul .item_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ==================== products_list ==================== */ .products_list .item_right .title { margin-bottom: 25px; font-size: 0;} .products_list .item_right .title .title_year { display: inline-block; position: relative; top: 3px; width: 52px; height: 25px; background: url(../images/common_en.png) no-repeat; background-position: -25px 0;} .products_list .item_right .title .title_year span { position: absolute; top: -4px; left: 2px; width: 30px; color: #d39427; font-size: 15px; font-weight: 600; font-style: normal; text-align: center;} .products_list .item_right .title .title_name { display: inline-block; width: calc(100% - 52px); font-size: 18px; vertical-align: top;} .products_list .item_right .verified { margin-top: 20px; } .products_list .item_right .verified span { position: relative; color: #666;} .products_list .item_right .verified span:nth-of-type(1) { margin-right: 15px; padding-right: 15px;} .products_list .item_right .verified span:nth-of-type(1)::before{ content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .products_list .item_right > a { display: block; position: absolute; bottom: 0; left: 24px; width: 40px; height: 40px; background: url(../images/icon_sort_list.png) no-repeat; background-position: -310px -10px; font-size: 0;} /* ==================== companies_list ==================== */ .companies_list .flag { margin-bottom: 15px;} .slider_company > li { font-size: 0;} .slider_company > li > div { display: inline-block; width: calc((100% - 35px) / 2); margin-left: 2px; font-size: 0; vertical-align: top;} .slider_company > li > div + div { margin-left: 30px;} .slider_company .slider_company_img { display: block; position: relative; width: 100%; border: 1px solid #e5e5e5; } .slider_company .slider_company_img:before { display: block; content: ''; padding-top: 100%;} .slider_company .slider_company_img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; height: auto} .slider_company .slider_company_txt { display: inline-block; width: 100%; overflow: hidden; margin-top: 10px; font-size: 14px; line-height: 1.5; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* ==================== buying_list ==================== */ .buying_list { margin-top: 80px;} .buying_list.list_type01 > ul > li { height: 290px;} .buying_list .flag { margin-bottom: 20px;} .buying_list.list_type01 .item_txt .left { width: 130px; } .buying_list.list_type01 .item_txt .right { width: calc(100% - 130px)} /* ==================== list_type01 product ==================== */ .btn_tooltip { display: none; position: relative; top: 5px; width: 300px; padding: 10px 25px 10px 10px; border: 1px solid #30beb2; background-color: #fff;} .btn_tooltip > p { display: inline-block; overflow: hidden; width: 100%; font-size: 12px; color: #666; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .btn_tooltip > .tooltip_close { position: absolute; top: 0; right: 0; width: 25px; height: 25px; background: url(../images/common_en.png) no-repeat; font-size: 0;} /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .contents_inner { width: 100%; padding: 0px 20px 0px; margin: 15px 0 50px;} .other_inner { width: 100%; padding: 0; margin: 0;} aside { width: 180px; } aside + .contents { width: calc(100% - 204px); } .page_head { margin-bottom: 15px;} .tab_form .tab_form_head > li > a { padding: 14px 14px;} .bullet5 > li { font-size: 16px;} .tab_form_side { position: static; top: 0; width: 100%; margin-top: 20px;} .tab_form_side .search_box { display: block; width: 100%} .tab_form_side .search_box input { height: 30px;} .sortby { margin: 10px 0 20px;} .section_sort_album > ul > li { width: 33.333%;} /* ==================== area_banner_pd ==================== */ .area_banner_pd { height: auto;} .area_banner_pd > .left { display: block; width: 100%; margin-right: 0;} .area_banner_pd > .right { display: block; width: 100%; margin-top: 20px; padding: 0; border: none;} .recommpd_wrap { margin: 20px 0 0 0 ;} .recommpd_wrap .slider_recommpd > li > a{ width: 150px; height: 150px;} .recommpd_wrap .slider_recommpd > li > p{ width: 150px;} .recommpd_wrap .bx_prev.recommpd_prev { margin-top: -25px; left: 0;} .recommpd_wrap .bx_next.recommpd_next { margin-top: -25px; right: 0;} /* ==================== list_type ==================== */ .list_type01 > ul > li { height: 240px;} .list_type01 .item { display: block; width: 100%; padding-right: 0;} .list_type01 .item .item_img { width: 190px; height: 190px;} .list_type01 .item_right { display: none;} .list_type01 .item_name { margin-bottom: 10px;} .companies_list .flag { margin-bottom: 5px;} .list_type01_check .area_checkt { width: 30px;} .list_type01_check.list_type01 .item { display: inline-block; width: calc(100% - 30px);} .list_type01_check2 .area_checkt { width: 30px;} .list_type01_check2.list_type01 .item { display: inline-block; width: calc(100% - 30px);} .list_type01_checkp.list_type01 > ul > li { height: 75px;} .list_type01_checkp.list_type01 .area_checkt .checkt{ margin-top: 0;} .list_type01_checkp.list_type01 .item .item_img { width: 60px; height: 60px;} .list_type01_checkp.list_type01 .item_txt { display: none;} .alist_type > ul li { width: 25%;} .alist_type_small > ul li { width: 25%;} .list_type04 .item_txt > li { display: block; width: 100%;} .list_type04 .item_txt .right span { padding-right: 0;} } /* 모바일만 */ @media screen and (max-width: 800px) { .page_tit { font-size: 20px;} .page_tit2 { font-size: 25px;} .page_subtit { font-size: 16px; } .page_subtit4 { font-size: 14px; } aside + .contents { display: block; width: 100%; margin-left: 0;} /* ==================== aside ==================== */ .aside { display: none; overflow-y: scroll; overflow: auto; position: absolute; top: 0; right: 0; z-index: 1000; width: 250px; height: 100%;} .lnb_filter { padding: 15px 20px;} .lnb_subtit2 { padding: 0 0 15px 20px;} .lnb_search_box { width: calc(100% - 40px); margin: 0 20px 50px; } .lnb_btn { padding: 0 20px 20px;} .page_subtit1 { font-size: 14px;} .page_desc1 { font-size: 12px;} .page_head.clearfix .page_subtit2 { display: block; float: none;} .page_head.clearfix .f_r { display: block; float: none;} .page_head.clearfix .f_r button { display: block; width: 100%;} .bullet1 > li, .bullet1 > li *, .bullet2 > li, .bullet2 > li *, .bullet3 > li, .bullet3 > li *, .bullet4 > li, .bullet4 > li *, .bullet5 > li, .bullet5 > li * { font-size: 12px; } .bullet4 > li + li { margin-top: 15px;} .bullet5 > li::before { top: 3px} .bullet5 > li + li { margin-top: 5px;} .lnb_tit { display: none;} .lnb { display: none;} .lnb_subtit { margin-top: 0; padding: 0 0 0 20px; color: #fff; border-bottom: none; background-color: #30beb2; line-height: 60px;} .lnb_mb_close { display: block;} .tab_form .tab_form_head > li { width: 33.333%;} .tab_form .tab_form_head > li > a { padding: 14px 5px; font-size: 14px;} .tab_form_side .search_box { display: inline-block; width: calc(100% - 40px);} /* ==================== aside_menu ==================== */ .aside_menu { display: block; width: 100%; margin-bottom: 20px; padding: 0; border: none;} .aside_menu > .lnb_tit2 { display: none;} .aside_menu > ul { display: block; text-align: center; height: 45px;} .aside_menu > ul::after { content: ''; position: absolute; bottom: 0; left: -20px; width: calc(100% + 40px); height: 1px; background-color: #f0f0f0;} .aside_menu > ul li { display: inline-block; width: 33.333%; height: 100%;} .aside_menu > ul li + li { margin-top: 0;} .aside_menu > ul li a p { display: block; width: 100%; padding: 0 5px; margin-top: -5px; position: absolute; top: 50%; left: 50%; font-weight: 500; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .aside_menu > ul li.is_active::after { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 2px; background-color: #30beb2;} /* support */ .aside_menu.aside_menu_sp > ul li { width: calc(65% / 3);} .aside_menu.aside_menu_sp > ul li:nth-of-type(2) { width: 35%;} .aside_menu.aside_menu_sp > ul li:nth-of-type(5) { display: none;} /* mypage */ .aside_mypage .lnb { display: block;} .aside_mypage .aside_mypage_box { padding: 0 0 15px 0; margin: 20px; border: none; border-bottom: 1px solid #e5e5e5;} .aside_mypage .aside_mypage_box:nth-of-type(5) { border: none;} /* ==================== pagination ==================== */ .pagination{margin-top: 30px;} .pagination .pagination_list { margin: 0 7px; } .pagination .pagination_list li { width: auto; min-width: auto; } .pagination .pagination_list li + li { margin-left: 10px;} .pagination .pagination_list li a { padding: 0 3px; border: none; background-color: transparent; } .pagination .pagination_list li.active a{ border: none; color: #30beb2; font-weight: 700;} .pagination .pagination_first { width: 20px; border:none; background-color: transparent; background-position: -3px 0;} .pagination .pagination_prev { width: 20px; margin-left: 0; border:none; background-color: transparent; background-position: -33px 0;} .pagination .pagination_next { width: 20px; margin-right: 0; border:none; background-color: transparent; background-position: -63px 0;} .pagination .pagination_last { width: 20px; border:none; background-color: transparent; background-position: -93px 0;} .pagination2 .pagination_list { margin: 0 5px;} .pagination2 .pagination_list li { min-width: 25px;;} .pagination2 .pagination_list li + li { margin-left: 5px;} .pagination2 .pagination_prev { margin-left: 5px;} .pagination2 .pagination_next { margin-right: 5px;} .sortby > .select_sortby { width: calc(100% - 239px);} .btn_filter_mb { display: inline-block;} .area_banner_pd .page_subtit { text-align: center;} /* ==================== section_sort_album ==================== */ .section_sort_album > ul { margin: -10px;} .section_sort_album > ul > li { width: 50%; padding: 10px;} .section_sort_album .item_btn { height: 35px;} .section_sort_album .item_btn > .btn_send > a:before { width: 25px; height: 22px; background-position: 0 -16px; background-size: 400% auto; } .section_sort_album .item_btn > .btn_add > a:before { width: 25px; height: 22px; background-position: -49px -16px; background-size: 400% auto; } .section_sort_album .item_btn > .btn_send:hover> a:before { background-position: -25px -16px;} .section_sort_album .item_btn > .btn_add:hover > a:before { background-position: -74px -16px;} .section_sort_album .item .item_txt { padding: 10px;} .section_sort_album .item .item_txt > .name { font-size: 12px;} .section_sort_album .item .item_txt > .txt { font-size: 12px;} /* ==================== list_type01 ==================== */ .list_type01 > ul > li { height: auto; padding-bottom: 25px;} .list_type01 > ul > li + li { margin-top: 25px;} .list_type01 .item .item_img { width: 100px; height: 100px;} .list_type01 .item dd { width: calc(100% - 115px); height: auto; margin-left: 15px;} .list_type01 .item_name { margin-bottom: 10px; font-size: 14px;} .list_type01 .item_desc { margin-bottom: 10px;} .list_type01 .item_txt .left { display: block; width: 100%; font-size: 12px; font-weight: 500; } .list_type01 .item_txt .left::before { display: none;} .list_type01 .item_txt .right { display: block; width: 100%; padding-left: 0; } .list_type01 .item_txt .right span { font-size:12px;} .list_type01 .item .item_txt .keyword { margin: 10px 0;} .list_type01 .item_btn { position: relative; margin-top: 20px;} .list_type01 .item_btn > li + li { margin-left: 0;} .list_type01 .item_btn > li { width: 30px; height: 30px; margin-right: 10px;} .list_type01 .item_btn > li > a:before, .list_type01 .item_btn > li > button:before { width: 30px; height: 30px; background-size: 790% auto;} .list_type01 .item_btn > .btn_descrip { display: none;} .list_type01 .item_btn > .btn_send > a:before { background-position: -59px -17px} .list_type01 .item_btn > .btn_add > a:before { background-position: -118px -17px;} .list_type01 .item_btn > .btn_home > a:before { background-position: -177px -17px;} .list_type01 .item_btn > .btn_send:hover > a:before { background-position: -88px -17px;} .list_type01 .item_btn > .btn_add:hover > a:before { background-position: -147px -17px;} .list_type01 .item_btn > .btn_home:hover > a:before { background-position: -206px -17px;} .list_type01_check .area_checkt { width: 30px; vertical-align: top;} .list_type01_check .area_checkt .checkt { top: 50px;} .list_type01_check.list_type01 .item { display: inline-block; width: calc(100% - 30px);} .list_type01_check2 .area_checkt { width: 30px; vertical-align: top;} .list_type01_check2 .area_checkt .checkt { top: 50px;} .list_type01_check2.list_type01 .item { display: inline-block; width: calc(100% - 30px);} .list_type01_check2.list_type01 > ul > li { height: auto;} .list_type01_check2.list_type01 > ul > li .area_checkt { margin-top: 0;} .list_type01_check2.list_type01 .item_txt .left { display: block; width: 100%;} .list_type01_check2.list_type01 .item_txt .right { display: block; width: 100%;} .list_type01_radio.list_type01 > ul > li { height: 75px; padding-bottom: 10px;;} .list_type01_radio.list_type01 > ul > li + li { margin-top: 15px;} .list_type01_radio.list_type01 .item dd { width: calc(100% - 75px);} .list_type01_radio .radio_wrap .radio_box { margin-top: 0;} .list_type01_radio.list_type01 .item .item_img { width: 60px; height: 60px;} .list_type01_radio.list_type01 .item_txt { display: none;} /* ==================== list_type02 ==================== */ .list_type02 .item_state .date { float: none; font-size: 12px;} .list_type02 .item_state .date em { font-size: 12px;} .list_type02 .item { margin: 10px 0 15px;} .list_type02 .item .item_img { width: 60px; height: 60px;} .list_type02 .item dd { width: calc(100% - 80px); margin-left: 20px;} .list_type02 .item_txt .left { display: block; width: 100%; font-size: 12px; font-weight: 500;;} .list_type02 .item_txt .left::before { display: none;} .list_type02 .item_txt .right { display: block; width: 100%; padding-left: 0;} .list_type02 .item_txt .right span { font-size: 12px;} .list_type02 .item_btn { display: block;} .list_type02 .item_btn .search_button button { display: block; width: 100%;} .list_type02 .item_btn .search_button button+button { margin: 10px 0 0 0;} /* ==================== list_type03 ==================== */ .list_type03 .item dd { width: calc(100% - 164px);} .list_type03 .item .item_img { width: 140px; height: 140px;} .list_type03 .item_txt .left { display: block; width: 100%; font-size: 12px; font-weight: 500;} .list_type03 .item_txt .left::before { display: none;} .list_type03 .item_txt .right { display: block; width: 100%; padding-left: 0; font-size: 12px;} .list_type03 .item_txt .right span { font-size: 12px;} .list_type03 .item_txt .right .weight_B { font-size: 12px;} .list_type03 .list_type03_area1 > strong { font-size: 12px;} .list_type03 .list_type03_area1 > b { font-size: 12px;} .list_type03 .list_type03_area1 { font-size: 0 !important;} .list_type01_om.list_type01 > ul > li > .search_button { display: block; width: 100%;} .list_type01_om.list_type01 > ul > li > .search_button button { display: block; width: 100%;} .list_type01_om.list_type01 > ul > li > .search_button button + button { margin: 10px 0 0 0;} .list_type01_om .item_code { font-size: 12px;} .list_type01_om.list_type01 .item_txt .left { width: 100%;} .list_type01_om.list_type01 .item_txt .right { width: 100%;;} .list_type04 > ul > li { padding-bottom: 30px;} .list_type04 > ul > li + li { margin-top: 30px;} .list_type04 .item dt { display: block; padding: 20px 0; border: 1px solid #e5e5e5; text-align: center;} .list_type04 .item .item_img { width: 140px; height: 140px; margin: 0 auto; border: none;} .list_type04 .item dd { display: block; width: 100%; margin: 15px 0 0 0;} .list_type04 .item_info li { padding: 5px 3px;} .list_type04 .item_info li * { display: block; font-size: 12px;} .list_type04 .item_txt .left { font-size: 12px;} .list_type04 .item_txt .right span { font-size: 12px;} .list_type04 .item dd > .search_button { display: block; width: 100%;} .list_type04 .item dd > .search_button button { display: block; width: 100%;} .list_type04 .item dd > .search_button button + button { margin: 10px 0 0 0;} .list_type05 { margin-bottom: 20px;} .list_type05 .item .item_img { display: block; width: 100%; height: 180px; padding: 20px; text-align: center;} .list_type05 .item .item_img img { height: 100%;} .list_type05 .item dd { display: block; width: 100%; margin: 20px 0 0 0;} .list_type05 .item dd .item_list { margin-bottom: 10px; } .list_type05 .item dd .item_list > li { width: calc((100% - 20px) / 3);} .list_type05 .item dd .item_list > li + li { margin-left: 10px;} .list_type05 .item dd .item_list > li > div { height: 80px;} .list_type05 .item dd .item_list > li > div .top { font-size: 12px;} .list_type05 .item dd .item_list > li > div .bottom span { font-size: 14px;} .list_type05 .item dd .item_list > li > div .bottom em { font-size: 12px;} .list_type05 .item dd .item_price em { font-size: 12px;} .list_type05 .item dd .item_price span { font-size: 14px;} /* alist_type */ .alist_type > ul li { width: 50%;} .alist_type_small > ul li { width: 33.333%;} .pdtotal { margin: 10px 0; } .companies_list .flag { margin-bottom: 10px;} .buying_list { margin-top: 20px;} .buying_list.list_type01 > ul > li { height: auto;} .buying_list.list_type01 .item_txt .left { width: 100%;} .buying_list.list_type01 .item_txt .right { width: 100%;} .item_inline3 > li { width: 50%;} .item_inline4 > li { width: 50%;} .item_inline .search_button { width: 100%;} .item_inline .search_button button { width: 100%;} } /* 공통 */ /* 국기 + 국가명 */ .flog { vertical-align: top;} .flag img { width: 30px; height: 20px; margin-right: 10px; vertical-align: top;} /* ==================== contents ==================== */ /* 상품디테일 */ .pd_detail { font-size: 0;} .pd_image { display: inline-block; width: 340px; vertical-align: top;} .pdimage_wrap { position: relative; width: 100%; overflow: hidden;} .swiper-slide-container { height:300px; margin:auto; background: #fff; font-size: 18px; text-align: center;} .pdimage_top { height: 100%; width: 100%;} .pdimage_top .swiper-slide { display: block; position: relative; width: 100%; height: 340px; border: 1px solid #e5e5e5;} .pdimage_top .swiper-slide img { display: block; max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} /* .pdimage_thumbs */ .pdimage_thumbs { display: block; width: 100%; padding: 10px 0; margin-top: 24px; box-sizing: border-box;} .pdimage_thumbs .swiper-wrapper { font-size: 0;} .pdimage_thumbs .swiper-slide { position: relative; height: 67px; border: 1px solid #ccc; background-color: #fff;} .pdimage_thumbs .swiper-slide-active { border: 1px solid #e5e5e5;} .pdimage_thumbs img { position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .pdimage_prev { display: inline-block; position: absolute; bottom: 33px; left: 0; z-index: 2; width: 20px; height: 20px; background-color: rgba(0,0,0,0.2); font-size: 0; cursor: pointer;} .pdimage_prev::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: 2px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: translate(-50%, -50%) rotate(-135deg); transform: translate(-50%, -50%) rotate(-135deg);} .pdimage_next { display: inline-block; position: absolute; bottom: 33px; right: 0; z-index: 2; width: 20px; height: 20px; background-color: rgba(0,0,0,0.2); font-size: 0; cursor: pointer;} .pdimage_next::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: -2px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);} .pdimage_prev:hover::before, .pdimage_next:hover::before, .pdimage_prev:active::before, .pdimage_next:active::before, .pdimage_prev:focus::before, .pdimage_next:focus::before { border-top: 1.5px solid #30beb2; border-right: 1.5px solid #30beb2;} .pdimage_pagination { display: none; margin: 15px auto 25px; text-align: center;} .pd_summary { display: inline-block; position: relative; width: calc(100% - 680px); min-height: 500px; padding: 0 24px; vertical-align: top;} .pd_company { display: inline-block; width: 340px; padding: 30px; border: 1px solid #e5e5e5; vertical-align: top;} .pd_summary_inner { position: relative; padding: 0 0 0 10px;} .pd_tit { display: block; overflow: hidden; margin: -10px 0 20px; font-size: 25px; font-weight: 700; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .pd_share { font-size: 0;} .pd_share li { display: inline-block; width: 25px; height: 25px; } .pd_share li + li { margin-left: 10px;} .pd_share li a { display: block; width: 100%; height: 100%; font-size: 0;} .pd_share li.face a { background: url(../images/common_en.png) no-repeat; background-position: -87px 0;} .pd_share li.pin a { background: url(../images/common_en.png) no-repeat; background-position: -122px 0;} .pd_share li.twit a { background: url(../images/common_en.png) no-repeat; background-position: -157px 0;} .pd_money.pd_summary_inner { padding: 25px 0 30px 10px; margin: 30px 0 0 0; border-top: 1px solid #e5e5e5;} .pd_money strong { padding: 2px 5px; background-color: #30beb2; font-size: 16px; color: #fff; vertical-align: top;} .pd_money em { display: inline-block; position: relative; padding-left: 15px; font-size: 12px; vertical-align: top;} .pd_money em::before { content: ''; position: absolute; left: 6px; top: 50%; width: 1px; height: 13px; background-color: #444; -webkit-transform: translateY(-50%) rotate(15deg); transform: translateY(-50%) rotate(15deg);} .pd_money span { display: inline-block; position: relative; padding-left: 10px; font-size: 12px; vertical-align: top;} .pd_money span::before { content: ''; position: absolute; left: 3px; top: 50%; width: 1px; height: 10px; background-color: #444; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .pd_money span b { display: inline-block; font-size: 12px; color: #777; vertical-align: top;} .pd_like { display: inline-block; position: absolute; bottom: 0; right: 0; width: 22px; height: 25px;} .pd_like a { display: block; width: 100%; height: 100%; background: url(../images/icon_like.png) no-repeat;} .pd_like a:hover, .pd_like a.is_like { background-position: -30px 0;} .quantity { display: inline-block; width: 120px; height: 30px; border: 1px solid #e5e5e5; background-color: #fff; vertical-align: middle;} .quantity > a { display: inline-block; position: relative; width: 30px; height: 100%; vertical-align: top;} .quantity > a.minus::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1px; background-color: #444; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .quantity > a.plus::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1px; background-color: #444; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .quantity > a.plus::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1px; background-color: #444; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg);} .quantity > span { display:inline-block; width: calc(100% - 66px); height: 100%; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; text-align: center;} .quantity > span input { width: 100%; text-align: center;} .pd_option { min-height: 340px;} .pd_option dl { display: block; font-size: 0;} .pd_option dl + dl { margin-top: 10px;} .pd_option dd { display: inline-block; width: 200px; } .pd_option dt { display: inline-block; width: calc(100% - 200px); color: #666; vertical-align: top;} .pd_verified li { display: inline-block;} .pd_subtit1 { margin: 25px 0 5px; font-size: 16px; font-weight: 700; } .pd_subtit2 { margin: 20px 0 10px 0; font-size: 16px; font-weight: 700; } .pd_info .form1 { margin-bottom: 20px;} .pd_info_img { margin: 10px auto; text-align: center;} .pd_info_img img { max-width: 100%; height: auto; } .pd_company .title { position: relative; padding-bottom: 25px; border-bottom: 1px solid #e5e5e5; font-size: 0; text-align: center;} .pd_company .title .title_year { display: block; position: absolute; top: 3px; left: 50%; width: 52px; height: 25px; background: url(../images/common_en.png) no-repeat; background-position: -25px 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .pd_company .title .title_year span { position: absolute; top: -4px; left: 2px; width: 30px; color: #d39427; font-size: 15px; font-weight: 600; font-style: normal; text-align: center;} .pd_company .title .title_name { display: block; padding-top: 30px; font-size: 20px; font-weight: 700; vertical-align: top;} .bar_box { display: block; overflow: hidden; position: relative; height: 20px; background-color:#ededed; border-radius: 50px;} .bar_box .bar { display: block; position: relative; width: 0; height: 100%; padding-right: 10px; border-radius: 50px; text-align: right;} .bar_box .bar em { display: inline-block; font-size: 14px; line-height: 20px; color: #fff; vertical-align: top;} .bar_box .bar i { display: inline-block; margin-left: 2px; font-style: normal; font-size: 12px; line-height: 22px; color: #fff; vertical-align: top;} .bar_box.bar_c1 .bar { background-color:#add6fd;} .bar_box.bar_c2 .bar { background-color:#30beb2;} .pd_btn { margin-top: 20px;} .pd_btn > li { display: inline-block; width: 40px; height: 40px; vertical-align: top;} .pd_btn > li + li { margin-left: 15px; } .pd_btn > li > a { display: block; position: relative; width: 100%; height: 100%; font-size: 0;} .pd_btn > li > a:before { display: block; content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: url(../images/icon_pdcompany.png) no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .pd_btn > .btn_seller > a:before { background-position: -10px -10px;} .pd_btn > .btn_send > a:before { background-position: -110px -10px;} .pd_btn > .btn_pdf > a:before { background-position: -210px -10px;} .pd_btn > .btn_seller:hover > a:before { background-position: -60px -10px;} .pd_btn > .btn_send:hover > a:before { background-position: -160px -10px;} .pd_btn > .btn_pdf:hover > a:before { background-position: -260px -10px;} /* ==================== pd_info ==================== */ .pd_info { position: relative; margin-top: 70px; padding-top: 50px; border-top: 1px solid #e5e5e5;} #scrollfix { position: relative; top: 0; z-index: 1;} #scrollfix.is_scrollfix { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%;} .tab_scrollfix { display: block; width: 1440px; margin: 0 auto; border-bottom: 1px solid #f0f0f0; background-color: #fff; font-size: 0;} .tab_scrollfix > li { display: inline-block; width: 33.333%;} .tab_scrollfix.is_4 > li{ width: 25%;} .tab_scrollfix > li > a { display: block; padding: 22px 0; font-size: 18px; color: #30beb2; font-weight: 700; text-align: center; line-height: 1.3; } .tab_scrollfix .selected{ border-bottom: 2px solid #30beb2;} .pd_info .scrollfix_cont{ width: 900px; margin: 0 auto; padding-top: 50px;} /* 스크롤탭2 : PRODUCT DESCRIPTION */ .pd_company_header { font-size: 0;} .pd_company_header .left { display: inline-block; width: 300px; height: 200px; border: 1px solid #e5e5e5;} .pd_company_header .right { display: inline-block; width: calc(100% - 300px); padding-left: 50px; vertical-align: top;} .pd_company_header .pd_company_logo { display: block; overflow: hidden; position: relative; width: 100%; } .pd_company_header .pd_company_logo:before { display: block; content: ''; padding-top: 66.5%;} .pd_company_header .pd_company_logo img { position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .pd_company_header .pd_company_tit li { font-size: 0;} .pd_company_header .pd_company_tit li + li { margin-top: 40px;} .pd_company_header .pd_company_tit li > p { display: inline-block; width: 160px; margin: 0; vertical-align: top;} .pd_company_header .pd_company_tit li > div { display: inline-block; width: calc(100% - 160px); vertical-align: top;} .scrollfix_cont .title { position: relative; padding: 0 0 25px 70px; margin-bottom: 30px; border-bottom: 1px solid #e5e5e5; font-size: 0; text-align: left; } .scrollfix_cont .title .title_year { display: block; position: absolute; top: 7px; left: 0; width: 52px; height: 25px; background: url(../images/common_en.png) no-repeat; background-position: -25px 0;} .scrollfix_cont .title .title_year span { position: absolute; top: -4px; left: 2px; width: 30px; font-size: 15px; font-weight: 600; font-style: normal; color: #d39427; text-align: center;} .scrollfix_cont .title .title_name { display: block; font-size: 20px; font-weight: 700; vertical-align: top;} .pd_company_cont { display: block; margin-top: 50px; padding: 30px; border: 1px solid #e5e5e5;} .pd_company_cont > li { position: relative; padding-left: 15px;} .pd_company_cont > li::before { content: ''; position: absolute; top: 11px; left: 0; width: 4px; height: 1px; background-color: #444;} .pd_company_cont > li + li { margin-top: 30px;} .pd_company_cont .pd_company_subtit { display: block; margin-bottom: 10px; font-weight: 500;} .board_buying_header + .pd_company_cont { margin-top: 20px;} .board_buying_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between;} .board_buying_header .right { position: relative;} /* .share1_wrap { position: relative;} .share1 { width: 22px; height: 22px; background: #fff url(../images/btn_share.png) no-repeat; font-size: 0; vertical-align: top;} .share1.is_active { background: url(../images/btn_share_active.png) no-repeat;} */ .share1 { display: block; width: 50px; height: 50px; font-size: 0; vertical-align: top;} .share1.is_active { background: url(../images/btn_share_active.png) no-repeat;} .share1 .addthis_inline_share_toolbox { display: block; width: 100%; height: 100%;} .share1 .addthis_inline_share_toolbox > div { display: block; width: 100%; height: 100%;} .share1 .at-share-btn-elements { display: block; width: 100%; height: 100%;} .share1 .at-share-btn-elements > a { display: block !important; width: 100%; height: 100%; background: #fff url(../images/btn_share.png) no-repeat;} .share1 .at-share-btn-elements > a span { display: none;} .share1.is_active .at-share-btn-elements > a { background: url(../images/btn_share_active.png) no-repeat;} .share1_list { display: none; position: absolute; top: 30px; right: 0; z-index: 1; width: 130px; border: 1px solid #30beb2; background-color: #fff; text-align: left;} .share1_list > li + li { margin-top: 1px;} .share1_list > li:hover, .share1_list > li:focus, .share1_list > li.is_active { background-color: #ecf9f7;} .share1_list > li a { display: block; position: relative; padding: 5px 10px 5px 34px; font-size: 12px; } .share1_list > li a::before { content: ''; position: absolute; top: 50%; left: 10px; width: 16px; height: 16px; background: url(../images/icon_share.png) no-repeat; background-position: -5px -5px; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .share1_list > li.twitter a::before { background-position: -26px -5px;} .share1_list > li.print a::before { background-position: -47px -5px;} .share1_list > li.email a::before { background-position: -68px -5px;} .share1_list > li.pinterest a::before { background-position: -89px -5px;} .share1_list > li.gmail a::before { background-position: -110px -5px;} .share1_list > li.linkedin a::before { background-position: -131px -5px;} .share1_list > li.more a::before { background-position: -152px -5px;} .share1_list > li.addthis a::before { left: auto; right: 55px; background-position: -173px -5px;} .share1_list > li.addthis a { border-top: 1px solid #e5e5e5; text-align: right;} .board_company_header + .pd_company_cont { margin-top: 20px;} .board_company_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; position: relative; font-size: 0;} .board_company_header > .left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 50px); height: 100%; font-size: 0;} .board_company_header > .right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: end; justify-content: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; position: relative; width: 50px; text-align: right;} .board_company_header > .left * { display: inline-block;} .board_company_header > .left .dleft { width: 100px; height: 100px; margin-right: 20px; border: 1px solid #e5e5e5; vertical-align: top;} .board_company_header > .left .dleft img { max-width: 100%; height: auto;} .board_company_header > .left .dright { width: calc(100% - 125px);} .board_company_header > .left .dright .area_pd_tit { overflow: hidden; width: 100%; margin-bottom: 5px; font-size: 25px; line-height: 1.4; font-weight: 700; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .board_company_header > .left .dright dl { display: block;} .board_company_header > .left .dright dl dt { display: inline-block; position: relative; width: 65px; margin-right: 10px; font-size: 16px; line-height: 20px; font-weight: 500; vertical-align: top;} .board_company_header > .left .dright dl dd { display: inline-block; width: calc(100% - 80px); font-size: 12px; line-height: 20px; color: #666; vertical-align: top;} .board_company_header > .left .dright dl dd .flag_name { font-size: 12px; font-weight: 500;;} .area_pd_box { display: block;} .area_pd_box * { display: inline-block;} .area_pd_box .dleft { width: 100px; height: 100px; margin-right: 20px; border: 1px solid #e5e5e5; vertical-align: top;} .area_pd_box .dleft img { max-width: 100%; height: auto;} .area_pd_box .dright { width: calc(100% - 125px);} .area_pd_box .dright .area_pd_tit { margin-bottom: 5px; font-weight: 700;} .area_pd_box .dright dl { display: block;} .area_pd_box .dright dl dt { display: inline-block; position: relative; width: 120px; margin-right: 10px; font-size: 12px; line-height: 20px; vertical-align: top;} .area_pd_box .dright dl dt::before { content: ''; position: absolute; top: 50%; width: 1px; height: 10px; background-color: #ccc; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0;} .area_pd_box .dright dl dd { display: inline-block; width: calc(100% - 135px); font-size: 12px; line-height: 20px; color: #666; vertical-align: top;} .pd_company_markets { font-size: 0;} .pd_company_markets li { display: inline-block; width: 20%; margin-bottom: 20px; font-size: 0; } .pd_company_markets li > img { display: inline-block; width: 60px; height: 40px; } .pd_company_markets li > span { display: inline-block; position: relative; width: calc(100% - 60px); height: 40px; vertical-align: top;} .pd_company_markets li > span b { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 10px; line-height: 1.2; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .pd_company_mainpd { font-size: 0; margin: -12px;} .pd_company_mainpd li { display: inline-block; width: 25%; padding: 12px; font-size: 0; vertical-align: top;} .pd_company_mainpd li > a { display:block; position: relative; width: 100%; border: 1px solid #e5e5e5; } .pd_company_mainpd li > a:before { display: block; content: ''; padding-top: 100%;} .pd_company_mainpd li > a img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pd_company_mainpd li > p { display: block; width: 100%; margin-top: 15px; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .pd_company_verified { margin-top: 10px;} .opfts_wrap { position: relative;} .opfts_wrap .slider_opfts { font-size: 0;} .opfts_wrap .slider_opfts li { display: inline-block;} .opfts_wrap .slider_opfts_img { display:block; position: relative; width: 100%; border: 1px solid #e5e5e5; } .opfts_wrap .slider_opfts_img:before { display: block; content: ''; padding-top: 100%;} .opfts_wrap .slider_opfts_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%,-50%);} .opfts_wrap .slider_opfts_txt { display: block; overflow: hidden; width: 100%; height: 45px; margin-top: 10px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .bx_prev.opfts_prev { margin-top: -25px;} .bx_next.opfts_next { margin-top: -25px;} .pd_company_opfts { margin-top: 70px;} .pd_company_opfts .pd_opfts_subtit { display: block; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; font-size: 18px; font-weight: 700;} .pd_company_opfts > li + li { margin-top: 50px;} .pd_company_opfts > li { font-size: 0;} .pd_company_opfts > li > div { display: inline-block; position: relative; width: 50%; vertical-align: top;} .pd_company_opfts > li > div .pd_opfts_img { display: inline-block; position: relative; width: 100px; border: 1px solid #e5e5e5; } .pd_company_opfts > li > div .pd_opfts_img:before { display: block; content: ''; padding-top: 100%;} .pd_company_opfts > li > div .pd_opfts_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .pd_company_opfts .pd_opfts_desc { display: inline-block; position: absolute; top: 50%; width: calc(100% - 110px); padding: 0 24px; vertical-align: top; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .tab_scrollfix { width: 100%;} .tab_scrollfix > li > a { font-size: 16px; letter-spacing: -0.7px;;} #scrollfix.is_scrollfix .tab_scrollfix { padding: 0 20px;} .pd_image { width: 100%;} .pdimage_wrap { width: 600px; margin: 0 auto;} .pdimage_top .swiper-slide { height: 600px;} .pdimage_prev { top: 50%; bottom: 0; width: 40px; height: 40px; margin-top: -30px; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .pdimage_prev::before { width: 16px; height: 16px; margin-left: 4px;} .pdimage_next { top: 50%;bottom: 0; width: 40px; height: 40px; margin-top: -30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .pdimage_next::before { width: 16px; height: 16px; margin-left: -4px;} .pdimage_pagination { display: block;} .pdimage_thumbs { display: none;} .pd_summary { display: block; width: 100%; min-height: auto; margin-bottom: 70px;} .pd_company { display: block; width: 100%; padding: 75px 30px 30px 30px; border: none; border-top: 1px solid #e5e5e5;} .pd_company .title { border-bottom: none;} .pd_company .bar_box { max-width: 750px ;} .pd_btn { margin-top: 50px; text-align: center;} /* ==================== pd_info ==================== */ .pd_info .scrollfix_cont { width: 100%;} } /* 모바일만 */ @media screen and (max-width: 800px) { .tab_scrollfix { padding: 0;} .tab_scrollfix > li > a { padding: 15px 0; font-size: 14px; letter-spacing: -0.5px;} .pd_image { display: block; width: 100%;} .pdimage_wrap { width: 100%;} .pdimage_top .swiper-slide { display: block; overflow: hidden; position: relative; width: 100%; height: auto;} .pdimage_top .swiper-slide::before { display: block; content: ''; padding-top: 100%;} .pdimage_top .swiper-slide img { max-width: 100%; max-height: 100%;} .pd_summary { display: block; width: 100%; padding: 0; margin: 20px 0 50px;} .pd_summary_inner { padding: 0;} .pd_summary > .search_button { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2; width: 100%; background-color: #fff; padding: 20px 0; box-shadow: 0 0 15px rgba(0,0,0,0.2);} .pd_tit { margin: 0 0 10px; font-size: 20px;} .pd_option { min-height: auto; } .pd_option dd { width: 100px; font-size: 12px;} .pd_option dt { width: calc(100% - 100px); font-size: 12px;} .pd_money.pd_summary_inner { padding: 20px 0 20px 0; margin: 20px 0 0 0;} .pd_company { display: block; width: 100%; padding: 50px 0 0 0; } .pd_company .title { padding-bottom: 0;} .pd_info { margin-top: 50px; padding-top: 10px; } /* 스크롤탭2 : PRODUCT DESCRIPTION */ .pd_company_header .left { display: block; width: 100%; height: 120px;} .pd_company_header .pd_company_logo { overflow: visible; height: 100%;} .pd_company_header .pd_company_logo img { max-width: none; width: auto; height: 100%; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .pd_company_header .pd_company_logo:before { display: none;} .pd_company_header .right { display: block; width: 100%; padding-left: 0;} .scrollfix_cont .title { padding: 0; margin-top: 50px; padding-bottom: 15px; } .scrollfix_cont .title .title_year { top: -25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .scrollfix_cont .title .title_name { display: block; text-align: center; } .pd_company_header .pd_company_tit li + li { margin-top: 20px;} .board_buying_header .date { font-size: 12px;} .board_company_header { display: block;} .board_company_header > .left { display: block; width: 100%;} .board_company_header > .left .dright dl dt { display: none;} .board_company_header > .left .dright .area_pd_tit { font-size: 18px;} .board_company_header > .left .dleft { width: 80px; height: 80px;} .board_company_header > .right { display: block; position: absolute; bottom: 0; right: 0; width: 100%;} .board_company_header > .left .dright { width: calc(100% - 105px);} .pd_company_cont { padding: 10px; margin-top: 30px;} .pd_company_cont .pd_company_subtit { margin-bottom: 5px; font-size: 12px;} .pd_company_cont .pd_company_desc { font-size: 12px;} .pd_company_cont p { font-size: 12px;} .pd_company_cont > li + li { margin-top: 20px;} .pd_company_markets { margin-top: 10px;} .pd_company_markets li { width: 50%;} .pd_company_markets li > span b { font-size: 12px;} .pd_company_mainpd { padding-top: 10px;} .pd_company_mainpd li { width: 50%;} .pd_company_mainpd li > p { margin-top: 10px; font-size: 12px;} .opfts_wrap .slider_opfts_txt { font-size: 12px;} .pd_company_opfts .pd_opfts_subtit { padding-bottom: 10px; margin-bottom: 15px; font-size: 14px;} .pd_company_opfts { margin-top: 40px;} .pd_company_opfts > li + li { margin-top: 30px; } .pd_company_opfts > li > div { display: block; width: 100%;} .pd_company_opfts > li > div + div { margin-top: 10px;} .pd_company_opfts .pd_opfts_desc { padding: 0 0 0 24px; font-size: 12px;} } /* ======================================== join 회원가입 ======================================== */ /* ==================== join_step1 ==================== */ .join_step1 { background: url(../images/join_bg1.png) no-repeat 97% top;} .join_step1 .join_tit span { font-size: 40px; font-weight: 700;} .join_step1 .join_tit em { font-size: 40px; font-weight: 700; color: #30beb2;} .join_step1 .join_tit2 { display: block; margin-bottom: 20px; font-size: 30px; font-weight: 700; text-align: center;} .join_step1 .join_subtit { display: block; margin: 20px 0; font-size: 20px;} .join_area1 { padding: 70px 0; margin-top: 70px; border-top: 1px solid #e5e5e5;} .join_area1 li { position: relative;} .join_area1 li + li { margin-top: 40px;} .join_area1 li::before { content: ''; position: absolute; top: -5px; left: 0; width: 10px; height: 2px; background-color: #30beb2;} .join_area2 { height: 200px;} .join_area2 li { display: inline-block; width: calc((100% - 23px) / 2); height: 100%; border: 1px solid #30beb2; font-size: 0; vertical-align: top; } .join_area2 li+li { margin-left: 20px;} .join_area2 li strong { font-size: 40px; font-weight: 700; color: #30beb2;} .join_area2 li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-direction: column; width: 100%; height: 100%;} /* ==================== join_step2 ==================== */ .join_step2 .join_tit { margin-bottom: 40px; font-size: 40px; font-weight: 700; text-align: center;} .join_step2 .join_tit2 { margin-bottom: 20px; font-size: 20px; font-weight: 700;} .join_step2 .join_subtit { margin: 20px 0 10px; font-size: 16px; font-weight: 700;} .join_step2 .join_desc { margin-top: 15px; color: #666;} .join_step2 .checks { display: block;} .join_step2 .checks + .checks { margin-top: 7px;} .join_area3 > li + li { margin-top: 40px;} .join_area4 { padding-top: 70px; margin-top: 70px; border-top: 1px solid #e5e5e5;} .join_area4 > li + li { margin-top: 40px;} .join_area4 .join_area4_wrap { border: 1px solid #e5e5e5; background-color: #fafafa; } .join_area4 .join_area4_box { width: 100%; max-width: 840px; margin: 45px auto 55px; } .join_area4 .join_area4_box > .search_button { margin-top: 20px;} /* ==================== join_step2 scroll ==================== */ .join_scroll1, .join_scroll2 { overflow-y: scroll; width: 100%; height: 280px; margin: 20px 0; padding: 25px 30px 30px; border: 1px solid #ddd;} .join_scroll1 *, .join_scroll2 * { font-size: 14px; } .join_step2 .depth1 { margin: 50px 0 0 0; font-size: 25px; font-weight: 700;} .join_step2 .depth1.is_big { font-size: 30px; text-align: center;} .join_step2 .depth2 { display: block; margin: 30px 0 15px; font-size: 18px; font-weight: 700;} .join_scroll1_desc { padding: 0 0 10px 10px;} .join_scroll1_desc2 { margin: 10px 0;} .join_scroll1_color { font-weight: 700; color:#30beb2 !important;} .join_step2 .cook { font-weight: 700; vertical-align: baseline;} .join_step2 .bullet b { font-weight: 700;} .join_step2 .bullet > li { position: relative; line-height: 20px;} .join_step2 .bullet > li + li { margin-top: 10px;} .join_step2 .bullet > li .bullet { margin-top: 10px;} .join_step2 .bullet_type01 > li + li { margin-top: 5px;} .join_step2 .bullet_type02 > li { padding-left: 8px;} .join_step2 .bullet_type02 > li:before { content: ''; position: absolute; top: 10px; left: 0; width: 2px; height: 2px; background-color: #111;} .join_step2 .bullet_type03 > li { position: relative; padding-left: 25px; font-weight: 400; line-height: 24px; text-align: left;} .join_step2 .bullet_type03 > li .num { display: inline-block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; background:#30beb2; border-radius: 50%; font-size: 10px; font-weight: 500; line-height: 15px; text-align: center; color: #fff;} .join_step2 .bullet_type03 > li:before { content: none;} .join_step2 .bullet_type03 > li + li { margin: 15px 0 5px;} .join_step2 .bullet_type04 { margin: 30px 0 80px;} .join_step2 .bullet_type04 > li + li { margin-top: 5px;} .join_step2 .bullet_type05 { display: block; max-width: 750px; width: 90%; } .join_step2 .bullet_type05 > li { display: block; position: relative; padding-left: 20px;} .join_step2 .bullet_type05 > li::before { content: 'ㆍ'; position: absolute; top: -4px; left: 0; font-size: 20px; color: #000; } .join_step2 .bullet_type05 > li + li { margin-top: 5px;} .join_step2 .bullet_type06 { display: block; max-width: 750px; width: 90%; } .join_step2 .bullet_type06 > li { display: block; position: relative; padding-left: 20px; line-height: 1.7; } .join_step2 .bullet_type06 > li::before { content: 'ㆍ'; position: absolute; top: 0; left: 0; font-size: 20px; color: #000; } .join_step2 .bullet_type06 > li + li { margin-top: 10px;} .join_step2 .bullet_num > li { padding-left: 0;} .join_step2 .bullet_table { display: inline-block;} .join_step2 .bullet_table li + li { margin: 5px 0 0;} .join_step2 .form2 { margin: 10px 0 20px;} .join_step2 .form2 table thead th { font-size: 14px;} .join_step2 .form2 table tbody td { font-size: 14px;} .join_area6 { display: block; padding: 30px 0; margin: 30px 0; border: 1px solid #e5e5e5; background-color: #fafafa; text-align: center; font-size: 0;} .join_area6 .join_area6_box { position: relative;} .join_area6 ul { display: inline-block; width: 400px; text-align: left; vertical-align: top;} .join_area6 ul li + li { margin-top: 15px;} .tabs_join { position: relative; padding-top: 80px;} .tabs_join.ui-tabs .tab_head li a { padding: 3px 20px 13px 20px; font-size: 16px;} .tabs_join.ui-tabs .tab_head li + li { margin-left: 0;} .tabs_join.ui-tabs .tab_head { display: inline-block; position: absolute; top: 0; right: 0; width: auto;} .tab_head2 { display: inline-block; height: 40px; margin-bottom: 20px; font-size: 0; border: 1px solid #30beb2;} .tab_head2 > li { display: inline-block;} .tab_head2 > li a { display: block; padding: 0 20px; font-size: 16px; font-weight: 500; line-height: 38px; color: #30beb2; text-align: center;} .tab_head2 > li a.is_active { background-color: #30beb2; color: #fff;} /* ==================== join_step3 ==================== */ .join_step3 > ul { font-size: 0;} .join_step3 > ul > li { display: inline-block; width: calc((100% - 24px)/2); vertical-align: top;} .join_step3 > ul > li + li { margin-left: 24px;} .join_step3 .form1 + .form1 { margin-top: 20px;} .join_step3 .join_tit { display: inline-block; font-size: 18px; font-weight: 700; } .join_step3 .join_subtit { display: block; margin-bottom: 5px; font-weight: 700; } .join_step3 .join_subtit2 { display: block; margin-bottom: 10px; font-weight: 500; } .join_step3 .join_desc { display: inline-block; float: right; padding-top: 6px; font-size: 12px; text-align: right; } .join_step3 .join_desc2 { font-size: 12px; line-height: 1.45;} .join_step3 .join_head { display:block; margin-bottom: 10px; } .join_step3 .join_head::after { display: block; clear: both; content: '';} .area_securitycode { font-size: 0;} .area_securitycode > div { display: inline-block; position: relative; width: 180px; height: 40px; border: 1px solid #e5e5e5;} .area_securitycode > div > img { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .area_securitycode > div > img:nth-of-type(1) { left: 5px;} .area_securitycode > div > img:nth-of-type(2) { right: 10px; cursor: pointer;} .area_securitycode > input { display: inline-block; width: calc(100% - 190px); margin-left: 10px; vertical-align: top;} .area_joinsns { display: inline-block; margin: 7px 5px 7px 0; vertical-align: top;} .area_joinsns > a { display: inline-block; width: 24px; height: 24px; background: url(../images/icon_join_facebook.png) no-repeat; font-size: 0; vertical-align: top;} .join_area5 { padding: 15px 20px; margin-bottom: 20px; background-color: #fafafa; border: 1px solid #e5e5e5;} .join_area5_box { position: relative; margin-top: 7px; padding: 15px 20px; background: #e7ecef url(../images/icon_join_duns.png) no-repeat 96% 10%;} .join_area5_btn { display: block; width: 100%; margin-top: 15px; text-align: center;} .join_area5_btn button { height: 35px; padding: 5px 10px; background-color: #fff; border-radius: 2px; border: 1px solid #005172; font-size: 12px; color: #005172;} /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .join_step2 .join_tit { font-size: 35px;} .join_step2 .depth1 { font-size: 20px;} .join_step2 .depth2 { font-size: 16px;} .join_step3 > ul > li { display: block; width: 100%;} .join_step3 > ul > li + li { margin-left: 0; margin-top: 25px;} .join_area6 { display: block; padding: 30px 0; margin: 30px 0; border: 1px solid #e5e5e5; background-color: #fafafa; font-size: 0; text-align: center;} .join_area6 ul { display: block; width: auto;} .join_area6 .join_area6_box { display: inline-block;} .join_area6 ul + ul { margin-top: 15px;} } /* 모바일만 */ @media screen and (max-width: 800px) { /* ==================== join_step1 ==================== */ .join_step1 {background: none;} .join_step1 .join_tit span, .join_step1 .join_tit em { font-size: 20px;} .join_step1 .join_tit2 { font-size: 16px;} .join_step1 .join_subtit { font-size: 14px; } .join_step1 .join_desc { font-size: 12px;} .join_area1 { padding: 35px 0; margin-top: 25px;} .join_area1 li { font-size: 12px;} .join_area1 li + li { margin-top: 30px;} .join_area2 { height: auto;} .join_area2 li { display: block; width: 100%; height: 120px; } .join_area2 li + li { margin-left: 0; margin-top: 20px;} .join_area2 li strong { font-size: 23px;} .join_area2 li span { font-size: 12px;} /* ==================== join_step2 ==================== */ .join_step2 .join_tit { font-size: 20px;} .join_step2 .join_subtit { font-size: 12px;} .join_step2 .join_tit2 { margin-bottom: 10px; font-size: 14px;} .join_step2 .join_desc { font-size: 12px;} .join_area4 { padding-top: 50px; margin-top: 50px;} .join_area4 .join_area4_box { padding: 15px 20px; margin: 0;} .join_area4 li + li { margin-top: 20px;} .join_area4 .fit_box2 > :first-child { display: block; width: 100%;} .join_area4 .fit_box2 > .search_button { display: block; width: 100%; margin-top: 10px;} .join_area4 .fit_box2 > .search_button button { display: block; width: 100%;} .join_area4 .join_area4_box > .search_button button { display: block; width: 100%;} /* ==================== join_step2 scroll ==================== */ .join_scroll1, .join_scroll2 { padding: 15px;} .join_scroll1 *, .join_scroll2 * { font-size: 12px; } .join_step2 .depth1 { margin: 30px 0 0 0; font-size: 18px;} .join_step2 .depth2 { margin: 20px 0 15px; font-size: 14px;} .join_step2 .depth1.is_big { margin: 0; font-size: 20px;} .join_scroll1_desc { padding: 0 0 10px 0;} .join_step2 .bullet_type03 > li .num { font-size: 10px; } .join_step2 .bullet_type04 { margin: 20px 0 30px} .join_area6 { margin: 15px 0; padding: 20px 0;} .tabs_join { padding-top: 70px;} .tabs_join.ui-tabs .tab_head { display: block; width: 100%;} .tabs_join.ui-tabs .tab_head li { width: 33.333%; } .join_step2 .form2 { overflow-x: auto; width: 100%; height: 100%;} .join_step2 .form2 table { table-layout: fixed; min-width: 640px; max-width: 800px;} .tab_head2 { display: block;} .tab_head2 > li { display: inline-block; width: 50%;} /* ==================== join_step3 ==================== */ .join_step3 .join_desc { display: block; float: none; text-align: left;} .join_step3 .join_tit { font-size: 14px;} .join_step3 .join_subtit { font-size: 12px;} .join_step3 .join_subtit2 { font-size: 14px;} .join_step3 .join_desc { padding-top: 0;} .area_joinsns { display: block; margin: 0;} .join_area5 { padding: 10px;} .join_area5_box { margin-bottom: 50px;} .join_area5_btn { position: absolute; bottom: -50px; left: 0; margin-top: 0;} .join_area5_btn button { width: 100%; height: 40px;} } /* ==================== about us ==================== */ /* ==================== about us > abouttrk ==================== */ .abouttrk_tit { display: block; margin: 30px 0 15px; padding: 10px 20px; background-color: #30beb2; font-size: 18px; font-weight: 700; color: #fff; } .abouttrk_subtit a { display: block; padding-left: 20px; font-size: 16px; font-weight: 700; color: #30beb2;} .abouttrk_desc { margin-top: 15px; padding-left: 20px;} .abouttrk_box li + li { margin-top: 45px;} /* ==================== about us > sitemap ==================== */ .sitemap { display: block; width: 100%; font-size: 0; vertical-align: top;} .sitemap + .sitemap { margin-top: 100px;} .sitemap > li { display: inline-block; width: 33.333%; margin-bottom: 100px; vertical-align: top;} .sitemap > li > strong { display: block; height: 30px; margin-bottom: 25px; font-size: 18px; font-weight: 700;} .sitemap_box { display: block; width: 100%; font-size: 0;} .sitemap_box > li { display: block; width: 100%;} .sitemap_box > li + li { margin-top: 10px;} .sitemap_box > li > a { color: #666;} .sitemap > li.sitemap_allcate{ display: block; width: 100%;} .sitemap_allcate .sitemap_box{ display: inline-block; width: 33.333%; vertical-align: top;} /* ==================== about us > globalPartners ==================== */ .globalpartners { display: block; width: 100%; font-size: 0; text-align: left;} .globalpartners > li { display: inline-block; width: 25%; height: 170px; margin-bottom: 1px; vertical-align: top;} .globalpartners > li a { display: block; width: 100%; height: 100%; text-align: center;} .globalpartners > li a div { overflow: hidden; position: relative; width: 100%; height: 74px; margin-bottom: 5px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; } .globalpartners > li:nth-child(4n) a div{ border: 1px solid #e5e5e5;} .globalpartners > li a div img { position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all 1s;} .globalpartners > li:hover a div img { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2);; } /* ==================== Trade Services(ts) ==================== */ .ts .page_subtit { display: block; margin-top: 40px;} .ts .page_subtit2 { margin: 40px 0 10px;} .ts_page_desc1 { margin: 25px 0;} .ts .ts_area1 { margin: 20px 0 50px; padding: 50px 0px; background-color: #fafafa; border: 1px solid #e5e5e5;} .ts .ts_area1 > ul { width: 75%; margin: 0 auto; font-size: 0; text-align: center;} .ts .ts_area1 > ul > li { display: inline-block; position: relative; width: 30%; padding-top: 65px; vertical-align: top;} .ts .ts_area1 > ul > li b { display: block; margin-bottom: 5px; color: #30beb2;} .ts .ts_area1 > ul > li span { display: block; line-height: 1.4; } .ts .ts_area1 > ul > li::before { content: ''; position: absolute; top: 0; left: 50%; width: 50px; height: 50px; background: url(../images/icon_tradeservices.png) no-repeat; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .ts .ts_area1 > ul > .ts_area1_s1::before { background-position: 0 0;} .ts .ts_area1 > ul > .ts_area1_s2::before { background-position: -50px 0;} .ts .ts_area1 > ul > .ts_area1_s3::before { background-position: -100px 0;} .ts .ts_area1 > ul > .ts_area1_s4::before { background-position: -150px 0;} .ts .ts_area1 > ul > .ts_area1_s5::before { background-position: -200px 0;} .ts .ts_area1 > ul > li.ts_area1_arrow { width: 5%; height: 120px; padding-top: 0;} .ts .ts_area1 > ul > li.ts_area1_arrow::before { top: 50%; left: 50%; background-position: -250px 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .ts .ts_area2 > p { margin-bottom: 5px;} .ts .ts_area2 .search_button { margin: 60px 0 30px;} .ts_step_wrap { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; } .ts_step { position: relative; font-size: 0;} .ts_step::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; background-color: #30beb2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .ts_step > li { display: inline-block; position: relative; width: 25%; text-align: center;} .ts_step > li strong { display: block; padding-bottom: 70px; color: #666; font-weight: 700;} .ts_step > li span { display: block; color: #666;} .ts_step > li::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; background-color: #30beb2; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .ts_step > li.is_active::before { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; border: 1px solid #30beb2; border-radius:50%; background-color: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .ts_area3 { padding: 20px; border: 1px solid #e5e5e5;} .ts_area3 .ts_area3_tit { display: block; margin: 25px 0 15px; font-size: 14px; font-weight: 500;} /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .ts .ts_area1 { padding: 35px 0;} .ts .ts_area1 > ul { width: 100%;} .ts .ts_area1 > ul > li span { font-size: 12px;} } /* 모바일만 */ @media screen and (max-width: 800px) { /* ==================== about us ==================== */ .abouttrk_tit { margin: 30px 0 10px; font-size: 14px;} .abouttrk_desc { margin-top: 10px; padding-left: 10px; font-size: 12px;} .abouttrk_desc * { font-size: 12px;} .abouttrk_subtit a { padding-left: 10px;; font-size: 12px;} .abouttrk_box li + li { margin-top: 25px;} .sitemap + .sitemap { margin-top: 0;} .sitemap > li { display: inline-block; width: 50%; margin-bottom: 50px;} .sitemap > li > strong { height: 25px; margin-bottom: 10px; font-size: 14px;} .sitemap_box > li > a { font-size: 12px;} .sitemap_box > li + li { margin-top: 5px;} .sitemap > li.sitemap_allcate { display: inline-block; width: 50%;} .sitemap_allcate .sitemap_box { display: block; width: 100%; vertical-align: top;} .globalpartners > li { width: 50%; height: auto; margin-bottom: 20px;} .globalpartners > li:nth-child(2n) a div { border: 1px solid #e5e5e5;} .ts .page_subtit { margin-top: 20px;} .ts .page_subtit2 { margin: 25px 0 10px;} .ts_page_desc1 { margin: 10px 0;} .ts .ts_area1 { padding: 30px 0; margin: 10px 0 30px; } .ts .ts_area1 > ul > li { display: block; width: 100%; padding-top: 55px;} .ts .ts_area1 > ul > li b { font-size: 12px;} .ts .ts_area1 > ul > li span { font-size: 12px;} .ts .ts_area1 > ul > li.ts_area1_arrow { width: 100%; height: 80px;} .ts .ts_area1 > ul > li::before { background: url(../images/icon_tradeservices.png) no-repeat; background-size: 600% auto;} .ts .ts_area1 > ul > li.ts_area1_arrow::before{ background-position: -250px -25px; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg);} .ts .ts_area1 > ul > .ts_area1_s1::before { background-position: 0 -25px;} .ts .ts_area1 > ul > .ts_area1_s2::before { background-position: -50px -25px;} .ts .ts_area1 > ul > .ts_area1_s3::before { background-position: -100px -25px;} .ts .ts_area1 > ul > .ts_area1_s4::before { background-position: -150px -25px;} .ts .ts_area1 > ul > .ts_area1_s5::before { background-position: -200px -25px;} .ts_step_wrap { margin-bottom: 25px; padding-bottom: 0;} .ts_step > li span { display: none;} .ts_step > li strong { font-size: 12px; font-weight: 500;} } /* ==================== Support (sp) ==================== */ .howtouse_wrap { border: 1px solid #e5e5e5; background-color: #fafafa; text-align: center;} .howtouse { width: 600px; margin: 40px auto 60px;} .howtouse .howtouse_tit { position: relative; margin-bottom: 15px; font-size: 25px; font-weight: 700;} .howtouse .howtouse_tit::before { display: inline-block; content:''; position: relative; top: 2px; left: -10px; width: 22px; height: 22px; background: url(../images/icon_howtouse.png) no-repeat; background-position: -161px -9px;} .howtouse .howtouse_subtit { margin: 75px 0 20px; font-size: 20px; font-weight: 700; } .howtouse .howtouse_guide { display: block; width: 100%; font-size: 0;} .howtouse .howtouse_guide li { display: inline-block; position: relative; width: calc((100% - 40px)/2); padding: 40px 0 50px; background-color: #fff; border: 1px solid #30beb2; border-radius: 2px;} .howtouse .howtouse_guide li + li { margin-left: 40px;} .howtouse .howtouse_guide li strong { display: block; margin-bottom: 130px; font-size: 18px; font-weight: 700;} .howtouse .howtouse_guide li::before { content: ''; position: absolute; top: 95px; left: 50%; width: 70px; height: 75px; background: url(../images/icon_howtouse.png) no-repeat; background-position: -10px -10px; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .howtouse .howtouse_guide li.korean::before { background-position: -84px -10px; } .howtouse .howtouse_btn { display: inline-block; width: 120px; height: 50px; border-radius: 2px; background-color: #30beb2; font-size: 14px; line-height: 50px; color: #fff; letter-spacing: -0.5px; text-align: center;} .plpolicy .page_subtit1 { margin-bottom: 15px;} .plpolicy_area { margin-top: 30px; padding: 20px 30px; border: 1px solid #30beb2;} .contactus .dform1 { margin-top: 30px;} /* 모바일만 */ @media screen and (max-width: 800px) { .howtouse_wrap { border: none; background-color: transparent;} .howtouse { width: 100%; margin: 0; } .howtouse .howtouse_tit { margin-bottom: 10px; font-size: 16px;} .howtouse .howtouse_tit::before { top: 7px; left: -5px;} .howtouse .howtouse_subtit { margin: 35px 0 15px; font-size: 16px;} .howtouse .howtouse_guide li { width: calc((100% - 20px)/2); padding: 15px 0 20px;} .howtouse .howtouse_guide li + li { margin-left: 20px;} .howtouse .howtouse_guide li strong { margin-bottom: 110px; font-size: 14px;} .howtouse .howtouse_guide li::before { top: 56px;} .howtouse .howtouse_guide li::before { background-position: 0 -42px; background-size: 200% auto;} .howtouse .howtouse_guide li.korean::before { background-position: -68px -42px;} .plpolicy_area { padding: 13px 15px;} .plpolicy .page_subtit1 { margin-bottom: 10px;} .contactus .dform1 { margin-top: 20px;} } /* ==================== mypage ==================== */ .mypage > section + section { margin-top: 30px;} .mypage_header { position: relative; padding: 14px 30px; font-size: 0; border: 1px solid #e5e5e5;} .mypage_header::before { display: block; clear: both; content: '';} .mypage_header .label { display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .mypage_header .label p { display: block; width: 50px; height: 22px; margin-right: 20px; font-size: 12px; line-height: 21px; color: #fff; text-align: center;} .mypage_header .label .label_buyer { background-color: #fa76ab;} .mypage_header .label .label_seller { background-color: #7d91f9;} .mypage_header .label p + p { margin-top: 5px; } .mypage_header .name { display: inline-block; padding-left: 65px; vertical-align: top;} .mypage_header .name span { display: block; margin-bottom: 3px; font-size: 18px; line-height: 1;} .mypage_header .name strong { display: block;} .mypage_header .name strong b { display: inline-block; font-size: 22px; line-height: 31px; font-weight: 700;} .mypage_header .name strong em { display: inline-block; font-size: 22px; line-height: 31px; font-weight: 400;} .mypage_header .link { display: inline-block; position: absolute; top: 50%; right: 30px; font-size: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .mypage_header .link li { display: inline-block; position: relative; } .mypage_header .link li + li { margin-left: 20px; padding-left: 22px;} .mypage_header .link li + li:before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; background-color: #bbb; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .mypage_header .link li a { display: block; position: relative; padding-left: 33px;} .mypage_header .link li a::before { content: ''; position: absolute; top: 50%; left: 0; width: 22px; height: 22px; background: url(../images/icon_mypage_header.png) no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .mypage_header .link li:nth-of-type(1) a:before { background-position: 0 0;} .mypage_header .link li:nth-of-type(2) a:before { background-position: -32px 0;} .mypage_header .link li:nth-of-type(3) a:before { background-position: -64px 0;} .mypage_header .link li:nth-of-type(4) a:before { background-position: -96px 0;} .mypage_header .link li:nth-of-type(5) a:before { background-position: -128px 0;} .mypage_header .link li:nth-of-type(6) a:before { background-position: -160px 0;} .mypage_search { padding: 14px; border: 1px solid #e5e5e5; background-color: #fafafa; font-size: 0; text-align: center;} .mypage_cont { font-size: 0;} .mypage_cont > .left { display: inline-block; width: calc(60% - 12px); vertical-align: top;} .mypage_cont > .right { display: inline-block; width: calc(40% - 12px); margin-left: 24px; vertical-align: top;} .mypage_cont .col { position: relative; padding: 25px 30px; border: 1px solid #e5e5e5;} .mypage_cont .col + .col { margin-top: 20px;} .mypage_cont .col > div { position: relative;} .mypage_cont .col > div + div { margin-top: 40px;} .mypage_tit { margin-bottom: 12px; font-size: 16px; font-weight: 700;} .mypage_tit2 { margin-bottom: 22px; font-size: 20px; font-weight: 700;} .mypage_bar { width: 100%; height: 1px; margin: 37px 0 38px !important; background-color: #e5e5e5;} .mypage_title { margin-bottom: 5px; font-size: 25px; font-weight: 700; } .mypage_more { position: absolute; top: 3px; right: 0; width: 20px; height: 20px; background: url(../images/more.png) no-repeat; font-size: 0;} .mypage_list1 > li + li { margin-top: 2px;} .mypage_list1 > li a { display: block; overflow: hidden; line-height: 2.1; color: #666; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } .mypage_list1 > li a:hover { text-decoration: underline;} .mypage_list1 > li a span { display: inline-block; width: 74px; height: 21px; margin-right: 5px; background-color: #30beb2; font-size: 12px; line-height: 20px; color: #fff; text-align: center;} .mypage_viewitem > li { display: block; position: relative; font-size: 0;} .mypage_viewitem > li:nth-of-type(2) { margin: 20px 0 19px;} .mypage_viewitem > li a { display: block; width: 100%; height: 100%; } .mypage_viewitem .viewitem_img { display: inline-block; overflow: hidden; position: relative; width: 100px; height: 100px; border: 1px solid #e5e5e5; } .mypage_viewitem .viewitem_img:before { display: block; content: '';padding-top: 100%;} .mypage_viewitem .viewitem_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .mypage_viewitem .viewitem_right { display: inline-block; width: calc(100% - 100px); padding-left: 24px; position: absolute; top: 50%; vertical-align: top; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mypage_viewitem .viewitem_tit { display: block; overflow: hidden; width: 100%; margin-bottom: 5px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .mypage_viewitem .viewitem_count { font-size: 12px; color: #888;} .btn_mypage_mb { display: none; position: absolute; top: 21px; right: 19px; width: 14px; height: 10px;} .btn_mypage_mb .ham { width: 100%; height: 100%; } .btn_mypage_mb .ham, .ham > em { display: inline-block; box-sizing: border-box;} .btn_mypage_mb .ham > em { position: absolute; left: 0; width: 100%; height: 2px; background-color: #30beb2; } .btn_mypage_mb .ham > em:nth-of-type(1) { top: 0;} .btn_mypage_mb .ham > em:nth-of-type(2) { top: 4px;} .btn_mypage_mb .ham > em:nth-of-type(3) { bottom: 0;} /* .mypage_status */ .mypage_status ul { font-size: 0;} .mypage_status ul li { display: inline-block; width: 25%; height: 110px; padding-top: 25px; text-align: center;} .mypage_status ul li strong { display: block; font-size: 18px; font-weight: 500; color: #30beb2;} .mypage_status ul li span { display: block;} .mypage_status .mypage_btn { display: block; width: 100%; height: 50px; background-color: #30beb2; line-height: 50px; color: #fff; text-align: center;} /* mypage_activity */ .mypage_activity { padding: 20px 30px; font-size: 0; border: 1px solid #e5e5e5;} .mypage_activity > .left { display: inline-block; width: 70%; vertical-align: top;} .mypage_activity > .left ol li { display: block; position: relative; width: 100%;;} .mypage_activity > .left ol li + li { margin-top: 20px;} .mypage_activity > .left ol li::before { content: ''; position: absolute; top: 2px; left: 0; width: 22px; height: 22px; background: url(../images/icon_check1.png) no-repeat; background-position: -10px -10px;} .mypage_activity > .left ol .is_check::before { background-position: -40px -10px ;} .mypage_activity > .left ol li > span { display: inline-block; overflow: hidden; width: calc(100% - 120px); padding-left: 30px; font-weight: 500; line-height: 20px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; vertical-align: top;} .mypage_activity > .left ol .mypage_activity_bar > span { width: 130px; } .mypage_activity > .left ol .mypage_activity_bar .bar_box { display: inline-block; overflow: hidden; width: calc(100% - 255px);} .mypage_activity > .left ol .mypage_activity_bar .bar_box > b { position: absolute; top: 0; right: 10px; z-index: 1; font-size: 12px; font-weight: 500; } .mypage_activity .mypage_util { position: absolute; top: 0; right: 0; width: 120px; padding-left: 20px; text-align: left;} .mypage_activity .mypage_util a { font-size: 12px; color: #30beb2;} .mypage_activity .mypage_exclamation { display: inline-block; position: absolute; top: 3px; right: 0; width: 16px; height: 16px; cursor: pointer;} .mypage_activity .mypage_exclamation img { vertical-align: top;} .mypage_activity .mypage_exclamation .mypage_hover { display: none; position: absolute; top: 0; right: 20px; z-index: 1; width: 300px; padding: 5px 10px; border: 1px solid #30beb2; background-color: #fff; font-size: 12px; color: #666;} .mypage_activity .mypage_exclamation:hover .mypage_hover { display: block;} .mypage_activity > .right { display: inline-block; width: 30%; padding-left: 30px; margin: 0 auto; text-align: center; vertical-align: top; } .mypage_activity > .right > p { margin: 10px 0 15px; font-size: 12px;} .mypage_activity > .right .search_button { margin-top: 15px; text-align: center;} .mypage_activity .mypage_graph { width: 100%; height: auto;} .myprofile .page_subtit2 { margin-top: 20px;} .myphoto_area1 { margin: 10px 0 25px; padding: 10px 20px; border: 1px solid #e5e5e5; background-color: #fafafa;} .myphoto_area1 dl { display: block; font-size: 0; } .myphoto_area1 dt { display: inline-block; width: 80px; vertical-align: top; font-weight: 700;} .myphoto_area1 dd { display: inline-block; width: calc(100% - 80px); } /* mypage_activity 그래프 */ .mypage_activity .mypage_graph > div { position: relative; width: 100%; height: 100%;} .mypage_activity .mypage_graph .progressbar-text { top: 50% !important; left: 50% !important; z-index: 1; transform:translate(-50%, -50%) !important; font-size: 20px !important;} .graphbg1 .progressbar-text { right: 10px !important; font-size: 12px !important;} .graphbg1 path:nth-of-type(2) { stroke: #30beb2 !important;} .graphbg1 svg { width: 100% !important; height: 100% !important;} .graphbg2 path:nth-of-type(2) { stroke: #30beb2 !important;} .graphbg2 svg { width: 170px !important; height: 100% !important;} /* myreport */ .myreport .page_head { margin-top: 30px;} .myreport .page_head .page_subtit2 { display: inline-block;} .myreport_box { padding: 20px 30px; border: 1px solid #e5e5e5;} .myreport_box li + li { margin-top: 40px;} .myreport_search { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; text-align: center; } .myreport_search .select_box { display: inline-block; width: 180px; margin: 0 10px;} .myreport_search span { display: inline-block; line-height: 40px;} .myreport_search .search_button { display: inline-block; margin-left: 10px; vertical-align: top;} .myreport_area1 { font-size: 0;} .myreport_area1 .left { display: inline-block; width: 150px; margin-right: 30px;} .myreport_area1 .right { display: inline-block; width: calc(100% - 180px); vertical-align: top;} .myreport_area1_img { display:block; position: relative; width: 100%; border: 1px solid #e5e5e5; } .myreport_area1_img:before { display: block; content: ''; padding-top: 100%;} .myreport_area1_img img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .myreport_area1 .left strong { display: block; margin: 10px 0 5px; font-weight: 500;} .myreport_area1 .left span { display: block; font-size: 12px; color: #666;} .myreport_area2 { position: relative;} .myreport_area3 { font-size: 0;} .myreport_area3 .left { display: inline-block; width: 300px; margin-right: 30px;} .myreport_area3 .right { display: inline-block; width: calc(100% - 330px) ; vertical-align: top;} .myreport_area2_top { display: block; height: 40px; margin-bottom: 5px; text-align: center;} .myreport_area2_top .page_subtit2 { display: inline-block; line-height: 40px; color: #666; vertical-align: top;} .myreport_area2_top .select_box { display: inline-block; width: 180px; margin-left: 10px; vertical-align: top;} .myreport_menu { position: absolute; top: 20px; right: 20px;} .btn_myreport { position: absolute; top: 0; right: 0; width: 14px; height: 10px;} .btn_myreport .ham { width: 100%; height: 100%; } .btn_myreport .ham, .ham > em { display: inline-block; box-sizing: border-box;} .btn_myreport .ham > em { position: absolute; left: 0; width: 100%; height: 2px; background-color: #30beb2; } .btn_myreport .ham > em:nth-of-type(1) { top: 0;} .btn_myreport .ham > em:nth-of-type(2) { top: 4px;} .btn_myreport .ham > em:nth-of-type(3) { bottom: 0;} .myreport_list { display: none; margin-top: 20px; padding: 10px; border: 1px solid #30beb2; background-color: #fff;} .myreport_list > li + li { margin-top: 10px;} .myreport_list > li a { display: block; font-size: 12px;} .myreport_list > li.is_active a { font-weight: 500; color: #30beb2;} /* Add Product */ .mypage_addinfo .page_head { margin: 50px 0 15px;;} .mypage_addinfo .dform1 { margin-top: 15px;} .mypage_addinfo .page_head .page_subtit2 { display: inline-block;} .mypage_addinfo .dform1 .page_subtit2 { margin-bottom: 5px;} .mypage_addinfo_area1 > .input { width: calc(100% - 230px);} .mypage_addinfo_area1 > em { width: 120px; padding-left: 10px; text-align: left;} .mypage_addinfo_area1 > .checks { position: relative; top: 10px; width: 100px; } .mypage_addinfo_area2 { font-size: 0;} .mypage_addinfo_area2 > .input { width: calc(100% - 320px);} .mypage_addinfo_area2 > .select_box { width: 200px; margin: 0 10px;} .mypage_addinfo_area2 > .checks { position: relative; top: 10px; width: 100px;} .chatting { position: relative; padding: 30px; border: 1px solid #e5e5e5; background-color: #fafafa;} .chatting > div + div { margin-top: 30px;} .chatting::after { display: block; clear: both; content: ''; } .chatting .owner { float: left; position: relative; width: 55%; font-size: 0;} .chatting .owner > .chatting_box { display: inline-block; position: relative; width: calc(100% - 120px); height: 100%; padding: 10px 20px; background-color: #fff; border-radius: 2px; border: 1px solid #e5e5e5; vertical-align: top;} .chatting .owner > .chatting_box::before { content: ''; position: absolute; top: 10px; left: -14px; width: 17px; height: 13px; background: url(../images/bg_chatting.png) no-repeat;} .chatting .owner > .chatting_side { display: inline-block; width: 120px; padding-left: 10px; vertical-align: bottom;} .chatting .owner > .chatting_side i { display: block; width: 16px; height: 16px; background: url(../images/icon_check2.png) no-repeat; background-position: -5px -5px; font-size: 0;} .chatting .owner > .chatting_side .date { display: block; margin-top: 3px; font-size: 12px; line-height: 1; color: #bbb;} .chatting .owner > .chatting_side.is_read i { background-position: -23px -5px;} .chatting .owner > .chatting_side.is_read .date { color: #30beb2;} .chatting .guest { float: right; position: relative; width: 55%; font-size: 0; } .chatting .guest > .chatting_box { display: inline-block; position: relative; width: calc(100% - 120px); height: 100%; margin-left: 120px; padding: 10px 20px; background-color: #cbece9; border: 1px solid #bde6e3; border-radius: 2px; vertical-align: top;} .chatting .guest > .chatting_box::before { content: ''; position: absolute; top: 10px; right: -14px; width: 17px; height: 13px; background: url(../images/bg_chatting2.png) no-repeat;} .chatting .guest > .chatting_side { display: inline-block; position: absolute; bottom: 0; left: 0; width: 120px; padding-left: 10px; vertical-align: bottom;} .chatting .guest > .chatting_side i { display: block; width: 16px; height: 16px; background: url(../images/icon_check2.png) no-repeat; background-position: -5px -5px; font-size: 0;} .chatting .guest > .chatting_side .date { display: block; font-size: 12px; line-height: 1.5; color: #bbb;} .chatting .guest > .chatting_side.is_read i { background-position: -23px -5px;} .chatting .guest > .chatting_side.is_read .date { color: #30beb2;} .chatting .chatting_type01 { font-size: 0;} .chatting .chatting_type01 .left { display: inline-block; width: 70px; height: 70px; border: 1px solid #e5e5e5;} .chatting .chatting_type01 .left a { display: block; width: 100%; height: 100%;} .chatting .chatting_type01 .left a img { display: block; width: 100%; height: 100%;} .chatting .chatting_type01 .right { display: inline-block; width: calc(100% - 70px); padding-left: 10px; vertical-align: top;} .chatting .chatting_type01 .right a { display: block; font-size: 12px; font-weight: 500; line-height: 1.5;} .chatting_bottom { padding: 30px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; font-size: 0;} .chatting_bottom > * { display: inline-block; vertical-align: top;} .chatting_bottom > .input { width: calc(100% - 340px); margin: 0 10px;} .chatting_bottom > .refresh { margin-left: 10px; } .detail_total1 { margin-top: 40px; padding: 10px; border: 1px solid #e5e5e5; background-color: #fafafa; text-align:center;} .detail_total1 em { position: relative;} .detail_total1 em + em { margin-left: 10px; padding-left: 20px;} .detail_total1 em + em::before { content: '/'; position: absolute; top: 0; left: 0; font-size: 16px; color: #444;} .sendin_area1 { margin-bottom: 10px;} .sendin_area1 > strong { color: #30beb2;} .mysales_wrap { display: none;} .mypage_btn2 { display: block; width: 100%; height: 50px; margin-bottom: 20px; background-color: #fff; border: 1px solid #30beb2; color: #30beb2; } .mypage_btn2.is_active, .mypage_btn2:hover { background-color: #30beb2; border: 1px solid #30beb2; color: #fff;} .mysales_area1 { margin: 20px 0 40px; font-size: 0;} .mysales_area1 > li { display: inline-block; width: calc((100% - 210px) / 4); text-align: center; vertical-align: top;} .mysales_area1 li + li { margin-left: 70px;} .mysales_area1 .mysales_area1_top { position: relative; height: 240px; padding: 0 20px; border-top: 1px solid #30beb2; border-bottom: 1px solid #30beb2; } .mysales_area1 > li:first-child .mysales_area1_top { border-left: 1px solid #30beb2;} .mysales_area1 > li:last-child .mysales_area1_top { border-right: 1px solid #30beb2;} .mysales_area1 li .mysales_area1_top::before { content: ''; position: absolute; top: -1px; left: -70px; width: 70px; height: 240px; background: url(../images/bg_mypage1.png) no-repeat;} .mysales_area1 li:first-child .mysales_area1_top::before { display: none;} .mysales_area1 .mysales_area1_top > p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-direction: column; height: 145px; color: #666;} .mysales_area1 .mysales_area1_tit { display: block; padding: 35px 0 25px; border-bottom: 1px solid #d8e9e8; font-size: 18px; font-weight: 700; color: #30beb2;} .mysales_area1 .mysales_area1_bottom { margin: 15px 0 0 0; font-size: 12px;} .mysales_area2 { padding: 15px 20px; margin-bottom: 30px; background-color: #ecf9f7;} /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { .mypage_header .label p { margin-right: 10px;} .mypage_header .name strong b { font-size: 20px} .mypage_header .name strong em { font-size: 20px;} .mypage_header .link { width: 345px;} .mypage_header .link li + li { margin-left: 0; padding-left: 0;} .mypage_header .link li + li:before { display: none;} .mypage_header .link li:nth-of-type(1) { margin-bottom: 7px;} .mypage_header .link li:nth-of-type(1), .mypage_header .link li:nth-of-type(4) { width: 105px;} .mypage_header .link li:nth-of-type(2), .mypage_header .link li:nth-of-type(5) { width: 145px;} .mypage_header .link li a { font-size: 12px;} .mypage_cont > .left { display: block; width: 100%;} .mypage_cont > .right { display: block; width: 100%; margin: 20px 0 0 0;} .chatting .owner { width: 80%;} .chatting .guest { width: 80%;} /* myreport */ .myreport .page_head .f_r { float: none;} .myreport_area3 .left { display: block; width: 100%; margin-right: 0;} .myreport_area3 .right { display: block; width: 100%; margin-top: 20px;} .mysales_area1 .mysales_area1_top > p { font-size: 12px;} .mysales_area1 .mysales_area1_top > p * { font-size: 12px;} } /* 모바일만 */ @media screen and (max-width: 800px) { .btn_mypage_mb{display: block;} .mypage > section + section { margin-top: 20px;} .mypage_header { padding: 14px 30px 5px 30px;} .mypage_header .label { display: inline-block; position: static; top: 0; transform: none;} .mypage_header .label p { display: inline-block; margin-right: 4px;} .mypage_header .label p + p { margin-top: 0;} .mypage_header .name { padding-left: 5px;} .mypage_header .name span { display: inline-block; font-size: 16px; line-height: 22px;} .mypage_header .name strong { display: inline-block;} .mypage_header .name strong b { font-size: 16px; line-height: 22px;} .mypage_header .name strong em { font-size: 16px; line-height: 22px;} .mypage_header .link { display: block; position: static; top: 0; right: auto; transform: none; width: 100%; margin-top: 15px;} .mypage_header .link li { width: 50% !important; margin-bottom: 15px !important; } .mypage_header .link li:nth-of-type(1) { margin-bottom: 0;} .mypage_tit { margin-bottom: 10px; font-size: 14px;} .mypage_tit2 { font-size: 16px;} .mypage_title { font-size: 16px;} .mypage_list1 > li + li { margin-top: 0;} .mypage_list1 > li a { font-size: 12px;} .mypage_list1 > li a span { width: 65px; font-size: 10px;} .mypage_more { top: 0;} .mypage_cont .col { padding: 15px 20px 20px;} .mypage_cont .col > div + div { margin-top: 20px;} .mypage_viewitem .viewitem_img { width: 60px; height: 60px;} .mypage_viewitem .viewitem_right { width: calc(100% - 60px);} .mypage_viewitem .viewitem_tit { font-size: 12px;} .mypage_status ul li { height: 90px; padding-top: 20px;} .mypage_status ul li span { font-size: 12px;} .mypage_bar { margin: 20px 0 !important;} .mypage_activity { padding: 15px 20px;} .mypage_activity > .left { display: block; width: 100%;} .mypage_activity > .right { display: block; width: 100%; padding-left: 0; margin-top: 30px;} .mypage_activity > .left ol li > span { width: calc(100% - 70px);} .mypage_activity > .left ol .mypage_activity_bar .bar_box { display: block; width: 100%; margin-top: 10px;} .mypage_activity .mypage_exclamation { display: none;} .mypage_activity .mypage_util { width: 70px; padding-left:0; text-align: right;} .mypage .fit2.per_46 > .fit2 { display: block; width: 100%;} .mypage .fit2.per_46 > input { display: block; width: 100%; margin: 10px 0 0 0;} .area_filetype1 > .search_button { display: block; width: 100%;} .area_filetype1 > .search_button > button { display: block; width: 100%;} .myphoto_area1 { padding: 10px;} .myphoto_area1 dt { display: block; width: 100%;} .myphoto_area1 dd { display: block; width: 100%; font-size: 12px;} /* myreport */ .myreport_box { padding: 10px;} .myreport_search { text-align: left;} .myreport_search span { display: block; font-size: 12px;} .myreport_search .select_box { display: block; width: 100%; margin: 0;} .myreport_search .search_button { display: block; width: 100%; margin: 0;} .myreport_search .search_button button { display: block; width: 100%; margin: 0;} .myreport_area2_top { height: auto; margin-bottom: 10px; text-align: left;} .myreport_area2_top .select_box { display: block; width: 100%; margin: 0;} .myreport_area1 .left { display: block; width: 100%; margin-right: 0;} .myreport_area1_img { display: inline-block; width: 60px; height: 60px;} .myreport_area1 .left .myreport_area1_txt { display: inline-block; margin-left: 10px; vertical-align: top;} .myreport_area1 .left strong { margin: 7px 0 0 0;} .myreport_area1 .right { display: block; width: 100%;} /* Add Product */ .mypage_addinfo_guide { display: block; width: 100%;} .mypage_addinfo_guide a { display: block; width: 100%;} .mypage_addinfo .page_head .page_subtit2 { display: block;} .mypage_addinfo .page_head .f_r { float: none !important; margin-top: 5px;} .mypage_addinfo .fit2.per_73 > :first-child { display: block;width: 100%;} .mypage_addinfo .fit2.per_73 > :last-child { display: block; width: 100%; margin: 10px 0 0 0;} .mypage_addinfo .fit3 > * { display: block; width: 100%;} .mypage_addinfo .fit3 > * + * { margin: 10px 0 0 0;} .mypage_addinfo_area1 > .input { width: calc(100% - 105px);} .mypage_addinfo_area1 > .checks { display: block; width: 100%; margin-bottom: 25px} .mypage_addinfo_area1 > em { width: 100px; font-size: 12px;} .mypage_addinfo_area2 > .input { width: calc(100% - 220px);} .mypage_addinfo_area2 > .checks { display: block; width: 100%; margin-bottom: 15px;} .chatting { padding: 20px;} .chatting > div + div { margin-top: 20px;} .chatting .owner { width: 100%;} .chatting .owner > .chatting_box { display: block; width: 100%; margin-bottom: 10px; font-size: 12px;} .chatting .owner > .chatting_side { display: block; width: 100%; padding-left: 0; text-align: right;} .chatting .owner > .chatting_side i { display: inline-block; vertical-align: top;} .chatting .owner > .chatting_side .date { display: inline-block; margin-top: 0; vertical-align: top;} .chatting .guest { width: 100%;} .chatting .guest > .chatting_box { display: block; width: 100%; margin: 0 0 10px 0; font-size: 12px;} .chatting .guest > .chatting_side { display: block; position: static; width: 100%; padding-left: 0; text-align: left;} .chatting .guest > .chatting_side i { display: inline-block; vertical-align: top;} .chatting .guest > .chatting_side .date { display: inline-block; margin-top: 0; vertical-align: top;} .chatting .chatting_type01 .right a { font-size: 12px;} .chatting_bottom { padding: 10px;} .chatting_bottom > .input { width: calc(100% - 199px); margin: 0 0 10px 10px;} .chatting_bottom > .search_button:nth-of-type(2) { width: calc(100% - 50px);} .chatting_bottom > .search_button:nth-of-type(2) button { display: block; width: 100%;} .detail_total1 { margin-top: 20px;} .detail_total1 em { display: block; font-size: 12px; line-height: 30px;} .detail_total1 em + em { margin: 0; padding: 0;} .detail_total1 em + em::before { display: none;} .mysales_area1 { margin: 20px 0;} .mysales_area1 li { width: 50%; } .mysales_area1 li + li { margin-left: 0; } .mysales_area1 .mysales_area1_tit { padding: 30px 0 20px; font-size: 15px;} .mysales_area1 .mysales_area1_top { height: 200px; } .mysales_area1 li:nth-child(2n-1) .mysales_area1_top { padding: 0 40px 0 20px;} .mysales_area1 li:nth-of-type(2) .mysales_area1_top { border-right: 1px solid #30beb2;} .mysales_area1 li:nth-of-type(3) .mysales_area1_top { border-left: 1px solid #30beb2;} .mysales_area1 li .mysales_area1_top::before { left: -41px; width: 41px; height: 200px; background: url(../images/bg_mypage2.png) no-repeat;} .mysales_area1 li:nth-of-type(3) .mysales_area1_top::before { display: none; } .mysales_area1 .mysales_area1_top > p { height: 115px;} .mysales_area1 .mysales_area1_bottom { margin: 15px 0;} .mysales_area2 { padding: 10px 15px; margin-bottom: 20px; } } /* ==================== corona ==================== */ .cor .cor_visual { display: block; width: 100%; height: auto; background-color: #e7f5fe; text-align: right;} .cor .cor_visual img { width: 90%; height: auto;} .cor .search_button { margin-top: 30px; text-align: left;} .cor .cor_inner { width: 80%; margin: 0 auto; padding: 100px 0 120px;} .cor .cor_item1_go { display: block; position: relative; top: 0; margin: 40px auto 0; animation: corgo 1s ease-in-out infinite;} .cor .cor_desc { margin: 0 auto; font-size: 24px; text-align: center;} .cor .cor_num { font-size: 100px; font-weight: 500; line-height: 1.2; color: #30beb2;} .cor .cor_tit { font-size: 40px; font-weight: 500; line-height: 1.2;} .cor .cor_tit b { font-size: 70px; font-weight: 700; line-height: 1.2;} .cor .cor_subtit { margin: 10px 0 20px; font-size: 30px; font-weight: 500;} .cor .bullet2 > li { font-size: 18px;} .cor .bullet2 > li::before { top: 13px;} .cor .cor_item1 { display: block; margin: 40px auto 80px;} .cor .cor_item2 { display: block; padding: 50px 0; background-color: #30beb2; text-align: center;} .cor .cor_item2 strong { display: inline-block; position: relative; padding-left: 70px; font-size: 35px; font-weight: 700; color: #fff;} .cor .cor_item2 strong::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; background: url(../images/cor_icon1.png) no-repeat;} .cor .cor_item2 span { display: inline-block; font-size: 18px; line-height: 1; color: #fff;} .cor .cor_item3_inner { width: 80%; margin: 50px auto 80px;} .cor .cor_item4 { background-color: #ecf9f7;} .cor .cor_item4 > div { font-size: 0;} .cor .cor_item4_left { display: inline-block; width: 640px; padding-left: 90px; vertical-align: top;} .cor .cor_item4_left * { color: #30beb2;} .cor .cor_item4_right { display: inline-block; width: calc(100% - 640px);} .cor .cor_header { position: relative;} .cor .cor_header.is_scrollfix { display: block; position: fixed; top: 0; z-index: 1; width: 100%;} .cor .cor_header.is_scrollfix .cor_item2 { padding: 25px 0;} .cor .cor_section.cor_section1 .cor_inner { background: url(../images/cor_bg1.png) no-repeat right center;} .cor .cor_section.cor_section2 { background-color: #f1fbfa; text-align: right;} .cor .cor_section.cor_section2 .cor_inner { background: url(../images/cor_bg2.png) no-repeat left center;} .cor .cor_section.cor_section2 .search_button { text-align: right;} .cor .cor_section.cor_section3 { background-color: #e4f5f2;} .cor .cor_section.cor_section3 .cor_inner { background: url(../images/cor_bg3.png) no-repeat right center;} .cor .cor_keyword { position: relative; margin-top: 70px; font-size: 0;} .cor .cor_keyword::after { display: block; clear: both; content: '';} .cor .cor_keyword > .left { display: inline-block; width: 55%; border: 1px solid #dbe2f5; vertical-align: top;} .cor .cor_keyword .middle { display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 140px; text-align: center;} .cor .cor_keyword > .right { display: inline-block; float: right; width: calc(45% - 140px); border: 1px solid #dbe2f5; vertical-align: top;} .cor .cor_keyword .cor_keyword_tit { padding: 15px 0; background-color: #dbe2f5; text-align: center;} .cor .cor_keyword .cor_keyword_tit strong { font-size: 30px; font-weight: 700;} .cor .cor_keyword .cor_keyword_tit span { margin: 0 5px; font-size: 30px; font-weight: 500;} .cor .cor_keyword .cor_keyword_tit em { font-size: 24px; } .cor .cor_keyword .cor_keyword_cont { position: relative; width: 100%; height: 420px;} .cor .cor_keyword .cor_keyword_cont img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%;} .cor_tab { font-size: 0;} .cor_tab li { display: inline-block; position: relative; height: 60px; background: #e9edf7; font-size: 16px; line-height: 60px; text-align: center; color: #fff; cursor: pointer; vertical-align: top;} .cor_tab li:nth-child(1) { width: 40%;} .cor_tab li:nth-child(2) { width: 20%;} .cor_tab li:nth-child(3) { width: 40%;} .cor_tab li span { display: block; height: 60px; } .cor_tab li:nth-child(1) span { padding-right: 25%; text-align: right;} .cor_tab li:nth-child(2) span { padding-left: 12px;} .cor_tab li:nth-child(3) span { padding-left: 25%; text-align: left;} .cor_tab li span a { font-size: 16px; color: #666; } .cor_tab li span b { font-size: 25px; font-weight: 700; color: #666; } .cor_tab .tri { position: absolute; top: 0px; right: -60px; z-index: 9; width: 0; height: 0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right: 30px solid transparent; border-left: 30px solid #e9edf7;} .cor_tab .selected, .cor_tab li:hover, .cor_tab li.selected { background: #819cec !important;} .cor_tab .selected .tritri, .cor_tab li:hover .tri, .cor_tab li.selected .tri { border-top: 30px solid transparent; border-bottom:30px solid transparent; border-right: 30px solid transparent; border-left: 30px solid #819cec;} .cor_tab li.selected b, .cor_tab li.selected a, .cor_tab li:hover b, .cor_tab li:hover a { color: #fff;} @keyframes corgo { 0%, 100% {top: 0;} 50% {top: 20px;} } /* ==================== deliverytracking ==================== */ .deliverytracking { font-size: 0;} .deliverytracking > .left { display: inline-block; width: calc(100% - 484px); margin-right: 24px; vertical-align: top;} .deliverytracking > .right { display: inline-block; width: 460px;} .deliverytracking > .bottom { display: block; width: 100%; margin-top: 50px;} .deliverytracking .page_subtit { margin-bottom: 20px;} .deliverytracking .deliverytracking_item1 { font-size: 0;} .deliverytracking .deliverytracking_item1 > li { position: relative; margin-bottom: 30px; padding-bottom: 45px;} .deliverytracking .deliverytracking_item1 > li::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 28px; height: 16px; background: url(../images/deliverytracking_icon1.png) no-repeat ;-webkit-transform: translateX(-50%); transform: translateX(-50%);} .deliverytracking .deliverytracking_item1 > li:last-child::before { display: none;} .deliverytracking .deliverytracking_item1 > li > dl dt { margin-bottom: 7px; padding: 13px 10px; border: 1px solid #30beb2; border-radius: 3px; font-weight: 500; color: #30beb2; text-align: center;} .deliverytracking .deliverytracking_item1 > li > dl dt * { font-weight: 500;} .deliverytracking .deliverytracking_item1 > li > dl dd { line-height: 1.3;} .deliverytracking .deliverytracking_item1 > li > dl dd > * + * { margin-top: 5px;} .deliverytracking .deliverytracking_item1 > li > dl dd p.pcolor1 { font-size: 12px; line-height: 1.3;} .deliverytracking .deliverytracking_item1 > li > dl dd div { font-size: 12px; line-height: 1.5; color: #666;} .deliverytracking .deliverytracking_item3 { padding: 20px; border: 1px solid #e5e5e5;} .deliverytracking .deliverytracking_item3 > li { font-size: 0;} .deliverytracking .deliverytracking_item3 > li + li { margin-top: 20px;} .deliverytracking .deliverytracking_item3 > li .deliverytracking_item3_txt { display: inline-block; width: calc(100% - 100px); line-height: 1.3; vertical-align: middle; } .deliverytracking .deliverytracking_item3 > li .search_button { display: inline-block; width: 100px;} .deliverytracking .deliverytracking_item3 > li .search_button * { width: 100%;} /* slider_youmay */ .youmay_wrap { position: relative;} .youmay_wrap .slider_youmay { font-size: 0;} .youmay_wrap .slider_youmay li { display: inline-block;} .youmay_wrap .slider_youmay_img { display:block; position: relative; width: 100%; border: 1px solid #e5e5e5; cursor: pointer;} .youmay_wrap .slider_youmay_img:before { display: block; content: ''; padding-top: 100%;} .youmay_wrap .slider_youmay_img img { position: absolute; top: 50%; left: 50%; max-width: 99%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .youmay_wrap .slider_youmay_tit { display: inline-block; width: 100%; height: 38px; margin: 7px 0 10px; overflow: hidden; line-height: 1.3; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .youmay_wrap .slider_youmay_num { font-weight: 700;} .youmay_wrap .bx_prev.youmay_prev { margin-top: -50px;} .youmay_wrap .bx_next.youmay_next { margin-top: -50px;} /* ==================== exhibition ==================== */ .exhibition_inner { width: 1440px; margin: 0 auto; font-size: 0;} /* ==================== regional ==================== */ .regional { margin-bottom: 30px;} .regional .page_head { display: block; margin: 70px 0 40px;} .regional_section1 { display: block; overflow: hidden; width: 100%; margin-top: 30px; font-size: 0;} .regional_section1 > .left { display: inline-block; position: relative; width: 580px; vertical-align: top;} .regional_section1 > .right { display: inline-block; position: relative; width: calc(100% - 600px); margin-left: 20px;} .regional_section1 > .right .exhall_wrap { overflow: hidden; padding-bottom: 70px;} .exhall_wrap .bx-viewport { overflow: visible !important;} .exhall_wrap .slider_exhall { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall > li > img { width: 100%;} .exhall_wrap .slider_exhall > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall > li .exhall_province { position: relative; top: -15px; left: -20px; display: inline-block; padding: 4px 15px; background-color: #30beb2; font-size: 16px; font-weight: 500;} .exhall_wrap .slider_exhall > li .exhall_tit { margin-top: 10px; font-size: 24px; font-weight: 700; line-height: 1.4; word-break: break-word; display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .exhall_wrap .slider_exhall > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall > li .exhall_desc > div { display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.7;} .exhall_wrap .exhall_box { display: block; position: absolute; left: 50%; bottom: 0; width: 90px; height: 20px; margin-left: -130px; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .exhall_wrap .exhall_box .exhall_direction::after { display: block; clear: both; content: '';} .exhall_wrap .exhall_box .exhall_direction > div { position: relative; display: inline-block; width: 20px; height: 20px;} .exhall_wrap .exhall_box .exhall_direction > div > a { display: block; width: 100%; height: 100%; font-size: 0;;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next { float: right;} .exhall_wrap .exhall_box .exhall_direction > div > a:before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 1.5px solid #ccc; border-right: 1.5px solid #ccc;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev a:before { -webkit-transform: translate(-50%,-50%) rotate(-135deg); transform: translate(-50%,-50%) rotate(-135deg); margin-left: 10%;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_direction > div > a:hover:before { border-top: 1.5px solid #30beb2; border-right: 1.5px solid #30beb2;} .exhall_wrap .exhall_box .exhall_counter { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_cate { display: block; margin: -12px; font-size: 0;} .exhall_cate li { display: inline-block; width: 33.333%; padding: 12px; vertical-align: top;} .exhall_cate li a { display: block; position: relative; width: 100%; height: 100%;} .exhall_cate li .exhall_cate_top { position: relative; width: 100%; height: 200px; overflow: hidden; border: 1px solid #e5e5e5; } .exhall_cate li .exhall_cate_top > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; height: 100%;} .exhall_cate li .exhall_cate_top > div strong { position: relative; padding-left: 100px; font-size: 24px; font-weight: 700; line-height: 1.4; color: #666;} .exhall_cate li strong::before { content: ''; position: absolute; top: 50%; left: 0; width: 70px; height: 70px; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .exhall_cate li.exhall_cate1 strong::before { background: url(../images/icon_exhall.png) no-repeat;} .exhall_cate li.exhall_cate2 strong::before { background: url(../images/icon_exhall.png) no-repeat -70px 0;} .exhall_cate li.exhall_cate3 strong::before { background: url(../images/icon_exhall.png) no-repeat -140px 0;} .exhall_cate li.exhall_cate4 strong::before { background: url(../images/icon_exhall.png) no-repeat 0 -70px;} .exhall_cate li.exhall_cate5 strong::before { background: url(../images/icon_exhall.png) no-repeat -70px -70px;} .exhall_cate li.exhall_cate6 strong::before { background: url(../images/icon_exhall.png) no-repeat -140px -70px;} .exhall_cate li .exhall_box { margin: 10px 0 20px } .exhall_cate li .exhall_box p { font-size: 16px; } /* 지도 map_svg 운영팀에서 가져온것 */ .map_svg .OUTLINE { stroke-linejoin: round; stroke: #ffffff; stroke-width: 1;} .map_svg #CD11 { fill: #f1c40f;} .map_svg #CD26 { fill: #16a085;} .map_svg #CD27 { fill: #f39c12;} .map_svg #CD28 { fill: #2ecc71;} .map_svg #CD29 { fill: #e67e22;} .map_svg #CD30 { fill: #27ae60;} .map_svg #CD31 { fill: #d35400;} .map_svg #CD36 { fill: #3498db;} .map_svg #CD41 { fill: #e74c3c;} .map_svg #CD42 { fill: #2980b9;} .map_svg #CD43 { fill: #c0392b;} .map_svg #CD44 { fill: #9b59b6;} .map_svg #CD45 { fill: #8e44ad;} .map_svg #CD46 { fill: #34495e;} .map_svg #CD47 { fill: #2c3e50;} .map_svg #CD48 { fill: #1abc9c;} .map_svg #CD50 { fill: #f1c40f;} .map_svg .TEXT { fill: #fff; font-size: 16px; font-weight: 700; text-anchor: middle; alignment-baseline: middle;} .map_svg path.OUTLINE { fill: #c1d5d3 !important; cursor: pointer;} .map_svg path.OUTLINE { transition: all 0.25s;} .map_svg text { cursor: default;} .map_svg .area_n:hover path.OUTLINE { fill: #32beb2 !important;} .map_list { display: none; font-size: 0; border: solid #30beb2; border-width: 1px 0 0 1px;} .map_list > li { display: inline-block; width: 33.333%; border: solid #30beb2; border-width: 0 1px 1px 0;} .map_list > li a { display: block; padding: 13px 0; text-align: center; color: #30beb2;} .map_list > li.is_active { background-color: #30beb2;} .map_list > li.is_active a { color: #fff;} /* ==================== projectex ==================== */ .projectex_visual_inner { display: block; overflow: hidden;} .projectex_visual_wrap { position: relative; width: 1440px; margin: 80px auto} .projectex_visual_wrap .bx-viewport { overflow: visible !important;} .projectex_visual_wrap .bx-wrapper { max-width: auto !important;} .projectex_visual { background-color: lightyellow; text-align: center; margin: 0 auto;} .projectex_visual li { position: relative;} .projectex_visual > li[aria-hidden="true"] { opacity: 0.4;} .projectex_visual li > a { display: block; width: 100%; height: 100%;} .projectex_visual_box { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .projectex_visual_box .projectex_visual_tag { display: inline-block; padding: 5px 30px; border: 1px solid #fff; border-radius: 20px; font-size: 18px; font-weight: 500; color: #fff;} .projectex_visual_box .projectex_visual_tit { display: block; margin: 30px 0; font-size: 50px; font-weight: 700; line-height: 1.4; color: #fff;} .projectex_visual_box .projectex_visual_date{ display: block; font-size: 20px; font-weight: 500; color: #fff;} .projectex_bestmonth { display: block; margin: 0 auto 50px; background-color: #30beb2; } .projectex_bestmonth > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; padding: 20px 0 27px; text-align: center;} .projectex_bestmonth .left { display: inline-block; margin-right: 50px;} .projectex_bestmonth .left b { display: block; font-size: 100px; font-weight: 700; line-height: 1; color: rgba(255,255,255,0.7); } .projectex_bestmonth .left span { display: block; font-size: 24px; font-weight: 700; color: rgba(255,255,255,0.7); } .projectex_bestmonth .right { display: inline-block; text-align: left; vertical-align: top;} .projectex_bestmonth .right .right_tit { display: block; margin-bottom: 10px; font-size: 30px; font-weight: 700; color: #fff; } .projectex_bestmonth .right .right_desc { display: block; font-size: 16px; line-height: 1.5; color: #fff; } .projectex .tab_button_outer { margin-bottom: 40px; text-align: center;} .card { margin: -12px; font-size: 0;} .card > li { display: inline-block; position: relative; width: 33.333%; padding: 12px; vertical-align: top;} .card > li .card_tag1 { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; font-weight: 500; color: #fff; background-color: #7395f7;} .card > li .card_tag2 { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; font-weight: 500; color: #fff; background-color: #f680b5;} .card > li .card_tag3 { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; font-weight: 500; color: #fff; background-color: #bbbbbb;} .card > li .card_img { display: block; margin-bottom: 10px; border: 1px solid #e5e5e5; background-color: #fff;} .card > li .card_img a { display: block; overflow: hidden; position: relative; width: 100%; } .card > li .card_img a::before { display: block; content: ''; padding-top: 100%;} .card > li .card_img a img { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .card > li .card_box { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #e5e5e5;} .card .card_tit { font-size: 20px; font-weight: 700; } .card .card_date { margin: 10px 0; font-weight: 500; } .card .card_desc { line-height: 1.5; color: #666; } .card_area { margin-top: 35px;} .card_area > p { margin-bottom: 10px; font-size: 16px; font-weight: 500; } .card_area > ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0;} .card_area > ul li + li { margin-top: 20px;} .card_area > ul li > .left { display: inline-block; overflow: hidden; position: relative; width: 100px; height: 100px; border: 1px solid #e5e5e5;} .card_area > ul li > .left img { display: block; position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .card_area > ul li > .right { display: inline-block; width: calc(100% - 100px); padding-left: 20px;} .card_area > ul li > .right strong { display: block; font-weight: 500} .card_area > ul li > .right span { display: block; } /* 1440px 이하 공통*/ @media screen and (max-width: 1440px) { /* ==================== corona ==================== */ .cor .cor_inner { width: 90%; } .cor .cor_num { font-size: 90px;} .cor .cor_tit b { font-size: 60px;} .cor .cor_tit { font-size: 30px;} .cor .cor_subtit { font-size: 20px;} .cor .cor_desc { font-size: 22px;} .cor .bullet1 > li { font-size: 16px;} .cor .cor_item3_inner { width: 90%; margin: 50px auto;} .cor .cor_item4_left { display: block; width: 100%; padding-left: 0; text-align: center;} .cor .cor_item4_right { display: block; width: 100%; text-align: center;} .cor .cor_item4 .search_button { text-align: center;} .cor .cor_section.cor_section1 .cor_inner { background-size: 470px auto;} .cor .cor_section.cor_section2 .cor_inner { background-size: 300px auto;} .cor .cor_section.cor_section3 .cor_inner { background-size: 450px auto;} .cor .cor_keyword > .left { display: block; width: 100%;} .cor .cor_keyword > .right { display: block; width: 100%;} .cor .cor_keyword .middle { display: block; position: static; top: 0; transform: none; width: 100%; margin: 30px auto;} .cor_tab li:nth-child(1) { width: 33%;} .cor_tab li:nth-child(2) { width: 30%;} .cor_tab li:nth-child(3) { width: 37%;} .cor_tab li:nth-child(1) span { padding-right: 30px;} .cor_tab li:nth-child(2) span { padding-left: 20px;} .cor_tab li:nth-child(3) span { padding-left: 60px;} /* ==================== deliverytracking ==================== */ .deliverytracking > .left { width: calc(100% - 414px);} .deliverytracking > .right { width: 390px;} .deliverytracking .deliverytracking_item3 > li .deliverytracking_item3_txt { display: block; width: 100%; } .deliverytracking .deliverytracking_item3 > li .search_button { display: block; width: 100%; margin-top: 10px; } .exhibition_inner{width: 100%; padding: 0 20px;} /* ==================== regional ==================== */ .regional_section1 > .left { width: 50%;} .regional_section1 > .right { width: calc(50% - 20px);} .exhall_wrap .slider_exhall > li .exhall_item { height: 220px;} .exhall_wrap .slider_exhall > li .exhall_tit { font-size: 20px;} .exhall_wrap .slider_exhall > li .exhall_desc * { font-size: 12px;} .exhall_wrap .bx-viewport { overflow: hidden !important;} .exhall_wrap .slider_exhall > li[aria-hidden="true"] .exhall_desc { display: block;} .exhall_cate li .exhall_box p { font-size: 14px; } .exhall_cate li .exhall_cate_top { height: 150px;} .exhall_cate li .exhall_cate_top > div strong { font-size: 18px;} /* ==================== projectex ==================== */ .projectex_visual_wrap { width: 100%; margin: 40px auto; padding: 0 20px;} .projectex_visual_wrap .bx-viewport { overflow: hidden !important;} .projectex_visual > li[aria-hidden="true"] { opacity: 1;} .projectex_visual_box .projectex_visual_tag { font-size: 16px;} .projectex_visual_box .projectex_visual_tit { margin: 15px 0; font-size: 40px;} .projectex_visual_box .projectex_visual_date{ font-size: 18px;} .projectex_bestmonth { margin: 0 auto 40px;} .projectex_bestmonth > a { padding: 20px 20px 27px;} .projectex_bestmonth .left b { font-size: 80px;} .projectex_bestmonth .left span { font-size: 20px;} .projectex_bestmonth .right .right_tit { margin-bottom: 5px; font-size: 24px;} .card .card_tit { font-size: 18px;} } /* 모바일만 */ @media screen and (max-width: 800px) { /* ==================== corona ==================== */ .cor .search_button { margin-top: 20px;} .cor .cor_inner { width: calc(100% - 40px); padding: 30px 0 50px;} .cor .cor_num { margin-bottom: 15px; font-size: 60px;} .cor .cor_desc { font-size: 16px;} .cor .cor_tit { font-size: 20px;} .cor .cor_tit b { font-size: 35px;} .cor .cor_subtit { margin: 5px 0 15px; font-size: 16px;} .cor .bullet2 > li { font-size: 14px;} .cor .cor_item1 { margin: 30px auto 50px;} .cor .cor_item1_inner { width: calc(100% - 40px); margin: 0 auto;} .cor .cor_item1_go { margin: 20px auto 0;} .cor .cor_item2 { padding: 10px 0 15px;} .cor .cor_header.is_scrollfix .cor_item2 { padding: 10px 0 15px;} .cor .cor_item2 strong { padding-left: 35px; font-size: 24px;} .cor .cor_item2 span { display: block; font-size: 14px;} .cor .cor_item2 strong::before { top: 6px; left: 0; width: 25px; height: 28px; background-size: 100% auto;} .cor .cor_item3_inner { width: calc(100% - 40px); margin: 30px auto; } .cor .cor_section.cor_section1 .cor_inner { padding-bottom: 250px; background: url(../images/cor_bg1.png) no-repeat right 92%; background-size: 300px auto; } .cor .cor_section.cor_section2 .cor_inner { padding-bottom: 300px; background: url(../images/cor_bg2.png) no-repeat left 92%; background-size: 200px auto; } .cor .cor_section.cor_section3 .cor_inner { padding-bottom: 260px; background: url(../images/cor_bg3.png) no-repeat right 92%; background-size: 280px auto; } .cor .cor_keyword { margin-top: 40px;} .cor .cor_keyword .cor_keyword_cont { height: 200px;} .cor .cor_keyword .cor_keyword_tit { padding: 12px 0;} .cor .cor_keyword .cor_keyword_tit strong { font-size: 22px;} .cor .cor_keyword .cor_keyword_tit span { font-size: 22px;} .cor .cor_keyword .cor_keyword_tit em { font-size: 18px;} .cor .cor_keyword .middle { margin: 20px auto;} .cor .cor_keyword .middle img { width: 32px;} .cor_tab li span a { display: block; padding: 12px 0; font-size: 12px; line-height: 1.2; } .cor_tab li span b { display: block; font-size: 18px; line-height: 1.2; } /* ==================== deliverytracking ==================== */ .deliverytracking > .left { display: block; width: 100%; margin-right: 0;} .deliverytracking > .right { display: block; width: 100%;} .deliverytracking .deliverytracking_item3 > li .deliverytracking_item3_txt { display: block; width: 100%; } .deliverytracking .deliverytracking_item3 > li .search_button { display: block; width: 100%; margin-top: 10px;} /* ==================== regional ==================== */ .regional .page_head { margin: 0 0 20px;} .regional_section1 { margin-top: 0;} .regional_section1 > .left { display: block; width: 100%;} .regional_section1 > .right { display: block; width: 100%; margin: 20px 0 0 0;} .regional_section1 > .right .exhall_wrap { overflow: visible; padding-bottom: 50px;;} .exhall_wrap .slider_exhall > li .exhall_item_wrap { padding: 0 20px 30px 20px;} .exhall_wrap .slider_exhall > li .exhall_item { width: 200px; left: 20px; height: 200px;} .exhall_wrap .slider_exhall > li .exhall_tit { margin-top:0;} .exhall_wrap .slider_exhall > li .exhall_province { font-size: 14px;} .exhall_wrap .slider_exhall > li .exhall_desc { margin-top: 15px;} .exhall_wrap .bx-viewport { overflow: visible !important;} .exhall_wrap .exhall_box { margin-left: 0;} .regional_section2 { margin-top: 50px;} .exhall_cate li { width: 50%;} .exhall_cate li .exhall_cate_top > div strong { padding: 45px 0 0 0; font-size: 16px; text-align: center;} .exhall_cate li strong::before { top: 0; left: 50%; width: 40px; height: 40px; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .exhall_cate li.exhall_cate1 strong::before { background: url(../images/icon_exhall.png) no-repeat 0 0; background-size: 300% auto;} .exhall_cate li.exhall_cate2 strong::before { background: url(../images/icon_exhall.png) no-repeat -40px 0; background-size: 300% auto;} .exhall_cate li.exhall_cate3 strong::before { background: url(../images/icon_exhall.png) no-repeat -80px 0; background-size: 300% auto;} .exhall_cate li.exhall_cate4 strong::before { background: url(../images/icon_exhall.png) no-repeat 0 -40px; background-size: 300% auto;} .exhall_cate li.exhall_cate5 strong::before { background: url(../images/icon_exhall.png) no-repeat -40px -40px; background-size: 300% auto;} .exhall_cate li.exhall_cate6 strong::before { background: url(../images/icon_exhall.png) no-repeat -80px -40px; background-size: 300% auto;} .exhall_cate li .exhall_box { display: none; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; background-color: rgba(0,0,0,0.7); text-align: center;} .exhall_cate li .exhall_box::after { content: ''; position: relative; bottom: -10px; width: 25px; height: 25px; background: url(../images/exhall_icon2.png) no-repeat;} .exhall_cate li .exhall_box p { font-size: 12px ;color: #fff;} .exhall_cate li a:active .exhall_box, .exhall_cate li a:hover .exhall_box, .exhall_cate li a:focus .exhall_box { display: -webkit-box; display: -ms-flexbox; display: flex;} .map_svg { display: none;} .map_list { display: block;} /* ==================== projectex ==================== */ .projectex_visual_wrap { padding: 0; margin: 0 auto 20px;} .projectex_visual_bg { display: block; overflow: hidden; position: relative; width: 100%; height: 500px; } .projectex_visual_bg::before { display: block; content: ''; padding-top: 100%;} .projectex_visual_bg > img { display: block; position: absolute; top: 50%; left: 50%; max-width: none !important; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .projectex_visual_box { padding: 0 45px; } .projectex_visual_box .projectex_visual_tag { font-size: 12px;} .projectex_visual_box .projectex_visual_tit { margin: 30px 0; font-size: 30px;} .projectex_visual_box .projectex_visual_date{ font-size: 14px;} .projectex_bestmonth { margin: 0 auto 30px;} .projectex_bestmonth > a { flex-direction: column;} .projectex_bestmonth .left { margin-right: 0;} .projectex_bestmonth .left b { font-size: 60px;} .projectex_bestmonth .left span { font-size: 18px;} .projectex_bestmonth .right { text-align: center;} .projectex_bestmonth .right .right_tit { margin: 10px 0; font-size: 20px;} .projectex_bestmonth .right .right_desc { font-size: 12px;} .card > li { display: block; width: 100%;} .card > li .card_box { padding-bottom: 30px; margin-bottom: 10px;} .card .card_date { margin: 5px 0; font-size: 12px;} .card .card_desc { font-size: 12px;} .card_area { margin-top: 25px;} .card_area > ul li > .left { width: 60px; height: 60px;} .card_area > ul li > .right { width: calc(100% - 60px);} .card_area > ul li > .right * { font-size: 12px;} }