/* ========================================================================================================================================================= */ /* [이지소프트랩] 시스템의 전체 공통CSS를 정의합니다 수정시 시스템에 전체에 영향을 미치니깐 신중하게 수정해야합니다 */ /* ========================================================================================================================================================= */ :root { --erpBgColor: #f4f4f4; --red: #e8612b; --orange: #ff8e51; --yellow: #f8c666; --mustard: #d6971e; --rust: #92543b; --earth: #825b61; --sand: #bcadaf; --blush: #f2cbd1; --pale: #ffe8dc; --vellum: #eeeae3; --ghost: #f7f5f1; --foam: #e9ebe2; --lichen: #d2d6c5; --moss: #3c402b; --slate: #3e3d3a; --stone: #343330; --dark-grey: #656461; --acid: #c4e456; --olive: #a4b55b; --green: #1fa647; --darkgreen: #2e321f; --deepgreen: #1f2310; --lightgreen: #abded1; --blue: #1f7fea; --purple: #925bff; --eggplant: #35313d; --moss-shadow: rgba(60, 64, 43, .2); --slate-sheer: rgba(62, 61, 58, .5); --ghost-sheer: rgba(247, 245, 241, .5); --elephant: #656461; --pewter: #c9c5bf; --shadow: rgba(0, 0, 0, .15); --scrim: rgba(255, 255, 255, .05); --sheer: rgba(194, 186, 196, .25); --soft: rgba(194, 186, 196, .7); --translucent: rgba(177, 52, 52, 0.5); /*-----------회사별색상코드---------*/ /* --ianeColor: rgba(50, 70, 205,1); --ianeColorLight: rgba(50, 70, 205, 0.95); */ /*#4255d1;*/ --ianeColor: rgba(0, 35, 76, 0.9); --ianeColorLight: rgba(0, 35, 76, 0.8); /* #00234c; */ /*--mycounColor: rgba(120, 89, 58,1); --mycounColorLight: rgba(120, 89, 58, 0.95); OLD */ --mycounColor: rgba(238, 83, 26,1); --mycounColorLight: rgba(238, 83, 26, 0.95); --easiColor: rgba(60, 69, 195, 1); --easiColorLight: rgba(60, 69, 195, 0.95); /* 파랑색 #2561c1 rgb(37, 97, 193) 좀더밝은파랑 #3674d9 rgb(54, 116, 217) 클래식블루 #34568b rgba(0, 77, 153, 0.96); #3668ba 초록색 #059469 rgba(5, 148, 105,1); */ --newpickColor: rgba(45, 113, 79,1); --newpickColorLight: rgba(45, 113, 79, 0.95); /*#2d8659;*/ --infaithColor: rgba(0, 77, 153,1); --infaithColorLight: rgba(0, 77, 153, 0.95); /*#004d99;*/ --wegesColor: rgba(72, 54, 152,1); --wegesColorLight: rgba(72, 54, 152,0.95); /* #483698;*/ --irinaColor: rgba(72, 54, 152,1); --irinaColorLight: rgba(72, 54, 152,0.95); /* #483698;*/ --oulrimtaxColor: rgba(4, 78, 190,1); --oulrimtaxColorLight: rgba(4, 78, 190,0.95); /* #2263c3 rgba( 34, 99, 195,1) #044ebe rgb(4, 78, 190) */ } /* -----------------------------------------------------------------------샘플예제 --------------------------------------------------------------------------------------- ---- 박스형 배경어둡게하고 글씨는 흰색으로 만들기 예제 .crisisTeamGrid .boxImg1 { color: white; font-size: 22px; font-weight:700; padding-top: 80px; border-radius:40px; text-align: center; background: linear-gradient(rgba(10,10,10,0.2), rgba(10,10,10,0.5)), url("/upload/_images/home_mycoun/mycrn/eap_crisis_03.jpg") no-repeat bottom/100%; } .crisisTeamGrid .boxImg2 { color: white; font-size: 22px; font-weight:700; padding-top: 80px; border-radius:40px; text-align: center; background: linear-gradient(rgba(10,10,10,0.2), rgba(10,10,10,0.5)), url("/upload/_images/home_mycoun/mycrn/eap_crisis_04.jpg") no-repeat bottom/250%; } .crisisTeamGrid .boxImg3 { color: white; font-size: 22px; font-weight:700; padding-top: 80px; border-radius:40px; text-align: center; background: linear-gradient(rgba(10,10,10,0.2), rgba(10,10,10,0.5)), url("/upload/_images/home_mycoun/mycrn/eap_crisis_05.jpg") no-repeat center/100%; } .crisisTeamGrid .boxImg4 { color: white; font-size: 22px; font-weight:700; padding-top: 80px; border-radius:40px; text-align: center; background: linear-gradient(rgba(10,10,10,0.2), rgba(10,10,10,0.5)), url("/upload/_images/home_mycoun/mycrn/eap_crisis_06.jpg") no-repeat center/180%; } .sliderGrid .miniSlider .iconNew { width:15px; margin-right:5px; content:url('/upload/_images/home_mycoun/mycrn/icon_ps_02.png'); } */ /*------------------------------------------------------------------------------ phosphorIcon기본사이즈셋팅 -----------------------------------------------*/ /*.ph { font-size: 1rem; } .ph-thin { font-size: 1rem; } .ph-bold { font-size: 1rem; }*/ .disabled { cursor:not-allowed; opacity:.5} /*------------------------------------------------------------------------------ 검색조건섹션 버튼 --------------------------------------------------------*/ .es_sbn_test { min-width: 90px; padding: 8px 14px; border:0px solid #111; border-radius: 4px; background: white; color: #222; font-size: 13px; font-family: "Pretendard Regular"; font-weight: 600; letter-spacing: 1px; transition: all .3s ease; } .es_sbn_test:hover { background-color: #1a8cff; color: white; } .es_sbn_test .highlight { background: linear-gradient(to right, #FFEF8D 50%, transparent 50%); background-size: 205% 100%; background-position: right bottom; transition: background 0.25s ease; } .es_sbn_test .highlight:hover { background-color: #FAFE00; background-position: left bottom; transition: background 0.8s ease; } .es_sbn_gray { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; background-color: rgba(220,220,220, 0.8); border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none;} .es_sbn_gray:hover { transform: translateY(1px); } .es_sbn_gray:active { transform: translateY(1px) scale(1.1); } .es_sbn_gray > i { font-size:12px; font-weight: 700; color: #121212;} .es_sbn_gray > span { margin-left: 4px; color: #333!important; font-size: 11px; } .es_sbn_gray > img { height:17px; } .es_sbn_gray > i, .es_sbn_gray > img, .es_sbn_gray > span { vertical-align: middle;} .es_sbn_white { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; background-color: rgba(255,255,255, 0.9); color: #222; border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; /*fliter: drop-shadow(2px 2px 14px #777);*/ letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none;} .es_sbn_white:hover { transform: translateY(1px); } .es_sbn_white:active { transform: translateY(1px) scale(1.1); } .es_sbn_white > i { font-size:12px; font-weight: 700; color: #121212;} .es_sbn_white > span { margin-left: 4px; color: #666!important; font-size: 11px; } .es_sbn_white > img { height:20px; } .es_sbn_white > i, .es_sbn_white > img, .es_sbn_white > span { vertical-align: middle;} .es_sbn_black { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; color: white; background-color: rgba(35,35,35, 0.9); border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none; } .es_sbn_black:hover { transform: translateY(1px); } .es_sbn_black:active { transform: translateY(1px) scale(1.1); } .es_sbn_black > i { font-size:12px; font-weight: 700; color: #fff; } .es_sbn_black > span { margin-left: 4px; color: #fefefe!important; font-size: 11px; } .es_sbn_black > img { height:20px; } .es_sbn_black > i, .es_sbn_black > img, .es_sbn_black > span { vertical-align: middle;} .es_sbn_blue { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; color: white; background-color: rgba(40, 116, 230, 1); border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none; } .es_sbn_blue:hover { transform: translateY(1px); } .es_sbn_blue:active { transform: translateY(1px) scale(1.1); } .es_sbn_blue > i { font-size:12px; font-weight: 700; color: #fff; } .es_sbn_blue > span { margin-left: 4px; color: #fefefe!important; font-size: 11px; } .es_sbn_blue > img { height:20px; } .es_sbn_blue > i, .es_sbn_blue > img, .es_sbn_blue > span { vertical-align: middle;} .es_sbn_red { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; color: white; background-color: rgba(252, 53, 3, 0.8); border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none;} .es_sbn_red:hover { transform: translateY(1px); } .es_sbn_red:active { transform: translateY(1px) scale(1.1); } .es_sbn_red > i { font-size:12px; font-weight: 700; color: #fff;} .es_sbn_red > span { margin-left: 4px; color: #fefefe!important; /*font-size: 11px;*/ } .es_sbn_red > img { height:17px; } .es_sbn_red > i, .es_sbn_red > img, .es_sbn_red > span { vertical-align: middle;} .es_sbn_green { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; color: white; background-color: rgba(57, 172, 115, 1); border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none;} .es_sbn_green:hover { transform: translateY(1px); } .es_sbn_green:active { transform: translateY(1px) scale(1.1); } .es_sbn_green > i { font-size:12px; font-weight: 700; color: #fff;} .es_sbn_green > span { margin-left: 4px; color: #fefefe!important; font-size: 11px; } .es_sbn_green > img { height:17px; } .es_sbn_green > i, .es_sbn_green > img, .es_sbn_green > span { vertical-align: middle;} .es_sbn_green_light { min-width:50px; height: 33px; margin: 2px 2px; padding: 10px 10px 6px; color: #222; background-color: rgba(13, 217, 13, 0.9); border-radius: 16px; display: inline-block; box-shadow: 0px 4px 0 0 #ccc; letter-spacing: 1px; font-family: "맑은 고딕",sans-serif; text-align:center; font-size: 12px; font-weight: 500; transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none; } .es_sbn_green_light:hover { transform: translateY(1px); } .es_sbn_green_light:active { transform: translateY(1px) scale(1.1); } .es_sbn_green_light > i, .es_sbn_green_light > img, .es_sbn_green_light > span { vertical-align: middle;} /*------------------------------------------------------------------------------ 검색조건섹션 버튼 --------------------------------------------------------*/ .barButton { min-width:50px; height: 35px; margin: 2px 4px; padding: 8px 10px 2px 10px; background-color: #fefefe; color: #111!important; border-radius: 8px; display: inline-block; font-family: "맑은 고딕",sans-serif; text-align:center; font-weight: 500; font-size: 12px; line-height: 20px; box-sizing: border-box; color: var(--moss); border: 1px solid var(--moss); box-shadow: 4px 4px 0 0 var(--moss-shadow); transform: translate(0); transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none; } .barButton > i { font-size:13px; font-weight: 500; /*margin-right:2px; position: relative; top: 2px;*/ color: #111;} .barButton > img { height:17px; } .barButtonSm { height: 20px; margin: 0 4px; padding: 4px 8px 4px 8px; background-color: #fefefe; color: #111!important; border-radius: 8px; display: inline-block; font-family: "나눔고딕",Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif; font-weight: 500; font-size: 12px; line-height: 12px; box-sizing: border-box; color: var(--moss); border: 1px solid var(--moss); box-shadow: 4px 4px 0 0 var(--moss-shadow); transform: translate(0); transition: all .2s ease; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none; } .barButtonSm > i { font-size:18px; font-weight: 500; margin-right:2px; position: relative; top: 2px; color: #111;} /*------------------------------------------------------------------------------ 검색조건섹션 버튼 --------------------------------------------------------*/ .scrbtn { display: inline-flex;align-items: center;justify-content: center;vertical-align: middle;white-space: nowrap;overflow: hidden; font-family: "Malgun Gothic","Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-weight: normal;transition-duration: 0.2s;transition-property: box-shadow, transform;will-change: box-shadow, transform; box-shadow: 3px 4px 0 0 var(--moss-shadow); margin:2px;} /*.scrbtn:hover { transform: translateY(-2px); }.scrbtn:active { transform: translateY(-2px) scale(0.95); }*/ .scrbtn:hover { transform: translateY(1px); } .scrbtn:active { transform: translateY(1px) scale(1.1); } /*.scrbtn:hover , .scrbtn:active { top: 3px; transition: all .2s;}*/ .scrbtn > i { font-size:14px; font-weight: 500; color: #333;} .scrbtn > img { height:18px; } .scrbtn-sm { min-width: 50px; height: 40px; min-height: 40px; padding: 6px 10px; font-size: 12px; line-height: 15px; color: #555; border: 1px solid #999; background-color: #fff;} .scrbtn-lg { min-width: 60px; height: 50px; min-height: 50px; padding: 8px 10px; font-size: 12px; line-height: 18px; color: #555; border: 1px solid #999; background-color: #fff;} .scrbtn-primary { color: #333; border: 1px solid #555; background-color: #fff;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* HTML 기본스타일 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ html { -ms-overflow-style:scrollbar;} html, body, p, span { font-family: '맑은 고딕','Malgun Gothic',AppleSDGothicNeo,HelveticaNeue,helvetica, sans-serif; font-size:12px; } body { margin:0} /** { scroll-behavior: smooth; }*/ /*-----------select box 커스텀하기 기본설정지우고 새로운 배경추가함 select { -webkit-appearance:none; -moz-appearance:none; appearance:none;} select::-ms-expand{ display:none; } select { background:url('/resources/icon/icon-caret-sm.png') no-repeat 97% 50%/15px auto; background-color: white; border: 1px solid #999; text-decoration: none; min-width: 60px; margin: 2px 0px; padding: .3em 0em .3em 1em; font-family: inherit; border-radius: 4px; } ---*/ select { color: #333333; text-decoration: none; min-width: 60px; margin: 2px; padding: .3em 3em .3em 1em; font-family: inherit; background: url('/resources/icon/icon-caret-sm.png') no-repeat 99% 50%; background-size: 16px; background-color: white; border: 1px solid #999; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a { color: inherit; text-decoration:none; cursor: pointer; } #header { z-index:999; } #screen_head { overflow:hidden; padding: 0px 10px;} #screenId { color: #aaa; font-size:11px; } textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"] { -webkit-appearance: none;-moz-appearance: none; /*-webkit-border-radius:0;*/ -webkit-background-clip:padding-box;background-clip:padding-box; } input::placeholder { color: darkGray; opacity: 1; } input::-webkit-input-placeholder { color: darkGray; } input:-ms-input-placeholder { color: darkGray; } input:-moz-read-only { background-color: #f0f0f0;} input:read-only { background-color: #f0f0f0;} input[readonly] { cursor:default; } input[type=checkbox] { transform: scale(1.2)!important; margin:6px!important;} input[type="radio"], input[type="checkbox"] {margin:7px 0px 0px} input[type="number"] { text-align: center; position: relative; padding: 4px 10px; padding-right: 2px; } input[type="date"] { padding:3px 10px;} /*textarea:focus, input:focus { border:1px solid #aaaaaa; !*box-shadow: 0 0 4px #5368ac; outline: none; *! }*/ /* ------------------- 입력칸http://gotosearchresultpage.helpstart.co.kr/ad/cpc_open.php?app=205&domain=easierp.localhost&type=1&aid=8291&browser=msedge&guid=20210828yMRzqb 의 테두리색상설정하기 -------------- */ /* --------------- 숫자입력항목은 spin버튼을 기본추가한다 */ /* input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: auto; -moz-appearance: textfield; appearance: auto; } input[type=number]::-webkit-inner-spin-button { opacity: 1 } input[type=number] {-moz-appearance: textfield;} */ /*input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; }*/ /*input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: inner-spin-button !important; width: 30px; position: absolute; top: 0; right: 0; height: 100%; }*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 폰트 Font */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .font-CircularBlack { font-family: "Circular Std Black"!important; } .font-CircularBold { font-family: "Circular Std Bold"!important; } .font-CircularMedium { font-family: "Circular Std Medium"!important; } .font-CircularLight { font-family: "Circular Std Light"!important; } .font-Easisoft { font-family: "Noto Sans Korean", "Apple SD Gothic Neo", "맑은 고딕", "Nanum Gothic", "Noto Sans", sans-serif; font-weight:700;} .font-ProximaNovaRegular { font-family: "ProximaNovaRegular"; } .font-Malgeun { font-family: "맑은 고딕"; } .font-NanumBarunGothic { font-family: "NanumBarunGothic"; } .font-NanumGothicRegular { font-family: "Nanum Gothic Regular";} .font-NanumGothicBold { font-family: "Nanum Gothic Bold";} .font-NanumGothicExtraBold { font-family: "Nanum Gothic ExtraBold";} .font-NanumPenScript { font-family: "Nanum Pen Script"; } .font-NanumMyeongjo { font-family: "Nanum+Myeongjo"; } .font-NanumSquare { font-family: "NanumSquare"; } .font-ttCommons { font-family: "tt_commons"; } .font-Gugi { font-family: "Gugi"; } .font-BlackHanSans { font-family: "Black Han Sans"; } .font-Concert { font-family: "Concert One"; } .font-Chau { font-family: "Chau Philomene One"; } .font-PottaOne { font-family: 'Potta One'; } .font-Oswald { font-family: 'Oswald'; } .font-Noto12 { font-family: "Noto Sans KR"; font-size:12px; line-height:16px; } .font-Noto13 { font-family: "Noto Sans KR"; font-size:13px; line-height:18px; } .font-Noto16 { font-family: "Noto Sans KR"; font-size:16px; line-height:20px; } .font-Noto20 { font-family: "Noto Sans KR"; font-size:20px; line-height:28px; } .font-Noto26 { font-family: "Noto Sans KR"; font-size:26px; line-height:32px; } .font-Noto32 { font-family: "Noto Sans KR"; font-size:32px; line-height:38px; } .font-Noto40 { font-family: "Noto Sans KR"; font-size:40px; line-height:48px; } .font-NotoSansKR { font-family: "Noto Sans KR"; } .font-NotoSansBold { font-family: "Noto Sans Bold"; } .font-NotoSansRegular { font-family: "Noto Sans Regular"; } .font-NotoSansThin { font-family: "Noto Sans Thin"; } .font-NotoSansDemiLight { font-family: "Noto Sans DemiLight"; } .font-NotoSansLight { font-family: "Noto Sans Light"; } .font-NotoSansBlack { font-family: "Noto Sans Black"; } .font-NotoSansMedium { font-family: "Noto Sans Medium"; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 화면입력 폼 NEW */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_sticky_30 { position: -webkit-sticky; position: sticky; background-color: #f9f9f9; left:30px; padding: 0px 10px!important; } .es_clear_both { clear: both; } .es_heading { font-size:13px; font-weight:600; border-bottom: 1px solid #666; padding:5px 0px; margin-bottom: 6px; clear: left; } .es_lb { font-size:11px; font-weight:500; font-family:'맑은 고딕'; padding: 4px 2px 0px 2px; color: #999; text-align: right;} .es1{float:left; min-height: 22px; padding:3px;width:8.33333% } .es2{float:left; min-height: 22px; padding:3px;width:16.66666%} .es3{float:left; min-height: 22px; padding:3px;width:24.99999%} .es4{float:left; min-height: 22px; padding:3px;width:33.33333%;} .es5{float:left; min-height: 22px; padding:3px;width:41.66666%} .es6{float:left; min-height: 22px; padding:3px;width:49.99999%} .es7{float:left; min-height: 22px; padding:3px;width:58.33333%} .es8{float:left; min-height: 22px; padding:3px;width:66.66666%} .es9{float:left; min-height: 22px; padding:3px;width:74.99999%} .es10{float:left; min-height: 22px; padding:3px;width:83.33333%} .es11{float:left; min-height: 22px; padding:3px;width:91.66666%} .es12{float:left; min-height: 22px; padding:3px;width:99.99999%} @media (max-width:700px){ .es_lb { text-align: left;} } @media (min-width:601px){ .em1 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:8.33333%} .em2 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:16.66666%} .em3 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:24.99999%} .em4 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:33.33333%} .em5{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:41.66666%} .em6{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:49.99999%} .em7 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:58.33333%} .em8 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:66.66666%} .em9 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:74.99999%} .em10{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:83.33333%} .em11{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:91.66666%} .em12{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:99.99999%} } @media (min-width:993px){ .el1 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:8.33333%} .el2{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:16.66666%} .el3{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:24.99999%} .el4 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:33.33333%} .el5{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:41.66666%} .el6{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:49.99999%} .el7 {float:left; min-height: 22px; padding:3px 3px 0px 3px;width:58.33333%} .el8{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:66.66666%} .el9{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:74.99999%} .el10{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:83.33333%} .el11{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:91.66666%} .el12{float:left; min-height: 22px; padding:3px 3px 0px 3px;width:99.99999%} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 숫자입력칸 넣기용 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_num { margin: 0px; padding: 4px 10px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; border-right: none; color: #333!important;background-color: #fbfbfb;} .es_num:first-child { border-top-left-radius: 3px; border-bottom-left-radius:3px; } .es_num:last-child { border-top-right-radius:3px; border-bottom-right-radius:3px; border-right: 1px solid #aaa;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* CLAMP 글내용 줄수만큼 내용자르기 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_line_clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .es_line_clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .es_line_clamp5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .es_line_clamp6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .es_line_clamp7 { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 화면입력 폼 NEW */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_input_grid { display: grid; grid-template-columns: repeat( var(--gridColCnt), 1fr); grid-gap: 10px;} .es_input_grid .inGroup { position: relative; } .es_input_grid .head /* 소제목 */ { font-size:14px; font-weight: 600; margin-bottom:6px; border-bottom: 1px solid #333; grid-column: 1/span var(--gridColCnt); } .es_input_grid .fullsize /* 관리자메모 */ { grid-column: 1/span var(--gridColCnt); } .es_input_grid .half12 /* 1열부터2개 */ { grid-column: 1/span 2; } .es_input_grid .half32 /* 3열부터2개 */ { grid-column: 3/span 2; } .es_input_grid .label /* 라벨 */ { position: absolute; top: 0px; left: 1rem; color: #333; font-size: 12px; opacity: 1; transform: translate3d(0, 4px, 0); scale(1); transform-origin: 0 0; } .es_input_grid .item /* 입력항목 */ { margin: 8px 2px; padding: 4px 10px 2px 2px; color: #333; width: 100%; /*font-size: 12px;*/ line-height: 1.2rem;; border:none; border-bottom: 1px solid #eeeeee; transition: box-shadow 300ms; resize: none;} .es_input_grid .item::placeholder { color: #aaaaaa; } .es_input_grid .item:focus { outline: none; border-bottom: 1px solid #999; } .es_input_grid .item:placeholder-shown + .label { visibility: hidden; z-index: -1; } /*라벨 숨겨둠*/ /*------- 입력시 라벨노출하기 ----*/ .es_input_grid .item:not(:placeholder-shown) + .label, .es_input_grid .item:focus:not(:placeholder-shown) + .label { visibility: visible; z-index: 1; position:absolute; left:4px; opacity: 1; background-color: white; color: #999999; padding: 2px 10px 0px 0px; transform: translate3d(0, -12px, 0) scale(1); transition: transform 300ms, visibility 0ms, z-index 0ms; } @media (max-width:700px) { .es_input_grid { padding: 10px 20px; display: grid; grid-template-columns: repeat(2, 1fr); } .es_input_grid .head { font-size:14px; font-weight: 600; margin-bottom:6px; border-bottom: 1px solid #333; grid-column: 1/span 2; } .es_input_grid .fullsize { grid-column: 1/span 2; } .es_input_grid .half12 /* 관리자메모 */ { grid-column: 1/span 2; } .es_input_grid .half32 /* 관리자메모 */ { grid-column: 1/span 2; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* es_inputBoxWrap 입력폼 2025년도 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_inputBoxWrap { border: 1px solid #aaa; border-radius: 10px; padding: 8px 14px; margin-bottom: 10px;} .es_inputBoxTitle { font-size:16px; font-family: "Pretendard Bold"!important; color: #555; padding: 4px 0px; text-align: left; margin-bottom: 14px; } .es_inputBox { width: 100%; display: grid; grid-template-columns: repeat(8, 1fr); grid-column-gap: 10px; grid-row-gap: 15px;} .es_inputBox .inputBox { position: relative; } .es_inputBox .inputBox:nth-child(n+1) { grid-column: span 4; } .es_inputBox .colspan8 { grid-column: span 8!important; } .es_inputBox .colspan6 { grid-column: span 6!important; } .es_inputBox .colspan5 { grid-column: span 5!important; } .es_inputBox .colspan3 { grid-column: span 3!important; } .es_inputBox .colspan2 { grid-column: span 2!important; } .es_inputBox .colspan1 { grid-column: span 1!important; } .es_inputBox .label /* 라벨 */ { position: absolute; top: 0px; left: 1rem; color: #333; font-size: 13px; opacity: 1; transform: translate3d(0, 4px, 0); scale(1); transform-origin: 0 0; } .es_inputBox .inputItem /* 입력항목 */ { margin: 2px 2px; padding: 3px 20px 4px 10px; color: #111; width: 100%; font-size: 12px; line-height: 1.4rem;; border:none; border-bottom: 1px solid #f3f3f3; transition: box-shadow 300ms; } .es_inputBox .inputItem::placeholder { color: #aaa!important; } .es_inputBox .inputItem:focus { outline: none; } .es_inputBox .inputItem:placeholder-shown + .label { visibility: hidden; z-index: -1; } /* 라벨 숨겨둠 */ .es_inputBox .inputItem:not(:placeholder-shown) + .label, .es_inputBox .inputItem:focus:not(:placeholder-shown) + .label { visibility: visible; z-index: 1; position:absolute; left:12px; opacity: 1; background-color: transparent; color: #999999; padding: 4px 10px 4px 0px; font-size: 0.9em; /* 입력시 라벨노출하기 */ transform: translate3d(0, -16px, 0) scale(1); transition: transform 300ms, visibility 0ms, z-index 0ms; } @media (max-width:600px){ .es_inputBox .inputBox:nth-child(n+1) { grid-column: span 8; } .es_inputBox .colspan3 { grid-column: span 4!important; } .es_inputBox .colspan2 { grid-column: span 4!important; } .es_inputBox .colspan1 { grid-column: span 4!important; } .es_inputBox .inputItem /* 입력항목*/ { color: #333; font-size: 12px; } .es_inputBox .inputItem::placeholder { color: #aaa!important;; font-size: 12px; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모바일 진용 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media (max-width:600px){ .es_mobile_w100 { display:block; width:100%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w85 { display:block; width:84%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w80 { display:block; width:79%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w75 { display:block; width:74%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w70 { display:block; width:69%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w67 { display:block; width:68%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w60 { display:block; width:57%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w50 { display:block; width:47%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w33 { display:block; width:30%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w40 { display:block; width:37%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w25 { display:block; width:22%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w20 { display:block; width:17%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w15 { display:block; width:13%!important; text-align:center; padding: 8px 20px!important; } .es_mobile_w10 { display:block; width:9%!important; text-align:center; padding: 8px 20px!important; } } .es_duocolor_orangered { opacity: 0.9; color: orangered;} .es_duocolor_darkcyan { opacity: 0.9; color: darkcyan;} .es_duocolor_tomato { opacity: 0.9; color: tomato;} .es_duocolor_fuchsia { opacity: 0.9; color: fuchsia;} .es_duocolor_deepskyblue { opacity: 0.9; color: deepskyblue; } .es_duocolor_darkgoldenrod { opacity: 0.9; color: darkgoldenrod; } .es_duocolor_yellow { opacity: 0.9; color: yellow;} /* .es_duocolor_darkcyan [opacity="0.2"] { opacity: 1; fill: darkcyan;} .es_duocolor_yellow [opacity="0.2"] { opacity: 1; fill: yellow;} .es_duocolor_tomato [opacity="0.2"] { opacity: 1; fill: tomato;} .es_duocolor_fuchsia [opacity="0.2"] { opacity: 1; fill: fuchsia;} .es_duocolor_deepskyblue [opacity="0.2"] { opacity: 1; fill: deepskyblue; }*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 기본값 성격 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_base_text { color: #354c98; } .es_base_color { color: #354c98; } .es_base_bgcolor { background-color: #354c98; color:#ffffff; } .es_base_border { border: 2px solid #111111;} .es_base_bg { background-color: #111111; } .helptext-gray { fonr-size: 10px; color:#999999; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 사이트전용 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* --------- 마카홈페이지전용 */ .es_bn_mc_red { background-color:#c83434; color: white; padding: 4px 10px; margin:2px; display: inline-block; border-radius:15px; text-align: center; min-width:50px;} .es_bn_mc_gray { background-color:gray; color: white; padding: 4px 10px; margin:2px; display: inline-block; border-radius:15px; border:1px solid #aaa; text-align: center; min-width:50px; cursor: pointer;} .es_bn_mc { background-color:#FFFFFF; color: #333333; padding: 4px 10px; margin:2px; display: inline-block; border-radius:15px; border:1px solid #aaa; text-align: center; min-width:50px; cursor: pointer;} .es_bn_mc_gray_sm { background-color:#bbb; color: white; padding: 4px; margin:0px; display: inline-block; border-radius:15px; border:1px solid #aaa; text-align: center; min-width:20px; cursor: pointer;} .es_bn_mc_red_sm { background-color:#f72b2b; color: white; padding: 4px; margin:0px 5px; display: inline-block; border-radius:15px; border:none; text-align: center; min-width:20px; cursor: pointer;} .es_bn_mc_red_rct_sm { background-color:#f72b2b; color: white; padding: 2px; margin:0px 5px; display: inline-block; border:none; text-align: center; min-width:20px; cursor: pointer;} .es_bn_mc_white_rct_sm { background-color:#FFFFFF; color: #333333; padding: 5px; margin:0px 5px; display: inline-block; border:1px solid #aaa; text-align: center; min-width:20px; cursor: pointer;} .es_bn_mc_sm { background-color:#FFFFFF; color: #333333; padding: 4px; margin:0px; display: inline-block; border-radius:15px; border:1px solid #aaa; text-align: center; min-width:20px; cursor: pointer;} .es_loandoc { background-color: #73d1f7; color: #111111; } .es_bn_scroll { padding: 5px 8px 5px 8px; } .es_bn_scroll > i { color: #333; font-size:14px; vertical-align: middle;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 홈카드목록 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_list_box { margin:1px; padding: 1px 4px; border-bottom: 1px solid #ccc; /*border-radius: 1.2rem;*/ color: #999; } .es_list_box:last-child { border: none; } .es_list_box > .head { font-size: 14px; font-weight: 600; min-width: 120px; padding: 4px 10px; float: left; text-align: left; } .es_list_box > .content { font-size: 12px; font-weight: 500; padding: 0px 10px; float: left; text-align: left; } .es_list_box > .tag { float: right; padding: 4px 10px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모양기타 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .no_border { border:none } .profile_img { border-radius:50%;overflow:hidden;border: none; display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle; } .bg_img { overflow:hidden;border: none; display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle; } .es_nowrap { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: inline-block;} .es_hidden { display: none; } .es_inline { display: inline-block; } .es_block { display: block; } .es_linethrough_dot_eee { text-decoration: line-through dotted #eee;} .es_linethrough { text-decoration: line-through;} .es_linethrough_ccc { text-decoration: line-through #cccccc;} .es_overline { text-decoration: overline;} .es_underbar { text-decoration: underline; text-underline-position:under; } .es_underline_blue { box-shadow: inset 0 -12px 0 #b0e0e6; } .es_underline_red { box-shadow: inset 0 -12px 0 #ff4000; } .es_underline_yellow { box-shadow: inset 0 -12px 0 yellow; } .es_underline_green { box-shadow: inset 0 -12px 0 #4c9a4c; } /*------------- 마커펜 형광펜 효과*/ .es_makerpen_sky_200 { width:200px; margin: auto; box-shadow: inset 0 -12px 0 rgba(18, 170, 166,0.1); } .es_makerpen_sky_250 { width:250px; margin: auto; box-shadow: inset 0 -12px 0 rgba(18, 170, 166,0.1); } .es_makerpen_sky_300 { width:300px; margin: auto; box-shadow: inset 0 -12px 0 rgba(18, 170, 166,0.1); } .es_makerpen_sky_350 { width:350px; margin: auto; box-shadow: inset 0 -12px 0 rgba(18, 170, 166,0.1); } .es_makerpen_orange_250 { width:250px; box-shadow: inset 0 -16px 0 rgba(255, 102, 0, 0.5); } .es_makerpen_orange_300 { width:300px; box-shadow: inset 0 -16px 0 rgba(255, 102, 0, 0.5); } .es_opacity { opacity:0.60} .es_opacity_off { opacity:1 } .es_opacity_max { opacity:0.25} .es_opacity_min { opacity:0.75} .es_move_top { position:relative; top: -26px; background-color:white; padding:4px 20px;} .es_bold { font-weight:bold!important;} .es_normal { font-weight:normal!important;} .es_center { text-align: center!important;} .es_left { text-align: left!important; } .es_right { text-align: right!important; } .es_top { vertical-align:top!important;} .es_middle { vertical-align:middle!important;} .es_bottom { vertical-align:bottom!important;} .es_float_center { display: grid; place-items: center; } .es_float_left { float:left!important} .es_float_right { float:right!important} .es_hide { display:none!important} .es_unshow { visibility: hidden!important} .es_block { display:block!important} .es_screen_center { display: flex; justify-content: center; align-items: center; } /* 화면의 중앙배치*/ .es_screen_title { font-family: "Pretendard Bold"!important; font-size:16px; line-height: 1.8em;} /* 화면마다 제목타이틀 */ /*--- 그리드목록속에 얼굴사진*/ .es_face_grid { min-width: 90px; height: 30px; display: grid; grid-template-columns: 30% 70%; grid-auto-rows: 1rem; padding: 0px; background-color: #eee; color: #111; border-radius: 16px; line-height: 1rem; } .es_face_grid img { width: 30px; height: 30px; border-radius: 16px; transition: transform 300ms; position: relative; left: 0px; top: 0px; float: left; } .es_face_grid label { position: relative; top: 10px; } .es_cell-row { display:table;width:100%} .es_cell { display:table-cell} .es_disable { cursor: not-allowed!important; } .es_date { text-align: center; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 항목라벨 LABEL */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_label { padding:6px 6px 0px 6px; text-align: right; font-weight: 400; color:#888; } .es_label.required:after { content:" *"; font-size:16px; color:#ff0000; } .es_label_title { font-family: "Noto Sans KR"; font-weight: 600; font-size:14px; color:#333; } .es_label_width { display:inline-block;padding: 2px 10px; text-align: left; font-weight: bold; color:#333; min-width:100px;} .es_label_thin { padding:4px 8px 2px 8px; text-align: right; font-weight: 400; color:#666; } @media (max-width:600px){ .es_label { text-align: left; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 페이지제목스타일 Title */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .page_subtitle_lg { font-family: "Noto Sans Bold"; font-size:60px!important; line-height:25px; position: relative; top:20px; color: black;} .page_subtitle_md { font-family: "Noto Sans Bold"; font-size:40px!important; line-height:35px; position: relative; top:20px; color: black;} .page_subtitle_sm { font-family: "Noto Sans Bold"; font-size:30px!important; line-height:35px; position: relative; top:10px; color: black;} .page_subtitle_desc { font-family: "Noto Sans Bold"; font-size:24px!important; line-height:18px; position: relative; top:10px; color: black;} .page_subheader_title { font-family: "Noto Sans Bold"; font-size:40px; line-height:12px; position: relative; top:0px; color:black; letter-spacing: -2px;} .page_subheader_title_md { font-family: "Noto Sans Bold"; font-size:30px; line-height:12px; position: relative; top:0px; color:black; letter-spacing: -2px;} .page_subheader_desc { font-family: "Noto Sans KR"; font-size:14px; line-height:12px; position: relative; top:-10px; color:black;} .es-title { font-weight: bold; font-size:20px; font-family: "Noto Sans Bold"; color:#05C0EF; } .es-subtitle { font-weight: bold; font-size:16px; font-family: "Noto Sans Bold"; } .es-content { font-family: "Noto Sans Regular"; } /* ------------------------- */ .es_head12 { margin:10px 2px; padding: 5px 6px; display: inline-block; background-color: transparent; box-sizing: border-box; border: none; color: #111; font-weight:bold; font-size:12px;} .es_head14 { margin:10px 2px; padding: 5px 6px; display: inline-block; background-color: transparent; box-sizing: border-box; border: none; color: #111; font-weight:bold; font-size:14px;} .es_head16 { margin:10px 2px; padding: 5px 6px; display: inline-block; background-color: transparent; box-sizing: border-box; border: none; color: #111; font-weight:bold; font-size:16px;} .es_head { border:0px solid #ccc; background-color: #354c98; color: white; padding:8px 10px; border-radius:0px; margin: 0px 0px; text-align: center;} .es_head_update { border:1px solid #ccc; background-color: #15a846; color: white; padding:8px 10px; border-radius:4px; margin: 1px 0px; text-align: center;} .es_head_insert { border:1px solid #ccc; background-color: #9966ff; color: white; padding:8px 10px; border-radius:4px; margin: 1px 0px; text-align: center;} .es_erp_footer { min-height: 130px; background-color: #cccccc; color: #111111;} /* ERP화면바닥글스타일 */ .es_head_content { padding: 22px 3px; border-bottom: 1px solid #dddddd; } /* 콘텐츠의 내용 제목부분 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 글씨색상지정 Text Color */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_111 { color:#111!important;} .es_222 {color:#222!important;} .es_333 {color:#333!important;} .es_444 {color:#444!important;} .es_555 {color:#555!important;} .es_666 { color:#666!important;} .es_777 {color:#777!important;} .es_888 {color:#888!important;} .es_999 {color:#999!important;} .es_aaa { color:#aaa!important;} .es_bbb {color:#bbb!important;} .es_ccc {color:#ccc!important;} .es_ddd {color:#ddd!important;} .es_eee { color:#eee!important;} .es_fff {color:#fff!important;} .es_text_white { color: #ffffff!important; } .es_text_blue { color: #354c98!important; } .es_text_sky { color: #3a86ff!important; } .es_text_yellow { color: #e6d200!important; } .es_text_yellow_light { color: #edbd0c!important; } .es_text_violet { color: #9933ff!important; } .es_text_purple { color: #5f0080!important; } .es_text_violet { color: #483698!important; } .es_text_black { color: #111111!important; } .es_text_gray { color: #999999!important; } .es_text_gray_dark { color: #777777!important; } .es_text_gray_aaa { color: #aaa!important; } .es_text_gray_ccc { color: #ccc!important; } .es_text_gray_ddd { color: #ddd!important; } .es_text_gray_eee { color: #eee!important; } .es_text_gray_light { color: #eeeeee!important; } .es_text_red { color: #e62e00!important; } .es_text_green { color: #4c9a4c!important; } .es_text_green_dark { color: #107B34!important; } .es_text_mint { color: #1abc9c!important; } .es_text_pink { color: #F20780!important; } .es_text_brown { color: #74583e!important; } .es_text_orange { color: #ff944d!important; /* #ffb31a;*/ } .es_text_underline { text-decoration:underline } .es_text_overline { text-decoration:overline } .es_text_linethrough { text-decoration:line-through } /*----도움말 팁---*/ .es_tip { margin-left: 0px; line-height:1.8em; font-size: 11px!important; color:#aaa; font-family: "맑은 고딕"!important;} /*.es_tip:before { content:" "; font-size:12px; color:#ff0000;}*/ /*.es_text_help { font-size: 11px!important; font-weight: 500; color:#999; font-family: "Malgun Gothic", "맑은 고딕"!important; position: relative; top: -2px;}*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 글씨색상지정 Text Color */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_ellipsis_30 { max-width:30px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_40 { max-width:40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_50 { max-width:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_60 { max-width:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_70 { width:70px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_80 { width:80px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_90 { width:90px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_100 { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_110 { width:110px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_120 { width:120px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_130 { width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_140 { width:140px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_150 { width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_180 { width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_200 { width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_210 { width:210px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_220 { width:220px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_230 { max-width:230px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: block;} .es_ellipsis_240 { max-width:240px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 배경 유리효과 https://css.glass */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_glassmorphism { background: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); /*border: 1px solid rgba(255, 255, 255, 0.05);*/ } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 배경색지정 Background Color */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_bg111 {background-color:#111;} .es_bg222 {background-color:#222;} .es_bg333 {background-color:#333;} .es_bg444 {background-color:#444;} .es_bg555 {background-color:#111;} .es_bg666 {background-color:#666;} .es_bg777 {background-color:#777;} .es_bg888 {background-color:#888;} .es_bg999 {background-color:#999;} .es_bgaaa {background-color:#aaa;} .es_bgbbb {background-color:#bbb;} .es_bgccc {background-color:#ccc;} .es_bgddd {background-color:#ddd;} .es_bgeee {background-color:#eee;} .es_bgfff {background-color:#fff;} .es_bg_white, .es_bg_ffffff { background-color: #ffffff; } .es_bg_gray { background-color: gray; } .es_bg_eeeeee { background-color: #eeeeee; } .es_bg_gray_f0efee { background-color: #f0efee; } .es_bg_f0f0f0 { background-color: #f0f0f0; } .es_bg_f3f3f3 { background-color: #f3f3f3; } .es_bg_f6f6f6 { background-color: #f6f6f6; } .es_bg_f9f9f9 { background-color: #f9f9f9; } .es_bg_fafafa { background-color: #fafafa; } .es_bg_ffffcc { background-color: #ffffcc; } /* 옅은노랑 */ .es_bg_fcfce8 { background-color: #fcfce8; } /* 옅은노랑 */ .es_bg_fcfcfc { background-color: #fcfcfc; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 가로폭지정 WIDTH */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_e100 { max-width: 100px!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .es_e150 { max-width: 150px!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .es_e200 { max-width: 200px!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .es_e250 { max-width: 250px!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .es_e300 { max-width: 300px!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .es_e350 { max-width: 350px!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /*-------------- 길이고정 */ .es_w10 { width: 10px!important;} .es_w11 { width: 11px!important;} .es_w12 { width: 12px!important;} .es_w13 { width: 13px!important;} .es_w14 { width: 14px!important;} .es_w20 { width: 20px!important;} .es_w30 { width: 30px!important;} .es_w40 { width: 40px!important;} .es_w50 { width: 50px!important;} .es_w60 { width: 60px!important;} .es_w70 { width: 70px!important;} .es_w80 { width: 80px!important;} .es_w90 { width: 90px!important;} .es_w100 { width: 100px!important;} .es_w120 { width: 120px!important;} .es_w130 { width: 130px!important;} .es_w140 { width: 140px!important;} .es_w150 { width: 150px!important;} .es_w200 { width: 200px!important;} .es_w300 { width: 300px!important;} .es_w400 { width: 400px!important;} .es_w500 { width: 500px!important;} .es_w30_min { min-width: 30px!important;} .es_w40_min { min-width: 40px!important;} .es_w50_min { min-width: 50px!important;} .es_w60_min { min-width: 60px!important;} .es_w70_min { min-width: 70px!important;} .es_w80_min { min-width: 80px!important;} .es_w90_min { min-width: 90px!important;} .es_w100_min { min-width: 100px!important;} .es_w110_min { min-width: 110px!important;} .es_w120_min { min-width: 120px!important;} .es_w130_min { min-width: 130px!important;} .es_w140_min { min-width: 140px!important;} .es_w150_min { min-width: 150px!important;} .es_w160_min { min-width: 160px!important;} .es_w170_min { min-width: 170px!important;} .es_w180_min { min-width: 180px!important;} .es_w200_min { min-width: 200px!important;} .es_w220_min { min-width: 220px!important;} .es_w230_min { min-width: 230px!important;} .es_w240_min { min-width: 240px!important;} .es_w250_min { min-width: 250px!important;} .es_w260_min { min-width: 260px!important;} .es_w270_min { min-width: 270px!important;} .es_w300_min { min-width: 300px!important;} .es_w350_min { min-width: 350px!important;} .es_w400_min { min-width: 400px!important;} .es_w500_min { min-width: 500px!important;} .es_w600_min { min-width: 600px!important;} /*-------------- 길이비율 */ .es_w10r { width: 9.9%!important; } .es_w20r { width: 19.99%!important; } .es_w25r { width: 24.9%!important;} .es_w30r { width: 29.98%!important;} .es_w33r { width: 32.8%!important;} .es_w40r { width: 39.98%!important;} .es_w50r { width: 49%!important;} .es_w60r { width: 59.8%!important;} .es_w70r { width: 69.8%!important;} .es_w100r { width: 99.9%!important;} @media (max-width:600px){ .es_w10rm { width: 9.9%!important; } .es_w20rm { width: 19.99%!important; } .es_w25rm { width: 24.9%!important;} .es_w30rm { width: 29.98%!important;} .es_w33rm { width: 32.9%!important;} .es_w40rm { width: 39.98%!important;} .es_w50rm { width: 49%!important;} .es_w100rm { width: 99.9%!important;} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 높이지정 HEIGHT */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_h_30 { height: 30px;} .es_h_40 { height: 40px;} .es_h_50 { height: 50px;} .es_h_60 { height: 60px;} .es_h_70 { height: 70px;} .es_h_80 { height: 80px;} .es_h_90 { height: 90px;} .es_h_100 { height: 100px;} .es_h_105 { height: 105px;} .es_h_110 { height: 110px;} .es_h_115 { height: 115px;} .es_h_120 { height: 120px;} .es_h_125 { height: 125px;} .es_h_130 { height: 130px;} .es_h_140 { height: 140px;} .es_h_145 { height: 145px;} .es_h_150 { height: 150px;} .es_h_160 { height: 160px;} .es_h_170 { height: 170px;} .es_h_172 { height: 172px;} .es_h_173 { height: 173px;} .es_h_180 { height: 180px;} .es_h_190 { height: 190px;} .es_h_200 { height: 200px;} .es_h_250 { height: 250px;} .es_h_300 { height: 300px;} .es_h_350 { height: 350px;} .es_h_400 { height: 400px;} .es_h_450 { height: 450px;} .es_h_500 { height: 500px;} .es_height_30 { min-height: 30px;} .es_height_40 { min-height: 40px;} .es_height_50 { min-height: 50px;} .es_height_60 { min-height: 60px;} .es_height_70 { min-height: 70px;} .es_height_80 { min-height: 80px;} .es_height_90 { min-height: 90px;} .es_height_100 { min-height: 100px;} .es_height_110 { min-height: 110px;} .es_height_120 { min-height: 120px;} .es_height_130 { min-height: 130px;} .es_height_140 { min-height: 140px;} .es_height_150 { min-height: 150px;} .es_height_160 { min-height: 160px;} .es_height_170 { min-height: 170px;} .es_height_180 { min-height: 180px;} .es_height_190 { min-height: 190px;} .es_height_200 { min-height: 200px;} .es_height_250 { min-height: 250px;} .es_height_300 { min-height: 300px;} .es_height_350 { min-height: 350px;} .es_height_400 { min-height: 400px;} .es_height_450 { min-height: 450px;} .es_height_500 { min-height: 500px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 폰트크기 Font Size */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_size_102 { font-size:102px;} .es_size_100 { font-size:100px;} .es_size_98 { font-size:98px;} .es_size_96 { font-size:96px;} .es_size_94 { font-size:94px;} .es_size_92 { font-size:92px;} .es_size_90 { font-size:90px;} .es_size_88 { font-size:88px;} .es_size_86 { font-size:86px;} .es_size_84 { font-size:84px;} .es_size_82 { font-size:82px;} .es_size_80 { font-size:80px;} .es_size_78 { font-size:78px;} .es_size_76 { font-size:76px;} .es_size_74 { font-size:74px;} .es_size_72 { font-size:72px;} .es_size_70 { font-size:70px;} .es_size_68 { font-size:68px;} .es_size_66 { font-size:66px;} .es_size_64 { font-size:64px;} .es_size_62 { font-size:62px;} .es_size_60 { font-size:60px;} .es_size_58 { font-size:58px;} .es_size_56 { font-size:56px;} .es_size_54 { font-size:54px;} .es_size_52 { font-size:52px;} .es_size_50 { font-size:50px;} .es_size_48 { font-size:48px;} .es_size_46 { font-size:46px;} .es_size_44 { font-size:44px;} .es_size_42 { font-size:42px;} .es_size_40 { font-size:40px;} .es_size_38 { font-size:38px;} .es_size_36 { font-size:36px;} .es_size_34 { font-size:34px;} .es_size_32 { font-size:32px;} .es_size_30 { font-size:30px;} .es_size_28 { font-size:28px;} .es_size_26 { font-size:26px;} .es_size_24 { font-size:24px;} .es_size_22 { font-size:22px;} .es_size_20 { font-size:20px;} .es_size_18 { font-size:18px;} .es_size_17 { font-size:17px;} .es_size_16 { font-size:16px;} .es_size_15 { font-size:15px;} .es_size_14 { font-size:14px!important;} .es_size_13 { font-size:13px!important;} .es_size_12 { font-size:12px!important;} .es_size_11 { font-size:11px!important;} .es_size_10 { font-size:10px!important;} .es_size_9 { font-size:9px!important;} .es_size_8 { font-size:8px!important;} .es_size_7 { font-size:7px!important;} .es_size_6 { font-size:6px!important;} .es_size_5 { font-size:5px!important;} .es_size_9_red { font-size:9px; color: red;} .es_size_10_red { font-size:9px; color: red;} .es_size_11_red { font-size:9px; color: red;} .es_size_102b { font-weight: bold; font-size:102px;} .es_size_100b { font-weight: bold; font-size:100px;} .es_size_98b { font-weight: bold; font-size:98px;} .es_size_96b { font-weight: bold; font-size:96px;} .es_size_94b { font-weight: bold; font-size:94px;} .es_size_92b { font-weight: bold; font-size:92px;} .es_size_90b { font-weight: bold; font-size:90px;} .es_size_88b { font-weight: bold; font-size:88px;} .es_size_86b { font-weight: bold; font-size:86px;} .es_size_84b { font-weight: bold; font-size:84px;} .es_size_82b { font-weight: bold; font-size:82px;} .es_size_80b { font-weight: bold; font-size:80px;} .es_size_78b { font-weight: bold; font-size:78px;} .es_size_76b { font-weight: bold; font-size:76px;} .es_size_74b { font-weight: bold; font-size:74px;} .es_size_72b { font-weight: bold; font-size:72px;} .es_size_70b { font-weight: bold; font-size:70px;} .es_size_68b { font-weight: bold; font-size:68px;} .es_size_66b { font-weight: bold; font-size:66px;} .es_size_64b { font-weight: bold; font-size:64px;} .es_size_62b { font-weight: bold; font-size:62px;} .es_size_60b { font-weight: bold; font-size:60px;} .es_size_58b { font-weight: bold; font-size:58px;} .es_size_56b { font-weight: bold; font-size:56px;} .es_size_54b { font-weight: bold; font-size:54px;} .es_size_52b { font-weight: bold; font-size:52px;} .es_size_50b { font-weight: bold; font-size:50px;} .es_size_48b { font-weight: bold; font-size:48px;} .es_size_46b { font-weight: bold; font-size:46px;} .es_size_44b { font-weight: bold; font-size:44px;} .es_size_42b { font-weight: bold; font-size:42px;} .es_size_40b { font-weight: bold; font-size:40px;} .es_size_38b { font-weight: bold; font-size:38px;} .es_size_36b { font-weight: bold; font-size:36px;} .es_size_34b { font-weight: bold; font-size:34px;} .es_size_32b { font-weight: bold; font-size:32px;} .es_size_30b { font-weight: bold; font-size:30px;} .es_size_28b { font-weight: bold; font-size:28px;} .es_size_26b { font-weight: bold; font-size:26px;} .es_size_24b { font-weight: bold; font-size:24px;} .es_size_22b { font-weight: bold; font-size:22px;} .es_size_20b { font-weight: bold; font-size:20px;} .es_size_20b_red { font-weight: bold; font-size:20px; color: red;} .es_size_18b { font-weight: bold; font-size:18px;} .es_size_18b_red { font-weight: bold; font-size:18px; color: red;} .es_size_17b { font-weight: bold; font-size:17px;} .es_size_17b_red { font-weight: bold; font-size:17px; color: red;} .es_size_16b { font-weight: bold; font-size:16px;} .es_size_16b_red { font-weight: bold; font-size:16px; color: red;} .es_size_15b { font-weight: bold; font-size:15px;} .es_size_15b_red { font-weight: bold; font-size:15px; color: red;} .es_size_14b { font-weight: bold; font-size:14px!important;} .es_size_14b_red { font-weight: bold; font-size:14px; color: red;} .es_size_13b { font-weight: bold; font-size:13px!important;} .es_size_13b_red { font-weight: bold; font-size:13px; color: red;} .es_size_13b_blue { font-weight: bold; font-size:13px; color: #0b00b1;} .es_size_12b { font-weight: bold; font-size:12px!important;} .es_size_12b_red { font-weight: bold; font-size:12px; color: red; } .es_size_12b_blue { font-weight: bold; font-size:12px; color: #0b00b1; } .es_size_12b_green { font-weight: bold; font-size:12px; color: green;} .es_size_11b { font-weight: bold; font-size:11px;} .es_size_11b_red { font-weight: bold; font-size:11px; color: red;} .es_size_11b_blue { font-weight: bold; font-size:11px; color: #0b00b1; } .es_size_11b_green { font-weight: bold; font-size:11px; color: lightseagreen;} .es_size_10b { font-weight: bold; font-size:10px;} .es_size_10b_red { font-weight: bold; font-size:10px; color: red;} .es_size_9b { font-weight: bold; font-size:9px;} .es_size_9b_red { font-weight: bold; font-size:9px; color: red;} .es_size_8b { font-weight: bold; font-size:8px;} .es_size_8b_red { font-weight: bold; font-size:8px; color: red;} .es_size_7b { font-weight: bold; font-size:7px;} .es_size_7b_red { font-weight: bold; font-size:7px; color: red;} /* --------------------폰트크기 상대크기 */ .es_font_rem_08 { font-size:0.8rem;} .es_font_rem_10 { font-size:1.0rem;} .es_font_rem_12 { font-size:1.2rem;} .es_font_rem_12_5 { font-size:1.25rem;} .es_font_rem_13 { font-size:1.3rem;} .es_font_rem_14 { font-size:1.4rem;} .es_font_rem_15 { font-size:1.5rem;} .es_font_rem_16 { font-size:1.6rem;} .es_font_rem_18 { font-size:1.8rem;} .es_font_rem_20 { font-size:2.0rem;} .es_font_em_08 { font-size:0.8em;} .es_font_em_10 { font-size:1.0em;} .es_font_em_12 { font-size:1.2em;} .es_font_em_12_5 { font-size:1.25em;} .es_font_em_13 { font-size:1.3em;} .es_font_em_14 { font-size:1.4em;} .es_font_em_15 { font-size:1.5em;} .es_font_em_16 { font-size:1.6em;} .es_font_em_18 { font-size:1.8em;} .es_font_em_20 { font-size:2.0em;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 줄간격 LineHeight */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_text_lineheight_10 { line-height:10px!important; } .es_text_lineheight_11 { line-height:11px!important; } .es_text_lineheight_12 { line-height:12px!important; } .es_text_lineheight_14 { line-height:14px!important; } .es_text_lineheight_16 { line-height:16px!important; } .es_text_lineheight_18 { line-height:18px!important; } .es_text_lineheight_20 { line-height:20px!important; } .es_text_lineheight_22 { line-height:22px!important; } .es_text_lineheight_24 { line-height:24px!important; } .es_text_lineheight_26 { line-height:26px!important; } .es_text_lineheight_28 { line-height:28px!important; } .es_text_lineheight_30 { line-height:30px!important; } .es_text_lineheight_32 { line-height:32px!important; } .es_text_lineheight_34 { line-height:34px!important; } .es_text_lineheight_36 { line-height:36px!important; } .es_text_lineheight_38 { line-height:38px!important; } .es_text_lineheight_40 { line-height:40px!important; } .es_text_lineheight_42 { line-height:42px!important; } .es_text_lineheight_44 { line-height:44px!important; } .es_text_lineheight_46 { line-height:46px!important; } .es_text_lineheight_48 { line-height:48px!important; } .es_text_lineheight_50 { line-height:50px!important; } .es_text_lineheight_52 { line-height:52px!important; } .es_text_lineheight_54 { line-height:54px!important; } .es_text_lineheight_56 { line-height:56px!important; } .es_text_lineheight_58 { line-height:58px!important; } .es_text_lineheight_60 { line-height:60px!important; } .es_text_lineheight_62 { line-height:62px!important; } .es_text_lineheight_64 { line-height:64px!important; } .es_text_lineheight_66 { line-height:66px!important; } .es_text_lineheight_68 { line-height:68px!important; } .es_text_lineheight_70 { line-height:70px!important; } .es_text_lineheight_72 { line-height:72px!important; } .es_text_lineheight_74 { line-height:74px!important; } .es_text_lineheight_78 { line-height:78px!important; } .es_text_lineheight_80 { line-height:80px!important; } .es_text_lineheight_82 { line-height:82px!important; } .es_text_lineheight_84 { line-height:84px!important; } .es_rem_lineheight_12 { line-height:1.2rem !important; } .es_rem_lineheight_15 { line-height:1.5rem !important; } .es_rem_lineheight_17 { line-height:1.7rem !important; } .es_rem_lineheight_19 { line-height:1.9rem !important; } .es_rem_lineheight_20 { line-height:2.0rem !important; } .es_rem_lineheight_22 { line-height:2.2rem !important; } .es_rem_lineheight_24 { line-height:2.4rem !important; } .es_rem_lineheight_26 { line-height:2.6rem !important; } .es_rem_lineheight_28 { line-height:2.8rem !important; } .es_em_lineheight_12 { line-height:1.2em !important; } .es_em_lineheight_15 { line-height:1.5em !important; } .es_em_lineheight_17 { line-height:1.7em !important; } .es_em_lineheight_19 { line-height:1.9em !important; } .es_em_lineheight_20 { line-height:2.0em !important; } .es_em_lineheight_22 { line-height:2.2em !important; } .es_em_lineheight_24 { line-height:2.4em !important; } .es_em_lineheight_26 { line-height:2.6em !important; } .es_em_lineheight_28 { line-height:2.8em !important; } .es_em_lineheight_32 { line-height:3.2em !important; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 자간 Letter-Spacing */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_letter_spacing_m2 { letter-spacing: -2px!important; } .es_letter_spacing_m4 { letter-spacing: -4px!important; } .es_letter_spacing_m6 { letter-spacing: -6px!important; } .es_letter_spacing_m8 { letter-spacing: -8px!important; } .es_letter_spacing_m10 { letter-spacing: -10px!important;} .es_letter_spacing_m12 { letter-spacing: -12px!important; } .es_letter_spacing_p0 { letter-spacing: 0px!important; } .es_letter_spacing_p1 { letter-spacing: 1px!important; } .es_letter_spacing_p2 { letter-spacing: 2px!important; } .es_letter_spacing_p4 { letter-spacing: 4px!important; } .es_letter_spacing_p6 { letter-spacing: 6px!important; } .es_letter_spacing_p8 { letter-spacing: 8px!important; } .es_letter_spacing_p10 { letter-spacing: 10px!important; } .es_letter_spacing_p12 { letter-spacing: 12px!important; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 알림창 아이콘 ALERT */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_check_ok { content:url("/resources/images/img_checkok.png"); border: none; border-radius: 50%; width:90px; height:80px; margin: 10px;} .es_check_happy { content:url("/resources/images/img_firework.png"); padding:20px; margin: 10px;} /*.es_check_sorry { content:url("/resources/images/img_sorry.png"); border: none; border-radius: 5px; width:90px; height:80px; margin: 10px; }*/ .es_check_sorry { content:url("/resources/images/img_iamsorry.jpg"); border: none; border-radius: 15px; width:200px; margin: 10px; } .es_check_error { content:url("/resources/images/img_check_error.png"); border: none; border-radius: 50%; width:90px; height:80px; margin: 10px;} .es_alert_title { font-size:14px; color:#333; font-family: "Pretendard Bold"!important; line-height: 1.3em; } .es_alert_desc { font-size:11px; color:#666; font-weight: 500; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 문단노출방식 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_word_break { white-space:pre-wrap; work-break:break-all;} .es_prewrap { white-space:pre-wrap; work-break:normal; } .es_div_center { display: flex; justify-content: center; align-items: center; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 수량수치표시, 예) 장바구니수 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_cart_cnt {position: relative; left: 31px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background-color: #FF0000; font-size: 9px; color: #fff; line-height: 15px; text-align: center; white-space: nowrap;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 별표추가 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_essential:after { content:" * 필수입력"; font-size:10px; color:#ff0000; font-family: "맑은 고딕"!important; } .es_danggu_before:before { content:" ※ "; font-size:14px; color:#ff0000; } .es_danggu_after:after { content:" ※ "; font-size:14px; color:#ff0000; } .es_asterisk_before:before { content:" * "; font-size:14px; color:#ff0000; } .es_asterisk_after:after { content:" * "; font-size:14px; color:#ff0000; } .es_star_before:before { content:" ★ "; font-size:14px; color:#ff0000; } .es_star_after:after { content:" ★ "; font-size:14px; color:#ff0000; } .es_aste_after:after { content:" *"; font-size:20px!important; color:orangered; font-weight: 800; position: relative; top:6px; } .es_aste_before:before { content:"* "; font-size:20px!important; color:orangered; font-weight: 800; position: relative; top:6px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 미니박스 및 버튼 BUTTON */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_box_red { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(230, 46, 0, 1.0)!important; background-color: rgba(255, 214, 204, 0.5)!important; border-radius: 10px; } /* #FFE2CA */ .es_box_blue { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(0, 82, 204, 1.0)!important; background-color: rgba(204, 224, 255, 0.5)!important; border-radius: 10px; } /* #80c6ff */ .es_box_green { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(0, 102, 34, 1.0)!important; background-color: rgba(204, 255, 220, 0.8)!important; border-radius: 10px; } /* #C4EBCD */ .es_box_sky { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(0, 153, 204, 1.0)!important; background-color: rgba(204, 242, 255, 0.8)!important; border-radius: 10px; } .es_box_pink { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(255, 0, 147, 1.0)!important; background-color: rgba(255, 204, 242, 0.8)!important; border-radius: 10px; } .es_box_yellow { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(204, 163, 0, 1.0)!important; background-color: rgba(255, 250, 230, 0.9)!important; border-radius: 10px; } .es_box_orange { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(230, 92, 0, 1.0)!important; background-color: rgba(255, 224, 204, 0.9)!important; border-radius: 10px; } .es_box_purple { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(92, 0, 179, 1.0)!important; background-color: rgba(230, 204, 255, 0.9)!important; border-radius: 10px; } .es_box_gray { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:400; color: rgba(10, 10, 10, 1.0)!important; background-color: rgba(240, 240, 240, 0.6)!important; border-radius: 10px; } .es_box_black { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(255, 255, 255, 1.0)!important; background-color: rgba(10, 10, 10, 0.9)!important; border-radius: 10px; } .es_box_white { display: inline-block; margin: 2px; padding: 3px 8px 3px; font-weight:500; color: rgba(10, 10, 10, 1.0)!important; background-color: rgba(253, 253, 253, 1)!important; border-radius: 10px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 아이콘 BUTTON */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_icon { margin:0; padding: 3px 6px; border-radius: 4px; background-color:transparent; border: 0px solid #ccc; color: #444!important; text-align: center; font-weight:500; display: inline-block; } .es_icon > i { color: #111; font-size: 18px!important; vertical-align: middle;} .es_icon:hover { color: #111; border: none} .es_icon_clear { font-size:10px; color: #aaa; float: right; position: relative; right: 2px; top: -20px; } /*입력값청소용 아이콘*/ .es_colorbox_gray { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: gray; } .es_colorbox_blue { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: #336699; } .es_colorbox_green { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: #00b300; } .es_colorbox_red { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: red; } .es_colorbox_brown { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: brown; } .es_colorbox_yellow { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: yellow; } .es_colorbox_pink { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: pink; } .es_colorbox_purple { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: purple; } .es_colorbox_mint { display: inline-block; margin: 3px; padding: 4px 14px; color: white; border: solid 0px #fff; text-decoration: none; background-color: #00bfff; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 박스 그림자 box-shadow: 1px 4px 25px -4px rgba(150, 150, 150, 0.33); */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_shadow { box-shadow: 2px 2px 4px 2px #eee; } .es_shadow_0_10 { box-shadow: 2px 2px 4px 2px #eee; padding: 0 10px!important; } .es_shadow_0_20 { box-shadow: 2px 2px 4px 2px #eee; padding: 0 20px!important;} .es_shadow_10 { box-shadow: 2px 2px 4px 2px #eee; padding: 10px!important;} .es_shadow_5 { box-shadow: 2px 2px 4px 2px #eee; padding: 5px!important;} .es_shadow_10_0 { box-shadow: 2px 2px 4px 2px #eee; padding: 10px 0px!important;} .es_shadow_10_20 { box-shadow: 2px 2px 4px 2px #eee; padding: 10px 20px!important;} .es_shadow_20 { box-shadow: 2px 2px 4px 2px #eee; padding: 20px!important;} .es_shadow_20_10 { box-shadow: 2px 2px 4px 2px #eee; padding: 20px 10px!important;} .es_shadow_30 { box-shadow: 2px 2px 4px 2px #eee; padding: 30px!important;} .es_shadow_30_10 { box-shadow: 2px 2px 4px 2px #eee; padding: 30px 10px!important;} .es_shadow_40 { box-shadow: 2px 2px 4px 2px #eee; padding: 40px!important;} .es_shadow_40_10 { box-shadow: 2px 2px 4px 2px #eee; padding: 40px 10px!important;} .es_shadow_40_20 { box-shadow: 2px 2px 4px 2px #eee; padding: 40px 20px!important;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 더보기펼치기 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_more { clear: both; margin:5px 2px; padding: 10px 20px; border-radius: 20px; background-color: #f0f0f0; color: #222; border: none; outline: none; text-align: center; font-size:12px; font-weight: 400; display: inline-block; width:200px;} .es_more > i { margin-left: 10px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* mini버튼 BUTTON */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_wire_rds_gray { margin:2px 1px; padding: 6px 14px 6px 14px; border-radius: 1.4em; background-color: #666; color: white; border: none; text-align: center; font-weight:600; font-family:"맑은 고딕"; display: inline-block; } .es_wire_rds_gray > i { color: white; font-size:15px; vertical-align: middle; margin-left:2px;} .es_wire_rds_gray:hover { border: none; background-color: #333; color: white; } .es_wire_rds_gray:hover > i { color: white; font-size:15px; vertical-align: middle;} .es_wire { margin: 1px; padding: 3px 8px 2px 8px; border-radius: 0.4em;; background-color: transparent; color: #333; border: 1px solid #ccc; text-align: center; display: inline-block; } .es_wire > i { color: #555; font-size:12px; vertical-align: middle;} .es_wire_sm { margin: 1px; padding: 1px 6px 1px 6px; border-radius: 0.4em;; background-color: transparent; color: #333; border: 1px solid #ccc; text-align: center; display: inline-block; } .es_wire_sm > i { color: #555; font-size:11px; vertical-align: middle;} .es_wire_sm_gray { display: inline-block; margin: 1px; padding: 2px 6px 2px 6px; font-size:12px; background-color: transparent; color:#666; border-radius:3px; border:1px solid #cccccc; } .es_wire_sm_green { display: inline-block; margin: 1px; padding: 2px 6px 2px 6px; font-size:12px; background-color: transparent; color:#666; border-radius:3px; border:1px solid #4c9a4c; } .es_wire_sm_blue { display: inline-block; margin: 1px; padding: 2px 6px 2px 6px; font-size:12px; background-color: transparent; color:#666; border-radius:3px; border:1px solid #354c98; } .es_min { margin:1px; padding: 2px 4px 4px; border-radius: 15px; background-color: #3a86ff; color: white; border: none; text-align: center; font-weight:900; display: inline-block; } .es_min > i { color: white; font-size:12px; vertical-align: middle;} .es_min:hover { background-color: #483698; color: white; } .es_min_green { margin:1px; padding: 3px 4px; border-radius: 50%; background-color: forestgreen; color: white; font-size: 7px; font-weight: 900; border: none; text-align: center; display: inline-block; } .es_min_green > i { color: black; font-size:14px; vertical-align: middle;} .es_min_act, .es_min_black { display: inline-block; margin: 1px; padding: 3px 8px 4px 8px; font-size:11px; background-color: #333; color:#FFF; border-radius:15px; border: none; text-align: center;} .es_min_gray { display: inline-block; margin: 1px; padding: 3px 8px 4px 8px; font-size:11px; background-color: #f0f0f0; color:#222; border-radius:12px; border: none; text-align: center;} .es_min_red { display: inline-block; margin: 1px; padding: 3px 8px 4px 8px; font-size:11px!important; background-color: orangered; color:#FFF; border-radius:12px; border: none; text-align: center; } .es_min_blue { display: inline-block; margin: 1px; padding: 3px 8px 4px 8px; font-size:11px!important; background-color: #2158e7; color:#FFF; border-radius:12px; border: none; text-align: center; } .es_min_pink { display: inline-block; margin: 1px; padding: 3px 8px 4px 8px; font-size:11px!important; background-color: rgba(255, 0, 147, 1.0); color:#FFF; border-radius:12px; border: none; text-align: center; } .es_min_white { display: inline-block; margin: 1px; padding: 3px 8px 2px 8px; font-size:11px; background-color: #FFF; color:#222; border-radius:8px; font-weight: 800!important; border: none; outline:none; text-align: center;} /*.es_min_act:after { font-family: "Font Awesome 5 Pro"; font-weight: 500; content: "\f00d";}*/ .es_min_new { display: inline-block; margin: 1px; padding: 1px 4px 2px 4px; font-size: 9px!important; background-color: red; color:#FFF!important; border-radius:4px; border: none; text-align: center; } .es_help_red { display: inline-block; margin: 1px; padding: 10px 14px; font-size:11px!important; background-color: orangered; color:#FFF; border-radius:15px; border: none; text-align: center; line-height: 1.2em;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 버튼 BUTTON */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_bn_popup_white { background-color:#fff; color: #111; border: none; border-radius: 15px; padding: 4px 20px;} .es_bn_popup_black { background-color:#111; color: #fff; border: none; border-radius: 15px; padding: 4px 20px;} /* -------- 화면우측상단메인버튼아래 서브버트 ---- */ .es_bnsub { background-color:#f0f0f0; color: #6c6860; padding: 0px 14px; margin:0px 5px 0px 5px; display: inline-block; border-radius:5px; border:1px solid #aaa; text-align: center;} .es_bnsub > i { font-size:12px; font-weight: 300;} /* -------- 특징적 액션버튼 */ .es_bnac { margin:2px; padding: 0.45em 0.8em; border-radius: 0.8em; display: inline-block; background-color:#14b379; border: none; color: #FFF; text-align: center; font-weight:500; font-size:12px;} .es_bnac:hover { background-color: #50af8c; } .es_bnsm { margin:1px; padding: 0.25em 0.5em; border-radius: 0.8em; display: inline-block; background-color: transparent; border: #eee; color: #999; text-align: center; font-weight:300; font-size:11px;} .es_bnsm:hover { background-color: #111; color: white; } .es_bnpop { margin:1px; padding: 0.25em 1em; border-radius: 0.8em; display: inline-block; background-color: transparent; border: #eee; color: #dddddd; text-align: center; font-weight:300; font-size:12px;} .es_bnpop:hover { background-color: #111; color: white; } /* ------------ 눈에 띄게 */ .es_bn_darkgray { margin: 2px 2px 2px 2px; display: inline-block; position: relative; background-color: #eeeeee; border: none; border-radius: 4em; font-size: 12px; font-weight:500; color: #111; padding: 4px 8px; cursor:pointer;user-select:none;text-align: center;text-decoration: none;} .es_bn_darkgray:hover { transition-duration: 0.1s; background-color: #f0f0f0;} .es_bn_purple { margin: 2px 2px 2px 2px; display: inline-block; position: relative; background-color: #483698; border: none; border-radius: 4em; font-size: 12px; font-weight:500; color: #FFF; padding: 0.8em 1.2em; cursor:pointer;user-select:none;text-align: center;text-decoration: none;cursor: pointer;transition-duration: 0.4s;-webkit-transition-duration: 0.4s; /* Safari */} .es_bn_purple:hover { transition-duration: 0.1s; background-color: #111;} .es_bn_purple:after { content: "";display: block;position: absolute;border-radius: 4em;left: 0;top:0;width: 100%;height: 100%; opacity: 0; transition: all 0.5s;box-shadow: 0 0 10px 40px #999; /*클릭후 애니메이션효과 */ } .es_bn_purple:active:after { box-shadow: 0 0 0 0 white;position: absolute;border-radius: 4em;left: 0;top:0;opacity: 1;transition: 0s;} .es_bn_purple:active { top: 4px; } .es_bn_red { margin: 2px 2px 2px 2px; display: inline-block; position: relative; background-color:red; border: none; border-radius: 4em; font-size: 12px; font-weight:500; color: #FFF; padding: 0.8em 1.2em; cursor:pointer;user-select:none;text-align: center;text-decoration: none;cursor: pointer;transition-duration: 0.4s;-webkit-transition-duration: 0.4s; /* Safari */} .es_bn_red:hover { transition-duration: 0.1s; background-color: #111;} .es_bn { background-color:#ffffff; color: #6c6860; padding: 12px 20px; margin:3px; display: inline-block; border-radius:8px; border:0px solid #aaa; text-align: center; line-height: 1.6em; } .es_bn > i { font-size:18px; font-weight: 500; color: #111;} .es_bn_bk { background-color:#333; color: #FFF; padding: 12px 20px; margin:3px; display: inline-block; border-radius:8px; border:0px solid #aaa; text-align: center; line-height: 1.6em; } .es_bn_bk > i { font-size:18px; font-weight: 500; color: #FFF;} .es_bn_gray { background-color:#f3f3f3; color: #111; padding: 6px 12px; margin:2px; display: inline-block; border-radius:20px; border:none; text-align: center;} .es_bn_rds_white { background-color:transparent; color: white; padding: 4px 18px; margin:3px; display: inline-block; border-radius:15px; border:1px solid #FFFFFF; text-align: center;} .es_bn_rds_black { background-color:transparent; color: #111; padding: 4px 18px; margin:3px; display: inline-block; border-radius:15px; border:1px solid #111; text-align: center;} .es_bn_rds_red { background-color:transparent; color: red; padding: 4px 18px; margin:3px; display: inline-block; border-radius:15px; border:1px solid red; text-align: center;} .es_bn_blue_fill { background-color:#423487; color: #FFFFFF; padding: 10px 20px; margin:3px; display: inline-block; border-radius:5px;border:1px solid #423487; text-align: center; font-family:"맑은 고딕"} .es_bn_blue_wire { background-color:transparent; color: #423487; padding: 10px 20px; margin:3px; display: inline-block; border-radius:5px;border:1px solid #423487; text-align: center; font-family:"맑은 고딕"} .es_bn_circle_gray { background-color: transparent; color: #333333; padding: 4px; margin:3px; display: inline-block; border-radius:50%; border:1px solid #aaa; text-align: center;} .es_bn_circle_black { background-color: transparent; color: #333333; padding: 4px; margin:3px; display: inline-block; border-radius:50%; border:1px solid #111; text-align: center;} .es_tag_xlg_red { display: inline-block; margin: 1px; padding: 12px 30px; font-size:12px; background-color: #cc3300; color:white; border-radius:3px;} .es_tag_xlg_green { display: inline-block; margin: 1px; padding: 12px 30px; font-size:12px; background-color: #4c9a4c; color:white; border-radius:3px;} .es_tag_xlg_blue { display: inline-block; margin: 1px; padding: 12px 30px; font-size:12px; background-color: #354c98; color:white; border-radius:3px;} .es_tag_xlg_yellow { display: inline-block; margin: 1px; padding: 12px 30px; font-size:12px; background-color: #F5C504; color:white; border-radius:3px;} .es_tag_lg_black { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #111111; color:white; border-radius:3px;} .es_tag_lg_red { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #cc3300; color:white; border-radius:3px;} .es_tag_lg_blue { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #354c98; color:white; border-radius:3px;} .es_tag_lg_gray_777 { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #777; color:white; border-radius:3px;} .es_tag_lg_gray { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #f9f9f9; color:#111111; border-radius:3px;} .es_tag_lg_green { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #4c9a4c; color:white; border-radius:3px;} .es_tag_lg_blue { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #354c98; color:white; border-radius:3px;} .es_tag_lg_yellow { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #F5C504; color:white; border-radius:3px;} .es_tag_lg_orange { display: inline-block; margin: 1px; padding: 6px 12px; font-size:12px; background-color: #E96729; color:white; border-radius:3px;} .es_tag_md_gray { display: inline-block; margin: 1px; padding: 1px 6px 2px 6px; font-size:12px; background-color: #f0f0f0; color:#111111; border-radius:3px;} .es_tag_md_green { display: inline-block; margin: 1px; padding: 1px 6px 2px 6px; font-size:12px; background-color: #4c9a4c; color:white; border-radius:3px;} .es_tag_md_blue { display: inline-block; margin: 1px; padding: 1px 6px 2px 6px; font-size:12px; background-color: #354c98; color:white; border-radius:3px;} .es_tag_md_orange { display: inline-block; margin: 1px; padding: 1px 6px 2px 6px; font-size:12px; background-color: #E96729; color:white; border-radius:3px;} .es_tag_md_black { display: inline-block; margin: 1px; padding: 1px 6px 2px 6px; font-size:12px; background-color: #111111; color:white; border-radius:3px;} .es_tag_sm_gray { display: inline-block; margin: 2px; padding: 1px 8px 2px 8px; font-size:10px; background-color: #f9f9f9; color:#111111; border-radius:3px;} .es_tag_sm_black { display: inline-block; margin: 2px; padding: 1px 8px 2px 8px; font-size:10px; background-color: #111111; color:white; border-radius:3px;} .es_tag_sm_red { display: inline-block; margin: 2px; padding: 1px 8px 2px 8px; font-size:10px; background-color: #cc3300; color:white; border-radius:3px;} .es_tag_sm_yellow { display: inline-block; margin: 2px; padding: 1px 8px 2px 8px; font-size:10px; background-color: #F5C504; color:white; border-radius:3px;} .es_tag_sm_green { display: inline-block; margin: 2px; padding: 1px 6px 2px 6px; font-size:10px; background-color: #4c9a4c; color:white; border-radius:3px;} .es_tag_sm_blue { display: inline-block; margin: 2px; padding: 1px 6px 2px 6px; font-size:10px; background-color: #354c98; color:white; border-radius:3px;} .es_tag_sm_orange { display: inline-block; margin: 2px; padding: 1px 8px 2px 8px; font-size:10px; background-color: orangered; color:white; border-radius:3px;} .es_tag_new { margin: 0px; padding: 0px 2px 0px 2px; font-size: 8px; font-weight: normal; font-family: Arial; background-color: #cc3300; color:white; border-radius:5px; position:relative; top:-1px;} .es_tag_time { margin: 3px; padding: 2px 10px; background-color: #f9f9f9; color:#999; border-radius:5px; } .es_tag_time:before { content: '';} .es_tag_popup { margin: 3px; padding: 2px 10px; background-color: #f0f0f0; color:#111111; border-radius:10px;} .es_tag { margin: 2px; padding: 4px 6px; background-color: #999999; color:#FFFFFF; } .es_tag_blue { margin: 2px; padding: 4px 10px; background-color: #0033cc; color:#FFFFFF; } .es_tag_blue_round { margin: 3px; padding: 2px 10px; background-color: #0033cc; color:#FFFFFF; border-radius:10px;} .es_tag_blue_sm { margin: 2px; padding: 3px 5px; background-color: #0033cc; color:#ffffff; border-radius:1px;} .es_tag_green { margin: 2px; padding: 4px 10px; background-color: #009223; color:#FFFFFF; } .es_tag_green_sm { margin: 2px; padding: 3px 5px; background-color: #009223; color:#ffffff; border-radius:1px;} .es_tag_yellow { margin: 2px; padding: 6px 10px; background-color: #FAE100; color:#111111; border-radius:14px; border:1px solid #FAE100; text-decoration: none;} .es_tag_yellow_sm { margin: 2px; padding: 3px 5px; background-color: #FAE100; color:#111111; border-radius:1px; border:1px solid #FAE100; text-decoration: none;} .es_tag_red { margin: 2px; padding: 6px 10px; background-color: #cc2900; color:#ffffff; border-radius:14px; border:1px solid #cc2900; text-decoration: none;} .es_tag_orangered_sm { margin: 2px; padding: 3px 5px; background-color: orangered; color:#ffffff; border-radius:10px; border: none; text-decoration: none;} .es_tag_red_sm { margin: 2px; padding: 3px 5px; background-color: #cc2900; color:#ffffff; border-radius:14px; border:1px solid #cc2900; text-decoration: none;} .es_tag_gray_sm { margin: 2px; padding: 3px 10px; background-color: #f0f0f0; color:#111; border-radius:3px;} .es_tag_gray_sm_round { margin: 2px; padding: 3px 10px; background-color: #f0f0f0; color:#111; border-radius:15px;} .es_tag_trans { margin: 6px; padding: 2px 10px; background-color: transparent; color:#111; border:1px solid #ccc; border-radius:15px;} .es_tag_white { margin: 2px; padding: 6px 10px; background-color: #ffffff; color:#111; border-radius:14px; border:1px solid #cccccc; text-decoration: none;} .es_tag_white_lg { margin: 2px; padding: 14px 24px; background-color: #ffffff; color:#111; border-radius:20px; border:1px solid #cccccc; text-decoration: none;} .es_tag_num, .es_tag_num_gray { margin: 5px; padding: 2px 10px; background-color: #ddd; color: #111; border:none; border-radius:5px; font-weight: 900; font-size: 14px; display: inline-block; } .es_tag_num_yellow { margin: 5px; padding: 2px 10px; background-color: #ffcc00; color: #111; border:none; border-radius:5px; font-weight: 900; font-size: 16px; display: inline-block; } .es_tag_num_red { margin: 5px; padding: 2px 10px; background-color: red; color: #111; border:none; border-radius:5px; font-weight: 900; font-size: 16px; display: inline-block; } .es_tag_num_blue { margin: 5px; padding: 2px 10px; background-color: blue; color: #111; border:none; border-radius:5px; font-weight: 900; font-size: 16px; display: inline-block; } .es_tag_grid_wire { margin: 2px; padding: 4px 10px; background-color: transparent; color:#777; border:1px solid #999; border-radius:5px; } .es_tag_grid_gray { margin: 2px; padding: 2px 10px; background-color: transparent; color:#999; border:1px solid #cccccc; border-radius:5px; } .es_tag_grid_black { margin: 2px; padding: 2px 10px; background-color: transparent; color:#111; border:1px solid #666666; border-radius:5px; } .es_tag_grid_blue { margin: 5px 5px 10px 5px; padding: 2px 10px; background-color: transparent; color:#111; border:1px solid #3366cc; border-radius:5px;} .es_btn_ian { background: #354c98; border-radius: 999px; box-shadow: #5E5DF0 0 10px 20px -10px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 24px; opacity: 1; outline: 0 solid transparent; padding: 9px 18px; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: fit-content; word-break: break-word; border: 0; } /* ------------ 눈에 띄게 */ .es_btn_copy { display: inline-block; margin:2px; padding:2px 4px; min-width: 30px; height:100%; text-align:center; outline:none; border: 1px dashed #aaa; border-radius:3px; background: transparent; } .es_btn_box { margin:1px; padding: 2px 8px; background-color: transparent; border-radius:3px; border:1px solid #bbbbbb;} .es_btn_act { margin: 2px 2px 2px 2px; display: inline-block; position: relative; background-color: #4e4e4e; border: none; border-radius: 4em; font-size: 12px; font-weight:500; color: #FFF; padding: 8px 20px; cursor:pointer;user-select:none;text-align: center;text-decoration: none;cursor: pointer;transition-duration: 0.2s;-webkit-transition-duration: 0.2s; /* Safari */} .es_btn_act:hover { transition-duration: 0.1s; background-color: #111;} .es_btn_act:after { content: "";display: block;position: absolute;border-radius: 4em;left: 0;top:0;width: 100%;height: 100%; opacity: 0; transition: all 0.5s; box-shadow: 0 0 10px 40px #999; /*클릭후 애니메이션효과 */ } .es_btn_act:active:after { box-shadow: 0 0 0 0 white;position: absolute;border-radius: 4em;left: 0;top:0;opacity: 1;transition: 0s;} .es_btn_act:active { top: 4px; } /* 헬스케어*/ .es_btn_hc { display: inline-block; margin: 1px 2px; padding: 4px 10px; border:none; outline: none; border-radius: 5px;background: #f2f2f2; text-align: center; color: #666; font-weight: 600;} .es_btn_hc:hover { background-color: #ddd; color: #333; } .es_btn_hc_yellow { display: inline-block; margin: 1px 2px; padding: 4px 10px; border:none; outline: none; border-radius: 5px;background: #ffb86c; text-align: center; color: #333; font-weight: 600;} .es_btn_hc_yellow:hover { background-color: #ffb86c; color: #111; } .es_btn_icon { display: inline-block; margin: 3px; padding: 2px 4px; border-radius: 3px; border:0px solid #ddd; background: #999; text-align: center; color: #eee; font-weight: 500;} .es_btn_icon:hover { background-color: #ddd; color: #333; } .es_btn_grid { margin:0px; padding: 0px 8px; background-color: #eee; transition: all 0.15s ease; box-sizing: border-box; border: 1px solid #666; border-radius: 10px; color: #333; } .es_btn_grid_print { margin:1px; padding: 2px 10px; background-color: #eee; transition: all 0.15s ease; box-sizing: border-box; border: 1px solid #666; border-radius: 10px; color: #333; } .es_btn_base { margin:2px; padding: 0.75em 1.5em 0.65em 1.5em; display: inline-block; background-color: transparent; transition: all 0.15s ease; box-sizing: border-box; border: 1px solid #aaa; border-radius: 2px; color: #999; } .es_btn_rds_white { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: white; transition: all 0.15s ease; box-sizing: border-box; border: none; color: black;} .es_btn_rds_red { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: red; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white; font-weight:800;} .es_btn_rds_blue { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: blue; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white; font-weight:800;} .es_btn_rds_green { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: green; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_rds_gray { margin:2px; padding: 0.45em 1.3em; border-radius: 2em; display: inline-block; background-color: #f9f9f9; transition: all 0.15s ease; box-sizing: border-box; border:1px solid #aaa; color: #111;} .es_btn_rds_black { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: #444; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_rds_brown { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: #8a6d3b; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_rds_transw { margin:2px; padding: 0.65em 1.3em; border-radius: 2em; display: inline-block; background-color: transparent; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_small_black { margin:2px; padding: 0.45em 1em; border-radius: 2em; display: inline-block; background-color: #444; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_small_red { margin:2px; padding: 0.45em 1em; border-radius: 2em; display: inline-block; background-color:red; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_small_green { margin:2px; padding: 0.45em 1em; border-radius: 2em; display: inline-block; background-color:#4c9a4c; transition: all 0.15s ease; box-sizing: border-box; border: none; color: white;} .es_btn_small_white { margin:2px; padding: 0.45em 1em; border-radius: 2em; display: inline-block; background-color: white; transition: all 0.15s ease; box-sizing: border-box; border: 1px solid #ddd; color: #222;} .es_btn_loan { margin:2px; padding: 0.45em 2em; border-radius: 0.5em; display: inline-block; background-color: #FFF; transition: all 0.15s ease; box-sizing: border-box; border: 1px solid #ccc; color: #111;} .es_btn_full { text-align: center; display: inline-block; padding: 15px 40px; border: 1px solid #999; cursor: pointer;letter-spacing: 2px;position:relative;overflow:hidden;margin: 5px;} .es_btn_full:before { content: "";position: absolute;height: 150px;width: 50px;background : #fff;right: -40px;top: -40px;transform: rotate(37deg);transition: all .3s;opacity: 0.3;} .es_btn_full:hover:before { right: 105%;} .es_btn_nemo_brown { display: inline-block; margin:3px; padding: 12px 20px; border:0px solid white; background-color: #ba9678; color:#111; } .es_btn_nemo_orange { display: inline-block; margin:3px; padding: 12px 20px; border:0px solid white; background-color: #E96729; color:#FFFFFF; } .es_btn_nemo_yellow { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid white; background-color: #ffcc00; color:#FFFFFF; } .es_btn_nemo_yellow_trans { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid white; background-color: transparent; color: #ffcc00; } .es_btn_nemo_red { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid red; background-color: red; color:#FFFFFF; } .es_btn_nemo_red_trans { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid red; background-color: transparent; color: red; } .es_btn_nemo_blue { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid blue; background-color: blue; color:#FFFFFF; } .es_btn_nemo_skyBlue { display: inline-block; margin:3px; padding: 12px 20px; border:0px solid white; background-color: #5bb3ff; color:#FFFFFF; } .es_btn_nemo_black_trans { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid #333; background-color: transparent; color: blue; } .es_btn_nemo_green { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid #4c9a4c; background-color: #4c9a4c; color:#FFFFFF; } .es_btn_nemo_gray { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid gray; background-color: gray; color:#FFFFFF; } .es_btn_nemo_black { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid black; background-color: black; color:#FFFFFF; } .es_btn_nemo_black_trans { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid #333; background-color: transparent; color: #333; } .es_btn_nemo_white { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid #eee; background-color: white; color:#333; } .es_btn_nemo_white_trans { display: inline-block; margin:3px; padding: 12px 20px; border:1px solid white; background-color: transparent; color: white; } .es_btn_search { display: inline-block; margin:2px; padding: 8px 10px; background-color: #354c98; color:#ffffff; text-decoration: none; border-radius:3px;border:none} .es_btn_edit { display: inline-block; margin:2px; padding: 8px 10px; background-color: #15a846; color:#ffffff; text-decoration: none; border-radius:3px;border:none} .es_btn_del { display: inline-block; margin:2px; padding: 8px 10px; background-color: #354c98; color:#ffffff; text-decoration: none; border-radius:3px;border:none} .es_btn_init { display: inline-block; margin:2px; padding: 8px 10px; background-color: #354c98; color:#ffffff; text-decoration: none; border-radius:3px;border:none} .es_btn_close { display: inline-block; margin:2px; padding: 8px 10px; background-color: #aaaaaa; color:#ffffff; text-decoration: none; border-radius:3px;border:none} .es_btn_circle_20 { display: inline-block; margin:2px; padding: 2px 3px; background-color: transparent; color:#111; text-decoration: none; border-radius:50%;border:1px solid #999; width:20px; height:20px; } .es_btn_prt { display: inline-block; margin:2px; padding: 8px 10px; background-color: #777777; color:#ffffff; text-decoration: none; border-radius:3px;border:none} .es_button { display: inline-block; margin:2px; padding: 1px 8px; border: #354c98 solid 1px; text-decoration: none; background-color: transparent; cursor: pointer;} .es_button_black { display: inline-block; margin:2px; padding: 1px 8px; border: black solid 2px; text-decoration: none; background-color: transparent; color: black; cursor: pointer;} .es_button_blue { display: inline-block; margin:2px; padding: 1px 8px; border: black solid 0px; text-decoration: none; background-color: #354c98; color: #fff;} .es_btn_sm { margin:3px; border-radius:3px; padding: 4px 8px; border:1px solid #000;background-color: transparent; color:#111111; } .es_btn_sm:hover { margin:3px; border-radius:3px; padding: 4px 8px; border:0px solid #FFF;background-color: #000; color:#FFF;} .es_btn { margin:5px; border-radius:25px;padding: 12px 25px; border:1px solid #000;background-color: transparent; color:#111111; } .es_btn:hover { margin:5px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: #000; color:#FFF;} .es_btn_white { margin:5px; border-radius:25px;padding: 12px 25px; border:1px solid #FFF;background-color: transparent; color:#FFFFFF; } .es_btn_white:hover { margin:5px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: #f0f0f0; color:#111;} .es_btn_black { margin:5px; border-radius:25px;padding: 12px 25px; border:1px solid #FFF;background-color: #000000; color:#FFFFFF; } .es_btn_black:hover { margin:5px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: #f0f0f0; color:#111;} .es_btn_black_nemo { display: inline-block; zoom: 1; margin: 4px; padding: 6px 8px; color: #fff; border: black solid 0px; text-decoration: none; background-color: #111; } .es_btn_green { margin:3px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: #00b359; color:#FFFFFF; } .es_btn_green:hover { margin:3px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: #666666; color:#FFF; font-weight:bold;} .es_btn_red { margin:3px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: orangered; color:#FFFFFF; } .es_btn_red:hover { margin:3px; border-radius:25px;padding: 12px 25px; border:0px solid #FFF;background-color: #666666; color:#FFF; font-weight:bold;} .es_btn_red_nemo { margin:5px; padding: 12px 25px; border:0px solid red; background-color: red; color:#FFFFFF; } .es_btn_red_nemo_car { padding: 12px 25px; border:0px solid red; background-color: red; color:#FFFFFF; } .es_btn_blue { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #0087b8; background-color: #354c98; color:white; text-decoration: none;} .es_btn_gray { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #cccccc; background-color: #cccccc; color:#333333; text-decoration: none;} .es_btn_white_rct { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #cccccc; background-color: transparent; color:black; text-decoration: none;} .es_btn_lightblue { display: inline-block; margin: 1px; padding: 4px 15px; font-size:12px; background-color: #4255d1; color:#FFF; border-radius:14px; border: none; } .es_btn_purple { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #5f0080; background-color: #800080; color:white; text-decoration: none;} .es_btn_trans_purple { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #5f0080; background-color: transparent; color:#800080; text-decoration: none;} .es_btn_orange { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #E96729; background-color: #E96729; color:white; text-decoration: none;} .es_btn_trans_orange { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #E96729; background-color: transparent; color:#E96729; text-decoration: none;} .es_btn_brown { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #413d34; background-color: #413d34; color:white; text-decoration: none;} .es_btn_trans_brown { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:1px solid #413d34; background-color: transparent; color:#413d34; text-decoration: none;} .es_btn_disabled { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:none; color:#aaa; text-decoration: none; cursor: default;} .es_btn_info { display: inline-block; margin:4px; border-radius:5px; padding: 6px 12px; border:none; color:black; text-decoration: none; cursor: default;} .es_btn_blue_fix { display: inline-block; margin:4px; border-radius:5px; padding: 6px 3px; border:1px solid #283747; background-color: #283747; color:white; text-decoration: none;} .es_btn_red_fix { display: inline-block; margin:4px; border-radius:5px; padding: 6px 3px; border:1px solid orangered; background-color: orangered; color:white; text-decoration: none;} .es_btn_orange_fix { display: inline-block; margin:4px; border-radius:5px; padding: 6px 3px; border:1px solid #E96729; background-color: #E96729; color:white; text-decoration: none;} .es_btn_gray_fix { display: inline-block; margin:4px; border-radius:5px; padding: 6px 3px; border:1px solid #aaa; color:#aaa; text-decoration: none;} .es_btn_trans_white_black { display: inline-block; padding: 4px 4px; color: black; border: white solid 1px; text-decoration: none; background-color: white; } .es_btn_trans_white { display: inline-block; zoom: 1; margin-top: 1em; padding: 8px 15px; color: white; border: white solid 1px; text-decoration: none; background-color: transparent; } .es_btn_trans_white:hover { display: inline-block; zoom: 1; margin-top: 1em; padding: 8px 15px; color: black; border: white solid 1px; text-decoration: none; background-color: white; } .es_btn_trans_black { display: inline-block; zoom: 1; margin-top: 1em; padding: 8px 15px; color: black; border: black solid 1px; text-decoration: none; background-color: transparent; } .es_btn_trans_black:hover { display: inline-block; zoom: 1; margin-top: 1em; padding: 8px 15px; color: #fff; border: black solid 1px; text-decoration: none; background-color: black; } .es_btn_trans_red { display: inline-block; zoom: 1; margin-top: 1em; padding: 8px 15px; color: black; border: red solid 1px; text-decoration: none; background-color: transparent; } .es_btn_trans_red:hover { display: inline-block; zoom: 1; margin-top: 1em; padding: 8px 15px; color: white; border: red solid 1px; text-decoration: none; background-color: red; } .es_btn_login { margin: 2px; border-radius:15px;padding: 4px 12px; border:0px solid #FFF;background-color: #cc2900; color:#FFFFFF; font-size: 14px;} .es_btn_login:hover { margin: 2px; border-radius:15px;padding: 4px 12px; border:0px solid #FFF;background-color: #111111; color:#ffffff;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모달창띄우기 Modal */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_modal { display:none; padding-top: 150px ;position:fixed;left:0;top:0;width:100%;height:100%; overflow:auto; background-color:rgba(10,10,10,0.6); z-index:999; transition: opacity 0.3s ease-out, visibility 1s ease-out; } /*전체풀화면기준*/ .es_modal_sm { display:none; padding-top: 100px ;position:fixed;left:0;top:0;width:100%;height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); z-index:999;} .es_modal_header { font-size:14px; font-weight: 800; padding:20px; background-color: #2d8659; /*#339966;*/ color: #FFF; text-align: center; } /* 제목 */ .es_modal_subheader { font-size:12px; font-weight: 500; background-color: #f0f0f0; padding:10px; } /* 소제목 */ .es_modal_content { font-size:12px; margin:auto; background-color:transparent; position:relative;padding:0;outline:0; min-width:300px; /*max-width:900px;*/ } /* 내용박스*/ .es_modal_body { background-color: rgba(255,255,255,1.0); padding: 15px 30px 100px 30px; min-height: 500px; /*max-width:900px;*/} .es_modal_footer { width:100%; min-height:60px; padding: 20px 20px 30px 20px; background-color: #dddddd; font-weight: bold; color: #111111; text-align: center; position: relative; left:0px; bottom: 60px; z-index:9;} .es_modal_footer > a { padding: 10px 20px; text-align: center; } /* 바닥글 저장버튼들 */ @media (max-width:600px){ .es_modal { padding-top: 0px; min-height:100%; width:100%; background-color:rgba(255,255,255, 1.0);} .es_modal_sm { padding-top: 100px} .es_modal_header { position:fixed; left:0; top:0; width: 100%; } /* 제목 */ .es_modal_subheader { margin-top:50px; } /* 서브제목 */ .es_modal_content { margin:0 0px; width:auto!important; min-height:calc(100% - 200px); } .es_modal_body { background-color: #f6f6f6; padding: 15px 10px; min-height:calc(100% - 200px); } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* HTML Progess Bar스타일 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_progress_green { appearance: none; } .es_progress_green::-webkit-progress-bar { background:#f0f0f0; border-radius:10px; box-shadow: inset 3px 3px 10px #ccc; } .es_progress_green::-webkit-progress-value { border-radius:10px; background: #1D976C; background: -webkit-linear-gradient(to right, #93F9B9, #1D976C); background: linear-gradient(to right, #93F9B9, #1D976C); } .es_progress_pink { appearance: none; } .es_progress_pink::-webkit-progress-bar { background:#cccccc; border-radius:10px; box-shadow: inset 3px 3px 10px #ccc; } .es_progress_pink::-webkit-progress-value { border-radius:10px; background: #ff4da9; background: -webkit-linear-gradient(to right,#ffcce6, #ff4da9); background: linear-gradient(to right, #ffcce6, #ff4da9); } .es_progress_red { appearance: none; } .es_progress_red::-webkit-progress-bar { background:#cccccc; border-radius:10px; box-shadow: inset 3px 3px 10px #ccc; } .es_progress_red::-webkit-progress-value { border-radius:10px; background: #ffebe6; background: -webkit-linear-gradient(to right,#ffebe6, #ff0000); background: linear-gradient(to right, #ffebe6, #ff0000); } .es_progress_yellow { appearance: none; } .es_progress_yellow::-webkit-progress-bar { background:#cccccc; border-radius:10px; box-shadow: inset 3px 3px 10px #ccc; } .es_progress_yellow::-webkit-progress-value { border-radius:10px; background: #ffb31a; } .es_progress_blue { appearance: none; } .es_progress_blue::-webkit-progress-bar { background:#cccccc; border-radius:1px; box-shadow: inset 3px 3px 10px #ccc; } .es_progress_blue::-webkit-progress-value { border-radius:1px; border-top-right-radius: 14px; background: -webkit-linear-gradient(to right,#4988ee, #4988ee); background: linear-gradient(to right, #4988ee, #4988ee); } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 팝업창 레이아웃디자인 LAYOUT */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_popup { width:100%; overflow-y: auto; font-size: 12px;} .es_popup .es_popup_header { width:100%; min-height:40px; position: fixed; top:0; /*position: fixed; top:0;*/ z-index:9; padding: 8px 14px 8px 40px; background-color: #483698; color: #FFFFFF; text-align: center; font-weight: bold; font-size:16px;} .es_popup .es_popup_header > a { font-size:12px; font-weight: normal; } .es_popup .es_popup_subheader { width:100%; min-height:20px; margin-top:40px; padding: 10px 20px; background-color: #f0f0f0; color: #111111; } .es_popup .es_popup_body { width:100%; min-height:300px; padding: 10px 20px 100px 20px; overflow-y: auto; color: #111111; z-index:-1;} .es_popup .es_popup_footer { width:100%; min-height:60px; padding: 10px 20px 15px 20px; background-color: #f0f0f0; font-weight: bold; color: #111111; text-align: center; position: fixed; left:0px; bottom: 0px; z-index:9;} .es_popup .es_popup_footer > a { padding: 10px 20px; text-align: center; font-family: "Pretendard Regular"; font-size:13px!important;} /* 바닥글 저장버튼들 */ @media (max-width:600px){ .es_popup { width:100%; overflow-y: hidden; } .es_popup .es_popup_header { z-index:99;} .es_popup .es_popup_body { width:100%; min-height:300px; padding: 10px 16px 100px 13px; overflow-y: auto; z-index:-1;} .es_popup .es_popup_footer > a { padding: 10px 10px; } /* 바닥글 저장버튼들 */ } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 팝업창 닫기 CLOSE */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_x { float: right; position: relative; top:-5px; text-decoration: none; display: block; width: 30px; height: 30px; overflow: hidden;} .es_x:before, .es_x::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; } .es_x:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_x:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_sm_x { float: right; position: relative; top:-5px; text-decoration: none; display: block; width: 15px; height: 15px; overflow: hidden;} .es_sm_x:before, .es_sm_x::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; } .es_sm_x:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_sm_x:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_sm_x_gray { float: right; position: relative; top:-5px; text-decoration: none; display: block; width: 15px; height: 15px; overflow: hidden;} .es_sm_x_gray:before, .es_sm_x_gray::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #666; } .es_sm_x_gray:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_sm_x_gray:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_x_left { position: absolute; top:8px; left:12px; text-decoration: none; display: block; width: 22px; height: 22px; overflow: hidden;} .es_x_left:before, .es_x_left::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; } .es_x_left:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_x_left:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_x_left:hover { background-color: orangered; padding: 10px; } .es_x_left_black { position: absolute; top:12px; left:15px; text-decoration: none; display: block; width: 18px; height: 18px; overflow: hidden;} .es_x_left_black:before, .es_x_left_black::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #333333; } .es_x_left_black:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_x_left_black:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_x_black { float: right; position: relative; top:-5px; text-decoration: none; display: block; width: 30px; height: 30px; overflow: hidden;} .es_x_black:before, .es_x_black::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #333333; } .es_x_black:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_x_black:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_x_gray { float: right; position: relative; top:-5px; text-decoration: none; display: block; width: 30px; height: 30px; overflow: hidden;} .es_x_gray:before, .es_x_gray::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #999999; } .es_x_gray:before { -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); } .es_x_gray:after { -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg); } .es_close { position: absolute; right: 15px; top: 15px; width: 32px; height: 32px; opacity: 0.7; } .es_close:hover { opacity: 1; } .es_close:before, .es_close:after { position: absolute; left: 15px; content: ' '; height: 25px; width: 0.4px; background-color: #000; } .es_close:before { transform: rotate(45deg); } .es_close:after { transform: rotate(-45deg); } .es_anker_none { pointer-events:none; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 애니메이션효과 animation */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_ani_bg { transition: background-color 0.8s; } .es_ani_bg:hover { background-color: rgba(250,250,250,0.8); } .es_ani_fade { opacity: 0.5; transition: opacity 1s; } .es_ani_fade:hover { opacity: 1; } .es_ani_border_dash { transition: border 0.8s; } .es_ani_border_dash:hover { border: 1px dashed; } .es_ani_border_inset { transition: box-shadow 1s; } .es_ani_border_inset:hover { box-shadow: inset 0 0 0 25px #533; } .es_ani_image_grow img { transition: transform 0.5s; } .es_ani_image_grow img:hover { transform: scale(1.2); } .es_ani_image_shrink img { transition: transform 0.5s; } .es_ani_image_shrink img:hover { transform: scale(0.8); } .es_ani_scale_grow { transition: transform 0.5s; will-change: scale; } .es_ani_scale_grow:hover { transform: scale(1.2); } .es_ani_scale_shrink { transition: transform 0.5s; will-change: scale; } .es_ani_scale_shrink:hover { transform: scale(0.8); } .es_ani_translate_y1 { transition: transform 0.5s; } .es_ani_translate_y1:hover { transform: translateY(1px); } .es_ani_translate_y2 { transition: transform 0.5s; } .es_ani_translate_y2:hover { transform: translateY(2px); } .es_ani_translate_x1 { transition: transform 0.5s; } .es_ani_translate_x1:hover { transform: translateX(1px); } .es_ani_translate_x2 { transition: transform 0.5s; } .es_ani_translate_x2:hover { transform: translateX(2px); } .es_ani_translate_x1y1 { transition: transform 0.5s; } .es_ani_translate_x1y1:hover { transform: translate(1px,1px); } .es_ani_translate_x2y2 { transition: transform 0.5s; } .es_ani_translate_x2y2:hover { transform: translate(2px,2px); } .es_ani_rotate_x45 { transition: transform 0.5s; } .es_ani_rotate_x45:hover { transform: rotateX(45deg); } .es_ani_rotate_x-45 { transition: transform 0.5s; } .es_ani_rotate_x-45:hover { transform: rotateX(-45deg); } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 라디오버튼 RADIO */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_radio_zip { margin-top: 1px;margin-bottom:1px;margin-right:1px;} .es_radio_zip > label { text-align:center; padding:0; font-size:11px; color: #999;} .es_radio_zip > label:last-child { margin-right:0px; } .es_radio_zip > label:first-child { margin-left:0px; } .es_radio_zip > label > input { display:none} .es_radio_zip > label > input + span { display:inline-block; margin-bottom:3px; padding: 3px 8px; border:1px solid #cccccc;border-radius:0px;background:#fff;cursor:pointer; color: #333; } .es_radio_zip > label:first-child > input + span { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .es_radio_zip > label:last-child > input + span { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .es_radio_zip > label > input:disabled + span { cursor:not-allowed;} .es_radio_zip > label > input:checked + span { background:#FF542E; border:1px solid #FF542E; color:#fff; font-weight: normal; } .es_radio_zip.disabled { cursor:not-allowed;opacity:.5} .es_radio_zip.disabled > label { pointer-events:none;} @media (max-width:600px){ .es_radio_zip > label > input + span { margin-bottom:5px; } } .es_radio { margin-top: 1px;margin-bottom:1px;margin-right:0px;} .es_radio > label { text-align:center; padding:0; font-size:11px; color: #999;} .es_radio > label:last-child { margin-right:0px;} .es_radio > label:first-child { margin-left:0px;} .es_radio > label > input { display:none} .es_radio > label > input + span { display:inline-block; margin:1px; padding: 2px 8px;border:1px solid #cccccc;border-radius:20px;background:#fff;cursor:pointer; color: #333; } .es_radio > label > input:disabled + span { cursor:not-allowed;} .es_radio > label > input:checked + span { background:#FF542E; border:1px solid #FF542E; color:#fff; font-weight: normal; } .es_radio.disabled { cursor:not-allowed;opacity:.5} .es_radio.disabled > label { pointer-events:none;} @media (max-width:600px){ .es_radio { margin: 2px 0px; } } /*---------- 답변항목 라디오 --------------*/ .es_radio_blue { display: inline-block; position: relative; padding-left: 35px; min-width:130px; margin: 14px; cursor: pointer;font-size: 13px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .es_radio_blue input { position: absolute;opacity: 0;cursor: pointer; } .es_radio_blue > .checkmark { position: absolute;top: 0;left: 0;height: 21px;width: 21px;background-color: #eee;border-radius: 50%; } .es_radio_blue:hover input ~ .checkmark { background-color: #aaa; } .es_radio_blue input:checked ~ .checkmark { background-color: #2196F3; } .es_radio_blue > .checkmark:after { content: ""; position: absolute;display: none;} .es_radio_blue input:checked ~ .checkmark:after { display: inline-block;; } .es_radio_blue > .checkmark:after { top: 6px;left: 7px;width: 8px;height: 8px;border-radius: 50%;background: white;} @media (max-width:600px){ .es_radio_blue { margin: 6px 4px; } } /*---------- 답변항목 라디오 --------------*/ .es_radio_red { display: inline-block; position: relative; padding-left: 35px; min-width:130px; margin: 14px; cursor: pointer;font-size: 13px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .es_radio_red input { position: absolute;opacity: 0;cursor: pointer; } .es_radio_red > .checkmark { position: absolute;top: 0;left: 0;height: 21px;width: 21px;background-color: #eee;border-radius: 50%; } .es_radio_red:hover input ~ .checkmark { background-color: #aaa; } .es_radio_red input:checked ~ .checkmark { background-color: orangered; } .es_radio_red > .checkmark:after { content: ""; position: absolute;display: none;} .es_radio_red input:checked ~ .checkmark:after { display: inline-block;; } .es_radio_red > .checkmark:after { top: 6px;left: 7px;width: 8px;height: 8px;border-radius: 50%;background: white;} @media (max-width:600px){ .es_radio_red { margin: 6px 4px; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 스위치버튼 SWITCH */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_switch { position: relative;display: inline-block;width: 50px;height: 20px; margin-top:2px; margin-bottom:2px;} .es_switch > input { opacity: 0;width: 0;height: 0; color: #333;} .es_switch .slider { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;} .es_switch .slider:before { position: absolute;content: "";height: 16px;width: 16px;left: 4px;bottom: 2px;background-color: white;-webkit-transition: .4s;transition: .4s;} .es_switch > input:checked + .slider {background-color: #FF542E;} .es_switch > input:focus + .slider { box-shadow: 0 0 1px #FF542E; } .es_switch > input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);} .es_switch .slider.round { border-radius: 16px;} .es_switch .slider.round:before { border-radius: 50%;} .es_switch_blue { position: relative;display: inline-block;width: 50px;height: 20px; margin-top:2px; margin-bottom:2px;} .es_switch_blue > input { opacity: 0;width: 0;height: 0; color: #333;} .es_switch_blue > input:checked + .slider { background-color: rgba(0, 89, 179,0.8); } .es_switch_blue > input:focus + .slider { box-shadow: 0px 0px 1px rgba(0, 89, 179,0.8); } .es_switch_blue > input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);} .es_switch_blue .slider { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0; background-color: #ddd; -webkit-transition: .4s;transition: .4s;} /*슬라이더자체*/ .es_switch_blue .slider:before { position: absolute;content: "";height: 16px;width: 16px;left: 4px;bottom: 2px;background-color: white;-webkit-transition: .4s;transition: .4s;} .es_switch_blue .slider.round { border-radius: 16px; /*border:2px solid #004d99;*/ } /* 밑에 bar */ .es_switch_blue .slider.round:before { border-radius: 50%; border:1px solid #fff; } /* 공모양 */ .es_toggle { cursor: pointer; display: inline-block;} .es_toggle_switch { display: inline-block;background: #ccc;border-radius: 16px;width: 40px;height: 22px;position: relative; vertical-align: middle;transition: background 0.25s;} .es_toggle_switch:before, .es_toggle_switch:after { content: "";} .es_toggle_switch:before { display: block;background: linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius: 50%;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);width: 15px;height: 13px;position: absolute;top: 4px;left: 4px;transition: left 0.25s;} .es_toggle:hover .es_toggle_switch:before { background: linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);} .es_toggle_checkbox:checked + .es_toggle_switch { background: #56c080;} .es_toggle_checkbox:checked + .es_toggle_switch:before { left: 20px;} .es_toggle_checkbox { position: absolute; visibility: hidden;} .es_toggle_label { margin-left: 5px; position: relative; top: 2px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 체크박스 CHECK */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_check { font-size:0px;} .es_check > label { text-align:center;margin:0;padding:0;margin-bottom:3px;margin-right:3px;font-size:12px; color: #333;} .es_check > label:last-child{ margin-right:10px;} .es_check > label > input { display:none} .es_check > label > input + span {display:inline-block;padding:6px;border:1px solid #ccc;border-radius:3px;background:#fff;cursor:pointer;} .es_check > label > input:checked + span {background:#483698;color:#fff;border:0} /* ------------------- 초록색 체크박스 미니 */ .es_checkbox_green_sm { /*margin-top:10px*/ } .es_checkbox_green_sm > input[type="checkbox"] {position:absolute;display:none;} .es_checkbox_green_sm > span { display:inline-block;position:relative; /*height:22px; line-height:22px;*/ padding: 0px 3px 4px 26px; margin-top: 1px; margin-right: 0px;vertical-align:middle;font-size:11px;font-weight:normal; color: #666;} .es_checkbox_green_sm > input[type="checkbox"] + span:before { content:"";position:absolute;top:0;left:0;display:block;width:22px;height:16px;border:1px solid #ccc;background:#fff;border-radius:4px} .es_checkbox_green_sm > input[type="checkbox"] + span:after { content:"";position:absolute;top:2px;left:5px;display:block;width:11px;height:7px;border:1px solid #ddd;border-width:0 0 1px 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .es_checkbox_green_sm > input[type="checkbox"]:checked + span:before {border:0; background: #0AA23D; } .es_checkbox_green_sm > input[type="checkbox"]:checked + span:after {border-color:#fff} /* ------------------- 보라자 체크박스 미니 */ .es_checkbox_sm { /*margin-top:10px*/ } .es_checkbox_sm > input[type="checkbox"] {position:absolute;display:none;} .es_checkbox_sm > span { display:inline-block;position:relative; /*height:22px; line-height:22px;*/ padding: 0px 3px 4px 26px; margin-top: 1px; margin-right: 0px;vertical-align:middle;font-size:11px;font-weight:normal; color: #666;} .es_checkbox_sm > input[type="checkbox"] + span:before { content:"";position:absolute;top:0;left:0;display:block;width:22px;height:16px;border:1px solid #aaa;background:#fff;border-radius:4px} .es_checkbox_sm > input[type="checkbox"] + span:after { content:"";position:absolute;top:2px;left:5px;display:block;width:11px;height:7px;border:1px solid #ddd;border-width:0 0 1px 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .es_checkbox_sm > input[type="checkbox"]:checked + span:before {border:0; background: #483698 } .es_checkbox_sm > input[type="checkbox"]:checked + span:after {border-color:#fff} /* --------------------- 보라색체크박스만들기 */ .es_checkbox { margin-top:2px} .es_checkbox > input[type="checkbox"] {position:absolute;display:none;} .es_checkbox > span {display:inline-block;position:relative;height:22px;padding-left:30px;vertical-align:middle;line-height:22px;font-size:12px;font-weight:normal; color: #333;} .es_checkbox > input[type="checkbox"] + span:before {content:"";position:absolute;top:0;left:0;display:block;width:22px;height:22px;border:1px solid #ccc;background:#fff;border-radius:100%} .es_checkbox > input[type="checkbox"] + span:after {content:"";position:absolute;top:6px;left:5px;display:block;width:11px;height:7px;border:1px solid #ddd;border-width:0 0 1px 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .es_checkbox > input[type="checkbox"]:checked + span:before {border:0;background:#483698} .es_checkbox > input[type="checkbox"]:checked + span:after {border-color:#fff} /* --------------------- 오렌지레드 체크박스만들기 */ .es_checkbox_red { margin-top:2px} .es_checkbox_red > input[type="checkbox"] {position:absolute;display:none;} .es_checkbox_red > span {display:inline-block;position:relative;height:22px;padding-left:30px;vertical-align:middle;line-height:22px;font-size:12px;font-weight:normal; color: #333;} .es_checkbox_red > input[type="checkbox"] + span:before {content:"";position:absolute;top:0;left:0;display:block;width:22px;height:22px;border:1px solid #ccc;background:#fff;border-radius:100%} .es_checkbox_red > input[type="checkbox"] + span:after {content:"";position:absolute;top:6px;left:5px;display:block;width:11px;height:7px;border:1px solid #ddd;border-width:0 0 1px 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .es_checkbox_red > input[type="checkbox"]:checked + span:before {border:0;background: orangered} .es_checkbox_red > input[type="checkbox"]:checked + span:after {border-color:#fff} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 진행율% STEPBAR */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_stepbar { position: relative; list-style: none; margin: 0 0 1em; padding: 0; text-align: center; width: 100%; overflow: hidden; *zoom: 1; } .es_stepbar .step { position: relative; float: left; display: inline-block; line-height: 40px; margin:1px; padding: 0 10px 0 10px; background-color: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .es_stepbar .step:before, .es_stepbar .step:after { position: absolute; left: -7px; display: block; content: ''; background-color: #eee; border-left: 4px solid #FFF; width: 20px; height: 20px; } .es_stepbar .step:after { top: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .es_stepbar .step:before { bottom: 0; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .es_stepbar .step:first-child { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .es_stepbar .step:first-child:before, .es_stepbar .step:first-child:after { content: none; } .es_stepbar .step:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .es_stepbar .step.current { color: #FFF; background-color: #e60000; } .es_stepbar .step.current:before, .es_stepbar .step.current:after { background-color: #e60000; } .es_stepbar.stepRate .step { width: 8.9%; } @media (max-width: 700px){ .es_stepbar.stepRate .step { width: 32%; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 최신 탭바 TABS 스크롤가능한것 24.1.26 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_tabBar {list-style: none;padding: 0; white-space: nowrap; margin: 0; /*overflow: auto;*/box-shadow: inset 0 -2px 0 0 #eeeeee;width: 100%;} .es_tabBar li {display: inline-block;vertical-align: top;} .es_tabBar li > a {display: inline-block; color: #999; font-size:16px; letter-spacing:0px; font-family: "Pretendard Bold"!important; position: relative;width: 100%;-webkit-transition: all;-o-transition: all;transition: all;-webkit-transition-duration: 1s;transition-duration: 1s; cursor: pointer !important;background-color: transparent;text-decoration: none!important;} .es_tabBar li > a::after {content: "";height: 2px;position: absolute;width: 100%;left: 0;bottom: 0;-webkit-transition: all;-o-transition: all;transition: all;-webkit-transition-duration: 250ms;transition-duration: 250ms;-webkit-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);} .es_tabBar li.active > a { color: #000; font-weight: 700;} .es_tabBar li.active > a::after {-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);} .es_tabBar.tn-justified > li {display: table-cell; min-width: 20%;text-align: center;} .es_tabBar.tn-icon > li .zmdi {font-size: 22px;line-height: 100%;} .es_tabBar.scrollable { width: 100%;overflow-y: hidden; overflow-x: scroll;-ms-overflow-style: none;-webkit-overflow-scrolling: touch;} .es_tabBar.scrollable::-webkit-scrollbar { width: 8px;height: 3px;} .es_tabBar.scrollable::-webkit-scrollbar-track {border-radius: 10px;} .es_tabBar.scrollable::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0, 0, 0, .1);} .es_tabBar.scrollable::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4);} .es_tabBar:not([tab-color]) > li > a::after { background: #2196f3;} .es_tabBar[tab-color="green"] > li > a::after { background: #4caf50;} .es_tabBar[tab-color="red"] > li > a::after { background: #f44336;} .es_tabBar[tab-color="black"] > li > a::after { background: #000000;} .es_tabBarContent { max-width: 100%; padding: 10px 0px; min-height: 500px; border: 0px solid #eee; } .es_tabBarContent > .es_tabBarPane { display: none; } .es_tabBarContent > .active { display: block; } @media (max-width: 768px) { .es_tabBar li > a { padding: 12px 8px; } } @media (min-width: 768px) { .es_tabBar li > a { padding: 12px 14px; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 서브 탭페이지만들기 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_tabpage_fullpage { position: relative; max-width: 100%; margin-top: 3px; border-top: 1px solid #333; padding: 0px 1px 2px 1px; background-color: transparent;} .es_tabpage { margin: 0; padding: 0; border: 0; outline: none; font-size: 0; text-align: left; border: 1px solid #aaa;} .es_tabpage > input { position: absolute; display: none; } .es_tabpage > label { color: #999; position: relative;display: inline-block;margin: 0;padding: 0;border: 0;outline: none;cursor: pointer;transition: all 0.1s;-o-transition: all 0.1s;-ms-transition: all 0.1s;-moz-transition: all 0.1s;-webkit-transition: all 0.1s;} .es_tabpage > label i {display: block;float: left;margin: 0 8px 0 -2px;padding: 0;border: 0;outline: none;font-family: FontAwesome;font-style: normal;font-size: 17px;} .es_tabpage > input:checked + label {cursor: default;} .es_tabpage > ul { list-style: none;position: relative;display: block;overflow: hidden;margin: 0;padding: 0;border: 0;outline: none;font-size: 13px;} .es_tabpage > ul > li { position: absolute;width: 95%;overflow: auto;padding: 20px 20px 50px 20px; box-sizing: border-box;-moz-box-sizing: border-box;opacity: 0;transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .es_tabpage > .tab-content-first:checked ~ ul .tab-content-first, .es_tabpage > .tab-content-2:checked ~ ul .tab-content-2, .es_tabpage > .tab-content-3:checked ~ ul .tab-content-3, .es_tabpage > .tab-content-4:checked ~ ul .tab-content-4, .es_tabpage > .tab-content-5:checked ~ ul .tab-content-5, .es_tabpage > .tab-content-6:checked ~ ul .tab-content-6, .es_tabpage > .tab-content-7:checked ~ ul .tab-content-7, .es_tabpage > .tab-content-8:checked ~ ul .tab-content-8, .es_tabpage > .tab-content-9:checked ~ ul .tab-content-9, .es_tabpage > .tab-content-last:checked ~ ul .tab-content-last { z-index: 1; top: 0; left: 0; opacity: 1; -webkit-transform: scale(1,1); -webkit-transform: rotate(0deg); } .es_tabpage_height > ul { height: auto !important;} .es_tabpage_height > ul > li { position: static; display: none; height: auto !important;} .es_tabpage_height > .tab-content-first:checked ~ ul .tab-content-first, .es_tabpage_height > .tab-content-2:checked ~ ul .tab-content-2, .es_tabpage_height > .tab-content-3:checked ~ ul .tab-content-3, .es_tabpage_height > .tab-content-4:checked ~ ul .tab-content-4, .es_tabpage_height > .tab-content-5:checked ~ ul .tab-content-5, .es_tabpage_height > .tab-content-6:checked ~ ul .tab-content-6, .es_tabpage_height > .tab-content-7:checked ~ ul .tab-content-7, .es_tabpage_height > .tab-content-8:checked ~ ul .tab-content-8, .es_tabpage_height > .tab-content-9:checked ~ ul .tab-content-9, .es_tabpage_height > .tab-content-last:checked ~ ul .tab-content-last { display: block;} .es_tabpage > label { padding: 8px 16px; background: #e5e5e5;font-size: 13px;line-height: 20px; color: #333; font-weight: 600;} .es_tabpage > label:hover { background: #f2f2f2;} .es_tabpage > input:checked + label { background: #fff;} .es_tabpage > ul { background: transparent;text-align: left;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 탭구성 TAB NEW */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_tabmenu { } .es_tabmenu > ul { position: relative; padding-left:0;margin: 0px 2px; } .es_tabmenu > ul .one { width: calc( (100% - 2px)); } .es_tabmenu > ul .two { width: calc( (100% - 1px) / 2); } .es_tabmenu > ul .three { width: calc( (100% - 1px) / 3); } .es_tabmenu > ul .four { width: calc( (100% - 3px) / 4); } .es_tabmenu > ul .five { width: calc( (100% - 5px) / 5); } .es_tabmenu > ul .six { width: calc( (100% - 6px) / 6); } .es_tabmenu > ul .seven { width: calc( (100% - 7px) / 7); } .es_tabmenu > ul .eight { width: calc( (100% - 8px) / 8); } .es_tabmenu > ul .nine { width: calc( (100% - 8px) / 9); } .es_tabmenu > ul > li /* 각메뉴탭 */ { float:left; text-align:center; background :transparent; /* line-height:50px; */ border-top:1px solid #999; border-right:1px solid #999; display: flex; flex-direction: row; flex-wrap: nowrap; } .es_tabmenu > ul > li:first-child { border-left:1px solid #999; } .es_tabmenu .tablabel { display:block; width:100%; height:40px; line-height:40px; font-weight:800; font-size:13px;} .es_tabmenu .tabInput { display:none;} .es_tabmenu .tabInput:checked ~ label { background:#666; color:white; } .es_tabmenu .tabInput:checked ~ .tabContent { display:block;} .es_tabmenu .tabContent { min-height: 100px; display:none; width: 100%; font-size:12px; text-align:left; padding: 10px 20px; position:absolute; left:0; top:40px; box-sizing: border-box; border : 1px solid #999;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 레이아웃분할 여러컬럼 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .three-col { -moz-column-count: 5; -moz-column-gap: 30px; -webkit-column-count: 5; -webkit-column-gap : 30px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 지도PIN */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_pin_red { outline: none; border: none; padding: 5px; background-image: url("/resources/icon/icon_pin_red.png"); background-size: 18px 18px; background-position-y: center; background-position-x: 10px; background-repeat: no-repeat; } .es_pin_gray { outline: none; border: none; padding: 5px; background-image: url("/resources/icon/icon_pin_gray.png"); background-size: 18px 18px; background-position-y: center; background-position-x: 10px; background-repeat: no-repeat; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 밑줄긋기 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_text_underline_blue { tex-decoration: underline; text-decoration-color: blue; } .es_text_underline_red { tex-decoration: underline; text-decoration-color: red; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 데이터입력용 INPUT, TextArea */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ input:read-only, textarea:read-only { background-color: #f0f0f0; /* Light gray background */ color: #666; /* Slightly muted text color */ border: 0; cursor: default; /* Indicate it's not editable */ } .es_input_search { outline: none; border: none; background-color: #f0f0f0; padding: 7px 10px 7px 30px; margin:2px 2px; text-align: left; width:100%; border-radius: 14px; line-height: 1.4em; background-image: url("/resources/icon/icon_search.png"); background-size: 15px 15px; background-position-y: center; background-position-x: 10px; background-repeat: no-repeat; } .es_input_rds { outline: none; border: 1px solid #ddd!important; padding: 8px 12px; margin:1px 2px; text-align: left; width:100%; border-radius: 4px; line-height: 1.4em;} .es_input_rds_20 { outline: none; background-color: #f0f0f0!important; padding: 8px 30px; margin:2px 0px; text-align: left; border-radius: 20px; line-height: 1.4em;} .es_input_title { font-size: 14px; font-weight: 700; font-family: "Circular Std Light"; } .es_input_under { outline: none; border: none; border-bottom: 1px solid #ddd; padding: 4px 8px; margin:1px 2px; text-align: left; width:100%; border-radius: 3px; line-height: 1.3em;} .es_input_noBorder { outline: none; border: none; padding: 4px 8px; margin:1px 2px; text-align: left; width:100%; line-height: 1.3em;} .es_input_error { outline: none; border: none; outline: 1px solid red; outline-style: dotted; padding: 4px 8px; margin:1px 2px; text-align: left; width:100%; border-radius: 3px; line-height: 1.4em;} .es_input_left { outline: none; border: none; border-left: 1px solid #cccccc; padding: 4px 8px; margin:2px 2px; text-align: left; width:100%; border-radius: 3px; line-height: 1.4em;} .es_input { outline: none; border: 1px solid #cccccc; padding: 4px 8px; margin:2px 2px; text-align: left; width:100%; border-radius: 3px; line-height: 1.4em;} .es_input_key { outline: none; border: 2px solid #e7e4e4!important; padding: 4px 8px; margin:2px 2px; text-align: left; width:100%; border-radius: 4px; line-height: 1.4em;} .es_input_nox { outline: none; border: 1px solid #cccccc; padding: 5px 8px; margin:3px 2px; text-align: left; width:100%; border-radius: 3px; line-height: 1.4em;} .es_input_gray_lg { width:100%; padding: 10px 14px; font-size:14px; background-color: #f0f0f0;outline:none;border:none;border:1px solid #dadada; line-height: 1.4em;} /*.es_textarea { width:100%; padding: 10px 14px; background-color: #ffffff;outline:none;border:none;border:1px solid #dadada; min-height:200px; resize:vertical;}*/ .es_text { padding:6px 6px 0px 6px; text-align: left; font-weight: 300; color:#666; width:150px;} .es_form { display: table; width: 100%; } .es_form_row { display: table-row; } .es_form_cell { display: table-cell; } .es_textarea { width: 100%; min-height: 100px; padding: 20px; box-sizing: border-box; outline:none;border:none; border: solid 1px #aaa; border-radius: 5px; font-size: 12px; resize:vertical;} .es_textarea_gray_lg { width: 100%; padding: 10px 14px; font-size:14px; background-color: #f0f0f0;outline:none;border:none;border:1px solid #dadada; min-height:100px; resize:vertical;} .es_textarea_h100 { width: 100%; min-height: 100px; padding: 20px; box-sizing: border-box; outline:none; border: solid 1px #ccc; border-radius: 5px; font-size: 12px; resize:vertical;} .es_textarea_h200 { width: 100%; min-height: 200px; padding: 20px; box-sizing: border-box; outline:none; border: solid 1px #ccc; border-radius: 5px; font-size: 12px; resize:vertical;} .es_textarea_h300 { width: 100%; min-height: 300px; padding: 20px; box-sizing: border-box; outline:none; border: solid 1px #ccc; border-radius: 5px; font-size: 12px; resize:vertical;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* es_tab_wrapper 탭구성 TABS */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_tab_wrapper { max-width: 100%; margin: 3px; padding:0px; } .es_tab_grid { max-width: 100%; display: grid; position: relative; } [role="tablist"] { max-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } [role="tabpanel"] { max-width: 100%; background: rgba(255,255,255,0.05); padding: 2rem 2rem 4rem 2rem; min-height: 40vh; color: #454746; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; overflow-x: scroll; } .es_tab_button { font-weight: 600; font-size: 14px; letter-spacing: 0px; padding: 10px 5px; background: transparent; color: #3F1D35; border: 0; border-radius: 5px 5px 0 0; border-bottom: 1px solid grey; cursor: pointer; margin: 0; } .es_tab_button[aria-selected="true"] { background: rgba(255,255,255, 0.03); color:#663399; border-top: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey; border-bottom: 0; outline: 0; } .es_tab_button[aria-selected="false"]:hover { /*font-size: 15px;*/ /*color:#663399;*/ } .es_tab_button:focus { outline: 0; background: rgba(255,255,255,0.06); } .es_tab_button::-moz-focus-inner { border:0; background: rgba(255,255,255,0.06); } @media (max-width: 600px) { .es_tab_button { border-radius: 10px 10px 0px 0px; border: 0; margin-top:5px; font-weight: 700; font-size: 12px; } .es_tab_button[aria-selected="true"] { border: 1px solid grey; border-bottom: none; } .es_tab_button[aria-selected="false"] { border-bottom: 1px solid #bbb; } [role="tablist"] { grid-template-columns: repeat(4, minmax(95px, 1fr)); } [role="tabpanel"] { margin-top: 0px; padding:15px 15px; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; overflow-x: scroll;} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 탭구성 TABS */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ #tab_wrapper { background-color: #eeeeee; transition-duration: 1.2s; borde:solid 2px #4876EF;} #tab_wrapper .es_tabs > li { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; min-width: 120px; width: 25%; font-weight:bold; font-size:14px;} #tab_wrapper ul.es_tabs { margin: 0; margin-top: 5px; padding: 0; float: left; list-style: none; height: 30px; /*--Set height of es_tabs--*/ border-left: 1px solid #999; border-bottom: 1px solid #999; width: 99%; } #tab_wrapper ul.es_tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } #tab_wrapper ul.es_tabs li a { text-decoration: none; color: #000; font-size:14px; display: block; padding: 0 5px; /*--Gives the bevel look with a 1px white border inside the list item--*/ border: 1px solid #fff; outline: none; } #tab_wrapper ul.es_tabs li.active, ul.es_tabs li.active a:hover { background: transparent; border-bottom: 1px solid #fff; } #tab_wrapper .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 99%; background: transparent; z-index: -9; margin:0px; } #tab_wrapper .tab_content { padding: 5px 5px!important; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 아코디온 ACCORDION */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_accordion_container { width: 100%; margin: 0px auto;} .es_accordion_container button.es_accordion { width: 100%; background-color: #fcfcfc; transition: background-color 0.3s linear; border: 1px solid #aaaaaa; outline: none;text-align: left; padding: 14px 20px; font-size: 13px;color: #999; font-weight:600; cursor: pointer; margin: 2px;} .es_accordion_container button.es_accordion:after { font-family:"Font Awesome 5 Pro"; content: "\f107"; font-size: 12px;float: right;} .es_accordion_container button.es_accordion.is-open:after { font-family: "Font Awesome 5 Pro"; content: "\f106";} .es_accordion_container button.es_accordion:hover, button.es_accordion.is-open {background-color: #ddd; color: #333} .es_accordion_container .es_accordion_content { background-color: white;border-left: 0px solid whitesmoke;border-right: 0px solid whitesmoke;padding: 0px 0px;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-in-out;} .es_accordion_container .es_accordion_content > div { padding:20px 2px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 검색바 Search */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* content: "📅"; position: absolute; bottom: 20%; left: -10px; margin-left: -5px; border-width: 10px; border: 1px; border-style: solid; border-color: transparent #FFF transparent transparent; } { z-index: 1; display: block; font-size:12px; color:#111; background: none; background: url('/resources/images/calendar.png') no-repeat; background-size: 33%; !*content:'📅'; *! width: 20px; height: 25px; position: absolute; top:3px; right: 27px; } */ /*background: white url('/resources/images/calendar.png') right no-repeat;*/ /*------------------------- 각종검색입력칸 ---------------*/ /* .es_search_input { position: relative; width: 50px; height:50px; border-radius:50%; padding:20px; transition-duration: 500ms; cursor: pointer; font-family: "Malgun Gothic", "맑은 고딕"; font-size: 14px; border: 0px solid #999; overflow: hidden; background-image: url("${pageContext.request.contextPath}/resources/icon/icon_search.svg"); background-repeat: no-repeat; background-size: 30px; background-position: 45% 50%; } .es_search_input:focus { width:300px; cursor: text; border-radius:25px; padding-left: 40px; color: #111; outline: none; background-color: transparent; border: 1px solid #aaa; background-image: url("${pageContext.request.contextPath}/resources/icon/icon_search.svg") no-repaet; background-size: 22px; background-position: 10px 50%; }*/ /*----------------- 검색입력칸 --------------*/ .es_search { width: 100%; position: relative; display: flex; margin:5px; } .es_search > .es_search_text { width: 100%; border: 2px solid #999; border-right: none; padding: 5px 15px; height: 40px; border-radius-left-top: 25px!important; outline: none; color: #333;} .es_search > .es_search_text:focus { color: #333; } .es_search > .es_search_button { width: 100px; height: 40px; border: 1px solid #483698;background: #483698;text-align: center;color: #fff;border-radius: 0 15px 15px 0;cursor: pointer;font-size: 14px;} /*----------------- 검색입력칸 --------------*/ .es_search_simple { width: 250px; position: relative; top:5px; display: inline; margin:5px; } .es_search_simple > .es_search_text { width: 100%; border: 0px solid #aaa; background-color: #f0f0f0; padding: 5px 15px; height: 40px; border-radius: 25px!important; outline: none; color: #333;} .es_search_simple > .es_search_text:focus { color: #333; } .es_search_simple > .es_search_button { width: 50px; height: 30px; text-align: center; color: #333; background-color: transparent; border: none; border-radius: 25px; cursor: pointer;font-size: 14px; position: relative; top:-34px; left: 0px;} @media (max-width: 700px){ .es_search_simple { width: 100%; position: relative; top:5px; display: inline-flex; margin:5px; } .es_search_simple > .es_search_button { width: 50px; height: 30px; text-align: center; color: #333; background-color: transparent; border: none; border-radius: 25px; cursor: pointer;font-size: 14px; position: relative; top:8px; left: -44px;} } .es_search_input { min-width:300px; max-width: 450px; height:40px; border-radius:25px; border: 1px solid #cccccc; outline: none; padding: 4px 4px 4px 40px; margin: 3px; cursor: text; font-family: "Malgun Gothic", "맑은 고딕"; font-size: 13px; overflow: hidden; background-image: url("/resources/icon/icon_search.svg"); background-repeat: no-repeat; background-size: 20px; background-position: 10px 50%; } /*------------------------- 화면상단 검색조건 세션바 --------------*/ .es_searchbar { float:left;width:100%;padding: 6px 10px 6px 10px; margin-top: 0px;display:flex;flex-direction:row;justify-content:flex-end;align-items:center; border-radius: 10px; background-color: var(--erpBgColor); } .es_searchbar .es_search_option_wrap { flex:1; overflow:hidden;display:flex} .es_searchbar .es_search_option_wrap .es_search_desc { min-width:70px; padding: 15px 5px 5px 5px; float:left; /*color: #46301B;*/} .es_searchbar .es_search_option_wrap .es_search_option { padding: 5px 10px; float:right; min-height:40px;} .es_searchbar .es_search_option_wrap .es_search_option > div { display:inline-flex;flex-direction:row;padding:3px 0px;vertical-align:top;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sl { text-align:right;padding-right:3px;padding-top:12px; min-width: 70px; color: #333; font-weight: 600; } .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc { padding:7px 5px 0px 5px;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_input { min-width: 100px; margin:0; margin-bottom:3px; border: none; border-radius: 15px; padding:6px 14px;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_date { min-width: 110px; margin:0; margin-bottom:3px; border: none; border-radius: 15px; padding:6px 14px 6px 4px; text-align: left!important;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_date_div { min-width: 110px; position: relative; display: inline-block;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_date_div input { width: 90px; margin:0; margin-bottom:3px; border: none; border-radius: 15px; padding:6px 14px; text-align: left!important;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_date_div i { color: #333; filter: brightness(0) saturate(100%); position: absolute; right: 5px; padding: 7px 9px; pointer-events: none;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc button { padding:2px 3px; border-radius:5px; border:none; color: #333!important; background-color: #f0f0f0; } .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc select { margin:0px; padding:6px 14px; border:none; border-radius: 15px; min-width: 100px; outline: none;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_radio > label > input + span { border: none; padding: 6px 10px;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_radio_zip > label > input + span { border: none; padding: 6px 10px;} .es_searchbar .es_search_btn_wrap { /*align-self:flex-start; text-align:right; */ vertical-align: center; padding-top:0px;} @media (max-width: 700px){ .es_searchbar { flex-direction:column; padding: 2px 15px; align-items:flex-start; border-radius: 8px; } .es_searchbar .es_search_option_wrap { width:100%;flex:none} .es_searchbar .es_search_option_wrap { display: block; } /* 모바일에서지정 중요 */ .es_searchbar .es_search_option_wrap .es_search_desc { width:100%; float:none; color: #46301B; padding: 5px 10px 0px;} .es_searchbar .es_search_option_wrap .es_search_option{ width:100%;padding:0 0 15px; float:none; display: none; /*모바일에서 최초숨김*/ } .es_searchbar .es_search_option_wrap .es_search_option > div { display: inline-block;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sl { vertical-align: top; font-weight:bold; text-align:left; padding-left:5px; padding-top:10px; min-width: 50px; display: inline-block;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc { display: inline-block;} .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc button { margin:2px 0px; padding:4px 2px; border-radius:5px; border:none; color: #333!important; background-color: #f0f0f0; } /* .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .es_input{width: 120px !important} */ .es_searchbar .es_search_option_wrap .es_search_option > div > .es_sc .easi-popup{width:100% !important} .es_searchbar .es_search_btn_wrap { text-align:right; width:100%; padding-bottom:10px;} .es_radio > label {text-align:center;margin:0;padding:0;margin-left:3px;font-size:12px;padding-bottom:3px} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 툴팁 Tooltip */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_tooltip { position: relative; } .es_tooltip > .tooltiptext { visibility: hidden; min-width: 300px; max-width:500px; background-color: #FFF; color: #111111; text-align: left; border: 1px dashed #333; border-radius: 15px; padding: 8px 15px 8px 15px; position: absolute; z-index: 1; bottom: -50%; left: 10%; margin-left: 50px; opacity: 0; transition: opacity 0.3s; } /*.es_tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 20%; left: -10px; margin-left: -5px; border-width: 10px; border: 1px; border-style: solid; border-color: transparent #FFF transparent transparent; }*/ .es_tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .es_tooltip_top { position: relative; } .es_tooltip_top > .tooltiptext { visibility: hidden; min-width: 300px; max-width:400px; background-color: #FFF7EE; color: #111111; text-align: left; border: 0px solid #aaa; font-size: 13px; line-height: 1.4em; border-radius: 15px; padding: 15px 20px; position: absolute; z-index: 1; bottom: 110%; left: -50px; margin-left: 50px; opacity: 0; transition: opacity 0.3s; } /*.es_tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 20%; left: -10px; margin-left: -5px; border-width: 10px; border: 1px; border-style: solid; border-color: transparent #FFF transparent transparent; }*/ .es_tooltip_top:hover .tooltiptext { visibility: visible; opacity: 1; z-index: 900;} @media (max-width: 700px) { .es_tooltip_top .tooltiptext { visibility: hidden; min-width: 200px; max-width:300px; } } .es_tooltip_left { position: relative; } .es_tooltip_left > .tooltiptext { visibility: hidden; min-width: 300px; max-width:400px; background-color: #FFF7EE; color: #111111; text-align: left; border: 0px solid #aaa; font-size: 12px; line-height: 1.4em; border-radius: 15px; padding: 15px 20px; position: absolute; top: 0%; right: 100%; margin-right: 10px; opacity: 0; transition: opacity 0.3s; } .es_tooltip_left:hover .tooltiptext { visibility: visible; opacity: 1; } @media (max-width: 700px) { .es_tooltip_left > .tooltiptext { visibility: hidden; min-width: 300px; max-width:400px; } } .es_tooltip_htc { position: relative; } .es_tooltip_htc > .tooltiptext { visibility: hidden; min-width: 300px; max-width:400px; background-color: #ffffe6; color: #111111; text-align: left; border: 0px solid #aaa; font-size: 13px; line-height: 1.4em; border: 1px solid #ccc; border-radius: 15px; padding: 15px 20px; position: absolute; z-index: 1; bottom: 110%; right: -40px; margin-right: 50px; opacity: 0; transition: opacity 0.3s; } .es_tooltip_htc:hover .tooltiptext { visibility: visible; opacity: 1; } @media (max-width: 700px) { .es_tooltip_htc > .tooltiptext { visibility: hidden; min-width: 200px; max-width:300px; } } /*.es_tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 20%; left: -10px; margin-left: -5px; border-width: 10px; border: 1px; border-style: solid; border-color: transparent #FFF transparent transparent; }*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 배경색지정 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_bgg { background-color: #444444!important; } .es_white { background-color: #ffffff; color: #111111; } .es_black { background-color: #000000; color: #FFFFFF; } .es_green { background-color: #00b359; color: #FFFFFF; } .es_green_dark { background-color: #0AA23D; color: #FFFFFF; } .es_gray,.es_gray_dark { background-color: #999999; color: #FFFFFF; } .es_gray_777777 { background-color: #777777; color: #FFFFFF; } .es_gray_888888 { background-color: #888; color: #FFFFFF; } .es_gray_999999 { background-color: #999; color: #FFFFFF; } .es_gray_aaaaaa { background-color: #aaa; color: #FFFFFF; } .es_gray_bbbbbb { background-color: #bbb; color: #FFFFFF; } .es_gray_eeeeee { background-color: #eeeeee; color: #111111; } .es_gray_dddddd { background-color: #dddddd; color: #111111; } .es_gray_f0f0f0 { background-color: #f0f0f0; color: #111111; } .es_gray_f6f6f6 { background-color: #f6f6f6; color: #111111; } .es_gray_f9f9f9 { background-color: #f9f9f9; color: #111111; } .es_gray_light { background-color: #fcfcfc; color: #111111; } .es_red { background-color: orangered; color: #FFFFFF; padding: 1px 10px 2px; border-radius: 10px;} .es_blue { background-color: #0080ff; color: #FFFFFF; } .es_purple { background-color: #483698; color: #FFFFFF; } .es_sky { background-color: #3a86ff; color: #FFFFFF; } .es_mint { background-color: #1abc9c; color: #FFFFFF; } .es_yellow { background-color: #ffd900; color: #FFFFFF; } .es_yellow_dark { background-color: #e6b800; color: #FFFFFF; } .es_yellow_light { background-color: #ffffe6; color: #111111; } .es_bg_red { background-color: #ffe6e6;} .es_bg_white { background-color: #ffffff;} .es_bg_gray { background-color: #dddddd;} .es_bg_yellow { background-color: #ffd900;} .es_bg_green { background-color: #ebfaeb} .es_bg_blue { background-color: #e6f0ff} .es_bg_sky { background-color: #e6faff} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 안쪽여백패딩 padding */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_padding { padding:10px;} .es_padding_0 { padding:0px;} .es_padding_0_5 { padding:0px 5px;} .es_padding_0_10 { padding:0px 10px;} .es_padding_0_5_0_10 { padding:0px 5px 0px 10px;} es_padding_0_10_0_5 { padding:0px 10px 0px 5px;} .es_padding_0_20 { padding:0px 20px;} .es_padding_0_30 { padding:0px 30px;} .es_padding_0_40 { padding:0px 40px;} .es_padding_0_50 { padding:0px 50px;} .es_padding_0_60 { padding:0px 60px;} .es_padding_1 { padding:1px;} .es_padding_4 {padding:4px;} .es_padding_3 { padding:3px;} .es_padding_3_0 { padding:3px 0px;} .es_padding_3_10 { padding:3px 10px;} .es_padding_3_20 { padding:3px 20px;} .es_padding_5 { padding:5px;} .es_padding_5_0 { padding:5px 0px;} .es_padding_5_10 { padding:5px 10px;} .es_padding_8_5 { padding:8px 5px;} .es_padding_5_20 { padding:5px 20px;} .es_padding_5_30 { padding:5px 30px;} .es_padding_5_40 { padding:5px 40px;} .es_padding_10 { padding:10px;} .es_padding_10_0 { padding:10px 0px;} .es_padding_10_20 { padding:10px 20px;} .es_padding_10_25 { padding:10px 25px;} .es_padding_10_30 { padding:10px 30px;} .es_padding_10_35 { padding:10px 35px;} .es_padding_10_40 { padding:10px 40px;} .es_padding_10_50 { padding:10px 50px;} .es_padding_10_5 { padding: 10px 5px;} .es_padding_10_10 { padding:10px 10px;} .es_padding_12 { padding:12px;} .es_padding_12_20 { padding:12px 20px;} .es_padding_12_25 { padding:12px 25px;} .es_padding_14 { padding:14px;} .es_padding_15_30 { padding:15px 30px;} .es_padding_15_10 { padding:15px 10px;} .es_padding_15_0 { padding:15px 0px;} .es_padding_15_5 { padding: 15px 5px;} .es_padding_15 { padding:15px;} .es_padding_16 { padding:16px;} .es_padding_18 { padding:18px;} .es_padding_20 { padding:20px;} .es_padding_20_0 { padding:20px 0px;} .es_padding_20_5 { padding:20px 5px;} .es_padding_20_10 { padding:20px 10px;} .es_padding_20_30 { padding:20px 30px;} .es_padding_20_40 { padding:20px 40px;} .es_padding_25_40 { padding:25px 40px;} .es_padding_25_10 { padding:25px 10px;} .es_padding_25_20 { padding:25px 20px;} .es_padding_25 { padding:25px 25px;} .es_padding_30 { padding:30px;} .es_padding_30_0 { padding:30px 0px;} .es_padding_30_10 { padding:30px 10px;} .es_padding_30_20 { padding:30px 20px;} .es_padding_30_40 { padding:30px 40px;} .es_padding_30_50 { padding:30px 50px;} .es_padding_35_10 { padding:35px 10px;} .es_padding_40 { padding:40px;} .es_padding_40_0 { padding:40px 0px;} .es_padding_40_10 { padding:40px 10px;} .es_padding_50 { padding:50px;} .es_padding_50_0 { padding:50px 0px;} .es_padding_50_10 { padding:50px 10px;} .es_padding_50_20 { padding:50px 20px;} .es_padding_60 { padding:60px;} .es_padding_60_0 { padding:60px 0px;} .es_padding_70 { padding:70px;} .es_padding_70_0 { padding:70px 0px;} .es_padding_80 { padding:80px;} .es_padding_90 { padding:90px;} .es_padding_100 { padding:100px;} .es_padding_200 { padding:200px;} .es_padding_top { padding-top:10px;} .es_padding_top_1 { padding-top:1px;} .es_padding_top_3 { padding-top:3px;} .es_padding_top_5 { padding-top:5px;} .es_padding_top_10 { padding-top:10px;} .es_padding_top_20 { padding-top:20px;} .es_padding_top_30 { padding-top:30px;} .es_padding_top_40 { padding-top:40px;} .es_padding_top_50 { padding-top:50px;} .es_padding_top_60 { padding-top:60px;} .es_padding_top_70 { padding-top:70px;} .es_padding_top_80 { padding-top:80px;} .es_padding_top_90 { padding-top:90px;} .es_padding_top_100 { padding-top:100px;} .es_padding_top_110 { padding-top:110px;} .es_padding_left { padding-left:10px;} .es_padding_left_1 { padding-left:1px;} .es_padding_left_3 { padding-left:3px;} .es_padding_left_5 { padding-left:5px;} .es_padding_left_10 { padding-left:10px;} .es_padding_left_15 { padding-left:15px;} .es_padding_left_20 { padding-left:20px;} .es_padding_left_30 { padding-left:30px;} .es_padding_left_40 { padding-left:40px;} .es_padding_left_50 { padding-left:50px;} .es_padding_left_60 { padding-left:60px;} .es_padding_left_70 { padding-left:70px;} .es_padding_left_80 { padding-left:80px;} .es_padding_left_90 { padding-left:90px;} .es_padding_left_100 { padding-left:100px;} .es_padding_left_110 { padding-left:110px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 마진 바깥여백 es_margin */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_margin { margin:2px 10px;} .es_margin_1 { margin:1px;} .es_margin_0 { margin:0px;} .es_margin_2 { margin:2px;} .es_margin_21 { margin:2px 1px ;} .es_margin_3 { margin:3px;} .es_margin_5 { margin:5px;} .es_margin_5_10 { margin:5px 10px;} .es_margin_5_0 { margin:5px 0px;} .es_margin_10 { margin:10px;} .es_margin_10_0 { margin:10px 0px;} .es_margin_12 { margin:12px;} .es_margin_14 { margin:14px;} .es_margin_20 { margin:20px;} .es_margin_20_0 { margin:20px 0px;} .es_margin_30 { margin:30px;} .es_margin_30_0 { margin:30px 0px;} .es_margin_40 { margin:40px;} .es_margin_40_0 { margin:40px 0px;} .es_margin_50 { margin:50px;} .es_margin_50_0 { margin:50px 0px;} .es_margin_60 { margin:60px;} .es_margin_top_10 { margin-top:10px;} .es_margin_top_20 { margin-top:20px;} .es_margin_top_30 { margin-top:30px;} .es_margin_top_40 { margin-top:40px;} .es_margin_top_50 { margin-top:50px;} .es_margin_top_60 { margin-top:60px;} .es_margin_top_70 { margin-top:70px;} .es_margin_top_80 { margin-top:80px;} .es_margin_top_90 { margin-top:90px;} .es_margin_top_100 { margin-top:100px;} .es_margin_left_10 { margin-left:10px;} .es_margin_left_20 { margin-left:20px;} .es_margin_left_30 { margin-left:30px;} .es_margin_left_40 { margin-left:40px;} .es_margin_left_50 { margin-left:50px;} .es_margin_left_60 { margin-left:60px;} .es_margin_left_70 { margin-left:70px;} .es_margin_left_80 { margin-left:80px;} .es_margin_left_90 { margin-left:90px;} .es_margin_left_100 { margin-left:100px;} .es_margin_right_10 { margin-right:10px;} .es_margin_right_20 { margin-right:20px;} .es_margin_right_30 { margin-right:30px;} .es_margin_right_40 { margin-right:40px;} .es_margin_right_50 { margin-right:50px;} .es_margin_right_60 { margin-right:60px;} .es_margin_right_70 { margin-right:70px;} .es_margin_right_80 { margin-right:80px;} .es_margin_right_90 { margin-right:90px;} .es_margin_right_100 { margin-right:100px;} /*.es_margin_bottom8 { margin-bottom:8px;} .es_margin_bottom10 { margin-bottom:10px;} .es_margin_bottom12 { margin-bottom:12px;} .es_margin_bottom14 { margin-bottom:14px;}*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 테두리선 Border */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_border_b111 { border-bottom:1px solid #111; } .es_border_b222 { border-bottom:1px solid #222; } .es_border_b333 { border-bottom:1px solid #333; } .es_border_b444 { border-bottom:1px solid #444; } .es_border_b555 { border-bottom:1px solid #555; } .es_border_b666 { border-bottom:1px solid #666; } .es_border_b777 { border-bottom:1px solid #777; } .es_border_b888 { border-bottom:1px solid #888; } .es_border_b999 { border-bottom:1px solid #999; } .es_border_baaa { border-bottom:1px solid #aaa; } .es_border_bbbb { border-bottom:1px solid #bbb; } .es_border_bccc { border-bottom:1px solid #ccc; } .es_border_bddd { border-bottom:1px solid #ddd; } .es_border_beee { border-bottom:1px solid #eee; } .es_border_t111 { border-top:1px solid #111; } .es_border_t222 { border-top:1px solid #222; } .es_border_t333 { border-top:1px solid #333; } .es_border_t444 { border-top:1px solid #444; } .es_border_t555 { border-top:1px solid #555; } .es_border_t666 { border-top:1px solid #666; } .es_border_t777 { border-top:1px solid #777; } .es_border_t888 { border-top:1px solid #888; } .es_border_t999 { border-top:1px solid #999; } .es_border_taaa { border-top:1px solid #aaa; } .es_border_tbbb { border-top:1px solid #bbb; } .es_border_tccc { border-top:1px solid #ccc; } .es_border_tddd { border-top:1px solid #ddd; } .es_border_teee { border-top:1px solid #eee; } .es_border, .es_border_solid { border:1px solid #999999; } .es_border_dashed { border:1px dashed #999999; } .es_border_dashed_eee { border:1px dashed #eeeeee; } .es_border_dashed_ccc { border:1px dashed #cccccc; } .es_border_dashed_aaa { border:1px dashed #aaaaaa; } .es_border_grey, es_border_gray { border:1px solid #eeeeee!important} .es_border_darkgray { border:1px solid #ddd!important} .es_border_graybold { border:5px solid #dddddd} .es_border_333 { border:1px solid #333;} .es_border_999 { border:1px solid #999;} .es_border_aaa { border:1px solid #aaa;} .es_border_ccc { border:1px solid #ccc;} .es_border_eee { border:1px solid #eee;} .es_border_red { border:1px solid #b32400!important} .es_border_top { border-top: 1px solid #aaa!important} .es_border_top_eee { border-top: 1px solid #eee!important} .es_border_top_999 { border-top: 1px solid #999!important} .es_border_top_555 { border-top: 1px solid #555!important} .es_border_top_444 { border-top: 1px solid #444!important} .es_border_top_dashed, .es_border_top_dashed_eee { border-top:1px dashed #ccc; } .es_border_top_dashed_ccc{ border-top:1px dashed #cccccc; } .es_border_top_dashed_999{ border-top:1px dashed #999999; } .es_border_top_dashed_444{ border-top:1px dashed #444444; } .es_border_bottom { border-bottom: 1px solid #aaa!important} .es_border_bottom2 { border-bottom: 2px solid #aaa!important} .es_border_bottom3 { border-bottom: 3px solid #aaa!important} .es_border_left { border-left: 1px solid #aaa!important} .es_border_right { border-right: 1px solid #aaa!important} .es_bottombar { border-bottom: 1px solid #ccc!important} .es_bottombar_blue { border-bottom: 2px solid #0033cc!important; } .es_topbar { border-top: 1px solid #ccc!important} .es_topbar_eee { border-top: 1px solid #eee!important} .es_topbar_blue { border-top: 2px solid #0033cc!important; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모서리라운딩 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_radius,.es_radius_5 { border-radius:5px;} .es_radius_10 { border-radius:10px;} .es_radius_15 { border-radius:15px;} .es_radius_20 { border-radius:20px;} .es_radius_25 { border-radius:25px;} .es_radius_30 { border-radius:30px;} .es_radius_35 { border-radius:35px;} .es_radius_40 { border-radius:40px;} .es_radius_45 { border-radius:45px;} .es_radius_50 { border-radius:50px;} .es_radius_55 { border-radius:55px;} .es_radius_60 { border-radius:60px;} .es_radius_50p { border-radius:50%;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 사각형 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_rect_w60rds { width:60px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_h60rds { max-height:60px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_w80rds { width:80px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_h80rds { max-height:80px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_w100rds { width:100px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_h100rds { max-height:100px;border-radius:5px;display: inline-block; text-align: center; } .es_rect_w120rds { width:120px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_h120rds { max-height:120px;border-radius:5px;display: inline-block; text-align: center; } .es_rect_150rds { width:150px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_200rds { width:200px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_250rds { width:250px; border-radius:5px;display: inline-block; text-align: center; } .es_rect_300rds { width:300px; border-radius:5px;display: inline-block; text-align: center; } .es_nemo_100 { width:100px; height:100px; } .es_nemo_200 { width:200px; height:200px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 원형모양 Circle */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_circle { border-radius:50%; display: inline-block; } .es_circle_5 { width:5px; height:5px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_5rds { width:5px; height:5px; border-radius:3px;display: inline-block; text-align: center; } .es_circle_10 { width:10px; height:10px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_10rds { width:10px; height:10px; border-radius:10px;display: inline-block; text-align: center; } .es_circle_15 { width:15px; height:15px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_15rds { width:15px; height:15px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_20 { width:20px; height:20px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_20 { width:20px; height:20px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_20_gray { width:20px; height:20px; border-radius:15px;display: inline-block; text-align: center; background-color:#eeeeee; padding:3px 4px;} .es_circle_25 { width:25px; height:25px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_25rds { width:25px; height:25px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_30 { width:30px; height:30px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_30rds { width:30px; height:30px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_35 { width:35px; height:35px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_40 { width:40px; height:40px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_40rds { width:40px; height:40px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_50 { width:50px; height:50px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_50rds { width:50px; height:50px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_60 { width:60px; height:60px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_60rds { width:60px; height:60px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_70 { width:70px; height:70px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_70rds { width:70px; height:70px; border-radius:15px;display: inline-block; text-align: center; } .es_circle_80 { width:80px; height:80px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_80rds { width:80px; height:80px; border-radius:30px;display: inline-block; text-align: center; } .es_circle_90 { width:90px; height:90px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_90rds { width:90px; height:90px; border-radius:30px;display: inline-block; text-align: center; } .es_circle_100 { width:100px; height:100px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_100rds { width:100px; height:100px; border-radius:10px;display: inline-block; text-align: center; } .es_circle_130 { width:130px; height:130px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_130rds { width:130px; height:130px; border-radius:5px;display: inline-block; text-align: center; } .es_circle_150 { width:150px; height:150px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_200 { width:200px; height:200px; border-radius:50%; display: inline-block; text-align: center; } .es_circle_200rds { width:200px; height:200px; border-radius:5px; display: inline-block; text-align: center; } .es_circle_green { height: 90px; width: 90px; background-color:#00994d; color: white; border-radius: 50%; display: inline-block; text-align: center; vertical-align:middle!important;} .es_circle_green_40 { height: 40px; width: 40px; background-color:#00994d; color: white; border-radius: 50%; display: inline-block; text-align: center; vertical-align:middle!important;} .es_circle_gray { height: 90px; width: 90px; background-color:#eeeeee; color: black; border-radius: 50%; display: inline-block; text-align: center; vertical-align:middle;} .es_circle_yellow { height: 90px; width: 90px; background-color:#e7df0c; color: white; border-radius: 50%; display: inline-block; text-align: center; vertical-align:middle;} .es_circle_blue { height: 90px; width: 90px; background-color:#343F5D; color: white; border-radius: 50%; display: inline-block; text-align: center; vertical-align:middle;} .es_circle_new { display: inline-block; width:5px; height: 5px; border-radius:50%; background-color: orangered; position: relative; top: -9px; left:3px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 콘텐츠 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_content { max-width:100%; margin:auto;} .es_content400 { max-width:400px; margin:auto;} .es_content500 { max-width:500px;margin:auto;} .es_content600 { max-width:600px;margin:auto;} .es_content700 { max-width:700px;margin:auto;} .es_content800 { max-width:800px;margin:auto;} .es_content900 { max-width:900px;margin:auto;} .es_content1000 { max-width:1000px;margin:auto;} .es_content1100 { max-width:1100px;margin:auto} .es_content1200 { max-width:1200px;margin:auto} .es_content1300 { max-width:1300px;margin:auto} .es_content1400 { max-width:1400px;margin:auto} .es_content1500 { max-width:1500px;margin:auto} .es_content1600 { max-width:1600px;margin:auto} .es_content1800 { max-width:1800px;margin:auto} .es_content1900 { max-width:1900px;margin:auto} .es_content2000 { max-width:2000px;margin:auto} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모든화면에 외곽테두기 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_outline { border: 1px solid #aaa; padding: 10px; border-radius: 6px;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모든화면에 그리드 열칸그리기 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_grid_col1 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} .es_grid_col2 { width:100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;} .es_grid_col3 { width:100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px;} .es_grid_col3_633 { width:100%; display: grid; grid-template-columns: 50% 25% 25%; gap: 5px;} .es_grid_col4 { width:100%; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px;} .es_grid_col1 > div, .es_grid_col2 > div, .es_grid_col3 > div, .es_grid_col3_633 > div, .es_grid_col4 > div { width:100%; padding:10px; border: 1px solid #d8dfe8; box-shadow: 0 2px 4px 0 rgba(130, 135, 147, 0.12); } @media (max-width: 1700px){ .es_grid_col1 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} .es_grid_col2 { width:100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;} .es_grid_col3 { width:100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;} .es_grid_col3_633 { width:100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;} .es_grid_col4 { width:100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;} } @media (max-width: 900px){ .es_grid_col1 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} .es_grid_col2 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} .es_grid_col3 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} .es_grid_col3_633 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} .es_grid_col4 { width:100%; display: grid; grid-template-columns: repeat(1,1fr); gap: 5px;} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 모든화면에 그리드 바로위 소제목칸 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_grid_heading { display: grid; grid-template-columns: 40% 60% ; grid-gap: 0;} .es_grid_heading > div .subTitle { font-size: 14px; font-weight: 800; line-height: 1.8em!important; } .es_grid_heading > div .gridCnt { font-size: 14px; font-weight: 600; color: orangered; position: relative; left: 10px;} .es_grid_heading > div:first-child { margin-top: 10px; font-size: 14px; font-weight: 600; } .es_grid_heading > div:last-child { margin-top: 10px; text-align: right; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 화면레이이아웃그리드방식 es_grid_container */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_grid_container_50 { grid-template-columns: 50% 50% ; display: grid; justify-items: auto; align-items: start; grid-gap: 4px 10px;} .es_grid_container { padding: 2px 0px; } .es_grid_container > .es_grid_header { font-weight: 700; font-size: 12px; color:#444; padding:0px 0px; border-bottom: 1px solid #999; margin-bottom: 4px;} .es_grid_container > .es_grid_body { width:100%; height: auto; padding:4px; display: grid; justify-items: auto; align-items: start; grid-gap: 4px 10px; grid-template-columns: 80px auto 80px auto; /* grid-template-columns: repeat(2, 10% 40%); grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: 200px 1fr; grid-template-columns: 100px 200px auto; grid-template-rows: 20px; grid-template-rows: 1fr 1fr 1fr; grid-template-rows: repeat(3, 1fr); grid-template-rows: 200px 1fr; grid-template-rows: 100px 200px auto; grid-auto-rows: minmax(120px, auto); */ } .es_grid_container > .inputForm > .label { margin-top: 4px;} .es_grid_container > .detailForm > .label { margin-top: 0px;} .es_grid_container > .es_grid_body > .label { color:#666; text-align: right; padding-top: 2px; font-size: 11px;} .es_grid_container > .es_grid_body > .desc { color:#333;} .es_grid_container > .es_grid_body > .three { grid-column: span 3; } .es_grid_container > .es_grid_body > .four { grid-column: span 4; } @media (max-width: 400px){ .es_grid_container_50 { grid-template-columns: 100%;} .es_grid_container > .es_grid_header { padding: 2px 0px;} .es_grid_container > .es_grid_body { grid-template-columns: 80px auto;} .es_grid_container > .es_grid_body > .label { color:#666; text-align: left;} .es_grid_container > .es_grid_body > .three { grid-column: span 4; } .es_grid_container > .es_grid_body > .four { grid-column: span 4; } .es_grid_container > .es_grid_body > .desc { word-break: break-word; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 화면레이이아웃 es_flex_container */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .es_flex_container { display: flex; flex-wrap: wrap;} .es_flex_container > div.w20 { width: 20%; padding:5px;} .es_flex_container > div.w30 { width: 30%; padding:5px;} .es_flex_container > div.w40 { width: 40%; padding:5px;} .es_flex_container > div.w50 { width: 50%; padding:5px;} .es_flex_container > div.w60 { width: 60%; padding:5px;} .es_flex_container > div.w70 { width: 70%; padding:5px;} .es_flex_container > div.w80 { width: 80%; padding:5px;} .es_flex_container > div.w90 { width: 90%; padding:5px;} .es_flex_container > div.w100{ width: 100%;padding:5px;} .es_flex_container .es_flex_head { font-size:14px; font-weight:700; border-bottom: 1px solid #111; padding:5px 0px; clear: left; } .es_flex_container .es_flex_head > a { font-size:11px; border: 1px solid #aaa; border-radius:10px; padding:2px 10px; margin:5px; float: right; position: relative; top: -6px;} .es_flex_container .es_flex_body { padding: 10px 0px; min-height: auto; } .es_flex_container .es_flex_body > div.es_th { font-family: "맑은 고딕"; font-weight: 500; font-size:11px; color: #666; float: left; text-align: right; padding:2px 7px; min-height:24px; line-height:1.4em; vertical-align: center; } .es_flex_container .es_flex_body > div.es_td { float: left; padding: 3px 2px; min-height:24px; font-weight: 600; vertical-align: center; color: #444;} .es_flex_container .es_flex_body > div.es_td > input { float: left; padding: 4px 8px; vertical-align: center; } .es_flex_container .es_flex_body > div.es_th.w10 { min-width:10%;} .es_flex_container .es_flex_body > div.es_th.w15 { min-width:15%;} .es_flex_container .es_flex_body > div.es_th.w20 { min-width:20%;} .es_flex_container .es_flex_body > div.es_th.w23 { min-width:23%;} .es_flex_container .es_flex_body > div.es_th.w25 { min-width:25%;} .es_flex_container .es_flex_body > div.es_th.w30 { min-width:30%;} .es_flex_container .es_flex_body > div.es_th.w35 { min-width:35%;} .es_flex_container .es_flex_body > div.es_td.w8 { min-width:8%;} .es_flex_container .es_flex_body > div.es_td.w10 { min-width:10%;} .es_flex_container .es_flex_body > div.es_td.w15 { min-width:15%;} .es_flex_container .es_flex_body > div.es_td.w20 { min-width:20%;} .es_flex_container .es_flex_body > div.es_td.w23 { min-width:23.3%;} .es_flex_container .es_flex_body > div.es_td.w25 { min-width:25%;} .es_flex_container .es_flex_body > div.es_td.w30 { min-width:30%;} .es_flex_container .es_flex_body > div.es_td.w35 { min-width:35%;} .es_flex_container .es_flex_body > div.es_td.w40 { min-width:40%;} .es_flex_container .es_flex_body > div.es_td.w45 { min-width:45%;} .es_flex_container .es_flex_body > div.es_td.w50 { min-width:50%;} .es_flex_container .es_flex_body > div.es_td.w55 { min-width:55%;} .es_flex_container .es_flex_body > div.es_td.w56 { min-width:56.5%;} .es_flex_container .es_flex_body > div.es_td.w60 { min-width:60%;} .es_flex_container .es_flex_body > div.es_td.w70 { min-width:70%;} .es_flex_container .es_flex_body > div.es_td.w80 { min-width:80%;} .es_flex_container .es_flex_body > div.es_td.w85 { min-width:83%;} .es_flex_container .es_flex_body > div.es_td.w90 { min-width:90%;} .es_flex_container .es_flex_body > div.es_td.w95 { min-width:95%;} .es_flex_container .es_flex_body > div.es_td.w100 { min-width:100%;} @media ( max-width : 600px ) { .es_flex_container > div.w20 { width: 100%; padding:5px;} .es_flex_container > div.w30 { width: 100%; padding:5px;} .es_flex_container > div.w40 { width: 100%; padding:5px;} .es_flex_container > div.w50 { width: 100%; padding:5px;} .es_flex_container > div.w60 { width: 100%; padding:5px;} .es_flex_container > div.w70 { width: 100%; padding:5px;} .es_flex_container > div.w80 { width: 100%; padding:5px;} .es_flex_container > div.w90 { width: 100%; padding:5px;} .es_flex_container > div.w100{ width: 100%; padding:5px;} .es_flex_container .es_flex_body > div.es_th.w10 { width:30%; font-size:0.9rem; clear: left; } .es_flex_container .es_flex_body > div.es_th.w15 { width:30%; font-size:0.9rem; clear: left; } .es_flex_container .es_flex_body > div.es_th.w30 { width:30%; font-size:0.9rem;clear: left; } .es_flex_container .es_flex_body > div.es_th.w25 { width:30%; font-size:0.9rem;clear: left; } .es_flex_container .es_flex_body > div.es_th.w30 { width:30%; font-size:0.9rem;clear: left; } .es_flex_container .es_flex_body > div.es_th.w35 { width:30%; font-size:0.9rem;clear: left; } .es_flex_container .es_flex_body > div.es_td.w8 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w10 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w15 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w20 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w23 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w25 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w30 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w35 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w40 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w45 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w50 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w55 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w56 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w60 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w70 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w80 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w85 { width:79%;} .es_flex_container .es_flex_body > div.es_td.w90 { width:68%;} .es_flex_container .es_flex_body > div.es_td.w95 { width:69%;} .es_flex_container .es_flex_body > div.es_td.w100 { width:99%;} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 도표 TABLE */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ----------- DIV TABLE CSS 공병기 2021.5.29 ----------------------------------------------------*/ .es_detail_head { padding: 10px 0px; font-weight:bold; font-size:16px; width:100%; color:#3061AE;} .es_detail_th { padding: 0px 2px; font-weight:bold; text-align: left; color:#111111;} /* ----------- DIV TABLE CSS ----------------------------------------------------*/ .es_div_table { display: table; width: 100%;} .es_div_table .es_row { display: table-row;} .es_div_table .es_cell_title { display: table-cell; padding: 10px 0px; font-weight:bold; font-size:16px; width:100%; color:#111111; font-family: "NanumSquare"; border-bottom: 1px solid #ddd;} .es_div_table .es_bar { display: table-cell; padding: 0px 0px; width:100%;} .es_div_table .es_cell_thead { display: table-cell; padding: 2px 10px; font-weight:bold; color: #003cb3; } .es_div_table .es_cell_th { display: table-cell; padding: 1px 2px; font-weight:bold; text-align: left; color:#111111;} .es_div_table .es_cell_td { display: table-cell; padding: 2px 2px; font-weight:normal; min-height:20px; color:#333333;} .es_div_table_home { display: table; width: 100%;} .es_div_table_home .es_row { display: table-row;} .es_div_table_home .es_cell_title { display: table-cell; padding: 10px 10px; font-weight:bold; font-size:20px;} .es_div_table_home .es_cell_thead { display: table-cell; padding: 10px 10px; font-weight:bold; color: #003cb3} .es_div_table_home .es_cell_th { display: table-cell; padding: 10px 20px; font-weight:bold; text-align: left;} .es_div_table_home .es_cell_td { display: table-cell; padding: 10px 10px; min-height:37px;} /* ----------- TABLE es_table_best ---*/ .es_table_best { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_best thead th { vertical-align: middle; text-align: center; padding: 14px 8px; border-top: 1px solid #ccc; background-color: #f6f6f6; } .es_table_best tbody th { vertical-align: middle; text-align: center; padding: 12px 8px; border-left:solid 0px #ddd; border-top:solid 1px #ddd; border-right:solid 0px #ddd; border-bottom:solid 1px #ddd; background-color: #f9f9f9; } .es_table_best td { vertical-align: middle; text-align: left; padding: 6px 2px; border-bottom:solid 1px #ddd;} .es_table_best td:first-child { vertical-align: middle; text-align: left; padding: 6px 2px; border-left:solid 0px #fff;} .es_table_best td:last-child { vertical-align: middle; text-align: left; padding: 6px 2px; border-right:solid 0px #fff;} /* ----------- TABLE 홈페이지용 목록형 ------------*/ .es_table_list { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_list thead th { vertical-align: middle; text-align: center; padding: 14px 12px; border-top:solid 1px #666666; background-color: #f9f9f9; } .es_table_list tbody th { vertical-align: middle; text-align: center; padding: 12px 10px; border-left:solid 0px #ddd; border-top:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color: #f9f9f9; } .es_table_list td { vertical-align: middle; text-align: left; padding: 8px 8px; border:solid 1px #ddd;} .es_table_list td:first-child { vertical-align: middle; text-align: left; padding: 8px 8px; border-left:solid 0px #fff;} .es_table_list td:last-child { vertical-align: middle; text-align: left; padding: 8px 8px; border-right:solid 0px #fff;} /* ----------- TABLE 홈페이지용 목록형: 좌측우측선이 없는것 ------------*/ .es_table_list_simple { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_list_simple thead th { vertical-align: middle; text-align: center; padding: 14px 8px; border-top:solid 1px #666666; background-color: #dddddd; } .es_table_list_simple tbody th { vertical-align: middle; text-align: center; padding: 12px 8px; border-left:solid 0px #ddd; border-top:solid 1px #ddd; border-right:solid 0px #ddd; border-bottom:solid 1px #ddd; background-color: #f9f9f9; } .es_table_list_simple td { vertical-align: middle; text-align: left; padding: 6px 2px; border-bottom:solid 1px #999;} .es_table_list_simple td:first-child { vertical-align: middle; text-align: left; padding: 6px 2px; } .es_table_list_simple td:last-child { vertical-align: middle; text-align: left; padding: 6px 2px; } /* ----------- TABLE 다크모드 테마용 ------------*/ .es_table_list_theme { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_list_theme thead th { vertical-align: middle; text-align: center; padding: 14px 8px; border-top:solid 1px #aaa; background-color: #eee; color: #333;} .es_table_list_theme tbody th { vertical-align: middle; text-align: center; padding: 12px 8px; border-top:solid 1px #aaa; border-bottom:solid 1px #ddd; background-color: #eee;color: #333; } .es_table_list_theme td { vertical-align: middle; text-align: left; padding: 6px 2px; border-bottom:solid 1px #ddd;} .es_table_list_theme tr:first-child { border-top:solid 1px #aaa; } .es_table_list_theme td:first-child { vertical-align: middle; text-align: left; padding: 6px 2px; } .es_table_list_theme td:last-child { vertical-align: middle; text-align: left; padding: 6px 2px; } /* ----------- TABLE 테이블 CSS ------------*/ .es_table { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table thead th { vertical-align: middle; text-align: center; padding: 5px; border: solid 0px #999999; background-color: #f9f9f9;} .es_table tbody th { vertical-align: top; text-align: center; padding: 5px; border: solid 0px #999999; background-color: #f9f9f9;} .es_table th { vertical-align: middle; text-align: center; padding: 5px; border: solid 0px #999999;} .es_table td { vertical-align: middle; text-align: left; padding: 5px; border: solid 0px #999999;} .es_table_border { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_border thead th { vertical-align: middle; text-align: center; padding: 3px 8px; border:solid 1px #999999; background-color: #f9f9f9; } .es_table_border tbody th { vertical-align: middle; text-align: center; padding: 3px 8px; border:solid 1px #999999; background-color: #f9f9f9; } .es_table_border tr:first-child { border-top:solid 2px #000; } .es_table_border td { vertical-align: middle; text-align: left; padding: 4px 8px; border:solid 1px #999999;} .es_table_bgborder { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_bgborder thead th { vertical-align: middle; text-align: center; padding: 5px 6px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; border-top:solid 1px #000000; background-color: #f0f0f0; } .es_table_bgborder thead th:last-child { vertical-align: middle; text-align: center; padding: 3px 6px; border-bottom:solid 1px #ccc; border-right:solid 0px #ccc; border-top:solid 1px #000000;} .es_table_bgborder tbody th { vertical-align: middle; text-align: center; padding: 5px 6px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; border-top:solid 1px #ccc; background-color: #f9f9f9; } .es_table_bgborder tbody td { vertical-align: middle; text-align: left; padding: 3px 8px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; work-break:normal;} .es_table_bgborder tbody td:last-child { vertical-align: middle; padding: 3px 8px; border-bottom:solid 1px #ccc; border-right:solid 0px #ccc; border-top:solid 1px #ccc; work-break:normal;} .es_table_bgborder tbody tr:hover { background-color: #ffffe6;} .es_table_bgborder tbody tr.selected { background-color: #eee;} .es_table_print { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_print thead th { vertical-align: middle; text-align: center; padding: 10px 10px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; border-top:solid 1px #111111; background-color: #f9f9f9; } .es_table_print thead th:last-child { vertical-align: middle; text-align: center; padding: 10px 10px; border-bottom:solid 1px #ccc; border-right:solid 0px #ccc; border-top:solid 1px #111111; } .es_table_print tbody th { vertical-align: middle; text-align: center; padding: 5px 6px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; border-top:solid 1px #ccc; } .es_table_print tbody td { vertical-align: middle; text-align: left; padding: 4px 8px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; } .es_table_print tbody td:last-child { vertical-align: middle; padding: 4px 8px; border-bottom:solid 1px #ccc; border-right:solid 0px #ccc; } .es_table_home { border-collapse: collapse; border-spacing: 0; width: 100%; } .es_table_home thead th { vertical-align: middle; text-align: center; padding: 2px 5px; border:solid 1px #999999; background-color:#f0f0f0; } .es_table_home tbody th { vertical-align: middle; text-align: center; padding: 2px 5px; border:solid 1px #999999; background-color:#f0f0f0; } .es_table_home tbody tr:first-child { border-top:solid 0px #dddddd; } .es_table_home tbody tr:hover { background-color: #ffffe6;} .es_table_home tbody td { text-align: center; padding: 2px 8px; border:solid 0px #999999;} .wow { visibility: hidden; } .zoom-in { border: 1px solid #eeeeee; padding: 10px; overflow: hidden; width: 100%;} .zoom-in img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;} .zoom-in:hover img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);} .zoom-out { border: 1px solid #eeeeee; padding: 10px; overflow: hidden; width: 100%;} .zoom-out img { overflow: hidden; max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;} .zoom-out:hover img { -moz-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9);} .prod-table-black {width:100%; padding: 3px 10px; word-break:break-all;} .prod-table-black tr:first-child th{border-top:solid 1px #111111;} .prod-table-black tr:first-child td{border-top:solid 1px #111111;} .prod-table-black tr th{ padding: 7px 3px; color:#111; text-align:center; border:solid 1px #111111; background-color:transparent; width:20%;font-weight:bold;} .prod-table-black tr td{ padding: 7px 10px; color:#111; text-align:left; border:solid 1px #111111; } .prod-table-white {width:100%; padding: 3px 10px; word-break:break-all;} .prod-table-white tr:first-child th{border-top:solid 1px #FFFFFF;} .prod-table-white tr:first-child td{border-top:solid 1px #FFFFFF;} .prod-table-white tr th{ padding: 7px 3px; color:#ffffff; text-align:center; border:solid 1px #FFFFFF; background-color:transparent; width:20%;font-weight:bold;} .prod-table-white tr td{ padding: 7px 10px; color:#ffffff; text-align:left; border:solid 1px #FFFFFF; } .es_table_wrapper{ width:100%; overflow-x:auto; white-space:nowrap } /* 테이블 스타일 반응형 css */ .es_table_style{display:block; position:relative; border-top:solid 2px #354c98;} .es_table_style:after{ content:""; position:absolute; top:0; right:0; background:#fff; width:2px; height:100%;} .es_table_style .thead{ display:block;} .es_table_style .tbody{ display:block;} .es_table_style .tr{ display:flex; flex-direction:row; flex-wrap:wrap;} .es_table_style .th, .es_table_style .td{ display:block; padding:5px 6px; background:#fff; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } .es_table_style .th{ background:#f9f9f9; text-align:center; font-weight:bold; display:flex; align-items:center; flex-direction:row; justify-content:space-around; } .es_table_style:not(.no-hover) .tbody .tr .td:not(.no-hover):hover{ background:#ffffe6;} .es_table_style .td.valign-middle { display:flex;flex-direction:row;align-items:center; } .es_table_style .tr .th.s1, .es_table_style .tr .td.s1{width:8.33333%} .es_table_style .tr .th.s2, .es_table_style .tr .td.s2{width:16.66666%} .es_table_style .tr .th.s3, .es_table_style .tr .td.s3{width:24.99999%} .es_table_style .tr .th.s4, .es_table_style .tr .td.s4{width:33.33333%} .es_table_style .tr .th.s5, .es_table_style .tr .td.s5{width:41.66666%} .es_table_style .tr .th.s6, .es_table_style .tr .td.s6{width:49.99999%} .es_table_style .tr .th.s7, .es_table_style .tr .td.s7{width:58.33333%} .es_table_style .tr .th.s8, .es_table_style .tr .td.s8{width:66.66666%} .es_table_style .tr .th.s9, .es_table_style .tr .td.s9{width:74.99999%} .es_table_style .tr .th.s10, .es_table_style .tr .td.s10{width:83.33333%} .es_table_style .tr .th.s11, .es_table_style .tr .td.s11{width:91.66666%} .es_table_style .tr .th.s12, .es_table_style .tr .td.s12{width:99.99999%} @media (min-width:601px){ .es_table_style .tr .th.m1, .es_table_style .tr .td.m1{width:8.33333%} .es_table_style .tr .th.m2, .es_table_style .tr .td.m2{width:16.66666%} .es_table_style .tr .th.m3, .es_table_style .tr .td.m3{width:24.99999%} .es_table_style .tr .th.m4, .es_table_style .tr .td.m4{width:33.33333%} .es_table_style .tr .th.m5, .es_table_style .tr .td.m5{width:41.66666%} .es_table_style .tr .th.m6, .es_table_style .tr .td.m6{width:49.99999%} .es_table_style .tr .th.m7, .es_table_style .tr .td.m7{width:58.33333%} .es_table_style .tr .th.m8, .es_table_style .tr .td.m8{width:66.66666%} .es_table_style .tr .th.m9, .es_table_style .tr .td.m9{width:74.99999%} .es_table_style .tr .th.m10, .es_table_style .tr .td.m10{width:83.33333%} .es_table_style .tr .th.m11, .es_table_style .tr .td.m11{width:91.66666%} .es_table_style .tr .th.m12, .es_table_style .tr .td.m12{width:99.99999%} } @media (min-width:993px){ .es_table_style .tr .th.l1, .es_table_style .tr .td.l1{width:8.33333%} .es_table_style .tr .th.l2, .es_table_style .tr .td.l2{width:16.66666%} .es_table_style .tr .th.l3, .es_table_style .tr .td.l3{width:24.99999%} .es_table_style .tr .th.l4, .es_table_style .tr .td.l4{width:33.33333%} .es_table_style .tr .th.l5, .es_table_style .tr .td.l5{width:41.66666%} .es_table_style .tr .th.l6, .es_table_style .tr .td.l6{width:49.99999%} .es_table_style .tr .th.l7, .es_table_style .tr .td.l7{width:58.33333%} .es_table_style .tr .th.l8, .es_table_style .tr .td.l8{width:66.66666%} .es_table_style .tr .th.l9, .es_table_style .tr .td.l9{width:74.99999%} .es_table_style .tr .th.l10, .es_table_style .tr .td.l10{width:83.33333%} .es_table_style .tr .th.l11, .es_table_style .tr .td.l11{width:91.66666%} .es_table_style .tr .th.l12, .es_table_style .tr .td.l12{width:99.99999%} } /* 테이블 형식의 디자인 CSS */ .tb-view .tb-header { margin-top: 15px;background-color: #eee;padding: 5px;border-bottom: 1px solid gray;} .tb-view .tb-r-other {text-align:right;} .tb-view .tb-r-other .add-btn { background-color: white;border-radius: 5px;border-color: #ccc;padding: 5px;} .tb-view .tb-body .tb-row .input-r-column input{ text-align:right;} .tb-view .tb-body .tb-row .text-c-column {text-align:center;line-height: 34px;} .tb-view .tb-body .tb-row .button-c-column { padding-top: 10px;text-align: center;} .tb-view .tb-body .tb-row .delete_btn {border:none; background-color: white; cursor:pointer;} .tb-view .tb-body .tb-row div {padding:5px; border:1px solid #cccccc; border-left: none; border-bottom:none;} .tb-view .tb-body .tb-row div:nth-child(4n) {border-right:none;} /* 페이지넘기기 스크롤바아이콘 */ .scroll_top a { padding: 15px; position: relative; left: 47%; bottom: 20px; width: 60px; height: 60px; border-radius:50%; background-color: #33ccff; z-index: 2; display: inline-block; } /* -----------DETAIL TAB T공병기 TAB영역만들기 START ---*/ .tab-bg-color { background-color: #f3f3f3; transition-duration: .02s; border-top:solid 2px #354c98; } .text-color { color: #111111; transition-duration: .05s; } .wrapper { min-width: 100%; max-width: 1200px; margin: 0 auto; } .tabs { padding: 0; margin: 0; display: table; table-layout: fixed; width: 100%; -webkit-transform: translateY(5px); transform: translateY(5px);} .tabs > li { transition-duration: .05s; display: table-cell; list-style: none; text-align: center; padding: 10px 10px 15px 10px; position: relative; overflow: hidden; cursor: pointer; color: #111111; } .tabs > li:before {z-index: -1; position: absolute; content: ""; width: 100%; height: 120%; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.3); -webkit-transform: translateY(100%); transform: translateY(100%); transition-duration: .25s; border-radius: 5px 5px 0 0; } .tabs > li:hover:before {-webkit-transform: translateY(70%); transform: translateY(70%);} .tabs > li.active {color: #50555a; } .tabs > li.active:before {transition-duration: .05s; background-color: white; -webkit-transform: translateY(0); transform: translateY(0); } .tab__content { /*background-color: white;*/ position: relative; width: 100%; border-radius: 5px; padding: 0; margin: 0;} .tab__content > li {width: 100%; position: absolute; top: 0; left: 0; display: none; list-style: none; } .tab__content > li .content__wrapper {text-align: left; border-radius: 5px; width: 100%; padding: 15px 10px 15px 10px; /*background-color: white;*/ } /* -----------DETAIL TAB 공병기 TAB영역만들기 END ---*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 네비 NAV */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block;} .nav > li > a { position: relative; display: block; padding: 10px 15px; text-decoration: none; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; } .nav > li.disabled > a { color: #777; } .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #eee; border-color: #337ab7; } .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .nav > li > a > img { max-width: none;} .nav-tabs { border-bottom: 0px solid #ddd; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { font-size:12px; margin: 0px 5px; line-height: 1.4; border: 1px solid transparent; border-radius: 4px; } /* .nav-tabs > li > a:hover { border-color: #eee #eee #ddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } */ .nav-tabs.nav-justified { width: 100%; border-bottom: 0; } .nav-tabs.nav-justified > li { float: none; } .nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center; } .nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; } .nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px; font-weight:bold; font-size:14px; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd;} @media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell; width: 1%; } .nav-tabs.nav-justified > li > a { margin-bottom: 0; } .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; } } .nav-tabs-noline { width: 100%; border-bottom: 0; } .nav-tabs-noline > li { float: none; } .nav-tabs-noline > li > a { margin-bottom: 5px; text-align: center; } .nav-tabs-noline > .dropdown .dropdown-menu { top: auto; left: auto; } .nav-tabs-noline > li > a { margin-right: 0; border-radius: 4px; font-weight:bold; font-size:14px; } .nav-tabs-noline > .active > a, .nav-tabs-noline > .active > a:hover, .nav-tabs-noline > .active > a:focus { border: 0px solid #ddd;} .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 타임라인 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ .timeline { line-height: 1em; list-style: none; margin: 0; padding: 0; width: 100%;} .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 { line-height: inherit;} .timeline-title { line-height: 1.2em; font-size:18px; font-weight:700; color:#111111;} .timeline-subtitle { line-height: 1.2em; font-size:14px; color:#333333;} .timeline-item { padding-left: 40px; position: relative;} .timeline-item:last-child { padding-bottom: 0;} .timeline-item p { font-size: 12px; color:#999;} .timeline-item:last-child .timeline-marker:after { content: none;} .timeline-item:not(.period):hover .timeline-marker:before { background: transparent; border: 3px solid #FF6B6B;} .timeline-info { font-size: 14px; letter-spacing: 0px; margin: 0 0 .5em 0; text-transform: uppercase; white-space: nowrap;} .timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px;} .timeline-marker:before { background: #008761; border: 3px solid transparent; border-radius: 100%; content: ""; display: block; height: 15px; position: absolute; top: 4px; left: 0; width: 15px; transition: background 0.3s ease-in-out, border 0.3s ease-in-out; } .timeline-marker:after { content: ""; width: 1px; background: #666666; display: block; position: absolute; top: 24px; bottom: 0; left: 6px;} .timeline-content { font-size:12px; color:#666666; padding-bottom: 6px;} .timeline-content p:last-child { margin-bottom: 0;} .period { padding: 0;} .period .timeline-info { display: none;} .period .timeline-marker:before { background: transparent; content: ""; width: 15px; height: auto; border: none; border-radius: 0; top: 0; bottom: 30px; position: absolute; border-top: 0px solid #666666; border-bottom: 3px solid #666666; } .period .timeline-marker:after { content: ""; height: 32px; top: auto;} .period .timeline-content { padding: 30px 0 60px;} .period .timeline-title { margin: 0;} @media (min-width: 768px) { .timeline-split .timeline, .timeline-centered .timeline { display: table; } .timeline-split .timeline-item, .timeline-centered .timeline-item { display: table-row; padding: 0; } .timeline-split .timeline-info, .timeline-centered .timeline-info, .timeline-split .timeline-marker, .timeline-centered .timeline-marker, .timeline-split .timeline-content, .timeline-centered .timeline-content, .timeline-split .period .timeline-info, .timeline-centered .period .timeline-info { display: table-cell; vertical-align: top; } .timeline-split .timeline-marker, .timeline-centered .timeline-marker { position: relative; } .timeline-split .timeline-content, .timeline-centered .timeline-content { padding-left: 30px; } .timeline-split .timeline-info, .timeline-centered .timeline-info { padding-right: 30px; } .timeline-split .period .timeline-title, .timeline-centered .period .timeline-title { position: relative; left: -45px; } } .marker-outline .timeline-marker:before { background: transparent; border-color: #FF6B6B;} .marker-outline .timeline-item:hover .timeline-marker:before { background: #FF6B6B;} /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 북마크 bookmark */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ---------------- 북마크 */ /* .bookmark-bar { background:#fff; width:100%; padding:0px 10px; display:flex; justify-content:space-between; position:relative; z-index:10; border-bottom:1px solid #aaa; } .bookmark-bar.disabled { display:none; } .bookmark-bar .bookmark-menu-btn-wrap { width:30px; flex-shrink: 0; display:none; } .bookmark-bar .bookmark-helper.disabled:before{ content:"\f05e"; font-family:"Font Awesome 5 Pro"; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); font-size:16px; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu-btn{ width:100%; height:30px; padding:0; margin:5px 0px; font-size:16px; background:transparent; border:none; outline:none; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu{ position:absolute; margin-top:5px; right:5px; background:#fff; border-radius:5px; border:1px solid #aaa; display:none; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu .bookmark-item{ white-space:nowrap; font-size:12px; background:#fff; display:flex; flex-direction:row; border-top:1px solid #ddd; position:relative; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu .bookmark-placeholder{ background:#fff; display:block; border-top:1px solid #ddd; background:#eee; height:30px; width:100%; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu .bookmark-placeholder:first-child + .bookmark-item{ border-top:none; border-top-left-radius:5px; border-top-right-radius:5px; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu > div:first-child{ border-top:none; border-top-left-radius:5px; border-top-right-radius:5px; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu > div:last-child{ border-bottom-left-radius:5px; border-bottom-right-radius:5px; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu .bookmark-item > a{ height:30px; line-height:30px; padding:0px 10px; flex-grow:1; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu .bookmark-item > button{ background:transparent; border:none; margin:0; padding:0px 5px; outline:none; } .bookmark-bar .bookmark-menu-btn-wrap .bookmark-menu-btn > i{ font-size:18px; } .bookmark-bar .bookmark-list{ white-space:nowrap; } .bookmark-bar .bookmark-list .bookmark-placeholder{ display:inline-block; margin:5px 0px; padding:0; position:absolute; width:2px; height:30px; background:#000; } .bookmark-bar .bookmark-helper{ opacity:.7; } .bookmark-bar .bookmark-list .bookmark-item{ white-space:nowrap; font-size:12px; background:#eee; border-radius:5px; display:inline-flex; flex-direction:row; margin:5px 2px; border:1px solid #ddd; position:relative; } .bookmark-bar .bookmark-list .bookmark-placeholder:first-child + .bookmark-item{ margin-left:0px; } .bookmark-bar .bookmark-list .bookmark-item:first-child{ margin-left:0px; } .bookmark-bar .bookmark-list .bookmark-item:last-child{ margin-right:0px; } .bookmark-bar .bookmark-list .bookmark-item > a { padding:5px; } .bookmark-bar .bookmark-item > a:hover, .bookmark-bar .bookmark-item > a:visited, .bookmark-bar .bookmark-item > a:focus{ text-decoration:none; color:#333; } .bookmark-bar .bookmark-list .bookmark-item > button{ background:transparent; border:none; margin:0; padding:0px 5px; outline:none; } */