@charset "UTF-8";
/* --------------------------------------------------------------------------------------------
    ## IMPORT
-------------------------------------------------------------------------------------------- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css');

@font-face {
    font-family: 'manwhagage';
    src: url('/assets/fonts/manwhagage.woff') format('woff');
}

/* --------------------------------------------------------------------------------------------
    ## VARIABLE
    #a28dfd - Yellow
    #cff72d - Green
    #5acbfa - Blue
    #fdaccc - Pink
    #a28dfd - Purple
-------------------------------------------------------------------------------------------- */
:root {
    --point-hcolor: rgb(130, 202, 156);
    --point-color: #82CA9C;
    --point-color-yellow: #a28dfd; /* Yellow */
    --point-color-green:  #cff72d; /* Green */
    --point-color-blue:   #5acbfa; /* Blue */
    --point-color-pink:   #fdaccc; /* Pink */
    --point-color-purple: #a28dfd; /* Purple */
}



/* --------------------------------------------------------------------------------------------
    ## COMMON
-------------------------------------------------------------------------------------------- */
/* FONTS */
html,
body,
input,
textarea,
button {
    font-family: 'SCoreDream', 'Malgun Gothic', 'Apple SD Gothic Neo', Helvetica, Dotum, '돋움', sans-serif;
}

/* SITE SETTING */
html,
body {
    color: #4c4c4c;
    font-size: 100%;
    letter-spacing: -0.03em;
}
body {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
.inner {
    width: 98%;
    max-width: 1280px;
    margin-left:  auto;
    margin-right: auto;
}
.ptxt,
.atxt {
    font-family: 'SB Aggro', 'Malgun Gothic', 'Apple SD Gothic Neo', Helvetica, Dotum, '돋움', sans-serif;
}
.tpb {
    color: #3965dd !important;
}
.bpb {
    background-color: #3965dd;
}


/* --------------------------------------------------------------------------------------------
    ## HEADER
-------------------------------------------------------------------------------------------- */
#header {
    position: absolute;
    width: 100%;
    height: 140px;
    top: 0;
    left: 0;
    z-index: 96;
    background-color: #fff;
    border-bottom: 1px solid #e3e3e3;
}
.main #header {
    background-color: transparent;
    border-color: transparent;
}
#header .inner {
    position: relative;
    height: 100%;
}
#header .inner h1 {
    position: absolute;
    width: 172px;
    height: 64px;
    margin: -32px 0 0 0;
    top: 50%;
    left: 0;
    z-index: 11;
}
#header .inner h1 a {
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/common/logo.png') 50% 50% no-repeat;
    background-size: cover;
}
#header #menu {
    position: relative;
    height: 45px;
    z-index: 10;
    text-align: center;
}
#header #menu #gnb {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
#header #menu .gnb {
    width: 100%;
}
#header #menu #gnb .dep1 {
    position: relative;
    display: block;
    width: 120px;
    margin-left: 15px;
    float: left;
}
#header #menu #gnb .dep1:first-child {
    margin-left: 0;
}
#header #menu #gnb a {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #4c4948;
    text-align: center;
    letter-spacing: -0.05em;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
#header #menu #gnb h3 {
    font-size: 1em;
}
#header #menu #gnb h3 a {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    outline: 0;
    color: #222;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
#header #menu #gnb .dep1:hover h3 a,
#header #menu #gnb .dep1 h3 a:hover,
#header #menu #gnb .dep1 h3 a:focus,
#header #menu #gnb .on h3 a,
#header #menu #gnb .active h3 a {
    color: #3965dd;
}
#header #menu #gnb .on h3 a,
#header #menu #gnb .active h3 a {
}
#header #menu #gnb .dep1 h3 .toggle_gnb {
    display: none;
}
#header #menu #gnb .dep1 .dep2 {
    position: relative;
    display: none;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    -webkit-transition: background 250ms ease;
    -moz-transition: background 250ms ease;
    transition: background 250ms ease;
}
#header #menu #gnb .dep1 .dep2 {
    background: #f7f8f9;
}
#header #menu #gnb li li {
    width: 100%;
    float: none;
}
#header #menu #gnb li li a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 5px 0 5px 0;
    outline: 0;
    color: #535353;
    font-size: 16px;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
#header #menu #gnb li li:first-child a {
    padding-top: 5px;
}
#header #menu #gnb li li a:hover,
#header #menu #gnb li li a:focus,
#header #menu #gnb li li.active a,
#header #menu #gnb li li.on a {
    color: #535353;
    background: #dde7f6;
}

#header .isearch_btn a,
#header .iloged_btn a {
    position: relative;
    display: block;
    width: inherit;
    height: inherit;
    overflow: hidden;
    font-size: 16px;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
#header .isearch_btn {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    top: 50%;
    right: 200px;
    z-index: 1;
}
#header .isearch_btn a {
    color: #222;
    text-align: center;
    background: transparent;
    border-radius: 50%;
}
#header .isearch_btn a i {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#header .isearch_btn a:hover,
#header .isearch_btn a:focus {
    color: #fff;
    background: #3965dd;
}
#header .iloged_btn {
    position: absolute;
    width: 160px;
    height: 60px;
    margin-top: -30px;
    top: 50%;
    right: 0;
    z-index: 1;
}
#header .iloged_btn a {
    color: #fff;
    text-align: center;
    line-height: 60px;
    background: #3965dd;
    border-radius: 10px;
}
#header .iloged_btn a:hover,
#header .iloged_btn a:focus {
    background: #ed6c00;
}
.isearch_overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100vh;
    top: -110vh;
    left: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: 1002;
    opacity: 0;
    -webkit-transition: top 500ms ease, visible 500ms ease, opacity 500ms ease;
    -moz-transition: top 500ms ease, visible 500ms ease, opacity 500ms ease;
    transition: top 500ms ease, visible 500ms ease, opacity 500ms ease;
}
.open_popup_searchbar .isearch_overlay {
    top: 0;
    visibility: visible;
    opacity: 1;
}
.isearch_overlay .group {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
}
.isearch_overlay .pos {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, 20%);
    -moz-transform: translate(0, 20%);
    transform: translate(0, 20%);
}
.isearch_overlay .isearch_area {
    position: relative;
    width: 60%;
    margin: 0 auto;
}
.isearch_overlay .isearchbar {
    display: block;
    width: 100%;
    padding: 0 75px 5px 10px;
    outline: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    border-bottom: 3px solid #fff;
    -webkit-transition: border 300ms ease;
    -moz-transition: border 300ms ease;
    transition: border 300ms ease;
}
.isearch_overlay .isearchbar:hover,
.isearch_overlay .isearchbar:focus {
    border-color: #ffd634;
}
.isearch_overlay .isearchbar::placeholder {
    color: #fff;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.isearch_overlay .isearchbar:hover::placeholder,
.isearch_overlay .isearchbar:focus::placeholder {
    color: #ffd634;
}
.isearch_overlay .isearch_submit {
    position: absolute;
    width: 70px;
    height: 100%;
    top: -5px;
    right: 0;
    bottom: 0;
}
.isearch_overlay .isearch_input {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.isearch_overlay .isearch_submit span {
    position: relative;
    display: block;
    width: inherit;
    height: 100%;
    cursor: pointer;
    color: #fff;
    font-size: 32px;
    text-align: center;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.isearch_overlay .isearch_submit i {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.isearch_overlay .isearch_submit:hover span,
.isearch_overlay .isearch_input:hover + span,
.isearch_overlay .isearch_input:focus + span {
    color: #ffd634;
}
.isearch_overlay .isearch_close {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    overflow: hidden;
    outline: 0;
    color: #fff;
    font-size: 48px;
    text-align: center;
    -webkit-transform: translate(-50%, -200%);
    -moz-transform: translate(-50%, -200%);
    transform: translate(-50%, -200%);
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.isearch_overlay .isearch_close:hover,
.isearch_overlay .isearch_close:focus {
    color: #ffd634;
}
.isearch_background {
    position: fixed;
    display: block;
    content: '';
    width: 100%;
    height: 100vh;
    top: -110vh;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1001;
    background: rgba(0,0,0,0.35);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAieSURBVGhDddqBkVXHDoTh3cVOwmlAGhAGpGGHYdIwYUAchMHTN7x/rL2FVSVL02q15syZPcaLn//+++/fn8Y+f/78NPnT27dvn56fn08Os/727dutwfjXr19vvV6m9+PHj7eHbV56capvPaZWLpa/e/fuxLTZqf348eP3SY6P2IlTO7naNBxsBl88Xj0crwjXq0fUl8N43PKtVb88nXjhe76akzgA0TZT0VpjwvHU21R8663TwM2BbXzz64fz5vGd4+7eai+fPn06rzkb8AkmetXyGXxqIoypj9C5AnwED85wujbpxEsTHsZo2Ud72f1dp0d+uvKXBDJNmsP2ptoAa4NtTGS4emFs11haMA+PW8/eB6xZ9pjBuDq3XzOeB/Rq7sYSrcm6jRjsh9mbib/75Ey/AXtjnSDDM1wdFq8+1j70dSgM1izcW3dfBzzuvk3h1R0OH42Dqct3xFHDi797OU1eTa/1nifC1eOrq21vrnrc8/l1KhPPk03h5tM0Pf+aE5iN3ByXbZ7T6sTSYzPsniBTk/c2aeD2hpqfVrp64mXyN//8888biz/++OPp/fv3h/z9+/enP//88+nDhw8H0/jXX3+dGl5COHJD4V++fDn8DIYDU2u4aEM9mHmc6TFXnweB48PjlTOz5xnOfb2vuWsAsw4TN5bD+GzmrGfw5RV/hYlw2mbr5/BcPTwN/Hj1cuuX+cc9YSfUqcE8rbcQJg/DZXgMNkNOznY/PA1xHubms6ET8fhs+vDlGUxP+7Nuvhz3RdJmCMgbrLnGLV6NtQFOHO4B9LC0rRvK4fUwmh4q27Px+qNPOKMBE+8bQf7VGyjyeJpxPBxnPWgaRdZmW4vl9dHec/vznl41D2Cutciri+er1QZF3r8rYDaE2KC9AWuulni9cePVx/BaNxMns87q9bZoq7W2t3rfzBfgjYUvAcDXhVkjMpgN9TUh5Kuhry/dHs7qoUErHqyaL2EazaeLx1lfqX2gm6PnfCnn9O5P/hDPV0WcUzu5r4M1DgwPLqqFFatXE2E0qnF6YXJY8+uLGy8dWFq4+p81uGeebgrnCYc8tZ+vdRpePb21ems9TsuaqacBs2ZdA/bYM5t5xWXWNOLFSbc3lL34hwJxD2QTEYttnpi8H0DrfvgYrGF04ofJmbWamfU+auhn4QzWHtOKh/jqdfHHa8Hj8HrEHGfkjuvj8rjpxAmX02yWGC5Xk+9++O6X++m/DeUaFPmuh53G/wsS2xvaPem0CfVimtbxcWm1Tq8ZsDTjWJvtFR2SpjaUSAMbXtyCHCamtYfGS/NRj3cI8vbCt9b2ZtbLz79HpjD5z/sm39F9ZdN0/N7Jsen95c9I/dZZP2uZ+sbSmg2+wkXeXLU4TH72OILniTzQNByHWefW8HiiE+H1OalyuB4xzTB5mmF64+2T371pma0nLX72JAG2yYYk8Lg2IH5rnAZXl9djHaZPPMMnx9+YmGbY1qyvtZoZ5z91B7xXqJxP7dU1kYte6wicqzDClwuXj/DVe7Q9i169RSbHo0c/bboZztZBuk/a6XUicjVRjU/f5e4+uVr83VMu4tAXq+sJk4el1UzeG4hXz0tPL3bi/ZGZDfmeXGtmjVvfDDk1fXDmjaVfjlcvq5fBcj1xqzN7Y7DzJsbMPf9m7wEaoCDvAYjK+1KIDWM429LqwfaXjTWPNYfjwJvD6nuM7YvRN+y8ogHPaxJH7NXrhcebk7hXpXq4XOxqdg3ipm8t7uu08a0fT14MLzfr/ocVEwe8J8pa9xb4iNxTriaf4bfXCZ+TGiviMPV46YvWYfrpMfryzWfy7MWdM0iR758PRCIECPXKDZnTOVGNxdtGr03sDdDH5TBre+h62UNabZYOTj1pqcPOr0xZBKaJKG9QedYpszamvg8FznYvHo659fWw1eN2yI+WHi4/c0bw3L1Z3DtnPcI3cnXrMH2wavUX00wHpsd69nJrsPriqsOLm1N978P6WXGS85RTPLETkrMROdHTM2uOV95Jcn2je7j79Ioz/L4VGqyauWr1s3L1anrD9D57qr2hBJmGHqYG6zaQGGv9+PBi1yP9jH6z2O591JKL+PIO2hr3N0liCW9iFi9/rDeMd4JiJ595YG9+f1TEZqpbi+bQlYvZ1pPjIdx7zafwKrqLojc3fa/ubB5OJ74c1jpvlp6N45qhLuoLK9ajlk4z79+PeKoBj8udEJw9rkf4YJ3UDLl395zOmLy63nrgTM7hLH06s7H7JuHx6P2X/efPCAHW5kSYaAje3lQ5a0NMzcbE5sRt89ZqIh4rsseH0NfDXl6vcQTPa+LW8Gq7PqL3NccVYWJ43PjV04bTTD9MpFFMMw4P2/m5WiMw+U/rlbJOLIM7AT4C961lnY6aPvVOWq81l3fCs5kTt1Zvjl5cvH3daG67f2PF2gBvEKwN9hAswW1qDdDfJuY0D4bfBvF8uRgs2/PwaVSH95BMzcOdw/DKPMwI3GsynBOn4dT2Op7Xqiaqi+U45Xp49dZq9XOacFj55obRxtk5P/9hNeBwf16rKZ4TnOJ97epcDY7HrOF4ToqWeidavxhWD15m3Ww63kT70pumtchxWbm/P3yj0d/DRfLb7jbWb8qJ+C16v4WHcRzcNqhOr3V9eBlNmN/s48uZ2Kz+ftJv7PtNvhqj3WyGA3x1BeRzCvcaWON0nWDWRVg9sNZzijffvPrSCKffDL1cncPxYfXFjzca//6+Vmxoza3F6hrD5cS26N5EDkuHtxG5WvFXc6vTac6OeO7g2WBNyHtgm9cEF+PI1R8fMDekgT0MXK8114vzmLcW065P3DV+/hg/wLlvIusTx2f4/cT1+WSiNRuNE/HgtPB9XuvjcrV+hrZVF5vdB4DvPvuzL1j7vv/jGat5TuVEZFjiTK6ZGRwvrKF5G0wbJs+t9+Zgeral8zinvX779u3pf6Ar4821qINrAAAAAElFTkSuQmCC);
    opacity: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-transition: top 500ms ease, opacity 500ms ease;
    -moz-transition: top 500ms ease, opacity 500ms ease;
    transition: top 500ms ease, opacity 500ms ease;
}
.open_popup_searchbar .isearch_background {
    top: 0;
    opacity: 1;
}


/* --------------------------------------------------------
    -- HEADER MOBILE - MENU
-------------------------------------------------------- */
/* MOBILE MENU TOGGLE BTN */
#header #btn_m_toggle {
    position: fixed;
    width: 23px;
    height: 20px;
    top: -60px;
    left: 20px;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: top 300ms ease, left 300ms ease, opacity 300ms ease;
    -moz-transition: top 300ms ease, left 300ms ease, opacity 300ms ease;
    transition: top 300ms ease, left 300ms ease, opacity 300ms ease;
}
#header #btn_m_toggle .toggle_group {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
#header #btn_m_toggle .toggle_group span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 9px;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 250ms ease;
    -moz-transition:    -moz-transform 250ms ease;
    transition:         transform 250ms ease;
}
#header #btn_m_toggle .toggle_group span:nth-child(1) { top:  1px; }
#header #btn_m_toggle .toggle_group span:nth-child(2) { top: 10px; }
#header #btn_m_toggle .toggle_group span:nth-child(3) { top: 19px; }
.open_mobilemenu #header #btn_m_toggle { left: 240px; }
.open_mobilemenu #header #btn_m_toggle .toggle_group span { background: #202020; }
.open_mobilemenu #header #btn_m_toggle .toggle_group span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}
.open_mobilemenu #header #btn_m_toggle .toggle_group span:nth-child(2) {
    opacity: 0;
    left: -30px;
}
.open_mobilemenu #header #btn_m_toggle .toggle_group span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/* MOBILE HEADER SIDEBAR AREA */
#mobile_menu {
    position: fixed;
    width: 280px;
    height: 100%;
    top: 0;
    left: -101%;
    z-index: 999;
    background: #fff;
    border-right: 1px solid #1f1f1f;
    -webkit-transition: left 300ms ease;
    -moz-transition: left 300ms ease;
    transition: left 300ms ease;
}
.open_mobilemenu #mobile_menu {
    left: 0;
}
#mobile_menu h1 {
    position: relative !important;
    width: 100% !important;
    height: 81px !important;
    margin: 0 auto !important;
    border-bottom: 1px solid #dcdcdc;
}
#mobile_menu h1 a {
    position: absolute;
    display: block;
    width: 84px;
    height: 46px;
    margin: -23px 0 0 -42px;
    top: 50%;
    left: 50%;
    text-indent: -9999px;
    background: url('../img/common/slogo.png') 50% 50% no-repeat;
    background-size: cover;
}
#mobile_menu .msgroup {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 100px;
    overflow: hidden;
    overflow-y: scroll;
}
.admin #mobile_menu .msgroup {
    padding-bottom: 140px;
}
#mobile_menu .colsgroup li {
    position: relative;
    width: 50%;
    float: left;
    text-align: center;
}
#mobile_menu .colsgroup li:first-child::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    margin-top: -6px;
    top: 50%;
    right: 0;
    background: #454545;
}
#mobile_menu .colsgroup li.full_width {
    width: 100%;
    clear: left;
    background: #40b9d7;
}
#mobile_menu .colsgroup li a {
    display: block;
    padding: 0 5px;
    color: #303030;
    font-size: 14px;
    font-weight: 500;
    line-height: 39px;
    -webkit-transition: color 250ms ease, background 250ms ease;
    -moz-transition: color 250ms ease, background 250ms ease;
    transition: color 250ms ease, background 250ms ease;
}
#mobile_menu .colsgroup li a:hover {
    color: #3965dd;
}

/* MOBILE LOGED AREA */
#header .mobile_loged {
    color: #fff;
    border-bottom: 1px solid #dcdcdc;
    box-shadow: 0 7px 7px -3px rgba(0,0,0,0.15);
    /* box-shadow: 0 0 10px -4px rgba(0,0,0,0.45); */
}
#header .mobile_loged .mob_loged {
    display: none;
}
#header .mobile_loged .mob_loged.on {
    display: block;
}
#header .mobile_loged .loged_section {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    padding: 0 10px;
    color: #fff;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#header .mobile_loged .loged_icon span {
    position: absolute;
    width: 100%;
    top: -2px;
    font-size: 24px;
    text-align: center;
}
#header .mobile_loged p {
    font-size: 13px;
}

/* MOBILE MENU */
#mobile_menu #mgnb {
    padding-bottom: 15px;
}
#mobile_menu #mgnb li a {
    display: block;
    padding: 10px 0 10px 15px;
    color: #222;
    font-size: 14px;
    border-bottom: 1px solid #dcdcdc;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
#mobile_menu #mgnb h3 {
    position: relative;
    overflow: hidden;
}
#mobile_menu #mgnb h3 a {
    padding: 10px;
    font-size: 15px;
}
#mobile_menu #mgnb li a:hover,
#mobile_menu #mgnb li.on h3 a,
#mobile_menu #mgnb li .on a {
    color: #3965dd;
}
#mobile_menu #mgnb h3 a.on,
#mobile_menu #mgnb .dep1:hover h3 a,
#mobile_menu #mgnb .dep1.openlist h3 a {
    color: #fff;
    background: #3965dd;
}
#mobile_menu #mgnb h3 strong {
    font-weight: normal;
}
#mobile_menu #mgnb h3 a p span {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    padding-left: 10px;
    font-size: 13px;
    letter-spacing: 0.025em;
}
#mobile_menu #mgnb h3 a p span::before {
    position: absolute;
    display: block;
    content: '';
    width: 1px;
    height: 11px;
    left: 0;
    bottom: 3px;
    background: #3f3f3f;
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    transition: background 300ms ease;
}
#mobile_menu #mgnb li a:hover p span::before,
#mobile_menu #mgnb li.on h3 a p span::before,
#mobile_menu #mgnb li .on a p span::before {
    background: #3965dd;
}
#mobile_menu #mgnb h3 a.on span::before,
#mobile_menu #mgnb .dep1:hover h3 a span::before,
#mobile_menu #mgnb .dep1.openlist h3 a span::before {
    background: #fff;
}

#mobile_menu .toggle_gnb {
    position: absolute;
    display: block;
    width: 100%;
    height: 41px;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 10;
    cursor: pointer;
    -webkit-transition: width 300ms ease, background 300ms ease;
    -moz-transition: width 300ms ease, background 300ms ease;
    transition: width 300ms ease, background 300ms ease;
}
#mobile_menu .openlist .toggle_gnb {
    width: 42px;
    background: rgba(0,0,0,0.3);
}
#mobile_menu .btn_gnb_arrow {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-indent: -9999px;
}
#mobile_menu .btn_gnb_arrow::before {
    position: absolute;
    display: block;
    content: '';
    height: 42px;
    top: 0;
    right: 6px;
    color: #8f8f8f;
    font-size: 24px;
    font-family: 'Ionicons';
    text-align: center;
    text-indent: 0;
    line-height: 42px;
    -webkit-transition: color 300ms ease, background 300ms ease, -webkit-transform 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease,    -moz-transform 300ms ease;
    transition: color 300ms ease, background 300ms ease,         transform 300ms ease;
}
#mobile_menu .dep1:hover .btn_gnb_arrow::before {
    color: #fff;
}
#mobile_menu .dep1.openlist .btn_gnb_arrow::before {
    top: -2px;
    color: #fff;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
#mobile_menu #mgnb h3 a.on + .toggle_gnb .btn_gnb_arrow::before {
    color: #fff;
}
#mobile_menu #mgnb .dep2 {
    display: none;
}
#mobile_menu #mgnb .dep2 li a {
    position: relative;
    display: block;
    padding-left: 25px;
    background: rgb(79,93,218,0.05);
}
#mobile_menu #mgnb .dep2 li.active a {
    color: #3965dd;
}
#mobile_menu #mgnb .dep2 li a::before {
    position: absolute;
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    margin-top: -2px;
    top: 50%;
    left: 15px;
    background: #8f8f8f;
    border-radius: 50%;
    -webkit-transition: background 250ms ease;
    -moz-transition: background 250ms ease;
    transition: background 250ms ease;
}
#mobile_menu #mgnb .dep2 li.active a::before {
    background: #3965dd;
}
#mobile_menu #mgnb .dep2 li a:hover::before {
    background: #3965dd;
}
.mobile_menu_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 998;
    background: rgba(0,0,0,0.9);
}
#header .dep1 a i {
    display: none;
}


/* --------------------------------------------------------------------------------------------
    ## FOOTER
-------------------------------------------------------------------------------------------- */
#footer {
    min-height: 375px;
    margin-top: 100px;
    padding: 0 0 60px;
    clear: both;
    color: #fff;
    background: #16203f;
    border-top: 1px solid #16203f;
}
.main #footer {
    margin-top: 0;
}
#footer .top_area {
    border-bottom: 1px solid #39425b;
}
#footer .top_area .inner {
    position: relative;
}
#footer .top_area .fnav {
    margin: 0;
    padding: 0;
}
#footer .top_area .fnav li {
    border-right: 1px solid #39425b;
    float: left;
}
#footer .top_area .fnav li:first-child {
    border-left: 1px solid #39425b;
}
#footer .top_area a {
    display: block;
    padding: 0 20px;
    color: #cdcdcd;
    font-size: 14px;
    line-height: 50px;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
#footer .top_area a:hover,
#footer .top_area a:focus {
    color: #fff;
    background: #3965dd;
}
#footer .top_area .fsns {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
}
#footer .top_area .fsns a.instagram {background-image: url('../img/common/sns_01.png');}
#footer .top_area .fsns a.youtube {background-image: url('../img/common/sns_02.png');}
#footer .top_area .fsns a.facebook {background-image: url('../img/common/sns_03.png');}
#footer .top_area .fsns a {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 10px 0 10px 16px;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    border-radius: 5px;
    -webkit-transition: border-radius 300ms ease;
    -moz-transition: border-radius 300ms ease;
    transition: border-radius 300ms ease;
}
#footer .top_area .fsns a:hover,
#footer .top_area .fsns a:focus {
    border-radius: 50%;
}

#footer .bottom_area {
    margin: 35px auto;
}
#footer .bottom_area .colspan:first-child {
    margin-left: 0;
}
#footer .bottom_area .colspan {
    position: relative;
    width: 23.5%;
    margin-left: 2%;
    float: left;
}
#footer .bottom_area h3 {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 15px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}
#footer .bottom_area h3::after {
    position: absolute;
    display: block;
    content: '';
    width: 35px;
    height: 3px;
    left: 0;
    bottom: 0;
    background: #3965dd;
}
#footer .bottom_area li {
    position: relative;
    margin-top: 15px;
    font-size: 14px;
}
#footer .bottom_area .cols1 li span {
    display: block;
    margin-top: 15px;
}
#footer .bottom_area .cols1 li span:first-child {
    margin-top: 0;
}
#footer .bottom_area li .fico {
    display: inline-block;
    width: 28px;
    height: 32px;
    margin-right: 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#footer .bottom_area li .fico11 {background-image: url('../img/common/fico_11.png');}
#footer .bottom_area li .fico12 {background-image: url('../img/common/fico_12.png');}
#footer .bottom_area li .fico13 {background-image: url('../img/common/fico_13.png');}
#footer .bottom_area li .fico14 {background-image: url('../img/common/fico_14.png');}
#footer .bottom_area li a,
#footer .bottom_area li span {
    color: #fff;
    opacity: 0.75;
    -webkit-transition: opacity 250ms ease;
    -moz-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
}
#footer .bottom_area li a:hover,
#footer .bottom_area li a:focus,
#footer .bottom_area li:hover a,
#footer .bottom_area li:focus a,
#footer .bottom_area li:hover span,
#footer .bottom_area li:focus span {
    opacity: 1;
}
#footer .bottom_area .colgroup {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}
#footer .bottom_area .cols3 .box_lnk {
    display: block;
    width: 164px;
    height: 62px;
    font-size: 1.1875em;
    text-align: center;
    line-height: 60px;
    border: 1px solid #a2a5af;
    -webkit-transition: border 300ms ease;
    -moz-transition: border 300ms ease;
    transition: border 300ms ease;
}
#footer .bottom_area .cols3 .box_lnk:hover,
#footer .bottom_area .cols3 .box_lnk:focus {
    border-color: #fff;
}
#footer .bottom_area .cols4 .footer_lnk {
    display: block;
    width: 164px;
    height: 62px;
    background-image: url('../img/common/footer_piaget.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #a2a5af;
    -webkit-transition: border 300ms ease;
    -moz-transition: border 300ms ease;
    transition: border 300ms ease;
}
#footer .bottom_area .cols4 .footer_lnk:hover,
#footer .bottom_area .cols4 .footer_lnk:focus {
    border-color: #fff;
}
#footer .copyright {
    clear: both;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}



/* --------------------------------------------------------------------------------------------
    ## VISUAL
-------------------------------------------------------------------------------------------- */
.sub_top_blank{height:140px;}
#visual {
    position: relative;
    width: 100%;
    height: 300px;
    /*margin-top: 140px;*/
    margin-bottom: 100px;
    overflow: hidden;
    background-color: #e7f3f9;
    -webkit-transition: height 300ms ease;
    -moz-transition: height 300ms ease;
    transition: height 300ms ease;
}
#visual .inner {
    position: relative;
    height: 100%;
    z-index: 10;
}
.main #visual {
    height: 760px;
    max-height: 100%;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}
.main #visual .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: justify;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.main #visual .group {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.main #visual .txt_area {
    color: #051235;
    letter-spacing: -0.075em;
}
.main #visual .txt_area h3 {
    margin-bottom: 20px;
    font-size: 48px;
    font-family: 'SB Aggro', 'Malgun Gothic', 'Apple SD Gothic Neo', Helvetica, Dotum, '돋움', sans-serif;
    font-weight: 700;
}
.main #visual .txt_area p {
    margin-bottom: 20px;
    font-size: 24px;
}
.main #visual .txt_area p span {
    display: block;
}
/*.main #visual .txt_area a {
    position: relative;
    display: inline-block;
    margin: 20px 0 0 48px;
}*/

/* MAIN VISUAL */
#visual .meteor,
#visual .planet {
    position: absolute;
    background-size: cover;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    transition: 300ms ease;
}
#visual .planet1 {
    width: 234px;
    height: 228px;
    top: -5.26315789474%;
    left: -1.45833333333%;
    z-index: 1;
}
#visual .planet2 {
    width: 274px;
    height: 179px;
    top: 4.34210526316%;
    right: 0.78125%;
    z-index: 4;
}
#visual .planet3 {
    width: 128px;
    height: 73px;
    left: 1.5625%;
    bottom: 18.02631578947%;
    z-index: 1;
}
#visual .planet4 {
    width: 282px;
    height: 365px;
    right: 6.71875%;
    bottom: -19.34210526316%;
    z-index: 1;
}
#visual .planet .animate {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#visual .planet1 .animate {
    background-image: url('../img/main/visual/planet_01.png');
    -webkit-animation: 2700ms ease-in-out infinite alternate-reverse both updown;
    -moz-animation: 2700ms ease-in-out infinite alternate-reverse both updown;
    animation: 2700ms ease-in-out infinite alternate-reverse both updown;
}
#visual .planet2 .animate {
    background-image: url('../img/main/visual/planet_02.png');
    -webkit-animation: 1700ms ease-in-out infinite alternate both updown2;
    -moz-animation: 1700ms ease-in-out infinite alternate both updown2;
    animation: 1700ms ease-in-out infinite alternate both updown2;
}
#visual .planet3 .animate {
    background-image: url('../img/main/visual/planet_03.png');
    -webkit-animation: 1200ms ease-in-out infinite alternate both updown2;
    -moz-animation: 1200ms ease-in-out infinite alternate both updown2;
    animation: 1200ms ease-in-out infinite alternate both updown2;
}
#visual .planet4 .animate {
    background-image: url('../img/main/visual/planet_04.png');
    -webkit-animation: 2200ms ease-in-out infinite alternate both updown;
    -moz-animation: 2200ms ease-in-out infinite alternate both updown;
    animation: 2200ms ease-in-out infinite alternate both updown;
}
#visual .meteor1 {
    position: absolute;
    width: 160px;
    height: 95px;
    margin: -25px 0 0 -25px;
    z-index: 3;
    background: url('../img/main/visual/meteor.png');
    background-size: cover;
    -webkit-animation: 12000ms ease-in infinite both meteor;
    -moz-animation: 12000ms ease-in infinite both meteor;
    animation: 12000ms ease-in infinite both meteor;
}
#visual .meteor2 {
    width: 231px;
    height: 149px;
    left: -50%;
    bottom: -7.52631578947%;
    z-index: 2;
    -webkit-animation: 25000ms ease-in infinite both pass;
    -moz-animation: 25000ms ease-in infinite both pass;
    animation: 25000ms ease-in infinite both pass;
}
#visual .meteor2 .stone {
    width: 100%;
    height: 100%;
    background: url('../img/main/visual/meteorite.png');
    background-size: cover;
    -webkit-animation: 25000ms ease-in infinite both rotate;
    -moz-animation: 25000ms ease-in infinite both rotate;
    animation: 25000ms ease-in infinite both rotate;
}
#visual .drop {
    position: absolute;
    min-width: 100%;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

#visual .drop .svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

#visual #drop-top-layer {
    will-change: transform;
    -webkit-transform: translateY(-768px);
    -moz-transform: translateY(-768px);
    transform: translateY(-768px);
    -webkit-animation: fall 25000ms infinite reverse linear;
    -moz-animation: fall 25000ms infinite reverse linear;
    animation: fall 25000ms infinite reverse linear;
}

#visual #drop-bottom-layer {
    will-change: transform;
    -webkit-transform: translateY(-768px);
    -moz-transform: translateY(-768px);
    transform: translateY(-768px);
    -webkit-animation: fall 10000ms infinite reverse linear;
    -moz-animation: fall 10000ms infinite reverse linear;
    animation: fall 10000ms infinite reverse linear;
}
#visual #drop-top-layer.down,
#visual #drop-bottom-layer.down {
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    animation-direction: normal;
}
#visual .parallax_bg {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: url('../img/main/visual/parallax.png') 50% 50% no-repeat;
    background-size: cover;
    transition: background 300ms ease;
}



/* PAGE VISUAL */
#visual.page  {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#visual.page0 {background-image: url('../img/page/visual/page_visual_01.png');}
#visual.page1 {background-image: url('../img/page/visual/page_visual_01.png');}
#visual.page2 {background-image: url('../img/page/visual/page_visual_02.png');}
#visual.page3 {background-image: url('../img/page/visual/page_visual_03.png');}
#visual.page4 {background-image: url('../img/page/visual/page_visual_04.png');}
#visual.page5 {background-image: url('../img/page/visual/page_visual_05.png');}
body:not(.main) #visual .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#visual .inner h2 {
    margin-bottom: 10px;
    color: #222;
    font-family: 'SB Aggro', 'Malgun Gothic', 'Apple SD Gothic Neo', Helvetica, Dotum, '돋움', sans-serif;
    font-size: 36px;
    font-weight: 300;
    text-align: center;
}
#visual .location_group {
    position: relative;
    text-align: center;
    overflow: hidden;
}
#visual .location_group li {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    /* padding-left: 15px; */
    color: #222;
    font-size: 1em;
    line-height: 23px;
    vertical-align: top;
}
#visual .location_group li:first-child {
    margin-left: 0;
    padding-left: 0;
}
#visual .location_group li::before {
    display: inline-block;
    content: '\f3d1';
    margin-right: 10px;
    color: #222;
    font-size: 1em;
    font-family: "Ionicons";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 23px;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*
#visual .location_group li::before {
    position: absolute;
    display: block;
    content: '\f3d1';
    top: 1px;
    left: 0;
    color: #222;
    font-size: 1.125em;
    font-family: "Ionicons";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/
#visual .location_group li:first-child::before {
    display: none;
}
#visual .location_group li a {
    display: inline-block;
    color: #222;
    line-height: 23px;
    vertical-align: top;
}
#visual .join_v_txt {
    font-size: 24px;
}
#visual.join {
    margin-bottom: 0;
    background-color: transparent;
}


/* --------------------------------------------------------------------------------------------
    ## QUICKBAR
-------------------------------------------------------------------------------------------- */
#quick-bar {
    position: absolute;
    width: 100%;
    height: 0;
    top: 40px;
    left: 0;
    z-index: 10;
}
#quick-bar .inner {
    position: relative;
}
#quick-bar .group {
    position: absolute;
    padding: 30px;
    top: 180px;
    right: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 15px;
    max-width:500px;
}
#quick-bar h3 {
    margin-bottom: 25px;
    color: #333;
    font-family: 'SB Aggro', 'Malgun Gothic', 'Apple SD Gothic Neo', Helvetica, Dotum, '돋움', sans-serif;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    line-height: 1;
}
#quick-bar li {
    width: 100%;
    margin-top: 5px;
}
#quick-bar li:first-child {
    margin-top: 0;
}
#quick-bar li a {
    position: relative;
    display: block;
    width: 400px;
    height: 64px;
    padding: 2px 10px;
    overflow: hidden;
    border-radius: 15px;
    background: #f7f7f7;
    border: 1px solid #ebebeb;
    -webkit-transition: color 300ms ease, background 250ms ease;
    -moz-transition: color 300ms ease, background 250ms ease;
    transition: color 300ms ease, background 250ms ease;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
#quick-bar li a::before {
    position: absolute;
    content: '';
    width: 150%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: visible;
    -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: background 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease;
    transition: background 300ms ease, opacity 300ms ease,         transform 300ms ease;
}
#quick-bar li a:hover::before,
#quick-bar li a:focus::before {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

#quick-bar .ico_area {
    position: relative;
    width: 60px;
    height: 60px;
    float: left;
}
#quick-bar .igroup .icon,
#quick-bar .igroup .ihover {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: background 250ms ease, opacity 250ms ease;
    -moz-transition: background 250ms ease, opacity 250ms ease;
    transition: background 250ms ease, opacity 250ms ease;
}
#quick-bar .igroup .icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#quick-bar .igroup .ihover {
    opacity: 0;
}
#quick-bar .igroup1 a:hover::before,
#quick-bar .igroup1 a:focus::before {background-color: #ffd634;}
#quick-bar .igroup2 a:hover::before,
#quick-bar .igroup2 a:focus::before {background-color: #cff72d;}
#quick-bar .igroup3 a:hover::before,
#quick-bar .igroup3 a:focus::before {background-color: #5acbfa;}
#quick-bar .igroup4 a:hover::before,
#quick-bar .igroup4 a:focus::before {background-color: #fdaccc;}
#quick-bar .igroup5 a:hover::before,
#quick-bar .igroup5 a:focus::before {background-color: #a28dfd;}
#quick-bar .igroup1 .icon   {background-image: url('../img/main/aside_ico_01.png');}
#quick-bar .igroup2 .icon   {background-image: url('../img/main/aside_ico_02.png');}
#quick-bar .igroup3 .icon   {background-image: url('../img/main/aside_ico_03.png');}
#quick-bar .igroup4 .icon   {background-image: url('../img/main/aside_ico_04.png');}
#quick-bar .igroup5 .icon   {background-image: url('../img/main/aside_ico_05.png');}
#quick-bar .txt_area {
    display: block;
    height: 100%;
    margin: 0;
    float: right;
    color: #131a2c;
    line-height: 72px;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
#quick-bar .txt_area span,
#quick-bar .txt_area strong {
    position: relative;
    z-index: 1;
    line-height: 1;
    vertical-align: baseline;
}
#quick-bar .txt_area span {
    top: -3px;
    font-size: 18px;
}
#quick-bar .txt_area strong {
    margin: 0 3px;
    font-size: 36px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------------------------
    ## CONTAINER
-------------------------------------------------------------------------------------------- */
#container {
    margin-bottom: 35px;
}
.main #container {
    margin-bottom: 0;
}
#container article {
    min-height: 450px;
}



/* --------------------------------------------------------------------------------------------
    ## INDEX
-------------------------------------------------------------------------------------------- */
.main .ms {
    padding: 80px 0;
}
.main .ms .title_area {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    text-align: center;
    line-height: 1;
}
.main .ms .title_area h3 {
    color: #051235;
    font-family: 'SB Aggro', 'Malgun Gothic', 'Apple SD Gothic Neo', Helvetica, Dotum, '돋움', sans-serif;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.05em;
}
.main .ms .title_area p {
    color: #6e6e6e;
    font-size: 16px;
    line-height: 1.4;
}
.main .ms .title_area p span {
    display: block;
}
.main .ms h4,
.colgroup4 li h4 {
    width: 100%;
    overflow: hidden;
    font-size: 1.25em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hash {
    margin: 10px auto 0;
    color: #656363;
    font-size: 1em;
    text-align: center;
}


.main .ms01 {

}
.main .ms01 .title_area p {
    margin-bottom: 15px;
}
.main .ms01 .ilist {
    width: 23.5%;
    margin-left: 2%;
    float: left;
    overflow: hidden;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 7px rgba(185,185,185,0.25);
    -moz-box-shadow: 0 0 7px rgba(185,185,185,0.25);
    box-shadow: 0 0 7px rgba(185,185,185,0.25);
    -webkit-transition: box-shadow 300ms ease, transform 300ms ease;
    -moz-transition: box-shadow 300ms ease, transform 300ms ease;
    transition: box-shadow 300ms ease, transform 300ms ease;
}
.main .ms01 .ilist:first-child {
    margin-left: 0;
}
.main .ms01 .ilist:hover {
    -webkit-box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
    transform: translateY(-5px);
}
.main .ms01 .ilist a {
    position: relative;
    display: block;
    width: 100%;
    padding: 30px 10px 50px;
    color: #4c4c4c;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
.main .ms01 .ilist a:hover,
.main .ms01 .ilist a:focus {
    color: #fff;
}
.main .ms01 .ilist a .group {
    position: relative;
    z-index: 1;
}
.main .ms01 .ilist a .ico {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    overflow: hidden;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 76px 152px;
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    transition: background 300ms ease;
}
.main .ms01 .ilist01 a .ico {background-image: url('../img/main/ms01_ico_01.png');}
.main .ms01 .ilist02 a .ico {background-image: url('../img/main/ms01_ico_02.png');}
.main .ms01 .ilist03 a .ico {background-image: url('../img/main/ms01_ico_03.png');}
.main .ms01 .ilist04 a .ico {background-image: url('../img/main/ms01_ico_04.png');}
.main .ms01 .ilist05 a .ico {background-image: url('../img/main/ms01_ico_05.png');}
.main .ms01 .ilist a:hover .ico,
.main .ms01 .ilist a:focus .ico {
    background-position: 0 bottom;
}
.main .ms01 .ilist a h4 {
    margin-bottom: 25px;
    color: #2b3275;
    font-size: 18px;
    font-weight: 500;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.main .ms01 .ilist a:hover h4,
.main .ms01 .ilist a:focus h4 {
    color: #fff;
}
.main .ms01 .ilist a .txt span {
    display: block;
}
.main .ms01 .ilist a .bgbox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.main .ms01 .ilist a .bgbox::before,
.main .ms01 .ilist a .bgbox::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 0;
    left: 0;
    overflow: hidden;
    background: #3965dd;
    -webkit-transition: height 300ms ease;
    -moz-transition: height 300ms ease;
    transition: height 300ms ease;
}
.main .ms01 .ilist a .bgbox::before {top: 0;}
.main .ms01 .ilist a .bgbox::after {bottom: 0;}
.main .ms01 .ilist a:hover .bgbox::before,
.main .ms01 .ilist a:focus .bgbox::before {
    height: 51%;
    top: 0;
}
.main .ms01 .ilist a:hover .bgbox::after,
.main .ms01 .ilist a:focus .bgbox::after {
    height: 51%;
    bottom: 0;
}


.main .ms02 {
    background: #f9f9f9;
}
.main .ms02 .inner {
    width: 100%;
}
.main .ms02 .title_area h3 {
    margin-bottom: 25px;
}
.main .ms02 .owl-carousel .owl-stage-outer {
    padding-bottom: 20px;
}
.main .ms02 .ilist {
    position: relative;
    width: 100%;
    padding: 5px 5px 10px;
    float: left;
    overflow: hidden;
    border-radius: 10px;
}
.main .ms02 .ilist a {
    display: block;
    color: #323232;
    text-align: center;
}
.main .ms02 .ilist a:hover,
.main .ms02 .ilist a:focus {
    color: #28428e;
}
.main .ms02 .image_area {
    position: relative;
    margin-bottom: 25px;
    line-height: 0;
    border-radius: 10px;
    -webkit-transition: box-shadow 300ms ease;
    -moz-transition: box-shadow 300ms ease;
    transition: box-shadow 300ms ease;
    -webkit-box-shadow: 0 5px 10px -5px rgba(134,132,132,0);
    -moz-box-shadow: 0 5px 10px -5px rgba(134,132,132,0);
    box-shadow: 0 5px 10px -5px rgba(134,132,132,0);
}
.main .ms02 a:hover .image_area,
.main .ms02 a:focus .image_area {
    -webkit-box-shadow: 0 10px 10px -5px rgba(134,132,132,0.85);
    -moz-box-shadow: 0 10px 10px -5px rgba(134,132,132,0.85);
    box-shadow: 0 10px 10px -5px rgba(134,132,132,0.85);
}
.main .ms02 .group {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.main .ms02 .btn_play {
    position: absolute;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    top: 50%;
    left: 50%;
    z-index: 2;
    background: url('../img/common/btn_play.png') 50% 50% no-repeat;
    background-size: cover;
}
.main .ms02 .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(29,52,114,0.22);
    mix-blend-mode: multiply;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}
.main .ms02 a:hover .cover,
.main .ms02 a:focus .cover {
    opacity: 0;
}
.main .ms02 .ilist h4 {
    font-size: 16px;
    line-height: 1;
}



.main .ms03 {}
.main .ms03 .lgroup,
.main .ms03 .ms_events {
    position: relative;
    width: 48%;
    height: 346px;
    float: left;
}
.main .ms03 .ms_notice .ititle {
    position: relative;
    margin: 15px 0 0;
}
.main .ms03 .ms_notice .ititle a {
    position: absolute;
    color: #323232;
    font-size: 14px;
    right: 0;
    bottom: 2px;
}
.main .ms03 .ms_notice li {
    position: relative;
    margin-top: 10px;
    padding-right: 100px;
    font-size: 16px;
    line-height: 1.4;
}
.main .ms03 .ms_notice li .subject {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main .ms03 .ms_notice li .date {
    position: absolute;
    top: 0;
    right: 0;
}
.main .ms03 .ms_notice li a {
    color: #000;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.main .ms03 .ms_notice li a:hover,
.main .ms03 .ms_notice li a:focus {
    color: #28428e;
}

.main .ms03 .quick_lnk {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #dbdbdb;
}
.main .ms03 .quick_lnk .item {
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
}
.main .ms03 .quick_lnk .item::before {
    position: absolute;
    content: '';
    width: 1px;
    top: 10px;
    left: 0;
    bottom: 40px;
    background: #dbdbdb;
}
.main .ms03 .quick_lnk .item:first-child::before {
    display: none;
}
.main .ms03 .quick_lnk .item a {
    display: inline-block;
}
.main .ms03 .quick_lnk .item .ico {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    opacity: 0.75;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}
.main .ms03 .quick_lnk .item a:hover .ico,
.main .ms03 .quick_lnk .item a:focus .ico {
    opacity: 1;
}
.main .ms03 .quick_lnk .item01 .ico {background-image: url('../img/main/csquick_01.png');}
.main .ms03 .quick_lnk .item02 .ico {background-image: url('../img/main/csquick_02.png');}
.main .ms03 .quick_lnk .item03 .ico {background-image: url('../img/main/csquick_03.png');}
.main .ms03 .quick_lnk .item04 .ico {background-image: url('../img/main/csquick_04.png');}
.main .ms03 .quick_lnk .item a p {
    color: #16203f;
    font-size: 16px;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.main .ms03 .quick_lnk .item a:hover p,
.main .ms03 .quick_lnk .item a:focus p {
    color: #28428e;
}

.main .ms03 .ms_events {
    position: relative;
    margin-left: 4%;
    overflow: hidden;
    border-radius: 10px;
}
.main .ms03 .ms_events .ilist a {
    position: relative;
    display: block;
    height: 346px;
    line-height: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.main .ms03 .ms_events .ilist a img {
    display: none;
}
.main .ms03 .ms_events .owl-theme .owl-nav.disabled + .owl-dots {
    position: absolute;
    top: 0;
    right: 7.5%;
}
.main .ms03 .ms_events .owl-theme .owl-dots .owl-dot {
    margin-right: 7px;
}
.main .ms03 .ms_events .owl-theme .owl-dots .owl-dot span {
    margin: 0;
    background: #fff;
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    transition: background 300ms ease;
}
.main .ms03 .ms_events .owl-theme .owl-dots .owl-dot.active span,
.main .ms03 .ms_events .owl-theme .owl-dots .owl-dot:hover span,
.main .ms03 .ms_events .owl-theme .owl-dots .owl-dot:focus span {
    background: #3965dd;
}



/* --------------------------------------------------------------------------------------------
    ## PAGE
-------------------------------------------------------------------------------------------- */
/* 페이지공통 */
.tab_menu .inner {
    min-height: 55px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}
.tab_menu button {
    position: relative;
    width: 33.3333333333333%;
    height: 53px;
    float: left;
    color: #000;
    font-size: 1.25em;
    text-align: center;
    line-height: 53px;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    -webkit-transition: color 250ms ease, background 250ms ease;
    -moz-transition: color 250ms ease, background 250ms ease;
    transition: color 250ms ease, background 250ms ease;
}
.tab_menu button:first-child {
    border-left: 0;
}
.tab_menu button:hover {
    color: #3965dd;
    background: #fff;
}
.tab_menu button.active {
    color: #fff;
    background: #3965dd;
}

#article .psc {
    color: #222;
}
.psc {
    margin-top: 100px;
    color: #222;
}
.psc:first-child {
    margin-top: 0;
}
.psc:nth-child(2) {
    margin-top: 50px;
}
.psc .sec_stitle {
    margin-bottom: 35px;
    color: #272727;
    font-size: 1em;
}
.psc_title h3 {
    position: relative;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 17px;
    /*overflow: hidden;*/
    color: #262626;
    font-size: 25px;
    font-weight: 700;
    line-height: 26px;
}
.psc_title h3::before {
    position: absolute;
    display: block;
    content: '';
    width: 40px;
    height: 4px;
    left: 0;
    bottom: 0;
    background: #3965dd;
}
.psc_title p {
    color: #262626;
    font-size: 18px;
}
.psc .sec_title {
    position: relative;
    margin-bottom: 15px;
    line-height: 1;
}
.psc .sec_title h4 {
    margin-bottom: 10px;
    color: #262626;
    font-size: 20px;
    font-weight: 600;
}
.psc .sec_title h4 span::before {
    display: inline-block;
    content: '\f005';
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



.psc111 .left,
.psc111 .right {
    position: relative;
    width: 49%;
    float: left;
}
.psc111 .left {
    padding: 20px 0;
}
.psc111 .left .image_area {
    padding-top: 20px;
}
.psc111 .right {
    margin-left: 2%;
    font-size: 18px;
}
.psc111 .right .vac {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.psc111 .right .cont {
    position: relative;
    padding: 30px 35px;
}
.psc111 .right .cont p {
    margin-top: 50px;
    font-weight: 300;
    letter-spacing: -1px;
}
.psc111 .right .cont p:first-child {
    margin-top: 0;
}
.psc111 .right .cont strong {
    font-weight: 500;
}
.psc111 .right .cont span {
    display: block;
}
.psc111 .right .cont .quote::before,
.psc111 .right .cont .quote::after {
    position: absolute;
    content: '';
    width: 32px;
    height: 27px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.psc111 .right .cont .quote::before {
    top: 0;
    left: 0;
    background-image: url('../img/page/quote_left.png');
}
.psc111 .right .cont .quote::after  {
    right: 0;
    bottom: 0;
    background-image: url('../img/page/quote_right.png');
}
.psc111 .right .background {
    position: relative;
    display: none;
    z-index: -1;
    opacity: 0.2;
}
.psc112 .cont {
    position: relative;
    padding: 80px 4% 80px 7%;
    color: #fff;
    letter-spacing: -1px;
    background: #3965dd;
    border-radius: 180px;
}
.psc112 .cont .left_area {
    position: absolute;
    top: 50%;
    left: 7%;
    -webkit-transform: -webkit-translate(0, -50%);
    -moz-transform:    -moz-translate(0, -50%);
    transform:         translate(0, -50%);
}
.psc112 .cont .left_area h4 {
    display: block;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}
.psc112 .cont .right_area {
    margin-left: 32%;
}
.psc112 .cont .right_area li {
    position: relative;
    margin-top: 15px;
    padding-left: 60px;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}
.psc112 .cont .right_area li:first-child {
    margin-top: 0;
}
.psc112 .cont .right_area li::before {
    position: absolute;
    content: '';
    width: 28px;
    height: 20px;
    top: 1px;
    left: 0;
    background-image: url('../img/page/ico_check.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}


.psc121 .colgroup {
    position: relative;
}
.psc121 .colspan1 {
    position: relative;
    width: 40%;
    z-index: 1;
}
.psc121 .colspan2 {
    position: absolute;
    display: flex;
    width: 60%;
    height: 100%;
    padding: 0;
    top: 0;
    right: 0;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
}
.psc121 .balloon {
    position: relative;
    display: block;
    width: calc(100% - 40px);
    margin: 25px auto 0;
    padding: 25px 10px;
    text-align: center;
    background: #fff;
    border: 1px dashed #aeaeae;
    border-radius: 20px;
}
.psc121 .balloon:first-child {
    margin-top: 0;
}
.psc121 .balloon::after {
    position: absolute;
    content: '';
    width: 32px;
    height: 44px;
    right: -30px;
    bottom: 20px;
    background-image: url('../img/page/page12_11_bullet.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.psc121 .balloon .ico {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.psc121 .balloon1 .ico {background-image: url('../img/page/page12_11_01.png');}
.psc121 .balloon2 .ico {background-image: url('../img/page/page12_11_02.png');}
.psc121 .balloon3 .ico {background-image: url('../img/page/page12_11_03.png');}

.psc121 .balloon strong  {font-weight: 500;}
.psc121 .balloon1 strong {color: #9b6c38;}
.psc121 .balloon2 strong {color: #008067;}
.psc121 .balloon3 strong {color: #005080;}
.psc121 .colspan2 .vbc {
    position: relative;
}
.psc121 .colspan2 .tbox {
    margin-bottom: 50px;
    text-align: center;
}
.psc121 .colspan2 .tbox p {
    position: relative;
    display: inline-block;
    padding: 5px 25px;
    color: #7e7e7e;
    font-size: 30px;
    font-weight: 200;
    line-height: 1;
}
.psc121 .colspan2 .tbox p::before,
.psc121 .colspan2 .tbox p::after {
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.psc121 .colspan2 .tbox p::before {
    top: 0;
    left: 0;
    background-image: url('../img/page/quote_left2.png');
}
.psc121 .colspan2 .tbox p::after  {
    right: 0;
    bottom: 0;
    background-image: url('../img/page/quote_right2.png');
}
.psc121 .colspan2 img {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
}
.psc122 .rbox {
    padding: 30px 0;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 7px rgba(185,185,185,0.25);
    -moz-box-shadow: 0 0 7px rgba(185,185,185,0.25);
    box-shadow: 0 0 7px rgba(185,185,185,0.25);
}
.psc122 .rbox li {
    position: relative;
    width: 20%;
    float: left;
    text-align: center;
}
.psc122 .rbox li::before,
.psc122 .rbox li::after {
    position: absolute;
    content: '';
}
.psc122 .rbox li::before {
    width: 1px;
    top: 0px;
    left: 0;
    bottom: 0px;
    background: #b7b7b7;
}
.psc122 .rbox li::after {
    width: 36px;
    height: 36px;
    margin-top: -18px;
    top: 50%;
    left: -18px;
    z-index: 1;
    background-image: url('../img/page/page12_12_bullet.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.psc122 .rbox li:first-child::before,
.psc122 .rbox li:first-child::after {
    display: none;
}
.psc122 li h5 {
    margin-bottom: 20px;
    color: #7c94e6;
    font-size: 18px;
    font-weight: 300;
}
.psc122 li h5 strong {
    color: #051235;
    font-size: 30px;
    font-weight: 500;
}
.psc122 li .txt1 {color: #8e8e8e;}
.psc122 li .txt2 {color: #051235;}
.psc123 .sbox {
    overflow: hidden;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
}
.psc123 .colspan {
    position: relative;
    width: 25%;
    float: left;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-left: 1px solid #d4d4d4;
}
.psc123 .colspan .vac {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 5%;
    z-index: 2;
    color: #051235;
    text-align: center;
    line-height: 1;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.psc123 .colspan h5 {
    margin-bottom: 25px;
    font-size: 30px;
    font-weight: 700;
}
.psc123 .colspan p {
    letter-spacing: -0.05em;
}
.psc123 .colspan img {
    position: relative;
    z-index: -1;
}
.psc123 .colspan:first-child {
    border-left: none;
}
.psc123 .colspan1 {background-image: url('../img/page/page12_13_01.png');}
.psc123 .colspan2 {background-image: url('../img/page/page12_13_02.png');}
.psc123 .colspan3 {background-image: url('../img/page/page12_13_03.png');}
.psc123 .colspan4 {background-image: url('../img/page/page12_13_04.png');}
.psc123 .colspan .cover {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.psc123 .colspan1 .cover {
    width: 15px;
    background-color: #518c98;
}
.psc123 .colspan2 .cover,
.psc123 .colspan3 .cover,
.psc123 .colspan4 .cover {
    width: 140px;
    background-image: url('../img/page/page12_13_overlay@3x.png');
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: 140px 10px;
}
.psc123 .colspan4::after {
    position: absolute;
    content: '';
    width: 16px;
    height: 120%;
    top: 0;
    right: 0;
    z-index: 1;
    background-image: url('../img/page/page12_13_end@3x.png');
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: 16px 10px;
}
.psc124 .ilist {
    width: 20%;
    float: left;
}
.psc124 .ilist .ico {
    width: 108px;
    height: 112px;
    margin: 0 auto 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.psc124 .ilist1 .ico {background-image: url('../img/page/page12_14_01.png');}
.psc124 .ilist2 .ico {background-image: url('../img/page/page12_14_02.png');}
.psc124 .ilist3 .ico {background-image: url('../img/page/page12_14_03.png');}
.psc124 .ilist4 .ico {background-image: url('../img/page/page12_14_04.png');}
.psc124 .ilist5 .ico {background-image: url('../img/page/page12_14_05.png');}
.psc124 h5 {
    color: #051235;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}


.psc131.tab_menu button {
    width: 20%;
}
.psc13.tab_con .sec_title {
    margin-bottom: 20px;
}
.psc13 .scon1 {
    margin-bottom: 80px;
    border: 1px solid #e0ddda;
}
.psc13 .scon1 .colspan {
    position: relative;
    width: 50%;
    float: left;
    text-align: center;
}
.psc13 .scon1 .cols1 {
    background: #f8f8f8;
}
.psc13 .scon1 .cols2 {
    background: url('../img/page/books_v.png') 0 0 repeat-y;
}
.psc13 .scon2 {
    margin-bottom: 80px;
}
.psc13 .scon2 .scon_cta {
    margin-bottom: 40px;
    color: #272727;
    text-align: center;
}
.psc13 .scon2 .sc_title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    font-size: 1.25em;
    font-weight: 700;
}
.psc13 .scon2 .sc_title2 {
    font-size: 1em;
}
.psc13 .scon2 .title_area {
    position: relative;
    height: 60px;
    padding-left: 60px;
    overflow: hidden;
    color: #fff;
    font-size: 1.375em;
    font-weight: 500;
    text-align: center;
    line-height: 62px;
}
.psc13 .scon2 .title_area .num {
    position: absolute;
    width: 60px;
    top: 0;
    left: 0;
}
.psc132 .scon2 .title_area      {background-color: #f29c31;}
.psc132 .scon2 .title_area .num {background-color: #26809b;}
.psc133 .scon2 .title_area      {background-color: #a0bf3e;}
.psc133 .scon2 .title_area .num {background-color: #684c8c;}
.psc134 .scon2 .title_area      {background-color: #cdd31f;}
.psc134 .scon2 .title_area .num {background-color: #2574a2;}
.psc135 .scon2 .title_area      {background-color: #92c9bf;}
.psc135 .scon2 .title_area .num {background-color: #4f3e25;}
.psc136 .scon2 .title_area      {background-color: #f5b319;}
.psc136 .scon2 .title_area .num {background-color: #b16337;}
.psc13 .scon2 .photo_area {
    line-height: 0;
    border: 1px solid #e0ddda;
    border-top: 0;
}
.psc13 .scon2 .photo_area img {
    width: 100%;
}
.psc13 .scon3 {
    text-align: center;
}
.psc13 .scon2mt {
    margin-top: 150px;
}


/* 주간 계획안 */
/* RADIO BUTTON */
.psc20 .step .switch {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}
.psc20 .step .switch:first-child {
    margin-left: 0;
}
.psc20 .step .switch input {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.psc20 .step .toggle_btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
    color: #4c4c4c;
    font-size: 18px;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 50px;
    -webkit-transition: color 300ms ease, background 300ms ease, border 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease, border 300ms ease;
    transition: color 300ms ease, background 300ms ease, border 300ms ease;
}
.psc20 .step .switch:hover .toggle_btn,
.psc20 .step .switch:focus .toggle_btn,
.psc20 .step .switch input:hover + .toggle_btn,
.psc20 .step .switch input:focus + .toggle_btn {
    color: #3965dd;
    background-color: #fff;
    border-color: #3965dd;
}
.psc20 .step .switch:hover input:checked + .toggle_btn,
.psc20 .step .switch:focus input:checked + .toggle_btn,
.psc20 .step input:checked + .toggle_btn {
    color: #fff !important;
    background-color: #3965dd !important;
    border-color: #3965dd !important;
}
/* LAYOUT */
.psc20 .step {
    padding: 15px;
    background: #fcfcfc;
    border: 1px solid #e0ddda;
    border-radius: 15px;
}
.psc20 .step_title {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    line-height: 1;
    border-bottom: 1px solid #e0ddda;
}
.psc20 .step_title h4 {
    color: 262626;
    font-size: 20px;
    font-weight: 500;
}
.psc20 .step01 {
    margin-bottom: 2%;
}
.psc20 .step01 .colgroup li {
    width: 18.4%;
    margin-left: 2%;
    float: left;
}
.psc20 .step01 .colgroup li:first-child {
    margin-left: 0;
}
.psc20 .step02 .colgroup li,
.psc20 .step04 .colgroup li {
    width: 100%;
    margin-top: 10px;
}
.psc20 .step02 .colgroup li:first-child,
.psc20 .step04 .colgroup li:first-child {
    margin-top: 0;
}
.psc20 .step03 .colgroup li {
    width: 32%;
    margin: 33px 0 0 2%;
    float: left;
}
.psc20 .step03 .colgroup li:nth-child(1),
.psc20 .step03 .colgroup li:nth-child(2),
.psc20 .step03 .colgroup li:nth-child(3),
.psc20 .step03 .colgroup li:nth-child(4),
.psc20 .step03 .colgroup li:nth-child(5),
.psc20 .step03 .colgroup li:nth-child(6) {
    margin-top: 0;
}
.psc20 .step03 .colgroup li:nth-child(3n+1) {
    margin-left: 0;
}
.psc20 .step02,
.psc20 .step03,
.psc20 .step04 {
    width: 100%;
}
.psc20 .step02,
.psc20 .step03 {
    margin-bottom: 2%;
}
.psc21 .step02 {
    margin-bottom: 0;
}
.psc20 .step02 .colgroup li,
.psc20 .step04 .colgroup li {
    width: 18.4%;
    margin-top: 0;
    margin-left: 2%;
    float: left;
}
.psc20 .step02 .colgroup li:first-child,
.psc20 .step04 .colgroup li:first-child {
    margin-left: 0;
}
.psc20 .step03 .colgroup li {
    width: 15%;
    margin: 2% 0 0 2%;
}
.psc20 .step03 .colgroup li:nth-child(6n+1) {
    margin-left: 0;
}

.psc20 .scon2 {
    margin-bottom: 2%;
    text-align: center;
}
.psc20 .scon2 .step_choice {
    display: none;
    margin: 2% 0 0 20px;
    padding: 7px 35px;
    color: #3965dd;
    font-size: 18px;
    text-align: center;
    border: 2px solid #3965dd;
    border-radius: 50px;
}
.psc20 .scon2 .step_choice:first-child {
    margin-left: 0;
}
.psc20 .scon2 .show {
    display: block;
}
.psc20 .scon3 {
    padding: 20px 20px 0;
    background: #fcfcfc;
    border: 1px solid #e0ddda;
    border-radius: 15px;
}
.psc20 .scon3 .step_title .right_area {
    position: absolute;
    top: -7px;
    right: 0;
    text-align: right;
}
.psc20 .scon3 .step_title a {
    display: inline-block;
    padding: 7px 15px;
    color: #262626;
    font-size: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0ddda;
    border-radius: 15px;
    -webkit-transition: color 300ms ease, background 300ms ease, border 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease, border 300ms ease;
    transition: color 300ms ease, background 300ms ease, border 300ms ease;
}
.psc20 .scon3 .step_title a span {
    font-weight: 500;
}
.psc20 .scon3 .step_title a:hover,
.psc20 .scon3 .step_title a:focus {
    color: #fff;
    background: #3965dd;
    border-color: #3965dd;
}
.psc20 .scon3 .cont31 {
    padding: 50px 0;
    border-bottom: 1px solid #e0ddda;
}
.psc20 .scon3 .cont31 .igroup {
    position: relative;
    width: 20%;
    min-height: 124px;
    padding: 10px;
    float: left;
    font-size: 18px;
    text-align: center;
}
.psc20 .scon3 .cont31 .igroup::before {
    position: absolute;
    display: block;
    content: '';
    width: 1px;
    height: 140px;
    top: 0;
    left: 0;
    background: #e0ddda;
}
.psc20 .scon3 .cont31 .igroup:first-child::before {
    display: none;
}
.psc20 .scon3 .cont31 .igroup04 {
    width: 40%;
}
.psc20 .scon3 .cont31 h5 {
    margin-bottom: 20px;
    color: #3965dd;
    font-size: 20px;
    font-weight: 500;
}
.psc20 .scon3 .cont31 li {
    text-align: left;
}
.psc20 .scon3 .dotlist {
    margin-left: 15px;
}
.psc20 .scon3 .dotlist li {
    position: relative;
    padding-left: 12px;
    font-size: inherit;
    line-height: 1.2;
}
.psc20 .scon3 .dotlist li:before {
    position: absolute;
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    top: 9px;
    left: 0;
    background: #4d4d4d;
    border-radius: 50%;
}
.psc20 .scon3 .cont32 {
}
.psc20 .scon3 .cont32 .tbl {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.psc20 .scon3 .cont32 .tbl th,
.psc20 .scon3 .cont32 .tbl td {
    padding: 15px;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid #e5e5e5;
}
.psc20 .scon3 .cont32 .tbl th {
    font-weight: 500;
    text-align: center;
}

.psc20 .scon3 .cont32 .tbl th:first-child {
    border-left: 0;
}

.psc20 .scon3 .cont32 .tbl th:last-child,
.psc20 .scon3 .cont32 .tbl td:last-child {
    border-right: 0;
}
.psc20 .scon3 .cont32 .tbl thead th {
    border-top: 0;
    border-bottom: 0;
}
.psc20 .scon3 .cont32 .tbl tbody th {
    line-height: 1.2;
}
.psc20 .scon3 .cont32 .tbl tbody tr:last-child th,
.psc20 .scon3 .cont32 .tbl tbody tr:last-child td {
    border-bottom: 0;
}
.psc20 .scon3 .cont32 .tbl .nopadding {
    padding: 0;
}
.psc20 .scon3 .cont32 .tbl .colspan {
    width: 40%;
    padding: 15px;
    float: left;
}
.psc20 .scon3 .cont32 .tbl .colspan1 {
    width: 20%;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}
.psc20 .scon_btn_area {
    display: none;
}
.psc20 .scon_btn_area a,
.psc20 .scon_btn_area button,
.psc20 .scon_btn_area input {
    display: block;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    cursor: pointer;
    outline: 0;
    color: #3965dd;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    background: #fff;
    border: 3px solid #3965dd;
    border-radius: 50px;
    -webkit-transition: color 300ms ease, background 300ms ease, border 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease, border 300ms ease;
    transition: color 300ms ease, background 300ms ease, border 300ms ease;
}
.psc20 .scon_btn_area a:hover,
.psc20 .scon_btn_area a:focus,
.psc20 .scon_btn_area button:hover,
.psc20 .scon_btn_area button:focus,
.psc20 .scon_btn_area input:hover,
.psc20 .scon_btn_area input:focus {
    color: #fff;
    background: #3965dd;
}
.psc20 .scon_btn_area i {
    margin-right: 10px;
}



.psc40 .agreeWrap {
    width: 100%;
    overflow: hidden;
}
.psc40 .agreeWrap .agreeBox {
    height: 190px;
    padding: 20px;
    overflow-y: auto;
    font-size: 1em;
    word-break: keep-all;
    border: 1px #e1e1e1 solid;
}
.psc40 .agreeWrap .agreeBox .tit {
    padding: 0 0 20px 0;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}
.psc40 .agreeWrap .agreeBox .txt {
    padding: 0 0 20px 0;
    color: #777;
    font-size: 14px;
    line-height: 1.6;
}
.psc40 .agreeWrap .agreeBox ul::after {
    display: block;
    content: '';
    clear: both;
}
.psc40 .agreeWrap .agreeBox ul li {
    color: #333;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
}
.psc40 .agreeWrap .agreeChk {
    padding: 20px 0 50px 0;
    text-align: right;
}
.psc40 .agreeWrap .agreeChk label {
    margin: 0 4px 0 0;
    color: #555;
    font-size: 14px;
}
.psc40 .agreeWrap .agreeChk input {
    vertical-align: middle;
}

.psc40 .requestWrap {
    position: relative;
    width: 100%;
}
.psc40 .requestWrap input,
.psc40 .requestWrap textarea {
    width: 100%;
    padding: 10px;
    color: #777;
    font-size: 15px;
    background-color: #fff;
    border: 1px #dadada solid;
    border-radius: 0;
    -webkit-transition: color 250ms ease, background 250ms ease, border 250ms ease;
    -moz-transition: color 250ms ease, background 250ms ease, border 250ms ease;
    transition: color 250ms ease, background 250ms ease, border 250ms ease;
}
.psc40 .requestWrap input:hover,
.psc40 .requestWrap textarea:hover {
    border-color: #3965dd;
}
.psc40 .requestWrap input:focus,
.psc40 .requestWrap textarea:focus {
    background-color: rgba(0,0,0,0.025);
    border-color: #3965dd;
}
.psc40 .requestWrap .colgroup {
    padding: 15px 0;
    border-top: 1px dashed #c0c0c0;
}
.psc40 .requestWrap .colgroup1 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    display:flex;
    flex-wrap:wrap;
}
.psc40 .requestWrap .colgroup1 .colspan {
    flex-basis:33%;
    /*width: 32%;*/
    /*margin-left: 2%;*/
    /*float: left;*/
}
.psc40 .requestWrap .colgroup1 .colspan:first-child {
    /*margin-left: 0;*/
}

.psc523 {
    margin-top: 50px;
}
.psc40 .request_btn {
    text-align: center;
}
.psc40 .request_btn input,
.psc40 .request_btn button,
.psc40 .request_btn a {
    display: inline-block;
    width: 120px;
    padding: 10px 5px;
    color: #000;
    font-size: 1em;
    vertical-align: middle;
    background: #fff;
    border: 2px solid #000;
    -webkit-transition: color 250ms ease, background 250ms ease, border 250ms ease;
    -moz-transition: color 250ms ease, background 250ms ease, border 250ms ease;
    transition: color 250ms ease, background 250ms ease, border 250ms ease;
}
.psc40 .request_btn input:hover,
.psc40 .request_btn input:focus,
.psc40 .request_btn button:hover,
.psc40 .request_btn button:focus,
.psc40 .request_btn a:hover,
.psc40 .request_btn a:focus {
    color: #fff;
    background: #000;
}


.viewer .colspan {
    position: relative;
    width: 48%;
    margin-left: 4%;
    padding: 50px;
    float: left;
    border: 1px solid #e8e8e8;
    border-radius: 15px;
}
.viewer .colspan:first-child {
    margin-left: 0;
}
.viewer .cont .ico {
    width: 70px;
    height: 70px;
    overflow: hidden;
    margin: 0 auto 10px;
    line-height: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
}
.viewer .cont .hwp {background-image: url('../img/page/ico_hwp.png');}
.viewer .cont .pdf {background-image: url('../img/page/ico_pdf.png');}
.viewer .cont h3 {
    margin-bottom: 45px;
    color: #2b3275;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.viewer .cont p {
    margin-bottom: 45px;
    color: #4c4c4c;
    text-align: justify;
}
.viewer .cont .lnk {
    text-align: center;
}
.viewer .cont a {
    display: inline-block;
    padding: 12px 50px;
    color: #3965dd;
    font-weight: 500;
    text-align: center;
    border: 2px solid #3965dd;
    border-radius: 50px;
    -webkit-transition: color 300ms ease, background 300ms ease;
    -moz-transition: color 300ms ease, background 300ms ease;
    transition: color 300ms ease, background 300ms ease;
}
.viewer .cont a:hover,
.viewer .cont a:focus {
    color: #fff;
    background: #3965dd;
}


/* 책책쿵TV */
.triangle {
    position: fixed;
    display: block;
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    z-index: 96;
    text-indent: -9999px;
    border-top:    40px solid transparent;
    border-right:  40px solid #ffd634;
    border-bottom: 40px solid #ffd634;
    border-left:   40px solid transparent;
    -webkit-transition: border 300ms ease;
    -moz-transition: border 300ms ease;
    transition: border 300ms ease;
}
.triangle:hover,
.triangle:focus {
    border-width: 60px;
}
.triangle:hover + .bubble,
.triangle:focus + .bubble {
    right: 56px;
    bottom: 84px;
    visibility: visible;
    opacity: 1;
}
.triangle::before {
    position: fixed;
    content: '';
    width: 80px;
    height: 80px;
    right: 0;
    bottom: 0;
    background-image: url('../img/page/bookstar_tv@2x.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: right 300ms ease, bottom 300ms ease, transform 300ms ease;
    -moz-transition: right 300ms ease, bottom 300ms ease, transform 300ms ease;
    transition: right 300ms ease, bottom 300ms ease, transform 300ms ease;
}
.triangle:hover::before {
    right: 15px;
    bottom: 15px;
    transform: scale(1.25);
}
.bubble {
    position: fixed;
    right: -45px;
    bottom: -25px;
    visibility: hidden;
    z-index: 95;
    line-height: 0;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.bubble .text {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    color: #000;
    font-size: 15px;
    text-align: center;
    line-height: 1.4;
    background-color: #ffd634;
    border-radius: 5px;
}
.bubble .text::after {
    position: absolute;
    content: '';
    margin-top: -10px;
    right: -17px;
    top: 50%;
    border-top:    10px solid transparent;
    border-right:  10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left:   10px solid #ffd634;
}


/* GRID COMMON */
.type2 .item,
.type2 li,
.type3 .item,
.type3 li,
.type4 .item,
.type4 li {
    position: relative;
    width: 49%;
    margin: 50px 0 0 2%;
    float: left;
}
.type2 .item:nth-child(2n+1),
.type2 li:nth-child(2n+1) {
    margin-left: 0;
    clear: both;
}
.type3 .item,
.type3 li {
    width: 32%;
}
.type3 .item:nth-child(3n+1),
.type3 li:nth-child(3n+1) {
    margin-left: 0;
    clear: both;
}
.type4 .item,
.type4 li {
    width: 23.5%;
}
.type4 .item:nth-child(4n+1),
.type4 li:nth-child(4n+1) {
    margin-left: 0;
    clear: both;
}
.type2 .item:nth-child(1),
.type2 .item:nth-child(2),
.type2 li:nth-child(1),
.type2 li:nth-child(2),
.type3 .item:nth-child(1),
.type3 .item:nth-child(2),
.type3 .item:nth-child(3),
.type3 li:nth-child(1),
.type3 li:nth-child(2),
.type3 li:nth-child(3),
.type4 .item:nth-child(1),
.type4 .item:nth-child(2),
.type4 .item:nth-child(3),
.type4 .item:nth-child(4),
.type4 li:nth-child(1),
.type4 li:nth-child(2),
.type4 li:nth-child(3),
.type4 li:nth-child(4) {
    margin-top: 22px;
}



/* --------------------------------------------------------------------------------------------
    ## BOARD
-------------------------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------------------------
    ## Mobile Only
-------------------------------------------------------------------------------------------- */
.mobile #header h1 a      {background-image: url('../img/common/logo@3x.png') !important;}
.mobile #mobile_menu h1 a {background-image: url('../img/common/slogo@3x.png') !important;}

.mobile #footer .top_area .fsns a.instagram {background-image: url('../img/common/sns_01@3x.png');}
.mobile #footer .top_area .fsns a.youtube   {background-image: url('../img/common/sns_02@3x.png');}
.mobile #footer .top_area .fsns a.facebook  {background-image: url('../img/common/sns_03@3x.png');}

.mobile #footer .bottom_area li .fico11 {background-image: url('../img/common/fico_11@2x.png');}
.mobile #footer .bottom_area li .fico12 {background-image: url('../img/common/fico_12@2x.png');}
.mobile #footer .bottom_area li .fico13 {background-image: url('../img/common/fico_13@2x.png');}
.mobile #footer .bottom_area li .fico14 {background-image: url('../img/common/fico_14@2x.png');}

.mobile #footer .bottom_area .cols4 .footer_lnk {background-image: url(../img/common/footer_piaget@2x.png);}

.mobile #quick-bar .igroup1 .icon   {background-image: url('../img/main/aside_ico_01@2x.png');}
.mobile #quick-bar .igroup2 .icon   {background-image: url('../img/main/aside_ico_02@2x.png');}
.mobile #quick-bar .igroup3 .icon   {background-image: url('../img/main/aside_ico_03@2x.png');}
.mobile #quick-bar .igroup4 .icon   {background-image: url('../img/main/aside_ico_04@2x.png');}
.mobile #quick-bar .igroup5 .icon   {background-image: url('../img/main/aside_ico_05@2x.png');}

.mobile .ms01 .ilist01 a .ico {background-image: url('../img/main/ms01_ico_01@2x.png');}
.mobile .ms01 .ilist02 a .ico {background-image: url('../img/main/ms01_ico_02@2x.png');}
.mobile .ms01 .ilist03 a .ico {background-image: url('../img/main/ms01_ico_03@2x.png');}
.mobile .ms01 .ilist04 a .ico {background-image: url('../img/main/ms01_ico_04@2x.png');}
.mobile .ms01 .ilist05 a .ico {background-image: url('../img/main/ms01_ico_05@2x.png');}

.mobile .ms03 .quick_lnk .item01 .ico {background-image: url('../img/main/csquick_01@2x.png');}
.mobile .ms03 .quick_lnk .item02 .ico {background-image: url('../img/main/csquick_02@2x.png');}
.mobile .ms03 .quick_lnk .item03 .ico {background-image: url('../img/main/csquick_03@2x.png');}
.mobile .ms03 .quick_lnk .item04 .ico {background-image: url('../img/main/csquick_04@2x.png');}


.mobile .psc111 .right .cont .quote::before  {background-image: url(../img/page/quote_left@2x.png);}
.mobile .psc111 .right .cont .quote::after   {background-image: url(../img/page/quote_right@2x.png);}

.mobile .psc112 .cont .right_area li::before {background-image: url('../img/page/ico_check@3x.png');}

.mobile .psc123 .colspan1 {background-image: url('../img/page/page12_13_01@3x.png') !important;}
.mobile .psc123 .colspan2 {background-image: url('../img/page/page12_13_02@3x.png') !important;}
.mobile .psc123 .colspan3 {background-image: url('../img/page/page12_13_03@3x.png') !important;}
.mobile .psc123 .colspan4 {background-image: url('../img/page/page12_13_04@3x.png') !important;}

.mobile .psc124 .ilist1 .ico {background-image: url('../img/page/page12_14_01@3x.png');}
.mobile .psc124 .ilist2 .ico {background-image: url('../img/page/page12_14_02@3x.png');}
.mobile .psc124 .ilist3 .ico {background-image: url('../img/page/page12_14_03@3x.png');}
.mobile .psc124 .ilist4 .ico {background-image: url('../img/page/page12_14_04@3x.png');}
.mobile .psc124 .ilist5 .ico {background-image: url('../img/page/page12_14_05@3x.png');}

.mobile .psc121 .balloon::after           {background-image: url('../img/page/page12_11_bullet@3x.png');}
.mobile .psc121 .balloon1 .ico            {background-image: url('../img/page/page12_11_01@3x.png');}
.mobile .psc121 .balloon2 .ico            {background-image: url('../img/page/page12_11_02@3x.png');}
.mobile .psc121 .balloon3 .ico            {background-image: url('../img/page/page12_11_03@3x.png');}
.mobile .psc121 .colspan2 .tbox p::before {background-image: url('../img/page/quote_left2@2x.png');}
.mobile .psc121 .colspan2 .tbox p::after  {background-image: url('../img/page/quote_right2@2x.png');}

.mobile .psc122 .rbox li::after {background-image: url('../img/page/page12_12_bullet@3x.png');}

.mobile .psc124 .ilist1 .ico {background-image: url('../img/page/page12_14_01@3x.png');}
.mobile .psc124 .ilist2 .ico {background-image: url('../img/page/page12_14_02@3x.png');}
.mobile .psc124 .ilist3 .ico {background-image: url('../img/page/page12_14_03@3x.png');}
.mobile .psc124 .ilist4 .ico {background-image: url('../img/page/page12_14_04@3x.png');}
.mobile .psc124 .ilist5 .ico {background-image: url('../img/page/page12_14_05@3x.png');}

/* --------------------------------------------------------------------------------------------
    ## MSIE
-------------------------------------------------------------------------------------------- */
.msie .vtrow {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* --------------------------------------------------------------------------------------------
    ## KEYFRAMES
-------------------------------------------------------------------------------------------- */
@-webkit-keyframes meteor {
    0% {
        top: -5%;
        right: -5%;
        opacity: 0;
        -webkit-transform: scale(0.35);
    }
    5% {
        opacity: 1;
    }
    50% {
        top: 100%;
        right: 100%;
        -webkit-transform: scale(1);
    }
    100% {
        top: 120%;
        right: 120%;
        opacity: 1;
    }
}
@keyframes meteor {
    0% {
        top: -5%;
        right: -5%;
        opacity: 0;
        transform: scale(0.35);
    }
    5% {
        opacity: 1;
    }
    50% {
        top: 100%;
        right: 100%;
        transform: scale(1);
    }
    100% {
        top: 120%;
        right: 120%;
        opacity: 1;
    }
}
@-webkit-keyframes updown {
    0% {
        -webkit-transform: -webkit-translateY(-5%);
    }
    100% {
        -webkit-transform: -webkit-translateY(5%);
    }
}
@keyframes updown {
    0% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(5%);
    }
}
@-webkit-keyframes updown2 {
    0% {
        -webkit-transform: -webkit-translateY(-3%);
    }
    100% {
        -webkit-transform: -webkit-translateY(4%);
    }
}
@keyframes updown2 {
    0% {
        transform: translateY(-3%);
    }
    100% {
        transform: translateY(4%);
    }
}
@-webkit-keyframes pass {
    0% {
        left: -50%;
        -webkit-transform: scale(0.5);
    }
    70% {
        left: 175%;
        -webkit-transform: scale(1);
    }
    100% {
        left: 175%;
    }
}
@keyframes pass {
    0% {
        left: -50%;
        transform: scale(0.5);
    }
    70% {
        left: 175%;
        transform: scale(1);
    }
    100% {
        left: 175%;
    }
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(1080deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}
/* transform: rotateY( 180deg ) */
@-webkit-keyframes fall {
    100% {
        -webkit-transform: -webkit-translateY(0);
    }
}
@keyframes fall {
    100% {
        transform: translateY(0);
    }
}



/* --------------------------------------------------------------------------------------------
    ## RESPONSIVE
-------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1680px) {

}


@media screen and (max-width: 1200px) {
    /* Tablet Landscape */
}


@media screen and (max-width: 1024px) {
    /* Tablet Landscape */

    #quick-bar .group {
        max-width:100%;
        text-align:center;
    }
    #quick-bar .group img {
        margin:0 auto;
    }
    /* HEADER */
    #header {
        position: fixed;
        width: 100%;
        height: 81px;
        top: 0;
        left: 0;
        z-index: 97;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #dcdcdc;
    }
    .main #header {
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #dcdcdc;
    }
    #header .inner h1 {
        width: 123px;
        height: 46px;
        margin: -23px 0 0 -42px;
        left: 50%;
    }
    #header .inner h1 a {
        background-image: url('../img/common/slogo.png');
    }
    .mobile #header h1 a,
    .mobile #mobile_menu h1 a {
        background-image: url('../img/common/slogo@3x.png') !important;
    }
    #header .isearch_btn {
        right: 10px;
    }
    #header .isearch_btn a {
        background-color: #f3f3f3;
    }
    #header #menu,
    #header .iloged_btn,
    #header .gnbline {
        display: none;
    }
    .inner_gap {
        height: 60px;
    }

    /* MOBILE MENU TOGGLE BTN */
    #header #btn_m_toggle {
        top: 29px;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
    }


    /* VISUAL */
    .sub_top_blank{height:80px;}
    #visual {
        height: 250px;
        /*margin-top: 80px;*/
        margin-bottom: 80px;
    }
    #visual .inner h2 {
        font-size: 28px;
    }
    .main #visual {
        margin-top: 0;
    }
    .main #visual .txt_area {
        margin-left: 25px;
    }
    #visual .meteor,
    #visual .planet {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    #visual .planet1 {
        left: -3.5%;
    }
    #visual .planet2 {
        top: 12%;
    }
    #visual .planet3 {
        bottom: 13%;
    }
    #visual .planet4 {
        right: -5%;
    }
    #visual .meteor2 {
        -webkit-animation: 17000ms ease-in infinite both pass;
        -moz-animation: 17000ms ease-in infinite both pass;
        animation: 17000ms ease-in infinite both pass;
    }
    #visual .meteor2 .stone {
        -webkit-animation: 17000ms ease-in infinite both rotate;
        -moz-animation: 17000ms ease-in infinite both rotate;
        animation: 17000ms ease-in infinite both rotate;
    }


    /* quickbar */
    #quick-bar {
        position: static;
        height: auto;
        padding-top: 60px;
    }
    #quick-bar .group {
        position: static;
        width: 100%;
        padding: 0;
    }
    #quick-bar li {
        width: 18.4%;
        margin-top: 0;
        margin-left: 2%;
        float: left;
    }
    #quick-bar li:first-child {
        margin-left: 0;
    }
    #quick-bar li a {
        width: 100%;
        height: auto;
        padding: 15px 0 20px;
    }
    #quick-bar .ico_area {
        margin: 0 auto;
        float: none;
    }
    #quick-bar .txt_area {
        float: none;
        text-align: center;
        line-height: 1;
    }

    .psc .sec_stitle {
        font-size: 15px;
    }
    .psc111 .left,
    .psc111 .right {
        width: 100%;
        float: none;
    }
    .psc111 .left {
        display: none;
    }
    .psc111 .right {
        margin-left: 0;
        font-size: 16px;
    }
    .psc111 .right .vac {
        position: absolute;
        width: 90%;
        top: 45%;
        left: 50%;
        z-index: 1;
        -webkit-transform: -webkit-translate(-50%, -50%);
        -moz-transform:    -moz-translate(-50%, -50%);
        transform:         translate(-50%, -50%);
    }
    .psc111 .right .cont {
        padding: 20px 35px;
    }
    .psc111 .right .background {
        display: block;
    }

    .psc121 .colspan2 img {
        max-width: 95%;
    }

    .psc112 .cont {
        display: flex;
        width: 100%;
        padding: 80px 30px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-direction: column;
    }
    .psc112 .cont .left_area {
        position: static;
        display: block;
        margin-bottom: 35px;
        -webkit-transform: -webkit-translate(0, 0);
        -moz-transform:    -moz-translate(0, 0);
        transform:         translate(0, 0);
    }
    .psc112 .cont .right_area {
        margin-left: 0;
    }
    .psc112 .cont .left_area h4 {
        font-size: 20px;
    }
    .psc112 .cont .right_area li {
        padding-left: 45px;
        font-size: 16px;
        line-height: 1.4;
    }

    .psc121 .colspan1 {
        display: flex;
        width: 100%;
        margin-bottom: 60px;
        align-items: flex-end;
        justify-content: center;
        align-content: center;
    }
    .psc121 .balloon {
        width: 32%;
        margin-left: 2%;
        float: left;
    }
    .psc121 .balloon1 {
        margin-left: 0;
    }
    .psc121 .balloon::after {
        position: absolute;
        content: '';
        width: 32px;
        height: 44px;
        right: 50px;
        bottom: -35px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .psc121 .colspan2 {
        position: static;
        display: block;
        width: 100%;
        height: auto;
    }
    .psc121 .colspan2 .tbox p {
        font-size: 24px;
        font-weight: 300;
    }

    .psc13 .scon2 .title_area {
        font-size: 1.25em;
    }
}


@media screen and (max-width: 960px) {
    /* Google Nexus 7 Landscape */

    /* FOOTER */
    #footer #fgnb > ul > li {
        margin-left: 30px;
    }
}


@media screen and (max-width: 880px) {
    /* FOOTER */
    #footer #fgnb > ul {
        width: 100%;
        float: none;
    }
    #footer #fgnb > ul > li {
        width: 25%;
        margin-left: 0;
    }


    /* main */
    .main .ms01 .ilist {
        width: 48%;
        margin: 4% 0 0 4%;
    }
    .main .ms01 .ilist:nth-child(1),
    .main .ms01 .ilist:nth-child(2) {
        margin-top: 0;
    }
    .main .ms01 .ilist:nth-child(2n+1) {
        margin-left: 0;
        clear: both;
    }


    .psc13 .scon1 .colspan {
        width: 100%;
        float: none;
        clear: both;
    }
    .psc13 .scon1 .cols2 {
        background: url('../img/page/books_h.png') 0 0 repeat-x;
    }
}


@media screen and (max-width: 800px) {
    /* Google Nexus 7 Landscape */

}


@media screen and (max-width: 768px) {
    /* Tablet Portrait */
    /* FOOTER */
    #footer .bottom_area .colspan {
        width: 49%;
        margin: 50px 0 0 2%;
    }
    #footer .bottom_area .colspan:nth-child(2n+1){
        margin-left: 0;
        clear: both;
    }
    #footer .bottom_area .colspan:nth-child(1),
    #footer .bottom_area .colspan:nth-child(2) {
        margin-top: 0;
    }
    #footer .copyright {
        margin: 50px 0 0 0;
        text-align: center;
    }


    /* VISUAL */
    #visual {
        height: 200px;
    }
    .main #visual {
        height: 640px;
    }
    .main #visual .txt_area h3 {
        font-size: 36px;
    }
    .main #visual .txt_area p {
        font-size: 20px;
    }
    #visual .inner h2 {
        font-size: 24px;
    }
    #visual .location_group li {
        font-size: 15px;
    }


    /* MAIN */
    .main .ms .title_area h3 {
        font-size: 24px;
    }
    .main .ms .title_area p {
        font-size: 15px;
    }
    .main .ms02 .image_area {
        margin-bottom: 20px;
    }
    .main .ms02 .ilist h4,
    .main .ms03 .ms_notice li,
    .main .ms03 .quick_lnk .item a p {
        font-size: 15px;
    }


    /* PAGE */
    .tab_menu .inner {
        min-height: 42px;
    }
    .tab_menu button {
        height: 100%;
        font-size: 1.0625em;
        line-height: 42px;
    }


    .psc .sec_title h4,
    .psc20 .step_title h4 {
        font-size: 18px;
    }

    .psc121 .colspan2 .tbox p {
        font-size: 20px;
    }

    .psc122 .rbox {
        margin: 0 30px;
        padding: 0 30px;
    }
    .psc122 .rbox li {
        width: 100%;
        padding: 40px 10px;
        float: none;
    }
    .psc122 .rbox li::before {
        width: 100%;
        height: 1px;
        left: 0;
        bottom: auto;
    }
    .psc122 .rbox li::after {
        margin-top: 0;
        margin-left: -18px;
        top: -18px;
        left: 50%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .psc20 .step02,
    .psc20 .step04 {
        padding-bottom: 14px;
    }
    .psc20 .step03 .colgroup li {
        margin-top: 28px;
    }
    .psc20 .step .toggle_btn {
        padding: 10px 5px;
        font-size: 15px;
    }
    .psc20 .scon2 .step_choice {
        margin-left: 2%;
        font-size: 15px;
    }
    .psc20 .scon3 .cont31 h5 {
        font-size: 17px;
    }
    .psc20 .scon3 .cont31 .igroup {
        font-size: 15px;
    }
    .psc20 .scon3 .cont32 .tbl th,
    .psc20 .scon3 .cont32 .tbl td {
        font-size: 15px;
    }


    /* MGRID */
    .mtype1 .item,
    .mtype1 li,
    .mtype2 .item,
    .mtype2 li {
        width: 49%;
        margin: 50px 0 0 2%;
    }
    .mtype1 .item:nth-child(3n+1),
    .mtype1 li:nth-child(3n+1),
    .mtype2 .item:nth-child(3n+1),
    .mtype2 li:nth-child(3n+1) {
        margin-left: 2%;
        clear: none;
    }
    .mtype1 .item:nth-child(2n+1),
    .mtype1 li:nth-child(2n+1),
    .mtype2 .item:nth-child(2n+1),
    .mtype2 li:nth-child(2n+1),
    .mtype2 .item:nth-child(3n+1),
    .mtype2 li:nth-child(3n+1),
    .mtype2 .item:nth-child(4n+1),
    .mtype2 li:nth-child(4n+1) {
        clear: none;
    }
    .mtype1 .item:nth-child(2n+1),
    .mtype1 li:nth-child(2n+1),
    .mtype2 .item:nth-child(2n+1),
    .mtype2 li:nth-child(2n+1) {
        margin-left: 0;
        clear: both;
    }
    .mtype1 .item:nth-child(1),
    .mtype1 li:nth-child(1),
    .mtype1 .item:nth-child(2),
    .mtype1 li:nth-child(2),
    .mtype2 .item:nth-child(1),
    .mtype2 li:nth-child(1),
    .mtype2 .item:nth-child(2),
    .mtype2 li:nth-child(2) {
        margin-top: 22px;
    }
    .mtype1 .item:nth-child(3),
    .mtype1 li:nth-child(3),
    .mtype1 .item:nth-child(4),
    .mtype1 li:nth-child(4),
    .mtype2 .item:nth-child(3),
    .mtype2 li:nth-child(3),
    .mtype2 .item:nth-child(4),
    .mtype2 li:nth-child(4) {
        margin-top: 50px;
    }

    .mtype3 .item,
    .mtype3 li {
        width: 32%;
        margin: 50px 0 0 2%;
    }
    .mtype3 .item:nth-child(3n+1),
    .mtype3 li:nth-child(3n+1) {
        clear: none;
    }
    .mtype3 .item:nth-child(3n+1),
    .mtype3 li:nth-child(3n+1) {
        margin-left: 0;
        clear: both;
    }
    .mtype3 .item:nth-child(1),
    .mtype3 li:nth-child(1),
    .mtype3 .item:nth-child(2),
    .mtype3 li:nth-child(2),
    .mtype3 .item:nth-child(3),
    .mtype3 li:nth-child(3) {
        margin-top: 22px;
    }
}


@media screen and (max-width: 736px) {
    /* iPhone 6 Plus Landscape */
    /* HEADER */
    .isearch_overlay .isearch_area {
        width: 90%;
    }


    /* VISUAL */
    #visual .swiper-button-prev,
    #visual .swiper-button-next {
        display: none !important;
    }
    #visual .meteor,
    #visual .planet {
        -webkit-transform: scale(0.65);
        -moz-transform: scale(0.65);
        transform: scale(0.65);
    }


    /* quickbar */
    #quick-bar li a {
        padding: 0 0 10px;
    }
    #quick-bar .txt_area span {
        top: -1px;
        font-size: 16px;
    }
    #quick-bar .txt_area strong {
        font-size: 24px;
    }


    /* MAIN */
    .main .ms03 .lgroup,
    .main .ms03 .ms_events {
        width: 100%;
        max-width: 640px;
        height: auto;
        margin: 0 auto;
        float: none;
    }
    .main .ms03 .ms_notice .ititle {
        margin-top: 0;
    }
    .main .ms03 .quick_lnk {
        margin: 35px auto;
        padding: 35px 0;
        border-bottom: 1px solid #dbdbdb;
    }
    .main .ms03 .ms_events {
        max-width: 576px;
    }
    .main .ms03 .ms_events .ilist a {
        height: auto;
    }
    .main .ms03 .ms_events .ilist a img {
        display: block;
    }


    /* PAGE */
    .psc_title h3 {
        margin-bottom: 12px;
        padding-bottom: 12px;
        font-size: 22px;
        font-weight: 500;
    }
    .psc_title p {
        font-size: 16px;
    }
    .psc {
        margin-top: 50px;
    }
    .psc:nth-child(2) {
        margin-top: 30px;
    }

    .psc124 .ilist {
        width: 32%;
        margin-left: 2%;
        padding: 0 0 20px;
    }
    .psc124 .ilist:nth-child(3n+1) {
        margin-left: 0;
        clear: both;
    }
    .psc124 h5 {
        font-size: 15px;
    }

    .psc20 .step {
        padding: 15px 10px;
    }

    .psc20 .step03 .colgroup li {
        width: 23.5%;
        margin: 2% 0 0 2%;
    }
    .psc20 .step03 .colgroup li:nth-child(4), {
        margin-top: 0;
    }
    .psc20 .step03 .colgroup li:nth-child(5),
    .psc20 .step03 .colgroup li:nth-child(6) {
        margin-top: 2%;
    }
    .psc20 .step03 .colgroup li:nth-child(3n+1) {
        margin-left: 2%;
    }
    .psc20 .step03 .colgroup li:nth-child(4n+1) {
        margin-left: 0;
    }
    .psc20 .step .toggle_btn {
        padding: 5px;
    }
    .psc20 .scon2 .step_choice {
        width: 23.5%;
        padding: 10px 5px;
        float: left;
    }


    .viewer .colspan {
        width: 100%;
        margin: 30px 0 0;
        float: none;
    }
    .viewer .colspan:first-child {
        margin-top: 0;
    }
}


@media screen and (max-width: 720px) {

}


@media screen and (max-width: 667px) {
    /* iPhone 6 Landscape */

    /* VISUAL */
    .main #visual {
        height: 520px;
    }
    .main #visual .txt_area h3 {
        font-size: 28px;
    }
    .main #visual .txt_area p {
        font-size: 18px;
    }
    #visual .meteor,
    #visual .planet {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        transform: scale(0.5);
    }
    #visual .planet1 {
        left: -20%;
    }
    #visual .planet2 {
        right: -10%;
    }
    #visual .planet3 {
        bottom: 9%;
    }
    #visual .planet4 {
        right: -20%;
        bottom: -30%;
    }
    #visual .meteor2 {
        bottom: -13.5%;
        -webkit-transform: scale(0.35) !important;
        -moz-transform: scale(0.35) !important;
        transform: scale(0.35) !important;
        -webkit-animation: 15000ms ease-in infinite both pass;
        -moz-animation: 15000ms ease-in infinite both pass;
        animation: 15000ms ease-in infinite both pass;
    }
    #visual .meteor2 .stone {
        -webkit-animation: 15000ms ease-in infinite both rotate;
        -moz-animation: 15000ms ease-in infinite both rotate;
        animation: 15000ms ease-in infinite both rotate;
    }
    #visual .inner h2 {
        font-size: 1.875em;
    }
}


@media screen and (max-width: 640px) {
    /* Mobile Landscape */
    /* HEADER*/
    .isearch_overlay .isearchbar,
    .isearch_overlay .isearch_submit span {
        font-size: 24px;
    }
    .isearch_overlay .isearchbar {
        padding-right: 45px;
    }
    .isearch_overlay .isearch_submit {
        width: 40px;
    }


    /* FOOTER */
    #footer .w640s {
        display: inline-block !important;
    }
    #footer .colgroup {
        margin-bottom: 10px;
    }


    /* MAIN */
    .main .ms .title_area h3 {
        font-size: 22px;
    }
    .main .ms .title_area p {
        font-size: 14px;
    }


    /* PAGE */
    .psc111 .right .cont p {
        margin-top: 20px;
    }
    .psc112 .cont {
        padding: 30px;
        border-radius: 15px;
    }
    .psc122 .rbox {
        margin: 0 auto;
    }
    .psc123 .sbox {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
    .psc123 .colspan {
        width: 100%;
        float: none;
        overflow: hidden;
        border-left: none;
        border-top: 1px solid #d4d4d4;
    }
    .psc123 .colspan h5 {
        font-size: 20px;
    }
    .psc123 .colspan p {
        font-size: 15px;
    }
    .psc123 .colspan:first-child {
        border-top: none;
    }
    .psc123 .colspan1 {background-image: url('../img/page/page12_13_01@2x.png');}
    .psc123 .colspan2 {background-image: url('../img/page/page12_13_02@2x.png');}
    .psc123 .colspan3 {background-image: url('../img/page/page12_13_03@2x.png');}
    .psc123 .colspan4 {background-image: url('../img/page/page12_13_04@2x.png');}
    .psc123 .colspan .cover {
        height: 150%;
        top: -75%;
        left: 50%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .psc123 .colspan1 .cover {
        margin-top: 7px;
    }
    .psc123 .colspan2 .cover,
    .psc123 .colspan3 .cover,
    .psc123 .colspan4 .cover {
        margin-top: 70px;
    }
    .psc123 .colspan4::after {
        margin-top: -12%;
        top: 50%;
        left: 50%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .psc124 .ilist .ico {
        width: 64px;
        height: 66px;
    }

    .psc20 .scon3 .step_title {
        margin-bottom: 0;
    }
    .psc20 .scon3 .cont31 {
        padding: 0 0 10px;
    }
    .psc20 .scon3 .cont31 .igroup {
        width: 100%;
        min-height: auto;
        float: none;
        clear: both;
        font-size: 14px;
    }
    .psc20 .scon3 .cont31 h5 {
        margin-bottom: 10px;
    }
    .psc20 .scon3 .cont31 .igroup::before {
        width: 100%;
        height: 1px;
    }
    .psc20 .scon3 .cont32 {
        overflow: hidden;
        overflow-x: auto;
    }
    .psc20 .scon3 .cont32 .tbl {
        min-width: 580px;
    }
    .psc20 .scon3 .cont32 .tbl th,
    .psc20 .scon3 .cont32 .tbl td {
        font-size: 14px;
    }
}


@media screen and (max-width: 568px) {
    /* iPhone 5 Landscape */
}


@media screen and (max-width: 560px) {
    /* FOOTER */
    #footer {
        padding: 0 0 50px;
    }
    #footer .top_area .inner {
        width: 100%;
    }
    #footer .top_area .fnav {
        border-bottom: 1px solid #39425b;
    }
    #footer .top_area .fnav li {
        width: 33.33333333333333%;
        text-align: center;
    }
    #footer .top_area .fnav li:first-child {
        border-left: 0;
    }
    #footer .top_area a {
        padding: 15px 3px;
        line-height: 1.4;
    }
    #footer .top_area .fsns {
        position: static;
        text-align: center;
    }
    #footer .top_area .fsns a {
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 50%;
    }
    #footer .bottom_area .colspan,
    #footer .bottom_area .colspan:nth-child(2),
    #footer .bottom_area .colspan:nth-child(2n+1){
        width: 90%;
        margin: 60px 5% 0 5%;
    }
    #footer .bottom_area .colspan:first-child {
        margin-top: 0;
    }

    /* VISUAL */
    #visual .swiper-slide .text_box {
        position: absolute;
        margin-top: 0;
        bottom: 80px;
    }
    #visual .swiper-slide .text_box h3 {
        margin-bottom: 5px;
        font-size: 1.75em;
    }
    #visual .swiper-pagination-fraction,
    #visual .swiper-pagination-custom,
    #visual .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 20px;
    }
    #visual > .inner > h2 {
        bottom: 70px;
        font-size: 1.625em;
    }


    /* MAIN */
    #quick-bar h3,
    .main .ms .title_area h3 {
        font-size: 20px;
        line-height: 1.2;
    }
    .main .ms .title_area p {
        text-align: justify;
        line-height: 1.4;
    }
    .main .ms .title_area p span {
        display: inline;
    }


    /* PAGE */
    .psc {
        margin-top: 65px;
    }

    .psc111 .right {
        min-height: 350px;
    }
    .psc111 .right .background {
        width: 100%;
        min-height: 350px;
        background: url('../img/page/page11_11_01.jpg') 50% 0 no-repeat;
        background-size: cover;
    }
    .psc111 .right .background img {
        display: none;
    }

    .psc121 .colspan1 {
        flex-direction: column;
    }
    .psc121 .balloon {
        width: 90%;
        margin: 35px auto 0;
        float: none;
    }
    .psc121 .balloon::after {
        margin-right: -16px;
        right: 50%;
    }

    .psc13 .scon2 .title_area {
        height: 40px;
        padding-left: 40px;
        font-size: 1.0625em;
        line-height: 42px;
    }
    .psc13 .scon2 .title_area .num {
        width: 40px;
    }

    .psc40 .requestWrap .colgroup {
        padding: 15px 0;
        border-top: 1px dashed #c0c0c0;
    }
    .psc40 .requestWrap .colgroup1 {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: 1px solid #c0c0c0;
    }
    .psc40 .requestWrap .colgroup1 .colspan {
        flex-basis:100%;
        width: 100%;
        margin-left: 0;
        padding: 15px 0;
        float: none;
        border-top: 1px dashed #c0c0c0;
    }
    .psc40 .requestWrap .colgroup1 .colspan:first-child {
        border-top: 0;
    }
}


@media screen and (max-width: 480px) {
    .psc20 .scon3 .step_title .right_area {
        position: static;
        margin-top: 10px;
        text-align: left;
    }
    .psc20 .scon3 .step_title a {
        width: 32%;
        margin-left: 2%;
        padding-left: 3px;
        padding-right: 3px;
        float: left;
        font-size: 13px;
        border-radius: 3px;
    }
    .psc20 .scon3 .step_title a:first-child {
        margin-left: 0;
    }


    /* MGRID */
    .mtype1 .item,
    .mtype1 li {
        width: 100%;
        margin: 50px 0 0 0;
    }
    .mtype1 .item:nth-child(2n+1),
    .mtype1 li:nth-child(2n+1),
    .mtype1 .item:nth-child(3n+1),
    .mtype1 li:nth-child(3n+1),
    .mtype1 .item:nth-child(4n+1),
    .mtype1 li:nth-child(4n+1) {
        margin-left: 0 !important;
        clear: both;
    }
    .mtype1 .item:nth-child(2),
    .mtype1 li:nth-child(2),
    .mtype2 .item:nth-child(3),
    .mtype2 li:nth-child(3),
    .mtype2 .item:nth-child(4),
    .mtype2 li:nth-child(4),
    .mtype3 .item:nth-child(4),
    .mtype3 li:nth-child(4) {
        margin-top: 50px;
    }
}


@media screen and (max-width: 428px) {
    /* HEADER*/
    .isearch_overlay .isearchbar,
    .isearch_overlay .isearch_submit span {
        font-size: 18px;
    }
    .isearch_overlay .isearchbar {
        padding-right: 35px;
    }
    .isearch_overlay .isearch_submit {
        width: 30px;
    }


    /* FOOTER */
    #footer .top_area a {
        font-size: 13px;
    }


    /* VISUAL */
    #visual {
        height: 150px;
        margin-bottom: 50px;
    }
    .main #visual {
        height: 420px;
    }
    .main #visual .txt_area {
        margin-top: 70px;
    }
    .main #visual .txt_area h3 {
        font-size: 20px;
    }
    .main #visual .txt_area p {
        margin-bottom: 0;
        font-size: 16px;
    }
    /*.main #visual .txt_area a {
        margin-left: 32px;
        transform: scale(0.75);
    }*/
    #visual .planet1 {
        left: -20%;
    }
    #visual .planet2 {
        right: -10%;
    }
    #visual .planet3 {
        bottom: 9%;
    }
    #visual .planet4 {
        right: -20%;
        bottom: -30%;
    }
    #visual .meteor2 {
        bottom: -19%;
        -webkit-animation: 11000ms ease-in infinite both pass;
        -moz-animation: 11000ms ease-in infinite both pass;
        animation: 11000ms ease-in infinite both pass;
    }
    #visual .meteor2 .stone {
        -webkit-animation: 11000ms ease-in infinite both rotate;
        -moz-animation: 11000ms ease-in infinite both rotate;
        animation: 11000ms ease-in infinite both rotate;
    }
    #visual .inner h2 {
        font-size: 20px;
    }
    #visual .location_group li {
        font-size: 14px;
    }


    /* QUICKBAR & MAIN */
    #quick-bar h3,
    .main .ms .title_area h3,
    .main .ms h4,
    .colgroup4 li h4 {
        font-size: 18px;
    }
    #quick-bar li {
        width: 100%;
        margin: 2% 0 0;
        float: none;
    }
    #quick-bar li a {
        height: 64px;
        padding: 0 20px;
    }
    #quick-bar .ico_area {
        float: left;
    }
    #quick-bar .txt_area {
        float: right;
        line-height: 70px;
    }
    .main .ms .title_area i {
        display: block;
    }
    .main .ms .title_area p {
        padding-left: 12px;
        padding-right: 12px;
    }
    .main .ms01 .title_area p {
        text-align: center;
    }
    .main .ms01 .ilist {
        width: 100%;
        margin: 4% 0 0;
        clear: both;
    }
    .main .ms01 .ilist:nth-child(1) {
        margin-top: 0;
    }
    .main .ms01 .ilist:nth-child(2) {
        margin-top: 4%;
    }
    .main .ms01 .ilist a {
        padding-top: 15px;
        padding-bottom: 25px;
    }
    .main .ms02 .image_area {
        margin-bottom: 15px;
    }
    .main .ms02 .ilist h4,
    .main .ms03 .ms_notice li,
    .main .ms03 .quick_lnk .item a p {
        font-size: 14px;
    }


    /* PAGE */
    .psc_title h3 {
        font-size: 20px;
    }
    .psc_title p {
        font-size: 15px;
    }
    .psc .sec_stitle {
        font-size: 14px;
    }

    .psc111 .right .cont {
        padding: 15px 25px;
    }
    .psc111 .right .cont .quote::before,
    .psc111 .right .cont .quote::after {
        width: 24px;
        height: 20px;
    }

    .psc121 .colspan2 .tbox p {
        font-size: 18px;
    }

    .psc20 .step .toggle_btn,
    .psc20 .scon2 .step_choice {
        padding: 3px;
        font-size: 13px;
    }
    .psc20 .scon3 .cont31 .igroup {
        font-size: 13px;
    }
    .psc20 .scon3 .cont32 .tbl th,
    .psc20 .scon3 .cont32 .tbl td {
        font-size: 13px;
    }


    .viewer .colspan {
        padding: 25px;
    }
}


@media screen and (max-width: 414px) {
    /* iPhone 6 Plus Portrait */
    /* BTN MORE */
    .btn_more {
        height: 26px;
        padding: 0 5px;
        line-height: 24px;
    }
    .btn_more span {
        display: none;
    }


    /* TITLE & SUBTITLE */
    #quick-bar h3,
    .main .ms01 .ilist a h4,
    .main .ms .title_area h3,
    .main .ms h4,
    .colgroup4 li h4,
    .psc_title h3,
    .psc .sec_title h4,
    .psc20 .step_title h4 {
        font-size: 20px;
    }
    .main .ms .title_area p {
        font-size: 13px;
    }
    .main .ms01 .ilist a p,
    .psc_title p {
        font-size: 14px;
    }

    /* PGAE */
    .psc112 .cont .left_area h4 {
        font-size: 18px;
    }
}


@media screen and (max-width: 375px) {
    /* iPhone 6 Portrait */
    /* IMAGE RESIZE */
    #header h1 a, #mobile_menu h1 a      {background-image: url('../img/common/slogo@2x.png')   !important;}

    #footer .top_area .fsns a.instagram  {background-image: url('../img/common/sns_01@2x.png')  !important;}
    #footer .top_area .fsns a.youtube    {background-image: url('../img/common/sns_02@2x.png')  !important;}
    #footer .top_area .fsns a.facebook   {background-image: url('../img/common/sns_03@2x.png')  !important;}

    .psc112 .cont .right_area li::before {background-image: url('../img/page/ico_check@2x.png') !important;}

    .psc121 .balloon::after              {background-image: url('../img/page/page12_11_bullet@2x.png') !important;}
    .psc121 .balloon1 .ico               {background-image: url('../img/page/page12_11_01@2x.png') !important;}
    .psc121 .balloon2 .ico               {background-image: url('../img/page/page12_11_02@2x.png') !important;}
    .psc121 .balloon3 .ico               {background-image: url('../img/page/page12_11_03@2x.png') !important;}

    .psc122 .rbox li::after              {background-image: url('../img/page/page12_12_bullet@2x.png') !important;}

    .mobile .psc123 .colspan1 {background-image: url('../img/page/page12_13_01@2x.png') !important;}
    .mobile .psc123 .colspan2 {background-image: url('../img/page/page12_13_02@2x.png') !important;}
    .mobile .psc123 .colspan3 {background-image: url('../img/page/page12_13_03@2x.png') !important;}
    .mobile .psc123 .colspan4 {background-image: url('../img/page/page12_13_04@2x.png') !important;}

    .mobile .psc124 .ilist1 .ico {background-image: url('../img/page/page12_14_01@2x.png');}
    .mobile .psc124 .ilist2 .ico {background-image: url('../img/page/page12_14_02@2x.png');}
    .mobile .psc124 .ilist3 .ico {background-image: url('../img/page/page12_14_03@2x.png');}
    .mobile .psc124 .ilist4 .ico {background-image: url('../img/page/page12_14_04@2x.png');}
    .mobile .psc124 .ilist5 .ico {background-image: url('../img/page/page12_14_05@2x.png');}

    /* VISUAL */
    #visual .planet1 {
        left: -25%;
    }
    #visual .planet2 {
        top: 10%;
        right: -17%;
    }
    #visual .planet3 {
        left: 8%;
        bottom: 7%;
    }
    #visual .planet4 {
        right: -30%;
        bottom: -40%;
    }
    #visual .meteor,
    #visual .planet {
        -webkit-transform: scale(0.425);
        -moz-transform: scale(0.425);
        transform: scale(0.425);
    }
    #visual .inner h2 {
        font-size: 18px;
    }

    .psc111 .right {
        font-size: 15px;
    }
    .psc124 h5 {
        font-size: 14px;
    }
}


@media screen and (max-width: 360px) {
    /* Mobile Portrait */
    /* VISUAL */
    .main #visual .txt_area {
        margin-left: 10px;
        margin-right: 10px;
    }
    #visual .meteor,
    #visual .planet {
        -webkit-transform: scale(0.35);
        -moz-transform: scale(0.35);
        transform: scale(0.35);
    }
    #visual .meteor2 {
        -webkit-animation: 12000ms ease-in infinite both pass;
        -moz-animation: 12000ms ease-in infinite both pass;
        animation: 12000ms ease-in infinite both pass;
    }
    #visual .meteor2 .stone {
        -webkit-animation: 12000ms ease-in infinite both rotate;
        -moz-animation: 12000ms ease-in infinite both rotate;
        animation: 12000ms ease-in infinite both rotate;
    }
}


@media screen and (max-width: 359px) {
    /* iPhone 5 Portrait */

    /* HEADER */
    #mobile_menu h1 {
        position: relative;
        width: 100%;
        height: 60px;
        margin: 0 auto;
    }


    /* FOOTER */
    #footer .top_area a {
        font-size: 12px;
    }


    /* VISUAL */
    .main #visual .txt_area p span {
        display: inline;
    }
    #visual .planet1 {
        left: -30%;
    }
    #visual .planet2 {
        top: 9%;
        right: -25%;
    }
    #visual .planet4 {
        right: -35%;
        bottom: -40%;
    }


    /* PAGE */
    .tab_menu button {
        font-size: 1em;
        letter-spacing: -0.05em;
    }


    .psc111 .right {
        font-size: 14px;
    }

    .psc20 .step01 .colgroup li,
    .psc20 .step02 .colgroup li,
    .psc20 .step04 .colgroup li {
        width: 19.2%;
        margin-left: 1%;
    }
    .psc20 .step01 .colgroup li:first-child,
    .psc20 .step02 .colgroup li:first-child,
    .psc20 .step04 .colgroup li:first-child {
        margin-left: 0;
    }
    .psc20 .step02 .colgroup li:last-child {
        letter-spacing: -0.1em;
    }
    .psc20 .step .toggle_btn,
    .psc20 .scon2 .step_choice {
        font-size: 12px;
    }


    /* MGRID */
    .mtype2 .item,
    .mtype2 li,
    .mtype3 .item,
    .mtype3 li {
        width: 100%;
        margin-top: 50px;
        margin-left: 0 !important;
        float: none;
        clear: both;
    }
    .mtype2 .item:nth-child(1),
    .mtype2 li:nth-child(1),
    .mtype3 .item:nth-child(1),
    .mtype3 li:nth-child(1){
        margin-top: 22px;
    }
}


@media screen and (max-width: 319px) {
    /* iPhone 5 Portrait */
    /* FOOTER */
    #footer .top_area a {
        font-size: 11px;
    }


    /* VISUAL */
    .main #visual .txt_area p {
        margin-bottom: 10px;
        font-size: 15px;
    }
    #visual .planet1 {
        left: -35%;
    }
    #visual .planet2 {
        top: 7%;
        right: -30%;
    }
    #visual .planet3 {
        left: 8%;
        bottom: 7%;
    }
    #visual .planet4 {
        right: -40%;
        bottom: -40%;
    }
    #visual .meteor2 {
        bottom: -22%
    }


    /* PAGE */
    .psc111 .right .cont span {
        display: inline;
    }

    .psc20 .step02 .colgroup li:last-child {
        letter-spacing: -0.12em;
    }
    .psc20 .scon3 .step_title a {
        width: 100%;
        margin-top: 2%;
        margin-left: 0;
        padding-left: 3px;
        padding-right: 3px;
        float: none;
    }
    .psc20 .scon3 .step_title a:first-child {
        margin-top: 0;
        margin-left: 0;
    }
}

.bookstar {
    position: fixed;
    display: block;
    width: 226px;
    height: 110px;
    margin-top: -210px;
    top: 50%;
    right: 0;
    z-index: 97;
    background: #ffd634 url('../img/common/bookstar.png') 0 0 no-repeat;
    background-size: cover;
    border-radius: 60px 0 0 60px;
    -webkit-transition: right 250ms ease;
    -moz-transition: right 250ms ease;
    transition: right 250ms ease;
}
.bookstar:hover,
.bookstar:focus {
    right: 0;
    -webkit-transition: right 250ms ease;
    -moz-transition: right 250ms ease;
    transition: right 250ms ease;
}
.mobile .bookstar {
    background-image: url('../img/common/bookstar2.png');
    background-size: 98px 50px;
}
.earth {
    position: fixed;
    display: block;
    width: 226px;
    height: 110px;
    margin-top: -95px;
    top: 50%;
    right: 0;
    z-index: 97;
    background: #e2e3fb url('../img/common/earth.png') 0 0 no-repeat;
    background-size: cover;
    border-radius: 60px 0 0 60px;
    -webkit-transition: right 250ms ease;
    -moz-transition: right 250ms ease;
    transition: right 250ms ease;
}
.earth:hover,
.earth:focus {
    right: 0;
    -webkit-transition: right 250ms ease;
    -moz-transition: right 250ms ease;
    transition: right 250ms ease;
}
.mobile .earth {
    background-image: url('../img/common/earth2.png');
    background-size: 98px 50px;
}
.e9mall {
    position: fixed;
    display: block;
    width: 226px;
    height: 110px;
    margin-top: 20px;
    top: 50%;
    right: 0;
    z-index: 97;
    background: #e2e3fb url('../img/common/e9mall.png') 0 0 no-repeat;
    background-size: cover;
    border-radius: 60px 0 0 60px;
    -webkit-transition: right 250ms ease;
    -moz-transition: right 250ms ease;
    transition: right 250ms ease;
}
.e9mall:hover,
.e9mall:focus {
    right: 0;
    -webkit-transition: right 250ms ease;
    -moz-transition: right 250ms ease;
    transition: right 250ms ease;
}
.mobile .e9mall {
    background-image: url('../img/common/e9mall2.png');
    background-size: 98px 50px;
}
@media screen and (max-width: 1680px) {
    .bookstar {
        right: -100px;
    }
    .earth {
        right: -100px;
    }
    .e9mall {
        right: -100px;
    }
}

@media screen and (max-width: 1024px) {
    .bookstar {
        position:fixed;
        display:block;
        width: 100px;
        height: 50px;
        margin-top: 20px;
        top: 0;
        right: 0;
        z-index:97;
        background:#ffd634 url('../img/common/bookstar2.png') center -0px no-repeat;
        background-size:98px 50px;
        border-radius: 30px 0 0 30px;
        -webkit-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
    }

    .bookstar:hover,
    .bookstar:focus {
        right:0;
        background-color:#7d80d2;
        -webkit-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
    }

    .earth {
        position:fixed;
        display:block;
        width: 100px;
        height: 50px;
        margin-top: 75px;
        top: 0;
        right: 0;
        z-index:97;
        background:#e2e3fb url('../img/common/earth2.png') center -0px no-repeat;
        background-size:98px 50px;
        border-radius: 30px 0 0 30px;
        -webkit-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
    }

    .earth:hover,
    .earth:focus {
        right:0;
        background-color:#7d80d2;
        -webkit-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
    }

    .e9mall {
        position: fixed;
        display: block;
        width: 100px;
        height: 50px;
        margin-top: 131px;
        top: 0;
        right: 0;
        z-index: 97;
        background: #e2e3fb url('../img/common/e9mall2.png') center -0px no-repeat;
        background-size: 98px 50px;
        border-radius: 30px 0 0 30px;
        -webkit-transition: right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition: right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition: right 250ms ease, background 250ms ease, opacity 250ms ease;
    }
    .e9mall:hover,
    .e9mall:focus {
        right: 0;
        background-color: #7d80d2;
        -webkit-transition: right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition: right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition: right 250ms ease, background 250ms ease, opacity 250ms ease;
    }

    .open_mobilemenu .bookstar {
        opacity:0;
        right:-100%;
        -webkit-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
    }

    .open_mobilemenu .g9mall {
        opacity:0;
        right:-100%;
        -webkit-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        -moz-transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
        transition:right 250ms ease, background 250ms ease, opacity 250ms ease;
    }
}

@media screen and (max-width: 359px) {
    .bookstar {
        right: 0;
    }
    .bookstar:hover,
    .bookstar:focus {
        right: 0;
    }
    .mobile .bookstar {
        background-image: url('../img/common/bookstar2.png');
        background-size: 98px 50px;
    }

    .earth {
        right: 0;
    }
    .earth:hover,
    .earth:focus {
        right: 0;
    }
    .mobile .earth {
        background-image: url('../img/common/earth2.png');
        background-size: 98px 50px;
    }

    .e9mall {
        right: 0;
    }
    .e9mall:hover,
    .e9mall:focus {
        right: 0;
    }
    .mobile .e9mall {
        background-image: url('../img/common/e9mall2.png');
        background-size: 98px 50px;
    }
}


@media screen and (max-width: 375px) {
    .mobile .bookstar {
        background-image: url('../img/common/bookstar2.png');
        background-size: 98px 50px;
    }
    .mobile .earth {
        background-image: url('../img/common/earth2.png');
        background-size: 98px 50px;
    }
    .mobile .e9mall {
        background-image: url('../img/common/e9mall2.png');
        background-size: 98px 50px;
    }
}

.e9mall {display: none !important;}