@charset "UTF-8"; /*** [reset] ***/ *{box-sizing:border-box;} *:after{clear:both;} dl, ol, ul{margin:0; padding:0;} ul li{list-style:none} dl, dd{margin-bottom:0;} label{margin-bottom:0;} em{font-style:normal;} a{display:block; color:#333;} a:hover{color:inherit;} p{margin:0;} h1, h2, h3, h4, h5, h6{margin:0;} img{display:block;} button, button:focus{background:transparent; border:0; outline:0;} /*** [reset 끝] ***/ /*** [서비스 상태 안내 페이지 공통] ***/ /* 영역 */ .srv_gud_outer{position:relative; width:100%; height:100vh;} .srv_gud_outer .srv_gud_inner{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%);} /* 안내문 제목글 */ .gud_info_wrap dl{text-align:center;} .gud_info_wrap dt{font-size:48px; line-height:1; font-weight:500 !important; color:#111b35; letter-spacing:-0.5px;} .gud_info_wrap dt em{margin-left:5px; font-style:normal;} .gud_info_wrap dd{margin-top:30px; font-size:21px; line-height:32px; color:#111b35; letter-spacing:-0.5px;} /* 안내문 카드 */ .card_outer{margin-top:34px; margin-bottom:36px;} .card_outer .card_inner{position:relative; width:1040px; height:443px; background:url('images/srv_gud_base.png') no-repeat center; background-size:contain;} .card_outer .card_inner p[class|="pstn"]{position:absolute;} .card_outer .card_inner .pstn-sta{top:50%; left:25%; font-size:24px; line-height:36px; font-weight:600 !important; text-align:center; color:#015248; letter-spacing:-1px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);} .card_outer .card_inner .pstn-base{top:50%; left:45.2%; margin-top:4px; font-size:26px; line-height:48px; color:#111b35; letter-spacing:-1.2px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);} /* 추가 안내문 및 버튼 영역 */ .brc_wrap p{font-size:18px; line-height:26px; font-weight:500 !important; text-align:center; color:#111b35; letter-spacing:-0.5px;} .brc_wrap p + .btn_wrap{margin-top:25px;} .brc_wrap .aling_btn_wrap{font-size:0; text-align:center;} .brc_wrap .aling_btn_wrap > *{display:inline-block; margin-right:40px !important; font-size:16px; vertical-align:middle;} .brc_wrap .aling_btn_wrap > *:last-child{margin-right:0;} .brc_wrap .btn_wrap{width:344px; margin:0 auto;} .brc_wrap .btn_wrap a{display:block; padding:20px 0; font-size:21px; line-height:30px; text-align:center; letter-spacing:-0.5px; border-radius:50px;} /* 버튼 컬러 */ .btn_bg_Biscay, .btn_bg_Biscay:hover{background-color:#163962; color:#fff; border:1px solid #163962;} .btn_bg_Amber, .btn_bg_Amber:hover{background-color:#fbbd02; color:#fff; border:1px solid #fbbd02;} .btn_bg_PuertoRico, .btn_bg_PuertoRico:hover{background-color:#47cbba; color:#fff; border:1px solid #47cbba;} .btn_bg_Pelorous, .btn_bg_Pelorous:hover{background-color:#33a6b5; color:#fff; border:1px solid #33a6b5;} /*** [서비스 상태 안내 페이지 공통 끝] ***/ /*** [홈페이지 작업 중] ***/ /* 배경 */ .srv_gud_outer.work{background-color:#d6e5ff;} /* 안내문 제목글 */ .srv_gud_outer.work .gud_info_wrap dt em{color:#2e79eb;} /** 안내문 카드 **/ /* 영역 */ .srv_gud_outer.work .card_outer .card_inner{width:1040px; height:567px; background:url('images/srv_gud_work.png') no-repeat center; background-size:contain;} /* 구분 */ .srv_gud_outer.work .card_outer .card_inner p[class|="pstn"]{font-size:21px; line-height:30px; letter-spacing:-0.5px;} .srv_gud_outer.work .card_outer .card_inner .pstn-01{top:17%; left:10.5%; color:#415995;} .srv_gud_outer.work .card_outer .card_inner .pstn-02{top:60%; left:6.5%; color:#fff;} /* 안내글 */ .srv_gud_outer.work .card_outer .card_inner .pstn-03{position:absolute; top:17.4%; left:42%;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl{margin-bottom:76px;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl:last-child{margin-bottom:0;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dt{font-size:0;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dt > *{display:inline-block; font-size:16pc; vertical-align:middle;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dt .img_wrap{width:54px; height:61px;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl.feat_inconvinc dt .img_wrap{background:url('images/ico_feat_inconvinc.png') no-repeat center; background-size:contain;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl.feat_convinc dt .img_wrap{background:url('images/ico_feat_convinc.png') no-repeat center; background-size:contain;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dt .img_wrap span{display:none;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dt .img_wrap + .txt_wrap{margin-left:10px;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dt .txt_wrap{font-size:26px; line-height:32px; font-weight:500 !important; letter-spacing:-1.5px;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl.feat_inconvinc dt .txt_wrap{color:#e23268;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl.feat_convinc dt .txt_wrap{color:#027dcc;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dd{margin-top:7px; font-size:17px; line-height:32px; color:#111b35; letter-spacing:-0.5px;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dd ol{margin:0; padding:0; padding-left:10px;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dd li{list-style:none;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl dd em{margin:0 3px; padding-right:5px; font-weight:300; font-style:italic;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl.feat_inconvinc dd em{background-color:#f890b0; color:#fff;} .srv_gud_outer.work .card_outer .card_inner .pstn-03 dl.feat_convinc dd em{background-color:#90b7f8; color:#fff;} /** 안내문 카드 끝 **/ /*** [홈페이지 작업 중 끝] ***/ /*** [홈페이지 검수 중] ***/ /* 배경 */ .srv_gud_outer.inspection{background-color:#ccfff9;} /* 안내문 제목글 */ .srv_gud_outer.inspection .gud_info_wrap dt em{color:#47cbba;} /** 안내문 카드 **/ /* 영역 */ .srv_gud_outer.inspection .card_outer .card_inner{width:1040px; height:443px; background:url('images/srv_gud_inspection.png') no-repeat center; background-size:contain;} /* 상태 안내 */ .srv_gud_outer.inspection .card_outer .card_inner .pstn-sta{top:28%; left:15.7%; -webkit-transform:none; -moz-transform:none; -o-transform:none; transform:none;} .srv_gud_outer.inspection .card_outer .card_inner .pstn-02{top:15%; left:41%; font-size:18px; line-height:36px; color:#111b35; letter-spacing:-1px;} .srv_gud_outer.inspection .card_outer .card_inner .pstn-02 em{margin:0 3px; padding-right:5px; font-weight:300 !important; font-style:italic; background-color:#47cbba; color:#fff;} .srv_gud_outer.inspection .card_outer .card_inner .pstn-03{top:59.5%; left:7.8%; font-size:21px; line-height:36px; font-weight:500 !important; color:#01ab8d; letter-spacing:-1.2px;} .srv_gud_outer.inspection .card_outer .card_inner .pstn-04{top:76%; left:6.2%; font-size:18px; line-height:30px; color:#000; letter-spacing:-1px;} /*** [홈페이지 검수 중] ***/ /*** [서버 오류] ***/ /* 배경 */ .srv_gud_outer.errorServer{background-color:#ffdec6;} /* 안내문 제목글 */ .srv_gud_outer.errorServer .gud_info_wrap dt em{color:#fb9402;} /*** [서버 오류 끝] ***/ /*** [페이지 오류] ***/ /* 배경 */ .srv_gud_outer.errorPage{background-color:#a5c9fe;} .card_outer .card_inner {margin: 0 auto;} /* 모바일 */ .mo_page_error_wrap {width: 100%; height: 100vh; overflow: hidden; background-color: #ffdec6; position: relative;} .mo_page_not_found_wrap {width: 100%; height: 100vh; overflow: hidden; background-color: #a5c9fe; position: relative;} .mo_page_not_found, .mo_page_error {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;} .mo_page_error h4 > em {margin-left: 0.25rem; color: #fb9402;} .not_found_img {width: 100%; padding-bottom: 42.5%; background-image: url("images/srv_gud_base.png"); background-size: 100% 100%; margin-top: 2rem; position: relative;} .not_found_img > p {position: absolute; top: 50%; left: 44.2%; transform: translateY(-50%); padding-right: 1rem;} .mo_page_not_found a.btn, .mo_page_error a.btn {margin: 2rem auto 0; width: 50%; min-width: 200px; background-color: #33a6b5; border: 1px solid #33a6b5; letter-spacing: -0.5px; padding-top: 1rem; padding-bottom: 1rem; border-radius: 2rem; color: #fff; display: block;} .mo_page_error a.btn {background-color: #fbbd02; border-color: #fbbd02;} /*** [페이지 오류 끝] ***/