/*
    Common Css
*/
body, header, footer, nav {padding:0;margin:0;}
ol, ul, li {list-style-type:none;}
p, div, ul, ol, li, img,a {padding:0;margin:0;}


/* 
    Layout Css
*/
body {
    padding-top:50px;
}
#wrapper {
  padding: 30px 0;
}

/*
    Full page class
*/

hr.line {border-color:#eee;margin:0;padding:0;}
.full-line {padding:20px 0;}
.background-gray {background-color:#f8f8f8}
.background-white {background-color:#fff}
.background-o365 {background-color:#d83b01}
.background-yu {background-color:#0d3f7a}
.full-line h3 {}
.full-line p.dscr {}
.full-line img {max-height:400px;}

.h2_yu {color:#0d3f7a;font-size:28px;font-family:'Malgun Gothic';font-weight:800;}
.h2_small {color:#666;font-size:15px;font-family:'Malgun Gothic';}


:root {
    --yu-navy: #003764;
    --yu-blue: #005696;
    --yu-light-gray: #f4f7f9;
    --yu-point-red: #d93025;
}

.yu-info .row { display: flex; align-items: stretch; gap: 30px; }
.yu-info .col-left { flex: 1; }
.yu-info .col-right { flex: 1.5; }

/* Office 365 이용 혜택 */
.yu-info h3 { margin:0;font-size: 22px; margin-bottom: 15px; color: var(--yu-navy); border-left: 5px solid var(--yu-blue); padding-left: 12px; font-weight: 700;line-height:1.6 }
.yu-info .benefit-list { list-style: none; margin-bottom: 20px; }
.yu-info .benefit-list li { margin-bottom: 10px; font-size: 14px; position: relative; padding-left: 25px; }
.yu-info .benefit-list li::before { content: '✔'; position: absolute; left: 0; color: var(--yu-blue); font-weight: bold; }

.yu-info .id-tip { background: var(--yu-light-gray); padding: 18px; border-radius: 10px; border: 1px solid #e1e8ed; }
.yu-info .id-tip strong { color: var(--yu-blue); font-size: 14px; display: block; margin-bottom: 4px; }
.yu-info .id-tip p { font-size: 13px; color: #555; line-height: 1.5; letter-spacing: -0.3px; }
.yu-info .domain-tag { background: var(--yu-blue); color: #fff; padding: 1px 5px; border-radius: 3px; font-weight: bold; }

/* 자격 종료 안내 박스 */
.yu-info .warning-area { 
            background-color: #fffaf0; border: 1.5px solid #ffe4b5; padding: 22px; border-radius: 12px; 
            height: 100%; display: flex; flex-direction: column; box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.yu-info .warning-area h4 { color: #856404; margin-bottom: 12px; font-size: 17px; display: flex; align-items: center; font-weight: bold; }
.yu-info .warning-area h4::before { content: '⚠️'; margin-right: 8px; } 
        
.yu-info .warning-area p { font-size: 13px; margin-bottom: 12px; color: #555; letter-spacing: -0.4px; word-break: keep-all; }
        
.yu-info .policy-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 13px; background: #fff; }
.yu-info .policy-table th, .policy-table td { border: 1px solid #eee; padding: 12px 10px; text-align: center; white-space: nowrap; }
.yu-info .policy-table th { background: #f8f9fa; color: #333; font-weight: bold; }
        
.yu-info .emp { color: var(--yu-point-red); font-weight: bold; }
.yu-info .disclaimer { font-size: 12px; color: #333; margin-top: auto; padding-top: 12px; border-top: 1px dashed #ccc; line-height: 1.8; }

/* 반응형 */
@media (max-width: 1024px) {
    .yu-info .row { flex-direction: column; }
    .yu-info .col-left, .col-right { width: 100%; }
    .yu-info .policy-table { display: block; overflow-x: auto; }
}

/*
    Button Css
*/
.btn-o365 {
    background-color: #d83b01;
    border-color: #fff;
}
.btn-o365:hover,.btn-o365:active,
.btn-o365:focus,.btn-o365:focus:active {background-color:#fff;border-color:#fff;color:#d83b01;}
.btn-o365-lg {height:60px;width:300px;}
.btn-extend {padding-left:30px;padding-right:30px;}

.btn-yu {background-color:#0d3f7a;border-color:#fff;}
.btn-yu:hover,.btn-yu:active,
.btn-yu:focus,.btn-yu:focus:active {background-color:#fff;border-color:#fff;color:#0d3f7a;}
.btn-yu-lg {height:60px;width:300px;}

.btn-yu-logout-blue {
    width: 65px;
    height: 21px;
    border: 0;
    border-radius: 0;
    background: #0d3f7a;
    color: #fff !important;
    font-size: 12px;
    cursor: pointer;
    display:inline-block;
    margin: 0;
    padding: 0 0 0 0;
    text-align:center;
    text-decoration:none !important;
    font-family: NanumBarunGothic, '맑은 고딕', '맑은고딕', malgun gothic, '돋움', Dotum, '굴림', Gulim, Helvetica, 'Apple SD Gothic Neo', AppleGothic, Arial, Sans-serif;
}

.btn-yu-login-blue {
    width: 300px;
    height: 60px;
    border: 0;
    border-radius: 0;
    background: #0d3f7a;
    color: #fff !important;
    font-size: 1.2em;
    cursor: pointer;
    display: inline-block;
    margin: 20px 0 30px 0;
    padding: 18px 0 0 0;
    text-align: center;
    text-decoration: none !important;
    font-family: NanumBarunGothic, '맑은 고딕', '맑은고딕', malgun gothic, '돋움', Dotum, '굴림', Gulim, Helvetica, 'Apple SD Gothic Neo', AppleGothic, Arial, Sans-serif;
}

.btn-yu-checkid-blue {
    width: 70px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background: #1564C2;
    color: #fff !important;
    font-size: 0.8em;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none !important;
    font-family: NanumBarunGothic, '맑은 고딕', '맑은고딕', malgun gothic, '돋움', Dotum, '굴림', Gulim, Helvetica, 'Apple SD Gothic Neo', AppleGothic, Arial, Sans-serif;
}

.btn-yu-next-blue {
    width: 100px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: #0d3f7a;
    color: #fff !important;
    font-size: 1em;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none !important;
    font-family: NanumBarunGothic, '맑은 고딕', '맑은고딕', malgun gothic, '돋움', Dotum, '굴림', Gulim, Helvetica, 'Apple SD Gothic Neo', AppleGothic, Arial, Sans-serif;
}

@media all and (max-width:767px) {
    .btn-o365 {width:100%;}
    .btn-yu {width:100%;}
}

/*
    Navbar Css
*/
.navbar {margin-bottom:0;}
@media (min-width: 768px) {
  .navbar-nav{float:right;  }
}
.navbar-inverse {background-color:#fff;border:none;border-bottom:1px solid #eee;font-size:13px;}
.navbar-brand {padding:0;}
.navbar-brand img {max-height:50px;}
.navbar-header .sub-logo {display:block;height:50px;line-height:50px;vertical-align:middle;margin-left:20px;}
.navbar-header .sub-logo img.logo {max-height:40px;vertical-align:middle;}
@media all and (min-width:768px) {
    .navbar-header {min-width:200px;}
}

/* 상단 폰트, 배경*/
.navbar-inverse .navbar-nav > li > a {
  color: #6c6c6c;font-weight:bold;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #ec1d54;
  background-color: transparent;
}

.navbar-inverse .navbar-nav > li.active > a {color: #fff;background-color: #808080;}
.navbar-inverse .navbar-nav > li.active > a:hover,
.navbar-inverse .navbar-nav > li.active > a:focus {
  color: #fff;
  background-color: #5f5d5d;
}

/* 상단 폰트 : 토글버튼 */
.navbar-inverse .navbar-toggle {
  border-color: #fff;
  background-color: #fff;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #f9f9f9;
}
.navbar-inverse .navbar-toggle .icon-bar {background-color:#000}

li.big-only {display:none;}
li.small-only {display:block;}
@media all and (min-width:768px) {
    li.big-only {display:block;}
    li.small-only {display:block;}/*none*/
}


@media all and (max-width:767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {color: #6c6c6c;font-size:13px;}
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {color: #e55c28;}
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {background-color: #dfdfdf;}
}

#toTop
{
    z-index:1000;
	width: 100px;
	position: fixed;
	bottom: 10px;
	right: 20px;
	cursor: pointer;
	display: none;
	filter: alpha(opacity=60);
}


/*
    Copyright Css
*/
footer {margin:20px 0 30px 0;padding-bottom:10px;}
.copyright {padding:0 20px;margin:0 auto;max-width:730px;}
.copyright-logo {float:left;margin-bottom:10px;}
.copyright-logo img {max-height:50px;margin-right:25px; }
.copyright-text {float:left;font-size:11px;color:#666666;font-family:Dotum;}
.copyright-text a {color:#666666;text-decoration:none;letter-spacing:-1px;}
.copyright-text a:hover {text-decoration:underline;}
.copyright-text ul.link {}
.copyright-text ul.link li.start {padding-left:0px;}
.copyright-text ul.link li {float:left;left:-1px;background:url(../Images/link_bar.gif) right 5px no-repeat;vertical-align:baseline;white-space:nowrap;padding:0 6px 0 4px;}
.copyright-text ul.link li.end {background-image:none;}
.copyright-text div.info {clear:both;color:#888;padding-top:3px;}
.copyright-text div.info strong {color:#0d3f7a;}



/*
    Page Common Css
*/
h4.page-title {font-weight:bold;color:#000;}
hr.page-title-line {margin-top:0;border-color:#ccc;}

.bs-callout {padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px;}
.bs-callout-warning {border-left-color:#aa6708;}
.bs-callout h4 {color:#aa6708;margin-top:0;margin-bottom:5px;font-size:18px;}

.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb100 {
    margin-bottom: 100px;
}

/*
    Paragraph, Text page
*/
.textpage {font-size:12px;font-family:Dotum;color:#666;}
.textpage p {color:#808080}
.textpage .text-body {margin:10px 20px;}
.textpage h5 {font-weight:bold;color:#0d3f7a;padding:20px 0 0 0;margin-top:10px;font-size:12px;}
.textpage h6 {font-weight:bold;color:#666666;font-size:12px;}
.textpage .text-body p {padding:10px;}
.textpage .text-body p.link {line-height:150%;}


/*
    Form page
*/
.form {max-width:600px;margin:0 auto;}
.form .btn-default {min-width:100px;}

span.label {font-size:12px;letter-spacing:1px;}

.ime-auto {ime-mode:auto;}
.ime-active {ime-mode:active;}/*한글기본,변환가능*/
.ime-inactive {ime-mode:inactive;}/*영문기본,변환가능*/
.ime-disabled {ime-mode:disabled;}/*영문기본,변환불가*/

/*
    Guide page
*/
img.guide {border:3px solid #8A8B8B}
p.block {margin-bottom:20px;}

.container-fluid .textpage {max-width:856px;}
.container-fluid .textpage .alert {margin-top:10px;margin-bottom:30px;}

/*
    Admin page
*/
.container-fluid .formpage {max-width:856px;}