@charset "utf-8";

#wrapper {display:inline-block; width:100%; height:100%; min-height:100vh; background:#f9f9f9;}
#wrapperDoc {position:relative; width:calc(100% - 40px); max-width:630px; margin:0 auto 30px; border-radius:30px; background:#fff; box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.75); -moz-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.75); overflow:hidden;}

#header {position:relative; width:calc(100% - 30px); height:60px; max-width:600px; margin:0 auto;}
#header > li {position:relative; height:100%; float:left;}
#header > li > a {display:block; height:100%;}
#header > li > a i {position:relative; top:11px; font-size:1.75em; color:#fff; padding:10px; border-radius:30px; background:#15212f;}
#header .aside {width:60px; }
#header .aside a {padding:17px 0;}

#header .logo {width:calc(100% - 120px); text-align:center;}
#header .logo a {display:inline-block; width:60px; height:100%; padding:8px 0 5px;}
#header .my {width:60px;}
#header .my > a {padding:17px 0; text-align:right;}
#header .my.on .userBox {display:block;}

#header .userBox {display:none; position:absolute; top:63px; right:-6px; width:230px; height:auto; background:#fff; border-radius:25px; z-index:10;}
#header .userBox .mb_name {padding:20px 0 0 25px; color:#000; font-size:1.05em; font-weight:500;}
#header .userBox .mb_email {padding:0 0 0 25px; display:block; width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#header .userBox .mb_link.guest {padding:35px 0 25px; text-align:center;}
#header .userBox .mb_link:not(.guest) {padding:10px 0 17px 0; text-align:center;}
#header .userBox .mb_link a {display:inline-block; padding:5px 8.5%; color:#fff; font-size:0.95em; border-radius:20px; margin:0 2px;}
#header .userBox .mb_link a.logout {background:#aaa;}
#header .userBox .mb_link a.modify {background:#093f82;}
#header .userBox .mb_link a.loginJoin {background:#093f82}
#header .userBox .ecd_link {width:100%; height:45px; border:1px solid #ddd; border-radius:0 0 25px 25px; overflow:hidden;}
#header .userBox .ecd_link li {width:50%; height:100%; background:#f0f0f0; float:left;}
#header .userBox .ecd_link li a {display:block; height:100%; line-height:45px; text-align:center;}
#header .userBox .ecd_link li:first-child a {border-right:1px solid #ddd;}

#aside {position:absolute; width:300px; height:100%; background:#fff; border-right:1px solid #c6c6c6; border-radius:30px 0 0 30px; box-shadow: 9px 4px 5px -5px rgba(0,0,0,0.3); -webkit-box-shadow: 9px 4px 5px -5px rgba(0,0,0,0.3); -moz-box-shadow: 9px 4px 5px -5px rgba(0,0,0,0.3); transform: translateX(-110%);transition: transform 0.5s ease-in-out; z-index:99}
#aside.on {transform: translateX(0);}

#logo {position:relative; width:calc(100% - 40px); max-width:630px; text-align:center; margin:15px auto 10px;}
#mainTopBanner {width:100%; height:auto; border-radius:30px 30px 0 0; overflow:hidden;}
#mainTopBanner img {width:100%; height:auto; border-bottom:2px solid #15212f; }
#mainTopBanner p {font-size:1.2em; line-height:30px; text-align:center; padding:30px 0 60px;}
#mainTopBanner p a {display:inline-block; background:#15212f; color:#fff; padding:10px 60px; border-radius:5px; margin-top:20px;}

#subTop {width:100%; height:130px; border-radius:30px 30px 0 0; background:linear-gradient(145deg, rgba(24, 40, 67, 1) 0%, rgba(24, 40, 67, 1) 25%, rgba(41, 58, 103, 1) 50%, rgba(24, 40, 67, 1) 75%, rgba(24, 40, 67, 1) 100%);}
#subTop p {text-align:center; padding:35px 0 0; line-height:30px;}
#subTop p span {display:block; font-size:1.3em; color:#fff; letter-spacing:-1px;}
#subTop p .top {font-weight:500;}
#subTop p .bottom {font-weight:100;}

#footer {width:100%; height:auto;}
#footer .link {height:auto; overflow:hidden; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#f6f6f6;}
#footer .link a {display:inline-block; padding:15px 8px;}
#footer .companyInfo {position:relative; width:365px; margin:10px auto;}
#footer .companyInfo p {padding:2px 0; font-size:0.85em; font-weight:300; color:#777;}
#footer .companyInfo p span {display:inline-block; vertical-align:middle; color:#bbb; font-size:0.8em; padding:0 3px; margin-top:-3px;}
#footer .copyright {text-align:center; font-size:0.9em; color:#aaa; padding:20px 0;}


/* mypage */
#mypage {padding:30px 0;}
#mypage .navi {width:calc(100% - 60px); max-width:400px; margin:30px auto; overflow:hidden; clear:both;}
#mypage .navi li {width:calc(50% - 10px); height:150px; border:1px solid #e0e0e0; border-radius:30px; margin:10px 0; overflow:hidden; float:left;}
#mypage .navi li:nth-child(odd) {margin-right:20px;}

#mypage .navi li a {display:block; width:100%; height:calc(100% - 45px); text-align:center; background:#f6f6f6; padding-top:30px;}
#mypage .navi li a i {display:block; font-size:1.66em; font-weight:100; margin-bottom:5px; color:#000;}
#mypage .navi li p {height:45px; border-top:1px solid #e0e0e0; line-height:45px; text-align:center;}

#mypage .navi li.site a {}
#mypage .navi li.info a {}
#mypage .navi li.page a {background:#eaedf5}
#mypage .navi li.member a {background:#efeaf5}

#mypage .navi li.ecard {}
#mypage .navi li.ecard a {background:#eaedf5}








/*#ecard .regtab li.on:after {content:""; position:absolute; width:100%; height:100%; top:0; left:0; border:3px solid #cbd4e5; border-radius:10px;}*/

/* btnBottom */
#ajajxResult {transition:all 1s}
#ajajxResult .bottomModal {position:fixed; top:0; left:0; width:100%; height:calc(100% + 100px); background:rgba(0,0,0,0.3); transition:all 1s}
#ajajxResult .bottomModal .wrap {position:fixed; bottom:45px; left:50%; width:100%; max-width:630px; height:auto; min-height:200px; margin-left:-315px; background:#fff; border:1px solid #000; border-top:0; border-radius:20px 20px 0 0; overflow:hidden; }
#ajajxResult .bottomModal .head {position:relative; top:0; left:0; width:100%; height:30px; background:#000; border-top:1px solid #666; border-radius:20px 20px 0 0; text-align:center;}
#ajajxResult .bottomModal .head i {display:inline-block; width:30px; height:3px; background:#eee; border-radius:30px; margin-top:13px;}
#ajajxResult .bottomModal h3 {display:block; margin:0 0 15px; padding:10px 0; border-bottom:1px dashed #ddd; background:#f9f9f9; text-align:center; color:#000;}
#ajajxResult .bottomModal ul {position:relative; width:calc(100% - 60px); height:auto; overflow:hidden; margin:30px;}
#ajajxResult .bottomModal li {width:25%; text-align:center; float:left;}
#ajajxResult .bottomModal li a {display:block; width:100%;}
#ajajxResult .bottomModal li a i {display:inline-block; width:100%; max-width:60px; height:60px; font-size:1.6em; border-radius:30px; line-height:58px; color:#fff;}
#ajajxResult .bottomModal li a span {display:block; padding-top:10px;}
#ajajxResult .bottomModal li.green a i {background:#32a430; }
#ajajxResult .bottomModal li.blue a i {background:#155fbd;}
#ajajxResult .bottomModal li.dark a i {background:#27274e;}
#ajajxResult .bottomModal li.gray a i {background:#f0f0f0; color:#000;}

#ajajxResult .bottomModal li a .imgWrap {display:inline-block; width:60px; height:60px; border-radius:30px; text-align:center;}
#ajajxResult .bottomModal li a .imgWrap.pd10 {padding:10px;}
#ajajxResult .bottomModal li a .imgWrap.pd20 {padding:19px; line-height:10px;}
#ajajxResult .bottomModal li a .imgWrap.pd30 {padding:30px;}
#ajajxResult .bottomModal li a .imgWrap img {width:100%; height:auto;}
#ajajxResult .bottomModal li a .imgWrap.dark {background:#27274e;}
#ajajxResult .bottomModal li a .imgWrap.yellow {background:#ffe812;}
#ajajxResult .bottomModal .btnVcf {display:inline-block; padding:5px 10px; margin:5px 0 10px; background:#27274e; color:#fff; border-radius:5px;}
#ajajxResult .bottomModal .guide {width:100%; padding:0 0 0 12px; margin:0 0 30px 0;}

@media (max-width:670px) {
	#ajajxResult .bottomModal .wrap {width:calc(100% - 20px); max-width:100%; left:10px; margin-left:0;}
}

@media (max-width:510px) {
	#ajajxResult .bottomModal .wrap ul {width:calc(100% - 30px); margin:30px 15px;}
}

#ecard i.ico {position:relative; text-indent:-9999px}
#ecard i.ico:after {position:absolute; font-weight:400; top:0; left:0; text-indent:0;}
#ecard .i1 .ec_hp i:after {content:"M";}
#ecard .i1 .ec_email i:after {content:"E";}
#ecard .i1 .ec_tel i:after {content:"T";}
#ecard .i1 .ec_fax i:after {content:"F";}
#ecard .i1 .ec_web i:after {content:"H";}
#ecard .i1 .ec_addr i:after {content:"A";}

#ecard .i2 .ec_hp i:after {content:"Ⓜ";}
#ecard .i2 .ec_email i:after {content:"Ⓔ";}
#ecard .i2 .ec_tel i:after {content:"Ⓣ";}
#ecard .i2 .ec_fax i:after {content:"Ⓕ";}
#ecard .i2 .ec_web i:after {content:"Ⓗ";}
#ecard .i2 .ec_addr i:after {content:"Ⓐ";}

#ecard .i3 .ec_hp i:after {content:"🄼";}
#ecard .i3 .ec_email i:after {content:"🄴";}
#ecard .i3 .ec_tel i:after {content:"🅃";}
#ecard .i3 .ec_fax i:after {content:"🄵";}
#ecard .i3 .ec_web i:after {content:"🄷";}
#ecard .i3 .ec_addr i:after {content:"🄰";}

#ecard .i4 .ec_hp i:after {content:"🅜";}
#ecard .i4 .ec_email i:after {content:"🅔";}
#ecard .i4 .ec_tel i:after {content:"🅣";}
#ecard .i4 .ec_fax i:after {content:"🅕";}
#ecard .i4 .ec_web i:after {content:"🅗";}
#ecard .i4 .ec_addr i:after {content:"🅐";}

#ecard .i5 .ec_hp i:after {content:"🅼";}
#ecard .i5 .ec_email i:after {content:"🅴";}
#ecard .i5 .ec_tel i:after {content:"🆃";}
#ecard .i5 .ec_fax i:after {content:"🅵";}
#ecard .i5 .ec_web i:after {content:"🅷";}
#ecard .i5 .ec_addr i:after {content:"🅰";}

#btnBottom {position:fixed; bottom:0; left:50%; width:calc(100% - 20px); max-width:630px; height:55px; margin-left:-315px; border-radius:10px 10px 0 0; overflow:hidden; z-index:99999}
#btnBottom li { width:25%; height:100%; float:left; text-align:center; cursor:pointer; background:#000;}
#btnBottom li:not(:last-child) {border-right:1px solid rgba(255,255,255,0.3);}
#btnBottom li span {display:block; width:100%; height:100%; display:flex; align-items: center; justify-content: center;}
#btnBottom li i {font-size:1.6em; color:#fff;}
#btnBottom li.on {background:#3a3a5f;}

#ecard #serviceInquiry {position:relative; width:calc(100% - 20px); max-width:630px; height:auto; border-radius:10px; margin:5px auto 70px; overflow:hidden;}
#ecard #serviceInquiry .regWrap {width:100%; height:auto; min-height:500px; border-radius:10px; overflow:hidden;}
#ecard #serviceInquiry .mainIntro {width:100%; height:100%; background:#f9f9f9; border-radius:10px; text-align:center; padding:30px 0 0; border:1px solid #e0e0e0}
#ecard #serviceInquiry .mainIntro img {width:84%;}
#ecard #serviceInquiry.blue {background:#282845;}
#ecard #serviceInquiry .benefit {position:absolute; width:100%; bottom:65%; left:0; text-align:center;}
#ecard #serviceInquiry .benefit p {display:none; background:#fff; font-weight:200; font-size:2.1em; color:#000; letter-spacing:-2px; padding:0 5px;}
#ecard #serviceInquiry .benefit p span {font-weight:600;}
#ecard #serviceInquiry h3 {font-size:2em; font-weight:200; color:#000; padding:10px 3px 0;}
#ecard #serviceInquiry h4 {border-top:1px solid #666; padding:7px 5px 0; margin-top:3px;}
#ecard #serviceInquiry h4 span {display:inline-block; white-space:nowrap; background:#333; color:#fff; padding:0 3px; border-radius:3px;}
#ecard #serviceInquiry .introImg {position:absolute; right:0; bottom:0;}
#ecard #serviceInquiry .guide {width:100%; background:#f6f6f6; font-weight:300; color:#333; padding:15px; margin:20px auto;}


#ecard #serviceInquiry .regForm {padding:10px;}
#ecard #serviceInquiry .regForm input[type=text] {border:1px solid #eee; padding:11px 15px 9px; border-radius:30px;}
#ecard #serviceInquiry .regWrap h5 {display:inline-block; font-size:1.1em; font-weight:200; color:#fff; background:#333; border-radius:0 30px 0 0; padding:8px 20px 5px 15px; margin:30px 0 -1px;}
#ecard #serviceInquiry .regWrap h5 + .border {border-bottom:1px solid #999;}

#ecard #serviceInquiry .row {padding:5px 0;}
#ecard #serviceInquiry .hp {padding:5px;}
#ecard #serviceInquiry .hp input {width:calc(33% - 1px);}

#ecard #serviceInquiry .border-radius {border-radius:0 90px 90px 90px;}

#ecard #serviceInquiry #regForm {width:100%; height:auto; overflow:hidden; border:1px solid #999; background:#f9f9f9; padding:20px 0 0; margin:0 auto 30px;}
#ecard #serviceInquiry #regForm input[type=text] {width:100%; border:0; border-bottom:1px solid #aaa; background:transparent; padding:11px 5px 9px; margin:0;}
#ecard #serviceInquiry #regForm input[type=text]:focus {border-color:#000; box-shadow: none;}
#ecard #serviceInquiry #regForm select {width:100%; height:40px; border:0; border-radius:0; border-bottom:1px solid #aaa; background:transparent; margin:0; font-weight:400; color:#000;}
#ecard #serviceInquiry #regForm select:focus {border-color:#333; box-shadow: none;}
#ecard #serviceInquiry #regForm select.not {font-style:italic; color:#999; font-weight:400}
#ecard #serviceInquiry #regForm textarea {width:100%; height:135px; border:1px solid #aaa; background:#fff; padding:10px; border-radius:0 0 0 30px; margin:20px 0 5px; resize:none;}
#ecard #serviceInquiry #regForm .btnWrap {text-align:center; padding:20px 0; background:#fff; border-top:1px dashed #aaa;}
#ecard #serviceInquiry #regForm .btn {width:calc(100% - 90px); max-width:300px; display:inline-block; padding:10px 0; background:#343444; color:#fff; border:0; border-radius:30px;}
#ecard #serviceInquiry #regForm .btn.disabled { pointer-events: none; opacity: 0.6; }
#ecard #serviceInquiry #regForm .privacy textarea {font-size:0.85em; font-weight:300; color:#666;}
#ecard #serviceInquiry #regForm .agree {width:100%; text-align:right; padding:0 25px 30px;}
#ecard #serviceInquiry #regForm .agree input {display:inline-block; vertical-align:middle; background:#fff; border: 1px solid; border-color: #bbb #e3e3e3 #e3e3e3 #bbb; margin-top:-2px;}
#ecard #serviceInquiry #regForm .agree label {display:inline-block; vertical-align:middle; padding-left:3px; color:#333;}
#ecard #serviceInquiry #regForm .agree input:checked {border:1px solid; border-color:rgba(0,0,0,0.45) rgba(0,0,0,0.05) rgba(0,0,0,0.05) rgba(0,0,0,0.45);}

#ecard #serviceInquiry #regForm .row {position:relative; padding:7px 25px;}
#ecard #serviceInquiry #regForm .hp {display:flex; justify-content:space-between; align-items:center;}
#ecard #serviceInquiry #regForm .hp input[type=text] {width:calc(33% - 10px); text-align:center; ime-mode:disabled}
#ecard #serviceInquiry #regForm .num2hanStr {position:absolute; width:100px; height:100%; top:0; right:30px; line-height:50px; text-align:right;}


#ecard #serviceInquiry .schematic {width:100%; height:auto; overflow:hidden; border:1px solid #999; background:#f9f9f9; margin:0 auto 30px;}
#ecard #serviceInquiry .schematic p {padding:15px; text-align:center;}
#ecard #serviceInquiry .schematic p:not(:last-child) {border-bottom:1px dashed #c6c6c6;}
#ecard #serviceInquiry .schematic i { display:inline-block; background:#fff; font-size:1.6em; padding:20px; border-radius:50px; border:1px solid #eee;}
#ecard #serviceInquiry .schematic .title {display:block; font-size:1.2em; font-weight:400; color:#000; padding:7px 0 3px;}
#ecard #serviceInquiry .schematic .explain {font-weight:300; color:#666;}

#ecard #serviceInquiry .schematic1 {height:auto; overflow:hidden; background:#fcfcfc; border:1px solid #999; margin-bottom:30px;}
#ecard #serviceInquiry .schematic1 li {width:50%; text-align:center; padding:30px 0 30px; float:left;}
#ecard #serviceInquiry .schematic1 li:nth-child(odd) {border-right:1px solid #ccc;}
#ecard #serviceInquiry .schematic1 li:nth-last-child(n+3) {border-bottom:1px solid #ccc; }
#ecard #serviceInquiry .schematic1 .title {display:inline-block; width:169px; text-align:left; font-size:1.2em; font-weight:400; color:#000; padding:7px 0 10px;}
#ecard #serviceInquiry .schematic1 .explain {display:inline-block; width:169px; text-align:left; font-weight:300; color:#666; margin-bottom:10px;}
#ecard #serviceInquiry .schematic1 .point {padding:10px 0 10px; border-top:1px solid #f0f0f0; background:#f9f9f9;}
#ecard #serviceInquiry .schematic1 .point p {display:inline-block; width:169px; text-align:left; font-weight:300; color:#666; padding:3px 0;}
#ecard #serviceInquiry .schematic1 .point i {color:#000; margin-left:-3px;}

#ecard #serviceInquiry .schematic1.fi p {padding:15px; text-align:center;}
#ecard #serviceInquiry .schematic1.fi p:not(:last-child) {border-bottom:1px dashed #ddd;}
#ecard #serviceInquiry .schematic1.fi i { display:inline-block; background:#f3f3f3; font-size:1.6em; padding:20px; border-radius:50px; border:1px solid #eee;}

#ecard #serviceInquiry .schematic1.pg li {padding:30px 0 0}

#ecard #serviceInquiry .schematic1.ha {border:1px solid #999;; padding:20px 0 20px; overflow:hidden;}
#ecard #serviceInquiry .schematic1.ha i {display:inline-block; width:90px; height:60px; color:#000; font-size:2.1em; text-align:center; line-height:60px; margin-left:20px; vertical-align:middle;}
#ecard #serviceInquiry .schematic1.ha > p {display:inline-block; width:calc(100% - 114px); padding:0 10px 0 15px; vertical-align:middle;}
#ecard #serviceInquiry .schematic1.ha p span {display:block; font-size:1.1em; font-weight:400; color:#000; padding:0 0 5px;}

#ecard #serviceInquiry .process {width:100%; height:417px; margin:60px 0 -20px;}
#ecard #serviceInquiry .process li {position:relative; width:50%; float:left; height:140px; border:1px solid #999; margin-bottom:-1px;}
#ecard #serviceInquiry .process li i {position:absolute; top:-15px; display:inline-block; width:30px; height:30px; background:#333; border-radius:60px; color:#fff; text-align:center; line-height:30px; font-style:normal; font-weight:200;}
#ecard #serviceInquiry .process li p {text-align:left; padding:30px 5px 43px 40px}
#ecard #serviceInquiry .process li p span {display:block; font-size:1.2em; font-weight:400; color:#000; padding-bottom:5px;}
#ecard #serviceInquiry .process li:nth-child(1) {border-right:0; border-radius:90px 0 0 90px}
#ecard #serviceInquiry .process li:nth-child(1) i {right:-15px;}
#ecard #serviceInquiry .process li:nth-child(2) {border-top:0; border-bottom:0; border-left:0; border-right:0; clear:both;}
#ecard #serviceInquiry .process li:nth-child(2) i {left:35px;}
#ecard #serviceInquiry .process li:nth-child(3) {border-left:0; border-radius:0 90px 90px 0;}
#ecard #serviceInquiry .process li:nth-child(3) i {right:35px;}
#ecard #serviceInquiry .process.nth4 li:nth-child(4) {border:0;}
#ecard #serviceInquiry .process.nth4 li:nth-child(4) i {left:35px;}
#ecard #serviceInquiry .process.nth4 li:nth-child(5) {border:0;}

#ecard #serviceInquiry .process.nth5 li:nth-child(4) {border-left:0; border-right:0; border-bottom:0;}
#ecard #serviceInquiry .process.nth5 li:nth-child(4) i {left:35px;}
#ecard #serviceInquiry .process.nth5 li:nth-child(5) {border:0;}
#ecard #serviceInquiry .process.nth5 li:nth-child(5) i {right:35px;}


#ecard #serviceInquiry .summary {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width:100%; height:auto; margin:40px 0 15px; overflow:hidden;}
#ecard #serviceInquiry .summary li {position:relative; width:32%; text-align:center; float:left;}
#ecard #serviceInquiry .summary li i.left {left:-8vw;}
#ecard #serviceInquiry .summary li i.right { right:-8vw;}
#ecard #serviceInquiry .summary .wrapper {display:inline-block;width:100%;height:auto;background: #f0f0f0;padding:20px 0 0;border-radius:0 30px 0 30px;overflow:hidden;border: 1px solid #999;}
#ecard #serviceInquiry .summary .wrapper .num {display:inline-block;width:90px;height:90px;font-size:1.6em;font-weight:100;color: #000;border-radius:60px;background: #fff;line-height:90px;border:1px solid #eee;}
#ecard #serviceInquiry .summary .explain {display:block; text-align:left; padding:10px 5px 15px 10px; margin-top:15px; font-size:1em; font-weight:200; color:#000; letter-spacing:-1px; background:#fff;}

#ecard #serviceInquiry .items {display:block; width:100%; height:auto;}
#ecard #serviceInquiry .items h6 {background:#f0f0f0; border-bottom:1px solid #666;}
#ecard #serviceInquiry .items ul {width:100%; padding:15px 0; overflow:hidden;}
#ecard #serviceInquiry .items ul li {display:inline-block; background:#f9f9f9; color:#000; padding:10px 10px; border:1px solid #ccc;  border-radius:5px; margin:3px 6px 3px 0; text-align:center; float:left;}

#ecard .regtab {position:relative; display:flex; justify-content: space-between; align-items: center; width:calc(100% - 20px); max-width:630px; height:82px; overflow:hidden; margin:0 auto 10px;}
#ecard .regtab li {display:inline-block; width:calc(25% - 10px); padding:0; text-align:center; font-size:0.95em; color:#666; overflow:hidden; cursor:pointer;}
#ecard .regtab li.categoryType {width:56px; height:100%; background:#3b3b55; color:#fff; padding-top:20px;}
#ecard .regtab li i {display:block; background:#47475b; border-radius:10px 10px 0 0; font-size:1.5em; color:#fff; padding:8px 0;}
#ecard .regtab li span {display:block; background:#fafafa; border:1px solid #e0e0e0; border-top:0; padding:11px 0; border-radius:0 0 10px 10px; font-weight:400; color:#333;}
#ecard .regtab li.on {position:relative;}
#ecard .regtab li.on i {background:#000; color:#fff;}
#ecard .regtab li.on span {}


#mapLoad {position:relative; width:calc(100% - 20px); max-width:630px; height:350px; border:1px solid #ddd; margin:0 auto; overflow:hidden;}
.radius_border{border:1px solid #919191; border-radius:5px;}
.custom_typecontrol {position:absolute; top:10px; right:10px; width:131px; height:30px; margin:0; padding:0; z-index:1; font-size:12px; font-family:'Malgun Gothic', '맑은 고딕', sans-serif; background:#ddd;  overflow:hidden;}
.custom_typecontrol span {display:block; width:64px; height:30px; float:left; text-align:center; line-height:30px; cursor:pointer;}
.custom_typecontrol span:first-child {margin-right:1px;}
.custom_typecontrol .btn {background:#fff; background:linear-gradient(#fff,  #e6e6e6);}
.custom_typecontrol .btn:hover {background:#f5f5f5; background:linear-gradient(#f5f5f5,#e3e3e3);}
.custom_typecontrol .btn:active {background:#e6e6e6; background:linear-gradient(#e6e6e6, #fff);}
.custom_typecontrol .selected_btn {color:#fff; background:#425470; background:linear-gradient(#425470, #5b6d8a);}
.custom_typecontrol .selected_btn:hover {color:#fff; }
.custom_zoomcontrol {position:absolute; top:50px; right:10px; width:36px; height:80px; overflow:hidden; z-index:1; background-color:#f5f5f5;}
.custom_zoomcontrol span {display:block; width:36px; height:40px; text-align:center; cursor:pointer;}
.custom_zoomcontrol span img {width:15px; height:auto; padding:12px 0; border:none;}
.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}

#mapBtn {position:absolute; top:10px; left:10px;}
#naviAddr {width:calc(100% - 20px); padding:10px 0; border-bottom:1px solid #e3e3e3; margin:0 auto 20px;}
#naviAddr span {display:inline-block; background:linear-gradient(#425470, #5b6d8a); color:#fff; padding:2px 6px; border-radius:5px; margin-left:3px;}

#naviBtn {position:relative; display:flex; justify-content: space-between; align-items: center; width:calc(100% - 60px); max-width:630px; height:auto; text-align:center; margin:0 auto 30px; overflow:hidden;}
#naviBtn a {display:inline-block; width:calc(33.33333% - 15px); max-width:60px; text-align:center;}
#naviBtn a img {width:100%; background:#f0f0f0; border-radius:30px}
#naviBtn a span {display:inline-block; padding-top:10px;}


@media (min-width:880px) {
	#ecard #serviceInquiry .summary li i.left {left:-70px;}
	#ecard #serviceInquiry .summary li i.right { right:-70px;}
}


@media (max-width:700px) {
	#ecard #serviceInquiry h4 {font-size: 1rem;}
	#ecard #serviceInquiry .benefit p {font-size:4.5vw;}
	#ecard #serviceInquiry .guide {font-size: 1rem;}
}

@media (max-width:670px) {
	#btnBottom {width:100%; max-width:100%; left:0; margin-left:0; border-radius:0;}
}


@media (max-width:650px) {
	#header {width:calc(100% - 60px);}
	#header .aside a {text-align:right;}
	#header .my a {text-align:left;}
}

@media (min-width:501px) {
	#header .logo a {background:url(../img/logox45.png) no-repeat center center;}
}

@media (max-width:510px) {
	#ecard .regtab li {width:calc(25% - 7px);}
	#ecard .regtab li span {font-size:0.95em;}
	#ecard .regtab li.categoryType {font-size:0.9em;}

	#ecard #regtab li {padding:10px 0;}
	#ecard #regtab li span {display:block; padding-right:0;}

	#ecard #serviceInquiry h3 {font-size:25px; font-weight:400;}
	#ecard #serviceInquiry h4 {font-size:1rem;}
	#ecard #serviceInquiry .guide {width:100%; padding:10px; border-radius:0 !important; font-size: 1rem;}
	#ecard #serviceInquiry .introImg {max-width:150px;}
	#ecard #serviceInquiry .mainIntro {padding-top:15px;}

	#ecard #serviceInquiry .regWrap h5 {font-size:1em; font-weight:300; padding:8px 20px 5px 10px;}
	#ecard #serviceInquiry .border-radius {border-radius:0 60px 60px 60px;}
	#ecard #serviceInquiry .schematic1 {border-radius:0 60px 60px 60px;}
	#ecard #serviceInquiry .border-radius {border-radius:0 60px 60px 60px;}
	#ecard #serviceInquiry .schematic1.nth4 {border-radius:0 60px 0 0;}
	#ecard #serviceInquiry .schematic1.nth4 li {padding:15px 0 20px 15px;}
	#ecard #serviceInquiry .schematic1.pg {border-radius:0 60px 60px 0;}
	#ecard #serviceInquiry .schematic1.tc {border-radius:0 60px 60px 0;}
}

@media (max-width:500px) {
	#wrapper {background:#fff;}
	#wrapperDoc {width:100%; box-shadow:none; border:0; border-radius:0;}
	#header {width:calc(100% - 20px);}
	#header .logo a {background:url(../img/logox100.png) no-repeat center center; background-size:auto 78%;}
	#header .aside a {text-align:left;}
	#header .my a {text-align:right;}
	#header > li > a i {top:3px; padding:7px; font-size:1.3em;}
	#mainTopBanner {border-radius:0;}
	#subTop {border-radius:0px;}

	#aside  {width:100%; border-radius:0; border-top:1px solid #aaa; box-shadow:none;}
}










#wave {position:absolute; width:100%; height:200px; bottom:5px; overflow:hidden; z-index:1;}
#wave .wave {position: absolute; bottom: 0;left: 0; width: 200%;height: 12em; background: rgb(0 0 0 / 20%);border-radius: 1000% 1000% 0 0; animation: wave 10s -3s linear infinite;transform: translate3d(0, 0, 0);opacity: 0.85;z-index: -1;}
#wave .wave:nth-of-type(2) {bottom: -2em; animation: wave 18s linear reverse infinite; opacity: 0.9;}
#wave .wave:nth-of-type(3) {bottom: -4em; animation: wave 20s -1s reverse infinite; opacity: 0.95;}

@keyframes wave {
	2% {transform: translateX(1);}
	25% {transform: translateX(-25%);}
	50% {transform: translateX(-50%);}
	75% {transform: translateX(-25%);}
	100% {transform: translateX(1);}
}

/* 밤하늘 배경 - 검은색에서 보라색으로 그라데이션 */
.noite {position: absolute; top:0; left:0; width: 100%;height: 100%; overflow: hidden;}


/* 별자리 컨테이너 - 300초 동안 무한 회전 */
.constelacao {position: absolute;left: 50%;top: -10%;width: 600px;height: 600px;animation: rotate 100s infinite linear;  opacity:0.6; margin-left:-300px; overflow:hidden;}

/* 별 기본 스타일 - 흰색 원형, 절대위치, 반짝임 애니메이션 */
.estrela {background-color: white;border-radius: 50%;position: absolute;animation-name: estrela;animation-timing-function: linear;animation-iteration-count: infinite;}

/* 별 반짝임 속도 스타일 */
.estrela.style1 { animation-duration: 0.5s; animation-name: estrela; } /* 빠른 반짝임 */
.estrela.style2 { animation-duration: 1s; animation-name: estrela; } /* 보통 반짝임 */
.estrela.style3 { animation-duration: 1.5s; animation-name: estrela; } /* 느린 반짝임 */
.estrela.style4 { animation-duration: 2s; animation-name: estrelaDestacada; } /* 색상 변화 반짝임 */

/* 별 크기 스타일 */
.estrela.tam1 { width: 1px; height: 1px; } /* 작은 별 */
.estrela.tam2 { width: 2px; height: 2px; } /* 중간 별 */
.estrela.tam3 { width: 3px; height: 3px; } /* 큰 별 */

/* 별 투명도 스타일 */
.estrela.opacity1 { opacity:  1; } /* 완전 불투명 */
.estrela.opacity2 { opacity: .5; } /* 반투명 */
.estrela.opacity3 { opacity: .1; } /* 거의 투명 */

/* 유성 스타일 - 흰색 점과 꼬리, -35도 회전 */
.meteoro {position: absolute;background-color: #fff;width: 2px;height: 2px;border-radius: 50%;transform: rotate(-35deg);animation-timing-function: linear;animation-iteration-count: infinite;animation-duration: 1s;}

/* 유성 꼬리 - 삼각형 모양으로 만들어짐 */
.meteoro:before {content: "";display: inline-block;vertical-align: middle;margin-right: 10px;width: 0;height: 0;border-top: 1px solid transparent;border-bottom: 1px solid transparent;border-left: 85px solid white;position: absolute;left: 2px;top: 0;}

/* 유성 경로 스타일 */
.meteoro.style1 { animation-name: meteoroStyle1; } /* 첫 번째 경로 */
.meteoro.style2 { animation-name: meteoroStyle2; } /* 두 번째 경로 */
.meteoro.style3 { animation-name: meteoroStyle3; } /* 세 번째 경로 */
.meteoro.style4 { animation-name: meteoroStyle4; } /* 네 번째 경로 */

/* 별 반짝임 애니메이션 - 그림자 효과로 반짝임 표현 */
@keyframes estrela {
0% {box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);} /* 희미한 빛 */
50% {box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.4);} /* 밝은 빛 */
100% {box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);} /* 다시 희미한 빛 */
}

/* 특별한 별 반짝임 애니메이션 - 색상 변화 포함 */
@keyframes estrelaDestacada {
0% {background-color: #FFFFFF;box-shadow: 0 0 10px 0px rgba(255, 255, 255, 1);} /* 흰색 */
20% {background-color: #FFC4C4;box-shadow: 0 0 10px 0px rgb(255, 196, 196, 1);} /* 분홍색 */
80% {background-color: #C4CFFF;box-shadow: 0 0 10px 0px rgb(196, 207, 255, 1);} /* 파란색 */
100% {background-color: #FFFFFF;box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);} /* 다시 흰색 */
}

/* 유성 경로 1 - 왼쪽 상단에서 오른쪽 하단으로 */
@keyframes meteoroStyle1 {
0% { opacity: 0; right: 100px; top: 100px; } /* 시작: 투명 */
30% { opacity: .3; } /* 서서히 나타남 */
60% { opacity: .3; } /* 유지 */
100% { opacity: 0; right: 600px; top: 600px; } /* 끝: 다시 투명 */
}

/* 유성 경로 2 - 더 오른쪽에서 시작 */
@keyframes meteoroStyle2 {
0% { opacity: 0; right: 150px; top: 150px; } /* 시작 */
30% { opacity: 1; } /* 완전히 나타남 */
60% { opacity: 1; } /* 유지 */
100% { opacity: 0; right: 700px; top: 600px; } /* 끝 */
}

/* 유성 경로 3 - 중간 높이에서 시작 */
@keyframes meteoroStyle3 {
0% { opacity: 0; right: 170px; top: 200px; } /* 시작 */
30% { opacity: 1; } /* 나타남 */
60% { opacity: 1; } /* 유지 */
100% { opacity: 0; right: 700px; top: 700px; } /* 끝 */
}

/* 유성 경로 4 - 오른쪽 중간에서 시작 */
@keyframes meteoroStyle4 {
0% { opacity: 0; right: 130px; top: 150px; } /* 시작 */
30% { opacity: 1; } /* 나타남 */
60% { opacity: 1; } /* 유지 */
100% { opacity: 0; right: 650px; top: 650px; } /* 끝 */
}

/* 회전 애니메이션 - 별자리 전체가 회전 */
@keyframes rotate {
  0% { -webkit-transform: rotate(0deg);} /* 0도 */
  100% {  -webkit-transform: rotate(360deg);} /* 360도 */
}