@import "font.css";
@import "hf.css";
@import "main.css";
@import "sub.css";





/* ========== COMMON ========== */
[data-scroll="false"] { overflow-y: hidden; }

.clearfix:after { content: ''; display: block; clear: both; }
ul.list:after { content: ''; display: table; clear: both; }
ul.list > li { float: left; }
.fLeft { float: left; }
.fRight { float: right; }
.aRight { text-align: right; }
.float:after { content: ''; display: block; clear: both; }
.f-left { float: left; }
.f-right { float: right; }

/* Grid */
.grid:after { content: ''; display: table; clear: both; }
.grid-12 { float: left; padding: 10px; width: 50%; }
.grid-6 { float: left; padding: 10px; width: 25%; }
.grid-8 { float: left; padding: 10px; width: 33.333333%; }
.grid-12 { float: left; padding: 10px; width: 50%; }



/* List Style */
.ul-square { list-style: square; }
.ul-square li { margin: 0 0 7px 10px; list-style-image: url('/child/img/icon/square.png');
    line-height: 24px; font-size: 16px; color: #555555; letter-spacing: -1px;
}
.ul-square li:last-child { margin-bottom: 0; }



/* Tab Menu */
.tab-menu:after { content: ''; display: block; clear: both; }
.tab-menu li { float: left; }
.tab-menu li button { margin: -1px 0 0 -1px; width: 100%; height: 57px; line-height: 57px; text-align: center; font-size: 16px; }
.tab-menu li button[aria-pressed="false"] { overflow: hidden; position: relative; color: #555555; background: #f5f5f5; border: 1px solid #cccccc; border-right: none; }
.tab-menu li button[aria-pressed="true"] { color: #fff; font-weight: 500; background: #184e97;  border: 1px solid #184e97; }
.l-5 li:nth-child(5n) button[aria-pressed="false"] { border-right: 1px solid #cccccc; }
.l-2 li:nth-child(2n) button[aria-pressed="false"] { border-right: 1px solid #cccccc; }

.tab-contents { padding-top: 40px; }
.tab-contents > ul > li { display: none; }
.tab-contents > ul > li.active { display: block; }


.sub_tab_menu { padding: 50px 0; width: 100%; }
.sub_tab_menu .tab_menu > ul { position: relative; }
.sub_tab_menu .tab_menu > ul:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #be8f4e; }
.sub_tab_menu .tab_menu > ul > li { float: left; margin-top: 6px; margin-right: 5px; background-color: #f9f9f9; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; }
.sub_tab_menu .tab_menu > ul > li a { display: block;  width: 190px; height: 40px; line-height: 40px; text-align: center; color: #888888; font-size: 15px; letter-spacing: -0.04em; }
.sub_tab_menu .tab_menu > ul > li.active { position: relative; margin-top: 0; border-top: 2px solid #be8f4e; background-color: #fff; border-left: 2px solid #be8f4e; border-right: 2px solid #be8f4e; }
.sub_tab_menu .tab_menu > ul > li.active a { height: 45px; color: #be8f4e; }
.sub_tab_menu .tab_menu > ul > li.active:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #fff; }
.tab_contents > ul { position: relative; }
.tab_contents > ul > li { display: none; position: absolute; top: 0; left: 0; padding-top: 35px;}
.tab_contents > ul > li.active { display: block; height:auto; position:relative; }


/* Tab Menu 2 Depth */
.tab_menu_2depth > ul > li { float: left; width: 50%; }
.tab_menu_2depth > ul > li > a { display: block; padding-left: 20px; height: 45px; line-height: 45px; color: #888888; text-align: left; font-size: 14px; font-weight: 400; background: url('/child/img/tabmenu/sub_tap.png') no-repeat right 15px center; border: 1px solid #e5e5e5; }
.tab_menu_2depth > ul > li:nth-child(2) > a { border-left: none; }
.tab_menu_2depth > ul > li:nth-child(3) > a { border-left: none; }
.tab_menu_2depth > ul > li:last-child > a { border-left: none; }
.tab_menu_2depth > ul > li.active > a { color: #fff; background: #be8f4e url('/child/img/tabmenu/sub_tap_on.png') no-repeat right 15px center; border: none; }
.tab_contents_2depth > ul > li { display: none; text-align: left; }
.tab_contents_2depth > ul > li.active { display: block; }


/* Button Style */
.btn, a.btn {
    display: inline-block; vertical-align: middle;
    width: 238px; height: 58px; line-height: 58px; text-align: center;
}
.btn-border { border: 1px solid #cccccc; }
.btn-download i { display: inline-block; vertical-align: -2px; margin-right: 9px; width: 18px; height: 17px; background: url('/child/img/icon/btn-download.png'); }
.btn-play i { display: inline-block; vertical-align: -3.5px; margin-right: 9px; width: 18px; height: 18px; background: url('/child/img/icon/btn-play.png'); }
input.btn { padding-left: 0; }
.btn_border { background-color: #fff; border: 1px solid #eee; }
.btn_confirm, a.btn_confirm { background-color: #666; color: #fff; }
.btn_point, a.btn_point { background-color: #be8f4e; color: #fff; }
.btn_point2, a.btn_point2 { background-color: #3e9b93; color: #fff; }


/* Accordion */
/* ======= Accordon Style ======= */
#menu-wrapper { overflow: hidden; max-width: 100%; cursor: pointer; }

#menu-wrapper #hamburger-menu { position: relative; width: 25px; height: 20px; margin: 15px; }

#menu-wrapper #hamburger-menu span {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    color: black;
    background-color: white;
    position: absolute;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

#menu-wrapper #hamburger-menu span:nth-child(1) {
    top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
    top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
    top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
    top: 9px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    left: -60px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
    top: 9px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

#menu-container {
  overflow-y: auto;
  height: 100%;
}

#menu-container .menu-list {
    padding-left: 0;
    display: block;
    width: 100%;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
}

#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
    font-size: 15px;
    text-transform: uppercase;
/*    border-top: 1px solid #dbdcd2;*/
}
#menu-container .menu-list li:first-of-type {
    border-top: 0;
}
.accordion-toggle, .accordion-content {
    font-size: 16px;
    position: relative;
    letter-spacing: 1px;
}

  .accordion-content {
    display: none;
}

.accordion-toggle a:before, .accordion-toggle a:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    width: 15px;
    height: 1px;
    margin-top: -1px;
    background-color: #333;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s ease-out;
}

.accordion-toggle a:before {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1;
    z-index: 2;
}

.accordion-toggle a.active:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    background: #333 !important;
}

.accordion-toggle a.active:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #333 !important;
    opacity: 0;
}





#wrap { }
#sub-wrap { padding-bottom: 110px; }
.container { margin: auto; max-width: 1540px; }
.contents { margin: auto; max-width: 1420px; }
.point_color { color: #184e97; }



/* Sub Tab List */
.sub-tab-area { margin: -69px 0 51px; background: #fff; }
[data-sticky="true"] { z-index: 99999; position: fixed; top: 0; left: 0; margin-top: 0; width: 100%;
    box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.15);
}
[data-sticky="true"]:after { z-index: -1; content: ''; position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px; background: #e5e5e5; }
.sub-tab-list:after { content: ''; display: block; clear: both; }
.sub-tab-list li { float: left; text-align: center; }
.sub-tab-list li a { display: block; height: 69px; line-height: 69px; font-size: 17px; color: #777777; }

.sub-tab-list li:hover a { font-size: 17px; color: #184e97; font-weight: 500; }
.sub-tab-list li a span { display: block; position: relative; }
.sub-tab-list li a span:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #e5e5e5; }
.sub-tab-list li:hover a span:before { content: ''; position: absolute; bottom: -7px; left: 0; right: 0; margin: auto; width: 13px; height: 7px; background: url('/child/img/icon/tab-on.png'); }
.sub-tab-list li:hover a span:after { height: 2px; background: #184e97; }
.l-2 li { width: 50%; }
.l-3 li { width: 33.33333%; }
.l-4 li { width: 25%; }
.l-5 li { width: 20%; }



/* table */
table.table { width: 100%; border-top: 2px solid #184e97; border-collapse: collapse; }
table.table tr { border-bottom: 1px solid #e5e5e5; }
table.table th { padding: 22px 15px; font-size: 16px; color: #555555; font-weight: 500; border-left: 1px solid #e5e5e5; }
table.table th:first-child { border-left: none; }
table.table td { padding: 19px 15px; text-align: center; font-size: 16px; color: #555555;
    border-right: 1px solid #e5e5e5;
}
table.table td:last-child { border-right: none; }


/* table scroll */
.scroll-table { overflow: hidden; }
.scroll-table-wrap { overflow-x: auto; }
.scroll-table-wrap table { min-width: 800px; }
.scroll-image { display: none; width: 100%; }





.scroll-top { z-index: 999; position: fixed; bottom: 60px; right: 60px;

}
.scroll-top-btn { width: 60px; height: 60px; background: #184e97 url('/child/img/icon/scroll-top.gif') no-repeat center / auto 70%; border-radius: 50%; box-shadow: 0px 2px 10px 0px rgba(0,0,0,.2);
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(150px);
-ms-transform: translateY(150px);
transform: translateY(150px);
}
[data-state="true"] {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: ease-out .25s;
    -o-transition: ease-out .25s;
    transition: ease-out .25s;
}





@media (max-width:1420px) {

}

@media (max-width:1024px){
#wrap { padding-top: 50px; }
#sub-wrap { padding-top: 50px; padding-bottom: 50px; }
.container { padding: 0 15px; }
}



@media (max-width:768px){
.scroll-top { right: 15px; bottom: 15px; }
.scroll-top-btn { width: 50px; height: 50px; }

.pc-br { display: none; }

.ul-square li { font-size: 14px; }

.btn, a.btn { width: 180px; height: 50px; line-height: 50px; font-size: 14px; }

.tab-menu li button { line-height: normal; font-size: 14px; }
.tab-contents { padding-top: 30px; }

.sub-tab-area { margin-top: -45px; }
.sub-tab-list li a { height: 45px; line-height: 45px; font-size: 14px; }

table.table th,
table.table td { padding: 10px; }
table.table th,
table.table td,
.intro2-table tr th,
.intro2-table tr td { font-size: 14px; }

.scroll-image { display: block; }
}



@media (max-width:650px){
.sub-visual { height: 150px; padding-bottom: 0; }
.sub-tab-area { display: none; }
#sub-wrap .contents { padding-top: 50px; }

.tab-menu li button { height: 65px; }
}



@media (max-width:425px){
.l-5 li { width: 50%; }
.tab-menu li button { height: 45px; }
.l-5 li:nth-child(5n) button[aria-pressed="false"] { border-right: none; }
.l-5 li:nth-child(2n) button[aria-pressed="false"] { border-right: 1px solid #cccccc; }
}

/* Modal */
[data-modal="opened"] { overflow: hidden; }
[data-modal="opened"] .modal-container { overflow-x: hidden; overflow-y: auto; }
.modal-container { z-index: 10000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); }
.modal-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 10px auto; width: auto; height: 100%; min-height: calc(100% - 20px);  max-height: calc(100% - 20px); }
.modal { overflow: hidden; display: flex; flex-direction: column; position: relative; max-width: 820px; width: 100%; max-height: none; background: #ffffff; border-radius: 18px; }
.modal--6 { max-width: 640px; }
.modal--7 { max-width: 700px; }
.modal--11 { max-width: 1100px; }
.modal__head { margin: 0 30px; padding: 32px 0 14px; border-bottom: 1px solid #dddddd; }
.modal__title { padding: 0 45px; line-height: 1.6; text-align: center; font-size: 24px; font-weight: 700; }
.modal__close { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 78px; height: 78px; }
.modal__close svg { width: 16px; height: 16px; fill: #2a8ddc; }
.modal__body { overflow-x: hidden; overflow-y: auto; margin-left: 30px; padding: 36px 30px 36px 0; height: 100%; }
.modal__body--top { padding-top: 60px; padding-bottom: 2px; }
.modal__body--no-padding-top { padding-top: 0; }
.modal__body--no-padding-bottom { padding-bottom: 0; }
.modal__foot { margin: 0 30px; padding: 0 0 40px; border-top: 1px solid #dddddd; }
.modal__foot-no-border { border-top: none; }
.modal__foot-caption { padding: 15px 0 0; text-align: center; font-size: 16px; color: #999999; font-weight: 300; }
.modal__buttons { display: flex; align-items: center; justify-content: center; padding: 40px 0 0; }
.modal__buttons .button { flex: 1 auto; margin: 0 5px; max-width: 240px; width: 100%; height: 60px; font-size: 18px; font-weight: 700; }
.modal__buttons .button--download { padding-right: 30px; padding-left: 30px; }
.modal__buttons--narrow .button { max-width: 180px; }

.modal-enter,
.modal-leave-to { opacity: 0; }
.modal-enter-active,
.modal-leave-active { -webkit-transition: all ease .1s; transition: all ease .1s; }
@media(max-width:1024px){
}
@media(max-width:768px){
}
/**/