/* * Noto Sans KR (Korean) (100,300,400,500,700) */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap'); /* * Montserrat (300,400,500,600,700) */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); /* CSS Document */ *{margin: 0; padding: 0; font-family: 'Montserrat','Noto Sans KR' ; font-weight: 400; } /*********************************** Reset ***********************************/ header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block} html,body{margin:0;padding:0; height: 100%; width: 100%;} body{font-family: 'Montserrat','Noto Sans KR','Malgun Gothic',Verdana,Dotum,AppleGothic,sans-serif; font-size:14px; line-height:20px; overflow-y:scroll; } h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:14px; font-family: 'Montserrat','Noto Sans KR'; font-weight: 400; } ol,ul{margin:0;padding:0;list-style:none; box-sizing:border-box;} div,li,dl,dt,dd,form,iframe,p,a,span,blockquote,i,figure{margin:0;padding:0;box-sizing:border-box} fieldset{margin:0;padding:0;border:0 solid transparent} legend,hr{display:none} label{vertical-align:middle;} img{margin:0;padding:0;border:0;vertical-align:top;} table,th,td{margin:0;padding:0; border-collapse: collapse; border-spacing: 0; border: 0;} input,textarea,select{margin:0;padding:0;background:#fff;font-family:'Montserrat','Noto Sans KR','Malgun Gothic',Verdana,Dotum,AppleGothic,sans-serif;font-size:14px;color:#333;vertical-align:middle;border:0;border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;box-sizing:border-box;outline:0;} caption{visibility:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0} a{font-family:'Montserrat','Noto Sans KR','Malgun Gothic',Verdana,Dotum,AppleGothic,sans-serif;font-size:14px;margin:0;padding:0;border:0;cursor:pointer;background:0} a::-moz-focus-inner{border:0;padding:0}em{font-style:normal} img{vertical-align:top; } a,button{text-decoration:none;color:#333; } a.link:hover,button.link:hover{text-decoration:underline} a,input,button{transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease -in-out;} .no-border{border:none!important} input[type='radio'], input[type='checkbox'] {border:none !important} select {-webkit-appearance: none; /* 네이티브 외형 감추기 */-moz-appearance: none; appearance: none; background-image:url(../../image/common/arrow_select01.png); background-repeat:no-repeat; background-position:99% 50%; padding-left:30px; line-height:40px; height:40px; border:1px solid #DDD;} select::-ms-expand { display: none;}/* IE 10, 11의 네이티브 화살표 숨기기 */ #wrapper { width:100%; max-width: 2560px; margin:0 auto; } /*GNB*/ .gnb_header { position: relative; width: 100%; min-width: 1280px; height:170px; z-index:90; background-color:#8f1314;} .gnb_header .gnb_box, .gnb_header .main_menu { position:relative; max-width: 1680px; min-width: 1280px; padding: 0px 40px; margin:0 auto; } .gnb_header .gnb_box { height:100px; z-index: 10; } .gnb_header .main_menu { height:70px; } .gnb_box .logo { position: absolute; left: 40px; top: 40px; width: 170px; height: 50px; background-image:url(../../image/common/logo.svg); background-size: 170px; background-repeat: no-repeat;} .gnb_box .logo a {width: 100%; height: 100%; display: block;} .gnb_box .search_top { position: absolute; left: 50%; transform: translateX(-50%); top: 40px; width: 380px; border-bottom: 1px solid #FFF; padding-right: 25px;} .gnb_box .search_top .inp-txt { font-weight: 300; color: #FFF; background-color:#8f1314; border: 0px; padding: 0px; border-radius: 0px; } .gnb_box .search_top .inp-txt::placeholder { font-weight: 300; color: #FFF; } .gnb_box .search_top .search_btn { position: absolute; top: 0px; right: 0px; width: 25px; height: 40px; padding-top: 8px; color: #FFF;} .gnb_box .gnb_menu { position: absolute; top: 40px; right: 40px; padding-left: 50px; } .gnb_box .gnb_menu .log a, .gnb_box .gnb_menu .log p { float: left; display: block; margin-left: 26px; height: 30px; text-align: center; position: relative; font-size: 14px; line-height: 30px; color: #FFF; font-weight: 300; } .gnb_box .gnb_menu .language_btn { position: absolute; left: 0px; top: 0px; width: 50px; border: 1px solid rgba(255,255,255,0.5); border-radius: 15px; } .gnb_box .gnb_menu .language_btn>a { height: 28px; display: flex; justify-content: space-around; align-items: center; color: #FFF; padding: 0px 5px; } .gnb_box .gnb_menu .language_btn.active { background-color: #FFF; border: 1px solid rgba(255,255,255,1); } .gnb_box .gnb_menu .language_btn.active>a { color: #8f1314;} .gnb_box .gnb_menu .language_btn .language_over { display: none; width: 50px; padding: 0px 10px 10px 10px;} .gnb_box .gnb_menu .language_btn .language_over a { display: block; width: 100%; font-size: 12px; color: #8f1314; line-height: 20px;} .gnb_box .gnb_menu .active_btn { position: absolute; top: -30px; right: 0px; height: 22px; padding: 0px 5px; background-color: rgba(255,255,255,0.3); border-radius: 3px;} .gnb_box .gnb_menu .active_btn span { font-size: 12px; color: #FFF; font-weight: 300; animation-name: ani_opacity; animation-duration:.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; -webkit-animation-name: ani_opacity;-webkit-animation-duration: .6s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;} @media only screen and (max-width:1520px) { .gnb_box .search_top { left: 40%; } } .gnb_header.myoffice { margin-bottom: 160px;} .gnb_header.shopping_pass { height: 120px;} .gnb_header.shopping_pass .gnb_box { max-width: 1280px;} .gnb_header.shopping_pass .gnb_box .logo { left: 50%; transform: translateX(-50%);} .gnb_header.shopping_pass .gnb_box .gnb_menu { top: 50px;} /*GNB MENU*/ .main_menu .gnb_total_menu .total_btn { position: relative; display: block; width: 16px; height:50px;} .main_menu .gnb_total_menu .total_btn span { display: inline-block; position: relative; top: 50%; left: 50%; width: 100%; height: 16px; transform: translate(-50%,-50%);} .main_menu .gnb_total_menu .total_btn span::before, .main_menu .gnb_total_menu .total_btn span::after {position: absolute; left: 0px; width: 100%; box-sizing: border-box; content: "";} .main_menu .gnb_total_menu .total_btn span::before { top: 0px; height: 100%; border-top: 2px solid #fff; border-bottom: 2px solid #fff; } .main_menu .gnb_total_menu .total_btn span::after { top: 50%; margin-top: -1px; height: 2px;border-top: 2px solid #fff;} .main_menu .gnb_total_menu>ul { opacity: 0; visibility: hidden; position: absolute; top: 70px; width: 230px; border-radius: 20px; background-color: #FFF; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease -in-out;} .main_menu .gnb_total_menu>ul::before { content: ""; position: absolute; top: 0; width: 100%; height: 100%; background-color: transparent; border-radius: 20px; box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.17); z-index: -1;} .main_menu .gnb_total_menu>ul>li { border-bottom: 1px solid #DDD; } .main_menu .gnb_total_menu>ul>li:last-child { border-bottom: 0px;} .main_menu .gnb_total_menu>ul>li>a { display: block; width: 100%; height: 60px; padding:15px; font-size: 16px; color: #333; line-height: 30px; word-break: keep-all; } .main_menu .gnb_total_menu>ul>li.active>a { color: #8f1314;} .main_menu .gnb_total_menu>ul>li>a i { display:inline-block; width:30px; height:30px; background-image:url(../../image/common/icon_menu2.png); background-repeat: no-repeat; background-size:360px 60px; overflow:hidden; text-indent:-9999px; vertical-align:middle; margin-right: 10px;} .main_menu .gnb_total_menu>ul>li:nth-child(1) i { background-position: 0px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(2) i { background-position: -30px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(3) i { background-position: -60px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(4) i { background-position: -90px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(5) i { background-position: -330px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(6) i { background-position: -300px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(7) i { background-position: -120px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(8) i { background-position: -180px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(9) i { background-position: -240px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(10) i { background-position: -210px 0px;} .main_menu .gnb_total_menu>ul>li:nth-child(11) i { background-position: -270px 0px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(1) i { background-position: 0px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(2) i { background-position: -30px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(3) i { background-position: -60px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(4) i { background-position: -90px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(5) i { background-position: -330px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(6) i { background-position: -300px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(7) i { background-position: -120px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(8) i { background-position: -180px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(9) i { background-position: -240px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(10) i { background-position: -210px -30px;} .main_menu .gnb_total_menu>ul>li.active:nth-child(11) i { background-position: -270px -30px;} .main_menu .gnb_total_menu>ul>li.active ul { opacity: 1; visibility: visible; transform: translateX(0px);} .main_menu .gnb_total_menu>ul>li>ul { opacity: 0; visibility: hidden; position: absolute; left: 210px; top: 0px; width: 230px; height: 100%; border-radius: 0px 20px 20px 0px; padding-left: 20px; padding-top: 10px; background-color: #FFF; box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.17); transform: translateX(-50px); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease -in-out; z-index: -2;} .main_menu .gnb_total_menu>ul>li>ul a {display: block; width: 100%; font-size: 15px; color: #666; line-height: 20px; word-break: keep-all; padding: 10px 15px 10px 30px; } .main_menu .gnb_total_menu>ul>li>ul a:hover { color: #8f1314;} .main_menu .gnb_total_menu.active>ul { opacity: 1; visibility: visible; } .main_menu .left_menu, .main_menu .right_menu { position: absolute; top: 0px; display: flex;} .main_menu .left_menu a, .main_menu .right_menu a { position: relative; display: block; font-size: 18px; line-height: 50px; font-weight: 500; margin: 0px 15px;} .main_menu .left_menu a:hover::before, .main_menu .right_menu a:hover::before { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background-color:#ffdca7; border-radius: 50%; content: ""; } .main_menu .left_menu { left: 80px;} .main_menu .right_menu { right: 40px;} .main_menu .left_menu a { color: #FFF;} .main_menu .right_menu a { color: #ffdca7;} .main_menu .right_menu li:last-child a { margin-right: 0px;} .main_menu .right_menu .cart_btn, .main_menu .right_menu .office_btn { height: 50px; line-height: 0px; padding-top: 8px; } .main_menu .right_menu .cart_btn i, .main_menu .right_menu .office_btn i { display:inline-block; width:30px; height:30px; background-image:url(../../image/common/icon_gnb.png); background-repeat: no-repeat; background-size:60px 30px; overflow:hidden; text-indent:-9999px; vertical-align:middle; } .main_menu .right_menu .cart_btn:hover::before, .main_menu .right_menu .office_btn:hover::before { display: none;} .main_menu .right_menu .cart_btn i { background-position: -0px -0px;} .main_menu .right_menu .office_btn i { background-position: -30px -0px;} /*SUB TOP MENU*/ .sub_top_menu {position: absolute; top: 170px; width: 100%; padding: 0px 40px; margin-bottom: 60px; z-index: 80;} .sub_top_menu::before { position: absolute; left: 0px; top: 0px; width: 100%; height: 60px; background-color: #8f1314; content: ""; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease;} .sub_top_menu>ul {position: relative; display: flex; max-width: 1600px; min-width: 1200px; overflow: visible; margin: 0 auto; border-radius: 20px; z-index: 1; background-color: #FFF; border-radius: 20px; } .sub_top_menu>ul::before { content: ""; position: absolute; top: 0; width: 100%; height: 100%; background-color: transparent; border-radius: 20px; box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.17); z-index: -1;} .sub_top_menu>ul>li { position: relative; width: 14%; } .sub_top_menu>ul>li:first-child { width: 16%; padding: 25px 0px 25px 30px;} .sub_top_menu>ul>li:first-child h2 { line-height: 25px; font-size: 22px; text-align: left; color: #8f1314; font-weight: 500; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease;} .sub_top_menu>ul>li:first-child::before { position: absolute; top: 25px; right: 0px; width: 1px; height: 50px; background-color: #DDD; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease; content: ""; } .sub_top_menu>ul>li:last-child a { border-radius: 0px 20px 20px 0px;} .sub_top_menu>ul>li>a { position: relative; display: block; width: 100%; height: 100px; line-height: 100px; font-size: 18px; text-align: center; color: #222; font-weight: 500; z-index: 2; background-color: #FFF; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease; } .sub_top_menu>ul>li>div { position: absolute; width: 100%; top: 80px; background-color:#FFF; border-radius: 0px 0px 20px 20px; padding: 20px 20px 30px; box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.17); z-index: 1; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease; opacity: 0; visibility: hidden; transform: translateY(-30px);} .sub_top_menu>ul>li>div>a { display: block; width: 100%; height: 40px; line-height: 40px; font-size: 15px; text-align: center; color: #444; font-weight: 400;} .sub_top_menu>ul>li>div>a:hover { color:#8f1314;} .sub_top_menu>ul>li.active>a { color:#8f1314;} .sub_top_menu>ul>li.active>div { opacity: 1; visibility: visible; transform: translateY(0px);} .sub_top_menu.flow { position: fixed; top: 0px; } .sub_top_menu.flow>ul>li:first-child { padding: 15px 0px 15px 30px;} .sub_top_menu.flow>ul>li>a { height: 80px; line-height: 80px;} .sub_top_menu.flow>ul>li>div { top: 60px;} .sub_top_menu.flow>ul>li:first-child::before { top: 15px;} .sub_top_menu.flow::before { height: 50px; } .sub_top_menu>ul.consumer>li:first-child { width: 22%;} .sub_top_menu>ul.consumer>li:first-child h2 { line-height: 50px; } .sub_top_menu>ul.consumer>li { width: 26%;} /*SUB MENU*/ .sub_menu { width: 100%; display: flex; justify-content: center; margin-bottom: 50px;} .sub_menu a { display: inline-block; font-size: 17px; line-height: 20px; padding: 10px 26px; color: #000;} .sub_menu a:hover { color: #8f1314;} .sub_menu a.active { color: #8f1314;} /*FOOTER*/ .footer { position:relative; width:100%; min-width: 1280px; padding: 40px 0px; border-top: 1px solid #EEE;} .footer .footer_con { position:relative; width:100%; max-width: 1680px; min-width: 1280px; padding: 0px 80px 0px 40px; margin: 0 auto;} .footer_fixed { position: fixed; bottom: 40px; right: 20px; width: auto; opacity: 0; visibility: hidden; transform: translateY(80px);transition: all .2s linear; cursor: pointer; z-index: 30; } .footer_fixed.active { opacity: 1; visibility: visible; } .footer_fixed.active.on { transform: translateY(0); } .footer_fixed li { margin-top: 20px; padding: 0px; list-style: none;} .footer_fixed li a { display: flex; align-items: center; justify-content: center; position: relative; width: 60px; height: 60px;background-color: #8f1314; border-radius: 50%; overflow: hidden; box-sizing: border-box;} .footer_fixed li a::before, .footer_fixed .top_btn::before { position: absolute; left: 0px; top: 0px; width: 60px; height: 60px; background-image: url(../../image/common/icon_footer_fixed.png); z-index: 1; content: ""; } .footer_fixed li a.cart::before { background-position: 0px 0px; } .footer_fixed li a.lately::before { background-position: -60px 0px; } .footer_fixed .top_btn::before { background-position: -120px 0px; } .footer_fixed .top_btn { position: relative; opacity: 0; } .footer_fixed.on .top_btn { opacity: 1;} .footer_fixed .top_btn > div { display: block; position: relative; width: 60px; height: 60px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); cursor: pointer;} .footer_fixed .top_btn .circle_progress svg path { fill: none;} .footer_fixed .top_btn .circle_progress svg.side_progress_circle path { stroke: #8f1314; stroke-width: 3; box-sizing: border-box;transition: all .2s linear; } .footer_menu { display: flex; width: 100%; margin-bottom: 30px; } .footer_menu a { display: block; font-size: 16px; line-height: 30px; color: #000; font-weight: 300; margin-right: 30px; } @media only screen and (max-width:1360px) { .footer_menu a { margin-right: 15px;} } .footer_text p { display: inline-block; font-size: 15px; line-height: 25px; margin-right: 15px; color: #a0a0a0; } .footer_text p:first-child { margin-right: 10px;} .footer_text p.copy { margin-top: 15px;} .familysite_btn { position: absolute; top: 0px; right: 80px; width: 300px; } .familysite_btn p { position: relative; width: 100%; height: 50px; line-height: 50px; padding-left: 30px; color: #000; font-size: 16px;font-weight: 500; background: #F4F4F4; border-radius: 25px; cursor: pointer; z-index: 3; background-image: url(../../image/common/familysite_icon.png); background-repeat: no-repeat; background-position: 90% 50%;} .familysite_btn .familysite_over { display: none; position: absolute; bottom: 25px; left: 0px; width: 100%; min-width: 130px;height: 208px; background: #fff; border: 1px solid #efefef; border-radius: 8px 8px 0 0; box-sizing: border-box; z-index: 2; padding: 16px 0 25px 20px; overflow-y: auto;} .familysite_btn .familysite_over a { display: block; width: 100%; height: 32px; line-height: 33px; font-size: 16px; color: #000; } .footer_sns { position: absolute; top: 80px; right: 80px;} .ico-footer_sns {display:inline-block; width:40px; height:40px; background:url(../../image/common/icon_footer_sns.png) no-repeat;background-size:200px 40px;overflow:hidden; text-indent:-9999px; vertical-align:middle; } .ico-footer_sns.youtube { background-position: -0px 0px;} .ico-footer_sns.naver { background-position: -40px 0px;} .ico-footer_sns.kakao { background-position: -80px 0px;} .ico-footer_sns.instagram { background-position: -120px 0px;} .ico-footer_sns.facebook { background-position: -160px 0px;} .footer_sns .footer_mark { width: 170px; margin-top: 10px;} .footer_sns .footer_mark img { width: 100%;} /* GUIDE*/ .guide_box { margin-bottom: 60px;} .guide_box .btn-set{ margin-bottom: 40px;} .guide_title { font-size: 40px; line-height: 40px; color: #222; margin-bottom: 20px;} /*INPUT*/ .inp-txt{ width:100%; height:50px; border:1px solid #DDD; font-size:16px; padding:9px 20px; line-height:30px; border-radius: 10px; } .inp-txt::placeholder { color:#999;} .inp-txt::-webkit-input-placeholder {color:#999;} .inp-txt:-ms-input-placeholder {color:#999;} .inp-txt:focus{color: #222; border-color: #333;} .inp-txt[type='text']:disabled { background-color:#EEE;} .inp-txt.both { margin-top:10px;} .inp-txt.disabled {background-color:#EEE;} .inp-txt.disabled:focus{border-color: #DDD;} .inp-txt[type=password]{font-family:'Noto Sans KR',Tahoma,Verdana,AppleGothic,sans-serif;} .inp-txt[type=password]:-ms-input-placeholder{font-family:'Noto Sans KR',Tahoma,Verdana,AppleGothic,sans-serif;} .inp-txt[type=password]::-webkit-input-placeholder{font-family:'Noto Sans KR',Tahoma,Verdana,AppleGothic,sans-serif;} .inp-txt[type=password]:-moz-placeholder{font-family:'Noto Sans KR',Tahoma,Verdana,AppleGothic,sans-serif;} .inp-txt[type=password]::-moz-placeholder{font-family:'Noto Sans KR',Tahoma,Verdana,AppleGothic,sans-serif;} .inp-txt.uppercase {text-transform: uppercase;} /* INPUT type=number 스피너 삭제 */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /*INPUT SET*/ .phone-set {position:relative; display: flex; max-width: 720px;} .phone-set li { width:30%;} .phone-set li:nth-child(2), .phone-set li:nth-child(4) { width:5%; text-align:center; line-height:50px;} .phone-set li .inp-txt { text-align:center;} .kakao_name-set {position:relative; overflow:hidden; } .kakao_name-set li:nth-child(1) { width: 50%;} .kakao_name-set li:nth-child(3) { line-height: 50px; padding-right: 0px; } .kakao_name-set li {float:left; width: 25%; padding-right: 10px; } .name-set {position:relative; overflow:hidden; } .name-set li:first-child { padding-right:10px;} .name-set li:last-child { width: 65%; padding-left:10px; } .name-set li {float:left; width:35%; line-height:50px; } .en_name-set {position:relative; overflow:hidden; } .en_name-set li:first-child { padding-right:5px;} .en_name-set li:last-child { padding-left:5px; } .en_name-set li {float:left; width:50%; line-height:50px; } .email-set {position:relative;overflow:hidden;} .email-set li { width:100%; float:left; padding-right:10px;} .email-set li:nth-child(1) { width:35%} .email-set li:nth-child(2) { width:5%; text-align:center; line-height:50px;} .email-set li:nth-child(3) { width:35%} .email-set li:nth-child(4) { width: 25%; padding-right:0px;} .email-set .select { padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .post-set {position:relative;overflow:hidden} .post-set li {float:left; width:100%; margin-bottom: 10px;} .post-set li:nth-child(1) { width:35%; padding-right:10px; } .post-set li:nth-child(2) { width:25%; padding-right:0px; } .post-set li:last-child { margin-bottom: 0px; } .sponsor-set {position:relative;overflow:hidden} .sponsor-set li:first-child { width:35%; } .sponsor-set li:nth-child(2) { width:25%; padding-right: 0px;} .sponsor-set li:nth-child(3) { width: 100%;} .sponsor-set li:nth-child(3) span { margin-top: 10px;} .sponsor-set li {float:left; padding-right:10px; line-height:40px;} .sponsor-set li .icon_delete {background: url(../../image/common/icon_delete.png) no-repeat center center; height: 40px; width: 40px; display: inline-block; vertical-align: middle; } .sponsor-set li .icon_delete:hover {background-image: url(../../image/common/icon_delete_hover.png)} /* 추천 및 후원인 정보 이름 검색 추가 */ .sponsor-set.plus {position:relative;overflow:hidden;} .sponsor-set.plus li:first-child { width:200px; } .sponsor-set.plus li:nth-child(2) { width:200px;} .sponsor-set.plus li:nth-child(3) { width: 100px;} .sponsor-set.plus li:nth-child(4) span { width: 100%; font-size: 15px; padding-top: 15px;} .sponsor-set.plus li:nth-child(4) span::after { top: 15px;} .sponsor-set.plus li {float:left; padding-right:10px; line-height:50px;} .sponsor-set.plus li .icon_delete {background: url(../../image/common/icon_delete.png) no-repeat center center; height: 50px; width: 40px; display: inline-block; vertical-align: middle; } .sponsor-set.plus li .icon_delete:hover {background-image: url(../../image/common/icon_delete_hover.png)} .bank-set {position:relative;overflow:hidden} .bank-set li { float:left; padding-right:10px;} .bank-set li:nth-child(1) { width:35%; } .bank-set li:nth-child(2) { width:40%;} .bank-set li:nth-child(3) { width:25%; padding-right:0px;} .join_file-set {position:relative;overflow:hidden;} .join_file-set li {float: left; padding-right: 10px; line-height: 50px; position: relative;} .join_file-set li:nth-child(1) { width: 75%;} .join_file-set li:nth-child(2) {width: 25%;} .join_file-set .file_button { position: absolute; width: 100%; height: 50px; vertical-align: top; opacity: 0; cursor: pointer; top: 0; left: 0; z-index: 1;} .join_file-set .file_button:hover + .btn { background-color: #F4F4F4; cursor: pointer; } .birthday-set {position:relative;overflow:hidden;} .birthday-set li { float:left; padding-right:10px;} .birthday-set li:nth-child(1) { width:30%;} .birthday-set li:nth-child(2) { width:15%;} .birthday-set li:nth-child(3) { width:15%;} .birthday-set li:nth-child(4) { width:40%; padding-right: 0px; line-height: 50px;} .social_security-set {position:relative;overflow:hidden;} .social_security-set li { width:100%; float:left; padding-right:10px;} .social_security-set li:nth-child(1) { width:35%} .social_security-set li:nth-child(2) { width:5%; text-align:center; line-height:50px;} .social_security-set li:nth-child(3) { width:35%} .social_security-set li:nth-child(4) { width: 25%; padding-right:0px;} .file-set {position:relative;overflow:hidden; width: 670px;} .file-set li {float: left; padding-right: 10px; line-height: 50px; position: relative;} .file-set li:nth-child(1) { width: 75%;} .file-set li:nth-child(2) {width: 25%;} .file-set .file_button { position: absolute; width: 100%; height: 50px; vertical-align: top; opacity: 0; cursor: pointer; top: 0; left: 0; z-index: 1;} .file-set .file_button:hover + .btn { background-color: #F4F4F4; cursor: pointer; } .cardnum-set {position:relative;overflow:hidden} .cardnum-set li { float: left; width:20%; padding-right: 10px;} .cardnum-set li:last-child {padding-right: 0px;} .cardname-set {position:relative;overflow:hidden} .cardname-set li { float: left; width:40%; padding-right: 10px;} .cardinfo-set {position:relative;overflow:hidden} .cardinfo-set li { float: left; width:20%; padding-right: 10px;} .cardinfo-set li:first-child { width:40%; } .cardpay-set {position:relative;overflow:hidden} .cardpay-set li {float:left; width:100%; } .cardpay-set li:nth-child(1) { width:70%; padding-right:10px; } .cardpay-set li:nth-child(2) { width:30%; padding-right:0px; } .auto_day-set {position:relative;overflow:hidden; margin-bottom: 30px;} .auto_day-set li { float: left; width:35%; padding-right: 10px;} .auto_day-set li:nth-child(2) { width:100%; } /* SELECT BOX */ .select {display:inline-block; width:100%; height:50px; border:1px solid #ddd; font-size:16px; color: #999; padding-left:20px; background-image:url(../../image/common/arrow_select01.png); border-radius: 10px; } .select:focus {color:#000; background-image:url(../../image/common/arrow_select01_focus.png); } /* TEXTAREA */ .textarea { width: 100%; height: 350px; font-size: 16px; line-height: 25px; padding: 20px; border: 1px solid #DDD; border-radius: 10px; } .textarea:focus {color: #222; border-color: #333;} /* CHECK BOX */ input[type="checkbox"].check_box {display: none;} input[type="checkbox"].check_box + label { position: relative; display: inline-block; padding-left: 30px; font-size: 16px; line-height: 21px; min-height: 22px; margin-right: 10px; cursor: pointer; color: #666; word-break: keep-all;} input[type="checkbox"].check_box:checked + label {color: #8f1314;} input[type="checkbox"].check_box + label::before {position: absolute; left: 0px; top: 0px; width: 22px; height: 22px; overflow: hidden; background-image:url(../../image/common/icon_check_type.png); background-repeat: no-repeat; background-position: 0px 0px; background-size:22px 66px; content: "";} input[type="checkbox"].check_box:checked + label::before {background-position: 0px -44px;} input[type="checkbox"].check_box + label:last-child {margin-right: 0;} /* RADIO BOX */ input[type="radio"].radio_box {display: none;} input[type="radio"].radio_box + label { position: relative; display: inline-block; padding-left: 30px; font-size: 16px; line-height: 21px; min-height: 22px; margin-right: 10px; cursor: pointer; color: #666; word-break: keep-all;} input[type="radio"].radio_box:checked + label {color: #8f1314;} input[type="radio"].radio_box + label::before {position: absolute; left: 0px; top: 0px; width: 22px; height: 22px; overflow: hidden; background-image:url(../../image/common/icon_radio_type.png); background-repeat: no-repeat; background-position: 0px 0px; background-size:22px 66px; content: "";} input[type="radio"].radio_box:checked + label::before {background-position: 0px -44px;} input[type="radio"].radio_box + label:last-child {margin-right: 0;} input[type="radio"].radio_box.both + label { margin-top: 10px;} /*BTN SET*/ .btn {display:inline-block; width:100%; height:50px;line-height:48px; vertical-align:middle; text-align:center; font-size:16px; color:#FFF; font-weight: 400; border-radius: 10px;} .btn.btn-sm{font-size:14px;height:40px;line-height:38px;} .btn.btn-lg{font-size:18px;height:60px;line-height:58px; font-weight:500;} .btn.btn-in { width:110px; margin-left:10px;} .btn.btn-block{display:block} .btn.both { margin-top: 10px;} .btn.btn-grey{border:1px solid #888;color:#888;} .btn.btn-grey.btn-full{background-color:#888; color:#FFF;} .btn.btn-grey:hover { background-color:#f4f4f4; } .btn.btn-grey.btn-full:hover {background-color:#777; border-color:#777; color:#FFF;} .btn.btn-black{border:1px solid #000; color:#000;} .btn.btn-black.btn-full{background-color:#000; color:#FFF;} .btn.btn-black:hover { background-color:#f4f4f4; } .btn.btn-black.btn-full:hover {background-color:#333; border-color:#333; color:#FFF;} .btn.btn-red{border:1px solid #8f1314; color:#8f1314;} .btn.btn-red.btn-full{background-color:#8f1314; color:#FFF;} .btn.btn-red:hover { background-color:#f4f4f4; } .btn.btn-red.btn-full:hover {background-color:#750001; border-color:#750001; color:#FFF;} .btn.btn-text{border:1px solid #888;color:#888;} .btn.btn-text.btn-full{background-color:#888; color:#FFF;} .btn.btn-text:hover { background-color:#FFF; } .btn.btn-text.btn-full:hover {background-color:#888; border-color:#888; color:#FFF;} .btn.btn-kakao { display:block; background-color: #fce000; color: rgba(0,0,0,0.85);} .btn.btn-kakao i {display: inline-block; width:40px; height:40px; background:url(../../image/common/kakao_logo02.png) no-repeat; background-size:28px 28px; vertical-align: middle; background-position: center center; } .btn.btn-kakao:hover { background-color:#e9cf00 ;} .btn.btn-naver { display:block; background-color: #00c73c; color: rgba(0,0,0,0.85);} .btn.btn-naver i {display: inline-block; width:40px; height:40px; background:url(../../image/common/kakao_logo02.png) no-repeat; background-size:36px 36px; vertical-align: middle; } .btn.btn-naver:hover { background-color:#00ab34 ;} .btn_arrow { position: relative; display: inline-block; width: auto; height: 30px; line-height: 20px; font-size:16px; color:#555; font-weight:500; padding: 5px 20px 5px 0px; font-weight: 400; } .btn_arrow:before,.btn_arrow:after{position: absolute; right: 0px; width: 8px; height: 2px; background-color: #666; content: "";} .btn_arrow:before {top: 16px; transform:rotate(-45deg);} .btn_arrow:after {top: 10px; transform:rotate(-135deg);} .btn_arrow:hover { color:#8f1314; } .btn_arrow:hover:before,.btn_arrow:hover:after,.btn_arrow:hover i {background-color: #8f1314;} div.btn-set {position:relative;overflow:hidden; text-align:center;} div.btn-set .btn { margin-left:10px;} div.btn-set .btn:first-child { margin-left:0px;} div.btn-set .btn.left { float:left; margin-left:0px; margin-right:10px;} div.btn-set .btn.right { float:right;} div.btn-set .btn.right:first-child { margin-left:10px;} div.btn-set .btn.disabled { background-color:#999; color:#FFF; cursor: default;} div.btn-set .btn.disabled:hover {background-color:#999; color:#FFF;} div.btn-set .soldout { width: 100%; height: 60px; background-color: #F4F4F4; font-size: 18px; line-height: 60px; color: #222; border: 1px solid #DDD; border-radius: 10px; } ul.btn-set {position:relative;overflow:hidden; text-align:center;} ul.btn-set>li {float: left; padding: 0px 10px;} ul.btn-set>li:first-child { padding-left: 0px;} ul.btn-set>li:last-child { padding-right: 0px;} ul.btn-set.set02>li { width: 50%;} ul.btn-set.set03>li { width: 33.3%;} ul.btn-set.set04>li { width: 25%;} ul.btn-set.set05>li { width: 20%;} ul.btn-set.set06>li { width: 16.6%;} ul.btn-set.set07>li { width: 14.2%;} ul.btn-set.set08>li { width: 12.5%;} .btn-set-text {position:relative;overflow:hidden; text-align:center; padding-top:20px; } .btn-set-text p { display:inline-block; font-size:16px; line-height:25px; color:#333; vertical-align: top; } /*BTN SIZE*/ .wid_all {width: 100%;} .wid_900 {width: 900px;} .wid_650 {width: 650px;} .wid_600 {width: 600px;} .wid_590 {width: 590px;} .wid_540 {width: 540px;} .wid_515 {width: 515px;} .wid_480 {width: 480px;} .wid_440 {width: 440px;} .wid_410 {width: 410px;} .wid_400 {width: 400px;} .wid_350 {width: 350px;} .wid_340 {width: 340px;} .wid_300 {width: 300px;} .wid_260 {width: 260px;} .wid_255 {width: 255px;} .wid_240 {width: 240px;} .wid_220 {width: 220px;} .wid_200 {width: 200px;} .wid_180 {width: 180px;} .wid_160 {width: 160px;} .wid_150 {width: 150px;} .wid_140 {width: 140px;} .wid_130 {width: 130px;} .wid_120 {width: 120px;} .wid_110 {width: 110px;} .wid_100 {width: 100px;} .wid_90 {width: 90px;} .wid_80 {width: 80px;} .wid_70 {width: 70px;} .wid_60 {width: 60px;} /* 폰트컬러 */ span.alert_text { position:relative; padding-left:28px; color:#8f1314; font-size:15px; line-height:20px; display:inline-block; word-break: keep-all;} span.alert_text::after { position:absolute; width:18px; height:18px; left:0px; top:0px; line-height:18px; border-radius:10px; background-color:#fff; border: 1px solid #8f1314; content:"!"; color:#8f1314; font-weight:600; text-align:center;} span.alert_text.both, span.bl_text.both, span.dot_text.both { margin-top:10px;} span.alert_text.black { color:#222;} span.alert_text.black::after { border: 1px solid #222; color:#222;} span.alert_text.grey { color:#999;} span.alert_text.grey::after { border: 1px solid #999; color:#999;} span.bl_text { position:relative; display:block; padding-left:15px; color:#666; font-size:14px; line-height:20px; text-align: left;} span.bl_text::after { position:absolute; width:4px; height:4px; left:5px; top:8px; border-radius:50%; background-color:#666; content:"";} span.bl_text.red::after { background-color:#8f1314;} span.bl_text.grey::after { background-color:#999;} span.dot_text { position:relative; padding-left:15px; color:#222; font-size:16px; line-height:20px; text-align:left; display:inline-block;} span.dot_text::after { position:absolute; font-size:18px; left:0px; top:4px; line-height:18px; border-radius:10px; content:"*"; color:#666; font-weight:700; text-align:center;} span.dot_text.red::after { color:#8f1314;} span.dot_text.grey::after { color:#999;} span.font_red {color: #8f1314;} span.font_grey {color: #999;} span.font_black {color: #222;} span.font_blue { color: #004687;} span.in_text ,input.in_text, select.in_text ,label.in_text { margin-left:10px;} /*TAB*/ #tab_con>div { display: none;} #tab_con>ul { display: none;} #tab_con>div { display: none;} #tab1_con>div { display: none;} #tab2_con>div { display: none;} #tab3_con>div { display: none;} #tab4_con>div { display: none;} #tab_con>ul { display: none;} #tab1_con>ul { display: none;} #tab2_con>ul { display: none;} #tab3_con>ul { display: none;} #tab4_con>ul { display: none;} .top_tab_menu { width: 100%; display: flex; margin-bottom: 80px; } .top_tab_menu a { position: relative; flex: 1; display: block; height: 80px; border: 1px solid #cdcdcd; margin-left: -1px; font-size: 24px; line-height: 80px; text-align: center; color: #cdcdcd; font-weight: 600; } .top_tab_menu a:hover { color: #8f1314;} .top_tab_menu a.active { color: #8f1314; border-color: #8f1314; z-index: 1;} .tab_menu { position: relative; width: 100%; margin-bottom: 80px; display: flex; } .tab_menu::before { position: absolute; left: 0px; bottom: 0px; width: 100%; border-bottom: 1px solid #cdcdcd; content: '';} .tab_menu a { position: relative; flex: 1; display: block; height: 80px; font-size: 24px; line-height: 80px; text-align: center; color: #cdcdcd; } .tab_menu a:hover { color: #8f1314; } .tab_menu a.active { color: #8f1314; font-weight: 600; z-index: 1;} .tab_menu a.active::before { position: absolute; left: 0px; bottom: 0px; width: 100%; border-bottom: 2px solid #8f1314; content: '';} .tab_menu_sub { width: 100%; display: flex; margin-bottom: 80px; } .tab_menu_sub a { position: relative; flex: 1; display: block; height: 60px; border: 1px solid #cdcdcd; margin-left: -1px; font-size: 18px; line-height: 60px; text-align: center; color: #cdcdcd; } .tab_menu_sub a:first-child { border-left: 0px;} .tab_menu_sub a:last-child { border-right: 0px;} .tab_menu_sub a:hover { color: #8f1314;} .tab_menu_sub a.active { color: #FFF; border-color: #8f1314; background-color: #8f1314; z-index: 1;} #co_tab_con>div{ opacity: 0; visibility: hidden; height: 0px;} #co_tab_con>div.active { opacity: 1; visibility: visible; height: auto;} /*PAGE Animation************************************************/ .ani {opacity:0; transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease -in-out;} /*Animation Position */ .ani.top{transform:translateY(-50px); -webkit-transform:translateY(-50px); } .ani.bottom{transform:translateY(50px); -webkit-transform:translateY(50px);} .ani.left{transform:translateX(-50px); -webkit-transform:translateX(-50px);} .ani.right{transform:translateX(50px); -webkit-transform:translateX(50px);} .ani.scale {transform:scale(1.1,1.1)} /*Animation Active************************************************/ .ani.active { opacity:1; transform:translate(0px,0px) scale(1,1); -webkit-transform:translate(0px,0px) scale(1,1); } /*Animation Delay Time************************************************/ .ani.d_1 { transition-delay:0.2s; -webkit-transition-delay:0.2s;} .ani.d_2 { transition-delay:0.4s; -webkit-transition-delay:0.4s;} .ani.d_3 { transition-delay:0.6s; -webkit-transition-delay:0.6s;} .ani.d_4 { transition-delay:0.8s; -webkit-transition-delay:0.8s;} .ani.d_5 { transition-delay:1s; -webkit-transition-delay:1s;} .ani.d_6 { transition-delay:1.2s; -webkit-transition-delay:1.2s;} .ani.d_7 { transition-delay:1.4s; -webkit-transition-delay:1.4s;} .ani.d_8 { transition-delay:1.6s; -webkit-transition-delay:1.6s;} .ani.d_9 { transition-delay:1.8s; -webkit-transition-delay:1.8s;} .ani.d_10 { transition-delay:2s; -webkit-transition-delay:2s;} .ani.d_11 { transition-delay:2.2s; -webkit-transition-delay:2.2s;} @keyframes ani_time { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes ani_opacity { 0% { opacity: 1; } 100% { opacity: 0.3; } } @keyframes ani_width { 0% { width: 0%;} 100% { width: 100%; } } /*SUB TOP TITLE*/ .sub_top_title {position: relative; width: 100%; overflow: hidden; margin-bottom: 60px;} .sub_top_title::before { position: absolute; left: 0px; top: 0px; width: 100%; height: 110px; background-color: #8f1314; content: ""; } .sub_top_title>div {position: relative; display: block; max-width: 1680px; min-width: 1280px; overflow: visible; margin: 0 auto; padding: 0px 40px; border-radius: 20px; z-index: 1; } .sub_top_title>div img { width: 100%; overflow: hidden; border-radius: 20px; } /*SUB TITLE*/ .sub_title { position: relative; display: block; width: 1280px; margin: 0 auto; padding: 0px 40px; margin-bottom: 40px; } .sub_title h2 { font-size: 36px; line-height: 40px; font-weight: 700; color: #000; text-align: center;} .sub_title.red { width: 1200px; padding: 0px;} .sub_title.red h2 { color: #8f1314;} /*LINEMAP*/ .linemap_info { position: relative; display: flex; width: 1280px; margin: 0 auto; padding: 0px 40px; margin-top: 40px; margin-bottom: 40px; } .linemap_info li { font-size: 15px; color: #777; font-weight: 300; background-image: url(../../image/common/icon_linemap.png); background-position: 12px 50%; background-repeat: no-repeat; padding-left: 30px;} .linemap_info li:first-child { background-image: none; padding-left: 0px;} /*CONTENT*/ .content { padding-bottom:100px;} .content.main { padding-bottom: 0px;} .sub_content { position: relative; width:100%; overflow: hidden; } .sub_content .content_box { position:relative; width:1280px; padding: 0px 40px; margin: 0 auto; } .sub_content .content_box.full { width:100%; padding: 0px; } .content_box li.no_data { width: 100%; height: 300px; justify-content: center; text-align: center; padding: 180px 0px 120px; font-size: 18px; color: #999; cursor: default; background-image:url("../../image/common/icon_no_data.png"); background-repeat: no-repeat; background-position: center 90px; } .content_box li.no_data:hover { background-color: #FFF;} /*CONTENT TOP*/ .content_top { position: relative; width: 1200px; min-height: 50px; margin: 0 auto 50px; z-index: 5;} .content_top .category_menu { overflow: hidden;} .content_top .category_menu a{position: relative; display: inline-block; height: 50px; float: left; font-size:18px; line-height:50px; color:#999; margin-right: 25px; padding-right: 25px; } .content_top .category_menu a:hover { color: #8f1314;} .content_top .category_menu a:before {position: absolute; right: -1px; top: 18px; width: 1px; height: 15px; background-color: #DDD; content: "";} .content_top .category_menu a:last-child { margin-right: 0px; padding-right: 0px;} .content_top .category_menu a:last-child::before { display: none;} .content_top .category_menu a.active { color:#8f1314; cursor: default;} .content_top .category_menu.search_type { padding-right: 400px;} .content_top .total_sum { display: inline-block; font-size: 16px; line-height: 20px; color: #8d8d8d; margin-left: 15px;} .content_top .select_self { width:160px; } .content_top .select_self .select { background-position: 90% 50%; border-radius: 0px;} .content_top .info_text { margin-top: 40px;;} .content_top .info_title { display: inline-block; font-size:32px; line-height:50px; font-weight: 700; color:#000; } .content_top .auto_order_self { position: absolute; top: 0px; right: 510px; width:170px; } .content_top .auto_order_self .select { background-position: 90% 50%; border-radius: 25px;} .content_top.shopping { padding-bottom: 20px; border-bottom: 1px solid #e1e1e1; ;} .day_content_top { position: relative; width: 1200px; margin: 0;} .day_content_top ul.search_box { width: auto;} .day_content_top ul.search_box li:nth-child(1), .day_content_top ul.search_box li:nth-child(2) { width: 120px;} .day_content_top ul.search_box li:nth-child(2) { border-left: 1px solid #DDD;} /* SEARCH BOX*/ ul.search_box {position: absolute; bottom: 0px; right: 0px; display: block; width: 400px; height: 50px; overflow: hidden; display: flex; justify-content: space-between; border: 1px solid #DDD; } ul.search_box li input {width: 100%; height: 48px; line-height: 48px; border: none; padding-left: 16px;} ul.search_box li .select {height: 48px; background-position:95% 50%; border: none; padding-left: 20px;} ul.search_box li:last-child a {display: flex; justify-content: center; align-items: center; color: #FFF; width: 50px; height: 48px; background-color: #8f1314; } ul.search_box li:last-child a:hover { background-color: #750001;} ul.search_box li:nth-child(1) { width: 348px;} ul.search_box li:nth-child(2) { width: 50px;} /* SEARCH BOX SELECT */ ul.search_box.select_type li:nth-child(1) { width: 120px;} ul.search_box.select_type li:nth-child(2) { width: 228px;} ul.search_box.select_type li:nth-child(3) { width: 50px;} /* SEARCH BOX CALENDAR */ ul.search_box.calendar_type { width: 662px;} ul.search_box.calendar_type li:nth-child(1),ul.search_box.calendar_type li:nth-child(5) { width: 50px; font-size: 14px; line-height: 50px; color: #222; text-align: center; background-color: #F4F4F4; border-right: 1px solid #DDD;} ul.search_box.calendar_type li:nth-child(4) { border-right: 1px solid #DDD;} ul.search_box.calendar_type li:nth-child(3), ul.search_box.calendar_type li:nth-child(4),ul.search_box.calendar_type li:nth-child(7), ul.search_box.calendar_type li:nth-child(8){ width: 70px; } ul.search_box.calendar_type li:nth-child(3) .select, ul.search_box.calendar_type li:nth-child(4) .select, ul.search_box.calendar_type li:nth-child(7) .select, ul.search_box.calendar_type li:nth-child(8) .select{ padding-left: 5px;} ul.search_box.calendar_type li:nth-child(2), ul.search_box.calendar_type li:nth-child(6) { width: 115px; } ul.search_box.calendar_type li:nth-child(9) { width: 50px;} /* SEARCH BOX ORDER CALENDAR */ ul.search_box.order_calendar_type { width: 782px;} ul.search_box.order_calendar_type li:nth-child(1) { width: 120px; border-right: 1px solid #DDD;} ul.search_box.order_calendar_type li:nth-child(2),ul.search_box.order_calendar_type li:nth-child(6) { width: 50px; font-size: 14px; line-height: 50px; color: #222; text-align: center; background-color: #F4F4F4; border-right: 1px solid #DDD;} ul.search_box.order_calendar_type li:nth-child(5) { border-right: 1px solid #DDD;} ul.search_box.order_calendar_type li:nth-child(4), ul.search_box.order_calendar_type li:nth-child(5),ul.search_box.order_calendar_type li:nth-child(8), ul.search_box.order_calendar_type li:nth-child(9){ width: 70px; } ul.search_box.order_calendar_type li:nth-child(4) .select, ul.search_box.order_calendar_type li:nth-child(5) .select, ul.search_box.order_calendar_type li:nth-child(8) .select, ul.search_box.order_calendar_type li:nth-child(9) .select{ padding-left: 5px;} ul.search_box.order_calendar_type li:nth-child(3), ul.search_box.order_calendar_type li:nth-child(7) { width: 115px; } ul.search_box.order_calendar_type li:nth-child(10) { width: 50px;} /* SEARCH BOX SELECT + CALENDAR*/ ul.search_box.select_calendar_type {width: 1200px;} ul.search_box.select_calendar_type li .select { padding-left: 15px;} ul.search_box.select_calendar_type li:nth-child(1){ width: 85px;} ul.search_box.select_calendar_type li:nth-child(2){ width: 115px;} ul.search_box.select_calendar_type li:nth-child(3){ width: 130px;} ul.search_box.select_calendar_type li:nth-child(4),ul.search_box.select_calendar_type li:nth-child(8) { width: 50px; font-size: 14px; line-height: 50px; color: #222; text-align: center; background-color: #F4F4F4; border-right: 1px solid #DDD;} ul.search_box.select_calendar_type li:nth-child(6), ul.search_box.select_calendar_type li:nth-child(7),ul.search_box.select_calendar_type li:nth-child(10), ul.search_box.select_calendar_type li:nth-child(11){ width: 70px; } ul.search_box.select_calendar_type li:nth-child(6) .select, ul.search_box.select_calendar_type li:nth-child(7) .select, ul.search_box.select_calendar_type li:nth-child(10) .select, ul.search_box.select_calendar_type li:nth-child(11) .select{ padding-left: 5px;} ul.search_box.select_calendar_type li:nth-child(9), ul.search_box.select_calendar_type li:nth-child(5) { width: 100px; } ul.search_box.select_calendar_type li:nth-child(12) { width: 115px;} ul.search_box.select_calendar_type li:nth-child(13) { width: 130px;} ul.search_box.select_calendar_type li:nth-child(14) { width: 50px;} ul.search_box.select_calendar_type li:nth-child(1), ul.search_box.select_calendar_type li:nth-child(2), ul.search_box.select_calendar_type li:nth-child(3), ul.search_box.select_calendar_type li:nth-child(7), ul.search_box.select_calendar_type li:nth-child(11), ul.search_box.select_calendar_type li:nth-child(12) { border-right: 1px solid #DDD;} /* SEARCH BOX SELF ALLOWANCE*/ ul.search_box.self_allowance_type { width: 100%; border-radius: 0px; overflow: visible; border: none;} ul.search_box.self_allowance_type li { width: 120px; border: 1px solid #ddd;} ul.search_box.self_allowance_type li span.dot_text { display: block; line-height: 25px;} ul.search_box.self_allowance_type li span.dot_text::after { top: 9px;} ul.search_box.self_allowance_type li:nth-child(1) { width: 670px; border: none;} ul.search_box.self_allowance_type li:nth-child(2) { overflow: hidden; border-right: none;} ul.search_box.self_allowance_type li:nth-child(4) { width: 40px; font-size: 14px; line-height: 48px; color: #333; text-align: center; border-left: none; border-right: none;} ul.search_box.self_allowance_type li:nth-child(3), ul.search_box.self_allowance_type li:nth-child(6) { width: 100px; border-left: none; border-right: none;} ul.search_box.self_allowance_type li:last-child { width: 50px; border-left: none;} ul.search_box.self_allowance_type li:nth-child(5) {border-left: none; border-right: none;} /* SEARCH BOX MONTH */ ul.search_box.month_type { width: 240px;} ul.search_box.month_type li { width: 119px;} ul.search_box.month_type li:last-child { border-left: 1px solid #DDD;} ul.search_box.month_type li:last-child .select { background-position: 90% 50%; } /* SEARCH BOX MONTH TO */ ul.search_box.month_to_type {width: 530px;} ul.search_box.month_to_type li { width: 119px;} ul.search_box.month_to_type li:nth-child(3) { width: 40px; font-size: 14px; line-height: 50px; color: #222; text-align: center;} ul.search_box.month_to_type li:nth-child(2), ul.search_box.month_to_type li:nth-child(5) { width: 100px;} ul.search_box.month_to_type li:last-child { width: 50px; } /* SEARCH BOX MONTH TO + NAME */ ul.search_box.month_name_type {width: 680px;} ul.search_box.month_name_type li { width: 119px;} ul.search_box.month_name_type li:nth-child(3) { width: 40px; font-size: 14px; line-height: 50px; color: #222; text-align: center;} ul.search_box.month_name_type li:nth-child(2), ul.search_box.month_name_type li:nth-child(5) { width: 100px;} ul.search_box.month_name_type li:nth-child(6) { width: 150px;} ul.search_box.month_name_type li:last-child { width: 50px; } /* SEARCH BOX TREE VIEW */ ul.search_box.tree_view_type { position: relative; height: auto; flex-wrap: wrap; width: 1200px; border: 0px;} ul.search_box.tree_view_type li:nth-child(1), ul.search_box.tree_view_type li:nth-child(2), ul.search_box.tree_view_type li:nth-child(3),ul.search_box.tree_view_type li:nth-child(4),ul.search_box.tree_view_type li:nth-child(5) { width: calc(20% - 10px); line-height: 48px; } ul.search_box.tree_view_type li:nth-child(1) > a, ul.search_box.tree_view_type li:nth-child(2) > a, ul.search_box.tree_view_type li:nth-child(3) > a {display: block; line-height: 50px; width: 100%; height: 50px; font-size: 15px; color: #fff; border-radius: 0px; } ul.search_box.tree_view_type li:nth-child(4) .select,ul.search_box.tree_view_type li:nth-child(5) .select { height: 50px; background-color: #FFF; border: 1px solid #DDD; border-radius: 0px;} ul.search_box.tree_view_type li:nth-child(5) { width: 20%; } ul.search_box.tree_view_type li:nth-child(6) { width: calc(70% - 10px); line-height: 48px; border: 1px solid #DDD; margin-right: 10px; margin-top: 10px; padding-left: 10px;} ul.search_box.tree_view_type li:nth-child(6)>span { background-color: #F4F4F4; width: 60px; text-align: center; line-height: 48px; display: inline-block; border-right: 1px solid #DDD; margin-right: 10px;} ul.search_box.tree_view_type li:nth-child(6) input[type="checkbox"].check_box + label { font-size: 14px;} ul.search_box.tree_view_type li:nth-child(7),ul.search_box.tree_view_type li:nth-child(8),ul.search_box.tree_view_type li:nth-child(9) { height: 50px; margin-top: 10px;} ul.search_box.tree_view_type li:nth-child(7) { width: 120px; border: 1px solid #DDD; border-right: 0px; overflow: hidden; } ul.search_box.tree_view_type li:nth-child(7) p { display: block; height: 48px; text-align: center; font-size: 16px; line-height: 48px; color: #333; } ul.search_box.tree_view_type li:nth-child(8) { width: calc(30% - 170px); border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; } ul.search_box.tree_view_type li:nth-child(8) input { border-radius: 0px; } ul.search_box.tree_view_type li:nth-child(9) { border: 1px solid #DDD; width: 50px;} /* SEARCH BOX TREE LINE */ ul.search_box.tree_line_type { width: 1200px; border: 0px;} ul.search_box.tree_line_type .select { background-color: #FFF; border: 1px solid #DDD; border-radius: 0px;} ul.search_box.tree_line_type li:nth-child(1) { width: calc(100% - 140px); line-height: 50px;} ul.search_box.tree_line_type li:nth-child(2) { width: 140px;} /* SEARCH BOX DOWN ORDER */ ul.search_box.down_order_type { flex-wrap: wrap; width: 1200px; height: 99px; } ul.search_box.down_order_type li .select { padding-left: 15px; font-size: 14px;} ul.search_box.down_order_type li:nth-child(1),ul.search_box.down_order_type li:nth-child(2),ul.search_box.down_order_type li:nth-child(3) { width: 300px; border-bottom: 1px solid #DDD;} ul.search_box.down_order_type li:nth-child(4){ width: 298px; border-bottom: 1px solid #DDD;} ul.search_box.down_order_type li:nth-child(5),ul.search_box.down_order_type li:nth-child(9) { width: 75px; font-size: 14px; line-height: 50px; color: #222; text-align: center; background-color: #F4F4F4; border-right: 1px solid #DDD;} ul.search_box.down_order_type li:nth-child(7), ul.search_box.down_order_type li:nth-child(8),ul.search_box.down_order_type li:nth-child(11), ul.search_box.down_order_type li:nth-child(12){ width: 65px; } ul.search_box.down_order_type li:nth-child(7) .select, ul.search_box.down_order_type li:nth-child(8) .select, ul.search_box.down_order_type li:nth-child(11) .select, ul.search_box.down_order_type li:nth-child(12) .select{ padding-left: 5px;} ul.search_box.down_order_type li:nth-child(10), ul.search_box.down_order_type li:nth-child(6) { width: 95px; } ul.search_box.down_order_type li:nth-child(13) { width: 148px;} ul.search_box.down_order_type li:nth-child(14) { width: 400px;} ul.search_box.down_order_type li:nth-child(15) { width: 50px;} ul.search_box.down_order_type li:nth-child(1), ul.search_box.down_order_type li:nth-child(2), ul.search_box.down_order_type li:nth-child(3), ul.search_box.down_order_type li:nth-child(8), ul.search_box.down_order_type li:nth-child(12), ul.search_box.down_order_type li:nth-child(13) { border-right: 1px solid #DDD;} .down_order_list .content_top { min-height: 100px; } /* SEARCH BOX DOWN PRODUCT */ ul.search_box.down_product_type {width: 1200px;} ul.search_box.down_product_type li .select { padding-left: 10px; font-size: 15px;} ul.search_box.down_product_type li:nth-child(1){ width: 150px;} ul.search_box.down_product_type li:nth-child(2){ width: 105px;} ul.search_box.down_product_type li:nth-child(3){ width: 105px;} ul.search_box.down_product_type li:nth-child(4),ul.search_box.down_product_type li:nth-child(8) { width: 50px; font-size: 14px; line-height: 50px; color: #222; text-align: center; background-color: #F4F4F4; border-right: 1px solid #DDD;} ul.search_box.down_product_type li:nth-child(6), ul.search_box.down_product_type li:nth-child(7),ul.search_box.down_product_type li:nth-child(10), ul.search_box.down_product_type li:nth-child(11){ width: 70px; } ul.search_box.down_product_type li:nth-child(6) .select, ul.search_box.down_product_type li:nth-child(7) .select, ul.search_box.down_product_type li:nth-child(10) .select, ul.search_box.down_product_type li:nth-child(11) .select{ padding-left: 5px;} ul.search_box.down_product_type li:nth-child(9), ul.search_box.down_product_type li:nth-child(5) { width: 90px; } ul.search_box.down_product_type li:nth-child(12) { width: 105px;} ul.search_box.down_product_type li:nth-child(13) { width: 130px;} ul.search_box.down_product_type li:nth-child(14) { width: 50px;} ul.search_box.down_product_type li:nth-child(1), ul.search_box.down_product_type li:nth-child(2), ul.search_box.down_product_type li:nth-child(3), ul.search_box.down_product_type li:nth-child(7), ul.search_box.down_product_type li:nth-child(11), ul.search_box.down_product_type li:nth-child(12) { border-right: 1px solid #DDD;} /* SEARCH BOX SPONSOR */ ul.search_box.sponsor_top_type { width: 1200px; } ul.search_box.sponsor_top_type li .select { padding-left: 10px; font-size: 14px;} ul.search_box.sponsor_top_type li:nth-child(1),ul.search_box.sponsor_top_type li:nth-child(5) { width: 65px; font-size: 14px; line-height: 50px; color: #222; text-align: center; background-color: #F4F4F4; } ul.search_box.sponsor_top_type li:nth-child(5) { width: 25px; background-color: #FFF;} ul.search_box.sponsor_top_type li:nth-child(2),ul.search_box.sponsor_top_type li:nth-child(6),ul.search_box.sponsor_top_type li:nth-child(9){ width: 90px;} ul.search_box.sponsor_top_type li:nth-child(3),ul.search_box.sponsor_top_type li:nth-child(4),ul.search_box.sponsor_top_type li:nth-child(7),ul.search_box.sponsor_top_type li:nth-child(8) { width: 75px;} ul.search_box.sponsor_top_type li:nth-child(1),ul.search_box.sponsor_top_type li:nth-child(8),ul.search_box.sponsor_top_type li:nth-child(9),ul.search_box.sponsor_top_type li:nth-child(10),ul.search_box.sponsor_top_type li:nth-child(11),ul.search_box.sponsor_top_type li:nth-child(12) { border-right: 1px solid #DDD; } ul.search_box.sponsor_top_type li:nth-child(10) { width: 150px;} ul.search_box.sponsor_top_type li:nth-child(11) { width: 95px;} ul.search_box.sponsor_top_type li:nth-child(12) { width: 90px;} ul.search_box.sponsor_top_type li:nth-child(13) { width: 140px;} /* SEARCH BOX SORT */ .content_top .sorting { position: absolute; top: 5px; right:0px; display: flex; width: 110px; } .content_top .sorting>a {display:block; width: 100%; font-size:15px; color:#000; text-align:left; line-height:40px; height:40px; padding-right:30px; background-image:url(../../image/common/familysite_icon.png); background-repeat:no-repeat; background-position: 95% center; transition:all 0s; -webkit-transition:all 0s; font-weight: 400; } .content_top .sorting.active>a { background-image:url(../../image/common/familysite_on_icon.png);} .content_top .sorting div { display: none; position: absolute; left: 0px; right: 0px; top: 40px; background-color: #FFF; border: 1px solid #DDD; padding: 10px 15px; border-radius: 10px; } .content_top .sorting div>a { display:block; line-height:30px; font-size:15px; color:#000; white-space: nowrap;} .content_top .sorting div>a:hover { color: #8f1314;} /* SEARCH BOX CUSTOMER LIST */ .customer_list .content_top { min-height: 100px; } ul.search_box.customer_top_type { flex-wrap: wrap; width: 1200px; height: 99px; } ul.search_box.customer_top_type li .select { padding-left: 10px; font-size: 14px;} ul.search_box.customer_top_type li:nth-child(1),ul.search_box.customer_top_type li:nth-child(5) { width: 100px; font-size: 14px; line-height: 48px; color: #222; text-align: center; background-color: #F4F4F4; border-right:1px solid #DDD} ul.search_box.customer_top_type li:nth-child(6),ul.search_box.customer_top_type li:nth-child(10) { width: 100px; } ul.search_box.customer_top_type li:nth-child(7),ul.search_box.customer_top_type li:nth-child(8),ul.search_box.customer_top_type li:nth-child(11),ul.search_box.customer_top_type li:nth-child(12) { width: 75px; } ul.search_box.customer_top_type li:nth-child(14), ul.search_box.customer_top_type li:nth-child(15), ul.search_box.customer_top_type li:nth-child(16),ul.search_box.customer_top_type li:nth-child(17) { border-top: 1px solid #DDD;} ul.search_box.customer_top_type li:nth-child(12),ul.search_box.customer_top_type li:nth-child(14),ul.search_box.customer_top_type li:nth-child(15) { border-right: 1px solid #DDD;} ul.search_box.customer_top_type li:nth-child(2) { width: 120px;} ul.search_box.customer_top_type li:nth-child(3) { width: 160px;} ul.search_box.customer_top_type li:nth-child(4) { width: 50px; } ul.search_box.customer_top_type li:nth-child(4) a {display: flex; justify-content: center; align-items: center; color: #FFF; width: 50px; height: 48px; background-color: #8f1314; } ul.search_box.customer_top_type li:nth-child(4) a:hover { background-color: #750001;} ul.search_box.customer_top_type li:nth-child(9) { width: 30px; font-size: 15px; line-height: 48px; text-align: center;} ul.search_box.customer_top_type li:nth-child(13) { width: 138px;} ul.search_box.customer_top_type li:nth-child(14) { width: 430px;} ul.search_box.customer_top_type li:nth-child(15) { width: 360px;} ul.search_box.customer_top_type li:nth-child(16) { width: 358px} /* ul.search_box.customer_top_type li:nth-child(5) { width: 25px; background-color: #FFF;} ul.search_box.customer_top_type li:nth-child(2),ul.search_box.customer_top_type li:nth-child(6),ul.search_box.customer_top_type li:nth-child(9){ width: 90px;} ul.search_box.customer_top_type li:nth-child(3),ul.search_box.customer_top_type li:nth-child(4),ul.search_box.customer_top_type li:nth-child(7),ul.search_box.customer_top_type li:nth-child(8) { width: 75px;} ul.search_box.customer_top_type li:nth-child(1),ul.search_box.customer_top_type li:nth-child(8),ul.search_box.customer_top_type li:nth-child(9),ul.search_box.customer_top_type li:nth-child(10),ul.search_box.customer_top_type li:nth-child(11),ul.search_box.customer_top_type li:nth-child(12) { border-right: 1px solid #DDD; } ul.search_box.customer_top_type li:nth-child(10) { width: 150px;} ul.search_box.customer_top_type li:nth-child(11) { width: 95px;} ul.search_box.customer_top_type li:nth-child(12) { width: 90px;} ul.search_box.customer_top_type li:nth-child(13) { width: 140px;} */ /* .pop_content.group ul.search_box.tree_view_type { width: 100%; background-color: #FFF; } .pop_content.group ul.search_box.tree_view_type li:nth-child(1), .pop_content.group ul.search_box.tree_view_type li:nth-child(2) { width: 110px; line-height: 48px; margin-right: 10px;} .pop_content.group ul.search_box.tree_view_type li:nth-child(1) > a, .pop_content.group ul.search_box.tree_view_type li:nth-child(2) > a {display: block; line-height: 48px; width: 110px; height: 50px; font-size: 14px; color: #fff; } .pop_content.group ul.search_box.tree_view_type li:nth-child(3), .pop_content.group ul.search_box.tree_view_type li:nth-child(4) { width: 140px; } .pop_content.group ul.search_box.tree_view_type li:nth-child(3) .select, .pop_content.group ul.search_box.tree_view_type li:nth-child(4) .select { background-color: #FFF; border: 1px solid #DDD; border-radius: 25px; padding-left: 20px;} .pop_content.group ul.search_box.tree_view_type li:nth-child(5) { margin-left: calc(100% - 951px); width: 120px; border-radius: 25px 0px 0px 25px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .pop_content.group ul.search_box.tree_view_type li:nth-child(5) .select {border: none;} .pop_content.group ul.search_box.tree_view_type li:nth-child(5) p { display: block; height: 50px; text-align: center; font-size: 16px; line-height: 50px; color: #333; border-radius: 25px 0px 0px 25px; background-color: #F4F4F4; } .pop_content.group ul.search_box.tree_view_type li:nth-child(6) { width: 230px; margin-left: 0px; border-radius: 0px; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .pop_content.group ul.search_box.tree_view_type li:nth-child(6) input { border-radius: 0px; } .pop_content.group ul.search_box.tree_view_type li:nth-child(7) { width: 60px; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-radius: 0px 25px 25px 0px;} .pop_content.group ul.search_box.tree_view_type li:nth-child(7) a { width: 60px; padding-right: 10px;} */ /*CALEDER*/ .inp-txt.calendar_datepicker { padding-right:40px; background-image:url(../../image/common/icon_calender.png); background-repeat:no-repeat; background-position:95% 50%; } .inp-txt.calendar_datepicker:focus { background-image:url(../../image/common/icon_calender_on.png);} body .ui-datepicker{border-radius:0; border:1px solid #222; padding:0; background:#fff; margin-left: -1px; overflow: hidden; border-radius: 10px;} body .ui-datepicker .ui-datepicker-title{position: relative;padding:3px 0 0;box-sizing: border-box;height: 50px;} body .ui-datepicker .ui-datepicker-title:before { position:absolute; left:86px; top:16px; width:1px; height:15px; background-color:#CCC; content:""; } body .ui-datepicker .ui-datepicker-title select { background-size: 16px;} body .ui-datepicker select.ui-datepicker-month {border:0; width:55px; padding:0; } body .ui-datepicker select.ui-datepicker-year{border:0; width:60px; padding:0; margin-right:15px; } body .ui-datepicker .ui-datepicker-header{background:#fff; border:0; padding:0} body .ui-datepicker .ui-datepicker-next{right:2px !important; top:11px !important; border-radius: 0px;} body .ui-datepicker .ui-datepicker-prev{left:2px !important; top:11px !important; border-radius: 0px;} body .ui-datepicker .ui-datepicker-next-hover{right:20px; top:11px} body .ui-datepicker .ui-datepicker-prev-hover{left:20px; top:11} body .ui-datepicker .ui-widget-header .ui-icon-circle-triangle-e{background:url(../../image/common/btn_sh_r.png) no-repeat 50%; cursor:pointer; border:0; right:0} body .ui-datepicker .ui-widget-header .ui-icon-circle-triangle-w{background:url(../../image/common/btn_sh_l.png) no-repeat 50%; cursor:pointer; border:0;right:0} body .ui-datepicker .ui-datepicker-prev span, body .ui-datepicker .ui-datepicker-next span{width:100%; position:static; height:100%; margin:0;} body .ui-datepicker .ui-widget-header .ui-icon-circle-triangle-e:hover, body .ui-datepicker .ui-widget-header .ui-icon-circle-triangle-w:hover{right:0} body .ui-datepicker .ui-widget-header .ui-datepicker-next-hover, body .ui-datepicker .ui-widget-header .ui-datepicker-prev-hover{ border-radius:0px;} body .ui-datepicker .ui-icon{width:22px; height:22px} body .ui-datepicker thead th{background:#f4f4f4;} body .ui-datepicker thead th:first-child { color:#e30028;} body .ui-datepicker thead th:last-child { color:#333;} body .ui-datepicker td{position:relative; } body .ui-datepicker .ui-state-default{position:relative; z-index:1; border:0; color:#222; background:transparent; text-align:center; font-size: 13px;} body .ui-datepicker .ui-state-default.ui-priority-secondary { color:#AAA;} body .ui-datepicker .ui-datepicker-current-day:after{content:""; display:block; position:absolute; top:2px; left:50%; margin-left:-12px; width:24px; height:24px; border-radius:50%; background:#8f1314} body .ui-datepicker .ui-datepicker-current-day .ui-state-default{color:#fff} .ui-datepicker-buttonpane {display:none} /* PAGING */ .paging { display: flex; justify-content: center; width:100%; text-align:center; vertical-align:middle;} .paging a {width:30px; height:30px; display:inline-block; color:#444; font-size:15px; line-height:28px; vertical-align:top; text-decoration:none; font-weight: 400; border: 1px solid #DDD; border-radius: 50%; margin: 0px 5px;} .paging a:hover { color:#8f1314;} .paging a.btn_com {background:url("../../image/common/page_arrow.png") no-repeat; transition:all 0s ease-in-out; -webkit-transition:all 0s ease -in-out;} .paging a.first {background-position: 0 0; background-color: #fff; } .paging a.first:hover {background-position: 0 -30px;} .paging a.prev {margin-right:2px; margin-left:2px; background-position:-30px 0; background-color: #fff; } .paging a.prev:hover {background-position: -30px -30px;} .paging a.next {margin-right:2px; margin-left:2px; background-position:-60px 0; background-color: #fff; } .paging a.next:hover {background-position: -60px -30px;} .paging a.last {background-position:-90px 0; background-color: #fff; } .paging a.last:hover {background-position: -90px -30px;} .paging .active {color:#FFF; font-weight: 500; background-color:#8f1314; border-color: #8f1314;} .paging .active:hover {color:#8f1314;} /* Layer_POPUP */ .layer_pop_wrapper { opacity: 0; position: fixed; left: 0px; top: 0px; width:100%; height:100%; background-color:rgba(0,0,0,0.65); z-index: 100; visibility: hidden; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease -in-out;} .layer_pop_wrapper.active { opacity: 1; visibility: visible; z-index: 100; } .layer_pop_wrapper.active .layer_popup .pop_title .close {opacity: 1; transform:rotate(0deg);} .layer_popup { position: relative; display: inline-flex; flex-direction: column; min-width: 600px; max-width: 1200px; min-height: 100px; max-height: 80%; left: 50%; top: 50%; background-color:#FFF; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); padding:40px 50px 50px; border-radius:15px;} .layer_popup .pop_title { position: relative; width: 100%; } .layer_popup .pop_title h2 {width: 100%; font-size: 26px; line-height: 30px; padding: 11px 60px 20px 0px; text-align: left; border-bottom:solid 2px #222; word-break: keep-all; box-sizing: border-box; } .layer_popup .pop_title h2>span { font-size: 16px; margin-left: 5px;} .layer_popup .pop_title .close { position: absolute; top: 0px; right: 0px; display: block; width: 50px; height: 50px; background-image:url("../../image/common/icon_pop_close01.png"); background-repeat: no-repeat; background-position: top center; opacity: 0; transform:rotate(45deg); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease -in-out; z-index: 10;} .layer_popup .pop_title.bb_none h2 {border-bottom:none;} .layer_popup .pop_content { height: calc(100% - 70px); overflow-y: auto; padding: 20px 0px;} .layer_popup .pop_content h2 { font-size: 20px; line-height: 20px; color: #333; font-weight: 500; margin-bottom: 20px;} .layer_pop_wrapper.shopping_detail .layer_popup { max-width: 1240px;} .layer_pop_wrapper.shopping_detail .layer_popup .pop_content { padding: 0px;} .layer_pop_wrapper .pop_bg_close {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; z-index: -1; } .layer_pop_wrapper.active .pop_bg_close { display: block;} .layer_pop_wrapper .close_bg {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; z-index: -1; } .layer_pop_wrapper.active .close_bg { display: block;} /* POPUP */ .pop_wrapper {position: relative; padding: 10px 30px 30px; } .pop_wrapper .pop_title { position: relative; width: 100%; } .pop_wrapper .pop_title h2 {width: 100%; font-size: 24px; line-height: 30px; padding: 10px 60px 20px 0px; text-align: left; border-bottom:solid 2px #222; word-break: keep-all; box-sizing: border-box; } .pop_wrapper .pop_title .close { position: absolute; top: 0px; right: 0px; display: block; width: 50px; height: 50px; background-image:url("../../image/common/icon_pop_close01.png"); background-repeat: no-repeat; background-position: top center; z-index: 10;} .pop_wrapper .pop_content { padding: 20px 0px;} .pop_wrapper .pop_content .list_table, .layer_popup .pop_content .list_table { width: 100%; margin-bottom: 40px;} .pop_wrapper .pop_content .list_table:last-child, .layer_popup .pop_content .list_table:last-child {margin-bottom: 0px;} .pop_wrapper .pop_content .list_table th, .pop_wrapper .pop_content .list_table td, .layer_popup .pop_content .list_table th, .layer_popup .pop_content .list_table td{ font-size: 15px; line-height: 20px; padding: 15px 0px; } .pop_wrapper .pop_content .list_table th, .layer_popup .pop_content .list_table th { border-top: 0px; background-color: #FFF; border-bottom: 1px solid #333; } .pop_wrapper .pop_content .list_table td.left, .layer_popup .pop_content .list_table td.left {text-align: left; padding-left: 10px;} .pop_wrapper .pop_content .content_top, .layer_popup .pop_content .content_top { width: 100%; margin-bottom: 20px;} .pop_content .list_table td.no_data {padding: 80px 0; font-size: 15px; color: #999; } /*LIST TABLE*/ .list_table {width: 100%; margin-bottom: 80px; } .list_table th {font-size: 18px; color: #222; line-height: 25px; padding: 30px 0 ; text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #222; word-break: keep-all; } .list_table td {font-size: 18px; color: #666; line-height: 25px; padding: 30px 0 ; text-align: center; border-bottom: 1px solid #ddd; word-break: keep-all; } .list_table th.left,.list_table td.left {text-align: left; padding-left: 20px;} .list_table th.right,.list_table td.right {text-align: right; padding-right: 20px;} .list_table td.no_data {padding: 80px 0; font-size: 18px; color: #999; } .list_table tr.active:hover td {background-color: #f4f4f4; cursor: pointer;} .list_table td.in_table { padding: 0px; border-bottom: 0px;} .list_table td.in_table>div {padding: 20px 60px 50px; border: 1px solid #8f1314; border-radius: 0px 0px 10px 10px; overflow: hidden; } .list_table td.in_table table {width: 100%; } .list_table td.in_table th {font-size: 15px; padding: 15px 0; border-top: 0px; } .list_table td.in_table td {padding: 15px 0; } .list_table td span.secession { display: inline-block; width: 36px; height: 24px; background-color: #999; color: #FFF; font-size: 13px; line-height: 24px; margin-left: 5px; border-radius: 5px;} /* PRODUCT LIST */ .product_list { display: flex; flex-wrap: wrap; width: calc(100% + 40px);} .product_list>li { position: relative; width: 270px; margin-right: 40px; margin-bottom: 40px; cursor: pointer;} .product_list>li>span { position: absolute; top: 10px; display: inline-block; font-size: 12px; color: #fff; padding: 3px 10px; border-radius: 5px; z-index: 1; } .product_list>li>span.new { left: 10px; background: #8f1314; } .product_list>li>span.soldout { right: 10px; background: #888; } .product_list h2 { max-height: 44px; font-size: 18px;color: #000000; margin-bottom: 13px; text-overflow: ellipsis; overflow: hidden; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px;} .product_list p { line-height: 24px;} .product_list p.pay { font-size: 16px; color: #bababa; text-decoration: line-through;} .product_list p.member { font-size: 20px; line-height: 30px; color: #000000;} .product_list p.member span { margin-right: 5px; font-size: 20px; color: #8f1314; font-weight: 700;} .product_list p.pv {font-size: 15px; color: #8f1314; font-weight: 500;} .product_list p.prodtag span {display: inline-block; font-size: 12px; color: #969696; font-weight: 300; margin-right: 5px;} .product_list>li .product_img { position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 20px; background-color: #F8F8F8;} .product_list>li .product_img>a { display: block; width: 100%;} .product_list>li .product_img img { width: 100%;} .product_list>li .product_img::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: all 0.2s ease; content: ''; pointer-events: none; } .product_list>li .product_img:hover::before { background-color: rgba(0,0,0,0.3);} .product_img .product_btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,0%); opacity: 0; transition: all 0.2s ease; z-index: 1; display: flex; flex-wrap: wrap; width: 130px; } .product_img .product_btn li { width: 60px; height: 60px; background-color: #FFF; border-radius: 30px;} .product_img .product_btn li>a { display: block; width: 60px; height: 60px; background-image:url(../../image/common/icon_product_view.png); background-repeat: no-repeat; background-size:180px 60px; } .product_img .product_btn li:first-child { width: 130px; margin-bottom: 10px;} .product_img .product_btn li:nth-child(2) { margin-right: 10px;} .product_img .product_btn li:nth-child(2) a { background-position: -60px 0px;} .product_img .product_btn li:nth-child(3) a { background-position: -120px 0px;} .product_img .product_btn .option_btn { display: block; width: 130px; height: 60px; background-color: #FFF; border-radius: 30px; font-size: 18px; line-height: 60px; text-align: center; color: #8f1314;} .product_img .goods_count { display: flex; width: 130px; height: 60px; border-radius: 30px; overflow: hidden; } .product_img .goods_count input { width: 40px; height: 60px; font-size: 18px; font-weight: 500; text-align: center; line-height: 60px; color: #8f1314; border: 0px; border-radius: 0px; padding: 0px;} .product_img .goods_count a { position: relative; display: inline-block; width: 45px; height: 60px; background-color: #FFF; } .product_img .goods_count a:before, .product_img .goods_count a:after { position: absolute; background-color: #8f1314; content: ""; } .product_img .goods_count a:before { left:18px; top: 28px; width: 10px; height: 2px; } .product_img .goods_count a:after { left:22px; top: 24px; width: 2px; height: 10px; } .product_img .goods_count a:nth-child(1):after { display: none;} .product_img:hover .product_btn { opacity: 1; transform: translate(-50%,-50%); } .product_list.auto { width: calc(100% + 40px);} .product_list.auto>li { display: none; margin-right: 40px; width: 270px;} .product_list.auto>li.view { display: block;} .product_list.auto>li .product_img::before { display: none;} .product_list.auto .product_img .product_btn { position: relative; top: auto; left: auto; transform: translate(0%,0%); opacity: 1; border: 1px solid #DDD; border-radius: 0px 0px 20px 20px; overflow: hidden; width: 100%;} .product_list.auto .product_img:hover .product_btn { transform: translate(0%,0%); } .product_list.auto .product_img .product_btn li { border-radius: 0px; } .product_list.auto .product_img .product_btn li:first-child { margin-bottom: 0px; width: 100%;} .product_list.auto .product_img .goods_count { margin-bottom: 0px; border-radius: 0px; width: 100%;} .product_list.auto .product_img .goods_count a { width: 50px;} .product_list.auto .product_img .goods_count a:before { left: 20px;} .product_list.auto .product_img .goods_count a::after { left: 24px;} .product_list.auto .product_img .goods_count a:hover { background-color: #F4F4F4;} .product_list.auto .product_img .goods_count input { width: calc(100% - 100px);} .product_list.auto .product_img .product_btn .option_btn { width: 100%; border-radius: 0px;} .product_list.auto .product_img .product_btn .option_btn:hover {background-color: #F4F4F4;} .product_list.pro { width: calc(100% + 40px);} .product_list.pro>li { margin-right: 40px; width: 270px;} .product_list.pro>li .product_img::before { display: none;} .product_list.pro .product_img .product_btn { position: relative; top: auto; left: auto; transform: translate(0%,0%); opacity: 1; border: 1px solid #DDD; border-radius: 0px 0px 20px 20px; overflow: hidden; width: 100%;} .product_list.pro .product_img:hover .product_btn { transform: translate(0%,0%); } .product_list.pro .product_img .product_btn li { border-radius: 0px; } .product_list.pro .product_img .product_btn li:first-child { margin-bottom: 0px; width: 100%;} .product_list.pro .product_img .goods_count { margin-bottom: 0px; border-radius: 0px; width: 100%;} .product_list.pro .product_img .goods_count a { width: 50px;} .product_list.pro .product_img .goods_count a:before { left: 20px;} .product_list.pro .product_img .goods_count a::after { left: 24px;} .product_list.pro .product_img .goods_count a:hover { background-color: #F4F4F4;} .product_list.pro .product_img .goods_count input { width: calc(100% - 100px);} .product_list.pro .product_img .product_btn .option_btn { width: 100%; border-radius: 0px;} .product_list.pro .product_img .product_btn .option_btn:hover {background-color: #F4F4F4;} .product_list.quick { width: 100%;} .product_list.quick>li { display: none; margin-right: 0px; width: 100%; min-height: 160px; padding-left: 800px; flex-direction: column; justify-content: center; padding-bottom: 20px; border-bottom: 1px solid #DDD; margin-bottom: 20px; cursor: auto;} .product_list.quick>li.view { display: flex;} .product_list.quick>li>span.new { left: 180px;} .product_list.quick>li>span.soldout { right: auto; left: 240px;} .product_list.quick h2 { position: absolute; width: 580px; top: calc(50% - 10px); left: 180px; transform: translateY(-50%); max-height: 60px; margin-bottom: 0px; font-size: 24px; line-height: 30px; font-weight: 500; word-break: keep-all;} .product_list.quick>li .product_status span { font-size: 12px; color: #fff; padding: 5px 10px; border-radius: 5px; } .product_list.quick>li .product_status span.new { background: #8f1314; } .product_list.quick>li .product_status span.soldout { background: #888; } .product_list.quick>li .product_status { position: absolute; top: 20px; left: 180px;} .product_list.quick>li .product_img::before { display: none;} .product_list.quick>li .product_img,.product_list.quick>li .product_img img {position: absolute; } .product_list.quick>li .product_img { left: 0px; top: 0px; width: 140px; height: calc(100% - 20px); background-color: #F4F4F4; border-radius: 10px;} .product_list.quick>li .product_img img{left: 0px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 140px; height: 140px;} .product_list.quick>li .product_img>a { height: 100%;} .product_list.quick .goods_count { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); right: 0px; display: flex; width: 130px; height: 60px; border-radius: 30px; overflow: hidden; border: 1px solid #DDD; } .product_list.quick .goods_count input { width: 40px; height: 60px; font-size: 18px; font-weight: 500; text-align: center; line-height: 60px; color: #8f1314; border: 0px; border-radius: 0px; padding: 0px;} .product_list.quick .goods_count a { position: relative; display: inline-block; width: 45px; height: 60px; background-color: #FFF; } .product_list.quick .goods_count a:before, .product_list.quick .goods_count a:after { position: absolute; background-color: #8f1314; content: ""; } .product_list.quick .goods_count a:before { left:18px; top: 28px; width: 10px; height: 2px; } .product_list.quick .goods_count a:after { left:22px; top: 24px; width: 2px; height: 10px; } .product_list.quick .goods_count a:nth-child(1):after { display: none;} .product_list.quick .goods_count.active a, .product_list.quick .goods_count.active input { background-color: #8f1314;} .product_list.quick .goods_count.active a:before, .product_list.quick .goods_count.active a:after { background-color: #FFF; } .product_list.quick .goods_count.active input { color: #FFF;} .product_list.quick .product_btn { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); right: 0px; width: 130px; height: 60px; border-radius: 30px; overflow: hidden; border: 1px solid #DDD; } .product_list.quick .product_btn .option_btn { display: block; width: 130px; height: 60px; background-color: #FFF; border-radius: 30px; font-size: 18px; line-height: 60px; text-align: center; color: #8f1314;} /*NOTICE LIST*/ .notice_list_top { display: flex; width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #DDD; padding: 30px 0px;} .notice_list_top p { font-size: 18px; line-height: 25px; color: #000; text-align: center;} .notice_list_top p:nth-child(1) { width:80px;} .notice_list_top p:nth-child(2) { width:800px;} .notice_list_top p:nth-child(3) { width:240px;} .notice_list_top p:nth-child(4) { width:80px;} .notice_list { margin-bottom: 80px;} .notice_list li { display: flex; align-items: center; width: 100%; border-bottom: 1px solid #DDD; cursor: pointer; padding: 30px 0px; } .notice_list li:hover { background-color: #F4F4F4;} .notice_list li h2 { width:800px; font-size: 18px; line-height: 25px; color: #000; word-break: keep-all; } .notice_list li h2 span { display: inline-block; width: 11px; height: 20px; margin-left: 5px; vertical-align: text-top; background-image:url(../../image/common/icon_list_file.png); background-repeat: no-repeat; background-position: center center; } .notice_list li h3 { font-size: 18px; line-height: 25px; color: #8f1314; text-align: center;} .notice_list li p { font-size: 18px; line-height: 25px; color: #555; text-align: center;} .notice_list li p:nth-of-type(1) { width:80px;} .notice_list li p:nth-of-type(2) { width:240px;} .notice_list li p:nth-of-type(3) { width:80px;} /*NOTICE VIEW*/ .notice_view_title { width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #DDD; margin-bottom: 40px; padding: 30px;} .notice_view_title h2 { display: block; font-size: 26px; line-height: 35px; color: #000; word-break: keep-all; margin-bottom: 20px; } .notice_view_title p { display: inline-block; font-size: 18px; line-height: 30px; color: #555; margin-right: 30px;} .notice_view_title p:nth-of-type(1) { margin-bottom: 5px;} .notice_view_title p span { font-weight: 700; margin-right: 5px;} .notice_view_title h3 { display: block; font-size: 18px; line-height: 30px; color: #8f1314; word-break: keep-all; margin-bottom: 10px; } .view_file_down { position: relative; display: block; margin-bottom: 40px; padding-left: 110px; } .view_file_down::before { position: absolute; left: 30px; top: 0px; font-size: 18px; line-height: 30px; color: #555; font-weight: 700; content: "첨부파일"; } .view_file_down a { position: relative; display: inline-block; font-size: 16px; line-height: 30px; color: #555; padding-left: 16px; margin-right: 30px; margin-bottom: 10px;} .view_file_down a::before {position: absolute; left: 0px; top: 4px; display: block; background-image:url("../../image/common/icon_list_file.png"); background-repeat:no-repeat; background-position: center center; width: 11px; height: 20px; content: "";} .view_file_down a:hover { color: #8f1314;} .notice_view_con { padding: 0px 30px 60px 30px; border-bottom: 1px solid #DDD; margin-bottom: 60px; font-size: 16px; line-height: 25px;} .notice_view_con img { max-width: 1140px;} .notice_view_con iframe { width: 1140px; height: 642px;} .notice_view_con h1 { font-size: 34px;} .notice_view_con h2 { font-size: 30px;} .notice_view_con h3 { font-size: 26px;} .notice_view_con h4 { font-size: 22px;} .notice_view_con h5 { font-size: 18px;} .notice_list.next_view { margin-top: 80px; border-top: 1px solid #DDD;} .notice_list.next_view p:nth-of-type(1) { width: 120px; font-weight: 700; } .notice_list.next_view h2 { width: 1080px; padding-right: 30px;} /*LIST SEAECH BOX*/ .list_search_box { display: flex; justify-content: center; margin-top: 60px;} .list_search_box li { margin-right: 10px;} .list_search_box li:last-child { margin-right: 0px;} .list_search_box li:nth-child(1), .list_search_box li:nth-child(2) { width: 140px;} .list_search_box li:nth-child(3) { width: 280px;} .list_search_box li:nth-child(4) { width: 100px;} .list_search_box .select, .list_search_box .inp-txt, .list_search_box .btn { border-radius: 0px;} /*FAQ*/ .sub_top_title.faq { padding: 0px 40px;} .sub_top_title.faq ul {position: relative; display: flex; justify-content: center; align-items: center; max-width: 1680px; min-width: 1200px; overflow: visible; margin: 0 auto; padding: 55px 60px; border-radius: 20px; z-index: 1; background-color: #f7eeef; } .sub_top_title.faq ul li:nth-child(1) { width: 480px;} .sub_top_title.faq ul li:nth-child(2) { width: 380px;} .sub_top_title.faq ul li:last-child { width: 220px; border-left: 1px solid #DDD; padding-left: 70px;} .sub_top_title.faq h2 { font-size: 28px; line-height: 40px; color: #000;} .sub_top_title.faq h2 span { font-weight: 700; color: #8f1314;} .sub_top_title.faq h3 { font-size: 28px; line-height: 30px; color: #000; font-weight: 700; margin-bottom: 10px;} .sub_top_title.faq p { font-size: 16px; line-height: 24px; color: #000; font-weight: 300; letter-spacing: -0.5px; } .sub_top_title.faq h4 { font-size: 24px; line-height: 30px; color: #000; font-weight: 700; margin-bottom: 10px;} .faq_list_top { display: flex; justify-content: space-around; width: 100%; margin-bottom: 60px;} .faq_list_top a { position: relative; font-size: 18px; color: #000; padding-top: 105px; transition:all 0s ease-in-out; -webkit-transition:all 0s ease -in-out; letter-spacing: -0.5px;} .faq_list_top a.active { color: #8f1314;} .faq_list_top a.active i { background-color: #8f1314;} .faq_list_top a i { position: absolute; left: 50%; transform:translateX(-50%); top: 0px; display:inline-block; width:90px; height:90px; background-color: #F4F4F4; border-radius: 50%; background-image:url(../../image/common/icon_faq.png); background-repeat: no-repeat; background-size:540px 180px; overflow:hidden; text-indent:-9999px; vertical-align:middle;} .faq_list_top a:nth-child(1) i { background-position: 0px 0px;} .faq_list_top a:nth-child(2) i { background-position: -90px 0px;} .faq_list_top a:nth-child(3) i { background-position: -180px 0px;} .faq_list_top a:nth-child(4) i { background-position: -270px 0px;} .faq_list_top a:nth-child(5) i { background-position: -360px 0px;} .faq_list_top a:nth-child(6) i { background-position: -450px 0px;} .faq_list_top a.active:nth-child(1) i { background-position: 0px -90px;} .faq_list_top a.active:nth-child(2) i { background-position: -90px -90px;} .faq_list_top a.active:nth-child(3) i { background-position: -180px -90px;} .faq_list_top a.active:nth-child(4) i { background-position: -275px -90px;} .faq_list_top a.active:nth-child(5) i { background-position: -360px -90px;} .faq_list_top a.active:nth-child(6) i { background-position: -450px -90px;} .faq_list { border-top: 1px solid #000; margin-bottom: 80px; } .faq_list li>div { border-bottom: 1px solid #DDD; padding: 30px 0px; font-size: 18px; line-height: 25px; color: #000; font-weight: 300; word-break: keep-all;} .faq_list li>div strong { font-weight: 700;} .faq_list li>div:first-child {display: flex; align-items: center; width: 100%; cursor: pointer; } .faq_list li>div:first-child p { width: 140px; text-align: center;} .faq_list li>div:first-child h2 { width: 1060px; padding-right: 60px; font-size: 18px; line-height: 25px; color: #000; font-weight: 300; word-break: keep-all; box-sizing: border-box; } .faq_list li>div:first-child:hover h2, .faq_list li>div:first-child:hover p,.faq_list li>div.active h2, .faq_list li>div.active p { color:#8f1314;} .faq_list li>div:nth-child(2) { display: none; background-color: #F4F4F4; padding: 35px 60px 35px 140px; font-weight: 300;} .faq_list li>div:nth-child(2) p { font-size: 18px; line-height: 25px; color: #000; font-weight: 300; word-break: keep-all;} /*IMG LIST BOARD*/ .img_list_board { display: flex; flex-wrap: wrap; width: 100%; } .img_list_board li { cursor: pointer; margin-bottom: 80px;} .img_list_board li>div { position: relative; width: 100%; overflow: hidden; background-color: #F4F4F4; background-image:url(../../image/common/logo.svg); background-repeat: no-repeat; background-position: center center; border-radius: 20px; margin-bottom: 20px;} .img_list_board li>div img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease -in-out; } .img_list_board h2 { font-size: 22px; line-height: 30px; color: #000; font-weight: 500; text-align: left; word-break: keep-all; } .img_list_board p {font-size: 16px; line-height: 25px; color: #666; font-weight: 300; text-align: left; word-break: keep-all;} .img_list_board li:hover img { transform: scale(1.1);} .img_list_board.media li { width: calc(50% - 15px); margin-right: 30px; } .img_list_board.media li:nth-child(2n) { margin-right: 0px;} .img_list_board.media li>div { width: 585px; height: 480px; background-size:200px; } .img_list_board.media h2 { margin-bottom: 10px;} .img_list_board.media li.no_data { width: 100%;} .img_list_board.magazine li { width: calc(25% - 30px); margin-right: 40px; } .img_list_board.magazine li:nth-child(4n) { margin-right: 0px;} .img_list_board.magazine li>div { width: 270px; height: 310px; background-size:150px; } .img_list_board.magazine li p { margin-bottom: 10px;} .img_list_board.magazine li.no_data { width: 100%;} .img_list_board.dataroom li { width: calc(33.3% - 20px); margin-right: 30px; } .img_list_board.dataroom li:nth-child(3n) { margin-right: 0px;} .img_list_board.dataroom li>div { width: 380px; height: 260px; background-size:180px; } .img_list_board.dataroom h2 { margin-bottom: 10px;} .img_list_board.dataroom h3 { font-size: 16px; line-height: 25px; color: #8f1314; font-weight: 300; text-align: left; word-break: keep-all; margin-bottom: 10px;} .img_list_board.dataroom li>div img {object-fit:fill;} .img_list_board.dataroom li.no_data { width: 100%;} .img_list_board.event li { width: calc(50% - 15px); margin-right: 30px; } .img_list_board.event li:nth-child(2n) { margin-right: 0px;} .img_list_board.event li>div { width: 585px; height: 220px; background-size:200px; } .img_list_board.event h2 { margin-bottom: 10px;} .img_list_board.event li.no_data { width: 100%;} /* ERROR PAGE (404/500/Inspection/Maintainance) */ .wrapper_error { width: 100%; height: 100%; min-width: 1600px; margin: 0 auto; overflow: hidden; } .wrapper_error .error_box { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%); width: 1600px; margin: 0 auto; } .wrapper_error .error_box>div { position: relative; padding-bottom: 60px; margin-bottom: 60px;} .wrapper_error .error_box>div:before { position: absolute; left: 0px; bottom: 0px; width:1980px; height: 1px; background-color: #DDD; content: ""; } .wrapper_error .error_box h1 { font-size: 100px; line-height: 100px; color: #222; margin-bottom: 60px; font-weight: 500;} .wrapper_error .error_box h2 { font-size: 40px; line-height: 40px; color: #222; margin-bottom: 30px; font-weight: 400;} .wrapper_error .error_box p { font-size: 18px; line-height: 25px; color: #666; font-weight: 300;} .wrapper_error .error_box h3 { font-size: 40px; line-height: 50px; color: #8f1314; font-weight: 300;} .wrapper_error .error_box h3 span { display: block; font-size: 25px; line-height: 30px; margin-bottom: 20px; font-weight: 400;} /*검색엔진추가*/ .search_top .search_recent, .search_top .search_like { display: none; position: absolute; width: 100%; max-height: 200px; overflow-y: auto; background-color: #FFF; box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.15); padding: 10px;} .search_top .search_recent>div, .search_top .search_like>div { position: relative; } .search_top .search_recent>div { padding-right: 30px;} .search_top .search_recent>div a:first-child, .search_top .search_like>div a:first-child { display: block; font-size: 14px; line-height: 36px; color: #444; font-weight: 400; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .search_top .search_recent>div a:first-child:hover, .search_top .search_like>div a:first-child:hover {color: #8f1314;} .search_top .search_recent>div a.recent_delete {position: absolute; right: 0px; top: 0px; width: 30px; height: 30px; } .search_top .search_recent>div a.recent_delete:before, .search_top .search_recent>div a.recent_delete:after {position: absolute; right: 7px; top: 15px; width: 15px; height: 1px; background-color: #888; content: ""; } .search_top .search_recent>div a.recent_delete:before {transform: rotate(-45deg);} .search_top .search_recent>div a.recent_delete:after {transform: rotate(45deg);} .search_top .search_recent>div a.recent_delete:hover:before, .search_top .search_recent>div a.recent_delete:hover:after { background-color: #222;}