@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


/* width 1200px */
html, body, span, object,
h1, h2, h3, h4, h5, h6, p, address, cite, code,
em, img, button,
small, strong, sub, sup, 
dl, dt, dd, ol, ul, li,
form, label,
table, article, aside, 
footer, header, hgroup, menu, nav, section, 
time, mark, audio, video { margin:0; padding:0; border:0;  font-family:'Noto Sans KR', sans-serif; }
ul, li { list-style:none; }
i, em { font-style:normal; }
a { color:inherit; text-decoration:none; }
table { width:100%; border-collapse:collapse; border-spacing:0; }

body {  }
button,
select { cursor:pointer; background-color:transparent; border:0; }
input { outline:0; }
textarea { resize:none; outline:0; font-family:'Noto Sans KR', sans-serif; }
/* input number 화살표 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Chrome, Safari, Edge, Opera */
input[type=number] { -moz-appearance:textfield; } /* Firefox */

hr { margin:0; height:1px; border:0; background-color:#000; }

/* placeholder text color */
input::placeholder { opacity:1; color:#b2b6be; }
textarea::placeholder { opacity:1; color:#b2b6be; }
input::-webkit-input-placeholder { opacity:1; color:#b2b6be; }
textarea::-webkit-input-placeholder { opacity:1; color:#b2b6be; }


/* 사이트 공통사항 */
.main_visual .swiper-slide { height:auto; } /* 메인 슬라이드 이미지 사이즈 공통 */
.main_visual .swiper-slide img { object-fit:cover; width:100%; height:100%; }
hgroup .ttl_middle:first-child { margin-top:0; } /* service 페이지 상단 타이틀 삭제 후 남은요소 여백 조정 */

/* 문의 이메일 복사하기 추가 2023-07-31 */
.copy_email { display:block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='enable-background:new 0 0 17 14' viewBox='0 0 17 14'%3E%3Cpath d='M14.9 0H2.1C.9 0 0 1 0 2.2v9.7C0 13 .9 14 2.1 14h12.8c1.2 0 2.1-1 2.1-2.2V2.2C17 1 16.1 0 14.9 0zm0 10.8c0 .6-.5 1.1-1.1 1.1H3.2c-.6 0-1.1-.5-1.1-1.1V3.6L7 8.5c.8.8 2.1.8 3 0l4.9-4.9v7.2z' style='fill:%23ff7326'/%3E%3C/svg%3E") 0 0 no-repeat; cursor:pointer; }


@media screen and ( min-width:1024px ) {

	/* 문의 이메일 복사하기 추가 2023-07-31 */
	.header_item_email { margin-right:10px; }
	.copy_email { width:17px; height:14px; font-size:0; }

    /* header */
    .header,
    .gnb,
    .nav_wrap,
    .header_items { display:flex; align-items:center; }

    .header { position:relative; justify-content:space-between; max-width:1780px; height:90px; margin:0 auto; padding:0 20px; background-color:#fff; z-index:2; }
    .logo { /*width:235px; height:auto;*/ }
    .logo * { display:block; }
    .logo a {  }
    .logo img { width:100%; /*max-width:235px;*/ height:auto; margin-top:5px; }

    .nav_wrap { flex:1; justify-content:space-between; }
    .nav_wrap:before { content:''; } /* 헤더 레이아웃을 위한 가상요소 추가 */

    .gnb,
    .depth_box,
    .depth_ttl_pc { position:relative; }
    .gnb { width:660px; justify-content:space-between; line-height:1; z-index:2; }
    .depth_box { padding:0 0 35px; margin-top:40px; }
    .depth_ttl_pc { display:block; text-align:center; color:#0b1449; }
    .depth_ttl_pc strong { display:block; font-size:17px; font-weight:500; white-space:nowrap; transform:scale(0.95); transition:all 0.08s; }
    .depth_box:hover .depth_ttl_pc strong,
    .depth_box.on .depth_ttl_pc strong { font-weight:700; color:#ddd; transform:scale(1.02); }

    .depth_box .depth_ttl_pc:after { content:''; position:absolute; left:50%; bottom:-13px; display:block; width:0; height:1px; background-color:#ddd; transition:all 0.2s; }
    .depth_box:hover .depth_ttl_pc:after { width:100%; left:0; right:0; }

    /* 2depth 시작 */
    .depth_in { position:absolute; top:45px; left:0; right:0; min-height:110px; } 
    .depth_in li { padding:5px 0 5px 10px; }
    .depth_in a { font-size:16px; font-weight:300; white-space:nowrap; color:#686d6b; }
    .depth_in a:hover,
    .depth_in li.on a { font-weight:500; color:#ddd; }

    .depth_ttl_pc:hover ~ .depth_in { display:block; z-index:2; }

    .header_items { gap:10px; }
    .header_items li { line-height:1; }


    .header_items_kakao,
    .header_items_tel { font-weight:700; white-space:nowrap; }
    .header_items_kakao:before,
    .header_items_tel:before { content:''; display:inline-block; }
    .header_items_kakao { font-size:13px; color:#0b1449; }
    .header_items_tel { font-size:18px; color:#11b6a4; }
    .header_items_kakao:before { width:17px; height:17px; margin-right:7px; vertical-align:middle; border-radius:2px; background:#ffde00 url(../img/icons/icon_sns_kakao.svg) center center no-repeat; background-size:14px 13px; }
    .header_items_tel:before { width:18px; height:18px; margin-right:4px; vertical-align:bottom; background:url(../img/icons/icon_tel.svg) center center no-repeat; }
    .header_items_ct { display:block; width:106px; height:35px; line-height:35px; text-align:center; font-size:14px; font-weight:500; color:#fff; border-radius:3px; background-color:#0b1449; }

    /* 헤더 메뉴 토글 애니메이션 */
    .depth_in { opacity:0; visibility:hidden; transition:opacity 0.35s; }
    
    .hd_back_pc { position:fixed; left:0; right:0; top:85px; height:0; background-color:#fff; transition:height 0.25s cubic-bezier(0,0.76,0.35,0.98); }/* 헤더 2뎁스 메뉴 바탕 레이어 */

    .pc_menu_open .hd_back_pc { height:150px; }
    .pc_menu_open .depth_in { opacity:1; visibility:visible; }

    /* 모바일 요소 숨김 */
    .menu_open,
    .hd_back_mobile,
    .depth_ttl_mo { display:none; } /* 모바일 메뉴 열기 */
}
@media screen and ( max-width:1250px ) and ( min-width:1024px ) {
    .gnb { width:auto; }
}

@media screen and ( max-width:1023px ) {\

	/* 문의 이메일 복사하기 추가 2023-07-31 */
	.copy_email { padding-left:17px; font-size:12px; letter-spacing:-0.05em; font-weight:bold; color:#ff7326; background-size:12px 15px; background-position:0 calc(50% + 1px); }

	/* z-index에 따른 위치지정 오류 수정 */
	.header { pointer-events:none; }
	.logo,
	.menu_open,
	nav,
	.hd_modal_mobile,
	.header_items { pointer-events:auto; }

    .header { position:relative; display:flex; justify-content:space-between; align-items:center; padding:10px 10px 10px 15px; z-index:2; }
    /* 로고 */
    .logo { width:150px; }
    .logo * { display:block; }
    .logo img { width:100%; height:auto; }
    /* 메뉴열기 버튼 */
    .menu_open { overflow:hidden; position:relative; width:50px; height:50px; color:transparent; background-color:transparent; }
    .menu_open:before,
    .menu_open:after { content:''; position:absolute; left:calc(50% - 13px); width:26px; }
    .menu_open:before { top:calc(50% - 11px); height:18px; border-top:3px solid #162141; border-bottom:3px solid #162141; }
    .menu_open:after { top:calc(50% - 1.5px); height:3px; background-color:#162141; }

    .nav_wrap { position:fixed; top:0; right:-270px; bottom:0; box-sizing:border-box; display:flex; flex-direction:column; width:210px; padding:20px 20px 10px; background-color:#fff; z-index:25; transition:right 0.2s; }

    .depth_box:not(:first-child) { margin-top:10px; }
    .depth_ttl_mo,
    .depth_in a { display:block; line-height:1; }
	.depth_box .performace,
    .depth_ttl_mo { padding:5px; font-size:16px; color:#000; }
    .depth_in li {  }
    .depth_in a { padding:5px; font-size:15px; font-weight:300; color:#686d6b; }

	.depth_box.on .performace,
    .depth_box.on .depth_ttl_mo { font-size:18px; color:#ddd; border-bottom:2px solid #ddd; }

    .depth_in li.on a { font-size:16px; font-weight:500; }
    .depth_in li.on a:before { content:''; display:inline-block; width:5px; height:5px; margin-right:5px; vertical-align:middle; border-radius:50%; background-color:#ddd; }

    .header_items { margin-top:auto; padding-top:20px; line-height:1; }
    .header_items li { padding-top:8px; }
    .header_items_kakao,
    .header_items_tel { font-size:16px; font-weight:700; white-space:nowrap; }
    .header_items_kakao:before,
    .header_items_tel:before { content:''; display:inline-block; }
    .header_items_kakao { color:#0b1449; }
    .header_items_tel { color:#11b6a4; }
    .header_items_kakao:before { width:17px; height:17px; margin-right:7px; vertical-align:middle; border-radius:2px; background:#ffde00 url(../img/icons/icon_sns_kakao.svg) center center no-repeat; background-size:14px 13px; }
    .header_items_tel:before { width:18px; height:18px; margin-right:4px; vertical-align:bottom; background:url(../img/icons/icon_tel.svg) center center no-repeat; }
    .header_items_ct { display:block; height:35px; line-height:35px; text-align:center; font-size:14px; font-weight:500; color:#fff; border-radius:3px; background-color:#0b1449; }

    /* 모바일 메뉴 모달 & 애니메이션 */
    .hd_modal_mobile { visibility:hidden; opacity:0; position:fixed; top:0; bottom:0; right:0; left:0; transition:opacity 0.25s; background-color:rgba(0,0,0,0.8); z-index:-1; }
    .nav_wrap.on { right:0; }
    .hd_modal_mobile.on { visibility:visible; opacity:1; z-index:24; }

    /* pc 요소 숨김 */
    .depth_ttl_pc:not(.performace),
    .hd_back_pc { display:none !important; }
}



/* footer */
footer { border-top:1px solid #a4a4a4; }
.footer_inner,
.footer_info,
.footer_contact { display:flex; }
.footer_inner { max-width:1200px; margin:0 auto; padding:55px 20px 30px; }

.footer_ttl { font-size: 12px; font-weight: 300; }
.footer_company ~ .footer_ttl { margin-top: 24px; }

footer section:first-child { margin-right:65px; }
footer section:nth-child(2) { padding:0 20px; }
footer section:last-child { margin-left:auto; }
footer h2 { margin-bottom:10px; line-height:1; font-size:16px; color:#000; font-weight:700; }
.footer_inner .logo_footer { display:block; width:83px; height:88px; }
.footer_inner .logo_footer img { width:100%; height:auto; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; }
.footer_inner .footer_info { flex-wrap:wrap; font-size:13px; font-weight:300; color:#333; }
.footer_inner .footer_info li:not(:last-child):after { content:''; display:inline-block; width:1px; height:14px; margin:0 8px; vertical-align:middle; background-color:#333; }
.footer_inner .footer_contact { max-width:510px; justify-content:space-between; line-height:1; margin-top:20px; }
.footer_inner .footer_contact [class*="footer_contact_"] { font-size:16px; font-weight:700; color:#666; }
.footer_inner .footer_contact [class*="footer_contact_"]:before { content:''; display:inline-block; margin-right:7px; vertical-align:middle; background-repeat:no-repeat; background-position:center center; }
.footer_inner .footer_contact_n:before { width:22px; height:20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='enable-background:new 0 0 49.9 50.9' viewBox='0 0 49.9 50.9'%3E%3Cstyle%3E.st0%7Bfill:%23279eda%7D%3C/style%3E%3Cpath d='M47.6 13.6C45.1 7.6 40.1 2.9 34 .9c-1.5-.5-3.1.3-3.7 1.8-.2.7-.2 1.5.1 2.2.3.7.9 1.2 1.7 1.5 4.6 1.5 8.3 5 10.2 9.5 1.9 4.5 1.7 9.5-.4 13.9-.4.7-.4 1.6-.1 2.4.3.6.8 1.2 1.4 1.5.4.2.8.3 1.3.3 1.1 0 2.1-.6 2.6-1.6 2.8-6.1 3-12.8.5-18.8z' class='st0'/%3E%3Cpath d='M29.7 9.6c-1.5-.5-3.1.3-3.7 1.8-.5 1.5.3 3.1 1.8 3.7 2.2.7 4 2.4 4.9 4.5.9 2.1.8 4.5-.2 6.6-.4.7-.4 1.6-.1 2.4.3.6.8 1.2 1.4 1.5.4.2.8.3 1.3.3 1.1 0 2.1-.6 2.6-1.6 1.7-3.6 1.8-7.7.3-11.4s-4.6-6.5-8.3-7.8zM29.8 33.3c-.9-2.1-3.4-2-4.5-2h-.5c-1 0-2 .4-2.7.7H22c-.3.1-.6.2-.8.3-.1-.1-.2-.2-.4-.3-.3-.3-.5-.6-.7-.9-.4-.7-.8-1.4-1.1-2.1-.5-1-.9-2-1.3-2.8l-.3-.7c-.4-.9-.7-1.7-.9-2.5-.3-.8-.5-1.4-.6-2-.1-.4-.1-.7-.1-.9 0-.1 0-.2.1-.3.2-.1.5-.3.8-.4 1.4-.6 5.9-3 4.3-6.9l-3.6-8.6C16.6 2.1 14.9 1 13.1 1H13c-.6 0-1.2.1-1.7.4-.1 0-.2.1-.4.1l-.5.2c-.2.1-.4.2-.7.3-1.6.6-3.4 1.3-4.9 2.4-6.8 5-3.5 16.7-2.1 21.7C5 34 12.8 50.5 22.8 50.5c.5 0 1 0 1.5-.1 1.9-.3 3.5-1.1 5.1-1.8l.8-.4c.3-.1.5-.2.7-.3 1.1-.5 2-1.4 2.5-2.5s.5-2.4 0-3.5l-3.6-8.6z' class='st0'/%3E%3C/svg%3E"); }
.footer_inner .footer_contact_m:before { width:21px; height:15px; background-image:url(../img/icons/icon_letter.svg); }
.footer_inner .footer_contact_k:before { width:20px; height:20px; background-image:url(../img/icons/icon_sns_kakao.svg); background-size:15px 15px; background-color:#ffde00; }

.footer_link {  }
.footer_link li + li { margin-top:5px; }
.footer_link a { display:block; box-sizing:border-box; width:106px; height:29px; line-height:28px; text-align:center; }
.footer_link_ct { font-size:14px; font-weight:500; color:#fff; background-color:#0b1449; }
[class*="footer_link_nb0"] { border:1px solid #c8c5c5; background-color:#fff; }
.footer_link_nb01 img { width:84px; height:16px; }
.footer_link_nb02 img { width:85px; height:13px; }
@media screen and ( max-width:1204px ) {
    footer section:first-child { margin-right:20px; }
}
@media screen and ( max-width:820px ) {
    .footer_inner { flex-direction:column; padding:20px; }
    footer section:first-child { display:none; }
    footer section:nth-child(2) { padding-left:0; }
    footer section:last-child { margin-left:0; margin-top:15px; order:2; }

    .footer_contact { justify-content:flex-start; flex-flow:wrap; margin-top:15px; }
    .footer_contact li { margin-right:15px; margin-top:5px; }
    .footer_contact [class*="footer_contact_"] { font-size:13px; }
    .footer_link { display:flex; justify-content:flex-start; flex-flow:wrap; }
    .footer_link li { margin:5px 5px 0 0; }
}
@media screen and ( max-width:500px ) {
    .footer_info { flex-flow:column; }
    .footer_info li:not(:last-child):after { content:none; }
}

/* 우측 플로팅 배너 */
.quick_pos { position:absolute; top:500px; left:calc(50% + 700px); text-align:center; z-index:1; }
.quick_pos span,
.quick_pos a span:before { display:block; }
.quick_pos a + a { margin-top:9px; }
.quick_pos a { display:flex; flex-direction:column; justify-content:center; width:74px; height:74px; border-radius:50%; text-align:center; }
.quick_pos a span { font-size:12px; font-weight:500; }
.quick_pos a span:before { content:''; display:block; margin:0 auto; background-repeat:no-repeat; background-position:center center; }
.quick_pos a.quick_inq { color:#fff; background-color:#fe6845; }
.quick_pos a.quick_kakao { color:#3c2323; background-color:#ffd200; }
.quick_pos a.quick_inq span:before { width:24px; height:25px; margin-bottom:2px; background-image:url(../img/icons/icon_cal.svg); }
.quick_pos a.quick_kakao span:before { width:35px; height:32px; background-image:url(../img/icons/icon_sns_kakao.svg); }
.quick_top { margin-top:13px; line-height:1; font-weight:700; }
.quick_top:before { content:''; display:block; width:0; height:0; margin:0 auto 5px; border-width:0 5px 5px; border-style:solid; border-color:transparent transparent #3c2323 transparent; }
@media screen and ( max-width:1600px ) {
    .quick_pos { left:auto; right:20px; }
}
@media screen and ( max-width:1024px ) { 
    .quick_pos { display:none; }
}



.footer_wrap .footer_item { border-bottom:1px solid #d1d8e4; }
.footer_wrap .footer_item ul { width:1080px; height:50px; line-height:50px; margin:0 auto; font-size:0; color:#888888; }
.footer_wrap .footer_item li,
.footer_wrap .footer_item li:not(.family_site):not(:first-child):before { display:inline-block; vertical-align:top; }
.footer_wrap .footer_item li a { font-size:12px; }
.footer_wrap .footer_item li b { font-weight:500; }
.footer_wrap .footer_item li:not(:first-child):not(.family_site):before { font-size:12px; content:'\007C'; display:inline-block; margin:0 10px; color:#888888; }
.footer_wrap .footer_info { position:relative; display:block; max-width:1080px; padding:20px 15px 42px; margin:0 auto; font-weight:400; color:#888888; }
.footer_wrap .footer_one_logo { display:inline-block; margin-bottom:10px; }

.mo_footer_box { position:relative; }

.footer_wrap .footer_company { display:flex; font-size:12px; font-weight:300; }
.footer_wrap .footer_company li {}
.footer_wrap .footer_company li b { font-weight:500; color:#000; }
.footer_wrap .footer_company li + li:before { content:''; display:inline-block; margin:0 7px 0 9px; vertical-align:middle; width:1px; height:10px; background-color:#e8e9ec; }
.footer_wrap .footer_company li > a { color:#428bca; }
.footer_wrap .footer_company a img { vertical-align:middle; }

.footer_quick { position:absolute; right:0; top:-10px; display:flex; gap:10px; } /* 좌우 퀵배너 푸터로 이동 2022-12-05 - 배달의민원TV / 라디오 광고듣기 / 블로그&포스트 */
.footer_quick a { display:block; }

.footer_wrap .team { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:950px; padding-top:5px; font-size:0; }
.footer_wrap .team dl { display:inline-block; width:25%; margin-top:20px; font-size:12px; letter-spacing:0.05em; }
.footer_wrap .team dt { font-size:15px; font-weight:500; color:#333; }
.footer_wrap .team dd strong { font-size:18px; font-weight:400; }
.footer_wrap .team dd a { font-size:12px; color:#4d4d4d; }
.footer_wrap .team01 strong { color:#ff0066; } /* 국내 민원서류 발급 */
.footer_wrap .team02 strong { color:#0278c0; } /* 번역/공증 촉탁대리/대사관인증 */
.footer_wrap .team03 strong { color:#af7924; } /* 해외민원 */
.footer_wrap .team04 strong { color:#7030a0; } /* 중국민원 */
.footer_wrap .team05 strong { color:#009900; } /* 부모여행동의서 */
.footer_wrap .team06 strong { color:#d90022; } /* 대량등기부등본 */
.footer_wrap .team07 strong { color:#c1001e; } /* 베트남민원 */
.footer_wrap .team08 strong { color:#0068b7; } /* 번역/비자 */
.footer_wrap .team09 strong { color:#FF00FF; } /* 번역 */
.footer_wrap .team10 strong { color:#ff4e00; } /* 기업제휴 / 수출바우처 */

.footer_wrap [class*="txt_default"] { font-size:12px; }
.footer_wrap .txt_default01 { margin:35px 0 5px; font-weight:500; color:#000; }
.footer_wrap .txt_default02 { font-weight:300; color:#888; }

.footer_wrap .footer_logo { overflow:hidden; font-size:0; background-color:#fbfcfc; border-top: 1px solid #c5c6c6; }
.footer_wrap .footer_logo ul { display:table; width:1080px; height:60px; margin:0 auto; white-space:nowrap; }
.footer_wrap .footer_logo ul:not(:first-of-type) { border-top:1px solid #dce0e0; }
.footer_wrap .footer_logo li { display:table-cell; position:relative; width:150px; height:100%; vertical-align:middle; }
.footer_wrap .footer_logo li img { line-height:60px; }



/* 개인정보보호책임보험 팝업 추가 2023-01-13 */
.insurance_open,
.insurance_close { cursor:pointer; }
.insurance_popup,
.insurance_dim { left:0; right:0; bottom:0; top:0; }
.insurance_close,
.insurance_dim { position:absolute; }
.insurance_popup { position:fixed;  z-index:100; }
.insurance_popup .insurance { position:absolute; top:calc(50% - 250px); left:calc(50% - 195px); }
.insurance_close { top:0; right:0; width:30px; height:30px; opacity:0; }
.insurance_dim { opacity:0; background-color:rgba(0,0,0,0.4); transition:opacity 0.6s; }

.insurance_popup.this_show .insurance { animation:0.3s fadeDown; }
.insurance_popup.this_hide .insurance { opacity:0; animation:0.3s fadeUp; }

.insurance_popup.this_show .insurance_dim { opacity:1; }
.insurance_popup.this_hide .insurance_dim { opacity:0; }

@keyframes fadeDown {
    from { opacity:0; transform:translate3d(0, -50px, 0); }
    to { opacity:1; transform:translate3d(0); }
}
@keyframes fadeUp {
	from { opacity:1; transform:translate3d(0); }
	to { opacity:0; transform:translate3d(0, -50px, 0); }
}


.swiper { z-index:0 !important; }



@media screen and ( max-width:1100px ) {
	.footer_item,
	.footer_info .team,
	.footer_logo,
	.footer_quick { display: none; }
	.footer_wrap .footer_company { flex-wrap:wrap; }

}


/* footer 패밀리사이트 추가 2023-09-14 */
.family_site { position:relative; float:right; width:200px; height:34px; line-height:1; margin:8px 0 0 auto; }
.family_site,
.family_site_box,
.family_site button { font-weight:300; background-color:#fff; }
.family_site_box,
.family_site button { box-sizing:border-box; width:100%; border:1px solid #888; }
.family_site button { text-align:left; }
.family_site button:after { content:''; position:absolute; right:12px; bottom:13px; border-style:solid; border-width:7px 7px 0 7px; border-color:#000 transparent transparent transparent; }
.family_site.on button:after { transform:rotate(180deg); }
.family_site { text-align:left; color:#333; }
.family_site button { padding:0 12px; height:34px; font-size:14px; color:#333; }
.family_site_box { display:none; position:absolute; left:0; bottom:33px; }
.family_site.on .family_site_box { display:block; }
.family_site a { display:block; margin:15px 10px; font-size:14px; color:#333; }
.family_site a:hover { font-weight:700; }


/* 메인 */
/* 파일첨부 안내 툴팁 추가 2024-08-05 */
.with_form_item:has(.addfile_tip) { position:relative; }
.with_form_item .addfile_tip { position:absolute; top:35px; left:calc(50% - 100px); box-sizing: border-box; width:fit-content; padding: 10px 10px 10px 10px; word-break:keep-all; border:2px solid #fe6845; border-radius: 10px; background-color:#fff799; }
.with_form_item .addfile_tip strong { font-size: 14px; font-weight:500; color: #000; }
.with_form_item .addfile_tip p {  margin-top: 5px;line-height: 1.2; font-size: 12px; color: #333; }
.with_form_item .addfile_tip:before,
.with_form_item .addfile_tip:after { content: ''; position:absolute; left:calc(50% - 12px); border-style:solid; border-width: 0 9px 12px 9px; }
.with_form_item .addfile_tip:before { top:-12px;  border-color:#fe6845 transparent; }
.with_form_item .addfile_tip:after { top:-9px;  border-color: #fff799 transparent; }

.addfile_tip.hide { opacity:0; z-index:-1; transition:all 0.3s; }

.with_form_item .file_up { align-items:center; }