@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400');

a.app {width:100%; height:60px; text-align:center; color:#ffffff; border-radius:5px; font-size:17px; background-color:#2d3586; margin-bottom:30px; display:block; line-height:60px;}
a.app i {color:#ffffff; margin-right:10px}

#page h54 {display:block; position:relative; font-family: 'ChosunKg'; color:#000000; font-weight:500; font-size:20px; line-height:60px; height:60px; border-bottom:1px solid #000000; margin-bottom:20px;}
#page h54:not(:first-child) {margin-top:50px}

#page h54:before {color:#000000; font-size:15px; font-family: "Font Awesome 5 free"; content: "\f058"; margin-right:5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:bold;}

#page  *:not(i) {font-family: "Noto Sans KR", sans-serif !important; letter-spacing:0 !important;}

#page h55 {padding-left:20px; display:block; position:relative; color:#999999; font-size:0.8rem; font-family: "Noto Sans KR", sans-serif !important}
#page h55:before {margin-left:-20px; color:#999999; font-size:0.8rem; font-family: "Font Awesome 5 free"; content: "\f058"; margin-right:7px;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:bold;}

td b2 {color:#000000; font-weight:bold}

.p0102 b {display:block; color:#000000; text-align:right}
.p0102 b img {width:200px; margin-top:10px}

#subv {width:100%; height:200px; margin-top:0px; padding-top:100px; box-shadow: 0 -10px 20px -10px rgba(0,0,0,0.1) inset,0 -10px 20px -10px rgba(0,0,0,0.2); text-align:center; overflow:auto}

#footerspon {width:100%; height:140px; background:#f9f9f9; z-index:11; position:relative}
#footerspon img {float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display:block; width:90%; max-width:1600px;}
.bg-video-subv {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 100%;
  z-index: -1;
}

.bg-video__content-subv {
  height: 300px;
  width: 100%;
  object-fit: cover;
  
}

#subv div.bg {width:100%; height:100%; background:rgba(0,0,0,0.7); position:absolute; top:0px; left:0px}

#subv img {height:40px; margin:70px 0 0 0}

#subv h1 {font-family: 'Black Han Sans'; color:#ffffff; font-size:40px; margin:90px 0 0 0; position:relative}
#subv h1:after {content:"●"; font-size:15px; color:#8E60A7; position:absolute; bottom:5px; margin-left:10px;}

#smenu {width:100%; height:50px; background-color:#8E60A7; line-height:50px; text-align:center; position: -webkit-sticky; /* 사파리 브라우저 지원 */
    position: sticky;
    top: 100px; z-index:90}

#smenu a {color:#ffffff; line-height:50px; margin:0 20px 0 20px; font-size:15px;}
#smenu a.on {color:#000000; border-bottom:4px solid #000000; padding-bottom:10px;}

table * {font-family: "Noto Sans KR", sans-serif !important}
td {padding:10px !important}
th {padding:10px !important}

td b {line-height:20px; color:#000000; padding-bottom:0px; display:block}
td b:before {color:#000000; font-family: "Font Awesome 5 free"; content: "\f3c9"; margin-right:5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:bold;}

td span {display:block; color:#999999; font-size: 0.8rem;}
td span:before {font-family: "Font Awesome 5 free"; color:#999999; content: "\f058"; margin-right:5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:bold;}

img {max-width:100%}

ul {display:block; margin-bottom:30px !important}

#page {padding:100px 0 100px 0; display:table; margin:0 auto;}
#page h1 {text-align:center; font-size:30px; font-weight:900; color:#000000; background:; line-height:1.5; margin-bottom:0px}

#page h2 {text-align:center; font-size:20px; font-weight:300; color:#000000; margin-bottom:50px}
#page p {line-height:2; font-family: "Noto Sans KR", sans-serif; font-weight: 300 !important; font-size:17px; letter-spacing:0; margin-bottom:50px; color:#333333;}
#page p b {color:#000000; line-height:2; font-family: "Noto Sans KR", sans-serif; font-size:17px; font-weight: 400 !important;}

#page dl * {font-family: "Noto Sans KR", sans-serif; font-size:17px; letter-spacing:0; font-weight: 300 !important;}
#page dl dt {font-weight:400 !important}
#page p:last-child {margin-bottom:0px}

#page h3{color:#0f0f70; font-size:20px; font-weight:800; border-bottom:1px solid #0f0f70; padding-bottom:20px; margin-bottom:20px; line-height:1}
#page h3:before {color:#0f0f70; font-family: "Font Awesome 5 free"; content: "\f058"; margin-right:10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:bold;}



#page h30{display:block; color:#0f0f70; font-size:20px; font-weight:800; line-height:1; padding-bottom:20px;}
#page h30:before {color:#0f0f70; font-family: "Font Awesome 5 free"; content: "\f058"; margin-right:10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight:bold;}


#page section:not(:first-child) {margin-top:100px}

#page section h5 {font-family: 'SuseongDotum'; background:#f9f9f9; border-radius:10px; text-align:center; font-size:20px; line-height:1.7; padding:50px 0 50px 0; color:#0f0f70}

.p0101 {width:calc(80% - 0px); position:relative}
.p0101 h10 {display:block; font-size:80px; line-height:1; color:#000000; font-weight:900; margin-bottom:30px;}
.p0101 h10 span {display:block; font-size:60px; font-weight:100}
.p0101 h20 {display:block; font-size:30px; line-height:1; color:#8e60a7; font-weight:800; margin-bottom:0px;}
.p0101 section {width:50%; float:left; margin-top:0px !important}
.p0101 section p {margin-bottom:50px}

.img {animation: rotate_image 30s ease-in-out infinite;transform-origin: 50% 50%;}



#page h62 {display:block; color:#000000; margin-bottom:10px; font-weight:bold}
#page h62 a {margin-left:20px; font-size:14px}
#page h62 a i {color:#000000; margin-right:5px}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}
.history {border-top:1px solid #b6c0c7; width:100%;}

.wide-wrap {width:90% !important}

#roll {position:absolute; bottom:-400px; left:0px; z-index:-1; max-width:40%}
#roll2 {position:absolute; bottom:-350px; right:-300px; z-index:-1; max-width:60%}
#roll3 {float: none; position: absolute; top: 50%; left: 80%; transform: translate(-50%, -50%); width:80% !important;}

h6 {line-height:1.7; font-style:italic; display:block; background:#f9f9f9; border-radius:10px; padding:50px; width:calc(100% - 100px); text-align:center; margin:0 0 50px 0; font-family: 'BookkMyungjo-Bd'; color:#000000; font-size:18px; }

#page h303 {margin-top:100px; display:block; font-size:25px; font-weight:900;  background: linear-gradient(to right top, #8E60A7, #364c9b); color: transparent; -webkit-background-clip: text;  line-height:1.5; margin-bottom:30px; text-align:center}
#page h303:after {content: ""; display: block; width: 50px; border-bottom: 1px solid #8E60A7; margin:0 auto; margin-top:30px;}
#page h303:first-child {margin-top:0px}
#page h303 i {color:#8E60A7; margin:0 10px 0 10px}


#page ul {margin:0px 20px 0px 20px;}
#page li {margin-bottom:5px; list-style-type: disc; font-size:17px; color:#333333; font-family: "Noto Sans KR", sans-serif; font-weight:300}
#page ul li::marker {
  color:#8E60A7;
}
#page h4 {background:#f9f9f9; width:calc(100% - 100px); padding:50px; border-radius:10px;}
#page h7 {color:#8E60A7; font-weight:900; font-size:18px; margin:30px 0 10px 0; display:block; font-family: "Noto Sans KR", sans-serif;}
#page article {margin-bottom:50px; margin-top:0px}
#page article:last-child {margin-bottom:0px}
#page table {margin-bottom:50px; background:#fcfcfc}
#page table:last-child {margin-bottom:0px}

form article {margin-top:50px !important}

.pp0104 ul {margin-top:-20px !important}

.listup {width:100%; display:table;}
.listup div {width:calc(33.33% - 62px); margin-right:30px; float:left; height:250px; border-radius:10px; border:1px solid #e6e6e6; padding:20px; margin-bottom:30px; text-align:center}
.listup div:nth-child(3n) {margin-right:0px}

.listup div p {text-align:center; color:#000000 !important; font-size:15px !important; line-height:1.5 !important; margin-top:-30px}
.listup div img {max-width:100%;}

button.btnlink {color:#000000; border-bottom:1px solid #000000; font-size:16px; font-weight:bold; height:40px;}
button.btnlink i {color:#000000; margin-left:10px;}

.margintop100 {margin-top:100px !important}

.pregress {width:100%; display:table; margin-bottom:0px}
.pregress div {width:calc(20% - 24px) !important; float:left; margin-right:30px; margin-bottom:30px; }
.pregress div {position:relative}
.pregress div:nth-child(5n) {margin-right:0px !important}
.pregress div button {width:100%; height:100%; display: block; padding-top: 5px !important; /* 텍스트를 위로 붙이기 */
padding-bottom: auto !important;}
.pregress div button:nth-child(1) {background:#f6f6f6 !important; border-radius:10px; font-size:14px; height:250px !important; padding:0 20px 0 20px; color:#000000}
.pregress div button:nth-child(1) i {color:#000000; font-size:35px; display:block !important; width:100%!important; text-align:center; margin:0 0 10px 0}
.pregress div button p {position:absolute; bottom:0px; left:0px; border-radius:0 0 10px 10px; background:#8e60a7; padding:10px 0 10px 0; text-align:center; color:#ffffff !important; width:100%; font-size:14px !important;}

.noti li {font-size:15px !important}
#page ul.noti li::marker {
  color:#999999;
}

.pregress div button:nth-child(1):before {font-family: "Font Awesome 5 free"; content: "\f054"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color:#000000; position:absolute; font-size:20px; right:-20px; top:calc(50% - 20px); font-weight:bold;}

.pregress div:last-child button:nth-child(1):before {display:none}
.pregress div b {position:absolute; bottom:70px; left:0px; display:block; width:100%; text-align:center; font-size:14px; color:#03fd7f}

.p0105 h5 {width:170px; height:50px; line-height:50px !important; border-radius:50px; color:#ffffff !important; padding:0 0 0 30px;}
.p0105 h5 i {color:#ffffff !important}

.plogin {max-width:900px; margin:0 auto; width:90%}


input[readonly] {background-color:#f9f9f9}

.input-icon {
            background: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/user.svg') no-repeat 10px center;
            background-size: 16px 16px;
	  text-indent:30px;
	 background-position: 20px center;
        }

        .input-icon.password {
            background-image: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/lock.svg');
        }
	.input-icon.email {
            background-image: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/envelope.svg');
        }
        
        .input-icon.email {
            background-image: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/envelope.svg');
        }
         .input-icon.building {
            background-image: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/building.svg');
        }
      .input-icon.globe {
            background-image: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/globe.svg');
        }
        .input-icon.phone {
            background-image: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/phone.svg');
        }

        table {margin-bottom:30px !important}
        
h99 {display:block; text-align:center; margin:200px 0 200px 0; width:100%; background:}
h99 button {max-width:300px; margin:0 auto; margin-top:30px}

.p020602101 {width:100%; display:table; padding-top:0px !important; padding-bottom:0px !important; height:auto !important;}
.p020602101 a {width:calc(33.3% - 20px); margin-right:30px; float:left; display:block; padding-top:0px !important; padding-bottom:0px !important;}
.p020602101 a:nth-child(3n) {margin-right:0px;}

.p020602102 p {width:calc(25% - 22.5px); margin-right:30px; float:left; display:block; padding-top:0px !important; padding-bottom:0px !important; text-align:center; color:#000000; font-weight:bold !important; font-size:15px!important;}
.p020602102 p:nth-child(4n) {margin-right:0px;}

@media ( max-width: 1200px ) {
#subv {width:100%; height:100px; margin-top:0px; padding-top:100px; box-shadow: 0 -10px 20px -10px rgba(0,0,0,0.1) inset,0 -10px 20px -10px rgba(0,0,0,0.2); text-align:center; overflow:auto}

.p0105 h5 {width:130px; height:30px; line-height:30px !important; border-radius:30px; color:#ffffff !important; padding:0 0 0 20px;}
.wrap {width:90%}
.plogin {width:100% !important}
.bg-video-subv {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  z-index: -1;
}

.bg-video__content-subv {
  height: 200px;
  width: 100%;
  object-fit: cover;
  
}


.table-wrapper {
  overflow-x: auto; /* 가로 스크롤만 */
  -webkit-overflow-scrolling: touch; /* 부드러운 스크롤 (iOS) */
width:100%;
}

.table-wrapper table {
width: 150%; /* 테이블을 내용만큼 넓게 */
}


#subv div.bg {width:100%; height:100%; background:rgba(0,0,0,0.7); position:absolute; top:0px; left:0px}

#subv img {height:40px; margin:70px 0 0 0}

#subv h1 {color:#ffffff; font-size:25px; margin:20px 0 0 0; position:relative}
#subv h1:after {content:"●"; font-size:10px; position:absolute; bottom:5px; margin-left:10px;}

#smenu {width:100%; height:40px; line-height:40px; text-align:center; position: -webkit-sticky; /* 사파리 브라우저 지원 */
    position: sticky;
    top: 80px;}

#smenu a {color:#ffffff; line-height:40px; margin:0 10px 0 10px; font-size:14px;}
#smenu a.on {color:#000000; border-bottom:3px solid #000000; padding-bottom:10px;}
#smenu {white-space:nowrap; width:calc(100% - 0px);  -webkit-overflow-scrolling : touch; overflow:auto; }


#page {padding:50px 0 50px 0; display:table; margin:0 auto; width:90%}
#page p {line-height:2; font-family: "Noto Sans KR", sans-serif; font-weight: 300 !important; font-size:13px; letter-spacing:0}


.p0101 {width:calc(90% - 0px);}
.p0101 h10 {display:block; font-size:35px; line-height:1.2; color:#000000; font-weight:900; margin-bottom:20px;}
.p0101 h10 span {display:block; font-size:25px; font-weight:200; line-height:1.2}

.p0101 h20 {display:block; font-size:17px; line-height:1; color:#8e60a7; font-weight:800; margin-bottom:-30px;}
.p0101 section {width:100%; float:left; margin-top:0px !important; margin-bottom:50px}
.p0101 section p {margin-bottom:50px}

.img {animation: rotate_image 30s ease-in-out infinite;transform-origin: 50% 50%;}

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

#roll {position:absolute; bottom:-220px; left:0px; z-index:-1; max-width:100%}
#roll2 {position:absolute; bottom:-100px; right:-100px; z-index:0; max-width:100%}
#roll3 {float: none; position: absolute; top: 80%; left: 80%; transform: translate(-50%, -50%); width:120% !important;}

#footerspon {width:100%; height:100px; background:#f9f9f9; z-index:11; position:relative}
#footerspon img {height:auto; width:90%; float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display:block;}


.pregress div {width:calc(100% - 0px) !important; float:left; margin-right:0px; margin-bottom:30px; }

.pregress div button:nth-child(1):before {font-family: "Font Awesome 5 free"; content: "\f078"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color:#000000; position:absolute; font-size:20px; right:calc(50% - 10px); top:calc(100% - 0px); font-weight:bold;}


.p020602101 {width:100%; display:table; padding-top:0px !important; padding-bottom:0px !important; height:auto !important;}
.p020602101 a {width:calc(100% - 0px); margin-bottom:0px; margin-right:0px; float:left; display:block; padding-top:0px !important; padding-bottom:0px !important;}
.p020602101 a:nth-child(3n) {margin-right:0px;}

.p020602102 p {width:calc(100% - 0px); margin-right:0px; margin-bottom:0px; float:left; display:block; padding-top:0px !important; padding-bottom:0px !important; text-align:center; color:#000000; font-weight:bold !important; font-size:15px!important;}
.p020602102 p:nth-child(4n) {margin-right:0px;}
}