@charset 'utf-8';

*{margin:0;padding:0;-webkit-text-size-adjust:none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
a{text-decoration:none;margin:0;padding:0;color: inherit;display:inline-block;}
*, :after, :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a:hover,a:focus,a:link,a:visited{text-decoration:none;color: inherit;}
ul, li, dl, dt, dd, p, span{list-style:none;list-style-type:none;}
img{border:none;max-width:100%;height:auto;}
a img {border:none;max-width:100%;height:auto;}

@font-face {
  font-family: 'Gothic';
   font-style: normal;
   font-weight: 100;
   src: url(font/NotoSansKR-Bold.woff2) format('woff2'),
        url(font/NotoSansKR-Bold.woff) format('woff'),
        url(font/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Sans-Serif';
  font-style: normal;

   src: url(font/NotoSansKR-Light.woff2) format('woff2'),
        url(font/NotoSansKR-Light.woff) format('woff'),
        url(font/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
  font-family: 'DotumChe';
  font-style: normal;
  font-weight: 100;
  src: url(font/NotoSansKR-Regular.woff2) format('woff2'),
       url(font/NotoSansKR-Regular.woff) format('woff'),
       url(font/NotoSansKR-Regular.otf) format('opentype');
}

html,body {
font-family:"Sans-Serif",Times New Roman,Arial,Helvetica,SlowSlow,Osaka,Meiryo,Hiragino, Kaku, Gothic Pro,MS PGothic,
malgun gothic,AppleGothicNeoSD,Microsoft NeoGothic,Droid sans;
  margin: 0;padding:0;
 -webkit-text-size-adjust: none;
 -moz-text-size-adjust: none;
 -ms-text-size-adjust: none;
 -o-text-size-adjust: none;width:100%;height:100%;background: linear-gradient(#00a3ac 10%, #fff);background-repeat: no-repeat;
}



::-webkit-scrollbar{ width:10px; height: 100%; -webkit-overflow-scrolling:touch;}
::-webkit-scrollbar-thumb{
	background: #fff;
	border-radius: 20px;
}
::-webkit-scrollbar-track{
	background: rgba(255,255,255,0.6);
  border-radius: 20px;
}


@keyframes AnimationName { 
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}


#wrap{text-align:center;margin:0 auto;padding:0;width:100%;}
#wrap ul.box{float:left;text-align:center;margin:0 auto;padding:0;width:100%;}
#wrap ul.box li.tbox{float:left;text-align:center;padding:0;width:100%;}

.f_page1{font-size:80%;font-family:Gothic;font-weight:bold;color:#555;padding:5px 10px 5px 10px;margin:0px 1px 0px 1px;background:#ffffff;border:1px solid #dddddd;border-radius:3px;}
.f_page2{font-size:80%;font-family:Gothic;font-weight:bold;color:#555;padding:5px 10px 5px 10px;margin:0px 1px 0px 1px;background:#f5f5f5;border:1px solid #bbbbbb;border-radius:3px;}

input[type="text"],input[type="password"],input[type="number"],input[type="file"],input[type="date"],input[type="time"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"]
{width:100%;text-align:left;margin:0;padding:8px 10px 8px 10px;border:1px solid #cacdcd;background:#f6f6f6;font-size:100%;font-family:DotumChe;color:#353535;border-radius:5px;outline:none;}


.font_1{font-size:70%;color:#619898;font-family:Gothic;text-shadow: -1px 0 #ecf8ec, 0 1px #ecf8ec, 1px 0 #ecf8ec, 0 -1px #ecf8ec;
-moz-text-shadow: -1px 0 #ecf8ec, 0 1px #ecf8ec, 1px 0 #ecf8ec, 0 -1px #ecf8ec;
-webkit-text-shadow: -1px 0 #ecf8ec, 0 1px #ecf8ec, 1px 0 #ecf8ec, 0 -1px #ecf8ec;
}

.font_2{font-size:150%;color:#3a868c;font-family:Gothic;text-shadow: -1px 0 #ecf8ec, 0 1px #ecf8ec, 1px 0 #ecf8ec, 0 -1px #ecf8ec;
-moz-text-shadow: -1px 0 #ecf8ec, 0 1px #ecf8ec, 1px 0 #ecf8ec, 0 -1px #ecf8ec;
-webkit-text-shadow: -1px 0 #ecf8ec, 0 1px #ecf8ec, 1px 0 #ecf8ec, 0 -1px #ecf8ec;
}

input:focus{border:1px solid #bfac58;background:#ffffff;}
.focusnone:focus{border:1px solid #3e4273;background:none;}

.button {padding:8px 15px 8px 15px;border:0px;border-radius:8px;color:#fff;font-size:95%;font-family:DotumChe;border-radius:10px;outline:none;
background: linear-gradient(-45deg, #8aae4c, #0e560e, #479f47, #a8c772);background-size: 400% 400%;
	animation: AnimationName 15s ease infinite;
}

.tab{display:none}
.tab.on{display:block}
.tab-container{display:flex;justify-content:center;gap:10px;margin-top:0px;font-size:90%;}
.tabs{padding:10px 15px 10px 15px;border-radius:50px;font-weight:700;background:#b8e2c0;color:#3d531e;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
-moz-text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
-webkit-text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;box-shadow :0px 5px 10px #24836c;border:1px solid #2f9179;}
.tabs.on{color:#fff;background: linear-gradient(-45deg, #6b8b34, #094009, #2f7e2f, #89a755);background-size: 400% 400%;
	animation: AnimationName 15s ease infinite;text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
-moz-text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
-webkit-text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;box-shadow :0px 5px 10px #2c3e0d;border:1px solid #3d791c;}
.tab_wrap{width:100%;padding:10px;text-align:center;}


.Tap_Off {float:left;text-align:center;padding:8px 20px 8px 20px;color:#eee;background:#9fa9b9;border-top-left-radius:10px;border-top-right-radius:10px;}
.Tap_On {float:left;text-align:center;padding:8px 20px 8px 20px;color:#fff;background:#00a3ac;border-top-left-radius:10px;border-top-right-radius:10px;}
.TapBackground {padding:0px;}
.Tap_Detail {clear:both;text-align:center;padding:0px;display:none;width:100%;}

details { margin:5px 0 10px; }
details > summary { background:#555; color:#fff; font-size:100%;font-family:Gothic;padding:10px; outline:0; border-radius:5px; cursor:pointer; transition:background 0.5s; text-align:left; box-shadow: 1px 1px 2px gray;}
details > summary::-webkit-details-marker { background:#555; color:#fff; font-size:100%;font-family:Gothic;background-size:contain; transform:rotate3d(0, 0, 1, 90deg); transition:transform 0.25s;}
details[open] > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 180deg);}
details[open] > summary { background:#555;}
details[open] > summary ~ * { animation:reveal 0.5s;}
.tpt { background:#555; color:#fff; margin:5px 0 10px; padding:5px 10px; line-height:25px; border-radius:5px; box-shadow: 1px 1px 2px gray;}

@keyframes reveal {
    from { opacity:0; transform:translate3d(0, -30px, 0); }
    to { opacity:1; transform:translate3d(0, 0, 0); }
}

   @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
    .test_obj {
        position: relative;
        animation: fadeInLeft 1s;animation-duration: 0.3s;
    }

   @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
    .test_obj2 {
        position: relative;
        animation: fadeInRight 1s;animation-duration: 0.3s;
    }


   @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translate3d(0, -100%, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
    .test_obj3 {
        position: relative;
        animation: fadeInDown 1s;
    }


   @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
    .test_obj4 {
        position: relative;
        animation: fadeInUp 1s;
    }

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.font_50{font-size:50%;color:#555;font-family:DotumChe}
.font_55{font-size:55%;color:#555;font-family:DotumChe}
.font_60{font-size:60%;color:#555;font-family:DotumChe}
.font_65{font-size:65%;color:#555;font-family:DotumChe}
.font_70{font-size:70%;color:#555;font-family:DotumChe}
.font_75{font-size:75%;color:#555;font-family:DotumChe}
.font_80{font-size:80%;color:#555;font-family:DotumChe}
.font_85{font-size:85%;color:#555;font-family:DotumChe}
.font_90{font-size:90%;color:#555;font-family:DotumChe}
.font_95{font-size:95%;color:#555;font-family:DotumChe}
.font_100{font-size:100%;color:#555;font-family:DotumChe}
.font_105{font-size:105%;color:#555;font-family:DotumChe}
.font_110{font-size:110%;color:#555;font-family:DotumChe}
.font_115{font-size:115%;color:#555;font-family:DotumChe}
.font_120{font-size:120%;color:#555;font-family:DotumChe}
.font_125{font-size:125%;color:#555;font-family:DotumChe}
.font_130{font-size:130%;color:#555;font-family:DotumChe}
.font_135{font-size:135%;color:#555;font-family:DotumChe}
.font_140{font-size:140%;color:#555;font-family:DotumChe}
.font_150{font-size:150%;color:#555;font-family:DotumChe}
.font_160{font-size:160%;color:#555;font-family:DotumChe}
}

@media only screen and (min-device-width : 481px) and (max-device-width : 768px)
{
.font_50{font-size:60%;color:#555;font-family:DotumChe}
.font_55{font-size:65%;color:#555;font-family:DotumChe}
.font_60{font-size:70%;color:#555;font-family:DotumChe}
.font_65{font-size:75%;color:#555;font-family:DotumChe}
.font_70{font-size:80%;color:#555;font-family:DotumChe}
.font_75{font-size:85%;color:#555;font-family:DotumChe}
.font_80{font-size:90%;color:#555;font-family:DotumChe}
.font_85{font-size:95%;color:#555;font-family:DotumChe}
.font_90{font-size:100%;color:#555;font-family:DotumChe}
.font_95{font-size:105%;color:#555;font-family:DotumChe}
.font_100{font-size:110%;color:#555;font-family:DotumChe}
.font_105{font-size:115%;color:#555;font-family:DotumChe}
.font_110{font-size:120%;color:#555;font-family:DotumChe}
.font_115{font-size:125%;color:#555;font-family:DotumChe}
.font_120{font-size:130%;color:#555;font-family:DotumChe}
.font_125{font-size:135%;color:#555;font-family:DotumChe}
.font_130{font-size:140%;color:#555;font-family:DotumChe}
.font_135{font-size:145%;color:#555;font-family:DotumChe}
.font_140{font-size:150%;color:#555;font-family:DotumChe}
.font_150{font-size:160%;color:#555;font-family:DotumChe}
.font_160{font-size:170%;color:#555;font-family:DotumChe}
}

@media only screen and (min-device-width : 769px) and (max-device-width : 1024px)
{
.font_50{font-size:70%;color:#555;font-family:DotumChe}
.font_55{font-size:75%;color:#555;font-family:DotumChe}
.font_60{font-size:80%;color:#555;font-family:DotumChe}
.font_65{font-size:85%;color:#555;font-family:DotumChe}
.font_70{font-size:90%;color:#555;font-family:DotumChe}
.font_75{font-size:95%;color:#555;font-family:DotumChe}
.font_80{font-size:100%;color:#555;font-family:DotumChe}
.font_85{font-size:105%;color:#555;font-family:DotumChe}
.font_90{font-size:110%;color:#555;font-family:DotumChe}
.font_95{font-size:115%;color:#555;font-family:DotumChe}
.font_100{font-size:120%;color:#555;font-family:DotumChe}
.font_105{font-size:125%;color:#555;font-family:DotumChe}
.font_110{font-size:130%;color:#555;font-family:DotumChe}
.font_115{font-size:135%;color:#555;font-family:DotumChe}
.font_120{font-size:140%;color:#555;font-family:DotumChe}
.font_125{font-size:145%;color:#555;font-family:DotumChe}
.font_130{font-size:150%;color:#555;font-family:DotumChe}
.font_135{font-size:155%;color:#555;font-family:DotumChe}
.font_140{font-size:160%;color:#555;font-family:DotumChe}
.font_150{font-size:170%;color:#555;font-family:DotumChe}
.font_160{font-size:180%;color:#555;font-family:DotumChe}
}

@media only screen and (min-device-width : 1025px) and (max-device-width : 1920px)
{
.font_50{font-size:80%;color:#555;font-family:DotumChe}
.font_55{font-size:85%;color:#555;font-family:DotumChe}
.font_60{font-size:90%;color:#555;font-family:DotumChe}
.font_65{font-size:95%;color:#555;font-family:DotumChe}
.font_70{font-size:100%;color:#555;font-family:DotumChe}
.font_75{font-size:105%;color:#555;font-family:DotumChe}
.font_80{font-size:110%;color:#555;font-family:DotumChe}
.font_85{font-size:115%;color:#555;font-family:DotumChe}
.font_90{font-size:120%;color:#555;font-family:DotumChe}
.font_95{font-size:125%;color:#555;font-family:DotumChe}
.font_100{font-size:130%;color:#555;font-family:DotumChe}
.font_105{font-size:135%;color:#555;font-family:DotumChe}
.font_110{font-size:140%;color:#555;font-family:DotumChe}
.font_115{font-size:145%;color:#555;font-family:DotumChe}
.font_120{font-size:150%;color:#555;font-family:DotumChe}
.font_125{font-size:155%;color:#555;font-family:DotumChe}
.font_130{font-size:160%;color:#555;font-family:DotumChe}
.font_135{font-size:165%;color:#555;font-family:DotumChe}
.font_140{font-size:170%;color:#555;font-family:DotumChe}
.font_150{font-size:180%;color:#555;font-family:DotumChe}
.font_160{font-size:190%;color:#555;font-family:DotumChe}
}