/*!
 * css for test.html
 * @author Aaron Jo
 * @date 2017
 */
@charset "utf-8";

/*
    -CSS Selector Description
    #abc > h1 :  직계자식
    #abc h1 : 후손(하위모든자식)
    #abc + h1 : 다음인접
    #abc ~ h1 : 다음형제
*/


/*********************************************************/
/* default */
/* selection */
::-moz-selection { background-color: #2E67D5; color: #fff; }
::selection { background-color: #2E67D5; color: #fff; }

/* scroll */
/*
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track-piece {  background: #eee; }
::-webkit-scrollbar-track-thumb  { background: #888; }
*/

/* element */
body { overflow-x: auto; overflow-y: auto; }
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
select,
textarea {
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 0 #ddd;
    border-bottom-width: 1px;
    padding: 0.3rem 0.3rem;
    outline: 0;
}
input[type="date"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: #000;
}
input:invalid {
    border-color: #e90000;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: transparent;
    background-image: none;
    color: rgba(0, 0, 0, 0.0);
}
img, canvas, .imgBg {
  min-width: 4rem;
  min-height: 4rem;
  margin: 0;
  padding: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAHGklEQVR4Xu2diU7kOhBFw77v/P8PIrZm359uJD8hNE0ldKrLlRxLEcxMYTvHZxxvaVZms9lXQ4JAEIEVBAwiT7EtAQREhFACCBiKn8IREAdCCSBgKH4KR0AcCCWAgKH4KRwBcSCUAAKG4qdwBMSBUAIIGIqfwhEQB0IJIGAofgpHQBwIJYCAofgpHAFxIJQAAobip3AExIFQAggYip/CERAHQgkgYCh+CkdAHAglgICh+CkcAXEglAAChuKncATEgVACCBiKn8IREAdCCSBgKH4KR0AcCCWAgKH4KRwBcSCUAAKG4qdwBMSBUAIIGIqfwhEQB0IJIGAofgpHQBwIJYCAofgpHAFxIJQAAobip3AExIFQAggYip/CERAHQgkgYCh+CkdAHAglgICh+CkcAXEglAAChuKncATEgVACCBiKn8IREAdCCSBgKH4KR0AcCCWAgKH4KRwBAx34+vpqXl9fm7e3t/b6/Pxs9He6VlZWmrW1tWZ9fb29tra2mtXV1cDa+hSNgD5cf81Voj0+PjZPT0+tbF3TxsZGs7Oz02xvb3f9kerjEHDJTXR/f99bvJ9VlIj7+/uNvmZPCLikFlRPd3t72z5yh0p7e3uNrswJAZfQeu/v7618Hx8fg5emx/Hh4eHg+S4rQwR0Jq3JheTTuM8rZZYQAb2saJp2ZustX6n+wcFBO0HJlhDQqcUk383NTa9Z7iJV0bLNyclJu2STKSGgQ2tpoqGer88SyxDV0KxYEmZKCDhwa728vDSz2Wzp8pXbkICZlmcQcEABn5+fW/kik3ZMjo6OIqvQq2wE7IVrfrB2NrTIXEM6Pz9Ps22HgAsao3He3d1do96vlqQeUD1hhoSAC7SSFpY12dBCc01pd3e33arLkBDwj62kR+7Dw0PYZOO3ameaDSNgTwE1y9VYz2NbrWdV5obr2JbGgRlS9QKql9H4Sg0usFpo1daTxjhafF1WUh3U69X2uP3X/SPgQFZcX1+321n/SpJvc3OzFVFfPQ5rSjb1eDq357mXOxCu/7NBwAGI6jGnHqdrKieH9VVjIJ0m7iOlZrMSTpekL993Lb+mOAQcoDUuLy8XHmeVY+36Wq5StbJNpke7vs/Uw1l49Z/w9PTUCqvi36sdA15cXFQ5w6yi1YxK6FSMTsdkSNUKeHV1lWLAX2Mj64BqlvdGqhWwpq2tGiX7rU5nZ2ftGDhDqlZAwdN5uiHfocjQIIvWMdMitO61agE1OdDpEi2FkLoROD4+bpelsqSqBSwQ+y7JZIE/dD0zzX7LvacQUJXVYrBOnZDmE8jW+1X/CP6Jepkv+WQTXadfdAomW0rTAxaw2qHQuDDDnuyyZMh2Cvo7l3QCqvLatdA5vHn7xMtq+BrKkXxa91vmwYwh7zulgAWAJJzyDDnrYzd9D/j9BvQ4ruk4/JC9w7y8NNvVVlumt9/m3UvqHrDclGbHmiWPPemUiz6MKOMnIIxaQN3cmNcKJZ5muBIv61hv9ALqBsfWE45ZvHQL0V0fr2MYE2qMVz4JdWw93s92HMUY8OdNZT3EoEmFxniZ9nK7dgyTeASXm9QhBkmYZZ1QZ/fU441hVttXyFH2gGWxWi811fr6pB6tkk5XlrN7feXqEj9aAXXz2q5TT1jT+x5FPM1q+7w01aUxM8aMWkA1iA60SsIakno77V6MfWLRh/XoBRSM6OP9Gttp5yLbp5f2EemvsZMQUHAilmfU02lWm/GY1F+F6vtzkxFw2TNj9Xo6pTLlCUYXGScjYJkZazzofZZwDL9Apos8Q8RMSkBvCTXGU6/HWK+7mpMTUGg83raj1+su3ffISQpYAOgIl07RLPLrFHQiWUsrjPUQ8E8EtFNSPoOwawaa3Wr7TNcUt8+6cuoSN+ke8Dsg7ZboeH/5aDb9WVf5hK3y4Zg6KCDpWEzuopcdg4A2IyIcCSCgI1yytgkgoM2ICEcCCOgIl6xtAghoMyLCkQACOsIla5sAAtqMiHAkgICOcMnaJoCANiMiHAkgoCNcsrYJIKDNiAhHAgjoCJesbQIIaDMiwpEAAjrCJWubAALajIhwJICAjnDJ2iaAgDYjIhwJIKAjXLK2CSCgzYgIRwII6AiXrG0CCGgzIsKRAAI6wiVrmwAC2oyIcCSAgI5wydomgIA2IyIcCSCgI1yytgkgoM2ICEcCCOgIl6xtAghoMyLCkQACOsIla5sAAtqMiHAkgICOcMnaJoCANiMiHAkgoCNcsrYJIKDNiAhHAgjoCJesbQIIaDMiwpEAAjrCJWubAALajIhwJICAjnDJ2iaAgDYjIhwJIKAjXLK2CSCgzYgIRwII6AiXrG0CCGgzIsKRAAI6wiVrmwAC2oyIcCSAgI5wydomgIA2IyIcCSCgI1yytgkgoM2ICEcCCOgIl6xtAghoMyLCkQACOsIla5vAf6iyM/32tYm+AAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  background-size: cover;
  vertical-align: middle;
  border-style: none;
  border: 0;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  outline: none;
  content: '';
}
img[src=""] {
  content:url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
}
/*
img { display: none; }
img[src] { display: block; }
img[src*="http"] { display: block; }
*/


/*********************************************************/
/* common */
.show { display: block !important; }
.hide { display: none !important; }
.invisible { visibility: hidden !important; }

/* mode */
.normal-mode {
	filter: invert(0%);
}

.dark-mode {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    /* mix-blend-mode: difference; */
}

/* display */
.dis_blk { display: block; }

/* font color */
.fc_blue { color: blue !important; }
.fc_red { color: red !important; }
.fc_gray { color: grey !important; }
.fc_black { color: #333 !important; }

/* background color */
bg_applegreen { background: #96bb00; } /* Apple Green */
bg_bittersweet { background: #ff715b; } /* Bittersweet */
bg_bleuedefrance { background: #3c91e6; } /* Bleue De France */
bg_ice { background: #fafffd; } /* Ice */
bg_feldgrau { background: #4c5b5c; } /* Feldgrau */
bg_charcoal { background: #1c2222; } /* Charcoal */

/* input */
.inp {
    width: 100%;
    height: 2.5rem;
    overflow: visible;
}

/* button */
.btn {
    line-height: 2rem;
    min-width: 4rem;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 1.3rem;
    letter-spacing: -1px;
    font-size: 1rem;
    background-color: #eee;
}
.btn:focus { background-color: #ccc; }
.btn-primary { color:#fff; background-color: #337ab7; }
.btn-primary:focus { background-color: #215b8d; }

.input { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 0 #ddd; border-bottom-width: 1px; padding: 0.3rem 0.3rem; outline: 0; }

.overlap { position: relative; overflow: hidden; }
.overlap > label { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 0 #ddd; border-bottom-width: 1px; padding: 0.3rem 0.3rem; outline: 0; }
.overlap > label { position: absolute; width: inherit; height: inherit; font-weight: inherit; white-space: nowrap; overflow-x: auto; }
.overlap > label[class="placeholder"] { color: #777; }
.overlap > input { position: absolute; left: 0; top: 0; width: inherit; height: inherit; padding: 0; margin: 0; opacity: 0; z-index: -1; }

.pLR0d8 { padding-left: 0.8rem; padding-right: 0.8rem; }

.mT1 { margin-top: 1rem; }
.mT2 { margin-top: 2rem; }
.mT3 { margin-top: 3rem; }
.mB1 { margin-bottom: 1rem; }
.mB2 { margin-bottom: 2rem; }
.mB3 { margin-bottom: 3rem; }

.pT1 { padding-top: 1rem; }
.pT2 { padding-top: 2rem; }
.pT3 { padding-top: 3rem; }
.pB1 { padding-bottom: 1rem; }
.pB2 { padding-bottom: 2rem; }
.pB3 { padding-bottom: 3rem; }


/*********************************************************/
/* document */

/* body */
/*html { font-size: 15px; }*/ /* rem 을 위해 html 에 font-size 설정하거나 미설정처리하여 브라우저 font-size 를 따르도록 한다. */
body { line-height: 1.4; color: #333; background: #f4f4f4; } /* em 을 위해 body 에 font-size 설정 */
body div.wrap { margin:0 auto; }
@media (max-width: 320px) {
    body { font-size: 09.rem; }
}
@media (min-width: 768px) {
}
@media (min-width: 834px) {
    body { font-size: 1.2rem; line-height: 1.5; }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
    body { font-size: 1.2rem; }
    body div.wrap { max-width: 1280px; /* box-shadow: 0 0 2px 0 rgba(0,0,0,0.20); */ }
}

/* header */
.header { position: fixed; top: 0; left: 0; width: 100%; height: 5.4rem; background: #fff; border-bottom: 1px solid #ccc; z-index: 1; }
.header .logo { width: inherit; height: inherit; padding: 1rem 0.8rem; }
.header .logo { word-break: break-all; /*white-space:nowrap; text-overflow:ellipsis;*/ overflow: hidden; }
/*
  재미난 이야기 rem, em
  text-indent 값을 rem 으로 사용할 경우 "(html 에 설정된 font-size) * (x rem)" 공식이 성립된다.
  하지만 em 우로 설정한 경우 "(body 에 설정된 font-size) * (h1 의 font-size) * (x em)" 공식이 설정됩니다.
  그러머로 rem 은 html 15px * text-indent 5.0rem             ==> 실제 적용되는 건  75 px
         em  은 body h1 15px * h1 2em * text-indent 5.0em  ==> 실제 적용되는 건 150 px
 */
.header .logo > h1 {
    width: 100%;
    height: 3.0rem;
    background: url('../../common/img/etc/my_pic.png') no-repeat;		/* url('http://tmportal.hi.co.kr/images/pc/logo.png') */
    background-image: url('../../common/img/etc/my_pic.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    text-indent: 5.0rem;
    /*overflow: hidden;*/
}

/* container */
.container { width: 100%; margin: 0 auto; padding: 5.4rem 0 12rem 0; transition: 0.7s ease; }
/*.container:last-child { border-bottom: 1rem solid #F6F6F6; }*/

/* content */
.content { margin: 2rem 1.5rem 0 1.5rem; padding: 1rem 1.2rem 2rem; background: #fefefe; border-radius: 4px; word-break: break-all; box-shadow: 0 0 2px 0 rgba(0,0,0,0.20); overflow: hidden; transition: 0.7s ease; }
/*.content { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; } */
.content .cts_title { font-size: 1.5rem; font-weight: bold; }
.content .cts_title { margin-bottom: 0.8rem; }
.content .cts_cont { }
.content .cts_cont > div:nth-child(n) { padding-top: 1.0rem; }
/*.content .cts_cont div:nth-child(n) > label { font-weight: bold; color: #888; } */
.content .cts_cont label.title { font-weight: bold; color: #888; }
.content .cts_cont textarea { width: 100%; height: 25rem; }


/* test */
.test { border:.5px dashed rgba(0,0,0,0.5); border-radius: 5px; margin-top: 3rem; padding: 0.7rem 1rem; background: #fff; }
.test .html { color: #c1c2c1; background: #343642; margin-bottom: 1.5rem; padding: 0.4rem 0.7rem; border-radius: 5px; }
.test .result { margin-bottom: 1.5rem; background: #fff; }
.test .result span { color: #000; background: #addecf; }
.test .desc { display: block; background: #f5f5f5; padding: 0.4rem 0.7rem; }


/*********************************************************/
/* swiper */
.swiper-container { width: 100%; padding-top: 0.1rem; padding-bottom: 2rem; }
.swiper-container .swiper-slide { background: #fff; width: 80%; margin-right: 1.4rem; height: auto; box-shadow: 0 2px 6px 1px rgba(0,0,0,0.10); }
.swiper-container .swiper-slide:last-child { margin-right: 1.4rem; }

.swiper-container .swiper-pagination { text-align: left; margin-left: 1.4rem; width: calc(100% - (1.4rem * 2)); }
.swiper-container .swiper-pagination-bullet { width: 6px; height: 6px; transition: 0.5s ease; }
.swiper-container .swiper-pagination-bullet-active { background: #000; width: 17px; border-radius: 3px; transition: 0.5s ease; }
.swiper-container .swiper-pagination.swiper-pagination-progressbar { position: relative; top: 10px; }
.swiper-container .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: rgba(255,117,28,0.90); }

.swiper-container .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; }
.swiper-container .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; }

.swiper-container .swiper-slide img { width: 100%; height: auto; }
.swiper-container .swiper-slide h4 { margin: 0.8rem 1rem 0.4rem; }
.swiper-container .swiper-slide p { margin: 0 1rem 1rem; text-align: justify; }
.swiper-container .swiper-button-next, .swiper-container .swiper-button-prev { display: none; }
/*********************************************************/