/* Common **********************************************************************/ /* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */ /* Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 900; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); } /* Common **********************************************************************/ html,body {width:100%;scroll-behavior:smooth; } html {overflow-y:scroll; box-sizing:border-box;} *, *:before, *:after{box-sizing:inherit;} *{ -webkit-text-size-adjust:none; -webkit-text-size-adjust - auto | none | N% (default auto) } body {word-break:break-all;-ms-word-break:break-all; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;} fieldset,img {border:0px none; vertical-align:top;} dl,ul,ol,menu,li {list-style:none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;} button {border:0 none; background-color:transparent; cursor:pointer;} body { background:#fff;} body,th,td,input,select,textarea,button {font-size:13px; line-height:1.6; font-family: 'Noto Sans KR';color:#7d7d7d;} input, select, textarea, button{vertical-align:middle; } a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;} a:hover,a:focus{color:#333; text-decoration:none} table {border-collapse:collapse; border-spacing:0;} address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;} summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;} caption {position:static;} /* label hidden 처리 */ .invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;} label.invisible{*position:Absolute;} /* common */ .clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;} .clfix {display:inline-block;} .clfix {display:block;} * html .clfix {height:1%;} /* Hides from IE-mac */ .clfix {zoom:1;} /*for IE 5.5-7*/ .list {border-top:2px solid #1c1815; border-bottom:1px solid #1c1815;} /*멤버스킨*/ .title{font-size:15px; font-weight:bold;} /*테이블*/ .tbl_type,.tbl_type th,.tbl_type td{border:0} .tbl_type{width:100%;border-bottom:1px solid #e2e2e5; } .tbl_type th{padding:10px 0 10px 0;border-top:2px solid #383d4a; font-weight:bold; border-bottom:1px solid #e2e2e5;} .tbl_type p{font-size:11px; color:#b6b7bc;} .tbl_type td{padding:7px 0 7px 0;border-top:1px solid #e5e5e5;color:#4c4c4c; border-bottom:none; border-top:none; line-height:18px;} .tbl_type2,.tbl_type2 th,.tbl_type2 td{border:0} .tbl_type2{width:100%;border-bottom:1px solid #e7e7e7; } .tbl_type2 th{padding:10px 0 10px 0; background:#f9f9f9; text-align:center;} .tbl_type2 p{font-size:11px; color:#b6b7bc;} .tbl_type2 td{padding:10px 0 10px 10px; border-bottom:none; border-top:none; line-height:18px;} /* sub_id */ .sub_id_wrap{max-width:700px; margin: 0 auto; padding: 80px 50px; background: #fff; border-radius:15px; line-height: 1;} .sub_id_wrap h2{margin-bottom: 50px; font-size: 40px; color: #000; text-align: center;} .sub_id_wrap .form_wrap .tabs{display: flex;} .sub_id_wrap .form_wrap .tabs a{display: block; width: 50%; text-align: center; font-size: 20px; padding-block:15px;} .sub_id_wrap .form_wrap .tabs a.on{color: #000; border-bottom: 1px solid #000;} .sub_id_wrap .form_inner02{display: flex; flex-direction: column; gap:30px; align-items: center;} .sub_id_wrap .form_inner02 p{font-size: 22px; color: #444;} .sub_id_wrap .id_check .id_box{width: 100%; padding-block:15px; background: #F9F9F9; border-radius:10px; text-align: center; font-size: 18px; color: #222;} .sub_id_wrap .form_inner{display: flex; flex-direction: column; gap:30px; margin-top: 50px;} .sub_id_wrap .form_box{display: flex; flex-direction: column; gap:10px;} .sub_id_wrap .form_box label{font-size: 20px; color: #222; font-weight: 600;} .sub_id_wrap .submit_btn{border-radius: 10px; background: #000; font-size: 24px; color: #fff; width: 100%; height: 60px; margin-top: 30px;} .sub_id_wrap .login_wrap{display: flex; justify-content: center; gap:25px; margin-top: 50px;} .sub_id_wrap .login_wrap a{width: 240px; font-size: 24px; text-align: center; border-radius:10px; padding-block:10px;} .sub_id_wrap .login_wrap a.login_btn01{border:2px solid #000; color: #fff; background: #000;} .sub_id_wrap .login_wrap a.login_btn02{border:2px solid #000; color: #000; background: #fff;} .sub_id_wrap input[type="text"], .sub_id_wrap input[type="password"], .sub_id_wrap input[type="email"]{height: 60px; padding: 5px 15px; font-size: 18px; color: #666; border:none; border-radius: 10px; background: #F9F9F9;} .sub_id_wrap .submit_btn{border-radius: 10px; background: #000; font-size: 24px; color: #fff; height: 60px; margin-top: 30px;} /* sub_login */ .sub_login_wrap{padding: 80px 50px; background: #fff; border-radius:15px; line-height: 1;} .sub_login_wrap.account_box{max-width:700px; margin: 0 auto;} .sub_login_wrap h2{margin-bottom: 50px; font-size: 40px; color: #000; text-align: center;} .sub_login_wrap.account_box{padding: 50px;} .sub_login_wrap .input_box{display: flex; flex-direction: column; gap:30px;} .sub_login_wrap .login_md{display: flex; justify-content: space-between; margin-top: 20px;} .sub_login_wrap input[type="text"], .sub_login_wrap input[type="password"], .sub_login_wrap input[type="email"]{height: 60px; padding: 5px 15px; font-size: 18px; color: #666; border:none; border-radius: 10px; background: #F9F9F9;} .sub_login_wrap .form_inner{display: flex; flex-direction: column; gap:30px; margin-top: 50px;} .sub_login_wrap .form_box{display: flex; flex-direction: column; gap:10px;} .sub_login_wrap .form_box label{font-size: 20px; color: #222; font-weight: 600;} .sub_login_wrap .check_wrap {display: flex;align-items: center;gap: 15px;font-family: sans-serif;font-size: 16px;} .sub_login_wrap .check_wrap input[type="checkbox"] {appearance: none;width: 16px;height: 16px;border: 1px solid #ccc;border-radius: 2px;background-color: white;position: relative;cursor: pointer; margin-right: 5px;} .sub_login_wrap .check_wrap input[type="checkbox"]:checked {background-color: black;border-color: black;} .sub_login_wrap .check_wrap input[type="checkbox"]:checked::after {content: '✔';color: white;font-size: 12px;position: absolute;top: -2px;left: 2px;} .sub_login_wrap .check_wrap input[type="checkbox"]:disabled {background-color: #f0f0f0;border-color: #dcdcdc;cursor: not-allowed;} .sub_login_wrap .check_wrap input[type="checkbox"]:disabled::after {color: #ccc;} .sub_login_wrap .submit_btn{border-radius: 10px; background: #000; font-size: 24px; color: #fff; height: 60px; margin-top: 30px;} .sub_login_wrap .search_wrap{display: flex; align-items: center; gap:20px;} .sub_login_wrap .search_wrap a{position: relative; font-size: 16px ; color: #444;} .sub_login_wrap .search_wrap a:not(:last-child)::after{content:''; position: absolute; right: -10px; top: 50%; transform:translateY(-50%); width: 1px; height: 40%; background: #666;} .sub_login_wrap .external_wrap{display: flex; justify-content: space-evenly; margin-top: 50px;} .sub_login_wrap .external_wrap p{margin-top: 10px; text-align: center;} .sub_login_wrap .divider{display: flex; justify-content: center; align-items: center; gap:15px; margin-top: 35px; white-space:nowrap;} .sub_login_wrap .divider span{display: block; background: #DDD; width: 100%; height: 1px;} .sub_login_wrap .signup_link{display: flex; justify-content: center; gap:30px; margin-top: 20px; font-size: 14px; color: #444; line-height: 1.4;} .sub_login_wrap .signup_link a{font-size: 14px; color: #444; border-bottom: 1px solid #444; line-height: 1.4;} .sub_login_wrap .txt_area{display: flex; gap:50px;} .sub_login_wrap .txt_area > div{flex:1;} .sub_login_wrap .txt_area h3{font-size: 20px; color: #222; text-align: center; margin-bottom: 20px;} .sub_login_wrap .txt_area .txt_box{height: 400px; border-radius: 10px; background: #F9F9F9; padding: 25px; font-size: 16px; line-height: 1.6; overflow-y:auto;} .sub_login_wrap .txt_area .txt_box strong{display: block; padding-block: 15px;} .sub_login_wrap .txt_area.area_column{flex-direction: column;} .sub_login_wrap .txt_area .txt_box{height: 240px;} .sub_login_wrap .agree_wrap{margin-top: 25px;} .sub_login_wrap .check_label{display: flex;align-items: center;cursor: pointer;justify-content: flex-end; font-size: 14px; color: #444;} .sub_login_wrap .agree_box{appearance: none;width: 18px;height: 18px;border: 1px solid #ccc;border-radius: 3px;margin-right: 8px;position: relative;cursor: pointer;} .sub_login_wrap .agree_box::after {content: '✔'; font-size: 13px; position: absolute; left: 2px; top: -2px; color: #ccc; visibility: visible;} .sub_login_wrap .agree_box:checked {background-color: #000;border-color: #000;} .sub_login_wrap .agree_box:checked::after {color: #fff;} .sub_login_wrap .account_btn{display: flex; justify-content: center; gap: 20px; margin-top: 25px;} .sub_login_wrap .account_btn button{width: 160px; height:55px; font-size: 22px; border-radius:10px; padding-block:10px; border:1px solid #000; text-align: center; line-height: 1;} .sub_login_wrap .account_btn button.btn01{background: #fff; color: #000;} .sub_login_wrap .account_btn button.btn02{background: #000; color: #fff;} .sub_sign_wrap{line-height: 1;} .sub_sign_wrap h2{margin-bottom: 50px; font-size: 40px; color: #000; text-align: center;} .sub_sign_wrap input[type="text"], .sub_sign_wrap input[type="password"], .sub_sign_wrap input[type="email"]{height: 55px; padding: 5px 15px; font-size: 18px; color: #666; border:none; border-radius: 10px; background: #F9F9F9;} .sub_sign_wrap .form_list li{display: flex; gap:10px;} .sub_sign_wrap .form_list li:not(:first-child){margin-top: 30px;} .sub_sign_wrap .form_list li label{margin-top: 20px; width: 140px; flex-shrink:0; font-size: 20px; color: #000; font-weight: 500;} .sub_sign_wrap .form_list li label .required{color: #F00;} .sub_sign_wrap .form_list li input{width: 100%;} .sub_sign_wrap .form_list li .id_field{display: flex; gap:20px; width: 100%;} .sub_sign_wrap .form_list .add_wrap{width: 100%; display: flex; flex-direction: column; gap: 15px;} .sub_sign_wrap .form_list .address_row{display: flex; gap:20px; width: 100%;} .sub_sign_wrap .sub_btn{width: 150px; border:1px solid #000; flex-shrink: 0; font-size: 18px; color: #444; border-radius:5px;} /*회원가입 스킨*/ .inWrap {width:98%; border:1px solid #353638; border-width:1px 0; padding:30px 0;} .inWrap.type1 { padding:50px 0;} .inWrap.type2 { padding:0;} .inWrap.type3 { padding:5px 0; border-bottom-width:0;} .inWrap.width1 { width:680px !important; margin:0 auto;} .tbox1 { border:1px solid #cdcdcd; } .tbox1 .boxTit { padding:20px 20px 10px; color:#333; font-weight:700; font-size:16px;} .tbox1 .txt_scroll { height:200px; padding:0 20px; overflow-y:auto;} .txt_type { line-height:25px; font-size:13px; color:#666;} .agreement input{vertical-align:middle; border:none;} .btnType { display:inline-block; position:relative; transition:all 0.3s;} .btnType.btn1 { height:30px; line-height:28px; padding:0 45px; font-size:13px;} .btnType.btn1.color2 {border:1px solid #333; background:#333; cursor:pointer; } .btnWrap input{color:#fff;} .center{text-align:center;} /*=== main ===*/ #wrap {position: relative; width: 100%; min-width: 1400px; max-width: 1920px; margin: 0 auto; overflow: hidden;} .inner {width: 1200px; margin: 0 auto;} /* header */ #header { position:relative; z-index:2000;} #header > .inner { display:flex; align-items:center; justify-content:space-between; height:80px;} #header h1 { width:auto; height:100%;} #header h1 a { display:flex; align-items:center; height:100%;} #header .login_box { display:flex;} #header .login_box li { position:relative; padding:0 15px 0 16px;} #header .login_box li ~ li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:8px; background:#ddd;} #header .login_box li:first-child { padding-left:0;} #header .login_box li:last-child { padding-right:0;} #header .login_box li a { font-size:15px; color:#555;} #header .login_box li:hover a { color:#f18907;} #header .login_box li.logout { display:none;} #header .gnb_wrap { width:100%; background:#f18907;} #header .gnb_wrap .gnb { display:flex;} #header .gnb_wrap .gnb li { position:relative; width:20%;} #header .gnb_wrap .gnb li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:17px; background:rgba(255,255,255,.3);} #header .gnb_wrap .gnb li:last-child::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:17px; background:rgba(255,255,255,.3);} #header .gnb_wrap .gnb li a { display:flex; align-items:center; justify-content:center; width:100%; height:60px; font-size:18px; color:#fff; font-weight:500;} #header .all_menu { display:none; position:absolute; left:0; right:0; top:140px; background:#fff;} #header .all_menu .inner { display:flex; min-height:216px;} #header .all_menu .sub_menu { width:20%; text-align:center; border-left:1px solid #ddd;} #header .all_menu .sub_menu:last-child { border-right:1px solid #ddd;} #header .all_menu .sub_menu li { } #header .all_menu .sub_menu li ~ li { margin-top:5px;} #header .all_menu .sub_menu li:first-child { padding-top:20px;} #header .all_menu .sub_menu li:last-child { padding-bottom:20px;} #header .all_menu .sub_menu li a { font-size:15px; color:#555; line-height:30px;} #header .all_menu .sub_menu li:hover a { color:#f18907;} /* visual */ #visual_wrap { position:relative;} #visual_wrap .visual li { position:relative;} #visual_wrap .txt_wrap { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);} #visual_wrap .txt_wrap p { font-size:60px; color:#ffffff; font-family: 'TmonMonsori'; line-height:100px;} /* section */ #section01 { padding:60px 0 50px;} #section01 .inner { display:flex; justify-content:space-between;} #section01 .sec01_left { width:740px; height:440px;} #section01 .sec01_left .con_top { overflow:hidden; display:flex; justify-content:space-between; width:100%; height:50px; background:#f8f8f8; border-radius:10px;} #section01 .sec01_left .sec01_tab_menu { display:flex; height:100%;} #section01 .sec01_left .sec01_tab_menu a { display:flex; align-items:center; justify-content:center; padding:0 38px; height:100%; background:#f18907; border-radius:10px; font-size:15px; color:#fff;} #section01 .sec01_left .sec01_view { display:block; width:50px; height:50px; border-radius:10px; background:url(/assets/images/main/ico_view_black.png) center no-repeat;} #section01 .sec01_left .con_bt { overflow:hidden; margin-top:20px; width:100%; height:370px; border-radius:10px;} #section01 .sec01_left .sec01_slide_wrap { position:relative; height:100%;} #section01 .sec01_left .slide01 li { position:relative;} #section01 .sec01_left .slide01 li .img_wrap { position:relative; width:100%; padding-bottom:50%;} #section01 .sec01_left .slide01 li .img_wrap img { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%; width:auto; height:auto;} #section01 .sec01_left .txt_wrap { position:absolute; left:0; right:0; bottom:0; padding:0 230px 0 30px; height:64px; background:rgba(0,0,0,.5);} #section01 .sec01_left .txt_wrap p { font-size:15px; color:#fff; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden; line-height:64px;} #section01 .btn_wrap01 { display:flex; position:absolute; right:0; bottom:0; z-index:3000;} #section01 .btn_wrap01 a { display:block; width:64px; height:64px; text-indent:-9999px;} #section01 .btn_wrap01 a ~ a { margin-left:1px;} #section01 .btn_wrap01 a.btn_prev01 { background:#333 url(/assets/images/main/sec01_btn_prev.png) center no-repeat;} #section01 .btn_wrap01 a.btn_next01 { background:#333 url(/assets/images/main/sec01_btn_next.png) center no-repeat;} #section01 .btn_wrap01 a.btn_pause { background:#333 url(/assets/images/main/sec01_btn_pause.png) center no-repeat;} #section01 .btn_wrap01 a.btn_play { display:none; background:#333 url(/assets/images/main/sec01_btn_play.png) center no-repeat;} #section01 .sec01_right { width:420px; height:440px;} #section01 .calendar { overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; height:100%; border:1px solid #ddd; border-radius:10px; padding-top:30px;} #section01 .calendar .top { display:flex; justify-content:center; align-items:center;} #section01 .calendar .top a.btn_prev02 { display:block; width:7px; height:11px; background:url(/assets/images/main/calendar_btn_prev.png) center no-repeat; text-indent:-9999px;} #section01 .calendar .top a.btn_next02 { display:block; width:7px; height:11px; background:url(/assets/images/main/calendar_btn_next.png) center no-repeat; text-indent:-9999px;} #section01 .calendar .top span { margin:0 35px; font-size:22px; color:#f18907; font-weight:500; line-height:1;} #section01 .calendar_con { padding:10px 45px; height:280px;} #section01 .calendar_con ul { display:flex; margin-top:10px;} #section01 .calendar_con ul.days { margin-top:0;} #section01 .calendar_con ul li { position:relative; width:32px; height:32px; border-radius:50%; text-align:center; line-height:32px; cursor:pointer; font-size:15px; color:#222;} #section01 .calendar_con ul li.dot::before { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#f18907;} #section01 .calendar_con ul li ~ li { margin-left:18px;} #section01 .calendar_con ul li:first-child { color:#ff6464;} #section01 .calendar_con ul li:last-child { color:#0b318f;} #section01 .calendar_con ul li.event01 { background:#f18907; color:#fff;} #section01 .calendar_con ul li.event02 { background:#cbcbcb;} #section01 .schedule_con { display:flex; width:100%; height:66px; border-top:1px solid #ddd;} #section01 .schedule_con .con_date { display:flex; justify-content:center; align-items:center; width:74px; height:100%; background:#f18907;} #section01 .schedule_con .con_date span { font-size:13px; color:#fff;} #section01 .schedule_con .in_schedule { display:flex; align-items:center; padding:0 20px; width:calc(100% - 134px); height:100%;} #section01 .schedule_con .in_schedule ul li { font-size:13px; color:#555; line-height:1;} #section01 .schedule_con .in_schedule ul li ~ li { margin-top:10px;} #section01 .schedule_con .schedule_view { display:block; width:60px; height:100%; background:#333 url(/assets/images/main/ico_view_white.png) center no-repeat;} #section02 { padding-bottom:80px;} #section02 .inner { display:flex; justify-content:space-between; height:320px;} #section02 .con01 { width:380px !important; height:100%; border-radius:10px; background:#fef9f2; padding:10px 15px;} #section02 .con01 .in_con .con_top strong { font-size:18px; color:#222; font-weight:700; line-height:1; padding-top: 5px; height: 40px; display: block; position: relative;} #section02 .con01 .in_con .con_top strong::before {position: absolute; content: ""; width: 100%; height:1px; bottom: 0; background:#ddd; left: 0; } #section02 .con01 .in_con .con_top strong::after {position: absolute; content: ""; width: 50px; height: 3px; bottom: 0; background:#f18907; border-radius:3px; left: 0; } #section02 .con01 .top .date_box {border:1px solid #f18907; background: #fff !important;} #section02 .con02 { width:440px; height:100%;} #section02 .con02 .con02_top { overflow:hidden; display:flex; justify-content:space-between; width:100%; height:50px; border-radius:10px; background:#f8f8f8;} #section02 .con02 .tab_menu_wrap { display:flex; height:100%;} #section02 .con02 .tab_menu_wrap a { display:block; width:130px; height:100%; border-radius:10px; text-align:center; line-height:50px; font-size:15px; color:#222;} #section02 .con02 .tab_menu_wrap a.on { background:#f18907; color:#fff;} #section02 .con02 .tab_view_wrap a { display:block; width:50px; height:50px; background:url(/assets/images/main/ico_view_black.png) center no-repeat;} #section02 .con02 .tab_container { } #section02 .con02 .top { display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid #ddd;} #section02 .con02 .top .date_box { display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:100px; height:100px; border-radius:50%; background:#f8f8f8;} #section02 .con02 .top .date_box strong { font-size:25px; color:#222; font-weight:500;} #section02 .con02 .top .date_box span { font-size:15px; color:#555;} #section02 .con02 .top .txt_box { width:calc(100% - 115px);} #section02 .con02 .top .txt_box strong { display:block; font-size:18px; color:#222; font-weight:500; line-height:1; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #section02 .con02 .top .txt_box p { margin-top:15px; font-size:15px; color:#555; line-height:25px; height:50px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;} #section02 .con02 .bt { padding-top:20px;} #section02 .con02 .bt ul li { position:relative; padding-left:13px; line-height:1;} #section02 .con02 .bt ul li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:50%; background:#f18907;} #section02 .con02 .bt ul li ~ li { margin-top:15px;} #section02 .con02 .bt ul li a { display:flex; align-items:center; justify-content:space-between;} #section02 .con02 .bt ul li a p { width:calc(100% - 105px); font-size:15px; color:#555; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} #section02 .con02 .bt ul li a span { font-size:15px; color:#555;} #section02 .con03 { width:300px; height:100%; display: flex; flex-wrap:wrap; gap:20px; } #section02 .con03 .banner { overflow:hidden; position:relative; padding:10px; width:calc((100% - 20px) / 2); height:150px; border-radius:10px;} #section02 .con03 .banner01 {background-size:cover; background:#fbf7eb;} #section02 .con03 .banner02 {background-size:cover; background:#f4f3ef;} #section02 .con03 .banner03 {background:#fff0f2;} #section02 .con03 .banner04 {background:#f1f5f9;} #section02 .con03 .banner .tit { font-size:20px; color:#222; font-weight:300; line-height:1.5;} #section02 .con03 .banner .tit em { position:relative;font-weight:700; word-break:keep-all;} #section02 .con03 .banner01 strong { display:block; margin-top:10px; font-size:20px; color:#f18907; font-weight:500; line-height:1; letter-spacing:-0.5px;} #section02 .con03 .banner01 p { margin-top:16px; font-size:19px; color:#444; line-height:25px;} #section02 .con03 .banner02 p { margin-top:22px; font-size:15px; color:#444; line-height:25px; word-break:keep-all;} #section02 .con03 .banner02 .banner_view { position:absolute; right:0; bottom:0; width:45px; height:45px; background:#333 url(/assets/images/main/ico_view_white.png) center no-repeat;} #section03 { padding:20px 0; border-top:1px solid #ddd;} #section03 .sec03_slide_wrap {} #section03 .slide02 li a { display:block; width:100%;} #section03 .slide02 li a .img_wrap { position:relative; width:100%; padding-bottom:31.25%;} #section03 .slide02 li a .img_wrap img { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%; width:auto; height:auto;} /* footer */ #footer { background:#222;} #footer .top_footer { border-bottom:1px solid #434343;} #footer .top_footer .inner { display:flex; justify-content:space-between; align-items:center; height:55px;} #footer .top_footer .footer_link { display:flex;} #footer .top_footer .footer_link li { position:relative; padding:0 20px 0 21px;} #footer .top_footer .footer_link li:first-child { padding-left:0;} #footer .top_footer .footer_link li:last-child { padding-right:0;} #footer .top_footer .footer_link li ~ li::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:8px; background:#434343;} #footer .top_footer .footer_link li a { font-size:15px; color:rgba(255,255,255,.3);} #footer .top_footer .footer_link li:first-child a { color:rgba(255,255,255,1);} #footer .top_footer .site_box { position:relative; width:245px; height:100%; border:1px solid #434343; border-top:0; border-bottom:0;} #footer .top_footer .site_box button { width:100%; height:100%;} #footer .top_footer .site_box button span { padding-right:26px; font-size:15px;l color:rgba(255,255,255,.3); background:url(/assets/images/main/link_arrow_top.png) right center no-repeat;} #footer .top_footer .site_box button.on span { background:url(/assets/images/main/link_arrow_down.png) right center no-repeat;} #footer .top_footer .site_box ul { display:none; position:absolute; left:0; right:0; bottom:100%; width:100%; background:#222; z-index:1000;} #footer .top_footer .site_box ul li { width:100%; height:55px; border-bottom:1px solid rgba(255,255,255,.3);} #footer .top_footer .site_box ul li a { display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:15px; color:rgba(255,255,255,.3);} #footer .bt_footer { padding:30px 0 40px;} #footer .bt_footer .inner { display:flex; justify-content:space-between; align-items:center;} #footer .bt_footer address { font-size:15px; color:rgba(255,255,255,.3); line-height:33px;} #footer .bt_footer address span { padding-right:20px; color:#fff;} #footer .bt_footer address span:nth-of-type(3) { padding-left:40px;} #footer .bt_footer address .copy { margin-top:10px; line-height:1;} /* === SUB === */ #sub_visual_wrap { position:relative;} #sub_visual_wrap .txt_wrap { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; line-height:1;} #sub_visual_wrap .txt_wrap h2 { margin-bottom:28px; font-size:35px; color:#222;} #sub_visual_wrap .txt_wrap .sub_list { display:inline-flex;} #sub_visual_wrap .txt_wrap .sub_list li { position:relative; padding:0 15px 0 20px; font-size:15px; color:#222;} #sub_visual_wrap .txt_wrap .sub_list li:first-child { padding-left:0;} #sub_visual_wrap .txt_wrap .sub_list li:last-child { padding-right:0;} #sub_visual_wrap .txt_wrap .sub_list li ~ li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:11px; background:url(/assets/images/sub/sub_list_arrow_right.png) center no-repeat;} /* tab_menu */ .tab_menu { position:relative; display: flex; width:100%; height:65px; border-bottom: 1px solid #ddd; background:#fff; font-size:0;} .tab_menu a.home{ display: block; position:relative; width: 420px; height: 100%; background: #f18907;} .tab_menu a.home::after{ content:''; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:24px; height:25px; background:url(/assets/images/sub/tab_ico_home.png) right center no-repeat;} .tab_menu .menu {display: flex; width:calc(100% - 420px); height:auto;} .tab_menu .menu > li {position:relative; height:100%; background:url("/assets/images/sub/tab_arrow_down.png") center right 20px no-repeat; border-right:1px solid #ddd;} .tab_menu .menu > li.menulink02 > a { color:#f18907;} .tab_menu .menu > li.on {background:url("/assets/images/sub/tab_arrow_up.png") center right 20px no-repeat;} .tab_menu .menu > li > a {display:flex; align-items:center; padding:0 20px; min-width:264px; height:100%; font-size: 15px; color:#555; } .tab_menu .menu > li ul {display:none; position:absolute; width:100%; top:100%; left:-1px; box-sizing:content-box; background-color:#FFF; border:1px solid #ddd; z-index:100;} .tab_menu .menu > li ul li:first-child{padding-top: 10px;} .tab_menu .menu > li ul li:last-child{padding-bottom: 10px;} .tab_menu .menu > li ul li a {display:flex; align-items:center; padding: 10px 0 10px 20px; font-size:15px; color:#555;} .tab_menu .menu > li ul li.on a { color:#f18907;} #sub_contents { padding:78px 0 100px;} #sub_contents .contop { margin-bottom:50px;} #sub_contents .contop h3 { position:relative; padding-bottom:28px; font-size:35px; color:#222; font-weight:500; line-height:1; text-align:center;} #sub_contents .contop h3::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:40px; height:2px; background:#f18907;} h5.sub_tit01{position:relative; font-size:25px; color:#222; padding-left:35px; margin-bottom:40px;} h5.sub_tit01:before{position:absolute; width:22px; height:22px; display:block; content:""; background:url(/assets/images/sub/sub_tit_icon01.png) no-repeat; left:0; top:10px;} /* sub0101 */ .sub0101 .history{position:relative;} .sub0101 .history:before{position:absolute; width:1px; height:98%; content:""; display:block; background:#ddd; left:0; top:30px;} .sub0101 .history > li .line_list01{display:inline-block; width:100%; vertical-align:top; } .sub0101 .history > li .line_list01 li{margin-bottom:60px;} .sub0101 .history > li .line_list01 li:last-child{margin-bottom:0;} .sub0101 .history > li .line_list01 li b{display:inline-block; color:#222; padding-left:50px; vertical-align:top; position:relative; color:#555; font-weight:normal;} .sub0101 .history > li b:before{position:absolute; width:30px; height:30px; content:""; display:block; background:rgba(241,137,7,0.1); border-radius:50%; left:-15px; top:0px;} .sub0101 .history > li b:after{position:absolute; width:10px; height:10px; content:""; display:block; background:#f18907; border-radius:50%; left:-5px; top:10px;} .sub0101 .history > li .line_list01 li b span{color:#f18907; font-weight:500;} /* sub0102 */ .sub0102_wrap > div{margin-bottom:60px;} .sub0102_wrap > div:last-child{margin-bottom:0;} .sub0102_wrap ul.list_wrap{font-size:0;} .sub0102_wrap ul.list_wrap li{display:inline-block; width:100%; border:1px solid #ddd; border-top:2px solid #f18a07; padding:20px; width:calc(25% - 15px); margin-right:20px; margin-top:20px; font-size:0;} .sub0102_wrap ul.list_wrap li:nth-child(-n+4){margin-top:0;} .sub0102_wrap ul.list_wrap li:nth-child(4n){margin-right:0;} .sub0102_wrap ul.list_wrap li img{display:inline-block; vertical-align:middle; border-radius:10px;} .sub0102_wrap ul.list_wrap li .txt_wrap{display:inline-block; width:calc(100% - 90px); vertical-align:middle; padding-left:20px;} .sub0102_wrap ul.list_wrap li span{color:#f18a07; font-size:14px; font-weight:500; word-break:keep-all;} .sub0102_wrap ul.list_wrap li p{color:#222; font-size:16px; font-weight:600;} .sub0102_wrap ul.list_wrap li em{color:#666; font-size:14px;} /* sub0104 */ .sub0104 .txt_wrap{ /* border:1px solid #f18907;*/ background:#f9f9f9; padding:30px; border-radius:20px; color:#222;} .sub0104 .txt_wrap p ~ p{margin-top:20px;} .sub0104 .con01 .txt_wrap p{border-bottom:0px dashed #ddd; padding:10px 0 10px 10px;} .sub0104 .txt_wrap p {border-bottom:1px dashed #ddd; padding:0 0 20px 10px;} .sub0104 .con02{margin-top:50px;} /* sub0105 */ .contact{border-top:2px solid #f18907; width:100%; margin-top:35px;} .contact tr{border:1px solid #ddd;} .contact th{color:#f18907; background:#f9f9f9; border-right:1px solid #ddd; padding:20px;} .contact th:nth-child(3){border-left:1px solid #ddd;} .contact td{padding:20px;} /*sub0402*/ .sub0402{} .sub0402 table{width:100%;border-top:2px solid #f18907;table-layout: fixed;} .sub0402 table th{border-bottom:1px solid #ddd;background:#f7f7f7;padding:15px 0;font-weight:500;color:#222;} .sub0402 table td{text-align:center;border-bottom:1px solid #ddd;padding:15px 15px;;} .sub0402 table td a{display:block;text-align:left;line-height: 1; text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;width: 100%; overflow: hidden;color:#555} /*sub04_view*/ .sub04_view{} .sub04_view .con1{padding:20px 0px;border-top:2px solid #f18907;border-bottom:1px solid #ddd;width:100%;} .sub04_view .con1 em{font-size:18px;display:block;line-height:25px;font-weight:500;color:#222;padding:0 20px;} .sub04_view .con1 div{margin-top:20px;padding:21px 20px 0;border-top:1px solid #ddd;display:flex;} .sub04_view .con1 div p{position:relative;margin-right:20px;padding-right:21px; } .sub04_view .con1 div p:before{position:absolute;right:0;top:8px;background:#ddd;width:1px;height:10px;content:'';} .sub04_view .con1 div p:last-child:before{content:none;} .sub04_view .con1 div p span{ color:#222;margin-right:10px;} .sub04_view .con2{border-bottom:1px solid #ddd;} .sub04_view .con2 ul{padding:20px 20px;} .sub04_view .con2 ul li{display:flex;margin-top:15px;} .sub04_view .con2 ul li:nth-child(1){margin-top:0;} .sub04_view .con2 ul li{width:100%; display:flex;align-items: center;} .sub04_view .con2 ul li label{width:100%;padding-left:10px;font-size:18px;} .sub04_view .con2 ul li .right{width:calc(100% - 800px);padding-left:50px;display: flex;align-items: center;} .sub04_view .con2 ul li .right p{color:#222;width:55px;padding-right:20px;} .sub04_view .con2 ul li .right .gauge_bar_wrap{border-radius:25px;overflow:hidden;width:calc(100% - 55px);height: 13px;background: #f7f7f7;} .sub04_view .con2 ul li .right .gauge_bar_wrap .gauge_bar{position: relative;height: 100%;} .sub04_view .con2 ul li .right .gauge_bar_wrap .gauge_bar:after{content: ''; position: absolute; left: 0; top: 0;width: 100%; height: 100%; background-color: #f18907;transition: 1s;} .sub04_view.on .con2 ul li .right .gauge_bar_wrap .gauge_bar:after{width: 100%;} .sub04_view.on .con3{margin-top:50px;display:flex;justify-content: center;} .sub04_view.on .con3 a{width:150px;height:50px;line-height:50px;background:#f18907;color:#fff;display:block;text-align:center;} .sub04_view.on .con3 a.con_btn02{background:#fff;color:#f18907;border:1px solid #f18907} /* sub0403 */ .sub0403_wrap .btn_wrap{margin-bottom: 20px;} .sub0403_wrap .btn_wrap ul li{display: inline-block; width: 150px; text-align: center; border: 1px solid #ddd; height: 45px; line-height:45px ; margin-right: 5px; font-size: 16px;} .sub0403_wrap .btn_wrap ul li a{display: block; color: #666;} .sub0403_wrap .btn_wrap ul li.on{background: #f18907; border: 1px solid #f18907;} .sub0403_wrap .btn_wrap ul li.on a{color: #fff;} .sub0403_wrap .btn_wrap2{margin-bottom: 20px; text-align: right;} .sub0403_wrap .btn_wrap2 ul li{display: inline-block; position: relative; padding:0 10px; font-size: 16px;} .sub0403_wrap .btn_wrap2 ul li:before{position: absolute; content: ''; width: 1px; height: 13px; background: #ddd; right: 0; top: 5px;} .sub0403_wrap .btn_wrap2 ul li:last-child:before{display: none;} .sub0403_wrap .btn_wrap2 ul li a{color: #666;} .sub0403_wrap .btn_wrap2 ul li.on a{color: #f18907; font-weight: 500;} .state01{ border: 1px solid #f18907; width: 60px; margin: 0 auto; color: #f18907; padding: 3px !important; } .state02{ border: 1px solid #ddd; background: #ddd; width: 60px; margin: 0 auto; color: #888; padding: 3px; } .state03{ border: 1px solid #f12807; width: 60px; margin: 0 auto; color: #f12807; padding: 3px; } .edit_box{text-align: center; display: table; background: #f1f1f1; width: 100% ; margin: 30px 0; height: 200px;} .edit_box p{display: table-cell; vertical-align: middle;} .agree_wrap{margin-bottom: 30px;} .agree_wrap a.agree{float: left; width: 200px; border: 1px solid #ccc; color: #f18907; background: #f9f9f9; height: 50px; line-height: 50px; text-align: center; border-radius:5px ;} .agree_wrap p{float: right; line-height: 50px; font-size: 18px;} .agree_wrap p span{font-weight: 500; color: #f18907;} .comment_wrap{margin-top: 30px;} .comment_wrap p.tit{font-size: 16px; color: #222; font-weight: 500; border-bottom: 1px solid #222; padding-bottom: 5px;} .comment_wrap .comment{ padding: 10px 20px; border-bottom: 1px solid #ddd;} .comment_wrap .comment strong{color: #222; display: inline-block; margin-right: 20px;} .comment_wrap .comment p{display: inline-block; color: #444; margin-right: 20px;} .comment_wrap .comment span{color: #888;}