@charset "utf-8";
@import url("/thymeleaf/front/assets/css/fonts-f3f9f3f7b24c828575d3086af86237f6.css");
@font-face {
  font-family: 'FontAwesome';
  src: url('/thymeleaf/front/assets/images/fonts/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot');
  src: url('/thymeleaf/front/assets/images/fonts/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot') format('embedded-opentype'), 
		  url('/thymeleaf/front/assets/images/fonts/fontawesome-webfont-af7ae505a9eed503f8b8e6982036873e.woff2') format('woff2'), 
		  url('/thymeleaf/front/assets/images/fonts/fontawesome-webfont-fee66e712a8a08eef5805a46892932ad.woff') format('woff'), 
		  url('/thymeleaf/front/assets/images/fonts/fontawesome-webfont-b06871f281fee6b241d60582ae9369b9.ttf') format('truetype'), 
		  url('/thymeleaf/front/assets/images/fonts/fontawesome-webfont-acf3dcb7ff752b5296ca23ba2c7c2606.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* common */
html {scroll-behavior: smooth;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
ins {background-color:#fff; color:#1a1a1a; text-decoration:none;}
mark {background-color:#fff; color:#1a1a1a; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
i {font-style:normal;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
hr {display:block; height:1px; border:0; border-top:1px solid #5d5d5d; margin:1em 0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
li{list-style:none;}
img {border:0 none;}
.hidden, .blind {display: none;}
/* form reset */
input, select, textarea, button {border-radius:0; box-shadow:none;}
select {appearance:none;}
button, input[type="submit"] {cursor: pointer; border:0 none;}
input:focus, button:focus, select:focus, textarea:focus {outline:0;}
button::-moz-focus-inner {border:0 none; padding:0;}

html, body {width:100%; background-color:#f3f3f3/*#f9fafb*/; font-weight:300; font-family:'Noto Sans KR','Malgun Gothic', sans-serif; font-size:15px; color:#272727; letter-spacing:-0.5px;}
body,th,td,input,select,textarea,button,
a {font-weight:400; font-size:100%; font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; color:#5d5d5d; text-decoration:none;}
a {cursor:pointer;}
a:hover {color:#146af0; text-decoration:none;}
* {box-sizing:border-box;}
/* ===========================================================================
Margin, Padding, border
=========================================================================== */
.mr-0 {margin: 0px !important;}
.mrr-0 {margin-right: 0px !important;}
.mrr-6 {margin-right: 6px !important;}
.mrr-20 {margin-right: 20px !important;}
.mrr-40 {margin-right: 40px !important;}
.pd-0 {padding: 0px !important;}
.pdb-0 {padding-bottom: 0px !important;}
.pdb-5 {padding-bottom: 5px !important;}
.pdb-10 {padding-bottom: 10px !important;}
.pdb-15 {padding-bottom: 15px !important;}
.pdb-25 {padding-bottom: 25px !important;}
.pdb-30 {padding-bottom: 30px !important;}
.pdt-0 {padding-top: 0px !important;}
.pdt-10 {padding-top: 10px !important;}
.pdt-18 {padding-top: 18px !important;}
.pdt-15 {padding-top: 15px !important;}
.pdt-20 {padding-top: 20px !important;}
.pdt-30 {padding-top: 30px !important;}
.pdt-40 {padding-top: 40px !important;}
.pdl-28 {padding-left: 28px !important;}
.pdr-20 {padding-right: 20px !important;}
.mr-30 {margin: 30px 0 !important;}
.mrt-m11 {margin-top: -11px !important;}
.mrt-0 {margin-top: 0px !important;}
.mrt-5 {margin-top: 5px !important;}
.mrt-10 {margin-top: 10px !important;}
.mrt-40 {margin-top: 40px !important;}
.mrt-20 {margin-top: 20px !important;}
.mrt-24 {margin-top: 24px !important;}
.mrt-30 {margin-top: 30px !important;}
.mrb-0 {margin-bottom: 0px !important;}
.mrb-5 {margin-bottom: 5px !important;}
.mrb-10 {margin-bottom: 10px !important;}
.mrb-30 {margin-bottom: 30px !important;}
.mrb-20 {margin-bottom: 20px !important;}
.mrl-30 {margin-left: 30px !important;}
.mrl-50 {margin-left: 50px !important;}
.mrl-10 {margin-left: 10px !important;}
.mrl-20 {margin-left: 20px !important;}
.mrl-0 {margin-left: 0px !important;}
.bdr-0 {border-right:0 !important;}
.bdr-1 {border-right:1px solid #ebebeb !important;}
/* ===========================================================================
Font Color
=========================================================================== */
.fc-major1 {color:#146af0 !important;}
.fc-major2 {color:#272727 !important;}
.fc-red {color:#ea0000 !important;}
.fc-red2 {color:#ec6941;}

/* ===========================================================================
Spinner
=========================================================================== */
.spinner-container { margin-top: 200px; display: flex; justify-content: center; align-items: center; height: 240px;}
.spinner { width: 65px; height: 65px; border-radius: 50%; border: 5px solid #e0e0e0; border-bottom: 5px solid #146af0; animation: spin 1s linear infinite; position: relative;}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===========================================================================
Layout
=========================================================================== */
.my_wrapper {position:relative; width:100%; min-width:800px; transition:.3s;}
.my_wrapper.scroll {margin-top:-70px; }
.my_contents { width:100%; min-height: 800px; padding: 150px 0 60px 0; }
.inner {margin:0 auto; width:1280px; }
.flex {display: flex; justify-content: space-between; }
.respon {min-width: 320px;}

@media only screen and (max-width:1360px) { 
    .my_logo  {left:30px;}
    .my_header-etc {right:20px;}
    .inner {padding:100px 30px 40px 30px; width:100%;}
    .footer .info .inner {padding:0 40px;}
    .footer .copy div.inner {padding:0 40px !important;}
}

/* -------- Top -------- */
.my_header { position:absolute; top:0; left:0; z-index:99999; width:100%; height:72px;background:#146af0; box-shadow:0 0 10px rgb(0 0 0 / 35%); transition:.3s; text-align:center; color:#fff;}
.my_header.fixed {position:fixed; display: block; z-index: 9999999;}
.my_header.on { background:#146af0; }
.my_header span {box-sizing: border-box; color:#fff; font-size:18px; margin-left: 12px;}

/* -------- logo -------- */
.my_logo { position:absolute; width:220px; top:33%; font-size: 0; margin: 0; padding: 0; left:40px; text-align: left; z-index:99999999;}
.my_logo a {margin: 0; padding: 0;font-size: 0; }
.my_logo a img { width: 120px;}

/* -------- gnb -------- */
@media only screen and (min-width:1025px) { 
 
	.my_gnb { display:inline-block; text-align:center; vertical-align:top;}
	.my_gnb .depth1 { position:relative; display:inline-block; margin:0 15px; vertical-align:top;}
	.my_gnb .depth1 > a { position:relative; display:block; font-size:18px; line-height:72px; color:#fff; padding:0 16px;}
	.my_gnb .depth1 > a:after { content:''; position:absolute; bottom:-1px; left:0; width:100%; height:3px; background:#0078ff; transform:scale(0); transition:.3s;}
	.my_gnb .depth1:hover > a:after { transform:scale(1);}
	
    .fixed .my_gnb .depth1 > a ,
	.on .my_gnb .depth1 > a { color:#fff;}    
    .on .my_gnb .depth1 > a:hover { color:#0078ff; text-decoration: none; font-weight: 500;}
	.my_gnb .depth2 {display: none; position:absolute; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; transition:.3s;}
	.on .my_gnb2 .depth2 { padding:20px 0; height:auto; }
	.my_gnb .depth2 a { display:block; font-weight:400; font-size:15px; line-height:35px; color:#5d5d5d; transition:.3s;}
	.my_gnb .depth2 a:hover { color:#0078ff; }
	.my_gnb-bg { display: none; position:absolute; top:100%; left:0; z-index:11; margin-top:1px; width:100%; height:110px; background:#fff; box-shadow:0 0 15px rgb(0 0 0 / 15%); transition:.3s; }
   
    /* 20230217 navbar */
   .navbar {overflow: hidden; background-color: #146af0; text-align: center; margin: 0 auto; display: block; position: relative;}
   .main-menu {display: block; position: relative; margin: 0 auto; width:fit-content;}
   .main-menu ul {text-align: center; margin: 0 auto; display: flex; position: relative;}
   .main-menu ul li a {position: relative;display: inline-block; border: none; outline: none; color: #fff; width:auto; line-height:72px; color:#fff; padding:0 30px;color:#fff;font-size: 18px; font-weight: 500;}
   .main-menu ul li:hover {background-color: #2a4875; color:#fff; font-weight: 700; letter-spacing: -1px; border-top-left-radius:4px; border-top-right-radius:4px; position: relative; line-height:inherit;transition:.3s; cursor: pointer;}
   .main-menu ul li a:hover, .main-menu ul li a.btn-on {background-color: #2a4875; color:#fff; font-weight: 700; letter-spacing: -1px; border-top-left-radius:4px; border-top-right-radius:4px; position: relative; /*top: 19px; line-height: 52px;*/ transition:.3s; cursor: pointer;}
   
   .sub-menu {display: block; visibility: hidden; position: fixed; background-color: #fff; width:100%; left:0; right:0; top:70px; box-shadow: 0 3px 3px 0 rgb(0 0 0 / 6%); z-index: 1;}    
   .main-menu ul li a.mmenu-btn:hover .sub-menu, .main-menu ul li:hover .sub-menu {display: block; visibility: visible; width: auto;}
   .main-menu ul li div.show {display: block; visibility: visible;  width: auto;}
   .main-menu ul li div.sub-menu div.subbar {display: block; position: relative;}
   .sub-m01 {margin-left: -490px;}
   .sub-m02 {margin-left: -340px;}
   .sub-m03 {margin-left: -90px;}
   .sub-m04 {margin-left: 250px;}
   .main-menu ul li div.sub-menu div.subbar a {color: #333; padding: 0 16px; margin-right: 30px; font-size: 16px; line-height:60px; text-decoration: none; display: inline-block; text-align: center;}   
   .main-menu ul li div.sub-menu div.subbar a:hover {color: #146af0; background-color:#fff; font-weight: 500; letter-spacing: 0; border-top-left-radius:0; border-top-right-radius:0; position: relative; top: 0;}
}

@media only screen and (max-width:1270px) { 
    .dropdown .dropbtn {display: inline-block; font-size: 17px; font-weight: 500; border: none; outline: none; color: #fff; width:auto;  line-height:72px; margin: 0 2px; background:#146af0; color:#fff; padding:0 16px;}
    .dropbtn:hover, .dropdown .btn-on{background-color: #fff; color:#146af0; font-weight: 700; letter-spacing: -1px; border-top-left-radius:4px; border-top-right-radius:4px; position: relative; top: 10px; line-height: 52px;transition:.3s;}
}

/* -------- m-menu -------- */
@media only screen and (min-width:1025px) { 
    .gnb-m-menu {display: none;}    
}
@media only screen and (max-width:1024px) { 
	.my_header { height:72px; border-bottom:1px solid rgba(255,255,255,.2);}
	.my_header .gnb-m-menu .logo {display: block; position: relative; top:35px !important;}
    .my_header .gnb-m-menu .logo img {width:120px; text-align: center;}
	.my_header { border-color:#d3d5d8;}
	.my_header .gnb-m-menu { display:block; position:absolute; top:0; right:0; z-index:9999; max-width:480px; width:100%; height:100vh; background:#fff;}
    .my_header .gnb-m-menu .m-menu-btn {display: block;position: absolute; right: 20px; margin-top: 15px; width: 36px; height: 36px;z-index:99999;}
    .my_header .gnb-m-menu .m-menu-btn img {width:36px;}
	.my_header .m-header-bg { display:none; position:fixed; top:0; right:0; z-index:666; width:100%; height:100%;}
	.my_header .gnb-m-menu:after { content:''; position:absolute; top:0; right:0; z-index:1; width:100%; height:72px; background:#146af0;}
	.my_header .gnb-m { overflow-x:hidden; padding:135px 20px 0; height:100vh; background:#fff;}
	.my_header .gnb-m > ul { overflow-x:hidden; max-height:100%; border:1px solid #ebebeb; background:#fff;}
    .my_header .gnb-m > ul > li {text-align: left;}
	.my_header .gnb-m > ul > li > a { position:relative; display:block; padding:0 20px; border-top:1px solid #ebebeb; font-weight:400; font-size:16px; line-height:52px; color:#272727; letter-spacing:0; text-align: left;}
	.my_header .gnb-m > ul > li:first-child > a { border-top:0 none;}
	.my_header .gnb-m > ul > li > a:before ,
	.my_header .gnb-m > ul > li > a:after { content:''; position:absolute; top:50%; background:#5d5d5d; transition:.3s;}
	.my_header .gnb-m > ul > li > a:before { right:20px; margin-top:-1px; width:12px; height:2px;}
	.my_header .gnb-m > ul > li > a:after { right:25px; margin-top:-6px; width:2px; height:12px;}
	.my_header .gnb-m > ul > li ul { display:block; padding:0 0 15px;}
	.my_header .gnb-m > ul > li ul a { padding:0 20px 0 25px; line-height:35px; width: 100%; text-align: left;}
	.my_header .gnb-m > ul > li ul a:before { content:''; display:inline-block; margin-right:7px; width:3px; height:3px; border-radius:50%; background:#999; vertical-align:middle;}
	.my_header .gnb-m > ul > li ul a:hover { color:#146af0;}
	.my_header .gnb-m > ul > li.on { background:#f9f9f9;}
	.my_header .gnb-m > ul > li.on > a { color:#146af0;}
	.my_header .gnb-m > ul > li.on > a:after { opacity:0;}

	.my_header .header-utils { position:absolute; top:61px; left:20px; z-index:44; width:calc(100% - 40px); border:1px solid #ebebeb; background:#fff; text-align:center;}
	.my_header .header-utils dd { display:inline-block; vertical-align:top;}
	.my_header .header-utils dd:last-child { margin-left:0;}
	.my_header .header-utils dd a { position:relative; padding:0 10px; font-size:14px; line-height:55px; color:#272727;}
	.my_header .header-utils dd a:before { content:''; position:absolute; left:0; top:50%; display:block; margin-top:-6px; width:1px; height:12px; background:rgba(34,44,62,.3);}
	.my_header .header-utils dd:first-of-type a:before { display:none;}    
}

/* -------- m-menu -------- */
.m-menu {display: inline-block; position: relative; width: 100%; min-width: 320px; top:0; right: 0; margin-right: 0; text-align: right; z-index: 99999;}

.m-menu input[type=checkbox]{display: none;}
.m-menu input[type=checkbox]+label{
    display: inline-block; position: absolute;
    background: url('/thymeleaf/front/assets/images/btn-m-menu-w-5dd7b53449e5395dcaa10e504f5be8c7.png') no-repeat center center;
    background-size: 40px; right: 30px; top:0; width: 40px; height: 40px; margin: 0; padding: 0; font-size: 0; border:0; 
    z-index: 999999;cursor: pointer; transition: .3s;}
.m-menu input[type="checkbox"] + label:before {display: none;}
.m-menu input[type=checkbox]+label>span{font-weight: bold;}
.m-menu input[type=checkbox]:checked+label{background-image: url('/thymeleaf/front/assets/images/btn-m-menu-x-6a11bc859b55b37bc30b54db10014382.png'); transition: .3s; top:15px;}

.m-menu .menuitems{display: none;list-style: none; background-color: #fff; height: 100vh; margin: 72px 0; padding: 30px; z-index: 999999;}
.m-menu .menuitems li{padding: 6px; /*border-bottom: 1px solid #ebebeb;*/ z-index: 9999999; text-align: left; font-size: 18px; font-weight: 500; color:#146af0 !important; line-height: 32px;}
.m-menu .menuitems li:last-child{border-bottom: 0;}
.m-menu .menuitems li a{text-decoration: none; font-size: 16px; font-weight: 500; transition: .3s;}
.m-menu .menuitems li a:hover{margin-left: 0;}
.m-menu .menuitems li span.pad{padding: 5px; color:#5d5d5d; margin-left: 0;}

.m-menu input[type=checkbox]:checked~.menuitems{display: block;}
.m-menu input[type=checkbox]:checked~.m-menu-bg{display: block; position: absolute; width: 100%; height: 100vh; top:0; background-color: #000; opacity: 0.7;}
.m-menu input[type=checkbox]:checked~.customer-info{display: block;}
.customer-info {position: absolute; left: 6px; text-align: left; padding: 40px 30px; width: 100%;}
.customer-info h2 { margin-bottom: 15px; font-weight: 500; font-size: 15px; color: #146af0;}
.customer-info dl {margin-top: 10px; font-size: 0;}
.customer-info dl dt { display: inline-block; width: 80px; font-weight: 300; font-size: 14px; color: #272727; vertical-align: middle;}
.customer-info dl dd {display: inline-block; width: calc(100% - 85px); font-weight: 500; font-size: 20px; color: #146af0; letter-spacing: 0; vertical-align: middle;}
.customer-info p { margin-top: 25px; font-weight: 300; font-size: 13px; line-height: 1.5; color: #272727; letter-spacing: 0;}

/* 모바일 메뉴 accordion */
.accordion {background-color: #ffffff;cursor: pointer;padding: 10px 0; margin:0; width: 100%;outline: none;border: none;text-align: left;font-size: 16px; font-weight: 400; line-height: 24px; transition: 0.4s;} 
.active, .accordion:hover {border-bottom: 1px solid #ebebeb; font-weight: 500; color:#146af0; box-shadow:none; border-top:0; border-left:0; border-right:0;} 
.accordion:after {content: '\002B';font-weight: 400; font-size: 30px; float: right;margin-left: 5px;} 
.active:after {content: "\2212";} 
.panel {padding: 0px 16px; background-color: #ffffff;max-height: 0; overflow: hidden;transition: max-height 0.2s ease-out; border-bottom: 1px solid #eeeeee;}
.panel p a {font-weight: 400 !important;}
.m-menu .menuitems li a.m_btn {display: inline-block; border: 1px solid #ccc; border-radius: 4px; padding: 2px 18px; margin-right:4px; font-size: 14px;}
.m-menu .menuitems li a {text-decoration: none; font-weight: 500; transition: .3s;}


@media only screen and (min-width:1025px) { 
    .gnb-m-menu, .m-menu, .m-menu-bg, .customer-info {display: none;}
}
@media only screen and (max-width:1024px) {
    .my_gnb, .navbar, .my_header-etc {display:none;}
    .my_m-menu-btn {display: block; position: relative; background: url('/thymeleaf/front/assets/images/btn-m-menu-fc673e533b895b98f4f1a70925d4a1ec.png') no-repeat center center; background-size: 40px; right: 30px; top:24%;
    z-index: 999; width: 40px; height: 40px; margin: 0; padding: 0; font-size: 0; border:0; cursor: pointer;}
    .my_m-menu-btn:hover {box-shadow: none;}
    .gnb-m-menu, .m-menu {display: inline-block;}    
	/*.my_header { height:72px; text-align: right; border-bottom:1px solid rgba(255,255,255,.2);}*/
}
/* -------- header-etc -------- */
@media only screen and (min-width:1025px) { 
	.my_header-etc {position:absolute; top:25px; right:30px; font-size:14px; }
	.my_header-etc li {display:inline-block; margin-left:7px; vertical-align:middle; }
    .my_header-etc li:after {content: ''; position: absolute; top: 8px; right:78px; width: 1px; height: 10px;background: #fff;}
	.my_header-etc li a, .my_header-etc li a span {display:block; padding:0 10px; font-size:14px; line-height:24px; color:#fff;}
    .my_header-etc li:hover .personal-wrap {display: block;}
	.fixed .my_header-etc li ,
	.on .my_header-etc li {border-color:#fff; height: 36px;}
	.fixed .my_header-etc li a ,
	.on .my_header-etc li a {color:#fff; }
    .personal-wrap {display: none; position: absolute; right: 0px; margin-top:10px; padding: 20px; background-color: #fff; box-shadow: 1px 0 3px rgb(0 0 0 / 20%); transition: .3s; border-radius: 8px; z-index: 2;}
    .personal_info {display: flex;}
    .personal_info p.mark {width:40px; height: 40px; font-size: 18px; font-weight: 400; line-height: 210%; border-radius: 50%; background-color: #6699ff;}
    .personal_info p.master_info {font-size: 14px; color:#272727; margin-left: 8px; font-weight: 400; text-align: left;}
    .personal_info p.master_info span {display: block; font-size: 12px; color: #146af0; margin-left: 0px;}
    .personal-wrap .btn-wrap {margin-top: 15px; width:202px;}
    .personal-wrap .btn-wrap button {padding: 8px 14px; margin-bottom: 5px; border:1px solid #dbdbdb; border-radius: 4px; background-color: #fff; font-size: 13px; color: #272727; font-weight: 400;}
    .personal-wrap .btn-wrap button.on {color:#146af0; border-color: #69a4ff; background-color: #f7f9ff;}
    .personal-wrap .btn-wrap button:hover {box-shadow: 1px 0 3px rgb(0 0 0 / 20%);transition: .3s;}
    .personal-wrap .btn-wrap2 {margin-top: 5px; width:202px; display: flex; align-content: space-between;}
    .personal-wrap .btn-wrap2 button {width:100px; height:36px; padding: 5px 10px; border:1px solid #dbdbdb; border-radius: 4px; background-color: #f9f9f9; font-size: 13px; color: #272727; font-weight: 400;}
    .personal-wrap .btn-wrap2 button.on {color:#146af0; border-color: #69a4ff; background-color: #f7f9ff;}
    .personal-wrap .btn-wrap2 button:hover {box-shadow: 1px 0 3px rgb(0 0 0 / 20%);transition: .3s;}
}

/* -------- quick-menu -------- */
.quick-menu { position:fixed; top:60%; right:0; z-index:999; margin-top:-215px; width:120px;}
.quick-menu li { display:table; width:100%; height:50px; border-radius:25px 0 0 25px; background:#fff; text-align:center; margin: 10px;}
.quick-menu li a {display:table-cell; vertical-align:middle;transition:.3s;border-radius:25px 0 0 25px;font-weight:400; font-size:16px; color:#fff; background-color: #146af0; box-shadow: 2px 2px 6px rgb(0 0 0 / 20%);}
.quick-menu li a:hover {background-color: #272727; color:#fff; border-radius:25px 0 0 25px; text-decoration: none;}
.quick-menu li span { display:block; }
.quick-menu li .bg_vio {background-color:#7b53ff;}
.quick-menu li .bg_vio:hover {background-color: #272727; color:#fff; text-decoration: none;}
.quick-menu li .bg_org {/*background-color:#ef7600;*/}
.quick-menu li .bg_org:hover {background-color: #272727; color:#fff; text-decoration: none;}
.quick-menu li.forpc {display: table;}
.quick-menu li.formobile {display: none;}

@media only screen and (max-width:1024px) { 
    .btn-circle-top {bottom:150px; right: 15px;}
	.quick-menu { display: none;  top:auto; bottom:0; margin-top:0; width:100%; border-radius:0; background:#fff; align-content: space-between; z-index: 9999;}
    .quick-menu li.forpc {display: none;}
    .quick-menu li.formobile {display: none;}
	.quick-menu li { width:50%;border-radius:0; background:#fff; font-weight:300; font-size:16px; color:#5d5d5d; text-align:center; margin:0px; }
    .quick-menu li a {border-radius:0; box-shadow: 2px 2px 6px rgb(0 0 0 / 80%);}
    .quick-menu li a:hover {background-color: #272727; color:#fff; border-radius:0;}    
}
@media only screen and (max-width:640px) { 
	.quick-menu li { height:45px; }
	.quick-menu li a img { display:inline-block; margin-right:3px; height:13px; vertical-align:middle; }
	.quick-menu li a span { display:inline-block; font-size:14px; font-weight: 400; vertical-align:middle; }
}

/* -------- ServiceHome-popup -------- */
.popup-container { display:block; position:fixed; top:0; left:0; z-index:99999999; width:100%; height:100vh; background:rgba(0,0,0,.80); }
.popup-container .popup-layer {overflow:hidden; position:fixed; width:450px; height: s0px; top:50%; left:50%; background:url('/thymeleaf/front/assets/images/service/popup_coupon_bg-3f36a335c427dc14677c1f143e04da7a.png') no-repeat center top; transform:translate(-50%,-50%); border-radius:15px;}
.popup-container .popup-layer a { display:block; }
.popup-container .popup-conts {display: block; position: relative;}
.popup-container .popup-layer .coupon-top {display: block; position: relative; height: 216px; color:#000;}
.popup-container .popup-layer .coupon {display: block; position: relative; color:#000; height: 162px;}
.popup-container .popup-layer .coupon div {display: block; position: relative; color:#fff; height: 30px; margin-left: 95px;}
.popup-container .popup-layer .coupon div.txt2 {height: 24px;font-size: 20px;}
.popup-container .popup-layer .coupon div.cname {width:264px; height: 52px; font-size: 20px; line-height: 54px; letter-spacing: -1px; color:#64faff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.popup-container .popup-layer .coupon div.cname:after {content: ''; display: block; border-bottom: 1px solid #64faff; width: auto; margin-top: -7px;}
.popup-container .popup-layer .coupon strong {display: inline-block; position: relative; width: auto; max-width: 146px; font-size: 16px; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.popup-container .popup-layer .coupon span {display: inline-block; position: relative; font-size: 14px; top: -8px;}
.popup-container .popup-layer .coupon-btn {display: block; position: relative; margin: 0 auto; height: 72px; text-align: center; color:#000;}
.popup-container .popup-layer button {display: inline-block; width:auto; padding: 8px 16px; margin: 0 auto; text-align: center; border-radius: 4px; font-size: 15px; color: #272727; font-weight: 600; letter-spacing: -1.8px; background-color: #fff; border: 1px solid #dadada;}
.popup-container .popup-layer button.down {background: #3884fb; border:1px solid #3173db; color:#fff;}
.popup-container .popup-layer button.list {margin-left: 5px;}
.popup-container .popup-layer img {max-width: 100%;}
.popup-container .popup-footer { display:inline-block; width:100%; height:60px; background:#f2f2f2; font-size:0;}
.popup-container .popup-footer input { display:none;}
.popup-container .popup-footer label { display:inline-block; width:calc(100% - 120px); font-weight:300; font-size:15px; line-height:60px; color:#272727; cursor:pointer; }
.popup-container .popup-footer label:before { content:''; display:inline-block; margin-right:7px; width:20px; height:20px; border-radius:50%; background:rgba(65,67,72,.2) url('/thymeleaf/front/assets/images/popup/check-7936ea312a114b56de44f97ab30ace5c.png') no-repeat 49% center; vertical-align:middle;}
.popup-container .popup-footer input:checked + label:before { background-color:#146af0;}
.popup-container .popup-footer .popup-close { display:inline-block; width:70px; font-weight:400; font-size:16px; line-height:60px; color:#272727; text-align:right; }

/* -------- popup -------- */
.popup-wrap, .popup-wrap2, .popup-wrap3,.popup-wrap4 {
  display:none;
  width:100%; height: 100vh;
  background-color:rgba(0,0,0,.6);
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 99999999;
}
.popup{
  position:fixed;
  width:720px; height: auto;
  border-radius:10px;
  overflow:hidden;
  background-color:#146af0;
  box-shadow: 3px 8px 8px 1px rgb(0 0 0 / 15%); 
  z-index: 9999999;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
}
.payinfo {width:820px;}
.popup-head{
  height:72px;
  display:flex;
  align-items:center; margin: 0 30px;
}
.head-title {color:#fff; font-size: 24px; font-weight: 400; text-align: left;}
.popup-head a {display: block; position: absolute; right:22px; width:40px; height: 40px;}
.popup-head a img {width:40px; height: 40px;}
.popup-body{
  width:100%;
  background-color:#ffffff;
}
.body-content{
  width:100%;
  padding:30px 40px 30px 40px;
}
.body-titlebox{ 
  text-align:left;
  width:100%;
  height:40px;
  margin-bottom:10px;
}
.body-titlebox h2 {font-size: 16px; color:#5d5d5d; font-weight: 400;}
.body-contentbox{ 
  word-break:break-word; page-break-before:always; 
  overflow-y:auto;
  max-height:360px;
}
.body-contentbox h3 { text-align: left; font-size: 18px; color: #272727; font-weight: 500; margin-bottom: 10px;}
.body-content .pay_item {display: table-row;}
.body-content .pay_item th {width:160px;}
.body-content .pay_item td {width:460px; display: block;}
.body-content select, input[type="text"], input[type="password"], input[type="email"], select, .body-content .pay_item .btn_search {height: 42px;}
.body-content .info_item th {width: 30%; padding: 15px !important;}
.body-content .info_item td {width: 70%; padding: 15px !important;}
.body-content .pay_history table {min-width:640px !important;}
.body-content .pay_history caption {font-size: 18px; color: #272727; font-weight: 500; margin-bottom: 10px}
.body-content .pay_history table td.priceinfo {text-align: right; padding-right: 10px;}
.body-content .pay_history table td.priceinfo strong {color:#146af0; font-size: 18px;}
.popup-body .info_default .info_item th, .popup-body .payment_type .pay_item th {padding: 15px 0 15px 15px;}
.popup-body .receipt_info .pay_item th {padding: 20px 0 20px 15px; vertical-align: top;}

.popup-foot{ background-color:#fff; border-top: none;}
.pop-btn-wrap{
  display:flex; position: relative;
  width:50%; padding-bottom: 20px; margin: -3px auto 0 auto;
  justify-content:center;
  align-items:center;
  text-align: center;
  color:#fff; 
  cursor:pointer;
}
.pop-btn-wrap button {margin-top: 0; padding: 12px; font-size: 16px;}
.pop-btn-wrap button:last-child {margin-left: 20px; }

/* -------- location -------- */
.my_location {height:36px; color:#272727; font-size: 14px; font-weight: 400; text-indent: 8px;}
.my_location span { display:inline-block; width:20px; text-align: center;}

/* -------- title -------- */
.my_title h2 {font-size: 24px; color: #1a1a1a; height: 60px; display: block; position: relative;}
.my_title h2.icon, .my_title h2.icon2, .my_title h2.icon3, .my_title h2.icon4, .my_title h2.icon5, .my_title h2.icon6 {text-indent: 38px;}
.my_title h2.icon:before {content: ''; display: inline-block; position:absolute; top:3px; left: 4px; width:28px; height: 28px; background: url(/thymeleaf/front/assets/images/service/icon_setting-a2b53d628ac79f6505f0fae25d672a1a.png) no-repeat center center; background-size: 28px;}
.my_title h2.icon2:before {content: ''; display: inline-block; position:absolute; top:3px; left: 4px; width:28px; height: 28px; background: url(/thymeleaf/front/assets/images/myq/icon_myq-e67273a15490302843f8ad4fbdbde801.png) no-repeat center center; background-size: 28px;}
.my_title h2.icon3:before {content: ''; display: inline-block; position:absolute; top:3px; left: 4px; width:28px; height: 28px; background: url(/thymeleaf/front/assets/images/payment/icon_card-25d45f6fc911a246b386277cf8f98b80.png) no-repeat center center; background-size: 28px;}
.my_title h2.icon4:before {content: ''; display: inline-block; position:absolute; top:3px; left: 4px; width:28px; height: 28px; background: url(/thymeleaf/front/assets/images/service/icon_service-16362cfc9e63ce6110c4393978160597.png) no-repeat center center; background-size: 28px;}
.my_title h2.icon5:before {content: ''; display: inline-block; position:absolute; top:3px; left: 4px; width:28px; height: 28px; background: url(/thymeleaf/front/assets/images/myinfo/icon_manage-74ffe5c69574f3d5e0648d6b5a56084d.png) no-repeat center center; background-size: 28px;}
.my_title h2.icon6:before {content: ''; display: inline-block; position:absolute; top:3pxs; left: 4px; width:28px; height: 28px; background: url(/thymeleaf/front/assets/images/myinfo/icon_bill-1572d9af24f7dbc8e85fbeecd253747a.png) no-repeat center center; background-size: 28px;}

/* -------- message -------- */
.message-wrap .pay_message {width: 96% !important;margin: 0 auto !important;}
.message-wrap .pay_message h3, .myq_message h3 {font-size: 16px; font-weight: 400; color:#272727; text-indent: -20px;}
.message-wrap .pay_message h3 strong, .myq_message h3 strong {font-size: 16px; color: #146af0;}
.message-wrap .pay_message ul, .myq_message ul {display: block; margin-top: 10px;color:#272727;}
.message-wrap .pay_message ul li, .myq_message ul li {padding: 3px; font-size: 15px; text-indent: -10px;}
.message-wrap .pay_message ul li span, .myq_message ul li span {display: inline-block;}
.message-wrap .pay_message ul li strong.highlight {background-color:#e2edff; color:#146af0;}
.message-wrap .guide_message {font-size: 16px;}
.message-wrap .guide_message h3 {font-size: 16px; font-weight: 400; color:#272727; text-indent: -20px;}
.message-wrap .guide_message h3 strong {font-size: 16px; color: #146af0;}
.guide_message ul {display: block; margin-top: 10px; color:#272727;}
.guide_message ul li {font-size: 15px; padding: 3px; text-indent: -10px;}
.guide_message ul li span {display: inline-block;}
.myq_message {width: 96% !important;margin: 0 auto !important; display: flex; align-content: space-between; align-items: center;}
.myq_message .left {display: block; width: 80%;}
.myq_message .right {display: block; width: 20%; position: relative;}
.myq_message .right button {margin: 0; position: absolute; top:-24px; right:-20px; width:160px; white-space: nowrap; word-break: keep-all;}

/* -------- form -------- */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label:before {
    width: 14px; height: 14px; vertical-align: middle;
}
input[type="checkbox"] + label {
    display: inline-block;
    margin: 0 5px 0 19px;
    font-size: 14px;
    line-height: 20px;
    color: #272727;
    vertical-align: top;
    cursor: pointer;
}
input[type="checkbox"] + label:hover {color:#146af0;}

input[type="checkbox"] + label:before {
    content: '';
    display: inline-block;
    margin-right: 7px;
    width: 20px;
    height: 20px;
    border: 1px solid #dadada; border-radius: 4px; background-color: #fff;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
}
input[type="checkbox"]:checked + label:before {
    content: '\f00c';
    border-color: #146af0;
    background: #146af0;
    font-size: 12px;
    line-height: 18px;
    font-family: 'fontAwesome';
    color: #fff;
}
input[type="radio"]:checked + label:before { border: 5px solid #146af0;}

select,
input[type="text"],
input[type="password"],
input[type="email"],
select { width:100%; height: 42px; padding:0 10px; border:1px solid #dadada; border-radius: 4px;}
input[type="radio"] {width:20px; height: 20px; margin: 20px 10px 0px 20px; font-weight: 400; font-size:14px;cursor: pointer;}
button { display: block; width: 100%; padding: 14px; margin: 30px auto 10px auto; text-align: center; border-radius: 4px; font-size: 18px; color: #272727; font-weight: 400; background-color: #fff; border: 1px solid #dadada;}
button.on {background-color: #146af0; color:#fff; border-color:#146af0;}
button:hover, .btn-confirm:hover  {box-shadow:1px 1px 5px 1px rgb(0 0 0 / 20%); transition:.3s;}

/* no-service */
.no-service-wrap { text-align:center; margin: 40px 0; }
.no-service-wrap .no-service-wrap-title { font-weight:400; font-size:28px; line-height:1.4; color:#272727; }
.no-service-wrap .no-service-wrap-title strong { font-weight:500; font-size: 27px; color:#146af0; }
.no-service-wrap .no-service-wrap-title:before { content:''; display:block; margin:0 auto 30px; width:140px; height:140px; border-radius:50%; background:#f2f2f2  url('/thymeleaf/front/assets/images/icon_service2-ed0e05e905e1d0de0235a6db5cceb615.png') no-repeat center center; background-size: 60%;}
.no-service-wrap .no-service-wrap-title + p { margin:20px 0 45px; font-size:18px; line-height:1.2; color:#5d5d5d; word-break:keep-all; }
.no-service-wrap .btn-confirm { display:block; margin:0 auto; width:300px; background:#146af0; font-weight:400; font-size:20px; line-height:55px; color:#fff; text-align:center; border-radius: 4px;}

/* error */
.error-wrap { text-align:center; margin: 40px 0; }
.error-wrap .error-wrap-title { font-weight:400; font-size:28px; line-height:1.4; color:#272727; }
.error-wrap .error-wrap-title strong { font-weight:500; font-size: 27px; color:#146af0; }
.error-wrap .error-wrap-title:before { content:''; display:block; margin:0 auto 30px; width:140px; height:140px; border-radius:50%; background:#f2f2f2  url('/thymeleaf/front/assets/images/icon_warning-162f1db4b877ae1423aac22c7295b8b5.svg') no-repeat center center; background-size: 70%;}
.error-wrap .error-wrap-title + p { margin:20px 0 45px; font-size:18px; line-height:1.2; color:#5d5d5d; word-break:keep-all; }
.error-wrap .btn-confirm { display:block; margin:0 auto; width:300px; background:#146af0; font-weight:400; font-size:20px; line-height:55px; color:#fff; text-align:center; border-radius: 4px;}

@media only screen and (max-width:768px) {
	.error-wrap .error-wrap-title { font-size:24px; }
	.error-wrap .error-wrap-title:before { margin-bottom:25px; width:100px; height:100px; background-size:50% auto; }
	.error-wrap .error-wrap-title + p { margin:25px 0 30px; font-size:14px; }
	.error-wrap .btn-confirm { width:70%; font-size:18px; line-height:55px; }
	.btn-circle-top { bottom: 33px; left: 15px !important; width:50px !important; height: 42px !important; border-top-left-radius:20px; border-top-right-radius:20px;}
}
.signup_reg .old_link {display: block; width: 100%; text-align: center; color:#272727; background-color: #f7f7f7; /*border: 1px solid #b4c1f4;*/margin-top: 30px; padding: 20px 10px; border-radius: 4px; /*box-shadow: 0px 3px 3px 0px rgb(38 38 38 / 15%);*/}

.sitelink {display: inline-block; width:auto; margin: 20px auto 0 auto; padding: 10px 50px; background-color: #222c3e; color:#fff !important; border-radius: 25px;transition:all 0.5s; white-space:nowrap;}
.sitelink:hover{transform:translateX(-2px) translateY(-2px);box-shadow: 2px 4px 0px 0px rgba(0, 0, 0, 0.2);transition:all 0.3s;}

/* -------- footer -------- */
.footer {overflow:hidden; width:100%;}

/* footer siteinfo */
.footer .wrap_siteinfo {background:#272727;}
.footer .wrap_siteinfo a {color:#e9e9e9;}
.footer .wrap_siteinfo a:hover {color:#89b7ff !important;}
.footer .wrap_siteinfo .inner {display: flex; align-content: space-between;}
.footer .wrap_siteinfo .sitenav {padding-top: 64px;}
.footer .wrap_siteinfo .siteinfo {width: 280px; }
.footer .wrap_siteinfo h2.logo {display: inline-block; font-size:0; position: relative; top:0; left:0 !important; margin-top: 0;}
.logo_ img {width:90%; }
.footer .wrap_siteinfo .contactus {margin-top: 20px; color:#e9e9e9; font-size:14px; line-height: 1.8;}
.contactus li {letter-spacing: 1.4px;}
.contactus li.tel {font-size:32px; font-weight: 700; color:#89b7ff; line-height: 1.8;}

.footer .sitemap {/*margin-left:120px;*/ text-align: left; flex: 1; text-align: right;}
.footer .sitemap .list_menu {width:auto;}
.footer .sitemap .list_menu > li {display: inline-block; flex: 1; vertical-align: top; padding: 0 10px 0 40px; text-align: left;}
.footer .sitemap .list_menu > li > a {color:#fff; font-size: 16px}
.footer .sitemap .list_sub {margin-top: 10px}
.footer .sitemap .list_sub li a {color:#e9e9e9; font-size:14px; line-height: 2.5 }

/* footer info */
.footer .info {padding:20px 0;margin-top: 20px; border-bottom: 1px solid #3C3E47;}
.footer .info .inner {display: flex;}
.footer .info .inner>div {}
.footer .info .copyright {font-size: 14px; color:#e9e9e9}
.footer .info .link {text-align: left;}
.footer .info .link li {display: inline-block; position: relative; padding:0 20px 0 0;}
.footer .info .link li:after {content: ''; position: absolute; top: 7px; right: 0; width: 1px; height: 12px; background: #e9e9e9;}
.footer .info .link li a {color:#e9e9e9; line-height: 1; font-size:14px; }
.footer .info .link li:last-child {padding-left:20px;}
.footer .info .link li:last-child::after {display: none;}
.footer .copy{padding:8 0 20px 0; /*border-top: 1px solid #3C3E47;*/}
.footer .copy address { padding: 20px 0; font-style:normal; width:100%}
.footer .copy address span { position:relative; display:inline-block; margin-right:30px; margin-bottom:7px; font-weight:300; font-size:13px; font-family:'Roboto', 'Noto Sans KR', sans-serif; color:rgba(255,255,255,.8); letter-spacing:-0.5px; word-break:keep-all; vertical-align:top; }
.footer .copy address span:first-child { display:block; margin-bottom:5px; }
.footer .copy address span:after { content:''; position:absolute; top:5px; left:100%; margin-left:16px; width:1px; height:10px; background:rgba(255,255,255,.4); }
.footer .copy address span:nth-of-type(1):after ,
.footer .copy address span:nth-of-type(4):after ,
.footer .copy address span:nth-of-type(7):after ,
.footer .copy address span:nth-of-type(8):after { display:none; }
.footer .copy address strong { font-weight:500; font-size:14px; color:#fff; }
.footer .copy address .copy { display:block; margin-top:0px; margin-bottom:0;}

.btn-circle-top { position: fixed; right: 15px; bottom: -10px; z-index: 99; width: 60px; height: 52px; border-top-left-radius: 25px; border-top-right-radius: 25px; box-shadow: 0 0 20px rgb(6 80 129 / 15%); background: #fff url(/thymeleaf/front/assets/images/btn_circle_up-fc6b20f4f72cf33d76bdee135d424b03.svg) no-repeat center center; font-size: 0; background-size: 50%;}

.recaptcha-wrapper {display: flex; justify-content: center; background-color: #fafafa; padding-bottom: 10px !important; border-radius: 4px;}