/* ==================== 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: 33.3333%; 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; word-break: break-word;} .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 ==================== */ #container .login { display: block; width: 100%; margin-top: 50px; font-size: 0; border: 1px solid #e5e5e5; padding: 35px 45px;} #container .login .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%;} #container .login .login_tit { display: block; font-size: 40px; font-weight: 700;} #container .login .login_tit2 { margin-bottom: 10px; font-size: 16px; color: #30beb2;} #container .login .login_subtit { margin: 30px 0 10px; font-size: 20px; font-weight: 500;} #container .login .login_subtit2 {font-size: 12px;font-weight: 500;} #container .login .login_desc { color: #666;} #container .login .login_desc2 { margin: 25px 0; text-align: center;} #container .login .bullet1 li { color: #666;} #container .login .login_cont { display: inline-block; width: 50%; padding: 20px 0 0 0; vertical-align: top; } #container .login .login_cont .input { border: 1px solid #30beb2;} #container .login .login_cont_box { width: 400px; margin: 0 auto;} #container .login .login_cont .input { margin-bottom: 20px;} #container .login .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;} #container .login .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;} #container .login .login_or { display: block; position: relative; margin: 30px 0; text-align: center; color: #999;} #container .login .login_or::before { content: ''; position: absolute; top: 50%; left: 0; width: 45%; height: 1px; background-color: #bcbcbc; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #container .login .login_or::after { content: ''; position: absolute; top: 50%; right: 0; width: 45%; height: 1px; background-color: #bcbcbc; -webkit-transform: translateY(-50%); transform: translateY(-50%);} #container .login .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;} #container .login .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%);} #container .login .area_securitycode { margin-bottom: 20px;;} #container .login .area_securitycode > div { border: 1px solid #30beb2;} #container .login_new { display: block; width: 80%; height: 100%; margin: 100px auto 50px auto; font-size: 0; font-family: 'Roboto',sans-serif;} #container .login_new .login_header { display: inline-block; width: 60%; height: 330px; vertical-align: top; background: none;} #container .login_new .login_tit { display: block; font-size: 42px; padding: 121px 0 0 0; font-weight: 300; color: #30beb2; text-align: center;} #container .login_new .login_tit span { color: #111; font-size: 42px; font-weight: 700; } #container .login_new .login_tit2 { margin-bottom: 12px; font-size: 20px; color: #333;} #container .login_new .login_subtit { font-size: 20px; color: #3c3c3c; text-align: center;} #container .login_new .login_subtit2 { font-size: 14px; font-weight: 300; margin-bottom: 8px;} #container .login_new .login_desc { color: #666;} #container .login_new .login_desc2 { text-align: right; margin-bottom: 10px; } #container .login_new .login_desc2 span { font-weight: 300; color: #333;} #container .login_new .login_desc2 a { display: inline-block; color: #30beb2; background: #fff; font-weight: 400; width: 93px; height: 30px; border: 1px solid #30BEB2; line-height: 30px; text-align: center; border-radius: 50px; margin-left: 10px; font-size: 13px;} #container .login_new .bullet1 li { color: #666;} #container .login_new .login_cont { display: inline-block; width: 40%; height: inherit; vertical-align: top; } #container .login_new .login_cont input ::placeholder { color: #828282; } #container .login_new .login_cont_box { position: relative; width: 415px; margin: 0 0 0 auto;} #container .login_new .login_cont input { margin-bottom: 10px;height: 50px; background-color: #fff!important;} #container .login_new .login_id{ position: relative;} #container .login_new #login_id{ text-indent: 45px; position: relative;} #container .login_new .login_id_icon{ position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: url(../images/icon/icon_login_member.png) no-repeat; z-index: 1; } #container .login_new #login_pwd{ text-indent: 45px;} #container .login_new .login_pwd_icon{ position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: url(../images/icon/icon_login_password.png) no-repeat; z-index: 1; } #container .login_new .login_cont_box .login_password{ position: relative;} #container .login_new .login_cont_box .login_pw_check { position: absolute; top: 16px; right: 10px; width: 20px; height: 20px; background: url(../images/icon/icon_login_pw_check1.png); cursor: pointer; } #container .login_new .login_cont_box .login_pw_check.check_on { background: url(../images/icon/icon_login_pw_check.png); } #container .login_new .btn_login_sign { display: block; width: 100%; height: 50px; border-radius: 3px; background-color: #30beb2; font-size: 18px; line-height: 50px; text-align: center; color: #fff;} #container .login_new .btn_login_join { position: relative; display: block; width: 100%; height: 50px; border-radius: 3px; background-color: #111111; font-size: 18px; line-height: 50px; text-align: center; color: #fff; margin-top: 20px;} #container .login_new .btn_login_join::before { content: ''; display: inline-block; width: 30px; height: 30px; background: url(../images/icon/icon_login_join.png) no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 25px;} #container .login_new .login_or { display: block; position: relative; margin: 20px 0; text-align: center; color: #999;} #container .login_new .login_or::before { content: ''; position: absolute; top: 50%; left: 0; width: 45%; height: 1px; background-color: #ddd; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #container .login_new .login_or::after { content: ''; position: absolute; top: 50%; right: 0; width: 45%; height: 1px; background-color: #ddd; -webkit-transform: translateY(-50%); transform: translateY(-50%);} #container .login_new .login_cont_box .login_fb { padding-top: 20px; text-align: right;} #container .login_new .login_cont_box .login_fb span { font-size: 16px; color: #111;} #container .login_new .btn_login_face { position: relative; display: inline-block; width: 30%; height: 30px; border-radius: 52px; background: #3a5899; font-size: 13px; font-weight: 400; line-height: 30px; text-align: center; text-indent: 10%; color: #ffffff; margin-left: 10px; letter-spacing: 0px;} #container .login_new .btn_login_face::before { content: ''; position: absolute; top: 50%; left: 15%; width: 16px; height: 18px; background: url(../images/icon/icon_login_fb.png) no-repeat; background-size: cover; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #container .login_new .area_securitycode { margin-bottom: 20px;} #container .login_new .area_securitycode > div { border: 1px solid #30beb2;} /* login join_box */ #container .login_new .join_box { display: none; border-top: 1px solid #BDBDBD;} #container .login_new .join_box .korea_join { font-size: 20px!important; color: #4f4f4f; font-weight: 600; padding-top: 10px;} #container .login_new .join_box .korea_join a { position: relative; font-size: 16px; display: block; width: 100%; height: 50px; line-height: 50px; border-radius: 50px; background: #000; color: #fff; text-indent: 21px; margin-top: 8px;} #container .login_new .join_box .korea_join a::after { content: ''; display: block; position: absolute;top: 50%;transform: translateY(-50%); right: 10px; width: 24px; height: 24px; background: url(../images/icon/icon_login_arrow_right.png) no-repeat;} /* login_new footer */ #container .login_new .login_footer { padding-bottom: 60px; } #container .login_new .login_footer .login_footer_tit { font-size: 16px; font-weight: 400; color: #111; padding: 45px 0 15px;} #container .login_new .login_footer .login_footerwrap { display: flex; justify-content: space-between;} #container .login_new .login_footer .login_footerwrap>div { border-radius: 15px; height: 200px;} #container .login_new .login_footer .login_footerwrap div~div { width: 200px; border: 1px solid #e7e7e7;} /* box1 */ #container .login_new .login_footer .login_box1 { width: 250px; border: none; background: #E4F9F7; padding: 25px 20px;} #container .login_new .login_footer .login_box1 a { position: relative; display: block; } #container .login_new .login_footer .login_box1 a::before{ content: ''; display: block; position: absolute;top: 50%; transform: translateY(-50%); right: 0; width: 14px; height: 14px; background: url(../images/icon/icon_login_con.png);} #container .login_new .login_footer .login_box1 a:hover span{ color: #30beb2; font-weight: 500;} #container .login_new .login_footer .login_box1 a:hover::before{ background: url(../images/icon/icon_login_con1.png);} #container .login_new .login_footer .login_box1 a ~ a{ margin-top: 17px;} #container .login_new .login_footer .login_box1 a span{ font-size: 16px; font-weight: 400px; color: #111;} /* box~box */ #container .login_new .login_footer .login_footerwrap div{position: relative;} #container .login_new .login_footer .login_footerwrap div~div::after{content: ''; display: block; width: 35px; height: 35px; position: absolute; right: 10px; top: 10px;} #container .login_new .login_footer .login_footerwrap div:nth-child(2):after{background: url(../images/icon/icon_login_f1.png);} #container .login_new .login_footer .login_footerwrap div:nth-child(3):after{background: url(../images/icon/icon_login_f2.png);} #container .login_new .login_footer .login_footerwrap div:nth-child(4):after{background: url(../images/icon/icon_login_f3.png);} #container .login_new .login_footer .login_footerwrap div:nth-child(5):after{background: url(../images/icon/icon_login_f4.png);} #container .login_new .login_footer .login_footerwrap div~div p:nth-child(1){ font-size: 35px; font-weight: 600; padding-top: 70px; text-align: center; color: #111;} #container .login_new .login_footer .login_footerwrap div~div p:nth-child(1) span{ font-size: inherit; font-weight: inherit; color: #111;} #container .login_new .login_footer .login_footerwrap div~div p:nth-child(2){ font-size: 16px; line-height: 1.2; font-weight: 400; padding-top: 16px; color: #777; text-align: center; height: 38px;} /* ==================== 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: left;} .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; padding-left:12px; font-size: 18px; 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; padding-left:50px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main_ellipsis1 { display: inline-block; overflow: hidden; width: 450px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .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_ellipsis3 { 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: 1; -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: 55%; height: auto; -webkit-transform: translate(-50%, -50%) scale(1.3); transform: translate(-50%, -50%) scale(1.3);} .main_best_col1 { display: inline-block; width: 500px; margin-right: 25px; 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% - 525px); 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: 23px; margin: 20px 15px 20px 10px; } .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 img { display: inline-block; margin-top: 4px; float:left; width: 25px; height: 25px;} .main_module2 .left { display: inline-block; width: calc(100% - 30px); 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; padding-left: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:before{ content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -20px; background:url(/img/main/btn-top-products.png) no-repeat 0 0; text-indent:-99999px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .main_toppd > li > a.toppd_img1:before {background-position: -5px 0px !important;} .main_toppd > li > a.toppd_img2:before {background-position: -65px 0px !important;} .main_toppd > li > a.toppd_img3:before {background-position: -125px 0px !important;} .main_toppd > li > a.toppd_img4:before {background-position: -185px 0px !important;} .main_toppd > li > a.toppd_img5:before {background-position: -245px 0px !important;} .main_toppd > li > a.toppd_img7:before {background-position: -305px 0px !important;} .main_toppd > li > a.toppd_img8:before {background-position: -365px 0px !important;} .main_toppd > li > a.toppd_img6:before {background-position: -5px -50px !important;} .main_toppd > li > a.toppd_img9:before {background-position: -65px -50px !important;} .main_toppd > li > a.toppd_img10:before {background-position: -125px -50px !important;} .main_toppd > li > a.toppd_img11:before {background-position: -245px -50px !important;} .main_toppd > li > a.toppd_img12:before {background-position: -365px -50px !important;} .main_toppd > li > a.toppd_img13:before {background-position: -185px -50px !important;} .main_toppd > li > a.toppd_img14:before {background-position: -305px -50px !important;} /* .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 { display:none} .main_best_col4 { width: 100%} .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;} #container .login_cont_box { width: calc(100% - 45px); margin: 0 0 0 45px;} .allcate_list > li { width: 25%;} } @media screen and (max-width: 1439px) { /*login_new 1024*/ #container .login_new { width:90%;} #container .login_new .login_cont_box .login_fb span{text-align: right;} #container .login_new .login_cont_box { width: calc(100% - 45px); margin: 0 0 0 45px;} } @media screen and (max-width: 1024px) { /*login_new 1024*/ #container .login_new .login_footer .login_footerwrap>div{ height:170px;} #container .login_new .login_footer .login_box1 { width: 200px; padding: 17px 20px; } #container .login_new .login_footer .login_box1 a span { font-size:13px;} #container .login_new .login_footer .login_box1 a ~ a { margin-top:15px;} #container .login_new .login_footer .login_footerwrap div~div { width: 150px;} #container .login_new .login_footer .login_footerwrap div~div p:nth-child(1){ font-size: 26px; padding-top:55px;} #container .login_new .login_footer .login_footerwrap div~div p:nth-child(2){ font-size: 12px;} } /* 로그인만 834 */ @media screen and (max-width: 834px) { #container .login_new { padding: 0; width:100%; margin-top: 0; border: none;} #container.login_mob { background: #f2f2f2;} #container .login_new .login_header { margin: 0;width: 100%; height: inherit;} #container .login_new .login_header h3 { padding: 0; font-size: 28px; padding: 20px 0 16px;} #container .login_new .login_header .login_tit span{ font-size: inherit;} #container .login_new .login_header .login_subtit { display: none;} #container .login_new .login_cont { display: block; width: 100%; padding: 0;} #container .login_new .login_cont_box { width: 100%; margin: 0;} #container .login_new .login_cont .input { margin-bottom: 8px;} #container .login_new .login_desc2 { margin: 0 0 16px; font-size: 12px; text-align: right; } #container .login_new .login_desc2 span { display: inline-block; } #container .login_new .login_cont_box .login_fb {text-align: left;} #container .login_new .btn_login_sign { font-size: 16px;} #container .login_new .btn_login_join { display: none;} #container .login_new .join_box { display: block; margin-top: 24px;} #container .login_new .join_box .btn_login_join { display: block; font-size: 14px;} #container .login_new .btn_login_face { width: 100%; margin: 0; border-radius: 3px ; height: 50px; line-height: 50px; font-size: 16px; text-align: center; text-indent: 0;} #container .login_new .login_fb span { text-align: left!important;} #container .login_new .btn_login_face::before { width: 24px; height: 30px; left: 35px;} #container .login_new .korea_join { font-size: 14px!important; } #container .login_new .login_or { margin: 20px 0;} #container .login_new .login_footer { display: none;} } /* 모바일만 */ @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;} #container .login { padding: 0; margin-top: 0; border: none;} #container .login .login_header { display: none;} #container .login .login_cont { display: block; width: 100%; padding: 0;} #container .login .login_cont_box { width: 100%; margin: 0;} #container .login .login_cont .input { margin-bottom: 20px;} #container .login .login_tit2 { font-size: 14px;} #container .login .login_desc2 { margin: 20px 0; font-size: 12px;} #container .login .btn_login_sign { font-size: 14px;} #container .login .btn_login_join { font-size: 14px;} #container .login .btn_login_face { font-size: 14px;} #container .login .btn_login_face::before { margin-left: -80px} #container .login .login_or { margin: 20px 0;} /* login_new */ #container .login_new { padding: 0; width:100%; margin-top: 0; border: none;} #container.login_mob { background: #f2f2f2;} #container .login_new .login_header { margin: 0;width: 100%; height: inherit;} #container .login_new .login_header h3 { padding: 0; font-size: 28px; padding: 20px 0 16px;} #container .login_new .login_header .login_tit span{ font-size: inherit;} #container .login_new .login_header .login_subtit { display: none;} #container .login_new .login_cont { display: block; width: 100%; padding: 0;} #container .login_new .login_cont_box { width: 100%; margin: 0;} #container .login_new .login_cont .input { margin-bottom: 8px;} #container .login_new .login_desc2 { margin: 0 0 16px; font-size: 12px; text-align: right; } #container .login_new .login_desc2 span { display: inline-block; } #container .login_new .login_cont_box .login_fb {text-align: left;} #container .login_new .btn_login_sign { font-size: 16px;} #container .login_new .btn_login_join { display: none;} #container .login_new .join_box { display: block; margin-top: 24px;} #container .login_new .join_box .btn_login_join { display: block; font-size: 14px;} #container .login_new .btn_login_face { width: 100%; margin: 0; border-radius: 3px ; height: 50px; line-height: 50px; font-size: 16px; text-align: center; text-indent: 0;} #container .login_new .login_fb span { text-align: left!important;} #container .login_new .btn_login_face::before { width: 24px; height: 30px; left: 35px;} #container .login_new .korea_join { font-size: 14px!important; } #container .login_new .login_or { margin: 20px 0;} #container .login_new .login_footer { display: none;} /* ==================== 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_input:disabled{ cursor:default;} .file .file_input:disabled + span{ background-color: #f5f5f5;} .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: 14px; 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: 14px; height: 14px; margin: 0 10px 0 0; border: 2px solid #777e9d; 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: 14px; height: 14px; margin: 0; border: 2px solid #777e9d; 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; } .btn3 { background-color: #30beb2; border: 1px solid #30beb2; border-radius: 2px; color: #fff; margin-top:5px; margin-bottom:5px; margin-right:5px; padding:5px;} .btn4 { background-color: #30beb2; border: 1px solid #30beb2; border-radius: 2px; color: #fff; padding:12px; vertical-align: middle;} .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;} .search_button.is_big a, .search_button.is_big button { margin:0 !important;} .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 ==================== */ .mainWrap .contents_inner { padding-top:0;} .contents_inner { width: 1440px; margin: 15px auto 100px; font-size: 0; padding-top:180px;} .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_tit3 { margin-left: 20px; font-size: 25px; font-weight: 700; } .page_tit4 { font-size: 60px; 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%;} .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;} /* 2021-12-21 FAQ */ .bullet4 > li * { font-size:14px !important; line-height:1.6 !important; font-family: 'Noto Sans KR' !important;} .bullet4 > li b { font-weight:bold;} .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 .depth4 { display: none; margin: 10px 0 10px; } .lnb .depth4 > li + li { margin-top: 5px;} .lnb .depth_btn { display: block; position: relative; padding: 9px 0; width: 100%; max-height: 62px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -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: 17px; width: 100%; max-height: 85px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; /* -webkit-line-clamp: 1; */ -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: 21px; right: 2px; width: 8px; height: 8px; 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: 25px; 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 9px; font-size: 16px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -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: 12px; 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: 5px; width: 2px; height: 12px; 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 { display: block; overflow: hidden; position: relative; padding: 0 15px 0 18px; font-size: 14px; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .lnb .depth3_ico { position: absolute; top: 0; right: 0; width: 20px; height: 22px; font-size: 0;} .lnb .depth3_ico::before { content: ''; position: absolute; top: 10px; right: 0; width: 8px; height: 1px; background-color: #444; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.2s;} .lnb .depth3_ico::after { content: ''; position: absolute; top: 10px; right: 3px; width: 1px; height: 8px; background-color: #444; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.2s;} .lnb .is_active > .depth3 { display: block;} /* .lnb .is_active > .depth3_btn { font-weight: 500; color: #30beb2;} */ .lnb .is_active > .depth3_ico::after { display: none;} .lnb .is_active > .depth3_ico::before { background-color: #30beb2;} /* depth4_btn */ .lnb .depth4_btn { position: relative; display: block; font-size: 12px; padding: 0 15px 0 32px;} .lnb .depth4_btn::before { display: none; content: ''; position: absolute; bottom: 0; right: 0; left: 0; width: 100%; height:1px; background-color: #30beb2;} .lnb .depth4_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 > .depth4 { display: block;} .lnb .is_active > .depth4_btn { font-weight: 500; color: #30beb2;} .lnb .is_active > .depth4_btn::before { display: block;} /* .lnb .is_active > .depth4_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 .depth1_btn2 { display: block; position: relative; padding: 9px 15px 9px 0; font-size: 14px;} .lnb_filter .depth1_btn2::before { content: ''; position: absolute; right: 0; top: 17px; width: 4px; height: 4px; -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; padding: 0 20px;} .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: 25px; 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%); object-fit: contain;/*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 .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .list_type01 .overflow *:first-child { overflow:hidden; display:block; text-overflow: ellipsis; white-space: nowrap;} .list_type01 .overflow * + * { display:none;} .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; padding-left: 10px;} .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;bottom: 0;left: 50%; max-width: 100%;height: 135px; transform:translateX(-50%)} .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: 50px;} .buying_list.list_type01 > ul > li { height: 200px;} .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; padding-top:180px;overflow-x:hidden;} .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; padding: 0 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) { .contents_inner { padding-top:120px;} .page_tit { font-size: 20px;} .page_tit2 { font-size: 25px;} .page_tit4 { font-size: 45px;} .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: 105px; right: 0; z-index: 1002; 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;} .other_site_aside {display:none; !important;} .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 { padding: 0 10px;} .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 { overflow:auto hidden; display: flex; align-items:center; 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%; flex:0 0 auto;} .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;} /* 2022-06-30 */ .sortby { display: flex; padding: 0 10px;} .sortby > .search_sortby.button { display:none; } .sortby > .select_sortby { width: 100%; margin: 0 10px 0 0;} .sortby > .sort { display: flex;} .btn_filter_mb { display: inline-block;} .area_banner_pd .page_subtit { text-align: center;} /* .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: 30px; 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: 340px; left: 0; z-index: 2; width: 40px; height: 40px; background-color: rgba(0,0,0,0.2); font-size: 0; cursor: pointer;} .pdimage_prev::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; 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: 340px; right: 0; z-index: 2; width: 40px; height: 40px; background-color: rgba(0,0,0,0.2); font-size: 0; cursor: pointer;} .pdimage_next::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; 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 { margin: 0px auto 0px; 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 { width:100% !important; position: relative; padding: 0 0 0 10px;} .pd_summary_inner .pd_tit { overflow: visible; white-space: normal; } .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: 29px; 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_option2 { min-height: 250px;} .pd_option2 strong { padding: 2px 5px; background-color: #30beb2; font-size: 16px; color: #fff; vertical-align: top;} .pd_option2 dl { display: block; font-size: 0;} .pd_option2 dl + dl { margin-top: 10px;} .pd_option2 dd { display: inline-block; width: 200px; } .pd_option2 dt { display: inline-block; width: calc(100% - 200px); color: #666; vertical-align: top;} .pd_option2_inner { padding: 25px 0 30px 10px; margin: 30px 0 0 0; border-top: 1px solid #e5e5e5;} .pd_option3 { min-height: 160px;} .pd_option3 strong { padding: 2px 5px; background-color: #30beb2; font-size: 16px; color: #fff; vertical-align: top;} .pd_option3 dl { display: block; font-size: 0;} .pd_option3 dl + dl { margin-top: 10px;} .pd_option3 dd { display: inline-block; width: 200px; } .pd_option3 dt { display: inline-block; width: calc(100% - 200px); color: #666; vertical-align: top;} .pd_option3_inner { padding: 25px 0 30px 10px; margin: 30px 0 0 0; border-top: 1px solid #e5e5e5;} .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;} @media all and (max-width:800px) { .pd_option2 dl { display:flex;} .pd_option2 dd { flex:0 0 auto; width: 130px; } .pd_option2 dt { width:100%;} } /* ==================== pd_info ==================== */ .pd_info { position: relative; margin-top: 70px; padding-top: 50px; border-top: 1px solid #e5e5e5;} .pd_info img { max-width:100% !important} #scrollfix { position: relative; top: 0; z-index: 1;} /* #scrollfix.is_scrollfix { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%;} */ #scrollfix.is_scrollfix { position: fixed; top: 80px; left: 0; right: 0; z-index: 1000; width: 100%;} .tab_scrollfix { display: block; width: 100%; 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; margin: 40px; padding-left: 15px;} .pd_company_cont > li > p { position: relative; margin-left: 30px; } .pd_company_cont > li > div { margin-left: 255px; } .pd_company_cont > li > p img { margin-top: 2px; width: 20px; height: 20px;} .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: 20px; font-weight: 500;} .pd_company_cont1 { display: block; margin-top: 50px; padding: 30px; border: 1px solid #e5e5e5;} .pd_company_cont1 > li { position: relative; margin: 40px; padding-left: 15px;} .pd_company_cont1 > li > p { position: relative; margin-left: 200px; word-break: break-word;} .pd_company_cont1 > li > div { margin-left: 200px; } .pd_company_cont1 > li > p img { margin-top: 2px; width: 20px; height: 20px; border-radius:50px;} .pd_company_cont1 > li::before { content: ''; position: absolute; top: 11px; left: 0; width: 4px; height: 1px; background-color: #444;} .pd_company_cont1 > li + li { margin-top: 30px;} .pd_company_cont1 .pd_company_subtit{ display: block; margin-bottom: 20px; font-weight: 500; float:left;} .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 .left { margin-left: 30px;} .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; line-height: 100px;} .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: 45px;height: 40px;border-radius: 52px;} .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; width: 100%; margin:0 12px; 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; display:flex; flex-wrap:wrap; margin:0 -12px;} .pd_company_opfts > li > div { display: block; position: relative; width: 20%; padding:12px; 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 { display: block; position: relative; width: 100px; border: 1px solid #e5e5e5; margin:0 auto 10px } */ .pd_company_opfts > li > div .pd_opfts_img { display: block; position: relative; width: 100px; border: 1px solid #e5e5e5; margin:0 0 10px } .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%); } */ .pd_company_opfts .pd_opfts_desc { display: inline-block;} /* 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_detail { display:flex; flex-wrap: wrap;} .pd_image { width:350px;} .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: calc(100% - 370px); margin-left:20px; 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) { #scrollfix.is_scrollfix { top:120px;} .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 { width:auto !important; 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 { overflow: initial; white-space: normal; 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; line-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: 30px; 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;} */ /* 2022-07-14 */ .pd_company_cont { padding: 10px; margin-top: 30px;} .pd_company_cont > li { margin:20px;} .pd_company_cont .pd_company_subtit { margin-bottom: 10px; font-size: 12px;} .pd_company_cont .pd_company_desc { margin-left:10px; 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;} .pd_company_cont1 { margin-top: 30px; padding: 10px;} .pd_company_cont1 .pd_company_subtit { float:none; margin-bottom:10px; font-size:12px;} .pd_company_cont1 > li { margin: 20px;} .pd_company_cont1 > li > p { margin-left: 10px; font-size:12px;} .pd_company_cont1 > li > p span { font-size:12px;} .pd_company_cont1 > li > div { margin-left: 10px; font-size:12px;} .pd_company_cont1 > li + li { margin-top: 30px;} /* //2022-07-14 */ .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;} .pd_company_opfts > li > div { text-align:center;} .pd_company_opfts > li > div .pd_opfts_img { display:block; margin:0 auto 10px; text-align:center;} .pd_company_opfts .pd_opfts_desc { padding-left:0;} } /* ======================================== 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% - 24px) / 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: 38px 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 section {padding-bottom:70px;} .abouttrk section:after {display:block;content:"";clear:both;} .abouttrk section .txtbox {float:left;width:37%;} .abouttrk section .txtbox strong {display:block;padding-bottom:30px;font-size:28px;font-weight:bold;color:#30beb2;line-height:1.5;} .abouttrk section .txtbox .txt01 {padding-bottom:25px;font-size:20px;font-weight:bold;line-height:1.5;} .abouttrk section .txtbox .txt02 {font-size:16px;} .abouttrk section .youtube, .abouttrk section .pdfWrap {float:right;width:57%;height:400px;} .abouttrk section .pdfWrap #pdfviewer {width:100%;height:100%;} .abouttrk section .txtbox ul li {display:flex;margin-bottom:60px;justify-content: space-between;align-items:center;} .abouttrk section .txtbox ul li p {width:65%;font-size:18px;font-weight:500;} .abouttrk section .txtbox ul li strong {display:block;width:36%;padding-bottom:0;font-size:30px;font-weight:bold;color:#000;text-align:right;} .abouttrk section .txtbox .downBtn {text-align:right;} .abouttrk section .txtbox .downBtn a {display:inline-block;width:310px;height:40px;padding-left:20px;border:1px solid #30beb2;color:#30beb2;line-height:40px;text-align:center;font-size:14px;background:url(/ui/images/common/ico_down.png) no-repeat left 20px center;background-size:auto 80%;} .abouttrk section.boxWrap {padding:50px 0;text-align:center;background:#EEE;} .abouttrk section.boxWrap p {padding-bottom:30px;font-size:15px;font-weight:500;line-height:2;} .abouttrk section.boxWrap p b {font-weight:700;} .abouttrk section.boxWrap a {font-size:15px;font-weight:600;text-decoration:underline;color:#30beb2;} .abouttrk_tit { display: block; margin: 30px 0 15px; padding: 10px 20px; background-color: #30beb2; font-size: 18px; font-weight: 700; color: #fff; } .abouttrk_subtit {padding-left: 20px;font-size: 16px; font-weight: 700; color: #30beb2;} .abouttrk_subtit a { display: block;font-size: 16px; font-weight: 700; color: #30beb2;} .abouttrk_desc { margin-top: 15px; padding-left: 20px;} .abouttrk_box>li + li { margin-top: 45px;} .abouttrk_box li:after {display:block;content:"";clear:both;} .abouttrk_box .abouttrk_subtit {float:left;width:23%;} .abouttrk_box .abouttrk_desc_box {float:right;width:77%;margin:0;padding:0;} .abouttrk_box .abouttrk_desc_box p {margin-bottom:15px;} .abouttrk_box .abouttrk_desc_box ul li {position:relative;padding-left:17px;margin-bottom:5px;line-height:1.5;} .abouttrk_box .abouttrk_desc_box ul li:before {position:absolute;left:0;top:7px;display:block;content:"";width:7px;height:7px;border-radius:3px;background:#444;} .abouttrk .btnWrap {margin:auto;text-align:center;padding-top:30px;} .abouttrk .btnWrap a {display:inline-block;padding:7px 20px 7px 50px;color:#30beb2;font-size:15px;text-align:center;border:1px solid #30beb2;background:url('/ui/images/common/ico_down.png') no-repeat left 4% center;background-size:auto 85%;} /* ==================== 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: calc(20% - 7px); height: 140px; margin-bottom: 1px; vertical-align: top; margin-left: 8px;} .globalpartners > li:nth-child(5n + 1) { margin-left: 0;} .globalpartners > li a { display: block; width: 100%; height: 100%; text-align: center; margin: 0 auto;} .globalpartners > li a div { overflow: hidden; position: relative; width: 100%; height: 58px; margin-bottom: 5px; border: 1px solid #eaeaea;} /* .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;} .abouttrk section .txtbox strong {font-size:26px;} .abouttrk section .txtbox .txt01 {font-size:18px;} .abouttrk section .txtbox .txt02 {font-size:14px;} } @media screen and (max-width: 1200px) { .abouttrk section {padding-bottom:7vw;} .abouttrk section .txtbox {float:none;width:100%;} .abouttrk section .txtbox strong {padding-bottom:3vw;font-size:6vw;} .abouttrk section .txtbox .txt01 {padding-bottom:3vw;font-size:4.5vw;} .abouttrk section .txtbox .txt02 {font-size:4vw;} .abouttrk section .youtub, .abouttrk section .pdfWrap {float:none;width:100%;height:40vw;margin-top:5vw;} .abouttrk section .txtbox ul li {margin-bottom:5vw;} .abouttrk section .txtbox ul li p {width:65%;font-size:4vw;} .abouttrk section .txtbox ul li strong {font-size:6vw;} .abouttrk section .txtbox .downBtn {text-align:center;} .abouttrk section.boxWrap {padding:11vw;} .abouttrk section.boxWrap p {padding-bottom:3vw;font-size:3.5vw;} .abouttrk section.boxWrap p br {display:none;} .abouttrk section.boxWrap p b {font-size:inherit;} .abouttrk section.boxWrap a {font-size:3.5vw;} } /* 모바일만 */ @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 {padding-left: 10px;font-size: 13px;} .abouttrk_subtit a { font-size: 13px;} .abouttrk_box>li + li { margin-top: 25px;} .abouttrk_box * { font-size: 12px;} .abouttrk_box .abouttrk_subtit {float:none;width:100%;padding:0 0 5px 5px;font-size:14px;} .abouttrk_box .abouttrk_desc_box {float:none;width:95%;margin:auto;padding:0;} .abouttrk_box .abouttrk_desc_box ul li {padding-left:14px;} .abouttrk_box .abouttrk_desc_box ul li:before {top:7px;width:5px;height:5px;border-radius:2.5px;} .abouttrk .btnWrap {padding-top:3vw;} .abouttrk .btnWrap a {padding:1.5vw 3vw 1.5vw 9vw;font-size:3vw;background-size:auto 80%;} .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: calc(50% - 2px); height: auto; margin-bottom: 20px; margin-left: 0;} .globalpartners > li:nth-child(2n) { margin-left: 4px;} .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; margin-top:50px; 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 1050px;} .mypage_header .name strong { display: block;} .mypage_header .name strong b { display: inline-block; font-size: 22px; line-height: 31px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 1050px;} .mypage_header .name strong em { display: inline-block; font-size: 22px; line-height: 31px; font-weight: 400;} .mypage_header .link { display: flex; position:absolute; top:-15px; right:0; font-size: 0; transform: translateY(-100%); align-items:center;} .mypage_header .link li {position:relative; width:auto !important; margin-bottom:0; margin-left:20px;} /* .mypage_header .link li + li { margin-left: 20px; padding-left: 22px;} */ .mypage_header .link li + li:before { content: ''; position: absolute; top: 50%; left: -10px; 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: 30px;} .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: 86px; 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: 100%; -webkit-transform: translate(-50%, -50%) !important;; transform: translate(-50%, -50%) !important; } .myreport_area1 .left strong { display: block; margin: 10px 0 5px; font-weight: 500;} .myreport_area1 .left span { display: block; font-size: 12px; color: #666;} /* 20231117 myReport 수정본(flex_div 추가) */ .myreport_area1 .flex_div { display:flex; justify-content: center;} .myreport_area1 .flex_div .item { width:150px; margin: 0 20px;} .myreport_area1 .flex_div .myreport_area1_txt strong { margin: 7px 0 0 0;} .myreport_area1 .flex_div .myreport_area1_txt 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; overflow-wrap: break-word;} .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 { } .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; margin-top:10px;} .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; margin-left:0;} .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%;} /* 20231117 myReport 수정본(flex_div 추가) */ .myreport_area1 .flex_div { flex-wrap: wrap; justify-content: flex-start;} .myreport_area1 .flex_div .item { width: calc(33% - 10px); margin: 0 5px;} .myreport_area1 .flex_div .myreport_area1_img { display: inline-block; width: 100%; height:auto;} .myreport_area1 .flex_div .myreport_area1_txt { overflow: hidden; text-overflow: ellipsis;} /* 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;} .regional_section1 .no-data { display:flex; height:533px; font-size:18px; color:#666; align-items: center; justify-content: center;} .regional .text_info { width:100%; max-width:580px; margin-right:auto;} .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 .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .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_wrap .slider_exhall1 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall1 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall1 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall1 > li > img { width: 100%;} .exhall_wrap .slider_exhall1 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall1 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall1 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall1 > 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_exhall1 > 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_exhall1 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall1 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall1 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall1 > 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 .exhall_direction > div.exhall_prev1 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next1 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev1 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_next1 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter1 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter1 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall2 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall2 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall2 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall2 > li > img { width: 100%;} .exhall_wrap .slider_exhall2 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall2 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall2 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall2 > 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_exhall2 > 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_exhall2 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall2 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall2 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall2 > 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 .exhall_direction > div.exhall_prev2 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next2 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev2 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_next2 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter2 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter2 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall3 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall3 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall3 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall3 > li > img { width: 100%;} .exhall_wrap .slider_exhall3 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall3 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall3 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall3 > 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_exhall3 > 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_exhall3 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall3 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall3 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall3 > 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 .exhall_direction > div.exhall_prev3 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next3 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev3 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_next3 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter3 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter3 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall4 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall4 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall4 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall4 > li > img { width: 100%;} .exhall_wrap .slider_exhall4 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall4 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall4 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall4 > 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_exhall4 > 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_exhall4 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall4 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall4 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall4 > 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 .exhall_direction > div.exhall_prev4 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next4 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev4 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_next4 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter4 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter4 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall5 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall5 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall5 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall5 > li > img { width: 100%;} .exhall_wrap .slider_exhall5 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall5 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall5 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall5 > 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_exhall5 > 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_exhall5 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall5 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall5 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall5 > 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 .exhall_direction > div.exhall_prev5 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next5 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev5 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_next5 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter5 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter5 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall6 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall6 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall6 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall6 > li > img { width: 100%;} .exhall_wrap .slider_exhall6 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall6 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall6 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall6 > 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_exhall6 > 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_exhall6 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall6 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall6 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall6 > 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 .exhall_direction > div.exhall_prev6 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next6 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev6 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_next6 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter6 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter6 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall7 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall7 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall7 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall7 > li > img { width: 100%;} .exhall_wrap .slider_exhall7 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall7 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall7 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall7 > 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_exhall7 > 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_exhall7 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall7 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall7 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall7 > 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 .exhall_direction > div.exhall_prev7 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next7 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev7 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_next7 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter7 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter7 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall8 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall8 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall8 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall8 > li > img { width: 100%;} .exhall_wrap .slider_exhall8 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall8 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall8 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall8 > 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_exhall8 > 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_exhall8 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall8 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall8 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall8 > 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 .exhall_direction > div.exhall_prev8 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next8 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev8 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_next8 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter8 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter8 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall9 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall9 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall9 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall9 > li > img { width: 100%;} .exhall_wrap .slider_exhall9 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall9 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall9 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall9 > 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_exhall9 > 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_exhall9 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall9 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall9 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall9 > 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 .exhall_direction > div.exhall_prev9 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next9 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev9 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_next9 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter9 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter9 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall10 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall10 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall10 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall10 > li > img { width: 100%;} .exhall_wrap .slider_exhall10 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall10 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall10 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall10 > 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_exhall10 > 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_exhall10 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall10 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall10 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall10 > 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 .exhall_direction > div.exhall_prev10 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next10 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev10 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_next10 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter10 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter10 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall11 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall11 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall11 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall11 > li > img { width: 100%;} .exhall_wrap .slider_exhall11 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall11 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall11 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall11 > 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_exhall11 > 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_exhall11 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall11 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall11 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall11 > 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 .exhall_direction > div.exhall_prev11 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next11 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev11 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_next11 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter11 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter11 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall12 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall12 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall12 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall12 > li > img { width: 100%;} .exhall_wrap .slider_exhall12 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall12 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall12 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall12 > 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_exhall12 > 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_exhall12 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall12 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall12 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall12 > 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 .exhall_direction > div.exhall_prev12 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next12 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev12 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_next12 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter12 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter12 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall13 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall13 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall13 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall13 > li > img { width: 100%;} .exhall_wrap .slider_exhall13 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall13 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall13 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall13 > 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_exhall13 > 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_exhall13 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall13 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall13 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall13 > 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 .exhall_direction > div.exhall_prev13 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next13 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev13 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_next13 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter13 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter13 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall14 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall14 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall14 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall14 > li > img { width: 100%;} .exhall_wrap .slider_exhall14 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall14 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall14 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall14 > 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_exhall14 > 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_exhall14 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall14 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall14 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall14 > 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 .exhall_direction > div.exhall_prev14 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next14 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev14 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_next14 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter14 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter14 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall15 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall15 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall15 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall15 > li > img { width: 100%;} .exhall_wrap .slider_exhall15 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall15 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall15 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall15 > 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_exhall15 > 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_exhall15 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall15 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall15 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall15 > 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 .exhall_direction > div.exhall_prev15 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next15 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev15 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_next15 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter15 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter15 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall16 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall16 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall16 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall16 > li > img { width: 100%;} .exhall_wrap .slider_exhall16 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall16 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall16 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall16 > 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_exhall16 > 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_exhall16 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall16 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall16 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall16 > 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 .exhall_direction > div.exhall_prev16 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next16 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev16 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_next16 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter16 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter16 em { display: inline-block; margin: 0 6px 0 8px; font-size: 10px; line-height: 20px; color: #888; vertical-align: top;} .exhall_wrap .slider_exhall17 { position: relative; width: 100%; height: 100%; } .exhall_wrap .slider_exhall17 > li { position: relative; width: 585px; height: auto; padding-bottom: 60px;} .exhall_wrap .slider_exhall17 > li .exhall_img { position: relative; width: 585px; height: auto; padding-bottom: 60px; height: 300px;} .exhall_wrap .slider_exhall17 > li > img { width: 100%;} .exhall_wrap .slider_exhall17 > li .exhall_item { position: absolute; bottom: 0; left: 30px; width: 240px; height: 240px; } .exhall_wrap .slider_exhall17 > li .exhall_item_wrap { padding: 0 20px 35px 20px; background-color: #46494c;} .exhall_wrap .slider_exhall17 > li .exhall_item_wrap * { color: #fff;} .exhall_wrap .slider_exhall17 > 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_exhall17 > 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_exhall17 > li .exhall_desc { margin-top: 20px;} .exhall_wrap .slider_exhall17 > li[aria-hidden="true"] .exhall_desc { display: none;} .exhall_wrap .slider_exhall17 > li .exhall_desc > p { line-height: 2;} .exhall_wrap .slider_exhall17 > 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 .exhall_direction > div.exhall_prev17 { float: left;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_next17 { float: right;} .exhall_wrap .exhall_box .exhall_direction > div.exhall_prev17 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_next17 a:before { -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); margin-left: -10%;} .exhall_wrap .exhall_box .exhall_counter17 { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #888; line-height: 20px;} .exhall_wrap .exhall_box .exhall_counter17 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: 30px; font-size: 24px; font-weight: 700; line-height: 1.4; color: #666;} /* db연동으로 카테고리별 전시회 로고관련 주석처리 */ /* .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; } .exhall_cate li .exhall_box1 { margin: 10px 0 20px } .exhall_cate li .exhall_box1 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 { display:none; } .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 .active {fill: #32beb2 !important;} .map_svg .area_n .txtActive { fill: #fff; font-size: 28px; font-weight: 700; text-anchor: middle; alignment-baseline: middle; display:block;} .map_svg .area_n:hover path.OUTLINE { fill: #97ded8 !important;} .map_svg .area_n:hover .TEXT { fill: #fff; font-size: 28px; font-weight: 700; text-anchor: middle; alignment-baseline: middle; display:block;} .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; width:80%; margin: 30px auto; 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_visual_box .projectex_visual_p { display: block; font-size: 17px; 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 { font-size: 0;} .card > li { display: inline-block; position: relative; width: 33.333%; padding: 12px; vertical-align: top;} .card > li .card_tag00 { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; font-weight: 500; color: #fff; background-color: #6c6c6c;} .card > li .card_tag03 { 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_tag05 { 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_tag04 { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; font-weight: 500; color: #fff; background-color: #9a51d4;} .card > li .card_tag06 { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; font-weight: 500; color: #fff; background-color: #76cb0a;} .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;white-space: nowrap;text-overflow: ellipsis;width: 100%;overflow: hidden;} .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; } /* ==================== exhibitionsCountry ==================== */ .exhibitions_country { width: 100%; min-height: 840px; background: url(../../img/tradeshow/country_bg.png)!important; background-position: center!important; background-size: cover!important;} .exhibitions_country h2{ font-size: 32px; font-weight: 700; color: #fff; text-align: center; padding-bottom: 10px;} .exhibitions_country .country_mb{ display: none;} .exhibitions_country .exhibitions_country_flex{ max-width: 1400px; margin: 0 auto; padding: 60px 0 30px; display: flex; justify-content: space-between;} .exhibitions_country .country_map{ max-width: 80%; height: 100%; position: relative;} .exhibitions_country .country_map img{ width: 90%; height: auto; display: block; margin: 0 auto;} /* 국가 좌표 */ .exhibitions_country .country_map .country_map_list .country_tab li.ALL { position: absolute; top: 65%; left: 60%;} .exhibitions_country .country_map .country_map_list .country_tab li.US { position: absolute; top: 45%; left: 65%;} .exhibitions_country .country_map .country_map_list .country_tab li.JP { position: absolute; top: 39%; left: 45%;} .exhibitions_country .country_map .country_map_list .country_tab li.FR { position: absolute; top: 28%; left: 8%;} .exhibitions_country .country_map .country_map_list .country_tab li.VN { position: absolute; top: 56%; left: 36%;} .exhibitions_country .country_map .country_map_list .country_tab li.DE { position: absolute; top: 29%; left: 18%;} .exhibitions_country .country_map .country_map_list .country_tab li.HK { position: absolute; top: 45%; left: 27%;} .exhibitions_country .country_map .country_map_list .country_tab li.ID { position: absolute; top: 60%; left: 20%;} .exhibitions_country .country_map .country_map_list .country_tab li.AE { position: absolute; top: 50%; left: 17%;} .exhibitions_country .country_map .country_map_list .country_tab li.ES { position: absolute; top: 35%; left: 9%;} .exhibitions_country .country_map .country_map_list .country_tab li.IT { position: absolute; top: 37%; left: 19%;} .exhibitions_country .country_map .country_map_list .country_tab li.CN { position: absolute; top: 43%; left: 29%;} .exhibitions_country .country_map .country_map_list .country_tab li.is_active{ z-index: 1;} .exhibitions_country .country_map .country_map_list .country_tab li a { font-size: 16px; font-weight: 500; line-height: 50px; height: 50px; padding: 0 10px; display: inline-block; background: #dadada; color: #fff; border-radius: 10px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); } .exhibitions_country .country_map .country_map_list .country_tab li a:hover { background: #30beb2;} .exhibitions_country .country_map .country_map_list .country_tab li.is_active a { background: #30beb2;} .exhibitions_country .country_map .country_map_list .country_tab li a img{ width: 30px; height: 30px; display: inline-block; border-radius: 50px; margin-right: 8px; border: 1px solid #fff; } .exhibitions_country .country_map .country_map_list .country_tab li .country_all{ border: none;} .exhibitions_country .country_list{ padding-top: 70px;} .exhibitions_country .country_ex .country_box{ position: relative; max-width: 300px; width: 100%; height: 700px; overflow-y: scroll; overflow-x: hidden; margin-top: 50px; padding-right: 10px;} /* 스크롤 */ .exhibitions_country .country_ex .country_box::-webkit-scrollbar-track{ background: transparent; border: none;} .exhibitions_country .country_ex .country_box::-webkit-scrollbar-thumb{ width: 6px!important; background: #7D8FB5; border: none;} .exhibitions_country .country_ex .country_box li{ position: relative; width: 100%; padding-bottom: 40px; margin-right: 10px; } .exhibitions_country .country_ex .country_box .countryex_category{ position: absolute; left: 20px; height: 28px; padding: 0 12px; background: #fff; text-align: center; line-height: 28px; font-size: 16px; font-weight: 700; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);} .exhibitions_country .country_ex .country_box .country_img{ box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.25); width: 280px; height: 280px;} .exhibitions_country .country_ex .country_box .country_img a{ display: block; width: 100%; height: 100%;} .exhibitions_country .country_ex .country_box .country_img a img{ width: 100%; height: 100%; object-fit: cover; } .exhibitions_country .country_ex .country_text .country_tit{ font-size: 24px; line-height: 24px; font-weight: 700; color: #fff; padding: 20px 0 8px; letter-spacing: -5%; text-align: left;} .exhibitions_country .country_ex .country_text .country_date{ font-size: 16px; font-weight: 400; color: #fff; padding-top: 8px; letter-spacing: -5%; text-align: left;} /* 국가관 1024px */ @media screen and (max-width: 1024px) { .exhibitions_country .exhibitions_country_flex{ max-width: 900px;} .exhibitions_country .country_ex .country_box{ width: 216px; height: 573px; overflow-y: scroll;} .exhibitions_country .country_ex .country_text .country_tit{ font-size: 20px; height: 71px; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .exhibitions_country .country_ex .country_text .country_date{ font-size: 12px; } .exhibitions_country .country_ex .country_box .country_img{ width: 100%; height: 200px; } } /* 국가관 834px */ @media screen and (max-width: 834px) { .exhibitions_country .country_pc{ display: none;} .exhibitions_country .country_mb{ display: block;} .exhibitions_country .country_ex .country_box{ max-width: 636px; width: 100%; height: 100%; position: relative; margin: 50px auto; overflow: visible;} .exhibitions_country .country_ex h2{ padding-bottom: 40px;} .exhibitions_country .country_ex .country_tab ul { width: 70%;height: 100px; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;} .exhibitions_country .country_ex .country_tab ul li { display: inline-block; padding: 0 20px; text-align: center;} .exhibitions_country .country_ex .country_tab ul li a{ display: inline-block; min-width: 50px; color: #8393AC; font-size: 16px; font-weight: 500; text-align: center; } .exhibitions_country .country_ex .country_tab ul li.is_active a{ color: #fff;} .exhibitions_country .country_ex .country_tab ul li .country_all{border: none; } .exhibitions_country .country_ex .country_tab ul li.is_active .country_all{border: none; content: url(../../img/flag/country_all_1.png);} .exhibitions_country .country_ex .country_tab ul li img{ display: block; width: 50px; height: 50px; border-radius: 50px; margin: 0 auto; border: 1px solid #8393AC; white-space: nowrap;} .exhibitions_country .country_ex .country_tab ul li.is_active img{ border: 2px solid #fff; } .exhibitions_country .country_ex .country_tab ul li a::after{ content: ""; display: none; width: 8px; height: 8px; border-radius: 50px; background: #fff; margin: 8px auto 0 auto; } .exhibitions_country .country_ex .country_tab ul li.is_active a::after { display: block;} .exhibitions_country .country_ex .country_box li{ width: 43%; display: inline-block; margin: 0 3%;} .exhibitions_country .country_ex .country_box .country_img{ max-width: 280px; height: 280px; } .exhibitions_country .exhibitions_country_flex{ max-width: 636px; margin: 0 auto; padding-top: 60px; display: block;} /* 스크롤바 */ .exhibitions_country .country_ex .country_box::-webkit-scrollbar-track{ background: transparent!important; border: none!important;} .exhibitions_country .country_ex .country_box::-webkit-scrollbar-thumb{ width: 6px!important; background: #7D8FB5!important; border: none!important;} /* 탭 스크롤바 */ .exhibitions_country .country_ex .country_tab ul::-webkit-scrollbar-track{ background: transparent!important; border: none!important;} .exhibitions_country .country_ex .country_tab ul::-webkit-scrollbar-thumb{ width: 6px!important; background: none!important; border: none!important;} } /* 국가관 모바일 */ @media screen and (max-width: 743px) { .exhibitions_country .country_ex h2 { font-size: 20px;} .exhibitions_country .country_ex .country_tab ul { display: flex;} .exhibitions_country .country_ex .country_tab ul li { padding: 0 16px; text-align: center;} .exhibitions_country .country_ex .country_tab ul li a{ font-size: 14px;} .exhibitions_country .country_ex .country_tab ul li a::before{ width: 40px; height: 40px; } .exhibitions_country .country_ex .country_tab ul li a::after{ content: ""; display: none ; width: 6px; height: 6px; border-radius: 50px; background: #fff; margin: 8px auto 0 auto; } .exhibitions_country .country_ex .country_tab ul li.is_active a::after { display: block;} .exhibitions_country .country_ex .country_box { max-width: 320px; text-align: center; padding: 0;} .exhibitions_country .country_ex .country_box li{ width: 280px; display: inline-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 .text_info { max-width:50%;} .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 auto; 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;;} .regional_section1 .no-data { height:auto; padding:30px 0;} .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 auto; 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;} } .column_head { display: block; position: relative; text-align: left;} .column_head .main_tit { text-align: center;} .column_head .more_type1{ position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .more_type1{ display:block; width: 23px; height: 23px; background: url(../images/more2.png) no-repeat; font-size: 0;} /* VISUAL WRAP */ .visualWrap { height: 255px; padding: 50px 80px 20px 80px; font-size: 18px; } .visualWrap.polocy { background: url(../../img/support/img_visual_sample3.jpg) no-repeat 0 0; } .heading { position: relative } .heading-depth01 { margin: 0 0 40px } .heading-depth01 .title { font-size: 44px; font-weight: 600 } .heading-depth01 span { color: #fff; display: block; font-weight: 300; font-size: 26px; } .visualWrap .heading .title { color: #fff; } .visualWrap .desc { color: #fff; font-size: 26px; } .visual_text_box { position:relative; padding:30px 40px; padding-right:460px; background:#f1fffc;} .visual_text_box:before { content:''; display:block; position:absolute; bottom:0; right:0; width:450px; height:330px; background:no-repeat center center / 100%; transition: all .3s ease;} .visual_text_box.img1:before { background-image: url('../images/img_tradeServices_visual1.png');} .visual_text_box.img2:before { background-image: url('../images/img_tradeServices_visual2.png');} .visual_text_box.img3:before { background-image: url('../images/img_tradeServices_visual3.png');} .visual_text_box h4.page_subtit { margin-top:0;} @media screen and (max-width: 1280px) { .visual_text_box { padding-right:350px;} .visual_text_box:before { width:350px; height:230px;} } @media screen and (max-width: 1024px) { .visual_text_box { padding-right:40px;} .visual_text_box:before { width:200px; height:150px;} } /* 모바일 */ @media screen and (max-width: 800px) { .visual_text_box { padding:20px; padding-bottom:150px;} .visual_text_box:before { width:200px; height:150px;} .visualWrap { display:flex; padding: 20px 20px 20px 20px; align-items:center;} .heading-depth01 { margin-bottom:0;} .heading-depth01 .title { font-size:35px;} } .visaul_cont_tit { padding:80px 40px; margin-bottom:40px; text-align:center; color:#fff; background:no-repeat bottom center / cover;} .visaul_cont_tit.bgCenter { background-position:center center;} .visaul_cont_tit * { text-align:center; color:#fff;} @media screen and (max-width: 800px) { .visaul_cont_tit {padding:40px 20px; margin-bottom:20px;} } .visaul_cont_tit_copy { padding:18px 40px; margin-bottom:40px; text-align:center; color:#fff; background:no-repeat bottom center / cover;} .visaul_cont_tit_copy.bgCenter { background-position:center center;} .visaul_cont_tit_copy * { text-align:center; color:#fff;} @media screen and (max-width: 800px) { .visaul_cont_tit_copy {padding:40px 20px; margin-bottom:20px;} } .visaul_cont_tit_about { padding:50px 40px; margin-bottom:60px; text-align:center; color:#fff; background:no-repeat bottom center / cover;} .visaul_cont_tit_about.bgCenter { background-position:center center;} .visaul_cont_tit_about * { text-align:center; color:#fff;} .visaul_cont_tit_about .tit_gp{ font-size: 40px;} @media screen and (max-width: 800px) { .visaul_cont_tit_about {position:relative; padding:40px 20px; margin-bottom:20px;} .visaul_cont_tit_about .page_tit { position:relative; line-height:1.2;} .visaul_cont_tit_about .tit_gp{ font-size: 32px;} } [class*=validation-] { display: block; position: relative; padding-left: 23px; font-weight: 400 } [class*=validation-]:before { content: ''; display: block; position: absolute; top: 3px; left: 0; width: 13px; height: 13px; background: url(../images/spr_icon.png) no-repeat } .validation-error:before { background-position: -66px -159px } .validation-available:before { background-position: -51px -159px } .validation { display: block; color: #333; font-size: 13px; font-weight: 300; line-height: 20px; margin-bottom: 10px; } .validation-error { color: #f14b2f } .validation-minisite { margin: 10px; } .prodDumInput { margin-top: 10px;width: calc(100% - 90px);margin-right: 10px; } .eq_keyword { color: #f22c24; } .wordBreakNo { word-break: keep-all; } /* 상품디테일 */ .pd_company_cont4 { display: block; margin-top: 50px; padding: 30px; border: 1px solid #e5e5e5;} .pd_company_cont4 > li { position: relative; margin: 40px; padding-left: 15px;} .pd_company_cont4 > li > p { position: relative; margin-left: 200px !important; } .pd_company_cont4 > li > div { margin-left: 200px; } .pd_company_cont4 > li > p img { margin-top: 2px; width:100%; max-width: 640px; height: auto;} .pd_company_cont4 > li::before { content: ''; position: absolute; top: 11px; left: 0; width: 4px; height: 1px; background-color: #444;} .pd_company_cont4 > li + li { margin-top: 30px;} .pd_company_cont4 .pd_company_subtit{ display: block; margin-bottom: 25px; font-weight: 500; float:left;} .pd_company_markets2 { font-size: 0; padding:1px 4px 66px 90px; position:inherit; left:126px} .pd_company_markets2 li { display: inline-block; width: 17%; margin-bottom: 30px; font-size: 0; margin-right:44px;} .pd_company_markets2 li > img {display: inline-block;width: 45px;height: 40px;border-radius: 52px;} .pd_company_markets2 li > span { display: inline-block; position: relative; width: calc(100% - 60px); height: 40px; vertical-align: top;} .pd_company_markets2 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_mainpd2 { font-size: 0; margin: -12px; position:inherit; left:90px;} .pd_company_mainpd2 li { display: inline-block; width: 140px; margin:0px 8px; padding: 12px; font-size: 0; vertical-align: top; text-align: center;} .pd_company_mainpd2 li > a { display:block; position: relative; width: 100%; border: 1px solid #e5e5e5; } .pd_company_mainpd2 li > a:before { display: block; content: ''; padding-top: 100%;} .pd_company_mainpd2 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_mainpd2 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_mainpd2 li span { display: inline-block; width: 100%; text-align: center; } .pd_company_mainpd2 li .flag_img_size { height: 62px; width: 62px; border-radius: 50px;} @media all and (max-width:1024px) { .pd_company_cont4 .pd_company_subtit { float:none; margin-bottom:15px;} .pd_company_cont4 > li > p { margin-left:0 !important;} .pd_company_markets2 { position:static; left:auto; width:auto !important; padding:1px 4px 60px;} .pd_company_mainpd2 { position:static; left:auto;} } @media all and (max-width:800px) { .pd_company_cont4 { padding:20px;} .pd_company_cont4 * { font-size:12px;} .pd_company_cont4 > li { margin:0px;} .pd_company_cont4 > li + li { margin-top:20px;} .pd_company_cont4 .pd_company_subtit { margin-bottom:10px;} .pd_company_markets2 { display:flex; flex-wrap: wrap;} .pd_company_markets2 li { display:inline-flex; width:auto; margin-right:0; padding-right:20px;} .pd_company_markets2 li > img { flex:0 0 auto;} .pd_company_markets2 li > span { width:auto;} .pd_company_markets2 li > span b { position:static; font-size:12px;} .pd_company_mainpd2 { position:static; left:auto; padding-left:0; margin-left:-15px} } /* ==================== 2021-12-27 장영석 ==================== */ .mt-8 { margin-top:8px;} .fz-13 { font-size:13px !important;} .fc-666 { color:#666 !important;} .flex { display:flex;} .flex > * { flex:1 1 auto;} .flex > * + * { margin:0 0 0 5px;} .flexWrap { flex-wrap: wrap;} .flex.full > * { width:100%} .flex.full > * + * { margin:5px 0 0 0;} .flex .btn1 { display:flex; height:50px; align-items: center; justify-content: center;} .flex .search_button .btn1 { height:40px;} .flex .btn_line { display:inline-flex; flex:0 0 auto; height:40px; padding:0 10px; margin-left:0; border-radius:2px; border:1px solid #005172; font-size:13px; color:#005172; align-items: center;} .flex .right_line { position:relative; margin-right:12px;} .flex .right_line:after { content:''; display:block; position:absolute; top:0; right:-6px; width:1px; height:100%; background:#E5E5E5} .tooltip_text_link { color:#30BEB2; letter-spacing: -0.02em; text-decoration: underline; cursor: pointer;} .tooltip_text_link i { display:inline-flex; width:20px; height:20px; margin-left:5px; margin-top:-3px; vertical-align:middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23F8F8FB' stroke='%2330BEB2'/%3E%3Cpath d='M9.124 11.976H10.66C10.48 10.284 12.568 9.708 12.568 8.004C12.568 6.468 11.512 5.724 10.072 5.724C9.028 5.724 8.176 6.216 7.552 6.924L8.524 7.812C8.908 7.416 9.328 7.14 9.856 7.14C10.48 7.14 10.876 7.524 10.876 8.124C10.876 9.264 8.836 10.044 9.124 11.976ZM9.892 15.168C10.528 15.168 10.996 14.664 10.996 14.016C10.996 13.356 10.528 12.864 9.892 12.864C9.268 12.864 8.8 13.356 8.8 14.016C8.8 14.664 9.268 15.168 9.892 15.168Z' fill='%2325A99E'/%3E%3C/svg%3E");} .tooltip_text_link:hover + .tooltip_view { visibility: visible; opacity:1; transform: translateY(0);} .tooltip_box { position:relative;} .tooltip_view { visibility: hidden; position:absolute; top:25px; left:0; right:0; z-index:10; padding:20px 22px 15px; border: 1px solid #F0F0F0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background:#fff; opacity:0; transition: all .3s ease; transform: translateY(10%);} .tooltip_view .tit { font-size:18px; color:#444; font-weight: bold;} .tooltip_view .img { position:absolute; top:18px; right:20px;} .tooltip_view .text { margin-top:8px; font-size:12px; line-height:1.25; color:#666;} .dform1 .dform1_tr.type2 { overflow: visible;} .xitem_block.type2 li { background:#F5F5F5;} .xitem_inline.type2 li { width:50%;} .xitem_inline.type2 li .item_box { background:#F5F5F5;} .checks.type2 input[type=checkbox] + label:before { border: 1px solid #F0F0F0;} .btnCatalogBox { position:relative;} .btnCatalogBox .layerpopup { visibility: hidden; position:absolute; bottom:0; left:0; z-index:10; border:1px solid #30beb2; padding:20px; background:#fff; transform: translateY(120%); opacity: 0; transition: all .3s ease;} .btnCatalogBox .layerpopup .download { display:block; margin:5px 0;} .btnCatalogBox .layerpopup .download:before { content:''; display:inline-block; width: 30px; height: 30px; margin-right:10px; vertical-align: middle; background: url(../images/icon_sort_list.png) no-repeat -7px -7px / 530px; font-size: 0;} .btnCatalogBox .layerpopup .btnClose { display:block; position: absolute; top:10px; right:10px; width:30px; height:30px; font-size:0; transform:rotate(45deg)} .btnCatalogBox .layerpopup .btnClose:before { content:''; display:block; position:absolute; top:50%; left:50%; width:15px; height:3px; font-size:0; background:#000; transform: translate(-50%,-50%)} .btnCatalogBox .layerpopup .btnClose:after { content:''; display:block; position:absolute; top:50%; left:50%; width:3px; height:15px; font-size:0; background:#000; transform:translate(-50%,-50%)} .btnCatalogBox .layerpopup.on { visibility: visible; transform: translateY(100%); opacity: 1;} .pcViewM .xzoom-preview { display:none !important} .pcViewM .xzoom-source { display:none !important} @media all and (max-width:800px) { .xzoom-preview { display:none !important} .xzoom-source { display:none !important} .fit_box2 > .search_button:first-child { margin-top:0;} .dform1 .dform1_tr.type2 .flex { display:block;} .flex .search_button .btn1 { height:40px;} .flex .btn_line { width:100%; margin-top:10px; text-align:center; justify-content: center;} .flex .right_line { margin-right:0px; margin-left:0; margin-top:10px;} .flex .right_line:after { display:none;} .flex .right_line .btn1 { width:100%;} .xitem_inline.type2 li { width:100%;} .pd_image.product-detail .product-image { width:100%;} .pd_image.product-detail .product-image .xzoom-container { width:100% !important;} .pd_image.product-detail .product-image .button-zoom { margin:20px auto !important; text-align:center;} }} .search_button a#tk_buy{ display: table; position: relative; transform: translateX(-50%); left: 50%; } .tkm_product_ban{width: 100%; height: auto; margin-top: 50px;} .tkm_product_ban a{width: 100%; height: 100%; display: block;} .tkm_product_ban img{width: 100%; height: auto; max-width: 500px; position: relative; transform: translateX(-50%); left: 50%; } .related_search_box { display:flex; width:100%; max-width:1480px; margin:-40px auto 10px; padding:0 20px;} .related_search_box.hide { display:none;} .related_search_box .tit { flex:0 0 auto; position:relative; margin-left:auto; padding-left:15px; padding-right:20px; font-size:15px; color:#30BEB2; align-self: flex-start;} .related_search_box .tit:before { content:''; display:block; position:absolute; top:50%; left:0; width:0; height:0; border:5px solid #1EAA9E; border-width:5px 5px 5px 8px; border-color:transparent transparent transparent #1EAA9E; transform: translateY(-50%);} .related_search_box .tit:after { content:''; display:block; position:absolute; top:50%; right:10px; width:1px; height:10px; background:#E5E5E5; transform: translateY(-50%);} .related_search_box .search_word {} .related_search_box .search_word p { display:inline; position:relative; padding-right:18px; word-break: break-all;} .related_search_box .search_word p:after { content:''; display:block; position:absolute; top:50%; right:8px; width:2px; height:2px; border-radius: 50%; background:#999; transform: translateY(-50%);} .related_search_box .search_word p:last-child { padding-right:0;} .related_search_box .search_word p:last-child:after { display:none;} .related_search_box .search_word a { font-size:15px; color:#111;} /* 2022-06-30 */ .other_site_aside { position:relative; margin:70px 20px 0;} .other_site_aside ~ .other_site_aside { margin-top:43px;} .other_site_aside h2 { width:110px;} .other_site_aside h2 img { width:100%;} .other_site_aside .img { position:relative; margin-top:12px; padding-top:100%; border:1px solid #E5E5E5; background:#fff;overflow:hidden;} .other_site_aside .img img { position:absolute; top:50%; left:50%; width:calc(100% - 40px); transform: translate(-50%, -50%);} .other_site_aside .btn_more { position:absolute; top:2px; right:0; width:23px; height:23px; border:1px solid #C4C4C4;} .other_site_aside .btn_more:before { content:''; display:block; position:absolute; top:50%; left:50%; width:10px; height:1px; background:#666666; transform: translate(-50%, -50%);} .other_site_aside .btn_more:after { content:''; display:block; position:absolute; top:50%; left:50%; width:1px; height:10px; background:#666666; transform: translate(-50%, -50%);} .other_site_aside .btn_more span { font-size:0;} /* 2022-08-09 */ .tradeMarkBox { display:flex; margin-top:15px; align-items: center;} .tradeMarkBox i { flex:0 0 auto; width:56px; height:56px; background:url('../images/trad_logo.png') no-repeat center center / 100%;} .tradeMarkBox .textBox { margin-left:17px;} .pl-10 { padding-left:10px;} .pr-10 { padding-right:10px;} /* 2022-08-19 */ .mobView .body-type01 .section{ padding-top: 0; } /* 2022-08-19 */ .chattingBtnGroup button i { margin-right:10px;} /* 2022-09-05 */ .tradeMarkBox i { flex:0 0 auto; width:57px; height:57px; background:url('../images/trad_logo.png') no-repeat center center / 100%;} .tradeMarkBox .textBox { margin-left:17px;} .pl-10 { padding-left:10px;} .pr-10 { padding-right:10px;} /* 2022-09-15 */ .page_head.type2 { display:flex; margin-top:20px; align-items: center;} .page_head.type2 .btnGroup { margin-left:auto;} .page_head.type2 .btnGroup button { margin-left:20px;} .page_head.type2 .btnGroup button i { margin-right:5px;} .chattingBtnGroup { display:flex; border:1px solid #e5e5e5; border-top:0;} .chattingBtnGroup button { width:100%; height:65px; text-align:center;} .chattingBtnGroup button + button { border-left:1px solid #e5e5e5;} .chattingBtnGroup button i { margin-right:10px;} /* 2023-02-16, 성공스토리 팝업 추가 */ .popbg {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7);overflow:hidden;z-index:10000;} .successPop {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:90%;max-width:1100px;height:700px;background:#FFF;z-index:10001;} .successPop .popHeader {position:relative;width:100%;background:#1f776f;} .successPop .popHeader strong {display:block;width:100%;font-size:24px;font-weight:500;color:#FFF;text-align:center;line-height:2.5;} .successPop .popHeader b {font-weight:700;font-size:inherit;color:inherit;} .successPop .popHeader .popClose {display:block;position:absolute;top:50%;transform:translateY(-50%);right:20px;width:30px;height:30px;} .successPop .popHeader .popClose:before, .successPop .popHeader .popClose:after {position:absolute;top:50%;left:0;display:block;content:"";width:30px;height:2px;background:#FFF;} .successPop .popHeader .popClose:before {transform:translateY(50%) rotate(45deg);} .successPop .popHeader .popClose:after {transform:translateY(50%) rotate(-45deg);} .successPop .popContent {display:flex;padding:20px;justify-content:space-between;} .successPop .popContent .tabWrap {width:67%;} .successPop .popContent .tabCon {display:none;width:100%;} .successPop .popContent .videoWrap {width:100%;height:350px;} .successPop .popContent .txtWrap {width:100%;padding:20px 0;} .successPop .popContent .txtWrap:after {dipslay:block;content:"";clear:both;} .successPop .popContent .left {float:left;width:55%;} .successPop .popContent .left strong {position:relative;display:block;height:40px;padding-left:50px;font-size:16px;font-weight:500;line-height:40px;} .successPop .popContent .left strong:before {position:absolute;top:0;left:0;display:block;content:"";width:40px;height:40px;border-radius:20px;border:1px solid #DDD;background-color:#FFF;background-repeat:no-repeat;background-size:auto 100%;background-position:center center;box-sizing:border-box;overflow:hidden;} .successPop .popContent .left p {width:95%;padding:10px;font-size:16px;font-weight:500;word-break:keep-all;} .successPop .popContent .right {float:right;width:40%;} .successPop .popContent .right .btn {display:flex;width:100%;align-item:center;justify-content:space-around;} .successPop .popContent .right .btn a {display:flex;width:49%;height:30px;font-size:14px;font-weight:500;color:#FFF;background:#30beb2;border-radius:3px;align-content:center;align-items:center;justify-content:center;} .successPop .popContent .right .btn a:first-child:after {background-image:url('../ui/images/common/icon_user.png');} .successPop .popContent .right ul {padding-top:30px;} .successPop .popContent .right ul li {position:relative;padding-left:15px;margin-bottom:7px;line-height:1.2;font-weight:500;} .successPop .popContent .right ul li:before {position:absolute;top:5px;left:0;display:block;content:"";width:0;height:0;border-left:3px solid #333;border-bottom:3px solid transparent;border-top:3px solid transparent;border-right:3px solid transparent;} .successPop .popContent .tabBtn {width:30%;height:600px;padding:10px;background:#ededed;box-sizing:border-box;overflow-y:scroll;} .successPop .popContent .tabBtn li {background-repeat:no-repeat;background-size:100% auto;background-position:0 3px;} .successPop .popContent .tabBtn li + li {margin-top:20px;} .successPop .popContent .tabBtn li a {display:flex;width:100%;height:auto;min-height:150px;padding:0 20px;font-size:16px;line-height:2;font-weight:500;color:#FFF;border:4px solid #AAA;box-sizing:border-box;flex-wrap:wrap;align-content:center;text-shadow:2px 2px #333;} .successPop .popContent .tabBtn li.on a {border:4px solid #1f776f;} /* 탭별 이미지 */ .successPop .popContent #tab01 .left strong:before {background-image:url('../images/service/success/logo01.jpg');} .successPop .popContent #tab02 .left strong:before {background-image:url('../images/service/success/logo02.jpg');} .successPop .popContent #tab03 .left strong:before {background-image:url('../images/service/success/logo03.jpg');} .successPop .popContent #tab04 .left strong:before {background-image:url('../images/service/success/logo04.jpg');} .successPop .popContent .tabBtn li:nth-child(1) {background-image:url('../images/service/success/popbg01.jpg');} .successPop .popContent .tabBtn li:nth-child(2) {background-image:url('../images/service/success/popbg02.jpg');} .successPop .popContent .tabBtn li:nth-child(3) {background-image:url('../images/service/success/popbg03.jpg');} .successPop .popContent .tabBtn li:nth-child(4) {background-image:url('../images/service/success/popbg04.jpg');} @media screen and (max-width: 800px) { .successPop {position:absolute;top:10vw;transform:translate(-50%, 0);height:auto;} .successPop .popHeader strong {font-size:4vw;} .successPop .popHeader .popClose {right:2vw;width:5vw;height:5vw;} .successPop .popHeader .popClose:before, .successPop .popHeader .popClose:after {width:5vw;height:0.3vw;} .successPop .popContent {display:block;padding:2vw;} .successPop .popContent .tabWrap {width:100%;} .successPop .popContent .tabCon {display:none;width:100%;} .successPop .popContent .videoWrap {width:100%;height:47vw;} .successPop .popContent .txtWrap {width:100%;padding:2vw 0;} .successPop .popContent .left {float:none;width:100%;} .successPop .popContent .left strong {height:12vw;padding-left:15vw;font-size:4vw;line-height:12vw;} .successPop .popContent .left strong:before {width:12vw;height:12vw;border-radius:6vw;} .successPop .popContent .left p {width:100%;padding:2vw;font-size:3.5vw;} .successPop .popContent .right {position:relative;float:none;width:100%;padding-bottom:15vw;} .successPop .popContent .right .btn {position:absolute;left:0;bottom:4vw;justify-content:center;} .successPop .popContent .right .btn a {display:flex;width:35%;height:8vw;font-size:3.5vw;border-radius:0.5vw;} .successPop .popContent .right .btn a + a {margin-left:2vw} .successPop .popContent .right ul {padding-top:4vw;} .successPop .popContent .right ul li {padding-left:5vw;margin-bottom:2.5vw;} .successPop .popContent .right ul li:before {top:1.5vw;border-left:1vw solid #333;border-bottom:1vw solid transparent;border-top:1vw solid transparent;border-right:1vw solid transparent;} .successPop .popContent .tabBtn {width:100%;height:auto;padding:2vw;} .successPop .popContent .tabBtn li + li {margin-top:2vw;} .successPop .popContent .tabBtn li a {height:auto;min-height:40vw;padding:0 2vw;font-size:4vw;border:2vw solid #AAA;} .successPop .popContent .tabBtn li.on a {border:2vw solid #1f776f;} } /* 2023-07-18 회원가입 추가 */ /* new_join_main */ .new_join_main{ text-align: center;} .new_join_main h2{ font-size: 42px; font-weight: 700; color: #111; padding-top: 80px;} .new_join_main h2 span{ font-size: inherit; font-weight: inherit; color: #30beb2;} .new_join_main h3{ font-size: 24px; color: #3c3c3c;} .new_join_main .join_wrap{ display: flex; justify-content: center; padding: 40px 0 50px;} .new_join_main .join_wrap > div{ position: relative; display: block; max-width: 300px; min-width: 300px; height: 300px; border: 1px solid #ddd; border-radius: 15px; cursor: pointer; margin: 0 16px;} .new_join_main .join_wrap > div:hover{ box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25); } .new_join_main .join_wrap .cont{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);} .new_join_main .join_wrap img{ width: 72px; height: 72px;} .new_join_main .join_wrap .tit{ font-size: 30px; font-weight: 900; color: #000; padding-top: 20px;} .new_join_main .join_wrap .txt{ font-size: 16px; font-weight: 400; color: #000; padding-top: 8px;} /* 태블릿 */ @media screen and (max-width: 834px) { .new_join_main h2{ font-size: 36px; line-height: 44px;} .new_join_main h3 { font-size: 20px;} .new_join_main .join_wrap { display: block; padding: 20px 0 0 0;} .new_join_main .join_wrap > div { max-width: 448px; height: 179px; margin: 20px auto;} .new_join_main .join_wrap .cont{ display: flex; align-items: center; padding:0 5% 0 15%;} .new_join_main .join_wrap .text_wrap{ display: inline-block; text-align: left;} .new_join_main .join_wrap img{ width: 72px; height: 72px;} .new_join_main .join_wrap .tit{ font-size: 30px; font-weight: 700; color: #000; margin-left: 33px; padding: 0; line-height: 44px;} .new_join_main .join_wrap .txt{ font-size: 16px; font-weight: 400; color: #000; margin-left: 33px; padding: 0; line-height: 20px;} } /* 모바일만 */ @media screen and (max-width: 430px) { .new_join_main h2{ font-size: 28px; line-height: 34px; padding-top: 15px;} .new_join_main h3{ font-size: 16px; padding-top:8px; line-height: 20px;} .new_join_main .join_wrap > div { min-width: 200px; height: 120px; margin: 16px auto;} .new_join_main .join_wrap .cont{ display: flex; align-items: center; padding:0 5% 0 15%;} .new_join_main .join_wrap .text_wrap{ display: inline-block; text-align: left;} .new_join_main .join_wrap img{ width: 72px; height: 72px;} .new_join_main .join_wrap .tit{ font-size: 20px; font-weight: 700; color: #000; margin-left: 33px; padding: 0; line-height: 30px;} .new_join_main .join_wrap .txt{ font-size: 14px; font-weight: 300; color: #000; margin-left: 33px; padding: 0; line-height: 17px;} } /* new_join_success */ .new_join_success{ width: 100%; margin: 108px 0 35px 0; text-align: center; font-family: "montserrat",'Noto Sans KR', sans-serif; } .new_join_success .join_img{ width: 157px; height: 160px;} .new_join_success .txtbox{ margin: 40px 0 32px;} .new_join_success .txtbox .tit span{ font-size: inherit; color: #30beb2; font-weight: inherit; line-height: inherit;} .new_join_success .txtbox .tit{ font-size: 28px; color: #000; font-weight: 500; line-height: 28px;} .new_join_success .txtbox .txt{ font-size: 16px; font-weight: 400; color: #000; margin-top: 8px;} .new_join_success button{ padding: 16px 32px; background: #30beb2; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 500;} /* 태블릿 */ @media screen and (max-width: 834px) { .new_join_success{ margin: 108px 0 115px 0;} .new_join_success .txtbox{ margin: 32px 0 23px;} .new_join_success .txtbox .tit{ font-size: 24px;} .new_join_success button{ padding: 12px 24px; font-size: 16px; } } /* 모바일만 */ @media screen and (max-width: 360px) { .new_join_success{ margin: 80px 0 128px 0;} .new_join_success .join_img{ width: 118px; height: 120px;} .new_join_success .txtbox{ margin: 24px 0 24px;} .new_join_success .txtbox .tit{ font-size: 20px;} .new_join_success .txtbox .txt{ font-size: 14px;} } /* new_join_mail */ .new_join_mail{ margin: 163px auto 226px; text-align: center;} .new_join_mail .join_img{ width: 157px; height: 160px;} .new_join_mail .txtbox{ margin: 40px 0;} .new_join_mail .txtbox .tit{ font-size: 32px; font-weight: 700; padding-bottom: 24px; } .new_join_mail .txtbox p{ font-size: 20px; color: #000; font-weight: 400; line-height: 28px;} .new_join_mail .txtbox p strong{ font-size: inherit; font-weight: 600; color: inherit;} .new_join_mail .txtbox .txt{ font-size: 16px; font-weight: 400; color: #000; margin-top: 8px;} .new_join_mail ul{ padding: 20px; background: #F5F5F5; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 500; max-width: 845px; margin: 0 auto; } .new_join_mail ul li{ color: #3C3C3C; font-weight: 300; font-size: 16px; text-align: left;} /* 태블릿 */ @media screen and (max-width: 1024px) { .new_join_mail{ margin: 80px auto; } } /* 태블릿 */ @media screen and (max-width: 834px) { .new_join_mail{ margin: 108px auto 155px; } .new_join_mail .txtbox .tit{ font-size: 28px; padding-bottom: 16px;} .new_join_mail .txtbox p{ font-size: 18px;} .new_join_mail .txtbox p strong{ font-size: inherit; font-weight: 600; color: inherit;} .new_join_mail .txtbox .txt{ font-size: 16px; font-weight: 400; color: #000; margin-top: 8px;} .new_join_mail ul{ max-width: 720px;} } /* 모바일만 */ @media screen and (max-width: 360px) { .new_join_mail{ margin: 40px auto 80px; } .new_join_mail .join_img{ width: 118px; height: 120px;} .new_join_mail .txtbox{ margin: 32px 0;} .new_join_mail .txtbox .tit{ font-size: 24px; padding-bottom: 16px;} .new_join_mail .txtbox p{ font-size: 16px;} .new_join_mail .txtbox p strong{ font-size: inherit; font-weight: 600; color: inherit;} .new_join_mail .txtbox .txt{ font-size: 16px; font-weight: 400; color: #000; margin-top: 8px;} .new_join_mail ul{ max-width: 320px;} } /* new_join 공통 */ .new_join h2{ font-size: 32px; font-weight: 500; color: #111; line-height: 52px; text-align: center; padding-top: 80px;} .new_join h2 span{ font-size: 24px; font-weight: inherit; color: #30beb2; display: block;} .new_join h2 strong{ font-size: inherit; font-weight: 900; color: inherit;} .new_join_form .join_line{ width: 100%; height: 0.5px; margin: 40px 0 10px; background: #ccc; box-sizing: border-box;} /* new_join_form */ .new_join_form{ max-width: 947px; margin: 0 auto; position: relative;} .new_join_form .join_flex{ display: flex; justify-content: space-between;} .new_join_form .new_join_row{ display: flex; padding-top: 30px;} .new_join_form .mar0{ margin: 0!important;} .new_join_form .new_join_row .left{ width: 20%;} .new_join_form .new_join_row .left p{ font-size: 20px; font-weight: 500; color: #000; line-height: 50px;} .new_join_form .new_join_row .left p.lh-24{ line-height: 24px; width: 100px; white-space: pre-wrap;} .new_join_form .new_join_row .left p.lh-30{ line-height: 30px; width: 100px; white-space: pre-wrap;} .new_join_form .new_join_row .right{ width: 80%; position: relative;} .new_join_form .new_join_row .right .width{ display: flex; justify-content: space-between;} .new_join_form .new_join_row .right .width input{ width: 49%;} .new_join_form .new_join_row .right input{ width: 100%; height: 50px; border: 1px solid #bbb; border-radius: 10px; padding: 0 15px; outline: none; font-size: 18px;} .new_join_form .new_join_row .right input:hover {border: 1px solid #30beb2;} .new_join_form .new_join_row .right input:focus {border: 1px solid #30beb2;} .new_join_form .new_join_row .right input::placeholder{ font-size: 18px; color: #999; font-weight: 300;} .new_join_form .new_join_row .right input:read-only{ background: #f5f5f5; border: 1px solid #bbb!important;} .new_join_form .new_join_row .pop_number{ position: absolute; right: 0; font-weight: 400; font-size: 16px; text-decoration: underline; color: #000;} .new_join_form .new_join_row .pop_number a{ font-weight: inherit;} .new_join_form .new_join_row .no_number_txt a { color: #000; font-weight: inherit; } .new_join_form .new_join_row .no_number{ position: absolute; top: 90px; right: 0; width: 280px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25); border-radius: 10px; background: rgba(255,255,255,0.9); z-index: 1;} .new_join_form .new_join_row .no_number .join_close a{ display: block; position: absolute; top: 12px; right: 12px; width: 13px; height: 13px; background: url(../../ui/images/join/pop_close.png); font-size: 0;} .new_join_form .new_join_row .no_number .txt_box{ padding: 16px 20px 10px;} .new_join_form .new_join_row .no_number .txt_box p{ font-size: 14px;} .new_join_form .new_join_row .no_number .txt_box .tit{ font-weight: 500; color: #000; padding: 0;} .new_join_form .new_join_row .no_number .txt_box .sub{ letter-spacing: -1px; font-weight: 300; padding: 9px 0;} .new_join_form .new_join_row .no_number .txt_box a{ font-size: inherit; font-weight: 300;} .new_join_form .new_join_row .right .pw_check{ position: absolute; top: 15px; right: 17px; width: 20px; height: 20px; background: url(../../ui/images/join/join_pw_hide.png); background-size: cover!important; cursor: pointer;} .new_join_form .new_join_row .right .pw_check.check_on{ background: url(../../ui/images/icon/icon_login_pw_check.png);} /* select custom */ .new_join_form .new_join_row .select-box-area{ width: 100%;} .new_join_form .new_join_row .select-box-area .select-box{ position: relative;} .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1{ height: 50px; line-height: 50px; border-radius: 10px; border: 1px solid #bbb; padding-top: 0; padding-left: 15px; align-items: center; font-size: 18px;} .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1 .txt{ font-size: 18px;} .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1:hover{ border: 1px solid #30beb2; } .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1:focus{ border: 1px solid #30beb2;} .new_join_form .new_join_row .select-box-area .select-box .select-box-arrow{ position: absolute; top: 13px; right: 15px; transition: all .2s ease; } .new_join_form .new_join_row .select-box-area .select-box.open .select-box-arrow{ transform: rotate(180deg); transition: all .2s ease;} .new_join_form .new_join_row .select-box-area .select-box-list{ display: none; border: 1px solid #30beb2; border-radius: 10px; margin-top: 10px; max-height: 342px; overflow-y: scroll; z-index: 1;} .new_join_form .new_join_row .select-box-area .select-box-list li:hover{ background: #EFF8F9;} .new_join_form .new_join_row .select-box-area .select-box-list li a{ display: block; width: 100%; height: 100%; padding: 15px; font-size: 18px; font-weight: 300;} .new_join_form .new_join_row .select-box-area .select-box-list li a span{ font-size: inherit; font-weight: inherit;} /* select scroll */ .new_join_form .new_join_row .select-box-area .select-box-list::-webkit-scrollbar{ width: 16px;} .new_join_form .new_join_row .select-box-area .select-box-list::-webkit-scrollbar-track{ background-color: transparent; border: none; } .new_join_form .new_join_row .select-box-area .select-box-list::-webkit-scrollbar-thumb{ background: #30beb2; background-clip: padding-box; border: 5px solid transparent; border-radius: 50px; height: 50px;} .new_join_form .new_join_row .right .number_select .select-box{ display: inline-block; width: 28%;} .new_join_form .join_btn{ display: inline-block; margin-left: 10px; } .new_join_form .new_join_row .right .number_select .select-box-list { width: 100%!important;} .new_join_form .new_join_row .right .number_select .select-box-list li .txt span{ font-family: 'Noto Sans KR',sans-serif; font-weight: 300;color: #444; font-size: 18px;} .new_join_form .new_join_row .right .number_select .select-box-list .country_flex{ display: flex; align-items: center;} .new_join_form .new_join_row .right .number_select .country_img{ width: 22px; height: 22px; border-radius: 50px; object-fit: cover; margin-right: 10px;} .new_join_form .new_join_row .right .number_select .select-box-list .country_name{ margin-right: 8px; font-weight: 300;} .new_join_form .new_join_row .right .number_select .select-box-list .country_num{ font-size: 18px;} .new_join_form .new_join_row .right .number_input{ position: absolute; top: 0; right: 0; width: 70%;} .new_join_form .new_join_row .right .number_input input{ width: 100%; max-width: 160px;} .new_join_form .new_join_row .right .number_input span{ margin: auto 4px; width: 6px; height: 1px; background: #D9D9D9; } .new_join_form .new_join_row .right .number_input_seller{ position: absolute; top: 0; right: 0; width: 70%;} .new_join_form .join_btn button{ height: 50px; line-height: 50px; padding: 0 34px; background: #30beb2; border-radius: 10px; color: #fff; font-size: 18px; } .new_join_form .join_btn.submit_btn button{ height: 70px; line-height: 70px; padding: 0 64px; font-weight:500; font-size: 18px; } .new_join_form .new_join_row .right .look{ padding-top: 20px; } .new_join_form .new_join_row .right .look::before{ display: none;} .new_join_form .new_join_row .right .category_box{ margin-top: 20px;} .new_join_form .new_join_row .right .category_box ul li{ position: relative; font-size: 16px; font-weight: 300; height: 36px; line-height: 36px; padding: 0 15px; border-radius: 8px; } .new_join_form .new_join_row .right .category_box ul li~li{ margin-top: 8px;} .new_join_form .new_join_row .right .category_box ul li span{ font-size: inherit; font-weight: inherit; white-space: nowrap; width: 95%; display: inline-block; overflow: hidden; text-overflow: ellipsis;} .new_join_form .new_join_row .right .category_box ul li .btn_xitem{ position: absolute; top: 50%; transform: translateY(-50%); right: 17px; font-size: 0; width: 20px; height: 20px; display: inline-block;} .new_join_form .new_join_row .right .category_box ul li .btn_xitem::before, .new_join_form .new_join_row .right .category_box ul li .btn_xitem::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; border-radius: 4px; background: #666;} .new_join_form .new_join_row .right .category_box ul li .btn_xitem::before{ transform: translate(-50%,-50%) rotate(-45deg);} .new_join_form .new_join_row .right .category_box ul li .btn_xitem::after{ transform: translate(-50%,-50%) rotate(45deg);} .new_join_form .new_join_row .right .keyword_list ul{ display: flex;align-content:flex-start; flex-wrap:wrap; overflow:auto; } .new_join_form .new_join_row .right .keyword_list ul li{ background: #EFF8F9; padding: 7px 10px; border-radius: 8px; margin: 10px 10px 0 0; font-size: 18px; font-weight: 300; position: relative; white-space: nowrap;} .new_join_form .new_join_row .right .keyword_list ul li a{ display: inline-block; width: 13px; height: 12px; background: url(../../ui/images/join/icon_join_close.png) no-repeat; background-size: cover!important; margin-left: 10px; } .new_join_form .join_submit_btn { display: flex; justify-content: center; margin-top: 34px;} .new_join_form .new_join_row .right p{ font-size: 16px; font-weight: 300; padding-top: 8px; line-height: 20px; display: flex;} .new_join_form .new_join_row .right p i{ display: inline-block; width: 20px; height: 20px; line-height: inherit; background-size: cover!important; margin-right: 5px;} .new_join_form .new_join_row .right p span{ color: inherit; font-size: inherit; max-width: 90%;} .new_join_form .new_join_row .right .default{ color: #444;} .new_join_form .new_join_row .right .default i{ background: url(../../ui/images/join/join_default.png) no-repeat;} .new_join_form .new_join_row .right .error{ color: #FF6720;} .new_join_form .new_join_row .right .error i{ background: url(../../ui/images/join/join_error.png) no-repeat;} .new_join_form .new_join_row .right .taken{ color: #FF6720;} .new_join_form .new_join_row .right .taken i{ background: url(../../ui/images/join/join_error.png) no-repeat; } .new_join_form .new_join_row .right .able{ color: #30BEB2;} .new_join_form .new_join_row .right .able i{ background: url(../../ui/images/join/join_able.png) no-repeat; } .new_join_form .join_check_row.join_flex{ justify-content: start;} .new_join_form .join_check_row input[type=checkbox] { position: relative; top: 1px; width: 20px; height: 20px; border: 1px solid #bbb; cursor: pointer;} .new_join_form .join_check_row input[type=checkbox]::after { content: ''; position: absolute; display: block; top: 1px; left: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .new_join_form .join_check_row input[type=checkbox]:checked { background: #30beb2; border: 1px solid #30beb2;} .new_join_form .join_check_row label{ margin-left: 10px; cursor: pointer;} .new_join_form .join_check_row label a{ color: #30beb2;} /*자동완성 폰트색상 변경*/ .new_join_form .new_join_row .right input.fc-main{ color: #30beb2;} .new_join_form .new_join_row .right .select-box-list li a span.fc-main{ color: #30beb2;} /* 태블릿 */ @media screen and (max-width: 834px) { /* ==================== new_join_form ==================== */ .new_join h2{ font-size: 20px; line-height: 32px; padding-top: 32px;} .new_join h2 span{ font-size: 16px;} .new_join_form .join_line{ margin: 28px 0 0 0;} .new_join_form .new_join_row{ display: block; padding-top: 28px;} .new_join_form .new_join_row .left{ width: 100%;} .new_join_form .new_join_row .left p {font-size: 14px; line-height: 17px; padding-bottom: 8px;} .new_join_form .new_join_row .left p.lh-24{ line-height: 17px; width: 100%;} .new_join_form .new_join_row .right { width: 100%;} .new_join_form .new_join_row .right input{ height: 40px; line-height: 40px; padding: 0 8px; font-size: 14px;} .new_join_form .new_join_row .right input::placeholder{ font-size: 14px;} .new_join_form .new_join_row .right p{ font-size: 14px; line-height: 17px;} .new_join_form .new_join_row .right p::before{ width: 16px; height: 16px; } .new_join_form .new_join_row .right .width{ display: block;} .new_join_form .new_join_row .right .width input{ width: 100%;} .new_join_form .new_join_row .right .width input:nth-child(2){ margin-top: 8px;} .new_join_form .new_join_row .select-box-area .select-box-list{ max-height: 288px;} .new_join_form .new_join_row .select-box-area .select-box-list li a{ display: block; width: 100%; height: 100%; padding: 12px 8px; font-size: 14px;} .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1{ height: 40px; line-height: 40px; padding: 0 8px;} .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1 .txt{ font-size: 14px;} .new_join_form .new_join_row .select-box-area .select-box p.select-box-text1{ font-size: 14px;} .new_join_form .new_join_row .right .number_select .select-box{ width: 100%; } .new_join_form .new_join_row .right .number_select .select-box-list li .txt span{ font-size: 14px;} .new_join_form .new_join_row .right .number_select .select-box-list .country_name{ margin-right: 5px;} .new_join_form .new_join_row .right .number_select .select-box-list .country_num{ font-size: 14px;} .new_join_form .new_join_row .right .number_input { position: relative; top: 0; right: 0; margin-top: 8px; width: 100%; } .new_join_form .new_join_row .right .number_input_seller{ position: relative; top: 0; right: 0; margin-top: 8px; width: 100%; } .new_join_form .new_join_row .right .number_input input{ max-width: 257px;} .new_join_form .new_join_row .select-box-area .select-box .select-box-arrow{ top: 8px; right: 8px;} .new_join_form .new_join_row .right .pw_check{ top: 10px; right: 10px;} .new_join_form .join_btn button{ height: 40px; line-height: 40px; padding: 0 16px; font-size: 14px;} .new_join_form .new_join_row .right .look{ font-size: 14px; padding-top: 8px;} .new_join_form .new_join_row .right .category_box{ margin-top: 8px;} .new_join_form .new_join_row .right .category_box ul li{ font-size: 14px;} .new_join_form .new_join_row .right .category_box ul li .btn_xitem{ right: 12px;} .new_join_form .new_join_row .right .keyword_list ul li { padding: 5px 8px; margin: 8px 4px 0 0; font-size: 14px; font-weight: 300; position: relative;} .new_join_form .new_join_row .right .keyword_list ul li a { width: 8px; height: 8px; margin-left: 10px; } .new_join_form .join_submit_btn{ margin-top: 0;} .new_join_form .join_submit_btn button{ padding: 0 28px;} /*사업자팝업*/ .new_join_form .new_join_row .pop_number{ position: absolute; right: 0; font-weight: 400; font-size: 16px; text-decoration: underline; color: #000;} .new_join_form .new_join_row .pop_number a{ font-weight: inherit;} .new_join_form .new_join_row .no_number_txt a { color: #000; font-weight: inherit; } .new_join_form .new_join_row .no_number{ position: absolute; top: 70px; right: 0; width: 280px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25); border-radius: 10px; background: rgba(255,255,255,0.9); z-index: 1;} .new_join_form .new_join_row .no_number .join_close a{ display: block; position: absolute; top: 12px; right: 12px; width: 13px; height: 13px; background: url(../../ui/images/join/pop_close.png); font-size: 0;} .new_join_form .new_join_row .no_number .txt_box{ padding: 16px 20px 10px;} .new_join_form .new_join_row .no_number .txt_box p{ font-size: 14px;} .new_join_form .new_join_row .no_number .txt_box .tit{ font-weight: 500; color: #000; padding: 0;} .new_join_form .new_join_row .no_number .txt_box .sub{ letter-spacing: -1px; font-weight: 300; padding: 9px 0;} .new_join_form .new_join_row .no_number .txt_box a{ font-size: inherit; font-weight: 300;} .new_join_form .join_check_row input[type=checkbox] { position: relative; top: 3px; width: 16px; height: 16px; border: 1px solid #bbb; cursor: pointer;} .new_join_form .join_check_row input[type=checkbox]::after { content: ''; position: absolute; display: block; top: 1px; left: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .new_join_form .join_check_row input[type=checkbox]:checked { background: #30beb2; border: 1px solid #30beb2;} .new_join_form .join_check_row label{ margin-left: 8px; cursor: pointer; width: 90%;} .new_join_form .join_check_row label a{ color: #30beb2;} } /* 모바일만 */ @media screen and (max-width: 430px) { /* ==================== new_join_main ==================== */ .new_join h2{ font-size: 20px; line-height: 24px; padding-top: 20px;} .new_join h2 span{ font-size: 16px; line-height: 20px; padding-bottom: 12px;} .new_join_form .join_line{ margin: 24px 0 0 0;} .new_join_form .new_join_row{ display: block; padding-top: 24px;} .new_join_form .new_join_row .left{ width: 100%;} .new_join_form .new_join_row .left p { white-space: nowrap; font-size: 14px; line-height: 17px; padding-bottom: 8px;} .new_join_form .new_join_row .right { width: 100%;} .new_join_form .new_join_row .right input{ height: 40px; line-height: 40px; padding: 0 8px;} .new_join_form .new_join_row .right input::placeholder{ font-size: 14px;} .new_join_form .new_join_row .right p{ font-size: 14px; line-height: 17px;} .new_join_form .new_join_row .right p i{ width: 16px; height: 16px; } .new_join_form .new_join_row .right .width{ display: block;} .new_join_form .new_join_row .right .width input{ width: 100%;} .new_join_form .new_join_row .right .width input:nth-child(2){ margin-top: 8px;} .new_join_form .new_join_row .right .number_select .select-box{ width: 100%; } .new_join_form .new_join_row .right .number_input { position: relative; top: 0; right: 0; margin-top: 8px; width: 100%; } .new_join_form .new_join_row .right .number_input input{ max-width: 257px;} .new_join_form .new_join_row .select-box-area .select-box .select-box-arrow{ top: 9px; right: 8px;} .new_join_form .new_join_row .right .pw_check{ width: 18px; height: 18px;} .new_join_form .join_btn button{ height: 40px; line-height: 40px; padding: 0 16px; font-size: 14px;} .new_join_form .new_join_row .right .look{ font-size: 14px; padding-top: 8px;} .new_join_form .new_join_row .right .category_box{ margin-top: 8px;} .new_join_form .new_join_row .right .category_box ul li .btn_xitem{ right: 8px;} .new_join_form .new_join_row .right .keyword_list ul li { padding: 5px 8px; margin: 8px 4px 0 0; font-size: 14px; font-weight: 300; position: relative;} .new_join_form .new_join_row .right .keyword_list ul li a { width: 8px; height: 8px; margin-left: 10px; } .new_join_form .join_submit_btn{ margin-top: 0;} .new_join_form .join_submit_btn button{ padding: 0 28px;} /*사업자팝업*/ .new_join_form .new_join_row .pop_number{ position: absolute; right: 0; top: 65px;} .new_join_form .new_join_row .pop_number a{ font-weight: inherit;} .new_join_form .new_join_row .no_number_txt a { color: #000; font-weight: inherit; } .new_join_form .new_join_row .no_number{ position: absolute; top: 95px; right: 0; width: 280px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25); border-radius: 10px; background: rgba(255,255,255,0.9); z-index: 1;} .new_join_form .new_join_row .no_number .join_close a{ display: block; position: absolute; top: 12px; right: 12px; width: 13px; height: 13px; background: url(../../ui/images/join/pop_close.png); font-size: 0;} .new_join_form .new_join_row .no_number .txt_box{ padding: 16px 20px 10px;} .new_join_form .new_join_row .no_number .txt_box p{ font-size: 14px;} .new_join_form .new_join_row .no_number .txt_box .tit{ font-weight: 500; color: #000; padding: 0;} .new_join_form .new_join_row .no_number .txt_box .sub{ letter-spacing: -1px; font-weight: 300; padding: 9px 0;} .new_join_form .new_join_row .no_number .txt_box a{ font-size: inherit; font-weight: 300;} .new_join_row.mbpt-40{ padding-top: 40px!important;} .new_join_form .join_check_row label{ width: 90%;} } /* join_pop */ .new_mail_pop .layerPopWrap{ font-family: "montserrat",'Noto Sans KR', sans-serif;} .new_mail_pop .layerpopCont{ max-width: 800px;} .new_mail_pop .tit_bg{ background: url(../../ui/images/join/pop_bg.png) no-repeat; width: 100%; height: 47px; background-size: cover;} .new_mail_pop .tit{ color: #fff; font-size: 20px; padding: 10px 0 10px 65px; font-weight: 400; display: inline-block; width: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .new_mail_pop .popCont{ padding: 60px 40px 40px; text-align: center;} .new_mail_pop .popCont img{ width: 157px; height: 160px;} .new_mail_pop .popCont .sub{ padding: 28px 0; font-size: 28px; line-height: 34px; font-weight: 500; color: #000;} .new_mail_pop .popCont ul { padding: 20px; text-align: left; background: #F5F5F5; border-radius: 10px; margin-top: 28px;} .new_mail_pop .popCont ul li{ color: #3C3C3C; font-size: 16px; line-height: 20px; font-weight: 300; } .new_mail_pop .popCont ul li~li{ padding-top: 10px;} .new_mail_pop .layerPopWrap .btnClose{ top: 1px;} .new_mail_pop button{ background: #30beb2; color: #fff; font-size: 20px; font-weight: 500; padding: 16px 32px; border-radius: 10px;} /* 태블릿 */ @media screen and (max-width: 1024px) { .new_mail_pop .layerPopWrap .layerPopCont{ max-width: 600px; min-width: 0px;} .new_mail_pop .tit{ color: #fff; font-size: 16px; padding: 11px 0 11px 65px; font-weight: 400; } .new_mail_pop .popCont{ padding: 60px 40px 40px; text-align: center;} .new_mail_pop .popCont img{ width: 138px; height: 140px;} .new_mail_pop .popCont .sub{ padding: 20px 0; font-size: 20px; line-height: 24px; font-weight: 500; color: #000;} .new_mail_pop .popCont ul { padding: 10px; margin-top: 20px;} .new_mail_pop .popCont ul li{ font-size: 14px; line-height: 20px; } .new_mail_pop .popCont ul li~li{ padding-top: 7px;} .new_mail_pop .layerPopWrap .btnClose{ top: 1px;} .new_mail_pop button{ background: #30beb2; color: #fff; font-size: 16px; font-weight: 500; padding: 12px 24px; border-radius: 10px;} } /* 태블릿 */ @media screen and (max-width: 834px) { .new_mail_pop .layerPopWrap .layerPopCont{ max-width: 600px !important; min-width: 0!important;} .new_mail_pop .tit{ color: #fff; font-size: 16px; padding: 11px 0 11px 65px; font-weight: 400; width: 90%;} .new_mail_pop .popCont{ padding: 60px 40px 40px; text-align: center;} .new_mail_pop .popCont img{ width: 138px; height: 140px;} .new_mail_pop .popCont .sub{ padding: 20px 0; font-size: 20px; line-height: 24px; font-weight: 500; color: #000;} .new_mail_pop .popCont ul { padding: 10px; margin-top: 20px;} .new_mail_pop .popCont ul li{ font-size: 14px; line-height: 20px; } .new_mail_pop .popCont ul li~li{ padding-top: 7px;} .new_mail_pop .layerPopWrap .btnClose{ top: 1px;} .new_mail_pop button{ background: #30beb2; color: #fff; font-size: 16px; font-weight: 500; padding: 12px 24px; border-radius: 10px;} } /* 모바일 */ @media screen and (max-width: 600px) { .new_mail_pop .layerPopWrap .layerPopCont{ max-width: 90%!important; min-width: 90%!important;} .new_mail_pop .tit_bg{ height: 28px; } .new_mail_pop .tit{ color: #fff; font-size: 12px; padding: 6px 0 6px 44px; font-weight: 400; } .new_mail_pop .popCont{ padding: 48px 24px 40px; text-align: center;} .new_mail_pop .popCont img{ width: 118px; height: 120px;} .new_mail_pop .popCont .sub{ padding: 20px 0; font-size: 16px; line-height: 20px; font-weight: 500; color: #000;} .new_mail_pop .popCont ul { padding: 12px; margin-top: 20px;} .new_mail_pop .popCont ul li{ font-size: 14px; line-height: 16px; } .new_mail_pop .popCont ul li~li{ padding-top: 10px;} .new_mail_pop .layerPopWrap .btnClose{ padding: 10px; width: 8px; height: 8px; top: 5px; right: 8px;} .new_mail_pop button{ background: #30beb2; color: #fff; font-size: 14px; font-weight: 500; padding: 12px 16px; border-radius: 10px;} } /*회원가입 autocom 추가 2023-08-22*/ .new_join_form .new_join_row .right .keyword_wrap{ position: relative; width: 100%;} .new_join_form .new_join_row .right .keyword_wrap .autoCom { position: relative; border: 1px solid #30beb2; border-radius:10px; margin-top: 10px; z-index: 2; background: #fff; width: 100%; height: 200px; overflow: hidden;} .new_join_form .new_join_row .right .keyword_wrap .autoCom > div{ position: relative;} .new_join_form .new_join_row .right .keyword_wrap .autoCom > div > ul{ padding-top: 0; position: relative; top: 40px; height: calc(100% - 40px);} .new_join_form .new_join_row .right .keyword_wrap .autoCom .trade-autoCom::before{ display: none;} .new_join_form .new_join_row .right .keyword_wrap .autoCom p{ display: block; width: 100%; font-size: 13px; font-weight: 500; color: #444; margin-right: 0; text-align: left; padding-left: 12px; padding-top: 0; line-height: 40px; position: absolute; top: 2px; color: #30beb2;} .new_join_form .new_join_row .right .keyword_wrap .autoCom .twin-autoCom p{ background: #fff;} .new_join_form .new_join_row .right .keyword_wrap .autoCom .trade-autoCom p{ background: #fafafa;} .new_join_form .new_join_row .right .keyword_wrap .autoCom ul li{ padding: 0;} .new_join_form .new_join_row .right .keyword_wrap .autoCom ul li a { display: block; width: 100%; height: 100%; padding: 12px; font-size: 16px; font-weight: 300;} .new_join_form .new_join_row .right .keyword_wrap .autoCom ul li a:hover {background-color: #EFF8F9;} /* 스크롤바 */ .new_join_form .new_join_row .right .keyword_wrap .autoCom > div > ul::-webkit-scrollbar{ width: 16px;} .new_join_form .new_join_row .right .keyword_wrap .autoCom > div > ul::-webkit-scrollbar-track{ background-color: transparent; border: none; } .new_join_form .new_join_row .right .keyword_wrap .autoCom > div > ul::-webkit-scrollbar-thumb{ background: #30beb2; background-clip: padding-box; border: 5px solid transparent; border-radius: 50px;} @media screen and (max-width: 800px) { .new_join_form .new_join_row .right .keyword_wrap .autoCom{ width: 100%!important; } .new_join_form .new_join_row .right .keyword_wrap{ position: relative; width: calc(100% - 70px);} } @media screen and (max-width: 430px) { /* 자동완성 */ .new_join_form .new_join_row .right .keyword_wrap .autoCom > div > ul{ padding-top: 0; position: relative; top: 30px; height: calc(100% - 30px);} .new_join_form .new_join_row .right .keyword_wrap .autoCom p{ padding-left: 8px; line-height: 30px;} .new_join_form .new_join_row .right .keyword_wrap .autoCom ul li a { font-size: 14px; padding: 8px;} /* 모바일일 경우 flex 삭제 */ .new_join_form .new_join_row .right .keyword_wrap .autoCom{ flex-wrap: wrap; height: calc(100% - 50px); max-height: 300px; min-height: fit-content;} .new_join_form .new_join_row .right .keyword_wrap .autoCom > div { width: 100%; height: 150px;} } /* 20231207 추가 */ .mypage_header.matching_header_mb { display:none; border: none; position: relative; padding: 0;} .mypage_header.matching_header_mb .mypage_header_menu{ display: flex; margin-bottom: 20px;} .mypage_header.matching_header_mb .mypage_header_menu .left{ position: relative; overflow: hidden; width: 100%; max-width: calc(100% - 42px);} .mypage_header.matching_header_mb .mypage_header_menu .mytkSwiper{ margin-top: 0; width: 100%; max-width: calc(100% - 42px); margin-left: 2px;} .mypage_header.matching_header_mb .mypage_header_menu .mytkSwiper .swiper-wrapper{ width: calc(100% - 28px);} .mypage_header.matching_header_mb .mypage_header_menu .swiper-slide{ width: 100%; display: inline-block; } .mypage_header.matching_header_mb .swiper-button-wrap{ width: calc(100% + 4px); height: 100%; margin-left: -2px;} /* 햄버거 */ .mypage_header.matching_header_mb .mypage_header_menu .btn_mypage_mb{ position: relative; top: 0; left: 0; width: 34px; height: 34px; margin-left: 8px; background: #F3F3F3; border-radius: 4px; background: #F3F3F3;} .mypage_header.matching_header_mb .mypage_header_menu .btn_mypage_mb .ham{ position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);} .mypage_header.matching_header_mb .mypage_header_menu .btn_mypage_mb .ham > em { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 14px; height: 2px;} .mypage_header.matching_header_mb .mypage_header_menu .btn_mypage_mb .ham > em:nth-of-type(1) { top: calc(50% - 4px);} .mypage_header.matching_header_mb .mypage_header_menu .btn_mypage_mb .ham > em:nth-of-type(2) { top: 50%;} .mypage_header.matching_header_mb .mypage_header_menu .btn_mypage_mb .ham > em:nth-of-type(3) { top: calc(50% + 4px);} .mypage_header.matching_header_mb .mypage_header_menu .swiper-button-next:after, .mypage_header.matching_header_mb .mypage_header_menu .swiper-button-prev:after{ content: ''!important; width: 28px; height: 28px; background: url(../images/membership/header_arrow.png);box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); border-radius: 50%;} /* 이전 */ .mypage_header.matching_header_mb .mypage_header_menu .swiper-button-prev{ left: 2px; transform: scaleX(-1);} .mypage_header.matching_header_mb .mypage_header_menu .swiper-button-next{ right: 2px;} .mypage_header.matching_header_mb .link .swiper-slide 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.matching_header_mb .link .swiper-slide{ border: 1px solid #ddd; border-radius: 30px; width: fit-content; padding: 4px 12px; white-space: nowrap; margin-right: 4px;} .mypage_header.matching_header_mb .link .swiper-slide a::before{ display: inline-block; position: static; top: 0; -webkit-transform: translateY(0); transform: translateY(0); vertical-align: middle; margin-right: 6px;} .mypage_header.matching_header_mb .link .swiper-slide a{ display: inline-block; } .mypage_header.matching_header_mb .link .swiper-slide:nth-of-type(1) a:before { background-position: 0 0;} .mypage_header.matching_header_mb .link .swiper-slide:nth-of-type(2) a:before { background-position: -32px 0;} .mypage_header.matching_header_mb .link .swiper-slide:nth-of-type(3) a:before { background-position: -64px 0;} .mypage_header.matching_header_mb .link .swiper-slide:nth-of-type(4) a:before { background-position: -96px 0;} .mypage_header.matching_header_mb .link .swiper-slide:nth-of-type(5) a:before { background-position: -128px 0;} .mypage_header.matching_header_mb .link .swiper-slide:nth-of-type(6) a:before { background-position: -160px 0;} /* 하단 */ .mypage_header.matching_header_mb .infoBoxWrap{ display: flex; align-items: center; border: 1px solid #ddd; padding: 10px;} .mypage_header.matching_header_mb .infoBoxWrap .label.both{ min-width: 56px; min-height: 56px;} .mypage_header.matching_header_mb .name{ margin-top: 0; padding: 0 10px;} .mypage_header.matching_header_mb .name strong{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .mypage_header.matching_header .name span{ margin-bottom: 0;} @media screen and (max-width: 800px) { .mypage_header.matching_header_mb { display:block;} } /* 회원가입 경로 추가 2024-03-08*/ .new_join_form .new_join_row .right .path{ width: 100%; height: 50px; border: 1px solid #bbb; border-radius: 10px; padding: 0 15px; font-size: 18px; color: #999; font-weight: 300; overflow: hidden;} .new_join_form .new_join_row .right .path:hover {border: 1px solid #30beb2;} .new_join_form .new_join_row .right .path:focus {border: 1px solid #30beb2;} .new_join_form .new_join_row .right .path p{ font-size: 18px; font-weight: 300; line-height: 50px; color: #999; padding: 0;} @media screen and (max-width: 834px) { .new_join_form .new_join_row .right .path{ height: 40px;padding: 0 8px;} .new_join_form .new_join_row .right .path p{ font-size: 14px; line-height: 40px;} }