/* header */ #hd_wrap { position:relative; left:0; top:0; width:100%; z-index:50; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease; transition: all .3s ease; } #hd_wrap .hd_inner {position: relative; display: flex; justify-content: space-between; align-items: center; max-width:1820px; width: 100%; height:100%; margin:0 auto; z-index: 5; padding:0 60px; } /* hd_top */ #hd_top {width: 100%; display: flex; justify-content: space-between; background: #163072; height: 40px; } #hd_top ul {display: flex; height: 100%; line-height: 1;} #hd_top ul li {display: flex ;align-items: center; height: 100%;} #hd_top ul li::after {content: ''; display: block; width: 1px; height: 10px; background: rgba(255,255,255,.3); margin:0 20px;} #hd_top ul li:last-child::after {display: none;} #hd_top ul a {display: block; font-size: 13px; font-weight: 400; color:#fff; transition: opacity .3s; text-transform: uppercase;} #hd_top ul a:hover {opacity: .7;} #hd_top ul.login {padding: 0 55px; background: #0f2253; } /* hd */ #hd {width: 100%; height: 90px; background: #fff; border-bottom: 1px solid #ddd; position: relative;} #logo {display: flex;} #logo a { display:block; width:256px; height: 33px; background: url('../img/common/logo.png?v=230524') no-repeat; } #logo p {margin-left: 2px; font-size: 18px; font-weight: 800; color: #163072; line-height: 16px; position: relative; top: 2px;} #logo p span {font-size: 12px; letter-spacing: -.3px;} /* hd_nav */ #hd_nav { display: flex; height: 100%; align-items: center;} #hd_nav .gnb {display: flex; justify-content: flex-end; height: 100%; } #hd_nav .gnb > li { position: relative; display:block; margin-right:100px; height: 100%; } #hd_nav .gnb > li > a { display: flex; align-items: center; font-size:20px; height: 100%; color:#000; font-weight:400; word-break: keep-all; } #hd_nav .gnb > li > a::after { content:''; position: absolute; bottom: -1px; left:50%; transform:translateX(-50%); width: 0; height: 2px; background-color:#006bef; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s;} #hd_nav .gnb > li > a:hover::after, #hd_nav .gnb > li.active > a::after { width:120px; } /*snb*/ #hd_nav .gnb .snb { display: none; position: absolute; left:50%; transform:translateX(-50%); top:90px; height:70px; z-index:2; text-align: center; } #hd_nav .gnb > li:nth-child(n+4) .snb {transform: none; left: auto; right: 0; } #hd_nav .gnb .snb li a { display: flex; align-items: center; text-align: left; font-weight: 300; padding:0 25px; white-space: nowrap; font-size:16px; height: 70px; color:#333; transition: color .3s; } #hd_nav .gnb .snb li a:hover { color:#006bef; } #snb_bg { display: none; position: absolute; left:0; right:0; top:90px; height: 70px; width: 100%; background-color:#fff; border-bottom: 1px solid #ddd;} /* sitemap */ #hd_ham { position: relative; cursor: pointer; width: 23px; display: flex; flex-wrap:wrap;} #hd_ham span { display: block; width: 23px; height: 2px; background: #000; transition: all .3s ease; } #hd_ham span:nth-child(n+2) {margin-top: 5px; } #sitemap_wrap { position:fixed; left: 0; width: 100%; top: 0; height: 100vh; z-index: 100; display: none; } #sitemap_wrap .dimmed {position: absolute; left: 0; width: 100%; top: 0; height: 100%; background: rgba(0,0,0,0.6); z-index: 1; display: none;} #sitemap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); top: 50%; z-index: 2; width: 100%; max-width: 1420px; background: #fff; padding: 60px 60px 100px; overflow-y: auto; max-height: 100%; } #sitemap h2 {font-size: 55px; color:#000; font-weight: 700; white-space: nowrap;} #sitemap .close {position: absolute; right: 60px;top:60px; font-size: 30px;color:#000; } #sitemap .s_gnb {margin-top: 100px; display: flex; flex-wrap:wrap; } #sitemap .s_gnb > li {border-right: 1px solid #ddd; padding: 10px 30px; width: calc(100% / 5);} #sitemap .s_gnb > li > a {font-size:20px; color:#000; font-weight:400; transition: opacity .3s;} #sitemap .s_gnb > li > a:hover {opacity: .6;} #sitemap .s_gnb .s_snb {margin-top:30px; } #sitemap .s_gnb .s_snb li a {font-size:16px; color:rgba(0,0,0,.6); line-height: 1.5; transition: color .3s; } #sitemap .s_gnb .s_snb li a:hover {color:#000; } @media screen and (min-width: 1025px) { #sitemap .s_gnb > li:first-child {padding-left: 0;} #sitemap .s_gnb > li:last-child {border-right: 0; padding-right: 0;} #sitemap .s_gnb .s_snb li:nth-child(n+2) {margin-top: 15px;} } /* mobile */ #mob_ham { position: absolute; cursor: pointer; width: 23px; display: none; flex-wrap:wrap; right: 20px; top:20px; z-index: 6;} #mob_ham span { display: block; width: 23px; height: 2px; background: #000; transition: all .3s ease; } #mob_ham span:nth-child(n+2) {margin-top: 5px; } #mob_sitemap_wrap {position:fixed; left: 0; width: 100%; top: 0; height: 100vh; z-index: 100; display: none; } #mob_sitemap_wrap .dimmed {position: absolute; left: 0; width: 100%; top: 0; height: 100%; background: rgba(0,0,0,0.6); z-index: 1; display: none;} #mob_sitemap {padding: 60px 30px 30px; position: absolute; right: 0; width: 100%; height: 100%; top:0; max-width: 320px; background: #fff; z-index: 2;} #mob_sitemap .close {font-size: 25px; color:#000; position: absolute; right: 20px; top:12px; } #mob_sitemap .btns {display: flex; justify-content: space-between; line-height: 1; flex-wrap:wrap;} #mob_sitemap .btns li {width: calc(50% - 3px); } #mob_sitemap .btns li a {display: block; width: 100%; padding: 10px; background: #163072; color:#fff; text-align: center; font-size: 13px; text-transform: uppercase;} #mob_sitemap .btns li:nth-child(n+3) {margin-top: 6px;} #mob_sitemap .btns li:nth-child(n+3) a {background-color: #0f2253;} #mob_sitemap .m_gnb {margin-top:20px; line-height: 1.5;} #mob_sitemap .m_gnb > li {width: 100%; } #mob_sitemap .m_gnb > li > a {font-size: 17px; padding:15px 10px; border-bottom: 1px solid #ddd;width: 100%; display: block; font-weight: 400; color:#000; position: relative;} #mob_sitemap .m_gnb > li > a i {position: absolute; right: 0; top:16px; color:#ddd; font-size: 22px; display: none; transition: transform .4s;} #mob_sitemap .m_gnb > li.on > a i {transform: rotateX(-180deg);} #mob_sitemap .m_gnb > li:last-child > a {border-bottom: 0;} #mob_sitemap .m_gnb .m_snb {margin-top: 0; display: none;} #mob_sitemap .m_gnb .m_snb li a {font-size: 14px; padding: 10px 15px; background: #f7f7f7; border-bottom: 1px solid #fff; display: block; color:#333; font-weight: 300; } /* header responsive */ @media screen and (max-width: 1820px) { #hd_wrap .hd_inner {padding: 0 50px; } #hd_nav .gnb > li {margin-right:70px;} #sitemap {padding: 60px 50px 100px; } } @media screen and (max-width: 1420px) { #hd_top {height: 30px;} #hd_top ul a {font-size: 11px;} #hd_top ul.login {padding: 0 20px;} #hd {height: 80px;} #hd_nav .gnb > li {margin-right:50px;} #hd_nav .gnb > li > a {font-size: 17px;} #hd_nav .gnb .snb li a {padding: 0 10px; font-size: 14px;} #hd_nav .gnb .snb, #snb_bg {top:80px;} #sitemap {top:0; transform: translate(-50%,0); padding: 50px; height: 100%;} #sitemap h2 {font-size: 45px; } #sitemap .close {top:50px; right: 50px; } #sitemap .s_gnb {margin-top: 30px;} #sitemap .s_gnb > li {width: 33.3%; flex:auto; padding:30px;} #sitemap .s_gnb > li:nth-child(3n) {padding-right: 0; border-right: 0;} #sitemap .s_gnb > li:nth-child(4n) {padding-left: 0;} #sitemap .s_gnb > li:nth-child(n+4) {border-top:1px solid #ddd;} } @media screen and (max-width: 1024px) { #hd_wrap {position: fixed; } #hd_wrap .hd_inner {padding: 0 20px; justify-content: center;} #hd_top, #hd_nav, #sitemap_wrap {display: none; } #hd_wrap #logo a {width: 190px; height: 30px; background-size: contain; background-position: center;} #hd {height: 60px;} #mob_ham {display: flex;} #logo p {font-size: 12px; margin-left: -7px; line-height: 1.1; top: 1px} #logo p span {font-size: 10px;} } /* //header end */ /* content1 */ #c1_wrap {width: 100%; display: flex;} #c1_wrap > article {width: 50%; } #c1_wrap .visual {text-align: center; position: relative; } #main_vis_slider {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} #main_vis_slider .slick-list, #main_vis_slider .slick-track {height: 100%;} #main_vis_slider .slick-slide {background: url('../img/main/main1.jpg') 50%/cover no-repeat; outline: none; width: 100%; height: 100%;} #main_vis_slider .slick-slide.img02 {background-image: url('../img/main/main2.jpg');} #c1_wrap .visual .title {position: relative; z-index: 2; padding-top: 105px; } #c1_wrap .visual .title h3 {font-size: 24px; font-weight: 500; color:rgba(255, 255, 255, 0.6); letter-spacing: 4.7px;} #c1_wrap .visual .title h2 {position: relative; font-size: 54px; font-weight: 300; color:#fff; line-height: 1; margin:40px 0 35px; display: inline-block; padding: 0 70px;} #c1_wrap .visual .title h2::before {content: '' ;display: block; width: 47px; height: 40px; position: absolute; left:0; top:-25px; background: url('../img/main/c1_quote1.png') 50%/contain no-repeat;} #c1_wrap .visual .title h2::after {content: '' ;display: block; width: 47px; height: 40px; position: absolute; right:0; top:-25px; background: url('../img/main/c1_quote2.png') 50%/contain no-repeat;} #c1_wrap .visual .title p {font-size: 22px; font-weight: 400; color:#fff; } #c1_wrap .cont .flex {display: flex;} #c1_wrap .cont .flex > div {width: 50%;} #c1_wrap .cont .icon_tit {display: flex; align-items: center; justify-content: space-between; line-height: 1;} #c1_wrap .cont .icon_tit > div {display: flex; align-items: center;} #c1_wrap .cont .icon_tit .icon {flex-shrink: 0; margin-right: 20px; } #c1_wrap .cont .icon_tit h2 {font-size: 24px; font-weight: 700; color:#fff; } #c1_wrap .cont .icon_tit .btn {display: flex;align-items: center;justify-content: center; width: 36px; height: 36px; border:1px solid #fff; } #c1_wrap .cont .icon_tit .btn .plus {transition: all .3s; display: block; width: 17px; height: 17px; background: url('../img/main/c1_plus.png') 50%/contain no-repeat;} #c1_wrap .cont .icon_tit .btn:hover .plus {transform: rotate(90deg);} #c1_wrap .cont .icon_tit .btn:hover {background: #006bef !important; border-color: #006bef !important; } #c1_wrap .cont .btns {background: url('../img/main/c1_btns_bg.jpg') 50%/cover no-repeat; text-align: center; padding:50px 0 0;} #c1_wrap .cont .btns h2 {font-size: 45px; font-weight: 700; color:#fff; line-height: 37px; } #c1_wrap .cont .btns h2 span {font-size: 20px; } #c1_wrap .cont .btns ul {display: flex; flex-wrap:wrap; border-top: 1px solid rgba(255,255,255,.2); margin-top: 40px; } #c1_wrap .cont .btns ul li {width: 50%;} #c1_wrap .cont .btns ul li:nth-child(odd) {border-right: 1px solid rgba(255,255,255,.2);} #c1_wrap .cont .btns ul li:nth-child(n+3) {border-top: 1px solid rgba(255,255,255,.2);} #c1_wrap .cont .btns ul li a {display: block; padding: 25px 0; width: 100%; transition: background-color .3s ease;} #c1_wrap .cont .btns ul li a i {display: block; height: 42px; line-height: 42px; margin-bottom: 20px; transition: transform .5s ease;} #c1_wrap .cont .btns ul li a p {font-size: 18px; font-weight: 700; color:#fff; line-height: 1; } /* hover */ #c1_wrap .cont .btns ul li a:hover {background-color:rgba(0,59,131,.45);} #c1_wrap .cont .btns ul li a:hover i {transform: rotateY(180deg);} #c1_wrap .cont .notice {padding: 50px 40px 0;} #c1_wrap .cont .notice .icon_tit h2 {color:#000; } #c1_wrap .cont .notice .icon_tit .btn {background: #0b152a; border-color: #0b152a; } #c1_wrap .cont .notice ul {width: 100%; border-top:1px solid #ddd; margin-top: 25px; } #c1_wrap .cont .notice ul li {width: 100%; padding: 18px 15px; line-height: 1.1; border-bottom:1px solid #ddd;} #c1_wrap .cont .notice ul li a {display: block; width: 100%; font-size: 15px; font-weight: 300; color:#666; padding-left:14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; transition: color .3s;} #c1_wrap .cont .notice ul li a::before {content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top:5px; background: #006bef; } #c1_wrap .cont .notice ul li a:hover {color:#006bef; } #c1_wrap .cont .flex2 > div { padding: 60px 55px 90px; } #c1_wrap .cont .flex2 p {font-size: 18px; font-weight: 300; color:rgba(255, 255, 255, 0.7); word-break: keep-all; line-height: 32px; margin-top: 25px; } #c1_wrap .cont .qna {background: url('../img/main/c1_qna_bg.png') 100% 100% no-repeat #272a31;} #c1_wrap .cont .guide {background: url('../img/main/c1_guide_bg.png') 100% 100% no-repeat #3c3e44;} #c1_wrap .mb_view {display: none;} /* content1 responsive */ @media screen and (max-width: 1820px) { #c1_wrap .visual .title {padding:105px 50px 0; } #c1_wrap .visual .title h2 {line-height:1.3;} #c1_wrap .cont .icon_tit .icon {margin-right: 12px;} #c1_wrap .cont .flex2 > div {padding:50px 40px;} } @media screen and (max-width: 1280px) { #c1_wrap {display: block;} #c1_wrap > article {width: 100%; } #c1_wrap .visual {min-height: 550px;} #c1_wrap .visual .title {padding: 105px 50px; } #c1_wrap .mb_view {display: block;} #c1_wrap .pc_view {display: none;} } @media screen and (max-width: 1024px) { #c1_wrap {margin-top: 60px;} #c1_wrap .visual .title {padding: 105px 30px;} #c1_wrap .visual .title h3 {font-size: 18px; } #c1_wrap .visual .title h2 {font-size: 40px; margin: 30px 0 25px; padding: 0 50px; } #c1_wrap .visual .title h2::before { height: 30px; top:-15px;} #c1_wrap .visual .title h2::after {height: 30px; top:-15px;} #c1_wrap .visual .title p {font-size: 16px;} #c1_wrap .cont .icon_tit h2 {font-size: 18px;} #c1_wrap .cont .icon_tit .icon img {width: 30px;} #c1_wrap .cont .btns h2 {font-size: 35px; line-height: 1;} #c1_wrap .cont .btns h2 span {font-size: 50%;} #c1_wrap .cont .btns ul {margin-top: 30px; } #c1_wrap .cont .btns ul li a {padding: 30px;} #c1_wrap .cont .btns ul li a p {font-size: 16px;} #c1_wrap .cont .notice {padding: 50px 30px 0;} #c1_wrap .cont .notice ul {margin-top: 20px;} #c1_wrap .cont .notice ul li {padding: 15px 10px;} #c1_wrap .cont .notice ul li a {font-size: 13px; padding-left: 10px;} #c1_wrap .cont .notice ul li a::before {top:3px;} #c1_wrap .cont .flex2 > div {padding: 40px 30px;} #c1_wrap .cont .flex2 p {font-size: 15px; line-height: 1.5;} } @media screen and (max-width: 640px) { #c1_wrap .visual {display: flex; align-items: center; justify-content: center; min-height: 400px; } #c1_wrap .visual .title {padding: 0 20px; } #c1_wrap .visual .title h3 {font-size: 14px; } #c1_wrap .visual .title h2 {font-size: 32px; margin: 20px 0 20px; padding: 0 40px; } #c1_wrap .visual .title h2::before { height: 20px; top:-5px;} #c1_wrap .visual .title h2::after {height: 20px; top:-5px;} #c1_wrap .visual .title p {font-size: 14px; line-height: 1.5;} #c1_wrap .cont .flex1 {display: block;} #c1_wrap .cont .flex1 > div {width: 100%; } #c1_wrap .cont .notice {padding: 30px 20px;} #c1_wrap .cont .icon_tit .icon img {width: 25px;} #c1_wrap .cont .icon_tit .btn {width: 30px; height: 30px;} #c1_wrap .cont .icon_tit .btn .plus {width: 12px; height: 12px;} #c1_wrap .cont .btns {padding: 40px 0 0 ;} #c1_wrap .cont .btns h2 {font-size: 28px; } #c1_wrap .cont .btns ul li a {padding:20px;} #c1_wrap .cont .btns ul li a i {margin-bottom: 15px; height: auto; line-height: 1;} #c1_wrap .cont .btns ul li a i img {height: 30px;} #c1_wrap .cont .btns ul li a p {font-size: 14px;} #c1_wrap .cont .notice ul li {padding:12px 10px;} #c1_wrap .cont .notice ul li:nth-child(n+4) {display: none;} #c1_wrap .cont .flex2 > div {padding: 30px 20px;} #c1_wrap .cont .flex2 p {display: none; } #c1_wrap .cont .flex2 .icon_tit {flex-direction: column; align-items: flex-start;} #c1_wrap .cont .flex2 .icon_tit .btn {align-self: flex-end; margin-top: 30px;} } @media screen and (max-width: 480px) { #c1_wrap .cont .icon_tit h2 {font-size: 16px;} #c1_wrap .cont .icon_tit .icon img {width: 20px;} } /* //content1 end */ /* content2 */ #c2_wrap {width: 100%; padding: 60px 0; background: url('../img/main/c2_bg.png') 0% repeat #fff; text-align: center; overflow: hidden; } #c2_wrap .c_inner {width: 100%; max-width: 1420px; margin:0 auto; position: relative; padding: 0 60px;} #c2_wrap .list {display: flex;} #c2_wrap .list li {flex:1; } #c2_wrap .list a {display: block; width: 100%; padding: 12px 0; border-right: 1px solid #ddd; } @media screen and (min-width: 1025px) { #c2_wrap .list li:first-child a {border-left: 1px solid #ddd;} } #c2_wrap .list i {transition: transform .5s; height: 46px; line-height: 1; display: block; margin:0 auto; } #c2_wrap .list p {font-size: 18px; font-weight: 400; color:#585858; line-height: 1; margin-top: 20px; transition: color .3s;} /* hover */ #c2_wrap .list a:hover i {transform: rotateY(180deg);} #c2_wrap .list a:hover p {color:#000; } /* content1 responsive */ @media screen and (max-width: 1420px) { #c2_wrap .c_inner {padding: 0 50px;} } @media screen and (max-width: 1024px) { #c2_wrap {padding: 30px 0;} #c2_wrap .c_inner {padding: 0 30px;} #c2_wrap .list {flex-wrap:wrap; } #c2_wrap .list li {flex:auto; width: 33.3%;} #c2_wrap .list li a {padding: 20px; } #c2_wrap .list li:nth-child(3n) a {border-right: 0;} #c2_wrap .list li:nth-child(n+4) a {border-top: 1px solid #ddd;} #c2_wrap .list p {font-size: 16px; } } @media screen and (max-width: 640px) { #c2_wrap {padding: 20px 0;} #c2_wrap .c_inner {padding: 0 20px;} #c2_wrap .list li a {padding:15px 10px; } #c2_wrap .list i { height: 35px;} #c2_wrap .list i img {height: 100%;} #c2_wrap .list p {font-size: 13px; margin-top: 15px;} } @media screen and (max-width: 480px) { #c2_wrap .list li a {padding:10px; } #c2_wrap .list p { font-size: 12px;} } /* //content2 end */ /* footer */ #ft_logo {display: flex; justify-content: center; align-items: center;} #ft_logo img {height: 100%;} #ft_logo .f_logo_p {font-size: 18px; font-weight: 800; margin: 0 0 0 3px; line-height: 1.4; text-align: left;} #ft_logo .f_logo_p .p_in_txt {letter-spacing: -.3px; font-size: 12px; color: #fff; margin-top: 0;} #ft_wrap {text-align: center; background: #0b152a; padding: 70px 0 85px;} #ft_wrap .ft_inner {width: 100%; max-width: 1420px; margin:0 auto; position: relative; padding: 0 60px; } #ft_wrap p {font-size: 14px; font-weight: 200; color:#fff; line-height: 28px; word-break: keep-all; margin-top: 30px;} #ft_wrap p span {display: block; margin-top: 15px; color:rgba(255, 255, 255, 0.3); line-height: 1;} #ft_wrap .mob {display: none;} #ft_wrap .pc {display: block;} #top_btn {position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid #333; color: #333; font-size: 15px; background: rgba(255,255,255,0.5); z-index: 10; transition: .3s; pointer-events: none; opacity: 0;} #top_btn:hover {border-color: #006bef; background: #006bef; color: #fff;} .scrolled #top_btn {opacity: 1; pointer-events: auto;} /* footer responsive */ @media screen and (max-width: 1420px) { #ft_wrap .ft_inner {padding: 0 50px;} } @media screen and (max-width: 1024px) { #ft_wrap {padding:50px 0;} #ft_wrap .ft_inner {padding: 0 30px;} #ft_wrap .mob {display: block;} #ft_wrap .pc {display: none;} #ft_logo img {height: 25px;} #ft_wrap p {font-size: 12px; line-height: 22px; margin-top: 20px;} #ft_wrap p span {line-height: 22px; margin-top: 10px;} #top_btn {width: 40px; height: 40px; right: 15px; bottom: 15px;} #ft_logo .f_logo_p {position: relative; top: 5px; font-size: 11px; line-height: 1;} #ft_logo .f_logo_p .p_in_txt {font-size: 10px; margin-top: -1px;} } @media screen and (max-width: 640px) { #ft_wrap {padding:40px 0;} #ft_wrap .ft_inner {padding: 0 20px;} #ft_logo .f_logo_p {font-size: 11px;} } /* //footer end */ /* sub common */ .subpage {overflow: hidden; } .subpage > section {padding:100px 0; position: relative; } .subpage > section:first-child {padding-top: 0; } .subpage > section:nth-child(even) {background: #f7f7f7; } .subpage > section.board {background: #fff;} /* div -> tab page */ .subpage > div:first-child {padding-top: 0;} .subpage > div > section {padding: 100px 0; background: #f7f7f7;} .subpage > div > section:nth-child(even) {background: #fff;} .sub_inner {width: 100%; max-width: 1420px; margin:0 auto; position: relative; padding: 0 60px; } .sub_tit {margin-bottom: 30px;} .sub_tit.flex {display: flex;} .sub_tit h2 {font-size: 28px; font-weight: 800; color:#000; word-break: keep-all; position: relative; padding-left: 25px; line-height: 1.5;} .sub_tit h2::before {content: ''; display: block; width: 14px; height: 20px; position: absolute; left: 0; top:10px; background: url('../img/common/s_tit_icon.png') 50% no-repeat;} .sub_tit.flex p {margin-left: 20px; padding-top: 2px;} .sub_p {font-size: 18px; font-weight:300; line-height: 33px; word-break: keep-all; color:#000; } .sub_p16 {font-size: 16px; font-weight: 300; line-height: 28px;} .sub_p.fw400 {font-weight: 400;} .blue {color: #006bef;} .text_left {text-align: left !important; } .dot_list li {position: relative; padding-left: 20px; font-size: 18px; font-weight: 300; color:#555; line-height: 33px; } .dot_list li:nth-child(n+2) {margin-top: 12px;} .dot_list li::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 0; top:12px; background: #555555; } .dot_list li b {font-weight: 600; color:#000; } .add_list li {font-size: 18px; font-weight: 300; color:#555; line-height: 33px; } .add_list li b {font-weight: 800; color:#000; font-size: 24px;} .add_list li span {font-weight: 600; color:#000; } .sub_table table {border-collapse: collapse; width: 100%; border-top: 3px solid #006bef; line-height: 1.65; overflow-x: auto;} .sub_table table th.b_black {border: 1px solid #0b152a;} .sub_table table thead th {padding:15px; font-size:20px; font-weight: 500; color:#fff; background-color: #0b152a; border:1px solid rgba(255,255,255,.3); } .sub_table table tbody th {font-size:17px; font-weight: 300; color:#555; border:1px solid #ddd; padding:15px; text-align: center; background-color: #f7f7f7; } .sub_table table tbody td {font-size:17px; font-weight: 300; color:#555; border:1px solid #ddd; padding:15px; text-align: center; background-color: #fff; word-break: keep-all;} .sub_table.no_bor table tr td:first-child {border-left: 0;} .sub_table.no_bor table tr td:last-child {border-right: 0;} .sub_table .t_th_bg {background: #1d3975!important; } .sub_table .t_bg {background: #dfe9ff; border: 1px solid #b5c5f1;} .table_arrow {margin-top: 5px; display: none; justify-content: flex-end; } .table_arrow i {font-size: 25px; color:#0b152a; } .tab {display: none;} .tab.active {display: block;} .tab_wrap {width: 100%; position: relative; z-index: 2; text-align: center; } .tab_wrap::before {content: ''; display:block; width: 100%; height: 50%; background: #f7f7f7; position: absolute; z-index: -1; left: 0; bottom: 0; } .tab_wrap ul {display: flex; width: 100%; } .tab_wrap ul li {flex:1;} .tab_wrap ul li a {display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color:#999; transition: all .3s; cursor: pointer; line-height: 1.2; padding: 15px 10px ; border:1px solid #ddd; border-right:0; background: #fff; word-break: keep-all; height: 100%;} .tab_wrap ul li:last-child a {border-right: 1px solid #ddd;} .tab_wrap ul li a:hover {background: #f5f5f5; } .tab_wrap ul li a.active {border-color: #0b152a; background-color: #0b152a; color:#fff; } /* board */ .bo_table table {border-collapse: collapse; width: 100%; border-top: 3px solid #006bef; line-height: 1.5; } .bo_table table thead th {padding:17px 15px; font-size:18px; font-weight: 500; color:#fff; background-color: #0b152a; line-height: 1; } .bo_table table tbody td {font-size:17px; font-weight: 300; color:#555; border-bottom:1px solid #ddd; padding:15px; text-align: center; background-color: #fff; word-break: break-all;} .bo_table table tbody td .subj {transition: color .3s;} .bo_table table tbody td .subj:hover {color:#006bef;} .bo_table table tbody td .download {color:#9e9e9e; transition: color .3s; font-size: 130%;} .bo_table table tbody td .download:hover {color:#0b152a; } .bo_table table tbody td.num {font-size: 15px; white-space: nowrap;} .bo_table table tbody td.num span {display: inline-block; line-height: 1; color:#fff; font-weight: 200; padding: 5px 10px; border-radius: 3px; background: #006bef; } .search_wrap {display: flex; justify-content: flex-end; margin-bottom: 40px;} .search_wrap > div {width: 100%; max-width: 500px; display: flex; justify-content: space-between;} .search_wrap select {width: 100px; border:1px solid #ddd; height: 40px; font-size: 14px; font-weight: 300; color:#333; padding: 0 0 0 12px; appearance: none; background: url('../img/common/select.png') no-repeat right 12px center;} .search_wrap input {width: calc(100% - 196px); border-radius: 0; box-shadow: none; border:1px solid #ddd; padding: 0 12px; font-size: 16px; font-weight: 300; color:#333; } .search_wrap input::placeholder {color:#aaa; } .search_wrap button {width: 80px; background: #006bef; transition: all background-color .3s ; text-align: center; font-size: 16px; font-weight: 300; color:#fff; line-height: 1;} .search_wrap button i {margin-right: 5px;} .search_wrap button:hover {background-color:#0b152a; } .pg_wrap {display: flex; width: 100%; justify-content: flex-end; margin-top: 30px; text-align: center; line-height: 1; flex-wrap:wrap; } .pg_wrap > div {display: flex; flex-wrap:wrap;} .pg_wrap a {display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; background: #f7f7f7; margin: 3px; width: 30px; height: 30px; color:#999; transition: all .3s;} .pg_wrap .current {background: #0b152a; color:#fff; font-weight: 500; pointer-events: none; } .pg_wrap a:hover {background-color: #f1f1f1; } .chk_wrap {position: relative; width: 15px; height: 15px; margin:0 auto;display: block;} .chk_box {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden;} .chk_box + label span {position:absolute;top:0;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #ccc;border-radius:3px; } .chk_box:checked + label span {background:url('../img/common/check.png') no-repeat 50% 50% #0b152a; border-color: #0b152a; background-size: 10px;} /* all chk */ .all_chk { width: auto; height: auto; margin:0 0 10px; float:left;} .all_chk .chk_box + label {padding-left:20px; display: inline-block; color:#555; position:relative;} /* viewpage */ .view_cont_wrap .subj {width: 100%; line-height: 1.3; background: #999; font-size: 20px; font-weight: 600; color:#fff; padding: 15px 25px; } .view_cont_wrap .info {display: flex; width: 100%; border-bottom:1px solid #ddd; padding: 20px 25px; flex-wrap:wrap;} .view_cont_wrap .info li {font-size: 17px; font-weight: 200; color:#555; display: flex; white-space: nowrap; margin-right: 50px;} .view_cont_wrap .info li:last-child {margin-right: 0; } .view_cont_wrap .info li h3 {display: block; font-weight: 500; color:#333; margin-right: 12px;} .view_cont_wrap .cont {padding: 30px 0; font-size: 16px; font-weight: 300; color:#555; white-space: pre-line; min-height: 300px; line-height: 1.65;} .view_cont_wrap .file {display: flex; align-items: center; background: #f7f7f7; padding: 20px; border-bottom: 1px solid #c8cecf; } .view_cont_wrap .file h3 {font-size: 18px; font-weight: 400; color:#000; flex-shrink: 0; margin-right: 25px; } .view_cont_wrap .file ul li:nth-child(n+2) {margin-top: 5px;} .view_cont_wrap .file ul a {font-size: 16px; font-weight: 400; color:#006bef; transition: color .3s; line-height: 1.3; text-decoration: underline; } .view_cont_wrap .file ul a i {font-size: 130%; margin-right: 8px; color:#9e9e9e; position: relative; top:3px;} .view_cont_wrap .file ul a:hover {color:#0b152a; } .viewpage .btn_wrap {display: flex; justify-content: flex-end; width: 100%; margin-top: 30px; } .viewpage .btn_wrap ul {display: flex; text-align: center;} .viewpage .btn_wrap ul li {margin-left: 10px;} .viewpage .btn_wrap ul li:first-child {margin-left: 0;} .viewpage .btn_wrap a {display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; background: #006bef; transition: all .3s; font-size: 16px; font-weight: 400; color:#fff; line-height: 1;} .viewpage .btn_wrap a.wr {background-color: #c3c3c3;} .viewpage .btn_wrap a.edit {background-color: #999;} .viewpage .btn_wrap a i {margin-right: 5px; position: relative;top:-2px;} .viewpage .btn_wrap a:hover {background-color:#0b152a;} .yt_wrap {width: 100%; position: relative; height:0; padding-bottom: 56.25%;} .yt_wrap iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .num_list li {font-size: 18px; display: flex; align-items: flex-start; font-weight: 300; color:#555; line-height: 1.65;} .num_list li:nth-child(n+2) {margin-top: 5px;} .num_list li b {flex-shrink: 0; white-space: nowrap; color:#006bef; margin-right: 5px;} /* writepage */ .writepage .input_item { display: flex; align-items: center; } .writepage .input_item + .input_item { margin-top: 22px; } .writepage .input_item .input_title { width: 70px; font-size: 22px; font-weight: 600; } .writepage .input_item .input_desc { width:calc(100% - 70px); height: 45px; } .writepage .input_desc input { display: block; width:100%; height: 100%; border:1px solid #ddd; padding:0 20px; font-size: 16px; color:#000; } .writepage .input_desc input::placeholder { font-size: 16px; font-weight: 300; color: #999; } .writepage .input_desc select { display: block; width:100%; height: 100%; border:1px solid #ddd; padding:0 20px; font-size: 16px; appearance: none; background: url(../img/common/select.png) no-repeat right 12px center; color: #999; cursor: pointer; } .writepage .input_desc select option { color:#000; } .writepage select option[class="plcholder"][disabled] { display: none; } .writepage .file_atch { display: flex; align-items: center; margin:38px 0; } .writepage .file_item + .file_item { margin-left: 13px; } .writepage .btn_type { display: block; width:200px; height: 45px; line-height: 45px; text-align: center; color:#fff; font-size: 16px; font-weight: 300; } .writepage .btn_type i { font-size: 20px; margin-right: 10px; position:relative; top:2px; } .writepage .btn_type.black { background:#0b152a; } .writepage .btn_type.navy { background:#0f2253; } .writepage .btn_type.gray { background:#999; } .writepage .btn_type.blue { background:#006bef; } .writepage .btn_type:hover { background:#222; } .writepage .btn_area { border-top: 1px solid #ddd; padding:35px 0; } .writepage .btn_list { display: flex; align-items: center; } .writepage .btn_list li + li { margin-left: 13px; } /* 준비중페이지 */ .prepare {background: #f7f7f7; text-align: center; min-height: 550px; display: flex; align-items: center; justify-content: center; padding:0 !important;} .prepare h2 {font-size: 23px; font-weight: 600; color:#a6a6a6;} .viewpage .bo_table {margin-top: 70px;} .viewpage .bo_table button {color:#fff;} /* .viewpage .bo_table button i {transition: transform .4s;} */ .viewpage .bo_table tbody tr:nth-child(n+2) {display: none;} .viewpage .bo_table.active button i {transform:rotate(180deg);} .viewpage .bo_table.active tbody tr:nth-child(n+2) {display: table-row;} /* sub common responsive */ @media screen and (max-width: 1420px) { .subpage > section {padding:90px 0; } .subpage > div > section {padding:90px 0; } .sub_inner {padding: 0 50px;} } @media screen and (max-width: 1024px) { .subpage > section {padding:50px 0; } .subpage > div > section {padding:50px 0; } .sub_inner {padding: 0 30px;} .sub_tit {margin-bottom: 20px;} .sub_tit h2 {font-size: 24px; padding-left: 20px;} .sub_tit h2::before {width: 12px; background-size: contain; top:7px;} .sub_tit.flex p {margin-left: 0;} .sub_tit.flex {flex-direction: column;} .sub_p {font-size: 16px; line-height: 1.65;} .sub_p16 {font-size: 14px; line-height: 1.65;} .dot_list li {font-size: 16px; line-height: 1.65; } .dot_list li::before {top:8px;} .add_list li {font-size: 16px; line-height: 1.65; } .add_list li::before {top:8px;} .sub_table {overflow-x: auto;} .sub_table table thead th {padding: 10px; font-size: 16px;} .sub_table table tbody th, .sub_table table tbody td {padding: 10px; font-size: 14px;} .tab_wrap ul li a {font-size: 15px; } .bo_table table thead th {padding: 12px 10px; font-size: 15px;} .bo_table table tbody td {padding: 10px; font-size: 14px;} .bo_table table tbody td.num {font-size: 11px;} .bo_table table tbody td.num span {padding:3px 5px;} /* view */ .view_cont_wrap .subj { font-size: 18px; padding: 15px 20px;} .view_cont_wrap .info {padding: 15px 20px;} .view_cont_wrap .info li {font-size: 15px;margin-right: 30px;} .view_cont_wrap .info li h3 {margin-right: 5px;} .view_cont_wrap .cont {font-size: 15px; } .view_cont_wrap .file h3 {font-size: 16px;margin-right: 15px;} .view_cont_wrap .file ul a {font-size: 14px;} .viewpage .bo_table {margin-top: 50px;} /* write */ .writepage .input_item .input_title { font-size: 19px; } .prepare {min-height: 350px;} .prepare h2 {font-size: 18px;} .num_list li {font-size: 15px;} } @media screen and (max-width: 640px) { .sub_inner {padding: 0 20px;} .sub_p {font-size: 14px; } .sub_p16 {font-size: 13px;} .dot_list li {font-size: 14px; padding-left: 12px;} .dot_list li::before {width:4px; height: 4px;} .add_list li {font-size: 14px; padding-left: 12px;} .add_list li::before {width:4px; height: 4px;} .sub_tit {margin-bottom: 15px;} .sub_tit h2 {font-size: 20px; padding-left:17px;} .sub_tit h2::before {width: 10px; top:5px;} .sub_table.res {width: 100%; overflow-x: auto;} .sub_table.res table {width:100%; max-width: 640px; min-width: 100%; white-space: nowrap;} .sub_table table thead th {font-size: 14px;} .sub_table table tbody th, .sub_table table tbody td {font-size: 12px;} .table_arrow:not(.board) {display: flex;} .tab_wrap ul li a {font-size: 12px; padding: 10px 5px;} .search_wrap {margin-bottom: 20px;} .search_wrap select {height: 35px; font-size: 12px;width: 60px; padding: 0 0 0 3px; background: url('../img/common/select.png') no-repeat right 5px center;} .search_wrap input {font-size: 13px; width: calc(100% - 120px);} .search_wrap button {font-size: 12px;width: 50px;} .search_wrap button i {margin: 0;} .bo_table table {line-height: 1.3;} .bo_table table thead th { font-size: 13px;} .bo_table table tbody td {padding:8px; font-size: 12px;} .pg_wrap {margin-top: 20px;} /* view */ .view_cont_wrap .subj { font-size: 16px; padding: 15px ;} .view_cont_wrap .info {padding: 15px;} .view_cont_wrap .info li {font-size: 14px;margin:3px 15px 3px 0;} .view_cont_wrap .file {padding: 15px;} .view_cont_wrap .file h3 {font-size: 14px; } .view_cont_wrap .cont {font-size: 13px;} .view_cont_wrap .file ul a {font-size: 13px;} .view_cont_wrap .file ul a i {margin-right: 5px;} .viewpage .btn_wrap {margin-top: 20px;} .viewpage .btn_wrap ul li {margin-left: 5px;} .viewpage .btn_wrap a {width: 80px; height: 35px; font-size: 13px;} .viewpage .btn_wrap a i {top:0;} /* write */ .writepage .input_item + .input_item { margin-top: 15px; } .writepage .input_item .input_title { width: 45px; font-size: 15px; } .writepage .input_item .input_desc { width: calc(100% - 45px); height: 40px; } .writepage .input_desc input { font-size: 14px; } .writepage .input_desc input::placeholder { font-size: 14px; } .writepage .input_desc select { font-size: 14px; } .writepage .btn_type { width: 135px; height: 40px; line-height: 40px; font-size: 13px; } .writepage .btn_type i { font-size: 17px; margin-right: 7px; top: 3px; } .writepage .file_atch { margin: 25px 0; } .writepage .file_item + .file_item { margin-left: 7px; } .writepage .btn_area { padding: 25px 0; } .writepage .btn_list li + li { margin-left: 7px; } .num_list li {font-size: 13px;} } @media screen and (max-width: 390px) { .bo_table {width: 100%; overflow-x: auto;} .bo_table table {width:100%; max-width: 640px; min-width: 100%; white-space: nowrap;} .table_arrow.board {display: flex;} } /* sub common end */ /* sub_top_area */ #sub_top_area {padding: 90px 0; background: #fff; } #sub_top_area .title h2 {font-size: 48px; font-weight: 300; color:#000; line-height: 65px; word-break: keep-all; } #sub_top_area .title h2.ct {text-align: center;} #sub_top_area .manu_wrap {margin-top: 50px; display: flex; justify-content: space-between; align-items: center; line-height: 1; flex-wrap:wrap; white-space: nowrap; } #sub_top_area .menu_list {display: flex; } #sub_top_area .menu_list li {margin-right: 45px;} #sub_top_area .menu_list li:last-child {margin-right: 0;} #sub_top_area .menu_list a {position: relative; display: block; font-size: 20px; font-weight: 700; color:#b7b7b7; transition: color .3s; } #sub_top_area .menu_list a::after {content: ''; display: none ;width: 6px; height: 6px; background: #006bef; position: absolute; right: -6px; top:-6px; border-radius: 50%; } #sub_top_area .menu_list a.active {color:#006bef;} #sub_top_area .menu_list a.active::after {display: block; } #sub_top_area .menu_list a:hover {color:#006bef; } #sub_top_area .location {display: flex; } #sub_top_area .location li {font-size: 14px; font-weight: 400; color:#b7b7b7; } #sub_top_area .location li::after {content: '>'; display: inline-block; margin:0 12px; } #sub_top_area .location li:last-child::after {display: none;} /* sub_top_area responsive */ @media screen and (max-width: 1420px) { #sub_top_area .location {margin-top:20px;width: 100%;justify-content: flex-end;} } @media screen and (max-width: 1024px) { #sub_top_area {margin-top: 60px; padding: 60px 0;} #sub_top_area .title h2 {font-size: 38px; line-height: 1.5;} #sub_top_area .menu_list {display: none; } #sub_top_area .manu_wrap {justify-content: flex-end; margin-top: 40px;} #sub_top_area .location {padding: 0; margin:0;} } @media screen and (max-width: 640px) { #sub_top_area {padding: 40px 0;} #sub_top_area .title h2 {font-size: 30px; } #sub_top_area .manu_wrap { margin-top: 25px;} #sub_top_area .location li {font-size: 12px;} #sub_top_area .location li::after {margin:0 8px;} } @media screen and (max-width: 480px) { #sub_top_area .title h2 br {display: none; } } /* //sub_top_area end */ /* subpage start */ /* greetings */ #greetings .sec1 .flex {display: flex; margin-bottom: 85px; } #greetings .sec1 .flex > div {width: 50%; height: 450px; background: url('../img/sub1/gre_img1.jpg') 50%/cover no-repeat; } #greetings .sec1 .flex > div:nth-child(2) {background-image: url('../img/sub1/gre_img2.jpg');} #greetings .sec1 article {display: flex; } #greetings .sec1 .title {flex-shrink: 0; margin-right: 70px; } #greetings .sec1 .title h2 {font-size: 40px; font-weight: 300; color:#000; line-height: 59px; word-break: keep-all; } #greetings .sec1 .sub_p b {font-size: 20px; } #greetings .sec1 .name {margin-top: 40px; text-align: right; } /* greetings responsive */ @media screen and (max-width: 1420px) { #greetings .sec1 .flex > div {height: 350px;} #greetings .sec1 .title {margin-right: 40px;} } @media screen and (max-width: 1200px) { #greetings .sec1 .title {margin: 0 0 40px;} #greetings .sec1 article {display: block; } } @media screen and (max-width:1024px) { #greetings .sec1 {text-align: center;} #greetings .sec1 .flex > div {height: 300px;} #greetings .sec1 .flex {margin-bottom: 50px; } #greetings .sec1 .title {margin: 0 0 30px;} #greetings .sec1 .title h2 {font-size: 35px; line-height: 1.5;} #greetings .sec1 .sub_p b {font-size: 18px;} #greetings .sec1 .name {text-align: center; margin-top: 30px; } } @media screen and (max-width:640px) { #greetings .sec1 .flex {margin-bottom: 40px; } #greetings .sec1 .flex > div {height: 160px;} #greetings .sec1 .title h2 {font-size: 26px; } #greetings .sec1 .sub_p b {font-size: 16px;} } /* //greetings end */ /* facilities */ #facilities .sec1 .sub_p {position: relative; color:#555; padding-left: 15px; margin-top: 25px ;} #facilities .sec1 .sub_p::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #006bef; position: absolute; left: 0; top:12px;} /* facilities responsive */ @media screen and (max-width:1024px) { @media screen and (min-width:641px) { #facilities .sec1 .sub_table table tbody td.mw {max-width: 200px;} #facilities .sec1 .sub_table table tbody td br {display: none;} } #facilities .sec1 .sub_p::before {top:8px;} } @media screen and (max-width:640px) { #facilities .sec1 .sub_p {margin-top: 5px;} #facilities .sec1 .sub_p::before {width: 4px; height: 4px;} } /* //facilities end */ /* location */ #location .tab2 .map_wr {width: 100%; position: relative; z-index: 1; } #location .tab2 .map_wr .wrap_map {height: 550px;} #location .tab2 .map_wr .root_daum_roughmap .wrap_controllers {display: none;} #location .tab2 .list {display: flex; text-align: center; position: relative; z-index: 2; border:1px solid #ddd; width: calc(100% - 200px); margin:-60px auto 0;} #location .tab2 .list li {width: 365px; background-color: #006bef; padding: 40px 20px; color:#fff;} #location .tab2 .list li:nth-child(2) {width: calc(100% - 365px); background-color: #fff; color:#000;} #location .tab2 .list li i {font-size: 40px; } #location .tab2 .list li h3 {font-size: 24px; font-weight: 700; line-height: 1; font-family: 'Montserrat'; margin:15px 0;} #location .tab2 .list li:nth-child(1) .sub_p {color:rgba(255, 255, 255, 0.8);} #location .tab2 .list li:nth-child(2) .sub_p {color:#555;} /* location tab3 */ #location .tab3 article {display: flex; } #location .tab3 .sub_tit {flex-shrink: 0; margin:0 60px 0 0; } #location .tab3 .cont {width: 100%;} #location .tab3 .cont > div:nth-child(n+2) {margin-top: 55px;} #location .tab3 .cont h3 {width: 100%; font-size: 24px; font-weight: 700; color:#000; display: flex; align-items: center;} #location .tab3 .cont h3 i { font-size: 150%; margin-right: 5px;} #location .tab3 .cont h4 {font-size: 20px; font-weight: 400; color:#000; line-height: 35px; word-break: keep-all; } #location .tab3 .cont .list_wrap {width: 100%; border-top: 1px solid #0b152a;padding:35px 0; border-bottom: 1px solid #ddd; margin-top: 30px;} #location .tab3 .cont .list_wrap > li {padding-left: 17px; position: relative; } #location .tab3 .sec1 .cont .list_wrap > li:nth-child(n+2) {margin-top: 20px;} #location .tab3 .cont .list_wrap > li::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #006bef; position: absolute; left: 0; top: 12px;} #location .tab3 .cont .list_wrap a {color:#006bef; font-weight: 400; } #location .tab3 .cont .route {display: flex; flex-wrap: wrap;} #location .tab3 .cont .route .arrow {display: inline-block; margin:0 17px; width: 20px; height: 20px; position: relative; top:4px; background: url('../img/sub1/loc_t3_arrow.png') 50%/contain no-repeat;} #location .tab3 .sec2 .cont .list_wrap {display: flex; flex-wrap:wrap;} #location .tab3 .sec2 .cont .list_wrap > li {width: 33.3%;} #location .tab3 .sec2 .cont .list_wrap > li:nth-child(n+4) {margin-top: 20px;} /* location responsive */ @media screen and (max-width:1420px) { /* tab2 */ #location .tab2 .list {width: calc(100% - 80px);} /* tab3 */ #location .tab3 .sec2 .cont .list_wrap > li {width: 50%;} #location .tab3 .sec2 .cont .list_wrap > li:nth-child(n+3) {margin-top: 20px;} } @media screen and (max-width:1024px) { /* tab2 */ #location .tab2 .map_wr .wrap_map {height: 350px;} #location .tab2 .list {width: 100%; margin: 40px 0 0;} #location .tab2 .list li {width: 35%; padding: 30px 20px;} #location .tab2 .list li:nth-child(1) p br {display: none;} #location .tab2 .list li:nth-child(2) {width: 65%;} #location .tab2 .list li i {font-size: 30px;} #location .tab2 .list li h3 {font-size: 20px;} /* tab3 */ #location .tab3 article {display: block; } #location .tab3 .sub_tit {margin:0 0 30px 0; } #location .tab3 .sub_tit br {display: none; } #location .tab3 .cont h3 {font-size: 20px;} #location .tab3 .cont .list_wrap {padding: 30px 0; margin-top: 20px;} #location .tab3 .cont .list_wrap > li::before {top:9px;} #location .tab3 .cont .route .arrow {margin:0 10px;width: 15px; height: 15px; top:2px;} #location .tab3 .cont h4 {font-size: 16px; line-height: 1.65; } } @media screen and (max-width:640px) { #location .tab2 .map_wr .wrap_map {height:250px;} #location .tab2 .list { margin: 30px 0 0; flex-wrap:wrap;} #location .tab2 .list li {width: 100%; padding: 20px 20px;} #location .tab2 .list li:nth-child(2) {width: 100%;} #location .tab2 .list li h3 {font-size: 16px; margin:10px 0;} /* tab3 */ #location .tab3 .cont h3 {font-size: 18px;} #location .tab3 .cont > div:nth-child(n+2) {margin-top: 45px;} #location .tab3 .cont .list_wrap {padding: 20px 0 } #location .tab3 .cont .list_wrap > li {padding-left: 10px;} #location .tab3 .cont .route .arrow {width: 12px; height: 12px; top:1px;} #location .tab3 .sec1 .cont .list_wrap > li:nth-child(n+2) {margin-top: 15px;} #location .tab3 .cont .list_wrap > li::before {width: 4px; height: 4px; top:7px;} #location .tab3 .cont h4 {font-size: 15px; } #location .tab3 .sec2 .cont .list_wrap > li:nth-child(n+3) {margin-top: 15px;} } @media screen and (max-width:640px) { /* tab3 */ #location .tab3 .sec2 .cont .list_wrap > li {width: 100%;} #location .tab3 .sec2 .cont .list_wrap > li:nth-child(n+2) {margin-top: 15px;} } /* //location end */ /* mir */ #mir .tab1 .sub_table {margin-top: 50px; } /* tab2 */ #mir .tab2 .img_wrap {display: flex; margin-bottom: 25px;} #mir .tab2 .img_wrap > div {flex:1;} #mir .tab2 .img_wrap > div:nth-child(2) {margin-left: 40px;} #mir .tab2 article > div:nth-child(n+2) {margin-top: 80px;} /* tab3 */ #mir .tab3 .cont {display: flex; flex-wrap:wrap; justify-content: space-between; text-align: center;} #mir .tab3 .cont > div {width: calc(50% - 20px);} #mir .tab3 .cont > div:nth-child(n+3) {margin-top: 70px; } #mir .tab3 .cont p {font-size: 22px; font-weight: 500; word-break: keep-all; color:#000; line-height: 1.2;} #mir .tab3 .cont p::before {content: ''; display: block; width: 25px; height: 2px; background: #006bef; margin:30px auto 12px;} #mir .tab3 .cont b { margin-top: 10px; display: block; font-weight: 400; font-size: 18px; } /* mir responsive */ @media screen and (max-width:1024px) { #mir .tab1 .sub_table {margin-top: 30px; } /* tab2 */ #mir .tab2 .img_wrap > div:nth-child(2) {margin-left: 20px;} #mir .tab2 article > div:nth-child(n+2) {margin-top: 50px;} /* tab3 */ #mir .tab3 .cont > div {width: calc(50% - 10px);} #mir .tab3 .cont > div:nth-child(n+3) {margin-top: 50px; } #mir .tab3 .cont p {font-size: 18px;} #mir .tab3 .cont b {font-size: 16px; margin-top: 7px;} } @media screen and (max-width:640px) { #mir .tab1 .sub_table {margin-top: 20px; } /* tab2 */ #mir .tab2 .img_wrap > div:nth-child(2) {margin-left: 10px;} /* tab3 */ #mir .tab3 .cont > div {width: calc(50% - 5px);} #mir .tab3 .cont > div:nth-child(n+3) {margin-top: 40px; } #mir .tab3 .cont p {font-size: 15px;} #mir .tab3 .cont p::before { margin:20px auto 12px; width: 20px;} #mir .tab3 .cont b {font-size: 13px; margin-top: 6px;} } /* //mir end */ /* nuri */ #nuri .tab1 .sub_table {margin-top: 50px; } /* tab2 */ #nuri .tab2 .img_wrap {display: flex; margin-bottom: 25px;} #nuri .tab2 .img_wrap > div {flex:1;} #nuri .tab2 .img_wrap > div:nth-child(2) {margin-left: 40px;} #nuri .tab2 article > div:nth-child(n+2) {margin-top: 80px;} #nuri .tab2 .img_wrap p {text-align: center; margin-top: 10px; color:#555;} /* tab3 */ #nuri .tab3 .cont {display: flex; flex-wrap:wrap; justify-content: space-between; text-align: center;} #nuri .tab3 .cont > div {width: calc(50% - 20px);} #nuri .tab3 .cont > div:nth-child(n+3) {margin-top: 70px; } #nuri .tab3 .cont p {font-size: 22px; font-weight: 500; word-break: keep-all; color:#000; line-height: 1.2;} #nuri .tab3 .cont p::before {content: ''; display: block; width: 25px; height: 2px; background: #006bef; margin:30px auto 12px;} #nuri .tab3 .cont b { margin-top: 10px; display: block; font-weight: 400; font-size: 18px; } /* mir responsive */ @media screen and (max-width:1024px) { #nuri .tab1 .sub_table {margin-top: 30px; } /* tab2 */ #nuri .tab2 .img_wrap > div:nth-child(2) {margin-left: 20px;} #nuri .tab2 article > div:nth-child(n+2) {margin-top: 50px;} /* tab3 */ #nuri .tab3 .cont > div {width: calc(50% - 10px);} #nuri .tab3 .cont > div:nth-child(n+3) {margin-top: 50px; } #nuri .tab3 .cont p {font-size: 18px;} #nuri .tab3 .cont b {font-size: 16px; margin-top: 7px;} } @media screen and (max-width:640px) { #nuri .tab1 .sub_table {margin-top: 20px; } /* tab2 */ #nuri .tab2 .img_wrap > div:nth-child(2) {margin-left: 10px;} /* tab3 */ #nuri .tab3 .cont > div {width: calc(50% - 5px);} #nuri .tab3 .cont > div:nth-child(n+3) {margin-top: 40px; } #nuri .tab3 .cont p {font-size: 15px;} #nuri .tab3 .cont p::before { margin:20px auto 12px; width: 20px;} #nuri .tab3 .cont b {font-size: 13px; margin-top: 6px;} } /* //nuri end */ /* life */ /* #life article > div:nth-child(n+2) {margin-top: 70px; } */ #life .tab_wrap::before, #life section {background: #fff;} #life div > section:nth-child(even) {background: #f7f7f7; } #life .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #life .line_box h3 {font-size: 20px; font-weight: 600; color:#000;line-height: 1; margin-bottom: 30px;} #life .dot_list .img {display: block; padding: 20px 0;} #life .sub_table .even tr:nth-child(even) td {background-color: #f7f7f7;} #life .sec_tit h2 {font-size: 36px; font-weight: 800; color:#000; margin-bottom: 60px; } #life .sec_tit h2 a {transition: opacity .3s; color:#006bef; } #life .sec_tit h2 a:hover {opacity:.5;} #life section > article:nth-child(n+2) {margin-top: 70px; } /* tab2 */ #life .tab2 .img {border:1px solid #ddd; overflow: hidden; background: #fff; width: 100%; display: flex; align-items: center ;justify-content: center; } #life .tab2 section:nth-child(n+3) .img {background: #e7e6e6;} #life .tab2 section:nth-child(n+2) .img {padding: 50px;} #life .tab2 .img_wrap {display: flex; justify-content: space-between;} #life .tab2 .img_wrap .img {width: calc(50% - 13px); } /* life responsive */ @media screen and (max-width:1024px) { /* tab */ #life .tab_wrap ul {flex-wrap:wrap;} #life .tab_wrap ul li {fleX:auto; width: 25%;} #life .tab_wrap ul li:nth-child(n+5) {fleX:auto; width: 20%;} #life .tab_wrap ul li:nth-child(n+5) a {border-top: 0;} #life .tab_wrap ul li:nth-child(4) a {border-right: 1px solid #ddd;} #life .line_box {padding: 30px 0;} #life .line_box h3 {font-size: 18px; margin-bottom: 20px;} #life .sec_tit h2 {font-size: 28px; margin-bottom: 40px; } /* tab2 */ #life .tab2 .img_wrap .img {width: calc(50% - 5px); } } @media screen and (max-width:640px) { #life .line_box {padding: 25px 0;} #life .line_box h3 {font-size: 16px; } #life .dot_list .img { padding: 15px 0;} #life section > article:nth-child(n+2) {margin-top: 50px; } #life .sec_tit h2 {font-size: 24px; margin-bottom: 30px; } /* tab2 */ #life .tab2 section:nth-child(n+2) .img {padding: 20px;} #life .tab2 .img_wrap { flex-wrap:wrap;} #life .tab2 .img_wrap .img {width: 100%; } #life .tab2 .img_wrap .img:nth-child(n+2) {margin-top: 10px;} } /* //life end */ /* carte */ #carte .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #carte .line_box.no_bot {border-bottom: 0; border-top: 0; padding-bottom: 0;} #carte .line_box h3 {font-size: 20px; font-weight: 600; color:#000;line-height: 1; margin-bottom: 30px;} #carte .today {display: flex; width: 100%; border:1px solid #ddd; background: #fff; margin-bottom: 55px; } #carte .today .title {flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #0b152a; text-align: center; color:#fff; line-height: 1; width: 150px;} #carte .today .title span i {display: block; margin-bottom: 5px; font-size: 130%;} #carte .today .title span {font-size: 15px; font-weight: 300; text-transform: uppercase; } #carte .today .title h3 {font-size: 21px; font-weight: 600; color:#fff; margin-top: 12px;} #carte .today .cont {padding: 30px 40px; width: 100%;} #carte .today .cont li {display: flex; align-items: flex-start; } #carte .today .cont li:nth-child(n+2) {margin-top: 10px; } #carte .today .cont h4 {white-space: nowrap; font-size: 18px; font-weight: 700; color:#0b152a; margin-right: 20px; line-height: 1.65;} #carte .today .cont h4 i {font-size: 130%; margin-right: 5px; position: relative ;top:2px;} #carte .today .cont p {color:#555; line-height: 1.65;} #carte .sub_table table tbody th {font-weight: 600; color:#0b152a; } #carte .wrap p.circle {color: #000;} #carte .txt_wrap {margin-top: 15px;} #carte .sub_table table tbody .a {border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px;} #carte > section:first-child {padding: 100px 0;} #carte section:nth-child(odd) {background-color: #f7f7f7;} #carte section:nth-child(even) {background-color: #fff;} #carte .in_txt {font-size: 18px; line-height: 29px; margin-bottom: 75px;} #carte .txt {font-size: 18px; line-height: 29px; color: #555;} #carte .t1 {color: #006bef;} #carte .sec1 .t_wrap:nth-child(2) {border-bottom: 1px solid #ddd;} #carte .sec1 table {margin-top: 15px;} /* #carte .wrap { margin-bottom: 80px;} */ #carte .wrap h4 {font-size: 28px; font-weight: 800; background: url('../img/sub4/arrow_blue.png') no-repeat left top 6px; padding-left: 25px; border-bottom: 2px solid #000; padding-bottom: 39px;} #carte .sec2 .wrap h4 {border-bottom: 0;} #carte .wrap h4.t {border-bottom: 0;} #carte .wrap h4 span {color: #006bef;} #carte .wrap .t_wrap {padding: 30px 0;} #carte .wrap p {position: relative; color: #555; font-weight: 200; font-size: 18px; line-height: 2;} /* #carte .wrap p:nth-child(1) {border-top: 2px solid #000;} */ #carte .wrap p.circle {padding-left: 20px;} #carte .wrap p.circle::before {content: ''; display: block; width: 6px; height: 6px; background-color: #555; position: absolute; left: 0; top: 15px; border-radius: 50%;} #carte .wrap:not(:nth-child(4)) .t_wrap p span {color: #006bef; font-weight: 700;} #carte .tab_wrap .sub_inner {padding: 0; margin-bottom: 40px;} #carte table tr {display: table-row;} #carte .tab_wrap ul li a {color: #000; font-size: 18px; background-color: #f7f7f7; position: relative; border: none;} #carte .tab_wrap ul li a::before {content: ''; display: block; width: 1px; height: 17px; background: #ddd; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} #carte .tab_wrap ul li:first-child a::before {display: none;} #carte .tab_wrap ul li a.active {background-color: #006bef; border: 1px solid #006bef; color: #fff;} #carte .tab_wrap ul li a.active::before {display: none;} /* #carte .sub_table table tbody td {white-space: pre-line;} */ /* carte responsive */ @media screen and (max-width:1024px) { #carte .today {margin-bottom: 40px;} #carte .today .title {width: 110px;} #carte .today .title h3 {font-size: 18px;} #carte .today .title span {font-size: 14px;} #carte .today .cont {padding: 30px 20px;} #carte .today .cont h4 {font-size: 16px; margin-right: 10px;} #carte .line_box {padding: 30px 0;} #carte .line_box h3 {font-size: 18px; margin-bottom: 20px;} #carte > section:first-child {padding: 60px 0;} #carte .txt {font-size: 16px; line-height: 1.8;} #carte .tab_wrap ul li a {font-size: 16px;} /* tab_wrap */ #carte .tab_wrap ul {flex-wrap: wrap;} #carte .tab_wrap ul li {flex: unset; width: 33.333%;} #carte .tab_wrap ul li:nth-child(4) a::before {display: none;} #carte .tab_wrap ul li:nth-child(n+4) {border-top: 1px solid #ddd;} } @media screen and (max-width:640px) { #carte .today {display: block; margin-bottom: 30px;} #carte .today .title {width: 100%; padding: 20px 0;} #carte .today .title h3 {font-size: 16px;} #carte .today .title span {font-size: 13px;} #carte .today .cont {padding:20px;} #carte .today .cont li {display: block; } #carte .today .cont h4 {font-size: 14px; margin: 0 8px 0 0;} #carte .today .cont h4 i {margin-right: 3px;} #carte > section:first-child {padding: 30px 0;} #carte .tab_wrap ul li a {font-size: 12px;} #carte .line_box {padding: 20px 0;} #carte .line_box h3 {font-size: 16px; } } /* //carte end */ /* schedule */ #schedule .sec1 article {display: flex; justify-content: space-between; align-items: flex-end;} #schedule .sec1 article > div {width: calc(50% - 35px); } #schedule .calendar .top {display: flex; justify-content: space-between; flex-wrap:wrap; align-items: center; margin-bottom: 25px;} #schedule .calendar .top .sub_tit {margin:0;} #schedule .calendar .top .arrow {display: flex; } #schedule .calendar .top .arrow li {display: block; width: 12px; height: 21px; background: url('../img/sub5/sc_prev.png') 50%/contain no-repeat; cursor: pointer;} #schedule .calendar .top .arrow li.next {background-image:url('../img/sub5/sc_next.png') ; margin-left: 27px;} #schedule .sc_table table {border-collapse: collapse; width: 100%; border-top: 3px solid #006bef; line-height: 1.65; text-align: center;} #schedule .sc_table table thead th {padding:10px; font-size:16px; font-weight: 500; color:#fff; background-color: #0b152a; border:1px solid rgba(255,255,255,.2); } #schedule .sc_table table tbody td {font-size:15px; font-weight: 300; color:#666; border:1px solid #d5dfec; padding:10px; background-color: #fff; } #schedule .sc_table table tbody td.on {background-color: #E7EFFD; color:#0b152a; } #schedule .detail > div {padding: 25px 0; border-bottom: 1px solid #ddd; } #schedule .detail > div:first-child {padding-top: 0; border-top:0; } #schedule .detail h3 {line-height: 1.2; font-size: 18px; font-weight: 700; color:#000; margin-bottom: 12px; } #schedule .detail .dot_list li {line-height: 1.2; font-size: 16px; color:#555; padding-left: 15px;} #schedule .detail .dot_list li::before {width: 4px; height: 4px; top:7px; } /* schedule responsive */ @media screen and (max-width:1420px) { #schedule .sec1 article > div {width: calc(50% - 20px); } } @media screen and (max-width:1024px) { #schedule .sec1 article {display: block;} #schedule .sec1 article > div {width:100%; } #schedule .sc_table table thead th {padding:7px; font-size:14px} #schedule .sc_table table tbody td {font-size:14px; padding:7px; } #schedule .detail {margin-top: 30px;} #schedule .detail > div {padding: 20px 0;} #schedule .detail h3 {font-size: 16px; margin-bottom: 10px; } #schedule .detail .dot_list li {font-size: 14px; padding-left: 10px;} #schedule .detail .dot_list li::before {top:5px;} } @media screen and (max-width:640px) { #schedule .calendar .top {margin-bottom: 15px;} #schedule .sc_table table thead th {padding:7px 5px; font-size:13px} #schedule .sc_table table tbody td {font-size:13px; padding:5px; } #schedule .calendar .top .arrow li {width: 10px; height: 15px;} #schedule .calendar .top .arrow li.next {margin-left: 20px;} #schedule .detail h3 {font-size: 15px; } #schedule .detail .dot_list li {font-size: 13px; } } /* //schedule end */ /* guidelines */ /* #guidelines .sec1 {background: #f7f7f7; padding-top: 100px;} #guidelines .sec2 {background: #fff;} #guidelines article > div:nth-child(n+2) {margin-top: 60px;} #guidelines .sec_tit h2 {font-size: 36px; font-weight: 800; color:#000; } #guidelines .sec_tit h2 span {font-size: 20px; font-weight: 600; color:#006bef; } #guidelines .sec2 .sec_tit h2 span {color:#555; font-weight: 300;} #guidelines .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #guidelines .line_box + .line_box {border-top: 0;} @media screen and (min-width:1025px) { #guidelines .dot_list li {font-size: 20px;} #guidelines .dot_list li b {font-size: 22px; color:#000;} } #guidelines .num_list {margin-top: 25px; padding-left: 20px;} #guidelines .sec2 .sec_tit {margin-bottom: 40px; } @media screen and (min-width:1025px) { #guidelines .sec2 .sub_table.font table tbody th, #guidelines .sec2 .sub_table.font table tbody td {font-size: 15px;} } */ /* guidelines responsive */ /* @media screen and (max-width:1420px) { #guidelines .sec1 {padding-top: 90px;} } @media screen and (max-width:1024px) { #guidelines .sec1 {padding-top: 50px;} #guidelines .sec_tit h2 {font-size: 28px;} #guidelines .sec_tit h2 span {font-size:70%;} #guidelines .line_box {padding: 30px 0;} #guidelines .num_list {margin-top: 15px;} #guidelines .sec2 .sec_tit span {display: block; margin:10px 0 0;} } @media screen and (max-width:640px) { #guidelines .sec2 .sec_tit {margin-bottom: 30px;} #guidelines .sec_tit h2 {font-size: 24px;} #guidelines article > div:nth-child(n+2) {margin-top: 50px;} #guidelines .num_list {padding-left: 12px;} #guidelines .line_box {padding:25px 0;} } */ /* //guidelines end */ /* rule1 */ #rule1 .sec1 {background: #f7f7f7; padding-top: 100px;} #rule1 .sec2 {background: #fff;} #rule1 article > div:nth-child(n+2) {margin-top: 60px;} #rule1 .sec_tit h2 {font-size: 36px; font-weight: 800; color:#000; } #rule1 .sec_tit p {font-size: 20px; font-weight: 600; color:#006bef; line-height: 33px; margin-top: 15px;} #rule1 .sec2 .sec_tit h2 span {color:#555; font-weight: 300;} #rule1 .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #rule1 .line_box.color li {color: #006bef;} #rule1 .line_box.color li b {color: #006bef;} #rule1 .line_box.color li i {color: #006bef;} #rule1 .line_box + .line_box {border-top: 0;} #rule1 .dot_list li {font-size: 20px;} #rule1 .dot_list.gray li {font-size: 16px; color: #555;} #rule1 .dot_list.gray li::before {width: 6px; height: 6px; background-color: #999; top: 10px;} #rule1 .dot_list li b {font-weight: 700;} #rule1 .dot_list li.flex {display: flex;} #rule1 .dot_list li.flex b {margin-right: 4px;} #rule1 .dot_list li span {color: #006bef; } #rule1 .dot_list li span.p20 {font-size: 20px;} #rule1 .add .dot_list li {font-size: 18px;} #rule1 .add .line_box {border-top: 0; padding: 30px 0;} #rule1 .add .line_box:first-child {padding-top: 0;} #rule1 .add .dot_list li {padding-left: 0;} #rule1 .add .dot_list li::before {display: none;} /* num_box_wrap */ #rule1 .num_box_wrap {margin-top: 25px;} #rule1 .num_box_wrap table {margin: 0;} #rule1 .num_box_wrap .box {margin-top: 50px;} #rule1 .num_box_wrap h4 {font-weight: 700;} #rule1 .num_box_wrap h4 span {color: #006bef; margin-bottom: 10px; } #rule1 .num_box_wrap h4 span:nth-of-type(2) {font-weight: 300;} #rule1 .num_box_wrap h5 {display: flex; align-items: center; color: #555; font-weight: 600;} #rule1 .num_box_wrap h5 span {color: #006bef; font-weight: 300;} #rule1 .num_box_wrap h5 span.word {display: block; width: 22px; height: 22px; background-color: #777; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 7px;} #rule1 .num_box_wrap .cont {padding-left: 30px; margin-top: 10px;} /* #rule1 .num_box_wrap .cont ul:not(.dot_list) li {margin-bottom: 14px; font-size: 16px;} */ #rule1 .num_box_wrap .cont ul.sub_p16 li {margin-bottom: 14px;} /* #rule1 .num_box_wrap .cont ul.sub_p16 li:last-child {margin-bottom:0;} */ #rule1 .num_box_wrap .cont li p {margin-top: 10px; color: #555;} #rule1 .num_box_wrap .cont li p b {color: #000;} #rule1 .num_box_wrap .cont .dot_list {margin-top: 15px;} #rule1 .num_box_wrap .cont .dot_list li {font-size: 16px;} #rule1 .num_box_wrap .cont .dot_list li::before {background-color: #999;} #rule1 .sub_tit h2 span {color: #006bef; font-size: 20px; font-weight: 600; position: relative; top: -4px;} /* #rule1 .num_list li {display: inline-block;} */ #rule1 .num_list i.black {font-style: normal; font-weight: 600; color: #000;} #rule1 .num_list.nl3 li {} #rule1 .num_list.nl3 li b {font-size: 18px; font-weight: 600;} #rule1 .num_list.nl3 li b.mt {margin-top: 40px; display: block;} #rule1 .num_list.nl4 {width: 100%; padding-left: 0; margin-top: 7px; font-size: 16px;} #rule1 .num_list li span {color: #006bef; font-weight: 300;} #rule1 .word_list > li {font-weight: 600;} #rule1 .num_list li span.word {color: #000; font-size: 18px; font-weight: 600;} #rule1 .num_list p.p16 {font-size: 16px;} #rule1 .num_list p.p16 span {font-weight: 700; color: #000;} #rule1 .num_list li {display: block;} #rule1 .num_list li b.c_black {color: #000;} #rule1 .num_wrap .num_list {margin-top: 7px; padding-left: 40px;} #rule1 .num_list.nl2 {margin-top: 7px; width: 100%;} #rule1 .num_wrap span {padding-left: 40px; display: block;} #rule1 .sub_table .table_arrow ~ .dot_list li {font-size: 16px;} #rule1 .sub_table .table_arrow ~ .dot_list li::before {top: 10px;} /* #rule1 .num_list li span.in {text-indent: 37px; display: block;} */ /* #rule1 .dot_list li span.in {text-indent: 170px; display: block; color: #006bef; font-weight: 200;} #rule1 .dot_list li span.in.in1 {text-indent: 160px;} #rule1 .line_box span.in.in2 {font-size: 18px; color: #006bef; font-weight: 200; display: block; text-indent: 245px;} #rule1 .dot_list li span.in.in3 {text-indent: 215px;} */ /* #rule1 .line_box span.sp1 {font-size: 18px; color: #006bef; font-weight: 200; display: block; text-indent: 245px;} */ #rule1 .word_list {margin-top: 7px;} #rule1 .word_list li:nth-child(n+2) {margin-top: 7px;} #rule1 .word_list li.bold {display: flex; flex-wrap: wrap; align-items: center;} #rule1 .word_list li b.block_word {display: block; width: 22px; height: 22px; background-color: #777; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 600;} /* li.flex set */ #rule1 li.flex {display: flex; flex-wrap: wrap;} #rule1 li.flex b {flex-shrink: 0;} #rule1 .word_list li.flex {align-items: center;} #rule1 li.flex.fw_un {flex-wrap: unset;} #rule1 .sub_table {width: 100%;} #rule1 .table_arrow.fl {justify-content: flex-end; width: 100%;} #rule1 table {margin: 20px 0; width: 100%;} #rule1 table thead th {text-align: center;} /* 부칙 */ /* #rule1 .add .dot_list li {font-size: 18px;} */ #rule1 .add span.sub_p {font-weight: 800; color: #000;} #rule1 .dot_list i {font-style: normal; font-weight: 800; color: #000;} /* bot */ #rule1 article div.bot {margin-top: 30px;} #rule1 .bot p {font-size: 20px; line-height: 1.8; font-weight: 500;} #rule1 .bot p span {color: #006bef; font-weight: 300; line-height: 1.7;} @media screen and (min-width:1025px) { #rule1 .dot_list li b {font-size: 22px; color:#000;} } #rule1 .num_list {margin-top: 25px; padding-left: 20px;} #rule1 .sec2 .sec_tit {margin-bottom: 40px; } @media screen and (min-width:1025px) { #rule1 span.pl {padding-left: 37px;} #rule1 span.pl2 {padding-left: 3px;} #rule1 .word_list {padding-left: 30px;} #rule1 .sec2 .sub_table.font table tbody th, #rule1 .sec2 .sub_table.font table tbody td {font-size: 15px;} } /* rule1 responsive */ @media screen and (max-width:1420px) { #rule1 .sec1 {padding-top: 90px;} #rule1 .mob {display: none;} } @media screen and (max-width:1024px) { #rule1 .sec1 {padding-top: 50px;} #rule1 .sec_tit h2 {font-size: 28px;} #rule1 .sec_tit p {font-size: 18px; line-height: 1.7;} #rule1 .line_box {padding: 30px 0;} #rule1 .num_list {margin-top: 15px; padding-left: 15px;} #rule1 .sec2 .sec_tit span {display: block; margin:10px 0 0;} #rule1 .mob {display: none;} #rule1 .dot_list li {font-size: 18px;} #rule1 li.flex.f1 b {width: 28%;} #rule1 .num_list p.p16 {font-size: 15px;} #rule1 .sub_tit h2 span {font-size: 18px; top: 0;} #rule1 .add .dot_list li {font-size: 15px; align-items: center;} #rule1 .bot p {font-size: 16px; line-height: 1.8;} #rule1 .dot_list li::before {top: 12px;} /* #rule1 .num_list.nl3 li b.block_word {font-size: 16px;} */ #rule1 .num_list.nl3 li b {font-size: 15px;} #rule1 .dot_list li span.p20 {font-size: 18px;} #rule1 .add_list li b {font-size: 21px;} #rule1 .num_list li span.word {font-size: 16px;} #rule1 .num_box_wrap .cont .dot_list li {font-size: 14px;} #rule1 .num_box_wrap .cont .dot_list li::before {top: 8px;} } @media screen and (max-width:640px) { #rule1 .sec2 .sec_tit {margin-bottom: 30px;} #rule1 .sec_tit h2 {font-size: 24px;} #rule1 .sub_tit h2 span {font-size: 16px;} #rule1 article > div:nth-child(n+2) {margin-top: 50px;} #rule1 .num_list {padding-left: 12px;} #rule1 .line_box {padding:20px 0;} #rule1 .dot_list li {font-size: 16px;} #rule1 .num_list p.p16 {font-size: 14px;} #rule1 .add .dot_list li {font-size: 14px;} #rule1 .bot p {font-size: 15px;} #rule1 .dot_list li::before {top: 9px;} #rule1 .num_wrap .num_list {padding-left: 20px;} #rule1 .num_wrap span {padding-left: 20px;} #rule1 li.flex.f2 b {width: 100%; margin-right: 0;} #rule1 .num_list.nl3 li b.block_word {font-size: 15px;} #rule1 .num_list.nl3 li b {font-size: 14px;} #rule1 .dot_list li span.p20 {font-size: 17px;} #rule1 .dot_list:not(.add .dot_list) li {display: flex; flex-direction: column;} #rule1 .add .line_box {padding: 20px 0;} #rule1 .sec6 article > div:nth-child(n+2) {margin-top: 20px;} #rule1 .add_list li b {font-size: 18px;} #rule1 .sec_tit p {font-size: 16px; margin-top: 10px;} #rule1 .num_list li span.word {font-size: 15px;} /* num_box_wrap */ #rule1 .num_box_wrap .box {margin-top: 35px;} #rule1 .num_box_wrap .cont {padding-left: 0;} #rule1 .num_box_wrap h5 span.word {width: 17px; height: 17px;} #rule1 .num_box_wrap .cont .dot_list li {font-size: 13px;} } /* //rule1 end */ /* emergency */ @media screen and (min-width:1025px) { #emergency .box_wrap .box:nth-child(n+2) {margin-top: 20px; } } #emergency article:nth-child(n+2) {margin-top: 70px;} #emergency .box {display: flex; border:1px solid #ddd; overflow: hidden ;background: #fff;} #emergency .box .img {overflow: hidden; flex-shrink: 0; position: relative; border-right: 1px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } #emergency .box .img img {width: 100%; height: 100%;} #emergency .box .img i {display: flex; align-items: center;justify-content: center; position: absolute; left: 0; top:0; width: 70px; height: 70px; background: #006bef; font-style: normal; font-size: 34px; font-weight: 800; color:#fff;} #emergency .box .txt { padding: 50px 40px; width: 100%;} #emergency .box .txt h3 {font-size: 24px; font-weight: 700; color:#000; line-height: 1.3; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #ddd; word-break: keep-all; position: relative;} #emergency .box .txt h3::after {content: ''; display: block; width: 70px; height: 2px; position: absolute; left: 0; bottom: -1px; background: #006bef;} #emergency .box .txt h3 span {color:#006bef;} #emergency .box .dot_list span {color:#006bef; font-weight: 600; } #emergency .box_wrap .box:nth-child(even) .img i, #emergency .box_wrap .box:nth-child(even) .txt h3::after {background-color: #0b152a;} #emergency .tab2 .img {border:1px solid #ddd;} #emergency .tab4 .img {border:1px solid #ddd;} /* 완강기 */ #emergency .tab4 .box_wrap {display: flex; justify-content: space-between; flex-wrap: wrap;} #emergency .tab4 .box {flex-direction: column; width: 24%;} #emergency .tab4 .box:nth-child(4), #emergency .tab4 .box:nth-child(8), {margin-right: 0;} #emergency .tab4 .box:first-child {width: 100%; margin-right: 0;} #emergency .tab4 .box h3 {border-bottom: 0; font-size: 18px; font-weight: 400; padding-bottom: 0;} #emergency .tab4 .box .mob {display: none;} #emergency .tab4 .box h3::after {display: none;} #emergency .tab4 .txt {padding: 20px;} #emergency .tab5 .list {display: flex; flex-wrap:wrap;} #emergency .tab5 .list li {width: calc(50% - 15px); position: relative; margin-right: 30px;} #emergency .tab5 .list li:nth-child(2n) {margin-right: 0; } #emergency .tab5 .list li:nth-child(n+3) {margin-top: 30px;} #emergency .tab5 .list li i {display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; background: #000; color:#fff; font-size: 34px; font-weight: 800; color:#fff; font-style: normal; position: absolute; left:0; bottom: 0;} /* emergency responsive */ @media screen and (max-width:1024px) { /* tab */ #emergency .tab_wrap ul {flex-wrap:wrap;} #emergency .tab_wrap ul li {fleX:auto; width: 33.3%;} #emergency .tab_wrap ul li:nth-child(n+4) a {border-top: 0;} #emergency .tab_wrap ul li:nth-child(3) a {border-right: 1px solid #ddd;} #emergency .box_wrap {display: flex; flex-wrap:wrap; justify-content: space-between; } #emergency .box_wrap .box:nth-child(n+3) {margin-top: 40px; } #emergency .box {flex-direction: column; align-items: center; border:0; width: calc(50% - 15px); border:1px solid #ddd;} #emergency .box .img {text-align: center; border-right: 0;border-bottom:1px solid #ddd; ;width: 100%; } #emergency .box .img i {width: 55px; height: 55px; font-size: 28px;} #emergency .box .img img {width: 100%;} #emergency .box .txt {padding:30px 20px; } #emergency .box .txt h3 {font-size: 20px; padding-bottom: 20px;} #emergency .tab4 .box {width: 48%;} #emergency .tab4 .box:nth-child(2) {margin-top: 40px;} #emergency .tab4 .box h3 {font-size: 16px; margin-bottom: 20px;} #emergency .tab4 .box .mob {display: block;} #emergency .tab4 .txt {padding: 20px 20px 0;} #emergency .tab5 .list li {width: calc(50% - 10px); margin-right: 20px;} #emergency .tab5 .list li:nth-child(n+3) {margin-top: 20px;} #emergency .tab5 .list li i {width: 50px; height: 50px; font-size: 24px;} } @media screen and (max-width:768px) { #emergency .box_wrap .box:nth-child(n+3) {margin-top: 20px; } #emergency .box {width: calc(50% - 10px);} #emergency .tab4 .box {width: 48%;} #emergency .tab4 .box:nth-child(2) {margin-top: 20px;} #emergency .tab4 .box h3 {font-size: 15px;} } @media screen and (max-width:640px) { #emergency .box_wrap .box:nth-child(n+2) {margin-top: 15px; } #emergency .box {width: 100%;} #emergency .box .img i {width: 50px; height: 50px; font-size: 24px;} #emergency .box .txt h3 {font-size: 16px;} #emergency .tab4 .box {width: 100%;} #emergency .tab4 .box h3 {font-size: 14px;} #emergency .tab5 .list li {width:100%;margin-right: 0;} #emergency .tab5 .list li:nth-child(n+2) {margin-top: 15px;} } /* //emergency end */ /* point */ #point .sec1 {padding-top: 100px; background: #f7f7f7;} #point .sec_tit h2 {font-size: 36px; font-weight: 800; color:#000; } #point .sec_tit h2 span {font-size: 20px; font-weight: 300; color:#555; } #point .sec1 .sub_table {margin:40px 0;} #point .sec1 .sub_table td span {color:red;} #point .sec1 .sub_table table tbody th {background: #f7fbff; font-weight: 500; color:#000;} @media screen and (min-width:1025px) { #point .sec1 .sub_table table tbody th { padding: 10px;} #point .sec1 .sub_table table tbody td {font-size: 15px; padding: 10px;} } /* point responsive */ @media screen and (max-width:1420px) { #point .sec1 {padding-top: 90px;} #point .sec_tit h2 span {display: block; margin:10px 0 0;} } @media screen and (max-width:1024px) { #point .sec1 {padding-top: 50px;} #point .sec_tit h2 {font-size: 28px;} #point .sec_tit h2 span {font-size:70%;} #point .sec1 .sub_table br {display: none;} } @media screen and (max-width:640px) { #point .sec1 .sub_table {margin:30px 0 0;} #point .sec_tit h2 {font-size: 24px;} #point .sec1 .sub_table br {display: block;} } /* //point end */ /* guide1 */ /* 230511 */ /* guide1 */ /* common */ #guide1 .flex b {flex-shrink: 0;} /* table */ #guide1 table thead th {border: 1px solid #0b152a;} #guide1 table th {border-left: 0;} #guide1 table td:last-child {border-right: 0;} /* tab1 */ #guide1 .tab1 section {padding-top: 20px} #guide1 .tab1 .sub_table tbody th {font-weight: 600; color: #000; border-left:0; background: #e6e6e6; border-color: #d0cccd;} #guide1 .tab1 .line_box:nth-child(2) .num_list {margin-top: 0; padding-left: 0;} #guide1 .tab1 .dot_list li::before {top: 14px;} /* #guide1 .tab1 .box3 .dot_list li {padding-left: 30px;} */ #guide1 .tab1 .box3 .dot_list li::before {background-color: #000;} #guide1 .tab1 .box3 .num_list li::before {display: none;} #guide1 .tab1 .box3 .line_box.flex_box li {} /* #guide1 .tab1 .box3 .line_box.flex_box li > p {width: 50%;} #guide1 .tab1 .box3 .line_box.flex_box li > ul {width: 50%;} */ #guide1 .tab1 .box3 .line_box.flex_box li p {font-size: 22px; font-weight: 200; background: url('../img/sub4/r_arrow.png') no-repeat right top; padding-right: 60px; flex-shrink: 0;} #guide1 .tab1 .box3 .line_box.flex_box li p b {font-weight: 700;} #guide1 .tab1 .box3 .line_box.flex_box .num_list {padding-left: 35px; margin-top: 0; position: relative; top: -3px;} #guide1 .tab1 .box3 .line_box.flex_box .num_list li.flex b {position: relative; top: -2px;} /* #guide1 .tab1 .box3 .line_box:nth-child(3) .num_list li {font-weight: 400;} */ #guide1 .tab1 .box3 .line_box.flex_box .num_list li b {color: #006bef; font-size: 18px; font-weight: 700; margin-right: 0;} #guide1 .tab1 .box4 .num_list li b {margin-right: 0;} #guide1 .tab1 table {margin-top: 20px; width: 100%;} #guide1 .tab1 .blue {margin-top: 20px;} #guide1 .sec1 .num_list {margin-top: 0; text-align: left;} #guide1 .sec1 .sub_table table {border-top: 2px solid #000} /* tab3 */ #guide1 .tab3 > section:nth-child(odd) {background: #f7f7f7;} #guide1 .tab3 .box1 .sub_tit h2 {display: flex; align-items: flex-end;} #guide1 .tab3 .sub_tit h2 span {font-size: 19px; font-weight: 400; color: #000;} #guide1 .tab3 table .b_l {border-left: 5px solid red;} #guide1 .tab3 table .b_r {border-right: 5px solid red;} #guide1 .tab3 table .b_t {border-top: 5px solid red;} #guide1 .tab3 table .b_b {border-bottom: 5px solid red;} #guide1 .tab3 .txt_wrap {margin-top: 25px;} #guide1 article > div:nth-child(n+2) {margin-top: 60px;} #guide1 .sec_tit h2 {font-size: 36px; font-weight: 800; color:#000; } #guide1 .sec_tit h2 span {font-size: 20px; font-weight: 600; color:#006bef; } #guide1 .sec2 .sec_tit h2 span {color:#555; font-weight: 300;} #guide1 .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #guide1 .line_box.color li {color: #006bef;} #guide1 .line_box.color li b {color: #006bef;} #guide1 .line_box.color li i {color: #006bef;} #guide1 .line_box + .line_box {border-top: 0;} #guide1 .dot_list li {font-size: 18px;} #guide1 .dot_list.gray li {font-size: 16px; color: #555;} #guide1 .dot_list.gray li::before {width: 6px; height: 6px; background-color: #999; top: 10px;} /* #guide1 .dot_list li b {font-weight: 700;} */ #guide1 .dot_list li.flex {display: flex;} #guide1 .dot_list li.flex b {margin-right: 4px;} #guide1 .dot_list li span {color: #006bef; font-weight: 300;} #guide1 .dot_list li span.p20 {font-size: 20px;} #guide1 .add .line_box {border-top: 0; padding: 30px 0;} #guide1 .add .dot_list li {padding-left: 0;} #guide1 .add .dot_list li::before {display: none;} #guide1 .sub_tit h2 span {color: #006bef; font-size: 20px; font-weight: 600; position: relative; top: -4px;} /* #guide1 .num_list li {display: inline-block;} */ #guide1 .num_list i.black {font-style: normal; font-weight: 600; color: #000;} #guide1 .num_list.nl3 li {} #guide1 .num_list.nl3 li b {font-size: 18px; font-weight: 600;} #guide1 .num_list.nl3 li b.mt {margin-top: 40px; display: block;} #guide1 .num_list.nl4 {width: 100%; padding-left: 0; margin-top: 7px;} #guide1 .num_list li span {color: #006bef; font-weight: 300;} #guide1 .num_list li span.word {color: #000; font-weight: 18px; font-weight: 600;} #guide1 .num_list p.p16 {font-size: 16px;} #guide1 .num_list p.p16 span {font-weight: 700; color: #000;} #guide1 .num_list li {display: block;} #guide1 .num_list li b.c_black {color: #000;} #guide1 .num_wrap .num_list {margin-top: 7px; padding-left: 40px;} #guide1 .num_list.nl2 {margin-top: 7px; width: 100%;} #guide1 .num_wrap span {padding-left: 40px; display: block;} /* #guide1 .word_list {margin-top: 7px;} #guide1 .word_list li:nth-child(n+2) {margin-top: 7px;} #guide1 .word_list li.bold {display: flex; flex-wrap: wrap; align-items: center;} #guide1 .word_list li b.block_word {display: block; width: 22px; height: 22px; background-color: #777; display: flex; align-items: center; justify-content: center; color: #fff;} */ /* li.flex set */ #guide1 li.flex {display: flex;} #guide1 .word_list li.flex {align-items: center;} #guide1 li.flex.f1 b {width: 18%;} #guide1 li.flex.f2 b {width: 12%;} #guide1 .sub_table {width: 100%;} /* #guide1 table:nth-child(2) {margin: 20px 0 40px; width: 100%;} */ #guide1 table thead th {text-align: center;} /* 부칙 */ #guide1 .add b {font-weight: 800;} #guide1 .dot_list i {font-style: normal; font-weight: 800; color: #000;} /* bot */ #guide1 article div.bot {margin-top: 30px;} #guide1 .bot p {font-size: 20px; line-height: 33px; font-weight: 500;} #guide1 .bot p span {color: #006bef; font-weight: 300;} @media screen and (min-width:1025px) { /* #guide1 .dot_list li {font-size: 20px;} */ #guide1 .dot_list li b {font-size: 22px;} } #guide1 .num_list {margin-top: 25px; padding-left: 20px;} #guide1 .sec2 .sec_tit {margin-bottom: 40px; } @media screen and (min-width:1025px) { #guide1 .sec2 .sub_table.font table tbody th, #guide1 .sec2 .sub_table.font table tbody td {font-size: 15px;} } /* guide1 responsive */ @media screen and (max-width:1420px) { #guide1 .sec1 {padding-top: 90px;} } @media screen and (max-width:1024px) { /* common */ #guide1 .sec1 {padding-top: 50px;} #guide1 .sec_tit h2 {font-size: 28px;} #guide1 .sec_tit h2 span {font-size:70%;} #guide1 .sec2 .sec_tit span {display: block; margin:10px 0 0;} #guide1 .line_box {padding: 30px 0;} #guide1 .num_list {margin-top: 15px;} #guide1 .dot_list li {font-size: 16px;} /* tab1 */ #guide1 .tab1 .dot_list li::before {top: 10px;} #guide1 .tab1 .box3 .line_box.flex_box > ul > li {flex-direction: column;} /* #guide1 .tab1 .box3 .line_box:nth-child(3) li p {font-size: 18px; background: url(../img/sub4/r_arrow.png) no-repeat right top 0px;} */ #guide1 .tab1 .box3 .line_box.flex_box li p {font-size: 17px; background: none;} #guide1 .tab1 .box3 .line_box.flex_box .num_list {margin-top: 15px; padding-left: 15px;} #guide1 .tab1 .box3 .line_box.flex_box .num_list li b {font-size: 16px;} #guide1 .tab1 .sub_table tbody th {font-size: 14px} /* tab3 */ #guide1 .tab3 .sub_tit h2 span {font-size: 18px;} #guide1 .tab3 .box1 .sub_tit h2 {flex-direction: column; align-items: flex-start;} } @media screen and (max-width:640px) { #guide1 .sec2 .sec_tit {margin-bottom: 30px;} #guide1 .sec_tit h2 {font-size: 24px;} #guide1 article > div:nth-child(n+2) {margin-top: 50px;} #guide1 .num_list {padding-left: 12px;} #guide1 .line_box {padding:20px 0;} #guide1 .dot_list li {font-size: 15px;} #guide1 .in_txt {margin-top: 15px;} #guide1 .tab1 .box3 .line_box.flex_box li.flex p {margin-bottom: 15px; font-size: 16px;} #guide1 .tab1 .box3 .line_box.flex_box .num_list {padding-left: 10px; margin-top: 0;} #guide1 .tab1 .box3 .line_box.flex_box .num_list li b {font-size: 15px;} #guide1 .tab1 .in_txt.blue {margin-top: 10px;} #guide1 .tab3 .sub_tit h2 span {font-size: 16px;} #guide1 .sub_tit h2 span {top:0;} #guide1 .tab3 .txt_wrap {margin-top: 15px;} } /* //rule1 end */ /* /230511 */ #guide1 .it1 {} #guide1 .it2 {color: #006bef;} #guide1 .wrap { border-bottom: 1px solid #ddd; margin-bottom: 80px;} #guide1 .wrap h4 {font-size: 28px; font-weight: 800; background: url('../img/sub4/arrow_blue.png') no-repeat left top 6px; padding-left: 25px; border-bottom: 2px solid #000; padding-bottom: 39px;} #guide1 .wrap h4.t {border-bottom: 0;} #guide1 .wrap h4 span {color: #006bef;} #guide1 .wrap .t_wrap {padding: 30px 0;} #guide1 .wrap p {position: relative; color: #555; font-weight: 200; font-size: 18px; line-height: 2;} /* #guide1 .wrap p:nth-child(1) {border-top: 2px solid #000;} */ #guide1 .wrap p.circle {padding-left: 20px;} #guide1 .wrap p.circle::before {content: ''; display: block; width: 6px; height: 6px; background-color: #555; position: absolute; left: 0; top: 15px; border-radius: 50%;} #guide1 .wrap:not(:nth-child(4)) .t_wrap p span {color: #006bef; font-weight: 700;} /* 생활관 장학조건 */ #guide1 .t_wrap .in_wrap {display: flex; padding-top: 30px;} #guide1 .t_wrap .in_wrap > p {background: url('../img/sub4/r_arrow.png') no-repeat right top 10px; padding-right: 55px; font-size: 22px;} #guide1 .t_wrap .in_wrap > p span { font-weight: 700;} #guide1 .t_wrap .in_wrap > div {margin-left: 30px;} #guide1 .t_wrap .in_wrap > div span {color: #006bef; font-weight: 700;} #guide1 .t_wrap .in_wrap > div i {font-style: normal; display: block; text-indent: 28px;} #guide1 .wrap:nth-child(4) .t_wrap > p {border-bottom: 1px solid #ddd; padding-bottom: 30px; font-weight: 700; font-size: 22px;} #guide1 .wrap:nth-child(4) .t_wrap p.circle::before {top: 19px;} /* 입사시 유의사항 table */ /* #guide1 table {border-collapse: collapse; width: 100%; border-top: 3px solid #006bef; } #guide1 table th, #guide1 table td{border: 1px solid #ddd; padding: 15px; line-height: 1.8; text-align: center; border-left: 0; border-right: 0} #guide1 table th {background-color: #000; font-weight: 600; font-size: 17px; } #guide1 table th:not(.sub_th) {color: #fff; border: 1px solid #000;} #guide1 table td {color: #9a9a9a; font-size: 14px;} #guide1 table .sub_th {background-color: #e6e6e6;} */ #guide1 .tab3 .sec1 table td {background-color: #fff;} #guide1 .tab3 .sec2 table tr td:nth-child(6) {background-color: #f1f7ff;} #guide1 .tab3 .wrap {border-bottom: 0;} /* guide1 responsive */ @media screen and (max-width:1024px) { #guide1 .it1 {margin-top: 0;} #guide1 .wrap p {font-size: 16px;} } @media screen and (max-width:640px) { } /* //guide1 end */ /* #guide1 .sec1 .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #guide1 .sec1 p {margin-top: 20px; color:#555;} #guide1 .sec1 .num_list {display: flex; flex-wrap:wrap;} #guide1 .sec1 .num_list li {width: 33.3%;} #guide1 .sec1 .num_list li:nth-child(n+2) {margin:0; } #guide1 .sec1 .num_list li:nth-child(n+4) {margin:10px 0 0; } #guide1 .sec2 .sub_table {margin-top: 40px;} */ /* guide1 responsive */ /* @media screen and (max-width:1024px) { #guide1 .sec1 .line_box {padding: 30px 0;} #guide1 .sec2 .sub_table {margin-top:30px;} #guide1 .sec1 .num_list li {width: 50%;} #guide1 .sec1 .num_list li:nth-child(n+3) {margin:10px 0 0; } } @media screen and (max-width:640px) { #guide1 .sec1 .line_box {padding: 25px 0;} #guide1 .sec1 .num_list li { width: 100%;} #guide1 .sec1 .num_list li:nth-child(n+2) {margin:5px 0 0 0; } } */ /* //guide1 end */ /* guide2 */ #guide2 .sec1 p {margin-top: 20px; color:#555;} #guide2 h3 {font-size: 22px; font-weight: 700;} #guide2 h3.mt30 {margin-top: 30px;} #guide2 .line_box {width: 100%; padding: 40px 0; border-top: 2px solid #000; border-bottom: 1px solid #ddd; } #guide2 .num_list {display: flex; flex-wrap:wrap;margin-top: 20px;} #guide2 .num_list li {width: 33.3%;} #guide2 .num_list li:nth-child(n+2) {margin:0; } #guide2 .num_list li:nth-child(n+4) {margin:10px 0 0; } #guide2 .sub_tit h2 { display: flex; align-items: center;} #guide2 .sub_tit h2 span {margin-left: 20px; position: relative; top: -1px;} #guide2 .sec2 .sub_table {margin: 25px 0;} #guide2 .sec2 .sub_table:last-child {margin-bottom: 0;} #guide2 .sec3 .dot_list li {margin-top: 20px;} /* guide2 responsive */ @media screen and (max-width:1024px) { #guide2 .line_box {padding: 30px 0;} #guide2 h3 {font-size: 18px;} #guide2 .num_list li {width: 50%;} #guide2 .num_list li:nth-child(n+3) {margin:10px 0 0; } #guide2 .sec2 .sub_table {margin: 30px 0;} #guide2 .sub_tit h2 {align-items: flex-start;} #guide2 .sub_tit h2 span {margin-left: 0;} } @media screen and (max-width:640px) { #guide2 .line_box {padding: 25px 0;} #guide2 h3 {font-size: 16px;} #guide2 h3.mt30 {margin-top: 25px;} #guide2 .num_list {margin-top: 10px;} #guide2 .num_list li { width: 100%;} #guide2 .num_list li:nth-child(n+2) {margin:5px 0 0 0; } #guide2 .sec2 .sub_table {margin: 30px 0 0;} } /* //guide1 end */ /* application */ #application .form {display: none;} #application .form.active {display: block;} #application .wrap {display: flex;} #application .wrap > div {width: 50%; } #application .wrap > div:nth-child(1) {border-right: 1px solid #ddd; margin-right: 50px; padding-right: 50px; } #application .wrap > div > div + div {margin-top: 45px;} #application .wrap h3 {font-size: 30px; font-weight: 800; color:#000; line-height: 1.2; margin-bottom: 20px;} #application .sel_btns {display: flex; flex-wrap:wrap;} #application .sel_btns li {width: calc(33.3% - 10px); margin-right: 15px;} #application .sel_btns li:nth-child(3n) {margin-right:0;} #application .sel_btns li:nth-child(n+4) {margin-top:15px;} #application .sel_btns li button {display: flex; align-items: center; justify-content: center; background: #fff; border:1px solid #ddd; cursor: pointer; padding: 15px; line-height: 1.2; font-size: 17px; font-weight: 300; color:#2c2c2c; transition: border-color .3s; position: relative; width: 100%; height: 100%;} #application .sel_btns li button::before {content: ''; display: block; width: 100%; height: 100%; border:2px solid #006bef; position: absolute; left:0; top:0; opacity: 0; transition: opacity .3s;} #application .sel_btns li button.active {border-color: #006bef; color:#006bef; font-weight: 600;} #application .sel_btns li button:hover {border-color: #006bef; color:#006bef; } #application .sel_btns li button.active::before, #application .sel_btns li button:hover::before {opacity: 1;} #application .plan .img {background: #fff; border:1px solid #ddd; overflow: hidden; position: relative; text-align: center; cursor: pointer; display: block;} #application .plan .more {display: flex ;align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; background: rgba(0,107,239,.65); font-size: 40px; color:#fff; position: absolute; transition: background-color .3s;z-index: 2; top:50%; left: 50%; transform: translate(-50%, -50%);} #application .plan .img:hover .more {background: rgba(11,21,42,.8);} #application .date ul {display: flex;} #application .date ul li {width: 50%; display: flex; align-items: center; } #application .date ul li:nth-child(1) {margin-right: 15px; padding-right: 15px;} #application .date h4 {font-size: 19px; font-weight: 500; margin-right: 12px; flex-shrink: 0;} #application .date h4 i {margin-right: 5px;} #application .date input {width: 100%; background: #fff; border:1px solid #ddd; height: 50px; font-size: 19px; padding: 0 15px;} #application .room {padding-top: 35px; border-top:1px solid #ddd; } #application .room .flex {display: flex; } #application .room .btn_wrap {background: #0b152a; padding: 17px; width: 345px; flex-shrink: 0;margin-right:40px; text-align: center;} #application .room .btn_wrap ul {display: flex; flex-wrap:wrap; } #application .room .btn_wrap ul li {width: calc(20% - 8px); margin-right: 10px; } #application .room .btn_wrap ul li:nth-child(5n) {margin-right: 0; } #application .room .btn_wrap ul li:nth-child(n+6) {margin-top: 10px; } #application .room .btn_wrap button {display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; background: #fff; font-size: 15px; font-weight: 300; transition: all .3s;} #application .room .btn_wrap button.sel {background: #006bef; color:#fff;} #application .room .btn_wrap button.unsel {background: #868686; color:#fff;} #application .room .app {width: 100%;} #application .room .app ul li {display: flex; word-break: keep-all; font-size: 20px; font-weight: 300; color:#000; line-height: 1.3;align-items: center;} #application .room .app ul li:nth-child(n+2) {margin-top: 20px; } #application .room .app ul li i {display: block; width: 25px; height: 25px; background: #fff; border:1px solid #ddd; margin-right: 10px; flex-shrink: 0; } #application .room .app ul li i.sel {background: #006bef; border-color: #006bef;} #application .room .app ul li i.unsel {background: #868686; border-color: #868686;} #application .room .app a {margin-top: 50px; display: flex; align-items: center; justify-content: center; height: 65px; width: 100%; max-width: 240px; background: #006bef; transition: background-color .3s; font-size: 20px; font-weight: 600; color:#fff; } #application .room .app a:hover {background-color: #0b152a; } /* app responsive */ @media screen and (max-width:1420px) { #application .wrap > div:nth-child(1) {margin-right: 35px; padding-right: 35px;} #application .sel_btns li {width: calc(33.3% - 6px); margin-right: 9px;} #application .sel_btns li:nth-child(n+4) { margin-top: 9px;} #application .sel_btns li button {font-size: 15px;} #application .date h4 {font-size: 16px; margin-right: 8px;} #application .date input {height: 45px; font-size: 16px;} #application .date ul li:nth-child(1) {margin-right: 10px; padding-right: 10px;} @media screen and (min-width:1025px) { #application .room .btn_wrap {margin-right: 15px; max-width: 320px; width: 70%; padding: 12px;} } #application .room .app ul li {font-size: 15px; align-items: flex-start; } #application .room .app ul li i {width: 20px; height: 20px; } #application .room .app button {height: 55px;font-size: 18px;} } @media screen and (max-width:1024px) { #application .wrap {flex-wrap:wrap;} #application .wrap > div {width: 100%;} #application .wrap > div:nth-child(1) {border:0; margin:0; padding: 0;} #application .wrap > div + div {margin-top:50px;} #application .wrap > div > div + div {margin-top: 50px;} #application .wrap h3 {font-size: 24px; } #application .room {border-top: 0; padding-top: 0;} #application .room .btn_wrap {width: 70%; margin-right: 30px; max-width:345px; padding: 12px;} } @media screen and (max-width:640px) { #application .wrap h3 {font-size: 22px; } #application .sel_btns li button {font-size: 13px; padding: 13px 10px;} #application .plan .more {font-size: 30px; width: 70px; height: 70px;} #application .date h4 {font-size: 15px; } #application .date input {font-size: 15px;} #application .room .btn_wrap {margin-right: 15px; } #application .room .btn_wrap button {font-size: 13px; height:35px;} } @media screen and (max-width:480px) { #application .date ul {flex-wrap:wrap;} #application .date ul li {width: 100%; } #application .date ul li:nth-child(1) {margin:0 0 15px; padding: 0; } #application .room .flex {flex-wrap:wrap;} #application .room .btn_wrap {width: 100%; margin:0 0 30px; max-width: 100%;} #application .room .btn_wrap button {height:40px;} #application .room .app ul li:nth-child(n+2) {margin-top: 15px;} #application .room .app button {font-size: 15px; height: 45px; margin-top: 30px; max-width: 100%;} } /* //app end */ /* */