@charset "utf-8";
/* CSS Document */

@import url("/css/esy-ui.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500&family=Roboto:wght@400;500;700&display=swap');



@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'),
 url(../fonts/NotoSansKR-Thin.woff) format('woff'),
 url(../fonts/NotoSansKR-Thin.otf) format('opentype');} 

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(../fonts/NotoSansKR-Light.woff2) format('woff2'),
 url(../fonts/NotoSansKR-Light.woff) format('woff'),
 url(../fonts/NotoSansKR-Light.otf) format('opentype');  } 

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
 url(../fonts/NotoSansKR-Regular.woff) format('woff'),
 url(../fonts/NotoSansKR-Regular.otf) format('opentype');  } 

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(../fonts/NotoSansKR-Medium.woff2) format('woff2'),
 url(../fonts/NotoSansKR-Medium.woff) format('woff'),
 url(../fonts/NotoSansKR-Medium.otf) format('opentype'); } 

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
 url(../fonts/NotoSansKR-Bold.woff) format('woff'),
 url(../fonts/NotoSansKR-Bold.otf) format('opentype'); } 

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 900; src: url(../fonts/NotoSansKR-Black.woff2) format('woff2'),
 url(../fonts/NotoSansKR-Black.woff) format('woff'),
 url(../fonts/NotoSansKR-Black.otf) format('opentype'); } 

@font-face {
 font-family: 'NanumSquare';
 font-weight: 400;
 src: url(../fonts/NanumSquareR.eot);
 src: url(../fonts/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquareR.woff) format('woff'),
      url(../fonts/NanumSquareR.ttf) format('truetype');
      unicode-range:U+0030-0039;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
html,
body { width: 100%; height: 100%; font-size:14px; font-family: 'Roboto','Noto Sans KR', 'helvetica', sans-serif;  } 
body { background: #fff; box-sizing: border-box}
body,
ul,
li,
dl,
dt,
dd,
h1,
div,
button { margin: 0px; padding: 0px;  box-sizing: border-box; } 
body,
textarea,
select,
button,
p { color: #555; } 
li { list-style: none}
img { border: 0px; vertical-align: top; } 
body,
ul,
li,
dl,
dt,
dd,
h1,
p,
input { margin: 0px; padding: 0px; } 
input { font-size: 12px; } 
fieldset button { border: 0}
table { border-collapse: collapse; border-spacing: 0; font-size: 14px; } 
input,
textarea { font-size: 12px; } 
button { cursor: pointer; border: none; margin: 0px; outline: 0}
a { text-decoration: none}
a:active,
a:hover { text-decoration: none}
h1,h2,h3 { margin: 0; padding: 0; font-weight: 600; } 
input[type=text],
input[type=password],
select { width: 100%; padding:3px; border-radius: 2px; box-sizing: border-box; resize: vertical; border: 1px solid #C9C9C9; font-size: 14px!important; font-family: initial; outline: none ;height:30px!important; outline: none} 
textarea {width: 100%; padding:3px; border-radius: 2px; box-sizing: border-box; resize: vertical; border: 1px solid #C9C9C9; font-size: 14px!important; font-family: initial; outline: none }
textarea:focus, input:focus{ outline: none;}
::placeholder { color: #aaaaaa; } 
.shadow { -webkit-box-shadow: 0px -5px 10px -3px rgba(0,0,0,0.25); box-shadow: 0px -5px 10px -3px rgba(0,0,0,0.25)!important; } 
input[type=number] { padding:5px; border-radius: 4px; box-sizing: border-box; resize: vertical; border: 1px solid #C9C9C9; font-size: 1em;}

input[type="checkbox"] + label { background: url(../images/img_ck_blank.png) no-repeat left center; padding-left: 25px; cursor: pointer;  padding-right: 15px;}

input[type="checkbox"]:checked + label {background-image: url(../images/img_check.png);}
input[type="checkbox"]:checked {background-image: url(../images/img_check.png);}
input[type="checkbox"] {  position: absolute; opacity: 0;  width: 0;  height: 0;}
.wrap { width: 100% ; height: 100%; min-height: 100%; }


.wrap #isover.main {  margin-top: 58px; border-top: 10px solid #ffd504;  padding-top: 0; position: relative}
.wrap #isover.main .ui-key .slogan + p { font-size: 25px ; line-height: 40px ; width: 80% ; letter-spacing: -1px}
.wrap #isover.main .ui-key { width:720px; cursor:pointer; height: 500px ; position: relative ; padding: 190px 40px ; float: left; }
.wrap #isover.main #ui-key-click { width:110%; height:350px; margin-top:-180px; margin-bottom:-170px; margin-left: -20px; cursor:pointer }
.wrap #isover.main #ui-key-click img { width:105%; height:127%; margin-left: -20px; margin-top: -10px; }
.wrap #isover.main .ui-key .slogan { font-size: 40px ; margin-bottom: 20px}
.ui-key .prod { position: absolute ; font-size: 0 ; width: 230px; height: 230px ; right:20px ; background-size:86%;}
.wrap #isover.main h4 { float: left ; font-size: 20px}
.wrap #isover.main h4 + span { display: inline-block ; float: left; margin-left: 15px ; line-height: 30px;}
.ui-key .product { margin-top: 280px }
.ui-key .product dl { clear: both ; margin-top: 20px ;overflow: hidden ;  padding: 10px;}
.ui-key .product dt,.ui-key .product dd { float: left}
.ui-key .product dt { width: 120px; height: 120px ; box-shadow: 3px 2px 10px -1px rgba(0,0,0,0.25)!important ; margin-right: 20px; display: flex; align-items: center; justify-content: center; background: #fff;} 
.ui-key .product dt img { width: 95%}
.ui-key .product dd {padding: 10px 20px ; display: block}
.ui-key .product dd p { padding: 20px 0 ; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; width: 300px; max-height: 70px;overflow: hidden ; line-height: 25px}

.ui-key2 { float: left ; height: 480px ; width: 550px ; background-size: 95%;} /*background: url(../images/bg_login.png)no-repeat ;*/
.ui-key2 > img { height: 125% ; width: 90%; cursor:pointer; }
.notice { clear: both ;padding: 20px 50px; }
.notice ul { clear: both ; margin-top: 20px ;margin-left: 30px;}
.notice ul li { list-style: disc; padding: 5px 10px;}
.notice ul li a { overflow: hidden; text-overflow:ellipsis ; white-space: nowrap ; width:300px;display: inline-block; vertical-align: middle; }
.notice ul li span {float: right;}
.wrap #isover.main a {color: #333!important}
/*
.navi + #isover.main { margin-left: 0px ; padding-left: 100px;min-height: calc(100% - 130px);}
.navi.active + #isover.main { margin-left: 0px} */

.cs { background: #6FBB2F ; font-size: 22px  ; color: #fff ; border-radius: 50px ; padding: 10px 20px ; overflow: hidden ;display: flex; justify-content: space-between; align-items: center;}
.cs .t-ic { display: inline-block ; border:1px solid #fff ; border-radius: 100px ; font-size:20px ; width:30px; height:30px ;text-align: center}
.cs strong { display: inline-block ; }
.cs .tel { float: right ; line-height: 30px;}

caption { display: none}

#login { width: 100%;  height: 100%; padding: 60px 0px 0px 60px ; background: url(../images/bg_login.png) no-repeat right top; position: relative;margin: 0 auto;  background-size: 45%;}
#login checkbox { height: 20px;  width: 20px ; vertical-align:text-bottom ; margin-right:10px}
#login h1 { background: url(../images/logo_isover.png) no-repeat ; font-size: 0px; color: #fff;width: 193px; height: 59px ;}
#login .login-box {border-radius: 10px ;position: absolute ;  height: 400px ; width:900px ;left:50% ; margin-left: -450px ;margin-top:100px}
#login .login-box .visu { width: 50% ; background: url(../images/bg_symbol.png) no-repeat #FECE00 150px -90px; height: 100% ; float: left ; padding: 40px ; position: relative ; border-radius: 10px 0 0 10px}
#login .login-box .visu ul { margin-top: 50px}
#login .login-box .visu ul li { float: left}
#login .login-box .visu ul li + li { margin-left: 40px}
#login .login-box .visu ul li p { font-size: 14px ; margin-top: 15px}
#login .login-box .visu ul li span { width: 60px ; height: 60px ; display: block}
#login .login-box .visu ul li:nth-child(1) span { border-radius: 50% ; background: url(../images/icon_set.png) no-repeat 15px 12px #FEBB04 ;}
#login .login-box .visu ul li:nth-child(2) span { border-radius: 50% ; background: url(../images/icon_set.png) no-repeat -32px 10px #8BCB54 ;}
#login .login-box .visu ul li:nth-child(3) span { border-radius: 50% ; background: url(../images/icon_set.png) no-repeat -135px 12px #FEBB04 ;}
#login .login-box .visu ul li:nth-child(4) span { border-radius: 50% ; background: url(../images/icon_set.png) no-repeat -80px 10px  #8BCB54 ;}

#login .login-box .visu p { font-size: 30px}
#login .login-box .visu p.sub { font-size: 25px ; color: #707070}
#login .login-box .visu .t-foot { position: absolute ; bottom: 40px ; }
#login .login-box .visu .t-foot p { font-size: 14px}
#login p.slogan { font-size: 40px; margin-top: 40px ; display: block; font-weight: bold ; line-height: 40px;}
#login > p { font-size: 20px ; width: 40% ;margin-top: 20px;line-height: 30px;}

#login .login-box input[type="text"], input[type=password] { height: 40px!important; }
#login .login-box label { font-weight: normal ; text-transform: uppercase ; font-size:12px;}
#login .login-box form { width: 50%; float: right ;  padding: 28px 50px ; background: rgb(255 255 255 / 90%); border-radius: 0 10px 10px 0}
/* #login .login-box button { background: #707070 ; color: #fff ; display: block ; padding: 7px; width: 100% ; border-radius: 3px} */
#login .login-box .login_buttons { display: flex }
#login .login-box .login_buttons button { background: #707070 ; color: #fff ; display: block ; padding: 7px; width: 50% ; border-radius: 3px }

#login h2 { font-weight: normal ; font-size:30px ; }
.pw-w { position: relative}
.pw-w i { position: absolute; right: 15px; bottom: 5px; }

.btn-set {}
.btn-set button { margin-bottom: 5px}
button.logout { color: #555 ; padding: 2px 12px ;  margin-left: 15px ; }
button.btn-s { border:1px solid #6FBB2F ; color: #6FBB2F ; background: #fff ; padding: 3px 10px ; }
button.btn-s + .btn-s { margin-left: 0}
button.btn-s i,button.src i,button.btn-m i ,button.btn-compo i { margin-right: 8px; font-size: 15px;}
button.btn-s:hover { background: #6FBB2F ; color: #fff ; transition: 0.5s}
button.btn-s.on { background: #ff8a04 ; color: #fff ; border: 1px solid #ff8a04 }

button.src { background: #6FBB2F ; transition: 0.5s ; padding: 3px 10px ; color: #fff ; white-space: nowrap}
button.src-i { background: none; transition: 0.5s;  color: #44820f;  z-index: 50;   margin-left: -30px;  font-size: 18px; }
button.date  { background: #6FBB2F ; transition: 0.5s ; padding: 1px 7px ; color: #fff ; border-radius: 3px 3px 0 0 ;margin-left: -1px;height: 30px; }
button.btn-m { background: #6FBB2F ; padding: 5px 10px ; color: #fff ;  white-space: nowrap;}
button + button { margin-left:3px}
.btn-m:hover,button.date:hover { background:#CEE9B7 ; transition: 0.5s ;  color: #6FBB2F ;}
button.btn-compo { border: 1px solid #6FBB2F ; padding: 3px 10px ; background: #fff ; color:#6FBB2F }
button.btn-compo:hover {background:#CEE9B7 ; transition: 0.5s ;  color: #6FBB2F ;}
i.bi.bi-calendar2-day { font-size: 18px;}
button.btn-xs { background: none; color: red; margin-left: 3px}


header { height: 58px ; padding: 0 10px ;  position: fixed ; top: 0px ; width: 100% ; background: #fff;  z-index: 999;}
header h1 {background: url(../images/logo_isover.png) no-repeat center; font-size: 0px; color: #fff;width: 147px; height:100% ; background-size: 90% ; float: left; margin-left:50px;}
header h1 a { width: 100% ; height: 100% ; display: inline-block}
header > span { float: left ; width:100px; display: inline-block ; background: url(../images/logo_oms.png) no-repeat 5px; font-size: 0px ;height: 35px ; margin-top: 10px; background-size: 65%;}

header .lang button{ color: white; padding: 16px; border: none; background: url(../images/icon_util.png) no-repeat -56px 1px ; font-size: 0px ;}
header .lang { position: relative;display: inline-block; float: left  ; margin-right: 15px}
header .lang-content { display: none; position: absolute; background-color: #fff; z-index: 1; border: 1px solid #e7e7e7 ; border-radius: 3px ; margin-left: -17px; font-size:14px ;margin-top: 3px;  z-index: 999;}
header .lang-content::before { content: "";border-width: 5px;  border-style: solid;  border-color:transparent transparent #555; position: absolute; bottom: 100%; left: 50%;margin-left: -5px;}

header .lang-content a { color: black; padding: 5px 20px; text-decoration: none;display: block; white-space: nowrap}
header .lang-content a:hover {background-color: #e9e9e9;}
header .lang:hover .lang-content {display: block;}
header .util { float: right ; display: flex; align-items: flex-end; margin-top: 5px;}
header .util .saint { margin-left: 30px ; }
header .user { display: flex ;align-items: center;}
header .user span { display: inline-block; background: url(../images/icon_util.png) no-repeat -2px 0 ;  width: 40px  ; height: 30px ; white-space: nowrap;}
header .user > span.hi {  background: none;width: unset; padding:3px 5px}

nav .lang button{ color: white; padding: 16px; border: none; background: url(../images/icon_util.png) no-repeat -56px 1px ; font-size: 0px ;}
nav .lang { position: relative;display: inline-block; float: left  ; margin-right: 15px ; display: none}
nav .lang-content { display: none; position: absolute; background-color: #fff; z-index: 1; border: 1px solid #e7e7e7 ; border-radius: 3px ; margin-left: -17px; font-size:14px ;margin-top: 3px;  z-index: 999;}
nav .lang-content::before { content: "";border-width: 5px;  border-style: solid;  border-color:transparent transparent #555; position: absolute; bottom: 100%; left: 50%;margin-left: -5px;}

nav .lang-content a { color: black; padding: 5px 20px; text-decoration: none;display: block; white-space: nowrap}
nav .lang-content a:hover {background-color: #e9e9e9;}
nav .lang:hover .lang-content {display: block;}
nav .util { float: right ; display: flex; align-items: flex-end; margin-top: 10px;}
nav .util .saint { margin-left: 30px ; }
nav .user { display: flex ;align-items: center; display: none}
nav .user span { display: inline-block; background: url(../images/icon_util.png) no-repeat -2px 0 ;  width: 40px  ; height: 30px ; white-space: nowrap;}
nav .user > span.hi {  background: none;width: unset; padding:3px 5px}

.navi { position: fixed; top:58px; left:0px; bottom: 20px; width: 240px; box-sizing: initial; background: #fff; transition: width 0.5s; overflow-x: hidden;height: calc(100% - 135px);z-index: 99; border-top: 10px solid #FFD504 ; height: 100%}
.navi.active { width:60px;}
nav input[type=checkbox] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;display: block; cursor: pointer;}

nav ul { margin: 0; padding: 0;overflow: hidden;}
nav a {display: block; padding: 8px 16px 3px; color: #333; text-decoration: none; white-space: nowrap;}
nav a span { display: inline-block ;width: 30px ;margin-right: 20px; height: 30px ;    vertical-align: middle;}
nav a span.order { background:url(../images/icon_set2.png) no-repeat 1px -2px ;  }
nav a span.deal { background: url(../images/icon_set2.png) no-repeat -52px -4px;  }
nav a span.payment { background: url(../images/icon_set2.png) no-repeat -108px -4px; }
nav a span.board { background: url(../images/icon_set2.png) no-repeat  -162px -3px}
nav a span.code { background: url(../images/icon_set2.png) no-repeat -230px -3px ;}
nav a span.code { background: url(../images/icon_set2.png) no-repeat -230px -3px ;}
nav a span.accterms { background: url(../images/icon_set2.png) no-repeat -285px -3px ;}

nav li { position: relative;float: left; width: 100%; list-style: none; color: #fff; transition: 0.5s; border-top:1px solid #e6e6e6}
nav li li { border-top: none;}
nav li:first-child { border-top: none;}
nav ul > li.sub > a:after { pointer-events: none; position: relative; float: right; content: '';  margin-top: 7px; vertical-align: middle; transition: 0.5s; width: 0.5rem; height: 0.5rem; border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; transform: rotate(-45deg) translate(50%, 0%); -webkit-transform: rotate(-135deg); transform-origin: center center; transition: transform ease-in-out 100ms;}
nav.active ul ul> li.sub > a:after ,.navi.active ul > li.sub > a:after   { display: none;}
nav ul > li.sub > ul li a:after {content: "";}
nav ul > li:hover { background: #FFD504 !important;}
nav li li:hover { background: #fff !important;}
nav .submenu { max-height: 0; overflow: hidden; border-top: none; transition: max-height 0.5s ease-in-out;background: #fff;display: grid;}
nav input[type=checkbox]:checked ~ .submenu {max-height: 999px; border-top: 1px solid #dbdbdb}
nav input[type=checkbox]:checked ~ a:after { transform: rotate(-45deg)!important; }
nav .submenu a { padding: 8px 20px;}
nav .submenu li {list-style-position: inside; list-style-type: square; }
nav .submenu li.sub { list-style: none;padding-left: 45px;}
nav .submenu li.sub:hover { background: #fcf5d4!important ;}
nav .submenu li li {background: #3a3a3a;}
nav .submenu li li li { background: #2a2a2a;}
nav.active .submenu { overflow: hidden; display: none;}
	
.toggle{ position: fixed; cursor: pointer; left: 0px; top: -2px; display: inline-block; cursor: pointer; padding: 15px 17px; border-right: 1px solid #dadada ; background: #efefef;}
.bar1, .bar2, .bar3 { width: 25px; height: 2px; background-color: #333; margin: 6px 0;transition: 0.4s;}
.active .bar1 { -webkit-transform: rotate(-45deg) translate(-4px, 3px);transform: rotate(-45deg) translate(-6px, 5px);}
.active .bar2 {opacity: 0;}
.active .bar3 { -webkit-transform: rotate(45deg) translate(-6px, -5px); transform: rotate(45deg) translate(-6px, -5px);}

.navi + .main {  margin-left:240px;}
.navi.active + .main { margin-left: 60px;}
.main { background: #fff; transition: margin-left .5s;  margin-left: 240px ; padding-bottom:30px ;min-height: calc(100% - 70px);padding-top: 57px;border-top: 7px solid #FFD504;}
/*.content { height: calc(100% - 35px); height: 100%}*/
.content .tit_area { background: #FFD504 ; position: relative}
.content h3 { font-size: 22px ;padding: 8px 25px 7px ;margin-top: -5px; font-weight: normal}
.content h4 { font-size: 18px ; font-weight: normal ; float: left} 
.content h4 + .input-group { margin-bottom: 10px}
section.view { padding:20px ;max-width: 1600px;  min-height: calc(100% - 170px); }
section .txt-view {padding:20px 30px ; clear: both  ; line-height: 25px }
.txt-view ol ol { margin: 0px ; padding: 0px}
.txt-view > ol > li { font-weight: bold ;list-style: auto; text-align: justify;}
.txt-view > ol > li p { font-weight: normal}
.txt-view > ol > li + li { margin-top: 10px;}
.txt-view > ol > li > ol > li { font-weight: normal}

.fix-table {max-height:280px; overflow-y: auto; border-top: 1px solid #008546; clear: both ;margin-bottom: 20px ;}

.fix-table table { width:100%; border: 0px; border-collapse: collapse; }
.fix-table table th { }
.fix-table table th .fix-table table td{ border-right: 1px solid #ebebeb; }
.fix-table table th {  position: sticky; top: 0px; border-right: 1px solid #ebebeb; z-index: 99}


.grid-wrap { margin-bottom: 20px ; clear: both}
.src-box { padding:10px ; background:#F0F5EE ; margin-bottom:20px}
table.src { width: 100% ;  padding: 20px ; }
table.src th { text-align: right ; white-space: nowrap ; font-weight: normal; padding: 3px 10px}
table.src th.req:before { content: "*" ;  color: red ; margin-right:4px}
table.src td {padding: 2px 10px}

.grid-over { overflow-x:auto ;  width: 100% ; margin-bottom: 20px;}
table.grid { border-top: 1px solid #008546; width: 100% ; border-collapse: inherit; margin-bottom: 20px;}   
table.grid th,table.grid td { padding: 5px 10px ; text-align: center ; border-bottom: 1px solid #D0D0D0 ; font-weight: normal ; white-space:nowrap; color: #333}

table.grid th { background: #f5fbf3; color: #386f09;border-right: 1px solid #D0D0D0 ; }
table.grid th:last-child { border-right: none}
table.grid tr:nth-child(odd){ background:#f6f6f6}
table.grid tr:hover { cursor: pointer ; background:#FFFBE5}
table.grid select.form-control { min-width:60px}

table.grid .col-cen { text-align: center}
table.grid td input.form-check-input { opacity: 1!important; width: unset; height: unset;  margin-left: -2px; width: 17px; height: 17px ; position: relative;}
table.grid span.us { padding: 2px 5px; background: #d2ebbf; border-radius: 20px;color: #569024;  min-width: 60px; margin: 0 auto; display: inline-block; text-align: center}
table.grid span.un-us { padding: 2px 5px;background: #f9ecac; border-radius: 20px; color: #8a750b; min-width: 60px; margin: 0 auto; display: inline-block; text-align: center}
table.grid tfoot tr:hover { pointer-events: none}
table.grid tfoot td { background: #fff ; color: #000 ; font-weight: bold}



table.sum { clear: both ;border-top: 1px solid #008546; border-bottom: 1px solid #a6a6a6; margin-bottom: 20px ; width: 100% ; margin-top: 20px}
table.sum th { text-align: right ;padding: 3px 10px ;border-bottom: 1px solid #D0D0D0 ;background: #ebebeb ; font-weight: normal}
table.sum td { padding: 3px 10px ;border-bottom: 1px solid #D0D0D0 ; white-space: nowrap ;min-height: 35px ;  line-height: 30px} 
table.sum .subject {font-size: 16px ;color: #555 ; padding: 15px ; position: relative ;  text-align: center}
table.sum .subject a { font-size: 16px ;color: #555 ;text-overflow: ellipsis; display: block;overflow: hidden;  width: 70%; white-space: nowrap;color: #555}
table.sum .subject a:hover { text-decoration: underline ; color: #555}
table.sum .subject .writer { position: absolute ; right: 0px ; top: 8px ; font-size: 14px} 
table.sum .subject .num { display: inline-block ;  width: 30px ; display: inline-block}

/*table.sum tr:hover { background-color: #F9F9F9} */
table.sum.no-hover tr:hover { background-color: #fff}
table.sum .view { white-space: normal ; padding: 20px ; line-height: 25px}

div.sum {clear: both ;border-top: 1px solid #008546; width: 100% ;}
div.sum .subject { font-size: 16px ;color: #555 ; padding: 15px ; position: relative ;border-bottom: 1px solid #D0D0D0;}
div.sum .subject strong { white-space: nowrap ; text-overflow: ellipsis ; overflow: hidden; width: 70% ; display: block ;margin: 0 auto;}
div.sum .subject a { font-size: 16px ;color: #555 ;text-overflow: ellipsis; display: block;overflow: hidden;  width: 70%; white-space: nowrap;color: #555}
div.sum .subject a:hover { text-decoration: underline ; color: #555}
div.sum .subject .writer { position: absolute ; right: 0px ; top: 8px ; font-size: 14px ;text-align: right;} 
div.sum .subject .num { display: inline-block ; width: 30px ;float: left;}

div.sum .view { white-space: normal ; padding: 20px ; line-height: 25px}

table.sum_list {border-top: 1px solid #008546; border: 1px solid #D0D0D0; margin-bottom: 20px ; width: 100% }
table.sum_list th { text-align: center ;padding: 3px 10px ;border-bottom: 1px solid #D0D0D0 ;background: #ebebeb ; font-weight: normal ; border-right: 1px solid #D0D0D0}
table.sum_list td { padding: 5px 10px ;border-bottom: 1px solid #D0D0D0 }
table.sum_list td + td { border-left: 1px solid #D0D0D0}

.input-group span.to { width: 25px ; text-align: center}
.input-group .range { float: left; margin-left: 5px;}
.input-group label { float: left ; margin-top: 3px ;width: 120px;}

footer { background: #F6F6F6 ; font-size: 14px ; padding:20px 20px 0; height: auto; z-index: 999; display: inline-block; width: 100%; }
footer .g-logo { -webkit-filter: grayscale(100%); filter: grayscale(100%); width: 147px; height: 50px ; background: url(../images/logo_isover.png) no-repeat ;background-size: 90%; float:left ; opacity: 0.3 ; margin-right: 10px ;margin-left: 250px;}
footer address { float: left ; margin-bottom: 0px!important ; color: #555}
footer .saint { float: right ; display: none} /*푸터 생고뱅로고 숨김*/

footer details {position: relative; width: 220px;margin-right: 20px;float: right;}
footer details.family summary:before { display: none; }
footer details[open] {z-index: 1;}

footer > details > summary { margin-top: -50px;}
footer summary {padding: 7px 10px;cursor: pointer;border-radius: 5px;background-color: #fff;list-style: none; border: 1px solid #ddd }

footer summary::-webkit-details-marker { display: none; }
footer details[open] summary:before { content: ''; display: block; width: 100vw; height: 100vh; background: transparent; position: fixed; top: 0;left: 0; }
footer summary:after {content: '';display: inline-block; float: right;width: .5rem;height: .5rem;border-bottom: 1px solid currentColor;border-left: 1px solid currentColor;border-bottomleft-radius: 2px;transform: rotate(-45deg) translate(50%, 0%);transform-origin: center center;transition: transform ease-in-out 100ms; margin:5px 10px}

footer details[open] summary:after {transform: rotate(45deg) translate(0%, 0%);}
footer ul { width: 100%; background: #fffd; position: absolute; top: calc(100% - 80px); left: 0; padding: 10px;border-radius: 5px; max-height: 220px; border: 1px solid #ddd ; margin: 0px ; z-index: 999 }

footer ul li {margin: 0;padding: 5px 10px;border-bottom: 1px solid #ccc;}

footer ul li:first-child {padding-top: 0;}
footer ul li:last-child {padding-bottom: 0;border-bottom: none;}
footer ul li a { white-space: nowrap }

ul.breadcrumb { padding: 0; list-style: none; background: #acacac ; float: right ;position: absolute; right: 0px; top:59px ; border-radius: 0 ; height:41px ; z-index: 950; padding-right: 20px}
ul.breadcrumb li { display: inline; font-size: 13px ; padding: 12px 5px 0}
ul.breadcrumb li i { margin-left: 10px; color: #fff; margin-right: 10px;}
ul.breadcrumb li a { color: #fff; text-decoration: none; font-size: 14px}
ul.breadcrumb li a:hover { color: #ffd504;}
ul.breadcrumb li a i { padding-left: 10px; } 
ul.breadcrumb li a:hover { color: #01447e; } 
ul.breadcrumb::before{ content: " " ;width: 0;width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid #FFD504;border-bottom:22px solid transparent;}

.datepicker { z-index: 999;}
.datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active{
      color: #fff; background-color: #008546;  border-color:  #008546;  }
.datepicker table tr td, .datepicker table tr th { font-size: 13px }
.datepicker table tr td, .datepicker table tr th { width:40px; height: 30px ; border: 1px solid #e0e0e0}
.datepicker .datepicker-switch { font-size: 20px ; color: #008546 ; pointer-events: none; }
.datepicker table tr td.today:active:hover, .datepicker table tr td.today.active:hover, .datepicker table tr td.today:active:focus, .datepicker table tr td.today.active:focus, .datepicker table tr td.today:active.focus, .datepicker table tr td.today.active.focus { background:#008546; color: #fff }

.datepicker table tr th:first-child,.datepicker table tr td:first-child { color:#008546 ; opacity: 0.8; }
.datepicker table tr td.highlighted.disabled, .datepicker table tr td.highlighted.disabled:active { background: #fff}
.datepicker table tr td.highlighted  { background: #fff ; border-color:#e0e0e0 }
.datepicker table tr th { border-radius: 0px}
.datepicker table tr th.dow { background: #f7f7f7}
.datepicker table tr td.highlighted:hover { background: #eeeeee}
.datepicker table tr td, .datepicker table tr th { border-radius: 0}

.pagination {display: flex;justify-content: center; margin:30px 0 ;width: 100%;} 
.pagination a { color: black; float: left; padding:4px 10px; text-decoration: none; transition: background-color .3s; border: 1px solid #dadada }
.pagination a + a { margin-left: -1px}
.pagination a.active { background-color: #ffbc04; color: white;}
.pagination a:hover:not(.active) {background-color: #ddd;}

.btn-set + .pagination {margin-top: 100px;}

ul.list_view { border-top:1px solid #bebebe ; margin-top:80px ; }
ul.list_view li { line-height:20px ; border-bottom:1px solid #e8e8e8 ; padding:12px 20px ; font-size:13px ; color:#3d3d3d ; font-weight:normal;}
ul.list_view li a { display: inline-block ; text-overflow: ellipsis; overflow: hidden ; white-space: nowrap ; width: 80% ;vertical-align: middle;}
ul.list_view li span {color:#747474; ; display:inline-block ; float:right}
ul.list_view li strong { display:inline-block ; margin-left:15px ; color:#999 ; margin-right:20px}

.filebox .upload-name {display: inline-block;height: 32px;padding: 0 10px;vertical-align: middle;border: 1px solid #dddddd;width: 70%;}
.filebox label { display: inline-block; padding: 5px 10px;color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 32px; line-height: 25px;}
.filebox input[type=file] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}

.tit-area {clear: both ; margin-top: 15px;}
.tit-area span { font-size: 14px ;color:#008546 ;margin-left: 10px; vertical-align: text-bottom;}
.modal .tit-area .col-6 + .col-6 { padding-right: 0}
.modal h4 { font-size: 18px}


td .col-3, td .col-4, td .col-5, td .col-6 {  padding-left: 0!important}
input.form-control.date { max-width: 100px ;min-width: 100px}
input.form-control.pw { max-width: 200px}
th label ,td label { margin-bottom: 0px}
.form-control[readonly] { background-color: #fff; border:1px solid #d2d2d2}
textarea.form-control { padding: 15px ;margin: 5px 0;}
select.form-control { padding: 0px}
.form-control:disabled, .form-control[readonly] { background-color:#f5f5f5;}
details { clear: both ; transition:height 3s ease-in;}
details > summary { margin-top: -30px}
details > summary:before { content: "내용열기"; margin-left: 10px; }
details[open] > summary:before { content: "내용접기";  margin-left: 10px;}
details > summary summary.fl_r { position: absolute;  right: 20px;  top: 0; }
details > summary summary::marker { margin-left: 20px; margin-top: -20px}

.wrap.ov_f { height: 920px}
.wrap.ov_f .main {}

.t-tip {position: relative;display: inline-block;border-bottom: 1px dotted black;}
.t-tip .tooltiptext { background-color: #555; color: #fff; text-align: center; border-radius: 6px;padding: 5px 0; position: absolute;z-index: 1;top: 125%; left: 50%;margin-left: -60px; opacity: 0; transition: opacity 0.3s;}
.t-tip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%;margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent;}
.t-tip:hover .tooltiptext { visibility: visible; opacity: 1; }

.modal .src-box { overflow: hidden}
.modal table.src colgroup { display: none}
.modal table.src th, .modal table.src td { display: flex ;width: 100%; text-align: left; white-space: normal;  flex-direction: column;}

.modal .prd table.src.brk th, .modal .prd table.src.brk td {    display: table-cell; width: unset;}
.modal .prd table.src.brk th { width: 120px ; text-align: right}
.modal .src-box.prd button.src { margin-top: 0px;}
.modal-header {background: #ffbc04; padding: 5px 10px ; color: #fff ; font-weight: normal ; color: #553e00; display: flex; align-items: center;}
.modal-header .close {  }
.modal button.src { margin-top: 10px}

.w-100 { width: 100px !important}
.w-150 { width: 150px !important}
.w-200 { width: 200px !important}
.w-300 { width: 300px !important}
.w-400 { width: 400px !important}

.fl_l { float: left}
.fl_r { float: right}
.al_c { text-align: center}
.al_r { text-align: right !important}
.al_l { text-align: left !important}
.d-in { display: inline-block !important}

.w-75p { width: 75% !important; } 
.w-100p { width: 100% !important}
.t-red { color: crimson !important; } 
.t-blue { color: blue !important;}
.al-md { vertical-align: middle}
.clear { clear: both}
.ov_f { overflow: hidden}
.ps_l { position: relative}
.fl_un { float: unset !important}
.block { display: block}

.a-midd { margin: 0 auto; } 
.pd_0 { padding: 0 !important}
.pd_10 { padding: 10px !important}
.mg-0 { margin: 0!important}
.mg-t5 { margin-top: 5px !important}
.mg-t10 { margin-top: 10px !important}
.mg-t20 { margin-top: 20px !important}
.mg-t25 { margin-top: 25px !important}
.mg-t30 { margin-top: 40px !important}
.mg-t40 { margin-top: 40px !important}
.mg-t100 { margin-top: 100px !important}
.mg-b5 { margin-bottom: 5px !important}
.mg-b10 { margin-bottom: 10px !important}
.mg-b20 { margin-bottom: 20px !important}
.mg-l5 { margin-left: 5px !important}
.mg-l20 { margin-left: 20px !important}
.mg-r10 { margin-right: 10px !important}
.mg-r15 { margin-right: 15px !important}
.m-mb5 { margin-bottom: -5px !important}
.m-mt10 { margin-top: -10px !important}
.m-mt20 { margin-top: -20px !important}
.m-mt50 { margin-top: -50px !important}

.col-class { width:1000px; }
.src-box-td { width:25%; }
.src-box-input { width:40%; }
.src-box-th1 { margin-left:-20px; }
.src-box-td2 { width:20% }

.d-con { display: contents !important}
.d-con select { width: 150px}

.loader { border: 12px solid #e2e2e2; border-radius: 50%; border-top: 12px solid #008546;
  width: 120px; height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite; position: absolute ; z-index: 9999;position: absolute ; top:50%; left:50%; margin-top: -60px ; margin-left:-60px
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 320px) {
    #login {background-position: center 180px!important}
    #login p.slogan { font-size: 20px!important}
    #login > p { font-size: 15px!important ; margin-top: 0px!important}
    #login .login-box { height: 250px!important}
    #login .login-box .visu { height: 220px!important ; background-size: 80%!important;}
    #login .login-box form { padding: 0 20px }
    #login .login-box label.mg-t20 { margin-top: 0px!important}
    #login h2 { margin-top: 0!important }
    ul.list_view li { padding:12px 0px!important}
    ul.list_view li a { width: 40% ;   margin-right: 10px;}
    ul.list_view li strong { margin-right: 5px; margin-left: 5px;}
    footer address { font-size: 11px!important ; letter-spacing: -1px!important}
    footer .g-logo {width: 100px!important}
    ul.breadcrumb { top:110px!important}
    ul.breadcrumb li { padding:unset!important}
    ul.breadcrumb li i { margin:0 5px}
    section.view { padding:10px}
    header .lang { position: absolute ; right: 3px ; top: 10px!important}
    nav .user {border-bottom: 1px solid #ffd504; padding-bottom: 15px; display: block;  padding: 15px;}
    header .util { display: none}
    nav button.logout { padding: 5px 30px; margin: 0 auto; width: 100%;}
    .navi.active { width: 100% ; height: 100%;}
    nav .user span { vertical-align: middle;}
    table.sum .view { padding: 0!important}
    table.sum .subject { padding: 5px 0px!important}
    .content h4 + .input-group.col-3.fl_r{ max-width: 100%;}
    div.sum .subject .writer,div.sum .subject .num { font-size: 13px}
    div.sum .subject a { font-size: 12px; width: 45%}
    div.sum .subject { padding:15px 0px}
    nav .lang { float: unset ;  width: 100% ; font-size: 14px ; border-bottom: 1px solid #e6e6e6; display: block ;position: relative;}
    nav .lang button {color: #333  ;font-size: 14px ; background: none ; pointer-events: none;cpadding: 10px 15px;}
    nav .lang-content { display: block!important; width: 150px ; position: absolute ; right: 0px  ; top: 0px ; border: none ; margin-top: 15px}
    nav .lang-content::before { display: none ;}
    nav .lang-content a { display: unset ; padding: 5px 8px ;border:1px solid #6fbb2f;}
    .input-group label { width: 100%}
     .gird colgroup {display: none;}
    .pagination a { padding: 3px 8px}
    .filebox .upload-name { width: 60%}
    .grid td.no-data:before { margin-left: 40px!important;;}
    .grid td:before {margin-right: 10px; letter-spacing: -1px; display: unset !important;}
    .btn-set { margin-bottom: 10px}
    footer .saint { display: none!important;}
    
    .modal .prd table.src.brk .input-group select { width: 100%}
    .wrap #isover.main .ui-key .slogan { line-height: 15px!important; font-size: 20px!important;}
    .wrap #isover.main .ui-key .slogan + p { font-size: 12px!important ;line-height: 15px!important;}
    .ui-key {height: 180px!important;padding: 10px!important}
    .ui-key .product dl{ display: inline-flex!important; flex-wrap: wrap;margin-bottom: 10px;}
    .ui-key .product dd p { width: unset ;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: 200px!important;;}
    .ui-key .product dt { width: 50px !important ; height: 50px!important }
    .ui-key2 { margin-top: 0px!important;; background-size: 90%!important;}
    .ui-key2 > img { cursor:pointer;  }
    .ui-key .product {position: absolute;top: -80px; border-bottom: 1px solid #dadada;}
    .cs { display: block; border-radius: 10px; margin-left: -5px;padding-left: 40px;}
    .cs .tel { float: unset}
    
    .notice {top: 120px!important;}
    .notice ul { margin-left: 5px!important;}
    .notice ul li a { width:40%!important}
}


/*최대 600*/
@media only screen and (max-width: 600px) {
    #login p.slogan  { font-size: 25px ; margin-top: 20px;}
    #login > p { font-size: 18px}
    #login .login-box form { margin-top: 0px ;background: none}
    header .user span ,header .user strong { display: none}
    header .user button { display: block ; padding: 5px 8px; margin-top:5px ; margin-left: 5px;}
    header .lang { margin-right: 10px ;margin-top: 8px;}
	footer { padding: 0}
	footer .g-logo { width: 100px; margin: 0 auto !important; float: unset ; height: 30px;}
	footer address { font-size: 12px ; text-align: center ; width: 95%} 
    #login .login-box {height: 300px!important}
    #login .login-box label { margin-top: 0px!important}
    #login h1 { background-size: 60%!important ; height: 45px}
    #login h2 { margin-top: 20px}
    #login .login-box { margin-top: -5px!important}
    #login { padding: 10px 20px!important}
    .input-group .range { margin-left:0px ; display: block ; clear: both ; width: 100% ; margin-top: 5px ; margin-bottom: 10px;} 
    .input-group label { width: 100%;}
    ul.list_view li {padding: 12px 0px 8px 0 ; }
    ul.list_view li a {  width: 40%!important; vertical-align: middle;}
    table.sum th,table.sum td { padding: 3px 0px}
    .grid colgroup {display: none;}
    input.form-control.date { min-width: 100%}
     button.date {margin-top: -30px; z-index: 3; margin-left: calc(100% - 30px);}
    .input-group span.to { margin:0 auto}
    .grid td:before { display: contents}
    .modal button.src { float: right!important}
    .modal table.grid th, .modal table.grid td { border-bottom: none}
    .grid td.no-data:before { margin-left: -40px;}
     input.form-control.pw { max-width:100%!important}
     section .txt-view { padding: 0px}
    section .txt-view ol { padding:10px 15px;}
    section .txt-view ol ol { padding:0}
    footer .saint { margin-top: -50px !important}
    footer .saint img { display: none}
    table.grid td { display: inline-flex; width: 100%}
    table.grid td input.form-check-input { margin-left:0% }
    .wrap #isover.main .ui-key .slogan + p { font-size: 18px;line-height: 18px}
    .ui-key .product dl { padding: 10px}
    .ui-key .product { position: absolute; top:50px }
    .ui-key .product dt { width: 80px!important; ; height: 80px!important;border: 1px solid #dadada;box-shadow: none!important;}
    .ui-key .product dt img { width: 78px  ; height: 78px }
   .cs strong { display: none}
    .ui-key2 {}
    .ui-key2 > img { cursor:pointer; }
    header .user {display: flex; flex-direction: column }
    header .user strong { top: 5px; margin-top: -5px; float: right;  display: block;  position: absolute; white-space: nowrap; right: 8px; }

    
}



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    #login .login-box label { margin-top: 20px!important}
    .pw-w { margin-top: 10px!important}
    #login p.slogan {  width: 100%; text-align: center ;margin-top:20px; color: #000 ;}
    #login > p { width: 100%!important;;text-align: center; }
    /* #login { background: url(../images/b_login_m.png) no-repeat; background-position: center 230px; background-size:inherit; padding: 20px ; background-size:80%!important } */
    #login { padding: 20px; }
    header .util .saint { display: none}
    header h1 {  width: 110px; height:100%}
    header > span { width: 70px ;background-size:80% ; margin-top: 10px;}
    header .user > span.hi { display: none}
    button.logout { font-size: 13px ; padding: 2px 10px}
    button.logout i { display: none}
	footer .g-logo { width: 100px; margin: 0 auto}
    header .util { margin-top: 10px}
    
    ul.breadcrumb { top:100px ;background: none ; z-index: 1}
    ul.breadcrumb::before { border-top:none; border-left:none; border-bottom: none ; }
    ul.breadcrumb li a,ul.breadcrumb li i {color: #555}
    section.view { padding-top: 40px}
    footer { height: auto; overflow: hidden;margin-top: 20px;}
    footer details {display: none}
    .content h4 {}
    .content h4 + .input-group { margin-top: 10px;}
     button.src { float: right ; margin-top:10px}
    table.sum colgroup { display: none }
	table.sum td { padding: 3px 0px 5px 0}
    table.sum .subject strong { white-space: nowrap ; text-overflow: ellipsis ; overflow: hidden; width: 70% ; display: block}
	table.sum th, table.sum td { display: grid; width: 100%; text-align: left; white-space: normal;}
    table.src th { margin-top: 5px}

    .grid colgroup { display: none!important;}
    .grid th { display: none;}
    .grid td { display: block;}
    .grid td:before { content: attr(data-th) ""; font-weight: bold; min-width: 40%; display: inline-block; vertical-align: top; }
    .grid th,.grid td {text-align: left!important;font-size: 13px ; }
    .grid {  color: #fff; overflow: hidden;}
    table.grid th, table.grid td { white-space: normal!important}
    
    .grid.no-responsive { }
    .grid.no-responsive th { display: table-cell ; text-align: center!important}
    .grid.no-responsive td { display: table-cell; white-space:nowrap!important}
    .grid.no-responsive td:before { min-width: unset}
   
    .grid td.no-data:before { margin-left: px;}
    table.grid td .form-control {  display: inline-table;width: unset;}
    input.form-control.pw { max-width:80%}
    section .txt-view { padding: 0px}
    .main { overflow: auto}
    footer .saint { display: block!important; }
    footer .saint img { width: 70px}
    table.grid td input.form-check-input { margin-top:3px}
    .ui-key .product { margin-top: 300px ; overflow: hidden; padding-top: 0px;}
    .ui-key2 { }
    .ui-key2 > img { cursor:pointer; }
    .ui-key .product dl { width: 100%!important}
    .ui-key .product dl + dl { margin-top: 0!important} 
    .navi + #isover.main { display: inline-table;}
    .notice {position: absolute; top: 100px;}
    .cs { margin-top: 670px!important}
    .wrap #isover.main .ui-key .slogan + p { width: 100%}
   
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {

    #login { padding: 20px ; background-size: 70%}
    #login .login-box .visu ul { display: none}
    #login h1 {background-size: 80%;}
    #login .login-box { top:60px ;position: absolute;left: 0px; width: 100%;margin-left: 0px;height: 350px; min-width: 100%;}
    #login .login-box .visu { width: 100% ;background-size: 50%; background-position: right -70px; height: 95% ;z-index: -99;border-radius: 0px;}
    #login p.slogan { font-size: 30px}
    #login > p { width: 30%}
    #login .login-box .visu p { display: none}
  
    #login .login-box form { width: 100% ; margin-top: 50px}
    #login .login-box button { background:#6FBB2F}
   
    header .util .saint { margin-left: 15px}
     header .util .saint img { width: 70px}
   .login-box.shadow { box-shadow: unset!important}

	footer .g-logo { margin-left: 0 ;background-size: 90%; width: 130px;  margin-right: 5px;}
    footer address { font-size: 12px}
    footer summary { padding: 3px 5px}
    footer ul {    top: calc(100% - 58px); padding: 3px}
    footer details { width: 200px}
    .navi.active {width: 0px}

    .navi.active + .main {margin-left: 0px;}
    .content h4 + span{ margin-top: 20px}
     table.src colgroup { display: none}
    table.grid { overflow-x: auto}
    table.grid th, table.grid td { white-space: nowrap}
    table.src th, table.src td {   display: flex ;width: 100%; text-align: left; white-space: normal;}
    table.src td.f-row, table.src th.f-row { float: left; width: 50%}
    table.src td.f-row { margin-top: 5px}
    
    button.src { width: 100%; margin-top: 10px}
    .input-group .range { margin-left: 5px!important ; }
    button.btn-s {   padding: 3px 10px!important}
    .modal .prd table.src.brk th,.modal .prd table.src.brk td{  display: block}
    .modal .prd table.src.brk th { text-align: left}
  
    .d-con { display: contents !important}
    .d-con select { width: 100%}
    .ui-key .prod { display: none}
    .input-group .range {  margin-left: 0px!important ; display: flex;  }
    .navi + #isover.main { padding-left:0px ; margin-left: 0!important;overflow-y: hidden;width: 100%;}
    .wrap #isover.main .ui-key { height: unset ; padding: 20px}
    #ui-key-click img { margin-top:150px !important; margin-left: 0px !important; }
    /* .ui-key2 { float: none ; background: url(../images/b_login_m.png) no-repeat ; position: absolute;  height: 300px!important ;margin-top: 120px;margin-left: 0px!important;padding: 20px;background-size: 95%!important;} */
    .ui-key2 { float: none ; position: absolute; height: 300px!important ;margin-top: 120px;margin-left: 0px!important;padding: 20px;background-size: 95%!important;}
    /* .ui-key2 > img{ display: none } */
    .ui-key2 > img { height: 140% !important; margin-top:-110px; cursor:pointer;  }
    .ui-key .product { margin-top: 320px!important}
    .wrap.ov_f { height: unset ; height: 100%;min-height: 990px!important;}
    .notice {margin-top: 400px;}
    .notice ul li a {}
    footer { position: unset ; }
    .ui-key .product dl { margin-top: 0 ;width: 45%; float: left; display: flex;}
    .ui-key .product dl + dl { float: right ;margin-top: -110px;}
    .navi + .main { margin-left: 0px}
}

@media only screen and (max-width: 1024px) {
 
    #login .login-box { margin-top: 20px}
    .wrap #isover.main .ui-key { width:430px!important ;transition: 0.5s;height: 300px}
    .ui-key2  { width: 320px!important; height: 280px!important; margin-left: 20px; }
    .ui-key2 > img { cursor:pointer; }
    .input-group .btn-s:first-child { margin-left: 0px ; }

}

@media only screen and (max-width: 1080px) {
   .wrap #isover.main .ui-key { width:400px!important ;transition: 0.5s;height: 300px ; }
   .ui-key2 { width: 340px!important; height: 260px!important; margin-left: 20px;}
    table.src colgroup { display: none}
    footer .g-logo { width: 135px}
    footer address { font-size: 13px ; letter-spacing: -1px}
    .input-group .range { margin-left: 5px!important ;    display: flex;  }
    button.btn-s + .btn-s { margin-left: -5px;}
     
}


@media only screen and (max-width: 1220px) {
   .wrap #isover.main .ui-key { width:460px!important ;transition: 0.5s;height: 300px}   
   .ui-key2 { width: 340px!important; height: 260px!important; margin-left: 20px;}
   .ui-key2 > img { cursor:pointer;  }
    .wrap #isover.main .ui-key .slogan { font-size: 28px ; margin-bottom: 10px;    line-height: 25px;}
    .wrap #isover.main .ui-key .slogan + p { font-size: 20px; line-height: 25px}
    .ui-key .prod { bottom:20px!important ; width: 150px!important;; height: 150px!important;}
    .notice ul li a { width: 60%}
    .ui-key .product dt { width: 90px; height: 90px}
    .ui-key .product dt img { width: 95% ; transition: 0.5s;}
    .ui-key .product dd { padding: 0}
    .ui-key .product dd p { width: 200px ; padding: 0px}
    .cs {font-size: 16px!important;}
    .cs .tel { line-height: 20px}
    .wrap #isover.main {  height: calc(100% - 140px)!important;}
    footer { font-size: 12px}
}

@media only screen and (max-width: 1400px) {
    .wrap #isover.main{ }
    .wrap #isover.main .ui-key { width: 510px ; transition: 0.5s ; height: 320px ; } 
    .wrap #isover.main #ui-key-click img { height:90%; }
    .ui-key2 {width: 430px; height: 300px; margin-left: 20px; transition: 0.5s ; }
    .ui-key2 > img { height: 100%; float: right; width: 100%;transition: 0.5s; cursor:pointer; }
    .ui-key .prod {width: 200px ; height: 200px}
    .notice { padding: 30px 0px;}
    .ui-key .product { margin-top: 140px;}

    .wrap #isover.main footer { position: fixed ; bottom: 0 ; z-index: 999}
    .wrap.ov_f { height: 830px}
    .wrap #isover.main .ui-key .slogan { font-size: 30px}
    .wrap #isover.main .ui-key .slogan + p {font-size: 22px;}
    .cs { font-size: 20px ; letter-spacing: -1px }
    .ui-key .product dl { display: inline-flex}
    .ui-key .product dt {width: 100px ; height: 100px}
}
@media only screen and (min-width: 1401px)  {	
      .wrap #isover.main .ui-key { width:600px; transition: 0.5s ; height: 300px ; min-width: 600px } 
      .ui-key2 {height: 360px; margin-left: 20px; transition: 0.5s ; width: 520px;}
    .ui-key2 img { width: 100%; cursor:pointer; }
}